/* Nana & Nono — site vitrine v2. Tout est hébergé ici : aucun appel à un service tiers. */
@font-face { font-family: 'Fraunces'; src: url('assets/fonts/Fraunces_600SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Atkinson'; src: url('assets/fonts/AtkinsonHyperlegibleNext_400Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Atkinson'; src: url('assets/fonts/AtkinsonHyperlegibleNext_700Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }

:root {
  color-scheme: light dark;
  --bg: #FDF2EA; --card: #FFFFFF; --sunk: #F6E6D9; --ink: #2B2622; --muted: #6B6058; --line: #EAD9CB;
  --accent: #2F5BD3; --accent-soft: #E3EAFB; --on-accent: #FFFFFF;
  --warm: #F7A23B; --warm-soft: #FDE9CF; --on-warm: #2B2622;
  --energy: #2E9E4F; --energy-ink: #1F7A3A; --energy-soft: #DDF1E2;
  --good: #0F7C7A; --good-ink: #0A6361; --good-soft: #DCEFEE; --bad: #A8432F; --bad-soft: #F8E1DB;
  --frame: #2B2622; --paper: #FFFDFA;
  --shadow: 0 1px 2px rgba(43,38,34,.05), 0 10px 30px rgba(43,38,34,.08);
  --shadow-lg: 0 2px 4px rgba(43,38,34,.06), 0 24px 60px rgba(43,38,34,.16);
  --radius: 24px; --max: 1120px;
  --ease: cubic-bezier(.2,.8,.2,1); --spring: cubic-bezier(.34,1.56,.64,1);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1B1815; --card: #262220; --sunk: #231F1C; --ink: #F3EBE4; --muted: #B5A99F; --line: #3A3431;
    --accent: #8FA8F0; --accent-soft: #26304A; --on-accent: #10131C;
    --warm: #F7A23B; --warm-soft: #3A2C1A; --on-warm: #2B2622;
    --energy: #58C27A; --energy-ink: #6FCF8C; --energy-soft: #1D3324;
    --good: #58D0C8; --good-ink: #58D0C8; --good-soft: #17312F; --bad: #F08A78; --bad-soft: #3D2620;
    --frame: #0E0C0B; --paper: #FFFDFA;
    --shadow: 0 0 0 1px var(--line);
    --shadow-lg: 0 0 0 1px var(--line), 0 24px 60px rgba(0,0,0,.45);
  }
}

* { box-sizing: border-box; }
html { font-size: 112.5%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1rem/1.6 'Atkinson', system-ui, sans-serif; overflow-x: clip; }
img, svg { max-width: 100%; display: block; }
img { height: auto; }
a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { text-decoration-thickness: 2.5px; }
h1, h2, h3 { font-family: 'Fraunces', Georgia, serif; font-weight: 600; line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.015em; text-wrap: balance; }
h1 { font-size: clamp(2.05rem, 5.8vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 3.9vw, 2.4rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 16px; }
@media (min-width: 700px) { .wrap { padding: 0 28px; } }
.muted { color: var(--muted); }
.small { font-size: .95rem; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 16px; top: 16px; background: var(--card); padding: 10px 14px; border-radius: 10px; z-index: 30; }

/* Barre de progression de lecture (CSS seul, là où c'est pris en charge) */
.progress { display: none; }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .progress { display: block; position: fixed; inset: 0 0 auto 0; height: 4px; background: var(--warm); transform-origin: 0 50%; z-index: 25; animation: progress linear both; animation-timeline: scroll(root); }
  }
}
@keyframes progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* En-tête */
header.top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
header.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.3rem; white-space: nowrap; }
.brand img { width: 38px; height: 38px; border-radius: 11px; transition: transform .5s var(--spring); }
.brand:hover img { transform: rotate(-8deg) scale(1.08); }
nav.menu { display: flex; gap: 4px; align-items: center; }
nav.menu a { color: var(--ink); text-decoration: none; font-weight: 700; font-size: .95rem; padding: 10px 14px; border-radius: 999px; transition: background .2s; }
nav.menu a:hover { background: var(--warm-soft); }
nav.menu a[aria-current="page"] { background: var(--warm-soft); }
@media (max-width: 680px) { nav.menu .opt { display: none; } }

/* Boutons et pastilles */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 12px 24px; border-radius: 999px; font-weight: 700; text-decoration: none; border: 2px solid transparent; }
.btn.primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 30%, transparent); }
.btn.ghost { border-color: var(--line); color: var(--ink); background: var(--card); }
.btn[aria-disabled="true"] { cursor: default; }
.btn.small-btn { min-height: 46px; padding: 8px 18px; background: var(--card); border-color: var(--line); transition: transform .2s var(--spring), border-color .2s; }
.btn.small-btn:hover { border-color: var(--accent); transform: translateY(-2px); }
.btn.small-btn:active { transform: scale(.96); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.pill { display: inline-flex; align-items: center; gap: 8px; background: var(--warm-soft); color: var(--ink); border-radius: 999px; padding: 7px 16px; font-weight: 700; font-size: .95rem; margin-bottom: 18px; }
.pill::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--warm); }
.hl { background: linear-gradient(transparent 60%, color-mix(in srgb, var(--warm) 62%, transparent) 60%, color-mix(in srgb, var(--warm) 62%, transparent) 92%, transparent 92%); -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 .08em; margin: 0 -.08em; border-radius: 4px; }
.eyebrow { display: inline-block; font-weight: 700; font-size: .95rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.eyebrow::before { content: ''; display: inline-block; width: 22px; height: 4px; border-radius: 4px; background: var(--warm); vertical-align: middle; margin-right: 10px; }
.demo-note { font-size: .95rem; color: var(--muted); text-align: center; margin: 14px 0 0; }

/* Sections */
section { padding: 64px 0; position: relative; overflow-x: clip; }
@media (min-width: 900px) { section { padding: 96px 0; } }
section.alt { background: var(--sunk); }
.wave { position: absolute; left: 0; width: 100%; height: 36px; color: var(--sunk); pointer-events: none; }
.wave.top { bottom: 100%; margin-bottom: -1px; } .wave.bot { top: 100%; margin-top: -1px; transform: scaleY(-1); }
@media (min-width: 900px) { .wave { height: 60px; } }
.lead { font-size: 1.12rem; color: var(--muted); max-width: 34em; }
.intro { max-width: 44em; margin-bottom: 40px; }
.card { background: var(--card); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
.card p:last-child { margin-bottom: 0; }
.split { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: 64px; } .split.rev > :first-child { order: 2; } }

/* Apparitions au défilement (uniquement si le script tourne) */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0s); }
.js .reveal.in { opacity: 1; transform: none; }

/* ───────── Héros ───────── */
.hero { padding: 40px 0 72px; overflow: clip; }
.hero .wrap { display: grid; gap: 48px; align-items: center; }
@media (min-width: 900px) { .hero { padding: 72px 0 110px; } .hero .wrap { grid-template-columns: 1.1fr .9fr; gap: 32px; } }
.trust { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--muted); }
.trust li { display: flex; align-items: center; gap: 8px; }
.trust li::before { content: '✓'; width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--energy-soft); color: var(--energy-ink); font-weight: 700; font-size: .8rem; display: grid; place-items: center; }

.stage { position: relative; display: grid; justify-items: center; padding: 26px 0 8px; }
.blobs { position: absolute; left: 50%; top: 50%; width: 600px; max-width: none; height: 600px; transform: translate(-50%, -52%); z-index: 0; pointer-events: none; }
.blobs .b-sun { fill: var(--warm); } .blobs .b-heart { fill: var(--accent); } .blobs .b-wave { fill: var(--energy); } .blobs .b-ray { stroke: var(--energy); stroke-width: 20; stroke-linecap: round; fill: none; }
.blobs g { transform-box: fill-box; transform-origin: center; transition: transform .6s var(--ease); }
.blobs .float-a { animation: float 9s ease-in-out infinite; } .blobs .float-b { animation: float 11s ease-in-out -4s infinite reverse; }
.blobs .rays { animation: twinkle 5s ease-in-out infinite; transform-box: fill-box; transform-origin: 80% 90%; }
@keyframes float { 0%,100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@keyframes twinkle { 0%,100% { rotate: 0deg; scale: 1; } 50% { rotate: -5deg; scale: 1.06; } }

/* Téléphone */
.phone { position: relative; z-index: 1; width: 320px; max-width: 100%; background: var(--frame); padding: 10px; border-radius: 48px; box-shadow: var(--shadow-lg); }
@media (min-width: 900px) { .phone { rotate: 2deg; transition: rotate .6s var(--ease); } .phone:hover, .phone:focus-within { rotate: 0deg; } }
.screen { background: var(--bg); border-radius: 38px; padding: 12px 14px 16px; overflow: hidden; display: grid; gap: 12px; }
.statusbar { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: .8rem; padding: 0 10px; color: var(--ink); }
.statusbar i { width: 74px; height: 22px; border-radius: 12px; background: var(--frame); }
.hello { padding: 0 4px; }
.hello strong { display: block; font: 600 1.5rem/1.15 'Fraunces', serif; }
.hello span { color: var(--muted); font-size: .95rem; line-height: 1.35; display: block; margin-top: 4px; }
.pcard { background: var(--card); border-radius: 18px; padding: 14px 12px; box-shadow: var(--shadow); }
.pcard h3 { font-size: 1.05rem; margin: 0 2px 10px; }
.moodbtns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mood { display: grid; justify-items: center; gap: 2px; padding: 10px 2px 8px; min-height: 84px; border-radius: 16px; border: 2px solid transparent; background: var(--tint); font-weight: 700; font-size: .95rem; color: var(--tone); transition: transform .25s var(--spring), border-color .2s, box-shadow .2s; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.mood .em { font-size: 1.7rem; line-height: 1.1; transition: transform .4s var(--spring); }
.mood:hover { border-color: var(--tone); } .mood:hover .em { transform: translateY(-3px) rotate(-6deg) scale(1.08); }
.mood:active { transform: scale(.93); }
.mood.pop .em { animation: pop .5s var(--spring); }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.45) rotate(10deg); } 100% { transform: scale(1); } }
.m-bon { --tone: var(--good-ink); --tint: var(--good-soft); } .m-neutre { --tone: var(--muted); --tint: var(--sunk); } .m-dur { --tone: var(--bad); --tint: var(--bad-soft); }
@media (prefers-color-scheme: dark) { .m-neutre { --tint: #332E2A; } }

.frise-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0 2px 6px; }
.frise-head h3 { margin: 0; }
.linkbtn { background: none; border: 0; padding: 6px 4px; color: var(--accent); font-weight: 700; font-size: .95rem; text-decoration: underline; text-underline-offset: 3px; }
.track { position: relative; height: 44px; margin: 4px 2px 0; }
.track::before { content: ''; position: absolute; left: 0; right: 0; top: 19px; height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--warm-soft), var(--line) 50%, var(--accent-soft)); }
.track .dot { position: absolute; top: 7px; width: 30px; height: 30px; border-radius: 50%; background: var(--card); border: 3px solid var(--tone); display: grid; place-items: center; font-size: .85rem; line-height: 1; animation: drop .55s var(--spring) both; }
@keyframes drop { from { transform: translateY(-34px) scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }
.track-legend { display: flex; justify-content: space-between; font-size: .95rem; color: var(--muted); margin: 0 2px; }
.entries { list-style: none; margin: 8px 0 0; padding: 0; min-height: 96px; display: grid; align-content: start; gap: 4px; }
.entries li { display: flex; align-items: center; gap: 8px; font-size: .95rem; line-height: 1.3; padding: 3px 4px; animation: slidein .4s var(--ease) both; }
.entries li::before { content: ''; width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--tone); }
.entries li.empty { color: var(--muted); display: block; animation: none; } .entries li.empty::before { display: none; }
.entries time { font-weight: 700; white-space: nowrap; }
@keyframes slidein { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
.flash { min-height: 3.2em; margin: 0 4px; font-size: .95rem; line-height: 1.35; color: var(--energy-ink); font-weight: 700; }
.flash.show { animation: slidein .4s var(--ease) both; }

/* ───────── Démos de fonctions ───────── */
.feature { margin-bottom: 56px; }
@media (min-width: 900px) { .feature { margin-bottom: 110px; } }
.feature h3 { font-size: clamp(1.5rem, 3.2vw, 2rem); }
.feature .text p { color: var(--muted); font-size: 1.1rem; max-width: 32em; }
.demo { background: var(--card); border-radius: 28px; padding: 22px 18px; box-shadow: var(--shadow-lg); position: relative; }
@media (min-width: 500px) { .demo { padding: 28px; } }
.demo h4 { font: 600 1.2rem/1.2 'Fraunces', serif; margin: 0 0 14px; }

.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 10px; }
.day { display: grid; justify-items: center; gap: 6px; font-weight: 700; font-size: .95rem; color: var(--muted); }
.day i { width: 100%; max-width: 46px; aspect-ratio: 1; border-radius: 50%; background: var(--sunk); border: 2px dashed var(--line); display: grid; place-items: center; font-style: normal; font-size: 1.15rem; transition: background .4s, border-color .4s, transform .5s var(--spring); transition-delay: calc(var(--i) * .14s); }
.day i span { opacity: 0; transform: scale(.2); transition: opacity .3s, transform .5s var(--spring); transition-delay: calc(var(--i) * .14s + .05s); }
.demo.in .day i, .no-js .day i { background: var(--tint); border: 2px solid var(--tone); }
.demo.in .day i span, .no-js .day i span { opacity: 1; transform: none; }
.week-sum { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 22px; padding: 0; list-style: none; font-weight: 700; }
.week-sum li { display: flex; align-items: center; gap: 6px; }
.week-sum b { font: 600 1.4rem/1 'Fraunces', serif; min-width: 1ch; }
.week-sum span { color: var(--muted); font-weight: 400; }

.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 999px; background: var(--sunk); margin-bottom: 14px; }
.seg button { border: 0; background: transparent; padding: 8px 14px; min-height: 44px; border-radius: 999px; font-weight: 700; font-size: .95rem; color: var(--muted); transition: background .25s, color .25s, transform .2s var(--spring); }
.seg button:active { transform: scale(.95); }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.chart { position: relative; height: 190px; margin: 26px 14px 0 30px; outline-offset: 12px; }
.chart .grid { position: absolute; left: -30px; right: -14px; border-top: 1px solid var(--line); font-size: .95rem; line-height: 1; color: var(--muted); }
.chart .grid span { position: absolute; left: 0; top: -1.15em; }
.chart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.chart path { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.chart .area { stroke: none; fill: var(--accent); opacity: .1; }
.chart .draw { position: absolute; inset: -8px; clip-path: inset(0 100% 0 0); }
.chart .draw > div { position: absolute; inset: 8px; }
.demo.in .chart .draw, .no-js .chart .draw { clip-path: inset(0 -20px 0 0); transition: clip-path 1.5s var(--ease) .9s; }
.chart .draw.redraw { clip-path: inset(0 100% 0 0) !important; transition: none !important; }
.chart .pt { position: absolute; width: 12px; height: 12px; margin: -6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--card); transition: left .5s var(--ease), top .5s var(--ease), transform .2s; }
.chart .pt.cur { transform: scale(1.5); }
.chart .last { position: absolute; transform: translate(-50%, -175%); font-weight: 700; font-size: .95rem; transition: left .5s var(--ease), top .5s var(--ease); }
.chart .cross { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px dashed var(--line); opacity: 0; }
.chart .tip { position: absolute; z-index: 2; transform: translate(-50%, -100%); margin-top: -16px; background: var(--ink); color: var(--bg); padding: 6px 12px; border-radius: 10px; font-size: .95rem; font-weight: 700; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s; }
.chart.hover .tip, .chart.hover .cross { opacity: 1; }
.chart.hover .last { opacity: 0; }
.xaxis { display: flex; justify-content: space-between; font-size: .95rem; color: var(--muted); margin: 8px 0 0; }
.reading { margin: 14px 0 0; font-size: 1rem; }

/* PDF */
.pdf-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.pdf-tools .seg { margin: 0; }
.sheet-wrap { position: relative; padding: 0 0 6px; }
.sheet-wrap::before, .sheet-wrap::after { content: ''; position: absolute; inset: 10px 8px -4px; background: #EFE6DC; border-radius: 6px; rotate: -1.6deg; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.sheet-wrap::after { rotate: 1.2deg; background: #F7F0E8; }
.sheet { position: relative; z-index: 1; background: var(--paper); color: #2B2622; border-radius: 6px; padding: 22px 18px 18px; box-shadow: 0 6px 24px rgba(0,0,0,.16); font-size: .95rem; line-height: 1.45; min-height: 560px; padding-bottom: 58px !important; overflow: hidden;
  --ink: #2B2622; --muted: #6B6058; --line: #EAD9CB; --good: #0F7C7A; --bad: #A8432F; }
@media (min-width: 500px) { .sheet { padding: 28px 28px 22px; } }
.sheet .ln { opacity: 0; transform: translateY(8px); filter: blur(3px); }
.sheet.done .ln, .no-js .sheet .ln { opacity: 1; transform: none; filter: none; transition: opacity .45s var(--ease), transform .45s var(--ease), filter .45s; transition-delay: calc(var(--n) * .11s); }
.sheet-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; border-bottom: 3px solid #F7A23B; padding-bottom: 12px; margin-bottom: 14px; }
.sheet-top strong { font: 600 1.45rem/1.15 'Fraunces', serif; display: block; }
.sheet-top img { width: 40px; height: 40px; border-radius: 10px; flex: none; }
.sheet h5 { font: 700 .95rem/1.3 'Atkinson', sans-serif; text-transform: uppercase; letter-spacing: .05em; color: #6B6058; margin: 16px 0 6px; }
.sheet p { margin: 0 0 4px; }
.sheet ol { margin: 0; padding-left: 1.3em; }
.ctx { display: grid; grid-template-columns: 5.2em 1fr auto; gap: 10px; align-items: center; margin-bottom: 6px; }
.ctx .bar { display: flex; gap: 2px; height: 14px; width: var(--w, 100%); }
.ctx .bar i { display: block; height: 100%; border-radius: 4px; flex: var(--f) 1 0; transform: scaleX(0); transform-origin: 0 50%; }
.ctx .bar i:first-child { background: #0F7C7A; } .ctx .bar i:last-child { background: #A8432F; }
.sheet.done .ctx .bar i, .no-js .ctx .bar i { transform: none; transition: transform .7s var(--ease); transition-delay: calc(var(--n) * .11s + .15s); }
.ctx-key { display: flex; flex-wrap: wrap; gap: 4px 14px; color: #6B6058; margin-bottom: 8px; }
.ctx-key i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.sheet-foot { margin-top: 16px !important; padding-top: 10px; border-top: 1px solid #EAD9CB; color: #6B6058; }
.gen { position: absolute; z-index: 2; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; background: var(--paper); color: #2B2622; font-weight: 700; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.gen .bar { width: 180px; height: 8px; border-radius: 8px; background: #EAD9CB; overflow: hidden; }
.gen .bar i { display: block; height: 100%; width: 100%; background: #F7A23B; border-radius: 8px; transform: scaleX(0); transform-origin: 0 50%; }
.sheet.busy .gen { opacity: 1; visibility: visible; transition: none; }
.sheet.busy .gen .bar i { transform: none; transition: transform 1.1s var(--ease); }
.stamp { position: absolute; z-index: 3; right: 14px; bottom: 12px; rotate: 8deg; border: 3px solid #1F7A3A; color: #1F7A3A; background: color-mix(in srgb, #FFFDFA 85%, transparent); font-weight: 700; padding: 2px 12px; border-radius: 10px; opacity: 0; transform: scale(1.8); }
.sheet.done .stamp { opacity: 1; transform: none; transition: opacity .25s 1.3s, transform .45s var(--spring) 1.3s; }

/* Cartes de fonctions */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 18px; }
@media (min-width: 900px) { .grid { grid-template-columns: repeat(3, 1fr); } .grid .wide { grid-column: span 2; } }
.grid .card { transition: transform .35s var(--spring), box-shadow .35s; }
.grid .card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.card .ico { width: 54px; height: 54px; border-radius: 18px 22px 16px 24px; display: grid; place-items: center; font-size: 26px; margin-bottom: 14px; transition: transform .5s var(--spring), border-radius .5s; }
.card:hover .ico { transform: rotate(-8deg) scale(1.1); border-radius: 24px 16px 22px 18px; }
.card p { color: var(--muted); }
.t-accent { background: var(--accent-soft); } .t-warm { background: var(--warm-soft); } .t-energy { background: var(--energy-soft); } .t-bad { background: var(--bad-soft); } .t-good { background: var(--good-soft); }
.moods { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 10px; }
.moods span { padding: 8px 14px; border-radius: 14px; font-weight: 700; font-size: .95rem; background: var(--tint); color: var(--tone); }
.kids { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 12px; }
.kid { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 6px 16px 6px 8px; border-radius: 999px; border: 2px solid var(--line); background: var(--card); font-weight: 700; transition: border-color .25s, background .25s, transform .2s var(--spring); }
.kid::before { content: attr(data-init); width: 30px; height: 30px; border-radius: 50%; background: var(--kc); color: var(--kt); display: grid; place-items: center; font-size: .95rem; }
.kid:active { transform: scale(.95); }
.kid[aria-pressed="true"] { border-color: var(--kc); background: color-mix(in srgb, var(--kc) 14%, var(--card)); }
.k-nana { --kc: var(--warm); --kt: #2B2622; } .k-nono { --kc: var(--accent); --kt: var(--on-accent); }
.kidbook { border-radius: 14px; padding: 10px 14px; border-left: 6px solid var(--kc); background: color-mix(in srgb, var(--kc) 12%, var(--card)); color: var(--ink) !important; font-weight: 700; transition: border-color .4s, background .4s; }

/* ───────── Et vous ───────── */
.gauge { border: 0; margin: 0; padding: 0; min-width: 0; }
.gauge legend { font: 600 1.3rem/1.2 'Fraunces', serif; padding: 0; margin-bottom: 16px; }
.cells { display: grid; grid-template-columns: repeat(5, 1fr) 10px; gap: 6px; align-items: center; padding: 6px; border: 3px solid var(--ink); border-radius: 22px; position: relative; }
.cells::after { content: ''; position: absolute; right: -11px; top: 30%; bottom: 30%; width: 8px; border-radius: 0 6px 6px 0; background: var(--ink); }
.cells { grid-template-columns: repeat(5, 1fr); }
.cells label { display: grid; place-items: center; min-height: 68px; border-radius: 14px; background: var(--sunk); font-size: 1.6rem; cursor: pointer; transition: background .35s, transform .3s var(--spring); transition-delay: calc(var(--k, 0) * 40ms); -webkit-tap-highlight-color: transparent; }
.cells label:hover { transform: translateY(-3px); }
.cells label.on { background: var(--lvl); }
.cells label.sel { transform: scale(1.06); box-shadow: 0 0 0 3px var(--card), 0 0 0 6px var(--lvl); z-index: 1; }
.cells input:focus-visible + label { outline: 3px solid var(--accent); outline-offset: 5px; }
.cells label span.em { transition: transform .4s var(--spring); filter: grayscale(.6); opacity: .75; }
.cells label.on span.em, .cells label.sel span.em { filter: none; opacity: 1; }
.cells label.sel span.em { transform: scale(1.25); }
.ends { display: flex; justify-content: space-between; color: var(--muted); font-size: .95rem; margin: 10px 2px 0; }
.answer { margin-top: 18px; min-height: 5.5em; }
.answer strong { display: block; font: 600 1.6rem/1.2 'Fraunces', serif; margin-bottom: 4px; }
.answer p { color: var(--muted); margin: 0; }
.answer.swap > * { animation: slidein .45s var(--ease) both; }
.soft-help { margin-top: 18px; background: var(--bad-soft); border-radius: 20px; padding: 20px; }
.soft-help:not([hidden]) { animation: bloom .8s var(--ease) both; }
@keyframes bloom { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
.soft-help h3 { margin-bottom: 6px; }
.nums { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.nums a { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; min-height: 52px; padding: 12px 16px; border-radius: 14px; background: var(--card); color: var(--ink); text-decoration: none; transition: transform .25s var(--spring); }
.nums a:hover { transform: translateX(4px); }
.nums a b { color: var(--accent); font-size: 1.15rem; white-space: nowrap; }
.breath { display: grid; justify-items: center; gap: 12px; margin-top: 16px; }
.breath .orb { width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--warm) 70%, white), var(--warm)); display: none; scale: .6; box-shadow: 0 0 0 14px color-mix(in srgb, var(--warm) 18%, transparent); }
.breath.on .orb { display: block; animation: breathe 10s ease-in-out infinite; }
@keyframes breathe { 0% { scale: .6; } 40% { scale: 1; } 100% { scale: .6; } }
.breath .say { font-weight: 700; min-height: 1.6em; margin: 0; }

/* ───────── Vie privée ───────── */
.vault { position: relative; width: 320px; max-width: 100%; height: 372px; margin: 0 auto; }
.vault .ring { position: absolute; left: 30px; top: 50px; width: 260px; height: 260px; border-radius: 50%; border: 3px dashed var(--good); background: radial-gradient(circle, var(--good-soft) 0 55%, transparent 72%); animation: spin 60s linear infinite; }
@keyframes spin { to { rotate: 360deg; } }
.vault.try .ring { animation: spin 60s linear infinite, shield .9s var(--ease); }
@keyframes shield { 35% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--good) 35%, transparent); scale: 1.03; } }
.vault .mini { position: absolute; left: 104px; top: 82px; width: 112px; height: 196px; border-radius: 24px; background: var(--frame); padding: 6px; z-index: 2; box-shadow: var(--shadow-lg); }
.vault.try .mini { animation: nope .5s ease .25s; }
@keyframes nope { 20%,60% { translate: -5px 0; } 40%,80% { translate: 5px 0; } }
.vault .mini > div { height: 100%; border-radius: 19px; background: var(--bg); display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 16px 8px 30px; align-content: center; }
.vault .mini span { aspect-ratio: 1; border-radius: 12px; display: grid; place-items: center; font-size: 1.15rem; animation: float 5s ease-in-out infinite; animation-delay: calc(var(--i) * -1.3s); }
.vault .lock { position: absolute; left: 136px; top: 250px; z-index: 3; width: 48px; height: 48px; border-radius: 50%; background: var(--good); color: var(--bg); display: grid; place-items: center; box-shadow: 0 0 0 5px var(--bg); }
.vault .lock svg { width: 24px; height: 24px; }
.vault .lock .shackle { transition: transform .4s var(--spring); transform-origin: 16px 11px; }
.vault.try .lock { animation: pop .6s var(--spring) .3s; }
.vault .pk { position: absolute; left: 160px; top: 180px; width: 12px; height: 12px; margin: -6px; border-radius: 50%; background: var(--warm); z-index: 1; opacity: 0; animation: packet 6s var(--ease) infinite; animation-delay: var(--dl); }
@keyframes packet { 0% { transform: rotate(var(--a)) translateX(50px); opacity: 0; } 8% { opacity: 1; } 22% { transform: rotate(var(--a)) translateX(120px); opacity: 1; } 40% { transform: rotate(var(--a)) translateX(50px); opacity: 0; } 100% { transform: rotate(var(--a)) translateX(50px); opacity: 0; } }
.vault.try .pk { animation: burst .9s var(--ease) both; }
@keyframes burst { 0% { transform: rotate(var(--a)) translateX(50px) scale(1.4); opacity: 1; } 40% { transform: rotate(var(--a)) translateX(122px) scale(1.4); opacity: 1; } 55% { transform: rotate(var(--a)) translateX(112px) scale(1.8, .7); } 100% { transform: rotate(var(--a)) translateX(50px) scale(1); opacity: 0; } }
.vault .out { position: absolute; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--card); box-shadow: var(--shadow); font-weight: 700; font-size: .95rem; color: var(--muted); white-space: nowrap; }
.vault .out s { text-decoration-color: var(--bad); text-decoration-thickness: 2.5px; }
.vault .out::after { content: '✕'; width: 22px; height: 22px; border-radius: 50%; background: var(--bad-soft); color: var(--bad); display: grid; place-items: center; font-size: .75rem; }
.vault .o1 { left: 0; top: 4px; } .vault .o2 { right: 0; top: 4px; } .vault .o3 { left: 50%; translate: -50% 0; bottom: 0; }
.vault.try .out { animation: nope .5s ease .3s; }
.vault-ui { text-align: center; margin-top: 16px; }
.vault-msg { min-height: 4.6em; margin: 12px auto 0; max-width: 24em; color: var(--muted); }
.vault-msg.show { animation: slidein .4s var(--ease) both; }

.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.checks li { padding-left: 38px; position: relative; }
.checks li::before { content: '✓'; position: absolute; left: 0; top: 1px; width: 26px; height: 26px; border-radius: 50%; background: var(--energy-soft); color: var(--energy-ink); font-weight: 700; display: grid; place-items: center; font-size: .85rem; }
.checks.no li::before { content: '✕'; background: var(--bad-soft); color: var(--bad); }
.js .reveal .checks li { opacity: 0; transform: translateX(-12px); transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: calc(var(--i, 0) * .09s + .2s); }
.js .reveal.in .checks li { opacity: 1; transform: none; }
.not-card { margin-top: 40px; border: 2px dashed var(--line); box-shadow: none; background: transparent; }
@media (min-width: 900px) { .not-card { display: grid; grid-template-columns: 1fr 1.5fr; gap: 32px; align-items: center; padding: 32px; } }

/* ───────── Tarif ───────── */
.price { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; max-width: 680px; margin-top: 28px; }
.price .card { text-align: center; padding: 30px 22px; position: relative; transition: transform .35s var(--spring); }
.price .card:hover { transform: translateY(-5px) rotate(-.6deg); }
.price .amount { font: 600 clamp(2.8rem, 8vw, 3.6rem)/1.1 'Fraunces', serif; margin: 4px 0; }
.price .best { outline: 3px solid var(--warm); }
.price .best::before { content: ''; position: absolute; right: -14px; top: -14px; width: 54px; height: 54px; border-radius: 50%; background: var(--warm); box-shadow: 0 0 0 8px color-mix(in srgb, var(--warm) 25%, transparent); }

/* ───────── Pourquoi + aide ───────── */
.portrait { position: relative; width: min(360px, 86%); margin: 0 auto 8px; }
.portrait::before { content: ''; position: absolute; inset: 6% -6% -2% -6%; background: var(--warm-soft); border-radius: 58% 42% 48% 52% / 50% 44% 56% 50%; animation: morph 14s ease-in-out infinite; }
@media (prefers-color-scheme: dark) { .portrait::before { background: #3A322B; } }
@keyframes morph { 50% { border-radius: 44% 56% 58% 42% / 56% 52% 48% 44%; } }
.portrait img { position: relative; }
.help { background: var(--bad-soft); border-radius: var(--radius); padding: 24px; margin-top: 32px; }
.help ul { margin: 8px 0 0; padding-left: 1.2em; }
.help li { margin-bottom: 4px; }
.help a { font-weight: 700; }
.cta { text-align: center; overflow: clip; }
.cta .actions { justify-content: center; margin-top: 20px; }
.cta p { max-width: 30em; margin-inline: auto; }

/* ───────── Pages de texte (confidentialité, conditions, mentions, aide) ───────── */
.doc { max-width: 800px; padding: 48px 16px 80px; margin: 0 auto; position: relative; }
.doc h1 { font-size: clamp(1.9rem, 5.2vw, 2.8rem); padding-bottom: .35em; margin-bottom: .6em; background: linear-gradient(var(--warm), var(--warm)) left bottom / 84px 6px no-repeat; }
.doc::before { content: ''; position: absolute; z-index: -1; right: -60px; top: 10px; width: 220px; height: 220px; border-radius: 50%; background: var(--warm-soft); opacity: .7; }
@media (max-width: 900px) { .doc::before { right: 0; width: 130px; height: 130px; border-radius: 0 0 0 130px; top: 0; } }
.doc h2 { font-size: 1.55rem; margin-top: 1.9em; }
.doc h3 { margin-top: 1.4em; }
.doc ul { padding-left: 1.2em; }
.doc li { margin-bottom: .4em; }
.doc li::marker { color: var(--warm); }
.doc table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 12px 0 20px; font-size: .95rem; background: var(--card); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; }
.doc th, .doc td { text-align: left; border-bottom: 1px solid var(--line); padding: 12px 14px; vertical-align: top; }
.doc tr:last-child td { border-bottom: 0; }
.doc th { background: var(--sunk); }
.doc .todo { background: var(--warm-soft); border-radius: 6px; padding: 0 6px; }
.doc details { background: var(--card); border-radius: 18px; padding: 0 20px; margin-bottom: 10px; box-shadow: var(--shadow); transition: box-shadow .3s; }
.doc details[open] { box-shadow: var(--shadow-lg); }
.doc summary { font-weight: 700; cursor: pointer; padding: 16px 34px 16px 0; list-style: none; position: relative; }
.doc summary::-webkit-details-marker { display: none; }
.doc summary::after { content: '+'; position: absolute; right: 0; top: 50%; translate: 0 -50%; width: 28px; height: 28px; border-radius: 50%; background: var(--warm-soft); display: grid; place-items: center; font-weight: 700; transition: rotate .3s var(--spring); }
.doc details[open] summary::after { rotate: 45deg; }
.doc details p { margin: 0; padding: 0 0 18px; }

/* ───────── Pied de page ───────── */
footer.bottom { background: var(--sunk); padding: 48px 0 56px; font-size: .95rem; color: var(--muted); position: relative; }
footer.bottom .wrap { display: flex; flex-wrap: wrap; gap: 20px 40px; justify-content: space-between; align-items: flex-start; }
footer.bottom .brand { margin-bottom: 8px; }
footer.bottom nav { display: flex; flex-wrap: wrap; gap: 4px 6px; }
footer.bottom nav a { padding: 8px 12px; border-radius: 999px; text-decoration: none; font-weight: 700; }
footer.bottom nav a:hover { background: var(--card); }
footer.bottom a { color: var(--ink); }

/* ───────── Mouvement réduit : tout s'arrête, tout reste visible ───────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal, .js .reveal .checks li { opacity: 1; transform: none; }
  .vault .pk { display: none; }
  .breath.on .orb { scale: .85; }
}

a[href^="tel:"] { white-space: nowrap; }
@media (min-width: 900px) { .tarif { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center; } .tarif .price { margin-top: 0; } }