/* GFC 11/11/2026 (Raph : « il faut arreter avec les valeurs de pixel fixes… que tout se redimensionne seul ») —
   EN-TETE MOBILE / TABLETTE (< 1200 px) en GRILLE, sans position en dur :
     ligne 1 : logo
     ligne 2 : bouton menu (≡) a gauche | bloc client (panier + cagnotte) a droite
     ligne 3 : recherche
   Le bouton ≡ etait dans le bloc du mega-menu, place en absolu a « top: 175 / 185 / 199 px » (megamenu.css, responsive.css) :
   il tombait sur la recherche tant que le bloc client (fragment Varnish en fin de page) n'etait pas arrive, et restait colle
   en defilant. Ici les conteneurs du mega-menu passent en « display: contents » : le ≡ devient une case de la grille de
   l'en-tete et suit toujours sa ligne, quelles que soient la largeur, l'orientation et l'arrivee du bloc client.
   Ordinateur (>= 1200 px) non touche. Rollback : supprimer ce fichier + ban Varnish. */
@media (max-width: 1199px) {
    #header.container {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas: "logo logo" "menu client" "recherche recherche";
        align-items: center;
        column-gap: 12px;
    }
    #header .gfc-header,
    #header .ets_mm_megamenu,
    #header .ets_mm_megamenu_content,
    #header .ets_mm_megamenu_content > .container,
    #header .ets_mm_megamenu_content_content { display: contents !important; }

    #header #header_logo { grid-area: logo; }
    #header #search_block_top { grid-area: recherche; }
    #header .gfc-header #header_user,
    #header .gfc-header #gfc-ph-top { grid-area: client; justify-self: end; min-width: 0; }

    #header .ybc-menu-toggle.ybc-menu-btn {
        grid-area: menu;
        position: static !important;
        top: auto !important;
        left: auto !important;
        margin: 0 !important;
        align-self: center;
    }
    /* bloc client : panier AU-DESSUS de la cagnotte, les deux alignes a droite (comme avant, demande Raph 11/11) */
    #header .gfc-header #header_user {
        display: flex !important;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
        gap: 6px;
    }
    #header .gfc-header #header_user #header_nav { order: -1; }
    #header .gfc-header #header_user > * { margin: 0 !important; }
    /* le panier avait une marge gauche de 20 px qui le faisait deborder a droite sur telephone */
    #header .gfc-header #header_nav #shopping_cart { margin-left: 0 !important; max-width: 100%; }
    /* emplacement reserve (75-gfc-esi-antiflash) inutile ici : la ligne a deja la hauteur du ≡ */
    #header .gfc-header #gfc-ph-top[hidden] { display: none !important; }
    /* le reste du mega-menu (liste des rubriques, ouverte par le ≡) occupe toute la largeur sous la recherche */
    #header .ets_mm_megamenu_content_content > :not(.ybc-menu-toggle) { grid-column: 1 / -1; }
    /* barre orange du haut : langues tout a gauche, compte tout a droite, alignes sur les bords de l'en-tete
       (meme largeur 95 % que #header.container, au lieu d'un bloc centre plus etroit) */
    #header_top_nav > .container {
        width: 95% !important;
        max-width: none !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
    }
    #header_top_nav > .container > #languages_block_top { margin: 0 !important; float: none !important; }
    #header_top_nav > .container > #header_user { margin: 0 0 0 auto !important; float: none !important; }
    #header_top_nav #first-languages > li:first-child { margin-left: 0 !important; }
    #header_top_nav #first-languages > li:first-child > a,
    #header_top_nav #first-languages > li:first-child > span { padding-left: 0 !important; }
    #header_top_nav .account-list-sec > li:last-child,
    #header_top_nav .account-list-sec > li:last-child > a { margin-right: 0 !important; padding-right: 0 !important; }
    /* --- 11/11 v f (Raph, photo tablette paysage en defilant) : BARRE COLLANTE (body.gfc-sticky, posee par 60-gfc-stickybar
       a partir de 1025 px) version tablette : une seule ligne  ≡ | recherche COMPLETE | cagnotte  (avant : logo + loupe seule,
       cagnotte en calque qui debordait sous la barre). Le panier reste en bulle sous la barre (regle de 60-gfc-stickybar). */
    html body.gfc-sticky #header.container {
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        grid-template-areas: "menu recherche client" !important;
        height: auto !important;
        width: auto !important;
        padding: 8px 2.5% !important;
        align-items: center !important;
    }
    html body.gfc-sticky #header #header_logo { display: none !important; }
    html body.gfc-sticky #header #search_block_top {
        grid-area: recherche;
        width: auto !important;
        height: auto !important;
        flex: none !important;
        margin: 0 !important;
        z-index: auto !important;
    }
    html body.gfc-sticky #header #search_block_top #search_query_top { display: inline-block !important; width: 100% !important; height: 36px !important; }
    html body.gfc-sticky #header #search_block_top button[type=submit] {
        left: auto !important; right: 0 !important;
        width: 35px !important; height: 36px !important;
        border-radius: 0 !important; background: transparent !important;
        padding: 5px 10px !important; display: block !important;
    }
    html body.gfc-sticky #header_container #header .gfc-header #header_user {
        position: static !important;
        grid-area: client;
        flex-direction: row !important;
        align-items: center !important;
        background: transparent !important;
        padding: 0 !important;
        height: auto !important;
    }
    /* v g : la barre collante met le mega-menu en pointer-events:none (seule la liste des rubriques reste cliquable) ;
       le ≡ en heritait -> plus cliquable une fois la page defilee (photo Raph 11/11) */
    html body.gfc-sticky #header .ybc-menu-toggle { pointer-events: auto !important; }
}

/* v h 11/11 : le mega-menu bascule seul entre mode ORDINATEUR (barre horizontale, quand les rubriques tiennent) et mode LISTE
   (.changestatus, ouvert par le ≡). Sous 1200 px :
   - mode ordinateur : pas de ≡ (il n'ouvrait rien), la barre de rubriques passe sur sa propre ligne sous la recherche ;
   - mode liste (tablette) : rubriques plus grandes (Raph : « les menus ici sont trop petits »). */
@media (max-width: 1199px) {
    #header .ets_mm_megamenu:not(.changestatus) .ybc-menu-toggle { display: none !important; }
    #header.container:has(.ets_mm_megamenu:not(.changestatus)) { grid-template-areas: "logo logo" "client client" "recherche recherche" !important; }
    html body.gfc-sticky #header.container:has(.ets_mm_megamenu:not(.changestatus)) { grid-template-columns: minmax(0, 1fr) auto !important; grid-template-areas: "recherche client" !important; }
}
@media (min-width: 768px) and (max-width: 1199px) {
    .ets_mm_megamenu.changestatus ul.mm_menus_ul > li.mm_menus_li > a,
    .ets_mm_megamenu.changestatus ul.mm_menus_ul > li.mm_menus_li > a .mm_menu_content_title { font-size: 20px !important; line-height: 1.3 !important; }
    .ets_mm_megamenu.changestatus ul.mm_menus_ul > li.mm_menus_li > a { padding-top: 18px !important; padding-bottom: 18px !important; }
    .ets_mm_megamenu.changestatus ul.mm_menus_ul > li.close_menu .pull-left,
    .ets_mm_megamenu.changestatus ul.mm_menus_ul > li.close_menu .pull-right { font-size: 24px !important; }
}

/* v i 12/11/2026 (Raph : menu ouvert tout grise sur mobile) : le voile sombre du module (::before du bouton, z-index 10000) passait DEVANT la liste
   (meme z-index, peint apres) ; la liste ouverte passe juste au-dessus. Le voile reste derriere, utile quand le menu ne prend pas toute la largeur. */
.ets_mm_megamenu.changestatus ul.mm_menus_ul { z-index: 10001 !important; }