/* Glamzn Study — public product landing
   Visual direction: a calm study dispatch. The route is the signature:
   Glamzn turns an uncertain deadline into a sequence of next actions. */

:root {
  --app-paper: #f7f8f3;
  --app-surface: #ffffff;
  --app-ink: #10251c;
  --app-muted: #5e7067;
  --app-line: #dce5dc;
  --app-green: #06966b;
  --app-green-dark: #07583f;
  --app-green-soft: #e5f7ed;
  --app-lime: #d8fa79;
  --app-lilac: #e8e3ff;
  --app-purple: #6755dc;
  --app-sand: #fbf4df;
  --app-orange: #ef9257;
  --app-display: "Bricolage Grotesque", "Arial Rounded MT Bold", sans-serif;
  --app-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --app-mono: "DM Mono", ui-monospace, monospace;
  --app-max: 1180px;
  --app-gutter: clamp(20px, 4vw, 48px);
  /* Ombres empilées : une ombre unique et large lit comme un flou plaqué. Trois
     couches (contact / diffusion / halo) donnent une vraie profondeur, et elles
     s'adaptent à n'importe quel fond, contrairement à une bordure pleine. */
  --app-shadow: 0 1px 2px rgba(16, 37, 28, .05), 0 8px 16px -6px rgba(16, 37, 28, .07), 0 22px 48px -12px rgba(16, 37, 28, .1);
  --app-shadow-lift: 0 2px 4px rgba(16, 37, 28, .06), 0 12px 24px -8px rgba(16, 37, 28, .1), 0 32px 64px -16px rgba(16, 37, 28, .14);
  /* Courbe unique pour toutes les micro-interactions : décélération exponentielle,
     jamais de rebond. */
  --app-ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body.glamzn-app-page {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  color: var(--app-ink);
  background: var(--app-paper);
  font-family: var(--app-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: rgba(6, 150, 107, 0.18);
}
body.glamzn-app-page * { box-sizing: border-box; }
body.glamzn-app-page a { color: inherit; text-decoration: none; }
body.glamzn-app-page button { font: inherit; }
body.glamzn-app-page ::selection { background: var(--app-lime); color: var(--app-ink); }

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 300;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--app-ink);
  color: #fff;
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

.app-wrap { width: min(var(--app-max), 100%); margin: 0 auto; padding-inline: var(--app-gutter); }
.section { position: relative; padding-block: clamp(76px, 11vw, 148px); }
/* Rythme : les sections claires qui se suivent respirent moins que les bandes
   sombres (qui sont des respirations de la page). Évite le métronome vertical. */
.section.product-gateway { padding-block: clamp(64px, 8vw, 112px); }
.section.problem-band,
.section.proof-section { padding-block: clamp(88px, 12vw, 160px); }

.route-label,
.video-index,
.step-index,
.story-label {
  font-family: var(--app-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* Kicker : réservé aux bandes sombres (problème / preuve / CTA final), où il
   fait partie de la composition lime-sur-encre. Sur les sections claires il
   était répété au-dessus de CHAQUE titre — c'est du décor de gabarit, pas de la
   voix de marque : les spans correspondants sont commentés dans app.blade.php. */
.section-kicker {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  color: var(--app-green-dark);
  font-family: var(--app-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.section-kicker::before { width: 8px; height: 8px; border-radius: 999px; background: var(--app-green); content: ""; }
.section-heading {
  max-width: 760px;
  margin: 0;
  font-family: var(--app-display);
  font-size: clamp(36px, 5.1vw, 68px);
  font-weight: 650;
  line-height: 1;
  /* Plancher typographique : sous -0.04em les lettres du Bricolage se touchent. */
  letter-spacing: -0.04em;
  text-wrap: balance;
}
/* Quand un kicker précède le titre (bandes sombres), il porte l'espacement. */
.section-kicker + .section-heading { margin-top: 18px; }
.section-copy { max-width: 62ch; margin: 24px 0 0; color: var(--app-muted); font-size: 17px; line-height: 1.72; text-wrap: pretty; }

.app-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(220, 229, 220, 0.82);
  background: rgba(247, 248, 243, 0.86);
  backdrop-filter: blur(18px) saturate(1.3);
}
.app-nav-inner { display: flex; min-height: 78px; align-items: center; justify-content: space-between; gap: 20px; }
.brand-lockup { display: inline-flex; align-items: center; gap: 10px; font-family: var(--app-display); font-size: 23px; font-weight: 700; letter-spacing: -0.05em; }
.brand-lockup img { width: 31px; height: 31px; }
.app-nav-links { display: flex; align-items: center; gap: 4px; }
.app-nav-links a { display: inline-flex; min-height: 40px; align-items: center; padding: 9px 11px; border-radius: 10px; color: #405249; font-size: 13px; font-weight: 700; transition: color .2s ease, background .2s ease; }
.app-nav-links a:hover { color: var(--app-ink); background: #edf1eb; }

.button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 9px; border: 1px solid transparent; border-radius: 999px; padding: 12px 19px; font-size: 14px; font-weight: 800; transition: transform .2s var(--app-ease), scale .12s var(--app-ease), box-shadow .2s var(--app-ease), background .2s ease; }
.button:hover { transform: translateY(-2px); }
/* Retour tactile au clic. `scale` est une propriété à part : elle ne se bat pas
   avec le translateY du hover, contrairement à un transform combiné. */
.button:active, .store-link:active { scale: .96; }
/* Focus : l'anneau était violet (--app-purple) sur une marque verte. Il reprend
   la couleur de marque, avec un liseré clair pour rester visible sur fond sombre. */
.button:focus-visible,
.store-link:focus-visible,
.app-nav-links a:focus-visible,
.gateway-card:focus-visible,
.fx-card:focus-visible,
details summary:focus-visible { outline: 3px solid var(--app-green); outline-offset: 3px; border-radius: 14px; }
/* Le primaire portait une ombre pleine « chunky » (0 8px 0) — codes de l'app
   mobile, mais sur le web ça lit jouet. Ombre portée douce, comme la nav. */
.button-primary { color: #fff; background: var(--app-green-dark); box-shadow: 0 6px 16px rgba(7, 88, 63, 0.26); }
.button-primary:hover { background: #064c36; box-shadow: 0 10px 26px rgba(7, 88, 63, 0.34); }
.button:active { transform: translateY(0); }
.button-plain { color: var(--app-ink); border-color: var(--app-line); background: rgba(255,255,255,.72); }
.button-plain:hover { background: #fff; box-shadow: 0 8px 20px rgba(16,37,28,.08); }

.hero { overflow: hidden; padding: clamp(48px, 7vw, 86px) 0 clamp(78px, 10vw, 130px); }
.hero::before { position: absolute; width: min(64vw, 760px); height: min(64vw, 760px); right: -21vw; top: -240px; border-radius: 50%; background: radial-gradient(circle, rgba(216,250,121,.72), rgba(216,250,121,0) 69%); content: ""; pointer-events: none; }
.hero::after { position: absolute; left: -19vw; bottom: -290px; width: min(62vw, 690px); height: min(62vw, 690px); border-radius: 50%; background: radial-gradient(circle, rgba(232,227,255,.95), rgba(232,227,255,0) 67%); content: ""; pointer-events: none; }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .98fr) minmax(390px, .9fr); align-items: center; gap: clamp(44px, 6vw, 92px); }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; border: 1px solid #cfe5d8; border-radius: 999px; padding: 8px 12px 8px 9px; color: var(--app-green-dark); background: rgba(255,255,255,.7); font-size: 12px; font-weight: 800; }
.hero-eyebrow i { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 999px; background: var(--app-lime); color: #183f2d; font-family: var(--app-mono); font-size: 10px; font-style: normal; }
.hero h1 { max-width: 700px; margin: 24px 0 0; font-family: var(--app-display); font-size: clamp(51px, 6.6vw, 88px); font-weight: 650; line-height: .91; letter-spacing: -.042em; text-wrap: balance; }
.hero h1 em { color: var(--app-green); font-style: normal; }
.hero-lead { max-width: 570px; margin: 26px 0 0; color: #506259; font-size: clamp(17px, 1.8vw, 20px); line-height: 1.63; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 31px; }
.hero-note { display: flex; align-items: center; gap: 10px; margin: 25px 0 0; color: #68786f; font-size: 13px; font-weight: 650; }
.hero-note svg { width: 18px; color: var(--app-green); }

.plan-window { position: relative; min-height: 550px; }
.plan-card { position: absolute; border: 1px solid rgba(24,68,47,.12); background: rgba(255,255,255,.88); box-shadow: var(--app-shadow); }
.plan-main { width: min(100%, 430px); right: 0; top: 21px; overflow: hidden; border-radius: 28px; }
.plan-main-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 25px 25px 20px; color: #fff; background: var(--app-ink); }
.plan-main-header small { display: block; color: #b9d2c2; font-family: var(--app-mono); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; }
.plan-main-header strong { display: block; margin-top: 6px; font-family: var(--app-display); font-size: 28px; font-weight: 650; letter-spacing: -.038em; }
.deadline { display: grid; width: 60px; height: 60px; place-items: center; border-radius: 18px; background: var(--app-lime); color: var(--app-ink); font-family: var(--app-display); font-size: 24px; font-weight: 700; letter-spacing: -.04em; }
.plan-main-body { padding: 23px 25px 25px; }
.plan-progress { display: flex; align-items: center; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid var(--app-line); }
.plan-progress span { color: var(--app-muted); font-size: 12px; font-weight: 750; }
.plan-progress b { color: var(--app-green-dark); font-family: var(--app-mono); font-size: 12px; }
.progress-track { position: relative; height: 7px; margin: 12px 0 0; overflow: hidden; border-radius: 99px; background: #e8eee8; }
.progress-track i { display: block; width: 58%; height: 100%; border-radius: inherit; background: var(--app-green); }
.session-list { display: grid; gap: 10px; margin-top: 18px; }
.session-line { display: grid; grid-template-columns: 29px 1fr auto; align-items: center; gap: 10px; min-height: 51px; border-radius: 15px; padding: 8px 10px; }
.session-line.current { background: var(--app-green-soft); }
.session-line .dot { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid #cbd7ce; border-radius: 50%; color: #90a097; font-family: var(--app-mono); font-size: 9px; }
/* Trois états lisibles au premier coup d'œil : fait (vert doux), en cours (vert
   plein), à venir (contour gris). La coche est légèrement plus grande — à 9px,
   un ✓ est un pâté. */
.session-line .dot.is-done { border-color: transparent; background: var(--app-green-soft); color: var(--app-green-dark); font-size: 11px; }
.session-line.current .dot { border-color: var(--app-green); background: var(--app-green); color: #fff; }
.session-line b { display: block; font-size: 13px; letter-spacing: -.02em; }
.session-line span { display: block; margin-top: 3px; color: var(--app-muted); font-size: 11px; }
.session-line time { color: var(--app-green-dark); font-family: var(--app-mono); font-size: 10px; }
.route-orbit { position: absolute; z-index: -1; right: -30px; top: 0; width: 485px; height: 520px; border: 1px dashed rgba(6,150,107,.32); border-radius: 48% 52% 42% 58%; transform: rotate(-13deg); }
.route-marker { position: absolute; display: grid; place-items: center; width: 70px; height: 70px; border-radius: 50%; background: var(--app-purple); color: #fff; box-shadow: 0 14px 30px rgba(103,85,220,.25); font-family: var(--app-display); font-size: 18px; font-weight: 700; }
.route-marker.one { left: 4px; top: 73px; }
.route-marker.two { right: 4px; bottom: 16px; background: var(--app-orange); }
.next-action { left: -40px; bottom: 48px; width: 238px; border-radius: 21px; padding: 16px; }
.next-action small { color: var(--app-green-dark); font-family: var(--app-mono); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; }
.next-action p { margin: 8px 0 0; font-family: var(--app-display); font-size: 19px; font-weight: 650; line-height: 1.02; letter-spacing: -.038em; }

.problem-band { background: var(--app-ink); color: #fff; }
.problem-grid { display: grid; grid-template-columns: .82fr 1.18fr; align-items: end; gap: 50px; }
.problem-band .section-kicker { color: var(--app-lime); }
.problem-band .section-kicker::before { background: var(--app-lime); }
.problem-band .section-heading { color: #fff; }
.problem-band .section-copy { color: #b6c8bd; }
.problem-answer { padding: clamp(27px, 4vw, 48px); border: 1px solid rgba(216,250,121,.35); border-radius: 26px; background: rgba(255,255,255,.05); }
.problem-answer p { margin: 0; font-family: var(--app-display); font-size: clamp(28px, 3.4vw, 47px); font-weight: 600; line-height: 1.02; letter-spacing: -.04em; }
.problem-answer p mark { color: var(--app-lime); background: transparent; }
.problem-answer span { display: block; max-width: 440px; margin-top: 17px; color: #b6c8bd; font-size: 15px; line-height: 1.65; }

.moments-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 54px; }
.moment { min-height: 340px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; border: 1px solid var(--app-line); border-radius: 24px; background: var(--app-surface); padding: 23px; transition: transform .25s ease, box-shadow .25s ease; }
.moment:hover { transform: translateY(-5px); box-shadow: var(--app-shadow); }
.moment:nth-child(2) { background: var(--app-green-soft); }
.moment:nth-child(3) { background: var(--app-sand); }
.moment h3 { max-width: 260px; margin: 15px 0 0; font-family: var(--app-display); font-size: 30px; font-weight: 650; line-height: 1; letter-spacing: -.04em; }
.moment p { max-width: 310px; margin: 13px 0 0; color: var(--app-muted); font-size: 14px; line-height: 1.65; }
/* Rayon concentrique : la carte a un rayon de 24px et l'aperçu est encastré à
   20px de son bord (padding 23 − marge négative 3). Rayon intérieur = 24 − 20 = 4.
   À 17px, la courbe intérieure était plus serrée que celle du parent : les deux
   arrondis ne s'emboîtaient pas, et c'est exactement ce qui fait « bancal ». */
.moment-art { position: relative; min-height: 126px; margin: 25px -3px -3px; border: 1px solid rgba(16,37,28,.1); border-radius: 4px; background: rgba(255,255,255,.76); overflow: hidden; }
.moment-art::before { position: absolute; content: ""; }
.calendar-art::before { inset: 19px; border-radius: 9px; background: repeating-linear-gradient(90deg, transparent 0 31px, #e3ebe4 31px 32px), repeating-linear-gradient(0deg, transparent 0 26px, #e3ebe4 26px 27px); }
.calendar-art::after { position: absolute; top: 47px; left: 33px; width: 76px; height: 27px; border-radius: 7px; background: var(--app-lime); content: ""; }
.chat-art { padding: 17px; }
.chat-art::before { top: 22px; left: 18px; width: 62%; height: 31px; border-radius: 14px 14px 14px 4px; background: var(--app-green); content: ""; }
.chat-art::after { right: 20px; bottom: 20px; width: 48%; height: 28px; border-radius: 14px 14px 4px 14px; background: var(--app-lilac); content: ""; }
.daily-art::before { left: 50%; bottom: -35px; width: 180px; height: 180px; border: 18px solid var(--app-orange); border-radius: 50%; transform: translateX(-50%); content: ""; }
.daily-art::after { position: absolute; top: 23px; left: 22px; color: var(--app-ink); content: "5 min aujourd'hui"; font-family: var(--app-mono); font-size: 11px; letter-spacing: .04em; }

.system-section { background: #ecf1eb; }
.system-head { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: 54px; align-items: end; }
.system-head .section-copy { margin-bottom: 4px; }
.system-list { display: grid; margin-top: 56px; border-top: 1px solid #cdd8ce; }
.system-row { display: grid; grid-template-columns: 80px minmax(0, .8fr) minmax(280px, 1fr); gap: 22px; align-items: center; min-height: 154px; border-bottom: 1px solid #cdd8ce; }
.system-row h3 { margin: 0; font-family: var(--app-display); font-size: clamp(29px, 3vw, 42px); font-weight: 650; letter-spacing: -.04em; }
.system-row p { margin: 0; color: var(--app-muted); font-size: 14px; line-height: 1.67; }
.system-icon { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 17px; color: var(--app-green-dark); background: #fff; font-family: var(--app-mono); font-size: 12px; box-shadow: 0 5px 12px rgba(16,37,28,.05); }

.video-section { overflow: hidden; }
.video-head { display: flex; align-items: end; justify-content: space-between; gap: 30px; }
.video-head .section-copy { max-width: 480px; }
.video-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(256px, 31%); gap: 17px; margin-top: 52px; padding-bottom: 12px; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-color: var(--app-green) transparent; }
.video-card { overflow: hidden; border: 1px solid var(--app-line); border-radius: 23px; background: #fff; }
.video-frame { position: relative; min-height: 350px; display: flex; flex-direction: column; justify-content: space-between; padding: 17px; overflow: hidden; background: #dfe8df; }
video.video-frame { width: 100%; object-fit: cover; padding: 0; }
.video-frame::before { position: absolute; width: 155%; height: 63%; left: -30%; top: 42%; border-radius: 50%; background: var(--frame-accent, var(--app-lime)); content: ""; transform: rotate(-11deg); }
.video-frame::after { position: absolute; z-index: 0; top: 62px; right: -26px; width: 178px; height: 252px; border: 7px solid rgba(16,37,28,.9); border-radius: 28px; background: linear-gradient(155deg, #fff, #dfe9e0); box-shadow: -16px 18px 0 rgba(16,37,28,.08); content: ""; transform: rotate(7deg); }
.video-card:nth-child(2n) .video-frame { --frame-accent: var(--app-lilac); }
.video-card:nth-child(3n) .video-frame { --frame-accent: #ffd9bf; }
.video-overlay { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; }
.video-index { padding: 6px 8px; border-radius: 7px; color: #fff; background: var(--app-ink); }
.video-duration { color: #385045; font-family: var(--app-mono); font-size: 10px; }
.video-play { position: relative; z-index: 2; display: grid; width: 55px; height: 55px; place-items: center; align-self: center; margin-top: 20px; border-radius: 50%; color: #fff; background: var(--app-ink); box-shadow: 0 11px 22px rgba(16,37,28,.18); font-size: 17px; }
.video-caption { position: relative; z-index: 2; max-width: 220px; color: var(--app-ink); font-family: var(--app-display); font-size: 22px; font-weight: 650; line-height: 1; letter-spacing: -.038em; }
.video-card-footer { padding: 16px 17px 18px; }
.video-card-footer strong { display: block; font-size: 14px; letter-spacing: -.02em; }
.video-card-footer p { min-height: 42px; margin: 7px 0 0; color: var(--app-muted); font-size: 12px; line-height: 1.55; }
.video-production-note { margin: 26px 0 0; color: #65776b; font-family: var(--app-mono); font-size: 11px; line-height: 1.65; }
.video-production-note b { color: var(--app-green-dark); }

.proof-section { overflow: hidden; background: var(--app-green-dark); color: #fff; }
.proof-section::before { position: absolute; width: 600px; height: 600px; top: -290px; right: -210px; border: 1px solid rgba(216,250,121,.35); border-radius: 50%; content: ""; }
.proof-grid { position: relative; z-index: 1; display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(38px, 7vw, 100px); align-items: center; }
.proof-section .section-kicker { color: var(--app-lime); }
.proof-section .section-kicker::before { background: var(--app-lime); }
.proof-section .section-heading { color: #fff; }
.proof-section .section-copy { color: #c1d5c6; }
.proof-list { display: grid; gap: 13px; }
.proof-item { display: grid; grid-template-columns: 40px 1fr; gap: 13px; align-items: start; padding: 20px; border: 1px solid rgba(255,255,255,.15); border-radius: 18px; background: rgba(255,255,255,.07); }
.proof-item i { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; color: var(--app-ink); background: var(--app-lime); font-family: var(--app-mono); font-size: 10px; font-style: normal; }
.proof-item b { display: block; font-size: 15px; }
.proof-item span { display: block; margin-top: 5px; color: #c1d5c6; font-size: 13px; line-height: 1.55; }

.faq-layout { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1fr); gap: clamp(42px, 8vw, 116px); align-items: start; }
.faq-layout .section-heading { font-size: clamp(38px, 4.7vw, 61px); }
.faq-list { border-top: 1px solid var(--app-line); }
.faq-list details { border-bottom: 1px solid var(--app-line); padding: 0; }
.faq-list summary { position: relative; cursor: pointer; list-style: none; padding: 22px 38px 22px 0; font-size: 15px; font-weight: 800; letter-spacing: -.02em; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { position: absolute; right: 4px; top: 18px; color: var(--app-green-dark); content: "+"; font-family: var(--app-display); font-size: 26px; font-weight: 500; transition: transform .2s ease; }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p { max-width: 620px; margin: -3px 0 21px; color: var(--app-muted); font-size: 14px; line-height: 1.72; }

.final-cta { padding-top: 0; }
.final-panel { position: relative; overflow: hidden; padding: clamp(34px, 6vw, 70px); border-radius: 31px; color: #fff; background: var(--app-ink); }
.final-panel::before { position: absolute; width: min(55vw, 620px); height: min(55vw, 620px); right: -18%; top: -60%; border: 1px solid rgba(216,250,121,.48); border-radius: 50%; content: ""; }
.final-panel::after { position: absolute; width: 270px; height: 270px; right: 7%; bottom: -162px; border-radius: 50%; background: var(--app-lime); content: ""; }
.final-copy { position: relative; z-index: 1; max-width: 630px; }
.final-copy .section-kicker { color: var(--app-lime); }
.final-copy .section-kicker::before { background: var(--app-lime); }
.final-copy h2 { max-width: 610px; margin: 17px 0 0; font-family: var(--app-display); font-size: clamp(38px, 5.4vw, 70px); font-weight: 650; line-height: .96; letter-spacing: -.042em; }
.final-copy p { max-width: 520px; margin: 21px 0 0; color: #b9cec0; font-size: 16px; line-height: 1.68; }
.stores { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 11px; margin-top: 28px; }
/* Les badges stores flottent sur une vidéo : un simple filet blanc à 25 % s'y
   perd selon la frame. Une ombre portée les décolle du fond quelle que soit
   l'image derrière, et le flou d'arrière-plan garantit la lisibilité du texte
   (même traitement que l'accroche juste au-dessus, pas une décoration). */
.store-link { display: inline-flex; min-height: 52px; align-items: center; gap: 11px; border: 1px solid rgba(255,255,255,.25); border-radius: 15px; padding: 9px 15px; color: #fff; background: rgba(255,255,255,.12); backdrop-filter: blur(10px); box-shadow: 0 1px 2px rgba(0,0,0,.18), 0 8px 20px -6px rgba(0,0,0,.3); transition: background .2s var(--app-ease), transform .2s var(--app-ease), box-shadow .2s var(--app-ease), scale .12s var(--app-ease); }
.store-link:hover { background: rgba(255,255,255,.2); transform: translateY(-2px); box-shadow: 0 2px 4px rgba(0,0,0,.2), 0 14px 30px -8px rgba(0,0,0,.38); }
.store-link svg { width: 21px; height: 21px; }
.store-link span { display: block; font-size: 10px; line-height: 1.1; }
.store-link b { display: block; margin-top: 2px; font-size: 14px; letter-spacing: -.02em; }
.final-legal { position: relative; z-index: 1; margin: 15px 0 0; color: #9cb8a7; font-size: 11px; }

.app-footer { padding: 34px 0 42px; }
.footer-grid { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding-top: 28px; border-top: 1px solid var(--app-line); }
.footer-copy { color: #718178; font-size: 12px; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 15px; color: #52645a; font-size: 12px; font-weight: 700; }
.footer-links a:hover { color: var(--app-green-dark); }

.hero-grid > *, .problem-grid > *, .system-head > *, .system-row > *, .proof-grid > *, .faq-layout > * { min-width: 0; }
.button, .store-link, .app-nav-links a, summary { touch-action: manipulation; }

/* ─────────────────────────────────────────────────────────────────────────────
   Détails de finition
   ───────────────────────────────────────────────────────────────────────────── */

/* Chiffres tabulaires : J-12, 4/7 séances, 9/10, 18/20, +31 %, les durées.
   Sans ça, un « 1 » est plus étroit qu'un « 8 » et les colonnes de chiffres
   dansent d'une carte à l'autre. */
.deadline,
.plan-progress b,
.session-line time,
.session-line .dot,
.video-duration,
.proof-stat b,
.hero-proof b,
.mp-jx,
.fx-corner,
.system-step,
.step-index,
.video-index { font-variant-numeric: tabular-nums; }

/* Orphelins : `pretty` évite le mot seul sur la dernière ligne des paragraphes.
   Les titres utilisent déjà `balance`. */
.hero-lead,
.moment p,
.fx-card p,
.gateway-card p,
.system-row p,
.proof-item span,
.faq-list details p,
.final-copy p,
.problem-answer span { text-wrap: pretty; }

/* Survol des cartes : l'ombre passe de l'ombre de repos à l'ombre « soulevée »
   (mêmes couches, plus diffuses) au lieu d'apparaître d'un coup. */
.moment,
.gateway-card,
.fx-card,
.video-card { transition: transform .25s var(--app-ease), box-shadow .25s var(--app-ease), border-color .22s ease; }
.moment:hover,
.gateway-card:hover,
.fx-card:hover { box-shadow: var(--app-shadow-lift); }

/* Entrées échelonnées : une grille dont les 12 cartes arrivent toutes ensemble
   lit comme un bloc qui clignote. ~60 ms de décalage par carte et l'œil suit la
   lecture. Le délai est porté par la position dans la grille, pas par du JS. */
/* Intro de la section « Découvrir » : titre puis phrase, 90 ms d'écart. */
.gateway-intro > .reveal-armed:nth-child(2) { --stagger: 1.5; }

.moments-grid > .reveal-armed:nth-child(2),
.gateway-grid > .reveal-armed:nth-child(2),
.fx-grid > .reveal-armed:nth-child(2),
.proof-list > .reveal-armed:nth-child(2),
.system-list > .reveal-armed:nth-child(2) { --stagger: 1; }
.moments-grid > .reveal-armed:nth-child(3),
.gateway-grid > .reveal-armed:nth-child(3),
.fx-grid > .reveal-armed:nth-child(3),
.proof-list > .reveal-armed:nth-child(3),
.system-list > .reveal-armed:nth-child(3) { --stagger: 2; }
.fx-grid > .reveal-armed:nth-child(4),
.proof-list > .reveal-armed:nth-child(4),
.system-list > .reveal-armed:nth-child(4) { --stagger: 3; }
/* Au-delà de la 6e carte on plafonne : sinon la dernière tuile de la grille
   attend une demi-seconde et l'entrée traîne. */
.fx-grid > .reveal-armed:nth-child(5) { --stagger: 4; }
.fx-grid > .reveal-armed:nth-child(n + 6) { --stagger: 5; }

/* Reveal au scroll — le contenu est VISIBLE par défaut.
   Avant : `.js .reveal { opacity: 0 }` masquait tout dès que la classe `js` était
   posée, et ne remontait qu'au déclenchement de l'IntersectionObserver. Une erreur
   JS après cette ligne, un rendu headless (screenshot, crawler, impression) et la
   page entière s'affichait blanche. Désormais c'est le JS qui « arme » chaque bloc
   (classe .reveal-armed) juste avant de l'observer : pas de JS, pas de masquage.

   L'entrée est une @keyframes, pas une transition : elle ne joue qu'une fois, et
   surtout elle laisse la propriété `transition` libre pour les états de survol.
   (Avec une transition, `transition: opacity, transform` sur la carte écrasait
   la transition d'ombre du hover — la carte sautait au survol.) */
.js .reveal.reveal-armed { opacity: 0; }
.js .reveal.reveal-armed.is-visible {
  animation: glzReveal .6s var(--app-ease) both;
  animation-delay: calc(var(--stagger, 0) * 60ms);
}
@keyframes glzReveal {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
@media print {
  .js .reveal.reveal-armed { opacity: 1; animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  /* `animation-delay` doit être neutralisé aussi : sans ça, l'entrée du hero
     resterait décalée jusqu'à 760 ms même en mouvement réduit. */
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-delay: 0s !important; }
  /* Pas de glissement, pas de délai : le contenu est simplement là. */
  .js .reveal, .js .reveal.reveal-armed { opacity: 1; transform: none; animation: none; }
}
@media (max-width: 920px) {
  .hero-grid, .problem-grid, .system-head, .proof-grid, .faq-layout { grid-template-columns: 1fr; }
  .hero-copy { max-width: 700px; }
  .plan-window { width: min(570px, 100%); min-height: 490px; margin-inline: auto; }
  .plan-main { right: 16px; }
  .system-row { grid-template-columns: 62px .8fr 1fr; }
  .video-rail { grid-auto-columns: minmax(270px, 42%); }
}
@media (max-width: 720px) {
  .app-nav-inner { min-height: 68px; }
  .app-nav-links { display: none; }
  .app-nav .button { min-height: 40px; padding: 9px 13px; font-size: 12px; }
  .hero { padding: 32px 0 clamp(46px, 11vw, 82px); }
  .hero h1 { font-size: clamp(36px, 11.2vw, 52px); margin-top: 20px; }
  .hero-lead { margin-top: 20px; font-size: 16px; }
  .hero-actions { margin-top: 24px; }
  .plan-window { min-height: 468px; }
  .plan-main { right: 0; width: calc(100% - 12px); }
  .next-action { left: 0; bottom: 0; }
  .route-orbit { right: -110px; }
  .moments-grid { grid-template-columns: 1fr; }
  .moment { min-height: 282px; }
  .system-row { grid-template-columns: 54px 1fr; gap: 15px; padding: 21px 0; }
  .system-row p { grid-column: 2; }
  .video-head { display: block; }
  .video-rail { grid-auto-columns: 78%; margin-right: calc(-1 * var(--app-gutter)); padding-right: var(--app-gutter); }
  .video-frame { min-height: 320px; }
  .footer-grid { align-items: flex-start; flex-direction: column; }
  .footer-links { justify-content: flex-start; }
}

/* Multi-page product site -------------------------------------------------- */
main [id] { scroll-margin-top: 100px; }
.nav-actions { display: flex; align-items: center; gap: 9px; }
.nav-menu { position: relative; }
/* Hauteur de cible : 40px minimum en desktop (les summaries faisaient 35px),
   44px dès qu'on est en tactile. */
.nav-menu > summary,
.app-mobile-menu > summary { display: inline-flex; min-height: 40px; align-items: center; gap: 5px; cursor: pointer; list-style: none; border-radius: 10px; padding: 9px 11px; color: #405249; font-size: 13px; font-weight: 700; transition: color .2s ease, background .2s ease; }
@media (pointer: coarse) {
  .nav-menu > summary,
  .app-mobile-menu > summary,
  .app-nav-links a,
  /* En mobile, `.app-nav .button` retombe à 40px : on le remonte à 44 au doigt. */
  .app-nav .button { min-height: 44px; }
}
.nav-menu > summary::-webkit-details-marker,
.app-mobile-menu > summary::-webkit-details-marker { display: none; }
.nav-menu > summary:hover,
.app-mobile-menu > summary:hover { color: var(--app-ink); background: #edf1eb; }
.nav-menu > summary span { margin-top: -2px; color: var(--app-green); font-size: 15px; transition: transform .2s ease; }
.nav-menu[open] > summary span { transform: rotate(180deg); }
.nav-menu > summary:focus-visible,
.app-mobile-menu > summary:focus-visible,
.nav-panel a:focus-visible,
.app-mobile-menu-panel a:focus-visible,
.catalog-card a:focus-visible,
.audience-card a:focus-visible,
.product-map-node:focus-visible,
.breadcrumb:focus-visible,
.text-link:focus-visible,
.footer-download:focus-visible,
.footer-directory a:focus-visible { outline: 3px solid rgba(103, 85, 220, 0.42); outline-offset: 3px; }
.nav-panel { position: absolute; z-index: 120; top: calc(100% + 14px); left: -22px; width: 332px; border: 1px solid #d7e2d8; border-radius: 20px; padding: 11px; color: var(--app-ink); background: rgba(255, 255, 255, .98); box-shadow: 0 22px 52px rgba(16, 37, 28, .16); }
.nav-panel-personas { width: 292px; }
.nav-panel-label { margin: 5px 9px 10px; color: var(--app-muted); font-family: var(--app-mono); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; }
.app-nav-links .nav-panel a { display: block; border-radius: 13px; padding: 11px 12px; color: var(--app-ink); }
.app-nav-links .nav-panel a:hover { background: var(--app-green-soft); }
.nav-panel a b { display: block; font-size: 13px; letter-spacing: -.02em; }
.nav-panel a small { display: block; margin-top: 3px; color: var(--app-muted); font-size: 11px; font-weight: 600; line-height: 1.4; }
.app-nav-links .nav-panel .nav-panel-all { margin-top: 4px; border-top: 1px solid var(--app-line); border-radius: 0 0 12px 12px; padding-top: 13px; color: var(--app-green-dark); font-size: 12px; font-weight: 800; }
.app-nav-links .nav-panel .nav-panel-all span { float: right; }
.app-mobile-menu { display: none; position: relative; }
.app-mobile-menu-panel { position: absolute; z-index: 120; top: calc(100% + 12px); right: 0; width: min(290px, calc(100vw - 40px)); border: 1px solid #d7e2d8; border-radius: 17px; padding: 10px; background: #fff; box-shadow: 0 22px 52px rgba(16, 37, 28, .16); }
.app-mobile-menu-panel p { margin: 5px 9px 9px; color: var(--app-muted); font-family: var(--app-mono); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; }
.app-mobile-menu-panel a { display: block; border-radius: 10px; padding: 11px 10px; font-size: 14px; font-weight: 750; }
.app-mobile-menu-panel a:hover { background: var(--app-green-soft); }

.catalog-hero,
.subhero { position: relative; overflow: hidden; padding: clamp(70px, 10vw, 132px) 0 clamp(74px, 10vw, 130px); }
.catalog-hero::before,
.subhero::before { position: absolute; top: -330px; right: -170px; width: min(71vw, 880px); height: min(71vw, 880px); border-radius: 50%; background: radial-gradient(circle, rgba(216,250,121,.78), rgba(216,250,121,0) 68%); content: ""; }
.catalog-hero-grid,
.subhero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .95fr) minmax(410px, .8fr); align-items: center; gap: clamp(48px, 8vw, 135px); }
.catalog-hero h1,
.subhero h1 { max-width: 725px; margin: 18px 0 0; font-family: var(--app-display); font-size: clamp(51px, 6.6vw, 88px); font-weight: 650; line-height: .92; letter-spacing: -.042em; text-wrap: balance; }
.catalog-hero h1 em,
.subhero h1 em { color: var(--app-green); font-style: normal; }
.catalog-hero > .app-wrap > div > p { max-width: 580px; margin: 25px 0 0; color: var(--app-muted); font-size: clamp(17px, 1.9vw, 20px); line-height: 1.62; }
.catalog-hero .button { margin-top: 30px; }
.product-map { position: relative; min-height: 440px; border: 1px solid rgba(16,37,28,.1); border-radius: 36px; background: rgba(255,255,255,.62); box-shadow: 0 20px 56px rgba(16,37,28,.09); }
.product-map::before { position: absolute; inset: 21px; border: 1px dashed rgba(7,88,63,.28); border-radius: 26px; content: ""; }
.product-map-path { position: absolute; z-index: 0; top: 50%; left: 16%; width: 67%; height: 2px; background: linear-gradient(90deg, var(--app-green), var(--app-lime), var(--app-purple)); transform: rotate(-29deg); transform-origin: left center; }
.product-map-node { position: absolute; z-index: 1; display: grid; width: 164px; min-height: 112px; gap: 4px; border: 1px solid rgba(16,37,28,.12); border-radius: 18px; padding: 13px; color: var(--app-ink); background: #fff; box-shadow: 0 12px 24px rgba(16,37,28,.09); transition: transform .2s ease, box-shadow .2s ease; }
.product-map-node:hover { transform: translateY(-4px) rotate(-1deg); box-shadow: 0 18px 30px rgba(16,37,28,.16); }
.product-map-node span { color: var(--app-green-dark); font-family: var(--app-mono); font-size: 10px; }
.product-map-node b { align-self: end; font-family: var(--app-display); font-size: 20px; line-height: .94; letter-spacing: -.038em; }
.product-map-node small { color: var(--app-muted); font-size: 10px; font-weight: 700; line-height: 1.3; }
.product-map-node-1 { top: 55px; left: 35px; }
.product-map-node-2 { top: 88px; right: 27px; background: var(--app-green-soft); }
.product-map-node-3 { bottom: 47px; left: 78px; background: var(--app-lilac); }
.product-map-node-4 { right: 58px; bottom: 25px; background: var(--app-sand); }

.product-gateway { background: #fff; }
.gateway-intro { display: flex; align-items: end; justify-content: space-between; gap: 42px; }
.gateway-intro .section-copy { margin-bottom: 5px; }
.gateway-grid { display: grid; grid-template-columns: 1.18fr 1fr 1fr; gap: 16px; margin-top: 49px; }
/* Ombre au repos : les cartes ne portaient QU'un filet 1px. Sur la carte encre et
   la carte lilas ce filet est invisible, donc elles étaient posées à plat sur le
   fond, sans aucune profondeur — et l'ombre n'apparaissait qu'au survol, d'un coup.
   Une ombre de contact discrète au repos, la version « soulevée » au survol. */
.gateway-card { min-height: 315px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--app-line); border-radius: 24px; padding: 24px; color: var(--app-ink); background: var(--app-paper); box-shadow: 0 1px 2px rgba(16,37,28,.04), 0 4px 12px -6px rgba(16,37,28,.06); }
.gateway-card:hover { transform: translateY(-5px); }
/* Pression : une carte de 380×315 qui rétrécit à 0.96 lit comme un bug, pas comme
   un bouton. L'équivalent tactile à cette échelle, c'est la carte qui se repose :
   elle redescend et son ombre se resserre. */
.gateway-card:active { transform: translateY(-1px); box-shadow: var(--app-shadow); }
.gateway-card > span { color: var(--app-green-dark); font-family: var(--app-mono); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; }
.gateway-card h3 { max-width: 325px; margin: 20px 0 0; font-family: var(--app-display); font-size: 34px; font-weight: 650; line-height: .98; letter-spacing: -.04em; text-wrap: balance; }
.gateway-card p { max-width: 330px; margin: 15px 0 0; color: var(--app-muted); font-size: 13px; line-height: 1.62; }
/* La flèche restait immobile au survol, alors que celle des cartes « fx » avance.
   `inline-flex` + `align-items: center` : à 15px dans un texte de 12px, une flèche
   calée sur la ligne de base flotte au-dessus du texte. */
.gateway-card b { margin-top: auto; padding-top: 21px; color: var(--app-green-dark); font-size: 12px; display: inline-flex; align-items: center; align-self: flex-start; }
.gateway-card b i { margin-left: 6px; font-size: 15px; font-style: normal; line-height: 1; transition: transform .22s var(--app-ease); }
.gateway-card:hover b i { transform: translateX(4px); }
/* La carte est un <a>, et `body.glamzn-app-page a { color: inherit }` (0,2,1)
   battait `.gateway-card-product { color:#fff }` (0,1,0) : le h3 héritait de
   l'encre du body et devenait invisible sur le fond encre. Il faut un sélecteur
   au moins aussi spécifique. */
body.glamzn-app-page a.gateway-card-product,
.gateway-card-product h3 { color: #fff; }
.gateway-card-product { color: #fff; border-color: var(--app-ink); background: var(--app-ink); }
.gateway-card-product > span { color: var(--app-lime); }
.gateway-card-product p { color: #c5d7ca; }
.gateway-card-product b { color: #fff; }
.gateway-card-future { background: var(--app-lilac); }

.catalog-section { background: #fff; }
.catalog-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(290px, .7fr); gap: 40px; align-items: end; }
.catalog-intro .section-copy { margin-bottom: 6px; }
.catalog-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 54px; }
.catalog-card { position: relative; display: flex; min-height: 325px; flex-direction: column; overflow: hidden; border: 1px solid var(--app-line); border-radius: 23px; padding: 22px; background: var(--app-paper); }
.catalog-card::after { position: absolute; right: -64px; bottom: -77px; width: 190px; height: 190px; border: 18px solid var(--app-green-soft); border-radius: 50%; content: ""; }
.catalog-card-2::after { border-color: var(--app-lilac); }
.catalog-card-3::after { border-color: #ffd7c0; }
.catalog-card-4::after { border-color: var(--app-lime); }
.catalog-number { color: var(--app-green-dark); font-family: var(--app-mono); font-size: 11px; }
.catalog-status { margin: 17px 0 0; color: var(--app-green-dark); font-family: var(--app-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.catalog-card h3 { position: relative; z-index: 1; margin: 10px 0 0; font-family: var(--app-display); font-size: 29px; font-weight: 650; line-height: .96; letter-spacing: -.04em; }
.catalog-card > p:not(.catalog-status) { position: relative; z-index: 1; margin: 14px 0 0; color: var(--app-muted); font-size: 13px; line-height: 1.6; }
.catalog-card a { position: relative; z-index: 2; align-self: flex-start; margin-top: auto; color: var(--app-green-dark); font-size: 12px; font-weight: 800; }
.catalog-card a span,
.audience-card a span { margin-left: 4px; }
.catalog-card a:hover,
.audience-card a:hover { color: var(--app-purple); }

.audience-section { background: var(--app-ink); color: #fff; }
.audience-section .section-kicker { color: var(--app-lime); }
.audience-section .section-kicker::before { background: var(--app-lime); }
.audience-section .section-heading { color: #fff; }
.audience-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 50px; }
.audience-card { min-height: 290px; display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,.16); border-radius: 22px; padding: 24px; background: rgba(255,255,255,.06); }
.audience-card > span { color: var(--app-lime); font-family: var(--app-mono); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; }
.audience-card h3 { max-width: 300px; margin: 16px 0 0; font-family: var(--app-display); font-size: 33px; font-weight: 650; line-height: .98; letter-spacing: -.04em; }
.audience-card p { margin: 15px 0 0; color: #c5d7ca; font-size: 13px; line-height: 1.63; }
.audience-card a { margin-top: auto; padding-top: 20px; color: #fff; font-size: 12px; font-weight: 800; }

.studio-section { background: #eef1e9; }
.studio-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(370px, 1fr); gap: clamp(45px, 9vw, 144px); align-items: start; }
.studio-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid #cbd7ce; }
.studio-list li { display: grid; grid-template-columns: 48px 1fr auto; gap: 14px; align-items: start; border-bottom: 1px solid #cbd7ce; padding: 20px 0; }
.studio-list li > span { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 10px; color: var(--app-green-dark); background: #fff; font-family: var(--app-mono); font-size: 10px; }
.studio-list b { display: block; font-family: var(--app-display); font-size: 22px; font-weight: 650; letter-spacing: -.038em; }
.studio-list p { max-width: 390px; margin: 6px 0 0; color: var(--app-muted); font-size: 13px; line-height: 1.55; }
.studio-list em { color: var(--app-green-dark); font-family: var(--app-mono); font-size: 10px; font-style: normal; }

.subhero { background: #fff; }
.subhero-lilac::before { background: radial-gradient(circle, rgba(232,227,255,.98), rgba(232,227,255,0) 68%); }
.subhero-orange::before { background: radial-gradient(circle, rgba(255,215,192,.92), rgba(255,215,192,0) 68%); }
.subhero-lime::before { background: radial-gradient(circle, rgba(216,250,121,.72), rgba(216,250,121,0) 68%); }
.breadcrumb { display: inline-flex; margin-bottom: 26px; color: var(--app-muted); font-size: 12px; font-weight: 750; }
.breadcrumb::before { margin-right: 8px; color: var(--app-green); content: "←"; }
.breadcrumb:hover { color: var(--app-green-dark); }
.subhero .section-kicker { display: flex; width: fit-content; }
.subhero-lead { max-width: 615px; margin: 25px 0 0; color: var(--app-muted); font-size: clamp(17px, 1.9vw, 20px); line-height: 1.63; }
.subhero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 29px; }
.text-link { color: var(--app-green-dark); font-size: 13px; font-weight: 800; }
.text-link:hover { color: var(--app-purple); }
.availability { display: flex; align-items: flex-start; gap: 7px; max-width: 570px; margin: 22px 0 0; color: var(--app-muted); font-size: 12px; font-weight: 650; line-height: 1.5; }
.availability span { color: var(--app-green); font-size: 11px; }
.availability.is-future span { color: var(--app-purple); }
.section-cockpit { overflow: hidden; border: 1px solid rgba(16,37,28,.15); border-radius: 27px; background: #fff; box-shadow: var(--app-shadow); }
.cockpit-top { display: flex; min-height: 120px; flex-direction: column; justify-content: flex-end; padding: 23px; color: #fff; background: var(--app-ink); }
.cockpit-top span { color: #bfd1c4; font-family: var(--app-mono); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; }
.cockpit-top b { margin-top: 7px; font-family: var(--app-display); font-size: 31px; font-weight: 650; line-height: 1; letter-spacing: -.04em; }
.cockpit-body { display: grid; gap: 9px; padding: 20px; }
.cockpit-item { display: grid; grid-template-columns: 28px 1fr 21px; gap: 11px; align-items: center; min-height: 53px; border-radius: 14px; padding: 9px; background: var(--app-green-soft); }
.cockpit-item:nth-child(2) { background: #f7f8f3; }
.cockpit-item:nth-child(3) { background: var(--app-lilac); }
.cockpit-item i { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; color: var(--app-green-dark); background: #fff; font-family: var(--app-mono); font-size: 9px; font-style: normal; }
.cockpit-item span { font-size: 13px; font-weight: 750; }
.cockpit-item b { color: var(--app-green-dark); font-size: 12px; }
.cockpit-footer { border-top: 1px solid var(--app-line); padding: 15px 20px; color: var(--app-green-dark); font-family: var(--app-mono); font-size: 11px; }

.page-promise-section { background: var(--app-ink); color: #fff; }
.page-promise-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: clamp(45px, 10vw, 150px); align-items: end; }
.page-promise-section .section-kicker { color: var(--app-lime); }
.page-promise-section .section-kicker::before { background: var(--app-lime); }
.page-promise-section .section-heading { color: #fff; }
.page-promise { max-width: 590px; margin: 0; color: #c5d7ca; font-family: var(--app-display); font-size: clamp(24px, 3vw, 40px); font-weight: 500; line-height: 1.08; letter-spacing: -.038em; }
.page-steps-section { background: #fff; }
.steps-heading { display: flex; align-items: end; justify-content: space-between; gap: 40px; }
.page-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 54px 0 0; padding: 0; list-style: none; }
.page-steps li { min-height: 260px; border-top: 2px solid var(--app-green); padding: 18px 10px 8px 0; }
.page-steps li > span { color: var(--app-green-dark); font-family: var(--app-mono); font-size: 11px; }
.page-steps h3 { max-width: 300px; margin: 28px 0 0; font-family: var(--app-display); font-size: 32px; font-weight: 650; line-height: .98; letter-spacing: -.04em; }
.page-steps p { max-width: 330px; margin: 14px 0 0; color: var(--app-muted); font-size: 14px; line-height: 1.67; }
.page-benefits-section { background: #edf1eb; }
.benefits-layout { display: grid; grid-template-columns: minmax(0, .75fr) minmax(390px, 1fr); gap: clamp(45px, 10vw, 150px); align-items: start; }
.benefits-list { display: grid; gap: 13px; }
.benefits-list article { display: grid; grid-template-columns: 36px 1fr; gap: 13px; padding: 19px; border: 1px solid #d5dfd5; border-radius: 16px; background: rgba(255,255,255,.72); }
.benefits-list article > span { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 50%; color: var(--app-ink); background: var(--app-lime); font-size: 12px; font-weight: 900; }
.benefits-list h3 { margin: 1px 0 0; font-size: 15px; letter-spacing: -.02em; }
.benefits-list p { margin: 5px 0 0; color: var(--app-muted); font-size: 13px; line-height: 1.58; }
.related-section { padding-top: 0; background: #edf1eb; }
.related-card { display: flex; align-items: end; justify-content: space-between; gap: 35px; overflow: hidden; border-radius: 26px; padding: clamp(32px, 5vw, 61px); color: #fff; background: var(--app-green-dark); }
.related-card .section-kicker { color: var(--app-lime); }
.related-card .section-kicker::before { background: var(--app-lime); }
.related-card h2 { max-width: 600px; margin: 16px 0 0; font-family: var(--app-display); font-size: clamp(35px, 4.6vw, 59px); font-weight: 650; line-height: .96; letter-spacing: -.04em; }
.related-card p { max-width: 560px; margin: 16px 0 0; color: #c5d7ca; font-size: 15px; line-height: 1.6; }
.related-card .button { flex: 0 0 auto; color: var(--app-ink); border-color: #fff; background: #fff; }
.related-card .button:hover { background: var(--app-lime); }

.product-footer { padding-top: 58px; background: var(--app-paper); }
.product-footer-top { display: grid; grid-template-columns: minmax(150px, .6fr) minmax(260px, 1fr) auto; gap: 30px; align-items: center; padding-bottom: 40px; border-bottom: 1px solid var(--app-line); }
.product-footer-top p { max-width: 450px; margin: 0; color: var(--app-muted); font-size: 14px; line-height: 1.55; }
.footer-download { display: inline-flex; align-items: center; gap: 8px; justify-self: end; color: var(--app-green-dark); font-size: 13px; font-weight: 800; }
.footer-download:hover { color: var(--app-purple); }
.footer-directory { display: grid; grid-template-columns: 1.2fr .8fr .8fr; gap: 30px; padding: 38px 0; }
.footer-directory > div { display: grid; align-content: start; gap: 9px; }
.footer-directory b { margin-bottom: 4px; color: var(--app-ink); font-family: var(--app-mono); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; }
.footer-directory a { width: fit-content; color: #52645a; font-size: 12px; font-weight: 700; }
.footer-directory a:hover { color: var(--app-green-dark); }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--app-line); padding: 20px 0 32px; color: #718178; font-size: 11px; }

@media (max-width: 1080px) {
  .catalog-grid { grid-template-columns: repeat(2, 1fr); }
  .catalog-card { min-height: 285px; }
  .product-footer-top { grid-template-columns: .7fr 1fr; }
  .footer-download { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 920px) {
  .catalog-hero-grid, .subhero-grid, .page-promise-grid, .benefits-layout, .studio-grid { grid-template-columns: 1fr; }
  .catalog-hero-grid > div:first-child, .subhero-grid > div:first-child { max-width: 720px; }
  .product-map { width: min(600px, 100%); }
  .catalog-intro { grid-template-columns: 1fr; gap: 4px; }
  .gateway-intro { align-items: flex-start; flex-direction: column; gap: 4px; }
  .gateway-grid { grid-template-columns: 1fr; }
  .audience-grid, .page-steps { grid-template-columns: 1fr; }
  .audience-card { min-height: 230px; }
  .page-steps li { min-height: 0; padding-bottom: 25px; }
  .page-steps h3 { margin-top: 17px; }
  .related-card { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 720px) {
  .app-nav-desktop { display: none; }
  .app-mobile-menu { display: block; }
  .nav-actions { gap: 4px; }
  .app-nav .app-mobile-menu > summary { padding: 9px 7px; font-size: 0; }
  .app-nav .app-mobile-menu > summary span { font-size: 16px; }
  /* Bouton « Télécharger » : plus compact et moins chunky sur mobile */
  .app-nav .button-primary { min-height: 36px; padding: 8px 14px; font-size: 12px; box-shadow: 0 3px 0 #043b2a, 0 6px 14px rgba(7, 88, 63, .16); }
  .app-nav .button-primary:hover { box-shadow: 0 3px 0 #043b2a, 0 6px 14px rgba(7, 88, 63, .16); transform: none; }
  .app-nav .button-primary span { display: none; }
  .catalog-hero, .subhero { padding-top: 49px; }
  .catalog-hero h1, .subhero h1 { font-size: clamp(47px, 13.5vw, 65px); }
  .product-map { min-height: 390px; }
  .product-map-node { width: 140px; min-height: 100px; padding: 11px; }
  .product-map-node b { font-size: 18px; }
  .product-map-node-1 { top: 38px; left: 16px; }
  .product-map-node-2 { top: 65px; right: 15px; }
  .product-map-node-3 { bottom: 34px; left: 28px; }
  .product-map-node-4 { right: 25px; bottom: 16px; }
  .catalog-grid { grid-template-columns: 1fr; margin-top: 35px; }
  .catalog-card { min-height: 250px; }
  .studio-list li { grid-template-columns: 40px 1fr; }
  .studio-list em { grid-column: 2; }
  .subhero-actions { align-items: flex-start; flex-direction: column; gap: 14px; }
  .section-cockpit { width: 100%; }
  .product-footer { padding-top: 40px; }
  .product-footer-top { grid-template-columns: 1fr; gap: 16px; padding-bottom: 30px; }
  .footer-directory { grid-template-columns: 1fr 1fr; gap: 26px 18px; padding: 30px 0; }
  .footer-bottom { align-items: flex-start; flex-direction: column; gap: 6px; }
  /* Sections du milieu : moins d'espace vide vertical sur mobile */
  .section { padding-block: clamp(44px, 10vw, 82px); }
  .gateway-grid, .moments-grid, .fx-grid, .system-list, .audience-grid { margin-top: 32px; }
  .gateway-card { min-height: 0; }
  .moment { min-height: 0; }
  .gateway-card h3, .moment h3 { font-size: 27px; }
}

/* Hero film and editorial navigation ------------------------------------- */
.app-nav { border-bottom-color: rgba(16,37,28,.08); background: rgba(247,248,243,.94); }
.app-nav-inner { min-height: 72px; }
.brand-lockup { gap: 0; font-size: 0; }
.brand-wordmark { font-family: var(--app-display); font-size: 24px; font-weight: 700; letter-spacing: -.04em; }
.app-nav-links { gap: 7px; }
.app-nav-links > a,
.nav-menu > summary { font-size: 12px; letter-spacing: -.01em; }
.app-nav .button-primary { min-height: 42px; padding: 10px 16px; box-shadow: 0 5px 0 #043b2a, 0 10px 20px rgba(7,88,63,.14); }
.app-nav .button-primary:hover { box-shadow: 0 7px 0 #043b2a, 0 13px 24px rgba(7,88,63,.16); }

.hero-cinematic { position: relative; min-height: min(790px, calc(100vh - 72px)); display: grid; align-items: center; overflow: hidden; padding: clamp(70px, 9vw, 120px) 0; color: #fff; background: #0e231a; isolation: isolate; }
.hero-cinematic::before,
.hero-cinematic::after { display: none; }
.hero-cinematic-video,
.hero-cinematic-fallback,
.hero-cinematic-shade { position: absolute; z-index: -3; inset: 0; width: 100%; height: 100%; }
.hero-cinematic-video { object-fit: cover; object-position: center; filter: saturate(.72) contrast(1.04); }
.hero-cinematic-fallback { overflow: hidden; background: radial-gradient(circle at 76% 18%, rgba(180,223,103,.72), transparent 25%), radial-gradient(circle at 15% 96%, rgba(103,85,220,.63), transparent 34%), linear-gradient(125deg, #0c2018 5%, #164634 48%, #638d4f 130%); }
.hero-cinematic-fallback::before { position: absolute; right: 4%; bottom: -31%; width: min(58vw, 760px); height: min(58vw, 760px); border: 1px solid rgba(255,255,255,.27); border-radius: 50%; content: ""; transform: rotate(-24deg); }
.hero-cinematic-fallback::after { position: absolute; top: 15%; right: 13%; width: 17vw; height: 38vw; max-height: 480px; border: 1px solid rgba(255,255,255,.19); border-radius: 999px; content: ""; transform: rotate(28deg); }
.hero-cinematic-fallback span { position: absolute; width: 250px; height: 90px; border-radius: 999px; background: rgba(216,250,121,.22); filter: blur(4px); transform: rotate(-31deg); }
.hero-cinematic-fallback span:nth-child(1) { top: 18%; right: 24%; }
.hero-cinematic-fallback span:nth-child(2) { right: 5%; bottom: 26%; width: 360px; background: rgba(255,255,255,.13); }
.hero-cinematic-fallback span:nth-child(3) { bottom: 2%; left: 21%; width: 190px; background: rgba(232,227,255,.21); }
.hero-cinematic-shade { z-index: -2; background: linear-gradient(90deg, rgba(7,27,20,.94) 0%, rgba(7,27,20,.75) 38%, rgba(7,27,20,.16) 76%, rgba(7,27,20,.5) 100%); }
.hero-cinematic .hero-grid { z-index: 1; grid-template-columns: minmax(0, .95fr) minmax(365px, .65fr); gap: clamp(38px, 9vw, 150px); }
.hero-cinematic .hero-copy { max-width: 720px; }
.hero-cinematic .hero-eyebrow { border-color: rgba(255,255,255,.23); color: #f8fbf7; background: rgba(255,255,255,.1); backdrop-filter: blur(10px); }
.hero-cinematic .hero-eyebrow i { color: var(--app-ink); background: var(--app-lime); }
/* Plafond ramené de 96px à 84px : en anglais (« Revise with a direction. Not at
   random. ») le titre passait à 4 lignes et poussait les boutons stores SOUS la
   ligne de flottaison — le CTA principal disparaissait au chargement. Le viewport
   fait partie du design. */
.hero-cinematic .hero-copy h1 { max-width: 715px; color: #fff; font-size: clamp(52px, 6vw, 84px); }
.hero-cinematic .hero-copy h1 em { color: var(--app-lime); }
.hero-cinematic .hero-lead { color: rgba(241,248,242,.78); }
.button-light { color: var(--app-ink); background: #fff; box-shadow: 0 7px 0 rgba(216,250,121,.72), 0 14px 26px rgba(0,0,0,.17); }
.button-light:hover { background: var(--app-lime); box-shadow: 0 9px 0 rgba(216,250,121,.72), 0 17px 30px rgba(0,0,0,.2); }
.hero-secondary-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: #fff; font-size: 14px; font-weight: 800; }
.hero-secondary-link:hover { color: var(--app-lime); }
.hero-secondary-link:focus-visible { outline: 3px solid rgba(216,250,121,.7); outline-offset: 5px; }
.hero-cinematic .hero-note { color: rgba(241,248,242,.7); }
.hero-cinematic .hero-note svg { color: var(--app-lime); }
.hero-cinematic .plan-window { min-height: 482px; }
.hero-cinematic .route-orbit { border-color: rgba(216,250,121,.44); }
.hero-cinematic .route-marker.one { background: var(--app-lime); color: var(--app-ink); }
.hero-cinematic .route-marker.two { background: #fff; color: var(--app-ink); }

/* ── Entrée du hero ───────────────────────────────────────────────────────────
   Le hero est au-dessus de la ligne de flottaison : il n'était jamais « révélé »
   et s'affichait donc figé, d'un seul bloc. Ici l'entrée est découpée en morceaux
   sémantiques (accroche → titre → promesse → preuve → stores → mention), chacun
   décalé de ~90 ms. Le plan monte en parallèle, la carte « prochaine action » et
   la mascotte closent la séquence : on lit la page dans l'ordre où elle se monte.

   Ce sont des @keyframes, pas des transitions : elles partent au chargement sans
   JS (aucun risque de hero blanc), et elles laissent `transition` libre pour les
   survols. `both` garde l'état final. */
@keyframes glzHeroIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes glzPlanIn {
  from { opacity: 0; transform: translateY(26px) scale(.975); }
  to { opacity: 1; transform: none; }
}
/* Remplissage de la barre : scaleX, jamais `width` — animer une propriété de
   layout force un reflow à chaque frame. */
@keyframes glzBarFill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.hero-cinematic .hero-eyebrow,
.hero-cinematic .hero-copy h1,
.hero-cinematic .hero-lead,
.hero-cinematic .hero-proof,
.hero-cinematic .hero-actions,
.hero-cinematic .hero-note {
  animation: glzHeroIn .7s var(--app-ease) both;
  animation-delay: calc(var(--i, 0) * 90ms);
}
.hero-cinematic .hero-eyebrow { --i: 0; }
.hero-cinematic .hero-copy h1 { --i: 1; }
.hero-cinematic .hero-lead { --i: 2; }
.hero-cinematic .hero-proof { --i: 3; }
.hero-cinematic .hero-actions { --i: 4; }
.hero-cinematic .hero-note { --i: 5; }

.hero-cinematic .plan-main { animation: glzPlanIn .85s var(--app-ease) both; animation-delay: 180ms; }
.hero-cinematic .next-action { animation: glzPlanIn .7s var(--app-ease) both; animation-delay: 620ms; }
.hero-cinematic .glamzy-hero { animation: glzHeroIn .6s var(--app-ease) both; animation-delay: 760ms; }
.hero-cinematic .route-orbit,
.hero-cinematic .route-marker { animation: glzHeroIn .8s var(--app-ease) both; animation-delay: 500ms; }

/* La barre se remplit après que la carte du plan soit posée. */
.hero-cinematic .progress-track i { transform-origin: left center; animation: glzBarFill .9s var(--app-ease) both; animation-delay: 700ms; }

/* Filet : si les animations ne tournent pas (impression), rien ne doit rester
   masqué par un `both` qui n'a jamais démarré. */
@media print {
  .hero-cinematic .hero-eyebrow,
  .hero-cinematic .hero-copy h1,
  .hero-cinematic .hero-lead,
  .hero-cinematic .hero-proof,
  .hero-cinematic .hero-actions,
  .hero-cinematic .hero-note,
  .hero-cinematic .plan-main,
  .hero-cinematic .next-action,
  .hero-cinematic .glamzy-hero,
  .hero-cinematic .route-orbit,
  .hero-cinematic .route-marker,
  .hero-cinematic .progress-track i { animation: none; opacity: 1; transform: none; }
}
.hero-cinematic .plan-main { box-shadow: 0 28px 60px rgba(0,0,0,.24); }
.hero-cinematic .next-action { box-shadow: 0 21px 42px rgba(0,0,0,.24); }

@media (max-width: 920px) {
  .hero-cinematic { min-height: auto; }
  .hero-cinematic .hero-grid { grid-template-columns: 1fr; }
  .hero-cinematic .hero-copy { max-width: 720px; }
  .hero-cinematic .plan-window { margin-top: 15px; }
}
@media (max-width: 720px) {
  .app-nav-inner { min-height: 64px; }
  .brand-wordmark { font-size: 22px; }
  .hero-cinematic { padding: 55px 0 66px; }
  .hero-cinematic .hero-copy h1 { font-size: clamp(51px, 15vw, 72px); }
  .hero-cinematic .hero-lead { font-size: 17px; }
  .hero-cinematic .plan-window { min-height: 420px; }
  .hero-cinematic .plan-main { width: calc(100% - 10px); }
  .hero-cinematic-fallback::after { right: -11%; width: 180px; height: 370px; }
  .hero-cinematic-shade { background: linear-gradient(180deg, rgba(7,27,20,.87), rgba(7,27,20,.62)); }
}

/* =====================================================================
   Ajouts partagés — header pro + vitrine « Fonctionnalités » (fx-*)
   Chargés sur toutes les pages produit (landing + /app/fonctionnalites…)
   ===================================================================== */
/* Lockup de marque : « Glamzn » + « AI Study & Coach » */
.brand-lockup { display: inline-flex; align-items: flex-end; gap: 8px; line-height: 1; }
.brand-wordmark { letter-spacing: -.04em; line-height: .9; }
.brand-tagline { font-size: 11px; font-weight: 750; letter-spacing: -.005em; color: var(--app-muted); white-space: nowrap; padding-bottom: 2px; }
/* Mobile : la baseline était purement et simplement masquée, il ne restait que
   « Glamzn ». On la garde, empilée sous le mot — même lockup que le header PDF. */
@media (max-width: 520px) {
  .brand-lockup { flex-direction: column; align-items: flex-start; gap: 1px; }
  .brand-tagline { font-size: 9px; letter-spacing: .06em; text-transform: uppercase; padding-bottom: 0; }
}
/* Header : ombre au scroll + bouton lisible + menus pro */
.app-nav { transition: background .25s ease, box-shadow .25s ease, border-color .25s ease; }
.app-nav.is-scrolled { background: rgba(247,248,243,.97); box-shadow: 0 10px 34px rgba(16,37,28,.10); border-bottom-color: rgba(16,37,28,.05); }
.app-nav .button-primary { color: #fff; background: var(--app-green-dark); box-shadow: 0 6px 16px rgba(7,88,63,.26); }
.app-nav .button-primary:hover { color: #fff; background: #064c36; box-shadow: 0 8px 22px rgba(7,88,63,.34); transform: translateY(-1px); }
.app-nav .button-primary span { color: #d8fa79; }
.app-nav summary, .app-nav-links > a, .nav-panel a, .brand-lockup, .app-mobile-menu-panel a, .app-nav .button-primary { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.app-nav summary { outline: none; }
.app-nav .nav-menu > summary span { font-size: 11px; color: #8aa093; }
.app-nav .nav-menu[open] > summary { color: var(--app-ink); background: #eef2ec; }
.app-nav .nav-panel { animation: glzNavIn .16s ease both; transform-origin: top center; }
@keyframes glzNavIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
/* Vitrine de fonctionnalités (fx-*) */
.fx-head { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1fr); gap: clamp(30px,6vw,80px); align-items: end; }
.fx-head .section-copy { margin-bottom: 4px; }
.fx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px,1fr)); gap: 16px; margin-top: 52px; }
.fx-card { position: relative; padding: 24px 22px; border: 1px solid var(--app-line); border-radius: 22px; background: var(--app-surface); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.fx-card:hover { transform: translateY(-5px); box-shadow: var(--app-shadow); border-color: rgba(6,150,107,.28); }
.fx-ico { display: grid; width: 48px; height: 48px; place-items: center; margin-bottom: 15px; border-radius: 15px; background: var(--app-green-soft); color: var(--app-green-dark); transition: background .22s ease, color .22s ease; }
.fx-ico svg { width: 23px; height: 23px; }
.fx-card:hover .fx-ico { background: var(--app-green-dark); color: #fff; }
.fx-card h3 { margin: 0 0 8px; font-family: var(--app-display); font-size: 20px; font-weight: 650; letter-spacing: -.035em; color: var(--app-ink); }
.fx-card p { margin: 0; color: var(--app-muted); font-size: 13px; line-height: 1.58; }
a.fx-card { cursor: pointer; padding-bottom: 44px; }
a.fx-card::after { content: "→"; position: absolute; left: 22px; bottom: 20px; color: var(--app-green-dark); font-weight: 800; opacity: .55; transition: opacity .2s ease, transform .2s ease; }
a.fx-card:hover::after { opacity: 1; transform: translateX(4px); }
.fx-card-lead .fx-glamzy { position: absolute; top: -10px; right: -6px; width: 60px; margin: 0; pointer-events: none; filter: drop-shadow(0 8px 16px rgba(16,37,28,.2)); transition: transform .25s ease; }
.fx-card-lead .fx-glamzy img { display: block; width: 100%; height: auto; }
.fx-card-lead:hover .fx-glamzy { transform: translateY(-4px) rotate(-4deg); }

/* Carte vedette de la grille (le scan, porte d'entrée du produit).
   Douze tuiles identiques = grille clonée : l'œil n'a pas de point d'entrée.
   Celle-ci prend deux colonnes et le fond encre ; les onze autres restent
   blanches. `a.` et `.fx-grid` portent la spécificité nécessaire pour battre
   `body.glamzn-app-page a { color: inherit }` et `.fx-card h3 { color: ink }`. */
.fx-card { display: flex; flex-direction: column; }
body.glamzn-app-page a.fx-card-lead { color: #fff; }
.fx-card-lead { border-color: var(--app-ink); background: var(--app-ink); }
.fx-grid .fx-card-lead h3 { color: #fff; }
.fx-grid .fx-card-lead p { color: #c5d7ca; }
.fx-grid .fx-card-lead .fx-ico { background: rgba(216,250,121,.16); color: var(--app-lime); }
.fx-grid .fx-card-lead:hover .fx-ico { background: var(--app-lime); color: var(--app-ink); }
.fx-card-lead:hover { border-color: var(--app-lime); }
.fx-grid a.fx-card-lead::after { color: var(--app-lime); opacity: .8; }
/* En large : l'icône passe à gauche, le titre et le texte s'empilent à droite.
   Grille (et non flex-row) pour que h3 + p restent une seule colonne de texte
   sans toucher au markup. */
@media (min-width: 900px) {
  .fx-card-lead { grid-column: span 2; display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 28px; align-content: center; padding: 34px; }
  .fx-grid .fx-card-lead .fx-ico { grid-row: 1 / 3; grid-column: 1; margin-bottom: 0; align-self: center; }
  .fx-grid .fx-card-lead h3 { grid-column: 2; align-self: end; font-size: 26px; }
  .fx-grid .fx-card-lead p { grid-column: 2; align-self: start; max-width: 40ch; font-size: 14px; }
  .fx-grid a.fx-card-lead { padding-bottom: 34px; padding-right: 70px; }
  .fx-grid a.fx-card-lead::after { left: auto; right: 32px; bottom: auto; top: 50%; transform: translateY(-50%); }
  .fx-grid a.fx-card-lead:hover::after { transform: translateY(-50%) translateX(4px); }
}
@media (max-width: 820px) { .fx-head { grid-template-columns: 1fr; align-items: start; gap: 14px; } }
@media (max-width: 540px) { .fx-grid { grid-template-columns: 1fr; } }

/* Badges stores sur fond clair (pages fonctionnalités) */
.subhero-stores { margin-top: 26px; }
.subhero-stores .store-link { color: #fff; background: var(--app-ink); border-color: transparent; box-shadow: 0 8px 20px rgba(16,37,28,.14); }
.subhero-stores .store-link:hover { background: #1c3a2c; }

/* Visuels de hero distincts par fonctionnalité (fv-*) */
.feature-visual { align-self: center; }
.fv { max-width: 430px; margin-left: auto; padding: 22px; border: 1px solid rgba(16,37,28,.12); border-radius: 26px; background: #fff; box-shadow: 0 24px 60px rgba(16,37,28,.12); }
.fv-foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--app-line); color: var(--app-green-dark); font-family: var(--app-mono); font-size: 11px; letter-spacing: .03em; }
/* plan */
.fv-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.fv-top small { color: var(--app-muted); font-family: var(--app-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.fv-top b { font-family: var(--app-display); font-size: 20px; letter-spacing: -.04em; color: var(--app-ink); }
.fv-rows { display: grid; gap: 10px; }
.fv-row { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: 13px; background: var(--app-green-soft); color: var(--app-ink); font-size: 13px; font-weight: 600; }
.fv-row i { display: grid; place-items: center; width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%; background: var(--app-green-dark); color: #fff; font-size: 10px; font-style: normal; }
/* scan */
.fv-lens { position: relative; display: grid; place-items: center; min-height: 150px; border-radius: 18px; background: linear-gradient(135deg, #0e231a, #1b5137); color: #fff; }
.fv-lens small { font-family: var(--app-mono); font-size: 11px; letter-spacing: .04em; opacity: .92; }
.fv-cnr { position: absolute; width: 20px; height: 20px; border: 2px solid var(--app-lime); }
.fv-cnr.tl { top: 14px; left: 14px; border-right: 0; border-bottom: 0; border-radius: 6px 0 0 0; }
.fv-cnr.tr { top: 14px; right: 14px; border-left: 0; border-bottom: 0; border-radius: 0 6px 0 0; }
.fv-cnr.bl { bottom: 14px; left: 14px; border-right: 0; border-top: 0; border-radius: 0 0 0 6px; }
.fv-cnr.br { bottom: 14px; right: 14px; border-left: 0; border-top: 0; border-radius: 0 0 6px 0; }
.fv-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.fv-chips span { padding: 8px 13px; border-radius: 999px; background: var(--app-green-soft); color: var(--app-green-dark); font-size: 12px; font-weight: 700; }
/* chat */
.fv-chat { display: flex; flex-direction: column; gap: 10px; }
.fv-bub { max-width: 84%; padding: 10px 13px; font-size: 13px; line-height: 1.35; font-weight: 600; }
.fv-bub.fv-q { align-self: flex-end; border-radius: 15px 15px 4px 15px; background: var(--app-ink); color: #fff; }
.fv-bub.fv-a { align-self: flex-start; border-radius: 15px 15px 15px 4px; background: var(--app-green-soft); color: var(--app-ink); }
/* daily */
.fv-flash { display: grid; place-items: center; gap: 5px; min-height: 130px; border-radius: 18px; background: linear-gradient(140deg, var(--app-lilac), #fff); text-align: center; }
.fv-flash small { color: var(--app-green-dark); font-family: var(--app-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.fv-flash b { font-family: var(--app-display); font-size: 26px; letter-spacing: -.04em; color: var(--app-ink); }
.fv-rate { display: flex; gap: 8px; margin-top: 14px; }
.fv-rate span { flex: 1; text-align: center; padding: 10px 6px; border: 1px solid var(--app-line); border-radius: 13px; font-size: 12px; font-weight: 700; color: var(--app-ink); }
.fv-rate span:first-child { background: var(--app-green); border-color: var(--app-green); color: #fff; }
@media (max-width: 900px) { .fv { margin-inline: auto; } }

/* ============================================================
   Pages détail (fonctionnalités + audiences) — passe pro / moderne
   Signature : les étapes deviennent un parcours numéroté et connecté,
   écho de la métaphore « plan → prochaine action » du produit.
   Ajouts additifs, placés en fin de feuille pour primer proprement.
   ============================================================ */

/* Hero : légèrement resserré, carte visuelle plus premium et vivante */
.subhero { padding-block: clamp(54px, 8vw, 108px) clamp(58px, 8vw, 112px); }
.section-cockpit,
.feature-visual .fv {
  box-shadow: 0 26px 64px -20px rgba(16, 37, 28, .30), 0 2px 8px rgba(16, 37, 28, .06);
  transition: transform .32s cubic-bezier(.22, .61, .36, 1), box-shadow .32s ease;
}
.feature-visual:hover .section-cockpit,
.feature-visual:hover .fv {
  transform: translateY(-5px);
  box-shadow: 0 40px 82px -22px rgba(16, 37, 28, .36), 0 3px 10px rgba(16, 37, 28, .08);
}
.cockpit-top { background: linear-gradient(135deg, #0c2018 0%, #17402e 100%); }
.cockpit-item { transition: transform .22s ease; }
.section-cockpit:hover .cockpit-item { transform: translateX(2px); }

/* Étapes = parcours connecté (la seule vraie audace visuelle) */
.page-steps { gap: clamp(16px, 2.2vw, 30px); margin-top: clamp(40px, 5vw, 60px); }
.page-steps li {
  position: relative; min-height: 0; border-top: 0;
  padding: clamp(24px, 2.6vw, 32px);
  border: 1px solid var(--app-line); border-radius: 24px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcf9 100%);
  box-shadow: 0 1px 2px rgba(16, 37, 28, .05);
  transition: transform .28s cubic-bezier(.22, .61, .36, 1), box-shadow .28s ease, border-color .28s ease;
}
.page-steps li:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 50px -18px rgba(16, 37, 28, .26);
  border-color: rgba(6, 150, 107, .40);
}
.page-steps li > span {
  display: inline-grid; place-items: center; width: 52px; height: 52px;
  border-radius: 50%; background: var(--app-green-dark); color: #fff;
  font-family: var(--app-display); font-size: 20px; font-weight: 650; letter-spacing: -.03em;
  box-shadow: 0 10px 22px -8px rgba(7, 88, 63, .55);
  transition: background .25s ease;
}
.page-steps li:hover > span { background: var(--app-green); }
.page-steps h3 { margin: clamp(18px, 2vw, 24px) 0 0; max-width: none; font-size: clamp(21px, 2.1vw, 27px); }
.page-steps p { margin: 10px 0 0; max-width: none; }
.page-steps li:not(:last-child)::after {
  content: "→"; position: absolute; z-index: 2;
  top: calc(clamp(24px, 2.6vw, 32px) + 15px);
  right: calc(clamp(16px, 2.2vw, 30px) / -2 - 8px);
  color: var(--app-green); font-size: 20px; font-weight: 800; opacity: .5;
}
@media (max-width: 920px) { .page-steps li:not(:last-child)::after { display: none; } }

/* Bénéfices : cartes blanches avec profondeur et survol */
.benefits-list article {
  background: #fff; border-color: #e2e9e1;
  box-shadow: 0 1px 2px rgba(16, 37, 28, .04);
  transition: transform .25s cubic-bezier(.22, .61, .36, 1), box-shadow .25s ease, border-color .25s ease;
}
.benefits-list article:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 38px -16px rgba(16, 37, 28, .22);
  border-color: rgba(6, 150, 107, .42);
}

/* Carte « à explorer ensuite » : le bouton respire au survol */
.related-card .button { transition: transform .2s ease, background .2s ease; }
.related-card .button:hover { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .section-cockpit, .feature-visual .fv, .page-steps li, .page-steps li > span,
  .benefits-list article, .related-card .button, .cockpit-item { transition: none; }
}

/* ============================================================
   Visuels de hero distincts par audience (élève / parent / enseignant)
   au lieu du cockpit générique partagé.
   ============================================================ */

/* Élève : la journée en check-list + anneau de progression (momentum) */
.fv-student .fvs-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.fv-student .fvs-head small { color: var(--app-muted); font-family: var(--app-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.fv-student .fvs-head b { display: block; margin-top: 6px; font-family: var(--app-display); font-size: 21px; font-weight: 650; line-height: 1.05; letter-spacing: -.038em; color: var(--app-ink); }
.fvs-ring { position: relative; display: grid; place-items: center; width: 54px; height: 54px; flex: 0 0 54px; border-radius: 50%; background: conic-gradient(var(--app-green) var(--p, 60%), var(--app-green-soft) 0); }
.fvs-ring::before { content: ""; position: absolute; width: 41px; height: 41px; border-radius: 50%; background: #fff; }
.fvs-ring i { position: relative; font-family: var(--app-display); font-size: 16px; font-weight: 700; font-style: normal; color: var(--app-green-dark); }
.fvs-ring u { text-decoration: none; color: var(--app-muted); font-size: 11px; }
.fvs-list { display: grid; gap: 9px; }
.fvs-item { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: 13px; background: #f6f8f2; font-size: 13px; font-weight: 650; color: var(--app-ink); }
.fvs-item.is-done { background: var(--app-green-soft); }
.fvs-box { display: grid; place-items: center; width: 22px; height: 22px; flex: 0 0 22px; border-radius: 7px; border: 1.5px solid #cbd7ce; color: #fff; font-size: 11px; }
.fvs-item.is-done .fvs-box { background: var(--app-green); border-color: var(--app-green); }

/* Parent : régularité de la semaine en mini-graphe + signaux agrégés */
.fv-parent .fvp-head small { color: var(--app-muted); font-family: var(--app-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.fv-parent .fvp-head b { display: block; margin-top: 6px; font-family: var(--app-display); font-size: 21px; font-weight: 650; letter-spacing: -.038em; color: var(--app-ink); }
.fvp-chart { display: flex; align-items: flex-end; gap: 7px; height: 92px; margin: 16px 0 14px; padding: 14px 14px 0; border-radius: 15px; background: linear-gradient(180deg, #f6f8f2, #fff); }
.fvp-chart span { flex: 1; height: var(--h, 50%); border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, #57c39a, var(--app-green)); }
.fvp-chart span:nth-child(4) { background: linear-gradient(180deg, var(--app-green), var(--app-green-dark)); }
.fvp-signals { display: grid; gap: 8px; }
.fvp-signal { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 13px; border-radius: 12px; background: #f6f8f2; font-size: 12.5px; font-weight: 650; color: var(--app-ink); }
.fvp-signal b { color: var(--app-green-dark); font-size: 12px; letter-spacing: 1px; }

/* Enseignant (à venir) : signaux de classe agrégés en barres + badge « bientôt » */
.fv-teacher { border-style: dashed; border-color: rgba(103, 85, 220, .34); }
.fv-teacher .fvt-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.fv-teacher .fvt-head small { color: var(--app-muted); font-family: var(--app-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.fv-teacher .fvt-head b { display: block; margin-top: 6px; font-family: var(--app-display); font-size: 21px; font-weight: 650; letter-spacing: -.038em; color: var(--app-ink); }
.fvt-soon { flex: 0 0 auto; padding: 5px 10px; border-radius: 999px; background: var(--app-lilac); color: var(--app-purple); font-family: var(--app-mono); font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.fvt-rows { display: grid; gap: 13px; }
.fvt-row { display: grid; gap: 7px; }
.fvt-row > span { font-size: 13px; font-weight: 650; color: var(--app-ink); }
.fvt-bar { display: block; height: 9px; border-radius: 999px; background: #eceee6; overflow: hidden; }
.fvt-bar em { display: block; height: 100%; width: var(--w, 60%); border-radius: 999px; background: linear-gradient(90deg, var(--app-purple), #8f81e8); }

/* ============================================================
   Coins de carte de la grille « fonctionnalités » (home + catalogue)
   Carte lead « Scanner » : mini-photo de cours façon scan.
   Autres cartes : mini-visuel de coin thématisé par outil.
   ============================================================ */
.fx-card-lead .fx-shot { position: absolute; top: -16px; right: -12px; width: clamp(80px, 8vw, 100px); margin: 0; transform: rotate(6deg); pointer-events: none; filter: drop-shadow(0 12px 22px rgba(16, 37, 28, .24)); transition: transform .25s ease; }
.fx-card-lead:hover .fx-shot { transform: rotate(3deg) translateY(-4px); }
.fx-shot-photo { position: relative; display: grid; gap: 4px; padding: 13px 13px 15px; border-radius: 11px; background: linear-gradient(158deg, #fffdf5, #eef1e6); border: 1px solid rgba(16, 37, 28, .08); }
.fx-shot-photo b { font-family: var(--app-display); font-size: 21px; font-weight: 700; letter-spacing: -.04em; color: var(--app-ink); line-height: 1; }
.fx-shot-photo i { font-family: var(--app-mono); font-size: 8px; font-style: normal; letter-spacing: -.02em; color: var(--app-green-dark); white-space: nowrap; }
.fx-shot-corner { position: absolute; width: 13px; height: 13px; border: 2px solid var(--app-green); }
.fx-shot-corner.tl { top: -5px; left: -5px; border-right: 0; border-bottom: 0; border-top-left-radius: 4px; }
.fx-shot-corner.tr { top: -5px; right: -5px; border-left: 0; border-bottom: 0; border-top-right-radius: 4px; }
.fx-shot-corner.bl { bottom: -5px; left: -5px; border-right: 0; border-top: 0; border-bottom-left-radius: 4px; }
.fx-shot-corner.br { bottom: -5px; right: -5px; border-left: 0; border-top: 0; border-bottom-right-radius: 4px; }
.fx-card .fx-corner { position: absolute; top: -11px; right: -9px; z-index: 2; display: flex; align-items: center; justify-content: center; margin: 0; pointer-events: none; transform: rotate(4deg); filter: drop-shadow(0 8px 16px rgba(16, 37, 28, .16)); transition: transform .25s ease; }
.fx-card:hover .fx-corner { transform: rotate(2deg) translateY(-3px); }
.fx-c-note { padding: 8px 10px; border-radius: 9px; background: linear-gradient(158deg, #fffdf5, #eef1e6); border: 1px solid rgba(16, 37, 28, .08); }
.fx-c-note b { font-family: var(--app-display); font-size: 14px; font-weight: 700; letter-spacing: -.03em; color: var(--app-ink); }
.fx-c-jx { padding: 7px 12px; border-radius: 999px; background: var(--app-lime); color: var(--app-ink); font-family: var(--app-display); font-size: 14px; font-weight: 750; letter-spacing: -.02em; }
.fx-c-stack { width: 46px; height: 40px; }
.fx-c-stack i { position: absolute; width: 34px; height: 26px; border-radius: 6px; background: #fff; border: 1px solid rgba(16, 37, 28, .1); box-shadow: 0 2px 5px rgba(16, 37, 28, .08); }
.fx-c-stack i:nth-child(1) { top: 8px; left: 0; transform: rotate(-9deg); background: var(--app-green-soft); }
.fx-c-stack i:nth-child(2) { top: 4px; left: 6px; transform: rotate(2deg); }
.fx-c-stack i:nth-child(3) { top: 0; left: 12px; transform: rotate(10deg); }
.fx-c-score { padding: 7px 10px; border-radius: 11px; background: var(--app-green); color: #fff; align-items: baseline; gap: 1px; }
.fx-c-score b { font-family: var(--app-display); font-size: 16px; font-weight: 750; }
.fx-c-score u { text-decoration: none; font-size: 9px; opacity: .85; }
.fx-c-bubble { width: 38px; height: 34px; border-radius: 12px 12px 12px 3px; background: var(--app-ink); color: #fff; font-family: var(--app-display); font-size: 17px; font-weight: 700; }
.fx-c-grade { padding: 7px 10px; border-radius: 11px; background: #fff; border: 1px solid rgba(16, 37, 28, .1); align-items: baseline; gap: 1px; }
.fx-c-grade b { font-family: var(--app-display); font-size: 16px; font-weight: 750; color: #e0654f; }
.fx-c-grade u { text-decoration: none; font-size: 9px; color: var(--app-muted); }
.fx-c-books { gap: 3px; padding: 8px; border-radius: 9px; background: #fff; border: 1px solid rgba(16, 37, 28, .1); align-items: flex-end; height: 40px; }
.fx-c-books i { width: 6px; border-radius: 2px; }
.fx-c-books i:nth-child(1) { height: 20px; background: var(--app-green); }
.fx-c-books i:nth-child(2) { height: 26px; background: var(--app-purple); }
.fx-c-books i:nth-child(3) { height: 15px; background: var(--app-orange); }
.fx-c-avatars { width: 58px; height: 34px; }
.fx-c-avatars i { position: absolute; top: 5px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(16, 37, 28, .12); }
.fx-c-avatars i:nth-child(1) { left: 0; background: var(--app-green); }
.fx-c-avatars i:nth-child(2) { left: 15px; background: var(--app-purple); }
.fx-c-avatars i:nth-child(3) { left: 30px; background: var(--app-orange); }
.fx-c-wave { gap: 3px; padding: 9px 11px; border-radius: 11px; background: var(--app-ink); align-items: center; height: 38px; }
.fx-c-wave i { width: 3px; border-radius: 2px; background: var(--app-lime); }
.fx-c-wave i:nth-child(1) { height: 8px; }
.fx-c-wave i:nth-child(2) { height: 17px; }
.fx-c-wave i:nth-child(3) { height: 23px; }
.fx-c-wave i:nth-child(4) { height: 12px; }
.fx-c-wave i:nth-child(5) { height: 18px; }
.fx-c-rec { gap: 5px; padding: 7px 11px; border-radius: 999px; background: #fff; border: 1px solid rgba(16, 37, 28, .1); font-family: var(--app-mono); font-size: 10px; font-weight: 700; letter-spacing: .08em; color: var(--app-ink); }
.fx-c-rec i { width: 8px; height: 8px; border-radius: 50%; background: #e0654f; }
.fx-c-streak { gap: 3px; padding: 6px 11px; border-radius: 999px; background: var(--app-sand); border: 1px solid rgba(239, 146, 87, .4); font-size: 13px; }
.fx-c-streak b { font-family: var(--app-display); font-size: 15px; font-weight: 750; color: var(--app-orange); }