/* 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; }
}