:root{
  --fond:#070c0a; --carte:#0d1512; --carte2:#0f1714; --trait:#1c2723;
  --encre:#e4f4ec; --gris:#7fa595; --gris2:#5c7c6e; --vert:#00c983;
  --alerte:#ff7a59;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--fond);color:var(--encre);
  font:16px/1.6 "Bricolage Grotesque","Segoe UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--vert);text-decoration:none}
a:hover{text-decoration:underline}
main{max-width:1060px;margin:0 auto;padding:28px 20px 64px}
section{margin-bottom:44px}
h1{font-size:clamp(26px,4.6vw,38px);font-weight:800;letter-spacing:-.03em;line-height:1.1;margin:0 0 10px}
h2{font-size:20px;font-weight:800;letter-spacing:-.02em;margin:0 0 12px}
p{color:var(--gris);margin:0 0 14px;max-width:70ch}

.tete{border-bottom:1px solid var(--trait);padding:14px 20px;display:flex;align-items:center;
  gap:22px;flex-wrap:wrap;max-width:1060px;margin:0 auto}
.logo{display:flex;align-items:center;gap:10px;color:var(--encre);font-weight:800;
  font-size:19px;letter-spacing:-.03em}
.logo:hover{text-decoration:none}
.signe{width:30px;height:30px;flex:0 0 auto}
.tete nav{display:flex;gap:18px;margin-left:auto;font-size:14px}
.tete nav a{color:var(--gris)}

/* ---- recherche : liste de suggestions, en-tête et pronostiqueur ---- */
.rech{position:relative;flex:0 0 240px}
.rech input{width:100%;background:var(--carte);border:1px solid var(--trait);border-radius:9px;
  color:var(--encre);font:inherit;font-size:14px;padding:8px 12px;-webkit-appearance:none}
.rech input::placeholder{color:var(--gris2)}
.rech input:focus{outline:none;border-color:var(--vert)}
.rech-liste{position:absolute;z-index:30;top:calc(100% + 6px);left:0;right:0;margin:0;padding:4px;
  list-style:none;background:var(--carte2);border:1px solid var(--trait);border-radius:10px;
  box-shadow:0 14px 34px rgba(0,0,0,.55);max-height:60vh;overflow-y:auto}
.rech-liste li{display:grid;grid-template-columns:1fr auto;gap:0 10px;align-items:baseline;
  padding:7px 9px;border-radius:7px;cursor:pointer}
.rech-liste li.on,.rech-liste li:hover{background:var(--trait)}
.rech-liste li.rien{display:block;color:var(--gris2);font-size:13px;cursor:default}
.rech-liste li.rien:hover{background:none}
.r-nom{font-weight:700;font-size:14px}
.r-div{grid-column:1;font-size:11.5px;color:var(--gris2)}
.r-note{grid-column:2;grid-row:1/3;align-self:center;text-align:right;
  font-family:var(--mono);font-size:13px;color:var(--vert);white-space:nowrap}
.r-note em{font-style:normal;color:var(--gris2);font-size:11px;margin-left:4px}

/* ---- pronostiqueur ---- */
.pr-choix{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:start}
.pr-slot .rech{flex:none}
.pr-etiq{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gris2);margin-bottom:6px}
.pr-vs{font-family:var(--mono);font-size:12px;color:var(--gris2);align-self:center;padding-top:18px}
.pr-carte{background:var(--carte);border:1px solid var(--trait);border-radius:10px;
  padding:10px 13px;margin-top:10px;display:flex;flex-direction:column;gap:3px}
.pr-carte b{font-size:15px}
.pr-carte span{font-size:12.5px;color:var(--gris)}
.pr-carte em{font-style:normal;font-family:var(--mono);font-size:11.5px;color:var(--gris2)}
.pr-sortie{margin-top:26px}
.pr-jauge{position:relative;display:flex;height:16px;border-radius:8px;overflow:hidden;
  background:var(--trait)}
.pr-jauge i{display:block;height:100%}
.pr-jauge i[data-jauge-a]{background:var(--vert)}
.pr-jauge i[data-jauge-b]{background:#37514a}
.pr-jauge u{position:absolute;top:-4px;bottom:-4px;border-left:2px solid var(--encre);
  border-right:2px solid var(--encre);background:rgba(228,244,236,.14)}
.pr-chiffres{display:flex;justify-content:space-between;gap:14px;margin-top:10px}
.pr-cote{display:flex;flex-direction:column;gap:2px;min-width:0}
.pr-cote b{font-family:var(--mono);font-size:30px;font-weight:500;color:var(--vert);line-height:1;
  white-space:nowrap}
.pr-cote span{font-size:13px;color:var(--gris);overflow-wrap:anywhere}
.pr-droite{text-align:right;align-items:flex-end}
.pr-droite b{color:#9fbdb0}
.pr-plage{margin-top:14px;color:var(--encre);font-size:14.5px}
.pr-plage b{font-family:var(--mono);color:var(--vert);font-weight:500}
.pr-vide{font-family:var(--mono);font-size:13px;color:var(--gris2);margin-top:22px}
/* L'avertissement est la moitié utile du pronostic : il se voit. */
.pr-avert{font-size:13.5px;line-height:1.5;margin-top:12px;padding:9px 13px;border-radius:9px;
  border-left:3px solid var(--trait);background:var(--carte);max-width:none}
.pr-vert{border-left-color:var(--vert);color:var(--gris)}
.pr-orange{border-left-color:#d69a3c;color:#e0c191}
.pr-rouge{border-left-color:#c2564f;color:#e8b4b0}

.accroche h1{max-width:20ch}
.chiffres{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.chiffres div{background:var(--carte);border:1px solid var(--trait);border-radius:10px;
  padding:11px 15px;display:flex;flex-direction:column;gap:3px}
.chiffres b{font-family:var(--mono);font-size:19px;font-weight:500;color:var(--vert);line-height:1}
.chiffres span{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gris2)}

.note-methode{font-size:13.5px;color:var(--gris2)}
.cnt-sexe{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gris2);font-weight:400;margin-left:9px}

/* ---- attributs de jeu : six jauges sur la fiche ---- */
.attrs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 26px;margin-top:16px}
.attr{display:grid;grid-template-columns:82px 1fr 30px;align-items:center;gap:10px}
.attr-nom{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gris2)}
.attr-jauge{height:7px;border-radius:4px;background:var(--trait);overflow:hidden}
.attr-jauge i{display:block;height:100%;background:var(--vert);border-radius:4px}
.attr-val{font-family:var(--mono);font-size:14px;font-weight:500;color:var(--encre);text-align:right}

/* ---- organisations ---- */
.orgs .o-nom{font-weight:700}
.orgs tr.ref .o-nom{color:var(--vert)}
.orgs .niveau{font-family:var(--mono);font-size:15px}
.orgs .ic,.orgs .num,.orgs .date{font-family:var(--mono);font-size:12.5px;color:var(--gris)}
.orgs .muet{color:var(--gris2)}
.encadre-avert{background:var(--carte);border:1px solid var(--trait);border-left:3px solid var(--vert);
  border-radius:10px;padding:14px 17px;font-size:14px;color:var(--gris);max-width:none}
.encadre-avert b{color:var(--encre)}
.entete-page .fil{font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:8px}

table{width:100%;border-collapse:collapse;font-size:14.5px}
th{text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gris2);font-weight:400;
  padding:0 10px 9px;border-bottom:1px solid var(--trait)}
td{padding:9px 10px;border-bottom:1px solid var(--trait)}
tbody tr:hover{background:var(--carte)}
.rang{font-family:var(--mono);color:var(--gris2);width:44px}
.nom a{color:var(--encre);font-weight:700}
.div,.org{color:var(--gris);font-size:13.5px}
.note{text-align:right;font-family:var(--mono);white-space:nowrap}
.note b{color:var(--vert);font-weight:500;font-size:15px}
.note span{color:var(--gris2);font-size:11.5px;margin-left:5px}
.cbt{text-align:right;font-family:var(--mono);color:var(--gris2);width:52px}

.grille-div{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.carte-div{background:var(--carte);border:1px solid var(--trait);border-radius:12px;
  padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.carte-div:hover{border-color:var(--vert);text-decoration:none}
.carte-div .titre{font-weight:800;letter-spacing:-.02em;color:var(--encre)}
.carte-div .chef{font-size:13.5px;color:var(--vert)}
.carte-div .cnt{font-family:var(--mono);font-size:10.5px;color:var(--gris2)}

.fiche-tete{display:flex;align-items:flex-start;gap:24px;flex-wrap:wrap;
  border-bottom:1px solid var(--trait);padding-bottom:22px;margin-bottom:22px}
.ft-gauche{flex:1 1 300px}
.rangs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}
.badge{background:var(--carte);border:1px solid var(--trait);border-radius:999px;
  padding:4px 12px;font-family:var(--mono);font-size:11.5px;color:var(--vert)}
.bilan{font-family:var(--mono);font-size:13px;color:var(--gris)}
.ft-note{text-align:right;font-family:var(--mono);line-height:1.15}
.ft-note b{display:block;font-size:42px;font-weight:500;color:var(--vert);letter-spacing:-.02em}
.ft-note span{color:var(--gris);font-size:13px}
.ft-note em{display:block;font-style:normal;color:var(--gris2);font-size:11px;margin-top:4px}

.meta{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.meta div{background:var(--carte);border:1px solid var(--trait);border-radius:10px;padding:10px 13px}
.meta span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gris2);margin-bottom:3px}
.meta b{font-size:14px;font-weight:500}
/* L'infobox enchaîne parfois six clubs à la suite : deux lignes, le reste en info-bulle. */
.meta .long b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;line-height:1.35}

.scroll{overflow-x:auto}
.historique{min-width:760px}
.historique .dt{font-family:var(--mono);color:var(--gris2);font-size:12.5px;white-space:nowrap}
.historique .is{font-family:var(--mono);font-weight:500;width:26px;text-align:center}
.i-v .is{color:var(--vert)}
.i-d .is{color:#c2564f}
.i-n .is{color:var(--gris2)}
.historique .ad a{color:var(--encre)}
.historique .me{color:var(--gris);font-size:13px;white-space:nowrap}
.historique .me span{color:var(--gris2);font-family:var(--mono);font-size:11px}
.historique .ev{color:var(--gris2);font-size:12.5px}
.historique .sc{font-family:var(--mono);text-align:right;width:48px}
.historique .do{font-family:var(--mono);font-size:12px;color:var(--gris);
  white-space:nowrap;text-align:right;width:110px}
.barre{display:inline-block;width:46px;height:6px;border-radius:3px;background:var(--trait);
  position:relative;margin-right:7px;vertical-align:middle;overflow:hidden}
.barre i{position:absolute;inset:0 auto 0 0;background:var(--vert)}
.vide{color:var(--gris2)}

.texte h2{margin-top:30px}
.texte pre{background:var(--carte);border:1px solid var(--trait);border-radius:10px;
  padding:14px 16px;font-family:var(--mono);font-size:14px;color:var(--encre);overflow-x:auto}
.mini{max-width:460px;margin-top:6px}
.mini td{font-size:14px}
.mini td:last-child{font-family:var(--mono);text-align:right;color:var(--vert)}

.pied{border-top:1px solid var(--trait);max-width:1060px;margin:0 auto;padding:20px;
  display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between;
  font-family:var(--mono);font-size:12px;color:var(--gris2)}

/* En dessous de 820 px l'en-tête ne tient plus sur une ligne : plutôt qu'un champ
   de 240 px échoué sous la navigation, il prend toute la largeur. */
@media(max-width:820px){
  .tete{gap:12px 18px}
  .tete nav{width:100%;margin-left:0;order:3;gap:16px;flex-wrap:wrap}
  .rech{flex:1 1 100%;order:2}
  .attrs{grid-template-columns:repeat(2,1fr);gap:10px 20px}
}

@media(max-width:760px){
  .pr-choix{grid-template-columns:1fr}
  .pr-vs{padding:6px 0;text-align:center}
}

@media(max-width:640px){
  main{padding:22px 14px 56px}
  .tete{padding:12px 14px}
  .pied{padding:18px 14px}
  /* La formule est le cœur de la page méthode : elle se lit, elle ne se fait pas défiler. */
  .texte pre{white-space:pre-wrap;font-size:13px;padding:12px 13px}

  /* Classement : la catégorie et l'organisation sortent, en-têtes compris.
     La colonne .o-nom du tableau des organisations en est une AUTRE : elle reste. */
  .div,.org{display:none}
  /* Organisations : étendue, roster et date sortent ; niveau et intervalle restent,
     ce sont les deux seules colonnes qui portent le propos de la page. */
  .orgs .num,.orgs .date,.orgs th:nth-child(5),.orgs th:nth-child(6),
  .orgs th:nth-child(7),.orgs th:nth-child(8){display:none}
  table{font-size:14px}
  th,td{padding-left:6px;padding-right:6px}
  .rang{width:30px}
  .cbt{width:38px}

  .ft-note{text-align:left}
  .fiche-tete{gap:14px}
  .ft-note b{font-size:34px}

  .barre{width:34px}
}

/* Historique : sous 820 px le tableau à sept colonnes ne tient plus dans la
   colonne de texte. Il devient une pile de fiches de combat. Rien n'est retiré —
   c'est la mise en page qui change, pas la donnée : plus aucun défilement
   latéral, ni de la page ni du tableau, jusqu'à 320 px. */
@media(max-width:820px){
  .scroll{overflow-x:visible}
  .historique{min-width:0;display:block}
  .historique thead{display:none}
  .historique tbody,.historique tr{display:block}
  .historique tr{display:grid;grid-template-columns:20px auto 1fr auto;
    grid-template-areas:"is ad ad sc" "is dt me do" "is ev ev ev";
    gap:3px 8px;padding:11px 2px;border-bottom:1px solid var(--trait)}
  .historique tr:hover{background:none}
  .historique td{display:block;border:none;padding:0;min-width:0}
  .historique .is{grid-area:is;width:auto;text-align:left;font-size:15px;align-self:start}
  .historique .ad{grid-area:ad;font-weight:700;overflow-wrap:anywhere}
  .historique .sc{grid-area:sc;width:auto;color:var(--vert)}
  /* Sans en-tête de colonne, les deux chiffres doivent se nommer eux-mêmes. */
  .historique .sc::before,.historique .do::before{color:var(--gris2);font-size:10px;
    letter-spacing:.12em;margin-right:4px}
  .historique .sc::before{content:"S"}
  .historique .do::before{content:"DOM"}
  .historique .dt{grid-area:dt}
  .historique .me{grid-area:me;white-space:normal;overflow-wrap:anywhere}
  .historique .do{grid-area:do;width:auto}
  .historique .ev{grid-area:ev;padding-top:2px;overflow-wrap:anywhere}
}

@media(max-width:380px){
  .chiffres{display:grid;grid-template-columns:1fr 1fr}
  .attrs{grid-template-columns:1fr}
  .chiffres div{padding:9px 11px}
}

/* ----------------------------------------------------- listes repliables */
.pli{position:relative}
.classement tr[hidden]{display:none}
/* Quand la liste est repliée, la dernière ligne visible s'estompe : on doit
   voir qu'il y a une suite avant même de lire le bouton. */
.pli:not(.pli-ouvert) .classement tbody tr:nth-child(15){
  -webkit-mask-image:linear-gradient(180deg,#000 42%,rgba(0,0,0,.35));
  mask-image:linear-gradient(180deg,#000 42%,rgba(0,0,0,.35))}
.pli-btn{display:block;width:100%;margin-top:10px;padding:12px 14px;cursor:pointer;
  background:var(--carte);border:1px solid var(--trait);border-radius:12px;
  color:var(--vert);font:600 13.5px/1 "Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  letter-spacing:.01em;transition:border-color .15s,background .15s}
.pli-btn:hover{background:var(--carte2);border-color:rgba(0,201,131,.45)}
.pli-btn:focus-visible{outline:2px solid var(--vert);outline-offset:2px}
.pli-btn[aria-expanded="false"]::after{content:" ▾"}
.pli-btn[aria-expanded="true"]::after{content:" ▴"}

/* ---------------------------------------------- les trois combats à suivre */
.affiches{margin-bottom:48px}
.affiches-tete{margin-bottom:16px}
.affiches-tete h2{margin:0 0 6px}
.affiches-tete p{margin:0;color:var(--gris);max-width:74ch;font-size:14.5px}

/* Les trois combats défilent LATÉRALEMENT, jamais en colonne.
   Une piste flex qui déborde plutôt qu'une grille qui se réorganise : à trois
   cartes de front sur grand écran, à deux, puis à une seule qui laisse voir la
   suivante — mais toujours sur une ligne. Une grille qui repasse en colonne
   transforme trois cartes en trois pavés à faire défiler du pouce, et c'est
   exactement ce qu'on ne veut pas. */
.carrousel{position:relative}
.car-piste{display:flex;gap:14px;align-items:stretch;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;
  padding:2px 2px 4px;margin:-2px -2px -4px}
.car-piste::-webkit-scrollbar{display:none}
/* Le script ne dit jamais « défile en douceur » : il laisse la CSS trancher, et
   la CSS écoute le réglage système. Un mouvement imposé rend malade une partie
   des gens, et ce n'est pas au JavaScript d'en décider. */
@media(prefers-reduced-motion:reduce){.car-piste{scroll-behavior:auto}}
.car-piste>.affiche{flex:0 0 calc((100% - 28px)/3);scroll-snap-align:start}

/* Les bords s'estompent quand il reste quelque chose à voir de ce côté-là :
   le fondu est le seul indice qui survit sans souris et sans barre de défilement. */
.car-debut .car-piste{-webkit-mask-image:linear-gradient(90deg,transparent,#000 42px);
  mask-image:linear-gradient(90deg,transparent,#000 42px)}
.car-fin .car-piste{-webkit-mask-image:linear-gradient(270deg,transparent,#000 42px);
  mask-image:linear-gradient(270deg,transparent,#000 42px)}
.car-debut.car-fin .car-piste{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 42px,#000 calc(100% - 42px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 42px,#000 calc(100% - 42px),transparent)}

.car-fleche{position:absolute;top:calc(50% - 30px);z-index:2;width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  font:400 22px/1 "Bricolage Grotesque",system-ui,sans-serif;padding-bottom:3px;
  color:var(--encre);background:rgba(13,21,18,.92);border:1px solid var(--trait);
  border-radius:50%;backdrop-filter:blur(6px);transition:border-color .15s,color .15s,opacity .15s}
/* « display:flex » écrase l'attribut « hidden » : il faut le redire. */
.car-fleche[hidden],.car-points[hidden]{display:none}
.car-fleche:hover:not(:disabled){color:var(--vert);border-color:rgba(0,201,131,.5)}
.car-fleche:focus-visible{outline:2px solid var(--vert);outline-offset:2px}
.car-fleche:disabled{opacity:.28;cursor:default}
.car-g{left:-6px}
.car-d{right:-6px}

.car-points{display:flex;justify-content:center;gap:7px;margin-top:14px}
.car-points button{width:26px;height:4px;padding:0;border:0;border-radius:99px;cursor:pointer;
  background:var(--trait);transition:background .18s,width .18s}
.car-points button:hover{background:var(--gris2)}
.car-points button.actif{background:var(--vert);width:38px}
.car-points button:focus-visible{outline:2px solid var(--vert);outline-offset:3px}

.affiche{background:linear-gradient(180deg,var(--carte2),var(--carte));
  border:1px solid var(--trait);border-radius:16px;padding:15px 15px 12px;
  position:relative;overflow:hidden;display:flex;flex-direction:column}
.affiche::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,201,131,.55),transparent)}

.affiche-tete{margin-bottom:9px}
.affiche-etiq{display:inline-block;font:600 10.5px/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--vert);background:rgba(0,201,131,.10);
  border:1px solid rgba(0,201,131,.28);border-radius:999px;padding:5px 9px}
.affiche-regle{display:block;color:var(--gris2);font-size:11.5px;line-height:1.45;margin-top:7px}

.affiche-evt{margin-bottom:10px}
.affiche-evt b{display:block;font-size:17px;font-weight:800;letter-spacing:-.02em;
  line-height:1.15;overflow-wrap:anywhere}
.affiche-evt>span{display:block;color:var(--gris);font-size:12px;margin-top:3px}
.affiche-tags{margin-top:7px;display:flex;flex-wrap:wrap;gap:5px}
.affiche-tags i{font-style:normal;font:500 10px/1 var(--mono);letter-spacing:.05em;
  color:var(--gris);background:var(--fond);border:1px solid var(--trait);
  border-radius:6px;padding:4px 6px;white-space:nowrap}
.affiche-tags .tag-titre{color:#f5c451;border-color:rgba(245,196,81,.35);
  background:rgba(245,196,81,.08)}

.affiche-jauge{display:flex;flex-direction:column;align-items:center;margin:2px 0 10px}
.jauge-arc{width:100%;max-width:208px;display:block;overflow:visible}
.ja-fond{fill:none;stroke:var(--trait);stroke-width:14;stroke-linecap:round}
.ja-plage{fill:none;stroke:rgba(228,244,236,.22);stroke-width:3;stroke-linecap:round}
.ja-valeur{fill:none;stroke-width:14;stroke-linecap:round}
.ja-milieu{stroke:var(--fond);stroke-width:2.5}
.ja-vs{text-anchor:middle;fill:var(--gris2);letter-spacing:.18em;
  font:700 15px/1 var(--mono)}
.affiche-plage{margin:4px 0 0;font-size:11.5px;color:var(--gris2);text-align:center;line-height:1.5}
.affiche-plage b{color:var(--gris);font-weight:600}

/* Le duel : chaque combattant sous SA moitié d'arc, sa probabilité collée à son
   portrait. Empilés l'un sous l'autre, rien ne disait à qui appartenait quelle
   part de la jauge. */
.duel{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:-4px}
.dc{display:flex;flex-direction:column;gap:3px;min-width:0;
  padding:8px 9px;border:1px solid var(--trait);border-radius:12px;background:var(--fond)}
.dc-d{align-items:flex-end;text-align:right}
.dc-fav{border-color:rgba(0,201,131,.34);background:rgba(0,201,131,.06)}
.dc-tete{display:flex;align-items:center;gap:8px;margin-bottom:2px;max-width:100%}
.dc-d .dc-tete{flex-direction:row-reverse}
.dc-vig{display:block;line-height:0}
.dc-pct{font:800 21px/1 "Bricolage Grotesque",system-ui,sans-serif;letter-spacing:-.03em;
  color:var(--gris)}
.dc-pct i{font-style:normal;font-size:11px;margin-left:1px;color:var(--gris2)}
.dc-fav .dc-pct{color:var(--vert)}
.dc-nom{display:block;font-size:13.5px;font-weight:700;letter-spacing:-.01em;line-height:1.2;
  color:var(--encre);overflow-wrap:anywhere}
.dc-nom:hover{color:var(--vert);text-decoration:none}
.dc-sous{font-size:11px;color:var(--gris)}
.dc-f{color:var(--gris2)}
/* Changement de catégorie pour ce combat. Même couleur pour « monte » et
   « descend » : ce n'est ni un bien ni un mal, c'est un avertissement — la note
   ne corrige pas un écart de poids. Seule la flèche dit le sens. */
.dc-mvt{display:inline-flex;align-items:center;gap:3px;margin-left:5px;vertical-align:1px;
  font:600 9.5px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;
  color:var(--alerte);background:rgba(255,122,89,.10);
  border:1px solid rgba(255,122,89,.34);border-radius:5px;padding:3px 5px 2px}
.mvt-f{width:8px;height:8px;fill:currentColor;flex:none}
.dc-d .dc-mvt{flex-direction:row-reverse;margin-left:4px}
.dc-note{font:500 11px/1.2 var(--mono);color:var(--gris2)}
.dc-note em{font-style:normal;margin-left:3px}
.dc-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}
.dc-d .dc-tags{justify-content:flex-end}
/* La vignette : un socle lumineux et le combattant détouré posé dessus, comme
   une carte de roster. Le halo est derrière le sujet, jamais dessus. */
.vig{position:relative;width:62px;height:62px;flex:none;border-radius:14px;
  border:1px solid var(--trait);overflow:hidden;display:block;
  background:radial-gradient(120% 90% at 50% 108%,rgba(0,201,131,.30),rgba(0,201,131,.05) 62%,transparent 78%),
             linear-gradient(180deg,var(--carte2),var(--fond))}
.vig-img{position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:cover;object-position:50% 16%}
/* Un portrait détouré n'est pas rogné : il est posé, pieds au bord du socle. */
.vig-d .vig-img{object-fit:contain;object-position:50% 100%;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.55))}
.vig-vide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font:700 14px/1 "Bricolage Grotesque",system-ui,sans-serif;letter-spacing:.03em;
  color:var(--gris2)}
.dc-fav .vig{border-color:rgba(0,201,131,.42);
  box-shadow:0 0 0 1px rgba(0,201,131,.16),0 2px 12px -4px rgba(0,201,131,.45)}

.coin-marque{font:600 9px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:#f5c451;border:1px solid rgba(245,196,81,.35);border-radius:4px;padding:2px 4px}
.coin-elu{font:600 9px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--vert);background:rgba(0,201,131,.12);border:1px solid rgba(0,201,131,.35);
  border-radius:4px;padding:2px 4px}

.affiche-styles{margin-top:12px;border-top:1px solid var(--trait);padding-top:10px}
.da-tete{display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  cursor:pointer;list-style:none;padding:1px 0}
.da-tete::-webkit-details-marker{display:none}
.da-tete span:first-child{font:600 10.5px/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--gris)}
.da-tete span:first-child::before{content:"▸ ";color:var(--gris2)}
.affiche-styles[open] .da-tete span:first-child::before{content:"▾ "}
.da-tete:hover span:first-child{color:var(--vert)}
.da-corps{margin-top:8px}
.da-legende{font-size:10px;color:var(--gris2);text-align:right}
.da{display:grid;grid-template-columns:22px 1fr 62px 1fr 22px;align-items:center;
  gap:5px;padding:2px 0}
.da-piste{height:6px;border-radius:4px;background:var(--fond);display:flex;
  justify-content:flex-end;overflow:hidden}
.da-piste-d{justify-content:flex-start}
.da-piste i{display:block;height:100%;border-radius:4px;
  background:linear-gradient(90deg,rgba(0,201,131,.30),rgba(0,201,131,.75))}
.da-piste-d i{background:linear-gradient(270deg,rgba(0,201,131,.30),rgba(0,201,131,.75))}
.da-piste i.da-gagne{background:linear-gradient(90deg,rgba(0,201,131,.45),var(--vert))}
.da-piste-d i.da-gagne{background:linear-gradient(270deg,rgba(0,201,131,.45),var(--vert))}
.da-piste i.da-perd{background:linear-gradient(90deg,rgba(127,165,149,.16),rgba(127,165,149,.42))}
.da-piste-d i.da-perd{background:linear-gradient(270deg,rgba(127,165,149,.16),rgba(127,165,149,.42))}
.da-nom{text-align:center;font-size:10.5px;color:var(--gris)}
.da-va,.da-vb{font:500 10.5px/1 var(--mono);color:var(--gris2)}
.da-va{text-align:right}
.da-fort{color:var(--vert)}
.da-manque{margin:8px 0 0;font-size:10.5px;color:var(--gris2)}

/* Le crédit photo est collé en bas : les trois cartes gardent la même hauteur,
   et l'attribution reste visible sans décaler les blocs au-dessus. */
.affiche-credit{margin:12px 0 0;padding-top:9px;border-top:1px solid var(--trait);
  font-size:10px;line-height:1.6;color:var(--gris2)}
.affiches-trio .affiche-credit{margin-top:auto}
.affiche-credit a{color:var(--gris2);text-decoration:underline;text-underline-offset:2px}
.affiche-credit a:hover{color:var(--vert)}
.affiches-pied{margin:14px 0 0;font-size:12px;color:var(--gris2);line-height:1.6}

@media(max-width:1000px){
  .car-piste>.affiche{flex:0 0 calc((100% - 14px)/2)}
}
@media(max-width:680px){
  /* Une carte pleine, et un bout de la suivante : c'est ce bout qui dit qu'il
     faut glisser, mieux que n'importe quelle flèche. */
  .car-piste>.affiche{flex:0 0 88%}
  .affiches-tete p{font-size:14px}
  .jauge-arc{max-width:230px}
  .car-fleche{display:none}
}