@charset "UTF-8";
/* =========================================================================
   Ryze — la feuille du site
   -------------------------------------------------------------------------
   Le site porte le sol de l'application, pas une interprétation : le dégradé
   de papier, l'auréole chaude en haut à droite, l'auréole froide en bas à
   gauche et la grille fine qui s'éteint aux deux bouts sont ceux de
   `OnbBackground`, et les couleurs sont celles de `lib/design/palette.dart`,
   valeur pour valeur.

   Une seule palette, celle de l'édition Nuit : c'est celle de l'icône, de
   l'écran de lancement et des captures que la page montre. Le site et l'app
   doivent se ressembler jusqu'au ton du gris ; un site qui propose quatre
   habits ne ressemble plus à rien en particulier.

   La règle qui rend la palette lisible d'un coup d'œil, et qui vaut ici :
     · l'encre (le navy de marque) est tout ce qu'on choisit ou qu'on presse
     · l'ambre est tout ce que Ryze rend — la jauge, la progression, l'essai
     · l'ambre ne s'écrit jamais en texte sur le papier ; quand il doit porter
       un mot sur fond clair, c'est `--acc-ink` qui s'en charge
   ========================================================================= */

/* ------------------------------------------------------------- 1. jetons */

:root {
  /* ---- Édition Nuit : navy et ambre sur papier gris. L'identité, le défaut. */
  --paper0: #f8f9fb;
  --paper:  #f5f6f8;
  --paper2: #eef0f4;
  --surf:   #ffffff;

  --text:  #0b132b;
  --mute:  #5f6779;
  --mute2: #9aa1b2;
  --idle:  #d5dae1;

  --ink:  #0b132b;
  --ink2: #1b2a5b;

  --acc:       #f2a93b;
  --acc-deep:  #d98a16;
  --acc-light: #ffc766;
  --acc-tint:  #fdf1dc;
  --acc-ink:   #9a5f0c;

  --danger: #a62f1c;
  --shadow: 11, 19, 43;      /* en composantes, pour les ombres translucides */
  --on-acc: var(--ink);      /* ce qui s'écrit sur l'ambre */
  --on-ink: var(--surf);     /* ce qui s'écrit sur la marque */

  /* Les points de macros : le seul endroit où une troisième teinte est admise. */
  --protein: #3b82f6;
  --carbs:   #f59e0b;
  --fat:     #ef4444;
  --green:   #17b26a;

  /* ---- traits, rayons, ombres --------------------------------------- */
  /* Un trait est une séparation, pas une identité : il dérive du texte et
     non de la marque, pour rester discret même quand la marque est vive. */
  --line:  rgba(var(--shadow), .11);
  --line2: rgba(var(--shadow), .06);

  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  --sh-card: 0 8px 24px rgba(var(--shadow), .08);
  --sh-lift: 0 10px 28px rgba(var(--shadow), .18);
  --sh-deep: 0 24px 60px rgba(var(--shadow), .16);

  /* ---- rythme --------------------------------------------------------- */
  --gut: clamp(20px, 5vw, 40px);
  --maxw: 1180px;
  --sec: clamp(72px, 11vw, 148px);

  /* ---- mouvement ------------------------------------------------------ */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --fast: .18s var(--ease);
  --slow: .5s var(--ease);

  color-scheme: light;
}

/* ------------------------------------------------------------ 2. polices */
/* Les deux variables que l'application embarque. Rien n'attend le réseau
   d'un tiers, et le titre du site est tracé par la fonte des écrans. */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/Archivo-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/InstrumentSans-Variable.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
}

/* ---------------------------------------------------------- 3. la remise */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; display: block; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection { background: var(--acc); color: var(--on-acc); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 200;
  transform: translateY(-160%);
  background: var(--ink); color: var(--on-ink);
  padding: 10px 18px; border-radius: var(--r-pill);
  font-weight: 600; transition: transform var(--fast);
}
.skip-link:focus { transform: none; }

/* --------------------------------------------------------------- 4. sol */
/* Le port du fond de l'application. Fixe : la grille et les auréoles
   tiennent l'écran pendant que la page défile, comme elles tiennent un
   écran de l'app pendant qu'on remonte une liste. */

.ground {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    /* l'auréole chaude, en haut à droite : elle suit ce que Ryze rend */
    radial-gradient(72vw 58vw at 92% -12%,
      color-mix(in srgb, var(--acc-light) 30%, transparent) 0%,
      transparent 62%),
    /* l'auréole froide, en bas à gauche : elle suit la marque */
    radial-gradient(62vw 48vw at -8% 108%,
      color-mix(in srgb, var(--ink2) 8%, transparent) 0%,
      transparent 60%),
    /* le papier, du haut clair au bas un peu plus dense */
    linear-gradient(180deg, var(--paper0) 0%, var(--paper) 50%, var(--paper2) 100%);
}

/* La grille se trace dans le texte, comme les traits : une séparation, pas
   une identité. Elle est celle de l'app, au même pas de 32 points. */
.ground::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(90deg, var(--grid-c) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(0deg,  var(--grid-c) 0 1px, transparent 1px 32px);
  --grid-c: color-mix(in srgb, var(--text) 4.5%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
}

/* ------------------------------------------------------------ 5. gabarit */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.wrap--narrow { max-width: 760px; }
.wrap--mid { max-width: 940px; }

section { padding-block: var(--sec); }
section:first-of-type { padding-block-start: clamp(96px, 14vw, 168px); }

/* Un panneau plein — l'encre de l'édition d'un bord à l'autre. C'est le
   registre des planches de l'App Store : là, et là seulement, l'ambre
   s'écrit en toutes lettres. */
.panel {
  background: var(--ink);
  color: var(--on-ink);
  --text: var(--on-ink);
  --mute: color-mix(in srgb, var(--on-ink) 66%, transparent);
  --line: color-mix(in srgb, var(--on-ink) 14%, transparent);
  --line2: color-mix(in srgb, var(--on-ink) 8%, transparent);
  --surf: color-mix(in srgb, var(--on-ink) 7%, transparent);
  position: relative;
  overflow: hidden;
}

/* Le rai de lumière chaude en travers du panneau : la signature des planches. */
.panel::before {
  content: "";
  position: absolute;
  inset: -20% -10%;
  background:
    radial-gradient(60% 42% at 78% 10%,
      color-mix(in srgb, var(--acc) 22%, transparent) 0%, transparent 70%),
    linear-gradient(112deg, transparent 38%,
      color-mix(in srgb, var(--acc) 13%, transparent) 50%, transparent 62%);
  pointer-events: none;
}
.panel > * { position: relative; }

/* ---------------------------------------------------------- 6. écriture */

h1, h2, h3, h4, .display {
  font-family: "Archivo", "Instrument Sans", system-ui, sans-serif;
  font-weight: 800;
  font-variation-settings: "wght" 800, "wdth" 100;
  letter-spacing: -.028em;
  line-height: 1.04;
  margin: 0;
  text-wrap: balance;
}

h1, .t-hero  { font-size: clamp(2.3rem, 4vw, 3.5rem); }
h2, .t-sec   { font-size: clamp(2rem, 4.4vw, 3.15rem); }
h3, .t-card  { font-size: clamp(1.22rem, 2.1vw, 1.5rem); letter-spacing: -.022em; line-height: 1.14; }
h4           { font-size: 1.06rem; letter-spacing: -.018em; }

p { margin: 0; }
p + p { margin-top: .9em; }

.lede {
  font-size: clamp(1.06rem, 1.6vw, 1.28rem);
  line-height: 1.5;
  color: var(--mute);
  max-width: 56ch;
  text-wrap: pretty;
}

/* La seconde ligne d'un titre, celle que les planches posent en ambre.
   Sur le papier elle prend l'ambre foncé — le seul qui porte du texte ;
   sur un panneau plein, l'ambre franc. */
.gold { color: var(--acc-ink); }
.panel .gold { color: var(--acc); }

.kicker {
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 0 0 14px;
}

/* ---- l'entête d'une section ------------------------------------------
   Un numéro, un mot, et une jauge qui dit où l'on en est dans la page.
   La jauge n'est pas un ornement : c'est l'instrument de l'app — la piste
   grise, la part ambre — remis à sa fonction, indiquer une progression.
   Les titres centrés au milieu d'une colonne étroite sont ce que fait
   tout le monde ; ici la page se lit comme une suite numérotée, dans
   l'ordre où l'on se sert de l'application. */

.shead { margin-bottom: clamp(26px, 4vw, 44px); }

.shead__top {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.shead__n {
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--acc-ink);
  flex: none;
}
.shead__k {
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--mute);
  flex: none;
}
.shead__gauge {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--idle);
  overflow: hidden;
  min-width: 40px;
}
.shead__gauge i {
  display: block;
  height: 100%;
  width: var(--p, 0%);
  background: var(--acc);
  border-radius: 2px;
}
.panel .shead__k { color: color-mix(in srgb, var(--on-ink) 62%, transparent); }
.panel .shead__n { color: var(--acc); }
.panel .shead__gauge { background: color-mix(in srgb, var(--on-ink) 16%, transparent); }

.shead h2, .shead h3 { max-width: 20ch; }
.shead .lede { margin-top: 18px; }

.num {
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  font-variation-settings: "wght" 800;
  letter-spacing: -.04em;
  line-height: .92;
  font-size: clamp(2.6rem, 5.2vw, 3.6rem);
}

.small { font-size: .92rem; color: var(--mute); }
.tiny  { font-size: .82rem; color: var(--mute); }
strong, b { font-weight: 650; color: var(--text); }

/* --------------------------------------------------------- 7. commandes */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 26px;
  border: 0;
  border-radius: var(--r-pill);
  font: inherit;
  font-weight: 650;
  font-size: 1.02rem;
  letter-spacing: -.01em;
  cursor: pointer;
  transition: transform var(--fast), box-shadow var(--fast), background var(--fast);
  will-change: transform;
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* La marque : ce qu'on presse. */
.btn--ink { background: var(--ink); color: var(--on-ink); box-shadow: var(--sh-card); }
.btn--ink:hover { box-shadow: var(--sh-lift); }

/* Le retour : l'essai, et rien d'autre. Un seul bouton d'or par page. */
.btn--gold { background: var(--acc); color: var(--on-acc); box-shadow: 0 8px 22px color-mix(in srgb, var(--acc) 38%, transparent); }
.btn--gold:hover { background: var(--acc-deep); }

.btn--ghost {
  background: transparent;
  color: var(--text);
  box-shadow: inset 0 0 0 1.5px var(--line);
}
.btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--text); }

.btn--sm { padding: 10px 18px; font-size: .93rem; }

.btn__store { width: 21px; height: 21px; flex: none; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px 7px 12px;
  border-radius: var(--r-pill);
  background: var(--acc);
  color: var(--on-acc);
  font-weight: 650;
  font-size: .88rem;
  letter-spacing: -.005em;
}
.badge--quiet {
  background: var(--acc-tint);
  color: var(--acc-ink);
}
.panel .badge--quiet { background: color-mix(in srgb, var(--acc) 18%, transparent); color: var(--acc-light); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: var(--r-pill);
  background: var(--surf);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: .85rem;
  font-weight: 550;
  color: var(--mute);
}

/* ------------------------------------------------------------ 8. cartes */

.card {
  background: var(--surf);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-card), inset 0 0 0 1px var(--line2);
  padding: clamp(22px, 3vw, 32px);
}

.card--flat { box-shadow: inset 0 0 0 1px var(--line); }

.grid {
  display: grid;
  gap: clamp(16px, 2.2vw, 24px);
}
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------ 9. le téléphone */
/* Une maquette dessinée, pas une image de cadre : elle prend la couleur de
   l'édition, elle reste nette à tous les zooms et elle ne pèse rien. */

.phone {
  position: relative;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 1170 / 2532;
  border-radius: 46px;
  padding: 9px;
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--ink) 88%, #fff 12%),
    var(--ink) 42%,
    color-mix(in srgb, var(--ink) 78%, #000 22%));
  box-shadow: var(--sh-deep), 0 0 0 1px rgba(var(--shadow), .22);
  margin-inline: auto;
  isolation: isolate;
}

.phone__screen {
  width: 100%;
  height: 100%;
  border-radius: 38px;
  overflow: hidden;
  background: var(--paper);
  display: block;
  object-fit: cover;
}

/* L'encoche : deux points et une barre, comme le haut d'un iPhone. */
.phone::after {
  content: "";
  position: absolute;
  top: 20px; left: 50%;
  transform: translateX(-50%);
  width: 31%; height: 22px;
  border-radius: var(--r-pill);
  background: var(--ink);
  filter: brightness(.55);
  z-index: 2;
}

.phone--tilt { transform: rotate(-2.4deg); }
.phone--tilt-r { transform: rotate(2.4deg); }

/* --------------------------------------------------------- 10. l'entête */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--paper0) 78%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
          backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--fast), background var(--fast);
}
.nav[data-stuck="true"] {
  border-bottom-color: var(--line);
  background: color-mix(in srgb, var(--paper0) 92%, transparent);
}

.nav__row {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 26px);
  height: 68px;
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  font-size: 1.16rem;
  letter-spacing: -.03em;
  color: var(--ink);
  flex: none;
}
.nav__mark { width: 17px; color: var(--ink); }

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(4px, 1.4vw, 20px);
  margin-inline-start: auto;
  list-style: none;
  padding: 0;
  margin-block: 0;
}
.nav__links a {
  font-size: .95rem;
  font-weight: 550;
  color: var(--mute);
  padding: 8px 6px;
  transition: color var(--fast);
}
.nav__links a:hover, .nav__links a[aria-current] { color: var(--text); }

.nav__tools { display: flex; align-items: center; gap: 10px; flex: none; }

@media (max-width: 1000px) {
  .nav__links { display: none; }
}

/* le sélecteur de langue --------------------------------------------- */
.lang { position: relative; }
.lang__btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  border: 0; border-radius: var(--r-pill);
  background: var(--surf);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--text);
  font: inherit; font-size: .86rem; font-weight: 650;
  letter-spacing: .04em; text-transform: uppercase;
  cursor: pointer;
}
.lang__menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 158px;
  background: var(--surf);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lift), inset 0 0 0 1px var(--line);
  padding: 6px;
  list-style: none; margin: 0;
  display: none;
  z-index: 10;
}
.lang[data-open="true"] .lang__menu { display: block; }
.lang__menu a {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 9px 12px; border-radius: 10px;
  font-size: .93rem; font-weight: 550;
}
.lang__menu a:hover { background: var(--paper2); }
.lang__menu a[aria-current] { color: var(--ink); font-weight: 650; }
.lang__menu span { color: var(--mute2); font-size: .8rem; letter-spacing: .05em; }

/* le menu court ------------------------------------------------------- */
.burger {
  display: none;
  width: 40px; height: 40px;
  border: 0; border-radius: var(--r-pill);
  background: var(--surf);
  box-shadow: inset 0 0 0 1px var(--line);
  cursor: pointer;
  padding: 0;
  place-items: center;
}
.burger span, .burger span::before, .burger span::after {
  content: ""; display: block;
  width: 16px; height: 1.8px;
  background: var(--text);
  border-radius: 2px;
  transition: transform var(--fast), opacity var(--fast);
}
.burger span::before { transform: translateY(-5px); }
.burger span::after  { transform: translateY(3.2px); }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: rotate(45deg) translateY(0); }
.burger[aria-expanded="true"] span::after  { transform: rotate(-45deg) translateY(-1.8px); }

@media (max-width: 1000px) { .burger { display: grid; } }

.drawer {
  display: none;
  padding: 8px 0 22px;
  border-top: 1px solid var(--line);
}
.drawer[data-open="true"] { display: block; }
.drawer ul { list-style: none; margin: 0; padding: 0; }
.drawer a {
  display: block;
  padding: 13px 2px;
  font-size: 1.05rem;
  font-weight: 550;
  border-bottom: 1px solid var(--line2);
}
.drawer .btn { margin-top: 18px; width: 100%; }

/* --------------------------------------------------------- 11. le héros */

.hero {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
@media (max-width: 940px) {
  .hero { grid-template-columns: 1fr; text-align: center; }
  .hero .lede, .hero__proof { margin-inline: auto; }
  .hero__cta { justify-content: center; }
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.hero h1 { margin-bottom: 18px; }

.hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 26px;
  padding: 0;
  list-style: none;
  max-width: 52ch;
}
.hero__proof li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .93rem;
  color: var(--mute);
  font-weight: 550;
}
.hero__proof li::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--acc);
  flex: none;
}

/* -------------------------------------------------- 12. la bande de preuve */
/* Trois chiffres pris dans les captures elles-mêmes. Ce ne sont pas des
   arguments : ce sont ce que l'app affiche, ce qui est vérifiable en trois
   secondes sur la planche d'à côté. */

.proof {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-card);
}
.proof__cell {
  background: var(--surf);
  padding: clamp(22px, 3vw, 34px);
}
/* `.proof__cell p` porte le petit texte et gagnerait sur `.num` à égalité de
   poids : le chiffre reprend donc sa taille ici, à la même spécificité. */
.proof__cell p        { margin-top: 10px; font-size: .95rem; color: var(--mute); }
.proof__cell p.num    { margin-top: 0; font-size: clamp(2.6rem, 5.2vw, 3.6rem); color: var(--text); }
@media (max-width: 700px) { .proof { grid-template-columns: 1fr; } }

/* ------------------------------------------------------ 13. une capacité */
/* Le texte d'un côté, l'écran de l'autre, et le côté alterne. C'est la
   forme des planches, dépliée à l'horizontale. */

.feat {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 6vw, 84px);
  align-items: center;
}
.feat + .feat { margin-top: clamp(64px, 9vw, 120px); }
.feat--flip .feat__body { order: 2; }
@media (max-width: 900px) {
  .feat { grid-template-columns: 1fr; gap: 34px; }
  .feat--flip .feat__body { order: 0; }
}

.feat__body h3 { margin-bottom: 14px; font-size: clamp(1.75rem, 3.4vw, 2.5rem); letter-spacing: -.028em; }
.feat__body .lede { margin-bottom: 20px; }

.feat__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}
.feat__list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  font-size: .97rem;
  color: var(--mute);
}
.feat__list li::before {
  content: "";
  width: 20px; height: 20px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--acc-tint);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--acc) 55%, transparent);
  background-image: linear-gradient(var(--acc-ink), var(--acc-ink)), linear-gradient(var(--acc-ink), var(--acc-ink));
  background-size: 6px 1.6px, 1.6px 6px;
  background-position: 7px 9px, 9px 7px;
  background-repeat: no-repeat;
}
.panel .feat__list li::before { background-image: linear-gradient(var(--acc), var(--acc)), linear-gradient(var(--acc), var(--acc)); }

/* ------------------------------------------------- 14. la vitrine App Store */

/* Le rail va d'un bord à l'autre : il est donc posé hors de `.wrap`, et ses
   marges intérieures replacent la première planche sous le titre. Le calcul
   est en pourcentages du parent et non en `vw` — `vw` compte la barre de
   défilement, ce qui faisait déborder la page de deux points. */
.rail {
  display: flex;
  gap: clamp(14px, 2vw, 22px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 6px max(var(--gut), calc((100% - var(--maxw)) / 2 + var(--gut))) 26px;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--text) 22%, transparent) transparent;
}
.rail::-webkit-scrollbar { height: 8px; }
.rail::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text) 22%, transparent);
  border-radius: 99px;
}
.rail__item {
  flex: none;
  width: clamp(210px, 26vw, 264px);
  scroll-snap-align: center;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--sh-deep);
  transition: transform var(--fast);
}
.rail__item:hover { transform: translateY(-6px); }
.rail__item img { width: 100%; }

/* --------------------------------------------------- 15. le comparatif */

.table-scroll {
  overflow-x: auto;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-card), inset 0 0 0 1px var(--line2);
  background: var(--surf);
}

table.cmp {
  width: 100%;
  min-width: 660px;
  border-collapse: collapse;
  font-size: .95rem;
}
table.cmp th, table.cmp td {
  padding: 15px 18px;
  text-align: left;
  border-bottom: 1px solid var(--line2);
  vertical-align: top;
}
table.cmp thead th {
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  font-size: .88rem;
  letter-spacing: -.01em;
  color: var(--mute);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
table.cmp tbody th {
  font-weight: 600;
  color: var(--text);
  width: 30%;
}
table.cmp td { color: var(--mute); }
table.cmp tr:last-child th, table.cmp tr:last-child td { border-bottom: 0; }

/* La colonne Ryze est tenue par la marque, pas par une couleur de plus. */
table.cmp .col-ryze {
  background: color-mix(in srgb, var(--acc) 9%, var(--surf));
  color: var(--text);
  font-weight: 550;
}
table.cmp thead .col-ryze {
  color: var(--text);
  font-weight: 800;
  border-bottom-color: var(--acc);
}
/* La grammaire de remplissage de l'app, telle quelle : une seule variable
   visuelle porte l'état. Plein pour ce qui est tenu, contour pour ce qui
   l'est à moitié, gris clair pour ce qui ne l'est pas. Des ✓ et des ✗
   auraient dit la même chose dans la langue de n'importe quel tableau ;
   ceux-ci sont ceux des cases de la semaine, dans l'application. */
.mark {
  display: inline-block;
  width: 11px; height: 11px;
  border-radius: 3.5px;
  margin-right: 9px;
  vertical-align: baseline;
  flex: none;
}
.mark--yes  { background: var(--ink); }
.mark--part { box-shadow: inset 0 0 0 1.6px var(--ink); }
.mark--no   { background: var(--idle); }

/* -------------------------------------------------------- 17. le tarif */

.price {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2vw, 20px);
  align-items: stretch;
}
@media (max-width: 860px) { .price { grid-template-columns: 1fr; } }

.price__card { display: grid; gap: 8px; align-content: start; position: relative; }
.price__card--best {
  box-shadow: var(--sh-lift), inset 0 0 0 2px var(--acc);
}
.price__amount { display: flex; align-items: baseline; gap: 8px; margin-block: 6px 4px; }
.price__amount .num { font-size: clamp(2.3rem, 4.4vw, 3rem); }
.price__flag {
  position: absolute; top: -13px; right: 18px;
  font-size: .8rem; padding: 5px 12px;
}
.price__list { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 9px; }
.price__list li { font-size: .94rem; color: var(--mute); display: grid; grid-template-columns: 18px 1fr; gap: 10px; }
.price__list li::before { content: "✓"; color: var(--acc-ink); font-weight: 700; }

/* --------------------------------------------------------- 18. la FAQ */

.faq { display: grid; gap: 10px; }

details.qa {
  background: var(--surf);
  border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px var(--line);
  overflow: hidden;
}
details.qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 19px 22px;
  cursor: pointer;
  font-weight: 600;
  font-size: 1.02rem;
  list-style: none;
}
details.qa summary::-webkit-details-marker { display: none; }
details.qa summary::after {
  content: "";
  flex: none;
  width: 11px; height: 11px;
  border-right: 2px solid var(--mute);
  border-bottom: 2px solid var(--mute);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--fast);
}
details.qa[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
details.qa[open] summary { color: var(--ink); }
.qa__body { padding: 0 22px 22px; color: var(--mute); font-size: .97rem; }
.qa__body ul, .qa__body ol { margin: 10px 0 0; padding-left: 20px; }
.qa__body li + li { margin-top: 6px; }
.qa__body a { color: var(--acc-ink); text-decoration: underline; text-underline-offset: 3px; }
.panel .qa__body a { color: var(--acc); }

/* ---------------------------------------------------- 19. le pied de page */

.foot {
  border-top: 1px solid var(--line);
  padding-block: clamp(46px, 6vw, 72px) 34px;
  margin-top: var(--sec);
}
.foot__top {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: clamp(24px, 4vw, 48px);
}
@media (max-width: 860px) { .foot__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot__top { grid-template-columns: 1fr; } }

.foot__lock { display: grid; gap: 14px; align-content: start; }
.foot__lock .nav__brand { font-size: 1.35rem; }
.foot h5 {
  font-family: "Archivo", sans-serif;
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--mute2); margin: 0 0 12px; font-weight: 700;
}
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.foot ul a { font-size: .94rem; color: var(--mute); }
.foot ul a:hover { color: var(--text); }
.foot__bar {
  margin-top: clamp(34px, 5vw, 54px);
  padding-top: 22px;
  border-top: 1px solid var(--line2);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  align-items: center;
  justify-content: space-between;
  font-size: .86rem;
  color: var(--mute2);
}

/* ------------------------------------------------- 20. pages de texte */

.doc { max-width: 760px; }
.doc h2 {
  font-size: clamp(1.5rem, 2.6vw, 1.95rem);
  margin-top: clamp(38px, 5vw, 56px);
  margin-bottom: 14px;
  scroll-margin-top: 96px;
}
.doc h3 { font-size: 1.12rem; margin-top: 26px; margin-bottom: 8px; }
.doc p, .doc li { color: var(--mute); }
.doc p + p, .doc ul + p, .doc p + ul { margin-top: 12px; }
.doc ul, .doc ol { padding-left: 22px; margin: 12px 0 0; }
.doc li + li { margin-top: 7px; }
.doc a { color: var(--acc-ink); text-decoration: underline; text-underline-offset: 3px; }
.doc strong { color: var(--text); }

.doc__meta {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 18px;
}

.callout {
  margin-top: 18px;
  padding: 18px 20px;
  border-radius: var(--r-md);
  background: var(--acc-tint);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 32%, transparent);
  color: var(--text);
  font-size: .95rem;
}
.callout strong { color: var(--acc-ink); }

.toc {
  position: sticky; top: 92px;
  align-self: start;
  display: grid; gap: 6px;
  font-size: .9rem;
}
.toc a { color: var(--mute); padding: 4px 0; }
.toc a:hover { color: var(--text); }
@media (max-width: 1000px) { .toc { display: none; } }

.doc-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: clamp(28px, 5vw, 64px);
}
@media (max-width: 1000px) { .doc-layout { grid-template-columns: 1fr; } }

/* --------------------------------------------------- 21. l'apparition */
/* Le contenu monte de quatorze points en arrivant.
   L'état caché est sous `.js`, posé par le script en tête de page : sans
   JavaScript — ou si le fichier ne se charge pas — le site s'affiche
   entier plutôt que de rester en blanc. Une animation ne doit jamais être
   ce dont dépend la lisibilité. */

.rise { transition: opacity .55s var(--ease), transform .55s var(--ease); }

.js .rise { opacity: 0; transform: translateY(14px); }
.js .rise[data-seen="true"] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .rise { opacity: 1; transform: none; }
}

/* ------------------------------------------------------ 22. utilitaires */

.stack   { display: grid; gap: clamp(14px, 2vw, 22px); }
.center  { text-align: center; }
.center .lede { margin-inline: auto; }
.mt-l    { margin-top: clamp(28px, 4vw, 48px); }
.mb-l    { margin-bottom: clamp(28px, 4vw, 48px); }
.row     { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.row--c  { justify-content: center; }
.dim     { color: var(--mute); }

@media print {
  .nav, .foot, .ground, .rail, .btn { display: none !important; }
  body { background: #fff; color: #000; }
}

/* =========================================================================
   23. Le téléphone
   -------------------------------------------------------------------------
   La plupart des visites viennent d'un téléphone : un lien d'App Store se
   partage dans un message, pas dans un signet de bureau. Ce qui suit n'est
   donc pas un rattrapage de fin de feuille — c'est la moitié qui compte.
   ========================================================================= */

.wide-only { display: inline; }
.narrow-only { display: none; }

@media (max-width: 720px) {
  .wide-only { display: none; }
  .narrow-only { display: inline; }
  /* L'appel reste dans la barre : c'est la seule chose que le site a
     à offrir à quelqu'un qui arrive de son téléphone. */
  .nav__cta { display: inline-flex; padding: 10px 15px; }
  .nav__row { height: 60px; gap: 8px; }
  .lang__btn { padding: 8px 10px; }
}

@media (max-width: 720px) {
  /* Le premier écran d'un téléphone est petit : la promesse doit y tenir,
     pas commencer sous la ligne de flottaison. */
  section:first-of-type { padding-block-start: 44px; }
  /* Une cible tactile se prend au pouce : quarante-quatre points au moins. */
  .nav__brand { padding-block: 8px; }
  .foot ul a { padding-block: 6px; display: inline-block; }
}

@media (max-width: 420px) {
  :root { --gut: 18px; }
  h1, .t-hero { font-size: clamp(1.95rem, 8.4vw, 2.5rem); }
  h2, .t-sec  { font-size: clamp(1.7rem, 7.4vw, 2.1rem); }
  body { font-size: 16px; }
  .btn { padding: 15px 20px; width: 100%; }
  .nav__cta, .btn--sm, .installbar .btn { width: auto; }
  .hero__cta { flex-direction: column; align-items: stretch; }
}

/* ---- la légende d'une capture -----------------------------------------
   Deux mentions posées sous l'écran, avec le point d'ambre des planches.
   Elles ont d'abord été des traits partant d'un point précis de la capture,
   comme sur les planches de l'App Store. Un trait ne vaut que s'il vise
   juste : viser juste demandait de connaître, au point près, la position
   d'un nombre à l'intérieur d'une image, dans sept écrans et trois langues —
   et la maquette flottait, ce qui décalait le trait de l'écran qu'il
   désignait. Une légende ne peut pas se décaler. */

.phone-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.pin { display: inline-flex; }

.pin__label {
  position: relative;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text);
  background: var(--surf);
  border-radius: var(--r-pill);
  padding: 7px 14px 7px 27px;
  display: inline-block;
  box-shadow: var(--sh-card), inset 0 0 0 1px var(--line);
  white-space: normal;
}
.pin__label::before {
  content: "";
  position: absolute;
  left: 12px; top: 50%;
  margin-top: -3.5px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--acc);
}
/* Le chiffre d'une légende prend la fonte des chiffres de l'app. */
.pin__label b { font-family: "Archivo", sans-serif; font-weight: 800; letter-spacing: -.02em; }

.phone-stage .pin:first-of-type { margin-top: 18px; }

.panel .pin__label { background: var(--surf); color: var(--on-ink); }

/* ---- le comparatif, sur un écran étroit -------------------------------
   Cinq colonnes sur trois cent quatre-vingt-dix points ne se lisent pas,
   et un tableau qui défile de côté se lit encore moins. Chaque ligne
   devient une fiche : la question en titre, la réponse de Ryze détachée
   et en premier, les autres en dessous. */

@media (max-width: 760px) {
  .table-scroll { overflow: visible; background: transparent; box-shadow: none; }
  table.cmp { min-width: 0; display: block; }
  table.cmp thead { display: none; }
  table.cmp tbody, table.cmp tr, table.cmp th, table.cmp td { display: block; }
  table.cmp tr {
    background: var(--surf);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-card), inset 0 0 0 1px var(--line2);
    padding: 18px 20px;
    margin-bottom: 12px;
    overflow: hidden;
  }
  table.cmp tbody th {
    width: auto;
    padding: 0 0 12px;
    border: 0;
    font-family: "Archivo", sans-serif;
    font-weight: 700;
    font-size: 1.02rem;
    letter-spacing: -.02em;
    line-height: 1.2;
  }
  table.cmp td {
    padding: 9px 0 9px 26px;
    border: 0;
    border-top: 1px solid var(--line2);
    font-size: .9rem;
    position: relative;
  }
  table.cmp td::before {
    content: attr(data-col);
    display: block;
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mute2);
    margin-bottom: 2px;
  }
  table.cmp td .mark { position: absolute; left: 0; top: 25px; margin: 0; }
  table.cmp td.col-ryze {
    background: color-mix(in srgb, var(--acc) 10%, var(--surf));
    margin-inline: -20px;
    padding-inline: 46px 20px;
    border-radius: 0;
  }
  table.cmp td.col-ryze::before { color: var(--acc-ink); font-weight: 700; }
  table.cmp td.col-ryze .mark { left: 20px; }
}

/* ---- la barre d'installation ------------------------------------------ */

.installbar {
  position: fixed;
  left: 12px; right: 12px; bottom: 12px;
  z-index: 90;
  display: none;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--surf) 92%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
          backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 12px 34px rgba(var(--shadow), .22), inset 0 0 0 1px var(--line);
  transform: translateY(150%);
  transition: transform .42s var(--ease);
}
.installbar img { border-radius: 10px; flex: none; }
.installbar__txt { display: grid; line-height: 1.25; min-width: 0; }
.installbar__txt b { font-family: "Archivo", sans-serif; font-size: .98rem; letter-spacing: -.02em; }
.installbar__txt span {
  font-size: .78rem; color: var(--mute);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.installbar .btn { margin-left: auto; flex: none; }
.installbar[data-shown="true"] { transform: none; }

@media (max-width: 860px) {
  .installbar { display: flex; }
  /* de quoi ne pas masquer la dernière ligne du pied de page */
  .foot { padding-bottom: 104px; }
}

/* =========================================================================
   24. Le mouvement
   -------------------------------------------------------------------------
   Une page de produit doit avoir l'air vivante, et une application de suivi
   a ses propres gestes : une jauge qui se remplit, un chiffre qui se compte,
   un trait qui part vers ce qu'il désigne. Ce sont ceux-là qui sont animés,
   plutôt qu'une apparition générique posée sur tout ce qui passe.

   Tout s'éteint sous `prefers-reduced-motion`, et rien n'est nécessaire
   pour lire : le mouvement décore, il ne porte pas.
   ========================================================================= */

/* ---- la jauge d'une entête se remplit quand la section arrive ---------- */
.shead__gauge i { width: 0; transition: width 1.1s var(--ease) .15s; }
.js .shead[data-seen="true"] .shead__gauge i { width: var(--p, 0%); }
:root:not(.js) .shead__gauge i { width: var(--p, 0%); }

/* ---- le héros arrive par morceaux ------------------------------------- */
@keyframes lift {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes liftScale {
  from { opacity: 0; transform: translateY(28px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

.js .hero__body > * { animation: lift .7s var(--ease) both; }
.js .hero__body > *:nth-child(1) { animation-delay: .05s; }
.js .hero__body > *:nth-child(2) { animation-delay: .14s; }
.js .hero__body > *:nth-child(3) { animation-delay: .23s; }
.js .hero__body > *:nth-child(4) { animation-delay: .32s; }
.js .hero__body > *:nth-child(5) { animation-delay: .41s; }
.js .hero .phone-stage { animation: liftScale .95s var(--ease) both .2s; }

/* ---- le bouton d'or ---------------------------------------------------- */
/* Une lueur lente, et un éclat qui traverse au survol. L'or est le seul
   bouton de la page qui mène à l'App Store : il a le droit de respirer. */
@keyframes gold {
  0%, 100% { box-shadow: 0 8px 22px color-mix(in srgb, var(--acc) 34%, transparent); }
  50%      { box-shadow: 0 10px 30px color-mix(in srgb, var(--acc) 52%, transparent); }
}
.js .btn--gold { animation: gold 3.6s ease-in-out infinite; }

.btn--gold { position: relative; overflow: hidden; isolation: isolate; }
.btn--gold::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 38%,
    rgba(255, 255, 255, .5) 50%, transparent 62%);
  transform: translateX(-130%);
  transition: transform .75s var(--ease);
  z-index: -1;
}
.btn--gold:hover::after { transform: translateX(130%); }

/* ---- le rai de lumière traverse le panneau ---------------------------- */
@keyframes sweep {
  0%   { transform: translateX(-12%); }
  50%  { transform: translateX(12%); }
  100% { transform: translateX(-12%); }
}
.js .panel::before { animation: sweep 18s ease-in-out infinite; }

/* ---- les cartes, au survol -------------------------------------------- */
.card { transition: transform var(--fast), box-shadow var(--fast); }
.grid .card:hover, .price__card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-lift), inset 0 0 0 1px var(--line);
}

/* ---- les liens du pied se soulignent en ambre -------------------------- */
.foot ul a {
  background-image: linear-gradient(var(--acc-ink), var(--acc-ink));
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size var(--fast), color var(--fast);
}
.foot ul a:hover { background-size: 100% 1px; }

/* ---- la FAQ s'ouvre au lieu de sauter --------------------------------- */
details.qa { transition: box-shadow var(--fast); }
details.qa[open] { box-shadow: var(--sh-card), inset 0 0 0 1px var(--line); }
@keyframes qaOpen { from { opacity: 0; transform: translateY(-6px); } }
.js details.qa[open] .qa__body { animation: qaOpen .3s var(--ease) both; }

/* ---- le rail des planches --------------------------------------------- */
.rail__item:hover { transform: translateY(-8px) scale(1.015); }

/* ---- les puces d'une liste de capacité --------------------------------- */
.feat__list li { transition: transform var(--fast); }
.feat__list li:hover { transform: translateX(3px); }

/* ---- la barre du haut se resserre au défilement ------------------------ */
.nav__row { transition: height var(--fast); }
.nav[data-stuck="true"] .nav__row { height: 60px; }
@media (max-width: 720px) { .nav[data-stuck="true"] .nav__row { height: 54px; } }

/* ---- ce qui s'éteint quand le système le demande ---------------------- */
@media (prefers-reduced-motion: reduce) {
  .js .hero__body > *,
  .js .hero .phone-stage,
  .js .phone,
  .js .phone-stage::before,
  .js .panel::before,
  .js .btn--gold,
  .js .pin::before,
  .js .pin::after,
  .js .pin__label,
  .js details.qa[open] .qa__body {
    animation: none !important;
  }
  .shead__gauge i { width: var(--p, 0%) !important; transition: none; }
  .btn--gold::after { display: none; }
}

/* =========================================================================
   25. Les deux ronds, et ce qu'ils disent
   -------------------------------------------------------------------------
   Le port du `SpeakerRow` de l'onboarding : deux bustes ronds qui se
   chevauchent, l'un pour le sport, l'autre pour la nutrition. Celui qui ne
   parle pas est estompé et désaturé — c'est ce seul geste qui dit qui parle,
   sans qu'un nom ait à l'annoncer. Le fond du buste est la marque à 14 %,
   la bordure est la carte, l'ombre est celle des cartes.

   Sur le site, ils entrent par le côté : le coach arrive dans la page comme
   il arrive dans un écran de l'app, et la phrase suit.
   ========================================================================= */

.duo {
  display: inline-flex;
  align-items: center;
  flex: none;
}

.duo img {
  width: var(--duo, 46px);
  height: var(--duo, 46px);
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 20%;
  /* Le fond du buste est *plein*. La marque à 14 % sur du transparent laissait
     passer la page — la grille et le halo traversaient le panda, et les deux
     ronds se lisaient comme deux trous. Elle est donc mélangée à la carte. */
  background: color-mix(in srgb, var(--ink) 14%, var(--surf));
  border: 2px solid var(--surf);
  box-shadow: 0 3px 10px rgba(var(--shadow), .12);
  position: relative;
  z-index: 1;
  transition: opacity var(--slow), filter var(--slow);
}

/* Celui qui parle passe devant l'autre : c'est lui qu'on regarde, et son
   contour blanc doit être entier. */
.duo[data-speaks="sport"] img:first-child,
.duo[data-speaks="nutri"] img:last-child { z-index: 2; }

/* Le second recouvre le premier d'un tiers, comme dans l'onboarding. */
.duo img + img { margin-left: calc(var(--duo, 46px) * -0.38); }

/* Celui qui ne parle pas s'efface. */
.duo[data-speaks="sport"] img:last-child,
.duo[data-speaks="nutri"] img:first-child {
  opacity: .55;
  filter: saturate(.25);
}

/* Sur un panneau plein, le buste garde un fond clair : un panda sombre sur
   du navy ne se voit plus. */
.panel .duo img {
  background: color-mix(in srgb, var(--ink) 14%, #fff);
  border-color: color-mix(in srgb, var(--on-ink) 55%, transparent);
}

/* ---- la réplique --------------------------------------------------- */

.coachline {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 720px;
  margin-block: clamp(44px, 6vw, 76px);
}
.coachline--right {
  flex-direction: row-reverse;
  margin-inline-start: auto;
  text-align: right;
}

.coachline__say {
  position: relative;
  background: var(--surf);
  border-radius: 22px;
  padding: 15px 20px;
  box-shadow: var(--sh-card), inset 0 0 0 1px var(--line2);
  font-size: clamp(.98rem, 1.5vw, 1.1rem);
  line-height: 1.45;
  color: var(--text);
}
.coachline__say b {
  display: block;
  font-family: "Archivo", sans-serif;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mute2);
  font-weight: 700;
  margin-bottom: 5px;
}

/* La petite pointe qui rattache la bulle au buste. */
.coachline__say::before {
  content: "";
  position: absolute;
  left: -6px; top: 50%;
  width: 12px; height: 12px;
  margin-top: -6px;
  background: var(--surf);
  transform: rotate(45deg);
  border-left: 1px solid var(--line2);
  border-bottom: 1px solid var(--line2);
}
.coachline--right .coachline__say::before {
  left: auto; right: -6px;
  border: 0;
  border-right: 1px solid var(--line2);
  border-top: 1px solid var(--line2);
}

@media (max-width: 620px) {
  .coachline { gap: 12px; }
  .coachline__say { padding: 13px 16px; font-size: .95rem; }
  .duo { --duo: 40px; }
}

/* ---- l'entrée par le côté --------------------------------------------- */

@keyframes slideFromLeft  { from { opacity: 0; transform: translateX(-38px); } }
@keyframes slideFromRight { from { opacity: 0; transform: translateX(38px); } }
@keyframes sayIn          { from { opacity: 0; transform: translateY(8px) scale(.97); } }

.js .coachline[data-seen="true"] .duo { animation: slideFromLeft .6s var(--ease) both; }
.js .coachline--right[data-seen="true"] .duo { animation: slideFromRight .6s var(--ease) both; }
.js .coachline[data-seen="true"] .coachline__say { animation: sayIn .5s var(--ease) both .22s; }

/* ---- le panda de l'appel final ---------------------------------------- */
/* Il est là où on demande quelque chose. Une figure entière, pas un buste :
   c'est le seul endroit de la page où le personnage a la place d'exister. */

.cta-coach {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(18px, 3vw, 40px);
  align-items: center;
  text-align: left;
}
.cta-coach__panda {
  width: clamp(112px, 17vw, 190px);
  filter: drop-shadow(0 16px 34px rgba(0, 0, 0, .35));
}
@keyframes wave {
  0%, 100% { transform: rotate(-1.5deg) translateY(0); }
  50%      { transform: rotate(1.5deg) translateY(-7px); }
}
.js .cta-coach__panda { animation: wave 5.5s ease-in-out infinite; }

@media (max-width: 620px) {
  .cta-coach { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .cta-coach .row { justify-content: center; }
}

/* ---- les deux ronds dans le pied de page ------------------------------ */
.foot__lock .duo { --duo: 34px; margin-top: 2px; }

@media (prefers-reduced-motion: reduce) {
  .js .coachline .duo,
  .js .coachline .coachline__say,
  .js .cta-coach__panda { animation: none !important; }
}