/* Brèche : nuit de mégapole, cyan technique et magenta de magie, sur le thème de base du moteur.
   Polices du livre : Oswald (titres) et Crimson Pro (texte). */

@font-face {
    font-family: "Oswald";
    src: url("../fonts/oswald-latin-400-normal.woff") format("woff");
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Oswald";
    src: url("../fonts/oswald-latin-600-normal.woff") format("woff");
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "Oswald";
    src: url("../fonts/oswald-latin-700-normal.woff") format("woff");
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "Crimson Pro";
    src: url("../fonts/crimson-pro-latin-400-normal.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Crimson Pro";
    src: url("../fonts/crimson-pro-latin-400-italic.woff") format("woff");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Crimson Pro";
    src: url("../fonts/crimson-pro-latin-700-normal.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Crimson Pro";
    src: url("../fonts/crimson-pro-latin-700-italic.woff") format("woff");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* Le signe du crédit (¤) : une police d'un seul glyphe, construite par scripts/police_credit.py */
@font-face {
    font-family: "Credit";
    src: url("../fonts/credit.woff") format("woff");
    font-weight: 100 900;
    font-display: swap;
    unicode-range: U+A4;
}

:root,
[data-bs-theme=dark] {
    --encre: #0b0e14;
    --surface: #121722;
    --surface-2: #1a2130;
    --trait: rgba(31, 181, 201, .18);
    --texte: #dfe7ef;
    --texte-doux: #8f9db0;
    --or: #1fb5c9;
    --sang: #c2337a;
    --sang-vif: #e85aa0;
    --lien: #5fd3e3;
    --titre: "Credit", "Oswald", "Arial Narrow", sans-serif;
    --corps: "Credit", "Crimson Pro", Georgia, serif;
    --bs-link-color-rgb: 95, 211, 227;
    --bs-danger-rgb: 232, 90, 160;
    --bs-focus-ring-color: rgba(232, 90, 160, .35);
    /* Crimson Pro est petite pour son corps : on la grossit par rapport au thème de base */
    --bs-body-font-size: 1.2rem;
    --bs-body-line-height: 1.6;
}

html {
    scrollbar-color: #2a3a4c var(--encre);
}

body {
    background:
        radial-gradient(ellipse 90% 50% at 50% 0, rgba(31, 181, 201, .12), transparent 70%),
        var(--encre);
}

.barre {
    background: rgba(11, 14, 20, .88);
}

/* Oswald est condensée et déjà grasse : un cran de graisse et un peu d'espace suffisent */
h1,
h2,
h3,
h4 {
    font-weight: 600;
    letter-spacing: .02em;
}

h1,
.marque {
    text-transform: uppercase;
}

.marque {
    font-size: 1.5rem;
    letter-spacing: .08em;
}

.marque .icone {
    color: var(--or);
}

.barre .nav-link,
.dropdown-item,
.btn {
    font-family: var(--titre);
    letter-spacing: .04em;
}

.dropdown-header {
    font-family: var(--titre);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--or);
}

/* Règles du livre qui accompagnent une page de données : un panneau repliable par section */
.panneaux-livre {
    display: grid;
    gap: .5rem;
    margin-block: 1.25rem;
}

.panneau-livre {
    background: var(--surface);
    border: 1px solid var(--trait);
    border-radius: var(--rayon, 10px);
}

.panneau-livre > summary {
    cursor: pointer;
    padding: .6rem 1rem;
    font-family: var(--titre);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--or);
    list-style: none;
}

.panneau-livre > summary::-webkit-details-marker {
    display: none;
}

.panneau-livre > summary::before {
    content: "▸";
    display: inline-block;
    width: 1.1em;
    transition: transform .15s;
}

.panneau-livre[open] > summary::before {
    transform: rotate(90deg);
}

.panneau-livre > summary:hover {
    color: var(--lien);
}

.panneau-corps {
    padding: 0 1rem 1rem;
}

.panneau-corps h3,
.panneau-corps h4 {
    font-size: 1.2rem;
    margin-top: 1.25rem;
}

.panneau-corps table {
    width: 100%;
}

@media (prefers-reduced-motion: reduce) {
    .panneau-livre > summary::before {
        transition: none;
    }
}

/* « Lire le livre » : le bouton d'accueil le plus en vue, cyan plein */
.btn-livre {
    background: var(--or);
    border-color: var(--or);
    color: var(--encre);
    font-weight: 600;
}

.btn-livre:hover,
.btn-livre:focus-visible {
    background: var(--lien);
    border-color: var(--lien);
    color: var(--encre);
}

/* Page d'un objet : prix, poids, légalité en liste de définitions */
.fiche-objet {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .25rem 1.25rem;
    margin-block: 1rem 1.5rem;
}

.fiche-objet dt {
    font-family: var(--titre);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--or);
}

.fiche-objet dd {
    margin: 0;
}

/* Les textes saisis dans l'éditeur HTML de l'admin : pas de marge parasite dans les cellules et les listes */
td > p:last-child,
dd > p:last-child {
    margin-bottom: 0;
}

/* Progressions par niveau (BBA, sauvegardes) : une colonne par niveau, chiffres alignés */
.panneau-corps {
    overflow-x: auto;
}

.progressions {
    font-variant-numeric: tabular-nums;
}

.progressions th,
.progressions td {
    text-align: center;
    white-space: nowrap;
}

.progressions th:first-child,
.progressions td:first-child {
    text-align: left;
    font-weight: 600;
}

/* Assistant de création : choix par cartes (peuple, origine, classe, matricule, raison…) */
.choix-cartes {
    display: grid;
    gap: .4rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
}
.choix-carte {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .5rem .7rem;
    border: 1px solid var(--bordure, rgba(255, 255, 255, .15));
    border-radius: .4rem;
    cursor: pointer;
}
.choix-carte:has(input:checked) {
    border-color: var(--accent, #19d3e6);
    background: color-mix(in srgb, var(--accent, #19d3e6) 12%, transparent);
}
.choix-carte input { margin-top: .25rem; flex: none; }
.choix-carte small { display: block; opacity: .75; }
.choix-carte .lien-fiche { margin-left: auto; flex: none; }

/* Un champ de nom avec son dé (assistant de création, étape Identité) */
.champ-avec-de { display: flex; gap: .4rem; align-items: stretch; }
.champ-avec-de .form-control { flex: 1; }
.champ-avec-de .f-btn { flex: none; }

/* Implants de l'assistant : la case n'est pas collée au bord, et une option se lit comme telle */
.tableau-implants th:first-child,
.tableau-implants td:first-child { padding-left: 1rem; width: 3rem; }
.tableau-implants .option-implant td { background: color-mix(in srgb, var(--accent, #19d3e6) 5%, transparent); }
.tableau-implants .option-implant td:first-child { border-left: 3px solid color-mix(in srgb, var(--accent, #19d3e6) 55%, transparent); }
.option-contenu { display: flex; gap: .5rem; padding-left: 1rem; }
.option-marque { flex: none; opacity: .75; }
.option-implant:has(input:disabled) { opacity: .45; }

/* Vie hors mesure : matricules (prix) et contacts */
.choix-indispo { opacity: .5; cursor: not-allowed; }
.prix-matricule { color: var(--accent, #19d3e6); }
.legende-contacts th, .legende-contacts td { font-size: .9rem; }
fieldset.contact { margin-bottom: .6rem; padding: .5rem .8rem .6rem; border: 1px solid var(--bordure, rgba(255, 255, 255, .15)); border-radius: .4rem; }
fieldset.contact legend { float: none; width: auto; margin: 0; padding: 0 .4rem; font-size: 1rem; }
fieldset.contact legend small { opacity: .7; margin-left: .4rem; }