/* ==========================================================================
   Les Chroniques de Barnabé — feuille de style publique
   Direction artistique : grimoire à la chandelle.
   La page est un parchemin clair, chaud et enluminé ; la carte, elle, reste
   une bannière sombre éclairée par l'âtre — le seul endroit où il fait nuit.
   ========================================================================== */

:root {
    /* Surfaces — nuances de parchemin, du plus clair (surélevé) au plus sombre
       (creux). Les noms « ink » sont conservés : ce sont les mêmes rôles, mais
       la lumière est inversée. */
    --ink:            #ece0c4;   /* fond de page — parchemin */
    --ink-2:          #f4ead2;   /* surfaces surélevées : cartes, en-tête, champs */
    --ink-3:          #e0d2af;   /* creux, code, survols */
    --ink-line:       #c1a56f;   /* filets, bordures, séparateurs — brun chaud */

    /* Texte — encre brune sur le parchemin. */
    --parchment:      #2c1e11;   /* texte principal — encre profonde */
    --parchment-soft: #5b4630;   /* texte secondaire */
    --muted:          #71593e;   /* libellés, méta, légendes */

    /* L'âtre — braise et or. --ember est le pivot : il sert d'encre d'accent
       (liens, capitales, filets) ET de fond de bouton avec texte clair, donc il
       doit rester foncé. --ember-bright est l'or de la flamme : réservé aux
       lueurs et aux halos, jamais au petit texte. */
    --ember:          #9c3d17;   /* rouille profonde — accent principal */
    --ember-bright:   #d98a3d;   /* or de chandelle — lueurs, halos, décor */
    --ember-deep:     #6f2a10;   /* oxblood — survol, danger, « non » */
    --moss:           #4f6a2b;   /* vert forêt — « oui », lore */

    --display: "Cinzel", Georgia, "Times New Roman", serif;
    --body:    "Spectral", Georgia, "Times New Roman", serif;
    --util:    "Karla", "Helvetica Neue", Arial, sans-serif;

    --shell:   72rem;
    --radius:  4px;
    --gutter:  clamp(1.25rem, 4vw, 2.5rem);
}

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

html {
    background: var(--ink);
    -webkit-text-size-adjust: 100%;

    /* Le site est clair : que les widgets natifs du navigateur — icône de
       calendrier, flèches des champs nombre, ascenseurs — le soient aussi. */
    color-scheme: light;
}

body {
    margin: 0;
    background: var(--ink);
    color: var(--parchment);
    font-family: var(--body);
    font-weight: 300;
    font-size: 1.0625rem;
    line-height: 1.7;
    font-variant-ligatures: common-ligatures;
    -webkit-font-smoothing: antialiased;
}

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

a { color: var(--ember); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--ember-deep); }

h1, h2, h3, h4, h5 {
    font-family: var(--display);
    font-weight: 600;
    /* Cinzel est une capitale lapidaire : un chouïa d'air entre les lettres et
       de hauteur entre les lignes, là où l'ancienne serif serrait. */
    letter-spacing: 0.012em;
    line-height: 1.16;
    margin: 0 0 0.6em;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------ accessibilité */

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

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--ember);
    color: var(--ink);
    font-family: var(--util);
    font-weight: 700;
    padding: 0.6rem 1rem;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ------------------------------------------------------------------ gabarit */

.shell {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.section { padding-block: clamp(3rem, 8vw, 5.5rem); }
.section--alt { background: var(--ink-2); border-block: 1px solid var(--ink-line); }

.section__title {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    margin-bottom: 1.2rem;
}
.section__title--moss { color: var(--parchment); }
.section__title--moss::after {
    content: "";
    display: block;
    width: 5rem;
    height: 3px;
    margin-top: 1rem;
    border-radius: 2px;
    /* Un filet enluminé : de la braise vers la forêt, puis il s'éteint. */
    background: linear-gradient(to right, var(--ember) 0%, var(--moss) 58%, transparent 100%);
}

.section__lede { max-width: 46rem; margin-bottom: 2.5rem; color: var(--parchment-soft); }
.section__more { margin-top: 2.5rem; }

.eyebrow {
    font-family: var(--util);
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ember);
    margin-bottom: 1rem;
}
/* Petit losange d'enluminure en tête de rubrique. */
.eyebrow::before {
    content: "\25C6\00a0\00a0";   /* ◆ + deux espaces */
    color: var(--moss);
    font-size: 0.82em;
}

.lede {
    font-size: clamp(1.1rem, 2vw, 1.3rem);
    line-height: 1.6;
    color: var(--parchment-soft);
}

.empty {
    font-family: var(--util);
    font-size: 0.95rem;
    color: var(--muted);
    border: 1px dashed var(--ink-line);
    border-radius: var(--radius);
    padding: 1.5rem;
}

/* ------------------------------------------------------------------ en-tête */

.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: color-mix(in srgb, var(--ink) 88%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--ink-line);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 4.25rem;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--parchment);
    text-decoration: none;
}

.brand__mark {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: var(--ember);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--ember) 18%, transparent);
    flex: none;
}

.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__eyebrow {
    font-family: var(--util);
    font-size: 0.6rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
}
.brand__name {
    font-family: var(--display);
    font-variation-settings: "WONK" 1;
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: -0.015em;
}

.site-nav { display: flex; gap: clamp(0.9rem, 3vw, 1.8rem); }
.site-nav a {
    font-family: var(--util);
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--parchment-soft);
    text-decoration: none;
    padding-block: 0.4rem;
    border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--parchment); }
.site-nav a[aria-current="page"] { color: var(--ember); border-bottom-color: var(--ember); }

/* ------------------------------------------------------------------ boutons */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--util);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.85rem 1.5rem;
    border-radius: var(--radius);
    border: 1px solid transparent;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.button--ember {
    background: var(--ember);
    border-color: var(--ember);
    color: var(--ink);
}
.button--ember:hover { background: var(--ember-deep); border-color: var(--ember-deep); color: var(--ink); }

.button--ghost {
    background: transparent;
    border-color: var(--ink-line);
    color: var(--parchment);
}
.button--ghost:hover { border-color: var(--ember); color: var(--ember); }

/* ------------------------------------------------------------------ bandeau */

/* Le bandeau cadre la carte d'Eryndor autour de Briseval.
 *
 * Les quatre premières variables décrivent le fichier image ; les deux
 * dernières, l'endroit du bandeau où Briseval doit tomber. Le placement de la
 * carte s'en déduit — c'est la seule chose à ajuster si l'on remplace
 * eryndor.jpg par une image de proportions ou de cadrage différents.
 *
 * L'unité cqw vaut 1 % de la largeur du bandeau : la carte se positionne donc
 * exactement, quelle que soit la largeur de la fenêtre. */
.hero {
    --map-ratio: 0.75;   /* hauteur / largeur de l'image : 1125 / 1500 */
    --map-bx:    0.400;  /* Briseval, en fraction de la largeur de l'image */
    --map-by:    0.372;  /* Briseval, en fraction de la hauteur de l'image */
    --map-zoom:  1.6;    /* agrandissement, pour dégager la colonne de texte */

    /* Le bandeau garde la nuit. La page est un parchemin clair, mais la carte
       est éclairée à la chandelle : on rétablit ici, et ici seulement, la
       palette sombre du monde. Tout ce qui référence --ink (voiles, fondu) se
       fond donc vers un brun d'âtre, et le titre reste clair et lisible. */
    --ink:            #241811;
    --ink-2:          #2e2015;
    --ink-3:          #1c1109;
    --ink-line:       #7a5c3a;
    --parchment:      #f3e9d2;
    --parchment-soft: #dac9a6;
    --muted:          #b9a884;
    --ember:          #e0913f;
    --ember-bright:   #f4b673;
    --ember-deep:     #b5551f;
    --moss:           #9aad64;

    --hero-h: 46rem;
    --briseval-x: 62%;
    --briseval-y: calc(var(--hero-h) * 0.45);

    container-type: inline-size;
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    min-height: var(--hero-h);
    padding-block: clamp(4rem, 12vw, 7rem);
    overflow: hidden;
    border-bottom: 1px solid var(--ink-line);
}

.hero__map { position: absolute; inset: 0; z-index: -3; background: var(--ink); }
.hero__map img {
    position: absolute;
    max-width: none;
    /* min-width est le filet : même mal réglée, la carte ne peut pas être plus
       étroite que le bandeau et y laisser un vide. */
    min-width: 100%;
    width: calc(100cqw * var(--map-zoom));
    height: auto;
    left: calc(var(--briseval-x) - 100cqw * var(--map-zoom) * var(--map-bx));
    top: calc(var(--briseval-y) - 100cqw * var(--map-zoom) * var(--map-ratio) * var(--map-by));
    /* Chaude et vieillie : sépia léger, teinte d'âtre, comme une carte lue près
       du feu — plutôt que le bleu froid d'avant. */
    filter: sepia(0.42) brightness(0.5) saturate(1.1) contrast(1.02);
}

/* Deux voiles : la lueur ambrée de Briseval, puis le fondu vers le fond. */
.hero__veil {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(42rem 33rem at var(--briseval-x) var(--briseval-y),
            color-mix(in srgb, var(--ember-bright) 34%, transparent) 0%,
            color-mix(in srgb, var(--ember) 22%, transparent) 34%,
            color-mix(in srgb, var(--ember-deep) 12%, transparent) 58%,
            transparent 76%),
        linear-gradient(to bottom,
            color-mix(in srgb, var(--ink) 52%, transparent) 0%,
            color-mix(in srgb, var(--ink) 28%, transparent) 38%,
            var(--ink) 96%);
}

.hero__marker {
    position: absolute;
    top: var(--briseval-y);
    left: var(--briseval-x);
    z-index: -1;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    transform: translate(-50%, -50%);
}

.hero__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ember-bright);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--ember) 26%, transparent);
    animation: breathe 4.5s ease-in-out infinite;
    flex: none;
}

@keyframes breathe {
    0%, 100% { opacity: 0.75; box-shadow: 0 0 0 5px  color-mix(in srgb, var(--ember) 22%, transparent); }
    50%      { opacity: 1;    box-shadow: 0 0 0 14px color-mix(in srgb, var(--ember) 10%, transparent); }
}

.hero__marker-label {
    font-family: var(--util);
    font-weight: 700;
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--parchment);
    text-shadow: 0 1px 6px var(--ink);
    white-space: nowrap;
}

.hero__inner { position: relative; }
.hero__title {
    /* Le titre hérite sinon la couleur déjà calculée du <body> (encre sombre) :
       la palette locale du bandeau ne s'applique qu'aux propriétés qui lisent
       explicitement la variable. On force donc l'encre claire de l'âtre. */
    color: var(--parchment);
    font-size: clamp(2.6rem, 8vw, 5rem);
    max-width: 16ch;
    margin-bottom: 1.2rem;
}
.hero__intro { max-width: 40rem; }
.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 2rem;
}

/* --------------------------------------------------------------- principes */

.principles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 0;
    margin: 0;
    border-top: 1px solid var(--ink-line);
}

.principles__item {
    padding: 1.75rem 0;
    border-bottom: 1px solid var(--ink-line);
    padding-inline-end: 2rem;
}

.principles dt {
    font-family: var(--display);
    font-variation-settings: "WONK" 1;
    font-weight: 500;
    font-size: 1.25rem;
    letter-spacing: -0.015em;
    margin-bottom: 0.5rem;
}

.principles dd {
    margin: 0;
    color: var(--parchment-soft);
    font-size: 0.98rem;
    line-height: 1.65;
}

/* ---------------------------------------------------------------- Barnabé */

.barnabe {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}

.quote {
    margin: 0;
    padding: 2rem;
    border: 1px solid color-mix(in srgb, var(--ember) 35%, var(--ink-line));
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--ember-deep) 10%, var(--ink-3));
}

.quote blockquote {
    margin: 0;
    /* L'épigraphe est une phrase que l'on lit : serif de lecture en italique,
       pas la capitale lapidaire des titres. */
    font-family: var(--body);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.25rem, 2.4vw, 1.6rem);
    line-height: 1.5;
    color: var(--parchment);
}
.quote blockquote p { margin-bottom: 0.6em; }

.quote figcaption {
    margin-top: 1.2rem;
    font-family: var(--util);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ember);
}

/* ------------------------------------------------------------------ grilles */

.grid { display: grid; gap: 1.5rem; }
.grid--characters { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.grid--lore { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }

.tag {
    display: inline-block;
    font-family: var(--util);
    font-weight: 700;
    font-size: 0.65rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 0.55rem;
}
.tag--ember { color: var(--ember); }
.tag--moss { color: var(--moss); }

.card {
    background: var(--ink-2);
    border: 1px solid var(--ink-line);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
    border-color: color-mix(in srgb, var(--ember) 55%, var(--ink-line));
    box-shadow: 0 6px 26px -14px color-mix(in srgb, var(--ember-bright) 70%, transparent);
}

.card__link {
    display: block;
    color: inherit;
    text-decoration: none;
    height: 100%;
}

.card--character .card__link { display: flex; flex-direction: column; }

.card__portrait {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background:
        radial-gradient(120% 90% at 50% 20%, var(--ink-3) 0%, var(--ink) 100%);
    display: grid;
    place-items: center;
}

.card__portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.card--character:hover .card__portrait img { transform: scale(1.04); }

.card__initial {
    font-family: var(--display);
    font-variation-settings: "WONK" 1;
    font-size: 6rem;
    font-weight: 500;
    color: var(--ink-line);
    line-height: 1;
}

.card__body { padding: 1.25rem 1.25rem 1.5rem; }
.card--character:hover .card__body { background: var(--ink-3); }

.card__title { font-size: 1.4rem; margin-bottom: 0.4rem; }
.card__tagline, .card__summary {
    margin: 0;
    color: var(--parchment-soft);
    font-size: 0.95rem;
    line-height: 1.6;
}
.card__subtitle {
    margin: 0 0 0.6rem;
    font-family: var(--util);
    font-size: 0.8rem;
    color: var(--muted);
}

.card--lore .card__link { padding: 1.4rem; transition: transform 0.2s ease; }
.card--lore:hover .card__link { transform: translateY(-3px); }
.card--lore:hover { border-color: color-mix(in srgb, var(--moss) 45%, var(--ink-line)); }

/* Le siège vacant : hachures, pas d'image, pas de lien. */
.card--vacant {
    background-color: var(--ink);
    background-image: repeating-linear-gradient(
        -45deg,
        transparent 0 10px,
        color-mix(in srgb, var(--ink-line) 55%, transparent) 10px 11px
    );
    border-style: dashed;
    display: flex;
    align-items: center;
}
.card--vacant:hover { border-color: var(--ink-line); }
.card__vacant-text {
    margin: 0;
    color: var(--parchment-soft);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* -------------------------------------------------------------- têtes de page */

.page-head {
    padding-block: clamp(3rem, 8vw, 5rem) clamp(1rem, 3vw, 2rem);
    border-bottom: 1px solid var(--ink-line);
}
.page-head--center { text-align: center; border-bottom: 0; }
.page-head--center .hero__actions { justify-content: center; }
.page-head__title { font-size: clamp(2.2rem, 6vw, 3.6rem); }
.page-head .lede { max-width: 44rem; }
.page-head--center .lede { margin-inline: auto; }

/* ------------------------------------------------------------------- prose */

.prose { color: var(--parchment-soft); }
.prose h2, .prose h3, .prose h4, .prose h5 { color: var(--parchment); margin-top: 1.8em; }
.prose h2 { font-size: 1.5rem; }
.prose h3 { font-size: 1.25rem; }
.prose h4, .prose h5 { font-size: 1.1rem; }
.prose > :first-child { margin-top: 0; }

.prose ul, .prose ol { margin: 0 0 1.1em; padding-left: 1.3em; }
.prose li { margin-bottom: 0.35em; }
.prose li::marker { color: var(--ember); }

.prose blockquote {
    margin: 1.6em 0;
    padding: 0.2em 0 0.2em 1.3em;
    border-left: 2px solid var(--ember);
    color: var(--parchment);
    font-style: italic;
}

.prose code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.88em;
    background: var(--ink-3);
    border-radius: 3px;
    padding: 0.1em 0.35em;
}

/* Séparateur enluminé : un filet, coupé en son centre par un fleuron d'âtre. */
.prose hr {
    border: 0;
    height: 0;
    border-top: 1px solid var(--ink-line);
    margin: 2.6em 0;
    position: relative;
    overflow: visible;
}
.prose hr::after {
    content: "\2766";           /* ❦ fleuron */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0 0.7rem;
    background: var(--ink);
    color: var(--ember);
    font-size: 1.05rem;
    line-height: 1;
}

.prose--compact { font-size: 0.95rem; line-height: 1.62; }

/* -------------------------------------------------------- fiche de personnage */

/* La page reprend la composition d'une feuille de personnage imprimée : filet
   d'en-tête, portrait et identité côte à côte, la rangée des six scores, la
   barre des constantes, puis des onglets. Palette et polices sont celles du
   reste du site — encre sombre, lueur d'âtre. */

.sheet__rule {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 0;
    padding-block: 1.1rem 0.85rem;
    border-bottom: 1px solid var(--ink-line);
    font-family: var(--util);
    font-weight: 700;
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
}

/* Sous le portrait, la clé d'enquête peut être longue : l'étiquette garde les
   capitales espacées, la valeur repasse en casse normale et va à la ligne. */
.sheet__rule--under {
    display: block;
    border-bottom: 0;
    border-top: 1px solid var(--ink-line);
    padding-block: 0.7rem 0;
    margin-top: 0.85rem;
}

.sheet__rule--under .sheet__rule-value {
    display: block;
    margin-top: 0.3rem;
    font-weight: 400;
    font-size: 0.85rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--parchment-soft);
}

.sheet__head {
    display: grid;
    grid-template-columns: 20rem minmax(0, 1fr);
    gap: clamp(1.75rem, 4vw, 3.5rem);
    align-items: start;
    padding-block: clamp(2rem, 5vw, 3.25rem);
}

.sheet__portrait {
    aspect-ratio: 3 / 4;
    border: 1px solid var(--ink-line);
    border-radius: var(--radius);
    overflow: hidden;
    background: radial-gradient(120% 90% at 50% 20%, var(--ink-3) 0%, var(--ink) 100%);
    display: grid;
    place-items: center;
}
.sheet__portrait img { width: 100%; height: 100%; object-fit: cover; }

.sheet__name {
    font-size: clamp(2.6rem, 6vw, 4.2rem);
    line-height: 1.02;
    margin-bottom: 0.5rem;
}

.sheet__lineage {
    font-family: var(--body);
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    color: var(--parchment-soft);
    margin-bottom: 1.1rem;
}

/* Les puces encadrées de l'en-tête : bordure fine, jamais de fond plein. */
.pills {
    list-style: none;
    margin: 0 0 1.6rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.pill {
    border: 1px solid var(--ink-line);
    border-radius: var(--radius);
    padding: 0.4rem 0.75rem;
    font-family: var(--util);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--parchment-soft);
}

.pill__label { color: var(--muted); }

.pull-quote {
    margin: 1.6rem 0 0;
    padding-left: 1.1rem;
    border-left: 2px solid var(--ember);
}

.pull-quote blockquote {
    margin: 0 0 0.65rem;
    font-family: var(--body);
    font-style: italic;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--parchment);
}

.pull-quote figcaption {
    font-family: var(--util);
    font-weight: 700;
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
}

/* ------------------------------------------------ les six caractéristiques */

.scores {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.75rem;
}

.score {
    border: 1px solid var(--ink-line);
    border-radius: var(--radius);
    background: var(--ink-2);
    padding: 0.9rem 0.4rem 0.8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    text-align: center;
}

.score__abbr {
    font-family: var(--util);
    font-weight: 700;
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    color: var(--ember);
}

.score__value {
    font-family: var(--display);
    font-variation-settings: "WONK" 1;
    font-weight: 500;
    font-size: clamp(1.9rem, 3.2vw, 2.6rem);
    line-height: 1;
    color: var(--parchment);
}

/* Le modificateur dans sa pastille — le chiffre qu'on lit à la table. */
.score__mod {
    border: 1px solid var(--ink-line);
    border-radius: var(--radius);
    padding: 0.1rem 0.5rem;
    font-family: var(--util);
    font-weight: 600;
    font-size: 0.78rem;
    color: var(--parchment);
    font-variant-numeric: tabular-nums;
}

.score__name {
    font-family: var(--util);
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
}

/* ------------------------------------------------------- les constantes */

.constants {
    list-style: none;
    margin: 0 0 clamp(2rem, 4vw, 2.75rem);
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border: 1px solid var(--ink-line);
    border-radius: var(--radius);
    background: var(--ink-2);
    overflow: hidden;
}

.constants__item {
    padding: 0.95rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    border-left: 1px solid var(--ink-line);
}
.constants__item:first-child { border-left: 0; }

.constants__label {
    font-family: var(--util);
    font-weight: 700;
    font-size: 0.58rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
}

.constants__value {
    font-family: var(--display);
    font-variation-settings: "WONK" 1;
    font-weight: 500;
    font-size: 1.4rem;
    line-height: 1.1;
    color: var(--parchment);
}

/* ------------------------------------------------------------- les onglets */

.tabs__bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    border-bottom: 1px solid var(--ink-line);
}

.tabs__tab {
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: var(--radius) var(--radius) 0 0;
    margin-bottom: -1px;
    padding: 0.7rem 1.15rem;
    cursor: pointer;
    font-family: var(--util);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    transition: color 0.15s ease, background-color 0.15s ease;
}

.tabs__tab:hover { color: var(--parchment); }

.tabs__tab[aria-selected="true"] {
    background: var(--ink-2);
    border-color: var(--ink-line);
    color: var(--ember);
}

/* Sans JavaScript, « tabs--ready » n'est jamais posée : la barre disparaît et
   les quatre panneaux se lisent à la suite, avec leur titre. */
.tabs:not(.tabs--ready) .tabs__bar { display: none; }

.tabs__panel { padding-top: clamp(1.75rem, 3vw, 2.5rem); }

.tabs__split {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: clamp(1.75rem, 4vw, 3rem);
    align-items: start;
}

.tabs__main { max-width: 44rem; min-width: 0; }
.tabs__main--solo { max-width: 52rem; }

.tabs__aside { display: grid; gap: 1.25rem; }

.tabs__note {
    font-family: var(--util);
    font-size: 0.85rem;
    color: var(--muted);
    margin-bottom: 1.5rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--ink-line);
}

.chapter { margin-bottom: 2.5rem; }
.chapter:last-child { margin-bottom: 0; }

.chapter__title {
    font-family: var(--util);
    font-variation-settings: normal;
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ember);
    padding-bottom: 0.6rem;
    margin-bottom: 1.1rem;
    border-bottom: 1px solid var(--ink-line);
}

.chapter--goal .prose { color: var(--parchment); }
.prose--italic { font-style: italic; }
.prose--lead { font-size: 1.08rem; color: var(--parchment); }

/* ----------------------------------------------------------- les encarts */

/* « .panel » est le même encart, sous le nom que lui donnent la page d'univers
   et la page de vote d'une séance. Une seule définition pour les deux. */
.inset,
.panel {
    background: var(--ink-2);
    border: 1px solid var(--ink-line);
    border-radius: var(--radius);
    padding: 1.35rem;
}

.panel--text .prose { color: var(--parchment-soft); }

.inset__title,
.panel__label {
    font-family: var(--util);
    font-variation-settings: normal;
    font-weight: 700;
    font-size: 0.66rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ember);
    margin: 0 0 1rem;
}

/* Étiquette à gauche, texte à droite, séparés par un filet — comme la feuille. */
.traits { margin: 0; }

.traits__row {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: 0.9rem;
    padding: 0.85rem 0;
    border-top: 1px solid var(--ink-line);
}
.traits__row:first-child { border-top: 0; padding-top: 0; }
.traits__row:last-child { padding-bottom: 0; }

.traits dt {
    font-family: var(--util);
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    padding-top: 0.15rem;
}

.traits dd {
    margin: 0;
    font-family: var(--body);
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--parchment-soft);
}

/* Les compétences : nom à gauche, modificateur à droite. */
.statlist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.1rem 2rem;
}

.statlist__item {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-family: var(--util);
    font-size: 0.88rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--ink-line) 55%, transparent);
}

.statlist__item--wide { grid-column: 1 / -1; border-bottom: 0; color: var(--muted); }

.statlist__label { color: var(--parchment-soft); flex: 1 1 auto; }
.statlist__value { font-weight: 600; color: var(--parchment); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ univers */

.map {
    margin: clamp(2rem, 6vw, 3.5rem) 0 0;
    border: 1px solid var(--ink-line);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--ink-2);
}
.map img { width: 100%; }
.map figcaption {
    font-family: var(--util);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: var(--muted);
    padding: 0.9rem 1.2rem;
    border-top: 1px solid var(--ink-line);
}

.lore-detail {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}

.lore-detail__figure {
    margin: 2rem 0;
    border: 1px solid var(--ink-line);
    border-radius: var(--radius);
    overflow: hidden;
}

.lore-detail__aside {
    position: sticky;
    top: 5.5rem;
    background: var(--ink-2);
    border: 1px solid var(--ink-line);
    border-radius: var(--radius);
    padding: 1.5rem;
}
.lore-detail__aside .panel__label { color: var(--moss); }

.link-list { list-style: none; margin: 0; padding: 0; }
.link-list li { border-top: 1px solid var(--ink-line); }
.link-list li:first-child { border-top: 0; }
.link-list a {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.7rem 0;
    text-decoration: none;
    color: var(--parchment);
}
.link-list a:hover .link-list__title { color: var(--ember); }
.link-list__title { font-family: var(--util); font-weight: 600; font-size: 0.92rem; }
.link-list__meta {
    font-family: var(--util);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
}

.back-link { margin-top: 2.5rem; font-family: var(--util); font-size: 0.85rem; }
.back-link a { text-decoration: none; }

/* ------------------------------------------------------------------- pied */

.site-footer {
    border-top: 1px solid var(--ink-line);
    background: var(--ink-2);
    padding-block: 2.5rem;
    margin-top: auto;
}
.site-footer__inner { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; justify-content: space-between; }
.site-footer__line { margin: 0; font-family: var(--util); font-size: 0.8rem; color: var(--parchment-soft); }
.site-footer__muted a { color: var(--muted); text-decoration: none; }
.site-footer__muted a:hover { color: var(--ember); }

/* -------------------------------------------------------------- responsive */

@media (max-width: 62rem) {
    /* Sans le repère, le cadrage exact n'a plus d'objet : la carte redevient
       une simple texture de fond, recadrée autour de Briseval. */
    .hero__marker { display: none; }
    .hero { min-height: min(38rem, 80vh); }
    .hero__map img {
        inset: 0;
        left: auto;
        top: auto;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 40% 37%;
    }

    .barnabe,
    .lore-detail { grid-template-columns: minmax(0, 1fr); }

    .lore-detail__aside { position: static; }

    .sheet__head { grid-template-columns: 13rem minmax(0, 1fr); }

    .scores { grid-template-columns: repeat(3, 1fr); }
    .constants { grid-template-columns: repeat(3, 1fr); }
    .constants__item:nth-child(3n + 1) { border-left: 0; }
    .constants__item:nth-child(n + 4) { border-top: 1px solid var(--ink-line); }

    .tabs__split { grid-template-columns: minmax(0, 1fr); }
    .tabs__main, .tabs__main--solo { max-width: 46rem; }
}

@media (max-width: 34rem) {
    body { font-size: 1rem; }

    .site-header__inner { flex-wrap: wrap; min-height: 0; padding-block: 0.75rem; gap: 0.5rem 1rem; }
    .site-nav { width: 100%; }

    .sheet__head { grid-template-columns: minmax(0, 1fr); }
    .sheet__portrait { max-width: 13rem; }

    .grid--characters, .grid--lore { grid-template-columns: minmax(0, 1fr); }

    .hero__actions .button { width: 100%; }

    .scores { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
    .constants { grid-template-columns: repeat(2, 1fr); }
    .constants__item:nth-child(odd) { border-left: 0; }
    .constants__item:nth-child(n + 3) { border-top: 1px solid var(--ink-line); }

    .statlist { grid-template-columns: minmax(0, 1fr); }
    .traits__row { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; }
    .tabs__tab { padding: 0.6rem 0.8rem; font-size: 0.66rem; letter-spacing: 0.1em; }
    .inset, .panel { padding: 1.15rem; }
    .quote { padding: 1.4rem; }
}

/* --------------------------------------------------------------- mouvement */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .hero__dot { animation: none; opacity: 1; }
}

/* --------------------------------------------------------------------------
   Séances — la page d'invitation, et la grille des réponses.
   Le tableau sert aussi au dépouillement dans l'administration : ces classes
   sont donc écrites ici, la seule feuille chargée des deux côtés.
   -------------------------------------------------------------------------- */

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 0.9rem;
    margin: 0 0 0.6rem;
}
.tags .tag { margin: 0; }

.notice {
    font-family: var(--util);
    font-size: 0.9rem;
    border-left: 3px solid var(--moss);
    background: var(--ink-2);
    padding: 0.7rem 1rem;
    margin: 0 0 1.2rem;
    border-radius: 0 var(--radius) var(--radius) 0;
}
.notice--error { border-left-color: var(--ember); }

/* La grille : un créneau par ligne, un joueur par colonne. */
.board-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 0 1.4rem;
}

.board {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--util);
    font-size: 0.9rem;
    text-align: left;
}
.board th,
.board td {
    border-bottom: 1px solid var(--ink-line);
    padding: 0.6rem 0.7rem;
    vertical-align: middle;
}
.board thead th {
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
}
.board__slot {
    font-weight: 400;
    color: var(--parchment);
    white-space: nowrap;
}
.board__slot .tag { margin: 0 0 0 0.6rem; }
.board__who,
.board__cell { text-align: center; }
.board__cell {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--muted);
}
.board__cell--yes { color: var(--moss); }
.board__cell--maybe { color: var(--ember); }
.board__cell--no { color: var(--ember-deep); }
.board__score {
    text-align: right;
    white-space: nowrap;
    color: var(--parchment-soft);
}
.board__maybe {
    display: block;
    font-size: 0.7rem;
    color: var(--muted);
}
.board__row--chosen { background: color-mix(in srgb, var(--ember) 12%, transparent); }

.board-notes {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    font-family: var(--util);
    font-size: 0.9rem;
    color: var(--parchment-soft);
}
.board-notes li { margin: 0 0 0.35rem; }

/* Le bulletin. */
.vote-form { margin: 0 0 1rem; }

.vote-form__identity {
    display: grid;
    gap: 1.2rem;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    margin: 0 0 1.6rem;
}

/* En colonne — c'est le cas sur un téléphone — l'écart entre deux champs est
   celui de la grille, pas celui de la grille plus la marge du champ. Sans
   cette ligne, le nom et l'adresse s'espacent deux fois plus que le reste. */
.vote-form__identity .vote-field { margin: 0; }

.vote-field { display: block; margin: 0 0 1.2rem; }
.vote-field__label {
    display: block;
    font-family: var(--util);
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 0.4rem;
}
.vote-field__hint {
    display: block;
    font-family: var(--util);
    font-size: 0.8rem;
    color: var(--muted);
    margin: 0.35rem 0 0;
}
.vote-field input,
.vote-field textarea {
    width: 100%;
    background: var(--ink-2);
    border: 1px solid var(--ink-line);
    border-radius: var(--radius);
    color: var(--parchment);
    font-family: var(--util);
    font-size: 1rem;
    padding: 0.6rem 0.75rem;
}

/* 44 px : la cible que le pouce atteint sans viser. La taille de texte reste
   à 1rem, seule façon d'empêcher Safari de zoomer à la mise au point. */
.vote-field input { min-height: 2.75rem; }
.vote-field--area textarea { min-height: 8rem; }
.vote-field input:focus,
.vote-field textarea:focus {
    outline: 2px solid var(--ember);
    outline-offset: 1px;
}
.vote-field textarea { resize: vertical; }

.vote-list {
    list-style: none;
    margin: 0 0 1.6rem;
    padding: 0;
}

.vote-slot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem 1.2rem;
    border-bottom: 1px solid var(--ink-line);
    padding: 0.9rem 0;
}

.vote-slot__when {
    margin: 0;
    font-family: var(--util);
    font-size: 0.95rem;
}

.vote-slot__choices { display: flex; gap: 0.4rem; }

/* Trois boutons plutôt que trois ronds : au doigt, sur un téléphone, la
   différence est tout le confort du vote. */
.choice {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-family: var(--util);
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    color: var(--muted);
    border: 1px solid var(--ink-line);
    border-radius: var(--radius);
    padding: 0.45rem 0.8rem;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.choice input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    inset: 0;
    margin: 0;
    cursor: pointer;
}
.choice:hover { color: var(--parchment); }
.choice input:focus-visible { outline: none; }
.choice:has(input:focus-visible) { outline: 2px solid var(--ember); outline-offset: 2px; }
.choice:has(input:checked) {
    color: var(--ink);
    background: var(--parchment-soft);
    border-color: var(--parchment-soft);
}
.choice--yes:has(input:checked) { background: var(--moss); border-color: var(--moss); color: var(--ink); }
.choice--maybe:has(input:checked) { background: var(--ember-bright); border-color: var(--ember-bright); color: var(--parchment); }
.choice--no:has(input:checked) { background: var(--ember-deep); border-color: var(--ember-deep); color: var(--ink); }

@media (max-width: 40rem) {
    .vote-slot { flex-direction: column; align-items: stretch; }
    .vote-slot__choices { display: grid; grid-template-columns: repeat(3, 1fr); }
    .choice { justify-content: center; }
    .board th,
    .board td { padding: 0.5rem 0.45rem; }
}

/* Le titre de la quête, sur la page d'invitation : c'est l'information que le
   joueur cherche en premier, elle se lit comme un titre. */
.quest-card__title {
    font-size: clamp(1.35rem, 3vw, 1.7rem);
    margin: 0 0 0.5rem;
}

/* ==========================================================================
   Une colonne étroite, pour les pages qui se lisent plutôt qu'elles ne se
   parcourent : le formulaire de contact, le mot de la fin des bases.
   ========================================================================== */

.shell--narrow { max-width: 46rem; }

/* --------------------------------------------------------- une ligne à copier
   Servie sur la page publique comme dans l'administration : le lien personnel
   d'un joueur ici, le lien d'invitation et la liste des adresses là-bas. La
   feuille de l'administration repasse ensuite sa propre palette dessus. */

.copyline { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.copyline__field {
    flex: 1 1 22rem;
    width: 100%;
    font-family: var(--util);
    font-size: 0.85rem;
    background: var(--ink-2);
    border: 1px solid var(--ink-line);
    border-radius: var(--radius);
    color: var(--parchment-soft);
    padding: 0.6rem 0.7rem;
}

/* ------------------------------------------------------- reprendre un bulletin
   Un dépliant, pas un formulaire de connexion : la reprise par code est une
   commodité, pas le chemin principal. Elle ne doit pas encombrer la page de
   celui qui répond pour la première fois. */

.resume {
    border: 1px solid var(--ink-line);
    border-radius: var(--radius);
    padding: 0.9rem 1.1rem;
    margin: 0 0 1.8rem;
    background: var(--ink-2);
}
.resume__summary {
    font-family: var(--util);
    font-size: 0.88rem;
    color: var(--parchment-soft);
    cursor: pointer;
}
.resume__summary:hover { color: var(--parchment); }
.resume__note {
    font-family: var(--util);
    font-size: 0.84rem;
    color: var(--muted);
    margin: 0.9rem 0 1rem;
}
.resume__form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.9rem; }
.resume__form .vote-field { flex: 1 1 14rem; margin: 0; }
.resume__form input { text-transform: uppercase; letter-spacing: 0.18em; }

/* Le code personnel : assez gros pour se lire à voix haute d'un coup d'œil. */
.code-badge {
    display: inline-block;
    font-family: var(--util);
    font-weight: 700;
    font-size: clamp(1.6rem, 5vw, 2.4rem);
    letter-spacing: 0.22em;
    color: var(--ember);
    background: var(--ink-2);
    border: 1px solid var(--ink-line);
    border-radius: var(--radius);
    padding: 0.6rem 1.2rem 0.6rem 1.4rem;
    margin: 0 0 1.2rem;
}

/* ------------------------------------------------------------------- contact
   Le pot de miel se cache sans display:none : certains automates ignorent les
   champs cachés de cette façon, et remplissent tout le reste. */

.choice-set { border: 0; padding: 0; margin: 0 0 1.6rem; }

/* Des pastilles de même largeur, trois de front sur un écran large et une par
   ligne sur un téléphone. Au retour à la ligne libre, elles s'alignaient sur
   la longueur de leur texte : deux d'un côté, une orpheline de l'autre, et
   trois cibles de tailles différentes à viser au pouce. */
.choice-set__options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.choice-set .choice {
    justify-content: center;
    text-align: center;
    min-height: 2.75rem;
    padding: 0.55rem 0.8rem;
}

/* Ce choix-là commande la suite du message : il se marque à la couleur de
   l'âtre, et non au parchemin des trois réponses d'un vote. */
.choice-set .choice:has(input:checked) {
    background: var(--ember);
    border-color: var(--ember);
    color: var(--ink);
}

.honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ==========================================================================
   Les bases du jeu
   ========================================================================== */

.basics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    gap: 1.2rem;
}

.basics__card {
    background: var(--ink-2);
    border: 1px solid var(--ink-line);
    border-radius: var(--radius);
    padding: 1.5rem 1.6rem;
}

/* La première carte tient sur toute la largeur : c'est la seule règle qu'il
   faut avoir lue, les autres ne sont que des cas particuliers de celle-là. */
.basics__card--wide {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem 2.5rem;
    background: var(--ink-3);
}
.basics__die { flex: 0 0 auto; color: var(--ember); }
.basics__text { flex: 1 1 22rem; }

.die { width: clamp(7rem, 22vw, 10rem); height: auto; }
.die__number {
    fill: var(--parchment);
    font-family: var(--util);
    font-weight: 700;
    font-size: 1.6rem;
    letter-spacing: 0.02em;
}

.basics__label {
    font-family: var(--util);
    font-weight: 700;
    font-size: 0.65rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 0.5rem;
}
.basics__title { font-size: clamp(1.3rem, 3vw, 1.6rem); margin: 0 0 0.7rem; }
.basics__card p { font-size: 0.98rem; }
.basics__note {
    font-family: var(--util);
    font-size: 0.83rem;
    color: var(--muted);
    line-height: 1.6;
}

/* La formule, énoncée une fois et détachée du texte : c'est la phrase que
   quelqu'un doit pouvoir répéter en sortant de la page. */
.formula {
    font-family: var(--util);
    font-weight: 700;
    font-size: clamp(0.95rem, 2.4vw, 1.15rem);
    color: var(--ember);
    background: var(--ink);
    border-left: 3px solid var(--ember);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    margin: 0 0 1.1em;
}

/* Les modificateurs : le score à gauche, ce qu'on ajoute à droite. */
.mods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(4.5rem, 1fr));
    gap: 0.4rem;
    list-style: none;
    margin: 0 0 1.1em;
    padding: 0;
}
.mods__item {
    text-align: center;
    background: var(--ink);
    border: 1px solid var(--ink-line);
    border-radius: var(--radius);
    padding: 0.5rem 0.3rem;
}
.mods__score {
    display: block;
    font-family: var(--util);
    font-size: 0.72rem;
    color: var(--muted);
}
.mods__value {
    display: block;
    font-family: var(--util);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--ember);
}

/* Les degrés de difficulté, et les dés : deux listes de la même famille. */
.dc-list, .dice-list, .turn-list { list-style: none; margin: 0 0 1.1em; padding: 0; }

.dc-list__item, .dice-list__item {
    display: flex;
    align-items: baseline;
    gap: 0.9rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--ink-line);
}
.dc-list__item:last-child, .dice-list__item:last-child { border-bottom: 0; }

.dc-list__value, .dice-list__name {
    flex: 0 0 2.6rem;
    font-family: var(--util);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--ember);
}
.dice-list__name { flex-basis: 2.8rem; }

.dc-list__body { display: block; font-size: 0.92rem; }
.dc-list__example, .dice-list__use {
    display: block;
    font-family: var(--util);
    font-size: 0.8rem;
    color: var(--muted);
    line-height: 1.55;
}
.dice-list__use { display: inline; }

.turn-list li {
    position: relative;
    padding-left: 1.1rem;
    margin: 0 0 0.45rem;
    font-size: 0.95rem;
}
.turn-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 5px;
    height: 5px;
    background: var(--ember);
    transform: rotate(45deg);
}