@font-face{font-family:"Baloo 2";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/baloo-2-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Baloo 2";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/baloo-2-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Baloo 2";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/baloo-2-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Baloo 2";font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/baloo-2-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Lexend";font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/lexend-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:"Lexend";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/lexend-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Lexend";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/lexend-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Lexend";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/lexend-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Lexend";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/lexend-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2")}
/* ==========================================================================
   Ébulle — feuille de style
   Mise en page : coque d'application — barre haute collante, colonne de
   contenu de 72rem, barre d'onglets basse sur téléphone ; l'espace enfant
   passe en grandes tuiles colorées.
   Système visuel : profondeur douce (ombres teintées bleu nuit), rayons
   hiérarchisés (10 / 14 / 22 / 32 px), bulles de décor avec parcimonie.
   ========================================================================== */
:root {
  /* Couleurs de marque (claires) */
  --ink: #1E2756;          /* bleu nuit : texte fort, titres, boutons */
  --spark: #FFC233;        /* jaune étincelle : accent principal (fond, jamais texte) */
  --coral: #F2644F;        /* corail : énergie — repérer */
  --coral-txt: #B93A27;
  --mint: #1FA58A;         /* menthe : calme — agir */
  --mint-txt: #0E7461;
  --lilac: #7B6CF0;        /* lilas : curiosité — comprendre */
  --lilac-txt: #5442C9;
  --sky: #3B8FE0;          /* ciel : information */
  --sky-txt: #1F64AE;
  /* Neutres teintés bleu nuit */
  --bg: #F4F5FB;
  --surface: #FFFFFF;
  --surface-2: #ECEEF8;
  --surface-3: #E1E4F3;
  --fg: #1B2048;
  --muted: #565E85;
  --line: #D8DCEE;
  --line-strong: #7D86B0;  /* contour des champs : 3:1 sur le fond */
  --focus: #3B8FE0;
  --on-ink: #FFFFFF;
  --on-accent: #FFFFFF;    /* icône sur une pastille d'accent (corail, menthe, lilas, ciel) */
  --night: #1E2756;        /* panneaux bleu nuit (héros, bandeaux), identiques dans les deux thèmes */
  --night-2: #2A3470;
  --warm-panel: #FFF4D6;
  --tint-spark: #FFF4D6;
  --tint-coral: #FDE7E3;
  --tint-mint: #DDF4EE;
  --tint-lilac: #ECE9FE;
  --tint-sky: #E1EEFB;
  /* Profondeur : ombres légères teintées bleu nuit */
  --shadow-xs: 0 1px 2px rgba(30, 39, 86, .05), 0 1px 1px rgba(30, 39, 86, .03);
  --shadow-sm: 0 1px 2px rgba(30, 39, 86, .06), 0 4px 12px -4px rgba(30, 39, 86, .08);
  --shadow: 0 2px 4px rgba(30, 39, 86, .05), 0 12px 28px -8px rgba(30, 39, 86, .16);
  --shadow-lg: 0 6px 12px rgba(30, 39, 86, .06), 0 28px 64px -18px rgba(30, 39, 86, .32);
  --ring: 0 0 0 3px var(--bg), 0 0 0 6px var(--focus);
  /* Typographie */
  --font-display: "Baloo 2", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --font-body: "Lexend", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --font-legible: "Atkinson Hyperlegible", "Verdana", system-ui, sans-serif;
  --lh: 1.65;
  --ls: 0;
  --ws: 0;
  --ps: 0px;               /* espacement supplémentaire entre paragraphes */
  --track-display: -.012em;
  /* Échelle (quarte augmentée, arrondie) */
  --step--1: .875rem;
  --step-0: 1rem;
  --step-1: 1.2rem;
  --step-2: 1.5rem;
  --step-3: 1.95rem;
  --step-4: 2.6rem;
  --step-5: 3.4rem;
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
  --wrap: 72rem;
  --header-h: 68px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #F0F1FB; --spark: #FFC94D; --coral: #FF7A66; --coral-txt: #FF9A8A; --mint: #36C3A4; --mint-txt: #5FD9BD;
    --lilac: #9B8FFF; --lilac-txt: #B7AEFF; --sky: #5AA6F0; --sky-txt: #8CC2F6;
    --bg: #0F1329; --surface: #171C38; --surface-2: #20264A; --surface-3: #2A3159; --fg: #E9EBF8; --muted: #A3A9CF;
    --line: #2E3562; --line-strong: #666FA3; --focus: #8CC2F6; --on-ink: #10142B; --on-accent: #10142B; --night: #1A2150; --night-2: #262E66; --warm-panel: #1D2244;
    --shadow-xs: 0 1px 2px rgba(0,0,0,.25); --shadow-sm: 0 1px 2px rgba(0,0,0,.3), 0 4px 12px -4px rgba(0,0,0,.35);
    --shadow: 0 2px 4px rgba(0,0,0,.25), 0 14px 30px -8px rgba(0,0,0,.5); --shadow-lg: 0 8px 16px rgba(0,0,0,.3), 0 30px 70px -18px rgba(0,0,0,.65);
    --tint-spark: #3A3218; --tint-coral: #3D2228; --tint-mint: #14352F; --tint-lilac: #282650; --tint-sky: #172E4A;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ink: #F0F1FB; --spark: #FFC94D; --coral: #FF7A66; --coral-txt: #FF9A8A; --mint: #36C3A4; --mint-txt: #5FD9BD;
  --lilac: #9B8FFF; --lilac-txt: #B7AEFF; --sky: #5AA6F0; --sky-txt: #8CC2F6;
  --bg: #0F1329; --surface: #171C38; --surface-2: #20264A; --surface-3: #2A3159; --fg: #E9EBF8; --muted: #A3A9CF;
  --line: #2E3562; --line-strong: #666FA3; --focus: #8CC2F6; --on-ink: #10142B; --on-accent: #10142B; --night: #1A2150; --night-2: #262E66; --warm-panel: #1D2244;
  --shadow-xs: 0 1px 2px rgba(0,0,0,.25); --shadow-sm: 0 1px 2px rgba(0,0,0,.3), 0 4px 12px -4px rgba(0,0,0,.35);
  --shadow: 0 2px 4px rgba(0,0,0,.25), 0 14px 30px -8px rgba(0,0,0,.5); --shadow-lg: 0 8px 16px rgba(0,0,0,.3), 0 30px 70px -18px rgba(0,0,0,.65);
  --tint-spark: #3A3218; --tint-coral: #3D2228; --tint-mint: #14352F; --tint-lilac: #282650; --tint-sky: #172E4A;
  color-scheme: dark;
}
/* Réglages d'accessibilité (les réglages avancés sont dans a11y.css) */
:root[data-taille="grand"] { font-size: 112.5%; }
:root[data-taille="tres-grand"] { font-size: 125%; }
:root[data-police="lisible"] { --font-body: var(--font-legible); --font-display: var(--font-legible); --lh: 1.8; --ls: .02em; --ws: .1em; --track-display: 0; }
:root[data-calme="1"] body { filter: saturate(.55); }
:root[data-calme="1"] *, :root[data-calme="1"] *::before, :root[data-calme="1"] *::after { animation: none !important; transition: none !important; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); background-color: var(--bg); }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--font-body); font-size: var(--step-0); line-height: var(--lh);
  letter-spacing: var(--ls); word-spacing: var(--ws);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--surface); }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); line-height: 1.12; text-wrap: balance; margin: 0; letter-spacing: 0; }
h1 { font-size: var(--step-4); font-weight: 800; letter-spacing: var(--track-display); }
h2 { font-size: var(--step-3); font-weight: 700; letter-spacing: calc(var(--track-display) / 2); }
h3 { font-size: var(--step-2); font-weight: 700; }
h4 { font-size: var(--step-1); font-weight: 700; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--sky-txt); text-decoration-thickness: from-font; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
strong { font-weight: 600; }
img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
::selection { background: color-mix(in srgb, var(--spark) 55%, transparent); color: var(--fg); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
:where(p, li, td, dd, span) > a:not([class]):focus-visible, .linkbtn:focus-visible { border-radius: 4px; }
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }
.ic { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.25em; }
.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 { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--on-ink); padding: 10px 16px; border-radius: var(--radius-sm); font-weight: 600; }
.skip:focus { top: calc(10px + env(safe-area-inset-top, 0px)); }
.muted { color: var(--muted); }
.small { font-size: var(--step--1); }
.prose { max-width: 68ch; display: grid; gap: calc(1em + var(--ps)); }
.prose > h2 { font-size: var(--step-2); margin-top: .7em; }
.prose > h3 { font-size: var(--step-1); margin-top: .45em; }
.prose h2 + *, .prose h3 + * { margin-top: -.35em; }
.prose ul, .prose ol { margin: 0; padding-left: 1.3em; display: grid; gap: .4em; }
.prose li::marker { color: var(--lilac); }
.prose blockquote { margin: 0; padding: 16px 20px; background: var(--surface-2); border-radius: var(--radius); border-left: 4px solid var(--lilac); }
.eyebrow { font-family: var(--font-body); font-size: var(--step--1); font-weight: 600; letter-spacing: .02em; color: var(--lilac-txt); }
.tabular { font-variant-numeric: tabular-nums; }

/* ---------- Coque ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.topbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: color-mix(in srgb, var(--surface) 88%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid color-mix(in srgb, var(--line) 80%, transparent); box-shadow: 0 1px 0 rgba(255,255,255,.4) inset; }
.topbar .wrap { display: flex; align-items: center; gap: 12px; min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; min-width: 44px; text-decoration: none; color: var(--ink); flex: none; border-radius: 12px; }
.brand svg.mono { width: 38px; height: 38px; transition: transform .3s var(--ease-bounce); }
.brand:hover svg.mono { transform: rotate(-6deg) scale(1.04); }
.wordmark { font-family: "Baloo 2", var(--font-display); font-weight: 800; font-size: 1.65rem; line-height: 1; letter-spacing: -.01em; color: var(--ink); position: relative; }
.wordmark .e { position: relative; display: inline-block; }
.wordmark .e::after { content: ""; position: absolute; left: 52%; top: -.04em; width: .2em; height: .2em; border-radius: 50%; background: var(--coral); transform: translateX(-30%); box-shadow: .16em -.15em 0 -.035em var(--spark); }
.mainnav { display: flex; gap: 2px; margin-left: auto; align-items: center; }
.mainnav a { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 8px 13px; border-radius: 999px; text-decoration: none; color: var(--fg); font-weight: 500; font-size: .95rem; white-space: nowrap; transition: background .15s ease, color .15s ease; }
.mainnav a .ic { color: var(--muted); transition: color .15s ease; }
.mainnav a:hover { background: var(--surface-2); }
.mainnav a:hover .ic { color: var(--lilac-txt); }
.mainnav a[aria-current="page"] { background: var(--tint-lilac); color: var(--lilac-txt); font-weight: 600; }
.mainnav a[aria-current="page"] .ic { color: currentColor; }
.topbar .actions { display: flex; gap: 8px; align-items: center; }
.iconbtn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); cursor: pointer; text-decoration: none; box-shadow: var(--shadow-xs); transition: background .15s ease, border-color .15s ease, transform .15s var(--ease); }
.iconbtn:hover { background: var(--surface-2); border-color: color-mix(in srgb, var(--line-strong) 50%, var(--line)); }
.iconbtn:active { transform: scale(.96); }
.iconbtn[aria-current="page"], .iconbtn[aria-expanded="true"] { background: var(--tint-lilac); color: var(--lilac-txt); border-color: color-mix(in srgb, var(--lilac) 40%, transparent); }
main { padding-block: 32px 120px; min-height: 70vh; }
main:focus { outline: none; }
.tabbar { display: none; }
@media (max-width: 1120px) { .mainnav a .ic { display: none; } .mainnav a { padding-inline: 11px; } }
@media (max-width: 1000px) { .topbar .actions .btn .label-lg { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; } .topbar .actions .btn:has(.label-lg) { padding-inline: 12px; min-width: 44px; } }
@media (max-width: 980px) { .mainnav a { padding-inline: 8px; font-size: .9rem; } .topbar .wordmark { font-size: 1.45rem; } .brand svg.mono { width: 34px; height: 34px; } .topbar .actions { gap: 6px; } }
@media (max-width: 860px) {
  .mainnav, .topbar .actions .hide-sm { display: none; }
  .topbar .actions { margin-left: auto; }
  .topbar .actions .btn .label-lg { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .tabbar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: color-mix(in srgb, var(--surface) 94%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--line); box-shadow: 0 -6px 24px -12px rgba(30, 39, 86, .18);
    padding: 6px max(6px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-left, 0px)); }
  .tabbar a { display: grid; justify-items: center; align-content: center; gap: 3px; min-height: 52px; padding: 4px 2px; text-decoration: none; color: var(--muted); font-size: .72rem; font-weight: 500; border-radius: 14px; min-width: 0; }
  .tabbar a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tabbar a .ic { width: 22px; height: 22px; box-sizing: content-box; padding: 3px 14px; border-radius: 999px; transition: background .2s var(--ease), color .2s ease; }
  .tabbar a[aria-current="page"] { color: var(--lilac-txt); font-weight: 600; }
  .tabbar a[aria-current="page"] .ic { background: var(--tint-lilac); }
  h1 { font-size: 2.1rem; }
  h2 { font-size: 1.6rem; }
}
@media (max-width: 420px) { .topbar .wrap { gap: 8px; } .topbar .actions { gap: 6px; } .topbar .wordmark { font-size: 1.45rem; } .brand svg.mono { width: 34px; height: 34px; } .topbar .actions .btn .label-lg { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; } .topbar .actions .btn:has(.label-lg) { padding-inline: 12px; min-width: 44px; } }

/* Pied de page */
.footer:empty { display: none; }
.footer { border-top: 1px solid var(--line); background: var(--surface); padding-block: 48px 110px; position: relative; overflow: hidden; }
.footer::before { content: ""; position: absolute; right: -60px; top: -70px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--tint-lilac), transparent 70%); pointer-events: none; }
.footer .wrap { position: relative; }
.footer .cols { display: grid; grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr)); gap: 24px; }
.footer h4 { font-size: 1rem; margin-bottom: 8px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.footer li a { display: inline-flex; align-items: center; min-height: 44px; }
.footer a { color: var(--fg); text-decoration: none; font-size: .93rem; }
.footer a:hover { text-decoration: underline; color: var(--lilac-txt); }
.footer .help { display: grid; gap: 4px; padding: 12px 14px; border-radius: var(--radius); background: var(--tint-coral); font-size: .9rem; }
.footer .help a { color: var(--coral-txt); font-weight: 600; text-decoration: underline; display: inline-flex; align-items: center; min-height: 44px; margin-block: -8px -10px; justify-self: start; }
.footer .legal { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: space-between; align-items: center; }
.footer .legal a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 960px) { .footer .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer .cols > :first-child { grid-column: 1 / -1; } }

/* ---------- Boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 22px; border-radius: 999px; border: 2px solid transparent; font-weight: 600; text-decoration: none; cursor: pointer; line-height: 1.2; text-align: center; transition: transform .15s var(--ease), background .15s ease, box-shadow .2s ease, border-color .15s ease; -webkit-tap-highlight-color: transparent; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn-primary { background: var(--ink); color: var(--on-ink); box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 6px 16px -8px rgba(30, 39, 86, .7); }
.btn-primary:hover { background: color-mix(in srgb, var(--ink) 86%, var(--lilac)); box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 10px 22px -8px rgba(30, 39, 86, .6); }
.btn-spark { background: var(--spark); color: #1E2756; box-shadow: 0 1px 0 rgba(255,255,255,.45) inset, 0 6px 16px -8px rgba(201, 135, 0, .9); }
.btn-spark:hover { background: color-mix(in srgb, var(--spark) 85%, #fff); }
.btn-ghost { background: transparent; border-color: color-mix(in srgb, var(--line-strong) 38%, var(--line)); color: var(--fg); }
.btn-ghost:hover { background: var(--surface); border-color: color-mix(in srgb, var(--line-strong) 70%, var(--line)); box-shadow: var(--shadow-xs); }
.btn-danger { background: var(--tint-coral); color: var(--coral-txt); border-color: color-mix(in srgb, var(--coral) 40%, transparent); }
.btn-danger:hover { border-color: var(--coral); }
.btn-sm { min-height: 44px; padding: 8px 16px; font-size: .9rem; }
.btn-block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--sky-txt); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; font-weight: 500; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.row.end { justify-content: flex-end; }
.row.between { justify-content: space-between; }
.stack { display: grid; gap: 16px; }
.stack-lg { display: grid; gap: 32px; }
.stack-xl { display: grid; gap: clamp(48px, 6vw, 72px); }

/* ---------- Surfaces ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px; min-width: 0; box-shadow: var(--shadow-xs); }
.card.flat { border: 0; background: var(--surface-2); box-shadow: none; }
.card.lift { box-shadow: var(--shadow); border-color: transparent; }
a.card { display: block; text-decoration: none; color: inherit; transition: transform .2s var(--ease), box-shadow .2s ease, border-color .2s ease; }
a.card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--lilac) 35%, var(--line)); }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .g2, .g3, .g4 { grid-template-columns: minmax(0, 1fr); } }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .8rem; font-weight: 600; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.pill.lilac { background: var(--tint-lilac); color: var(--lilac-txt); }
.pill.coral { background: var(--tint-coral); color: var(--coral-txt); }
.pill.mint { background: var(--tint-mint); color: var(--mint-txt); }
.pill.spark { background: var(--tint-spark); color: var(--ink); }
.pill.sky { background: var(--tint-sky); color: var(--sky-txt); }
.note { display: flex; gap: 12px; align-items: flex-start; padding: 15px 18px; border-radius: var(--radius); background: var(--tint-sky); color: var(--fg); border: 1px solid color-mix(in srgb, var(--sky) 18%, transparent); }
.note .ic { color: var(--sky-txt); margin-top: 2px; }
.note.warn { background: var(--tint-spark); border-color: color-mix(in srgb, var(--spark) 35%, transparent); }
.note.warn .ic { color: var(--ink); }
.note.alert { background: var(--tint-coral); border-color: color-mix(in srgb, var(--coral) 25%, transparent); }
.note.alert .ic { color: var(--coral-txt); }
.note.ok { background: var(--tint-mint); border-color: color-mix(in srgb, var(--mint) 25%, transparent); }
.note.ok .ic { color: var(--mint-txt); }
.note > div { min-width: 0; display: grid; gap: 6px; }
.badge-demo { display: inline-flex; gap: 6px; align-items: center; background: var(--tint-spark); color: var(--ink); padding: 6px 12px; border-radius: 999px; font-size: .85rem; font-weight: 600; border: 1px solid color-mix(in srgb, var(--spark) 40%, transparent); }
hr.sep { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* ---------- Titres de page ---------- */
.pagehead { display: grid; gap: 12px; margin-bottom: 32px; }
.pagehead p.lead { font-size: var(--step-1); color: var(--muted); max-width: 60ch; line-height: 1.55; }
.crumbs { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; font-size: .9rem; color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration-color: color-mix(in srgb, var(--muted) 45%, transparent); display: inline-block; padding-block: 10px; margin-block: -10px; }
.crumbs a:hover { color: var(--lilac-txt); }
.crumbs .ic { width: 1em; height: 1em; opacity: .6; }

/* ---------- Accueil ---------- */
.hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 32px; align-items: center; padding-block: 12px 24px; }
.hero h1 { font-size: clamp(2.4rem, 5.6vw, 4.4rem); line-height: 1; }
.hero h1 .hl { background: linear-gradient(transparent 62%, color-mix(in srgb, var(--spark) 70%, transparent) 62%); padding: 0 .08em; }
.hero .lead { font-size: 1.2rem; color: var(--muted); max-width: 42ch; margin-top: 18px; line-height: 1.55; }
.hero .cta { margin-top: 26px; }
.hero-art { position: relative; aspect-ratio: 1 / 1; max-width: 100%; }
.hero-art svg { width: 100%; height: 100%; display: block; }
@media (max-width: 860px) { .hero { grid-template-columns: minmax(0, 1fr); } .hero-art { max-width: 280px; margin: 0 auto; order: -1; width: 100%; } }
.pillars { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; position: relative; }
@media (max-width: 960px) { .pillars { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 480px) { .pillars { grid-template-columns: minmax(0,1fr); gap: 12px; } .pillar { grid-template-columns: auto minmax(0, 1fr); gap: 2px 14px; padding: 18px; } .pillar .bubble { grid-row: span 2; width: 46px; height: 46px; } .pillar h3 { font-size: 1.25rem; } .pillar p { font-size: .95rem; } }
.pillar { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--radius-lg); padding: 24px 22px; display: grid; gap: 10px; align-content: start; text-decoration: none; color: var(--fg); transition: transform .2s var(--ease), box-shadow .2s ease; border: 1px solid transparent; }
.pillar::after { content: ""; position: absolute; z-index: -1; right: -34px; top: -34px; width: 120px; height: 120px; border-radius: 50%; background: var(--pc, currentColor); opacity: .14; box-shadow: -62px 66px 0 -46px var(--pc, currentColor); transition: transform .4s var(--ease); }
.pillar:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.pillar:hover::after { transform: scale(1.12); }
.pillar .bubble { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: var(--on-accent); box-shadow: 0 6px 14px -6px var(--pc, currentColor); }
.pillar .bubble .ic { width: 24px; height: 24px; }
.pillar h3 { font-size: 1.4rem; }
.pillar p { color: var(--fg); opacity: .88; }
.pillar.lilac { background: var(--tint-lilac); --pc: var(--lilac); } .pillar.lilac .bubble { background: var(--lilac); color: var(--on-accent); }
.pillar.coral { background: var(--tint-coral); --pc: var(--coral); } .pillar.coral .bubble { background: var(--coral); color: var(--on-accent); }
.pillar.mint { background: var(--tint-mint); --pc: var(--mint); } .pillar.mint .bubble { background: var(--mint); color: var(--on-accent); }
.pillar.spark { background: var(--tint-spark); --pc: var(--spark); } .pillar.spark .bubble { background: var(--spark); color: #1E2756; }
.audience { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
@media (max-width: 760px) { .audience { grid-template-columns: minmax(0,1fr); } }
.audience .card { display: grid; gap: 10px; align-content: start; }
.audience ul { margin: 0; padding-left: 1.1em; display: grid; gap: 4px; color: var(--muted); }
.band { position: relative; overflow: hidden; isolation: isolate; background: var(--night); color: #fff; border-radius: var(--radius-xl); padding: 36px; display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; box-shadow: var(--shadow); }
.band::before { content: ""; position: absolute; z-index: -1; inset: auto -80px -120px auto; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(123, 108, 240, .45), transparent 65%); }
.band h2, .band h3 { color: #fff; }
.band p { color: rgba(255, 255, 255, .84); }
.band a:not(.btn) { color: #fff; }
@media (max-width: 700px) { .band { grid-template-columns: minmax(0, 1fr); padding: 26px 22px; } }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 8px 16px; margin-bottom: 20px; }
.section-head > div { display: grid; gap: 6px; max-width: 62ch; }
.section-head p { color: var(--muted); }
.section-head > a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; text-decoration: none; color: var(--lilac-txt); }
.section-head > a:hover { text-decoration: underline; }

/* ---------- Bibliothèque ---------- */
.hub { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 16px; }
.topic { display: grid; gap: 8px; padding: 20px 20px 22px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: inherit; transition: border-color .2s ease, transform .2s var(--ease), box-shadow .2s ease; align-content: start; box-shadow: var(--shadow-xs); }
.topic:hover { border-color: color-mix(in srgb, var(--lilac) 55%, var(--line)); transform: translateY(-2px); box-shadow: var(--shadow); }
.topic:hover h3 { color: var(--lilac-txt); }
.topic:focus-visible { outline: none; box-shadow: var(--ring); }
.topic .meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.topic .meta > .ic { color: var(--lilac-txt); }
.topic h3 { font-size: 1.2rem; transition: color .15s ease; }
.topic p { color: var(--muted); font-size: .95rem; }
.article { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 48px; align-items: start; }
.article aside { position: sticky; top: calc(var(--header-h) + 20px + env(safe-area-inset-top, 0px)); display: grid; gap: 14px; }
@media (max-width: 960px) { .article { grid-template-columns: minmax(0,1fr); gap: 32px; } .article aside { position: static; } }
.toc { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.toc a { display: flex; align-items: center; min-height: 44px; padding: 10px 12px; border-radius: var(--radius-sm); text-decoration: none; color: var(--fg); font-size: .92rem; line-height: 1.4; transition: background .15s ease, color .15s ease; }
.toc a:hover { background: var(--surface-2); color: var(--lilac-txt); }
.keypoints { position: relative; overflow: hidden; background: var(--tint-lilac); border-radius: var(--radius-lg); padding: 20px 22px; display: grid; gap: 8px; }
.keypoints::after { content: ""; position: absolute; right: -26px; top: -26px; width: 90px; height: 90px; border-radius: 50%; background: var(--lilac); opacity: .08; pointer-events: none; }
.keypoints h2 { font-size: 1.15rem; color: var(--lilac-txt); }
.keypoints ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; position: relative; }
.timeline li { display: grid; grid-template-columns: 86px 1fr; gap: 16px; padding-bottom: 18px; position: relative; }
.timeline li::before { content: ""; position: absolute; left: 96px; top: 10px; bottom: -4px; width: 2px; background: var(--line); }
.timeline li:last-child::before { display: none; }
.timeline .yr { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; color: var(--lilac-txt); text-align: right; font-variant-numeric: tabular-nums; }
.timeline .ev { position: relative; padding-left: 18px; }
.timeline .ev::before { content: ""; position: absolute; left: -9px; top: 8px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 3px solid var(--lilac); }
@media (max-width: 520px) { .timeline li { grid-template-columns: 48px 1fr; gap: 18px; } .timeline li::before { left: 64px; } .timeline .yr { font-size: .95rem; } }
details.acc { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-xs); transition: border-color .15s ease; }
details.acc[open] { border-color: color-mix(in srgb, var(--lilac) 35%, var(--line)); }
details.acc + details.acc { margin-top: 8px; }
details.acc summary { cursor: pointer; list-style: none; min-height: 48px; padding: 12px 16px; font-weight: 600; display: flex; justify-content: space-between; gap: 12px; align-items: center; border-radius: var(--radius); }
details.acc summary::-webkit-details-marker { display: none; }
details.acc summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2); font-family: var(--font-display); font-size: 1.3rem; line-height: 1; color: var(--lilac-txt); }
details.acc[open] summary::after { content: "–"; background: var(--tint-lilac); }
details.acc > div { padding: 0 16px 16px; display: grid; gap: 10px; }
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
table.t { border-collapse: collapse; width: 100%; min-width: 520px; font-size: .94rem; }
table.t th, table.t td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.t th { background: var(--surface-2); font-weight: 600; }
table.t tr:last-child td { border-bottom: 0; }
.pros { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 12px; }
.pro { display: grid; gap: 6px; padding: 18px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); align-content: start; box-shadow: var(--shadow-xs); }
.pro .head { display: flex; gap: 10px; align-items: center; }
.pro .head .ic { width: 36px; height: 36px; padding: 7px; border-radius: 12px; background: var(--tint-mint); color: var(--mint-txt); }
.sources { font-size: .88rem; color: var(--muted); display: grid; gap: 4px; padding-top: 16px; border-top: 1px dashed var(--line); }
.sources ul { margin: 0; padding-left: 1.1em; }

/* ---------- Formulaires ---------- */
.field { display: grid; gap: 6px; }
.field label, .field .label { font-weight: 600; font-size: .95rem; }
.field .hint { font-size: .85rem; color: var(--muted); }
.input, select.input, textarea.input { width: 100%; min-height: 48px; padding: 10px 14px; border: 2px solid color-mix(in srgb, var(--line-strong) 70%, var(--line)); border-radius: 12px; background: var(--surface); color: var(--fg); transition: border-color .15s ease, box-shadow .15s ease; }
.input:hover { border-color: var(--line-strong); }
textarea.input { min-height: 110px; resize: vertical; }
.input:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 25%, transparent); }
.input[aria-invalid="true"] { border-color: var(--coral); }
.check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; padding-block: 6px; }
.check input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--ink); flex: none; cursor: pointer; }
.err { color: var(--coral-txt); font-size: .9rem; font-weight: 500; }
.formcard { max-width: 520px; margin: 0 auto; }
.choices { display: grid; gap: 8px; }
.choices.inline { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice > span { display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center; min-height: 48px; padding: 10px 12px; border: 2px solid color-mix(in srgb, var(--line-strong) 55%, var(--line)); border-radius: 12px; background: var(--surface); font-weight: 500; transition: background .15s, border-color .15s, box-shadow .15s; }
.choice:hover > span { border-color: var(--line-strong); }
.choice input:checked + span { border-color: var(--ink); background: var(--tint-lilac); color: var(--ink); font-weight: 600; box-shadow: 0 0 0 1px var(--ink) inset; }
.choice input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.pwmeter { height: 6px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.pwmeter i { display: block; height: 100%; width: 0; background: var(--coral); transition: width .2s, background .2s; }
.code-box { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 1.15rem; letter-spacing: .06em; background: var(--surface-2); border: 2px dashed var(--line-strong); border-radius: var(--radius); padding: 16px; text-align: center; word-break: break-all; user-select: all; }

/* ---------- Questionnaires ---------- */
.qprogress { height: 8px; background: var(--surface-3); border-radius: 6px; overflow: hidden; }
.qprogress i { display: block; height: 100%; background: var(--lilac); border-radius: 6px; transition: width .3s var(--ease); }
.qcard { max-width: 720px; margin: 0 auto; display: grid; gap: 22px; }
.qitem { display: grid; gap: 14px; }
.qitem .qtext { font-family: var(--font-display); font-size: 1.55rem; font-weight: 700; line-height: 1.25; color: var(--ink); }
.qitem .qex { color: var(--muted); }
.scale { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 8px; }
@media (max-width: 560px) { .scale { grid-template-columns: minmax(0,1fr); } }
.scale button { min-height: 58px; border: 2px solid color-mix(in srgb, var(--line-strong) 55%, var(--line)); background: var(--surface); border-radius: var(--radius); padding: 8px 10px; cursor: pointer; font-weight: 600; display: grid; gap: 2px; justify-items: center; text-align: center; transition: border-color .15s ease, background .15s ease, transform .12s var(--ease); }
.scale button small { font-weight: 400; color: var(--muted); font-size: .8rem; }
.scale button:hover { border-color: var(--lilac); }
.scale button:active { transform: scale(.98); }
.scale button[aria-pressed="true"] { border-color: var(--ink); background: var(--tint-lilac); box-shadow: 0 0 0 1px var(--ink) inset; }
.meter { display: grid; gap: 6px; }
.meter .bar { height: 14px; border-radius: 8px; background: var(--surface-3); position: relative; overflow: hidden; }
.meter .bar i { position: absolute; inset: 0 auto 0 0; border-radius: 8px; }
.meter .lbl { display: flex; justify-content: space-between; gap: 10px; font-size: .92rem; }
.resultband { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; padding: 22px; border-radius: var(--radius-lg); }
.resultband.low { background: var(--tint-mint); }
.resultband.mid { background: var(--tint-spark); }
.resultband.high { background: var(--tint-coral); }
@media (max-width: 560px) { .resultband { grid-template-columns: 1fr; } }

/* ---------- Graphiques ---------- */
.chart { width: 100%; overflow-x: auto; }
.chart svg { display: block; width: 100%; min-width: 300px; height: auto; }
.chart text { fill: var(--muted); font-family: var(--font-body); font-size: 13px; }
.chart .grid line { stroke: var(--line); stroke-width: 1; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .88rem; }
.legend span { display: inline-flex; gap: 6px; align-items: center; }
.legend i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal div { aspect-ratio: 1; border-radius: 8px; background: var(--surface-2); display: grid; place-items: center; font-size: .72rem; color: var(--muted); max-width: 100%; }
.stat { display: grid; gap: 2px; }
.stat b { font-family: var(--font-display); font-size: 1.9rem; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat span { font-size: .85rem; color: var(--muted); }

/* Thème sombre : icônes foncées sur les pastilles d'accent claires (contraste >= 6,7:1) */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .avatar:is([style*="background:var(--coral)"], [style*="background:var(--mint)"], [style*="background:var(--lilac)"], [style*="background:var(--sky)"]):not([style*="color:"]) { color: var(--on-accent); } }
:root[data-theme="dark"] .avatar:is([style*="background:var(--coral)"], [style*="background:var(--mint)"], [style*="background:var(--lilac)"], [style*="background:var(--sky)"]):not([style*="color:"]) { color: var(--on-accent); }

/* ---------- Espace parent ---------- */
.kid-switch { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.kid-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; border: 2px solid var(--line); background: var(--surface); text-decoration: none; color: var(--fg); font-weight: 600; white-space: nowrap; transition: border-color .15s ease; }
.kid-chip:hover { border-color: var(--line-strong); }
.kid-chip[aria-current="page"] { border-color: var(--ink); background: var(--tint-lilac); }
.avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.row > .avatar + div { flex: 1 1 240px; min-width: 0; }
.avatar .ic { width: 22px; height: 22px; }
.avatar.lg { width: 64px; height: 64px; box-shadow: 0 8px 18px -10px rgba(30, 39, 86, .6); } .avatar.lg .ic { width: 34px; height: 34px; }
.tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--line); overflow-x: auto; margin-bottom: 22px; scrollbar-width: thin; }
.tabs button, .tabs a { background: none; border: 0; min-height: 46px; padding: 10px 14px; font-weight: 600; color: var(--muted); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; white-space: nowrap; text-decoration: none; border-radius: 10px 10px 0 0; transition: color .15s ease, background .15s ease; }
.tabs button:hover, .tabs a:hover { color: var(--ink); background: var(--surface-2); }
.tabs [aria-selected="true"] { color: var(--ink); border-bottom-color: var(--lilac); }
.todo { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--radius); background: var(--surface-2); }
.todo .ic { color: var(--lilac-txt); }
.todo > div { flex: 1; min-width: 0; }
.list { display: grid; gap: 8px; }
.li { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
a.li { transition: border-color .15s ease, box-shadow .15s ease; }
a.li:hover { border-color: color-mix(in srgb, var(--lilac) 45%, var(--line)); box-shadow: var(--shadow-sm); }
.li > .grow { flex: 1; min-width: 0; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: s; }
.steps li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); counter-increment: s; box-shadow: var(--shadow-xs); }
.steps li::before { content: counter(s); width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--tint-lilac); color: var(--lilac-txt); font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; }
.steps li.done::before { content: "✓"; background: var(--mint); color: #fff; }
.steps li > div { display: grid; gap: 6px; min-width: 0; }

/* ---------- Modales et toasts ---------- */
dialog.modal { border: 0; border-radius: var(--radius-xl); padding: 0; width: min(560px, calc(100vw - 32px)); background: var(--surface); color: var(--fg); box-shadow: var(--shadow-lg), 0 0 0 1px color-mix(in srgb, var(--line) 60%, transparent); }
dialog.modal[open] { animation: dlg .22s var(--ease); }
@keyframes dlg { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
dialog.modal::backdrop { background: rgba(15, 19, 41, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
dialog.modal .mbody { padding: 26px; display: grid; gap: 16px; max-height: 80vh; overflow-y: auto; }
.toasts { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(88px + env(safe-area-inset-bottom, 0px)); z-index: 90; display: grid; gap: 8px; width: min(440px, calc(100vw - 32px)); }
.toast { background: var(--ink); color: var(--on-ink); padding: 12px 16px; border-radius: var(--radius); display: flex; gap: 10px; align-items: center; box-shadow: var(--shadow-lg); animation: tin .3s var(--ease-bounce); }
@keyframes tin { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }

/* ---------- Mode enfant ---------- */
body.kid { background:
  radial-gradient(circle at 8% 12%, color-mix(in srgb, var(--spark) 22%, transparent) 0 60px, transparent 61px),
  radial-gradient(circle at 94% 22%, color-mix(in srgb, var(--lilac) 16%, transparent) 0 90px, transparent 91px),
  radial-gradient(circle at 88% 78%, color-mix(in srgb, var(--mint) 14%, transparent) 0 70px, transparent 71px),
  radial-gradient(circle at 4% 70%, color-mix(in srgb, var(--coral) 12%, transparent) 0 46px, transparent 47px),
  linear-gradient(180deg, color-mix(in srgb, var(--tint-sky) 70%, var(--bg)), var(--bg) 520px) var(--bg);
  background-attachment: fixed; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body.kid { background:
  radial-gradient(circle at 8% 12%, color-mix(in srgb, var(--spark) 9%, transparent) 0 60px, transparent 61px),
  radial-gradient(circle at 94% 22%, color-mix(in srgb, var(--lilac) 10%, transparent) 0 90px, transparent 91px),
  radial-gradient(circle at 88% 78%, color-mix(in srgb, var(--mint) 8%, transparent) 0 70px, transparent 71px),
  linear-gradient(180deg, #141A3A, var(--bg) 520px) var(--bg); background-attachment: fixed; } }
:root[data-theme="dark"] body.kid { background:
  radial-gradient(circle at 8% 12%, color-mix(in srgb, var(--spark) 9%, transparent) 0 60px, transparent 61px),
  radial-gradient(circle at 94% 22%, color-mix(in srgb, var(--lilac) 10%, transparent) 0 90px, transparent 91px),
  radial-gradient(circle at 88% 78%, color-mix(in srgb, var(--mint) 8%, transparent) 0 70px, transparent 71px),
  linear-gradient(180deg, #141A3A, var(--bg) 520px) var(--bg); background-attachment: fixed; }
body.kid .topbar { background: color-mix(in srgb, var(--surface) 90%, transparent); }
body.kid .topbar .kidbar { margin-left: auto; display: flex; gap: 8px; align-items: center; }
@media (max-width: 420px) { body.kid .topbar .wordmark { display: none; } }
.kidhead { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.kidhead h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); }
.starcount { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 14px; border-radius: 999px; background: var(--tint-spark); border: 1px solid color-mix(in srgb, var(--spark) 45%, transparent); font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; color: var(--ink); }
.starcount .ic { color: #E8A100; fill: var(--spark); }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tile { position: relative; overflow: hidden; isolation: isolate; display: grid; gap: 12px; justify-items: start; align-content: space-between; min-height: 156px; padding: 18px; border-radius: 28px; text-decoration: none; color: #1E2756; border: 0; cursor: pointer; text-align: left; font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; line-height: 1.1; box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 -4px 0 rgba(30, 39, 86, .1) inset, 0 10px 22px -14px rgba(30, 39, 86, .55); transition: transform .25s var(--ease-bounce), box-shadow .2s ease; }
/* Décor de bulles, appliqué aussi aux tuiles ajoutées par les autres modules */
.tile::before { content: ""; position: absolute; z-index: -1; right: -26px; top: -30px; width: 112px; height: 112px; border-radius: 50%; background: rgba(255, 255, 255, .3); transition: transform .4s var(--ease); }
.tile:hover { transform: translateY(-4px) rotate(-.6deg); box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 -4px 0 rgba(30, 39, 86, .1) inset, 0 18px 30px -14px rgba(30, 39, 86, .55); }
.tile:hover::before { transform: scale(1.1) translate(-4px, 4px); }
.tile:active { transform: translateY(0) scale(.98); }
.tile:focus-visible { outline: 4px solid #1E2756; outline-offset: 3px; }
.tile .ic { width: 52px; height: 52px; padding: 11px; border-radius: 18px; background: rgba(255,255,255,.7); box-shadow: 0 4px 10px -6px rgba(30, 39, 86, .5); }
.tile small { display: block; font-family: var(--font-body); font-weight: 500; font-size: .86rem; opacity: .88; margin-top: 4px; line-height: 1.3; }
.tile.t1 { background: #FFD66B; } .tile.t2 { background: #FFA99C; } .tile.t3 { background: #8FE0C9; }
.tile.t4 { background: #BDB4FF; } .tile.t5 { background: #9CCBF5; } .tile.t6 { background: #FFC6A0; }
@media (max-width: 760px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .tile { padding: 16px; min-height: 148px; font-size: 1.25rem; } .tile::before { width: 92px; height: 92px; } }
.routine { display: grid; gap: 10px; }
.rstep { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 20px; border: 3px solid var(--line); background: var(--surface); cursor: pointer; text-align: left; width: 100%; font-size: 1.15rem; font-weight: 600; box-shadow: var(--shadow-xs); transition: border-color .15s ease, background .15s ease, transform .15s var(--ease); }
.rstep:hover { border-color: color-mix(in srgb, var(--mint) 50%, var(--line)); }
.rstep:active { transform: scale(.99); }
.rstep .ic { width: 40px; height: 40px; padding: 7px; border-radius: 14px; background: var(--tint-sky); color: var(--sky-txt); }
.rstep[aria-pressed="true"] { border-color: var(--mint); background: var(--tint-mint); }
.rstep[aria-pressed="true"] .lbl { text-decoration: line-through; text-decoration-thickness: 2px; opacity: .7; }
.rstep .tick .ic { width: 20px; height: 20px; padding: 0; background: none; color: inherit; border-radius: 0; }
.rstep .tick { margin-left: auto; width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--line-strong); display: grid; place-items: center; color: transparent; flex: none; transition: background .2s ease, transform .3s var(--ease-bounce); }
.rstep[aria-pressed="true"] .tick { background: var(--mint); border-color: var(--mint); color: #fff; transform: scale(1.08); }
.weather { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 600px) { .weather { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.weather button { display: grid; gap: 6px; justify-items: center; padding: 14px 6px; border-radius: 22px; border: 3px solid transparent; cursor: pointer; font-weight: 700; font-size: .95rem; color: #1E2756; box-shadow: 0 -3px 0 rgba(30, 39, 86, .08) inset; transition: transform .2s var(--ease-bounce); }
.weather button:hover { transform: translateY(-2px); }
.weather button .ic { width: 46px; height: 46px; }
.weather button[aria-pressed="true"] { border-color: #1E2756; transform: scale(1.04); }
.calmcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 12px; }
.calmcard { padding: 18px; border-radius: 22px; display: grid; gap: 8px; background: var(--surface); border: 2px solid var(--line); }

/* Accueil enfant : Pip qui dit bonjour */
.kid-hello { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "pip title" "pip speech"; gap: 6px 20px; align-items: end; }
.kid-hello .mascot { grid-area: pip; align-self: center; width: 140px; height: 140px; animation: pipin .9s var(--ease-bounce) both, bob 3.2s ease-in-out .9s infinite; transform-origin: 50% 90%; filter: drop-shadow(0 10px 14px rgba(232, 161, 0, .25)); }
.kid-hello h1 { grid-area: title; font-size: clamp(2rem, 5.4vw, 2.9rem); }
.kid-hello .speech { grid-area: speech; align-self: start; justify-self: start; max-width: 52ch; margin-top: 6px; font-size: 1.08rem; animation: speechin .45s var(--ease-bounce) .45s both; }
.speech.tail::before { content: ""; position: absolute; left: -11px; top: 16px; width: 18px; height: 18px; background: inherit; border-left: 2px solid var(--line); border-bottom: 2px solid var(--line); transform: rotate(45deg); border-radius: 0 0 0 4px; }
@keyframes pipin { 0% { opacity: 0; transform: translateY(18px) scale(.6) rotate(-8deg); } 60% { opacity: 1; transform: translateY(-4px) scale(1.04) rotate(3deg); } 100% { transform: none; } }
@keyframes speechin { from { opacity: 0; transform: translateX(-8px) scale(.94); } to { opacity: 1; transform: none; } }
.tiles .tile { animation: tilein .5s var(--ease-bounce) both; }
.tiles .tile:nth-child(2) { animation-delay: .05s; } .tiles .tile:nth-child(3) { animation-delay: .1s; } .tiles .tile:nth-child(4) { animation-delay: .15s; }
.tiles .tile:nth-child(5) { animation-delay: .2s; } .tiles .tile:nth-child(6) { animation-delay: .25s; } .tiles .tile:nth-child(n+7) { animation-delay: .3s; }
@keyframes tilein { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
@media (max-width: 560px) {
  .kid-hello { grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "pip title" "speech speech"; gap: 4px 12px; align-items: center; }
  .kid-hello .mascot { width: 96px; height: 96px; }
  .kid-hello .speech { margin-top: 8px; }
  .kid-hello .speech.tail::before { left: 38px; top: -11px; border-left: 2px solid var(--line); border-top: 2px solid var(--line); border-bottom: 0; }
}
.stack > .badge-demo, .stack-lg > .badge-demo, .stack-xl > .badge-demo { justify-self: start; }

/* ---------- Jeux ---------- */
.game { display: grid; gap: 16px; max-width: 760px; margin: 0 auto; }
.gamehud { display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: space-between; align-items: center; font-weight: 600; }
.arena { position: relative; width: 100%; aspect-ratio: 4 / 3; max-width: 100%; border-radius: 26px; background: radial-gradient(circle at 30% 20%, #2A3470, #151B40); overflow: hidden; touch-action: manipulation; user-select: none; box-shadow: var(--shadow); }
.arena .target { position: absolute; width: 18%; aspect-ratio: 1; transform: translate(-50%, -50%) scale(.2); border: 0; background: none; padding: 0; cursor: pointer; animation: pop .22s ease forwards; }
.arena .target svg { width: 100%; height: 100%; }
@keyframes pop { to { transform: translate(-50%, -50%) scale(1); } }
.arena .msg { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: #fff; padding: 20px; font-family: var(--font-display); font-size: 1.6rem; font-weight: 800; }
.simon { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 420px; margin: 0 auto; width: 100%; }
.simon button { aspect-ratio: 1; border-radius: 28px; border: 0; cursor: pointer; opacity: .55; transition: opacity .1s, transform .1s; max-width: 100%; }
.simon button.on { opacity: 1; transform: scale(1.04); }
.simon button:nth-child(1) { background: #FFC233; border-top-left-radius: 90px; }
.simon button:nth-child(2) { background: #F2644F; border-top-right-radius: 90px; }
.simon button:nth-child(3) { background: #1FA58A; border-bottom-left-radius: 90px; }
.simon button:nth-child(4) { background: #7B6CF0; border-bottom-right-radius: 90px; }
.memgrid { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 10px; }
.memcard { aspect-ratio: 1; border-radius: 18px; border: 0; cursor: pointer; background: var(--ink); color: transparent; display: grid; place-items: center; transition: transform .25s ease, background .2s; max-width: 100%; }
.memcard .ic { width: 50%; height: 50%; }
.memcard.up, .memcard.found { background: var(--surface); color: var(--ink); border: 3px solid var(--line); }
.memcard.found { border-color: var(--mint); background: var(--tint-mint); color: var(--mint-txt); }
.timerdisc { width: min(320px, 80vw); aspect-ratio: 1; margin: 0 auto; max-width: 100%; }
.breath { width: min(300px, 75vw); aspect-ratio: 1; margin: 0 auto; display: grid; place-items: center; position: relative; max-width: 100%; }
.breath .ring { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, var(--tint-mint) 0%, var(--mint) 100%); transform: scale(.45); transition: transform 4s ease-in-out; opacity: .9; }
.breath .lbl { position: relative; font-family: var(--font-display); font-size: 1.8rem; font-weight: 800; color: #10142B; text-align: center; }
.quiz-opt { display: grid; gap: 10px; }
.quiz-opt button { min-height: 60px; border-radius: 18px; border: 3px solid var(--line); background: var(--surface); font-weight: 700; font-size: 1.1rem; cursor: pointer; padding: 10px 16px; transition: border-color .15s ease, transform .15s var(--ease); }
.quiz-opt button:hover { border-color: var(--lilac); }
.quiz-opt button.good { border-color: var(--mint); background: var(--tint-mint); }
.quiz-opt button.bad { border-color: var(--coral); background: var(--tint-coral); }
.mascot { width: 120px; height: 120px; flex: none; }
.mascot.sm { width: 72px; height: 72px; }
.mascot.lg { width: 180px; height: 180px; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.bob { animation: bob 3.2s ease-in-out infinite; }
.speech { position: relative; background: var(--surface); border: 2px solid var(--line); border-radius: 20px; padding: 14px 18px; font-weight: 500; box-shadow: var(--shadow-sm); }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 95; }

/* ---------- Charte ---------- */
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.swatch { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-xs); }
.swatch i { display: block; height: 90px; }
.swatch div { padding: 10px 12px; font-size: .85rem; display: grid; gap: 2px; }
.swatch code { font-size: .8rem; color: var(--muted); }
.logo-stage { display: grid; place-items: center; min-height: 220px; border-radius: var(--radius-lg); padding: 24px; }

/* ==========================================================================
   Accueil v2
   ========================================================================== */
.home { padding-top: 0; }
main:has(> .home) { padding-top: 20px; }
.home-section { display: grid; gap: 4px; }
.home h2 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); }

/* Héros bleu nuit, bulles qui pétillent */
.home-hero { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--radius-xl); background: var(--night); color: #fff; padding: clamp(28px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 24px 40px; align-items: center; box-shadow: var(--shadow-lg); }
.home-hero::before { content: ""; position: absolute; z-index: -1; inset: 0; background:
  radial-gradient(circle at 88% 8%, rgba(123, 108, 240, .55), transparent 42%),
  radial-gradient(circle at 6% 104%, rgba(242, 100, 79, .32), transparent 38%),
  radial-gradient(circle at 60% 120%, rgba(31, 165, 138, .28), transparent 40%); }
.home-hero::after { content: ""; position: absolute; z-index: -1; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .09) 1.2px, transparent 1.6px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(105deg, transparent 45%, #000 85%); mask-image: linear-gradient(105deg, transparent 45%, #000 85%); }
.home-hero h1 { color: #fff; font-size: clamp(2.6rem, 6.2vw, 4.7rem); line-height: .98; letter-spacing: -.018em; max-width: 11ch; }
:root[data-police="lisible"] .home-hero h1 { letter-spacing: 0; }
.home-hero h1 .dot { color: var(--spark); }
.home-hero .lead { margin-top: 20px; font-size: clamp(1.08rem, 1.6vw, 1.25rem); line-height: 1.55; color: rgba(255, 255, 255, .86); max-width: 44ch; }
.home-hero .cta { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.home-hero .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .42); }
.home-hero .btn-ghost:hover { background: rgba(255, 255, 255, .1); border-color: #fff; }
.home-hero .btn:focus-visible { box-shadow: 0 0 0 3px var(--night), 0 0 0 6px #8CC2F6; }
.home-hero .trust { margin-top: 18px; display: flex; gap: 8px; align-items: flex-start; font-size: .9rem; color: rgba(255, 255, 255, .8); max-width: 50ch; }
.home-hero .trust .ic { color: #5FD9BD; margin-top: 1px; }
.home-hero .art { position: relative; width: 112%; max-width: 540px; justify-self: center; aspect-ratio: 11 / 10; margin-right: -6%; }
.home-hero .art svg { width: 100%; height: 100%; display: block; overflow: visible; }
.hero-search { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 10px 8px 20px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); color: rgba(255, 255, 255, .88); text-decoration: none; font-size: 1rem; transition: background .2s ease, border-color .2s ease; max-width: 720px; }
.hero-search:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .45); }
.hero-search:focus-visible { outline: 3px solid #8CC2F6; outline-offset: 3px; }
.hero-search .ic { width: 22px; height: 22px; color: var(--spark); }
.hero-search span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-search b { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 6px 16px; border-radius: 999px; background: #fff; color: #1E2756; font-weight: 600; font-size: .92rem; }
/* Animation d'arrivée unique : Pip rebondit, les bulles éclosent */
.home-hero .hb, .home-hero .fz, .home-hero .hpip { transform-box: fill-box; transform-origin: center; }
.home-hero .hpip { animation: pipin .9s var(--ease-bounce) .1s both; }
.home-hero .hb { animation: bubblein .7s var(--ease-bounce) both; }
.home-hero .hb1 { animation-delay: .35s; } .home-hero .hb2 { animation-delay: .5s; } .home-hero .hb3 { animation-delay: .65s; } .home-hero .hb4 { animation-delay: .8s; }
.home-hero .fz { animation: fizz 1.4s var(--ease) both; }
.home-hero .fz:nth-of-type(2n) { animation-delay: .25s; } .home-hero .fz:nth-of-type(3n) { animation-delay: .5s; }
@keyframes bubblein { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: none; } }
@keyframes fizz { from { opacity: 0; transform: translateY(26px) scale(.6); } to { opacity: 1; transform: none; } }
@media (max-width: 860px) {
  .home-hero { grid-template-columns: minmax(0, 1fr); padding: 26px 20px 22px; border-radius: 28px; gap: 18px; }
  .home-hero .art { order: -1; width: 100%; max-width: 250px; margin: -6px auto -10px; }
  .home-hero .cta .btn { width: 100%; }
  .home-hero h1 { max-width: none; }
  .hero-search { padding-left: 16px; }
  .hero-search b { display: none; }
}

/* Ébulle pour… */
.aud-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 960px) { .aud-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .aud-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; } }
.aud { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: start; align-content: start; padding: 18px 20px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: inherit; box-shadow: var(--shadow-xs); transition: transform .2s var(--ease), box-shadow .2s ease, border-color .2s ease; }
.aud:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--c, var(--lilac)) 45%, var(--line)); }
.aud:focus-visible { outline: none; box-shadow: var(--ring); }
.aud .avatar { grid-row: span 2; width: 48px; height: 48px; background: var(--c); }
.aud .avatar.dark { color: #1E2756; }
.aud h3 { font-size: 1.22rem; display: flex; align-items: center; gap: 6px; }
.aud h3 .ic { width: 18px; height: 18px; color: var(--muted); transition: transform .2s var(--ease), color .2s ease; }
.aud:hover h3 .ic { transform: translateX(3px); color: var(--ink); }
.aud p { color: var(--muted); font-size: .93rem; line-height: 1.5; }
.home-injected:empty { display: none; }

/* Chiffres clés */
.figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .figures { grid-template-columns: minmax(0, 1fr); } }
.figure { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto 1fr; gap: 8px 16px; align-content: start; padding: 22px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-xs); }
.figure .num { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.8rem, 5vw, 3.6rem); line-height: .95; color: var(--ink); letter-spacing: -.01em; }
.figure .num small { font-size: .5em; font-weight: 700; margin-left: .06em; }
.figure .what { font-weight: 600; line-height: 1.4; }
.figure .src { grid-column: 1 / -1; align-self: end; font-size: .82rem; color: var(--muted); padding-top: 12px; margin-top: 6px; border-top: 1px dashed var(--line); }
.figure .src a { color: var(--muted); }
.figure .eg { color: var(--muted); font-size: .9rem; }
.figure .dots { grid-row: 1; grid-column: 2; width: 100px; height: 100px; }
.figure.coral .dots .on { fill: var(--coral); } .figure.coral .dots .off { fill: var(--tint-coral); }
.figure.lilac .dots .on { fill: var(--lilac); } .figure.lilac .dots .off { fill: var(--tint-lilac); }
.figure .dots .part { fill: var(--tint-lilac); stroke: var(--lilac); stroke-width: 1.4; }
.figure .num { grid-row: 1; grid-column: 1; align-self: center; }
.figure .what, .figure .eg { grid-column: 1 / -1; }
.figure .what { margin-top: 6px; font-size: 1.05rem; }
@media (max-width: 900px) { .figure .dots { width: 92px; height: 92px; } }
.figures-note { margin-top: 14px; display: flex; gap: 10px; align-items: flex-start; color: var(--muted); font-size: .92rem; max-width: 80ch; }
.figures-note .ic { color: var(--sky-txt); margin-top: 2px; }

/* Aperçu de l'application */
.apercu { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; align-items: center; }
@media (max-width: 900px) { .apercu { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
.apercu .feat { list-style: none; margin: 18px 0 24px; padding: 0; display: grid; gap: 14px; }
.apercu .feat li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 14px; }
.apercu .feat .avatar { grid-row: span 2; width: 42px; height: 42px; border-radius: 14px; }
.apercu .feat strong { font-weight: 600; }
.apercu .feat p { color: var(--muted); font-size: .93rem; }
.stage { position: relative; padding: 0 64px 96px 0; }
@media (max-width: 620px) { .stage { padding: 0; } }
.mock { position: relative; border-radius: 22px; background: var(--bg); border: 1px solid var(--line); box-shadow: var(--shadow-lg); overflow: hidden; font-size: .82rem; }
.mock .bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--surface); border-bottom: 1px solid var(--line); }
.mock .bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--surface-3); }
.mock .bar i:nth-child(1) { background: #F2644F; } .mock .bar i:nth-child(2) { background: #FFC233; } .mock .bar i:nth-child(3) { background: #1FA58A; }
.mock .bar span { margin-left: 8px; font-weight: 600; color: var(--muted); }
.mock .body { padding: 16px; display: grid; gap: 12px; }
.mock .hello { font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; color: var(--ink); line-height: 1.1; }
.mock .mrow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mock .mcard { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px; display: grid; gap: 8px; min-width: 0; }
.mock .who { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.mock .who .avatar { width: 30px; height: 30px; }
.mock .who .avatar .ic { width: 16px; height: 16px; }
.mock .who small { display: block; color: var(--muted); font-weight: 400; font-size: .74rem; }
.mock .big { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; line-height: 1; color: var(--ink); }
.mock .lbl { color: var(--muted); font-size: .74rem; }
.mock .moods { display: grid; grid-template-columns: repeat(7, minmax(0, 36px)); gap: 5px; }
.mock .moods span { aspect-ratio: 1; border-radius: 8px; display: grid; place-items: center; color: #1E2756; }
.mock .moods .ic { width: 60%; height: 60%; }
.mock .chk { display: grid; gap: 6px; }
.mock .chk span { display: flex; align-items: center; gap: 8px; }
.mock .chk .ic { width: 18px; height: 18px; padding: 2px; border-radius: 50%; border: 2px solid var(--line-strong); color: transparent; }
.mock .chk .on .ic { background: var(--mint); border-color: var(--mint); color: #fff; }
.mock .chk .on { color: var(--muted); text-decoration: line-through; }
.mock svg { max-width: 100%; }
.phone { position: absolute; right: 0; bottom: 0; width: 176px; border-radius: 30px; padding: 8px; background: #10142B; box-shadow: var(--shadow-lg); }
.phone .scr { border-radius: 23px; overflow: hidden; background: linear-gradient(180deg, #E1EEFB, #F4F5FB 60%); padding: 12px 10px 14px; display: grid; gap: 8px; color: #1E2756; }
.phone .ph { display: flex; align-items: center; gap: 6px; font-family: "Baloo 2", var(--font-display); font-weight: 800; font-size: 1rem; line-height: 1.05; }
.phone .ph .mascot { width: 40px; height: 40px; }
.phone .mt { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.phone .mt span { border-radius: 14px; min-height: 58px; padding: 8px; display: grid; align-content: space-between; font-family: "Baloo 2", var(--font-display); font-weight: 800; font-size: .76rem; line-height: 1; }
.phone .mt .ic { width: 22px; height: 22px; padding: 4px; border-radius: 8px; background: rgba(255, 255, 255, .7); }
@media (max-width: 620px) { .phone { display: none; } }
.mock-cap { margin-top: 10px; font-size: .82rem; color: var(--muted); display: flex; gap: 6px; align-items: center; }

/* Confidentialité */
.band.privacy { grid-template-columns: auto minmax(0, 1fr); padding: clamp(26px, 4vw, 44px); }
.band.privacy .mono { width: 96px; height: 96px; }
.band .guarantees { list-style: none; margin: 4px 0 6px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.band .guarantees li { display: grid; gap: 4px; padding: 14px; border-radius: var(--radius); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); }
.band .guarantees strong { color: #fff; display: flex; align-items: center; gap: 8px; }
.band .guarantees .ic { color: var(--spark); }
.band .guarantees span { color: rgba(255, 255, 255, .8); font-size: .9rem; line-height: 1.45; }
@media (max-width: 860px) { .band .guarantees { grid-template-columns: minmax(0, 1fr); } .band.privacy .mono { width: 64px; height: 64px; } }
@media (max-width: 700px) { .band.privacy { grid-template-columns: minmax(0, 1fr); gap: 16px; } .band.privacy .mono { width: 56px; height: 56px; } }

/* Appel à créer un compte */
.cta-final { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px 32px; align-items: center; padding: clamp(24px, 4vw, 44px); border-radius: var(--radius-xl); background: var(--warm-panel); border: 1px solid color-mix(in srgb, var(--spark) 45%, transparent); }
.cta-final::after { content: ""; position: absolute; z-index: -1; right: -70px; bottom: -110px; width: 260px; height: 260px; border-radius: 50%; background: var(--spark); opacity: .2; }
.cta-final::before { content: ""; position: absolute; z-index: -1; right: 150px; bottom: 26px; width: 22px; height: 22px; border-radius: 50%; background: var(--coral); opacity: .35; box-shadow: 34px -46px 0 -5px var(--lilac); }
.cta-final .mascot { width: 140px; height: 140px; }
.cta-final p { color: var(--fg); max-width: 56ch; }
.cta-steps { list-style: none; margin: 14px 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; counter-reset: c; }
.cta-steps li { counter-increment: c; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.cta-steps li::before { content: counter(c); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--on-ink); font-family: var(--font-display); font-weight: 800; font-size: .95rem; }
@media (max-width: 620px) { .cta-final { grid-template-columns: minmax(0, 1fr); } .cta-final .mascot { width: 96px; height: 96px; } .cta-final::before { display: none; } .cta-final .btn { width: 100%; } }

/* Repères de sécurité */
.safety { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 760px) { .safety { grid-template-columns: minmax(0, 1fr); } }
.safety .card { display: grid; gap: 10px; align-content: start; }
.safety h3 { font-size: 1.3rem; display: flex; gap: 10px; align-items: center; }
.safety h3 .ic { width: 34px; height: 34px; padding: 7px; border-radius: 12px; }
.safety .c1 h3 .ic { background: var(--tint-sky); color: var(--sky-txt); }
.safety .c2 h3 .ic { background: var(--tint-coral); color: var(--coral-txt); }
.safety a { font-weight: 600; justify-self: start; display: inline-flex; align-items: center; min-height: 44px; }
.nums { display: flex; flex-wrap: wrap; gap: 8px; }
.nums span { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px; border-radius: 12px; background: var(--surface-2); font-size: .88rem; color: var(--muted); }
.nums b { font-family: var(--font-display); font-size: 1.2rem; color: var(--ink); font-weight: 800; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
  .breath .ring { transition: none !important; }
}
@media print {
  .topbar, .tabbar, .footer, .noprint, .toasts { display: none !important; }
  body { background: #fff; color: #000; }
  main { padding: 0; }
  .card { border: 1px solid #ccc; break-inside: avoid; box-shadow: none; }
}

/* Chiffres clés d'un profil : deux par ligne sur téléphone */
@media (max-width: 560px) {
  .grid.g4:has(> .card > .stat) { grid-template-columns: 1fr 1fr; gap: 10px; }
  .grid.g4 > .card:has(> .stat) { padding: 14px; }
  .grid.g4 > .card > .stat b { font-size: 1.6rem; }
}

/* Symbole « la bulle » : en thème sombre, la bulle jaune se passe de cerne (version inversée) */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) svg.mono .ring { stroke: none; } }
:root[data-theme="dark"] svg.mono .ring { stroke: none; }

/* Performance mobile : l'illustration principale doit être visible dès son premier rendu.
   Les animations d'entrée (jusqu'à 1,4 s, avec délais) retardent sa peinture finale
   et peuvent repousser le LCP mesuré par Lighthouse. Les animations bureau restent intactes. */
@media (max-width: 860px) {
  .home-hero .hpip, .home-hero .hb, .home-hero .fz {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* Accueil : orientation par besoins, léger et accessible au clavier */
.home-needs-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.home-needs-grid>a{display:flex;align-items:flex-start;gap:12px;padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--fg);text-decoration:none;box-shadow:var(--shadow-xs);transition:border-color .15s,transform .15s}
.home-needs-grid>a:hover{border-color:var(--mint);transform:translateY(-2px)}
.home-needs-grid>a:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.home-needs-grid>a>svg{flex-shrink:0;width:25px;height:25px;color:var(--mint-txt)}
.home-needs-grid strong,.home-needs-grid small{display:block}
.home-needs-grid small{margin-top:5px;color:var(--muted);line-height:1.5}
.home-start-note{margin-top:14px;font-size:.92rem;line-height:1.65}
.home-start-note .btn{margin:8px 0 0 8px}
@media(max-width:850px){.home-needs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.home-needs-grid{grid-template-columns:1fr}.home-needs-grid>a{padding:15px}}
@media(prefers-reduced-motion:reduce){.home-needs-grid>a{transition:none}.home-needs-grid>a:hover{transform:none}}

/* Quatre bulles autour de Pip : orbite continue, sans déplacement du personnage. */
.home-hero .hero-orbit { transform-origin: 220px 205px; animation: eb-hero-orbit 32s linear infinite; }
@keyframes eb-hero-orbit { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .home-hero .hero-orbit { animation: none !important; } }

/* Repères permanents de la découverte : aucune donnée réelle n'est utilisée. */
.eb-demo-layer { position: fixed; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; background: rgba(236, 218, 255, .105); }
.eb-demo-layer[hidden], .eb-demo-floating[hidden] { display: none !important; }
.eb-demo-layer span { position: absolute; left: -12vw; width: 125vw; top: 18%; transform: rotate(-24deg); text-align: center; font-size: clamp(2rem, 7vw, 6.5rem); font-weight: 900; letter-spacing: .09em; color: rgba(111, 68, 155, .105); white-space: nowrap; }
.eb-demo-layer span:nth-child(2) { top: 49%; transform: rotate(-24deg); }
.eb-demo-layer span:nth-child(3) { top: 81%; transform: rotate(-24deg); }
.eb-demo-floating { position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: calc(85px + env(safe-area-inset-bottom)); z-index: 999; border: 2px solid #7655a2; background: #fff; color: #432963; border-radius: 999px; padding: 12px 18px; font: inherit; font-weight: 750; cursor: pointer; box-shadow: 0 6px 25px rgba(48, 27, 78, .22); }
.eb-demo-floating:hover, .eb-demo-floating:focus-visible { background: #f3eafd; }
@media (min-width: 800px) { .eb-demo-floating { bottom: 24px; } }
@media (max-width: 420px) { .eb-demo-floating { right: 10px; bottom: calc(74px + env(safe-area-inset-bottom)); padding: 10px 12px; font-size: .83rem; } }

/* ===== niveaux.css ===== */
/* ==========================================================================
   Ébulle — « Comprendre en 3 niveaux » et bibliothèque de scènes animées
   ========================================================================== */

/* ---------- Couleur du sujet ---------- */
.nv-c-coral { --nv: var(--coral); --nv-tint: var(--tint-coral); --nv-txt: var(--coral-txt); }
.nv-c-lilac { --nv: var(--lilac); --nv-tint: var(--tint-lilac); --nv-txt: var(--lilac-txt); }
.nv-c-mint { --nv: var(--mint); --nv-tint: var(--tint-mint); --nv-txt: var(--mint-txt); }
.nv-page { --nv: var(--lilac); --nv-tint: var(--tint-lilac); --nv-txt: var(--lilac-txt); }
.nv-page.nv-c-coral { --nv: var(--coral); --nv-tint: var(--tint-coral); --nv-txt: var(--coral-txt); }
.nv-page.nv-c-mint { --nv: var(--mint); --nv-tint: var(--tint-mint); --nv-txt: var(--mint-txt); }
.nv-h1-sub { color: var(--nv-txt); white-space: nowrap; }

/* ---------- Scènes ---------- */
.nv-scenebox { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-2); isolation: isolate; }
.scene { display: block; width: 100%; height: auto; }
.nv-pause { position: absolute; right: 10px; bottom: 10px; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 90%, transparent); color: var(--ink); display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow); }
.nv-pause:hover { background: var(--surface); }
.nv-pause .ic { width: 20px; height: 20px; }
.nv-pause.nv-pause-txt { position: static; width: auto; height: auto; border-radius: 999px; display: inline-flex; box-shadow: none; padding: 6px 14px; min-height: 44px; }
.nv-scenebox.paused .scene, .nv-scenebox.paused .scene * { animation: none !important; }
.nv-card:not(:hover):not(:focus-within) .nv-still .scene * { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .scene, .scene * { animation: none !important; }
  .nv-anim { animation: none !important; }
  .nv-pause { display: none !important; }
}
:root[data-calme="1"] .nv-pause { display: none !important; }

.scene .sc-o { transform-box: fill-box; transform-origin: center; }
.scene .sc-bob { animation: sc-bob 3.2s ease-in-out infinite; }
.scene .sc-bob-lg { animation: sc-boblg 3s ease-in-out infinite; }
@keyframes sc-bob { 50% { transform: translateY(-6px); } }
@keyframes sc-boblg { 50% { transform: translateY(-10px); } }
.scene .sc-spark { stroke-dasharray: 12 88; animation: sc-flow 2.2s linear infinite; }
@keyframes sc-flow { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.scene .sc-pulse { animation: sc-pulse 2.4s ease-in-out infinite; }
@keyframes sc-pulse { 50% { transform: scale(1.3); } }
.scene .sc-twinkle { animation: sc-twinkle 2.6s ease-in-out infinite; }
@keyframes sc-twinkle { 0%, 100% { transform: scale(.7) rotate(0deg); opacity: .6; } 50% { transform: scale(1.1) rotate(18deg); opacity: 1; } }

/* Voiture */
.scene .sc-scroll { animation: sc-scroll 7s linear infinite; }
.scene .sc-scroll-slow { animation: sc-scroll 24s linear infinite; }
@keyframes sc-scroll { to { transform: translateX(-400px); } }
.scene .sc-road { animation: sc-road .7s linear infinite; }
.scene .sc-road-s { animation-name: sc-road-s; }
@keyframes sc-road { to { stroke-dashoffset: 48; } }
@keyframes sc-road-s { to { stroke-dashoffset: 36; } }
.scene .sc-car { animation: sc-car .45s ease-in-out infinite alternate; }
@keyframes sc-car { to { transform: translateY(-2px); } }
.scene .sc-spin { animation: sc-spin .6s linear infinite; }
@keyframes sc-spin { to { transform: rotate(360deg); } }
.scene .sc-puff { animation: sc-puff 1.35s ease-out infinite; }
@keyframes sc-puff { 0% { transform: translate(0, 0) scale(.4); opacity: .9; } 100% { transform: translate(-46px, -14px) scale(1.6); opacity: 0; } }
.scene .sc-shake { animation: sc-shake .18s linear infinite; }
@keyframes sc-shake { 25% { transform: translateY(-1.5px); } 75% { transform: translateY(1px); } }
.scene .sc-speed { animation: sc-speed .8s linear infinite; }
@keyframes sc-speed { 0% { transform: translateX(14px); opacity: 0; } 30% { opacity: .45; } 100% { transform: translateX(-16px); opacity: 0; } }

/* Radio */
.scene .sc-beat { animation: sc-beat 1.2s ease-in-out infinite; }
@keyframes sc-beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.09); } 32% { transform: scale(1); } }
.scene .sc-needle { animation: sc-needle 5s ease-in-out infinite; }
@keyframes sc-needle { 0%, 18% { transform: translateX(0); } 22%, 40% { transform: translateX(34px); } 44%, 62% { transform: translateX(12px); } 66%, 84% { transform: translateX(50px); } 88%, 100% { transform: translateX(0); } }
.scene .sc-knob { animation: sc-knob 5s ease-in-out infinite; }
@keyframes sc-knob { 0%, 18% { transform: rotate(0); } 22%, 40% { transform: rotate(80deg); } 44%, 62% { transform: rotate(20deg); } 66%, 84% { transform: rotate(130deg); } 88%, 100% { transform: rotate(0); } }
.scene .sc-note { animation: sc-note 2.6s ease-out infinite; }
@keyframes sc-note { 0% { transform: translate(0, 18px) rotate(-14deg) scale(.5); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(var(--dx, 0px), var(--dy, -30px)) rotate(14deg) scale(1.05); opacity: 0; } }

/* Chef d'orchestre */
.scene .sc-offbeat { animation: sc-offbeat .85s ease-in-out infinite; }
@keyframes sc-offbeat { 0%, 100% { transform: rotate(0) scale(1); } 30% { transform: rotate(-12deg) scale(1.1); } 60% { transform: rotate(9deg) scale(.94); } }
.scene .sc-baton { animation: sc-baton 1.2s ease-in-out infinite; }
@keyframes sc-baton { 0%, 100% { transform: rotate(-18deg); } 50% { transform: rotate(22deg); } }

/* Arbre */
.scene .sc-grow { stroke-dasharray: 100; animation: sc-grow 1.1s ease-out both; }
@keyframes sc-grow { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.scene .sc-pop { animation: sc-pop .5s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes sc-pop { from { transform: scale(0); } to { transform: scale(1); } }
.scene .sc-glow { animation: sc-glow 2.4s ease-in-out infinite; }
@keyframes sc-glow { 0%, 100% { transform: scale(.85); opacity: .2; } 50% { transform: scale(1.25); opacity: .45; } }
.scene .sc-march { animation: sc-march 1.2s linear infinite; }
.scene .sc-march.sc-fadein { animation: sc-march 1.2s linear infinite, sc-fadein .8s ease both; }
@keyframes sc-march { to { stroke-dashoffset: -22; } }
@keyframes sc-fadein { from { opacity: 0; } to { opacity: 1; } }

/* Antennes, questions */
.scene .sc-ripple { animation: sc-ripple 2.4s ease-out infinite; }
@keyframes sc-ripple { 0% { transform: scale(.85); opacity: .8; } 100% { transform: scale(2.1); opacity: 0; } }
.scene .sc-rise { animation: sc-rise 6s ease-in-out infinite; }
@keyframes sc-rise { 0% { transform: translateY(46px) scale(.6); opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(-36px) scale(1); opacity: 0; } }
.scene .sc-sway { animation: sc-sway 2.8s ease-in-out infinite alternate; }
@keyframes sc-sway { from { transform: translateX(-5px); } to { transform: translateX(5px); } }

/* Cache-cache */
.scene .sc-peek { transform: translate(90px, -6px) rotate(14deg); animation: sc-peek 7s ease-in-out infinite; }
@keyframes sc-peek { 0%, 12% { transform: translate(0, 0) rotate(0); } 22%, 40% { transform: translate(90px, -6px) rotate(14deg); } 50%, 62% { transform: translate(0, 0) rotate(0); } 72%, 90% { transform: translate(-90px, -6px) rotate(-14deg); } 100% { transform: translate(0, 0) rotate(0); } }
.scene .sc-qpop { animation: sc-qpop 7s ease-in-out infinite; }
@keyframes sc-qpop { 0%, 14% { transform: scale(0); opacity: 0; } 22%, 40% { transform: scale(1); opacity: 1; } 48%, 64% { transform: scale(0); opacity: 0; } 72%, 90% { transform: scale(1); opacity: 1; } 100% { transform: scale(0); opacity: 0; } }

/* Équipe, amis */
.scene .sc-orbit { animation: sc-spin 40s linear infinite; }
.scene .sc-hrise { animation: sc-hrise 3.6s ease-out infinite; }
@keyframes sc-hrise { 0% { transform: translateY(16px) scale(.4); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(-46px) scale(1.1); opacity: 0; } }
.scene .sc-ball { animation: sc-ball 2.6s linear infinite alternate; }
@keyframes sc-ball { 0% { transform: translate(-112px, 70px); } 25% { transform: translate(-58px, 12px); } 50% { transform: translate(0, -8px); } 75% { transform: translate(54px, 8px); } 100% { transform: translate(104px, 58px); } }

/* Boîte à outils */
.scene .sc-lid { transform: rotate(-26deg); animation: sc-lid .9s cubic-bezier(.3, 1.4, .5, 1) .2s both; }
@keyframes sc-lid { from { transform: rotate(0); } to { transform: rotate(-26deg); } }
.scene .sc-popup { animation: sc-popup .6s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes sc-popup { from { transform: translateY(70px) scale(.2); opacity: 0; } to { transform: none; opacity: 1; } }
.scene .sc-float { animation: sc-float 3s ease-in-out infinite; }
@keyframes sc-float { 50% { transform: translateY(-5px); } }
.scene .sc-breathe { animation: sc-breathe 5s ease-in-out infinite; }
@keyframes sc-breathe { 0%, 100% { transform: scale(.82); } 50% { transform: scale(1.12); } }
.scene .sc-tick { animation: sc-spin 4s steps(12) infinite; }

/* Super-pouvoirs */
.scene .sc-cape { animation: sc-cape 1.6s ease-in-out infinite; }
@keyframes sc-cape { 0%, 100% { transform: skewX(0) scaleX(1); } 50% { transform: skewX(10deg) scaleX(1.06); } }

/* École */
.scene .sc-cloud { animation: sc-cloud 10s linear infinite; }
@keyframes sc-cloud { from { transform: translateX(-60px); } to { transform: translateX(110px); } }
.scene .sc-sound { animation: sc-sound 1.5s ease-out infinite; }
@keyframes sc-sound { 0% { opacity: 0; transform: translateX(6px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateX(-8px); } }
.scene .sc-fly { animation: sc-fly 7s ease-in-out infinite; }
@keyframes sc-fly { 0%, 100% { transform: translate(0, 0); } 15% { transform: translate(-40px, -30px); } 30% { transform: translate(-110px, -20px); } 45% { transform: translate(-140px, 10px); } 60% { transform: translate(-90px, 30px); } 75% { transform: translate(-30px, -40px); } 90% { transform: translate(10px, -10px); } }
.scene .sc-flap { transform-origin: 50% 100%; animation: sc-flap .12s linear infinite alternate; }
@keyframes sc-flap { to { transform: scaleY(.35); } }

/* Ballon des émotions */
.scene .sc-inflate { animation: sc-inflate 7s ease-in-out infinite; }
@keyframes sc-inflate { 0% { transform: scale(.5); } 30% { transform: scale(1.08); } 42% { transform: scale(1.08); } 100% { transform: scale(.5); } }
.scene .sc-breath { animation: sc-breath 7s ease-out infinite both; }
@keyframes sc-breath { 0%, 45% { opacity: 0; transform: translateX(0); } 55% { opacity: 1; } 75% { opacity: 0; transform: translateX(16px); } 100% { opacity: 0; } }
.scene .sc-count { animation: sc-count 7s ease-in-out infinite both; }
@keyframes sc-count { 0%, 46% { opacity: 0; } 52%, 62% { opacity: 1; } 68%, 100% { opacity: 0; } }

/* Montagne, loupe, marches */
.scene .sc-climb { transform: translate(152px, 160px); animation: sc-climb 9s ease-in-out infinite; }
@keyframes sc-climb {
  0%, 6% { transform: translate(60px, 236px); opacity: 1; } 18% { transform: translate(120px, 210px); } 30% { transform: translate(96px, 180px); }
  42% { transform: translate(152px, 160px); } 54% { transform: translate(132px, 128px); } 66% { transform: translate(172px, 108px); }
  78%, 92% { transform: translate(166px, 82px); opacity: 1; } 95% { transform: translate(166px, 82px); opacity: 0; } 96% { transform: translate(60px, 236px); opacity: 0; } 100% { transform: translate(60px, 236px); opacity: 1; }
}
.scene .sc-flag { animation: sc-flag 1.4s ease-in-out infinite; }
@keyframes sc-flag { 50% { transform: skewY(6deg) scaleX(.92); } }
.scene .sc-sweep { animation: sc-sweep 6s ease-in-out infinite; }
@keyframes sc-sweep { 0%, 15% { transform: translateX(0); } 45%, 65% { transform: translateX(158px); } 95%, 100% { transform: translateX(0); } }
.scene .sc-wiggle { transform-box: fill-box; transform-origin: 50% 100%; animation: sc-wiggle .9s ease-in-out infinite; }
@keyframes sc-wiggle { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
.scene .sc-hop { transform: translate(200px, 138px); animation: sc-hop 6s ease-in-out infinite; }
@keyframes sc-hop { 0%, 14% { transform: translate(100px, 178px); } 22% { transform: translate(150px, 112px); } 30%, 46% { transform: translate(200px, 138px); } 54% { transform: translate(250px, 70px); } 62%, 80% { transform: translate(300px, 96px); } 88% { transform: translate(200px, 36px); } 96%, 100% { transform: translate(100px, 178px); } }

/* ---------- Apparition douce ---------- */
.nv-anim { animation: nv-in .4s ease both; }
@keyframes nv-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Sélecteur de niveau ---------- */
.nv-levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.nv-level { display: flex; align-items: center; gap: 12px; min-height: 70px; padding: 12px 14px; border-radius: 18px; border: 2px solid var(--line); background: var(--surface); color: var(--fg); cursor: pointer; text-align: left; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.nv-level:hover { border-color: var(--nv); transform: translateY(-1px); }
.nv-level[aria-pressed="true"], .nv-level[aria-current="page"] { border-color: var(--ink); background: var(--nv-tint); box-shadow: inset 0 0 0 1px var(--ink); }
.nv-level-ic { width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--ink); }
.nv-level-ic .ic { width: 24px; height: 24px; }
.nv-level[aria-pressed="true"] .nv-level-ic, .nv-level[aria-current="page"] .nv-level-ic { background: var(--ink); color: var(--on-ink); }
.nv-level-txt { display: grid; gap: 2px; line-height: 1.2; min-width: 0; }
.nv-level-txt strong { font-family: var(--font-display); font-size: 1.15rem; font-weight: 800; color: var(--ink); }
.nv-level-txt small { color: var(--muted); font-size: .84rem; }
.nv-l-short { display: none; }
@media (max-width: 620px) {
  .nv-levels { gap: 8px; }
  .nv-level { flex-direction: column; justify-content: center; text-align: center; gap: 6px; padding: 10px 4px; }
  .nv-l-long { display: none; }
  .nv-l-short { display: inline; }
  .nv-level-txt small { font-size: .76rem; }
}

/* ---------- Changement de sujet ---------- */
.nv-subjects { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.nv-subj { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 16px 6px 8px; border-radius: 999px; border: 2px solid var(--line); background: var(--surface); color: var(--fg); text-decoration: none; font-weight: 600; font-size: .95rem; }
.nv-subj .ic { width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: var(--nv-tint); color: var(--nv-txt); }
.nv-subj:hover { border-color: var(--nv); }
.nv-subj[aria-current="page"] { border-color: var(--ink); background: var(--nv-tint); }
.nv-subj[aria-current="page"] .ic { background: var(--nv); color: #fff; }

/* ---------- Histoire (niveau enfant) ---------- */
.nv-story { background: var(--surface); border: 1px solid var(--line); border-radius: 28px; padding: 20px; display: grid; gap: 18px; box-shadow: var(--shadow); }
.nv-story-head { display: grid; gap: 4px; }
.nv-story-head h2 { font-size: 1.35rem; color: var(--nv-txt); }
.nv-story-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 24px; align-items: center; }
@media (max-width: 860px) { .nv-story-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; } }
.nv-panel { display: grid; gap: 14px; align-content: start; min-width: 0; }
.nv-panel-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; align-items: center; }
.nv-count { font-weight: 600; font-size: .9rem; color: var(--nv-txt); background: var(--nv-tint); padding: 5px 14px; border-radius: 999px; }
.nv-voice { display: flex; flex-wrap: wrap; gap: 8px; }
.nv-voice .btn { min-height: 44px; }
.nv-voice .nv-read.on { background: var(--tint-mint); border-color: var(--mint); }
.nv-text { display: grid; gap: 10px; }
.nv-stitle { font-size: clamp(1.6rem, 3.4vw, 2.15rem); }
.nv-text p { font-size: 1.2rem; line-height: 1.55; }
.nv-q { display: flex; gap: 12px; align-items: flex-start; background: var(--tint-spark); border-radius: 18px; padding: 14px 16px; margin-top: 6px; }
.nv-q > .ic { width: 30px; height: 30px; color: var(--ink); }
.nv-q strong { font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); }
.nv-q p { font-size: 1.1rem; }
.nv-nav { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.nv-nav .btn { min-height: 54px; font-size: 1.05rem; padding-inline: 22px; }
.nv-nav .btn[hidden] { display: none; }
.nv-dots { display: flex; justify-content: center; flex-wrap: wrap; }
.nv-dot { width: 40px; height: 44px; border: 0; background: none; padding: 0; display: grid; place-items: center; cursor: pointer; border-radius: 12px; }
.nv-dot::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--surface-3); border: 2px solid var(--line); transition: transform .2s ease, background .2s ease; }
.nv-dot:hover::before { border-color: var(--nv); }
.nv-dot.seen::before { background: color-mix(in srgb, var(--nv) 55%, var(--surface)); border-color: var(--nv); }
.nv-dot[aria-current="step"]::before { background: var(--nv); border-color: var(--ink); transform: scale(1.4); }
@media (max-width: 620px) {
  .nv-story { padding: 14px; border-radius: 22px; }
  .nv-nav { grid-template-columns: 1fr 1fr; }
  .nv-dots { grid-column: 1 / -1; order: -1; }
  .nv-dot { width: 32px; }
  .nv-nav .btn { padding-inline: 12px; }
  .nv-text p { font-size: 1.12rem; }
}
.nv-end { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: center; }
.nv-end-art .mascot { width: 170px; height: 170px; }
.nv-endbox { display: grid; gap: 8px; }
.nv-endbox h3 { font-size: 1.2rem; display: flex; gap: 8px; align-items: center; }
.nv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.nv-chip-i { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px; border-radius: 999px; font-weight: 600; color: var(--fg); }
.nv-ci-mint { background: var(--tint-mint); } .nv-ci-mint .ic { color: var(--mint-txt); }
.nv-ci-spark { background: var(--tint-spark); } .nv-ci-spark .ic { color: var(--ink); }
@media (max-width: 620px) { .nv-end { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; } .nv-end .row, .nv-chips, .nv-voice { justify-content: center; } .nv-endbox h3 { justify-content: center; } .nv-end-art .mascot { width: 130px; height: 130px; } }

/* ---------- Niveau ado ---------- */
.nv-lead { font-size: var(--step-1); color: var(--muted); max-width: 62ch; margin-bottom: 18px; }
.nv-toc { margin-bottom: 30px; }
.nv-toc summary { justify-content: flex-start; min-height: 48px; }
.nv-toc summary > span { flex: 1; }
.nv-toc summary > .ic { color: var(--nv-txt); }
.nv-toc .nv-toc-list { padding: 0 16px 16px; }
.nv-toc-list { display: flex; flex-wrap: wrap; gap: 8px; }
.nv-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px 6px 6px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); cursor: pointer; font-weight: 500; font-size: .92rem; text-align: left; }
.nv-chip > .ic { margin-left: 6px; color: var(--nv-txt); }
.nv-chip:hover { border-color: var(--nv); background: var(--nv-tint); }
.nv-chip-n { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--nv-tint); color: var(--nv-txt); font-family: var(--font-display); font-weight: 800; }
.nv-sections { display: grid; gap: 34px; }
.nv-sec { display: grid; gap: 12px; scroll-margin-top: calc(var(--header-h) + 20px); min-width: 0; }
.nv-ado .nv-sec > h2 { display: flex; align-items: center; gap: 12px; font-size: var(--step-2); }
.nv-num { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--nv-tint); color: var(--nv-txt); font-size: 1.15rem; }
.nv-num .ic { width: 20px; height: 20px; }
.nv-ex { background: var(--surface-2); border-left: 4px solid var(--nv); border-radius: 0 var(--radius) var(--radius) 0; padding: 12px 16px; }
.nv-ex > strong:first-child { display: block; font-family: var(--font-display); font-weight: 700; color: var(--nv-txt); font-size: .98rem; margin-bottom: 2px; }
.nv-idees-wrap { margin-top: 34px; }
.nv-idees { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 14px; }
.nv-idee { display: grid; grid-template-rows: auto 1fr; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.nv-myth { background: var(--tint-coral); padding: 14px 16px; display: grid; gap: 6px; }
.nv-myth p { font-weight: 500; font-style: italic; }
.nv-real { padding: 14px 16px; display: grid; gap: 6px; align-content: start; }
.nv-tag { display: inline-flex; gap: 6px; align-items: center; font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.nv-tag .ic { width: 18px; height: 18px; }
.nv-myth .nv-tag { color: var(--coral-txt); }
.nv-real .nv-tag { color: var(--mint-txt); }
.nv-quiz { margin-top: 34px; gap: 22px; }
.nv-quiz h2 { font-size: var(--step-2); }
#nv-quiz-body { display: grid; gap: 26px; }
.nv-qitem { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 10px; }
.nv-qitem legend { padding: 0; margin-bottom: 10px; display: grid; gap: 4px; font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; line-height: 1.25; color: var(--ink); }
.nv-qn { font-family: var(--font-body); font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.nv-quiz .quiz-opt button { display: flex; align-items: center; gap: 12px; text-align: left; font-size: 1.02rem; min-height: 56px; color: var(--fg); }
.nv-quiz .quiz-opt button:not([disabled]):hover { border-color: var(--nv); }
.nv-quiz .quiz-opt button[disabled] { cursor: default; }
.nv-letter { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); font-family: var(--font-display); font-weight: 800; color: var(--ink); }
.nv-mark { margin-left: auto; display: inline-flex; }
.nv-mark .ic { width: 24px; height: 24px; }
.quiz-opt button.good .nv-mark { color: var(--mint-txt); }
.quiz-opt button.bad .nv-mark { color: var(--coral-txt); }
.nv-fb:empty, .nv-score:empty { display: none; }
.nv-scorebox { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; padding: 16px 18px; border-radius: var(--radius-lg); background: var(--nv-tint); }
.nv-scorebox p { flex: 1; min-width: 200px; }

/* ---------- Niveau adulte ---------- */
.nv-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 6px 0 30px; }
@media (max-width: 960px) { .nv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.nv-stat { border-radius: var(--radius-lg); padding: 16px 18px; display: grid; gap: 4px; align-content: start; min-width: 0; }
.nv-stat b { font-family: var(--font-display); font-size: 2.1rem; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.nv-stat span { font-weight: 600; line-height: 1.3; }
.nv-stat small { color: var(--muted); font-size: .8rem; }
.nv-t-coral { background: var(--tint-coral); } .nv-t-lilac { background: var(--tint-lilac); } .nv-t-mint { background: var(--tint-mint); }
.nv-t-sky { background: var(--tint-sky); } .nv-t-spark { background: var(--tint-spark); }
.nv-prose .nv-sec { gap: 1em; }
.nv-prose .nv-sec > h2 { font-size: var(--step-2); margin-top: .3em; padding-top: 14px; border-top: 1px solid var(--line); }
.nv-tocbtn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 10px; border: 0; border-radius: 8px; background: none; color: var(--fg); text-align: left; font-size: .92rem; cursor: pointer; min-height: 36px; }
.nv-tocbtn:hover { background: var(--surface-2); }
.nv-toc-side { list-style: none; }
.nv-toc-side .nv-chip-n { width: 26px; height: 26px; font-size: .85rem; }
.nv-toc-side .nv-chip-n .ic { width: 15px; height: 15px; }
.nv-quizcta .mascot { width: 64px; height: 64px; }
@media (min-width: 961px) { .nv-toc-top { display: none; } }
@media (max-width: 960px) { .nv-ado-aside { display: none !important; } }

/* ---------- Fin de page : autres sujets, outils ---------- */
.nv-body { margin-bottom: 48px; }
.nv-more { display: grid; gap: 16px; padding-top: 28px; border-top: 1px solid var(--line); }
.nv-subh { font-size: 1.2rem; margin-top: 8px; }
.nv-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.nv-cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 960px) { .nv-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .nv-cards, .nv-cards-2 { grid-template-columns: minmax(0, 1fr); } }
.nv-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; display: grid; grid-template-rows: auto 1fr; transition: transform .15s ease, box-shadow .15s ease; position: relative; min-width: 0; }
.nv-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.nv-card .nv-scenebox { border-radius: 0; }
.nv-card-body { padding: 16px 18px 18px; display: grid; gap: 8px; align-content: start; }
.nv-card-body .pill { justify-self: start; }
.nv-card h3 { font-size: 1.3rem; }
.nv-card h3 a { color: inherit; text-decoration: none; }
.nv-card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.nv-card h3 a:focus-visible { outline: none; }
.nv-card:has(h3 a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.nv-card-row { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); grid-template-rows: none; align-items: center; }
.nv-card-row .nv-card-body { padding: 14px 16px; }
.nv-card-row h3 { font-size: 1.2rem; }
@media (max-width: 620px) { .nv-card-row { grid-template-columns: minmax(0, 128px) minmax(0, 1fr); } .nv-card-row .nv-card-body { padding: 10px 12px; gap: 4px; } .nv-card-row .pill { display: none; } }
.nv-card-levels { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
.nv-lvbtn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 58px; padding: 6px 4px; border-radius: 14px; border: 2px solid transparent; background: var(--nv-tint); color: var(--fg); text-decoration: none; font-weight: 600; font-size: .88rem; }
.nv-lvbtn .ic { color: var(--nv-txt); }
.nv-lvbtn:hover { border-color: var(--nv); }
.nv-lvbtn.pref { border-color: var(--ink); }
.nv-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 10px; }
.nv-tool { display: flex; gap: 12px; align-items: center; min-height: 64px; padding: 10px 14px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); color: var(--fg); text-decoration: none; }
.nv-tool:hover { border-color: var(--nv); }
.nv-tool > span:last-child { display: grid; gap: 1px; line-height: 1.25; }
.nv-tool small { color: var(--muted); font-size: .84rem; }
.nv-tool-ic { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--nv-tint); color: var(--nv-txt); }

/* ---------- Accueil du module ---------- */
.nv-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 32px; align-items: center; margin-bottom: 44px; }
@media (max-width: 860px) { .nv-hero { grid-template-columns: minmax(0, 1fr); gap: 20px; } }
.nv-lvlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.nv-lvlist li { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 14px; align-items: start; }
.nv-lvlist strong { font-family: var(--font-display); font-size: 1.2rem; color: var(--ink); }
.nv-lvlist p { margin-top: 2px; }
.nv-lv-enfant { background: var(--spark); color: #1E2756; }
.nv-lv-ado { background: var(--mint); color: #fff; }
.nv-lv-adulte { background: var(--sky); color: #fff; }
.nv-tips { margin: 44px 0; }
.nv-tips h3 { font-size: 1.25rem; display: flex; gap: 8px; align-items: center; }
.nv-ul { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; }

/* Espace enfant */
.nv-kidcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 860px) { .nv-kidcards { grid-template-columns: minmax(0, 1fr); } }
.nv-kidcard { display: grid; border-radius: 28px; overflow: hidden; text-decoration: none; color: #1E2756; background: var(--nv-tile, #BDB4FF); transition: transform .15s ease; }
.nv-kidcard:hover { transform: translateY(-3px) rotate(-.4deg); }
.nv-kidcard .nv-scenebox { border-radius: 0; }
.nv-kidcard-t { padding: 14px 18px 18px; display: grid; gap: 4px; font-family: var(--font-display); font-size: 1.55rem; font-weight: 800; line-height: 1.1; }
.nv-kidcard-t small { font-family: var(--font-body); font-weight: 400; font-size: .98rem; line-height: 1.35; }

/* Section de la page d'accueil */
.nv-home-card { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 30px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px; }
@media (max-width: 860px) { .nv-home-card { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 16px; } }
.nv-matrix { display: grid; gap: 8px; }
.nv-mrow { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 10px; align-items: center; }
@media (max-width: 520px) { .nv-mrow { grid-template-columns: minmax(0, 1fr); gap: 6px; } }
.nv-mlabel { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.nv-mlabel i { width: 12px; height: 12px; flex: none; border-radius: 50%; background: var(--nv); }
.nv-mlinks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.nv-mlinks a { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 6px 8px; border-radius: 12px; border: 2px solid transparent; background: var(--nv-tint); color: var(--fg); text-decoration: none; font-weight: 600; font-size: .9rem; }
.nv-mlinks a .ic { color: var(--nv-txt); }
.nv-mlinks a:hover { border-color: var(--nv); }

@media print {
  .nv-pause, .nv-levels, .nv-nav, .nv-voice { display: none !important; }
}

/* Bandeau « 3 niveaux » sur la page Comprendre */
.cp-niveaux { display: grid; grid-template-columns: minmax(180px, 280px) 1fr; gap: 24px; align-items: center; margin-bottom: 36px; padding: 20px 24px; border-radius: var(--radius-lg); background: var(--tint-lilac); border: 1px solid var(--line); }
.cp-niveaux h2 { font-size: 1.45rem; }
.cp-niveaux-art { border-radius: var(--radius); overflow: hidden; }
@media (max-width: 680px) { .cp-niveaux { grid-template-columns: 1fr; padding: 16px; } .cp-niveaux-art { max-width: 320px; } }

a.nv-level { text-decoration: none; }
/* Histoire en lecture continue (pages statiques) */
.nv-static-story { list-style: none; padding: 0; margin: 20px 0; display: grid; gap: 22px; }
.nv-static-scene { display: grid; grid-template-columns: minmax(200px, 340px) 1fr; gap: 22px; align-items: center; padding: 18px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); }
.nv-static-scene h3 { font-size: 1.35rem; }
.nv-static-q { padding: 10px 14px; border-radius: var(--radius); background: var(--tint-spark); }
@media (max-width: 680px) { .nv-static-scene { grid-template-columns: 1fr; } }

/* ===== suivi.css ===== */
/* ==========================================================================
   Ébulle — accompagnement dans la durée : programmes guidés, agenda,
   conseils « Pour vous cette semaine » et bilan du mois.
   Uniquement des jetons existants ; clair et sombre ; 390 px sans défilement.
   ========================================================================== */

/* ---------- Petits éléments communs ---------- */
.pg-h2 { font-size: 1.3rem; display: flex; align-items: center; gap: 8px; }
.pg-h2 > .ic { color: var(--lilac-txt); flex: none; }
.pg-h3 { font-size: 1.12rem; display: flex; align-items: center; gap: 8px; }
.pg-h3 > .ic { color: var(--lilac-txt); flex: none; }
.pg-h4 { font-size: 1.05rem; }
.pg-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; letter-spacing: .02em; color: var(--x, var(--lilac-txt)); margin: 0; }
.pg-kicker .ic { width: 1.1em; height: 1.1em; }
.pg-bub { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--t, var(--tint-lilac)); color: var(--x, var(--lilac-txt)); flex: none; }
.pg-bub .ic { width: 28px; height: 28px; }
.pg-bub.sm { width: 42px; height: 42px; border-radius: 13px; }
.pg-bub.sm .ic { width: 22px; height: 22px; }
.pg-bar { display: block; height: 8px; border-radius: 6px; background: var(--surface-3); overflow: hidden; }
.pg-bar i { display: block; height: 100%; border-radius: 6px; transition: width .4s ease; }
.pg-ul { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; }
.pill.pg-pwrap { white-space: normal; max-width: 100%; }
.pg-obj { padding: 12px 14px; border-radius: var(--radius); background: var(--t, var(--surface-2)); }
.avatar.xs { width: 26px; height: 26px; }
.avatar.xs .ic { width: 15px; height: 15px; }

/* Anneau de progression */
.pg-donut { width: 96px; height: 96px; flex: none; }
.pg-donut.sm { width: 72px; height: 72px; }
.pg-donut-n { font-family: var(--font-display); font-weight: 800; font-size: 28px; fill: var(--ink); }
.pg-donut-u { font-family: var(--font-body); font-size: 11px; fill: var(--muted); }

/* ---------- Catalogue ---------- */
.pg-how { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pg-how li { display: grid; align-content: start; gap: 4px; padding: 16px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); }
.pg-how li > span:last-child { font-size: .88rem; color: var(--muted); }
.pg-howi { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--tint-lilac); color: var(--lilac-txt); margin-bottom: 4px; }
.pg-how li:nth-child(2) .pg-howi { background: var(--tint-coral); color: var(--coral-txt); }
.pg-how li:nth-child(3) .pg-howi { background: var(--tint-mint); color: var(--mint-txt); }
.pg-how li:nth-child(4) .pg-howi { background: var(--tint-spark); color: var(--ink); }
@media (max-width: 760px) { .pg-how { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.pg-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 860px) { .pg-cards { grid-template-columns: minmax(0, 1fr); } }
.pg-card { display: flex; flex-direction: column; min-width: 0; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.pg-card-top { display: flex; align-items: center; gap: 14px; padding: 18px 20px; background: var(--t); }
.pg-card-top .pg-bub { background: var(--surface); }
.pg-card-meta { display: grid; gap: 2px; }
.pg-len { font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; line-height: 1.1; color: var(--ink); }
.pg-card-body { flex: 1; display: flex; flex-direction: column; padding: 20px; }
.pg-card-t { font-size: 1.45rem; }
.pg-weeklist { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 5px; font-size: .9rem; counter-reset: pgw; }
.pg-weeklist li { counter-increment: pgw; display: flex; gap: 10px; align-items: baseline; }
.pg-weeklist li::before { content: counter(pgw); flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font-size: .72rem; font-weight: 700; background: var(--t); color: var(--x); }
.pg-run { display: grid; gap: 12px; }
.pg-acc summary { justify-content: flex-start; }
.pg-acc summary .grow { flex: 1; min-width: 0; }
.pg-accn { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--tint-lilac); color: var(--lilac-txt); font-family: var(--font-display); font-weight: 800; }
.pg-acc > div { gap: 14px; }

/* ---------- Tableau de bord d'un programme ---------- */
.pg-head .lead { margin-top: 4px; }
.pg-hero { display: grid; gap: 22px; border-top: 6px solid var(--c); }
.pg-hero-top { display: flex; gap: 16px; align-items: center; }
.pg-hero-top .grow { flex: 1; min-width: 0; }
.pg-hero-t { font-size: clamp(1.35rem, 3.2vw, 1.85rem); margin: 2px 0 4px; }
@media (max-width: 560px) { .pg-hero-top > .pg-bub { display: none; } .pg-hero-top .pg-donut { width: 78px; height: 78px; } }

/* Frise des semaines */
.pg-frise { list-style: none; margin: 0; padding: 4px 0 0; display: grid; grid-template-columns: repeat(var(--n, 8), minmax(0, 1fr)); }
.pg-f { position: relative; display: flex; justify-content: center; min-width: 0; }
.pg-f::before { content: ""; position: absolute; top: 18px; right: 50%; width: 100%; height: 4px; border-radius: 2px; background: var(--line); }
.pg-f:first-child::before { display: none; }
.pg-f.s-done::before, .pg-f.s-skipped::before, .pg-f.s-open::before, .pg-f.is-cur::before { background: var(--c, var(--lilac)); }
.pg-fi { position: relative; z-index: 1; display: grid; justify-items: center; gap: 6px; width: 100%; min-width: 0; padding: 0 2px 4px; border-radius: 12px; color: var(--fg); text-decoration: none; }
.pg-dot { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; background: var(--surface); border: 3px solid var(--line); color: var(--muted); transition: transform .15s ease; }
.pg-dot .ic { width: 18px; height: 18px; }
a.pg-fi:hover .pg-dot { transform: translateY(-2px); }
.pg-f.s-open .pg-dot { border-color: var(--c, var(--lilac)); color: var(--ink); }
.pg-f.s-skipped .pg-dot { border-style: dashed; border-color: var(--c, var(--lilac)); color: var(--ink); }
.pg-f.s-locked .pg-dot { border-style: dashed; background: var(--surface-2); }
.pg-f.s-done .pg-dot { background: var(--mint); border-color: var(--mint); color: #1E2756; }
.pg-f.b-en-cours .pg-dot { background: var(--spark); border-color: var(--spark); }
.pg-f.b-difficile .pg-dot { background: var(--coral); border-color: var(--coral); }
.pg-f.is-cur .pg-dot { border-color: var(--c, var(--lilac)); color: var(--ink); box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px var(--c, var(--lilac)); }
.pg-f.is-cur:not(.s-done) .pg-dot { background: var(--t, var(--tint-lilac)); }
.pg-fl { max-width: 100%; font-size: .72rem; line-height: 1.25; text-align: center; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pg-f.is-cur .pg-fl { color: var(--ink); font-weight: 600; }
@media (max-width: 900px) { .pg-fl { display: none; } }
@media (max-width: 440px) { .pg-dot { width: 32px; height: 32px; font-size: .9rem; border-width: 2px; } .pg-f::before { top: 14px; height: 3px; } }
.pg-mini2 .pg-fl { display: none; }
.pg-mini2 .pg-dot { width: 30px; height: 30px; font-size: .85rem; border-width: 2px; }
.pg-mini2 .pg-dot .ic { width: 14px; height: 14px; }
.pg-mini2 .pg-f::before { top: 13px; height: 3px; }

/* Cette semaine / aujourd'hui */
.pg-meters { display: grid; gap: 10px; }
.pg-quot { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; line-height: 1.3; color: var(--ink); }
.pg-todaybtn { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 12px 16px; border-radius: var(--radius); border: 2px dashed var(--line-strong, var(--line)); background: var(--surface); color: var(--fg); font-weight: 600; text-align: left; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.pg-todaybtn .ic { width: 28px; height: 28px; color: var(--muted); }
.pg-todaybtn:hover { border-color: var(--mint); }
.pg-todaybtn[aria-pressed="true"] { border-style: solid; border-color: var(--mint); background: var(--tint-mint); color: var(--mint-txt); }
.pg-todaybtn[aria-pressed="true"] .ic { color: var(--mint-txt); }
.pg-dots { display: flex; gap: 6px; }
.pg-dots i { width: 14px; height: 14px; border-radius: 50%; background: var(--surface-3); }
.pg-dots i.on { background: var(--mint); }
.pg-dots i.td { outline: 2px solid var(--ink); outline-offset: 2px; }
.pg-pause { display: flex; gap: 16px; align-items: flex-start; background: var(--tint-sky); border-color: transparent; }
.pg-finish { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; background: var(--tint-spark); border-color: transparent; }
.pg-finish > .stack { flex: 1; min-width: 220px; }
.pg-empty { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.pg-empty > .stack { flex: 1; min-width: 220px; }
.pg-mini { border-top: 5px solid var(--c); }
@media (max-width: 560px) { .pg-finish .mascot.lg, .pg-empty .mascot.lg { width: 110px; height: 110px; } .pg-pause { flex-direction: column; } }

/* Badges */
.pg-badges { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(136px, 100%), 1fr)); gap: 10px; }
.pg-badges li { display: grid; justify-items: center; align-content: start; gap: 4px; padding: 14px 10px; border-radius: var(--radius); background: var(--surface-2); color: var(--muted); text-align: center; }
.pg-badges li strong { font-size: .92rem; line-height: 1.25; color: var(--fg); }
.pg-badges li small { font-size: .78rem; }
.pg-bi { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 4px; background: var(--surface); border: 2px dashed var(--line); color: var(--muted); }
.pg-badges li:not(.ok) .pg-bi .ic { opacity: .5; }
.pg-badges li.ok { background: var(--t); color: var(--fg); }
.pg-badges li.ok .pg-bi { background: var(--c); border: 0; color: #1E2756; }

/* Historique */
.pg-hdot { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; font-family: var(--font-display); font-weight: 800; background: var(--surface-2); color: var(--muted); }
.pg-hist { list-style: none; margin: 0; padding: 0; }
.pg-hist .li { flex-wrap: wrap; }
.pg-hist .li .grow { min-width: 160px; }

/* ---------- Page de semaine ---------- */
.pg-whead { margin-bottom: 8px; }
.pg-whead .pg-kicker { color: var(--x); }
.pg-pills { gap: 8px; }
.pg-wnav { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; }
.pg-wnav > :first-child { justify-self: start; }
.pg-wnav > :last-child { justify-self: end; }
.pg-off { opacity: .55; cursor: not-allowed; }
@media (max-width: 520px) {
  .pg-wnav > :first-child span, .pg-wnav > :last-child span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .pg-wnav > :first-child, .pg-wnav > :last-child { min-width: 44px; padding-inline: 10px; }
}
.pg-wgrid { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
.pg-main, .pg-side { display: contents; }
.pg-daily { order: 1; } .pg-lesson { order: 2; } .pg-actions { order: 3; } .pg-bilan { order: 4; } .pg-more { order: 5; } .pg-mini2 { order: 6; }
@media (min-width: 980px) {
  .pg-wgrid { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
  .pg-main, .pg-side { display: grid; gap: 20px; align-content: start; min-width: 0; }
}
.pg-lesson .prose { max-width: 70ch; }
.pg-lesson .prose h3 { font-size: 1.15rem; margin-top: .3em; }
.pg-locked { justify-items: start; border-top: 5px dashed var(--c); }

.pg-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.pg-day { display: grid; justify-items: center; align-content: start; gap: 3px; min-width: 0; min-height: 78px; padding: 8px 2px 6px; border-radius: 14px; border: 2px solid var(--line); background: var(--surface); color: var(--fg); cursor: pointer; font: inherit; transition: border-color .15s ease, background .15s ease; }
.pg-day .wd { font-size: .72rem; text-transform: capitalize; color: var(--muted); }
.pg-day .dn { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; line-height: 1; }
.pg-day .tk { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); }
.pg-day .tk .ic { width: 15px; height: 15px; }
.pg-day:hover:not([disabled]) { border-color: var(--mint); }
.pg-day.on { border-color: var(--mint); background: var(--tint-mint); }
.pg-day.on .tk { background: var(--mint); color: #1E2756; }
.pg-day.td { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }
.pg-day[disabled] { opacity: .55; cursor: default; }

.pg-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pg-checks li { padding: 8px 12px; border-radius: var(--radius); background: var(--surface-2); transition: background .15s ease; }
.pg-checks li:has(input:checked) { background: var(--tint-mint); }

/* Bilan */
.pg-evalform { gap: 14px; }
.pg-q { display: block; min-width: 0; margin: 0; padding: 14px; border: 0; border-radius: var(--radius); background: var(--surface-2); }
.pg-q legend { float: left; width: 100%; padding: 0; margin-bottom: 10px; display: flex; gap: 10px; align-items: flex-start; font-weight: 600; }
.pg-q.miss { outline: 2px solid var(--coral); outline-offset: 2px; }
.pg-qn { flex: none; width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--surface); color: var(--lilac-txt); font-size: .8rem; font-weight: 800; }
.pg-scale { clear: both; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.pg-scale .choice > span { flex-direction: column; gap: 3px; min-height: 66px; padding: 8px 4px; font-size: .8rem; line-height: 1.2; }
.pg-scale .choice > span b { font-family: var(--font-display); font-size: 1.1rem; line-height: 1; color: var(--muted); }
.pg-scale .choice input:checked + span b { color: var(--ink); }
@media (max-width: 440px) { .pg-scale { gap: 4px; } .pg-scale .choice > span { font-size: .7rem; padding: 6px 2px; hyphens: auto; } }

.pg-result { display: grid; gap: 18px; }
.pg-res-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 18px; border-radius: var(--radius-lg); background: var(--t); }
.pg-res-head .mascot { width: 72px; height: 72px; }
.pg-res-t { font-size: 1.5rem; }
.pg-res-t:focus { outline: none; }
@media (max-width: 620px) { .pg-res-head { grid-template-columns: auto minmax(0, 1fr); padding: 14px; } .pg-res-head .mascot { display: none; } .pg-res-head .pg-donut { width: 76px; height: 76px; } }
.pg-quote { margin: 0; padding: 12px 16px; display: grid; gap: 4px; border-left: 4px solid var(--c); border-radius: 0 var(--radius) var(--radius) 0; background: var(--surface-2); white-space: pre-wrap; }
.pg-stars { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--radius); background: var(--tint-spark); }
.pg-stars p { flex: 1; min-width: 180px; }
.pg-answers { list-style: none; margin: 0; padding: 0; display: grid; }
.pg-answers li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.pg-answers li:last-child { border-bottom: 0; }
.pg-answers li strong { flex: none; max-width: 40%; text-align: right; }

/* À lire */
.pg-fiches { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pg-fiches a { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); color: var(--fg); text-decoration: none; transition: border-color .15s ease; }
.pg-fiches a:hover { border-color: var(--lilac); }
.pg-fiches a > span:nth-child(2) { flex: 1; min-width: 0; display: grid; gap: 2px; line-height: 1.3; }
.pg-fiches small { font-size: .8rem; color: var(--muted); }
.pg-fiches a > .ic:last-child { color: var(--muted); }
.pg-fic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--tint-mint); color: var(--mint-txt); }

/* ---------- Agenda ---------- */
.pl-fam { background: var(--surface-3); color: var(--fg); }
.pl-tools { display: grid; gap: 12px; }
.pl-tabs { margin-bottom: 0; }
.pl-tabs button { display: inline-flex; align-items: center; gap: 6px; }
.pl-filter { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; }
.pl-filter .kid-chip { cursor: pointer; font: inherit; font-weight: 600; }
.pl-filter .kid-chip[aria-pressed="true"] { border-color: var(--ink); background: var(--tint-lilac); }
.pl-filter .avatar { width: 30px; height: 30px; }
.pl-filter .avatar .ic { width: 17px; height: 17px; }
.pl-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.pl-title { flex: 1; min-width: 0; font-size: 1.3rem; text-align: center; }
@media (max-width: 520px) { .pl-bar { flex-wrap: wrap; } .pl-title { font-size: 1.12rem; } .pl-bar > .btn { order: 4; width: 100%; } }

.pl-todo { display: grid; gap: 10px; padding: 14px; margin-bottom: 14px; border-radius: var(--radius); background: var(--surface-2); }
@media (min-width: 760px) { .pl-todo .pl-items { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pl-week { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pl-day { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; gap: 8px 10px; min-width: 0; padding: 12px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); }
.pl-day > .pl-items, .pl-day > .pl-empty { grid-column: 1 / -1; }
.pl-day > .pl-add { grid-column: 2; grid-row: 1; justify-self: end; }
.pl-day.past { background: var(--surface-2); }
.pl-day.td { border: 2px solid var(--lilac); background: color-mix(in srgb, var(--tint-lilac) 50%, var(--surface)); }
.pl-dh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.pl-dh .wd { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.pl-dh .dn { font-size: .88rem; color: var(--muted); }
.pl-empty { font-size: .82rem; }
@media (min-width: 1100px) {
  .pl-week { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
  .pl-day { grid-template-columns: minmax(0, 1fr); padding: 10px; }
  .pl-day > .pl-add { grid-column: 1; grid-row: auto; justify-self: start; }
  .pl-dh { display: grid; gap: 0; }
  .pl-week .pl-ic { display: none; }
  .pl-week .pl-itb { padding: 7px 8px; }
}
.pl-add { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 12px; border-radius: 999px; border: 1px dashed var(--line-strong, var(--line)); background: transparent; color: var(--muted); font: inherit; font-size: .82rem; cursor: pointer; }
.pl-add:hover { color: var(--ink); border-color: var(--ink); }
.pl-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pl-itb { display: flex; gap: 10px; align-items: center; width: 100%; padding: 8px 10px; border: 0; border-left: 4px solid var(--c); border-radius: 12px; background: var(--t); color: var(--fg); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
span.pl-itb { cursor: default; }
.pl-it.is-muted .pl-itb { background: var(--surface-2); border-left-style: dashed; color: var(--muted); }
.pl-it.is-done .pl-itb { opacity: .85; }
.pl-it.is-todo .pl-itb { box-shadow: inset 0 0 0 1px var(--c); }
a.pl-itb:hover, button.pl-itb:hover { filter: brightness(.97); }
.pl-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; background: var(--surface); color: var(--x); }
.pl-ic .ic { width: 17px; height: 17px; }
.pl-tx { display: grid; min-width: 0; }
.pl-tx strong { font-size: .9rem; line-height: 1.3; overflow-wrap: break-word; }
.pl-tx small { font-size: .78rem; color: var(--muted); }
.pl-time { color: var(--x); font-variant-numeric: tabular-nums; }

.pl-month { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 4px; margin: 0 -4px; width: calc(100% + 8px); }
.pl-month th { padding: 4px 0; font-size: .78rem; font-weight: 600; color: var(--muted); }
.pl-month abbr { text-decoration: none; }
.pl-month td { padding: 0; vertical-align: top; }
.pl-cell { position: relative; width: 100%; min-height: 98px; display: grid; align-content: start; gap: 4px; padding: 6px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
.pl-cell:hover { border-color: var(--lilac); }
.pl-cell .n { font-weight: 700; font-size: .9rem; line-height: 26px; }
.pl-cell.out { background: transparent; border-style: dashed; color: var(--muted); }
.pl-cell.td .n { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--on-ink); }
.pl-cell.sel { border: 2px solid var(--lilac); background: var(--tint-lilac); }
.pl-chips { display: grid; gap: 3px; min-width: 0; }
.pl-chip { display: block; padding: 2px 6px; border-radius: 6px; background: var(--t); color: var(--x); font-size: .72rem; font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-more { font-size: .72rem; color: var(--muted); }
.pl-dots { display: none; gap: 3px; }
.pl-dots i { width: 7px; height: 7px; border-radius: 50%; opacity: .6; }
.pl-dots i.ev { opacity: 1; }
.pl-odots { display: flex; flex-wrap: wrap; gap: 3px; }
.pl-odots i { width: 7px; height: 7px; border-radius: 50%; opacity: .7; }
@media (max-width: 760px) {
  .pl-month { border-spacing: 2px; margin: 0 -2px; width: calc(100% + 4px); }
  .pl-cell { min-height: 54px; padding: 4px 2px; justify-items: center; }
  .pl-chips, .pl-odots { display: none; }
  .pl-dots { display: flex; flex-wrap: wrap; justify-content: center; }
}
.pl-hint { margin-top: 6px; display: flex; gap: 6px; align-items: center; }
@media (hover: none) { .pl-hint { display: none; } }
.pl-detailcard { margin-top: 14px; }

.pl-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pl-row { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-start; padding: 12px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); }
.pl-row .grow { flex: 1; min-width: 170px; }
.pl-date { width: 52px; flex: none; display: grid; justify-items: center; padding: 6px 0; border-radius: 12px; background: var(--t); color: var(--x); line-height: 1.1; }
.pl-date span { font-size: .72rem; font-weight: 600; text-transform: uppercase; }
.pl-date b { font-family: var(--font-display); font-size: 1.4rem; font-weight: 800; }
.pl-acts { display: flex; gap: 6px; margin-left: auto; }
.pl-note { margin-top: 4px; color: var(--fg); white-space: pre-wrap; }
.pl-detail { display: flex; gap: 10px; align-items: flex-start; }
.pl-detail > .ic, .pl-detail > .avatar { margin-top: 2px; }
.pl-detail > .ic { color: var(--muted); }
.pl-types .choice > span { flex-direction: column; gap: 4px; min-height: 64px; font-size: .85rem; }
.pl-legend { color: var(--muted); }

.pl-remind { display: grid; gap: 10px; padding: 16px 18px; border-radius: var(--radius-lg); background: var(--tint-spark); border: 1px solid color-mix(in srgb, var(--spark) 45%, transparent); }
.pl-remind .pg-h2 > .ic { color: var(--ink); }
.pl-remlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pl-remlist li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.pl-remlist li > .small { flex-basis: 100%; }
.pl-remlist .linkbtn, .pl-remlist a { font-weight: 600; text-align: left; }
.pl-tabweek .pl-week { gap: 8px; }

/* ---------- Conseils, carte programme, bilan du mois ---------- */
.pl-reco { align-content: start; }
.pl-recos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pl-reco-it { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: var(--radius); border: 1px solid transparent; background: var(--surface-2); color: var(--fg); text-decoration: none; transition: border-color .15s ease, background .15s ease; }
.pl-reco-it:hover { border-color: var(--lilac); background: var(--surface); }
.pl-reco-it > .ic:last-child { margin-left: auto; align-self: center; color: var(--muted); }
.pl-ri { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--tint-lilac); color: var(--lilac-txt); }
.pl-ri.k-fiche { background: var(--tint-mint); color: var(--mint-txt); }
.pl-ri.k-exercice { background: var(--tint-sky); color: var(--sky-txt); }
.pl-ri.k-rdv { background: var(--tint-coral); color: var(--coral-txt); }
.pl-ri.k-programme { background: var(--tint-spark); color: var(--ink); }
.pl-rt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.pl-rt strong { line-height: 1.3; }
.pl-rt > span { font-size: .88rem; }
.pl-rt small { font-size: .78rem; color: var(--muted); }
.pl-progcard { border-top: 5px solid var(--c); }
.pl-mini { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pl-mini li { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--t); }
.pl-mini .grow { flex: 1; min-width: 140px; display: grid; }
.pl-mini small { font-size: .8rem; color: var(--muted); }
.pl-progs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pl-progs a { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); color: var(--fg); text-decoration: none; }
.pl-progs a:hover { border-color: var(--lilac); }
.pl-progs .grow { flex: 1; min-width: 0; display: grid; gap: 4px; }
.pl-progs small { font-size: .8rem; color: var(--muted); }
.pl-progs a > .ic:last-child { color: var(--muted); }
.pl-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 760px) { .pl-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pl-stat { display: grid; align-content: start; gap: 4px; padding: 14px; border-radius: var(--radius); background: var(--surface-2); }
.pl-stat b { font-family: var(--font-display); font-size: 1.8rem; line-height: 1; color: var(--ink); }
.pl-stat b small { font-size: 1rem; color: var(--muted); }
.pl-stat span { font-size: .82rem; color: var(--muted); }
.pl-stat em { font-style: normal; font-size: .8rem; font-weight: 600; }
.pl-stat em.up { color: var(--mint-txt); }
.pl-stat em.down { color: var(--coral-txt); }
.pl-trend { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius); background: var(--tint-spark); }
.pl-trend.up { background: var(--tint-mint); }
.pl-trend > .ic { margin-top: 3px; flex: none; }
.pl-vict { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pl-vict li { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--radius); background: var(--tint-mint); }

/* ==========================================================================
   Rôles : « Qui êtes-vous ? », tableau de bord par rôle, suivi de l'aidant
   ========================================================================== */
.rl-set { display: grid; gap: 12px; }
.rl-set > legend { margin-bottom: 8px; }
.rl-roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 560px) { .rl-roles { grid-template-columns: minmax(0, 1fr); } }
.rl-role > span { justify-content: flex-start; text-align: left; align-items: flex-start; gap: 12px; height: 100%; padding: 12px 14px; }
.rl-role > span > .ic { flex: none; margin-top: 2px; color: var(--lilac-txt); }
.rl-tx { display: grid; gap: 2px; min-width: 0; }
.rl-tx strong { font-weight: 700; line-height: 1.3; }
.rl-tx small { font-size: .82rem; color: var(--muted); font-weight: 400; line-height: 1.35; }
.rl-role input:checked + span .rl-tx small { color: var(--ink); }
.rl-sub { display: grid; gap: 10px; padding: 14px 16px; border-radius: var(--radius); background: var(--surface-2); border-left: 4px solid var(--lilac); }
.rl-sub[hidden] { display: none; }
.rl-sub .grid { gap: 10px; }
.rl-chips { grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); }
.rl-chips .choice > span { min-height: 44px; padding: 8px 10px; font-size: .92rem; }
.rl-priv { display: flex; gap: 8px; align-items: flex-start; }
.rl-priv > .ic { flex: none; margin-top: 2px; color: var(--mint-txt); }

.es-roles { gap: 6px 8px; align-items: center; margin-top: 4px; }
.es-aid { border-top: 5px solid var(--sky); }
.es-aid-ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; flex: none; background: var(--tint-sky); color: var(--sky-txt); }
.es-aid-ic .ic { width: 26px; height: 26px; }
.es-aidon { display: flex; gap: 8px; align-items: flex-start; }
.es-aidon > .ic { flex: none; margin-top: 2px; color: var(--sky-txt); }
.es-reco .pl-reco-it { padding: 10px 12px; }
.es-fiches { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.es-fiches a { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: var(--radius); background: var(--surface-2); color: inherit; text-decoration: none; border: 1px solid transparent; }
.es-fiches a:hover { border-color: var(--sky); background: var(--surface); }
.es-fiches .grow { flex: 1; min-width: 0; display: grid; gap: 2px; }
.es-fiches small { font-size: .8rem; color: var(--muted); }
.es-fiches a > .ic:last-child { color: var(--muted); flex: none; }
.es-fic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--tint-mint); color: var(--mint-txt); }
.es-topicbtn { font: inherit; text-align: left; cursor: pointer; width: 100%; color: inherit; }
.es-rolehelp .card { padding: 16px; }
.es-rolehelp strong { display: flex; gap: 8px; align-items: center; }
.es-rolehelp strong .ic { color: var(--lilac-txt); }
.ou-roles { display: flex; gap: 8px; align-items: flex-start; }
.ou-roles > .ic { flex: none; margin-top: 2px; color: var(--lilac-txt); }
.pl-ri.k-soutien { background: var(--tint-sky); color: var(--sky-txt); }
@media (prefers-reduced-motion: reduce) { .es-fiches a { transition: none; } }

@media (prefers-reduced-motion: reduce) {
  .pg-bar i, .pg-dot, .pg-day, .pg-todaybtn, .pl-reco-it { transition: none; }
  a.pg-fi:hover .pg-dot { transform: none; }
}
@media print {
  .pg-wnav, .pl-acts, .pl-add, .pg-todaybtn { display: none !important; }
}

/* ==========================================================================
   Planning de la semaine (ps-), espace enfant « Ma semaine » (ms-) et parcours de 6 mois (p6-)
   ========================================================================== */

/* ---------- Agenda : activités cochables ---------- */
.pl-check { position: relative; }
.pl-it.k-plan .pl-ic { background: var(--surface); color: var(--x); }
.pl-it.k-plan.is-done .pl-ic { background: var(--c); color: var(--on-accent); }
.pl-it.k-plan.is-done .pl-tx strong { text-decoration: line-through; text-decoration-thickness: 1.5px; }
@media (min-width: 1100px) { .pl-week .k-plan .pl-ic { display: grid; width: 22px; height: 22px; border-radius: 6px; } .pl-week .k-plan .pl-ic .ic { width: 14px; height: 14px; } }
.pl-it.k-parcours .pl-itb { border-left-style: double; border-left-width: 5px; }

/* ---------- Éditeur ---------- */
.ps-editor { gap: 18px; }
.ps-edhead { display: flex; flex-wrap: wrap; gap: 12px 16px; justify-content: space-between; align-items: flex-end; }
.ps-edhead > div:first-child { display: grid; gap: 4px; min-width: 0; }
.ps-edhead h2:focus { outline: none; }
.ps-weeksw { display: flex; flex-wrap: wrap; gap: 8px; }
.ps-weeksw .kid-chip { cursor: pointer; font: inherit; font-weight: 600; min-height: 44px; padding: 6px 16px; }
.ps-weeksw .kid-chip[aria-pressed="true"] { border-color: var(--ink); background: var(--tint-lilac); color: var(--ink); }
.ps-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ps-day { display: grid; gap: 8px; min-width: 0; }
.ps-dh { font-size: 1.05rem; font-family: var(--font-display); color: var(--ink); }
.ps-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ps-it { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 12px; align-items: start; padding: 12px; border-radius: var(--radius); border: 1px solid var(--line); border-left: 5px solid var(--c); background: var(--surface); min-width: 0; }
.ps-it.is-done { background: color-mix(in srgb, var(--t) 55%, var(--surface)); }
.ps-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--t); color: var(--x); }
.ps-ic .ic { width: 22px; height: 22px; }
.ps-tx { display: grid; gap: 3px; min-width: 0; }
.ps-tx strong { line-height: 1.3; overflow-wrap: anywhere; }
.ps-tx small { font-size: .82rem; color: var(--muted); }
.ps-why { line-height: 1.45; }
.ps-whyl { font-weight: 700; color: var(--x); }
.ps-ctl { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ps-fld { display: block; min-width: 0; }
.ps-fld .input { min-height: 44px; padding: 6px 10px; width: auto; }
.ps-fld select.input { min-width: 112px; }
.ps-time .input { width: 128px; }
.ps-ctl .iconbtn { flex: none; }
@media (min-width: 900px) {
  .ps-it { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
  .ps-ctl { grid-column: 3; flex-wrap: nowrap; }
}
.ps-tools, .ps-save { gap: 10px; }
.ps-recap { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ps-recap li { display: flex; gap: 12px; align-items: baseline; padding: 8px 12px; border-radius: 12px; background: var(--t); border-left: 4px solid var(--c); min-width: 0; }
.ps-recap li > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.ps-day-l { flex: none; min-width: 4.6em; font-weight: 700; color: var(--x); font-variant-numeric: tabular-nums; }
.ps-after { margin-top: 4px; }

/* Choix d'une activité */
.ps-pick { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: min(46vh, 420px); overflow-y: auto; padding-right: 2px; }
.ps-pk { display: flex; gap: 10px; align-items: center; width: 100%; min-height: 52px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line); border-left: 4px solid var(--c); background: var(--surface); color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
.ps-pk:hover { background: var(--t); }
.ps-pk:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.ps-pk .ps-ic { width: 34px; height: 34px; border-radius: 10px; }
.ps-pk .ps-tx { flex: 1; }
.ps-pk > .ic:last-child { color: var(--muted); flex: none; }
.ps-own { display: flex; gap: 8px; align-items: center; }
.ps-own .input { flex: 1; min-width: 0; }
.ps-own .btn { flex: none; }

/* Carte « Cette semaine » */
.ps-mini { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ps-chk { display: flex; gap: 12px; align-items: center; width: 100%; min-height: 48px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
.ps-chk:hover { border-color: var(--c); }
.ps-chk:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.ps-chk.is-today { border-color: color-mix(in srgb, var(--lilac) 55%, var(--line)); }
.ps-box { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 8px; border: 2px solid var(--line-strong); color: transparent; transition: background .15s ease, border-color .15s ease; }
.ps-box .ic { width: 16px; height: 16px; }
.ps-chk[aria-pressed="true"] { background: var(--t); border-color: transparent; }
.ps-chk[aria-pressed="true"] .ps-box { background: var(--c); border-color: var(--c); color: var(--on-accent); }
.ps-chk[aria-pressed="true"] .ps-mt strong { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.ps-mt { display: grid; gap: 2px; min-width: 0; }
.ps-mt strong { font-size: .95rem; line-height: 1.3; overflow-wrap: anywhere; }
.ps-mt small { font-size: .8rem; color: var(--muted); }

/* Tableau de bord */
.ps-dcard { gap: 12px; }
.ps-dhead { display: flex; gap: 12px; align-items: center; min-width: 0; }
.ps-dhead h3 { font-size: 1.15rem; }
.ps-aidav { background: var(--sky); color: var(--on-accent); }
.ps-drow { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: .92rem; }
.ps-dl { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.ps-dl .ic { color: var(--lilac-txt); width: 18px; height: 18px; }

/* ---------- Espace enfant : Ma semaine ---------- */
.ms-trail { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 14px; border-radius: 20px; background: var(--surface); border: 2px solid var(--line); justify-self: start; max-width: 100%; }
.ms-trail span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--surface-2); color: var(--line-strong); }
.ms-trail span .ic { width: 20px; height: 20px; }
.ms-trail span.on { background: var(--spark); color: #1E2756; animation: ms-pop .4s var(--ease-bounce); }
.ms-days { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.ms-day { display: grid; gap: 10px; padding: 14px; border-radius: 24px; background: var(--surface); border: 2px solid var(--line); min-width: 0; }
.ms-day.td { border-color: var(--lilac); background: color-mix(in srgb, var(--tint-lilac) 45%, var(--surface)); }
.ms-dh { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 1.35rem; }
.ms-items { display: grid; gap: 10px; }
.ms-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; min-width: 0; }
.ms-it { flex: 1 1 240px; min-width: 0; display: flex; gap: 14px; align-items: center; min-height: 72px; padding: 12px 14px; border-radius: 20px; border: 3px solid var(--line); background: var(--surface); color: var(--fg); font: inherit; font-size: 1.12rem; font-weight: 600; text-align: left; cursor: pointer; box-shadow: var(--shadow-xs); transition: border-color .15s ease, background .15s ease, transform .15s var(--ease); }
.ms-it:hover { border-color: color-mix(in srgb, var(--c) 60%, var(--line)); }
.ms-it:active { transform: scale(.99); }
.ms-it:focus-visible { outline: 4px solid var(--focus); outline-offset: 3px; }
.ms-ic { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; flex: none; background: var(--t); color: var(--x); }
.ms-ic .ic { width: 28px; height: 28px; }
.ms-t { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; line-height: 1.25; }
.ms-t small { font-size: .85rem; font-weight: 500; color: var(--muted); }
.ms-it .tick { margin-left: auto; width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--line-strong); display: grid; place-items: center; color: transparent; flex: none; transition: background .2s ease, transform .3s var(--ease-bounce); }
.ms-it .tick .ic { width: 22px; height: 22px; }
.ms-it[aria-pressed="true"] { border-color: var(--mint); background: var(--tint-mint); }
.ms-it[aria-pressed="true"] .ms-t { text-decoration: line-through; text-decoration-thickness: 2px; opacity: .8; }
.ms-it[aria-pressed="true"] .tick { background: var(--mint); border-color: var(--mint); color: #fff; transform: scale(1.08); }
.ms-go { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; min-width: 48px; padding: 8px 16px; border-radius: 999px; border: 2px solid var(--line); background: var(--surface); color: var(--fg); font-weight: 600; text-decoration: none; }
.ms-go:hover { border-color: var(--ink); }
.ms-note { display: flex; gap: 8px; align-items: flex-start; }
.ms-note .ic { color: var(--coral-txt); flex: none; margin-top: 2px; }
.ms-month { border-left: 6px solid var(--c); }
@keyframes ms-pop { 0% { transform: scale(.6); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }

/* ---------- Parcours : démarrage ---------- */
.p6-objs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.p6-oc > span { justify-content: flex-start; text-align: left; gap: 12px; padding: 12px 14px; min-height: 72px; }
.p6-oci { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--tint-lilac); color: var(--lilac-txt); }
.p6-oci .ic { width: 22px; height: 22px; }
.p6-oct { display: grid; gap: 2px; min-width: 0; }
.p6-oct small { font-size: .8rem; font-weight: 400; color: var(--muted); }
.p6-themes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.p6-themes li { display: grid; gap: 4px; }
.p6-mn { font-weight: 700; font-size: .9rem; color: var(--lilac-txt); }

/* ---------- Parcours : le chemin (vue adulte) ---------- */
.p6-path { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; counter-reset: p6; }
.p6-step { position: relative; display: grid; justify-items: center; text-align: center; gap: 8px; padding: 10px 4px; min-width: 0; }
.p6-step::before { content: ""; position: absolute; top: 34px; left: calc(-50% + 26px); right: calc(50% + 26px); height: 4px; border-radius: 4px; background: var(--surface-3); }
.p6-step:first-child::before { display: none; }
.p6-step.done::before, .p6-step.cur::before { background: var(--mint); }
.p6-node { position: relative; z-index: 1; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); border: 3px solid var(--surface-3); }
.p6-node .ic { width: 24px; height: 24px; }
.p6-step.done .p6-node { background: var(--mint); color: var(--on-accent); border-color: var(--mint); }
.p6-step.cur .p6-node { background: var(--t); color: var(--x); border-color: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 25%, transparent); }
.p6-sl { display: grid; gap: 2px; min-width: 0; }
.p6-sl strong { font-size: .92rem; line-height: 1.25; overflow-wrap: anywhere; }
.p6-sl small { font-size: .76rem; color: var(--muted); }
.p6-step.cur .p6-sl small:first-child { color: var(--x); font-weight: 700; }
@media (max-width: 760px) {
  .p6-path { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .p6-step { grid-template-columns: auto minmax(0, 1fr); justify-items: start; text-align: left; gap: 12px; padding: 6px 0 14px; }
  .p6-step::before { top: -14px; bottom: auto; left: 24px; right: auto; width: 4px; height: 24px; }
}
.p6-month { border-left: 6px solid var(--c); }
.p6-obl { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.p6-obl li { display: grid; gap: 8px; }
.p6-obh { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.p6-obh strong { flex: 1 1 200px; min-width: 0; }
.p6-bars { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; height: 74px; max-width: 360px; }
.p6-bars span { display: grid; grid-template-rows: 1fr auto; align-items: end; justify-items: center; gap: 2px; min-width: 0; }
.p6-bars i { display: block; width: 100%; max-width: 34px; border-radius: 8px 8px 3px 3px; background: var(--mint); align-self: end; }
.p6-bars span.empty i { background: var(--surface-3); }
.p6-bars small { font-size: .72rem; color: var(--muted); }
.p6-edit > div { padding: 4px 16px 16px; }

/* ---------- Parcours : bilan et résultat ---------- */
.p6-bilan h2:focus, .p6-result h2:focus { outline: none; }
.p6-scale { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
.p6-cele { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding: 16px; border-radius: var(--radius-lg); background: var(--tint-mint); }
.p6-cele > .stack { flex: 1 1 240px; min-width: 0; }
.p6-wins { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.p6-wins li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radius); background: var(--tint-spark); }
.p6-wins li .ic { flex: none; margin-top: 3px; color: var(--ink); }
.p6-wins li span { min-width: 0; overflow-wrap: anywhere; }
.p6-chs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.p6-chs .choice > span { display: grid; justify-items: start; text-align: left; gap: 4px; padding: 12px 14px; min-height: 88px; align-content: start; }
.p6-chs .choice small { font-weight: 400; font-size: .84rem; color: var(--muted); }
.p6-chs .choice input:checked + span small { color: var(--fg); }

/* ---------- Parcours : cartes, invitation, bandeau ---------- */
.p6-card { border-top: 5px solid var(--c, var(--lilac)); }
.p6-dots { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.p6-dots li { flex: 1; height: 10px; border-radius: 6px; background: var(--surface-3); }
.p6-dots li.done { background: var(--mint); }
.p6-dots li.cur { background: var(--c, var(--lilac)); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--c, var(--lilac)); }
.p6-invrow { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.p6-invrow > .stack { flex: 1 1 240px; min-width: 0; }
.p6-invite { background: linear-gradient(135deg, var(--tint-spark), var(--tint-lilac)); border-color: transparent; }
.p6-due { background: var(--tint-spark); border-color: color-mix(in srgb, var(--spark) 40%, transparent); }
.p6-banner { display: grid; gap: 10px; }
.p6-bn { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; padding: 14px 16px; border-radius: var(--radius); background: var(--tint-spark); border: 1px solid color-mix(in srgb, var(--spark) 40%, transparent); }
.p6-bn > .ic { flex: none; color: var(--ink); }
.p6-bn p { flex: 1 1 260px; min-width: 0; }

/* ---------- Parcours : carte au trésor (espace enfant) ---------- */
.p6-map { position: relative; display: grid; gap: 6px; padding: 18px 16px; border-radius: 28px; background: linear-gradient(180deg, var(--tint-sky) 0%, var(--tint-lilac) 45%, var(--tint-mint) 100%); overflow: hidden; }
.p6-summit, .p6-base { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; font-family: var(--font-display); font-weight: 700; color: var(--ink); }
.p6-summit .ic, .p6-base .ic { width: 26px; height: 26px; }
.p6-summit .ic { color: var(--coral-txt); }
.p6-trail { position: relative; list-style: none; margin: 0; padding: 8px 0; display: flex; flex-direction: column-reverse; gap: 18px; }
.p6-trail::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 0; border-left: 4px dashed color-mix(in srgb, var(--ink) 30%, transparent); transform: translateX(-2px); }
.p6-stop { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; width: min(78%, 360px); padding: 10px 12px; border-radius: 22px; background: var(--surface); border: 3px solid var(--line); box-shadow: var(--shadow-sm); }
.p6-stop:nth-child(odd) { align-self: flex-start; }
.p6-stop:nth-child(even) { align-self: flex-end; }
.p6-stop .p6-node { width: 48px; height: 48px; flex: none; }
.p6-stop.done { border-color: var(--mint); }
.p6-stop.done .p6-node { background: var(--spark); color: #1E2756; border-color: var(--spark); }
.p6-stop.cur { border-color: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 30%, transparent), var(--shadow); }
.p6-stop.cur .p6-node { background: var(--t); color: var(--x); border-color: var(--c); }
.p6-lbl { display: grid; gap: 1px; min-width: 0; flex: 1; }
.p6-lbl small { font-size: .78rem; color: var(--muted); font-weight: 600; }
.p6-lbl strong { font-family: var(--font-display); font-size: 1.12rem; line-height: 1.15; overflow-wrap: anywhere; }
.p6-lbl em { font-style: normal; font-size: .82rem; font-weight: 700; color: var(--muted); }
.p6-stop.done .p6-lbl em { color: var(--mint-txt); }
.p6-stop.cur .p6-lbl em { color: var(--x); }
.p6-pip { flex: none; }
.p6-pip .mascot { width: 64px; height: 64px; animation: bob 3.2s ease-in-out infinite; transform-origin: 50% 90%; }
@media (max-width: 480px) { .p6-stop { width: 88%; } .p6-pip .mascot { width: 52px; height: 52px; } }

/* ---------- Mouvement réduit, mode calme, impression ---------- */
@media (prefers-reduced-motion: reduce) {
  .ms-trail span.on, .p6-pip .mascot { animation: none; }
  .ms-it, .ms-it .tick, .ps-box { transition: none; }
}
:root[data-calme="1"] .ms-trail span.on, :root[data-calme="1"] .p6-pip .mascot { animation: none; }
@media print { .ps-after, .ps-tools, .ps-save, .ps-ctl, .p6-choice { display: none !important; } }
.p6-edit summary { justify-content: flex-start; gap: 10px; }
.p6-edit summary .ic { color: var(--lilac-txt); flex: none; }
.p6-edit summary::after { margin-left: auto; }
.p6-choice [hidden], .ps-pick [hidden] { display: none !important; }

/* ===== ludique.css ===== */
/* ==========================================================================
   Ébulle — module ludique : Aujourd'hui sur Ébulle, autocollants, Pip,
   niveaux, défi du jour et jeux 2 (émotions, détails, feu, priorités).
   Les cartes « pastel » de l'espace enfant gardent leurs couleurs vives et
   un texte bleu nuit dans les deux thèmes, comme les tuiles enfant.
   ========================================================================== */

/* ---------- Petits éléments communs ---------- */
.ldq-kicker { display: flex; align-items: center; gap: 6px; margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ldq-kicker .ic { width: 1.2em; height: 1.2em; }
.ldq-pastel { color: #1E2756; border-radius: var(--radius-lg); padding: 20px; display: grid; gap: 12px; align-content: start; position: relative; overflow: hidden; min-width: 0; }
.ldq-pastel .ldq-kicker { color: #1E2756; opacity: .82; }
.ldq-pastel a { color: #1E2756; font-weight: 600; }
.ldq-pastel::before { content: ""; position: absolute; right: -36px; top: -36px; width: 130px; height: 130px; border-radius: 50%; background: rgba(255, 255, 255, .22); pointer-events: none; }
.ldq-pastel > * { position: relative; }
.ldq-bubble { width: 46px; height: 46px; border-radius: 16px; display: grid; place-items: center; background: rgba(255, 255, 255, .62); flex: none; color: #1E2756; }
.ldq-bubble .ic { width: 26px; height: 26px; }
.ldq-bubble.big { width: 64px; height: 64px; border-radius: 22px; }
.ldq-bubble.big .ic { width: 36px; height: 36px; }
.ldq-q { font-size: 1.15rem; font-weight: 600; line-height: 1.45; }
.ldq-mid { font-size: 1.08rem; font-weight: 500; line-height: 1.55; }
.ldq-link { display: inline-flex; gap: 6px; align-items: center; justify-self: start; min-height: 44px; }
.ldq-meter { height: 14px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.ldq-meter i { display: block; height: 100%; border-radius: 999px; background-color: var(--lilac); background-image: linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 60%); transition: width .6s ease; }

/* ---------- Défi du jour ---------- */
.ldq-defi-head { display: flex; gap: 14px; align-items: flex-start; }
.ldq-defi-t { font-family: var(--font-display); font-weight: 800; font-size: 1.32rem; line-height: 1.2; margin: 0; }
.ldq-defi.big { padding: 24px; }
.ldq-defi.big .ldq-defi-t { font-size: clamp(1.4rem, 3.6vw, 1.9rem); }
.ldq-defi-note { font-size: .86rem; opacity: .85; margin: 0; }
.ldq-btn-ink { background: #1E2756; color: #fff; }
.ldq-btn-ink:hover { background: #2E3878; }
.ldq-btn-line { background: rgba(255, 255, 255, .55); border-color: rgba(30, 39, 86, .3); color: #1E2756; }
.ldq-btn-line:hover { background: rgba(255, 255, 255, .8); }
.ldq-done { display: flex; gap: 10px; align-items: center; margin: 0; background: rgba(255, 255, 255, .7); border-radius: 14px; padding: 10px 14px; font-weight: 600; }
.ldq-done .ic { color: #0E7461; width: 28px; height: 28px; flex: none; }
.ldq-done:focus { outline: 3px solid #1E2756; outline-offset: 2px; }
.ldq-defi.done .ldq-bubble { background: #fff; }
.ldq-catrow { display: flex; flex-wrap: wrap; gap: 6px; }
.ldq-catchip { display: inline-flex; gap: 6px; align-items: center; padding: 4px 5px 4px 10px; border-radius: 999px; color: #1E2756; font-weight: 600; font-size: .85rem; }
.ldq-catchip .ic { width: 16px; height: 16px; }
.ldq-catchip b { background: rgba(255, 255, 255, .72); border-radius: 999px; padding: 0 8px; }
.ldq-hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ldq-hist li { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 14px; background: var(--surface-2); }
.ldq-hist .grow { flex: 1; min-width: 0; }
.ldq-hist-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: #1E2756; flex: none; }
.ldq-hist-ic .ic { width: 18px; height: 18px; }

/* ---------- Niveaux ---------- */
.ldq-level { display: flex; gap: 16px; align-items: center; min-width: 0; }
.ldq-lvl-art { width: 84px; height: 84px; flex: none; }
.ldq-level.compact .ldq-lvl-art { display: none; }
.ldq-lvl-name { font-family: var(--font-display); font-weight: 800; font-size: 1.45rem; color: var(--ink); line-height: 1.1; margin: 0; }
.ldq-sub { color: var(--muted); margin: 0; }

/* ---------- Accueil de l'espace enfant ---------- */
.ldq-kidhome { display: grid; gap: 14px; }
.ldq-kidgrid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px; align-items: stretch; }
@media (max-width: 760px) { .ldq-kidgrid { grid-template-columns: minmax(0, 1fr); } }
.ldq-factrow { display: flex; gap: 12px; align-items: flex-start; }
.ldq-fact-t { font-size: 1.08rem; font-weight: 500; line-height: 1.5; margin: 0; }
.ldq-kidlvl { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; }
@media (max-width: 760px) { .ldq-kidlvl { grid-template-columns: auto minmax(0, 1fr); } .ldq-last { grid-column: 1 / -1; } }
.ldq-kidlvl-pip { display: block; border-radius: 50%; line-height: 0; }
.ldq-kidlvl-pip .mascot { transition: transform .2s ease; }
.ldq-kidlvl-pip:hover .mascot { transform: rotate(-6deg) scale(1.05); }
.ldq-last { display: flex; gap: 10px; align-items: center; text-decoration: none; color: var(--fg); padding: 8px 14px 8px 8px; border-radius: 20px; background: var(--surface-2); min-height: 44px; min-width: 0; }
.ldq-last:hover { background: var(--surface-3); }
.ldq-last .ldq-stk { width: 56px; height: 56px; flex: none; }
.ldq-last small { display: block; color: var(--muted); font-size: .78rem; }
.ldq-last b { display: block; font-family: var(--font-display); font-size: 1.05rem; line-height: 1.15; color: var(--ink); }
.tile .mascot.ic { padding: 2px; }

/* ---------- Aujourd'hui sur Ébulle (adultes) ---------- */
.ldq-today { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.ldq-today .ldq-fact, .ldq-today .ldq-wide { grid-column: 1 / -1; }
@media (max-width: 1020px) { .ldq-today { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ldq-today .ldq-qcard { grid-column: 1 / -1; } }
@media (max-width: 760px) { .ldq-today { grid-template-columns: minmax(0, 1fr); } }
.ldq-today .pill, .ldq-hcard .pill, .ldq-pastel .pill { justify-self: start; }
.ldq-fact { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: center; background: var(--tint-lilac); border: 0; }
.ldq-fact-pip .mascot { display: block; }
@media (max-width: 560px) { .ldq-fact { grid-template-columns: minmax(0, 1fr); gap: 8px; } .ldq-fact-pip .mascot { width: 72px !important; height: 72px !important; } }
.ldq-bigfact { font-family: var(--font-display); font-size: clamp(1.25rem, 2.6vw, 1.65rem); font-weight: 700; line-height: 1.32; color: var(--ink); margin: 0; }
.ldq-tint { border: 0; }
.ldq-tint.mint { background: var(--tint-mint); }
.ldq-tint.spark { background: var(--tint-spark); }
.ldq-tint.coral { background: var(--tint-coral); }
.ldq-tint.sky { background: var(--tint-sky); }
.ldq-tint .pill, .ldq-fact .pill { background: var(--surface); }
.ldq-tint .ldq-kicker, .ldq-fact .ldq-kicker { color: var(--fg); opacity: .75; }
.ldq-word { font-size: 1.7rem; }

/* Questions du jour */
.ldq-vf { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ldq-choice { min-height: 52px; border-radius: 16px; border: 3px solid var(--line); background: var(--surface); color: var(--fg); font-weight: 700; font-size: 1.05rem; cursor: pointer; padding: 8px 12px; transition: border-color .15s, transform .12s; }
.ldq-choice:hover:not([disabled]) { border-color: var(--lilac); transform: translateY(-1px); }
.ldq-choice[disabled] { cursor: default; }
.ldq-choice.good { border-color: var(--mint); background: var(--tint-mint); }
.ldq-choice.picked { border-style: dashed; opacity: .7; }
.ldq-pastel .ldq-choice { border-color: rgba(30, 39, 86, .25); background: rgba(255, 255, 255, .72); color: #1E2756; }
.ldq-pastel .ldq-choice.good { border-color: #0E7461; background: #fff; color: #0E7461; }
.ldq-why { display: grid; gap: 8px; }
.ldq-why:empty { display: none; }
.ldq-why p { margin: 0; }
.ldq-idea { display: flex; gap: 8px; align-items: flex-start; background: var(--tint-spark); color: var(--fg); padding: 10px 12px; border-radius: 14px; }
.ldq-idea .ic { color: var(--ink); margin-top: 2px; }
.ldq-pastel .ldq-idea { background: rgba(255, 255, 255, .7); color: #1E2756; }
.ldq-pastel .ldq-idea .ic { color: #1E2756; }

/* Boutons d'émotions (jeu et émotion du jour) */
.ldq-emo-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ldq-emo-btn { display: flex; align-items: center; gap: 10px; min-height: 62px; padding: 10px 12px; border-radius: 18px; border: 3px solid transparent; background: var(--c); color: #1E2756; font-weight: 700; font-size: 1.04rem; line-height: 1.2; text-align: left; cursor: pointer; transition: transform .12s ease, box-shadow .15s ease; min-width: 0; }
.ldq-emo-btn .ic { width: 34px; height: 34px; flex: none; padding: 5px; border-radius: 12px; background: rgba(255, 255, 255, .62); }
.ldq-emo-btn:hover:not([disabled]) { transform: translateY(-2px); }
.ldq-emo-btn[disabled] { cursor: default; }
.ldq-emo-btn.good { border-color: #1E2756; box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px var(--mint); }
.ldq-emo-btn.picked { border-color: rgba(30, 39, 86, .55); border-style: dashed; }
.ldq-emo-btn[disabled]:not(.good):not(.picked) { opacity: .5; }

/* ---------- Bloc d'accueil « Aujourd'hui sur Ébulle » ---------- */
.ldq-home-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
@media (max-width: 960px) { .ldq-home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ldq-hfact { grid-column: 1 / -1; } }
@media (max-width: 620px) { .ldq-home-grid { grid-template-columns: minmax(0, 1fr); } }
.ldq-hcard { position: relative; isolation: isolate; display: grid; gap: 10px; align-content: start; padding: 22px; border-radius: var(--radius-lg); text-decoration: none; color: var(--fg); transition: transform .15s ease, box-shadow .15s ease; overflow: hidden; min-width: 0; }
.ldq-hcard:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.ldq-hfact { background: var(--tint-lilac); padding-right: 120px; }
.ldq-htip { background: var(--tint-mint); }
.ldq-hword { background: var(--tint-spark); }
.ldq-hcard .ldq-kicker { color: var(--fg); opacity: .75; }
.ldq-hpip { position: absolute; right: 14px; top: 12px; line-height: 0; }
.ldq-hfact::after { content: ""; position: absolute; z-index: -1; right: -40px; bottom: -50px; width: 160px; height: 160px; border-radius: 50%; background: var(--surface); opacity: .35; pointer-events: none; }
.ldq-htext { line-height: 1.55; }
.ldq-hfact .ldq-htext { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; line-height: 1.3; color: var(--ink); }
.ldq-hterm { font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; color: var(--ink); line-height: 1.1; }
.ldq-hcard .pill { justify-self: start; background: var(--surface); }
@media (max-width: 620px) { .ldq-hfact { padding-right: 22px; } .ldq-hpip { position: static; } .ldq-hpip .mascot { width: 64px !important; height: 64px !important; } }

/* ---------- Tableau de bord ---------- */
.ldq-dashkid { align-items: flex-start; flex-wrap: wrap; }
.ldq-dashkid .mascot { flex: none; }
.ldq-minirow { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 6px; }
.ldq-minirow .ldq-stk { width: 34px; height: 34px; filter: none; }

/* ---------- Autocollants et album ---------- */
.ldq-stk { display: block; aspect-ratio: 1; height: auto; filter: drop-shadow(0 3px 5px rgba(15, 19, 41, .28)); transition: transform .2s ease; }
.ldq-stk.locked { filter: none; }
.ldq-stk.big { width: 180px; height: 180px; }
.ldq-albumbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.ldq-albumbar .grow { flex: 1; min-width: 140px; }
.ldq-count { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; color: var(--ink); white-space: nowrap; }
.ldq-count b { font-size: 1.7rem; }
.ldq-famh { font-size: 1.35rem; display: flex; gap: 8px; align-items: center; }
.ldq-famh .ic { color: var(--lilac-txt); }
.ldq-album { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; }
@media (max-width: 440px) { .ldq-album { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.ldq-cell { position: relative; display: grid; gap: 6px; justify-items: center; align-content: start; text-align: center; padding: 14px 10px 12px; border-radius: 22px; border: 2px solid var(--line); background: var(--surface); color: var(--fg); cursor: pointer; min-height: 44px; transition: transform .15s ease, border-color .15s ease; }
.ldq-cell .ldq-stk { width: min(100%, 104px); }
.ldq-cell:hover { border-color: var(--lilac); transform: translateY(-2px); }
.ldq-cell.got:hover .ldq-stk { transform: rotate(-7deg) scale(1.06); }
.ldq-cell .nm { font-family: var(--font-display); font-weight: 800; font-size: 1rem; line-height: 1.15; color: var(--ink); }
.ldq-cell:not(.got) { background: transparent; border-style: dashed; }
.ldq-cell:not(.got) .nm { color: var(--muted); }
.ldq-cell .hint { font-size: .78rem; color: var(--muted); line-height: 1.35; }
.ldq-cell.new .ldq-stk { animation: ldq-peel .9s cubic-bezier(.2, 1.4, .4, 1) both; }
.ldq-newtag { position: absolute; top: 8px; left: 8px; background: var(--spark); color: #1E2756; font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; transform: rotate(-6deg); }
.ldq-stkmodal { display: grid; justify-items: center; text-align: center; gap: 8px; }
@keyframes ldq-peel { from { transform: rotate(-30deg) scale(.3); opacity: 0; } 60% { transform: rotate(8deg) scale(1.1); opacity: 1; } to { transform: none; } }

/* Carte qui surgit quand un autocollant est gagné */
.ldq-pop { position: fixed; z-index: 92; left: 50%; top: calc(var(--header-h) + 14px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 8px 20px 8px 8px; border-radius: 999px; background: var(--surface); color: var(--fg); box-shadow: var(--shadow), 0 0 0 3px var(--spark); text-decoration: none; animation: ldq-popin .6s cubic-bezier(.2, 1.4, .4, 1) both; max-width: calc(100vw - 32px); }
.ldq-pop .ldq-stk { width: 64px; height: 64px; flex: none; animation: ldq-peel .9s .1s both; }
.ldq-pop small { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.ldq-pop b { display: block; font-family: var(--font-display); font-size: 1.2rem; line-height: 1.15; color: var(--ink); }
.ldq-pop.out { opacity: 0; transform: translateX(-50%) translateY(-10px); transition: opacity .5s ease, transform .5s ease; }
@media (max-width: 480px) { .ldq-pop { gap: 10px; padding: 6px 16px 6px 6px; } .ldq-pop .ldq-stk { width: 48px; height: 48px; } .ldq-pop small { letter-spacing: .04em; white-space: nowrap; } .ldq-pop b { font-size: 1.05rem; } }
@keyframes ldq-popin { from { opacity: 0; transform: translateX(-50%) translateY(-20px) scale(.9); } to { opacity: 1; transform: translateX(-50%); } }

/* ---------- Personnaliser Pip ---------- */
.ldq-pip { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; align-items: start; }
@media (max-width: 860px) { .ldq-pip { grid-template-columns: minmax(0, 1fr); } }
.ldq-stage { justify-items: center; }
.ldq-pipbtn { border: 0; background: radial-gradient(circle at 50% 40%, var(--surface) 0%, var(--surface-2) 72%); border-radius: 50%; padding: 16px; cursor: pointer; display: grid; place-items: center; width: min(100%, 270px); aspect-ratio: 1; }
.ldq-pipbtn .mascot { width: 100% !important; height: auto !important; aspect-ratio: 1; }
.ldq-pipbtn:active .mascot { transform: scale(.96); }
.ldq-stage .ldq-level { width: 100%; }
.ldq-wardrobe-wrap .tabs { margin-bottom: 4px; }
@media (max-width: 520px) {
  .ldq-wardrobe-wrap .tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; border-bottom: 0; overflow: visible; }
  .ldq-wardrobe-wrap .tabs button { border: 2px solid var(--line); border-radius: 12px; margin: 0; min-height: 44px; padding: 8px 10px; }
  .ldq-wardrobe-wrap .tabs [aria-selected="true"] { border-color: var(--ink); background: var(--tint-lilac); }
}
.ldq-wardrobe { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
@media (max-width: 440px) { .ldq-wardrobe { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } }
.ldq-opt { position: relative; display: grid; justify-items: center; align-content: start; gap: 4px; padding: 10px 4px 8px; border-radius: 18px; border: 3px solid var(--line); background: var(--surface); color: var(--fg); cursor: pointer; min-height: 44px; font-size: .84rem; font-weight: 600; line-height: 1.2; text-align: center; transition: border-color .15s, transform .12s; min-width: 0; }
.ldq-opt:hover { border-color: var(--lilac); }
.ldq-opt .mascot { width: 64px !important; height: 64px !important; }
.ldq-opt[aria-pressed="true"] { border-color: var(--ink); background: var(--tint-lilac); }
.ldq-opt.locked { color: var(--muted); border-style: dashed; cursor: help; }
.ldq-opt.locked .mascot { filter: grayscale(1); opacity: .42; }
.ldq-opt .lk, .ldq-opt .ok { position: absolute; top: 5px; right: 5px; display: inline-flex; gap: 2px; align-items: center; font-size: .72rem; font-weight: 700; border-radius: 999px; }
.ldq-opt .lk { padding: 2px 6px; background: var(--surface-2); color: var(--fg); }
.ldq-opt .lk .ic { width: 12px; height: 12px; }
.ldq-opt .ok { padding: 3px; background: var(--ink); color: var(--on-ink); }
.ldq-opt .ok .ic { width: 14px; height: 14px; }

/* ---------- Jeu des émotions ---------- */
.ldq-emo-scene { display: flex; gap: 14px; align-items: center; }
.ldq-emo-scene .mascot { flex: none; }
.ldq-emo-q { font-family: var(--font-display); font-size: clamp(1.3rem, 3.4vw, 1.7rem); font-weight: 700; line-height: 1.25; color: var(--ink); margin: 0; }
.ldq-emo-ask { font-weight: 600; color: var(--muted); margin: 0; }
.ldq-emo-fb { display: flex; gap: 12px; align-items: flex-start; background: var(--surface-2); border-radius: 18px; padding: 14px; }
.ldq-emo-fb .mascot { flex: none; }
.ldq-emo-fb p { margin: 0; }
.ldq-metrow { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.ldq-metchip { display: inline-flex; gap: 6px; align-items: center; padding: 4px 10px; border-radius: 999px; background: var(--c); color: #1E2756; font-weight: 600; font-size: .88rem; }
@media (max-width: 480px) { .ldq-emo-scene .mascot { width: 60px !important; height: 60px !important; } .ldq-emo-fb { flex-direction: column; } }

/* ---------- Chasse aux détails ---------- */
.ldq-chrono { color: var(--muted); }
.ldq-chrono .ic { color: #E8A100; }
.ldq-dgrid { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 8px; width: min(100%, 480px); margin: 0 auto; min-height: 100px; }
.ldq-dcell { aspect-ratio: 1; min-width: 44px; min-height: 44px; border-radius: 16px; border: 2px solid var(--line); background: var(--surface); display: grid; place-items: center; cursor: pointer; padding: 0; transition: transform .15s ease, border-color .15s ease, background .15s ease; }
.ldq-dcell span { display: grid; place-items: center; width: 62%; height: 62%; }
.ldq-dcell .ic { width: 100%; height: 100%; }
.ldq-dcell:hover { border-color: var(--lilac); }
.ldq-dcell.found { border-color: var(--mint); background: var(--tint-mint); transform: scale(1.08); box-shadow: 0 0 0 4px color-mix(in srgb, var(--mint) 35%, transparent); }
.ldq-dcell.nope { animation: ldq-wiggle .35s ease; }
.ldq-dcell.hint { background: var(--tint-spark); border-color: color-mix(in srgb, var(--spark) 70%, var(--line)); }
.ldq-dcell.hint2 { outline: 3px solid var(--spark); outline-offset: 2px; animation: ldq-glow 1.4s ease-in-out infinite; }
@keyframes ldq-wiggle { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes ldq-glow { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
.ldq-dend { grid-column: 1 / -1; display: grid; justify-items: center; text-align: center; gap: 8px; padding: 22px; background: var(--surface-2); border-radius: 22px; }
.ldq-dend p { margin: 0; }
.ldq-dend-t { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; color: var(--ink); }

/* ---------- Feu vert, feu rouge ---------- */
.ldq-feu { position: relative; display: grid; justify-items: center; align-content: center; gap: 10px; padding: 26px 16px 18px; border-radius: 28px; background: var(--surface-2); border: 3px solid var(--line); transition: background .2s ease, border-color .2s ease; min-height: 300px; }
.ldq-feu[data-st="green"] { background: var(--tint-mint); border-color: var(--mint); }
.ldq-feu[data-st="red"] { background: var(--tint-coral); border-color: var(--coral); }
.ldq-light { position: absolute; left: 16px; top: 16px; display: grid; gap: 8px; padding: 8px; border-radius: 999px; background: #1E2756; }
.ldq-light i { width: 26px; height: 26px; border-radius: 50%; background: #3A4370; display: block; transition: background .15s ease, box-shadow .15s ease; }
.ldq-feu[data-st="red"] .ldq-light .r { background: #FF6B5B; box-shadow: 0 0 14px #FF6B5B; }
.ldq-feu[data-st="green"] .ldq-light .g { background: #4CD08A; box-shadow: 0 0 14px #4CD08A; }
.ldq-feu-pip { line-height: 0; }
.ldq-feu-pip .mascot { display: block; transition: transform .15s ease; }
.ldq-feu[data-st="green"] .ldq-feu-pip .mascot { transform: scale(1.06); }
.ldq-feu-msg { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; color: var(--ink); text-align: center; min-height: 2.6em; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 0; max-width: 34ch; }
.ldq-feu-btn { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 84px; border-radius: 26px; border: 0; background: var(--ink); color: var(--on-ink); font-family: var(--font-display); font-size: 1.6rem; font-weight: 800; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; transition: transform .08s ease; }
.ldq-feu-btn .ic { width: 34px; height: 34px; }
.ldq-feu-btn:active:not([disabled]) { transform: scale(.98); }
.ldq-feu-btn[disabled] { opacity: .45; cursor: not-allowed; }
@media (max-width: 480px) { .ldq-feu .mascot { width: 130px !important; height: 130px !important; } .ldq-light i { width: 20px; height: 20px; } }

/* ---------- Matrice des priorités ---------- */
.ldq-padd { display: flex; gap: 10px; }
.ldq-padd .input { flex: 1; min-width: 0; }
@media (max-width: 480px) { .ldq-padd { flex-direction: column; } }
.ldq-ex .btn { white-space: normal; text-align: left; }
.ldq-ex .linkbtn { min-height: 44px; }
.ldq-tray { border: 2px dashed var(--line); border-radius: var(--radius-lg); padding: 16px; display: grid; gap: 10px; background: var(--surface); transition: border-color .15s ease; }
.ldq-tray h2, .ldq-qd h3 { font-size: 1.15rem; display: flex; gap: 8px; align-items: center; margin: 0; }
.ldq-tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ldq-task { display: flex; align-items: center; gap: 6px; padding: 4px 4px 4px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); cursor: grab; min-height: 52px; }
.ldq-task .t { flex: 1; min-width: 0; overflow-wrap: anywhere; font-weight: 500; line-height: 1.35; }
.ldq-task.done .t { text-decoration: line-through; text-decoration-thickness: 2px; opacity: .6; }
.ldq-task.dragging { opacity: .5; }
.ldq-tick { width: 44px; height: 44px; flex: none; margin-left: -8px; border-radius: 50%; border: 3px solid var(--line); background: var(--surface); display: grid; place-items: center; color: transparent; cursor: pointer; }
.ldq-tick .ic { width: 20px; height: 20px; }
.ldq-tick:hover { border-color: var(--mint); color: var(--mint-txt); }
.ldq-tick[aria-pressed="true"] { background: var(--mint); border-color: var(--mint); color: #fff; }
.ldq-move { min-height: 44px; flex: none; }
.ldq-del { width: 44px; height: 44px; flex: none; }
@media (max-width: 520px) { .ldq-move span { display: none; } .ldq-move { padding: 6px 12px; } }
.ldq-qd .ldq-move span { display: none; }
.ldq-qd .ldq-move { padding: 6px 12px; }
.ldq-mx { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 680px) { .ldq-mx { grid-template-columns: minmax(0, 1fr); } }
.ldq-qd { border-radius: var(--radius-lg); padding: 14px; display: grid; gap: 10px; align-content: start; min-height: 170px; border: 2px solid transparent; transition: border-color .15s ease, transform .15s ease; min-width: 0; }
.ldq-qd.coral { background: var(--tint-coral); }
.ldq-qd.mint { background: var(--tint-mint); }
.ldq-qd.sky { background: var(--tint-sky); }
.ldq-qd.lilac { background: var(--tint-lilac); }
.ldq-qd header { display: flex; gap: 10px; align-items: center; }
.ldq-qd header > div { flex: 1; min-width: 0; }
.ldq-qd header p { margin: 0; color: var(--muted); }
.ldq-qd .pill { background: var(--surface); }
.ldq-qd .num { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; background: var(--surface); border: 2px solid currentColor; flex: none; }
.ldq-qd.coral .num { color: var(--coral-txt); }
.ldq-qd.mint .num { color: var(--mint-txt); }
.ldq-qd.sky .num { color: var(--sky-txt); }
.ldq-qd.lilac .num { color: var(--lilac-txt); }
.ldq-qd.over, .ldq-tray.over { border-color: var(--ink); border-style: dashed; transform: scale(1.01); }
.ldq-empty { color: var(--muted); border: 2px dashed color-mix(in srgb, var(--muted) 35%, transparent); border-radius: 12px; padding: 12px; text-align: center; margin: 0; }
.ldq-qtip { display: flex; gap: 8px; font-size: .88rem; margin: 0; }
.ldq-qtip .ic { flex: none; margin-top: 2px; color: var(--muted); }
.ldq-tips { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.ldq-fs { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; min-width: 0; }
.ldq-fs legend { font-weight: 600; margin-bottom: 6px; padding: 0; }
.ldq-dest { font-weight: 500; color: var(--muted); display: flex; gap: 6px; align-items: center; margin: 0; }

/* ==========================================================================
   Badges du héros : médaillons à niveaux, rang, célébration
   Les médaillons gardent leurs couleurs dans les deux thèmes (comme les tuiles enfant).
   ========================================================================== */
.hb-art { display: block; aspect-ratio: 1; height: auto; overflow: visible; filter: drop-shadow(0 4px 6px rgba(15, 19, 41, .22)); transition: transform .25s var(--ease-bounce); }
.hb-art.locked, .hb-ghost { filter: none; }
.hb-ghost { filter: grayscale(1); opacity: .38; }
.hb-art.big { width: 150px; height: 150px; }

/* Rang du héros */
.hb-rank { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 28px; align-items: center; padding: 24px; border-radius: var(--radius-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); min-width: 0; }
.hb-rank-art { min-width: 0; }
.hb-rankart, .hb-rankmedal { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto; }
.hb-rank-body { display: grid; gap: 10px; min-width: 0; }
.hb-rank-name { font-size: clamp(2rem, 5vw, 2.9rem); line-height: 1.05; margin: 0; color: var(--ink); }
.hb-rank-sub { margin: 0; color: var(--muted); font-weight: 500; }
.hb-rank-next { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--ink); line-height: 1.25; }
.hb-rank .ldq-meter { height: 16px; }
@media (max-width: 760px) {
  .hb-rank { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 18px 16px; text-align: center; }
  .hb-rank .ldq-kicker { justify-content: center; }
  .hb-rankart, .hb-rankmedal { max-width: 230px; }
}
.hb-path { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; position: relative; }
.hb-path::before { content: ""; position: absolute; left: 10%; right: 10%; top: 27px; height: 4px; border-radius: 4px; background: var(--surface-3); }
.hb-path li { position: relative; display: grid; justify-items: center; align-content: start; gap: 5px; text-align: center; min-width: 0; }
.hb-path-ic { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); border: 3px solid var(--line); overflow: hidden; }
.hb-path-ic svg { display: block; }
.hb-path li:not(.done) .hb-path-ic svg { filter: grayscale(1); opacity: .42; }
.hb-path li.done .hb-path-ic { background: var(--tint-spark); border-color: var(--spark); }
.hb-path li.next .hb-path-ic { border-style: dashed; border-color: var(--lilac); }
.hb-path li[aria-current] .hb-path-ic { box-shadow: 0 0 0 4px color-mix(in srgb, var(--spark) 45%, transparent); }
.hb-path-nm { font-size: .76rem; font-weight: 700; line-height: 1.15; color: var(--fg); overflow-wrap: anywhere; }
.hb-path li:not(.done):not(.next) .hb-path-nm { color: var(--muted); font-weight: 500; }
@media (max-width: 420px) { .hb-rank { padding: 16px 10px; } .hb-path { gap: 2px; } .hb-path-ic { width: 48px; height: 48px; } .hb-path-ic svg { width: 40px !important; height: 40px !important; } .hb-path::before { top: 22px; } .hb-path-nm { font-size: .62rem; letter-spacing: -.01em; overflow-wrap: normal; } }

/* Grille des badges */
.hb-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 920px) { .hb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .hb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.hb-card { position: relative; isolation: isolate; display: grid; justify-items: center; align-content: start; gap: 5px; padding: 14px 10px; border-radius: 24px; border: 2px solid var(--line); background: var(--surface); color: var(--fg); cursor: pointer; text-align: center; min-height: 44px; min-width: 0; font: inherit; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.hb-card::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--hb) 20%, transparent), transparent 62%); }
.hb-card:hover { border-color: var(--lilac); transform: translateY(-2px); box-shadow: var(--shadow); }
.hb-card:hover .hb-art { transform: rotate(-6deg) scale(1.05); }
.hb-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.hb-card .hb-art { width: min(100%, 138px); }
.hb-card.lv0 { border-style: dashed; background: transparent; }
.hb-card.lv0::before { display: none; }
.hb-card-nom { font-family: var(--font-display); font-weight: 800; font-size: 1.06rem; line-height: 1.15; color: var(--ink); overflow-wrap: anywhere; }
.hb-card-lv { font-size: .82rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: var(--surface-2); color: var(--fg); }
.hb-card.lv3 .hb-card-lv { background: var(--tint-spark); }
.hb-card.lv4 .hb-card-lv, .hb-card.lv5 .hb-card-lv { background: #FFC233; color: #1E2756; }
.hb-card.lv0 .hb-card-lv { background: transparent; color: var(--muted); font-weight: 600; }
.hb-card-next { font-size: .78rem; color: var(--muted); line-height: 1.3; }
.hb-mini { display: block; width: 80%; height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.hb-mini i { display: block; height: 100%; border-radius: inherit; background: var(--hb, var(--lilac)); }
.hb-mini.light { width: 100%; max-width: 320px; background: rgba(255, 255, 255, .22); }
.hb-mini.light i { background: linear-gradient(90deg, #FFC233, #F2644F); }

/* Fiche détaillée d'un badge */
.hb-detail { display: grid; gap: 12px; }
.hb-detail p { margin: 0; }
.hb-detail-top { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: center; }
@media (max-width: 480px) { .hb-detail-top { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; } .hb-detail-top .pill { justify-self: center; } }
.hb-detail .pill { justify-self: start; }
.hb-detail-n b { font-family: var(--font-display); font-size: 1.8rem; color: var(--ink); }
.hb-h3 { font-size: 1.12rem; margin: 6px 0 0; }
.hb-how { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hb-how li { display: flex; gap: 10px; align-items: center; }
.hb-how-ic { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--hb) 18%, var(--surface)); color: var(--fg); }
.hb-how-ic .ic { width: 20px; height: 20px; }
.hb-levels { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.hb-levels li { display: grid; justify-items: center; align-content: start; gap: 2px; padding: 6px 2px 8px; border-radius: 14px; text-align: center; min-width: 0; }
.hb-levels li.next { background: var(--tint-lilac); }
.hb-levels .hb-art { width: 100%; max-width: 66px; }
.hb-levels.intro { gap: 10px; }
.hb-levels.intro .hb-art { max-width: 124px; }
.hb-lv-nm { font-weight: 700; font-size: .8rem; line-height: 1.15; overflow-wrap: anywhere; }
.hb-levels.intro .hb-lv-nm { font-family: var(--font-display); font-size: 1rem; color: var(--ink); }
.hb-lv-s { font-size: .72rem; color: var(--muted); }
.hb-lv-st { display: inline-flex; align-items: center; gap: 3px; font-size: .72rem; font-weight: 600; color: var(--mint-txt); }
.hb-levels li.next .hb-lv-st { color: var(--lilac-txt); }
.hb-levels li:not(.got):not(.next) .hb-lv-st { color: var(--muted); }
.hb-lv-st .ic { width: 14px; height: 14px; }
.hb-src { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hb-src li { display: flex; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 12px; background: var(--surface-2); }
.hb-src .grow { flex: 1; min-width: 0; }
.hb-src b { font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); }

/* Tuile et bandeau de l'accueil enfant */
.tile.hb-tile .hb-art.ic { width: 66px; height: 66px; padding: 0; margin: -6px 0 -4px -6px; border-radius: 0; background: none; box-shadow: none; filter: drop-shadow(0 3px 4px rgba(15, 19, 41, .25)); }
.hb-banner { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 18px 14px 14px; border-radius: var(--radius-lg); text-decoration: none; color: #fff; background: radial-gradient(circle at 10% 20%, #3E3C9E 0, rgba(62, 60, 158, 0) 46%), linear-gradient(115deg, #1E2756 0%, #2B2C77 60%, #3A2F86 100%); box-shadow: 0 10px 24px -14px rgba(30, 39, 86, .7); transition: transform .2s var(--ease-bounce), box-shadow .2s ease; }
.hb-banner::before { content: ""; position: absolute; z-index: -1; inset: 0; background-image: radial-gradient(circle, rgba(255, 201, 77, .9) 0 1.4px, transparent 2px), radial-gradient(circle, rgba(255, 255, 255, .55) 0 1px, transparent 1.6px); background-size: 74px 58px, 46px 40px; background-position: 12px 8px, 30px 22px; opacity: .55; }
.hb-banner:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -14px rgba(30, 39, 86, .8); }
.hb-banner:focus-visible { outline: 4px solid var(--focus); outline-offset: 3px; }
.hb-banner-pip { display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 227, 138, .35), rgba(255, 255, 255, .06) 70%); }
.hb-banner-pip .mascot, .hb-banner-pip svg { display: block; }
.hb-banner-txt { display: grid; gap: 6px; min-width: 0; }
.hb-banner-txt small { font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #FFD66B; }
.hb-banner-txt b { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.15rem, 2.6vw, 1.4rem); line-height: 1.2; color: #fff; }
.hb-banner-badge .hb-art { width: 96px; height: 96px; }
@media (max-width: 560px) {
  .hb-banner { grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 12px 14px 12px 10px; }
  .hb-banner-pip { width: 70px; height: 70px; }
  .hb-banner-pip svg { width: 64px !important; height: 64px !important; }
  .hb-banner-badge { position: absolute; z-index: -1; right: -14px; bottom: -18px; opacity: .35; }
  .hb-banner-badge .hb-art { width: 92px; height: 92px; filter: none; }
}

/* Tableau de bord, aperçu du profil, choix de l'enfant */
.hb-dashrow { align-items: flex-start; flex-wrap: wrap; }
.hb-dashrow .grow { flex: 1 1 220px; min-width: 0; }
.hb-dashrow > .btn { margin-left: auto; }
.hb-dashrow .hb-minibadge .hb-art { width: 36px; height: 36px; }
.hb-dash-pip { flex: none; line-height: 0; }
.hb-minis { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.hb-minibadge { line-height: 0; }
.hb-minibadge .hb-art { width: 40px; height: 40px; filter: none; }
.hb-apercu .hb-minis { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
@media (max-width: 560px) { .hb-apercu .hb-minis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hb-apercu .hb-minibadge .hb-art { width: 100%; max-width: 64px; height: auto; margin: 0 auto; }
.hb-ap-top { display: flex; gap: 14px; align-items: center; }
.hb-ap-top > svg { flex: none; }
.hb-ap-rank { font-family: var(--font-display); font-weight: 800; font-size: 1.45rem; line-height: 1.1; color: var(--ink); margin: 0; }
.hb-pick { justify-items: center; text-align: center; }
.hb-pick-art { width: 150px !important; height: 150px; }

/* Célébration d'un nouveau niveau : carte non bloquante */
.hb-cele { position: fixed; z-index: 93; left: max(16px, env(safe-area-inset-left, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); width: min(390px, calc(100vw - 32px)); display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px 46px 14px 12px; border-radius: 26px; background: var(--surface); color: var(--fg); box-shadow: var(--shadow-lg), 0 0 0 3px var(--spark); animation: hb-in .6s var(--ease-bounce) both; }
.hb-cele.out { opacity: 0; transform: translateY(14px) scale(.96); transition: opacity .35s ease, transform .35s ease; }
.hb-cele-art { position: relative; width: 104px; height: 104px; perspective: 700px; }
.hb-cele-art .hb-art { position: relative; width: 104px; height: 104px; animation: hb-flip 1.15s .12s cubic-bezier(.2, .85, .3, 1.15) both; }
.hb-cele-art::after { content: ""; position: absolute; inset: 14% 16% 22%; border-radius: 50%; background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .85) 50%, transparent 62%) no-repeat; background-size: 260% 100%; background-position: 140% 0; pointer-events: none; animation: hb-shine 1.2s 1.15s ease-out both; }
.hb-cele-glow { position: absolute; inset: -10px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 201, 77, .75), rgba(255, 201, 77, 0) 68%); animation: hb-glow 1.6s ease-in-out .5s 3 both; }
.hb-cele-body { display: grid; gap: 4px; min-width: 0; }
.hb-cele-body p { margin: 0; }
.hb-cele-k { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.hb-cele-t { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; line-height: 1.15; color: var(--ink); }
.hb-cele-s { font-size: .92rem; line-height: 1.35; }
.hb-cele-body .btn { justify-self: start; margin-top: 6px; }
.hb-cele-x { position: absolute; top: 6px; right: 6px; }
@media (max-width: 860px) {
  .hb-cele { left: 16px; right: 16px; width: auto; max-width: 440px; margin: 0 auto; bottom: auto; top: calc(var(--header-h) + 10px + env(safe-area-inset-top, 0px)); }
}
@media (max-width: 420px) { .hb-cele { grid-template-columns: 82px minmax(0, 1fr); gap: 10px; } .hb-cele-art, .hb-cele-art .hb-art { width: 82px; height: 82px; } .hb-cele-t { font-size: 1.15rem; } }

/* Petites animations douces (coupées par le mode calme et par prefers-reduced-motion) */
.hb-rankart .hb-float { animation: hb-float 4.5s ease-in-out infinite; }
.hb-rankart.s4 .hb-rays, .hb-rankart.s5 .hb-rays { transform-origin: 120px 120px; animation: hb-spin 80s linear infinite; }
.hb-rankart .hb-tw { transform-box: fill-box; transform-origin: center; animation: hb-tw 3.2s ease-in-out infinite; }
.hb-rankart .hb-tw:nth-of-type(2n) { animation-delay: 1.1s; }
.hb-rankart .hb-tw:nth-of-type(3n) { animation-delay: 2s; }
@keyframes hb-in { from { opacity: 0; transform: translateY(24px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes hb-flip { 0% { transform: rotateY(-540deg) scale(.35); opacity: 0; } 15% { opacity: 1; } 72% { transform: rotateY(14deg) scale(1.08); } 100% { transform: none; } }
@keyframes hb-shine { from { background-position: 140% 0; opacity: 1; } to { background-position: -40% 0; opacity: 0; } }
@keyframes hb-glow { 0%, 100% { transform: scale(.92); opacity: .55; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes hb-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes hb-spin { to { transform: rotate(360deg); } }
@keyframes hb-tw { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.7); opacity: .6; } }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  .ldq-cell.new .ldq-stk, .ldq-pop, .ldq-pop .ldq-stk, .ldq-dcell.hint2 { animation: none !important; }
  .hb-cele, .hb-cele-art .hb-art, .hb-cele-art::after, .hb-cele-glow, .hb-rankart .hb-float, .hb-rankart .hb-rays, .hb-rankart .hb-tw { animation: none !important; }
  .hb-cele-art::after { display: none; }
  .hb-card:hover .hb-art, .hb-card:hover, .hb-banner:hover { transform: none; }
}

/* ===== publics.css ===== */
/* ==========================================================================
   Ébulle — espaces par public, FAQ, recherche globale, nouveautés, fiches
   Couleur par public : --pc (couleur), --pt (teinte de fond), --px (texte
   sur fond clair ou teinté), --pon (icône posée sur --pc). Tout est dérivé
   des jetons de app.css, en clair comme en sombre.
   ========================================================================== */
:root { --pp-on-spark: var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --pp-on-spark: var(--on-ink); } }
:root[data-theme="dark"] { --pp-on-spark: var(--on-ink); }

.pub-enfants { --pc: var(--spark); --pt: var(--tint-spark); --px: var(--ink); --pon: var(--pp-on-spark); }
.pub-ados { --pc: var(--lilac); --pt: var(--tint-lilac); --px: var(--lilac-txt); --pon: var(--on-ink); }
.pub-adultes { --pc: var(--mint); --pt: var(--tint-mint); --px: var(--mint-txt); --pon: var(--on-ink); }
.pub-parents { --pc: var(--coral); --pt: var(--tint-coral); --px: var(--coral-txt); --pon: var(--on-ink); }
.pub-proches { --pc: var(--sky); --pt: var(--tint-sky); --px: var(--sky-txt); --pon: var(--on-ink); }
.pub-enseignants { --pc: color-mix(in srgb, var(--sky) 50%, var(--mint)); --pt: color-mix(in srgb, var(--tint-sky) 50%, var(--tint-mint)); --px: color-mix(in srgb, var(--sky-txt) 50%, var(--mint-txt)); --pon: var(--on-ink); }
.pub-professionnels { --pc: color-mix(in srgb, var(--coral) 45%, var(--lilac)); --pt: color-mix(in srgb, var(--tint-coral) 45%, var(--tint-lilac)); --px: color-mix(in srgb, var(--coral-txt) 45%, var(--lilac-txt)); --pon: var(--on-ink); }

/* Pastilles de couleur génériques */
.ps-spark-bg { background: var(--spark); color: var(--pp-on-spark); }
.ps-coral-bg { background: var(--coral); color: var(--on-ink); }
.ps-mint-bg { background: var(--mint); color: var(--on-ink); }
.ps-lilac-bg { background: var(--lilac); color: var(--on-ink); }
.ps-sky-bg { background: var(--sky); color: var(--on-ink); }

/* ---------- Illustrations ---------- */
.ps { display: block; width: 100%; height: auto; overflow: visible; }
.ps .ps-bg { fill: var(--surface); opacity: .72; }
.ps .ps-ring { fill: none; stroke: var(--pc, var(--line)); stroke-opacity: .4; stroke-width: 2; stroke-dasharray: 3 9; stroke-linecap: round; }
.ps .ps-main { fill: var(--pc, var(--lilac)); }
.ps .ps-i-main { stroke: var(--pon, var(--on-ink)); }
.ps .ps-i { stroke: var(--on-ink); }
.ps .ps-i-dark { stroke: var(--pp-on-spark); }
.ps .ps-spark { fill: var(--spark); }
.ps .ps-coral { fill: var(--coral); }
.ps .ps-mint { fill: var(--mint); }
.ps .ps-lilac { fill: var(--lilac); }
.ps .ps-sky { fill: var(--sky); }
@keyframes pp-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.pp-hero .ps .ps-pip { animation: pp-float 3.6s ease-in-out infinite; }

/* ---------- Titres de section ---------- */
.pp-sh { display: flex; align-items: center; gap: 12px; }
.pp-sh-ic { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; flex: none; background: var(--pt, var(--tint-lilac)); color: var(--px, var(--lilac-txt)); }
.pp-sh h2, .pp-h2 { font-size: 1.6rem; }
.pp-h3 { font-size: 1.25rem; display: flex; gap: 8px; align-items: center; }
.pp-h3 .ic { color: var(--px, var(--lilac-txt)); }

/* ---------- Cartes « Ébulle pour… » (accueil et page de choix) ---------- */
.pp-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 960px) { .pp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pp-card { display: grid; gap: 6px; align-content: start; padding: 14px 16px 18px; border-radius: var(--radius-lg); background: var(--pt, var(--surface)); color: var(--fg); text-decoration: none; border: 2px solid transparent; transition: transform .15s ease, border-color .15s ease; min-width: 0; }
a.pp-card:hover { transform: translateY(-2px); border-color: var(--pc); }
.pp-card h3, .pp-card h2 { font-size: 1.22rem; }
.pp-card p { font-size: .9rem; color: var(--muted); }
.pp-card .ps-mini { max-width: 190px; margin: -2px auto 4px; }
.pp-search { background: var(--surface); border: 2px dashed var(--line); gap: 10px; }
.pp-search-ic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--tint-lilac); color: var(--lilac-txt); }
.pp-search a { font-weight: 600; font-size: .92rem; display: inline-flex; gap: 6px; align-items: center; }
.pp-sform { display: grid; gap: 8px; }
.pp-sform .input { min-height: 44px; }
.pp-cards-big .pp-card { padding: 18px 20px 20px; gap: 8px; }
.pp-cards-big .pp-card h2 { font-size: 1.45rem; }
.pp-cards-big .pp-card ul { margin: 0; padding-left: 1.1em; display: grid; gap: 3px; font-size: .9rem; }
.pp-go { display: inline-flex; gap: 6px; align-items: center; font-weight: 700; color: var(--px); margin-top: 4px; }
@media (max-width: 620px) {
  .pp-cards-big { grid-template-columns: minmax(0, 1fr); }
  .pp-cards-big .pp-card .ps-mini { max-width: 170px; }
}

/* ---------- Page d'un public ---------- */
.pp-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 24px; align-items: center; padding: 28px 32px; border-radius: var(--radius-lg); background: var(--pt); }
.pp-hero-txt { display: grid; gap: 14px; align-content: center; min-width: 0; }
.pp-hero .eyebrow { color: var(--px); }
.pp-hero h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); line-height: 1.05; }
.pp-hero .lead { font-size: 1.12rem; max-width: 56ch; color: var(--fg); }
.pp-hero-art { width: 100%; max-width: 380px; justify-self: center; }
.pp-bulle { max-width: 46ch; justify-self: start; }
.pp-kidpage .pp-hero .lead { font-size: 1.22rem; }
@media (max-width: 820px) {
  .pp-hero { grid-template-columns: minmax(0, 1fr); padding: 20px 18px 24px; gap: 12px; }
  .pp-hero-art { order: -1; max-width: 250px; }
}

.pp-needs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 960px) { .pp-needs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .pp-needs { grid-template-columns: minmax(0, 1fr); } }
.pp-need { display: grid; gap: 8px; align-content: start; padding: 18px 20px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--pc); min-width: 0; }
.pp-need-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--pt); color: var(--px); }
.pp-need h3 { font-size: 1.15rem; }
.pp-need p { color: var(--muted); font-size: .95rem; }
.pp-kidpage .pp-need h3 { font-size: 1.25rem; }
.pp-kidpage .pp-need p { font-size: 1.02rem; }
.pp-more { display: block; font-weight: 600; color: var(--px, var(--sky-txt)); text-decoration: none; justify-self: start; text-wrap: pretty; }
.pp-more .ic { margin-left: 2px; }
.pp-more:hover { text-decoration: underline; }

.pp-path { list-style: none; margin: 0; padding: 0; display: grid; counter-reset: pp; }
.pp-path > li { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; padding-bottom: 16px; counter-increment: pp; }
.pp-path > li::before { content: counter(pp); width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--pt); color: var(--px); border: 2px solid var(--pc); font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; position: relative; z-index: 1; }
.pp-path > li::after { content: ""; position: absolute; left: 23px; top: 50px; bottom: 0; width: 2px; background: var(--line); }
.pp-path > li:last-child { padding-bottom: 0; }
.pp-path > li:last-child::after { display: none; }
.pp-step-body { display: grid; gap: 6px; padding: 14px 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); min-width: 0; }
.pp-step-body h3 { font-size: 1.15rem; }
.pp-step-body p { color: var(--muted); }
.pp-step-body .row { gap: 8px; margin-top: 4px; }
@media (max-width: 520px) {
  .pp-path > li { grid-template-columns: 38px minmax(0, 1fr); gap: 10px; }
  .pp-path > li::before { width: 38px; height: 38px; font-size: 1.1rem; }
  .pp-path > li::after { left: 18px; top: 40px; }
}

.pp-res { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.pp-res-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .pp-res-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pp-res-3 { grid-template-columns: minmax(0, 1fr); } }
.pp-res-item { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--fg); transition: border-color .15s ease, transform .15s ease; min-width: 0; }
.pp-res-item:hover { border-color: var(--pc, var(--lilac)); transform: translateY(-1px); }
.pp-res-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--pt, var(--tint-lilac)); color: var(--px, var(--lilac-txt)); }
.pp-res-txt { display: grid; gap: 2px; min-width: 0; }
.pp-res-txt strong { font-weight: 600; color: var(--ink); }
.pp-res-txt span { font-size: .88rem; color: var(--muted); }

.pp-tips { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.pp-tip { display: grid; gap: 8px; align-content: start; padding: 18px; border-radius: 22px; background: var(--surface); border: 2px solid var(--line); }
.pp-tip-ic { width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; }
.pp-tip-ic .ic { width: 26px; height: 26px; }
.pp-tip h3 { font-size: 1.3rem; }
.pp-tip p { font-size: 1.02rem; }

.pp-help { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.pp-num { display: grid; gap: 4px; align-content: start; padding: 16px 18px; border-radius: var(--radius-lg); background: var(--tint-mint); }
.pp-num:nth-child(2) { background: var(--tint-sky); }
.pp-num:nth-child(3) { background: var(--tint-lilac); }
.pp-num:nth-child(4) { background: var(--tint-coral); }
.pp-num b { font-family: var(--font-display); font-size: 1.75rem; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.pp-num span { font-size: .9rem; color: var(--muted); }

.pp-col { padding: 20px 22px; border-radius: var(--radius-lg); display: grid; gap: 10px; align-content: start; min-width: 0; }
.pp-yes { background: var(--tint-mint); }
.pp-no { background: var(--tint-coral); }
.pp-col h3 { font-size: 1.2rem; display: flex; gap: 8px; align-items: center; }
.pp-yes h3 .ic { color: var(--mint-txt); }
.pp-no h3 .ic { color: var(--coral-txt); }
.pp-col ul, .pp-list { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.pp-quote { margin: 0; padding: 14px 18px; border-left: 4px solid var(--pc, var(--lilac)); background: var(--surface-2); border-radius: 0 var(--radius) var(--radius) 0; font-style: italic; }

.pp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 7px 14px; border-radius: 999px; border: 2px solid var(--line); background: var(--surface); color: var(--fg); text-decoration: none; font-weight: 600; font-size: .92rem; }
.pp-chip:hover { border-color: var(--pc, var(--lilac)); background: var(--pt, var(--surface-2)); }
.pp-chip .ic { width: 1em; height: 1em; color: var(--muted); }
.pp-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--pc); flex: none; }

/* ---------- Filtres (FAQ, fiches) et champ de recherche ---------- */
.pp-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-filter { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 14px; border-radius: 999px; border: 2px solid var(--line); background: var(--surface); color: var(--fg); font-weight: 600; font-size: .9rem; cursor: pointer; text-align: left; }
.pp-filter .ic { width: 1.05em; height: 1.05em; }
.pp-filter .n { font-variant-numeric: tabular-nums; font-size: .78rem; color: var(--muted); background: var(--surface-2); border-radius: 999px; padding: 0 7px; min-width: 1.7em; text-align: center; }
.pp-filter:hover { background: var(--surface-2); }
.pp-filter[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.pp-filter[aria-pressed="true"] .n { background: color-mix(in srgb, var(--on-ink) 20%, transparent); color: var(--on-ink); }
.pp-filter.empty:not([aria-pressed="true"]) { opacity: .6; }
.pp-field { position: relative; }
.pp-field > .ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.pp-field .input { padding-left: 44px; }
.faq-list mark, .rx-page mark { background: color-mix(in srgb, var(--spark) 48%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }

/* ---------- FAQ ---------- */
.faq-tools { display: grid; gap: 16px; margin-bottom: 28px; }
.faq-tools .field { max-width: 560px; }
@media (max-width: 620px) {
  .faq-tools .pp-filters { flex-wrap: nowrap; overflow-x: auto; margin: 0 -22px; padding: 2px 22px 8px; scrollbar-width: thin; }
  .faq-tools .pp-filter { flex: none; }
}
.faq-gh { display: flex; align-items: center; gap: 12px; font-size: 1.45rem; margin-bottom: 12px; }
.faq-gic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.faq-q summary { line-height: 1.4; }
.faq-a { color: var(--fg); }
.faq-a p { margin: 0; }
.faq-voir { display: flex; gap: 8px; align-items: flex-start; font-size: .92rem; }
.faq-voir .ic { color: var(--muted); margin-top: 3px; }
.faq-end { margin-top: 36px; }

/* ---------- Recherche globale ---------- */
.rx-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; max-width: 780px; }
.rx-field .input { min-height: 56px; font-size: 1.1rem; }
.rx-form .btn { min-height: 56px; }
@media (max-width: 560px) { .rx-form { grid-template-columns: minmax(0, 1fr); } .rx-form .btn { min-height: 48px; } }
.rx-help { margin-top: 8px; }
.rx-status { margin: 18px 0 14px; font-weight: 600; }
.rx-status:empty { margin: 8px 0; }
.rx-groups { display: grid; gap: 30px; }
.rx-gh { display: flex; gap: 10px; align-items: center; font-size: 1.35rem; margin-bottom: 10px; }
.rx-gh > .ic { color: var(--lilac-txt); }
.rx-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rx-item { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--fg); transition: border-color .15s ease; }
.rx-item:hover { border-color: var(--lilac); }
.rx-item > .ic { margin-left: auto; color: var(--muted); align-self: center; }
.rx-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--tint-lilac); color: var(--lilac-txt); flex: none; }
.rx-body { display: grid; gap: 4px; min-width: 0; flex: 1; }
.rx-t { font-weight: 600; font-size: 1.05rem; color: var(--ink); }
.rx-s { font-size: .92rem; color: var(--muted); overflow-wrap: anywhere; }
.rx-m { font-size: .8rem; color: var(--muted); font-weight: 600; }
.rx-group > .btn { margin-top: 10px; }
@media (max-width: 520px) { .rx-ic { display: none; } .rx-item { padding: 12px 14px; } }

/* ---------- Nouveautés ---------- */
.nw-intro { display: flex; gap: 16px; align-items: center; padding: 16px 20px; border-radius: var(--radius-lg); background: var(--surface-2); margin-bottom: 30px; }
.nw-intro > div { display: grid; gap: 2px; }
.nw-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 30px; }
.nw-day { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 24px; }
.nw-date { font-size: 1.2rem; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; align-self: start; position: sticky; top: calc(var(--header-h) + 16px + env(safe-area-inset-top, 0px)); }
.nw-items { list-style: none; margin: 0; padding: 0 0 0 26px; display: grid; gap: 12px; border-left: 2px solid var(--line); }
.nw-item { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 16px 18px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); }
.nw-item::before { content: ""; position: absolute; left: -35px; top: 26px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); border: 3px solid var(--lilac); }
.nw-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; }
.nw-item h3 { font-size: 1.15rem; }
@media (max-width: 720px) {
  .nw-day { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .nw-date { position: static; }
  .nw-items { padding-left: 18px; }
  .nw-item { grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 14px; }
  .nw-item::before { left: -27px; }
  .nw-ic { width: 36px; height: 36px; border-radius: 12px; }
}

/* ---------- Fiches pratiques ---------- */
.fx-tabs button { display: inline-flex; align-items: center; gap: 8px; }
.fx-n { font-size: .78rem; background: var(--surface-2); color: var(--muted); border-radius: 999px; padding: 1px 8px; font-variant-numeric: tabular-nums; }
.fx-tabs [aria-selected="true"] .fx-n { background: var(--tint-lilac); color: var(--lilac-txt); }
.fx-panel { gap: 16px; }
.fx-panel:focus { outline: none; }
.fx-panel:focus-visible { outline: 3px solid var(--focus); outline-offset: 6px; }
.fx-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; align-items: baseline; }
.fx-head a { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; text-decoration: none; }
.fx-head a:hover { text-decoration: underline; }
.fx-meta { gap: 6px; margin-top: 2px; }
.fx-meta .pill .ic { width: 1em; height: 1em; }
.pub-pill { background: var(--pt); color: var(--px); }
.fx-space { text-decoration: none; color: var(--fg); background: var(--pt); }
.fx-space strong { display: flex; gap: 8px; align-items: center; color: var(--px); }
.g-focus { border-color: var(--lilac); box-shadow: 0 0 0 3px var(--tint-lilac); }

/* Encadrés dans les fiches */
.fiche-aide { background: var(--tint-lilac); }
.fiche-aide .ic { color: var(--lilac-txt); }
.fiche-aide ul { margin: 0; padding-left: 1.1em; display: grid; gap: 4px; }
.fiche-ensemble { padding: 18px 20px; border-radius: var(--radius-lg); background: var(--tint-spark); border: 2px dashed color-mix(in srgb, var(--spark) 70%, transparent); display: grid; gap: 10px; font-size: 1.05rem; }
.fiche-ensemble ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }

/* Ébulle pour… : mouvements continus, amples et indépendants des bulles.
   translate est indépendant des transform SVG de positionnement des pictogrammes. */
.pp-cards .pp-card .ps-mini .ps-b,
.pp-cards .pp-card .ps-mini .ps-b + .ps-i {
  animation: ebulle-orbit-a 3.8s ease-in-out infinite;
  animation-delay: -1.1s;
}
.pp-cards .pp-card .ps-mini .ps-b.ps-lilac,
.pp-cards .pp-card .ps-mini .ps-b.ps-lilac + .ps-i {
  animation-name: ebulle-orbit-b;
  animation-duration: 5.1s;
  animation-delay: -2.4s;
}
.pp-cards .pp-card .ps-mini .ps-mint,
.pp-cards .pp-card .ps-mini .ps-sky,
.pp-cards .pp-card .ps-mini .ps-coral:not(.ps-b),
.pp-cards .pp-card .ps-mini .ps-lilac:not(.ps-b),
.pp-cards .pp-card .ps-mini .ps-spark {
  animation: ebulle-orbit-c 3.2s ease-in-out infinite;
  animation-delay: -1.8s;
}
.pp-cards .pp-card .ps-mini .ps-sky,
.pp-cards .pp-card .ps-mini .ps-spark {
  animation-name: ebulle-orbit-d;
  animation-duration: 4.4s;
  animation-delay: -3.1s;
}
.pp-cards .pp-card:nth-child(2n) .ps-mini .ps-b,
.pp-cards .pp-card:nth-child(2n) .ps-mini .ps-b + .ps-i { animation-duration: 4.6s; animation-delay: -2.7s; }
.pp-cards .pp-card:nth-child(3n) .ps-mini .ps-b,
.pp-cards .pp-card:nth-child(3n) .ps-mini .ps-b + .ps-i { animation-duration: 3.5s; animation-delay: -1.9s; }
@keyframes ebulle-orbit-a {
  0%,100% { translate: 0 0; }
  25% { translate: 10px -9px; }
  50% { translate: 16px 3px; }
  75% { translate: 5px 10px; }
}
@keyframes ebulle-orbit-b {
  0%,100% { translate: 0 0; }
  25% { translate: -13px 6px; }
  50% { translate: -17px -8px; }
  75% { translate: -5px -13px; }
}
@keyframes ebulle-orbit-c {
  0%,100% { translate: 0 0; }
  30% { translate: -9px -13px; }
  65% { translate: 7px -17px; }
}
@keyframes ebulle-orbit-d {
  0%,100% { translate: 0 0; }
  30% { translate: 12px 9px; }
  65% { translate: -8px 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .pp-cards .pp-card .ps-mini .ps-b,
  .pp-cards .pp-card .ps-mini .ps-b + .ps-i,
  .pp-cards .pp-card .ps-mini .ps-mint,
  .pp-cards .pp-card .ps-mini .ps-sky,
  .pp-cards .pp-card .ps-mini .ps-coral,
  .pp-cards .pp-card .ps-mini .ps-lilac,
  .pp-cards .pp-card .ps-mini .ps-spark { animation: none !important; }
}


/* ===== forces.css ===== */
/* ==========================================================================
   Ébulle — « Forces et défis au quotidien » et « Ils et elles en parlent »
   Couleur du sujet : --fc (accent), --ft (teinte), --fx (texte sur teinte).
   « Ce qui peut aider » sur fond menthe, « Ce qui peut coûter » sur fond ciel,
   l'idée à essayer sur fond étincelle. Clair et sombre via les jetons.
   ========================================================================== */
.fd-c-coral { --fc: var(--coral); --ft: var(--tint-coral); --fx: var(--coral-txt); }
.fd-c-lilac { --fc: var(--lilac); --ft: var(--tint-lilac); --fx: var(--lilac-txt); }
.fd-c-mint { --fc: var(--mint); --ft: var(--tint-mint); --fx: var(--mint-txt); }

.fd-page { display: grid; gap: clamp(40px, 5vw, 56px); }
.fd-page > .pagehead, .cb-page > .pagehead { margin-bottom: 0; }
.fd-h2 { font-size: 1.6rem; }
.fd-h3 { font-size: 1.3rem; display: flex; gap: 10px; align-items: center; }
.fd-ul { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; }
.fd-ul li::marker { color: var(--fx, var(--lilac-txt)); }

/* ---------- Choix du sujet ---------- */
.fd-subjects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.fd-page > .fd-subjects { margin-top: calc(-1 * clamp(20px, 3vw, 32px)); }
.fd-subj { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: var(--radius-lg); background: var(--surface); border: 2px solid var(--line); text-decoration: none; color: var(--fg); min-width: 0; transition: border-color .15s ease, transform .15s var(--ease), background .15s ease; }
.fd-subj:hover { border-color: var(--fc); transform: translateY(-1px); }
.fd-subj:focus-visible { outline: none; box-shadow: var(--ring); }
.fd-subj[aria-current="page"] { background: var(--ft); border-color: var(--fc); }
.fd-subj-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; flex: none; background: var(--fc); color: var(--on-accent); }
.fd-subj-txt { display: grid; gap: 2px; min-width: 0; }
.fd-subj-txt strong { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--ink); line-height: 1.15; }
.fd-subj-txt small { color: var(--muted); font-size: .85rem; line-height: 1.35; }
@media (max-width: 700px) {
  .fd-subjects { gap: 8px; }
  .fd-subj { flex-direction: column; text-align: center; padding: 10px 6px; gap: 6px; }
  .fd-subj-ic { width: 38px; height: 38px; border-radius: 12px; }
  .fd-subj-txt small { display: none; }
  .fd-subj-txt strong { font-size: .98rem; }
}

/* ---------- Encadrés d'introduction ---------- */
.fd-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 16px; align-items: stretch; }
@media (max-width: 860px) { .fd-intro { grid-template-columns: minmax(0, 1fr); } }
.fd-fair { padding: 20px 22px; border-radius: var(--radius-lg); background: var(--surface-2); display: grid; gap: 12px; align-content: start; min-width: 0; }
.fd-fair-head { display: flex; gap: 12px; align-items: center; }
.fd-fair-head .mascot { width: 60px; height: 60px; }
.fd-fair h2, .fd-research h2 { font-size: 1.35rem; }
.fd-research { padding: 20px 22px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); display: grid; gap: 12px; align-content: start; box-shadow: var(--shadow-xs); min-width: 0; }
.fd-research h2 { display: flex; gap: 10px; align-items: center; }
.fd-research h2 .ic { color: var(--fx); }
.fd-research ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.fd-research li { padding-left: 14px; border-left: 3px solid var(--fc); font-size: .95rem; }
.fd-ref { display: inline-block; font-size: .78rem; font-weight: 600; color: var(--muted); background: var(--surface-2); border-radius: 999px; padding: 0 8px; }

/* ---------- Domaines ---------- */
.fd-domains { display: grid; gap: 20px; }
.fd-domains-head { display: flex; gap: 16px; align-items: flex-start; }
.fd-big-ic { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; flex: none; background: var(--fc); color: var(--on-accent); }
.fd-big-ic .ic { width: 28px; height: 28px; }
.fd-lead { font-size: 1.08rem; max-width: 72ch; }
@media (max-width: 520px) { .fd-big-ic { display: none; } }
.fd-jump { display: flex; flex-wrap: wrap; gap: 8px; }
.fd-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 14px; border-radius: 999px; border: 2px solid var(--line); background: var(--surface); color: var(--fg); font-weight: 600; font-size: .9rem; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.fd-chip .ic { width: 1.05em; height: 1.05em; color: var(--fx); }
.fd-chip:hover { border-color: var(--fc); background: var(--ft); }
@media (max-width: 620px) {
  .fd-jump { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 8px; scrollbar-width: thin; }
  .fd-chip { flex: none; }
}

.fd-cards { display: grid; gap: 16px; }
.fd-card { display: grid; gap: 14px; padding: 20px 22px 22px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--fc); box-shadow: var(--shadow-xs); scroll-margin-top: calc(var(--header-h) + 20px); min-width: 0; }
.fd-card-h { display: flex; gap: 12px; align-items: center; }
.fd-card-ic { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; flex: none; background: var(--ft); color: var(--fx); }
.fd-card-h h3 { font-size: 1.35rem; }
.fd-card-body { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.fd-col { display: grid; gap: 8px; align-content: start; padding: 14px 16px; border-radius: var(--radius); min-width: 0; }
.fd-plus { background: var(--tint-mint); }
.fd-moins { background: var(--tint-sky); }
.fd-col h4 { display: flex; gap: 8px; align-items: center; font-size: 1.02rem; }
.fd-plus h4 .ic { color: var(--mint-txt); }
.fd-moins h4 .ic { color: var(--sky-txt); }
.fd-col ul { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; font-size: .95rem; }
.fd-side { display: grid; gap: 10px; align-content: start; min-width: 0; }
.fd-tip { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--radius); background: var(--tint-spark); border: 2px dashed color-mix(in srgb, var(--spark) 70%, transparent); }
.fd-tip-ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--spark); color: var(--pp-on-spark, var(--ink)); }
.fd-tip-ic .ic { width: 18px; height: 18px; }
.fd-tip p { font-size: .95rem; }
.fd-tip strong { display: block; font-family: var(--font-display); font-size: 1.02rem; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
details.fd-ex { border-radius: var(--radius); background: var(--surface-2); }
details.fd-ex summary { cursor: pointer; list-style: none; display: flex; gap: 8px; align-items: center; min-height: 44px; padding: 8px 14px; font-weight: 600; font-size: .92rem; border-radius: var(--radius); }
details.fd-ex summary::-webkit-details-marker { display: none; }
details.fd-ex summary .ic { color: var(--fx); }
details.fd-ex summary em { font-weight: 400; color: var(--muted); }
details.fd-ex summary::after { content: "+"; margin-left: auto; flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--surface); font-family: var(--font-display); font-size: 1.15rem; line-height: 1; color: var(--fx); }
details.fd-ex[open] summary::after { content: "–"; }
details.fd-ex > p { padding: 0 14px 14px; font-size: .93rem; }
@media (max-width: 1060px) { .fd-card-body { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fd-side { grid-column: 1 / -1; } }
@media (max-width: 600px) { .fd-card { padding: 16px; } .fd-card-body { grid-template-columns: minmax(0, 1fr); } .fd-card-h h3 { font-size: 1.2rem; } }

/* ---------- Version enfant (page adulte et espace enfant) ---------- */
.fd-kidv { display: grid; gap: 18px; padding: clamp(20px, 3vw, 32px); border-radius: var(--radius-xl); background: var(--warm-panel); border: 1px solid color-mix(in srgb, var(--spark) 40%, transparent); }
.fd-kidv-head { display: flex; gap: 14px; align-items: center; }
.fd-kidv-head h2 { font-size: clamp(1.35rem, 2.6vw, 1.7rem); }
@media (max-width: 520px) { .fd-kidv-head { flex-direction: column; align-items: flex-start; } }
.fd-kgroup { display: grid; gap: 10px; }
.fd-kh { display: flex; gap: 10px; align-items: center; font-size: 1.25rem; }
.fd-kh .ic { color: var(--fx); }
.fd-khint { color: var(--muted); margin-top: -4px; }
.fd-kgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 520px) { .fd-kgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 780px) { .fd-kgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1060px) { .fd-kgrid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.fd-kgrid > li { display: grid; min-width: 0; }
.fd-kcard { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ic t" "ic d"; gap: 2px 12px; align-items: start; align-content: start; padding: 14px 16px; border-radius: 20px; background: var(--surface); border: 2px solid var(--line); text-align: left; color: var(--fg); width: 100%; min-width: 0; }
button.fd-kcard { cursor: pointer; padding-right: 42px; transition: border-color .15s ease, background .15s ease, transform .2s var(--ease-bounce); }
button.fd-kcard:hover { border-color: var(--fc); }
button.fd-kcard:active { transform: scale(.98); }
.fd-kcard-ic { grid-area: ic; width: 46px; height: 46px; border-radius: 16px; display: grid; place-items: center; }
.fd-kcard-ic .ic { width: 24px; height: 24px; }
@media (min-width: 520px) {
  .fd-kcard { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ic" "t" "d"; gap: 8px; padding: 16px; }
  .fd-kcard-t { margin-top: 2px; }
}
.fd-k-plus .fd-kcard-ic { background: var(--spark); color: var(--pp-on-spark, var(--ink)); }
.fd-k-moins .fd-kcard-ic { background: var(--tint-sky); color: var(--sky-txt); }
.fd-kcard-t { grid-area: t; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--ink); line-height: 1.2; }
.fd-kcard-d { grid-area: d; font-size: .95rem; }
.fd-kcheck { position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--mint); color: var(--on-accent); opacity: 0; transform: scale(.5); transition: opacity .15s ease, transform .25s var(--ease-bounce); }
.fd-kcheck .ic { width: 16px; height: 16px; }
.fd-kcard[aria-pressed="true"] { border-color: var(--mint); background: var(--tint-mint); }
.fd-kcard[aria-pressed="true"] .fd-kcheck { opacity: 1; transform: none; }
.fd-kaide { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; }
.fd-kaide .ic { color: var(--fx); margin-top: 3px; }

.fd-kid .fd-subjects-kid .fd-subj-txt strong { font-size: 1.15rem; }
.fd-ktitle { font-size: clamp(1.6rem, 4vw, 2.1rem); }
.fd-kintro { font-size: 1.12rem; max-width: 62ch; }
.fd-kid .fd-kcard-t { font-size: 1.25rem; }
.fd-kid .fd-kcard-d { font-size: 1.02rem; }
.fd-kmsg { font-weight: 600; color: var(--mint-txt); min-height: 1.6em; }
.fd-khelp { display: flex; gap: 14px; align-items: center; padding: 16px 20px; border-radius: var(--radius-lg); background: var(--tint-lilac); }
.fd-khelp p { font-size: 1.08rem; font-weight: 500; }
@media (max-width: 520px) { .fd-khelp { flex-direction: column; align-items: flex-start; } }
@media (max-width: 700px) { .fd-subjects-kid .fd-subj-txt strong { font-size: .95rem; } }

/* ---------- Liens, personnalités en aperçu, sources ---------- */
.fd-celeb-teaser { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center; padding: 22px 24px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-xs); }
.fd-ct-faces { display: flex; flex-wrap: wrap; gap: 6px; max-width: 290px; }
@media (max-width: 620px) { .fd-celeb-teaser { grid-template-columns: minmax(0, 1fr); padding: 18px; } }
.fd-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 10px; }
.fd-link { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 52px; padding: 12px 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--fg); font-weight: 600; transition: border-color .15s ease, transform .15s var(--ease); }
.fd-link .ic { color: var(--fx, var(--lilac-txt)); flex: none; }
.fd-link:hover { border-color: var(--fc, var(--lilac)); transform: translateY(-1px); }
.fd-link:focus-visible { outline: none; box-shadow: var(--ring); }
.fd-sources a { overflow-wrap: anywhere; }

/* ---------- « Ils et elles en parlent » ---------- */
.cb-page { --fc: var(--lilac); --ft: var(--tint-lilac); --fx: var(--lilac-txt); }
.cb-tools { display: grid; gap: 14px; }
.cb-count { margin: 0; }
.cb-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 16px; align-items: start; }
.cb-card { display: grid; gap: 12px; padding: 20px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--coral); box-shadow: var(--shadow-xs); min-width: 0; }
.cb-card.cb-s-hpi { border-top-color: var(--lilac); }
.cb-card[hidden], .cb-empty[hidden] { display: none; }
.cb-head { display: flex; gap: 14px; align-items: center; }
.cb-id { display: grid; gap: 2px; min-width: 0; }
.cb-id h3 { font-size: 1.3rem; overflow-wrap: anywhere; }
.cb-meta { font-size: .88rem; color: var(--muted); }
.cb-av { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; flex: none; font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; letter-spacing: .02em; line-height: 1; background: var(--coral); color: var(--on-accent); }
.cb-av-hpi { background: var(--lilac); }
.cb-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.cb-pills .pill .ic { width: 1em; height: 1em; }
.cb-dit { font-size: .97rem; }
.cb-q { margin: 0; padding: 12px 16px; border-left: 4px solid var(--coral); background: var(--surface-2); border-radius: 0 var(--radius) var(--radius) 0; display: grid; gap: 4px; }
.cb-s-hpi .cb-q { border-left-color: var(--lilac); }
.cb-q p:first-child { font-style: italic; font-weight: 500; color: var(--ink); }
.cb-tr { font-size: .78rem; color: var(--muted); }
.cb-src { display: flex; gap: 8px; align-items: flex-start; font-size: .85rem; color: var(--muted); padding-top: 10px; border-top: 1px dashed var(--line); }
.cb-src > .ic { margin-top: 2px; }
.cb-src a { overflow-wrap: anywhere; font-weight: 500; }
.cb-src a .ic { width: .95em; height: .95em; margin-left: 3px; vertical-align: -.1em; }
.cb-src-m { display: block; margin-top: 2px; }
.cb-genies { display: grid; gap: 12px; padding: clamp(20px, 3vw, 30px); border-radius: var(--radius-lg); background: var(--tint-coral); }
.cb-genies h2 { display: flex; gap: 10px; align-items: center; font-size: clamp(1.35rem, 2.6vw, 1.7rem); }
.cb-genies h2 .ic { color: var(--coral-txt); flex: none; }
.cb-genies .fd-ul li::marker { color: var(--coral-txt); }
.cb-method h2 .ic { color: var(--mint-txt); }
.cb-method .fd-ul li::marker { color: var(--mint-txt); }

/* Espace enfant : « Eux aussi » */
.cb-kgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 14px; }
.cb-kcard { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; padding: 18px; border-radius: 24px; background: var(--surface); border: 2px solid var(--line); box-shadow: var(--shadow-xs); min-width: 0; }
.cb-kcard h2 { font-size: 1.35rem; }
.cb-krole { font-weight: 600; color: var(--muted); font-size: .95rem; }
.cb-kcard p { font-size: 1.02rem; }
.cb-kcard .cb-av { width: 60px; height: 60px; font-size: 1.35rem; }

/* ---------- Section d'accueil ---------- */
.fd-home-card { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 28px; align-items: center; padding: clamp(24px, 4vw, 40px); border-radius: var(--radius-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.fd-home-card::before { content: ""; position: absolute; z-index: -1; right: -70px; top: -90px; width: 280px; height: 280px; border-radius: 50%; background: var(--tint-mint); }
.fd-home-card::after { content: ""; position: absolute; z-index: -1; left: 42%; bottom: -80px; width: 150px; height: 150px; border-radius: 50%; background: var(--tint-spark); }
.fd-home-txt { min-width: 0; }
.fd-home-subj { display: flex; flex-wrap: wrap; gap: 8px; }
.fd-hs { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px 6px 8px; border-radius: 999px; background: var(--ft); color: var(--fx); font-weight: 600; text-decoration: none; font-size: .92rem; border: 2px solid transparent; transition: border-color .15s ease; }
.fd-hs .ic { width: 28px; height: 28px; padding: 5px; border-radius: 50%; background: var(--fc); color: var(--on-accent); }
.fd-hs:hover { border-color: var(--fc); }
.fd-home-art { display: grid; justify-items: center; gap: 12px; min-width: 0; }
.fd-scale-ic { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--on-ink); box-shadow: var(--shadow); }
.fd-scale-ic .ic { width: 36px; height: 36px; transform-origin: 50% 25%; animation: fd-rock 4.5s ease-in-out infinite; }
@keyframes fd-rock { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
.fd-pans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; max-width: 380px; }
.fd-pan { display: grid; gap: 6px; align-content: start; padding: 12px; border-radius: 0 0 var(--radius-lg) var(--radius-lg); border-top: 4px solid var(--line); min-width: 0; }
.fd-pan b { display: flex; gap: 6px; align-items: center; font-size: .82rem; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
.fd-pan span { display: block; padding: 5px 10px; border-radius: 999px; background: var(--surface); font-size: .85rem; font-weight: 600; text-align: center; }
.fd-pan-plus { background: var(--tint-mint); border-top-color: var(--mint); }
.fd-pan-plus b .ic { color: var(--mint-txt); }
.fd-pan-moins { background: var(--tint-sky); border-top-color: var(--sky); }
.fd-pan-moins b .ic { color: var(--sky-txt); }
@media (max-width: 820px) { .fd-home-card { grid-template-columns: minmax(0, 1fr); gap: 20px; } .fd-home-art { order: -1; } }
@media (max-width: 460px) { .fd-home .row .btn { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .fd-scale-ic .ic { animation: none; } }

/* ===== offres.css ===== */
/* ==========================================================================
   Ébulle — offres, verrous « Ébulle Plus », abonnement, avis, administration
   Uniquement les jetons de app.css ; thèmes clair et sombre ; 390 px sans débordement.
   ========================================================================== */

/* ---------- Verrous ---------- */
.dr-verrou { display: grid; gap: 14px; background: linear-gradient(160deg, var(--tint-lilac), var(--surface) 70%); border-color: color-mix(in srgb, var(--lilac) 28%, var(--line)); }
.dr-v-top { display: flex; gap: 14px; align-items: flex-start; }
.dr-v-top .mascot { flex: none; }
.dr-v-k { display: inline-flex; gap: 6px; align-items: center; }
.dr-v-k .ic { width: 1em; height: 1em; }
.dr-v-t { font-size: 1.3rem; line-height: 1.25; }
.dr-v-also ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.dr-v-also li { display: inline-flex; gap: 6px; align-items: center; font-size: .9rem; }
.dr-v-also .ic { width: 18px; height: 18px; color: var(--lilac-txt); }
.dr-verrou.compact { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 16px 18px; }
.dr-verrou.compact .dr-v-t { font-size: 1.05rem; }
.dr-v-ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--lilac); color: var(--on-accent); }
.dr-v-ic .ic { width: 22px; height: 22px; }
.dr-v-body { flex: 1 1 240px; min-width: 0; display: grid; gap: 2px; }
.dr-v-act { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 520px) { .dr-v-top { flex-direction: column; } .dr-v-top .mascot { width: 56px; height: 56px; } .dr-verrou .row .btn { width: 100%; } }

/* Espace enfant : écran doux, sans prix */
.dr-kid { display: grid; justify-items: center; text-align: center; gap: 12px; max-width: 560px; margin-inline: auto; background: var(--tint-sky); border-color: color-mix(in srgb, var(--sky) 25%, var(--line)); }
.dr-kid p { font-size: 1.1rem; max-width: 40ch; }
.dr-kid-t { font-size: 1.5rem; }
@media (max-width: 520px) { .dr-kid .mascot.lg { width: 120px; height: 120px; } }

/* Pastille « Plus » */
.pill.dr-pastille { background: var(--tint-lilac); color: var(--lilac-txt); font-size: .72rem; padding: 2px 8px; vertical-align: middle; }
.pill.dr-pastille .ic { width: 12px; height: 12px; }
.tile .pill.dr-pastille { background: #FFFFFF; color: #5442C9; font-family: var(--font-body); }
.tile .pill.dr-pastille .ic { width: 12px; height: 12px; padding: 0; background: none; box-shadow: none; border-radius: 0; }

/* Lecture seule */
.dr-lecture .dr-fige { opacity: .55; cursor: not-allowed; }
.dr-lecture .dr-fige:hover { transform: none; }

/* Bandeau de la phase de test */
.dr-band { background: var(--tint-spark); border-bottom: 1px solid color-mix(in srgb, var(--spark) 35%, var(--line)); }
.dr-band p { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 40px; padding-block: 4px; font-size: .88rem; color: var(--fg); }
.dr-band .ic { width: 16px; height: 16px; color: var(--ink); }
.dr-band-t { display: flex; gap: 8px; align-items: flex-start; flex: 1 1 36ch; min-width: 0; }
.dr-band-t .ic { flex: none; margin-top: .2em; }
.dr-band a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: .2em; display: inline-flex; align-items: center; min-height: 32px; }

/* Invitation à donner son avis */
.dr-invite { position: fixed; z-index: 60; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(24px + env(safe-area-inset-bottom, 0px)); width: min(380px, calc(100vw - 32px)); display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.dr-invite .mascot { width: 56px; height: 56px; }
.dr-inv-t { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--ink); }
@media (max-width: 860px) { .dr-invite { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } }
@media (prefers-reduced-motion: no-preference) { .dr-invite { animation: dr-up .4s var(--ease) both; } }
@keyframes dr-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- Pages légales ---------- */
.lg-todo { background: var(--tint-spark); color: var(--ink); border-radius: 6px; padding: 0 4px; font-weight: 500; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.lg-form { display: grid; gap: 8px; }

/* ---------- Page « Offres » ---------- */
.of-h2 { font-size: clamp(1.4rem, 3.4vw, 1.8rem); }
.of-h3 { font-size: 1.3rem; display: flex; gap: 8px; align-items: center; }
.of-h3 .ic { color: var(--lilac-txt); flex: none; }
.of-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.of-plan { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: 14px; align-content: start; padding: 26px 22px 22px; border-radius: var(--radius-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-xs); min-width: 0; }
.of-plan header { display: grid; gap: 6px; }
.of-plan h2 { font-size: 1.6rem; }
.of-bub { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: var(--on-accent); }
.of-bub .ic { width: 24px; height: 24px; }
.of-plan.libre .of-bub { background: var(--mint); }
.of-plan.plus { border: 2px solid var(--lilac); box-shadow: var(--shadow); background: linear-gradient(170deg, var(--tint-lilac), var(--surface) 45%); }
.of-plan.plus .of-bub { background: var(--lilac); }
.of-plan.pro { background: var(--surface-2); border-style: dashed; box-shadow: none; }
.of-plan.pro .of-bub { background: var(--sky); }
.of-ribbon { justify-self: start; display: inline-flex; gap: 6px; align-items: center; margin: -8px 0 -4px; padding: 4px 12px; border-radius: 999px; background: var(--lilac); color: var(--on-accent); font-size: .8rem; font-weight: 600; }
.of-ribbon .ic { width: 15px; height: 15px; }
.of-ribbon.soon { background: var(--tint-sky); color: var(--sky-txt); }
.of-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.of-price b { font-family: var(--font-display); font-size: 2.4rem; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.of-price span { color: var(--muted); font-size: .95rem; }
.of-price.sm b { font-size: 1.9rem; }
.of-alt { color: var(--muted); }
.of-trial { justify-self: start; white-space: normal; }
.of-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; align-content: start; }
.of-list li { display: flex; gap: 10px; align-items: flex-start; }
.of-list .ic { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--mint-txt); }
.of-plan.plus .of-list .ic { color: var(--lilac-txt); }
.of-cta { display: flex; flex-wrap: wrap; gap: 8px; }
.of-cta .btn { flex: 1 1 auto; }
@media (max-width: 960px) { .of-plans { grid-template-columns: minmax(0, 1fr); max-width: 560px; } }

.of-tablewrap table.of-table { min-width: 0; table-layout: fixed; }
.of-table th[scope="row"] { font-weight: 500; background: transparent; }
.of-table thead th:first-child { width: 46%; }
.of-table td { font-size: .9rem; }
.of-yes { display: inline-flex; gap: 6px; align-items: center; color: var(--mint-txt); font-weight: 600; }
.of-yes .ic { width: 20px; height: 20px; }
.of-no { color: var(--muted); font-weight: 600; }
.of-txt { font-weight: 500; }
@media (max-width: 620px) {
  .of-table th, .of-table td { padding: 10px 8px; font-size: .84rem; }
  .of-table thead th:first-child { width: 40%; }
}
.of-sol { background: var(--tint-mint); border-color: color-mix(in srgb, var(--mint) 25%, var(--line)); }
.of-fond { background: var(--tint-spark); border-color: color-mix(in srgb, var(--spark) 35%, var(--line)); }
.of-sol .of-h3 .ic, .of-fond .of-h3 .ic { color: var(--ink); }
.of-engs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.of-engs li { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.of-engs .ic { flex: none; width: 24px; height: 24px; color: var(--lilac-txt); margin-top: 2px; }
@media (max-width: 620px) { .of-engs { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Abonnement ---------- */
.ab-page { max-width: 760px; }
.ab-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ab-choice > span { display: grid; gap: 2px; justify-items: center; padding: 12px 10px; }
.ab-choice b { font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); }
.ab-choice small { color: var(--muted); font-weight: 400; }
@media (max-width: 620px) { .ab-choices { grid-template-columns: minmax(0, 1fr); } .ab-choice > span { justify-items: start; justify-content: start; text-align: left; } }
.ab-state { border-color: color-mix(in srgb, var(--lilac) 30%, var(--line)); }

/* ---------- Avis ---------- */
.av-page { max-width: 640px; }
.av-scale { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 6px; }
.av-scale .choice > span { min-height: 44px; padding: 8px 0; font-weight: 600; }
.av-ends { display: flex; justify-content: space-between; gap: 12px; }
@media (max-width: 520px) { .av-scale { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.av-done { justify-items: center; text-align: center; }

/* ---------- Administration ---------- */
.adm-keys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.adm-key { display: flex; gap: 14px; align-items: center; padding: 18px; }
.adm-ki { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--tint-lilac); color: var(--lilac-txt); }
.adm-ki .ic { width: 22px; height: 22px; }
.adm-key .stat { min-width: 0; }
@media (max-width: 960px) { .adm-keys { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .adm-keys { grid-template-columns: minmax(0, 1fr); } }
.adm-sec .row.between { align-items: flex-start; }
.adm-fake { white-space: normal; }
.adm-table { min-width: 460px; }
.adm-table th[scope="row"] { background: transparent; }
.adm-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.adm-bars li { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.adm-bl { font-size: .9rem; }
.adm-bar { height: 12px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.adm-bar i { display: block; height: 100%; border-radius: 999px; }
.adm-bv { font-size: .9rem; white-space: nowrap; }
@media (max-width: 520px) { .adm-bars li { grid-template-columns: minmax(0, 1fr) auto; } .adm-bar { grid-column: 1 / -1; grid-row: 2; } }
.adm-avk { gap: 24px; }
.adm-avk .stat b small { font-size: 1rem; color: var(--muted); margin-left: 2px; }
.adm-avis { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.adm-avis li { display: grid; gap: 6px; padding: 12px 14px; border-radius: var(--radius); background: var(--surface-2); }
.adm-links { display: flex; flex-wrap: wrap; gap: 8px; }
.adm-cfg { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; }
.adm-cfg div { display: grid; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.adm-cfg dt { font-size: .85rem; color: var(--muted); }
.adm-cfg dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 620px) { .adm-cfg { grid-template-columns: minmax(0, 1fr); } }
.adm-gen { justify-content: space-between; }

/* Titres de page suivis d'une pile : l'espacement de la pile suffit */
.of-page > .pagehead, .ab-page > .pagehead, .dr-page > .pagehead, .adm-page > .pagehead, .av-page > .pagehead { margin-bottom: 0; }
.adm-pager { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.adm-pager > span { text-align: center; }
@media (max-width: 520px) { .adm-pl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; } .adm-pager .btn { padding-inline: 12px; } }

/* ---------- Essai sans carte, rétractation, résiliation publique ---------- */
.ab-essai { border: 2px solid color-mix(in srgb, var(--spark) 55%, var(--line)); background: linear-gradient(170deg, var(--tint-spark), var(--surface) 55%); }
.ab-retract { border-color: color-mix(in srgb, var(--coral) 35%, var(--line)); }
.ab-retract[role="status"] { justify-items: start; }
.ab-retract input[readonly] { background: var(--surface-2); color: var(--fg); }
.rs-page { max-width: 680px; }
.rs-page > .pagehead { margin-bottom: 0; }
.rs-choices { display: grid; gap: 10px; }
.rs-choice > span { display: grid; gap: 4px; justify-items: start; text-align: left; padding: 12px 14px; }
.rs-choice small { color: var(--muted); font-weight: 400; }
.rs-dl { margin: 0; display: grid; gap: 0; }
.rs-dl div { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: 4px 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.rs-dl dt { color: var(--muted); font-size: .9rem; }
.rs-dl dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 520px) { .rs-dl div { grid-template-columns: minmax(0, 1fr); } }
.of-jeux { max-width: 80ch; }

/* ---------- Administration : prêt pour l'ouverture ? ---------- */
.adm-pret { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.adm-pret li { display: flex; gap: 10px; align-items: flex-start; }
.adm-pret .ic { flex: none; width: 20px; height: 20px; margin-top: 2px; }
.adm-pret li.ok .ic { color: var(--mint-txt); }
.adm-pret li.ko .ic { color: var(--coral-txt); }
.adm-pret.manuel .ic { color: var(--muted); }
.adm-h4 { font-size: 1.05rem; margin-top: 6px; }

/* ===== a11y.css ===== */
/* ==========================================================================
   Ébulle — accessibilité : contraste renforcé, espacement, liens soulignés,
   curseur agrandi, mode concentration, règle de lecture, lecture à voix haute,
   panneau rapide et page Réglages.
   ========================================================================== */

/* ---------- Contraste renforcé (ratios vérifiés : textes >= 7:1, contours >= 3:1) ---------- */
:root[data-contraste="1"] {
  --ink: #141B48; --fg: #0F1436; --muted: #2E3560;
  --bg: #FFFFFF; --surface: #FFFFFF; --surface-2: #EEF0F8; --surface-3: #DDE1F2;
  --line: #7D86B0; --line-strong: #4A5280; --focus: #1F64AE;
  --coral-txt: #9A2A19; --mint-txt: #0A5A4B; --lilac-txt: #4331B0; --sky-txt: #154F8C;
  --tint-lilac: #E4E0FD; --tint-coral: #FBDDD7; --tint-mint: #D2EFE7; --tint-sky: #D8E8FA; --tint-spark: #FBF0CC;
  --shadow-xs: none; --shadow-sm: none;
}
@media (prefers-color-scheme: dark) {
  :root[data-contraste="1"]:not([data-theme="light"]) {
    --ink: #FFFFFF; --fg: #FFFFFF; --muted: #D5D8EE; --on-ink: #05070F;
    --bg: #05070F; --surface: #0B0F22; --surface-2: #151A36; --surface-3: #1F2547;
    --line: #8E97CC; --line-strong: #B5BCE6; --focus: #FFE08A;
    --coral-txt: #FFB3A8; --mint-txt: #7FE8CF; --lilac-txt: #C9C2FF; --sky-txt: #A9D3FA;
    --tint-lilac: #221F4D; --tint-coral: #3A1C22; --tint-mint: #0F2E28; --tint-sky: #122A45; --tint-spark: #332B10;
    --night: #0B0F22;
  }
}
:root[data-contraste="1"][data-theme="dark"] {
  --ink: #FFFFFF; --fg: #FFFFFF; --muted: #D5D8EE; --on-ink: #05070F;
  --bg: #05070F; --surface: #0B0F22; --surface-2: #151A36; --surface-3: #1F2547;
  --line: #8E97CC; --line-strong: #B5BCE6; --focus: #FFE08A;
  --coral-txt: #FFB3A8; --mint-txt: #7FE8CF; --lilac-txt: #C9C2FF; --sky-txt: #A9D3FA;
  --tint-lilac: #221F4D; --tint-coral: #3A1C22; --tint-mint: #0F2E28; --tint-sky: #122A45; --tint-spark: #332B10;
  --night: #0B0F22;
}
:root[data-contraste="1"] :focus-visible { outline-width: 4px; }
:root[data-contraste="1"] .btn-ghost { border-color: var(--line-strong); }
:root[data-contraste="1"] :is(.home-hero .lead, .home-hero .trust, .band p, .band .guarantees span, .hero-search) { color: #fff; }
:root[data-contraste="1"] :is(.home-hero, .band) { outline: 2px solid var(--line-strong); outline-offset: -2px; }
:root[data-contraste="1"] .pillar, :root[data-contraste="1"] .cta-final { border-color: var(--line); }
:root[data-contraste="1"] .tile { outline: 2px solid #1E2756; outline-offset: -2px; }
:root[data-contraste="1"] body.kid { background: var(--bg); }

/* ---------- Espacement du texte (critère WCAG 1.4.12) ---------- */
:root[data-espacement="1"] { --lh: 1.95; --ls: .05em; --ws: .16em; --ps: 1em; }
:root[data-espacement="1"] :is(h1, h2, h3, h4) { line-height: 1.3; letter-spacing: .01em; }
:root[data-espacement="1"] .prose :is(ul, ol) { gap: .9em; }
:root[data-espacement="1"] :is(.note > div, .stack, .card) { row-gap: max(16px, 1.1em); }

/* ---------- Liens soulignés partout (aussi en contraste renforcé) ---------- */
:root:is([data-liens="1"], [data-contraste="1"]) a { text-decoration-line: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
:root:is([data-liens="1"], [data-contraste="1"]) :is(a.btn, a.iconbtn, a.brand, a.topic, a.pillar, a.aud, a.card, a.li, a.tile, a.hero-search, a.kid-chip) { text-decoration-line: none; }
:root:is([data-liens="1"], [data-contraste="1"]) :is(a.topic, a.pillar, a.aud, a.card, a.li) :is(h3, h4, strong),
:root:is([data-liens="1"], [data-contraste="1"]) a.tile > span,
:root:is([data-liens="1"], [data-contraste="1"]) a.btn > span:last-child:not(.ic) { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
:root[data-liens="1"] .tabbar a span, :root[data-liens="1"] .mainnav a { text-decoration-line: underline; }

/* ---------- Curseur agrandi ---------- */
:root[data-curseur="1"], :root[data-curseur="1"] * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cpath d='M6 3v33l9-8.5 6.2 13.6 6.4-2.9-6.1-13.2H33z' fill='%231E2756' stroke='white' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") 6 3, auto !important;
}
:root[data-curseur="1"] :is(a, button, summary, label, select, [role="button"], [role="switch"], input[type="checkbox"], input[type="radio"]),
:root[data-curseur="1"] :is(a, button, summary, label, [role="button"]) * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cpath d='M6 3v33l9-8.5 6.2 13.6 6.4-2.9-6.1-13.2H33z' fill='%23FFC233' stroke='%231E2756' stroke-width='3' stroke-linejoin='round'/%3E%3Ccircle cx='35' cy='37' r='5' fill='%23F2644F' stroke='white' stroke-width='2'/%3E%3C/svg%3E") 6 3, pointer !important;
}
:root[data-curseur="1"] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea) {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='44' viewBox='0 0 40 44'%3E%3Cpath d='M12 5h16M12 39h16M20 5v34' stroke='white' stroke-width='8' stroke-linecap='round'/%3E%3Cpath d='M12 5h16M12 39h16M20 5v34' stroke='%231E2756' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") 20 22, text !important;
}

/* ---------- Mode concentration ---------- */
:root[data-concentration="1"] :is(main aside, .footer, .home-hero .art, .hero-art, .stage, .mock-cap) { display: none !important; }
:root[data-concentration="1"] .pillar::after, :root[data-concentration="1"] .keypoints::after, :root[data-concentration="1"] .band::before, :root[data-concentration="1"] .home-hero::after, :root[data-concentration="1"] .cta-final::after, :root[data-concentration="1"] .cta-final::before, :root[data-concentration="1"] .tile::before, :root[data-concentration="1"] .footer::before { display: none; }
:root[data-concentration="1"] main { font-size: 1.08rem; }
:root[data-concentration="1"] .prose { font-size: 1.12rem; max-width: 66ch; }
:root[data-concentration="1"] .article { grid-template-columns: minmax(0, 1fr); }
:root[data-concentration="1"] .wrap:has(> .article) { max-width: 52rem; }
:root[data-concentration="1"] .home-hero { grid-template-columns: minmax(0, 1fr); }
:root[data-concentration="1"] .apercu { grid-template-columns: minmax(0, 1fr); }
:root[data-concentration="1"] body.kid { background: var(--bg); }
:root[data-concentration="1"] main { padding-bottom: 140px; }

/* ---------- Règle de lecture ---------- */
.a11y-ruler { position: fixed; left: 0; right: 0; top: 0; z-index: 45; height: calc(2.3em * var(--lh)); pointer-events: none; will-change: transform; }
.a11y-ruler[hidden] { display: none; }
:root:not([data-regle="bande"]):not([data-regle="masque"]) .a11y-ruler { display: none; }
:root[data-regle="bande"] .a11y-ruler { background: color-mix(in srgb, var(--spark) 18%, transparent); border-block: 2px solid color-mix(in srgb, var(--spark) 75%, var(--ink)); }
:root[data-regle="masque"] .a11y-ruler { border-block: 2px solid var(--spark); box-shadow: 0 0 0 100vmax rgba(15, 19, 41, .45); }

/* ---------- Lecture à voix haute ---------- */
.a11y-listen { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin-top: 4px; }
.a11y-listen .btn[aria-pressed="true"], .a11y-fab[aria-pressed="true"] { background: var(--tint-lilac); color: var(--lilac-txt); border-color: color-mix(in srgb, var(--lilac) 45%, transparent); }
.a11y-reading:not(.tile) { background-color: color-mix(in srgb, var(--spark) 30%, transparent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--spark) 30%, transparent); border-radius: 4px; transition: background-color .2s ease, box-shadow .2s ease; }
.tile.a11y-reading { outline: 4px solid #1E2756; outline-offset: 3px; }
.a11y-player { position: fixed; z-index: 70; left: 50%; transform: translateX(-50%); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 2px; padding: 6px 8px 6px 14px; border-radius: 999px; background: var(--night); color: #fff; box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, .08); max-width: calc(100vw - 24px); animation: tin .3s var(--ease-bounce); }
.a11y-player[hidden] { display: none; }
.a11y-pl-ic { display: grid; place-items: center; margin-right: 4px; color: var(--spark); }
.a11y-player:not(.paused) .a11y-pl-ic { animation: speakpulse 1.4s ease-in-out infinite; }
@keyframes speakpulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .6; transform: scale(.88); } }
.a11y-pl-btn { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 0; background: transparent; color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .15s ease; }
.a11y-pl-btn:hover { background: rgba(255, 255, 255, .14); }
.a11y-pl-btn.main { background: var(--spark); color: #1E2756; }
.a11y-pl-btn.main:hover { background: #FFD66B; }
.a11y-pl-btn:focus-visible, .a11y-pl-speed select:focus-visible { outline: 3px solid #8CC2F6; outline-offset: 2px; }
.a11y-pl-pos { font-size: .82rem; min-width: 5.5ch; margin: 0 6px; text-align: center; white-space: nowrap; color: rgba(255, 255, 255, .82); }
.a11y-pl-speed select { min-height: 40px; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #fff; border: 1px solid rgba(255, 255, 255, .3); padding: 4px 10px; font-size: .88rem; cursor: pointer; }
.a11y-pl-speed option { color: #1E2756; background: #fff; }
.a11y-fab { position: fixed; z-index: 55; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 7px 20px 7px 8px; border-radius: 999px; border: 2px solid transparent; background: var(--night); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; cursor: pointer; box-shadow: var(--shadow-lg); transition: transform .2s var(--ease-bounce); }
.a11y-fab:hover { transform: translateY(-2px); }
.a11y-fab .ic { width: 38px; height: 38px; padding: 8px; border-radius: 50%; background: var(--spark); color: #1E2756; }
.a11y-fab:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.a11y-fab[hidden], body.a11y-playing .a11y-fab { display: none; }
body.a11y-playing .toasts { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 860px) {
  .a11y-player { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .a11y-fab { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
  body.a11y-playing .toasts { bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 560px) { .a11y-fab { padding: 6px; min-height: 0; } .a11y-fab .ic { width: 46px; height: 46px; padding: 11px; } .a11y-fab .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; } }
@media (max-width: 400px) { .a11y-pl-ic { display: none; } .a11y-player { padding-left: 6px; } .a11y-pl-pos { min-width: 0; } }

/* ---------- Interrupteurs et groupes de choix ---------- */
.a11y-fs { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 6px; }
.a11y-fs legend { padding: 0; margin-bottom: 8px; font-weight: 600; font-size: .95rem; }
.a11y-fs .hint { font-size: .85rem; color: var(--muted); }
.sw { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 14px; align-items: center; min-height: 52px; padding: 8px 0; cursor: pointer; }
.sw + .sw { border-top: 1px solid var(--line); }
.sw input { position: absolute; left: 0; top: 50%; width: 50px; height: 30px; margin: -15px 0 0; opacity: 0; cursor: pointer; }
.sw-ui { position: relative; width: 50px; height: 30px; border-radius: 999px; background: var(--surface-3); border: 2px solid var(--line-strong); transition: background .2s ease, border-color .2s ease; }
.sw-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--line-strong); transition: transform .22s var(--ease-bounce), background .2s ease; }
.sw input:checked + .sw-ui { background: var(--mint-txt); border-color: var(--mint-txt); }
.sw input:checked + .sw-ui::after { transform: translateX(20px); background: var(--surface); }
.sw input:focus-visible + .sw-ui { outline: 3px solid var(--focus); outline-offset: 3px; }
.sw:hover .sw-ui { border-color: var(--ink); }
.sw-txt strong { display: block; font-weight: 600; line-height: 1.35; }
.sw-txt small { display: block; color: var(--muted); font-size: .85rem; line-height: 1.4; margin-top: 2px; }

/* ---------- Panneau rapide ---------- */
dialog.a11y-panel { position: fixed; top: calc(var(--header-h) + 8px + env(safe-area-inset-top, 0px)); right: max(12px, calc((100vw - var(--wrap)) / 2 + 12px)); left: auto; bottom: auto; margin: 0; width: min(420px, calc(100vw - 24px)); max-height: calc(100dvh - var(--header-h) - 24px); padding: 0; border: 0; border-radius: var(--radius-xl); background: var(--surface); color: var(--fg); box-shadow: var(--shadow-lg), 0 0 0 1px var(--line); overflow-y: auto; overscroll-behavior: contain; }
dialog.a11y-panel[open] { animation: panelin .24s var(--ease); }
@keyframes panelin { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }
dialog.a11y-panel::backdrop { background: rgba(15, 19, 41, .22); }
.a11y-pbody { padding: 18px 20px 20px; display: grid; gap: 18px; }
.a11y-phead { display: flex; align-items: center; gap: 12px; }
.a11y-phead h2 { font-size: 1.3rem; flex: 1; min-width: 0; }
.a11y-pic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: var(--tint-lilac); color: var(--lilac-txt); flex: none; }
.a11y-panel .choices.inline { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.a11y-panel .choice > span { min-height: 44px; padding: 8px 6px; font-size: .88rem; gap: 6px; }
.a11y-panel .choice > span .ic { width: 1.05em; height: 1.05em; }
.a11y-sws { display: grid; border-block: 1px solid var(--line); }
.a11y-pfoot { padding-top: 4px; }
@media (max-width: 620px) {
  dialog.a11y-panel { top: auto; bottom: 0; right: 0; left: 0; width: 100%; max-width: 100%; max-height: 88dvh; border-radius: 28px 28px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
  dialog.a11y-panel[open] { animation: sheetin .28s var(--ease); }
  @keyframes sheetin { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
  .a11y-pbody { padding: 14px 16px 20px; }
  .a11y-panel .choice > span .ic { display: none; }
  .a11y-panel .choice > span { font-size: .85rem; padding: 8px 4px; }
  .a11y-pbody::before { content: ""; justify-self: center; width: 44px; height: 5px; border-radius: 3px; background: var(--line); margin-bottom: -6px; }
}

/* ---------- Page Réglages ---------- */
.reg-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.reg-layout > .stack-lg { min-width: 0; }
.reg-preview { position: sticky; top: calc(var(--header-h) + 20px + env(safe-area-inset-top, 0px)); display: grid; gap: 12px; }
.reg-preview .sample { display: grid; gap: calc(10px + var(--ps)); padding: 18px; border-radius: var(--radius); background: var(--bg); border: 1px dashed var(--line-strong); }
.reg-preview .sample h3 { font-size: 1.2rem; }
.reg-preview .sample ul { margin: 0; padding-left: 1.2em; display: grid; gap: .3em; }
.reg-sec h2 { font-size: 1.35rem; display: flex; align-items: center; gap: 10px; }
.reg-sec h2 .ic { width: 34px; height: 34px; padding: 7px; border-radius: 12px; background: var(--tint-lilac); color: var(--lilac-txt); }
.reg-sws { display: grid; }
@media (max-width: 960px) { .reg-layout { grid-template-columns: minmax(0, 1fr); } .reg-preview { position: static; order: -1; } }
@media (max-width: 620px) { .reg-preview .sample ul { display: none; } }

/* Le bouton flottant « Pip lit pour toi » ne doit jamais masquer la fin d'une page : on réserve sa place */
body.kid #main { padding-bottom: 84px; }

/* ===== referencement.css ===== */
/* Ébulle — confiance et maillage : date de mise à jour, « À lire aussi », pages de présentation des questionnaires */
.pg-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: .9rem; color: var(--muted); }
.pg-meta > span, .pg-meta > a { display: inline-flex; align-items: center; gap: 6px; }
.pg-meta .ic { width: 1em; height: 1em; opacity: .8; }
.pg-meta > a { color: var(--lilac-txt); text-underline-offset: 3px; min-height: 24px; }
.pg-meta .pill .ic { opacity: 1; }
.fx-meta + .pg-meta { margin-top: 2px; }

.also-read { margin-top: 56px; padding-top: 32px; border-top: 1px dashed var(--line); display: grid; gap: 18px; }
.also-read h2 { font-size: 1.6rem; }
.also-read .hub { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.also-read .topic h3 { font-size: 1.15rem; }
.also-read .topic p { font-size: .95rem; color: var(--muted); }

.qp-faits { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 12px; margin-block: 4px 8px; }
.qp-faits > div { background: var(--surface-2); border-radius: var(--radius); padding: 14px 16px; display: grid; gap: 4px; align-content: start; }
.qp-faits .label { font-size: .82rem; font-weight: 600; color: var(--muted); }
.qp-faits p { margin: 0; }
.qp-cta { margin-top: 12px; }
.methode ul li + li { margin-top: 6px; }