/* ═══════════════════════════════════════════════════════════════════
   NUÉE DE TÉMOINS — la table du Duel des Missions

   Même identité que l'album : Bodoni et Spectral, voûte d'outremer,
   cartes vélin. La table suit le thème du système ; les cartes restent
   claires, comme des images pieuses posées sur une nappe.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --sol:#E3E6EE; --surface:#EDEFF5; --nappe:#D9DEEA; --texte:#1A2040; --doux:#525A78; --filet:#C3C9D8;
  --accent:#1F2A5A; --accent-contraste:#F4F1E8; --or-texte:#8C6A2A; --rubrique:#A63A2C; --ok:#2F6B55;
  --velin:#FBF7EE; --encre:#1F2A5A; --encre-douce:#4A4F68; --voute:#0E1430; --or:#C9A55A;
  --display:"Bodoni Moda","Didot",Georgia,serif;
  --corps:"Spectral",Georgia,"Times New Roman",serif;
  --sc:"Spectral SC","Spectral",Georgia,serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --sol:#0E1228; --surface:#161C37; --nappe:#121833; --texte:#E6E3D9; --doux:#A3A9C2; --filet:#2A3257;
    --accent:#D4B46C; --accent-contraste:#10152B; --or-texte:#D4B46C; --rubrique:#E38B73; --ok:#7CC3A2;
  }
}
:root[data-theme="dark"]{
  --sol:#0E1228; --surface:#161C37; --nappe:#121833; --texte:#E6E3D9; --doux:#A3A9C2; --filet:#2A3257;
  --accent:#D4B46C; --accent-contraste:#10152B; --or-texte:#D4B46C; --rubrique:#E38B73; --ok:#7CC3A2;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:var(--sol);color:var(--texte);font-family:var(--corps);font-size:16px;line-height:1.5;min-height:100vh}
button{font:inherit;color:inherit;cursor:pointer}
button:disabled{cursor:default}
:focus-visible{outline:2px solid var(--rubrique);outline-offset:2px}
.num{font-variant-numeric:tabular-nums lining-nums}
[hidden]{display:none!important}

.btn{background:var(--accent);color:var(--accent-contraste);border:0;border-radius:3px;padding:9px 18px;font-family:var(--sc);letter-spacing:.06em;font-size:15px}
.btn:disabled{opacity:.45}
.btn-doux{background:transparent;border:1px solid var(--filet);border-radius:3px;padding:8px 14px;font-family:var(--sc);letter-spacing:.05em;font-size:14px;color:var(--doux)}
.rubrique{font-family:var(--sc);font-size:13.5px;letter-spacing:.14em;color:var(--rubrique)}

/* ── En-tête ── */
.haut{background:var(--voute);color:#DCD6C6;display:flex;align-items:center;gap:12px 24px;flex-wrap:wrap;padding:10px 20px}
.marque{display:grid;text-decoration:none;color:inherit;line-height:1.05}
.marque-sur{font-family:var(--sc);font-size:12.5px;letter-spacing:.14em;color:#D9BD7A}
.marque-nom{font-family:var(--display);font-style:italic;font-size:25px;color:#F6F0E0}
.etat{flex:1;min-width:14ch;font-family:var(--sc);letter-spacing:.06em;font-size:15px;color:#C9CEE3;text-align:center}
.etat b{color:#F1E6C4;font-weight:600}
.haut-actions{display:flex;gap:8px}
.haut-actions button{background:transparent;border:1px solid #3A4575;color:#E4DCC6;border-radius:3px;padding:6px 12px;font-family:var(--sc);letter-spacing:.05em;font-size:14px}
.haut-actions button:hover{border-color:#D9BD7A}

/* ── Disposition ── */
.jeu{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;max-width:1400px;margin:0 auto;padding-inline:16px;padding-block:14px 24px}
.table{display:grid;gap:10px;min-width:0}
.adversaire{display:flex;justify-content:space-between;gap:12px;font-family:var(--sc);font-size:14px;letter-spacing:.04em;color:var(--doux)}
.adversaire b{color:var(--texte);font-weight:600}

/* ── Missions ── */
.plateau{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.mission{background:var(--nappe);border:1px solid var(--filet);border-radius:4px;display:grid;grid-template-rows:minmax(118px,auto) auto minmax(150px,auto);min-width:0;overflow:hidden}
.cote{padding:8px;display:grid;gap:6px;align-content:start}
.cote-tete{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-family:var(--sc);font-size:13px;letter-spacing:.04em;color:var(--doux)}
.tot{font-family:var(--display);font-size:20px;font-weight:600;color:var(--texte)}
.tot.atteint{color:var(--ok)}
.tot small{font-family:var(--sc);font-size:12px;color:var(--doux);font-weight:500}
.jauge{height:4px;background:var(--filet);position:relative;border-radius:2px}
.jauge i{position:absolute;inset:0 auto 0 0;background:var(--c);border-radius:2px;transition:width .4s ease}
.jauge u{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--texte);text-decoration:none}
.tuiles{display:grid;gap:4px}
.plaque{background:var(--velin);color:var(--encre);border-block:3px solid var(--c);padding:8px 10px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-items:center}
.plaque h3{font-family:var(--display);font-style:italic;font-weight:500;font-size:16.5px;line-height:1.15}
.plaque .aff{grid-column:1;font-family:var(--sc);font-size:12.5px;letter-spacing:.04em;color:var(--encre-douce)}
.plaque .aff b{color:var(--c);font-weight:600}
.seuil{grid-row:1 / span 2;grid-column:2;width:46px;height:46px;border-radius:50%;border:2px solid var(--c);display:grid;place-items:center;align-content:center;line-height:1}
.seuil b{font-family:var(--display);font-size:20px;font-weight:700;color:var(--c)}
.seuil span{font-family:var(--sc);font-size:9.5px;letter-spacing:.08em;color:var(--encre-douce)}
.etats{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:4px}
.etats span{font-family:var(--sc);font-size:11.5px;letter-spacing:.03em;border:1px solid var(--c);color:var(--encre);padding:0 6px;border-radius:9px}
.cote-moi{border-top:1px solid transparent}
.cote-moi.cible{background:color-mix(in srgb,var(--c) 10%,var(--nappe));outline:2px dashed var(--c);outline-offset:-4px;cursor:pointer}
.cote-moi.interdit{opacity:.65}
.poser-ici{justify-self:center;background:var(--velin);color:var(--encre);border:1px solid var(--c);border-radius:3px;padding:5px 12px;font-family:var(--sc);font-size:13.5px;letter-spacing:.04em}
.raison{font-size:13px;color:var(--doux);font-style:italic;text-align:center}

/* Une tuile = un saint posé */
.tuile{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px;width:100%;text-align:left;background:var(--velin);color:var(--encre);border:1px solid var(--filet);border-left:4px solid var(--sc-c);border-radius:3px;padding:3px 5px 3px 7px;font-size:14px;line-height:1.15;min-height:36px}
.tuile .n{overflow-wrap:anywhere}
.tuile .n small{display:block;font-family:var(--sc);font-size:11px;letter-spacing:.03em;color:var(--encre-douce)}
.pts{width:24px;height:24px;display:grid;place-items:center;transform:rotate(45deg) scale(.8);background:var(--sc-c);flex:none}
.pts b{transform:rotate(-45deg);color:#fff;font-family:var(--display);font-weight:700;font-size:15px}
.tuile.dos,.tuile.a-reveler{background-color:var(--voute);background-image:radial-gradient(circle at 50% 50%,rgba(201,165,90,.35) 0 2px,transparent 3px);background-size:14px 14px;border-color:#2A3561;border-left-color:#C9A55A;color:#C9CEE3;font-family:var(--sc);font-size:12.5px;letter-spacing:.06em}
.tuile.a-reveler>*{visibility:hidden}
.tuile.revelee{animation:retourner .45s ease}
.tuile.prevue{background:transparent;border-style:dashed;color:var(--texte)}
.tuile.prevue .n small{color:var(--doux)}
.tuile.eclaire{box-shadow:0 0 0 2px var(--or)}
.retirer{border:0;background:transparent;color:var(--doux);font-size:18px;line-height:1;padding:0 4px}
@keyframes retourner{from{transform:rotateY(90deg)}to{transform:none}}

/* ── La pose ── */
.pose{background:var(--surface);border:1px solid var(--filet);border-radius:4px;padding:10px;display:grid;gap:10px}
.pose-tete{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.elan{display:flex;align-items:center;gap:6px;font-family:var(--sc);letter-spacing:.05em;font-size:14.5px}
.elan i{width:14px;height:14px;border-radius:50%;border:2px solid var(--or);display:inline-block}
.elan i.plein{background:var(--or)}
.consigne{flex:1;min-width:20ch;color:var(--doux);font-size:15px}
.pose-actions{display:flex;gap:8px;margin-left:auto}
.main{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 8px}

/* Une carte en main */
.carte-btn{background:none;border:0;padding:0;flex:none;border-radius:8px;text-align:left;transition:transform .15s ease}
.carte-btn[aria-pressed="true"]{transform:translateY(-8px)}
.carte-btn[aria-pressed="true"] .carte{box-shadow:0 0 0 3px var(--or),0 6px 16px rgba(8,12,36,.3)}
.carte-btn.posee{opacity:.35}
.carte-btn.trop-chere .carte{filter:saturate(.35)}
.carte{width:190px;height:266px;background:var(--velin);color:var(--encre);border:2px solid var(--c);border-radius:8px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 2px 6px rgba(8,12,36,.18)}
.c-bande{background:var(--c);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:4px;padding:4px 6px;min-height:34px}
.c-cout{width:25px;height:25px;border-radius:50%;background:var(--velin);color:var(--c);display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:15px;flex:none}
.c-ray{width:20px;height:20px;transform:rotate(45deg);background:var(--velin);display:grid;place-items:center;flex:none;margin-right:3px}
.c-ray b{transform:rotate(-45deg);color:var(--c);font-family:var(--display);font-weight:700;font-size:14px}
.c-vide{width:25px}
.c-fam{font-family:var(--sc);font-size:10.5px;letter-spacing:.06em;text-align:center;line-height:1.05;flex:1}
.c-nom{padding:6px 7px 0;text-align:center;line-height:1.05}
.c-pre{display:block;font-family:var(--sc);font-size:10px;letter-spacing:.14em;color:var(--encre-douce)}
.c-titre{display:block;font-family:var(--display);font-style:italic;font-weight:500;font-size:16px}
.c-effet{margin:6px 7px 0;padding-top:5px;border-top:1px solid var(--c);font-size:12px;line-height:1.28;overflow:hidden}
.c-effet b{display:block;font-family:var(--sc);font-weight:600;font-size:11.5px;letter-spacing:.03em;color:var(--c)}
.c-effet i{font-family:var(--sc);font-style:normal;font-size:10.5px;color:var(--encre-douce)}
.c-pied{margin-top:auto;padding:3px 7px 5px;display:flex;justify-content:space-between;font-family:var(--sc);font-size:10.5px;letter-spacing:.04em;color:var(--encre-douce)}
.c-pied .v{color:var(--c);font-weight:600}
.carte.evt{--c:#4A4F68}

/* ── Récit ── */
.recit-zone{position:sticky;top:10px;align-self:start;max-height:calc(100vh - 20px);display:grid;grid-template-rows:auto minmax(0,1fr);background:var(--surface);border:1px solid var(--filet);border-radius:4px}
.recit-zone h2{font-family:var(--display);font-style:italic;font-weight:500;font-size:20px;padding:10px 12px 6px;border-bottom:1px solid var(--filet)}
.recit{list-style:none;overflow-y:auto;padding:6px 12px 12px;display:grid;gap:0;align-content:start;font-size:14.5px}
.recit li{padding:6px 0;border-bottom:1px solid var(--filet);animation:paraitre .3s ease}
.recit li.tour{font-family:var(--sc);letter-spacing:.05em;color:var(--or-texte);border-bottom-color:var(--or-texte);padding-top:12px}
.recit li.titre,.recit li.pioche{color:var(--doux);font-size:13.5px}
.recit li.evt{color:var(--rubrique)}
.recit li.fin{font-family:var(--display);font-style:italic;font-size:17px;color:var(--texte)}
.recit li.lui{padding-left:10px;border-left:2px solid var(--filet)}
@keyframes paraitre{from{opacity:.2;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ── Choix pendant la résolution ── */
.choix{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:20;width:min(760px,calc(100% - 32px));background:var(--velin);color:var(--encre);border:2px solid var(--or);border-radius:6px;box-shadow:0 10px 40px rgba(8,12,36,.35);padding:14px 16px;display:grid;gap:10px}
.choix-texte{font-family:var(--display);font-style:italic;font-size:18px;line-height:1.25}
.choix-options{display:flex;flex-wrap:wrap;gap:8px;max-height:52vh;overflow:auto}
.choix-options .opt{background:#fff;border:1px solid #C3C9D8;border-radius:3px;padding:7px 12px;color:var(--encre);text-align:left}
.choix-options .opt:hover{border-color:var(--encre)}
.choix-actions{display:flex;justify-content:flex-end;gap:8px}
.choix .btn{background:#1F2A5A;color:#F4F1E8}
.choix .btn-doux{color:#4A4F68;border-color:#C3C9D8}

/* ── Fenêtres ── */
.dlg{margin:auto;border:0;border-radius:6px;background:var(--sol);color:var(--texte);width:min(640px,calc(100% - 32px));max-height:calc(100vh - 32px);box-shadow:0 20px 60px rgba(8,12,36,.45)}
.dlg-large{width:min(760px,calc(100% - 32px))}
.dlg::backdrop{background:rgba(8,12,36,.62)}
.dlg-corps{padding:22px 24px;display:grid;gap:10px}
.dlg h1{font-family:var(--display);font-style:italic;font-weight:500;font-size:40px;line-height:1}
.dlg h2{font-family:var(--display);font-weight:500;font-size:28px;line-height:1.1;text-wrap:balance}
.dlg h3{font-family:var(--display);font-weight:500;font-size:19px;margin-top:8px}
.chapeau{max-width:62ch}
.dlg-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin-top:6px}
.decks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.deck-choix{background:var(--surface);border:1px solid var(--filet);border-radius:4px;padding:12px;text-align:left;display:grid;gap:4px;align-content:start}
.deck-choix:hover{border-color:var(--accent)}
.deck-choix strong{font-family:var(--display);font-style:italic;font-weight:500;font-size:21px}
.deck-choix span{font-size:14px;color:var(--doux)}
.deck-choix em{font-family:var(--sc);font-style:normal;font-size:13px;letter-spacing:.04em;color:var(--rubrique);margin-top:4px}
.comment{margin-top:6px;border-top:1px solid var(--filet);padding-top:8px}
.comment summary{font-family:var(--sc);letter-spacing:.05em;cursor:pointer}
.comment ol,.regle-texte ol,.regle-texte ul{padding-left:1.2em;display:grid;gap:6px;margin-top:6px}
.regle-texte{display:grid;gap:8px;max-width:66ch}
.fiche-grille{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start}
.fiche-grille .carte{width:190px;height:265px}
.lignes{display:grid;gap:2px;font-size:15px}
.lignes div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--filet);padding:3px 0}
.lignes div:last-child{font-weight:600;border-bottom:0}
.vie{font-style:italic;color:var(--doux);max-width:60ch}
.resultats{display:grid;gap:6px}
.resultats div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;border-bottom:1px solid var(--filet);padding:6px 0}
.resultats .ok{color:var(--ok);font-family:var(--sc);letter-spacing:.03em}
.resultats .non{color:var(--doux);font-family:var(--sc);letter-spacing:.03em}

/* ── La Carrière : score et Nuée ── */
.score{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.camp{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;background:var(--surface);border:1px solid var(--filet);border-radius:4px;padding:6px 10px}
.camp .qui{font-family:var(--sc);letter-spacing:.05em;font-size:14.5px}
.pips{display:flex;gap:4px}
.pips i{width:16px;height:16px;border-radius:50%;border:2px solid var(--or);display:inline-block}
.pips i.plein{background:var(--or)}
.camp .nuee{display:flex;flex-wrap:wrap;align-items:center;gap:3px;font-size:13.5px;color:var(--doux)}
.point-vertu{width:11px;height:11px;border-radius:2px;background:var(--c);display:inline-block}
.recit li.mission{font-family:var(--display);font-style:italic;font-size:16px;color:var(--texte);border-left:3px solid var(--or);padding-left:8px}
.recit li.nuee{color:var(--or-texte);font-size:13.5px}
.recit li.nouvelle{font-family:var(--sc);letter-spacing:.03em;font-size:13.5px;color:var(--doux)}
.modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.mode-choix{background:var(--surface);border:1px solid var(--filet);border-radius:4px;padding:12px;text-align:left;display:grid;gap:4px;align-content:start}
.mode-choix[aria-pressed="true"]{border:2px solid var(--or);padding:11px}
.mode-choix strong{font-family:var(--display);font-style:italic;font-weight:500;font-size:21px}
.mode-choix span{font-size:14px;color:var(--doux)}
.mode-choix em{font-family:var(--sc);font-style:normal;font-size:13px;letter-spacing:.04em;color:var(--or-texte);margin-top:4px}
@media (max-width:760px){ .score,.modes{grid-template-columns:minmax(0,1fr)} }

.annonce{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:30;background:var(--voute);color:#F1E6C4;padding:9px 16px;border-radius:4px;font-size:15px;box-shadow:0 6px 20px rgba(8,12,36,.35)}

@media (max-width:1000px){
  .jeu{grid-template-columns:minmax(0,1fr)}
  .recit-zone{position:static;max-height:320px}
}
@media (max-width:760px){
  .plateau{grid-template-columns:minmax(0,1fr)}
  .mission{grid-template-rows:auto auto auto}
  .decks,.fiche-grille{grid-template-columns:minmax(0,1fr)}
  .etat{order:3;flex-basis:100%;text-align:left}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}