/* EAVS Search — widget header (étape 9, préparé/dormant). Styles d'EMPLACEMENT uniquement :
   les styles de base du champ/bouton/suggestions viennent de front-search.css (chargé en même
   temps, cf. hookDisplayTop()) — pas de duplication, juste les overrides de compacité header. */

.eavssearch-search-form--header {
    /*
     * CAUSE RÉELLE du bug « 400px sans effet » (diagnostiquée, pas supposée) :
     * cette règle ne posait jusqu'ici qu'un `max-width` (un PLAFOND) avec `width:auto`, jamais
     * de largeur CIBLE. Or #_desktop_eavssearch (le conteneur du hook displayTop) porte la
     * classe Bootstrap `.col-auto`, compilée en `flex:0 0 auto;width:auto` (vérifié dans
     * theme.css) : flex-grow:0, flex-shrink:0, basis:auto — ce conteneur ne grandit JAMAIS
     * au-delà du besoin réel de son contenu. Et son contenu (ce <form>) étant lui aussi
     * `width:auto` sans flex-grow, sa taille réelle se limitait à la taille intrinsèque de son
     * <input> (quelques dizaines de px de plus que le texte), bien en-dessous du plafond de
     * 400px — qui n'avait donc tout simplement jamais été atteint, quelle que soit sa valeur.
     * Correction : une largeur EXPLICITE (`width`), pas seulement un plafond, + `flex-shrink:0`
     * pour empêcher aussi #_desktop_eavssearch (qui est lui-même display:flex via `.d-md-flex`)
     * de compresser ce <form> en tant que SON propre enfant flex.
     *
     * Espace libéré en priorité sur le bandeau Signal (eavsheadermarquee), conformément à la
     * consigne : voir les règles `.eavshm-wrapper` plus bas dans ce même fichier — uniquement
     * actives quand ce widget est chargé (jamais pour un visiteur ordinaire), et qui ne touchent
     * ni le contenu ni l'animation de ce bandeau, seulement sa largeur visible.
     */
    width: 450px;
    max-width: 450px;
    flex: 0 0 450px;
    margin-bottom: 0;
}

.eavssearch-search-form--header .eavssearch-search-input {
    padding: 0.5rem 1rem;
    font-size: 0.95rem;
}

.eavssearch-search-form--header .eavssearch-search-submit {
    padding: 0.4rem 0.7rem;
    display: flex;
    align-items: center;
}

.eavssearch-search-form--header .eavssearch-search-submit .material-icons {
    font-size: 1.1rem;
}

.eavssearch-search-form--header .eavssearch-suggestions {
    max-width: none;
}

/* Variante offcanvas mobile : prend toute la largeur disponible dans l'entête de l'offcanvas. */
.eavssearch-search-form--mobile {
    max-width: none;
    width: 100%;
    flex: 1;
}

.eavssearch-offcanvas .offcanvas-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Palier intermédiaire (tablette large / petit laptop) : même correction (largeur explicite,
   pas un plafond) mais réduite, l'espace disponible dans la ligne étant plus restreint. */
@media (min-width: 992px) and (max-width: 1199px) {
    .eavssearch-search-form--header {
        width: 380px;
        max-width: 380px;
        flex: 0 0 380px;
    }
}

/* Palier tablette (md) : idem, largeur réduite mais toujours explicite (le plafond seul ne
   produisait aucun effet réel ici non plus, pour la même raison qu'aux paliers supérieurs). */
@media (min-width: 768px) and (max-width: 991px) {
    .eavssearch-search-form--header {
        width: 280px;
        max-width: 280px;
        flex: 0 0 280px;
    }

    .eavssearch-search-form--header .eavssearch-search-input {
        padding: 0.4rem 0.8rem;
        font-size: 0.9rem;
    }
}

/*
 * Bandeau défilant Signal (module eavsheadermarquee, hook displayTop, position 1) : priorité
 * donnée au moteur de recherche conformément à la consigne explicite. On ne modifie AUCUN
 * fichier de ce module — uniquement la largeur visible de son conteneur, via une règle externe,
 * chargée UNIQUEMENT quand le widget EAVS Search est présent sur la page (donc jamais pour un
 * visiteur ordinaire, qui voit le bandeau à sa largeur complète habituelle). Contenu et
 * animation du bandeau intacts (`overflow:hidden` déjà présent dans son propre CSS) : seule la
 * fenêtre visible est plus étroite. `!important` nécessaire : le <style> du bandeau est inline
 * dans le <body> (rendu par son propre hook), donc après nos <link> externes dans le <head> —
 * à spécificité égale (un seul sélecteur de classe des deux côtés), la règle la plus TARDIVE
 * dans le document l'emporterait sinon, c'est-à-dire la sienne, pas la nôtre.
 */
@media (min-width: 1200px) {
    .eavshm-wrapper {
        max-width: 260px !important;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .eavshm-wrapper {
        max-width: 160px !important;
    }
}