/* =========================================================
   Nunito — police auto-hébergée (SIL Open Font License, voir assets/fonts/OFL.txt)
   Fichier variable : couvre les graisses 400 à 900 en deux fichiers.
   Auto-hébergée volontairement : aucune requête vers un tiers, conformément
   à la politique de confidentialité du site.
   ========================================================= */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/nunito-latin.woff2?v=20fc9b6fc6') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/nunito-latin-ext.woff2?v=511ce96737') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* =========================================================
   Mino — feuille de style principale
   Charte reprise de l'application (Nunito + palette Mino)
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  /* Couleurs de marque */
  --blue: #4EB6FF;
  --blue-dark: #2E9BEA;
  --blue-deep: #1568BE;   /* AA (4,5:1) sur blanc, sur --bg et sur --surface-sunken */
  --blue-ink: #12558F;
  --blue-soft: #AEE6FF;
  --purple: #7A7CFF;
  --purple-soft: #E0E1FF;
  --purple-ink: #3F3FA8;
  --mint: #2BC98A;
  --mint-soft: #D3F5E7;
  --green-deep: #0A744A;
  --yellow: #FFC85A;
  --yellow-soft: #FFEFD1;
  --amber-ink: #8A5B08;
  --pink: #FF7DA0;
  --pink-soft: #FFD9E6;
  --pink-ink: #B32F55;
  --peach: #FFB592;

  /* Surfaces */
  --bg: #F2F6FF;
  --surface: #FFFFFF;
  --surface-muted: #F7F9FF;
  --surface-sunken: #EDF2FE;

  /* Texte */
  --navy: #1A1D2E;
  --text: #1A1D2E;
  --text-muted: #5C6485;
  --text-subtle: #626A8C;

  /* Traits */
  --border: #E6ECFA;
  --border-strong: #D4DEF5;
  /* Contour des éléments manipulables (champs, boutons secondaires, pastilles) :
     3:1 minimum sur blanc, sur --bg et sur --surface-sunken. */
  --border-control: #7885B0;
  --danger: #E23A5E;

  /* Rayons */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 34px;
  --r-pill: 999px;

  /* Ombres */
  --sh-sm: 0 2px 6px rgba(26, 29, 46, .05);
  --sh-md: 0 12px 28px -18px rgba(26, 29, 46, .35);
  --sh-lg: 0 28px 60px -32px rgba(26, 29, 46, .45);
  --sh-blue: 0 14px 30px -14px rgba(25, 118, 210, .55);

  /* Rythme */
  --container: 1160px;
  --gutter: clamp(20px, 5vw, 40px);
  --section-y: clamp(64px, 9vw, 120px);
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* Un élément `hidden` ne disparaît que par la feuille du NAVIGATEUR, et
   n'importe quelle règle d'auteur qui pose `display` l'emporte sur elle.
   `.btn { display: inline-flex }` (section 4) écrasait donc le `hidden` du
   bouton « Télécharger sur Google Play » de /telecharger/ : il s'affichait,
   pleinement cliquable, vers une fiche Play qui rend 404 — depuis la seule
   adresse que portent TOUS les QR codes de l'application, les trois courriels
   et les publicités. Une famille dont l'enfant a un Android arrivait donc au
   bout de l'inscription, scannait le code avec le téléphone de son enfant, et
   recevait de Google « impossible de trouver l'URL demandée ». Rien dans la
   base ne l'enregistre : ni tentative, ni erreur. Le 12 octobre 2026,
   `family_devices` et `join_attempts` étaient à zéro pour les 27 familles
   réelles — aucune n'a jamais atteint l'écran du code famille.

   `ouvrir-play.sh` refusait pourtant d'ouvrir ce bouton tant que la fiche rend
   404, et le balisage porte bien `hidden` : l'intention était juste, c'est
   l'attribut qui ne tenait pas. `tunnel.css` pose cette règle depuis le jour
   où le même piège y a laissé une barre grise vide, et il la pose « une fois
   pour toutes » — mais /telecharger/ ne charge pas cette feuille-là.

   Mesuré, pas supposé : sur les vingt pages du site, un seul élément fuyait,
   et c'était ce bouton. Ne jamais rétablir par sélecteur — les trois
   `.renoncer [hidden]`, `.retour [hidden]` et `.outil [hidden]` plus bas sont
   ce qu'on écrit quand on répare l'instance au lieu de la classe. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: Nunito, "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 { margin: 0; line-height: 1.15; letter-spacing: -.02em; font-weight: 800; }
h1 { font-size: clamp(2.15rem, 5.2vw, 3.65rem); font-weight: 900; letter-spacing: -.035em; }
h2 { font-size: clamp(1.75rem, 3.8vw, 2.7rem); font-weight: 900; letter-spacing: -.03em; }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
h4 { font-size: 1.05rem; }
p  { margin: 0; }

a { color: var(--blue-deep); text-decoration-color: rgba(21, 104, 190, .45); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

ul, ol { margin: 0; padding: 0; }

:focus-visible {
  outline: 3px solid var(--blue-deep);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection { background: var(--blue-soft); color: var(--navy); }

.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: absolute; left: 50%; top: 8px; transform: translate(-50%, -160%);
  background: var(--navy); color: #fff; padding: 10px 18px; border-radius: var(--r-pill);
  font-weight: 700; z-index: 200; transition: transform .2s;
}
.skip-link:focus { transform: translate(-50%, 0); }

/* ---------- 3. Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: 800px; }
.container--mid { max-width: 960px; }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(48px, 6vw, 80px); }
.section--white { background: var(--surface); }
.section--sunken { background: var(--surface-sunken); }

.section-head { max-width: 660px; margin-bottom: clamp(36px, 5vw, 60px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { margin-top: 16px; color: var(--text-muted); font-size: 1.075rem; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--blue-ink); background: var(--blue-soft);
  padding: 7px 15px; border-radius: var(--r-pill); margin-bottom: 18px;
}
.eyebrow--purple { color: var(--purple-ink); background: var(--purple-soft); }
.eyebrow--mint { color: var(--green-deep); background: var(--mint-soft); }
.eyebrow--pink { color: var(--pink-ink); background: var(--pink-soft); }
.eyebrow--yellow { color: var(--amber-ink); background: var(--yellow-soft); }

.lead { font-size: clamp(1.05rem, 1.7vw, 1.22rem); color: var(--text-muted); }

.grid { display: grid; gap: clamp(18px, 2.4vw, 26px); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.grid--4 .card { padding: clamp(22px, 2.2vw, 26px); }

.split {
  display: grid; gap: clamp(32px, 6vw, 72px); align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}
.split--reverse .split__media { order: -1; }
@media (max-width: 767px) { .split--reverse .split__media { order: 0; } }

/* ---------- 4. Boutons ---------- */
/* Un bouton désactivé doit se voir, et pas seulement par la couleur. Mesuré à
   375 px le 17 octobre 2026 : « Continuer » (question 3) et « Créer mon
   espace » étaient `disabled` mais rendus opacity 1, fond bleu plein, curseur
   main — indiscernables d'un bouton actif. Le parent appuyait, rien ne se
   passait, et la seule explication tombait sous la ligne de flottaison. Sur la
   page que la publicité remplit, cela se paie en inscriptions perdues.
   `cursor: progress` reste aux boutons d'envoi, plus bas : eux travaillent. */
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: inherit; font-weight: 800; font-size: 1.0625rem; line-height: 1.2;
  padding: 16px 30px; border-radius: var(--r-pill); border: 2px solid transparent;
  cursor: pointer; text-decoration: none; text-align: center;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--blue-deep); color: #fff; box-shadow: var(--sh-blue); }
.btn--primary:hover { background: var(--blue-ink); }

.btn--secondary {
  background: var(--surface); color: var(--navy);
  border-color: var(--border-control); box-shadow: var(--sh-sm);
}
.btn--secondary:hover { border-color: var(--blue-deep); }

.btn--ghost { background: transparent; color: var(--blue-deep); padding-inline: 8px; }

.btn--light { background: #fff; color: var(--blue-deep); box-shadow: var(--sh-md); }

.btn--sm { padding: 11px 20px; font-size: .95rem; }
.btn--lg { padding: 19px 38px; font-size: 1.125rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.btn-row--center { justify-content: center; }

.note-under {
  margin-top: 16px; font-size: .93rem; color: var(--text-muted);
  display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center;
}
.note-under span { display: inline-flex; align-items: center; gap: 7px; }
.note-under--center { justify-content: center; }

/* ---------- 5. Cartes ---------- */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: clamp(24px, 3vw, 32px);
  box-shadow: var(--sh-md);
}
.card--flat { box-shadow: none; }
.card--muted { background: var(--surface-muted); }
.card h3 { margin-bottom: 10px; }
.card p { color: var(--text-muted); }

.icon-badge {
  width: 58px; height: 58px; border-radius: 20px; display: grid; place-items: center;
  font-size: 27px; margin-bottom: 18px; background: var(--surface-sunken);
  line-height: 1;
}
.icon-badge--blue { background: var(--blue-soft); }
.icon-badge--purple { background: var(--purple-soft); }
.icon-badge--mint { background: var(--mint-soft); }
.icon-badge--yellow { background: var(--yellow-soft); }
.icon-badge--pink { background: var(--pink-soft); }

/* ---------- 6. En-tête ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(242, 246, 255, .82);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s, background-color .2s;
}
.site-header.is-stuck { border-bottom-color: var(--border); background: rgba(242, 246, 255, .95); }

.nav { display: flex; align-items: center; gap: 24px; height: 78px; }
.nav__links { display: flex; align-items: center; gap: 4px; margin-left: auto; list-style: none; }
.nav__links a:not(.btn) {
  display: block; padding: 9px 15px; border-radius: var(--r-pill);
  color: var(--navy); font-weight: 700; font-size: .98rem; text-decoration: none;
  transition: background-color .16s;
}
.nav__links a:not(.btn):hover { background: var(--surface-sunken); }
.nav__links a:not(.btn)[aria-current="page"] { background: var(--surface-sunken); color: var(--blue-deep); }
.nav__cta { margin-left: 10px; }

.nav__toggle {
  display: none; margin-left: auto; background: var(--surface); border: 1px solid var(--border-control);
  width: 46px; height: 46px; border-radius: 14px; cursor: pointer; padding: 0;
  align-items: center; justify-content: center; position: relative;
}
.nav__toggle span:not(.sr-only),
.nav__toggle span:not(.sr-only)::before,
.nav__toggle span:not(.sr-only)::after {
  display: block; width: 20px; height: 2.5px; background: var(--navy); border-radius: 2px;
  transition: transform .22s, opacity .18s;
}
.nav__toggle span:not(.sr-only)::before,
.nav__toggle span:not(.sr-only)::after { content: ""; position: absolute; }
.nav__toggle span:not(.sr-only)::before { transform: translateY(-6.5px); }
.nav__toggle span:not(.sr-only)::after { transform: translateY(6.5px); }
.nav__toggle[aria-expanded="true"] span:not(.sr-only) { background: transparent; }
.nav__toggle[aria-expanded="true"] span:not(.sr-only)::before { transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:not(.sr-only)::after { transform: rotate(-45deg); }

@media (max-width: 940px) {
  .nav__toggle { display: inline-flex; }
  .nav__links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 4px;
    background: var(--surface); border-bottom: 1px solid var(--border);
    padding: 14px var(--gutter) 26px; box-shadow: var(--sh-lg);
    display: none;
  }
  .nav__links.is-open { display: flex; }
  .nav__links a:not(.btn) { padding: 13px 16px; font-size: 1.06rem; }
  .nav__cta { margin: 8px 0 0; }
  .nav__cta .btn { width: 100%; }
}

/* ---------- 7. Logo ---------- */
.logo {
  display: inline-flex; align-items: flex-start; gap: 3px;
  text-decoration: none; color: var(--navy);
  font-weight: 900; letter-spacing: -.045em; font-size: 1.85rem; line-height: 1.1;
}
.logo__dots { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: .38em; }
.logo__dot { display: block; background: var(--blue); border-radius: 50%; }
.logo__dot--sm { width: .17em; height: .17em; opacity: .55; align-self: flex-end; }
.logo__dot--lg { width: .33em; height: .33em; }
.logo--light { color: #fff; }
.logo--lg { font-size: 2.4rem; }

/* ---------- 8. Hero ---------- */
.hero { position: relative; padding-block: clamp(44px, 6vw, 84px) clamp(56px, 8vw, 110px); overflow: hidden; }
.hero__inner {
  display: grid; gap: clamp(40px, 5vw, 56px); align-items: center;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
}
@media (max-width: 940px) { .hero__inner { grid-template-columns: 1fr; text-align: center; } }

.hero h1 { margin-bottom: 22px; }
.hero h1 .hl { color: var(--blue-deep); position: relative; white-space: nowrap; }
.hero h1 .hl::after {
  content: ""; position: absolute; left: -2%; right: -2%; bottom: .04em; height: .28em;
  background: var(--yellow); opacity: .45; border-radius: var(--r-pill); z-index: -1;
}
.hero__lead { font-size: clamp(1.06rem, 1.9vw, 1.26rem); color: var(--text-muted); max-width: 560px; }
@media (max-width: 940px) { .hero__lead { margin-inline: auto; } .hero .btn-row, .hero .note-under { justify-content: center; } }

.hero__blobs { position: absolute; inset: 0; pointer-events: none; z-index: -2; }
.blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; }
.blob--1 { width: 420px; height: 420px; background: var(--blue-soft); top: -140px; right: -80px; }
.blob--2 { width: 340px; height: 340px; background: var(--purple-soft); bottom: -160px; left: -120px; }
.blob--3 { width: 260px; height: 260px; background: var(--yellow-soft); top: 40%; right: 42%; opacity: .6; }

/* Scène du hero : téléphone + mascotte */
.hero__scene { position: relative; display: grid; place-items: center; min-height: 460px; }
.hero__scene > picture { display: contents; }
.hero__mascot {
  position: absolute; right: -11%; bottom: -4%; width: clamp(150px, 20vw, 232px);
  z-index: 3; filter: drop-shadow(0 24px 30px rgba(26, 29, 46, .22));
  animation: float 5.5s ease-in-out infinite;
}
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@media (prefers-reduced-motion: reduce) { .hero__mascot { animation: none; } }

/* ---------- 9. Maquette téléphone ---------- */
.phone {
  position: relative; width: min(300px, 78vw); border-radius: 44px;
  background: var(--navy); padding: 11px;
  box-shadow: 0 40px 70px -28px rgba(26, 29, 46, .55), 0 0 0 1px rgba(26, 29, 46, .06);
  z-index: 2;
}
.phone__screen {
  border-radius: 34px; background: var(--bg); overflow: hidden;
  padding: 26px 16px 18px; position: relative;
}
.phone__notch {
  position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
  width: 82px; height: 20px; background: var(--navy); border-radius: var(--r-pill); z-index: 4;
}
.phone--parent { width: min(250px, 70vw); }

.mock-row { display: flex; align-items: center; gap: 11px; }
.mock-title { font-weight: 800; font-size: .95rem; letter-spacing: -.01em; }
.mock-sub { font-size: .76rem; color: var(--text-muted); line-height: 1.45; }
.mock-avatar {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  box-shadow: 0 4px 10px rgba(26, 29, 46, .2);
}

.mock-counter {
  margin-top: 16px; background: linear-gradient(150deg, var(--blue-deep) 0%, var(--blue-ink) 100%);
  color: #fff; border-radius: 22px; padding: 16px 18px; text-align: center;
  box-shadow: 0 14px 24px -14px rgba(21, 104, 190, .9);
}
.mock-counter b { display: block; font-size: 2.15rem; font-weight: 900; line-height: 1.05; letter-spacing: -.03em; }
.mock-counter span { font-size: .78rem; opacity: .95; font-weight: 700; }

.mock-label {
  margin: 16px 0 9px; font-size: .68rem; font-weight: 800; letter-spacing: .11em;
  text-transform: uppercase; color: var(--text-subtle);
}

.mock-card {
  background: #fff; border-radius: 18px; padding: 11px 13px; margin-bottom: 9px;
  display: flex; align-items: center; gap: 11px; border: 1px solid var(--border);
  box-shadow: var(--sh-sm);
}
.mock-card__icon {
  width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center;
  font-size: 18px; flex: none; background: var(--surface-sunken);
}
.mock-card__txt { flex: 1; min-width: 0; }
.mock-card__txt b { display: block; font-size: .85rem; font-weight: 800; letter-spacing: -.01em; }
.mock-card__txt span { font-size: .72rem; color: var(--text-muted); }
.mock-plus {
  font-weight: 900; font-size: .82rem; color: var(--green-deep);
  background: var(--mint-soft); padding: 5px 10px; border-radius: var(--r-pill); flex: none;
}
.mock-plus--wait { color: var(--amber-ink); background: var(--yellow-soft); }

.mock-btn {
  margin-top: 14px; display: block; width: 100%; text-align: center;
  background: var(--mint); color: #08301F; font-weight: 900; font-size: .92rem;
  padding: 13px; border-radius: var(--r-pill); border: none;
  box-shadow: 0 10px 18px -10px rgba(43, 201, 138, .95);
}

/* Carte flottante : la mission que le parent confirme */
.float-card {
  position: absolute; z-index: 5; background: #fff; border-radius: 22px;
  padding: 14px 16px; box-shadow: var(--sh-lg); border: 1px solid var(--border);
  width: 262px; text-align: left;
}
.float-card--tl { top: -14px; left: -23%; }
.float-card--br { bottom: 10%; right: -10%; }
.float-card__head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.float-card__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--mint); flex: none; }
.float-card b { font-size: .87rem; font-weight: 800; }
.float-card p { font-size: .78rem; color: var(--text-muted); line-height: 1.5; }
.float-card__actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.float-chip {
  font-size: .74rem; font-weight: 800; padding: 6px 11px; border-radius: var(--r-pill);
  white-space: nowrap;
}
.float-chip--yes { background: var(--mint); color: #08301F; }
.float-chip--no { background: var(--surface-sunken); color: var(--text-muted); }

@media (max-width: 1100px) {
  .float-card--tl { left: -12%; }
  .hero__mascot { right: -6%; }
}

/* Dès que le héros passe sur une colonne (940px), la carte se place
   au-dessus du téléphone : sinon elle flotte hors de l'écran, à gauche. */
@media (max-width: 940px) {
  .hero__scene {
    display: flex; flex-direction: column; align-items: center;
    gap: 18px; min-height: 0; padding-bottom: 6px;
  }
  .float-card--tl {
    position: static; order: -1; width: min(330px, 94%);
    transform: rotate(-1.5deg);
  }
  .hero__mascot { right: -6px; bottom: -10px; width: clamp(104px, 30vw, 132px); }
}

/* ---------- 10. Bandeau promesses ---------- */
.promises { background: var(--surface); border-block: 1px solid var(--border); }
.promises__grid {
  display: grid; gap: 22px 30px;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  padding-block: clamp(28px, 4vw, 44px);
}
.promise { display: flex; gap: 13px; align-items: flex-start; }
.promise__mark {
  flex: none; width: 32px; height: 32px; border-radius: 11px; display: grid; place-items: center;
  background: var(--mint-soft); color: var(--green-deep); font-weight: 900; font-size: 1rem;
}
.promise b { display: block; font-size: .98rem; font-weight: 800; letter-spacing: -.01em; }
.promise span { font-size: .88rem; color: var(--text-muted); line-height: 1.5; }

/* ---------- 11. Étapes ---------- */
.steps { counter-reset: step; display: grid; gap: clamp(20px, 3vw, 30px); grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); }
.step {
  position: relative; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 34px 28px 30px; box-shadow: var(--sh-md);
}
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: -20px; left: 28px;
  width: 44px; height: 44px; border-radius: 15px; display: grid; place-items: center;
  background: var(--blue-deep); color: #fff; font-weight: 900; font-size: 1.15rem;
  box-shadow: var(--sh-blue);
}
.step h3 { margin: 12px 0 10px; }
.step p { color: var(--text-muted); font-size: .98rem; }
.step__illus { width: 92px; height: 78px; object-fit: contain; object-position: bottom right; margin: 0 0 4px auto; }

/* ---------- 12. Timeline journée type ---------- */
.timeline { position: relative; display: grid; gap: 4px; }
.tl-item {
  position: relative; display: grid; grid-template-columns: 116px 1fr; gap: clamp(16px, 3vw, 34px);
  padding-block: 22px; align-items: start;
}
.tl-item + .tl-item { border-top: 1px dashed var(--border-strong); }
.tl-time {
  font-weight: 900; font-size: .95rem; color: var(--blue-deep);
  background: var(--surface-sunken); padding: 7px 13px; border-radius: var(--r-pill);
  display: inline-block; white-space: nowrap;
}
.tl-body h3 { font-size: 1.12rem; margin-bottom: 7px; }
.tl-body p { color: var(--text-muted); font-size: .99rem; }
.tl-who {
  display: inline-block; margin-bottom: 8px; font-size: .72rem; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase; padding: 4px 11px; border-radius: var(--r-pill);
}
.tl-who--enfant { background: var(--purple-soft); color: var(--purple-ink); }
.tl-who--parent { background: var(--blue-soft); color: var(--blue-ink); }
@media (max-width: 620px) { .tl-item { grid-template-columns: 1fr; gap: 10px; } }

/* ---------- 13. Comparatif / listes ---------- */
.check-list { list-style: none; display: grid; gap: 13px; }
.check-list li { position: relative; padding-left: 37px; font-size: 1rem; color: var(--text-muted); }
.check-list li::before {
  content: "✓"; position: absolute; left: 0; top: 2px;
  width: 25px; height: 25px; border-radius: 9px;
  background: var(--mint-soft); color: var(--green-deep);
  display: grid; place-items: center; font-weight: 900; font-size: .82rem;
}
.check-list--cross li::before { content: "✕"; background: var(--pink-soft); color: var(--pink-ink); }
.check-list b { color: var(--text); }

/* ---------- 14. Avatars ---------- */
.avatars { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.avatars img {
  width: clamp(78px, 11vw, 112px); height: auto; border-radius: 50%;
  box-shadow: 0 12px 24px -12px rgba(26, 29, 46, .55);
  transition: transform .2s;
}
.avatars img:hover { transform: translateY(-5px) scale(1.04); }

/* ---------- 15. Tarifs ---------- */
.pricing { display: grid; gap: clamp(20px, 3vw, 28px); grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); align-items: stretch; }
.plan {
  background: var(--surface); border: 2px solid var(--border); border-radius: var(--r-xl);
  padding: clamp(28px, 3.4vw, 38px); display: flex; flex-direction: column; gap: 18px;
  box-shadow: var(--sh-md); position: relative;
}
.plan--featured { border-color: var(--blue); box-shadow: var(--sh-lg); }
.plan__flag {
  position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
  background: var(--yellow); color: #4A3208; font-weight: 900; font-size: .78rem;
  padding: 6px 18px; border-radius: var(--r-pill); white-space: nowrap;
  letter-spacing: .02em;
}
.plan__name { font-size: 1.2rem; font-weight: 900; }
.plan__price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.plan__price b { font-size: clamp(2.4rem, 5vw, 3.1rem); font-weight: 900; letter-spacing: -.04em; line-height: 1; }
.plan__price span { color: var(--text-muted); font-weight: 700; }
.plan__note { font-size: .93rem; color: var(--text-muted); }
.plan .btn { width: 100%; margin-top: auto; }

.price-strip {
  display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  background: var(--surface-sunken); border-radius: var(--r-lg); padding: 26px clamp(20px, 3vw, 34px);
}
.price-strip div b { display: block; font-size: 1.6rem; font-weight: 900; letter-spacing: -.03em; color: var(--blue-deep); }
.price-strip div span { font-size: .92rem; color: var(--text-muted); }

/* ---------- 16. FAQ ---------- */
.faq { display: grid; gap: 12px; }
.faq details {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 4px 22px; box-shadow: var(--sh-sm); transition: border-color .18s;
}
.faq details[open] { border-color: var(--border-strong); }
.faq summary {
  cursor: pointer; list-style: none; padding: 18px 34px 18px 0; position: relative;
  font-weight: 800; font-size: 1.03rem; letter-spacing: -.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; font-weight: 700; color: var(--blue-deep); line-height: 1;
  transition: transform .2s;
}
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding: 0 0 20px; color: var(--text-muted); font-size: .99rem; }
.faq details > div p + p { margin-top: 12px; }

.faq-filters { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 26px; }
.chip {
  font: inherit; font-size: .92rem; font-weight: 800; cursor: pointer;
  padding: 9px 18px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--border-control); color: var(--text-muted);
  transition: all .16s;
}
.chip:hover { border-color: var(--blue-deep); color: var(--navy); }
.chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }

.faq-search {
  width: 100%; font: inherit; font-size: 1.02rem; padding: 15px 20px; margin-bottom: 18px;
  border-radius: var(--r-pill); border: 1px solid var(--border-control); background: var(--surface);
  color: var(--text);
}
.faq-search::placeholder { color: var(--text-subtle); }
.faq-empty { display: none; text-align: center; color: var(--text-muted); padding: 34px 0; }
.faq-empty.is-shown { display: block; }

/* ---------- 17. Bloc CTA ---------- */
.cta-band {
  position: relative; overflow: hidden;
  background: linear-gradient(140deg, var(--blue-deep) 0%, var(--blue-ink) 55%, var(--purple-ink) 130%);
  color: #fff; border-radius: var(--r-xl); padding: clamp(38px, 6vw, 72px) clamp(26px, 5vw, 68px);
  box-shadow: var(--sh-lg);
}
.cta-band h2 { color: #fff; max-width: 620px; }
.cta-band p { color: rgba(255, 255, 255, .92); margin-top: 16px; max-width: 540px; font-size: 1.08rem; }
.cta-band .btn-row { margin-top: 30px; }
/* Le bandeau est sur un dégradé bleu foncé : la ligne « Ou télécharger »
   hérite sinon d'un gris de texte courant et d'un lien bleu, illisibles ici. */
.cta-band .cta-alt { color: rgba(255, 255, 255, .88); }
.cta-band .cta-alt a { color: #fff; }
.cta-band .note-under { color: rgba(255, 255, 255, .88); }
.cta-band__mascot {
  position: absolute; right: 4%; bottom: -14px; width: clamp(130px, 18vw, 210px);
  filter: drop-shadow(0 20px 26px rgba(0, 0, 0, .28));
}
@media (max-width: 900px) { .cta-band__mascot { display: none; } }
.cta-band .btn--secondary { background: transparent; color: #fff; border-color: #fff; box-shadow: none; }
.cta-band .btn--secondary:hover { background: rgba(255, 255, 255, .10); border-color: #fff; }
/* Le contour de focus bleu serait invisible sur le dégradé bleu. */
.cta-band :focus-visible { outline-color: #fff; }

/* ---------- 18. Encadrés ---------- */
.callout {
  border-radius: var(--r-lg); padding: clamp(22px, 3vw, 30px);
  background: var(--surface-muted); border: 1px solid var(--border);
  display: flex; gap: 16px; align-items: flex-start;
}
.callout__icon { font-size: 1.5rem; flex: none; line-height: 1.3; }
.callout b { display: block; margin-bottom: 6px; }
.callout p { color: var(--text-muted); font-size: .98rem; }
/* Un formulaire réglementaire, et non un avertissement : pas d'icône, pas de
   texte atténué, pas de carte colorée. Ses lignes, ses astérisques et l'ordre
   de ses champs font partie du texte — il doit se lire ligne à ligne et se
   copier. Même arbitrage que l'application, qui lui a donné un genre à lui. */
/* Le bandeau de consentement, pour tout le site — le tunnel a le sien.
   Les deux boutons ont la MÊME classe et la même largeur : la section 11 de la
   politique exige que refuser coûte le même nombre de clics qu'accepter, et un
   « Accepter » plein à côté d'un refus discret respecterait la lettre en
   trahissant l'esprit. */
/* La hauteur du bandeau, réservée en bas de page tant qu'il est là — sans quoi
   il recouvre ce qui s'y trouve, à tout défilement. Voir reserverLaPlace(). */
body { padding-bottom: var(--h-bandeau, 0px); }

.cookies {
  position: fixed; left: 12px; right: 12px; bottom: 12px;
  z-index: 60; max-width: 520px; margin-inline: auto;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 20px; box-shadow: var(--sh-lg); padding: 18px 18px 16px;
  font-size: .9rem; line-height: 1.55; color: var(--text-muted);
}
.cookies p + p { margin-top: 7px; }
.cookies b { color: var(--text); }
.cookies a { color: var(--blue-deep); text-decoration: underline; text-underline-offset: 3px; }
.cookies__etat { font-weight: 700; color: var(--text); }
.cookies__boutons { display: flex; gap: 10px; margin-top: 14px; }
/* `min-width: 0` n'est pas une coquetterie : par défaut un élément flex ne
   descend pas sous la largeur de son mot le plus long, si bien qu'« Accepter »
   sortait huit pixels plus large que « Refuser ». La section 11 exige que
   refuser coûte autant qu'accepter ; huit pixels ne changent pas un clic, mais
   c'est précisément le genre d'écart qu'on relève en cherchant une asymétrie. */
.cookies__boutons .btn { flex: 1 1 0; min-width: 0; }
.footer__cookies { margin-top: 8px; }
.footer__cookies a { text-decoration: underline; text-underline-offset: 3px; }

/* Le bloc d'installation, version page d'accueil de l'installation : le code
   seul, sans cadre, puisque les boutons sont déjà au-dessus. */
/* Sur un téléphone, le QR ne sert à rien : il est fait pour être scanné DEPUIS
   un écran d'ordinateur, par l'appareil de l'enfant. Or le parent qui arrive
   d'une annonce Instagram est sur son téléphone, et le QR occupait chez lui
   425 px au-dessus de la première consigne. Les deux boutons de boutique
   passent donc devant ; le QR reste, en dessous, pour les ordinateurs. */
@media (hover: none) and (pointer: coarse) {
  .installer { display: flex; flex-direction: column; }
  .installer__liens { order: 1; }
  .installer__qr { order: 2; }
}

.installer--hero {
  display: flex; margin-top: 28px; padding: 0; border: 0; background: none;
}
.installer--hero .installer__qr { text-align: left; }
.installer--hero .installer__qr img {
  display: block; width: 160px; height: 160px; border-radius: 12px;
  border: 1px solid var(--border); background: #fff;
}
.installer--hero .installer__legende {
  font-size: .88rem; line-height: 1.5; color: var(--text-muted);
  margin-top: 10px; max-width: 280px;
}

/* La plateforme détectée passe devant, par l'ordre visuel seulement : les deux
   boutons restent dans le flux, dans le DOM et dans l'ordre de tabulation. */
.btn-row--stores { flex-wrap: wrap; }
.btn-row--stores[data-plateforme="android"] [data-store="android"] { order: -1; }
.btn-row--stores[data-plateforme="ios"] [data-store="ios"] { order: -1; }

.formulaire-legal {
  border: 1px solid var(--border); border-left: 3px solid var(--border-strong);
  border-radius: var(--r-md, 14px); padding: clamp(18px, 2.4vw, 26px);
  margin: 22px 0; background: var(--surface); user-select: text;
}
/* `.prose p` atténue la couleur et vient plus loin dans cette feuille : à
   spécificité égale, c'est elle qui l'emportait, et le formulaire restait en
   texte gris — exactement le défaut qu'on croyait corriger. On qualifie. */
.prose .formulaire-legal p,
.formulaire-legal p { color: var(--text); font-size: .97rem; line-height: 1.7; }
.prose .formulaire-legal p + p,
.formulaire-legal p + p { margin-top: 14px; }

.callout--warn { background: var(--yellow-soft); border-color: #F3DFB0; }
.callout--info { background: var(--blue-soft); border-color: #8FD8FA; }
.callout--info p { color: #114A79; }
.callout--info a { color: #0E3F68; }
.callout--mint { background: var(--mint-soft); border-color: #A9E8CC; }

/* ---------- 19. Contenu long (guides, légal) ---------- */
.prose { max-width: 760px; }
.prose h2 { font-size: clamp(1.4rem, 2.6vw, 1.85rem); margin-top: 52px; margin-bottom: 16px; scroll-margin-top: 100px; }
.prose h3 { margin-top: 34px; margin-bottom: 10px; font-size: 1.14rem; }
.prose p { color: var(--text-muted); margin-bottom: 16px; }
.prose ul { list-style: none; display: grid; gap: 11px; margin-bottom: 20px; }
.prose ul li { position: relative; padding-left: 20px; color: var(--text-muted); }
.prose ul li::before { content: "•"; position: absolute; left: 2px; top: -1px; color: var(--blue); font-weight: 900; }
.prose strong { color: var(--text); font-weight: 800; }
.prose > :first-child { margin-top: 0; }

.def-rows { display: grid; gap: 0; margin-bottom: 22px; border-top: 1px solid var(--border); }
.def-rows > div {
  display: grid; grid-template-columns: 210px 1fr; gap: 22px;
  padding: 16px 0; border-bottom: 1px solid var(--border);
}
.def-rows dt { font-weight: 800; }
.def-rows dd { margin: 0; color: var(--text-muted); }
@media (max-width: 620px) { .def-rows > div { grid-template-columns: 1fr; gap: 4px; } }

.toc {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 24px 28px; margin-bottom: 40px;
}
.toc b { display: block; margin-bottom: 12px; }
.toc ol { list-style: none; counter-reset: toc; display: grid; gap: 8px; }
.toc li { counter-increment: toc; font-size: .96rem; }
.toc a { text-decoration: none; font-weight: 700; }
.toc a:hover { text-decoration: underline; }

.page-hero {
  padding-block: clamp(44px, 6vw, 76px) clamp(30px, 4vw, 52px);
  background: linear-gradient(180deg, var(--surface-sunken) 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--border);
}
.page-hero h1 { max-width: 780px; }
.page-hero p { margin-top: 18px; max-width: 640px; color: var(--text-muted); font-size: 1.1rem; }
.page-hero__meta { margin-top: 22px; font-size: .9rem; color: var(--text-subtle); }

/* ---------- 20. Témoignages ---------- */
.quotes { display: grid; gap: clamp(18px, 2.4vw, 24px); grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); }
.quote {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 28px; box-shadow: var(--sh-md); display: flex; flex-direction: column; gap: 16px;
}
.quote__stars { color: var(--yellow); font-size: 1.05rem; letter-spacing: 2px; }
.quote p { font-size: 1rem; }
.quote footer { display: flex; align-items: center; gap: 11px; margin-top: auto; }
.quote footer img { width: 40px; height: 40px; border-radius: 50%; }
.quote footer b { font-size: .93rem; display: block; }
.quote footer span { font-size: .82rem; color: var(--text-subtle); }
.quote--placeholder { border-style: dashed; border-color: var(--border-strong); box-shadow: none; background: var(--surface-muted); }

/* ---------- 21. Pied de page ---------- */
.site-footer { background: var(--navy); color: #C8CEE6; padding-block: clamp(48px, 6vw, 76px) 32px; }
.site-footer a { color: #C8CEE6; text-decoration: none; }
/* Le contour de focus bleu n'est pas assez lisible sur le fond marine. */
.site-footer :focus-visible { outline-color: #fff; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer__top {
  display: grid; gap: clamp(30px, 5vw, 56px);
  grid-template-columns: minmax(min(240px, 100%), 1.3fr) repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  padding-bottom: 42px; border-bottom: 1px solid rgba(255, 255, 255, .12);
}
/* Sous 720px, les colonnes du pied de page passent à deux, puis à une :
   sans cela le pied de page déborde et la page défile horizontalement. */
@media (max-width: 720px) { .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 430px) { .footer__top { grid-template-columns: minmax(0, 1fr); } }
.footer__brand p { margin-top: 14px; font-size: .96rem; max-width: 300px; color: #9AA3C4; }
.footer__col b { display: block; color: #fff; font-size: .96rem; margin-bottom: 14px; }
.footer__col ul { list-style: none; display: grid; gap: 10px; font-size: .94rem; }
.footer__bottom {
  padding-top: 24px; display: flex; flex-wrap: wrap; gap: 10px 26px;
  justify-content: space-between; font-size: .87rem; color: #8189A8;
}
.footer__badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.footer__badge {
  font-size: .78rem; font-weight: 800; padding: 6px 13px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .1); color: #E6EAF7;
}

/* ---------- 22. Divers ---------- */
.stat-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); text-align: center; }
.stat b { display: block; font-size: clamp(1.9rem, 4vw, 2.5rem); font-weight: 900; letter-spacing: -.035em; color: var(--blue-deep); line-height: 1.1; }
.stat span { font-size: .93rem; color: var(--text-muted); }

.tag-row { display: flex; flex-wrap: wrap; gap: 9px; }
.tag {
  font-size: .88rem; font-weight: 700; padding: 8px 15px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--border-control); color: var(--text-muted);
}

.media-round { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-lg); }
.mascot-plain { width: min(340px, 74%); margin-inline: auto; filter: drop-shadow(0 26px 34px rgba(26, 29, 46, .22)); }

.sticker { transform: rotate(-2.5deg); }
.sticker--right { transform: rotate(2deg); }

.form-grid { display: grid; gap: 18px; }
.field label { display: block; font-weight: 800; font-size: .95rem; margin-bottom: 7px; }
.field input, .field textarea, .field select {
  width: 100%; font: inherit; padding: 14px 17px; border-radius: var(--r-md);
  border: 1px solid var(--border-control); background: var(--surface); color: var(--text);
}
.field textarea { min-height: 150px; resize: vertical; }
.field small { display: block; margin-top: 6px; color: var(--text-subtle); font-size: .85rem; }

/* Apparition au défilement — uniquement si JavaScript est actif */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .55s ease, transform .55s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .btn:hover, .avatars img:hover { transform: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .site-header, .site-footer, .cta-band, .btn { display: none !important; }
  body { background: #fff; }
}

/* ---------- 23. Guide pas à pas ---------- */
.guide-steps { counter-reset: gs; display: grid; gap: 14px; }
.guide-step {
  position: relative; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 26px 28px 26px 78px; box-shadow: var(--sh-sm);
}
.guide-step::before {
  counter-increment: gs; content: counter(gs);
  position: absolute; left: 26px; top: 26px;
  width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center;
  background: var(--surface-sunken); color: var(--blue-deep); font-weight: 900; font-size: .95rem;
}
.guide-step h3 { font-size: 1.1rem; margin-bottom: 9px; }
.guide-step p { color: var(--text-muted); font-size: .99rem; }
.guide-step p + p { margin-top: 11px; }
.guide-step .where {
  display: inline-block; margin-top: 14px; font-size: .8rem; font-weight: 800;
  color: var(--blue-ink); background: var(--blue-soft); padding: 6px 13px; border-radius: var(--r-pill);
}
.guide-step .outside {
  display: inline-block; margin-top: 14px; font-size: .8rem; font-weight: 800;
  color: var(--text-muted); background: var(--surface-sunken); padding: 6px 13px; border-radius: var(--r-pill);
}
.guide-step .tip {
  margin-top: 15px; background: var(--yellow-soft); border-radius: 15px;
  padding: 13px 17px; font-size: .93rem; color: #6B4A0C;
}
.guide-step .tip b { color: #4A3208; }
@media (max-width: 560px) {
  .guide-step { padding: 62px 22px 24px; }
  .guide-step::before { left: 22px; top: 20px; }
}

/* Sommaire en pastilles */
.anchor-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(34px, 5vw, 54px); }
.anchor-nav a {
  font-size: .92rem; font-weight: 800; text-decoration: none;
  padding: 10px 18px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--border-control); color: var(--text-muted);
  transition: all .16s;
}
.anchor-nav a:hover { border-color: var(--blue-deep); color: var(--navy); }

.guide-block { margin-bottom: clamp(56px, 8vw, 96px); scroll-margin-top: 100px; }
.guide-block__head { margin-bottom: 26px; }
.guide-block__head h2 { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.guide-block__head p { margin-top: 12px; color: var(--text-muted); font-size: 1.06rem; max-width: 640px; }
.guide-duration {
  font-size: .8rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--green-deep); background: var(--mint-soft); padding: 6px 13px; border-radius: var(--r-pill);
}

/* Colonnes OS */
.os-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); }
.os-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 28px; }
.os-card h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.os-card ol { list-style: none; counter-reset: os; display: grid; gap: 12px; }
.os-card ol li { counter-increment: os; position: relative; padding-left: 32px; color: var(--text-muted); font-size: .97rem; }
.os-card ol li::before {
  content: counter(os); position: absolute; left: 0; top: 1px; width: 22px; height: 22px;
  border-radius: 8px; background: var(--surface-sunken); color: var(--blue-deep);
  display: grid; place-items: center; font-size: .78rem; font-weight: 900;
}

/* Tableau simple */
.table-wrap { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface); }
table.simple { width: 100%; border-collapse: collapse; min-width: 480px; }
table.simple th, table.simple td { padding: 15px 20px; text-align: left; border-bottom: 1px solid var(--border); }
table.simple th { font-weight: 800; font-size: .93rem; background: var(--surface-muted); }
table.simple td { color: var(--text-muted); font-size: .97rem; }
table.simple tr:last-child td { border-bottom: none; }

/* ---------- 24. Page FAQ ---------- */
.faq-group { margin-bottom: clamp(38px, 5vw, 56px); }
.faq-group__title {
  font-size: clamp(1.25rem, 2.2vw, 1.5rem); margin-bottom: 18px;
  display: flex; align-items: center; gap: 11px; scroll-margin-top: 100px;
}
.faq-group__title span { font-size: 1.15em; }

/* ---------- 25. Maquette « session en cours » ---------- */
.mock-bar {
  height: 10px; border-radius: var(--r-pill); background: var(--surface-sunken);
  margin: 14px 0 6px; overflow: hidden;
}
.mock-bar i { display: block; height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--mint), #17B57B); }
.mock-bar-legend { display: flex; justify-content: space-between; font-size: .72rem; color: var(--text-muted); font-weight: 700; }
.mock-btn--soft { background: var(--surface-sunken); color: var(--navy); box-shadow: none; }

/* Hiérarchie des écrans : le principal, puis le secondaire */
.screen-secondary {
  margin-top: clamp(26px, 4vw, 40px); border-radius: var(--r-lg);
  background: var(--surface-muted); border: 1px dashed var(--border-strong);
  padding: clamp(22px, 3vw, 30px); display: flex; gap: 16px; align-items: flex-start;
}
.screen-secondary__icon { font-size: 1.6rem; flex: none; line-height: 1.2; }
.screen-secondary b { display: block; margin-bottom: 6px; }
.screen-secondary p { color: var(--text-muted); font-size: .98rem; }

/* Avatar animal dans les maquettes — reprend le composant Avatar de l'application :
   pastille arrondie (rayon = taille/3) et fond pastel propre à chaque animal.
   Renard #FFE2CE · Panda #E7ECFB · Lapin #FFD9E6 · Koala #D6F3F1 · Lion #FFF0CE · Grenouille #E2F6DA */
.mock-avatar--animal {
  display: grid; place-items: center;
  background: #FFE2CE; border-radius: 14px;
  font-size: 1.35rem; line-height: 1; box-shadow: none;
}

/* Mention de pré-lancement sous les boutons du hero */
.launch-note {
  margin-top: 14px; font-size: .93rem; font-weight: 700;
  color: var(--amber-ink); background: var(--yellow-soft);
  display: inline-block; padding: 9px 16px; border-radius: var(--r-pill);
}
.launch-note a { color: var(--amber-ink); }
@media (max-width: 940px) { .launch-note { margin-inline: auto; } }


/* ---------- 15. Appel à l'action selon l'appareil ----------
   Sur un téléphone ou une tablette, on envoie vers /telecharger/, qui aiguille
   vers la bonne boutique : demander à un parent de remplir un formulaire web
   pour installer ensuite l'application, c'est deux parcours au lieu d'un.
   Sur un ordinateur, on ouvre /creer/ — l'inscription s'y fait, et le
   téléphone rejoint la famille ensuite avec le code.
   Le choix se fait en CSS et non en JavaScript : la page reste juste même si
   le script ne s'exécute pas.

   DANGER, ET IL A COÛTÉ UN MOIS : sur un appareil tactile, la règle ci-dessous
   masque `.only-desk` et n'affiche que `.only-mob`. Il n'y a donc QU'UN bouton
   visible par section, et ce n'est pas celui qu'on voit sur un écran large.
   Jusqu'au 14 octobre 2026, ce bouton-là disait « Télécharger sur l'App Store »
   et partait chez Apple : aucun parent Android n'atteignait la page
   d'aiguillage, et aucune relecture au format écran ne pouvait le voir.
   Toute vérification des boutons se fait au format TÉLÉPHONE. */
.only-mob { display: none; }
.cta-alt { margin-top: 14px; font-size: .93rem; color: var(--text-subtle); }
.cta-alt a { color: var(--blue-deep); text-decoration: underline; text-underline-offset: 3px; }
@media (hover: none) and (pointer: coarse) {
  .only-desk { display: none !important; }
  .only-mob { display: inline-flex; }
}


/* ---------- 16. Étapes numérotées de la page d'installation ----------
   Même motif que .os-card ol, sorti de son contexte pour servir dans .prose. */
.steps-num { list-style: none; counter-reset: pas; display: grid; gap: 14px; margin-bottom: 20px; }
.steps-num li { counter-increment: pas; position: relative; padding-left: 38px; }
.steps-num li::before {
  content: counter(pas); position: absolute; left: 0; top: 1px; width: 26px; height: 26px;
  border-radius: 9px; background: var(--surface-sunken); color: var(--blue-deep);
  display: grid; place-items: center; font-size: .85rem; font-weight: 900;
}

/* ---------- 29 bis. Le parcours guidé (/resilier/) ----------
   Trois questions, une réponse. Demandé par l'éditrice le 18 octobre 2026 :
   la page disait juste, et demandait au parent de croiser lui-même deux
   colonnes — « trop compliqué pour eux à comprendre ».

   Tout est sous `.parcours` : rien ne fuit vers les autres pages. Les boutons
   de choix sont pleine largeur et alignés à gauche — un libellé de réponse se
   lit comme une phrase, pas comme un bouton d'action, et sur un téléphone il
   passe souvent sur deux lignes. */
.parcours {
  border: 2px solid var(--border-control); border-radius: var(--r-lg);
  padding: clamp(18px, 3vw, 26px); margin: 0 0 20px;
}
.parcours [hidden] { display: none !important; }
.parcours__titre { margin: 0 0 4px; font-size: clamp(1.25rem, 3.4vw, 1.5rem); }
.prose .parcours__question { font-weight: 800; color: var(--text); margin: 22px 0 10px; }
.parcours__q:first-of-type .parcours__question { margin-top: 14px; }
.parcours__choix { display: grid; gap: 10px; }
.parcours__choix .btn {
  width: 100%; justify-content: flex-start; text-align: left;
  min-height: 48px; padding-top: 12px; padding-bottom: 12px;
}
/* La réponse choisie reste lisible comme telle quand on remonte dans la page. */
.parcours__choix .btn[aria-pressed="true"] {
  border-color: var(--blue-deep); box-shadow: inset 0 0 0 1px var(--blue-deep);
}
.parcours__reponse {
  margin-top: 24px; padding: clamp(16px, 2.6vw, 22px);
  background: var(--mint-soft); border: 1px solid #A9E8CC; border-radius: var(--r-lg);
  scroll-margin-top: 100px;
}
.parcours__reponse:focus-visible { outline: 3px solid var(--blue-deep); outline-offset: 3px; }
.prose .parcours__reponse p { color: var(--text); }
.parcours__ou {
  font-weight: 800; font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted); margin: 20px 0 8px;
}
.parcours__reponse .btn { width: 100%; justify-content: center; }
.parcours__refaire { margin-top: 22px; }
.parcours__refaire .btn { width: auto; }
.parcours__direct { font-size: .9375rem; color: var(--text-muted); margin: 0 0 26px; }

/* Le détail, replié quand le parcours est là, ouvert sans lui. */
#tous-les-cas > summary {
  cursor: pointer; font-weight: 800; color: var(--blue-deep);
  padding: 12px 0; list-style-position: inside;
}
#tous-les-cas > summary:focus-visible { outline: 3px solid var(--blue-deep); outline-offset: 3px; }

/* ---------- 30. Renoncer au contrat (/renoncer/) ----------
   La fonction de rétractation qu'impose l'article D221-5 du Code de la
   consommation. Les champs reprennent ceux du tunnel (tunnel.css, § 7) sans
   charger tunnel.css, qui met `main` en flex et casserait une page ordinaire.
   Tout est limité à `.renoncer` : rien ne fuit vers les autres pages. */
.renoncer { --danger-ink: #C31D41; }
.renoncer [hidden] { display: none !important; }
.renoncer .champ { display: block; margin-top: 20px; }
.renoncer .champ__nom { display: block; font-weight: 800; font-size: .95rem; margin-bottom: 7px; color: var(--text); }
.renoncer .champ input {
  width: 100%; font: inherit; font-size: 1.05rem; color: var(--text);
  background: var(--surface); border: 2px solid var(--border-control);
  border-radius: 14px; padding: 14px 15px;
}
.renoncer .champ input:focus-visible { outline: 3px solid var(--blue-deep); outline-offset: 2px; border-color: var(--blue-deep); }
.renoncer .champ input[aria-invalid="true"] { border-color: var(--danger); }
.renoncer .champ__note { display: block; font-size: .86rem; color: var(--text-muted); margin-top: 6px; }
.renoncer .champ__erreur { display: block; font-size: .88rem; font-weight: 700; color: var(--danger-ink); margin-top: 6px; }
.renoncer .case { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; font-size: .95rem; color: var(--text); cursor: pointer; }
.renoncer .case input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--blue-deep); }
/* Ce qu'il faut savoir AVANT d'appuyer : calme, et pas un avertissement.
   « On dirait que tu dis attention!!!! » (l'éditrice, 22 septembre 2026) —
   ni rouge, ni capitales, ni cadre épais. */
.renoncer .renoncer__avant {
  margin: 24px 0 0; padding: 14px 16px; font-size: .9375rem; line-height: 1.6;
  color: var(--text); background: var(--blue-soft); border-radius: 12px;
}
.renoncer__envoyer { margin-top: 16px; width: 100%; justify-content: center; }
.renoncer__envoyer[disabled] { opacity: .6; cursor: progress; transform: none; }
/* Qualifié par `.renoncer` : `.prose p` (0,1,1) battait une classe seule (0,1,0)
   et l'échec s'affichait en gris, comme un texte ordinaire. */
.renoncer .renoncer__erreur { color: var(--danger-ink); font-weight: 700; margin-top: 16px; }
.renoncer__recu { border: 1px solid #A9E8CC; background: var(--mint-soft); border-radius: var(--r-lg); padding: clamp(22px, 3vw, 30px); scroll-margin-top: 100px; }
.prose .renoncer__recu p { color: var(--text); }
.renoncer__recu h2 { margin-top: 0; }

/* ---------- 31. Les pages de retour des courriels ----------
   /reprendre/, /desinscription/, /depart/ : on y arrive depuis un lien de
   courriel, après une redirection du serveur. Chaque état a son bloc
   `data-etat`, masqué ; le bloc neutre est le seul visible sans script. */
.retour { --danger-ink: #C31D41; }
.retour [hidden] { display: none !important; }
.retour .choix-motif { display: grid; gap: 10px; margin: 20px 0 0; padding: 0; border: 0; }
.retour .choix-motif label {
  display: flex; gap: 12px; align-items: center; padding: 14px 16px;
  border: 2px solid var(--border-control); border-radius: 14px;
  background: var(--surface); color: var(--text); font-weight: 700; cursor: pointer;
}
.retour .choix-motif label:has(input:checked) { border-color: var(--blue-deep); background: var(--blue-soft); }
.retour .choix-motif input { width: 20px; height: 20px; flex: none; margin: 0; accent-color: var(--blue-deep); }
.retour .choix-motif input:focus-visible { outline: 3px solid var(--blue-deep); outline-offset: 2px; }
.retour__envoyer { margin-top: 22px; }
.retour__envoyer[disabled] { opacity: .6; cursor: progress; transform: none; }
.prose .retour__message { margin-top: 18px; font-weight: 700; color: var(--text); }
.prose .retour__message--erreur { color: var(--danger-ink); }

/* ---------- 32. Le tableau de l'éditrice (/tableau/) ----------
   Un outil, pas une page du site : ni menu, ni pied, ni main.js. Les champs
   reprennent ceux du tunnel. Le tableau, lui, vit dans une iframe `srcdoc`
   sans script et porte son propre CSS, mode sombre compris : la page qui
   l'entoure suit le même mode, sinon un tableau sombre flotte dans du blanc. */
.outil { --danger-ink: #C31D41; min-height: 100svh; }
.outil [hidden] { display: none !important; }
.outil__barre { display: flex; align-items: baseline; gap: 12px; max-width: 920px; margin: 0 auto; padding: 18px 16px 6px; }
.outil__titre { color: var(--text-muted); font-weight: 700; }
.outil__connexion { max-width: 420px; margin: 6vh auto 0; padding: 0 16px 40px; }
.outil__connexion h1 { font-size: 1.5rem; margin-bottom: 4px; }
.outil .champ { display: block; margin-top: 18px; }
.outil .champ__nom { display: block; font-weight: 800; font-size: .95rem; margin-bottom: 7px; }
.outil .champ input {
  width: 100%; font: inherit; font-size: 1.05rem; color: var(--text);
  background: var(--surface); border: 2px solid var(--border-control);
  border-radius: 14px; padding: 14px 15px;
}
.outil .champ input:focus-visible { outline: 3px solid var(--blue-deep); outline-offset: 2px; border-color: var(--blue-deep); }
.outil__connexion .btn { width: 100%; margin-top: 22px; }
.outil .btn[disabled] { opacity: .6; cursor: progress; transform: none; }
.outil__etat { max-width: 920px; margin: 0 auto; padding: 28px 16px; text-align: center; color: var(--text-muted); }
.outil__erreur { color: var(--danger-ink); font-weight: 700; }
.outil__connexion .outil__erreur { margin-top: 14px; }
.outil__cadre { display: block; width: 100%; border: 0; min-height: 50vh; }
.outil__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding: 4px 16px 40px; }
@media (prefers-color-scheme: dark) {
  body.outil { background: #12141F; color: #EEF1FA; --text: #EEF1FA; --text-muted: #A3AAC2; --navy: #EEF1FA; --danger-ink: #FF8FAE; }
  .outil .champ input { background: #1A1D2E; border-color: #5B6480; color: #EEF1FA; }
  .outil .btn--secondary { background: #1A1D2E; color: #EEF1FA; border-color: #5B6480; }
}
.outil__cle { font-family: ui-monospace, Menlo, monospace; font-weight: 700; letter-spacing: .04em; word-break: break-all; }
.outil__qr { margin: 18px auto 0; max-width: 240px; }
.outil__annuler { width: 100%; margin-top: 10px; }
#etape-code .champ input { text-align: center; letter-spacing: .35em; font-size: 1.4rem; font-weight: 800; }

/* Une citation de la loi se lit, elle n'avertit pas : même cadre sobre que le
   formulaire de rétractation. Voir le genre `citation` de legal.py. */
.citation-legale {
  border: 1px solid var(--border); border-left: 3px solid var(--border-strong);
  border-radius: var(--r-md, 14px); padding: clamp(18px, 2.4vw, 26px);
  margin: 22px 0; background: var(--surface); user-select: text;
}
.prose .citation-legale p,
.citation-legale p { color: var(--text); font-size: .97rem; line-height: 1.7; }
.prose .citation-legale p + p,
.citation-legale p + p { margin-top: 14px; }