/* ============================================================
   Le carnet d'Iris — v3
   Fraunces + Manrope · ciel vivant en haut, papier en bas.
   ============================================================ */
:root{
  --paper:#FDFAF2; --paper2:#F5EEDC; --sand:#EFE9DA; --sand2:#DED7C4; --line:rgba(43,42,34,.09);
  --ink:#2B2A22; --ink-soft:#6B6450; --ink-mute:#8E8672;
  --coral:#D97757; --coral-d:#BD5D3E; --coral-xl:#FBE3D6;
  --iris:#7C6BB5; --iris-d:#5E4E97; --iris-l:#C9BFE6; --iris-xl:#EDE8F7;
  --vine:#7E9B5E; --vine-d:#5F7F45; --vine-xl:#E9F0DF; --grape:#6E4B78;
  --lagoon:#7BA3AB; --lagoon-d:#4E7A84; --lagoon-xl:#E0EEF0; --gold:#C99A4E; --gold-d:#9A7230; --gold-xl:#F7EBD2;
  --abyss:#2E2C26; --glass:rgba(253,250,242,.8);
  --shadow:0 10px 30px rgba(43,42,34,.12), 0 2px 6px rgba(43,42,34,.06);
  --shadow-s:0 1px 3px rgba(43,42,34,.08);
  --r:22px; --r-s:14px;
  --ease-out:cubic-bezier(.22,1,.36,1); --ease-spring:cubic-bezier(.34,1.4,.64,1);
  --sa-t:env(safe-area-inset-top,0px); --sa-b:env(safe-area-inset-bottom,0px);
  --topbar:64px; --navh:96px;
  --font-ui:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-display:"Fraunces","Iowan Old Style",Georgia,serif;
  --stars:0; --dark:0; --glow:0; --halo:1; --warm:0; --birds:1;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--abyss);background-image:radial-gradient(120% 90% at 50% 0%,#4a4335 0%,#2E2C26 55%,#1f1e1a 100%);
  color:var(--ink);font-family:var(--font-ui);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased;overflow:hidden;-webkit-tap-highlight-color:transparent;
  display:grid;place-items:center;min-height:100dvh}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0;touch-action:manipulation}
button:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--iris-l);outline-offset:2px}
h1,h2,h3{margin:0;font-family:var(--font-display);font-weight:600;letter-spacing:-.015em;text-wrap:balance}
p{margin:0}
svg{display:block}
.hidden{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);opacity:0;pointer-events:none}
.opt{font-weight:600;letter-spacing:0;text-transform:none}
.explain{color:var(--ink-soft);font-size:14px;line-height:1.5;margin:0 0 18px;max-width:34ch}
#print{display:none}

/* ---------- le téléphone ---------- */
.phone{position:relative;width:390px;height:min(844px,calc(100dvh - 32px));border-radius:46px;border:9px solid #171a24;background:var(--paper);
  box-shadow:0 30px 80px rgba(0,0,0,.55),inset 0 0 0 2px #2c3140;overflow:hidden;overflow:clip;isolation:isolate}
@media (max-width:560px),(max-height:600px){body{display:block;background:var(--paper)}.phone{width:100vw;height:100dvh;border:0;border-radius:0;box-shadow:none}}

/* ciel vivant (couleurs posées par scene.js) */
.sky{position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,#F7CDB0 0%,#F1D3CA 36%,#DCCAE2 70%,#CDE2E4 100%)}
canvas#fx{position:absolute;inset:0;z-index:12;pointer-events:none;width:100%;height:100%}

/* ---------- vues : héro (ciel) + page (papier) ---------- */
.view{position:absolute;inset:0;z-index:2;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.985);transition:opacity .38s var(--ease-out),transform .46s var(--ease-out),visibility 0s .46s}
/* une seule page garde sa couche graphique prête (celle qu'on voit) : trois écrans de mémoire vidéo rendus au téléphone */
.view.active,.view.out-l,.view.out-r{will-change:transform,opacity}
.view::-webkit-scrollbar{display:none}
/* le haut et le bas de chaque page se fondent dans le ciel : deux voiles fixes (un masque sur la page qui défile
   obligeait le téléphone à recomposer toute la page à chaque image de défilement) */
.phone{--sky0:#F7CDB0;--sky3:#CDE2E4}
.phone::before,.phone::after{content:"";position:absolute;left:0;right:0;z-index:5;pointer-events:none;transition:opacity .3s}
.phone::before{top:0;height:calc(var(--topbar) + var(--sa-t) - 12px);background:linear-gradient(to bottom,var(--sky0),transparent)}
.phone::after{bottom:0;height:calc(var(--navh) + var(--sa-b) - 26px);background:linear-gradient(to top,var(--sky3) calc(var(--sa-b) + 6px),transparent)}
.phone.play::before,.phone.play::after,.phone.intro-on::before,.phone.intro-on::after{opacity:0}
.view.active{opacity:1;visibility:visible;transform:none;transition:opacity .38s var(--ease-out),transform .46s var(--ease-out)}
.view.leaving{opacity:0;transform:translateY(-8px) scale(.99);transition:opacity .22s ease,transform .22s ease,visibility 0s .22s}
.hero{position:relative;height:300px}
.hero.small{height:calc(var(--topbar) + var(--sa-t) + 44px)}
.page{position:relative;z-index:1;margin-top:-30px;min-height:100%;background:var(--paper);border-radius:30px 30px 0 0;padding:28px 22px calc(var(--navh) + var(--sa-b) + 24px);
  box-shadow:0 -12px 40px rgba(43,42,34,.10)}
.hero.small + .page{margin-top:-26px}
.title{font-size:44px;line-height:1;font-weight:500;margin:4px 0 22px}
.title em{font-style:italic;color:var(--iris-d)}
.block{margin-top:34px}
.block>h2,.block .h h2{font-size:22px;font-weight:600}
.block .h{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.block>h2,.block .h{margin-bottom:12px}
.link{font-weight:700;font-size:13px;color:var(--coral);white-space:nowrap}
.link.block{display:block;width:100%;text-align:center;padding:16px 0 4px}
.quiet{color:var(--ink-mute);font-size:13px;font-weight:600;letter-spacing:.02em}
.quiet:empty{display:none}

/* ---------- barre du haut ---------- */
.topbar{position:absolute;left:0;right:0;top:0;z-index:6;padding:calc(12px + var(--sa-t)) 14px 0;display:flex;justify-content:space-between;pointer-events:none}
.topbar>*{pointer-events:auto}
.rbtn{width:42px;height:42px;border-radius:50%;background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:var(--shadow-s);display:grid;place-items:center;color:var(--ink);transition:transform .25s var(--ease-spring)}
.rbtn:active{transform:scale(.92)}
.rbtn svg{width:20px;height:20px}
.rbtn.off svg{opacity:.4}

/* ---------- navigation : pilule à gauche avec indicateur glissant, + à droite ---------- */
.nav{position:absolute;left:18px;bottom:calc(20px + var(--sa-b));z-index:6;display:flex;gap:2px;padding:6px;border-radius:32px;background:var(--paper);box-shadow:var(--shadow),0 0 0 1px var(--line);white-space:nowrap}
.nav .ind{position:absolute;top:6px;left:0;height:44px;width:44px;border-radius:22px;background:var(--coral);box-shadow:0 6px 16px rgba(217,119,87,.32);transition:transform .5s var(--ease-spring),width .5s var(--ease-spring);pointer-events:none}
.nav button{position:relative;z-index:1;display:flex;align-items:center;gap:7px;height:44px;padding:0 12px;border-radius:22px;font-weight:700;font-size:13.5px;color:var(--ink-soft);transition:color .35s,padding .4s var(--ease-out)}
.nav button svg{width:20px;height:20px;flex:none}
.nav button span{display:none}
.nav button.active{color:#fff;padding:0 16px 0 14px}
.nav button.active span{display:inline}
.nav.ready button.active{transition:color .35s,padding .4s var(--ease-out)}
.fab{position:absolute;right:18px;bottom:calc(20px + var(--sa-b));z-index:6;width:56px;height:56px;border-radius:50%;background:var(--iris);color:#fff;display:grid;place-items:center;box-shadow:0 10px 24px rgba(124,107,181,.35);transition:transform .35s var(--ease-spring)}
.fab svg{width:24px;height:24px}
.fab:active{transform:scale(.92) rotate(90deg)}

/* ---------- scène ---------- */
.scene-wrap{position:absolute;inset:0;overflow:hidden}
.scene-wrap::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:#2E3160;mix-blend-mode:multiply;opacity:var(--dark);transition:opacity 2s}
.scene{width:100%;height:100%;display:block}
.scene .tap{cursor:pointer;outline:none}
.stars circle{opacity:calc(var(--o) * var(--stars));animation:twinkle 4s ease-in-out infinite;animation-delay:var(--d)}
@keyframes twinkle{0%,100%{transform:scale(1)}50%{transform:scale(.55)}}
.stars circle{transform-box:fill-box;transform-origin:center}
.sun,.moon{transition:opacity 2s}
.phone.live .sun,.phone.live .moon{transition:transform 9s linear,opacity 2s}
.sun .halo{opacity:calc(var(--halo) * .8)}
.moon{opacity:0}
.glow-win{opacity:var(--glow);transition:opacity 2s}
.snow{opacity:0;transition:opacity 1.5s}
.phone.winter .snow,.phone.snow .snow{opacity:1}
.scene .cloud{animation:drift 70s linear infinite;transition:opacity 2s}
.scene .cloud.c2{animation-duration:95s;animation-delay:-30s}
.scene .cloud.c3{animation-duration:120s;animation-delay:-70s;opacity:0}
.phone.cloudy .scene .cloud,.phone.rain .scene .cloud,.phone.snow .scene .cloud{opacity:.95}
.phone.rain .scene .cloud g:last-child,.phone.snow .scene .cloud g:last-child{fill:#D9DBE3}.phone.rain .scene .cloud g:first-child,.phone.snow .scene .cloud g:first-child{fill:#9EA2B4}
@keyframes drift{from{transform:translateX(-120px)}to{transform:translateX(420px)}}
.scene .smoke circle{animation:smoke 4s ease-out infinite;opacity:0;transform-box:fill-box;transform-origin:center}
.scene .smoke circle:nth-child(2){animation-delay:1.3s}.scene .smoke circle:nth-child(3){animation-delay:2.6s}
@keyframes smoke{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:.7}100%{transform:translateY(-38px) translateX(10px) scale(1.6);opacity:0}}
.scene .tail-dog{transform-box:fill-box;transform-origin:right bottom;animation:wagslow 1.6s ease-in-out infinite}
.scene .dog.wag .tail-dog{animation:wag .18s ease-in-out infinite}
@keyframes wagslow{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(14deg)}}
@keyframes wag{0%,100%{transform:rotate(-30deg)}50%{transform:rotate(35deg)}}
.scene .dog.wag .dog-body{animation:hop .5s var(--ease-spring) 2}
.scene .dog .dog-body{transform-box:view-box}
@keyframes hop{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.scene .tail-cat{transform-box:fill-box;transform-origin:left bottom;animation:sway 3s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(0)}50%{transform:rotate(-14deg)}}
.scene .cat.purr .body{animation:purr .12s linear 10}
@keyframes purr{0%,100%{transform:translate(0,0)}50%{transform:translate(.6px,-.6px)}}
.scene .eye{transform-box:fill-box;transform-origin:center;animation:blink 5s infinite}
.scene .eye.e2{animation-delay:1.7s}
@keyframes blink{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}
.scene path,.scene circle,.scene rect,.scene ellipse,.vines{transition:fill 1.5s,stroke 1.5s,opacity 1.5s}
.vines .row-soil{stroke:#8FA36A}.vines .row-vine{stroke:#6F8E52}
:is(.scene,.land) .canopy,:is(.scene,.land) .bare,:is(.scene,.land) .blossom,:is(.scene,.land) .poppies,:is(.scene,.land) .flowers,:is(.scene,.land) .tufts,:is(.scene,.land) .path{transition:opacity 1.5s}
:is(.scene,.land) .bare{opacity:0}:is(.scene,.land) .blossom{opacity:0}:is(.scene,.land) .poppies{opacity:0}
.phone.spring :is(.scene,.land) .blossom{opacity:1}.phone.spring .meadow{fill:#93B571}.phone.spring .hill-vine{fill:#AFC58F}
.phone.summer :is(.scene,.land) .poppies{opacity:1}.phone.summer .hill-vine{fill:#9DB878}.phone.summer .vines .row-vine{stroke:#5F7F45}.phone.summer .vines .row-soil{stroke:#86A060}.phone.summer .meadow{fill:#86A863}.phone.summer .meadow2{fill:#93B36E}
.phone.autumn .hill-vine{fill:#C9B57E}.phone.autumn .vines .row-vine{stroke:#C2843F}.phone.autumn .vines .row-soil{stroke:#B49B6A}.phone.autumn .tree-c{fill:url(#gLeafAut)}.phone.autumn .land .tree-c{fill:url(#igLeafAut)}.phone.autumn .tree-c2{fill:#E0AF6A}.phone.autumn .tree-c3{fill:#B8763F}.phone.autumn .tree-c4{fill:#E8BD78}.phone.autumn .meadow{fill:#A5B06A}.phone.autumn .meadow2{fill:#B3BD78}.phone.autumn .hill-far{fill:#D9C5CF}.phone.autumn .hill-far2{fill:#E4D7DF}.phone.autumn :is(.scene,.land) .flowers{opacity:.4}.phone.autumn .roses circle:nth-child(n+4){opacity:0}
.phone.winter .hill-vine{fill:#DDD8C8}.phone.winter .vines .row-vine{stroke:#A39A86}.phone.winter .vines .row-soil{stroke:#C9C2B0}.phone.winter :is(.scene,.land) .canopy{opacity:0}.phone.winter :is(.scene,.land) .bare{opacity:1}.phone.winter .meadow{fill:#E6E5DA}.phone.winter .meadow2{fill:#EFEEE6}.phone.winter .hill-far{fill:#E4DFEA}.phone.winter .hill-far2{fill:#ECE8F1}.phone.winter :is(.scene,.land) .flowers,.phone.winter :is(.scene,.land) .tufts{opacity:0}.phone.winter :is(.scene,.land) .path{opacity:.5}.phone.winter .roses circle{opacity:0}.phone.winter :is(.scene,.land) .mist{opacity:1.4}
/* lumière dorée (aube, crépuscule) */
.scene-wrap .warm{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(255,150,80,.9) 0%,rgba(255,120,70,.55) 60%,rgba(255,170,90,.2) 100%);mix-blend-mode:soft-light;opacity:var(--warm);transition:opacity 2s}
/* oiseaux */
.scene .birds{opacity:var(--birds);transition:opacity 2s}
.scene .flock{animation:fly var(--dur) linear infinite;animation-delay:var(--delay);transform:translate(-40px,var(--y))}
.scene .flock path{transform-box:fill-box;transform-origin:center;animation:flap 1.1s ease-in-out infinite}
.scene .flock.b2 path{animation-duration:.9s}.scene .flock.b3 path{animation-duration:1.3s;animation-delay:-.4s}
@keyframes fly{0%{transform:translate(-40px,var(--y))}50%{transform:translate(195px,calc(var(--y) - 10px))}100%{transform:translate(440px,var(--y))}}
@keyframes flap{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.35)}}
/* lucioles */
.scene .fireflies{opacity:0;transition:opacity 2s;filter:drop-shadow(0 0 3px #FFE98A)}
.phone.night.summer .scene .fireflies,.phone.night.spring .scene .fireflies{opacity:1}
.phone.rain .scene .fireflies,.phone.snow .scene .fireflies{opacity:0}
.scene .fireflies circle{animation:firefly var(--t) ease-in-out infinite;animation-delay:var(--d);opacity:0;transform-box:fill-box;transform-origin:center}
@keyframes firefly{0%,100%{opacity:0;transform:translate(0,0)}30%{opacity:.9;transform:translate(3px,-4px)}60%{opacity:.35;transform:translate(-2px,-8px)}80%{opacity:.8;transform:translate(2px,-5px)}}
.scene .lamp-glow{opacity:var(--glow);transition:opacity 2s}
.sun .ray{opacity:calc(var(--halo) * .9)}
.phone.night .scene .birds{opacity:0}
.bubble{position:absolute;z-index:2;padding:7px 12px;border-radius:14px;background:var(--paper);box-shadow:var(--shadow);font-family:var(--font-display);font-size:16px;font-style:italic;color:var(--ink);pointer-events:none;
  transform:translate(-50%,-100%) scale(.6);opacity:0;transition:transform .35s var(--ease-spring),opacity .25s;white-space:nowrap}
.bubble.show{transform:translate(-50%,-115%) scale(1);opacity:1}
.bubble::after{content:"";position:absolute;left:50%;bottom:-5px;width:11px;height:11px;background:var(--paper);transform:translateX(-50%) rotate(45deg);border-radius:2px}

/* ---------- accueil ---------- */
.age{text-align:left}
.age .lbl{font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:var(--ink-mute)}
.age .big{font-size:50px;line-height:1;font-weight:500;margin:8px 0 4px;letter-spacing:-.02em}
.age .big em{font-style:italic;color:var(--iris-d)}
.age .sub{font-family:var(--font-display);font-size:22px;font-style:italic;color:var(--ink-soft)}
.age .sub:empty,.age .born:empty{display:none}
.age .born{margin-top:10px;font-size:13.5px;color:var(--ink-mute);line-height:1.5}
.age .btn{margin-top:14px}
#stats-line{margin-top:14px}
.rows{display:flex;flex-direction:column}
.rows .row{display:flex;align-items:center;gap:14px;padding:13px 0;border-top:1px solid var(--line);width:100%;text-align:left}
.rows .row:first-child{border-top:0}
.rows .ico{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--sand);color:var(--ink-soft)}
.rows .ico svg{width:18px;height:18px}
.rows .ico.iris{background:var(--iris-xl);color:var(--iris-d)}.rows .ico.gold{background:var(--gold-xl);color:var(--gold-d)}.rows .ico.lagoon{background:var(--lagoon-xl);color:var(--lagoon-d)}.rows .ico.coral{background:var(--coral-xl);color:var(--coral-d)}.rows .ico.vine{background:var(--vine);color:#fff}.rows .ico.done{background:var(--vine);color:#fff}
.rows .txt{flex:1;min-width:0}.rows .txt b{display:block;font-size:15px;line-height:1.3;overflow-wrap:anywhere}.rows .txt small{display:block;color:var(--ink-mute);font-size:12.5px;margin-top:2px}
.rows .end{flex:none;text-align:right}
.rows .end b{display:block;font-family:var(--font-display);font-size:18px;font-weight:600;color:var(--coral);line-height:1}
.rows .end small{display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;color:var(--ink-mute);margin-top:4px}
.rows .end .st{display:inline-block;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:800;padding:5px 9px;border-radius:10px;background:var(--sand);color:var(--ink-soft)}
.rows .end .st.done{background:var(--vine-xl);color:var(--vine-d)}.rows .end .st.soon{background:var(--gold-xl);color:var(--gold-d)}.rows .end .st.late{background:var(--coral-xl);color:var(--coral-d)}
.rows .vals{display:flex;gap:12px;font-family:var(--font-display);font-size:18px;color:var(--ink);font-variant-numeric:tabular-nums;flex:none}
.rows .vals span{display:flex;flex-direction:column;align-items:flex-end;line-height:1}
.rows .vals small{font-family:var(--font-ui);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;color:var(--ink-mute);margin-top:4px}
.empty{padding:18px 0;color:var(--ink-mute);font-size:14px;line-height:1.5}
.month-cta{display:flex;align-items:center;gap:14px;width:100%;text-align:left}
.month-cta .thumb{width:72px;height:72px;border-radius:18px;overflow:hidden;background:var(--iris-xl);display:grid;place-items:center;flex:none;font-family:var(--font-display);font-size:26px;color:var(--iris-d)}
.month-cta .thumb img{width:100%;height:100%;object-fit:cover}
.month-cta .thumb svg{width:26px;height:26px}
.month-cta .txt{flex:1;min-width:0}.month-cta .txt b{display:block;font-size:16px}.month-cta .txt small{display:block;color:var(--ink-mute);font-size:13px;margin-top:2px}
.month-cta .chev{width:20px;height:20px;color:var(--ink-mute);flex:none}
.strip{display:flex;gap:10px;overflow-x:auto;margin:0 -22px;padding:2px 22px 6px;scroll-snap-type:x mandatory;scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.strip .ph{flex:none;width:150px;height:150px;border-radius:20px;overflow:hidden;background:var(--sand);scroll-snap-align:start;position:relative}
.strip .ph img{width:100%;height:100%;object-fit:cover;display:block}
.strip .ph span{position:absolute;left:10px;right:10px;bottom:9px;font-size:12px;font-weight:700;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.strip .ph.txt{display:flex;align-items:flex-end;background:var(--iris-xl)}
.strip .ph.txt span{color:var(--iris-d);text-shadow:none;white-space:normal;font-family:var(--font-display);font-size:16px;font-weight:600;line-height:1.2}
.family{display:flex;gap:14px;overflow-x:auto;margin:0 -22px;padding:2px 22px 6px;scrollbar-width:none}
.family::-webkit-scrollbar{display:none}
.fam{flex:none;width:84px;text-align:center}
.fam .ava{width:70px;height:70px;border-radius:50%;overflow:hidden;background:var(--sand);margin:0 auto 7px;display:grid;place-items:center;color:var(--iris-d)}
.fam .ava img{width:100%;height:100%;object-fit:cover}
.fam .ava svg{width:26px;height:26px}
.fam b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fam small{display:block;font-size:10.5px;color:var(--ink-mute);font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-top:1px}
.fam.add .ava{background:transparent;border:2px dashed var(--sand2);color:var(--ink-mute)}

/* ---------- boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 20px;border-radius:23px;font-weight:700;font-size:14.5px;background:var(--coral);color:#fff;box-shadow:0 8px 18px rgba(217,119,87,.25);transition:transform .25s var(--ease-spring);white-space:nowrap}
.btn:active{transform:scale(.96)}
.btn.ghost{background:var(--sand);color:var(--ink);box-shadow:none}
.btn.iris{background:var(--iris);box-shadow:0 8px 18px rgba(124,107,181,.25)}
.btn svg{width:18px;height:18px;flex:none}
.btn.sm{height:38px;padding:0 14px;font-size:13px}

/* ---------- onglets avec pilule glissante ---------- */
.subtabs,.toggle{position:relative;display:flex;gap:2px;padding:4px;border-radius:20px;background:var(--sand);margin:0 0 22px;overflow-x:auto;scrollbar-width:none}
.subtabs::-webkit-scrollbar,.toggle::-webkit-scrollbar{display:none}
.subtabs .ind,.toggle .ind{position:absolute;top:4px;left:0;height:34px;width:60px;border-radius:16px;background:var(--paper);box-shadow:var(--shadow-s);transition:transform .45s var(--ease-spring),width .45s var(--ease-spring);pointer-events:none}
.subtabs button,.toggle button{position:relative;z-index:1;flex:1 0 auto;height:34px;padding:0 7px;border-radius:16px;font-weight:700;font-size:11px;letter-spacing:-.01em;color:var(--ink-soft);white-space:nowrap;transition:color .3s}
.subtabs button.active,.toggle button.active{color:var(--ink)}
.toggle{width:max-content;max-width:100%;margin:0 auto 10px}
.subview{display:none}.subview.active{display:block;animation:fadein .35s var(--ease-out)}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.filters{display:flex;gap:6px;overflow-x:auto;margin:0 -22px 20px;padding:0 22px;scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.filters button{flex:none;height:34px;padding:0 14px;border-radius:17px;background:var(--sand);font-weight:700;font-size:12.5px;color:var(--ink-soft);transition:background .25s,color .25s}
.filters button.active{background:var(--ink);color:var(--paper)}

/* ---------- premières fois : tuiles photo ---------- */
.firsts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.first.wide{grid-column:1/-1;aspect-ratio:16/9}
.first.wide .t{font-size:22px}
.first{position:relative;aspect-ratio:1;border-radius:20px;overflow:hidden;background:var(--sand);text-align:left;cursor:pointer;display:flex;flex-direction:column;justify-content:flex-end;padding:12px;transition:transform .25s var(--ease-spring)}
.first:active{transform:scale(.96)}
.first img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.first::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(20,18,30,.62),rgba(20,18,30,0) 60%);opacity:0;transition:opacity .3s}
.first.photo::after{opacity:1}
.first .ico{position:absolute;top:12px;left:12px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--paper);color:var(--iris-d)}
.first .ico svg{width:19px;height:19px}
.first .t{position:relative;z-index:1;font-family:var(--font-display);font-size:16px;font-weight:600;line-height:1.15;color:var(--ink)}
.first .d{position:relative;z-index:1;font-size:11.5px;font-weight:700;color:var(--ink-mute);margin-top:4px}
.first.done{background:var(--iris)}
.first.done .t{color:#fff}.first.done .d{color:rgba(255,255,255,.8)}
.first.done .ico{background:rgba(255,255,255,.22);color:#fff}
.first.photo .t{color:#fff}.first.photo .d{color:rgba(255,255,255,.85)}.first.photo .ico{background:rgba(255,255,255,.9);color:var(--iris-d)}
.first.custom.done{background:var(--grape)}
.first.add{background:transparent;border:2px dashed var(--sand2);align-items:center;justify-content:center;color:var(--ink-mute)}
.first.add .ico{position:static;background:var(--sand);margin-bottom:8px}
.first.add .t{font-family:var(--font-ui);font-size:13px;font-weight:700;color:var(--ink-soft);text-align:center}

/* ---------- souvenirs ---------- */
.memories{display:flex;flex-direction:column;gap:16px}
.memories .mh{font-family:var(--font-display);font-size:24px;font-weight:600;margin:14px 0 2px}
.memories .mh:first-child{margin-top:0}
.memory.side{flex-direction:row;gap:14px;align-items:center}
.memory.side img{width:104px;height:104px;aspect-ratio:1;border-radius:16px;flex:none}
.memory.side .body{padding:0;min-width:0}
.memory.side h3{font-size:18px}
.memory.side p{-webkit-line-clamp:2}
.memory.quote{padding:18px 20px;border-radius:20px;background:var(--iris-xl)}
.memory.quote h3{font-family:var(--font-display);font-style:italic;font-weight:500;font-size:22px;color:var(--iris-d);line-height:1.25}
.memory.big img{aspect-ratio:1}
.memory{display:flex;flex-direction:column;align-items:stretch;width:100%;text-align:left}
.memory img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:20px;background:var(--sand)}
.memory .body{padding:12px 2px 0}
.memory .meta{font-size:12px;color:var(--ink-mute);font-weight:700}
.memory .meta .age{color:var(--coral)}
.memory h3{font-size:21px;margin-top:3px;overflow-wrap:anywhere}
.memory p{margin-top:5px;color:var(--ink-soft);font-size:14px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.memory.nophoto{padding:16px 18px;border-radius:20px;background:var(--paper2)}
.memory.nophoto .body{padding:0}
.memory.quote .body{padding:0}

/* ---------- lettres ---------- */
.letters{display:flex;flex-direction:column}
.letter{display:flex;gap:14px;align-items:center;width:100%;text-align:left;padding:16px 0;border-top:1px solid var(--line)}
.letter:first-child{border-top:0}
.letter .ico{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--iris-xl);color:var(--iris-d);flex:none}
.letter .ico svg{width:22px;height:22px}
.letter .txt{flex:1;min-width:0}
.letter h3{font-size:20px;overflow-wrap:anywhere}
.letter .meta{font-size:12.5px;color:var(--ink-mute);font-weight:600;margin-top:3px}
.letter .meta b{color:var(--iris-d)}
.letter.sealed .ico{background:var(--gold-xl);color:var(--gold-d)}
.letter.sealed .meta b{color:var(--gold-d)}
.read-head{margin:4px 0 16px}
.read-head .kicker{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:var(--iris-d)}
.read-head h2{font-size:28px;margin:6px 0 4px}
.read-head .meta{font-size:13px;color:var(--ink-mute);font-weight:600}
.letter-body{font-family:var(--font-display);font-size:18px;line-height:1.6;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere;padding:18px 20px;border-radius:18px;background:var(--paper2);margin-bottom:16px}
.letter-body.sealed{text-align:center;font-style:italic;color:var(--ink-soft)}
.letter-body svg{width:32px;height:32px;margin:0 auto;color:var(--gold-d)}

/* ---------- photos par âge ---------- */
.months{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mslot{position:relative;aspect-ratio:1;border-radius:16px;overflow:hidden;background:var(--sand);display:grid;place-items:center;width:100%}
.mslot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mslot .n{font-family:var(--font-display);font-size:26px;color:var(--iris-d);line-height:1;text-align:center}
.mslot .n small{display:block;font-family:var(--font-ui);font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;color:var(--ink-mute);margin-top:4px}
.mslot.has .n{position:absolute;left:9px;bottom:8px;color:#fff;font-size:18px;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.mslot.has .n small{color:rgba(255,255,255,.9);margin-top:2px}
.mslot.current{box-shadow:0 0 0 2.5px var(--coral)}
.mslot.future{opacity:.45}
.mgroup{grid-column:1/-1;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--ink-mute);padding:14px 0 2px}

/* ---------- santé ---------- */
.hsum{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 22px}
.hsum .k{padding:14px 12px 12px;border-radius:18px;background:var(--paper2)}
.hsum .k small{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--ink-mute)}
.hsum .k b{display:block;font-family:var(--font-display);font-size:22px;font-weight:600;line-height:1.1;margin-top:6px;font-variant-numeric:tabular-nums}
.hsum .k b i{font-style:normal;font-family:var(--font-ui);font-size:11px;font-weight:800;color:var(--ink-mute);margin-left:2px}
.hsum .k em{display:block;font-style:normal;font-size:11.5px;font-weight:700;color:var(--lagoon-d);margin-top:4px}
.hsum .k.empty{color:var(--ink-mute)}
.chart{width:100%;height:auto;display:block;font-family:var(--font-ui)}
.chart .grid line{stroke:var(--line);stroke-width:1}
.chart .axis text{fill:var(--ink-mute);font-size:10px;font-weight:700}
.chart .band{fill:var(--lagoon);opacity:.11}
.chart .band2{fill:var(--lagoon);opacity:.13}
.chart .ref{fill:none;stroke:var(--lagoon);stroke-width:1.5;stroke-dasharray:4 4;opacity:.9}
.chart .plbl{fill:var(--lagoon-d);font-size:9px;font-weight:800}
.chart .area{fill:url(#gArea)}
.chart .line{fill:none;stroke:var(--coral);stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round}
.chart .dot{fill:var(--paper);stroke:var(--coral);stroke-width:2.5;cursor:pointer}
.chart .dot.last,.chart .dot.sel{fill:var(--coral)}
.chart .lbl{fill:var(--ink);font-size:11px;font-weight:800}
.chart .lbl.sub{fill:var(--ink-mute);font-size:9.5px;font-weight:700}
.chart .note{fill:var(--ink-mute);font-size:12px;font-weight:600}
.legend{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;font-size:11px;color:var(--ink-mute);font-weight:700;padding:6px 0 0}
.legend i{display:inline-block;width:16px;height:0;border-top:2.5px solid var(--coral);vertical-align:middle;margin-right:5px;border-radius:2px}
.legend i.ref{border-top:2px dashed var(--lagoon)}
.legend i.band{height:8px;border:0;background:var(--lagoon);opacity:.25;border-radius:3px}
.readout{margin:14px 0 10px;font-size:14px;color:var(--ink-soft);font-weight:600;text-align:center}
.readout b{color:var(--coral);font-family:var(--font-display);font-size:17px;font-weight:600}
.readout:empty{display:none}
.teeth{width:100%;height:auto;display:block;margin:-4px 0 4px}
.teeth .tooth{cursor:pointer}
.teeth .tooth rect,.teeth .tooth path.crown{fill:#FFFDF7;stroke:#D9CFC0;stroke-width:1.4;transition:fill .25s,stroke .25s,transform .2s var(--ease-spring);transform-box:fill-box;transform-origin:center}
.teeth .tooth:active rect{transform:scale(.9)}
.teeth .tooth.out rect{fill:var(--iris);stroke:var(--iris-d)}
.teeth .gum{fill:none;stroke:#F3D3CC;stroke-width:44;stroke-linecap:round}
.teeth .gum2{fill:none;stroke:#EBC0B8;stroke-width:3;stroke-linecap:round}
.teeth .side{fill:var(--ink-mute);font-size:9.5px;font-weight:800;letter-spacing:.12em;font-family:var(--font-ui)}
.teeth-count{text-align:center;font-family:var(--font-display);font-size:19px;color:var(--ink-soft);margin:0 0 14px}
.teeth-count b{color:var(--iris-d);font-weight:600}
.groups{display:flex;flex-direction:column;gap:22px}
.group .gh{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px}
.group .gh h3{font-size:19px}
.group .gh small{font-size:11.5px;font-weight:700;color:var(--ink-mute)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px 0 8px;border-radius:20px;background:var(--sand);font-weight:700;font-size:13px;color:var(--ink-soft);max-width:100%}
.chip svg{width:22px;height:22px;flex:none;border-radius:50%;padding:4px;background:var(--paper);color:var(--ink-mute)}
.chip span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip.done{background:var(--vine-xl);color:var(--vine-d)}.chip.done svg{background:var(--vine);color:#fff}
.chip.soon{background:var(--gold-xl);color:var(--gold-d)}.chip.soon svg{background:var(--gold);color:#fff}
.chip.late{background:var(--coral-xl);color:var(--coral-d)}.chip.late svg{background:var(--coral);color:#fff}
.steps{position:relative;padding-left:26px}
.steps::before{content:"";position:absolute;left:8px;top:8px;bottom:8px;width:2px;background:var(--line)}
.step{position:relative;display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:11px 0}
.step::before{content:"";position:absolute;left:-23px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--paper);border:2.5px solid var(--sand2)}
.step.done::before{background:var(--vine);border-color:var(--vine)}
.step.soon::before{border-color:var(--gold);background:var(--gold-xl)}
.step.late::before{border-color:var(--coral);background:var(--coral-xl)}
.step .txt{flex:1;min-width:0}.step .txt b{display:block;font-size:15px}.step .txt small{display:block;font-size:12.5px;color:var(--ink-mute);margin-top:2px}
.step .st{flex:none;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:800;padding:5px 9px;border-radius:10px;background:var(--sand);color:var(--ink-soft)}
.step.done .st{background:var(--vine-xl);color:var(--vine-d)}.step.soon .st{background:var(--gold-xl);color:var(--gold-d)}.step.late .st{background:var(--coral-xl);color:var(--coral-d)}
.steps .more{display:block;width:100%;text-align:left;padding:10px 0;font-weight:700;font-size:13px;color:var(--coral)}

/* ---------- frise ---------- */
.timeline{position:relative;padding-top:6px}
.timeline .tl-track{position:absolute;left:13px;top:10px;bottom:24px;width:2px;background:var(--line);border-radius:2px}
.timeline .tl-draw{position:absolute;left:12px;top:10px;width:4px;height:var(--drawn,0px);max-height:calc(100% - 34px);border-radius:3px;background:linear-gradient(to bottom,var(--iris),var(--coral));transition:height .25s linear;box-shadow:0 0 10px rgba(124,107,181,.35)}
.tl-item{opacity:0;transform:translateY(18px);transition:opacity .55s var(--ease-out),transform .6s var(--ease-out)}
.tl-item.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.tl-item{opacity:1;transform:none}}
.scrub{display:flex;gap:6px;overflow-x:auto;margin:0 -22px 12px;padding:0 22px;scrollbar-width:none}
.scrub::-webkit-scrollbar{display:none}
.scrub button{flex:none;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:56px;padding:8px 10px;border-radius:14px;background:var(--paper2);font-weight:800;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.scrub button b{font-family:var(--font-display);font-size:18px;font-weight:600;color:var(--iris-d);letter-spacing:0;text-transform:none}
.scrub button.on{background:var(--iris-xl)}
.timeline .month{position:relative;z-index:1;display:table;margin:6px 0 12px 40px;padding:6px 12px;border-radius:12px;background:var(--paper2);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--ink-soft)}
.tl-item{position:relative;display:grid;grid-template-columns:28px 1fr;gap:12px;padding:0 0 18px}
.tl-item .dot{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--sand);color:var(--ink-soft);z-index:1;box-shadow:0 0 0 4px var(--paper)}
.tl-item .dot svg{width:15px;height:15px}
.tl-item.k-first .dot{background:var(--iris);color:#fff}.tl-item.k-first.k-custom .dot{background:var(--grape)}
.tl-item.k-memory .dot{background:var(--coral);color:#fff}.tl-item.k-letter .dot{background:var(--iris-d);color:#fff}.tl-item.k-monthly .dot{background:var(--grape);color:#fff}
.tl-item.k-measure .dot,.tl-item.k-tooth .dot,.tl-item.k-vaccine .dot,.tl-item.k-visit .dot,.tl-item.k-log .dot{background:var(--lagoon);color:#fff}
.tl-item.k-birth .dot{background:var(--gold);color:#fff}
.tl-card{text-align:left;width:100%;min-width:0;padding:2px 0 0}
.tl-card .meta{font-size:12px;color:var(--ink-mute);font-weight:700}
.tl-card .meta b{color:var(--coral);font-weight:800}
.tl-card h3{font-size:18px;margin-top:2px;overflow-wrap:anywhere}
.tl-card p{font-size:13.5px;color:var(--ink-soft);margin-top:4px;overflow-wrap:anywhere}
.tl-card img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:14px;margin-top:10px;background:var(--sand)}
.tl-card .vals{margin-top:6px;font-family:var(--font-display);font-size:17px;color:var(--ink);display:flex;gap:14px;flex-wrap:wrap}
.tl-card .vals small{font-family:var(--font-ui);font-size:11px;color:var(--ink-mute);font-weight:700}

/* ---------- panneaux ---------- */
.backdrop{position:absolute;inset:0;z-index:20;background:rgba(43,42,34,.32);opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
.backdrop.show{opacity:1;visibility:visible;transition:opacity .3s}
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:21;max-height:calc(100% - 40px);overflow-y:auto;background:var(--paper);border-radius:28px 28px 0 0;padding:10px 22px calc(24px + var(--sa-b));
  transform:translateY(105%);transition:transform .5s var(--ease-out),visibility 0s .5s;box-shadow:0 -10px 40px rgba(0,0,0,.16);scrollbar-width:none;visibility:hidden}
.sheet.show{will-change:transform} /* la couche graphique n'est réservée qu'au panneau ouvert, pas aux trente autres */
.sheet::-webkit-scrollbar{display:none}
.sheet.show{transform:none;visibility:visible;transition:transform .5s var(--ease-out)}
.sheet .handle{width:40px;height:5px;border-radius:3px;background:var(--sand2);margin:0 auto 16px}
.sheet h2{font-size:26px;margin-bottom:6px;overflow-wrap:anywhere}
.sheet-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.sheet-head h2{margin:0}
.sheet-head .ico{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--iris-xl);color:var(--iris-d);flex:none}
.sheet-head .ico svg{width:24px;height:24px}
.sheet-head .ico.coral{background:var(--coral-xl);color:var(--coral-d)}.sheet-head .ico.lagoon{background:var(--lagoon-xl);color:var(--lagoon-d)}.sheet-head .ico.gold{background:var(--gold-xl);color:var(--gold-d)}
.sheet .lead{color:var(--ink-soft);font-size:14px;margin:-4px 0 16px}
.sheet .row{display:flex;gap:10px}
.sheet .row>*{flex:1;min-width:0}
.addgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:4px 0 6px}
.addgrid button{display:flex;flex-direction:column;align-items:center;gap:9px;padding:16px 6px 14px;border-radius:18px;background:var(--paper2);font-weight:700;font-size:12.5px;color:var(--ink);transition:transform .25s var(--ease-spring)}
.addgrid button:active{transform:scale(.95)}
.addgrid .ico{width:44px;height:44px;border-radius:50%;display:grid;place-items:center}
.addgrid .ico svg{width:22px;height:22px}
.addgrid .ico.a{background:var(--iris-xl);color:var(--iris-d)}.addgrid .ico.b{background:var(--coral-xl);color:var(--coral-d)}.addgrid .ico.c{background:var(--lagoon-xl);color:var(--lagoon-d)}.addgrid .ico.d{background:var(--gold-xl);color:var(--gold-d)}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field>label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--ink-mute)}
.field input,.field textarea{width:100%;height:48px;padding:0 14px;border-radius:14px;border:2px solid var(--sand2);background:var(--paper2);font-size:15px;transition:border-color .2s;-webkit-appearance:none;appearance:none;min-width:0}
.field textarea{height:auto;min-height:90px;padding:12px 14px;resize:vertical;line-height:1.4}
.field textarea.tall{min-height:200px;font-family:var(--font-display);font-size:17px;line-height:1.5}
.field input:focus,.field textarea:focus{border-color:var(--iris);outline:none}
.field input[type=date],.field input[type=time]{display:block;text-align:left;line-height:44px}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-mute);opacity:1}
.field .unit{position:relative}
.field .unit input{padding-right:38px}
.field .unit span{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:11px;font-weight:800;color:var(--ink-mute);letter-spacing:.06em;text-transform:uppercase}
.icon-row{display:flex;gap:8px;overflow-x:auto;padding:2px 0 6px;scrollbar-width:none}
.icon-row::-webkit-scrollbar{display:none}
.icon-row button{flex:none;width:46px;height:46px;border-radius:14px;background:var(--paper2);border:2px solid transparent;display:grid;place-items:center;color:var(--ink-soft)}
.icon-row button svg{width:22px;height:22px}
.icon-row button.active{border-color:var(--iris);background:var(--iris-xl);color:var(--iris-d)}
.icon-row.roles button{width:auto;padding:0 12px;gap:6px;display:flex;align-items:center;font-weight:700;font-size:12.5px}
.photo-pick{position:relative;width:100%;aspect-ratio:16/10;border-radius:16px;overflow:hidden;background:var(--paper2);border:2px dashed var(--sand2);display:grid;place-items:center;color:var(--ink-mute);font-weight:700;font-size:13.5px;cursor:pointer}
.photo-pick.square{aspect-ratio:1;width:200px;margin:0 auto}
.photo-pick.round{aspect-ratio:1;width:150px;margin:0 auto;border-radius:50%}
.photo-pick img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
.photo-pick.has img{display:block}
.photo-pick.has{border-style:solid;border-color:var(--sand2)}
.photo-pick input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.photo-pick .ph{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:8px}
.photo-pick .ph svg{width:26px;height:26px;opacity:.7}
.photo-pick.has .ph{display:none}
.sheet .actions{display:flex;gap:10px;margin-top:6px}
.sheet .actions .btn{flex:1;padding:0 12px}
.sheet .danger{display:block;margin:14px auto 0;font-size:13px;font-weight:700;color:var(--coral-d);padding:6px 10px}
.settings-list{display:flex;flex-direction:column}
.srow{display:flex;align-items:center;gap:12px;padding:13px 0;border-top:1px solid var(--line);width:100%;text-align:left}
.srow:first-child{border-top:0}
.srow .ico{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--sand);flex:none;color:var(--ink)}
.srow .ico svg{width:18px;height:18px}
.srow .txt{flex:1;min-width:0}.srow .txt b{display:block;font-size:14.5px}.srow .txt small{display:block;color:var(--ink-mute);font-size:12px;margin-top:1px}
.srow .val{font-weight:700;font-size:13px;color:var(--coral);white-space:nowrap}
#set-wipe .ico{color:var(--coral-d)}
.switch{width:46px;height:28px;border-radius:14px;background:var(--sand2);position:relative;transition:background .25s;flex:none}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:var(--shadow-s);transition:transform .25s var(--ease-spring)}
.switch.on{background:var(--iris)}.switch.on::after{transform:translateX(18px)}
.card-preview{border-radius:18px;overflow:hidden;box-shadow:var(--shadow);margin-bottom:16px;background:var(--sand);aspect-ratio:4/5}
.card-preview img{display:block;width:100%;height:100%;object-fit:cover}

/* ---------- lightbox / toast ---------- */
.lightbox{position:absolute;inset:0;z-index:25;background:rgba(20,18,14,.93);display:grid;place-items:center;grid-template-rows:1fr auto;opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s;padding:60px 0 40px}
.lightbox.show{opacity:1;visibility:visible;transition:opacity .3s}
.lightbox img{max-width:94%;max-height:100%;border-radius:12px;object-fit:contain}
.lightbox .cap{color:var(--paper);font-family:var(--font-display);font-style:italic;font-size:16px;padding:12px 24px 0;text-align:center}
.lightbox .cap:empty{display:none}
.lightbox button{position:absolute;top:calc(16px + var(--sa-t));right:16px}
.toast{position:absolute;left:50%;bottom:calc(var(--navh) + var(--sa-b));transform:translate(-50%,20px);z-index:30;padding:10px 16px;border-radius:16px;background:var(--ink);color:var(--paper);font-weight:700;font-size:13.5px;opacity:0;transition:opacity .3s,transform .3s var(--ease-spring);pointer-events:none;white-space:nowrap;max-width:90%;overflow:hidden;text-overflow:ellipsis}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- entrée ---------- */
.intro{position:absolute;inset:0;z-index:10;display:grid;place-items:center;overflow:hidden;cursor:pointer;transition:opacity 1s ease,visibility 0s 1s}
.intro.gone{opacity:0;visibility:hidden;pointer-events:none}
.intro.gone *{animation-play-state:paused!important} /* une fois l'intro passée, ses 120 étoiles ne clignotent plus dans le vide */
.phone.intro-on .view,.phone.intro-on .topbar,.phone.intro-on .nav,.phone.intro-on .fab{opacity:0!important;visibility:hidden!important;transition:opacity .6s ease .4s,visibility 0s}
.intro .rays{position:absolute;inset:-40%;background:conic-gradient(from 0deg,rgba(255,244,207,0) 0deg,rgba(255,244,207,.22) 12deg,rgba(255,244,207,0) 24deg,rgba(255,244,207,0) 60deg,rgba(255,244,207,.18) 72deg,rgba(255,244,207,0) 84deg,rgba(255,244,207,0) 140deg,rgba(255,244,207,.2) 152deg,rgba(255,244,207,0) 164deg,rgba(255,244,207,0) 230deg,rgba(255,244,207,.16) 242deg,rgba(255,244,207,0) 254deg,rgba(255,244,207,0) 300deg,rgba(255,244,207,.2) 312deg,rgba(255,244,207,0) 324deg);
  animation:rays 90s linear infinite;opacity:calc(.9 - var(--dark));mix-blend-mode:soft-light}
@keyframes rays{to{transform:rotate(360deg)}}
.intro svg.land{position:absolute;left:0;right:0;bottom:0;width:100%;height:100%;display:block}
.intro .wordmark{position:relative;z-index:2;font-family:var(--font-display);font-style:italic;font-weight:400;font-size:112px;line-height:1;letter-spacing:-.02em;color:var(--iris-d);margin:0 0 20px;text-shadow:0 2px 40px rgba(253,250,242,.7);display:flex}
.phone.night .intro .wordmark{color:#F1E9FF;text-shadow:0 0 40px rgba(201,191,230,.6)}
.intro .wordmark span{display:inline-block;opacity:0;transform:translateY(24px);filter:blur(8px);animation:letter 1.4s var(--ease-out) 1.1s forwards}
.intro .wordmark span:nth-child(2){animation-delay:1.28s}.intro .wordmark span:nth-child(3){animation-delay:1.46s}.intro .wordmark span:nth-child(4){animation-delay:1.64s}
@keyframes letter{to{opacity:1;transform:none;filter:blur(0)}}
.intro.gone .wordmark span{animation:none}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.15s!important}}

/* ---------- impression ---------- */
@media print{
  @page{size:A4;margin:16mm}
  html,body{height:auto;overflow:visible;background:#fff!important;display:block}
  .phone{display:none!important}
  #print{display:block;color:#2B2A22;font-family:var(--font-ui);font-size:11pt;line-height:1.45}
  #print h1,#print h2,#print h3{font-family:var(--font-display);font-weight:600;letter-spacing:-.01em}
  #print .cover{text-align:center;padding:60mm 0 0;page-break-after:always}
  #print .cover .k{font-size:9pt;letter-spacing:.25em;text-transform:uppercase;font-weight:800;color:#6B6450}
  #print .cover h1{font-size:64pt;font-weight:500;margin:6mm 0 4mm}
  #print .cover h1 em{font-style:italic;color:#5E4E97}
  #print .cover p{font-family:var(--font-display);font-style:italic;font-size:16pt;color:#6B6450}
  #print section{page-break-before:always}
  #print section h2{font-size:24pt;margin:0 0 6mm;border-bottom:1.5pt solid #DED7C4;padding-bottom:2mm}
  #print .it{page-break-inside:avoid;margin:0 0 6mm;padding:0 0 4mm;border-bottom:.5pt solid #EFE9DA}
  #print .it .m{font-size:9pt;font-weight:700;color:#9C947E;text-transform:uppercase;letter-spacing:.08em}
  #print .it .m b{color:#D97757}
  #print .it h3{font-size:14pt;margin:1mm 0 1mm}
  #print .it p{margin:1mm 0 0;color:#4a4638;white-space:pre-wrap}
  #print .it img{display:block;max-width:100%;max-height:90mm;border-radius:3mm;margin-top:3mm}
  #print .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4mm}
  #print .grid .c{page-break-inside:avoid;text-align:center;font-size:9pt;font-weight:700;color:#6B6450}
  #print .grid .c img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:3mm;display:block;margin-bottom:1mm}
  #print table{width:100%;border-collapse:collapse;font-size:10pt;font-variant-numeric:tabular-nums}
  #print th,#print td{text-align:left;padding:2mm 2mm;border-bottom:.5pt solid #DED7C4}
  #print th{font-size:8.5pt;letter-spacing:.1em;text-transform:uppercase;color:#9C947E}
  #print .fam{display:flex;gap:6mm;flex-wrap:wrap}
  #print .fam div{text-align:center;width:32mm;font-size:10pt;font-weight:700}
  #print .fam img,#print .fam .ph{width:28mm;height:28mm;border-radius:50%;object-fit:cover;display:block;margin:0 auto 2mm;background:#EFE9DA}
  #print .fam small{display:block;font-weight:600;color:#9C947E;font-size:8pt;text-transform:uppercase;letter-spacing:.08em}
}

/* ---------- v3.1 ---------- */
.nav .badge{position:absolute;top:9px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 2px var(--paper);display:none}
.nav .badge.on{display:block}
.nav button.active .badge{display:none}
.wx-chip{display:flex;align-items:center;gap:6px;height:42px;padding:0 14px;border-radius:21px;background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:var(--shadow-s);font-weight:800;font-size:13px;color:var(--ink)}
.wx-chip svg{width:18px;height:18px;color:var(--ink-soft)}
.reminders{display:flex;flex-direction:column;gap:8px;margin-top:22px}
.reminders:empty{display:none}
.reminder{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:12px 14px;border-radius:18px;background:var(--coral-xl)}
.reminder .ico{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--paper);color:var(--coral-d);flex:none}
.reminder .ico svg{width:18px;height:18px}
.reminder .txt{flex:1;min-width:0}.reminder .txt b{display:block;font-size:14.5px}.reminder .txt small{display:block;color:var(--coral-d);font-size:12px;font-weight:700;margin-top:1px}
.reminder .chev{width:18px;height:18px;color:var(--coral-d)}
.mini-tl{position:relative;padding-left:26px}
.mini-tl::before{content:"";position:absolute;left:8px;top:10px;bottom:10px;width:2px;background:linear-gradient(to bottom,var(--iris),var(--coral));border-radius:2px}
.mini-tl .mi{position:relative;display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:8px 0}
.mini-tl .mi::before{content:"";position:absolute;left:-22px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--iris);box-shadow:0 0 0 3px var(--paper)}
.mini-tl .mi .th{width:52px;height:52px;border-radius:14px;overflow:hidden;background:var(--sand);flex:none;display:grid;place-items:center;color:var(--iris-d)}
.mini-tl .mi .th img{width:100%;height:100%;object-fit:cover}
.mini-tl .mi .th svg{width:20px;height:20px}
.mini-tl .mi .txt{flex:1;min-width:0}.mini-tl .mi .txt b{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mini-tl .mi .txt small{display:block;font-size:12px;color:var(--ink-mute);font-weight:600}
.stationery{position:relative;border-radius:8px;background:#FFFDF7;box-shadow:0 1px 0 var(--sand2),0 12px 30px rgba(43,42,34,.10);padding:22px 22px 18px;margin:0 0 26px;
  background-image:linear-gradient(to bottom,transparent 0,transparent 100%)}
.stationery::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;border-radius:8px 8px 0 0;background:linear-gradient(90deg,var(--iris),var(--coral))}
.stationery .lh{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px}
.stationery .to{font-family:var(--font-display);font-style:italic;font-size:22px;color:var(--iris-d);white-space:nowrap}
.stationery .ld{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;color:var(--ink-mute);text-align:right}
.stationery .lbody{min-height:190px;font-family:var(--font-display);font-size:21px;line-height:34px;color:var(--ink);outline:none;white-space:pre-wrap;overflow-wrap:anywhere;
  background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 33px,var(--line) 33px,var(--line) 34px);background-position:0 -1px}
.stationery .lbody:empty::before{content:attr(data-ph);color:var(--ink-mute);font-style:italic}
.stationery .lf{display:flex;align-items:baseline;justify-content:flex-end;gap:10px;margin-top:14px}
.stationery .lf .lbl{font-family:var(--font-display);font-style:italic;font-size:17px;color:var(--ink-mute)}
.stationery .lf input{border:0;border-bottom:1.5px solid var(--sand2);background:transparent;font-family:var(--font-display);font-style:italic;font-size:19px;padding:2px 4px;width:150px;text-align:right;outline:none}
.stationery .lf input:focus{border-color:var(--iris)}
.stationery .lo{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line);flex-wrap:wrap}
.stationery .lo label{display:flex;flex-direction:column;gap:3px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;color:var(--ink-mute)}
.stationery .lo input{border:0;background:var(--paper2);border-radius:10px;height:34px;padding:0 10px;font-size:13px;-webkit-appearance:none;appearance:none;width:150px}
.stationery .danger{margin:10px auto 0}
.polas{display:grid;grid-template-columns:1fr 1fr;gap:16px 14px;padding:4px 4px 8px}
.polas .pgroup{grid-column:1/-1;font-family:var(--font-display);font-size:24px;font-weight:600;margin:10px 0 -2px}
.polas .pgroup:first-child{margin-top:0}
.pola{--rot:-1.6deg;position:relative;display:block;width:100%;cursor:pointer;background:#FFFDF7;padding:9px 9px 12px;border-radius:6px;box-shadow:0 1px 0 var(--sand2),0 10px 22px rgba(43,42,34,.10);text-align:left;transform:perspective(700px) rotateY(calc(var(--tx,0) * .5deg)) rotateX(calc(var(--ty,0) * -.5deg)) rotate(var(--rot));transition:transform .3s var(--ease-spring)}
.polas .pola:nth-child(even){--rot:1.3deg}
.pola:active{transform:rotate(0) scale(.97)}
.pola .ph{aspect-ratio:1;border-radius:4px;overflow:hidden;background:linear-gradient(160deg,var(--iris-xl),var(--sand));display:grid;place-items:center;position:relative}
.pola .ph img{width:100%;height:100%;object-fit:cover;display:block}
.pola .ph .n{font-family:var(--font-display);font-size:44px;font-weight:500;color:var(--iris-d);line-height:1;opacity:.9}
.pola .ph .n small{display:block;font-family:var(--font-ui);font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--ink-mute);text-align:center;margin-top:4px}
.pola .ph svg{position:absolute;right:8px;bottom:8px;width:16px;height:16px;color:var(--ink-mute);opacity:.6}
.pola .cap{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-top:9px}
.pola .cap b{font-family:var(--font-display);font-size:17px;font-weight:600;color:var(--ink)}
.pola .cap small{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute);white-space:nowrap}
.pola.future{opacity:.5}
.pola.current{box-shadow:0 0 0 2.5px var(--coral),0 10px 22px rgba(43,42,34,.10)}
.pola.due .cap small{color:var(--coral-d)}

.stationery .danger{display:block;margin:12px auto 0;font-size:13px;font-weight:700;color:var(--coral-d)}

/* ---------- v3.2 : question du mois, portrait, partage, film ---------- */
.qmonth{margin-top:26px;padding:20px 20px 18px;border-radius:22px;background:var(--iris-xl)}
.qmonth .lbl{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--iris-d)}
.qmonth h2{font-size:23px;font-weight:500;margin:6px 0 12px;color:var(--ink)}
.q-answer .qin{display:flex;gap:8px}
.q-answer .qin input{flex:1;min-width:0;height:46px;border-radius:14px;border:2px solid rgba(124,107,181,.25);background:var(--paper);padding:0 14px;font-size:15px;-webkit-appearance:none;appearance:none}
.q-answer .qin input:focus{outline:none;border-color:var(--iris)}
.q-answer .qin .btn{height:46px;padding:0 16px;flex:none}
.q-answer .done{display:flex;align-items:flex-start;gap:10px}
.q-answer .done p{flex:1;min-width:0;font-family:var(--font-display);font-style:italic;font-size:19px;line-height:1.35;color:var(--iris-d);overflow-wrap:anywhere}
.q-answer .done .link{flex:none;padding-top:5px}
.portrait{display:flex;flex-direction:column}
.portrait .pa{display:flex;gap:14px;padding:14px 0;border-top:1px solid var(--line);width:100%;text-align:left;align-items:flex-start}
.portrait .pa:first-child{border-top:0}
.portrait .pa .n{flex:none;width:52px;font-family:var(--font-display);font-size:24px;font-weight:600;color:var(--iris-d);line-height:1.1}
.portrait .pa .n small{display:block;font-family:var(--font-ui);font-size:9.5px;letter-spacing:.08em;white-space:nowrap;text-transform:uppercase;font-weight:800;color:var(--ink-mute);margin-top:2px}
.portrait .pa .txt{flex:1;min-width:0}
.portrait .pa .q{font-size:12.5px;font-weight:700;color:var(--ink-mute)}
.portrait .pa .a{font-family:var(--font-display);font-style:italic;font-size:19px;line-height:1.35;color:var(--ink);margin-top:3px;overflow-wrap:anywhere}
.portrait .pa.empty .a{color:var(--ink-mute);font-size:15px}
.sync-status{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--ink-soft);margin:-4px 0 14px}
.sync-status::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--vine);flex:none}
.sync-status.busy::before{background:var(--gold);animation:pulse2 1s ease-in-out infinite}
.sync-status.err::before{background:var(--coral)}
@keyframes pulse2{0%,100%{opacity:1}50%{opacity:.3}}
.linkbox{padding:14px 16px;border-radius:18px;background:var(--paper2);margin-bottom:12px}
.linkbox small{display:block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--ink-mute);margin-bottom:6px}
.linkbox code{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--ink);word-break:break-all;line-height:1.4;margin-bottom:10px}
.linkbox .actions{margin:0}
.linkbox.view{background:var(--lagoon-xl)}
.filmbtn{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:14px 16px;border-radius:20px;background:linear-gradient(120deg,var(--iris),var(--grape));color:#fff;margin:0 0 20px;box-shadow:0 10px 24px rgba(124,107,181,.3)}
.filmbtn .ico{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center;flex:none}
.filmbtn .ico svg{width:22px;height:22px}
.filmbtn .txt{flex:1;min-width:0}.filmbtn .txt b{display:block;font-size:15.5px}.filmbtn .txt small{display:block;font-size:12px;opacity:.85;margin-top:2px}
.filmbtn .chev{width:18px;height:18px;opacity:.8}
.film-progress{height:6px;border-radius:3px;background:var(--sand);overflow:hidden;margin:0 0 16px;display:none}
.film-progress.on{display:block}
.film-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--iris),var(--coral));transition:width .2s linear}
#film-video{width:100%;border-radius:18px;background:#111;aspect-ratio:4/5;margin-bottom:16px}
.phone.readonly .fab{display:none}
.tl-item.k-answer .dot{background:var(--iris-d);color:#fff}
.tl-card p.quote{font-family:var(--font-display);font-style:italic;font-size:17px;color:var(--iris-d)}

/* ---------- v3.3 : tactile, portrait, finitions ---------- */
.portrait .pa .txt{display:block}.portrait .pa .q,.portrait .pa .a{display:block}
.timeline.empty .tl-track,.timeline.empty .tl-draw{display:none}
.view.dragging{transition:none!important;will-change:transform}
.sheet.dragging{transition:none!important}
.view,.sheet{overscroll-behavior:contain;touch-action:pan-y}
[data-mem],[data-letter],[data-measure],[data-log]{position:relative;transition:transform .3s var(--ease-out);z-index:1;background:inherit}
.swiping{transition:none!important}
.swipe-del{position:absolute;right:0;width:88px;border-radius:16px;background:var(--coral);color:#fff;font-weight:800;font-size:13px;opacity:0;transform:scale(.9);transition:opacity .2s,transform .25s var(--ease-spring);z-index:0}
.swipe-del.on{opacity:1;transform:none}
.memories>[data-mem],.letters>[data-letter],.rows>[data-measure],.rows>[data-log]{background:var(--paper)}
.subtabs{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}
.subtabs.end{-webkit-mask-image:none;mask-image:none}

/* ---------- v3.4 : fond, animaux, fiches ---------- */
.scene{transition:transform 1.1s var(--ease-out);will-change:transform}
.phone.pet-focus .backdrop{background:rgba(43,42,34,.1)}
.scene-wrap.zoomed .scene .tap{cursor:default}
.pet-sheet .pet-hero{display:grid;place-items:center;margin:8px 0 14px}
.pet-photo{cursor:pointer;width:150px;height:150px;border-radius:50%;overflow:hidden;background:var(--coral-xl);display:grid;place-items:center;color:var(--coral-d);box-shadow:0 0 0 5px var(--paper),0 0 0 7px var(--coral-xl),0 16px 30px rgba(43,42,34,.14)}
.pet-photo img{width:100%;height:100%;object-fit:cover;display:block}
.pet-photo svg{width:46px;height:46px}
.pet-sheet .kicker{text-align:center;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:var(--iris-d)}
.pet-sheet h2.pet-name{text-align:center;font-size:34px;margin:2px 0 4px;line-height:1.05}
.pet-meta{text-align:center;color:var(--ink-soft);font-size:14px;font-weight:600}
.pet-note{text-align:center;font-family:var(--font-display);font-style:italic;font-size:19px;color:var(--ink);margin:10px 0 6px;overflow-wrap:anywhere}
.pet-sheet #pet-view .actions{margin-top:18px}
.pet-photo.empty{background:var(--paper2);border:2px dashed var(--sand2);color:var(--ink-mute);box-shadow:none}

/* ---------- v3.5 : premières fois vivantes ---------- */
.t-coral{--bg:#FBE3D6;--fg:#BD5D3E}.t-iris{--bg:#EDE8F7;--fg:#5E4E97}.t-lagoon{--bg:#E0EEF0;--fg:#4E7A84}.t-gold{--bg:#F7EBD2;--fg:#9A7230}.t-vine{--bg:#E9F0DF;--fg:#5F7F45}.t-grape{--bg:#EFE3F0;--fg:#6E4B78}.t-rose{--bg:#FBE4EA;--fg:#B0506B}.t-sky{--bg:#E3ECF7;--fg:#4C6B9A}
.firsts{grid-auto-flow:dense;gap:12px}
:where(.first){--bg:var(--sand);--fg:var(--ink-soft)}
.first{background:var(--bg);padding:14px;border-radius:22px}
.first .wm{position:absolute;right:-16px;bottom:-16px;width:112px;height:112px;color:var(--fg);opacity:.16;transform:rotate(-12deg);pointer-events:none;transition:transform .5s var(--ease-spring)}
.first:active .wm{transform:rotate(-4deg) scale(1.08)}
.first .ico{background:rgba(255,255,255,.82);color:var(--fg);box-shadow:0 2px 8px rgba(43,42,34,.06)}
.first .t{font-size:17px}
.first .d{display:inline-flex;align-items:center;gap:4px;width:max-content;max-width:100%;margin-top:7px;padding:5px 9px;border-radius:12px;background:rgba(255,255,255,.75);color:var(--fg);font-size:11px;font-weight:800;letter-spacing:.02em}
.first .d svg{width:12px;height:12px}
.first.done:not(.photo){background:var(--fg)}
.first.done:not(.photo) .wm{opacity:.22;color:#fff}
.first.done:not(.photo) .ico{background:rgba(255,255,255,.22);color:#fff;box-shadow:none}
.first.done:not(.photo) .d{background:rgba(255,255,255,.2);color:#fff}
.first.photo .wm{display:none}
.first.photo .d{background:rgba(255,255,255,.9);color:var(--ink)}
.first.wide{aspect-ratio:2/1}
.first.wide.photo{aspect-ratio:16/9}
.first.wide .t{font-size:20px;max-width:75%}
.first.add{--bg:transparent}
.first.add .wm{display:none}
.first.add .ico{background:var(--sand);box-shadow:none}
.first-now{position:relative;display:block;width:100%;text-align:left;overflow:hidden;border-radius:24px;padding:20px 22px 18px;margin:0 0 14px;background:linear-gradient(135deg,var(--bg),#FFFDF7 150%);box-shadow:0 12px 28px rgba(43,42,34,.08)}
.first-now:active{transform:scale(.98)}
.first-now .wm{position:absolute;right:-24px;top:50%;width:150px;height:150px;transform:translateY(-50%) rotate(-10deg);color:var(--fg);opacity:.16;pointer-events:none}
.first-now .k{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--fg)}
.first-now b{display:block;font-family:var(--font-display);font-weight:600;font-size:26px;line-height:1.1;margin:6px 0 12px;color:var(--ink);max-width:72%}
.first-now .cta{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:18px;background:var(--fg);color:#fff;font-weight:800;font-size:13px}
.first-now .cta svg{width:16px;height:16px}

/* ---------- v3.5 : mouvement ---------- */
.phone{--tx:0;--ty:0}
/* les cartes qui contiennent des boutons ne suivent que le gyroscope (jamais la souris : la cible bougerait sous le curseur) */
.phone.gyro .tilt3d{transform:perspective(900px) rotateY(calc(var(--tx) * 1deg)) rotateX(calc(var(--ty) * -1deg));transform-style:preserve-3d}
.phone.gyro .tilt3d.soft{transform:perspective(900px) rotateY(calc(var(--tx) * .45deg)) rotateX(calc(var(--ty) * -.45deg))}
.phone.gyro .qmonth,.phone.gyro .month-cta{transform:perspective(900px) rotateY(calc(var(--tx) * .35deg)) rotateX(calc(var(--ty) * -.35deg))}
.pet-photo{transform:perspective(900px) rotateY(calc(var(--tx) * .35deg)) rotateX(calc(var(--ty) * -.35deg))}
.memory.big img,.memory.side img{transform:perspective(900px) rotateY(calc(var(--tx) * .4deg)) rotateX(calc(var(--ty) * -.4deg))}
/* relief de la scène : les plans lointains bougent moins que les proches */
.scene .hill-far2{transform:translateX(calc(var(--tx) * -.35px))}.scene .hill-far{transform:translateX(calc(var(--tx) * -.7px))}.scene .mist{transform:translateX(calc(var(--tx) * -.5px))}
.scene .hill-vine,.scene .vines,.scene .wall,.scene .tree{transform:translateX(calc(var(--tx) * -1.1px))}
.scene .house{transform:translateX(calc(var(--tx) * -1.3px))}
.scene .meadow,.scene .path,.scene .meadow2,.scene .tufts,.scene .flowers{transform:translateX(calc(var(--tx) * -1.8px))}
.scene #irises{transform:translateX(calc(var(--tx) * -2.4px))}
.scene .p-near{transform:translateX(calc(var(--tx) * var(--pf, -2) * 1px))}
.scene .p-sky{transform:translateX(calc(var(--tx) * -.25px))}
/* cascade */
.rv{animation:rv .55s var(--ease-out) backwards;animation-delay:calc(var(--i,0) * 45ms)}
@keyframes rv{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.polas .pola.rv{animation-name:rvpola}
@keyframes rvpola{from{opacity:0;transform:translateY(14px) rotate(var(--rot))}to{opacity:1;transform:perspective(700px) rotateY(calc(var(--tx,0) * .5deg)) rotateX(calc(var(--ty,0) * -.5deg)) rotate(var(--rot))}}
/* la carte qui tombe */
.drop{animation:drop .95s var(--ease-spring) backwards;transform-origin:50% 0}
@keyframes drop{0%{opacity:0;transform:perspective(800px) rotateX(-70deg) translateY(-30px) scale(1.04)}55%{opacity:1;transform:perspective(800px) rotateX(10deg) translateY(4px)}80%{transform:perspective(800px) rotateX(-4deg)}100%{transform:none}}
/* la photo qui se révèle */
.pola.develop{animation:shake 1.3s ease-out both}
.pola.develop .ph img{animation:develop 2s ease-out both}
@keyframes develop{0%{filter:brightness(2.4) saturate(0) contrast(.5);opacity:.15}45%{filter:brightness(1.4) saturate(.3) contrast(.8);opacity:.85}100%{filter:none;opacity:1}}
@keyframes shake{0%{transform:rotate(-7deg) translateY(-16px) scale(1.04)}30%{transform:rotate(3deg) translateY(2px)}55%{transform:rotate(-2deg)}75%{transform:rotate(1.5deg)}100%{transform:perspective(700px) rotate(var(--rot))}}
/* la tuile qui se retourne */
.flip{animation:flip .95s var(--ease-spring) backwards}
@keyframes flip{0%{transform:perspective(700px) rotateY(-100deg) scale(.9);opacity:0}60%{opacity:1;transform:perspective(700px) rotateY(12deg) scale(1.03)}100%{transform:none}}
.pop{animation:pop .6s var(--ease-spring)}
@keyframes pop{0%{transform:scale(.6);opacity:.4}60%{transform:scale(1.1)}100%{transform:none}}
/* panneaux : l'icône saute, les champs arrivent l'un après l'autre */
.sheet.show .sheet-head .ico{animation:pop .6s var(--ease-spring) both}
.sheet.show>.field,.sheet.show>.row,.sheet.show>.lead,.sheet.show>.actions,.sheet.show>.addgrid,.sheet.show>.linkbox,.sheet.show>.qa,.sheet.show .addgrid button{animation:rv .5s var(--ease-out) backwards}
.sheet.show>:nth-child(3){animation-delay:.04s}.sheet.show>:nth-child(4){animation-delay:.08s}.sheet.show>:nth-child(5){animation-delay:.12s}.sheet.show>:nth-child(6){animation-delay:.16s}.sheet.show>:nth-child(7){animation-delay:.2s}.sheet.show>:nth-child(8){animation-delay:.24s}.sheet.show>:nth-child(9){animation-delay:.28s}
.sheet.show .addgrid button:nth-child(2){animation-delay:.05s}.sheet.show .addgrid button:nth-child(3){animation-delay:.1s}.sheet.show .addgrid button:nth-child(4){animation-delay:.15s}.sheet.show .addgrid button:nth-child(5){animation-delay:.2s}.sheet.show .addgrid button:nth-child(6){animation-delay:.25s}
/* lire une lettre : le papier se soulève */
.sheet.show .read-head{animation:rv .5s var(--ease-out) both}
.sheet.show .letter-body{animation:rise .8s var(--ease-out) both;animation-delay:.12s;transform-origin:50% 100%}
@keyframes rise{0%{opacity:0;transform:perspective(800px) rotateX(35deg) translateY(30px)}100%{opacity:1;transform:none}}
/* bouton + */
.fab{transition:transform .4s var(--ease-spring),background .3s}
.phone.adding .fab{transform:rotate(45deg);background:var(--coral)}
/* l'enveloppe qui s'envole */
.fly{position:absolute;z-index:40;pointer-events:none;perspective:900px;transform-style:preserve-3d}
.fly .paper{position:absolute;left:12%;right:12%;top:-82%;height:92%;background:#FFFDF7;border-radius:6px;box-shadow:0 10px 30px rgba(43,42,34,.18);transform-origin:50% 100%;transition:transform .7s var(--ease-out),opacity .2s .5s;padding:16px 12px;display:flex;flex-direction:column;gap:10px}
.fly .paper i{display:block;height:3px;border-radius:2px;background:var(--sand2)}.fly .paper i:first-child{width:45%;background:var(--iris-l)}
.fly.s1 .paper{transform:translateY(80%) scale(.8);opacity:0}
.fly .env{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .85s var(--ease-out),opacity .5s .4s}
.fly .back{position:absolute;inset:0;border-radius:10px;background:#EADFC8;box-shadow:0 14px 34px rgba(43,42,34,.22)}
.fly .pocket{position:absolute;inset:0;border-radius:10px;background:linear-gradient(160deg,#F7EDDA,#EBDCC0);clip-path:polygon(0 0,50% 54%,100% 0,100% 100%,0 100%);z-index:1}
.fly .flap{position:absolute;left:0;right:0;top:0;height:56%;background:#E6D8BB;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:50% 0;transform:rotateX(180deg);transition:transform .55s var(--ease-out);backface-visibility:hidden;z-index:2}
.fly.s2 .flap{transform:rotateX(0)}
.fly .seal{position:absolute;left:50%;top:56%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:var(--coral);box-shadow:inset 0 0 0 4px #E58E72,0 3px 8px rgba(43,42,34,.2);transform:scale(0);transition:transform .45s var(--ease-spring) .3s;z-index:3}
.fly.s2 .seal{transform:scale(1)}
.fly.s3 .env{transform:translateY(-640px) translateX(60px) rotate(-16deg) scale(.6);opacity:0}
@media (prefers-reduced-motion:reduce){.tilt3d,.tilt3d.soft,.qmonth,.month-cta,.pet-photo,.memory.big img,.memory.side img,.pola{transform:none!important}.rv,.drop,.flip,.pop{animation:none!important}}
/* la courbe qui se trace */
.chart .line{stroke-dasharray:2400;stroke-dashoffset:2400;animation:draw 1.5s var(--ease-out) .1s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.chart .dot{animation:pop .5s var(--ease-spring) both;animation-delay:.9s;transform-box:fill-box;transform-origin:center}

/* ---------- v3.6 : une couleur par page ---------- */
#v-home{--acc:var(--coral);--acc-d:var(--coral-d);--acc-xl:var(--coral-xl)}
#v-frise{--acc:var(--iris);--acc-d:var(--iris-d);--acc-xl:var(--iris-xl)}
#v-carnet{--acc:#C9698A;--acc-d:#A34D6B;--acc-xl:#FBE4EA}
#v-sante{--acc:var(--lagoon);--acc-d:var(--lagoon-d);--acc-xl:var(--lagoon-xl)}
.view .page{background:linear-gradient(180deg,var(--acc-xl) 0,var(--paper) 240px)}
.view:not(#v-home) .hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--acc),var(--acc-xl));opacity:.55;pointer-events:none}
#v-sante{--acc:#7CC2C4}
#v-sante .hero::after{opacity:.78}
.view .title{color:var(--acc-d)}
.subtabs button.active{color:var(--acc-d)}
.phone[data-view="frise"] .nav .ind{background:var(--iris);box-shadow:0 6px 16px rgba(124,107,181,.32)}
.phone[data-view="carnet"] .nav .ind{background:#C9698A;box-shadow:0 6px 16px rgba(201,105,138,.32)}
.phone[data-view="sante"] .nav .ind{background:var(--lagoon);box-shadow:0 6px 16px rgba(123,163,171,.32)}
.phone[data-view="frise"] .fab{background:var(--coral);box-shadow:0 10px 24px rgba(217,119,87,.35)}
.phone[data-view="carnet"] .fab{background:var(--iris);box-shadow:0 10px 24px rgba(124,107,181,.35)}
.phone[data-view="sante"] .fab{background:var(--coral);box-shadow:0 10px 24px rgba(217,119,87,.35)}
/* nuances : jamais deux cartes pareilles */
.memories .memory.quote:nth-child(3n+2){background:#FBE4EA}.memories .memory.quote:nth-child(3n+2) h3{color:#A34D6B}
.memories .memory.quote:nth-child(3n){background:var(--gold-xl)}.memories .memory.quote:nth-child(3n) h3{color:var(--gold-d)}
.memories .memory.nophoto:nth-child(even){background:var(--lagoon-xl)}
.pola:nth-child(5n+2) .ph{background:linear-gradient(160deg,#FBE4EA,#F7EBD2)}.pola:nth-child(5n+2) .ph .n{color:#A34D6B}
.pola:nth-child(5n+3) .ph{background:linear-gradient(160deg,#E0EEF0,#E9F0DF)}.pola:nth-child(5n+3) .ph .n{color:var(--lagoon-d)}
.pola:nth-child(5n+4) .ph{background:linear-gradient(160deg,#F7EBD2,#FBE3D6)}.pola:nth-child(5n+4) .ph .n{color:var(--gold-d)}
.pola:nth-child(5n) .ph{background:linear-gradient(160deg,#EFE3F0,#E3ECF7)}.pola:nth-child(5n) .ph .n{color:var(--grape)}
.hsum .k:nth-child(1){background:var(--coral-xl)}.hsum .k:nth-child(1) b{color:var(--coral-d)}
.hsum .k:nth-child(2){background:var(--lagoon-xl)}.hsum .k:nth-child(2) b{color:var(--lagoon-d)}
.hsum .k:nth-child(3){background:var(--gold-xl)}.hsum .k:nth-child(3) b{color:var(--gold-d)}
.hsum .k.empty b{color:var(--ink-mute)}
.letter:nth-child(even):not(.sealed) .ico{background:#FBE4EA;color:#A34D6B}
.letter:nth-child(3n):not(.sealed) .ico{background:var(--lagoon-xl);color:var(--lagoon-d)}
.group:nth-child(3n+2) .chip:not(.done):not(.soon):not(.late){background:var(--iris-xl);color:var(--iris-d)}
.group:nth-child(3n) .chip:not(.done):not(.soon):not(.late){background:var(--lagoon-xl);color:var(--lagoon-d)}
.portrait .pa:nth-child(4n+2) .n{color:#A34D6B}.portrait .pa:nth-child(4n+3) .n{color:var(--lagoon-d)}.portrait .pa:nth-child(4n) .n{color:var(--gold-d)}
.tl-item.k-memory:nth-child(even) .dot{background:#C9698A}
.qmonth{background:linear-gradient(135deg,var(--iris-xl),#FBE4EA)}
.month-cta .thumb{background:linear-gradient(160deg,var(--coral-xl),var(--gold-xl))}

/* ---------- v3.6 : l'entrée ---------- */
.intro .dawn{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,#141A3B 0%,#3A3670 40%,#8E5E7C 72%,#E0916C 100%);mix-blend-mode:multiply;opacity:.92;animation:dawn 4.2s cubic-bezier(.4,.1,.3,1) .2s forwards}
@keyframes dawn{to{opacity:0}}
.intro .rise{animation:sunrise 4.4s cubic-bezier(.25,.6,.2,1) both}
@keyframes sunrise{from{transform:translateY(340px) scale(.85)}to{transform:none}}
.intro .land .hill-far2,.intro .land .hill-far,.intro .land .mist,.intro .land .hill-vine,.intro .land .shade,.intro .land .vines,.intro .land .tree,.intro .land .meadow,.intro .land .flowers{animation:landin 1.3s var(--ease-out) both}
.intro .land .hill-far2{animation-delay:.15s}.intro .land .hill-far{animation-delay:.3s}.intro .land .mist{animation-delay:.3s}
.intro .land .hill-vine,.intro .land .vines,.intro .land .shade:nth-of-type(1){animation-delay:.5s}.intro .land .tree{animation-delay:.65s}
.intro .land .meadow,.intro .land .flowers,.intro .land .shade:nth-of-type(2){animation-delay:.7s}
@keyframes landin{from{transform:translateY(90px);opacity:0}to{transform:none;opacity:1}}
.intro .land #intro-irises{transform-box:fill-box;transform-origin:50% 100%;animation:bloom 1.4s var(--ease-spring) 1.1s both}
@keyframes bloom{from{transform:scale(0) translateY(20px);opacity:0}60%{opacity:1}to{transform:none;opacity:1}}
.intro .land .cloud{animation:cloudin 2.6s var(--ease-out) both}
.intro .land .cloud.c3{animation-delay:.4s}
@keyframes cloudin{from{transform:translateX(-90px);opacity:0}to{transform:none;opacity:1}}
.intro .wordmark{position:relative;text-shadow:none;color:var(--iris-d);filter:drop-shadow(0 8px 30px rgba(94,78,151,.28));animation:float 6s ease-in-out 4.5s infinite}
.intro .wordmark span{background:linear-gradient(180deg,#7A69B8 0%,#5E4E97 55%,#483A7C 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.phone.night .intro .wordmark{filter:drop-shadow(0 0 30px rgba(201,191,230,.55))}
.phone.night .intro .wordmark span{background-image:linear-gradient(180deg,#FFFFFF 0%,#F1E9FF 55%,#D9CCF5 100%)}
.intro .wordmark::after{content:"";position:absolute;top:-30%;bottom:-30%;left:-60%;width:22%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.9),rgba(255,255,255,0));transform:skewX(-16deg);mix-blend-mode:soft-light;pointer-events:none;opacity:0;animation:beam 2.2s cubic-bezier(.4,0,.2,1) 2.7s both}
@keyframes beam{0%{left:-60%;opacity:0}15%{opacity:.75}85%{opacity:.75}100%{left:160%;opacity:0}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.intro .sparks{position:absolute;inset:0;z-index:2;pointer-events:none}
.intro .sparks i{position:absolute;left:50%;top:48%;width:6px;height:6px;border-radius:50%;background:#FFE9A8;box-shadow:0 0 12px 3px rgba(255,233,168,.75);opacity:0;animation:spark 3.2s ease-out infinite;animation-delay:calc(var(--d) * 1s + 2.9s)}
.intro .sparks i:nth-child(1){--d:0;--x:-120px;--y:-70px}.intro .sparks i:nth-child(2){--d:.4;--x:110px;--y:-90px}.intro .sparks i:nth-child(3){--d:.8;--x:-70px;--y:60px}.intro .sparks i:nth-child(4){--d:1.2;--x:130px;--y:40px}
.intro .sparks i:nth-child(5){--d:1.6;--x:-150px;--y:-10px}.intro .sparks i:nth-child(6){--d:2;--x:40px;--y:-120px}.intro .sparks i:nth-child(7){--d:2.4;--x:90px;--y:90px}.intro .sparks i:nth-child(8){--d:2.8;--x:-40px;--y:110px}
@keyframes spark{0%{opacity:0;transform:translate(0,0) scale(.2)}20%{opacity:1}60%{opacity:.9;transform:translate(var(--x),var(--y)) scale(1)}100%{opacity:0;transform:translate(calc(var(--x) * 1.3),calc(var(--y) * 1.3 - 30px)) scale(.1)}}
/* la sortie : on plonge dans le paysage */
.intro{transition:opacity 1.2s cubic-bezier(.6,0,.4,1) .1s,visibility 0s 1.4s}
.intro .land{transform-origin:50% 88%;transition:transform 1.3s var(--ease-out)}
.intro.gone .land{transform:scale(1.5) translateY(30px)}
.intro.gone .wordmark{animation:none;transform:scale(1.35);opacity:0;filter:blur(12px);transition:transform 1s var(--ease-out),opacity .6s,filter .8s}
.intro.gone .sparks,.intro.gone .rays{opacity:0;transition:opacity .4s}
.intro.gone .dawn{animation:none;opacity:0}

/* ---------- v3.7 : carrousel de pages ---------- */
.view.peek{opacity:1;visibility:visible;transition:none}
.view.settling{transition:transform .28s var(--ease-out)!important;visibility:visible;opacity:1}
.view.hide-now{transition:none!important}
.view.out-l{animation:outL .32s var(--ease-out) forwards;visibility:visible}
.view.out-r{animation:outR .32s var(--ease-out) forwards;visibility:visible}
.view.in-r{animation:inR .46s var(--ease-out)}
.view.in-l{animation:inL .46s var(--ease-out)}
@keyframes outL{from{opacity:1;transform:none}to{opacity:0;transform:translate3d(-56px,0,0)}}
@keyframes outR{from{opacity:1;transform:none}to{opacity:0;transform:translate3d(56px,0,0)}}
@keyframes inR{from{opacity:0;transform:translate3d(80px,0,0)}to{opacity:1;transform:none}}
@keyframes inL{from{opacity:0;transform:translate3d(-80px,0,0)}to{opacity:1;transform:none}}
/* appui long : retirer */
[data-mem],[data-letter],[data-measure],[data-log]{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;transition:transform .25s var(--ease-spring),box-shadow .25s}
.held{transform:scale(.97);box-shadow:0 14px 30px rgba(43,42,34,.16);border-radius:20px;position:relative;z-index:5}
.hold-menu{position:absolute;z-index:45;opacity:0;transform:translateY(6px) scale(.9);transition:opacity .18s,transform .25s var(--ease-spring)}
.hold-menu.on{opacity:1;transform:none}
.hold-menu .hm-del{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px 0 14px;border-radius:22px;background:var(--ink);color:var(--paper);font-weight:800;font-size:14px;box-shadow:0 12px 28px rgba(43,42,34,.3)}
.hold-menu .hm-del svg{width:18px;height:18px;color:var(--coral)}
.swipe-del{display:none}
/* états vides */
.empty-card{--bg:var(--sand);--fg:var(--ink-soft);display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;padding:28px 20px 24px;border-radius:22px;border:2px dashed var(--sand2);background:linear-gradient(180deg,var(--bg),transparent);text-align:center;transition:transform .25s var(--ease-spring)}
.empty-card:active{transform:scale(.98)}
.empty-card .ico{width:52px;height:52px;border-radius:50%;background:var(--paper);color:var(--fg);display:grid;place-items:center;margin-bottom:6px;box-shadow:0 6px 16px rgba(43,42,34,.08)}
.empty-card .ico svg{width:24px;height:24px}
.empty-card b{font-family:var(--font-display);font-size:21px;font-weight:600;color:var(--ink)}
.empty-card small{font-size:13px;color:var(--ink-mute);line-height:1.4}
/* ---------- v3.7 : lire une lettre — l'enveloppe s'ouvre ---------- */
.read-sheet .env-stage{display:grid;place-items:center;padding:150px 0 14px;transition:padding .45s var(--ease-out)}
.read-sheet .env-stage.read{padding-top:6px}
.env3d{position:relative;width:250px;height:165px;perspective:900px}
.env-stage.read .env3d{width:100%;height:auto}
.e-back{position:absolute;inset:0;border-radius:12px;background:#E8DCC3;box-shadow:0 16px 36px rgba(43,42,34,.18);z-index:0;transition:opacity .35s}
.e-paper{position:absolute;left:8%;right:8%;top:8%;height:86%;background:#FFFDF7;border-radius:6px;z-index:1;overflow:hidden;transition:transform .75s var(--ease-out),box-shadow .5s;transform-origin:50% 100%}
.e-paper .e-face{padding:18px 20px 20px;opacity:0;transition:opacity .4s}
.e-paper .kicker{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:var(--iris-d)}
.e-paper h2{font-size:24px;margin:6px 0 2px}
.e-paper .meta{font-size:12.5px;color:var(--ink-mute);font-weight:600;margin-bottom:12px}
.e-paper .letter-body{padding:0;background:none;border-radius:0}
.e-pocket{position:absolute;inset:0;border-radius:12px;background:linear-gradient(160deg,#F6ECD8,#EBDCC0);clip-path:polygon(0 0,50% 54%,100% 0,100% 100%,0 100%);z-index:2;transition:opacity .35s}
.e-flap{position:absolute;left:0;right:0;top:0;height:56%;background:linear-gradient(180deg,#E9DCC1,#DFCFAE);clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:50% 0;z-index:3;transition:transform .7s var(--ease-out),opacity .35s}
.e-seal{position:absolute;left:50%;top:56%;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;background:var(--coral);box-shadow:inset 0 0 0 5px #E58E72,0 4px 10px rgba(43,42,34,.25);z-index:4;display:grid;place-items:center;color:#fff;transition:transform .4s var(--ease-spring),opacity .3s}
.e-seal svg{width:16px;height:16px}
.env-stage.sealed .e-seal{background:var(--gold);box-shadow:inset 0 0 0 5px #D9B36C,0 4px 10px rgba(43,42,34,.25)}
.env-stage.closed .e-paper{transform:translateY(0)}
.env-stage.opening .e-seal,.env-stage.out .e-seal,.env-stage.read .e-seal{transform:scale(0) rotate(50deg);opacity:0}
.env-stage.opening .e-flap,.env-stage.out .e-flap,.env-stage.read .e-flap{transform:rotateX(-180deg)}
.env-stage.out .e-flap,.env-stage.read .e-flap{z-index:0}
.env-stage.out .e-paper{transform:translateY(-96%) scale(1.08);box-shadow:0 18px 40px rgba(43,42,34,.2);z-index:5}
.env-stage.out .e-paper .e-face{opacity:.55}
.env-stage.read .e-paper{position:relative;left:0;right:0;top:0;height:auto;width:100%;transform:rotateX(calc(var(--px,0) * 1deg)) rotateY(calc(var(--py,0) * 1deg)) rotateZ(calc(var(--pz,0) * 1deg));box-shadow:0 18px 40px rgba(43,42,34,.16);animation:paperSettle .55s var(--ease-out);transition:transform .4s var(--ease-out);touch-action:none;cursor:grab;overflow:visible}
.env-stage.read .e-paper.hold{transition:none;cursor:grabbing}
.env-stage.read .e-paper .e-face{opacity:1}
.env-stage.read .e-back,.env-stage.read .e-pocket,.env-stage.read .e-flap{opacity:0;pointer-events:none}
@keyframes paperSettle{from{opacity:.4;transform:scale(.92) translateY(24px)}to{opacity:1;transform:none}}
.read-sealed{text-align:center;color:var(--ink-soft);font-size:14px;margin:-4px 0 14px}
.read-sealed .btn{margin-top:12px}

/* ---------- v4.0 : vidéos, ordonnances, corbeille, import ---------- */
.memory video,.first video,.pola .ph video,.strip .ph video,.tl-card video,.month-cta .thumb video{display:block;width:100%;height:100%;object-fit:cover}
.memory video{aspect-ratio:4/3;border-radius:20px;background:#000}.memory.big video{aspect-ratio:1}.memory.side video{width:104px;height:104px;border-radius:16px;flex:none}
.first video{position:absolute;inset:0}
.photo-pick video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lightbox video{max-width:92%;max-height:70%;border-radius:16px;background:#000}
.rxs{display:flex;flex-direction:column;gap:10px;margin-bottom:8px}
.rx{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:10px;border-radius:18px;background:var(--paper2)}
.rx.on{background:var(--gold-xl)}
.rx img,.rx .ph{width:56px;height:56px;border-radius:12px;object-fit:cover;flex:none;background:var(--sand);display:grid;place-items:center;color:var(--gold-d)}
.rx .ph svg{width:22px;height:22px}
.rx .txt b{display:block;font-size:15px}.rx .txt small{display:block;color:var(--ink-mute);font-size:12.5px;margin-top:2px}
.h2.mt{margin-top:26px}
.bulk-list{display:flex;flex-direction:column;gap:10px;max-height:52vh;overflow-y:auto;margin-bottom:14px}
.bulk-it{display:flex;gap:12px;align-items:center;padding:8px;border-radius:16px;background:var(--paper2)}
.bulk-it img{width:58px;height:58px;border-radius:12px;object-fit:cover;flex:none}
.bulk-it .txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.bulk-it input[type=date]{height:34px;padding:0 10px;border-radius:10px;border:0;background:var(--paper);font-size:13px;width:100%}
.bulk-it .seg{display:flex;gap:4px;background:var(--sand);padding:3px;border-radius:12px}
.bulk-it .seg button{flex:1;height:28px;border-radius:10px;font-size:11.5px;font-weight:700;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 6px}
.bulk-it .seg button.on{background:var(--paper);color:var(--ink);box-shadow:var(--shadow-s)}
.bulk-it .seg button:disabled{opacity:.4}
.bulk-it .x{width:30px;height:30px;border-radius:50%;background:var(--paper);color:var(--ink-mute);display:grid;place-items:center;flex:none}
.bulk-it .x svg{width:14px;height:14px}
#trash-list .row .btn{flex:none;height:36px;padding:0 12px;font-size:12.5px}

/* ---------- v4.0 : aujourd'hui, rythme, sauts, doses, listes ---------- */
.today{margin:6px 0 4px}
.today .h{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px}
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tk{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:14px 12px 12px;border-radius:20px;text-align:left;background:var(--paper2);transition:transform .25s var(--ease-spring);position:relative;overflow:hidden}
.tk:active{transform:scale(.96)}
.tk .ico{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;margin-bottom:8px;background:var(--paper)}
.tk .ico svg{width:18px;height:18px}
.tk b{font-family:var(--font-display);font-size:24px;font-weight:600;line-height:1;color:var(--ink)}
.tk small{font-size:11px;font-weight:700;color:var(--ink-mute);line-height:1.25}
.tk.feed{background:var(--coral-xl)}.tk.feed .ico{color:var(--coral-d)}
.tk.sleep{background:var(--iris-xl)}.tk.sleep .ico{color:var(--iris-d)}
.tk.diaper{background:var(--lagoon-xl)}.tk.diaper .ico{color:var(--lagoon-d)}
.tk.sleep.on{background:var(--iris);color:#fff}.tk.sleep.on b,.tk.sleep.on small{color:#fff}.tk.sleep.on .ico{background:rgba(255,255,255,.22);color:#fff}
.tk.sleep.on::after{content:"";position:absolute;right:12px;top:12px;width:8px;height:8px;border-radius:50%;background:#fff;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.4;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
.spurts{display:flex;flex-direction:column;gap:10px;margin:14px 0 6px}
.sp{padding:14px 16px;border-radius:18px;background:var(--gold-xl)}
.sp.leap{background:var(--iris-xl)}.sp.grow{background:var(--coral-xl)}.sp.soon{background:var(--paper2)}
.sp .k{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--iris-d)}
.sp.grow .k{color:var(--coral-d)}.sp.soon .k{color:var(--ink-mute)}
.sp b{display:block;font-family:var(--font-display);font-size:20px;font-weight:600;margin:4px 0 4px}
.sp p{font-size:13px;color:var(--ink-soft);line-height:1.45}
/* panneau suivi */
.seg3{display:flex;gap:4px;padding:4px;border-radius:16px;background:var(--sand);margin-bottom:14px}
.seg3:empty{display:none}
.seg3 button{flex:1;height:38px;border-radius:12px;font-weight:700;font-size:13.5px;color:var(--ink-soft);transition:background .2s,color .2s}
.seg3 button.on{background:var(--paper);color:var(--ink);box-shadow:var(--shadow-s)}
.mlbox{display:flex;align-items:center;justify-content:center;gap:18px;margin:0 0 14px}
.mlbox button{width:44px;height:44px;border-radius:50%;background:var(--paper2);font-size:22px;font-weight:700;color:var(--ink)}
.mlbox b{font-family:var(--font-display);font-size:30px;font-weight:600;min-width:110px;text-align:center}
.wake{display:flex;align-items:baseline;justify-content:space-between;padding:14px 16px;border-radius:16px;background:var(--iris-xl);margin-bottom:14px}
.wake b{font-size:16px}.wake small{color:var(--iris-d);font-weight:700}
.trows{margin-top:16px}
.trows .lbl{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--ink-mute);margin-bottom:6px}
.trow{display:flex;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--line);font-size:14px}
.trow span{color:var(--ink-mute);font-weight:700;font-variant-numeric:tabular-nums;min-width:96px}
.trow b{flex:1}
.trow.live b{color:var(--iris-d)}
.trow .x{width:30px;height:30px;border-radius:50%;background:var(--paper2);display:grid;place-items:center;color:var(--ink-mute)}
.trow .x svg{width:14px;height:14px}
.btn.lagoon{background:var(--lagoon);box-shadow:0 8px 18px rgba(123,163,171,.28)}
/* rythme */
.sleepband .h,.ncurve .h,.fbars .h,.dose .h{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px;gap:10px}
.sleepband h3,.ncurve h3,.fbars h3,.dose h3{font-size:18px}
.sleepband .h small,.ncurve .h small,.fbars .h small,.dose .h small{font-size:11.5px;color:var(--ink-mute);font-weight:700;white-space:nowrap}
.sleepband .k{display:inline-block;width:10px;height:10px;border-radius:3px;vertical-align:-1px;margin:0 3px 0 6px}
.sleepband .k.night{background:var(--iris)}.sleepband .k.nap{background:var(--gold)}.sleepband .k.feed{background:var(--coral);width:4px}
.sday{display:grid;grid-template-columns:46px 1fr 54px;align-items:center;gap:8px;margin:4px 0}
.sday .lab{font-size:10.5px;font-weight:800;color:var(--ink-mute);text-transform:capitalize;white-space:nowrap}
.sday svg{width:100%;height:23px;display:block}
.sday .bg{fill:var(--paper2)}.sday .night{fill:var(--iris)}.sday .nap{fill:var(--gold)}.sday .live{opacity:.6}.sday .feed{fill:var(--coral)}
.sday .tot{font-size:11px;font-weight:700;color:var(--ink-soft);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ncurve{margin-top:22px}.ncurve svg{width:100%;height:auto;display:block}
.ncurve .line{fill:none;stroke:var(--iris);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.ncurve .dot{fill:var(--paper);stroke:var(--iris);stroke-width:2}
.ncurve .avg{stroke:var(--iris-l);stroke-width:1.5;stroke-dasharray:4 4}
.ncurve .t{font-size:9px;fill:var(--ink-mute);text-anchor:middle;font-weight:700}
.fbars{margin-top:22px}
.fbars .bars{display:flex;align-items:flex-end;gap:5px;height:70px;padding:0 2px}
.fbars .bars span{flex:1;min-height:3px;border-radius:4px 4px 2px 2px;background:var(--coral-xl);position:relative}
.fbars .bars span:last-child{background:var(--coral)}
/* doses */
.dose{padding:16px 16px 12px;border-radius:20px;background:var(--gold-xl);margin-bottom:18px}
.drow{display:grid;grid-template-columns:96px 1fr;gap:10px;padding:8px 0;border-top:1px solid rgba(154,114,48,.15);font-size:14px}
.drow:first-of-type{border-top:0}
.drow b{color:var(--gold-d)}.drow small{color:var(--ink-soft);font-size:12px;line-height:1.35}
.dose .warn{font-size:11.5px;color:var(--ink-mute);line-height:1.4;margin-top:8px}
/* listes */
.lists{display:flex;flex-direction:column;gap:10px}
.lrow{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:12px 14px;border-radius:18px;background:var(--paper2)}
.lrow .ring{--p:0;width:42px;height:42px;border-radius:50%;background:conic-gradient(var(--vine) calc(var(--p) * 1%),var(--sand) 0);display:grid;place-items:center;flex:none}
.lrow .ring i{width:30px;height:30px;border-radius:50%;background:var(--paper2)}
.lrow .txt{flex:1;min-width:0}.lrow .txt b{display:block;font-size:15px}.lrow .txt small{display:block;color:var(--ink-mute);font-size:12.5px;margin-top:2px}
.lrow .chev{width:18px;height:18px;color:var(--ink-mute)}
.lists-prog{font-family:var(--font-display);font-size:18px;color:var(--ink-soft);margin:-4px 0 10px}.lists-prog b{color:var(--vine-d);font-weight:600}
.litems{display:flex;flex-direction:column}
.litem{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--line);cursor:pointer;-webkit-user-select:none;user-select:none}
.litem:first-child{border-top:0}
.litem input{position:absolute;opacity:0;width:0;height:0}
.litem .box{width:26px;height:26px;border-radius:9px;border:2px solid var(--sand2);display:grid;place-items:center;color:#fff;flex:none;transition:background .2s,border-color .2s}
.litem .box svg{width:14px;height:14px;opacity:0;transition:opacity .2s}
.litem.done .box{background:var(--vine);border-color:var(--vine)}.litem.done .box svg{opacity:1}
.litem .t{flex:1;font-size:15px;transition:color .2s}
.litem.done .t{color:var(--ink-mute);text-decoration:line-through}
.litem .x{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:var(--ink-mute);opacity:.6}
.litem .x svg{width:13px;height:13px}
.ladd{display:flex;gap:8px;margin:14px 0 6px}
.ladd input{flex:1;height:44px;border-radius:14px;border:0;background:var(--paper2);padding:0 14px;font-size:14px}
.btn.sm{height:40px;padding:0 14px;font-size:13px}
.ico.vine{background:var(--vine-xl);color:var(--vine-d)}

/* ---------- v4.0 : il y a un an, comparer, yeux ---------- */
.ago:empty{display:none}
.ago{margin:0 0 14px}
.agocard{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:10px;border-radius:20px;background:linear-gradient(135deg,var(--gold-xl),var(--coral-xl))}
.agocard img,.agocard video{width:76px;height:76px;border-radius:16px;object-fit:cover;flex:none}
.agocard .k{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--gold-d)}
.agocard b{display:block;font-family:var(--font-display);font-size:19px;font-weight:600;margin:3px 0 2px;line-height:1.15}
.agocard small{color:var(--ink-mute);font-size:12.5px}
.tools2{display:flex;gap:8px;margin:0 0 16px}
.tool{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;border-radius:14px;background:var(--paper2);font-weight:700;font-size:13px;color:var(--ink)}
.tool svg{width:18px;height:18px;color:var(--iris-d)}
.cmp-pick{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 0;margin:0 0 10px}
.cmp-pick::-webkit-scrollbar{display:none}
.cmp-pick button{flex:none;height:32px;padding:0 12px;border-radius:16px;background:var(--sand);font-size:12px;font-weight:700;color:var(--ink-soft);white-space:nowrap}
.cmp-pick button.on{background:var(--iris);color:#fff}
.cmp-stage{position:relative;aspect-ratio:1;border-radius:20px;overflow:hidden;background:var(--sand);touch-action:none;cursor:ew-resize;margin:0 0 10px;-webkit-user-select:none;user-select:none}
.cmp-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.cmp-a,.cmp-b{position:absolute;inset:0}
.cmp-a{clip-path:inset(0 50% 0 0)}
.cmp-stage .tag{position:absolute;bottom:12px;padding:5px 10px;border-radius:12px;background:rgba(255,255,255,.88);font-size:11.5px;font-weight:800;color:var(--ink)}
.cmp-a .tag{left:12px}.cmp-b .tag{right:12px}
.cmp-bar{position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.cmp-bar i{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:#fff;box-shadow:0 6px 16px rgba(43,42,34,.25)}
.cmp-bar i::before,.cmp-bar i::after{content:"";position:absolute;top:14px;width:7px;height:12px;border-left:2px solid var(--iris-d);border-bottom:2px solid var(--iris-d)}
.cmp-bar i::before{left:9px;transform:rotate(45deg)}.cmp-bar i::after{right:9px;transform:rotate(-135deg)}
.eyes-stage{position:relative;border-radius:18px;overflow:hidden;background:var(--sand);margin:0 0 14px;cursor:crosshair}
.eyes-stage img{display:block;width:100%;height:auto;pointer-events:none}
.eyes-stage i{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;border:3px solid #fff;background:rgba(124,107,181,.75);box-shadow:0 2px 8px rgba(0,0,0,.35);opacity:0;transform:scale(.4);transition:opacity .2s,transform .3s var(--ease-spring);pointer-events:none}
.eyes-stage i.on{opacity:1;transform:none}
#readout .warn{color:var(--coral-d);font-style:normal;font-weight:700}
.btn:disabled{opacity:.45}

/* ---------- v4.0 : réactions, mode grands-parents, rappels ---------- */
.rbar{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap}
.rheart{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:17px;background:var(--paper2);color:var(--coral-d);font-weight:800;font-size:13px;transition:transform .25s var(--ease-spring),background .2s}
.rheart svg{width:16px;height:16px}
.rheart.on{background:var(--coral);color:#fff}
.rheart:disabled{opacity:1}
.rheart:disabled:not(.on){opacity:.75}
.rnames{font-size:12px;color:var(--ink-mute);font-weight:700}
.rword{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:17px;background:var(--iris-xl);color:var(--iris-d);font-weight:800;font-size:12.5px;margin-left:auto}
.rword svg{width:15px;height:15px}
.rwords{margin-top:8px;display:flex;flex-direction:column;gap:4px}
.rwords p{font-size:13.5px;color:var(--ink-soft);line-height:1.4}
.rwords i{font-family:var(--font-display);font-size:15px;color:var(--ink)}
.memory .rbar .rheart{background:var(--paper2)}
/* mode lecture (grands-parents) : plus gros, nouveautés en premier */
.phone.gp .page{zoom:1.08}
.phone.gp .today,.phone.gp .reminders,.phone.gp #spurt,.phone.gp .qmonth .q-answer,.phone.gp #home-lists{display:none}
.phone.gp .memory .rbar .rheart{background:var(--coral-xl)}
.gpnews:empty{display:none}
.gpnews{margin:0 0 20px}
.gpnews .h{margin-bottom:10px}
.gpcard{padding:12px;border-radius:22px;background:var(--paper2);margin-bottom:12px}
.gpmain{display:flex;gap:12px;align-items:flex-start;cursor:pointer}
.gpmain img,.gpmain video{width:96px;height:96px;border-radius:16px;object-fit:cover;flex:none}
.gpmain .txt{flex:1;min-width:0}
.gpmain b{display:block;font-family:var(--font-display);font-size:19px;font-weight:600;line-height:1.15}
.gpmain p{font-size:14px;color:var(--ink-soft);margin-top:3px;line-height:1.4}
.gpmain small{display:block;font-size:12px;color:var(--ink-mute);margin-top:4px}
#sh-word textarea{width:100%;min-height:90px;border:0;border-radius:14px;background:var(--paper2);padding:12px 14px;font-family:var(--font-display);font-size:17px;line-height:1.45;resize:vertical}

/* ---------- v4.0 : la maison vit ---------- */
.scene .rainbow{opacity:0;transition:opacity 3s}
.phone.rainbow .scene .rainbow{opacity:1}
.scene .venus{opacity:0;transition:opacity 3s,transform 3s}
.scene .shooters .shoot{stroke-dasharray:80 80;animation:shoot 1.2s ease-out forwards}
@keyframes shoot{0%{opacity:0;stroke-dashoffset:80;transform:translate(0,0)}15%{opacity:1}100%{opacity:0;stroke-dashoffset:-80;transform:translate(40px,18px)}}
.scene .fog{opacity:0;transition:opacity 4s}
.phone.fog .scene .fog{opacity:1;animation:fogdrift 40s ease-in-out infinite alternate}
@keyframes fogdrift{from{transform:translateX(-12px)}to{transform:translateX(12px)}}
.scene .flash{opacity:0;pointer-events:none;mix-blend-mode:screen}
.scene .flash.on{animation:flash .9s ease-out}
@keyframes flash{0%{opacity:0}6%{opacity:.85}14%{opacity:.1}22%{opacity:.6}40%{opacity:0}100%{opacity:0}}
/* papillon & poursuite */
.scene .butterfly{opacity:0;transform:translate(300px,215px)}
.scene .butterfly .wings .w{transform-box:fill-box;transform-origin:right center;animation:flapL .18s ease-in-out infinite alternate}
.scene .butterfly .wings .w.r{transform-origin:left center;animation-name:flapR}
@keyframes flapL{from{transform:scaleX(1)}to{transform:scaleX(.25)}}
@keyframes flapR{from{transform:scaleX(1)}to{transform:scaleX(.25)}}
.scene .butterfly.fly{animation:flutter 9s ease-in-out forwards}
@keyframes flutter{0%{opacity:0;transform:translate(320px,232px)}8%{opacity:1}20%{transform:translate(285px,206px)}38%{transform:translate(236px,214px)}55%{transform:translate(190px,200px)}72%{transform:translate(150px,212px)}90%{opacity:1;transform:translate(110px,196px)}100%{opacity:0;transform:translate(80px,186px)}}
@keyframes trot{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
/* Lou suit le soleil, Pixel grimpe sur le mur */
.scene .cat{transform-box:view-box}
/* vendanges, raisins */
.scene .tractor,.scene .baskets{opacity:0;transition:opacity 2s}
.phone.harvest .scene .tractor,.phone.harvest .scene .baskets{opacity:1}
.phone.harvest .scene .tractor{animation:tractor 70s linear infinite}
@keyframes tractor{0%{transform:translate(400px,176px) scaleX(-1)}49%{transform:translate(190px,178px) scaleX(-1)}50%{transform:translate(190px,178px) scaleX(1)}100%{transform:translate(400px,176px) scaleX(1)}}
.phone.grapes .vines .row-vine{stroke:#6E4B78}
.phone.harvest .vines .row-vine{stroke-dasharray:0.1 9!important;opacity:.7}
/* anniversaire */
.scene .party{opacity:0;transition:opacity 1.5s}
.phone.party .scene .party{opacity:1}
.phone.party .scene .balloon{transform-box:fill-box;transform-origin:center bottom;animation:balloon 4s ease-in-out infinite}
.phone.party .scene .balloon.b2{animation-delay:-1.3s}.phone.party .scene .balloon.b3{animation-delay:-2.6s}
@keyframes balloon{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-8px) rotate(3deg)}}
.scene .butterfly.free{opacity:1;transition:none}
.scene .butterfly.caught .wings{animation:none}
.scene .flock.scatter path{animation:scatter 1.1s ease-out}
@keyframes scatter{0%{transform:translate(0,0)}100%{transform:translate(30px,-40px)}}
.scene #irises .grown{transform-box:fill-box;transform-origin:center bottom;animation:grow 1.4s var(--ease-spring) both}
@keyframes grow{from{transform:scale(0)}to{transform:scale(1)}}
.scene .ground{opacity:0}.phone.play .scene .ground{opacity:1}.phone.winter .scene .ground{fill:#E6E5DA}.phone.autumn .scene .ground{fill:#A5B06A}.phone.summer .scene .ground{fill:#86A863}

/* ---------- v4.1 : mode sombre (pas de noir pur, chaud et coloré) + léger filtre lumière bleue ---------- */
.phone.dark{color-scheme:dark;color:var(--ink);
  --paper:#252130; --paper2:#2E2A3A; --sand:#37323F; --sand2:#4D4659; --line:rgba(255,255,255,.09);
  --ink:#F1EAE0; --ink-soft:#CFC6BA; --ink-mute:#9A92A6;
  --coral:#E68A6A; --coral-d:#F2A88F; --coral-xl:#4A3230;
  --iris:#8F7FC7; --iris-d:#C9BFE6; --iris-l:#6F63A6; --iris-xl:#3A3350;
  --vine:#8FAC6E; --vine-d:#BBD59D; --vine-xl:#2F3A2B; --grape:#B48BD0;
  --lagoon:#86B3BB; --lagoon-d:#A6D4DA; --lagoon-xl:#2A3D41; --gold:#D6A75C; --gold-d:#F0C77A; --gold-xl:#463A26;
  --glass:rgba(46,42,58,.72); --shadow:0 10px 30px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.25); --shadow-s:0 1px 3px rgba(0,0,0,.3)}
.phone.dark #v-carnet{--acc:#D98AA4;--acc-d:#F2A6BE;--acc-xl:#4A2F3A}
.phone.dark #v-home{--acc-d:#F2A88F}.phone.dark #v-frise{--acc-d:#C9BFE6}.phone.dark #v-sante{--acc-d:#A6D4DA}
.phone.dark .t-coral{--bg:#4A3230;--fg:#F0A088}.phone.dark .t-iris{--bg:#3A3350;--fg:#C9BFE6}.phone.dark .t-lagoon{--bg:#2A3D41;--fg:#9FD0D6}.phone.dark .t-gold{--bg:#463A26;--fg:#F0C77A}.phone.dark .t-vine{--bg:#2F3A2B;--fg:#B7D39A}.phone.dark .t-grape{--bg:#3E2F44;--fg:#D9B7E0}.phone.dark .t-rose{--bg:#4A2F3A;--fg:#F2A6BE}.phone.dark .t-sky{--bg:#2C3548;--fg:#A9C3EC}
.phone.dark .view .page,.phone.dark .sheet,.phone.dark .nav{transition:background .5s,background-color .5s}
.phone.dark .view:not(#v-home) .hero::after{opacity:.35}
.phone.dark .stationery,.phone.dark .pola,.phone.dark .e-paper{background:#2E2A3A}
.phone.dark .stationery .lbody{color:var(--ink)}
.phone.dark .first .ico,.phone.dark .subtabs.hub .hc .ico{background:rgba(255,255,255,.1)}
.phone.dark .first .d{background:rgba(255,255,255,.08)}
.phone.dark .first.done:not(.photo) .t,.phone.dark .first.done:not(.photo) .d,.phone.dark .first.done:not(.photo) .ico{color:#252130}
.phone.dark .first.done:not(.photo) .d{background:rgba(0,0,0,.12)}.phone.dark .first.done:not(.photo) .ico{background:rgba(0,0,0,.14)}
.phone.dark .subtabs.hub .hc.active b,.phone.dark .subtabs.hub .hc.active small,.phone.dark .subtabs.hub .hc.active .ico{color:#252130}
.phone.dark .subtabs.hub .hc.active .ico{background:rgba(0,0,0,.14)}
.phone.dark .first-now{background:linear-gradient(135deg,var(--bg),#2E2A3A 150%)}
.phone.dark .first-now .cta{color:#252130}
.phone.dark .memories .memory.quote:nth-child(3n+2){background:#4A2F3A}.phone.dark .memories .memory.quote:nth-child(3n+2) h3{color:#F2A6BE}
.phone.dark .pola:nth-child(5n+2) .ph{background:linear-gradient(160deg,#4A2F3A,#463A26)}.phone.dark .pola:nth-child(5n+3) .ph{background:linear-gradient(160deg,#2A3D41,#2F3A2B)}.phone.dark .pola:nth-child(5n+4) .ph{background:linear-gradient(160deg,#463A26,#4A3230)}.phone.dark .pola:nth-child(5n) .ph{background:linear-gradient(160deg,#3E2F44,#2C3548)}.phone.dark .pola .ph{background:linear-gradient(160deg,#3A3350,#37323F)}
.phone.dark .pola:nth-child(5n+2) .ph .n{color:#F2A6BE}
.phone.dark .letter:nth-child(even):not(.sealed) .ico{background:#4A2F3A;color:#F2A6BE}
.phone.dark .qmonth{background:linear-gradient(135deg,#3A3350,#4A2F3A)}
.phone.dark .qmonth h2{color:var(--ink)}
.phone.dark .tk.sleep.on{background:#6F63A6}
.phone.dark .field input,.phone.dark .field textarea{color:var(--ink)}
.phone.dark .subtabs .ind,.phone.dark .toggle .ind{background:var(--sand2)}
.phone.dark .subtabs button.active,.phone.dark .toggle button.active{color:var(--ink)}
.phone.dark .chart .lbl{fill:var(--ink)}.phone.dark .chart .dot{fill:var(--paper)}
.phone.dark .teeth .tooth rect,.phone.dark .teeth .tooth path.crown{fill:#F1EAE0;stroke:#B8AFA2}.phone.dark .teeth .gum{stroke:#5A3F45}.phone.dark .teeth .gum2{stroke:#7A5560}
.phone.dark .empty-card{border-color:var(--sand2)}
.phone.dark .empty-card .ico{background:var(--sand)}
.phone.dark .play-menu button,.phone.dark .play-lock,.phone.dark .play-say{background:rgba(46,42,58,.92)}
.phone.dark .play-say{color:#C9BFE6}
.phone.dark .hold-menu .hm-del{background:var(--paper2);color:var(--ink)}
.phone.dark .toast{background:#F1EAE0;color:#252130}
.phone.dark .cmp-stage .tag{background:rgba(46,42,58,.9);color:var(--ink)}
.phone.dark .lrow .ring i{background:var(--paper2)}
.phone.dark .sday .bg{fill:var(--sand)}
.phone.dark .rheart{background:var(--sand)}
.phone.dark .fly .paper{background:#2E2A3A}
.phone.dark .wake{background:#3A3350}
.phone.dark .dose{background:#463A26}
.phone.dark .sp.leap{background:#3A3350}.phone.dark .sp.grow{background:#4A3230}
.phone.dark .drow{border-top-color:rgba(255,255,255,.08)}
.phone.dark .ncurve .avg{stroke:#6F63A6}
.srow .val{font-weight:700;font-size:13px;color:var(--coral);white-space:nowrap}
#set-wipe .ico{color:var(--coral-d)}
.switch{width:46px;height:28px;border-radius:14px;background:var(--sand2);position:relative;transition:background .25s;flex:none}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:var(--shadow-s);transition:transform .25s var(--ease-spring)}
.switch.on{background:var(--iris)}.switch.on::after{transform:translateX(18px)}
.card-preview{border-radius:18px;overflow:hidden;box-shadow:var(--shadow);margin-bottom:16px;background:var(--sand);aspect-ratio:4/5}
.card-preview img{display:block;width:100%;height:100%;object-fit:cover}

/* ---------- lightbox / toast ---------- */
.lightbox{position:absolute;inset:0;z-index:25;background:rgba(20,18,14,.93);display:grid;place-items:center;grid-template-rows:1fr auto;opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s;padding:60px 0 40px}
.lightbox.show{opacity:1;visibility:visible;transition:opacity .3s}
.lightbox img{max-width:94%;max-height:100%;border-radius:12px;object-fit:contain}
.lightbox .cap{color:var(--paper);font-family:var(--font-display);font-style:italic;font-size:16px;padding:12px 24px 0;text-align:center}
.lightbox .cap:empty{display:none}
.lightbox button{position:absolute;top:calc(16px + var(--sa-t));right:16px}
.toast{position:absolute;left:50%;bottom:calc(var(--navh) + var(--sa-b));transform:translate(-50%,20px);z-index:30;padding:10px 16px;border-radius:16px;background:var(--ink);color:var(--paper);font-weight:700;font-size:13.5px;opacity:0;transition:opacity .3s,transform .3s var(--ease-spring);pointer-events:none;white-space:nowrap;max-width:90%;overflow:hidden;text-overflow:ellipsis}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- v4.0 : mode nuit, papier, écriture ---------- */
.srow .val{font-size:13px;font-weight:700;color:var(--coral-d);flex:none;max-width:40%;text-align:right}
/* papier à motifs : très discret, en haut de page */
.phone.paper-spring .view .page{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%23C9698A' fill-opacity='.10'%3E%3Ccircle cx='20' cy='20' r='3'/%3E%3Ccircle cx='26' cy='16' r='2'/%3E%3Ccircle cx='14' cy='16' r='2'/%3E%3Ccircle cx='20' cy='12' r='2'/%3E%3Ccircle cx='80' cy='70' r='3'/%3E%3Ccircle cx='86' cy='66' r='2'/%3E%3Ccircle cx='74' cy='66' r='2'/%3E%3Ccircle cx='80' cy='62' r='2'/%3E%3C/g%3E%3Cpath d='M50 95 q6 -10 12 0' stroke='%237E9B5E' stroke-opacity='.14' fill='none'/%3E%3C/svg%3E"),linear-gradient(180deg,var(--acc-xl) 0,var(--paper) 240px)}
.phone.paper-summer .view .page{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg stroke='%23C99A4E' stroke-opacity='.13' fill='none'%3E%3Ccircle cx='30' cy='30' r='6'/%3E%3Cpath d='M30 18v-5M30 47v-5M18 30h-5M47 30h-5M21.5 21.5l-3.5-3.5M42 42l-3.5-3.5M38.5 21.5l3.5-3.5M18 42l3.5-3.5'/%3E%3Ccircle cx='100' cy='95' r='4'/%3E%3C/g%3E%3C/svg%3E"),linear-gradient(180deg,var(--acc-xl) 0,var(--paper) 240px)}
.phone.paper-autumn .view .page{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130' viewBox='0 0 130 130'%3E%3Cg fill='%23D97757' fill-opacity='.11'%3E%3Cpath d='M25 30 q10 -14 22 -4 q-6 12 -22 4z'/%3E%3Cpath d='M85 90 q10 -14 22 -4 q-6 12 -22 4z' transform='rotate(40 96 86)'/%3E%3C/g%3E%3C/svg%3E"),linear-gradient(180deg,var(--acc-xl) 0,var(--paper) 240px)}
.phone.paper-winter .view .page{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130' viewBox='0 0 130 130'%3E%3Cg stroke='%237BA3AB' stroke-opacity='.16' fill='none' stroke-linecap='round'%3E%3Cpath d='M30 20v20M20 30h20M23 23l14 14M37 23l-14 14'/%3E%3Cpath d='M95 85v14M88 92h14M90.5 87.5l9 9M99.5 87.5l-9 9'/%3E%3C/g%3E%3C/svg%3E"),linear-gradient(180deg,var(--acc-xl) 0,var(--paper) 240px)}
.phone[class*="paper-"] .view .page{background-repeat:repeat,no-repeat;background-size:auto,100% 100%;background-position:0 0,0 0}

/* ---------- v4.1 : les animaux marchent ---------- */
.scene .cat,.scene .dog,.scene .cat .body,.scene .dog .body{transform-box:view-box}
/* marche : léger dandinement autour des pattes, jamais de saut */
.scene .dog.walking .body,.scene .cat.walking .body{animation:waddle .5s ease-in-out infinite alternate}
@keyframes waddle{from{transform:rotate(-3.2deg)}to{transform:rotate(3.2deg)}}
.scene .jumping .body{animation:stretch .5s ease-in-out}
@keyframes stretch{0%{transform:scale(1,1)}30%{transform:scale(1.08,.9)}60%{transform:scale(.94,1.1)}100%{transform:scale(1,1)}}
.scene .body.bounce{animation:bounce .7s var(--ease-spring)}
@keyframes bounce{0%{transform:scale(1)}30%{transform:scale(1.06,.94) translateY(0)}55%{transform:scale(.96,1.06) translateY(-8px)}100%{transform:none}}
#measures .empty-card,#logs .empty-card{margin-top:22px}

/* ---------- v4.1 : cartes de section (Carnet, Santé) ---------- */
.t-grape{--bg:#EFE3F0;--fg:#6E4B78}
.subtabs.hub{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;padding:4px 22px 12px;margin:0 -22px 12px;background:none;border-radius:0;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 14px,#000 calc(100% - 26px),transparent);mask-image:linear-gradient(to right,transparent 0,#000 14px,#000 calc(100% - 26px),transparent)}
.subtabs.hub.end{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 14px);mask-image:linear-gradient(to right,transparent 0,#000 14px)}
.subtabs.hub .ind{display:none}
.subtabs.hub .hc{flex:none;width:126px;height:auto;padding:12px 12px 11px;border-radius:20px;background:var(--bg);color:var(--fg);text-align:left;display:flex;flex-direction:column;align-items:flex-start;white-space:normal;letter-spacing:0;scroll-snap-align:start;transition:transform .25s var(--ease-spring),background .25s,color .25s;box-shadow:0 1px 0 rgba(43,42,34,.04)}
.subtabs.hub .hc:active{transform:scale(.96)}
.subtabs.hub .hc .ico{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.85);display:grid;place-items:center;margin-bottom:9px;color:var(--fg)}
.subtabs.hub .hc .ico svg{width:17px;height:17px}
.subtabs.hub .hc b{display:block;font-family:var(--font-display);font-size:16px;font-weight:600;line-height:1.1;color:var(--ink)}
.subtabs.hub .hc small{display:block;font-size:11px;font-weight:700;color:var(--fg);margin-top:4px;line-height:1.25;opacity:.9}
.subtabs.hub .hc.active{background:var(--fg);color:#fff;box-shadow:0 10px 22px rgba(43,42,34,.16)}
.subtabs.hub .hc.active b,.subtabs.hub .hc.active small{color:#fff}
.subtabs.hub .hc.active .ico{background:rgba(255,255,255,.22);color:#fff}

/* listes : petite animation à chaque coche, grosse quand tout est coché */
.litem .box.pop{animation:checkpop .45s var(--ease-spring)}
@keyframes checkpop{0%{transform:scale(.7)}50%{transform:scale(1.35) rotate(-6deg)}100%{transform:scale(1)}}
.lists-prog.done{color:var(--vine-d)}
.lists-prog.party{animation:progparty 1.1s var(--ease-spring)}
@keyframes progparty{0%{transform:scale(1)}30%{transform:scale(1.35) rotate(-3deg)}60%{transform:scale(1.15) rotate(2deg)}100%{transform:scale(1)}}
.lrow .ring.full{background:var(--vine)}
.lrow .ring.full i{box-shadow:inset 0 0 0 2px var(--vine)}
.rows .ico.pic{overflow:hidden;padding:0}.rows .ico.pic img{width:100%;height:100%;object-fit:cover;display:block}
#trash-list .row .ico{flex:none;width:44px;height:44px;border-radius:12px}
#trash-list .row .btn{flex:none}

/* ---------- v4.2 : dessins assemblés (maison, arbres, animaux, tracteur, papillon) ---------- */
.phone.summer .scene .tree-a .leaf.l{fill:#6DA655}.phone.summer .scene .tree-a .leaf.m{fill:#7FB864}.phone.summer .scene .tree-a .leaf.r{fill:#8FC372}
.phone.autumn .scene .tree-a .leaf.l{fill:#D9924E}.phone.autumn .scene .tree-a .leaf.m{fill:#E8B25F}.phone.autumn .scene .tree-a .leaf.r{fill:#C97A3C}
.phone.winter .scene .tree-a .leaf{fill:#DCE3D8}
.phone.winter .scene .house .roses circle{opacity:0}
.scene .house .snow{opacity:0;transition:opacity 1.5s}.phone.winter .scene .house .snow,.phone.snow .scene .house .snow{opacity:1}
.subtabs.hub{scroll-padding:0 22px}
.scene .sunflowers{transition:opacity 1.5s}.phone.winter .scene .sunflowers,.phone.spring .scene .sunflowers{opacity:0}
.phone.winter .scene .deco{opacity:.6}
.fam.pet .ava{background:var(--gold-xl);color:var(--gold-d)}
.fam.pet.todo .ava{box-shadow:inset 0 0 0 2px var(--gold)}
.fam.pet.todo b::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--coral);margin-left:4px;vertical-align:middle}

/* ---------- v4.2 : carte « Carnet partagé » en tête des réglages ---------- */
.share-card{display:grid;grid-template-columns:44px 1fr;grid-template-areas:"ico txt" "cta cta";gap:6px 12px;align-items:start;width:100%;text-align:left;padding:16px 16px 14px;margin:0 0 14px;border-radius:20px;color:#fff;background:linear-gradient(135deg,#7C6BB5 0%,#6F63A6 45%,#5E8E96 100%);box-shadow:0 10px 26px rgba(92,80,150,.28);position:relative;overflow:hidden}
.share-card::before{content:"";position:absolute;right:-30px;top:-40px;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.12)}
.share-card::after{content:"";position:absolute;right:40px;bottom:-60px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.08)}
.share-card .ico{grid-area:ico;width:44px;height:44px;border-radius:14px;background:rgba(255,255,255,.18);display:grid;place-items:center}
.share-card .ico svg{width:24px;height:24px;color:#fff}
.share-card .txt{grid-area:txt;display:flex;flex-direction:column;gap:4px;min-width:0}
.share-card .txt b{font-family:var(--font-display);font-size:20px;font-weight:600;line-height:1.1}
.share-card .txt small{font-size:13px;line-height:1.4;color:rgba(255,255,255,.88)}
.share-card .cta{grid-area:cta;justify-self:end;background:#fff;color:#5E4E97;font-weight:700;font-size:14px;padding:9px 16px;border-radius:999px;margin-top:4px;position:relative;z-index:1}
.share-card.on{background:linear-gradient(135deg,#5E8E96 0%,#6FA39A 60%,#8FAC6E 100%);box-shadow:0 10px 26px rgba(80,130,120,.28)}
.share-card.on .cta{color:#3F6E64}
.phone.dark .share-card{box-shadow:0 10px 26px rgba(0,0,0,.35)}
/* relief : le puits, les tournesols, la brouette, la grange suivent leur plan */
.scene .barn{transform:translateX(calc(var(--tx) * -.7px))}
.scene .deco{transform:translateX(calc(var(--tx) * -1.3px))}
.scene .well,.scene .sunflowers{transform:translateX(calc(var(--tx) * -1.8px))}
/* les ombres des collines, les lucioles, les paniers et la fête suivent leur plan */
.scene .hill-far + .shade{transform:translateX(calc(var(--tx) * -.7px))}
.scene .hill-vine + .shade,.scene .baskets,.scene .party{transform:translateX(calc(var(--tx) * -1.1px))}
.scene .meadow + .shade{transform:translateX(calc(var(--tx) * -1.8px))}
.scene .fireflies{transform:translateX(calc(var(--tx) * -2.2px))}
.scene .rainbow{transform:translateX(calc(var(--tx) * -.35px))}

/* ---------- v5 : Pour Iris — le monde, la caméra, les jeux ---------- */
.play-btn{position:absolute;right:16px;top:calc(var(--topbar) + var(--sa-t) + 6px);z-index:4;width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#8F7FC7,#6F63A6);color:#fff;display:grid;place-items:center;box-shadow:0 8px 18px rgba(124,107,181,.35);transition:transform .3s var(--ease-spring),opacity .3s}
.play-btn svg{width:22px;height:22px}
.play-btn:active{transform:scale(.9)}
.play-btn::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(143,127,199,.45);animation:playring 2.6s ease-out infinite}
@keyframes playring{0%{transform:scale(.8);opacity:1}100%{transform:scale(1.5);opacity:0}}
.phone.readonly .play-btn,.phone.readonly .pull-hint{display:none}
.pull-hint{position:absolute;left:50%;bottom:44px;z-index:4;transform:translate(-50%,10px) scale(.9);display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:20px;background:var(--iris);color:#fff;font-weight:800;font-size:13px;box-shadow:0 10px 24px rgba(124,107,181,.35);opacity:0;transition:opacity .25s,transform .35s var(--ease-spring);pointer-events:none}
.pull-hint svg{width:18px;height:18px}
.pull-hint.on{opacity:1;transform:translate(-50%,0) scale(1)}
.hero{transition:height .62s var(--ease-out)}
.play-lock,.play-count,.play-say,.play-hint,.play-menu,.play-back,.play-zoom,.play-clue,.hint-arrow,.eyelids{display:none}
.scene .ext{display:none}.phone.play .scene .ext{display:block}
.scene [data-night]{opacity:0;transition:opacity 2s}.phone.night .scene [data-night]{opacity:1}
.phone.play .page{pointer-events:none}
.phone.play.settled .page{visibility:hidden}
.nav,.fab,.topbar{transition:opacity .35s,transform .45s var(--ease-out)}
.phone.play .nav,.phone.play .fab{opacity:0;transform:translateY(40px);pointer-events:none}
.phone.play .topbar,.phone.play .play-btn{opacity:0;pointer-events:none}.phone.play .topbar *{pointer-events:none!important}
.phone.play .scene-wrap{z-index:3;touch-action:none;cursor:grab}
.phone.play .scene{transition:none}
.scene.world{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform;backface-visibility:hidden}
.phone.play .view{-webkit-mask-image:none;mask-image:none} /* (plus de masque : conservé pour mémoire) */
.phone.play .play-lock{position:absolute;right:14px;top:calc(12px + var(--sa-t));z-index:6;display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 14px 0 12px;transition:transform .25s var(--ease-spring);border-radius:20px;background:rgba(255,253,247,.86);color:var(--ink-soft);font-weight:800;font-size:13px;box-shadow:var(--shadow-s);overflow:hidden;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.play-lock svg{width:15px;height:15px;position:relative}.play-lock span{position:relative}
.play-lock i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--coral-xl)}
.play-lock.arming i{animation:armlock 1.5s linear forwards}
@keyframes armlock{to{width:100%}}
.phone.play .play-back{position:absolute;left:14px;top:calc(12px + var(--sa-t));z-index:6;display:inline-flex;align-items:center;gap:4px;height:40px;padding:0 14px 0 8px;border-radius:20px;background:rgba(255,253,247,.86);color:var(--iris-d);font-weight:800;font-size:13px;box-shadow:var(--shadow-s);opacity:0;transform:translateX(-12px);transition:opacity .25s,transform .35s var(--ease-spring);pointer-events:none}
.play-back svg{width:18px;height:18px;transform:rotate(180deg)}
.phone.play .play-back.on{opacity:1;transform:none;pointer-events:auto}
.phone.play .play-zoom{position:absolute;right:14px;top:calc(62px + var(--sa-t));z-index:6;display:flex;flex-direction:column;gap:6px}
.play-zoom button{width:36px;height:36px;border-radius:50%;background:rgba(255,253,247,.86);color:var(--ink-soft);display:grid;place-items:center;box-shadow:var(--shadow-s);transition:transform .25s var(--ease-spring)}
.play-zoom button:active{transform:scale(.88)}.play-zoom svg{width:16px;height:16px}
.phone.play .play-count{position:absolute;left:0;right:0;top:18%;z-index:7;display:block;text-align:center;font-family:var(--font-display);font-size:130px;font-weight:600;color:#fff;text-shadow:0 8px 34px rgba(94,78,151,.5),0 2px 0 rgba(94,78,151,.35);pointer-events:none;opacity:0}
.play-count.on{animation:countpop 1.3s var(--ease-spring) forwards}
@keyframes countpop{0%{opacity:0;transform:scale(.3) rotate(-8deg)}30%{opacity:1;transform:scale(1.12) rotate(2deg)}70%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.9) translateY(-20px)}}
.phone.play .play-say{position:absolute;left:50%;top:calc(66px + var(--sa-t));max-width:calc(100% - 32px);z-index:7;display:block;text-align:center;font-family:var(--font-display);font-size:24px;font-weight:600;line-height:1.2;color:var(--iris-d);background:rgba(255,253,247,.92);border-radius:22px;padding:12px 20px;box-shadow:0 10px 30px rgba(43,42,34,.14);opacity:0;transform:translate(-50%,-14px) scale(.9);transition:opacity .25s,transform .5s var(--ease-spring);pointer-events:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.phone.play .play-say.on{opacity:1;transform:translate(-50%,0) scale(1)}
.phone.play .play-hint{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(150px + var(--sa-b));z-index:6;display:block;font-size:13px;font-weight:700;color:var(--coral-d);background:rgba(255,253,247,.9);padding:7px 12px;border-radius:14px;pointer-events:none;white-space:nowrap}
.phone.play .play-hint:empty{display:none}
.phone.play .hint-arrow{position:absolute;z-index:7;width:48px;height:48px;border-radius:50%;background:var(--coral);color:#fff;display:grid;place-items:center;box-shadow:0 10px 24px rgba(217,119,87,.4);opacity:0;transform:translate(-50%,-50%) rotate(var(--a,0deg)) scale(.6);transition:opacity .3s,transform .4s var(--ease-spring);pointer-events:none}
.hint-arrow svg{width:26px;height:26px}
.phone.play .hint-arrow.on{opacity:1;transform:translate(-50%,-50%) rotate(var(--a,0deg)) scale(1);animation:arrowpulse 1s ease-in-out infinite}
@keyframes arrowpulse{0%,100%{box-shadow:0 10px 24px rgba(217,119,87,.4)}50%{box-shadow:0 10px 24px rgba(217,119,87,.4),0 0 0 12px rgba(217,119,87,.18)}}
.phone.play .eyelids{position:absolute;inset:0;z-index:8;display:block;pointer-events:none;overflow:hidden}
.eyelids .lid{position:absolute;left:-12%;right:-12%;height:56%;background:radial-gradient(120% 100% at 50% 50%,#3A3350 0%,#252130 70%);transition:transform .75s var(--ease-out)}
.eyelids .lid.t{top:0;transform:translateY(-104%);border-radius:0 0 50% 50%/0 0 26% 26%}
.eyelids .lid.b{bottom:0;transform:translateY(104%);border-radius:50% 50% 0 0/26% 26% 0 0}
.eyelids.on .lid{transform:none;transition:transform .6s var(--ease-out)}
.eyes-msg{position:absolute;left:0;right:0;top:44%;transform:translateY(-50%);text-align:center;color:#F1EAE0;font-family:var(--font-display);font-size:34px;font-weight:600;opacity:0;transition:opacity .35s .35s}
.eyelids.on .eyes-msg{opacity:1}
.eyes-msg.num{font-size:140px;color:#F0C77A}
.eyes-msg.pop{animation:numpop .6s var(--ease-spring)}
@keyframes numpop{from{transform:translateY(-50%) scale(.4)}to{transform:translateY(-50%) scale(1)}}
.phone.play .play-menu{position:absolute;left:0;right:0;bottom:calc(14px + var(--sa-b));z-index:6;display:flex;gap:10px;overflow-x:auto;padding:10px 16px;scroll-snap-type:x proximity;scrollbar-width:none;opacity:0;transform:translateY(30px);transition:opacity .3s,transform .45s var(--ease-spring);pointer-events:none;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 16px,#000 calc(100% - 16px),transparent);mask-image:linear-gradient(to right,transparent 0,#000 16px,#000 calc(100% - 16px),transparent)}
.play-menu::-webkit-scrollbar{display:none}
.phone.play .play-menu.on{opacity:1;transform:none;pointer-events:auto}
.play-menu button{flex:none;width:84px;scroll-snap-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px 9px;border-radius:22px;background:rgba(255,253,247,.92);font-weight:800;font-size:11.5px;color:var(--ink);box-shadow:0 8px 20px rgba(43,42,34,.15);transition:transform .3s var(--ease-spring),background .3s,color .3s}
.play-menu button:active{transform:scale(.94)}
.play-menu .ico{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--bg,var(--iris-xl));color:var(--fg,var(--iris-d));transition:background .3s,color .3s}
.play-menu .ico svg{width:22px;height:22px}
.play-menu .g-hide{--bg:#E8E2F5;--fg:#5E4E97;--on:#7C6BB5}.play-menu .g-ball{--bg:#FBE3D8;--fg:#B85A3C;--on:#D97757}.play-menu .g-bf{--bg:#DDEDEF;--fg:#3F6E77;--on:#5E8E96}.play-menu .g-birds{--bg:#FBEFD2;--fg:#8A6A1E;--on:#C99A4E}.play-menu .g-garden{--bg:#E5EFD9;--fg:#4E6B36;--on:#7E9B5E}.play-menu .g-bubbles{--bg:#F3E4F1;--fg:#8A4A6E;--on:#C9698A}
.play-menu button.on{background:var(--on);color:#fff}.play-menu button.on .ico{background:rgba(255,255,255,.25);color:#fff}
.phone.dark .play-menu button,.phone.dark .play-lock,.phone.dark .play-back,.phone.dark .play-zoom button,.phone.dark .play-say,.phone.dark .play-hint{background:rgba(46,42,58,.92)}
.phone.dark .play-say{color:#C9BFE6}
/* dans le décor */
.scene [data-spot-x].nope{animation:nope .5s}
@keyframes nope{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.scene .body.peek{animation:peek 1.4s ease-in-out}
@keyframes peek{0%,100%{transform:translateX(0)}35%,65%{transform:translateX(var(--peek,14px))}}
.scene .deer,.scene .cow,.scene .lamb,.scene .lamb2,.scene .owl{transform-box:fill-box;transform-origin:50% 100%}
.scene .hop{animation:hopsmall .6s var(--ease-spring)}
@keyframes hopsmall{0%,100%{transform:translateY(0)}40%{transform:translateY(-10px) scale(1.04,.96)}}
.scene .dog.running .body{animation:waddle .3s ease-in-out infinite alternate}
.scene .bfly{cursor:pointer;transition:opacity .4s}
.scene .bfly.caught .wings .w{animation-duration:.5s}
.scene .bfly.away .in{animation:bfaway .9s ease-in forwards}
@keyframes bfaway{to{opacity:0;transform:translate(var(--bx,40px),-180px) scale(.5)}}
.scene .birdy{cursor:pointer}
.scene .birdy .b{animation:perch 2.4s ease-in-out infinite;animation-delay:var(--d,0s);transform-box:fill-box;transform-origin:50% 100%}
@keyframes perch{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5px)}}
.scene .birdy.fly .b{animation:birdfly 1.4s ease-in forwards}
@keyframes birdfly{0%{transform:translate(0,0)}30%{transform:translate(calc(var(--fx,80px) * .2),-30px) rotate(-8deg)}100%{transform:translate(var(--fx,80px),-220px) scale(.5);opacity:0}}
.scene .ball .b{transform-box:fill-box;transform-origin:center}
.scene .bub{cursor:pointer}
.scene .bub.pop .in{animation:bubpop .38s ease-out forwards}
@keyframes bubpop{40%{transform:scale(1.25);opacity:1}100%{transform:scale(1.5);opacity:0}}
.scene .bub .in,.scene .bfly .in{transform-box:fill-box;transform-origin:center}
.scene .bfly.visit{opacity:1}

/* ---------- v5 : plus de couleur, tout répond au doigt ---------- */
.view .title{background:linear-gradient(120deg,var(--acc-d) 0%,var(--acc) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.08em}
.age .big{background:linear-gradient(120deg,var(--coral-d) 0%,var(--iris) 110%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em}
.age .big em{color:var(--iris-d);-webkit-text-fill-color:var(--iris-d)}
.phone.dark .view .title{background:linear-gradient(120deg,var(--acc-d) 0%,#fff 160%);-webkit-background-clip:text;background-clip:text}
.rows .ico.coral{background:var(--coral-xl);color:var(--coral-d)}.rows .ico.iris{background:var(--iris-xl);color:var(--iris-d)}.rows .ico.gold{background:var(--gold-xl);color:var(--gold-d)}.rows .ico.vine{background:var(--vine-xl);color:var(--vine-d)}.rows .ico.grape{background:#EFE3F0;color:#6E4B78}
.mini-tl .mi.k-memory .th,.mini-tl .mi.k-monthly .th{background:var(--coral-xl);color:var(--coral-d)}.mini-tl .mi.k-first .th,.mini-tl .mi.k-birth .th{background:var(--iris-xl);color:var(--iris-d)}.mini-tl .mi.k-measure .th,.mini-tl .mi.k-visit .th{background:var(--lagoon-xl);color:var(--lagoon-d)}.mini-tl .mi.k-log .th,.mini-tl .mi.k-vaccine .th,.mini-tl .mi.k-tooth .th{background:var(--gold-xl);color:var(--gold-d)}.mini-tl .mi.k-letter .th,.mini-tl .mi.k-answer .th{background:#EFE3F0;color:#6E4B78}
.phone.dark .mini-tl .mi.k-letter .th,.phone.dark .mini-tl .mi.k-answer .th,.phone.dark .rows .ico.grape{background:#3E3046;color:#D9B8E0}
.lrow .ring{background:conic-gradient(var(--iris) calc(var(--p) * 1%),var(--iris-xl) 0)}
.lrow .ring.full{background:conic-gradient(var(--vine) 100%,var(--vine) 0)}
.addgrid button{background:var(--bg,var(--paper2))}
.addgrid button:nth-child(1){--bg:#EFEAF8}.addgrid button:nth-child(2){--bg:#FBE9E0}.addgrid button:nth-child(3){--bg:#F3E4F1}.addgrid button:nth-child(4){--bg:#FBEFD2}.addgrid button:nth-child(5){--bg:#E1EEF0}.addgrid button:nth-child(6){--bg:#E5EFD9}.addgrid button:nth-child(7){--bg:#F7EBD2}
.phone.dark .addgrid button:nth-child(1){--bg:#3A3350}.phone.dark .addgrid button:nth-child(2){--bg:#4A3230}.phone.dark .addgrid button:nth-child(3){--bg:#4A2F3A}.phone.dark .addgrid button:nth-child(4){--bg:#463A26}.phone.dark .addgrid button:nth-child(5){--bg:#2A3D41}.phone.dark .addgrid button:nth-child(6){--bg:#2F3A2B}.phone.dark .addgrid button:nth-child(7){--bg:#463A26}
/* tout ce qui se touche répond */
.tk,.hc,.first,.pola,.lrow,.fam,.mi,.srow,.rows .row,.memory,.letter,.month-cta,.tool,.filmbtn,.empty-card,.share-card,.addgrid button,.chip,.tl-item button,.rbtn,.sp,.dose,.wake,.reminder{transition:transform .28s var(--ease-spring),box-shadow .28s,background .3s,color .3s}
.tk:active,.hc:active,.first:active,.pola:active,.lrow:active,.fam:active,.mi:active,.srow:active,.rows .row:active,.memory:active,.letter:active,.month-cta:active,.tool:active,.filmbtn:active,.empty-card:active,.share-card:active,.chip:active,.tl-item button:active,.reminder:active{transform:scale(.965)}
.btn:active,.link:active{transform:scale(.94)}
/* halo doux du bouton +, rebond de l'onglet actif, pop des cartes de section */
.fab{overflow:visible}.fab::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid rgba(124,107,181,.35);animation:playring 3.2s ease-out infinite;animation-delay:1.2s;pointer-events:none}
.nav button.active{animation:navpop .5s var(--ease-spring)}
@keyframes navpop{0%{transform:scale(.92)}55%{transform:scale(1.05)}100%{transform:scale(1)}}
.subtabs.hub .hc.active{animation:navpop .5s var(--ease-spring)}
.empty-card .ico{animation:floaty 3.2s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-5px) rotate(2deg)}}
.toast.show{animation:toastin .55s var(--ease-spring)}
@keyframes toastin{0%{transform:translate(-50%,14px) scale(.9)}100%{transform:translate(-50%,0) scale(1)}}
.tk b,.stat b,.age .big{font-variant-numeric:tabular-nums}
.sheet.show .sheet-head .ico{animation:navpop .55s var(--ease-spring)}
.first .ico,.hc .ico,.addgrid .ico,.tk .ico{transition:transform .3s var(--ease-spring)}
.first:active .ico,.hc:active .ico,.addgrid button:active .ico,.tk:active .ico{transform:scale(1.12) rotate(-6deg)}
.rbtn:active{transform:scale(.9)}
.switch{transition:background .3s}.switch::after{transition:transform .35s var(--ease-spring)}
.phone.play .play-clue{position:absolute;left:50%;bottom:calc(22px + var(--sa-b));z-index:6;display:inline-flex;align-items:center;gap:7px;height:44px;padding:0 18px 0 14px;border-radius:22px;background:linear-gradient(135deg,#F0C77A,#D9A45C);color:#4A3418;font-weight:800;font-size:14px;box-shadow:0 10px 24px rgba(201,154,78,.35);opacity:0;transform:translate(-50%,20px) scale(.9);transition:opacity .25s,transform .4s var(--ease-spring);pointer-events:none}
.play-clue svg{width:18px;height:18px}
.phone.play .play-clue.on{opacity:1;transform:translate(-50%,0) scale(1);pointer-events:auto}
.play-clue:active{transform:translate(-50%,0) scale(.94)!important}
.scene .gsh{transition:opacity 1.5s}.phone.night .scene .gsh{opacity:.05}
.phone.dark .play-clue{color:#4A3418}
.play-lock:active{transform:scale(.93)}.play-lock i{display:none}
#today:empty{display:none}

/* ---------- v5.1 : météo ---------- */
.wx-chip{cursor:pointer;transition:transform .25s var(--ease-spring)}.wx-chip:active{transform:scale(.94)}
.wx-hero{display:flex;align-items:center;gap:18px;padding:22px 20px;border-radius:24px;color:#fff;margin:6px 0 14px;background:linear-gradient(135deg,#F0B98A,#D97757);box-shadow:0 12px 30px rgba(43,42,34,.14);position:relative;overflow:hidden}
.wx-hero::after{content:"";position:absolute;right:-40px;top:-50px;width:170px;height:170px;border-radius:50%;background:rgba(255,255,255,.14)}
.wx-hero .big{width:78px;height:78px;border-radius:50%;background:rgba(255,255,255,.2);display:grid;place-items:center;flex:none}
.wx-hero .big svg{width:44px;height:44px}
.wx-hero .t{display:flex;flex-direction:column;position:relative}
.wx-hero .t b{font-family:var(--font-display);font-size:58px;font-weight:500;line-height:1;letter-spacing:-.02em}
.wx-hero .t span{font-size:17px;font-weight:700;margin-top:4px}.wx-hero .t small{font-size:12.5px;opacity:.85;margin-top:3px}
.wx-hero.k-suncloud{background:linear-gradient(135deg,#F2C97E,#8FB4BC)}.wx-hero.k-cloud{background:linear-gradient(135deg,#A9B7C4,#6F8A9A)}.wx-hero.k-fog{background:linear-gradient(135deg,#C9C4D4,#8E8AA3)}
.wx-hero.k-rain{background:linear-gradient(135deg,#7BA3AB,#3F6E77)}.wx-hero.k-snow{background:linear-gradient(135deg,#DDE6EC,#9FB8C9);color:#2B3A48}.wx-hero.k-storm{background:linear-gradient(135deg,#6F63A6,#3A3350)}.wx-hero.k-night{background:linear-gradient(135deg,#5E4E97,#2E2A3A)}
.wx-pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.wx-pills span{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:14px;background:var(--paper2);font-weight:700;font-size:13px;color:var(--ink-soft)}
.wx-pills svg{width:16px;height:16px;color:var(--lagoon-d)}
.wx-hours{display:flex;gap:8px;overflow-x:auto;margin:0 -22px 16px;padding:4px 22px 8px;scrollbar-width:none}
.wx-hours::-webkit-scrollbar{display:none}
.wx-hours .wh{flex:none;width:62px;display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 4px;border-radius:16px;background:var(--paper2)}
.wx-hours .wh.now{background:var(--lagoon-xl)}
.wx-hours .wh small{font-size:10.5px;font-weight:800;color:var(--ink-mute);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.wx-hours .wh svg{width:22px;height:22px;color:var(--lagoon-d)}.wx-hours .wh b{font-size:15px}.wx-hours .wh i{font-style:normal;font-size:10.5px;color:var(--lagoon-d);font-weight:700;min-height:12px}
.wx-days{display:flex;flex-direction:column}
.wx-days .wd{display:grid;grid-template-columns:86px 24px 34px 1fr 34px 40px;align-items:center;gap:8px;padding:11px 0;border-top:1px solid var(--line)}
.wx-days .wd b{font-size:14px}.wx-days .wd svg{width:20px;height:20px;color:var(--lagoon-d)}
.wx-days .wd .mn{font-size:13px;color:var(--ink-mute);text-align:right}.wx-days .wd .mx{font-size:14px;font-weight:700}
.wx-days .wd .bar{position:relative;height:6px;border-radius:3px;background:var(--sand)}
.wx-days .wd .bar i{position:absolute;top:0;bottom:0;border-radius:3px;background:linear-gradient(90deg,var(--lagoon),var(--coral))}
.wx-days .wd small{font-size:11px;color:var(--lagoon-d);font-weight:700;text-align:right}
.phone.play.leaving .play-menu,.phone.play.leaving .play-lock,.phone.play.leaving .play-back,.phone.play.leaving .play-zoom,.phone.play.leaving .play-clue,.phone.play.leaving .play-say,.phone.play.leaving .play-hint{opacity:0!important;pointer-events:none!important;transition:opacity .2s}
.phone.play.leaving .nav,.phone.play.leaving .fab{opacity:1;transform:none}

/* ---------- v5.3 : lettres — papier, écriture, cachet, scellé ---------- */
.stationery .lbody,.letter-body{font-family:"Caveat",var(--font-display),cursive;font-size:24px;line-height:34px}
.stationery .lbody{min-height:190px;height:auto;max-height:none;overflow:visible}
.stationery .lo{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 14px}
.stationery .lo label{display:flex;flex-direction:column;gap:4px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;color:var(--ink-mute)}
.stationery .lo input{height:40px;border-radius:12px;border:2px solid var(--sand2);background:var(--paper2);padding:0 10px;font-size:14px;min-width:0}
.stationery .lo .lpw input{width:132px}
.stationery .lo .btn{margin-left:auto}
.letters .letter.sealed .ico,.letters .letter.locked .ico{background:var(--gold-xl);color:var(--gold-d)}
.read-sheet .e-face{position:relative}
.e-paper .e-face{padding:22px 22px 26px;background:radial-gradient(120% 80% at 0% 0%,rgba(255,255,255,.7),transparent 60%),repeating-linear-gradient(to bottom,transparent 0,transparent 33px,rgba(43,42,34,.09) 33px,rgba(43,42,34,.09) 34px);background-position:0 60px}
.p-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px dashed var(--sand2)}
.p-head .kicker{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--coral-d);margin:0 0 4px}
.p-head h2{font-size:22px;font-weight:600;line-height:1.15;margin:0}
.p-head .meta{font-size:12.5px;color:var(--ink-mute);margin:4px 0 0}
.wax{flex:none;width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#F2A88F,#C4483F 55%,#8F2C28);box-shadow:inset 0 0 0 4px rgba(255,255,255,.18),0 4px 10px rgba(43,42,34,.25);color:#FFE9E0;font-family:var(--font-display);font-size:20px;font-weight:600;display:grid;place-items:center;transform:rotate(-8deg)}
.letter-body{background:none;padding:0;margin:0 0 10px;color:#2E2A3A}
.read-sheet .sign{font-family:"Caveat",cursive;font-size:30px;color:var(--iris-d);text-align:right;margin:8px 0 0;transform:rotate(-2deg)}
.read-sheet .sign:empty{display:none}
.read-sealed{text-align:center;padding:10px 0 4px;font-family:var(--font-display);font-style:italic;font-size:18px;color:var(--ink-soft)}
.read-lock{margin:6px 0 10px;padding:14px 16px;border-radius:18px;background:var(--gold-xl)}
.read-lock label{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--gold-d);margin-bottom:8px}
.read-lock .row2{display:flex;gap:8px}.read-lock input{flex:1;height:44px;border-radius:12px;border:2px solid var(--sand2);background:var(--paper);padding:0 12px;font-size:16px;min-width:0}
.read-lock .quiet{margin:8px 0 0;color:var(--coral-d)}.read-lock .quiet:empty{display:none}
.env-stage.sealed .e-seal{background:radial-gradient(circle at 35% 30%,#F0C77A,#C99A4E 55%,#8A6A1E);box-shadow:inset 0 0 0 4px rgba(255,255,255,.2),0 4px 10px rgba(43,42,34,.25)}
.phone.dark .letter-body{color:var(--ink)}.phone.dark .e-paper .e-face{background:repeating-linear-gradient(to bottom,transparent 0,transparent 33px,rgba(255,255,255,.08) 33px,rgba(255,255,255,.08) 34px);background-position:0 60px}

/* ---------- v5.3 : qui est relié ---------- */
.who-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:6px 0 16px}
.who-grid button{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 8px;border-radius:20px;background:var(--coral-xl);color:var(--coral-d);font-family:var(--font-display);font-size:22px;font-weight:600;transition:transform .25s var(--ease-spring),background .3s}
.who-grid button svg{width:24px;height:24px}.who-grid button:active{transform:scale(.95)}.who-grid button.on{background:var(--coral);color:#fff}
.members{margin:4px 0 16px}.members .lbl{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--ink-mute);margin:0 0 8px}
.member{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:16px;background:var(--paper2);margin-bottom:8px}
.member .ava{width:40px;height:40px;border-radius:50%;background:var(--iris-xl);color:var(--iris-d);display:grid;place-items:center;font-family:var(--font-display);font-size:20px;font-weight:600;flex:none}
.member.me .ava{background:var(--coral-xl);color:var(--coral-d)}
.member .txt{flex:1;min-width:0}.member .txt b{display:block;font-size:15px}.member .txt small{display:block;color:var(--ink-mute);font-size:12px}
.member .link{font-size:13px}

/* ---------- v5.3 : Ensemble (Maman & Papa) ---------- */
.together{margin:0 0 26px;padding:16px 16px 14px;border-radius:24px;background:linear-gradient(135deg,#EFEAF8 0%,#FBE9E0 100%);box-shadow:0 10px 26px rgba(124,107,181,.12)}
.phone.dark .together{background:linear-gradient(135deg,#3A3350,#4A3230)}
.tg-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.tg-head .lbl{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--iris-d);margin:0 0 2px}
.tg-head h2{font-size:22px;margin:0}
.tg-head .btn svg{width:16px;height:16px}
.sent-list{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.sent{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:10px;border-radius:18px;background:var(--paper);box-shadow:var(--shadow-s);position:relative;transition:transform .25s var(--ease-spring)}
.sent:active{transform:scale(.97)}
.sent.new{background:linear-gradient(135deg,#F0C77A22,#D9775722),var(--paper);box-shadow:0 0 0 2px var(--coral),var(--shadow-s)}
.sent .th{width:58px;height:58px;border-radius:14px;overflow:hidden;background:var(--sand);flex:none;display:grid;place-items:center;color:var(--gold-d)}
.sent .th img{width:100%;height:100%;object-fit:cover}.sent .th svg{width:24px;height:24px}
.sent .txt{flex:1;min-width:0}.sent .txt small{display:block;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--coral-d)}
.sent .txt b{display:block;font-size:15px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sent .txt .note{display:block;font-size:13px;color:var(--ink-soft);margin-top:2px}
.sent .dot{position:absolute;right:12px;top:12px;width:10px;height:10px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 3px var(--paper);animation:playring 2s ease-out infinite}
.sent.mine{opacity:.85}
.todos{display:flex;flex-direction:column;gap:6px}
.tdi{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:14px;background:rgba(255,255,255,.55)}
.phone.dark .tdi{background:rgba(255,255,255,.06)}
.tdi .box{width:26px;height:26px;border-radius:9px;border:2px solid var(--iris);background:var(--paper);display:grid;place-items:center;color:#fff;flex:none;transition:background .2s,transform .25s var(--ease-spring)}
.tdi .box svg{width:14px;height:14px;opacity:0;transition:opacity .2s}
.tdi.done .box{background:var(--vine);border-color:var(--vine)}.tdi.done .box svg{opacity:1}
.tdi .t{flex:1;font-size:15px;overflow-wrap:anywhere}.tdi.done .t{text-decoration:line-through;color:var(--ink-mute)}
.tdi small{font-size:11px;color:var(--ink-mute);font-weight:700}
.tdi.held{background:var(--coral-xl)}
.todo-add{display:flex;gap:8px;margin-top:4px}
.todo-add input{flex:1;height:42px;border-radius:14px;border:2px solid transparent;background:rgba(255,255,255,.7);padding:0 12px;font-size:15px;min-width:0}
.phone.dark .todo-add input{background:rgba(255,255,255,.08);color:var(--ink)}
.todo-add input:focus{border-color:var(--iris);outline:none}
.todo-add .btn{width:42px;height:42px;padding:0;border-radius:14px}.todo-add .btn svg{width:18px;height:18px}
.tg-cta{display:flex;align-items:center;gap:12px;width:100%;text-align:left;margin-top:12px;padding:12px;border-radius:16px;background:rgba(255,255,255,.55);color:var(--ink)}
.tg-cta svg{width:22px;height:22px;color:var(--iris-d);flex:none}.tg-cta b{display:block;font-size:14px}.tg-cta small{display:block;font-size:12px;color:var(--ink-soft)}
.doc-view .kicker{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--coral-d);margin:0 0 4px}
.doc-view h2{font-size:24px;margin:0 0 4px}.doc-view .meta{color:var(--ink-soft);margin:0 0 12px}
.doc-img{border-radius:18px;overflow:hidden;background:var(--sand);margin-bottom:14px}.doc-img:empty{display:none}.doc-img img{width:100%;display:block}

/* ---------- v5.4 ---------- */
.wx-hours .wh.now{width:auto;min-width:64px;padding-left:10px;padding-right:10px}
.wx-hours .wh small{letter-spacing:.02em}
.together{margin:22px 0 30px}
#stats-line{margin:0 0 6px}
.reminders:not(:empty){margin-bottom:18px}
.block{margin-bottom:34px}
.age{margin-bottom:6px}
.phone.play.leaving .scene-wrap{z-index:0}

/* ---------- v5.5 : profondeur du décor (perspective atmosphérique) ---------- */
.scene .airhaze{transform:translateX(calc(var(--tx) * -.5px))}
.scene .treeline{transform:translateX(calc(var(--tx) * -.7px))}
.scene .fields{transform:translateX(calc(var(--tx) * -1.1px))}
.scene .hedge,.scene .furrows{transform:translateX(calc(var(--tx) * -1.8px))}
.scene .foregrass{transform:translateX(calc(var(--tx) * -3.4px))}
/* les saisons emportent aussi les nouvelles couches */
.phone.autumn .scene .fields path{fill:#CDBB84}
.phone.autumn .scene .treeline{fill:#C6A98F}
.phone.autumn .scene .hedge,.phone.autumn .scene .hedge3{fill:#A8894F}
.phone.winter .scene .fields path{fill:#DCD8CB;opacity:.42}
.phone.winter .scene .treeline{fill:#C7C3D2}
.phone.winter .scene .hedge,.phone.winter .scene .hedge3,.phone.winter .scene .hedge2{fill:#A8A69A}
.phone.winter .scene .furrows{opacity:.07}
.phone.winter .scene .foregrass{fill:#9AA391}
.phone.summer .scene .fields path{fill:#B2C482}
.phone.summer .scene .foregrass{fill:#4F7038}
/* la nuit, tout le lointain se fond */
.phone.night .scene .treeline{opacity:.32}
.phone.night .scene .fields{opacity:.5}
.phone.night .scene .furrows{opacity:.08}

/* ---------- v5.5 : la lettre s'ouvre pour de vrai ---------- */
/* le cachet de cire se fend en deux, avec des miettes */
.e-seal{--wax:radial-gradient(circle at 35% 30%,#F2A88F,#C4483F 55%,#8F2C28)}
.env-stage.sealed .e-seal{--wax:radial-gradient(circle at 35% 30%,#F0C77A,#C99A4E 55%,#8A6A1E)}
.e-seal .sico{position:relative;z-index:2;display:grid;place-items:center;transition:opacity .2s}
.e-seal .sico svg{width:16px;height:16px}
.e-seal .half{position:absolute;inset:0;border-radius:50%;background:var(--wax);box-shadow:inset 0 0 0 4px rgba(255,255,255,.18);opacity:1;z-index:1;transition:transform .72s cubic-bezier(.3,.95,.35,1),opacity .45s ease}
.e-seal .half.l{clip-path:polygon(0 0,53% 0,46% 22%,55% 45%,44% 68%,52% 100%,0 100%)}
.e-seal .half.r{clip-path:polygon(53% 0,100% 0,100% 100%,52% 100%,44% 68%,55% 45%,46% 22%)}
.e-seal .crumb{position:absolute;left:50%;top:50%;width:3px;height:3px;border-radius:50%;background:#8F2C28;opacity:0;z-index:1;transition:transform .6s var(--ease-out),opacity .55s}
.env-stage.sealed .e-seal .crumb{background:#8A6A1E}
/* la cire cède : le disque plein disparaît, les deux moitiés partent chacune de leur côté */
.env-stage.cracking .e-seal,.env-stage.opening .e-seal,.env-stage.out .e-seal,.env-stage.read .e-seal{transform:none;opacity:1;background:none;box-shadow:none}
.env-stage.cracking .e-seal .sico,.env-stage.opening .e-seal .sico,.env-stage.out .e-seal .sico,.env-stage.read .e-seal .sico{opacity:0}
.env-stage.cracking .e-seal .crumb{opacity:1}
.env-stage.cracking .e-seal .half.l{transform:translate(-15px,9px) rotate(-26deg)}
.env-stage.cracking .e-seal .half.r{transform:translate(15px,8px) rotate(23deg)}
.env-stage.cracking .e-seal .crumb.c1{transform:translate(-17px,16px)}
.env-stage.cracking .e-seal .crumb.c2{transform:translate(10px,19px)}
.env-stage.cracking .e-seal .crumb.c3{transform:translate(-4px,22px)}
.env-stage.opening .e-seal .half,.env-stage.out .e-seal .half,.env-stage.read .e-seal .half,
.env-stage.opening .e-seal .crumb,.env-stage.out .e-seal .crumb,.env-stage.read .e-seal .crumb{opacity:0}
/* l'enveloppe tressaille au moment où la cire cède */
@keyframes envShake{0%,100%{transform:none}22%{transform:translateX(-2.5px) rotate(-.5deg)}55%{transform:translateX(2px) rotate(.4deg)}80%{transform:translateX(-1px)}}
.env-stage.cracking .env3d{animation:envShake .36s ease-out}
/* le rabat s'ouvre avec du poids : il résiste, puis retombe */
.e-flap{transition:transform .82s cubic-bezier(.34,1.1,.4,1),opacity .35s;box-shadow:0 2px 6px rgba(43,42,34,.08)}
.env-stage.opening .e-flap,.env-stage.out .e-flap,.env-stage.read .e-flap{transform:rotateX(-176deg)}
/* le papier sort en frottant, légèrement de biais */
.e-paper{transition:transform .95s cubic-bezier(.24,.72,.28,1),box-shadow .5s}
.env-stage.out:not(.read) .e-paper{transform:translateY(-96%) rotate(-1.2deg) scale(1.08)}
/* pliures : la lettre était pliée en trois */
.e-paper .crease{position:absolute;left:0;right:0;height:18px;z-index:4;pointer-events:none;opacity:0;transition:opacity .7s ease .35s;background:linear-gradient(180deg,rgba(43,42,34,.10),rgba(43,42,34,0) 55%,rgba(255,255,255,.55))}
.env-stage.out .e-paper .crease,.env-stage.read .e-paper .crease{opacity:1;transition:opacity 1.1s ease .5s}
.env-stage.read .e-paper .crease{opacity:0}
.e-paper .crease.c1{top:33%}.e-paper .crease.c2{top:66%}
@keyframes unfoldPaper{0%{transform:perspective(760px) rotateX(-64deg);transform-origin:50% 0;opacity:.4}55%{opacity:1}100%{transform:perspective(760px) rotateX(0);transform-origin:50% 0;opacity:1}}
.env-stage.read .e-paper .e-face{animation:unfoldPaper .78s var(--ease-out) both}
/* l'ombre portée grandit quand la lettre se pose */
.env-stage.read .e-paper{box-shadow:0 22px 46px rgba(43,42,34,.18),0 2px 0 rgba(43,42,34,.05)}

/* ---------- v5.5 : le monde reste fluide quand on le déplace ---------- */
/* pendant qu'on glisse ou qu'on pince, le décor cesse de s'animer : toute la machine sert au déplacement */
.phone.play.moving .scene .leaf,.phone.play.moving .scene .cloud,.phone.play.moving .scene .fireflies,
.phone.play.moving .scene .smoke,.phone.play.moving .scene .vines,.phone.play.moving .scene .birds,
.phone.play.moving .scene .butterfly,.phone.play.moving .scene .roses{animation-play-state:paused}
.phone.play.moving .scene .foregrass{display:none}
.phone.play .scene{will-change:transform;backface-visibility:hidden}
.phone.play .scene .gsh{transition:none}
/* le premier plan flou coûte cher : on ne le calcule qu'une fois, et jamais pendant un geste */
.scene .foregrass{will-change:auto}

/* ---------- v5.5 : le petit compteur du jeu en cours ---------- */
.play-score{position:absolute;left:14px;top:calc(60px + var(--sa-t));z-index:9;display:none;align-items:center;gap:6px;height:34px;padding:0 13px 0 10px;border-radius:17px;background:rgba(255,253,247,.9);backdrop-filter:blur(8px);box-shadow:0 4px 14px rgba(43,42,34,.14);color:var(--ink);font-weight:800;font-size:14px;animation:scoreIn .4s var(--ease-spring)}
.phone.play .play-score.on{display:flex}
.play-score svg{width:15px;height:15px;color:var(--gold-d,#8A6A1E)}
.play-score b{min-width:12px;text-align:center;font-variant-numeric:tabular-nums}
.play-score.bump{animation:scoreBump .42s var(--ease-spring)}
@keyframes scoreIn{from{opacity:0;transform:translateY(-8px) scale(.9)}to{opacity:1;transform:none}}
@keyframes scoreBump{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}

/* ---------- v5.5 : la courbe se lit au doigt ---------- */
#chart{touch-action:pan-y;cursor:pointer;-webkit-tap-highlight-color:transparent}
#chart .guide{stroke:var(--coral);stroke-width:1;stroke-dasharray:3 4;opacity:.5}
#chart .halo{fill:var(--coral);opacity:.14}
#chart .dot{transition:r .18s var(--ease-out),opacity .2s}
#chart .hit circle{cursor:pointer}
/* les onglets de la santé : on sent qu'il y en a d'autres à droite */
.subtabs.hub{scroll-snap-type:x proximity;scroll-padding-left:22px}
.subtabs.hub > button{scroll-snap-align:start}
#chart .dot.sel{stroke:#FFFDF7;stroke-width:2.2}

/* ---------- v5.5 : la frise, plus propre ---------- */
.scrub{gap:5px;margin:0 -22px 14px}
.scrub button{min-width:auto;flex-direction:row;align-items:baseline;gap:5px;padding:7px 12px;border-radius:13px;background:transparent;box-shadow:inset 0 0 0 1px var(--line)}
.scrub button b{font-size:14px;font-weight:600;color:var(--ink-soft);text-transform:capitalize}
.scrub button i{font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.06em;color:var(--ink-mute)}
.scrub button.on{background:var(--iris);box-shadow:none}
.scrub button.on b,.scrub button.on i{color:#fff}
.scrub button{transition:background .3s,box-shadow .3s}
/* le mois reste visible en haut pendant qu'on lit */
.tl-month{position:relative}
.timeline .month{position:sticky;top:calc(8px + var(--sa-t));z-index:3;margin:14px 0 12px 40px;background:rgba(247,242,232,.94);backdrop-filter:blur(8px);box-shadow:0 2px 10px rgba(43,42,34,.07)}
.phone.dark .timeline .month{background:rgba(38,34,50,.92)}
.tl-item{padding-bottom:20px}
.tl-item .tl-card{width:100%;text-align:left}
.tl-item h3{margin:2px 0 0}
.frise-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}

/* ---------- v5.5 : l'espace commun des parents ---------- */
.tg-state{margin:3px 0 0;font-size:11.5px;font-weight:700;color:var(--ink-mute);display:flex;align-items:center;gap:6px}
.tg-state::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.tg-state.ok{color:#5B7F4A}
.tg-state.wait{color:var(--ink-mute)}
.tg-state.off{color:#8A6A1E}
.tg-state.err{color:var(--coral-d)}
.tdi{position:relative}
.tdi .ring{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--ink-mute);opacity:.55;transition:opacity .25s,transform .25s,color .25s}
.tdi .ring svg{width:15px;height:15px}
.tdi .ring:active{transform:scale(.88);color:var(--iris);opacity:1}
.tdi:hover .ring{opacity:.9}
.tdi.done .t{text-decoration:line-through;text-decoration-thickness:1.5px;text-decoration-color:var(--line);opacity:.55}

/* ---------- v5.5 : les petits secrets ---------- */
/* la coccinelle : elle marche, et s'envole si on la touche */
.ladybug{cursor:pointer}
.ladybug .lb{transition:transform .5s var(--ease-out),opacity .9s ease .4s}
.ladybug.fly .lb{transform:translate(14px,-46px) rotate(18deg);opacity:0}
@keyframes lbStep{0%,100%{transform:translateY(0)}50%{transform:translateY(-.5px)}}
.ladybug .lb{animation:lbStep .38s ease-in-out infinite}
/* la fumée en forme de cœur */
@keyframes heartUp{0%{transform:translate(78px,64px) scale(.2);opacity:0}18%{opacity:.9}100%{transform:translate(66px,4px) scale(1.5);opacity:0}}
.heart-smoke{animation:heartUp 4s ease-out forwards;pointer-events:none}
/* trois touches sur le soleil : la lumière se réchauffe un instant */
@keyframes sunWarm{0%{opacity:0}25%{opacity:1}100%{opacity:0}}
.phone.sunburst .scene-wrap .warm{animation:sunWarm 2.6s ease-in-out}
@keyframes sunSpin{0%{transform:rotate(0) scale(1)}50%{transform:rotate(24deg) scale(1.18)}100%{transform:rotate(48deg) scale(1)}}
.phone.sunburst .scene #sun .ray{animation:sunSpin 2.6s ease-in-out;transform-origin:center}
.phone.sunburst .scene #sun .halo{animation:sunSpin 2.6s ease-in-out reverse;transform-origin:center}
/* le titre qu'on touche deux fois : les lettres frissonnent l'une après l'autre */
@keyframes letterWave{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-9px) rotate(-4deg)}60%{transform:translateY(2px) rotate(2deg)}}
.age .big.wave span{display:inline-block;animation:letterWave .8s var(--ease-out);animation-delay:calc(var(--i) * .055s)}
/* on secoue le téléphone : tout le feuillage tourbillonne */
@keyframes swirlLeaf{0%{transform:translate(0,0) rotate(0)}50%{transform:translate(14px,-10px) rotate(180deg)}100%{transform:translate(0,0) rotate(360deg)}}
.phone.swirl .scene .leaf,.phone.swirl .petal{animation:swirlLeaf 2.4s ease-in-out}
/* le petit point « nouveau » ne mord plus sur la ligne « envoyé par… » */
.sent.new .txt small{padding-right:20px}
.sent .txt small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* l'état de la synchro prend toute la largeur, sous le titre */
.tg-head{align-items:flex-start}
.tg-head > div{flex:1;min-width:0}
.tg-state{margin-top:5px;line-height:1.35}


/* ---------- v5.6 : rien ne s'anime quand on ne le voit pas ---------- */
/* le décor (feuilles, nuages, fumée, lucioles…) se met en pause dès qu'il est hors de vue :
   autre page, ou accueil défilé au-delà de la maison. 200 animations de moins à calculer. */
.phone:not([data-view="home"]) .scene *,.phone.hero-off .scene *{animation-play-state:paused!important}
/* cibles tactiles : rien de plus petit que 38 px */
.tdi .box{width:30px;height:30px;position:relative}
.tdi .box::before{content:"";position:absolute;inset:-8px}
.stationery .lf input{height:40px}
#gtoggle button,.filters button,.scrub button{height:38px}
.scrub button{padding:7px 13px}
.filters button{border-radius:19px}
.doc-view + .actions .danger,#doc-delete{min-height:40px;padding:8px 14px}
.scene .tap .hit{r:18px}
/* en plein jour, les étoiles et les lucioles sont invisibles : elles ne clignotent qu'à partir du crépuscule */
.phone:not(.night):not(.dusk) .scene .stars circle{animation-play-state:paused}
.phone:not(.night) .scene .fireflies circle,.phone.rain .scene .fireflies circle,.phone.snow .scene .fireflies circle{animation-play-state:paused}
.phone.dark .tg-cta{background:rgba(255,255,255,.07)}