/* Page « Trouver ma pièce détachée » (bestioeclatespieces).
 *
 * Couleurs de marque (cf. _variables.scss du thème) :
 *   green #0C4713 · soft_green #157A21 · lighter_green #F2F7F1
 *   grey #767676 · red_flag #B4271A · light_red #fbe2e0
 *
 * La grille de résultats reprend les breakpoints du listing produits et du
 * panel éclaté (product_pieces.css) : 4→3→2→1 colonnes.
 */

#ecp-finder {
    display: flex;
    flex-direction: column;
}

/* ==========================================================================
   Hero — calé sur .block-category (pages catégorie / contact)
   ========================================================================== */
.ecp-finder-hero {
    text-align: center;
}

.ecp-finder-hero .h1 {
    margin-bottom: 0.5rem;
}

.ecp-finder-hero p {
    margin: 0 auto;
    max-width: 700px;
    color: #767676;
}

/* ==========================================================================
   Panel de recherche
   ========================================================================== */
/* Bandeau PLEINE LARGEUR : la page vit dans un conteneur à gouttières, on fait
   donc déborder le fond jusqu'aux bords de la fenêtre.
   `100vw` + décalage de la moitié de la différence conteneur/fenêtre : la
   technique reste correcte quelle que soit la largeur du conteneur parent, sans
   avoir à sortir la section du flux ni à connaître la valeur des gouttières.
   `padding-right` compense la barre de défilement (100vw l'ignore). */
.ecp-finder-panel {
    background: #F2F7F1;
    margin-top: 1.5rem;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: 40px 20px;
    box-sizing: border-box;
    /* Pas de border-radius : un bandeau pleine largeur se lit mieux à bords
       francs, sinon les coins arrondis « flottent » hors de l'écran. */
}

/* Le contenu du bandeau reste centré et lisible, lui. */
.ecp-finder-panel-inner {
    max-width: 760px;
    margin: 0 auto;
}

/* ==========================================================================
   Slider d'accueil — machines à vue éclatée les plus recherchées
   ==========================================================================
   La section réutilise telles quelles les classes du bloc home « Les
   promotions en cours » (.featured-products.promotions_slider) : fond vert
   full-bleed, cartes blanches et config Splide 5/4/3/2/1 viennent donc du
   thème, il n'y a rien à redéclarer ici.

   Seul l'espacement change : sur la home le bloc suit une grille de sections
   espacées de 60px, alors qu'ici il vient coller SOUS le bandeau de recherche
   — deux pleines largeurs qui doivent s'enchaîner sans couture. */
.ecp-finder-top.promotions_slider.featured-products {
    margin-top: 0;
    padding-top: 40px;
}

/* .featured-products pose un padding-top de 60px (rythme de la home) qui, ici,
   doublerait celui de la section elle-même. */
.ecp-finder-top.featured-products {
    padding-top: 40px;
}

/* Titre borné : celui du thème est en `width: 100%` (calé sur « Les promotions
   en cours », deux fois plus court). Le nôtre mesure ~890px sur une ligne et
   s'étirerait donc sur toute la largeur de l'écran en desktop.

   620px plutôt qu'une borne juste sous sa largeur naturelle : la coupure
   tomberait sinon avant le dernier mot, laissant « recherchées » seul sur la
   seconde ligne. Ici les deux lignes sont d'un poids comparable.
   `margin: 0 auto` recentre ; `width: 100%` du thème reste actif en dessous. */
.ecp-finder-top .products-section-title {
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

/* Le slider reste TOUJOURS visible, mais il passe SOUS les résultats dès qu'une
   recherche est active : ses ~580px s'intercaleraient sinon entre le champ et
   les résultats, qui partiraient sous la ligne de flottaison — l'utilisateur
   croirait sa recherche vide.

   `order` plutôt qu'un déplacement dans le DOM : #ecp-finder est un conteneur
   flex, l'ordre visuel se pilote donc en CSS sans toucher au balisage (l'ordre
   source reste celui de la lecture hors recherche, et le JS n'a qu'une classe à
   basculer). Les frères gardent l'ordre par défaut (order: 0). */
#ecp-finder.has-results .ecp-finder-top {
    order: 1;
}

/* Le CTA contact ferme toujours la page : ordre supérieur à celui que prend le
   slider pendant une recherche (1), donc il reste dessous dans les deux états.

   Full-bleed : sur l'accueil, #contact_footer vit HORS de #wrapper et occupe
   donc naturellement toute la largeur. Ici il est imbriqué dans le conteneur à
   gouttières de la page, d'où le débord explicite — même technique que
   .ecp-finder-panel plus haut (100vw + décalage de la moitié de l'écart
   conteneur/fenêtre), pour que la bande de fond touche les bords de l'écran. */
.ecp-finder-contact {
    order: 2;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* La bande porte déjà son propre padding vertical (56px) : la marge du thème
   ajouterait un liseré blanc entre le slider et le fond du panel, alors que les
   deux pleines largeurs doivent s'enchaîner sans couture. */
.ecp-finder-contact #contact_footer {
    margin-top: 0;
}

@media screen and (max-width: 768px) {
    .ecp-finder-top.promotions_slider.featured-products,
    .ecp-finder-top.featured-products {
        margin-top: 0;
        padding-top: 30px;
    }
}

.ecp-finder-panel-title {
    margin: 0 0 6px;
    text-align: center;
    color: #0C4713;
    font-size: 20px;
    font-weight: 700;
}

/* Sous-titre : même traitement que le chapô du hero (gris, centré) — c'est un
   descriptif de section, pas une étiquette de champ. */
.ecp-finder-subtitle {
    margin: 0 auto 18px;
    max-width: 640px;
    text-align: center;
    color: #767676;
    font-size: 14px;
    line-height: 1.5;
}

.ecp-finder-form {
    max-width: 720px;
    margin: 0 auto;
}

/* Étiquette du champ : visuellement masquée (le sous-titre la double à l'écran)
   mais conservée pour les lecteurs d'écran et l'association label/input.
   Le thème fournit .sr-only ; on la redéclare ici pour que la page reste
   correcte même si cette classe utilitaire venait à disparaître du thème. */
.ecp-finder-form .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Champ en gélule + bouton intégré, comme les formulaires du thème. */
.ecp-finder-field {
    display: flex;
    align-items: center;
    gap: 8px;
    background: white;
    border: 1px solid rgba(12, 71, 19, 0.15);
    border-radius: 50px;
    padding: 6px 6px 6px 18px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ecp-finder-field:focus-within {
    border-color: #157A21;
    box-shadow: 0 0 0 3px rgba(21, 122, 33, 0.15);
}

.ecp-finder-field-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: #767676;
}

.ecp-finder-field-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.ecp-finder-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    padding: 10px 0;
    font-size: 15px;
    color: #0C4713;
}

.ecp-finder-input::placeholder {
    color: #767676;
}

/* Croix native de <input type="search"> : masquée, le style du champ suffit. */
.ecp-finder-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.ecp-finder-submit {
    flex-shrink: 0;
    background: #157A21;
    color: white;
    border: 0;
    border-radius: 50px;
    padding: 12px 24px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.ecp-finder-submit:hover,
.ecp-finder-submit:focus {
    background: #279B34;
    color: white;
}

.ecp-finder-hint {
    margin: 10px 0 0;
    font-size: 13px;
    color: #767676;
}

/* Barre de statut : le compteur, et le filtre à sa droite. L'ensemble est
   centré ; sur petit écran le filtre passe à la ligne (flex-wrap) plutôt que de
   comprimer le compteur. */
.ecp-finder-statusbar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-top: 18px;
}

/* Le compteur ne prend plus la largeur disponible : sans ça le lien serait
   repoussé contre le bord droit de la page, à l'autre bout de l'écran, au lieu
   de se lire comme une action attachée au compteur. */
.ecp-finder-statusbar .ecp-finder-status {
    margin: 0;
}

/* Statut : visible (compte de résultats) ET annoncé par les lecteurs d'écran.
   Même registre typographique que le sous-titre du panel (.ecp-finder-subtitle,
   gris #767676) : le compteur commente la recherche, il ne doit pas peser plus
   que le contenu qu'il annonce. */
.ecp-finder-status {
    display: table;
    max-width: 720px;
    /* Marge portée par .ecp-finder-statusbar : ici, uniquement le centrage
       résiduel quand le compteur est seul sur sa ligne. */
    margin: 0 auto;
    font-size: 14px;
    color: #767676;
    text-align: center;
    min-height: 1em;
}

/* Statut vide : aucune réservation d'espace (état initial de la page). */
.ecp-finder-status:empty {
    display: none;
    margin: 0;
    min-height: 0;
}

/* Filtre « sans vue éclatée ». Souligné et en vert de marque : c'est la seule
   action de la barre, elle doit se distinguer du compteur gris qui la précède.
   Remis à plat car c'est un <button> (l'action modifie la page, elle ne navigue
   pas) qui doit se lire comme un lien. */
.ecp-finder-filter {
    padding: 0;
    border: 0;
    background: none;
    font-size: 14px;
    font-weight: 600;
    color: #0C4713;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.ecp-finder-filter:hover,
.ecp-finder-filter:focus-visible {
    color: #157A21;
}

.ecp-finder-filter[hidden] {
    display: none;
}

/* Un seul des deux libellés est visible, selon l'état du filtre : le bouton
   conserve ainsi son rôle (il dit toujours ce que le PROCHAIN clic fera). */
.ecp-finder-filter .ecp-finder-filter-off,
.ecp-finder-filter[aria-pressed="true"] .ecp-finder-filter-on {
    display: none;
}

.ecp-finder-filter[aria-pressed="true"] .ecp-finder-filter-off {
    display: inline;
}

/* Masquage effectif des machines sans éclaté. Le filtre agit en CSS seul :
   aucune carte n'est retirée du DOM, un second clic les réaffiche à l'identique
   sans nouvelle requête. */
.ecp-finder-results.is-filtered .ecp-card[data-ecp-eclate="0"] {
    display: none;
}

/* Loader DANS le bouton « Rechercher » : le libellé cède la place au spinner,
   l'attente est signalée à l'endroit exact où l'utilisateur vient d'agir.
   Bascule pilotée par #ecp-finder.is-loading (posée par le JS). */
.ecp-finder-submit {
    position: relative;
}

.ecp-finder-submit-spinner {
    display: none;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: white;
    border-radius: 50%;
    animation: ecp-spin 0.7s linear infinite;
}

#ecp-finder.is-loading .ecp-finder-submit-label {
    display: none;
}

#ecp-finder.is-loading .ecp-finder-submit-spinner {
    display: block;
}

/* Le bouton garde sa largeur pendant le chargement : sans ça, le passage
   « Rechercher » → spinner le ferait rétrécir puis rebondir. */
#ecp-finder.is-loading .ecp-finder-submit {
    min-width: 118px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: progress;
}

/* Pendant une nouvelle recherche, les résultats précédents restent AFFICHÉS
   mais estompés. Ils étaient auparavant masqués (`display: none`) : dès que
   .is-loading n'était pas retirée — réponse ignorée par la garde anti-course,
   requête annulée, erreur réseau — la page se retrouvait entièrement vide.
   Estomper plutôt que masquer supprime ce mode de panne : au pire l'utilisateur
   voit la liste précédente légèrement grisée. Le spinner du bouton porte à lui
   seul l'indication de progression. */
#ecp-finder.is-loading .ecp-finder-results,
#ecp-finder.is-loading .ecp-finder-empty-wrap {
    opacity: 0.45;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

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

/* Respect de la préférence système : rotation fortement ralentie plutôt que
   supprimée (on ne retire pas l'indication de progression). */
@media (prefers-reduced-motion: reduce) {
    .ecp-finder-submit-spinner,
    .ecp-finder-more-spinner {
        animation-duration: 2.4s;
    }
}

/* ==========================================================================
   Résultats — grille ISO aux listings du thème
   ==========================================================================
   Les CARTES sont le markup du thème (miniatures/product.tpl), rendu côté
   serveur. La grille, elle, est portée par #js-product-list dans _category.scss,
   ID qu'on ne peut pas réutiliser ici (il doit rester unique à la page listing).
   Les valeurs ci-dessous en sont la copie exacte — colonnes ET breakpoints
   (5 / 4 / 3 / 2 / 1 à 1750, 1250, 768, 375). */
/* Zone de sortie : tant qu'aucune recherche n'a été lancée, elle ne doit rien
   occuper dans le flux. `hidden` est posé par le template (rendu serveur) et
   retiré par le JS dès la première réponse — plutôt que des sélecteurs :empty,
   qui ne verraient pas les marges des enfants et casseraient au moindre nœud
   de texte laissé par Smarty. */
.ecp-finder-output[hidden] {
    display: none;
}

/* Respiration sous les résultats : sans ça la dernière rangée de cartes (ou le
   lien « Voir plus ») colle au pied de page. */
.ecp-finder-output {
    padding-bottom: 48px;
    /* 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 — et le compteur, et
       le bouton « Voir plus » — touchent le bord de l'écran en mobile. Posé ici
       plutôt que sur .ecp-finder-results pour couvrir toute la zone de sortie
       d'un seul tenant. */
    padding-left: 15px;
    padding-right: 15px;
}

.ecp-finder-results {
    margin-top: 24px;
}

.ecp-finder-results .products.row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

@media screen and (max-width: 1750px) {
    .ecp-finder-results .products.row { grid-template-columns: repeat(4, 1fr); }
}
@media screen and (max-width: 1250px) {
    .ecp-finder-results .products.row { grid-template-columns: repeat(3, 1fr); }
}
@media screen and (max-width: 768px) {
    .ecp-finder-results .products.row { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 375px) {
    .ecp-finder-results .products.row { grid-template-columns: repeat(1, 1fr); }
}

/* Pas d'animation d'apparition sur les cartes d'un lot fraîchement chargé : les
   cartes arrivent exactement comme celles du rendu serveur, apparition ISO à
   celle d'un listing du thème. La classe `is-new` reste posée par le JS — elle
   sert de repère au débogage et laisse la porte ouverte à un traitement futur —
   mais ne porte plus aucun style. */

/* Le focus posé en JS sur la 1re nouvelle carte est un repère de navigation,
   pas un état à souligner : on masque l'anneau (l'élément n'est pas
   interactif), les liens qu'il contient gardent le leur.

   Concerne le panel « Machines utilisant cette pièce » de la fiche produit, qui
   partage cette feuille. La page de recherche, elle, ne pose PAS de focus : son
   conteneur flex réordonné (`order`) ferait sauter la page vers la position DOM
   de la carte — cf. markNewBatch dans recherche.js. */
.ecp-finder-results .ecp-card[tabindex="-1"]:focus {
    outline: none;
}

/* Grille vide (aucune recherche lancée) : pas d'espace résiduel. */
.ecp-finder-results .products.row:empty {
    display: none;
}

/* --------------------------------------------------------------------------
   Bas de carte — remplace « Ajouter au panier ».
   --------------------------------------------------------------------------
   Ces règles sont scopées sur .ecp-card (posée par MachinePresenter sur chaque
   carte) et NON sur .ecp-finder-results : les mêmes cartes sont rendues à deux
   endroits — la grille de résultats et le slider d'accueil — et doivent s'y
   afficher à l'identique. Scoper sur le conteneur laissait le slider sans
   style (lien « Voir la fiche produit » brut, overlay du thème actif). */

/* Machine AVEC vue éclatée : vrai bouton. Le <a> porte .listing_add_to_cart
   pour hériter du bouton du thème ; on ne redéfinit que ce qui diffère
   (c'est un lien, pas un bouton de formulaire). */
.ecp-card .ecp-card-cta,
.ecp-card .ecp-card-cta:hover,
.ecp-card .ecp-card-cta:focus {
    text-decoration: none;
}

/* Machine SANS vue éclatée : mention centrée, pas de bouton — un second bouton
   vert concurrencerait « Voir les vues éclatées » alors que c'est une impasse.
   `margin-top: auto` aligne le bloc sur le bas de la carte, comme le bouton
   qu'il remplace, pour que les cartes d'une même ligne restent régulières. */
.ecp-card .ecp-card-noview {
    margin: auto 0 0;
    padding: 12px 10px 4px;
    text-align: center;
    font-size: 12.5px;
    line-height: 1.45;
    color: #767676;
}

.ecp-card .ecp-card-noview-link {
    color: #157A21;
    font-weight: 600;
    text-decoration: underline;
}

.ecp-card .ecp-card-noview-link:hover,
.ecp-card .ecp-card-noview-link:focus {
    color: #0C4713;
    text-decoration: underline;
}

/* L'overlay du thème (.product-card-overlay) est `position:absolute; inset:0;
   z-index:1` : il RECOUVRE toute la carte pour la rendre cliquable d'un bloc.
   Son href a été retiré par le presenter, mais il continuait d'intercepter les
   clics destinés aux liens situés dessous (« Contactez notre équipe », « Fiche
   technique et prix ») — seul le bouton natif, en z-index:2, passait au-dessus.
   On le sort donc complètement du flux d'événements. */
.ecp-card .product-card-overlay {
    display: none;
}

/* …sauf sur les cartes restées cliquables (slider) : l'overlay y est justement
   la surface qui rend toute la carte cliquable vers la fiche produit. Il repasse
   SOUS le bouton « Voir les vues éclatées » (z-index:2) pour ne pas lui voler
   ses clics. */
.ecp-card--linked .product-card-overlay {
    display: block;
    z-index: 1;
}

/* Liens natifs neutralisés (href retiré par le presenter) : ils gardent le
   style du thème mais ne doivent plus signaler un clic. */
.ecp-card:not(.ecp-card--linked) .product-thumbnail,
.ecp-card:not(.ecp-card--linked) .listing_more_link,
.ecp-card .qla_product-description .h3 a:not([href]) {
    cursor: default;
}

/* Cartes cliquables (slider) : curseur main sur toute la carte et ses liens,
   comme sur une miniature de listing ordinaire. */
.ecp-card--linked .product-card-overlay,
.ecp-card--linked .product-thumbnail,
.ecp-card--linked .qla_product-description .h3 a[href] {
    cursor: pointer;
}

/* Les liens PROPRES à cette page doivent primer sur tout reliquat de couche du
   thème : même z-index que le bouton natif (.listing_add_to_cart = 2). */
.ecp-card .ecp-card-noview,
.ecp-card .ecp-card-sheet {
    position: relative;
    z-index: 2;
}

/* Le titre neutralisé garde sa couleur, sans effet de survol. */
.ecp-card .qla_product-description .h3 a:not([href]):hover {
    text-decoration: none;
}

/* Pas de zoom d'image au survol sur ces cartes.
   Le thème anime .product-thumbnail de scale(.90) à scale(1) au survol de la
   miniature : sur un listing normal la carte entière est cliquable, le
   mouvement annonce donc une action. Ici l'image et le titre sont NEUTRALISÉS
   (liens sans href, cf. neutralizeProductLinks) — l'action passe par le bouton
   « Voir les vues éclatées ». Garder l'animation ferait croire à une zone
   cliquable et le clic ne produirait rien.
   L'échelle est figée à la valeur de REPOS du thème (.90) : la carte garde
   exactement l'aspect d'une miniature non survolée, et rien ne bouge au survol.
   NB : `is_hover` est posée par le thème sur .product-miniature (cf. main.js),
   pas sur .ecp-card — d'où le sélecteur descendant.
   Les cartes du slider (.ecp-card--linked) en sont exclues : elles ONT gardé
   leurs liens, le zoom au survol y annonce donc une vraie action. */
.ecp-card:not(.ecp-card--linked) .product-thumbnail,
.ecp-card:not(.ecp-card--linked) .product-miniature:hover .product-thumbnail,
.ecp-card:not(.ecp-card--linked) .product-miniature.is_hover .product-thumbnail {
    transform: scale(0.90);
    transition: none;
}

/* Accès à la fiche produit : lien discret sous l'action principale. */
.ecp-card .ecp-card-sheet {
    display: block;
    margin-top: 10px;
    text-align: center;
    color: #767676;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: underline;
}

.ecp-card .ecp-card-sheet:hover,
.ecp-card .ecp-card-sheet:focus {
    color: #0C4713;
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   « Voir plus » — pagination par lots
   -------------------------------------------------------------------------- */
.ecp-finder-more {
    display: flex;
    justify-content: center;
    margin-top: 28px;
}

.ecp-finder-more[hidden] {
    display: none;
}

/* Lien souligné et non bouton : la pagination est une commodité, pas l'action
   principale de la page — un second bouton vert concurrencerait « Voir les
   vues éclatées » présent sur chaque carte. */
.ecp-finder-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 0.15s ease;
}

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

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

.ecp-finder-more-spinner {
    display: none;
    width: 15px;
    height: 15px;
    border: 2px solid rgba(21, 122, 33, 0.25);
    border-top-color: #157A21;
    border-radius: 50%;
    animation: ecp-spin 0.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. */
.ecp-finder-more.is-loading .ecp-finder-more-btn {
    min-width: 150px;
    cursor: progress;
}

/* Chargement d'un lot : le libellé cède la place au spinner, comme pour le
   bouton de recherche. */
.ecp-finder-more.is-loading .ecp-finder-more-label {
    display: none;
}

.ecp-finder-more.is-loading .ecp-finder-more-spinner {
    display: block;
}

/* ==========================================================================
   Aucun résultat
   ========================================================================== */
/* Le bloc vit hors de la grille (dans .ecp-finder-empty-wrap) : on le centre
   explicitement et on borne sa largeur, sinon il s'étirerait sur toute la page
   et son texte centré serait illisible sur grand écran. */
.ecp-finder-empty {
    max-width: 560px;
    margin: 24px auto 0;
    text-align: center;
    background: white;
    border: 1px dashed rgba(12, 71, 19, 0.25);
    border-radius: 12px;
    padding: 32px 24px;
}

.ecp-finder-empty-title {
    margin: 0 0 8px;
    color: #0C4713;
    font-size: 16px;
    font-weight: 700;
}

.ecp-finder-empty-text {
    margin: 0 auto 18px;
    max-width: 520px;
    color: #767676;
    font-size: 14px;
    line-height: 1.5;
}

.ecp-finder-empty-cta {
    display: inline-flex;
    align-items: center;
    background: #157A21;
    color: white !important;
    border-radius: 50px;
    padding: 12px 24px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
}

.ecp-finder-empty-cta:hover {
    background: #279B34;
    text-decoration: none;
}

@media screen and (max-width: 768px) {
    .ecp-finder-panel {
        padding: 28px 16px;
    }

    /* Le bouton passe sous le champ : à cette largeur, les deux côte à côte
       laissent trop peu de place à la saisie. */
    .ecp-finder-field {
        flex-wrap: wrap;
        border-radius: 16px;
        padding: 12px 14px;
    }

    .ecp-finder-input {
        flex: 1 1 140px;
    }

    .ecp-finder-submit {
        flex: 1 1 100%;
        margin-top: 8px;
    }
}