/* ==========================================================================
   DOMINUS — feuille de style unique
   --------------------------------------------------------------------------
   Un seul monde visuel : la pierre gravee d'une arene. Le motif structurant
   est la grille isometrique du jeu, reprise en fond, en puces et en separateurs.
   Les angles sont coupes et non arrondis : de la pierre taillee, pas du plastique.
   Le site assume un theme sombre unique, chaque couleur est donc posee
   explicitement et rien n'est laisse au fond de l'hote.
   ========================================================================== */

:root {
  /* Neutres froids : la pierre. */
  --nuit:      #0E1216;
  --nuit-fond: #0A0D10;
  --pierre:    #161D23;
  --relief:    #1E262E;
  --trait:     #2B363F;
  --trait-vif: #3D4C58;

  /* Encres */
  --craie:     #E9E6DE;
  --estompe:   #96A3AD;
  --sourdine:  #64727D;

  /* Accents : le rouge du logo, et le turquoise glacé qui lui répond.
     Les deux camps de l'illustration, repris dans l'interface. */
  --braise:    #D8352B;
  --braise-vif:#F0483A;
  --laiton:    #45C8E0;

  /* Etats */
  --vert:      #5E9B6B;
  --sang:      #B04B41;

  --mesure:    68ch;
  --large:     1180px;

  --pas: 8px;
  --r-coupe: 10px;
}

/* --------------------------------------------------------------- Socle --- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background-color: var(--nuit-fond);
  /* Aucun motif : deux lueurs seulement, le rouge en haut et le glacé en bas.
     La grille isométrique qui était ici se lisait comme un quadrillage posé
     sur la page, et non comme un fond. */
  background-image:
    radial-gradient(150% 62% at 50% -10%, rgba(216,53,43,.13), transparent 62%),
    radial-gradient(120% 46% at 50% 108%, rgba(69,200,224,.055), transparent 60%);
  background-attachment: fixed;
  color: var(--craie);
  font-family: "Barlow", "Segoe UI", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--braise-vif); text-decoration: none; }
a:hover { color: var(--laiton); }

:focus-visible {
  outline: 2px solid var(--laiton);
  outline-offset: 3px;
}

h1, h2, h3, .titre {
  font-family: "Cinzel", Georgia, serif;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.15;
  text-wrap: balance;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.12rem; letter-spacing: .04em; }

p { margin: 0 0 1em; max-width: var(--mesure); }

.chiffre {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  color: var(--laiton);
}

/* Etiquette gravee : petites capitales espacees, precedees d'un losange. */
.etiquette {
  font-family: "Barlow", sans-serif;
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--braise);
  display: inline-flex;
  align-items: center;
  gap: .7em;
  margin: 0 0 1em;
}
.etiquette::before {
  content: "";
  width: 7px; height: 7px;
  background: var(--braise);
  transform: rotate(45deg);
  flex: none;
}

.contenu {
  width: min(100% - 2.5rem, var(--large));
  margin-inline: auto;
}

section { padding: calc(var(--pas) * 9) 0; }
section.serre { padding: calc(var(--pas) * 6) 0; }

/* Filet grave entre les sections : une ligne qui s'eteint sur les bords. */
.filet {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg, transparent, var(--trait) 18%, var(--trait) 82%, transparent);
}

/* ------------------------------------------------------------- Entete --- */

.entete {
  position: sticky;
  top: 0;
  z-index: 40;
  /* Opaque, et non translucide : l'illustration qui défile dessous formait
     sinon une bande plus sombre, coupée net par la bordure. */
  background: var(--nuit-fond);
  border-bottom: 1px solid var(--trait);
}
.entete .contenu {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 68px;
}

.marque {
  font-family: "Cinzel", Georgia, serif;
  font-weight: 700;
  font-size: 1.32rem;
  letter-spacing: .1em;
  color: var(--craie);
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  white-space: nowrap;
}
.marque:hover { color: var(--craie); }
.marque .sceau {
  width: 22px; height: 22px;
  flex: none;
  background: linear-gradient(150deg, var(--laiton), var(--braise));
  transform: rotate(45deg);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.45);
}
.marque small {
  display: block;
  font-family: "Barlow", sans-serif;
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sourdine);
  margin-top: 2px;
}

.nav {
  display: flex;
  gap: .3rem;
  margin-left: auto;
  flex-wrap: wrap;
}
/* Les entrees se detachaient mal les unes des autres : meme teinte, meme fond,
   aucune limite visible. Chacune porte maintenant son propre cadre, et la page
   courante est franchement marquee plutot que soulignee d'un trait fin. */
.nav a {
  color: var(--craie);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .5rem .85rem;
  position: relative;
  border: 1px solid transparent;
  border-radius: 4px;
  transition: background .15s, border-color .15s, color .15s;
}
.nav a:hover {
  color: var(--laiton);
  background: rgba(255,255,255,.05);
  border-color: var(--trait);
}
.nav a[aria-current="page"] {
  color: var(--laiton);
  background: rgba(210,112,58,.12);
  border-color: var(--braise);
}

/* -------------------------------------------------------------- Etat --- */

.pastille-etat {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--estompe);
  border: 1px solid var(--trait);
  padding: .3rem .7rem;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  background: var(--pierre);
}
.pastille-etat i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--sang);
  flex: none;
}
.pastille-etat.ouvert i { background: var(--vert); box-shadow: 0 0 0 3px rgba(94,155,107,.2); }

/* ------------------------------------------------------------ Boutons --- */

.bouton {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: "Barlow", sans-serif;
  font-weight: 700;
  font-size: .84rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .85rem 1.5rem;
  border: 1px solid var(--braise);
  color: #17100B;
  background: linear-gradient(170deg, var(--braise-vif), var(--braise));
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  transition: transform .14s ease, filter .14s ease;
}
.bouton:hover { filter: brightness(1.09); color: #17100B; transform: translateY(-1px); }
.bouton.sobre {
  background: transparent;
  color: var(--craie);
  border-color: var(--trait-vif);
}
.bouton.sobre:hover { border-color: var(--laiton); color: var(--laiton); }

/* -------------------------------------------------------------- Bloc --- */

/* Bloc de pierre : angles coupes, filet grave, lueur de forge au survol. */
.bloc {
  background:
    linear-gradient(180deg, rgba(255,255,255,.028), transparent 42%),
    var(--pierre);
  border: 1px solid var(--trait);
  clip-path: polygon(var(--r-coupe) 0, 100% 0, 100% calc(100% - var(--r-coupe)), calc(100% - var(--r-coupe)) 100%, 0 100%, 0 var(--r-coupe));
  padding: 1.6rem 1.5rem;
}
.bloc h3 { color: var(--craie); font-size: 1.3rem; margin-bottom: .45rem; }
.bloc p:last-child { margin-bottom: 0; }
.bloc .rang {
  font-family: "IBM Plex Mono", monospace;
  font-size: .72rem;
  color: var(--sourdine);
  letter-spacing: .14em;
}

.grille {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
}
.grille.deux { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

/* -------------------------------------------------------------- Hero --- */

.hero {
  position: relative;
  padding: clamp(3.5rem, 9vw, 7rem) 0 clamp(3rem, 7vw, 5.5rem);
  overflow: hidden;
}
.hero .contenu { position: relative; z-index: 1; }
.hero h1 { max-width: 16ch; }
.hero .accroche {
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  color: var(--estompe);
  max-width: 54ch;
}
.hero .actions { display: flex; gap: .9rem; flex-wrap: wrap; margin-top: 2rem; }

/* Compteurs du hero */
.compteurs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  margin-top: 3.2rem;
  background: var(--trait);
  border: 1px solid var(--trait);
}
.compteurs div {
  background: var(--nuit);
  padding: 1.1rem 1.2rem;
}
.compteurs .valeur {
  font-family: "IBM Plex Mono", monospace;
  font-size: 1.7rem;
  font-weight: 500;
  color: var(--laiton);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.compteurs .quoi {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sourdine);
  margin-top: .35rem;
}

/* ------------------------------------------------------------ Tableau --- */

.cadre-table { overflow-x: auto; border: 1px solid var(--trait); background: var(--pierre); }

table.classement {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
  min-width: 520px;
}
table.classement th {
  text-align: left;
  font-family: "Barlow", sans-serif;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sourdine);
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--trait);
  background: var(--nuit);
  white-space: nowrap;
}
table.classement td {
  padding: .7rem 1rem;
  border-bottom: 1px solid rgba(43,54,63,.55);
  vertical-align: middle;
}
table.classement tr:last-child td { border-bottom: 0; }
table.classement tbody tr:hover td { background: rgba(210,112,58,.05); }
table.classement .place {
  font-family: "IBM Plex Mono", monospace;
  color: var(--sourdine);
  width: 3.2rem;
  font-variant-numeric: tabular-nums;
}
table.classement tr:nth-child(1) .place { color: var(--laiton); }
table.classement tr:nth-child(2) .place { color: #C3CAD0; }
table.classement tr:nth-child(3) .place { color: var(--braise); }
/* Le joueur et sa classe : l'icone a gauche, le nom et la classe empiles a
   droite. La grille tient les deux colonnes alignees d'une ligne a l'autre,
   meme quand un pseudo passe sur deux lignes. */
table.classement .joueur { display: flex; align-items: center; gap: .6rem; }
/* Le nom et la classe se suivent sur deux lignes : sans cet interligne, le bas
   du pseudo touche le haut de la classe et les deux se lisent comme un seul
   mot. */
table.classement .joueur > span { display: flex; flex-direction: column; gap: 3px; line-height: 1.15; }
/* Les portraits sont rendus depuis le vectoriel du client, a quatre fois la
   taille d'affichage : le navigateur les reduit, ce qu'il fait proprement.
   L'inverse - une vignette de seize pixels etiree - les rendait flous a cote
   de ceux du jeu, qui sont dessines a la volee. */
table.classement .icone-classe {
  width: 32px; height: 32px; flex: 0 0 32px;
  object-fit: contain;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--trait);
  border-radius: 4px;
  padding: 2px;
}
table.classement .nom { font-weight: 600; }
table.classement .classe { color: var(--sourdine); font-size: .86rem; }
table.classement .nombre {
  font-family: "IBM Plex Mono", monospace;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.gain { color: var(--vert); }
.perte { color: var(--sang); }
/* La colonne qui fait le classement : c'est elle qu'on cherche du regard en
   arrivant sur le tableau, elle est donc la seule mise en avant. */
.phare { color: var(--laiton); font-weight: 700; }

/* Les trois classements de front, pour qu'ils se comparent d'un coup d'oeil.
   Trois colonnes tiennent dans la largeur du site ; en dessous, la grille
   retombe d'elle-meme a deux puis a une. */
.trio {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: start;
}
.colonne-classement { min-width: 0; }
/* Le titre porte lui-meme le lieu du combat. Ecrit plus discretement que le
   format : c'est « 1 contre 1 » qu'on lit, la parenthese ne fait que lever le
   doute entre les deux. Les trois titres tiennent la meme hauteur, faute de
   quoi un titre sur deux lignes decalerait son tableau. */
.colonne-classement h2 { min-height: 2.4em; }
/* Sur sa propre ligne : sinon le retour a la ligne tombait au milieu du
   format, et on lisait « 1 contre » puis « 1 (Kolizéum) ». */
.colonne-classement h2 .ou {
  display: block;
  color: var(--estompe);
  font-size: .72em;
  font-weight: 500;
  white-space: nowrap;
}
/* Le chapeau tient deux lignes : sans cette hauteur, une phrase plus courte
   remonterait son tableau et les trois ne s'aligneraient plus. */
.colonne-classement .chapeau {
  color: var(--estompe);
  margin: 0 0 1.2rem;
  min-height: 3.2em;
}

.vide {
  padding: 2.4rem 1.2rem;
  text-align: center;
  color: var(--sourdine);
  font-size: .93rem;
}

/* ------------------------------------------------------------- Listes --- */

.liste-losange { list-style: none; padding: 0; margin: 0; max-width: var(--mesure); }
.liste-losange li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: .55rem;
  color: var(--estompe);
}
.liste-losange li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 6px; height: 6px;
  background: var(--braise);
  transform: rotate(45deg);
}
.liste-losange strong { color: var(--craie); font-weight: 600; }

/* Paire cle / valeur, alignee sur une ligne de conduite pointillee. */
.tableau-cle { list-style: none; padding: 0; margin: 0; }
.tableau-cle li {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  padding: .5rem 0;
  border-bottom: 1px dashed rgba(43,54,63,.8);
}
.tableau-cle li:last-child { border-bottom: 0; }
.tableau-cle .cle { color: var(--estompe); }
.tableau-cle .val {
  margin-left: auto;
  font-family: "IBM Plex Mono", monospace;
  color: var(--laiton);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* --------------------------------------------------------------- Etapes --- */

.etapes { counter-reset: etape; display: grid; gap: 1.1rem; }
.etape {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 1.2rem;
  align-items: start;
  border: 1px solid var(--trait);
  background: var(--pierre);
  padding: 1.3rem 1.4rem;
  clip-path: polygon(var(--r-coupe) 0, 100% 0, 100% calc(100% - var(--r-coupe)), calc(100% - var(--r-coupe)) 100%, 0 100%, 0 var(--r-coupe));
}
.etape::before {
  counter-increment: etape;
  content: counter(etape, decimal-leading-zero);
  font-family: "IBM Plex Mono", monospace;
  font-size: 1.35rem;
  color: var(--braise);
  border-right: 1px solid var(--trait);
  padding-right: 1.1rem;
  line-height: 1.5;
}
.etape h3 { margin-bottom: .3rem; }
.etape p { margin-bottom: 0; color: var(--estompe); }

/* ------------------------------------------------------------- Detail --- */

details.faq {
  border: 1px solid var(--trait);
  background: var(--pierre);
  margin-bottom: .7rem;
}
details.faq summary {
  cursor: pointer;
  padding: 1rem 1.2rem;
  font-weight: 600;
  list-style: none;
  display: flex;
  align-items: center;
  gap: .8rem;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::before {
  content: "";
  width: 7px; height: 7px;
  background: var(--braise);
  transform: rotate(45deg);
  transition: transform .18s ease;
  flex: none;
}
details.faq[open] summary::before { transform: rotate(135deg); }
details.faq .corps { padding: 0 1.2rem 1.2rem 2.9rem; color: var(--estompe); }
details.faq .corps p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------- Pied --- */

.pied {
  border-top: 1px solid var(--trait);
  background: var(--nuit);
  padding: 3rem 0 2.2rem;
  margin-top: 4rem;
}
.pied .contenu {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.pied h3 {
  font-family: "Barlow", sans-serif;
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sourdine);
  margin-bottom: .8rem;
}
.pied a { color: var(--estompe); display: block; padding: .18rem 0; font-size: .93rem; }
.pied a:hover { color: var(--laiton); }
.mention {
  border-top: 1px solid var(--trait);
  margin-top: 2.4rem;
  padding-top: 1.4rem;
  color: var(--sourdine);
  font-size: .8rem;
}
.mention p { max-width: none; margin: 0; }

/* ------------------------------------------------------------ Apparition --- */

.paraitre { opacity: 0; transform: translateY(14px); }
.paraitre.vu {
  opacity: 1;
  transform: none;
  transition: opacity .55s ease, transform .55s ease;
}
@media (prefers-reduced-motion: reduce) {
  .paraitre { opacity: 1; transform: none; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .entete .contenu { flex-wrap: wrap; padding-block: .6rem; }
  .nav { margin-left: 0; width: 100%; }
  .etape { grid-template-columns: 40px 1fr; gap: .9rem; }
}

/* ==========================================================================
   DOMINUS — le visuel de marque
   --------------------------------------------------------------------------
   Le socle ci-dessus reste celui de la pierre gravée. Ce qui suit y pose
   l'illustration : la bannière en haut de l'accueil, le logo dans l'en-tête,
   et les deux camps — glace et feu — sur les pages de contenu.
   ========================================================================== */

/* ------------------------------------------------------- Marque et logo --- */

.marque img {
  display: block;
  height: 34px;
  width: auto;
}
.marque .sceau { display: none; }

/* ------------------------------------------------------------ Bannière --- */

.hero.illustree {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 1px solid var(--trait);
}
.hero.illustree::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("/assets/champ.jpg") center 42% / cover no-repeat;
  /* L'illustration porte déjà le logo : on la désature un peu pour que le
     texte posé dessus reste le premier lu. */
  filter: saturate(.92) brightness(.72);
}
.hero.illustree::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, var(--nuit-fond) 4%, rgba(10,13,16,.72) 42%, rgba(10,13,16,.34) 100%),
    linear-gradient(to right, rgba(10,13,16,.86), rgba(10,13,16,.18) 62%);
}
.hero.illustree .contenu { padding-top: 4.5rem; padding-bottom: 3.2rem; }

.hero .logo-hero {
  display: block;
  width: min(420px, 74vw);
  height: auto;
  margin-bottom: 1.6rem;
  filter: drop-shadow(0 10px 34px rgba(0,0,0,.6));
}

/* ------------------------------------------------------- Deux camps --- */

.camps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  background: var(--trait);
  border: 1px solid var(--trait);
  margin-top: 2.4rem;
}
.camp {
  position: relative;
  isolation: isolate;
  min-height: 260px;
  padding: 2rem 1.7rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--pierre);
}
.camp::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
  opacity: .55;
}
.camp::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(10,13,16,.94) 18%, rgba(10,13,16,.42));
}
.camp.glace::before { background-image: url("/assets/bleu.jpg"); }
.camp.feu::before   { background-image: url("/assets/rouge.jpg"); }
.camp h3 { margin: 0 0 .5rem; font-size: 1.35rem; }
.camp p  { margin: 0; color: var(--craie); opacity: .82; }

/* ---------------------------------------------------------- Formulaires --- */

.formulaire {
  max-width: 46ch;
  margin-top: 2rem;
  display: grid;
  gap: 1.35rem;
}
.champ { display: grid; gap: .45rem; }
.champ > label {
  font-size: .82rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--estompe);
}
.champ input {
  width: 100%;
  padding: .78rem .9rem;
  font: inherit;
  color: var(--craie);
  background: var(--nuit);
  border: 1px solid var(--trait);
  border-radius: 3px;
  transition: border-color .15s, box-shadow .15s;
}
.champ input:hover { border-color: var(--trait-vif); }
.champ input:focus {
  outline: none;
  border-color: var(--braise);
  box-shadow: 0 0 0 3px rgba(216,53,43,.22);
}
.champ .aide { font-size: .84rem; color: var(--sourdine); }
.champ.faute input { border-color: var(--sang); }
.champ .reproche { font-size: .86rem; color: #E08A80; }

.formulaire .bouton { justify-self: start; }

.case {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .7rem;
  align-items: start;
  font-size: .92rem;
  color: var(--estompe);
}
.case input { margin-top: .2rem; accent-color: var(--braise); }

/* -------------------------------------------------------------- Avis --- */

.avis {
  padding: 1.1rem 1.3rem;
  border-left: 3px solid var(--trait-vif);
  background: var(--pierre);
  color: var(--craie);
  margin: 1.6rem 0;
}
.avis.bien   { border-left-color: var(--vert); }
.avis.mal    { border-left-color: var(--sang); }
.avis.attente{ border-left-color: var(--laiton); }
.avis p:first-child { margin-top: 0; }
.avis p:last-child  { margin-bottom: 0; }
.avis strong { color: #FFF; }


/* ------------------------------------------------------ Matrice des duels --- */

.matrice {
  border-collapse: collapse;
  width: 100%;
  min-width: 640px;
  font-size: .82rem;
}
.matrice th,
.matrice td {
  border: 1px solid var(--trait);
  padding: .42rem .3rem;
  text-align: center;
}
.matrice thead th {
  color: var(--estompe);
  font-weight: 600;
  letter-spacing: .04em;
  white-space: nowrap;
}
.matrice tbody th {
  text-align: left;
  white-space: nowrap;
  padding-right: .8rem;
  padding-left: .6rem;
  color: var(--craie);
  font-weight: 600;
  background: var(--pierre);
}
.matrice td {
  color: var(--craie);
  font-variant-numeric: tabular-nums;
  min-width: 2.4rem;
}

/* Le nombre de points d'un combat : c'est lui qu'on vient chercher, il passe
   donc devant la phrase qui l'explique. */
.gros-chiffre {
  font-family: "Cinzel", serif;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--laiton);
  margin: .2rem 0 .6rem;
}

/* Une precision de portee sous un titre : a quoi le tableau s'applique. */
.precision {
  color: var(--sourdine);
  font-size: .92rem;
  margin: -.4rem 0 1.2rem;
}