/* Ma boîte à rêves · le programme. Nuit douce, chaque jour est une note sortie de la boîte.
   Grille 8 px (4 px micro). Graisses 400 / 500 / 600. 1rem = 18px (17px sous 768px). Durées 100–300 ms. */
:root{
  --night:#17121F; --night-2:#251C34; --night-3:#2E2340;
  --paper:#F5ECDA; --paper-2:#EADCC0; --ink:#2B2236; --ink-soft:#5E4E68;
  --glow:#A8F0DA; --glow-hover:#C4F6E6; --moon:#EEE7F6; --mist:#B3A8C6; --plum:#5A2D6B;
  --danger:#F2A3A3; --danger-ink:#3A0E14;
  --line:rgba(238,231,246,.12); --line-paper:rgba(43,34,54,.14);
  --display:"Bricolage Grotesque","Arial Narrow",Arial,sans-serif;
  --body:"Newsreader",Georgia,"Times New Roman",serif;
  --hand:"Nanum Pen Script","Segoe Print",cursive;
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--night);font-size:112.5%}
@media (max-width:767.98px){html{font-size:106.25%}}
html,body{margin:0}
body{background:radial-gradient(120% 60% at 50% 0%,var(--night-2),var(--night) 70%) fixed;color:var(--moon);font-family:var(--body);font-size:1rem;line-height:1.6;padding:env(safe-area-inset-top,0) 16px calc(96px + env(safe-area-inset-bottom,0));-webkit-font-smoothing:antialiased}
.wrap{max-width:720px;margin:0 auto}
header.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:16px 8px}
.brand{display:flex;align-items:center;gap:12px;min-height:44px;font-family:var(--display);font-weight:600;font-size:1.0625rem;letter-spacing:-.01em;color:var(--moon);text-decoration:none;white-space:nowrap}
.lamp{width:32px;height:32px;flex:none}
.meter{font-family:var(--display);font-weight:500;font-size:.75rem;line-height:1.4;color:var(--mist);text-align:right;font-variant-numeric:tabular-nums}
.bar{height:4px;background:rgba(238,231,246,.12);border-radius:2px;overflow:hidden;margin-block:4px 24px}
.bar i{display:block;height:100%;width:100%;background:var(--glow);transform:scaleX(0);transform-origin:0 50%;transition:transform .3s var(--ease)}
nav.tabs{position:fixed;left:0;right:0;bottom:0;background:rgba(23,18,31,.97);border-top:1px solid var(--line);display:flex;justify-content:center;padding:8px 8px calc(8px + env(safe-area-inset-bottom,0));z-index:5}
nav.tabs .in{display:flex;gap:4px;max-width:720px;width:100%}
nav.tabs button{flex:1;min-height:44px;background:none;border:0;border-radius:999px;padding:8px 4px;font-family:var(--display);font-weight:500;font-size:.875rem;color:var(--mist);cursor:pointer;transition:background-color .15s,color .15s}
@media (hover:hover){nav.tabs button:hover{color:var(--moon)}}
nav.tabs button[aria-current="true"]{background:rgba(168,240,218,.14);color:var(--glow)}
button,input,textarea,select{font:inherit}
b,strong{font-weight:600}
:focus-visible{outline:3px solid var(--glow);outline-offset:3px;border-radius:8px}
.read :focus-visible,.woop :focus-visible{outline-color:var(--plum)}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.1;letter-spacing:-.02em;text-wrap:balance;margin:0}
h1{font-size:clamp(2rem,6vw,2.75rem);font-variation-settings:"wdth" 82}
h2{font-size:1.5rem}
h3{font-size:1.25rem;line-height:1.25}
.eyebrow{font-family:var(--display);font-weight:500;font-size:.875rem;color:var(--mist)}
.card{background:var(--night-2);border:1px solid var(--line);border-radius:16px;padding:24px}
.stack{display:flex;flex-direction:column;gap:16px}
.read{background:var(--paper);color:var(--ink);border:1px solid var(--line-paper);border-radius:4px;padding:24px;box-shadow:0 24px 40px -28px rgba(0,0,0,.8)}
.read p{margin:0 0 .8em}
.read p:last-child{margin:0}
.action{border-radius:16px;padding:16px 20px;border:2px solid var(--glow);background:rgba(168,240,218,.06)}
.action strong{font-family:var(--display);font-weight:600;font-size:1rem;color:var(--glow);display:block;margin-bottom:4px}
.science{font-size:.875rem;color:var(--mist);border-top:1px dashed rgba(238,231,246,.2);padding-top:16px}
.science b{font-family:var(--display);font-weight:600;color:var(--moon)}
label,.lbl-block{display:block;font-family:var(--display);font-weight:600;font-size:1rem;line-height:1.25;margin-bottom:8px;color:var(--moon)}
.hint{font-size:.875rem;color:var(--mist);margin:-4px 0 8px}
.err{margin-top:8px;font-size:.875rem;color:var(--danger)}
textarea,input[type=text],select{width:100%;min-height:48px;background:var(--paper);color:var(--ink);border:1px solid var(--line-paper);border-radius:8px;padding:12px 16px;font-family:var(--body);font-size:1rem}
textarea{min-height:112px;resize:vertical}
input[type=file]{min-height:44px;padding:8px 0;color:var(--mist);font-size:.875rem}
[aria-invalid="true"]{border-color:var(--danger);box-shadow:0 0 0 1px var(--danger)}
textarea::placeholder,input::placeholder{color:#7D6D84;font-style:italic}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.grow{flex:1 1 240px;min-width:0}
.btn{--bg:var(--glow);--bg-h:var(--glow-hover);--fg:var(--ink);display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border:0;border-radius:999px;padding:12px 24px;font-family:var(--display);font-weight:600;font-size:1rem;line-height:1.2;cursor:pointer;background:var(--bg);color:var(--fg);text-decoration:none;transition:transform .2s var(--ease),background-color .15s}
@media (hover:hover){.btn:hover{transform:translateY(-2px);background:var(--bg-h)}}
.btn:active{transform:scale(.98)}
.btn.ghost{--bg:transparent;--bg-h:rgba(238,231,246,.08);--fg:var(--moon);box-shadow:inset 0 0 0 1px rgba(238,231,246,.35)}
.btn.done{--bg:var(--paper);--bg-h:#FFF6E6;--fg:var(--plum)}
.btn.danger{--bg:var(--danger);--bg-h:#F7BDBD;--fg:var(--danger-ink)}
.pill{font-family:var(--display);font-weight:500;font-size:.75rem;padding:4px 8px;border-radius:99px;background:rgba(238,231,246,.1);color:var(--mist);white-space:nowrap}
.pill.ok{background:rgba(168,240,218,.16);color:var(--glow)}
.pill.now{background:var(--glow);color:var(--ink)}
.weeks{display:flex;flex-direction:column;gap:24px}
/* Liste des jours : une surface L1 avec séparateurs fins */
.daylist{list-style:none;margin:12px 0 0;padding:0;background:var(--night-2);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.daylist li+li{border-top:1px solid var(--line)}
.daylist button{width:100%;min-height:56px;display:grid;grid-template-columns:40px minmax(0,1fr) auto 16px;gap:12px;align-items:center;text-align:left;background:transparent;border:0;padding:8px 16px;cursor:pointer;color:var(--moon);transition:background-color .15s}
@media (hover:hover){.daylist button:hover:not([disabled]){background:var(--night-3)}}
.daylist .n{font-family:var(--display);font-weight:600;font-size:.875rem;color:var(--mist);font-variant-numeric:tabular-nums}
.daylist .t{min-width:0}
.daylist .chev{width:8px;height:8px;border-right:2px solid var(--mist);border-top:2px solid var(--mist);transform:rotate(45deg);justify-self:center}
.daylist button[disabled]{cursor:not-allowed;color:var(--mist)}
.daylist button[disabled] .chev{visibility:hidden}
.woop{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:559.98px){.woop{grid-template-columns:1fr}}
.woop div{background:var(--paper);color:var(--ink);border:1px solid var(--line-paper);border-radius:4px;padding:16px;min-width:0}
.woop .k{font-family:var(--display);font-weight:600;font-size:2rem;color:var(--plum);line-height:1.1}
.woop .lbl{font-family:var(--display);font-weight:500;font-size:.75rem;color:var(--ink-soft);margin-left:8px}
.woop p{margin:8px 0 0;overflow-wrap:anywhere;font-family:var(--hand);font-size:1.5rem;line-height:1.1}
.empty{color:var(--ink-soft);font-style:italic;font-family:var(--body)!important;font-size:.875rem!important;line-height:1.5}
.card .empty{color:var(--mist)}
/* Journal et plans : une surface L1 papier avec séparateurs fins */
ul.proofs{list-style:none;margin:0;padding:0;background:var(--paper);color:var(--ink);border:1px solid var(--line-paper);border-radius:8px;overflow:hidden}
ul.proofs li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;padding:12px 16px}
ul.proofs li+li{border-top:1px solid var(--line-paper)}
ul.proofs time{font-family:var(--display);font-weight:600;font-size:.875rem;color:var(--plum);padding-top:2px}
.toast{position:fixed;left:50%;bottom:calc(88px + env(safe-area-inset-bottom,0));transform:translateX(-50%);max-width:calc(100% - 32px);background:var(--paper);color:var(--ink);border:1px solid var(--line-paper);padding:12px 20px;border-radius:999px;font-family:var(--display);font-weight:500;font-size:.875rem;z-index:9}
.scale{display:flex;gap:4px;flex-wrap:wrap}
.scale button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:rgba(238,231,246,.06);color:var(--moon);font-family:var(--display);font-weight:600;cursor:pointer;transition:background-color .15s}
@media (hover:hover){.scale button:hover{background:rgba(238,231,246,.14)}}
.scale button[aria-pressed="true"]{background:var(--glow);border-color:var(--glow);color:var(--ink)}
.demo{border-radius:16px;padding:16px;font-size:.875rem;background:rgba(168,240,218,.08);border:1px solid rgba(168,240,218,.3)}
.note{font-size:.875rem;color:var(--mist)}
.confirm{border-top:1px solid var(--line);padding-top:16px}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ═══ Programme ludique : séance guidée, ciel d'étoiles, carte en papier ═══ */
body.noscroll{overflow:hidden}
.lede{color:var(--mist)}
.hand{font-family:var(--hand)!important;font-size:1.6rem!important;line-height:1.25!important}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.chips li,.chips button{font-family:var(--display);font-weight:500;font-size:.875rem;padding:6px 12px;border-radius:999px;border:1px solid var(--line);color:var(--moon);background:rgba(238,231,246,.04)}
.chips.sel button{min-height:44px;padding:8px 14px;cursor:pointer;transition:background-color .15s,border-color .15s}
.chips.sel button[aria-pressed="true"]{background:var(--glow);border-color:var(--glow);color:var(--ink)}
.linkbtn{align-self:flex-start;min-height:44px;background:none;border:0;padding:8px 0;color:var(--mist);font-family:var(--display);font-weight:500;font-size:.875rem;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
@media (hover:hover){.linkbtn:hover{color:var(--moon)}}
.center{text-align:center}

/* Le ciel */
.skycard{position:relative;border-radius:16px;border:1px solid var(--line);background:radial-gradient(120% 90% at 50% 110%,#2C2140,#1C1528 55%,#140F1C);overflow:hidden;padding:8px}
.skycard::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.7;background-image:radial-gradient(1px 1px at 12% 22%,#fff7 50%,transparent 51%),radial-gradient(1px 1px at 33% 70%,#fff5 50%,transparent 51%),radial-gradient(1.4px 1.4px at 58% 18%,#fff8 50%,transparent 51%),radial-gradient(1px 1px at 81% 64%,#fff5 50%,transparent 51%),radial-gradient(1px 1px at 92% 12%,#fff6 50%,transparent 51%),radial-gradient(1px 1px at 46% 88%,#fff4 50%,transparent 51%)}
.skycap{position:relative;margin:0 8px 8px;font-size:.875rem;color:var(--mist)}
svg.sky{display:block;width:100%;height:auto;overflow:visible;position:relative}
.sky line{stroke-width:1.2;stroke-linecap:round}
.sky line.dim{stroke:rgba(238,231,246,.16);stroke-dasharray:2 5}
.sky line.lit{stroke:rgba(168,240,218,.75)}
.sky .core{fill:rgba(238,231,246,.55)}
.sky .done .core{fill:#F4FFFB}
.sky .halo{fill:rgba(168,240,218,.18)}
.sky .done .halo{filter:blur(2px)}
.sky .now .core{fill:var(--glow)}
.sky .ring{fill:none;stroke:var(--glow);stroke-width:1.4;opacity:.8}
.sky .lock{opacity:.35}
.sky text{font-family:var(--display);font-size:9px;font-weight:500;fill:var(--mist)}
.sky .done text,.sky .now text{fill:var(--moon)}
.sky .hit{fill:transparent}
.sky a.sl{cursor:pointer;outline:none}
.sky a.sl:focus-visible .hit{stroke:var(--glow);stroke-width:2}
@media (hover:hover){.sky a.sl:hover .core{fill:#fff}}
.wk{display:flex;flex-direction:column;gap:8px}
.wkh{display:flex;align-items:center;justify-content:space-between;gap:12px}

/* Aujourd'hui */
.startbox{display:flex;flex-direction:column;gap:16px;align-items:stretch}
.btn.big{min-height:56px;font-size:1.0625rem;padding:14px 28px;box-shadow:0 12px 32px -12px rgba(168,240,218,.55)}
.playic{width:0;height:0;border-left:11px solid currentColor;border-top:7px solid transparent;border-bottom:7px solid transparent;margin-right:2px}
.prefs{display:flex;flex-wrap:wrap;gap:8px 24px}
.sw{display:inline-flex;align-items:center;gap:12px;min-height:44px;margin:0;font-weight:500;font-size:.9375rem;cursor:pointer}
.sw input{position:absolute;opacity:0;width:1px;height:1px}
.sw .tr{position:relative;width:44px;height:26px;border-radius:999px;background:rgba(238,231,246,.18);flex:none;transition:background-color .2s}
.sw .tr::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--moon);transition:transform .2s var(--ease)}
.sw input:checked+.tr{background:var(--glow)}
.sw input:checked+.tr::after{transform:translateX(18px);background:var(--ink)}
.sw input:focus-visible+.tr{outline:3px solid var(--glow);outline-offset:3px}
.streak{padding:12px 16px;border-radius:12px;background:rgba(168,240,218,.08);border:1px solid rgba(168,240,218,.25);font-size:.9375rem}
.back{order:-1}

/* La séance */
.seance{position:fixed;inset:0;z-index:30;display:grid;grid-template-rows:auto minmax(0,1fr) auto;color:var(--moon);background:radial-gradient(120% 70% at 50% 110%,#33264A,#1E1630 45%,#120D19 85%);padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px)}
.seance::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;background-image:radial-gradient(1px 1px at 10% 20%,#fff8 50%,transparent 51%),radial-gradient(1px 1px at 25% 75%,#fff5 50%,transparent 51%),radial-gradient(1.5px 1.5px at 62% 12%,#fff9 50%,transparent 51%),radial-gradient(1px 1px at 78% 46%,#fff6 50%,transparent 51%),radial-gradient(1px 1px at 90% 82%,#fff5 50%,transparent 51%),radial-gradient(1.2px 1.2px at 42% 40%,#fff4 50%,transparent 51%)}
.s-top{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}
.steps{list-style:none;margin:0;padding:0;display:flex;gap:6px;align-items:center;min-width:0}
.steps li{display:flex;align-items:center;gap:6px;font-family:var(--display);font-size:.75rem;font-weight:500;color:var(--mist)}
.steps li i{width:8px;height:8px;border-radius:50%;background:rgba(238,231,246,.22);flex:none;transition:transform .3s var(--ease),background-color .3s}
.steps li.past i{background:var(--glow);opacity:.6}
.steps li.cur i{background:var(--glow);transform:scale(1.35)}
.steps li span{display:none}
.steps li.cur span{display:inline;color:var(--moon)}
@media (min-width:700px){.steps li span{display:inline}.steps{gap:14px}}
.s-tools{display:flex;gap:4px;flex:none}
.tbtn{min-height:44px;min-width:44px;padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(238,231,246,.04);color:var(--moon);font-family:var(--display);font-weight:500;font-size:.8125rem;cursor:pointer;transition:background-color .15s}
.tbtn[aria-pressed="true"]{background:rgba(168,240,218,.16);border-color:rgba(168,240,218,.5);color:var(--glow)}
.tbtn.x{font-size:1.4rem;line-height:1;padding:0}
@media (hover:hover){.tbtn:hover{background:rgba(238,231,246,.1)}}
@media (max-width:420px){#sAmb{display:none}}
.s-body{position:relative;overflow-y:auto;overscroll-behavior:contain}
.s-in{max-width:640px;margin:0 auto;padding:32px 20px 40px;display:flex;flex-direction:column;gap:20px;animation:sIn .3s var(--ease) both}
@keyframes sIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.kicker{margin:0;font-family:var(--display);font-weight:500;font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;color:var(--glow)}
.say{margin:0;font-family:var(--body);font-size:1.3125rem;line-height:1.55;color:var(--moon)}
.say.small{font-size:1.0625rem;color:var(--mist)}
.s-in h2{font-size:clamp(1.75rem,6vw,2.25rem);font-variation-settings:"wdth" 85}
.act{margin:0;font-family:var(--display);font-weight:600;font-size:1.375rem;line-height:1.3}
.q{font-size:1.125rem;margin:0}
.s-foot{position:relative;display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:1px solid var(--line);background:rgba(18,13,25,.6)}
.s-foot .btn.big{flex:1 1 auto;max-width:420px}
.s-foot .btn.ghost{flex:none}

/* Respiration */
.orb{position:relative;width:min(220px,60vw);aspect-ratio:1;margin:8px auto;display:grid;place-items:center}
.orb .ob{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 50% 45%,rgba(196,246,230,.95),rgba(168,240,218,.45) 45%,rgba(168,240,218,.08) 70%,transparent 72%);transform:scale(.6);transition:transform 6s cubic-bezier(.45,0,.55,1)}
.orb.in .ob{transform:scale(1);transition-duration:4s}
.orb b{position:relative;font-family:var(--display);font-weight:500;font-size:1.0625rem;color:var(--ink);letter-spacing:.02em}

/* Minuteur */
.timer{display:flex;flex-wrap:wrap;align-items:center;gap:20px;padding:16px;border-radius:16px;border:1px solid var(--line);background:rgba(238,231,246,.03)}
.ring{--p:0;border-radius:50%;background:conic-gradient(var(--glow) calc(var(--p) * 1turn),rgba(238,231,246,.12) 0);-webkit-mask:radial-gradient(circle,transparent 47px,#000 48px);mask:radial-gradient(circle,transparent 47px,#000 48px);position:relative}
#tTxt{font-family:var(--display);font-weight:600;font-size:1.375rem;font-variant-numeric:tabular-nums}
.tctl{display:flex;flex-direction:column;gap:10px;min-width:0;flex:1 1 220px}
.tctl .note{margin:0}
.ringwrap{position:relative;width:112px;height:112px;flex:none;display:grid;place-items:center}
.ringwrap .ring{position:absolute;inset:0}

/* Écrire */
.paper{position:relative;background:var(--paper);border-radius:4px;padding:8px 8px 4px;transform:rotate(-.6deg);box-shadow:0 24px 40px -28px rgba(0,0,0,.9);background-image:repeating-linear-gradient(transparent 0 37px,rgba(90,45,107,.14) 37px 38px)}
.paper textarea{background:transparent;border:0;min-height:180px;color:var(--ink);padding:6px 10px;line-height:38px!important}
.paper textarea:focus-visible{outline:none}
.paper:focus-within{box-shadow:0 0 0 3px var(--glow),0 24px 40px -28px rgba(0,0,0,.9)}

/* Ranger */
.flyzone{position:relative;min-height:220px;display:grid;align-items:start}
.flynote{position:absolute;left:50%;bottom:0;width:min(280px,80%);margin-left:calc(min(280px,80%) / -2);background:var(--paper);color:var(--ink);padding:14px 16px;border-radius:3px;font-size:1.5rem;line-height:1.15;box-shadow:0 20px 40px -20px rgba(0,0,0,.8);transform:rotate(-2deg);max-height:120px;overflow:hidden}
blockquote.phrase{margin:0;padding:20px 22px;border-radius:16px;background:rgba(168,240,218,.07);border:1px solid rgba(168,240,218,.25);font-family:var(--body);font-style:italic;font-size:1.3125rem;line-height:1.5}

/* Ma carte : post-it sur carton */
.board{border-radius:16px;padding:20px;background:#B98550;background-image:radial-gradient(rgba(0,0,0,.08) 1px,transparent 1px);background-size:6px 6px;border:1px solid rgba(0,0,0,.2)}
.board .woop{gap:16px}
.pin{transform:rotate(var(--r));box-shadow:0 14px 24px -16px rgba(0,0,0,.7);position:relative}
.pin::before{content:"";position:absolute;top:-6px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#F2A3A3,#B94A5A);box-shadow:0 2px 3px rgba(0,0,0,.35)}
.phrases{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.ph{border-radius:10px;padding:10px 12px;border:1px dashed var(--line);font-size:.875rem;color:var(--mist);min-width:0}
.ph span{font-family:var(--display);font-weight:600;font-size:.75rem;color:var(--mist)}
.ph p{margin:4px 0 0}
.ph.on{border-style:solid;border-color:rgba(168,240,218,.35);background:rgba(168,240,218,.06);color:var(--moon)}
.ph.on span{color:var(--glow)}
.ph.on p{font-style:italic}

/* ── Avant d'ouvrir la boîte : une question à la fois ── */
.dg{display:flex;flex-direction:column;align-items:center;text-align:center;min-height:calc(100svh - 230px);justify-content:center;padding-block:8px 24px}
.dg-box{width:min(200px,52vw);margin-bottom:4px}
.dg-box svg{display:block;width:100%;height:auto;overflow:visible}
.dg-stage{width:100%;display:flex;justify-content:center}
.dg-in{display:flex;flex-direction:column;align-items:center;gap:20px;width:100%;max-width:560px;animation:dgIn .5s var(--ease) both}
@keyframes dgIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.dg .eyebrow{margin:0}
.dg-q{display:block;margin:0;font-family:var(--body);font-weight:400;font-size:clamp(1.75rem,5.4vw,2.5rem);line-height:1.15;letter-spacing:-.02em;color:var(--moon);text-wrap:balance;outline:none}
.dg-q em{font-style:italic;font-weight:300;color:var(--glow)}
.dg-sub{margin:0;color:var(--mist);max-width:40ch}
.dg-demo{margin:0;font-family:var(--display);font-size:.875rem;color:var(--glow)}
.dg-count{margin:0;font-family:var(--display);font-weight:500;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mist)}
.dg-dots{display:flex;gap:8px;list-style:none;margin:-12px 0 0;padding:0}
.dg-dots li{width:28px;height:4px;border-radius:2px;background:rgba(238,231,246,.16);transition:background-color .3s}
.dg-dots li.past{background:rgba(168,240,218,.5)}.dg-dots li.cur{background:var(--glow)}
.dg-note{width:100%;background:var(--paper);border-radius:4px;padding:12px 20px;transform:rotate(-1deg);box-shadow:0 24px 40px -24px rgba(0,0,0,.8);background-image:repeating-linear-gradient(180deg,transparent 0 39px,rgba(43,34,54,.13) 39px 40px);background-position:0 12px}
.dg-note textarea{display:block;width:100%;min-height:80px;background:transparent;border:0;border-radius:0;padding:0;resize:none;color:var(--ink);line-height:40px!important;text-align:left}
.dg-note textarea:focus-visible{outline:none}
.dg-note:focus-within{box-shadow:0 0 0 3px var(--glow),0 24px 40px -24px rgba(0,0,0,.8)}
.dg-note.out{transform:rotate(-2deg);padding:20px 24px;animation:dgNote 1.1s var(--ease) .5s both}
.dg-note.out p{margin:0;font-size:2rem!important;line-height:1.2!important;color:var(--ink)}
@keyframes dgNote{from{opacity:0;transform:translateY(60px) rotate(4deg) scale(.8)}to{opacity:1;transform:rotate(-2deg)}}
.dg-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.dg-chip{min-height:48px;padding:10px 20px;border-radius:999px;border:1px solid rgba(238,231,246,.25);background:rgba(238,231,246,.05);color:var(--moon);font-family:var(--display);font-weight:500;font-size:1rem;cursor:pointer;transition:background-color .15s,border-color .15s,transform .2s var(--ease)}
@media (hover:hover){.dg-chip:hover{border-color:var(--glow);transform:translateY(-2px)}}
.dg-chip[aria-pressed="true"]{background:var(--glow);border-color:var(--glow);color:var(--ink)}
.dg-stars{display:flex;flex-wrap:wrap;justify-content:center;gap:0;max-width:460px}
.dg-star{width:46px;height:46px;padding:6px;border:0;background:none;cursor:pointer;color:rgba(238,231,246,.2);transition:color .15s,transform .2s var(--ease)}
.dg-star svg{display:block;width:100%;height:100%;fill:currentColor}
.dg-star.lit{color:#F6D58E}
@media (hover:hover){.dg-star:hover{transform:scale(1.15)}}
@media (max-width:479.98px){.dg-stars{max-width:240px}}
.dg-scale{display:flex;justify-content:space-between;width:min(460px,100%);margin:-8px 0 0;font-family:var(--display);font-size:.75rem;color:var(--mist)}
@media (max-width:479.98px){.dg-scale{width:240px}}
.dg-other{width:100%;max-width:420px;text-align:left}
.dg-other label{display:block;margin-bottom:8px;font-family:var(--display);font-weight:500;font-size:.875rem;color:var(--mist)}
.dg-act{display:flex;justify-content:center}
.dg-back{align-self:center}
@media (prefers-reduced-motion:reduce){.dg-in,.dg-note.out{animation:none}}

/* ── Le texte s'illumine au rythme de la voix ── */
.karaoke .kw{opacity:.34;transition:opacity .45s ease,color .45s ease}
.karaoke .kw.on{opacity:1}
.karaoke .kw.cur{color:var(--glow)}
.read.karaoke .kw.cur{color:var(--plum)}