/* ==========================================================
   Ludéales — pastel, inspiré du site d’origine
   ========================================================== */
:root{
  --lavande:#E8E0F4;
  --lavande-moy:#D4C4F0;
  --lavande-fonce:#B8A8E0;
  --lavande-pale:#F5F1FA;
  --bleu:#B8D8EA;
  --bleu-fonce:#8EC5E0;
  --corail:#E8925A;
  --corail-clair:#F5B88A;
  --creme:#FFFBF7;
  --blanc:#FFFFFF;
  --encre:#3D3558;
  --encre-doux:#6B6289;
  --ligne:rgba(61,53,88,.1);
  --ligne-forte:rgba(61,53,88,.18);
  --ombre:0 4px 24px rgba(61,53,88,.07);
  --ombre-forte:0 10px 40px rgba(61,53,88,.11);
  --rayon:14px;
  --serif:"Fraunces","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:"Nunito",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --motif:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='%23B8A8E0' fill-opacity='.22'%3E%3Cpath d='M8 14h10c0-4 3-7 7-7s7 3 7 7h10c3 0 6 3 6 6v10c4 0 7 3 7 7s-3 7-7 7v10c0 3-3 6-6 6H32c0 4-3 7-7 7s-7-3-7-7H8c-3 0-6-3-6-6V32c-4 0-7-3-7-7s3-7 7-7V20c0-3 3-6 6-6z'/%3E%3C/g%3E%3C/svg%3E");
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--lavande);
  background-image:
    radial-gradient(ellipse 120% 80% at 50% -10%, var(--lavande-pale) 0%, transparent 55%),
    radial-gradient(ellipse 90% 60% at 100% 100%, rgba(184,216,234,.35) 0%, transparent 50%),
    var(--motif);
  background-size:auto,auto,72px 72px;
  background-attachment:fixed;
  color:var(--encre);
  font-family:var(--sans);
  font-size:15.5px;line-height:1.55;
  min-height:100vh;
}
.wrap{max-width:1160px;margin:0 auto;padding:0 22px}

a{color:inherit}
:focus-visible{outline:2px solid var(--corail);outline-offset:2px;border-radius:4px}

/* ---------- barre de navigation ---------- */
.topbar{
  border-bottom:1px solid var(--ligne);
  background:rgba(255,251,247,.82);
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(255,255,255,.6);
}
.topbar .wrap{display:flex;align-items:center;gap:20px;height:64px}
.brand{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--serif);font-size:22px;font-weight:700;
  letter-spacing:-.01em;text-decoration:none;white-space:nowrap;
  color:var(--encre);
}
.brand-mark{
  width:34px;height:34px;flex:0 0 auto;
  filter:drop-shadow(0 2px 6px rgba(61,53,88,.12));
}
.brand .dot{color:var(--corail)}
.navlinks{display:flex;gap:8px;margin-left:auto;font-size:14px;font-weight:600}
.navlinks a{
  text-decoration:none;color:var(--encre-doux);
  padding:8px 12px;border-radius:999px;
  transition:color .15s,background .15s;
}
.navlinks a:hover,.navlinks a[aria-current]{
  color:var(--encre);background:rgba(212,196,240,.45);
}

/* ---------- titres ---------- */
h1,h2,h3{font-family:var(--serif);font-weight:700;line-height:1.12;color:var(--encre)}
.display{
  font-size:clamp(42px,7.5vw,76px);letter-spacing:-.025em;
  line-height:.98;margin-bottom:14px;
}
.display em{font-style:italic;color:var(--corail)}
.lede{
  font-size:clamp(16px,2.1vw,19px);color:var(--encre-doux);
  max-width:56ch;line-height:1.65;
}

/* ---------- accueil ---------- */
.hero{padding:58px 0 44px}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:32px}}

.hero-dice{
  position:relative;
  display:flex;gap:16px;justify-content:center;align-items:center;flex-wrap:wrap;
  min-height:190px;padding:34px 26px;
  background:var(--blanc);
  border:1px solid var(--ligne);
  border-radius:calc(var(--rayon) + 4px);
  box-shadow:var(--ombre);
  cursor:pointer;
}
.hero-dice::after{
  content:"Cliquez pour relancer";
  position:absolute;left:0;right:0;bottom:12px;text-align:center;
  font-size:10px;text-transform:uppercase;letter-spacing:.14em;font-weight:700;
  color:var(--encre-doux);opacity:.55;transition:opacity .2s;
}
.hero-dice:hover::after{opacity:.95}
.hero-dice .die{--size:66px}
.hero-dice .f-front{transform:translateZ(33px)}
.hero-dice .f-back{transform:rotateY(180deg) translateZ(33px)}
.hero-dice .f-right{transform:rotateY(90deg) translateZ(33px)}
.hero-dice .f-left{transform:rotateY(-90deg) translateZ(33px)}
.hero-dice .f-top{transform:rotateX(90deg) translateZ(33px)}
.hero-dice .f-bottom{transform:rotateX(-90deg) translateZ(33px)}
.hero-dice .die.throwing .die-shadow{transform:translateZ(-35px)}
@media(max-width:520px){
  .hero-dice .die{--size:52px}
  .hero-dice .f-front{transform:translateZ(26px)}
  .hero-dice .f-back{transform:rotateY(180deg) translateZ(26px)}
  .hero-dice .f-right{transform:rotateY(90deg) translateZ(26px)}
  .hero-dice .f-left{transform:rotateY(-90deg) translateZ(26px)}
  .hero-dice .f-top{transform:rotateX(90deg) translateZ(26px)}
  .hero-dice .f-bottom{transform:rotateX(-90deg) translateZ(26px)}
  .hero-dice .die.throwing .die-shadow{transform:translateZ(-28px)}
}

.section{padding:48px 0}
.section-head{margin-bottom:28px}
.section-head h2{font-size:clamp(26px,3.6vw,36px);letter-spacing:-.015em}
.section-head p{color:var(--encre-doux);margin-top:8px;max-width:62ch;font-size:15px}

/* ---------- cartes de variantes ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:18px}
.card{
  display:block;text-decoration:none;position:relative;
  background:var(--blanc);border:1px solid var(--ligne);
  border-radius:var(--rayon);padding:22px 20px 20px;
  box-shadow:var(--ombre);
  transition:transform .18s,box-shadow .18s,border-color .18s;
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:var(--ombre-forte);
  border-color:var(--lavande-moy);
}
.card .origin{
  font-size:10.5px;text-transform:uppercase;letter-spacing:.13em;
  color:var(--lavande-fonce);font-weight:700;
}
.card h3{font-size:26px;margin:5px 0 8px;letter-spacing:-.01em}
.card .tag{color:var(--encre-doux);font-size:14px;line-height:1.5;min-height:3em}
.card .specs{
  display:flex;gap:14px;margin-top:15px;padding-top:13px;
  border-top:1px solid var(--ligne);
  font-size:11.5px;color:var(--encre-doux);
}
.card .specs b{color:var(--encre);font-weight:700}
.card.new::after{
  content:"Inédit";position:absolute;top:16px;right:16px;
  font-size:9.5px;text-transform:uppercase;letter-spacing:.12em;font-weight:700;
  background:var(--corail);color:var(--blanc);padding:4px 9px;border-radius:999px;
}

/* ==========================================================
   TABLE DE JEU
   ========================================================== */
.table{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,364px);gap:34px;align-items:start;padding:34px 0 60px}
@media(max-width:940px){.table{grid-template-columns:1fr;gap:26px}}

.playhead{display:flex;align-items:baseline;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:22px}
.playhead h1{font-size:clamp(30px,4.4vw,44px);letter-spacing:-.015em}
.playhead .origin{font-size:11px;text-transform:uppercase;letter-spacing:.13em;color:var(--lavande-fonce);font-weight:700}
.playhead-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.playhead .rules-link{font-size:13.5px;color:var(--encre-doux);text-decoration:none;border-bottom:1px solid var(--ligne-forte);padding-bottom:1px}
.playhead .rules-link:hover{color:var(--encre)}
.btn.compact{padding:8px 14px;font-size:12.5px;font-weight:700}

/* ---------- plateau ---------- */
.felt{
  background:var(--blanc);
  border:1px solid var(--ligne);
  border-radius:calc(var(--rayon) + 2px);
  box-shadow:var(--ombre);
  padding:28px 24px 24px;
  position:relative;
}
.turnbar{
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:700;
  color:var(--encre-doux);padding-bottom:16px;margin-bottom:22px;
  border-bottom:1px solid var(--ligne);
}
.turnbar .who{color:var(--encre);font-size:12px}
.turnbar .rolls{color:var(--corail)}

/* --- dés --- */
.dice-tray{
  position:relative;
  display:flex;flex-wrap:wrap;gap:18px;justify-content:center;
  min-height:132px;align-items:center;padding:22px 16px 20px;
  background:linear-gradient(180deg, var(--lavande-pale) 0%, var(--creme) 100%);
  border:1px solid var(--ligne);
  border-radius:var(--rayon);
}
.dice-tray:has(.throwing),
.hero-dice:has(.throwing){
  perspective:1000px;perspective-origin:50% 40%;
}
.die{
  --size:80px;
  width:var(--size);height:var(--size);
  position:relative;flex:0 0 auto;
  background:none;border:0;padding:0;cursor:pointer;
}
.die-motion{
  display:block;width:100%;height:100%;
  position:relative;
  transition:transform .18s cubic-bezier(.34,1.4,.64,1);
}
.die.throwing .die-motion{transform-style:preserve-3d}
.die:disabled{cursor:default}
.die:not(:disabled):hover .die-motion{transform:translateY(-6px)}
.die.landed .die-motion{animation:squash .2s cubic-bezier(.2,1.5,.4,1)}
@keyframes squash{
  0%{transform:translateY(-2px) scale(1.1,.86)}
  55%{transform:translateY(0) scale(.95,1.08)}
  100%{transform:translateY(0) scale(1,1)}
}
.die.throwing .die-motion{
  animation:toss var(--throw-ms,520ms) cubic-bezier(.2,.55,.25,1) both;
}
.die.throwing-soft .die-motion{
  animation:tossSoft var(--throw-ms,280ms) ease-out both;
}
@keyframes toss{
  0%{transform:translate(0,0) rotate(0deg) scale(1)}
  16%{transform:translate(calc(var(--toss-x,0) * .4px),-58px) rotate(calc(var(--toss-r,0) * 1deg)) scale(1.08)}
  40%{transform:translate(calc(var(--toss-x,0) * 1px),-12px) rotate(calc(var(--toss-r,0) * .5deg)) scale(1)}
  56%{transform:translate(calc(var(--toss-x,0) * .7px),-26px) rotate(calc(var(--toss-r,0) * .3deg)) scale(1.04)}
  74%{transform:translate(calc(var(--toss-x,0) * .25px),-4px) rotate(0deg) scale(1)}
  88%{transform:translate(0,-9px) rotate(0deg) scale(1.02)}
  100%{transform:translate(0,0) rotate(0deg) scale(1)}
}
@keyframes tossSoft{
  0%{transform:translateY(0) scale(1)}
  40%{transform:translateY(-14px) scale(1.04)}
  100%{transform:translateY(0) scale(1)}
}

.die-flat{
  position:absolute;inset:0;
  display:block;
  border-radius:16%;
  box-shadow:0 4px 14px rgba(61,53,88,.12);
}
.die-flat svg{display:block;width:100%;height:100%}
.die.throwing .die-flat{visibility:hidden}

.cube{
  position:absolute;inset:0;
  transform-style:preserve-3d;
  will-change:transform;
  visibility:hidden;
  pointer-events:none;
}
.die.throwing .cube{visibility:visible}
.cube-face{
  position:absolute;inset:0;
  backface-visibility:hidden;
}
.cube-face svg{display:block;width:100%;height:100%}
.face-bg{fill:var(--creme)}
.pip{fill:var(--encre)}

.f-front {transform:translateZ(40px)}
.f-back  {transform:rotateY(180deg) translateZ(40px)}
.f-right {transform:rotateY(90deg)  translateZ(40px)}
.f-left  {transform:rotateY(-90deg) translateZ(40px)}
.f-top   {transform:rotateX(90deg)  translateZ(40px)}
.f-bottom{transform:rotateX(-90deg) translateZ(40px)}

.die-shadow{
  position:absolute;left:8%;right:8%;bottom:-10px;height:10px;
  background:radial-gradient(ellipse at 50% 50%, rgba(61,53,88,.18) 0%, transparent 72%);
  border-radius:50%;
  z-index:-1;
}
.die.throwing .die-shadow{
  transform:translateZ(-42px);
  animation:shadowPulse var(--throw-ms,520ms) cubic-bezier(.2,.55,.25,1) both;
}
.die.throwing-soft .die-shadow{animation:none;opacity:.35}
@keyframes shadowPulse{
  0%{opacity:.55;transform:translateZ(-42px) scale(1)}
  16%{opacity:.12;transform:translateZ(-42px) scale(.4)}
  40%{opacity:.42;transform:translateZ(-42px) scale(.8)}
  56%{opacity:.2;transform:translateZ(-42px) scale(.5)}
  74%{opacity:.48;transform:translateZ(-42px) scale(.92)}
  100%{opacity:.55;transform:translateZ(-42px) scale(1)}
}

.die.held .face-bg{fill:var(--corail)}
.die.held .pip{fill:var(--blanc)}
.die.frozen .face-bg{fill:var(--bleu)}
.die.frozen .pip{fill:rgba(61,53,88,.55)}
.die.frozen{cursor:not-allowed}

@media(prefers-reduced-motion:reduce){
  .die:not(:disabled):hover .die-motion{transform:none}
}
@media(max-width:520px){
  .die{--size:60px}
  .f-front{transform:translateZ(30px)} .f-back{transform:rotateY(180deg) translateZ(30px)}
  .f-right{transform:rotateY(90deg) translateZ(30px)} .f-left{transform:rotateY(-90deg) translateZ(30px)}
  .f-top{transform:rotateX(90deg) translateZ(30px)} .f-bottom{transform:rotateX(-90deg) translateZ(30px)}
  .die.throwing .die-shadow{transform:translateZ(-32px)}
  .dice-tray{gap:12px}
}

.hint-line{
  text-align:center;font-size:12.5px;color:var(--encre-doux);
  margin-top:22px;min-height:1.4em;
}

.controls{display:flex;gap:11px;flex-wrap:wrap;justify-content:center;margin-top:20px}
.btn{
  appearance:none;cursor:pointer;font:inherit;font-weight:700;font-size:14.5px;
  letter-spacing:.015em;padding:14px 28px;border:1px solid transparent;
  border-radius:999px;
  transition:background .15s,color .15s,opacity .15s,border-color .15s,transform .15s;
}
.btn.primary{background:var(--corail);color:var(--blanc);box-shadow:0 4px 14px rgba(232,146,90,.35)}
.btn.primary:not(:disabled):hover{background:var(--corail-clair);transform:translateY(-1px)}
.btn.ghost{background:var(--blanc);color:var(--encre-doux);border-color:var(--ligne-forte)}
.btn.ghost:hover{color:var(--encre);border-color:var(--lavande-fonce);background:var(--lavande-pale)}
.btn:disabled{opacity:.38;cursor:not-allowed;transform:none}

.banner{
  margin-top:22px;padding:14px 17px;
  border-left:3px solid var(--corail);
  background:var(--lavande-pale);
  border-radius:0 var(--rayon) var(--rayon) 0;
  font-size:13.5px;color:var(--encre-doux);
}
.banner b{
  display:block;color:var(--encre);font-size:11px;
  text-transform:uppercase;letter-spacing:.11em;margin-bottom:4px;
}
.banner.gold{border-left-color:var(--lavande-fonce);background:rgba(212,196,240,.35)}
.banner+.banner{margin-top:10px}
.banner[hidden]{display:none}

/* ---------- feuille de score ---------- */
.sheet{
  background:var(--blanc);border:1px solid var(--ligne);
  border-radius:var(--rayon);box-shadow:var(--ombre);
  position:sticky;top:80px;overflow:hidden;
}
@media(max-width:940px){.sheet{position:static}}
.sheet-head{
  padding:12px 15px;background:var(--lavande-pale);
  border-bottom:1px solid var(--ligne);
  font-size:10.5px;text-transform:uppercase;letter-spacing:.13em;font-weight:700;color:var(--encre-doux);
  display:flex;justify-content:space-between;gap:10px;
}
.sec-label{
  padding:9px 15px 6px;font-size:10px;text-transform:uppercase;letter-spacing:.13em;
  color:var(--lavande-fonce);font-weight:700;background:rgba(212,196,240,.25);
}
.row{
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;
  width:100%;text-align:left;padding:9px 15px;
  background:none;border:0;border-bottom:1px solid var(--ligne);
  color:var(--encre);font:inherit;font-size:13.5px;cursor:pointer;
  transition:background .13s;
}
.row .lab{display:flex;flex-direction:column;min-width:0}
.row .hint{font-size:10.5px;color:var(--encre-doux);opacity:.85;line-height:1.35;margin-top:1px}
.row .val{font-variant-numeric:tabular-nums;font-weight:700;font-size:15.5px;min-width:2.6ch;text-align:right}
.row:not(:disabled):hover{background:var(--lavande-pale)}
.row.avail .val{color:var(--corail)}
.row.avail.zero .val{color:var(--encre-doux);opacity:.55}
.row.done{cursor:default;background:rgba(245,241,250,.65)}
.row.done .lab{opacity:.5}
.row:not(.done):not(.avail) .val{opacity:.25}
.row:disabled{cursor:not-allowed}
.row:focus-visible{outline:2px solid var(--corail);outline-offset:-2px}

.totals{border-top:1px solid var(--ligne-forte);background:var(--lavande-pale)}
.trow{display:flex;justify-content:space-between;gap:12px;padding:7px 15px;font-size:12.5px;color:var(--encre-doux)}
.trow b{font-variant-numeric:tabular-nums;color:var(--encre);font-weight:700}
.trow.big{font-size:15px;color:var(--encre);padding:12px 15px;border-top:1px solid var(--ligne)}
.trow.big b{font-size:25px;color:var(--corail);line-height:1}
.gauge{height:4px;background:rgba(61,53,88,.08);margin:0 15px 9px;border-radius:999px;overflow:hidden}
.gauge i{display:block;height:100%;background:var(--corail);transition:width .35s;border-radius:999px}
.gauge.full i{background:var(--lavande-fonce)}

.scoreboard{border-top:1px solid var(--ligne-forte);background:rgba(245,241,250,.8)}
.sb-row{display:flex;justify-content:space-between;gap:10px;padding:8px 15px;font-size:13px;border-bottom:1px solid var(--ligne)}
.sb-row:last-child{border-bottom:0}
.sb-row.active{background:rgba(212,196,240,.45);color:var(--encre)}
.sb-row.active .nm::before{content:"▸ ";color:var(--corail)}
.sb-row .nm{color:var(--encre-doux);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-row.active .nm{color:var(--encre);font-weight:700}
.sb-row b{font-variant-numeric:tabular-nums}

/* ---------- setup joueurs ---------- */
.setup{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-bottom:22px;font-size:13px;color:var(--encre-doux)}
.setup label{font-size:11px;text-transform:uppercase;letter-spacing:.11em;font-weight:700}
.pill{
  appearance:none;background:var(--blanc);color:var(--encre-doux);
  border:1px solid var(--ligne);padding:6px 13px;font:inherit;font-size:13px;cursor:pointer;
  border-radius:999px;
  transition:background .14s,color .14s,border-color .14s;
}
.pill:hover{color:var(--encre);border-color:var(--lavande-fonce)}
.pill[aria-pressed="true"]{background:var(--lavande-fonce);color:var(--blanc);border-color:var(--lavande-fonce);font-weight:700}

/* ==========================================================
   PAGES DE RÈGLES
   ========================================================== */
.doc{padding:44px 0 70px;display:grid;grid-template-columns:minmax(0,1fr) 244px;gap:52px;align-items:start}
@media(max-width:900px){.doc{grid-template-columns:1fr;gap:30px}}
.doc-main{
  max-width:68ch;
  background:var(--blanc);border:1px solid var(--ligne);
  border-radius:calc(var(--rayon) + 2px);box-shadow:var(--ombre);
  padding:36px 32px;
}
@media(max-width:600px){.doc-main{padding:28px 20px}}
.doc-main h1{font-size:clamp(34px,5.5vw,54px);letter-spacing:-.018em;margin-bottom:10px}
.doc-main .origin{font-size:11px;text-transform:uppercase;letter-spacing:.13em;color:var(--lavande-fonce);font-weight:700;margin-bottom:6px}
.doc-main .lede{margin-bottom:34px}
.doc-main h2{font-size:25px;margin:38px 0 13px;letter-spacing:-.01em}
.doc-main h3{font-size:18px;margin:24px 0 7px}
.doc-main p{margin-bottom:13px;color:var(--encre-doux)}
.doc-main p strong{color:var(--encre);font-weight:700}
.doc-main ol,.doc-main ul{margin:0 0 15px 0;padding-left:0;list-style:none}
.doc-main ol li{
  counter-increment:step;position:relative;padding-left:36px;margin-bottom:10px;color:var(--encre-doux);
}
.doc-main ol{counter-reset:step}
.doc-main ol li::before{
  content:counter(step);position:absolute;left:0;top:1px;
  width:23px;height:23px;display:grid;place-items:center;
  border:1.5px solid var(--lavande-fonce);color:var(--lavande-fonce);
  font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;border-radius:50%;
}
.doc-main ul li{position:relative;padding-left:20px;margin-bottom:9px;color:var(--encre-doux)}
.doc-main ul li::before{content:"";position:absolute;left:2px;top:10px;width:7px;height:1.5px;background:var(--corail);border-radius:1px}

.combos{width:100%;border-collapse:collapse;margin:16px 0 22px;font-size:14px}
.combos th{
  text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--encre-doux);font-weight:700;padding:9px 12px;
  border-bottom:1px solid var(--ligne-forte);
}
.combos td{padding:10px 12px;border-bottom:1px solid var(--ligne);color:var(--encre-doux);vertical-align:top}
.combos td:first-child{color:var(--encre);font-weight:700;white-space:nowrap}
.combos td:last-child{text-align:right;font-variant-numeric:tabular-nums;color:var(--corail);white-space:nowrap;font-weight:700}
.combos tr:hover td{background:var(--lavande-pale)}

.faq-item{border-top:1px solid var(--ligne);padding:16px 0}
.faq-item h3{font-size:16.5px;margin:0 0 5px;color:var(--encre)}
.faq-item p{margin:0;font-size:14.5px;color:var(--encre-doux)}

.doc-aside{position:sticky;top:80px;font-size:13.5px}
@media(max-width:900px){.doc-aside{position:static}}
.aside-box{
  background:var(--blanc);border:1px solid var(--ligne);
  border-radius:var(--rayon);box-shadow:var(--ombre);
  padding:17px 16px;margin-bottom:15px;
}
.aside-box h4{
  font-family:var(--sans);font-size:10px;text-transform:uppercase;letter-spacing:.13em;
  color:var(--lavande-fonce);font-weight:700;margin-bottom:10px;
}
.aside-box dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13px}
.aside-box dt{color:var(--encre-doux)}
.aside-box dd{color:var(--encre);text-align:right;font-weight:700}
.aside-box .btn{width:100%;text-align:center;display:block;padding:12px;text-decoration:none;font-size:14px}
.aside-nav a{display:block;padding:6px 0;color:var(--encre-doux);text-decoration:none;font-size:13.5px;border-bottom:1px solid var(--ligne)}
.aside-nav a:last-child{border-bottom:0}
.aside-nav a:hover{color:var(--encre)}

/* ---------- pied ---------- */
footer{
  border-top:1px solid var(--ligne);
  padding:30px 0 44px;font-size:13px;color:var(--encre-doux);
  background:rgba(255,251,247,.55);
}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
footer a{color:var(--encre-doux);text-decoration:none}
footer a:hover{color:var(--encre)}
footer nav{display:flex;gap:16px;flex-wrap:wrap}

.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- enregistrement score (fin de partie) ---------- */
.save-panel{margin-top:18px}
.save-panel[hidden]{display:none}
.save-card{
  background:var(--lavande-pale);border:1px solid var(--ligne);
  border-radius:var(--rayon);padding:16px 17px;
}
.save-lead{font-size:13.5px;color:var(--encre-doux);margin-bottom:12px}
.save-lead em{color:var(--encre);font-style:normal;font-weight:700}
.save-list{display:flex;flex-direction:column;gap:8px}
.save-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.save-row.saved{opacity:.75}
.save-input{
  flex:1 1 140px;min-width:0;
  appearance:none;background:var(--blanc);color:var(--encre);
  border:1px solid var(--ligne);padding:8px 11px;font:inherit;font-size:13.5px;
  border-radius:10px;
}
.save-input:focus{outline:2px solid var(--corail);outline-offset:1px;border-color:transparent}
.save-score{
  font-variant-numeric:tabular-nums;font-weight:700;color:var(--corail);
  font-size:14px;min-width:5.5ch;
}
.save-name{color:var(--encre);font-weight:700;flex:1 1 100px}
.save-ok{
  font-size:11px;text-transform:uppercase;letter-spacing:.1em;
  font-weight:700;color:var(--lavande-fonce);
}
.save-foot{margin-top:12px;font-size:13px}
.save-foot a{color:var(--encre-doux)}
.save-foot a:hover{color:var(--encre)}
.save-msg{margin-top:10px;font-size:13px}
.save-msg.ok{color:var(--lavande-fonce)}
.save-msg.err{color:#D96B6B}
.save-msg[hidden]{display:none}

/* ---------- page classements ---------- */
.board-page{padding:44px 0 70px}
.board-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:20px;flex-wrap:wrap;margin-bottom:28px;
}
.board-head h1{font-size:clamp(34px,5.5vw,54px);letter-spacing:-.018em;margin:4px 0 8px}
.board-head .lede{margin:0}
.board-tabs{margin-bottom:28px}
.board-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:720px){.board-grid{grid-template-columns:1fr}}
.board-panel{
  background:var(--blanc);border:1px solid var(--ligne);
  border-radius:var(--rayon);box-shadow:var(--ombre);
  padding:20px 18px 16px;
}
.board-panel h2{
  font-size:20px;letter-spacing:-.01em;margin-bottom:14px;
  padding-bottom:10px;border-bottom:1px solid var(--ligne);
}
.board-empty{color:var(--encre-doux);font-size:14px;padding:8px 0 4px}
.board-list{list-style:none;margin:0;padding:0}
.board-list li{
  display:grid;grid-template-columns:2.2ch 1fr auto;gap:12px;align-items:center;
  padding:9px 2px;border-bottom:1px solid var(--ligne);
  font-size:14.5px;
}
.board-list li:last-child{border-bottom:0}
.board-list .rank{
  font-variant-numeric:tabular-nums;font-weight:700;color:var(--lavande-fonce);
  font-size:13px;
}
.board-list .pseudo{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--encre);
}
.board-list .pts{
  font-variant-numeric:tabular-nums;font-weight:700;color:var(--encre);
}

/* ---------- contenu prose accueil ---------- */
.doc-main ol li{color:var(--encre-doux)}
.section .doc-main{
  max-width:64ch;
  background:var(--blanc);border:1px solid var(--ligne);
  border-radius:var(--rayon);box-shadow:var(--ombre);
  padding:28px 26px;
}