/* Lundi 19/10/2026 23:13, mis à jour le 04/11/2026 à 23:23, puis le jeudi 05/11/2026 (inspection de Trésor : boutons et chemin animés, phrase lisible, cohérence cardiaque) : style de l’appli « Le Rituel 21 Soirs » ZYLVEA.
   Mis à jour le 06/11/2026 09:00 (demande de Trésor) : couleurs et police de peepclub.com, relevées sur leur site (vert #056962, fond blanc, menthe #E9FFEA, texte #121212 et #3B3B3B, Quicksand), en gros pour des yeux de 50 à 70 ans.
   Les noms --nuit, --or, --bordeaux gardent leur rôle, pas leur ancienne couleur. */
:root{
  --nuit:#FFFFFF; --nuit-2:#F1F8F4; --nuit-3:#E8EEEA; --trait:#B1D5A9;
  --ivoire:#121212; --gris:#3B3B3B; --rose:#056962; --rose-vif:#056962;
  --bordeaux:#056962; --bordeaux-vif:#1D6C64; --or:#056962; --or-pale:#056962; --vert:#A7D6A5; --rouge:#C62B3F;
  --contour:#056962; --barre:rgba(255,255,255,.97); --ch-avenir:#056962; --ch-fait:#B8841F; --p-fond:#056962; --p-texte:#FFFFFF; --btn-fond:linear-gradient(135deg,#1D6C64,#056962); --btn-texte:#FFFFFF;
  --f-titre:"Quicksand", "Segoe UI", Arial, sans-serif;
  --f-texte:"Quicksand", "Segoe UI", Arial, sans-serif;
  --t-texte:19px; --t-petit:16px; --t-etiq:14px; --t-h1:clamp(29px,7.6vw,38px); --t-h2:clamp(24px,6vw,29px);
  --nav-h:76px; --r:20px;
  color-scheme:light;
}
/* Écrans du soin, de la fête et de la respiration, et textes posés sur une photo : fond vert foncé, moins d'éblouissement le soir pour des yeux secs, et les feux d'artifice restent visibles. */
:root[data-theme=vert],.minuteur,.changer-oeil,.fete,.coherence,.astuce-jour,.souvenir.plein span,.tuile:not(.faite){
  --nuit:#045A54; --nuit-2:#0A6E66; --nuit-3:#13786F; --trait:#4C9A92; --ivoire:#FFFFFF; --gris:#E9FFEA; --rose:#E9FFEA; --rose-vif:#E9FFEA;
  --or:#E9FFEA; --or-pale:#E9FFEA; --vert:#A7D6A5; --rouge:#FFB3BE; color-scheme:dark; color:var(--ivoire);
  --contour:#A7D6A5; --barre:rgba(4,90,84,.97); --ch-avenir:#A7D6A5; --ch-fait:#ECC05A; --p-fond:#FFFFFF; --p-texte:#056962; --btn-fond:#FFFFFF; --btn-texte:#056962;
}
/* Écran vert : les cartes sont blanches, bien délimitées. Le soin, la fête et la cohérence gardent le même rendu dans les 2 couleurs. */
[data-theme=vert] :where(.carte,.carte-or,.carte-bonus,.tuile.faite,.sommaire button,.palier,.souvenir,.bulle,.tuile-astuce,.score,.trophee,.reponse,.photo-case,.theme,.faq,.champ input,select,textarea,.choix-pastille,.pastille-libre,.verdict),:is(.minuteur,.changer-oeil,.fete,.coherence) :where(.carte,.carte-or,.carte-bonus,.tuile.faite,.sommaire button,.palier,.souvenir,.bulle,.tuile-astuce,.score,.trophee,.reponse,.photo-case,.theme,.faq,.champ input,select,textarea,.choix-pastille,.pastille-libre,.verdict){
  --nuit:#FFFFFF; --nuit-2:#FFFFFF; --nuit-3:#FFFFFF; --trait:#B1D5A9; --ivoire:#121212; --gris:#3B3B3B; --rose:#056962; --rose-vif:#056962; --bordeaux:#056962; --bordeaux-vif:#1D6C64; --or:#056962; --or-pale:#056962; --vert:#A7D6A5; --rouge:#C62B3F; --contour:#056962; --p-fond:#056962; --p-texte:#FFFFFF; --btn-fond:linear-gradient(135deg,#1D6C64,#056962); --btn-texte:#FFFFFF; color-scheme:light; color:var(--ivoire);
}
[data-theme=vert] .fond-lueur{background:radial-gradient(90% 60% at 50% 30%,#0A7A72,transparent 70%)}
.tuile:not(.faite){border:2px solid var(--contour)}
[data-theme=vert] .tuile.faite,:is(.minuteur,.changer-oeil,.fete,.coherence) .tuile.faite{color:var(--ivoire)}
[data-theme] .reponse:disabled:not(.bonne):not(.fausse){opacity:.8}
.colonne>.salut:first-child:not(.salut-rond)>.etiq,.colonne>.salut:first-child:not(.salut-rond)>h1{padding-right:52px}
@media (max-width:299px){.salut-rond h1{font-size:23px}}
[data-theme=vert] .logo,[data-theme=vert] .logo-petit{filter:brightness(0) invert(1)}
/* Le bouton qui change la couleur de tout l'écran : blanc ou vert, au choix de la cliente */
#btn-couleur{position:absolute;z-index:15;top:calc(env(safe-area-inset-top,0px) + 10px);right:max(14px,calc(50% - 345px));width:48px;height:48px;border-radius:50%;padding:0;border:2px solid var(--contour);background:linear-gradient(135deg,#FFFFFF 50%,#056962 50%);box-shadow:0 2px 8px rgba(0,0,0,.2)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{height:100%}
html{touch-action:manipulation;background:var(--nuit)}
/* Écran plein cadre ouvert : la page du dessous n'existe plus à l'écran, même sous les barres transparentes d'un téléphone */
html:has(body>:is(.minuteur,.fete,.coherence)){background:#045A54}
body:has(>:is(.minuteur,.fete,.jeu,.souffle)) :is(#app,#nav,#btn-couleur){visibility:hidden}
body{margin:0;background:var(--nuit);color:var(--ivoire);font-family:var(--f-texte);font-weight:500;font-size:var(--t-texte);line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--or);outline-offset:3px;border-radius:6px}

#app{min-height:100%;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px));
  padding-top:calc(env(safe-area-inset-top,0px) + 18px);padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0px) + 28px)}
.colonne{max-width:620px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.fond-lueur{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 60% at 50% -10%,rgba(167,214,165,.28),transparent 60%)}

/* Typographie */
.etiq{font-size:var(--t-etiq);letter-spacing:.24em;text-transform:uppercase;color:var(--or);font-weight:500;margin:0}
h1,h2,h3{font-family:var(--f-titre);font-weight:600;line-height:1.2;margin:0;text-wrap:balance;letter-spacing:.005em}
/* Mercredi 04/11/2026 : aucun mot seul en fin de ligne sur les boutons, réponses et petits titres */
.btn,.reponse,.ta-titre,.ta-court,.cr-reponse,.t-titre,.t-sous,.co-titre,.v-titre,.p-titre,.aj-titre,.cb-titre,.etiq-etape,.choix-pastille{text-wrap:balance}
p{text-wrap:pretty}
.jeu,.minuteur,.fete{scrollbar-gutter:stable both-edges} /* marges égales sur ordinateur, même avec la barre de défilement */
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2)}
h3{font-size:26px}
p{margin:0}
.doux{color:var(--gris)}
.petit{font-size:var(--t-petit)}
.centre{text-align:center}
.filet{height:1px;background:linear-gradient(90deg,transparent,var(--or),transparent);opacity:.55;border:0;margin:0}

/* Boutons */
.btn{min-height:60px;width:100%;border:0;border-radius:999px;padding:0 28px;font-weight:600;font-size:19px;letter-spacing:.02em;
  display:inline-flex;align-items:center;justify-content:center;gap:12px;background:var(--btn-fond);color:var(--btn-texte);
  box-shadow:0 10px 28px -12px rgba(5,105,98,.8)}
.btn:active{transform:scale(.98)}
.btn-clair{background:transparent;border:2px solid var(--rose);color:var(--rose);box-shadow:none}
.btn-lien{background:none;border:0;color:var(--rose);text-decoration:underline;text-underline-offset:4px;min-height:48px;padding:0 6px;font-size:17px}
.btn[disabled]{opacity:.45;cursor:default}
.rangee{display:flex;gap:12px;flex-wrap:wrap}
.rangee>.btn{flex:1 1 200px}

/* Cartes */
.carte{min-width:0;background:var(--nuit-2);border:2px solid var(--contour);border-radius:var(--r);padding:22px;display:grid;gap:14px}
.carte-or{border-color:var(--contour);background:linear-gradient(160deg,var(--nuit-3),var(--nuit-2))}

/* Bienvenue */
.bienvenue{display:grid;gap:26px;padding-top:6px}
.logo{width:min(220px,calc(100vw - 150px));margin:0 auto}
.photo-accueil{border-radius:26px;overflow:hidden;aspect-ratio:4/3;position:relative;border:2px solid var(--contour)}
.photo-accueil img{width:100%;height:100%;object-fit:cover}
.gif-accueil{aspect-ratio:1/1;width:100%;max-width:360px;margin:0 auto}
.gif-accueil img{object-position:50% 65%}
.gif-accueil::after{display:none}
@media (prefers-reduced-motion:no-preference){
  .fete .apres-feux{animation:apres-feux .8s ease-out 2.8s both}
  @keyframes apres-feux{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}
.photo-accueil::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(2,46,42,.85))}
.champ{display:grid;gap:10px}
.champ label{font-weight:500}
.champ input{width:100%;min-width:0;min-height:62px;border-radius:16px;border:2px solid var(--contour);background:var(--nuit-2);padding:0 20px;font-size:21px;color:var(--ivoire)}
.champ input:focus{border-color:var(--rose);outline:none}
.rgpd{font-size:var(--t-petit);color:var(--gris);border-left:2px solid var(--or);padding-left:14px}

/* Ce soir */
.entete{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-right:56px}
.entete .logo-petit{width:118px}
.salut{display:grid;gap:10px}
.tuile{position:relative;border:0;width:100%;text-align:left;border-radius:28px;padding:26px 24px;min-height:200px;overflow:hidden;
  background:radial-gradient(130% 120% at 0% 0%,#1D6C64 0%,#056962 45%,#03403C 100%);color:#fff;display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px;
  box-shadow:0 22px 50px -24px rgba(5,105,98,.9)}
.tuile .t-titre{font-family:var(--f-titre);font-size:clamp(25.2px,6.7vw,31.9px);font-weight:600;line-height:1.2}
.tuile .t-sous{font-size:18px;opacity:.92;margin-top:8px}
.tuile .t-go{margin-top:18px;display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:10px 20px;font-weight:600;font-size:18px}
.tuile img{width:clamp(96px,26vw,128px);height:auto;border-radius:50%;box-shadow:0 0 0 3px rgba(233,255,234,.55),0 0 40px rgba(233,255,234,.35)}
.tuile.faite{background:linear-gradient(150deg,var(--nuit-3),var(--nuit-2));border:2px solid var(--contour);cursor:default}
.tuile.faite .t-titre{color:var(--or-pale)}
.mot{font-family:var(--f-titre);font-size:21px;line-height:1.3;font-style:normal}
.signature{font-size:var(--t-petit);color:var(--or);letter-spacing:.14em;text-transform:uppercase}

/* Chemin des 21 soirs */
.chemin{position:relative;margin:6px 0}
.chemin svg.trace{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.etape{display:contents}
.pastille{position:absolute;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font-weight:600;font-size:19px;
  background:var(--p-fond);border:2px solid var(--contour);color:var(--p-texte);z-index:1}
.pastille.futur{opacity:1}
.pastille.faite{background:linear-gradient(135deg,#FFF6D2,#ECC05A 55%,#B07B1E);border-color:#B07B1E;color:#4A2F06;font-size:24px;box-shadow:0 4px 14px rgba(236,192,90,.7)}
.pastille.repere{font-size:24px}
.pastille.rate,.rj.rate{border-color:var(--rouge);overflow:hidden;background:var(--nuit)}
.pastille.rate.clignote,.rj.rate.clignote{background:var(--rouge)}
.pastille.rate.vu,.rj.rate.vu{background:rgba(226,86,106,.12)}
.rate i{position:absolute;left:16%;right:16%;top:calc(50% - 2px);height:4px;border-radius:2px;background:var(--rouge)}
.rate i:nth-child(1){transform:rotate(45deg)}.rate i:nth-child(2){transform:rotate(-45deg)}
.ronds-jours{display:flex;flex-wrap:wrap;gap:7px}
.rj{position:relative;width:22px;height:22px;border-radius:50%;border:2px solid var(--contour);display:block}
.rj.fait{background:linear-gradient(135deg,#FFF6D2,#ECC05A 55%,#B07B1E);border-color:#B07B1E}
.rj.ici{border-color:var(--or);box-shadow:0 0 0 2px rgba(5,105,98,.35)}
.rj.rate i{height:2.5px;top:calc(50% - 1.25px)}
@media (prefers-reduced-motion:no-preference){
  .rate.clignote{animation:clignote 2.6s ease-in-out infinite}
  .rate.vu i:nth-child(1){animation:x-un .7s ease-out both}
  .rate.vu i:nth-child(2){animation:x-deux .7s .25s ease-out both}
  @keyframes clignote{0%,100%{opacity:1}50%{opacity:.28}}
  @keyframes x-un{from{transform:rotate(45deg) scaleX(0)}to{transform:rotate(45deg) scaleX(1)}}
  @keyframes x-deux{from{transform:rotate(-45deg) scaleX(0)}to{transform:rotate(-45deg) scaleX(1)}}
}
.fleche{display:grid;justify-items:center;color:var(--or);line-height:0}
.fleche[hidden]{display:none}
.retour-haut{justify-self:start;flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;padding:0;border:2px solid var(--contour);background:var(--nuit-2);color:var(--or-pale);cursor:pointer}
.retour-haut[hidden]{display:none}
.changer-oeil .retour-haut{position:absolute;top:calc(env(safe-area-inset-top,0px) + 14px);left:max(16px,env(safe-area-inset-left,0px))}
.fleche.a-droite{justify-items:end;padding-right:calc(25% - 21px)}
@media (prefers-reduced-motion:no-preference){
  .fleche svg{animation:fleche-bouge 1.3s ease-in-out infinite}
  @keyframes fleche-bouge{0%,100%{transform:translateY(-5px)}50%{transform:translateY(5px)}}
}
.minuteur.prep .anneau{width:min(52vw,30vh,250px)}
.minuteur.prep .milieu{gap:12px}
@media (max-height:620px){.minuteur.prep .anneau{width:min(38vw,24vh)}.minuteur.prep .milieu{gap:6px}.minuteur.prep .consigne-min{font-size:15px;line-height:1.3}.minuteur.prep .oeil{font-size:19px}}
.minuteur.prep .bas{gap:6px}
.anneau .centre-a.prep-fond{background:var(--nuit-2);display:grid;place-items:center}
.prep-baguette{width:100%;height:100%;object-fit:cover}
.photo-vivante{border-radius:24px;overflow:hidden;border:2px solid var(--contour);aspect-ratio:4/3}
.photo-vivante img{display:block;width:100%;height:100%;object-fit:cover}
.photo-vivante.portrait{aspect-ratio:4/5;width:100%;max-width:440px;margin:0 auto}
@media (prefers-reduced-motion:no-preference){
  .photo-vivante img{animation:photo-vit 16s ease-in-out infinite alternate}
  @keyframes photo-vit{from{transform:scale(1)}to{transform:scale(1.1)}}
}
.ecoute-secours{display:grid;gap:10px}
.ecoute-secours[hidden]{display:none}
.co-sous{max-width:30ch;color:var(--gris);text-align:center}
.detail-liste{display:grid;gap:0;border:2px solid var(--contour);border-radius:18px;overflow:hidden}
.detail-liste[hidden]{display:none}
.detail-ligne{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:8px;align-items:center;padding:12px 14px;font-size:16px}
.detail-ligne+.detail-ligne{border-top:2px solid var(--contour)}
.detail-signe{font-weight:700;text-align:center}.detail-signe.ok{color:var(--or)}.detail-signe.non,.detail-droite.non{color:var(--rouge)}
.detail-droite{color:var(--gris);text-align:right}
.champ.garder-mots{gap:10px}
.pastille.ici{width:82px;height:82px;border:0;background:none;z-index:2}
.pastille.ici img{position:relative;width:82px;height:82px;border-radius:50%;box-shadow:0 0 0 3px var(--or),0 0 32px rgba(5,105,98,.45)}
.pastille.ici .halo{position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--or)}
.etiq-etape{position:absolute;transform:translateY(-50%);font-size:15px;color:var(--gris);max-width:30%;line-height:1.25}
.repere-txt{color:var(--or)}.ce-soir{color:var(--or-pale);font-weight:600}.manque{color:var(--rouge);font-weight:600}
.legende{display:flex;gap:6px 16px;flex-wrap:wrap;font-size:var(--t-petit);color:var(--gris)}
.legende b{font-size:15px;line-height:1;color:var(--or);margin-right:6px}
.legende i{display:inline-block;width:14px;height:14px;border-radius:50%;margin-right:6px;vertical-align:-1px}
@media (prefers-reduced-motion:no-preference){
  .pastille.faite{animation:pop .5s cubic-bezier(.3,1.6,.5,1) both}
  @keyframes pop{from{transform:translate(-50%,-50%) scale(.3);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}
  .pastille.ici .halo{animation:halo 2s ease-out infinite}
  @keyframes halo{from{transform:scale(1);opacity:.9}to{transform:scale(1.35);opacity:0}}
  .rp{animation:remplit 1.2s ease-out both}
  @keyframes remplit{from{stroke-dashoffset:var(--c)}}
}
.salut-rond{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:18px}
.rond-progres{position:relative;width:112px;height:112px}
.rond-progres svg{width:100%;height:100%;transform:rotate(-90deg)}
.rp-chiffre{position:absolute;inset:0;display:grid;place-content:center;text-align:center;line-height:1}
.rp-chiffre b{font-family:var(--f-titre);font-size:33.6px;font-weight:600;color:var(--or-pale);line-height:1.2;font-variant-numeric:lining-nums}
.rp-chiffre span{font-size:14px;color:var(--gris);margin-top:2px}
.rattrapage{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:14px;padding:16px 18px}
.ronds-r{display:flex;gap:6px}
.ronds-r i{width:18px;height:18px;border-radius:50%;border:2px solid var(--rouge)}
.ronds-r i.pris{background:var(--rouge)}
.mini-chemin svg{width:100%;height:auto;display:block}
.mc-pt{fill:var(--nuit-3);stroke:var(--or);stroke-width:1.4}
.mc-or{stroke-dasharray:1;stroke-dashoffset:0}
@media (prefers-reduced-motion:no-preference){
  .mc-pt{animation:mcpt 4.4s ease-out infinite both}
  @keyframes mcpt{0%{fill:var(--nuit-3)}12%,100%{fill:var(--or)}}
  .mc-or{animation:mcor 4.4s linear infinite}
  @keyframes mcor{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
}

/* Minuteur */
.minuteur{position:fixed;inset:0;z-index:30;background:radial-gradient(90% 60% at 50% 30%,#0A7A72,var(--nuit) 70%);display:grid;
  grid-template-rows:auto 1fr auto;padding:calc(env(safe-area-inset-top,0px) + 18px) max(20px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 24px) max(20px,env(safe-area-inset-left,0px));overflow-y:auto}
.minuteur .haut{display:flex;justify-content:space-between;align-items:center;max-width:620px;width:100%;margin:0 auto}
.minuteur .milieu{display:grid;justify-items:center;align-content:center;gap:22px;text-align:center}
.anneau{position:relative;width:min(78vw,340px);aspect-ratio:1}
.anneau svg{width:100%;height:100%;transform:rotate(-90deg)}
.anneau .fond-a{fill:none;stroke:var(--trait);stroke-width:7}
.anneau .prog{fill:none;stroke:url(#or);stroke-width:7;stroke-linecap:round;transition:stroke-dashoffset .3s linear}
.anneau .moitie{fill:var(--or-pale)}
.anneau .centre-a{background:#E9B9A6;position:absolute;inset:16%;border-radius:50%;overflow:hidden;box-shadow:0 0 60px rgba(233,255,234,.25)}
.anneau .centre-a img{width:100%;height:100%;object-fit:cover}
.anneau.actif .centre-a{animation:respire 6s ease-in-out infinite}
@keyframes respire{0%,100%{box-shadow:0 0 40px rgba(233,255,234,.18)}50%{box-shadow:0 0 80px rgba(233,255,234,.42)}}
.temps{font-family:var(--f-titre);font-size:clamp(47px,13.4vw,63.8px);font-weight:600;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.oeil{font-size:22px;color:var(--rose);font-weight:500}
.consigne-min{max-width:30ch;color:var(--gris)}
.segments{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;width:min(78vw,340px)}
.segments i{height:6px;border-radius:6px;background:var(--trait)}
.segments i.fait{background:var(--or)}.segments i.en-cours{background:linear-gradient(90deg,var(--or),var(--or-pale))}
.anneau .centre-a .geste{width:100%;height:100%;transform:none;display:block}
.vers-droite .baguette-g{animation:glisse-d 5s ease-in-out infinite}
.vers-gauche .baguette-g{animation:glisse-g 5s ease-in-out infinite}
@keyframes glisse-d{0%{transform:translateX(62px);opacity:0}12%{opacity:1}85%{opacity:1}100%{transform:translateX(146px);opacity:0}}
@keyframes glisse-g{0%{transform:translateX(138px);opacity:0}12%{opacity:1}85%{opacity:1}100%{transform:translateX(54px);opacity:0}}
.led{filter:drop-shadow(0 0 6px #ff4040)}
.minuteur .bas{max-width:620px;width:100%;margin:0 auto;display:grid;gap:12px}

/* Fin de soin, fête */
.fete{position:fixed;inset:0;z-index:40;background:radial-gradient(90% 60% at 50% 25%,#0A7A72,var(--nuit) 72%);overflow-y:auto;
  padding:calc(env(safe-area-inset-top,0px) + 28px) max(20px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 28px) max(20px,env(safe-area-inset-left,0px))}
.fete .colonne{text-align:center;justify-items:center}
.couronne{width:84px;height:84px;color:var(--or)}
.fete .ange{width:min(42vw,180px);animation:flotte 5s ease-in-out infinite}
.medaille-fete .ange{width:42%}
@keyframes flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.fete .citation{font-family:var(--f-titre);font-size:clamp(22.7px,5.9vw,27.7px);line-height:1.25}
#poudre{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:60}

/* Lire */
.lecteur{display:grid;gap:22px}
.lecteur .image-l{border-radius:22px;overflow:hidden;border:2px solid var(--contour);background:var(--nuit-2)}
.lecteur .image-l img{width:100%;height:auto;max-height:58vh;object-fit:contain;margin:0 auto}
.lecteur .texte-l{display:grid;gap:16px}
.lecteur .texte-l h3{font-family:var(--f-texte);font-size:20px;font-weight:600;color:var(--rose)}
.lecteur .texte-l ul{margin:0;padding-left:22px;display:grid;gap:8px}
.lecteur .avance{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.lecteur .avance .btn{padding:0 10px;font-size:18px;white-space:nowrap;gap:6px}
.barre{height:4px;border-radius:4px;background:var(--trait);overflow:hidden}
.barre i{display:block;height:100%;background:linear-gradient(90deg,var(--bordeaux-vif),var(--or))}
.sommaire{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.sommaire button{width:100%;text-align:left;min-height:58px;border-radius:14px;border:2px solid var(--contour);background:var(--nuit-2);padding:10px 16px;display:flex;gap:14px;align-items:center;font-size:18px}
.sommaire b{font-family:var(--f-titre);font-size:20.2px;color:var(--or);min-width:30px}

/* Mon espace */
.paliers{display:grid;gap:12px}
.palier{display:grid;grid-template-columns:76px 1fr;gap:16px;align-items:center;padding:14px;border-radius:18px;border:2px solid var(--contour);background:var(--nuit-2)}
.palier .med{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-titre);font-size:20.2px;font-weight:600;
  border:2px solid var(--contour);color:var(--gris);background-size:cover;background-position:center}
.palier.atteint{border-color:var(--contour)}
.palier .med{filter:grayscale(.75) brightness(.85);opacity:.6}
.palier.atteint .med{border-color:var(--or);color:var(--nuit);background-color:var(--or-pale);filter:none;opacity:1;box-shadow:0 0 24px rgba(5,105,98,.35)}
.medaille-fete{position:relative;width:min(62vw,250px);aspect-ratio:1;margin:0 auto}
.medaille-fete .med-grande{width:100%;height:100%;border-radius:50%;box-shadow:0 0 70px rgba(233,255,234,.35)}
.medaille-fete .ange{position:absolute;right:-22%;bottom:-8%;width:42%}
@media (prefers-reduced-motion:no-preference){.medaille-fete .med-grande{animation:apparait .9s ease-out both}@keyframes apparait{from{transform:scale(.6) rotate(-12deg);opacity:0}to{transform:none;opacity:1}}}
.palier .nom{font-family:var(--f-titre);font-size:21px;line-height:1.2}
.souvenirs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.souvenir{border-radius:18px;border:1.5px dashed var(--trait);aspect-ratio:3/4;display:grid;place-items:center;text-align:center;padding:10px;overflow:hidden;position:relative;background:var(--nuit-2)}
.souvenir img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.souvenir span{position:relative;font-size:var(--t-petit);color:var(--gris)}
.souvenir.plein span{background:rgba(2,46,42,.75);padding:4px 10px;border-radius:999px;color:var(--ivoire);align-self:end}
.interrupteur{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:60px}
.interrupteur span{min-width:0}
.interrupteur input{appearance:none;width:64px;height:38px;border-radius:999px;border:2px solid var(--contour);background:var(--nuit);position:relative;flex:0 0 auto;cursor:pointer;transition:background .2s}
.interrupteur input::after{content:"";position:absolute;top:2px;left:2px;width:30px;height:30px;border-radius:50%;background:var(--contour);transition:transform .2s ease-out}
.interrupteur input:checked{background:var(--bordeaux-vif)}
.interrupteur input:checked::after{transform:translateX(26px);background:#fff}
.aide{width:44px;height:44px;border-radius:50%;border:2px solid var(--gris);background:none;color:var(--gris);font-weight:600;font-size:16px;flex:0 0 auto}
.bulle{background:var(--nuit-3);border-radius:14px;padding:14px 16px;font-size:var(--t-petit);color:var(--ivoire)}
.titre-aide{display:flex;align-items:center;gap:10px;justify-content:space-between}
.confirmer{position:fixed;inset:0;z-index:60;display:grid;align-content:center;justify-items:center;gap:20px;padding:24px;text-align:center;background:#045A54;color:#fff;font-size:21px;line-height:1.4}
.confirmer .rangee{width:min(100%,420px)}
select{min-height:58px;border-radius:14px;border:2px solid var(--contour);background:var(--nuit-2);color:var(--ivoire);padding:0 16px;font:inherit;font-size:19px}

/* Navigation du bas */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:20;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  background:var(--barre);border-top:2px solid var(--contour);
  padding:6px max(10px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 6px) max(10px,env(safe-area-inset-left,0px))}
.nav button{background:none;border:0;min-height:64px;display:grid;justify-items:center;align-content:center;gap:4px;color:var(--gris);font-size:clamp(11px,3.3vw,15px);font-weight:500;border-radius:14px;min-width:0}
.nav svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.nav button span{white-space:nowrap}
.nav button[aria-current="page"]{color:var(--rose)}
.nav button[aria-current="page"] svg{stroke:var(--or)}

/* Astuces */
.gros{font-size:21px;line-height:1.5}
.progres-texte{display:grid;gap:8px}
.astuce-jour{position:relative;border:0;padding:0;border-radius:26px;overflow:hidden;background:none;text-align:left;color:#fff;aspect-ratio:4/3;width:100%}
.astuce-jour img{width:100%;height:100%;object-fit:cover}
.astuce-jour::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 12%,rgba(2,46,42,.82) 55%,rgba(2,46,42,.96))}
.aj-texte{position:absolute;left:20px;right:20px;bottom:18px;z-index:1;display:grid;gap:6px}
.aj-titre{font-family:var(--f-titre);font-size:clamp(23.5px,6.7vw,30.2px);font-weight:600;line-height:1.2}
.aj-go{font-weight:600;font-size:18px}
.grille-astuces{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.tuile-astuce{position:relative;border:2px solid var(--contour);background:var(--nuit-2);border-radius:20px;overflow:hidden;padding:0 0 14px;text-align:left;display:grid;gap:4px;align-content:start}
.tuile-astuce img{width:100%;aspect-ratio:1;object-fit:cover}
.ta-titre{font-weight:600;font-size:clamp(15px,4.4vw,17px);line-height:1.25;padding:8px 12px 0}
.ta-court{font-size:15px;line-height:1.3;color:var(--gris);padding:0 12px}
.coche{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;background:var(--rose);color:var(--bordeaux);display:grid;place-items:center;font-weight:700}
.retour{justify-self:start}
.image-fiche{border-radius:24px;overflow:hidden;aspect-ratio:4/3}
.image-fiche img{width:100%;height:100%;object-fit:cover}
.pourquoi{display:grid;gap:10px}
.mini-minuteur{display:grid;gap:12px;justify-items:center}
.mm-chiffre{font-family:var(--f-titre);font-size:73.9px;line-height:1;color:var(--or-pale);font-variant-numeric:tabular-nums}
/* Comprendre */
.dessin{border-radius:24px;overflow:hidden;border:2px solid var(--contour)}
.dessin svg{display:block;width:100%;height:auto}
.gl{fill:#ECC05A}
.points{display:grid;gap:12px}
.point{border-left:3px solid var(--or);padding-left:14px;display:grid;gap:2px}
.p-titre{font-weight:600}
.goutte-huile{fill:#FFF0B8}.evapore{fill:#8FC4E6}
@media (prefers-reduced-motion:no-preference){
  .goutte-huile{animation:monte 2.6s ease-in infinite}
  @keyframes monte{0%{transform:translateY(20px);opacity:0}30%{opacity:1}100%{transform:translateY(-44px);opacity:0}}
  .evapore{animation:evap 3s ease-out infinite}
  @keyframes evap{from{transform:translateY(0);opacity:.95}to{transform:translateY(-54px);opacity:0}}
  .huile-vague{animation:vagueh 3s ease-in-out infinite}
  @keyframes vagueh{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
  .larme{animation:larme 2.6s ease-in infinite}
  @keyframes larme{from{transform:translateY(0);opacity:1}to{transform:translateY(32px);opacity:0}}
  .anneau-tourne{transform-origin:160px 100px;animation:tourne 14s linear infinite}
  @keyframes tourne{to{transform:rotate(360deg)}}
  .goutte-tombe{animation:tombe 2.4s ease-in infinite}
  @keyframes tombe{0%{transform:translateY(0);opacity:1}75%{transform:translateY(74px);opacity:1}100%{transform:translateY(84px);opacity:0}}
  .vague{animation:vague 1.8s ease-in-out infinite}
  @keyframes vague{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-8px)}}
}
/* Pause : quiz et respiration */
.scores{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px}
.score{background:var(--nuit-2);border:2px solid var(--contour);border-radius:18px;padding:14px 16px;display:grid;gap:2px}
.score b{font-family:var(--f-titre);font-size:33.6px;line-height:1;color:var(--or-pale);font-weight:600}
.score span{font-size:15px;color:var(--gris);line-height:1.25}
.tuile-quiz{grid-template-columns:1fr;min-height:170px}
.carte-bouton{grid-template-columns:auto minmax(0,1fr);align-items:center;text-align:left;width:100%;color:var(--ivoire);font:inherit}
.carte-bouton>span:last-child{display:grid;gap:2px}
.cb-titre{font-weight:600}
.rond-souffle{width:58px;height:58px;border-radius:50%;background:radial-gradient(circle,var(--or-pale),rgba(5,105,98,.2))}
.trophees{display:grid;gap:10px}
.trophee{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center;padding:12px 14px;border:2px solid var(--contour);border-radius:18px;background:var(--nuit-2)}
.t-rond{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:26px;color:var(--gris);border:2px solid var(--contour)}
.trophee.gagne{border-color:var(--contour)}
.trophee.gagne .t-rond{background:linear-gradient(135deg,var(--or-pale),var(--or));color:#fff;border:0}
.jeu{position:fixed;inset:0;z-index:35;background:var(--nuit);overflow-y:auto;padding:calc(env(safe-area-inset-top,0px) + 16px) max(20px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 28px) max(20px,env(safe-area-inset-left,0px))}
.jeu-haut{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center}
.fermer{width:48px;height:48px;border-radius:50%;border:2px solid var(--contour);background:none;color:var(--gris);font-size:18px}
.barre.grosse{height:10px;border-radius:10px}
.barre.grosse i{transition:width .3s ease-out}
.question{font-size:clamp(29px,7.6vw,38px);line-height:1.15}
.choix{display:grid;gap:12px}
.reponse{min-height:66px;border-radius:18px;border:2px solid var(--contour);border-bottom-width:5px;background:var(--nuit-2);padding:12px 18px;text-align:left;font-size:19px;font-weight:500;line-height:1.3;color:var(--ivoire)}
.reponse:not(:disabled):active{transform:translateY(2px)}
.reponse:disabled{cursor:default;opacity:.6}
.reponse.bonne{border-color:#056962;background:#E5FBE2;color:#0B3B36;opacity:1}
.reponse.fausse{border-color:var(--rouge);background:#FDECEE;color:#7A1626;opacity:1}
.verdict{border-radius:20px;padding:18px;display:grid;gap:10px}
.verdict.ok{background:#E5FBE2;color:#0B3B36;border:2px solid #056962}.verdict.non{background:#FDECEE;color:#7A1626;border:2px solid #C62B3F}
.v-titre{font-family:var(--f-titre);font-size:25.2px;font-weight:600;line-height:1.2}
.fin-jeu{text-align:center;justify-items:center}
.fin-jeu .scores{width:100%}.fin-jeu .carte{width:100%}
.etoiles{font-size:58px;line-height:1;display:flex;gap:8px}
.etoiles span{color:var(--trait)}.etoiles span.on{color:var(--or);animation:pop2 .5s cubic-bezier(.3,1.6,.5,1) both}
@keyframes pop2{from{transform:scale(.2);opacity:0}to{transform:scale(1);opacity:1}}
.souffle{display:grid;place-content:center;justify-items:center;gap:22px;text-align:center}
.souffle .fermer{position:absolute;top:calc(env(safe-area-inset-top,0px) + 16px);right:20px}
.s-rond{width:min(58vw,240px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,var(--or-pale),rgba(5,105,98,.25) 70%);animation:souffle 10s ease-in-out infinite}
.s-rond.fini{animation:none;transform:scale(.8)}
@keyframes souffle{0%{transform:scale(.55)}40%{transform:scale(1)}100%{transform:scale(.55)}}
.s-mot{font-family:var(--f-titre);font-size:30.2px;font-weight:600}
.etape-inst{display:grid;grid-template-columns:40px minmax(0,1fr);gap:10px;align-items:start}
.etape-inst b{font-family:var(--f-titre);font-size:23.5px;color:var(--or);line-height:1.2}
@media (min-width:700px){.grille-astuces{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Phrase écrite à la plume */
.ecrit{font-family:var(--f-titre);font-size:clamp(21px,5.5vw,25.2px);line-height:1.3;color:var(--or-pale);font-weight:600;border-left:3px solid var(--or);padding-left:14px;text-align:left}
/* Mon album */
.album-zone{display:grid;gap:14px}
.album{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.photo-case{border-radius:18px;overflow:hidden;background:var(--nuit-2);border:2px solid var(--contour);display:grid;align-content:start;min-width:0}
.photo-case.pleine{border-color:var(--contour)}
.photo-case img{width:100%;aspect-ratio:3/4;object-fit:cover}
.pc-vide{width:100%;aspect-ratio:3/4;border:0;background:none;color:var(--ivoire);display:grid;grid-template-columns:minmax(0,1fr);align-content:center;justify-items:center;gap:6px;padding:10px;text-align:center}
.pc-vide .petit{line-height:1.3;text-wrap:balance}
.ta-titre,.ta-court,.pc-vide .petit,.pc-vide .p-titre{overflow-wrap:break-word;hyphens:auto;min-width:0;max-width:100%}
.tuile-astuce,.theme{min-width:0}
.pc-plus{width:52px;height:52px;border-radius:50%;border:1.5px solid var(--or);color:var(--or);display:grid;place-items:center;font-size:28px;line-height:1}
.pc-info{padding:10px 12px;display:grid;gap:2px}
.pc-actions{display:flex;justify-content:space-between;gap:6px;flex-wrap:wrap}
.pc-actions .btn-lien{min-height:44px;font-size:16px;padding:0 2px}
.effacer-conf{padding:0 12px 12px;display:grid;gap:8px}
.btn-petit{min-height:48px;font-size:16px;padding:0 10px;flex:1 1 90px}
textarea{width:100%;min-width:0;border-radius:16px;border:2px solid var(--contour);background:var(--nuit);padding:14px 16px;font-size:19px;color:var(--ivoire);resize:vertical}
textarea:focus{border-color:var(--rose);outline:none}

/* Quiz : thèmes, points forts, carré rouge */
.scores.trois{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.scores.trois .score{padding:12px 10px}
.scores.trois .score b{font-size:clamp(26px,7.4vw,36px)}
.scores.trois .score span{font-size:14px}
.niveau{gap:10px}
.themes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.theme{border:2px solid var(--contour);background:var(--nuit-2);border-radius:18px;overflow:hidden;padding:0 0 12px;text-align:left;display:grid;gap:6px;align-content:start;color:var(--ivoire);min-width:0}
.theme .dessin{border:0;border-radius:0;height:92px}
.theme .dessin svg{height:100%;object-fit:cover}
.theme-barre{margin:2px 12px 0;display:block}
.barre i{transition:width .5s ease-out}
.carre-rouge{background:var(--nuit-2);border:3px solid var(--rouge);border-radius:6px}
.cr-haut{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center}
.lampe{width:58px;height:58px;display:block}
.cr-reponse{font-family:var(--f-titre);font-size:clamp(20.2px,5.4vw,25.2px);line-height:1.2;font-weight:600;color:var(--ivoire)}
@media (prefers-reduced-motion:no-preference){
  .lampe-halo{transform-origin:32px 26px;animation:lueur 1.8s ease-in-out infinite}
  @keyframes lueur{0%,100%{opacity:.2;transform:scale(.85)}50%{opacity:.6;transform:scale(1.15)}}
  .clin{transform-origin:160px 86px;animation:clin 3s ease-in-out infinite}
  @keyframes clin{0%,44%,56%,100%{transform:scaleY(1)}50%{transform:scaleY(.08)}}
  .souffle-air{animation:souffleair 1.8s ease-in-out infinite}
  @keyframes souffleair{0%{opacity:0;transform:translateY(-8px)}50%{opacity:1}100%{opacity:0;transform:translateY(16px)}}
  .goutte-lente{animation:lente 4s ease-in infinite}
  @keyframes lente{0%{transform:translateY(-16px);opacity:0}25%{opacity:1}100%{transform:translateY(70px);opacity:0}}
  .brosse{animation:brosse 2.6s ease-in-out infinite}
  @keyframes brosse{0%,100%{transform:translate(0,0)}50%{transform:translate(-50px,-16px)}}
}
/* Réglage avant le challenge */
.reglage-q{display:grid;gap:10px}
.pastilles{display:flex;flex-wrap:wrap;gap:8px}
.choix-pastille{min-height:54px;padding:8px 16px;border-radius:999px;border:2px solid var(--contour);background:var(--nuit-2);color:var(--ivoire);font-size:17px;font-weight:500}
.choix-pastille[aria-pressed="true"]{background:var(--rose);border-color:var(--rose);color:var(--nuit);font-weight:600;box-shadow:0 0 0 2px var(--nuit),0 0 0 4px var(--rose)}
/* Changer d'œil */
.changer-oeil{position:absolute;inset:0;z-index:5;display:grid;place-content:center;gap:10px;text-align:center;background:rgba(2,46,42,.92);padding:20px;animation:entre .3s ease-out both}
.co-titre{font-family:var(--f-titre);font-size:clamp(31.9px,9.2vw,43.7px);font-weight:600;line-height:1.2;color:var(--or-pale)}
.changer-oeil{justify-items:center;gap:12px;place-content:safe center;background:radial-gradient(90% 60% at 50% 30%,#0A7A72,var(--nuit) 70%);overflow-y:auto}
.co-dessin{width:min(56vw,26vh,240px);aspect-ratio:1;border-radius:50%;overflow:hidden;background:#E9B9A6;box-shadow:0 0 50px rgba(233,255,234,.3)}
.co-dessin .geste{display:block;width:100%;height:100%}
.geste-gif,.anneau .centre-a .geste-gif,.co-dessin .geste-gif{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 38%}
.geste-gif.miroir{transform:scaleX(-1)}
.co-bouton{width:min(100%,360px)}
@media (prefers-reduced-motion:no-preference){
  .changer-oeil .etiq{animation:co-monte .5s ease-out both}
  .co-dessin{animation:co-monte .6s .1s ease-out both,co-lueur 2.6s .7s ease-in-out infinite}
  .co-titre{animation:co-monte .6s .25s ease-out both}
  .co-bouton{animation:co-monte .6s .4s ease-out both,co-appel 2s 1.2s ease-in-out infinite}
  @keyframes co-monte{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  @keyframes co-lueur{0%,100%{box-shadow:0 0 30px rgba(233,255,234,.2)}50%{box-shadow:0 0 70px rgba(233,255,234,.55)}}
  @keyframes co-appel{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
}
.mot-rappel{font-family:var(--f-titre);font-size:clamp(18.5px,4.9vw,21.8px);line-height:1.25;text-wrap:pretty}
.scores.deux{grid-template-columns:repeat(2,minmax(0,1fr))}
.colonne-bilan{display:grid;gap:16px}
.champ input[type=date],.champ input[type=time]{appearance:none;-webkit-appearance:none;color-scheme:inherit;font-family:inherit;font-size:19px}
.champ-titre{font-weight:500}
.fois{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.fois .btn[aria-pressed=true]{background:linear-gradient(160deg,var(--or-pale),var(--or));color:var(--nuit);border-color:var(--or)}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0px) + 18px);z-index:70;
  background:var(--ivoire);color:var(--nuit);padding:14px 22px;border-radius:26px;font-weight:500;width:max-content;max-width:min(calc(100vw - 40px),420px);text-align:center;text-wrap:balance;box-shadow:0 12px 30px rgba(0,0,0,.4)}

/* Jeudi 05/11/2026 : inspection de Trésor. Rien pour décorer : chaque mouvement montre où toucher ou ce qui vient de se passer */
.t-rdv{margin-top:10px;font-size:17px;line-height:1.35;font-weight:500;color:#E9FFEA}
.t-rdv.a-l-heure{font-weight:600;color:#fff}
.reglage-q .rappel-recap,.rappel-recap{font-size:18px;color:var(--or-pale);font-weight:500}
.rappel-ok{color:var(--or);font-weight:600}
.pastille-libre{display:inline-flex;align-items:center;gap:8px;cursor:pointer;border-color:var(--or);color:var(--or-pale)}
.pastille-libre input{appearance:none;-webkit-appearance:none;background:none;border:0;color:inherit;font:inherit;font-size:17px;min-width:96px;max-width:124px;min-height:36px;padding:0;color-scheme:inherit;outline:none}
.pastille-libre.choisie{background:var(--rose);border-color:var(--rose);color:var(--nuit);font-weight:600}
.pastille-libre.choisie input{color-scheme:inherit}
.zone-restaurer{display:grid}
.zone-restaurer .btn-lien{text-align:center;line-height:1.35;padding:8px 6px}
.salut-texte{display:grid;gap:8px;min-width:0}
/* Volume de la musique du soin */
.volume-soin{display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center;gap:10px;width:min(100%,360px);margin:0 auto}
.minuteur.prep .volume-soin{display:none}
.minuteur:not(.prep) .anneau{width:min(70vw,34vh,340px)}
.minuteur:not(.prep) .milieu{gap:10px}
.minuteur:not(.prep) .segments{width:min(70vw,340px)}
.minuteur:not(.prep) .temps{font-size:clamp(46px,8vh,76px)}
.minuteur:not(.prep) .oeil{font-size:20px;line-height:1.25}
.minuteur:not(.prep) .consigne-min{font-size:17px;line-height:1.35;max-width:34ch}
.minuteur:not(.prep) .bas{gap:8px}
.minuteur:not(.prep) .bas .btn{min-height:54px}
@media (max-height:620px){.minuteur:not(.prep) .anneau{width:min(60vw,26vh)}.minuteur:not(.prep) .temps{font-size:40px}.minuteur:not(.prep) .oeil{font-size:18px}.minuteur:not(.prep) .consigne-min{font-size:15px;line-height:1.25}.minuteur:not(.prep) .milieu{gap:6px}}
.vol-coupe{width:48px;height:48px;border-radius:50%;border:2px solid var(--contour);background:var(--nuit-2);color:var(--or-pale);display:grid;place-items:center;padding:0}
input[type=range]{appearance:none;-webkit-appearance:none;width:100%;height:32px;background:none;margin:0;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:8px;background:var(--trait)}
input[type=range]::-moz-range-track{height:8px;border-radius:8px;background:var(--trait)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;margin-top:-11px;border-radius:50%;background:var(--or-pale);border:0;box-shadow:0 2px 8px rgba(0,0,0,.45)}
input[type=range]::-moz-range-thumb{width:30px;height:30px;border-radius:50%;background:var(--or-pale);border:0}
.vol-ligne{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center}
/* Chemin : le vert vit, l’or brille */
.pastille .signe{display:block;line-height:1}
.pastille.faite::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid #ECC05A;opacity:0;pointer-events:none}
.pastille.repere{box-shadow:0 0 16px rgba(236,192,90,.55)}
.pastille.repere.futur{opacity:1}
.pastille.repere.faite{background:linear-gradient(135deg,#FFF6D2,#ECC05A 55%,#B07B1E);border-color:#B07B1E;color:#4A2F06;box-shadow:0 0 26px rgba(236,192,90,.8)}
.pastille.repere.faite::after{border-color:#ECC05A}
/* L’astuce du jour se voit sur n’importe quelle photo */
.astuce-jour::after{background:linear-gradient(180deg,transparent 8%,rgba(2,46,42,.72) 42%,rgba(2,46,42,.97))}
.aj-texte .etiq{justify-self:start;padding:6px 14px;border-radius:999px;background:#E9FFEA;color:#045A54;font-weight:600;letter-spacing:.14em;font-size:14px}
.btn-quiz-direct{min-height:52px;font-size:17px}
.cb-go{font-weight:600;color:var(--or-pale);font-size:17px}
.carte-bouton{cursor:pointer}
.pastille-or{justify-self:start;display:inline-block;width:max-content;padding:4px 14px;border-radius:999px;background:#E9FFEA;color:#045A54;font-weight:600;font-size:14px;letter-spacing:.14em;text-transform:uppercase}
.carte-bonus{border-color:var(--contour);background:linear-gradient(160deg,var(--nuit-3),var(--nuit-2))}
.carte-bonus>span:last-child{gap:4px}
.boule-bonus{position:relative;width:34px;height:82px;display:block;border-top:3px solid var(--or);border-bottom:3px solid var(--or)}
.boule-bonus i{position:absolute;left:5px;bottom:2px;width:24px;height:24px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFFFFF,#A7D6A5)}
.tout-questions{gap:12px}
.faq{border:2px solid var(--contour);border-radius:18px;background:var(--nuit-2);overflow:hidden}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) 28px;gap:10px;align-items:center;padding:16px 18px;font-weight:600;min-height:64px;line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:28px;font-weight:400;line-height:1;color:var(--or);text-align:center;transition:transform .25s ease-out}
.faq[open] summary::after{transform:rotate(45deg)}
.faq-corps{display:grid;gap:12px;padding:0 18px 18px}
/* La séance : la boule monte, touche le trait, redescend */
.coherence{display:grid;grid-template-rows:auto auto minmax(180px,1fr) auto auto auto;justify-items:center;align-content:stretch;gap:12px;text-align:center}
.coherence .retour-haut{justify-self:start}
.co-temps{font-size:clamp(36px,9.4vw,48px)}
.co-piste{position:relative;width:min(70vw,220px);height:100%;min-height:180px;max-height:46vh}
.co-trait{position:absolute;left:0;right:0;height:5px;border-radius:5px;background:linear-gradient(90deg,transparent,var(--or),transparent)}
.co-trait.haut{top:0}.co-trait.bas{bottom:0}
.co-rail{position:absolute;left:calc(50% - 1px);top:5px;bottom:5px;width:2px;background:var(--trait)}
.co-boule{position:absolute;left:calc(50% - 27px);width:54px;height:54px;border-radius:50%;bottom:5px;transition:background-color .25s ease-out,box-shadow .25s ease-out}
.co-boule.monte{background-color:#6B3A1E;box-shadow:inset -7px -9px 14px rgba(0,0,0,.42),0 0 0 2px #C89B5E,0 0 26px rgba(200,155,94,.45)}
.co-boule.descend{background-color:#fff;box-shadow:inset -7px -9px 14px rgba(0,0,0,.12),0 0 34px rgba(255,255,255,.65)}
.coherence .s-mot{font-size:clamp(26px,6.8vw,32px);line-height:1.2;min-height:1.15em}
.co-detail{font-size:20px;color:var(--rose);min-height:1.5em}
.coherence .btn{width:min(100%,360px)}
@media (prefers-reduced-motion:no-preference){
  /* Boutons d’action : ils appellent le doigt */
  .tuile .t-go{position:relative;overflow:hidden;animation:appel-doux 2.2s ease-in-out infinite}
  .tuile .t-go::after,.btn-appel::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-18deg);animation:reflet 2.8s ease-in-out infinite;pointer-events:none}
  .btn-appel{position:relative;overflow:hidden;animation:appel-doux 2.2s ease-in-out infinite}
  @keyframes appel-doux{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(5,105,98,.5)}50%{transform:scale(1.035);box-shadow:0 0 0 9px rgba(5,105,98,0)}}
  @keyframes reflet{0%,55%{transform:translateX(0) skewX(-18deg)}100%{transform:translateX(422%) skewX(-18deg)}}
  .tuile.a-l-heure{animation:tuile-heure 1.8s ease-in-out infinite}
  @keyframes tuile-heure{0%,100%{box-shadow:0 22px 50px -24px rgba(5,105,98,.9)}50%{box-shadow:0 0 0 4px rgba(5,105,98,.65),0 22px 60px -14px rgba(5,105,98,.75)}}
  /* Chemin */
  .pastille.faite::after{animation:onde-verte 3.2s ease-out var(--d,0s) infinite}
  @keyframes onde-verte{0%{transform:scale(.85);opacity:.8}70%,100%{transform:scale(1.32);opacity:0}}
  .pastille.faite:not(.repere) .signe{animation:coche-vit 3.2s ease-in-out var(--d,0s) infinite}
  @keyframes coche-vit{0%,100%{transform:scale(1)}18%{transform:scale(1.28)}36%{transform:scale(1)}}
  .pastille.repere .signe{animation:etoile-vit 3.4s ease-in-out infinite}
  @keyframes etoile-vit{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.26) rotate(36deg)}}
  .pastille.faite::before,.pastille.repere::before{content:"";position:absolute;inset:-2px;border-radius:50%;box-shadow:0 0 26px rgba(236,192,90,1);opacity:.35;pointer-events:none;animation:or-lueur 3.2s ease-in-out var(--d,0s) infinite}
  @keyframes or-lueur{0%,100%{opacity:.35}50%{opacity:1}}
  .pastille.repere.faite{animation:pop .5s cubic-bezier(.3,1.6,.5,1) both}
      /* Souffler et bonus */
  .rond-souffle{animation:rond-vit 4s ease-in-out infinite}
  @keyframes rond-vit{0%,100%{transform:scale(.8)}50%{transform:scale(1.12)}}
  .boule-bonus i{animation:boule-vit 6s ease-in-out infinite}
  @keyframes boule-vit{0%,100%{transform:translateY(0)}50%{transform:translateY(-46px)}}
  .cb-go{animation:go-vit 1.6s ease-in-out infinite}
  @keyframes go-vit{0%,100%{opacity:1;transform:translateX(0)}50%{opacity:.75;transform:translateX(5px)}}
}

@media (min-width:900px){ :root{--t-texte:20px} .colonne{max-width:660px} }
@media (prefers-reduced-motion:no-preference){
  .vue{animation:entre .32s ease-out both}
  @keyframes entre{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){ .anneau.actif .centre-a,.fete .ange,.s-rond,.vers-droite .baguette-g,.vers-gauche .baguette-g{animation:none} .vers-droite .baguette-g,.vers-gauche .baguette-g{transform:translateX(100px)} }