/* ============================================================
   Growlee · landing « Sur le comptoir » (DA finale, spec v1)
   Seules valeurs hexadécimales autorisées : les 10 jetons ci-dessous
   (vérifié par apps/core/tests/test_brand_assets.py). Tout le reste passe par var().
   Ombres : uniquement des anneaux « 0 0 0 Npx » (interstices de pile).
   Décisions client v3 : aucune italique, aucun libellé en capitales espacées,
   aucun point médian, aucun filet en retrait (un bord de comptoir pleine largeur ou rien),
   chaque petit détail renvoie à un objet du commerce (ticket numéroté, trait de feutre…).
   ============================================================ */

/* ---------- 1 · Polices ---------- */
@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree/Figtree-Variable.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- 2 · Jetons ---------- */
:root {
  /* Couleurs — les trois premiers noms sont testés : ne pas renommer */
  --gl-green: #1d9e75;      /* encre verte : action, plaque verte, pass, colonne Recommandée */
  --gl-black: #111111;      /* encre noire : texte, filets, structure, marches, champ « le soir » */
  --gl-yellow: #ffd84d;     /* encre de fête : UNIQUEMENT au gain */
  --gl-green-ink: #11694e;  /* vert surimprimé : petit texte vert, coches, petits boutons, tags, tampon */
  --gl-white: #ffffff;      /* papier des objets */
  --gl-paper: #f7f8f6;      /* fond de page, interstices de pile */
  --gl-mint: #eaf7f2;       /* papier teinté : champ démo, bande d'essai, verre */
  --gl-grey: #5c605d;       /* texte secondaire sur papier / blanc / menthe */
  --gl-chalk: #b8bcb9;      /* texte secondaire sur noir, points de conduite */
  --gl-rule: #d9dcd8;       /* filets non porteurs de sens */

  /* Dérivés : canaux des jetons uniquement, jamais de nouvel hex */
  --gl-black-06: rgb(17 17 17 / .06);
  --gl-black-18: rgb(17 17 17 / .18);
  --gl-black-35: rgb(17 17 17 / .35);
  --gl-black-50: rgb(17 17 17 / .5);
  --gl-scrim: rgb(17 17 17 / .4);
  --gl-paper-72: rgb(247 248 246 / .72);
  --gl-paper-30: rgb(247 248 246 / .3);

  /* Typo — desktop ≥ 1024 (valeurs par défaut) */
  --gl-font: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-h1: clamp(44px, 4.45vw, 64px);   --lh-h1: .98;
  --fs-h2: clamp(30px, 3vw, 44px);      --lh-h2: 1.05;
  --fs-h2-soir: clamp(40px, 3.9vw, 56px); --lh-h2-soir: 1;
  --fs-h3: 20px;    --lh-h3: 1.2;
  --fs-lead: 19px;  --lh-lead: 1.5;
  --fs-body: 17px;  --lh-body: 1.55;
  --fs-small: 15px; --lh-small: 1.45;
  --fs-meta: 13px;
  --fs-price: 44px;
  --fs-btn: 19px;
  --fs-btn-2: 17px;
  --fs-btn-s: 16px;
  --fs-nav: 16px;
  --fs-faq-q: 18px; --fs-faq-a: 17px;
  --tr-h1: -.04em; --tr-h2: -.025em;

  /* Espacement */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-7: 32px; --s-8: 48px; --s-9: 64px; --s-10: 96px; --s-11: 128px;
  --gutter: clamp(24px, 4vw, 48px);
  --content: 1200px;
  --col-gap: 24px;
  --section-y: 96px;
  --folio-gap: 32px;
  --head-gap: 48px;
  --intro-gap: 16px;

  /* Rayons — liste fermée (surfaces et objets). Les contrôles n'ont plus de rayon : ils sont découpés (§4). */
  --r-receipt: 4px; --r-chip: 8px; --r-card: 14px; --r-surface: 18px; --r-sheet: 22px;

  /* La pile — géométrie mesurée du logo */
  --pile-dx: .275;
  --pile-dy: .516;
  --pile-gap: .056;
  --pile-gap-color: var(--gl-paper);

  /* Mouvement */
  --ease-pose: cubic-bezier(.2, .7, .2, 1);
  --t-fast: 160ms; --t-ui: 200ms; --t-pose: 280ms;

  /* Plans et chrome */
  --z-sticky: 40; --z-bar: 50; --z-scrim: 60; --z-sheet: 70;
  --header-h: 90px;
  --bar-h: 66px;
}

@media (max-width: 1023px) {
  :root {
    --fs-h1: clamp(40px, 5.6vw, 52px);
    --fs-h2: clamp(28px, 3.6vw, 36px);
    --fs-h2-soir: clamp(32px, 4.4vw, 40px);
    --fs-lead: 18px;
    --fs-price: 36px;
    --gutter: 32px; --col-gap: 20px; --section-y: 72px;
    --folio-gap: 24px; --head-gap: 32px;
    --content: 720px;
    --header-h: 64px;
  }
}
@media (max-width: 599px) {
  :root {
    --fs-h1: clamp(34px, 9.4vw, 40px);  --lh-h1: 1;
    --fs-h2: clamp(26px, 7.2vw, 30px);  --lh-h2: 1.08;
    --fs-h2-soir: var(--fs-h2);         --lh-h2-soir: 1.08;
    --fs-h3: 18px;    --lh-h3: 1.22;
    --fs-lead: 16px;  --lh-lead: 1.5;
    --fs-body: 16px;  --lh-body: 1.5;
    --fs-small: 14px; --lh-small: 1.4;
    --fs-price: 30px;
    --fs-btn-2: 16px;
    --fs-nav: 18px;
    --fs-faq-q: 16px; --fs-faq-a: 16px;
    --gutter: 20px; --col-gap: 12px; --section-y: 48px;
    --folio-gap: 12px; --head-gap: 24px; --intro-gap: 10px;
    --content: 560px;
  }
}
@media (max-width: 360px) {
  :root { --gutter: 16px; --section-y: 40px; }
}

/* Contexte de champ */
.gl-contact { --pile-gap-color: var(--gl-black); }

/* ---------- 3 · Base ---------- */
html, body { overflow-x: clip; }
html:has(body.landing-commerce) { scroll-padding-top: 16px; }
body.landing-commerce {
  margin: 0;
  background: var(--gl-paper);
  color: var(--gl-black);
  font: var(--fs-body)/var(--lh-body) var(--gl-font);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.landing-commerce *, .landing-commerce *::before, .landing-commerce *::after { box-sizing: border-box; }
.landing-commerce ::selection { background: var(--gl-mint); color: var(--gl-black); }
.landing-commerce button, .landing-commerce input { font-family: inherit; }
/* Remises à zéro sans poids de spécificité : les classes de composants gagnent toujours. */
:where(.landing-commerce) :where(h1, h2, h3, p, ol, ul, figure) { margin: 0; }
:where(.landing-commerce) :where(ol, ul) { padding: 0; list-style: none; }
:where(.landing-commerce) :where(a) { color: inherit; }
:where(.landing-commerce) :where(p) { text-wrap: pretty; }
:where(.landing-commerce) :where(svg) { overflow: visible; }
:where(.landing-commerce) :where(em, i, cite, address) { font-style: normal; }

.gl-sprites { position: absolute; width: 0; height: 0; overflow: hidden; }
/* Décision v3 : aucune italique sur la page, y compris dans le texte imprimé des dessins
   (les instances <use> héritent du style calculé de leurs symboles). */
.gl-sprites text { font-style: normal; }
.gl-wrap { width: min(100% - 2 * var(--gutter), var(--content)); margin-inline: auto; }
.gl-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.gl-ico { display: inline-block; width: 20px; height: 20px; flex: none; color: inherit; }

.gl-skip {
  position: absolute; z-index: calc(var(--z-sheet) + 1); left: 12px; top: 12px;
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  --b-fill: var(--gl-paper); color: var(--gl-black); border: 1.5px solid transparent;
  font: 700 16px/1 var(--gl-font); text-decoration: none;
  transform: translateY(-200%);
}
.gl-skip:focus { transform: none; }

/* Focus (§5.4) */
.landing-commerce :focus-visible { outline: 3px solid var(--gl-black); outline-offset: 3px; }
.gl-contact :focus-visible { outline-color: var(--gl-paper); }

/* Titres */
:where(.landing-commerce) h1 {
  font: 900 var(--fs-h1)/var(--lh-h1) var(--gl-font);
  letter-spacing: var(--tr-h1);
  text-wrap: balance;
}
:where(.landing-commerce) h1 span { display: block; }
:where(.landing-commerce) h2 {
  font: 800 var(--fs-h2)/var(--lh-h2) var(--gl-font);
  letter-spacing: var(--tr-h2);
  text-wrap: balance;
}
:where(.landing-commerce) h3 {
  font: 800 var(--fs-h3)/var(--lh-h3) var(--gl-font);
  letter-spacing: -.01em;
  text-wrap: balance;
}
.gl-intro { margin-top: var(--intro-gap); font-size: var(--fs-body); color: var(--gl-grey); max-width: 34em; }
/* Césure automatique : seulement les paragraphes courants des sections, sur téléphone (§6.3, §14). */
@media (max-width: 599px) {
  .gl-section p:not(.gl-folio):not(.gl-price):not(.gl-plan-flag) { hyphens: auto; -webkit-hyphens: auto; }
}

/* ---------- 4 · Boutons et liens (numériques : nets, sans ombre) ---------- */
/* Système de formes de la page (décisions client v3.3 et v3.4, une seule logique partout) :
   - surfaces, objets et cartes : la famille de rayons arrondis de la carte du logo (§7.4) ;
   - chaque action ou contrôle : l'étiquette d'épicier, un rectangle net aux quatre coins rentrants découpés
     à l'emporte-pièce, rien d'autre. Pleine pour l'action principale (10 px en L, 8 en M, 7 en S) ; au contour
     de 1,5 px #111 qui suit la découpe (6 px, plus sobre) pour le secondaire, « Menu », la fermeture de la
     feuille, les flèches du carrousel et le lien d'évitement ;
   - petits libellés et drapeaux : les tickets découpés (n° du parcours).
   La couleur (--b-fill) est peinte par ::before, seul masqué, le filet (--b-ink) par ::after : l'élément garde
   sa boîte au pixel près et son contour de focus entier (§5.4). Le rayon de 2 px ne sert qu'à la courbe de ce
   contour. */
.gl-btn {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: 0; border-radius: 2px; background: transparent;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 120ms linear, color 120ms linear, border-color 120ms linear;
  --k: 10px;
}
.gl-btn .gl-ico { transition: transform 120ms var(--ease-pose); }
.gl-btn:hover .gl-ico { transform: translateX(3px); }
.gl-btn:active { transform: translateY(1px); }
.gl-btn-primary { --b-fill: var(--gl-green); color: var(--gl-white); font: 800 var(--fs-btn)/1 var(--gl-font); }
.gl-btn-primary:hover { --b-fill: var(--gl-green-ink); }
.gl-btn-l { height: 56px; padding: 0 28px; }
.gl-btn-m { --k: 8px; height: 48px; padding: 0 20px; }
.gl-btn-s {
  --k: 7px; --b-fill: var(--gl-green-ink);
  height: 44px; padding: 0 18px;
  color: var(--gl-white); font: 800 var(--fs-btn-s)/1 var(--gl-font);
}
.gl-btn-s:hover { --b-fill: var(--gl-black); }
/* Contrôles au contour : la bordure de 1,5 px reste dans la boîte, transparente (visible en contraste élevé). */
:is(.gl-btn-secondary, .gl-choix, .gl-menu-toggle, .gl-icon-btn, .gl-skip) {
  --k: 6px; --b-ink: var(--gl-black);
  isolation: isolate; border-radius: 2px; -webkit-tap-highlight-color: transparent;
}
/* L'étiquette : quatre quarts de masque (51 % chacun, sans couture), coins rentrants nets. */
.gl-btn-primary::before, .gl-btn-s::before, :is(.gl-btn-secondary, .gl-choix, .gl-menu-toggle, .gl-icon-btn, .gl-skip)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--b-fill);
  transition: background-color 120ms linear;
  -webkit-mask:
    radial-gradient(circle at 0 0, transparent var(--k), var(--gl-black) calc(var(--k) + .6px)) left top / 51% 51% no-repeat,
    radial-gradient(circle at 100% 0, transparent var(--k), var(--gl-black) calc(var(--k) + .6px)) right top / 51% 51% no-repeat,
    radial-gradient(circle at 0 100%, transparent var(--k), var(--gl-black) calc(var(--k) + .6px)) left bottom / 51% 51% no-repeat,
    radial-gradient(circle at 100% 100%, transparent var(--k), var(--gl-black) calc(var(--k) + .6px)) right bottom / 51% 51% no-repeat;
  mask:
    radial-gradient(circle at 0 0, transparent var(--k), var(--gl-black) calc(var(--k) + .6px)) left top / 51% 51% no-repeat,
    radial-gradient(circle at 100% 0, transparent var(--k), var(--gl-black) calc(var(--k) + .6px)) right top / 51% 51% no-repeat,
    radial-gradient(circle at 0 100%, transparent var(--k), var(--gl-black) calc(var(--k) + .6px)) left bottom / 51% 51% no-repeat,
    radial-gradient(circle at 100% 100%, transparent var(--k), var(--gl-black) calc(var(--k) + .6px)) right bottom / 51% 51% no-repeat;
}
/* Le contour suit la découpe : quatre arcs et quatre côtés peints en dégradés (sans masque), sur toute la boîte. */
:is(.gl-btn-secondary, .gl-choix, .gl-menu-toggle, .gl-icon-btn, .gl-skip)::before { inset: -1.5px; }
:is(.gl-btn-secondary, .gl-choix, .gl-menu-toggle, .gl-icon-btn, .gl-skip)::after {
  --a: calc(var(--k) + 2.6px);
  content: ""; position: absolute; inset: -1.5px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle at 0 0, transparent var(--k), var(--b-ink) calc(var(--k) + .6px) calc(var(--k) + 1.5px), transparent calc(var(--k) + 2.1px)) left top / var(--a) var(--a) no-repeat,
    radial-gradient(circle at 100% 0, transparent var(--k), var(--b-ink) calc(var(--k) + .6px) calc(var(--k) + 1.5px), transparent calc(var(--k) + 2.1px)) right top / var(--a) var(--a) no-repeat,
    radial-gradient(circle at 0 100%, transparent var(--k), var(--b-ink) calc(var(--k) + .6px) calc(var(--k) + 1.5px), transparent calc(var(--k) + 2.1px)) left bottom / var(--a) var(--a) no-repeat,
    radial-gradient(circle at 100% 100%, transparent var(--k), var(--b-ink) calc(var(--k) + .6px) calc(var(--k) + 1.5px), transparent calc(var(--k) + 2.1px)) right bottom / var(--a) var(--a) no-repeat,
    linear-gradient(var(--b-ink) 0 0) top / calc(100% - 2 * var(--k) - .6px) 1.5px no-repeat,
    linear-gradient(var(--b-ink) 0 0) bottom / calc(100% - 2 * var(--k) - .6px) 1.5px no-repeat,
    linear-gradient(var(--b-ink) 0 0) left / 1.5px calc(100% - 2 * var(--k) - .6px) no-repeat,
    linear-gradient(var(--b-ink) 0 0) right / 1.5px calc(100% - 2 * var(--k) - .6px) no-repeat;
}
.gl-btn-secondary {
  height: 48px; padding: 0 20px;
  border: 1.5px solid transparent; color: var(--gl-black); font: 700 var(--fs-btn-2)/1 var(--gl-font);
}
.gl-btn-secondary:hover { --b-fill: var(--gl-black); color: var(--gl-white); }
/* Contraste élevé (Windows) : le fond peint par ::before peut disparaître, l'étiquette garde un bord.
   Les contrôles au contour gardent le leur : leur bordure transparente y devient visible. */
@media (forced-colors: active) {
  .landing-commerce .gl-btn-primary:not(:focus-visible), .landing-commerce .gl-btn-s:not(:focus-visible) {
    outline: 1.5px solid ButtonText; outline-offset: -1.5px;
  }
}

.gl-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  padding: 0; border: 0; background: none; cursor: pointer;
  font: 700 var(--fs-btn-2)/1.2 var(--gl-font); color: var(--gl-black);
  text-decoration: underline 2px var(--gl-green); text-underline-offset: 5px;
  transition: text-decoration-color 120ms linear;
}
.gl-link:hover { text-decoration-color: var(--gl-black); text-decoration-thickness: 3px; }
.gl-link-fleche::after {
  content: ""; width: 18px; height: 18px; flex: none;
  background: currentColor;
  -webkit-mask: url("../images/brand/icones/css/fleche.svg") center / contain no-repeat;
  mask: url("../images/brand/icones/css/fleche.svg") center / contain no-repeat;
  transition: transform 120ms var(--ease-pose);
}
.gl-link-fleche:hover::after { transform: translateX(3px); }

.gl-icon-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; padding: 0;
  border: 1.5px solid transparent;
  background: transparent; color: var(--gl-black); cursor: pointer;
  transition: color 120ms linear;
}
.gl-icon-btn:hover:not(:disabled) { --b-fill: var(--gl-black); color: var(--gl-white); }
.gl-icon-btn:active:not(:disabled), .gl-menu-toggle:active { transform: translateY(1px); }
.gl-icon-btn:disabled { opacity: .35; cursor: default; }

/* Ticket prédécoupé : la seule forme des petites étiquettes (noms des modules, « Notre conseil »).
   Papier à coins de reçu, un trou rond à chaque petit côté, comme le ticket de file d'attente. */
.gl-module-nom, .gl-plan-flag {
  --r: 4px;
  border-radius: var(--r-receipt);
  -webkit-mask: radial-gradient(circle at 0 50%, transparent var(--r), var(--gl-black) calc(var(--r) + .5px)) left / 51% 100% no-repeat,
                radial-gradient(circle at 100% 50%, transparent var(--r), var(--gl-black) calc(var(--r) + .5px)) right / 51% 100% no-repeat;
  mask: radial-gradient(circle at 0 50%, transparent var(--r), var(--gl-black) calc(var(--r) + .5px)) left / 51% 100% no-repeat,
        radial-gradient(circle at 100% 50%, transparent var(--r), var(--gl-black) calc(var(--r) + .5px)) right / 51% 100% no-repeat;
}

/* ---------- 5 · Objets d'édition : folio, comptoir, papier, trame ---------- */
.gl-folio {
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 2px;
  margin-bottom: var(--folio-gap);
  font: 700 15px/1.3 var(--gl-font);
  font-variant-numeric: tabular-nums;
}
.gl-folio span + span { font-weight: 600; color: var(--gl-grey); }

/* Bord de comptoir : le seul trait séparateur de la page, toujours d'un bord à l'autre de l'écran.
   Il déborde de sa colonne de 100vw de chaque côté ; la section qui le porte le coupe (overflow-x: clip). */
.gl-comptoir { position: relative; height: 10px; }
.gl-comptoir::before {
  content: ""; position: absolute; inset: 0 -100vw;
  border-top: 2px solid var(--gl-black); background: var(--gl-black-06);
}
.gl-hero, .gl-demo, .gl-footer { overflow-x: clip; }

.gl-papier, .gl-contact-demo, .gl-recu, .gl-affiche { position: relative; isolation: isolate; }
.gl-papier::after, .gl-contact-demo::after, .gl-recu::after, .gl-affiche::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background: url("../images/brand/textures/grain-papier.svg") var(--tooth-pos, 0 0) / 160px 160px;
  /* .5 au départ (spec §9.4) : à l'écran la dent lisait comme un bruit numérique sous le texte. */
  opacity: var(--tooth-a, .3); mix-blend-mode: multiply;
}
.gl-papier > *, .gl-contact-demo > *, .gl-recu > *, .gl-affiche > * { position: relative; z-index: 1; }
.gl-ombre { position: relative; isolation: isolate; }
.gl-ombre::before {
  content: ""; position: absolute; z-index: -1; inset: 8px 8px -8px -8px; border-radius: inherit; pointer-events: none; opacity: .5;
  background: radial-gradient(circle, var(--gl-black) 0 .9px, transparent 1.2px) 0 0 / 4px 4px,
              radial-gradient(circle, var(--gl-black) 0 .9px, transparent 1.2px) 2px 2px / 4px 4px;
}

.gl-section { padding-block: var(--section-y); }

/* ---------- 6 · En-tête : store, barre, sticky (desktop) ---------- */
.gl-header { position: relative; z-index: var(--z-sticky); }
.gl-awning { display: block; width: 100%; height: 18px; }
.gl-awning-s { display: none; }
.gl-banne-1 .gl-awning { animation: gl-banne 320ms var(--ease-pose) 60ms both; }
@keyframes gl-banne { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }

.gl-nav-slot { height: 72px; }
.gl-nav-row { height: 72px; background: var(--gl-paper); }
.gl-nav { display: flex; align-items: center; height: 100%; gap: 28px; }
.gl-brand { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; color: var(--gl-black); }
.gl-lockup { display: block; height: 30px; width: auto; aspect-ratio: 608 / 130; }
.gl-nav-links { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.gl-nav-links a, .gl-nav-login {
  display: inline-flex; align-items: center; min-height: 44px;
  font: 600 var(--fs-nav)/1 var(--gl-font); color: var(--gl-black); text-decoration: none;
  text-decoration-thickness: 2px; text-underline-offset: 6px;
}
.gl-nav-links a:hover, .gl-nav-links a.is-current, .gl-nav-login:hover { text-decoration: underline 2px var(--gl-green); text-underline-offset: 6px; }
.gl-nav-actions { display: flex; align-items: center; gap: 24px; margin-left: 20px; }
.gl-menu-toggle { display: none; }

@media (min-width: 1024px) {
  html:has(body.landing-commerce) { scroll-padding-top: 80px; }
  /* 64 px : l'étiquette « Essai gratuit » (44 px) garde 9 px de jour au-dessus du trait du bas (v3.1). */
  .gl-header.is-stuck .gl-nav-row {
    position: fixed; inset: 0 0 auto 0; height: 64px; z-index: var(--z-sticky);
    background: var(--gl-paper); border-bottom: 2px solid var(--gl-black);
    animation: gl-nav-in 200ms var(--ease-pose);
    transition: transform 200ms var(--ease-pose);
  }
  .gl-header.is-stuck .gl-lockup { height: 24px; }
  .gl-header.is-stuck.is-away .gl-nav-row { transform: translateY(-100%); }
}
@keyframes gl-nav-in { from { transform: translateY(-100%); } to { transform: none; } }

@media (max-width: 1023px) {
  .gl-awning { height: 12px; }
  .gl-awning-l { display: none; }
  .gl-awning-s { display: inline; }
  .gl-nav-slot, .gl-nav-row { height: 52px; }
  .gl-lockup { height: 22px; }
  .gl-nav-links, .gl-nav-actions { display: none; }
  /* « Menu » : contrôle au contour, même découpe que les boutons (§4) ; enfoncé = étiquette noire pleine. */
  .gl-menu-toggle {
    position: relative; display: inline-flex; align-items: center; gap: 8px; margin-left: auto;
    height: 44px; padding: 0 14px 0 12px;
    border: 1.5px solid transparent;
    background: transparent; color: var(--gl-black);
    font: 700 15px/1 var(--gl-font); cursor: pointer;
    transition: color 120ms linear;
  }
  .gl-menu-toggle[aria-expanded="true"] { --b-fill: var(--gl-black); color: var(--gl-white); }
  @media (hover: hover) {
    .gl-menu-toggle:hover { --b-fill: var(--gl-black); color: var(--gl-white); }
  }
}

/* ---------- 7 · Héros « Sur le comptoir » ---------- */
/* 52 px en bas (72 dans la spec) : tient le budget de 620 px à 1440 et resserre le blanc avant « La rue ». */
.gl-hero { padding: 56px 0 52px; }
.gl-hero-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
.gl-hero-copy { position: relative; grid-column: 1 / 7; grid-row: 1; align-self: end; padding-bottom: 24px; }
/* Trait de feutre vert sous « revenir » (marques.svg#gl-m-feutre). Le h1 est testé à l'octet près :
   le trait est un frère positionné en em du h1 (« revenir » commence à 4,374 em, large de 3,094 em). */
.gl-feutre {
  position: absolute; pointer-events: none;
  font-size: var(--fs-h1);
  left: 4.29em; top: calc(1.5em * var(--lh-h1) + .37em);
  width: 3.44em; height: .344em;
}
.gl-lead { margin-top: 32px; max-width: 31em; font: 400 var(--fs-lead)/var(--lh-lead) var(--gl-font); }
.gl-actions { display: flex; align-items: center; column-gap: 24px; row-gap: 8px; margin-top: 32px; flex-wrap: wrap; }
.gl-quiet { margin-top: 16px; font-size: 14px; line-height: 1.4; color: var(--gl-grey); }
/* Décision client : aucun objet ne touche le bord du comptoir. La pile garde un jour net au-dessus du trait
   (24 px, comme le bas du texte ; 16 px sur téléphone) ; le bord détouré du chevalet déborde de 2u sous son viewBox. */
.gl-hero-visual { position: relative; grid-column: 7 / 13; grid-row: 1; align-self: end; margin-bottom: 24px; }
.gl-pile { display: block; width: 100%; height: auto; }
.gl-pile-m { display: none; }
.gl-hero .gl-comptoir { grid-column: 1 / -1; grid-row: 2; }
.gl-legendes-wrap { grid-column: 7 / 13; grid-row: 3; margin-top: 10px; font: 600 13px/1.35 var(--gl-font); color: var(--gl-grey); font-variant-numeric: tabular-nums; }
.gl-legendes { display: flex; flex-wrap: wrap; column-gap: 20px; }
.gl-legendes li { white-space: nowrap; }
.gl-legendes b { font-weight: 700; color: var(--gl-black); }
.gl-legende-court { display: none; }
.gl-legende-demo { margin-top: 2px; }

.gl-annot {
  /* Ancrée par le bas (95u sur 380) : une ou deux lignes, la note reste à la même distance de la flèche. */
  position: absolute; left: 0; bottom: 75%; width: 34.6%; max-width: 200px;
  font: 600 15px/1.35 var(--gl-font); color: var(--gl-black);
  text-wrap: balance;
}
/* La pointe (60×120 : x 27,6 · y 110,6) se pose 8u au-dessus du chevalet (haut à y 220u sur 380) :
   à 32,6 % elle tombait dans l'encre noire et disparaissait. */
.gl-annot-fleche { position: absolute; left: 8.85%; top: 26.7%; width: 11.54%; height: auto; }
/* 1024–1199 : la note en 14 px garde un jour net (≥ 12 px) avec le bord de la carte Wallet. */
@media (min-width: 1024px) and (max-width: 1199px) { .gl-annot { font-size: 14px; } }

/* Pose de la pile (motion 2) */
.gl-pile-b, .gl-pile-c { transition: transform var(--t-pose) var(--ease-pose); }
.gl-pile-b { transition-delay: 120ms; }
.gl-pile-c { transition-delay: 240ms; }
.gl-js .gl-hero-visual:not(.is-set) .gl-pile-b { transform: translate(-10px, 10px); }
.gl-js .gl-hero-visual:not(.is-set) .gl-pile-c { transform: translate(-18px, 18px); }

@media (min-width: 1024px) and (max-width: 1199px) {
  /* Les trois légendes numérotées ne tiennent pas sur une ligne : la version courte, comme sur téléphone. */
  .gl-legendes { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .gl-legende-court { display: block; color: var(--gl-black); font-weight: 700; }
  /* Bouton + lien tiennent sur une ligne dans les 6 colonnes du texte. */
  .gl-hero .gl-actions { column-gap: 16px; }
  .gl-hero .gl-btn-l { padding: 0 20px; }
  .gl-hero .gl-actions .gl-link { font-size: 16px; }
}
@media (max-width: 1023px) {
  .gl-hero-grid { display: block; }
  .gl-hero-copy { padding-bottom: 0; }
  /* Tablette : le haut gauche de l'art board (55u, réservé à l'annotation desktop) est vide ;
     on le remonte pour garder 40 px entre la ligne discrète et la carte Wallet. */
  .gl-hero-visual { margin-top: -15px; pointer-events: none; }
  .gl-pile-d { width: min(100%, 520px); margin-left: auto; }
  .gl-annot, .gl-annot-fleche { display: none; }
  .gl-legendes-wrap { margin-top: 10px; }
  .gl-hero { padding: 40px 0 56px; }
}
@media (max-width: 599px) {
  /* 22 px en bas : le jour de 16 px entre la pile et le comptoir (v3.1) est repris ici, la rue garde ses 48 px ;
     le héros tient ainsi son budget de 740 px à 390. */
  .gl-hero { padding: 20px 0 22px; }
  .gl-lead { margin-top: 18px; }
  .gl-hero .gl-actions { flex-direction: column; align-items: flex-start; gap: 0; margin-top: 20px; }
  .gl-hero .gl-actions .gl-btn-l { align-self: stretch; }
  .gl-hero .gl-actions .gl-link { margin-top: 8px; }
  .gl-quiet { margin-top: 8px; }
  /* 17 px : le bord détouré du chevalet déborde d'environ 1 px sous l'art board ; jour mesuré 16 px à 360 et 390. */
  .gl-hero-visual { margin-top: 16px; margin-bottom: 17px; }
  .gl-pile-d { display: none; }
  .gl-pile-m { display: block; }
  .gl-hero .gl-comptoir { height: 7.5px; }
  .gl-hero .gl-comptoir::before { border-top-width: 1.5px; }
  .gl-legendes { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .gl-legende-court { display: block; color: var(--gl-black); font-weight: 700; }
  .gl-legendes-wrap { margin-top: 8px; }
  .landing-commerce .gl-btn-l { height: 54px; padding: 0 20px; }
}

/* ---------- 8 · La rue (#secteurs) ---------- */
.gl-rue-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
.gl-rue-head .gl-folio { grid-column: 1 / -1; }
.gl-rue-head h2 { grid-column: 1 / 9; grid-row: 2; }
.gl-rue-head .gl-intro { grid-column: 1 / 7; grid-row: 3; }
.gl-plaque { display: block; height: auto; }
.gl-plaque-d { grid-column: 10 / 13; grid-row: 2 / 4; width: 200px; justify-self: end; align-self: start; }

/* La rue court d'un bord à l'autre de l'écran : le trottoir dessiné touche les deux bords. */
.gl-rue-scroller { width: 100%; margin: 48px 0 0; padding-inline: 0; }
/* Deux rues à la même échelle : cinq commerces (300 u au cinquième), puis trois entreprises aux façades plus larges
   (500 u au tiers) ; chaque trottoir court d'un bord à l'autre de l'écran (décision client v4). */
.gl-street-row { display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); gap: 0; }
.gl-devanture { position: relative; min-width: 0; grid-column: span 3; }
.gl-devanture-entreprise { grid-column: span 5; margin-top: 56px; }
.gl-devanture-art svg { display: block; width: 100%; height: auto; overflow: hidden; }
.gl-devanture-art .gl-facade-m { display: none; }
.gl-devanture h3 { padding: 24px 24px 0; }
/* Le titre mène au guide du secteur (/ressources/) : même encre, soulignement au survol seulement. */
.gl-devanture-lien { color: inherit; text-decoration: none; }
.gl-devanture-lien:hover, .gl-devanture-lien:focus-visible { text-decoration: underline 2px var(--gl-green); text-underline-offset: 5px; }
.gl-devanture p { padding: 8px 24px 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--gl-grey); }
.gl-devanture:focus-within { outline: 3px solid var(--gl-black); outline-offset: -3px; }
.gl-devanture.is-hover .gl-facade-d { animation: gl-flap 400ms var(--ease-pose); transform-origin: 50% 0; }
@keyframes gl-flap { 0%, 100% { transform: none; } 45% { transform: skewX(1.5deg); } }
.gl-rue-controls { display: none; }

@media (max-width: 1023px) {
  .gl-rue-head { display: block; }
  .gl-plaque-d { display: none; }
  /* Une rue continue, d'un bord à l'autre de l'écran : les façades se touchent (gap 0),
     leur trottoir dessiné ne s'interrompt jamais ; chaque façade s'aligne sur le bord gauche. */
  .gl-rue-scroller {
    width: auto; margin: var(--head-gap) 0 0; padding: 0;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    scroll-padding-inline: 0;
    scrollbar-width: none;
  }
  .gl-rue-scroller::-webkit-scrollbar { display: none; }
  .gl-rue-scroller:focus-visible { outline-offset: -3px; }
  .gl-street-row {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 40%; gap: 0;
    padding: 4px 0 8px;
  }
  .gl-devanture, .gl-devanture-entreprise { grid-column: auto; margin-top: 0; scroll-snap-align: start; }
  .gl-devanture-art .gl-facade-d { display: none; }
  .gl-devanture-art .gl-facade-m { display: block; }
  .gl-devanture h3 { padding: 12px 12px 0 max(var(--gutter), (100vw - var(--content)) / 2); font-size: 18px; }
  .gl-devanture p { padding: 6px 12px 0 max(var(--gutter), (100vw - var(--content)) / 2); font-size: 15px; line-height: 1.45; }
  .gl-rue-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 60px; margin-top: 12px; }
  .gl-plaque-m { width: 136px; height: 60px; }
  .gl-rue-nav { display: flex; align-items: center; gap: 8px; }
  .gl-compteur { margin-right: 6px; font: 700 13px/1 var(--gl-font); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .gl-prev .gl-ico { transform: rotate(180deg); }
}
@media (max-width: 599px) {
  .gl-rue-head .gl-intro { display: none; }
  .gl-street-row { grid-auto-columns: 80%; }
}

/* ---------- 9 · Les modules à la carte (#modules, décision client v4) ---------- */
.gl-head-split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: last baseline; }
.gl-head-split h2 { grid-column: 1 / 6; }
.gl-head-split .gl-intro { grid-column: 7 / 12; margin-top: 0; }
/* Modules : titre d’une ligne, intro de deux. La ligne de base commune est la première, sinon le titre descend
   de 8 px sous son folio (40 au lieu de 32 px ailleurs). */
.gl-parcours .gl-head-split { align-items: first baseline; }
/* Deux présentoirs, même trait que le héros : le comptoir à gradins (les trois modules socle, la relation qui monte),
   puis le comptoir plat (avis, tableau de bord, jeux en option). Leur tracé déborde du SVG pour courir d'un bord
   à l'autre de l'écran : overflow visible, coupé par html, body { overflow-x: clip }. */
.gl-presentoir { display: block; width: 100%; height: auto; margin-top: 48px; overflow: visible; }
.gl-presentoir-b { margin-top: 64px; }
.gl-obj { transition: transform 240ms var(--ease-pose), opacity 240ms var(--ease-pose); transition-delay: calc(var(--i) * 90ms); }
.gl-js .gl-presentoir:not(.is-placed) .gl-obj { transform: translateY(-8px); opacity: 0; }
.gl-modules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--col-gap); padding-top: 24px; }
.gl-module { min-width: 0; }
/* Le nom du module sur un ticket prédécoupé (le ticket numéroté des parcours v3, sans numéro : les modules se
   choisissent, ils ne se suivent pas). Les jeux, en option, ont le ticket blanc au filet noir. */
.gl-module-nom {
  --r: 5px;
  display: inline-flex; align-items: center; height: 34px; padding: 0 18px;
  background: var(--gl-green); color: var(--gl-black);
  font: 800 16px/1 var(--gl-font); white-space: nowrap;
}
.gl-module:nth-child(1) .gl-module-nom { rotate: -2deg; }
.gl-module:nth-child(3) .gl-module-nom { rotate: 1.5deg; }
.gl-module-option .gl-module-nom { background: var(--gl-white); box-shadow: inset 0 0 0 1.5px var(--gl-black); }
.gl-module h3 { margin: 16px 0 8px; }
.gl-module h3 + p { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--gl-grey); max-width: 30em; }

@media (max-width: 1023px) {
  .gl-head-split { display: block; }
  .gl-head-split .gl-intro { margin-top: var(--intro-gap); }
  .gl-presentoir { display: none; }
  .gl-modules { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; row-gap: 28px; padding-top: 0; }
  .gl-modules:first-of-type { padding-top: var(--head-gap); }
  .gl-presentoir-b + .gl-modules { padding-top: 28px; }
  .gl-module-nom { height: 30px; padding: 0 14px; font-size: 15px; --r: 4.5px; }
  .gl-module h3 { margin: 12px 0 6px; }
  .gl-module h3 + p { font-size: 15px; line-height: 1.45; }
}
@media (max-width: 599px) {
  .gl-parcours .gl-head-split .gl-intro { display: none; }
  .gl-modules { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
  .gl-presentoir-b + .gl-modules { padding-top: 22px; }
  .gl-module h3 { margin: 10px 0 4px; }
}

/* ---------- 10 · La démo (#jouer, seul champ menthe) : la carte Wallet (décision client v4) ---------- */
/* Une carte Wallet dessinée à plat (ni téléphone, ni reflet), posée sur le comptoir avec un jour net de 24 px.
   À gauche, ce que fait le commerçant (type de carte, passage, notification) ; à droite, ce que voit le client. */
.gl-demo { background: var(--gl-mint); }
.gl-demo-grid {
  display: grid; column-gap: var(--col-gap);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto auto auto 1fr auto;
  grid-template-areas: "copy stage" "mode stage" "actions stage" "note stage" "comptoir comptoir";
}
.gl-demo-copy { grid-area: copy; }
.gl-demo-copy > p:not(.gl-folio) { margin-top: var(--intro-gap); max-width: 34em; }
.gl-demo-mode { grid-area: mode; display: none; gap: 8px; margin-top: 32px; }
.gl-demo-actions { grid-area: actions; display: none; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }
.gl-js .gl-demo-mode, .gl-js .gl-demo-actions { display: flex; }
.gl-demo-note { grid-area: note; margin-top: 16px; font: 400 14px/1.4 var(--gl-font); color: var(--gl-grey); }
.gl-demo-stage { grid-area: stage; align-self: end; position: relative; }
.gl-demo-grid > .gl-comptoir { grid-area: comptoir; margin-top: 24px; }
/* Le bord de comptoir ferme la scène : 48 px de menthe dessous, pas une bande vide. */
@media (min-width: 1024px) { .gl-demo { padding-bottom: 48px; } }

/* Type de carte : deux étiquettes au contour ; la carte choisie est l'étiquette noire pleine (§4). */
.gl-choix {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 18px; border: 1.5px solid transparent;
  background: transparent; color: var(--gl-black); cursor: pointer;
  font: 700 var(--fs-btn-2)/1 var(--gl-font);
  transition: color 120ms linear;
}
.gl-choix[aria-pressed="true"] { --b-fill: var(--gl-black); color: var(--gl-white); }
@media (hover: hover) { .gl-choix[aria-pressed="false"]:hover { --b-fill: var(--gl-paper); } }
.gl-choix:active { transform: translateY(1px); }

/* La carte : la famille de rayons de la carte du logo, aplats nets, aucune ombre. */
/* Le haut de la scène garde la place de la notification : elle tombe au-dessus de la carte, la chevauche de 16 px
   (anneau menthe, comme les cartes du logo) et ne cache jamais un tampon ni une étape. */
.gl-wallet { position: relative; width: 340px; margin-inline: auto; padding-top: 92px; }
.gl-pass {
  display: flex; flex-direction: column;
  padding: 18px 20px 20px; border-radius: var(--r-sheet);
  background: var(--gl-green); color: var(--gl-black);
  font-variant-numeric: tabular-nums;
}
.gl-pass[hidden] { display: none; }
.gl-pass-head { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; column-gap: 10px; align-items: center; min-height: 48px; }
.gl-mono {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 36px; height: 36px; border-radius: 50%; background: var(--gl-black); color: var(--gl-white);
  font: 800 13px/1 var(--gl-font);
}
.gl-pass-head strong { font: 800 18px/1.15 var(--gl-font); }
.gl-pass-champ { display: flex; flex-direction: column; align-items: flex-end; }
.gl-pass-champ span { font: 700 13px/1.2 var(--gl-font); }
.gl-pass-champ b { font: 900 30px/1 var(--gl-font); letter-spacing: -.02em; color: var(--gl-white); white-space: nowrap; }
.gl-pass-champs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; margin: 16px 0 0; }
.gl-pass-champs dt { font: 700 13px/1.3 var(--gl-font); }
.gl-pass-champs dd { margin: 2px 0 0; font: 800 17px/1.25 var(--gl-font); }
.gl-pass-code {
  align-self: center; width: 96px; height: 96px; margin-top: 18px; padding: 8px;
  background: var(--gl-white); border-radius: var(--r-card);
}
.gl-pass-code svg { display: block; width: 100%; height: 100%; }

/* Fidélité : la bande des tampons (vert surimprimé), dix cases ; le dixième passage est un moment gagnant (jaune). */
.gl-tampons {
  display: grid; grid-template-columns: repeat(5, 40px); justify-content: space-between; row-gap: 10px;
  margin: 16px -20px 0; padding: 14px 20px; background: var(--gl-green-ink);
}
.gl-tampons li { position: relative; width: 40px; height: 40px; border-radius: 50%; border: 2px dashed var(--gl-paper-72); }
.gl-tampons li.is-on { border: 0; background: var(--gl-paper); }
.gl-tampons li.is-on::after {
  content: ""; position: absolute; inset: 9px; background: var(--gl-green-ink);
  -webkit-mask: url("../images/brand/icones/css/coche.svg") center / contain no-repeat;
  mask: url("../images/brand/icones/css/coche.svg") center / contain no-repeat;
}
.gl-tampons li:last-child.is-on { background: var(--gl-yellow); }
.gl-tampons li:last-child.is-on::after { background: var(--gl-black); }
.gl-tampons li.is-new { animation: gl-coup-tampon 240ms var(--ease-pose) both; }
@keyframes gl-coup-tampon { 0% { transform: scale(1.3); opacity: 0; } 60% { transform: scale(.94); opacity: 1; } 100% { transform: none; } }
.gl-pass-champ b.is-new { animation: gl-coup-tampon 240ms var(--ease-pose) both; }
.gl-pass-cadeau { display: inline-block; }
.gl-pass.is-complete .gl-pass-cadeau { padding: 2px 10px; margin-left: -10px; background: var(--gl-yellow); border-radius: var(--r-receipt); }

/* Suivi de dossier : la carte noire de l'entreprise, ses étapes reliées par un fil vert. */
.gl-pass-entreprise { background: var(--gl-black); color: var(--gl-white); }
.gl-pass-entreprise .gl-mono { background: var(--gl-green); color: var(--gl-black); }
.gl-pass-entreprise .gl-pass-champ span, .gl-pass-entreprise .gl-pass-champs dt { color: var(--gl-chalk); }
.gl-pass-entreprise .gl-pass-champ b { font-size: 24px; }
/* Carte client d'une entreprise : l'avantage en grand, comme la récompense de la carte de fidélité. */
.gl-pass-avantage { display: flex; flex-direction: column; gap: 4px; margin: 20px 0 4px; }
.gl-pass-avantage span { font: 700 13px/1.2 var(--gl-font); color: var(--gl-chalk); }
.gl-pass-avantage b { font: 900 26px/1.1 var(--gl-font); letter-spacing: -.02em; color: var(--gl-white); }

/* La notification de l'écran verrouillé : un objet net posé devant le haut de la carte, ancré par le bas
   (un message de deux lignes monte, il ne descend pas sur la carte), décalé vers la gauche comme la pile du logo. */
.gl-notif {
  position: absolute; z-index: 2; bottom: calc(100% - 92px - 14px); left: -24px; width: calc(100% - 48px);
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; column-gap: 10px; row-gap: 6px; align-items: center;
  padding: 12px 14px 14px; border: 1.5px solid var(--gl-black); border-radius: var(--r-surface);
  background: var(--gl-white); color: var(--gl-black); box-shadow: 0 0 0 6px var(--gl-mint);
  opacity: 0; visibility: hidden; transform: translateY(-14px);
  transition: opacity 160ms linear, transform 160ms var(--ease-pose), visibility 0s linear 160ms;
}
.gl-notif.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 200ms linear, transform 280ms var(--ease-pose); }
.gl-notif-ico {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 7px;
  background: var(--gl-black); color: var(--gl-white); font: 800 11px/1 var(--gl-font);
}
.gl-notif.is-entreprise .gl-notif-ico { background: var(--gl-green); color: var(--gl-black); }
.gl-notif strong { font: 800 15px/1.2 var(--gl-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gl-notif small { font: 600 13px/1 var(--gl-font); color: var(--gl-grey); }
.gl-notif p { grid-column: 1 / -1; font: 500 15px/1.4 var(--gl-font); }

@media (min-width: 1024px) and (max-width: 1279px) { .gl-wallet { width: 320px; } }
@media (max-width: 1023px) {
  .gl-demo-grid { display: flex; flex-direction: column; }
  .gl-demo-mode { margin-top: 24px; }
  .gl-demo-stage { align-self: stretch; margin-top: 8px; }
  .gl-demo-grid > .gl-comptoir { display: none; }
  .gl-wallet { width: min(100%, 360px); }
  .gl-demo-actions { width: min(100%, 360px); align-self: center; margin-top: 20px; }
  .gl-demo-note { width: min(100%, 360px); align-self: center; margin-top: 12px; }
}
@media (max-width: 599px) {
  .gl-wallet { width: 100%; }
  .gl-pass { padding: 16px 16px 18px; }
  .gl-tampons { grid-template-columns: repeat(5, 36px); margin-inline: -16px; padding: 12px 16px; }
  .gl-tampons li { width: 36px; height: 36px; }
  .gl-tampons li.is-on::after { inset: 8px; }
  .gl-demo-actions { width: 100%; flex-direction: column; align-items: stretch; gap: 8px; }
  .gl-demo-note { width: 100%; }
  .gl-notif { left: -6px; width: calc(100% - 64px); min-width: 264px; }
}

/* ---------- 11 · Avant / après (#difference) ---------- */
.gl-difference-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
/* Six colonnes pour que « ou elle travaille pour vous. » tienne sur sa ligne, en écho au h1. */
.gl-difference-copy { grid-column: 1 / 7; }
#difference-title em { display: block; }
.gl-carte-papier { width: 380px; max-width: 100%; margin-top: 32px; rotate: -3deg; }
.gl-carte-papier svg { display: block; width: 100%; height: auto; }
.gl-carte-papier figcaption { margin-top: 16px; rotate: 3deg; font-size: 13px; line-height: 1.4; color: var(--gl-grey); }
.gl-recu-wrap { grid-column: 7 / 13; justify-self: end; width: 480px; max-width: 100%; position: relative; border-radius: var(--r-receipt); }
.gl-recu {
  --z: 7px;
  --tooth-pos: 53px 91px;
  background: var(--gl-white); border-radius: var(--r-receipt);
  padding: calc(14px + var(--z)) 24px;
  font-variant-numeric: tabular-nums;
  -webkit-mask: conic-gradient(from 135deg at top, transparent, var(--gl-black) 1deg 89deg, transparent 90deg) top / calc(2 * var(--z)) 51% repeat-x,
                conic-gradient(from -45deg at bottom, transparent, var(--gl-black) 1deg 89deg, transparent 90deg) bottom / calc(2 * var(--z)) 51% repeat-x;
  mask: conic-gradient(from 135deg at top, transparent, var(--gl-black) 1deg 89deg, transparent 90deg) top / calc(2 * var(--z)) 51% repeat-x,
        conic-gradient(from -45deg at bottom, transparent, var(--gl-black) 1deg 89deg, transparent 90deg) bottom / calc(2 * var(--z)) 51% repeat-x;
}
.gl-recu-head {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px;
  padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1.5px dashed var(--gl-black-50);
  font-size: 13px; line-height: 1.35; color: var(--gl-grey);
}
.gl-recu-head strong { font: 800 17px/1.3 var(--gl-font); color: var(--gl-black); }
.gl-recu-col { margin: 8px 0 2px; font: 800 15px/1.2 var(--gl-font); color: var(--gl-grey); }
.gl-recu-col-vert { color: var(--gl-green-ink); margin-top: 10px; }
.gl-recu-avant li { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 10px; padding: 5px 0; color: var(--gl-grey); }
.gl-recu-avant .gl-ico { grid-row: 1 / 3; margin-top: 1px; }
.gl-recu-avant b { font: 600 15px/1.3 var(--gl-font); }
.gl-recu-avant small { grid-column: 2; font-size: 13px; line-height: 1.35; }
/* La carte papier raconte déjà l'« avant » : le reçu ne garde que les constats, et leur blanc reçoit le tampon. */
.gl-recu-avant small { display: none; }
.gl-recu-apres li { display: grid; grid-template-columns: 44px minmax(0, 1fr) 20px; column-gap: 8px; align-items: baseline; padding: 4px 0; }
.gl-heure { font: 800 13px/1.3 var(--gl-font); font-variant-numeric: tabular-nums; }
.gl-recu-apres b { font: 800 16px/1.3 var(--gl-font); }
.gl-recu-apres .gl-ico { color: var(--gl-green-ink); align-self: center; }
.gl-recu-apres small { grid-column: 2; font-size: 14px; line-height: 1.35; color: var(--gl-grey); }
.gl-recu-total {
  display: flex; align-items: baseline; gap: 10px;
  margin-top: 12px; padding-top: 12px; border-top: 1.5px dashed var(--gl-black-50);
  font: 800 15px/1.2 var(--gl-font);
}
.gl-recu-total i { flex: 1; min-width: 12px; border-bottom: 2px dotted var(--gl-chalk); }
.gl-recu-total strong { font: 800 16px/1.2 var(--gl-font); }
.gl-recu-merci { margin-top: 10px; text-align: center; font-size: 13px; color: var(--gl-grey); }
/* Décision v3.1 : le tampon est frappé dans le blanc du reçu, à droite des constats « Aujourd'hui ».
   Il ne touche ni le filet de l'en-tête, ni « Avec Growlee », ni un mot, ni le bord dentelé. */
.gl-recu-avant-bloc { position: relative; }
.gl-tampon {
  /* Sous 120 px les légendes en arc passeraient sous 9 px : traits honnêtes (bascule prévue par l'asset). */
  --tampon: 116px; --gl-tp-mots: none; --gl-tp-traits: inline;
  position: absolute; z-index: 0; right: 0; top: 50%; width: var(--tampon); height: var(--tampon); margin-top: calc(var(--tampon) / -2);
  transform: rotate(-8deg); mix-blend-mode: multiply; pointer-events: none;
}
.gl-js .gl-tampon { opacity: 0; }
.gl-js .gl-tampon.is-stamped { opacity: 1; animation: gl-coup 220ms var(--ease-pose) both; }
@keyframes gl-coup {
  0% { transform: scale(1.14) rotate(-8deg); opacity: 0; }
  60% { transform: scale(.97) rotate(-8deg); opacity: 1; }
  100% { transform: scale(1) rotate(-8deg); opacity: 1; }
}

@media (max-width: 1023px) {
  .gl-difference-grid { display: block; }
  /* La trame d'ombre déborde de 8 px à gauche : on décale le reçu pour qu'elle reste dans la gouttière. */
  .gl-recu-wrap { width: calc(100% - 8px); max-width: 560px; margin-left: 8px; justify-self: auto; }
}
@media (min-width: 600px) and (max-width: 1023px) {
  .gl-carte-papier { width: 240px; margin: 24px 0 -64px 16px; position: relative; z-index: 0; }
  .gl-carte-papier figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .gl-recu-wrap { z-index: 1; }
}
@media (max-width: 599px) {
  /* 180 px : les mots imprimés passeraient sous 10 px ; la carte bascule sur ses traits d'encre (prévu par l'asset).
     -44 px : le reçu glisse sur la carte au milieu de la première rangée de cases, pas sur leur bord. */
  .gl-carte-papier { --gl-cp-texte: none; --gl-cp-lignes: inline; width: 180px; margin: 16px 0 -44px 8px; position: relative; z-index: 0; }
  .gl-carte-papier figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .gl-recu-wrap { z-index: 1; }
  .gl-recu { padding: calc(16px + var(--z)) 16px; }
  .gl-recu-apres small { display: none; }
  .gl-recu-avant li { padding: 3px 0; }
  .gl-recu-apres li { padding: 4px 0; }
  .gl-recu-head { padding-bottom: 8px; margin-bottom: 6px; }
  .gl-recu-total { margin-top: 10px; padding-top: 10px; }
  .gl-recu-merci { margin-top: 10px; }
  .gl-recu-apres .gl-recu-garde small { display: block; }
  .gl-tampon { --tampon: 106px; right: -2px; }
}

/* ---------- 12 · Tarifs (#tarifs) — « le prix affiché », trois offres (décisions client v2 et v3.3) ---------- */
/* « L'étal en largeur » : une affiche blanche à traits de coupe, sur toute la largeur du contenu, trois colonnes
   de même hauteur. La formule Standard au centre, la plus large, monte d'une marche sur son champ vert
   (« les marches » au service de la recommandation) ; l'essai (menthe) et les multisites (vert bouteille)
   partent du haut de son contenu et finissent sur la ligne de son bouton.
   Le DOM garde l'ordre mobile (Standard d'abord) ; la grille replace les colonnes. */
.gl-affiche {
  --tooth-pos: 117px 29px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr) minmax(0, 1fr); column-gap: 28px;
  margin: var(--head-gap) auto 0; padding: 76px 40px 46px;
  background: var(--gl-white); border-radius: var(--r-receipt);
}
.gl-affiche > .gl-plan-trial { grid-column: 1; grid-row: 1; }
.gl-affiche > .gl-plan-featured { grid-column: 2; grid-row: 1; }
.gl-affiche > .gl-plan-multi { grid-column: 3; grid-row: 1; }
.gl-affiche > .gl-coupe { position: absolute; width: 24px; height: 24px; color: var(--gl-black); }
.gl-coupe-tl { top: -20px; left: -20px; }
.gl-coupe-tr { top: -20px; right: -20px; transform: rotate(90deg); }
.gl-coupe-br { bottom: -20px; right: -20px; transform: rotate(180deg); }
.gl-coupe-bl { bottom: -20px; left: -20px; transform: rotate(270deg); }

.gl-plan { min-width: 0; }
.gl-plan h3 { font-size: 20px; }
.gl-price { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 8px; row-gap: 2px; margin-top: 8px; }
.gl-price strong { font: 800 var(--fs-price)/1 var(--gl-font); letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gl-price span { font: 600 15px/1.3 var(--gl-font); color: var(--gl-grey); }

/* Essai et multisites : deux cartons de la hauteur du Standard. Sur grand écran, leur phrase devient trois lignes
   de conduite, intitulé, pointillés et valeur, comme une étiquette de prix (la liste est dans le HTML, l'une ou l'autre est affichée, jamais les deux) ;
   le lien descend sur la ligne du bouton « Choisir Standard ». */
.gl-plan-trial, .gl-plan-multi { display: flex; flex-direction: column; padding: 24px 24px 14px; border-radius: var(--r-card); }
.gl-plan-trial .gl-price, .gl-plan-multi .gl-price { flex-direction: column; align-items: flex-start; row-gap: 4px; }
.gl-plan-desc { display: none; }
/* Lignes de conduite, comme le total du reçu et le sommaire : intitulé, pointillés, valeur. */
.gl-plan-points { margin: 14px 0 10px; }
.gl-plan-points li { display: flex; align-items: baseline; gap: 8px; min-height: 36px; padding: 8px 0 0; font: 600 15px/1.25 var(--gl-font); }
.gl-plan-points li span { color: var(--gl-grey); white-space: nowrap; }
.gl-plan-points li i { flex: 1; min-width: 12px; border-bottom: 2px dotted var(--gl-chalk); }
.gl-plan-points li b { font-weight: 800; text-align: right; }
.gl-plan-rows li span { text-wrap: balance; }
/* Boîte du lien élargie de 8 px de part et d'autre (le texte ne bouge pas) : l'anneau de focus se dessine
   dedans, à 4 px du texte voisin et du bord du carton. La marge basse négative pose le lien sur la ligne du bouton. */
.gl-plan-trial .gl-link, .gl-plan-multi .gl-link { align-self: flex-start; margin: auto -8px -12px; padding: 0 8px; }
.gl-plan-trial .gl-link:focus-visible, .gl-plan-multi .gl-link:focus-visible { outline-offset: -4px; }

/* Essai : le carton menthe, à gauche de la marche. */
.gl-plan-trial { background: var(--gl-mint); }

/* Standard : la marche du milieu, sur le champ vert */
.gl-plan-featured { position: relative; padding: 0 20px; }
.gl-plan-featured::before {
  content: ""; position: absolute; inset: -24px -4px -14px -4px; z-index: -1;
  background: var(--gl-green); border-radius: var(--r-sheet);
}
.gl-plan-featured h3, .gl-plan-featured .gl-price strong { color: var(--gl-white); }
.gl-plan-featured .gl-price span { color: var(--gl-black); }
/* La tête sur une ligne : le nom et le prix à gauche, la promesse à droite. */
.gl-plan-featured .gl-plan-head { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 28px; align-items: end; }
.gl-plan-featured .gl-plan-head h3, .gl-plan-featured .gl-plan-head .gl-price { grid-column: 1; }
.gl-plan-pitch { grid-column: 2; grid-row: 1 / 3; align-self: end; margin: 0 0 2px; font-size: 15px; line-height: 1.45; color: var(--gl-black); }
/* Sept lignes lues en colonnes (4 puis 3), comme une liste qui continue : l'ordre de lecture reste celui du DOM. */
.gl-plan-rows {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: repeat(4, auto);
  grid-auto-flow: column; column-gap: 20px; align-content: start; margin-top: 16px;
}
.gl-plan-rows li {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 3px 0;
  font: 600 15px/1.25 var(--gl-font); color: var(--gl-black);
}
.gl-plan-rows .gl-ico { width: 20px; height: 20px; color: var(--gl-black); }
/* Un bouton vert sur le champ vert disparaîtrait : sur la marche, l'action passe à l'encre noire. */
.gl-plan-featured > .gl-btn { width: 100%; margin-top: 12px; --b-fill: var(--gl-black); }
.gl-plan-featured > .gl-btn:hover { --b-fill: var(--gl-green-ink); }
.gl-plan-featured :focus-visible { outline-color: var(--gl-paper); }
/* « Notre conseil » : un ticket prédécoupé posé au-dessus du champ vert, jamais bord à bord (v3.1) :
   8 px de jour au moins sous son coin le plus bas une fois incliné. */
.gl-plan-flag {
  position: absolute; top: -35px; left: 8px; translate: 0 -100%; rotate: -2deg; isolation: isolate;
  display: flex; align-items: center; height: 30px; padding: 0 16px;
  background: var(--gl-black); color: var(--gl-white);
  font: 800 15px/1 var(--gl-font); white-space: nowrap;
}
.gl-plan-flag::after {
  /* .9 au départ : les lacunes blanches grignotaient les lettres de 15 px ; à .45 l'encre reste imprimée et le mot net. */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .45; pointer-events: none;
  background: url("../images/brand/textures/vides-encre.svg") 0 0 / 160px 160px;
}

/* Multisites : le carton vert bouteille, à droite de la marche (le vert des enseignes émaillées et des kiosques) ;
   texte blanc, second plan et coches menthe. Jamais de drapeau ni de marche ; son prix suit l'échelle des deux autres. */
.gl-plan-multi { background: var(--gl-green-ink); color: var(--gl-white); }
.gl-plan-multi h3, .gl-plan-multi .gl-price strong { color: var(--gl-white); }
.gl-plan-multi .gl-price span, .gl-plan-multi .gl-plan-points li span { color: var(--gl-mint); }
.gl-plan-multi .gl-plan-points li i { border-bottom-color: rgb(247 248 246 / .3); }
.gl-plan-multi .gl-link { color: var(--gl-white); text-decoration-color: var(--gl-mint); }
.gl-plan-multi .gl-link:hover { text-decoration-color: var(--gl-white); }
.gl-plan-multi :focus-visible { outline-color: var(--gl-paper); }

/* 1024–1199 : la colonne Standard s'élargit encore, sa promesse repasse sous le prix. */
@media (min-width: 1024px) and (max-width: 1199px) {
  /* Colonnes rééquilibrées : chaque côté garde intitulé, pointillés (22 px au moins à 1024) et valeur sur une ligne,
     les sept lignes du Standard restent chacune sur une ligne. */
  .gl-affiche { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1.84fr) minmax(0, 1.08fr); column-gap: 16px; padding-inline: 24px; }
  .gl-plan-featured { padding: 0 12px; }
  .gl-plan-featured .gl-plan-head { grid-template-columns: auto; }
  .gl-plan-pitch { grid-column: 1; grid-row: auto; margin-top: 8px; font-size: 14px; }
  .gl-plan-rows { column-gap: 8px; }
  .gl-plan-rows li { min-height: 40px; gap: 8px; font-size: 14px; }
  .gl-plan-points { margin-top: 20px; }
  .gl-plan-points li { min-height: 40px; font-size: 14px; }
  .gl-plan-trial, .gl-plan-multi { padding: 22px 18px 12px; }
  .gl-plan-trial .gl-link, .gl-plan-multi .gl-link { margin-bottom: -10px; }
  .gl-plan-trial .gl-price strong, .gl-plan-multi .gl-price strong { font-size: 40px; }
  /* Intitulé, pointillés et valeur tiennent sur une ligne : la valeur ne se coupe jamais. */
  .gl-plan-points li b { white-space: nowrap; }
}
@media (max-width: 1023px) {
  .gl-affiche {
    display: flex; flex-direction: column; align-items: stretch; gap: 12px;
    max-width: 560px; margin: calc(var(--head-gap) + 26px) 0 0; padding: 0; background: none;
  }
  .gl-affiche::after, .gl-affiche > .gl-coupe { display: none; }
  .gl-plan-featured { order: 1; padding: 0; background: var(--gl-mint); border-radius: var(--r-card); }
  .gl-plan-trial { order: 2; }
  .gl-plan-multi { order: 3; }
  .gl-plan-featured::before { display: none; }
  .gl-plan-flag { top: -11px; left: 16px; height: 24px; padding: 0 13px; }
  .gl-plan-featured .gl-plan-head {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: 12px;
    padding: 10px 16px; background: var(--gl-green); border-radius: var(--r-card) var(--r-card) 0 0;
  }
  /* Blanc sur vert : 19 px / 800 minimum (§5.2), sinon le contraste 3,39:1 ne suffit pas. */
  .gl-plan-featured .gl-plan-head h3 { font-size: 19px; }
  .gl-plan-featured .gl-price { margin-top: 0; }
  .gl-plan-featured .gl-price span { font-size: 13px; }
  .gl-plan-pitch { display: none; }
  .gl-plan-rows { display: block; margin: 0; padding: 2px 16px 0; }
  .gl-plan-rows li { min-height: 34px; gap: 10px; padding: 2px 0; font-size: 14px; line-height: 1.3; }
  .gl-plan-rows .gl-ico { width: 18px; height: 18px; color: var(--gl-green-ink); }
  .gl-plan-featured > .gl-btn { display: flex; width: auto; margin: 4px 16px 16px; --b-fill: var(--gl-green); }
  .gl-plan-featured > .gl-btn:hover { --b-fill: var(--gl-green-ink); }
  .gl-plan-featured :focus-visible { outline-color: var(--gl-black); }

  /* Essai puis multisites : deux bandes (menthe, vert bouteille), leur phrase à la place des lignes de conduite. */
  .gl-plan-trial, .gl-plan-multi {
    display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: baseline;
    padding: 12px 16px 2px;
  }
  .gl-plan-trial .gl-price, .gl-plan-multi .gl-price { margin-top: 0; flex-direction: row; align-items: baseline; row-gap: 2px; }
  .gl-plan-trial .gl-price span, .gl-plan-multi .gl-price span { font-size: 13px; }
  .gl-plan-desc { display: block; grid-column: 1 / -1; font-size: 14px; line-height: 1.4; }
  .gl-plan-points { display: none; }
  .gl-plan-trial .gl-link, .gl-plan-multi .gl-link { grid-column: 1 / -1; justify-self: start; margin: 0 -8px; font-size: 16px; }

  .gl-plan-trial h3 { font-size: 16px; }
  .gl-plan-trial .gl-price strong { font-size: 30px; }
  .gl-plan-trial .gl-plan-desc { margin-top: 2px; color: var(--gl-grey); }

  .gl-plan-multi h3 { font-size: 19px; }
  .gl-plan-multi .gl-price strong { font-size: 30px; }
  .gl-plan-multi .gl-plan-desc { margin-top: 2px; color: var(--gl-mint); }
}
/* Tablette : toute la largeur du contenu. Standard en tête, ses sept lignes sur deux colonnes ;
   l'essai et les multisites côte à côte dessous, sur la même ligne de pied. */
@media (min-width: 600px) and (max-width: 1023px) {
  .gl-affiche {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 20px; row-gap: 16px; max-width: none;
  }
  .gl-affiche > .gl-plan-featured { grid-column: 1 / -1; grid-row: 1; }
  .gl-affiche > .gl-plan-trial { grid-column: 1; grid-row: 2; }
  .gl-affiche > .gl-plan-multi { grid-column: 2; grid-row: 2; }
  /* Les sept lignes reprennent leurs deux colonnes (4 puis 3). */
  .gl-plan-rows { display: grid; column-gap: 24px; }
  .gl-plan-featured > .gl-btn { margin-top: 12px; }
  .gl-plan-trial, .gl-plan-multi { padding: 16px 20px 6px; }
  .gl-plan-trial .gl-link, .gl-plan-multi .gl-link { align-self: end; }
  .gl-plan-multi { grid-template-columns: auto; }
  .gl-plan-multi .gl-price { grid-column: 1; }
}
@media (max-width: 599px) {
  .gl-tarifs .gl-head-split .gl-intro { display: none; }
  .gl-affiche { gap: 8px; }
  .gl-plan-trial, .gl-plan-multi { padding-top: 10px; }
  /* « Sur devis » à l'échelle des autres prix : sa précision passerait à la ligne et redit la phrase dessous
     (« un parcours par point de vente ») ; elle reste pour le lecteur d'écran. */
  .gl-plan-multi .gl-price span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .gl-plan-rows li { min-height: 31px; }
}

/* ---------- 13 · Questions (#faq) ---------- */
.gl-faq-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
.gl-faq-head { grid-column: 1 / 5; position: sticky; top: 96px; }
.gl-faq-head > p:not(.gl-folio) { margin-top: 16px; font-size: 15px; line-height: 1.45; color: var(--gl-grey); }
.gl-faq-head .gl-link { margin-top: 8px; }
.gl-faq-list { grid-column: 6 / 13; margin-top: -12px; }
.gl-faq-list summary {
  list-style: none; display: flex; align-items: center; position: relative; min-height: 56px;
  margin: 4px 0; padding: 12px 44px 12px 0; cursor: pointer;
  font: 800 var(--fs-faq-q)/1.3 var(--gl-font);
  text-wrap: balance;
}
.gl-faq-list summary::-webkit-details-marker { display: none; }
.gl-faq-list summary::before, .gl-faq-list summary::after {
  content: ""; position: absolute; right: 0; top: 50%; width: 24px; height: 24px; margin-top: -12px;
  background: var(--gl-green-ink);
  -webkit-mask: url("../images/brand/icones/css/trait-h.svg") center / contain no-repeat;
  mask: url("../images/brand/icones/css/trait-h.svg") center / contain no-repeat;
}
.gl-faq-list summary::after {
  -webkit-mask-image: url("../images/brand/icones/css/trait-v.svg");
  mask-image: url("../images/brand/icones/css/trait-v.svg");
  transition: transform var(--t-fast) var(--ease-pose);
}
.gl-faq-list [open] summary::after { transform: scaleY(0); }
.gl-faq-list details p { max-width: 62ch; padding: 0 40px 20px 0; font-size: var(--fs-faq-a); line-height: 1.55; }
@supports (interpolate-size: allow-keywords) {
  .gl-faq-list details { interpolate-size: allow-keywords; }
  .gl-faq-list details::details-content { height: 0; overflow: clip; transition: height 200ms var(--ease-pose), content-visibility 200ms allow-discrete; }
  .gl-faq-list details[open]::details-content { height: auto; }
}

@media (max-width: 1023px) {
  .gl-faq-grid { display: block; }
  .gl-faq-head { position: static; }
  .gl-faq-list { margin-top: var(--head-gap); }
}
@media (max-width: 599px) {
  /* Même jour de texte à texte entre une question d'une ligne et une de deux : le texte part du haut,
     le signe +/− se cale sur la première ligne. */
  .gl-faq-list summary { min-height: 44px; margin: 0; padding: 12px 40px 12px 0; align-items: flex-start; line-height: 1.25; }
  .gl-faq-list summary::before, .gl-faq-list summary::after { top: calc(12px + .625em); }
  .gl-faq-list details p { padding: 0 32px 16px 0; line-height: 1.5; hyphens: auto; }
  .gl-faq-head > p:not(.gl-folio) { margin-top: 8px; }
  .gl-faq-list { margin-top: 20px; }
  .gl-faq-head .gl-link { margin-top: 2px; }
}

/* ---------- 14 · Le soir · rendez-vous (#contact, champ noir) ---------- */
.gl-contact { background: var(--gl-black); color: var(--gl-paper); }
/* Le rail du rideau prolonge le champ noir : le bas de section peut être plus court que le haut. */
@media (min-width: 1024px) { .gl-contact { padding-bottom: 56px; } }
.gl-contact .gl-folio { color: var(--gl-paper); }
.gl-contact .gl-folio span + span { color: var(--gl-chalk); }
.gl-contact-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: var(--col-gap); }
.gl-contact-copy { grid-column: 1 / 7; grid-row: 1; }
.gl-contact-copy h2 { font-size: var(--fs-h2-soir); line-height: var(--lh-h2-soir); font-weight: 900; letter-spacing: -.035em; color: var(--gl-white); max-width: 12em; }
.gl-contact-copy > p:not(.gl-folio) { margin-top: var(--intro-gap); max-width: 28em; font-size: var(--fs-lead); line-height: 1.5; color: var(--gl-chalk); }
.gl-contact-actions { grid-column: 1 / 7; grid-row: 2; align-self: start; }
.gl-contact .gl-link { color: var(--gl-paper); }
.gl-contact .gl-link:hover { text-decoration-color: var(--gl-paper); }

.gl-rdv-pile {
  --rdv-w: 376px; --rdv-h: 280px;
  --rdv-dx: calc(var(--rdv-w) * var(--pile-dx));
  --rdv-dy: calc(var(--rdv-h) * var(--pile-dy));
  --rdv-gap: calc(var(--rdv-h) * var(--pile-gap));
  grid-column: 7 / 13; grid-row: 1 / 3; justify-self: end; align-self: start;
  position: relative; padding: calc(2 * var(--rdv-dy)) calc(2 * var(--rdv-dx)) 0 0;
}
.gl-rdv-back, .gl-rdv-mid { position: absolute; width: var(--rdv-w); height: var(--rdv-h); border-radius: var(--r-sheet); }
.gl-rdv-back { top: 0; right: 0; background: var(--gl-green) url("../images/brand/textures/vides-encre.svg") 0 0 / 160px 160px; }
.gl-rdv-mid {
  top: var(--rdv-dy); right: var(--rdv-dx); background: var(--gl-paper);
  box-shadow: 0 0 0 16px var(--gl-black);
  padding: 14px 20px; color: var(--gl-black);
}
.gl-rdv-mid > span { display: block; font: 700 15px/1 var(--gl-font); }
/* Carte de rendez-vous vierge, comme chez le coiffeur : des lignes à remplir au stylo. */
.gl-rdv-ligne { display: flex; align-items: baseline; gap: 8px; margin-top: 26px; font: 600 15px/1 var(--gl-font); color: var(--gl-grey); }
.gl-rdv-ligne + .gl-rdv-ligne { margin-top: 22px; }
.gl-rdv-ligne i { flex: 1; border-bottom: 2px dotted var(--gl-chalk); }
.gl-rdv-ligne i.gl-rdv-court { flex: 0 0 64px; }
.gl-contact-demo {
  --tooth-pos: 71px 143px;
  width: var(--rdv-w); min-height: var(--rdv-h);
  background: var(--gl-white); color: var(--gl-black); border-radius: var(--r-sheet);
  box-shadow: 0 0 0 16px var(--gl-black);
}
.gl-contact-demo-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 22px 16px; }
.gl-contact-demo-head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 20px; pointer-events: none;
  background:
    radial-gradient(circle at 0 50%, var(--gl-black) 0 9.5px, transparent 10px) no-repeat,
    radial-gradient(circle at 100% 50%, var(--gl-black) 0 9.5px, transparent 10px) no-repeat,
    radial-gradient(circle, var(--gl-black) 0 2.4px, transparent 2.8px) 0 50% / 12px 10px space no-repeat content-box;
  padding-inline: 18px;
}
.gl-contact-demo-head span { font: 800 15px/1.2 var(--gl-font); color: var(--gl-green-ink); }
.gl-contact-demo-head strong { font: 900 28px/1 var(--gl-font); font-variant-numeric: tabular-nums; letter-spacing: -.02em; white-space: nowrap; }
.gl-contact-demo ol { display: grid; gap: 10px; padding: 14px 22px 12px; counter-reset: rdv; }
.gl-contact-demo li { display: grid; grid-template-columns: 32px minmax(0, 1fr); counter-increment: rdv; }
.gl-contact-demo li::before { content: counter(rdv); grid-row: 1 / 3; font: 900 22px/1 var(--gl-font); color: var(--gl-green-ink); font-variant-numeric: tabular-nums; }
.gl-contact-demo li strong { font: 800 17px/1.25 var(--gl-font); }
.gl-contact-demo li small { grid-column: 2; margin-top: 2px; font-size: 14px; line-height: 1.4; color: var(--gl-grey); }
.gl-contact-foot { display: block; padding: 10px 22px 12px; font-size: 13px; line-height: 1.4; color: var(--gl-grey); }

/* Trame de l'ombre (desktop) : points papier à 30 % sur le champ noir, seulement hors de la carte. */
@media (min-width: 1024px) {
  .gl-contact-demo::before {
    content: ""; position: absolute; z-index: -1; inset: 8px 8px -8px -8px; border-radius: inherit; pointer-events: none;
    background: radial-gradient(circle, var(--gl-paper-30) 0 .9px, transparent 1.2px) 0 0 / 4px 4px,
                radial-gradient(circle, var(--gl-paper-30) 0 .9px, transparent 1.2px) 2px 2px / 4px 4px;
    clip-path: polygon(0 0, 8px 0, 8px calc(100% - 8px), 100% calc(100% - 8px), 100% 100%, 0 100%);
  }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .gl-contact-copy, .gl-contact-actions { grid-column: 1 / 6; }
  .gl-rdv-pile { grid-column: 6 / 13; --rdv-w: 340px; --rdv-h: 254px; }
  .gl-contact-demo-head { padding: 14px 20px 16px; }
  .gl-contact-demo-head strong { font-size: 24px; }
  .gl-contact-demo ol { padding: 16px 20px; gap: 12px; }
  .gl-contact-demo li strong { font-size: 16px; }
  .gl-contact-demo li small { font-size: 14px; }
  .gl-contact-foot { padding: 10px 20px 14px; }
}
@media (max-width: 1023px) {
  .gl-contact-grid { display: flex; flex-direction: column; }
  .gl-contact-copy h2 { font-weight: 800; letter-spacing: var(--tr-h2); max-width: none; }
  .gl-contact-copy > p:not(.gl-folio) { margin-top: var(--intro-gap); font-size: var(--fs-body); }
  .gl-rdv-pile { order: 2; padding: 0; margin-top: var(--head-gap); width: 100%; max-width: 560px; }
  .gl-rdv-back, .gl-rdv-mid { display: none; }
  .gl-contact-demo { width: 100%; min-height: 0; box-shadow: none; border-radius: var(--r-surface); }
  .gl-contact-actions { order: 3; margin-top: 24px; flex-direction: column; align-items: flex-start; gap: 8px; max-width: 560px; width: 100%; }
  .gl-contact-actions .gl-btn-l { align-self: stretch; }
}
@media (max-width: 599px) {
  /* Le rail du rideau prolonge le champ noir : le bas de section peut être plus court. */
  .gl-contact { padding-bottom: 32px; }
  .gl-contact-copy > p:not(.gl-folio) { margin-top: 10px; }
  .gl-rdv-pile { margin-top: 18px; }
  .gl-contact-demo-head { padding: 12px 18px 14px; }
  .gl-contact-demo-head strong { font-size: 22px; }
  .gl-contact-demo ol { padding: 14px 18px; gap: 10px; }
  .gl-contact-demo li::before { font-size: 20px; }
  .gl-contact-demo li strong { font-size: 16px; }
  .gl-contact-demo li small { font-size: 14px; line-height: 1.4; }
  .gl-contact-foot { padding: 10px 18px 12px; }
  .gl-contact-actions { margin-top: 14px; }
}

/* ---------- 15 · Le rideau (pied de page) ---------- */
.gl-footer { position: relative; isolation: isolate; background: var(--gl-paper); }
.gl-rideau { display: block; width: 100%; height: auto; }
.gl-rideau-s { display: none; }
.gl-footer-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 0; padding: 40px 0 26px; }
.gl-footer-brand { grid-column: 1 / 5; grid-row: 1; position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; align-content: start; padding-bottom: 32px; }
.gl-footer-brand .gl-brand { grid-column: 1; grid-row: 1; align-self: end; padding-bottom: 6px; }
.gl-footer-brand > p { grid-column: 1 / -1; margin-top: 16px; font-size: 16px; line-height: 1.5; color: var(--gl-grey); max-width: 22em; }
.gl-footer-brand > .gl-link { grid-column: 1 / -1; justify-self: start; margin-top: 4px; }
.gl-footer-nav { grid-column: 5 / 11; grid-row: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--col-gap); padding-bottom: 32px; }
.gl-footer-nav div { display: flex; flex-direction: column; align-items: flex-start; }
.gl-footer-nav strong { margin-bottom: 2px; font: 700 15px/1.3 var(--gl-font); color: var(--gl-grey); }
.gl-footer-nav a { display: inline-flex; align-items: center; min-height: 44px; font: 600 16px/1.2 var(--gl-font); text-decoration: none; }
.gl-footer-nav a:hover { text-decoration: underline 2px var(--gl-green); text-underline-offset: 5px; }
.gl-footer-bottom {
  grid-column: 1 / -1; grid-row: 2; position: relative; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding-top: 24px; font-size: 13px; line-height: 1.4; color: var(--gl-grey);
}
/* Bord de comptoir pleine largeur : il ferme la page. */
.gl-footer-bottom::before { content: ""; position: absolute; top: 0; left: -100vw; right: -100vw; height: 10px; border-top: 2px solid var(--gl-black); background: var(--gl-black-06); }

@media (max-width: 1023px) {
  .gl-footer-grid { display: block; padding: 40px 0 32px; }
  .gl-footer-brand { display: block; padding-top: 22px; padding-bottom: 0; background: var(--gl-paper); margin-top: 24px; }
  /* Le bord de comptoir du pied de page : le même objet que celui du héros (trait et bande), pleine largeur. */
  .gl-footer-brand::before { content: ""; position: absolute; top: 0; left: -100vw; right: -100vw; height: 10px; border-top: 2px solid var(--gl-black); background: var(--gl-black-06); }
  .gl-footer-brand .gl-brand { padding: 0; }
  .gl-footer-brand .gl-lockup { height: 24px; }
  .gl-footer-brand > p { margin-top: 10px; }
  .gl-footer-nav { margin-top: 24px; padding-bottom: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gl-footer-bottom { margin-top: 24px; padding-top: 0; flex-direction: column; align-items: flex-start; gap: 8px; }
  .gl-footer-bottom::before { display: none; }
}
@media (max-width: 599px) {
  .gl-rideau-l { display: none; }
  .gl-rideau-s { display: block; }
  .gl-footer-grid { padding: 24px 0 12px; }
  .gl-footer-brand { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 12px; margin-top: 16px; padding-top: 6px; }
  .gl-footer-brand::before { height: 7.5px; border-top-width: 1.5px; }
  .gl-footer-brand .gl-brand { grid-column: 1; grid-row: 1; }
  .gl-footer-brand > .gl-link { grid-column: 2; grid-row: 1; justify-self: end; margin-top: 0; }
  .gl-footer-brand > p { grid-column: 1 / -1; grid-row: 2; margin-top: 2px; font-size: 15px; line-height: 1.45; }
  .gl-footer-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; margin-top: 10px; }
  .gl-footer-nav div { display: contents; }
  /* « Nous contacter » est déjà sur la ligne du logo : le lien « Contact » ferait doublon. */
  .gl-footer-nav a[href="/contact/"] { display: none; }
  .gl-footer-nav strong { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .gl-footer-nav a { min-height: 44px; }
  .gl-footer-bottom { margin-top: 8px; padding-top: 12px; gap: 4px; }
}

/* ---------- 16 · Barre du pouce (≤ 1023, JS) ---------- */
.gl-thumbbar { display: none; }
@media (max-width: 1023px) {
  html.gl-js:has(body.landing-commerce) { scroll-padding-bottom: calc(var(--bar-h) + 16px); }
  .gl-js .gl-thumbbar {
    display: flex; gap: 8px;
    position: fixed; inset: auto 0 0 0; z-index: var(--z-bar);
    padding: 10px max(16px, (100% - 560px) / 2) calc(8px + env(safe-area-inset-bottom));
    background: var(--gl-paper);
    transform: translateY(110%); visibility: hidden;
    transition: transform var(--t-ui) var(--ease-pose), visibility 0s linear var(--t-ui);
  }
  .gl-js .gl-thumbbar.is-visible { transform: none; visibility: visible; transition: transform var(--t-ui) var(--ease-pose); }
  .gl-thumbbar::before {
    content: ""; position: absolute; top: -2px; left: 0; right: 0; height: 4px; pointer-events: none;
    background: radial-gradient(circle, var(--gl-black-35) 0 1.2px, transparent 1.6px) 0 50% / 8px 4px repeat-x;
  }
  .gl-thumbbar .gl-btn-secondary { flex: none; width: 92px; padding: 0; --b-fill: var(--gl-paper); }
  .gl-thumbbar .gl-btn-secondary:hover { --b-fill: var(--gl-black); }
  .gl-thumbbar .gl-btn-primary { flex: 1; }
}

/* ---------- 17 · Feuille « Sommaire » ---------- */
.gl-sheet-scrim {
  position: fixed; inset: 0; z-index: var(--z-scrim);
  background: var(--gl-scrim); opacity: 0; transition: opacity var(--t-ui) linear;
}
.gl-sheet-scrim.is-open { opacity: 1; }
.gl-sheet-scrim[hidden], .gl-sheet[hidden] { display: none; }
.gl-sheet {
  position: fixed; inset: auto 0 0 0; z-index: var(--z-sheet);
  max-height: 86dvh; overflow: auto; overscroll-behavior: contain;
  background: var(--gl-paper); border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  padding: 8px max(var(--gutter), (100% - 560px) / 2) calc(20px + env(safe-area-inset-bottom));
  transform: translateY(100%); transition: transform 260ms var(--ease-pose);
}
.gl-sheet.is-open { transform: none; }
.gl-sheet-handle { display: flex; align-items: center; justify-content: center; height: 44px; margin-top: -8px; touch-action: none; cursor: grab; }
/* Poignée : une ligne de perforation (comme le talon d'un carnet), pas une pilule. */
.gl-sheet-handle span { width: 36px; height: 0; border-top: 3px dotted var(--gl-chalk); }
.gl-sheet-top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 4px; margin-bottom: 8px; }
.gl-sheet-top p { font: 700 15px/1 var(--gl-font); color: var(--gl-grey); }
.gl-sheet-nav a {
  display: flex; align-items: center; min-height: 52px;
  font: 700 18px/1.2 var(--gl-font); text-decoration: none; color: var(--gl-black);
}
.gl-sheet-nav i { flex: 1; margin: 0 10px; border-bottom: 2px dotted var(--gl-chalk); translate: 0 5px; }
.gl-sheet-nav small { font: 600 13px/1 var(--gl-font); color: var(--gl-grey); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gl-sheet-foot { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin-top: 12px; }
.gl-sheet-foot .gl-link { align-self: flex-start; }
.gl-sheet-foot .gl-btn-l { height: 54px; padding: 0 20px; }
body.landing-commerce.is-locked { position: fixed; width: 100%; overflow: hidden; }

/* ---------- 19 · Mouvement réduit : états finaux immédiats ---------- */
@media (prefers-reduced-motion: reduce) {
  .landing-commerce *, .landing-commerce *::before, .landing-commerce *::after {
    animation: none !important;
    transition: none !important;
  }
  .gl-js .gl-hero-visual:not(.is-set) .gl-pile-b,
  .gl-js .gl-hero-visual:not(.is-set) .gl-pile-c { transform: none; }
  .gl-js .gl-presentoir:not(.is-placed) .gl-obj { transform: none; opacity: 1; }
  .gl-js .gl-tampon { opacity: 1; }
  .gl-btn:hover .gl-ico, .gl-btn:active, .gl-icon-btn:active:not(:disabled), .gl-menu-toggle:active,
  .gl-link-fleche:hover::after { transform: none; }
}

/* ---------- 16 · Listes de liens sans case (décision client v3.6) ----------
   Titre en gras, phrase d'appui en gris dessous, rien d'autre : ni case, ni puce, ni flèche.
   Sans phrase d'appui (.gl-menu-liens), le titre porte le soulignement vert des liens de la page. */
.gl-menu { display: grid; gap: 28px var(--col-gap); }
.gl-menu-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; }
.gl-menu-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gl-menu a { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 44px; color: var(--gl-black); text-decoration: none; }
.gl-menu-kicker { font: 600 14px/1.35 var(--gl-font); color: var(--gl-grey); }
.gl-menu-ligne strong { font: 800 18px/1.3 var(--gl-font); text-wrap: pretty; text-decoration: underline 2px transparent; text-underline-offset: 5px; transition: text-decoration-color 120ms linear; }
.gl-menu-texte { max-width: 36em; font-size: 15px; line-height: 1.5; color: var(--gl-grey); }
.gl-menu-liens .gl-menu-ligne strong { text-decoration-color: var(--gl-green); }
.gl-menu a:hover strong { text-decoration-color: var(--gl-green); }
.gl-menu-liens a:hover strong { text-decoration-color: var(--gl-black); }
@media (max-width: 1023px) {
  .gl-menu-2, .gl-menu-3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599px) {
  .gl-menu { gap: 22px; }
  .gl-menu-ligne strong { font-size: 17px; }
}

/* ---------- 17 · Bandeau cookies ----------
   Barre pleine largeur en bas de l'écran, comme Apple ou Stripe : papier translucide et flou (verre dépoli),
   posée sur le bord de comptoir pleine largeur, le seul filet que la charte autorise. Pastille menthe et
   cookie croqué au trait de la marque, texte à gauche, actions à droite ; empilé sur mobile. En mode
   consentement, les trois choix ont le même poids visuel. Entrée : 240 ms, glissé depuis le bas + fondu. */
.gl-consent-banner {
  position: fixed; z-index: 90; left: 0; right: 0; bottom: 0;
  padding: var(--s-5) 0 calc(var(--s-5) + env(safe-area-inset-bottom));
  background: var(--gl-white); color: var(--gl-black);
  border-top: 1.5px solid var(--gl-black);
  opacity: 0; transform: translateY(100%);
  transition: opacity 240ms var(--ease-pose), transform 240ms var(--ease-pose);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .gl-consent-banner {
    background: var(--gl-paper-72);
    -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  }
}
.gl-consent-banner.is-open { opacity: 1; transform: none; }
.gl-consent-inner { display: flex; align-items: center; gap: var(--s-5); }
.gl-consent-icon {
  display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%;
  background: var(--gl-mint); color: var(--gl-green-ink);
}
.gl-consent-icon svg { width: 26px; height: 26px; }
.gl-consent-body { flex: 1 1 auto; min-width: 0; }
.gl-consent-title { margin: 0 0 2px; font: 800 var(--fs-body)/1.3 var(--gl-font); letter-spacing: -.01em; }
.gl-consent-text { margin: 0; color: var(--gl-grey); font: 500 var(--fs-small)/var(--lh-small) var(--gl-font); }
.gl-consent-text .gl-link { display: inline; min-height: 0; color: var(--gl-green-ink); font: inherit; font-weight: 700; white-space: nowrap; }
.gl-consent-actions { display: flex; flex: none; flex-wrap: wrap; gap: var(--s-3); }
.gl-consent-actions .gl-consent-btn { font: 700 var(--fs-btn-s)/1 var(--gl-font); }
.gl-consent-actions .gl-consent-btn { height: 44px; padding: 0 var(--s-5); }
.gl-consent-actions .gl-consent-custom { color: var(--gl-black); }
.gl-consent-dialog .gl-consent-actions { margin-top: var(--s-5); }
.gl-consent-dialog .gl-consent-actions .gl-consent-btn { flex: 1 1 0; padding: 0 var(--s-3); }
.gl-consent-none p { margin: 0; color: var(--gl-grey); font: 500 var(--fs-small)/var(--lh-small) var(--gl-font); }
.gl-consent-dialog .gl-consent-title { margin-bottom: var(--s-2); font-size: var(--fs-h3); }
.gl-footer-linkbtn {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none;
  color: inherit; font: 600 16px/1.2 var(--gl-font); cursor: pointer; text-align: left;
}
.gl-footer-linkbtn:hover { text-decoration: underline 2px var(--gl-green); text-underline-offset: 5px; }

.gl-consent-panel {
  position: fixed; z-index: 95; inset: 0; display: grid; place-items: center; padding: var(--s-5);
  background: var(--gl-scrim); opacity: 0; transition: opacity 200ms var(--ease-pose);
}
.gl-consent-panel.is-open { opacity: 1; }
/* Fermés, le bandeau et le panneau sortent du rendu : invisibles, ils ne doivent jamais capter un clic. */
.gl-consent-banner[hidden], .gl-consent-panel[hidden] { display: none; }
.gl-consent-dialog {
  position: relative; width: min(560px, 100%); max-height: calc(100vh - 2 * var(--s-5)); overflow: auto;
  padding: var(--s-7); border-radius: 12px; background: var(--gl-white);
  box-shadow: 0 0 0 1.5px var(--gl-black);
}
.gl-consent-dialog .gl-consent-title:focus { outline: none; }
.gl-consent-list { margin: var(--s-4) 0 0; padding: 0; list-style: none; }
.gl-consent-list li {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
  padding: var(--s-4) 0; border-top: 1px solid var(--gl-rule);
}
.gl-consent-list strong { font: 700 var(--fs-body)/1.3 var(--gl-font); }
.gl-consent-list p { margin: var(--s-1) 0 0; color: var(--gl-grey); font: 500 var(--fs-small)/var(--lh-small) var(--gl-font); }
.gl-consent-always { flex: none; color: var(--gl-green-ink); font: 700 var(--fs-meta)/1 var(--gl-font); }
.gl-consent-switch {
  flex: none; appearance: none; width: 44px; height: 26px; margin: 0; border-radius: 13px; cursor: pointer;
  background: var(--gl-chalk); position: relative; transition: background-color 150ms linear;
}
.gl-consent-switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--gl-white); transition: transform 150ms var(--ease-pose);
}
.gl-consent-switch:checked { background: var(--gl-green); }
.gl-consent-switch:checked::after { transform: translateX(18px); }
.gl-consent-switch:focus-visible { outline: 2px solid var(--gl-black); outline-offset: 2px; }
.gl-consent-close {
  position: absolute; top: var(--s-3); right: var(--s-3); width: 44px; height: 44px; border: 0;
  background: none; color: var(--gl-black); font: 400 28px/1 var(--gl-font); cursor: pointer;
}

@media (max-width: 599px) {
  .gl-consent-banner { padding: var(--s-4) 0 calc(var(--s-4) + env(safe-area-inset-bottom)); }
  .gl-consent-inner { flex-wrap: wrap; align-items: flex-start; gap: var(--s-3) var(--s-4); }
  .gl-consent-icon { width: 40px; height: 40px; }
  .gl-consent-icon svg { width: 22px; height: 22px; }
  .gl-consent-body { flex: 1 1 0; }
  .gl-consent-text { font-size: 14px; }
  /* Refuser et accepter côte à côte, au même niveau ; personnaliser dessous. */
  .gl-consent-actions.is-choice { flex: 1 1 100%; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
  .gl-consent-actions .gl-consent-btn { width: 100%; padding: 0 var(--s-3); }
  .gl-consent-actions .gl-consent-custom { grid-column: 1 / -1; order: 3; }
  .gl-consent-dialog { padding: var(--s-6) var(--s-5); }
}
@media (prefers-reduced-motion: reduce) {
  .gl-consent-banner, .gl-consent-panel, .gl-consent-switch, .gl-consent-switch::after { transition: none; }
  .gl-consent-banner { transform: none; }
}

/* ---------- 18 · Chargement (connexion, inscription) ----------
   Même comportement que l'espace connecté (growlee-app-loading.js) : barre verte en haut après 150 ms,
   bouton d'envoi remplacé par un spinner, double envoi ignoré. */
.app-progress {
  position: fixed; z-index: 200; top: 0; left: 0; right: 0; height: 3px; pointer-events: none;
  background: var(--gl-green); transform: scaleX(0); transform-origin: 0 50%; opacity: 0;
  transition: transform 220ms var(--ease-pose), opacity 160ms linear;
}
.app-progress.is-active { opacity: 1; }
.app-progress.is-done { opacity: 0; transition: transform 160ms var(--ease-pose), opacity 240ms linear 120ms; }
:is(.gl-btn-primary, .gl-btn-s).is-loading { color: transparent; cursor: progress; pointer-events: none; }
:is(.gl-btn-primary, .gl-btn-s).is-loading > * { visibility: hidden; }
:is(.gl-btn-primary, .gl-btn-s).is-loading::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--gl-paper-30); border-top-color: var(--gl-white);
  animation: gl-spin 700ms linear infinite;
}
@keyframes gl-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .app-progress { transition: opacity 160ms linear; }
  :is(.gl-btn-primary, .gl-btn-s).is-loading::after { animation-duration: 1.6s; }
}