/**
 * TIRAGE ALÉATOIRE — feuille de style unique et autonome.
 *
 * L'outil ne dépend d'aucun CSS de l'encyclopédie : il ne lui emprunte que
 * ses données et ses images. La palette, en revanche, est volontairement la
 * même (parchemin, encre brune et or, reprise du gabarit des cartes) pour que
 * les trois outils du site se lisent comme une seule famille.
 */

/* ===============================================================
   1. Jetons de style
   =============================================================== */

:root {
    --odv-encre: #2f261e;
    --odv-encre-douce: #6b5f51;
    --odv-encre-pale: #9a8d7c;
    --odv-parchemin: #f4f0e7;
    --odv-parchemin-creux: #ebe5d8;
    --odv-panneau: #fffdf9;
    --odv-bordure: #ddd4c4;
    --odv-bordure-forte: #c4b8a2;
    --odv-or: #a67c3d;
    --odv-or-clair: #c39a54;
    --odv-or-voile: rgba(166, 124, 61, .16);
    --odv-nuit: #1a1613;

    --odv-rouge: #a8332c;
    --odv-bleu: #2f6ea8;
    --odv-vert: #2f7d44;
    --odv-jaune: #c8a22b;
    --odv-violet: #6f3f96;

    --odv-rayon: 3px;
    --odv-rayon-large: 6px;
    --odv-ombre: 0 1px 2px rgba(47, 38, 30, .06), 0 4px 16px rgba(47, 38, 30, .06);
    --odv-ombre-forte: 0 2px 4px rgba(47, 38, 30, .08), 0 12px 32px rgba(47, 38, 30, .12);
    --odv-transition: 140ms ease;

    --odv-largeur: 1280px;
}

/* ===============================================================
   2. Coque
   =============================================================== */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    width: 100%;
    overflow-x: hidden;
    background-color: var(--odv-parchemin);
    color: var(--odv-encre);
    font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* Le bandeau porte le logo seul — « L'Ordre de Veiel », sans sous-titre — et
   la page écrit en dessous le nom de l'outil. Une seule image sert ainsi les
   trois outils du site. */
h1 {
    margin: 0;
    padding: 1.5em 1.5em 1.4em;
    text-align: center;
    background-color: var(--odv-nuit);
    /* Un filet doré très fin sépare le bandeau du contenu, comme la
       tranche dorée d'un livre. */
    border-bottom: 1px solid rgba(166, 124, 61, .45);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .18);
    font-weight: 400;
    line-height: normal;
}

.entete-logo {
    display: block;
    width: min(430px, 78%);
    height: auto;
    margin: 0 auto;
}

.entete-sous-titre {
    display: block;
    margin-top: .95em;
    font-family: Georgia, "Iowan Old Style", serif;
    font-size: clamp(.66rem, 1.5vw, .85rem);
    letter-spacing: .3em;
    text-transform: uppercase;
    color: rgba(233, 219, 199, .72);
    /* L'interlettrage ajoute une espace après la dernière lettre : sans ce
       rattrapage, la ligne paraît décalée d'un cran vers la gauche. */
    text-indent: .3em;
}

/* Intertitre à filets : le même dispositif que sur l'encyclopédie. */
.section-title {
    display: flex;
    align-items: center;
    gap: 1.2em;
    max-width: var(--odv-largeur);
    margin: 2.6em auto 1.2em;
    padding: 0 1.5em;
    font-size: 1.05em;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--odv-encre);
}

.section-title::before,
.section-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--odv-bordure-forte));
}

.section-title::after {
    background: linear-gradient(to left, transparent, var(--odv-bordure-forte));
}

.page {
    max-width: var(--odv-largeur);
    margin: 0 auto;
    padding: 0 1.5em 3em;
}

/* Dans la page, le conteneur porte déjà la marge latérale : l'intertitre
   ne doit pas en ajouter une seconde. */
.page .section-title {
    margin: 2.6em 0 1.2em;
    padding: 0;
}

/* ===============================================================
   3. Panneaux et champs
   =============================================================== */

.panel {
    background-color: var(--odv-panneau);
    border: 1px solid var(--odv-bordure);
    border-radius: var(--odv-rayon-large);
    box-shadow: var(--odv-ombre);
    padding: 1.6em 1.8em 1.8em;
    margin-bottom: 1.6em;
}

.panel-title {
    margin: 0 0 1.2em;
    padding-bottom: .5em;
    border-bottom: 1px solid var(--odv-bordure);
    position: relative;
    font-size: 1.15em;
    font-weight: 600;
    letter-spacing: .01em;
}

/* Un court trait doré doublait ce filet, un pixel plus haut : deux lignes
   pour un seul titre, dont l'une décalée. Le filet suffit. */

.field+.field {
    margin-top: 1.6em;
}

.label {
    display: block;
    font-weight: 600;
    font-size: .95em;
    margin-bottom: .6em;
}

.hint {
    font-size: .88em;
    line-height: 1.55;
    color: var(--odv-encre-douce);
    margin: .6em 0 0;
    padding-left: .9em;
    border-left: 2px solid var(--odv-bordure);
    max-width: 62em;
}

/* ===============================================================
   4. Choix des extensions
   =============================================================== */

/* Deux rangées : les visuels en paysage (le jeu de base, les Archives
   oubliées), puis les visuels en portrait. Les deux formats ont des tailles
   transposées — 182 × 130 contre 130 × 182 — de sorte que les vignettes
   occupent la même surface d'une rangée à l'autre, sans qu'aucune image
   n'ait besoin d'être rognée. */
.extensions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1em;
    /* La phrase d'explication juste au-dessus touchait le bord de la
       première vignette. */
    margin-top: 1.5em;
}

.ext-rangee {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1em;
}

.ext-card {
    display: flex;
    flex-direction: column;
    width: 130px;
    text-align: center;
    cursor: pointer;
    padding: 7px;
    border: 1px solid transparent;
    border-radius: var(--odv-rayon-large);
    background: none;
    font: inherit;
    color: inherit;
    transition: transform var(--odv-transition), box-shadow var(--odv-transition),
        border-color var(--odv-transition), background-color var(--odv-transition);
}

.ext-rangee--paysage .ext-card {
    width: 182px;
}

.ext-card img {
    width: 100%;
    display: block;
    /* Le format exact des visuels : le cadrage ne rogne donc rien, il ne
       sert qu'à garantir des rangées parfaitement alignées. */
    aspect-ratio: 525 / 736;
    object-fit: cover;
    border-radius: var(--odv-rayon);
    box-shadow: 0 1px 3px rgba(47, 38, 30, .2);
    /* Les boîtes non retenues restent lisibles mais s'effacent derrière
       celles que le joueur a choisies. */
    filter: saturate(.75) brightness(.98);
    transition: filter var(--odv-transition);
}

.ext-rangee--paysage .ext-card img {
    aspect-ratio: 736 / 525;
}

/* « flex: 1 » sur le nom : quel que soit le nombre de lignes qu'il prend,
   les décomptes restent alignés d'une vignette à l'autre. */
.ext-card .ext-nom {
    display: block;
    flex: 1;
    margin-top: .5em;
    font-size: .8em;
    line-height: 1.3;
    color: var(--odv-encre-douce);
}

.ext-card .ext-compte {
    display: block;
    margin-top: .25em;
    font-size: .72em;
    color: var(--odv-encre-pale);
    font-variant-numeric: tabular-nums;
}

/* « :not([aria-pressed="true"]) » : le sélecteur de survol est plus
   spécifique que celui de l'état retenu et lui reprenait son filet doré —
   survoler une boîte déjà cochée la faisait paraître décochée. */
.ext-card:hover:not(:disabled):not([aria-pressed="true"]) {
    transform: translateY(-3px);
    box-shadow: var(--odv-ombre-forte);
    border-color: var(--odv-bordure);
    background-color: var(--odv-panneau);
}

.ext-card[aria-pressed="true"]:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 0 1px var(--odv-or), var(--odv-ombre-forte);
}

.ext-card:hover:not(:disabled) img {
    filter: none;
}

.ext-card[aria-pressed="true"] {
    border-color: var(--odv-or);
    box-shadow: 0 0 0 1px var(--odv-or), var(--odv-ombre);
    background-color: var(--odv-panneau);
}

.ext-card[aria-pressed="true"] img {
    filter: none;
}

.ext-card[aria-pressed="true"] .ext-nom {
    color: var(--odv-encre);
    font-weight: 700;
}

.ext-card:disabled {
    cursor: not-allowed;
    opacity: .4;
}

.ext-card:disabled img {
    filter: grayscale(1);
}

.ext-card:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--odv-or-voile);
}

/* ===============================================================
   4 bis. Couleurs écartées et couleurs imposées
   =============================================================== */

/* Les deux listes côte à côte tant qu'il y a la place : elles portent sur la
   même matière et se lisent l'une par rapport à l'autre. */
.couleurs-filtres {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.4em 2.2em;
    margin-top: 1.8em;
    padding-top: 1.4em;
    border-top: 1px solid var(--odv-bordure);
}

.couleurs-filtres > .field + .field {
    margin-top: 0;
}

.couleurs {
    display: flex;
    flex-wrap: wrap;
    gap: .4em;
}

.couleur {
    display: inline-flex;
    align-items: center;
    gap: .45em;
    padding: .42em .8em;
    font: inherit;
    font-size: .92em;
    line-height: 1.2;
    color: var(--odv-encre-douce);
    background-color: transparent;
    border: 1px solid var(--odv-bordure);
    border-radius: 999px;
    cursor: pointer;
    transition: border-color var(--odv-transition), color var(--odv-transition),
        background-color var(--odv-transition), opacity var(--odv-transition);
}

/* « :not([aria-pressed="true"]) » n'est pas une précaution de style : sans
   lui, le survol l'emporterait sur l'état coché — même poids, mais déclaré
   plus loin — et une couleur barrée redeviendrait normale sous le curseur. */
.couleur:not([aria-pressed="true"]):not(:disabled):hover {
    border-color: var(--odv-bordure-forte);
    color: var(--odv-encre);
}

.couleur:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--odv-or-voile);
}

/* Une couleur déjà retenue dans l'autre rangée : le choix inverse n'a pas de
   sens et le bouton le dit avant qu'on essaie. */
.couleur:disabled {
    cursor: not-allowed;
    opacity: .3;
}

/* Écartée : la couleur est barrée et s'efface. L'état se lit sans couleur ni
   pictogramme, ce qui reste vrai pour qui ne distingue pas les teintes. */
.couleur--ecartee[aria-pressed="true"] {
    color: var(--odv-encre-douce);
    border-color: var(--odv-bordure);
    border-style: dashed;
    text-decoration: line-through;
    opacity: .55;
}

.couleur--ecartee[aria-pressed="true"] .pastille {
    filter: grayscale(1);
}

/* Imposée : la pastille est cerclée d'or et le libellé passe en gras. */
.couleur--imposee[aria-pressed="true"] {
    color: var(--odv-encre);
    font-weight: 700;
    border-color: var(--odv-or);
    background-color: var(--odv-or-voile);
}

.couleur--imposee[aria-pressed="true"]::after {
    content: "✓";
    font-weight: 700;
    color: var(--odv-or);
}

/* ===============================================================
   5. Réglages du tirage
   =============================================================== */

.reglages {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.8em;
    align-items: start;
}

/* « .field + .field » ajoute une marge haute aux champs qui se suivent —
   utile quand ils sont empilés, désastreux ici : les trois colonnes sont
   des voisines, et les deuxième et troisième se retrouvaient décalées
   d'un cran vers le bas. */
.reglages > .field + .field {
    margin-top: 0;
}

/* Le nombre de héros : cinq cases plutôt qu'une liste déroulante — le
   choix se fait d'un seul geste et la valeur reste visible. */
.compteur {
    display: flex;
    gap: .4em;
}

/* Les cases de chiffres et la liste déroulante voisine partagent la même
   taille de texte, le même rembourrage et la même hauteur de ligne : elles
   font donc exactement la même hauteur, alors que les cases dépassaient
   la liste d'une bonne demi-douzaine de pixels. */
.compteur button {
    flex: 1;
    min-width: 2.8em;
    padding: .55em 0;
    font: inherit;
    font-size: 1em;
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
    color: var(--odv-encre-douce);
    background-color: var(--odv-parchemin);
    border: 1px solid var(--odv-bordure);
    border-radius: var(--odv-rayon);
    cursor: pointer;
    transition: background-color var(--odv-transition), border-color var(--odv-transition),
        color var(--odv-transition);
}

.compteur button:hover {
    border-color: var(--odv-bordure-forte);
    color: var(--odv-encre);
}

.compteur button[aria-pressed="true"] {
    background-color: var(--odv-encre);
    border-color: var(--odv-encre);
    color: var(--odv-parchemin);
    font-weight: 700;
}

select {
    width: 100%;
    padding: .55em .9em;
    font-family: inherit;
    font-size: 1em;
    line-height: 1.35;
    color: var(--odv-encre);
    background-color: #fff;
    border: 1px solid var(--odv-bordure);
    border-radius: var(--odv-rayon);
    cursor: pointer;
    transition: border-color var(--odv-transition), box-shadow var(--odv-transition);
}

select:focus {
    outline: none;
    border-color: var(--odv-or);
    box-shadow: 0 0 0 3px var(--odv-or-voile);
}

/* Cases à cocher : la case native est remplacée par un carré à l'encre,
   plus proche du reste et lisible sur parchemin. */
.check {
    display: flex;
    align-items: flex-start;
    gap: .7em;
    cursor: pointer;
    margin-bottom: .8em;
}

.check:last-child {
    margin-bottom: 0;
}

.check input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.check .boite {
    flex: 0 0 auto;
    width: 1.1em;
    height: 1.1em;
    margin-top: .18em;
    border: 1px solid var(--odv-bordure-forte);
    border-radius: 2px;
    background-color: #fff;
    position: relative;
    transition: background-color var(--odv-transition), border-color var(--odv-transition);
}

.check .boite::after {
    content: "";
    position: absolute;
    left: .32em;
    top: .1em;
    width: .28em;
    height: .58em;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: transform var(--odv-transition);
}

.check input:checked+.boite {
    background-color: var(--odv-or);
    border-color: var(--odv-or);
}

.check input:checked+.boite::after {
    transform: rotate(45deg) scale(1);
}

.check input:focus-visible+.boite {
    box-shadow: 0 0 0 3px var(--odv-or-voile);
}

.check .texte {
    font-size: .92em;
    color: var(--odv-encre-douce);
}

.check input:checked~.texte {
    color: var(--odv-encre);
}

/* ===============================================================
   6. Boutons
   =============================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55em;
    font-family: inherit;
    font-size: 1em;
    padding: .6em 1.4em;
    border-radius: var(--odv-rayon);
    border: 1px solid var(--odv-bordure-forte);
    background-color: transparent;
    color: var(--odv-encre-douce);
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--odv-transition), border-color var(--odv-transition),
        color var(--odv-transition), transform var(--odv-transition);
}

.btn:hover {
    background-color: var(--odv-parchemin-creux);
    color: var(--odv-encre);
}

.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--odv-or-voile);
}

/* L'action principale se distingue par sa couleur, pas par sa taille : le
   corps et le rembourrage sont ceux du bouton ordinaire, sans quoi les
   deux boutons de la barre ne s'alignaient ni en hauteur ni en base. */
.btn-principal {
    background-color: var(--odv-encre);
    border-color: var(--odv-encre);
    color: var(--odv-parchemin);
    font-weight: 700;
    letter-spacing: .02em;
}

.btn-principal:hover {
    background-color: var(--odv-or);
    border-color: var(--odv-or);
    color: #fff;
    transform: translateY(-1px);
}

/* « stretch » plutôt que « center » : l'émoji du bouton principal a des
   métriques un peu plus hautes que du texte ordinaire, ce qui lui donnait
   deux pixels de plus que son voisin. Étirés, les deux boutons de la barre
   font exactement la même hauteur quoi qu'ils contiennent. */
.barre-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75em;
    align-items: stretch;
    margin-top: 1.6em;
    padding-top: 1.4em;
    border-top: 1px solid var(--odv-bordure);
}


/* ===============================================================
   7. Résultats
   =============================================================== */

.tirage-vide {
    text-align: center;
    padding: 3em 1.5em;
    color: var(--odv-encre-douce);
    font-style: italic;
    border: 1px dashed var(--odv-bordure-forte);
    border-radius: var(--odv-rayon-large);
}

/* Le décompte de ce qui reste dans le chapeau, sous la grille des
   extensions : c'est d'elles qu'il dépend.
   Le cadre est le même dans tous les cas — seule la couleur change quand il
   y a un problème. Une information qui se déplace ou change de forme selon
   son contenu se relit moins bien qu'une information qui reste en place. */
.disponibilite {
    max-width: 46em;
    margin: 1.6em auto 0;
    padding: .8em 1.3em;
    border-radius: var(--odv-rayon);
    background-color: var(--odv-parchemin);
    border: 1px solid var(--odv-bordure);
    border-left: 4px solid var(--odv-bordure-forte);
    color: var(--odv-encre-douce);
    font-size: .92em;
    font-variant-numeric: tabular-nums;
}

/* Le beige très pâle d'avant ne se distinguait guère du parchemin : on ne
   voyait pas qu'il y avait un problème. Même bloc, même place — mais un
   ambre franc, un filet plein et un texte assez sombre pour se lire.
   Seule la couleur change : le gras épaississait le texte d'un état à
   l'autre, et le bloc semblait se redimensionner alors qu'il ne bouge pas. */
.disponibilite--alerte {
    background-color: #f7e7bd;
    border-color: #c8a22b;
    color: #574408;
}

.grille-heros {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1.4em;
}

.fiche {
    display: flex;
    flex-direction: column;
    background-color: var(--odv-panneau);
    border: 1px solid var(--odv-bordure);
    border-radius: var(--odv-rayon-large);
    box-shadow: var(--odv-ombre);
    overflow: hidden;
    /* Chaque carte apparaît avec un très léger décalage : le tirage se
       « pose » sur la table au lieu de surgir d'un bloc. */
    animation: odvPose 320ms ease both;
}

@keyframes odvPose {
    from {
        opacity: 0;
        transform: translateY(10px) rotate(-.4deg);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fiche {
        animation: none;
    }
}

.fiche.verrouillee {
    border-color: var(--odv-or);
    box-shadow: 0 0 0 1px var(--odv-or), var(--odv-ombre);
}

.fiche-image {
    position: relative;
    background-color: var(--odv-parchemin-creux);
    line-height: 0;
}

.fiche-image img {
    width: 100%;
    aspect-ratio: 63 / 88;
    object-fit: cover;
    cursor: zoom-in;
    display: block;
}

/* Les commandes posées sur l'illustration restent discrètes tant qu'on ne
   survole pas la carte.
   Elles se tiennent à GAUCHE : le coin haut droit d'une carte de héros est
   occupé par ses gemmes de couleur et son numéro, que les boutons venaient
   recouvrir. */
.fiche-outils {
    position: absolute;
    top: .5em;
    left: .5em;
    display: flex;
    flex-direction: column;
    gap: .35em;
    opacity: 0;
    transition: opacity var(--odv-transition);
}

.fiche:hover .fiche-outils,
.fiche:focus-within .fiche-outils,
.fiche.verrouillee .fiche-outils,
.fiche-boss:hover .fiche-outils,
.fiche-boss:focus-within .fiche-outils,
.fiche-boss.verrouillee .fiche-outils {
    opacity: 1;
}

/* Sur un écran tactile il n'y a pas de survol : les commandes restent
   visibles en permanence. */
@media (hover: none) {
    .fiche-outils {
        opacity: 1;
    }
}

.fiche-outil {
    width: 2em;
    height: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(47, 38, 30, .15);
    background-color: rgba(255, 253, 249, .94);
    color: var(--odv-encre-douce);
    font-size: .9em;
    cursor: pointer;
    padding: 0;
    transition: background-color var(--odv-transition), color var(--odv-transition),
        transform var(--odv-transition);
}

.fiche-outil:hover {
    background-color: var(--odv-encre);
    color: var(--odv-parchemin);
    transform: scale(1.08);
}

.fiche-outil.actif {
    background-color: var(--odv-or);
    border-color: var(--odv-or);
    color: #fff;
}

.fiche-outil:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--odv-or-voile);
}

.fiche-corps {
    padding: .9em 1em 1.1em;
    display: flex;
    flex-direction: column;
    gap: .55em;
    flex: 1;
}

.fiche-nom {
    margin: 0;
    font-size: 1.15em;
    line-height: 1.25;
    font-weight: 600;
}

.fiche-extension {
    font-size: .78em;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--odv-encre-pale);
}

.fiche-pitch {
    margin: 0;
    font-size: .88em;
    line-height: 1.5;
    color: var(--odv-encre-douce);
    font-style: italic;
}

.etiquettes {
    display: flex;
    flex-wrap: wrap;
    gap: .35em;
    margin-top: auto;
    padding-top: .3em;
}

.etiquette {
    display: inline-flex;
    align-items: center;
    gap: .35em;
    font-size: .78em;
    padding: .22em .65em;
    border-radius: 999px;
    background-color: var(--odv-parchemin);
    border: 1px solid var(--odv-bordure);
    color: var(--odv-encre-douce);
}

.pastille {
    width: .62em;
    height: .62em;
    border-radius: 50%;
    border: 1px solid rgba(47, 38, 30, .3);
}

.pastille.Rouge {
    background-color: var(--odv-rouge);
}

.pastille.Bleu {
    background-color: var(--odv-bleu);
}

.pastille.Vert {
    background-color: var(--odv-vert);
}

.pastille.Jaune {
    background-color: var(--odv-jaune);
}

.pastille.Violet {
    background-color: var(--odv-violet);
}

/* Le dépliant des capacités. */
.capacites summary {
    cursor: pointer;
    font-size: .82em;
    color: var(--odv-or);
    list-style: none;
    padding: .3em 0;
}

.capacites summary::-webkit-details-marker {
    display: none;
}

.capacites summary::before {
    content: "▸ ";
    display: inline-block;
    transition: transform var(--odv-transition);
}

.capacites[open] summary::before {
    content: "▾ ";
}

.capacites summary:hover {
    text-decoration: underline;
}

.planche {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
    gap: .4em;
    margin-top: .5em;
}

.planche img {
    width: 100%;
    aspect-ratio: 63 / 88;
    object-fit: cover;
    border-radius: 2px;
    cursor: zoom-in;
    background-color: var(--odv-parchemin-creux);
    box-shadow: 0 1px 2px rgba(47, 38, 30, .2);
    transition: transform var(--odv-transition);
}

.planche img:hover {
    transform: scale(1.06);
}

/* ---------------------------------------------------------------
   Le boss : une fiche large, posée en travers, pour qu'on ne le
   confonde jamais avec un héros.
   --------------------------------------------------------------- */

.fiche-boss {
    display: grid;
    grid-template-columns: 230px 1fr;
    gap: 1.6em;
    /* Le texte se cale au milieu de l'illustration : sans cela, la moitié
       droite du cartouche restait vide sous les étiquettes. */
    align-items: center;
    background-color: var(--odv-nuit);
    border: 1px solid var(--odv-or);
    border-radius: var(--odv-rayon-large);
    padding: 1.2em;
    color: var(--odv-parchemin);
    box-shadow: var(--odv-ombre-forte);
    animation: odvPose 320ms ease both;
}

/* Un affrontement à plusieurs cartes mérite une colonne plus large : trois
   cartes de front plutôt que deux minuscules empilées sur trois rangs. */
.fiche-boss--multiples {
    grid-template-columns: minmax(0, 480px) 1fr;
}

/* Les commandes du boss se calent sur le coin du cartouche, pas sur les
   cartes : celles-ci passent d'une à cinq selon le tirage, et le bouton
   fuyait sous le curseur dès qu'on enchaînait les relances. Elles restent
   visibles en permanence — on est censé pouvoir cliquer en rafale. */
.fiche-boss {
    position: relative;
}

.fiche-boss > .fiche-outils {
    top: .9em;
    left: auto;
    right: .9em;
    flex-direction: row;
    opacity: 1;
}

.fiche-boss .fiche-image {
    background-color: transparent;
    border-radius: var(--odv-rayon);
}

/* Les cartes de l'affrontement. Une seule occupe toute la colonne ; à
   plusieurs — les phases d'un boss ou les membres d'une équipe — elles se
   rangent par deux, assez grandes pour qu'on reconnaisse chaque carte et
   cliquables pour la lire. */
.boss-cartes {
    display: grid;
    grid-template-columns: 1fr;
    gap: .55em;
}

.boss-cartes--multiples {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

.boss-cartes img {
    width: 100%;
    aspect-ratio: 63 / 88;
    object-fit: cover;
    display: block;
    border-radius: var(--odv-rayon);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
    cursor: zoom-in;
    transition: transform var(--odv-transition);
}

.boss-cartes img:hover {
    transform: translateY(-2px) scale(1.02);
}

.fiche-boss .fiche-nom {
    font-size: 1.6em;
    color: var(--odv-or-clair);
}

.fiche-boss .fiche-extension {
    color: rgba(233, 219, 199, .55);
}

/* La réserve à droite garantit qu'un nom long ne passera jamais sous les
   deux boutons posés dans le coin du cartouche. */
.fiche-boss .fiche-corps {
    padding: 0 5.5em 0 0;
}

.fiche-boss .fiche-pitch {
    color: rgba(233, 219, 199, .8);
    font-size: .95em;
    max-width: 60em;
}

.fiche-boss .etiquette {
    background-color: rgba(233, 219, 199, .08);
    border-color: rgba(233, 219, 199, .2);
    color: rgba(233, 219, 199, .8);
}

.fiche-boss .capacites summary {
    color: var(--odv-or-clair);
}

.fiche-boss .fiche-outil {
    background-color: rgba(26, 22, 19, .8);
    border-color: rgba(233, 219, 199, .3);
    color: var(--odv-parchemin);
}

.fiche-boss .fiche-outil:hover {
    background-color: var(--odv-or);
    border-color: var(--odv-or);
    color: #fff;
}

.fiche-boss.verrouillee {
    box-shadow: 0 0 0 2px var(--odv-or), var(--odv-ombre-forte);
}

/* ===============================================================
   8. Agrandissement d'une carte
   =============================================================== */

/* LOUPE — dispositif partagé avec l'encyclopédie et le recommandeur.
   Les mêmes valeurs se retrouvent dans EncyclopedieODVDBT/CSS/theme.css :
   les deux projets sont indépendants, mais la loupe doit se comporter et
   se lire exactement pareil d'un outil à l'autre. */
.loupe {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background-color: rgba(26, 22, 19, .85);
    backdrop-filter: blur(3px);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: clamp(.8em, 2.5vw, 1.2em);
    /* Une marge franche, même sur téléphone : sans elle la carte touchait
       les bords de l'écran et les flèches sortaient par le bas. */
    padding: clamp(1em, 4vw, 2.5em);
    cursor: zoom-out;
    overscroll-behavior: contain;
}

.loupe.ouverte {
    display: flex;
}

/* L'image prend la hauteur qui reste une fois la légende et les flèches
   posées — jamais davantage. « min-height: 0 » est ce qui autorise un
   élément de flexbox à devenir plus petit que son contenu. */
.loupe-cadre {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loupe-cadre img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
    cursor: default;
    -webkit-user-select: none;
    user-select: none;
    /* Sans quoi un balayage attrape l'image et déclenche le glisser-déposer
       du navigateur au lieu de faire défiler les cartes. */
    -webkit-user-drag: none;
}

.loupe-legende {
    flex: 0 0 auto;
    color: var(--odv-parchemin);
    font-size: clamp(.85rem, 2vw, .95rem);
    letter-spacing: .02em;
    text-align: center;
    max-width: 40em;
}

.loupe-fleches {
    flex: 0 0 auto;
    display: flex;
    gap: 1.5em;
}

.loupe-fleche {
    width: 2.6em;
    height: 2.6em;
    border-radius: 50%;
    border: none;
    background-color: rgba(255, 253, 249, .92);
    color: var(--odv-encre);
    font-size: 1.2em;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color var(--odv-transition), transform var(--odv-transition);
}

.loupe-fleche:hover:not(:disabled) {
    background-color: var(--odv-or);
    color: #fff;
    transform: scale(1.08);
}

.loupe-fleche:disabled {
    opacity: .35;
    cursor: default;
}

/* Sur écran tactile, les flèches restent — mais le balayage marche aussi. */
.loupe-aide {
    flex: 0 0 auto;
    display: none;
    font-size: .78rem;
    letter-spacing: .04em;
    color: rgba(233, 219, 199, .5);
}

@media (hover: none) {
    .loupe-aide {
        display: block;
    }
}

/* ===============================================================
   9. Pied de page
   =============================================================== */

.contact-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6em;
    margin-top: 3em;
    padding: 2.5em 1.5em 3em;
    background: var(--odv-parchemin-creux);
    border-top: 1px solid var(--odv-bordure);
    box-shadow: inset 0 1px 0 var(--odv-or-voile);
}

.contact-links .btn {
    font-size: .88rem;
    padding: .5em 1em;
}

.contact-links .btn:hover {
    background-color: var(--odv-encre);
    border-color: var(--odv-encre);
    color: var(--odv-parchemin);
    transform: translateY(-2px);
    box-shadow: var(--odv-ombre);
}

.contact-links .btn.tool-link {
    background-color: var(--odv-or);
    border-color: var(--odv-or);
    color: #fff;
    font-weight: 600;
}

.contact-links .btn.tool-link:hover {
    background-color: var(--odv-encre);
    border-color: var(--odv-encre);
    color: var(--odv-parchemin);
}

/* ===============================================================
   10. Messages système
   =============================================================== */

.erreur-chargement {
    max-width: 44em;
    margin: 3em auto;
    padding: 1.4em 1.6em;
    background-color: var(--odv-panneau);
    border: 1px solid var(--odv-bordure);
    border-left: 3px solid var(--odv-rouge);
    border-radius: var(--odv-rayon-large);
    color: var(--odv-encre-douce);
}

.erreur-chargement code {
    font-family: Consolas, Menlo, monospace;
    font-size: .9em;
    background-color: var(--odv-parchemin-creux);
    padding: .1em .35em;
    border-radius: 2px;
}


/* ===============================================================
   11. Écrans étroits
   =============================================================== */

@media (max-width: 820px) {
    .fiche-boss {
        grid-template-columns: 1fr;
        gap: 1em;
    }

    .fiche-boss .fiche-image {
        max-width: 240px;
        margin: 0 auto;
    }

    /* Un affrontement à plusieurs cartes a besoin de toute la largeur. */
    .fiche-boss--multiples .fiche-image {
        max-width: none;
    }

    .boss-cartes--multiples {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }

    .fiche-boss .fiche-nom {
        font-size: 1.35em;
    }
}

@media (max-width: 620px) {
    .entete-logo {
        width: 88%;
    }

    .entete-sous-titre {
        letter-spacing: .2em;
        text-indent: .2em;
        margin-top: .8em;
    }

    .page {
        padding: 0 1em 2em;
    }

    .panel {
        padding: 1.2em 1.1em 1.4em;
    }

    .section-title {
        margin: 2em auto 1em;
        padding: 0 1em;
        font-size: .95em;
        gap: .8em;
    }

    .ext-rangee {
        gap: .7em;
    }

    .ext-card {
        width: 104px;
    }

    .ext-rangee--paysage .ext-card {
        width: 146px;
    }

    .grille-heros {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 1em;
    }

    .barre-actions .btn,
    .barre-actions .btn-principal {
        flex: 1 1 100%;
    }

    .barre-actions .espace {
        display: none;
    }
}