/* Logimind — styles communs à l'accueil et à toutes les pages.
   Layout : accueil en grille de blocs (2 colonnes sur grand écran, 1 sur téléphone ;
   s'il y a un nombre impair de blocs, le dernier prend toute la largeur),
   chaque jeu sur une colonne centrée, un écran à la fois (réglages → partie → résultat).
   Thème : clair par défaut, sombre si le système le demande, et bouton pour forcer l'un ou l'autre. */
:root{
  --bg:#eef3fb; --surface:#ffffff; --ink:#14213d; --muted:#5b6b8a; --line:#d5deee; --ombre:rgba(20,33,61,.14);
  --good:#14915a; --bad:#d6334a; --good-bg:#e3f6ec; --bad-bg:#fde7ea;
  /* couleurs des jeux (une par jeu, choisie dans commun/jeux.js) */
  --bleu:#2b5cff; --vert:#0f7f5b; --orange:#c4520f; --violet:#6d3fd0; --rose:#c22d6e;
  --bleu-bg:#e6edff; --vert-bg:#dff3ea; --orange-bg:#fcebdd; --violet-bg:#eee6fd; --rose-bg:#fbe4ee;
  --cyan:#0b7a8f; --ambre:#a86400; --indigo:#4338ca; --cyan-bg:#dcf2f6; --ambre-bg:#fcefd9; --indigo-bg:#e6e5fb; --olive:#557000; --olive-bg:#ebf3d6;
  --accent:var(--bleu); --accent-bg:var(--bleu-bg); --accent-ink:#ffffff;
  --display:"Bricolage Grotesque", "Arial Black", system-ui, sans-serif;
  --body:"Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ressort:cubic-bezier(.34,1.56,.64,1);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0d1424; --surface:#16203a; --ink:#e7edfb; --muted:#93a2c3; --line:#28355a; --ombre:rgba(0,0,0,.5);
  --good:#4bd08f; --bad:#ff6b80; --good-bg:#123326; --bad-bg:#3a1822;
  --bleu:#7d98ff; --vert:#4fd1a1; --orange:#ff9a5c; --violet:#b597ff; --rose:#ff7fb4;
  --bleu-bg:#1b2650; --vert-bg:#11342a; --orange-bg:#3a2416; --violet-bg:#2a1f47; --rose-bg:#3d1a2b;
  --cyan:#4fd3e6; --ambre:#ffbf4d; --indigo:#a5a3ff; --cyan-bg:#0f3139; --ambre-bg:#3a2a10; --indigo-bg:#25234d; --olive:#b9db55; --olive-bg:#26300f;
  --accent-ink:#0d1424; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0d1424; --surface:#16203a; --ink:#e7edfb; --muted:#93a2c3; --line:#28355a; --ombre:rgba(0,0,0,.5);
  --good:#4bd08f; --bad:#ff6b80; --good-bg:#123326; --bad-bg:#3a1822;
  --bleu:#7d98ff; --vert:#4fd1a1; --orange:#ff9a5c; --violet:#b597ff; --rose:#ff7fb4;
  --bleu-bg:#1b2650; --vert-bg:#11342a; --orange-bg:#3a2416; --violet-bg:#2a1f47; --rose-bg:#3d1a2b;
  --cyan:#4fd3e6; --ambre:#ffbf4d; --indigo:#a5a3ff; --cyan-bg:#0f3139; --ambre-bg:#3a2a10; --indigo-bg:#25234d; --olive:#b9db55; --olive-bg:#26300f;
  --accent-ink:#0d1424; color-scheme:dark}
:root[data-theme="light"]{color-scheme:light}

.c-bleu{--accent:var(--bleu);--accent-bg:var(--bleu-bg)}
.c-vert{--accent:var(--vert);--accent-bg:var(--vert-bg)}
.c-orange{--accent:var(--orange);--accent-bg:var(--orange-bg)}
.c-violet{--accent:var(--violet);--accent-bg:var(--violet-bg)}
.c-rose{--accent:var(--rose);--accent-bg:var(--rose-bg)}
.c-cyan{--accent:var(--cyan);--accent-bg:var(--cyan-bg)}
.c-ambre{--accent:var(--ambre);--accent-bg:var(--ambre-bg)}
.c-indigo{--accent:var(--indigo);--accent-bg:var(--indigo-bg)}
.c-olive{--accent:var(--olive);--accent-bg:var(--olive-bg)}

:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:1rem;line-height:1.5;
  padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px));padding-block:24px 48px;
  transition:background-color .35s, color .35s}
/* comme une appli : pas de sélection de texte ni de loupe au doigt (sauf dans les champs à remplir) */
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
input,textarea,[contenteditable]{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
.wrap{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
.wrap.hub{max-width:980px;gap:28px}
.wrap.large{max-width:820px}
h1{font-family:var(--display);font-weight:800;font-size:clamp(1.7rem,6vw,2.3rem);line-height:1.05;margin:0;text-wrap:balance}
h2{font-family:var(--display);font-weight:800;font-size:1.35rem;margin:0;text-wrap:balance}
.sub{color:var(--muted);margin:0}
a{color:var(--accent)}
button{font:inherit;cursor:pointer}
.btn{display:inline-block;background:var(--accent);color:var(--accent-ink);border:0;border-radius:10px;padding:12px 20px;font-weight:700;font-size:1rem;text-decoration:none;text-align:center;transition:transform .15s var(--ressort), filter .15s}
@media (hover:hover) and (pointer:fine){.btn:hover{filter:brightness(1.08);transform:translateY(-1px)}}
.btn:active{transform:scale(.96)}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn:focus-visible,input:focus-visible,select:focus-visible,.link:focus-visible,a:focus-visible,.theme-btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.link{background:none;border:0;color:var(--accent);font-weight:700;padding:4px 0;text-decoration:underline;text-underline-offset:3px}
.row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.row.gauche{justify-content:flex-start}

/* ---------- bouton clair / sombre ---------- */
.theme-btn{flex:none;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);display:grid;place-items:center;padding:0;transition:border-color .2s, background-color .35s, transform .2s var(--ressort)}
.theme-btn:hover{border-color:var(--accent);transform:rotate(-12deg) scale(1.06)}
.theme-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.theme-btn.tourne svg{animation:tourne .5s var(--ressort)}
@keyframes tourne{from{transform:rotate(-120deg) scale(.4);opacity:0}}

/* ---------- accueil ---------- */
.hub-haut{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.hub-tete{display:flex;flex-direction:column;gap:8px;max-width:60ch;min-width:0}
.hub-tete h1{font-size:clamp(2.4rem,9vw,3.6rem)}
.hub-tete h1 span{color:var(--bleu);position:relative;display:inline-block}
.hub-tete h1 span::after{content:"";position:absolute;left:0;right:0;bottom:-.05em;height:.12em;border-radius:99px;background:var(--bleu);opacity:.35;transform-origin:left;animation:trait .8s .3s cubic-bezier(.2,.8,.2,1) backwards}
@keyframes trait{from{transform:scaleX(0)}}
.eyebrow{margin:0;font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

.cartes{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media (max-width:700px){.cartes{grid-template-columns:1fr}}
.carte{--ty:0px;--rx:0deg;--ry:0deg;position:relative;isolation:isolate;display:flex;flex-direction:column;background:var(--surface);border:1.5px solid var(--line);border-radius:22px;overflow:hidden;color:var(--ink);text-decoration:none;
  transform:perspective(900px) translateY(var(--ty)) rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform .3s var(--ressort), box-shadow .3s, border-color .3s, background-color .35s;
  animation:entree .7s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--i,0) * 110ms)}
@keyframes entree{from{opacity:0;transform:perspective(900px) translateY(26px) scale(.96)}}
.carte::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%), color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%)}
.carte:hover,.carte:focus-visible{--ty:-6px;border-color:var(--accent);box-shadow:0 18px 40px -12px var(--ombre), 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent)}
.carte:hover::after,.carte:focus-visible::after{opacity:1}
.carte:active{--ty:-2px;transition-duration:.1s}
.carte.suit{transition:transform .12s ease-out, box-shadow .3s, border-color .3s}

.banniere{position:relative;display:flex;align-items:center;gap:18px;padding:22px;background-color:var(--accent-bg);
  background-image:radial-gradient(color-mix(in srgb, var(--accent) 24%, transparent) 1.3px, transparent 1.6px);background-size:16px 16px;transition:background-color .35s}
.carte:hover .banniere{animation:derive 6s linear infinite}
@keyframes derive{to{background-position:64px 32px}}
.icone{flex:none;width:84px;height:84px;animation:flotte 5s ease-in-out infinite;animation-delay:calc(var(--i,0) * -1.3s)}
@keyframes flotte{50%{transform:translateY(-4px) rotate(-2deg)}}
.carte:hover .icone{animation-play-state:paused}
.apercu{min-width:0;color:var(--accent);font-family:var(--display);font-weight:800;font-size:clamp(1.4rem,5.5vw,2.1rem);line-height:1.1;text-wrap:balance;font-variant-numeric:tabular-nums;transition:transform .3s var(--ressort)}
.carte:hover .apercu{transform:translateX(4px)}
.carte-corps{display:flex;flex-direction:column;gap:8px;padding:18px 22px 0;flex:1}
.carte-corps p{margin:0;color:var(--muted);max-width:56ch}
.puces{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.puces span{font-size:.78rem;font-weight:700;border:1.5px solid var(--line);border-radius:99px;padding:2px 10px;color:var(--muted);transition:border-color .3s, color .3s}
.carte:hover .puces span{border-color:color-mix(in srgb, var(--accent) 45%, var(--line))}
.carte-pied{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:16px 22px 18px;font-size:.9rem;color:var(--muted);font-variant-numeric:tabular-nums}
.jouer{color:var(--accent);font-weight:700;white-space:nowrap}
.jouer i{display:inline-block;font-style:normal;transition:transform .3s var(--ressort)}
.carte:hover .jouer i{transform:translateX(6px)}
/* nombre impair de blocs : le dernier s'étale sur toute la largeur */
@media (min-width:701px){
  .cartes:not(.une) > .carte:last-child:nth-child(odd){grid-column:1 / -1;display:grid;grid-template-columns:42% 1fr;grid-template-rows:1fr auto}
  .cartes:not(.une) > .carte:last-child:nth-child(odd) .banniere{grid-row:1 / 3;flex-direction:column;justify-content:center;text-align:center}
  .cartes:not(.une) > .carte:last-child:nth-child(odd) .carte-corps{padding-top:22px}
}

/* ---------- icônes animées ---------- */
.ico{display:block;width:100%;height:100%;overflow:visible}
.ico text{font-family:var(--display);font-weight:800;text-anchor:middle}
.ico *{transform-box:fill-box}
.i-fond{fill:var(--surface);transition:fill .35s}
.i-cadre{fill:none;stroke:var(--accent);stroke-width:3}
.i-cadre-plein{stroke:var(--accent);stroke-width:3}
.i-ombre{fill:var(--accent);opacity:.28}
.i-lettre{fill:var(--accent);font-size:44px}
.i-badge{fill:var(--accent)}
.i-num{fill:var(--accent-ink);font-size:17px}
@keyframes defile{0%,22%{transform:translateY(0)}33%,55%{transform:translateY(calc(-1 * var(--pas)))}66%,88%{transform:translateY(calc(-2 * var(--pas)))}100%{transform:translateY(calc(-3 * var(--pas)))}}
.carte:hover .i-defile,.carte:focus-visible .i-defile,.entete-icone:hover .i-defile{animation:defile 2.6s cubic-bezier(.7,0,.25,1) infinite}

.i-sol{stroke:var(--accent);stroke-width:3;stroke-linecap:round;opacity:.4}
.i-barre{fill:var(--accent);transform-origin:50% 100%}
.i-vide{fill:var(--surface);stroke:var(--accent);stroke-width:2.5;stroke-dasharray:5 4;transition:fill .35s}
.i-trace{fill:none;stroke:var(--accent);stroke-width:2;stroke-dasharray:3 4;opacity:.6}
.i-point{fill:var(--surface);stroke:var(--accent);stroke-width:2.5}
.i-q{fill:var(--accent);font-size:30px;transform-origin:50% 100%}
@keyframes pousse{0%{transform:scaleY(.25)}60%{transform:scaleY(1.08)}100%{transform:scaleY(1)}}
@keyframes saute{0%,100%{transform:translateY(0)}30%{transform:translateY(-10px) rotate(-8deg)}55%{transform:translateY(0)}70%{transform:translateY(-4px)}}
@keyframes pointille{to{stroke-dashoffset:-28}}
.carte:hover .i-barre,.entete-icone:hover .i-barre{animation:pousse .7s var(--d) var(--ressort) both}
.carte:hover .i-q,.entete-icone:hover .i-q{animation:saute 1.2s .25s ease-in-out infinite}
.carte:hover .i-trace,.entete-icone:hover .i-trace{animation:pointille .8s linear infinite}

.i-ext{fill:var(--accent);font-size:10.5px}
.i-disque{fill:var(--accent)}
.i-int{fill:var(--accent-ink);font-size:8.5px}
.i-centre{fill:var(--surface)}
.i-repere{fill:var(--accent)}
.i-roue{transform-box:view-box;transform-origin:48px 48px;transition:transform .9s var(--ressort)}
.carte:hover .i-roue,.carte:focus-visible .i-roue,.entete-icone:hover .i-roue{transform:rotate(135deg)}
.ico-codes{animation:none}

.i-rayons line{stroke:var(--accent);stroke-width:3.5;stroke-linecap:round;transform-box:view-box;transform-origin:48px 40px;opacity:.55}
.i-ampoule{fill:var(--surface);stroke:var(--accent);stroke-width:3.5;transition:fill .4s}
.i-filament{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.i-culot{fill:var(--accent)}
@keyframes rayonne{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.18);opacity:1}}
.carte:hover .i-ampoule,.entete-icone:hover .i-ampoule{fill:color-mix(in srgb, var(--accent) 22%, var(--surface))}
.carte:hover .i-rayons line,.entete-icone:hover .i-rayons line{animation:rayonne 1.1s ease-in-out infinite}

.i-plein{fill:var(--accent)}
.i-grille{transform-box:view-box;transform-origin:48px 48px;transition:transform .8s var(--ressort)}
.carte:hover .i-grille{transform:rotate(90deg)}

/* ---------- en-tête des pages ---------- */
.entete{display:flex;flex-direction:column;gap:8px}
.entete-haut{display:flex;justify-content:space-between;align-items:center;gap:12px}
.retour{font-weight:700;text-decoration:none;color:var(--muted);transition:color .2s, transform .2s}
.retour:hover{color:var(--accent);transform:translateX(-3px)}
.entete-ligne{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.entete-titre{display:flex;align-items:center;gap:12px;min-width:0}
.entete-icone{flex:none;width:52px;height:52px;animation:pop .6s var(--ressort) backwards}
.entete h1{color:var(--ink)}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:14px;transition:background-color .35s, border-color .35s}
.modes{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){.modes{grid-template-columns:1fr}}
.modes > .panel,.anime > *{animation:entree .6s cubic-bezier(.2,.8,.2,1) backwards}
.modes > .panel:nth-child(2),.anime > :nth-child(2){animation-delay:.08s}
.anime > :nth-child(3){animation-delay:.16s}
.anime > :nth-child(4){animation-delay:.24s}
.anime > :nth-child(n+5){animation-delay:.32s}
.field{display:flex;flex-direction:column;gap:4px}
.field label{font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.field input,.field select{font:inherit;font-size:1rem;padding:10px 12px;border-radius:10px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);width:100%}
.panel > .btn{margin-top:auto}
.tips{color:var(--muted);font-size:.9rem;margin:0}
.tips b{color:var(--ink)}

/* tableau de référence */
.ref{overflow-x:auto;animation:entree .4s cubic-bezier(.2,.8,.2,1)}
.ref table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums;text-align:center;min-width:420px}
.ref td{border:1px solid var(--line);padding:6px 4px}
.ref tr:nth-child(odd) td{font-family:var(--display);font-weight:800;color:var(--accent)}

/* ---------- partie ---------- */
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;font-variant-numeric:tabular-nums;color:var(--muted);font-weight:700}
.stage{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:28px 20px;display:flex;flex-direction:column;align-items:center;gap:16px;transition:background-color .2s, border-color .35s}
.stage.good{background:var(--good-bg);animation:bon .4s var(--ressort)}
.stage.bad{background:var(--bad-bg);animation:secoue .4s ease}
@keyframes bon{40%{transform:scale(1.02)}}
@keyframes secoue{20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
.timer{width:100%;height:10px;border-radius:99px;background:var(--line);overflow:hidden}
.timer i{display:block;height:100%;width:100%;background:var(--accent);transform-origin:left;border-radius:99px}
.qsub{font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0;text-align:center}
.prompt{font-family:var(--display);font-weight:800;line-height:1.05;text-align:center;font-variant-numeric:tabular-nums;max-width:100%;overflow-wrap:anywhere}
.prompt.pop{animation:pop .45s var(--ressort)}
@keyframes pop{from{transform:scale(.6);opacity:0}}
.prompt.xl{font-size:clamp(6rem,30vw,9rem);line-height:1}
.prompt.l{font-size:clamp(2.2rem,11vw,3.6rem);letter-spacing:.12em}
.prompt.m{font-size:clamp(1.6rem,7.5vw,2.6rem);word-spacing:.15em}
.contexte{margin:0;background:var(--accent-bg);color:var(--accent);border-radius:12px;padding:8px 16px;font-family:var(--display);font-weight:800;font-size:clamp(1.1rem,5vw,1.5rem);text-align:center;letter-spacing:.06em;max-width:100%;overflow-wrap:anywhere}
.answer{font-family:var(--display);font-weight:800;font-size:2.2rem;width:6ch;max-width:100%;text-align:center;padding:8px;border-radius:12px;border:2px solid var(--line);background:var(--bg);color:var(--ink);font-variant-numeric:tabular-nums;transition:border-color .2s}
.answer:focus{border-color:var(--accent)}
.answer.mot{width:11ch;letter-spacing:.1em;text-transform:uppercase}
.indice{margin:0;color:var(--muted);font-weight:700;text-align:center;font-variant-numeric:tabular-nums;animation:entree .3s ease}
.feedback{min-height:1.6em;font-weight:700;text-align:center}
.feedback.good{color:var(--good)} .feedback.bad{color:var(--bad)}
.hint{color:var(--muted);font-size:.85rem;text-align:center;margin:0}

/* séries de 5 */
.series{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;width:100%}
.tile{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0;animation:pop .45s var(--ressort) backwards}
.tile:nth-child(2){animation-delay:.05s}.tile:nth-child(3){animation-delay:.1s}.tile:nth-child(4){animation-delay:.15s}.tile:nth-child(5){animation-delay:.2s}
.tile b{font-family:var(--display);font-weight:800;font-size:clamp(2.2rem,11vw,4rem);line-height:1}
.tile input{font-family:var(--display);font-weight:800;font-size:1.5rem;width:100%;text-align:center;padding:8px 2px;border-radius:10px;border:2px solid var(--line);background:var(--bg);color:var(--ink);font-variant-numeric:tabular-nums}
.tile input:focus{border-color:var(--accent)}
.tile.good input{border-color:var(--good);color:var(--good)}
.tile.bad input{border-color:var(--bad);color:var(--bad);text-decoration:line-through;animation:secoue .4s ease}
.tile small{min-height:1.4em;font-weight:700;color:var(--good)}
.tile.bad small{color:var(--bad)}

/* ---------- résultats ---------- */
#results .panel{animation:entree .5s cubic-bezier(.2,.8,.2,1)}
.big{font-family:var(--display);font-weight:800;font-size:clamp(3.5rem,16vw,5rem);line-height:1;font-variant-numeric:tabular-nums;animation:pop .6s .1s var(--ressort) backwards}
.big small{font-size:.4em;color:var(--muted)}
.stats{display:flex;gap:8px 24px;flex-wrap:wrap;color:var(--muted)}
.stats strong{color:var(--ink);font-variant-numeric:tabular-nums}
.record,.stats .record strong{color:var(--good)}
.errs{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.chip{border:1.5px solid var(--bad);color:var(--ink);border-radius:99px;padding:4px 12px;font-variant-numeric:tabular-nums}
.chip b{font-family:var(--display)}
.chip s{color:var(--bad)}

/* ---------- page conseils ---------- */
.section-conseil{gap:12px}
.section-tete{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.section-titre{display:flex;align-items:center;gap:12px}
.section-titre .entete-icone{width:46px;height:46px;animation:none}
.liste{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.liste li{position:relative;padding-left:26px;max-width:68ch}
.liste li::before{content:"";position:absolute;left:4px;top:.45em;width:10px;height:10px;border-radius:3px;background:var(--accent);transform:rotate(45deg)}
.liste b{color:var(--ink)}
.memo{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.memo-bloc{border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:6px;min-width:0}
.memo-bloc h3{margin:0;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.memo-bloc p{margin:0;font-family:var(--display);font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .carte:hover{--ty:0px}
}

/* =====================================================================
   PROFIL ET RANGS
   ===================================================================== */
:root{--r1:#a8642f;--r2:#74839a;--r3:#b98500;--r4:#0f8c6c;--r5:#3b5fe0;--r6:#c0245e;--r-ink:#ffffff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--r1:#e0975c;--r2:#b9c4d2;--r3:#f2c230;--r4:#3fd6a8;--r5:#86a0ff;--r6:#ff6f9d;--r-ink:#0d1424}}
:root[data-theme="dark"]{--r1:#e0975c;--r2:#b9c4d2;--r3:#f2c230;--r4:#3fd6a8;--r5:#86a0ff;--r6:#ff6f9d;--r-ink:#0d1424}
.r1{--rc:var(--r1)}.r2{--rc:var(--r2)}.r3{--rc:var(--r3)}.r4{--rc:var(--r4)}.r5{--rc:var(--r5)}.r6{--rc:var(--r6)}.r0{--rc:var(--line)}

.badge{display:inline-block;flex:none;width:40px;height:40px;overflow:visible}
.badge.petit{width:30px;height:30px}
.badge.moyen{width:52px;height:52px}
.badge.grand{width:96px;height:96px}
.badge .b-fond{fill:var(--rc)}
.badge .b-int{fill:none;stroke:var(--r-ink);stroke-width:1.6;opacity:.45}
.badge text{fill:var(--r-ink);font-family:var(--display);font-weight:800;font-size:13px;text-anchor:middle}
.badge .b-vide{fill:none;stroke:var(--line);stroke-width:2.5;stroke-dasharray:4 3}
.badge.r0 text{fill:var(--muted)}
.badge.r5 .b-fond{filter:drop-shadow(0 0 3px color-mix(in srgb, var(--r5) 60%, transparent))}
.badge.r6 .b-fond{filter:drop-shadow(0 0 5px color-mix(in srgb, var(--r6) 75%, transparent));animation:brille 2.4s ease-in-out infinite}
@keyframes brille{50%{filter:drop-shadow(0 0 9px var(--r6))}}

/* pastille de profil */
.outils{display:flex;align-items:center;gap:10px;flex:none}
.profil-chip{display:flex;align-items:center;gap:10px;padding:4px 14px 4px 4px;border-radius:99px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);text-decoration:none;transition:border-color .2s, transform .2s var(--ressort), background-color .35s}
.profil-chip:hover{border-color:var(--accent);transform:translateY(-1px)}
.profil-txt{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.profil-txt b{font-size:.9rem;max-width:12ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profil-txt small{color:var(--muted);font-size:.75rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.avatar{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-family:var(--display);font-weight:800;font-size:1rem}
.avatar.xl{width:84px;height:84px;font-size:2.4rem;box-shadow:0 0 0 6px var(--accent-bg);animation:pop .6s var(--ressort) backwards}
@media (max-width:480px){.profil-txt{display:none}.profil-chip{padding:4px}.hub-haut{flex-direction:column-reverse}.hub-haut .outils{align-self:flex-end}}

/* pied des blocs de l'accueil */
.pied-rang{display:flex;align-items:center;gap:10px;min-width:0}
.pied-rang > span{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.pied-rang b{color:var(--ink);font-size:.9rem}
.pied-rang small{font-size:.8rem}
.carte:hover .badge{animation:pop .5s var(--ressort)}

/* bande de rang sous le titre d'un jeu */
.bande-rang{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:14px;background:var(--surface);border:1.5px solid var(--line);color:var(--ink);text-decoration:none;transition:border-color .2s, background-color .35s}
.bande-rang:hover{border-color:var(--accent)}
.bande-txt{display:flex;flex-direction:column;line-height:1.3;min-width:0;flex:1}
.bande-txt span{color:var(--muted);font-size:.85rem}
.bande-fleche{color:var(--accent);font-weight:700;font-size:.85rem;white-space:nowrap}
@media (max-width:480px){.bande-fleche{display:none}}

/* résultat : rang gagné */
.rang-ligne{display:flex;align-items:center;gap:12px}
.rang-gagne{display:flex;align-items:center;gap:20px;padding:18px;border-radius:16px;background:color-mix(in srgb, var(--rc) 14%, var(--surface));border:2px solid var(--rc);animation:entree .6s .2s cubic-bezier(.2,.8,.2,1) backwards}
.rang-gagne h3{margin:2px 0 4px;font-family:var(--display);font-weight:800;font-size:clamp(1.8rem,7vw,2.4rem);color:var(--rc);line-height:1}
.rang-eclat{position:relative;flex:none}
.rang-eclat .badge{animation:arrivee 1s .3s var(--ressort) backwards}
.rang-eclat::before{content:"";position:absolute;inset:-14px;border-radius:50%;background:repeating-conic-gradient(color-mix(in srgb, var(--rc) 35%, transparent) 0 12deg, transparent 12deg 30deg);animation:rayons 8s linear infinite;z-index:-1;
  -webkit-mask:radial-gradient(circle, #000 35%, transparent 70%);mask:radial-gradient(circle, #000 35%, transparent 70%)}
@keyframes arrivee{0%{transform:scale(0) rotate(-200deg);opacity:0}100%{transform:none}}
@keyframes rayons{to{transform:rotate(360deg)}}
@media (max-width:480px){.rang-gagne{flex-direction:column;text-align:center}}

/* page profil */
.identite{gap:20px}
.identite-haut{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.identite-champs{display:flex;flex-direction:column;gap:12px;flex:1;min-width:220px}
.label-txt{font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.couleurs{display:flex;gap:10px;flex-wrap:wrap}
.pastille{width:34px;height:34px;border-radius:50%;border:3px solid var(--surface);background:var(--accent);box-shadow:0 0 0 1.5px var(--line);padding:0;transition:transform .2s var(--ressort), box-shadow .2s}
.pastille:hover{transform:scale(1.1)}
.pastille.choisie{box-shadow:0 0 0 3px var(--accent)}
.pastille:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.niveau{display:flex;flex-direction:column;gap:8px}
.niveau-ligne{display:flex;justify-content:space-between;gap:12px;font-variant-numeric:tabular-nums}
.niveau-ligne span{font-family:var(--display);font-weight:800;color:var(--accent)}
.jauge{height:12px;border-radius:99px;background:var(--line);overflow:hidden}
.jauge i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--r1),var(--r3),var(--r5),var(--r6));transform-origin:left;transform:scaleX(0);transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.jeu-rang.vise{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-bg)}
.rang-actuel{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:1.1rem}
.echelle{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.seg{height:8px;border-radius:99px;background:var(--line)}
.seg.plein{background:var(--rc);animation:remplit .5s calc(var(--k) * 80ms + .2s) cubic-bezier(.2,.8,.2,1) backwards;transform-origin:left}
@keyframes remplit{from{transform:scaleX(0)}}
.paliers{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.paliers li{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:12px;border:1.5px solid transparent}
.palier-txt{display:flex;flex-direction:column;line-height:1.3;flex:1;min-width:0}
.palier-txt span{color:var(--muted);font-size:.88rem}
.etat{font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.paliers li.fait .etat{color:var(--good)}
.paliers li.actuel{border-color:var(--accent);background:var(--accent-bg)}
.paliers li.actuel .etat{color:var(--accent)}
.paliers li.bloque .badge{opacity:.35;filter:grayscale(1)}
.paliers li.bloque .palier-txt b{color:var(--muted)}
@media (max-width:480px){.paliers li{flex-wrap:wrap}.etat{width:100%;padding-left:42px}}
.btn.danger{background:var(--bad);color:var(--accent-ink)}

/* ---------- grilles de nombres ---------- */
.prompt.g{width:100%;display:flex;justify-content:center}
.grille{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:8px;width:min(100%,calc(var(--n,3) * 100px))}
.grille.n4{gap:7px}.grille.n5{gap:6px}
.case{aspect-ratio:1;display:grid;place-items:center;border-radius:14px;border:2px solid var(--line);background:var(--bg);font-size:clamp(1.5rem,8vw,2.3rem);color:var(--ink);animation:pop .4s calc(var(--k) * 35ms) var(--ressort) backwards}
.case.trou{border-color:var(--accent);border-style:dashed;background:var(--accent-bg);color:var(--accent);animation:pop .4s calc(var(--k) * 35ms) var(--ressort) backwards, respire 1.6s 1s ease-in-out infinite}
.case.trou.ok{border-style:solid;border-color:var(--good);color:var(--good);background:var(--good-bg);animation:pop .4s var(--ressort)}
.case.trou.ko{border-style:solid;border-color:var(--bad);color:var(--bad);background:var(--bad-bg);animation:pop .4s var(--ressort)}
@keyframes respire{50%{transform:scale(1.06)}}
.grille.n4 .case{font-size:clamp(1.15rem,6vw,1.9rem);border-radius:12px}
.grille.n5 .case{font-size:clamp(.95rem,4.6vw,1.55rem);border-radius:10px}

/* icônes : grilles et profil */
.i-case{fill:var(--surface);stroke:var(--accent);stroke-width:2.5;transition:fill .35s}
.i-trou{fill:var(--accent)}
.i-trou-q{fill:var(--accent-ink);font-size:18px;transform-origin:50% 50%}
@keyframes allume{0%,100%{fill:var(--surface)}40%{fill:color-mix(in srgb, var(--accent) 45%, var(--surface))}}
.carte:hover .i-case,.entete-icone:hover .i-case{animation:allume 1.1s var(--d) ease-in-out infinite}
/* le « ? » sautille sans sortir de sa case (l'ancien saut de 10 l'envoyait trop loin) */
@keyframes saute-q{0%,100%{transform:translateY(0)}30%{transform:translateY(-3px) rotate(-8deg)}55%{transform:translateY(0)}70%{transform:translateY(-1.5px)}}
.carte:hover .i-trou-q,.entete-icone:hover .i-trou-q{animation:saute-q 1.1s ease-in-out infinite}
.i-tete,.i-corps{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round}
.i-etoile{fill:var(--accent);transform-origin:50% 50%;transition:transform .6s var(--ressort)}
.entete-icone:hover .i-etoile{transform:rotate(144deg) scale(1.2)}
@media (prefers-reduced-motion:reduce){.jauge i{transition:none}}

/* ---------- défis cliquables ---------- */
.btn.petit{padding:8px 14px;font-size:.88rem;border-radius:9px}
.bande-actions{display:flex;align-items:center;gap:12px;flex:none;flex-wrap:wrap;justify-content:flex-end}
.bande-fleche{text-decoration:none}
.bande-fleche:hover{text-decoration:underline}
@media (max-width:560px){.bande-rang{flex-wrap:wrap}.bande-actions{width:100%;justify-content:space-between}}
.pill-defi{font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);background:var(--accent-bg);border-radius:99px;padding:3px 12px;animation:pop .5s var(--ressort)}
.rang-ligne{flex-wrap:wrap}
.rang-gagne .btn{margin-top:10px}
.paliers a{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:12px;border:1.5px solid transparent;color:var(--ink);text-decoration:none;transition:border-color .2s, background-color .2s, transform .2s var(--ressort)}
.paliers a:hover{border-color:var(--accent);transform:translateX(4px)}
.paliers a:hover .etat{color:var(--accent)}
.paliers li,.paliers li.actuel{padding:0;border:0;background:none}
.paliers li.actuel a{border-color:var(--accent);background:var(--accent-bg)}
.paliers .jouer-defi{display:none}
.paliers a:hover .jouer-defi,.paliers a:focus-visible .jouer-defi{display:inline}
.paliers a:hover .etat-txt,.paliers a:focus-visible .etat-txt{display:none}
@media (max-width:480px){.paliers a{flex-wrap:wrap}}

/* saisie des nombres négatifs */
.saisie-ligne{display:flex;align-items:center;gap:8px;justify-content:center;max-width:100%}
.signe-btn{padding:10px 14px;font-family:var(--display);font-size:1.4rem;line-height:1}

/* ---------- icônes des nouveaux jeux ---------- */
.i-op{fill:var(--accent);font-size:26px}
.i-op-inv{fill:var(--accent-ink);font-size:26px}
.i-tuile-op{transform-box:fill-box;transform-origin:50% 50%}
@keyframes retourne{0%,100%{transform:none}50%{transform:rotateY(180deg) scale(.9)}}
.carte:hover .i-tuile-op,.entete-icone:hover .i-tuile-op{animation:retourne .9s var(--d) ease-in-out infinite}
.i-rond{fill:var(--surface);stroke:var(--accent);stroke-width:3.5}
.i-carre-intrus{fill:var(--accent);transform-box:fill-box;transform-origin:50% 50%}
@keyframes intrus{0%,100%{transform:rotate(0)}25%{transform:rotate(18deg) scale(1.15)}75%{transform:rotate(-18deg) scale(1.15)}}
.carte:hover .i-carre-intrus,.entete-icone:hover .i-carre-intrus{animation:intrus .7s ease-in-out infinite}
.carte:hover .i-rond,.entete-icone:hover .i-rond{animation:allume 1.4s ease-in-out infinite}
.i-ecran{fill:var(--accent)}
.i-ecran-txt{fill:var(--accent-ink);font-size:14px;text-anchor:end!important}
.i-touche{fill:color-mix(in srgb, var(--accent) 30%, var(--surface))}
.i-eclair{fill:var(--accent)}
@keyframes touche{0%,100%{fill:color-mix(in srgb, var(--accent) 30%, var(--surface))}50%{fill:var(--accent)}}
.carte:hover .i-touche,.entete-icone:hover .i-touche{animation:touche .8s var(--d) ease-in-out infinite}
.i-bandeau,.i-anneau{fill:var(--accent)}
.i-coche{fill:none;stroke:var(--accent);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:0}
@keyframes coche{0%{stroke-dashoffset:60}60%,100%{stroke-dashoffset:0}}
.carte:hover .i-coche,.entete-icone:hover .i-coche{animation:coche 1.2s ease-out infinite}
.i-coeur{fill:var(--accent);transform-box:fill-box;transform-origin:50% 50%}
.i-pouls{fill:none;stroke:var(--accent-ink);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:110;stroke-dashoffset:0}
@keyframes bat{0%,100%{transform:scale(1)}15%{transform:scale(1.1)}30%{transform:scale(.97)}45%{transform:scale(1.06)}}
@keyframes pouls{from{stroke-dashoffset:110}to{stroke-dashoffset:-110}}
.carte:hover .i-coeur,.entete-icone:hover .i-coeur{animation:bat 1s ease-in-out infinite}
.carte:hover .i-pouls,.entete-icone:hover .i-pouls{animation:pouls 1.4s linear infinite}

/* ---------- saisie : clavier de signes et choix ---------- */
.clavier{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.touche{min-width:52px;font-family:var(--display);font-size:1.5rem;padding:8px 12px;line-height:1}
.answer.ops{width:8ch;letter-spacing:.3em;font-size:2rem}
.calcul-ligne{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.3em .4em}
.op-trou{display:inline-grid;place-items:center;min-width:1.2em;padding:0 .15em;border:2px dashed var(--accent);border-radius:10px;color:var(--accent);background:var(--accent-bg);animation:respire 1.6s ease-in-out infinite}
.egal{white-space:nowrap}
.choix{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;width:100%}
.option{position:relative;font-family:var(--display);font-size:clamp(1.15rem,5vw,1.5rem);padding:16px 10px;font-variant-numeric:tabular-nums;animation:pop .4s var(--ressort) backwards;overflow-wrap:anywhere}
.option:nth-child(2){animation-delay:.04s}.option:nth-child(3){animation-delay:.08s}.option:nth-child(4){animation-delay:.12s}.option:nth-child(5){animation-delay:.16s}
.option small{position:absolute;top:4px;left:8px;font-family:var(--body);font-size:.7rem;color:var(--muted)}
@media (hover:hover) and (pointer:fine){.option:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}}   /* sur téléphone, le « survol » restait collé à la case touchée */
.option.bonne{border-color:var(--good);color:var(--good);background:var(--good-bg)}
.option.mauvaise{border-color:var(--bad);color:var(--bad);background:var(--bad-bg);text-decoration:line-through}
.option:disabled{cursor:default}

/* =====================================================================
   LOGIMIND : logo, écran de chargement, blocs « à la une »
   ===================================================================== */
.marque{display:flex;align-items:center;gap:14px}
.marque-logo{width:clamp(62px,15vw,88px);flex:none}
.hub-tete h1 span{color:var(--violet)}
.hub-tete h1 span::after{background:var(--violet)}
.logo{display:block;width:100%;height:auto;overflow:visible}
.lg-liens line{stroke:var(--line);stroke-width:3;stroke-linecap:round;stroke-dasharray:60;animation:trace .7s calc(var(--k) * 60ms) ease-out backwards}
.lg-noeud{transform-box:fill-box;transform-origin:50% 50%;animation:pop .5s calc(.3s + var(--k) * 70ms) var(--ressort) backwards}
.lg-centre{fill:var(--violet);transform-box:fill-box;transform-origin:50% 50%;animation:pop .6s .2s var(--ressort) backwards, pulse 2.4s 1.2s ease-in-out infinite}
@keyframes trace{from{stroke-dashoffset:60}}
@keyframes pulse{50%{transform:scale(1.15)}}
.marque-logo:hover .lg-noeud{animation:sautille .6s calc(var(--k) * 50ms) ease-in-out}
@keyframes sautille{50%{transform:translateY(-6px) scale(1.15)}}

.chargement{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:var(--bg);
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);
  transition:opacity .6s ease, transform .6s ease, visibility .6s;cursor:pointer}
.chargement.fini{opacity:0;transform:scale(1.04);visibility:hidden}
.ch-centre{display:flex;flex-direction:column;align-items:center;gap:18px;padding:24px;text-align:center}
.ch-logo{width:min(150px,40vw);animation:tourneLent 9s linear infinite}
.ch-logo .lg-liens line{stroke-width:2.5}
@keyframes tourneLent{to{transform:rotate(360deg)}}
.ch-nom{font-family:var(--display);font-weight:800;font-size:clamp(2.6rem,11vw,4rem);line-height:1;animation:entree .7s .35s cubic-bezier(.2,.8,.2,1) backwards}
.ch-nom span{color:var(--violet)}
.ch-barre{width:min(240px,60vw);height:8px;border-radius:99px;background:var(--line);overflow:hidden}
.ch-barre i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--bleu),var(--vert),var(--orange),var(--rose),var(--violet));transform-origin:left;animation:charge 3.3s cubic-bezier(.4,0,.2,1) forwards}
@keyframes charge{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.ch-astuce{margin:0;color:var(--muted);max-width:32ch;animation:entree .6s .7s ease backwards}

.titre-section{font-size:1.1rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:4px 0 -10px}
.cartes.une .banniere{padding-block:26px}

/* ---------- Défi du jour ---------- */
.defi-carte{gap:12px}
.defi-score{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.defi-score b{font-family:var(--display);font-size:clamp(2.6rem,12vw,3.6rem);line-height:1;color:var(--accent)}
.defi-score span{color:var(--muted)}
.grille-emoji{margin:0;font-size:1.3rem;letter-spacing:2px;overflow-wrap:anywhere;line-height:1.6}
.serie{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:5px}
.jour{aspect-ratio:1;border-radius:7px;background:var(--line);display:grid;place-items:center;font-size:.7rem;font-weight:700;color:var(--accent-ink);font-variant-numeric:tabular-nums}
.jour.fait{background:var(--accent);animation:pop .4s var(--ressort) backwards}
.jour.auj{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:480px){.jour{font-size:0}}
.partage{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.partage pre{margin:0;padding:12px 14px;border-radius:12px;background:var(--bg);border:1px solid var(--line);font-family:var(--body);white-space:pre-wrap;max-width:100%;overflow-x:auto}
.zone-copie{width:100%;min-height:90px;font:inherit;border-radius:10px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);padding:10px}

/* ---------- Survie ---------- */
.records{display:flex;flex-direction:column;gap:4px}
.record-ligne{display:flex;justify-content:space-between;gap:12px;padding:8px 2px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.record-ligne:last-child{border-bottom:0}
.record-ligne b{color:var(--accent)}

/* ---------- statistiques (profil) ---------- */
.resume{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:800px){.resume{grid-template-columns:1fr}}
@media (max-width:560px){.resume{grid-template-columns:1fr}}
.resume-case{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:16px;background:var(--surface);border:1.5px solid var(--line);color:var(--ink);text-decoration:none;transition:border-color .2s, transform .2s var(--ressort)}
.resume-case:hover{border-color:var(--accent);transform:translateY(-2px)}
.resume-case > div{display:flex;flex-direction:column;min-width:0}
.resume-case b{font-family:var(--display);font-size:1.5rem;color:var(--accent);line-height:1.1}
.resume-case span:not(.entete-icone){color:var(--muted);font-size:.88rem}
.resume-case .entete-icone{width:44px;height:44px;animation:none}
.stats-jeu{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.courbe-boite{display:flex;flex-direction:column;gap:2px;flex:0 1 320px;min-width:0}
.courbe-boite .sub{font-size:.78rem}
.courbe{width:100%;max-width:320px;height:auto}
.c-grille{stroke:var(--line);stroke-width:1;stroke-dasharray:3 4}
.c-aire{fill:color-mix(in srgb, var(--accent) 16%, transparent)}
.c-ligne{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.c-point{fill:var(--accent);stroke:var(--surface);stroke-width:2}
.chiffres{display:flex;gap:18px;flex-wrap:wrap}
.chiffres > div{display:flex;flex-direction:column;line-height:1.2}
.chiffres b{font-family:var(--display);font-size:1.6rem;color:var(--accent);font-variant-numeric:tabular-nums}
.chiffres span{color:var(--muted);font-size:.82rem}
.points{display:flex;gap:18px;flex-wrap:wrap}
.points > div{display:flex;flex-wrap:wrap;align-items:center;gap:6px;flex:1 1 220px}
.points .label-txt{width:100%;margin:0}
.point{border-radius:99px;padding:3px 12px;font-size:.88rem;font-weight:700;border:1.5px solid}
.point small{font-weight:400;color:var(--muted)}
.point.faible{border-color:var(--bad);color:var(--bad)}
.point.fort{border-color:var(--good);color:var(--good)}
.prochain{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 14px;border-radius:12px;background:var(--accent-bg)}
.prochain > span{flex:1 1 260px;min-width:0}
.rangs-details summary{cursor:pointer;font-weight:700;color:var(--accent);padding:4px 0;list-style-position:inside}
.rangs-details[open] summary{margin-bottom:8px}

/* icône Mots codés : panneau à lettres qui défilent */
.i-lettre-code{fill:var(--accent);font-size:19px}
.i-lettre-inv{fill:var(--accent-ink);font-size:19px}
.i-tuile-code{fill:var(--accent)}
.i-fleche path{fill:none;stroke:var(--accent);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.i-decal{fill:var(--accent);font-size:13px}
.i-haut{transform-box:fill-box;transform-origin:50% 100%}
.i-fleche{transform-box:fill-box}
@keyframes flap{0%,18%{transform:translateY(0)}30%,42%{transform:translateY(calc(-1 * var(--pas)))}54%,66%{transform:translateY(calc(-2 * var(--pas)))}78%,100%{transform:translateY(calc(-3 * var(--pas)))}}
@keyframes hop{0%,100%{transform:none}12%{transform:translateY(-4px)}24%{transform:none}}
@keyframes descend{0%,100%{transform:none}50%{transform:translateY(4px)}}
.carte:hover .i-flap,.carte:focus-visible .i-flap,.entete-icone:hover .i-flap{animation:flap 1.8s var(--d) cubic-bezier(.6,0,.3,1) infinite}
.carte:hover .i-haut,.entete-icone:hover .i-haut{animation:hop 1.8s var(--d) ease-out infinite}
.carte:hover .i-fleche,.entete-icone:hover .i-fleche{animation:descend .9s ease-in-out infinite}

/* ---------- à la une : 3 blocs ---------- */
.cartes.une{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.cartes.une{grid-template-columns:1fr}}
.cartes.une .banniere{flex-direction:column;align-items:flex-start;gap:12px}
.cartes.une .icone{width:64px;height:64px}
@media (max-width:900px){.cartes.une .banniere{flex-direction:row;align-items:center}}

/* ---------- icônes : matrices, mémoire, duel ---------- */
.i-mf{fill:var(--accent);transform-box:fill-box;transform-origin:50% 50%}
.i-mq{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-dasharray:4 3}
.i-mq-txt{fill:var(--accent);font-size:14px}
@keyframes mf{0%,100%{transform:none}40%{transform:rotate(90deg) scale(.7)}}
.carte:hover .i-mf,.entete-icone:hover .i-mf{animation:mf 1.6s var(--d) ease-in-out infinite}
.i-mem{fill:color-mix(in srgb, var(--accent) 18%, var(--surface));stroke:var(--accent);stroke-width:2}
@keyframes mem{0%,8%{fill:var(--accent)}22%,100%{fill:color-mix(in srgb, var(--accent) 18%, var(--surface))}}
.carte:hover .i-mem,.entete-icone:hover .i-mem{animation:mem 2.1s var(--d) linear infinite}
.i-tete-d,.i-corps-d{fill:var(--accent)}
.i-j2 .i-tete-d,.i-j2 .i-corps-d{fill:none;stroke:var(--accent);stroke-width:4}
.i-eclair-d path{fill:var(--accent)}
.i-j1,.i-j2,.i-eclair-d{transform-box:fill-box;transform-origin:50% 100%}
@keyframes j1{0%,100%{transform:none}50%{transform:translateX(5px) rotate(4deg)}}
@keyframes j2{0%,100%{transform:none}50%{transform:translateX(-5px) rotate(-4deg)}}
@keyframes eclat{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
.carte:hover .i-j1,.entete-icone:hover .i-j1{animation:j1 .8s ease-in-out infinite}
.carte:hover .i-j2,.entete-icone:hover .i-j2{animation:j2 .8s ease-in-out infinite}
.carte:hover .i-eclair-d,.entete-icone:hover .i-eclair-d{animation:eclat .4s ease-in-out infinite;transform-origin:50% 50%}

/* ---------- matrices de formes ---------- */
.grille.matrice{width:min(100%,330px)}
.grille.matrice .case{padding:8%;background:var(--surface)}
.grille.matrice .case.trou{font-size:clamp(1.5rem,8vw,2.3rem)}
.forme-svg{width:100%;height:100%;display:block;overflow:visible}
.choix:has(.option.dessin){grid-template-columns:repeat(5,minmax(0,1fr))}
.option.dessin{padding:10px;aspect-ratio:1;display:grid;place-items:center}
.option.dessin svg{width:100%;max-width:80px}
@media (max-width:480px){.choix:has(.option.dessin){grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- mémoire ---------- */
.memo-points{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;min-height:12px}
.memo-points i{width:12px;height:12px;border-radius:50%;background:var(--line);transition:background-color .2s}
.memo-points i.vu{background:var(--accent)}
.memo-points i.ok{background:var(--good)}
.memo-points i.ko{background:var(--bad)}
.memo-chiffre{font-family:var(--display);font-weight:800;font-size:clamp(6rem,30vw,9rem);line-height:1;min-height:1em;color:var(--accent);font-variant-numeric:tabular-nums}
.memo-chiffre.pop{animation:pop .3s var(--ressort)}
.memo-cases{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:min(100%,300px)}
.memo-case{aspect-ratio:1;border-radius:16px;border:2px solid var(--line);background:var(--bg);padding:0;transition:background-color .15s, transform .15s, border-color .15s}
/* survol seulement à la souris : sur téléphone (certains Android se disent « hover » !), il restait collé à la dernière case touchée */
@media (hover:hover) and (pointer:fine){html:not(.tactile) .memo-case:hover{border-color:var(--accent)}}
.memo-case.allume{background:var(--accent);border-color:var(--accent);transform:scale(1.06)}
.memo-case.bonne{background:var(--good);border-color:var(--good)}
.memo-case.clic{animation:clic .25s ease}
@keyframes clic{50%{transform:scale(.9);background:var(--accent-bg)}}
.memo-saisie{width:min(100%,14ch)}

/* ---------- duel ---------- */
.duel-noms{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:end}
.vs{font-family:var(--display);font-weight:800;font-size:1.4rem;color:var(--accent);padding-bottom:8px}
.duel-reglages{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:560px){.duel-noms{grid-template-columns:1fr}.vs{text-align:center;padding:0}.duel-reglages{grid-template-columns:1fr}}
.passe{align-items:center;text-align:center;padding-block:40px;animation:entree .5s cubic-bezier(.2,.8,.2,1)}
.passe h2{font-size:clamp(1.8rem,7vw,2.6rem)}
.duel-titre{font-size:clamp(1.8rem,7vw,2.6rem);color:var(--accent)}
.duel-scores{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:480px){.duel-scores{grid-template-columns:1fr}}
.duel-joueur{display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:14px;border:2px solid var(--line);min-width:0}
.duel-joueur.gagne{border-color:var(--good);background:var(--good-bg);animation:bon .5s var(--ressort)}
.duel-joueur .big{font-size:clamp(2.6rem,12vw,3.6rem)}
.duel-ligne{display:flex;gap:4px;flex-wrap:wrap}
.duel-ligne i{width:14px;height:14px;border-radius:4px}
.duel-ligne i.ok{background:var(--good)}
.duel-ligne i.ko{background:var(--bad)}

/* ---------- sauvegarde (barre discrète dans le profil) ---------- */
.sauv-barre{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding-top:14px;border-top:1px solid var(--line)}
.sauv-barre.vise{border-radius:12px;box-shadow:0 0 0 3px var(--accent-bg);padding:12px}
.sauv-texte{display:flex;flex-direction:column;line-height:1.3;flex:1 1 200px;min-width:0}
.sauv-texte .sub{font-size:.85rem}
.sauv-actions{display:flex;gap:8px;flex-wrap:wrap}
.sauv-msg{flex-basis:100%;margin:0;font-size:.9rem}
.sauv-msg:empty{display:none}
.sauv-msg.erreur{color:var(--bad);font-weight:700}
.sauv-msg.succes{color:var(--good);font-weight:700}
.sauv-recup{flex-basis:100%;display:flex;flex-direction:column;gap:8px}
.sauv-barre > .zone-code{flex-basis:100%}
.zone-code{width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.78rem;line-height:1.4;padding:10px;border-radius:10px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);resize:vertical;word-break:break-all}
.zone-code:focus{outline:3px solid var(--accent);outline-offset:1px}
.rappel-sauvegarde{margin:0;padding:10px 14px;border-radius:12px;background:var(--bg);border:1px dashed var(--line);color:var(--muted);font-size:.9rem}
.rappel-sauvegarde a{font-weight:700}

/* ---------- série quotidienne ---------- */
.flamme{width:18px;height:18px;flex:none;fill:currentColor}
.serie-chip{cursor:pointer;font-size:1rem;line-height:1;display:inline-flex;align-items:center;gap:4px;height:44px;padding:0 12px;border-radius:99px;border:1.5px solid var(--line);background:var(--surface);color:var(--muted);font-family:var(--display);font-weight:800;font-variant-numeric:tabular-nums;transition:background-color .35s}
.serie-chip.active{color:var(--orange);border-color:color-mix(in srgb, var(--orange) 45%, var(--line))}
.serie-chip.active .flamme{animation:flamme 1.6s ease-in-out infinite;transform-origin:50% 100%}
.serie-chip.en-danger{border-style:dashed}
@keyframes flamme{0%,100%{transform:scale(1) rotate(0)}30%{transform:scale(1.12,1.18) rotate(-4deg)}60%{transform:scale(.96,1.05) rotate(3deg)}}
.serie-gagnee{display:inline-flex;align-items:center;gap:6px;color:var(--orange)}
.serie-gagnee strong{color:var(--orange)!important}
.serie-gagnee .flamme{animation:flamme 1.2s ease-in-out infinite;transform-origin:50% 100%}
.flamme-grande .flamme{width:44px;height:44px;color:var(--orange)}
@media (max-width:480px){.serie-chip{height:40px;padding:0 10px}}

/* ---------- appli : bandeau, message de mise à jour, rappel ---------- */
.bandeau-appli{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 16px;border-radius:18px;background:var(--surface);border:1.5px solid color-mix(in srgb, var(--violet) 40%, var(--line));box-shadow:0 10px 30px -18px var(--ombre);animation:entree .6s .4s cubic-bezier(.2,.8,.2,1) backwards}
.bandeau-logo{width:48px;flex:none}
.bandeau-texte{display:flex;flex-direction:column;gap:2px;flex:1 1 240px;min-width:0}
.bandeau-texte span{color:var(--muted);font-size:.9rem}
.bandeau-texte b{color:var(--ink)}
.bandeau-actions{display:flex;gap:8px;flex-wrap:wrap}
.ico-partager{width:16px;height:16px;vertical-align:-3px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.toast-appli{position:fixed;z-index:90;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;max-width:min(560px,calc(100vw - 32px));padding:12px 14px;border-radius:16px;background:var(--surface);color:var(--ink);border:1.5px solid var(--line);box-shadow:0 18px 40px -12px var(--ombre);animation:monte .4s var(--ressort)}
@keyframes monte{from{transform:translate(-50%,30px);opacity:0}}
.rappel-zone{display:flex;flex-direction:column;gap:6px;flex-basis:100%;padding-top:12px;border-top:1px solid var(--line)}
.rappel-zone:empty{display:none}
.rappel-ligne{display:flex;align-items:center;gap:12px}
.interrupteur{position:relative;display:inline-block;width:52px;height:30px;flex:none;cursor:pointer}
.interrupteur input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.interrupteur span[aria-hidden]{position:absolute;inset:0;border-radius:99px;background:var(--line);transition:background-color .2s}
.interrupteur span[aria-hidden]::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:var(--surface);box-shadow:0 1px 3px var(--ombre);transition:transform .25s var(--ressort)}
.interrupteur input:checked + span{background:var(--accent)}
.interrupteur input:checked + span::after{transform:translateX(22px)}
.interrupteur input:focus-visible + span{outline:3px solid var(--accent);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- accueil compact sur téléphone : tuiles en 2 colonnes ---------- */
@media (max-width:700px){
  .hub{gap:20px}
  .hub .cartes,.hub .cartes.une{grid-template-columns:1fr 1fr;gap:12px}
  .hub .titre-section{margin:6px 0 -6px;font-size:.95rem}
  .hub .carte{border-radius:18px}
  .hub .carte .apercu,.hub .carte .carte-corps p,.hub .carte .pied-rang small{display:none}
  .hub .carte .banniere{flex-direction:row;align-items:center;padding:14px;gap:10px}
  .hub .carte .icone{width:46px;height:46px}
  .hub .carte .carte-corps{padding:10px 14px 0;gap:0}
  .hub .carte .carte-corps h2{font-size:1.02rem;line-height:1.2}
  .hub .carte .carte-pied{padding:6px 14px 12px;font-size:.8rem;line-height:1.3}
  .hub .carte .carte-pied .jouer{display:none}
  .hub .carte .pied-rang{gap:7px}
  .hub .carte .pied-rang b{font-size:.82rem}
  /* Défi du jour et Conseils : une ligne pleine largeur (icône | titre + état | →) */
  .hub .cartes.une > .carte:first-child,
  .hub .cartes:not(.une) > .carte:last-child:nth-child(odd){grid-column:1 / -1;display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:1fr auto 1fr}
  .hub .cartes.une > .carte:first-child .banniere,
  .hub .cartes:not(.une) > .carte:last-child:nth-child(odd) .banniere{grid-row:1 / -1;grid-column:1;padding:14px 16px}
  .hub .cartes.une > .carte:first-child .carte-corps,
  .hub .cartes:not(.une) > .carte:last-child:nth-child(odd) .carte-corps{grid-row:2;grid-column:2;padding:0 0 0 14px;flex:none}
  .hub .cartes.une > .carte:first-child .carte-pied,
  .hub .cartes:not(.une) > .carte:last-child:nth-child(odd) .carte-pied{grid-row:3;grid-column:2 / 4;align-self:start;padding:2px 16px 0 14px}
  .hub .cartes.une > .carte:first-child .carte-pied .jouer,
  .hub .cartes:not(.une) > .carte:last-child:nth-child(odd) .carte-pied .jouer{display:inline}
  .hub .cartes.une > .carte:first-child .carte-corps h2{font-size:1.15rem}
}
.entete-resume{margin:0 0 4px;color:var(--muted);max-width:60ch}

/* ---------- calendrier de la série ---------- */
.serie-chip:hover,.serie-chip:focus-visible{border-color:var(--orange)}
body.cal-ouvert{overflow:hidden}
.cal-fond{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:16px;background:rgba(8,12,24,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:calFond .2s ease-out}
.cal-fond.sort{opacity:0;transition:opacity .18s}
@keyframes calFond{from{opacity:0}}
@keyframes calMonte{from{transform:translateY(16px) scale(.97);opacity:0}}
.cal-panneau{width:min(400px,100%);max-height:calc(100dvh - 32px);overflow:auto;background:var(--surface);color:var(--ink);border:1.5px solid var(--line);border-radius:24px;padding:20px;box-shadow:0 24px 60px -16px rgba(0,0,0,.45);animation:calMonte .3s var(--ressort)}
.cal-tete{display:flex;align-items:center;gap:12px}
.cal-tete h2{margin:0;font-family:var(--display);font-size:1.3rem;line-height:1.15}
.cal-tete .sub{font-size:.88rem}
.cal-tete > div{flex:1;min-width:0}
.cal-flamme{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--orange-bg);color:var(--muted);flex:none}
.cal-flamme .flamme{width:30px;height:30px}
.cal-flamme.active{color:var(--orange)}
.cal-flamme.active .flamme{animation:flamme 1.6s ease-in-out infinite;transform-origin:50% 100%}
.cal-fermer{flex:none;width:40px;height:40px;border-radius:99px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);font-size:1.5rem;line-height:1;cursor:pointer;align-self:flex-start}
.cal-etat{margin:14px 0 4px;padding:10px 12px;border-radius:14px;background:var(--bg);font-size:.92rem}
.cal-etat.ok{background:var(--good-bg);color:var(--good)}
.cal-etat.danger{background:var(--orange-bg);color:var(--orange);font-weight:700}
.cal-nav{display:flex;align-items:center;justify-content:space-between;margin:12px 0 6px}
.cal-nav b{font-family:var(--display);text-transform:capitalize;font-size:1.05rem}
.cal-nav button{width:40px;height:40px;border-radius:99px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font-size:1.4rem;line-height:1;cursor:pointer}
.cal-nav button:disabled{opacity:.3;cursor:default}
.cal-grille{display:grid;grid-template-columns:repeat(7,1fr);row-gap:4px}
.cal-jours-sem span{text-align:center;font-size:.75rem;font-weight:700;color:var(--muted);padding-bottom:2px}
.cal-j{position:relative;display:grid;place-items:center;height:44px;font-variant-numeric:tabular-nums}
.cal-j b{position:relative;z-index:1;display:grid;place-items:center;width:36px;height:36px;border-radius:99px;font-size:.92rem;font-weight:700}
.cal-j.joue b{background:var(--orange);color:var(--surface)}
.cal-j.lien-g::before,.cal-j.lien-d::after{content:"";position:absolute;top:50%;height:26px;transform:translateY(-50%);background:color-mix(in srgb,var(--orange) 30%,transparent)}
.cal-j.lien-g::before{left:0;right:50%}
.cal-j.lien-d::after{left:50%;right:0}
.cal-j.rate b{background:var(--bad-bg);color:var(--bad);font-weight:400;text-decoration:line-through;text-decoration-thickness:1.5px}
.cal-j.futur b{color:var(--muted);font-weight:400;opacity:.65}
.cal-j.auj b{box-shadow:0 0 0 2.5px var(--surface),0 0 0 4.5px var(--orange)}
.cal-j.auj:not(.joue) b{box-shadow:none;border:2px dashed var(--orange);color:var(--orange);opacity:1}
.cal-j.palier b{border:2px solid var(--ambre);opacity:1;color:var(--ambre)}
.cal-j.palier i{position:absolute;z-index:2;top:0;right:calc(50% - 22px);font-style:normal;font-size:.8rem;color:var(--ambre)}
.cal-legende{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:12px;font-size:.8rem;color:var(--muted)}
.cal-legende span{display:inline-flex;align-items:center;gap:6px}
.cal-legende i{display:inline-grid;place-items:center;width:14px;height:14px;border-radius:99px;font-style:normal;font-size:.7rem}
.l-joue{background:var(--orange)}
.l-rate{background:var(--bad-bg);border:1.5px solid var(--bad)}
.l-auj{border:2px dashed var(--orange)}
.l-palier{color:var(--ambre);border:1.5px solid var(--ambre)}
.cal-note{margin:12px 0 0;font-size:.82rem;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.cal-fond,.cal-panneau{animation:none}}
#appliZone:empty{display:none}

/* ---------- couleurs de flamme selon la série ---------- */
:root{--f1:#c4520f;--f2:#d62828;--f3:#d6336c;--f4:#6d3fd0;--f5:#2b5cff;--f6:#b98500;--f7:#8b3fd9}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--f1:#ff9a5c;--f2:#ff5a5a;--f3:#ff7fb4;--f4:#b597ff;--f5:#7d98ff;--f6:#f2c230;--f7:#c08bff}}
:root[data-theme="dark"]{--f1:#ff9a5c;--f2:#ff5a5a;--f3:#ff7fb4;--f4:#b597ff;--f5:#7d98ff;--f6:#f2c230;--f7:#c08bff}
.fl-0{--flamme:var(--muted)}.fl-1{--flamme:var(--f1)}.fl-2{--flamme:var(--f2)}.fl-3{--flamme:var(--f3)}.fl-4{--flamme:var(--f4)}.fl-5{--flamme:var(--f5)}.fl-6{--flamme:var(--f6)}.fl-7{--flamme:var(--f7)}
.fl-7 .flamme{fill:url(#fl-arc)}
.serie-chip.fl-7 b{background:linear-gradient(90deg,#ff3d5a,#ff8a2b,#e0b000,#2fc77a,#4d8bff,#a95cff);-webkit-background-clip:text;background-clip:text;color:transparent}
.fl-6 .flamme{filter:drop-shadow(0 0 3px color-mix(in srgb,var(--f6) 60%,transparent))}
.serie-chip.active{color:var(--flamme);border-color:color-mix(in srgb, var(--flamme) 45%, var(--line))}
.serie-chip:hover,.serie-chip:focus-visible{border-color:var(--flamme,var(--orange))}
.serie-gagnee,.serie-gagnee strong{color:var(--flamme)!important}
.serie-gagnee small{margin-left:4px;font-weight:700;color:var(--flamme)}
.flamme-grande .flamme{color:var(--flamme)}
.resume-case:has(.flamme-grande.fl-0) .flamme{color:var(--muted)}
.cal-flamme{background:color-mix(in srgb,var(--flamme) 14%,var(--surface))}
.cal-flamme.active{color:var(--flamme)}
.cal-niveaux{display:flex;justify-content:space-between;gap:2px;margin:14px 0 2px;padding:8px 6px;border-radius:14px;background:var(--bg)}
.cal-niveaux span{display:flex;flex-direction:column;align-items:center;gap:1px;flex:1;color:var(--flamme);opacity:.35;transition:opacity .2s}
.cal-niveaux span.atteint{opacity:.8}
.cal-niveaux span.actuel{opacity:1}
.cal-niveaux span.actuel .flamme{width:24px;height:24px;animation:flamme 1.6s ease-in-out infinite;transform-origin:50% 100%}
.cal-niveaux .flamme{width:18px;height:18px}
.cal-niveaux small{font-size:.68rem;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.cal-niveaux span.actuel small{color:var(--ink)}
.palier-ferme{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:12px;border:1.5px dashed var(--line);color:var(--ink);cursor:not-allowed}
.palier-ferme .palier-txt span{opacity:.7}
.paliers li.bloque .etat{display:inline-flex;align-items:center;gap:5px;color:var(--muted)}
.cadenas{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
@media (max-width:480px){.palier-ferme{flex-wrap:wrap}}
.defi-avert .av-icone{color:var(--violet);background:var(--violet-bg)}
.defi-avert .av-icone svg{width:36px;height:36px}
.av-infos{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.av-infos li{display:flex;flex-direction:column;padding:10px 12px;border-radius:14px;border:1.5px solid var(--line)}
.av-infos b{font-size:1rem}
.av-infos span{font-size:.85rem;color:var(--muted)}
.av-boutons{margin-top:16px}
.av-boutons .btn{flex:1}
/* gels et badges de série */
.flocon{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
:root{--glace:#1d8fc4;--glace-bg:#dcf1fb}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--glace:#6fd0ff;--glace-bg:#12324a}}
:root[data-theme="dark"]{--glace:#6fd0ff;--glace-bg:#12324a}
.cal-gels{display:flex;align-items:center;gap:3px;margin-top:3px;font-size:.8rem;color:var(--muted)}
.cal-gels i{display:grid;place-items:center;color:var(--line)}
.cal-gels i.plein{color:var(--glace)}
.cal-gels span{margin-left:4px}
.cal-etat.gel{display:flex;align-items:center;gap:6px;background:var(--glace-bg);color:var(--glace);font-weight:700}
.cal-j.gele b{background:var(--glace-bg);color:var(--glace)}
.cal-j.gele .ic-gel{position:absolute;z-index:2;top:-1px;right:calc(50% - 22px);color:var(--glace)}
.cal-j.gele .ic-gel .flocon{width:13px;height:13px}
.l-gel{color:var(--glace);background:var(--glace-bg)}
.l-gel .flocon{width:11px;height:11px}
.badges-serie{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
@media (max-width:480px){.badges-serie{grid-template-columns:repeat(4,1fr)}}
.bs{display:flex;flex-direction:column;align-items:center;gap:1px;padding:10px 4px 8px;border-radius:14px;border:1.5px dashed var(--line);color:var(--muted);font-variant-numeric:tabular-nums}
.bs .flamme{width:26px;height:26px;color:var(--flamme)}
.bs .cadenas{width:20px;height:26px;opacity:.6}
.bs b{font-family:var(--display);font-size:1.05rem;line-height:1.1}
.bs small{font-size:.7rem;min-height:1em}
.bs.gagne{border-style:solid;border-color:color-mix(in srgb,var(--flamme) 40%,var(--line));background:color-mix(in srgb,var(--flamme) 9%,var(--surface));color:var(--ink)}
.bs.gagne b{color:var(--flamme)}
.bs.fl-7.gagne b{background:linear-gradient(90deg,#ff3d5a,#ff8a2b,#e0b000,#2fc77a,#4d8bff,#a95cff);-webkit-background-clip:text;background-clip:text;color:transparent}
.resume-case.clic{cursor:pointer}

/* ---------- profil compact ---------- */
.identite.compacte{gap:14px}
.identite.compacte .identite-haut{gap:14px;flex-wrap:nowrap}
.avatar.grand{width:60px;height:60px;font-size:1.7rem;flex:none;box-shadow:0 0 0 4px var(--accent-bg)}
.identite.compacte .identite-champs{gap:10px;min-width:0}
.identite.compacte #pseudo{font-family:var(--display);font-weight:800;font-size:1.15rem;padding:8px 12px}
.identite.compacte .couleurs{gap:8px}
.identite.compacte .pastille{width:26px;height:26px;border-width:2px}
.identite.compacte .niveau{gap:6px}
.identite.compacte .niveau .sub{margin:0;font-size:.82rem}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.trio-case{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 6px;border-radius:16px;background:var(--surface);border:1.5px solid var(--line);color:var(--ink);text-decoration:none;font:inherit;cursor:pointer;text-align:center;transition:border-color .2s, transform .2s var(--ressort)}
.trio-case:hover{border-color:var(--accent);transform:translateY(-2px)}
.trio-case .entete-icone{width:34px;height:34px;animation:none}
.trio-case .flamme-grande .flamme{width:30px;height:30px}
.trio-case b{font-family:var(--display);font-size:1.3rem;line-height:1.15;color:var(--accent);font-variant-numeric:tabular-nums}
.trio-case:has(.flamme-grande) b{color:var(--flamme)}
.trio-case:has(.fl-0) b{color:var(--muted)}
.trio-case > span:last-child{font-size:.78rem;color:var(--muted);line-height:1.2}
.tuiles-jeux{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media (max-width:700px){.tuiles-jeux{grid-template-columns:1fr 1fr}}
.tuile-jeu{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:12px;border-radius:16px;background:var(--surface);border:1.5px solid var(--line);color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:border-color .2s, transform .2s var(--ressort)}
.tuile-jeu:hover,.tuile-jeu:focus-visible{border-color:var(--accent);transform:translateY(-2px)}
.tj-haut{display:flex;justify-content:space-between;align-items:center;width:100%;margin-bottom:2px}
.tj-haut .entete-icone{width:36px;height:36px;animation:none}
.tj-nom{font-family:var(--display);font-size:.98rem;line-height:1.2}
.tj-rang{font-size:.82rem;font-weight:700;color:var(--accent)}
.echelle.mini{display:flex;gap:3px;width:100%;margin:3px 0 1px}
.echelle.mini .seg{height:5px}
.tuile-jeu small{font-size:.75rem;color:var(--muted)}
.badges-tete{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:10px}
.badges-tete h2{margin:0}
.badges-serie.ligne{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px;margin:0 -4px;padding-inline:4px;scrollbar-width:none}
.badges-serie.ligne .bs{flex:none;width:64px;scroll-snap-align:start;padding:8px 2px 6px}
.badges-serie.ligne .bs .flamme{width:22px;height:22px}
.badges-serie.ligne .bs .cadenas{width:16px;height:22px}
.badges-serie.ligne .bs b{font-size:.95rem}
.reglages{gap:0}
.reglages .sauv-barre{border-top:0;padding-top:0}
.fiche-jeu{width:min(560px,100%);display:flex;flex-direction:column;gap:14px}
.fiche-jeu .section-tete{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.fiche-rang{display:flex;align-items:center;gap:10px}
.fiche-rang b{font-family:var(--display);font-size:1.15rem}
.wrap > .wrap{width:100%;min-width:0}
.badges-panel{min-width:0}
.echelle.mini .seg{flex:1;animation:none}
.fiche-jeu .section-tete{flex-wrap:nowrap}
.fiche-jeu .section-titre{min-width:0}
.fiche-jeu .chiffres{display:flex;flex-wrap:wrap;gap:8px 24px}

/* ---------- roulette (style alarme iPhone) ---------- */
.roue{position:relative;height:102px;border-radius:14px;background:var(--bg);border:1.5px solid var(--line);overflow:hidden;outline:none;touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none}
.roue:active{cursor:grabbing}
.roue:focus-visible{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.roue-piste{position:absolute;inset:0 0 auto 0;height:0;will-change:transform}
.roue-v{position:absolute;left:0;right:0;height:34px;display:flex;align-items:center;justify-content:flex-end;padding-right:calc(50% + 2px);font-family:var(--display);font-weight:800;font-size:1.35rem;color:var(--muted);font-variant-numeric:tabular-nums;backface-visibility:hidden;visibility:hidden;pointer-events:none}
.roue-v.choisi{color:var(--ink)}
.roue-bande{position:absolute;left:8px;right:8px;top:50%;height:34px;transform:translateY(-50%);border-radius:10px;background:var(--accent-bg);pointer-events:none}
.roue-bande span{position:absolute;top:50%;transform:translateY(-50%);left:calc(50% + 8px);font-weight:700;font-size:.95rem;color:var(--accent)}

/* ---------- réglages d'affichage ---------- */
html[data-taille="grand"]{font-size:112.5%}
html[data-taille="tres-grand"]{font-size:125%}
html[data-mono]::after,html[data-chaud]::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:2147483000}
html[data-mono]::after{-webkit-backdrop-filter:grayscale(1);backdrop-filter:grayscale(1)}
html[data-chaud]::before{z-index:2147483001;background:rgba(255,145,40,.22);mix-blend-mode:multiply}
html[data-theme="dark"][data-chaud]::before{background:rgba(255,145,40,.16)}

/* ---------- menu ☰ ---------- */
.menu-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.menu-fond{position:fixed;inset:0;z-index:70;background:rgba(8,12,24,0);transition:background-color .25s}
.menu-fond.ouvert{background:rgba(8,12,24,.5)}
.menu-panneau{position:absolute;top:0;right:0;bottom:0;width:min(320px,86vw);display:flex;flex-direction:column;gap:14px;padding:calc(16px + env(safe-area-inset-top,0px)) 16px calc(16px + env(safe-area-inset-bottom,0px));background:var(--surface);border-left:1.5px solid var(--line);box-shadow:-20px 0 50px -20px rgba(0,0,0,.4);transform:translateX(105%);transition:transform .28s cubic-bezier(.2,.8,.2,1);overflow-y:auto}
.menu-fond.ouvert .menu-panneau{transform:none}
.menu-tete{display:flex;align-items:center;gap:10px}
.menu-tete b,.apropos-tete b{font-family:var(--display);font-size:1.35rem;flex:1}
.menu-tete b span,.apropos-tete b span{color:var(--violet)}
.menu-logo{display:block;width:36px;height:36px;flex:none}
.menu-logo svg{width:100%;height:100%}
.menu-profil{display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;background:var(--bg);color:var(--ink);text-decoration:none;border:1.5px solid var(--line)}
.menu-profil .avatar{width:44px;height:44px;font-size:1.2rem}
.menu-profil > span:last-child{display:flex;flex-direction:column;flex:1;min-width:0;gap:2px}
.menu-profil small{color:var(--muted);font-size:.8rem}
.jauge.mini{display:block;height:5px;margin-top:3px}
.jauge.mini > i{display:block;height:100%;border-radius:99px;transform-origin:left;background:linear-gradient(90deg,var(--bleu),var(--vert),var(--orange),var(--rose),var(--violet))}
.menu-liste{display:flex;flex-direction:column;gap:2px}
.menu-lien{display:flex;align-items:center;gap:12px;width:100%;padding:12px 10px;border-radius:12px;border:0;background:none;color:var(--ink);font:inherit;font-weight:700;text-decoration:none;text-align:left;cursor:pointer}
.menu-lien:hover,.menu-lien:focus-visible{background:var(--bg)}
.menu-lien > svg{width:22px;height:22px;flex:none;fill:none;stroke:var(--muted);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.menu-lien > svg:last-child{width:18px;height:18px;margin-left:auto}
.menu-lien > span{flex:1}
.menu-lien .flamme{stroke:none;fill:var(--flamme)}
.menu-lien.inactif{color:var(--muted);cursor:default}
.menu-lien.inactif:hover{background:none}
.menu-pastille{font-style:normal;font-family:var(--display);font-weight:800;color:var(--flamme);font-variant-numeric:tabular-nums}
.menu-bientot{font-style:normal;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:3px 8px;border-radius:99px;background:var(--violet-bg);color:var(--violet)}
.menu-pied{margin:auto 0 0;font-size:.78rem;color:var(--muted);text-align:center}

/* ---------- page Paramètres ---------- */
.reglages{display:flex;flex-direction:column;gap:0}
.reglage-ligne{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.reglage-ligne:first-child{border-top:0;padding-top:0}
.reglage-ligne.colonne{flex-direction:column;align-items:stretch;gap:8px}
.reglage-ligne .sauv-texte{flex:1}
.reglages .rappel-zone{padding-top:12px;border-top:1px solid var(--line)}
.segments{display:flex;gap:4px;padding:4px;border-radius:14px;background:var(--bg);border:1.5px solid var(--line)}
.segments button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 6px;border:0;border-radius:10px;background:none;color:var(--muted);font:inherit;font-weight:700;font-size:.9rem;cursor:pointer;transition:background-color .2s,color .2s}
.segments button.choisi{background:var(--surface);color:var(--accent);box-shadow:0 2px 8px -2px var(--ombre)}
.segments button:disabled{cursor:default;opacity:.7}
.segments.tailles button{flex-direction:column;gap:0;font-size:.8rem}
.segments.tailles button span{font-family:var(--display);font-weight:800}
.apropos{gap:14px}
.apropos-tete{display:flex;align-items:center;gap:12px}
.apropos-tete .menu-logo{width:48px;height:48px}
.apropos-tete > div{display:flex;flex-direction:column}
.nouveautes{margin:6px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:4px;color:var(--muted);font-size:.9rem}
.titre-section.vise,.sauv-barre.vise{color:var(--accent)}
.ico-reglages{color:var(--accent)}
.menu-logo .lg-noeud,.menu-logo .lg-centre,.menu-logo .lg-liens line{animation:none}
/* case « prochain mini-jeu » à la fin de la grille */
.carte-bientot{grid-column:1 / -1;display:flex;align-items:center;justify-content:center;gap:14px;min-height:96px;padding:18px;border-radius:22px;border:2px dashed var(--line);color:var(--muted);text-align:left}
.carte-bientot .cb-plus{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;border:2px dashed var(--line);font-family:var(--display);font-size:1.6rem;font-weight:800;line-height:1}
.carte-bientot > span:last-child{display:flex;flex-direction:column}
.carte-bientot b{font-family:var(--display);color:var(--ink);opacity:.7}
.carte-bientot small{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
@media (max-width:700px){.carte-bientot{min-height:72px;border-radius:18px;padding:14px}}
/* matrices : la grille dans un cadre, les réponses séparées en dessous */
.grille.matrice{width:min(100%,270px);gap:6px;padding:8px;border-radius:18px;background:var(--accent-bg);border:1.5px solid color-mix(in srgb,var(--accent) 25%,var(--line))}
.grille.matrice .case{border-radius:10px}
.choix:has(.option.dessin){display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.choix-titre{flex-basis:100%;display:flex;align-items:center;gap:10px;margin:6px 0 2px;color:var(--muted);font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.choix-titre::before,.choix-titre::after{content:"";flex:1;border-top:2px dashed var(--line)}
.option.dessin{position:relative;width:calc((100% - 40px) / 5);max-width:110px;padding:8px;border:2px solid var(--line);background:var(--surface);box-shadow:0 3px 0 var(--line)}
.option.dessin small{position:absolute;top:4px;left:6px;font-size:.7rem;color:var(--muted)}
@media (hover:hover) and (pointer:fine){.option.dessin:not(:disabled):hover{border-color:var(--accent);transform:translateY(-2px)}}
@media (max-width:480px){.option.dessin{width:calc((100% - 20px) / 3)}}
/* record ultime (au-delà de Légende) */
.badge-ultime{display:inline-grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:conic-gradient(from 210deg,#ff3d5a,#ff8a2b,#f7c61e,#2fc77a,#4d8bff,#a95cff,#ff3d5a);box-shadow:0 0 0 2px var(--surface),0 0 14px -2px rgba(169,92,255,.6)}
.badge-ultime svg{display:block;width:18px;height:18px;fill:#fff;filter:drop-shadow(0 1px 1px rgba(0,0,0,.3));transform:translateY(.9px)}   /* l'étoile est plus lourde en haut : on la descend un peu pour la centrer */
.ultime-ligne{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:color-mix(in srgb,#a95cff 10%,var(--surface));border:1.5px solid color-mix(in srgb,#a95cff 35%,var(--line))}
.ultime-ligne p{margin:0;display:flex;flex-direction:column;line-height:1.3}
.ultime-ligne span{color:var(--muted);font-size:.88rem;font-variant-numeric:tabular-nums}
.ultime-ligne.nouveau{animation:pop .6s var(--ressort)}
.ultime-ligne.nouveau b{background:linear-gradient(90deg,#ff3d5a,#ff8a2b,#e0b000,#2fc77a,#4d8bff,#a95cff);-webkit-background-clip:text;background-clip:text;color:transparent}
.paliers li.ultime .palier-ultime{border-style:solid;border-color:color-mix(in srgb,#a95cff 40%,var(--line));background:color-mix(in srgb,#a95cff 8%,var(--surface));cursor:default}
.paliers li.bloque .badge-ultime{filter:grayscale(1);opacity:.4;box-shadow:none}
.palier-ultime .badge-ultime{width:30px;height:30px}

/* ---------- Dominos et Vision dans l'espace ---------- */
:root{--brun:#9a5b1e;--brun-bg:#f6e9da;--magenta:#b0359a;--magenta-bg:#f8e3f3}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--brun:#e7a768;--brun-bg:#36260f;--magenta:#f08ad9;--magenta-bg:#3a1934}}
:root[data-theme="dark"]{--brun:#e7a768;--brun-bg:#36260f;--magenta:#f08ad9;--magenta-bg:#3a1934}
.c-brun{--accent:var(--brun);--accent-bg:var(--brun-bg)}
.c-magenta{--accent:var(--magenta);--accent-bg:var(--magenta-bg)}
/* icônes */
.i-dom rect{fill:var(--surface);stroke:var(--accent);stroke-width:4}
.i-dom line{stroke:var(--accent);stroke-width:3;stroke-linecap:round}
.i-dom circle{fill:var(--accent)}
.i-dom-q{fill:var(--accent);font-size:20px}
.i-dom1{transform-origin:27px 72px}.i-dom2{transform-origin:69px 82px}
@keyframes domTombe{0%,100%{transform:rotate(0)}40%{transform:rotate(-14deg)}60%{transform:rotate(-10deg)}}
.carte:hover .i-dom1,.entete-icone:hover .i-dom1{animation:domTombe 1.4s ease-in-out infinite}
.i-cube-h{fill:color-mix(in srgb,var(--accent) 35%,var(--surface));stroke:var(--accent);stroke-width:3;stroke-linejoin:round}
.i-cube-g{fill:var(--surface);stroke:var(--accent);stroke-width:3;stroke-linejoin:round}
.i-cube-d{fill:color-mix(in srgb,var(--accent) 18%,var(--surface));stroke:var(--accent);stroke-width:3;stroke-linejoin:round}
.i-cube-s{fill:var(--accent)}.i-cube-x{stroke:var(--accent);stroke-width:3.5;stroke-linecap:round;fill:none}
/* le cube se déplie (les côtés tombent, le couvercle s'ouvre) puis se replie */
.i-cube,.i-cf{transform-box:view-box}
.i-cube{transform-origin:48px 50px}
.i-cube-in{fill:color-mix(in srgb,var(--accent) 8%,var(--surface));stroke:var(--accent);stroke-width:2;stroke-linejoin:round;opacity:.75}
.i-cube-sol{fill:color-mix(in srgb,var(--accent) 26%,var(--surface));stroke:var(--accent);stroke-width:2.5;stroke-linejoin:round}
.i-cf-g{transform-origin:16px 68px;transform:rotate(29.36deg) scaleY(1) rotate(-29.36deg)}
.i-cf-d{transform-origin:48px 86px;transform:rotate(-29.36deg) scaleY(1) rotate(29.36deg)}
.i-cf-h{transform-origin:48px 12px;transform:rotate(29.36deg) scaleY(1) rotate(-29.36deg)}
@keyframes cubeZoom{0%,100%{transform:none}28%,72%{transform:scale(.62)}}
@keyframes cubeG{0%,10%,90%,100%{transform:rotate(29.36deg) scaleY(1) rotate(-29.36deg)}38%,66%{transform:rotate(29.36deg) scaleY(-1) rotate(-29.36deg)}}
@keyframes cubeD{0%,10%,90%,100%{transform:rotate(-29.36deg) scaleY(1) rotate(29.36deg)}38%,66%{transform:rotate(-29.36deg) scaleY(-1) rotate(29.36deg)}}
@keyframes cubeCouvercle{0%,18%,82%,100%{transform:rotate(29.36deg) scaleY(1) rotate(-29.36deg)}46%,60%{transform:rotate(29.36deg) scaleY(-1) rotate(-29.36deg)}}
.carte:hover .i-cube,.entete-icone:hover .i-cube{animation:cubeZoom 2.6s cubic-bezier(.45,0,.25,1) infinite}
.carte:hover .i-cf-g,.entete-icone:hover .i-cf-g{animation:cubeG 2.6s cubic-bezier(.45,0,.25,1) infinite}
.carte:hover .i-cf-d,.entete-icone:hover .i-cf-d{animation:cubeD 2.6s cubic-bezier(.45,0,.25,1) infinite}
.carte:hover .i-cf-h,.entete-icone:hover .i-cf-h{animation:cubeCouvercle 2.6s cubic-bezier(.45,0,.25,1) infinite}
@media (prefers-reduced-motion:reduce){.i-cube,.i-cf{animation:none!important}}
/* dominos dans la question */
.dominos-ligne{display:grid;grid-template-columns:repeat(var(--n),minmax(0,56px));gap:8px;justify-content:center;width:100%}
.domino-case{display:grid;place-items:center;aspect-ratio:44/84;animation:pop .4s calc(var(--k) * 60ms) var(--ressort) backwards}
.domino-case.trou{border:2.5px dashed var(--accent);border-radius:10px;color:var(--accent);font-family:var(--display);font-weight:800;font-size:1.6rem}
.domino-svg{width:100%;height:100%;display:block}
.domino-svg rect{fill:var(--surface);stroke:var(--ink);stroke-width:2.5}
.domino-svg line{stroke:var(--ink);stroke-width:2;stroke-linecap:round}
.domino-svg circle{fill:var(--ink)}
.option.dessin .domino-svg{max-width:44px;max-height:84px}
.choix:has(.domino-svg) .option.dessin{aspect-ratio:auto;padding:14px 8px 10px}
/* patron et cubes */
.patron{display:flex;justify-content:center;width:100%;padding:10px;border-radius:18px;background:var(--accent-bg);border:1.5px solid color-mix(in srgb,var(--accent) 25%,var(--line))}
.patron-svg{width:min(100%,calc(var(--cols) * 52px));height:auto;display:block}
.cube-svg{width:100%;max-width:110px;display:block;overflow:visible;transform:scale(1.15)}
@media (max-width:480px){.dominos-ligne{gap:5px}}
/* statistiques du profil */
.stats-panel{gap:14px}
.stats-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stat-case{display:flex;flex-direction:column;gap:1px;padding:10px;border-radius:14px;background:var(--bg);min-width:0}
.stat-case b{font-family:var(--display);font-size:1.15rem;line-height:1.15;color:var(--accent);overflow-wrap:anywhere}
.stat-case span{font-size:.78rem;color:var(--muted);line-height:1.2}
.stat-case small{font-size:.68rem;color:var(--muted);opacity:.8}
.activite{display:grid;grid-template-rows:repeat(7,1fr);grid-auto-flow:column;grid-auto-columns:1fr;gap:3px;max-width:420px}
.activite i,.activite-leg i{display:block;aspect-ratio:1;border-radius:3px;background:var(--line)}
.activite i.futur{background:none}
.activite .a1,.activite-leg .a1{background:color-mix(in srgb,var(--accent) 30%,var(--line))}
.activite .a2,.activite-leg .a2{background:color-mix(in srgb,var(--accent) 55%,var(--line))}
.activite .a3,.activite-leg .a3{background:color-mix(in srgb,var(--accent) 78%,var(--line))}
.activite .a4,.activite-leg .a4{background:var(--accent)}
.activite-leg{display:inline-flex;align-items:center;gap:3px;font-size:.72rem}
.activite-leg i{width:10px;height:10px}
.activite-boite .badges-tete{margin-bottom:6px}
.stat-case b.long{font-size:.92rem;line-height:1.2}
/* correction : bonne réponse bien visible, choix corrigés */
.bonne-rep{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;margin-top:4px;padding:12px 14px;border-radius:16px;background:var(--good-bg);border:2px solid var(--good);animation:pop .4s var(--ressort)}
.bonne-rep > span{font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--good)}
.bonne-rep > div{font-family:var(--display);font-weight:800;font-size:clamp(1.6rem,7vw,2.3rem);line-height:1.1;color:var(--good);font-variant-numeric:tabular-nums;text-align:center;word-break:break-word}
.bonne-rep.dessin > div{display:flex;justify-content:center}
.bonne-rep.dessin > div svg{height:90px;width:auto;max-width:110px;display:block}
.choix.corrige .option:not(.bonne):not(.mauvaise){opacity:.35}
.option.bonne{border-color:var(--good)!important;background:var(--good-bg)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--good) 35%,transparent)!important;opacity:1!important;position:relative}
.option.bonne::after{content:"✓";position:absolute;top:-9px;right:-9px;width:24px;height:24px;border-radius:50%;background:var(--good);color:#fff;font-weight:800;display:grid;place-items:center;font-size:.85rem}
.option.mauvaise{border-color:var(--bad)!important;background:var(--bad-bg)!important;position:relative}
.option.mauvaise::after{content:"✕";position:absolute;top:-9px;right:-9px;width:24px;height:24px;border-radius:50%;background:var(--bad);color:#fff;font-weight:800;display:grid;place-items:center;font-size:.8rem}
/* Mémoire en question */
.memo-flash{display:block;font-family:var(--display);font-weight:800;font-size:clamp(3rem,16vw,4.5rem);line-height:1;animation:pop .35s var(--ressort)}
.memo-pas{display:block;margin-top:6px;font-size:.8rem;color:var(--muted);font-family:var(--body)}
.memo-points{font-family:var(--display);font-size:2rem;letter-spacing:.2em;color:var(--muted)}
/* pas de zoom au double appui (le texte se règle dans Paramètres) */
html{touch-action:manipulation}
.defi-ligne{margin:-4px 0 0;padding:8px 12px;border-radius:12px;background:var(--accent-bg);color:var(--accent);font-weight:700;font-size:.9rem;text-align:center}

/* ---------- icônes de profil ---------- */
.avatar{--av-fond:var(--accent);position:relative;overflow:hidden}
.avatar .av-svg{width:58%;height:58%;color:var(--accent-ink)}
.avatar .av-trou{fill:var(--av-fond)}
.avatar .av-trait{fill:none;stroke:var(--av-fond);stroke-width:1.4;stroke-linejoin:round}
.avatar.legende{--av-fond:#1b1430;background:radial-gradient(circle at 30% 22%,color-mix(in srgb,var(--leg) 70%,#1b1430),#120c22 78%);box-shadow:inset 0 0 0 2px #f2c552,0 0 0 3px color-mix(in srgb,#f2c552 30%,transparent)}
.avatar.legende .av-svg{color:#ffd76a;filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
.avatar.legende::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);transform:translateX(-120%);animation:avBrille 4.5s ease-in-out infinite}
@keyframes avBrille{0%,70%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
@media (prefers-reduced-motion:reduce){.avatar.legende::after{animation:none;display:none}}
.avatar.grand.legende,.avatar.xl.legende{box-shadow:inset 0 0 0 3px #f2c552,0 0 0 4px color-mix(in srgb,#f2c552 28%,transparent),0 6px 18px -6px color-mix(in srgb,var(--leg) 70%,transparent)}

/* carte joueur du profil */
.carte-joueur{gap:16px}
.carte-joueur .identite-haut{gap:16px;flex-wrap:nowrap}
.carte-joueur .identite-champs{gap:6px;min-width:0}
.avatar-btn{position:relative;flex:none;padding:0;border:0;background:none;border-radius:50%;cursor:pointer;transition:transform .2s var(--ressort)}
.avatar-btn:hover{transform:scale(1.05)}.avatar-btn:active{transform:scale(.96)}
.avatar-btn:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
.avatar-btn .avatar.grand{width:72px;height:72px;font-size:2rem}
.crayon{position:absolute;right:-4px;bottom:-4px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--surface);border:1.5px solid var(--line);color:var(--ink);box-shadow:0 2px 6px rgba(0,0,0,.12)}
.crayon svg,.pseudo-crayon{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pseudo-ligne{display:flex;align-items:center;gap:8px;min-width:0;cursor:text}
.carte-joueur #pseudo{flex:1;min-width:0;width:100%;font-family:var(--display);font-weight:800;font-size:1.45rem;line-height:1.2;padding:2px 0;border:0;border-bottom:2px solid transparent;border-radius:0;background:none;color:var(--ink);box-shadow:none}
.carte-joueur #pseudo:focus{outline:none;border-bottom-color:var(--accent)}
.pseudo-crayon{flex:none;color:var(--muted);width:16px;height:16px}
.lien-icones{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:5px 10px 5px 12px;border-radius:999px;border:1.5px solid color-mix(in srgb,#f2c552 55%,var(--line));background:color-mix(in srgb,#f2c552 12%,var(--surface));color:var(--ink);font:inherit;font-size:.85rem;cursor:pointer}
.lien-icones b{color:color-mix(in srgb,#b88600 80%,var(--ink));font-variant-numeric:tabular-nums}
:root[data-theme="dark"] .lien-icones b{color:#ffd76a}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .lien-icones b{color:#ffd76a}}
.lien-icones .fleche{color:var(--muted);font-size:1.1rem;line-height:1}
.carte-joueur .niveau{gap:6px}
.carte-joueur .niveau .sub{margin:0;font-size:.82rem}

/* fenêtre « Mon icône » */
.panneau-icones{display:flex;flex-direction:column;gap:10px;width:min(440px,100%)}
.panneau-icones .label-txt{margin:6px 0 0}
.panneau-icones .badges-tete{margin-top:6px}
.panneau-icones .badges-tete .label-txt{margin:0}
.icone-apercu{display:flex;align-items:center;gap:16px;padding:12px;border-radius:18px;background:var(--bg);border:1.5px solid var(--line)}
.icone-apercu .avatar.xl{width:72px;height:72px;font-size:2rem;animation:none}
.icone-apercu div{display:flex;flex-direction:column;min-width:0}
.icone-apercu b{font-family:var(--display);font-size:1.25rem;overflow:hidden;text-overflow:ellipsis}
.icone-apercu .sub{margin:0}
.icones-grille{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
@media (max-width:420px){.icones-grille{grid-template-columns:repeat(5,1fr)}}
.icone-choix{position:relative;display:grid;place-items:center;aspect-ratio:1;padding:0;border-radius:50%;border:0;background:none;cursor:pointer;transition:transform .18s var(--ressort)}
.icone-choix .avatar{width:100%;height:100%;font-size:1.3rem}
.icone-choix:hover{transform:scale(1.07)}
.icone-choix.choisie{box-shadow:0 0 0 3px var(--surface),0 0 0 5.5px var(--ink)}
.icone-choix:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.icone-choix.bloquee .avatar{filter:grayscale(1) brightness(.7);opacity:.38}
.icone-choix.bloquee .avatar::after{display:none}
.icone-choix .cadenas{position:absolute;width:38%;height:38%;fill:var(--surface);stroke:var(--ink);stroke-width:1.8}
.icone-choix.vise{animation:secoueIco .35s}
@keyframes secoueIco{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.icones-aide{margin:-4px 0 2px;font-size:.84rem}
.icones-info{display:flex;align-items:center;gap:8px;min-height:1.2em;margin:4px 0 0;font-size:.88rem;color:var(--muted)}
.icones-info:empty{display:none}
.icones-info .cadenas{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2}

/* bloc « nouvelle icône » (fin de partie) et récompense dans la fiche */
.icone-gagnee{display:flex;align-items:center;gap:16px;padding:14px 16px;border-radius:16px;background:linear-gradient(135deg,color-mix(in srgb,#f2c552 18%,var(--surface)),var(--surface));border:2px solid #f2c552;animation:pop .6s .5s var(--ressort) backwards}
.icone-gagnee .avatar.grand{width:64px;height:64px}
.icone-gagnee .eyebrow{margin:0}
.icone-gagnee .sub{margin:2px 0 8px}
.recompense{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:var(--bg);border:1.5px dashed var(--line)}
.recompense .avatar{width:42px;height:42px}
.recompense:not(.ok) .avatar{filter:grayscale(1);opacity:.45}
.recompense:not(.ok) .avatar::after{display:none}
.recompense.ok{border:1.5px solid color-mix(in srgb,#f2c552 60%,var(--line));background:color-mix(in srgb,#f2c552 10%,var(--surface))}
.recompense p{margin:0;display:flex;flex-direction:column;line-height:1.3}
.recompense span{color:var(--muted);font-size:.86rem}

/* liste compacte des jeux du profil */
.liste-jeux{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media (max-width:700px){.liste-jeux{grid-template-columns:1fr}}
.ligne-jeu{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:16px;background:var(--surface);border:1.5px solid var(--line);color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:border-color .2s, transform .2s var(--ressort)}
.ligne-jeu:hover,.ligne-jeu:focus-visible{border-color:var(--accent);transform:translateY(-1px)}
.ligne-jeu > .entete-icone{width:36px;height:36px;flex:none;animation:none}
.lj-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.lj-txt b{font-size:.98rem;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lj-bas{display:flex;align-items:center;gap:10px}
.lj-bas .tj-rang{flex:none;min-width:76px}
.lj-bas .echelle.mini{margin:0;max-width:120px}
.ligne-jeu .badge.petit{flex:none}
.ligne-jeu.legende-ok{border-color:color-mix(in srgb,#f2c552 55%,var(--line));background:linear-gradient(90deg,var(--surface) 60%,color-mix(in srgb,#f2c552 10%,var(--surface)))}

/* couleurs supplémentaires du profil */
:root{--rouge:#c62828;--rouge-bg:#fde4e4;--ciel:#1479b8;--ciel-bg:#dff0fb;--graphite:#424a5a;--graphite-bg:#e7e9ee}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--rouge:#ff8080;--rouge-bg:#3d1717;--ciel:#6cc4ff;--ciel-bg:#0f2c40;--graphite:#b9c1d0;--graphite-bg:#262b35}}
:root[data-theme="dark"]{--rouge:#ff8080;--rouge-bg:#3d1717;--ciel:#6cc4ff;--ciel-bg:#0f2c40;--graphite:#b9c1d0;--graphite-bg:#262b35}
.c-rouge{--accent:var(--rouge);--accent-bg:var(--rouge-bg)}
.c-ciel{--accent:var(--ciel);--accent-bg:var(--ciel-bg)}
.c-graphite{--accent:var(--graphite);--accent-bg:var(--graphite-bg)}
.couleurs.palette{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;justify-items:center}
.couleurs.palette .pastille{width:100%;max-width:38px;height:auto;aspect-ratio:1}

/* ---------- Flèches ---------- */
.c-rouge .entete-icone,.c-rouge{}
.ico-fleches .i-fl-pts circle{fill:color-mix(in srgb,var(--accent) 35%,var(--line))}
.ico-fleches .i-fl path{fill:none;stroke:var(--accent);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.ico-fleches .i-fl path.i-fl-pointe{fill:var(--accent);stroke-width:2}
.ico-fleches .i-fl{transform-box:fill-box;transform-origin:center}
.carte:hover .i-fl-a,.carte:focus-visible .i-fl-a,.entete-icone:hover .i-fl-a{animation:flA 3.4s infinite}
.carte:hover .i-fl-c,.carte:focus-visible .i-fl-c,.entete-icone:hover .i-fl-c{animation:flC 3.4s infinite}
.carte:hover .i-fl-b,.carte:focus-visible .i-fl-b,.entete-icone:hover .i-fl-b{animation:flB 3.4s infinite}
/* chaque flèche part dans son sens en accélérant, puis toutes reviennent en douceur */
@keyframes flA{0%,8%{transform:none;opacity:1;animation-timing-function:cubic-bezier(.55,0,.9,.4)}24%{transform:translateX(64px);opacity:0}80%{transform:scale(.4);opacity:0;animation-timing-function:cubic-bezier(.2,.9,.3,1.3)}92%,100%{transform:none;opacity:1}}
@keyframes flC{0%,30%{transform:none;opacity:1;animation-timing-function:cubic-bezier(.55,0,.9,.4)}46%{transform:translateY(-64px);opacity:0}82%{transform:scale(.4);opacity:0;animation-timing-function:cubic-bezier(.2,.9,.3,1.3)}94%,100%{transform:none;opacity:1}}
@keyframes flB{0%,52%{transform:none;opacity:1;animation-timing-function:cubic-bezier(.55,0,.9,.4)}68%{transform:translateX(64px);opacity:0}84%{transform:scale(.4);opacity:0;animation-timing-function:cubic-bezier(.2,.9,.3,1.3)}96%,100%{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.ico-fleches .i-fl{animation:none!important}}
.fl-prochain{display:flex;align-items:baseline;gap:10px;margin:2px 0 4px}
.fl-prochain span{color:var(--muted);font-size:.9rem}
.fl-prochain b{font-family:var(--display);font-size:2.6rem;line-height:1;color:var(--accent);font-variant-numeric:tabular-nums}
.fl-top{align-items:center}
.fl-coeurs{display:flex;gap:4px}
.fl-coeurs i,.fl-etoiles i{display:block;width:22px;height:22px}
.fl-coeurs svg,.fl-etoiles svg{width:100%;height:100%;display:block}
.fl-coeurs .plein svg,.fl-etoiles .plein svg{fill:#e5384f}
.fl-coeurs .vide svg,.fl-etoiles .vide svg{fill:none;stroke:var(--line);stroke-width:2}
.fl-coeurs .perdu{animation:flPerdu .5s}
@keyframes flPerdu{0%{transform:scale(1.5)}40%{transform:scale(.7) rotate(-12deg)}100%{transform:none}}
.fl-stage{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 8px;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.fl-plateau{display:block;max-width:100%;height:auto;cursor:pointer;-webkit-tap-highlight-color:transparent}
.fl-point{fill:color-mix(in srgb,var(--muted) 45%,transparent)}
.fl-fleche{color:var(--ink);transition:color .15s}
.fl-corps{fill:none;stroke:currentColor;stroke-width:var(--ep,4px);stroke-linecap:round;stroke-linejoin:round}
.fl-tete{fill:currentColor;stroke:currentColor;stroke-width:calc(var(--ep,4px) * .5);stroke-linejoin:round}
.fl-fleche.sort{color:var(--accent)}
.fl-fleche.bloque{color:#e5384f}
.fl-fleche.gene{color:color-mix(in srgb,#e5384f 60%,var(--ink))}
.fl-fleche.indice{color:var(--good,#0f7f5b);animation:flIndice 1s ease-in-out infinite}
@keyframes flIndice{50%{opacity:.35}}
.fl-reste{margin:0;color:var(--muted);font-size:.88rem;min-height:1.2em}
.fl-outils{justify-content:center}
.fl-etoiles{display:flex;gap:8px;margin:2px 0 6px}
.fl-etoiles i{width:34px;height:34px;animation:pop .45s calc(var(--k) * .15s + .1s) var(--ressort) backwards}

.credit{margin:8px 0 0;text-align:center;font-size:.78rem;color:var(--muted);letter-spacing:.02em}
#aNouv .label-txt{margin:14px 0 6px}
#aNouv .label-txt:first-child{margin-top:4px}

.beta{display:inline-block;vertical-align:middle;margin-left:6px;padding:2px 8px 3px;border-radius:999px;background:var(--accent-bg);color:var(--accent);border:1.5px solid color-mix(in srgb,var(--accent) 45%,transparent);font-family:var(--body,inherit);font-size:.72rem;font-weight:700;letter-spacing:.04em;line-height:1.2;text-transform:uppercase}
h1 .beta{font-size:.8rem;transform:translateY(-3px)}

/* ---------- Actualités ---------- */
.ico-actus .i-cloche-corps{fill:color-mix(in srgb,var(--accent) 18%,var(--surface));stroke:var(--accent);stroke-width:5;stroke-linejoin:round}
.ico-actus .i-cloche-bas{fill:none;stroke:var(--accent);stroke-width:5;stroke-linecap:round}
.ico-actus .i-point-notif{fill:#e5384f;stroke:var(--surface);stroke-width:4}
.ico-actus .i-cloche{transform-origin:48px 12px}
.carte:hover .i-cloche,.entete-icone:hover .i-cloche{animation:cloche 1.2s ease-in-out infinite}
@keyframes cloche{0%,60%,100%{transform:rotate(0)}10%{transform:rotate(14deg)}20%{transform:rotate(-12deg)}30%{transform:rotate(8deg)}40%{transform:rotate(-5deg)}}
.menu-btn{position:relative}
.menu-btn.a-lire::after{content:"";position:absolute;top:6px;right:6px;width:10px;height:10px;border-radius:50%;background:#e5384f;box-shadow:0 0 0 2px var(--surface)}
.menu-nb{font-style:normal;min-width:22px;height:22px;padding:0 7px;border-radius:99px;background:#e5384f;color:#fff;font-size:.78rem;font-weight:800;display:inline-grid;place-items:center;font-variant-numeric:tabular-nums}
.actus{display:flex;flex-direction:column;gap:22px}
.actu{gap:12px;animation:entree .5s calc(var(--k) * .07s) cubic-bezier(.2,.8,.2,1) backwards}.sans-entree .actu{animation:none}
.actu.non-lue{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent)}
.actu-tete{display:flex;align-items:center;gap:12px}
.actu-tete > div{flex:1;min-width:0;display:flex;flex-direction:column}
.actu-tete h2{margin:0;font-size:1.15rem;line-height:1.25}
.actu-tete .sub{margin:2px 0 0;font-size:.82rem}
.actu-ico{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:15px;color:var(--accent);
  background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 10%,var(--surface)),color-mix(in srgb,var(--accent) 24%,var(--surface)));box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 22%,transparent)}
.actu-ico svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.actu-ico svg .f{fill:currentColor;fill-opacity:.2;stroke:none}
.actu-ico svg .p{fill:currentColor;stroke:none}
.actu-ico svg .pet{fill:currentColor;fill-opacity:.5;stroke:var(--surface);stroke-width:.8}
.actu-ico svg .coeur{fill:#ffc43c;stroke:currentColor;stroke-width:1.6}
.actu-merci .actu-ico{--accent:#e5384f;color:#e5384f}
.actu-merci .actu-ico svg{fill:currentColor}
.actu-bienvenue .actu-ico{background:color-mix(in srgb,#f2c552 22%,var(--surface));box-shadow:none;color:color-mix(in srgb,#b88600 85%,var(--ink))}
.actu-bienvenue .actu-ico svg{width:24px;height:24px;stroke-width:1.9}   /* la main : comme avant */
.actu-nouveau{flex:none;font-style:normal;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:3px 9px;border-radius:99px;background:#e5384f;color:#fff}
.actu-corps p{margin:0 0 8px;line-height:1.5}
.actu-corps .actu-intro{font-weight:700}
.actu-corps h3{margin:14px 0 6px;font-size:.98rem;color:var(--accent)}
.actu-corps ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:5px;line-height:1.45}
.actu-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:6px}
.actu-actions .sauv-msg{margin:0}
.lien-actus{display:inline-block;font-weight:700;color:var(--accent);text-decoration:none;margin:4px 0}
.lien-actus:hover{text-decoration:underline}

/* Duel : choix des jeux */
.jeux-tete{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.jeux-tete .link{font-size:.85rem}
.choix-jeux{display:flex;flex-wrap:wrap;gap:8px}
.puce-jeu{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);color:var(--muted);font:inherit;font-size:.9rem;font-weight:700;cursor:pointer;transition:background .15s,border-color .15s,color .15s,transform .15s var(--ressort)}
.puce-jeu:active{transform:scale(.96)}
.puce-jeu .pj-ico{display:grid;place-items:center;width:28px;height:28px;flex:none}
.puce-jeu .pj-ico svg{width:28px;height:28px}
.puce-jeu[aria-pressed="false"] .pj-ico{filter:grayscale(1);opacity:.45}
.puce-jeu[aria-pressed="true"]{background:var(--accent-bg);border-color:var(--accent);color:var(--ink)}
.puce-jeu[aria-pressed="true"]::after{content:"✓";color:var(--accent);font-weight:800;margin-left:2px}
.puce-jeu:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.jeux-alerte{margin:0;color:var(--bad)}
.duel-reglages.deux{grid-template-columns:1fr 1fr}
@media (max-width:560px){.duel-reglages.deux{grid-template-columns:1fr}}

.option.choisie-secret,.choix button.choisie-secret{outline:3px solid var(--accent);outline-offset:2px}
.mode-aide{margin:2px 0 0;font-size:.86rem}

/* Duel : corrections dans le cadre de chaque joueur */
.duel-erreurs{width:100%;margin-top:8px;padding-top:10px;border-top:1.5px dashed var(--line);text-align:left}
.duel-erreurs .sub{margin:0 0 6px;font-size:.82rem}
.duel-erreurs .errs{display:flex;flex-wrap:wrap;gap:6px}
.duel-erreurs .chip{font-size:.82rem;max-width:100%;white-space:normal}
.errs .chip{border-radius:14px}

/* ---------- succès ---------- */
.succes-panel{gap:12px}
.succes-derniers{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.succes-derniers .sub{margin:0 0 0 4px;font-size:.84rem}
.succes-panel .btn{align-self:flex-start}
.medaille{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;font-size:1.35rem;line-height:1;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,#f2c552 30%,var(--surface)),color-mix(in srgb,#f2c552 12%,var(--surface)));box-shadow:inset 0 0 0 2px color-mix(in srgb,#f2c552 70%,transparent)}
.panneau-succes{display:flex;flex-direction:column;gap:8px;width:min(460px,100%)}
.panneau-succes .label-txt{margin:10px 0 2px}
.liste-succes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.succes-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;border:1.5px solid var(--line);background:var(--bg)}
.succes-item > div{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;line-height:1.3}
.succes-item b{font-size:.95rem}
.succes-item span:not(.medaille){color:var(--muted);font-size:.85rem}
.succes-item:not(.obtenu) .medaille{filter:grayscale(1);opacity:.45;box-shadow:inset 0 0 0 2px var(--line);background:var(--surface)}
.succes-item.secret .medaille{font-family:var(--display);font-weight:800;color:var(--muted);font-size:1.2rem;opacity:.8}
.succes-item.obtenu{border-color:color-mix(in srgb,#f2c552 55%,var(--line));background:color-mix(in srgb,#f2c552 8%,var(--surface))}
.succes-prog{display:block;height:5px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:4px}
.succes-prog i{display:block;height:100%;background:var(--accent);transform-origin:left}
.succes-item small{font-size:.76rem;color:var(--muted)}
.succes-date{color:color-mix(in srgb,#b88600 80%,var(--ink))!important}
.toast-succes{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));z-index:9999;display:flex;align-items:center;gap:12px;padding:10px 18px 10px 10px;border-radius:999px;background:var(--surface);color:var(--ink);border:2px solid #f2c552;box-shadow:0 14px 40px -10px rgba(0,0,0,.4);transform:translate(-50%,140%);opacity:0;transition:transform .45s var(--ressort),opacity .3s;max-width:calc(100% - 32px)}
.toast-succes.visible{transform:translate(-50%,0);opacity:1}
.toast-succes .ts-ico{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;font-size:1.3rem;background:color-mix(in srgb,#f2c552 22%,var(--surface))}
.toast-succes span:last-child{display:flex;flex-direction:column;line-height:1.2}
.toast-succes small{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:color-mix(in srgb,#b88600 85%,var(--ink))}
.toast-succes b{font-size:1rem}
.toast-succes small{white-space:nowrap}

/* icône récompense de succès */
.avatar.av-recompense{--av-fond:#3a0d1c;background:radial-gradient(circle at 30% 22%,#e5384f,#5b0f24 80%);box-shadow:inset 0 0 0 2px #ffb3c0,0 0 0 3px color-mix(in srgb,#e5384f 30%,transparent)}
.avatar.av-recompense .av-svg{color:#ffe1e6;filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
/* titre de joueur */
.identite-boutons{display:flex;flex-wrap:wrap;gap:6px}
.btn-titre{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;border:1.5px solid color-mix(in srgb,var(--violet) 45%,var(--line));background:var(--violet-bg);color:var(--violet);font:inherit;font-size:.85rem;font-weight:800;cursor:pointer}
.btn-titre.vide{background:none;border-style:dashed;color:var(--muted);font-weight:700}
.titre-joueur{display:inline-flex;align-items:center;gap:5px;align-self:flex-start;padding:2px 9px;border-radius:999px;background:var(--violet-bg);color:var(--violet);font-size:.78rem;font-weight:800;line-height:1.5}
.titre-joueur.mini{font-size:.72rem;margin:2px 0}
.panneau-titres{display:flex;flex-direction:column;gap:10px;width:min(440px,100%)}
.liste-titres{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.titre-choix{width:100%;display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:14px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.titre-choix > span:last-child{display:flex;flex-direction:column;line-height:1.3}
.titre-choix small{color:var(--muted);font-size:.78rem}
.titre-choix .tc-ico{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--surface);font-size:1.1rem;flex:none}
.titre-choix.choisi{border-color:var(--violet);box-shadow:0 0 0 3px color-mix(in srgb,var(--violet) 18%,transparent)}
.titre-choix.bloque{cursor:default;opacity:.5}
.titre-choix.bloque .tc-ico{filter:grayscale(1)}
.titre-choix[data-titre=""]{justify-content:center;font-weight:700;color:var(--muted)}
.succes-gain{color:var(--violet)!important;font-weight:700}
.toast-succes em{font-style:normal;font-size:.78rem;color:var(--muted)}
.titres-aide{margin:-6px 0 4px}
/* barres de progression : violet Logimind (plus de dégradé multicolore écrasé quand la barre est courte) */
.jauge i,.jauge.mini > i{background:linear-gradient(90deg,color-mix(in srgb,var(--violet) 80%,#000 0%),color-mix(in srgb,var(--violet) 75%,#fff))}
.succes-prog i{background:var(--violet)}
.avatar.av-recompense.av-epees{--av-fond:#1d1240;background:radial-gradient(circle at 30% 22%,#8b6cf0,#3b2390 55%,#1d1240 95%);box-shadow:inset 0 0 0 2px #d9dce6,0 0 0 3px color-mix(in srgb,#8b6cf0 30%,transparent)}
.avatar.av-recompense.av-epees .av-svg{color:#eef0f6}

/* ---------- rareté, paliers, vitrine ---------- */
:root{--bronze:#c27a3a;--argent:#9aa4b4;--or:#e0b034}
.medaille{box-shadow:inset 0 0 0 2.5px var(--rc-m,color-mix(in srgb,#f2c552 70%,transparent))}
.r-bronze{--rc-m:var(--bronze)} .r-argent{--rc-m:var(--argent)} .r-or{--rc-m:var(--or)}
.succes-item.obtenu.r-bronze{border-color:color-mix(in srgb,var(--bronze) 55%,var(--line));background:color-mix(in srgb,var(--bronze) 8%,var(--surface))}
.succes-item.obtenu.r-argent{border-color:color-mix(in srgb,var(--argent) 70%,var(--line));background:color-mix(in srgb,var(--argent) 10%,var(--surface))}
.succes-item.obtenu.r-or{border-color:color-mix(in srgb,var(--or) 65%,var(--line));background:color-mix(in srgb,var(--or) 10%,var(--surface))}
.succes-item.obtenu .medaille{background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--rc-m) 30%,var(--surface)),color-mix(in srgb,var(--rc-m) 10%,var(--surface)))}
.rarete{font-style:normal;font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:1px 6px;border-radius:99px;vertical-align:2px;margin-left:4px;color:#fff}
.rarete.bronze{background:var(--bronze)} .rarete.argent{background:var(--argent)} .rarete.or{background:var(--or);color:#3a2a00}
.succes-item:not(.obtenu) .rarete{opacity:.6}
.pips{display:inline-flex;gap:3px;margin-left:6px;vertical-align:2px}
.pips i{font-style:normal;font-size:.62rem;font-weight:800;min-width:20px;text-align:center;padding:1px 4px;border-radius:6px;background:var(--line);color:var(--muted)}
.pips i.fait{color:#fff} .pips i.fait.bronze{background:var(--bronze)} .pips i.fait.argent{background:var(--argent)} .pips i.fait.or{background:var(--or);color:#3a2a00}
.liste-paliers{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:2px;font-size:.78rem;color:var(--muted)}
.liste-paliers li.fait{color:var(--ink)} .liste-paliers li.fait b{color:var(--good)}
.liste-paliers b{display:inline-block;min-width:22px}
.epingle{flex:none;align-self:flex-start;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--line);background:var(--surface);color:var(--muted);font-size:1.05rem;line-height:1;cursor:pointer}
.epingle.on{color:#e0a400;border-color:var(--or);background:color-mix(in srgb,var(--or) 14%,var(--surface))}
.epingle:disabled{opacity:.35;cursor:default}
.vitrine-aide{margin:-4px 0 0;font-size:.84rem}
.rarete-compte{display:inline-flex;align-items:center;gap:6px;font-family:var(--display);font-weight:800;font-size:1.05rem;font-variant-numeric:tabular-nums}
.rarete-compte::before{content:"";width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff8,transparent 60%),var(--c)}
.rarete-compte.or{--c:var(--or)} .rarete-compte.argent{--c:var(--argent)} .rarete-compte.bronze{--c:var(--bronze)}
.succes-derniers{gap:16px}
.vitrine{display:flex;gap:6px}
.medaille.petite{width:30px;height:30px;font-size:.95rem}
.vitrine .medaille{background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--rc-m) 30%,var(--surface)),color-mix(in srgb,var(--rc-m) 10%,var(--surface)))}

/* succès à paliers : mise en page en ligne */
.succes-item.a-paliers{align-items:flex-start}
.succes-item.a-paliers .medaille{margin-top:2px}
/* « Mes jeux » repliable */
.mes-jeux{padding:0;gap:0;overflow:hidden}
.mes-jeux summary{display:flex;align-items:center;gap:12px;padding:16px 18px;cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent}
.mes-jeux summary::-webkit-details-marker{display:none}
.mj-titre{font-family:var(--display);font-weight:800;font-size:1.25rem}
.mj-resume{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-end;gap:4px;color:var(--muted);font-size:.82rem;text-align:right}
.mj-icones{display:flex;gap:3px;flex-wrap:wrap;justify-content:flex-end}
.mj-icones i{width:9px;height:9px;border-radius:50%;background:var(--line)}
.mj-icones i.joue{background:var(--accent)}
.mj-chevron{flex:none;width:10px;height:10px;border-right:2.5px solid var(--muted);border-bottom:2.5px solid var(--muted);transform:rotate(45deg) translate(-2px,-2px);transition:transform .25s var(--ressort)}
.mes-jeux[open] .mj-chevron{transform:rotate(-135deg) translate(-2px,-2px)}
.mes-jeux .liste-jeux{padding:0 12px 14px}
.mes-jeux[open] summary{border-bottom:1.5px solid var(--line);margin-bottom:12px}
/* icône animée « Mégaphone d'or » (Porte-parole, parrainage III) : anneau vert et or qui tourne, ondes, étincelles */
.avatar.av-recompense.av-megaphone{--av-fond:#05281d;isolation:isolate;background:#05281d;box-shadow:0 0 0 3px color-mix(in srgb,#ffd34d 35%,transparent),0 0 18px -2px color-mix(in srgb,#2fd39a 70%,transparent)}
.avatar.av-megaphone::before{content:"";position:absolute;inset:-35%;z-index:-2;background:conic-gradient(from 0deg,#2fd39a,#ffd34d,#18b6c9,#2fd39a,#ffe9a0,#0f9f72,#2fd39a);animation:avTourne 4s linear infinite}
.avatar.av-megaphone::after{content:"";position:absolute;inset:3px;z-index:-1;border-radius:50%;background:radial-gradient(circle at 50% 35%,#0f6b4c,#05281d 72%)}
.avatar.av-megaphone .av-svg{color:#ffd76a;animation:avBrilleCouronne 2.4s ease-in-out infinite;overflow:visible}
.avatar.av-megaphone .av-trou{fill:#05281d}
.avatar.av-megaphone .av-onde{transform-box:fill-box;transform-origin:left center;animation:avOnde 1.6s var(--d) ease-out infinite}
.avatar.av-megaphone .av-etincelle{fill:#fff;transform-box:fill-box;transform-origin:center;animation:avEtincelle 2.1s var(--d) ease-in-out infinite}
@keyframes avOnde{0%{opacity:0;transform:scale(.6) translateX(-2px)}35%{opacity:1}100%{opacity:0;transform:scale(1.25) translateX(1.5px)}}
.icone-choix.bloquee .avatar.av-megaphone::before,.icone-choix.bloquee .avatar.av-megaphone .av-svg,.icone-choix.bloquee .avatar.av-megaphone .av-onde,.icone-choix.bloquee .avatar.av-megaphone .av-etincelle{animation:none}
@media (prefers-reduced-motion:reduce){.avatar.av-megaphone::before,.avatar.av-megaphone .av-svg,.avatar.av-megaphone .av-onde,.avatar.av-megaphone .av-etincelle{animation:none}}

/* icône animée « Couronne de légende » : anneau arc-en-ciel qui tourne, couronne dorée qui brille, étincelles */
.avatar.av-recompense.av-couronne{--av-fond:#1a0c33;isolation:isolate;background:#1a0c33;box-shadow:0 0 0 3px color-mix(in srgb,#ffd34d 35%,transparent),0 0 18px -2px color-mix(in srgb,#a95cff 70%,transparent)}
.avatar.av-couronne::before{content:"";position:absolute;inset:-35%;z-index:-2;background:conic-gradient(from 0deg,#ff3d5a,#ff8a2b,#ffd34d,#2fc77a,#4d8bff,#a95cff,#ff3d5a);animation:avTourne 3.5s linear infinite}
.avatar.av-couronne::after{content:"";position:absolute;inset:3px;z-index:-1;border-radius:50%;background:radial-gradient(circle at 50% 35%,#4a2a8a,#1a0c33 72%)}
.avatar.av-couronne .av-svg{color:#ffd76a;animation:avBrilleCouronne 2.4s ease-in-out infinite;overflow:visible}
.avatar.av-couronne .av-etincelle{fill:#fff;transform-box:fill-box;transform-origin:center;animation:avEtincelle 2.1s var(--d) ease-in-out infinite}
@keyframes avTourne{to{transform:rotate(360deg)}}
@keyframes avBrilleCouronne{0%,100%{filter:drop-shadow(0 0 1px #ffd34d) drop-shadow(0 1px 2px rgba(0,0,0,.5))}50%{filter:drop-shadow(0 0 5px #ffd34d) drop-shadow(0 0 9px #ff8a2b)}}
@keyframes avEtincelle{0%,100%{opacity:0;transform:scale(.3)}45%,55%{opacity:1;transform:scale(1.15)}}
.icone-choix.bloquee .avatar.av-couronne::before,.icone-choix.bloquee .avatar.av-couronne .av-svg,.icone-choix.bloquee .avatar.av-couronne .av-etincelle{animation:none}
@media (prefers-reduced-motion:reduce){.avatar.av-couronne::before,.avatar.av-couronne .av-svg,.avatar.av-couronne .av-etincelle{animation:none}}
/* rareté retirée : paliers débloqués en doré, médailles uniformes */
.pips i.fait{background:var(--or);color:#3a2a00}
.succes-derniers{gap:8px}
.actu-info .actu-ico{--accent:var(--rouge);color:var(--rouge)}
.avatar.av-recompense.av-calendrier{--av-fond:#063a28;background:radial-gradient(circle at 30% 22%,#3ad69a,#0f7a52 55%,#053021 95%);box-shadow:inset 0 0 0 2px #f2c552,0 0 0 3px color-mix(in srgb,#3ad69a 30%,transparent)}
.avatar.av-recompense.av-calendrier .av-svg{color:#ffd76a}
.avatar.av-recompense.av-gateau{--av-fond:#6a1240;background:radial-gradient(circle at 30% 22%,#ff8fc7,#c2185b 55%,#4a0c2c 95%);box-shadow:inset 0 0 0 2px #fff0c2,0 0 0 3px color-mix(in srgb,#ff8fc7 30%,transparent)}
.avatar.av-recompense.av-gateau .av-svg{color:#fff6e0}
.avatar.av-recompense.av-general{--av-fond:#14213d;background:radial-gradient(circle at 30% 22%,#5b7bd5,#1f3b8a 55%,#0d1733 95%);box-shadow:inset 0 0 0 2px #f2c552,0 0 0 3px color-mix(in srgb,#5b7bd5 30%,transparent)}
.avatar.av-recompense.av-general .av-svg{color:#ffd76a}

/* liste des titres : survol et animation quand on en équipe un */
.titre-choix{position:relative;transition:transform .2s var(--ressort),border-color .2s,background-color .2s,box-shadow .2s}
.titre-choix:not(.bloque):hover,.titre-choix:not(.bloque):focus-visible{transform:translateY(-2px);border-color:var(--violet);background:color-mix(in srgb,var(--violet) 9%,var(--surface));box-shadow:0 6px 16px -10px color-mix(in srgb,var(--violet) 60%,transparent)}
.titre-choix:not(.bloque):hover .tc-ico{transform:scale(1.12) rotate(-6deg)}
.titre-choix .tc-ico{transition:transform .25s var(--ressort)}
.titre-choix:not(.bloque):active{transform:scale(.97)}
.titre-choix.vient{animation:titreVient .42s var(--ressort);border-color:var(--violet);background:color-mix(in srgb,var(--violet) 14%,var(--surface))}
.titre-choix.vient::after{content:"✓";position:absolute;right:14px;top:50%;width:26px;height:26px;margin-top:-13px;border-radius:50%;display:grid;place-items:center;background:var(--violet);color:#fff;font-weight:800;font-size:.85rem;animation:pop .35s var(--ressort)}
@keyframes titreVient{0%{transform:scale(1)}40%{transform:scale(1.04)}100%{transform:scale(1)}}
.btn-titre.change{animation:titreRebond .55s var(--ressort)}
@keyframes titreRebond{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.12);opacity:1}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.titre-choix,.titre-choix .tc-ico{transition:none}.titre-choix.vient,.btn-titre.change,.titre-choix.vient::after{animation:none}}
/* initiale du pseudo un peu plus grande */
.avatar-btn .avatar.grand{font-size:2.5rem}
.icone-apercu .avatar.xl{font-size:2.5rem}
.menu-profil .avatar{font-size:1.4rem}
.profil-chip .avatar{font-size:1.1rem}
.icone-choix .avatar{font-size:1.5rem}

/* emojis bien centrés dans leurs ronds (médailles, titres, bulle de succès) */
.medaille,.tc-ico,.ts-ico{line-height:1;text-align:center;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.win .medaille,.win .tc-ico,.win .ts-ico{padding:.14em 0 0 .08em}
.win .succes-item.secret .medaille{padding:0}

/* pictos au trait des succès */
.medaille,.tc-ico,.ts-ico{padding:0!important}
.pic{width:56%;height:56%;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.medaille{color:color-mix(in srgb,#b88600 85%,var(--ink))}
:root[data-theme="dark"] .medaille,:root[data-theme="dark"] .ts-ico{color:#ffd76a}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .medaille,:root:not([data-theme="light"]) .ts-ico{color:#ffd76a}}
.succes-item:not(.obtenu) .medaille{color:var(--muted)}
.tc-ico{color:var(--violet)} .tc-ico .pic{width:60%;height:60%}
.titre-choix.bloque .tc-ico{color:var(--muted)}
.ts-ico{color:color-mix(in srgb,#b88600 85%,var(--ink))} .ts-ico .pic{width:58%;height:58%}

/* ---------- bannières de profil ---------- */
.b-violet{background:linear-gradient(135deg,#5b2fc4,#9b3fd0 55%,#d0479c)}
.b-nuit{background:
  radial-gradient(1.4px 1.4px at 12% 22%,#fff 99%,transparent),radial-gradient(1px 1px at 28% 68%,#fff 99%,transparent),
  radial-gradient(1.6px 1.6px at 46% 30%,#fff 99%,transparent),radial-gradient(1px 1px at 62% 78%,#fff 99%,transparent),
  radial-gradient(1.3px 1.3px at 78% 18%,#fff 99%,transparent),radial-gradient(1px 1px at 88% 58%,#fff 99%,transparent),
  radial-gradient(1px 1px at 36% 12%,#fff 99%,transparent),radial-gradient(1.2px 1.2px at 70% 44%,#fff 99%,transparent),
  radial-gradient(1px 1px at 8% 82%,#fff 99%,transparent),radial-gradient(1.4px 1.4px at 94% 88%,#fff 99%,transparent),
  radial-gradient(120% 90% at 85% 0%,#3a3f9e 0,transparent 60%),linear-gradient(160deg,#0c1433,#172a63)}
.b-aurore{background:radial-gradient(90% 70% at 20% 10%,rgba(80,255,190,.55),transparent 60%),radial-gradient(80% 70% at 85% 30%,rgba(140,110,255,.6),transparent 65%),linear-gradient(170deg,#06222e,#0b3d4a 50%,#1b2a5e)}
.b-quadrillage{background:radial-gradient(circle,rgba(255,255,255,.35) 1.2px,transparent 1.6px) 0 0/22px 22px,repeating-linear-gradient(0deg,rgba(255,255,255,.08) 0 1px,transparent 1px 22px),repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 1px,transparent 1px 22px),linear-gradient(140deg,#1d3a8f,#2b2a8a)}
.b-vagues{background:radial-gradient(70% 30% at 16% 112%,#2a8fb8 98%,transparent 100%),radial-gradient(75% 32% at 64% 118%,#1f7aa6 98%,transparent 100%),radial-gradient(60% 28% at 100% 108%,#2b95bf 98%,transparent 100%),radial-gradient(85% 34% at 42% 104%,rgba(255,255,255,.07) 98%,transparent 100%),linear-gradient(180deg,#0b3a63,#12547f)}
.b-couchant{background:radial-gradient(60% 80% at 75% 105%,#ffcf6b,transparent 60%),linear-gradient(165deg,#ff8a5b,#d3366f 55%,#4b1a8a)}
/* texte lisible sur une bannière */
.ban-fond{border-color:transparent!important;color:#fff}
.ban-fond .sub,.ban-fond small{color:rgba(255,255,255,.82)!important}
.carte-joueur.ban-fond #pseudo,.carte-joueur.ban-fond .niveau-ligne b,.carte-joueur.ban-fond #niveauTxt{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.35)}
.carte-joueur.ban-fond .pseudo-crayon{color:rgba(255,255,255,.85)}
.ban-fond .jauge{background:rgba(255,255,255,.22)}
.ban-fond .jauge i,.ban-fond .jauge > i{background:#fff}
.carte-joueur.ban-fond .btn-titre{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.45);color:#fff}
.carte-joueur.ban-fond .btn-titre.vide{color:rgba(255,255,255,.85)}
.ban-fond .titre-joueur{background:rgba(255,255,255,.2);color:#fff}
.menu-profil.ban-fond b{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.35)}
.icone-apercu.ban-fond b{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.35)}
/* choix de la bannière */
.bannieres-grille{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media (max-width:420px){.bannieres-grille{grid-template-columns:repeat(3,1fr)}}
.banniere-choix{display:flex;flex-direction:column;gap:4px;padding:0;border:0;background:none;color:var(--muted);font:inherit;cursor:pointer;text-align:center}
.banniere-apercu{display:block;aspect-ratio:2/1;border-radius:10px;border:2px solid transparent;transition:transform .18s var(--ressort)}
.banniere-apercu.vide{background:var(--bg);border:1.5px dashed var(--line)}
.banniere-choix:hover .banniere-apercu{transform:translateY(-2px)}
.banniere-choix.choisie .banniere-apercu{box-shadow:0 0 0 2px var(--surface),0 0 0 4.5px var(--ink)}
.banniere-choix small{font-size:.72rem;line-height:1.2}
.banniere-choix.choisie small{color:var(--ink);font-weight:700}
/* bannière : le fond va jusqu'au bord (pas de liseré sur les côtés) */
.ban-fond{background-origin:border-box!important;background-clip:border-box!important;border-color:transparent!important;box-shadow:none}
.banniere-apercu.ban-fond{border-width:0}

/* ---------- Actualités : image en tête d'une mise à jour ---------- */
.actu-visuel{position:relative;display:block;overflow:hidden;border-radius:18px;margin:2px 0 14px;text-decoration:none;color:inherit;isolation:isolate;transition:transform .25s var(--ressort)}
.actu-visuel:active{transform:scale(.98)}
.actu-visuel:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.vis-cta{position:absolute;right:10px;bottom:10px;z-index:3;padding:5px 11px;border-radius:99px;font-size:.78rem;font-weight:800;background:rgba(10,8,22,.72);color:#fff;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.vis-cta i{font-style:normal;display:inline-block;transition:transform .2s}
.actu-visuel:hover .vis-cta i{transform:translateX(3px)}
.actu-corps{container-type:inline-size}
.vis-icones{--t:clamp(90px,24cqw,150px);height:clamp(150px,40cqw,250px);background:radial-gradient(120% 140% at 15% 10%,#3b2a7a,#140d2b 60%,#0b0718);}
.vis-icones::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 120%,color-mix(in srgb,#f2c552 30%,transparent),transparent 55%);z-index:0}
.vis-ico{position:absolute;top:50%;z-index:1;animation:visEntree .7s calc(.15s + var(--k) * .12s) var(--ressort) backwards}
.vis-ico .avatar.xl{width:var(--t);height:var(--t);animation:none}
.vis-ico:nth-child(1){left:3cqw;transform:translateY(-50%) rotate(-8deg)}
.vis-ico:nth-child(2){left:37cqw;transform:translateY(-54%) scale(1.1)}
.vis-ico:nth-child(3){left:auto;right:calc(var(--t) * -.38);transform:translateY(-46%) rotate(9deg) scale(1.28)}
.vis-ico:nth-child(2){z-index:2}
@keyframes visEntree{from{opacity:0;translate:0 18px}}
.vis-jeu{height:104px;border:1.5px solid var(--line)}
.vis-zoom .carte-corps{display:none}
.vis-nom{position:absolute;right:10px;top:10px;z-index:3;padding:5px 12px;border-radius:99px;font-family:var(--display);font-weight:800;font-size:1rem;background:rgba(10,8,22,.72);color:#fff;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.vis-nom .beta{margin-left:4px}
.vis-zoom{position:absolute;inset:0;pointer-events:none}
.vis-zoom .carte{position:absolute;left:-12%;top:-34px;width:100%;transform:scale(1.7);transform-origin:top left;border:0;border-radius:0;animation:none}
@media (prefers-reduced-motion:reduce){.vis-ico{animation:none}}

/* ---------- pas de barre de défilement visible (le défilement marche toujours) ---------- */
html, body, * { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar, *::-webkit-scrollbar { display: none; width: 0; height: 0; background: transparent; }

/* ---------- icônes des modes Blitz et Coop ---------- */
.i-bz-bouton{fill:var(--accent)}
.i-bz-cadran{fill:var(--accent-bg);stroke:color-mix(in srgb,var(--accent) 30%,transparent);stroke-width:6}
.i-bz-anneau{fill:none;stroke:var(--accent);stroke-width:6;stroke-linecap:round;stroke-dasharray:214;stroke-dashoffset:0}
.i-bz-eclair{fill:var(--accent)}
.carte:hover .i-bz-anneau,.entete-icone:hover .i-bz-anneau{animation:bzCompte 2s linear infinite}
.carte:hover .i-bz-eclair,.entete-icone:hover .i-bz-eclair{animation:eclat .5s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 50%}
@keyframes bzCompte{to{stroke-dashoffset:214}}
.i-cp-mains path{fill:none;stroke:var(--accent);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.i-cp-mains{transform-box:fill-box;transform-origin:50% 60%}
.carte:hover .i-cp-mains,.entete-icone:hover .i-cp-mains{animation:cpSerre .9s ease-in-out infinite}
@keyframes cpSerre{0%,100%{rotate:0deg}30%{rotate:-6deg;translate:0 1.5px}60%{rotate:4deg;translate:0 -1px}}
@media (prefers-reduced-motion:reduce){.i-bz-anneau,.i-bz-eclair,.i-cp-mains{animation:none!important}}

/* accueil, grand écran : 5 modes → le Défi du jour prend 2 cases */
@media (min-width:901px){.cartes.une > .carte:first-child:nth-last-child(5){grid-column:span 2}}

/* ---------- quiz : cœurs (Coop), pastille de tour, chrono global (Blitz) ---------- */
.q-coeurs{display:inline-flex;gap:3px;margin-right:8px;vertical-align:middle}
.q-coeurs i{display:inline-grid;width:18px;height:18px}
.q-coeurs svg{width:100%;height:100%;fill:#e5384f}
.q-coeurs i.vide svg{fill:none;stroke:color-mix(in srgb,var(--muted) 70%,transparent);stroke-width:2}
.q-coeurs i.perdu{animation:coeurPerdu .6s ease-out}
@keyframes coeurPerdu{0%{transform:scale(1.5)}40%{transform:scale(.7) rotate(-12deg)}100%{transform:none}}
.pill-tour{font-weight:800;white-space:nowrap}
.top [data-r=score],.top [data-r=prog]{white-space:nowrap}
.top [data-r=score]{display:inline-flex;align-items:center}
.pill-tour.j0{background:var(--accent);color:var(--accent-ink)}
.pill-tour.j1{background:transparent;color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent)}
.pill-tour.pop{animation:pillPop .45s var(--ressort)}
@keyframes pillPop{0%{transform:scale(.6);opacity:0}100%{transform:none;opacity:1}}
.timer.urgent i{background:#e5384f}
.timer.secoue{animation:timerSecoue .4s ease-in-out}
@keyframes timerSecoue{0%,100%{transform:none}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.feedback .penalite{display:inline-block;padding:1px 8px;margin-right:4px;border-radius:99px;background:#e5384f;color:#fff;font-size:.85em}
.coop-noms .field input{width:100%}
.vis-jeux{display:grid;gap:10px;margin:2px 0 14px}
.vis-jeux.n2{grid-template-columns:1fr 1fr}
.vis-jeux .actu-visuel{margin:0}
.vis-jeux.n2 .vis-zoom .carte{transform:scale(1.3);left:-10%;top:-14px;width:115%}
.vis-jeux.n2 .vis-nom{font-size:.8rem;padding:4px 10px;white-space:nowrap;right:8px;top:8px}
.vis-jeux.n2 .vis-nom .beta{display:none}
.ico-menu-pts{display:inline-block;font-weight:900;padding:0 3px;border-radius:6px;background:color-mix(in srgb,var(--ink) 10%,transparent)}

/* ---------- appui long (iPhone) : pas d'aperçu du lien ni de sélection sur les blocs et boutons ---------- */
a, button, .carte, .actu-visuel, .puce-jeu, .option, img, svg { -webkit-touch-callout: none; }
.carte, .actu-visuel, .btn, .puce-jeu, .option, .menu-lien, .trio-case { -webkit-user-select: none; user-select: none; }

/* ---------- Conseils : onglets (une section à la fois) ---------- */
.cs-onglets{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 8px;margin:0 -2px 4px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.cs-onglet{flex:none;display:inline-flex;align-items:center;gap:7px;padding:7px 13px 7px 8px;border-radius:99px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-weight:700;font-size:.88rem;cursor:pointer;scroll-snap-align:center;transition:background-color .2s,border-color .2s,transform .15s}
.cs-onglet:active{transform:scale(.96)}
.cs-ico{display:inline-grid;place-items:center;width:26px;height:26px}
.cs-ico svg{width:24px;height:24px}
.cs-onglet > .cs-ico > svg[viewBox="0 0 24 24"]{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cs-onglet.choisi{background:var(--accent-bg);border-color:var(--accent);color:var(--accent)}
.section-conseil[hidden]{display:none}
.section-conseil{animation:entree .35s cubic-bezier(.2,.8,.2,1)}
.memo{grid-template-columns:repeat(auto-fill,minmax(128px,1fr));grid-auto-flow:dense;gap:8px}
.memo-bloc.large{grid-column:1 / -1}
.memo-bloc{padding:9px 11px;gap:3px}
.memo-bloc p{font-size:.92rem;line-height:1.35}

/* ---------- Conseils : roue des mini-jeux ---------- */
.cs-roue-cadre{position:relative;margin:0 -16px 6px;padding:2px 0 0}
.cs-roue{display:flex;align-items:center;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:18px calc(50% - 36px) 30px;-webkit-overflow-scrolling:touch;-webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent)}
.cs-item{flex:none;width:72px;height:72px;display:grid;place-items:center;border-radius:22px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;scroll-snap-align:center;padding:0;will-change:transform;transition:background-color .2s,border-color .2s,box-shadow .2s}
.cs-item .cs-ico{width:44px;height:44px}
.cs-item .cs-ico svg{width:44px;height:44px}
.cs-item > .cs-ico > svg[viewBox="0 0 24 24"]{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cs-item.choisi{background:var(--accent-bg);border-color:var(--accent);color:var(--accent);box-shadow:0 8px 22px -10px var(--accent)}
.cs-nom{margin:6px 0 0;text-align:center;font-family:var(--display);font-weight:800;font-size:1.15rem;color:var(--accent)}
.cs-nom:not([class*="c-"]){color:var(--ink)}

/* ---------- menus de jeu compacts : boutons à la place des listes, onglets de mode ---------- */
.seg-auto{flex-wrap:wrap}
.seg-auto button{flex:1 1 auto;white-space:nowrap;padding:9px 6px}
.modes-seg{display:none}
@media (max-width:760px){
  .modes.compact{grid-template-columns:1fr;gap:12px}
  .modes.compact .modes-seg{display:flex;margin-bottom:2px;font-size:1rem}
  .modes.compact .modes-seg button{padding:11px 8px}
  .modes.compact > .panel:not(.actif){display:none}
  .modes.compact > .panel > h2{display:none}
  .modes.compact > .panel > .tips{display:none}
  .modes.compact > .panel > .sub{font-size:.9rem;margin-top:-2px}
  .modes.compact > .panel{gap:12px;padding:18px}
  .modes.compact > .panel{animation:entree .3s cubic-bezier(.2,.8,.2,1)}
}
.confettis{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:9999}

/* ---------- transition entre les pages : fondu (View Transitions), sinon petite entrée en fondu ---------- */
/* (plus de transition entre les pages depuis la 2.8 : sur iPhone elle décalait la barre d'onglets) */
::view-transition-old(root) { animation: vtSort .16s ease-in both; }
::view-transition-new(root) { animation: vtEntre .24s ease-out both; }
@keyframes vtSort { to { opacity: 0; } }
@keyframes vtEntre { from { opacity: 0; transform: translateY(6px); } }
html.fondu body > main { animation: vtEntre .26s ease-out both; }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root), html.fondu body > main { animation: none; } }
.ts-palier{font-style:normal;font-size:.75em;font-weight:800;margin-left:6px;padding:1px 7px;border-radius:99px;background:color-mix(in srgb,#f2c552 25%,transparent);color:#f2c552;white-space:nowrap}
.avatar.av-recompense.av-mains{--av-fond:#05343a;background:radial-gradient(circle at 30% 22%,#6ee7f2,#0e8a97 55%,#05343a 95%);box-shadow:inset 0 0 0 2px #f2c552,0 0 0 3px color-mix(in srgb,#4fd3e6 32%,transparent)}
.avatar.av-recompense.av-mains .av-svg{color:#fff3c4}
.vis-zoom .apercu{display:none}
.avatar.av-recompense.av-eclair{--av-fond:#120a33;background:radial-gradient(circle at 30% 22%,#7a5cff,#2a1670 58%,#120a33 95%);box-shadow:inset 0 0 0 2px #ffd34d,0 0 0 3px color-mix(in srgb,#ffd34d 30%,transparent)}
.avatar.av-recompense.av-eclair .av-svg{color:#ffd84d;filter:drop-shadow(0 0 5px rgba(255,210,80,.75)) drop-shadow(0 1px 2px rgba(0,0,0,.4))}

/* ---------- À propos : historique des versions ---------- */
.historique{border:1.5px solid var(--line);border-radius:14px;padding:0}
.historique > summary{cursor:pointer;list-style:none;padding:12px 14px;font-weight:700;display:flex;justify-content:space-between;align-items:center}
.historique > summary::-webkit-details-marker,.histo-version > summary::-webkit-details-marker{display:none}
.historique > summary::after,.histo-version > summary::after{content:"›";font-size:1.3rem;line-height:1;transition:transform .2s;color:var(--muted)}
.historique[open] > summary::after,.histo-version[open] > summary::after{transform:rotate(90deg)}
.histo-liste{display:flex;flex-direction:column;gap:6px;padding:0 10px 10px}
.histo-version{border-radius:10px;background:var(--bg);padding:0 12px}
.histo-version > summary{cursor:pointer;list-style:none;padding:10px 0;display:flex;align-items:baseline;gap:10px}
.histo-version > summary .sub{flex:1;font-size:.82rem}
.histo-version p{margin:0 0 6px}
.histo-version .histo-titre{font-weight:700;color:var(--accent);font-size:.9rem;margin-top:8px}
.histo-version ul{margin:0 0 8px;padding-left:18px;display:flex;flex-direction:column;gap:3px;font-size:.9rem;line-height:1.4}

/* ---------- compte en ligne (Paramètres, bêta) ---------- */
.cpt{display:flex;flex-direction:column;gap:14px;padding:4px 0}
.cpt .segments{align-self:stretch}
.cpt .sauv-texte{flex:none;gap:2px}
.cpt-form{display:flex;flex-direction:column;gap:12px}
.cpt-form .btn{align-self:flex-start}
.cpt-mdp{display:flex;gap:10px;align-items:center}
.cpt-mdp input{flex:1;min-width:0}
.cpt-mdp .link{flex:none}
.cpt-aide{font-size:.85rem;margin:-4px 0 0}
.cpt-etat{font-size:.85rem;color:var(--muted)}
.cpt-etat.ok{color:var(--good);font-weight:700}
.cpt-etat.ok::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:currentColor;margin-right:6px;vertical-align:1px}
.cpt-etat.hors{color:var(--orange);font-weight:700}
.cpt-code{margin:0}
.cpt-code b{font-family:var(--display);letter-spacing:.14em;color:var(--violet)}
.cpt-code span{font-size:.85rem}
.cpt-choix-liste{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:480px){.cpt-choix-liste{grid-template-columns:1fr}}
.cpt-choix{display:flex;flex-direction:column;gap:4px;text-align:left;padding:14px 16px;border-radius:14px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);transition:border-color .2s, transform .2s var(--ressort)}
.cpt-choix span{color:var(--muted);font-size:.88rem}
@media (hover:hover) and (pointer:fine){.cpt-choix:hover{border-color:var(--violet);transform:translateY(-2px)}}
.cpt-choix:disabled{opacity:.6;cursor:default;transform:none}
.cpt > .link{align-self:flex-start}
.pseudo-msg{margin:4px 0 0}

/* =====================================================================
   AMIS, CLASSEMENT, DUEL EN LIGNE (bêta)
   ===================================================================== */
.amis-onglets{margin-bottom:2px}
.amis-zone{display:flex;flex-direction:column;gap:16px}
.amis-titre{display:flex;align-items:center;gap:8px;font-size:1.15rem}
.amis-titre .sub{font-family:var(--body);font-size:.95rem}
.amis-vide{align-items:flex-start}
.amis-vide-ico{width:64px;height:64px}
.amis-vide .btn{align-self:flex-start}
.segments.petits button{padding:7px 6px;font-size:.85rem}
/* code ami */
.code-ami{gap:10px}
.code-ligne{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.code-gros{font-family:var(--display);font-weight:800;font-size:clamp(1.8rem,8vw,2.3rem);letter-spacing:.18em;color:var(--violet);font-variant-numeric:tabular-nums;user-select:all;-webkit-user-select:all}
.ajout-ligne{display:flex;gap:10px}
.ajout-ligne input{flex:1;min-width:0;text-transform:uppercase;letter-spacing:.14em;font-family:var(--display);font-weight:800}
.ajout-ami{display:flex;flex-direction:column;gap:8px}
/* listes */
.liste-amis{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.ami{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:14px;border:1.5px solid transparent;transition:border-color .2s, background-color .2s}
.ami.moi{background:var(--accent-bg);border-color:color-mix(in srgb,var(--violet) 35%,transparent)}
.ami-lien{display:flex;align-items:center;gap:12px;flex:1;min-width:0;color:var(--ink);text-decoration:none}
a.ami-lien:hover b{color:var(--violet)}
.ami .avatar{width:42px;height:42px;font-size:1.15rem;flex:none;position:relative}
.ami-av{position:relative;flex:none;display:inline-flex}
.ami.present .ami-av::after{content:"";position:absolute;right:-2px;bottom:-2px;z-index:1;width:14px;height:14px;border-radius:50%;background:var(--good);border:3px solid var(--surface);box-sizing:border-box}
.ami.moi .ami-av::after{border-color:var(--accent-bg)}
.ami-txt b .titre-joueur{margin:0 0 0 4px;vertical-align:1px}
.ami-txt{display:flex;flex-direction:column;line-height:1.25;min-width:0;flex:1}
.ami-txt b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ami-etat{font-size:.82rem;color:var(--muted)}
.ami-etat.en-ligne{color:var(--good);font-weight:700}
.ami-actions{display:flex;align-items:center;gap:8px;flex:none}
.ami-pct{font-family:var(--display);font-weight:800;color:var(--violet);font-size:.95rem;font-variant-numeric:tabular-nums;min-width:3ch;text-align:right}
@media (max-width:480px){.ami-actions .btn.petit{padding:7px 10px}}
/* classement */
.classement .ami{padding:8px 6px}
.place{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:.9rem;color:var(--muted);background:var(--bg);border:1.5px solid var(--line)}
.place.p1{background:#f2c230;border-color:#f2c230;color:#3a2a00}
.place.p2{background:#c4cdd8;border-color:#c4cdd8;color:#1d2633}
.place.p3{background:#e0975c;border-color:#e0975c;color:#3a1e08}
.score-ami{font-family:var(--display);font-weight:800;font-size:1.3rem;color:var(--violet);font-variant-numeric:tabular-nums;flex:none}
.score-ami small{font-size:.65em;color:var(--muted)}
.absents{font-size:.85rem}
/* mini-classement (page Défi du jour) */
.defi-amis{gap:10px}
.mini-classement{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.mini-classement li{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:12px;font-variant-numeric:tabular-nums}
.mini-classement li.moi{background:var(--accent-bg)}
.mini-classement b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mini-classement li > span:last-child{color:var(--muted);font-size:.88rem}
/* profil d'un ami */
.retour-amis{align-self:flex-start;margin-bottom:-6px}
.ami-nom{font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,6vw,2rem);line-height:1.05}
.identite-champs .ami-etat{font-size:.9rem}
.ami-boutons{margin-top:4px}
.lj-record{font-size:.8rem}
.liste-jeux .ligne-jeu{cursor:default}
.danger-texte{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,var(--line))}
.danger-texte[data-sur="1"]{background:var(--bad);color:var(--accent-ink);border-color:var(--bad)}
/* duel en ligne */
.duel-salon{align-items:center;text-align:center;gap:16px}
.duel-salon .row{justify-content:center}
.duel-face{display:flex;align-items:center;justify-content:center;gap:18px}
.duel-face > div{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;max-width:40vw}
.duel-face b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.duel-vs{font-family:var(--display);font-weight:800;font-size:1.5rem;color:var(--rose);animation:pop .6s var(--ressort)}
.attente-points{display:flex;gap:8px}
.attente-points i{width:10px;height:10px;border-radius:50%;background:var(--rose);animation:rebond 1.2s ease-in-out infinite}
.attente-points i:nth-child(2){animation-delay:.15s}.attente-points i:nth-child(3){animation-delay:.3s}
@keyframes rebond{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-8px);opacity:1}}
.decompte{font-family:var(--display);font-weight:800;font-size:clamp(5rem,26vw,8rem);line-height:1;color:var(--rose)}
.decompte.pop{animation:pop .45s var(--ressort)}
.duel-direct{display:flex;flex-direction:column;gap:6px;padding:10px 14px;border-radius:14px;background:var(--surface);border:1.5px solid var(--line)}
.dd-ligne{display:grid;grid-template-columns:minmax(0,7ch) 1fr auto;align-items:center;gap:10px;font-size:.88rem;font-variant-numeric:tabular-nums}
.dd-nom{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-barre{height:8px;border-radius:99px;background:var(--line);overflow:hidden}
.dd-barre i{display:block;height:100%;border-radius:99px;background:var(--violet);transform-origin:left;transition:transform .4s var(--ressort)}
.dd-ligne.lui .dd-barre i{background:var(--rose)}
.dd-n{color:var(--muted);font-weight:700}
.duel-scores{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
.duel-scores > div{display:flex;flex-direction:column;gap:2px;padding:12px;border-radius:14px;border:1.5px solid var(--line);background:var(--bg)}
.duel-scores > div.gagnant{border-color:var(--good);background:var(--good-bg)}
.duel-scores span{color:var(--muted);font-size:.9rem;font-variant-numeric:tabular-nums}
.duel-fin .erreurs-bloc,.duel-fin .errs{text-align:left;width:100%}
/* invitation à un duel (sur toutes les pages) */
.invit-duel{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:120;width:min(440px,calc(100vw - 32px));
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 16px;border-radius:18px;background:var(--surface);color:var(--ink);
  border:2px solid var(--rose);box-shadow:0 18px 40px -10px var(--ombre);transform:translate(-50%,140%);transition:transform .35s var(--ressort)}
.invit-duel.ouvert{transform:translate(-50%,0)}
.invit-duel.annonce{border-color:var(--line);justify-content:center;font-weight:700}
.invit-ico{width:44px;height:44px;flex:none;--accent:var(--rose);--accent-bg:var(--rose-bg)}
.invit-txt{display:flex;flex-direction:column;flex:1;min-width:150px;line-height:1.3}
.invit-boutons{display:flex;gap:8px;--accent:var(--rose)}
@media (prefers-reduced-motion:reduce){.invit-duel{transition:none}}
.amis-zone .sauv-texte{flex:none;gap:2px}
/* fenêtre « Crée ton compte » à l'ouverture */
.cpt-panneau{width:min(420px,100%);display:flex;flex-direction:column;gap:14px}
.cpt-bienvenue{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.cpt-bienvenue .menu-logo{width:58px;height:58px;display:block}
.cpt-bienvenue h2{font-family:var(--display);font-size:1.55rem;margin:4px 0 0}
.cpt-bienvenue h2 span{color:var(--violet)}
.cpt-panneau .cpt-form .btn{align-self:stretch}
.cpt-plus-tard{align-self:center;color:var(--muted);font-weight:700}
.cpt-ok{text-align:center;font-size:1.1rem;padding:18px 0}
.cpt-demo{margin:0;padding:10px 12px;border-radius:12px;background:var(--ambre-bg);color:var(--ink);font-size:.85rem}
.ami-pct{display:flex;flex-direction:column;align-items:flex-end;line-height:1.05}
.ami-pct small{font-family:var(--body);font-weight:700;font-size:.62rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.ami-txt b{white-space:normal;display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;overflow:visible}
.ami-txt b .titre-joueur{margin:0}
.ami-txt b .titre-joueur{font-size:.64rem;padding:1px 7px;line-height:1.45;font-weight:800}
.carte-joueur .identite-champs > .titre-joueur{font-size:.7rem;padding:1px 8px}
/* titre « Admin » (donné par la base, pas par un succès) */
.titre-admin{display:inline-flex;align-items:center;gap:4px;align-self:flex-start;padding:2px 9px 2px 7px;border-radius:999px;font-size:.78rem;font-weight:800;line-height:1.5;
  color:#3a2600;background:linear-gradient(135deg,#ffd76a,#f2b312);box-shadow:0 0 0 1px rgba(160,100,0,.25) inset}
.titre-admin svg{width:13px;height:13px;fill:currentColor}
.titre-admin.mini{font-size:.64rem;padding:1px 7px 1px 5px}
.titre-admin.mini svg{width:10px;height:10px}
.ami-titres{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center}
.identite-boutons{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.identite-boutons #titreAdmin:empty{display:none}
/* liste d'amis : pseudo et titre sur la même ligne (le titre se coupe s'il manque de place), 2 lignes alignées sur l'avatar */
.ami-txt b{flex-wrap:nowrap;min-width:0;gap:6px}
.ami-txt b .titre-joueur,.ami-txt b .titre-admin{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;height:17px;line-height:17px;padding:0 7px;font-size:.62rem;vertical-align:middle;letter-spacing:.01em}
.ami-txt b .titre-admin{display:inline-flex;align-items:center;flex:none}
.ami-txt b .titre-admin svg{width:9px;height:9px}
.ami{align-items:center}
.ami-lien{align-items:center}
/* bouton « Défier » rond (icône du duel) : laisse la place au pseudo et au titre */
.btn-defier{flex:none;width:40px;height:40px;padding:6px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--rose) 45%,var(--line));background:var(--rose-bg);display:grid;place-items:center;cursor:pointer;transition:transform .2s var(--ressort), border-color .2s}
.btn-defier .ico{width:26px;height:26px}
.btn-defier:active{transform:scale(.92)}
@media (hover:hover) and (pointer:fine){.btn-defier:hover{border-color:var(--rose);transform:translateY(-1px)}}
.btn-defier:disabled{opacity:.5}
.duel-onglets .beta{margin-left:4px;font-size:.6rem;padding:1px 6px}
#dLigne .liste-amis{margin-top:4px}
#dLigne .btn.c-rose{--accent:var(--rose)}
/* ---------- Coop en ligne ---------- */
.coop-et{color:var(--cyan)}
.coop-decompte{color:var(--cyan)}
.coop-regles{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;text-align:left;font-size:.92rem;color:var(--muted)}
.coop-regles li{padding-left:22px;position:relative}
.coop-regles li::before{content:"";position:absolute;left:4px;top:.5em;width:9px;height:9px;border-radius:3px;background:var(--cyan);transform:rotate(45deg)}
.coop-regles b{color:var(--ink)}
.coop-equipe{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:10px 14px;border-radius:16px;background:var(--surface);border:1.5px solid color-mix(in srgb,var(--cyan) 40%,var(--line))}
.ce-vies{display:flex;gap:4px}
.ce-vies i{width:24px;height:24px;display:block}
.ce-vies svg{width:100%;height:100%;fill:var(--rose)}
.ce-vies i.vide svg{fill:var(--line)}
.ce-vies i.perdu{animation:secoue .5s ease}
.ce-vies i.revient{animation:pop .6s var(--ressort)}
.ce-points{font-variant-numeric:tabular-nums;color:var(--muted)}
.ce-points b{font-family:var(--display);font-size:1.4rem;color:var(--cyan);margin-right:2px}
.ce-combo{margin-left:auto;font-weight:800;font-size:.85rem;padding:3px 10px;border-radius:99px;background:var(--bg);color:var(--muted);border:1.5px solid var(--line)}
.ce-combo.actif{background:var(--cyan-bg);color:var(--cyan);border-color:color-mix(in srgb,var(--cyan) 45%,transparent);animation:pop .4s var(--ressort)}
.ce-absent{width:100%;font-size:.82rem;color:var(--orange);font-weight:700}
.coop-attente .avatar{animation:flotte 2.4s ease-in-out infinite}
.coop-resultat.good{border-color:var(--good)}
.coop-resultat.sauve{border-color:var(--cyan)}
.coop-resultat.bad{border-color:var(--bad);animation:secoue .4s ease}
.coop-resultat h2{font-size:1.3rem}
.cr-ok{color:var(--good);font-weight:800}
.cr-ko{color:var(--bad);font-weight:800}
.coop-pourquoi{font-size:.92rem;max-width:42ch}
/* barre du haut en 3 colonnes : numéro | « Coop en ligne » bien au centre | « Léa a répondu ✓ » */
.coop-quiz .top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.coop-quiz .top > :last-child{justify-self:end;text-align:right}
.coop-lui{display:inline-block;font-size:.8rem;font-weight:800;color:var(--cyan);animation:pop .4s var(--ressort)}
#cLigne .btn.c-cyan{--accent:var(--cyan)}
/* onglet « En ligne » (Duel, Coop) : réglages puis amis */
.el-reglages{display:flex;flex-direction:column;gap:14px;padding:12px 0 4px;border-top:1.5px solid var(--line)}
.el-amis{display:flex;flex-direction:column;gap:8px;padding-top:12px;border-top:1.5px solid var(--line)}
.el-titre{margin:0}
.ami.vise{border-color:var(--accent);background:var(--accent-bg);animation:viseAmi 1.4s .3s ease-in-out 2}
@keyframes viseAmi{50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 25%,transparent)}}
/* pastille qui glisse d'un bouton à l'autre (voir pastillesGlissantes dans logique.js) */
.segments{position:relative}
.segments > button{position:relative;z-index:1}
.segments.a-glisse > button.choisi{background:transparent;box-shadow:none}
.seg-glisse{position:absolute;left:0;top:0;z-index:0;border-radius:10px;background:var(--surface);box-shadow:0 2px 8px -2px var(--ombre);pointer-events:none;opacity:0;
  transition:transform .4s cubic-bezier(.22,1,.36,1),width .4s cubic-bezier(.22,1,.36,1),height .3s ease,opacity .2s}
.seg-glisse.sans-anim{transition:none}
.segments > button{transition:color .25s}
@media (prefers-reduced-motion:reduce){.seg-glisse{transition:none}}
/* petits écrans : la liste d'amis reste lisible (titre en entier, boutons sous le texte pour les demandes) */
@media (max-width:420px){
  .ami{gap:8px;padding:8px 6px}
  .ami-lien{gap:10px}
  .ami .avatar{width:38px;height:38px;font-size:1.05rem}
  .btn-defier{width:36px;height:36px;padding:5px}
  .btn-defier .ico{width:23px;height:23px}
  .ami-pct{font-size:.85rem;min-width:0}
  .ami-pct small{font-size:.5rem;letter-spacing:.02em}
  .ami-etat{font-size:.78rem}
  .ami.recu,.ami.envoye{flex-wrap:wrap}
  .ami.recu .ami-actions,.ami.envoye .ami-actions{width:100%;justify-content:flex-end}
}
/* profil d'un ami : même espace entre les blocs que sur Mon profil */
.ami-zone{display:flex;flex-direction:column;gap:20px;min-width:0}
/* 7 choix (ex. temps de Mots codés) : tout sur une ligne, boutons plus serrés */
.seg-auto.serre{flex-wrap:nowrap;gap:2px}
/* bloc étroit (menu en colonne sur ordi) : 7 choix sur deux lignes, 4 + 3 */
.field:has(> .seg-auto.serre){container-type:inline-size}
@container (max-width:265px){.seg-auto.serre{display:grid;grid-template-columns:repeat(4,1fr)}}
.seg-auto.serre button{flex:1 1 0;min-width:0;padding:9px 1px;font-size:.8rem;letter-spacing:-.01em}
/* compte : « Me déconnecter » tout en bas, avec confirmation */
.cpt-bas{flex:none;width:100%;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);display:flex;justify-content:center}
.cpt-deco{color:var(--bad);font-weight:700}
.cpt-confirme{width:100%;padding:12px 14px;border-radius:14px;background:var(--bad-bg);border:1.5px solid color-mix(in srgb,var(--bad) 45%,transparent);animation:entree .3s cubic-bezier(.2,.8,.2,1)}
.cpt-confirme p{margin:0 0 10px;font-size:.92rem;line-height:1.4}
.cpt-confirme .sauv-actions{justify-content:flex-start}
/* icône animée « Increvable » (Survie III) : anneau rouge et or qui tourne, cœur qui bat, pouls qui court sur l'électrocardiogramme */
.avatar.av-recompense.av-increvable{--av-fond:#3a0612;isolation:isolate;background:#3a0612;box-shadow:0 0 0 3px color-mix(in srgb,#ffd34d 35%,transparent),0 0 18px -2px color-mix(in srgb,#ff3d5a 75%,transparent)}
.avatar.av-increvable::before{content:"";position:absolute;inset:-35%;z-index:-2;background:conic-gradient(from 0deg,#ff3d5a,#ffd34d,#ff7a9a,#c2183a,#ffe9a0,#ff3d5a);animation:avTourne 3.8s linear infinite}
.avatar.av-increvable::after{content:"";position:absolute;inset:3px;z-index:-1;border-radius:50%;background:radial-gradient(circle at 50% 35%,#8a1430,#3a0612 72%)}
.avatar.av-increvable .av-svg{color:#ff5a76;overflow:visible;filter:drop-shadow(0 0 4px rgba(255,61,90,.7)) drop-shadow(0 1px 2px rgba(0,0,0,.45))}
.avatar.av-increvable .av-trait{stroke:#3a0612}
.avatar.av-increvable .av-coeur{transform-box:fill-box;transform-origin:50% 60%;animation:avBat 1.3s ease-in-out infinite}
.avatar.av-increvable .av-pouls{fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:.26 2;stroke-dashoffset:.26;filter:drop-shadow(0 0 1.5px #ffd34d);animation:avPouls 1.3s linear infinite}
.avatar.av-increvable .av-etincelle{fill:#ffe9a0;transform-box:fill-box;transform-origin:center;animation:avEtincelle 2.1s var(--d) ease-in-out infinite}
@keyframes avBat{0%,40%,100%{transform:scale(1)}10%{transform:scale(1.13)}20%{transform:scale(.97)}28%{transform:scale(1.08)}}
@keyframes avPouls{0%{stroke-dashoffset:.26}80%,100%{stroke-dashoffset:-1}}
.icone-choix.bloquee .avatar.av-increvable::before,.icone-choix.bloquee .avatar.av-increvable .av-coeur,.icone-choix.bloquee .avatar.av-increvable .av-pouls,.icone-choix.bloquee .avatar.av-increvable .av-etincelle{animation:none}
.icone-choix.bloquee .avatar.av-increvable .av-pouls{opacity:0}
@media (prefers-reduced-motion:reduce){.avatar.av-increvable::before,.avatar.av-increvable .av-coeur,.avatar.av-increvable .av-pouls,.avatar.av-increvable .av-etincelle{animation:none}.avatar.av-increvable .av-pouls{opacity:0}}
/* actualités : visuel « amis » (mini liste d'amis en ligne) */
.vis-amis{height:clamp(214px,58cqw,250px);background:radial-gradient(120% 140% at 85% 0%,#1d5a46,#0d2a26 55%,#071514);display:flex;align-items:center;justify-content:flex-start;padding:16px 16px 50px}
.va-liste{width:min(100%,330px);display:flex;flex-direction:column;gap:6px;transform:rotate(-2deg)}
.va-ami{display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:#fff;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:visEntree .6s calc(.15s + var(--k) * .12s) var(--ressort) backwards}
.va-ami:nth-child(2){margin-left:12px;margin-right:-6px}
.va-av{position:relative;flex:none;display:inline-flex}
.va-av .avatar{width:30px;height:30px;font-size:1rem;animation:none}
.va-ami.on .va-av::after{content:"";position:absolute;right:-2px;bottom:-2px;width:12px;height:12px;border-radius:50%;background:#4bd08f;border:2.5px solid #0d2a26;box-sizing:border-box;animation:vaPoint 1.8s ease-in-out infinite}
@keyframes vaPoint{50%{box-shadow:0 0 0 4px rgba(75,208,143,.25)}}
.va-txt{display:flex;flex-direction:column;line-height:1.15;min-width:0;flex:1}
.va-txt b{font-family:var(--display);font-size:.95rem}
.va-txt small{font-size:.75rem;color:#9fe3c2;font-weight:700}
.va-ami:not(.on) .va-txt small{color:rgba(255,255,255,.55)}
.va-btn{flex:none;padding:4px 10px;border-radius:99px;background:#4bd08f;color:#062018;font-weight:800;font-size:.75rem}
@media (prefers-reduced-motion:reduce){.va-ami,.va-ami.on .va-av::after{animation:none}}
/* Coop : petit texte de la règle d'équipe dans la correction (+2, combo, vie perdue…) */
.regle-equipe{display:block;margin-bottom:4px;font-family:var(--display);font-weight:800}
.feedback.good .regle-equipe{color:var(--good)}.feedback.bad .regle-equipe{color:var(--bad)}
/* icônes animées « Ampoule de génie » (Neurones III), « Sablier d'or » (Temps III), « Flamme éternelle » (Série III) :
   même principe que la Couronne : anneau qui tourne, fond sombre, motif qui bouge, étincelles */
.avatar.av-recompense.av-ampoule,.avatar.av-recompense.av-sablier,.avatar.av-recompense.av-flamme{isolation:isolate;overflow:hidden}
.avatar.av-ampoule::before,.avatar.av-sablier::before,.avatar.av-flamme::before{content:"";position:absolute;inset:-35%;z-index:-2;animation:avTourne 4s linear infinite}
.avatar.av-ampoule::after,.avatar.av-sablier::after,.avatar.av-flamme::after{content:"";position:absolute;inset:3px;z-index:-1;border-radius:50%}
.avatar.av-ampoule .av-svg,.avatar.av-sablier .av-svg,.avatar.av-flamme .av-svg{overflow:visible}
.avatar.av-ampoule .av-etincelle,.avatar.av-sablier .av-etincelle{fill:#fff;transform-box:fill-box;transform-origin:center;animation:avEtincelle 2.1s var(--d) ease-in-out infinite}
/* ampoule : jaune, elle s'allume et lance des rayons */
.avatar.av-recompense.av-ampoule{--av-fond:#2e2100;background:#2e2100;box-shadow:0 0 0 3px color-mix(in srgb,#ffd34d 35%,transparent),0 0 18px -2px color-mix(in srgb,#ffd34d 70%,transparent)}
.avatar.av-ampoule::before{background:conic-gradient(from 0deg,#ffd34d,#fff4c2,#f2a900,#ffe27a,#fff,#d99a00,#ffd34d)}
.avatar.av-ampoule::after{background:radial-gradient(circle at 50% 38%,#6b4d00,#2e2100 72%)}
.avatar.av-ampoule .av-svg{color:#ffe27a;animation:avAllume 2.2s ease-in-out infinite}
.avatar.av-ampoule .av-trait{stroke:#2e2100}
.avatar.av-ampoule .av-rayon{transform-box:fill-box;transform-origin:center;animation:avRayon 2.2s var(--d) ease-out infinite}
@keyframes avAllume{0%,100%{filter:drop-shadow(0 0 1px #ffd34d)}45%,60%{filter:drop-shadow(0 0 5px #ffe27a) drop-shadow(0 0 10px #ffb000)}}
@keyframes avRayon{0%,25%{opacity:0;transform:scale(.4)}45%{opacity:1;transform:scale(1)}80%,100%{opacity:0;transform:scale(1.3)}}
/* sablier : turquoise et or, il se retourne et le sable coule */
.avatar.av-recompense.av-sablier{--av-fond:#062b3a;background:#062b3a;box-shadow:0 0 0 3px color-mix(in srgb,#f2c552 35%,transparent),0 0 18px -2px color-mix(in srgb,#4fd3e6 70%,transparent)}
.avatar.av-sablier::before{background:conic-gradient(from 0deg,#4fd3e6,#f2c552,#0b6e8f,#5fd4f0,#ffe9a0,#4fd3e6)}
.avatar.av-sablier::after{background:radial-gradient(circle at 50% 35%,#0b6e8f,#062b3a 72%)}
.avatar.av-sablier .av-svg{color:#ffe08a;filter:drop-shadow(0 0 3px rgba(255,214,106,.6))}
.avatar.av-sablier .av-trou{fill:#062b3a}
.avatar.av-sablier .av-sab{transform-box:fill-box;transform-origin:center;animation:avRetourne 4.4s cubic-bezier(.6,0,.3,1) infinite}
.avatar.av-sablier .av-grain{fill:#fff3c4;animation:avGrain .8s var(--d) linear infinite,avGrainVisible 4.4s steps(1) infinite}
@keyframes avRetourne{0%,40%{transform:rotate(0)}50%,90%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}
@keyframes avGrain{0%{transform:translateY(0);opacity:1}100%{transform:translateY(4.6px);opacity:.2}}
@keyframes avGrainVisible{0%{visibility:visible}39%{visibility:hidden}52%{visibility:visible}89%{visibility:hidden}100%{visibility:hidden}}
/* flamme : orange et rouge, elle danse et lâche des braises */
.avatar.av-recompense.av-flamme{--av-fond:#3d1200;background:#3d1200;box-shadow:0 0 0 3px color-mix(in srgb,#ffd34d 35%,transparent),0 0 18px -2px color-mix(in srgb,#ff8a2b 75%,transparent)}
.avatar.av-flamme::before{background:conic-gradient(from 0deg,#ff8a2b,#ffd34d,#e5384f,#ffb347,#fff3c4,#c2410c,#ff8a2b)}
.avatar.av-flamme::after{background:radial-gradient(circle at 50% 40%,#8a2a00,#3d1200 72%)}
.avatar.av-flamme .av-svg{color:#ffb347;filter:drop-shadow(0 0 4px rgba(255,138,43,.8))}
.avatar.av-flamme .av-trou{fill:#fff3c4}
.avatar.av-flamme .av-fl{transform-box:fill-box;transform-origin:50% 100%;animation:avDanse 1.6s ease-in-out infinite}
.avatar.av-flamme .av-fl-coeur{transform-box:fill-box;transform-origin:50% 100%;animation:avCoeurFlamme 1.1s ease-in-out infinite}
.avatar.av-flamme .av-braise{fill:#ffd34d;animation:avBraise 2s var(--d) ease-out infinite}
@keyframes avDanse{0%,100%{transform:scale(1,1) skewX(0)}25%{transform:scale(.97,1.05) skewX(-3deg)}50%{transform:scale(1.03,.97) skewX(1deg)}75%{transform:scale(.98,1.04) skewX(3deg)}}
@keyframes avCoeurFlamme{0%,100%{transform:scale(1)}50%{transform:scale(.88,1.1)}}
@keyframes avBraise{0%{opacity:0;transform:translate(0,2px)}20%{opacity:1}100%{opacity:0;transform:translate(var(--x),-5px)}}
.icone-choix.bloquee .avatar.av-ampoule *,.icone-choix.bloquee .avatar.av-sablier *,.icone-choix.bloquee .avatar.av-flamme *,.icone-choix.bloquee .avatar.av-ampoule::before,.icone-choix.bloquee .avatar.av-sablier::before,.icone-choix.bloquee .avatar.av-flamme::before{animation:none!important}
@media (prefers-reduced-motion:reduce){.avatar.av-ampoule *,.avatar.av-sablier *,.avatar.av-flamme *,.avatar.av-ampoule::before,.avatar.av-sablier::before,.avatar.av-flamme::before{animation:none!important}}
/* icône Classement : coupe au-dessus d'un podium */
.ico-classement .i-podium{fill:color-mix(in srgb,var(--accent) 18%,var(--surface));stroke:var(--accent);stroke-width:4;stroke-linejoin:round}
.ico-classement .i-coupe-corps{fill:var(--accent)}
.ico-classement .i-coupe-anse,.ico-classement .i-coupe-pied{fill:none;stroke:var(--accent);stroke-width:4.5;stroke-linecap:round}
.ico-classement .i-podium-n{fill:var(--accent);font-family:var(--display);font-weight:800;font-size:22px;text-anchor:middle}
.ico-classement .i-coupe{transform-box:view-box;transform-origin:48px 44px;transition:transform .5s var(--ressort)}
.entete-icone:hover .ico-classement .i-coupe{transform:translateY(-3px) rotate(-6deg)}
.cl-jeux{margin-bottom:2px}
/* icône animée « Bouclier d'admin » (réservée au compte admin) : or et violet, anneau qui tourne, bouclier qui brille, étoile qui pulse */
.avatar.av-recompense.av-admin{--av-fond:#1b0f33;isolation:isolate;overflow:hidden;background:#1b0f33;box-shadow:0 0 0 3px color-mix(in srgb,#ffd34d 40%,transparent),0 0 20px -2px color-mix(in srgb,#b06bff 75%,transparent)}
.avatar.av-admin::before{content:"";position:absolute;inset:-35%;z-index:-2;background:conic-gradient(from 0deg,#ffd76a,#b06bff,#fff4c2,#7a3dff,#f2b312,#ffd76a);animation:avTourne 3.2s linear infinite}
.avatar.av-admin::after{content:"";position:absolute;inset:3px;z-index:-1;border-radius:50%;background:radial-gradient(circle at 50% 35%,#4a2a8a,#1b0f33 72%)}
.avatar.av-admin .av-svg{color:#ffd76a;overflow:visible;animation:avBrilleCouronne 2.4s ease-in-out infinite}
.avatar.av-admin .av-trou{fill:#2a1650}
.avatar.av-admin .av-etoile-admin{fill:#ffd76a;transform-box:fill-box;transform-origin:center;animation:avEtoileAdmin 2.4s ease-in-out infinite}
.avatar.av-admin .av-etincelle{fill:#fff;transform-box:fill-box;transform-origin:center;animation:avEtincelle 2.1s var(--d) ease-in-out infinite}
@keyframes avEtoileAdmin{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.18) rotate(36deg)}}
.icone-choix.bloquee .avatar.av-admin *,.icone-choix.bloquee .avatar.av-admin::before{animation:none!important}
@media (prefers-reduced-motion:reduce){.avatar.av-admin *,.avatar.av-admin::before{animation:none!important}}
/* écran de bienvenue après la création du compte (reste affiché jusqu'à ce qu'on appuie) */
.cpt-fete{text-align:center;align-items:center}
.cpt-fete-ico{font-size:2.6rem;line-height:1;animation:pop .5s var(--ressort)}
.cpt-ami-ok{margin:0;padding:10px 12px;border-radius:12px;background:var(--good-bg);color:var(--good);font-weight:700;text-align:center}
.cpt-code-bienvenue{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px;border-radius:14px;background:var(--bg);border:1.5px dashed var(--line)}
.cpt-code-bienvenue b{font-family:var(--display);font-size:1.7rem;letter-spacing:.18em;color:var(--accent)}
.cpt-fete-actions{justify-content:center}
/* réglages Duel/Coop : difficultés à cocher */
.puce-niveau{padding:7px 14px}
.puce-niveau.n-facile[aria-pressed="true"]{border-color:var(--good);background:var(--good-bg)}
.puce-niveau.n-facile[aria-pressed="true"]::after{color:var(--good)}
.puce-niveau.n-difficile[aria-pressed="true"]{border-color:var(--bad);background:var(--bad-bg)}
.puce-niveau.n-difficile[aria-pressed="true"]::after{color:var(--bad)}
.reglages-partie{display:flex;flex-direction:column;gap:18px}
/* Actualités : onglets Logimind / Amis, canal admin, fil des amis */
.actu-onglets{margin-bottom:4px}
.actu-onglets .menu-nb{margin-left:6px;font-style:normal}
.actu-admin textarea{width:100%;font:inherit;padding:10px 12px;border-radius:12px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);resize:vertical}
.actu-admin h2{display:flex;align-items:center;gap:8px}
.actu-annonce .actu-ico{--accent:#c98a00;color:#b77d00}
.fil{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.fil-ligne{display:flex;align-items:center;gap:10px;padding:8px 6px;border-radius:12px}
.fil-ligne.neuf{background:var(--accent-bg)}
.fil-ligne.a-jouer{background:color-mix(in srgb,var(--rose) 14%,transparent)}
.fil-lien{display:flex;align-items:center;gap:10px;flex:1;min-width:0;color:inherit;text-decoration:none}
.fil-txt{display:flex;flex-direction:column;flex:1;min-width:0;line-height:1.35}
.fil-txt small{color:var(--muted);font-size:.78rem}
.fil-ligne .avatar{width:36px;height:36px;font-size:1rem}
/* profil d'un ami : vos parties */
.face-a-face{display:flex;align-items:center;justify-content:center;gap:18px;padding:6px 0 10px}
.face-a-face div{display:flex;flex-direction:column;align-items:center}
.face-a-face b{font-family:var(--display);font-size:2rem;line-height:1;color:var(--accent)}
.face-a-face span{font-size:.8rem;color:var(--muted);font-weight:700}
.faf-vs{font-family:var(--display);text-transform:uppercase;letter-spacing:.06em}
.hist-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.hist{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:10px;background:var(--bg)}
.hist-mode{flex:none;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:2px 8px;border-radius:99px;background:var(--surface);color:var(--muted)}
.hist-txt{flex:1;font-weight:700}
.hist small{color:var(--muted)}
.hist.gagne .hist-txt{color:var(--good)}.hist.perdu .hist-txt{color:var(--bad)}
.el-aide{margin-top:8px;font-size:.85rem}
/* ---------- Balances ---------- */
.ico-balances .i-bal-pied,.ico-balances .i-bal-axe{fill:var(--accent)}
.ico-balances .i-bal-mat,.ico-balances .i-bal-barre{fill:none;stroke:var(--accent);stroke-width:6;stroke-linecap:round}
.ico-balances .i-bal-fil{fill:none;stroke:var(--accent);stroke-width:2.6;stroke-linecap:round}
.ico-balances .i-bal-pan{fill:color-mix(in srgb,var(--accent) 22%,var(--surface));stroke:var(--accent);stroke-width:3.5;stroke-linejoin:round}
.ico-balances .i-bal-tri,.ico-balances .i-bal-car{fill:var(--accent)}
.ico-balances .i-bal-fleau{transform-box:view-box;transform-origin:48px 26px}
.ico-balances .i-bal-g{transform-box:view-box;transform-origin:14px 26px}.ico-balances .i-bal-d{transform-box:view-box;transform-origin:82px 26px}
@keyframes balPenche{0%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}55%{transform:rotate(5deg)}75%{transform:rotate(-2deg)}}
@keyframes balPlateau{0%,100%{transform:rotate(0)}30%{transform:rotate(9deg)}55%{transform:rotate(-5deg)}75%{transform:rotate(2deg)}}
.carte:hover .ico-balances .i-bal-fleau,.entete-icone:hover .ico-balances .i-bal-fleau{animation:balPenche 2s ease-in-out infinite}
.carte:hover .ico-balances .i-bal-g,.carte:hover .ico-balances .i-bal-d,.entete-icone:hover .ico-balances .i-bal-g,.entete-icone:hover .ico-balances .i-bal-d{animation:balPlateau 2s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.ico-balances *{animation:none!important}}
/* les balances de la question */
.bal-liste{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 10px;width:min(100%,440px);margin:0 auto}
.bal-liste > .bal-svg{width:calc(50% - 5px)}
.bal-liste.une{grid-template-columns:minmax(0,220px);justify-content:center}
.bal-liste:has(> :only-child){grid-template-columns:minmax(0,220px);justify-content:center}
.bal-svg{width:100%;height:auto;display:block;border-radius:14px;background:var(--bg);border:1.5px solid var(--line);animation:entree .4s cubic-bezier(.2,.8,.2,1) backwards}
.bal-svg:nth-child(2){animation-delay:.06s}.bal-svg:nth-child(3){animation-delay:.12s}
.bal-svg.bal-question{border-color:var(--accent);border-style:dashed}
.bal-fleau,.bal-mat{fill:none;stroke:var(--muted);stroke-width:4;stroke-linecap:round}
.bal-pied,.bal-axe{fill:var(--muted)}
.bal-fil{fill:none;stroke:var(--muted);stroke-width:1.4;opacity:.75}
.bal-pan{fill:color-mix(in srgb,var(--muted) 30%,var(--surface));stroke:var(--muted);stroke-width:1.5;stroke-linejoin:round}
.bal-q{font-family:var(--display);font-weight:800;font-size:28px;text-anchor:middle;fill:var(--accent)}
.bf{stroke:rgba(0,0,0,.28);stroke-width:1}
.bf-cercle{fill:#e85d8a}.bf-carre{fill:#4d8bff}.bf-triangle{fill:#2fb37a}.bf-losange{fill:#f2a922}.bf-hexagone{fill:#9a62f0}
.bal-demande{display:flex;align-items:center;justify-content:center;gap:6px;margin:12px 0 6px;font-weight:700;font-size:1.02rem;flex-wrap:wrap}
.bal-unite{width:26px;height:26px}
.bal-jeu{display:flex;flex-direction:column;align-items:stretch;gap:4px;width:100%;font-size:1rem;line-height:1.3}
.bal-jeu .bal-liste.une > .bal-svg{width:min(62%,210px)}
.vos-parties .vp-corps{padding:0 16px 16px;display:flex;flex-direction:column;gap:10px}
.vos-parties .mj-resume{font-weight:800;color:var(--accent)}
.vp-note{font-size:.78rem;margin:0}
.fil-boutons{display:flex;gap:6px;flex:none}
.actu-admin h2 .titre-admin{align-self:center;font-family:var(--body,inherit)}
.fil-ligne.a-jouer{flex-wrap:wrap}
.fil-ligne.a-jouer .fil-txt{flex:1 1 calc(100% - 50px)}
.fil-ligne.a-jouer .fil-boutons{width:100%;justify-content:flex-end}

/* ---------- favoris : étoile en haut à droite des mini-jeux ---------- */
.carte .fav{position:absolute;top:10px;right:10px;z-index:2;display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:12px;cursor:pointer;
  background:color-mix(in srgb, var(--surface) 72%, transparent);color:var(--muted);transition:color .2s, background-color .2s, transform .25s var(--ressort)}
.carte .fav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;transition:fill .2s}
.carte .fav:hover{color:var(--ink);transform:scale(1.08)}
.carte .fav:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.carte .fav.oui{color:#e8a317}
.carte .fav.oui svg{fill:currentColor}
.carte .fav.pop svg{animation:fav-pop .45s var(--ressort)}
.carte.pose{animation:none}
@keyframes fav-pop{0%{transform:scale(1)}35%{transform:scale(1.45) rotate(-12deg)}100%{transform:scale(1)}}
@media (max-width:700px){.hub .carte .fav{top:6px;right:6px;width:30px;height:30px;border-radius:10px}.hub .carte .fav svg{width:17px;height:17px}}
@media (prefers-reduced-motion:reduce){.carte .fav.pop svg{animation:none}}
.vis-favoris{height:clamp(200px,54cqw,236px);background:radial-gradient(120% 140% at 85% 0%,#5a4214,#2a1d08 55%,#140d04);display:flex;align-items:center;padding:16px 16px 50px}
.vf-liste{width:min(100%,320px);display:flex;flex-direction:column;gap:7px;transform:rotate(-2deg)}
.vf-jeu{display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:#fff;animation:visEntree .6s calc(.15s + var(--k) * .12s) var(--ressort) backwards}
.vf-jeu:nth-child(2){margin-left:12px;margin-right:-6px}
.vf-jeu.oui{background:rgba(255,196,60,.16);border-color:rgba(255,196,60,.5)}
.vf-ico{flex:none;width:32px;height:32px}
.vf-ico svg{width:100%;height:100%}
.vf-jeu b{flex:1;min-width:0;font-family:var(--display);font-size:.95rem}
.vf-et{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:rgba(0,0,0,.25);color:rgba(255,255,255,.5)}
.vf-et svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.vf-jeu.oui .vf-et{color:#ffc43c}
.vf-jeu.oui .vf-et svg{fill:currentColor;animation:fav-pop .5s .9s var(--ressort) backwards}
@media (prefers-reduced-motion:reduce){.vf-jeu,.vf-jeu.oui .vf-et svg{animation:none}}

/* ---------- Mots codés : avertissement « il faut un bon niveau à Alphabet en chiffres » ---------- */
.avis-niveau{display:flex;gap:14px;align-items:flex-start;margin:0 0 18px;padding:16px 18px;border-radius:18px;border:1.5px solid color-mix(in srgb, var(--orange) 45%, var(--line));
  background:color-mix(in srgb, var(--orange-bg) 70%, var(--surface));animation:entree .6s cubic-bezier(.2,.8,.2,1) backwards}
.an-ico{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:color-mix(in srgb, var(--orange) 16%, transparent);color:var(--orange)}
.an-ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.an-txt{min-width:0;flex:1}
.an-txt > b{font-family:var(--display);font-size:1.05rem;color:var(--orange)}
.an-txt p{margin:4px 0 10px;color:var(--ink);font-size:.93rem;line-height:1.45}
.an-bas{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.an-rang{display:inline-flex;align-items:center;gap:8px;font-size:.88rem;color:var(--muted)}
.an-rang b{color:var(--ink)}
@media (max-width:480px){.avis-niveau{padding:14px;gap:10px}.an-ico{width:34px;height:34px}.an-bas .btn{width:100%}}

/* ---------- jeux de chiffres : petit message « bases en maths » (une fois) ---------- */
.avis-maths{display:flex;align-items:center;gap:12px;margin:0 0 16px;padding:12px 12px 12px 14px;border-radius:16px;border:1.5px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  background:color-mix(in srgb, var(--accent-bg) 75%, var(--surface));animation:entree .6s cubic-bezier(.2,.8,.2,1) backwards;transition:opacity .25s, transform .25s}
.avis-maths.part{opacity:0;transform:translateY(-6px)}
.am-ico{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:color-mix(in srgb, var(--accent) 15%, transparent);color:var(--accent)}
.am-ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.avis-maths p{margin:0;flex:1;min-width:0;font-size:.92rem;line-height:1.4;color:var(--ink)}
.avis-maths p b{color:var(--accent)}
.am-ok{flex:none;padding:7px 12px;border-radius:99px;border:1.5px solid color-mix(in srgb, var(--accent) 40%, var(--line));background:var(--surface);color:var(--accent);font:inherit;font-weight:800;font-size:.82rem;cursor:pointer}
.am-ok:hover{background:var(--accent);color:var(--surface)}
@media (max-width:480px){.avis-maths{flex-wrap:wrap}.avis-maths p{flex-basis:calc(100% - 50px)}.am-ok{margin-left:48px}}

/* ami en plein défi : le bouton explique qu'on ne peut pas l'inviter maintenant */
.ami-en-defi{opacity:.75;border-style:dashed}
.ami-etat.en-defi{color:var(--orange)}

/* ---------- invitation envoyée : carte qui flotte en haut, trait qui diminue (1 min) ---------- */
.attente-invit{position:fixed;left:50%;top:calc(12px + env(safe-area-inset-top,0px));z-index:125;width:min(440px,calc(100vw - 32px));overflow:hidden;
  border-radius:18px;border:1.5px solid color-mix(in srgb, var(--accent, var(--violet)) 45%, var(--line));background:color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 18px 40px -14px var(--ombre);
  transform:translate(-50%,calc(-100% - 30px));transition:transform .45s cubic-bezier(.22,1,.36,1)}
.attente-invit.ouvert{transform:translate(-50%,0);animation:ai-vole 3.2s ease-in-out .5s infinite}
@keyframes ai-vole{50%{transform:translate(-50%,3px)}}
.attente-invit.secoue{animation:ai-secoue .4s}
@keyframes ai-secoue{20%{transform:translate(calc(-50% - 7px),0)}40%{transform:translate(calc(-50% + 6px),0)}60%{transform:translate(calc(-50% - 4px),0)}80%{transform:translate(calc(-50% + 2px),0)}100%{transform:translate(-50%,0)}}
.ai-haut{display:flex;align-items:center;gap:12px;padding:12px 12px 14px 16px}
.ai-points{flex:none;display:flex;gap:4px}
.ai-points i{width:7px;height:7px;border-radius:50%;background:var(--violet);animation:ai-point 1.2s ease-in-out infinite}
.ai-points i:nth-child(2){animation-delay:.15s}.ai-points i:nth-child(3){animation-delay:.3s}
@keyframes ai-point{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.ai-txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.ai-txt b{font-family:var(--display);font-size:1rem;color:var(--ink)}
.ai-txt small{font-size:.78rem;color:var(--muted)}
.ai-annuler{flex:none;padding:7px 12px;border-radius:99px;border:1.5px solid var(--line);background:transparent;color:var(--ink);font:inherit;font-weight:800;font-size:.8rem;cursor:pointer}
.ai-annuler:hover{border-color:var(--rose);color:var(--rose)}
.ai-trait{position:absolute;left:0;right:0;bottom:0;height:4px;background:linear-gradient(90deg,var(--violet),var(--rose));transform-origin:left;
  transform:scaleX(var(--depart,1));animation:ai-trait var(--reste,60s) linear forwards}
@keyframes ai-trait{to{transform:scaleX(0)}}
/* les mini-jeux et les modes sont grisés pendant l'attente */
.en-attente .cartes .carte,.en-attente #menu .btn,.en-attente .bande-rang .btn,.en-attente [data-inviter],.en-attente [data-differe]{filter:grayscale(.85);opacity:.45;cursor:not-allowed}
.en-attente .cartes .carte:hover{--ty:0px;box-shadow:none;border-color:var(--line)}
@media (prefers-reduced-motion:reduce){.attente-invit.ouvert,.ai-points i{animation:none}.ai-trait{animation-duration:var(--reste,60s)}}

/* badges de série : dans le calendrier de la série */
.cal-badges{margin-top:16px;padding-top:14px;border-top:1.5px solid var(--line)}
.cal-badges .badges-tete{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:8px}
.cal-badges .label-txt{margin:0}
.badges-serie.cal{grid-template-columns:repeat(4,1fr);gap:7px}
.badges-serie.cal .bs{padding:8px 2px 6px}

/* ---------- Actualités › Amis (2.6) : cartes de différé + fil par jour ---------- */
.amis-tete{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.dif-liste{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px}
.dif-carte{padding:14px;border-radius:18px;border:1.5px solid var(--line);background:color-mix(in srgb, var(--ink) 4%, var(--surface))}
.dif-carte.recu{border-color:color-mix(in srgb, var(--rose) 45%, var(--line));
  background:linear-gradient(135deg, color-mix(in srgb, var(--rose) 16%, var(--surface)), color-mix(in srgb, var(--violet) 12%, var(--surface)))}
.dif-haut{display:flex;align-items:center;gap:12px}
.dif-carte .avatar{width:46px;height:46px;font-size:1.2rem}
.dif-txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.dif-txt b{font-family:var(--display);font-size:1.05rem}
.dif-txt small{color:var(--muted);font-size:.82rem}
.dif-temps{flex:none;align-self:flex-start;display:inline-flex;align-items:center;gap:4px;padding:4px 9px;border-radius:99px;font-size:.75rem;font-weight:800;color:var(--muted);background:color-mix(in srgb, var(--ink) 7%, transparent);white-space:nowrap}
.dif-temps svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.dif-carte.recu .dif-temps{color:var(--rose)}
.dif-bas{display:flex;gap:8px;margin-top:12px}
.dif-bas .btn{flex:1;justify-content:center;text-align:center}
.dif-carte.attente .dif-bas{justify-content:flex-end}.dif-carte.attente .dif-bas .btn{flex:none}
.fil-jour{margin:16px 0 4px;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.amis-titre + .fil-jour{margin-top:8px}
.fil-ligne{padding:0;border-radius:14px;position:relative}
.fil-lien{padding:9px 8px;border-radius:14px;gap:12px;transition:background-color .2s}
.fil-lien:hover{background:color-mix(in srgb, var(--ink) 5%, transparent)}
.fil-ligne.neuf .fil-lien{background:var(--accent-bg)}
.fil-ligne.neuf .fil-txt > span::after{content:"";display:inline-block;width:7px;height:7px;margin-left:6px;border-radius:50%;background:var(--rose);vertical-align:middle}
.fil-av{position:relative;flex:none;display:inline-flex}
.fil-ligne .avatar{width:40px;height:40px}
.fil-ico{position:absolute;right:-6px;bottom:-6px;display:grid;place-items:center;width:23px;height:23px;border-radius:8px;background:var(--accent-bg);box-shadow:0 0 0 2.5px var(--surface)}
.fil-ico svg{width:19px;height:19px}
.fil-ico .icone,.fil-ico svg{animation:none}
.fil-txt > span{font-size:.95rem}
.fil-droite{flex:none;display:flex;align-items:center;justify-content:center;min-width:40px}
.fil-droite .badge{width:34px;height:34px}
.fil-nb{display:flex;flex-direction:column;align-items:center;line-height:1;font-family:var(--display);font-weight:800;font-size:1.15rem;color:var(--ink);font-variant-numeric:tabular-nums}
.fil-nb small{margin-top:2px;font-family:var(--body, inherit);font-size:.62rem;font-weight:700;color:var(--muted)}
.fil-score{padding:5px 10px;border-radius:99px;font-family:var(--display);font-weight:800;font-size:.95rem;font-variant-numeric:tabular-nums;background:color-mix(in srgb, var(--ink) 8%, transparent)}
.fil-score.gagne{background:color-mix(in srgb, var(--vert) 18%, transparent);color:var(--vert)}
.fil-score.perdu{background:color-mix(in srgb, var(--rose) 16%, transparent);color:var(--rose)}

/* gâteau d'un an (365 jours joués) : animé, la bougie vacille, le gâteau sautille, des confettis tombent */
.avatar.av-recompense.av-gateau{isolation:isolate;overflow:hidden}
.avatar.av-gateau::before{content:"";position:absolute;inset:-35%;z-index:-2;background:conic-gradient(from 0deg,#ff8fc7,#ffd34d,#7ee0ff,#ff5fa2,#fff0c2,#c2185b,#ff8fc7);animation:avTourne 4s linear infinite}
.avatar.av-gateau::after{content:"";position:absolute;inset:3px;z-index:-1;border-radius:50%;background:radial-gradient(circle at 50% 30%,#d6337a,#5a0e33 75%)}
.avatar.av-gateau .av-svg{overflow:visible;filter:drop-shadow(0 0 3px rgba(255,214,230,.6))}
.avatar.av-gateau .av-trou{fill:#d6337a}
.avatar.av-gateau .av-gat{transform-box:fill-box;transform-origin:50% 100%;animation:avSautille 2.4s ease-in-out infinite}
.avatar.av-gateau .av-gat-fl{fill:#ffd34d;transform-box:fill-box;transform-origin:50% 100%;animation:avVacille .9s ease-in-out infinite}
.avatar.av-gateau .av-confetti{transform-box:fill-box;transform-origin:center;animation:avConfetti 3s var(--d) linear infinite;opacity:0}
@keyframes avSautille{0%,70%,100%{transform:translateY(0) scale(1)}78%{transform:translateY(0) scale(1.05,.94)}86%{transform:translateY(-1.6px) scale(.97,1.04)}93%{transform:translateY(0) scale(1)}}
@keyframes avVacille{0%,100%{transform:scale(1) rotate(0)}30%{transform:scale(.9,1.12) rotate(-6deg)}65%{transform:scale(1.05,.92) rotate(5deg)}}
@keyframes avConfetti{0%{opacity:0;transform:translate(0,0) rotate(0)}12%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translate(var(--x),20px) rotate(260deg)}}
.icone-choix.bloquee .avatar.av-gateau *,.icone-choix.bloquee .avatar.av-gateau::before{animation:none!important}
.icone-choix.bloquee .avatar.av-gateau .av-confetti{opacity:0}
@media (prefers-reduced-motion:reduce){.avatar.av-gateau *,.avatar.av-gateau::before{animation:none!important}.avatar.av-gateau .av-confetti{opacity:0}}

/* montre à gousset (Patience II) : or sur bleu nuit, contour qui tourne (comme la couronne) et grande aiguille par crans */
.avatar.av-recompense.av-montre{--av-fond:#0d1f4a;isolation:isolate;overflow:hidden;background:#0d1f4a;box-shadow:0 0 0 3px color-mix(in srgb,#f2c552 35%,transparent),0 0 18px -2px color-mix(in srgb,#5b8cff 60%,transparent)}
.avatar.av-montre::before{content:"";position:absolute;inset:-35%;z-index:-2;background:conic-gradient(from 0deg,#f2c552,#5b8cff,#ffe3a1,#2a4fb0,#f2c552);animation:avTourne 4s linear infinite}
.avatar.av-montre::after{content:"";position:absolute;inset:3px;z-index:-1;border-radius:50%;background:radial-gradient(circle at 50% 35%,#2a4fb0,#0b1a44 72%)}
.avatar.av-recompense.av-montre .av-svg{overflow:visible;color:#ffd77a;filter:drop-shadow(0 0 3px rgba(255,215,122,.5))}
.avatar.av-recompense.av-montre .av-trou{fill:#13286b}
.avatar.av-montre .av-mt{transform-box:view-box;transform-origin:12px 2.9px;scale:1.02}
.avatar.av-montre .av-mt-min{transform-box:view-box;transform-origin:12px 14.8px;animation:avTour 4s steps(24) infinite}
.avatar.av-montre .av-mt-h{transform-box:view-box;transform-origin:12px 14.8px;transform:rotate(120deg)}
.avatar.av-montre .av-etincelle{fill:#fff;transform-box:fill-box;transform-origin:center;animation:avEtincelle 2.1s var(--d) ease-in-out infinite}
@keyframes avBalance{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}
@keyframes avTour{to{transform:rotate(360deg)}}
@keyframes avTourH{from{transform:rotate(120deg)}to{transform:rotate(480deg)}}
.icone-choix.bloquee .avatar.av-montre *,.icone-choix.bloquee .avatar.av-montre::before{animation:none!important}
@media (prefers-reduced-motion:reduce){.avatar.av-montre *,.avatar.av-montre::before{animation:none!important}}

/* ---------- page Amis (2.6) : demandes en tête, amis par en ligne / hors ligne, code et ajout réunis ---------- */
.amis-zone .amis-tete{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.amis-zone .amis-tete .amis-titre{margin:0}
.amis-enligne{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:800;color:var(--muted)}
.amis-enligne i{width:8px;height:8px;border-radius:50%;background:var(--muted);opacity:.5}
.amis-enligne.on{color:var(--vert)}.amis-enligne.on i{background:#4bd08f;opacity:1;box-shadow:0 0 0 3px color-mix(in srgb,#4bd08f 25%,transparent)}
.amis-groupe{margin:12px 0 4px;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.amis-zone .ami-carte .ami-lien{display:flex;align-items:center;gap:12px;flex:1;padding:8px;border-radius:14px;transition:background-color .2s}
.amis-zone .ami-carte .ami-lien:hover{background:color-mix(in srgb,var(--ink) 5%,transparent)}
.amis-zone .ami-carte{padding:0}
.ami-fleche{flex:none;color:var(--muted);font-size:1.4rem;line-height:1;margin-left:-2px}
.ami-anneau{position:relative;flex:none;width:44px;height:44px;display:grid;place-items:center;margin-left:auto}
.ami-anneau svg{position:absolute;inset:0;transform:rotate(-90deg)}
.ami-anneau circle{fill:none;stroke-width:3.4}
.ami-anneau .aa-fond{stroke:color-mix(in srgb,var(--ink) 10%,transparent)}
.ami-anneau .aa-plein{stroke:var(--violet);stroke-linecap:round}
.ami-anneau b{font-family:var(--display);font-size:.82rem;line-height:1;font-variant-numeric:tabular-nums}
.ami-anneau b small{font-size:.6rem;color:var(--muted)}
.amis-demandes{border-color:color-mix(in srgb,var(--rose) 45%,var(--line));background:linear-gradient(135deg,color-mix(in srgb,var(--rose) 12%,var(--surface)),var(--surface))}
.demandes-liste{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:6px}
.demande{display:flex;align-items:center;gap:12px;padding:6px 4px}
.demande .ami-txt{flex:1;min-width:0}
.demande-boutons{display:flex;gap:6px;flex:none}
.btn.rond{width:36px;padding-inline:0;justify-content:center;font-size:1.1rem}
.amis-ajout{display:grid;gap:4px}
.aj-code .label-txt{display:block;margin-bottom:6px}
.aj-ou{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.78rem;font-weight:700;margin:6px 0}
.aj-ou::before,.aj-ou::after{content:"";flex:1;height:1.5px;background:var(--line)}
.amis-ajout .ajout-ami .field{margin:0}
.aj-envoyes{margin-top:10px;padding-top:12px;border-top:1.5px dashed var(--line)}
.aj-envoyes .label-txt{display:block;margin-bottom:8px}
.aj-puces{display:flex;flex-wrap:wrap;gap:6px}
.aj-puce{display:inline-flex;align-items:center;gap:6px;padding:5px 6px 5px 12px;border-radius:99px;border:1.5px solid var(--line);font-weight:700;font-size:.88rem}
.aj-puce button{width:22px;height:22px;border-radius:50%;border:0;background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--ink);font:inherit;font-weight:800;line-height:1;cursor:pointer}
.aj-puce button:hover{background:var(--rose);color:#fff}
@media (max-width:480px){.demande .btn.petit:not(.rond){padding-inline:12px}}

/* roue des conseils : de la place sous les tuiles pour que l'ombre de la tuile choisie ne soit pas coupée net */
.cs-roue + .cs-nom{margin-top:-20px}

/* profil : avec un compte, le pseudo n'est plus modifiable (pas de crayon) */
.pseudo-ligne.bloque{cursor:default}
.pseudo-ligne.bloque .pseudo-crayon{display:none}
.pseudo-ligne.bloque input{pointer-events:none}

/* ---------- Balances (2.7) : formes plus grandes et en relief, plateaux en coupelle, balance qui se stabilise ---------- */
.bal-svg{background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--accent) 7%,var(--bg)),var(--bg) 70%)}
.bal-fleau{stroke-width:5;stroke:color-mix(in srgb,var(--muted) 85%,var(--ink))}
.bal-mat{stroke-width:4.5}
.bal-axe{fill:color-mix(in srgb,var(--muted) 85%,var(--ink))}
.bal-axe-c{fill:var(--bg)}
.bal-fil{stroke-width:1.3;opacity:.6}
.bal-pan{fill:color-mix(in srgb,var(--muted) 26%,var(--surface));stroke:color-mix(in srgb,var(--muted) 80%,var(--ink));stroke-width:1.6}
.bf{stroke:rgba(255,255,255,.55);stroke-width:1.3;paint-order:stroke;filter:drop-shadow(0 1.6px 0 rgba(0,0,0,.28))}
:root[data-theme="dark"] .bf{stroke:rgba(255,255,255,.3)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .bf{stroke:rgba(255,255,255,.3)}}
.bal-q-rond{fill:color-mix(in srgb,var(--accent) 14%,transparent);stroke:var(--accent);stroke-width:1.6;stroke-dasharray:3.5 3}
.bal-q{font-size:21px}
.bal-oscille{animation:balOscille 1.3s cubic-bezier(.3,.6,.4,1) .15s backwards}
.bal-svg:nth-child(2) .bal-oscille{animation-delay:.25s}.bal-svg:nth-child(3) .bal-oscille{animation-delay:.35s}
@keyframes balOscille{0%{transform:rotate(-5deg)}30%{transform:rotate(3.2deg)}55%{transform:rotate(-1.6deg)}75%{transform:rotate(.7deg)}100%{transform:rotate(0)}}
.bal-question .bal-q-rond{animation:balQ 1.8s ease-in-out infinite}
@keyframes balQ{50%{stroke-dashoffset:6.5}}
@media (prefers-reduced-motion:reduce){.bal-oscille,.bal-question .bal-q-rond{animation:none}}

/* étoiles de général (Rangs III) : animée, contour qui tourne, grande étoile qui brille, petites qui scintillent */
.avatar.av-recompense.av-general{isolation:isolate;overflow:hidden;box-shadow:0 0 0 3px color-mix(in srgb,#f2c552 35%,transparent),0 0 18px -2px color-mix(in srgb,#5b7bd5 70%,transparent)}
.avatar.av-general::before{content:"";position:absolute;inset:-35%;z-index:-2;background:conic-gradient(from 0deg,#f2c552,#5b7bd5,#ffe9a0,#1f3b8a,#ffd76a,#f2c552);animation:avTourne 4s linear infinite}
.avatar.av-general::after{content:"";position:absolute;inset:3px;z-index:-1;border-radius:50%;background:radial-gradient(circle at 50% 30%,#3a5cc0,#0d1733 75%)}
.avatar.av-recompense.av-general .av-svg{overflow:visible;filter:drop-shadow(0 0 3px rgba(255,215,106,.5))}
.avatar.av-general .av-gen-grande{transform-box:fill-box;transform-origin:center;animation:avGenBrille 3s ease-in-out infinite}
.avatar.av-general .av-gen-p{transform-box:fill-box;transform-origin:center;animation:avGenScintille 2s var(--d) ease-in-out infinite}
.avatar.av-general .av-etincelle{fill:#fff;transform-box:fill-box;transform-origin:center;animation:avEtincelle 2.1s var(--d) ease-in-out infinite}
@keyframes avGenBrille{0%,100%{transform:rotate(0) scale(1);filter:none}45%{transform:rotate(-8deg) scale(1.08);filter:drop-shadow(0 0 4px #ffe9a0)}60%{transform:rotate(4deg) scale(1.04)}}
@keyframes avGenScintille{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.72) rotate(30deg);opacity:.65}}
.icone-choix.bloquee .avatar.av-general *,.icone-choix.bloquee .avatar.av-general::before{animation:none!important}
@media (prefers-reduced-motion:reduce){.avatar.av-general *,.avatar.av-general::before{animation:none!important}}
/* Balances : un petit trait sépare les balances données de la question */
.bal-jeu .bal-demande{position:relative;margin-top:16px;padding-top:14px}
.bal-jeu .bal-demande::before{content:"";position:absolute;top:0;left:50%;width:min(70%,260px);height:1.5px;transform:translateX(-50%);border-radius:2px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--muted) 55%,transparent) 20%,color-mix(in srgb,var(--muted) 55%,transparent) 80%,transparent)}

/* record ultime sous un jeu Légende (profil, profil d'un ami) */
.lj-ultime{display:flex;align-items:center;gap:5px;margin-top:3px;font-size:.78rem;font-weight:700;color:color-mix(in srgb,#b88600 80%,var(--ink))}
.lj-ultime svg{flex:none;width:13px;height:13px;position:relative;top:-1.5px;fill:#f2c552;filter:drop-shadow(0 0 2px color-mix(in srgb,#f2c552 60%,transparent))}
.lj-ultime .lj-u-txt{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lj-ultime .lj-u-val{font-weight:800;font-variant-numeric:tabular-nums}
.lj-ultime.vide{color:var(--muted);font-weight:600}.lj-ultime.vide svg{fill:var(--muted);filter:none;opacity:.6}
:root[data-theme="dark"] .lj-ultime:not(.vide){color:#ffd76a}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .lj-ultime:not(.vide){color:#ffd76a}}

/* Flèches : mode difficile (1 cœur, chrono qui descend) */
.fl-difficile{border-color:color-mix(in srgb,var(--rouge, #e5384f) 40%,var(--line))}
.fl-difficile h2 .beta{vertical-align:middle}
.fl-dif-record{margin:4px 0 12px}
.fl-mode-difficile .fl-top{color:var(--rouge, #e5384f)}
#flTemps.urgent{display:inline-block;color:var(--rouge, #e5384f);animation:flUrgent .5s ease-in-out infinite alternate}
@keyframes flUrgent{to{transform:scale(1.12)}}
@media (prefers-reduced-motion:reduce){#flTemps.urgent{animation:none}}
.beta.mini{font-size:.55rem;padding:1px 5px;vertical-align:middle;margin-left:2px}

/* ---------- Flèches (2.7) : mécaniques ---------- */
.fl-fleche.fl-jaune{color:#e8a400}
:root[data-theme="dark"] .fl-fleche.fl-jaune{color:#ffc93c}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .fl-fleche.fl-jaune{color:#ffc93c}}
.fl-fleche.fl-jaune .fl-corps{filter:drop-shadow(0 0 3px color-mix(in srgb,#ffc93c 55%,transparent))}
.fl-fleche.fl-cachee{opacity:0}
.fl-fleche{transition:color .15s,opacity .35s}
.fl-badge{transition:opacity .3s,transform .3s}
.fl-badge circle:first-child{stroke:var(--surface);stroke-width:2}
.fl-fleche.sort .fl-badge,.fl-badge.ouvert{opacity:0}
.fl-nuage rect{fill:color-mix(in srgb,var(--muted) 55%,var(--surface));stroke:color-mix(in srgb,var(--muted) 30%,transparent);stroke-width:1}
.fl-nuage text{fill:var(--surface);font-family:var(--display);font-weight:800;text-anchor:middle;pointer-events:none}
.fl-nuage{transition:opacity .45s,transform .45s;transform-box:fill-box;transform-origin:center;animation:flNuage 3.6s ease-in-out infinite}
.fl-nuage.part{opacity:0;transform:scale(1.25)}
@keyframes flNuage{50%{opacity:.86}}
.fl-fleche.refus{color:#e5384f;animation:flRefus .45s}
@keyframes flRefus{20%,60%{transform:translateX(-3px)}40%,80%{transform:translateX(3px)}}
.fl-reste.alerte{color:#e5384f;font-weight:800}
.fl-dif-rejouer{margin-top:14px;padding-top:12px;border-top:1.5px dashed var(--line)}
.fl-dif-rejouer .btn{margin-top:6px}
/* fenêtre « Nouvelle mécanique » */
.fl-intro-fond{position:fixed;inset:0;z-index:130;display:grid;place-items:center;padding:16px;background:rgba(6,8,20,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;transition:opacity .25s}
.fl-intro-fond.ouvert{opacity:1}
.fl-intro{width:min(420px,100%);max-height:calc(100dvh - 32px);overflow:auto;padding:20px;border-radius:22px;background:var(--surface);border:1.5px solid color-mix(in srgb,#ffc93c 45%,var(--line));box-shadow:0 24px 60px -16px rgba(0,0,0,.5);transform:translateY(14px) scale(.97);transition:transform .3s var(--ressort)}
.fl-intro-fond.ouvert .fl-intro{transform:none}
.fl-intro .eyebrow{color:#c98a00}
.fl-intro-m{display:flex;gap:14px;align-items:center;margin:12px 0}
.fl-intro-m svg{flex:none;width:72px;height:45px;color:var(--ink);background:color-mix(in srgb,var(--ink) 5%,transparent);border-radius:12px;padding:4px}
.fl-intro-m h3{margin:0 0 4px;font-family:var(--display);font-size:1.15rem}
.fl-intro-m p{margin:0;font-size:.93rem;line-height:1.45}
.fl-intro .btn{width:100%;margin-top:6px}
/* profil : niveau en difficile sous Flèches */
.lj-dif{display:flex;align-items:center;gap:5px;margin-top:3px;font-size:.78rem;font-weight:700;color:var(--rouge,#e5384f)}
.lj-dif i{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.cs-mecas{margin-top:14px;padding-top:12px;border-top:1.5px solid var(--line)}
.cs-mecas h3{margin:0 0 4px;font-family:var(--display);font-size:1.05rem}
.cs-mecas .fl-intro-m h4{margin:0 0 3px;font-family:var(--display);font-size:1rem}
.cs-mecas .fl-intro-m p{margin:0;font-size:.9rem;line-height:1.45;color:var(--muted)}
.cs-mecas .fl-intro-m svg{flex:none;width:64px;height:40px;color:var(--ink);background:color-mix(in srgb,var(--ink) 5%,transparent);border-radius:12px;padding:4px}
.cs-mecas-reste{font-style:italic}
.fl-test{grid-column:1 / -1;padding:16px 18px;border-radius:20px;border:1.5px dashed color-mix(in srgb,#ffc93c 50%,var(--line));background:var(--surface)}
.fl-test h3{margin:0 0 4px;font-family:var(--display)}
.fl-test-btns{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:10px 0}
@media (max-width:600px){.fl-test-btns{grid-template-columns:1fr 1fr}}
.fl-test-dif{display:flex;align-items:center;gap:8px;font-size:.9rem;color:var(--muted)}

/* Flèches : miroirs et portails */
:root{--fl-miroir:#64748b}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--fl-miroir:#cbd5e1}}
:root[data-theme="dark"]{--fl-miroir:#cbd5e1}
.fl-miroir rect{fill:color-mix(in srgb,var(--fl-miroir) 16%,transparent);stroke:color-mix(in srgb,var(--fl-miroir) 45%,transparent);stroke-width:1.2}
.fl-miroir path{stroke:var(--fl-miroir);stroke-width:calc(var(--ep,4px) * .9);stroke-linecap:round;filter:drop-shadow(0 0 3px color-mix(in srgb,var(--fl-miroir) 60%,transparent))}
.fl-portail{color:var(--pc)}
.fl-p-halo{fill:color-mix(in srgb,var(--pc) 14%,transparent)}
.fl-p-anneau{fill:none;stroke:var(--pc);stroke-width:calc(var(--ep,4px) * .8);stroke-dasharray:4 3;transform-box:fill-box;transform-origin:center;animation:flPortail 4s linear infinite;filter:drop-shadow(0 0 3px var(--pc))}
.fl-p-coeur{fill:var(--pc);opacity:.6}
@keyframes flPortail{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.fl-p-anneau{animation:none}}

/* Clavier Logimind (téléphone) : fixé en bas, la page garde la place en dessous */
body.avec-pave{padding-bottom:calc(var(--pave-h,120px) + 14px)}
.pave{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:7px max(7px,env(safe-area-inset-left)) calc(7px + env(safe-area-inset-bottom)) max(7px,env(safe-area-inset-right));
  background:color-mix(in srgb,var(--surface) 92%,var(--bg));border-top:1px solid var(--line);box-shadow:0 -8px 24px var(--ombre);
  display:flex;flex-direction:column;gap:6px;transform:translateY(100%);transition:transform .22s cubic-bezier(.22,1,.36,1);touch-action:manipulation;user-select:none;-webkit-user-select:none}
.pave.visible{transform:none}
.pave[hidden]{display:none}
.pv-ligne{display:flex;gap:6px;max-width:560px;width:100%;margin:0 auto}
.pv-t{flex:1 1 0;min-width:0;height:48px;border:0;border-radius:11px;background:var(--bg);color:var(--ink);font:700 1.3rem/1 var(--display);
  box-shadow:0 1.5px 0 var(--line);display:grid;place-items:center;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .08s,background .12s}
.pv-lettres .pv-t{height:46px;font-size:1.08rem;border-radius:9px}
.pv-lettres .pv-ligne{gap:4px}
.pv-t svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pv-fn{background:color-mix(in srgb,var(--line) 55%,var(--bg));color:var(--muted)}
.pv-ok{background:var(--accent);color:var(--accent-ink);box-shadow:none}
.pv-ok svg{stroke-width:2.6}
.pv-large{flex-grow:1.6}
.pv-t.appui{animation:pvAppui .16s ease-out}
@keyframes pvAppui{40%{transform:scale(.9);filter:brightness(1.15)}}
.pave.bloque .pv-t{opacity:.45}
.pave.bloque .pv-ok{opacity:.35}
.pv-ok.pv-suiv{background:var(--accent)}
/* la case de réponse : pas de vrai clavier, on montre un curseur qui clignote quand elle attend */
input.pv-case{caret-color:transparent;cursor:pointer}
input.pv-case:focus:not(:disabled){outline:none}.answer.pv-actif:not(:disabled),.tile input.pv-actif:not(:disabled){border-color:var(--accent)}
.saisie-ligne:has(input.pv-case.pv-actif:not(:disabled)){position:relative}
input.pv-case.pv-actif:not(:disabled):placeholder-shown{background-image:linear-gradient(currentColor,currentColor);background-size:2px 1.2em;background-repeat:no-repeat;background-position:center;animation:pvCurseur 1s steps(1) infinite}
@keyframes pvCurseur{50%{background-size:0 1.2em}}
@media (prefers-reduced-motion:reduce){.pave{transition:none}.pv-t.appui,input.pv-case{animation:none!important}}

/* visuel « clavier » (Actualités) */
.vis-clavier{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:12px;height:clamp(196px,50cqw,250px);padding:44px 0 0;border:1.5px solid var(--line);
  background:radial-gradient(120% 120% at 50% 0%,color-mix(in srgb,var(--bleu) 22%,var(--surface)),var(--surface) 70%)}
.vc-case{position:relative;display:grid;place-items:center;width:110px;height:52px;border-radius:14px;border:2px solid var(--bleu);background:var(--bg);font:800 1.6rem/1 var(--display);color:var(--ink);animation:visEntree .6s var(--ressort) backwards}
.vc-case i{position:absolute;right:30px;top:13px;width:2px;height:26px;background:var(--ink);animation:pvCurseur 1s steps(1) infinite}
.vc-pave{display:flex;flex-direction:column;gap:5px;width:100%;padding:8px 8px 10px;background:color-mix(in srgb,var(--surface) 92%,var(--bg));border-top:1px solid var(--line);box-shadow:0 -6px 18px var(--ombre);animation:vcMonte .6s .15s cubic-bezier(.22,1,.36,1) backwards}
.vc-ligne{display:flex;gap:5px;max-width:420px;width:100%;margin:0 auto}
.vc-t{flex:1;height:30px;border-radius:8px;background:var(--bg);display:grid;place-items:center;font:700 .95rem/1 var(--display);color:var(--ink);box-shadow:0 1.5px 0 var(--line)}
.vc-t.fn{color:var(--muted);background:color-mix(in srgb,var(--line) 55%,var(--bg))}
.vc-t.ok{background:var(--bleu);color:var(--accent-ink)}
.vis-clavier .vis-cta{top:10px;bottom:auto}
@keyframes vcMonte{from{transform:translateY(100%)}}
@media (prefers-reduced-motion:reduce){.vc-pave,.vc-case{animation:none}.vc-case i{animation:none}}

/* page « Installer l'appli » */
.inst-intro{display:flex;flex-direction:column;gap:14px}
.inst-ok{display:flex;align-items:center;gap:14px}
.inst-ok b{display:block;font-family:var(--display);font-size:1.15rem;margin-bottom:3px}
.inst-logo{flex:none;width:54px;height:54px;border-radius:15px;background:var(--bg);display:grid;place-items:center;border:1px solid var(--line)}
.inst-logo svg{width:42px;height:42px}
.inst-appareils{display:flex;gap:6px;padding:5px;margin:16px 0 6px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}
.inst-onglet{flex:1;border:0;border-radius:10px;padding:10px 6px;background:none;color:var(--muted);font:700 .95rem var(--body);cursor:pointer;transition:background .15s,color .15s}
.inst-onglet.choisi{background:var(--accent);color:var(--accent-ink)}
.inst-etapes{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.inst-etape{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;padding:14px;border-radius:18px;background:var(--surface);border:1px solid var(--line);animation:visEntree .45s calc(var(--k) * .07s) var(--ressort) backwards}
.inst-num{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--accent-bg);color:var(--accent);font:800 1rem/1 var(--display)}
.inst-txt{display:flex;flex-direction:column;gap:3px;padding-top:4px}
.inst-txt > b{font-size:1.02rem;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.inst-txt span b{color:var(--ink)}
.inst-txt span{color:var(--muted);font-size:.92rem;line-height:1.45}
.inst-txt a{color:var(--accent);font-weight:700}
.inst-img{grid-column:1 / -1;width:100%;height:auto;margin-top:8px;border-radius:12px;border:1px solid var(--line);display:block}
.inst-ico{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.inst-k{display:inline-grid;place-items:center;min-width:22px;height:22px;border-radius:6px;background:var(--bg);border:1px solid var(--line);font-size:1rem;line-height:1}
.inst-pied{margin:12px 2px 0;font-size:.85rem}
@media (prefers-reduced-motion:reduce){.inst-etape{animation:none}}
.inst-nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:2px 2px 0;color:var(--muted);font-size:.9rem}
.inst-nav span{margin-right:4px}
.inst-nav-b{border:1.5px solid var(--line);background:var(--surface);color:var(--ink);border-radius:99px;padding:6px 14px;font:700 .88rem var(--body);cursor:pointer}
.inst-nav-b.choisi{border-color:var(--accent);background:var(--accent-bg);color:var(--accent)}

/* au doigt ou à la souris : pas d'anneau de focus sur les boutons (les cases de saisie le gardent) */
html.par-pointeur :focus-visible:not(input):not(textarea):not(select){outline:none}
html.par-pointeur .interrupteur input:focus-visible + span{outline:none}
.inst-code{font-family:var(--display);letter-spacing:.08em;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:1px 6px}
.cpt-invit{margin:2px 0 4px}
.cpt-invit summary{cursor:pointer;color:var(--accent);font-weight:700;font-size:.92rem;list-style:none;padding:4px 0}
.cpt-invit summary::-webkit-details-marker{display:none}
.cpt-invit summary::before{content:"+ "}
.cpt-invit[open] summary::before{content:"− "}
.cpt-invit .field{margin-top:8px}
.cpt-invit input{text-transform:uppercase;letter-spacing:.08em}

/* 2.7 : les dernières icônes de succès qui restaient fixes sont animées (anneau qui tourne + animation propre + étincelles) */
.avatar.av-recompense.av-calendrier,.avatar.av-recompense.av-epees,.avatar.av-recompense.av-eclair,.avatar.av-recompense.av-mains{isolation:isolate;overflow:hidden}
.avatar.av-calendrier::before,.avatar.av-epees::before,.avatar.av-eclair::before,.avatar.av-mains::before{content:"";position:absolute;inset:-35%;z-index:-2;animation:avTourne 4s linear infinite}
.avatar.av-calendrier::after,.avatar.av-epees::after,.avatar.av-eclair::after,.avatar.av-mains::after{content:"";position:absolute;inset:3px;z-index:-1;border-radius:50%}
.avatar.av-calendrier::before{background:conic-gradient(from 0deg,#f2c552,#3ad69a,#ffe9a0,#0f7a52,#f2c552)}
.avatar.av-calendrier::after{background:radial-gradient(circle at 50% 30%,#12925f,#04291c 75%)}
.avatar.av-epees::before{background:conic-gradient(from 0deg,#d9dce6,#8b6cf0,#ffffff,#3b2390,#d9dce6)}
.avatar.av-epees::after{background:radial-gradient(circle at 50% 30%,#4a2fa8,#1d1240 75%)}
.avatar.av-eclair::before{background:conic-gradient(from 0deg,#ffd34d,#7a5cff,#fff3b0,#2a1670,#ffd34d)}
.avatar.av-eclair::after{background:radial-gradient(circle at 50% 30%,#3a2290,#120a33 75%)}
.avatar.av-mains::before{background:conic-gradient(from 0deg,#f2c552,#6ee7f2,#fff3c4,#0e8a97,#f2c552)}
.avatar.av-mains::after{background:radial-gradient(circle at 50% 30%,#12949f,#05343a 75%)}
.avatar.av-calendrier .av-svg,.avatar.av-epees .av-svg,.avatar.av-eclair .av-svg,.avatar.av-mains .av-svg{overflow:visible}
.avatar.av-calendrier .av-etincelle,.avatar.av-epees .av-etincelle,.avatar.av-eclair .av-etincelle,.avatar.av-mains .av-etincelle{fill:#fff;transform-box:fill-box;transform-origin:center;animation:avEtincelle 2.1s var(--d) ease-in-out infinite}
/* calendrier (vert émeraude) : les jours se cochent un par un jusqu'à l'étoile, la feuille du haut se tourne */
.avatar.av-calendrier .av-trou{fill:#0a5a3c}
.avatar.av-calendrier .av-cal-j{fill:#2c8f66;animation:avJour 3.2s var(--d) ease-out infinite}
.avatar.av-calendrier .av-cal-et{fill:#ffe27a;transform-box:fill-box;transform-origin:center;animation:avEtoileJour 3.2s ease-in-out infinite}
.avatar.av-calendrier .av-cal-feuille{fill:#ffe9a0;transform-box:fill-box;transform-origin:50% 0;animation:avPage 3.2s ease-in-out infinite;opacity:0}
@keyframes avJour{0%{fill:#2c8f66;transform:scale(1)}6%{fill:#ffd76a}10%,72%{fill:#ffd76a}90%,100%{fill:#2c8f66}}
@keyframes avEtoileJour{0%,58%{transform:scale(.85) rotate(0);filter:none}66%{transform:scale(1.35) rotate(36deg);filter:drop-shadow(0 0 2px #fff3b0)}76%{transform:scale(1.05) rotate(72deg)}90%,100%{transform:scale(.85) rotate(72deg);filter:none}}
@keyframes avPage{0%,84%{opacity:0;transform:scaleY(1)}88%{opacity:.95;transform:scaleY(1)}100%{opacity:0;transform:scaleY(-2.4)}}
/* épées : écart puis choc, avec un éclat */
.avatar.av-epees .av-ep-g,.avatar.av-epees .av-ep-d{transform-box:view-box;transform-origin:12px 20px}
.avatar.av-epees .av-ep-g{animation:avEpG 2.4s cubic-bezier(.5,0,.2,1) infinite}
.avatar.av-epees .av-ep-d{animation:avEpD 2.4s cubic-bezier(.5,0,.2,1) infinite}
.avatar.av-epees .av-ep-choc{fill:#ffe27a;transform-box:fill-box;transform-origin:center;animation:avChoc 2.4s ease-out infinite;opacity:0}
@keyframes avEpG{0%,100%{transform:rotate(0)}40%{transform:rotate(-10deg)}52%{transform:rotate(2deg)}60%{transform:rotate(0)}}
@keyframes avEpD{0%,100%{transform:rotate(0)}40%{transform:rotate(10deg)}52%{transform:rotate(-2deg)}60%{transform:rotate(0)}}
@keyframes avChoc{0%,50%{opacity:0;transform:scale(.3)}54%{opacity:1;transform:scale(1.4)}72%,100%{opacity:0;transform:scale(.6)}}
/* éclair : il frappe, des arcs électriques */
.avatar.av-eclair .av-ecl{transform-box:fill-box;transform-origin:center;animation:avFrappe 2.6s ease-in-out infinite}
.avatar.av-eclair .av-ecl-arc{animation:avArc 1.3s var(--d) steps(2) infinite;opacity:0}
@keyframes avFrappe{0%,62%,100%{transform:scale(1);filter:none}66%{transform:scale(1.12) translateY(.6px);filter:brightness(1.6) drop-shadow(0 0 4px #fff3b0)}70%{transform:scale(.97)}74%{transform:scale(1.06);filter:brightness(1.3)}80%{transform:scale(1);filter:none}}
@keyframes avArc{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
/* poignée de main : secousses et petit cœur */
.avatar.av-mains .av-mains{transform-box:view-box;transform-origin:12px 13px;animation:avSerre 2.2s ease-in-out infinite}
.avatar.av-mains .av-mains-coeur{fill:#ff8fb3;transform-box:fill-box;transform-origin:center;animation:avCoeurMonte 2.2s ease-out infinite;opacity:0}
@keyframes avSerre{0%,45%,100%{transform:translateY(0)}55%{transform:translateY(-1.2px) rotate(-3deg)}65%{transform:translateY(1px) rotate(2deg)}75%{transform:translateY(-.8px) rotate(-1.5deg)}85%{transform:translateY(0)}}
@keyframes avCoeurMonte{0%,50%{opacity:0;transform:translateY(5px) scale(.5)}62%{opacity:1;transform:translateY(3px) scale(1)}100%{opacity:0;transform:translateY(-1px) scale(.9)}}
.icone-choix.bloquee :is(.avatar.av-calendrier,.avatar.av-epees,.avatar.av-eclair,.avatar.av-mains) *,.icone-choix.bloquee :is(.avatar.av-calendrier,.avatar.av-epees,.avatar.av-eclair,.avatar.av-mains)::before{animation:none!important}
.icone-choix.bloquee :is(.avatar.av-epees .av-ep-choc,.avatar.av-mains .av-mains-coeur,.avatar.av-eclair .av-ecl-arc){opacity:0}
@media (prefers-reduced-motion:reduce){:is(.avatar.av-calendrier,.avatar.av-epees,.avatar.av-eclair,.avatar.av-mains) *,:is(.avatar.av-calendrier,.avatar.av-epees,.avatar.av-eclair,.avatar.av-mains)::before{animation:none!important}}

/* passage d'une page à l'autre en fondu (Safari 18.2+, Chrome) : l'ancienne page reste affichée jusqu'à ce que la nouvelle
   soit prête, puis fondu rapide ; le menu ☰ ouvert glisse dehors pendant ce temps */

/* « fondu enchaîné » : l'ancienne page s'efface vite, PUIS la nouvelle apparaît (pas les deux l'une sur l'autre) */
::view-transition-old(root){animation:vtSort .12s ease-in both}
::view-transition-new(root){animation:vtEntre .2s .08s cubic-bezier(.2,.8,.2,1) both}
@keyframes vtSort{to{opacity:0}}
@keyframes vtEntre{from{opacity:0;transform:translateY(6px)}}
.menu-panneau{view-transition-name:menu}
::view-transition-group(menu){animation:none}
::view-transition-old(menu){animation:vtMenuSort .24s cubic-bezier(.4,0,1,1) both}
::view-transition-new(menu){animation:none}
@keyframes vtMenuSort{to{transform:translateX(105%)}}

/* arrivée en fondu (transition entre pages) : les blocs sont déjà là, pas d'animation d'entrée par-dessus */
html.arrivee-douce :is(.carte,.modes > .panel,.anime > *,.entete-icone,.avatar.xl,.actu,.vis-ico,.section-conseil,.inst-etape,.va-ami,.vf-jeu,.vc-case,.vc-pave,.bandeau-appli,.seg.plein,.rang-gagne,.icone-gagnee){animation:none!important}
html.arrivee-douce .hub-tete h1 span::after{animation:none!important}
html.arrivee-douce :is(.lg-noeud,.lg-liens line){animation:none!important}
html.arrivee-douce .lg-centre{animation:pulse 2.4s 1.2s ease-in-out infinite!important}

/* ---------- barre d'onglets en bas (pages principales) ---------- */
body.avec-barre{padding-bottom:calc(80px + env(safe-area-inset-bottom,0px) * .45)}
.onglets{position:fixed;z-index:55;left:50%;bottom:calc(6px + env(safe-area-inset-bottom,0px) * .45);transform:translateX(-50%);
  width:max-content;max-width:calc(100vw - 24px);display:flex;gap:3px;padding:5px;border-radius:999px;view-transition-name:onglets;
  background:color-mix(in srgb,var(--surface) 86%,transparent);border:1px solid var(--line);
  box-shadow:0 10px 30px -8px var(--ombre),0 2px 6px -2px var(--ombre);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4)}
.ong{position:relative;flex:0 1 82px;width:82px;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px 4px 5px;border-radius:999px;
  color:var(--muted);text-decoration:none;font:700 .74rem/1 var(--body);letter-spacing:.01em;-webkit-tap-highlight-color:transparent;transition:color .2s,transform .12s}
.ong:active .ong-ico,.ong.touche .ong-ico{transform:scale(.88)}.ong .ong-ico{transition:transform .12s}.ong.touche{color:var(--ink)}   /* (avant : tout l'onglet rétrécissait sous le doigt, et iPhone perdait parfois le clic) */
.ong.actif{color:var(--ink)}
.ong-sel{position:absolute;inset:0;z-index:-1;border-radius:inherit;background:color-mix(in srgb,var(--ink) 10%,transparent);view-transition-name:onglet-sel}
.ong-ico{position:relative;display:grid;place-items:center;width:24px;height:24px}
.ong-ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ong.actif .ong-ico svg{stroke-width:2.3}
.ong-txt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.ong-nb{position:absolute;top:-4px;right:-9px;min-width:17px;height:17px;padding:0 4px;border-radius:99px;background:var(--bad);color:#fff;font:800 .64rem/17px var(--body);text-align:center;font-style:normal;box-shadow:0 0 0 2px var(--surface)}
.ong-nb[hidden]{display:none}
/* la pastille glisse d'un onglet à l'autre pendant le fondu ; la barre, elle, ne bouge pas */
::view-transition-group(onglet-sel){animation-duration:.32s;animation-timing-function:cubic-bezier(.3,1.25,.5,1)}
::view-transition-old(onglet-sel):only-child{animation:vtBarreSort .22s cubic-bezier(.4,0,1,1) both}::view-transition-new(onglet-sel):only-child{animation:vtBarreEntre .32s .06s cubic-bezier(.2,.9,.3,1.1) both}

::view-transition-group(onglets){animation:none}
::view-transition-old(onglets){display:none;opacity:0;visibility:hidden;animation:none}   /* Safari ne cache pas toujours avec display:none : l'ancienne barre restait visible, décalée (barre en double) */
::view-transition-new(onglets){animation:none}
/* vers un jeu (la barre n'existe plus) : elle descend et s'en va ; en revenant d'un jeu : elle remonte */
::view-transition-old(onglets):only-child{display:block;opacity:1;visibility:visible;animation:vtBarreSort .22s cubic-bezier(.4,0,1,1) both}
::view-transition-new(onglets):only-child{animation:vtBarreEntre .32s .06s cubic-bezier(.2,.9,.3,1.1) both}
@keyframes vtBarreSort{to{transform:translateY(96px);opacity:0}}
@keyframes vtBarreEntre{from{transform:translateY(96px);opacity:0}}
/* ce qui s'affiche en bas passe au-dessus de la barre */
body.avec-barre .toast-appli{bottom:calc(86px + env(safe-area-inset-bottom,0px) * .45)}
body.avec-barre .toast-succes{bottom:calc(88px + env(safe-area-inset-bottom,0px) * .45)}
body.avec-barre .invit-duel{bottom:calc(86px + env(safe-area-inset-bottom,0px) * .45)}
body.cal-ouvert .onglets{visibility:hidden}
@media (prefers-reduced-motion:reduce){.ong{transition:none}}
/* en tapant dans une case (clavier du téléphone ouvert), la barre se cache pour ne pas flotter au-dessus du clavier */
body.avec-barre:has(input:not([type=checkbox]):not([type=radio]):not([readonly]):focus, textarea:focus, select:focus) .onglets{display:none}
/* visuel « onglets » (Actualités) */
.vis-onglets{display:flex;align-items:center;justify-content:center;height:clamp(120px,32cqw,170px);border:1.5px solid var(--line);
  background:radial-gradient(120% 140% at 50% 0%,color-mix(in srgb,var(--violet) 22%,var(--surface)),var(--surface) 70%)}
.vis-onglets .onglets{position:relative;left:auto;bottom:auto;transform:none;width:max-content;max-width:86%;view-transition-name:none;animation:visEntree .6s var(--ressort) backwards}
.vis-onglets .ong-sel{view-transition-name:none;animation:visGlisse 5s cubic-bezier(.3,1.25,.5,1) infinite}
@keyframes visGlisse{0%,18%{transform:translateX(calc(100% + 3px))}28%,46%{transform:translateX(calc(200% + 6px))}56%,74%{transform:translateX(0)}84%,100%{transform:translateX(calc(100% + 3px))}}
.vis-onglets .ong{pointer-events:none}
.vis-onglets .ong.actif{color:var(--muted)}
.vis-onglets .ong:first-child{position:relative}
@media (prefers-reduced-motion:reduce){.vis-onglets .ong-sel{animation:none}}

/* Succès : une catégorie par bloc qui se déroule */
.cat-succes{flex-shrink:0;border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--bg) 55%,var(--surface));overflow:hidden}
.cat-tete{width:100%;display:grid;grid-template-columns:1fr auto auto;grid-template-areas:"nom nb chev" "jauge jauge jauge";align-items:center;gap:6px 10px;padding:13px 14px;border:0;background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.cat-nom{grid-area:nom;font-family:var(--display);font-weight:800;font-size:1.02rem}
.cat-nb{grid-area:nb;color:var(--muted);font-weight:700;font-size:.88rem;font-variant-numeric:tabular-nums}
.cat-chevron{grid-area:chev;width:20px;height:20px;fill:none;stroke:var(--muted);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.cat-succes.ouvert .cat-chevron{transform:rotate(180deg)}
.cat-jauge{grid-area:jauge;height:5px;border-radius:99px;background:var(--line);overflow:hidden}
.cat-jauge i{display:block;height:100%;background:var(--accent);transform-origin:left;border-radius:inherit}
.cat-corps{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s cubic-bezier(.22,1,.36,1)}
.cat-succes.ouvert .cat-corps{grid-template-rows:1fr}
.cat-int{min-height:0;overflow:hidden}
.cat-int .liste-succes{padding:0 10px 12px}
@media (prefers-reduced-motion:reduce){.cat-corps,.cat-chevron{transition:none}}
/* classement général du Défi (bêta) */
#clPortee{margin-bottom:8px}
#clPortee .beta.mini{margin-left:4px}
.cl-ma-place{margin:4px 2px 6px;font-size:.95rem;color:var(--muted)}
.cl-ma-place b{color:var(--ink);font-family:var(--display);font-size:1.05rem}
.cl-ma-place sup,.ami-txt sup{font-size:.65em}
.cl-info{margin:4px 2px 6px}
.classement .cl-sep{text-align:center;color:var(--muted);letter-spacing:.3em;line-height:1;padding:2px 0}
.classement .ami{flex-wrap:wrap}
.cl-mod-btn{flex:none;font-size:.8rem}
.cl-mod{flex-basis:100%;display:flex;flex-wrap:wrap;gap:8px;padding:6px 0 2px 38px}
.cl-public{margin-top:10px}
.cl-exclus{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;font-size:.85rem;color:var(--muted)}
.cl-exclus b{flex-basis:100%;color:var(--ink)}
.vis-classement .va-ami{gap:10px}.vis-classement .place{width:26px;height:26px;font-size:.85rem}.vcl-score{margin-left:auto;font-family:var(--display);font-weight:800;font-size:1.15rem;color:#fff;font-variant-numeric:tabular-nums}.vcl-score small{font-size:.7em;opacity:.7}
.pv-vide{flex:1 1 0;visibility:hidden}
/* carte « nouvelle version » sur l'accueil (une fois par version) */
#majZone:empty{display:none}
.carte-maj{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"ico txt" "ico voir";align-items:center;gap:2px 14px;margin:0 0 16px;padding:14px 44px 14px 14px;border-radius:18px;text-decoration:none;color:var(--ink);
  background:linear-gradient(135deg,color-mix(in srgb,var(--violet) 16%,var(--surface)),var(--surface) 70%);border:1.5px solid color-mix(in srgb,var(--violet) 45%,var(--line));box-shadow:0 10px 30px -18px var(--ombre);animation:entree .5s .15s cubic-bezier(.2,.8,.2,1) backwards;transition:opacity .25s,transform .25s}
.carte-maj.part{opacity:0;transform:translateY(-6px) scale(.98)}
.cm-ico{grid-area:ico;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--accent-bg);color:var(--violet)}
.cm-ico svg{width:24px;height:24px}
.cm-txt{grid-area:txt;display:flex;flex-direction:column;gap:2px;min-width:0}
.cm-txt b{font-family:var(--display);font-size:1.02rem}
.cm-txt small{color:var(--muted);font-size:.84rem}
.cm-voir{grid-area:voir;font-weight:700;font-size:.86rem;color:var(--violet);margin-top:4px}
.cm-voir i{font-style:normal;display:inline-block;transition:transform .2s}
.carte-maj:hover .cm-voir i{transform:translateX(3px)}
.cm-fermer{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:50%;border:0;background:transparent;color:var(--muted);font-size:1.3rem;line-height:1;cursor:pointer}
.cm-fermer:hover{background:color-mix(in srgb,var(--line) 60%,transparent);color:var(--ink)}
html.arrivee-douce .carte-maj{animation:none}
.cm-ico svg{fill:currentColor;stroke:currentColor;stroke-width:1;stroke-linejoin:round}
/* aperçu à une seule page : changement de vue instantané, seule la pastille de la barre d'onglets glisse */
html.vt-spa::view-transition-old(root),html.vt-spa::view-transition-new(root){animation:none}
/* icône animée « Vieux chêne » (succès Ancienneté II) : automne, le chêne se balance, des feuilles tombent */
.avatar.av-recompense.av-chene{--av-fond:#2a1606;background:#2a1606;isolation:isolate;overflow:hidden;box-shadow:0 0 0 3px color-mix(in srgb,#f2c552 35%,transparent),0 0 18px -2px color-mix(in srgb,#f59e0b 65%,transparent)}
.avatar.av-chene::before{content:"";position:absolute;inset:-35%;z-index:-2;background:conic-gradient(from 0deg,#f59e0b,#ef6b2f,#fde68a,#b45309,#facc15,#f59e0b);animation:avTourne 4s linear infinite}
.avatar.av-chene::after{content:"";position:absolute;inset:3px;z-index:-1;border-radius:50%;background:radial-gradient(circle at 50% 32%,#5b3410,#2a1606 74%)}
.avatar.av-chene .av-svg{overflow:visible;transform:scale(1.34) translateY(-.5px)}
.avatar.av-chene .av-ch-tronc{fill:#c08a4e}
.avatar.av-chene .av-ch-feuillage{fill:#f6a634}
.avatar.av-chene .av-ch-lumiere{fill:#ffd88a;opacity:.85}
.avatar.av-chene .av-ch-arbre{transform-box:view-box;transform-origin:12px 21px;animation:avChBalance 3.2s ease-in-out infinite}
.avatar.av-chene .av-ch-feuille{fill:#ef6b2f;opacity:0;transform-box:fill-box;transform-origin:center;animation:avChTombe 3s var(--d) ease-in infinite}
.avatar.av-chene .av-ch-feuille:nth-of-type(2n){fill:#facc15}
.avatar.av-chene .av-etincelle{fill:#fff;transform-box:fill-box;transform-origin:center;animation:avEtincelle 2.1s var(--d) ease-in-out infinite}
@keyframes avChBalance{0%,100%{transform:rotate(-3.5deg)}50%{transform:rotate(3.5deg)}}
@keyframes avChTombe{0%{opacity:0;transform:translate(0,0) rotate(0)}12%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translate(var(--x),8.5px) rotate(220deg)}}
.icone-choix.bloquee .avatar.av-chene *,.icone-choix.bloquee .avatar.av-chene::before{animation:none!important}
.icone-choix.bloquee .avatar.av-chene .av-ch-feuille{opacity:0}
@media (prefers-reduced-motion:reduce){.avatar.av-chene *,.avatar.av-chene::before{animation:none!important}}
/* visuel « gels » (Actualités, 2.8) */
.vis-gels{position:relative;height:clamp(150px,40cqw,190px);display:flex;align-items:center;justify-content:center;gap:18px;background:radial-gradient(120% 140% at 20% 0%,#1f6fa8,#0b2f52 55%,#061a30);overflow:hidden}
.vis-gels::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 18% 30%,rgba(255,255,255,.25) 0 1.5px,transparent 2px),radial-gradient(circle at 78% 22%,rgba(255,255,255,.3) 0 1.2px,transparent 1.8px),radial-gradient(circle at 62% 78%,rgba(255,255,255,.22) 0 1.5px,transparent 2px),radial-gradient(circle at 32% 82%,rgba(255,255,255,.2) 0 1px,transparent 1.6px)}
.vg-gel{position:relative;width:clamp(58px,17cqw,76px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 28%,#e8f7ff,#8fd3ff 45%,#3a9be0 90%);box-shadow:0 0 0 3px rgba(255,255,255,.25),0 0 26px -2px rgba(143,211,255,.8);animation:visEntree .6s calc(.15s + var(--k) * .15s) var(--ressort) backwards,vgFlotte 3.2s calc(var(--k) * -1.6s) ease-in-out infinite}
.vg-rot{display:grid;place-items:center;width:58%;height:58%;transform-origin:50% 50%;animation:vgTourne 9s linear infinite}   /* la rotation sur un <span> (Safari tournait le <svg> autour de son coin : flocon décentré) */
.vg-gel svg{display:block;width:100%;height:100%;fill:none;stroke:#0b3a66;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.vg-cadeau{position:absolute;top:14px;right:16px;padding:4px 10px;border-radius:999px;background:#fff;color:#0b3a66;font:800 .95rem/1 var(--display);box-shadow:0 4px 14px -4px rgba(0,0,0,.4)}
.vg-txt{position:absolute;bottom:12px;left:0;right:0;text-align:center;color:#d8efff;font:700 .78rem/1 var(--body);letter-spacing:.08em;text-transform:uppercase}
@keyframes vgFlotte{0%,100%{transform:translateY(-4px)}50%{transform:translateY(4px)}}
@keyframes vgTourne{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.vg-gel,.vg-rot{animation:none}}
/* gels du calendrier : la même pastille glacée que dans les Actus (pleine = gel en réserve, vide = à gagner) */
.cal-gels{gap:5px}
.cal-gels i{width:22px;height:22px;border-radius:50%;background:color-mix(in srgb,var(--line) 70%,transparent);box-shadow:inset 0 0 0 1.5px var(--line)}
.cal-gels i svg.flocon{width:14px;height:14px;fill:none;stroke:var(--muted);stroke-width:2.1;stroke-linecap:round;opacity:.55}
.cal-gels i.plein{background:radial-gradient(circle at 35% 28%,#e8f7ff,#8fd3ff 45%,#3a9be0 90%);box-shadow:0 0 0 1.5px rgba(255,255,255,.35),0 0 10px -2px rgba(143,211,255,.8)}
.cal-gels i.plein svg.flocon{stroke:#0b3a66;opacity:1}
/* carte « Bientôt » de l'accueil : Mastermind (2.9), grisé — 4 pions du code */
.carte-bientot .cb-code{grid-template-columns:repeat(2,9px);grid-template-rows:repeat(2,9px);gap:5px;place-content:center}
.carte-bientot .cb-code i{width:9px;height:9px;border-radius:50%;background:var(--muted);opacity:.55}
.carte-bientot .cb-code i:nth-child(2),.carte-bientot .cb-code i:nth-child(3){opacity:.3}
/* pastille de la barre d'onglets : part de l'onglet d'avant (--de = écart en onglets) et glisse jusqu'au bon */
.onglets .ong-sel{transform:translateX(calc(var(--de,0) * (100% + 3px)))}
/* zone d'appui de la barre : un peu plus grande que la barre (un appui juste au-dessus ou en dessous compte aussi) */
.onglets::before{content:"";position:absolute;inset:-10px -8px -14px;z-index:-2}
.vis-onglets .onglets::before{content:none}
/* classement général : la ligne d'un joueur ouvre son profil */
.classement .cl-lien{display:flex;align-items:center;gap:10px;flex:1;min-width:0;color:inherit;text-decoration:none;border-radius:12px}
.classement .cl-lien:active{opacity:.7}
@media (hover:hover){.classement .cl-lien:hover .ami-txt b{text-decoration:underline;text-underline-offset:3px}}
.cpt-public{margin-top:12px}
.reglage-ligne .sauv-texte{min-width:0}
.cpt .reglage-ligne .sauv-texte{flex:1 1 auto;min-width:0}
/* visuel « classement » des Actus : orange, couronne animée sur le 1er */
.vis-classement{background:radial-gradient(120% 140% at 85% 0%,#b45a12,#5a2a06 55%,#2b1303)}
.vis-classement .place{position:relative;overflow:visible}
.vcl-couronne{position:absolute;left:50%;top:-18px;width:24px;height:24px;margin-left:-12px;transform-origin:50% 100%;animation:vclCouronne 2.4s ease-in-out infinite;filter:drop-shadow(0 0 5px rgba(255,210,80,.75))}
.vcl-couronne svg{width:100%;height:100%;fill:#ffd23f;stroke:#b7791f;stroke-width:.8;stroke-linejoin:round}
@keyframes vclCouronne{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-3px) rotate(8deg)}}
@media (prefers-reduced-motion:reduce){.vcl-couronne{animation:none}}
.classement .place.p1{position:relative;overflow:visible}
.cl-couronne{top:-14px;width:20px;height:20px;margin-left:-10px}
.classement .ami{overflow:visible}
/* pages avec la barre d'onglets : toujours au moins la hauteur de l'écran (sur iPhone, une page plus courte que l'écran
   s'affichait avec la barre plus haut, puis la barre « montait » quand la page se remplissait) */
body.avec-barre{min-height:100vh;min-height:100lvh}

/* grand message « installe l'appli puis crée ton compte » (téléphone, 1re visite) */
.ga-etapes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ga-etapes li{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1.5px solid var(--line);border-radius:16px;background:var(--bg)}
.ga-etapes li div{display:flex;flex-direction:column;gap:2px;min-width:0}
.ga-etapes li span:not(.ga-num){color:var(--muted);font-size:.9rem;line-height:1.35}
.ga-num{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--violet);color:#fff;font-weight:800;font-family:var(--display)}
.grand-appli .btn[data-ga-installer]{align-self:stretch}

/* fenêtres au milieu de l'écran : la page derrière ne bouge plus (plus de glissé vers le haut ou le bas, même sur iPhone) ;
   seule la fenêtre défile, et seulement si elle est plus grande que l'écran */
html:has(body.cal-ouvert),body.cal-ouvert{overflow:hidden;overscroll-behavior:none}
.cal-fond,.cj-fond,.fl-intro-fond{overscroll-behavior:contain;touch-action:none}
.cal-panneau,.cj,.fl-intro{overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch}
.cpt-panneau{gap:10px}
@media (max-height:700px){.cpt-panneau{padding:16px}.cpt-bienvenue .menu-logo{width:44px;height:44px}.cpt-bienvenue h2{font-size:1.35rem}}