/* =========================================================================
   Questee — habillage
   -------------------------------------------------------------------------
   Inspiré du Document de Référence Système (5e-drs) : fond sombre uni,
   titres condensés, tableaux zébrés sans bordure, filet sous les titres de
   section.

   Principe directeur repris à 5e-drs : la couleur d'accent ne sert QU'À
   L'HABILLAGE — barre de navigation, boutons, états actifs, filets. Le corps
   du texte reste clair et neutre. C'est cette retenue qui rend lisibles des
   tableaux denses comme un profil de créature ou un ordre d'initiative.
   ========================================================================= */

/* #region JETONS */
:root {
    /* Fonds : sombre chaud, teinté rouge plutôt que le gris neutre de 5e-drs */
    --q-bg: #1b1618;
    --q-surface: #241d20;
    --q-surface-raised: #2b2226;
    --q-zebra: #211a1d;
    --q-rule: rgba(233, 213, 214, 0.22);
    --q-border: #3a2c30;

    /* Textes */
    --q-text: #dddddd;
    /* Les titres portent leur propre teinte, chaude et claire. Du même blanc
       que le corps, ils ne se repéraient qu'à leur taille et disparaissaient
       dès qu'on parcourait la page en diagonale. Elle reste distincte du rose
       des liens, sans quoi on croirait pouvoir cliquer dessus. */
    --q-heading: #e8c9a0;
    --q-muted: #a39497;

    /* Accent : le rouge de Questee, réservé à l'habillage */
    --q-accent: #970e0e;
    --q-accent-hover: #6d0a0a;
    --q-accent-active: #4a0606;
    --q-accent-dim: #4a1818;

    /* Liens : même gamme, assez pâle pour rester lisible en petit corps */
    --q-link: #d98b8b;
    --q-link-hover: #f0b4b4;

    --q-font-heading: "Oswald", "Segoe UI", sans-serif;
    --q-font-body: "Roboto", "Segoe UI", sans-serif;

    /* Report vers les variables Bootstrap, pour que les composants suivent */
    --bs-body-bg: var(--q-bg);
    --bs-body-color: var(--q-text);
    --bs-body-font-family: var(--q-font-body);
    --bs-emphasis-color: var(--q-heading);
    --bs-secondary-color: var(--q-muted);
    --bs-border-color: var(--q-border);
    --bs-link-color: var(--q-link);
    --bs-link-hover-color: var(--q-link-hover);
    --bs-primary: var(--q-accent);
    --bs-primary-rgb: 151, 14, 14;
    --bs-dark: var(--q-bg);
}
/* #endregion */

/* #region PAGE */
body {
    background-color: var(--q-bg);
    background-image: none;
    color: var(--q-text);
    font-family: var(--q-font-body);
    font-size: 0.95rem;
    line-height: 1.55;
}

/* L'image n'est gardée que là où elle plante le décor sans gêner la lecture. */
body.page-hero {
    background-image:
        linear-gradient(rgba(27, 22, 24, 0.72), rgba(27, 22, 24, 0.92)),
        url("../images/background-die-Zs_vFJ2.png");
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
}
/* #endregion */

/* #region TITRES */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: var(--q-font-heading);
    font-weight: 600;
    color: var(--q-heading);
    letter-spacing: 0.01em;
}

h1,
.h1 {
    font-size: 2.4rem;
    font-weight: 700;
}

/* Filet sous les titres de section : la signature visuelle de 5e-drs. */
h2,
.h2 {
    font-size: 1.5rem;
    border-bottom: 1px solid var(--q-rule);
    padding-bottom: 0.15rem;
    margin-bottom: 0.9rem;
}

/* Les titres servant d'étiquette (déjà en petites capitales) n'ont pas de filet. */
h2.text-uppercase,
.h2.text-uppercase,
h2.modal-title,
h2.offcanvas-title,
.card-body > h2.h6 {
    border-bottom: none;
    padding-bottom: 0;
}

h3,
.h3 {
    font-size: 1.2rem;
}

h6,
.h6 {
    letter-spacing: 0.06em;
}

/* Le nom du produit garde sa police de marque, celle du logo, partout où il
   est écrit en toutes lettres. */
.q-wordmark {
    font-family: "Libre Baskerville", serif;
    font-weight: 700;
    color: var(--q-accent);
    border-bottom: none;
    letter-spacing: 0.02em;
}
/* #endregion */

/* #region LIENS */
a {
    color: var(--q-link);
    text-decoration: none;
}

a:hover,
a:focus-visible {
    color: var(--q-link-hover);
    text-decoration: underline;
}

/* Les liens habillés en bouton gardent la couleur de leur bouton. */
a.btn:hover {
    text-decoration: none;
}

.btn-link {
    --bs-btn-color: var(--q-link);
    --bs-btn-hover-color: var(--q-link-hover);
}

/* Bootswatch force ces deux-là en blanc, avec une spécificité supérieure. */
.breadcrumb a {
    color: var(--q-link);
}

/* Dans une alerte, on suit la couleur du fond plutôt qu'une teinte fixe :
   le contraste reste correct quelle que soit la variante. */
.alert a {
    color: inherit;
    text-decoration: underline;
}
/* #endregion */

/* #region NAVIGATION */
.navbar {
    background-color: var(--q-accent-dim);
    border-bottom: 1px solid var(--q-border);
}

.navbar .nav-link {
    font-family: var(--q-font-heading);
    font-weight: 400;
    letter-spacing: 0.03em;
    color: var(--q-text) !important;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus-visible {
    color: #ffffff !important;
}

.dropdown-menu {
    background-color: var(--q-surface-raised);
    border: 1px solid var(--q-border);
}

.dropdown-item {
    color: var(--q-text);
}

.dropdown-item:hover,
.dropdown-item:focus-visible {
    background-color: var(--q-accent-dim);
    color: #ffffff;
}

.breadcrumb {
    font-size: 0.85rem;
}

.breadcrumb-item.active {
    color: var(--q-muted);
}
/* #endregion */

/* #region TABLEAUX */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--q-text);
    --bs-table-hover-bg: rgba(151, 14, 14, 0.16);
    --bs-table-hover-color: var(--q-heading);
    margin-bottom: 0;
}

.table > :not(caption) > * > * {
    padding: 0.45rem 0.75rem;
    border-bottom-width: 0;
    background-image: none;
}

.table thead th {
    font-family: var(--q-font-heading);
    font-weight: 500;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--q-heading);
    border-bottom: 1px solid var(--q-rule) !important;
}

/* Zébrage, comme 5e-drs : la lisibilité vient des lignes, pas des bordures. */
.table > tbody > tr:nth-child(even) > * {
    background-color: var(--q-zebra);
}

.table-sm > :not(caption) > * > * {
    padding: 0.3rem 0.6rem;
}
/* #endregion */

/* #region CARTES ET ENCARTS */
.card {
    background-color: var(--q-surface);
    border: 1px solid var(--q-border);
    border-radius: 4px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.card-header,
.card-footer {
    background-color: rgba(0, 0, 0, 0.22);
    border-color: var(--q-border);
}

.card-header {
    font-family: var(--q-font-heading);
    color: var(--q-heading);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.list-group-item {
    background-color: transparent;
    border-color: var(--q-border);
    color: var(--q-text);
}

.offcanvas {
    background-color: var(--q-bg);
    color: var(--q-text);
}

.offcanvas-header {
    border-bottom: 1px solid var(--q-border);
}
/* #endregion */

/* #region FORMULAIRES */
.form-control,
.form-select {
    background-color: #150f11;
    border: 1px solid var(--q-border);
    color: var(--q-text);
    border-radius: 3px;
}

.form-control:focus,
.form-select:focus {
    background-color: #150f11;
    border-color: var(--q-accent);
    color: var(--q-text);
    box-shadow: 0 0 0 0.15rem rgba(151, 14, 14, 0.3);
}

.form-control::placeholder {
    color: #7d6f72;
}

.form-label,
label {
    color: var(--q-muted);
    font-size: 0.88rem;
}

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

.form-text {
    color: var(--q-muted);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 9999s ease-in-out 0s;
    -webkit-text-fill-color: var(--q-text) !important;
    caret-color: var(--q-text);
}
/* #endregion */

/* #region BOUTONS */
.btn {
    font-family: var(--q-font-heading);
    font-weight: 400;
    letter-spacing: 0.03em;
    border-radius: 3px;
}

.btn-primary {
    --bs-btn-bg: var(--q-accent);
    --bs-btn-border-color: var(--q-accent);
    --bs-btn-hover-bg: var(--q-accent-hover);
    --bs-btn-hover-border-color: var(--q-accent-hover);
    --bs-btn-active-bg: var(--q-accent-active);
    --bs-btn-active-border-color: var(--q-accent-active);
    --bs-btn-color: #f3e7e7;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-disabled-bg: var(--q-accent-dim);
    --bs-btn-disabled-border-color: var(--q-accent-dim);
}

.btn-outline-secondary {
    --bs-btn-color: var(--q-text);
    --bs-btn-border-color: var(--q-border);
    --bs-btn-hover-bg: var(--q-surface-raised);
    --bs-btn-hover-border-color: var(--q-muted);
    --bs-btn-hover-color: var(--q-heading);
}

.btn-link {
    color: var(--q-link);
}
/* #endregion */

/* #region ÉTIQUETTES ET ALERTES */
.badge {
    font-family: var(--q-font-heading);
    font-weight: 400;
    letter-spacing: 0.04em;
}

.badge.bg-secondary {
    background-color: var(--q-surface-raised) !important;
    color: var(--q-text);
}

.badge.bg-light {
    background-color: var(--q-surface-raised) !important;
    color: var(--q-text) !important;
}

.alert {
    border-radius: 3px;
    border: 1px solid var(--q-border);
}

.alert-dark {
    background-color: var(--q-surface);
    color: var(--q-text);
}

.progress {
    background-color: #2f2427;
}
/* #endregion */

/* #region FICHE DE PERSONNAGE */
/* Tuiles de caractéristiques : nom, modificateur en gros, score en dessous. */
.q-abilities {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.5rem;
}

@media (max-width: 575.98px) {
    .q-abilities {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.q-ability {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    padding: 0.5rem 0.25rem 0.35rem;
    background-color: var(--q-surface);
    border: 1px solid var(--q-border);
    border-radius: 4px;
    color: inherit;
    cursor: pointer;
    transition:
        border-color 0.15s,
        background-color 0.15s;
}

.q-ability:hover,
.q-ability:focus-visible {
    border-color: var(--q-accent);
    background-color: var(--q-surface-raised);
}

.q-ability__name {
    font-family: var(--q-font-heading);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: var(--q-muted);
}

.q-ability__mod {
    font-family: var(--q-font-heading);
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--q-heading);
}

.q-ability__score {
    font-size: 0.82rem;
    color: var(--q-muted);
    border-top: 1px solid var(--q-border);
    width: 100%;
    text-align: center;
    padding-top: 0.15rem;
}

.q-ability__bonus {
    color: var(--q-link);
}

/* Encadrés de valeurs : maîtrise, initiative, classe d'armure, vitesse. */
.q-stat {
    background-color: var(--q-surface);
    border: 1px solid var(--q-border);
    border-radius: 4px;
    padding: 0.5rem 0.4rem;
    text-align: center;
    color: inherit;
    height: 100%;
}

.q-stat--rollable {
    cursor: pointer;
    transition:
        border-color 0.15s,
        background-color 0.15s;
}

.q-stat--rollable:hover,
.q-stat--rollable:focus-visible {
    border-color: var(--q-accent);
    background-color: var(--q-surface-raised);
}

.q-stat--shield {
    border-color: var(--q-accent-dim);
}

.q-stat__value {
    font-family: var(--q-font-heading);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.15;
    color: var(--q-heading);
}

.q-stat__label {
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--q-muted);
    line-height: 1.2;
}

/* Lignes lançables : sauvegardes et compétences. */
.q-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.2rem 0.3rem;
    background: none;
    border: none;
    border-radius: 3px;
    color: inherit;
    font-size: 0.88rem;
    text-align: left;
    cursor: pointer;
}

.q-line:hover,
.q-line:focus-visible {
    background-color: var(--q-surface-raised);
}

.q-line__dot {
    flex: 0 0 auto;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    border: 1px solid var(--q-muted);
}

.q-line__dot.is-on {
    background-color: var(--q-accent);
    border-color: var(--q-accent);
}

.q-line__ability {
    flex: 0 0 2.2rem;
    font-size: 0.7rem;
    color: var(--q-muted);
    text-transform: uppercase;
}

.q-line__name {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.q-line__value {
    flex: 0 0 auto;
    font-family: var(--q-font-heading);
    font-weight: 500;
    color: var(--q-heading);
}

/* Résultat du dernier jet, épinglé en bas à droite. */
.q-dice-result {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1040;
    min-width: 17rem;
    max-width: min(24rem, calc(100vw - 2rem));
    padding: 0.75rem 1rem;
    background-color: var(--q-surface-raised);
    border: 1px solid var(--q-accent);
    border-radius: 4px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.6);
}

.q-dice-total {
    font-family: var(--q-font-heading);
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1;
    color: var(--q-heading);
    min-width: 2.5rem;
    text-align: center;
}

kbd {
    background-color: var(--q-surface-raised);
    border: 1px solid var(--q-border);
    border-radius: 3px;
    padding: 0 0.3rem;
    font-size: 0.85em;
    color: var(--q-text);
}
/* #endregion */

/* #region COLONNE DE NAVIGATION */
/* Au-delà du point de rupture, la colonne suit le défilement.
   Elle portait `position-lg-sticky`, une classe qui n'existe pas dans
   Bootstrap : le menu remontait donc hors de vue dès qu'on descendait dans une
   page de règles, alors que c'est justement là qu'on saute d'un chapitre à
   l'autre. Le menu défile pour lui-même quand il dépasse la hauteur de l'écran. */
@media (min-width: 992px) {
    /* `!important` parce que Bootstrap impose `position: static` à un offcanvas
       responsive une fois passé son point de rupture, et qu'aucune spécificité
       raisonnable ne l'en déloge. */
    .q-sidebar.offcanvas-lg {
        position: sticky !important;
        top: 0;
        height: 100vh;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

/* Retour en haut : sur une page de règles longue, remonter au menu à la molette
   décourage. Le bouton n'apparaît qu'une fois qu'on a de quoi remonter. */
.q-to-top {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1030;
    display: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
}

.q-to-top--shown {
    display: inline-flex;
}

/* La pastille du tiroir de séance occupe déjà ce coin : le retour en haut se
   décale au-dessus plutôt que de se superposer. */
@media (max-width: 1399.98px) {
    .q-drawer-open .q-to-top,
    body:has(.q-drawer-toggle) .q-to-top {
        bottom: 4.5rem;
    }
}
/* #endregion */

/* #region ACQUIS DE CRÉATION */
/* Une case cochée d'office — langue de la race, compétence de l'historique —
   se distingue d'un choix : sans repère, on la croit décochable et on cherche
   pourquoi elle résiste. */
.q-granted .form-check-label {
    color: var(--q-muted);
}

.q-granted .form-check-label::after {
    content: " (acquis)";
    font-size: 0.85em;
}
/* #endregion */

/* #region SECTIONS REPLIABLES */
/* Le titre devient le bouton : cliquer le mot est le geste naturel. Il garde
   son allure de titre, avec un chevron pour dire qu'il se replie. */
.q-fold-toggle {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.q-fold-toggle:hover {
    color: var(--q-link-hover);
}

.q-fold-toggle::before {
    content: "▾";
    font-size: 0.7em;
    color: var(--q-muted);
    transition: transform 0.15s ease-in-out;
}

.q-fold-toggle[aria-expanded="false"]::before {
    transform: rotate(-90deg);
}
/* #endregion */

/* #region SOMMAIRES EN COLONNES */
/* Soixante-sept dons en une seule colonne repousseraient les descriptions sous
   trois écrans de liste. */
.q-columns {
    column-width: 14rem;
    column-gap: 2rem;
}

.q-columns > li {
    break-inside: avoid;
}
/* #endregion */

/* #region TABLEAUX TRIABLES */
/* L'en-tête d'une colonne triable se signale au survol, et porte une flèche
   une fois le classement appliqué : sans repère, on ne devine pas qu'elle se
   clique. Le lien porte l'adresse — le classement se fait en base, la liste
   étant paginée — mais garde l'allure d'un en-tête. */
.q-sortable > a {
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

.q-sortable > a:hover {
    color: var(--q-link-hover);
    text-decoration: underline;
}

.q-sortable[aria-sort="ascending"] > a::after {
    content: " ↑";
}

.q-sortable[aria-sort="descending"] > a::after {
    content: " ↓";
}

/* La ligne de détail prolonge la précédente : le filet zébré la détacherait
   de son sort. */
tr.q-detail > td {
    border-top: 0;
    background-color: transparent;
}

/* Bootswatch teinte la page courante de sa propre couleur d'accent, restée
   turquoise : elle jurait sous les catalogues. */
.pagination {
    --bs-pagination-color: var(--q-link);
    --bs-pagination-bg: transparent;
    --bs-pagination-border-color: var(--q-border);
    --bs-pagination-hover-color: var(--q-link-hover);
    --bs-pagination-hover-bg: var(--q-surface);
    --bs-pagination-hover-border-color: var(--q-border);
    --bs-pagination-focus-color: var(--q-link-hover);
    --bs-pagination-focus-bg: var(--q-surface);
    --bs-pagination-active-color: #f3e7e7;
    --bs-pagination-active-bg: var(--q-accent);
    --bs-pagination-active-border-color: var(--q-accent);
    --bs-pagination-disabled-color: var(--q-muted);
    --bs-pagination-disabled-bg: transparent;
    --bs-pagination-disabled-border-color: var(--q-border);
}
/* #endregion */

/* #region TIROIRS */
/* Sous le point de rupture, l'encart latéral devient un tiroir. Son bouton
   se retrouverait tout en bas d'une page longue : on le détache en pastille
   flottante pour qu'il reste atteignable sans défiler. */
@media (max-width: 1399.98px) {
    .q-drawer-toggle {
        position: fixed;
        right: 1rem;
        bottom: 1rem;
        z-index: 1035;
        width: auto !important;
        margin: 0 !important;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
    }
}
/* #endregion */

/* #region ÉTAT DU PERSONNAGE */
/* Encadré actif : inspiration disponible. */
.q-stat--on {
    border-color: var(--q-accent);
    background-color: rgba(151, 14, 14, 0.14);
}

.q-stat--on .q-stat__value {
    color: #f0c98b;
}
/* #endregion */