/* ==========================================================================
   Panel « Machines utilisant cette pièce détachée » (fiche produit d'une pièce)
   ==========================================================================
   Pendant du panel « Pièces détachées » de la fiche machine. Les CARTES sont
   stylées par recherche.css (règles scopées sur .ecp-card, chargé par le
   template) : on ne décrit ici que l'enveloppe du panel.

   Les valeurs de .bestio-ecp / .bestio-ecp-title sont redéclarées plutôt
   qu'héritées de product_pieces.css : cette feuille-là n'est chargée que
   lorsqu'il y a des PLANS à afficher, ce qui n'est jamais le cas sur une fiche
   de pièce. */

.bestio-ecp-machines {
    margin-top: 2.5rem;
    margin-bottom: 0;
    width: 100%;
    max-width: none;
    /* Décale l'ancrage du scroll (#bestio-ecp-machines) pour que le titre ne
       passe pas sous le header sticky du thème. */
    scroll-margin-top: 120px;
    /* Respiration latérale, reprise de #js-product-list (padding: 15px) sur la
       page listing. Le thème neutralise le padding Bootstrap de .container
       (padding-left/right: 0) : sans ce relais, les cartes touchent le bord de
       l'écran en mobile. */
    padding-left: 15px;
    padding-right: 15px;
}

.bestio-ecp-machines .bestio-ecp-title {
    margin-bottom: .75rem;
    text-align: center;
}

/* Phrase d'introduction : discrète, elle situe le panel sans concurrencer le
   titre ni les cartes. */
.bestio-ecp-machines-intro {
    margin: 0 auto 1.5rem;
    max-width: 720px;
    text-align: center;
    font-size: 14px;
    opacity: .75;
}

/* La grille .ecp-finder-results porte une marge haute pensée pour la page de
   recherche (sous la barre de saisie) ; ici l'intro joue déjà ce rôle. */
.bestio-ecp-machines .ecp-finder-results {
    margin-top: 0;
}

/* Renvoi vers la recherche quand la liste atteint le plafond absolu. */
.bestio-ecp-machines-link {
    margin: 1.25rem 0 0;
    text-align: center;
    font-size: 14px;
}

.bestio-ecp-machines-link a {
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Pagination « Voir plus »
   --------------------------------------------------------------------------
   Calquée sur .ecp-finder-more de la page de recherche (recherche.css) : même
   traitement en LIEN souligné et non en bouton plein — la pagination est une
   commodité, pas l'action principale ; un second bouton vert concurrencerait le
   « Voir les vues éclatées » présent sur chaque carte. Les règles sont
   redéclarées plutôt que partagées : les deux zones vivent sur des pages
   différentes et doivent pouvoir diverger sans se casser mutuellement. */

.bestio-ecp-machines-more-wrap {
    display: flex;
    justify-content: center;
    margin-top: 28px;
}

.bestio-ecp-machines-more-wrap[hidden] {
    display: none;
}

.bestio-ecp-machines-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 24px;
    background: none;
    border: 0;
    padding: 4px 2px;
    color: #157A21;
    font-weight: 600;
    font-size: 14px;
    text-decoration: underline;
    cursor: pointer;
    transition: color .15s ease;
}

.bestio-ecp-machines-more-btn:hover,
.bestio-ecp-machines-more-btn:focus {
    background: none;
    color: #0C4713;
    text-decoration: underline;
}

.bestio-ecp-machines-more-btn[disabled] {
    cursor: progress;
}

.bestio-ecp-machines-more-spinner {
    display: none;
    width: 15px;
    height: 15px;
    border: 2px solid rgba(21, 122, 33, .25);
    border-top-color: #157A21;
    border-radius: 50%;
    animation: bestio-ecp-machines-spin .7s linear infinite;
}

/* Pendant le chargement, le lien garde sa hauteur : sans largeur minimale, le
   passage du libellé au spinner ferait sauter la mise en page. */
.bestio-ecp-machines-more-wrap.is-loading .bestio-ecp-machines-more-btn {
    min-width: 150px;
    cursor: progress;
}

.bestio-ecp-machines-more-wrap.is-loading .bestio-ecp-machines-more-label {
    display: none;
}

.bestio-ecp-machines-more-wrap.is-loading .bestio-ecp-machines-more-spinner {
    display: block;
}

@keyframes bestio-ecp-machines-spin {
    to { transform: rotate(360deg); }
}

/* Respecte « réduire les animations » (accessibilité) : le spinner ralentit au
   lieu de tourner vite, comme celui de la page de recherche. */
@media (prefers-reduced-motion: reduce) {
    .bestio-ecp-machines-more-spinner {
        animation-duration: 2.4s;
    }
}

/* Message d'erreur de chargement : discret, réservé aux échecs réseau. */
.bestio-ecp-machines-status {
    margin: .75rem 0 0;
    text-align: center;
    font-size: 13px;
    color: #b4482e;
}

.bestio-ecp-machines-status:empty {
    display: none;
}