/* ═══ L'APPLICATION ═══════════════════════════════════════════════════════ */
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
html,body{margin:0; min-height:100%}
body{
  background:var(--nuit); color:var(--texte);
  font:400 16px/1.55 "Sora",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden; overscroll-behavior-y:none;
}
body.fige{overflow:hidden}

/* ── l'atmosphère : deux lueurs lentes et un grain, rien de plus ───────── */
.atmosphere{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; animation:paraitre 1.4s var(--doux) both}
.atmosphere i{position:absolute; border-radius:50%; filter:blur(70px); will-change:transform}
.atmosphere i:nth-child(1){width:62vmax; height:62vmax; top:-30vmax; left:-18vmax;
  background:radial-gradient(circle,rgba(var(--accent2-rgb),.2),transparent 66%); animation:derive-a 44s var(--doux) infinite alternate}
.atmosphere i:nth-child(2){width:54vmax; height:54vmax; bottom:-26vmax; right:-16vmax;
  background:radial-gradient(circle,rgba(var(--accent-rgb),.13),transparent 68%); animation:derive-b 52s var(--doux) infinite alternate}
.atmosphere::after{content:""; position:absolute; inset:0; opacity:.5;
  background:radial-gradient(120% 80% at 50% 0%,transparent 40%,rgba(var(--fond-rgb),.7))}
@keyframes derive-a{to{transform:translate3d(8%,6%,0) scale(1.12)}}
@keyframes derive-b{to{transform:translate3d(-7%,-6%,0) scale(1.1)}}

@keyframes paraitre{from{opacity:0}to{opacity:1}}
@keyframes monte{from{opacity:0; transform:translate3d(0,18px,0)}to{opacity:1; transform:none}}
@keyframes trace{to{stroke-dashoffset:0}}

/* ── cadre ─────────────────────────────────────────────────────────────── */
.app{position:relative; z-index:1; min-height:100svh; display:flex; flex-direction:column}
.large{width:100%; max-width:1080px; margin:0 auto; padding-left:var(--g); padding-right:var(--d)}

.barre{position:sticky; top:0; z-index:12; padding-top:var(--haut);
  background:linear-gradient(var(--nuit) 46%,rgba(var(--fond-rgb),.8) 78%,transparent)}
.barre-in{display:flex; align-items:center; gap:11px; padding-block:13px 4px}
.barre-in img{width:30px; height:30px; border-radius:50%; flex:none}
.barre-nom{font:700 10.5px/1 "Sora",sans-serif; letter-spacing:.24em; text-transform:uppercase; color:var(--texte-2)}
.barre-etape{margin-left:auto; display:flex; align-items:center; gap:8px; font:600 10.5px/1.2 "Sora",sans-serif;
  letter-spacing:.15em; text-transform:uppercase; color:var(--accent); text-align:right}
.barre-etape .ic{width:15px; height:15px}
.rond-b{appearance:none; flex:none; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; cursor:pointer;
  color:var(--texte-2); background:rgba(var(--lueur),.05); border:1px solid rgba(var(--lueur),.1); transition:all var(--t-micro)}
.rond-b:hover{color:var(--texte); border-color:var(--verre-bord-vif)}
.rond-b .ic{width:16px; height:16px}
.barre-etape + .rond-b{margin-left:0}
.barre-in .rond-b:first-of-type{margin-left:auto}
.barre-etape:not([hidden]) ~ .rond-b:first-of-type{margin-left:0}
.rond-b[aria-pressed="true"]{color:var(--accent); border-color:rgba(var(--accent-rgb),.4)}

/* ── le fil ────────────────────────────────────────────────────────────── */
#fil{height:40px; margin-top:2px}
.fil{display:block; overflow:visible}
.fil-fond{fill:none; stroke:rgba(var(--craie-rgb),.15); stroke-width:1.5; stroke-dasharray:2 6; stroke-linecap:round}
.fil-trait{fill:none; stroke:var(--craie); stroke-width:2.2; stroke-linecap:round; transition:stroke-dashoffset .8s var(--doux)}
.fil-noeud{fill:var(--nuit); stroke:rgba(var(--craie-rgb),.3); stroke-width:1.5; transition:fill .4s, stroke .4s}
.fil-noeud.fait{fill:var(--craie); stroke:var(--craie)}
.fil-noeud.ici{stroke:var(--accent); stroke-width:2}
.fil-pointe{fill:none; stroke:var(--craie); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; transition:transform .8s var(--doux)}

/* ── le plateau : la carte et la scène ─────────────────────────────────── */
.plateau{flex:1; display:grid; grid-template-columns:minmax(0,1fr); gap:10px; align-content:start; padding-block:6px 24px}
@media(min-width:980px){
  .plateau{grid-template-columns:minmax(0,1fr) 330px; gap:34px; align-items:start; padding-block:26px 40px}
  .colonne{order:1} .scene{order:2}
}
.colonne{min-width:0}

/* ── la scène : le compagnon, son décor, sa bulle ──────────────────────── */
.scene{position:relative; height:128px; pointer-events:none}
#perso{position:absolute; left:-6px; bottom:-6px; width:112px}
#decor{position:absolute; right:0; top:10px; width:112px; height:91px; transition:opacity .4s var(--doux)}
.bulle{
  position:absolute; left:100px; right:0; top:8px; z-index:2; width:fit-content; max-width:calc(100% - 100px);
  padding:10px 14px; border-radius:16px 16px 16px 5px; color:var(--craie);
  font:400 13px/1.42 "Sora",sans-serif;
  background:rgba(var(--fond2-rgb),.82); border:1px solid rgba(var(--craie-rgb),.3);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  opacity:0; transform:translate3d(0,8px,0) scale(.96); transform-origin:left bottom;
  transition:opacity .28s var(--doux), transform .34s var(--ressort);
}
.bulle.visible{opacity:1; transform:none}
.bulle.visible ~ #decor{opacity:.2}
.bulle.pensee{border-style:dashed; border-radius:18px}
.bulle.pensee::before,.bulle.pensee::after{content:""; position:absolute; border:1px dashed rgba(var(--craie-rgb),.4); border-radius:50%; background:rgba(var(--fond2-rgb),.82)}
.bulle.pensee::before{width:9px; height:9px; left:-4px; bottom:-9px}
.bulle.pensee::after{width:5px; height:5px; left:-13px; bottom:-17px}
@media(min-width:980px){
  .scene{position:sticky; top:118px; height:410px}
  #perso{left:0; bottom:0; width:206px}
  #decor{right:0; top:74px; width:196px; height:159px}
  .bulle{left:26px; top:0; max-width:270px; font-size:14px; padding:12px 16px}
  .bulle.visible ~ #decor{opacity:1}
  .bulle.pensee::before{left:38px; bottom:-13px} .bulle.pensee::after{left:30px; bottom:-23px}
}

/* La scène est FIXE : le personnage reste à sa place en haut de l'écran pendant
   que la carte défile dessous. C'est lui le repère — s'il partait avec la page,
   on ne comprendrait plus qu'il accompagne tout le parcours. */
@media(max-width:979px){
  .scene{position:sticky; top:calc(var(--haut) + 88px); z-index:10;
    background:linear-gradient(var(--nuit) 90%, rgba(var(--fond-rgb),0))}
  .colonne{position:relative; z-index:1}
  /* l'en-tête et la scène forment un seul bandeau opaque : rien ne doit transparaître dessous */
  .barre{background:var(--nuit)}
}
/* sur les petits écrans, le logo suffit : le nom laisse sa place à l'étape en cours */
@media(max-width:460px){ .barre-nom{display:none} .barre-etape{white-space:nowrap} }

/* sur téléphone, la scène s'agrandit quand la carte lui laisse la place :
   accueil, changement d'étape, confirmation. C'est là que l'on regarde le film. */
.scene{transition:height .5s var(--doux)}
#perso,#decor{transition:width .5s var(--doux), height .5s var(--doux), top .5s var(--doux), opacity .4s var(--doux)}
@media(max-width:979px){
  .scene.grande{height:214px}
  .scene.grande #perso{width:184px}
  .scene.grande #decor{width:150px; height:122px; top:54px}
  .scene.grande .bulle{left:150px; max-width:calc(100% - 150px)}
  .scene.grande .bulle.visible ~ #decor{opacity:1}
  .scene.grande .bulle{top:0}
}
/* mode jour : fond blanc pur, aucune lueur */
:root[data-theme="clair"] .atmosphere{display:none}
:root[data-theme="clair"] .v-option{background:var(--nuit)}
:root[data-theme="clair"] .v-option[aria-pressed="true"]{background:linear-gradient(145deg,rgba(var(--accent-rgb),.1),rgba(var(--accent-rgb),.03))}

/* ── le pantin ─────────────────────────────────────────────────────────── */
.cp{display:block; width:100%; height:auto; overflow:visible}
.cp path,.cp rect,.cp ellipse,.cp circle{fill:none; stroke:var(--craie); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
/* les formes pleines : elles cachent ce qui passe derrière, c'est ce qui donne le volume */
.cp .f{fill:var(--perso-fond)}
.cp .plein{fill:var(--craie); stroke:none}
.cp .joue{fill:var(--accent); stroke:none; opacity:.34}
.cp .echarpe{stroke:var(--accent); fill:rgba(var(--accent-rgb),.22)}
.cp .pli{opacity:.4; stroke-width:1.8}
.cp .sol{opacity:.3; stroke-width:1.8}
.cp .b-grand{fill:rgba(var(--craie-rgb),.18)}
.cp .bras,.cp .av,.cp .tete,.cp .haut,.cp .sourcil{transition:transform .58s var(--ressort)}
.cp .regard{transition:transform .34s var(--doux); transform:translate(var(--rx,0px),var(--ry,0px))}
.cp .bG{transform-origin:80px 100px; transform:rotate(var(--aG,0deg))}
.cp .avG{transform-origin:80px 126px; transform:rotate(var(--fG,0deg))}
.cp .bD{transform-origin:120px 100px; transform:rotate(var(--aD,0deg))}
.cp .avD{transform-origin:120px 126px; transform:rotate(var(--fD,0deg))}
.cp .tete{transform-origin:100px 85px; transform:rotate(var(--tete,0deg))}
.cp .haut{transform-origin:100px 152px; transform:rotate(var(--penche,0deg))}
.cp .sG{transform-origin:90px 48px; transform:rotate(var(--sG,0deg))}
.cp .sD{transform-origin:110px 47px; transform:rotate(var(--sD,0deg))}
.cp .souffle{animation:souffle 3.8s ease-in-out infinite alternate}
.cp .yeux{transform-origin:100px 58px; animation:cligne 5.4s infinite}
@keyframes souffle{to{transform:translateY(-1.6px)}}
@keyframes cligne{0%,93.5%,100%{transform:scaleY(1)} 96.5%{transform:scaleY(.1)}}
.cp .b{opacity:0; transition:opacity .18s}
.cp[data-bouche="sourire"] .b-sourire,.cp[data-bouche="plat"] .b-plat,.cp[data-bouche="o"] .b-o,.cp[data-bouche="grand"] .b-grand{opacity:1}
.cp .acc{opacity:0; transition:opacity .26s}
.cp[data-acc="tel"] .acc-tel,.cp[data-acc="crayon"] .acc-crayon{opacity:1}
.cp .acc-tel rect{fill:rgba(var(--accent-rgb),.3); stroke:var(--craie)}
/* la marche : les jambes alternent, le corps suit */
.cp .jG{transform-origin:91px 150px} .cp .jD{transform-origin:109px 150px}
.cp[data-etat="walking"] .jG,.cp[data-etat="transitioning"] .jG{animation:pas .42s ease-in-out infinite alternate}
.cp[data-etat="walking"] .jD,.cp[data-etat="transitioning"] .jD{animation:pas .42s ease-in-out infinite alternate-reverse}
.cp[data-etat="walking"] .corps,.cp[data-etat="transitioning"] .corps{animation:balance .42s ease-in-out infinite alternate}
@keyframes pas{from{transform:rotate(14deg)}to{transform:rotate(-14deg)}}
@keyframes balance{from{transform:translateY(0)}to{transform:translateY(-2.4px)}}
.cp[data-etat="celebrating"] .corps{animation:saut .42s var(--doux) 2 alternate}
@keyframes saut{to{transform:translateY(-11px)}}
.cp[data-etat="typing"] .avG{animation:tape .26s ease-in-out infinite alternate}
@keyframes tape{from{transform:rotate(var(--fG))}to{transform:rotate(calc(var(--fG) + 7deg))}}
.cp.oui .tete{animation:hoche .6s var(--doux)}
@keyframes hoche{0%,100%{transform:rotate(var(--tete))} 32%{transform:rotate(calc(var(--tete) + 12deg))} 64%{transform:rotate(calc(var(--tete) - 4deg))}}
/* il se dessine trait par trait */
.cp.nait [pathLength]{stroke-dasharray:1; stroke-dashoffset:1; animation:trace .62s var(--doux) forwards; animation-delay:calc(var(--n) * 62ms)}
.cp.nait .plein,.cp.nait .joue{opacity:0; animation:paraitre .3s 1.7s forwards}
.cp.nait .f{fill-opacity:0; animation:remplit .4s 1.5s forwards}
@keyframes remplit{to{fill-opacity:1}}

/* ── le décor ──────────────────────────────────────────────────────────── */
.decor{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.decor path{fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.dt{stroke:var(--craie); opacity:.74; stroke-dasharray:1; stroke-dashoffset:1; animation:trace .7s var(--doux) forwards; animation-delay:calc(.12s + var(--n) * .11s)}
.da{stroke:var(--accent); stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset .62s var(--doux)}
.da.vu{stroke-dashoffset:0}
.decor.part{animation:decor-part .36s var(--doux) forwards}
@keyframes decor-part{to{opacity:0; transform:translate3d(-14px,0,0)}}
.decor-texte{fill:var(--craie); stroke:none; font:300 11.5px "Sora",sans-serif}

/* ── le contenu de la carte ────────────────────────────────────────────── */
.dedans.entre{animation:monte .4s var(--doux) both}
.dedans.sort{animation:sort .19s var(--doux) both}
@keyframes sort{to{opacity:0; transform:translate3d(0,-10px,0)}}

.tete-q{display:flex; align-items:center; gap:10px; margin-bottom:13px; min-height:30px}
.sur-titre{font:600 10.5px/1.3 "Sora",sans-serif; letter-spacing:.17em; text-transform:uppercase; color:var(--texte-3)}
.sur-titre b{color:var(--accent); font-weight:700}
.savoir{appearance:none; margin-left:auto; cursor:pointer; display:inline-flex; align-items:center; gap:7px; padding:7px 12px 7px 9px;
  border-radius:99px; color:var(--texte-2); font:500 12px/1 "Sora",sans-serif; background:rgba(var(--lueur),.05);
  border:1px solid rgba(var(--lueur),.12); transition:all var(--t-micro)}
.savoir:hover{color:var(--texte); border-color:var(--verre-bord-vif)}
.savoir .ic{width:15px; height:15px; color:var(--accent-2)}
h1.q{font:600 clamp(23px,5.2vw,33px)/1.2 "Sora",sans-serif; letter-spacing:-.028em; margin:0; text-wrap:balance}
.aide{margin:11px 0 0; color:var(--texte-2); font-size:14.6px; font-weight:300; line-height:1.56; max-width:56ch}
.erreur{display:flex; align-items:center; gap:8px; margin:14px 0 0; color:var(--alerte); font-size:13.5px}
.erreur .ic{width:16px; height:16px}

.liste{margin-top:22px; display:grid; gap:9px}
@media(min-width:620px){ .liste.deux{grid-template-columns:1fr 1fr} }
.v-option{animation:monte var(--t-entree) var(--doux) both}
/* le contour à la craie que le compagnon trace autour du choix */
.entoure{position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none}
.entoure path{fill:none; stroke:var(--craie); stroke-width:2; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; animation:trace .46s var(--doux) forwards}

.fiche{margin-top:22px; display:grid; grid-template-columns:1fr 1fr; gap:14px}
.ch{display:flex; flex-direction:column; gap:7px; grid-column:1/-1; animation:monte var(--t-entree) var(--doux) both}
.ch.demi{grid-column:span 1}
@media(max-width:540px){ .ch.demi{grid-column:1/-1} }
.ch label{font:600 10.5px/1 "Sora",sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--texte-2)}
.ch label em{font-style:normal; text-transform:none; letter-spacing:0; font-weight:300; color:var(--texte-3); margin-left:7px}
.ch .sous{font-size:12.4px; font-weight:300; color:var(--texte-3); line-height:1.45}
.ch .faute{font-size:12.4px; color:var(--alerte)}
.seul{margin-top:22px; animation:monte var(--t-entree) var(--doux) both}

/* ── accueil ───────────────────────────────────────────────────────────── */
.reperes{margin-top:22px; display:grid; gap:9px}
@media(min-width:620px){ .reperes{grid-template-columns:repeat(3,1fr)} }
.repere{display:flex; align-items:center; gap:11px; padding:12px 14px; border-radius:15px; background:rgba(var(--lueur),.04); border:1px solid rgba(var(--lueur),.08)}
.repere .ic{color:var(--accent-2)}
.repere b{display:block; font:600 14px/1.25 "Sora",sans-serif}
.repere span{display:block; font:300 12.2px/1.35 "Sora",sans-serif; color:var(--texte-3)}

/* ── intermède d'étape ─────────────────────────────────────────────────── */
.etape{text-align:center; padding-block:14px 10px}
.etape-rond{position:relative; width:104px; height:104px; margin:0 auto; display:grid; place-items:center; color:var(--craie)}
.etape-rond svg.anneau{position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); overflow:visible}
.etape-rond .anneau circle{fill:none; stroke:var(--craie); stroke-width:2; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; animation:trace 1s var(--doux) forwards}
.etape-rond .ic{width:38px; height:38px; stroke-width:1.5; animation:monte .5s var(--doux) .2s both}
.etape-mot{margin:20px 0 0; font:700 clamp(27px,6vw,38px)/1.1 "Sora",sans-serif; letter-spacing:-.034em; animation:monte .5s var(--doux) .16s both}
.etape-titre{margin:9px 0 0; font:600 10.5px/1.4 "Sora",sans-serif; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); animation:monte .5s var(--doux) .26s both}
.etape-dit{margin:13px auto 0; max-width:36ch; font-weight:300; font-size:14.6px; color:var(--texte-2); animation:monte .5s var(--doux) .34s both}

/* ── récapitulatif ─────────────────────────────────────────────────────── */
.recap{margin-top:20px; display:grid; gap:10px}
.v-bloc h3{display:flex; align-items:center; gap:9px; margin:0; padding:13px 16px 10px; font:600 10.5px/1 "Sora",sans-serif; letter-spacing:.17em; text-transform:uppercase; color:var(--accent)}
.v-bloc h3 .ic{width:16px; height:16px}
.v-bloc h3 button{margin-left:auto; padding:6px 4px; font-size:12px; letter-spacing:0; text-transform:none}
.ligne{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:6px 16px; padding:9px 16px; border-top:1px solid rgba(var(--lueur),.07); margin:0;
  width:100%; text-align:left; background:none; border-left:none; border-right:none; border-bottom:none; color:inherit; font:inherit; cursor:pointer; transition:background var(--t-micro)}
.ligne:hover{background:rgba(var(--lueur),.04)}
.ligne .lq{font-weight:300; font-size:13.4px; color:var(--texte-2); min-width:0}
.ligne .lr{font-weight:500; font-size:14px; min-width:0; overflow-wrap:anywhere}
@media(max-width:600px){ .ligne{grid-template-columns:1fr; gap:2px} }

/* ── barre d'actions : retour à gauche, la suite à droite, toujours ────── */
.actions{position:sticky; bottom:0; z-index:11; display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:14px; padding-block:12px calc(12px + var(--bas)); background:linear-gradient(transparent,var(--nuit) 34%)}
.actions .gauche{display:flex; align-items:center; gap:4px; min-width:0}
.actions .droite{display:flex; align-items:center; gap:12px; margin-left:auto}
.indice{font-size:12px; font-weight:300; color:var(--texte-3)}
@media(max-width:640px){ .indice{display:none} }
.tourne{animation:tourne .9s linear infinite}
@keyframes tourne{to{transform:rotate(360deg)}}

/* ── panneaux ──────────────────────────────────────────────────────────── */
.voile{position:fixed; inset:0; z-index:40; background:var(--voile); opacity:0; transition:opacity .3s var(--doux)}
.voile.ouvert{opacity:1}
.panneau{position:fixed; z-index:41; left:0; right:0; bottom:0; max-width:600px; margin:0 auto; border-radius:26px 26px 0 0;
  padding:10px var(--d) calc(24px + var(--bas)) var(--g); max-height:84svh; overflow-y:auto;
  transform:translateY(102%); transition:transform .44s var(--ressort)}
.panneau.ouvert{transform:none}
@media(min-width:720px){
  .panneau{bottom:auto; top:50%; border-radius:26px; padding:14px 30px 28px; transform:translateY(-44%) scale(.96); opacity:0; transition:transform .36s var(--ressort), opacity .26s var(--doux)}
  .panneau.ouvert{transform:translateY(-50%); opacity:1}
  .poignee{display:none}
}
.poignee{width:42px; height:4px; border-radius:99px; background:rgba(var(--lueur),.2); margin:6px auto 16px}
.p-chapeau{display:flex; align-items:center; gap:9px; margin:8px 0 12px; color:var(--accent-2); font:600 10.5px/1 "Sora",sans-serif; letter-spacing:.18em; text-transform:uppercase}
.panneau h2{margin:0 0 10px; font:600 19px/1.3 "Sora",sans-serif; letter-spacing:-.02em}
.p-texte{margin:0; font-weight:300; color:var(--texte-2); line-height:1.64; white-space:pre-line; font-size:14.8px}
.p-pied{margin-top:22px; display:flex; justify-content:flex-end}

.jalons{position:relative; margin:6px 0 0; padding-left:44px}
.jalons::before{content:""; position:absolute; left:16px; top:10px; bottom:10px; width:2px; border-radius:2px; background:linear-gradient(var(--craie),rgba(var(--craie-rgb),.12))}
.jalon{position:relative; padding-block:8px}
.jalon .pastille{position:absolute; left:-44px; top:8px; width:34px; height:34px; border-radius:11px; display:grid; place-items:center;
  color:var(--craie); background:var(--nuit-2); border:1px solid rgba(var(--lueur),.14)}
.jalon .pastille .ic{width:17px; height:17px}
.jalon h3{margin:0; font:600 14.6px/1.3 "Sora",sans-serif}
.jalon p{margin:2px 0 0; font:300 12.8px/1.45 "Sora",sans-serif; color:var(--texte-3)}

/* ── cookies : verre, centré ───────────────────────────────────────────── */
#cookies{position:fixed; z-index:50; left:50%; bottom:calc(16px + var(--bas)); width:min(468px,calc(100vw - 28px));
  transform:translate(-50%,140%); border-radius:24px; padding:22px 22px 18px; text-align:center;
  transition:transform .5s var(--ressort)}
#cookies.ouvert{transform:translate(-50%,0)}
#cookies .ck-picto{width:44px; height:44px; margin:0 auto 12px; border-radius:14px; display:grid; place-items:center; color:var(--accent);
  background:rgba(var(--accent-rgb),.1); border:1px solid rgba(var(--accent-rgb),.24)}
#cookies h2{margin:0 0 8px; font:600 17px/1.25 "Sora",sans-serif; letter-spacing:-.02em}
#cookies p{margin:0 auto 16px; max-width:40ch; font-size:13.4px; font-weight:300; line-height:1.56; color:var(--texte-2)}
#cookies a{color:var(--accent)}
.ck-btns{display:flex; justify-content:center; gap:9px; flex-wrap:wrap}
.ck-btns .bouton{padding:13px 22px; font-size:14px; min-width:138px}
.ck-plus{margin-top:10px}
.ck-plus .lien{font-size:12.6px; text-decoration:underline; text-underline-offset:3px; padding:8px}
.ck-cats{display:grid; gap:8px; margin:2px 0 16px; text-align:left}
.cat{display:flex; align-items:flex-start; gap:12px; padding:12px 14px; border-radius:15px; background:rgba(var(--lueur),.04); border:1px solid rgba(var(--lueur),.08)}
.cat .txt{flex:1; min-width:0}
.cat b{display:block; font:600 13.4px/1.3 "Sora",sans-serif}
.cat span{display:block; margin-top:3px; font:300 12px/1.45 "Sora",sans-serif; color:var(--texte-3)}

footer{position:relative; z-index:1; padding-block:16px calc(20px + var(--bas)); font-size:12px; font-weight:300; color:var(--texte-3)}
footer a,footer .lien{color:var(--texte-2); font-size:12px; padding:0; text-decoration:underline; text-underline-offset:3px}

/* ── mouvement réduit : tout reste utilisable, rien ne bouge pour décorer ─ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important}
  .atmosphere i{animation:none}
}
body.calme .atmosphere i,body.calme .cp .souffle,body.calme .cp .yeux{animation:none}