.gbs-mega-panel__title{display:none}
.gbs-mega-panel[hidden]{display:none}
/* Empilement : le panneau vit desormais DANS `.gbs-header`, qui cree un contexte
   d'empilement — son `z-index:70` est donc LOCAL, et c'est le `z-index` du header qui
   compte face au reste de la page. Le header est passe de 100 a 200 pour cette raison :
   `.gbs-buy-dock` (product.css, `fixed`, z-index 160, frere du header) serait sinon
   repasse DEVANT le panneau, alors qu'avant le correctif le panneau etait a 200 au
   niveau racine et le couvrait. Ne pas redescendre le header sous 160.

   Geometrie et typo alignees sur le template (`.mega-menu-inner` / `.mega-menu-main` /
   `.mega-menu-link`). Le template ne separe PAS les lignes par un filet : la lecture repose
   sur la pastille arrondie au survol, pas sur un quadrillage. */
.gbs-mega-panel .gbs-mega-grid{grid-template-columns:minmax(0,1.25fr) minmax(250px,.75fr);gap:42px}
/* Quatre colonnes depuis le 2026-08-15 : « Boutique » et « Objectifs » ont chacun un 4e groupe
   (les rayons de complements), et « Marques » passe de 12 a 20 entrees en 4 x 5. Une 5e ligne
   fait 5 x 42px + l'eyebrow, soit ~240px : l'ordre de grandeur du `min-height:220px` du bloc
   `.gbs-mega-feature` voisin. Garder 3 colonnes aurait impose 7 lignes, donc ~324px, et
   deforme le panneau. Largeur par colonne a 1320px : (798 - 3x30)/4 = 177px, de quoi tenir
   « Natural Elements » (le libelle le plus long) sans repli sur deux lignes.
   `--advice` redeclare `display:flex` plus bas : cette piste ne le concerne pas. */
.gbs-mega-groups{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 30px}
.gbs-mega-group{min-width:0}
.gbs-mega-group>.gbs-eyebrow{margin:0 0 10px;color:var(--green);font-weight:700;letter-spacing:.09em}
.gbs-mega-group>a{min-height:42px;padding:8px 10px!important;border:0;border-radius:10px;display:flex!important;align-items:center;justify-content:space-between;gap:14px;color:var(--ink);font-size:14px;font-weight:600}
.gbs-mega-group>a:hover,.gbs-mega-group>a:focus-visible{color:var(--green-dark);background:var(--green-soft)}
.gbs-mega-group>a span{min-width:0}
.gbs-mega-group>a small{color:var(--muted);font-size:12px;font-weight:500}
.gbs-mega-feature{position:relative!important;display:grid!important;grid-template-columns:minmax(0,1fr) 150px;grid-template-rows:1fr auto;gap:8px 14px;min-height:220px!important;padding:28px!important;overflow:hidden}
.gbs-mega-feature>span{position:relative;z-index:2;display:flex;min-width:0;flex-direction:column}
.gbs-mega-feature strong{font-size:25px;line-height:1.04;font-weight:700}
.gbs-mega-feature em{margin-top:9px;color:rgba(255,255,255,.68);font-size:13px;font-style:normal;line-height:1.45}
.gbs-mega-feature img{position:relative;z-index:1;grid-row:1/3;grid-column:2;width:150px;height:180px;align-self:center;object-fit:contain;filter:drop-shadow(0 18px 15px rgba(0,0,0,.25))}
.gbs-mega-feature>b{position:relative;z-index:2;display:flex;align-items:center;gap:9px;font-size:14px;font-weight:500}
.gbs-mega-feature>b svg{width:19px;height:19px}
.gbs-mega-feature .gbs-eyebrow{color:var(--gold-soft);font-weight:700;letter-spacing:.08em}
.gbs-mega-groups--brands .gbs-mega-group .gbs-eyebrow{visibility:hidden}

@media(max-width:1279px){
  .gbs-mega-panel .gbs-mega-grid{grid-template-columns:minmax(0,1fr) 390px}
  .gbs-mega-groups{gap:18px}
  .gbs-mega-feature{grid-template-columns:minmax(0,1fr) 120px}
  .gbs-mega-feature img{width:120px;height:170px}
}

/* Quatre colonnes exigent ~166px chacune pour tenir « Natural Elements » sur une ligne, soit
   une piste de groupes d'au moins 718px — atteinte vers 1198px de fenetre. En dessous, deux
   colonnes valent mieux que quatre colonnes repliees sur deux lignes chacune. Le tiroir mobile
   n'est pas concerne : sa regle (0,2,0) plus bas l'emporte sur celle-ci. */
@media(max-width:1199px){
  .gbs-mega-groups{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:900px){
  .gbs-mega-panel .gbs-mega-grid{grid-template-columns:1fr}
  /* Dans le tiroir, tout est empile sur une colonne : le decoupage en tronçons du panneau
     « Marques » n'a plus aucun sens visuel. `base.css` pose un filet sur CHAQUE <section> du
     tiroir, si bien que les tronçons y apparaissaient comme des blocs anonymes separes — un
     defaut que le passage de 3 a 4 tronçons ne ferait qu'aggraver. On rend la liste continue
     et on ne garde le filet que sous le dernier tronçon. */
  .gbs-mobile-nav-content .gbs-mega-groups--brands .gbs-eyebrow{display:none}
  .gbs-mobile-nav-content .gbs-mega-groups--brands .gbs-mega-group{padding-bottom:0;border-bottom:0}
  .gbs-mobile-nav-content .gbs-mega-groups--brands .gbs-mega-group:last-child{padding-bottom:14px;border-bottom:1px solid var(--line)}
  .gbs-mobile-nav-content .gbs-mega-panel[hidden]{display:block}
  .gbs-mobile-nav-content .gbs-mega-panel{padding-block:13px;border-bottom:1px solid var(--line)}
  .gbs-mobile-nav-content .gbs-mega-panel__title{display:block;margin:0 0 12px;font-size:23px;font-weight:500}
  .gbs-mobile-nav-content .gbs-mega-groups{grid-template-columns:1fr;gap:8px}
  .gbs-mobile-nav-content .gbs-mega-feature{grid-template-columns:minmax(0,1fr) 92px;min-height:158px!important;margin-top:10px}
  .gbs-mobile-nav-content .gbs-mega-feature img{width:92px;height:130px}
}

/* Le panneau « Conseils » n'a pas trois groupes : deux en francais, un seul en arabe (les
   articles n'existent qu'en francais). Sur la grille a trois pistes fixes, la piste non
   remplie laissait un vide mesure de 244 px a 1440. Le flex laisse les groupes occuper
   la largeur reellement disponible, quelle que soit la langue. */
.gbs-mega-groups--advice{display:flex;flex-wrap:wrap}
.gbs-mega-groups--advice>.gbs-mega-group{flex:1 1 220px;max-width:380px}

/* ═══ En-tete mobile — le logo ne doit pas mordre sur les ronds ═══════════════════════════════
   Mesure (emulation d'appareil reelle, UA Android, pointer:coarse) : a 320 px le logo occupe
   101..219 alors que la recherche finit a 109 et le compte commence a 211 — 8 px de
   recouvrement DE CHAQUE COTE sur toute la hauteur (44 px), en FR ET sous /ar/ (miroir exact,
   translateX(±59)). Les deux ronds concernes sont donc partiellement intappables. A 360 px il
   reste 12 px de marge : le defaut est borne aux petits viewports.

   Arithmetique de l'en-tete a 5 pistes de base.css (`44px 44px minmax(0,1fr) auto auto`,
   `column-gap:7px`) : les deux clusters de ronds occupent `4x44 + 2x7 = 190px` de l'en-tete.
   Le logo mesure 118 px, d'ou recouvrement des que la largeur de contenu tombe sous 308 px.

   ON BORNE LE LOGO EN POURCENTAGE DE L'EN-TETE, PAS EN `100vw` — et c'est ce qui rend la regle
   juste sur toutes les routes. `.gbs-header>.gbs-logo` est `position:absolute` avec un
   `grid-column:1/-1` explicite : sa containing block est donc l'AIRE DE GRILLE, et `100%` vaut
   exactement la largeur de contenu de l'en-tete. Le padding sort de l'equation — ce qui compte,
   car il vaut 14 px sur l'accueil (`home.css`) mais 7 px partout ailleurs sous 480 px
   (`base.css`, `@media(max-width:480px)`). Une constante en `100vw` devait viser le cas le plus
   serre et rapetissait donc le logo sur les routes a P=7 la ou il n'y a AUCUN recouvrement
   (mesure a 340 px sur /shop/ : jeu deja de 9 px, et la version en 100vw ramenait le logo de
   118 a 110 pour rien). `100vw` faisait en plus entrer la barre de defilement dans le calcul.
   `202 = 190 + 2x6`, les 6 px etant le jeu voulu de chaque cote.

   Mesure des deux regimes : accueil 320 px (P=14) jeu -8 -> +6, logo 118 -> 90 ;
   /shop/ 340 px (P=7) logo 118 -> 118, INCHANGE. Logo centre a 0 px dans tous les cas.

   POURQUOI ICI ET PAS DANS base.css : le `base.css` SERVI est un orphelin — son contenu
   n'existe dans aucun commit du depot (54 blobs d'historique + 23 worktrees scannes, zero
   correspondance). Y ecrire depuis une worktree effacerait sans trace le travail qui ne vit que
   sur le serveur. `mega.css` est charge sur toutes les routes ET juste APRES base.css
   (ordre servi : brands, base, mega, tone, …) : a specificite egale (0,2,1) cette regle gagne.

   ON NE TOUCHE NI A LA GRILLE NI AU CENTRAGE : le placement absolu `grid-column:1/-1` et la
   repartition `display:contents` des ronds viennent d'une lignee voisine, sont corrects, et
   deux correctifs justes du meme defaut ne commutent pas. On borne la seule largeur du logo.
   L'image suit sans regle dediee : `img{max-width:100%}` est deja pose par le reset de base.css.
   INVARIANT : la constante 202 suppose les 5 pistes ci-dessus et DEUX ronds de chaque cote.
   Tout rond ajoute ou retire dans `.gbs-header-actions` la change de 44 + 7. */
@media (max-width:347px){
  .gbs-header>.gbs-logo{max-width:calc(100% - 202px)}
}