/* Glamzn Study — landing /app « cahier de révision vivant » (refonte 2026-10-05)
   Direction : docs/landingpage doc/refonte-study-app/design-direction.md
   Chargée APRÈS app-site.css (gardée pour la nav et le pied de page partagés).
   Tout est scopé sous body.gz-page pour ne rien changer aux autres pages /app/*. */

:root {
  --gz-cream: #FBF6EA;
  --gz-cream-2: #F3EAD3;
  --gz-paper: #FFFDF7;
  --gz-green: #07583F;
  --gz-green-deep: #043B2A;
  --gz-green-mid: #0B7A55;
  --gz-lime: #D8FA79;
  --gz-lime-deep: #B9E84A;
  --gz-sun: #FFC94A;
  --gz-lilac: #CFC2FF;
  --gz-sky: #A8E1FF;
  --gz-mint: #BFF0D4;
  --gz-coral: #FF8A65;
  --gz-ink: #10251C;
  --gz-ink-2: #3F5248;
  --gz-muted: #5E7067;
  --gz-coral-ink: #B23A1C;

  --gz-shadow-sm: 2px 3px 0 var(--gz-ink);
  --gz-shadow: 4px 5px 0 var(--gz-ink);
  --gz-shadow-lg: 6px 8px 0 var(--gz-ink);
  --gz-shadow-soft: 0 18px 40px -18px rgba(16, 37, 28, .35);

  --gz-r-sm: 12px; --gz-r: 20px; --gz-r-lg: 28px; --gz-r-xl: 40px; --gz-r-pill: 999px;
  --gz-border: 2px solid var(--gz-ink);
  --gz-border-thick: 3px solid var(--gz-ink);

  --gz-max: 1200px;
  --gz-gutter: clamp(16px, 4vw, 48px);
  --gz-section-y: clamp(72px, 10vw, 136px);

  --gz-ease-out: cubic-bezier(.22, 1, .36, 1);
  --gz-ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  --gz-font-display: "Fredoka", "Arial Rounded MT Bold", system-ui, sans-serif;
  --gz-font-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gz-font-hand: "Caveat", "Comic Sans MS", cursive;
  --gz-font-mono: "DM Mono", ui-monospace, monospace;

  --gz-fs-hero: clamp(2.75rem, 1.6rem + 5.6vw, 6rem);
  --gz-fs-giant: clamp(5.75rem, 1.5rem + 12vw, 11rem);
  --gz-fs-h2: clamp(2rem, 1.3rem + 3.4vw, 4rem);
  --gz-fs-h3: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem);
  --gz-fs-lead: clamp(1.125rem, 1rem + .5vw, 1.375rem);
  --gz-fs-body: 1.0625rem;
  --gz-fs-small: .9375rem;
  --gz-fs-label: .8125rem;
  --gz-fs-hand: clamp(1.375rem, 1.2rem + .8vw, 1.875rem);
}

/* ── Base ─────────────────────────────────────────────────────────────── */
html:has(body.gz-page) { overflow-x: clip; }
body.glamzn-app-page.gz-page {
  /* Les jetons app-* pilotent la nav et le pied de page partagés : on les
     rebranche sur la palette cahier, sans toucher app-site.css. */
  --app-paper: var(--gz-cream);
  --app-ink: var(--gz-ink);
  --app-muted: var(--gz-muted);
  --app-line: rgba(16, 37, 28, .14);
  --app-display: var(--gz-font-display);
  --app-body: var(--gz-font-body);
  --app-mono: var(--gz-font-mono);
  --app-max: var(--gz-max);
  --app-gutter: var(--gz-gutter);
  overflow-x: clip;
  background: var(--gz-cream);
  color: var(--gz-ink);
  font-family: var(--gz-font-body);
  font-size: var(--gz-fs-body);
  font-weight: 500;
  line-height: 1.6;
}
.gz-page img { max-width: 100%; height: auto; }
.gz-page h1, .gz-page h2, .gz-page h3 { font-family: var(--gz-font-display); font-variation-settings: "wdth" 112; color: inherit; }
.gz-page p { margin: 0; text-wrap: pretty; }
.gz-page :focus-visible { outline: 3px solid var(--gz-green); outline-offset: 4px; border-radius: 6px; }
.gz-page .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.gz-page .skip-link { background: var(--gz-ink); color: var(--gz-lime); font-weight: 800; border: var(--gz-border); }

.gz-wrap { width: min(var(--gz-max), 100%); margin: 0 auto; padding-inline: var(--gz-gutter); }
.gz-section { position: relative; padding-block: var(--gz-section-y); }
.gz-grid-bg {
  background-color: var(--gz-cream);
  background-image: linear-gradient(rgba(16, 37, 28, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(16, 37, 28, .05) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: -1px -1px;
}

/* ── Typo ─────────────────────────────────────────────────────────────── */
.gz-h2 { margin: 0; font-size: var(--gz-fs-h2); font-weight: 700; line-height: 1.02; letter-spacing: -.015em; text-wrap: balance; }
.gz-h3 { margin: 0; font-size: var(--gz-fs-h3); font-weight: 600; line-height: 1.1; letter-spacing: -.005em; }
.gz-lead { font-size: var(--gz-fs-lead); line-height: 1.5; color: var(--gz-ink-2); max-width: 52ch; }
.gz-hand { font-family: var(--gz-font-hand); font-weight: 700; font-size: var(--gz-fs-hand); line-height: 1; color: var(--gz-green); }
.gz-mono { font: 500 var(--gz-fs-label)/1.3 var(--gz-font-mono); letter-spacing: .08em; text-transform: uppercase; }
.gz-head { display: grid; gap: 18px; margin-bottom: clamp(36px, 5vw, 64px); }
.gz-head--center { justify-items: center; text-align: center; }
.gz-head--center .gz-h2 { max-width: 18ch; }
.gz-head--split { grid-template-columns: 1fr; align-items: end; }
@media (min-width: 900px) { .gz-head--split { grid-template-columns: 1.1fr .9fr; gap: 48px; } }

/* ── Étiquettes / tampons ─────────────────────────────────────────────── */
.gz-tag {
  display: inline-flex; align-items: center; gap: 8px; width: fit-content;
  font: 500 var(--gz-fs-label)/1.2 var(--gz-font-mono); letter-spacing: .08em; text-transform: uppercase;
  padding: 7px 11px; border: var(--gz-border); border-radius: 8px;
  background: var(--gz-lime); color: var(--gz-ink); box-shadow: var(--gz-shadow-sm);
}
.gz-tag--sm { padding: 4px 8px; font-size: 12px; }
.gz-tag--paper { background: var(--gz-paper); }
.gz-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gz-green-mid); border: 1.5px solid var(--gz-ink); flex: none; }
.gz-example { font: 500 11px/1 var(--gz-font-mono); letter-spacing: .08em; text-transform: uppercase; font-style: normal; color: var(--gz-muted); padding: 4px 7px; border: 1.5px dashed rgba(16, 37, 28, .35); border-radius: 6px; margin-left: auto; }

/* ── Surligneur, gribouillis, cercle ──────────────────────────────────── */
.gz-hl { position: relative; z-index: 0; white-space: nowrap; }
.gz-hl::before {
  content: ""; position: absolute; z-index: -1; left: -.08em; right: -.08em; bottom: .06em; height: .52em;
  background: var(--gz-lime); border-radius: .2em .5em .3em .45em;
  transform: skewX(-8deg) scaleX(var(--hl, 1)); transform-origin: left center;
  transition: transform 700ms var(--gz-ease-out) 200ms;
}
/* Variante qui peut passer à la ligne (titre long du planning, EN à 390 px) :
   surligneur en dégradé de fond, recopié sur chaque ligne. */
.gz-hl--paper { white-space: normal; background: linear-gradient(transparent 52%, var(--gz-paper) 52%, var(--gz-paper) 92%, transparent 92%); -webkit-box-decoration-break: clone; box-decoration-break: clone; padding-inline: .06em; }
.gz-hl--paper::before { content: none; }
.gz-scribbled, .gz-circled { position: relative; display: inline-block; white-space: nowrap; }
.gz-scribbled .gz-scribble { position: absolute; left: 0; right: 0; bottom: -.18em; width: 100%; height: .3em; color: var(--gz-coral); overflow: visible; }
.gz-scribbled--green .gz-scribble { color: var(--gz-green); }
.gz-circled svg { position: absolute; inset: -.18em -.3em -.12em -.3em; width: calc(100% + .6em); height: calc(100% + .3em); color: var(--gz-coral); overflow: visible; pointer-events: none; }
.gz-deco path[pathLength] { stroke-dasharray: 1; stroke-dashoffset: 0; }
.gz-on-dark-em { font-style: normal; color: var(--gz-lime); }

/* ── Boutons ──────────────────────────────────────────────────────────── */
.gz-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 14px 26px; width: fit-content;
  font: 800 1.0625rem/1 var(--gz-font-body);
  color: var(--gz-ink); background: var(--gz-lime);
  border: var(--gz-border); border-radius: var(--gz-r-pill);
  box-shadow: var(--gz-shadow);
  transition: transform 150ms var(--gz-ease-out), box-shadow 150ms var(--gz-ease-out), background-color 150ms;
  -webkit-tap-highlight-color: transparent;
}
.gz-btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 7px 0 var(--gz-ink); }
.gz-btn:active { transform: translate(4px, 5px); box-shadow: 0 0 0 var(--gz-ink); transition-duration: 60ms; }
body.gz-page a.gz-btn--dark { background: var(--gz-ink); color: var(--gz-lime); box-shadow: 4px 5px 0 var(--gz-paper), 4px 5px 0 2px var(--gz-ink); }
body.gz-page a.gz-btn--dark:hover { box-shadow: 6px 7px 0 var(--gz-paper), 6px 7px 0 2px var(--gz-ink); }
.gz-btn__arrow { transition: transform 150ms var(--gz-ease-out); }
.gz-btn:hover .gz-btn__arrow { transform: translateX(3px); }

.gz-round {
  display: grid; place-items: center; width: 48px; height: 48px; padding: 0;
  font: 800 20px/1 var(--gz-font-body); color: var(--gz-ink); background: var(--gz-lime);
  border: var(--gz-border); border-radius: 50%; box-shadow: 3px 4px 0 var(--gz-ink); cursor: pointer;
  transition: transform 150ms var(--gz-ease-out), box-shadow 150ms var(--gz-ease-out);
}
.gz-round:hover { transform: translate(-2px, -2px); box-shadow: 5px 6px 0 var(--gz-ink); }
.gz-round:active { transform: translate(3px, 4px); box-shadow: none; }
.gz-round[disabled] { opacity: .45; cursor: default; transform: none; }

/* Badges stores */
.gz-stores { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 12px; }
body.gz-page a.gz-store {
  display: inline-flex; align-items: center; gap: 10px; min-width: 0; min-height: 58px;
  padding: 9px 18px 9px 14px; border: var(--gz-border); border-radius: 16px;
  background: var(--gz-ink); color: var(--gz-cream);
  box-shadow: 4px 5px 0 var(--gz-green);
  transition: transform 150ms var(--gz-ease-out), box-shadow 150ms var(--gz-ease-out), opacity 150ms;
}
.gz-store svg { flex: none; width: 24px; height: 24px; }
.gz-store span { display: grid; min-width: 0; line-height: 1.1; }
.gz-store small { font-size: 11px; font-weight: 700; opacity: .85; white-space: nowrap; }
.gz-store small:empty, .gz-sticky__store small:empty { display: none; }
.gz-store b { font-size: clamp(15px, 4vw, 18px); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.gz-page a.gz-store:hover { transform: translate(-2px, -2px); box-shadow: 6px 7px 0 var(--gz-green); }
body.gz-page a.gz-store:active { transform: translate(4px, 5px); box-shadow: none; }
body.gz-page a.gz-store.is-alt { opacity: .7; box-shadow: 2px 3px 0 var(--gz-green); }
body.gz-page a.gz-store:focus-visible { outline: 3px solid var(--gz-green); outline-offset: 4px; }

/* ── Cartes ───────────────────────────────────────────────────────────── */
.gz-card {
  position: relative; display: block; min-width: 0;
  background: var(--gz-paper); color: var(--gz-ink);
  border: var(--gz-border); border-radius: var(--gz-r-lg);
  box-shadow: var(--gz-shadow);
  padding: clamp(20px, 2.4vw, 32px);
  transition: transform 250ms var(--gz-ease-out), box-shadow 250ms var(--gz-ease-out);
}
@media (hover: hover) {
  .gz-card--lift:hover { transform: translate(-3px, -3px); box-shadow: 7px 8px 0 var(--gz-ink); }
}
.gz-card--lift:active { transform: translate(2px, 3px); box-shadow: 1px 1px 0 var(--gz-ink); }
.gz-card--sun { background: var(--gz-sun); }
.gz-card--lilac { background: var(--gz-lilac); }
.gz-card--sky { background: var(--gz-sky); }
.gz-card--mint { background: var(--gz-mint); }
.gz-card--coral { background: var(--gz-coral); }
.gz-card--paper { background: var(--gz-paper); }
.gz-card--green, body.gz-page a.gz-card--green { background: var(--gz-green); color: var(--gz-cream); }
.gz-card p { color: var(--gz-ink-2); font-size: 1rem; line-height: 1.55; margin-top: 10px; }
.gz-card--coral p { color: var(--gz-ink); }
.gz-card--green p { color: rgba(251, 246, 234, .9); }
.gz-ico { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 16px; border: var(--gz-border); border-radius: 14px; background: var(--gz-paper); color: var(--gz-green); }
.gz-ico svg { width: 24px; height: 24px; }
.gz-card__go {
  position: absolute; right: 18px; bottom: 18px; display: grid; place-items: center; width: 40px; height: 40px;
  border: var(--gz-border); border-radius: 50%; background: var(--gz-lime); color: var(--gz-ink); font-weight: 800;
  transition: transform 150ms var(--gz-ease-out);
}
.gz-card--lift:hover .gz-card__go { transform: translateX(3px); }

/* ══ EN-TÊTE PARTAGÉ (refonte 2026-10-06) ══════════════════════════════
   Portée : body.gz-page .gz-nav. La classe gz-nav est posée par
   resources/views/landing/app/partials/nav.blade.php, partagé par l'accueil
   et toutes les pages /app/* : toute page qui charge cette feuille ET porte
   body.gz-page reçoit l'en-tête « cahier » complet. Les jetons --gz-* sont
   sur :root, donc rien d'autre à brancher.
   Comportements (un seul menu ouvert, clic dehors, Échap + retour du focus,
   flèches, hauteur du tiroir) : script inline en bas de nav.blade.php.
   Desktop : <details> + panneau carte crème (bordure encre 2 px, ombre
   décalée). ≤ 900 px : tiroir plein écran sous l'en-tête, qui reste visible
   et dont le bouton burger devient la croix de fermeture. */
body.gz-page .gz-nav {
  --gz-nav-bar: 72px;
  background: rgba(251, 246, 234, .9); border-bottom: 2px solid var(--gz-ink);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  z-index: 200;
}
body.gz-page .gz-nav.is-scrolled { background: rgba(251, 246, 234, .97); box-shadow: 0 6px 0 rgba(16, 37, 28, .06); border-bottom-color: var(--gz-ink); }
body.gz-page .gz-nav .app-nav-inner { min-height: var(--gz-nav-bar); width: min(var(--gz-max), 100%); padding-inline: var(--gz-gutter); gap: 16px; }
body.gz-page .gz-nav .brand-lockup { flex: none; display: inline-flex; flex-direction: row; align-items: center; min-height: 44px; font-family: var(--gz-font-display); font-weight: 700; font-size: 26px; letter-spacing: -.01em; font-variation-settings: "wdth" 112; color: var(--gz-ink); }
body.gz-page .gz-nav .brand-wordmark { font: 700 26px/1 var(--gz-font-display); font-variation-settings: "wdth" 112; letter-spacing: -.01em; }
@media (max-width: 380px) { body.gz-page .gz-nav .brand-wordmark { font-size: 23px; } }
body.gz-page .gz-nav :focus-visible { outline: 3px solid var(--gz-green); outline-offset: 2px; }

/* Liens et résumés de premier niveau */
body.gz-page .gz-nav .app-nav-links { gap: 4px; }
body.gz-page .gz-nav .app-nav-links > a,
body.gz-page .gz-nav .nav-menu > summary {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 14px;
  border: 2px solid transparent; border-radius: var(--gz-r-pill);
  font: 700 15px/1 var(--gz-font-body); letter-spacing: 0; color: var(--gz-ink-2); background: transparent;
  transition: background-color 150ms, color 150ms, border-color 150ms, box-shadow 150ms, transform 150ms var(--gz-ease-out);
}
body.gz-page .gz-nav .app-nav-links > a:hover,
body.gz-page .gz-nav .nav-menu > summary:hover { color: var(--gz-ink); background: var(--gz-cream-2); }
body.gz-page .gz-nav .nav-menu[open] > summary {
  color: var(--gz-ink); background: var(--gz-lime); border-color: var(--gz-ink); box-shadow: var(--gz-shadow-sm);
}
body.gz-page .gz-nav .nav-menu > summary span { display: inline-flex; margin: 0; color: var(--gz-ink); transition: rotate 220ms var(--gz-ease-out); }
body.gz-page .gz-nav .nav-menu > summary span svg { width: 14px; height: 14px; }
body.gz-page .gz-nav .nav-menu[open] > summary span { rotate: 180deg; }
body.gz-page .gz-nav .nav-menu > summary:focus-visible { outline-offset: 3px; border-radius: var(--gz-r-pill); }

/* Panneaux desktop */
body.gz-page .gz-nav .nav-menu .nav-panel {
  top: calc(100% + 14px); left: 0; z-index: 210;
  width: min(380px, calc(100vw - 32px)); padding: 12px;
  background: var(--gz-paper); color: var(--gz-ink);
  border: var(--gz-border); border-radius: 24px; box-shadow: var(--gz-shadow-lg);
  transform-origin: 24px top;
}
/* Petite languette qui relie le panneau à son bouton */
body.gz-page .gz-nav .nav-menu .nav-panel::before {
  content: ""; position: absolute; top: -9px; left: 34px; width: 14px; height: 14px;
  background: var(--gz-paper); border-left: var(--gz-border); border-top: var(--gz-border);
  border-radius: 4px 0 0 0; transform: rotate(45deg);
}
/* « Pour vous » : une colonne (app-site.css la passait en deux colonnes de 160 px, sous-titres tronqués). */
body.gz-page .gz-nav .nav-menu .nav-panel-personas { width: min(400px, calc(100vw - 32px)); display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
body.gz-page .gz-nav .nav-menu .nav-panel-product {
  width: min(700px, calc(100vw - 48px)); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 8px;
}
body.gz-page .gz-nav .nav-panel-label {
  grid-column: 1 / -1; margin: 4px 10px 8px; padding-bottom: 10px; border-bottom: 2px dashed rgba(16, 37, 28, .2);
  font: 500 11px/1.3 var(--gz-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gz-muted);
}
body.gz-page .gz-nav .app-nav-links .nav-panel a {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center;
  min-height: 56px; padding: 8px 10px; border-radius: 14px; color: var(--gz-ink);
  font: inherit; transition: background-color 150ms;
}
body.gz-page .gz-nav .app-nav-links .nav-panel a:hover { background: var(--gz-cream); }
body.gz-page .gz-nav .app-nav-links .nav-panel a:hover .gz-nav-ico { transform: rotate(-6deg) scale(1.06); }
body.gz-page .gz-nav .app-nav-links .nav-panel a:focus-visible { outline-offset: -2px; background: var(--gz-cream); }
body.gz-page .gz-nav .nav-panel a > span { display: grid; gap: 2px; min-width: 0; }
body.gz-page .gz-nav .nav-panel a b { font: 600 16px/1.15 var(--gz-font-display); font-variation-settings: "wdth" 108; letter-spacing: 0; color: var(--gz-ink); }
body.gz-page .gz-nav .nav-panel a small {
  margin: 0; font: 600 13px/1.35 var(--gz-font-body); color: var(--gz-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Tuiles d'icône (desktop et tiroir) */
body.gz-page .gz-nav .gz-nav-ico {
  display: grid; place-items: center; width: 40px; height: 40px; flex: none;
  border: var(--gz-border); border-radius: 12px; background: var(--gz-lime); color: var(--gz-ink);
  font-style: normal; transition: transform 200ms var(--gz-ease-spring);
}
body.gz-page .gz-nav .gz-nav-ico svg { width: 20px; height: 20px; }
body.gz-page .gz-nav .gz-nav-ico[data-tone="sun"] { background: var(--gz-sun); }
body.gz-page .gz-nav .gz-nav-ico[data-tone="lilac"] { background: var(--gz-lilac); }
body.gz-page .gz-nav .gz-nav-ico[data-tone="sky"] { background: var(--gz-sky); }
body.gz-page .gz-nav .gz-nav-ico[data-tone="mint"] { background: var(--gz-mint); }
body.gz-page .gz-nav .gz-nav-ico[data-tone="coral"] { background: var(--gz-coral); }

/* Bouton Télécharger + sélecteur de langue */
body.gz-page .gz-nav .nav-actions { gap: 10px; }
body.gz-page .gz-nav .button-primary {
  min-height: 44px; padding: 10px 18px; color: var(--gz-ink); background: var(--gz-lime);
  border: var(--gz-border); border-radius: var(--gz-r-pill); box-shadow: 3px 4px 0 var(--gz-ink);
  font: 800 15px/1 var(--gz-font-body);
}
body.gz-page .gz-nav .button-primary:hover { color: var(--gz-ink); background: var(--gz-lime); transform: translate(-2px, -2px); box-shadow: 5px 6px 0 var(--gz-ink); }
body.gz-page .gz-nav .button-primary:active { transform: translate(3px, 4px); box-shadow: none; scale: 1; }
body.gz-page .gz-nav .button-primary span { display: inline; color: var(--gz-ink); }
body.gz-page .gz-nav .lang-pill { border: var(--gz-border); background: var(--gz-paper); padding: 0; gap: 0; }
body.gz-page .gz-nav .lang-pill a { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 8px; border-radius: var(--gz-r-pill); color: var(--gz-ink-2); font: 500 12px/1 var(--gz-font-mono); }
body.gz-page .gz-nav .lang-pill a[aria-current="true"] { background: var(--gz-lime); color: var(--gz-ink); box-shadow: inset 0 0 0 2px var(--gz-ink); }

/* Bouton menu (≤ 900 px) : carré encré, burger dessiné qui devient une croix.
   Le texte « Menu » et le glyphe ☰ restent dans le DOM pour les pages sans
   cette feuille ; ici ils sont masqués (font-size 0 / display none). */
body.gz-page .gz-nav .app-mobile-menu > summary {
  position: relative; display: grid; place-items: center; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0;
  font-size: 0; color: var(--gz-ink); background: var(--gz-paper);
  border: var(--gz-border); border-radius: 14px; box-shadow: var(--gz-shadow-sm);
  transition: background-color 150ms, transform 150ms var(--gz-ease-out), box-shadow 150ms var(--gz-ease-out);
}
body.gz-page .gz-nav .app-mobile-menu > summary:hover { background: var(--gz-cream-2); }
body.gz-page .gz-nav .app-mobile-menu > summary:active { transform: translate(2px, 3px); box-shadow: none; }
body.gz-page .gz-nav .app-mobile-menu[open] > summary { background: var(--gz-lime); }
body.gz-page .gz-nav .app-mobile-menu > summary .gz-mm-glyph { display: none; }
body.gz-page .gz-nav .gz-burger,
body.gz-page .gz-nav .gz-burger::before,
body.gz-page .gz-nav .gz-burger::after {
  display: block; width: 20px; height: 2.5px; border-radius: 2px; background: var(--gz-ink);
  transition: transform 220ms var(--gz-ease-out), background-color 120ms;
}
/* Centré en absolu : le texte masqué du résumé crée des lignes de grille vides. */
body.gz-page .gz-nav .gz-burger { position: absolute; left: 50%; top: 50%; margin: -1.25px 0 0 -10px; }
body.gz-page .gz-nav .gz-burger::before,
body.gz-page .gz-nav .gz-burger::after { content: ""; position: absolute; left: 0; }
body.gz-page .gz-nav .gz-burger::before { top: -7px; }
body.gz-page .gz-nav .gz-burger::after { top: 7px; }
body.gz-page .gz-nav .app-mobile-menu[open] .gz-burger { background: transparent; }
body.gz-page .gz-nav .app-mobile-menu[open] .gz-burger::before { transform: translateY(7px) rotate(45deg); }
body.gz-page .gz-nav .app-mobile-menu[open] .gz-burger::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  body.gz-page .gz-nav { --gz-nav-bar: 66px; }
  /* Le tiroir se positionne sur l'en-tête entier (sticky = positionné), pas
     sur le bouton : les ancêtres intermédiaires redeviennent statiques. */
  body.gz-page .gz-nav .app-nav-inner,
  body.gz-page .gz-nav .nav-actions,
  body.gz-page .gz-nav .app-mobile-menu { position: static; }
  body.gz-page .gz-nav .app-mobile-menu-panel {
    position: absolute; top: 100%; left: 0; right: 0; width: auto; z-index: 210;
    height: calc(100vh - var(--gz-nav-h, 68px)); height: calc(100dvh - var(--gz-nav-h, 68px)); max-height: none;
    margin-top: 2px; padding: 20px max(16px, var(--gz-gutter)) calc(40px + env(safe-area-inset-bottom));
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    border: 0; border-radius: 0; box-shadow: none;
    background-color: var(--gz-cream);
    background-image: linear-gradient(rgba(16, 37, 28, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(16, 37, 28, .05) 1px, transparent 1px);
    background-size: 24px 24px;
    display: flex; flex-direction: column; gap: 10px;
  }
  /* Les groupes gardent leur hauteur : c'est le tiroir qui défile, pas eux. */
  body.gz-page .gz-nav .app-mobile-menu-panel > * { flex-shrink: 0; }
  /* Page figée pendant l'ouverture : seul le tiroir défile. */
  /* html seulement : figer aussi body en ferait le conteneur de défilement
     de l'en-tête sticky, qui remonterait hors écran sur une page défilée. */
  html:has(body.gz-page .gz-nav .app-mobile-menu[open]) { overflow: hidden; }
  body.gz-page .gz-nav .app-mobile-menu-panel > p {
    margin: 10px 4px 0; font: 500 12px/1.2 var(--gz-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gz-muted);
  }
  body.gz-page .gz-nav .app-mobile-menu-panel > p:first-child { margin-top: 0; }
  body.gz-page .gz-nav .gz-mm-group {
    display: grid; background: var(--gz-paper); border: var(--gz-border); border-radius: 20px; box-shadow: var(--gz-shadow); overflow: hidden;
  }
  body.gz-page .gz-nav .gz-mm-group > a,
  body.gz-page .gz-nav .gz-mm-group > details { border-top: 1.5px dashed rgba(16, 37, 28, .22); }
  body.gz-page .gz-nav .gz-mm-group > :first-child { border-top: 0; }
  body.gz-page .gz-nav .app-mobile-menu-panel a,
  body.gz-page .gz-nav .mobile-submenu > summary {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center;
    min-height: 56px; margin: 0; padding: 10px 14px; border-radius: 0;
    color: var(--gz-ink); font: 700 17px/1.2 var(--gz-font-body); background: transparent;
  }
  body.gz-page .gz-nav .gz-mm-group > a:not(:has(.gz-nav-ico)) { grid-template-columns: minmax(0, 1fr) auto; }
  body.gz-page .gz-nav .gz-mm-group > a:not(:has(.gz-nav-ico))::after { content: "→"; font-weight: 800; color: var(--gz-green); }
  body.gz-page .gz-nav .app-mobile-menu-panel a:hover,
  body.gz-page .gz-nav .mobile-submenu > summary:hover { background: var(--gz-cream); }
  body.gz-page .gz-nav .app-mobile-menu-panel a:focus-visible,
  body.gz-page .gz-nav .mobile-submenu > summary:focus-visible { outline-offset: -4px; border-radius: 16px; }
  body.gz-page .gz-nav .app-mobile-menu-panel a > span { display: grid; gap: 2px; min-width: 0; }
  body.gz-page .gz-nav .app-mobile-menu-panel a b { font: 600 17px/1.15 var(--gz-font-display); font-variation-settings: "wdth" 108; letter-spacing: 0; }
  body.gz-page .gz-nav .app-mobile-menu-panel a small { margin: 0; font: 600 14px/1.35 var(--gz-font-body); color: var(--gz-muted); }
  /* Sous-menu « Fonctionnalités » */
  body.gz-page .gz-nav .mobile-submenu > summary { grid-template-columns: minmax(0, 1fr) auto; cursor: pointer; }
  body.gz-page .gz-nav .mobile-submenu > summary span {
    display: grid; place-items: center; width: 32px; height: 32px; border: var(--gz-border); border-radius: 50%;
    background: var(--gz-lime); color: var(--gz-ink); font-size: 16px; line-height: 1; transition: transform 220ms var(--gz-ease-out);
  }
  body.gz-page .gz-nav .mobile-submenu[open] > summary { background: var(--gz-cream); }
  body.gz-page .gz-nav .mobile-submenu[open] > summary span { transform: rotate(180deg); }
  body.gz-page .gz-nav .mobile-submenu-panel { margin: 0; padding: 4px 0 6px; border-left: 0; border-top: 1.5px dashed rgba(16, 37, 28, .22); background: var(--gz-cream); }
  body.gz-page .gz-nav .app-mobile-menu-panel .mobile-submenu-panel a { padding: 8px 14px 8px 18px; min-height: 56px; font-weight: 700; }
  body.gz-page .gz-nav .app-mobile-menu-panel .gz-mm-all { display: flex; justify-content: space-between; color: var(--gz-green); font-weight: 800; font-size: 16px; }
  /* FAQ, détachée des deux groupes */
  body.gz-page .gz-nav .app-mobile-menu-panel .mm-standalone {
    grid-template-columns: minmax(0, 1fr) auto; margin-top: 10px; padding: 12px 18px;
    background: var(--gz-paper); border: var(--gz-border); border-radius: 18px; box-shadow: var(--gz-shadow-sm);
  }
  body.gz-page .gz-nav .app-mobile-menu-panel .mm-standalone::after { content: "→"; font-weight: 800; color: var(--gz-green); }
  body.gz-page .gz-nav .app-mobile-menu-panel .lang-pill { align-self: flex-start; margin-top: 10px; }
  body.gz-page .gz-nav .app-mobile-menu-panel .lang-pill a { display: inline-grid; place-items: center; min-width: 56px; min-height: 44px; padding: 0 12px; border-radius: var(--gz-r-pill); font: 500 14px/1 var(--gz-font-mono); }
}
@media (max-width: 720px) {
  body.gz-page .gz-nav .nav-actions { gap: 8px; }
  body.gz-page .gz-nav .button-primary { min-height: 44px; padding: 10px 16px; font-size: 14px; box-shadow: 3px 4px 0 var(--gz-ink); }
  body.gz-page .gz-nav .button-primary:hover { transform: none; box-shadow: 3px 4px 0 var(--gz-ink); }
  body.gz-page .gz-nav .button-primary span { display: none; }
}
@media (max-width: 380px) {
  body.gz-page .gz-nav .brand-lockup { font-size: 23px; }
  body.gz-page .gz-nav .button-primary { padding: 10px 13px; }
}
/* Entrée des panneaux : app-site.css fait déjà la transition des panneaux
   desktop (opacité + translation, réversible) ; le tiroir mobile glisse. */
@media (prefers-reduced-motion: no-preference) and (max-width: 900px) {
  body.gz-page .gz-nav .app-mobile-menu[open] .app-mobile-menu-panel { animation: gz-drawer-in 260ms var(--gz-ease-out) both; }
  body.gz-page .gz-nav .app-mobile-menu[open] .gz-mm-group,
  body.gz-page .gz-nav .app-mobile-menu[open] .mm-standalone { animation: gz-rise 360ms var(--gz-ease-out) both; }
}
@keyframes gz-drawer-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }

/* ── En-tête allégé de l'accueil (2026-10-06, CRO) ──────────────────────
   Sur /app et /en/app (classe gz-nav--home posée par nav.blade.php) : trois
   ancres + bouton + langue, plus de menus déroulants ; le tiroir mobile ne
   porte plus que ces trois ancres et la langue, il prend donc sa hauteur
   naturelle au lieu du plein écran, avec un voile sur la page dessous.
   Libellé du bouton : long partout, court (nav.download_short) sous 520 px. */
body.gz-page .gz-nav .button-primary { white-space: nowrap; }
body.gz-page .gz-nav .button-primary b { font-weight: inherit; }
@media (max-width: 520px) {
  body.gz-page .gz-nav .gz-dl-long { display: none; }
  body.gz-page .gz-nav .gz-dl-short { display: inline; }
}
@media (max-width: 900px) {
  body.gz-page .gz-nav--home .app-mobile-menu-panel {
    height: auto; overflow: visible; padding-bottom: 22px;
    border-bottom: 2px solid var(--gz-ink);
  }
  /* Voile sous le tiroir : un toucher dessus ferme le menu (clic dehors,
     géré par le script de nav.blade.php). */
  body.gz-page .gz-nav--home .app-mobile-menu-panel::after {
    content: ""; position: absolute; top: calc(100% + 2px); left: 0; right: 0; height: 100vh;
    background: rgba(16, 37, 28, .32); pointer-events: none;
  }
  body.gz-page .gz-nav--home .app-mobile-menu-panel .lang-pill { margin-top: 4px; }
}
/* 721–900 px : le sélecteur est déjà dans la barre (app-site.css ne le masque
   que sous 720 px) ; dans le tiroir réduit de l'accueil il faisait doublon. */
@media (min-width: 721px) and (max-width: 900px) {
  body.gz-page .gz-nav--home .app-mobile-menu-panel .lang-pill { display: none; }
}

/* ── Pied de page partagé : vert nuit ─────────────────────────────────── */
body.gz-page .product-footer { background: var(--gz-green-deep); color: var(--gz-cream); }
body.gz-page .product-footer .brand-lockup { color: var(--gz-cream); }
body.gz-page .product-footer-top { border-bottom-color: rgba(251, 246, 234, .16); }
body.gz-page .product-footer-top p { color: rgba(251, 246, 234, .78); font-size: 15px; }
body.gz-page .footer-download { color: var(--gz-lime); font-size: 15px; }
body.gz-page .footer-download:hover { color: var(--gz-lime); text-decoration: underline; }
body.gz-page .footer-directory b { color: var(--gz-sun); font-size: 12px; }
body.gz-page .footer-directory a { color: rgba(251, 246, 234, .78); font-size: 15px; font-weight: 600; }
body.gz-page .footer-directory a:hover { color: var(--gz-lime); text-decoration: underline; }
body.gz-page .footer-directory a:focus-visible, body.gz-page .footer-download:focus-visible { outline-color: var(--gz-lime); }
body.gz-page .footer-bottom { border-top-color: rgba(251, 246, 234, .16); color: rgba(251, 246, 234, .7); font-size: 13px; }

/* ══ 1. HERO ═══════════════════════════════════════════════════════════ */
.gz-hero { position: relative; overflow-x: clip; padding-block: clamp(40px, 6vw, 72px) clamp(64px, 8vw, 104px); }
.gz-hero__grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1024px) {
  .gz-hero__grid { grid-template-columns: 1.1fr .9fr; min-height: min(86vh, 800px); }
  .gz-hero .gz-wrap { position: relative; }
  .gz-hero .gz-wrap::before { content: ""; position: absolute; top: -80px; bottom: -120px; left: calc(var(--gz-gutter) - 28px); border-left: 2px solid rgba(255, 138, 101, .45); pointer-events: none; }
}
.gz-hero__copy { display: grid; gap: 22px; justify-items: start; min-width: 0; }
.gz-hero__title { margin: 0; font-size: var(--gz-fs-hero); font-weight: 700; line-height: .98; letter-spacing: -.02em; text-wrap: balance; max-width: 13ch; }
.gz-hero__em { position: relative; display: block; width: fit-content; }
.gz-hero__hand { position: absolute; left: calc(100% + 18px); top: -.2em; display: flex; align-items: flex-end; gap: 4px; white-space: nowrap; transform: rotate(-4deg); }
.gz-hero__hand .gz-arrow { width: 54px; height: 38px; color: var(--gz-green); order: -1; }
.gz-hero .gz-lead { max-width: 40ch; }
.gz-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gz-points li { display: flex; gap: 10px; align-items: flex-start; font-size: 1.0625rem; color: var(--gz-ink-2); }
.gz-points b { color: var(--gz-ink); font-weight: 800; }
.gz-check { flex: none; color: var(--gz-green-mid); margin-top: 2px; }
.gz-note { font-size: var(--gz-fs-small); font-weight: 700; color: var(--gz-ink-2); }

.gz-hero__scene { position: relative; min-height: 600px; display: grid; place-items: center; isolation: isolate; }
.gz-blob { position: absolute; width: min(520px, 100%); height: auto; color: var(--gz-lilac); z-index: -1; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.gz-phone {
  position: relative; width: clamp(240px, 26vw, 320px); aspect-ratio: 9 / 19.5;
  border: var(--gz-border-thick); border-radius: 44px; background: var(--gz-ink); padding: 10px;
  box-shadow: 8px 10px 0 var(--gz-green), var(--gz-shadow-soft);
}
.gz-phone--hero { --rot: 4deg; transform: rotate(4deg); }
.gz-phone__screen { height: 100%; border-radius: 34px; background: var(--gz-cream); overflow: hidden; padding: 34px 16px 16px; display: flex; flex-direction: column; gap: 10px; position: relative; }
.gz-phone__screen::before { content: ""; position: absolute; top: 10px; left: 50%; width: 76px; height: 20px; border-radius: 20px; background: var(--gz-ink); transform: translateX(-50%); }
.gz-ps-label { font: 500 11px/1.2 var(--gz-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gz-muted); }
.gz-ps-card { position: relative; display: grid; gap: 4px; padding: 16px 14px 14px; border: var(--gz-border); border-radius: 20px; background: var(--gz-paper); box-shadow: var(--gz-shadow-sm); }
.gz-ps-card b { font-family: var(--gz-font-display); font-size: 26px; font-weight: 700; line-height: 1; font-variation-settings: "wdth" 112; }
.gz-ps-meta { font-weight: 800; font-size: 14px; color: var(--gz-green); }
.gz-ps-card small { font-size: 12px; color: var(--gz-muted); font-weight: 700; }
.gz-ps-jx { position: absolute; top: -10px; right: 12px; font: 500 12px/1 var(--gz-font-mono); padding: 5px 7px; border: 2px solid var(--gz-ink); border-radius: 7px; background: var(--gz-lime); }
.gz-ps-btn { margin-top: 8px; display: grid; place-items: center; min-height: 38px; border: var(--gz-border); border-radius: 999px; background: var(--gz-lime); font-weight: 800; font-size: 13px; box-shadow: 2px 3px 0 var(--gz-ink); }
.gz-ps-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gz-ps-list li { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1.5px solid rgba(16, 37, 28, .2); border-radius: 14px; background: var(--gz-paper); }
.gz-ps-list i { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--gz-ink); }
.gz-ps-list span { display: grid; font-size: 12px; color: var(--gz-muted); font-weight: 700; line-height: 1.25; }
.gz-ps-list b { color: var(--gz-ink); font-size: 14px; }

.gz-postit { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border: var(--gz-border); font-weight: 800; box-shadow: var(--gz-shadow-sm); border-radius: 6px 6px 18px 6px; transform: rotate(var(--rot, 0deg)); }
.gz-postit--stamp { --rot: -8deg; top: 9%; left: 4%; font: 500 30px/1 var(--gz-font-mono); color: var(--gz-coral-ink); background: var(--gz-paper); border: 3px solid currentColor; border-radius: 10px; box-shadow: none; padding: 8px 12px; }
.gz-postit--ready { --rot: -3deg; bottom: 16%; left: 0; background: var(--gz-mint); font-size: 15px; }
.gz-postit--ready .gz-check { margin: 0; color: var(--gz-green); }
.gz-postit--time { --rot: 5deg; top: 7%; right: 6%; background: var(--gz-sun); font: 500 20px/1 var(--gz-font-mono); }
.gz-spark-a, .gz-spark-b { position: absolute; z-index: 1; line-height: 0; }
.gz-spark-a { top: 30%; right: 3%; color: var(--gz-lime); }
.gz-spark-a svg { width: 34px; height: 34px; }
.gz-spark-b { top: 46%; left: 10%; color: var(--gz-sun); }
.gz-spark-b svg { width: 22px; height: 22px; }
.gz-hero__glamzy { position: absolute; z-index: 3; right: -2%; bottom: -4%; width: 200px; transform-origin: 50% 90%; filter: drop-shadow(0 14px 18px rgba(16, 37, 28, .2)); }

@media (max-width: 1023px) {
  .gz-hero__title { max-width: 16ch; }
  .gz-hero__scene { min-height: 520px; max-width: 520px; width: 100%; margin-inline: auto; }
}
@media (max-width: 640px) {
  .gz-hero__scene { min-height: 470px; }
  .gz-blob { width: 340px; }
  .gz-phone { width: 230px; }
  .gz-phone--hero { --rot: 2deg; transform: rotate(2deg); }
  .gz-postit--time, .gz-spark-b { display: none; }
  .gz-postit--stamp { font-size: 24px; top: 4%; left: 2%; }
  .gz-postit--ready { bottom: 10%; left: 2%; font-size: 14px; }
  .gz-hero__glamzy { width: 104px; right: 0; bottom: 0; }
  .gz-stores { grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
  body.gz-page a.gz-store { padding: 8px 10px; gap: 8px; box-shadow: 3px 4px 0 var(--gz-green); }
  .gz-store small { font-size: 10px; }
}
@media (max-width: 480px) { .gz-hero__hand { display: none; } }
@media (max-width: 1180px) and (min-width: 1024px) { .gz-hero__hand { display: none; } }

/* ══ 2. PARCOURS ═══════════════════════════════════════════════════════ */
.gz-steps { background: var(--gz-green); color: var(--gz-cream); }
.gz-steps .gz-tag { box-shadow: 2px 3px 0 var(--gz-green-deep); }
.gz-steps__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; position: relative; }
/* 3 colonnes dès 1100 px seulement (à 1024 les étiquettes passaient sur 3 lignes) ;
   760-1099 : 2 colonnes + étape 3 pleine largeur (voir passe responsive en fin de fichier). */
@media (min-width: 1100px) {
  .gz-steps__list { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
  .gz-steps__list::before { content: ""; position: absolute; left: 8%; right: 8%; top: 64px; border-top: 3px dotted rgba(251, 246, 234, .6); z-index: 0; }
}
.gz-step {
  position: relative; z-index: 1; display: grid; gap: 12px; align-content: start; min-width: 0;
  padding: 28px 26px 30px; border: var(--gz-border-thick); border-radius: 6px 6px 28px 6px;
  color: var(--gz-ink); box-shadow: 6px 8px 0 var(--gz-green-deep);
  transform: rotate(var(--tilt, 0deg));
}
.gz-step:nth-child(1) { --tilt: -2deg; }
.gz-step:nth-child(2) { --tilt: 1.5deg; margin-top: 24px; }
.gz-step:nth-child(3) { --tilt: -1deg; }
.gz-step--cream { background: var(--gz-cream); }
.gz-step--lime { background: var(--gz-lime); }
.gz-step--lilac { background: var(--gz-lilac); }
.gz-step p { color: var(--gz-ink-2); }
.gz-step--lime p { color: var(--gz-ink); }
.gz-step__num {
  font-family: var(--gz-font-display); font-weight: 700; font-size: clamp(88px, 9vw, 120px); line-height: .8;
  color: var(--gz-green); -webkit-text-stroke: 3px var(--gz-ink); paint-order: stroke fill;
}
.gz-step--lime .gz-step__num { color: var(--gz-paper); }
.gz-step__glamzy { position: absolute; top: -34px; right: 10px; width: 96px; height: auto; transform: rotate(6deg); filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .2)); }
.gz-step__chips { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.gz-step__chips li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: var(--gz-border); border-radius: 999px; background: var(--gz-lime); font-weight: 800; font-size: 14px; }
.gz-step__chips svg { width: 18px; height: 18px; }
.gz-mini-quiz { display: grid; gap: 8px; margin-top: 6px; padding: 14px; border: var(--gz-border); border-radius: 16px; background: var(--gz-paper); }
.gz-mini-quiz small { font: 500 11px/1 var(--gz-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gz-green); }
.gz-mini-quiz b { font-family: var(--gz-font-display); font-weight: 600; font-size: 18px; line-height: 1.15; }
.gz-mini-quiz__opts { display: flex; gap: 8px; }
.gz-mini-quiz__opts i { font-style: normal; font-weight: 800; padding: 6px 14px; border: var(--gz-border); border-radius: 999px; background: var(--gz-cream); }
.gz-mini-quiz__opts i.is-ok { background: var(--gz-green); color: var(--gz-cream); }
.gz-ladder { display: grid; gap: 10px; margin-top: 6px; }
.gz-ladder__track { position: relative; display: flex; justify-content: space-between; gap: 6px; }
.gz-ladder__track::before { content: ""; position: absolute; left: 12px; right: 12px; top: 50%; border-top: 3px dashed var(--gz-ink); opacity: .45; }
.gz-ladder__node { position: relative; display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 6px; border: var(--gz-border); border-radius: 12px; background: var(--gz-paper); font: 500 15px/1 var(--gz-font-mono); }
.gz-ladder small { font-size: 14px; font-weight: 700; color: var(--gz-ink-2); }
@media (max-width: 1099px) {
  .gz-steps__list { padding-left: 0; }
  .gz-step:nth-child(n) { --tilt: 0deg; margin-top: 0; }
  .gz-step:nth-child(odd) { --tilt: -1deg; }
  .gz-step:nth-child(even) { --tilt: 1deg; }
  .gz-step { box-shadow: 4px 5px 0 var(--gz-green-deep); padding-top: 22px; }
  .gz-step__glamzy { width: 80px; top: -26px; }
}

/* Bord déchiré */
.gz-edge-wrap { position: absolute; left: 0; right: 0; top: 0; transform: translateY(-99%); line-height: 0; pointer-events: none; }
.gz-edge { display: block; width: 100%; height: clamp(18px, 2.8vw, 40px); }
.gz-edge-wrap--cream2 { color: var(--gz-cream-2); }
.gz-edge-wrap--deep { color: var(--gz-green-deep); }

/* ══ 3. FONCTIONS ══════════════════════════════════════════════════════ */
.gz-features { background: var(--gz-cream-2); }
.gz-bento { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.gz-bento .gz-card { padding-bottom: 72px; }
@media (min-width: 640px) {
  .gz-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .gz-b-a, .gz-b-w { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .gz-bento { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(200px, auto); }
  .gz-b-a { grid-column: span 3; grid-row: span 2; }
  .gz-b-b, .gz-b-c { grid-column: span 3; }
  .gz-b-s { grid-column: span 2; }
  .gz-b-w { grid-column: 1 / -1; }
}
.gz-b-a { overflow: hidden; display: flex; flex-direction: column; }
.gz-b-a .gz-ico { background: var(--gz-lime); color: var(--gz-ink); }
.gz-b-a .gz-card__go { z-index: 3; }
.gz-b-a__visual { position: relative; margin-top: auto; padding-top: 26px; display: flex; justify-content: center; min-height: 240px; }
.gz-phone--mini { width: 210px; aspect-ratio: auto; height: 300px; margin-bottom: -110px; border-radius: 34px; box-shadow: 6px 8px 0 var(--gz-green-deep); border-color: var(--gz-ink); transform: rotate(-3deg); }
.gz-phone--mini .gz-phone__screen { border-radius: 26px; padding: 30px 12px 12px; }
.gz-scan { position: relative; background: #ece4cf; }
.gz-scan__photo { position: absolute; inset: 40px 22px 70px; display: grid; align-content: center; gap: 8px; padding: 12px; background: var(--gz-paper); border-radius: 6px; transform: rotate(-2deg); color: var(--gz-ink); font-family: var(--gz-font-hand); font-size: 24px; }
.gz-scan__photo i { color: var(--gz-green); font-style: normal; }
.gz-scan__corner { position: absolute; width: 22px; height: 22px; border: 3px solid var(--gz-lime-deep); }
.gz-scan__corner.tl { top: 30px; left: 12px; border-right: 0; border-bottom: 0; border-radius: 8px 0 0 0; }
.gz-scan__corner.tr { top: 30px; right: 12px; border-left: 0; border-bottom: 0; border-radius: 0 8px 0 0; }
.gz-scan__corner.bl { bottom: 60px; left: 12px; border-right: 0; border-top: 0; border-radius: 0 0 0 8px; }
.gz-scan__corner.br { bottom: 60px; right: 12px; border-left: 0; border-top: 0; border-radius: 0 0 8px 0; }
.gz-b-a__glamzy { position: absolute; right: 0; bottom: -18px; width: 120px; height: auto; z-index: 2; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .25)); }
.gz-fan { position: absolute; right: 70px; bottom: 22px; display: block; width: 90px; height: 54px; }
.gz-fan i { position: absolute; inset: 0; border: var(--gz-border); border-radius: 10px; background: var(--gz-paper); transition: transform 300ms var(--gz-ease-spring); }
.gz-fan i:nth-child(1) { transform: rotate(-6deg); }
.gz-fan i:nth-child(2) { transform: rotate(0deg); background: var(--gz-lime); }
.gz-fan i:nth-child(3) { transform: rotate(6deg); background: var(--gz-mint); }
@media (hover: hover) {
  .gz-b-b:hover .gz-fan i:nth-child(1) { transform: rotate(-12deg) translateX(-8px); }
  .gz-b-b:hover .gz-fan i:nth-child(3) { transform: rotate(12deg) translateX(8px); }
}
.gz-rec { position: absolute; left: clamp(20px, 2.4vw, 32px); bottom: 26px; display: flex; align-items: center; gap: 4px; height: 28px; }
.gz-rec i { width: 14px; height: 14px; border-radius: 50%; background: var(--gz-coral-ink); border: 2px solid var(--gz-ink); margin-right: 6px; }
.gz-rec s { display: block; width: 5px; border-radius: 3px; background: var(--gz-ink); height: 40%; }
.gz-rec s:nth-child(3), .gz-rec s:nth-child(6) { height: 90%; }
.gz-rec s:nth-child(4), .gz-rec s:nth-child(7) { height: 65%; }
.gz-b-w { display: grid; grid-template-columns: auto 1fr; gap: 0 20px; align-items: center; padding-bottom: clamp(20px, 2.4vw, 32px) !important; padding-right: 80px; }
.gz-b-w .gz-ico { margin: 0; }
.gz-b-w .gz-card__go { top: 50%; bottom: auto; transform: translateY(-50%); }
.gz-b-w.gz-card--lift:hover .gz-card__go { transform: translate(3px, -50%); }
@media (max-width: 639px) {
  .gz-b-w { grid-template-columns: 1fr; padding-right: clamp(20px, 2.4vw, 32px); padding-bottom: 72px !important; }
  .gz-b-w .gz-ico { margin-bottom: 16px; }
  .gz-b-w .gz-card__go { top: auto; bottom: 18px; transform: none; }
  .gz-phone--mini { width: 180px; }
  .gz-b-a__glamzy { width: 96px; }
}

/* ══ 4. PLANNING ═══════════════════════════════════════════════════════ */
.gz-plan { background: var(--gz-sun); }
.gz-plan__grid { display: grid; gap: 56px; align-items: center; }
/* 2 colonnes dès 1100 px seulement : à 1024 la carte progression se tassait. */
@media (min-width: 1100px) { .gz-plan__grid { grid-template-columns: .9fr 1.1fr; } }
.gz-plan__copy { display: grid; gap: 22px; justify-items: start; min-width: 0; }
.gz-plan .gz-lead { color: var(--gz-ink-2); }
.gz-giant {
  margin: 0 0 -6px; font-family: var(--gz-font-display); font-variation-settings: "wdth" 112; font-weight: 700;
  font-size: var(--gz-fs-giant); line-height: .85; letter-spacing: -.02em;
  color: var(--gz-paper); -webkit-text-stroke: 3px var(--gz-ink); paint-order: stroke fill;
  text-shadow: 6px 8px 0 var(--gz-ink);
}
.gz-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.gz-checks li { display: flex; gap: 12px; align-items: flex-start; font-weight: 700; font-size: 1.125rem; line-height: 1.4; }
.gz-checks .gz-check { color: var(--gz-green); width: 26px; height: 26px; margin-top: 0; }
.gz-plan__visual { position: relative; display: grid; padding-top: 70px; min-width: 0; }
.gz-plan__glamzy { position: absolute; z-index: 3; bottom: -24px; left: 2%; width: 110px; height: auto; filter: drop-shadow(0 10px 12px rgba(16, 37, 28, .25)); }
.gz-cal { --rot: -2deg; transform: rotate(-2deg); max-width: 560px; }
.gz-cal__bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 2px dashed rgba(16, 37, 28, .25); }
.gz-cal__bar b { font-family: var(--gz-font-display); font-size: 20px; font-weight: 600; }
.gz-cal__week { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.gz-cal__day { display: grid; gap: 6px; justify-items: center; }
.gz-cal__day small { font: 500 12px/1 var(--gz-font-mono); color: var(--gz-muted); }
.gz-cal__day > span { display: grid; place-items: center; width: 100%; max-width: 52px; aspect-ratio: 1; min-height: 36px; border: 2px solid rgba(16, 37, 28, .3); border-radius: 12px; background: var(--gz-cream); }
.gz-cal__day.is-s0 > span { border-color: var(--gz-ink); background: var(--gz-mint); }
.gz-cal__day.is-s0 .gz-check { margin: 0; color: var(--gz-green); width: 20px; height: 20px; }
.gz-cal__day.is-s1 > span { border-color: var(--gz-ink); background: var(--gz-lime); box-shadow: var(--gz-shadow-sm); }
.gz-cal__day.is-s1 i { width: 10px; height: 10px; border-radius: 50%; background: var(--gz-ink); }
.gz-cal__day.is-s3 > span { border-color: var(--gz-ink); background: var(--gz-coral); }
.gz-cal__day.is-s3 b { font: 700 11px/1 var(--gz-font-mono); text-transform: uppercase; }
.gz-progress { --rot: 3deg; transform: rotate(3deg); margin: -14px 0 0 auto; width: min(440px, 76%); display: flex; gap: 22px; align-items: center; z-index: 2; }
.gz-progress__ring { position: relative; flex: none; width: 140px; height: 140px; }
.gz-progress__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.gz-ring-track { fill: none; stroke: rgba(16, 37, 28, .12); stroke-width: 14; }
.gz-ring-fill { fill: none; stroke: var(--gz-green); stroke-width: 14; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--v, 0)); transition: stroke-dashoffset 1200ms var(--gz-ease-out); }
.gz-progress__ring b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; /* flex, pas grid : en grille « 58 » et « % » s'empilaient */ font-family: var(--gz-font-display); font-size: 34px; font-weight: 700; }
@media (max-width: 640px) {
  .gz-giant { -webkit-text-stroke-width: 2px; text-shadow: 4px 5px 0 var(--gz-ink); }
  .gz-cal, .gz-progress { transform: none; }
  .gz-progress { margin: 16px 0 0; width: 100%; flex-direction: column; align-items: stretch; }
  .gz-progress__ring { margin-inline: auto; }
  .gz-plan__glamzy { width: 72px; bottom: -14px; left: auto; right: 2%; }
  .gz-plan__visual { padding-top: 0; padding-bottom: 40px; }
  .gz-cal__week { gap: 5px; }
}

/* ══ 5. VIDÉOS ═════════════════════════════════════════════════════════ */
.gz-videos { background: var(--gz-green-deep); color: var(--gz-cream); }
.gz-videos .gz-lead { color: rgba(251, 246, 234, .85); }
.gz-videos .gz-hand { color: var(--gz-lime); display: inline-block; transform: rotate(-3deg); margin-left: 6px; }
.gz-videos .gz-tag { box-shadow: 2px 3px 0 var(--gz-lime-deep); }
.gz-head--videos { grid-template-columns: 1fr auto; align-items: end; }
.gz-head--videos > div:first-child { display: grid; gap: 18px; }
.gz-videos__nav { display: flex; gap: 12px; }
.gz-videos .gz-round { box-shadow: 3px 4px 0 var(--gz-lime-deep); }
.gz-video-track {
  display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gz-gutter);
  margin-inline: calc(var(--gz-gutter) * -1); padding: 12px var(--gz-gutter) 28px;
  scrollbar-width: none;
}
.gz-video-track::-webkit-scrollbar { display: none; }
.gz-video-track:focus-visible { outline: 3px solid var(--gz-lime); outline-offset: -3px; }
.gz-video {
  position: relative; flex: 0 0 240px; aspect-ratio: 9 / 16; scroll-snap-align: start;
  border: var(--gz-border-thick); border-radius: 24px; overflow: hidden; background: #000;
  box-shadow: 6px 8px 0 var(--gz-lime);
  transform: rotate(var(--tilt, 0deg)); transition: transform 250ms var(--gz-ease-out);
}
.gz-video:nth-child(odd) { --tilt: -1.5deg; }
.gz-video:nth-child(even) { --tilt: 1.5deg; }
@media (hover: hover) { .gz-video:hover { --tilt: 0deg; } }
.gz-video video, .gz-video iframe { display: block; width: 100%; height: 100%; object-fit: cover; border: 0; }
.gz-video__sticker { position: absolute; left: 12px; top: 12px; padding: 6px 9px; border: var(--gz-border); border-radius: 8px; background: var(--gz-paper); color: var(--gz-ink); font-weight: 800; font-size: 13px; pointer-events: none; }
.gz-video-dots { display: none; justify-content: center; gap: 8px; margin-top: 4px; }
.gz-video-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(251, 246, 234, .35); }
.gz-video-dots i.is-on { background: var(--gz-lime); width: 22px; border-radius: 9px; }
@media (max-width: 767px) {
  .gz-head--videos { grid-template-columns: 1fr; }
  .gz-videos__nav { display: none; }
  .gz-video { flex-basis: min(72vw, 280px); }
  .gz-video-dots { display: flex; }
}

/* ══ 6. FAQ ════════════════════════════════════════════════════════════ */
.gz-faq__grid { display: grid; gap: 40px; align-items: start; }
@media (min-width: 1024px) {
  .gz-faq__grid { grid-template-columns: .8fr 1.2fr; gap: 56px; }
  .gz-faq__intro { position: sticky; top: 120px; display: grid; gap: 24px; }
  .gz-faq__glamzy { width: 200px; }
}
.gz-faq__intro > div { display: grid; gap: 18px; }
.gz-faq__glamzy { width: 120px; height: auto; transform-origin: 50% 90%; filter: drop-shadow(0 12px 16px rgba(16, 37, 28, .18)); }
@media (max-width: 1023px) {
  .gz-faq__intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: end; }
  .gz-faq__glamzy { width: 110px; }
}
@media (max-width: 480px) { .gz-faq__glamzy { width: 84px; } }
.gz-faq__list { display: grid; gap: 14px; min-width: 0; }
.gz-faq__item {
  background: var(--gz-paper); border: var(--gz-border); border-radius: var(--gz-r);
  box-shadow: var(--gz-shadow-sm), inset 14px 0 0 var(--c, var(--gz-sun));
  padding-left: 14px; overflow: hidden;
  interpolate-size: allow-keywords;
}
.gz-faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px;
  padding: 16px 18px 16px 20px; cursor: pointer; list-style: none;
  font-family: var(--gz-font-display); font-variation-settings: "wdth" 108; font-weight: 600;
  font-size: clamp(18px, 1.2rem + .3vw, 22px); line-height: 1.2;
}
.gz-faq__item summary::-webkit-details-marker { display: none; }
.gz-faq__item summary:focus-visible { outline: 3px solid var(--gz-green); outline-offset: -3px; border-radius: 16px; }
.gz-faq__plus { position: relative; flex: none; width: 36px; height: 36px; border: var(--gz-border); border-radius: 50%; background: var(--gz-lime); transition: transform 250ms var(--gz-ease-spring); }
.gz-faq__plus::before, .gz-faq__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2.5px; border-radius: 2px; background: var(--gz-ink); transform: translate(-50%, -50%); }
.gz-faq__plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.gz-faq__item[open] .gz-faq__plus { transform: rotate(45deg); }
.gz-faq__item p { padding: 0 22px 22px 20px; color: var(--gz-ink-2); font-size: 1.0625rem; line-height: 1.6; max-width: 62ch; }
.gz-faq__item::details-content { height: 0; overflow: clip; transition: height 300ms var(--gz-ease-out), content-visibility 300ms allow-discrete; }
.gz-faq__item[open]::details-content { height: auto; }
@media (max-width: 640px) { .gz-faq__plus { width: 32px; height: 32px; } }

/* ══ 7. CTA FINAL ══════════════════════════════════════════════════════ */
.gz-final { background: var(--gz-green-deep); padding-top: clamp(96px, 12vw, 160px); padding-bottom: clamp(56px, 6vw, 80px); }
.gz-final__card {
  position: relative; display: grid; gap: 24px; align-items: center;
  padding: clamp(28px, 5vw, 64px); background: var(--gz-lime); color: var(--gz-ink);
  border: var(--gz-border-thick); border-radius: var(--gz-r-xl); box-shadow: 8px 10px 0 var(--gz-ink);
}
@media (min-width: 900px) { .gz-final__card { grid-template-columns: 1.3fr .7fr; } }
.gz-final__copy { display: grid; gap: 20px; justify-items: start; min-width: 0; }
.gz-final .gz-h2 { font-size: clamp(2.125rem, 1.3rem + 3.4vw, 4rem); }
.gz-final .gz-lead { color: var(--gz-ink-2); }
.gz-final .gz-tag { box-shadow: var(--gz-shadow-sm); }
.gz-final .gz-mono { color: var(--gz-green); }
.gz-final__legal { font-size: var(--gz-fs-small); color: var(--gz-ink-2); max-width: 60ch; }
.gz-final__art { position: relative; min-height: 260px; }
.gz-final__glamzy { position: absolute; left: 50%; bottom: -10px; width: 260px; height: auto; transform: translateX(-50%); filter: drop-shadow(0 14px 18px rgba(16, 37, 28, .25)); }
@media (min-width: 900px) { .gz-final__glamzy { bottom: auto; top: -130px; width: 300px; } }
.gz-tw { position: absolute; line-height: 0; }
.gz-tw svg { width: 30px; height: 30px; }
.gz-tw--1 { top: 0; left: 6%; color: var(--gz-paper); }
.gz-tw--2 { top: 20%; right: 2%; color: var(--gz-sun); }
.gz-tw--3 { bottom: 20%; left: 0; color: var(--gz-coral); }
.gz-tw--4 { bottom: 4%; right: 12%; color: var(--gz-sky); }
@media (max-width: 899px) {
  .gz-final__card { text-align: left; }
  .gz-final__art { order: -1; min-height: 120px; }
  .gz-final__glamzy { top: -110px; bottom: auto; width: 170px; }
  .gz-final__card { border-radius: var(--gz-r-lg); box-shadow: 5px 6px 0 var(--gz-ink); }
}

/* ══ ANIMATIONS ════════════════════════════════════════════════════════
   État caché seulement si le JS tourne (classe gz-js posée par le script) :
   sans JS, tout reste visible. */
@keyframes gz-rise { from { opacity: 0; transform: translateY(28px) rotate(var(--tilt, var(--rot, 0deg))); } to { opacity: 1; transform: rotate(var(--tilt, var(--rot, 0deg))); } }
@keyframes gz-pop { 0% { opacity: 0; transform: scale(.92) rotate(0deg); } 100% { opacity: 1; transform: scale(1) rotate(var(--rot, 0deg)); } }
@keyframes gz-peek { 0% { opacity: 0; transform: translateY(40px) rotate(-6deg); } 60% { opacity: 1; transform: translateY(-6px) rotate(2deg); } 100% { transform: none; } }
@keyframes gz-wave { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }
@keyframes gz-float { 0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); } 50% { transform: translateY(-6px) rotate(var(--rot, 0deg)); } }
@keyframes gz-stamp { 0% { opacity: 0; transform: scale(1.4) rotate(-8deg); } 70% { opacity: 1; transform: scale(.97) rotate(1deg); } 100% { transform: none; } }
@keyframes gz-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes gz-twinkle { 0%, 100% { transform: scale(.8); opacity: .6; } 50% { transform: scale(1.1); opacity: 1; } }
@keyframes gz-tilt { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes gz-bounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-10px); } }
@keyframes gz-pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(216, 250, 121, .7), 6px 8px 0 var(--gz-lime); } 100% { box-shadow: 0 0 0 18px rgba(216, 250, 121, 0), 6px 8px 0 var(--gz-lime); } }

@media (prefers-reduced-motion: no-preference) {
  /* Hero : cascade au chargement */
  .gz-js .gz-load { animation: gz-rise 450ms var(--gz-ease-out) both; animation-delay: calc(var(--d, 0) * 80ms); }
  .gz-js .gz-hero .gz-hl::before { animation: gz-hl-in 700ms var(--gz-ease-out) 650ms both; }
  .gz-js .gz-phone--hero { animation: gz-pop 700ms var(--gz-ease-spring) 200ms both; }
  .gz-js .gz-hero__glamzy { animation: gz-peek 800ms var(--gz-ease-spring) 500ms both, gz-wave 900ms ease-in-out 1300ms 2; }
  .gz-js .gz-hero__hand path { animation: gz-draw 700ms var(--gz-ease-out) 1100ms both; }
  .gz-postit { animation: gz-float 6s ease-in-out infinite; }
  .gz-postit--ready { animation-duration: 7s; animation-delay: -2s; }
  .gz-postit--time { animation-duration: 5s; animation-delay: -1s; }

  /* Révélations au défilement */
  .gz-js [data-reveal]:not(.is-in) { opacity: 0; }
  .gz-js [data-reveal].is-in { animation: gz-rise 450ms var(--gz-ease-out) both; animation-delay: calc(var(--d, 0) * 110ms); }
  .gz-js .gz-giant[data-reveal].is-in { animation: gz-stamp 450ms var(--gz-ease-spring) both; }
  .gz-js .gz-final__card[data-reveal].is-in { --rot: 0deg; animation: gz-pop 600ms var(--gz-ease-spring) both; }
  /* 2026-10-09 — désactivé : la mascotte de la carte finale reprend le
     vocabulaire du hero (entrée « peek » puis UN saut, courbe `_hopCurve`
     de l'app), joué une fois par study-playora.js (section 11) en gardant
     son translateX(-50%). Ancienne règle (deux rebonds linéaires) :
  .gz-js .gz-final__card.is-in .gz-final__glamzy { animation: gz-bounce 700ms ease-in-out 600ms 2; } */
  .gz-js .gz-final__card.is-in .gz-tw { animation: gz-twinkle 2.4s ease-in-out infinite; }
  .gz-js .gz-tw--2 { animation-delay: -.6s !important; }
  .gz-js .gz-tw--3 { animation-delay: -1.2s !important; }
  .gz-js .gz-tw--4 { animation-delay: -1.8s !important; }
  /* 2026-10-09 — désactivé : cohérence avec l'app, aucune boucle de repos
     hors du hero. La mascotte de la FAQ entre une fois (« peek ») puis
     incline la tête une fois (study-playora.js, section 11). Ancienne règle
     (balancement infini) :
  .gz-js .gz-faq__glamzy { animation: gz-tilt 4s ease-in-out infinite; } */
  .gz-js .gz-video--demo.is-in { animation: gz-rise 450ms var(--gz-ease-out) both, gz-pulse-ring 1.8s ease-out 600ms 3; }

  /* Tracés qui se dessinent */
  .gz-js [data-reveal]:not(.is-in) .gz-deco path[pathLength] { stroke-dashoffset: 1; }
  .gz-js [data-reveal].is-in .gz-deco path[pathLength] { animation: gz-draw 900ms var(--gz-ease-out) 300ms both; }
  .gz-js .gz-plan [data-reveal]:not(.is-in) .gz-check path,
  .gz-js .gz-cal:not(.is-in) .gz-check path { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .gz-js .gz-plan [data-reveal].is-in .gz-check path { stroke-dasharray: 1; animation: gz-draw 600ms var(--gz-ease-out) 300ms both; }
  .gz-js .gz-cal.is-in .gz-cal__day .gz-check path { animation-delay: calc(var(--d, 0) * 80ms + 300ms); }
  .gz-js .gz-cal.is-in .gz-cal__day.is-s1 > span { animation: gz-stamp 450ms var(--gz-ease-spring) 700ms both; }

  /* Surligneur du planning, anneau et barres */
  .gz-js .gz-plan .gz-hl:not(.is-in)::before,
  .gz-js .gz-h2[data-reveal]:not(.is-in) .gz-hl::before { --hl: 0; }
  .gz-js .gz-progress:not(.is-in) .gz-ring-fill { stroke-dashoffset: 100; }

  /* Étapes : numéraux qui sautent */
  .gz-js .gz-step.is-in .gz-step__num { display: inline-block; animation: gz-pop 600ms var(--gz-ease-spring) 250ms both; }
}
@keyframes gz-hl-in { from { transform: skewX(-8deg) scaleX(0); } to { transform: skewX(-8deg) scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .gz-page *, .gz-page *::before, .gz-page *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .gz-page [data-reveal] { opacity: 1 !important; }
  .gz-page .gz-hl::before { --hl: 1 !important; }
  .gz-page .gz-deco path, .gz-page .gz-check path { stroke-dashoffset: 0 !important; }
  html:has(body.gz-page) { scroll-behavior: auto; }
}

/* ══ Compléments (décisions CTO 2026-10-06) ════════════════════════════ */
/* Film du hero en « photo scotchée » derrière le téléphone */
.gz-film { position: absolute; z-index: 0; left: 0; top: 22%; width: clamp(150px, 15vw, 190px); aspect-ratio: 9 / 14; margin: 0; padding: 8px 8px 26px; background: var(--gz-paper); border: var(--gz-border); border-radius: 6px; box-shadow: var(--gz-shadow); transform: rotate(-7deg); }
.gz-film video, .gz-film img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 3px; background: var(--gz-green-deep); }
.gz-film__tape { position: absolute; top: -12px; left: 50%; width: 70px; height: 22px; background: rgba(216, 250, 121, .85); border: 1.5px solid rgba(16, 37, 28, .25); transform: translateX(-50%) rotate(4deg); }
@media (max-width: 640px) {
  .gz-film { width: 120px; top: 20%; left: 0; padding: 6px 6px 18px; }
}

/* À la une (masquée tant qu'aucune diapo) */
.gz-featured { background: var(--gz-cream); padding-block: 8px 56px; }
.gz-featured .gz-h3 { margin-bottom: 16px; }
.gz-featured__rail { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 2px 18px; scrollbar-width: none; }
.gz-featured__rail::-webkit-scrollbar { display: none; }
body.gz-page a.gz-feat { position: relative; flex: 0 0 auto; width: min(320px, 80vw); height: 200px; scroll-snap-align: start; overflow: hidden; border: var(--gz-border); border-radius: var(--gz-r); box-shadow: var(--gz-shadow); background: var(--gz-green-deep); color: var(--gz-cream); }
.gz-feat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gz-feat__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 59, 42, 0) 30%, rgba(4, 59, 42, .92)); }
.gz-feat__body { position: absolute; left: 16px; right: 16px; bottom: 14px; display: grid; gap: 4px; }
.gz-feat__badge { width: fit-content; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; text-transform: uppercase; color: #fff; }
.gz-feat__title { font-family: var(--gz-font-display); font-weight: 600; font-size: 19px; line-height: 1.15; }
.gz-feat__cta { font-weight: 800; font-size: 13px; color: var(--gz-lime); }

/* Étapes : étiquette du geste + lien */
.gz-step__label { font: 500 var(--gz-fs-label)/1.3 var(--gz-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gz-green); }
/* Plus de place réservée pour Glamzy : il sort par le haut de la carte et ne
   descend jamais jusqu'à l'étiquette (placée sous le grand numéro).
.gz-step--cream .gz-step__label { max-width: calc(100% - 90px); } */
.gz-step--lime .gz-step__label { color: var(--gz-ink); }
body.gz-page a.gz-step__link { justify-self: start; margin-top: 6px; font-weight: 800; color: var(--gz-ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }
body.gz-page a.gz-step__link:hover { text-decoration-color: var(--gz-green-mid); }

/* Badge « Bientôt » */
.gz-soon { position: absolute; top: 18px; right: 18px; padding: 5px 9px; border: var(--gz-border); border-radius: 8px; background: var(--gz-paper); color: var(--gz-coral-ink); font: 500 12px/1 var(--gz-font-mono); letter-spacing: .08em; text-transform: uppercase; transform: rotate(4deg); }
.gz-b-w .gz-soon { position: static; display: inline-block; margin-bottom: 8px; transform: rotate(-2deg); }

/* Planning : titre du plan, séances, progression */
.gz-cal__title { display: grid; gap: 2px; }
.gz-cal__title small { font: 500 11px/1 var(--gz-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gz-muted); }
.gz-cal__sessions { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.gz-cal__sessions li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1.5px solid rgba(16, 37, 28, .2); border-radius: 14px; background: var(--gz-cream); }
.gz-cal__sessions li.is-now { border: var(--gz-border); background: var(--gz-lime); box-shadow: var(--gz-shadow-sm); }
.gz-cal__sessions i { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border: 2px solid var(--gz-ink); border-radius: 50%; background: var(--gz-paper); }
.gz-cal__sessions li.is-done i { background: var(--gz-mint); }
.gz-cal__sessions .gz-check { width: 14px; height: 14px; margin: 0; color: var(--gz-green); }
.gz-cal__sessions span { display: grid; flex: 1; min-width: 0; font-size: 13px; font-weight: 700; color: var(--gz-ink-2); line-height: 1.25; }
.gz-cal__sessions b { color: var(--gz-ink); font-size: 15px; }
.gz-cal__sessions em { font: 500 11px/1 var(--gz-font-mono); font-style: normal; text-transform: uppercase; letter-spacing: .06em; color: var(--gz-muted); white-space: nowrap; }
.gz-cal__sessions li.is-now em { color: var(--gz-ink); }
.gz-progress__copy { flex: 1; display: grid; gap: 8px; min-width: 0; }
.gz-progress__head { display: flex; align-items: center; gap: 8px; }
.gz-progress__head b { font-family: var(--gz-font-display); font-size: 20px; font-weight: 600; }
.gz-progress__sessions { font: 500 15px/1.2 var(--gz-font-mono); color: var(--gz-green); }
.gz-progress__next { display: grid; gap: 2px; font-weight: 700; font-size: 15px; line-height: 1.35; }
.gz-progress__next small { font: 500 11px/1 var(--gz-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gz-muted); }

/* Badges stores dans la carte CTA étroite : empilés sous 440 px (sinon « Google Play » est tronqué). */
@media (max-width: 440px) { .gz-final .gz-stores { grid-template-columns: minmax(0, 1fr); width: 100%; } }
/* Sélecteur de langue du pied de page vert nuit : lien inactif lisible. */
body.gz-page .product-footer .lang-pill a:not([aria-current="true"]) { color: var(--gz-ink); }

/* ══ Passe responsive 2026-10-06 (360 → 1024 px) ═══════════════════════ */
/* Planning en une colonne (< 1100 px) : cartes centrées, Glamzy dans le vide
   à gauche de la carte progression au lieu de couvrir les séances. */
@media (max-width: 1099px) {
  .gz-plan__visual { width: min(100%, 620px); margin-inline: auto; padding-top: 24px; }
  .gz-cal { margin-inline: auto; width: 100%; }
  .gz-progress { margin-top: 24px; }
  .gz-plan__glamzy { width: 92px; bottom: -18px; left: 0; }
}
@media (max-width: 640px) {
  /* Glamzy passe sous les cartes (flux de la grille), plus aucun recouvrement. */
  .gz-plan__glamzy { position: static; order: 3; justify-self: end; width: 78px; margin: -26px 6px 0 0; transform: rotate(6deg); }
  .gz-plan__visual { padding-bottom: 0; }
  /* Tampon J-4 du hero : doublon du badge J-4 de la carte, il couvrait
     l'en-tête « Ce soir » du téléphone à 360-430 px. */
  .gz-postit--stamp { display: none; }
  .gz-ps-btn { white-space: nowrap; font-size: 12px; padding-inline: 6px; }
  .gz-ps-card b { font-size: 23px; }
}
@media (max-width: 480px) {
  /* « EXAMEN » dépassait de sa case de 36 px. */
  .gz-cal__day.is-s3 b { font-size: 8px; letter-spacing: 0; }
  .gz-cal__day small { font-size: 11px; }
}
/* Pied de page : cibles tactiles 44 px (liens, marque, langue). */
@media (max-width: 900px), (pointer: coarse) {
  body.gz-page .product-footer .brand-lockup,
  body.gz-page .footer-download { display: inline-flex; align-items: center; min-height: 44px; }
  body.gz-page .footer-directory a { display: flex; align-items: center; min-height: 44px; min-width: 44px; line-height: 1.25; }
  body.gz-page .footer-directory > div { gap: 0; }
  body.gz-page .footer-directory b { margin-bottom: 6px; }
  body.gz-page .product-footer .lang-pill a { display: inline-grid; place-items: center; min-width: 48px; min-height: 44px; }
}

/* ══ Corrections CTO 2026-10-06 ══════════════════════════════════════ */
/* Sous-titres des menus : jamais d'ellipse, retour à la ligne libre
   (app-site.css les coupait à 2 lignes avec « … »). */
body.gz-page .gz-nav .nav-panel a small,
body.gz-page .gz-nav .app-nav-links .nav-panel-product a small,
body.gz-page .gz-nav .app-nav-links .nav-panel-personas a small {
  display: block; -webkit-line-clamp: unset; line-clamp: none; overflow: visible; text-overflow: clip;
}
body.gz-page .gz-nav .app-nav-links .nav-panel-personas { grid-template-columns: minmax(0, 1fr); }
body.gz-page .gz-nav .app-nav-links .nav-panel-personas > .nav-panel-label { grid-column: auto; }

/* Étapes 760-1099 px : deux cartes côte à côte, la 3e (échelle des jours)
   sur toute la largeur ; étiquettes sur une ligne. */
@media (min-width: 760px) and (max-width: 1099px) {
  .gz-steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 28px 24px; }
  .gz-step:nth-child(3) { grid-column: 1 / -1; }
  .gz-step__label { font-size: 12px; letter-spacing: .04em; }
}

/* Hero tablette 700-1023 px : le titre garde toute la largeur, puis le texte
   à gauche et la scène (téléphone + Glamzy) à droite, au lieu d'une scène
   isolée sous le texte avec du vide de chaque côté. CSS seul : le bloc texte
   passe en display: contents pour que ses enfants entrent dans la grille. */
@media (min-width: 700px) and (max-width: 1023px) {
  .gz-hero { padding-bottom: 56px; }
  .gz-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(290px, 44%); column-gap: 20px; row-gap: 20px; align-items: start; }
  .gz-hero__copy { display: contents; }
  .gz-hero__copy > * { grid-column: 1; justify-self: start; min-width: 0; }
  .gz-hero__copy > .gz-tag, .gz-hero__title { grid-column: 1 / -1; }
  .gz-hero__title { max-width: 18ch; }
  .gz-hero .gz-lead { font-size: 1.125rem; }
  .gz-hero__scene { grid-column: 2; grid-row: 3 / span 4; align-self: center; width: 100%; max-width: none; min-height: 470px; margin: 0; }
  .gz-blob { width: 330px; }
  .gz-phone { width: 220px; }
  .gz-phone--hero { --rot: 3deg; transform: rotate(3deg); }
  .gz-film { width: 112px; top: 26%; left: -6px; padding: 6px 6px 18px; }
  .gz-postit--stamp { font-size: 22px; top: 3%; left: 0; }
  .gz-postit--time { font-size: 16px; top: 4%; right: 0; }
  .gz-postit--ready { bottom: 9%; left: -4px; font-size: 14px; }
  .gz-spark-b { display: none; }
  .gz-hero__glamzy { width: 118px; right: -10px; bottom: -14px; }
  .gz-ps-btn { white-space: nowrap; font-size: 12px; padding-inline: 6px; }
  .gz-ps-card b { font-size: 23px; }
  .gz-stores { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
}

/* ══ Hero v4 (2026-10-06) : le film sort de derrière le téléphone ═══════
   Demande fondateur : le film était presque entièrement caché. Le téléphone
   est poussé vers la droite de la scène et le film, agrandi et incliné,
   occupe la gauche : ~70 % de sa surface reste visible à toutes les tailles.
   Poster préchargé (LCP), src injecté par le JS après load, rien en
   mouvement réduit (règles inchangées dans study-playora.js). */
.gz-hero__scene { justify-items: end; }
.gz-phone--hero { width: clamp(240px, 22vw, 300px); margin-right: 7%; z-index: 1; }
.gz-film { z-index: 0; left: -6%; top: 13%; width: clamp(230px, 19vw, 280px); aspect-ratio: 3 / 4; padding: 10px 10px 34px; transform: rotate(-6deg); }
.gz-film__tape { width: 84px; height: 24px; }
.gz-blob { left: 58%; }
@media (prefers-reduced-motion: no-preference) {
  .gz-js .gz-film { animation: gz-film-in 800ms var(--gz-ease-spring) 350ms both; }
}
@keyframes gz-film-in { 0% { opacity: 0; transform: translateX(70px) rotate(2deg); } 100% { opacity: 1; transform: rotate(-6deg); } }
@media (min-width: 700px) and (max-width: 1023px) {
  .gz-phone--hero { width: 206px; margin-right: 2%; }
  .gz-film { width: 168px; left: -8%; top: 15%; padding: 7px 7px 24px; }
  .gz-film__tape { width: 62px; height: 20px; }
}
@media (max-width: 699px) {
  .gz-hero__scene { max-width: 460px; }
  .gz-phone--hero { width: 218px; margin-right: 6%; }
  .gz-film { width: 172px; left: 0; top: 12%; padding: 7px 7px 24px; }
  .gz-film__tape { width: 62px; height: 20px; }
}
@media (max-width: 380px) {
  .gz-phone--hero { width: 204px; margin-right: 2%; }
  .gz-film { width: 150px; }
}

/* ══ Hero v4 : écran Spaces dans le téléphone (2026-10-06) ═════════════
   Reproduction de l'onglet Fil d'un space de l'app mobile (couleurs, coins,
   ombres relevés dans lib/features/study_space). Unités en em : 1em = 1/30
   de la largeur du téléphone (10 px à 300 px), l'écran garde donc ses
   proportions à toutes les tailles. Balisage par défaut = état final ;
   .is-anim (posé par le JS) masque les entrées puis data-step les révèle. */
.gz-phone--hero { container-type: inline-size; }
.gz-sp {
  --sp-bg: #F0FAF4; --sp-ink: #0F172A; --sp-muted: #6B7280; --sp-faded: #9CA3AF; --sp-gray: #4B5563;
  --sp-green: #10B981; --sp-deep: #047857; --sp-dark: #065F46; --sp-tint: #ECFDF5; --sp-light: #F3F4F6;
  font-size: calc(100cqw / 30); font-family: var(--gz-font-body); color: var(--sp-ink);
  padding: 0; gap: 0; background: var(--sp-bg); line-height: 1.3;
}
.gz-sp * { box-sizing: border-box; }
.gz-sp::before { z-index: 3; }
.gz-sp__head { flex: none; background: #fff; box-shadow: 0 1px 0 rgba(15, 23, 42, .05); padding: 3.6em 1.1em 0; position: relative; z-index: 2; }
.gz-sp__bar { display: flex; align-items: center; gap: .8em; }
.gz-sp__sq { flex: none; display: grid; place-items: center; width: 3.1em; height: 3.1em; border-radius: 1em; background: var(--sp-light); color: var(--sp-ink); }
.gz-sp__sq svg { width: 1.7em; height: 1.7em; }
.gz-sp__pic { flex: none; width: 3.1em; height: 3.1em; border-radius: 1em; background: var(--sp-green); overflow: hidden; display: grid; place-items: end center; }
.gz-sp__pic img { width: 80%; height: auto; margin-bottom: -.9em; }
.gz-sp__title { flex: 1; min-width: 0; display: grid; }
.gz-sp__title b { font-size: 1.4em; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gz-sp__title small { font-size: 1em; font-weight: 800; color: var(--sp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gz-sp__tabs { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: .6em; }
.gz-sp__tab { display: flex; align-items: baseline; justify-content: center; gap: .3em; padding: .9em 0 1.1em; font-size: 1.12em; font-weight: 800; color: var(--sp-muted); white-space: nowrap; transition: color .16s; }
.gz-sp__tab i { font-style: normal; font-size: .8em; color: var(--sp-faded); display: inline-block; }
.gz-sp__tab[data-tab="feed"] { color: var(--sp-ink); }
.gz-sp__ink { position: absolute; bottom: 0; left: 4%; width: 17%; height: 3px; border-radius: 3px 3px 0 0; background: var(--sp-green); transition: transform .2s var(--gz-ease-out); }
.gz-sp__body { flex: 1; min-height: 0; position: relative; overflow: hidden; }
.gz-sp__pane { position: absolute; inset: 0; padding: 1em 1.1em .6em; display: flex; flex-direction: column; transition: opacity .3s ease, transform .3s var(--gz-ease-out); }
.gz-sp__feed { justify-content: flex-end; }
.gz-sp__rank { opacity: 0; transform: translateX(14%); visibility: hidden; justify-content: flex-start; padding-top: 1.6em; }
.gz-sp__day { align-self: center; margin-bottom: 1em; padding: .3em 1em; border-radius: 99px; background: var(--sp-light); color: var(--sp-muted); font-size: 1em; font-weight: 800; }
.gz-sp__event { display: flex; align-items: center; gap: .7em; margin: 0 0 1.1em; padding: 0 .3em; font-size: 1.02em; font-weight: 800; color: var(--sp-gray); }
.gz-sp__event i { flex: none; width: .5em; height: .5em; border-radius: 50%; background: #A7F3D0; }
.gz-sp__event span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gz-sp__event time { font-size: .92em; color: var(--sp-faded); }
.gz-sp__msg { display: flex; align-items: flex-start; gap: .8em; margin-bottom: 1.2em; }
.gz-sp__msg > div { min-width: 0; max-width: 78%; display: grid; gap: .4em; justify-items: start; }
.gz-sp__msg small { font-size: 1em; font-weight: 800; color: var(--sp-gray); }
.gz-sp__msg--cont { margin-top: -.6em; }
.gz-sp__msg--cont .gz-sp__av { visibility: hidden; }
.gz-sp__av { flex: none; display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: 50%; font-size: 1em; font-weight: 800; }
.gz-sp__av--l { background: #DDD6FE; color: #6D28D9; }
.gz-sp__av--k { background: #FEF3C7; color: #92400E; }
.gz-sp__av--me { background: #D1FAE5; color: var(--sp-deep); }
.gz-sp__bub { margin: 0; padding: .9em 1em; background: #fff; border-radius: 1.4em 1.4em 1.4em .5em; box-shadow: 0 1px 0 rgba(15, 23, 42, .02), 0 3px 12px rgba(15, 23, 42, .05); font-size: 1.15em; font-weight: 700; line-height: 1.35; }
.gz-sp__msg--me { flex-direction: row-reverse; }
.gz-sp__msg--me > div { justify-items: end; }
.gz-sp__msg--me .gz-sp__bub { background: var(--sp-deep); color: #fff; box-shadow: none; border-radius: 1.4em 1.4em .5em 1.4em; }
.gz-sp__typing .gz-sp__bub { display: flex; gap: .35em; padding: 1.1em 1.1em; }
.gz-sp__typing .gz-sp__bub i { width: .55em; height: .55em; border-radius: 50%; background: var(--sp-faded); }
.gz-sp__doc { display: flex; align-items: center; gap: .8em; padding: .7em; font-size: 1em; }
.gz-sp__thumb { flex: none; display: grid; align-content: start; gap: .22em; width: 2.9em; height: 3.7em; padding: .45em .35em; border-radius: .45em; background: #fff; box-shadow: 0 2px 6px rgba(15, 23, 42, .12); }
.gz-sp__thumb b { width: 80%; height: 3px; border-radius: 2px; background: #BAE6FD; }
.gz-sp__thumb i { height: 2px; border-radius: 2px; background: #E5E7EB; }
.gz-sp__thumb i:nth-child(3) { width: 70%; } .gz-sp__thumb i:nth-child(5) { width: 60%; }
.gz-sp__doctxt { flex: 1; min-width: 0; display: grid; gap: .15em; }
.gz-sp__doctxt b { font-size: 1.1em; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.gz-sp__doctxt small { font-size: .95em; font-weight: 800; color: var(--sp-muted); }
.gz-sp__open { flex: none; padding: .7em .9em; border-radius: .9em; background: var(--sp-tint); color: var(--sp-deep); font-size: 1em; font-weight: 800; }
.gz-sp__defi { display: flex; align-items: center; gap: .8em; margin-bottom: .4em; padding: .9em .9em .9em 1.1em; border-radius: 1.2em; background: var(--sp-tint); border: 1px solid #A7F3D0; }
.gz-sp__bolt { flex: none; color: var(--sp-deep); line-height: 0; }
.gz-sp__bolt svg, .gz-sp__fab svg { width: 1.6em; height: 1.6em; }
.gz-sp__defitxt { flex: 1; min-width: 0; display: grid; gap: .15em; }
.gz-sp__defitxt b { font-size: 1.08em; font-weight: 800; color: var(--sp-dark); line-height: 1.2; }
.gz-sp__defitxt small { font-size: .92em; font-weight: 800; color: var(--sp-deep); }
.gz-sp__accept { flex: none; padding: .8em 1.1em; border-radius: 1em; background: var(--sp-deep); color: #fff; font-size: 1.05em; font-weight: 800; transition: transform .12s ease-out; }
.gz-sp__h { font-size: 1.45em; font-weight: 800; letter-spacing: -.02em; margin-bottom: .7em; }
.gz-sp__board { position: relative; list-style: none; margin: 0; padding: .2em 1.3em; height: 15.4em; background: #fff; border-radius: 1.6em; box-shadow: 0 1px 0 rgba(15, 23, 42, .02), 0 4px 14px rgba(15, 23, 42, .05); }
.gz-sp__row { position: absolute; left: 1.3em; right: 1.3em; top: .2em; display: flex; align-items: center; gap: 1em; height: 5em; border-bottom: 1px solid var(--sp-light); transition: transform .45s var(--gz-ease-spring); }
.gz-sp__row:last-child { border-bottom: 0; }
.gz-sp__row--lea { transform: translateY(5em); }
.gz-sp__row--k { transform: translateY(10em); }
.gz-sp__row em { width: 1.4em; font-style: normal; font-size: 1.2em; font-weight: 800; color: var(--sp-faded); }
.gz-sp__row b { flex: 1; font-size: 1.2em; font-weight: 800; }
.gz-sp__row small { font-size: 1.1em; font-weight: 800; color: var(--sp-muted); }
.gz-sp__row--me em, .gz-sp__row--me b, .gz-sp__row--me small { color: var(--sp-deep); }
.gz-sp__fab { align-self: center; margin-top: auto; margin-bottom: .8em; display: inline-flex; align-items: center; gap: .5em; padding: 1em 1.6em 1em 1.3em; border-radius: 999px; background: var(--sp-green); color: #fff; font-size: 1.25em; font-weight: 800; box-shadow: 0 4px 0 var(--sp-deep); text-shadow: 0 1px 0 rgba(0, 0, 0, .1); }
.gz-sp__fab svg { width: 1.3em; height: 1.3em; }
.gz-sp__composer { flex: none; display: flex; align-items: center; gap: .8em; padding: .9em 1.1em 1.6em; background: #fff; box-shadow: 0 -1px 0 rgba(15, 23, 42, .05), 0 -8px 24px rgba(15, 23, 42, .06); position: relative; z-index: 2; }
.gz-sp__plus, .gz-sp__send { flex: none; display: grid; place-items: center; width: 3.4em; height: 3.4em; border-radius: 1.1em; background: var(--sp-light); color: #374151; }
.gz-sp__send { background: var(--sp-green); color: #fff; box-shadow: 0 5px 12px rgba(5, 150, 105, .3); }
.gz-sp__plus svg, .gz-sp__send svg { width: 1.7em; height: 1.7em; }
.gz-sp__field { flex: 1; min-width: 0; padding: 1em 1.1em; border-radius: 1.1em; background: var(--sp-light); color: var(--sp-gray); font-size: 1.1em; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* État final statique (sans JS / mouvement réduit) : pas d'indicateur de
   frappe, Fil complet. */
.gz-sp:not(.is-anim) [data-at="typing"] { display: none; }

/* Boucle animée : chaque entrée du Fil se déplie (grid 0fr → 1fr) quand le
   pas courant l'a atteinte. Les anciens messages remontent comme dans un
   vrai fil, le haut est rogné par le corps. */
.gz-sp.is-anim .gz-sp__item { display: grid; grid-template-rows: 0fr; opacity: 0; transform: translateY(8px) scale(.96); transform-origin: 0 100%; transition: grid-template-rows .35s var(--gz-ease-out), opacity .3s ease, transform .35s var(--gz-ease-spring); }
.gz-sp.is-anim .gz-sp__item > * { min-height: 0; overflow: hidden; }
.gz-sp.is-anim .gz-sp__item.is-on { grid-template-rows: 1fr; opacity: 1; transform: none; }
.gz-sp.is-anim .gz-sp__item[data-at="me"] { transform-origin: 100% 100%; }
.gz-sp.is-anim.is-reset, .gz-sp.is-anim.is-reset * { transition: none !important; }
.gz-sp.is-anim .gz-sp__typing .gz-sp__bub i { animation: gz-sp-dot 1s ease-in-out infinite; }
.gz-sp.is-anim .gz-sp__typing .gz-sp__bub i:nth-child(2) { animation-delay: .15s; }
.gz-sp.is-anim .gz-sp__typing .gz-sp__bub i:nth-child(3) { animation-delay: .3s; }
.gz-sp [data-docs].is-bump { animation: gz-sp-bump .5s var(--gz-ease-spring); color: var(--sp-deep); }
.gz-sp__accept.is-press { transform: scale(.94); }
.gz-sp.is-rank .gz-sp__tab[data-tab="feed"] { color: var(--sp-muted); }
.gz-sp.is-rank .gz-sp__tab[data-tab="challenges"] { color: var(--sp-ink); }
.gz-sp.is-rank .gz-sp__ink { transform: translateX(147%); }
.gz-sp.is-rank .gz-sp__feed { opacity: 0; transform: translateX(-14%); }
.gz-sp.is-rank .gz-sp__rank { opacity: 1; transform: none; visibility: visible; }
/* Avant l'échange : Léa 1re, Toi 2e. */
.gz-sp.is-anim:not(.is-swapped) .gz-sp__row--me { transform: translateY(5em); }
.gz-sp.is-anim:not(.is-swapped) .gz-sp__row--lea { transform: none; }
.gz-sp.is-anim:not(.is-swapped) .gz-sp__row--me em, .gz-sp.is-anim:not(.is-swapped) .gz-sp__row--lea em { color: var(--sp-faded); }
.gz-sp.is-anim.is-swapped .gz-sp__row--me { background: linear-gradient(90deg, rgba(209, 250, 229, .0), rgba(209, 250, 229, .7) 50%, rgba(209, 250, 229, 0)); }
@keyframes gz-sp-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-.3em); opacity: 1; } }
@keyframes gz-sp-bump { 0% { transform: scale(1); } 40% { transform: scale(1.6); } 100% { transform: scale(1); } }

/* Post-its du thème Spaces */
.gz-postit svg { width: 18px; height: 18px; flex: none; }
.gz-postit--file { --rot: -4deg; bottom: 15%; left: 0; background: var(--gz-mint); font-size: 15px; }
.gz-postit--file .gz-check { margin: 0; color: var(--gz-green); }
.gz-postit--defi { --rot: 5deg; top: 6%; right: 2%; background: var(--gz-sun); font-size: 15px; }
.gz-postit--rank { --rot: -6deg; top: 5%; left: 6%; background: var(--gz-paper); color: var(--gz-coral-ink); border: 3px solid currentColor; box-shadow: none; font: 500 16px/1 var(--gz-font-mono); text-transform: uppercase; letter-spacing: .04em; }
@media (prefers-reduced-motion: no-preference) {
  .gz-postit--file { animation-duration: 7s; animation-delay: -2s; }
  .gz-postit--defi { animation-duration: 5s; animation-delay: -1s; }
  .gz-postit.is-ping { animation: gz-ping 600ms var(--gz-ease-spring); }
}
@keyframes gz-ping { 0% { transform: rotate(var(--rot)) scale(1); } 40% { transform: rotate(calc(var(--rot) * -1)) scale(1.14); } 100% { transform: rotate(var(--rot)) scale(1); } }
@media (min-width: 700px) and (max-width: 1023px) {
  .gz-postit--file, .gz-postit--defi { font-size: 13px; padding: 8px 10px; }
  .gz-postit--rank { font-size: 13px; top: 2%; left: 0; }
  .gz-postit--defi { top: 3%; right: -2%; }
  .gz-postit--file { bottom: 8%; left: -4px; }
}
@media (max-width: 699px) {
  .gz-postit--file { font-size: 13px; padding: 8px 10px; bottom: 9%; left: 0; }
  .gz-postit--defi { display: none; }
  .gz-postit--rank { font-size: 13px; top: 2%; left: 2%; }
}
.gz-sp__body { transition: opacity .25s ease; }
.gz-sp.is-fade .gz-sp__body { opacity: 0; }
/* Ajustements après captures : texte plus lisible, onglets au contenu
   (« Challenges » en EN), trait actif porté par l'onglet, encoche fixe. */
.gz-sp { font-size: calc(100cqw / 25.5); }
.gz-sp__head { padding-top: max(3.4em, 36px); }
.gz-sp__tabs { display: flex; justify-content: space-between; gap: .4em; padding-inline: .2em; }
.gz-sp__tab { position: relative; font-size: 1em; }
.gz-sp__tab::after { content: ""; position: absolute; left: -10%; right: -10%; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--sp-green); transform: scaleX(0); transition: transform .2s var(--gz-ease-out); }
.gz-sp__tab[data-tab="feed"]::after { transform: scaleX(1); }
.gz-sp.is-rank .gz-sp__tab[data-tab="feed"]::after { transform: scaleX(0); }
.gz-sp.is-rank .gz-sp__tab[data-tab="challenges"]::after { transform: scaleX(1); }
.gz-sp__rank { padding-top: 1.2em; }
.gz-sp__board { height: 12.4em; padding-block: .2em; margin-bottom: 1.3em; }
.gz-sp__row { height: 4em; }
.gz-sp__row--lea { transform: translateY(4em); }
.gz-sp__row--k { transform: translateY(8em); }
.gz-sp.is-anim:not(.is-swapped) .gz-sp__row--me { transform: translateY(4em); }
.gz-sp__crow { display: flex; align-items: center; gap: .9em; margin: 0; padding: 1em 1.2em; background: #fff; border-radius: 1.6em; box-shadow: 0 1px 0 rgba(15, 23, 42, .02), 0 4px 14px rgba(15, 23, 42, .05); }
.gz-sp__ctile { flex: none; display: grid; place-items: center; width: 2.7em; height: 2.7em; border-radius: .9em; background: var(--sp-tint); color: var(--sp-deep); }
.gz-sp__ctile svg { width: 1.5em; height: 1.5em; }
.gz-sp__ctxt { flex: 1; min-width: 0; display: grid; gap: .1em; }
.gz-sp__ctxt b { font-size: 1.1em; font-weight: 800; }
.gz-sp__ctxt small { font-size: .9em; font-weight: 800; color: var(--sp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gz-sp__crow em { font-style: normal; font-size: 1em; font-weight: 800; color: var(--sp-deep); white-space: nowrap; }
.gz-sp__fab { font-size: 1.1em; }
/* Post-its hors de l'en-tête de l'écran : au-dessus du film et du coin
   supérieur droit du téléphone. */
.gz-postit--rank { top: 0; left: 0; }
.gz-postit--defi { top: -1%; right: -2%; }
@media (min-width: 700px) and (max-width: 1023px) {
  .gz-postit--rank { top: -2%; left: -4%; }
  .gz-postit--defi { top: -3%; right: -4%; }
}
@media (max-width: 699px) {
  .gz-postit--rank { font-size: 12px; top: -1%; left: 0; padding: 6px 8px; }
}
/* Glamzy décalé vers l'extérieur : il couvrait ma bulle (à droite du Fil)
   et le bouton Envoyer. */
.gz-hero__glamzy { width: 172px; right: -9%; bottom: -7%; }
@media (min-width: 700px) and (max-width: 1023px) {
  .gz-hero__glamzy { width: 104px; right: -8%; bottom: -8%; }
}
@media (max-width: 699px) {
  .gz-hero__glamzy { width: 92px; right: auto; left: -3%; bottom: -3%; }
  .gz-postit--file { bottom: auto; top: 66%; left: 0; }
}
/* Les entrées du Fil ne rétrécissent jamais (sinon elles se chevauchent
   quand le Fil déborde) : c'est le haut qui est rogné. */
.gz-sp__feed > *, .gz-sp__rank > * { flex: none; }
@media (min-width: 1024px) { .gz-hero__glamzy { right: -13%; } }
@media (min-width: 1024px) { .gz-hero__glamzy { width: 160px; right: -12%; bottom: -15%; } }
.gz-sp__day { margin-top: .4em; }
/* Tablette : « the App Store » n'était plus tronqué qu'en EN, police un cran
   plus petite dans les badges. */
@media (min-width: 700px) and (max-width: 1023px) { .gz-store b { font-size: 16px; } body.gz-page a.gz-store { padding-inline: 12px; gap: 8px; } }

/* ══ Section Spaces « avancer ensemble » (2026-10-06, remplace le planning) ═ */
.gz-anchor { position: absolute; top: 0; }
.gz-together { background: var(--gz-lilac); }
.gz-together__grid { display: grid; gap: 56px; align-items: center; }
@media (min-width: 1100px) { .gz-together__grid { grid-template-columns: .95fr 1.05fr; } }
.gz-together__copy { display: grid; gap: 22px; justify-items: start; min-width: 0; }
.gz-together .gz-lead { color: var(--gz-ink-2); max-width: 44ch; }
.gz-together .gz-note { color: var(--gz-ink-2); font-weight: 700; }
.gz-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.gz-actions .gz-step__link { margin-top: 0; }
.gz-together__visual { position: relative; display: grid; gap: 18px; width: min(100%, 560px); margin-inline: auto; padding-bottom: 40px; }
.gz-together__visual .gz-card { padding: 18px 20px; font-family: var(--gz-font-body); }
.gz-sp__av--i { background: #DBEAFE; color: #1D4ED8; }
.gz-tg-space { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 14px; transform: rotate(-1.5deg); }
.gz-tg-pic { width: 52px; height: 52px; border-radius: 16px; background: #10B981; overflow: hidden; display: grid; place-items: end center; border: var(--gz-border); }
.gz-tg-pic img { width: 82%; height: auto; margin-bottom: -10px; }
.gz-tg-name { display: grid; min-width: 0; }
.gz-tg-name b { font-family: var(--gz-font-display); font-size: 1.375rem; font-weight: 600; line-height: 1.1; }
.gz-tg-name small { font-size: .875rem; font-weight: 800; color: var(--gz-muted); }
.gz-tg-avs { display: flex; }
.gz-tg-avs .gz-sp__av, .gz-tg-head .gz-sp__av, .gz-tg-board .gz-sp__av { font-style: normal; font-size: 12px; width: 30px; height: 30px; border: 2px solid var(--gz-paper); }
.gz-tg-avs .gz-sp__av + .gz-sp__av { margin-left: -8px; }
.gz-tg-tabs { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1.5px solid rgba(16, 37, 28, .12); font-size: .875rem; font-weight: 800; color: var(--gz-muted); }
.gz-tg-tabs b { color: var(--gz-ink); box-shadow: inset 0 -3px 0 #10B981; padding-bottom: 4px; }
.gz-tg-file { width: 88%; justify-self: end; display: grid; gap: 10px; transform: rotate(1.5deg); background: #F0FAF4; }
.gz-tg-head { display: flex; align-items: center; gap: 8px; font-size: .8125rem; font-weight: 800; color: #4B5563; }
.gz-tg-doc { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; background: #fff; box-shadow: 0 3px 12px rgba(15, 23, 42, .06); }
.gz-tg-doc .gz-sp__thumb { font-size: 12px; }
.gz-tg-doctxt { flex: 1; min-width: 0; display: grid; }
.gz-tg-doctxt b { font-size: 1rem; font-weight: 800; line-height: 1.2; }
.gz-tg-doctxt small { font-size: .8125rem; font-weight: 800; color: var(--gz-muted); }
.gz-tg-open { flex: none; padding: 10px 14px; border-radius: 12px; background: #ECFDF5; color: #047857; font-size: .875rem; font-weight: 800; }
.gz-tg-defi { width: 92%; display: grid; gap: 12px; transform: rotate(-1deg); }
.gz-tg-defihead { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: #ECFDF5; border: 1.5px solid #A7F3D0; }
.gz-tg-defihead > span:last-child { display: grid; min-width: 0; }
.gz-tg-defihead b { color: #065F46; font-weight: 800; line-height: 1.25; }
.gz-tg-defihead small { color: #047857; font-weight: 800; font-size: .8125rem; }
.gz-tg-bolt { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: #047857; color: #fff; }
.gz-tg-bolt svg { width: 18px; height: 18px; }
.gz-tg-board { list-style: none; margin: 0; padding: 0; display: grid; }
.gz-tg-board li { display: flex; align-items: center; gap: 12px; padding: 8px 4px; border-bottom: 1px solid #F3F4F6; }
.gz-tg-board li:last-child { border-bottom: 0; }
.gz-tg-board em { width: 18px; font-style: normal; font-weight: 800; color: #9CA3AF; }
.gz-tg-board b { flex: 1; font-weight: 800; }
.gz-tg-board small { font-weight: 800; color: var(--gz-muted); }
.gz-tg-board li.is-me em, .gz-tg-board li.is-me b, .gz-tg-board li.is-me small { color: #047857; }
.gz-tg-label { position: absolute; top: -14px; right: 18px; padding: 4px 9px; border: var(--gz-border); border-radius: 8px; background: var(--gz-sun); font: 500 11px/1.2 var(--gz-font-mono); letter-spacing: .06em; text-transform: uppercase; transform: rotate(3deg); }
.gz-together__glamzy { position: absolute; z-index: 2; right: -2%; bottom: -10px; width: 128px; height: auto; filter: drop-shadow(0 10px 12px rgba(16, 37, 28, .25)); }
@media (max-width: 640px) {
  .gz-tg-file, .gz-tg-defi { width: 100%; }
  .gz-tg-tabs { font-size: .78rem; }
  .gz-together__glamzy { width: 84px; right: 0; bottom: -6px; }
  .gz-together__visual { padding-bottom: 64px; }
}
@media (prefers-reduced-motion: no-preference) {
  .gz-js .gz-together__visual .gz-card.is-in { animation: gz-pop 600ms var(--gz-ease-spring) both; animation-delay: calc(var(--d, 0) * 140ms); }
  /* 2026-10-09 — désactivé : cohérence avec l'app, aucune boucle de repos
     hors du hero. Cette mascotte entre une fois (« peek ») puis saute une
     fois (study-playora.js, section 11). Ancienne règle (balancement
     infini) :
  .gz-js .gz-together__glamzy { animation: gz-tilt 4.5s ease-in-out infinite; } */
}

/* ══ Section enregistrement grand public (2026-10-06) ═════════════════ */
.gz-record { background: var(--gz-cream-2); }
.gz-record__title { display: grid; gap: 18px; justify-items: start; }
.gz-record__uses { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 20px; }
@media (min-width: 760px) { .gz-record__uses { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gz-record__uses .gz-card { display: grid; align-content: start; }
.gz-record__uses .gz-ico { margin-bottom: 14px; }
.gz-record__wave { display: flex; align-items: center; gap: 4px; height: 34px; margin-top: 18px; }
.gz-record__wave i { flex: 1; max-width: 8px; border-radius: 4px; background: var(--gz-ink); height: 30%; opacity: .8; }
.gz-record__wave i:nth-child(3n) { height: 80%; } .gz-record__wave i:nth-child(4n+1) { height: 55%; } .gz-record__wave i:nth-child(5n+2) { height: 100%; }
.gz-record__panel { position: relative; display: grid; gap: 24px; align-items: center; padding-right: clamp(20px, 2.4vw, 32px); }
@media (min-width: 900px) { .gz-record__panel { grid-template-columns: 1.1fr 1fr; padding-right: 180px; } }
.gz-record__side { display: grid; gap: 16px; justify-items: start; }
.gz-record__side .gz-note { color: var(--gz-ink-2); }
.gz-record__glamzy { position: absolute; right: 16px; bottom: -6px; width: 150px; height: auto; filter: drop-shadow(0 10px 12px rgba(16, 37, 28, .2)); }
@media (max-width: 899px) { .gz-record__glamzy { position: static; width: 96px; justify-self: end; margin: -40px -4px -26px 0; } }
@media (prefers-reduced-motion: no-preference) {
  .gz-js .gz-record__uses .gz-card.is-in .gz-record__wave i { animation: gz-rec-wave 1.2s ease-in-out infinite; transform-origin: center; }
  .gz-js .gz-record__wave i:nth-child(2n) { animation-delay: -.3s !important; }
  .gz-js .gz-record__wave i:nth-child(3n) { animation-delay: -.6s !important; }
}
@keyframes gz-rec-wave { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.45); } }
/* Glamzy dans la marge droite libérée, plus sur les points du classement. */
.gz-tg-defi { width: 80%; }
.gz-together__glamzy { right: -3%; bottom: 6px; width: 120px; }
@media (max-width: 640px) { .gz-tg-defi { width: 100%; } .gz-together__glamzy { width: 84px; right: 0; bottom: -6px; } }

/* ══ Bandeau bibliothèque (2026-10-06) ═══════════════════════════════ */
.gz-shelf { background: var(--gz-cream); padding-block: clamp(48px, 6vw, 80px) 0; }
.gz-shelf__card { display: grid; gap: 18px; align-items: center; }
@media (min-width: 860px) { .gz-shelf__card { grid-template-columns: auto 1fr auto; gap: 32px; } }
.gz-shelf__copy { display: grid; gap: 10px; justify-items: start; min-width: 0; }
.gz-shelf__copy .gz-hl { white-space: normal; }
.gz-shelf__card p { margin: 0; max-width: 56ch; color: var(--gz-ink); }
.gz-shelf__books { display: flex; align-items: flex-end; gap: 6px; height: 88px; }
.gz-shelf__books i { width: 22px; border: var(--gz-border); border-radius: 4px 4px 2px 2px; background: var(--gz-paper); height: 80%; }
.gz-shelf__books i:nth-child(1) { background: var(--gz-coral); height: 92%; }
.gz-shelf__books i:nth-child(2) { background: var(--gz-lime); height: 70%; }
.gz-shelf__books i:nth-child(3) { background: var(--gz-sun); height: 100%; }
.gz-shelf__books i:nth-child(4) { background: var(--gz-lilac); height: 78%; transform: rotate(10deg); transform-origin: bottom left; }
.gz-shelf .gz-btn { justify-self: start; }

/* ══ 3 étapes v2, version éditoriale (2026-10-06) ═══════════════════════
   Remplace les cartes inclinées (.gz-steps, neutralisées dans le Blade).
   Grille alignée sur trois colonnes, numéros en mono, mini-écran de l'app
   par étape, ligne de progression remplie au défilement (--sx-p posé par
   study-playora.js ; 1 par défaut, donc pleine sans JS). */
.gz-sx { --sx-p: 1; background: var(--gz-green); color: var(--gz-cream); }
.gz-sx__head { display: grid; gap: 20px; margin-bottom: clamp(40px, 5vw, 64px); }
@media (min-width: 900px) { .gz-sx__head { grid-template-columns: 1.15fr .85fr; align-items: end; gap: 56px; } }
.gz-sx__headline { display: grid; gap: 18px; justify-items: start; }
.gz-sx__tag { font: 500 var(--gz-fs-label)/1.2 var(--gz-font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gz-lime); display: inline-flex; align-items: center; gap: 10px; }
.gz-sx__tag::before { content: ""; width: 28px; height: 2px; background: currentColor; }
.gz-sx .gz-h2 { max-width: 16ch; }
.gz-sx__lead { margin: 0; font-size: var(--gz-fs-lead); line-height: 1.5; color: rgba(251, 246, 234, .82); max-width: 40ch; }
.gz-sx__rail { position: relative; height: 2px; background: rgba(251, 246, 234, .18); border-radius: 2px; margin-bottom: 36px; }
.gz-sx__fill { position: absolute; inset: 0; background: var(--gz-lime); border-radius: 2px; transform-origin: left center; transform: scaleX(var(--sx-p)); }
.gz-sx__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 48px; counter-reset: none; }
@media (min-width: 900px) { .gz-sx__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px); } }
.gz-sx__step { position: relative; display: flex; flex-direction: column; min-width: 0; }
.gz-sx__node { position: absolute; top: -43px; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--gz-green); border: 2px solid rgba(251, 246, 234, .45); transition: background .3s, border-color .3s, transform .3s var(--gz-ease-spring); }
.gz-sx__step.is-reached .gz-sx__node { background: var(--gz-lime); border-color: var(--gz-lime); transform: scale(1.15); }
.gz-sx__kicker { margin: 0 0 14px; display: flex; align-items: baseline; gap: 12px; font: 500 13px/1 var(--gz-font-mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(251, 246, 234, .72); }
.gz-sx__num { color: var(--gz-lime); font-size: 15px; }
.gz-sx__title { margin: 0 0 12px; font-family: var(--gz-font-display); font-size: clamp(1.5rem, 1.15rem + 1vw, 2rem); font-weight: 600; line-height: 1.1; letter-spacing: -.01em; color: var(--gz-cream); text-wrap: balance; }
.gz-sx__copy { margin: 0 0 16px; font-size: 1.0625rem; line-height: 1.55; color: rgba(251, 246, 234, .8); }
.gz-sx__points { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 8px; }
.gz-sx__points li { display: flex; gap: 10px; align-items: flex-start; font-weight: 700; font-size: .975rem; line-height: 1.4; color: var(--gz-cream); }
.gz-sx__points .gz-check { width: 18px; height: 18px; margin-top: 2px; color: var(--gz-lime); }
/* Mini-écran : même gabarit pour les trois étapes, alignés en bas de colonne. */
.gz-sx__screen { margin-top: auto; display: grid; align-content: start; gap: 8px; min-height: 216px; padding: 14px; background: var(--gz-cream); color: var(--gz-ink); border: 2px solid var(--gz-ink); border-radius: 22px; box-shadow: 5px 6px 0 var(--gz-green-deep); }
.gz-sx__bar { margin: 0 0 4px; display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; border-bottom: 1.5px solid rgba(16, 37, 28, .1); }
.gz-sx__bar b { font-size: 14px; font-weight: 800; }
.gz-sx__bar::after { content: ""; width: 28px; height: 6px; border-radius: 6px; background: rgba(16, 37, 28, .15); }
.gz-sx__src { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--gz-paper); border: 1.5px solid rgba(16, 37, 28, .12); font-weight: 800; font-size: 14px; }
.gz-sx__src i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--gz-mint); color: var(--gz-green); }
.gz-sx__src svg { width: 16px; height: 16px; }
.gz-sx__src.is-on { border-color: var(--gz-ink); background: var(--gz-lime); }
.gz-sx__src.is-on i { background: var(--gz-paper); }
.gz-sx__progress { height: 6px; border-radius: 6px; background: rgba(16, 37, 28, .1); overflow: hidden; margin-top: 4px; }
.gz-sx__progress i { display: block; height: 100%; width: 100%; background: var(--gz-green-mid); border-radius: 6px; transform-origin: left; }
.gz-sx__q { margin: 2px 0 4px; font-family: var(--gz-font-display); font-size: 18px; font-weight: 600; line-height: 1.2; }
.gz-sx__opt { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-radius: 12px; background: var(--gz-paper); border: 1.5px solid rgba(16, 37, 28, .14); font: 500 14px/1 var(--gz-font-mono); }
.gz-sx__opt .gz-check { width: 16px; height: 16px; margin: 0; color: var(--gz-green); }
.gz-sx__opt.is-ok { background: var(--gz-mint); border-color: var(--gz-ink); }
.gz-sx__ladder { position: relative; display: flex; justify-content: space-between; align-items: center; margin: 22px 4px 10px; }
.gz-sx__ladder::before { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 2px; background: rgba(16, 37, 28, .15); }
.gz-sx__dot { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--gz-paper); border: 2px solid var(--gz-ink); font: 500 14px/1 var(--gz-font-mono); }
.gz-sx__dot:nth-child(-n+3) { background: var(--gz-lime); }
.gz-sx__legend { font-size: 13px; font-weight: 700; color: var(--gz-muted); line-height: 1.4; }
.gz-sx__link { margin-top: 18px; color: var(--gz-cream) !important; }
body.gz-page a.gz-step__link.gz-sx__link { color: var(--gz-cream); }
body.gz-page a.gz-step__link.gz-sx__link:hover { text-decoration-color: var(--gz-lime); }
/* Tablette : deux colonnes ne tiennent pas les mini-écrans ; étapes en
   lignes texte | écran. */
@media (min-width: 640px) and (max-width: 899px) {
  .gz-sx__step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); column-gap: 32px; align-items: start; }
  .gz-sx__step > :not(.gz-sx__screen):not(.gz-sx__node) { grid-column: 1; }
  .gz-sx__screen { grid-column: 2; grid-row: 1 / span 6; margin-top: 0; }
}
/* Sous 900 px : rail vertical à gauche, rempli au défilement. */
@media (max-width: 899px) {
  .gz-sx__rail { position: absolute; left: calc(var(--gz-gutter) + 6px); top: 0; bottom: 0; width: 2px; height: auto; margin: 0; }
  .gz-sx .gz-wrap { position: relative; }
  .gz-sx__fill { transform-origin: top center; transform: scaleY(var(--sx-p)); }
  .gz-sx__list { padding-left: 34px; }
  .gz-sx__node { top: 2px; left: -34px; }
  .gz-sx__rail { top: var(--sx-rail-top, 0); }
}
@media (prefers-reduced-motion: no-preference) {
  .gz-js .gz-sx__step.is-in .gz-sx__progress i { animation: gz-sx-load 1.6s var(--gz-ease-out) 300ms both; }
  .gz-js .gz-sx__step.is-in .gz-sx__src.is-on { animation: gz-pop 500ms var(--gz-ease-spring) 200ms both; }
  .gz-js .gz-sx__step.is-in .gz-sx__opt.is-ok { animation: gz-sx-ok 600ms var(--gz-ease-spring) 900ms both; }
  .gz-js .gz-sx__step.is-in .gz-sx__dot { animation: gz-pop 450ms var(--gz-ease-spring) both; animation-delay: calc(300ms + var(--i) * 120ms); }
  .gz-js .gz-sx__step.is-in .gz-sx__screen { animation: gz-rise 500ms var(--gz-ease-out) 150ms both; }
}
@keyframes gz-sx-load { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes gz-sx-ok { 0% { background: var(--gz-paper); border-color: rgba(16, 37, 28, .14); } 100% { background: var(--gz-mint); border-color: var(--gz-ink); } }
/* Rail vertical porté par la liste elle-même (le rail horizontal est masqué). */
@media (max-width: 899px) {
  .gz-sx__rail { display: none; }
  .gz-sx__list { position: relative; }
  .gz-sx__list::before, .gz-sx__list::after { content: ""; position: absolute; left: 6px; top: 8px; bottom: 0; width: 2px; border-radius: 2px; background: rgba(251, 246, 234, .18); }
  .gz-sx__list::after { background: var(--gz-lime); transform-origin: top center; transform: scaleY(var(--sx-p)); }
  .gz-sx__node { z-index: 1; }
}
/* Pied de page des pages Study : rubrique « Aussi chez Glamzn » (liens vers
   les autres produits) masquée à la demande du fondateur, 2026-10-06. Le
   partial est édité par une autre session : masquage CSS seulement. Les trois
   rubriques restantes occupent la grille à parts égales. */
body.gz-page .footer-directory > div:last-of-type:not(.is-product):not(.is-audience) { display: none; }
body.gz-page .footer-directory { grid-template-columns: 1.4fr .8fr .8fr; }
@media (max-width: 720px) {
  body.gz-page .footer-directory { grid-template-columns: 1fr 1fr; }
  body.gz-page .footer-directory .is-product { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 380px) { body.gz-page .footer-directory .is-product { grid-template-columns: 1fr; } }
/* Ajustements après captures : respirations, écrans de même hauteur. */
.gz-sx .gz-sx__kicker { margin-bottom: 16px; }
.gz-sx .gz-sx__copy { margin: 0 0 18px; }
.gz-sx .gz-sx__points { margin-bottom: 28px; }
@media (min-width: 900px) { .gz-sx__screen { height: 248px; } }
.gz-sx__sheet { display: grid; gap: 6px; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--gz-paper); border: 1.5px solid rgba(16, 37, 28, .12); }
.gz-sx__sheet i { height: 6px; border-radius: 6px; background: rgba(16, 37, 28, .12); }
.gz-sx__sheet i:first-child { width: 45%; background: var(--gz-green-mid); opacity: .7; }
.gz-sx__sheet i:last-child { width: 70%; }
.gz-sx .gz-sx__title { margin-bottom: 14px; }

/* Vidéos remontées après les 3 étapes (2026-10-06, agent CRO-page) : le
   bandeau bibliothèque suit désormais l'enregistrement (crème 2) ; il reçoit
   un bord déchiré crème pour garder la couture entre les deux fonds. */
.gz-shelf { position: relative; }
.gz-edge-wrap--cream { color: var(--gz-cream); }

/* ── Barre fixe mobile (2026-10-06, agent CRO-page) ─────────────────────
   Partial landing/app/partials/sticky-download, home ET pages liées.
   Cachée par défaut (et toujours sur desktop > 900 px) ; le script du partial
   pose .is-on une fois les badges du hero dépassés et l'enlève dès que le CTA
   final ou le pied de page entre à l'écran. Rayons concentriques : carte 22 =
   bouton 14 + marge 8. */
.gz-sticky { display: none; }
@media (max-width: 900px) {
  .gz-sticky {
    position: fixed; z-index: 60;
    left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    display: flex; align-items: center; gap: 10px;
    padding: 8px 8px 8px 10px;
    background: var(--gz-cream); color: var(--gz-ink);
    border: var(--gz-border); border-radius: 22px;
    box-shadow: 4px 5px 0 var(--gz-ink);
    transform: translateY(calc(100% + 24px + env(safe-area-inset-bottom, 0px)));
    opacity: 0; visibility: hidden;
    /* Sortie plus douce et plus courte que l'entrée. */
    transition: transform 200ms cubic-bezier(.4, 0, 1, 1), opacity 200ms, visibility 0s linear 200ms;
  }
  .gz-sticky.is-on {
    transform: none; opacity: 1; visibility: visible;
    transition: transform 380ms var(--gz-ease-out), opacity 200ms, visibility 0s;
  }
  body.gz-page.gz-has-sticky { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }

  .gz-sticky__pic {
    flex: none; width: 44px; height: 44px; overflow: hidden;
    border: var(--gz-border); border-radius: 50%; background: var(--gz-lime);
  }
  .gz-sticky__pic img { display: block; width: 100%; height: auto; max-width: none; transform: translateY(2px) scale(1.18); transform-origin: top center; }
  .gz-sticky__txt { flex: 1; min-width: 0; display: grid; line-height: 1.15; }
  .gz-sticky__txt b { font: 600 17px/1.1 var(--gz-font-display); font-variation-settings: "wdth" 112; }
  .gz-sticky__txt small { font-size: 12.5px; font-weight: 700; line-height: 1.2; color: var(--gz-ink-2); text-wrap: balance; }

  body.gz-page a.gz-sticky__store, body.gz-page a.gz-sticky__cta {
    flex: none; display: none; align-items: center; gap: 8px; min-height: 48px;
    border: var(--gz-border); border-radius: 14px; text-decoration: none;
    box-shadow: 2px 3px 0 var(--gz-green);
    transition: transform 150ms var(--gz-ease-out), box-shadow 150ms var(--gz-ease-out);
  }
  body.gz-page a.gz-sticky__store { padding: 6px 12px 6px 10px; background: var(--gz-ink); color: var(--gz-cream); }
  body.gz-page a.gz-sticky__cta { padding: 0 16px; background: var(--gz-lime); color: var(--gz-ink); font-weight: 800; font-size: 15px; box-shadow: 2px 3px 0 var(--gz-ink); }
  body.gz-page a.gz-sticky__store:active, body.gz-page a.gz-sticky__cta:active { transform: translate(2px, 3px); box-shadow: none; }
  .gz-sticky__store svg { flex: none; }
  .gz-sticky__store span { display: grid; line-height: 1.1; }
  .gz-sticky__store small { font-size: 10px; font-weight: 700; opacity: .85; white-space: nowrap; }
  .gz-sticky__store b { font-size: 15px; font-weight: 800; white-space: nowrap; }
  .gz-sticky[data-os="ios"] [data-os-only="ios"],
  .gz-sticky[data-os="android"] [data-os-only="android"],
  .gz-sticky[data-os="other"] [data-os-only="other"] { display: inline-flex; }
}
@media (max-width: 349px) {
  .gz-sticky__txt small { display: none; }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .gz-sticky, .gz-sticky.is-on { transform: none; transition: opacity 150ms, visibility 0s linear 150ms; }
  .gz-sticky.is-on { transition: opacity 150ms, visibility 0s; }
}

/* 2026-10-06 — Ancres du header : app-site.css additionnait scroll-padding-top 92px
   et scroll-margin-top 100px, la section démarrait ~120 px sous le header alors
   qu'elle a déjà son propre padding haut. Sur les pages Study : seule la hauteur
   du header est réservée. */
html:has(body.gz-page) { scroll-padding-top: 76px; }
body.gz-page main [id] { scroll-margin-top: 0; }

/* ══ Maillage interne de la home (2026-10-06, agent DÉCOUVERTE) ══════════
   Le header allégé ne liste plus les pages liées : les cartes #outils mènent
   à leur page de détail (libellé visible « Voir en détail »), un bouton de
   téléchargement reste sous la grille, et le bloc #pour-qui renvoie aux 6
   pages audiences. Fonds : crème 2 (#pour-qui) entre la bibliothèque (crème)
   et la FAQ (crème quadrillée), avec un bord déchiré de chaque côté. */

/* Cartes fonctions : libellé aligné sur la pastille flèche (bas gauche). */
.gz-card__more {
  position: absolute; left: clamp(20px, 2.4vw, 32px); bottom: 26px;
  font-weight: 800; font-size: .9375rem; line-height: 1.2; color: var(--gz-ink);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px;
  text-decoration-color: rgba(16, 37, 28, .35);
  transition: text-decoration-color 150ms var(--gz-ease-out);
}
@media (hover: hover) {
  .gz-card--lift:hover .gz-card__more { text-decoration-color: currentColor; }
}
.gz-card--green .gz-card__more { color: var(--gz-cream); text-decoration-color: rgba(251, 246, 234, .45); }
/* Grande carte (visuel téléphone en bas) et carte large : libellé dans le flux. */
.gz-b-a .gz-card__more, .gz-b-w .gz-card__more { position: static; display: inline-block; margin-top: 14px; }
/* Carte enregistrement : l'onde passe à droite pour libérer le bas gauche. */
.gz-b-c .gz-rec { left: auto; right: 72px; }
.gz-b-b .gz-fan { right: 66px; }
@media (max-width: 420px) {
  .gz-b-b .gz-fan { width: 70px; height: 44px; bottom: 26px; }
  .gz-b-c .gz-rec { right: 66px; }
}

.gz-features__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: clamp(32px, 4vw, 48px); }
.gz-features__foot .gz-step__link { margin-top: 0; }

/* Bloc « Glamzn, pour qui ? » */
.gz-shelf { padding-bottom: clamp(64px, 8vw, 104px); }
.gz-audiences { background: var(--gz-cream-2); }
.gz-audiences__title { display: grid; gap: 18px; justify-items: start; }
.gz-audiences .gz-hl { white-space: normal; }
.gz-aud { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
@media (min-width: 600px) { .gz-aud { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }
@media (min-width: 1024px) { .gz-aud { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.gz-aud > li { display: flex; min-width: 0; }
.gz-aud__card {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px;
  width: 100%; min-height: 76px; padding: 14px 16px; border-radius: var(--gz-r);
}
@media (min-width: 600px) { .gz-aud__card { padding: 20px 20px 20px 18px; gap: 16px; } }
.gz-aud__ico { width: 44px; height: 44px; margin: 0; border-radius: 12px; }
.gz-aud__ico svg { width: 22px; height: 22px; }
.gz-aud__txt { display: grid; gap: 3px; min-width: 0; }
.gz-aud__label { font: 600 1.1875rem/1.15 var(--gz-font-display); font-variation-settings: "wdth" 112; text-wrap: balance; }
.gz-aud__txt small { font-size: .9375rem; font-weight: 600; line-height: 1.35; color: var(--gz-ink-2); text-wrap: pretty; }
.gz-aud__go {
  display: grid; place-items: center; width: 36px; height: 36px; flex: none;
  border: var(--gz-border); border-radius: 50%; background: var(--gz-lime); color: var(--gz-ink); font-weight: 800;
  transition: transform 150ms var(--gz-ease-out);
}
@media (hover: hover) { .gz-aud__card:hover .gz-aud__go { transform: translateX(3px); } }
body.gz-page a.gz-aud__card:focus-visible { outline: 3px solid var(--gz-green); outline-offset: 4px; }

/* 2026-10-06 — Bibliothèque ajoutée au header de l'accueil (4 ancres/liens) :
   entre 901 et 1180 px, le sélecteur de langue débordait à droite en FR.
   On resserre les liens et le bouton sur cette plage uniquement. */
@media (min-width: 901px) and (max-width: 1180px) {
  body.gz-page .gz-nav--home .app-nav-desktop { gap: 18px; }
  body.gz-page .gz-nav--home .app-nav-desktop a { font-size: 15px; padding-inline: 2px; }
  body.gz-page .gz-nav--home .button-primary { padding-inline: 16px; font-size: 15px; }
}

/* 2026-10-06 — Premier écran v2 : titre (« Réussis ton année avec Glamzn. »)
   et 4 puces « moments ». Le
   titre descend d'un cran pour tenir en 3-4 lignes, le surligneur suit les
   retours à la ligne. */
body.gz-page .gz-hero__title--v2 { font-size: clamp(2.6rem, 6.2vw, 5rem); }
body.gz-page .gz-hero__title--v2 .gz-hl { -webkit-box-decoration-break: clone; box-decoration-break: clone; }
body.gz-page .gz-points--moments { gap: 10px; }
body.gz-page .gz-points--moments li { line-height: 1.45; }
/* La partie surlignée était en nowrap (pensée pour « Ce soir ») : avec
   « avec Glamzn. » elle débordait et élargissait la colonne. */
body.gz-page .gz-hero__title--v2 .gz-hero__em,
body.gz-page .gz-hero__title--v2 .gz-hl { white-space: normal; display: inline; }
body.gz-page .gz-hero__copy { min-width: 0; }
@media (max-width: 640px) { body.gz-page .gz-hero__title--v2 { font-size: clamp(2.2rem, 10vw, 2.9rem); } }
/* Surligneur multi-lignes : fond en dégradé (suit chaque ligne grâce à
   box-decoration-break) au lieu du pseudo-élément, qui ne couvrait que la
   dernière ligne. Titre ramené à 3-4 lignes sur ordinateur. */
body.gz-page .gz-hero__title--v2 .gz-hl::before,
body.gz-page .gz-hero__title--v2 .gz-hl::after { display: none; }
body.gz-page .gz-hero__title--v2 .gz-hl {
  background: linear-gradient(transparent 58%, var(--gz-lime) 58%, var(--gz-lime) 94%, transparent 94%);
  padding: 0 .08em;
}
@media (min-width: 641px) { body.gz-page .gz-hero__title--v2 { font-size: clamp(2.6rem, 4.6vw, 4.1rem); } }

/* 2026-10-06 — Logo mobile : « AI Study Coach » sous « Glamzn » (et non à côté,
   comme sur ordinateur), pour libérer la largeur du header. */
@media (max-width: 900px) {
  body.gz-page .gz-nav .brand-lockup { display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; line-height: 1; }
  body.gz-page .gz-nav .brand-tagline { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; padding: 0; white-space: nowrap; }
}

/* ==========================================================================
   2026-10-06 — Étape 3 mini Space (section #experience, app.blade.php).
   Remplace les cercles d'intervalles 1·3·7·14·30 : maquette de l'écran Spaces
   de l'app (en-tête + avatars, onglets Fil · Docs · Défis · Membres, annales
   partagées, défi à relever, classement de la semaine). Même gabarit que les
   mini-écrans 1 et 2 (carte crème, bordure encre, ombre décalée). Animation
   au défilement seulement avec JS et sans mouvement réduit ; sinon l'état
   final complet est affiché tel quel.
   ========================================================================== */
.gz-sx__screen--3 { gap: 8px; }
.gz-sx3__head { margin: 0; display: flex; align-items: center; gap: 9px; min-width: 0; }
.gz-sx3__pic { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 9px; background: var(--gz-green); color: var(--gz-lime); font: 800 14px/1 var(--gz-font-mono); }
.gz-sx3__head b { flex: 1; min-width: 0; font-size: 14px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gz-sx3__crew { flex: none; display: flex; padding-left: 7px; }
.gz-sx3__crew i { display: grid; place-items: center; width: 22px; height: 22px; margin-left: -7px; border-radius: 50%; border: 2px solid var(--gz-cream); font-size: 9.5px; font-weight: 800; line-height: 1; font-style: normal; }
.gz-sx3__crew .is-k, .gz-sx3__av.is-k { background: #DDD6FE; color: #6D28D9; }
.gz-sx3__crew .is-l, .gz-sx3__av.is-l { background: #FEF3C7; color: #92400E; }
.gz-sx3__crew .is-i { background: #DBEAFE; color: #1D4ED8; }
.gz-sx3__av.is-me { background: #D1FAE5; color: #047857; }
.gz-sx3__tabs { margin: 0; display: flex; justify-content: space-between; gap: 6px; border-bottom: 1.5px solid rgba(16, 37, 28, .1); }
.gz-sx3__tabs span { position: relative; padding: 3px 0 7px; font-size: 12px; font-weight: 800; line-height: 1.2; color: var(--gz-muted); white-space: nowrap; }
.gz-sx3__tabs small { margin-left: 3px; font-size: 10px; font-weight: 700; color: rgba(16, 37, 28, .42); font-variant-numeric: tabular-nums; }
.gz-sx3__tabs .is-on { color: var(--gz-ink); }
.gz-sx3__tabs .is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1.5px; height: 3px; border-radius: 3px 3px 0 0; background: var(--gz-green-mid); }
.gz-sx3__doc, .gz-sx3__dare { margin: 0; display: flex; align-items: center; gap: 9px; min-width: 0; border-radius: 12px; }
.gz-sx3__doc { padding: 6px 10px; background: var(--gz-paper); border: 1.5px solid rgba(16, 37, 28, .12); }
.gz-sx3__av { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 10px; font-weight: 800; line-height: 1; font-style: normal; }
.gz-sx3__thumb { flex: none; display: grid; align-content: start; gap: 2px; width: 18px; height: 24px; padding: 4px 3px; border-radius: 4px; background: #fff; box-shadow: 0 1px 4px rgba(15, 23, 42, .16); }
.gz-sx3__thumb i { height: 2px; border-radius: 1px; background: #E5E7EB; }
.gz-sx3__thumb i:first-child { width: 80%; height: 3px; background: #FDE68A; }
.gz-sx3__thumb i:nth-child(3) { width: 65%; }
.gz-sx3__txt { flex: 1; min-width: 0; display: grid; line-height: 1.2; }
.gz-sx3__txt small { font-size: 11px; font-weight: 700; color: var(--gz-muted); }
.gz-sx3__txt b { font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gz-sx3__dare { padding: 6px 6px 6px 10px; background: var(--gz-mint); border: 1.5px solid var(--gz-ink); }
.gz-sx3__dare .gz-sx3__txt b { font-size: 12.5px; }
.gz-sx3__dare .gz-sx3__txt small { color: var(--gz-green); }
.gz-sx3__bolt { flex: none; display: grid; place-items: center; width: 22px; height: 22px; color: var(--gz-green); }
.gz-sx3__bolt svg { width: 18px; height: 18px; }
.gz-sx3__go { flex: none; padding: 7px 11px; border-radius: 9px; background: var(--gz-green); color: var(--gz-cream); font-size: 12px; font-weight: 800; line-height: 1; box-shadow: 0 2px 0 var(--gz-green-deep); }
.gz-sx3__board { display: grid; grid-template-columns: 14px minmax(0, 1fr); column-gap: 6px; row-gap: 2px; align-items: center; }
.gz-sx3__cap { grid-column: 1 / -1; font: 500 10.5px/1.2 var(--gz-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--gz-muted); }
.gz-sx3__rk { font-size: 12px; font-weight: 800; line-height: 1; text-align: center; color: rgba(16, 37, 28, .4); font-variant-numeric: tabular-nums; }
.gz-sx3__rk.is-first { color: var(--gz-green); }
.gz-sx3__row { display: flex; align-items: center; gap: 7px; height: 20px; min-width: 0; }
.gz-sx3__row .gz-sx3__av { width: 20px; height: 20px; font-size: 9px; }
.gz-sx3__row b { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 800; }
.gz-sx3__row em { font-style: normal; font-size: 11.5px; font-weight: 800; color: var(--gz-muted); font-variant-numeric: tabular-nums; }
.gz-sx3__row.is-me b, .gz-sx3__row.is-me em { color: var(--gz-green); }
@media (prefers-reduced-motion: no-preference) {
  .gz-js .gz-sx__step.is-in .gz-sx3__doc { animation: gz-sx3-in 450ms var(--gz-ease-out) 350ms both; }
  .gz-js .gz-sx__step.is-in .gz-sx3__dare { animation: gz-sx3-slide 550ms var(--gz-ease-out) 700ms both; }
  .gz-js .gz-sx__step.is-in .gz-sx3__go { animation: gz-pop 400ms var(--gz-ease-spring) 1150ms both; }
  .gz-js .gz-sx__step.is-in .gz-sx3__row.is-me { animation: gz-sx3-up 650ms var(--gz-ease-spring) 1500ms both; }
  .gz-js .gz-sx__step.is-in .gz-sx3__row.is-lea { animation: gz-sx3-down 650ms var(--gz-ease-spring) 1500ms both; }
}
@keyframes gz-sx3-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes gz-sx3-slide { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }
/* Le classement bouge : « Toi » double Léa (lignes échangées, rangs fixes). */
@keyframes gz-sx3-up { from { transform: translateY(22px); } to { transform: none; } }
@keyframes gz-sx3-down { from { transform: translateY(-22px); } to { transform: none; } }

/* ══ Glamzy du hero en calques (2026-10-09) ═════════════════════════════
   .gz-hero__glamzy est désormais un conteneur (position, taille et ombre
   inchangées) qui garde l'image entière : seule rendue sans JS ou en
   mouvement réduit, c'est aussi elle qui fait l'entrée. study-playora.js
   (section 10 bis, moteur de mouvements piloté par l'événement glamzy:play)
   y ajoute ensuite, si le mouvement est permis, un calque de pièces en
   canvas (gomme DERRIÈRE le corps, bras devant, paupières) qui la relaie au
   repos pour le salut et les autres mouvements. Mêmes pièces, fractions et pivots que
   l'acteur mobile (glamzy_actor.dart, pose hello). Une seule animation de
   transform par élément (Web Animations, composées sur le GPU) : conteneur
   = entrée, __sway = corps (balancement, saut, tour, pirouette, écrasement),
   __arm = salut, __cap = gomme. L'ombre reste sur le conteneur, qui ne
   tourne pas : pendant un salto, elle tombe toujours vers le bas.
   L'ancienne animation (gz-peek + gz-wave sur la même image, non composée)
   ne s'applique plus à ce conteneur. */
.gz-js .gz-hero__glamzy[data-glamzy] { animation: none; }
.gz-hero__glamzy[data-glamzy] { transform-origin: 61.33% 95%; }
/* Même pivot que __sway (les pieds) : sans pièces, les mouvements se jouent
   sur l'image entière. */
.gz-hero__glamzy > .gz-glamzy__whole { display: block; width: 100%; height: auto; transform-origin: 61.33% 95%; }
.gz-hero__glamzy.is-rig > .gz-glamzy__whole { visibility: hidden; }
/* top/right/bottom/left plutôt qu'inset (Safari < 14.1) : un calque sans
   taille masquerait Glamzy au relais. */
.gz-glamzy__rig, .gz-glamzy__sway { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.gz-glamzy__rig { visibility: hidden; pointer-events: none; container-type: inline-size; }
.gz-hero__glamzy.is-rig > .gz-glamzy__rig { visibility: visible; }
.gz-glamzy__sway { transform-origin: 61.33% 95%; }
/* Chaque canvas a la boîte de l'image entière ; la pièce y est dessinée à
   son rectangle exact : au repos, les trois recomposent l'image au pixel
   près. Pivots = ceux du mobile. */
.gz-glamzy__rig canvas { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; }
.gz-glamzy__cap { transform-origin: 62.33% 12.53%; }
.gz-glamzy__arm { transform-origin: 31.33% 50.44%; }
/* Paupières (_LidPainter mobile) : ovale de l'œil élargi de 1 px ; celle du
   haut descend jusqu'à 62 % de l'œil, bord en arc et trait de cils, celle du
   bas remonte à sa rencontre, bord en arc aussi. Peau : couleurs mesurées
   juste autour de chaque œil (conique), centre un peu plus clair. Arcs en
   parabole (sag 10 % de l'œil), comme les Bézier quadratiques du mobile ;
   cils d'épaisseur constante. Au repos,
   scaleY(0) : rien n'est peint. Unités de conteneur indispensables : sans
   elles (Safari < 16), le JS ne crée pas les paupières. */
@supports (container-type: inline-size) {
  .gz-glamzy__eye { position: absolute; border-radius: 50%; overflow: hidden; --h: 18.14cqw; }
  .gz-glamzy__eye--a { left: calc(38.22% - 1px); top: calc(29.10% - 1px); width: calc(14.56% + 2px); height: calc(11.84% + 2px); --lid: #54A45D; --lid-hi: rgba(93, 171, 104, .95); --lid-0: rgba(83, 166, 94, 0);
    --rim: #67B56E 0deg, #61AE68 30deg, #56A55F 60deg, #559E5D 90deg, #4FA05C 120deg, #569E5D 150deg, #5CA662 180deg, #5DAC68 210deg, #47A257 240deg, #41A753 270deg, #41A857 300deg, #51A35D 330deg, #67B56E 360deg; }
  .gz-glamzy__eye--b { left: calc(62.89% - 1px); top: calc(30.13% - 1px); width: calc(14.56% + 2px); height: calc(10.98% + 2px); --h: 16.82cqw; --lid: #217336; --lid-hi: rgba(46, 123, 65, .95); --lid-0: rgba(33, 115, 53, 0);
    --rim: #1F6F31 0deg, #186A2E 30deg, #18642D 60deg, #1A6E33 90deg, #266F38 120deg, #29743A 150deg, #207439 180deg, #217A36 210deg, #217934 240deg, #2A813E 270deg, #27813C 300deg, #257838 330deg, #1F6F31 360deg; }
  .gz-glamzy__lid { position: absolute; left: -1px; right: -1px; transform: scaleY(0); }
  .gz-glamzy__lid:not(.gz-glamzy__lid--lo) { top: 0; height: calc(var(--h) * .62 + 1px); transform-origin: 50% 0;
    background: radial-gradient(circle 10.92cqw at 50% calc(var(--h) * .375 + 1px), var(--lid-hi) 0%, var(--lid-0) 85%), conic-gradient(from 0deg at 50% calc(var(--h) * .5 + 1px), var(--rim));
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--h) * 0.1), 95% calc(100% - var(--h) * 0.081), 90% calc(100% - var(--h) * 0.064), 85% calc(100% - var(--h) * 0.049), 80% calc(100% - var(--h) * 0.036), 75% calc(100% - var(--h) * 0.025), 70% calc(100% - var(--h) * 0.016), 65% calc(100% - var(--h) * 0.009), 60% calc(100% - var(--h) * 0.004), 55% calc(100% - var(--h) * 0.001), 50% calc(100% - var(--h) * 0), 45% calc(100% - var(--h) * 0.001), 40% calc(100% - var(--h) * 0.004), 35% calc(100% - var(--h) * 0.009), 30% calc(100% - var(--h) * 0.016), 25% calc(100% - var(--h) * 0.025), 20% calc(100% - var(--h) * 0.036), 15% calc(100% - var(--h) * 0.049), 10% calc(100% - var(--h) * 0.064), 5% calc(100% - var(--h) * 0.081), 0% calc(100% - var(--h) * 0.1)); }
  .gz-glamzy__lid:not(.gz-glamzy__lid--lo)::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #123B22;
    clip-path: polygon(0% calc(100% - var(--h) * 0.1 - max(1.2px, var(--h) * .065)), 5% calc(100% - var(--h) * 0.081 - max(1.2px, var(--h) * .065)), 10% calc(100% - var(--h) * 0.064 - max(1.2px, var(--h) * .065)), 15% calc(100% - var(--h) * 0.049 - max(1.2px, var(--h) * .065)), 20% calc(100% - var(--h) * 0.036 - max(1.2px, var(--h) * .065)), 25% calc(100% - var(--h) * 0.025 - max(1.2px, var(--h) * .065)), 30% calc(100% - var(--h) * 0.016 - max(1.2px, var(--h) * .065)), 35% calc(100% - var(--h) * 0.009 - max(1.2px, var(--h) * .065)), 40% calc(100% - var(--h) * 0.004 - max(1.2px, var(--h) * .065)), 45% calc(100% - var(--h) * 0.001 - max(1.2px, var(--h) * .065)), 50% calc(100% - var(--h) * 0 - max(1.2px, var(--h) * .065)), 55% calc(100% - var(--h) * 0.001 - max(1.2px, var(--h) * .065)), 60% calc(100% - var(--h) * 0.004 - max(1.2px, var(--h) * .065)), 65% calc(100% - var(--h) * 0.009 - max(1.2px, var(--h) * .065)), 70% calc(100% - var(--h) * 0.016 - max(1.2px, var(--h) * .065)), 75% calc(100% - var(--h) * 0.025 - max(1.2px, var(--h) * .065)), 80% calc(100% - var(--h) * 0.036 - max(1.2px, var(--h) * .065)), 85% calc(100% - var(--h) * 0.049 - max(1.2px, var(--h) * .065)), 90% calc(100% - var(--h) * 0.064 - max(1.2px, var(--h) * .065)), 95% calc(100% - var(--h) * 0.081 - max(1.2px, var(--h) * .065)), 100% calc(100% - var(--h) * 0.1 - max(1.2px, var(--h) * .065)), 100% calc(100% - var(--h) * 0.1), 95% calc(100% - var(--h) * 0.081), 90% calc(100% - var(--h) * 0.064), 85% calc(100% - var(--h) * 0.049), 80% calc(100% - var(--h) * 0.036), 75% calc(100% - var(--h) * 0.025), 70% calc(100% - var(--h) * 0.016), 65% calc(100% - var(--h) * 0.009), 60% calc(100% - var(--h) * 0.004), 55% calc(100% - var(--h) * 0.001), 50% calc(100% - var(--h) * 0), 45% calc(100% - var(--h) * 0.001), 40% calc(100% - var(--h) * 0.004), 35% calc(100% - var(--h) * 0.009), 30% calc(100% - var(--h) * 0.016), 25% calc(100% - var(--h) * 0.025), 20% calc(100% - var(--h) * 0.036), 15% calc(100% - var(--h) * 0.049), 10% calc(100% - var(--h) * 0.064), 5% calc(100% - var(--h) * 0.081), 0% calc(100% - var(--h) * 0.1)); }
  .gz-glamzy__lid--lo { top: calc(var(--h) * .52 + 1px); bottom: 0; transform-origin: 50% 100%;
    background: radial-gradient(circle 10.92cqw at 50% calc(var(--h) * -.145), var(--lid-hi) 0%, var(--lid-0) 85%), conic-gradient(from 0deg at 50% calc(var(--h) * -.02), var(--rim));
    clip-path: polygon(0% calc(var(--h) * 0), 5% calc(var(--h) * 0.019), 10% calc(var(--h) * 0.036), 15% calc(var(--h) * 0.051), 20% calc(var(--h) * 0.064), 25% calc(var(--h) * 0.075), 30% calc(var(--h) * 0.084), 35% calc(var(--h) * 0.091), 40% calc(var(--h) * 0.096), 45% calc(var(--h) * 0.099), 50% calc(var(--h) * 0.1), 55% calc(var(--h) * 0.099), 60% calc(var(--h) * 0.096), 65% calc(var(--h) * 0.091), 70% calc(var(--h) * 0.084), 75% calc(var(--h) * 0.075), 80% calc(var(--h) * 0.064), 85% calc(var(--h) * 0.051), 90% calc(var(--h) * 0.036), 95% calc(var(--h) * 0.019), 100% calc(var(--h) * 0), 100% 100%, 0 100%); }
}
/* Mascottes des autres sections (study-playora.js, section 11) : visibles
   par défaut ; masquées seulement par le script, hors écran, en attente de
   leur entrée. Jamais à l'impression ni en mouvement réduit. */
.gz-page .gz-glamzy-armed { opacity: 0; }
@media print { .gz-page .gz-glamzy-armed { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .gz-page .gz-glamzy-armed { opacity: 1; } }
/* GPU seulement pendant un mouvement (classe posée puis retirée par le JS). */
.gz-hero__glamzy.is-moving > .gz-glamzy__whole,
.gz-hero__glamzy.is-moving .gz-glamzy__sway, .gz-hero__glamzy.is-moving .gz-glamzy__cap,
.gz-hero__glamzy.is-moving .gz-glamzy__arm, .gz-hero__glamzy.is-moving .gz-glamzy__lid { will-change: transform; }
/* 1024-1239 px : le gant droit dépassait de 7 à 9 px du bord de l'écran et
   était rogné par l'overflow-x: clip du hero (plus encore pendant le
   balancement). 12 px de recul, rien ne bouge à partir de 1240 px. */
@media (min-width: 1024px) and (max-width: 1239px) { .gz-hero__glamzy { right: calc(-12% + 12px); } }

/* ══ Hero v5 (2026-10-09) : parcours en 6 étapes, « De ton cours à ton examen » ══
   Spec validée par le fondateur. Le titre nomme le résultat, un bouton principal,
   puis une frise de 6 étapes (.gz-journey) qui pilote le téléphone (6 écrans
   .gz-jp), la photo (cadrage + légende manuscrite), l'étiquette « n/6 » et Glamzy
   (study-playora.js, section 8 bis ; data-step sur la section = source de vérité).
   CETTE FEUILLE EST AUSSI CHARGÉE PAR LES PAGES /app/* : toute règle de ce bloc
   commence par .gz-hero[data-journey] (seule la home porte cet attribut), elle
   l'emporte donc sur les couches plus haut sans les modifier.
   État par défaut du balisage (sans JS, mouvement réduit) : écran 6, six pastilles
   cochées, tout visible. La classe .is-live (posée par le script) active la
   lecture ; [data-frozen] gèle les animations CSS (hors écran, onglet caché, pause).
   Animations : transform et opacity seulement ; hauteur de scène FIXE, donc aucun
   décalage de mise en page quand un écran change. */
.gz-hero[data-journey] { padding-block: clamp(18px, 3vh, 36px) clamp(24px, 4vh, 44px); }
.gz-hero[data-journey] .gz-hero__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "scene" "rail"; gap: 20px; align-items: start; min-height: 0; }
.gz-hero[data-journey] .gz-hero__copy { grid-area: copy; display: grid; gap: 14px; justify-items: start; min-width: 0; }
.gz-hero[data-journey] .gz-hero__copy > * { grid-column: auto; }
.gz-hero[data-journey] .gz-tag { font-size: 11px; letter-spacing: .03em; padding: 5px 9px; }
.gz-hero[data-journey] .gz-hero__title--v3 { font-size: clamp(2.5rem, 11vw, 3rem); line-height: .98; max-width: 12ch; }
.gz-hero[data-journey] .gz-hero__title--v3 .gz-hl { white-space: normal; display: inline; padding: 0 .08em; background: linear-gradient(transparent 58%, var(--gz-lime) 58%, var(--gz-lime) 94%, transparent 94%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.gz-hero[data-journey] .gz-hero__title--v3 .gz-hl::before,
.gz-hero[data-journey] .gz-hero__title--v3 .gz-hl::after { display: none; }
.gz-hero[data-journey] .gz-lead { font-size: clamp(1.0625rem, .98rem + .35vw, 1.25rem); line-height: 1.45; max-width: 46ch; }
/* CTA : les deux badges des stores, seul appel à l'action (2026-10-09, le fondateur a
   retiré le bouton « Télécharger gratuitement » qui les précédait). Ils gardent leur
   style plein d'origine. */
.gz-hero[data-journey] .gz-hero__get { display: grid; gap: 10px; justify-items: start; width: 100%; padding-top: 4px; }
.gz-hero[data-journey] .gz-hero-stores { display: flex; flex-wrap: wrap; gap: 12px; width: auto; }
/* Désactivé le même jour : styles du bouton principal et des badges « en second plan »
   (contour fin, sans ombre), qui n'ont plus lieu d'être sans le bouton :
.gz-hero[data-journey] .gz-hero__cta { min-height: 56px; padding: 16px 28px; font-size: 1.125rem; }
.gz-hero[data-journey] .gz-hero-stores a.gz-store { min-height: 44px; padding: 6px 12px; gap: 8px; border: 1.5px solid rgba(16, 37, 28, .45); border-radius: 12px; background: transparent; color: var(--gz-ink); box-shadow: none; }
.gz-hero[data-journey] .gz-hero-stores a.gz-store:hover { transform: translateY(-1px); background: var(--gz-paper); box-shadow: none; }
.gz-hero[data-journey] .gz-hero-stores a.gz-store:active { transform: none; }
.gz-hero[data-journey] .gz-hero-stores a.gz-store.is-alt { opacity: .7; box-shadow: none; }
.gz-hero[data-journey] .gz-hero-stores .gz-store svg { width: 20px; height: 20px; }
.gz-hero[data-journey] .gz-hero-stores .gz-store small { font-size: 10px; opacity: .8; }
.gz-hero[data-journey] .gz-hero-stores .gz-store b { font-size: 14px; }
*/
.gz-hero[data-journey] .gz-note { font-size: .875rem; }

/* Scène : téléphone à droite, photo en haut à gauche derrière lui, Glamzy à gauche du
   téléphone (son bras salue vers l'extérieur : plus jamais sur l'écran). Mobile : Glamzy
   perché sur la photo, avec 64 px libres au-dessus de lui pour ses sauts. */
.gz-hero[data-journey] .gz-hero__scene { grid-area: scene; --ph-w: 212px; width: 100%; max-width: 420px; height: calc(var(--ph-w) * 2.1667 + 20px); min-height: 0; margin: 6px auto 0; justify-items: end; align-items: start; }
.gz-hero[data-journey] .gz-phone--hero { width: var(--ph-w); margin: 10px 0 0; --rot: 2deg; transform: rotate(2deg); }
.gz-hero[data-journey] .gz-blob { width: 300px; left: 60%; }
.gz-hero[data-journey] .gz-spark-b { display: none; }
/* Mobile rangé comme l'ordinateur (2026-10-09, demande du fondateur) : photo
   en HAUT à gauche, collée derrière le téléphone ; Glamzy en BAS à gauche.
   Avant : photo en bas (top: 190px, width: 146px, coupée par le bord de
   l'écran) et Glamzy en haut (top: 64px, left: 10px). */
.gz-hero[data-journey] .gz-film { left: 0; top: 4%; width: 160px; aspect-ratio: auto; padding: 7px 7px 0; transform: rotate(-6deg); }
.gz-hero[data-journey] .gz-film__shot { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 3px; background: var(--gz-green-deep); }
.gz-hero[data-journey] .gz-film__shot video,
.gz-hero[data-journey] .gz-film__shot img { transform-origin: 50% 38%; transition: transform 900ms var(--gz-ease-out); }
.gz-hero[data-journey] .gz-film__still { position: absolute; top: 0; left: 0; }
/* Cadrage : serré sur un élève tant qu'on travaille seul (étapes 1 à 4), large quand le groupe arrive. */
.gz-hero[data-journey].is-live:not([data-step="5"]):not([data-step="6"]) .gz-film__shot video { transform: scale(1.45); }
/* Légende : deux lignes au plus, jamais sous le téléphone. Sa largeur (--cap-w) est
   mesurée par le script (partie visible de la bande) ; sans JS, 70 % de la bande. Trop
   étroite (moins de 72 px visibles) : masquée à ce format. */
.gz-hero[data-journey] .gz-film__caps { display: grid; align-items: center; justify-items: start; height: 36px; padding: 0 3px; overflow: hidden; }
.gz-hero[data-journey] .gz-film__caps.is-tight { visibility: hidden; }
.gz-hero[data-journey] .gz-film__cap { grid-area: 1 / 1; max-width: var(--cap-w, 70%); font: 700 15px/.95 var(--gz-font-hand); color: var(--gz-green); text-wrap: balance; opacity: 0; transition: opacity .3s ease .2s; }
.gz-hero[data-journey] .gz-film__cap.is-on { opacity: 1; }
.gz-hero[data-journey] .gz-hero__glamzy { width: 92px; top: auto; right: auto; bottom: -10px; left: 8px; }
/* Étiquette d'étape : un seul post-it, au coin haut droit du téléphone. */
.gz-hero[data-journey] .gz-jtag { --rot: 4deg; z-index: 4; top: -4px; right: -6px; bottom: auto; left: auto; max-width: 172px; padding: 7px 10px; background: var(--gz-sun); font: 800 12.5px/1.15 var(--gz-font-body); }
.gz-hero[data-journey] .gz-jtag__n { flex: none; font: 500 12px/1 var(--gz-font-mono); }
.gz-hero[data-journey] .gz-jtag__labels { display: grid; }
.gz-hero[data-journey] .gz-jtag__l { grid-area: 1 / 1; align-self: center; opacity: 0; visibility: hidden; }
.gz-hero[data-journey] .gz-jtag__l.is-on { opacity: 1; visibility: visible; }

/* Frise des 6 étapes. Mobile : liste verticale sous le téléphone. */
.gz-hero[data-journey] .gz-journey { grid-area: rail; position: relative; min-width: 0; }
.gz-hero[data-journey] .gz-journey__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.gz-hero[data-journey] .gz-journey__step { position: relative; min-width: 0; }
.gz-hero[data-journey] .gz-journey__btn { -webkit-appearance: none; appearance: none; display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-items: start; width: 100%; margin: 0; padding: 8px 46px 8px 0; border: 0; border-radius: 10px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.gz-hero[data-journey] .gz-journey__btn:disabled { cursor: default; color: inherit; }
.gz-hero[data-journey] .gz-journey__node { grid-row: 1 / span 2; position: relative; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; border: 2px solid var(--gz-ink); border-radius: 50%; background: var(--gz-paper); color: var(--gz-ink); font: 500 13px/1 var(--gz-font-mono); transition: transform 200ms var(--gz-ease-out), background-color 200ms; }
.gz-hero[data-journey] .gz-journey__node i { font-style: normal; }
.gz-hero[data-journey] .gz-journey__node svg { display: none; width: 16px; height: 16px; margin: 0; color: var(--gz-cream); }
.gz-hero[data-journey] .gz-journey__label { padding-top: 5px; font: 800 15px/1.25 var(--gz-font-body); color: var(--gz-ink-2); }
.gz-hero[data-journey] .gz-journey__text { grid-column: 2; font: 600 13.5px/1.35 var(--gz-font-body); color: var(--gz-ink-2); }
.gz-hero[data-journey] .gz-journey__step.is-done .gz-journey__node { background: var(--gz-green); }
.gz-hero[data-journey] .gz-journey__step.is-done .gz-journey__node i { display: none; }
.gz-hero[data-journey] .gz-journey__step.is-done .gz-journey__node svg { display: block; }
.gz-hero[data-journey] .gz-journey__step.is-on .gz-journey__node { background: var(--gz-lime); box-shadow: 2px 3px 0 var(--gz-ink); }
.gz-hero[data-journey] .gz-journey__step.is-on .gz-journey__node i { display: block; }
.gz-hero[data-journey] .gz-journey__step.is-on .gz-journey__node svg { display: none; }
.gz-hero[data-journey] .gz-journey__step.is-on .gz-journey__label,
.gz-hero[data-journey] .gz-journey__step.is-done .gz-journey__label { color: var(--gz-ink); }
.gz-hero[data-journey] .gz-journey__btn:not(:disabled):hover .gz-journey__node { transform: translateY(-2px); }
/* Trait de liaison : pointillé, plein une fois l'étape passée ; celui de l'étape en cours se
   remplit pendant sa durée (--j-ms, posée par le script). */
.gz-hero[data-journey] .gz-journey__bar { position: absolute; left: 14px; top: 40px; bottom: -6px; width: 2px; background: repeating-linear-gradient(180deg, rgba(16, 37, 28, .35) 0 5px, transparent 5px 9px); pointer-events: none; }
.gz-hero[data-journey] .gz-journey__step:last-child .gz-journey__bar { display: none; }
.gz-hero[data-journey] .gz-journey__bar::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: var(--gz-green); transform: scale(0); transform-origin: 0 0; }
.gz-hero[data-journey] .gz-journey__step.is-done .gz-journey__bar::after { transform: none; }
.gz-hero[data-journey] .gz-journey__step.is-on .gz-journey__bar::after { transform: scale(0); }
.gz-hero[data-journey].is-live .gz-journey__step.is-on .gz-journey__bar::after { animation: gz-j-fill-y var(--j-ms, 3400ms) linear both; }
.gz-hero[data-journey][data-play="paused"] .gz-journey__bar::after,
.gz-hero[data-journey][data-frozen] .gz-journey__bar::after { animation-play-state: paused; }
/* Étiquette : pas de flottement en boucle (règle .gz-postit), seulement un rebond quand l'étape change. */
.gz-hero[data-journey] .gz-jtag { animation: none; }
@media (prefers-reduced-motion: no-preference) {
  .gz-hero[data-journey] .gz-jtag.is-ping { animation: gz-ping 600ms var(--gz-ease-spring); }
}
.gz-hero[data-journey] .gz-film__still { width: 100%; height: 100%; }
@keyframes gz-j-fill-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes gz-j-fill-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.gz-hero[data-journey] .gz-journey__pause { position: absolute; top: 4px; right: 0; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 2px solid var(--gz-ink); border-radius: 50%; background: var(--gz-paper); color: var(--gz-ink); cursor: pointer; box-shadow: var(--gz-shadow-sm); transition: transform 150ms var(--gz-ease-out); }
.gz-hero[data-journey] .gz-journey__pause[hidden] { display: none; }
.gz-hero[data-journey] .gz-journey__pause:active { transform: translate(2px, 3px); box-shadow: none; }
.gz-hero[data-journey] .gz-journey__pause::before { content: ""; position: absolute; top: -4px; right: -4px; bottom: -4px; left: -4px; }
.gz-hero[data-journey] .gz-journey__ico--play { display: none; }
.gz-hero[data-journey] .gz-journey__pause[aria-pressed="true"] .gz-journey__ico--play { display: block; }
.gz-hero[data-journey] .gz-journey__pause[aria-pressed="true"] .gz-journey__ico--pause { display: none; }

@media (min-width: 700px) {
  .gz-hero[data-journey] .gz-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(318px, 46%); grid-template-areas: "copy scene" "rail rail"; column-gap: 36px; row-gap: 22px; }
  .gz-hero[data-journey] .gz-hero__copy { align-self: center; gap: 16px; }
  .gz-hero[data-journey] .gz-tag { font-size: var(--gz-fs-label); letter-spacing: .08em; padding: 6px 12px; }
  .gz-hero[data-journey] .gz-hero__title--v3 { font-size: clamp(2.6rem, 4.6vw, 4.25rem); max-width: 11ch; }
  .gz-hero[data-journey] .gz-hero__scene { --ph-w: 200px; grid-area: scene; align-self: start; max-width: none; margin: 0; }
  .gz-hero[data-journey] .gz-phone--hero { margin: 10px 0 0; --rot: 3deg; transform: rotate(3deg); }
  .gz-hero[data-journey] .gz-blob { width: min(430px, 100%); }
  .gz-hero[data-journey] .gz-film { top: 4%; left: 0; width: clamp(124px, calc(var(--ph-w) * .8), 250px); padding: 8px 8px 0; }
  .gz-hero[data-journey] .gz-film__caps { height: 40px; }
  .gz-hero[data-journey] .gz-film__cap { font-size: 18px; }
  .gz-hero[data-journey] .gz-hero__glamzy { width: clamp(96px, calc(var(--ph-w) * .5), 160px); top: auto; bottom: -10px; left: 2px; }
  .gz-hero[data-journey] .gz-jtag { top: 0; right: -10px; max-width: 220px; padding: 8px 12px; font-size: 13.5px; }
  .gz-hero[data-journey] .gz-journey__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 22px; }
  .gz-hero[data-journey] .gz-journey__btn { padding: 8px 0; }
  .gz-hero[data-journey] .gz-journey__bar { display: none; }
  .gz-hero[data-journey] .gz-journey__pause { top: -46px; }
}
@media (min-width: 900px) {
  .gz-hero[data-journey] .gz-hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); column-gap: 48px; }
  /* Le téléphone suit la HAUTEUR de l'écran : promesse, bouton, scène et frise tiennent au-dessus de la ligne de flottaison. */
  .gz-hero[data-journey] .gz-hero__scene { --ph-w: clamp(212px, 23vw, 300px); }
  .gz-hero[data-journey] .gz-phone--hero { margin-right: 3%; }
  .gz-hero[data-journey] .gz-hero__glamzy { left: -4px; }
  .gz-hero[data-journey] .gz-journey__list { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 18px; }
  .gz-hero[data-journey] .gz-journey__btn { grid-template-columns: minmax(0, 1fr); row-gap: 4px; padding: 0; }
  .gz-hero[data-journey] .gz-journey__node { grid-row: auto; margin-bottom: 4px; }
  .gz-hero[data-journey] .gz-journey__label { padding-top: 0; font-size: 14.5px; }
  .gz-hero[data-journey] .gz-journey__text { grid-column: auto; font-size: 13px; }
  .gz-hero[data-journey] .gz-journey__step:last-child .gz-journey__btn { padding-right: 44px; }
  .gz-hero[data-journey] .gz-journey__bar { display: block; left: 36px; right: -12px; top: 14px; bottom: auto; width: auto; height: 2px; background: repeating-linear-gradient(90deg, rgba(16, 37, 28, .35) 0 5px, transparent 5px 9px); }
  .gz-hero[data-journey].is-live .gz-journey__step.is-on .gz-journey__bar::after { animation-name: gz-j-fill-x; }
  .gz-hero[data-journey] .gz-journey__pause { top: -4px; width: 36px; height: 36px; }
}
/* Téléphone et tablette : les deux badges en deux colonnes égales, sur toute la largeur (comme avant la v5). */
@media (max-width: 899px) { .gz-hero[data-journey] .gz-hero-stores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; } }
/* Tablette (700-899) : la photo est étroite, légende un cran plus petite. */
@media (min-width: 700px) and (max-width: 899px) { .gz-hero[data-journey] .gz-film__cap { font-size: 15px; } }
/* Le téléphone suit la hauteur de l'écran (après la règle ≥ 900 ci-dessus, qui sert de repli sans svh). */
@media (min-width: 900px) {
  @supports (height: 100svh) {
    .gz-hero[data-journey] .gz-hero__scene { --ph-w: clamp(212px, min(23vw, calc((100svh - 318px) * .4615)), 300px); }
  }
}

/* ── Les 6 écrans du téléphone. Même système que .gz-sp : 1em = 1/25,5 de la largeur de
   l'écran. Textes repris des démos des pages de fonctionnalités, rien d'inventé.
   Un écran = .gz-jp ; ses éléments [data-b="1|2|3"] se révèlent aux 3 temps de l'étape
   (classes b1, b2, b3 posées par le script). Hors lecture, tout est déjà visible. */
.gz-hero[data-journey] .gz-jp { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; background: var(--sp-bg); opacity: 0; visibility: hidden; }
.gz-hero[data-journey] .gz-jp.is-on { opacity: 1; visibility: visible; }
.gz-hero[data-journey].is-live .gz-jp { transition: opacity .28s ease, visibility 0s linear .28s; }
.gz-hero[data-journey].is-live .gz-jp.is-on { transition: none; animation: gz-j-in .36s var(--gz-ease-out) both; }
@keyframes gz-j-in { from { opacity: 0; transform: translateX(6%); } to { opacity: 1; transform: none; } }
.gz-hero[data-journey].is-live .gz-jp [data-b] { opacity: 0; transform: translateY(.9em); transition: opacity .3s ease, transform .4s var(--gz-ease-out); transition-delay: calc(var(--k, 0) * 90ms); }
.gz-hero[data-journey].is-live .gz-jp.b1 [data-b="1"],
.gz-hero[data-journey].is-live .gz-jp.b2 [data-b="2"],
.gz-hero[data-journey].is-live .gz-jp.b3 [data-b="3"] { opacity: 1; transform: none; }
.gz-hero[data-journey] .gz-jp__top { flex: none; display: flex; align-items: center; gap: .9em; padding: max(3.9em, 40px) 1.3em 1em; background: #fff; box-shadow: 0 1px 0 rgba(15, 23, 42, .06); }
.gz-hero[data-journey] .gz-jp__ttl { flex: 1; min-width: 0; display: grid; gap: .15em; }
.gz-hero[data-journey] .gz-jp__ttl b { font-size: 1.6em; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gz-hero[data-journey] .gz-jp__ttl small { font-size: 1.05em; font-weight: 800; color: var(--sp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gz-hero[data-journey] .gz-jp__main { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 1.1em; padding: 1.4em 1.3em 1.6em; }
.gz-hero[data-journey] .gz-jp__main > * { flex: none; }
.gz-hero[data-journey] .gz-jp p { margin: 0; }
.gz-hero[data-journey] .gz-jcard { background: #fff; border-radius: 1.5em; box-shadow: 0 1px 0 rgba(15, 23, 42, .02), 0 4px 14px rgba(15, 23, 42, .05); }
.gz-hero[data-journey] .gz-jlbl { font-size: .98em; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--sp-deep); }
/* Écran 1 : enregistrement en cours */
.gz-hero[data-journey] .gz-j1__live { flex: none; display: inline-flex; align-items: center; gap: .4em; padding: .45em .8em; border: 1px solid #FECACA; border-radius: 99px; background: #FEF2F2; color: #B91C1C; font-size: 1em; font-weight: 800; }
.gz-hero[data-journey] .gz-j1__live i { width: .6em; height: .6em; border-radius: 50%; background: #EF4444; }
.gz-hero[data-journey] .gz-j1__cases { display: flex; gap: .5em; }
.gz-hero[data-journey] .gz-j1__cases span { padding: .45em .9em; border: 1px solid #E5E7EB; border-radius: 99px; background: #fff; color: #374151; font-size: 1.05em; font-weight: 800; white-space: nowrap; }
.gz-hero[data-journey] .gz-j1__cases .is-on { border-color: var(--sp-green); background: var(--sp-tint); color: var(--sp-dark); }
.gz-hero[data-journey] .gz-j1__clock { display: grid; justify-items: center; gap: .2em; margin-top: .9em; }
.gz-hero[data-journey] .gz-j1__clock b { font: 500 5em/1 var(--gz-font-mono); letter-spacing: -.02em; color: var(--sp-ink); }
.gz-hero[data-journey] .gz-j1__clock small { font-size: 1.05em; font-weight: 800; color: var(--sp-muted); }
.gz-hero[data-journey] .gz-j1__wave { display: flex; align-items: center; gap: .3em; height: 9em; padding: 0 1em; }
.gz-hero[data-journey] .gz-j1__wave i { flex: 1; height: var(--h); border-radius: 99px; background: var(--sp-green); }
.gz-hero[data-journey].is-live .gz-jp--1.is-on .gz-j1__wave i { animation: gz-j-wave .9s ease-in-out calc(var(--i) * -.17s) infinite alternate; }
.gz-hero[data-journey].is-live .gz-jp--1.b2 .gz-j1__wave i,
.gz-hero[data-journey][data-frozen] .gz-j1__wave i { animation-play-state: paused; }
@keyframes gz-j-wave { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
.gz-hero[data-journey] .gz-j1__lock { display: flex; align-items: center; justify-content: center; gap: .5em; font-size: 1.05em; font-weight: 800; line-height: 1.25; color: var(--sp-muted); text-align: center; }
.gz-hero[data-journey] .gz-j1__lock svg { flex: none; width: 1.3em; height: 1.3em; color: var(--sp-deep); }
.gz-hero[data-journey] .gz-j1__foot { margin-top: auto; display: grid; justify-items: center; gap: 1.1em; }
.gz-hero[data-journey] .gz-j1__done { display: inline-flex; align-items: center; gap: .5em; max-width: 100%; padding: .7em 1.1em; border-radius: 99px; background: var(--sp-ink); color: #fff; font-size: 1.1em; font-weight: 800; }
.gz-hero[data-journey] .gz-j1__done svg { flex: none; width: 1.2em; height: 1.2em; color: #6EE7B7; }
.gz-hero[data-journey] .gz-j1__stop { display: grid; place-items: center; width: 6.2em; height: 6.2em; border-radius: 50%; background: #EF4444; box-shadow: 0 .5em 0 #B91C1C; transition: transform .14s ease-out; }
.gz-hero[data-journey] .gz-j1__stop i { width: 2em; height: 2em; border-radius: .5em; background: #fff; }
.gz-hero[data-journey].is-live .gz-jp--1.b2:not(.b3) .gz-j1__stop { transform: scale(.9); }
/* Écran 2 : la méthode, puis la résolution étape par étape */
.gz-hero[data-journey] .gz-j2__card { display: grid; gap: .4em; padding: 1.1em 1.2em; }
.gz-hero[data-journey] .gz-j2__card p { font-size: 1.2em; font-weight: 700; line-height: 1.35; }
.gz-hero[data-journey] .gz-j2__eq { align-self: center; padding: .45em 1.1em; border-radius: 1em; background: var(--sp-ink); color: #fff; font: 500 1.9em/1.2 var(--gz-font-mono); }
.gz-hero[data-journey] .gz-j2__step { display: grid; grid-template-columns: 2.2em minmax(0, 1fr); column-gap: .8em; row-gap: .25em; align-items: start; padding: .9em 1em; }
.gz-hero[data-journey] .gz-j2__step i { grid-row: 1 / span 2; display: grid; place-items: center; width: 2.1em; height: 2.1em; border-radius: 50%; background: var(--sp-tint); color: var(--sp-deep); font-size: 1.05em; font-style: normal; font-weight: 800; }
.gz-hero[data-journey] .gz-j2__step span { font-size: 1.12em; font-weight: 700; line-height: 1.3; }
.gz-hero[data-journey] .gz-j2__step b { font: 500 1.35em/1.2 var(--gz-font-mono); color: var(--sp-deep); }
.gz-hero[data-journey] .gz-j2__final { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: .9em 1.1em; border-radius: 1.3em; background: var(--sp-deep); color: #fff; }
.gz-hero[data-journey] .gz-j2__final small { font-size: 1.05em; font-weight: 800; }
.gz-hero[data-journey] .gz-j2__final b { font: 500 1.5em/1 var(--gz-font-mono); }
/* Écran 3 : le plan d'examen se construit, chapitre par chapitre (aucun compte à rebours) */
.gz-hero[data-journey] .gz-j3__tree { list-style: none; margin: 0; padding: 0; display: grid; gap: .85em; }
.gz-hero[data-journey] .gz-j3__tree li { display: flex; align-items: center; gap: .9em; padding: .85em 1em; }
.gz-hero[data-journey] .gz-j3__tree li > i { flex: none; display: grid; place-items: center; width: 2.5em; height: 2.5em; border: 2px solid #A7F3D0; border-radius: 50%; background: var(--sp-tint); color: var(--sp-deep); font-size: 1em; font-style: normal; font-weight: 800; }
.gz-hero[data-journey] .gz-j3__tree li > i svg { width: 1.3em; height: 1.3em; }
.gz-hero[data-journey] .gz-j3__tree li b { flex: 1; min-width: 0; font-size: 1.25em; font-weight: 800; line-height: 1.2; }
.gz-hero[data-journey] .gz-j3__tree li small { flex: none; padding: .35em .7em; border-radius: 99px; background: var(--sp-light); color: var(--sp-gray); font-size: .95em; font-weight: 800; }
.gz-hero[data-journey] .gz-j3__tree li.is-mock { background: #FEF3C7; }
.gz-hero[data-journey] .gz-j3__tree li.is-mock > i { border-color: #F59E0B; background: #FCD34D; color: #7C2D12; }
.gz-hero[data-journey] .gz-j3__start { margin-top: auto; display: grid; place-items: center; padding: .95em; border-radius: 99px; background: var(--sp-green); color: #fff; font-size: 1.3em; font-weight: 800; box-shadow: 0 4px 0 var(--sp-deep); }
/* Écran 4 : une fiche de révision (QCM), corrigée aussitôt */
.gz-hero[data-journey] .gz-j4__deck { position: relative; flex: 1 1 auto; min-height: 0; margin-top: .4em; }
.gz-hero[data-journey] .gz-j4__card { position: absolute; top: 0; right: 0; left: 0; min-height: 27em; border-radius: 1.8em; background: #fff; box-shadow: 0 1px 0 rgba(15, 23, 42, .03), 0 8px 22px rgba(15, 23, 42, .1); transition: transform .5s var(--gz-ease-out), opacity .4s ease; }
.gz-hero[data-journey] .gz-j4__card--c { background: #D1FAE5; transform: translateY(2.4em) rotate(4deg) scale(.93); box-shadow: none; }
.gz-hero[data-journey] .gz-j4__card--b { display: grid; align-content: start; gap: .9em; padding: 1.6em; background: #ECFDF5; transform: translateY(1.2em) rotate(-3deg) scale(.97); }
.gz-hero[data-journey] .gz-j4__card--b i { height: .9em; border-radius: 99px; background: #A7F3D0; }
.gz-hero[data-journey] .gz-j4__card--b i:nth-child(1) { width: 34%; }
.gz-hero[data-journey] .gz-j4__card--b i:nth-child(3) { width: 72%; }
.gz-hero[data-journey] .gz-j4__card--a { display: grid; align-content: start; gap: .9em; padding: 1.4em 1.3em 1.5em; }
.gz-hero[data-journey] .gz-j4__mode { justify-self: start; padding: .35em .8em; border-radius: 99px; background: var(--sp-tint); color: var(--sp-deep); font-size: 1em; font-weight: 800; }
.gz-hero[data-journey] .gz-j4__q { font-size: 1.5em; font-weight: 800; line-height: 1.25; }
.gz-hero[data-journey] .gz-j4__opts { list-style: none; margin: 0; padding: 0; display: grid; gap: .6em; }
.gz-hero[data-journey] .gz-j4__opts li { display: flex; align-items: center; gap: .8em; padding: .75em .9em; border: 1.5px solid #E5E7EB; border-radius: 1.1em; font: 500 1.25em/1.2 var(--gz-font-mono); transition: background-color .2s, border-color .2s; }
.gz-hero[data-journey] .gz-j4__opts em { flex: none; display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: .6em; background: var(--sp-light); color: var(--sp-gray); font: 800 .85em/1 var(--gz-font-body); font-style: normal; transition: background-color .2s, color .2s; }
.gz-hero[data-journey] .gz-j4__opts li.is-right { border-color: var(--sp-green); background: var(--sp-tint); color: var(--sp-dark); }
.gz-hero[data-journey] .gz-j4__opts li.is-right em { background: var(--sp-green); color: #fff; }
.gz-hero[data-journey].is-live .gz-jp--4:not(.b2) .gz-j4__opts li.is-right { border-color: #E5E7EB; background: transparent; color: inherit; }
.gz-hero[data-journey].is-live .gz-jp--4:not(.b2) .gz-j4__opts li.is-right em { background: var(--sp-light); color: var(--sp-gray); }
.gz-hero[data-journey] .gz-j4__ok { justify-self: start; display: inline-flex; align-items: center; gap: .4em; padding: .5em .9em; border-radius: 99px; background: var(--sp-deep); color: #fff; font-size: 1.05em; font-weight: 800; }
.gz-hero[data-journey] .gz-j4__ok svg { width: 1.1em; height: 1.1em; }
/* Temps 3 : le paquet s'ouvre en éventail derrière la fiche réussie (avant : la fiche
   partait à droite et laissait une carte vide à l'écran). */
.gz-hero[data-journey].is-live .gz-jp--4.b3 .gz-j4__card--b { transform: translate(-7%, .6em) rotate(-7deg) scale(.97); }
.gz-hero[data-journey].is-live .gz-jp--4.b3 .gz-j4__card--c { transform: translate(8%, 1.4em) rotate(8deg) scale(.94); }
/* Écran 5 : le Space (balisage d'origine du hero). Au temps 3, onglet Défis : je passe 1er. */
.gz-hero[data-journey].is-live .gz-jp--5.b3 .gz-sp__tab[data-tab="feed"] { color: var(--sp-muted); }
.gz-hero[data-journey].is-live .gz-jp--5.b3 .gz-sp__tab[data-tab="challenges"] { color: var(--sp-ink); }
.gz-hero[data-journey].is-live .gz-jp--5.b3 .gz-sp__tab[data-tab="feed"]::after { transform: scaleX(0); }
.gz-hero[data-journey].is-live .gz-jp--5.b3 .gz-sp__tab[data-tab="challenges"]::after { transform: scaleX(1); }
.gz-hero[data-journey].is-live .gz-jp--5.b3 .gz-sp__feed { opacity: 0; transform: translateX(-14%); }
/* Fil → Défis l'un APRÈS l'autre (le fondu croisé de .3 s laissait les deux vues lisibles
   ensemble, vu par l'orchestrateur à 2,6 s) : le Fil part en 140 ms, puis les Défis arrivent. */
.gz-hero[data-journey].is-live .gz-jp--5 .gz-sp__feed { transition: opacity .14s ease, transform .2s var(--gz-ease-out); }
.gz-hero[data-journey].is-live .gz-jp--5.b3 .gz-sp__rank { transition: opacity .22s ease .14s, transform .3s var(--gz-ease-out) .14s; }
.gz-hero[data-journey].is-live .gz-jp--5.b3 .gz-sp__rank { opacity: 1; transform: none; visibility: visible; }
.gz-hero[data-journey].is-live .gz-jp--5.b3 .gz-sp__row--me { animation: gz-j-rank-up 600ms var(--gz-ease-out) 650ms both; }
.gz-hero[data-journey].is-live .gz-jp--5.b3 .gz-sp__row--lea { animation: gz-j-rank-down 600ms var(--gz-ease-out) 650ms both; }
.gz-hero[data-journey].is-live .gz-jp--5.b3 .gz-sp__row--me em,
.gz-hero[data-journey].is-live .gz-jp--5.b3 .gz-sp__row--lea em { animation: gz-j-fade 250ms ease 1200ms both; }
@keyframes gz-j-rank-up { from { transform: translateY(4em); } to { transform: translateY(0); } }
@keyframes gz-j-rank-down { from { transform: translateY(0); } to { transform: translateY(4em); } }
@keyframes gz-j-fade { from { opacity: 0; } to { opacity: 1; } }
/* Écran 6 : prêt pour l'examen (plan terminé, examen blanc validé) */
.gz-hero[data-journey] .gz-j6__hero { position: relative; display: grid; justify-items: center; gap: 1.5em; padding: 1.4em 0 .2em; }
.gz-hero[data-journey] .gz-j6__ring { display: grid; place-items: center; width: 8.2em; height: 8.2em; border-radius: 50%; background: var(--sp-green); color: #fff; box-shadow: 0 0 0 .7em #D1FAE5; }
.gz-hero[data-journey] .gz-j6__ring svg { width: 4.2em; height: 4.2em; }
.gz-hero[data-journey].is-live .gz-jp--6 .gz-j6__ring[data-b] { transform: scale(.4); }
.gz-hero[data-journey].is-live .gz-jp--6.b1 .gz-j6__ring[data-b] { transform: none; }
.gz-hero[data-journey] .gz-j6__ttl { font-family: var(--gz-font-display); font-variation-settings: "wdth" 112; font-size: 2.6em; font-weight: 700; letter-spacing: -.02em; line-height: 1; color: var(--sp-dark); text-align: center; }
.gz-hero[data-journey] .gz-j6__spark { position: absolute; line-height: 0; color: var(--gz-sun); }
.gz-hero[data-journey] .gz-j6__spark svg { width: 2.2em; height: 2.2em; }
.gz-hero[data-journey] .gz-j6__spark--a { top: .6em; left: 12%; }
.gz-hero[data-journey] .gz-j6__spark--b { top: 3.4em; right: 10%; color: var(--gz-lime); }
.gz-hero[data-journey] .gz-j6__spark--c { top: 8em; left: 20%; color: var(--gz-lime); }
.gz-hero[data-journey] .gz-j6__spark--c svg { width: 1.5em; height: 1.5em; }
.gz-hero[data-journey] .gz-j6__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .5em; }
.gz-hero[data-journey] .gz-j6__chips li { display: inline-flex; align-items: center; gap: .35em; padding: .45em .8em; border: 1px solid #A7F3D0; border-radius: 99px; background: #fff; color: var(--sp-dark); font-size: 1.05em; font-weight: 800; }
.gz-hero[data-journey] .gz-j6__chips svg { width: 1em; height: 1em; color: var(--sp-green); }
.gz-hero[data-journey] .gz-j6__card { margin-top: auto; display: grid; gap: .45em; padding: 1.1em 1.2em; }
.gz-hero[data-journey] .gz-j6__card b { font-size: 1.4em; font-weight: 800; line-height: 1.15; }
.gz-hero[data-journey] .gz-j6__row { display: flex; align-items: center; flex-wrap: wrap; gap: .3em .7em; font-size: 1.08em; font-weight: 800; color: var(--sp-gray); }
.gz-hero[data-journey] .gz-j6__row em { font: 500 1.5em/1 var(--gz-font-mono); color: var(--sp-deep); font-style: normal; }
.gz-hero[data-journey] .gz-j6__row i { margin-left: auto; padding: .3em .7em; border-radius: 99px; background: #FEF3C7; color: #92400E; font-style: normal; white-space: nowrap; }