/* Vivory Secret Santa — jetons et composants repris de la maquette
   (secret santa/proposition-secret-santa-entreprise.html), posés en pleine page.
   Clair/sombre, focus visible, prefers-reduced-motion, mobile 390 px. */
:root{
  --violet:#6C5CE7; --coral:#FF6B6B; --gold:#FECA57; --ok:#2EA36B;
  --bg:#FCFCFD; --outer:#F1F0F5; --card:#FFFFFF; --surf:#F5F5F7; --line:#ECEBF1; --togoff:#E4E3EA;
  --ink:#111111; --note:#6E6E77; --muted:#707079; --faint:#B9B9C0;   /* --muted : 4,8 sur le fond (AA), pied, heures, compteurs */
  --kbg:#111111; --kfg:#FFFFFF;
  --violet-soft:color-mix(in srgb,var(--violet) 12%,var(--bg));
  --coral-soft:color-mix(in srgb,var(--coral) 15%,var(--bg));
  --gold-soft:color-mix(in srgb,var(--gold) 24%,var(--bg));
  --ok-soft:color-mix(in srgb,var(--ok) 14%,var(--bg));
  --oktx:color-mix(in srgb,var(--ok) 66%,var(--ink) 34%);
  --pilltx:color-mix(in srgb,var(--violet) 72%,var(--ink) 28%);
  --coraltx:color-mix(in srgb,var(--coral) 62%,var(--ink) 38%);
  --goldtx:color-mix(in srgb,var(--gold) 38%,var(--ink) 62%);
  --shadow-card:0 12px 34px -18px rgba(24,18,55,.16),0 2px 6px -3px rgba(24,18,55,.06);
  --scrim:rgba(14,11,24,.44);
  /* la carte du Secret Santa : nuit et or */
  --c-ink:#0E1C22; --c-pine:#1F3A2E; --c-gold:#C8A565; --c-gold-hi:#ECD8A3; --c-txt:#F3EAD2;
  --fj:"Montserrat","Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fg:"Space Grotesk","Inter",ui-monospace,"SF Mono",monospace;
  --fs:"Instrument Serif",Georgia,"Times New Roman",serif;
  --fc:"Cormorant Garamond",Georgia,"Times New Roman",serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#131020; --outer:#0C0A16; --card:#1D1930; --surf:#262138; --line:rgba(255,255,255,.09); --togoff:#3D3756;
  --ink:#F3F1FB; --note:#ABA6C8; --muted:#9E99B8; --faint:#5A5578; --kbg:#F3F1FB; --kfg:#171426;
  --shadow-card:0 22px 44px -26px rgba(0,0,0,.6),0 2px 8px -4px rgba(0,0,0,.3);
  --scrim:rgba(0,0,0,.55);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#131020; --outer:#0C0A16; --card:#1D1930; --surf:#262138; --line:rgba(255,255,255,.09); --togoff:#3D3756;
  --ink:#F3F1FB; --note:#ABA6C8; --muted:#9E99B8; --faint:#5A5578; --kbg:#F3F1FB; --kfg:#171426;
  --shadow-card:0 22px 44px -26px rgba(0,0,0,.6),0 2px 8px -4px rgba(0,0,0,.3);
  --scrim:rgba(0,0,0,.55);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--fj);-webkit-font-smoothing:antialiased;line-height:1.45;min-height:100svh}
button,input,textarea,select{font:inherit;color:inherit}
a{color:var(--violet)}
:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px}
svg.i{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.125em}
noscript{display:block;padding:24px;font:500 15px/1.5 var(--fj)}

/* ---------------- squelette de page ---------------- */
.wrap{max-width:1120px;margin:0 auto;padding-inline:clamp(16px,4vw,44px)}
.top{display:flex;align-items:center;gap:12px;padding-block:18px 0;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font:800 19px/1 var(--fj);letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.top .sep{width:1px;height:20px;background:var(--line)}
.top .ctx{font:600 13px/1.3 var(--fj);color:var(--note)}
.top .sp{flex:1}
.top .tools{display:flex;gap:6px;align-items:center}
.ibtn{min-width:36px;height:36px;padding:0 10px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;font:700 12.5px/1 var(--fj);box-shadow:0 5px 12px -6px rgba(20,19,25,.2)}
.ibtn:hover{background:var(--surf)}
.ibtn svg.i{font-size:16px}
@media (max-width:560px){.top .sep,.top .ctx{display:none}}
main#ecran{min-height:60svh}
.foot{margin-top:clamp(40px,6vw,70px);padding-block:22px 36px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;font:500 12.5px/1.5 var(--fj);color:var(--muted)}
.foot a{color:var(--note)}
.kick{margin:0;font:600 11.5px/1.2 var(--fg);letter-spacing:.2em;text-transform:uppercase;color:var(--pilltx)}

/* ---------------- landing ---------------- */
.hero{position:relative;padding-block:clamp(38px,6vw,72px) clamp(30px,4vw,48px)}
.hero h1{font:800 clamp(34px,5.4vw,62px)/1.02 var(--fj);letter-spacing:-.045em;margin:16px 0 0;max-width:16ch;text-wrap:balance}
.ser{font-family:var(--fs);font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--violet)}
.lead{font:500 clamp(15px,1.45vw,17px)/1.62 var(--fj);color:var(--note);max-width:64ch;margin:18px 0 0}
.ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.ctas .btn{width:auto;padding-inline:22px}
.flow{list-style:none;margin:38px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
.flow li{padding:18px 20px 0 0;min-width:0}
.flow li+li{padding-left:20px;border-left:1px solid var(--line)}
.flow .n{font:600 12px/1 var(--fg);color:var(--pilltx);letter-spacing:.12em}
.flow b{display:block;font:800 16px/1.25 var(--fj);letter-spacing:-.015em;margin-top:9px}
.flow p{margin:6px 0 0;font:500 13.5px/1.55 var(--fj);color:var(--note)}
@media (max-width:860px){
  .flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flow li:nth-child(3){padding-left:0;border-left:0}
  .flow li:nth-child(n+3){border-top:1px solid var(--line);margin-top:18px}
}
@media (max-width:480px){
  .flow{grid-template-columns:minmax(0,1fr)}
  .flow li,.flow li+li{padding-left:0;border-left:0}
  .flow li+li{border-top:1px solid var(--line);margin-top:16px}
}
.sec{padding-block:clamp(44px,6vw,72px) 0}
.sec h2{font:800 clamp(24px,2.8vw,34px)/1.1 var(--fj);letter-spacing:-.035em;margin:12px 0 0;text-wrap:balance}
.rules{list-style:none;padding:0;margin:30px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 36px}
.rules li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:4px 14px;align-items:start;align-content:start}
.rules .ic{grid-row:1/span 2;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--violet-soft);color:var(--pilltx);font-size:19px}
.rules b{font:800 15.5px/1.3 var(--fj);letter-spacing:-.01em;padding-top:2px}
.rules p{margin:0;font:500 13.5px/1.55 var(--fj);color:var(--note)}
@media (max-width:900px){.rules{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.rules{grid-template-columns:minmax(0,1fr)}}
.pilote{margin-top:30px;padding:clamp(22px,3vw,34px);border-radius:24px;background:var(--outer);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:22px 40px;align-items:center}
.pilote h3{margin:0;font:800 clamp(20px,2.2vw,26px)/1.15 var(--fj);letter-spacing:-.03em}
.pilote>div>p:not(.kick){margin:10px 0 0;font:500 14.5px/1.6 var(--fj);color:color-mix(in srgb,var(--note) 88%,var(--ink))}   /* AA sur --outer */
.pilote .ctas{margin-top:16px}
@media (max-width:760px){.pilote{grid-template-columns:minmax(0,1fr)}}
.apercu{display:flex;flex-direction:column;gap:10px}

/* ---------------- écrans de l'app ---------------- */
.apph{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:6px 0 8px;min-height:44px}
.apph .eyebrow{min-width:0;flex:0 1 auto;overflow-wrap:anywhere}
.apph .chip,.apph .pill{flex:none}
.apph .vw{font:800 15px/1 var(--fj);letter-spacing:-.02em}
.apph .sp{flex:1}
.wwrap{max-width:480px;margin:0 auto;padding:12px 0 34px}
.wwrap>.btn{margin-top:16px}
.wwrap .back{width:auto;display:inline-flex;margin:0 0 6px -8px}
.wtop{display:flex;justify-content:flex-end}
.eyebrow{margin:0;font:600 10.5px/1.2 var(--fg);letter-spacing:.2em;text-transform:uppercase;color:var(--note)}
.h{margin:8px 0 0;font:800 25px/1.08 var(--fj);letter-spacing:-.035em;text-wrap:balance}
.h3{margin:6px 0 0;font:800 19px/1.15 var(--fj);letter-spacing:-.025em}
.lede{margin:8px 0 0;color:var(--note);font:500 13.5px/1.55 var(--fj)}
.note{font-size:11.5px;color:var(--note);line-height:1.5;font-weight:500;margin:0}
.c{text-align:center}
.sechead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:22px 2px 10px}
.sechead p{margin:0;font:800 15.5px/1.2 var(--fj);letter-spacing:-.01em}
.grouped{background:var(--card);border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:var(--shadow-card)}
.grow{display:flex;align-items:center;gap:12px;padding:13px 15px;min-width:0}
.grow+.grow,.grow+.f,.f+.grow,.f+.f,.grouped>.cfm,.f2+.f,.f+.f2,.grow+.f2,.f2+.grow{border-top:1px solid var(--line)}
.gtx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.gtx b{font:700 14px/1.3 var(--fj);overflow-wrap:anywhere}
.gtx .note{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gtx .note.wrapok{white-space:normal}
.gico{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:var(--surf);color:var(--note);font-size:16px;flex:none}
.k{display:block;font:700 10.5px/1.2 var(--fj);letter-spacing:.06em;text-transform:uppercase;color:var(--note)}
.v{display:block;font:700 14px/1.35 var(--fj);margin-top:2px;overflow-wrap:anywhere}

.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;padding:14px;border-radius:999px;font:700 15px/1.2 var(--fj);border:none;cursor:pointer;text-decoration:none;transition:transform .12s,opacity .15s,box-shadow .15s,filter .15s}
.btn:active{transform:translateY(1.5px) scale(.985)}
.btn.v{position:relative;overflow:hidden;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.25);
  background:radial-gradient(120% 90% at 50% 15%,rgba(255,255,255,.45),transparent 55%),linear-gradient(180deg,color-mix(in srgb,var(--violet) 76%,#fff),var(--violet) 55%,color-mix(in srgb,var(--violet) 72%,#000));
  box-shadow:0 12px 26px -10px color-mix(in srgb,var(--violet) 70%,transparent),inset 0 1.5px 1px rgba(255,255,255,.5),inset 0 -3px 7px rgba(0,0,0,.25)}
.btn.v:hover{filter:brightness(1.05)}
.btn.g{background:var(--card);color:var(--ink);box-shadow:0 8px 18px -8px rgba(20,19,25,.24),0 2px 5px -2px rgba(20,19,25,.12);border:1px solid var(--line)}
.btn.g:hover{background:var(--surf)}
.btn.o{background:none;color:var(--note);font-weight:600;font-size:13.5px;min-height:38px;padding:8px}
.btn.o:hover{color:var(--ink);background:var(--surf)}
.btn:disabled{opacity:.48;cursor:default;box-shadow:none;transform:none;filter:none}
.pill{display:inline-flex;align-items:center;gap:6px;border:none;background:var(--violet-soft);color:var(--pilltx);font:700 12.5px/1 var(--fj);padding:8px 13px;border-radius:999px;cursor:pointer;flex:none;white-space:nowrap;text-decoration:none}
.pill.ghost{background:var(--card);color:var(--ink);box-shadow:0 5px 12px -6px rgba(20,19,25,.2);border:1px solid var(--line)}
.pill.solid{background:var(--violet);color:#fff}
.pill:active{transform:scale(.97)}
.chip{display:inline-flex;align-items:center;gap:5px;font:700 11px/1 var(--fj);padding:6px 9px;border-radius:999px;background:var(--surf);color:var(--note);white-space:nowrap;flex:none}
.chip.ok{background:var(--ok-soft);color:var(--oktx)}
.chip.vio{background:var(--violet-soft);color:var(--pilltx)}
.chip.cor{background:var(--coral-soft);color:var(--coraltx)}
.chip.gold{background:var(--gold-soft);color:var(--goldtx)}
.tag{font:700 10px/1 var(--fj);font-style:normal;padding:3px 6px;border-radius:999px;background:var(--violet-soft);color:var(--pilltx);margin-left:6px;vertical-align:2px;white-space:nowrap}
.av{width:34px;height:34px;border-radius:999px;display:grid;place-items:center;font:800 12px/1 var(--fj);flex:none;letter-spacing:.02em}
.av.a0{background:var(--violet-soft);color:var(--pilltx)}
.av.a1{background:var(--coral-soft);color:var(--coraltx)}
.av.a2{background:var(--gold-soft);color:var(--goldtx)}
.stack{display:flex}
.stack .av{width:28px;height:28px;font-size:10px;box-shadow:0 0 0 2.5px var(--card)}
.stack .av+.av{margin-left:-8px}
.err{margin:10px 4px 0;font:600 12.5px/1.45 var(--fj);color:var(--coraltx)}
.err:empty{display:none}
.f>.err{margin:0}

/* formulaires */
.f{display:flex;flex-direction:column;gap:7px;padding:12px 14px;min-width:0}
.f>span,.lab{font:700 11.5px/1.3 var(--fj);color:var(--note)}
.f>span em{font-style:normal;font-weight:500}
.inp{width:100%;min-width:0;border:1.5px solid var(--line);background:var(--surf);border-radius:12px;padding:10px 12px;font:600 14.5px/1.35 var(--fj);color:var(--ink);transition:border-color .15s,box-shadow .15s}
textarea.inp{resize:none;line-height:1.5;font-weight:500}
.inp:focus{outline:none;border-color:var(--violet);background:var(--card);box-shadow:0 6px 16px -8px color-mix(in srgb,var(--violet) 40%,transparent)}
.inp::placeholder{color:var(--muted);font-weight:500}
.f2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.f2>.f+.f{border-top:0;border-left:1px solid var(--line)}
.eur{display:flex;align-items:center;gap:8px;font:700 15px var(--fj)}
.eur .inp{max-width:90px}
.chsel{display:flex;flex-wrap:wrap;gap:6px}
.chsel button{border:1.5px solid var(--line);background:var(--card);color:var(--ink);font:600 12px/1.2 var(--fj);padding:7px 10px;border-radius:999px;cursor:pointer}
.chsel button[aria-pressed="true"]{border-color:var(--violet);background:var(--violet-soft);color:var(--pilltx)}
.tgrow{cursor:pointer}
.tog{width:46px;height:28px;border-radius:999px;background:var(--togoff);border:none;position:relative;cursor:pointer;flex:none;transition:background-color .2s}
.tog i{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:999px;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.25);transition:transform .2s}
.tog[aria-checked="true"]{background:var(--violet)}
.tog[aria-checked="true"] i{transform:translateX(18px)}
.mono{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font:800 14px/1 var(--fj);background:var(--violet-soft);color:var(--pilltx);flex:none;overflow:hidden}
.count{font:600 11px/1 var(--fg);color:var(--muted)}
.inp.codein{font:700 26px/1 var(--fg);letter-spacing:.4em;text-align:center}
.inp.subj{font-weight:700;font-size:13.5px}

/* la carte du Secret Santa (thème nuit et or) */
.sscard{position:relative;overflow:hidden;border-radius:22px;padding:20px 20px 18px;color:var(--c-txt);
  background:radial-gradient(120% 80% at 50% 0%,rgba(200,165,101,.22),transparent 62%),linear-gradient(165deg,var(--c-ink) 0%,var(--c-pine) 72%,var(--c-ink) 100%);
  border:1px solid rgba(200,165,101,.5);box-shadow:0 26px 48px -26px rgba(8,18,23,.7)}
.sc-top{display:flex;align-items:center;gap:10px;position:relative;z-index:1}
.sc-mono{width:36px;height:36px;border-radius:999px;display:grid;place-items:center;font:800 12px/1 var(--fj);color:var(--c-gold-hi);border:1.5px solid var(--c-gold);overflow:hidden;flex:none;background:rgba(0,0,0,.18)}
.sc-co{font:700 11px/1.3 var(--fj);letter-spacing:.16em;text-transform:uppercase;color:var(--c-gold-hi);overflow-wrap:anywhere}
.sc-title{position:relative;z-index:1;margin:22px 0 0;font:italic 600 46px/.95 var(--fc);color:var(--c-gold-hi);letter-spacing:-.01em}
.sc-sub{position:relative;z-index:1;margin:10px 0 0;font:500 12.5px/1.5 var(--fj);color:rgba(243,234,210,.78);max-width:24ch}
.sc-foot{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.sc-foot span{font:700 10.5px/1 var(--fj);letter-spacing:.04em;padding:6px 9px;border-radius:999px;border:1px solid rgba(200,165,101,.55);color:var(--c-gold-hi)}
.sc-spark{position:absolute;fill:var(--c-gold);opacity:.9}
.mot{margin-top:14px;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:14px 15px;box-shadow:var(--shadow-card)}
.mot-h{display:flex;align-items:center;gap:10px}
.mot-h b{display:block;font:800 13.5px/1.25 var(--fj)}
.mot-h>div>span{display:block;font:500 11.5px/1.3 var(--fj);color:var(--note)}
.mot p{margin:10px 0 0;font:500 14px/1.58 var(--fj);white-space:pre-line;overflow-wrap:anywhere}
.cdbox{margin-top:14px;background:var(--violet-soft);border:1.5px solid color-mix(in srgb,var(--violet) 26%,transparent);border-radius:20px;padding:13px 13px 12px}
.cdbox .k{color:var(--pilltx);opacity:.8}
.cdbox .v{color:var(--pilltx);font-weight:800}
.cdbox .row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;justify-content:space-between;margin-bottom:10px}
.cdbox .row>.gtx{flex:1 1 150px}
.cdbox .row.solo{margin:0}
.cd{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.cd>div{background:var(--card);border-radius:12px;padding:9px 2px 7px;text-align:center;min-width:0}
.cd b{display:block;font:700 25px/1 var(--fg);font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--ink)}
.cd span{display:block;margin-top:5px;font:700 9.5px/1 var(--fj);text-transform:uppercase;letter-spacing:.08em;color:var(--note)}
.proof{display:flex;align-items:center;gap:10px;margin:14px 2px 0;font:600 12.5px/1.4 var(--fj);color:var(--note)}
.proof b{color:var(--ink)}
.how{list-style:none;margin:0;padding:0;counter-reset:h;display:flex;flex-direction:column;gap:12px}
.how li{counter-increment:h;display:grid;grid-template-columns:26px minmax(0,1fr);gap:10px;font:500 13px/1.5 var(--fj);color:var(--note)}
.how li::before{content:counter(h);width:26px;height:26px;border-radius:999px;display:grid;place-items:center;background:var(--surf);color:var(--ink);font:600 12px/1 var(--fg)}
.how li b{color:var(--ink);font-weight:700}
.how li.now::before{background:var(--violet);color:#fff}
.trust{display:flex;gap:10px;align-items:flex-start;margin:18px 2px 0;padding:12px 13px;border-radius:16px;background:var(--surf);font:500 12px/1.5 var(--fj);color:var(--note)}
.trust svg{margin-top:2px;color:var(--ink);font-size:14px;flex:none}
.okmark{width:64px;height:64px;border-radius:999px;margin:18px auto 0;display:grid;place-items:center;background:var(--ok-soft);color:var(--ok);font-size:30px;animation:popin .5s cubic-bezier(.22,1,.36,1)}
.okmark.vio{background:var(--violet-soft);color:var(--violet)}
.okmark.cor{background:var(--coral-soft);color:var(--coraltx)}
@keyframes popin{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}
.code{font:700 18px/1 var(--fg);letter-spacing:.24em;color:var(--ink)}
.code.sm{font-size:13px}
.codebig{display:block;margin:4px 0;font:700 28px/1 var(--fg);letter-spacing:.12em;color:var(--ink)}
.cfm{display:flex;align-items:center;gap:8px;padding:11px 15px;background:var(--coral-soft);flex-wrap:wrap}
.cfm p{flex:1 1 140px;margin:0;font:600 12.5px/1.4 var(--fj);color:var(--coraltx)}
.cfm.addask{margin-top:12px;border-radius:16px;background:var(--violet-soft)}
.cfm.addask p{color:var(--pilltx)}
.addrow{display:flex;gap:8px;align-items:center;margin-top:10px}
.addrow .inp{flex:1;min-width:0}
.linkbox{display:flex;align-items:center;gap:8px;margin-top:14px;padding:6px 6px 6px 13px;border-radius:14px;background:var(--surf);border:1px solid var(--line)}
.linkbox span{flex:1;min-width:0;font:600 12px/1.3 var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msgta{width:100%;margin-top:8px;border:1.5px solid var(--line);background:var(--surf);border-radius:14px;padding:11px 12px;font:500 13px/1.5 var(--fj);color:var(--ink);resize:none}
.row2{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.joinhead{display:grid;place-items:center;margin:26px 0 14px}
.joinhead .lg{width:72px;height:72px;filter:drop-shadow(0 12px 22px rgba(108,92,231,.35))}

/* la roue du tirage : une demi-roue ancrée au bord gauche ; les noms défilent devant le pointeur, à droite */
.wwrap.drawv .wheel{height:390px;flex:none;margin:10px calc(-1 * clamp(16px,4vw,44px)) 0}
.wheel{position:relative;overflow:hidden}
.wheel canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.ptr{position:absolute;top:50%;left:calc(100% - 44px);width:30px;height:34px;margin-top:-17px;z-index:2;filter:drop-shadow(0 4px 6px rgba(0,0,0,.3));transform-origin:100% 50%}
.wnote{margin:10px 6px 0;text-align:center}
.sound{display:inline-flex;align-items:center;gap:6px}
@media (min-width:560px){.wwrap.drawv .wheel{margin-inline:-22px}}

/* feuilles (révélation, messages), toasts, bandeaux */
.ov{position:fixed;inset:0;z-index:40;display:flex;align-items:flex-end;justify-content:center;animation:fade .2s ease-out}
.ovbg{position:absolute;inset:0;border:0;padding:0;background:var(--scrim);cursor:pointer}
.ov.rv .ovbg{background:linear-gradient(180deg,transparent 45%,var(--scrim));cursor:default}
.sheet{position:relative;width:100%;max-width:520px;max-height:92svh;overflow-y:auto;scrollbar-width:none;background:var(--bg);border-radius:28px 28px 0 0;padding:10px 20px 24px;animation:sheetup .42s cubic-bezier(.22,1,.36,1);box-shadow:0 -20px 40px -20px rgba(0,0,0,.35)}
.sheet::-webkit-scrollbar{display:none}
.grab{display:block;width:40px;height:5px;border-radius:9px;background:var(--togoff);margin:0 auto 14px}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes sheetup{from{transform:translateY(100%)}to{transform:none}}
.won-n{margin:8px 0 0;font:800 34px/1.02 var(--fj);letter-spacing:-.04em;text-wrap:balance;overflow-wrap:anywhere}
.won-h{margin:10px 0 0;font:500 13.5px/1.5 var(--fj);color:var(--note)}
.won-h q{color:var(--ink);font-weight:600}
.toast{position:fixed;left:50%;bottom:32px;transform:translateX(-50%);z-index:70;background:var(--kbg);color:var(--kfg);font:700 12.5px/1.35 var(--fj);padding:10px 15px;border-radius:16px;width:max-content;max-width:86%;text-align:center;box-shadow:0 12px 26px -10px rgba(0,0,0,.45);animation:toastin .25s cubic-bezier(.22,1,.36,1)}
@keyframes toastin{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
canvas.confetti{position:fixed;inset:0;width:100%;height:100%;z-index:50;pointer-events:none}
/* le bandeau « e-mail reçu » : l'héritier des notifications de la maquette */
.push{position:fixed;left:50%;top:14px;transform:translateX(-50%);width:min(440px,calc(100% - 24px));z-index:65;display:flex;gap:10px;align-items:flex-start;text-align:left;padding:11px 12px;border-radius:20px;border:0;cursor:pointer;color:var(--ink);background:color-mix(in srgb,var(--card) 88%,transparent);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 16px 36px -14px rgba(0,0,0,.45),0 0 0 1px var(--line);animation:pushin .45s cubic-bezier(.22,1,.36,1)}
.push .pi{width:36px;height:36px;flex:none;border-radius:9px}
.push .pi.mailpi{display:grid;place-items:center;background:#3478F6;color:#fff;font-size:18px}
.push .pt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.push .pa{display:flex;justify-content:space-between;font:600 10.5px/1 var(--fj);letter-spacing:.06em;color:var(--note)}
.push .pa i{font-style:normal;letter-spacing:0}
.push b{font:800 13.5px/1.25 var(--fj)}
.push .pt>span:last-child{font:500 12.5px/1.35 var(--fj);color:var(--note)}
@keyframes pushin{from{transform:translate(-50%,-120%);opacity:0}to{transform:translate(-50%,0);opacity:1}}

/* QR et passage au téléphone */
.qrw{position:relative;width:100%;aspect-ratio:1;max-width:100%;background:#fff;border-radius:14px;padding:6%;box-shadow:0 8px 20px -10px rgba(20,19,25,.3)}
.qrw svg.qr{display:block;width:100%;height:100%}
.qrw .ql{position:absolute;left:50%;top:50%;width:20%;height:20%;transform:translate(-50%,-50%);border-radius:22%;box-shadow:0 0 0 3px #fff}
.qrw.sm{width:96px;flex:none}
.qrw.hq{width:128px;flex:none}
.qrblock{display:grid;grid-template-columns:118px minmax(0,1fr);gap:14px;align-items:center;margin-top:16px;padding:14px;border-radius:20px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-card)}
.qrblock b{display:block;font:800 14.5px/1.25 var(--fj)}
.qrblock p{margin:6px 0 0;font:500 12px/1.5 var(--fj);color:var(--note)}
.handoff{margin-top:18px;padding:16px;border-radius:20px;background:var(--card);border:1.5px solid color-mix(in srgb,var(--violet) 30%,transparent);box-shadow:var(--shadow-card)}
.handoff.ok{border-color:color-mix(in srgb,var(--ok) 45%,transparent)}
.handoff .lede{font-size:13px}
.hrow{display:flex;gap:14px;align-items:flex-start;margin-top:12px}
.handoff .how li{font-size:12.5px}
.okline{display:flex;gap:6px;align-items:flex-start;margin-top:10px;color:var(--oktx)}
.poster{border-radius:22px;padding:18px 18px 16px;text-align:center;color:var(--c-txt);background:linear-gradient(165deg,var(--c-ink),var(--c-pine));border:1px solid rgba(200,165,101,.5)}
.poster .sc-co{display:block}
.poster .pt{margin:8px 0 12px;font:italic 600 34px/1 var(--fc);color:var(--c-gold-hi)}
.poster .qrw{width:62%;margin:0 auto}
.poster p{margin:12px 0 0;font:600 12px/1.45 var(--fj)}
.poster small{display:block;margin-top:4px;font:600 10.5px/1 var(--fg);letter-spacing:.1em;color:var(--c-gold-hi)}

/* la mission */
.secret{display:block;width:100%;text-align:left;border:0;cursor:pointer;margin-top:12px;border-radius:22px;padding:18px 18px 16px;color:var(--c-txt);
  background:radial-gradient(120% 90% at 50% 100%,rgba(200,165,101,.2),transparent 60%),linear-gradient(200deg,var(--c-pine) 0%,var(--c-ink) 85%);border:1px solid rgba(200,165,101,.5);position:relative;overflow:hidden}
.secret .k{color:var(--c-gold-hi);opacity:.8}
.secret .nmx{display:block;margin-top:8px;font:italic 600 38px/1 var(--fc);color:var(--c-gold-hi);transition:filter .3s;overflow-wrap:anywhere}
.secret .hx{display:block;margin-top:10px;font:500 12.5px/1.5 var(--fj);color:rgba(243,234,210,.85);transition:filter .3s}
.secret .nmx.hid,.secret .hx.hid{filter:blur(9px)}
.secret .tap{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font:600 11.5px/1 var(--fj);color:rgba(243,234,210,.75)}
.todo .grow{cursor:pointer;align-items:flex-start}
.ck{width:24px;height:24px;border-radius:8px;border:2px solid var(--faint);display:grid;place-items:center;color:#fff;flex:none;font-size:13px;margin-top:1px;transition:background-color .15s,border-color .15s}
.todo [aria-checked="true"] .ck{background:var(--ok);border-color:var(--ok)}
.todo [aria-checked="true"] .gtx b{text-decoration:line-through;color:var(--note)}
.todo .gtx b{font-weight:600;font-size:13.5px;line-height:1.45}
.grouped>[role="checkbox"]:focus-visible{outline-offset:-3px;border-radius:inherit}
.empty{padding:22px 18px;text-align:center}
.empty b{display:block;font:800 14px/1.3 var(--fj)}
.empty p{margin:6px 0 0;font:500 12.5px/1.5 var(--fj);color:var(--note)}
.empty svg.i{width:28px;height:28px;color:var(--faint);margin-bottom:8px}

/* tableau de bord (utilisé par le chantier /a/<clé>) */
.dhead{display:flex;align-items:center;gap:12px;margin-top:4px}
.dhead .gtx b{font-size:17px;font-weight:800;letter-spacing:-.02em}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
.st{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:11px 12px;box-shadow:var(--shadow-card);min-width:0}
.st b{display:block;font:800 22px/1 var(--fj);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.st span{display:block;margin-top:6px;font:700 10.5px/1.2 var(--fj);color:var(--note)}
.st .den{display:inline;font:inherit;color:var(--note);font-size:15px}
.seg{display:flex;gap:3px;background:var(--surf);border-radius:999px;padding:4px;margin-top:16px}
.seg button{flex:1;min-width:0;border:0;background:none;border-radius:999px;padding:10px 4px;font:700 12.5px/1 var(--fj);color:var(--note);cursor:pointer}
.seg button[aria-selected="true"]{background:var(--card);color:var(--ink);box-shadow:0 4px 10px -5px rgba(20,19,25,.25)}
.xbtn{width:30px;height:30px;border-radius:999px;border:0;background:var(--surf);color:var(--note);display:grid;place-items:center;cursor:pointer;flex:none;font-size:14px}
.xbtn:hover{background:var(--coral-soft);color:var(--coraltx)}
.arrow{color:var(--faint);font-weight:800;flex:none}
.rcp{font:700 13px/1.2 var(--fj);flex:none;max-width:42%;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:filter .25s}
.rcp.blur{filter:blur(6px);user-select:none}
.feed{list-style:none;margin:0;padding:0}
.feed li{display:flex;gap:10px;align-items:baseline;padding:10px 15px;font:500 12.5px/1.45 var(--fj)}
.feed li+li{border-top:1px solid var(--line)}
.feed li span{flex:1;min-width:0}
.feed time{font:600 11px/1 var(--fg);color:var(--muted);white-space:nowrap}
.tl{list-style:none;margin:14px 0 0;padding:12px 6px 10px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-card)}
.tl li{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;min-width:0;padding:0 2px}
.tl li::before{content:"";position:absolute;top:6px;left:-50%;width:100%;height:2px;background:var(--line)}
.tl li:first-child::before{display:none}
.tl li.done::before,.tl li.now::before{background:var(--violet)}
.tl i{position:relative;z-index:1;width:14px;height:14px;border-radius:9px;background:var(--card);border:2px solid var(--faint)}
.tl li.done i{background:var(--violet);border-color:var(--violet)}
.tl li.now i{border-color:var(--violet);box-shadow:0 0 0 4px var(--violet-soft)}
.tl b{font:700 11.5px/1.2 var(--fg);margin-top:4px}
.tl span{font:700 11px/1.25 var(--fj);color:var(--ink)}
.tl small{font:500 10px/1.2 var(--fj);color:var(--note)}
.tl li:not(.done):not(.now) span{color:var(--note)}
.bar{padding:14px 0 0;display:flex;flex-direction:column;gap:8px}
.bar .cfm{border-radius:16px}

/* ---------------- création (/nouveau) : le formulaire et l'aperçu en direct ---------------- */
.create{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:28px clamp(24px,4vw,56px);align-items:start;padding:12px 0 34px;max-width:980px;margin:0 auto}
.cform{min-width:0}
.cform .bar{padding-top:18px}
.cprev{position:sticky;top:18px}
.prevh{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.prevh .note{font-size:12px}
.live{display:inline-flex;align-items:center;gap:6px;font:700 10.5px/1 var(--fj);letter-spacing:.06em;text-transform:uppercase;color:var(--coraltx);background:var(--coral-soft);padding:6px 9px;border-radius:999px}
.live::before{content:"";width:6px;height:6px;border-radius:9px;background:var(--coral);animation:blink 1.4s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
.mot.ph p{color:var(--muted);font-style:italic}
.f>span.note{font-weight:500;line-height:1.5}
.f>span.note:empty{display:none}
.f .linkbox{margin-top:4px}
.f .count{float:right}
@media (max-width:860px){.create{grid-template-columns:minmax(0,1fr);max-width:520px}.cprev{position:static;order:-1}}

/* ---------------- tableau de bord (/a/<clé>) ---------------- */
.wwrap.wide{max-width:640px}
.stats.s4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:480px){.stats.s4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.dhead .pill{margin-left:auto}
.devi{display:inline-flex;align-items:center;gap:3px}
.devi svg.i{width:12px;height:12px}
.feed li.plus{justify-content:center;padding:4px}
.feed li.plus button{width:auto}
.grouped .err{padding:0 15px 10px}
.filmcard{margin-top:16px;border-radius:22px;padding:18px;background:#0B0912;color:#fff;position:relative;overflow:hidden}
.filmcard::before{content:"";position:absolute;inset:0;background:radial-gradient(90% 70% at 85% 0%,rgba(210,58,74,.5),transparent 60%),radial-gradient(70% 60% at 0% 100%,rgba(254,202,87,.3),transparent 60%);pointer-events:none}
.filmcard>*{position:relative}
.filmcard .k{color:rgba(255,255,255,.6)}
.filmcard .ft{margin:10px 0 0;font:800 19px/1.15 var(--fj);letter-spacing:.06em;text-transform:uppercase;overflow-wrap:anywhere}
.filmcard p{margin:8px 0 0;font:500 12px/1.5 var(--fj);color:rgba(255,255,255,.72)}
.sheet .grouped{box-shadow:none}
.sheet .chsel{margin-top:8px}

/* ---------------- landing : questions fréquentes ---------------- */
.faq{margin-top:26px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 36px}
.faq details{border-top:1px solid var(--line);padding:2px 0}
.faq summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;padding:13px 0;font:800 15px/1.3 var(--fj);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg.i{margin-left:auto;color:var(--note);transform:rotate(180deg);transition:transform .2s;flex:none}
.faq details[open] summary svg.i{transform:none}
.faq p{margin:0 0 14px;font:500 13.5px/1.6 var(--fj);color:var(--note)}
@media (max-width:760px){.faq{grid-template-columns:minmax(0,1fr)}}

/* ---------------- Noël : logo coiffé, neige, guirlande ---------------- */
/* la tuile Vivory coiffée du bonnet, en une seule image (logo-noel.png) : la boîte .lg fait la taille de la tuile,
   l'image déborde du haut et des côtés pour laisser le bonnet dépasser (règle de Yann, 15/10) */
.lg{position:relative;display:inline-block;flex:none;line-height:0;vertical-align:middle;width:34px;height:34px}
.lg>img.logo{position:absolute;width:119.6%;height:auto;left:-5.7%;top:-16.6%;pointer-events:none;user-select:none;-webkit-user-drag:none}
.brand .lg{width:34px;height:34px}
.lg.vt{width:24px;height:24px}
.foot .lg{width:22px;height:22px}
.garland{overflow:hidden}
.garland .gl{display:flex;justify-content:space-between;position:relative;height:18px;margin-top:12px}
.garland .gl::before{content:"";position:absolute;left:0;right:0;top:3px;border-top:1.5px solid var(--line)}
.garland i{position:relative;width:8px;height:12px;margin-top:4px;border-radius:50%/42% 42% 58% 58%;background:var(--gold);box-shadow:0 0 7px 1px color-mix(in srgb,var(--gold) 70%,transparent);animation:tw 2.6s ease-in-out infinite}
.garland i::before{content:"";position:absolute;left:2px;right:2px;top:-3px;height:3px;background:var(--faint);border-radius:1px}
.garland i:nth-child(3n+2){background:var(--coral);box-shadow:0 0 7px 1px color-mix(in srgb,var(--coral) 70%,transparent);animation-delay:-.9s}
.garland i:nth-child(3n){background:var(--violet);box-shadow:0 0 7px 1px color-mix(in srgb,var(--violet) 70%,transparent);animation-delay:-1.7s}
.garland i:nth-child(4n+1){animation-duration:3.3s}
.garland i:nth-child(5n+3){animation-delay:-2.2s}
@media (max-width:560px){.garland i:nth-child(n+13){display:none}}
@keyframes tw{0%,100%{opacity:1;filter:brightness(1)}50%{opacity:.5;filter:brightness(.85)}}
canvas.snow{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.hero>*:not(.snow){position:relative;z-index:1}
.ser{position:relative;white-space:nowrap}
@media (max-width:560px){.ser{white-space:normal}}
.ser .tw{position:absolute;fill:var(--gold);width:.42em;height:.42em;right:-.5em;top:-.18em;animation:spk 2.8s ease-in-out infinite}
.ser .tw+.tw{width:.24em;height:.24em;right:-.22em;top:.52em;animation-delay:-1.3s}
@keyframes spk{0%,100%{opacity:.35;transform:scale(.7) rotate(0)}50%{opacity:1;transform:scale(1.05) rotate(20deg)}}
.sscard .sc-spark{animation:spk 3.2s ease-in-out infinite}
.sscard .sc-spark+.sc-spark{animation-delay:-1.1s}
.sscard .sc-spark+.sc-spark+.sc-spark{animation-delay:-2.3s}
.sscard::after{content:"";position:absolute;inset:-40% 0 0;pointer-events:none;opacity:.55;
  background-image:radial-gradient(circle,rgba(255,255,255,.85) 1px,transparent 1.6px),radial-gradient(circle,rgba(255,255,255,.55) .8px,transparent 1.3px);
  background-size:46px 46px,29px 29px;background-position:0 0,13px 7px;animation:cardsnow 16s linear infinite}
@keyframes cardsnow{to{background-position:9px 92px,-7px 58px}}

@media (prefers-reduced-motion:reduce){
  .push,.okmark,.ov,.sheet,.toast{animation:none}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .garland i,.ser .tw,.sscard .sc-spark,.sscard::after{animation:none}
}

/* ---- Habillage de Noël des écrans de l'app : boutons et cases en rouge et blanc (bloc repris de la maquette).
   Sur le site du pilote, ce rouge est la couleur principale de toutes les pages de l'app et des formulaires ;
   le violet ne reste que dans le logo et le mot-symbole « Vivory » (en-tête, pied). ---- */
#ecran{
  --noel:#D23A4A;
  --violet:var(--noel);
  --violet-soft:color-mix(in srgb,var(--noel) 10%,var(--bg));
  --pilltx:color-mix(in srgb,var(--noel) 80%,var(--ink) 20%);
  --coral:var(--noel);
  --coral-soft:color-mix(in srgb,var(--noel) 15%,var(--bg));
  --coraltx:color-mix(in srgb,var(--noel) 72%,var(--ink) 28%);
  --togoff:color-mix(in srgb,var(--noel) 16%,var(--surf));
}
#ecran .av.a1{background:var(--gold-soft);color:var(--goldtx)}
#ecran .av.a2{background:var(--ok-soft);color:var(--oktx)}
#ecran .btn.g{border-color:color-mix(in srgb,var(--noel) 40%,var(--line));color:var(--pilltx)}
#ecran .btn.o{color:var(--pilltx)}
#ecran .grouped{border-color:color-mix(in srgb,var(--noel) 18%,var(--line))}
#ecran .ck{border-color:color-mix(in srgb,var(--noel) 50%,var(--faint))}
#ecran .todo [aria-checked="true"] .ck{background:var(--noel);border-color:var(--noel)}
#ecran .seg button[aria-selected="true"]{color:var(--pilltx)}
#ecran .joinhead .lg{filter:drop-shadow(0 12px 22px rgba(210,58,74,.35))}

/* ---- le bandeau du mode test (?mock=1) : rien n'est enregistré sur le serveur ---- */
.mockbar{margin:0;display:flex;flex-wrap:wrap;gap:2px 10px;align-items:center;justify-content:center;padding:8px 16px;background:#1A1430;color:#F3F1FB;font:600 12px/1.45 var(--fj);text-align:center}
.mockbar b{font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#FECA57}
.mockbar a{color:#FFFFFF;font-weight:700}
/* ---- les tableaux de bord gardés sur ce navigateur (landing, /nouveau) ---- */
.mesev{display:flex;gap:8px;align-items:flex-start;margin:16px 0 0;max-width:64ch;font:500 13px/1.5 var(--fj);color:var(--note)}
.mesev svg.i{margin-top:3px;color:var(--pilltx)}
.mesev a{font-weight:700;color:var(--pilltx);overflow-wrap:anywhere}
/* ---- le titre qui reçoit le focus à chaque nouvel écran (lecteurs d'écran) : pas de contour ---- */
#ecran:focus,#ecran h1[tabindex="-1"]:focus{outline:none}

/* les liens dans les petites notes (« Déjà inscrit·e ? Entre ton code ») : le rouge foncé du texte, lisible en sombre (AA) */
#ecran .note a{color:var(--pilltx);font-weight:700}

/* ================= décor immersif des pages participant·es (vidéo floutée, blocs à onglet) ================= */
.fond{position:fixed;inset:0;z-index:0;display:none;background:#15100c center/cover no-repeat}
.fond video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.03)}
.fond::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,9,7,.46) 0%,rgba(12,9,7,.10) 20%,rgba(12,9,7,.14) 72%,rgba(12,9,7,.52) 100%)}
body.immersif{background:#15100c;--carte:#F7F5F2;--carte2:#ECE8E2;--encre:#171412;--gris:#69625A;--filet:rgba(23,20,18,.09);--rouge:#D23A4A;--rougeH:#B92F3F;--vert:#23885A}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body.immersif{--carte:#1F1C1A;--carte2:#2A2624;--encre:#F4F0EA;--gris:#ABA39A;--filet:rgba(255,255,255,.09);--vert:#4CC08A}}
:root[data-theme="dark"] body.immersif{--carte:#1F1C1A;--carte2:#2A2624;--encre:#F4F0EA;--gris:#ABA39A;--filet:rgba(255,255,255,.09);--vert:#4CC08A}
.immersif .fond{display:block}
.immersif .garland,.immersif canvas.snow{display:none}
.immersif #entete,.immersif #ecran,.immersif #pied,.immersif .mockbar,.immersif #live{position:relative;z-index:1}
.immersif .top{border-bottom:0}
.immersif .top .brand,.immersif .top .ctx{color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.4)}
.immersif .top .sep{background:rgba(255,255,255,.35)}
.immersif .ibtn{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.24);color:#fff;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:none}
body.immersif{display:flex;flex-direction:column;min-height:100dvh}
.immersif #ecran{max-width:none;padding-inline:0;flex:1 0 auto;display:flex;flex-direction:column;justify-content:center}
.immersif .top{padding-block:14px 0;width:min(1140px,calc(100% - 32px));padding-inline:0;margin-inline:auto;align-self:center}
.immersif #pied{width:100%}
.scene{width:min(1140px,calc(100% - 32px));margin:0 auto;padding:44px 0 6px;display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,1fr);gap:16px;align-items:start;font-family:"Readex Pro",var(--fj);font-weight:300;color:var(--encre)}
.scene .col-d{display:flex;flex-direction:column;gap:46px;min-width:0;height:100%}
.scene .col-d .b-rappel{flex:1}
.scene .ruban{grid-column:1/-1}
.bloc{position:relative;background:var(--carte);color:var(--encre);border-radius:0 22px 22px 22px;padding:22px 24px 24px;filter:drop-shadow(0 22px 34px rgba(0,0,0,.32))}
.onglet{position:absolute;left:0;top:-34px;height:35px;margin:0;padding:0 16px 0 14px;display:flex;align-items:center;gap:8px;background:var(--carte);border-radius:16px 16px 0 0;font:400 13.5px/1 "Readex Pro",var(--fj);color:var(--encre);white-space:nowrap}
.onglet::after{content:"";position:absolute;right:-16px;bottom:1px;width:16px;height:16px;background:radial-gradient(circle at 100% 0,transparent 15.5px,var(--carte) 16px)}
.onglet .i{font-size:15px;color:var(--rouge);stroke-width:1.8}
.scene .org{display:flex;align-items:center;gap:12px;min-width:0}
.scene .org>div{min-width:0}
.scene .org b{display:block;font-weight:400;font-size:15px}
.scene .org>div>span{display:block;font-size:13px;color:var(--gris);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scene .org .av{width:40px;height:40px;font-weight:500}
.lien-tb{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--encre);text-decoration:none;background:var(--carte2);border-radius:999px;padding:7px 12px}
.titre{margin:18px 0 0;font:500 clamp(24px,2.5vw,32px)/1.14 "Readex Pro",var(--fj);letter-spacing:-.025em;text-wrap:balance}
.mot-court{margin:8px 0 0;font-size:15px;line-height:1.55;color:var(--gris);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.champs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
.champ{display:flex;flex-direction:column;gap:6px;min-width:0}
.champ.large{grid-column:1/-1}
.champ>span{font-size:13px;color:var(--gris)}
.champ em{font-style:normal;opacity:.75}
.scene .inp{width:100%;height:46px;border-radius:12px;border:1px solid transparent;background:var(--carte2);padding:0 14px;font:300 15px/1 "Readex Pro",var(--fj);color:var(--encre);transition:border-color .15s,background .15s,box-shadow .15s}
.scene .inp::placeholder{color:color-mix(in srgb,var(--gris) 75%,transparent);font-weight:300}
.scene .note,.scene .note b{font-weight:300}
.scene .note .code{font-weight:500}
.scene .inp:focus{outline:none;border-color:var(--rouge);background:var(--carte);box-shadow:0 0 0 4px color-mix(in srgb,var(--rouge) 16%,transparent)}
.scene .err{margin:8px 0 0;min-height:0;color:var(--rouge);font-size:13.5px;line-height:1.45}
.scene .err:empty{display:none}
.cta{margin-top:16px;width:100%;height:54px;border:0;border-radius:14px;background:var(--rouge);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 18px 0 20px;font:400 16px/1 "Readex Pro",var(--fj);cursor:pointer;transition:background .2s,transform .1s}
.cta:hover{background:var(--rougeH)}
.cta:active{transform:scale(.99)}
.cta:disabled{opacity:.6;cursor:default}
.cta:focus-visible{outline:3px solid color-mix(in srgb,var(--rouge) 45%,transparent);outline-offset:3px}
.cta-ic{position:relative;width:20px;height:20px;overflow:hidden;font-size:19px}
.cta-ic i{position:absolute;inset:0;display:grid;place-items:center;transition:transform .28s cubic-bezier(.22,1,.36,1)}
.cta-ic i+i{transform:translateY(100%)}
.cta:hover .cta-ic i:first-child,.cta:focus-visible .cta-ic i:first-child{transform:translateY(-100%)}
.cta:hover .cta-ic i+i,.cta:focus-visible .cta-ic i+i{transform:translateY(0)}
.faits{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 0}
.b-tirage .faits{margin-top:14px;padding-top:14px;border-top:1px solid var(--filet)}
.faits span{font-size:12.5px;color:var(--gris);background:var(--carte2);border-radius:999px;padding:6px 11px}
.b-tirage .k{margin:0;font:300 13px/1.3 "Readex Pro",var(--fj);letter-spacing:0;text-transform:none;color:var(--gris)}
.date-xl{margin:6px 0 0;font:400 clamp(26px,2.6vw,34px)/1.08 "Readex Pro",var(--fj);letter-spacing:-.025em}
.date-xl .heure{font:300 16px/1 "Readex Pro",var(--fj);letter-spacing:0;color:var(--gris);white-space:nowrap}
.scene .cd{display:flex;gap:8px;margin-top:16px}
.scene .cd>div{flex:1;min-width:0;background:var(--carte2);border-radius:12px;padding:9px 4px 8px;text-align:center;box-shadow:none}
.scene .cd b{display:block;font:400 22px/1 "Readex Pro",var(--fj);font-variant-numeric:tabular-nums;color:var(--encre)}
.scene .cd span{display:block;margin-top:5px;font:300 11px/1 "Readex Pro",var(--fj);letter-spacing:0;text-transform:none;color:var(--gris)}
.scene .b-tirage .note{margin:10px 0 0;font-size:13px;color:var(--gris);text-align:left}
.b-rappel .champ{margin-top:2px}
.rassure{display:flex;gap:9px;margin:14px 0 0;font-size:13.5px;line-height:1.5;color:var(--gris)}
.rassure .i{flex:none;margin-top:2px;font-size:14px}
.etat{margin:0;font-size:15px;line-height:1.5}
.etat.ok{display:flex;gap:9px;align-items:flex-start}
.etat.ok .i{flex:none;margin-top:3px;color:var(--vert)}
.scene .ruban{display:flex;align-items:center;gap:16px;padding:10px 14px 10px 18px;border-radius:22px}
.ruban-t{flex:none;display:flex;align-items:center;gap:9px;margin:0;font-size:14px;font-weight:400;padding-right:16px;border-right:1px solid var(--filet);white-space:nowrap}
.ruban-t .i{color:var(--rouge);font-size:16px}
.ruban-vide{margin:0;font-size:14px;color:var(--gris)}
.piste{flex:1;min-width:0;overflow:hidden;display:flex;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.piste ul{display:flex;gap:8px;margin:0;padding:0 8px 0 0;list-style:none;flex:none}
.piste li{display:flex;align-items:center;gap:8px;white-space:nowrap;background:var(--carte2);border-radius:999px;padding:5px 13px 5px 5px;font-size:13.5px}
.piste .ini{width:26px;height:26px;border-radius:999px;display:grid;place-items:center;background:var(--carte);font-size:10.5px;font-weight:500;color:var(--gris)}
.piste li.toi{background:color-mix(in srgb,var(--rouge) 14%,var(--carte))}
.piste li em{font-style:normal;color:var(--rouge);font-size:12px}
.piste.defile ul{animation:defile var(--duree,40s) linear infinite}
.piste.defile:hover ul{animation-play-state:paused}
@keyframes defile{to{transform:translateX(-100%)}}
.b-part.fait .suite{margin-top:18px}
.b-part .h4{margin:0;font-size:16px;font-weight:400}
.b-part .suite .note{margin:8px 0 0;font-size:13px;color:var(--gris);line-height:1.5}
.qr-zone{display:flex;gap:18px;align-items:center;padding:14px;border-radius:16px;background:var(--carte2)}
.qr-zone .qrw{flex:none;width:156px;padding:10px;background:#fff;border-radius:14px}
.etapes{margin:8px 0 0;padding-left:18px;font-size:13.5px;line-height:1.6;color:var(--gris)}
.immersif .solo,.immersif #ecran>.wwrap{position:relative;width:min(640px,calc(100% - 32px));margin:28px auto 16px;background:var(--carte);color:var(--encre);border-radius:22px;padding:20px 22px 24px;filter:drop-shadow(0 22px 34px rgba(0,0,0,.32))}
.immersif .solo .wwrap{max-width:none;margin:0;padding:0}
#pied .propulse{display:none}
.immersif #pied{justify-content:center;border-top:0;margin-top:0;padding-block:8px 16px}
.immersif #pied>*{display:none}
.immersif #pied .propulse{display:inline-flex;align-items:center;gap:8px;color:#fff;text-decoration:none;font:300 13px/1 "Readex Pro",var(--fj);background:rgba(0,0,0,.22);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:8px 14px 8px 10px;border-radius:999px}
.immersif #pied .propulse .lg{width:18px;height:18px}
.immersif #pied .propulse b{font-weight:500}
@media (max-width:900px){
  .scene{grid-template-columns:minmax(0,1fr);padding-top:42px;gap:46px}
  .scene .ruban{margin-top:-30px}
  .ruban{flex-direction:column;align-items:stretch;gap:12px}
  .ruban-t{border-right:0;padding-right:0}
}
@media (max-width:480px){
  .champs{grid-template-columns:minmax(0,1fr)}
  .qr-zone{flex-direction:column;align-items:flex-start}
  .bloc{padding:18px 18px 20px}
}
@media (min-width:901px) and (max-height:800px){
  .scene{padding-top:40px;gap:14px}
  .scene .org .av{width:34px!important;height:34px!important}
  .scene .col-d{gap:42px}
  .bloc{padding:18px 22px 20px}
  .titre{font-size:25px;margin-top:12px}
  .mot-court{-webkit-line-clamp:2;margin-top:6px}
  .champs{margin-top:12px;gap:10px 12px}
  .scene .inp{height:42px}
  .cta{height:48px;margin-top:12px}
  .faits{margin-top:10px}
  .date-xl{font-size:27px}
  .scene .cd{margin-top:12px}
  .scene .cd b{font-size:19px}
  .scene .cd>div{padding:7px 4px 6px}
  .b-tirage .faits{margin-top:10px;padding-top:10px}
  .b-tirage .k{display:none}
  .date-xl{margin-top:0}
  .rassure{margin-top:10px}
  .qr-zone .qrw{width:128px}
}
@media (prefers-reduced-motion:reduce){.piste.defile ul{animation:none}.cta-ic i{transition:none}}

/* les autres écrans participant·es (roue, mission, jour J, code) posés sur le décor : même typo, même bouton */
.immersif .solo,.immersif #ecran>.wwrap{font-family:"Readex Pro",var(--fj);font-weight:300}
.immersif .solo .eyebrow,.immersif #ecran>.wwrap .eyebrow{font:400 13px/1.3 "Readex Pro",var(--fj);letter-spacing:0;text-transform:none;color:var(--gris)}
.immersif .solo .h,.immersif #ecran>.wwrap .h{font:500 clamp(24px,2.4vw,30px)/1.15 "Readex Pro",var(--fj);letter-spacing:-.025em;color:var(--encre)}
.immersif .solo .h3,.immersif #ecran>.wwrap .h3{font:400 18px/1.3 "Readex Pro",var(--fj);color:var(--encre)}
.immersif .solo .lede,.immersif #ecran>.wwrap .lede{font:300 15px/1.55 "Readex Pro",var(--fj);color:var(--gris)}
.immersif .solo .note,.immersif #ecran>.wwrap .note{font-family:"Readex Pro",var(--fj);font-weight:300;color:var(--gris)}
.immersif .solo .btn,.immersif #ecran>.wwrap .btn{font:400 16px/1 "Readex Pro",var(--fj);border-radius:14px;text-shadow:none}
.immersif .solo .btn.v,.immersif #ecran>.wwrap .btn.v{background:var(--rouge);box-shadow:none;min-height:52px}
.immersif .solo .btn.v:hover,.immersif #ecran>.wwrap .btn.v:hover{background:var(--rougeH);filter:none}
.immersif .solo .chip,.immersif .solo .pill{font-family:"Readex Pro",var(--fj);font-weight:400;letter-spacing:0;text-transform:none}
.immersif .solo .inp,.immersif #ecran>.wwrap .inp{font-family:"Readex Pro",var(--fj);font-weight:300;background:var(--carte2);border-color:transparent;border-radius:12px}