:root{--surface:#1b0b2e;--raised:#2a1446;--tint:#3a1f5f;--ink:#f7f0ff;--muted:#cdbbe8;--brand:#f2c14e;--on-brand:#1b0b2e;--nuit:#12061f;--on-nuit:#f7f0ff;--safran:#f2c14e;--on-safran:#1b0b2e;--emeraude:#6ee7b7;--on-emeraude:#0b2a1f;--braise:#ff9b71;--on-braise:#1b0b2e;--lilas:#4d2a82;--on-lilas:#f7f0ff;--line:#4a2d72;--line-strong:#9a7fc4;--focus:#f2c14e;--erreur:#ffaa99;--or-clair:#ffe08a;--titre:"Fraunces",Georgia,serif;--texte:"DM Sans",system-ui,sans-serif;color-scheme:dark}
[hidden]{display:none!important}
*{box-sizing:border-box}
body{margin:0;background:var(--surface);color:var(--ink);font:400 17px/27px var(--texte);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
h1,h2,h3,p,figure{margin:0}
h1,h2,h3{font-family:var(--titre);font-weight:600;text-wrap:balance}
h1{font-size:30px;line-height:36px;color:var(--or-clair)}h2{font-size:23px;line-height:29px}
#app{max-width:480px;margin:0 auto;padding-block:16px 104px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:grid;gap:16px}
#app>*{min-width:0}
.demo{background:var(--nuit);color:var(--on-nuit);font-size:14px;line-height:20px;padding-block:8px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.demo button{background:none;border:1px solid var(--on-nuit);color:var(--on-nuit);border-radius:999px;font:500 14px/20px var(--texte);padding:4px 12px;cursor:pointer}
.haut{display:flex;justify-content:space-between;align-items:center;gap:12px}
.bourse{display:inline-flex;align-items:center;gap:8px;background:var(--safran);color:var(--on-safran);padding:8px 12px;border-radius:999px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.carte{background:var(--raised);border:1px solid var(--line);border-radius:24px;padding:16px;display:grid;gap:12px}
.sur{font-size:14px;line-height:20px;font-weight:500;color:var(--muted)}
.btn{font:700 16px/20px var(--texte);min-height:48px;padding:12px 24px;border-radius:999px;border:2px solid transparent;cursor:pointer;background:var(--brand);color:var(--on-brand);justify-self:start}
.btn.lune{background:var(--safran);color:var(--on-safran)}
.btn.deux{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn.lien{display:inline-block;text-decoration:none;text-align:center}
.btn:disabled{opacity:.55;cursor:not-allowed}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.ok{display:inline-flex;align-items:center;gap:8px;color:var(--emeraude);font-weight:700}
.cit{background:var(--tint);border-radius:24px;padding:24px;display:grid;gap:8px}
.cit p{font:italic 400 22px/31px var(--titre)}
.ligne{display:grid;grid-template-columns:minmax(0,108px) 1fr 52px;gap:12px;align-items:center}
.ligne b{overflow:hidden;text-overflow:ellipsis}
.jauge{height:12px;border-radius:999px;background:var(--tint);overflow:hidden}
.jauge i{display:block;height:100%;background:var(--emeraude);border-radius:999px}
.num{font-variant-numeric:tabular-nums;text-align:right}
.tuiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.tuile{display:grid;gap:12px;align-content:space-between;background:var(--lilas);color:var(--on-lilas);border-radius:16px;padding:16px;min-height:128px;border:0;text-align:left;font:inherit;cursor:pointer}
.tuile.s{background:var(--safran);color:var(--on-safran)}
.tuile b{font:600 19px/24px var(--titre)}
.tuile small{font-size:14px;line-height:20px;font-weight:500}
.tuile:disabled{cursor:not-allowed;opacity:.7}
nav.bas{position:fixed;left:0;right:0;bottom:0;background:var(--raised);border-top:1px solid var(--line);display:grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:6px max(8px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px))}
nav.bas a{color:var(--muted);text-decoration:none;text-align:center;font-size:14px;line-height:20px;font-weight:500;padding:8px 2px;border-radius:12px}
nav.bas a[aria-current]{color:var(--ink);background:var(--tint);font-weight:700}
.champ{display:grid;gap:4px}
.champ label{font-weight:700;font-size:14px;line-height:20px}
.champ small{font-size:14px;line-height:20px;color:var(--muted)}
.champ input{font:400 16px/24px var(--texte);min-height:48px;padding:0 12px;border:1px solid var(--line-strong);border-radius:8px;background:var(--raised);color:var(--ink);width:100%}
.coche{display:grid;grid-template-columns:24px 1fr;gap:8px;font-size:14px;line-height:20px}
.coche input{width:20px;height:20px;margin:0;accent-color:var(--brand)}
.err{color:var(--erreur);font-weight:500}
.msg{color:var(--emeraude);font-weight:500}
.hero{background:var(--nuit);color:var(--on-nuit);border-radius:24px;padding:24px;display:grid;gap:12px;overflow:hidden}
.hero h1{font-size:40px;line-height:44px}
.hero svg{width:88px;height:88px}
.lien-t{background:none;border:0;color:var(--brand);font:500 14px/20px var(--texte);text-decoration:underline;cursor:pointer;padding:4px 0;justify-self:start}
.lunes{display:grid;gap:0}
.lunes div{display:grid;grid-template-columns:28px 1fr auto;gap:8px;padding:10px 0;border-bottom:1px solid var(--line)}
.lunes div:last-child{border:0}
.lunes .now{font-weight:700}
.mem{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.mem button{aspect-ratio:1;border:0;border-radius:12px;background:var(--nuit);color:var(--safran);font:600 24px/1 var(--titre);cursor:pointer;display:grid;place-items:center;padding:6px}
.mem button.vu{background:var(--lilas);color:var(--on-lilas)}
.mem svg{width:100%;height:100%;max-width:44px}
.lettres{display:flex;flex-wrap:wrap;gap:8px}
.lettres button{width:44px;height:48px;border-radius:8px;border:1px solid var(--line-strong);background:var(--raised);color:var(--ink);font:600 20px/1 var(--titre);cursor:pointer}
.lettres button:disabled{opacity:.3}
.rep{font:600 28px/36px var(--titre);letter-spacing:4px;min-height:36px}
.cartes3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.cartes3 button{aspect-ratio:3/4;border-radius:12px;border:0;background:var(--brand);color:var(--on-brand);font:600 28px/1 var(--titre);cursor:pointer}
.adm{display:grid;gap:12px}
.adm .p{display:grid;gap:4px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.adm .p:last-child{border:0;padding:0}
.adm span,.adm b{overflow-wrap:anywhere}
.pied{font-size:14px;line-height:20px;color:var(--muted)}
.etat{display:inline-block;font-size:14px;line-height:20px;font-weight:700;padding:2px 10px;border-radius:999px;justify-self:start;background:var(--tint);color:var(--ink)}
.etat.on{background:var(--emeraude);color:var(--on-emeraude)}
@media (min-width:720px){h1{font-size:38px;line-height:44px}}
@media (prefers-reduced-motion:no-preference){.gagne{animation:g .5s ease}@keyframes g{from{transform:scale(.96)}to{transform:none}}}

.champ textarea,#tx{font:400 16px/24px var(--texte);padding:10px 12px;border:1px solid var(--line-strong);border-radius:8px;background:var(--raised);color:var(--ink);width:100%;resize:vertical}
.pre{white-space:pre-wrap;overflow-wrap:anywhere}
a.tuile{text-decoration:none;min-height:88px}
.suivi{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px}
.suivi i{aspect-ratio:1;border-radius:50%;background:var(--tint);display:block}
.suivi i.f{background:var(--emeraude)}
.suivi i.a{outline:2px solid var(--ink);outline-offset:1px}
.bougie{background:var(--nuit);border:0;border-radius:16px;padding:16px;cursor:pointer;justify-self:center;width:120px}
.bougie svg{width:64px;height:96px;display:block;margin:auto}
.bougie .ci{fill:var(--lilas)}.bougie .fl{fill:var(--line-strong);opacity:.35}
.bougie.on .fl{fill:var(--safran);opacity:1}
.souffle{display:grid;justify-items:center;gap:12px;padding:8px 0}
#sf{width:64px;height:64px;border-radius:50%;background:var(--lilas);transition:transform 4s ease-in-out}
#sf.in{transform:scale(2)}
.souffle p{font:600 19px/24px var(--titre);margin-top:24px}
.minu{font:600 48px/56px var(--titre);text-align:center;font-variant-numeric:tabular-nums}
.regles{background:var(--tint);border-radius:16px;padding:12px 16px;font-size:14px;line-height:20px}
.regles summary{font-weight:700;cursor:pointer;min-height:24px}
.regles p{margin-top:8px}
.fil{display:grid;gap:12px}
.msg-t{background:var(--raised);border:1px solid var(--line);border-radius:16px;padding:12px;display:grid;gap:6px;max-width:88%;justify-self:start;min-width:0}
.msg-t.moi{background:var(--tint);border-color:transparent;justify-self:end}
.msg-t img{border-radius:8px;width:100%;display:block}
.m-h{display:flex;gap:8px;justify-content:space-between;align-items:baseline;flex-wrap:wrap}
.m-a{display:flex;gap:12px}
.m-a button{background:none;border:0;padding:4px 0;color:var(--muted);font:500 14px/20px var(--texte);text-decoration:underline;cursor:pointer}
.envoi{position:sticky;bottom:calc(48px + env(safe-area-inset-bottom,0px));background:var(--surface);padding:8px 0;display:grid;gap:4px}
.env-l{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:end}
.ajout{min-height:48px;display:grid;place-items:center;padding:0 12px;border:2px solid var(--line-strong);border-radius:999px;font-weight:700;cursor:pointer}
#tx{min-height:48px;resize:none}
.env-b{padding:12px 16px}
#app{padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))}
@media (prefers-reduced-motion:reduce){#sf{transition:none}}
.emb{width:72px;height:72px}
.eyebrow{font-size:14px;line-height:20px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--safran)}
.hero .h1{font-size:30px;line-height:36px}
.rang{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.btn.fantome{background:transparent;color:var(--on-nuit);border-color:var(--on-nuit)}
.liste{margin:0;padding-left:20px;display:grid;gap:8px}
.offre{border:2px solid var(--safran)}
.deux-col{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.naissance{border:1px solid var(--line);border-radius:16px;padding:12px;margin:0;display:grid;gap:12px;min-width:0}
.naissance legend{font-weight:700;padding:0 4px}
.lieux{list-style:none;margin:0;padding:0;border:1px solid var(--line-strong);border-radius:8px;overflow:hidden}
.lieux button{width:100%;text-align:left;background:var(--raised);color:var(--ink);border:0;border-bottom:1px solid var(--line);padding:12px;font:inherit;cursor:pointer}
.lieux li:last-child button{border:0}
.lieux .pied{padding:12px}
.centre{text-align:center}
.recolte.a-faire{border:2px solid var(--safran)}
.recolte h2{font-size:32px;line-height:38px}
.anniv{background:var(--brand);color:var(--on-brand);border-radius:24px;padding:20px;display:grid;gap:8px}
.anniv .sur{color:inherit;opacity:.85}
.lien-t.clair{color:inherit}
.sect{margin-top:8px}
.aspect{border-left:0;background:var(--tint);border-radius:12px;padding:10px 12px;display:grid;gap:4px}
.aspect.tendu{background:var(--surface);border:1px solid var(--line-strong)}
.roue{width:100%;max-width:320px;display:block;margin:0 auto}
.r-fond{fill:var(--nuit)}.r-trait{fill:none;stroke:#8b7a90;stroke-width:1}
.r-signe{font-size:15px;text-anchor:middle;dominant-baseline:central}
.r-feu{fill:#ff8a5c}.r-terre{fill:#6fe0bf}.r-air{fill:#d9c8ff}.r-eau{fill:#8fc8ff}
.r-astre{fill:#f5b82e;font-size:16px;text-anchor:middle;dominant-baseline:central}
.r-axe{stroke:#f5b82e;stroke-width:1;opacity:.7}.r-axe2{stroke:#f5b82e;stroke-width:1;stroke-dasharray:3 3;opacity:.5}
.r-lbl{fill:#fff6e6;font:700 11px var(--texte)}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.trio div{background:var(--tint);border-radius:12px;padding:10px;display:grid;gap:2px;min-width:0}
.trio b{font-family:var(--titre);font-size:17px;line-height:22px;overflow-wrap:anywhere}
details{border-top:1px solid var(--line);padding-top:10px}
details summary{font-weight:700;cursor:pointer;min-height:28px}
details p{margin-top:6px}
.etoiles{background:var(--nuit);color:var(--on-nuit);border:0}
.etoiles .sur{color:var(--safran)}
.onglets{display:grid;grid-template-columns:1fr 1fr;background:var(--tint);border-radius:999px;padding:4px}
.onglets button{border:0;background:none;color:var(--ink);font:700 15px/20px var(--texte);padding:10px;border-radius:999px;cursor:pointer;min-height:44px}
.onglets button[aria-selected="true"]{background:var(--raised);box-shadow:0 0 0 1px var(--line)}
.puces{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px}
.puces button{flex:0 0 auto;width:40px;height:40px;border-radius:50%;border:1px solid var(--line-strong);background:var(--raised);color:var(--ink);font:700 14px var(--texte);cursor:pointer}
.puces button[aria-pressed="true"]{background:var(--brand);color:var(--on-brand);border-color:var(--brand)}
.jours{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.jours .j{border:0;border-radius:12px;background:var(--lilas);color:var(--on-lilas);padding:8px 2px;display:grid;gap:2px;justify-items:center;cursor:pointer;font:inherit;min-height:60px}
.jours .j b{font:600 18px/22px var(--titre)}
.jours .j small{font-size:11px;line-height:14px}
.jours .j.ferme{background:var(--tint);color:var(--muted)}
.jours .j.auj{outline:3px solid var(--safran);outline-offset:1px}
.lune-c{background:var(--raised);border:1px solid var(--line);border-radius:16px;padding:12px 16px}
.lune-c.now{border:2px solid var(--safran)}
.lune-c summary{display:grid;grid-template-columns:28px 1fr;gap:8px;align-items:start}
.lune-c summary small{display:block;font-weight:500;color:var(--muted);font-size:14px}
.lune-c p{margin-top:8px}
.mem button.moi{background:var(--safran);color:var(--on-safran)}
.mem button{font-size:28px}
.cap::first-letter{text-transform:uppercase}
.lien-copie{background:var(--tint);border-radius:8px;padding:10px 12px;overflow-wrap:anywhere;font-size:14px;line-height:20px;user-select:all}
.env-l.deux{grid-template-columns:minmax(0,1fr) auto}
.env-l.deux input{font:400 16px/24px var(--texte);min-height:48px;padding:0 12px;border:1px solid var(--line-strong);border-radius:8px;background:var(--raised);color:var(--ink);width:100%}
input[type=date],input[type=time]{appearance:none;-webkit-appearance:none}
input:disabled{opacity:.5}
/* Violet et or, lecture sur téléphone */
html{background:var(--surface)}
.carte{border-color:var(--line)}
.sur{color:var(--muted)}
.hero{background:radial-gradient(circle at 85% 0%,rgba(242,193,78,.22),transparent 45%),var(--nuit);border:1px solid var(--line)}
.hero h1,.hero .h1{color:var(--or-clair)}
.hero .quand{color:var(--or-clair);font-weight:700}
.offre{border:2px solid var(--brand)}
.btn{min-height:52px;font-size:17px}
.btn.deux{color:var(--ink);border-color:var(--line-strong)}
.lien-t{color:var(--or-clair);font-size:15px}
.cit{background:var(--tint);border:1px solid var(--line)}
.cit p{color:var(--or-clair)}
.bourse{box-shadow:0 0 0 2px rgba(255,224,138,.25)}
.tuile{background:var(--lilas);color:var(--on-lilas);border:1px solid #6b45a8}
.tuile.s{background:var(--brand);color:var(--on-brand);border-color:var(--brand)}
.jours .j{background:var(--lilas);color:var(--on-lilas)}
.jours .j.ferme{background:var(--raised);color:var(--muted);border:1px dashed var(--line)}
.jours .j.auj{outline-color:var(--brand)}
.onglets{background:var(--raised);border:1px solid var(--line)}
.onglets button{color:var(--muted)}
.onglets button[aria-selected="true"]{background:var(--brand);color:var(--on-brand);box-shadow:none}
.puces button{background:var(--raised);color:var(--ink);border-color:var(--line-strong)}
.puces button[aria-pressed="true"]{background:var(--brand);color:var(--on-brand);border-color:var(--brand)}
.aspect{background:var(--tint)}
.aspect.tendu{background:transparent;border:1px solid var(--line-strong)}
.lune-c.now{border-color:var(--brand)}
.anniv{background:var(--brand);color:var(--on-brand)}
.msg-t.moi{background:var(--lilas);color:var(--on-lilas)}
.msg-t.moi .sur,.msg-t.moi .m-a button{color:#e6d9ff}
.champ input,.champ textarea,#tx,.env-l.deux input{background:#1f0e36;color:var(--ink);border-color:var(--line-strong);font-size:17px}
.champ input::placeholder,textarea::placeholder{color:#a893c9}
.lieux button{background:#1f0e36;color:var(--ink)}
.regles{background:var(--raised);border:1px solid var(--line)}
.suivi i.a{outline-color:var(--or-clair)}
.mem button{background:var(--lilas);color:var(--or-clair)}
.mem button.vu{background:var(--tint);color:var(--ink)}
.mem button.moi{background:var(--brand);color:var(--on-brand)}
.lettres button{background:var(--raised);color:var(--ink);border-color:var(--line-strong);width:46px;height:52px}
.cartes3 button{background:var(--lilas);color:var(--or-clair);border:1px solid #6b45a8}
.bougie{border:1px solid var(--line)}
#sf{background:var(--brand)}
.etapes{margin:0;padding-left:22px;display:grid;gap:6px;font-size:15px;line-height:22px;color:var(--muted)}
.demo{background:#0c0416;border-bottom:1px solid var(--line)}
nav.bas{background:#12061f;border-top:1px solid var(--line);padding-top:4px}
nav.bas a{display:grid;justify-items:center;gap:2px;font-size:12px;line-height:16px;padding:6px 2px;color:var(--muted);min-height:52px;align-content:center}
nav.bas a svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
nav.bas a[aria-current]{color:var(--brand);background:var(--tint)}
#app{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
.envoi{bottom:calc(64px + env(safe-area-inset-bottom,0px))}
@media (max-width:380px){body{font-size:16px;line-height:25px}h1{font-size:27px;line-height:33px}.tuiles{grid-template-columns:1fr}.jours{grid-template-columns:repeat(4,minmax(0,1fr))}}

.promo{background:radial-gradient(circle at 100% 0%,rgba(242,193,78,.28),transparent 55%),var(--nuit);border:2px solid var(--brand);border-radius:24px;padding:20px;display:grid;gap:10px}
.promo h2{color:var(--or-clair);font-size:26px;line-height:32px}
.promo-bas{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.prix-g{font-size:17px;line-height:22px;display:grid}
.prix-g b{font:600 40px/44px var(--titre);color:var(--brand)}
.prix-g small{font-size:14px;color:var(--muted)}
.racc{position:fixed;left:0;right:0;z-index:30;padding-left:max(12px,env(safe-area-inset-left,0px));padding-right:max(12px,env(safe-area-inset-right,0px));pointer-events:none}
.racc.haut,.racc.bureau{top:calc(8px + env(safe-area-inset-top,0px))}
.racc.bas{bottom:calc(12px + env(safe-area-inset-bottom,0px))}
.racc-c{pointer-events:auto;max-width:460px;margin:0 auto;background:var(--raised);border:2px solid var(--brand);border-radius:20px;padding:14px;display:grid;gap:10px;box-shadow:0 12px 40px rgba(0,0,0,.5)}
.racc.haut .racc-c{margin:34px 0 0 auto}
.racc-t{display:grid;grid-template-columns:56px 1fr;gap:12px;align-items:start}
.racc-t p{font-size:15px;line-height:22px;margin-top:2px}
.appicone{width:56px;height:56px;border-radius:14px;background:#1b0b2e;display:grid;place-items:center;border:1px solid var(--line)}
.appicone .emb{width:44px;height:44px}
.ic{display:inline-grid;place-items:center;min-width:22px;height:22px;border-radius:6px;background:var(--tint);font-weight:700}
.fleche{display:block;font:700 40px/1 var(--texte);color:var(--brand);text-shadow:0 2px 8px rgba(0,0,0,.6)}
.racc.haut .fleche{position:absolute;right:max(14px,env(safe-area-inset-right,0px));top:-4px}
.racc.bas .fleche{text-align:center;margin-top:6px;order:2}
.racc.bas{display:flex;flex-direction:column}
@media (prefers-reduced-motion:no-preference){.fleche{animation:fl 1.2s ease-in-out infinite}@keyframes fl{50%{transform:translateY(-6px)}}.racc.bas .fleche{animation-name:fl2}@keyframes fl2{50%{transform:translateY(6px)}}}

.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.stats div{background:var(--tint);border-radius:12px;padding:10px;display:grid;gap:2px;text-align:center;min-width:0}
.stats b{font:600 26px/30px var(--titre)}
.stats span{font-size:13px;line-height:17px;color:var(--muted)}
.stats .or{background:var(--brand);color:var(--on-brand)}.stats .or span{color:var(--on-brand)}
.filtres button{width:auto;height:auto;border-radius:999px;padding:8px 14px;font-size:14px;white-space:nowrap}
.etat.mail{background:#2f4f8a;color:#eaf2ff}

.compteur{font-weight:700;color:var(--or-clair)}
.fond-or{background:linear-gradient(160deg,#3a1f5f,#2a1446);border:2px solid var(--brand)}
.cpt-f{font-weight:700;color:var(--or-clair)}
.etapes-g{margin:0;padding-left:22px;display:grid;gap:10px}
.moi-f .moi-t{display:flex;gap:14px;align-items:center}
.photo{width:76px;height:76px;border-radius:50%;object-fit:cover;flex:0 0 auto;background:var(--nuit);display:grid;place-items:center;border:2px solid var(--brand);overflow:hidden}
.photo .emb{width:56px;height:56px}
.badge-f{background:var(--brand);color:var(--on-brand);font-weight:700;font-size:14px;line-height:20px;padding:6px 12px;border-radius:999px;white-space:nowrap}
.trois{display:flex;gap:10px}.trois i{width:36px;height:36px;border-radius:50%;background:var(--tint);border:2px solid var(--line-strong)}.trois i.f{background:var(--brand);border-color:var(--brand)}
.invite{border:1px dashed var(--brand)}
.modal{position:fixed;inset:0;background:rgba(10,3,20,.85);z-index:50;display:grid;place-items:center;padding:16px max(16px,env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));overflow:auto}
.modal-c{background:var(--raised);border:1px solid var(--line);border-radius:24px;padding:16px;max-width:420px;width:100%;display:grid;gap:12px}
.modal-c img{width:100%;max-height:55vh;object-fit:contain;border-radius:12px}


/* ---------- Explications des astres, calendrier, interactions ---------- */
.sous{font:600 18px/24px var(--titre);color:var(--or-clair);margin:8px 0 0}
.carte hr{border:0;border-top:1px solid var(--line);margin:8px 0;width:100%}
.aspect small{display:block;color:var(--muted);font-size:14px;line-height:20px;margin-top:4px}
.energies,.astre-l{display:grid;gap:8px}
.energies details,details.astre{background:var(--tint);border-radius:16px;padding:10px 14px}
.energies summary,details.astre summary{cursor:pointer;font-weight:700;display:flex;gap:10px;align-items:center;min-height:32px}
.gl{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:rgba(242,193,78,.18);color:var(--or-clair);font-size:19px;line-height:1;flex:none}
details.astre p{margin:8px 0 0}
details.astre dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:10px 0 0;font-size:15px;line-height:22px}
details.astre dt{color:var(--brand);font-weight:700}
details.astre dd{margin:0;color:var(--muted)}
.mots{color:var(--or-clair);font-weight:700;letter-spacing:.2px}
.question{font-family:var(--titre);font-style:italic;color:var(--or-clair);border-left:3px solid var(--brand);padding-left:12px}
.barres{display:grid;gap:8px}
.barre{display:grid;grid-template-columns:56px 1fr 24px;align-items:center;gap:10px;font-size:15px}
.barre i{height:10px;border-radius:99px;background:rgba(255,255,255,.08);position:relative;overflow:hidden}
.barre i::after{content:"";position:absolute;inset:0;width:var(--v);border-radius:inherit;background:var(--brand)}
.b-feu i::after{background:#ff8a5b}.b-terre i::after{background:#9ccf6b}.b-air i::after{background:#8fd3ff}.b-eau i::after{background:#9d8cff}
.frise{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.lune-b{display:grid;gap:2px;text-align:left;background:var(--raised);border:1px solid var(--line);border-radius:18px;padding:12px;color:var(--ink);font:inherit;cursor:pointer;position:relative;min-height:112px;align-content:start}
.lune-b .num{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(242,193,78,.16);color:var(--brand);font-weight:700;margin-bottom:4px}
.lune-b b{font-family:var(--titre);font-size:17px;line-height:22px;color:var(--ink)}
.lune-b small{color:var(--muted);font-size:13px;line-height:18px}
.etat-l{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;margin-top:4px}
.lune-b.now{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand) inset}
.lune-b.now .etat-l{color:var(--brand)}
.lune-b.passe{opacity:.62}
.lune-b.sel{background:linear-gradient(160deg,#3a1d5e,#2a1446);border-color:var(--or-clair)}
.lune-b .prog,.jauge{display:block;height:6px;border-radius:99px;background:rgba(255,255,255,.1);position:relative;overflow:hidden;margin-top:6px}
.lune-b .prog::after,.jauge i{content:"";position:absolute;inset:0;width:var(--v);border-radius:inherit;background:var(--brand)}
.jauge{height:14px;margin:4px 0 0}.jauge i{display:block;background:linear-gradient(90deg,#f2c14e,#ffe08a)}
.duo{display:grid;gap:12px}
.duo>div,.visio-l{background:var(--tint);border-radius:16px;padding:12px 14px}
.duo p,.visio-l p{margin:4px 0 0}
.etinc{display:flex;flex-wrap:wrap;gap:8px}
.etinc .btn{width:auto;min-height:44px;padding:8px 16px}
.etinc-r{border-color:var(--brand);background:linear-gradient(160deg,#3d2350,#2a1446)}
.react{background:var(--tint);border:1px solid var(--line);color:var(--ink);border-radius:99px;padding:4px 12px;min-height:36px;font:inherit;cursor:pointer}
.react.on{border-color:var(--brand);color:var(--brand)}
.etinc-n{color:var(--brand);font-size:14px;font-weight:700;align-self:center}
.toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--brand);color:#1b0b2e;font-weight:700;padding:12px 20px;border-radius:99px;z-index:60;box-shadow:0 8px 30px rgba(0,0,0,.4);transition:opacity .5s;max-width:calc(100% - 32px);text-align:center}
.toast.out{opacity:0}
@media (min-width:600px){.frise{grid-template-columns:repeat(3,minmax(0,1fr))}.duo{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){.frise{grid-template-columns:repeat(4,minmax(0,1fr))}#app>.frise{grid-column:1/-1}.toast{bottom:32px;left:calc(50% + 124px)}body[data-vue=jour] #app>.ensemble,body[data-vue=jour] #app>.etinc-r{grid-column:1/-1}}

.legal h2{font-size:20px;line-height:26px;margin-top:8px}.legal p{color:var(--ink)}
.onglets.legal-o{display:flex;flex-wrap:wrap;gap:8px;background:none;border:0;padding:0;border-radius:0;grid-template-columns:none}.legal p{overflow-wrap:anywhere}.legal-o a{padding:8px 14px;border-radius:99px;background:var(--tint);color:var(--ink);text-decoration:none;font-size:15px;font-weight:700}.legal-o a.on{background:var(--brand);color:var(--on-brand)}
.liens-l a{color:var(--muted)}
.paye[aria-disabled=true]{opacity:.45;pointer-events:none}
.accord{background:var(--tint);border-radius:16px;padding:12px 14px}
.accord a,.coche a{color:var(--or-clair)}
body[data-vue=legal] #app{max-width:820px;margin:0 auto}
@media (min-width:1024px){body[data-vue=legal] #app{grid-template-columns:1fr}}
/* ---------- Grand écran : ordinateur et tablette horizontale ---------- */
nav.bas .marque{display:none}
@media (min-width:1024px){
  body{font-size:17px;line-height:28px}
  /* Menu latéral */
  nav.bas{top:0;bottom:0;right:auto;width:248px;grid-auto-flow:row;grid-auto-rows:min-content;grid-auto-columns:auto;align-content:start;gap:4px;padding:28px 16px;border-top:0;border-right:1px solid var(--line);z-index:5;background:linear-gradient(180deg,#22103a,#170926)}
  nav.bas .marque{display:flex;align-items:center;gap:12px;padding:0 8px 24px;margin-bottom:12px;border-bottom:1px solid var(--line);color:var(--or-clair);font:600 18px/22px var(--titre);text-align:left}
  nav.bas .marque .emb{width:44px;height:44px;flex:none}
  nav.bas a{display:flex;align-items:center;gap:14px;text-align:left;font-size:16px;line-height:22px;padding:12px 14px}
  nav.bas a:not(.marque):hover{background:var(--tint);color:var(--ink)}
  nav.bas a svg{width:22px;height:22px;flex:none}
  body:has(nav.bas) .demo{margin-left:248px}
  /* Contenu en deux colonnes */
  #app{max-width:1120px;padding:48px 40px 72px;gap:24px;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
  body:has(nav.bas) #app{margin-left:248px;margin-right:0;max-width:none;padding-inline:max(40px,calc((100vw - 248px - 1080px) / 2))}
  #app>*{grid-column:auto}
  #app>:is(.haut,h1,h2,.hero,.anniv,.onglets,.puces,.jours,.fil,.envoi,.regles,.err,.pied,.tuiles,.lien-t,.racc,.moi-f,figure:empty){grid-column:1/-1}
  #app>.lien-t{justify-self:start}
  .carte{padding:24px;border-radius:28px;gap:14px}
  h1{font-size:44px;line-height:50px}
  .carte h2{font-size:26px;line-height:32px}
  /* Pages qui se lisent mieux en une colonne centrée */
  body:is([data-vue=calendrier],[data-vue=tchat],[data-vue=fatoumata],[data-vue=grimoire],[data-vue=cercle]) #app{grid-template-columns:minmax(0,820px);justify-content:center}
  body[data-vue=moi] #app>.tuiles{grid-column:auto;align-content:start}
  .jours{gap:10px}
  .carte,.promo,.hero{align-content:start}
  .hero{align-content:center}
  body[data-vue=ciel] #app>.fond-or{grid-column:1/-1}
  body[data-vue=jour] #app>article.carte{grid-column:1/-1;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:40px}
  body[data-vue=jour] #app>article.carte>*{grid-column:1}
  body[data-vue=jour] #app>article.carte>:nth-child(6){grid-column:2;grid-row:1}
  body[data-vue=jour] #app>article.carte>:nth-child(7){grid-column:2;grid-row:2/span 4;align-self:start;align-content:start}
  body:not([data-vue=public]) .hero h1{font-size:52px;line-height:58px}
  /* Accueil public */
  body[data-vue=public] #app{margin:0 auto}
  .hero{position:relative;padding:64px;border-radius:32px;gap:18px;min-height:420px;align-content:center}
  .hero h1,.hero .h1{font-size:64px;line-height:68px;max-width:640px}
  .hero p{max-width:580px;font-size:19px;line-height:30px}
  .hero>svg{position:absolute;right:72px;top:50%;width:260px;height:260px;transform:translateY(-50%);opacity:.95}
  .hero .rang{display:flex;flex-wrap:wrap;gap:12px;max-width:640px}
  .hero .rang .btn{width:auto}
  body[data-vue=public] #app:not(:has(#pub-v))>.hero{grid-column:auto}
  body[data-vue=public] #app:not(:has(#pub-v))>.hero>svg{position:static;transform:none;width:96px;height:96px}
  body[data-vue=public] #app:not(:has(#pub-v))>.hero h1{font-size:52px;line-height:58px}
  body[data-vue=public] #app:not(:has(#pub-v))>form#f{align-self:center}
  #app:has(#pub-v)>.moi-f{grid-column:auto}
  #app:has(#pub-v)>form#f{grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;max-width:880px;justify-self:center;width:100%;padding:40px}
  #app:has(#pub-v)>form#f>:is(h2,.err,fieldset,.coche,.btn,.lien-t){grid-column:1/-1}
  #app:has(#pub-v)>form#f>.btn{justify-self:start;width:auto;padding-inline:32px}
  .photo{width:96px;height:96px}
  .racc.bureau{left:auto;right:24px;width:420px;top:auto;bottom:24px}
  .modal-c{max-width:440px}
}
@media (min-width:1440px){
  .hero h1,.hero .h1{font-size:72px;line-height:76px}
}

/* ---------- Lisibilité v2 : rubriques claires, textes plus contrastés ---------- */
:root{--raised:#2b1549;--muted:#ddd0f2;--line:#4f3279}
body{font-size:17px;line-height:28px}
#app{gap:14px}
.sur{display:block;font-size:12.5px;line-height:18px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--or-clair);opacity:1}
.pied{color:var(--muted);font-size:15px;line-height:23px}
.pied.intro{padding:0;margin-top:-6px}
.carte{padding:20px;gap:12px}
.carte h3,.recap-l h3,.sci h3,.rit-c h3{font:600 19px/25px var(--titre);color:var(--ink);margin:0}
.lien-t{font-weight:700}
/* Rubriques : chaque partie de la page porte un titre visible */
.rubrique{grid-column:1/-1;display:flex;align-items:center;gap:14px;margin-top:22px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.rubrique .rub-i{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--safran);color:var(--on-safran);font-size:20px;font-weight:700}
.rubrique h2{font-size:24px;line-height:30px;color:var(--or-clair)}
.rubrique p{color:var(--muted);font-size:14.5px;line-height:21px;margin-top:2px}
/* Onglets à trois choix */
.onglets.o3{grid-template-columns:repeat(3,minmax(0,1fr))}
.onglets.o3 button{font-size:14px;padding:10px 6px}
.onglets button[aria-selected="true"]{background:var(--safran);color:var(--on-safran)}
/* Saisons */
.saisons{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.saisons button{display:grid;gap:2px;text-align:left;background:var(--raised);border:1px solid var(--line);border-radius:16px;padding:12px 14px;color:var(--ink);font:inherit;cursor:pointer}
.saisons button b{font:600 16px/21px var(--titre)}
.saisons button small{color:var(--muted);font-size:13px;line-height:18px}
.saisons button[aria-pressed="true"]{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand) inset;background:#38195e}
.chiffres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.chiffres div{background:var(--tint);border-radius:14px;padding:10px;text-align:center;display:grid}
.chiffres b{font:600 26px/32px var(--titre);color:var(--or-clair)}
.chiffres small{font-size:12.5px;line-height:17px;color:var(--muted)}
.dates-l{color:var(--muted);font-size:15px;margin-top:-6px}
.recap-l{display:grid;gap:8px;border-top:1px solid var(--line);padding-top:14px}
/* Agenda des fêtes et des lunes */
.agenda{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.agenda li{display:grid;grid-template-columns:52px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.07);align-items:start}
.agenda li:last-child{border-bottom:0}
.agenda li.fini{opacity:.55}
.agenda li.auj{background:rgba(242,193,78,.1);border-radius:12px;padding:10px 8px;margin:0 -8px}
.agenda time{display:grid;justify-items:center;background:var(--tint);border-radius:12px;padding:6px 0}
.agenda time b{font:600 22px/26px var(--titre);color:var(--ink)}
.agenda time small{font-size:12px;line-height:14px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.agenda .nom-f{font-weight:700;line-height:23px}
.agenda .pied{padding:0;margin-top:4px;font-size:14.5px;line-height:21px}
.auj-t{display:inline-block;background:var(--safran);color:var(--on-safran);border-radius:99px;padding:0 8px;font-size:12px;line-height:20px;margin-left:4px}
.type-f{display:inline-block;margin-top:4px;border-radius:99px;padding:1px 9px;font-size:12px;line-height:19px;font-weight:700;border:1px solid}
.t-ferie{color:#ffd28a;border-color:#ffd28a}
.t-fete{color:#ffb3c7;border-color:#ffb3c7}
.t-ciel{color:#9fe3ff;border-color:#9fe3ff}
.t-roue{color:#b9f5c9;border-color:#b9f5c9}
.t-nl{color:#f7f0ff;border-color:#9a7fc4;background:#120720}
.t-pl{color:#1b0b2e;border-color:#f7f0ff;background:#f7f0ff}
.puces-l{display:flex;flex-wrap:wrap;gap:6px}
.mois h2{color:var(--or-clair)}
.recap-m{color:var(--muted);font-size:14.5px;line-height:21px;margin-top:-4px}
#passes{justify-self:start}
/* Bilan de lune */
.bilan{display:grid;gap:8px;border-top:1px solid var(--line);padding-top:14px}
.bilan label{display:grid;gap:2px}
.bilan small{color:var(--muted);font-size:14.5px}
.bilan textarea,.champ input{width:100%;background:var(--nuit);color:var(--ink);border:1px solid var(--line-strong);border-radius:14px;padding:12px 14px;font:inherit;font-size:16px}
/* Gratitude */
.grat{border-color:rgba(242,193,78,.55);background:linear-gradient(160deg,#35195a,#2b1549)}
.champ{display:grid;gap:6px}
.champ span{font-weight:700;font-size:15px;line-height:21px}
.merci{margin:0;padding-left:22px;display:grid;gap:6px}
.merci li::marker{color:var(--brand);font-weight:700}
.jour-m{display:grid;gap:6px;border-top:1px solid var(--line);padding-top:12px}
.jour-m h3{font-size:16px!important;text-transform:capitalize}
.science summary,.rit-eau summary{cursor:pointer}
.science summary{color:var(--or-clair);font-weight:700;font-size:15px}
.science p{margin-top:8px}
/* Rituels de l'eau */
.eau-j{border-color:rgba(159,227,255,.45);background:linear-gradient(160deg,#1f2a55,#2b1549)}
.eau-j .sur{color:#9fe3ff}
.intro-eau{background:linear-gradient(160deg,#1f2a55,#2b1549);border-color:rgba(159,227,255,.45)}
.intro-eau .sur{color:#9fe3ff}
.rit-eau{padding:0;gap:0}
.rit-eau summary{list-style:none;display:flex;gap:14px;align-items:center;padding:16px 20px}
.rit-eau summary::-webkit-details-marker{display:none}
.rit-eau summary::after{content:"+";margin-left:auto;font-size:24px;color:#9fe3ff}
.rit-eau[open] summary::after{content:"–"}
.rit-eau summary>span:nth-child(2){display:grid}
.rit-eau summary b{font:600 18px/24px var(--titre)}
.rit-eau summary small{color:var(--muted);font-size:14px;line-height:20px}
.goutte{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#9fe3ff;color:#10203f;font-weight:700;font-size:20px}
.rit-c{display:grid;gap:12px;padding:0 20px 20px}
.rit-c ol{margin:0;padding-left:22px;display:grid;gap:6px}
.sci{background:rgba(159,227,255,.08);border:1px solid rgba(159,227,255,.3);border-radius:16px;padding:14px;display:grid;gap:8px}
.sci .pied{padding:0}
.sci a{color:#9fe3ff}
.prudence{background:rgba(255,155,113,.1);border-left:3px solid var(--braise);border-radius:8px;padding:10px 12px;font-size:15px;line-height:22px}
.liste-eau{list-style:none;margin:0;padding:0;display:grid}
.liste-eau a{display:grid;padding:12px 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none}
.liste-eau small{color:var(--muted)}
.fete-j{border-color:rgba(255,179,199,.45)}
.fete-j .sur{color:#ffb3c7}
@media (min-width:600px){.agenda li{grid-template-columns:60px 1fr}}
@media (min-width:1024px){
  #app{align-items:start}
  .rubrique{margin-top:28px}
  #app>:is(.rubrique,.saisons,.recap,.frise,.lune-d,.legende,.mois,#passes,.intro-eau,.rit-eau,.pied.intro){grid-column:1/-1}
  body[data-vue=eau] #app,body[data-vue=grimoire] #app{grid-template-columns:minmax(0,820px);justify-content:center}
}
.lune-b.passe{opacity:.82}
.rit-eau summary small{font-weight:400}

/* ---------- Charte v3 : fond écru, bleu nuit et or ---------- */
:root{--surface:#f4ede0;--raised:#fffbf4;--tint:#ece3d2;--ink:#24163b;--muted:#5d4d70;--line:#e0d4bf;--line-strong:#a99bbd;
 --brand:#f2c14e;--on-brand:#24163b;--safran:#f2c14e;--on-safran:#24163b;
 --bleu:#2a5298;--bleu-fonce:#16284f;--bleu-clair:#e4ecf8;--on-bleu:#ffffff;
 --nuit:#16284f;--on-nuit:#f7f0ff;--lilas:#3d2a6e;--on-lilas:#ffffff;
 --emeraude:#1d7a55;--on-emeraude:#ffffff;--braise:#c2410c;--erreur:#b3261e;--focus:#2a5298;--or-clair:#2a5298;color-scheme:light}
body{background:var(--surface);color:var(--ink)}
h1{color:var(--bleu-fonce)}
.sur{color:var(--bleu)}
.pied{color:var(--muted)}
a{color:var(--bleu)}
.lien-t{color:var(--bleu)}
.carte{background:var(--raised);border:1px solid var(--line);box-shadow:0 1px 2px rgba(36,22,59,.05),0 6px 18px rgba(36,22,59,.05)}
.err{color:var(--erreur)}
.ok{color:var(--emeraude)}
/* Blocs « nuit » : bleu profond, textes clairs */
.hero,.promo,.fond-or,nav.bas,.demo,.anniv-n{--ink:#f7f0ff;--muted:#d5dcf0;--or-clair:#ffe08a;--raised:#1d3463;--tint:#24407a;--line:#34508c;--line-strong:#7d93c4;--bleu:#ffe08a;color:var(--ink)}
.hero{background:radial-gradient(circle at 85% 0%,rgba(242,193,78,.25),transparent 45%),linear-gradient(160deg,#1d3463,#16284f);border:0}
.promo{background:radial-gradient(circle at 100% 0%,rgba(242,193,78,.3),transparent 55%),linear-gradient(160deg,#1d3463,#16284f)}
.fond-or{background:linear-gradient(160deg,#1d3463,#16284f)}
.promo .sur,.hero .sur,.fond-or .sur{color:#ffe08a}
.demo{background:#0f1d3d}
nav.bas{background:#16284f;border-top:0}
nav.bas a{color:#c9d3ec}
nav.bas a[aria-current]{color:#ffe08a;background:#24407a}
/* Affirmation : panneau bleu clair */
.cit{background:var(--bleu-clair);border:1px solid #c4d4ee}
.cit p{color:var(--bleu-fonce)}
.cit figcaption{font-size:13.5px;color:var(--muted);font-style:normal}
/* Rubriques */
.rubrique{border-bottom-color:var(--line)}
.rubrique .rub-i{background:var(--bleu);color:#fff}
.rubrique h2{color:var(--bleu-fonce)}
/* Boutons */
.btn.deux{color:var(--ink);border-color:var(--line-strong);background:transparent}
.btn.bleu{background:var(--bleu);color:#fff}
.onglets{background:var(--raised);border:1px solid var(--line)}
.onglets button{color:var(--muted)}
.onglets button[aria-selected="true"]{background:var(--bleu);color:#fff}
/* Tuiles des jeux */
.tuile{background:var(--bleu);color:#fff;border:0}
.tuile small,.tuile span{color:inherit}
.tuile.s{background:var(--safran);color:var(--on-safran)}
.cartes3 button{border-color:var(--line-strong)}
/* Champs */
.champ input,.champ textarea,#tx,.env-l.deux input,.bilan textarea,.lieux button{background:#fff;color:var(--ink);border:1px solid var(--line-strong)}
.champ input::placeholder,textarea::placeholder{color:#8f82a3}
/* Tchat */
.msg-t.moi{background:var(--bleu);color:#fff}
.msg-t.moi .sur,.msg-t.moi .m-a button{color:#dbe6fb}
/* Toast, raccourci, fenêtres */
.toast{background:var(--bleu-fonce);color:#fff;box-shadow:0 8px 30px rgba(22,40,79,.3)}
.racc-c{box-shadow:0 12px 40px rgba(22,40,79,.18)}
.modal{background:rgba(22,40,79,.6)}
.appicone{background:#16284f}
/* Calendrier */
.lune-b{background:var(--raised)}
.lune-b .num{background:var(--bleu-clair);color:var(--bleu)}
.lune-b.sel{background:var(--bleu-clair);border-color:var(--bleu)}
.lune-b.now{border-color:var(--safran);box-shadow:0 0 0 2px var(--safran) inset}
.lune-b.now .etat-l{color:#9a6a00}
.lune-b .prog,.jauge,.barre i{background:rgba(36,22,59,.1)}
.saisons button{background:var(--raised)}
.saisons button[aria-pressed="true"]{background:var(--bleu-clair);border-color:var(--bleu);box-shadow:0 0 0 1px var(--bleu) inset}
.chiffres div{background:var(--bleu-clair)}
.chiffres b{color:var(--bleu)}
.mots{color:var(--bleu)}
.duo>div,.visio-l{background:var(--tint)}
.j{background:var(--bleu);color:#fff}
.j.ferme{background:var(--raised);color:var(--muted)}
.puces button[aria-pressed="true"]{background:var(--bleu);border-color:var(--bleu);color:#fff}
.agenda li{border-bottom-color:rgba(36,22,59,.08)}
.agenda time{background:var(--bleu-clair)}
.agenda time b{color:var(--bleu-fonce)}
.agenda li.auj{background:#fdf2d2}
.mois h2{color:var(--bleu-fonce)}
.t-ferie{color:#8a5300;border-color:#d9a441;background:#fff6e0}
.t-fete{color:#a3214f;border-color:#e59ab5;background:#fdeef3}
.t-ciel{color:#1f5fa8;border-color:#9cc0ea;background:#eaf2fc}
.t-roue{color:#23714a;border-color:#9ad1b2;background:#eaf7ef}
.t-nl{color:#fff;border-color:#16284f;background:#16284f}
.t-pl{color:#24163b;border-color:#c9bda5;background:#fff}
/* Cartes spéciales */
.etinc-r{background:linear-gradient(160deg,#fff4d6,#fffbf4);border-color:#ecd28b}
.grat{background:linear-gradient(160deg,#fff4d6,#fffbf4);border-color:#ecd28b}
.grat .sur{color:#8a5a00}
.eau-j,.intro-eau{background:linear-gradient(160deg,#dfeafa,#fffbf4);border-color:#a9c4ea}
.eau-j .sur,.intro-eau .sur{color:var(--bleu)}
.eau-r{border-color:#c4d4ee}
.goutte{background:var(--bleu);color:#fff}
.rit-eau summary::after{color:var(--bleu)}
.sci{background:#eef4fc;border-color:#c4d4ee}
.sci a{color:var(--bleu)}
.prudence{background:#fff1ea}
.fete-j{border-color:#e59ab5}
.fete-j .sur{color:#a3214f}
.aff-eau{margin:0;background:var(--raised);border-left:4px solid var(--bleu);border-radius:10px;padding:12px 14px}
.aff-eau p{font:italic 400 21px/30px var(--titre);color:var(--bleu-fonce)}
.aff-eau cite{display:block;font-style:normal;font-size:13.5px;color:var(--muted);margin-top:4px}
.etapes-eau{margin:0;padding-left:22px;display:grid;gap:4px}
.science summary{color:var(--bleu)}
.anniv{background:var(--safran);color:var(--on-safran)}
/* Carte du ciel : la roue garde son fond nuit */
.roue{background:#16284f;border-radius:50%}
@media (min-width:1024px){
 nav.bas{background:linear-gradient(180deg,#1d3463,#16284f)}
 nav.bas .marque{color:#ffe08a}
 nav.bas a:not(.marque):hover{background:#24407a;color:#fff}
}
.etoiles{--ink:#f7f0ff;--muted:#d5dcf0;--bleu:#ffe08a;background:linear-gradient(160deg,#1d3463,#16284f);color:#f7f0ff;border:0}
.etoiles .sur{color:#ffe08a}
details.astre dt{color:var(--bleu)}
.prix-g b{color:var(--bleu)}
.promo .prix-g b{color:#ffe08a}

/* ---------- Charte v4 : écru, violet, bleu nuit et or ---------- */
:root{--violet:#4b2483;--violet-fonce:#2e1458;--violet-clair:#efe6fa;--lilas:#4b2483}
h1{color:var(--violet-fonce)}
.sur{color:var(--violet)}
.rubrique .rub-i{background:linear-gradient(135deg,#5a2d91,#2a5298)}
.rubrique h2{color:var(--violet-fonce)}
.onglets button[aria-selected="true"]{background:var(--violet);color:#fff}
.tuile{background:var(--violet)}
.tuile:nth-child(3){background:var(--bleu)}
.tuile.s{background:var(--safran);color:var(--on-safran)}
.j{background:var(--violet)}
.puces button[aria-pressed="true"]{background:var(--violet);border-color:var(--violet)}
.lune-b .num{background:var(--violet-clair);color:var(--violet)}
.lune-b.sel{background:var(--violet-clair);border-color:var(--violet)}
.saisons button[aria-pressed="true"]{background:var(--violet-clair);border-color:var(--violet);box-shadow:0 0 0 1px var(--violet) inset}
.chiffres div{background:var(--violet-clair)}
.chiffres b{color:var(--violet)}
.mots{color:var(--violet)}
.mois h2{color:var(--violet-fonce)}
.agenda time{background:var(--violet-clair)}
.agenda time b{color:var(--violet-fonce)}
.msg-t.moi{background:var(--violet)}
.btn.deux{border-color:#b9a3d9}
.toast{background:var(--violet-fonce)}
a,.lien-t{color:#4a2c8f}
/* Blocs nuit : du violet au bleu */
.hero{background:radial-gradient(circle at 85% 0%,rgba(242,193,78,.25),transparent 45%),linear-gradient(160deg,#4b2483,#16284f)}
.promo{background:radial-gradient(circle at 100% 0%,rgba(242,193,78,.3),transparent 55%),linear-gradient(160deg,#4b2483,#16284f)}
.fond-or,.etoiles{background:linear-gradient(160deg,#4b2483,#16284f)}
nav.bas{background:linear-gradient(90deg,#3a1b6b,#16284f)}
nav.bas a[aria-current]{background:rgba(255,255,255,.14)}
.demo{background:#2a1350}
.roue{background:#2e1458}
.appicone{background:#2e1458}
.hero a,.promo a,.etoiles a{color:#ffe08a}
/* L'eau et l'affirmation restent bleues */
.cit .sur,.eau-j .sur,.intro-eau .sur,.eau-r .sur{color:var(--bleu)}
.eau-j a,.intro-eau a,.eau-r a,.sci a,.cit a{color:var(--bleu)}
@media (min-width:1024px){nav.bas{background:linear-gradient(180deg,#4b2483,#16284f)}}

/* ---------- Expérience v5 : progression du jour, notifications, sorcières ---------- */
html{scroll-behavior:smooth;scroll-padding-top:16px}
.haut{align-items:flex-start}
.haut-d{display:flex;align-items:center;gap:10px;flex:none}
.cloche{position:relative;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--raised);border:1px solid var(--line);color:var(--violet)}
.cloche svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.pastille{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;border-radius:10px;background:#d6336c;color:#fff;font:700 12px/20px var(--texte);text-align:center;padding:0 5px;box-shadow:0 0 0 2px var(--surface)}
/* Ma journée : une barre de progression et des gestes cliquables */
.journee{grid-column:1/-1;background:linear-gradient(135deg,#4b2483,#2a5298);color:#fff;border-radius:24px;padding:16px 16px 14px;display:grid;gap:10px;box-shadow:0 8px 24px rgba(46,20,88,.18)}
.j-haut{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}
.j-haut b{font:600 19px/24px var(--titre)}
.j-haut span{font-size:13.5px;opacity:.9}
.j-barre{height:8px;border-radius:99px;background:rgba(255,255,255,.2);overflow:hidden}
.j-barre i{display:block;height:100%;background:linear-gradient(90deg,#f2c14e,#ffe08a);border-radius:99px;transition:width .6s ease}
.j-gestes{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:2px 16px 4px;scroll-snap-type:x proximity}
.j-gestes::-webkit-scrollbar{display:none}
.geste{flex:none;scroll-snap-align:start;display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);color:#fff;border-radius:99px;padding:7px 14px 7px 7px;font:600 14px/18px var(--texte);cursor:pointer;min-height:40px}
.geste .g-i{min-width:28px;height:28px;border-radius:14px;display:grid;place-items:center;background:#f2c14e;color:#24163b;font-size:12px;font-weight:800;padding:0 6px}
.geste.fait{background:rgba(255,255,255,.06);color:rgba(255,255,255,.75)}
.geste.fait .g-i{background:#6ee7b7;color:#0b2a1f}
.eclair{animation:eclair 1.6s ease}
@keyframes eclair{0%,100%{box-shadow:0 0 0 0 rgba(242,193,78,0)}30%{box-shadow:0 0 0 4px rgba(242,193,78,.7)}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.eclair{animation:none}.j-barre i{transition:none}}
/* Pastilles du menu */
nav.bas a{position:relative}
.badge-n{position:absolute;top:2px;left:50%;margin-left:6px;font:800 10.5px/16px var(--texte);font-style:normal;background:#f2c14e;color:#24163b;border-radius:8px;padding:0 5px;pointer-events:none}
.badge-n.pt{background:#d6336c;color:#fff}
@media (min-width:1024px){.badge-n{position:static;margin-left:auto}}
/* Notification d'étincelle */
.notif-j{border-color:#ecd28b;background:linear-gradient(160deg,#fff4d6,#fffbf4)}
.notif-j .sur{color:#8a5a00}
.notifs{list-style:none;margin:0;padding:0;display:grid;gap:0}
.notifs.carte{padding:6px 16px}
.notifs li,.sorciere{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.notifs li:last-child,.sorciere:last-child{border-bottom:0}
.notifs.court li{padding:6px 0;border:0}
.notifs li.nouv{background:linear-gradient(90deg,rgba(242,193,78,.14),transparent);margin:0 -16px;padding-left:16px;padding-right:16px}
.nouv-t{color:#d6336c;font-weight:700}
.avatar{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;font:600 19px/1 var(--titre);box-shadow:inset 0 0 0 2px rgba(255,255,255,.25)}
.s-info{display:grid;min-width:0;flex:1}
.s-info b{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.s-info small{color:var(--muted);font-size:13.5px;line-height:19px}
.btn-et{flex:none;border:0;background:var(--safran);color:var(--on-safran);font:800 14px/18px var(--texte);border-radius:99px;padding:10px 14px;min-height:44px;cursor:pointer}
.btn-et:disabled{opacity:.5}
.s-ok{flex:none;color:var(--emeraude);font-weight:700;font-size:14px}
/* Annuaire des sorcières */
.annuaire{list-style:none;margin:0;padding:4px 16px;background:var(--raised);border:1px solid var(--line);border-radius:24px}
.et-info{gap:6px}
.compteur{font-weight:700;color:var(--violet)}
.recherche input{width:100%;background:#fff;border:1px solid var(--line-strong);border-radius:99px;padding:12px 18px;font:inherit;font-size:16px;color:var(--ink)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.compteur-t{background:var(--violet-clair);border-radius:14px;padding:10px 14px;font-size:15px;line-height:22px;color:var(--violet-fonce)}
/* Moi */
.bascule{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:22px;cursor:pointer}
.bascule input{width:22px;height:22px;accent-color:var(--violet);flex:none;margin-top:1px}
.contact-f{display:grid;gap:2px;border-top:1px solid var(--line);padding-top:12px}
.contact-f a{font-weight:700;font-size:17px;word-break:break-all}
/* Historique discret */
.lien-hist{grid-column:1/-1;justify-self:center;background:none;border:0;color:var(--muted);font:600 14px/20px var(--texte);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:10px}
.mois.hist{opacity:.7}
.agenda .vide{display:block;color:var(--muted);font-size:15px;border:0;padding:6px 0}
details.legende{grid-column:1/-1;background:var(--raised);border:1px solid var(--line);border-radius:16px;padding:10px 14px}
details.legende summary{cursor:pointer;font-weight:700;color:var(--violet);font-size:15px}
details.legende[open]{display:grid;gap:8px}
/* Confort général */
.carte{transition:box-shadow .2s}
.btn,.btn-et,.geste,.onglets button{-webkit-tap-highlight-color:transparent}
.btn:active,.btn-et:active,.geste:active{transform:scale(.98)}
.j-gestes{flex-wrap:wrap;overflow:visible;margin:0;padding:0}
.geste{flex:1 1 calc(50% - 8px);min-width:0}
.geste{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (min-width:600px){.geste{flex:0 1 auto}}

/* ---------- Visio plus visible ---------- */
.promo{grid-column:1/-1;box-shadow:0 10px 30px rgba(46,20,88,.25)}
.promo h2{font-size:27px;line-height:33px}
.promo-tl{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:16px;padding:12px 14px;display:grid;gap:6px}
.promo-tl b{font:600 16px/22px var(--titre);color:#ffe08a}
.promo-tl ol{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.promo-tl li{display:flex;gap:10px;align-items:baseline;font-size:15px;line-height:22px}
.promo-tl li span{flex:none;min-width:52px;font-size:12.5px;font-weight:700;color:#ffe08a;opacity:.9}
.hero #aller-offre{justify-self:start;margin-top:4px}
.tl{list-style:none;margin:0;padding:0;display:grid;gap:0;position:relative}
.tl li{display:grid;grid-template-columns:70px 1fr;gap:14px;padding:12px 0;position:relative}
.tl li::before{content:"";position:absolute;left:84px;top:0;bottom:0;width:2px;background:var(--violet-clair)}
.tl li:first-child::before{top:20px}.tl li:last-child::before{bottom:calc(100% - 20px)}
.tl li>div:last-child{padding-left:14px;position:relative}
.tl li>div:last-child::before{content:"";position:absolute;left:-5px;top:7px;width:10px;height:10px;border-radius:50%;background:var(--safran);box-shadow:0 0 0 3px var(--raised)}
.tl-h{display:grid;justify-items:end;text-align:right}
.tl-h b{font:600 16px/22px var(--titre);color:var(--violet)}
.tl-h small{font-size:12.5px;color:var(--muted)}
.tl h3{font-size:17px!important;line-height:23px!important}
.tl p{font-size:15px;line-height:23px;color:var(--muted);margin-top:2px}
.coches{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.coches li{display:flex;gap:10px;align-items:flex-start;line-height:24px}
.coches li::before{content:"✓";flex:none;width:24px;height:24px;border-radius:50%;background:var(--violet-clair);color:var(--violet);display:grid;place-items:center;font-weight:800;font-size:13px}
.repars{background:linear-gradient(160deg,#fff4d6,#fffbf4);border-color:#ecd28b}
.avec-f .moi-t{display:flex;gap:14px;align-items:center}
.avec-f .photo{width:72px;height:72px;border-radius:50%;object-fit:cover;flex:none}
.offre{border:2px solid var(--safran)}
.faq-v details{border-top:1px solid var(--line);padding:10px 0}
.faq-v summary{cursor:pointer;font-weight:700}
.faq-v details p{margin-top:6px;color:var(--muted)}
.annuaire.mini{background:none;border:0;padding:0}
@media (min-width:1024px){
 body[data-vue=visio] #app{grid-template-columns:minmax(0,820px);justify-content:center}
 #app>.promo{grid-column:1/-1}
}
.geste{white-space:normal;text-align:left;line-height:17px;padding:6px 10px 6px 6px}
.geste .g-i{min-width:34px}
.tl-h small{margin-top:2px}
.vue-b{position:sticky;top:0;z-index:40;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;background:#d6336c;color:#fff;font-size:14px;line-height:20px;padding:8px max(16px,env(safe-area-inset-right,0px)) 8px max(16px,env(safe-area-inset-left,0px))}
.vue-b button{background:#fff;color:#a3214f;border:0;border-radius:99px;font:700 14px/20px var(--texte);padding:6px 14px;cursor:pointer}
@media (min-width:1024px){.vue-b{margin-left:248px}}
button.tuile{font:inherit;text-align:left}
/* Onglet Visios et visio discrète quand on est inscrite */
nav.bas a span{white-space:nowrap}
@media (max-width:400px){nav.bas a{font-size:11px;padding-left:0;padding-right:0}}
.visio-mini{grid-column:1/-1;display:flex;align-items:center;gap:12px;background:var(--raised);border:1px solid var(--line);border-radius:18px;padding:12px 16px}
.visio-mini>div{display:grid;flex:1;min-width:0}
.visio-mini b{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.visio-mini small{color:var(--muted);font-size:13.5px}
.vm-i{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--violet-clair);color:var(--violet);font-size:18px}
.visios{list-style:none;margin:0;padding:0;display:grid}
.visios li{display:grid;grid-template-columns:52px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);align-items:center}
.visios li:last-child{border-bottom:0}
.visios li.passe{display:none}
.visios li.pro{background:var(--violet-clair);border-radius:14px;padding:10px 8px;margin:0 -8px}
.visios time{display:grid;justify-items:center;background:var(--violet-clair);border-radius:12px;padding:6px 0}
.visios li.pro time{background:var(--violet);color:#fff}
.visios time b{font:600 20px/24px var(--titre)}
.visios time small{font-size:11.5px;text-transform:uppercase;letter-spacing:.04em}
.v-t{font-weight:700;line-height:22px}
.visios small{color:var(--muted);font-size:13.5px}
.v-pro{color:var(--violet);font-weight:700}
.visios li.pro time small{color:#fff}
.rassure{display:flex;gap:12px;align-items:flex-start;background:rgba(255,224,138,.14);border:1px solid rgba(255,224,138,.45);border-radius:16px;padding:12px 14px}
.rassure span{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#ffe08a;color:#24163b;font-size:16px}
.rassure p{font-size:15px;line-height:23px;margin:0}
.rassure b{color:#ffe08a}

/* ---------- Mon ciel : deux univers bien distincts ---------- */
.ciel-j{background:linear-gradient(180deg,#dfeafa 0,#fffbf4 220px);border:1px solid #a9c4ea;border-top:6px solid var(--bleu)}
.ciel-j>.sur{color:var(--bleu)}
.ciel-j h2{color:var(--bleu-fonce)}
.ciel-j .energies details{background:#fff;border:1px solid #c4d4ee}
.ciel-j .energies summary .gl{background:var(--bleu-clair);color:var(--bleu)}
.titre-touche{color:var(--bleu-fonce);border-top:1px solid #c4d4ee;padding-top:14px}
.aspect{background:#fff;border:1px solid var(--line);border-left:5px solid;border-radius:14px;padding:12px 14px;gap:4px}
.aspect.a-douceur{border-left-color:#2f9a6a}
.aspect.a-tension{border-left-color:#d6336c;background:#fff7f9}
.aspect.a-fusion{border-left-color:var(--violet);background:#faf6ff}
.a-type{justify-self:start;font:800 11.5px/18px var(--texte);letter-spacing:.06em;text-transform:uppercase;border-radius:99px;padding:1px 9px}
.a-douceur .a-type{background:#e3f5ec;color:#1d6b49}
.a-tension .a-type{background:#fde4ec;color:#a3214f}
.a-fusion .a-type{background:var(--violet-clair);color:var(--violet)}
.ciel-n,.ciel-p{background:linear-gradient(180deg,#efe6f8 0,#fffbf4 220px);border:1px solid #d6c4ee;border-top:6px solid var(--violet)}
.ciel-n>.sur,.ciel-p>.sur{color:var(--violet)}
.ciel-p details.astre{background:#fff;border:1px solid #e2d6f2}
.ciel-n .trio>div{background:#fff;border:1px solid #e2d6f2}
.ville-f{display:grid;gap:6px;border-top:1px solid var(--line);padding-top:12px}
.ville-f label{display:grid}
.ville-f small{color:var(--muted);font-size:13.5px}
.rang-v{display:flex;gap:8px}
.rang-v input{flex:1;min-width:0;background:#fff;color:var(--ink);border:1px solid var(--line-strong);border-radius:14px;padding:10px 14px;font:inherit;font-size:16px}
.rang-v .btn{width:auto;flex:none}
.carte>*{min-width:0}
.ville-f,.rang-v{min-width:0;max-width:100%}
.rang-v input{width:100%}

/* ---------- v6 : stories, année lunaire, vraies dates, jeux du jour, étoiles ---------- */
.btn-story{display:inline-flex;align-items:center;gap:8px;justify-self:start;border:0;border-radius:999px;padding:10px 16px;font-family:inherit;font-weight:700;font-size:15px;line-height:20px;cursor:pointer;color:#fff;background:linear-gradient(135deg,#4b2483,#2a5298);box-shadow:0 2px 8px rgba(43,29,92,.25)}
.btn-story .ico-s{width:20px;height:20px;fill:none;stroke:#f2c14e;stroke-width:2}
.aff-j .rang{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin-top:6px}
.aff-perso{display:block;font-size:13px;line-height:18px;opacity:.85}
.cit.aff-j{display:grid;gap:8px}
/* Année lunaire */
.annee{background:linear-gradient(160deg,#16284f,#3a1f6e);color:#fff6e6;border:0}
.annee .sur{color:#f2c14e}
.annee h2,.annee h3{color:#fff;margin:0}
.annee h3{font:600 18px/24px var(--titre);margin-top:14px}
.annee p{color:#efe6fa}
.annee .annee-cle{background:rgba(242,193,78,.16);border-left:4px solid #f2c14e;border-radius:8px;padding:10px 12px;color:#fff6e6}
.annee .annee-cle b{color:#ffe08a}
.annee details summary{cursor:pointer;font-weight:700;color:#ffe08a;padding:6px 0}
.annee a,.annee .lien-t{color:#ffe08a}
.annee.court{background:linear-gradient(160deg,#1f3a6e,#4b2483)}
/* Frise et détail des lunes */
.lune-b .num{font-size:12px;font-weight:700;padding:2px 8px;border-radius:999px;width:auto;min-width:0;height:auto;line-height:18px;justify-self:start}
.recap-l.attente{background:#e6edfb;border:1px solid #b8c8ea;border-left:5px solid #2a5298;border-radius:14px;padding:14px 14px 10px;margin-top:6px}
.recap-l.attente h3{color:#16284f}
.recap-l.attente .pied{color:#2c3e66}
.recap-l.attente .agenda li{background:#fff;border-radius:12px;padding:8px 10px;border:1px solid #d3ddf2}
.recap-l.attente .agenda time{background:#16284f}
.recap-l.attente .agenda time b,.recap-l.attente .agenda time small{color:#fff}
.agenda time small{white-space:nowrap}
.type-f.t-q{background:#dfe7f8;color:#16284f}
.lune-d #share-lune{margin-top:12px}
/* Puces nommées des 13 lunes */
.puces.nommees{gap:8px;scroll-snap-type:x proximity;padding:2px 2px 8px}
.puces.nommees button{display:grid;gap:2px;text-align:left;min-width:150px;padding:10px 12px;border-radius:14px;scroll-snap-align:start;font:inherit;background:#fff;color:#24163b;border:1px solid #d9cdea}
.puces.nommees button b{font:600 15px/19px var(--titre);color:#2e1458}
.puces.nommees button small{font-size:12px;line-height:16px;color:#5d4d70}
.puces.nommees button.now{border-color:#2a5298;box-shadow:0 0 0 1px #2a5298 inset}
.puces.nommees button.on{background:#4b2483;border-color:#4b2483}
.puces.nommees button.on b,.puces.nommees button.on small{color:#fff}
/* Grille des jours : vraies dates */
.jours .j{position:relative;min-height:66px;padding:14px 2px 6px}
.jours .j .ph{position:absolute;top:4px;right:6px;font-size:12px;line-height:1}
.jours .j b{font-size:20px}
.jours .j small{font-weight:600;letter-spacing:.2px}
.aff-l h2{margin:0}
/* Jeux du jour */
.tuiles.jeux-j{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:10px}
.tuile.jeu{background:#16284f;color:#fff;text-decoration:none;border:0}
.tuile.jeu:nth-child(2){background:#2a5298}
.tuile.jeu:nth-child(3){background:#4b2483}
.tuile.jeu .gain{display:inline-block;justify-self:start;margin-top:4px;background:#f2c14e;color:#1b0b2e;border-radius:999px;padding:2px 10px;font-weight:700}
.tuile.jeu.fait{opacity:.9}
.tuile.jeu.fait .gain{background:#e6f4ea;color:#1d5a32}
.jeu-c .jeu-q{font:600 22px/30px var(--titre);color:#2e1458;margin:6px 0 12px}
.choix{display:grid;gap:10px}
.choix.vf{grid-template-columns:1fr 1fr}
.choix button{font-family:inherit;font-weight:600;font-size:17px;line-height:22px;text-align:left;padding:14px 16px;border-radius:14px;border:2px solid #cdbbe8;background:#fff;color:#24163b;cursor:pointer}
.choix.vf button{text-align:center}
.choix button:not([disabled]):hover{border-color:#4b2483;background:#f6f0fc}
.choix button.bon{background:#e6f4ea;border-color:#2f8a4f;color:#123d22}
.choix button.faux{background:#fde8e8;border-color:#c0392b;color:#5c1410}
.choix button.off{opacity:.55}
.jeu-r{margin-top:14px;border-radius:14px;padding:12px 14px;background:#efe6fa;color:#24163b}
.jeu-r.gagne{background:#e6f4ea;color:#123d22}
.jeu-r.rate{background:#fff4d6;color:#4a3700}
.jeu-r p{margin:6px 0 0}
/* Étoiles de naissance */
.etoiles .etoile-b{background:#16284f;color:#efe6fa;border-radius:16px;padding:14px 16px;margin:10px 0;display:grid;gap:6px}
.etoiles .etoile-b .sur{color:#f2c14e}
.etoiles .etoile-b h3{margin:0;color:#fff;font:600 21px/26px var(--titre)}
.etoiles .etoile-b p{margin:0;color:#e4dcf4}
.etoiles .etoile-b .lect{font-size:14px;color:#b9c7ea;font-style:italic}
.etoiles .etoile-b .don{background:rgba(242,193,78,.14);border-radius:10px;padding:8px 10px;color:#fff6e6}
.etoiles .etoile-b .don b{color:#ffe08a}
.etoiles .etoile-b .pied{color:#cdbbe8}
.etoiles .etoile-b:nth-of-type(2){background:#2b1d5c}
.etoiles .btn-story{margin-top:6px}
.trio>div{display:grid;gap:4px;align-content:start}
.trio small{font-size:12.5px;line-height:17px;color:#5d4d70}
/* Visios */
.visios .v-m{display:block;font-size:12px;font-weight:700;letter-spacing:.3px;color:#2a5298;text-transform:uppercase}
.etapes-s{margin:12px 0 0;padding-left:20px;display:grid;gap:6px;text-align:left;font-size:14px}
.inst-t b{font-size:16px}
@media (max-width:640px){.trio{grid-template-columns:1fr!important}.trio>div{grid-template-columns:96px 1fr;column-gap:10px;align-items:baseline}.trio>div .sur{grid-row:1}.trio>div b{grid-row:1;grid-column:2}.trio>div small{grid-column:1/-1}}
/* Astres du jour en détail */
.astres-j{display:grid;gap:10px}
.astres-j h2{margin:0}
.astre-j{background:#fff;border:1px solid #d8cdea;border-radius:14px;overflow:hidden}
.astre-j summary{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;list-style:none}
.astre-j summary::-webkit-details-marker{display:none}
.astre-j summary .gl{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#16284f;color:#f2c14e;font-size:20px}
.astre-j.lent summary .gl{background:#4b2483}
.astre-j .aj-t{display:grid;flex:1;min-width:0}
.astre-j .aj-t b{color:#2e1458;font-size:16px;line-height:21px}
.astre-j .aj-t small{color:#5d4d70;font-size:12.5px;line-height:17px}
.astre-j .badge-r,.astre-j .badge-s{flex:none;font-size:11px;font-weight:700;border-radius:999px;padding:3px 8px}
.astre-j .badge-r{background:#fde8e8;color:#8a1f15}
.astre-j .badge-s{background:#fff1c7;color:#5c4300}
.astre-j[open] summary{background:#f1ecfa;border-bottom:1px solid #e2d6f2}
.astre-j .aj-c{padding:12px 14px;display:grid;gap:8px}
.astre-j .aj-c p{margin:0}
.astre-j dl{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;margin:0}
.astre-j dt{font-weight:700;color:#2e1458;font-size:14px}
.astre-j dd{margin:0;font-size:14px;color:#24163b}
.astre-j .lien-n{background:#fff1c7;border-radius:10px;padding:8px 10px;color:#4a3700}
.astre-j .retro-t{background:#fde8e8;border-radius:10px;padding:8px 10px;color:#5c1410}
.astre-j .geste-a{background:#e6edfb;border-left:4px solid #2a5298;border-radius:10px;padding:8px 12px}
.astre-j .geste-a .sur{color:#16284f}
.astre-j .question{font-style:italic;color:#4b2483}
@media (max-width:420px){.astre-j dl{grid-template-columns:1fr}}
.astres-j .barre b{white-space:nowrap;min-width:40px;text-align:right}
/* Tchat : flèche pour revenir aux derniers messages */
.descendre{position:fixed;right:16px;bottom:calc(150px + env(safe-area-inset-bottom,0px));z-index:30;display:flex;align-items:center;gap:6px;height:48px;min-width:48px;padding:0 12px;border:0;border-radius:999px;background:#4b2483;color:#fff;box-shadow:0 4px 14px rgba(27,11,46,.35);cursor:pointer;font:inherit;font-weight:700;font-size:14px}
.descendre[hidden]{display:none}
.descendre svg{width:24px;height:24px;fill:none;stroke:#f2c14e;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.descendre .d-neuf{display:none}
.descendre.neuf .d-neuf{display:inline}
@media (min-width:900px){.descendre{right:calc(50% - 360px)}}

/* ---------- L'Échoppe ---------- */
.ech-tete{display:flex;justify-content:space-between;align-items:center;gap:10px}
.ech-tete h1{margin:0}
.b-ech{text-decoration:none}
.onglets.o4{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.onglets.o4 a{text-align:center;text-decoration:none;font-size:13.5px;padding:10px 4px;border-radius:999px;color:#4b2483;font-weight:700}
.onglets.o4 a[aria-selected="true"]{background:#4b2483;color:#fff}
.fam-chips{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 10px;scrollbar-width:none}
.fam-chips .chip{flex:none;text-decoration:none;padding:8px 14px;border-radius:999px;background:#fff;border:1px solid #d9cdea;color:#2e1458;font-weight:600;font-size:14px}
.fam-chips .chip.on{background:#16284f;color:#fff;border-color:#16284f}
.ob-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(98px,1fr));gap:10px;margin-top:10px}
.ob-grille.petit{grid-template-columns:repeat(auto-fill,minmax(84px,1fr))}
.ob-t{display:grid;justify-items:center;gap:3px;padding:10px 6px 8px;border-radius:14px;border:1px solid #e3d9f0;background:#fff;cursor:pointer;font:inherit;color:#24163b;text-align:center;position:relative}
.ob-t:hover{border-color:#4b2483}
.ob-t b{font-size:13px;line-height:16px;font-weight:700;color:#2e1458}
.ob-t small{font-size:11.5px;line-height:15px}
.ob-v{width:56px;height:56px;display:grid;place-items:center}
.ob-v svg{width:100%;height:100%}
.ob-emoji{font-size:38px;line-height:1}
.ob-t.mini .ob-v{width:40px;height:40px}.ob-t.mini .ob-emoji{font-size:28px}
.ob-t.choisi{border:2px solid #4b2483;background:#f1ecfa}
.ob-r{font-weight:700;color:#5d4d70}
.ob-p{color:#7a5a10;font-weight:700}.ob-p.coffre{color:#4b2483}
.ob-n{color:#1d5a32;font-weight:700}
.ob-t.r-ambre{background:linear-gradient(#fff,#fff6e0)}
.ob-t.r-etoile{background:linear-gradient(#fff,#f1e8ff);border-color:#c9a6f2}
.rar{font-weight:700;border-radius:999px;padding:1px 8px;font-size:12px}
.rar.r-rosee{background:#e6f1fb;color:#1f4f7a}.rar.r-seve{background:#e6f4ea;color:#1d5a32}.rar.r-ambre{background:#fff1c7;color:#5c4300}.rar.r-etoile{background:#efe6fa;color:#4b2483}
.raretes{line-height:26px}
/* Parchemin */
.modal.parch-m{align-items:center;padding:16px}
.parchemin{position:relative;width:min(460px,100%);max-height:88vh;overflow:auto;background:linear-gradient(90deg,#efe0bd,#fbf3dd 12%,#fbf3dd 88%,#efe0bd);color:#3b2a14;border-radius:6px;box-shadow:0 10px 40px rgba(20,10,0,.45);transform:scaleY(.05);transform-origin:center top;transition:transform .45s cubic-bezier(.2,.8,.3,1.1);font-family:Georgia,var(--titre),serif}
.parch-m.ouvert .parchemin{transform:scaleY(1)}
.parchemin::before,.parchemin::after{content:"";position:sticky;display:block;left:0;right:0;height:16px;background:linear-gradient(#c49a5a,#8a5f2a);border-radius:8px;z-index:2}
.parchemin::before{top:0}.parchemin::after{bottom:0}
.parch-in{padding:14px 22px 18px;display:grid;gap:6px}
.parch-x{position:absolute;top:20px;right:10px;z-index:3;width:36px;height:36px;border-radius:50%;border:0;background:rgba(59,42,20,.12);color:#3b2a14;font-size:22px;cursor:pointer}
.parch-v{width:96px;height:96px;margin:4px auto 0;display:grid;place-items:center}
.parch-v svg{width:100%;height:100%}.parch-v .ob-emoji{font-size:70px}
.parchemin h2{text-align:center;margin:2px 0;color:#3b1f6e;font-size:26px}
.parch-f{text-align:center;font-family:var(--corps,system-ui);font-size:13px;color:#5c4a2a;margin:0}
.parch-d{font-style:italic;text-align:center;margin:4px 0}
.parchemin h3{margin:10px 0 0;color:#6b3a10;font-size:17px;border-bottom:1px solid rgba(107,58,16,.25);padding-bottom:3px}
.parchemin ul{margin:4px 0;padding-left:20px}
.parchemin p,.parchemin li{font-size:15.5px;line-height:22px}
.parch-c{font-weight:700;color:#4b2483}
.parch-bas{display:grid;gap:8px;margin-top:12px;font-family:var(--corps,system-ui)}
.parch-bas .pied{color:#5c4a2a}
.parch-n{margin:0;text-align:center}
.parch-trouve{text-align:center;font-weight:700;color:#4b2483;font-size:18px;margin:0}
/* Coffre */
.coffre-c{text-align:center;display:grid;gap:10px;justify-items:center}
.coffre-img{width:180px;height:150px;position:relative}
.coffre-img svg{width:100%;height:100%}
.coffre-img.secoue{animation:secoue .18s linear infinite}
@keyframes secoue{0%,100%{transform:rotate(0)}25%{transform:rotate(-4deg)}75%{transform:rotate(4deg)}}
.coffre-img .eclat{position:absolute;left:50%;top:30%;width:10px;height:10px;border-radius:50%;background:#ffe08a;box-shadow:0 0 40px 30px rgba(255,224,138,.8);transform:translate(-50%,-50%);animation:eclat .9s ease-out forwards}
@keyframes eclat{from{opacity:0;transform:translate(-50%,-50%) scale(.2)}to{opacity:1;transform:translate(-50%,-50%) scale(1.4)}}
.coffre-cond{background:#f1ecfa;border-radius:14px;padding:12px 14px;text-align:left;width:100%}
.coffre-cond ul{list-style:none;padding:0;margin:6px 0}
.coffre-cond li{padding:3px 0}.coffre-cond li.fait{color:#1d5a32;font-weight:700}
.coffre-j{display:grid;grid-template-columns:84px 1fr;gap:12px;align-items:center;background:linear-gradient(135deg,#fff8e6,#f3ebff);border:1px solid #ecd9a8}
.coffre-j h2{margin:2px 0}.coffre-j p{margin:4px 0 8px}
.cj-img svg{width:84px;height:70px}
/* Collections */
.collections{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:10px}
.collections li{display:flex;gap:10px;align-items:center;justify-content:space-between;background:#faf7ff;border:1px solid #e3d9f0;border-radius:12px;padding:10px 12px}
.collections li>div{display:grid;gap:3px;flex:1;min-width:0}
.collections li small{color:#5d4d70}
.collections li.faite{background:#fff6dc;border-color:#ecd9a8}
.barre-c{display:block;height:6px;border-radius:3px;background:#e3d9f0;overflow:hidden}.barre-c i{display:block;height:100%;background:#4b2483}
/* Échanges */
.echs{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:12px}
.echs li{display:flex;gap:10px;align-items:flex-start}
.echs .rang{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.ech-m{max-height:88vh;overflow:auto}
.ech-m h3{margin:14px 0 4px}
/* Profil */
.profil{text-align:center;display:grid;gap:6px;justify-items:center}
.profil h1{margin:6px 0 0}.profil p{margin:0}
.avatar.grand{width:84px;height:84px;font-size:36px;margin-top:6px}
.titres{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:4px 0}
.titre-c{background:#fff1c7;color:#5c4300;border-radius:999px;padding:4px 10px;font-weight:700;font-size:13px}
.stats-p{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;width:100%;margin:8px 0}
.stats-p div{display:grid;background:#f1ecfa;border-radius:12px;padding:8px 4px}
.stats-p b{font-size:20px;color:#2e1458}.stats-p small{font-size:11.5px;color:#5d4d70}
.rang.centre{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.lien-p{color:inherit;text-decoration:none}
.lien-p:hover{text-decoration:underline}
.msg-t .m-h .lien-p{color:inherit}
.aime-par{font-size:13px;margin:6px 0 0;opacity:.95}
.aime-par .lien-p{font-weight:700;text-decoration:underline}
.aime-par .lien-t{font-size:13px;padding:0;color:inherit}
.n-ico{flex:none;font-size:18px;width:22px;text-align:center}
@media (max-width:380px){.stats-p{grid-template-columns:repeat(2,1fr)}.onglets.o4 a{font-size:12.5px}}
.onglets.o4{padding:4px;border-radius:16px}
.onglets.o4 a{display:flex;align-items:center;justify-content:center;min-height:42px;border-radius:12px;line-height:1.15;white-space:nowrap;font-size:14px}
/* Ciel & lunes réunis */
.ciel-o{margin:4px 0 14px}
.ciel-o a{font-size:13px;padding:8px 2px}
/* Moi : profil en tête */
.moi-profil{background:linear-gradient(150deg,#16284f,#3a1f6e);color:#fff6e6;border:0;display:grid;gap:12px}
.moi-profil .mp-haut{display:flex;gap:14px;align-items:center}
.moi-profil .avatar.grand{flex:none;margin:0}
.moi-profil .sur{color:#f2c14e}
.moi-profil h2{margin:2px 0;color:#fff}
.moi-profil p{margin:0;color:#e4dcf4}
.moi-profil .pied{color:#cdbbe8}
.moi-profil .stats-p{margin:0}
.moi-profil .stats-p div{background:rgba(255,255,255,.1)}
.moi-profil .stats-p b{color:#fff}.moi-profil .stats-p small{color:#d9c8ff}
.titres.gauche{justify-content:flex-start;margin:0}
.mp-vit{display:grid;gap:6px}
.mp-vit-l{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px}
.mp-ob{flex:none;display:grid;justify-items:center;gap:2px;width:72px;padding:8px 4px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff6e6;font:inherit;cursor:pointer}
.mp-ob .ob-v{width:40px;height:40px}.mp-ob .ob-emoji{font-size:28px}
.mp-ob small{font-size:11px;line-height:13px;text-align:center}
.moi-profil .rang{display:flex;flex-wrap:wrap;gap:8px}
.moi-profil .btn.deux{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
/* Aide notifications */
.aide-push{background:#fff4d6;color:#4a3700;border-radius:12px;padding:12px 14px;margin-top:10px}
.aide-push ol{margin:6px 0 0;padding-left:20px;display:grid;gap:4px}
.pied.attention{color:#8a1f15;font-weight:600;margin-top:10px}
/* Tchat : onglets toujours accessibles */
.onglets.tc-colle{position:sticky;top:max(8px,env(safe-area-inset-top,0px));z-index:25;box-shadow:0 4px 14px rgba(27,11,46,.12)}