/* CacaoCare, app compagnon v8.1 « Mon rituel »
   Charte v2 du 27 juin 2026 (guide de style), polices locales, aucune ressource externe.
   Le bloc :root est le fichier de variables à REMPLACER par l'export du thème Eurus
   (mêmes noms), pour la continuité graphique exacte avec la boutique.
   Les images de Gaëlle se posent dans /img (voir LISEZMOI_v8.md, section « Visuels à fournir »).
   Si une image manque, l'interface reste entière : chaque emplacement a un dessin de repli. */

@font-face{font-family:"Fraunces";src:url("fonts/Fraunces.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url("fonts/Fraunces-Italic.woff2") format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:"Mulish";src:url("fonts/Mulish.woff2") format("woff2");font-weight:200 1000;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("fonts/SpaceGrotesk.woff2") format("woff2");font-weight:300 700;font-display:swap}

:root{
  --carte:#fff;
  --cream:#fbf7f1; --cream-deep:#f4ebdf; --line:#ebddd0;
  --cacao:#793120; --cacao-soft:#6b554a; --muted:#a2917e;
  --coral:#ed6e68; --coral-deep:#b5443e;
  --cycle:#f7d1cf; --cocon:#f7cca8; --equilibre:#f39d81; --rosep:#f9e3e1;
  --cure:var(--equilibre); --cure-soft:color-mix(in srgb,var(--cure) 35%,#fff);
  --font-title:"Fraunces",Georgia,serif;
  --font-body:"Mulish",system-ui,-apple-system,sans-serif;
  --font-tech:"Space Grotesk",var(--font-body);
  --radius-card:18px; --radius-pill:30px; --radius-chip:20px;
  --shadow:0 10px 30px rgba(121,49,32,.08); --shadow-soft:0 2px 10px rgba(121,49,32,.05);
  --header-h:60px; --container:560px; --tap:48px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--font-body);font-size:1.0625rem;line-height:1.5;color:var(--cacao);background:var(--cream);min-height:100dvh;padding-bottom:calc(84px + env(safe-area-inset-bottom));position:relative;overflow-x:hidden}
/* Fond : halo de la couleur de cure en haut, et une texture facultative (img/fond.jpg) */
body::before{content:"";position:fixed;inset:0;z-index:-2;background:
  radial-gradient(120% 60% at 50% -10%, var(--cure-soft) 0, transparent 60%), var(--cream)}
body::after{content:"";position:fixed;inset:0;z-index:-1;background:url("img/fond.jpg") center/cover no-repeat;opacity:.35;pointer-events:none}
h1,h2,h3{font-family:var(--font-title);font-variation-settings:"WONK" 0;font-weight:500;line-height:1.12;letter-spacing:-.01em}
h1{font-size:2rem}h2{font-size:1.375rem}h3{font-size:1.125rem}
.it{font-style:italic}
.tech{font-family:var(--font-tech);font-size:0.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--coral-deep);font-weight:500}
.muted{color:var(--cacao-soft)}
.small{font-size:0.875rem}
a{color:var(--coral-deep)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
img{max-width:100%;display:block}
[hidden]{display:none!important}

/* En-tête : le vrai logo, comme sur la boutique */
.hdr{position:sticky;top:0;z-index:20;height:calc(var(--header-h) + env(safe-area-inset-top));background:rgba(251,247,241,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:env(safe-area-inset-top) 18px 0}
.brand img{height:26px;width:auto}
.hdr .back{font-family:var(--font-tech);font-size:0.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cacao-soft);text-decoration:none;padding:10px 0}

.wrap{max-width:var(--container);margin:0 auto;padding:20px 18px 24px}
.screen{display:none}
.screen.on{display:block;animation:in .35s var(--ease)}
@keyframes in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.eyebrow{margin-bottom:6px}
.lead{color:var(--cacao-soft);font-size:0.9375rem;margin:6px 0 16px}

/* Cartes */
.card{background:var(--carte);border:1px solid var(--line);border-radius:var(--radius-card);padding:18px;margin-bottom:14px;box-shadow:var(--shadow-soft)}
.card.soft{background:var(--rosep);border-color:transparent}
.card.cure{background:var(--cure-soft);border-color:transparent}
.card h2{margin-bottom:6px}

/* ---------- Accueil ---------- */
.hero{position:relative;overflow:hidden;border-radius:26px;padding:22px 20px 20px;margin-bottom:16px;
  background:linear-gradient(160deg,#fff 0%,var(--cure-soft) 45%,var(--cure) 100%);box-shadow:var(--shadow)}
.hero .tech{color:var(--cacao-soft)}
.hero h1{font-size:2.125rem;margin:2px 0 0}
.hero .date{font-family:var(--font-title);font-style:italic;font-size:1.125rem;color:var(--cacao-soft);margin-bottom:16px}
.hero-img{position:absolute;right:-6%;bottom:-8%;width:52%;max-width:260px;pointer-events:none;filter:drop-shadow(0 12px 18px rgba(121,49,32,.18))}
.ring-row{display:flex;align-items:center;gap:16px;position:relative;z-index:1}
.ring{position:relative;width:104px;height:104px;flex:none}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:8;stroke-linecap:round}
.ring .bg{stroke:rgba(255,255,255,.7)}
.ring .fg{stroke:var(--cacao);stroke-dasharray:327;stroke-dashoffset:327;transition:stroke-dashoffset 1s var(--ease)}
.ring-txt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.ring-txt b{font-family:var(--font-title);font-size:2.125rem;font-weight:500}
.ring-txt small{font-family:var(--font-tech);font-size:0.625rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cacao-soft);margin-top:4px}
.ring-side{flex:1;min-width:0}
.ring-side p{font-size:0.9375rem;margin-bottom:10px;max-width:220px}
.btn.done{background:var(--cacao)}

.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 14px}
.tile{position:relative;overflow:hidden;min-height:150px;border-radius:22px;padding:16px;display:flex;flex-direction:column;justify-content:flex-end;text-align:left;box-shadow:var(--shadow-soft);transition:transform .15s var(--ease)}
.tile:active{transform:scale(.97)}
.tile h3{font-size:1.1875rem;position:relative}
.tile p{font-size:0.7812rem;color:var(--cacao-soft);position:relative;margin-top:2px}
.tile img,.tile .fb{position:absolute;top:10px;right:10px;width:64px;height:64px}
.tile .fb{color:var(--cacao);opacity:.85}
.tile img:not([hidden]) + .fb{display:none}
.tile img{object-fit:contain;filter:drop-shadow(0 6px 10px rgba(121,49,32,.15))}
.t-carnet{background:var(--rosep)}
.t-respirer{background:color-mix(in srgb,var(--cocon) 50%,#fff)}
.t-assiette{background:var(--cream-deep)}
.t-organiser{background:color-mix(in srgb,var(--cycle) 50%,#fff)}

.geste{position:relative}
.geste .tech{margin-bottom:6px}
.geste h3{font-size:1.25rem;margin-bottom:8px}
.geste p{font-size:0.9375rem;color:var(--cacao-soft)}
.geste .plus{margin-top:8px;font-style:italic;color:var(--cacao)}
.fleurs{position:absolute;left:-40px;bottom:-30px;width:180px;opacity:.9;pointer-events:none;z-index:-1}

/* Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap);padding:12px 22px;border-radius:var(--radius-pill);background:var(--coral);color:#fff;font-family:var(--font-tech);font-weight:500;font-size:0.9375rem;letter-spacing:.03em;width:100%;transition:transform .08s,background .2s;box-shadow:0 6px 16px rgba(237,110,104,.25)}
.btn:active{transform:scale(.97)}
.btn.line{background:transparent;border:1.5px solid var(--cacao);color:var(--cacao);box-shadow:none}
.btn.ghost{background:var(--carte);color:var(--cacao);box-shadow:none;border:1px solid var(--line)}
.btn.sm{width:auto;min-height:42px;padding:8px 18px;font-size:0.8125rem}
.btn.icon{width:42px;min-height:42px;padding:0;border-radius:50%}
.link{font-size:0.875rem;color:var(--coral-deep);text-decoration:underline;text-underline-offset:3px;padding:8px 0}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.row .btn{flex:1}

/* ---------- Carnet : bande de la semaine ---------- */
.week{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.week .days{flex:1;display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.day{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 0 6px;border-radius:16px;border:1px solid transparent;color:var(--cacao-soft)}
.day small{font-family:var(--font-tech);font-size:0.625rem;letter-spacing:.08em;text-transform:uppercase}
.day b{font-family:var(--font-title);font-weight:500;font-size:1.1875rem;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--carte);border:1px solid var(--line)}
.day .dots{display:flex;gap:2px;height:5px}
.day .dots i{width:5px;height:5px;border-radius:50%;background:var(--cacao)}
.day .dots i.r{background:var(--coral)}
.day .dots i.b{background:var(--muted)}
.day.today b{border-color:var(--coral);color:var(--coral-deep)}
.day.sel{background:var(--carte);border-color:var(--line);box-shadow:var(--shadow-soft)}
.day.sel b{background:var(--cacao);color:#fff;border-color:var(--cacao)}
.day:disabled{opacity:.35}
.mois-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.mois-row h1{font-size:1.625rem}

/* Calendrier du mois (replié par défaut) */
.calhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.calhead .wd{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;text-align:center;width:100%;color:var(--muted)}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal .d{aspect-ratio:1;border-radius:12px;background:var(--carte);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:0.8125rem;color:var(--cacao-soft);gap:3px}
.cal .d.has{border-color:var(--coral);background:var(--rosep)}
.cal .d.today{outline:2px solid var(--coral);outline-offset:1px}
.cal .d.sel{background:var(--cacao);color:#fff;border-color:var(--cacao)}
.cal .d .dots{display:flex;gap:2px}
.cal .d .dots i{width:5px;height:5px;border-radius:50%;background:var(--cacao)}
.cal .d.sel .dots i{background:var(--carte)}
.cal .d .dots i.r{background:var(--coral)}
.cal .d .dots i.b{background:var(--muted)}
.cal .d:disabled{opacity:.35}

/* Les touches : règles (gouttes) et repères (jetons) */
.drops{display:flex;gap:8px}
.drop{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px;border-radius:16px;border:1.5px solid var(--line);background:var(--carte);font-size:0.75rem;color:var(--cacao-soft)}
.drop svg{width:28px;height:32px}
.drop svg .o{fill:none;stroke:var(--coral);stroke-width:1.6}
.drop svg .f{fill:var(--coral)}
.drop[aria-pressed="true"]{background:var(--rosep);border-color:var(--coral);color:var(--coral-deep);font-weight:700}

.tokens{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tok{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px 10px;border-radius:18px;background:var(--carte);border:1.5px solid var(--line);font-size:0.7812rem;line-height:1.2;text-align:center;color:var(--cacao-soft);transition:transform .12s var(--ease),background .2s}
.tok:active{transform:scale(.94)}
.tok .ico{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--cream-deep);color:var(--cacao);position:relative}
.tok .ico svg{width:26px;height:26px}
.tok .ico::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:3px solid transparent}
.tok[data-lv="0"]{border-color:var(--line)}
.tok[data-lv="0"] .ico{background:var(--carte);border:1.5px dashed var(--muted)}
.tok[data-lv="0"] .lv-txt{color:var(--muted)}
.tok[data-lv="1"]{border-color:var(--coral);background:var(--carte)}
.tok[data-lv="1"] .ico{background:var(--rosep)}
.tok[data-lv="1"] .ico::after{border-color:var(--coral) transparent transparent var(--coral);transform:rotate(-45deg)}
.tok[data-lv="2"]{border-color:var(--coral);background:var(--rosep);color:var(--coral-deep);font-weight:700}
.tok[data-lv="2"] .ico{background:var(--coral);color:#fff}
.tok[data-lv="2"] .ico::after{border-color:var(--coral)}
.tok .lv-txt{font-family:var(--font-tech);font-size:0.625rem;letter-spacing:.06em;text-transform:uppercase;color:var(--coral-deep);min-height:12px}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:0.75rem;color:var(--muted);margin-top:10px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:50%;vertical-align:middle;margin-right:4px;border:1.5px solid var(--coral)}
.legend i.h{background:linear-gradient(90deg,var(--coral) 50%,transparent 50%)}
.legend i.f{background:var(--coral)}
.legend i.z{border-style:dashed;border-color:var(--muted)}

.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{min-height:40px;padding:8px 14px;border-radius:var(--radius-chip);border:1.5px solid var(--line);background:var(--carte);font-size:0.875rem}
.chip[aria-pressed="true"]{background:var(--cacao);color:#fff;border-color:var(--cacao)}

textarea,input[type=text],input[type=date],input[type=time],select{width:100%;font:inherit;font-size:1rem;padding:12px 14px;border:1.5px solid var(--line);border-radius:14px;background:var(--carte);color:var(--cacao)}
textarea{min-height:90px;resize:vertical}
label.f{display:block;font-size:0.8125rem;color:var(--muted);margin:10px 0 6px}
.saved{font-family:var(--font-tech);font-size:0.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:6px;transition:color .2s}
.saved.ok{color:var(--coral-deep)}

/* ---------- Respirer : trois scènes, trois dessins ---------- */
.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.mode{border-radius:18px;padding:12px 8px 10px;background:var(--carte);border:1.5px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:6px;font-size:0.7812rem;line-height:1.2;text-align:center;color:var(--cacao-soft)}
.mode svg{width:40px;height:40px}
.mode b{font-family:var(--font-title);font-weight:500;font-size:0.9375rem;color:var(--cacao)}
.mode[aria-pressed="true"]{border-color:var(--coral);background:var(--rosep);box-shadow:var(--shadow-soft)}
.stage{position:relative;border-radius:26px;overflow:hidden;aspect-ratio:4/4.4;box-shadow:var(--shadow);margin-bottom:12px;background:var(--carte)}
.scene{position:absolute;inset:0;display:none}
.stage[data-mode="coherence"] .scene-vague,.stage[data-mode="478"] .scene-nuit,.stage[data-mode="carre"] .scene-carre{display:block}
.scene svg{width:100%;height:100%;display:block}
.scene-vague{background:linear-gradient(180deg,#fff 0%,color-mix(in srgb,var(--rosep) 50%,#fff) 100%)}
.scene-nuit{background:linear-gradient(180deg,var(--cacao) 0%,#793120 100%)}
.scene-carre{background:linear-gradient(180deg,#fff 0%,var(--cycle) 100%)}
.scene .bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9}
.stage-txt{position:absolute;left:0;right:0;bottom:18px;text-align:center;pointer-events:none}
.stage-txt b{display:block;font-family:var(--font-title);font-weight:500;font-size:1.75rem;color:var(--cacao)}
.stage-txt small{display:block;font-size:0.875rem;color:var(--cacao-soft)}
.stage[data-mode="coherence"] .stage-txt{bottom:auto;top:26px}
.stage[data-mode="478"] .stage-txt b{color:#fff}
.stage[data-mode="478"] .stage-txt small{color:rgba(255,255,255,.8)}
.timer{text-align:center;margin-bottom:12px}
.durees{justify-content:center;margin-top:10px}
.durees .chip{min-height:34px;padding:4px 12px;font-size:0.8125rem}

/* ---------- Listes ---------- */
.list{list-style:none}
.list li{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line)}
.list li:last-child{border-bottom:0}
.list .t{flex:1;min-width:0}
.list .t b{display:block;font-weight:700}
.list .t span{font-size:0.875rem;color:var(--cacao-soft)}
.check{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--line);flex:none;margin-top:2px;display:grid;place-items:center;font-size:0.875rem;color:var(--coral)}
.check[aria-checked="true"]{background:var(--coral);border-color:var(--coral);color:#fff}
.heart{width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--cream-deep);color:var(--coral)}
.heart svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
.heart[aria-checked="true"]{background:var(--coral);color:#fff}
.heart[aria-checked="true"] svg{fill:#fff}
.idee{display:flex;gap:12px;align-items:center}
.idee .pic{width:56px;height:56px;border-radius:16px;flex:none;background:var(--cream-deep) center/cover no-repeat;display:grid;place-items:center;color:var(--cacao)}
.idee .pic svg{width:26px;height:26px}
.seg{display:flex;background:var(--cream-deep);border-radius:var(--radius-pill);padding:4px;margin-bottom:14px}
.seg button{flex:1;min-height:38px;border-radius:var(--radius-pill);font-family:var(--font-tech);font-size:0.8125rem;letter-spacing:.04em;color:var(--cacao-soft)}
.seg button[aria-selected="true"]{background:var(--carte);color:var(--cacao);box-shadow:var(--shadow-soft)}
.rappel .ico{width:40px;height:40px;border-radius:50%;background:var(--rosep);display:grid;place-items:center;color:var(--coral-deep);flex:none}
.rappel .ico svg{width:20px;height:20px}

/* Barre d'onglets */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:20;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line);display:flex;padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
.tabs button{flex:1;min-height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-family:var(--font-tech);font-size:0.6562rem;letter-spacing:.04em;color:var(--muted);border-radius:16px;transition:background .2s}
.tabs button svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tabs button[aria-selected="true"]{color:var(--coral-deep);background:var(--rosep)}

/* Accueil au premier lancement : choisir sa cure */
.onb{position:fixed;inset:0;z-index:40;background:var(--cream);overflow:auto;padding:calc(24px + env(safe-area-inset-top)) 22px 40px;animation:in .4s var(--ease)}
.onb .inner{max-width:var(--container);margin:0 auto}
.onb img.logo{height:34px;margin:0 auto 26px}
.onb h1{font-size:1.875rem;margin-bottom:6px}
.onb .cures{display:grid;gap:12px;margin:18px 0}
.onb .cure-opt{display:flex;align-items:center;gap:14px;padding:16px;border-radius:20px;background:var(--carte);border:1.5px solid var(--line);text-align:left}
.onb .cure-opt[aria-pressed="true"]{border-color:var(--coral);background:var(--rosep)}
.onb .cure-opt .pic{width:48px;height:48px;border-radius:50%;flex:none;display:grid;place-items:center}
.onb .cure-opt .pic svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round}
.onb .cure-opt b{font-family:var(--font-title);font-weight:500;font-size:1.1875rem;display:block}
.onb .cure-opt span{font-size:0.8125rem;color:var(--cacao-soft)}

.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%) translateY(8px);background:var(--cacao);color:#fff;padding:10px 18px;border-radius:var(--radius-pill);font-size:0.875rem;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:50;white-space:nowrap;max-width:90vw;text-overflow:ellipsis;overflow:hidden}
.toast.on{opacity:1;transform:translateX(-50%)}
.note{font-size:0.8125rem;color:var(--muted);margin-top:8px}
.sr{position:absolute;left:-9999px}

@media (min-width:600px){ .tokens{grid-template-columns:repeat(4,1fr)} h1{font-size:2.25rem} }
@media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} }

/* ---------- v8.2 ---------- */
/* Appui long pour valider la bouchée : impossible par accident, anneau qui se remplit */
.hold{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:6px 16px 6px 6px;border-radius:var(--radius-pill);background:var(--carte);color:var(--cacao);font-family:var(--font-tech);font-size:0.8125rem;letter-spacing:.02em;box-shadow:var(--shadow-soft);user-select:none;-webkit-user-select:none;touch-action:manipulation}
.hold svg{width:36px;height:36px;transform:rotate(-90deg);flex:none}
.hold circle{fill:none;stroke-width:4;stroke-linecap:round}
.hold .hb{stroke:var(--rosep)}
.hold .hf{stroke:var(--coral);stroke-dasharray:107;stroke-dashoffset:107}
.hold.done{background:var(--cacao);color:#fff}
.hold.done .hb{stroke:rgba(255,255,255,.3)}
.hold.done .hf{stroke:#fff;stroke-dashoffset:0}
.hero-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px;position:relative;z-index:1}
.hero-foot .small{color:var(--cacao-soft);font-size:0.8125rem}
.hero.paused{filter:saturate(.6)}
.note.center{text-align:center;margin:6px 0 10px}

/* Relire avant de partager */
.preview{margin-top:12px;background:var(--carte);border:1px solid var(--line);border-radius:14px;padding:14px;font-size:0.875rem;max-height:340px;overflow:auto}
.preview h1{font-size:1.25rem;margin-bottom:4px}
.preview h2{font-size:1rem;margin:12px 0 4px;border-bottom:1px solid var(--line)}
.preview table{border-collapse:collapse;width:100%;font-size:0.75rem}
.preview th,.preview td{border:1px solid var(--line);padding:3px 4px;text-align:center}
.preview td:first-child,.preview th:first-child{text-align:left}
.preview ul{margin-left:16px}
.preview .foot{font-size:0.75rem;color:var(--muted);margin-top:10px}

/* Souffler : bouton Maintenant */
.btn.now{flex-direction:column;gap:2px;padding:14px 20px;margin-bottom:14px;background:var(--cacao);box-shadow:0 8px 20px rgba(121,49,32,.2)}
.btn.now span{font-size:1rem}
.btn.now small{font-family:var(--font-body);font-weight:400;font-size:0.75rem;opacity:.85;letter-spacing:0;text-transform:none}
.plain{list-style:none;font-size:0.9062rem;color:var(--cacao-soft)}
.plain li{padding:6px 0 6px 18px;position:relative}
.plain li::before{content:"";position:absolute;left:0;top:14px;width:8px;height:8px;border-radius:50%;background:var(--coral)}

/* Étirements */
.etir{text-align:center}
.etir-img{width:160px;height:160px;object-fit:contain;margin:0 auto 8px}
.etir h2{font-size:1.5rem;margin:4px 0 6px}
.etir p{font-size:0.9375rem;margin-bottom:12px}
.ring.big{width:132px;height:132px;margin:6px auto 14px}
.ring.big .bg{stroke:var(--rosep)}
.ring.big .fg{transition:stroke-dashoffset .95s linear}
.ring.big .ring-txt b{font-size:2.5rem}
.etir .row{justify-content:center}

/* Acupression */
.acu{list-style:none}
.acu li{background:var(--carte);border:1px solid var(--line);border-radius:var(--radius-card);padding:14px;margin-bottom:10px;box-shadow:var(--shadow-soft)}
.acu .head{display:flex;align-items:center;gap:12px}
.acu .pic{width:56px;height:56px;border-radius:16px;flex:none;background:var(--rosep) center/cover no-repeat;display:grid;place-items:center;color:var(--coral-deep);font-family:var(--font-tech);font-size:0.6875rem;letter-spacing:.06em}
.acu b{font-family:var(--font-title);font-weight:500;font-size:1.125rem;display:block}
.acu .trad{font-family:var(--font-tech);font-size:0.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.acu .body{margin-top:10px;font-size:0.9062rem;color:var(--cacao-soft)}
.acu .body span{display:block;margin-bottom:4px}
.acu .body em{font-style:normal;color:var(--cacao);font-weight:700}
.acu .warn{font-size:0.75rem;color:var(--coral-deep);margin-top:6px}
.acu .row{margin-top:10px}
.acu .tmr{font-family:var(--font-title);font-size:1.375rem;color:var(--cacao);min-width:56px;text-align:center}

/* Danser */
.stage.danse{aspect-ratio:4/3.2;background:linear-gradient(160deg,#fff 0%,var(--rosep) 50%,var(--cure) 100%)}
.pulse{position:absolute;inset:0;display:grid;place-items:center}
.pulse i{position:absolute;width:120px;height:120px;border-radius:50%;background:var(--coral);opacity:.18;transform:scale(.6)}
.pulse i:nth-child(2){background:var(--cure);opacity:.35}
.pulse i:nth-child(3){background:var(--carte);opacity:.6;width:70px;height:70px}
.pulse.on i{animation:beat var(--beat,.5s) ease-out infinite}
.pulse.on i:nth-child(2){animation-delay:calc(var(--beat,.5s) * .15)}
.pulse.on i:nth-child(3){animation-delay:calc(var(--beat,.5s) * .3)}
@keyframes beat{0%{transform:scale(.6)}30%{transform:scale(1.15)}100%{transform:scale(.6)}}
.stage.danse .stage-txt{bottom:auto;top:22px}

/* Assiette : planning, courses par rayon, foyer */
.plan{display:grid;gap:8px}
.plan .jour{display:grid;grid-template-columns:52px 1fr 1fr;gap:6px;align-items:stretch}
.plan .jour .n{font-family:var(--font-tech);font-size:0.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);align-self:center}
.plan .slot{border:1px solid var(--line);background:var(--carte);border-radius:14px;padding:8px 10px;text-align:left;font-size:0.8125rem;line-height:1.25;min-height:56px;display:flex;flex-direction:column;justify-content:center;gap:2px}
.plan .slot small{font-family:var(--font-tech);font-size:0.5938rem;letter-spacing:.08em;text-transform:uppercase;color:var(--coral-deep)}
.plan .slot.empty{color:var(--muted);border-style:dashed}
.plan .slot:active{transform:scale(.97)}
.rayon{margin-top:12px}
.rayon h4{font-family:var(--font-tech);font-size:0.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--coral-deep);border-bottom:1px solid var(--line);padding-bottom:4px;margin-bottom:4px}
.item{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:0.9375rem}
.item.off .t{text-decoration:line-through;color:var(--muted)}
.item .t{flex:1}
.item .x{color:var(--muted);font-size:1.125rem;padding:0 6px}
.stepper{display:flex;align-items:center;gap:16px}
.stepper b{font-family:var(--font-title);font-size:1.875rem;font-weight:500;min-width:32px;text-align:center}
.idee .badge{font-family:var(--font-tech);font-size:0.625rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

/* ---------- v8.3 : le moodboard (pastilles inclinées, grandes phrases, traits dessinés à la main) ---------- */
.moment-btn{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:14px 16px;margin-bottom:14px;border-radius:22px;background:var(--cacao);color:#fff;box-shadow:0 10px 24px rgba(121,49,32,.22);transition:transform .15s var(--ease)}
.moment-btn:active{transform:scale(.98)}
.moment-btn .cabosse{width:44px;height:44px;flex:none;color:var(--cocon)}
.moment-btn b{font-family:var(--font-title);font-weight:500;font-size:1.1875rem;display:block}
.moment-btn small{font-size:0.7812rem;opacity:.85;display:block}

.phrase-card{position:relative;overflow:hidden;border-radius:24px;padding:22px 20px 20px;margin-bottom:14px;background:var(--carte);border:1px solid var(--line);box-shadow:var(--shadow-soft);
  background-image:repeating-linear-gradient(180deg,transparent 0 31px,var(--line) 31px 32px);background-position:0 14px}
.phrase-card .tech{margin-bottom:6px}
.phrase-card .big{font-family:var(--font-title);font-style:italic;font-weight:500;font-size:1.625rem;line-height:1.2;color:var(--cacao);max-width:92%}
.phrase-card .deco{position:absolute;color:var(--coral);opacity:.55}
.phrase-card .d1{width:34px;height:34px;right:16px;top:14px}
.phrase-card .d2{width:64px;height:32px;right:12px;bottom:10px;color:var(--cacao-soft)}
.pills{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.pill{display:inline-block;padding:9px 16px;border-radius:30px;font-size:0.9062rem;line-height:1.3;color:var(--cacao);max-width:96%}
.pill b{font-weight:800}
.pill:nth-child(1){background:var(--cure);transform:rotate(-2deg)}
.pill:nth-child(2){background:var(--rosep);transform:rotate(1.5deg);align-self:flex-end}
.pill:nth-child(3){background:var(--cacao);color:#fff;transform:rotate(-1deg)}
.phrase-card .seule{margin-top:16px;font-size:0.875rem;color:var(--coral-deep);font-weight:700;padding-left:14px;border-left:3px solid var(--coral)}

/* Le moment cacao, plein écran, fond cacao infusé */
.moment{position:fixed;inset:0;z-index:45;background:radial-gradient(120% 70% at 50% 0%,color-mix(in srgb,var(--cacao) 78%,#fff) 0,var(--cacao) 55%,var(--cacao) 100%);color:#fff;overflow:auto;padding:calc(20px + env(safe-area-inset-top)) 22px 40px;animation:in .4s var(--ease)}
.moment .inner{max-width:var(--container);margin:0 auto;text-align:center}
.moment .close{color:#fff;opacity:.8;display:block;margin-left:auto;text-align:right}
.moment .tech{color:var(--cocon);margin-top:10px}
.moment h1{font-size:1.875rem;margin:6px 0 10px;color:#fff}
.moment .muted{color:rgba(255,255,255,.85);font-size:1rem;min-height:72px}
.ring.big.cacao{width:180px;height:180px;margin:18px auto 20px}
.ring.big.cacao .bg{stroke:rgba(255,255,255,.18)}
.ring.big.cacao .fg{stroke:var(--cocon)}
.ring.big.cacao .ring-txt b{font-size:3rem;color:#fff}
.ring.big.cacao .ring-txt small{color:var(--cocon)}
.moment .btn{background:var(--coral)}
.moment .btn.ghost{background:rgba(255,255,255,.12);color:#fff;border-color:transparent}
.moment .phrase-fin{font-family:var(--font-title);font-style:italic;font-size:1.375rem;margin-top:22px;color:#fff;min-height:30px}
.moment .origine{color:rgba(255,255,255,.6);margin-top:26px;font-size:0.7812rem}

/* ---------- v8.4 : douceur. Une seule teinte d'accent, du blanc, de l'air. ----------
   Ces règles priment sur celles du dessus. La couleur de cure ne sert plus qu'à un point et à un filet. */
body::before{background:var(--cream)}
body::after{opacity:.18}
.card,.tile,.acu li,.phrase-card{box-shadow:none;border:1px solid var(--line)}
.hero{background:var(--carte);border:1px solid var(--line);box-shadow:none;border-radius:24px}
.hero::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--cure);border-radius:24px 0 0 24px;opacity:.9}
.hero .tech{color:var(--muted)}
.hero h1{font-size:1.875rem}
.hero .date{font-size:1.0625rem;color:var(--muted)}
.hero-img{opacity:.9;filter:none;width:44%}
.ring .bg{stroke:var(--rosep)}
.ring .fg{stroke:var(--coral);opacity:.9}
.hold{background:var(--rosep);box-shadow:none}
.hold .hb{stroke:#fff}
.hold.done{background:var(--cacao)}
.hero-foot{margin-top:12px}
.hero-foot .link,.link{color:var(--muted);text-decoration-color:var(--line)}
.moment-btn{margin:14px 0 0;padding:12px 14px;background:transparent;color:var(--cacao);box-shadow:none;border:1px dashed var(--line);border-radius:18px}
.moment-btn .cabosse{width:32px;height:32px;color:var(--coral)}
.moment-btn b{font-size:1.0625rem}
.moment-btn small{color:var(--muted);opacity:1}
.phrase-card{background:var(--carte);background-image:none;padding:20px 20px 18px}
.phrase-card .tech{color:var(--muted)}
.phrase-card .big{font-size:1.5rem;color:var(--cacao);max-width:100%}
.phrase-card .deco{color:var(--coral);opacity:.5}
.phrase-card .d1{width:22px;height:22px;right:18px;top:16px}
.pills{margin-top:14px;gap:6px}
.pill,.pill:nth-child(1),.pill:nth-child(2),.pill:nth-child(3){background:var(--rosep);color:var(--cacao);transform:none;align-self:flex-start;font-size:0.875rem;padding:8px 14px}
.pill::before{content:"C'est OK de ";color:var(--muted)}
.pill b{font-weight:700}
.phrase-card .seule{border:0;padding:0;margin-top:14px;font-weight:400;font-style:italic;font-family:var(--font-title);font-size:1rem;color:var(--cacao-soft)}
.tiles{gap:10px}
.tile,.t-carnet,.t-respirer,.t-assiette,.t-organiser{background:var(--carte);min-height:132px;border-radius:20px}
.tile .fb{width:44px;height:44px;top:14px;right:14px;color:var(--coral);opacity:.75}
.tile img{width:56px;height:56px}
.tile h3{font-size:1.125rem}
.tile p{color:var(--muted)}
.geste{border-left:4px solid var(--rosep)}
.geste .tech{color:var(--muted)}
.geste p{color:var(--cacao-soft)}
.tech{color:var(--muted);letter-spacing:.12em}
.btn{box-shadow:none}
.btn.now{background:var(--rosep);color:var(--cacao);box-shadow:none;border:1px solid var(--line)}
.btn.now small{color:var(--muted);opacity:1}
.mode[aria-pressed="true"]{box-shadow:none}
.stage{box-shadow:none;border:1px solid var(--line)}
.scene-vague{background:linear-gradient(180deg,#fff 0%,color-mix(in srgb,var(--rosep) 45%,#fff) 100%)}
.scene-carre{background:linear-gradient(180deg,#fff 0%,var(--rosep) 100%)}
.stage.danse{background:linear-gradient(160deg,#fff 0%,var(--rosep) 100%)}
.pulse i{background:var(--coral);opacity:.14}
.pulse i:nth-child(2){background:var(--rosep);opacity:.6}
.tabs{background:rgba(251,247,241,.94)}
.tabs button[aria-selected="true"]{background:transparent;color:var(--coral-deep)}
.tabs button[aria-selected="true"]::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--coral);margin-top:2px}
.day.sel b{background:var(--coral);border-color:var(--coral)}
.tok[data-lv="2"]{background:var(--rosep);color:var(--cacao)}
.tok[data-lv="2"] .ico{background:var(--coral)}
.seg{background:transparent;border:1px solid var(--line)}
.seg button[aria-selected="true"]{background:var(--rosep);box-shadow:none}
.rappel .ico{background:var(--rosep)}
.toast{background:var(--cacao)}
.onb .cure-opt .pic{opacity:.9}

/* ---------- v8.5 : joli, féminin, rond. Entre la v8.3 (chargée) et la v8.4 (vide). ----------
   Des formes rondes, des teintes poudrées de la même famille, une bulle douce par carte, jamais de saturé. */
:root{--rose2:color-mix(in srgb,var(--rosep) 50%,#fff); --rose3:color-mix(in srgb,var(--cycle) 40%,#fff); --abricot2:color-mix(in srgb,var(--cocon) 40%,#fff); --stroke:color-mix(in srgb,var(--line) 60%,#fff)}
body::before{background:
  radial-gradient(60% 40% at 8% 6%, rgba(249,227,225,.75) 0, transparent 70%),
  radial-gradient(50% 35% at 96% 30%, rgba(246,203,168,.35) 0, transparent 70%),
  radial-gradient(60% 40% at 10% 95%, rgba(247,209,207,.45) 0, transparent 70%), var(--cream)}
.card,.hero,.phrase-card,.acu li{border-radius:28px;border:1px solid var(--stroke);position:relative;overflow:hidden;box-shadow:0 8px 24px rgba(121,49,32,.05)}
.card::after,.phrase-card::after,.acu li::after{content:"";position:absolute;width:150px;height:150px;border-radius:50%;right:-60px;top:-70px;background:var(--rose3);z-index:0;pointer-events:none}
.card.soft::after{background:var(--carte);opacity:.6}
.card>*,.phrase-card>*,.acu li>*{position:relative;z-index:1}
.hero::before{display:none}
.hero::after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;right:-80px;bottom:-110px;background:var(--cure-soft);opacity:.7;z-index:0;pointer-events:none}
.hero>*{position:relative;z-index:1}
.hero-img{z-index:1}
/* Les petits titres de section : en italique Fraunces, plus doux qu'en capitales */
.card>.tech:first-child,.phrase-card>.tech:first-child,.hero>.tech:first-child{font-family:var(--font-title);font-style:italic;font-weight:500;text-transform:none;letter-spacing:0;font-size:1.0625rem;color:var(--coral-deep)}
.tiles{gap:12px}
.tile{border-radius:28px;border:0;min-height:140px;padding:18px}
.t-carnet{background:var(--rosep)}.t-respirer{background:var(--abricot2)}.t-assiette{background:var(--rose2)}.t-organiser{background:color-mix(in srgb,var(--cycle) 45%,#fff)}
.tile .fb{width:56px;height:56px;padding:13px;border-radius:50%;background:var(--carte);color:var(--coral);opacity:1;top:14px;right:14px}
.tile img{width:64px;height:64px;top:10px;right:10px}
.tile p{color:var(--cacao-soft)}
/* Le carnet : des ronds, pas des carrés */
.tokens{gap:8px 6px}
.tok{border:0;background:transparent;padding:6px 2px 8px;border-radius:20px}
.tok .ico{width:62px;height:62px;background:var(--carte);border:1.5px solid var(--stroke);box-shadow:0 4px 12px rgba(121,49,32,.06)}
.tok .ico::after{display:none}
.tok .ico svg{width:28px;height:28px}
.tok[data-lv="0"]{background:transparent;border:0}
.tok[data-lv="0"] .ico{background:var(--carte);border:1.5px dashed var(--coral)}
.tok[data-lv="1"],.tok[data-lv="1"]:active{background:transparent;border:0}
.tok[data-lv="1"] .ico{background:var(--rosep);border-color:var(--rosep)}
.tok[data-lv="2"]{background:transparent;border:0;color:var(--cacao)}
.tok[data-lv="2"] .ico{background:var(--coral);border-color:var(--coral);color:#fff}
.tok .lv-txt{color:var(--coral-deep)}
.drops{gap:8px}
.drop{border-radius:22px;border:1.5px solid var(--stroke);background:var(--carte)}
.drop[aria-pressed="true"]{background:var(--rosep);border-color:var(--rosep)}
.day b{border-color:var(--stroke)}
.day.sel{background:var(--rosep);border-color:var(--rosep);box-shadow:none}
.legend{margin-top:12px}
textarea,input[type=text],input[type=date],input[type=time],select{border-radius:18px;border-color:var(--stroke);background:var(--carte)}
.chip{border-radius:30px;border-color:var(--stroke)}
.chip[aria-pressed="true"]{background:var(--coral);border-color:var(--coral)}
.seg{border-radius:30px;border-color:var(--stroke);background:var(--carte)}
.seg button[aria-selected="true"]{background:var(--rosep)}
.hold{background:var(--carte);border:1.5px solid var(--stroke)}
.hold .hb{stroke:var(--rosep)}
.moment-btn{border:0;background:var(--rose2);border-radius:22px;margin-top:14px}
.phrase-card .big{font-size:1.5625rem}
.pill,.pill:nth-child(1),.pill:nth-child(2){background:var(--carte);border:1.5px solid var(--stroke)}
.pill:nth-child(2){background:var(--rosep);border-color:var(--rosep)}
.geste{border-left:0}
.mode{border-radius:24px;border-color:var(--stroke)}
.mode[aria-pressed="true"]{background:var(--rosep);border-color:var(--rosep)}
.stage{border-radius:32px;border-color:var(--stroke)}
.btn.now{border-radius:30px;background:var(--carte);border:1.5px solid var(--stroke)}
.list li{border-color:var(--stroke)}
.check{border-color:var(--stroke)}
.rappel .ico{background:var(--rose2)}
.plan .slot{border-radius:18px;border-color:var(--stroke)}
.tabs{border-top:0;background:rgba(255,255,255,.92);box-shadow:0 -6px 24px rgba(121,49,32,.05)}
.tabs button[aria-selected="true"]{background:var(--rosep);color:var(--coral-deep)}
.tabs button[aria-selected="true"]::after{display:none}
.onb .cure-opt{border-radius:26px;border-color:var(--stroke)}
/* Sur un grand écran, l'app se présente comme un téléphone au centre, sans s'étirer */
@media (min-width:700px){
  .wrap{max-width:440px}
  .hdr{padding-left:calc(50% - 220px);padding-right:calc(50% - 220px)}
  .tabs{left:50%;right:auto;width:460px;transform:translateX(-50%);border-radius:24px 24px 0 0}
  .toast{bottom:100px}
}

/* ---------- v8.6 : nos vagues, en plus clair, et le corail pour le peps ----------
   La bulle ronde de chaque carte est remplacée par le bandeau ondulé des packs, en teinte claire, en bas de carte.
   Le corail #ed6e68 revient en accent vif : titres de section, icônes, anneau, onglet actif. */
:root{--vague-rosep:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 30' preserveAspectRatio='none'%3E%3Cpath d='M0 16C30 4 50 4 75 16S120 28 150 16 185 4 200 16V30H0Z' fill='%23f9e3e1'/%3E%3C/svg%3E");
       --vague-peche:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 30' preserveAspectRatio='none'%3E%3Cpath d='M0 16C30 4 50 4 75 16S120 28 150 16 185 4 200 16V30H0Z' fill='%23f39d81' fill-opacity='.22'/%3E%3C/svg%3E");
       --vague-corail:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 30' preserveAspectRatio='none'%3E%3Cpath d='M0 16C30 4 50 4 75 16S120 28 150 16 185 4 200 16V30H0Z' fill='%23ed6e68' fill-opacity='.18'/%3E%3C/svg%3E")}
.card::after,.phrase-card::after,.acu li::after,.hero::after{width:auto;height:26px;left:0;right:0;top:auto;bottom:0;border-radius:0;background:var(--vague-rosep) bottom/220px 26px repeat-x;opacity:1}
.hero::after{height:34px;background:var(--vague-peche) bottom/240px 34px repeat-x,var(--vague-corail) bottom 6px left/300px 30px repeat-x}
.card.soft::after{background:var(--vague-corail) bottom/220px 26px repeat-x;opacity:1}
.card,.phrase-card,.acu li{padding-bottom:30px}
.hero{padding-bottom:40px}
body::before{background:
  radial-gradient(60% 40% at 8% 6%, rgba(249,227,225,.6) 0, transparent 70%),
  radial-gradient(50% 35% at 96% 30%, rgba(246,203,168,.25) 0, transparent 70%), var(--cream)}
/* Le corail, pour le peps */
.card>.tech:first-child,.phrase-card>.tech:first-child,.hero>.tech:first-child{color:var(--coral)}
.tech{color:var(--coral-deep)}
.hero .tech{font-family:var(--font-tech);font-style:normal;font-size:0.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--coral)}
.ring .fg{stroke:var(--coral);opacity:1}
.ring .bg{stroke:var(--rosep)}
.hold{border-color:var(--coral)}
.hold .hf{stroke:var(--coral)}
.hold.done{background:var(--coral);color:#fff}
.hero-foot .link,.link{color:var(--coral);text-decoration-color:var(--coral)}
.moment-btn{background:var(--carte);border:1.5px solid var(--coral)}
.moment-btn .cabosse{color:var(--coral)}
.tile .fb{color:var(--coral);opacity:1}
.tile h3{color:var(--cacao)}
.phrase-card .deco{opacity:.9}
.pill,.pill:nth-child(1){border-color:var(--coral)}
.pill:nth-child(2){background:var(--coral);border-color:var(--coral);color:#fff}
.pill:nth-child(2)::before{color:rgba(255,255,255,.8)}
.phrase-card .seule{color:var(--coral-deep)}
.tok[data-lv="0"] .ico{border-color:var(--coral)}
.tok .ico svg{color:var(--coral)}
.tok[data-lv="2"] .ico svg{color:#fff}
.drop svg .o{stroke:var(--coral)}
.drop[aria-pressed="true"]{border-color:var(--coral)}
.day.today b{color:var(--coral);border-color:var(--coral)}
.day.sel{background:var(--coral);border-color:var(--coral);color:#fff}
.day.sel small{color:rgba(255,255,255,.85)}
.day.sel b{background:var(--carte);color:var(--coral);border-color:#fff}
.seg button[aria-selected="true"]{background:var(--coral);color:#fff}
.mode[aria-pressed="true"]{border-color:var(--coral)}
.btn.line{border-color:var(--coral);color:var(--coral-deep)}
.check[aria-checked="true"],.heart[aria-checked="true"]{background:var(--coral)}
.rappel .ico{background:var(--rosep);color:var(--coral)}
.plan .slot small{color:var(--coral)}
.rayon h4{color:var(--coral)}
.tabs button[aria-selected="true"]{background:var(--coral);color:#fff}
.stepper b{color:var(--coral)}
.geste h3{color:var(--cacao)}
.geste .plus{color:var(--coral-deep)}

/* Rappel de sauvegarde */
.abri{display:flex;align-items:center;gap:12px;background:var(--rosep);border-radius:22px;padding:12px 16px;margin-bottom:14px;font-size:0.875rem}
.abri .btn{width:auto}

/* v8.8 : mon jour, ma trousse, l'atelier */
.geste .miroir{font-family:var(--font-title);font-style:italic;font-size:1.1875rem;line-height:1.3;color:var(--cacao);margin:4px 0 12px}
.jourlist{list-style:none}
.jourlist li{padding:8px 0;border-top:1px solid var(--line);font-size:0.9062rem;color:var(--cacao-soft)}
.jourlist li b{display:block;font-family:var(--font-tech);font-size:0.6562rem;letter-spacing:.1em;text-transform:uppercase;color:var(--coral);font-weight:500;margin-bottom:2px}
.trousse .chip{font-size:0.8438rem}
.fiche{border-top:1px solid var(--line);padding:12px 0}
.fiche:first-child{border-top:0}
.fiche h4{font-family:var(--font-title);font-weight:500;font-size:1.125rem;margin-bottom:4px;display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.fiche h4 small{font-family:var(--font-tech);font-size:0.625rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.fiche p{font-size:0.9375rem;color:var(--cacao);margin-bottom:6px}
.fiche .pq{font-size:0.875rem;color:var(--cacao-soft)}
.fiche .plus{font-size:0.875rem;color:var(--coral-deep);font-style:italic;margin-top:6px}
.fiche .quand{font-size:0.8125rem;color:var(--muted);margin-top:8px;padding-left:10px;border-left:2px solid var(--line)}
.fiche .essaye{margin-top:8px}
.acc li{flex-direction:column;align-items:stretch;cursor:pointer}
.acc li .t b{display:flex;justify-content:space-between;gap:8px}
.acc li .t b small{font-family:var(--font-tech);font-size:0.625rem;letter-spacing:.08em;text-transform:uppercase;color:var(--coral);font-weight:500;white-space:nowrap}
.acc li .body{display:none;margin-top:8px;font-size:0.9062rem;color:var(--cacao-soft)}
.acc li.open .body{display:block}
.acc li .body p{margin-bottom:6px}
.acc li .body em{font-style:normal;font-weight:700;color:var(--cacao)}

/* Ma trousse : thèmes, ressentis, fiches */
.besoins li{cursor:pointer;align-items:center}
.besoins li .t b{font-family:var(--font-title);font-weight:500;font-size:1.0625rem}
.besoins li .n{font-family:var(--font-tech);font-size:0.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--coral);white-space:nowrap}
.besoins li .arr{color:var(--coral);font-size:1.25rem;padding-left:6px}
.trousse .retour{margin-bottom:8px}
.trousse h2{font-size:1.3125rem;margin-bottom:4px}
.seg{overflow-x:auto;-webkit-overflow-scrolling:touch}
.seg button{white-space:nowrap;padding:0 10px}

/* Le geste guidé */
.guide{position:fixed;inset:0;z-index:45;background:var(--cream);overflow:auto;padding:calc(20px + env(safe-area-inset-top)) 22px 40px;animation:in .4s var(--ease)}
.guide .inner{max-width:var(--container);margin:0 auto;text-align:center}
.guide .close{display:block;margin-left:auto;text-align:right}
.guide h1{font-size:1.625rem;margin:6px 0 10px}
.guide-stage{position:relative;width:200px;height:200px;margin:10px auto 14px}
.guide-stage .pulse i{width:200px;height:200px}
.guide-stage .pulse i:nth-child(3){width:120px;height:120px}
.pulse.soft.on i{animation-duration:4s;animation-timing-function:ease-in-out}
.guide-stage .ring.big{position:absolute;inset:34px;width:auto;height:auto;margin:0}
.guide-stage .ring.big .bg{stroke:#fff}
.guide-txt{font-family:var(--font-title);font-style:italic;font-size:1.25rem;line-height:1.35;color:var(--cacao);min-height:80px;margin-bottom:14px}
.guide .note{margin-top:16px;text-align:left}
.fiche .row.essaye .btn.sm:first-child{background:var(--coral);color:#fff;border-color:var(--coral)}

/* v8.9 : personnes, présence, choix manuel, placard */
.pers .ini{width:34px;height:34px;border-radius:50%;background:var(--rosep);color:var(--coral-deep);display:grid;place-items:center;font-family:var(--font-title);font-size:1rem;flex:none}
.pers .t span{display:block}
.pers .edit{display:none;width:100%;margin-top:8px}
.pers.open .edit{display:block}
.plan .slot{position:relative;padding-right:30px}
.plan .slot .pres{display:flex;gap:3px;margin-top:4px}
.plan .slot .pres i{width:18px;height:18px;border-radius:50%;background:var(--coral);color:#fff;font-size:0.625rem;font-style:normal;display:grid;place-items:center;font-family:var(--font-tech)}
.plan .slot .pres i.off{background:var(--carte);border:1px solid var(--line);color:var(--muted)}
.plan .slot .pen{position:absolute;right:6px;top:6px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:var(--muted);font-size:0.8125rem}
.plan .slot.manuel{border-style:dashed;border-color:var(--coral)}
.rayon.placard h4{color:var(--muted)}

/* Contenus Docteure : quand consulter, urgence visible */
.plain li.quand-li{margin-top:8px;padding:10px 12px 10px 18px;background:var(--rosep);border-radius:14px;color:var(--cacao)}
.plain li.quand-li::before{background:var(--coral-deep);top:16px;left:6px}
.urgence{background:var(--rosep);border:1.5px solid var(--coral);border-radius:16px;padding:12px 14px;font-size:0.9062rem;color:var(--cacao);margin:8px 0 12px}
.urgence b{color:var(--coral-deep)}
.fiche.urgent .quand{border-left:3px solid var(--coral);color:var(--cacao);font-size:0.9062rem;margin:0 0 10px;padding-left:10px}
.besoins li.urgent .n{color:var(--coral-deep)}

/* ---------- v8.11 : vagues des packs partout, zéro gris, écran large, veilleuse ---------- */
.card::after,.phrase-card::after,.acu li::after{height:34px;background:var(--vague-peche) bottom/240px 34px repeat-x,var(--vague-corail) bottom 6px left/300px 30px repeat-x}
.card,.phrase-card,.acu li{padding-bottom:38px}
/* Plus de gris dans les textes : le brun doux de la charte remplace le gris chaud partout où c'est du texte */
.note,.legend,.saved,.small.muted,.lead,.hero .date,.day small,.stage-txt small,.tabs button,.fiche .quand,.acu .trad,.acu .body,.jourlist li,.plain,.plan .slot.empty,.phrase-card .seule,.moment-btn small,.hdr .back,.guide .note,.list .t span,.tile p,.idee .badge,.tok .lv-txt,.ring-txt small,.hero-foot .small,.day{color:var(--cacao-soft)}
.fiche h4 small,.idee .badge,.plan .slot small,.tok .lv-txt,.acc li .t b small,.besoins li .n,.rayon h4{color:var(--coral-deep)}
.tok[data-lv="0"] .lv-txt{color:var(--coral-deep)}
.day:disabled,.cal .d:disabled{opacity:.3}
.tabs button[aria-selected="true"]{color:#fff}
/* Aucun ascenseur visible sur les barres d'onglets */
.seg{scrollbar-width:none;-ms-overflow-style:none}
.seg::-webkit-scrollbar{display:none}
/* Veilleuse : le téléphone posé, écran vers le plafond, une lueur qui respire. Aucun texte, aucune lumière vive. */
.veilleuse{position:fixed;inset:0;z-index:60;background:#000;display:grid;place-items:center;cursor:pointer}
.veilleuse .lueur{width:70vmin;height:70vmin;border-radius:50%;background:radial-gradient(circle,var(--cocon) 0,var(--equilibre) 40%,transparent 70%);opacity:.25;transform:scale(.6);transition:transform 5s ease-in-out,opacity 5s ease-in-out}
.veilleuse.in .lueur{transform:scale(1.15);opacity:.55}
.veilleuse small{position:absolute;bottom:26px;left:0;right:0;text-align:center;color:var(--cacao-soft);font-size:0.75rem;opacity:.5}
.fiche .lecture{font-size:0.8438rem;color:var(--cacao-soft);font-style:italic;margin-top:8px}
/* Le planning de présence dans Mon foyer */
.pres-grid{display:grid;grid-template-columns:auto repeat(7,1fr);gap:4px;align-items:center;margin-top:8px}
.pres-grid .h{font-family:var(--font-tech);font-size:0.625rem;letter-spacing:.06em;text-transform:uppercase;color:var(--coral-deep);text-align:center}
.pres-grid .who{font-size:0.8125rem;padding-right:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70px}
.pres-grid .cell{display:flex;flex-direction:column;gap:3px}
.pres-grid .cell button{height:22px;border-radius:8px;background:var(--coral);color:#fff;font-family:var(--font-tech);font-size:0.5625rem;letter-spacing:.04em}
.pres-grid .cell button.off{background:var(--carte);border:1px solid var(--line);color:var(--cacao-soft)}
/* Installer l'app */
.install{background:var(--rosep);border-color:transparent}
.install ol{margin:8px 0 0 18px;font-size:0.9062rem;color:var(--cacao)}
.install ol li{margin-bottom:4px}
/* Grand écran : l'app s'étale sur deux colonnes, la barre d'onglets passe en haut */
@media (min-width:900px){
  .wrap{max-width:1040px;padding:24px 28px 60px}
  .hdr{padding-left:calc(50% - 520px);padding-right:calc(50% - 520px)}
  .tabs{position:sticky;top:calc(var(--header-h) + env(safe-area-inset-top));bottom:auto;left:auto;right:auto;width:auto;transform:none;border-radius:0;box-shadow:none;border-bottom:1px solid var(--line);justify-content:center;gap:8px;padding:6px 0;order:-1}
  .tabs button{flex:0 0 auto;flex-direction:row;gap:8px;min-height:44px;padding:0 18px;font-size:0.8125rem;border-radius:30px}
  body{padding-bottom:40px;display:flex;flex-direction:column}
  main.wrap{order:1}
  .screen.on{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;align-items:start}
  .screen.on > h1,.screen.on > .lead,.screen.on > .seg,.screen.on > .mois-row,.screen.on > .week,.screen.on > .tiles,.screen.on > .abri,.screen.on > [id^="seg-"],.screen.on > .btn.now,.screen.on > .fleurs{grid-column:1/-1}
  .tiles{grid-template-columns:repeat(4,1fr)}
  [id^="seg-"]:not([hidden]){display:grid;grid-template-columns:1fr 1fr;gap:0 24px;align-items:start}
  [id^="seg-"] > .lead,[id^="seg-"] > .chips,[id^="seg-"] > .modes,[id^="seg-"] > .row,[id^="seg-"] > .timer,[id^="seg-"] > .durees,[id^="seg-"] > .note,[id^="seg-"] > input,#seg-idees > .card,#seg-atelier > .card,#seg-astuces > .card,#seg-trousse > .card,#seg-acu > .acu,#seg-acu > .note{grid-column:1/-1}
  #seg-respirer > .stage,#seg-danser > .stage,#seg-etirer > .card,#seg-respirer > .modes,#seg-respirer > #durees,#seg-danser > #tempos,#seg-danser > #danseMusique{grid-column:1/-1;width:100%;justify-self:center}
  #seg-respirer > .stage,#seg-danser > .stage{max-width:560px}
  .stage{width:100%}
  .acu{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .acu li{margin-bottom:0}
  .toast{bottom:auto;top:calc(var(--header-h) + 70px)}
  .onb .inner{max-width:560px}
}

.moment-btn img.cabosse{width:36px;height:36px;border-radius:50%}

/* Document « Ce que j'ai noté » : sobre, noir sur blanc, survit à la photocopie. Même feuille pour l'aperçu à l'écran (.preview) et l'impression. */
#doc{display:none}
.docstyle{font-family:Georgia,"Times New Roman",serif;color:#111;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.docstyle .dh{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:2px solid #111;padding-bottom:6pt;margin-bottom:10pt}
.docstyle h1{font-family:Georgia,serif;font-size:19pt;font-weight:400;margin:0 0 3pt;letter-spacing:0}
.docstyle .lead{font-style:italic;font-size:10.5pt;color:#333;margin:0}
.docstyle .dbrand{text-align:right;font-size:11pt;line-height:1.1;color:#111}
.docstyle .dbrand small{font-style:italic;font-size:9pt;color:#555}
.docstyle h2{font-family:Georgia,serif;font-size:12.5pt;font-weight:700;margin:9pt 0 3pt;letter-spacing:0;border:0}
.docstyle h3{font-size:10pt;font-weight:700;margin:0 0 3pt;text-transform:capitalize}
.docstyle .ess{display:grid;grid-template-columns:1.4fr 1fr;gap:12pt;border:1px solid #111;border-radius:4pt;padding:6pt 10pt;margin-top:6pt}
.docstyle .ess h2{margin:0 0 4pt}
.docstyle .ess ul{margin:0 0 0 12pt;font-size:10pt}
.docstyle .ess li{margin-bottom:2pt}
.docstyle .ctx p{font-size:9.5pt;margin:0 0 8pt;color:#333;letter-spacing:.02em}
.docstyle .hint{font-size:9pt;color:#444;margin:0 0 5pt}
.docstyle .strips{display:flex;flex-direction:column;gap:2pt}
.docstyle .strip{display:grid;grid-template-columns:110pt 1fr 100pt;align-items:center;gap:6pt;font-size:10pt}
.docstyle .strip.regles{margin-top:4pt;padding-top:4pt;border-top:1px solid #999}
.docstyle .strip .lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.docstyle .cells{display:flex;gap:1.5pt}
.docstyle .cells .histo{width:100%;height:18pt;display:block}
.docstyle .strip.regles .cells .histo{height:14pt}
.docstyle .cells i,.docstyle .legend i{display:inline-block;flex:1;min-width:4pt;max-width:12pt;height:11pt;border:1px solid #777;background:var(--carte);border-radius:2pt}
.docstyle .legend i{width:10pt;flex:none;vertical-align:middle;margin:0 2pt 0 6pt}
.docstyle i.n{border-style:dotted;border-color:#bbb}
.docstyle i.n0{background:var(--carte);border-color:#111}
.docstyle i.n1{background:#9a9a9a;border-color:#777}
.docstyle i.n1.light{background:#d4d4d4}
.docstyle i.n2{background:#111;border-color:#111}
.docstyle .strip.ruler{margin-top:1pt}
.docstyle .strip.ruler .cells i{border:0;height:9pt;position:relative;background:none;overflow:visible}
.docstyle .strip.ruler .cells i u{position:absolute;left:0;top:0;text-decoration:none;font-size:7pt;color:#555;white-space:nowrap;border-left:1px solid #999;padding-left:2pt;line-height:9pt}
.docstyle .cnt{font-size:9pt;color:#333;text-align:right;white-space:nowrap}
.docstyle .cnt b{font-weight:700;color:#111}
.docstyle .legend{font-size:8.5pt;color:#444;margin:5pt 0 0}
.docstyle .cals{display:flex;gap:10pt;flex-wrap:wrap}
.docstyle .cal{flex:1;min-width:150pt}
.docstyle .grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1.5pt}
.docstyle .grid s{text-decoration:none;font-size:7.5pt;color:#666;text-align:center}
.docstyle .grid span{position:relative;height:15pt;border:1px solid #ddd;border-radius:2pt;font-size:8pt;padding:1pt 2pt;color:#aaa;background:var(--carte)}
.docstyle .grid span.in{color:#111;border-color:#999}
.docstyle .grid span.r{background:#d9d9d9}
.docstyle .grid span.nt::after{content:"";position:absolute;right:0;top:0;border:4pt solid transparent;border-top-color:#111;border-right-color:#111}
.docstyle .grid span b{font-weight:400}
.docstyle .grid span em{position:absolute;left:2pt;bottom:0;font-style:normal;font-size:8pt;letter-spacing:-1pt;color:#111}
.docstyle ul.notes,.docstyle ul.qs{margin:0 0 0 12pt;font-size:10pt}
.docstyle ul.notes li{margin-bottom:2pt}
.docstyle ul.notes b{font-weight:700;margin-right:4pt}
.docstyle ul.qs li{margin-bottom:2pt}
.docstyle .foot{margin-top:9pt;font-size:8pt;color:#444;border-top:1px solid #999;padding-top:5pt}
.preview{background:var(--carte)}
@media print{
  @page{size:A4;margin:11mm 12mm 12mm}
  body{background:var(--carte);color:#000;padding:0;font-size:11pt}
  body::before,body::after{display:none}
  .hdr,.tabs,.wrap,.toast,.onb,.moment{display:none!important}
  #doc{display:block;padding:0}
}

/* ===================== v8.14 : Apaiser, corps et esprit ===================== */
#seg-apaiser .card.tirage h3{ margin-bottom:2px }
#seg-apaiser .card.tirage p.lecture{ margin:8px 0 10px }
#seg-apaiser .fiche b{ display:block; margin-bottom:4px }

.lien{ background:none; border:0; padding:4px 0; font:inherit; font-size:.86rem;
  color:var(--coral-deep); text-decoration:underline; cursor:pointer }
.lien:hover{ color:var(--cacao) }

.atelier textarea{ width:100%; box-sizing:border-box; border:1px solid var(--line);
  border-radius:12px; padding:10px 12px; background:var(--cream); color:var(--cacao);
  font:inherit; font-size:.95rem; line-height:1.5; resize:vertical }
.atelier textarea:focus{ outline:2px solid color-mix(in srgb, var(--coral), #fff 50%); outline-offset:1px }

#penseeMur{ margin-top:14px }
.duo{ margin:10px 0 0; padding-top:10px; border-top:1px solid var(--line); animation:duoIn .32s ease both }
.duo:first-child{ border-top:0; padding-top:0 }
.duo p{ margin:0 0 6px; font-size:.93rem; line-height:1.55 }
.duo-a{ color:var(--cacao-soft); font-style:italic;
  background:var(--cream-deep); border-radius:12px 12px 12px 3px; padding:9px 12px }
.duo-b{ color:var(--cacao); background:var(--rosep);
  border-left:3px solid var(--coral); border-radius:3px 12px 12px 12px; padding:9px 12px; margin-left:14px }
@keyframes duoIn{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }

@media (min-width:900px){
  .duo{ display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:start }
  .duo p{ margin:0 }
  .duo-b{ margin-left:0 }
  .duo .lien{ grid-column:1/-1 }
}


/* ===================== v8.18 : corrections d'affichage ===================== */
/* Un élément masqué doit le rester, quelles que soient les règles de display posées plus haut. */
[hidden]{display:none !important}

@media (min-width:900px){
  /* Le bloc du jour et les règles d'acupression se lisent mieux sur toute la largeur. */
  #s-jour.on > #gesteCard{grid-column:1/-1}
  #seg-acu > .card{grid-column:1/-1}
  #seg-apaiser > .card.atelier{grid-column:1/-1}
}


/* ===================== v8.20 : mode nuit =====================
   Aucune couleur nouvelle : le fond prend le cacao de la charte, le texte prend le crème,
   et les nuances intermédiaires sont des mélanges des deux. Pensé pour les réveils nocturnes,
   quand ouvrir un écran crème en pleine nuit réveille pour de bon. */
html[data-nuit="1"]{
  --cream:#793120;
  --cream-deep:color-mix(in srgb,#793120,#fbf7f1 10%);
  --carte:color-mix(in srgb,#793120,#fbf7f1 8%);
  --line:color-mix(in srgb,#793120,#fbf7f1 26%);
  --cacao:#fbf7f1;
  --cacao-soft:color-mix(in srgb,#fbf7f1,#793120 18%);   /* 5,9:1 sur carte, lisible */
  --muted:color-mix(in srgb,#fbf7f1,#793120 25%);        /* 4,6:1 sur carte, au-dessus du seuil de lecture */
  --rosep:color-mix(in srgb,#793120,#fbf7f1 16%);
  --coral:color-mix(in srgb,#ed6e68,#fbf7f1 55%);         /* corail éclairci, 4,5:1 sur carte pour les liens ; la charte autorise d'éclaircir */
  --coral-deep:color-mix(in srgb,#ed6e68,#fbf7f1 55%);
  --shadow:none;
  --shadow-soft:none;
  color-scheme:dark;
}
html[data-nuit="1"] body{background:var(--cream)}
html[data-nuit="1"] .btn:not(.ghost):not(.line):not(.link){color:#793120}
html[data-nuit="1"] .tabs button[aria-selected="true"]{color:#793120}
html[data-nuit="1"] .bgimg,html[data-nuit="1"] .fleurs{opacity:.35}
html[data-nuit="1"] img.cabosse,html[data-nuit="1"] .tile img{opacity:.9}

/* Le document destiné au médecin reste noir sur blanc, en mode nuit comme à l'impression. */
#doc,#doc *,.docstyle,.docstyle *{--carte:#fff;--cream:#fff;--cacao:#111}
@media print{ html[data-nuit="1"]{--carte:#fff;--cream:#fff;--cacao:#111} }


/* ===================== v8.23 : recettes maison, pas à pas ===================== */
.guide.recette .inner h1{font-size:1.5rem;margin:4px 0 6px}
.guide.recette .card{text-align:left;margin:12px 0}
.etapes{margin:8px 0 0;padding-left:0;list-style:none;counter-reset:etape}
.etapes li{position:relative;padding:8px 0 8px 40px;border-top:1px solid var(--line);line-height:1.5;counter-increment:etape}
.etapes li:first-child{border-top:0}
.etapes li::before{content:counter(etape);position:absolute;left:0;top:8px;width:28px;height:28px;border-radius:50%;background:var(--coral);color:#fff;font-family:var(--font-tech);font-size:0.8125rem;display:flex;align-items:center;justify-content:center}
html[data-nuit="1"] .etapes li::before{color:#793120}
#recetteIngr li{display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-top:1px solid var(--line)}
#recetteIngr li:first-child{border-top:0}
#recetteIngr li b{white-space:nowrap;font-family:var(--font-tech);font-weight:500}
.idee-badge{display:inline-block;font-family:var(--font-tech);font-size:0.625rem;letter-spacing:.08em;text-transform:uppercase;color:var(--coral-deep);border:1px solid var(--coral);border-radius:20px;padding:1px 7px;margin-left:6px;vertical-align:middle}

/* ---------- v8.24 : moments, aide, lettre, cartes, essais, nuit profonde, silence ---------- */
.aide-links{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 12px}
.aide-links .link{color:var(--coral)}
#aideCard .ctx{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
#aideCard .chip[aria-pressed="true"]{background:var(--coral);color:#fff;border-color:var(--coral)}
.overlay-aide{position:fixed;inset:0;z-index:60;background:var(--cream);padding:28px 20px;overflow:auto}
.overlay-aide .inner{max-width:520px;margin:0 auto}
.overlay-aide h2{font-family:Fraunces,serif;font-variation-settings:"WONK" 0;font-size:1.6rem;margin:6px 0 14px}
.overlay-aide .num{display:block;background:var(--carte);border:2px solid var(--coral);border-radius:16px;padding:16px;margin:10px 0;text-decoration:none;color:inherit}
.overlay-aide .num b{font-size:1.7rem;display:block;color:var(--coral)}
.overlay-aide .num small{display:block;margin-top:4px}
.silence{position:fixed;inset:0;z-index:70;background:var(--cream);display:flex;align-items:center;justify-content:center;padding:32px;text-align:center;cursor:pointer}
.silence p{font-family:Fraunces,serif;font-variation-settings:"WONK" 0;font-size:clamp(1.6rem,6vw,2.6rem);line-height:1.25;color:var(--cacao);max-width:600px}
.silence small{position:absolute;bottom:22px;left:0;right:0;opacity:.6}
#lettreIn,#carteIn{width:100%;min-height:120px}
.essai-row{gap:6px;flex-wrap:wrap;margin-top:6px}
#essaisListe li{display:block;padding:10px 0;border-bottom:1px solid var(--line)}
#essaisListe .t small{display:block;color:var(--muted)}
.docstyle .releve{width:100%;border-collapse:collapse;font-size:.78rem;margin:8px 0 16px}
.docstyle .releve th,.docstyle .releve td{border:1px solid #bbb;padding:3px 5px;vertical-align:top;text-align:left}
.docstyle .releve th{background:#f2f2f2}
.docstyle .v824 h2{margin-top:18px}
/* nuit profonde : fond cacao mêlé de noir, réservé au déclenchement automatique la nuit */
html[data-nuit-profond="1"]{--cream:color-mix(in srgb,#793120,#000 72%);--carte:color-mix(in srgb,#793120,#000 55%)}
html[data-nuit-profond="1"] body{background:var(--cream)}
@media (min-width:900px){ #aideCard,#cartesCard,#essaisCard,#lettreCard{grid-column:1/-1} }

/* ---------- v8.25 : Organiser en quatre volets, fin de cure sur l'accueil ---------- */
#s-organiser .card.org-off{display:none}
#btnNouvelleCure{margin-top:10px}
.hero.termine .hold{opacity:.45;pointer-events:none}

/* ---------- v8.27 : l'installation, premier geste ---------- */
.abri-install{border:2px solid var(--coral);margin-bottom:14px}
.abri-install ol{margin:8px 0 0 18px;padding:0}

/* ---------- v8.29 : la porte d'accès ---------- */
.onb.acces{z-index:55}
.onb.acces input{font-size:1.125rem;letter-spacing:.04em}

/* ---------- v8.31 : Souffler en deux portes, l'arbre, les essais lisibles, l'aperçu du document ---------- */
.entree{display:grid;gap:12px;margin:10px 0 4px}
@media (min-width:700px){ .entree{grid-template-columns:1fr 1fr} }
.entree-carte{display:flex;flex-direction:column;gap:6px;text-align:left;padding:22px 20px;border-radius:24px;background:var(--coral);color:#fff;border:0;box-shadow:var(--shadow)}
.entree-carte b{font-family:Fraunces,serif;font-variation-settings:"WONK" 0;font-size:1.375rem;font-weight:600;line-height:1.2}
.entree-carte small{font-size:0.875rem;opacity:.95}
.entree-carte .tech{color:#fff;opacity:.9}
.entree-carte.souci{background:var(--carte);color:var(--cacao);border:1.5px solid var(--coral)}
.entree-carte.souci .tech{color:var(--coral)}
html[data-nuit="1"] .entree-carte{color:#793120}
.overlay-aide.souci h2{font-family:Fraunces,serif;font-variation-settings:"WONK" 0;font-size:1.5rem;margin:8px 0 12px}
.souci-choix{display:grid;gap:10px;margin-top:14px}
.souci-opt{text-align:left;padding:16px 18px;border-radius:18px;background:var(--carte);border:1.5px solid var(--line);font-size:1rem;color:var(--cacao)}
.souci-opt:active{border-color:var(--coral)}
ul.signes{margin:6px 0 0 20px}
ul.signes li{margin:4px 0}
.souci-fin{padding:18px;border-radius:22px;background:var(--carte);border:1.5px solid var(--line)}
.souci-fin.urgence{border:2px solid var(--coral)}
.souci-fin.urgence h2{color:var(--coral)}
.souci-actions{display:grid;gap:10px;margin-top:14px}
.souci-actions .btn{text-align:center;text-decoration:none}
#recetteIngr li{position:relative;padding-left:20px}
#recetteIngr li::before{top:50%;margin-top:-4px}
#essaisListe li::before{display:none}
#essaisListe li.essai{display:grid;grid-template-columns:48px 1fr;gap:4px 12px;align-items:start;padding:14px 0;border-bottom:1px solid var(--line)}
.essai-ico{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--cacao),#fff 88%)}
.essai-ico svg,.essai-b svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.essai.mieux .essai-ico{background:var(--coral);color:#fff}
.essai.pareil .essai-ico{background:color-mix(in srgb,var(--cacao),#fff 80%);color:var(--cacao)}
.essai.pire .essai-ico{background:var(--cacao);color:#fff}
.essai.aucun .essai-ico{color:var(--muted)}
.essai.fini{opacity:.6}
.essai-t b{display:block;font-size:1rem}
.essai-t span{display:block;font-weight:600;color:var(--cacao)}
.essai.mieux .essai-t span{color:var(--coral)}
.essai-t small{display:block;color:var(--muted)}
.essai-boutons{grid-column:2;display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px}
.essai-b{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);background:var(--carte);display:grid;place-items:center;color:var(--cacao)}
.essai-sup{grid-column:2;justify-self:start;font-size:0.8125rem}
/* aperçu du document : il tient dans l'écran du téléphone */
.preview.docstyle{overflow-x:hidden;font-size:0.8125rem}
@media (max-width:600px){
  .preview.docstyle .dh{flex-wrap:wrap;gap:6px}
  .preview.docstyle .ess{grid-template-columns:1fr}
  .preview.docstyle h1{font-size:18pt}
  .preview.docstyle table{display:block;overflow-x:auto;white-space:nowrap}
  .preview.docstyle svg{max-width:100%}
}

/* v8.32 : arbre corrigé */
.souci-aide{font-size:1rem;margin:0 0 10px;color:var(--cacao)}
.souci-rappel{background:var(--rose,#F9E3E1);border-left:3px solid var(--coral);padding:10px 12px;border-radius:12px;font-weight:600;margin:0 0 10px}
.souci-doux{font-style:italic;margin-top:10px}
.overlay-aide.souci ul.signes{padding-left:18px;margin:6px 0 4px;line-height:1.45}
.overlay-aide.souci ul.signes li{margin:4px 0}
.souci-fin p{margin:0 0 10px}

/* v8.33 */
#jourRituel{display:none}
.souci-etape{font-size:0.75rem;color:var(--muted);margin:0 0 4px}
.souci-groupes{display:grid;gap:8px;margin:10px 0 4px}
.souci-grp{border:1.5px solid var(--line);border-radius:16px;background:var(--carte);overflow:hidden}
.souci-grp>button.tete{width:100%;text-align:left;padding:13px 16px;font-size:1rem;color:var(--cacao);background:none;border:0;display:flex;justify-content:space-between;align-items:center;gap:10px}
.souci-grp>button.tete::after{content:"+";font-size:1.25rem;color:var(--coral)}
.souci-grp.open>button.tete::after{content:"\2212"}
.souci-grp .corps{display:none;padding:0 16px 12px}
.souci-grp.open .corps{display:block}
.souci-grp .corps ul.signes{margin:0 0 10px;padding-left:18px}
.souci-grp .corps .btn{width:100%}
.souci-sinon{display:grid;gap:10px;margin-top:12px}
.lien-card{display:flex;justify-content:space-between;align-items:center;width:100%;text-align:left;font:inherit;color:var(--cacao);cursor:pointer}
.lien-card span{color:var(--muted);font-size:0.8125rem}
.lien-card::after{content:"\203A";font-size:1.375rem;color:var(--coral);margin-left:8px}
.tache-opts{margin:8px 0}
.tache-opts summary{font-size:0.8125rem;color:var(--coral);cursor:pointer}
.tache-grp{margin-top:12px}
.tache-grp h4{font-family:"Space Grotesk",sans-serif;font-size:0.6875rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.tache{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-top:1px solid var(--line)}
.tache .check{flex:0 0 26px;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--coral);background:none;color:#fff;font-size:0.875rem}
.tache.fait .check{background:var(--coral)}
.tache .t{flex:1;font-size:0.9375rem}
.tache.fait .t{text-decoration:line-through;color:var(--muted)}
.tache .quand{display:block;font-size:0.75rem;color:var(--muted)}
.tache.retard .quand{color:var(--coral)}
.tache .acts{display:flex;gap:6px}
.tache .acts button{background:none;border:0;color:var(--coral);font-size:0.75rem;padding:2px 4px}

/* v8.40 : mode transport, écran sombre, sans son */
.transport{position:fixed;inset:0;z-index:61;background:#1a0c08;color:rgba(251,247,241,.72);display:grid;place-items:center;padding:24px;text-align:center}
.tp-in{max-width:360px;display:grid;gap:14px;justify-items:center}
.tp-mode{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;opacity:.6;margin:0}
.tp-pulse{width:56px;height:56px;border-radius:50%;background:rgba(243,157,129,.35);transition:transform 1s ease-in-out,background .4s}
.tp-pulse.in{transform:scale(1.6);background:rgba(243,157,129,.6)}
.tp-pulse.hold{transform:scale(1.6);background:rgba(243,157,129,.45)}
.tp-pulse.out{transform:scale(1)}
.tp-phase{font-family:Fraunces,serif;font-variation-settings:"WONK" 0;font-size:1.4rem;margin:0;color:rgba(251,247,241,.85)}
.tp-timer{font-size:.85rem;opacity:.55;margin:0}
.tp-legende{font-size:.82rem;line-height:1.5;opacity:.6;margin:0}
.transport .btn.line{border-color:rgba(251,247,241,.35);color:rgba(251,247,241,.8);background:transparent}

/* v8.42 : taille du texte. Les tailles de police sont en rem (même rendu qu'avant à 100 %) ;
   le réglage « Taille du texte » agrandit tout le texte de l'app d'un geste. */
html[data-texte="2"]{font-size:112.5%}
html[data-texte="3"]{font-size:125%}
.cc-taille .chips{display:flex;gap:8px;flex-wrap:wrap}
.cc-taille .chip[aria-pressed="true"]{background:var(--coral);color:#fff;border-color:var(--coral)}
.fs-tel{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.cc-alerte{margin:10px 0 0;padding:10px 12px;border-radius:12px;background:var(--rose-pale,#f9e3e1)}

/* v8.43 : règles probables dans le calendrier (pointillé corail, jamais plein : c'est une estimation) */
.cal .d.est,.day.est{border:2px dashed var(--coral)!important;opacity:1!important}
.cal .d.est:disabled,.day.est:disabled{color:var(--cacao-soft)}
.estleg{display:flex;align-items:center;gap:8px}
.estpuce{flex:0 0 14px;height:14px;border-radius:4px;border:2px dashed var(--coral)}