/* Cette feuille de style est chargée directement en tant que fichier CSS
   statique (voir layouts/app.blade.php) et n'est pas compilée par
   Tailwind/Vite : les directives Tailwind (@import, @source, @theme) ont
   été retirées ici car elles ne sont pas comprises par le navigateur et
   déclenchaient une requête 404 inutile. */

/* ============================================================
   Thème sombre / clair
   ------------------------------------------------------------
   Toutes les couleurs de l'interface sont définies comme des
   variables CSS ici. Le thème sombre (historique) reste la
   valeur par défaut de :root ; le thème clair est fourni par le
   bloc [data-theme="clair"] ci-dessous, activé en posant
   data-theme="clair" sur <html> (voir public/js/theme.js et le
   script inline dans layouts/app.blade.php, qui choisit le
   thème avant l'affichage pour éviter tout flash).
   ============================================================ */

:root {
    /* Indique aux navigateurs que la page est sombre, pour que les
       contrôles de formulaire natifs (case à cocher, flèches des champs
       number, etc.) se dessinent dans une variante sombre au lieu du blanc
       par défaut, qui tranchait violemment avec le reste de l'interface. */
    color-scheme: dark;

    /* Palette sombre avec reflets mauves */
    /* Palette sombre avec reflets mauves (thème par défaut) */
    --fond: #141124;
    --surface: #1e1933;
    --champ-fond: #171329;
    --bordure: #362e59;

    /* Mauve principal */
    --primaire: #a78bfa;
    --primaire-survol: #c4b5fd;
    --primaire-halo: rgba(167, 139, 250, 0.25);
    --primaire-halo-faible: rgba(167, 139, 250, 0.12);

    /* Orange / ambre */
    --secondaire: #f59e0b;
    --secondaire-survol: #fbbf24;
    --secondaire-halo: rgba(245, 158, 11, 0.3);
    --bouton-texte: #141124;

    /* Textes */
    --texte: #fdfcff;
    --texte-secondaire: #b4a9cc;
    --texte-espace-reserve: #6c638a;
    --texte-inverse: #1a0533;
    --texte-neutre: #7a8a7a;
    --texte-positif: #55c878;
    --texte-negatif: #e07a7a;

    /* Accent doré : deux variantes.
       --or sert de couleur de TEXTE/bordure sur les fonds ; elle
       est recalculée en clair plus foncé dans le thème clair pour
       rester lisible sur fond blanc.
       --or-vif sert de fond plein (boutons, puces, barre de
       progression) et reste identique dans les deux thèmes car
       le texte posé dessus (--texte-inverse) est déjà sombre. */
    --or: #e6b84d;
    --or-doux: #e8d5b5;
    --or-bordure: #c49a3c;
    --or-vif: #e6b84d;
    --bordure-option: #6e5689;
    --niveau-max-fond: #4d3d5d;
    --niveau-max-texte: #d7c9e3;
    --or-vif-clair: #f0c963;

    /* Halos et liserés dorés translucides */
    --or-halo-faible: rgba(230, 184, 77, 0.08);
    --or-halo-moyen: rgba(230, 184, 77, 0.15);
    --or-halo-fort: rgba(230, 184, 77, 0.25);
    --or-halo-actif: rgba(230, 184, 77, 0.4);
    --or-halo-actif-opaque: #664e31;
    --or-ligne-faible: rgba(196, 154, 60, 0.2);
    --or-ligne-moyenne: rgba(196, 154, 60, 0.3);
    --or-ligne-forte: rgba(196, 154, 60, 0.35);
    --point-inactif: rgba(184, 169, 201, 0.25);
    --panneau: rgba(25, 10, 50, 0.9);
    --panneau-opaque: #180a30;
    --panneau-survol: rgba(40, 15, 70, 0.95);
    --panneau-vif: rgba(60, 15, 90, 0.8);
    --panneau-vif-survol: rgba(80, 25, 120, 0.9);
    --panneau-secondaire: rgba(20, 10, 40, 0.9);
    --panneau-secondaire-survol: rgba(30, 15, 55, 0.95);
    --panneau-carte: rgba(15, 5, 30, 0.85);
    --panneau-profil: rgba(25, 10, 50, 0.75);

    /* Ombres */
    --ombre-sombre: rgba(0, 0, 0, 0.6);
    --ombre-modal: rgba(0, 0, 0, 0.7);

    /* Bouton et actions destructrices (supprimer, etc.) */
    --danger-fond: rgba(60, 15, 20, 0.9);
    --danger-texte: #f5c6cb;
    --danger-bordure: #a33c3c;
    --danger-fond-survol: #a33c3c;
    --danger-texte-survol: #ffffff;

    /* Fenêtre modale (fond assombrissant la page derrière elle) */
    --modal-overlay-fond: rgba(10, 5, 20, 0.75);

    /* Voile assombrissant une photo de personnage au survol ("Changer
       la photo") : reste identique dans les deux thèmes, une photo
       arbitraire a besoin d'un fond sombre constant pour que le texte
       doré posé dessus reste lisible. */
    --avatar-overlay-fond: rgba(20, 5, 40, 0.75);

    /* Alertes */
    --alerte-erreur-fond: rgba(120, 30, 30, 0.8);
    --alerte-erreur-bordure: #e05555;
    --alerte-erreur-texte: #f5c6c6;
    --alerte-succes-fond: rgba(30, 90, 30, 0.8);
    --alerte-succes-bordure: #55e055;
    --alerte-succes-texte: #c6f5c6;

    /* Badge d'authentification (voir inscription.css) */
    --badge-fond: #0f172a;
    --badge-bordure: #1e293b;
    --badge-texte: #f8fafc;
    --badge-email: #e2e8f0;
    --badge-lien: #38bdf8;
    --badge-logout-bordure: #334155;
    --badge-logout-texte: #cbd5e1;
    --badge-dot-online: #22c55e;
    --badge-dot-online-halo: rgba(34, 197, 94, 0.6);
    --badge-dot-offline: #64748b;
    --badge-ombre: rgba(0, 0, 0, 0.35);
    --badge-danger: #ef4444;
    --badge-danger-texte: #ffffff;

    --rayon: 10px;
}

[data-theme="clair"] {
    /* Palette claire reprise des maquettes Figma : fond beige,
       boutons/pastilles mauves, accents dorés, texte foncé. */
    --fond: #e8dcc4;
    --surface: #e8dcc4;
    --champ-fond: #b8aedd;
    --bordure: #f0c04a;

    --primaire: #9682d6;
    --primaire-survol: #8571ce;
    --primaire-halo: rgba(150, 130, 214, 0.3);
    --primaire-halo-faible: rgba(150, 130, 214, 0.15);

    --secondaire: #f0c04a;
    --secondaire-survol: #f5cd6f;
    --secondaire-halo: rgba(240, 192, 74, 0.35);
    --bouton-texte: #2b2540;

    --texte: #2b2540;
    --texte-secondaire: #4a4260;
    --texte-espace-reserve: #6f6785;
    --texte-inverse: #2b2540;
    --texte-neutre: #5a5a5a;
    --texte-positif: #1f7a45;
    --texte-negatif: #b3261e;

    --or: #8a6410;
    --or-doux: #8a6410;
    --or-bordure: #f0c04a;
    --or-vif: #f0c04a;
    --bordure-option: #9682d6;
    --niveau-max-fond: #b8aedd;
    --niveau-max-texte: #2b2540;
    --or-vif-clair: #f5cd6f;

    --or-halo-faible: rgba(240, 192, 74, 0.12);
    --or-halo-moyen: rgba(240, 192, 74, 0.2);
    --or-halo-fort: rgba(240, 192, 74, 0.3);
    --or-halo-actif: rgba(240, 192, 74, 0.4);
    --or-halo-actif-opaque: #f0c04a;
    --or-ligne-faible: rgba(138, 100, 16, 0.25);
    --or-ligne-moyenne: rgba(138, 100, 16, 0.35);
    --or-ligne-forte: rgba(138, 100, 16, 0.45);
    --point-inactif: rgba(150, 130, 214, 0.3);

    --panneau: #efe5d0;
    --panneau-opaque: #efe5d0;
    --panneau-survol: #f4ecdb;
    --panneau-vif: #b8aedd;
    --panneau-vif-survol: #a89bd4;
    --panneau-secondaire: #b8aedd;
    --panneau-secondaire-survol: #c5bce4;
    --panneau-carte: #efe5d0;
    --panneau-profil: #efe5d0;

    --ombre-sombre: rgba(41, 23, 82, 0.35);
    --ombre-modal: rgba(30, 15, 55, 0.55);

    --danger-fond: #f6d5d5;
    --danger-texte: #7a1f1f;
    --danger-bordure: #c85a6a;
    --danger-fond-survol: #efbcbc;
    --danger-texte-survol: #5c1414;

    --modal-overlay-fond: rgba(30, 15, 55, 0.6);
    --avatar-overlay-fond: rgba(20, 5, 40, 0.75);

    --alerte-erreur-fond: #f6d5d5;
    --alerte-erreur-bordure: #c85a6a;
    --alerte-erreur-texte: #7a1f1f;
    --alerte-succes-fond: #d4ecdc;
    --alerte-succes-bordure: #3f9d68;
    --alerte-succes-texte: #14532d;

    --badge-fond: #b8aedd;
    --badge-bordure: #f0c04a;
    --badge-texte: #2b2540;
    --badge-email: #4a4260;
    --badge-lien: #8a6410;
    --badge-logout-bordure: #9682d6;
    --badge-logout-texte: #2b2540;
    --badge-dot-online: #3f9d68;
    --badge-dot-online-halo: rgba(63, 157, 104, 0.4);
    --badge-dot-offline: #9682d6;
    --badge-ombre: rgba(41, 23, 82, 0.3);
    --badge-danger: #ef4444;
    --badge-danger-texte: #ffffff;
}

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

body {
    min-height: 100vh;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.5;
    color: var(--texte);
    background-color: var(--fond);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.5rem;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Le changement de thème anime le fond et la bordure des blocs les
   plus visibles pour éviter un changement trop brutal, sans animer
   l'ensemble des éléments (coût de perf inutile). */
main,
.carte,
.carte-choix,
input,
.formulaire-saisie,
.formulaire-liste,
button,
.bouton,
.modale-boite,
.auth-badge {
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.05s ease;
}

.conteneur {
    /* `width: 100%` is required here: body is a flex container, and a flex
       item with only `max-width` shrinks to fit its content instead of
       stretching to that max-width. Without it, any CSS grid inside using
       `repeat(auto-fill, ...)` cannot see a real available width and
       collapses to a single narrow column, which is what made the whole
       character creation flow look cramped/"mobile" on desktop. */
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

main {
    width: 100%;
    max-width: 420px;
    background-color: var(--surface);
    padding: 2.5rem;
    border-radius: var(--rayon);
    border: 1px solid var(--bordure);
    box-shadow:
        0 20px 30px -10px var(--ombre-sombre),
        0 0 40px -10px var(--primaire-halo-faible);
}

.carte {
    background: var(--panneau-carte);
    border: 1px solid var(--or-bordure);
    border-radius: 16px;
    padding: 2rem;
}

.texte-centre {
    text-align: center;
}

.texte-or {
    color: var(--or);
}

.texte-attenue {
    color: var(--texte-secondaire);
}

.marge-bas-1 { margin-bottom: 0.5rem; }
.marge-bas-2 { margin-bottom: 1rem; }
.marge-bas-3 { margin-bottom: 1.5rem; }
.marge-bas-4 { margin-bottom: 2rem; }

.marge-haut-2 { margin-top: 1rem; }

h1,
h2,
h3 {
    color: var(--primaire);
    margin-bottom: 1.75rem;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.025em;
}

.titre-principal {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--or);
    margin-bottom: 1rem;
}

.titre-section {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--or);
    margin-bottom: 1.5rem;
}

.sous-titre {
    font-size: 1.1rem;
    color: var(--texte);
    margin-bottom: 2rem;
}

/* Formulaires */

form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

form > div {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--texte-secondaire);
}

input {
    width: 100%;
    padding: 0.75rem 0.875rem;
    background-color: var(--champ-fond);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    font-size: 1rem;
    color: var(--texte);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input::placeholder {
    color: var(--texte-espace-reserve);
}

/* La règle `input { width: 100% }` ci-dessus, pensée pour les champs
   texte, donne aux case à cocher une boîte de disposition anormalement
   large ; `accent-color` fixe aussi leur couleur cochée sur le thème (au
   lieu du bleu par défaut du navigateur). */
input[type="checkbox"],
input[type="radio"] {
    width: auto;
    accent-color: var(--secondaire);
}

input:focus {
    outline: none;
    border-color: var(--primaire);
    box-shadow: 0 0 0 3px var(--primaire-halo);
}

.formulaire-groupe {
    margin-bottom: 1rem;
}

.formulaire-etiquette {
    display: block;
    font-size: 0.9rem;
    color: var(--or);
    margin-bottom: 0.35rem;
}

.formulaire-saisie {
    width: 100%;
    padding: 0.6rem 0.9rem;
    background: var(--panneau);
    border: 1px solid var(--or-bordure);
    border-radius: 8px;
    color: var(--or-doux);
    font-size: 0.95rem;
    outline: none;
    resize: vertical;
    transition: border-color 0.2s;
}

.formulaire-saisie:focus {
    border-color: var(--or);
}

.formulaire-liste {
    width: 100%;
    padding: 0.6rem 0.9rem;
    background: var(--panneau);
    border: 1px solid var(--or-bordure);
    border-radius: 8px;
    color: var(--or-doux);
    font-size: 0.95rem;
    outline: none;
    cursor: pointer;
}

.formulaire-liste:focus {
    border-color: var(--or);
}

/* Boutons */

button {
    margin-top: 0.75rem;
    padding: 0.85rem 1.25rem;
    background-color: var(--secondaire);
    color: var(--bouton-texte);
    border: none;
    border-radius: var(--rayon);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition:
        background-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.05s ease;
}

button:hover {
    background-color: var(--secondaire-survol);
    box-shadow: 0 0 18px var(--secondaire-halo);
}

button:active {
    transform: scale(0.99);
}

.bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 2rem;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    text-decoration: none;
}

.bouton:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.bouton-principal {
    background: var(--or-vif);
    color: var(--texte-inverse);
    border-color: var(--or-vif);
}

.bouton-principal:hover {
    background: var(--or-vif-clair);
    transform: translateY(-1px);
}

.bouton-secondaire {
    background: var(--panneau-secondaire);
    color: var(--or-doux);
    border-color: var(--or-bordure);
}

.bouton-secondaire:hover {
    background: var(--panneau-secondaire-survol);
}

.bouton-danger {
    background: var(--danger-fond);
    color: var(--danger-texte);
    border-color: var(--danger-bordure);
}

.bouton-danger:hover {
    background: var(--danger-fond-survol);
    color: var(--danger-texte-survol);
}

.modale-voile {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--modal-overlay-fond);
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.modale-voile.active {
    display: flex;
}

.modale-boite {
    background: var(--panneau-carte);
    border: 1px solid var(--or-bordure);
    border-radius: 16px;
    padding: 1.75rem;
    max-width: 380px;
    width: 100%;
    text-align: center;
    box-shadow: 0 20px 40px -10px var(--ombre-modal);
}

.modale-boite h2 {
    color: var(--or);
    font-size: 1.15rem;
    margin-bottom: 0.75rem;
}

.modale-boite p {
    color: var(--texte-secondaire);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.modale-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

.bouton-option {
    background: var(--panneau-vif);
    color: var(--or);
    border-color: var(--or-bordure);
    padding: 1rem 1.5rem;
    font-size: 1.05rem;
    flex: 1;
}

.bouton-option:hover {
    background: var(--panneau-vif-survol);
    border-color: var(--or);
}

.bouton-petit {
    padding: 0.35rem 0.75rem;
    font-size: 0.85rem;
    border-radius: 6px;
}

.bouton-icone {
    width: 40px;
    height: 40px;
    margin-top: 0;
    padding: 0;
    border-radius: 6px;
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Liens */

a {
    color: var(--secondaire);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.15s ease;
}

a:hover {
    color: var(--secondaire-survol);
    text-decoration: underline;
}

/* Cartes */

.grille-cartes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
}

.carte-choix {
    background: var(--panneau);
    border: 1px solid var(--or-bordure);
    border-radius: 12px;
    padding: 1.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 110px;
}

.carte-choix:hover {
    border-color: var(--or);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px var(--or-halo-moyen);
}

.carte-choix.selectionne {
    border-color: var(--or);
    border-width: 2px;
    background: var(--panneau-survol);
    box-shadow: 0 0 12px var(--or-halo-fort);
}

.carte-choix .carte-titre {
    font-size: 1rem;
    font-weight: 600;
    color: var(--or);
}

.carte-choix .carte-desc {
    font-size: 0.8rem;
    color: var(--texte-secondaire);
    margin-top: 0.35rem;
}

/* Barre de progression */

.barre-progression {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    margin: 0 auto 2rem;
    position: relative;
}

.ligne-progression {
    position: absolute;
    top: 50%;
    left: 2.5rem;
    right: 2.5rem;
    height: 2px;
    background: var(--or-ligne-moyenne);
    transform: translateY(-50%);
    z-index: 0;
}

.remplissage-progression {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: var(--or-vif);
    transition: width 0.3s ease;
}

.etape-progression {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    /* Fond opaque (et non semi-transparent) : le rond doit cacher
       complètement la ligne de progression derrière lui, pas laisser sa
       couleur transparaître à travers. */
    background: var(--panneau-opaque);
    border: 2px solid var(--or-bordure);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--texte-secondaire);
    z-index: 2;
    position: relative;
    margin: 0 0.5rem;
    transition: all 0.3s ease;
}

.etape-progression.active {
    background: var(--or-vif);
    border-color: var(--or-vif);
    color: var(--texte-inverse);
}

.etape-progression.terminee {
    background: var(--or-halo-actif-opaque);
    border-color: var(--or);
    color: var(--or);
}

/* Statistiques */

.stats-conteneur {
    /* 2 colonnes comme dans la maquette : stats-list à gauche, aide/pool à
       droite. Les lignes ne montrent plus qu'icône + nom + valeur +
       contrôles (les bonus ne sont plus affichés par ligne, voir
       .stats-bonus-mention), ce qui laisse largement assez de place à la
       colonne des noms pour ne jamais couper un mot au milieu. */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    min-width: 0;
}

.stats-liste {
    background: var(--panneau);
    border: 1px solid var(--or-bordure);
    border-radius: 12px;
    overflow: hidden;
    min-width: 0;
}

.stat-ligne {
    display: grid;
    grid-template-columns: 32px minmax(90px, 1fr) 32px 70px auto;
    column-gap: 0.4rem;
    align-items: center;
    padding: 0.6rem 0.9rem;
    border-bottom: 1px solid var(--or-ligne-faible);
    min-width: 0;
}

.stat-ligne:last-child {
    border-bottom: none;
}

.stat-icone {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--or-vif);
    margin-right: 0.75rem;
    flex-shrink: 0;
}

.stat-nom {
    grid-column: 2;
    font-size: 0.85rem;
    color: var(--or);
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Petit badge "+X / 0 / -X" (bonus total de la caractéristique, incluant
   les bonus "au choix" déjà assignés) : en vert quand positif, gris/neutre
   sinon, jamais dans une grosse boîte séparée comme avant. */
.stat-bonus-total {
    grid-column: 3;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--texte-neutre);
}

.stat-bonus-total[data-value^="-"] {
    color: var(--texte-negatif);
}

.stat-bonus-total:not([data-value="0"]):not([data-value^="-"]) {
    color: var(--texte-positif);
}

.stat-valeur {
    width: 70px;
    height: 40px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 0.5rem;
    background: var(--panneau-vif);
    border: 1px solid var(--or-bordure);
    border-radius: 6px;
    color: var(--or);
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.stat-valeur-base {
    grid-column: 4;
    width: 70px;
    height: 40px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.5rem;
    border: 0;
    background: transparent;
    color: var(--or);
    text-align: center;
    font-weight: 600;
}

.stat-points {
    grid-column: 4;
}

.stat-controles {
    grid-column: 5;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Bonus (race/sous-race/classe) : mention compacte en haut de la boîte de
   choix des caractéristiques (pas dans la maquette d'origine, ajoutée ici
   à cet endroit plutôt qu'en gros encadrés séparés au-dessus de la carte).
   Les bonus fixes ("Charisme +2") sont juste listés ; les bonus "au choix"
   (ex. Humain Variant, Demi-elfe) demandent au joueur de choisir la
   caractéristique via un select. */
.stats-bonus-mention {
    padding: 0.75rem 0.9rem;
    border-bottom: 1px solid var(--or-ligne-forte);
    font-size: 0.8rem;
    color: var(--texte-secondaire);
}

.stats-bonus-mention .bonus-fixe {
    color: var(--or);
}

.bonus-choix-ligne {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.4rem;
    flex-wrap: wrap;
}

.bonus-choix-ligne select {
    background: var(--panneau-vif);
    border: 1px solid var(--or-bordure);
    border-radius: 6px;
    color: var(--or);
    font-size: 0.8rem;
    padding: 0.3rem 0.5rem;
}

/* Number inputs (méthode "points") default to the browser's native
   up/down spinner, which renders as a light widget glued to the input's
   right edge and clashes with the dark theme, plus it isn't reset the
   same way as the rest of the field, throwing off the vertical alignment
   with the +/- buttons next to it. Remove it entirely since we already
   provide dedicated +/- buttons. */
input.stat-valeur-base::-webkit-outer-spin-button,
input.stat-valeur-base::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input.stat-valeur-base[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.stat-controles {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.stat-valeur.cible-depot {
    cursor: pointer;
}

.stat-valeur.cible-depot.survol-glisser {
    border-color: var(--or);
    background: var(--or-halo-fort);
    transform: scale(1.05);
}

.stat-valeur.cible-depot.remplie {
    border-color: var(--or);
}

/* Répartition standard / Lancer de dés : pool de valeurs à glisser */

.reserve-valeurs {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 0.6rem;
    min-height: 48px;
    border-radius: 10px;
    transition: outline-color 0.15s ease, background 0.15s ease;
}

.reserve-valeurs.survol-glisser {
    outline: 2px dashed var(--or);
    outline-offset: 6px;
    background: var(--or-halo-faible);
}

.stat-valeur.cible-depot[draggable="true"] {
    cursor: grab;
}

.stat-valeur.cible-depot.en-glissement {
    opacity: 0.4;
}

.jeton-valeur {
    min-width: 64px;
    padding: 0.55rem 0.9rem;
    background: var(--panneau);
    border: 1px solid var(--or-bordure);
    border-radius: 10px;
    color: var(--or);
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    cursor: grab;
    transition: all 0.2s ease;
    user-select: none;
}

.jeton-valeur:hover {
    border-color: var(--or);
    background: var(--panneau-survol);
}

.jeton-valeur:active {
    cursor: grabbing;
}

.jeton-valeur.en-glissement {
    opacity: 0.4;
}

.jeton-valeur:disabled,
.jeton-valeur.est-utilise {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Colonne de droite de .stats-conteneur / .conteneur-points-standard (pool
   de résultats/valeurs). Les items d'une grille sont étirés par défaut
   (align-items: stretch) pour occuper toute la hauteur de la rangée, donc
   cette colonne est déjà aussi haute que la boîte de caractéristiques à
   gauche : on la rend flex pour pouvoir pousser .stats-actions tout en bas
   (margin-top: auto), alignée avec le bas de cette boîte au lieu de flotter
   juste sous le pool. */
.stats-cote {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Boutons d'action à côté de la boîte de caractéristiques (pas en dessous),
   collés au bas de la colonne grâce à margin-top: auto sur .stats-cote.
   Empilés verticalement, pleine largeur de cette colonne. Utilisée pour
   "Lancer/Relancer + Réinitialiser les choix" (dés, 2 boutons) et
   "Réinitialiser" seul (standard, 1 bouton). */
.stats-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: 1rem;
}

.stats-actions .bouton {
    width: 100%;
}

.indice-glisser {
    font-size: 0.8rem;
    color: var(--texte-secondaire);
}

.points-boite {
    background: var(--panneau);
    border: 1px solid var(--or-bordure);
    border-radius: 12px;
    padding: 1rem;
    text-align: center;
}

.points-boite .etiquette {
    font-size: 0.9rem;
    color: var(--or);
    margin-bottom: 0.5rem;
}

.points-boite .valeur-affichee {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--or);
}

/* Aide */

.boite-aide {
    background: var(--panneau);
    border: 1px solid var(--or-bordure);
    border-radius: 12px;
    padding: 1rem;
    margin-top: 1rem;
}

.boite-aide .titre {
    font-size: 0.95rem;
    color: var(--or);
    margin-bottom: 0.5rem;
}

.boite-aide .contenu {
    font-size: 0.8rem;
    color: var(--texte-secondaire);
    line-height: 1.5;
}

/* Contexte */

.section-contexte {
    background: var(--panneau);
    border: 1px solid var(--or-bordure);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.section-contexte .entete {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.section-contexte .titre {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--or);
}

.section-contexte .elements {
    font-size: 0.85rem;
    color: var(--or);
    list-style: disc;
    padding-left: 1.25rem;
}

.section-contexte .elements li {
    margin-bottom: 0.2rem;
}

.section-contexte .indice {
    font-size: 0.8rem;
    color: var(--texte-secondaire);
}

/* Groupes */

.bouton-groupe-ligne {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
    gap: 1rem;
}

.bouton-groupe-ligne > div {
    display: flex;
    flex-direction: row;
    gap: 0.75rem;
}

.conteneur-points-standard {
    /* Même raison que .stats-container ci-dessus. */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    min-width: 0;
}

/* Résumé */

.carte-resume {
    background: var(--panneau);
    border: 1px solid var(--or-bordure);
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.carte-resume .titre {
    font-size: 1rem;
    font-weight: 600;
    color: var(--or);
    margin-bottom: 0.5rem;
}

.carte-resume .valeur-affichee {
    font-size: 0.9rem;
    color: var(--or-doux);
    overflow-wrap: anywhere;
}

/* Alertes */

.alerte {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.alerte-erreur {
    background: var(--alerte-erreur-fond);
    border: 1px solid var(--alerte-erreur-bordure);
    color: var(--alerte-erreur-texte);
}

/* Profil utilisateur */

.profil-page {
    min-height: calc(100vh - 4rem);
    display: flex;
    align-items: center;
    justify-content: center;
}

.profil-carte {
    width: min(100%, 680px);
}

.profil-entete {
    margin-bottom: 2rem;
}

.profil-surtitre {
    color: var(--texte-secondaire);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 0.5rem;
}

.profil-information {
    display: grid;
    gap: 1rem;
    margin-bottom: 2rem;
}

.profil-champ {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1rem 1.25rem;
    background: var(--panneau-profil);
    border: 1px solid var(--or-bordure);
    border-radius: 10px;
}

.profil-etiquette {
    color: var(--texte-secondaire);
    font-size: 0.85rem;
}

.profil-valeur {
    color: var(--texte);
    font-size: 1rem;
    overflow-wrap: anywhere;
}

.profil-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* Responsive */

@media (max-width: 768px) {
    .grille-cartes {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }

    .titre-principal {
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    body {
        padding: 0.75rem;
        align-items: flex-start;
    }

    .conteneur {
        padding: 0.75rem 0;
    }

    .carte {
        padding: 1rem;
        border-radius: 12px;
    }

    .titre-section {
        font-size: 1.25rem;
        margin-bottom: 1rem;
    }

    .barre-progression {
        margin-bottom: 1.25rem;
        transform: scale(0.9);
        transform-origin: center;
    }

    .stat-ligne {
        grid-template-columns: 28px minmax(0, 1fr) 26px 44px auto;
        column-gap: 0.25rem;
        padding-left: 0.55rem;
        padding-right: 0.55rem;
    }

    .stat-icone {
        width: 28px;
        height: 28px;
        margin-right: 0;
    }

    .stat-nom {
        font-size: 0.75rem;
    }

    .stat-bonus-total {
        font-size: 0.75rem;
    }

    .stat-valeur,
    .stat-valeur-base {
        width: 100%;
        height: 34px;
        padding: 0 0.25rem;
        font-size: 0.9rem;
    }

    .stat-controles {
        gap: 0.15rem;
    }

    .bouton-icone {
        width: 28px;
        height: 32px;
        font-size: 0.95rem;
    }

    .bouton-groupe-ligne {
        flex-wrap: wrap;
        margin-top: 1.25rem;
    }

    .bouton-groupe-ligne > div {
        width: 100%;
        justify-content: space-between;
    }

    .bouton-groupe-ligne > .bouton,
    .bouton-groupe-ligne > div .bouton {
        flex: 1 1 0;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}

/* Interrupteur de thème (sombre / clair), en bas de l'écran.
   Contrairement à un simple bouton bascule, ce sont ici DEUX
   boutons indépendants (soleil = thème clair, lune = thème sombre) :
   appuyer sur le soleil force toujours le clair, peu importe le
   thème courant, et appuyer sur la lune force toujours le sombre.
   Un curseur doré glisse derrière le bouton actif. La position du
   curseur est pilotée uniquement par l'attribut data-theme posé sur
   <html> (voir le script anti-flash de layouts/app.blade.php et
   public/js/theme.js) : elle est donc toujours correcte dès le
   premier rendu, sans attendre le JavaScript différé. */

.theme-bascule-interrupteur {
    position: fixed;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 72px;
    height: 36px;
    padding: 0 6px;
    margin: 0;
    background: var(--panneau);
    border: 1px solid var(--or-bordure);
    border-radius: 999px;
    box-shadow: 0 4px 14px var(--ombre-sombre);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.theme-bascule-curseur {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--or-vif);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
    pointer-events: none;
}

/* Le curseur glisse vers la lune dès que le thème sombre est actif. */
[data-theme="sombre"] .theme-bascule-curseur {
    transform: translateX(36px);
}

.theme-bascule-icone {
    position: relative;
    z-index: 1;
    width: 24px;
    height: 24px;
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 50%;
}

.theme-bascule-icone svg {
    width: 16px;
    height: 16px;
    display: block;
    pointer-events: none;
}

.theme-bascule-icone-soleil {
    color: var(--or);
}

.theme-bascule-icone-lune {
    color: var(--texte-secondaire);
}

/* L'icône du thème déjà actif se pose directement sur le curseur :
   elle passe donc dans une teinte lisible sur l'or plutôt que dans
   sa couleur "au repos". */
[data-theme="clair"] .theme-bascule-icone-soleil {
    color: var(--texte-inverse);
}

[data-theme="sombre"] .theme-bascule-icone-lune {
    color: var(--texte-inverse);
}

.theme-bascule-icone:hover {
    filter: brightness(1.15);
}

.theme-bascule-icone:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--primaire-halo);
}

.theme-bascule-icone:active {
    filter: brightness(0.92);
}

@media (max-width: 480px) {
    .theme-bascule-interrupteur {
        bottom: 12px;
    }
}

/* ==========================================
   Info-bulle au survol (dons, capacités…)
   Voir resources/views/partials/info-bulle.blade.php
   ========================================== */
.info-bulle {
    position: relative;
    display: inline-block;
    max-width: 100%;
    cursor: help;
    outline: none;
}

.info-bulle-cible {
    border-bottom: 1px dashed var(--or-bordure);
}

.info-bulle:hover .info-bulle-cible,
.info-bulle:focus .info-bulle-cible {
    color: var(--or);
}

.info-bulle-contenu {
    position: absolute;
    left: 0;
    top: calc(100% + 6px);
    z-index: 50;
    width: max-content;
    max-width: min(340px, 80vw);
    padding: 0.7rem 0.8rem;
    background: var(--panneau-opaque);
    border: 1px solid var(--or-bordure);
    border-radius: 8px;
    box-shadow: 0 4px 14px var(--ombre-sombre);
    font-size: 0.82rem;
    line-height: 1.4;
    text-align: left;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 150ms ease, transform 150ms ease, visibility 150ms;
    pointer-events: none;
}

.info-bulle:hover .info-bulle-contenu,
.info-bulle:focus .info-bulle-contenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.info-bulle-titre {
    display: block;
    font-weight: 700;
    color: var(--or);
    margin-bottom: 0.2rem;
}

.info-bulle-meta {
    display: block;
    font-size: 0.75rem;
    color: var(--or-doux);
    margin-bottom: 0.35rem;
}

.info-bulle-desc {
    display: block;
    color: var(--texte);
}

/* ==========================================
   Page des traits (resources/views/personnages/traits/index.blade.php)
   ========================================== */
.traits-entete {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.traits-titre {
    font-size: 1.3rem;
    font-weight: 700;
}

.traits-sous-titre {
    font-size: 0.85rem;
}

.traits-section {
    background: var(--panneau);
    border: 1px solid var(--or-bordure);
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.traits-section-titre {
    font-size: 1.15rem;
    font-weight: 600;
}

.traits-texte {
    font-size: 0.9rem;
}

.traits-liste {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.traits-ligne {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.25rem;
}

.traits-nom {
    font-weight: 600;
}

.traits-niveau {
    font-size: 0.8rem;
    white-space: nowrap;
}

.traits-section-finale {
    background: var(--panneau);
    border: 1px solid var(--or-bordure);
    border-radius: 12px;
    padding: 1.25rem;
}

.traits-nom-don {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

/* ==========================================
   Fiche du personnage : mise en page (anciennement dans show.blade.php)
   ========================================== */
.fiche-disposition {
    max-width: 1100px;
}

.fiche-grille {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
    .fiche-grille {
        grid-template-columns: 1fr;
    }
}

.fiche-boite {
    background: var(--panneau);
    border: 1px solid var(--or-bordure);
    border-radius: 12px;
    padding: 1rem;
}

.fiche-boite-titre {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--or);
    margin-bottom: 0.5rem;
}

.fiche-ligne {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.8rem;
    color: var(--texte-secondaire);
    padding: 0.2rem 0;
}

.fiche-ligne > span:first-child {
    flex-shrink: 0;
}

/* Lignes à colonne unique (capacités, dons...) : pas de valeur à
   droite à préserver, donc le texte doit pouvoir rétrécir et
   passer à la ligne plutôt que déborder de la carte. */
.fiche-ligne > span:first-child:only-child {
    flex-shrink: 1;
    min-width: 0;
    overflow-wrap: break-word;
}

.fiche-ligne .maitrise-point {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 0.4rem;
    background: var(--point-inactif);
    vertical-align: middle;
}

.fiche-ligne .maitrise-point.actif {
    background: var(--or-vif);
}

.fiche-ligne .valeur {
    color: var(--or-doux);
    font-weight: 600;
    flex: 1;
    min-width: 0;
    text-align: right;
}

.avatar-etiquette {
    cursor: pointer;
    display: block;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--panneau-carte);
    border: 2px solid var(--or-bordure);
    position: relative;
}

.avatar-etiquette img {
    width: 100%;
    height: 100%;
    display: block;
}

/* Le logo par défaut contient déjà son propre médaillon circulaire :
   le recadrer en "cover" le décentrait (marges transparentes
   asymétriques dans le fichier source), il est donc affiché en
   entier ("contain") plutôt que rogné. Une vraie photo de
   personnage, elle, n'a pas ce médaillon et gagne à remplir tout
   le cercle. */
.avatar-etiquette img.avatar-photo {
    object-fit: cover;
}

.avatar-etiquette img.avatar-logo-defaut {
    object-fit: contain;
}

.avatar-voile {
    position: absolute;
    inset: 0;
    background: var(--avatar-overlay-fond);
    color: var(--or);
    font-size: 0.7rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    opacity: 0;
    transition: opacity 0.2s;
}

.avatar-etiquette:hover .avatar-voile {
    opacity: 1;
}

.pv-formulaire {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    margin: 0.3rem 0 0.5rem;
}

.pv-formulaire input {
    flex: 1;
    min-width: 0;
}

.badge-ca {
    position: absolute;
    top: -5px;
    left: -5px;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: var(--texte-inverse);
    border: 2px solid var(--or);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--or);
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1.1;
}

/* ==========================================
   Fiche du personnage (resources/views/personnages/show.blade.php)
   ========================================== */
.fiche-disposition {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 1.5rem;
}

.carte-ajustee {
    height: fit-content;
}

.fiche-marque {
    font-size: 1.1rem;
}

.fiche-navigation {
    border-top: 1px solid var(--or-bordure);
    padding-top: 1rem;
}

.fiche-lien-retour {
    text-decoration: none;
    font-size: 0.85rem;
}

.fiche-entete-principal {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    margin-bottom: 2rem;
}

.fiche-avatar {
    position: relative;
}

.formulaire-sans-marge {
    margin: 0;
}

.champ-masque {
    display: none;
}

.fiche-badge-niveau {
    position: absolute;
    bottom: -5px;
    right: -5px;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: var(--or-vif);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--texte-inverse);
    font-size: 0.7rem;
    font-weight: 600;
}

.fiche-identite {
    flex: 1;
    background: var(--panneau);
    border: 1px solid var(--or-bordure);
    border-radius: 12px;
    padding: 1.25rem;
}

.fiche-identite-ligne {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.fiche-nom {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--or);
    margin-bottom: 0.5rem;
}

.fiche-sous-titre {
    font-size: 0.9rem;
    color: var(--texte-secondaire);
    margin-bottom: 0.25rem;
}

.fiche-alignement {
    font-size: 0.9rem;
    color: var(--texte-secondaire);
    margin-bottom: 0.75rem;
}

.fiche-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
}

.badge-niveau-max {
    background: var(--niveau-max-fond);
    color: var(--niveau-max-texte);
    cursor: default;
}

.bouton-centre {
    text-align: center;
}

.fiche-xp-entete {
    font-size: 0.75rem;
    color: var(--texte-secondaire);
    display: flex;
    justify-content: space-between;
    margin-top: 0.5rem;
}

.fiche-xp-barre {
    height: 6px;
    background: var(--panneau);
    border-radius: 3px;
    margin-top: 0.25rem;
    overflow: hidden;
}

.fiche-xp-lien-montee {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--or);
    text-decoration: none;
}

.fiche-xp-formulaire {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.5rem;
}

.fiche-xp-champ {
    flex: 1;
    min-width: 0;
    background: var(--panneau-carte);
    border: 1px solid var(--or-bordure);
    border-radius: 6px;
    color: var(--or-doux);
    padding: 0.3rem 0.5rem;
    font-size: 0.8rem;
}

.bouton-mise-en-avant {
    background: var(--or-vif);
    color: var(--texte-inverse);
    font-weight: 800;
    text-align: center;
    white-space: nowrap;
}

.message-erreur-champ {
    color: var(--texte-negatif);
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

.fiche-competences-colonnes {
    columns: 2;
    column-gap: 1.5rem;
}

.fiche-ligne-insecable {
    break-inside: avoid;
}

.fiche-langues {
    border-top: 1px solid var(--or-ligne-forte);
    margin-top: 0.75rem;
    padding-top: 0.75rem;
}

.fiche-langues-titre {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--or);
    margin-bottom: 0.35rem;
}

.fiche-boite-entete {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.sans-marge-bas {
    margin-bottom: 0;
}

.fiche-boite-actions {
    display: flex;
    gap: 0.5rem;
}

.fiche-grille-capacites {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.texte-petit {
    font-size: 0.8rem;
}

.texte-moyen {
    font-size: 0.85rem;
}

.fiche-boite-historique {
    background: var(--panneau);
    border: 1px solid var(--or-bordure);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.fiche-boite-historique-titre {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--or);
    margin-bottom: 0.5rem;
}

.fiche-detail {
    font-size: 0.8rem;
    color: var(--texte-secondaire);
}

.fiche-xp-remplissage {
    height: 100%;
    background: var(--or-vif);
    border-radius: 3px;
}

/* ==========================================
   Montée de niveau (resources/views/personnages/montee-niveau.blade.php)
   ========================================== */
.montee-page {
    max-width: 1050px;
    margin: 0 auto;
}

.montee-carte {
    border: 1px solid var(--or-bordure);
    overflow: hidden;
}

.montee-entete {
    text-align:center;
    padding: 1rem 0 1.5rem;
    border-bottom:1px solid var(--or-ligne-forte);
}

.montee-surtitre {
    color: var(--texte-secondaire);
    text-transform:uppercase;
    letter-spacing:.25rem;
    font-size:.72rem;
}

.montee-titre {
    color: var(--or);
    margin:.35rem 0;
    font-size:2rem;
}

.texte-secondaire {
    color: var(--texte-secondaire);
}

.montee-erreurs {
    margin:1rem 0;
    padding:1rem;
    border: 1px solid var(--alerte-erreur-bordure);
    border-radius:10px;
    background:var(--alerte-erreur-fond);
    color:var(--alerte-erreur-texte);
}

.montee-grille {
    display:grid;
    grid-template-columns: 1fr 1.45fr;
    gap:1.25rem;
    margin-top:1.5rem;
}

.montee-boite-resume {
    background:var(--panneau);
    border: 1px solid var(--or-bordure);
    border-radius:12px;
    padding:1.1rem;
    margin-bottom:1rem;
}

.montee-boite-titre {
    color: var(--or);
    font-weight:700;
    margin-bottom:.75rem;
}

.montee-resume {
    display:grid;
    gap:.55rem;
    color: var(--texte-secondaire);
    font-size:.9rem;
}

.montee-resume-ligne {
    display:flex;
    justify-content:space-between;
}

.texte-principal {
    color:var(--texte);
}

.montee-boite {
    background:var(--panneau);
    border: 1px solid var(--or-bordure);
    border-radius:12px;
    padding:1.1rem;
}

.montee-nouveaute {
    padding:.65rem 0;
    border-bottom:1px solid var(--or-ligne-faible);
    color: var(--texte);
}

.montee-boite-choix {
    background:var(--panneau);
    border: 1px solid var(--or-bordure);
    border-radius:12px;
    padding:1.25rem;
}

.montee-choix-titre {
    color: var(--or);
    font-size:1.1rem;
    font-weight:700;
    margin-bottom:1rem;
}

.montee-bloc {
    margin-bottom:1.5rem;
}

.montee-libelle {
    color:var(--texte);
    font-weight:600;
    margin-bottom:.35rem;
}

.montee-aide {
    color: var(--texte-secondaire);
    font-size:.85rem;
    margin-bottom:.75rem;
}

.montee-grille-pv {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.75rem;
}

.montee-option-pv {
    padding:.85rem;
    border:1px solid var(--bordure-option);
    border-radius:10px;
    cursor:pointer;
}

.montee-option-nom {
    color: var(--or);
    margin-left:.35rem;
}

.montee-option-detail {
    color: var(--texte-secondaire);
    font-size:.82rem;
    margin:.35rem 0 0 1.4rem;
}

.montee-option-de {
    padding:.85rem;
    border:1px solid var(--bordure-option);
    border-radius:10px;
}

.curseur-main {
    cursor:pointer;
}

.montee-option-detail-de {
    color: var(--texte-secondaire);
    font-size:.82rem;
    margin:.35rem 0 .65rem 1.4rem;
}

.bouton-pleine-largeur {
    width:100%;
}

.montee-jet-valeur {
    color: var(--or);
    font-size:1.35rem;
}

.montee-jet-total {
    color: var(--texte-secondaire);
    font-size:.8rem;
    margin-top:.2rem;
}

.montee-libelle-choix {
    color:var(--texte);
    font-weight:600;
    margin-bottom:.7rem;
}

.montee-liste-sous-classes {
    display:grid;
    gap:.7rem;
}

.montee-option-sous-classe {
    display:block;
    padding:.85rem;
    border:1px solid var(--bordure-option);
    border-radius:10px;
    cursor:pointer;
}

.montee-types-amelioration {
    display:flex;
    gap:.75rem;
    margin-bottom:1rem;
}

.montee-option-amelioration {
    flex:1;
    padding:.8rem;
    border:1px solid var(--bordure-option);
    border-radius:10px;
    cursor:pointer;
}

.montee-option-libelle {
    color: var(--or);
}

.montee-panneau {
    padding:1rem;
    background:var(--panneau-vif);
    border-radius:10px;
}

.montee-aide-repartition {
    color: var(--texte-secondaire);
    font-size:.85rem;
    margin-bottom:.8rem;
}

.montee-grille-caracteristiques {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:.65rem;
}

.montee-libelle-caracteristique {
    color: var(--texte);
    font-size:.85rem;
}

.montee-liste-petite {
    width:100%;
    margin-top:.25rem;
    padding:.45rem;
    border-radius:7px;
    background:var(--champ-fond);
    color:var(--texte);
    border:1px solid var(--bordure-option);
}

.montee-panneau-masque {
    display:none;
    padding:1rem;
    background:var(--panneau-vif);
    border-radius:10px;
}

.montee-libelle-don {
    color: var(--texte);
}

.montee-liste {
    width:100%;
    margin-top:.35rem;
    padding:.55rem;
    border-radius:7px;
    background:var(--champ-fond);
    color:var(--texte);
    border:1px solid var(--bordure-option);
}

.montee-description-don {
    display:none;
    margin-top:.8rem;
    padding:.7rem .8rem;
    border:1px solid var(--or-bordure);
    border-radius:8px;
    background:var(--panneau);
    color:var(--texte-secondaire);
    font-size:.85rem;
    line-height:1.4;
}

.montee-conteneur-masque {
    display:none;
    margin-top:.8rem;
}

.montee-pied {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:1.25rem;
}

.bouton-confirmer {
    background:var(--or-vif);
    color:var(--texte-inverse);
    font-weight:800;
    padding:.8rem 1.5rem;
}

.montee-jet-resultat {
    margin-top:.7rem;
    text-align:center;
    padding:.65rem;
    border-radius:8px;
    background:var(--or-halo-faible);
    color:var(--texte);
}