/* =========================================================
  Les Arcanes de Cookie — arcanescookie.css (base globale)
  Variables, reset, layout, header/nav, composants génériques
========================================================= */

/* -------------------- Variables -------------------- */
:root{
  /* couleurs */
  --fond:#0b0a0f;
  --fond-2:#111018;
  --bloc:#16141b;
  --bord:#262334;

  --txt:#f5f3ea;
  --muted:#b7b1a6;

  --accent:#8d6bff;
  --accent-2:#b79eff;
  --accent-3:#5f47d6;

  --doré:#d4b26a;

  /* effets */
  --radius:16px;
  --radius-sm:12px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --ring:0 0 0 2px color-mix(in oklab, var(--accent), white 20%);

  /* largeur max */
  --w:1100px;

  --header-h: 0px;   /* hauteur mesurée du header */
  --player-h: 72px; /* hauteur approximative de la barre lecteur */
}

/* -------------------- Reset + base -------------------- */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--txt);
  background:
    radial-gradient(1200px 700px at 50% -200px, #151320 0%, transparent 60%),
    radial-gradient(800px 500px at 10% 120%, #131120 0%, transparent 55%),
    var(--fond);
  font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.6;
  letter-spacing:.2px;
}

/* Titres (IM Fell pour l’ambiance grimoire) */
h1,h2,h3,h4{
  font-family:"IM Fell English SC", Georgia, "Times New Roman", serif;
  line-height:1.2;
  margin:0 0 .6rem;
  color:var(--txt);
  text-shadow:0 1px 0 rgba(0,0,0,.25);
}
h1{font-size:clamp(2rem, 3.2vw + 1rem, 3rem)}
h2{font-size:clamp(1.4rem, 1.4vw + 1rem, 2rem)}
h3{font-size:1.25rem}

/* Texte & liens */
p{margin:.6rem 0 1rem; color:var(--muted)}
a{color:var(--accent); text-decoration:none}
a:hover{color:var(--accent-2)}
a:focus-visible{outline:none; box-shadow:var(--ring)}

/* -------------------- Helpers layout -------------------- */
.container{width:min(100%, var(--w)); margin-inline:auto; padding-inline:clamp(12px,3vw,24px)}
.section{padding-block:clamp(28px,6vw,64px)}
.center{display:grid; place-items:center}
.right{margin-left:auto}
.stack>*+*{margin-top:12px}
.grid{display:grid}
.g-2{gap:16px}
.g-3{gap:24px}
.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){ .cols-2,.cols-3{grid-template-columns:1fr} }

/* === Lecteur flottant (global) === */
.fp{
  position: fixed; right: 18px; bottom: 18px; z-index: 9999;
  display: grid; gap: 10px; align-items: end; justify-items: end;
}

/* Bouton rond flottant */
.fp-toggle{
  display:inline-grid; place-items:center;
  width:48px; height:48px; border-radius:50%;
  backdrop-filter: blur(6px);
  background: rgba(50, 40, 90, 0.5);
  border:1px solid rgba(255,255,255,.15);
  color:#fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  cursor:pointer;
  transition: all .25s ease;
}
.fp-toggle:hover{
  transform: translateY(-1px);
  background: rgba(90, 70, 150, 0.7);
  box-shadow: 0 8px 22px rgba(0,0,0,.42);
}

.fp-toggle[aria-expanded="true"]{
  background: rgba(120, 90, 180, 0.7);
  box-shadow: 0 0 0 1px rgba(255,255,255,.15), 0 0 16px rgba(120,90,180,.4);
}

.fp-toggle svg{
  width:26px;
  height:26px;
  color:#fff;
  opacity:.9;
  transition: transform .2s ease, opacity .2s ease;
}
.fp-toggle:hover svg{
  opacity:1;
  transform: scale(1.06);
}

.fp-now{ font-size:.9rem; opacity:.85; }

/* Panneau */
.fp-panel{
  width: min(92vw, 360px);
  background: color-mix(in oklab, #0d0b1a 86%, var(--accent,#b89b41) 14%);
  border:1px solid color-mix(in oklab, var(--accent,#b89b41) 30%, #000 70%);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,.5);
  overflow: clip;
  opacity: 0; transform: translateY(10px) scale(.98);
  transition: opacity .18s ease, transform .18s ease;
}
.fp.open .fp-panel{ opacity:1; transform: translateY(0) scale(1); }
.fp-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; background: rgba(255,255,255,.04);
}
.fp-title{ font: 600 14px/1.1 Poppins,system-ui,sans-serif; color:#fff; letter-spacing:.2px; }
.fp-close{
  width:28px; height:28px; border-radius:8px; border:1px solid rgba(255,255,255,.12);
  background:transparent; color:#fff; cursor:pointer;
}

.fp-main{ padding:12px; display:grid; gap:12px; color:#ddd; }
.fp-controls{ display:flex; gap:10px; align-items:center; justify-content:center; }
.fp-btn{
  min-width:40px; height:36px; padding:0 10px; border-radius:10px;
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04);
  color:#fff; cursor:pointer;
}
.fp-play{ font-weight:700; }

.fp-progress{ display:grid; grid-template-columns:auto 1fr auto; gap:8px; align-items:center; }
#fp-seek{ width:100%; appearance:none; background:transparent; }
#fp-seek::-webkit-slider-runnable-track{ height:6px; border-radius:999px; background:linear-gradient(90deg,#fff 0 var(--fpp,0%), rgba(255,255,255,.25) var(--fpp,0%) 100%); }
#fp-seek::-webkit-slider-thumb{ appearance:none; width:14px; height:14px; border-radius:50%; background:#fff; margin-top:-4px; }
#fp-seek::-moz-range-track{ height:6px; border-radius:999px; background:linear-gradient(90deg,#fff 0 var(--fpp,0%), rgba(255,255,255,.25) var(--fpp,0%) 100%); }
#fp-seek::-moz-range-thumb{ width:14px; height:14px; border-radius:50%; background:#fff; border:none; }
.fp-time{ font: 500 12px/1 Poppins,system-ui; color:#cfcfcf; }

.fp-bottom{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.fp-vol{ display:flex; align-items:center; gap:8px; font-size:12px; color:#cfcfcf; }
#fp-volume{ width:110px; }
.fp-status{ font-size:12px; color:#aaa; }

/* Accessibilité visuelle */
.visually-hidden{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Mobile: rapprocher du bord si clavier/controls se superposent */
@media (max-width:480px){
  .fp{ right: 12px; bottom: 12px; }
  .fp-panel{ width: min(94vw, 360px); }
}

/* -------------------- Header & Nav -------------------- */
.header{
  position:sticky; top:0; z-index:80;
  backdrop-filter:blur(8px);
  background:color-mix(in oklab, var(--fond), transparent 35%);
  border-bottom:1px solid var(--bord);
}
.header .logo .mark{ display:block; border-radius:8px; }
.nav{display:flex; align-items:center; gap:10px; padding:10px 0}
.logo{
  display:flex; align-items:center; gap:10px; padding:6px 10px;
  border-radius:999px; color:var(--txt);
  font-family:"IM Fell English SC", serif;
}
.navlinks{display:flex; flex-wrap:wrap; gap:8px; margin-left:auto}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border:1px solid var(--bord); border-radius:999px;
  background:linear-gradient(180deg,#171421,#12101a);
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.03);
  color:var(--txt);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.pill:hover{
  border-color:color-mix(in oklab, var(--accent), var(--bord) 60%);
  box-shadow:0 0 0 3px rgba(141,107,255,.12), var(--shadow);
  transform:translateY(-1px);
}
.pill.is-active{
  background:linear-gradient(180deg,#1b1630,#151028);
  border-color:color-mix(in oklab, var(--accent), #000 30%);
}

/* Dropdown */
.dropdown{position:relative; display:inline-block}
.has-menu{position:relative; padding-right:26px}
.has-menu .chev{font-size:.9em; opacity:.8; margin-left:4px}
.navlinks{position:relative; z-index:55}
.menu a:visited{color:var(--txt)}
.menu{
  position:absolute; top:calc(100% + 6px); left:0;
  display:grid; gap:6px; min-width:220px;
  padding:10px; border:1px solid var(--bord); border-radius:12px;
  background:linear-gradient(180deg,#171421,#12101a);
  box-shadow:0 6px 16px rgba(0,0,0,.35), inset 0 -1px 0 rgba(255,255,255,.03);
  opacity:0; transform:translateY(-4px); pointer-events:none;
  transition:opacity .12s ease, transform .12s ease; z-index:60;
}
.menu a{
  display:block; padding:8px 10px; border-radius:8px; border:1px solid transparent;
  color:var(--txt); white-space:nowrap;
}
.menu a:hover,.menu a:focus{
  border-color:color-mix(in oklab, var(--accent), var(--bord) 60%);
  background:#151028;
}
.menu a.sub{padding-left:18px; color:color-mix(in oklab, var(--txt), var(--muted) 35%)}
.dropdown:hover .menu,
.dropdown:focus-within .menu,
.dropdown.open .menu{opacity:1; transform:translateY(0); pointer-events:auto}
.dropdown.active>.has-menu{
  background:linear-gradient(180deg,#1b1630,#151028);
  border-color:color-mix(in oklab, var(--accent), #000 30%);
}
@media (max-width:700px){
  .menu{min-width:200px; right:0; left:auto}
}

/* -------------------- Hero -------------------- */
.hero{text-align:center; padding-block:clamp(40px,8vw,96px)}
.hero .subtitle{color:var(--muted); margin-top:.4rem}
.cta-row{display:flex; gap:12px; justify-content:center; margin-top:18px}

/* -------------------- Cards & surfaces -------------------- */
.card{
  border:1px solid var(--bord);
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.06)),
    var(--bloc);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow);
}
.card h3{margin-bottom:.4rem}
.card .actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}

/* -------------------- Boutons -------------------- */
.btn{
  --btn-b:#211a35;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  height:40px; padding:0 16px;
  border-radius:12px; border:1px solid var(--bord);
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--accent), #fff 20%), var(--accent)),
    var(--btn-b);
  color:#0b0813; font-weight:600;
  box-shadow:0 6px 20px rgba(141,107,255,.25);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn:hover{transform:translateY(-1px); filter:saturate(1.05)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:none; box-shadow:var(--ring), 0 6px 20px rgba(141,107,255,.25)}

.btn-ghost{
  background:transparent; color:var(--txt);
  border:1px solid var(--bord); box-shadow:none;
}
.btn-ghost:hover{
  border-color:color-mix(in oklab, var(--accent), var(--bord) 60%);
  background:#141126;
}
.btn-small{height:34px; padding:0 12px; border-radius:10px}

/* -------------------- Badges / Chips -------------------- */
.chip,.tag{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  border:1px solid var(--bord);
  background:#141126; color:var(--muted);
  font-size:.85rem;
}
.tag-accent{
  color:var(--accent-2);
  border-color:color-mix(in oklab, var(--accent), var(--bord) 50%);
  background:#171235;
}

/* -------------------- Listes & tables légères -------------------- */
.list{display:grid; gap:10px}
.list li{
  padding:10px 12px; border:1px solid var(--bord); border-radius:12px; background:#13111a;
}

/* -------------------- Footer -------------------- */
.footer{
  border-top:1px solid var(--bord);
  color:var(--muted);
  text-align:center;
  padding:24px 0 40px;
}

/* -------------------- Formulaires -------------------- */
input,select,textarea{
  width:100%; background:#12101a; border:1px solid var(--bord); color:var(--txt);
  border-radius:10px; padding:10px 12px; outline:none;
}
input::placeholder,textarea::placeholder{color:color-mix(in oklab, var(--muted), #888 10%)}
input:focus,textarea:focus{box-shadow:var(--ring); border-color:color-mix(in oklab, var(--accent), var(--bord) 50%)}

/* -------------------- Médias -------------------- */
img{max-width:100%; height:auto; border-radius:12px}
figure{margin:0}

/* -------------------- Utilitaires -------------------- */
.muted{color:var(--muted)}
.accent{color:var(--accent)}
.gold{color:var(--doré)}
.hide{display:none !important}
.hr{height:1px; background:var(--bord); margin:18px 0; border:0}

/* Badge style “kicker” */
.kicker{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px; border-radius:999px; border:1px solid var(--bord);
  background:#12101a; color:var(--doré); font-weight:600; letter-spacing:.3px;
}

/* Touche/clavier */
.kbd{
  display:inline-block; padding:0 .5em;
  border:1px solid var(--bord); border-bottom-width:2px; border-radius:8px;
  background:#141126; color:var(--accent-2);
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  font-size:.95em;
}

/* -------------------- Accessibilité & motion -------------------- */
:focus-visible{outline:none}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
}

/* -------------------- Scrollbar (webkit) -------------------- */
*::-webkit-scrollbar{width:12px; height:12px}
*::-webkit-scrollbar-track{background:#0e0d13}
*::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#2b2440,#221c35);
  border:3px solid #0e0d13; border-radius:10px;
}
*::-webkit-scrollbar-thumb:hover{background:#3a2f5a}

/* -------------------- Responsif global -------------------- */
@media (max-width:700px){
  .nav{gap:6px}
  .navlinks{margin-left:0; width:100%; overflow:auto; padding-bottom:6px}
  .hero{padding-block:40px}
  .card{padding:14px}
  .btn{height:38px}
}

/* =========================================================
  Page Valshaari — Intro, Cours, Exercices, Lexique
========================================================= */

/* Intro (article + aside) */
.vls-cols{display:grid; grid-template-columns:1.2fr .8fr; gap:24px}
@media (max-width:900px){ .vls-cols{grid-template-columns:1fr} }

#intro aside .list{list-style:none; padding:0; margin:0; display:grid; gap:12px}
#intro aside .list>li{margin:0}
#intro aside .list>.card{margin:0; padding:14px}
#intro aside .list .actions{margin-top:8px}

.note{
  border:1px dashed color-mix(in oklab, var(--accent), var(--bord) 60%);
  background:#141126; border-radius:12px; padding:10px 12px; color:var(--muted); margin-top:10px;
}

/* Alphabet & sons */
.alpha-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:12px; margin-top:8px;
}
.alpha-grid>div{
  display:grid; grid-template-columns:auto 1fr; align-items:center; gap:8px 12px;
  padding:12px; border:1px solid var(--bord); border-radius:12px; background:#13111a;
}
.alpha{font-family:"IM Fell English SC", Georgia, serif; font-size:1.25rem; letter-spacing:.4px}
.pron{font-variant:small-caps; color:var(--accent-2)}
.alpha-grid small{color:var(--muted)}

/* Cours */
.course-cols{grid-template-columns:280px 1fr}
@media (max-width:1000px){ .course-cols{grid-template-columns:1fr} }

.sticky{position:sticky; top:84px}
.toc{margin:0; padding-left:1.2rem; display:grid; gap:6px}
.toc a{color:var(--txt)}
.toc a:hover{color:var(--accent-2)}

.lesson-head{
  display:flex; align-items:center; gap:12px; justify-content:space-between; flex-wrap:wrap; margin-bottom:8px;
}
.lesson-grid{display:grid; gap:16px; grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:800px){ .lesson-grid{grid-template-columns:1fr} }
.lesson .links{margin-top:10px}
.lesson .modeles{display:grid; gap:8px; padding-left:18px}

.callout{
  margin-top:12px;
  border:1px dashed color-mix(in oklab, var(--accent), var(--bord) 60%);
  background:#141126; border-radius:12px; padding:12px; color:var(--muted);
}

.step-nav{display:flex; gap:8px; align-items:center; margin-top:14px}
.step-nav .right{margin-left:auto}

/* Lexique */
.lex-cols{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.lex-list{list-style:none; padding:0; margin:0; display:grid; gap:6px}
.lex-list li{
  padding:6px 8px; border:1px solid var(--bord); border-radius:8px; background:#12101a;
  display:flex; justify-content:space-between; align-items:center;
}
.lex-list li .val{
  color:var(--accent-2);
  font-family:"IM Fell English SC", Georgia, serif;
  font-size:1.05rem;
}
#searchLexique{
  margin-top:8px; background:#13111a; border:1px solid var(--bord); color:var(--txt);
  border-radius:10px; padding:10px 12px; width:100%;
}
#searchLexique:focus{border-color:color-mix(in oklab, var(--accent), var(--bord) 60%); box-shadow:var(--ring)}

/* Exercices — layout & états */
.exo-cols{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.exo.card{display:flex; flex-direction:column; justify-content:space-between}
.exo .list{margin-top:6px}
.exo .note{
  border:1px dashed color-mix(in oklab, var(--accent), var(--bord) 60%);
  background:#141126; border-radius:12px; padding:10px 12px; color:var(--muted); margin-top:8px;
}
blockquote{
  margin:0; padding:10px 14px; border-left:3px solid var(--accent);
  background:#17132a; border-radius:8px; color:var(--muted);
}

/* QCM / Cloze / Ordre / Vrai-Faux / Associer */
.exo .actions{ gap:8px }
.exo .mini{ font-size:.9rem; margin:.2rem 0 0 }
.exo .opt{ cursor:pointer; text-align:left }
.exo .opt.is-picked{ outline:2px solid color-mix(in oklab, var(--accent), white 20%) }
.exo .opt.is-ok{ border-color:#2e4b2a; box-shadow:0 0 0 2px rgba(154,209,123,.2) }
.exo .opt.is-ko{ border-color:#5a3a2b; box-shadow:0 0 0 2px rgba(232,157,107,.2) }

/* grille des options QCM */
.exo-qcm-grid{ display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)) }

/* inputs cloze */
.cloze{ width:auto; min-width:120px; display:inline-block; margin:0 4px; }
.cloze.ok{ border-color:#2e4b2a; }
.cloze.ko{ border-color:#5a3a2b; }

/* ordre des mots */
.order-bank, .order-built{
  display:flex; flex-wrap:wrap; gap:8px; padding:10px; border:1px solid var(--bord);
  border-radius:10px; background:#13111a; min-height:48px;
}
.chip.tok.used{ opacity:.5 }
.chip.built{ cursor:pointer }

/* QCM set */
.qcmset-question .opt{ cursor:pointer; text-align:left }
.qcmset-question .opt.is-picked{ outline:2px solid color-mix(in oklab, var(--accent), white 20%) }
.qcmset-question .opt.is-ok{ border-color:#2e4b2a; box-shadow:0 0 0 2px rgba(154,209,123,.2) }
.qcmset-question .opt.is-ko{ border-color:#5a3a2b; box-shadow:0 0 0 2px rgba(232,157,107,.2) }
.exo-qcm-grid{ display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)) }

/* Vrai/Faux */
.vf-row{ border:1px solid var(--bord); border-radius:12px; background:#13111a; padding:10px; margin:8px 0 }
.vf-buttons{ display:flex; gap:8px; margin-top:6px }
.vf-buttons .btn.alt{ background:rgba(255,255,255,.05) }
.vf-buttons .btn.is-picked{ outline:2px solid color-mix(in oklab, var(--accent), white 20%) }

/* Associer */
.match-cols{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:10px }
.match-col{ min-height:120px }
.chip.match{ padding:6px 10px; border-radius:999px; border:1px solid var(--bord); background:#141126; color:var(--muted); margin:4px; }
.chip.match.is-picked{ outline:2px solid color-mix(in oklab, var(--accent), white 20%) }
.chip.match.used{ opacity:.5 }
.match-built .pair{ display:flex; align-items:center; gap:8px; padding:8px; border:1px dashed var(--bord); border-radius:10px; background:#12101a; margin:6px 0 }
@media (max-width:800px){ .match-cols{ grid-template-columns:1fr } }

/* =========================================================
   QCM — lisibilité du texte
========================================================= */
.qcmset-question .opt {
  color: #f2f2f2;               /* texte plus clair */
  font-weight: 500;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  transition: background .2s, border .2s, color .2s;
  font-family: "Poppins", sans-serif;
  font-size: 0.95rem;
}

.qcmset-question .opt:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.15);
}

.qcmset-question .opt.is-picked {
  background: rgba(255,215,100,0.1);
  border-color: #d6b86c;
  color: #f6e5b0;
}

.qcmset-question .opt.is-ok {
  background: rgba(90,170,90,0.15);
  border-color: #6bcf85;
  color: #aef3bc;
}

.qcmset-question .opt.is-ko {
  background: rgba(200,80,60,0.15);
  border-color: #e89d6b;
  color: #f3b8a0;
}

/* =========================================================
   Exos — spoilers (details/summary)
========================================================= */
.exo-wrap{
  margin:12px 0;
  border:1px solid var(--bord);
  border-radius:12px;
  background:#12101a;
  box-shadow:var(--shadow);
  overflow:hidden;
}

/* retirer le triangle natif pour uniformiser */
.exo-wrap > summary { list-style:none; }
.exo-wrap > summary::-webkit-details-marker{ display:none; }

.exo-summary{
  cursor:pointer;
  display:flex; align-items:center; gap:10px;
  padding:12px 14px;
  font-weight:600;
  color:var(--txt);
  background:linear-gradient(180deg,#171421,#12101a);
  border-bottom:1px solid var(--bord);
  user-select:none;
}
.exo-summary .exo-title{ font-family:"IM Fell English SC", Georgia, serif; font-size:1.05rem; }
.exo-summary .chev{ margin-left:auto; transition:transform .2s ease; opacity:.9; }

.exo-wrap[open] .exo-summary .chev{ transform:rotate(180deg); }

/* contenu : on retire juste la bordure top double et on arrondit le bas */
.exo-wrap .card.exo{
  border:0;                 /* pas de double bordure */
  border-radius:0 0 12px 12px;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.06)), var(--bloc);
}

/* =========================================================
  Page Tarot — tirages, cartes, flip
========================================================= */

.tarot-controls-grid{grid-template-columns:1fr auto; align-items:end}
@media (max-width:900px){ .tarot-controls-grid{grid-template-columns:1fr} }
.tarot-actions{display:flex; gap:10px; align-items:center; justify-content:flex-end}

/* Zone de tirage */
.tarot-spread{display:flex; justify-content:center; align-items:center; min-height:220px}
.tarot-grid{display:grid; gap:16px; justify-items:center; align-items:start}

/* Configurations */
.tarot-one{grid-template-columns:minmax(120px,160px)} /* 1 carte */
.tarot-ppf{grid-template-columns:repeat(3,minmax(120px,160px))} /* Passé/Présent/Futur */
.tarot-soc{grid-template-columns:repeat(3,minmax(120px,160px))} /* Situation/Obstacle/Conseil */

/* Croix (5 cartes) */
.tarot-croix{
  display:grid;
  grid-template-areas:
    ".   top    ."
    "left center right"
    ".   bottom .";
  grid-template-columns:repeat(3,minmax(100px,140px));
  grid-template-rows:repeat(3,auto);
  gap:14px; justify-items:center;
}
.tarot-croix .tarot-card-wrap:nth-child(1){grid-area:center}
.tarot-croix .tarot-card-wrap:nth-child(2){grid-area:left}
.tarot-croix .tarot-card-wrap:nth-child(3){grid-area:right}
.tarot-croix .tarot-card-wrap:nth-child(4){grid-area:top}
.tarot-croix .tarot-card-wrap:nth-child(5){grid-area:bottom}
@media (max-width:800px){
  .tarot-croix{
    grid-template-areas:
      "top" "left" "center" "right" "bottom";
    grid-template-columns:1fr;
  }
}
@media (max-width:800px){
  .tarot-ppf,.tarot-soc,.tarot-croix{grid-template-columns:repeat(auto-fit,minmax(100px,1fr))}
}

/* Carte + flip */
.tarot-card-wrap{display:grid; gap:8px; justify-items:center}
.tarot-label{text-align:center; font-variant:small-caps; color:var(--muted)}
.tarot-card{
  width:min(160px,40vw); aspect-ratio:3/5; position:relative;
  transform-style:preserve-3d; transition:transform .5s ease; cursor:pointer; border-radius:12px;
}
.tarot-card:focus{outline:none}
.tarot-card.flipped{transform:rotateY(180deg)}
.card-face{
  position:absolute; inset:0; width:100%; height:100%;
  backface-visibility:hidden; border-radius:12px; border:1px solid var(--bord); box-shadow:var(--shadow); object-fit:cover;
}
.card-face.front{transform:rotateY(180deg)}

.tarot-meaning{margin-top:16px}
.tarot-meaning h3{font-family:"IM Fell English SC", serif}
.meaning-list{display:grid; gap:10px; margin-top:8px}
.meaning-item{
  border:1px solid var(--bord); background:#12101a; border-radius:12px; padding:10px 12px;
}
.meaning-item h4{margin:0 0 4px 0; font-family:"IM Fell English SC", serif}
/* =========================================================
  Sang-Satô — Tomes, Personnages, Timeline
========================================================= */

/* Tomes */
.tome-card{display:grid; grid-template-columns:1.1fr .9fr; gap:18px}
@media (max-width:900px){ .tome-card{grid-template-columns:1fr} }
.tome-left h3{margin-top:0; display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.tome-left .muted{margin-top:6px}
.tome-stats{display:flex; flex-wrap:wrap; gap:10px; margin:12px 0}
.stat{
  display:grid; place-items:center; min-width:140px; padding:10px 12px;
  border:1px solid var(--bord); border-radius:12px; background:#141126;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.03); text-align:center;
}
.stat .label{display:block; color:var(--muted); font-size:.85rem; margin-bottom:2px}
.stat strong{font-weight:700}
.tome-right{display:flex; align-items:stretch}
.tome-hook{
  width:100%; background:#12101a;
  border-color:color-mix(in oklab, var(--bord), #000 10%);
}
.tome-hook h4{margin:0 0 6px 0; font-family:"IM Fell English SC", serif}
.tome-hook p{margin:0}

/* Personnages */
.persos-controls-grid{grid-template-columns:repeat(3,minmax(0,1fr)); align-items:end}
.persos-controls input,.persos-controls select{
  width:100%; background:#13111a; border:1px solid var(--bord); color:var(--txt); border-radius:10px; padding:10px 12px;
}
@media (max-width:900px){ .persos-controls-grid{grid-template-columns:1fr} }
.persos-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.perso{display:grid; grid-template-rows:auto 1fr; overflow:hidden; padding:0}
.perso .perso-cover img{width:100%; height:240px; object-fit:cover; border-bottom:1px solid var(--bord)}
.perso-body{padding:14px}
.perso-body .mini{list-style:none; padding:0; margin:8px 0; display:grid; gap:4px}
.perso-tags{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px}

/* Timeline */
.timeline{position:relative; display:grid; gap:18px; padding-left:22px}
.timeline::before{content:""; position:absolute; left:8px; top:0; bottom:0; width:2px; background:var(--bord)}
.t-era{margin:6px 0}
.t-era h2{margin:0}
.t-era+.t-item{margin-top:2px}
.t-item{position:relative; display:grid}
.t-dot{
  position:absolute; left:2px; top:16px; width:12px; height:12px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 3px rgba(141,107,255,.18);
}
.t-body{padding:12px}
.t-body h3{margin:0 0 6px 0}

/* =========================================================
  Page Cartes Collector — présentation & checklist
========================================================= */

.cards-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.pack .mini{list-style:none; padding:0; margin:8px 0; display:grid; gap:4px}
.pack .tags{display:flex; gap:8px; flex-wrap:wrap; margin-top:6px}

/* Raretés (points + tags) */
.rarity-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.rarity{display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:8px; vertical-align:middle}
.dot-common{background:#9ad17b}
.dot-uncommon{background:#7db9ff}
.dot-rare{background:#e89d6b}
.tag.rare-C{color:#9ad17b; border-color:#2e4b2a}
.tag.rare-U{color:#7db9ff; border-color:#263a57}
.tag.rare-R{color:#e89d6b; border-color:#5a3a2b}

/* Checklist cartes */
.cards-controls-grid{grid-template-columns:1fr 220px; align-items:end}
@media (max-width:800px){ .cards-controls-grid{grid-template-columns:1fr} }
.cards-controls input,.cards-controls select{
  width:100%; background:#13111a; border:1px solid var(--bord); color:var(--txt); border-radius:10px; padding:10px 12px;
}
.checklist{display:grid; gap:8px}
.checklist .row{
  display:grid; grid-template-columns:60px 1fr 120px 100px; gap:8px; align-items:center;
  padding:8px 10px; border:1px solid var(--bord); border-radius:10px; background:#12101a;
}
.checklist .row.head{background:transparent; border-color:transparent; color:var(--muted); font-weight:600}
@media (max-width:700px){ .checklist .row{grid-template-columns:50px 1fr 80px 80px} }

/* Checklist imprimable + champs numéro */
.checklist.printable .row{grid-template-columns:60px 1fr 60px 80px 80px 60px}
@media (max-width:720px){
  .checklist.printable .row{grid-template-columns:50px 1fr 50px 70px 70px 50px}
}
.checklist .num{
  width:100%; max-width:80px; background:#13111a; border:1px solid var(--bord); color:var(--txt);
  border-radius:8px; padding:6px 8px; text-align:center;
}
.checklist .num::placeholder{color:var(--muted)}

/* Impression spécifique à la page */
@media print{
  .no-print{display:none !important}
  .checklist .num{border:1px solid #000; color:#000; background:#fff}
  .card{box-shadow:none; background:#fff; border-color:#000}
  .tag{border-color:#000 !important; color:#000 !important}
}