/* =============================================================
 * GrowLED · ets_megamenu — Mobile V2 (drawer push iOS-style)
 * À charger APRÈS custom.css ET cache.css. S'active uniquement < 1024px.
 * Le markup HTML du module reste intact ; ce fichier neutralise
 * le rendu mobile par défaut (.mm_menus_ul fullscreen) et le
 * remplace par l'overlay #gl-mobv2 injecté par mobile-v2.js.
 *
 * Perf : `contain`, `will-change` ciblé, transforms compositor only,
 *        `scrollbar-gutter:stable` (anti-CLS), `prefers-reduced-motion`.
 * A11y : focus-visible, sr-only utility, contrastes WCAG AA.
 * RTL  : drawer glisse depuis la droite, panels inversés.
 * ============================================================= */

/* Tokens (alignés sur custom.css) */
.gl-mobv2{
  --gl-magenta:#C21A7E; --gl-magenta-600:#A11567; --gl-magenta-700:#80114F;
  --gl-magenta-50:#FBE9F2; --gl-magenta-100:#F4D2E3;
  --gl-plum-900:#3A0930; --gl-plum-800:#5C1149; --gl-plum-700:#7A1761;
  --gl-green:#8DC291; --gl-green-700:#3D7A45; --gl-green-50:#ECF6EE;
  --gl-yellow:#FFD23F; --gl-yellow-700:#B68F12; --gl-yellow-50:#FFF8DD;
  --gl-ink:#1F1F1F; --gl-ink-2:#525252; --gl-ink-3:#7A7A7A;
  --gl-line:#ECECEC; --gl-line-2:#F5F5F5;
  --gl-shadow-lg:0 30px 60px -25px rgba(58,9,48,.30),0 12px 24px -16px rgba(58,9,48,.18);
}

/* Sr-only — pour annonces lecteur d'écran et libellés invisibles */
.gl-mobv2__sr-only{
  position:absolute !important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

/* ----------------------------------------------------------
 * 1. NEUTRALISATION du rendu mobile par défaut du module
 * ---------------------------------------------------------- */
@media (max-width:1024px){
  /* Cache la liste fullscreen générée par .transition_full / .transition_floating */
  .ets_mm_megamenu .mm_menus_ul,
  .ets_mm_megamenu .mm_menus_ul.active,
  .changestatus.transition_full .mm_menus_ul.active,
  .transition_full .mm_menus_ul.active,
  .transition_floating .mm_menus_ul.active{
    display:none !important;
  }
  /* Annule le scrim du module sur le toggle ouvert (notre overlay a le sien) */
  .transition_full .ybc-menu-toggle.opened:before,
  .transition_floating .ybc-menu-toggle.opened:before,
  .changestatus.transition_full .ybc-menu-toggle.opened:before,
  .changestatus.transition_floating .ybc-menu-toggle.opened:before{
    content:none !important;
  }
  /* Évite le scroll de la page quand notre overlay est ouvert ;
     scrollbar-gutter:stable empêche le shift CLS sur tablette */
  body.gl-mobv2-open{
    overflow:hidden;
    scrollbar-gutter:stable;
  }
}

/* ----------------------------------------------------------
 * 2. OVERLAY + DRAWER
 * ---------------------------------------------------------- */
.gl-mobv2{
  position:fixed; inset:0; z-index:10000;
  pointer-events:none;
  font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  color:var(--gl-ink);
  -webkit-tap-highlight-color:transparent;
  contain:layout style;
}
.gl-mobv2.is-open{ pointer-events:auto; }

.gl-mobv2 *{ box-sizing:border-box; }
.gl-mobv2 a{ color:inherit; text-decoration:none; }
.gl-mobv2 ul, .gl-mobv2 li{ list-style:none; margin:0; padding:0; }
.gl-mobv2 button{ font:inherit; cursor:pointer; border:0; background:transparent; color:inherit; }

.gl-mobv2 :focus-visible{
  outline:3px solid var(--gl-yellow);
  outline-offset:2px;
  border-radius:6px;
}

.gl-mobv2__scrim{
  position:absolute; inset:0;
  background:rgba(20,3,16,.55);
  opacity:0;
  transition:opacity .25s ease;
  touch-action:none;
}
.gl-mobv2.is-open .gl-mobv2__scrim{ opacity:1; }

.gl-mobv2__drawer{
  position:absolute; top:0; left:0;
  width:min(360px, 88%); height:100vh; height:100dvh;
  background:#fff;
  display:flex; flex-direction:column;
  overflow:hidden;
  box-shadow:var(--gl-shadow-lg);
  transform:translateX(-100%);
  transition:transform .28s cubic-bezier(.32,.72,0,1);
  contain:layout paint style;
}
.gl-mobv2.is-open .gl-mobv2__drawer{
  transform:translateX(0);
  will-change:transform;
}

/* RTL — drawer glisse depuis la droite */
.ets-dir-rtl .gl-mobv2__drawer,
[dir="rtl"] .gl-mobv2__drawer{
  left:auto; right:0;
  transform:translateX(100%);
}
.ets-dir-rtl .gl-mobv2.is-open .gl-mobv2__drawer,
[dir="rtl"] .gl-mobv2.is-open .gl-mobv2__drawer{
  transform:translateX(0);
}

/* ----------------------------------------------------------
 * 3. RECHERCHE + RACCOURCIS — persistants (au-dessus du stack)
 * ---------------------------------------------------------- */
/* Faux champ recherche — déclenche le moteur de recherche du site
 * (Motive sur growled.fr) au clic, plutôt que d'ouvrir un clavier natif
 * pour saisir dans un input qui n'aurait pas la suggestion live. */
.gl-mobv2__psearch{
  flex:0 0 auto;
  padding:10px 12px;
  background:linear-gradient(180deg, var(--gl-plum-800), var(--gl-magenta-700));
  border-bottom:1px solid rgba(0,0,0,.08);
}
.gl-mobv2__psearch-trigger{
  display:flex; align-items:center;
  width:100%; height:40px;
  padding:0 4px 0 16px;
  background:#fff;
  border-radius:999px;
  border:0;
  cursor:pointer;
  text-align:left;
  font:inherit;
  color:var(--gl-ink-3);
  transition:background .15s;
}
.gl-mobv2__psearch-trigger:active{
  background:#FBF6F8;
}
.gl-mobv2__psearch-text{
  flex:1;
  font-size:14px;
  color:var(--gl-ink-3);
  font-weight:500;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.gl-mobv2__psearch-icon{
  width:32px; height:32px;
  border-radius:50%;
  background:var(--gl-magenta);
  color:#fff;
  font-size:14px;
  display:flex; align-items:center; justify-content:center;
  flex:0 0 32px;
}

.gl-mobv2__quick{
  flex:0 0 auto;
  display:flex; gap:6px;
  padding:10px 12px;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  background:linear-gradient(180deg, var(--gl-magenta-700), #9F1465);
  border-bottom:1px solid rgba(0,0,0,.08);
}
.gl-mobv2__quick::-webkit-scrollbar{ display:none; }
.gl-mobv2__chip{
  flex:0 0 auto;
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 14px;
  border-radius:999px;
  font-size:12.5px; font-weight:800;
  background:#fff;
  color:var(--gl-magenta-700);
  border:1px solid var(--gl-magenta-100);
  white-space:nowrap;
  min-height:44px; /* WCAG 2.5.5 */
}
.gl-mobv2__chip-icon{ font-size:14px; line-height:1; }
.gl-mobv2__chip-ext{ font-size:11px; line-height:1; opacity:.85; margin-left:2px; }
.gl-mobv2__chip[data-tone="yellow"]{ background:var(--gl-yellow); color:var(--gl-plum-900); border-color:transparent; }
.gl-mobv2__chip[data-tone="green"]{ background:var(--gl-green); color:var(--gl-plum-900); border-color:transparent; }
.gl-mobv2__chip[data-tone="plum"]{ background:var(--gl-plum-800); color:#fff; border-color:transparent; }
.gl-mobv2__chip[data-tone="magenta"]{ background:var(--gl-magenta); color:#fff; border-color:transparent; }

/* ----------------------------------------------------------
 * 4. PILE DE PANELS — chaque tap glisse une page
 * ---------------------------------------------------------- */
.gl-mobv2__stack{
  position:relative; flex:1;
  overflow:hidden;
  background:#fff;
  contain:strict;
  contain:layout paint;
}
.gl-mobv2__panel{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  background:#fff;
  transform:translateX(100%);
  transition:transform .28s cubic-bezier(.32,.72,0,1);
}
.gl-mobv2__panel.is-active{
  transform:translateX(0);
  will-change:transform;
}
.gl-mobv2__panel[data-level="0"]{ transform:translateX(0); }

/* Quand on est niveau >= 1, le root recule légèrement (sans filter:brightness) */
.gl-mobv2.lvl-1 .gl-mobv2__panel[data-level="0"],
.gl-mobv2.lvl-2 .gl-mobv2__panel[data-level="0"],
.gl-mobv2.lvl-2 .gl-mobv2__panel[data-level="1"].is-active,
.gl-mobv2.lvl-3 .gl-mobv2__panel[data-level="0"],
.gl-mobv2.lvl-3 .gl-mobv2__panel[data-level="1"].is-active,
.gl-mobv2.lvl-3 .gl-mobv2__panel[data-level="2"].is-active,
.gl-mobv2.lvl-4 .gl-mobv2__panel[data-level="0"],
.gl-mobv2.lvl-4 .gl-mobv2__panel[data-level="1"].is-active,
.gl-mobv2.lvl-4 .gl-mobv2__panel[data-level="2"].is-active,
.gl-mobv2.lvl-4 .gl-mobv2__panel[data-level="3"].is-active{
  transform:translateX(-22%);
}
/* Voile sombre sur le panel reculé (compositor only, pas de filter) */
.gl-mobv2.lvl-1 .gl-mobv2__panel[data-level="0"]::after,
.gl-mobv2.lvl-2 .gl-mobv2__panel[data-level="1"].is-active::after,
.gl-mobv2.lvl-3 .gl-mobv2__panel[data-level="2"].is-active::after,
.gl-mobv2.lvl-4 .gl-mobv2__panel[data-level="3"].is-active::after{
  content:""; position:absolute; inset:0;
  background:rgba(0,0,0,.08);
  pointer-events:none;
}

/* RTL — panels glissent depuis la gauche, recul vers la droite */
.ets-dir-rtl .gl-mobv2__panel,
[dir="rtl"] .gl-mobv2__panel{ transform:translateX(-100%); }
.ets-dir-rtl .gl-mobv2__panel.is-active,
[dir="rtl"] .gl-mobv2__panel.is-active{ transform:translateX(0); }
.ets-dir-rtl .gl-mobv2.lvl-1 .gl-mobv2__panel[data-level="0"],
.ets-dir-rtl .gl-mobv2.lvl-2 .gl-mobv2__panel[data-level="0"],
[dir="rtl"] .gl-mobv2.lvl-1 .gl-mobv2__panel[data-level="0"],
[dir="rtl"] .gl-mobv2.lvl-2 .gl-mobv2__panel[data-level="0"]{
  transform:translateX(22%);
}

/* ----------------------------------------------------------
 * 5. EN-TÊTE DE PANEL
 * ---------------------------------------------------------- */
.gl-mobv2__phead{
  flex:0 0 auto;
  background:linear-gradient(180deg, var(--gl-plum-800), var(--gl-magenta-700));
  color:#fff;
  padding:12px 10px;
  display:flex; align-items:center; gap:8px;
  min-height:60px;
}
.gl-mobv2__back{
  width:40px; height:40px;
  border-radius:10px;
  background:rgba(255,255,255,.14);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:24px; line-height:1; padding:0;
}
.gl-mobv2__back::before{ content:"‹"; margin-top:-3px; font-weight:600; }
[dir="rtl"] .gl-mobv2__back::before,
.ets-dir-rtl .gl-mobv2__back::before{ content:"›"; }
.gl-mobv2__phead--root .gl-mobv2__back{ visibility:hidden; pointer-events:none; }

.gl-mobv2__ptitle{
  flex:1;
  font-weight:900; font-size:15px; letter-spacing:.3px;
  line-height:1.15; margin:0;
  outline:none;
}
.gl-mobv2__ptitle:focus-visible{
  outline:2px solid var(--gl-yellow);
  outline-offset:2px;
  border-radius:4px;
}
.gl-mobv2__psub{
  display:block;
  font-size:11px; font-weight:700; letter-spacing:.3px;
  color:rgba(255,255,255,.75);
  text-transform:uppercase;
  margin-top:2px;
}

.gl-mobv2__close{
  width:40px; height:40px;
  border-radius:10px;
  background:rgba(255,255,255,.14);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; line-height:1; padding:0;
}

/* ----------------------------------------------------------
 * 6. LISTE D'ITEMS
 * ---------------------------------------------------------- */
.gl-mobv2__plist{
  flex:1;
  overflow-y:auto;
  background:#fff;
  overscroll-behavior:contain;
  contain:layout paint;
}
.gl-mobv2__pitem{
  display:flex; align-items:center; gap:12px;
  width:100%;
  padding:14px 16px;
  border-bottom:1px solid var(--gl-line);
  min-height:54px;
  color:var(--gl-ink);
  background:#fff;
  text-decoration:none;
  text-align:left;
  font:inherit;
  transition:background .15s;
}
.gl-mobv2__pitem:active,
.gl-mobv2__pitem:hover{ background:var(--gl-magenta-50); }
.gl-mobv2__pitem[aria-expanded="true"]{
  background:var(--gl-magenta-50);
  color:var(--gl-magenta-700);
}

.gl-mobv2__picon{
  width:34px; height:34px;
  border-radius:9px;
  background:var(--gl-magenta-50);
  color:var(--gl-magenta);
  font-size:16px;
  display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 34px;
}
.gl-mobv2__picon--leaf{
  background:transparent;
  color:var(--gl-ink-3);
  font-size:18px; font-weight:700;
  width:24px; flex-basis:24px;
  height:24px;
}
.gl-mobv2__plabel{
  flex:1;
  font-size:14px; font-weight:600;
  line-height:1.25;
}
.gl-mobv2__pitem--leaf .gl-mobv2__plabel{ font-size:13.5px; font-weight:600; }
.gl-mobv2__phint{
  display:inline-block;
  font-size:11.5px; color:var(--gl-ink-3); font-weight:700;
  margin-left:8px;
}
.gl-mobv2__pchev{
  width:20px; height:20px;
  color:var(--gl-ink-3);
  display:flex; align-items:center; justify-content:center;
  flex:0 0 20px;
}
.gl-mobv2__pchev::before{
  content:"›";
  font-size:22px; font-weight:700; line-height:.8;
  margin-top:-3px;
}
[dir="rtl"] .gl-mobv2__pchev::before,
.ets-dir-rtl .gl-mobv2__pchev::before{ content:"‹"; }

/* Accents (Packs / Plantes vertes / Semis) */
.gl-mobv2__pitem[data-accent="magenta"] .gl-mobv2__picon{ background:var(--gl-magenta); color:#fff; }
.gl-mobv2__pitem[data-accent="green"]   .gl-mobv2__picon{ background:var(--gl-green); color:var(--gl-plum-900); }
.gl-mobv2__pitem[data-accent="yellow"]  .gl-mobv2__picon{ background:var(--gl-yellow); color:var(--gl-plum-900); }

/* Badge "EN CE MOMENT" */
.gl-mobv2__badge{
  display:inline-block;
  background:var(--gl-yellow);
  color:var(--gl-plum-900);
  font-size:10.5px; font-weight:900; letter-spacing:.4px;
  padding:3px 7px;
  border-radius:4px;
  margin-left:8px;
  vertical-align:middle;
}

/* "Voir tout" */
.gl-mobv2__see-all{
  display:flex; align-items:center; justify-content:space-between;
  background:linear-gradient(90deg, var(--gl-magenta-50), #FFF);
  color:var(--gl-magenta-700);
  font-weight:800; font-size:13.5px;
  padding:14px 16px;
  border-bottom:1px solid var(--gl-line);
  text-decoration:none;
  min-height:48px;
}
.gl-mobv2__see-all--root{
  background:linear-gradient(90deg, var(--gl-yellow-50), #FFF);
  color:var(--gl-plum-900);
  border-bottom:2px solid var(--gl-yellow);
}
.gl-mobv2__see-all .gl-mobv2__pchev{ color:var(--gl-magenta); }

/* Groupes de blocs */
.gl-mobv2__group{ background:#FBF9FA; }
.gl-mobv2__gtitle{
  font-size:11.5px; font-weight:900;
  text-transform:uppercase; letter-spacing:.6px;
  color:var(--gl-magenta-700);
  padding:12px 18px 6px;
}

/* ----------------------------------------------------------
 * 7. MARQUES & PRODUITS
 * ---------------------------------------------------------- */
.gl-mobv2__brands{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:8px;
  padding:10px 12px 16px;
}
.gl-mobv2__brand{
  display:flex; align-items:center; justify-content:center;
  padding:14px 8px;
  background:#fff;
  border:1px solid var(--gl-line);
  border-radius:10px;
  font-size:12.5px; font-weight:700;
  color:var(--gl-ink-2);
  text-align:center;
  min-height:54px;
  text-decoration:none;
}
.gl-mobv2__brand:active,
.gl-mobv2__brand:hover{
  border-color:var(--gl-magenta);
  background:var(--gl-magenta-50);
  color:var(--gl-magenta-700);
}
.gl-mobv2__brand img{
  max-width:100%; max-height:38px;
  width:auto; height:auto;
  object-fit:contain;
}

.gl-mobv2__prods{
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
  padding:10px 12px 16px;
}
.gl-mobv2__prod{
  background:#fff;
  border:1px solid var(--gl-line);
  border-radius:12px;
  padding:8px;
  display:flex; flex-direction:column; gap:5px;
  text-decoration:none;
  color:var(--gl-ink);
}
.gl-mobv2__prod-img{
  position:relative;
  aspect-ratio:1;
  background:linear-gradient(135deg, #F5F5F5, var(--gl-magenta-50));
  border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  font-size:11.5px; font-weight:800; color:var(--gl-ink-3);
  text-align:center; padding:6px;
}
.gl-mobv2__prod-img img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.gl-mobv2__prod-flag{
  position:absolute; top:6px; left:6px;
  background:var(--gl-magenta); color:#fff;
  padding:2px 6px; border-radius:4px;
  font-size:11px; font-weight:900;
}
.gl-mobv2__prod-name{
  font-size:12px; font-weight:600;
  color:var(--gl-ink); line-height:1.3;
  min-height:28px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.gl-mobv2__prod-price{
  font-size:13.5px; font-weight:900;
  color:var(--gl-magenta-700);
}
.gl-mobv2__prod-price s{
  font-weight:600; color:var(--gl-ink-3);
  font-size:11px; margin-left:4px;
}
.gl-mobv2__prod-stock{
  font-size:11px; font-weight:700;
  color:var(--gl-green-700); /* contraste WCAG AA */
}

/* ----------------------------------------------------------
 * 8. PIED DRAWER (utilitaires + CTA téléphone)
 * ---------------------------------------------------------- */
.gl-mobv2__foot{
  flex:0 0 auto;
  border-top:1px solid var(--gl-line);
  background:#FAF7F8;
  padding:8px 6px env(safe-area-inset-bottom, 8px);
}
/* En niveaux profonds, on compacte le pied pour libérer du scroll */
.gl-mobv2.lvl-2 .gl-mobv2__foot,
.gl-mobv2.lvl-3 .gl-mobv2__foot,
.gl-mobv2.lvl-4 .gl-mobv2__foot{
  padding-top:4px; padding-bottom:max(4px, env(safe-area-inset-bottom, 4px));
}
.gl-mobv2.lvl-3 .gl-mobv2__utils,
.gl-mobv2.lvl-4 .gl-mobv2__utils{ display:none; }

.gl-mobv2__utils{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
}
.gl-mobv2__util{
  display:flex; align-items:center; gap:10px;
  padding:11px 12px;
  color:var(--gl-ink-2);
  font-size:12.5px; font-weight:600;
  border-radius:8px;
  min-height:44px;
  text-decoration:none;
}
.gl-mobv2__util:active,
.gl-mobv2__util:hover{
  background:var(--gl-magenta-50);
  color:var(--gl-magenta-700);
}
.gl-mobv2__util-icon{
  width:26px; height:26px;
  border-radius:50%;
  background:#fff;
  border:1px solid var(--gl-line);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:13px; color:var(--gl-magenta);
  flex:0 0 26px;
}
.gl-mobv2__cta{
  margin:8px 12px 0;
  display:flex; align-items:center; justify-content:center; gap:8px;
  height:48px;
  border-radius:12px;
  background:linear-gradient(180deg, var(--gl-magenta), var(--gl-magenta-700));
  color:#fff; font-weight:800; font-size:13.5px;
  text-transform:uppercase; letter-spacing:.5px;
  text-decoration:none;
}

/* ----------------------------------------------------------
 * 9. AU-DESSUS DE 1024px : on désactive complètement l'overlay
 * ---------------------------------------------------------- */
@media (min-width:1025px){
  .gl-mobv2{ display:none; }
  body.gl-mobv2-open{ overflow:auto; }
}

/* ----------------------------------------------------------
 * 10. PRINT — masque le drawer si l'utilisateur imprime
 * ---------------------------------------------------------- */
@media print{
  .gl-mobv2{ display:none !important; }
}

/* ----------------------------------------------------------
 * 11. PREFERS-REDUCED-MOTION — désactive les transitions
 *     (WCAG 2.3.3 + bonne pratique vestibulaire)
 * ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .gl-mobv2__drawer,
  .gl-mobv2__panel,
  .gl-mobv2__scrim,
  .gl-mobv2__pitem{
    transition:none !important;
  }
}