/* Thème « grimoire » : encre, os et sang, sur Bootstrap 5.3 en mode sombre */

@font-face {
    font-family: "Pterra";
    src: url("../fonts/Pterra Regular/Pterra Regular.ttf") format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "Celestia";
    src: url("../fonts/Celestia Antiqua Std Regular/Celestia Antiqua Std Regular.otf") format("opentype");
    font-display: swap;
}

:root {
    --encre: #13100e;
    --surface: #1c1815;
    --surface-2: #262019;
    --trait: rgba(231, 208, 168, .13);
    --texte: #ebe3d5;
    --texte-doux: #a99d8b;
    --or: #d2ad68;
    --sang: #a3202b;
    --sang-vif: #e0525b;
    --lien: #e9c98d;
    --rayon: 10px;
    --titre: "Pterra", Georgia, serif;
    --corps: "Celestia", Georgia, serif;
}

[data-bs-theme=dark] {
    --bs-body-bg: var(--encre);
    --bs-body-color: var(--texte);
    --bs-body-font-family: var(--corps);
    --bs-body-font-size: 1.1rem;
    --bs-body-line-height: 1.65;
    --bs-emphasis-color: #fff;
    --bs-secondary-color: var(--texte-doux);
    --bs-border-color: var(--trait);
    --bs-secondary-bg: var(--surface-2);
    --bs-tertiary-bg: var(--surface);
    --bs-link-color: var(--lien);
    --bs-link-color-rgb: 233, 201, 141;
    --bs-link-hover-color: #fff;
    --bs-link-hover-color-rgb: 255, 255, 255;
    --bs-danger: var(--sang-vif);
    --bs-danger-rgb: 224, 82, 91;
    --bs-focus-ring-color: rgba(224, 82, 91, .35);
}

html {
    scrollbar-color: #4a3f35 var(--encre);
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(ellipse 90% 50% at 50% 0, rgba(163, 32, 43, .12), transparent 70%),
        var(--encre);
}

main {
    flex: 1;
}

::selection {
    background: var(--sang);
    color: #fff;
}

/* ---------- Titres et texte ---------- */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--titre);
    font-weight: 400;
    line-height: 1.2;
}

h1 {
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    color: var(--texte);
    text-shadow: 0 2px 18px rgba(0, 0, 0, .8);
}

h2 {
    font-size: 1.85rem;
    color: var(--sang-vif);
    margin-top: 2.25rem;
    padding-bottom: .35rem;
    border-bottom: 1px solid var(--trait);
}

h3 {
    font-size: 1.5rem;
    color: var(--or);
    margin-top: 1.75rem;
}

h4 {
    font-size: 1.35rem;
    color: var(--or);
}

h5 {
    font-size: 1.05rem;
    color: var(--texte);
    font-family: var(--corps);
    font-weight: 700;
    margin-top: 1rem;
}

h1 a,
h2 a,
h3 a,
h4 a {
    color: inherit;
    text-decoration: none;
}

h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover {
    color: #fff;
}

h1 small,
h2 small,
h3 small,
h4 small {
    font-family: var(--corps);
    font-size: .6em;
    color: var(--texte-doux);
}

a {
    text-decoration-style: dotted;
    text-underline-offset: 3px;
}

em {
    color: var(--texte-doux);
}

caption {
    caption-side: top;
    color: var(--texte-doux);
    font-style: italic;
    font-size: .95rem;
}

.page ul:not([class]) {
    padding-left: 1.25rem;
}

.page ul:not([class]) li::marker {
    color: var(--sang-vif);
}

/* ---------- Navigation ---------- */

.barre {
    background: rgba(19, 16, 14, .88);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--trait);
    --bs-navbar-color: var(--texte-doux);
    --bs-navbar-hover-color: var(--texte);
    --bs-navbar-active-color: var(--texte);
    --bs-navbar-toggler-border-color: var(--trait);
}

.marque {
    font-family: var(--titre);
    font-size: 1.45rem;
    color: var(--texte);
    display: flex;
    align-items: center;
    gap: .5rem;
}

.marque span {
    color: var(--sang-vif);
}

.barre .nav-link {
    font-size: 1rem;
    position: relative;
}

.barre .nav-link.active::before {
    content: "";
    position: absolute;
    left: var(--bs-navbar-nav-link-padding-x);
    right: var(--bs-navbar-nav-link-padding-x);
    bottom: 0;
    height: 2px;
    background: var(--sang-vif);
}

.recherche-nav {
    margin: .5rem 0;
}

.recherche-nav input {
    width: 100%;
}

@media (min-width: 992px) {
    .recherche-nav {
        margin: 0 1rem;
    }

    .recherche-nav input {
        width: 14rem;
    }

    .barre .nav-link {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .barre .navbar-nav {
        align-items: center;
    }
}

.dropdown-menu {
    --bs-dropdown-bg: var(--surface);
    --bs-dropdown-border-color: var(--trait);
    --bs-dropdown-link-color: var(--texte);
    --bs-dropdown-link-hover-bg: var(--surface-2);
    --bs-dropdown-link-active-bg: var(--sang);
    --bs-dropdown-font-size: 1rem;
    --bs-dropdown-header-color: var(--or);
}

.dropdown-header {
    font-family: var(--titre);
    font-size: .95rem;
    letter-spacing: .04em;
}

/* ---------- Page ---------- */

.page {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    padding: 2.5rem 1.25rem 4rem;
}

/* Bandeau illustré, fondu dans le fond ; le titre de la page vient s'y poser */
.banniere {
    height: clamp(220px, 38vh, 380px);
    background-size: cover;
    background-position: center 30%;
    -webkit-mask-image: linear-gradient(to bottom, #000 35%, transparent);
    mask-image: linear-gradient(to bottom, #000 35%, transparent);
}

.banniere+.page {
    margin-top: -7rem;
    position: relative;
}

.page>h1:first-child {
    margin-bottom: 1.5rem !important;
}

.pied {
    padding: 1.5rem;
    text-align: center;
    font-size: .9rem;
    color: var(--texte-doux);
    border-top: 1px solid var(--trait);
}

/* ---------- Tableaux ---------- */

table {
    width: 100%;
    margin: 1.25rem 0;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--surface);
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
    overflow: hidden;
    font-size: 1rem;
}

th,
td {
    padding: .55rem .85rem;
    vertical-align: top;
}

thead th {
    background: var(--surface-2);
    color: var(--or);
    font-weight: 400;
    font-variant: small-caps;
    letter-spacing: .03em;
    border-bottom: 2px solid var(--sang);
    white-space: nowrap;
}

tbody th {
    color: var(--texte-doux);
    font-weight: 400;
    background: var(--surface-2);
    width: 30%;
}

tbody tr+tr>* {
    border-top: 1px solid var(--trait);
}

tbody tr:hover>td {
    background: rgba(255, 255, 255, .025);
}

.table-responsive table {
    margin: 0;
}

.table-responsive {
    margin: 1.25rem 0;
    border-radius: var(--rayon);
}

/* Table d'une classe (comme les manuels) : toutes les colonnes tiennent sans défilement
   horizontal sur grand écran (en-têtes sur plusieurs lignes, cases serrées) */
body.page-classe .page {
    max-width: 1240px;
}

.table-classe-wrap {
    margin: 1.25rem 0;
    border-radius: var(--rayon);
}

.table-classe-wrap table {
    margin: 0;
    font-size: .9rem;
}

.table-classe th,
.table-classe td {
    padding: .4rem .45rem;
}

.table-classe thead th {
    white-space: normal;
    text-align: center;
    vertical-align: bottom;
    font-size: .85rem;
}

.table-classe td:nth-child(2) {
    white-space: nowrap;
}

@media (max-width: 767px) {
    .table-classe-wrap {
        overflow-x: auto;
    }
}

.clickable-tr {
    cursor: pointer;
}

.clickable-tr:hover>td {
    background: rgba(163, 32, 43, .14);
}

.hors-classe {
    opacity: .55;
}

/* ---------- Compendium : listes dépliables, filtres, pastilles ---------- */

.cl-filtres {
    margin-bottom: .5rem;
}

.cl-filtres>summary {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
    color: var(--or);
}

.cl-compte {
    background: var(--sang);
    color: #fff;
    border-radius: 999px;
    font-size: .8rem;
    padding: 0 .5rem;
}

/* Ligne dépliable d'une liste du compendium : titre, puis détails en dessous */
.cl-titre {
    flex: 1;
    min-width: 0;
}

.cl-titre h4 {
    display: block;
    margin: 0;
}

.cl-titre small {
    display: block;
    color: var(--texte-doux);
    overflow-wrap: anywhere;
}

.cl-pastille[aria-current="true"] {
    border-color: var(--or);
    color: var(--or);
}

.cl-pastilles {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.cl-pastille {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: 0 .9rem;
    border: 1px solid var(--trait);
    border-radius: 999px;
    background: var(--surface);
    color: var(--texte);
    text-decoration: none;
}

.cl-pastille:hover {
    border-color: var(--or);
    color: var(--texte);
}

.cl-pastille small {
    color: var(--texte-doux);
}

.cl-lien {
    display: block;
    width: 100%;
    padding: .35rem 0;
}

/* Tableau qui devient une liste de cartes sur mobile (data-label = intitulé de la colonne) */
@media (max-width: 767.98px) {

    .page table.table-cartes,
    .table-cartes tbody,
    .table-cartes tr,
    .table-cartes td {
        display: block;
    }

    .page table.table-cartes {
        background: none;
        border: 0;
        overflow: visible;
    }

    .table-cartes thead {
        display: none;
    }

    .table-cartes tr {
        background: var(--surface);
        border: 1px solid var(--trait);
        border-radius: var(--rayon);
        margin-bottom: .5rem;
        padding: .4rem 0;
    }

    .table-cartes tbody tr+tr>* {
        border-top: 0;
    }

    .table-cartes td {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        padding: .25rem .9rem;
        text-align: right;
    }

    .table-cartes td::before {
        content: attr(data-label);
        color: var(--texte-doux);
        text-align: left;
    }

    .table-cartes td.titre {
        font-size: 1.15rem;
        text-align: left;
        min-height: 44px;
        align-items: center;
    }

    .table-cartes td.titre::before {
        content: none;
    }
}

/* ---------- Petits écrans et écrans tactiles ---------- */

/* Un tableau plus large que l'écran défile dans son cadre au lieu de déborder de la page */
@media (max-width: 767.98px) {
    .page table {
        display: block;
        overflow-x: auto;
        max-width: 100%;
    }
}

/* Cibles tactiles : au moins 44 px pour les boutons et les champs */
@media (pointer: coarse) {

    .btn,
    .btn-sm,
    .form-control,
    .form-select {
        min-height: 44px;
    }

    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .form-check-label {
        padding: .35rem 0;
    }

    .nav-link,
    .dropdown-item {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

/* ---------- Blocs (listes de sorts, dons, domaines...) ---------- */

.blocs {
    background: var(--surface);
    border: 1px solid var(--trait);
    border-left: 3px solid var(--sang);
    border-radius: var(--rayon);
    padding: 1rem 1.25rem;
    margin-top: 1rem;
}

.blocs> :first-child {
    margin-top: 0;
}

.blocs> :last-child {
    margin-bottom: 0;
}

.blocs p {
    margin-bottom: .4rem;
}

details.blocs>summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: .6rem;
}

details.blocs>summary::before {
    content: "▸";
    color: var(--sang-vif);
    transition: transform .15s;
}

details.blocs[open]>summary {
    margin-bottom: 1rem;
}

details.blocs[open]>summary::before {
    transform: rotate(90deg);
}

details.blocs>summary h3 {
    margin: 0;
}

/* ---------- Formulaires et boutons ---------- */

.form-control,
.form-select {
    background-color: var(--surface-2);
    border-color: var(--trait);
    color: var(--texte);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--surface-2);
    border-color: var(--sang-vif);
    color: var(--texte);
}

.form-control::placeholder {
    color: var(--texte-doux);
    opacity: .7;
}

.form-check-input:checked {
    background-color: var(--sang);
    border-color: var(--sang);
}

/* Rendu par défaut des formulaires Django : un <div> par champ */
form>div:not([class]) {
    margin-bottom: 1rem;
}

form>div:not([class])>label {
    display: block;
    margin-bottom: .3rem;
    color: var(--texte-doux);
}

.helptext {
    display: block;
    color: var(--texte-doux);
    font-size: .85rem;
    margin-top: .25rem;
}

.errorlist {
    list-style: none;
    padding: 0;
    margin: .25rem 0;
    color: var(--sang-vif);
    font-size: .95rem;
}

/* CheckboxSelectMultiple : Django recopie la classe des cases sur leur conteneur */
div.form-check-input {
    appearance: none;
    float: none;
    width: auto;
    height: auto;
    margin: 0;
    border: 0;
    background: none;
    vertical-align: baseline;
}

label>.form-check-input {
    margin: 0 .5rem 0 0;
    vertical-align: -.1em;
}

fieldset legend {
    font-size: 1rem;
    color: var(--texte-doux);
    margin-bottom: .3rem;
}

/* Choix des dons (_dons.html) ; prérequis manquants : estompés */
.dons {
    column-count: 2;
    column-gap: 1.5rem;
    margin-bottom: 1rem;
}

.don {
    break-inside: avoid;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 .5rem;
    padding: .3rem 0;
    border-bottom: 1px solid var(--trait);
}

.don> :first-child {
    flex: 1;
}

.don>a {
    text-decoration: none;
    color: var(--texte-doux);
    font-size: .9rem;
}

.don>a:hover {
    color: var(--lien);
}

.don small {
    color: var(--texte-doux);
}

.don.indisponible {
    opacity: .5;
}

.don summary {
    cursor: pointer;
}

.don input[type="number"] {
    display: inline-block;
    width: 4rem;
}

/* Voiles psioniques : cases compactes sur plusieurs colonnes, avec un lien vers le voile */
.voiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: .15rem .75rem;
}

.voiles label {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
}

.voiles a {
    margin-left: auto;
    text-decoration: none;
}

/* Objets à quantité (équipement de départ) : un champ numérique étroit */
input.quantite {
    width: 5rem;
    flex: none;
}

/* Cases à cocher sur plusieurs colonnes (tours d'un compagnon) */
.colonnes>div {
    columns: 12rem;
}

.don-choix,
#id_armes {
    margin: .3rem 0 .5rem;
    max-height: 14rem;
    overflow-y: auto;
}

.don .form-check {
    margin: 0;
}

.btn {
    font-family: var(--titre);
    font-size: 1.05rem;
    letter-spacing: .02em;
}

.btn-sm {
    font-size: .9rem;
}

.btn-danger {
    --bs-btn-bg: var(--sang);
    --bs-btn-border-color: var(--sang);
    --bs-btn-hover-bg: #bd2733;
    --bs-btn-hover-border-color: #bd2733;
    --bs-btn-active-bg: #8a1a24;
    --bs-btn-active-border-color: #8a1a24;
}

.btn-outline-danger {
    --bs-btn-color: var(--sang-vif);
    --bs-btn-border-color: var(--sang);
    --bs-btn-hover-bg: var(--sang);
    --bs-btn-hover-border-color: var(--sang);
}

.btn-outline-secondary,
.btn-outline-light {
    --bs-btn-color: var(--texte);
    --bs-btn-border-color: var(--trait);
    --bs-btn-hover-bg: var(--surface-2);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-border-color: var(--texte-doux);
}

.formulaire-etroit {
    max-width: 30rem;
    margin: 0 auto;
    background: var(--surface);
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
    padding: 2rem;
}

/* ---------- Pagination ---------- */

.pagination {
    --bs-pagination-bg: var(--surface);
    --bs-pagination-color: var(--texte);
    --bs-pagination-border-color: var(--trait);
    --bs-pagination-hover-bg: var(--surface-2);
    --bs-pagination-hover-color: #fff;
    --bs-pagination-hover-border-color: var(--trait);
    --bs-pagination-active-bg: var(--sang);
    --bs-pagination-active-border-color: var(--sang);
    --bs-pagination-font-size: 1rem;
    flex-wrap: wrap;
}

/* ---------- Messages ---------- */

.messages {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1080;
    display: grid;
    gap: .5rem;
    max-width: min(28rem, calc(100vw - 2rem));
}

.message {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .75rem 1rem;
    background: var(--surface-2);
    border: 1px solid var(--trait);
    border-left: 3px solid var(--or);
    border-radius: var(--rayon);
    box-shadow: 0 8px 30px rgba(0, 0, 0, .5);
}

.message-success {
    border-left-color: #5fae6e;
}

.message-error,
.message-danger {
    border-left-color: var(--sang-vif);
}

.alert-warning {
    --bs-alert-bg: rgba(210, 173, 104, .1);
    --bs-alert-border-color: rgba(210, 173, 104, .35);
    --bs-alert-color: var(--texte);
}

/* ---------- Accueil ---------- */

.accueil .banniere {
    height: clamp(320px, 58vh, 560px);
}

.accueil .banniere+.page {
    margin-top: -14rem;
}

.accroche {
    text-align: center;
    max-width: 42rem;
    margin: 0 auto 3rem;
}

.accroche h1 {
    font-size: clamp(2.8rem, 8vw, 4.8rem);
    margin-bottom: .5rem;
}

.accroche p {
    font-size: 1.2rem;
    color: var(--texte);
    text-shadow: 0 1px 10px rgba(0, 0, 0, .9);
}

.tuiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
}

.tuile {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 300px;
    padding: 1.25rem;
    border-radius: var(--rayon);
    border: 1px solid var(--trait);
    overflow: hidden;
    color: var(--texte);
    text-decoration: none;
    isolation: isolate;
}

.tuile img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    transition: transform .4s ease;
}

.tuile::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top, rgba(13, 10, 9, .96) 25%, rgba(13, 10, 9, .35) 65%, transparent);
}

.tuile h2 {
    border: 0;
    margin: 0 0 .35rem;
    padding: 0;
    color: var(--texte);
}

.tuile p {
    margin: 0;
    font-size: .98rem;
    color: var(--texte-doux);
}

.tuile:hover {
    color: var(--texte);
    border-color: rgba(224, 82, 91, .5);
}

.tuile:hover img {
    transform: scale(1.05);
}

.tuile:hover h2 {
    color: var(--sang-vif);
}

/* ---------- Fiche de personnage ---------- */

.resume {
    color: var(--texte-doux);
}

/* Page du personnage : bandeau collant, onglets (barre du bas sur mobile), contenu */
body.page-fiche {
    padding-bottom: 64px;
}

body.page-fiche .barre {
    position: static;
}

body.page-fiche .page {
    max-width: none;
    padding: 0;
}

.f-tete {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgba(19, 16, 14, .94);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--trait);
    padding: .5rem .75rem .6rem;
}

.f-ligne1 {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-height: 44px;
}

.f-ident {
    flex: 1;
    min-width: 0;
}

.f-portrait {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid var(--or);
    flex: none;
}

.f-portrait-grand {
    display: block;
    max-width: 100%;
    max-height: 420px;
    border-radius: var(--rayon);
    border: 1px solid var(--trait);
}

.f-ident h1 {
    font-size: 1.35rem;
    margin: 0;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.f-ident small {
    color: var(--texte-doux);
    font-size: .85rem;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.f-alertes,
.f-modifier,
.f-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    border-radius: var(--rayon);
    font: inherit;
    padding: 0 .9rem;
    text-decoration: none;
}

.f-alertes {
    min-width: 44px;
    border: 1px solid var(--or);
    color: var(--or);
    background: transparent;
}

.f-modifier,
.f-btn.fort {
    background: var(--sang);
    border: 1px solid var(--sang);
    color: #fff;
}

.f-btn {
    border: 1px solid var(--trait);
    background: var(--surface-2);
    color: var(--texte);
}

.f-btn:hover {
    color: var(--texte);
    border-color: var(--or);
}

.f-modifier:hover,
.f-btn.fort:hover {
    background: var(--sang-vif);
    color: #fff;
}

.f-stats {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: .35rem;
    margin: .35rem 0 1rem;
}

.f-tete .f-stats {
    margin-bottom: 0;
}

.f-stat {
    text-align: center;
    border: 1px solid var(--trait);
    border-radius: 8px;
    padding: .2rem 0 .25rem;
    background: var(--surface);
}

.f-stat b {
    display: block;
    font-size: 1.25rem;
    line-height: 1.15;
    font-weight: 600;
}

.f-stat span {
    display: block;
    font-size: .68rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--texte-doux);
}

.f-detail-alertes {
    display: none;
    margin-top: .5rem;
    padding: .6rem .8rem;
    border-left: 3px solid var(--or);
    background: var(--surface);
    border-radius: 6px;
    font-size: .95rem;
}

.f-detail-alertes.ouvert {
    display: block;
}

.f-onglets {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    background: var(--surface);
    border-top: 1px solid var(--trait);
    padding-bottom: env(safe-area-inset-bottom);
    overflow-x: auto;
}

.f-onglets button {
    flex: 1;
    min-width: 3.4rem;
    min-height: 56px;
    border: 0;
    background: transparent;
    color: var(--texte-doux);
    font: inherit;
    font-size: .72rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 0;
}

.f-onglets svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.f-onglets button[aria-selected="true"] {
    color: var(--or);
    box-shadow: inset 0 2px 0 var(--sang-vif);
}

.f-corps {
    padding: .8rem .75rem 1rem;
    max-width: 980px;
    margin: 0 auto;
}

.f-corps section[hidden] {
    display: none;
}

.f-corps h2,
.fiche h2 {
    font-size: 1.15rem;
    margin: 1.4rem 0 .5rem;
    color: var(--or);
}

.f-corps h2:first-child {
    margin-top: 0;
}

.f-corps h2 small,
.fiche h2 small {
    font-size: .8rem;
    color: var(--texte-doux);
}

.f-cartes {
    display: grid;
    gap: .5rem;
}

.f-carte {
    background: var(--surface);
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
    padding: .6rem .8rem;
}

.f-carte header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .5rem;
}

.f-carte header b {
    font-size: 1.05rem;
    font-weight: 600;
}

.f-carte header .gros {
    font-size: 1.3rem;
    color: var(--or);
}

.f-carte .meta {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem .9rem;
    color: var(--texte-doux);
    font-size: .95rem;
    margin-top: .15rem;
}

.f-carte .meta b {
    color: var(--texte);
    font-weight: 500;
}

.f-carte .note,
.f-note {
    font-size: .9rem;
    color: var(--texte-doux);
    margin-top: .25rem;
}

/* Page de classe : le livre d'un niveau de substitution (pastille) et celui de la classe (pied) */
.source-niveau {
    margin-left: .5rem;
    padding: .1rem .5rem;
    border: 1px solid var(--or);
    border-radius: 1rem;
    color: var(--or);
    font-size: .75rem;
    font-family: inherit;
    vertical-align: middle;
    white-space: nowrap;
}

.source-classe {
    margin-top: 2rem;
    padding-top: .75rem;
    border-top: 1px solid var(--trait);
}

.f-erreur-code {
    font-size: clamp(4.5rem, 16vw, 9rem);
    line-height: 1;
    color: var(--sang-vif);
    margin-bottom: .5rem;
}

.f-erreur-image {
    display: block;
    width: min(220px, 55%);
    margin: 1.25rem auto;
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .7));
}

.f-erreur-recherche {
    max-width: 28rem;
    margin: 1.5rem auto 0;
}

.f-credit-agrandir {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
}

.f-credit-icone {
    position: absolute;
    top: .5rem;
    right: .5rem;
    box-sizing: content-box;
    padding: .3rem;
    border-radius: 50%;
    background: rgba(19, 16, 14, .75);
    color: var(--texte);
    pointer-events: none;
}

.f-credit-agrandir:hover .f-credit-icone,
.f-credit-agrandir:focus-visible .f-credit-icone {
    background: var(--sang);
}

.f-credit-dialogue {
    max-width: 96vw;
    max-height: 96vh;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--texte);
    text-align: center;
    cursor: zoom-out;
}

.f-credit-dialogue::backdrop {
    background: rgba(0, 0, 0, .88);
}

.f-credit-dialogue img {
    max-width: 96vw;
    max-height: 90vh;
    border-radius: var(--rayon);
}

.f-credit-dialogue p {
    margin: .4rem 0 0;
}

.f-credit-image {
    width: 100%;
    height: 130px;
    object-fit: cover;
    border-radius: calc(var(--rayon) - 2px);
    margin-bottom: .5rem;
}

.f-ariane {
    margin-bottom: 1rem;
    color: var(--texte-doux);
    font-size: .95rem;
}

.f-ariane a {
    color: var(--texte-doux);
}

.f-ariane [aria-current] {
    color: var(--texte);
}

.f-terme {
    color: var(--or);
    font-weight: 700;
}

.f-type {
    color: var(--sang-vif);
    font-size: .85em;
}

.f-texte {
    font-size: 1rem !important;
    color: var(--texte) !important;
}

.f-grille {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
}

.f-case {
    background: var(--surface);
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
    text-align: center;
    padding: .45rem .2rem;
}

.f-case span {
    display: block;
    font-size: .7rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--texte-doux);
}

.f-case b {
    font-size: 1.35rem;
    font-weight: 600;
}

.f-case small {
    color: var(--or);
    font-size: .85rem;
    margin-left: .15rem;
}

.f-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--surface);
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
}

.f-liste li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: .55rem .8rem;
    min-height: 44px;
}

.f-liste li+li {
    border-top: 1px solid var(--trait);
}

.f-liste li[hidden] {
    display: none;
}

.f-liste small {
    color: var(--texte-doux);
}

.f-liste .val {
    font-size: 1.1rem;
    text-align: right;
    font-weight: 500;
}

.f-liste .val.zero {
    color: var(--texte-doux);
}

.f-liste .classe {
    color: var(--or);
    font-size: .8rem;
    margin-left: .35rem;
}

.f-bascule {
    display: flex;
    gap: .4rem;
    margin-bottom: .6rem;
}

.f-bascule button {
    min-height: 44px;
    padding: 0 1rem;
    border-radius: 999px;
    border: 1px solid var(--trait);
    background: transparent;
    color: var(--texte-doux);
    font: inherit;
}

.f-bascule button[aria-pressed="true"] {
    border-color: var(--or);
    color: var(--or);
}

.f-jauge {
    height: 8px;
    border-radius: 4px;
    background: var(--surface-2);
    overflow: hidden;
    margin: .4rem 0 .15rem;
}

.f-jauge i {
    display: block;
    height: 100%;
    background: var(--or);
}

@media (min-width: 768px) {
    body.page-fiche {
        padding-bottom: 0;
    }

    .f-tete {
        padding: .6rem 1rem .7rem;
    }

    .f-ligne1,
    .f-tete .f-stats {
        max-width: 1100px;
        margin-left: auto;
        margin-right: auto;
    }

    .f-tete .f-stats {
        margin-top: .35rem;
    }

    .f-onglets {
        position: static;
        border: 0;
        background: transparent;
        max-width: 980px;
        margin: .4rem auto 0;
        padding: 0 .75rem;
        border-bottom: 1px solid var(--trait);
    }

    .f-onglets button {
        flex: 0 1 auto;
        flex-direction: row;
        min-height: 46px;
        font-size: .95rem;
        gap: .45rem;
        padding: 0 1rem;
        box-shadow: none !important;
        border-bottom: 2px solid transparent;
    }

    .f-onglets button[aria-selected="true"] {
        border-bottom-color: var(--sang-vif);
    }

    .f-grille {
        grid-template-columns: repeat(6, 1fr);
    }

    .f-deux {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.2rem;
        align-items: start;
    }

    .f-cartes.large {
        grid-template-columns: 1fr 1fr;
    }
}

@media print {

    .f-onglets,
    .f-modifier,
    .f-alertes,
    .f-btn,
    .barre,
    .pied {
        display: none !important;
    }

    .f-corps section[hidden] {
        display: block !important;
    }

    .f-liste li[data-rare] {
        display: flex !important;
    }

    .f-tete {
        position: static;
    }
}

/* ---------- Assistant de création ---------- */

.etapes {
    counter-reset: etape;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: .25rem;
    padding: 0;
    margin: 0 0 1.5rem;
    list-style: none;
    border-bottom: 1px solid var(--trait);
    scrollbar-width: none;
}

.etapes li {
    flex: 0 0 auto;
}

.etapes a,
.etapes span {
    display: block;
    min-height: 44px;
    padding: .7rem 1rem;
    white-space: nowrap;
    color: var(--texte-doux);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.etapes a:hover {
    color: var(--texte);
}

.etapes a.active {
    color: var(--texte);
    border-bottom-color: var(--sang-vif);
}

.etapes span {
    opacity: .45;
}

.etapes a.sans-objet {
    opacity: .6;
    font-style: italic;
}

/* Résumé collant de l'assistant sur mobile (PV, CA, sauvegardes, points à corriger) */
body.page-assistant .barre {
    position: static;
}

body.page-assistant .page {
    max-width: none;
    padding-top: 0;
}

body.page-assistant .page>h1 {
    margin-top: 1.5rem;
}

.f-resume-alertes {
    margin-top: .4rem;
    font-size: .9rem;
}

.f-resume-alertes summary {
    color: var(--or);
    cursor: pointer;
    min-height: 32px;
}

/* Aperçu : replié sur mobile, fixe à côté du formulaire sur grand écran */
details.apercu>summary {
    cursor: pointer;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: .6rem;
}

details.apercu>summary h2 {
    margin: 0;
}

@media (min-width: 992px) {
    details.apercu {
        position: sticky;
        top: 1rem;
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
    }

    details.apercu>summary {
        cursor: default;
        list-style: none;
    }
}

/* Dons groupés par catégorie, avec le détail à la demande */
.groupe-dons {
    margin: 0 0 .5rem;
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
    background: var(--surface);
}

.groupe-dons>summary {
    padding: .6rem .9rem;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: .4rem;
    cursor: pointer;
    color: var(--or);
}

.groupe-dons>summary small {
    color: var(--texte-doux);
}

.groupe-dons>.dons {
    padding: 0 .9rem .6rem;
}

.champ-degres {
    width: 8.5rem;
    white-space: nowrap;
}

.champ-degres input {
    display: inline-block;
    width: 4.5rem;
    margin-right: .4rem;
}

.champ-degres small {
    color: var(--texte-doux);
}

.don-info>summary {
    display: inline-block;
    font-size: .85rem;
    color: var(--texte-doux);
    cursor: pointer;
    padding: .2rem 0;
}

.don-info p {
    font-size: .9rem;
    color: var(--texte-doux);
    padding: .2rem 0 .4rem;
}

@media (max-width: 840px) {
    .dons {
        column-count: 1;
    }

    .page {
        padding-top: 1.5rem;
    }

    .banniere+.page {
        margin-top: -5rem;
    }
}

/* Éléments d'une source : liste de liens sur plusieurs colonnes */
.f-colonnes {
    columns: 14rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.f-colonnes li {
    break-inside: avoid;
    padding: .15rem 0;
}

/* En-têtes de tableau triables */
th a.tri {
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

th a.tri:hover {
    text-decoration: underline;
}

.tri-fleche {
    margin-left: .3rem;
    font-size: .75em;
}