*{box-sizing:border-box;margin:0;padding:0}

/* ======== téléphone + matière ======== */
.ph{width:100%;max-width:430px;height:100dvh;margin:0 auto;overflow:hidden;position:relative;display:flex;flex-direction:column;
  --h:300; --light:.95; --frost:18px; --alpha:.10;
  --bg:hsl(var(--h) 28% 7%); --tx:#F5F5F7; --tx2:hsl(var(--h) 12% 73%); --tx3:hsl(var(--h) 10% 48%);
  --acc:hsl(var(--h) 85% 68%); --acc2:hsl(calc(var(--h) + 60) 85% 70%); --line:rgba(255,255,255,.10); --glass:rgba(255,255,255,var(--alpha));
  --l1:hsl(var(--h) 90% 60%); --l2:hsl(calc(var(--h) + 50) 90% 62%); --l3:hsl(calc(var(--h) - 60) 90% 60%);
  --ink-on-acc:#0B0C10;

  /* ======== LA RECETTE DU VERRE, posée une seule fois ========
     Toutes les surfaces en verre pointent ici. Pour changer le verre
     de l'application, on change ces quatre lignes, pas trente règles.
     --verre-flou     : le flou de fond, commun a toutes les surfaces
     --verre-epaisseur: l'epaisseur lue par l'arete et le degrade (0 a 1.5)
     --verre-relief   : le degrade haut-bas qui donne l'epaisseur
     --verre-arete    : le fil de lumiere sur le bord superieur
     --verre-ombre    : l'ombre portee, teintee par la couleur choisie */
  --verre-flou:blur(var(--frost)) saturate(1.5);
  --verre-epaisseur:1;
  --verre-relief:linear-gradient(180deg,
    rgba(255,255,255,calc(var(--verre-epaisseur) * .10)) 0%,
    rgba(255,255,255,calc(var(--verre-epaisseur) * .03)) 42%,
    rgba(255,255,255,calc(var(--verre-epaisseur) * .05)) 100%);
  --verre-arete:inset 0 1px 0 rgba(255,255,255,calc(var(--verre-epaisseur) * .30));
  --verre-ombre:0 14px 38px -16px hsl(var(--h) 60% 4% / .55);

  background:var(--bg);color:var(--tx);transition:background .5s}

/* le jour : l'ombre s'eclaircit, l'arete se renforce */
.ph.day{--verre-arete:inset 0 1px 0 rgba(255,255,255,.9);
        --verre-ombre:0 14px 34px -18px hsl(var(--h) 40% 30% / .35)}
.ph.day{--bg:hsl(var(--h) 45% 96%); --tx:#15161A; --tx2:hsl(var(--h) 12% 40%); --tx3:hsl(var(--h) 10% 58%); --acc:hsl(var(--h) 75% 45%); --acc2:hsl(calc(var(--h) + 60) 75% 50%); --line:rgba(255,255,255,.9); --glass:rgba(255,255,255,calc(.45 + var(--alpha) * 2)); --ink-on-acc:#fff}
.light{position:absolute;inset:0;z-index:0;overflow:hidden;opacity:var(--light);transition:opacity .4s}
.light i{position:absolute;border-radius:50%;filter:blur(46px);animation:drift 14s ease-in-out infinite alternate}
.light i:nth-child(1){width:320px;height:320px;background:var(--l1);top:-120px;left:-60px;opacity:.75}
.light i:nth-child(2){width:260px;height:260px;background:var(--l2);top:110px;right:-110px;opacity:.55;animation-delay:-5s}
.light i:nth-child(3){width:300px;height:300px;background:var(--l3);bottom:-40px;left:-40px;opacity:.5;animation-delay:-9s}
.ph.halo .light i:nth-child(1){top:-160px;left:35px;opacity:.85}
.ph.halo .light i:nth-child(2){opacity:.18;top:200px}
.ph.halo .light i:nth-child(3){opacity:.12}
.ph.aurore .light i{border-radius:40%;filter:blur(38px)}
.ph.aurore .light i:nth-child(1){width:520px;height:160px;top:40px;left:-120px;transform:rotate(-18deg);animation:sweep 10s ease-in-out infinite alternate}
.ph.aurore .light i:nth-child(2){width:520px;height:120px;top:160px;left:-60px;transform:rotate(-14deg);animation:sweep 12s ease-in-out infinite alternate-reverse}
.ph.aurore .light i:nth-child(3){width:420px;height:200px;bottom:-60px;left:0;transform:rotate(-8deg)}
@keyframes drift{to{transform:translate(28px,-22px) scale(1.08)}}
@keyframes sweep{to{transform:rotate(-18deg) translateX(60px)}}
.ph:not(.day) .light:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,var(--bg) 100%);opacity:.8}
.st{height:54px;display:flex;justify-content:space-between;align-items:center;padding:0 28px;font-size:13px;font-weight:600;flex:none;position:relative;z-index:2;color:var(--tx2)}
.sc{flex:1;overflow:auto;position:relative;z-index:2;padding:0 18px 110px;scrollbar-width:none}
.sc::-webkit-scrollbar{display:none}
.screen{display:none}.screen.on{display:block}

.g{background:var(--verre-relief),var(--glass);border:1px solid var(--line);-webkit-backdrop-filter:var(--verre-flou);backdrop-filter:var(--verre-flou);border-radius:24px;padding:16px 18px;margin-bottom:12px;box-shadow:var(--verre-ombre),var(--verre-arete);transition:background .3s}
.g.tight{padding:12px 14px}
.head{display:flex;align-items:center;justify-content:space-between;margin:6px 0 14px;gap:10px}
.head .who{display:flex;align-items:center;gap:12px;min-width:0}
.head .n{font-size:14px;font-weight:700}
.head .s{font-size:12px;color:var(--tx2)}
.rb{width:40px;height:40px;border-radius:50%;background:var(--glass);border:1px solid var(--line);-webkit-backdrop-filter:var(--verre-flou);backdrop-filter:var(--verre-flou);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--tx);flex:none}
.rb svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pair{width:48px;height:48px;position:relative;flex:none}
.pair:before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,var(--l1),var(--l2),var(--l3),var(--l1));animation:turn 9s linear infinite}
.pair:after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--bg)}
.pair b{position:absolute;top:9px;width:22px;height:22px;border-radius:50%;z-index:1;font-family:'Fraunces',serif;font-size:11px;display:grid;place-items:center;color:#fff;border:1.5px solid var(--bg)}
.pair b:first-of-type{left:8px;background:linear-gradient(140deg,var(--acc),var(--acc2))}
.pair b:last-of-type{left:19px;background:linear-gradient(140deg,var(--acc2),var(--acc))}
@keyframes turn{to{transform:rotate(360deg)}}
h2{font-family:'Fraunces',serif;font-weight:300;font-size:30px;line-height:1.12;letter-spacing:-.01em;margin-bottom:16px}
h2 em{font-style:italic;color:var(--acc)}
.ttl{font-family:'Fraunces',serif;font-weight:300;font-size:28px;letter-spacing:-.01em;line-height:1.1;margin:2px 0 4px}
.sub{font-size:12.5px;color:var(--tx2);margin-bottom:14px}
.sec{font-size:12.5px;color:var(--tx3);margin:8px 0 8px 4px;display:flex;justify-content:space-between}
.sec a{color:var(--acc);font-weight:600;cursor:pointer;font-size:12px}
.hero .l{font-size:12.5px;color:var(--tx2)}
.hero .v{font-size:52px;font-weight:800;letter-spacing:-.05em;line-height:1;margin:4px 0 8px;background:linear-gradient(90deg,var(--acc),var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .v small{font-size:14px;font-weight:600;letter-spacing:0;margin-left:6px;-webkit-text-fill-color:var(--tx2)}
.pill{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;background:var(--glass);border:1px solid var(--line);font-size:12px;font-weight:600;color:var(--tx)}
.pill:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 30%,transparent)}
.t{font-size:15px;font-weight:700;display:flex;justify-content:space-between;align-items:center;gap:8px;letter-spacing:-.01em}
.tag{font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;background:color-mix(in srgb,var(--acc) 18%,transparent);color:var(--acc);white-space:nowrap}
.tag.q{background:var(--line);color:var(--tx2)}
.m{font-size:12.5px;color:var(--tx2);margin-top:4px;line-height:1.5}
.btns{display:flex;gap:8px;margin-top:12px}
.btn{font:inherit;font-size:12.5px;font-weight:700;padding:11px 14px;border-radius:999px;border:1px solid var(--line);background:var(--glass);color:var(--tx);cursor:pointer;flex:1;transition:transform .12s;text-align:center}
.btn.p{background:linear-gradient(90deg,var(--acc),var(--acc2));color:var(--ink-on-acc);border:0}
.btn.w{width:100%;margin-top:10px}
.btn:active{transform:scale(.96)}
.done{display:flex;align-items:center;gap:10px;font-weight:700;font-size:14px;color:var(--acc)}
.nav{--verre-epaisseur:1.25;--alpha:.22;position:absolute;left:18px;right:18px;bottom:18px;height:64px;border-radius:999px;background:var(--verre-relief),var(--glass);border:1px solid var(--line);-webkit-backdrop-filter:var(--verre-flou);backdrop-filter:var(--verre-flou);display:flex;justify-content:space-around;align-items:center;z-index:5;box-shadow:var(--verre-ombre),var(--verre-arete)}
.nav span{color:var(--tx3);display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;cursor:pointer}
.nav span.on{color:var(--tx)}
.nav span.on:after{content:"";width:4px;height:4px;border-radius:50%;background:var(--acc)}
.nav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* listes, avatars, tuiles */
.list .it{display:flex;gap:12px;align-items:center;padding:11px 0;border-top:1px solid var(--line);cursor:pointer}
.list .it:first-child{border-top:0;padding-top:4px}
.list .it:last-child{padding-bottom:4px}
.list .b{flex:1;min-width:0}
.list .t{font-size:14px}
.list .s{font-size:12px;color:var(--tx2)}
.av{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;font-family:'Fraunces',serif;font-size:15px;color:#fff;background:linear-gradient(140deg,var(--acc),var(--acc2));border:1px solid rgba(255,255,255,.35)}
.av.n{background:linear-gradient(140deg,hsl(var(--h) 20% 55%),hsl(var(--h) 20% 32%))}
.av.big{width:84px;height:84px;font-size:34px;margin:0 auto 10px;box-shadow:0 0 0 6px var(--glass),0 20px 40px -14px rgba(0,0,0,.5)}
.duo{display:flex;flex:none}
.duo .av{width:32px;height:32px;font-size:12px}
.duo .av+.av{margin-left:-10px}
.nm{font-family:'Fraunces',serif;font-weight:400;font-size:26px;letter-spacing:-.01em;text-align:center;line-height:1.1}
.hd{font-size:12px;color:var(--tx2);text-align:center;margin-top:3px}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.tiles .g{margin:0;padding:12px 8px;text-align:center}
.tiles .v{font-size:20px;font-weight:800;letter-spacing:-.03em}
.tiles .l{font-size:10.5px;color:var(--tx2);margin-top:2px}
.kv{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-top:1px solid var(--line);font-size:13px}
.kv:first-child{border-top:0;padding-top:2px}
.kv:last-child{padding-bottom:2px}
.kv span{color:var(--tx2)}
.kv b{font-weight:700;display:flex;align-items:center;gap:6px}
.chips{display:flex;gap:7px;overflow:auto;padding:2px 0 10px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;font-size:12px;font-weight:600;padding:7px 12px;border-radius:999px;background:var(--glass);border:1px solid var(--line);color:var(--tx2);cursor:pointer}
.chip.on{color:var(--tx);border-color:var(--acc)}
.field{display:flex;align-items:center;gap:10px;background:var(--glass);border:1px solid var(--line);-webkit-backdrop-filter:var(--verre-flou);backdrop-filter:var(--verre-flou);border-radius:18px;padding:13px 16px;margin-bottom:12px;color:var(--tx3);font-size:14px}
.field svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8}
.field input{flex:1;background:transparent;border:0;outline:0;color:var(--tx);font:inherit;font-size:14px}
.note{font-size:12px;color:var(--tx3);line-height:1.5;margin:6px 4px 12px}
.sw-dot{width:12px;height:12px;border-radius:50%;background:linear-gradient(140deg,var(--acc),var(--acc2));display:inline-block}
.bar{height:8px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:10px}
.bar i{display:block;height:100%;width:52%;background:linear-gradient(90deg,var(--acc),var(--acc2))}

/* insignes en verre */
.ins{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;font-size:12px;font-weight:700;color:var(--tx);
  background:linear-gradient(135deg,rgba(255,255,255,.34),rgba(255,255,255,.08)),color-mix(in srgb,var(--acc) 22%,transparent);border:1px solid rgba(255,255,255,.45);-webkit-backdrop-filter:var(--verre-flou);backdrop-filter:var(--verre-flou);
  box-shadow:0 10px 24px -12px color-mix(in srgb,var(--acc) 60%,transparent),inset 0 1px 0 rgba(255,255,255,.7)}
.ph.day .ins{background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(255,255,255,.35)),color-mix(in srgb,var(--acc) 18%,transparent);border-color:rgba(255,255,255,.95)}
.ins:before{content:"";position:absolute;left:-30%;top:-80%;width:45%;height:260%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);transform:rotate(14deg);pointer-events:none}
.ins i{width:8px;height:8px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 30%,transparent)}
.ins.libre i{background:transparent;border:2px solid var(--acc);box-shadow:none;width:7px;height:7px}
.ins.discret{color:var(--tx2)}
.ins.discret i{background:var(--tx3);box-shadow:none}
.ins.big{padding:9px 16px;font-size:13px}
.ins.sm{padding:4px 9px;font-size:10.5px;gap:5px}
.ins.sm i{width:6px;height:6px}
.ctr{text-align:center}

/* sceau de cristal */
.cristal{width:118px;height:118px;border-radius:50%;position:relative;margin:0 auto;display:grid;place-items:center;
  background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.95) 0,rgba(255,255,255,.4) 20%,color-mix(in srgb,var(--acc) 45%,transparent) 44%,color-mix(in srgb,var(--acc2) 75%,transparent) 100%);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 28px 50px -18px color-mix(in srgb,var(--acc) 70%,transparent),0 0 0 12px color-mix(in srgb,var(--acc) 9%,transparent),inset 0 2px 6px rgba(255,255,255,.95),inset 0 -14px 26px color-mix(in srgb,var(--acc) 45%,transparent);
  animation:breathe 5s ease-in-out infinite}
.cristal:before{content:"";position:absolute;inset:8px;border-radius:50%;border:1px solid rgba(255,255,255,.5);
  background:conic-gradient(from 200deg,rgba(255,255,255,0) 0 30deg,rgba(255,255,255,.55) 55deg,rgba(255,255,255,0) 85deg,rgba(255,255,255,0) 190deg,rgba(255,255,255,.3) 215deg,rgba(255,255,255,0) 245deg)}
.cristal span{position:relative;font-family:'Fraunces',serif;font-style:italic;font-size:48px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.cristal.sm{width:58px;height:58px;margin:0;animation:none;box-shadow:0 14px 26px -12px color-mix(in srgb,var(--acc) 70%,transparent),inset 0 1px 4px rgba(255,255,255,.9)}
.cristal.sm span{font-size:24px}
.cristal.sm:before{inset:4px}
@keyframes breathe{50%{transform:scale(1.04)}}

/* certificat papier */
.papier{--acc:hsl(var(--h) 62% 46%);background:#FBF7F2;color:#211A1C;border-radius:12px;padding:24px 18px 20px;text-align:center;position:relative;box-shadow:0 24px 50px -20px rgba(0,0,0,.6);margin-bottom:12px}
.papier:before{content:"";position:absolute;inset:9px;border:1px solid color-mix(in srgb,var(--acc) 55%,#211A1C);border-radius:5px;pointer-events:none;opacity:.6}
.papier .ct{font-family:'Fraunces',serif;font-size:10px;letter-spacing:.22em;color:rgba(33,26,28,.55)}
.papier .noms{font-family:'Fraunces',serif;font-size:26px;line-height:1.2;margin:12px 0 4px}
.papier .amp{font-style:italic;color:var(--acc)}
.ph.day .papier .amp{color:hsl(var(--h) 62% 46%)}
.papier .d{font-size:11px;color:rgba(33,26,28,.62)}
.papier .code{font-family:'Fraunces',serif;font-size:11px;letter-spacing:.12em;color:rgba(33,26,28,.5);margin-top:12px}

/* photos */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:12px}
.grid.two{grid-template-columns:1fr 1fr}
.pho{aspect-ratio:1;border-radius:14px;position:relative;overflow:hidden;border:1px solid var(--line);
  background:linear-gradient(150deg,color-mix(in srgb,var(--acc) 70%,#fff 10%),color-mix(in srgb,var(--acc2) 60%,#000 35%))}
.pho.wide{aspect-ratio:16/10;grid-column:span 2}
.pho:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 20%,rgba(255,255,255,.35),transparent 55%),linear-gradient(to top,rgba(0,0,0,.45),transparent 60%)}
.pho span{position:absolute;left:9px;bottom:7px;z-index:1;font-size:10.5px;font-weight:600;color:#fff}
.pho.more{display:grid;place-items:center;background:var(--glass);font-weight:800;font-size:16px;color:var(--tx)}
.pho.more:after{display:none}
.strip{display:flex;gap:7px;overflow:auto;scrollbar-width:none;margin:10px 0 2px}
.strip::-webkit-scrollbar{display:none}
.strip .pho{flex:none;width:84px}

/* timeline */
.tl{position:relative;padding-left:18px}
.tl:before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;background:var(--line)}
.ev{position:relative;padding:0 0 14px}
.ev:before{content:"";position:absolute;left:-17px;top:5px;width:9px;height:9px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 25%,transparent)}
.ev .d{font-size:11px;color:var(--tx3)}
.ev .x{font-size:13.5px;font-weight:600;margin-top:1px}
.ev .y{font-size:12px;color:var(--tx2)}

/* options */
.opt{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;border-top:1px solid var(--line);cursor:pointer}
.opt:first-child{border-top:0}
.opt .b{flex:1}
.opt .t{font-size:14px}
.opt .s{font-size:12px;color:var(--tx2);margin-top:2px}
.opt .ck{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--tx3);flex:none}
.opt.on .ck{border-color:var(--acc);background:var(--acc);box-shadow:inset 0 0 0 4px var(--bg)}
.sw{width:42px;height:24px;border-radius:99px;background:var(--line);position:relative;flex:none;cursor:pointer;transition:background .2s}
.sw:after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:left .2s}
.sw.on{background:var(--acc)}
.sw.on:after{left:21px}
.chev{color:var(--tx3);font-size:18px}

/* sheet apparence — identique à Avrel */
.dim{position:absolute;inset:0;background:rgba(0,0,0,.35);z-index:30;opacity:0;pointer-events:none;transition:opacity .3s}
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:31;background:var(--verre-relief),var(--glass);border:1px solid var(--line);-webkit-backdrop-filter:var(--verre-flou);backdrop-filter:var(--verre-flou);border-radius:30px 30px 0 0;padding:12px 20px 26px;transform:translateY(105%);transition:transform .45s cubic-bezier(.2,.8,.2,1);max-height:88%;overflow:auto;scrollbar-width:none;box-shadow:var(--verre-ombre),var(--verre-arete)}
.ph:not(.day) .sheet{background:color-mix(in srgb,var(--bg) 70%,transparent)}
.ph.day .sheet{background:rgba(255,255,255,.72)}
.sheet::-webkit-scrollbar{display:none}
.ph.open .dim{opacity:1;pointer-events:auto}
.ph.open .sheet{transform:none}
.grab{width:40px;height:5px;border-radius:99px;background:var(--tx3);opacity:.5;margin:0 auto 14px}
.sheet h3{font-size:18px;font-weight:800;letter-spacing:-.02em}
.sheet .sub{font-size:12.5px;color:var(--tx2);margin:2px 0 14px}
.f{margin-bottom:16px}
.f label{display:flex;justify-content:space-between;font-size:12.5px;font-weight:600;color:var(--tx2);margin-bottom:8px}
.f label b{color:var(--tx);font-weight:700}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:14px;border-radius:99px;background:var(--line);outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;border:3px solid var(--acc);box-shadow:0 2px 8px rgba(0,0,0,.3);cursor:pointer}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--acc);cursor:pointer}
#hue{background:linear-gradient(90deg,hsl(0 80% 60%),hsl(60 80% 60%),hsl(120 80% 55%),hsl(180 80% 55%),hsl(240 80% 65%),hsl(300 80% 65%),hsl(360 80% 60%))}
.seg{display:flex;background:var(--line);border-radius:999px;padding:3px}
.seg span{flex:1;text-align:center;font-size:12.5px;font-weight:700;padding:8px 0;border-radius:999px;cursor:pointer;color:var(--tx2)}
.seg span.on{background:var(--glass);color:var(--tx);box-shadow:0 2px 8px rgba(0,0,0,.15)}
.ph.day .seg span.on{background:#fff}
.swp{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.swp div{border-radius:16px;padding:8px;cursor:pointer;border:2px solid transparent;text-align:center}
.swp div.on{border-color:var(--acc)}
.swp i{display:block;height:44px;border-radius:12px;margin-bottom:6px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
.swp b{font-size:11px;font-weight:700;color:var(--tx)}
.swp small{display:block;font-size:10px;color:var(--tx3)}
.sheet .btn.p{width:100%;margin-top:6px}
.confirm input{width:100%;font:inherit;font-size:16px;letter-spacing:.2em;text-align:center;padding:12px;border-radius:14px;border:1px solid var(--line);background:var(--glass);color:var(--tx);outline:0;margin-top:10px;text-transform:uppercase}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}

/* ======== ajouts appli réelle ======== */
html,body{height:100%}
body{background:#111214;color:#D8DBE0;font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overscroll-behavior:none}
@media (min-width:600px){body{display:flex;justify-content:center}.ph{border-left:1px solid #222;border-right:1px solid #222}}
.st{height:max(54px,calc(env(safe-area-inset-top) + 34px));padding-top:env(safe-area-inset-top)}
.nav{bottom:calc(18px + env(safe-area-inset-bottom))}
.sc{padding-bottom:calc(120px + env(safe-area-inset-bottom))}
.sc.noNav{padding-bottom:40px}
.hidden{display:none!important}
.toast{--verre-epaisseur:.7;position:absolute;left:50%;transform:translateX(-50%) translateY(-20px);top:calc(env(safe-area-inset-top) + 64px);z-index:60;background:var(--verre-relief),var(--glass);border:1px solid var(--line);-webkit-backdrop-filter:var(--verre-flou);backdrop-filter:var(--verre-flou);border-radius:999px;padding:11px 18px;font-size:13px;font-weight:600;color:var(--tx);opacity:0;transition:.3s;pointer-events:none;max-width:88%;text-align:center;box-shadow:var(--verre-ombre),var(--verre-arete)}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{border-color:var(--acc)}
textarea.in,input.in,select.in{width:100%;font:inherit;font-size:14px;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--glass);color:var(--tx);outline:0;margin-top:8px;color-scheme:dark}
.ph.day textarea.in,.ph.day input.in,.ph.day select.in{color-scheme:light}
textarea.in{min-height:90px;resize:vertical;line-height:1.5}
.lab{font-size:12px;color:var(--tx2);font-weight:600;margin-top:10px;display:block}
.auth{padding-top:26px}
.auth .logo{margin:0 auto 14px}
.auth h2{text-align:center}
.link{color:var(--acc);font-weight:600;cursor:pointer}
.err{font-size:12.5px;color:var(--acc);margin-top:8px;font-weight:600}
.pho img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pho.txt{display:grid;place-items:center;padding:10px;text-align:center;font-family:'Fraunces',serif;font-size:13px;color:#fff;line-height:1.3}
.pho.txt:after{opacity:.6}
.pho .k{position:absolute;top:7px;right:8px;z-index:1;font-size:9.5px;font-weight:700;padding:3px 7px;border-radius:99px;background:rgba(0,0,0,.4);color:#fff}
.ev.pend:before{background:transparent;border:2px solid var(--acc)}
.ev .acts{display:flex;gap:6px;margin-top:6px}
.ev .acts button{font:inherit;font-size:11.5px;font-weight:700;padding:6px 10px;border-radius:99px;border:1px solid var(--line);background:var(--glass);color:var(--tx);cursor:pointer}
.ev .acts button.p{background:linear-gradient(90deg,var(--acc),var(--acc2));color:var(--ink-on-acc);border:0}
.badge{min-width:18px;height:18px;border-radius:99px;background:var(--acc);color:var(--ink-on-acc);font-size:10.5px;font-weight:800;display:inline-grid;place-items:center;padding:0 5px;margin-left:6px}
.nav span{position:relative}
.nav .dot{position:absolute;top:-2px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--acc)}
.big-photo{width:100%;border-radius:18px;display:block;margin-bottom:12px;border:1px solid var(--line);aspect-ratio:1/1;object-fit:cover;background:var(--glass)}
.vid.big-photo,video.big-photo{aspect-ratio:auto;max-height:70vh;object-fit:contain;background:#000}
.letter{font-family:'Fraunces',serif;font-size:15px;line-height:1.6;white-space:pre-wrap;color:var(--tx)}
.empty{text-align:center;padding:22px 10px;color:var(--tx3);font-size:13px;line-height:1.5}
.spin{width:22px;height:22px;border:2px solid var(--line);border-top-color:var(--acc);border-radius:50%;animation:turn 1s linear infinite;margin:40px auto}
.notif{display:flex;gap:10px;padding:10px 0;border-top:1px solid var(--line);font-size:13px}
.notif:first-child{border-top:0}
.notif .d{font-size:11px;color:var(--tx3);margin-top:2px}
.notif.unread .b{color:var(--tx);font-weight:600}
.notif .b{flex:1;color:var(--tx2);line-height:1.4}
.papier canvas{width:100%;border-radius:8px}
.chips .chip.on{color:var(--tx);border-color:var(--acc)}
.sheet.small{max-height:70%}
.ok{color:var(--acc);font-weight:700}
.inline-form{margin-top:10px}

/* carnet à deux */
.msgs{display:flex;flex-direction:column;gap:6px;padding:4px 0 10px}
.msg{max-width:80%;padding:10px 13px;border-radius:18px;background:var(--glass);border:1px solid var(--line);-webkit-backdrop-filter:var(--verre-flou);backdrop-filter:var(--verre-flou);font-size:14px;line-height:1.45;align-self:flex-start;border-bottom-left-radius:6px;white-space:normal;word-break:break-word}
.msg .mtx{white-space:pre-wrap}
.msg.me{align-self:flex-end;background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 55%,var(--glass)),color-mix(in srgb,var(--acc2) 45%,var(--glass)));border-bottom-left-radius:18px;border-bottom-right-radius:6px}
.msg img{display:block;max-width:100%;border-radius:12px;margin-bottom:6px}
.msg .d{font-size:10.5px;color:var(--tx3);margin-top:3px;text-align:right}
.msg.me .d{color:color-mix(in srgb,var(--tx) 70%,transparent)}
.day-sep{text-align:center;font-size:11px;color:var(--tx3);margin:10px 0 6px}
.composer{position:absolute;left:18px;right:18px;bottom:calc(92px + env(safe-area-inset-bottom));display:flex;gap:8px;align-items:flex-end;z-index:6}
.sugbar{position:absolute;left:-18px;right:-18px;bottom:calc(100% + 8px);display:flex;gap:6px;overflow-x:auto;padding:4px 18px;scrollbar-width:none;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .2s,transform .22s}
.sugbar::-webkit-scrollbar{display:none}.sugbar.on{opacity:1;transform:none;pointer-events:auto}
.sugbar img{flex:none;height:64px;width:auto;max-width:96px;object-fit:contain;cursor:pointer;filter:drop-shadow(0 3px 6px rgba(20,10,40,.18));transition:transform .15s}.sugbar img:active{transform:scale(.88)}.sugbar img.perso{height:70px;max-width:70px}
.composer textarea{flex:1;min-height:46px;max-height:120px;margin:0;border-radius:23px;padding:13px 16px;resize:none}
.composer .rb{width:46px;height:46px}
.sc.carnet{padding-bottom:calc(190px + env(safe-area-inset-bottom))}

/* fil & défis */
.post{padding:0;overflow:hidden}
.post .ph-h{display:flex;align-items:center;gap:10px;padding:12px 14px 0}
.post .ph-h .b{flex:1;min-width:0}
.post .ph-h .t{font-size:14px;font-weight:600;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.post .ph-h .s{font-size:11.5px;color:var(--tx3)}
.post .body{padding:8px 14px 0;font-size:14px;line-height:1.5;color:var(--tx2)}
.post .body b{color:var(--tx)}
.post img.m{width:100%;display:block;margin-top:10px;aspect-ratio:1/1;object-fit:cover;background:var(--glass)}
.post .foot{display:flex;align-items:center;gap:8px;padding:10px 14px 12px}
.post .light{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;padding:7px 12px;border-radius:99px;border:1px solid var(--line);background:var(--glass);color:var(--tx2);cursor:pointer;transition:.2s}
.post .light.on{color:var(--ink-on-acc);background:linear-gradient(90deg,var(--acc),var(--acc2));border-color:transparent}
.post .light svg{width:14px;height:14px;fill:currentColor}
.post .foot .sp{flex:1}
.post .foot .del{font-size:11.5px;color:var(--tx3);cursor:pointer}
.post .kind{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--acc);padding:2px 0}
.defi-hero{position:relative;overflow:hidden}
.defi-hero .wk{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx3);font-weight:700}
.defi-hero .tt{font-family:'Fraunces',serif;font-size:26px;line-height:1.1;margin:6px 0 6px;color:var(--tx)}
.defi-hero .m{margin:0}
.streak{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--acc)}
.streak svg{width:14px;height:14px;fill:currentColor}

/* visite guidée */
.tour{position:absolute;inset:0;z-index:70;display:flex;flex-direction:column;background:var(--bg);overflow:hidden}
.tour .light{position:absolute;inset:0}
.tour .body{flex:1;display:flex;flex-direction:column;justify-content:center;padding:28px 26px;position:relative;z-index:2;overflow-y:auto}
.tour .num{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--tx3);font-weight:700;margin-bottom:14px}
.tour h3{font-family:'Fraunces',serif;font-weight:300;font-size:32px;line-height:1.12;margin:0 0 14px;color:var(--tx)}
.tour h3 em{font-style:italic;color:var(--acc)}
.tour p{font-size:15px;line-height:1.6;color:var(--tx2);margin:0 0 12px}
.tour .ill{height:132px;display:grid;place-items:center;margin-bottom:22px}
.tour .foot{padding:0 26px calc(30px + env(safe-area-inset-bottom));position:relative;z-index:2}
.tour .dots{display:flex;gap:6px;justify-content:center;margin-bottom:16px}
.tour .dots i{width:6px;height:6px;border-radius:99px;background:var(--line);transition:.3s}
.tour .dots i.on{background:var(--acc);width:20px}
.tour .skip{text-align:center;margin-top:12px;font-size:13px;color:var(--tx3);cursor:pointer}
.tour .duo-ill{display:flex;align-items:center;gap:-10px}
.tour .ill .av{width:60px;height:60px;font-size:24px;margin:0}
.tour .ill .pair b{width:60px;height:60px;font-size:24px}
.tour .ill .cristal{width:96px;height:96px}
.tour .ill .cristal span{font-size:44px}
.tour .badge-ill{display:flex;flex-direction:column;gap:10px;align-items:center}

/* v0.9 — liens, défis, médailles */
.med{filter:drop-shadow(0 5px 12px rgba(0,0,0,.5));display:block}
.med.shine{animation:medp 4.5s ease-in-out infinite}
@keyframes medp{0%,100%{filter:drop-shadow(0 5px 12px rgba(0,0,0,.5))}50%{filter:drop-shadow(0 5px 18px rgba(255,255,255,.3))}}
.med.off{opacity:.42}
.sash{display:flex;gap:6px;flex-wrap:wrap;align-items:flex-start}
.sash .sl{width:66px;text-align:center}
.sash .sl b{display:block;font-size:9.5px;color:var(--tx3);font-weight:700;line-height:1.2;margin-top:2px}
.palier{text-align:center;padding:6px 0 2px}
.palier .pn{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--tx3);font-weight:700}
.palier .pv{font-family:'Fraunces',serif;font-size:30px;line-height:1.1;margin:4px 0}
.kindtag{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:99px;border:1px solid var(--line);color:var(--tx2)}
.kindtag.couple{color:var(--acc);border-color:color-mix(in srgb,var(--acc) 45%,transparent)}
.defi{padding:0;overflow:hidden}
.defi .band2{padding:14px 16px 4px}
.defi .kd{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--acc)}
.defi .ti{font-family:'Fraunces',serif;font-weight:300;font-size:22px;line-height:1.16;margin:6px 0 6px}
.defi .bd{font-size:13.5px;color:var(--tx2);line-height:1.5}
.defi .tg{display:flex;gap:8px;flex-wrap:wrap;padding:10px 16px 14px;align-items:center}
.qcard{border:1px solid var(--line);border-radius:18px;padding:14px 16px;margin-bottom:10px;background:var(--glass)}
.qcard .qn{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--acc)}
.qcard .qq{font-family:'Fraunces',serif;font-size:19px;line-height:1.25;margin:6px 0 10px}
.ansl{border-left:2px solid var(--acc);padding:6px 0 6px 12px;margin-bottom:8px}
.ansl .w2{font-size:11.5px;color:var(--tx3);font-weight:700}
.ansl .a2{font-family:'Fraunces',serif;font-size:15.5px;line-height:1.35}
.opt.pick{cursor:pointer}
.opt.pick.on{border-color:var(--acc)}
.ba{display:flex;gap:8px}
.ba > div{flex:1;border-radius:14px;overflow:hidden;border:1px solid var(--line);position:relative;height:150px;background:var(--glass);display:grid;place-items:center;color:var(--tx3);font-size:12px}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba b{position:absolute;left:8px;bottom:8px;font-size:10.5px;font-weight:800;background:rgba(0,0,0,.5);color:#fff;padding:3px 8px;border-radius:99px;z-index:1}
.rk{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--line)}
.rk:first-child{border-top:0}
.rk .p2{width:22px;text-align:center;font-size:13px;font-weight:800;color:var(--tx3)}
.rk .p2.g{color:var(--acc)}
.rk .b3{flex:1;min-width:0}
.rk .pts2{font-size:13px;font-weight:800;color:var(--acc)}
.rk.me2{background:color-mix(in srgb,var(--acc) 10%,transparent);border-radius:12px;padding:9px 10px;border-top:0}

/* v1.0 */
.eye{position:absolute;right:14px;top:50%;transform:translateY(-25%);font-size:11.5px;color:var(--tx3);cursor:pointer;font-weight:600}
.step{display:flex;gap:6px;margin-bottom:16px}
.step i{height:4px;flex:1;border-radius:99px;background:var(--line)}
.step i.on{background:var(--acc)}
.rx2{gap:6px;flex-wrap:wrap}
.reac{display:inline-flex;align-items:center;gap:5px;font-size:15px;padding:6px 11px;border-radius:99px;border:1px solid var(--line);background:var(--glass);cursor:pointer;transition:.2s;line-height:1}
.reac b{font-size:12px;font-weight:800;color:var(--tx2);min-width:6px}
.reac.on{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 18%,transparent)}
.reac.on b{color:var(--acc)}
.idcard{height:110px;border-radius:14px;border:1px dashed var(--line);display:grid;place-items:center;font-size:13px;color:var(--tx3);background:var(--glass);margin-top:10px;cursor:pointer}
.rb.sm2{width:36px;height:36px;font-size:16px;position:relative;flex:none}
.rb.sm2 .pip{position:absolute;top:-3px;right:-3px;min-width:17px;height:17px;border-radius:99px;background:var(--acc);color:var(--ink-on-acc);font-size:10px;font-weight:800;display:grid;place-items:center;font-style:normal;padding:0 4px}
.list .it{gap:10px}
.regsw{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0 4px}
.regsw div{cursor:pointer;text-align:center;border:1.5px solid transparent;border-radius:14px;padding:8px 4px}
.regsw div.on{border-color:var(--acc);background:var(--glass)}
.regsw i{display:block;height:46px;border-radius:12px;border:1px solid var(--line);margin-bottom:5px}
.regsw b{display:block;font-size:11.5px;font-weight:700}
.regsw small{display:block;font-size:9.5px;color:var(--tx3)}

/* visite guidée v2 */
.tour{--h:255}
.tour.out{opacity:0;transition:.25s}
.tour .body{animation:tin .38s cubic-bezier(.2,.8,.2,1)}
.tour .body.inl{animation:tinl .38s cubic-bezier(.2,.8,.2,1)}
@keyframes tin{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes tinl{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
.tour .ill{height:190px;display:grid;place-items:center;margin-bottom:20px}
.tour .dots i{cursor:pointer}
.tv{position:relative;width:100%;height:100%;display:grid;place-items:center}
.tv .cristal{width:110px;height:110px}
.tv .cristal span{font-size:48px}
.pair.big2{width:132px;height:132px}
.pair.big2 b{width:58px;height:58px;font-size:26px;top:26px}
.pair.big2 b:first-of-type{left:16px}
.pair.big2 b:last-of-type{left:58px}
.tcards{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:300px}
.tc{font-size:12.5px;font-weight:700;padding:9px 14px;border-radius:99px;border:1px solid var(--line);background:var(--glass);-webkit-backdrop-filter:var(--verre-flou);backdrop-filter:var(--verre-flou)}
.tc.c1{background:linear-gradient(90deg,var(--acc),var(--acc2));color:var(--ink-on-acc);border:0}
.tc.c2{border-color:color-mix(in srgb,var(--acc) 55%,transparent)}
.tbadges{display:flex;flex-direction:column;gap:12px;align-items:center}
.tgrid{display:grid;grid-template-columns:repeat(2,84px);gap:10px}
.tgrid i{display:block;height:84px;border-radius:16px;border:1px solid var(--line)}
.tgrid .p1{background:linear-gradient(140deg,var(--l1),var(--l2))}
.tgrid .p2{background:linear-gradient(140deg,var(--l2),var(--l3))}
.tgrid .p3{background:linear-gradient(140deg,var(--l3),var(--l1))}
.tgrid .p4{background:var(--glass);display:grid;place-items:center}
.tgrid .p4:after{content:"+12";font-size:15px;font-weight:700;color:var(--tx2)}
.tpromesse{text-align:center}
.tpromesse .tp{font-family:'Fraunces',serif;font-size:23px;line-height:1.25;margin-bottom:12px;padding:16px 18px;border-radius:20px;background:var(--glass);border:1px solid var(--line);-webkit-backdrop-filter:var(--verre-flou);backdrop-filter:var(--verre-flou)}
.tdefi{display:flex;flex-direction:column;gap:9px;width:290px}
.tdefi div{padding:12px 15px;border-radius:16px;border:1px solid var(--line);background:var(--glass);font-size:13.5px;font-weight:600;-webkit-backdrop-filter:var(--verre-flou);backdrop-filter:var(--verre-flou)}
.tdefi .td1{border-color:color-mix(in srgb,var(--acc) 55%,transparent)}
.tdefi .td2{margin-left:24px}
.tdefi .td3{margin-left:48px;opacity:.75}
.tmed{display:flex;align-items:flex-end;gap:2px}
.tmed svg:nth-child(2){margin:0 -8px 10px}
.tfin{display:grid;place-items:center}
.mom{cursor:pointer}
.mom .kd{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--acc)}
.mom .q2{font-family:'Fraunces',serif;font-weight:300;font-size:21px;line-height:1.2;margin:6px 0 6px}
.mom.live{border-color:var(--acc);box-shadow:0 0 0 1px color-mix(in srgb,var(--acc) 40%,transparent),0 18px 40px -18px color-mix(in srgb,var(--acc) 60%,transparent)}
.mom.wait .t{color:var(--tx2)}
.tmoment{text-align:center}
.tmoment .tq{font-family:'Fraunces',serif;font-size:23px;line-height:1.25;margin-bottom:12px;padding:16px 18px;border-radius:20px;background:var(--glass);border:1px solid var(--acc);-webkit-backdrop-filter:var(--verre-flou);backdrop-filter:var(--verre-flou)}
.kz{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:99px;background:var(--glass);border:1px solid var(--line);color:var(--tx2);vertical-align:2px}
.stepn{width:26px;height:26px;border-radius:99px;background:var(--acc);color:var(--ink-on-acc);font-size:13px;font-weight:800;display:grid;place-items:center;flex:none}
.nav .pip2{position:absolute;top:-4px;right:2px;min-width:16px;height:16px;border-radius:99px;background:var(--acc);color:var(--ink-on-acc);font-size:10px;font-weight:800;display:grid;place-items:center;padding:0 4px;font-style:normal}
.expiree{padding:26px 14px;text-align:center;font-size:12.5px;color:var(--tx3);background:var(--glass);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.adminbar{display:flex;align-items:center;gap:12px;cursor:pointer;border-color:color-mix(in srgb,var(--acc) 45%,transparent)}
.adminbar .t{font-size:14.5px}
.pip3{min-width:24px;height:24px;border-radius:99px;background:var(--acc);color:var(--ink-on-acc);font-size:12px;font-weight:800;display:grid;place-items:center;padding:0 7px}
.ai{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:99px;border:1px solid var(--line);color:var(--tx3);font-size:10px;font-weight:800;font-style:normal;margin-left:7px;cursor:pointer;vertical-align:1px;background:var(--glass)}
.ai:active{color:var(--acc);border-color:var(--acc)}
.lex .t{font-size:15px}
.lex .m{margin-top:4px}
/* v1.8 */
.vchk{position:absolute;right:-2px;bottom:-2px;width:22px;height:22px;border-radius:99px;background:#2B7FFF;border:3px solid var(--bg);display:grid;place-items:center}
.vchk:after{content:"";width:9px;height:5px;border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
.av{position:relative}
.opt.off2{opacity:.4}
.msg.del{opacity:.6}
.papier .histo{font-size:9.5px;line-height:1.5;color:rgba(33,26,28,.55);margin:14px 22px 0;border-top:1px solid rgba(33,26,28,.14);padding-top:10px;text-align:left}
.sc.slideL{animation:sl .3s ease}.sc.slideR{animation:sr .3s ease}
@keyframes sl{from{transform:translateX(24px);opacity:.5}to{transform:none;opacity:1}}
@keyframes sr{from{transform:translateX(-24px);opacity:.5}to{transform:none;opacity:1}}
/* panneau couleur : une palette, pas des réglages */
#sheetApp h3{font-family:'Fraunces',serif;font-weight:300;font-size:26px}
#sheetApp .sub{margin-bottom:6px}

/* audio */
.recbar{margin-top:10px}
.recbtn{width:100%;display:flex;align-items:center;justify-content:center;gap:9px}
.recbtn.on{border-color:var(--acc);color:var(--acc)}
.recbtn .mic{width:11px;height:16px;border-radius:99px 99px 5px 5px;background:currentColor;display:inline-block;position:relative;flex:none}
.recbtn .mic:after{content:"";position:absolute;left:-4px;bottom:-5px;width:19px;height:9px;border:2px solid currentColor;border-top:0;border-radius:0 0 12px 12px}
.recbtn.on .mic{animation:pulseM 1s infinite}
@keyframes pulseM{0%,100%{opacity:1}50%{opacity:.35}}
.recprev{margin-top:8px;display:flex;align-items:center;gap:10px}
audio{width:100%;height:36px}
.aud{margin-top:8px}
.msg audio{width:210px;height:34px}

/* pluie de réactions */
.pluie{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:200}
.pluie i{position:absolute;bottom:-40px;font-style:normal;animation:monte linear forwards;opacity:.95}
@keyframes monte{0%{transform:translateY(0) scale(.6);opacity:0}12%{opacity:1}100%{transform:translateY(-115vh) scale(1.25) rotate(14deg);opacity:0}}

/* révélation d'une médaille */
.reveal{position:absolute;inset:0;z-index:90;background:rgba(6,10,20,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);display:grid;place-items:center;animation:fadeIn .3s}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.reveal.suite{animation:none}.reveal.suite .rv-in{animation:fadeIn .35s}
.reveal.part .rv-in{opacity:0;transition:opacity .2s}.reveal.ferme{opacity:0;transition:opacity .25s}
.rv-in{text-align:center;padding:24px;width:100%}
.rv-kick{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#fff;opacity:.7;font-weight:800;margin-bottom:18px}
.rv-med{position:relative;display:inline-grid;place-items:center;transition:transform .5s}
.rv-med.won{animation:pop .6s cubic-bezier(.2,1.6,.3,1)}
@keyframes pop{0%{transform:scale(.8)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
.rv-med{perspective:900px}
/* un GLACON TAILLE : facettes irregulieres, pas un rond ni un carre. Il tourne lentement. */
.rv-bloc{position:absolute;inset:-22px;cursor:pointer;transform-style:preserve-3d;
  animation:glaconTourne 7s ease-in-out infinite;
  clip-path:polygon(50% 0%,74% 9%,91% 30%,100% 56%,88% 82%,62% 100%,34% 96%,12% 78%,2% 50%,9% 22%,28% 6%);
  background:linear-gradient(136deg,#f6fbff 0%,#d3e8f8 26%,#a8cfea 48%,#e6f3ff 62%,#bcd9ee 84%,#8fbcdd 100%);
  box-shadow:inset 0 0 70px #ffffffee, inset 0 -24px 50px rgba(90,140,185,.5), 0 22px 46px -16px rgba(10,30,60,.65);
  display:grid;place-items:end center;padding-bottom:26px}
/* les facettes : des plans clairs et sombres qui accrochent la lumiere */
.rv-bloc:before{content:'';position:absolute;inset:0;
  background:
    linear-gradient(118deg,rgba(255,255,255,.85) 0 18%,transparent 18.4% 33%,rgba(255,255,255,.55) 33.4% 41%,transparent 41.4%),
    linear-gradient(-54deg,rgba(150,195,230,.55) 0 22%,transparent 22.4% 46%,rgba(120,175,215,.45) 46.4% 58%,transparent 58.4%),
    linear-gradient(28deg,rgba(255,255,255,.4) 0 12%,transparent 12.4% 70%,rgba(255,255,255,.3) 70.4%)}
/* le reflet qui balaie la surface pendant la rotation */
.rv-bloc .lueur{position:absolute;inset:-30%;pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.75) 50%,transparent 60%);
  animation:lueurGlacon 3.4s ease-in-out infinite}
@keyframes lueurGlacon{0%,100%{transform:translateX(-35%)}50%{transform:translateX(35%)}}
@keyframes glaconTourne{0%,100%{transform:rotateY(-16deg) rotateX(4deg)}50%{transform:rotateY(16deg) rotateX(-3deg)}}
.rv-bloc.f1{animation-duration:4s}.rv-bloc.f2{animation-duration:2.4s}
.rv-bloc.parti{animation:blocEclate .5s forwards}
@keyframes blocEclate{55%{opacity:.6;transform:scale(1.08) rotateY(8deg)}100%{opacity:0;transform:scale(1.35) rotateY(20deg);filter:blur(7px)}}
.rv-bloc span{position:relative;z-index:2;font-size:11.5px;color:#2a4d6e;font-weight:800;letter-spacing:.06em;text-shadow:0 1px 0 rgba(255,255,255,.9)}
.rv-bloc.hit{animation:shake .18s}
@keyframes shake{0%,100%{transform:none}25%{transform:translateX(-5px) rotate(-1.5deg)}75%{transform:translateX(5px) rotate(1.5deg)}}
.shard{position:absolute;top:30%;width:12px;height:16px;background:linear-gradient(140deg,#fff,rgba(190,225,255,.6));clip-path:polygon(50% 0,100% 40%,70% 100%,20% 80%,0 30%);animation:tombe ease-in forwards;opacity:.95}
@keyframes tombe{to{transform:translate(var(--dx),240px) rotate(300deg);opacity:0}}
.rv-txt{margin-top:22px;opacity:0;transform:translateY(10px);transition:.5s}
.rv-txt.on{opacity:1;transform:none}
.rv-nom{font-family:'Fraunces',serif;font-size:30px;color:#fff}
.rv-mat{font-size:13px;color:#fff;opacity:.75;letter-spacing:.16em;text-transform:uppercase;font-weight:700;margin-top:4px}
.reveal .btn{margin-top:26px;max-width:260px;margin-left:auto;margin-right:auto}
#micBtn.rec{background:var(--acc);color:var(--ink-on-acc);animation:pulseM .9s infinite}
/* visionneuse */
.viewer{position:absolute;inset:0;z-index:95;background:rgba(4,8,16,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;flex-direction:column;align-items:center;justify-content:center;animation:fadeIn .2s}
.viewer img{max-width:100%;max-height:74%;object-fit:contain;border-radius:12px}
.viewer .vtop{position:absolute;top:calc(env(safe-area-inset-top) + 14px);right:16px}
.viewer .vtop .rb{background:rgba(255,255,255,.14);color:#fff;border:0}
.viewer .vleg{color:#fff;opacity:.8;font-size:13px;margin-top:12px;padding:0 24px;text-align:center}
.viewer .vbar{position:absolute;left:18px;right:18px;bottom:calc(env(safe-area-inset-bottom) + 24px);display:flex;gap:10px}
.viewer .vbar .btn{flex:1}
/* carnet enrichi */
.msgw{display:flex;flex-direction:column;align-items:flex-start;margin-bottom:8px}
.msgw.me{align-items:flex-end}
.msgw .msg{margin-bottom:0}
.quote{border-left:2px solid var(--acc);padding:3px 0 3px 8px;margin-bottom:6px;font-size:11.5px;color:var(--tx3);line-height:1.35}
.quote b{color:var(--tx2)}
.mrxs{margin-top:-6px;padding:0 6px;display:flex;gap:3px;z-index:2}
.mrx{font-size:12px;background:var(--glass);border:1px solid var(--line);border-radius:99px;padding:2px 7px;-webkit-backdrop-filter:var(--verre-flou);backdrop-filter:var(--verre-flou)}
.mrx b{font-size:10px;margin-left:3px;color:var(--tx2)}
.rxrow{display:flex;gap:8px;justify-content:center;margin:14px 0 4px}
.rxb{font-size:26px;cursor:pointer;padding:6px 8px;border-radius:14px;transition:.15s}
.rxb:active{background:var(--glass);transform:scale(1.2)}
.replybar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 14px;margin:0 14px;background:var(--glass);border:1px solid var(--line);border-radius:14px 14px 0 0;font-size:12px;color:var(--tx2)}
.replybar span{cursor:pointer;color:var(--tx3);font-size:16px}
/* pastille et médaille de compte */
.vchk.sm{width:15px;height:15px;border-width:2px;right:-1px;bottom:-1px}
.vchk.sm:after{width:6px;height:3px;border-width:2px}
.vchk.inline{position:static;display:inline-grid;width:14px;height:14px;border:0;margin-left:5px;vertical-align:-2px}
.vchk.inline:after{width:6px;height:3px;border-width:2px}
.avwrap{position:relative;display:inline-block;cursor:pointer}
.nivbadge{position:absolute;right:-16px;bottom:-10px}
.mcpt{position:relative;display:inline-block}
.mcpt b{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);font-family:'Fraunces',serif;font-size:calc(0.9em + 2px);color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.55);font-weight:400}
.kv.now{color:var(--acc)}
.kv.now b{color:var(--acc)}
.vid{width:100%;border-radius:14px;display:block;background:#000}
.msg video{width:220px;border-radius:12px}
.tmsg{border-left:2px solid var(--line);padding:8px 0 8px 12px;margin-bottom:12px}
.tmsg.eq{border-color:var(--acc)}
.tmsg .w2{font-size:11.5px;color:var(--tx3);font-weight:700;margin-bottom:3px}
.tmsg.eq .w2{color:var(--acc)}
.tmsg .a2{font-size:14px;line-height:1.5}
.avimg{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.av{overflow:hidden}
.av.big{overflow:visible}
.av.big .avimg{border-radius:50%}
.nivline{display:inline-flex;align-items:center;gap:8px;margin-top:8px;padding:5px 12px 5px 6px;border-radius:99px;border:1px solid var(--line);background:var(--glass);-webkit-backdrop-filter:var(--verre-flou);backdrop-filter:var(--verre-flou);cursor:pointer}
.nivline span{font-size:12.5px;font-weight:700;color:var(--tx2)}
.nivline .mcpt b{font-size:11px}
.sash .sl.ici b{color:var(--acc)}
.sash .sl.ici{border-radius:14px;background:color-mix(in srgb,var(--acc) 12%,transparent)}
.vidwrap{position:relative}
.vidsave{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:99px;background:rgba(0,0,0,.55);color:#fff;display:grid;place-items:center;font-size:15px;cursor:pointer;z-index:2}
.capicon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:17px;background:var(--glass);border:1px solid var(--line);color:var(--acc);flex:none}
.capicon.ouv{background:linear-gradient(140deg,var(--acc),var(--acc2));color:var(--ink-on-acc);border:0}
.msg.flash{animation:fl 1.3s}
@keyframes fl{0%,100%{box-shadow:none}25%,60%{box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 55%,transparent)}}
.quote{cursor:pointer}
.qrow{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.qrow:first-child{border-top:0;padding-top:0}
.qn2{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--tx3);margin-bottom:5px}
.sash .sl.mystere{filter:grayscale(1) brightness(.55) blur(1.5px);opacity:.5}
.sash .sl.mystere b{filter:none}
.offbar{position:absolute;left:0;right:0;bottom:calc(var(--tab-h) + env(safe-area-inset-bottom) + 8px);margin:0 14px;z-index:70;background:#3b2c12;color:#ffd9a0;border:1px solid #6b5220;border-radius:99px;padding:8px 14px;font-size:12.5px;text-align:center;font-weight:600}
/* figures de vagues */
.pluie i{position:absolute;font-style:normal;animation-timing-function:ease-out;animation-fill-mode:forwards;opacity:0}
.pluie i.f-monte{bottom:-40px;animation-name:monte}
.pluie i.f-descend{top:-40px;animation-name:descend}
.pluie i.f-droite{left:-40px;animation-name:droite}
.pluie i.f-gauche{right:-40px;animation-name:gauche}
.pluie i.f-spirale{animation-name:spir}
.pluie i.f-eclat{animation-name:eclat}
@keyframes descend{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:1}100%{transform:translateY(105vh) scale(1.1) rotate(-12deg);opacity:0}}
@keyframes droite{0%{transform:translateX(0) scale(.6);opacity:0}15%{opacity:1}100%{transform:translateX(110vw) translateY(-30px) scale(1.1) rotate(15deg);opacity:0}}
@keyframes gauche{0%{transform:translateX(0) scale(.6);opacity:0}15%{opacity:1}100%{transform:translateX(-110vw) translateY(30px) scale(1.1) rotate(-15deg);opacity:0}}
@keyframes spir{0%{transform:scale(.2) rotate(0);opacity:0}30%{opacity:1}100%{transform:scale(1.6) rotate(160deg) translateY(-40px);opacity:0}}
@keyframes eclat{0%{transform:translate(0,0) scale(.3);opacity:0}20%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(1.2) rotate(40deg);opacity:0}}
/* médailles v2 */
.med.astre{filter:drop-shadow(0 6px 14px rgba(20,40,90,.28))}
.mcpt b{display:none}
.med.off{filter:grayscale(1) opacity(.45)}
/* glisser pour répondre, stickers, épingles */
.msg{will-change:transform}
.msg.swready{box-shadow:-4px 0 0 var(--acc)}
.stk{font-size:44px;line-height:1.1;display:block}
.stgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:12px}
.stgrid span{font-size:30px;text-align:center;padding:6px 0;border-radius:12px;cursor:pointer}
.stgrid span:active{background:var(--glass);transform:scale(1.25)}
.it.pinned{border-left:3px solid var(--acc)}
.it.pinned .t:after{content:" 📌";font-size:11px}
.replybar{position:absolute;left:18px;right:18px;bottom:calc(140px + env(safe-area-inset-bottom));margin:0;z-index:7;border-radius:14px}

.pluie i{filter:drop-shadow(0 2px 6px rgba(0,0,0,.25))}

/* formats d'image constants */
.post video{width:100%;display:block;margin-top:10px;max-height:70vh;background:#000}
.msg img{max-width:240px;max-height:300px;object-fit:cover;border-radius:12px;display:block}
.pho img{aspect-ratio:1/1;object-fit:cover}
.viewer img{aspect-ratio:auto;object-fit:contain}
/* stickers et pastilles de message */
.msg.stk{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.msg.stk img{width:136px;height:136px;object-fit:contain;display:block;filter:drop-shadow(0 4px 10px rgba(0,0,0,.2))}
.msg.stk .d{margin-top:2px}
.stgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:12px}
.stgrid span{display:grid;place-items:center;padding:4px;border-radius:14px;cursor:pointer;background:var(--glass);border:1px solid var(--line)}
.stgrid span:active{transform:scale(1.12)}
.stgrid img{width:54px;height:54px;object-fit:contain}
.msgdot{position:absolute;top:-5px;right:-6px;min-width:17px;height:17px;padding:0 4px;border-radius:99px;background:var(--acc);color:var(--ink-on-acc);font-size:10.5px;font-weight:800;display:grid;place-items:center;font-style:normal;line-height:1}
.chat{position:relative}
.kzstk{display:block;filter:drop-shadow(0 4px 10px rgba(0,0,0,.18))}
.stgrid .kzstk{width:56px;height:56px}
/* tiroir de stickers */
.stkbar{display:flex;gap:10px;align-items:center;margin:10px 0 8px}
.stktabs{display:flex;gap:6px;margin-bottom:8px}
.stktabs span{flex:1;text-align:center;padding:7px 0;border-radius:99px;font-size:12.5px;font-weight:700;color:var(--tx2);background:var(--glass);border:1px solid var(--line);cursor:pointer}
.stktabs span.on{background:var(--acc);color:var(--ink-on-acc);border-color:transparent}
.stgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:4px;max-height:44vh;overflow-y:auto}
.stgrid.gif{grid-template-columns:repeat(3,1fr)}
.stgrid span{position:relative;display:grid;place-items:center;padding:6px;border-radius:14px;cursor:pointer;background:var(--glass);border:1px solid var(--line);aspect-ratio:1/1}
.stgrid span:active{transform:scale(1.1)}
.stgrid img{width:100%;height:100%;object-fit:contain;border-radius:10px}
.stkfav{position:absolute;top:3px;right:5px;font-size:11px;color:#ffb400;font-style:normal}
.stkvide{padding:26px 14px;text-align:center;color:var(--tx3);font-size:13px}
.embl{display:block;flex:0 0 auto;filter:drop-shadow(0 3px 8px rgba(10,20,50,.25))}
.it .embl{margin-right:10px}

/* ═══════════ LES RONDES — une identité par jeu ═══════════
   Chaque activité a sa teinte, sa matière de fond et son objet signature.
   Le plateau change de caractère, pas seulement de couleur. */
.plateau{--jh:265;position:relative;border-radius:22px;padding:2px;margin-bottom:12px;overflow:hidden}
.plateau[data-jeu="chapeau"]{--jh:268}
.plateau[data-jeu="miroir"]{--jh:205}
.plateau[data-jeu="course"]{--jh:38}
.plateau[data-jeu="buzzer"]{--jh:352}
.plateau[data-jeu="chasse"]{--jh:150}
.plateau[data-jeu="accord"]{--jh:280}
.plateau[data-jeu="declin"]{--jh:25}
.plateau[data-jeu="commun"]{--jh:190}
.plateau[data-jeu="sentence"]{--jh:45}
.plateau[data-jeu="silence"]{--jh:232}
.plateau[data-jeu="relais"]{--jh:165}
.plateau[data-jeu="chaudfroid"]{--jh:14}

/* la carte en jeu : un objet posé, pas une boîte */
.jcard{position:relative;border-radius:20px;padding:22px 20px 24px;
  background:linear-gradient(160deg,hsl(var(--jh) 90% 97%),hsl(var(--jh) 70% 92%));
  border:1px solid hsl(var(--jh) 60% 82%);
  box-shadow:0 10px 30px -12px hsl(var(--jh) 60% 40% / .45), inset 0 1px 0 #fff}
.night .jcard{background:linear-gradient(160deg,hsl(var(--jh) 38% 20%),hsl(var(--jh) 42% 14%));border-color:hsl(var(--jh) 40% 32%);box-shadow:0 12px 34px -14px #000, inset 0 1px 0 hsl(var(--jh) 40% 34%)}
.jcard .jq{font-family:'Fraunces',serif;font-size:23px;line-height:1.24;color:var(--tx)}
.jcard .jk{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:hsl(var(--jh) 62% 42%);margin-bottom:8px}
.night .jcard .jk{color:hsl(var(--jh) 70% 72%)}

/* le chapeau : la carte sort, légèrement de travers */
.plateau[data-jeu="chapeau"] .jcard{transform:rotate(-1.1deg);animation:tire .5s cubic-bezier(.2,.9,.3,1.3)}
@keyframes tire{from{transform:translateY(26px) rotate(-7deg) scale(.94);opacity:0}to{transform:rotate(-1.1deg);opacity:1}}
.plateau[data-jeu="chapeau"] .jcard:before{content:'';position:absolute;inset:6px 6px auto 6px;height:3px;border-radius:3px;background:hsl(268 60% 60% / .35)}

/* le miroir : la carte est fendue en deux */
.plateau[data-jeu="miroir"] .jcard{background:linear-gradient(105deg,hsl(205 90% 96%) 0 49.4%,hsl(205 55% 86%) 49.4% 50.6%,hsl(205 80% 93%) 50.6% 100%)}
.night .plateau[data-jeu="miroir"] .jcard{background:linear-gradient(105deg,hsl(205 40% 21%) 0 49.4%,hsl(205 45% 33%) 49.4% 50.6%,hsl(205 38% 16%) 50.6% 100%)}

/* la course : un damier discret, et le chronomètre visuel */
.plateau[data-jeu="course"] .jcard:after{content:'';position:absolute;left:0;right:0;bottom:0;height:8px;
  background:repeating-linear-gradient(90deg,#26262c 0 8px,#f4f4f6 8px 16px);opacity:.5}
.gele{display:grid;place-items:center;height:96px;border-radius:18px;border:2px dashed hsl(200 60% 60%);
  background:hsl(200 80% 96%);color:hsl(200 50% 38%);font-weight:800;font-size:19px}
.night .gele{background:hsl(200 40% 16%);color:hsl(200 60% 72%)}

/* le buzzer : un vrai bouton de plateau, qui respire */
.buzz{width:100%;height:150px;border-radius:26px;border:0;cursor:pointer;color:#fff;font:800 24px/1 system-ui;letter-spacing:.16em;
  background:radial-gradient(120% 120% at 50% 15%,hsl(352 95% 68%),hsl(352 80% 44%));
  box-shadow:0 14px 0 hsl(352 70% 30%),0 22px 34px -12px hsl(352 70% 30% / .7);transition:transform .07s,box-shadow .07s;animation:pulseB 2.2s ease-in-out infinite}
.buzz:active{transform:translateY(11px);box-shadow:0 3px 0 hsl(352 70% 30%),0 8px 16px -8px hsl(352 70% 30% / .7);animation:none}
@keyframes pulseB{0%,100%{filter:brightness(1)}50%{filter:brightness(1.12)}}

/* la chasse : une liste à cocher, façon carnet */
.chsl{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:16px;margin-bottom:8px;
  background:var(--card);border:1px solid var(--line);border-left:4px solid hsl(150 50% 55%)}
.chsl.ok{border-left-color:hsl(150 60% 42%);background:hsl(150 55% 96%)}
.night .chsl.ok{background:hsl(150 30% 16%)}
.chsl .ck2{width:26px;height:26px;border-radius:9px;border:2px solid hsl(150 40% 60%);display:grid;place-items:center;flex:0 0 auto;font-weight:800;color:hsl(150 60% 38%)}
.chsl.ok .ck2{background:hsl(150 60% 45%);border-color:transparent;color:#fff}

/* le silence : un anneau de pression qui se resserre */
.silence{position:relative;width:100%;height:200px;border-radius:24px;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 50%,hsl(232 60% 96%),hsl(232 45% 88%));border:1px solid hsl(232 40% 80%);user-select:none;-webkit-user-select:none;touch-action:none}
.night .silence{background:radial-gradient(circle at 50% 50%,hsl(232 34% 22%),hsl(232 38% 13%));border-color:hsl(232 30% 30%)}
.silence i{position:absolute;width:132px;height:132px;border-radius:50%;border:3px solid hsl(232 60% 60% / .5);animation:resserre 2.4s ease-in-out infinite}
.silence i:nth-child(2){animation-delay:.8s}.silence i:nth-child(3){animation-delay:1.6s}
@keyframes resserre{from{transform:scale(1.5);opacity:0}40%{opacity:.8}to{transform:scale(.6);opacity:0}}
.silence b{position:relative;font:700 17px/1.4 system-ui;color:hsl(232 40% 40%);text-align:center}
.night .silence b{color:hsl(232 50% 78%)}

/* le déclin : les mots déjà dits, en jetons */
.jetons{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.jeton{font-size:12.5px;padding:5px 11px;border-radius:99px;background:hsl(25 70% 94%);color:hsl(25 60% 34%);border:1px solid hsl(25 60% 84%)}
.night .jeton{background:hsl(25 35% 20%);color:hsl(25 60% 74%);border-color:hsl(25 30% 30%)}

/* le relais : une bande de papier qui s'allonge */
.bande{background:repeating-linear-gradient(180deg,transparent 0 27px,hsl(165 40% 88%) 27px 28px);
  padding:14px 16px;border-radius:14px;border:1px solid hsl(165 35% 80%);line-height:28px;font-family:'Fraunces',serif;font-size:16px}
.night .bande{background:repeating-linear-gradient(180deg,transparent 0 27px,hsl(165 25% 26%) 27px 28px);border-color:hsl(165 25% 30%)}

/* chaud-froid : un thermomètre */
.thermo{height:26px;border-radius:99px;overflow:hidden;background:linear-gradient(90deg,hsl(205 80% 72%),hsl(45 90% 62%),hsl(14 90% 58%));position:relative;border:1px solid var(--line)}
.thermo i{position:absolute;top:-4px;width:6px;height:34px;border-radius:4px;background:#fff;box-shadow:0 0 0 2px #0003;transition:left .35s cubic-bezier(.3,1,.4,1)}
.thermoTxt{font:800 40px/1 'Fraunces',serif;letter-spacing:.04em;text-align:center;margin:10px 0}

/* l'accord : des bulletins */
.bulletin{display:block;width:100%;text-align:left;padding:14px 16px;border-radius:14px;margin-bottom:8px;border:1px solid hsl(280 40% 82%);
  background:hsl(280 60% 98%);font-size:15px;color:var(--tx);cursor:pointer}
.bulletin:active{transform:scale(.985)}
.night .bulletin{background:hsl(280 28% 19%);border-color:hsl(280 25% 32%)}
.bulletin.gagne{border-color:hsl(280 60% 58%);box-shadow:0 0 0 2px hsl(280 60% 58% / .35)}

/* le point commun : deux cercles qui se croisent */
.venn{display:grid;place-items:center;height:118px;position:relative}
.venn span{position:absolute;width:104px;height:104px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:15px}
.venn span:first-child{left:calc(50% - 88px);background:hsl(190 75% 86%);color:hsl(190 50% 28%)}
.venn span:last-child{left:calc(50% - 16px);background:hsl(330 75% 88%);color:hsl(330 50% 32%);mix-blend-mode:multiply}
.night .venn span:first-child{background:hsl(190 45% 28%);color:hsl(190 60% 84%)}
.night .venn span:last-child{background:hsl(330 40% 30%);color:hsl(330 60% 86%);mix-blend-mode:screen}

/* la sentence : une balance qui penche */
.balance{display:flex;align-items:flex-end;justify-content:center;gap:0;height:74px;margin-bottom:6px}
.balance i{width:3px;height:56px;background:hsl(45 50% 45%)}
.balance b{width:62px;height:8px;border-radius:4px;background:hsl(45 70% 55%);display:block}

/* ════════ DOUZE AMBIANCES ════════ */
.amb{position:relative;border-radius:22px;overflow:hidden;padding:20px 18px;margin-bottom:12px;min-height:150px}
.amb .kickA{font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;opacity:.8}
.amb .bigA{font:600 21px/1.22 'Fraunces',serif;margin-top:8px}

/* chapeau — cabaret */
.amb.a-chapeau{background:radial-gradient(120% 80% at 50% -12%,#6b2fae,#1b0b33 72%);color:#f3e9ff}
.amb.a-chapeau:before{content:'';position:absolute;top:-80px;left:50%;transform:translateX(-50%);width:320px;height:250px;background:radial-gradient(circle,#ffd66b44,transparent 70%)}
.carteMagie{position:relative;margin-top:14px;background:linear-gradient(160deg,#fffdf6,#f0e3ff);color:#2a1046;border-radius:14px;padding:20px 16px;font:600 19px/1.28 'Fraunces',serif;transform:rotate(-1.6deg);box-shadow:0 18px 34px -16px #000;animation:sortChapeau .55s cubic-bezier(.2,.9,.3,1.35)}
@keyframes sortChapeau{from{transform:translateY(40px) rotate(-12deg) scale(.9);opacity:0}to{transform:rotate(-1.6deg);opacity:1}}
.carteMagie.dechire{animation:dechire .5s forwards}
@keyframes dechire{to{transform:rotate(-1.6deg) scale(.96);opacity:0;filter:blur(2px)}}

/* miroir — symétrie */
.amb.a-miroir{background:linear-gradient(90deg,#0f2f52 50%,#123f6e 50%);color:#eaf4ff}
.amb.a-miroir:after{content:'';position:absolute;left:50%;top:0;bottom:0;width:2px;background:linear-gradient(#ffd66b,transparent)}
.mirGrid{display:flex;gap:12px;margin-top:14px}
.mirCol{flex:1}.mirLab{font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.7;margin-bottom:5px}
.mirRep{background:#ffffff1c;border:1px solid #ffffff33;border-radius:12px;padding:11px;font-size:14px;min-height:42px}
.mirRep.inv{transform:scaleX(-1);opacity:.5}

/* course — circuit */
.amb.a-course{background:#0d1016;color:#fff}
.amb.a-course:before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(180deg,#151922 0 38px,#11141b 38px 76px)}
.chrono{font:800 46px/1 system-ui;letter-spacing:.02em;color:#ffd033;position:relative}
.lane{position:relative;height:26px;margin-top:8px;background:#1b2029;border-radius:13px}
.lane i{position:absolute;top:3px;height:20px;width:20px;border-radius:50%;transition:left .5s ease}
.lane b{position:absolute;right:9px;top:5px;font-size:11px;opacity:.72;font-weight:600}

/* buzzer — plateau télé */
.amb.a-buzzer{background:radial-gradient(90% 60% at 50% 0,#6d0f1c,#25060c);color:#ffe9ec}
.amb.a-buzzer:before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,#8a1424 0 18px,#6d0f1c 18px 36px);opacity:.32}
.nomTV{font:800 40px/1 system-ui;letter-spacing:.04em;text-align:center;margin-top:14px;color:#fff;text-shadow:0 0 26px #ff4d6a;position:relative}
.tmTV{font:800 28px/1 system-ui;color:#ffd033;text-align:center;position:relative}

/* chasse — carnet kraft */
.amb.a-chasse{background:#e9dcc3;color:#3a2f1c;font-family:ui-monospace,monospace}
.chTit{font-weight:700;font-size:15px;border-bottom:2px dashed #b9a67e;padding-bottom:7px}
.chLi{display:flex;gap:10px;align-items:center;margin-top:11px;font-size:13.5px;cursor:pointer}
.chBx{width:20px;height:20px;border:2px solid #7a6a45;border-radius:4px;display:grid;place-items:center;font-weight:700;flex:0 0 auto}
.chBx.ok{background:#3f7d4d;border-color:#3f7d4d;color:#fff}
.mur{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.pola{background:#fff;padding:7px 7px 22px;border-radius:3px;box-shadow:0 8px 16px -9px #0007;transform:rotate(var(--r,2deg))}
.pola img,.pola video{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}

/* accord — urne */
.amb.a-accord{background:linear-gradient(180deg,#2c1155,#160727);color:#f0e6ff}
.bul2{background:#fff;color:#2a1046;border-radius:11px;padding:12px 14px;font-size:14px;margin-top:9px;box-shadow:0 10px 18px -12px #000;cursor:pointer;animation:entreeTombe .4s ease}
@keyframes entreeTombe{from{transform:translateY(-14px);opacity:0}to{transform:none;opacity:1}}
.bul2.win{outline:3px solid #ffd66b}

/* déclin — pression */
.amb.a-declin{background:radial-gradient(90% 70% at 50% 112%,#7a1b0d,#1d0b07);color:#ffe8dd}
.tmRouge{font:800 52px/1 system-ui;text-align:center;color:#ff7043}
.jt{display:inline-block;font-size:11.5px;padding:5px 11px;border-radius:99px;background:#ffffff1c;border:1px solid #ffffff2e;margin:3px 3px 0 0}

/* point commun — diagramme */
.venn2{position:relative;height:132px;margin-top:8px}
.venn2 i{position:absolute;top:8px;width:116px;height:116px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:15px;font-style:normal}
.venn2 i:first-child{left:calc(50% - 96px);background:#2aa7c799}
.venn2 i:last-child{left:calc(50% - 20px);background:#ff6fa899}
.prop{background:#ffffff14;border:1px solid #ffffff26;border-radius:12px;padding:11px 13px;font-size:13.5px;margin-top:8px}

/* sentence — tribunal */
.amb.a-sentence{background:linear-gradient(180deg,#3a2a14,#1a1208);color:#f6e9cf}
.amb.a-sentence:before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,#00000018 0 3px,transparent 3px 26px)}
.accuse{font:600 25px 'Fraunces',serif;text-align:center;margin-top:12px;position:relative}
.tmOr{font:800 36px/1 system-ui;color:#ffd033;text-align:center;position:relative}

/* silence — tension */
.ringsS i{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:2px solid #ffffff26;border-radius:50%;animation:respire 3s ease-in-out infinite}
.ringsS i:nth-child(2){animation-delay:1s}.ringsS i:nth-child(3){animation-delay:2s}
@keyframes respire{0%,100%{opacity:.15;transform:translate(-50%,-50%) scale(.92)}50%{opacity:.5;transform:translate(-50%,-50%) scale(1.06)}}
.tmBlanc{position:relative;text-align:center;font:800 48px/1 system-ui;color:#fff;margin-top:96px}

/* relais — machine à écrire */
.amb.a-relais{background:#f5f1e6;color:#241f18;font-family:ui-monospace,monospace}
.papierRelais{background:repeating-linear-gradient(180deg,transparent 0 25px,#d9d2c1 25px 26px);padding:12px;border-radius:6px;line-height:26px;font-size:13.5px}
.lastPh{margin-top:12px;font-weight:700;border-left:3px solid #c1892a;padding-left:11px;line-height:26px}
.cachees{opacity:.3;letter-spacing:2px}

/* chaud-froid — radar */
.amb.a-chaudfroid{background:radial-gradient(60% 45% at 50% 42%,#0a3a4a,#040f18);color:#dff6ff;min-height:300px}
.radar{position:relative;height:210px;margin-top:4px}
.radar i{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;border:1px solid #39e0ff44;animation:sonar 2.2s ease-out infinite}
.radar i:nth-child(2){animation-delay:.7s}.radar i:nth-child(3){animation-delay:1.4s}
@keyframes sonar{from{opacity:.7;transform:translate(-50%,-50%) scale(.35)}to{opacity:0;transform:translate(-50%,-50%) scale(1)}}
.radar b{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:800 34px/1 system-ui;letter-spacing:.04em}

/* ════ LE JEU PREND TOUT L'ÉCRAN ════
   Une fois la partie lancée : plus d'en-tête d'appli, plus de barre du bas,
   plus de code affiché. L'ambiance occupe l'écran, les actions restent en bas. */
body.plein .nav{display:none}
body.plein .sc{padding:0!important}
body.plein .sc > .head{display:none}
#rondeBox.jeuPlein{position:fixed;inset:0;display:flex;flex-direction:column;z-index:40;background:var(--bg)}
.jeuPlein > .amb{flex:1;border-radius:0;margin:0;padding:calc(54px + env(safe-area-inset-top)) 18px 16px;overflow-y:auto}
.jeuPlein .barreJeu{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;gap:10px;padding:calc(9px + env(safe-area-inset-top)) 14px 6px}
.jeuPlein .barreJeu .bj{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;background:var(--glass);border:1px solid var(--line);cursor:pointer;font-size:17px;color:#fff;flex:0 0 auto;-webkit-backdrop-filter:var(--verre-flou);backdrop-filter:var(--verre-flou)}
.jeuPlein .barreJeu .nom{flex:1;min-width:0;font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#fff;opacity:.8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 6px #0009}
.jeuPlein .barreJeu.clair .bj{background:#2a241812;border-color:#2a241826;color:#2a2418}
.jeuPlein .barreJeu.clair .nom{color:#2a2418;text-shadow:none;opacity:.7}
.jeuPlein .pied{flex:0 0 auto;padding:10px 16px calc(14px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px;background:var(--bg);border-top:1px solid var(--line)}
.jeuPlein .pied .btn,.jeuPlein .pied .btns,.jeuPlein .pied .g,.jeuPlein .pied .note{margin:0}
.jeuPlein .pied .g{padding:12px 14px}
.sheetJeu .codeJ{font:800 34px/1 system-ui;letter-spacing:.3em;text-align:center;margin:8px 0 2px}

/* ════ CHOIX VISIBLES ════ le sélectionné doit sauter aux yeux */
.opt.pick{position:relative;transition:background .15s,border-color .15s}
.opt.pick i{width:24px;height:24px;border-radius:50%;border:2px solid var(--line);flex:0 0 auto;display:grid;place-items:center;transition:all .15s}
.opt.pick.on{background:color-mix(in srgb,var(--acc) 12%,transparent);border-color:var(--acc)!important}
.opt.pick.on i{background:var(--acc);border-color:var(--acc)}
.opt.pick.on i:after{content:'✓';color:var(--ink-on-acc);font-size:13px;font-weight:900;line-height:1}
.opt.pick.on .t{color:var(--acc)}
.g.list .opt.pick{border-radius:14px;margin:4px 0;border:1.5px solid transparent;padding:12px 14px}

/* ════ EN-TÊTE DE RÉGLAGE, AUX COULEURS DU JEU ════ */
.setJeu{position:relative;border-radius:22px;padding:20px 18px;margin-bottom:14px;text-align:center;color:#fff;overflow:hidden}
.setJeu .qq{font-size:13.5px;line-height:1.5;opacity:.92;margin-top:10px}
.setJeu .nm{font:600 22px 'Fraunces',serif;margin-top:8px}
.setJeu .embl{margin:0 auto}
.setJeu[data-jeu="chapeau"]{background:linear-gradient(160deg,#6b2fae,#1b0b33)}
.setJeu[data-jeu="miroir"]{background:linear-gradient(160deg,#2a6fae,#0f2f52)}
.setJeu[data-jeu="course"]{background:linear-gradient(160deg,#d08a12,#5a3a06)}
.setJeu[data-jeu="buzzer"]{background:linear-gradient(160deg,#c31232,#3d0812)}
.setJeu[data-jeu="chasse"]{background:linear-gradient(160deg,#2f9a68,#0d3f2a)}
.setJeu[data-jeu="accord"]{background:linear-gradient(160deg,#7b3fd6,#2a0e57)}
.setJeu[data-jeu="declin"]{background:linear-gradient(160deg,#d0601f,#3d1508)}
.setJeu[data-jeu="commun"]{background:linear-gradient(160deg,#2aa0c0,#07323d)}
.setJeu[data-jeu="sentence"]{background:linear-gradient(160deg,#c09418,#3a2a14)}
.setJeu[data-jeu="silence"]{background:linear-gradient(160deg,#4558a8,#111838)}
.setJeu[data-jeu="relais"]{background:linear-gradient(160deg,#2f9a8a,#0f4258)}
.setJeu[data-jeu="chaudfroid"]{background:linear-gradient(160deg,#d0551f,#07303f)}
.reglesJeu{text-align:left;background:#ffffff14;border:1px solid #ffffff26;border-radius:14px;padding:12px 14px;margin-top:12px;font-size:12.5px;line-height:1.55}
.reglesJeu b{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.75;margin-bottom:5px}

/* ════ LE REGISTRE DE LA RONDE ════ */
.murReg{display:grid;gap:14px}
.regCard{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.regCard img,.regCard video{width:100%;display:block;aspect-ratio:4/5;object-fit:cover;background:#0b0f1a}
.regBas{padding:12px 14px 14px}
.regLg{font:600 14px/1.35 'Fraunces',serif}
.regQui{font-size:11.5px;color:var(--tx3);margin-top:3px}
.regBas .btns{display:flex;gap:8px}
.regBas .btns .btn{flex:1;text-align:center;text-decoration:none;display:grid;place-items:center}

/* le soupçon — pièce sombre, un projecteur, personne ne saura */
.amb.a-soupcon{background:radial-gradient(70% 45% at 50% 18%,#4a327f,#140d2b 72%);color:#efe7ff}
.amb.a-soupcon:before{content:'';position:absolute;top:-60px;left:50%;transform:translateX(-50%);width:340px;height:260px;background:radial-gradient(circle,#ffd66b33,transparent 72%)}
.suspect{display:block;width:100%;text-align:left;padding:14px 16px;border-radius:16px;margin-bottom:8px;
  background:var(--glass);border:1px solid var(--line);color:var(--tx);font-size:15px;font-weight:600;cursor:pointer}
.suspect:active{background:color-mix(in srgb,var(--acc) 14%,transparent);border-color:var(--acc)}
.amb .suspect{background:#ffffff12;border-color:#ffffff26;color:#efe7ff}
.barreVote{display:flex;gap:6px;align-items:flex-end;height:74px;margin:12px 0 6px;justify-content:center}
.barreVote i{width:34px;border-radius:8px 8px 3px 3px;background:linear-gradient(#ffd66b,#c89a1e)}
.secret{background:#ffffff14;border:1px solid #ffd66b55;border-radius:14px;padding:13px 15px;margin-top:10px;font-size:13.5px;line-height:1.5}
.secret b{color:#ffd66b}

/* ── le joker ── */
.joker{display:flex;align-items:center;gap:12px;width:100%;padding:13px 16px;border-radius:16px;cursor:pointer;
  background:linear-gradient(120deg,#2a1a52,#4b2c8f);border:1px solid #7a5ad8;color:#fff;text-align:left}
.joker i{font-style:normal;font-size:22px;color:#ffd66b;text-shadow:0 0 12px #ffd66b88}
.joker span{display:flex;flex-direction:column;font-weight:800;font-size:15px}
.joker small{font-weight:500;font-size:11.5px;opacity:.75}
.joker:active{transform:scale(.985)}
/* ── le chat de la partie ── */
.chatJeu .chatFil{max-height:46vh;overflow-y:auto;display:flex;flex-direction:column;gap:7px;margin:10px 0;padding-right:2px}
.chatMsg{align-self:flex-start;max-width:82%;background:var(--glass);border:1px solid var(--line);border-radius:16px 16px 16px 5px;padding:9px 12px;font-size:14.5px;position:relative}
.chatMsg.mien{align-self:flex-end;border-radius:16px 16px 5px 16px;background:color-mix(in srgb,var(--acc) 16%,transparent);border-color:transparent}
.chatMsg b{display:block;font-size:11px;color:var(--tx3);margin-bottom:2px}
.chatMsg img,.chatMsg video{max-width:100%;border-radius:10px;display:block;margin-bottom:4px}
.chatSig{display:block;margin-top:4px;background:none;border:0;padding:0;font:inherit;font-size:11px;
  color:var(--tx3);text-decoration:underline;cursor:pointer;opacity:.75}
.chatSig:hover,.chatSig:active{opacity:1;color:var(--tx)}
.chatRx{position:absolute;bottom:-9px;right:8px;background:var(--card);border:1px solid var(--line);border-radius:99px;padding:1px 6px;font-size:12px;font-style:normal}
.chatBar{display:flex;gap:8px;align-items:center}
.chatBar .in{flex:1;margin:0}
.bj2{width:42px;height:42px;border-radius:13px;border:1px solid var(--line);background:var(--glass);font-size:18px;cursor:pointer;flex:0 0 auto}
.pastilleChat{position:absolute;top:-3px;right:-3px;background:var(--acc);color:var(--ink-on-acc);font-size:9px;font-weight:800;border-radius:99px;padding:1px 4px;font-style:normal}
.jeuPlein .barreJeu .bj{position:relative}

/* ── le mur de la chasse ── */
.murPr{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.prCard{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.prCard.refusee{opacity:.45;border-color:var(--acc)}
.prCard img,.prCard video{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:#0b0f1a}
.prBas{padding:8px 10px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.prBas b{font-size:12.5px}
.prNon{font-size:10.5px;color:var(--acc);font-weight:700}
.prBtn{margin-left:auto;font-size:10.5px;padding:4px 9px;border-radius:99px;border:1px solid var(--line);background:var(--glass);cursor:pointer;color:var(--tx3)}
.prBtn.on{background:var(--acc);color:var(--ink-on-acc);border-color:transparent}
/* la vignette du jeu jointe aux vidéos */
.regMedia{position:relative}
.regVig{position:absolute;bottom:10px;left:10px;width:20%;pointer-events:none;border-radius:10px;box-shadow:0 8px 20px -8px #000c;border:1px solid #ffffff33}

/* la cinématique de lancement */
.amb.lancement{display:grid;place-items:center;position:relative;overflow:hidden}
.lanceCercle{position:absolute;width:20px;height:20px;border-radius:50%;background:#ffffff26;animation:ouvre .85s cubic-bezier(.25,1,.3,1) forwards}
@keyframes ouvre{to{width:220vmax;height:220vmax;opacity:0}}
.lanceTxt{position:relative;text-align:center;animation:entreeMonte .7s .18s both cubic-bezier(.2,.9,.3,1.2)}
@keyframes entreeMonte{from{transform:translateY(22px) scale(.92);opacity:0}to{transform:none;opacity:1}}
.lanceTxt .embl{margin:0 auto 12px}
.lanceNom{font:600 30px 'Fraunces',serif}
.lanceSub{font-size:12.5px;opacity:.75;margin-top:6px;letter-spacing:.06em;text-transform:uppercase;font-weight:700}
.quiRx{font-size:11px;color:var(--tx3);border:1px solid var(--line);border-radius:99px;padding:3px 9px;cursor:pointer;margin-right:6px}
.quiRx:active{background:var(--glass)}

/* Une vidéo ne se recadre pas comme une photo : on la montre entière. */
.regCard video,.prCard video,.chatMsg video{aspect-ratio:auto!important;object-fit:contain!important;
  background:#0a0d16;max-height:62vh;width:100%}
.regCard img,.prCard img{object-fit:cover}
.regCard .regMedia video{border-radius:0}
.pola video{aspect-ratio:auto!important;object-fit:contain!important;background:#0a0d16}
/* le récapitulatif de fin */
.recapT{padding:12px 14px}
.recapN{font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--tx3)}
.recapQ{font:600 15.5px/1.35 'Fraunces',serif;margin:4px 0 2px}
.recapR{font-size:12.5px;color:var(--tx3);margin-bottom:4px}
.recapG{margin-top:6px;font-size:12px;font-weight:700;color:var(--acc)}
.grandMedia{margin:10px 0;border-radius:14px;overflow:hidden;background:#0a0d16}
.grandMedia img,.grandMedia video{width:100%;max-height:70vh;object-fit:contain;display:block}
.designe{margin-top:10px;text-align:center;font:600 20px 'Fraunces',serif}
.designe small{display:block;font:400 11.5px system-ui;opacity:.6;margin-top:4px}
.chatMsg img,.chatMsg video,.chatMsg .stk{-webkit-touch-callout:none;user-select:none}
.jeton.on{background:var(--acc);color:var(--ink-on-acc);border-color:transparent}
.jeton{cursor:pointer}

/* le carrousel : plusieurs photos dans une publication */
.carrousel{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:0;scrollbar-width:none}
.carrousel::-webkit-scrollbar{display:none}
.carrousel figure{flex:0 0 100%;scroll-snap-align:center;position:relative;margin:0}
.carrousel img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.carrousel figcaption{position:absolute;left:10px;right:56px;top:10px;background:#0b0f1acc;color:#fff;
  font-size:11.5px;font-weight:600;padding:5px 10px;border-radius:99px;-webkit-backdrop-filter:var(--verre-flou);backdrop-filter:var(--verre-flou);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.carrousel i{position:absolute;right:10px;top:10px;background:#0b0f1acc;color:#fff;font-style:normal;
  font-size:11px;font-weight:700;padding:5px 9px;border-radius:99px;-webkit-backdrop-filter:var(--verre-flou);backdrop-filter:var(--verre-flou)}
.invitation{padding:26px 18px}
.chip.attente{opacity:.55;border-style:dashed}

/* ── la mort subite ── */
.mortTitre{font:800 30px/1.05 system-ui;letter-spacing:.02em;text-transform:uppercase;margin-top:10px;
  background:linear-gradient(90deg,#ff5d6c,#ffd66b);-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:mortPulse 1.4s ease-in-out infinite}
.mortTxt{font-size:13px;opacity:.85;margin-top:6px;line-height:1.45}
@keyframes mortPulse{0%,100%{transform:scale(1);filter:drop-shadow(0 0 0 #ff5d6c00)}50%{transform:scale(1.035);filter:drop-shadow(0 0 14px #ff5d6c88)}}
.amb.mortSubite{animation:mortSecousse .5s ease-out 1}
@keyframes mortSecousse{0%,100%{transform:none}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}
/* la version corrompue : le titre se brouille */
.amb.corrompue .mortTitre{background:linear-gradient(90deg,#9b5dff,#39e0ff,#ff5dd2);-webkit-background-clip:text;background-clip:text;
  animation:mortGlitch 1.1s steps(2) infinite}
@keyframes mortGlitch{0%{transform:translate(0)}25%{transform:translate(-2px,1px) skewX(-6deg)}50%{transform:translate(2px,-1px)}75%{transform:translate(-1px,0) skewX(5deg)}100%{transform:translate(0)}}
.mortBadge{display:inline-block;margin-top:8px;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  padding:4px 10px;border-radius:99px;background:linear-gradient(90deg,#ff5d6c,#ffb14a);color:#1a0610}
.mortBadge.corrompue{background:linear-gradient(90deg,#9b5dff,#39e0ff);color:#0a0620}
/* la tribune de la sentence */
.tribune{margin:18px auto 0;text-align:center;padding:16px 14px;border-radius:18px;background:#00000038;border:1px solid #ffd03333;max-width:320px}
.tribune .accuse{font:600 28px 'Fraunces',serif;margin:0}
.tribSub{font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.7;margin:4px 0}
.tribune .tmOr{font:800 38px/1 system-ui;color:#ffd033;margin-top:6px}

/* relais */
.debutRelais{margin-top:10px;padding:10px 12px;border-radius:10px;background:#c1892a1f;border-left:3px solid #c1892a;font-weight:700;line-height:1.5}
.debutRelais small,.lastPh small{display:block;font-weight:400;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;opacity:.6;margin-bottom:4px;font-family:system-ui}
.phR small{font-size:10px;opacity:.5}
/* chaud-froid : un curseur large, facile au pouce, qui montre le froid et le chaud */
.curseurCF{margin-top:24px}
.curseurCF input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:20px;border-radius:99px;
  background:linear-gradient(90deg,#39e0ff,#ffd033 50%,#ff5d3c);outline:none;margin:0}
.curseurCF input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:40px;height:40px;border-radius:50%;
  background:#fff;box-shadow:0 4px 14px #0009;border:3px solid #0a3a4a;cursor:pointer}
.curseurCF input[type=range]::-moz-range-thumb{width:40px;height:40px;border-radius:50%;background:#fff;border:3px solid #0a3a4a}
.cfEchelle{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.75;margin-top:10px}
/* la liste des catégories du déclin */
.listeCat{max-height:320px;overflow-y:auto;margin-top:6px;border:1px solid var(--line);border-radius:14px}
.catLigne{display:flex;align-items:center;gap:10px;padding:11px 13px;border-bottom:1px solid var(--line);cursor:pointer}
.catLigne:last-child{border-bottom:0}
.catLigne input{width:20px;height:20px;accent-color:var(--acc);flex:0 0 auto}
.catLigne span{flex:1;font-size:14px}
.catLigne small{font-size:11px;color:var(--tx3)}
/* l'invitation à jouer dans la conversation */
.msg.invRonde{cursor:pointer;min-width:200px;padding:13px 15px;background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 28%,transparent),color-mix(in srgb,var(--acc2) 18%,transparent));border:1px solid color-mix(in srgb,var(--acc) 45%,transparent)}
.msg.invRonde .invT{font-weight:800;font-size:14.5px}
.msg.invRonde .invS{font-size:12px;opacity:.75;margin-top:3px}
.msg.invRonde:active{transform:scale(.98)}

/* ── LA GLACE : vapeur, fissures qui se propagent, morceaux qui tombent ── */
.rv-vap{position:absolute;inset:-20px;overflow:visible;pointer-events:none}
.rv-vap i{position:absolute;width:64px;height:64px;border-radius:50%;background:radial-gradient(circle,#ffffffcc,transparent 68%);
  filter:blur(9px);opacity:0;animation:vapeur 4.2s ease-in-out infinite}
.rv-vap i:nth-child(1){left:6%;bottom:2%;animation-delay:0s}
.rv-vap i:nth-child(2){left:44%;bottom:-6%;animation-delay:1.4s;width:80px;height:80px}
.rv-vap i:nth-child(3){left:72%;bottom:4%;animation-delay:2.6s;width:52px;height:52px}
@keyframes vapeur{0%{opacity:0;transform:translateY(6px) scale(.8)}25%{opacity:.5}100%{opacity:0;transform:translateY(-46px) scale(1.5)}}
.rv-fiss{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.rv-fiss path{stroke:#fff;stroke-width:1.6;fill:none;stroke-linecap:round;opacity:0;
  stroke-dasharray:90;stroke-dashoffset:90;filter:drop-shadow(0 0 3px #bfe0ffcc)}
.rv-bloc.f1 .rv-fiss path:nth-child(-n+3),
.rv-bloc.f2 .rv-fiss path{opacity:.95;animation:fissure .45s ease-out forwards}
.rv-bloc.f2 .rv-fiss path:nth-child(n+4){animation-delay:.08s}
@keyframes fissure{to{stroke-dashoffset:0}}
.glacon{position:absolute;display:block;background:linear-gradient(140deg,#ffffff,#cfe6fa 55%,#9fc6e8);
  box-shadow:0 2px 6px rgba(20,60,100,.35), inset 0 0 8px #fff;opacity:.95;pointer-events:none;
  animation:chuteGlacon .9s cubic-bezier(.35,.1,.7,1) forwards}
@keyframes chuteGlacon{
  0%{transform:translate(0,0) rotate(0);opacity:1}
  100%{transform:translate(var(--dx),var(--chute)) rotate(var(--rot));opacity:0}}
.rv-med.en3d{width:260px;height:260px}
.rv-med.en3d canvas{display:block;border-radius:18px}
.rv3dTap{position:absolute;bottom:6px;left:0;right:0;text-align:center;font-size:11px;font-weight:800;
  letter-spacing:.06em;color:#eaf4ff;text-shadow:0 1px 8px rgba(0,0,0,.6);pointer-events:none}
.rv-med.en3d{position:relative}
.rv-med.en3d svg.med{position:absolute;left:50%;top:50%;width:150px;height:150px;transform:translate(-50%,-50%) scale(.6);opacity:0}
.rv-med.en3d svg.med.sortGlace{animation:sortGlace .8s cubic-bezier(.2,1.5,.35,1) forwards}
@keyframes sortGlace{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}
  60%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.rv-med.casse canvas{animation:fondGlace 1.6s .6s forwards}
@keyframes fondGlace{to{opacity:0}}
.med3d{position:absolute;left:50%;top:50%;width:200px;height:200px;transform:translate(-50%,-50%) scale(.6);
  opacity:0;transition:opacity .5s, transform .7s cubic-bezier(.2,1.5,.35,1);pointer-events:none}
.med3d.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.med3d canvas{display:block}

/* ======== la réfraction et le reflet ========
   Posés par effets3d.js, et seulement s'il a vérifié que le moteur suit.
   Sans lui, ou sur Safari qui refuse les filtres SVG dans backdrop-filter,
   rien de tout ceci ne s'applique : le verre reste celui d'au-dessus. */

/* le fond déformé sur le pourtour, là où le verre est épais.
   Le centre reste net : un masque radial n'ouvre que les bords. */
.ph.refraction .g::after,
.ph.refraction .nav::after,
.ph.refraction .sheet::after{
  content:"";position:absolute;inset:0;z-index:-1;
  border-radius:inherit;pointer-events:none;
  -webkit-backdrop-filter:blur(calc(var(--frost) * .72)) url(#filtreVerre);
          backdrop-filter:blur(calc(var(--frost) * .72)) url(#filtreVerre);
  -webkit-mask:radial-gradient(130% 130% at 50% 50%,transparent 38%,#000 92%);
          mask:radial-gradient(130% 130% at 50% 50%,transparent 38%,#000 92%);
}
.ph.refraction .g,
.ph.refraction .nav,
.ph.refraction .sheet{isolation:isolate}

/* l'éclat qui glisse sur le bord haut, piloté par --lx que pose effets3d.js.
   Rien ne bouge tant que l'appareil ne bouge pas. */
.ph.reflet .g::before,
.ph.reflet .toast::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;z-index:1;
  background:radial-gradient(58% 116% at var(--lx,50%) -16%,
    rgba(255,255,255,calc(var(--verre-epaisseur) * .34)) 0%,transparent 62%);
}

/* le bandeau de maintenance, posé par effets3d.js — voir le point 4 de ce fichier.
   Il reprend la recette du verre, en plus dense : il doit se lire d'un coup d'œil
   sans masquer le contenu. */
.bandeauMaintenance{
  position:fixed;left:50%;transform:translateX(-50%) translateY(-120%);
  top:calc(env(safe-area-inset-top, 0px) + 8px);
  z-index:70;max-width:min(92%,560px);
  padding:10px 16px;border-radius:999px;
  font-size:12.5px;font-weight:600;line-height:1.35;text-align:center;
  color:var(--tx);
  background:var(--verre-relief),hsl(var(--h) 60% 50% / .22),var(--glass);
  border:1px solid var(--line);
  -webkit-backdrop-filter:var(--verre-flou);backdrop-filter:var(--verre-flou);
  box-shadow:var(--verre-ombre),var(--verre-arete);
  opacity:0;pointer-events:none;
  transition:transform .35s cubic-bezier(.2,.9,.3,1.1),opacity .35s;
}
.bandeauMaintenance.on{transform:translateX(-50%) translateY(0);opacity:1}

.jt.flou{filter:blur(5px);user-select:none}

/* appui long sur un GIF ou une photo du carnet : le menu de l appli, pas celui du téléphone */
.msg img,.msg video,.msg .stk{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}

/* ═══ FLUIDITÉ (Z, 14/10/2026 : « l'appli n'est pas assez fluide ») ═══
   Chaque carte floutait en direct ce qui passait derrière elle (une vingtaine à l'écran), au-dessus
   de lumières qui bougent sans arrêt : le téléphone recalculait tous ces flous à chaque image.
   Le fond étant déjà flou, les cartes du contenu gardent leur verre sans refaire le flou ; seuls
   la barre du bas, les fenêtres et les messages courts le gardent. */
/* (v6.9.31) Retirer le flou des cartes faisait passer les lumières du fond PAR-DESSUS l'en-tête :
   texte délavé et halo blanc en rectangle (capture de Z, 14/10). Le flou des cartes revient ;
   on garde ce qui coûtait le plus cher et ne se voyait pas : la réfraction (filtre SVG) des cartes,
   et les lumières se figent pendant qu'on fait défiler. */
.ph.defile .light i{animation-play-state:paused}
/* la découverte d'une médaille : le cristal en 3D + un flou plein écran au-dessus des lumières qui
   bougent, c'était trop à la fois (saccades). Un voile sombre suffit. */
.reveal{-webkit-backdrop-filter:none;backdrop-filter:none;background:radial-gradient(120% 80% at 50% 45%,rgba(22,26,44,.97),rgba(6,10,20,.985))}
/* le cristal débordait de son cadre : bords coupés net et halo en carré. On fond les bords. */
.rv-med.en3d > canvas{border-radius:0;-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 58%,transparent 71%);mask-image:radial-gradient(circle at 50% 50%,#000 58%,transparent 71%)}
/* pendant la découverte, l'appli derrière n'a rien à dessiner */
.ph:has(#reveal) #sc{visibility:hidden}
.ph:has(#reveal) .light i{animation-play-state:paused}
/* la réfraction (un second flou, déformé par un filtre SVG) doublait le coût de chaque carte :
   on la garde sur la barre du bas et les fenêtres, pas sur les cartes qui défilent */
.ph.refraction #sc .g::after{content:none}

/* ======== LES RONDES, RANGÉES PAR FAMILLE ========
   Posé par jeux.js. Chaque famille a sa matière, pas seulement sa teinte :
   c'est ce qui la fait reconnaître d'un coup d'œil en faisant défiler. */

.rondesHaut{position:relative;margin:-4px -18px 14px;padding:4px 18px 18px;text-align:center}
.rondesScene{height:150px;display:grid;place-items:center;opacity:0;transition:opacity .5s ease}
.rondesScene.prete{opacity:1}
.rondesScene canvas{display:block}
.rondesTitre{font-family:'Fraunces',serif;font-weight:300;font-size:30px;letter-spacing:-.01em;margin:-6px 0 2px}
.rondesSous{font-size:12.5px;color:var(--tx2)}

/* ---- une famille ---- */
.fam{position:relative;margin:0 0 16px;padding:14px 14px 6px;border-radius:24px;isolation:isolate;
  background:var(--verre-relief),hsl(var(--fh) 60% 50% / .10),var(--glass);
  border:1px solid var(--line);
  -webkit-backdrop-filter:var(--verre-flou);backdrop-filter:var(--verre-flou);
  box-shadow:var(--verre-ombre),var(--verre-arete)}
/* le filet de couleur qui dit la famille sans rien écrire */
.fam:before{content:"";position:absolute;left:14px;right:14px;top:0;height:2px;border-radius:0 0 2px 2px;
  background:linear-gradient(90deg,transparent,hsl(var(--fh) 85% 62%),transparent);opacity:.9}

.famT{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:8px;margin:2px 2px 12px}
.famT h3{grid-column:1;font-family:'Fraunces',serif;font-weight:400;font-size:19px;letter-spacing:-.01em;
  color:var(--tx)}
.famT p{grid-column:1;font-size:12px;color:var(--tx2);line-height:1.35}
.famN{grid-column:2;grid-row:1;font-size:11px;font-weight:800;color:hsl(var(--fh) 85% 70%);
  background:hsl(var(--fh) 70% 50% / .16);border-radius:999px;padding:3px 9px}
.ph.day .famN{color:hsl(var(--fh) 70% 32%)}

/* ---- la matière propre à chaque famille ---- */
.f-velours{--fm:radial-gradient(120% 90% at 20% 0,hsl(var(--fh) 70% 48% / .22),transparent 70%)}
.f-braise {--fm:radial-gradient(100% 80% at 80% 0,hsl(var(--fh) 95% 55% / .26),transparent 68%)}
.f-onde   {--fm:repeating-linear-gradient(115deg,hsl(var(--fh) 80% 55% / .10) 0 2px,transparent 2px 14px)}
.f-papier {--fm:repeating-linear-gradient(0deg,hsl(var(--fh) 40% 60% / .09) 0 1px,transparent 1px 7px)}
.f-givre  {--fm:radial-gradient(90% 70% at 50% 0,hsl(var(--fh) 80% 70% / .18),transparent 72%)}
.f-soie   {--fm:linear-gradient(135deg,hsl(var(--fh) 80% 60% / .16),transparent 60%)}
.f-neon   {--fm:radial-gradient(70% 60% at 50% 110%,hsl(var(--fh) 95% 60% / .26),transparent 70%)}
.f-encours{--fm:radial-gradient(90% 80% at 50% 0,hsl(var(--fh) 80% 55% / .20),transparent 70%)}
.f-code   {--fm:none}
.fam:after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:var(--fm,none);pointer-events:none}

/* ---- une carte de jeu ---- */
.famJ{display:flex;flex-direction:column;gap:8px}
.jeuCarte{display:flex;align-items:center;gap:12px;width:100%;
  font:inherit;text-align:left;cursor:pointer;
  padding:9px 10px;border-radius:18px;
  background:hsl(var(--fh) 50% 50% / .07);
  border:1px solid var(--line);color:var(--tx);
  transition:transform .14s cubic-bezier(.2,.9,.3,1.3),background .2s}
.jeuCarte:active{transform:scale(.975);background:hsl(var(--fh) 60% 55% / .16)}
.jEmb{flex:0 0 auto;border-radius:14px;display:block;
  box-shadow:0 6px 14px -8px rgba(0,0,0,.65)}
.kjt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.kjn{font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.kjq{font-size:12px;color:var(--tx2);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kjch{flex:0 0 auto;color:var(--tx3);font-size:19px;line-height:1}

/* ---- rejoindre par code ---- */
.codeBoite{padding:0 2px 10px}
.codeIn{width:100%;font:inherit;font-size:24px;font-weight:700;text-align:center;
  letter-spacing:.34em;text-transform:uppercase;color:var(--tx);
  padding:13px 10px;border-radius:16px;
  background:hsl(var(--fh) 40% 50% / .10);border:1px solid var(--line)}
.codeIn::placeholder{color:var(--tx3);letter-spacing:.34em}

@media (prefers-reduced-motion:reduce){
  .jeuCarte{transition:none}
  .rondesScene{transition:none;opacity:1}
}

/* le retour de l'écran des Rondes — posé par jeux.js, par-dessus la scène */
.kjRetour{position:absolute;left:16px;top:8px;z-index:3;
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:var(--glass);border:1px solid var(--line);color:var(--tx);
  -webkit-backdrop-filter:var(--verre-flou);backdrop-filter:var(--verre-flou);
  box-shadow:var(--verre-ombre),var(--verre-arete);
  transition:transform .14s cubic-bezier(.2,.9,.3,1.3)}
.kjRetour:active{transform:scale(.9)}
.kjRetour svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

/* ======== LE MOT DU JOUR ========
   Son design : l'encre et la pierre. Fond d'ardoise, tuiles gravées, lourdes.
   Posé par jeux.js. Toutes les classes sont préfixées kj pour ne heurter
   aucune classe existante. */

.kjMot{position:relative;margin:-4px -18px 0;padding:4px 18px 0;min-height:100%;
  background:
    radial-gradient(120% 70% at 50% -10%,hsl(214 38% 24% / .55),transparent 70%),
    repeating-linear-gradient(104deg,rgba(255,255,255,.015) 0 2px,transparent 2px 9px)}
.ph.day .kjMot{background:
    radial-gradient(120% 70% at 50% -10%,hsl(38 54% 86% / .75),transparent 70%),
    repeating-linear-gradient(104deg,rgba(60,48,30,.03) 0 2px,transparent 2px 9px)}

.kjMotH{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
  padding:48px 2px 10px}
.kjMotH h2{font-family:'Fraunces',serif;font-weight:300;font-size:27px;letter-spacing:-.01em}

/* les essais restants : gros, et il rougit quand ça devient serré */
.kjRest{display:flex;align-items:center;gap:7px;flex:0 0 auto;
  padding:6px 12px;border-radius:999px;
  background:var(--glass);border:1px solid var(--line);
  -webkit-backdrop-filter:var(--verre-flou);backdrop-filter:var(--verre-flou);
  transition:background .4s,border-color .4s}
.kjRest b{font-size:23px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.kjRest span{font-size:9.5px;line-height:1.15;color:var(--tx2);text-transform:uppercase;
  letter-spacing:.06em}
.kjRest.presse{background:hsl(2 72% 48% / .20);border-color:hsl(2 80% 62% / .55)}
.kjRest.presse b{color:hsl(2 90% 72%)}
.ph.day .kjRest.presse b{color:hsl(2 72% 42%)}

/* le plateau 3D */
.kjPlateau{height:min(46vh,380px);display:grid;place-items:center;
  opacity:0;transition:opacity .45s ease}
.kjPlateau.prete{opacity:1}
.kjPlateau canvas{display:block}
/* repli sans 3D : on garde la place, l'écran reste utilisable */
.kjPlateau.kjPlat{opacity:1;min-height:120px}

/* la fin de partie : ce qui donne envie de revenir */
.kjFin{text-align:center;padding:10px 0 4px;animation:kjMonte .5s cubic-bezier(.2,.9,.3,1.2) both}
.kjFinT{font-family:'Fraunces',serif;font-size:21px;font-weight:300;margin-bottom:4px}
.kjFinT b{font-weight:600;letter-spacing:.06em}
.kjRangL{font-size:13.5px;color:var(--tx2)}
.kjRangL b{font-size:19px;color:var(--tx)}
.kjDemain{font-size:11.5px;color:var(--tx3);margin-top:6px;font-variant-numeric:tabular-nums}
@keyframes kjMonte{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* le clavier */
.kjClavier{display:flex;flex-direction:column;gap:6px;padding:10px 0 14px}
.kjClavier.fige{opacity:.45;pointer-events:none}
.kjRang{display:flex;gap:5px;justify-content:center}
.kjT{flex:1 1 0;min-width:0;height:46px;font:inherit;font-size:14.5px;font-weight:700;
  border-radius:10px;cursor:pointer;color:var(--tx);
  background:var(--glass);border:1px solid var(--line);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:transform .1s,background .25s}
.kjT:active{transform:scale(.92)}
.kjT.kjLarge{flex:1.6 1 0;font-size:11.5px;letter-spacing:.02em}
.kjT.e-bon{background:#3f7d4d;border-color:#58a268;color:#fff}
.kjT.e-ailleurs{background:#c9992b;border-color:#e3b64d;color:#241a02}
.kjT.e-absent{background:hsl(var(--h) 10% 26%);border-color:transparent;color:var(--tx3)}
.ph.day .kjT.e-absent{background:hsl(var(--h) 8% 72%);color:#5a5a62}

@media (prefers-reduced-motion:reduce){
  .kjPlateau{transition:none;opacity:1}
  .kjFin{animation:none}
  .kjT{transition:none}
}

/* ======== LA GRILLE ========
   Son design : le sable et l'ambre. Un temps qui se vide, des dés de bois clair.
   Rien n'est repris du Mot du jour. */
.kjGrille{position:relative;margin:-4px -18px 0;padding:4px 18px 0;min-height:100%;
  background:
    radial-gradient(130% 60% at 50% -8%,hsl(34 72% 52% / .22),transparent 68%),
    repeating-linear-gradient(0deg,rgba(190,140,60,.05) 0 1px,transparent 1px 6px)}

.kgChrono{display:flex;flex-direction:column;align-items:center;flex:0 0 auto;
  padding:5px 14px;border-radius:14px;
  background:hsl(34 60% 50% / .14);border:1px solid hsl(34 70% 58% / .32);
  transition:background .3s,border-color .3s,transform .2s}
.kgChrono b{font-size:25px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;
  color:hsl(34 85% 62%)}
.ph.day .kgChrono b{color:hsl(28 80% 36%)}
.kgChrono span{font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--tx2)}
.kgChrono.presse{background:hsl(2 72% 48% / .22);border-color:hsl(2 80% 60% / .6);
  animation:kgBat 1s ease-in-out infinite}
.kgChrono.presse b{color:hsl(2 92% 70%)}
.ph.day .kgChrono.presse b{color:hsl(2 74% 44%)}
@keyframes kgBat{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}

.kgPlateau{height:min(36vh,300px)}
.kgBarreF{height:5px;border-radius:99px;overflow:hidden;background:hsl(34 30% 50% / .18);
  margin:4px 2px 12px}
.kgBarre{height:100%;border-radius:99px;
  background:linear-gradient(90deg,hsl(34 90% 58%),hsl(12 88% 58%));
  transition:width 1s linear}

.kgDepart{text-align:center;padding:10px 6px 4px}
.kgDepart p{font-size:14px;color:var(--tx2);line-height:1.5;margin-bottom:14px}

.kgEntree{display:flex;gap:8px;margin-bottom:12px}
.kgSaisie{flex:1;min-width:0;font:inherit;font-size:17px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--tx);
  padding:12px 14px;border-radius:14px;
  background:hsl(34 40% 50% / .10);border:1px solid var(--line)}
.kgSaisie::placeholder{color:var(--tx3);letter-spacing:.06em;text-transform:none;font-weight:500}
.kgEntree .btn{flex:0 0 auto;padding:12px 18px}

.kgVide{font-size:12.5px;color:var(--tx3);text-align:center;padding:14px 0 20px}
.kgMots{display:flex;flex-wrap:wrap;gap:6px;padding:2px 0 18px}
.kgMot{display:inline-flex;align-items:center;gap:6px;
  font-size:13px;font-weight:700;letter-spacing:.05em;
  padding:6px 10px;border-radius:99px;
  background:hsl(34 55% 50% / .16);border:1px solid hsl(34 60% 56% / .3);
  animation:kgEntre .35s cubic-bezier(.2,.9,.3,1.3) both}
.kgMot b{font-size:10.5px;opacity:.7;font-weight:800}
/* plus le mot est long, plus il brille : on voit ses trouvailles d'un coup d'œil */
.kgMot.l6{background:hsl(34 70% 52% / .26)}
.kgMot.l7{background:hsl(28 78% 54% / .32)}
.kgMot.l8,.kgMot.l9{background:linear-gradient(135deg,hsl(34 90% 56% / .42),hsl(12 88% 56% / .36));
  border-color:hsl(34 90% 62% / .6)}
@keyframes kgEntre{from{opacity:0;transform:translateY(8px) scale(.9)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .kgChrono.presse{animation:none}
  .kgMot{animation:none}
}

/* ======================================================================
   LE RÉBUS DU JOUR — le papier et l'encre

   Rien ici ne brille : c'est le seul écran mat de l'application. Du papier
   crème, un trait bleu-nuit, des bâtons comptés à la main. Le trait s'écrit
   devant soi, et les cartes se retournent au moment du déclic.
   ====================================================================== */

.kjRebus {
  --krPapier: #f6f1e4;
  --krEncre:  #1d2b4a;
  --krPale:   #8d8674;
  padding: 58px 16px 28px;
}

.kjRebus .kjMotH h2 {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400; letter-spacing: .2px; color: var(--krEncre);
}
.kjRebus .krConsigne {
  margin: 0 0 10px; text-align: center; font-size: 14px; color: var(--krPale);
  font-family: Georgia, serif; font-style: italic;
}

/* les bâtons d'essais, dans l'en-tête */
.krBatons { display: flex; gap: 7px; align-items: flex-end; }
.krB {
  display: block; width: 3px; height: 20px; border-radius: 2px;
  background: var(--krEncre); opacity: .72; transform: rotate(-7deg);
  transition: opacity .25s;
}
.krB.use { opacity: .18; position: relative; }
.krB.use::after {
  content: ''; position: absolute; left: -7px; top: 9px; width: 17px; height: 2px;
  background: var(--krEncre); opacity: .6; transform: rotate(-22deg); border-radius: 2px;
}

/* la suite de dessins */
/* la feuille : une page de carnet, lignée, avec sa marge. Tout le jeu se passe
   dessus — c'est elle qui fait que cet écran n'est pas comme les autres. */
.krFeuille {
  background:
    linear-gradient(90deg, transparent 0 32px, rgba(190,70,70,.30) 32px 33.5px, transparent 33.5px),
    repeating-linear-gradient(180deg, transparent 0 29px, rgba(29,43,74,.11) 29px 30px),
    var(--krPapier);
  border-radius: 3px;
  padding: 16px 14px 20px;
  box-shadow: 0 1px 0 rgba(255,255,255,.5), 0 14px 30px -18px rgba(20,25,40,.6);
  margin: 4px 0 16px;
}
.krSuite {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px; margin: 6px 0 16px;
}
.krPlus {
  font-family: Georgia, serif; font-size: 30px; line-height: 1;
  color: var(--krEncre); opacity: .5;
}

.krC { perspective: 800px; width: 126px; }
.krF {
  position: relative; width: 126px; height: 126px;
  transform: rotate(var(--b)) translateY(6px); opacity: 0;
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.2,.9,.3,1), opacity .4s;
}
.krC.tracee .krF { transform: rotate(var(--b)); opacity: 1; }
.krC.tourne .krF { transform: rotate(var(--b)) rotateY(180deg); }

.krAv, .krAr {
  position: absolute; inset: 0; border-radius: 4px;
  background: #fffdf6;
  box-shadow: 0 1px 0 rgba(0,0,0,.10), 0 8px 16px -10px rgba(20,25,40,.55);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(29,43,74,.14);
}
.krAr {
  transform: rotateY(180deg);
  font-family: Georgia, serif; font-size: 22px; color: var(--krEncre);
}

.krAv svg { width: 100%; height: 100%; padding: 12px; box-sizing: border-box; color: var(--krEncre); }
.krAv svg path, .krAv svg circle, .krAv svg ellipse, .krAv svg rect {
  fill: none; stroke: currentColor; stroke-width: 3.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.krAv svg [fill="currentColor"] { fill: currentColor; stroke: none; stroke-dasharray: none; }

/* le trait s'écrit : on le fait courir au lieu de l'afficher d'un bloc */
.krAv svg path, .krAv svg circle, .krAv svg ellipse {
  stroke-dasharray: 700; stroke-dashoffset: 700;
}
.krC.tracee .krAv svg path,
.krC.tracee .krAv svg circle,
.krC.tracee .krAv svg ellipse { animation: krTrait .85s ease forwards; }
@keyframes krTrait { to { stroke-dashoffset: 0; } }

.krL {
  margin: 7px 0 0; text-align: center; font-size: 11px; letter-spacing: .3px;
  color: var(--krPale); opacity: 0; transition: opacity .4s .5s;
}
.krC.tracee .krL { opacity: 1; }

.krSuite.krNon { animation: krNon .42s ease; }
@keyframes krNon {
  0%,100% { transform: translateX(0); }
  22% { transform: translateX(-8px); } 46% { transform: translateX(7px); }
  72% { transform: translateX(-4px); }
}

/* les cases : autant que de lettres */
.krCases { display: flex; gap: 6px; justify-content: center; margin: 0; flex-wrap: wrap; }
.krCases i { width: 17px; height: 2px; background: var(--krEncre); opacity: .34; border-radius: 2px; }

.krEntree { display: flex; gap: 8px; margin: 0 0 14px; }
.krSaisie {
  flex: 1; min-width: 0; border: 0; border-bottom: 2px solid rgba(29,43,74,.28);
  background: transparent; padding: 10px 2px; font-size: 17px;
  font-family: Georgia, serif; color: var(--krEncre); border-radius: 0;
}
.krSaisie:focus { outline: none; border-bottom-color: var(--krEncre); }
.krSaisie::placeholder { color: var(--krPale); font-style: italic; }

.krEssais { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.krEssais li {
  font-family: Georgia, serif; font-size: 13px; color: var(--krPale);
  text-decoration: line-through; text-decoration-color: rgba(29,43,74,.45);
  padding: 3px 9px; border: 1px solid rgba(29,43,74,.16); border-radius: 12px;
}

.krFin { text-align: center; opacity: 0; transform: translateY(8px); }
.krFin.vient, #krBas.vient .krFin { opacity: 1; transform: none; transition: opacity .5s, transform .5s; }
.krVerdict { margin: 4px 0; font-size: 13px; color: var(--krPale); letter-spacing: .4px; }
.krRep {
  margin: 0; font-family: Georgia, serif; font-size: 34px; color: var(--krEncre);
  letter-spacing: 1px;
}
.krLecture { margin: 6px 0 0; font-family: Georgia, serif; font-style: italic; color: var(--krPale); }
.krGain { margin: 10px 0 0; font-size: 20px; color: var(--krEncre); font-weight: 600; }
.krDemain { margin: 14px 0 0; font-size: 12px; color: var(--krPale); }

@media (prefers-reduced-motion: reduce) {
  .krF, .krL { transition: none; }
  .krC .krF { opacity: 1; }
  .krAv svg path, .krAv svg circle, .krAv svg ellipse { stroke-dashoffset: 0; animation: none; }
  .krSuite.krNon { animation: none; }
}

/* ======================================================================
   LE PENDU DU JOUR — la craie sur l'ardoise

   Le tableau de la classe : vert-noir, trait blanc poussiéreux, lettres
   tracées à la main. La potence, elle, est en bois : c'est le seul objet
   vrai de l'écran, et c'est lui qui fait peur.
   ====================================================================== */

.kjPendu {
  --kpArd:   #22302a;
  --kpCraie: #eef3ec;
  --kpPoudre: rgba(238,243,236,.52);
  padding: 58px 14px 28px;
}

/* l'ardoise : un seul panneau qui tient tout le jeu — en-tête comprise. */
.kpArdoise {
  background: linear-gradient(160deg, #27362f, #1c2823 60%, #243129);
  border-radius: 12px;
  box-shadow: inset 0 0 44px rgba(0,0,0,.45), 0 12px 30px -16px rgba(0,0,0,.7);
  padding: 12px 10px 14px;
}
.kjPendu .kjPlateau { height: 252px; margin: 0; background: none; box-shadow: none; }
.kjPendu #kpMotZ { padding: 2px 4px 12px; }
.kjPendu #kpClavZ { padding: 0 2px; }

.kjPendu .kjMotH { text-shadow: none; padding: 0 2px; }
.kjPendu .kjMotH h2 { color: var(--kpCraie); text-shadow: 0 0 10px rgba(238,243,236,.25); }
.kjPendu .kjRetour { background: rgba(238,243,236,.14); border-color: rgba(238,243,236,.3); }
.kjPendu .kjRetour svg { stroke: var(--kpCraie); }

/* le compte des erreurs restantes, à la craie */
.kpVies { text-align: right; color: var(--kpPoudre); line-height: 1.1; }
.kpVies b {
  display: block; font-size: 26px; color: var(--kpCraie);
  font-family: Georgia, serif; font-weight: 400;
}
.kpVies span { font-size: 10px; letter-spacing: .6px; text-transform: uppercase; }
.kpVies.court b { color: #ffb4a0; }

/* le mot : des traits de craie, et la lettre qui s'y pose */
.kpMot {
  display: flex; flex-wrap: wrap; gap: 9px; justify-content: center;
  padding: 14px 0 8px;
}
.kpL {
  width: 26px; min-height: 34px; display: flex; align-items: center; justify-content: center;
  border-bottom: 3px solid var(--kpPoudre); border-radius: 1px;
  font-family: Georgia, serif; font-size: 25px; color: var(--kpCraie);
}
.kpL.vu { animation: kpPose .34s ease; text-shadow: 0 0 12px rgba(238,243,236,.45); }
@keyframes kpPose {
  from { opacity: 0; transform: translateY(-8px) rotate(-6deg); }
  to   { opacity: 1; transform: none; }
}

/* le clavier de craie */
.kpClav {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
}
.kpT {
  appearance: none; border: 1.5px solid var(--kpPoudre); background: transparent;
  color: var(--kpCraie); font-family: Georgia, serif; font-size: 17px;
  padding: 9px 0; border-radius: 6px; cursor: pointer;
  transition: transform .12s, opacity .2s, border-color .2s;
}
.kpT:active { transform: scale(.92); }
.kpT.bon { border-color: rgba(150,230,170,.75); color: #b9f0c6; opacity: .85; }
.kpT.rate {
  border-color: rgba(255,140,120,.5); color: rgba(255,170,155,.6);
  position: relative; opacity: .7;
}
.kpT.rate::after {
  content: ''; position: absolute; left: 14%; right: 14%; top: 50%; height: 2px;
  background: rgba(255,170,155,.75); transform: rotate(-16deg); border-radius: 2px;
}
.kpT[disabled] { cursor: default; }

.kjPendu.kpNon { animation: kpNon .4s ease; }
@keyframes kpNon {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-6px); } 55% { transform: translateX(5px); }
  80% { transform: translateX(-3px); }
}

.kpFin { text-align: center; margin-top: 16px; opacity: 0; transform: translateY(8px); }
#kpBas.vient .kpFin { opacity: 1; transform: none; transition: opacity .5s, transform .5s; }
.kpVerdict { margin: 0 0 4px; font-size: 13px; color: var(--c2, #6b6b78); letter-spacing: .4px; }
.kpRep { margin: 0; font-family: Georgia, serif; font-size: 32px; letter-spacing: 3px; }
.kpCout { margin: 6px 0 0; font-size: 13px; color: var(--c2, #6b6b78); }
.kpGain { margin: 10px 0 0; font-size: 20px; font-weight: 600; }
.kpDemain { margin: 14px 0 0; font-size: 12px; color: var(--c2, #6b6b78); }

@media (prefers-reduced-motion: reduce) {
  .kpL.vu, .kjPendu.kpNon { animation: none; }
  #kpBas .kpFin { opacity: 1; transform: none; }
}

/* ======================================================================
   LA SUITE DU JOUR — la nuit et le néon

   On monte : le fond s'éclaircit vers le haut, et l'échelle sur le côté
   montre où on en est. Les nombres sont du métal qui s'allume. Rien du
   bois de la grille, du papier du rébus ni de la craie du pendu.
   ====================================================================== */

.kjSuite.fini { padding-bottom: 110px; }
.kjSuite {
  --qsNuit: #0d1426;
  --qsClair: #cfe6ff;
  --qsNeon: #7fe3ff;
  padding: 58px 16px 28px;
  position: relative;
}

.kjSuite .kjPlateau {
  height: 300px; margin: 4px 0 18px; border-radius: 14px;
  background: linear-gradient(180deg, #2b4b78 0%, #16243f 52%, #0a0f1d 100%);
  box-shadow: inset 0 0 60px rgba(0,0,0,.55), 0 14px 34px -20px rgba(8,12,24,.8);
}

.qsPalier { text-align: right; line-height: 1.05; }
.qsPalier b {
  display: block; font-size: 30px; font-weight: 600;
  color: var(--c, #1a1a22);
}
.qsPalier span { font-size: 10px; letter-spacing: .7px; text-transform: uppercase; color: var(--c2, #6b6b78); }

/* l'échelle : les barreaux déjà pris restent allumés */
/* posée DANS la nuit, le long de l'escalier : c'est une jauge de hauteur,
   pas une décoration d'en-tête. Collée à l'en-tête elle passait par-dessus
   le « sur 5 ». */
.qsEchelle {
  position: absolute; right: 30px; top: 252px;
  display: flex; flex-direction: column; gap: 8px; z-index: 2;
}
.qsE {
  display: block; width: 22px; height: 3px; border-radius: 2px;
  background: rgba(255,255,255,.28);
}
.qsE.pris { background: var(--qsNeon); box-shadow: 0 0 10px rgba(127,227,255,.75); }
.qsE.ici {
  background: #fff; width: 30px;
  box-shadow: 0 0 14px rgba(255,255,255,.8);
  animation: qsIci 1.6s ease-in-out infinite;
}
@keyframes qsIci { 0%,100% { opacity: 1; } 50% { opacity: .45; } }

.qsEntree { display: flex; gap: 8px; margin: 0 0 12px; }
.qsSaisie {
  flex: 1; min-width: 0; border: 0; border-bottom: 2px solid rgba(90,120,170,.45);
  background: transparent; padding: 11px 2px; font-size: 22px;
  font-variant-numeric: tabular-nums; letter-spacing: 1px;
  color: var(--c, #1a1a22); border-radius: 0;
}
.qsSaisie:focus { outline: none; border-bottom-color: #3f7fd0; }

/* les essais du palier : des points qu'on dépense */
.qsEssais { display: flex; gap: 7px; justify-content: center; }
.qsEssais i {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(90,120,170,.35);
}
.qsEssais i.use { background: #d0567a; box-shadow: 0 0 8px rgba(208,86,122,.6); }

/* le corrigé : la récompense, et la seule façon d'apprendre quelque chose */
.qsFin { margin-top: 4px; }
.qsVerdict { margin: 0 0 2px; font-size: 16px; }
.qsGain { margin: 0 0 14px; font-size: 22px; font-weight: 600; }
.qsCorrige { display: flex; flex-direction: column; gap: 8px; }
.qsLigne {
  display: grid; grid-template-columns: 26px 1fr; gap: 4px 10px;
  padding: 10px 12px; border-radius: 10px;
  background: rgba(130,150,190,.10); border: 1px solid rgba(130,150,190,.18);
}
.qsLigne.ok { border-color: rgba(127,227,255,.5); background: rgba(127,227,255,.10); }
.qsNum {
  grid-row: 1 / span 2; align-self: center; text-align: center;
  font-size: 16px; font-weight: 600; opacity: .55;
}
.qsSuite { font-variant-numeric: tabular-nums; font-size: 15px; }
.qsSuite b { font-weight: 700; }
.qsRegle { font-size: 12px; color: var(--c2, #6b6b78); line-height: 1.35; }
.qsDemain { margin: 16px 0 0; font-size: 12px; color: var(--c2, #6b6b78); text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .qsE.ici { animation: none; }
}

/* ======================================================================
   LE JUSTE PRIX — l'étiquette et le carton

   Kraft, laiton, rouge de marché, chiffres de caisse. La réglette graduée
   occupe le milieu : c'est l'espace des prix possibles, et on le voit
   fondre. Rien de la nuit de la suite ni de l'ardoise du pendu.
   ====================================================================== */

.kjPrix {
  --jpKraft: #e3d3b4;
  --jpEncre: #4a3620;
  --jpRouge: #c8362f;
  padding: 58px 16px 28px;
}

/* les essais qu'il te reste : des jetons de caisse */
.jpJetons { display: flex; gap: 6px; justify-content: flex-end; }
.jpJetons i {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--jpRouge); box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.jpJetons i.use { background: rgba(120,100,70,.26); box-shadow: none; }

/* l'étiquette : du carton, un œillet, et l'objet écrit dessus */
.jpEtiquette {
  position: relative; margin: 6px 0 10px; padding: 18px 18px 16px 34px;
  background: linear-gradient(170deg, #efe1c4, var(--jpKraft));
  border-radius: 4px 14px 14px 4px;
  box-shadow: 0 1px 0 rgba(255,255,255,.5), 0 12px 26px -18px rgba(60,40,15,.75);
}
.jpEtiquette::before {
  content: ''; position: absolute; left: 13px; top: 50%; width: 11px; height: 11px;
  margin-top: -5.5px; border-radius: 50%;
  background: #fff; box-shadow: inset 0 0 0 2px rgba(90,65,30,.45);
}
.jpQuoi {
  margin: 0; font-size: 19px; line-height: 1.3; color: var(--jpEncre);
  font-family: Georgia, serif;
}
.jpPlage {
  margin: 6px 0 0; font-size: 12px; letter-spacing: .5px;
  color: rgba(74,54,32,.65); text-transform: uppercase;
}

.kjPrix .kjPlateau {
  height: 152px; margin: 0 0 14px;
  background: radial-gradient(120% 90% at 50% 20%, rgba(255,245,225,.55), rgba(220,200,165,.10));
  border-radius: 12px;
}

.jpEntree { display: flex; gap: 8px; margin: 0 0 12px; }
.jpChamp {
  flex: 1 1 0; min-width: 0; display: flex; align-items: baseline; gap: 4px;
  border-bottom: 2px solid rgba(120,90,45,.4);
}
/* sans ce flex: 0 0 auto, le champ prenait toute la largeur et le bouton
   « Proposer » sortait de l'écran par la droite. */
.jpEntree .btn { flex: 0 0 auto; padding: 12px 18px; white-space: nowrap; }
.jpChamp span { font-size: 20px; color: rgba(74,54,32,.7); }
.jpSaisie {
  flex: 1; min-width: 0; border: 0; background: transparent; border-radius: 0;
  padding: 9px 2px; font-size: 27px; font-variant-numeric: tabular-nums;
  letter-spacing: 1px; color: var(--jpEncre); font-weight: 600;
}
.jpSaisie:focus { outline: none; }
.jpSaisie::placeholder { color: rgba(74,54,32,.30); font-weight: 400; }

.jpEssais { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.jpEssais li {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 13px; border-radius: 9px;
  background: rgba(180,150,100,.14); border: 1px solid rgba(140,110,60,.2);
  font-variant-numeric: tabular-nums;
}
.jpEssais b { font-size: 17px; }
.jpH { color: #a8541a; font-size: 13px; }
.jpB { color: #2b6ea8; font-size: 13px; }
.jpOk { color: #1f8a53; font-size: 15px; }

.jpFin { text-align: center; opacity: 0; transform: translateY(8px); }
#jpBas.vient .jpFin { opacity: 1; transform: none; transition: opacity .5s, transform .5s; }
.jpVerdict { margin: 4px 0 2px; font-size: 13px; color: var(--c2, #6b6b78); letter-spacing: .4px; }
.jpPrix {
  margin: 0; font-size: 42px; font-weight: 700; color: var(--jpRouge);
  font-variant-numeric: tabular-nums; letter-spacing: -1px;
}
.jpLoin { margin: 4px 0 0; font-size: 14px; color: var(--c2, #6b6b78); }
.jpGain { margin: 10px 0 0; font-size: 20px; font-weight: 600; }
.jpDemain { margin: 14px 0 0; font-size: 12px; color: var(--c2, #6b6b78); }

/* ======================================================================
   L'ÉCART DU JOUR — l'instrument de mesure

   Cadran ivoire, biseau d'acier, aiguille noire, trace rouge. Le juste
   prix avait une règle de laiton ; ici c'est un cadran, et il ne sert pas
   à gagner mais à voir de combien on s'est trompé.
   ====================================================================== */

.kjEcart {
  --ecAcier: #5c6675;
  --ecRouge: #d63a2e;
  padding: 58px 16px 28px;
}

.ecUn {
  text-align: right; font-size: 11px; line-height: 1.25;
  letter-spacing: .7px; text-transform: uppercase; color: var(--c2, #6b6b78);
}

.ecQuestion {
  margin: 8px 0 6px; font-size: 21px; line-height: 1.35;
  font-family: Georgia, serif; color: var(--c, #1a1a22);
}

.kjEcart .kjPlateau {
  height: 280px; margin: 0 0 14px;
  background: radial-gradient(70% 60% at 50% 42%, rgba(255,255,255,.55), rgba(140,160,185,.08));
  border-radius: 16px;
}

.ecEntree { display: flex; gap: 8px; margin: 0 0 12px; }
.ecChamp {
  flex: 1 1 0; min-width: 0; display: flex; align-items: baseline; gap: 6px;
  border-bottom: 2px solid rgba(92,102,117,.4);
}
.ecChamp span { font-size: 15px; color: var(--c2, #6b6b78); }
.ecSaisie {
  flex: 1; min-width: 0; border: 0; background: transparent; border-radius: 0;
  padding: 9px 2px; font-size: 27px; font-variant-numeric: tabular-nums;
  letter-spacing: 1px; font-weight: 600; color: var(--c, #1a1a22);
}
.ecSaisie:focus { outline: none; }
.ecSaisie::placeholder { color: rgba(92,102,117,.3); font-weight: 400; }
.ecEntree .btn { flex: 0 0 auto; padding: 12px 18px; white-space: nowrap; }

.ecFin { opacity: 0; transform: translateY(8px); text-align: center; }
#ecBas.vient .ecFin { opacity: 1; transform: none; transition: opacity .5s, transform .5s; }
.ecDeux { display: flex; gap: 10px; }
.ecCol {
  flex: 1; padding: 12px 10px; border-radius: 12px;
  background: rgba(120,140,170,.12); border: 1px solid rgba(120,140,170,.2);
}
.ecCol span { display: block; font-size: 11px; letter-spacing: .5px; text-transform: uppercase;
  color: var(--c2, #6b6b78); margin-bottom: 4px; }
.ecCol b { font-size: 24px; font-variant-numeric: tabular-nums; }
.ecCol.vrai { border-color: rgba(214,58,46,.45); background: rgba(214,58,46,.10); }
.ecCol.vrai b { color: var(--ecRouge); }
.ecEcart { margin: 14px 0 0; font-size: 16px; }
.ecEcart b { font-size: 21px; font-variant-numeric: tabular-nums; }
.ecPoints { margin: 8px 0 0; font-size: 20px; font-weight: 600; }
.ecDemain { margin: 14px 0 0; font-size: 12px; color: var(--c2, #6b6b78); }

/* ======================================================================
   LE TOP 10 — le tableau de gare

   Dix volets noirs, caractères blancs, un numéro jaune. On ne lit pas une
   liste : on regarde un panneau s'ouvrir, ligne par ligne. Rien du cadran
   de l'écart ni de l'étiquette du juste prix.
   ====================================================================== */

.kjTop {
  --txOr: #e8b63c;
  padding: 58px 16px 28px;
}

.txCompte { text-align: right; line-height: 1.05; }
.txCompte b { display: block; font-size: 28px; font-weight: 700; }
.txCompte span { font-size: 10px; letter-spacing: .7px; text-transform: uppercase; color: var(--c2, #6b6b78); }

.txQuestion {
  margin: 8px 0 10px; font-size: 20px; line-height: 1.35;
  font-family: Georgia, serif; color: var(--c, #1a1a22);
}

.kjTop .kjPlateau {
  height: 360px; margin: 0 0 14px; border-radius: 12px;
  background: linear-gradient(180deg, #2a2e36, #15181d);
  box-shadow: inset 0 0 40px rgba(0,0,0,.5), 0 12px 30px -18px rgba(0,0,0,.7);
}

.txEntree { display: flex; gap: 8px; margin: 0 0 12px; }
.txSaisie {
  flex: 1 1 0; min-width: 0; font: inherit; font-size: 17px;
  padding: 12px 14px; border-radius: 14px;
  background: rgba(130,145,170,.12); border: 1px solid rgba(130,145,170,.28);
  color: var(--c, #1a1a22);
}
.txSaisie:focus { outline: none; border-color: rgba(232,182,60,.7); }
.txEntree .btn { flex: 0 0 auto; padding: 12px 18px; white-space: nowrap; }
.txEntree.txNon { animation: txNon .4s ease; }
@keyframes txNon {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-6px); } 55% { transform: translateX(5px); }
  80% { transform: translateX(-3px); }
}

.txNote { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--c2, #6b6b78); }
.txFin { text-align: center; }
.txVerdict { margin: 4px 0 0; font-size: 18px; }
.txDemain { margin: 10px 0 0; font-size: 12px; color: var(--c2, #6b6b78); }

@media (prefers-reduced-motion: reduce) { .txEntree.txNon { animation: none; } }

/* ======================================================================
   LE DÉMINEUR DU JOUR — le terrain et le béton

   Les cases fermées sont des plots en relief ; ouvertes, elles s'enfoncent.
   La grille se lit au relief avant de se lire aux chiffres. Gris-vert de
   terrain, drapeaux rouges, chiffres peints.
   ====================================================================== */

.kjMine { padding: 58px 14px 28px; }

.dmHaut { display: flex; align-items: baseline; gap: 12px; justify-content: flex-end; }
.dmMines { font-size: 15px; font-weight: 600; color: #c0392b; }
.dmMines i { font-style: normal; font-size: 10px; letter-spacing: .6px;
  text-transform: uppercase; color: var(--c2, #6b6b78); }
.dmHaut b { font-size: 24px; font-variant-numeric: tabular-nums; font-weight: 600; }

.kjMine .kjPlateau {
  height: 400px; margin: 6px 0 14px; border-radius: 14px;
  background: linear-gradient(170deg, #ced7cd, #a8b4ac 60%, #8d9a93);
  box-shadow: inset 0 0 50px rgba(40,55,45,.35), 0 12px 30px -18px rgba(30,45,35,.7);
  touch-action: manipulation;
}

.dmNote { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--c2, #6b6b78); text-align: center; }
.dmFin { text-align: center; }
.dmVerdict { margin: 2px 0 0; font-size: 22px; font-family: Georgia, serif; }
.dmFin.bon .dmVerdict { color: #1f8a53; }
.dmTemps { margin: 4px 0 0; font-size: 34px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dmCompte { margin: 6px 0 0; font-size: 13px; color: var(--c2, #6b6b78); }
.dmGain { margin: 10px 0 0; font-size: 20px; font-weight: 600; }
.dmDemain { margin: 14px 0 0; font-size: 12px; color: var(--c2, #6b6b78); }

/* ======================================================================
   LE SIMON — l'instrument dans le noir

   Des lames de verre coloré qui s'allument de l'intérieur. C'est le seul
   écran où la lumière est le message : tout le reste est éteint. À
   l'opposé du terrain mat du démineur.
   ====================================================================== */

.kjSimon { padding: 58px 16px 28px; }

.siManche { text-align: right; line-height: 1.05; }
.siManche b { display: block; font-size: 30px; font-weight: 700; }
.siManche span { font-size: 10px; letter-spacing: .7px; text-transform: uppercase;
  color: var(--c2, #6b6b78); }

.siDit {
  margin: 6px 0 6px; text-align: center; font-size: 15px; letter-spacing: .4px;
  color: var(--c2, #6b6b78); min-height: 20px;
}

.kjSimon .kjPlateau {
  height: 340px; margin: 0 0 14px; border-radius: 16px;
  background: radial-gradient(90% 70% at 50% 34%, #1d2540, #0a0d16 72%, #05070c);
  box-shadow: inset 0 0 60px rgba(0,0,0,.7), 0 14px 34px -20px rgba(5,8,16,.9);
  touch-action: manipulation;
}

.siDepart { margin: 0 0 16px; }

.siBas { display: flex; flex-direction: column; gap: 8px; }
.siLigne {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 11px 14px; border-radius: 12px;
  background: rgba(120,140,190,.10); border: 1px solid rgba(120,140,190,.18);
}
.siLigne span { font-size: 13px; color: var(--c2, #6b6b78); }
.siLigne b { font-size: 20px; font-variant-numeric: tabular-nums; }
.siLot { margin: 8px 0 0; font-size: 13px; }
.siNote { margin: 4px 0 0; font-size: 12px; color: var(--c2, #6b6b78); line-height: 1.45; }

/* ======================================================================
   LE COMPTE EST BON — le plateau

   Bordeaux profond, plaques de bakélite crème, chiffres noirs en serif.
   La nuit au néon de La suite était du métal froid ; ici c'est chaud, et
   ça claque.
   ====================================================================== */

.kjCompte {
  --cbRouge: #6b1f2a;
  --cbCreme: #eadfc6;
  padding: 58px 16px 28px;
}

.cbHaut { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.cbCible { display: flex; flex-direction: column; align-items: flex-end; line-height: 1; }
.cbCible i { font-style: normal; font-size: 10px; letter-spacing: .8px;
  text-transform: uppercase; color: var(--c2, #6b6b78); margin-bottom: 3px; }
.cbCible b { font-size: 34px; font-weight: 700; color: var(--cbRouge); font-family: Georgia, serif; }
.cbEssais { font-size: 11px; letter-spacing: .5px; text-transform: uppercase; color: var(--c2, #6b6b78); }

.kjCompte .kjPlateau {
  height: 252px; margin: 6px 0 12px; border-radius: 14px;
  background: radial-gradient(95% 80% at 50% 28%, #8d2a38, #5a1823 62%, #3b0f18);
  box-shadow: inset 0 0 60px rgba(30,5,10,.6), 0 12px 32px -18px rgba(50,10,20,.8);
  touch-action: manipulation;
}

.cbSignes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 0 12px; }
.cbS {
  appearance: none; border: 1px solid rgba(107,31,42,.3); background: rgba(107,31,42,.08);
  color: var(--cbRouge); font-size: 24px; font-family: Georgia, serif;
  padding: 10px 0; border-radius: 12px; cursor: pointer; transition: transform .12s, background .2s;
}
.cbS:active { transform: scale(.93); }
.cbS.pris { background: var(--cbRouge); color: #f6efdf; border-color: var(--cbRouge); }

.cbEtat {
  display: flex; align-items: baseline; gap: 10px; justify-content: center;
  min-height: 42px; margin: 0 0 12px;
}
.cbRien { font-size: 26px; color: var(--c2, #6b6b78); }
.cbVal { font-size: 34px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cbVal.pile { color: #1f8a53; }
.cbEc { font-size: 13px; color: var(--c2, #6b6b78); }

.cbActions { display: flex; gap: 8px; margin: 0 0 12px; }
.cbActions .btn { flex: 1; }
.cbActions .btn[disabled] { opacity: .45; }

.cbVide { margin: 0; font-size: 12.5px; color: var(--c2, #6b6b78); text-align: center; line-height: 1.5; }
.cbCoups { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cbCoups li {
  padding: 9px 13px; border-radius: 10px; font-variant-numeric: tabular-nums; font-size: 15px;
  background: rgba(107,31,42,.08); border: 1px solid rgba(107,31,42,.16);
}

.cbMieux { margin: 14px 0 0; font-size: 13px; color: var(--c2, #6b6b78); text-align: center; }
.cbFini { text-align: center; margin-top: 14px; }
.cbVerdict { margin: 0; font-size: 19px; font-family: Georgia, serif; }
.cbRes { margin: 4px 0 0; font-size: 40px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cbLoin { margin: 2px 0 0; font-size: 13px; color: var(--c2, #6b6b78); }
.cbGain { margin: 10px 0 0; font-size: 20px; font-weight: 600; }
.cbDemain { margin: 14px 0 0; font-size: 12px; color: var(--c2, #6b6b78); }

/* ======================================================================
   L'ÉNIGME DU JOUR — la nuit et la flamme

   Une seule source de lumière : la bougie. Elle raccourcit à chaque indice
   pris, et l'énoncé est posé dans son halo. Rien du plateau rouge du
   compte est bon ni du terrain du démineur.
   ====================================================================== */

.kjEnigme {
  --egAmbre: #ffb45a;
  padding: 58px 16px 28px;
}

.egReste { text-align: right; line-height: 1.05; }
.egReste b { display: block; font-size: 28px; font-weight: 700; }
.egReste span { font-size: 10px; letter-spacing: .7px; text-transform: uppercase;
  color: var(--c2, #6b6b78); }

.egNiveau {
  margin: 4px 0 8px; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--c2, #6b6b78);
}

/* la nuit : le cadre qui tient la bougie ET l'énoncé, parce que l'énoncé
   doit être DANS la lumière, pas à côté. */
.egScene {
  border-radius: 16px; overflow: hidden; margin: 0 0 14px;
  background: radial-gradient(70% 55% at 50% 30%, #1d2a44, #0b1120 72%, #05070e);
  box-shadow: inset 0 0 70px rgba(0,0,0,.7), 0 14px 34px -20px rgba(5,8,16,.9);
  padding-bottom: 18px;
}
.kjEnigme .kjPlateau { height: 260px; margin: 0; }
.egEnonce {
  margin: 0 20px; font-family: Georgia, serif; font-size: 18px; line-height: 1.5;
  color: #f2e4cb; text-align: center; text-shadow: 0 0 24px rgba(255,180,90,.3);
}

.egEntree { display: flex; gap: 8px; margin: 0 0 12px; }
.egSaisie {
  flex: 1 1 0; min-width: 0; font: inherit; font-size: 16px;
  padding: 12px 14px; border-radius: 14px;
  background: rgba(255,180,90,.09); border: 1px solid rgba(255,180,90,.28);
  color: var(--c, #1a1a22);
}
.egSaisie:focus { outline: none; border-color: rgba(255,180,90,.7); }
.egEntree .btn { flex: 0 0 auto; padding: 12px 18px; white-space: nowrap; }

.egI { width: 100%; }
.egI span { opacity: .7; font-size: 12px; }
.egPlus { margin: 0; font-size: 12.5px; color: var(--c2, #6b6b78); text-align: center; }
.egVus { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.egVus li {
  padding: 11px 14px; border-radius: 12px; font-size: 14.5px; line-height: 1.45;
  background: rgba(255,180,90,.10); border: 1px solid rgba(255,180,90,.22);
}
.egVus i {
  display: block; font-style: normal; font-size: 10px; letter-spacing: .7px;
  text-transform: uppercase; color: var(--c2, #6b6b78); margin-bottom: 3px;
}

.egEssais { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.egEssais li {
  font-size: 13px; padding: 4px 10px; border-radius: 12px; color: var(--c2, #6b6b78);
  border: 1px solid rgba(130,130,150,.22); text-decoration: line-through;
}

.egFin { text-align: center; margin-top: 16px; opacity: 0; transform: translateY(8px); }
#egBas.vient .egFin { opacity: 1; transform: none; transition: opacity .5s, transform .5s; }
.egVerdict { margin: 0 0 2px; font-size: 13px; color: var(--c2, #6b6b78); letter-spacing: .4px; }
.egRep { margin: 0; font-family: Georgia, serif; font-size: 28px; }
.egExp { margin: 10px 0 0; font-size: 14.5px; line-height: 1.5; text-align: left; }
.egGain { margin: 10px 0 0; font-size: 20px; font-weight: 600; }
.egDemain { margin: 14px 0 0; font-size: 12px; color: var(--c2, #6b6b78); }

/* ======================================================================
   L'ÉCHELLE DES ÉNIGMES — la tour de pierre

   L'énigme du jour est une bougie sur une table ; ici on est debout dans
   un escalier. Gris chaud, portes de bois cerclé, une torche qui n'éclaire
   que le palier où on se tient.
   ====================================================================== */

.kjEchelle { padding: 58px 16px 28px; }

.ehOu { text-align: right; line-height: 1.05; }
.ehOu b { display: block; font-size: 30px; font-weight: 700; }
.ehOu span { font-size: 10px; letter-spacing: .7px; text-transform: uppercase;
  color: var(--c2, #6b6b78); }

.ehNom {
  margin: 4px 0 8px; font-family: Georgia, serif; font-size: 19px;
}
.ehPaliers { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.ehP {
  min-width: 30px; text-align: center;
  font-size: 12px; font-weight: 600; padding: 4px 0; border-radius: 10px;
  border: 1px solid rgba(140,130,110,.3); color: var(--c2, #6b6b78);
}
.ehP.pris { background: rgba(190,150,80,.18); border-color: rgba(190,150,80,.4); color: #8a6420; }
.ehP.ici { background: #6b4a2c; border-color: #6b4a2c; color: #f6ecd8; }

.kjEchelle .kjPlateau {
  height: 260px; margin: 0 0 12px; border-radius: 14px;
  background: linear-gradient(180deg, #2a2620, #141210);
  box-shadow: inset 0 0 50px rgba(0,0,0,.6), 0 12px 30px -18px rgba(20,15,10,.8);
}

.ehAvance { margin: 0 0 14px; }
.ehBarreF { height: 7px; border-radius: 99px; background: rgba(140,130,110,.2); overflow: hidden; }
.ehBarre { height: 100%; background: linear-gradient(90deg, #b98a3a, #e3b45c); border-radius: 99px;
  transition: width .5s ease; }
.ehAvance p { margin: 6px 0 0; font-size: 12px; color: var(--c2, #6b6b78); }

.ehEnonce { margin: 0 0 12px; font-family: Georgia, serif; font-size: 18px; line-height: 1.5; }
.ehEntree { display: flex; gap: 8px; margin: 0 0 12px; }
.ehEntree .btn { flex: 0 0 auto; padding: 12px 18px; white-space: nowrap; }
.ehRien { margin: 0; font-size: 14px; line-height: 1.5; text-align: center; color: var(--c2, #6b6b78); }

#ehBas .egFin { opacity: 0; transform: translateY(8px); }
#ehBas.vient .egFin { opacity: 1; transform: none; transition: opacity .5s, transform .5s; }

/* ======================================================================
   LE CHOIX DU PARTENAIRE — commun aux sept jeux « À deux »

   Un écran ouvert sans lien ne montre pas une erreur : il montre avec qui
   on peut jouer.
   ====================================================================== */
.kjChoix { padding: 4px 0 8px; }
.kjChoixT { margin: 0 0 10px; font-size: 13px; letter-spacing: .5px;
  text-transform: uppercase; color: var(--c2, #6b6b78); }
.kjChoixV { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--c2, #6b6b78); }
.kjQui {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 14px; margin-bottom: 8px; border-radius: 14px;
  background: rgba(130,140,180,.10); border: 1px solid rgba(130,140,180,.2);
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.kjQuiR {
  width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; font-weight: 700;
  background: linear-gradient(140deg, #8a6bff, #d94fb0); color: #fff;
}
.kjQuiN { flex: 1; font-size: 16px; }

/* ======================================================================
   LE MORPION — l'argile

   Une tablette crue, et les marques pressées DEDANS. Rien du papier du
   rébus ni de l'ardoise du pendu : ici ça s'enfonce.
   ====================================================================== */

.kjMorpion { padding: 58px 16px 28px; }

.moEtat {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: 14px; margin: 4px 0 12px;
  background: rgba(170,135,95,.12); border: 1px solid rgba(170,135,95,.25);
  font-size: 15px;
}
.moEtat.toi { background: rgba(170,135,95,.22); border-color: rgba(140,100,55,.45); font-weight: 600; }
.moEtat.fini { background: rgba(130,130,150,.12); border-color: rgba(130,130,150,.22); }
.moSigne { font-size: 20px; color: #6a4e34; }
.moEtat b { margin-left: auto; font-size: 17px; }

.kjMorpion .kjPlateau {
  height: 340px; margin: 0 0 12px; border-radius: 14px;
  background: radial-gradient(85% 75% at 50% 35%, rgba(255,246,230,.6), rgba(190,165,130,.12));
  touch-action: manipulation;
}

.moNote { margin: 0; font-size: 12.5px; color: var(--c2, #6b6b78); text-align: center; }
.moDepart { text-align: center; padding: 30px 0 0; }
.moDepart p { font-size: 14.5px; line-height: 1.6; color: var(--c2, #6b6b78); margin: 0 0 18px; }
.moFin { margin-top: 4px; }

/* ======================================================================
   LE PUISSANCE 4 — le verre et la bille

   Un cadre debout qu'on voit au travers. Le morpion est mat et pressé ;
   ici c'est transparent et ça tombe.
   ====================================================================== */

.kjP4 { padding: 58px 16px 28px; }

.p4Etat {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: 14px; margin: 4px 0 12px;
  background: rgba(110,150,210,.12); border: 1px solid rgba(110,150,210,.25);
  font-size: 15px;
}
.p4Etat.toi { background: rgba(110,150,210,.22); border-color: rgba(60,110,180,.45); font-weight: 600; }
.p4Etat.fini { background: rgba(130,130,150,.12); border-color: rgba(130,130,150,.22); }
.p4Bille { width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto;
  box-shadow: inset -3px -3px 6px rgba(0,0,0,.25), 0 1px 3px rgba(0,0,0,.2); }
.p4Bille.chaud { background: radial-gradient(circle at 34% 30%, #ffd79a, #ffa524 55%, #c96f00); }
.p4Bille.froid { background: radial-gradient(circle at 34% 30%, #a8f0e6, #19b9a6 55%, #0b7c70); }
.p4Etat b { margin-left: auto; font-size: 17px; }

.kjP4 .kjPlateau {
  height: 360px; margin: 0 0 12px; border-radius: 14px;
  background: radial-gradient(80% 70% at 50% 34%, rgba(230,242,255,.65), rgba(110,150,210,.10));
  touch-action: manipulation;
}

.p4Note { margin: 0; font-size: 12.5px; color: var(--c2, #6b6b78); text-align: center; }
.p4Depart { text-align: center; padding: 30px 0 0; }
.p4Depart p { font-size: 14.5px; line-height: 1.6; color: var(--c2, #6b6b78); margin: 0 0 18px; }

/* ======================================================================
   LE MEMORY — le jeu de cartes laqué

   Dos noir profond à motif doré, face ivoire, symbole plein et coloré. Le
   rébus dessine à l'encre au trait ; ici les formes sont pleines, et les
   deux ne se confondent pas. Les cartes se retournent pour de vrai, dans
   l'espace, et celles qui sont prises se rangent de ton côté ou du sien.
   ====================================================================== */

.kjMemory { padding: 58px 14px 28px; }

.meScores {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px;
  margin: 4px 0 12px;
}
.meP { display: flex; flex-direction: column; line-height: 1.05; }
.meP.lui { align-items: flex-end; }
.meP b { font-size: 26px; font-weight: 700; }
.meP span { font-size: 10px; letter-spacing: .6px; text-transform: uppercase; color: var(--c2, #6b6b78); }
.meP.moi b { color: #c9a44a; }
.meP.lui b { color: #6f8fc4; }
.meTour {
  font-size: 12px; letter-spacing: .5px; text-transform: uppercase;
  padding: 6px 12px; border-radius: 99px; color: var(--c2, #6b6b78);
  border: 1px solid rgba(140,140,160,.28);
}
.meTour.toi { background: #1c1b22; color: #e9d9a8; border-color: #1c1b22; }

.mePlateau {
  display: grid; grid-template-columns: repeat(var(--col, 4), 1fr); gap: 8px;
  margin: 0 0 14px;
}
.meC {
  appearance: none; border: 0; background: none; padding: 0; cursor: pointer;
  aspect-ratio: 3 / 4; perspective: 700px;
}
.meF {
  position: relative; display: block; width: 100%; height: 100%;
  transform-style: preserve-3d; transition: transform .45s cubic-bezier(.2,.9,.3,1);
}
.meC.ouverte .meF { transform: rotateY(180deg); }
.meDos, .meAv {
  position: absolute; inset: 0; border-radius: 10px; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: grid; place-items: center;
  box-shadow: 0 1px 0 rgba(255,255,255,.25), 0 8px 18px -12px rgba(10,10,20,.8);
}
.meDos { background: linear-gradient(145deg, #241f2a, #0e0c12 60%, #1a1620); }
.meAv {
  transform: rotateY(180deg);
  background: linear-gradient(160deg, #fffaf0, #f2e9d6);
  border: 1px solid rgba(140,110,50,.22);
}
.meDos svg, .meAv svg { width: 74%; height: 74%; }

/* prise : la carte se range du bon côté et s'apaise */
.meC.aMoi .meAv { box-shadow: inset 0 0 0 2px #c9a44a, 0 6px 14px -10px rgba(10,10,20,.8); }
.meC.aLui .meAv { box-shadow: inset 0 0 0 2px #6f8fc4, 0 6px 14px -10px rgba(10,10,20,.8); }
.meC.aMoi, .meC.aLui { opacity: .82; }
.meC[disabled] { cursor: default; }

.meNote { margin: 0; font-size: 12.5px; color: var(--c2, #6b6b78); text-align: center; }
.meDepart { text-align: center; padding: 30px 0 0; }
.meDepart p { font-size: 14.5px; line-height: 1.6; color: var(--c2, #6b6b78); margin: 0 0 18px; }
.meFin { text-align: center; }
.meGain { margin: 0 0 12px; font-size: 20px; font-weight: 600; }

@media (prefers-reduced-motion: reduce) { .meF { transition: none; } }

/* ======================================================================
   LE THERMOMÈTRE — du verre et du métal

   Un vrai thermomètre : tube, mercure, graduations gravées, deux repères
   de laiton qu'on fait glisser. Pas un dégradé bleu-rouge.
   ====================================================================== */

.kjThermo { padding: 58px 16px 28px; }

.thAff { margin: 6px 0 8px; font-family: Georgia, serif; font-size: 19px; line-height: 1.45; }
.thBornes {
  display: flex; justify-content: space-between; gap: 12px; margin: 0 0 4px;
  font-size: 11.5px; letter-spacing: .4px; text-transform: uppercase; color: var(--c2, #6b6b78);
}
.thBornes span:last-child { text-align: right; }

.kjThermo .kjPlateau {
  height: 200px; margin: 0 0 14px; border-radius: 14px;
  background: radial-gradient(80% 70% at 50% 40%, rgba(255,255,255,.6), rgba(150,170,200,.10));
}

.thCur { display: flex; flex-direction: column; gap: 14px; }
.thCur label { display: block; }
.thCur label span {
  display: block; margin-bottom: 6px; font-size: 13px; color: var(--c2, #6b6b78);
}
.thCur label.pari span { color: #2e7d6b; font-weight: 600; }
.thCur input[type=range] {
  width: 100%; appearance: none; height: 6px; border-radius: 99px;
  background: linear-gradient(90deg, rgba(140,150,170,.3), rgba(168,32,30,.45));
}
.thCur input[type=range]::-webkit-slider-thumb {
  appearance: none; width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #f3e0a8, #c9a44a 60%, #8a6a22);
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
.thCur label.pari input[type=range]::-webkit-slider-thumb {
  background: radial-gradient(circle at 34% 30%, #dfe6ec, #8f9aa8 60%, #5c6672);
}
.thCur input[type=range]::-moz-range-thumb {
  width: 24px; height: 24px; border: 0; border-radius: 50%; background: #c9a44a;
}

.thAttente { margin: 0; font-size: 14px; text-align: center; color: var(--c2, #6b6b78); }
.thFin { }
.thL {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 7px;
  border-radius: 12px; background: rgba(140,150,180,.10); border: 1px solid rgba(140,150,180,.18);
  font-size: 14px;
}
.thL.fort { background: rgba(46,125,107,.12); border-color: rgba(46,125,107,.35); }
.thL b { margin-left: auto; font-size: 19px; font-variant-numeric: tabular-nums; }
.thPast { width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto; }
.thPast.or { background: #c9a44a; }
.thPast.gris { background: #8f9aa8; }
.thPast.vert { background: #2e7d6b; }
.thEcart { margin: 12px 0 0; text-align: center; font-size: 15px; }
.thEcart b { font-size: 22px; }
.thPoints { margin: 6px 0 0; text-align: center; font-size: 20px; font-weight: 600; }

.thNote { margin: 0; font-size: 12.5px; color: var(--c2, #6b6b78); text-align: center; }
.thDepart { text-align: center; padding: 30px 0 0; }
.thDepart p { font-size: 14.5px; line-height: 1.6; color: var(--c2, #6b6b78); margin: 0 0 18px; }

/* ======================================================================
   LE DUO AVEUGLE — la cire et le velours

   Prune profond, deux cachets de cire rouge. Tant que l'autre n'a pas
   répondu, son sceau reste gris. Puis les deux se brisent ensemble.
   ====================================================================== */

.kjDuo { padding: 58px 16px 28px; }

.duQ { margin: 6px 0 10px; font-family: Georgia, serif; font-size: 20px; line-height: 1.45; }

.kjDuo .kjPlateau {
  height: 190px; margin: 0 0 14px; border-radius: 14px;
  background: radial-gradient(85% 75% at 50% 40%, #4a2b52, #2a1830 70%, #1a0f20);
  box-shadow: inset 0 0 50px rgba(0,0,0,.55), 0 12px 30px -18px rgba(25,10,30,.8);
}

.duChoix { display: flex; flex-direction: column; gap: 8px; margin: 0 0 14px; }
.duC {
  appearance: none; width: 100%; text-align: left; font: inherit; font-size: 16px;
  padding: 14px 16px; border-radius: 14px; cursor: pointer; color: inherit;
  background: rgba(120,70,140,.10); border: 1px solid rgba(120,70,140,.24);
  transition: transform .12s, background .2s;
}
.duC:active { transform: scale(.98); }
.duC.pris { background: #4a2b52; border-color: #4a2b52; color: #f3e6f7; font-weight: 600; }
.duC[disabled] { cursor: default; opacity: .75; }
.duC.pris[disabled] { opacity: 1; }

.duNote, .duAttente { margin: 0; font-size: 13px; color: var(--c2, #6b6b78); text-align: center; }
.duDepart { text-align: center; padding: 30px 0 0; }
.duDepart p { font-size: 14.5px; line-height: 1.6; color: var(--c2, #6b6b78); margin: 0 0 18px; }

.duFin { text-align: center; }
.duVerdict { margin: 0 0 12px; font-family: Georgia, serif; font-size: 20px; }
.duFin.accord .duVerdict { color: #1f8a53; }
.duDeux { display: flex; gap: 10px; }
.duCol {
  flex: 1; padding: 12px 10px; border-radius: 12px;
  background: rgba(120,70,140,.10); border: 1px solid rgba(120,70,140,.2);
}
.duCol span { display: block; font-size: 10px; letter-spacing: .6px; text-transform: uppercase;
  color: var(--c2, #6b6b78); margin-bottom: 4px; }
.duCol b { font-size: 16px; }
.duPoints { margin: 12px 0 0; font-size: 20px; font-weight: 600; }

/* ======================================================================
   LA BATAILLE NAVALE — deux mers qui ne se ressemblent pas

   La sienne est une carte marine : encre blanche sur bleu de nuit, on ne
   voit rien et c'est le principe. La tienne est de l'eau pour de vrai,
   avec tes coques dessus.
   ====================================================================== */

.kjNavale { padding: 58px 14px 28px; }

.naEtat {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: 14px; margin: 4px 0 10px;
  background: rgba(60,100,160,.12); border: 1px solid rgba(60,100,160,.25);
  font-size: 15px;
}
.naEtat.toi { background: rgba(60,100,160,.24); border-color: rgba(40,80,150,.45); font-weight: 600; }
.naScore { margin-left: auto; font-variant-numeric: tabular-nums; font-size: 14px; opacity: .75; }

.naTitre {
  margin: 10px 0 6px; font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--c2, #6b6b78);
}

/* la carte marine */
.naCarte {
  display: grid; grid-template-columns: 22px repeat(var(--c, 10), 1fr); gap: 2px;
  padding: 10px; border-radius: 12px; margin: 0 0 4px;
  background: linear-gradient(170deg, #122a4a, #0a1b31);
  box-shadow: inset 0 0 40px rgba(0,0,0,.5), 0 10px 26px -18px rgba(5,15,30,.8);
}
.naCoin { }
.naTete {
  display: grid; place-items: center; font-size: 10px; color: rgba(210,235,255,.55);
  font-variant-numeric: tabular-nums;
}
.naCase {
  appearance: none; aspect-ratio: 1; border-radius: 3px; cursor: pointer; padding: 0;
  background: rgba(130,190,255,.07); border: 1px solid rgba(160,210,255,.16);
}
.naCase:disabled { cursor: default; }
.naCase.eau { background: rgba(200,230,255,.10); position: relative; }
.naCase.eau::after {
  content: ''; position: absolute; inset: 28%; border-radius: 50%;
  border: 1.5px solid rgba(215,238,255,.6);
}
.naCase.touche { background: rgba(255,106,58,.22); border-color: rgba(255,120,70,.6); position: relative; }
.naCase.touche::after {
  content: ''; position: absolute; inset: 22%;
  background:
    linear-gradient(45deg, transparent 44%, #ff8a5a 44% 56%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, #ff8a5a 44% 56%, transparent 56%);
}
.naCase.coque { box-shadow: inset 0 0 0 2px rgba(220,235,250,.45); }

.kjNavale .kjPlateau {
  height: 320px; margin: 0 0 10px; border-radius: 12px;
  background: radial-gradient(85% 75% at 50% 40%, rgba(200,228,255,.4), rgba(40,80,140,.12));
  touch-action: manipulation;
}

.naFlotte { margin: 0 0 12px; }
.naRestes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; align-items: center; }
.naB {
  font-size: 13px; letter-spacing: 3px; padding: 5px 10px; border-radius: 8px;
  background: rgba(60,100,160,.10); border: 1px solid rgba(60,100,160,.22);
  color: var(--c2, #6b6b78);
}
.naB.prochain { background: #1c4e82; border-color: #1c4e82; color: #dff0ff; }
.naOk { font-size: 13px; color: #1f8a53; font-weight: 600; }
.naOutils { display: flex; gap: 8px; }
.naOutils .btn { flex: 1; padding: 11px 8px; font-size: 14px; }
.naOutils .btn[disabled] { opacity: .45; }

.naNote { margin: 0; font-size: 12.5px; color: var(--c2, #6b6b78); text-align: center; }
.naDepart { text-align: center; padding: 30px 0 0; }
.naDepart p { font-size: 14.5px; line-height: 1.6; color: var(--c2, #6b6b78); margin: 0 0 18px; }
.naFin { text-align: center; }
.naGain { margin: 0 0 12px; font-size: 20px; font-weight: 600; }

/* ======================================================================
   LE SCRABBLE — le bois verni et l'ivoire

   Plateau sombre, primes en couleurs sourdes (pas les aplats criards de la
   boîte), jetons d'ivoire à lettres gravées. Un jeton pris se soulève, un
   jeton posé garde son ombre : le geste se voit.
   ====================================================================== */

.kjScrabble { padding: 58px 10px 28px; }

.scScores {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px;
  margin: 4px 6px 10px;
}
.scS { display: flex; flex-direction: column; line-height: 1.05; }
.scS.lui { align-items: flex-end; }
.scS b { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.scS span { font-size: 10px; letter-spacing: .6px; text-transform: uppercase; color: var(--c2, #6b6b78); }
.scS.moi b { color: #8a5a2b; }
.scS.lui b { color: #4a6a8a; }
.scTour {
  text-align: center; font-size: 12px; letter-spacing: .4px; text-transform: uppercase;
  padding: 6px 12px; border-radius: 99px; color: var(--c2, #6b6b78);
  border: 1px solid rgba(140,140,160,.28);
}
.scTour.toi { background: #3b2a18; color: #f0e2c8; border-color: #3b2a18; }
.scTour i { display: block; font-style: normal; font-size: 9px; opacity: .7; letter-spacing: .4px; }

.scCadre {
  padding: 7px; border-radius: 12px; margin: 0 0 12px;
  background: linear-gradient(160deg, #46331f, #2a1d12);
}

.scPlateau {
  display: grid; grid-template-columns: repeat(var(--c, 15), 1fr); gap: 1.5px;
}
.scCase {
  appearance: none; aspect-ratio: 1; padding: 0; border: 0; border-radius: 2px;
  background: #6b5336; display: grid; place-items: center; cursor: pointer;
  position: relative;
}
.scCase.p-MT { background: #8a3a3a; }
.scCase.p-MD { background: #9a6a4a; }
.scCase.p-LT { background: #3f6a7a; }
.scCase.p-LD { background: #5c7f8c; }
.scCase.centre { background: #7a5a2a; }
.scP { font-size: 6px; letter-spacing: -.2px; color: rgba(255,246,230,.55); }
.scCase.plein, .scCase.pose { background: transparent; }

.scJ {
  display: grid; place-items: center; width: 100%; height: 100%;
  border-radius: 3px; position: relative;
  background: linear-gradient(160deg, #f6eeda, #e6d8ba);
  color: #2e2114; font-weight: 700; font-size: 12px;
  box-shadow: 0 1px 0 rgba(255,255,255,.5), 0 2px 3px -1px rgba(20,12,4,.55);
}
.scJ i {
  position: absolute; right: 1px; bottom: 0; font-style: normal;
  font-size: 6px; font-weight: 600; opacity: .65;
}
.scJ.neuf { box-shadow: 0 0 0 1.5px #c9a44a, 0 3px 5px -1px rgba(20,12,4,.6); }

.scChevalet {
  display: flex; gap: 6px; justify-content: center; padding: 10px 8px;
  border-radius: 12px; margin: 0 0 12px;
  background: linear-gradient(170deg, #5a422a, #3a2a1a);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.45);
}
.scT {
  appearance: none; border: 0; background: none; padding: 0; cursor: pointer;
  width: 38px; height: 44px; transition: transform .15s;
}
.scT .scJ { font-size: 19px; border-radius: 5px; }
.scT .scJ i { font-size: 9px; right: 3px; bottom: 1px; }
.scT.pris { transform: translateY(-10px) scale(1.06); }
.scT.pris .scJ { box-shadow: 0 0 0 2px #c9a44a, 0 10px 14px -6px rgba(20,12,4,.7); }

.scActes { display: flex; gap: 8px; margin: 0 6px 12px; }
.scActes .btn { flex: 1; padding: 11px 6px; font-size: 14px; }
.scActes .btn[disabled] { opacity: .45; }

.scNote { margin: 0; font-size: 12.5px; color: var(--c2, #6b6b78); text-align: center; }
.scDepart { text-align: center; padding: 30px 0 0; }
.scDepart p { font-size: 14.5px; line-height: 1.6; color: var(--c2, #6b6b78); margin: 0 0 18px; }
.scFin { text-align: center; margin-top: 6px; }
.scVerdict { margin: 0; font-family: Georgia, serif; font-size: 20px; }
.scTotal { margin: 4px 0 0; font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.scGain { margin: 8px 0 0; font-size: 19px; font-weight: 600; }

/* ======================================================================
   LES JEUX « EN SOIRÉE » — le passage commun

   Créer, donner son code, rejoindre, attendre. Identique pour les huit, et
   écrit une seule fois.
   ====================================================================== */

.kjSoiree { padding: 10px 0 0; }
.ksMot { margin: 0 0 18px; font-size: 15px; line-height: 1.55; color: var(--c2, #6b6b78); }
.ksOu { margin: 16px 0; text-align: center; font-size: 12px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--c2, #6b6b78); }
.ksCode { display: flex; flex-direction: column; gap: 10px; }

.ksSalon { text-align: center; padding: 10px 0 0; }
.ksLabel { margin: 0; font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--c2, #6b6b78); }
.ksGrosCode {
  margin: 4px 0 2px; font-size: 54px; font-weight: 700; letter-spacing: 10px;
  font-family: Georgia, serif;
}
.ksCombien { margin: 0 0 16px; font-size: 13px; color: var(--c2, #6b6b78); }
.ksJoueurs { list-style: none; margin: 0 0 20px; padding: 0;
  display: flex; flex-direction: column; gap: 7px; }
.ksJoueurs li {
  display: flex; align-items: center; gap: 10px; text-align: left;
  padding: 9px 12px; border-radius: 12px;
  background: rgba(130,140,180,.10); border: 1px solid rgba(130,140,180,.2);
}
.ksR {
  width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; font-weight: 700; font-size: 13px;
  background: linear-gradient(140deg, #8a6bff, #d94fb0); color: #fff;
}
.ksAttente { margin: 0; font-size: 13.5px; color: var(--c2, #6b6b78); }

/* ======================================================================
   L'IMPOSTEUR — la nuit basse et le feutre vert

   On est autour d'une table, pas devant un écran. Une seule carte
   éclairée : la tienne, que personne d'autre ne doit voir.
   ====================================================================== */

.kjImp { padding: 58px 16px 28px; }

.imCarte { perspective: 900px; height: 150px; margin: 6px 0 16px; cursor: pointer; }
.imF {
  position: relative; width: 100%; height: 100%; transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.2,.9,.3,1);
}
.imCarte.vue .imF { transform: rotateY(180deg); }
.imDos, .imAv {
  position: absolute; inset: 0; border-radius: 16px;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: grid; place-items: center; align-content: center; gap: 6px;
  box-shadow: 0 10px 26px -14px rgba(10,20,15,.8);
}
.imDos {
  background: linear-gradient(150deg, #18382c, #0d2219);
  color: #9fc4b0;
}
.imDos span { font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; opacity: .75; }
.imDos b { font-size: 15px; font-weight: 500; opacity: .6; }
.imAv {
  transform: rotateY(180deg);
  background: linear-gradient(150deg, #f6f1e0, #e6dcc2);
  color: #1d2b1f;
}
.imAv b { font-size: 30px; font-family: Georgia, serif; }
.imAv span { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; opacity: .6; }
.imAv.seul { background: linear-gradient(150deg, #f6e2e0, #e8c6c2); color: #6b1f1a; }

.imJ { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.imP {
  display: flex; align-items: center; gap: 7px; padding: 5px 10px 5px 5px;
  border-radius: 99px; background: rgba(40,90,70,.10); border: 1px solid rgba(40,90,70,.2);
  font-size: 13px;
}
.imP .ksR { width: 24px; height: 24px; font-size: 11px; }
.imP.tour { background: #18382c; border-color: #18382c; color: #e4f2ea; }
.imP.fait { opacity: .6; }
.imP i { font-style: normal; font-size: 11px; opacity: .7; }

.imInd { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.imInd li {
  display: flex; align-items: baseline; gap: 10px; padding: 9px 13px; border-radius: 11px;
  background: rgba(40,90,70,.08); border: 1px solid rgba(40,90,70,.16);
}
.imInd span { font-size: 11.5px; color: var(--c2, #6b6b78); min-width: 70px; }
.imInd b { font-size: 16px; }

.imEntree { display: flex; gap: 8px; }
.imSaisie {
  flex: 1 1 0; min-width: 0; font: inherit; font-size: 16px; padding: 12px 14px;
  border-radius: 14px; background: rgba(40,90,70,.10); border: 1px solid rgba(40,90,70,.26);
  color: var(--c, #1a1a22);
}
.imSaisie:focus { outline: none; border-color: rgba(40,120,90,.7); }
.imEntree .btn { flex: 0 0 auto; padding: 12px 18px; white-space: nowrap; }

.imTitre { margin: 4px 0 10px; font-size: 15px; font-family: Georgia, serif; }
.imVote { display: flex; flex-wrap: wrap; gap: 8px; }
.imB {
  appearance: none; font: inherit; font-size: 15px; padding: 11px 16px; border-radius: 99px;
  background: rgba(40,90,70,.12); border: 1px solid rgba(40,90,70,.28); color: inherit;
  cursor: pointer;
}
.imB:active { transform: scale(.96); }

.imNote { margin: 0; font-size: 13px; color: var(--c2, #6b6b78); text-align: center; }
.imFin { text-align: center; }
.imVerdict { margin: 0 0 4px; font-family: Georgia, serif; font-size: 21px; }
.imQui { margin: 0 0 14px; font-size: 15px; }
.imDeux { display: flex; gap: 10px; }
.imCol { flex: 1; padding: 12px 10px; border-radius: 12px;
  background: rgba(40,90,70,.10); border: 1px solid rgba(40,90,70,.2); }
.imCol.seul { background: rgba(140,40,30,.10); border-color: rgba(140,40,30,.28); }
.imCol span { display: block; font-size: 10px; letter-spacing: .6px; text-transform: uppercase;
  color: var(--c2, #6b6b78); margin-bottom: 4px; }
.imCol b { font-size: 19px; font-family: Georgia, serif; }
.imVotes { list-style: none; margin: 14px 0 0; padding: 0; font-size: 13px;
  color: var(--c2, #6b6b78); display: flex; flex-direction: column; gap: 4px; }

@media (prefers-reduced-motion: reduce) { .imF { transition: none; } }

/* ======================================================================
   LE MENTEUR — le bureau et la lampe

   Anthracite, un halo jaune, trois fiches tapées à la machine. L'imposteur
   est autour d'une table ; ici on est seul avec trois papiers.
   ====================================================================== */

.kjMenteur { padding: 58px 16px 28px; }
.mnQui { margin: 4px 0 10px; font-size: 13px; letter-spacing: .6px; text-transform: uppercase;
  color: var(--c2, #6b6b78); }

.mnFiches {
  display: flex; flex-direction: column; gap: 10px; margin: 0 0 16px;
  padding: 18px 14px; border-radius: 16px;
  background: radial-gradient(90% 60% at 50% 0%, #4a4330, #241f1a 60%, #15120f);
  box-shadow: inset 0 0 50px rgba(0,0,0,.6), 0 12px 30px -18px rgba(10,8,5,.85);
  perspective: 900px;
}
.mnF {
  position: relative; display: flex; gap: 10px; align-items: flex-start;
  padding: 14px 14px 14px 12px; border-radius: 3px; cursor: pointer;
  background: linear-gradient(170deg, #f4efe2, #e6dfcc);
  box-shadow: 0 6px 14px -8px rgba(0,0,0,.7);
  transform: rotate(-.5deg); transition: transform .25s, box-shadow .25s;
}
.mnF:nth-child(2) { transform: rotate(.6deg); }
.mnF:nth-child(3) { transform: rotate(-.3deg); }
.mnF p {
  margin: 0; font-family: "Courier New", Courier, monospace; font-size: 14.5px;
  line-height: 1.5; color: #241d12;
}
.mnN {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
  background: #241d12; color: #f4efe2;
}
.mnF.choisie { transform: translateY(-6px) scale(1.02); box-shadow: 0 14px 22px -10px rgba(0,0,0,.8); }
.mnF.mienne { box-shadow: 0 0 0 2px #c9a44a, 0 6px 14px -8px rgba(0,0,0,.7); }
.mnF.vraie { opacity: .72; }
.mnF.fausse { box-shadow: 0 0 0 2px #c0392b, 0 10px 20px -10px rgba(0,0,0,.8); }
.mnTampon {
  position: absolute; right: 8px; bottom: 6px;
  font-family: Georgia, serif; font-size: 20px; font-weight: 700; letter-spacing: 3px;
  color: rgba(192,57,43,.8); border: 3px solid rgba(192,57,43,.6);
  padding: 1px 8px; border-radius: 4px; transform: rotate(-9deg);
}
.mnTampon.doux {
  font-size: 10px; letter-spacing: 1px; color: rgba(140,110,40,.9);
  border-color: rgba(140,110,40,.6); border-width: 2px; font-family: inherit;
}

.mnForme { margin-top: 10px; }
.mnTitre { margin: 14px 0 8px; font-size: 14px; }
.mnL { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.mnL span { width: 20px; text-align: center; font-weight: 700; color: var(--c2, #6b6b78); }
.mnI {
  flex: 1; min-width: 0; font: inherit; font-size: 15px; padding: 11px 13px;
  border-radius: 12px; background: rgba(140,130,100,.10);
  border: 1px solid rgba(140,130,100,.26); color: var(--c, #1a1a22);
}
.mnI:focus { outline: none; border-color: rgba(190,160,60,.8); }
.mnQuelle { display: flex; gap: 8px; margin-bottom: 16px; }
.mnQ {
  appearance: none; flex: 1; font: inherit; font-size: 18px; padding: 12px 0;
  border-radius: 12px; cursor: pointer; color: inherit;
  background: rgba(140,130,100,.10); border: 1px solid rgba(140,130,100,.26);
}
.mnQ.pris { background: #c0392b; border-color: #c0392b; color: #fff; font-weight: 700; }

.mnConsigne { margin: 0; text-align: center; font-size: 14px; }
.mnNote { margin: 0; text-align: center; font-size: 13px; color: var(--c2, #6b6b78); }
.mnFin { text-align: center; }
.mnVerdict { margin: 0 0 2px; font-family: Georgia, serif; font-size: 21px; }
.mnCombien { margin: 0 0 12px; font-size: 14px; color: var(--c2, #6b6b78); }
.mnVotes { list-style: none; margin: 0; padding: 0; font-size: 13.5px;
  display: flex; flex-direction: column; gap: 4px; color: var(--c2, #6b6b78); }
.mnVotes li.bon { color: #1f8a53; font-weight: 600; }

@media (prefers-reduced-motion: reduce) { .mnF { transition: none; } }

/* ======================================================================
   LE JURY — le prétoire

   Bois sombre, deux pupitres, une balance qui penche vers celui qui mène.
   L'imposteur et le menteur se jouent en secret ; ici tout est public et
   il y a deux camps.
   ====================================================================== */

.kjJury { padding: 58px 16px 28px; }
.juPos { margin: 6px 0 8px; font-family: Georgia, serif; font-size: 20px; line-height: 1.45; }

.kjJury .kjPlateau {
  height: 210px; margin: 0 0 14px; border-radius: 14px;
  background: radial-gradient(80% 70% at 50% 36%, rgba(255,246,228,.5), rgba(120,95,60,.12));
}

.juEcrire { display: flex; flex-direction: column; gap: 10px; }
.juSaisie {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 15.5px; line-height: 1.5;
  padding: 13px 14px; border-radius: 14px; resize: vertical;
  background: rgba(140,110,60,.08); border: 1px solid rgba(140,110,60,.26);
  color: var(--c, #1a1a22);
}
.juSaisie:focus { outline: none; border-color: rgba(190,150,60,.8); }

.juDeux { display: flex; flex-direction: column; gap: 10px; margin: 0 0 12px; }
.juPup {
  padding: 14px; border-radius: 14px; border-left: 4px solid;
  background: rgba(140,110,60,.08);
}
.juPup.a { border-left-color: #8a5a2b; }
.juPup.b { border-left-color: #3f6a7a; }
.juPup.gagne { background: rgba(201,164,74,.16); box-shadow: 0 0 0 1px rgba(201,164,74,.5); }
.juNom { margin: 0 0 6px; font-size: 12px; letter-spacing: .6px; text-transform: uppercase;
  color: var(--c2, #6b6b78); }
.juTexte { margin: 0 0 10px; font-size: 15.5px; line-height: 1.55; }

.juNote { margin: 0; font-size: 13px; color: var(--c2, #6b6b78); text-align: center; }
.juFin { text-align: center; margin-top: 6px; }
.juVerdict { margin: 0 0 10px; font-family: Georgia, serif; font-size: 20px; }
.juVotes { list-style: none; margin: 0; padding: 0; font-size: 13.5px;
  color: var(--c2, #6b6b78); display: flex; flex-direction: column; gap: 4px; }

/* ======================================================================
   L'ENCHÈRE — la salle des ventes

   Acajou, feutre rouge, chiffres d'ardoise, un marteau de buis. Le jury
   est un prétoire ; ici on vend, et ça va vite.
   ====================================================================== */

.kjEnchere { padding: 58px 16px 28px; }
.enCat { margin: 6px 0 8px; font-family: Georgia, serif; font-size: 21px; line-height: 1.4; }

.kjEnchere .kjPlateau {
  height: 190px; margin: 0 0 14px; border-radius: 14px;
  background: radial-gradient(80% 70% at 50% 40%, rgba(255,240,220,.55), rgba(120,50,45,.14));
}

.enTitre { margin: 10px 0 10px; font-size: 15px; }
.enChiffre { text-align: center; }
.enChiffre b { font-size: 60px; font-weight: 700; font-family: Georgia, serif; color: #8a2b2b; }
.kjEnchere input[type=range] {
  width: 100%; appearance: none; height: 6px; border-radius: 99px; margin: 10px 0 16px;
  background: linear-gradient(90deg, rgba(160,120,100,.3), rgba(138,43,43,.5));
}
.kjEnchere input[type=range]::-webkit-slider-thumb {
  appearance: none; width: 28px; height: 28px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #e8c89a, #b8803f 60%, #7a5020);
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
}

.enMises { list-style: none; margin: 0 0 14px; padding: 0;
  display: flex; flex-direction: column; gap: 6px; }
.enMises li {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-radius: 11px;
  background: rgba(138,43,43,.08); border: 1px solid rgba(138,43,43,.16);
}
.enMises li.gagne { background: rgba(184,128,63,.2); border-color: rgba(184,128,63,.55); font-weight: 600; }
.enMises b { font-size: 19px; font-variant-numeric: tabular-nums; }

.enL { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.enL span { width: 20px; text-align: center; font-weight: 700; color: var(--c2, #6b6b78); }
.enI {
  flex: 1; min-width: 0; font: inherit; font-size: 15px; padding: 10px 13px;
  border-radius: 12px; background: rgba(138,43,43,.07);
  border: 1px solid rgba(138,43,43,.22); color: var(--c, #1a1a22);
}
.enI:focus { outline: none; border-color: rgba(184,128,63,.8); }

.enVue { margin: 0 0 14px; padding-left: 22px; font-size: 15.5px; line-height: 1.7; }
.enJuge { display: flex; gap: 8px; margin-bottom: 12px; }
.enJuge .btn { flex: 1; }

.enNote { margin: 10px 0 0; font-size: 13px; color: var(--c2, #6b6b78); text-align: center; }
.enFin { text-align: center; }
.enVerdict { margin: 0 0 10px; font-family: Georgia, serif; font-size: 21px; }
.enJugements { list-style: none; margin: 0; padding: 0; font-size: 13.5px;
  color: var(--c2, #6b6b78); display: flex; flex-direction: column; gap: 4px; }

/* ======================================================================
   LE PETIT BAC — la feuille quadrillée et le feutre épais

   Une seule lettre, énorme, en haut. Le rébus est une page lignée à
   l'encre fine ; ici c'est du quadrillage et tout le monde écrit en même
   temps. Pas de 3D : ce jeu est une course d'écriture.
   ====================================================================== */

.kjPB { padding: 58px 14px 28px; }

.pbLettre {
  display: flex; flex-direction: column; align-items: center; margin: 2px 0 14px;
}
.pbLettre span { font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--c2, #6b6b78); }
.pbLettre b {
  font-size: 76px; line-height: 1; font-family: Georgia, serif; font-weight: 700;
  color: #2b4bb0;
}

.pbFeuille {
  padding: 12px; border-radius: 10px; margin: 0 0 14px;
  background:
    repeating-linear-gradient(0deg, transparent 0 25px, rgba(60,90,170,.12) 25px 26px),
    repeating-linear-gradient(90deg, transparent 0 25px, rgba(60,90,170,.12) 25px 26px),
    #fbfaf4;
  box-shadow: 0 1px 0 rgba(255,255,255,.6), 0 10px 24px -16px rgba(30,40,70,.6);
}
.pbL { display: block; margin-bottom: 10px; }
.pbL span { display: block; font-size: 11.5px; letter-spacing: .5px; text-transform: uppercase;
  color: #4a5a80; margin-bottom: 3px; }
.pbI {
  width: 100%; box-sizing: border-box; border: 0; border-bottom: 2px solid rgba(43,75,176,.35);
  background: transparent; border-radius: 0; padding: 6px 2px;
  font-size: 19px; color: #16233f; font-weight: 600;
}
.pbI:focus { outline: none; border-bottom-color: #2b4bb0; }

.pbTable { display: flex; flex-direction: column; gap: 12px; margin: 0 0 14px; }
.pbCol {
  padding: 12px 13px; border-radius: 12px;
  background: rgba(60,90,170,.07); border: 1px solid rgba(60,90,170,.16);
}
.pbCol.moi { border-color: rgba(43,75,176,.5); background: rgba(60,90,170,.13); }
.pbNom { margin: 0 0 8px; display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px; letter-spacing: .5px; text-transform: uppercase; color: var(--c2, #6b6b78); }
.pbNom b { font-size: 20px; color: var(--c, #1a1a22); }
.pbCol ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pbCol li {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: baseline;
  padding: 6px 9px; border-radius: 8px; background: rgba(255,255,255,.5);
}
.pbCol li i { grid-column: 1 / -1; font-style: normal; font-size: 10px; letter-spacing: .4px;
  text-transform: uppercase; color: var(--c2, #6b6b78); }
.pbCol li span { font-size: 15.5px; font-weight: 600; }
.pbCol li em { font-style: normal; font-size: 13px; font-weight: 700; color: var(--c2, #6b6b78); }
.pbCol li.seul { background: rgba(31,138,83,.14); }
.pbCol li.partage { background: rgba(200,160,40,.14); }
.pbCol li.abattue, .pbCol li.faux, .pbCol li.conteste { background: rgba(192,57,43,.12); opacity: .8; }
.pbCol li.vide { opacity: .45; }

.pbConsigne { margin: 0 0 10px; font-size: 13px; color: var(--c2, #6b6b78); text-align: center; }
.pbNote { margin: 10px 0 0; font-size: 13px; color: var(--c2, #6b6b78); text-align: center; }

/* ======================================================================
   LE JEU DU DICTIONNAIRE — la page imprimée

   Blanc cassé, serif étroite, le mot en gras suivi de sa catégorie, et des
   acceptions numérotées. Le rébus est un carnet à main ; ici c'est de
   l'imprimé. Pas de 3D : ce jeu est fait de typographie.
   ====================================================================== */

.kjDico { padding: 58px 16px 28px; }

.diEntree {
  padding: 16px 16px 14px; border-radius: 4px; margin: 4px 0 14px;
  background: #fbf8f0; border-left: 3px solid #2a2520;
  box-shadow: 0 8px 20px -16px rgba(40,35,25,.6);
}
.diMot { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-size: 30px;
  font-weight: 700; color: #241f18; letter-spacing: -.5px; }
.diPron { margin: 2px 0 0; font-family: Georgia, serif; font-style: italic; font-size: 13px;
  color: #7a7265; }

.diEcrire { display: flex; flex-direction: column; gap: 10px; }
.diSaisie {
  width: 100%; box-sizing: border-box; font-family: Georgia, serif; font-size: 16px;
  line-height: 1.55; padding: 13px 14px; border-radius: 6px; resize: vertical;
  background: #fbf8f0; border: 1px solid rgba(120,110,90,.3); color: #241f18;
}
.diSaisie:focus { outline: none; border-color: #8a7a55; }

.diDefs { margin: 0 0 14px; padding: 0; list-style: none; counter-reset: d; }
.diD {
  counter-increment: d; position: relative; padding: 12px 14px 12px 36px;
  border-radius: 4px; margin-bottom: 8px; background: #fbf8f0;
  border: 1px solid rgba(120,110,90,.22); cursor: pointer;
}
.diD::before {
  content: counter(d) "."; position: absolute; left: 13px; top: 12px;
  font-family: Georgia, serif; font-weight: 700; color: #8a7a55;
}
.diD p { margin: 0; font-family: Georgia, serif; font-size: 15.5px; line-height: 1.55; color: #241f18; }
.diD.choisie { border-color: #2b4bb0; box-shadow: inset 0 0 0 1px #2b4bb0; }
.diD.vraie { background: #eef7f0; border-color: #1f8a53; box-shadow: inset 0 0 0 1px #1f8a53; }
.diAut { display: block; margin-top: 6px; font-size: 11.5px; letter-spacing: .5px;
  text-transform: uppercase; color: #8a7a55; }
.diVraie { position: absolute; right: 12px; top: 10px; font-size: 10px; letter-spacing: 1px;
  text-transform: uppercase; color: #1f8a53; font-weight: 700; }

.diScores { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.diScores li {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: baseline;
  padding: 10px 14px; border-radius: 11px;
  background: rgba(130,120,90,.09); border: 1px solid rgba(130,120,90,.18);
}
/* sans placement explicite, le score se retrouvait à GAUCHE du nom. */
.diScores span { grid-column: 1; grid-row: 1; font-size: 15px; font-weight: 600; }
.diScores i { grid-column: 1; grid-row: 2; font-style: normal; font-size: 12px;
  color: var(--c2, #6b6b78); }
.diScores b { grid-column: 2; grid-row: 1 / span 2; align-self: center; text-align: right;
  font-size: 20px; }

.diConsigne { margin: 0 0 10px; font-size: 14px; text-align: center; }
.diNote { margin: 10px 0 0; font-size: 13px; color: var(--c2, #6b6b78); text-align: center; }

/* ======================================================================
   LE TABOO — la carte à bande rouge

   Le mot en haut, les cinq interdits barrés dessous, un sablier qui se
   vide. L'imposteur est sur du feutre vert ; ici c'est du carton de boîte
   de jeu, et c'est franc.
   ====================================================================== */

.kjTaboo { padding: 58px 16px 28px; }

.tbScores { display: flex; gap: 10px; margin: 4px 0 10px; }
.tbE {
  flex: 1; padding: 10px 12px; border-radius: 12px; text-align: center;
  background: rgba(138,58,48,.09); border: 1px solid rgba(138,58,48,.2);
}
.tbE.moi { background: rgba(138,58,48,.22); border-color: rgba(138,58,48,.5); }
.tbE span { display: block; font-size: 10px; letter-spacing: .7px; text-transform: uppercase;
  color: var(--c2, #6b6b78); }
.tbE b { font-size: 26px; font-variant-numeric: tabular-nums; }

.tbHaut { display: flex; align-items: baseline; gap: 12px; justify-content: space-between;
  margin: 0 0 6px; }
.tbHaut b { font-size: 30px; font-variant-numeric: tabular-nums; font-weight: 700; }
.tbHaut span { font-size: 12px; color: var(--c2, #6b6b78); }

.kjTaboo .kjPlateau {
  height: 210px; margin: 0 0 12px; border-radius: 14px;
  background: radial-gradient(75% 70% at 50% 40%, rgba(255,246,235,.6), rgba(150,80,70,.12));
}

.tbCarte {
  border-radius: 10px; overflow: hidden; margin: 0 0 12px;
  background: #fdfaf3; border: 1px solid rgba(120,60,50,.25);
  box-shadow: 0 10px 24px -16px rgba(60,20,15,.6);
}
.tbMot {
  margin: 0; padding: 14px 16px; background: #a8342a; color: #fff;
  font-family: Georgia, serif; font-size: 27px; font-weight: 700; text-align: center;
  letter-spacing: .5px;
}
.tbInt { list-style: none; margin: 0; padding: 10px 16px 14px; }
.tbInt li {
  font-size: 17px; padding: 5px 0; text-align: center; color: #6b3028;
  border-bottom: 1px solid rgba(120,60,50,.14);
}
.tbInt li:last-child { border-bottom: 0; }
.tbCarte.cachee { background: linear-gradient(150deg, #8a3a30, #5c241d); border: 0; }
.tbDos { margin: 0; padding: 34px 20px; text-align: center; color: #f6e2dd;
  font-size: 15.5px; line-height: 1.6; }

.tbActes { display: flex; gap: 8px; }
.tbActes .btn { flex: 1; }
.tbActes .btn[disabled] { opacity: .45; }

.tbEquipes { display: flex; gap: 10px; margin-top: 14px; }
.tbQ { flex: 1; padding: 10px 12px; border-radius: 12px;
  background: rgba(138,58,48,.07); border: 1px solid rgba(138,58,48,.16); }
.tbQ p { margin: 0 0 6px; font-size: 10px; letter-spacing: .7px; text-transform: uppercase;
  color: var(--c2, #6b6b78); }
.tbQ ul { list-style: none; margin: 0; padding: 0; font-size: 14px;
  display: flex; flex-direction: column; gap: 3px; }

.tbNote { margin: 10px 0 0; font-size: 12.5px; color: var(--c2, #6b6b78); text-align: center;
  line-height: 1.5; }
.tbFin { text-align: center; margin: 10px 0; }
.tbVerdict { margin: 0; font-family: Georgia, serif; font-size: 22px; }
.tbGain { margin: 8px 0 0; font-size: 20px; font-weight: 600; }

/* ======================================================================
   LES ÉNIGMES EN SOIRÉE — la lampe commune

   L'énigme du jour est une bougie pour soi ; ici la lumière est partagée,
   et elle baisse pour tout le monde quand quelqu'un réclame un indice.
   Pas de 3D : le cœur de ce jeu est la vitesse.
   ====================================================================== */

.kjEnq { padding: 58px 16px 28px; }

.eqHaut {
  display: grid; grid-template-columns: 1fr auto; gap: 0 12px; align-items: baseline;
  padding: 12px 14px; border-radius: 14px; margin: 4px 0 10px;
  background: linear-gradient(160deg, #1b2a4a, #101a30); color: #dce8ff;
}
.eqHaut span { grid-column: 1; grid-row: 1; font-size: 12px; letter-spacing: .5px;
  text-transform: uppercase; opacity: .7; }
.eqHaut b { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 34px;
  font-weight: 700; color: #7fe3ff; }
.eqHaut i { grid-column: 1; grid-row: 2; font-style: normal; font-size: 11px; opacity: .55; }

.eqNiveau { margin: 0 0 6px; font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--c2, #6b6b78); }
.eqEnonce { margin: 0 0 14px; font-family: Georgia, serif; font-size: 18.5px; line-height: 1.5; }

.eqEntree { display: flex; gap: 8px; margin: 0 0 10px; }
.eqSaisie {
  flex: 1 1 0; min-width: 0; font: inherit; font-size: 16px; padding: 12px 14px;
  border-radius: 14px; background: rgba(60,100,170,.10);
  border: 1px solid rgba(60,100,170,.28); color: var(--c, #1a1a22);
}
.eqSaisie:focus { outline: none; border-color: rgba(60,130,220,.8); }
.eqEntree .btn { flex: 0 0 auto; padding: 12px 18px; white-space: nowrap; }

.eqEssais { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.eqEssais li { font-size: 13px; padding: 4px 10px; border-radius: 12px;
  color: var(--c2, #6b6b78); border: 1px solid rgba(130,130,150,.22); text-decoration: line-through; }

.eqI { width: 100%; }
.eqI span { opacity: .7; font-size: 12px; }
.eqInd { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.eqInd li { padding: 11px 14px; border-radius: 12px; font-size: 14.5px; line-height: 1.45;
  background: rgba(127,227,255,.10); border: 1px solid rgba(127,227,255,.26); }
.eqInd i { display: block; font-style: normal; font-size: 10px; letter-spacing: .6px;
  text-transform: uppercase; color: var(--c2, #6b6b78); margin-bottom: 3px; }

.eqPrise { text-align: center; margin: 0 0 12px; }
.eqQui { margin: 0 0 2px; font-size: 13px; color: var(--c2, #6b6b78); }
.eqRep { margin: 0; font-family: Georgia, serif; font-size: 27px; }
.eqExp { margin: 8px 0 0; font-size: 14.5px; line-height: 1.5; text-align: left; }

.eqScores { list-style: none; margin: 16px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 5px; }
.eqScores li {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 9px 13px; border-radius: 11px;
  background: rgba(60,100,170,.08); border: 1px solid rgba(60,100,170,.16);
}
.eqScores li.moi { border-color: rgba(60,130,220,.5); background: rgba(60,100,170,.16); }
.eqScores li.tete b { color: #1f6fd0; }
.eqScores b { font-size: 19px; font-variant-numeric: tabular-nums; }

.eqNote { margin: 10px 0 0; font-size: 13px; color: var(--c2, #6b6b78); text-align: center; }
.eqFin { text-align: center; margin: 6px 0 0; }
.eqVerdict { margin: 0; font-family: Georgia, serif; font-size: 21px; }
.eqGain { margin: 8px 0 0; font-size: 20px; font-weight: 600; }

/* ======================================================================
   LES ONZE JEUX D'ORIGINE — la reprise des matières

   Ces onze-là avaient déjà leur ambiance et leur couleur : c'était juste.
   Ce qui leur manquait, c'était la MATIÈRE — du grain, du relief, une
   lumière qui vient de quelque part. Les vingt-sept nouveaux écrans ont
   chacun la leur ; ceux-ci ne devaient pas rester en aplats.

   Rien n'est remplacé : on ajoute une couche par-dessus, en « ::after »,
   pour qu'aucun contenu existant ne bouge d'un pixel. Et tout s'arrête si
   la personne a demandé moins d'animations.
   ====================================================================== */

.amb::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
}
/* le creux du bord : sans lui, un dégradé plat n'a pas de volume */
.amb { box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 -40px 60px -40px rgba(0,0,0,.6); }
.amb > * { position: relative; z-index: 2; }

/* 1 · LE CHAPEAU — velours de cabaret et poussière d'or */
/* des pastilles en damier, pas un dégradé radial répété : répété, il dessine
   des anneaux de moiré qui lisent comme un défaut d'écran, pas comme du velours. */
.amb.a-chapeau::after {
  background-image:
    radial-gradient(58% 34% at 50% -6%, rgba(255,214,107,.30), transparent 70%),
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.055) 1px, transparent 1.6px),
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.035) 1px, transparent 1.6px);
  background-size: auto, 7px 7px, 13px 13px;
  background-position: 0 0, 0 0, 4px 6px;
  mix-blend-mode: screen;
}

/* 2 · LE MIROIR — le tain, et l'arête de lumière au milieu */
.amb.a-miroir::after {
  background:
    linear-gradient(90deg, transparent 47%, rgba(255,255,255,.16) 49.6% 50.4%, transparent 53%),
    linear-gradient(118deg, transparent 38%, rgba(255,255,255,.10) 48%, transparent 58%),
    radial-gradient(90% 70% at 50% 0%, rgba(255,255,255,.08), transparent 70%);
}

/* 3 · LA COURSE — l'asphalte, et les bandes qui défilent */
.amb.a-course::after {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 2px, transparent 2px 5px),
    linear-gradient(180deg, rgba(255,255,255,.07), transparent 28%);
  opacity: .8;
}
.amb.a-course .lane::after {
  content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px;
  background: repeating-linear-gradient(90deg, rgba(255,208,51,.5) 0 14px, transparent 14px 30px);
  animation: cLane 1.4s linear infinite;
}
@keyframes cLane { to { background-position: 30px 0; } }

/* 4 · LE BUZZER — le rideau de studio et la lumière qui bat */
.amb.a-buzzer::after {
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.22) 0 9px, transparent 9px 26px),
    radial-gradient(70% 42% at 50% 2%, rgba(255,120,140,.3), transparent 72%);
  animation: bPulse 3.4s ease-in-out infinite;
}
@keyframes bPulse { 0%,100% { opacity: .75; } 50% { opacity: 1; } }

/* 5 · LA CHASSE — le kraft et ses fibres */
.amb.a-chasse::after {
  background:
    repeating-linear-gradient(74deg, rgba(120,96,56,.07) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-66deg, rgba(120,96,56,.05) 0 1px, transparent 1px 6px),
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.35), transparent 60%);
}

/* 6 · L'ACCORD — le velours de l'urne, et la fente éclairée */
.amb.a-accord::after {
  background:
    linear-gradient(180deg, rgba(255,214,107,.18), transparent 22%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 5px);
}

/* 7 · LE DÉCLIN — la braise qui respire sous le plateau */
.amb.a-declin::after {
  background: radial-gradient(70% 46% at 50% 108%, rgba(255,140,60,.42), transparent 72%);
  animation: dBraise 2.8s ease-in-out infinite;
}
@keyframes dBraise { 0%,100% { opacity: .6; } 50% { opacity: 1; } }

/* 8 · LA SENTENCE — le bois veiné et le vernis */
.amb.a-sentence::after {
  background:
    repeating-linear-gradient(92deg, rgba(0,0,0,.14) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(88deg, rgba(255,214,107,.045) 0 2px, transparent 2px 23px),
    linear-gradient(160deg, rgba(255,255,255,.10), transparent 42%);
}

/* 9 · LE RELAIS — le papier et le grain de la machine */
.amb.a-relais::after {
  background:
    repeating-linear-gradient(0deg, rgba(90,75,45,.05) 0 1px, transparent 1px 3px),
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.5), transparent 58%);
}

/* 10 · LE SOUPÇON — la poussière dans le faisceau */
.amb.a-soupcon::after {
  background-image:
    radial-gradient(42% 60% at 50% -14%, rgba(255,214,107,.22), transparent 70%),
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 1.7px),
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.04) 1px, transparent 1.7px);
  background-size: auto, 17px 17px, 29px 29px;
  background-position: 0 0, 0 0, 9px 13px;
  mix-blend-mode: screen;
  animation: sPous 7s ease-in-out infinite alternate;
}
@keyframes sPous { from { transform: translateY(0); } to { transform: translateY(-7px); } }

/* 11 · CHAUD-FROID — le verre de l'écran et son balayage */
.amb.a-chaudfroid::after {
  background:
    repeating-linear-gradient(0deg, rgba(57,224,255,.06) 0 1px, transparent 1px 4px),
    radial-gradient(60% 45% at 50% 42%, rgba(57,224,255,.12), transparent 70%);
}
.amb.a-chaudfroid .radar::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 50%; height: 2px;
  transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(57,224,255,.75), transparent);
  animation: cfBalai 3.4s linear infinite;
}
@keyframes cfBalai { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .amb::after, .amb.a-course .lane::after, .amb.a-chaudfroid .radar::after { animation: none; }
}

/* l'objet en volume des onze jeux d'origine : posé DANS l'ambiance, derrière
   son contenu. « .amb > * » met déjà le contenu au-dessus. */
/* posé EN BAS de l'ambiance, jamais au milieu : centré, il passait derrière
   le texte du jeu et on lisait les deux l'un sur l'autre. */
.kjObjetRonde {
  position: absolute; left: 0; right: 0; bottom: 4%; height: 46%;
  z-index: 1; pointer-events: none;
  display: grid; place-items: center; opacity: .95;
}
.kjObjetRonde canvas { display: block; }
.jeuPlein > .amb > .kjObjetRonde { bottom: 6%; height: 42%; }

/* ═══ La toile du mois (assemblage, 28/10/2026) ═══ */
.toile-carte{position:relative;padding:0!important;overflow:hidden;height:196px;cursor:pointer;background:#16121c!important;border-color:rgba(255,255,255,.55)!important}
.toile-mini{position:absolute;inset:0;width:100%;height:100%;display:block}
.toile-live{position:absolute;top:10px;left:11px;font-size:9.5px;font-weight:800;letter-spacing:.06em;color:#fff;background:rgba(226,58,72,.92);border-radius:999px;padding:3px 8px}
.toile-bas{position:absolute;left:0;right:0;bottom:0;padding:30px 13px 11px;background:linear-gradient(rgba(10,6,16,0),rgba(10,6,16,.88));color:#fff}
.toile-bas b{display:block;font-family:'Fraunces',serif;font-weight:300;font-size:21px;line-height:1}
.toile-bas b i{color:#ff8a94}
.toile-bas span{display:block;font-size:11.5px;color:#e3d8ee;margin-top:4px}
.toile-bientot{cursor:default}.toile-ciel{background:#05030c;overflow:hidden}
.toile-ciel .cc{position:absolute;left:-30%;top:-30%;width:160%;height:160%;background-size:100% 100%;will-change:transform}
.toile-ciel .c0{left:-45%;top:-12%;animation:cielA 30s ease-in-out infinite alternate}
.toile-ciel .c1{animation:cielB 20s ease-in-out infinite alternate}
.toile-ciel .c2{animation:cielC 13s ease-in-out infinite alternate}
.toile-ciel .sc{animation:cielC 13s ease-in-out infinite alternate,brille 2.6s ease-in-out infinite alternate}
.toile-ciel .s1{animation-delay:0s,-.9s;animation-duration:13s,3.4s}.toile-ciel .s2{animation-delay:0s,-1.7s;animation-duration:13s,2.1s}
@keyframes cielA{from{transform:translate(0,0) scale(1)}to{transform:translate(-7%,4%) scale(1.1)}}
@keyframes cielB{from{transform:translate(2%,-1%)}to{transform:translate(-7%,3%)}}
@keyframes cielC{from{transform:translate(6%,-3%)}to{transform:translate(-14%,7%)}}
@keyframes brille{from{opacity:.25}to{opacity:1}}
.toile-ciel .pl{position:absolute;will-change:transform}
.toile-ciel .p0{animation:flotte0 26s ease-in-out infinite alternate}.toile-ciel .p1{animation:flotte1 32s ease-in-out infinite alternate}.toile-ciel .p2{animation:flotte2 18s ease-in-out infinite alternate}
@keyframes flotte0{from{transform:translate(0,0) rotate(-2deg)}to{transform:translate(-26px,10px) rotate(3deg)}}
@keyframes flotte1{from{transform:translate(0,0)}to{transform:translate(22px,-12px)}}
@keyframes flotte2{0%{transform:translate(0,0)}50%{transform:translate(30px,-8px)}100%{transform:translate(48px,4px)}}
.toile-ciel .filante{position:absolute;width:120px;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.95));opacity:0;transform-origin:right center}
.toile-ciel .f0{top:18%;left:30%;animation:filante 5s 1s ease-out infinite}
.toile-ciel .f1{top:45%;left:65%;animation:filante 8s 3.5s ease-out infinite}
@keyframes filante{0%{opacity:0;transform:rotate(-28deg) translateX(0)}2%{opacity:1}9%{opacity:0;transform:rotate(-28deg) translateX(-240px)}100%{opacity:0;transform:rotate(-28deg) translateX(-240px)}}
@media (prefers-reduced-motion:reduce){.toile-ciel .cc,.toile-ciel .pl,.toile-ciel .filante{animation:none}}.toile-live.bientot{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);letter-spacing:.14em}
.toile-ecran{position:relative;height:min(62vh,560px);border-radius:18px;overflow:hidden;background:#16121c;touch-action:none}
.toile-ecran canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.toile-zoom{position:absolute;right:8px;top:8px;display:flex;flex-direction:column;gap:6px}
.toile-zoom button{width:38px;height:38px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(22,18,28,.82);color:#fff;font-size:18px}
.toile-revele{position:absolute;right:54px;top:8px;width:84px;border-radius:8px;border:2px solid #fff}
.toile-types{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:10px}
.toile-types .opt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:10px;border-radius:14px}
.toile-types .opt b{font-size:14px}
.toile-types .opt span{font-size:11px;opacity:.7}
.toile-types .opt.on{outline:2px solid var(--acc)}

/* ---------- tes liens sont ta messagerie (29/10) ---------- */
.lrow{cursor:pointer;align-items:center;gap:12px}
.lrow .chat{position:relative;flex:none;display:flex}
.lrow .b{min-width:0;flex:1}
.lr1{display:flex;align-items:baseline;gap:8px}
.lr1 .t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lr1 .lk{flex:none;font-size:11px;color:var(--tx3);font-weight:600}
.lr2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lrow.nonlu .lr2{color:var(--tx);font-weight:650}
.lrow.nonlu .lk{color:var(--acc)}
.lrow.fini{opacity:.62}
.latt{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.latt span{font-size:10.5px;font-weight:750;padding:3px 8px;border-radius:99px;color:var(--acc);background:color-mix(in srgb,var(--acc) 12%,transparent);border:1px solid color-mix(in srgb,var(--acc) 30%,transparent)}

/* l'étagère d'un lien */
.carnet-haut{position:sticky;top:0;z-index:6;margin:0 -18px;padding:0 18px 2px;background:color-mix(in srgb,var(--bg) 52%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);border-bottom:1px solid color-mix(in srgb,var(--tx) 7%,transparent);border-radius:0 0 22px 22px}
.carnet-haut .head{margin-bottom:8px}
.etag{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 10px;scroll-snap-type:x proximity}
.etag::-webkit-scrollbar{display:none}
.et{flex:none;display:flex;align-items:center;gap:8px;padding:6px 13px 6px 6px;border-radius:99px;cursor:pointer;scroll-snap-align:start;
  background:color-mix(in srgb,var(--tx) 5%,transparent);border:1px solid color-mix(in srgb,var(--tx) 10%,transparent);transition:transform .15s,border-color .2s}
.et:active{transform:scale(.96)}
.et .ic{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex:none;color:var(--acc);
  background:radial-gradient(circle at 30% 25%,color-mix(in srgb,var(--acc) 34%,transparent),color-mix(in srgb,var(--acc2) 14%,transparent) 70%);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc) 30%,transparent)}
.et svg,.ic-et svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.et .etx{display:flex;flex-direction:column;line-height:1.15}
.et b{font-size:12.5px;font-weight:750;color:var(--tx)}
.et small{font-size:10.5px;font-weight:600;color:var(--tx3);white-space:nowrap}
.et.al{border-color:color-mix(in srgb,var(--acc) 65%,transparent)}
.et.al small{color:var(--acc)}
.et.al .ic{animation:etPouls 2.4s ease-in-out infinite}
@keyframes etPouls{0%,100%{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc) 40%,transparent),0 0 0 0 color-mix(in srgb,var(--acc) 40%,transparent)}
  50%{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc) 40%,transparent),0 0 0 6px color-mix(in srgb,var(--acc) 0%,transparent)}}
/* grande, sur l'écran du lien : une grille de tuiles */
.etag.grand{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 8px;overflow:visible;padding:2px 0 12px}
.etag.grand .et{flex-direction:column;justify-content:flex-start;text-align:center;gap:7px;padding:13px 4px 11px;border-radius:20px;
  background:linear-gradient(160deg,color-mix(in srgb,var(--tx) 7%,transparent),color-mix(in srgb,var(--tx) 2%,transparent))}
.etag.grand .et .ic{width:46px;height:46px}
.etag.grand .et svg{width:22px;height:22px;stroke-width:1.6}
.etag.grand .etx{align-items:center}
.etag.grand small{white-space:normal}
@media (max-width:360px){.etag.grand{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.et.al .ic{animation:none}}

/* profil des autres : un compte, et ce qui est entre vous */
.profliens{display:flex;align-items:center;gap:14px}
.profliens .pl-n{font-family:'Fraunces',serif;font-size:38px;line-height:1;color:var(--acc);min-width:44px;text-align:center}
.ic-et{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;color:var(--acc);background:color-mix(in srgb,var(--acc) 14%,transparent)}
.ic-et svg{width:18px;height:18px}

/* tu connais peut-être */
.sugg{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 14px;scroll-snap-type:x proximity}
.sugg::-webkit-scrollbar{display:none}
.sg{position:relative;flex:none;width:132px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:16px 10px 12px;border-radius:22px;cursor:pointer;
  background:var(--glass);border:1px solid var(--line);-webkit-backdrop-filter:var(--verre-flou);backdrop-filter:var(--verre-flou)}
.sg .av.big{width:62px;height:62px;font-size:24px;margin:0 0 6px;box-shadow:0 0 0 4px var(--glass)}
.sg b{font-size:13px;font-weight:750;color:var(--tx);line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sg small{font-size:11px;color:var(--tx3);line-height:1.25;min-height:28px}
.sg .sgb{margin-top:4px;font-size:12px;font-weight:750;padding:6px 16px;border-radius:99px;color:var(--ink-on-acc);background:linear-gradient(90deg,var(--acc),var(--acc2))}
.sg .sgx{position:absolute;top:6px;right:8px;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;font-size:16px;line-height:1;color:var(--tx3)}
.sg .sgx:hover{background:color-mix(in srgb,var(--tx) 8%,transparent)}

/* ======== L'ENTRÉE D'UN JEU ET LA PARTIE LIBRE (2 nov.) ======== */
.kjIntro{position:relative;padding:58px 2px 24px;display:flex;flex-direction:column;gap:18px;
  animation:kjiIn .42s cubic-bezier(.2,.9,.3,1) both}
@keyframes kjiIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.kjiTete{text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.kjiEmb{width:112px;height:112px;border-radius:30px;display:grid;place-items:center;
  background:var(--glass);border:1px solid var(--line);box-shadow:var(--verre-ombre),var(--verre-arete);
  animation:kjiFlotte 5s ease-in-out infinite}
.kjiEmb svg{width:92px;height:92px}
@keyframes kjiFlotte{50%{transform:translateY(-5px) rotate(-1.5deg)}}
.kjiTete h2{margin:6px 0 0;font-size:26px;letter-spacing:-.02em}
.kjiQuoi{margin:0;max-width:330px;color:var(--tx2);font-size:15px;line-height:1.45}
.kjiRegles{background:var(--glass);border:1px solid var(--line);border-radius:20px;padding:16px 18px 6px;
  box-shadow:var(--verre-arete)}
.kjiRegles h3{margin:0 0 8px;font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--tx2)}
.kjiRegles ol{margin:0;padding:0;list-style:none;counter-reset:r}
.kjiRegles li{counter-increment:r;position:relative;padding:0 0 12px 34px;font-size:14.5px;line-height:1.45}
.kjiRegles li::before{content:counter(r);position:absolute;left:0;top:-1px;width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;font-size:12px;font-weight:700;background:var(--acc);color:var(--ink-on-acc,#fff)}
.kjiBoutons{display:flex;flex-direction:column;gap:10px}
.kjiB{display:flex;flex-direction:column;gap:3px;text-align:left;padding:14px 18px;border-radius:18px;cursor:pointer;
  background:var(--glass);border:1px solid var(--line);color:var(--tx);font:inherit;
  -webkit-backdrop-filter:var(--verre-flou);backdrop-filter:var(--verre-flou);box-shadow:var(--verre-ombre);
  transition:transform .14s cubic-bezier(.2,.9,.3,1.3)}
.kjiB:active{transform:scale(.97)}
.kjiB b{font-size:16.5px}
.kjiB small{font-size:13px;color:var(--tx2);line-height:1.35}
.kjiB.p{background:var(--acc);border-color:transparent;color:var(--ink-on-acc,#fff)}
.kjiB.p small{color:inherit;opacity:.8}
.kjLibre{display:flex;align-items:center;gap:10px;margin:0 0 10px 52px;padding:8px 8px 8px 14px;border-radius:16px;
  background:var(--glass);border:1px dashed var(--line)}
.kjLibreT{flex:1;display:flex;flex-direction:column;line-height:1.2}
.kjLibreT b{font-size:14px}
.kjLibreT small{font-size:12px;color:var(--tx2)}
.kjLibreN{border:0;border-radius:12px;padding:9px 13px;font:inherit;font-weight:700;font-size:13.5px;cursor:pointer;
  background:var(--acc);color:var(--ink-on-acc,#fff)}
.kjLibreN:active{transform:scale(.95)}
@media (prefers-reduced-motion:reduce){.kjIntro,.kjiEmb{animation:none}}
/* en partie libre, pas de « un autre demain » : on rejoue tout de suite */
.kjLibre ~ * [class*="Demain"],.kjLibre ~ * #kjDemain{display:none!important}