@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=EB+Garamond:ital,wght@0,400;0,600;1,400&display=swap");

/* Jetons — design system Dragon TCG */
:root {
  --abyss:#0a0908; --obsidian:#141211; --basalt:#1f1b19; --ash-line:#3a332f;
  --bone:#ece4d8; --smoke:#a39a8f; --ember:#b3201a; --ember-bright:#ec5a45; --lava:#ff6a2b; --gold:#c9a24a;
  --rarity-common:#a39a8f; --rarity-rare:#6f9fd8; --rarity-epic:#a77be0; --rarity-legendary:#c9a24a; --rarity-mythic:#ff6a2b;
  --font-display:"Cinzel","Trajan Pro",Georgia,serif; --font-body:"EB Garamond",Garamond,Georgia,serif;
  --space-1:4px; --space-2:8px; --space-3:16px; --space-4:24px; --space-5:40px; --space-6:64px;
  --radius-sm:2px; --radius-md:6px; --radius-card:14px;
  --shadow-ember:0 0 24px rgba(255,106,43,.35); --shadow-card:0 12px 32px rgba(0,0,0,.6);
  color-scheme: dark;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--abyss) url("/img/roche-braise.webp") center top/cover fixed;color:var(--bone);
  font:400 18px/28px var(--font-body);min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
a{color:var(--ember-bright)}
img{max-width:100%}
h1,h2,h3{font-family:var(--font-display);margin:0 0 var(--space-3);letter-spacing:.02em}
h1{font-size:40px;line-height:48px}
h2{font-size:28px;line-height:36px;font-weight:600}
h3{font-size:20px;line-height:28px;font-weight:600}
p{margin:0 0 var(--space-3)}
.muted{color:var(--smoke)}
.label{font:600 12px/16px var(--font-display);letter-spacing:.14em;text-transform:uppercase}
.wrap{max-width:1200px;margin:0 auto;padding:0 var(--space-4)}
.section{padding:var(--space-5) 0}
.page-head{padding:var(--space-6) 0 var(--space-4)}
.page-head .label{color:var(--ember-bright);display:block;margin-bottom:var(--space-2)}
.page-head p{color:var(--smoke);max-width:640px}
.panel{background:rgba(20,18,17,.92);border:1px solid var(--ash-line);border-radius:var(--radius-md);padding:var(--space-4)}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--space-4)}
.notice{border:1px dashed var(--ash-line);border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);
  color:var(--smoke);font-size:15px;line-height:22px;margin-bottom:var(--space-4);background:rgba(10,9,8,.7)}

/* Navigation */
.dt-nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:var(--space-4);padding:0 var(--space-4);
  background:rgba(20,18,17,.96);border-bottom:1px solid var(--ash-line);backdrop-filter:blur(6px)}
.dt-nav__brand{font:700 18px/1 var(--font-display);color:var(--bone);letter-spacing:.08em;padding:var(--space-3) 0;text-decoration:none;white-space:nowrap}
.dt-nav__brand b{color:var(--ember-bright)}
.dt-tabs{display:flex;gap:var(--space-1);overflow-x:auto;scrollbar-width:none}
.dt-tabs::-webkit-scrollbar{display:none}
.dt-tab{font:600 12px/16px var(--font-display);letter-spacing:.14em;text-transform:uppercase;color:var(--smoke);
  text-decoration:none;padding:22px var(--space-3) 20px;border-bottom:2px solid transparent;white-space:nowrap}
.dt-tab:hover{color:var(--bone)}
.dt-tab[aria-current="page"]{color:var(--bone);border-bottom-color:var(--ember)}
.dt-nav__compte{margin-left:auto;display:flex;align-items:center;gap:var(--space-2);flex:none;color:var(--bone);text-decoration:none;
  font:600 12px/16px var(--font-display);letter-spacing:.1em;text-transform:uppercase;padding:6px 12px;border:1px solid var(--ash-line);border-radius:var(--radius-sm)}
.dt-nav__compte:hover{border-color:var(--gold)}
.dt-nav__compte img{width:24px;height:24px;border-radius:50%}
.dt-nav__compte span{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:760px){.dt-nav__compte{position:absolute;top:10px;right:var(--space-3);padding:4px 10px}}
@media (max-width:760px){.dt-nav{flex-direction:column;align-items:stretch;gap:0;padding:0}
  .dt-nav__brand{padding:var(--space-3) var(--space-3) 0}.dt-tab{padding:14px var(--space-3) 12px}}

/* Boutons */
.dt-btn{display:inline-block;text-decoration:none;font:600 12px/16px var(--font-display);letter-spacing:.14em;text-transform:uppercase;
  padding:12px var(--space-4);border-radius:var(--radius-sm);border:1px solid transparent;cursor:pointer;transition:box-shadow .2s,background .2s,color .2s}
.dt-btn--primary{background:var(--ember);color:var(--bone);border-color:var(--ember-bright)}
.dt-btn--primary:hover{box-shadow:var(--shadow-ember)}
.dt-btn--secondary{background:transparent;color:var(--gold);border-color:var(--gold)}
.dt-btn--secondary:hover{background:var(--basalt)}
.dt-btn--ghost{background:transparent;color:var(--smoke)}
.dt-btn--ghost:hover{color:var(--bone)}
.dt-btn--sm{padding:6px var(--space-3)}
.dt-btn:focus-visible,.dt-tab:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,.dt-card:focus-visible{outline:2px solid var(--lava);outline-offset:2px}
.dt-btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}
.actions{display:flex;gap:var(--space-3);flex-wrap:wrap}

/* Hero */
.dt-hero{position:relative;min-height:min(78vh,640px);display:flex;align-items:center;
  background:var(--abyss) url("/img/dragon-orage.webp") center right/cover}
.dt-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,9,8,.94) 0%,rgba(10,9,8,.6) 45%,rgba(10,9,8,0) 80%),
  linear-gradient(0deg,var(--abyss) 0%,rgba(10,9,8,0) 30%)}
.dt-hero .wrap{position:relative;width:100%}
.dt-hero__text{max-width:540px}
.dt-hero__text .label{color:var(--ember-bright)}
.display{font:700 64px/68px var(--font-display);margin:var(--space-2) 0 var(--space-3)}
@media (max-width:760px){.display{font-size:42px;line-height:46px}.dt-hero{background-position:70% center}}
.dt-hero p{color:var(--smoke)}

/* Rareté */
.dt-rarity{display:inline-flex;align-items:center;gap:var(--space-1);font:600 11px/14px var(--font-display);letter-spacing:.14em;
  text-transform:uppercase;padding:4px var(--space-2);border-radius:var(--radius-sm);border:1px solid currentColor;background:var(--basalt)}
.dt-rarity::before{content:"";width:7px;height:7px;transform:rotate(45deg);background:currentColor}
.dt-rarity--commune{color:var(--rarity-common)}.dt-rarity--rare{color:var(--rarity-rare)}
.dt-rarity--epique{color:var(--rarity-epic)}.dt-rarity--legendaire{color:var(--rarity-legendary);box-shadow:0 0 12px rgba(201,162,74,.3)}
.dt-rarity--mythique{color:var(--rarity-mythic);box-shadow:0 0 14px rgba(255,106,43,.45)}

/* Carte TCG 63:88 */
.dt-card{width:100%;max-width:252px;aspect-ratio:63/88;padding:10px;border-radius:var(--radius-card);background:var(--obsidian);
  border:2px solid var(--ash-line);box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:6px;
  transition:box-shadow .2s,transform .2s;cursor:pointer;text-align:left;color:inherit;font:inherit}
.dt-card--legendaire,.dt-card--epique{border-color:var(--gold)}
.dt-card--mythique{border-color:var(--lava);box-shadow:var(--shadow-card),0 0 18px rgba(255,106,43,.3)}
.dt-card:hover{box-shadow:var(--shadow-card),var(--shadow-ember);transform:translateY(-4px)}
.dt-card__head{display:flex;justify-content:space-between;align-items:center;gap:var(--space-2)}
.dt-card__name{font:700 14px/18px var(--font-display);color:var(--bone)}
.dt-card__cost{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--ember);
  color:var(--bone);font:700 14px/1 var(--font-display);border:1px solid var(--lava)}
.dt-card__art{flex:1;min-height:0;border-radius:var(--radius-sm);border:1px solid var(--ash-line);background-size:cover;background-color:var(--basalt)}
.dt-card__type{display:flex;justify-content:space-between;align-items:center;gap:4px;font:600 10px/14px var(--font-display);
  letter-spacing:.12em;text-transform:uppercase;color:var(--smoke)}
.dt-card__type .dt-rarity{font-size:9px;padding:2px 6px}
.dt-card__text{background:var(--basalt);border-radius:var(--radius-sm);padding:var(--space-2);font:400 13px/17px var(--font-body);color:var(--bone);min-height:64px}
.dt-card__text i{color:var(--smoke);display:block;margin-top:4px}
.dt-card__stats{display:flex;justify-content:flex-end;gap:var(--space-2);font:700 14px/1 var(--font-display);min-height:24px}
.dt-card__stats span{padding:4px var(--space-2);background:var(--basalt);border:1px solid var(--ash-line);border-radius:var(--radius-sm)}
.dt-card__atk{color:var(--ember-bright)}.dt-card__def{color:var(--gold)}
.dt-card--img{padding:0;aspect-ratio:auto;overflow:hidden;border-width:1px;background:none}
.dt-card--img img{display:block;width:100%;height:auto}
.zoom .dt-stats{margin-bottom:var(--space-4)}.zoom .dt-stat{font-size:11px;grid-template-columns:90px 1fr 40px}.zoom .dt-stat__val{font-size:14px}
.dt-stats{list-style:none;margin:0;padding:6px var(--space-2);background:var(--basalt);border-radius:var(--radius-sm);display:grid;gap:3px}
.dt-stat{display:grid;grid-template-columns:62px 1fr 30px;align-items:center;gap:6px;font:600 9px/14px var(--font-display);letter-spacing:.08em;text-transform:uppercase;color:var(--smoke)}
.dt-stat__barre{height:5px;background:var(--abyss);border-radius:3px;overflow:hidden}
.dt-stat__barre i{display:block;height:100%;background:var(--gold);border-radius:3px;transition:width .3s}
.dt-stat__val{font:700 12px/14px var(--font-display);color:var(--bone);text-align:right;white-space:nowrap}
.dt-stat__val small{display:block;font-size:8px;line-height:9px;color:var(--ember-bright)}
.dt-stat.is-active{color:var(--bone)}.dt-stat.is-active .dt-stat__barre i{background:var(--lava);box-shadow:0 0 6px var(--lava)}
.dt-stat.is-active .dt-stat__nom{color:var(--lava)}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--space-4);justify-items:center}
@media (max-width:520px){.card-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-3)}.card-grid .dt-card{padding:7px}
  .card-grid .dt-card__name{font-size:12px;line-height:15px}.card-grid .dt-stat{grid-template-columns:48px 1fr 22px;font-size:7px;gap:4px}
  .card-grid .dt-stat__val{font-size:10px}.card-grid .dt-card__type{font-size:8px}.card-grid .dt-card__type .dt-rarity{font-size:7px;padding:1px 4px}}

/* Formulaires */
.filters{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:end;margin-bottom:var(--space-4)}
.field{display:flex;flex-direction:column;gap:var(--space-1)}
.field span{font:600 11px/14px var(--font-display);letter-spacing:.14em;text-transform:uppercase;color:var(--smoke)}
input,select{background:var(--basalt);color:var(--bone);border:1px solid var(--ash-line);border-radius:var(--radius-sm);
  padding:10px 12px;font:400 16px/20px var(--font-body);min-width:150px}
input[type=search]{min-width:220px}
.count{color:var(--smoke);font-size:15px;margin-bottom:var(--space-3)}

/* Fenêtre carte */
dialog{background:transparent;border:0;padding:0;color:var(--bone);max-width:min(92vw,760px)}
dialog::backdrop{background:rgba(10,9,8,.85)}
.zoom{display:grid;grid-template-columns:300px 1fr;gap:var(--space-4);background:var(--obsidian);border:1px solid var(--ash-line);
  border-radius:var(--radius-md);padding:var(--space-4)}
.zoom .dt-card{max-width:300px;cursor:default}
.zoom .dt-card:hover{transform:none}
.zoom dl{display:grid;grid-template-columns:auto 1fr;gap:6px var(--space-3);margin:0 0 var(--space-4);font-size:16px}
.zoom dt{color:var(--smoke)}.zoom dd{margin:0}
@media (max-width:640px){.zoom{grid-template-columns:1fr;justify-items:center}}

/* Tuiles */
.tile{background:rgba(20,18,17,.92);border:1px solid var(--ash-line);border-radius:var(--radius-md);padding:var(--space-4)}
.tile__num{font:700 36px/1 var(--font-display);color:var(--ember-bright);margin-bottom:var(--space-3)}
.tile p{color:var(--smoke);margin:0}

/* Extensions */
.ext{display:grid;grid-template-columns:320px 1fr;gap:var(--space-4);align-items:center;margin-bottom:var(--space-4)}
.ext__img{aspect-ratio:16/10;border-radius:var(--radius-md);border:1px solid var(--ash-line);background-size:cover;background-position:center}
.ext--soon .ext__img{filter:grayscale(1) brightness(.5)}
@media (max-width:760px){.ext{grid-template-columns:1fr}}

/* Collection */
.coll__boosters{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);flex-wrap:wrap;margin-bottom:var(--space-4)}
.coll__boosters p{margin:var(--space-2) 0 0}
.coll__stock{display:flex;align-items:center;gap:var(--space-2);margin-top:var(--space-2)}
.coll__stock b{font:700 20px/1 var(--font-display);margin-left:var(--space-2)}
.coll__booster{width:22px;height:30px;border:1px solid var(--ash-line);border-radius:3px;background:var(--basalt)}
.coll__booster.is-plein{background:linear-gradient(160deg,var(--lava),var(--ember));border-color:var(--lava);box-shadow:0 0 10px rgba(255,106,43,.35)}
.coll__ouverture{margin-bottom:var(--space-5)}
.coll__progres{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);flex-wrap:wrap;margin-bottom:var(--space-4)}
.coll__total{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}.coll__total b{font:700 28px/1 var(--font-display);color:var(--ember-bright)}
.coll__raretes{display:flex;gap:var(--space-2);flex-wrap:wrap}
.coll__carte{position:relative;width:100%;display:flex;justify-content:center}
.coll__carte.is-manquante .dt-card{filter:grayscale(1) brightness(.4)}
.coll__nombre,.coll__nouvelle{position:absolute;top:-8px;left:4px;font:700 13px/1 var(--font-display);padding:5px 9px;border-radius:var(--radius-sm);
  background:var(--basalt);border:1px solid var(--gold);color:var(--gold)}
.coll__nouvelle{left:50%;transform:translateX(-50%);background:var(--ember);border-color:var(--lava);color:var(--bone);letter-spacing:.1em;text-transform:uppercase;font-size:10px}
.coll__tiree{animation:tirage .5s both}
@keyframes tirage{from{opacity:0;transform:translateY(16px) scale(.94)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.coll__tiree{animation:none}}

/* Duel */
.duel__msg{min-height:22px;text-align:center;color:var(--ember-bright);font-size:15px}
.duel__slot{flex-direction:column;align-items:center;gap:6px}
.duel__slot>.dt-stats{width:100%;max-width:210px}
.duel__revele{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:var(--space-3);align-items:center;margin-bottom:var(--space-4)}
.duel__revele>div{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.duel__revele .dt-card{max-width:150px;cursor:default}.duel__revele .dt-card:hover{transform:none}
.duel__revele b{font:700 24px/28px var(--font-display)}.duel__revele .is-gagnant b{color:var(--gold)}
.duel__vs{font:700 16px/1 var(--font-display);color:var(--smoke)}
@media (max-width:520px){.duel__revele{gap:var(--space-2);padding:var(--space-3)}.duel__revele .dt-card{padding:6px}.duel__revele .dt-card__name{font-size:11px;line-height:14px}
  .duel__revele .dt-stat{grid-template-columns:46px 1fr 18px;font-size:7px;gap:3px}.duel__revele .dt-card__type{font-size:7px}.duel__revele .dt-card__type .dt-rarity{display:none}.duel__vs{font-size:12px}}
.duel__barre{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4);text-align:center}
.duel__score b{display:block;font:700 40px/44px var(--font-display);color:var(--ember-bright)}
.duel__score .label,.duel__manche .label{color:var(--smoke)}
.duel__demandees{display:flex;justify-content:center;align-items:center;gap:var(--space-2);flex-wrap:wrap;margin-top:var(--space-2)}
.duel__stat{font:700 15px/20px var(--font-display);color:var(--lava);padding:4px var(--space-3);border:1px solid var(--lava);border-radius:var(--radius-sm);
  background:var(--basalt);box-shadow:0 0 12px rgba(255,106,43,.25)}
.duel__resultat{text-align:center;color:var(--smoke)}.duel__resultat b{color:var(--bone)}
.duel__titre{font-size:20px;line-height:28px}
.duel__main{display:grid;grid-template-columns:repeat(5,minmax(150px,1fr));gap:var(--space-3);overflow-x:auto;padding:12px 4px var(--space-3);scroll-snap-type:x mandatory}
.duel__slot{position:relative;scroll-snap-align:center;display:flex;justify-content:center}
.duel__slot .dt-card{max-width:210px}
.duel__slot.is-choisie .dt-card{border-color:var(--lava);box-shadow:var(--shadow-card),var(--shadow-ember);transform:translateY(-6px)}
.duel__cumul{position:absolute;top:-10px;left:50%;transform:translateX(-50%);z-index:1;font:700 14px/1 var(--font-display);color:var(--bone);
  background:var(--ember);border:1px solid var(--lava);border-radius:var(--radius-sm);padding:5px 10px}
.duel__actions{justify-content:center;margin:var(--space-3) 0 var(--space-4)}
.duel__fin{text-align:center;margin-bottom:var(--space-4)}
.duel__histo summary{cursor:pointer;color:var(--smoke)}
.duel__histo tr.is-joueur td:nth-child(3),.duel__histo tr.is-adversaire td:nth-child(4){color:var(--gold)}
@media (max-width:760px){.duel__main{grid-template-columns:repeat(5,170px)}.duel__score b{font-size:32px;line-height:36px}}

/* Règles */
.rules{display:grid;grid-template-columns:220px 1fr;gap:var(--space-5);align-items:start}
.rules nav{position:sticky;top:90px;display:flex;flex-direction:column;gap:var(--space-2)}
.rules nav a{color:var(--smoke);text-decoration:none;font:600 12px/16px var(--font-display);letter-spacing:.1em;text-transform:uppercase}
.rules nav a:hover{color:var(--bone)}
.rules article{margin-bottom:var(--space-4)}
.rules ol,.rules ul{padding-left:1.2em;margin:0 0 var(--space-3)}
.kw{display:grid;grid-template-columns:160px 1fr;gap:var(--space-2) var(--space-3)}
.kw dt{font:600 14px/28px var(--font-display);color:var(--gold)}.kw dd{margin:0}
@media (max-width:760px){.rules{grid-template-columns:1fr}.rules nav{position:static;flex-direction:row;flex-wrap:wrap;gap:var(--space-3)}.kw{grid-template-columns:1fr}}

/* Actualités */
.news{display:grid;gap:var(--space-4)}
.news article{background:rgba(20,18,17,.92);border:1px solid var(--ash-line);border-radius:var(--radius-md);padding:var(--space-4)}
.news time{color:var(--smoke);font:600 12px/16px var(--font-display);letter-spacing:.14em;text-transform:uppercase}
.news h3{margin:var(--space-2) 0}
.tag{display:inline-block;margin-left:var(--space-2);color:var(--ember-bright)}

/* Tableaux */
table{width:100%;border-collapse:collapse;font-size:16px}
th{text-align:left;font:600 11px/14px var(--font-display);letter-spacing:.14em;text-transform:uppercase;color:var(--smoke);padding:var(--space-2);border-bottom:1px solid var(--ash-line)}
td{padding:12px var(--space-2);border-bottom:1px solid var(--ash-line)}
.table-scroll{overflow-x:auto}

/* Pied de page */
.foot{background:rgba(20,18,17,.96);border-top:1px solid var(--ash-line);padding:var(--space-5) 0;margin-top:var(--space-6)}
.foot .wrap{display:flex;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap}
.foot p{color:var(--smoke);font-style:italic;margin:var(--space-2) 0 0}
.foot__links{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.foot__links a{color:var(--smoke);text-decoration:none;font:600 12px/16px var(--font-display);letter-spacing:.12em;text-transform:uppercase}
.foot__links a:hover{color:var(--bone)}