:root {
    --noir: #0b0a0d;
    --noir-clair: #18161a;
    --en-tete-bg: #131116;
    --bordure: #3a3543;
    --blanc: #f4f1ea;
    --gris: #9c958f;
    --gris-texte: #8a8475;
    --or: #dcb43e;
    --or-clair: #ecd383;
    --rouge: #8c1f28;
    --rouge-clair: #d2515c;
    --bleu-nuit: #1f3a63;
    --bleu-clair: #96c5f7;
    --bronze: #a9673b;
    --marron-clair: #d98c4d;
    --jaune: #f5e050;
    --vert: #5fd17a;

    --couleur-or: var(--or);
    --couleur-mana: var(--bleu-clair);
    --couleur-materiaux: var(--blanc);

    --police-titre: 'Cinzel Decorative', Georgia, 'Times New Roman', serif;
    --police-accent: 'Cinzel', Georgia, 'Times New Roman', serif;
}

* {
    box-sizing: border-box;
}

body {
    position: relative;
    margin: 0;
    font-family: 'Segoe UI', system-ui, sans-serif;
    background: var(--noir);
    color: var(--blanc);
    line-height: 1.5;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(ellipse at center, rgba(140, 31, 40, 0.1) 0%, rgba(11, 10, 13, 0) 35%),
        radial-gradient(ellipse at center, rgba(201, 162, 39, 0.08) 0%, rgba(11, 10, 13, 0) 55%),
        radial-gradient(ellipse at center, transparent 0%, var(--noir) 85%);
    pointer-events: none;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image: url('/ressources/images/fond-astral.svg');
    background-size: 120% auto;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
}

h1, h2, h3 {
    font-family: var(--police-accent);
    letter-spacing: 0.02em;
}

@keyframes lueur-titre {
    0%, 100% {
        text-shadow: 0 0 6px rgba(201, 162, 39, 0.35), 0 0 14px rgba(201, 162, 39, 0.12);
    }
    50% {
        text-shadow: 0 0 16px rgba(224, 196, 104, 0.9), 0 0 32px rgba(201, 162, 39, 0.45);
    }
}

h1 {
    font-family: var(--police-titre);
    font-size: clamp(1.4rem, 5vw, 2.2rem);
    color: var(--or-clair);
    border-bottom: 1px solid var(--rouge);
    padding-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    overflow-wrap: break-word;
    animation: lueur-titre 3.5s ease-in-out infinite;
}

h2 {
    color: var(--or);
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

a {
    color: var(--or-clair);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.nav {
    display: flex;
    flex-direction: column;
    padding: 0.85rem 1.2rem;
    background: var(--en-tete-bg);
    border-bottom: 1px solid rgba(201, 162, 39, 0.2);
    box-shadow: 0 2px 0 var(--rouge);
    position: sticky;
    top: 0;
    z-index: 10;
}

.nav__ligne1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Petit gap : sur grand écran space-between écarte déjà les blocs (invisible), mais un
       gap réduit laisse le menu tenir sur une ligne à plus de largeurs avant le repli. */
    gap: 0.6rem;
    flex-wrap: wrap;
    width: 100%;
}

.nav__ligne2 {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--bordure);
}

.nav__marque {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--police-titre);
    font-weight: bold;
    font-size: 1.1rem;
    color: var(--or-clair);
    text-decoration: none;
    letter-spacing: 0.05em;
    animation: lueur-titre 3.5s ease-in-out infinite;
}

.nav__logo {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
}

/* Conteneur des ressources : transparent en desktop (display:contents => la pastille
   participe directement au flex du en-tête et se centre via space-between). Il devient
   une ligne pleine largeur centrée quand le en-tête ne tient plus (voir media queries). */
.nav__stats {
    display: contents;
}

.nav__ressources {
    display: flex;
    align-items: center;
    padding: 0.4rem 1rem;
    border-radius: 999px;
    background: var(--noir);
    border: 1px solid var(--bordure);
    font-size: 0.85rem;
    flex-wrap: wrap;
}

.nav__ressource {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 1.15rem 0.7rem;
    color: var(--gris);
    border-right: 1px solid var(--bordure);
}

.nav__ressource:last-child {
    border-right: none;
    padding-right: 0;
}

.nav__ressource:first-child {
    padding-left: 0;
}

.nav__ressource strong {
    color: var(--blanc);
    font-family: Georgia, 'Times New Roman', serif;
}

.nav__ressource--or strong {
    color: var(--or-clair);
}

.nav__ressource--mana strong {
    color: var(--bleu-clair);
}

.nav__ressource--materiaux strong {
    color: var(--blanc);
}

/* Taux de production affiché SOUS la valeur de chaque ressource dans le en-tête.
   Positionné en absolu => il n'élargit PAS la pastille (sinon le menu passe à la ligne). */
.nav__taux {
    position: absolute;
    left: 1.15rem;
    bottom: 0.03rem;
    font-size: 0.7rem;
    font-weight: bold;
    line-height: 1;
    white-space: nowrap;
    opacity: 0.85;
}
.nav__ressource--or .nav__taux { color: var(--or-clair); }
.nav__ressource--mana .nav__taux { color: var(--bleu-clair); }
.nav__ressource--materiaux .nav__taux { color: var(--blanc); }

/* Petites formes géométriques réutilisables (icônes de ressource), dessinées en
   CSS plutôt qu'avec des glyphes Unicode pour garder des proportions correctes
   (le losange notamment doit être plus haut que large, pas un carré pivoté). */
.forme {
    display: inline-block;
    flex-shrink: 0;
}

.forme--cercle {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--couleur-or);
}

.forme--losange {
    width: 10px;
    height: 14px;
    background: var(--bleu-clair);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.forme--triangle {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 9px solid var(--blanc);
}

.nav__liens {
    display: flex;
    flex-wrap: wrap;
    row-gap: 0.3rem;
    column-gap: 0.35rem;
    align-items: center;
}

.nav__liens a {
    position: relative;
    color: var(--gris-texte);
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    padding: 0.45rem 0.2rem;
    white-space: nowrap;
    transition: color 0.2s ease, letter-spacing 0.2s ease, text-shadow 0.2s ease;
}

.nav__liens a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--or-clair), transparent);
    transition: width 0.25s ease, left 0.25s ease;
}

.nav__liens a:hover {
    color: var(--or-clair);
    text-shadow: 0 0 8px rgba(224, 196, 104, 0.6);
    text-decoration: none;
}

.nav__liens a:hover::after {
    width: 100%;
    left: 0;
}

.nav__lien--admin {
    color: var(--rouge-clair);
}

.nav__lien--admin:hover {
    color: var(--rouge-clair);
    text-shadow: 0 0 8px rgba(210, 81, 92, 0.6);
}

.nav__lien--admin::after {
    background: linear-gradient(90deg, transparent, var(--rouge-clair), transparent);
}

.nav__deconnexion button {
    background: transparent;
    border: none;
    color: var(--rouge-clair);
    cursor: pointer;
    font: inherit;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    padding: 0.45rem 0.2rem;
    margin-top: 0;
    transition: text-shadow 0.2s ease;
}

.nav__deconnexion button:hover {
    background: transparent;
    color: var(--rouge-clair);
    text-shadow: 0 0 8px rgba(210, 81, 92, 0.6);
}

/* Bouton burger : masqué en bureau, activé en média mobile ci-dessous. */
.nav__bascule {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 36px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--bordure);
    border-radius: 4px;
    cursor: pointer;
    margin-top: 0;
}

.nav__bascule span {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--or-clair);
}

.conteneur {
    max-width: 960px;
    margin: 2rem auto;
    padding: 0 1.5rem;
}

/* Connexion/Inscription : pas assez de contenu pour remplir un écran de mobile haut,
   on centre verticalement la carte au lieu de la laisser collée en haut avec du vide en dessous. */
body:has(.page-etroite) {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

body:has(.page-etroite) .conteneur {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Cadre à coins en "bracket" + double liseré : uniquement pour la page de connexion/inscription. */
.page-etroite {
    position: relative;
    border: 1px solid var(--or);
}

/* Ligne rouge fine arrondie à l'intérieur (connexion/inscription uniquement). */
.page-etroite::before {
    content: "";
    position: absolute;
    inset: 13px;
    pointer-events: none;
    border: 1px solid rgba(210, 81, 92, 0.5);
    border-radius: 14px;
}

/* Crochets dorés + ligne rouge fine (connexion/inscription uniquement). */
.page-etroite::after {
    content: "";
    position: absolute;
    inset: 10px;
    pointer-events: none;
    background:
        linear-gradient(var(--or), var(--or)) top left / 18px 2px no-repeat,
        linear-gradient(var(--or), var(--or)) top left / 2px 18px no-repeat,
        linear-gradient(var(--or), var(--or)) top right / 18px 2px no-repeat,
        linear-gradient(var(--or), var(--or)) top right / 2px 18px no-repeat,
        linear-gradient(var(--or), var(--or)) bottom left / 18px 2px no-repeat,
        linear-gradient(var(--or), var(--or)) bottom left / 2px 18px no-repeat,
        linear-gradient(var(--or), var(--or)) bottom right / 18px 2px no-repeat,
        linear-gradient(var(--or), var(--or)) bottom right / 2px 18px no-repeat,
        linear-gradient(rgba(210, 81, 92, 0.7), rgba(210, 81, 92, 0.7)) top / 100% 1px no-repeat,
        linear-gradient(rgba(210, 81, 92, 0.7), rgba(210, 81, 92, 0.7)) bottom / 100% 1px no-repeat,
        linear-gradient(rgba(210, 81, 92, 0.7), rgba(210, 81, 92, 0.7)) left / 1px 100% no-repeat,
        linear-gradient(rgba(210, 81, 92, 0.7), rgba(210, 81, 92, 0.7)) right / 1px 100% no-repeat;
}

.page-etroite {
    max-width: 420px;
    width: 100%;
    margin: 2rem auto;
    padding: 2rem;
    border-radius: 4px;
    background: var(--noir-clair);
}

.page-etroite > p:last-child a {
    border-bottom: 1px solid var(--or);
    padding-bottom: 1px;
}

.page-etroite h1 {
    margin-top: 0;
    font-size: clamp(1.1rem, 4.2vw, 1.6rem);
    letter-spacing: 0.03em;
    text-align: center;
}

.sous-titre {
    margin-top: -0.5rem;
    color: var(--gris-texte);
    font-size: 0.9rem;
    text-align: center;
}

.texte-secondaire {
    color: var(--gris-texte);
    text-align: center;
}

.formulaire {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.formulaire label {
    color: var(--gris);
    font-size: 0.85rem;
    margin-top: 0.4rem;
}

/* Petit texte d'aide sous un champ de formulaire (ex. règles du mot de passe). */
.aide-champ {
    display: block;
    margin-top: 0.3rem;
    color: var(--gris-texte);
    font-size: 0.8rem;
}

.formulaire input,
.formulaire select {
    padding: 0.5rem;
    border-radius: 4px;
    border: 1px solid var(--bordure);
    background: var(--noir);
    color: var(--blanc);
}

.formulaire input:focus,
.formulaire select:focus {
    outline: none;
    border-color: var(--or);
}

.formulaire input::placeholder {
    color: var(--gris-texte);
    opacity: 0.7;
}

/* Case de consentement RGPD : case et libellé alignés côte à côte. */
.champ-consentement {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.8rem;
}

/* La case garde sa taille native (elle n'hérite pas du style pleine largeur des autres champs). */
.champ-consentement input[type="checkbox"] {
    flex: 0 0 auto;
    width: auto;
    margin-top: 0.15rem;
    padding: 0;
    border: none;
    background: none;
    accent-color: var(--or);
}

/* Contour de focus visible au clavier (accessibilité), qui remplace le outline retiré sur les champs. */
.champ-consentement input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--or);
    outline-offset: 2px;
}

/* Libellé du consentement : lisible, retour à la ligne propre, liens légaux soulignés. */
.champ-consentement label {
    margin-top: 0;
    color: var(--gris);
    font-size: 0.82rem;
    line-height: 1.35;
}

.champ-consentement a {
    color: var(--or-clair);
    text-decoration: underline;
}

/* Champ piege (honeypot) anti-bot : hors de l'ecran, invisible et hors du parcours clavier. */
.champ-piege {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

button,
.bouton-principal,
.bouton-secondaire {
    margin-top: 0.5rem;
    padding: 0.6rem 1.2rem;
    border-radius: 4px;
    border: 1px solid var(--or);
    background: var(--rouge);
    color: var(--or-clair);
    font-family: var(--police-accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.85rem;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.15s ease, border-color 0.15s ease;
}

button:hover,
.bouton-principal:hover,
.bouton-secondaire:hover {
    background: var(--or);
    color: var(--noir);
    /* Annule le soulignement global des liens au survol : ces <a> sont des boutons. */
    text-decoration: none;
}

.bouton--mana {
    border-color: var(--bleu-clair);
}

.bouton--mana:hover {
    background: var(--bleu-clair);
    color: var(--noir);
}

.bouton--materiaux {
    border-color: var(--blanc);
}

.bouton--materiaux:hover {
    background: var(--blanc);
    color: var(--noir);
}

#message {
    padding: 0.3rem 0;
    color: var(--rouge-clair);
    font-size: 0.9rem;
}

#message.acquis {
    color: var(--or-clair);
}

.erreur {
    color: var(--rouge-clair);
}

.acquis {
    color: var(--or-clair);
}

/* Message de confirmation (ex. après une suppression de compte réussie). */
.succes {
    color: var(--or-clair);
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--or);
    border-radius: 4px;
    background: rgba(220, 180, 62, 0.08);
}

/* Page « Mon compte » : informations du joueur + zone de suppression. */
.page-compte {
    max-width: 60ch;
    margin: 0 auto;
}

.page-compte__infos {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.page-compte__infos strong {
    color: var(--gris);
}

/* Zone de suppression : encadré rouge qui signale une action irréversible. */
.zone-danger {
    border: 1px solid var(--rouge);
    border-radius: 6px;
    padding: 1.2rem;
    background: rgba(140, 31, 40, 0.08);
}

.zone-danger p {
    margin-top: 0;
    color: var(--gris);
}

/* Bouton de suppression : rouge plein et texte blanc pour le distinguer d'un bouton ordinaire. */
.bouton-danger {
    background: var(--rouge);
    border-color: var(--rouge-clair);
    color: var(--blanc);
}

.bouton-danger:hover {
    background: var(--rouge-clair);
    color: var(--noir);
}

/* Accessibilité : contenu réservé aux lecteurs d'écran (titres de structure), masqué à l'oeil. */
.visuellement-cache {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* RGAA : un lien situé dans un bloc de texte doit se distinguer autrement que par la couleur. */
.conteneur p a,
.conteneur li a {
    text-decoration: underline;
}

/* Lien d'évitement (RGAA 12.7) : caché hors écran, il apparaît quand on le focus au clavier
   et permet de sauter directement au contenu principal sans parcourir tout l'en-tête. */
.lien-evitement {
    position: absolute;
    left: 0.5rem;
    top: 0.5rem;
    z-index: 1000;
    transform: translateY(-150%);
    padding: 0.6rem 1rem;
    border-radius: 4px;
    background: var(--or);
    color: var(--noir);
    font-family: var(--police-accent);
    text-decoration: none;
    transition: transform 0.15s ease;
}
.lien-evitement:focus {
    transform: translateY(0);
    outline: 2px solid var(--noir);
}

/* Le contenu principal reçoit le focus via le lien d'évitement, sans afficher de gros contour. */
.conteneur[tabindex="-1"]:focus {
    outline: none;
}

.ressources {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.2rem;
    margin-bottom: 1rem;
}

.ressource {
    position: relative;
    background: var(--noir-clair);
    border: 1px solid var(--couleur-or);
    border-radius: 6px;
    padding: 1.2rem 1.4rem;
    overflow: hidden;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.ressource:hover {
    transform: translateY(-2px);
}

.ressource--mana {
    border-color: var(--bleu-clair);
}

.ressource--materiaux {
    border-color: var(--blanc);
}

/* Motif décoratif en fond de carte : un petit motif SVG (encodé en data-URI,
   pas de fichier séparé) répété en mosaïque, propre à la forme de chaque
   ressource (cercles/losanges/triangles), en faible opacité. */
.ressource::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.16;
    background-repeat: repeat;
    background-size: 70px 70px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70'%3E%3Ccircle cx='12' cy='14' r='7' fill='%23C9A227'/%3E%3Ccircle cx='55' cy='45' r='6' fill='%23C9A227'/%3E%3C/svg%3E");
}

.ressource--mana::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70'%3E%3Cpolygon points='12,6 18,14 12,22 6,14' fill='%237FB2E8'/%3E%3Cpolygon points='58,40 65,50 58,60 51,50' fill='%237FB2E8'/%3E%3C/svg%3E");
}

.ressource--materiaux::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70'%3E%3Cpolygon points='12,6 18,18 6,18' fill='%23F4F1EA'/%3E%3Cpolygon points='58,42 65,55 51,55' fill='%23F4F1EA'/%3E%3C/svg%3E");
}

.ressource__ligne1 {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

.ressource__taux {
    flex-shrink: 0;
    background: var(--noir);
    border: 1px solid var(--couleur-or);
    border-radius: 999px;
    padding: 0.2rem 0.65rem;
    font-size: 0.75rem;
    color: var(--or-clair);
    font-weight: bold;
}

.ressource--mana .ressource__taux {
    border-color: var(--bleu-nuit);
    color: var(--bleu-clair);
}

.ressource--materiaux .ressource__taux {
    border-color: var(--gris);
    color: var(--blanc);
}

.ressource__entete {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ressource__icone {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ressource__icone .forme--cercle {
    width: 16px;
    height: 16px;
}

.ressource__icone .forme--losange {
    width: 14px;
    height: 20px;
}

.ressource__icone .forme--triangle {
    border-left-width: 8px;
    border-right-width: 8px;
    border-bottom-width: 14px;
}

.ressource__libelle {
    color: var(--gris);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ressource__valeur {
    position: relative;
    z-index: 1;
    display: block;
    clear: both;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 2rem;
    font-weight: bold;
    color: var(--blanc);
    transition: transform 0.3s ease, color 0.3s ease;
}

@keyframes pulsation-valeur {
    0% { transform: scale(1); }
    35% { transform: scale(1.18); color: var(--or-clair); }
    100% { transform: scale(1); }
}

.ressource__valeur.maj {
    animation: pulsation-valeur 0.5s ease-out;
}

/* Taux de production affiché sous le compteur de chaque ressource (+X/s). */
.ressource__debit {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: 0.25rem;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 0.95rem;
    font-weight: bold;
    color: var(--or-clair);
}
.ressource--mana .ressource__debit { color: var(--bleu-clair); }
.ressource--materiaux .ressource__debit { color: var(--blanc); }

@keyframes pulsation-solde {
    0%   { opacity: 1; }
    25%  { opacity: 0.3; }
    100% { opacity: 1; }
}

[data-solde].maj {
    animation: pulsation-solde 0.5s ease-out;
}

.note {
    color: var(--gris);
    font-size: 0.85rem;
}

/* === Pied de page (liens légaux, présent sur toutes les pages) === */
.pied {
    margin-top: 3rem;
    padding: 1.6rem 1rem;
    border-top: 1px solid var(--bordure);
    background: var(--en-tete-bg);
    text-align: center;
}
.pied__liens {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.5rem;
    margin-bottom: 0.7rem;
}
.pied__liens a {
    color: var(--or-clair);
    text-decoration: none;
    font-family: var(--police-accent);
    font-size: 0.9rem;
    letter-spacing: 0.03em;
}
.pied__liens a:hover {
    text-decoration: underline;
}
.pied__mention {
    margin: 0;
    color: var(--gris-texte);
    font-size: 0.82rem;
}

/* === Pages légales (colonne de texte lisible) === */
.page-legale {
    max-width: 70ch;
    margin: 0 auto;
    color: var(--blanc);
    line-height: 1.65;
}
.page-legale h2 {
    margin-top: 2rem;
    color: var(--or-clair);
    font-family: var(--police-accent);
}
.page-legale a {
    color: var(--or-clair);
}
.page-legale ul {
    padding-left: 1.3rem;
}
.page-legale li {
    margin-bottom: 0.4rem;
}
.page-legale__maj {
    color: var(--gris-texte);
    font-style: italic;
    font-size: 0.9rem;
}
/* Surligne les [À COMPLÉTER] pour les repérer facilement avant publication. */
.page-legale__todo {
    background: rgba(210, 81, 92, 0.14);
    border-bottom: 1px dashed var(--rouge-clair);
    color: var(--rouge-clair);
    padding: 0 0.25rem;
}

.note--synchro {
    text-align: right;
}

.sous-titre--accueil {
    margin-top: -0.8rem;
    margin-bottom: 1.2rem;
}

/* Panneau dépliable « Comment jouer ? » (tableau de bord). */
.aide-jeu {
    position: relative;
    overflow: hidden;
    background: var(--noir-clair);
    border: 1px solid var(--bordure);
    border-radius: 8px;
    margin: 0 0 1.4rem;
    padding: 0.6rem 1rem;
}

/* Motifs des 3 ressources (cercles Or / losanges Mana / triangles Matériaux)
   répartis à des positions fixes en fond du panneau - identiques à chaque chargement. */
.aide-jeu::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.1;
    background-repeat: repeat;
    background-size: 220px 150px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='150'%3E%3Ccircle cx='25' cy='30' r='7' fill='%23C9A227'/%3E%3Cpolygon points='95,18 103,30 95,42 87,30' fill='%237FB2E8'/%3E%3Cpolygon points='162,22 170,36 154,36' fill='%23F4F1EA'/%3E%3Cpolygon points='40,96 47,108 33,108' fill='%23F4F1EA'/%3E%3Ccircle cx='120' cy='100' r='6' fill='%23C9A227'/%3E%3Cpolygon points='192,92 200,104 192,116 184,104' fill='%237FB2E8'/%3E%3Ccircle cx='72' cy='132' r='5' fill='%23C9A227'/%3E%3Cpolygon points='206,136 213,148 199,148' fill='%23F4F1EA'/%3E%3C/svg%3E");
}
.aide-jeu > * {
    position: relative;
    z-index: 1;
}
.aide-jeu__titre {
    cursor: pointer;
    font-family: var(--police-accent);
    font-weight: 600;
    color: var(--or-clair);
    letter-spacing: 0.03em;
}
.aide-jeu[open] .aide-jeu__titre {
    margin-bottom: 0.6rem;
}
.aide-jeu__contenu {
    color: var(--blanc);
    font-size: 0.92rem;
    line-height: 1.5;
}
.aide-jeu__contenu ol {
    margin: 0.6rem 0;
    padding-left: 1.3rem;
}
.aide-jeu__contenu li {
    margin-bottom: 0.4rem;
}
.aide-jeu__contenu a {
    color: var(--or-clair);
}
.aide-jeu__astuce {
    margin: 0.6rem 0 0;
    color: var(--gris);
    font-style: italic;
}

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

.badge {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.8rem;
    letter-spacing: 0.03em;
    border: 1px solid currentColor;
}

.badge--or {
    color: var(--couleur-or);
}

.badge--mana {
    color: var(--couleur-mana);
}

.badge--materiaux {
    color: var(--couleur-materiaux);
}

.badge--global {
    color: var(--marron-clair);
}

.carte {
    position: relative;
    border: 1px solid var(--or);
    background: var(--noir-clair);
    border-radius: 4px;
    padding: 1.2rem;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.carte:hover {
    border-color: var(--or-clair);
    transform: translateY(-2px);
}

.carte h3 {
    margin-top: 0;
    color: var(--blanc);
    font-size: 1.05rem;
}

.carte h3 small {
    color: var(--gris);
    font-weight: normal;
}

.carte__action {
    margin-top: 0.8rem;
    border-top: 1px solid var(--bordure);
    padding-top: 0.8rem;
}

.liste-gardiens {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.75rem;
}

.liste-gardiens li {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    background: var(--noir-clair);
    border: 1px solid var(--bordure);
    border-radius: 8px;
    padding: 0.75rem 1rem;
}

.liste-gardiens__avatar {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--couleur-or);
    border-radius: 4px;
    color: var(--or-clair);
    font-family: var(--police-accent);
    font-weight: bold;
}

.liste-gardiens__avatar--mana {
    border-color: var(--bleu-clair);
    color: var(--bleu-clair);
}

.liste-gardiens__avatar--materiaux {
    border-color: var(--blanc);
    color: var(--blanc);
}

.liste-gardiens__corps {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.liste-gardiens__corps strong {
    color: var(--blanc);
    overflow-wrap: anywhere;
    word-break: break-word;
}

.liste-gardiens__corps small {
    color: var(--gris);
    font-size: 0.8rem;
}

.liste-gardiens__taux {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.liste-gardiens__taux .forme--cercle {
    width: 8px;
    height: 8px;
    background: currentColor;
}

.liste-gardiens__taux .forme--losange {
    width: 7px;
    height: 10px;
    background: currentColor;
}

.liste-gardiens__taux .forme--triangle {
    border-left-width: 4px;
    border-right-width: 4px;
    border-bottom-width: 7px;
    border-bottom-color: currentColor;
}

/* `border: dashed` ignore toute tentative de contrôler la taille des tirets
   (le navigateur choisit une taille minuscule). On dessine donc le contour en
   tirets via 4 dégradés répétés (un par côté), dont on choisit la taille. */
.liste-gardiens li.liste-gardiens__ajout {
    border: none;
    background-color: transparent;
    background-image:
        linear-gradient(90deg, var(--bordure) 50%, transparent 50%),
        linear-gradient(90deg, var(--bordure) 50%, transparent 50%),
        linear-gradient(0deg, var(--bordure) 50%, transparent 50%),
        linear-gradient(0deg, var(--bordure) 50%, transparent 50%);
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    background-size: 18px 1px, 18px 1px, 1px 18px, 1px 18px;
    background-position: top left, bottom left, top left, top right;
    justify-content: center;
}

.liste-gardiens__ajout a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    color: var(--gris-texte);
    text-decoration: none;
}

.liste-gardiens__ajout a:hover {
    color: var(--or-clair);
}

.liste-gardiens__ajout-icone {
    position: relative;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bordure);
}

.liste-gardiens__ajout-icone::before,
.liste-gardiens__ajout-icone::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: var(--blanc);
    transform: translate(-50%, -50%);
}

.liste-gardiens__ajout-icone::before {
    width: 12px;
    height: 2px;
}

.liste-gardiens__ajout-icone::after {
    width: 2px;
    height: 12px;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th {
    color: var(--or);
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
}

th, td {
    text-align: left;
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--bordure);
}

tbody tr:hover {
    background: rgba(201, 162, 39, 0.06);
}

.classement {
    background: var(--noir-clair);
    border: 1px solid var(--bordure);
    border-radius: 10px;
    padding: 1.5rem;
    margin-top: 1.5rem;
}

.classement h2 {
    margin-top: 0;
}

.rang {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-weight: bold;
    font-size: 0.8rem;
    background: var(--noir);
    border: 1px solid var(--bordure);
    color: var(--blanc);
}

tr.podium-1 .rang {
    background: var(--or);
    border-color: var(--or);
    color: var(--noir);
}

tr.podium-2 .rang {
    background: var(--blanc);
    border-color: var(--blanc);
    color: var(--noir);
}

tr.podium-3 .rang {
    background: var(--bronze);
    border-color: var(--bronze);
    color: var(--noir);
}

tr.podium-1 td:nth-child(2) {
    color: var(--or-clair);
    font-weight: bold;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.2rem;
    flex-wrap: wrap;
}

.pagination__resume {
    color: var(--gris);
    font-size: 0.85rem;
}

.pagination__controles {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.pagination__liens {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.pagination__lien {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--gris);
    font-size: 0.85rem;
    text-decoration: none;
    transition: color 0.15s;
}

.pagination__lien:hover {
    color: var(--or-clair);
}

.pagination__lien--precedent::before,
.pagination__lien--suivant::after {
    content: "";
    width: 6px;
    height: 6px;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    flex-shrink: 0;
}

.pagination__lien--precedent::before {
    transform: rotate(-135deg);
}

.pagination__lien--suivant::after {
    transform: rotate(45deg);
}

.pagination__lien--desactive {
    /* Gris plein (sans opacité) pour rester lisible : contraste suffisant (RGAA), l'état
       désactivé reste signalé par pointer-events: none et l'absence de style actif. */
    color: var(--gris);
    pointer-events: none;
    cursor: default;
}

.pagination__taille {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.pagination__taille label {
    color: var(--gris);
    font-size: 0.85rem;
}

.pagination__taille select {
    padding: 0.3rem 0.5rem;
    border-radius: 4px;
    border: 1px solid var(--bordure);
    background: var(--noir);
    color: var(--blanc);
    font-size: 0.85rem;
}

/* --- Animation de connexion : éclair, secousse, explosion, message --- */

@keyframes secousse {
    0%, 100% { transform: translate(0, 0); }
    20% { transform: translate(-6px, 3px); }
    40% { transform: translate(5px, -4px); }
    60% { transform: translate(-4px, 5px); }
    80% { transform: translate(6px, -2px); }
}

body.secousse {
    animation: secousse 0.4s ease-in-out;
}

.eclair-surcouche {
    position: fixed;
    inset: 0;
    z-index: 999;
    pointer-events: none;
    background: radial-gradient(circle at 50% 35%, #ffffff 0%, rgba(224, 196, 104, 0.9) 40%, rgba(140, 31, 40, 0.55) 100%);
    opacity: 0;
    animation: eclair-eclat 0.5s ease-out forwards;
}

@keyframes eclair-eclat {
    0% { opacity: 0; }
    6% { opacity: 1; }
    18% { opacity: 0.2; }
    30% { opacity: 0.95; }
    45% { opacity: 0.12; }
    55% { opacity: 0.6; }
    100% { opacity: 0; }
}

.eclair-foudre {
    position: fixed;
    top: -5vh;
    width: 160px;
    height: 95vh;
    fill: none;
    opacity: 0;
    pointer-events: none;
    animation: foudre-clignote 0.5s steps(3, end) forwards;
}

.eclair-foudre__lueur {
    stroke: var(--or-clair);
    stroke-width: 7;
    stroke-linejoin: round;
    stroke-linecap: round;
    filter: blur(5px);
    opacity: 0.8;
}

.eclair-foudre__trait {
    stroke: #ffffff;
    stroke-width: 2.5;
    stroke-linejoin: round;
    stroke-linecap: round;
    filter: drop-shadow(0 0 6px var(--or-clair)) drop-shadow(0 0 14px rgba(201, 162, 39, 0.8));
}

/* Six positions réparties sur la largeur de l'écran. */
.eclair-foudre--pos-1 { left: 2%; transform: rotate(-5deg); }
.eclair-foudre--pos-2 { left: 18%; transform: rotate(4deg) scaleX(-1); animation-delay: 0.02s; }
.eclair-foudre--pos-3 { left: 36%; transform: rotate(-6deg); animation-delay: 0.05s; }
.eclair-foudre--pos-4 { left: 54%; transform: rotate(5deg) scaleX(-1); animation-delay: 0.01s; }
.eclair-foudre--pos-5 { left: 72%; transform: rotate(-4deg); animation-delay: 0.06s; }
.eclair-foudre--pos-6 { left: 90%; transform: rotate(6deg) scaleX(-1); animation-delay: 0.08s; }

/* Six couleurs. Le noir garde un halo clair, sinon il serait invisible sur le fond sombre. */
.eclair-foudre--rouge .eclair-foudre__trait,
.eclair-foudre--rouge .eclair-foudre__lueur {
    stroke: var(--rouge-clair);
}
.eclair-foudre--rouge .eclair-foudre__trait {
    filter: drop-shadow(0 0 6px var(--rouge-clair)) drop-shadow(0 0 14px rgba(210, 81, 92, 0.8));
}

.eclair-foudre--jaune .eclair-foudre__trait,
.eclair-foudre--jaune .eclair-foudre__lueur {
    stroke: var(--jaune);
}
.eclair-foudre--jaune .eclair-foudre__trait {
    filter: drop-shadow(0 0 6px var(--jaune)) drop-shadow(0 0 14px rgba(245, 224, 80, 0.8));
}

.eclair-foudre--bleu .eclair-foudre__trait,
.eclair-foudre--bleu .eclair-foudre__lueur {
    stroke: var(--bleu-clair);
}
.eclair-foudre--bleu .eclair-foudre__trait {
    filter: drop-shadow(0 0 6px var(--bleu-clair)) drop-shadow(0 0 14px rgba(127, 178, 232, 0.8));
}

.eclair-foudre--vert .eclair-foudre__trait,
.eclair-foudre--vert .eclair-foudre__lueur {
    stroke: var(--vert);
}
.eclair-foudre--vert .eclair-foudre__trait {
    filter: drop-shadow(0 0 6px var(--vert)) drop-shadow(0 0 14px rgba(95, 209, 122, 0.8));
}

.eclair-foudre--blanc .eclair-foudre__trait,
.eclair-foudre--blanc .eclair-foudre__lueur {
    stroke: #ffffff;
}
.eclair-foudre--blanc .eclair-foudre__trait {
    filter: drop-shadow(0 0 6px #ffffff) drop-shadow(0 0 14px rgba(255, 255, 255, 0.8));
}

.eclair-foudre--noir .eclair-foudre__trait {
    stroke: #0b0a0d;
    stroke-width: 3.5;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.65));
}
.eclair-foudre--noir .eclair-foudre__lueur {
    stroke: #e8e6f0;
    opacity: 0.45;
}

@keyframes foudre-clignote {
    0%, 100% { opacity: 0; }
    12%, 30% { opacity: 1; }
    20% { opacity: 0.25; }
    45% { opacity: 0.7; }
}

.page-etroite.explosion {
    animation: explosion-bas 0.6s cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards;
    pointer-events: none;
}

@keyframes explosion-bas {
    0% { transform: translateY(0) scale(1) rotate(0deg); opacity: 1; }
    6% { transform: translateY(-22px) scale(1.3) rotate(-5deg); opacity: 1; }
    16% { transform: translateY(-4px) scale(1.05) rotate(4deg); opacity: 1; }
    100% { transform: translateY(170vh) scale(0.55) rotate(28deg); opacity: 0; }
}

.message-bienvenue {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    pointer-events: none;
    padding: 2rem;
    text-align: center;
    opacity: 0;
    animation: message-apparition 2.6s ease-out forwards;
    animation-delay: 0.3s;
}

.message-bienvenue span {
    font-family: var(--police-titre);
    font-size: clamp(1.3rem, 6vw, 3.5rem);
    max-width: 100%;
    overflow-wrap: break-word;
    color: var(--or-clair);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-shadow: 0 0 20px rgba(224, 196, 104, 0.8), 0 0 60px rgba(201, 162, 39, 0.5);
}

@keyframes message-apparition {
    0% { opacity: 0; transform: scale(0.85); }
    14% { opacity: 1; transform: scale(1.04); }
    20% { transform: scale(1); }
    88% { opacity: 1; }
    100% { opacity: 0; transform: scale(1.02); }
}

/* Accessibilité : pour les personnes sensibles aux flashs/mouvements, on retire
   le clignotement (éclairs, secousse, pop) et on garde des transitions simples. */
@media (prefers-reduced-motion: reduce) {
    body.secousse {
        animation: none;
    }

    .eclair-foudre {
        display: none;
    }

    .eclair-surcouche {
        animation: eclair-eclat-reduit 0.3s ease-out forwards;
    }

    .page-etroite.explosion {
        animation: explosion-reduite 0.4s ease-out forwards;
    }

    .message-bienvenue {
        animation: message-apparition-reduite 1.8s ease-out forwards;
        animation-delay: 0.15s;
    }
}

@keyframes eclair-eclat-reduit {
    0% { opacity: 0; }
    50% { opacity: 0.45; }
    100% { opacity: 0; }
}

@keyframes explosion-reduite {
    0% { opacity: 1; transform: none; }
    100% { opacity: 0; transform: translateY(16px); }
}

@keyframes message-apparition-reduite {
    0% { opacity: 0; }
    25% { opacity: 1; }
    75% { opacity: 1; }
    100% { opacity: 0; }
}

/* ---- Sous-titre gauche (pages internes) ---- */
.sous-titre--gauche {
    text-align: left;
    margin-bottom: 1.4rem;
}

/* ---- Badge avec icône inline ---- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

/* Formes dans les badges : suivent la couleur du badge via currentColor */
.badge .forme--cercle {
    width: 8px;
    height: 8px;
    background: currentColor;
    flex-shrink: 0;
}

.badge .forme--losange {
    width: 7px;
    height: 10px;
    background: currentColor;
    flex-shrink: 0;
}

.badge .forme--triangle {
    border-left-width: 4px;
    border-right-width: 4px;
    border-bottom-width: 7px;
    border-bottom-color: currentColor;
    flex-shrink: 0;
}

/* ---- Variantes de couleur pour les cartes de gardien ---- */
.carte--mana { border-color: var(--bleu-clair); }
.carte--materiaux { border-color: var(--blanc); }

.carte--mana:hover { border-color: var(--bleu-clair); }
.carte--materiaux:hover { border-color: var(--blanc); }

/* ---- Cartes améliorations : crochets dorés + une seule ligne gris foncé ---- */
/* (distinct du double liseré rouge des pages connexion/inscription) */
.carte--deco {
    /* couleur des crochets = couleur de la ressource (variantes claires, plus lumineuses) */
    --crochet: var(--or-clair);
}

.carte--mana.carte--deco { --crochet: var(--bleu-clair); }
.carte--materiaux.carte--deco { --crochet: var(--blanc); }
.carte--global.carte--deco { --crochet: var(--marron-clair); }

.carte--deco::after {
    content: "";
    position: absolute;
    inset: 6px;
    pointer-events: none;
    background:
        /* crochets aux quatre coins, couleur de la ressource */
        linear-gradient(var(--crochet), var(--crochet)) top left / 16px 4px no-repeat,
        linear-gradient(var(--crochet), var(--crochet)) top left / 4px 16px no-repeat,
        linear-gradient(var(--crochet), var(--crochet)) top right / 16px 4px no-repeat,
        linear-gradient(var(--crochet), var(--crochet)) top right / 4px 16px no-repeat,
        linear-gradient(var(--crochet), var(--crochet)) bottom left / 16px 4px no-repeat,
        linear-gradient(var(--crochet), var(--crochet)) bottom left / 4px 16px no-repeat,
        linear-gradient(var(--crochet), var(--crochet)) bottom right / 16px 4px no-repeat,
        linear-gradient(var(--crochet), var(--crochet)) bottom right / 4px 16px no-repeat,
        /* une seule ligne gris foncé sur tout le pourtour */
        linear-gradient(var(--bordure), var(--bordure)) top / 100% 2px no-repeat,
        linear-gradient(var(--bordure), var(--bordure)) bottom / 100% 2px no-repeat,
        linear-gradient(var(--bordure), var(--bordure)) left / 2px 100% no-repeat,
        linear-gradient(var(--bordure), var(--bordure)) right / 2px 100% no-repeat;
}

/* Carte au bonus global : accent marron clair (ni or, ni blanc, ni bleu) */
.carte--global,
.carte--global:hover { border-color: var(--marron-clair); }

/* ---- Carte amélioration : mise en page centrée façon maquette ---- */
.carte-amelioration {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.6rem 1.3rem 1.3rem;
}

/* Icône circulaire centrée, teintée par la ressource */
.carte-amelioration__icone {
    color: var(--crochet);
    width: 66px;
    height: 66px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid color-mix(in srgb, var(--crochet) 55%, transparent);
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.25), inset 0 0 12px rgba(0, 0, 0, 0.4);
}

.carte-amelioration__icone .forme--cercle {
    width: 24px;
    height: 24px;
    background: currentColor;
}

.carte-amelioration__icone .forme--losange {
    width: 22px;
    height: 30px;
    background: currentColor;
}

.carte-amelioration__icone .forme--triangle {
    border-left-width: 13px;
    border-right-width: 13px;
    border-bottom-width: 23px;
    border-bottom-color: currentColor;
}

/* Anneau concentrique pour le bonus global */
.carte-amelioration__icone .forme--anneau {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 3px solid currentColor;
    position: relative;
}

.carte-amelioration__icone .forme--anneau::after {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background: currentColor;
}

/* Bonus global : le cercle extérieur de l'icône est rouge sombre,
   l'anneau intérieur reste marron clair. */
.carte-amelioration__icone--global {
    color: var(--marron-clair);
    border-color: var(--rouge);
}

.carte .carte-amelioration__titre {
    margin: 0 0 0.25rem;
    font-size: 1.15rem;
}

.carte-amelioration__categorie {
    margin: 0 0 0.9rem;
    color: var(--crochet);
    font-family: var(--police-accent);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.9;
}

.carte-amelioration__description {
    color: var(--gris-texte);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0 0 1.1rem;
}

.carte-amelioration__effet {
    margin-bottom: 1.1rem;
}

.carte-amelioration__effet .badge {
    padding: 0.35rem 0.9rem;
    font-size: 0.85rem;
    color: var(--crochet);
}

/* Pied : séparateur + bouton pleine largeur */
.carte-amelioration__pied {
    width: 100%;
    margin-top: auto;
}

.carte-amelioration__pied form {
    margin: 0;
}

.carte-amelioration__pied button {
    width: 100%;
    margin-top: 0;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--crochet);
    color: var(--crochet);
}

.carte-amelioration__pied button:hover {
    background: var(--crochet);
    color: var(--noir);
}

/* État acquis : libellé + bouton en pointillés */
.carte--acquise { opacity: 0.9; }

.carte-amelioration__pied .acquis {
    margin: 0 0 0.5rem;
    color: var(--crochet);
    font-size: 0.85rem;
}

/* Pointillés dessinés via dégradés (mêmes tirets que « Ajouter un gardien »
   du tableau de bord) : le navigateur fait des tirets minuscules avec border:dashed. */
.carte-amelioration__pied .bouton-relique-active {
    width: 100%;
    margin-top: 0;
    border: none;
    background-color: transparent;
    background-image:
        linear-gradient(90deg, var(--crochet) 50%, transparent 50%),
        linear-gradient(90deg, var(--crochet) 50%, transparent 50%),
        linear-gradient(0deg, var(--crochet) 50%, transparent 50%),
        linear-gradient(0deg, var(--crochet) 50%, transparent 50%);
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    background-size: 16px 2px, 16px 2px, 2px 16px, 2px 16px;
    background-position: top left, bottom left, top left, top right;
    color: var(--crochet);
    cursor: default;
}

.carte-amelioration__pied .bouton-relique-active:hover {
    background-color: transparent;
    color: var(--crochet);
}

/* État verrouillé : alerte + bouton rouge inactif */
.carte-amelioration__alerte {
    margin: 0 0 0.5rem;
    color: var(--rouge-clair);
    font-size: 0.85rem;
}

.carte-amelioration__pied .bouton-verrouille {
    width: 100%;
    margin-top: 0;
    background: rgba(140, 31, 40, 0.18);
    border: 1px solid var(--rouge-clair);
    color: var(--rouge-clair);
    cursor: not-allowed;
}

.carte-amelioration__pied .bouton-verrouille:hover {
    background: rgba(140, 31, 40, 0.18);
    color: var(--rouge-clair);
}

/* Auto-déblocage : un bouton d'achat/recrutement devient grisé et non cliquable
   quand la ressource manque, et se réactive tout seul dès le palier atteint. Piloté
   par le JS chaque seconde à partir des valeurs locales (aucune requête serveur). */
.js-acheter button:disabled,
.js-recruter button:disabled,
.js-ameliorer button:disabled {
    cursor: not-allowed;
    opacity: 0.4;
    filter: grayscale(0.6);
}

/* L'alerte « fonds insuffisants » ne s'affiche que sur une carte non abordable. */
.carte-amelioration__alerte {
    display: none;
}
.carte-amelioration.carte--pas-assez .carte-amelioration__alerte,
.carte-amelioration.carte--verrouillee .carte-amelioration__alerte {
    display: block;
}

/* ---- Carte intendant (pleine largeur, horizontale) ---- */
.carte-intendant {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.2rem 1.5rem;
    margin-bottom: 1.5rem;
}

.carte-intendant:hover {
    transform: none;
}

.carte-intendant__info {
    flex: 1;
    min-width: 0;
}

.carte-intendant__libelle {
    margin: 0 0 0.3rem;
    color: var(--or);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: var(--police-accent);
}

.carte .carte-intendant__titre {
    margin: 0 0 0.25rem;
    font-size: 1.2rem;
}

.carte-intendant__description {
    margin: 0;
    color: var(--gris-texte);
    font-size: 0.85rem;
}

.carte-intendant__ressources {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.carte-intendant__action {
    flex-shrink: 0;
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

.carte-intendant__action form {
    margin: 0;
}

.carte-intendant__action button {
    margin-top: 0;
    white-space: nowrap;
    background: transparent;
    border-color: var(--or);
    color: var(--or-clair);
}

.carte-intendant__action button:hover {
    background: var(--or);
    color: var(--noir);
}

/* ---- Sélecteur de quantité d'amélioration (×1 / ×5 / Max) - segmented control ---- */
.selecteur-quantite {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 1.2rem;
}
.selecteur-quantite__libelle {
    color: var(--gris);
    font-size: 0.82rem;
}
.selecteur-quantite__groupe {
    display: inline-flex;
    border: 1px solid var(--bordure);
    border-radius: 6px;
    overflow: hidden;
    background: var(--noir);
}
.selecteur-quantite__bouton {
    margin-top: 0;
    padding: 0.4rem 1.05rem;
    border: none;
    border-left: 1px solid var(--bordure);
    background: transparent;
    color: var(--gris);
    font-family: var(--police-accent);
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.selecteur-quantite__bouton:first-child { border-left: none; }
.selecteur-quantite__bouton:hover { background: color-mix(in srgb, var(--or) 14%, transparent); color: var(--or-clair); }
.selecteur-quantite__bouton--actif,
.selecteur-quantite__bouton--actif:hover {
    background: var(--or);
    color: var(--noir);
}

/* ---- Filtre par type de ressource ---- */
.filtre-ressources {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.filtre-ressources__bouton {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--bordure);
    background: transparent;
    color: var(--gris);
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-size: 0.82rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.filtre-ressources__bouton:hover { background: transparent; }

.filtre-ressources__bouton[data-filtre="tous"]:hover,
.filtre-ressources__bouton--actif[data-filtre="tous"] { color: var(--blanc); border-color: var(--gris); }

.filtre-ressources__bouton[data-filtre="or"]:hover,
.filtre-ressources__bouton--actif[data-filtre="or"] { color: var(--or-clair); border-color: var(--or); }

.filtre-ressources__bouton[data-filtre="mana"]:hover,
.filtre-ressources__bouton--actif[data-filtre="mana"] { color: var(--bleu-clair); border-color: var(--bleu-clair); }

.filtre-ressources__bouton[data-filtre="materiaux"]:hover,
.filtre-ressources__bouton--actif[data-filtre="materiaux"] { color: var(--blanc); border-color: var(--blanc); }

.filtre-ressources__bouton[data-filtre="global"]:hover,
.filtre-ressources__bouton--actif[data-filtre="global"] { color: var(--marron-clair); border-color: var(--marron-clair); }

/* Formes dans les boutons filtre */
.filtre-ressources__bouton .forme--cercle { width: 8px; height: 8px; flex-shrink: 0; }
.filtre-ressources__bouton .forme--losange { width: 7px; height: 10px; flex-shrink: 0; }
.filtre-ressources__bouton .forme--triangle { border-left-width: 4px; border-right-width: 4px; border-bottom-width: 7px; flex-shrink: 0; }
.filtre-ressources__bouton .forme--anneau { position: relative; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--marron-clair); background: transparent; flex-shrink: 0; }
.filtre-ressources__bouton .forme--anneau::after { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: var(--marron-clair); }

/* ---- Catalogue des gardiens : cartes individuelles ---- */
.catalogue-gardiens h2 {
    margin-bottom: 1rem;
}

.carte-gardien__entete {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.carte-gardien__avatar {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--or);
    border-radius: 4px;
    color: var(--or-clair);
    font-family: var(--police-accent);
    font-size: 1.4rem;
    font-weight: bold;
    flex-shrink: 0;
}

.carte-gardien__avatar--mana {
    border-color: var(--bleu-clair);
    color: var(--bleu-clair);
}

.carte-gardien__avatar--materiaux {
    border-color: var(--blanc);
    color: var(--blanc);
}

.carte-gardien__etage {
    color: var(--gris);
    font-size: 0.8rem;
}

/* Couleur de l'étage selon le type de ressource du gardien */
.carte--or .carte-gardien__etage { color: var(--or-clair); }
.carte--mana .carte-gardien__etage { color: var(--bleu-clair); }
.carte--materiaux .carte-gardien__etage { color: var(--blanc); }

.carte .carte-gardien__titre {
    margin: 0 0 0.4rem;
    color: var(--blanc);
    font-size: 1.1rem;
}

.carte-gardien__description {
    margin: 0 0 0.75rem;
    color: var(--gris-texte);
    font-size: 0.85rem;
    line-height: 1.4;
}

.carte-gardien__badge {
    margin-bottom: 0.5rem;
}

/* Badge de production : rectangulaire à coins légèrement arrondis (pas une pilule) */
.carte-gardien__badge .badge {
    border-radius: 5px;
    padding: 0.25rem 0.65rem;
}

/* Pied de la carte gardien : niveau à gauche, bouton à droite */
.carte-gardien__pied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0;
}

.carte-gardien__pied form {
    margin: 0;
    min-width: 0;
    flex-shrink: 1;
}

.carte-gardien__pied button {
    margin-top: 0;
    padding: 0.45rem 0.9rem;
    font-size: 0.8rem;
    white-space: normal;
    word-break: break-word;
    text-align: center;
    background: transparent;
}

.carte-gardien__pied .bouton--or { color: var(--or-clair); border-color: var(--or); }
.carte-gardien__pied .bouton--mana { color: var(--bleu-clair); border-color: var(--bleu-clair); }
.carte-gardien__pied .bouton--materiaux { color: var(--blanc); border-color: var(--blanc); }

.carte-gardien__pied .bouton--or:hover { background: var(--or); color: var(--noir); }
.carte-gardien__pied .bouton--mana:hover { background: var(--bleu-clair); color: var(--noir); }
.carte-gardien__pied .bouton--materiaux:hover { background: var(--blanc); color: var(--noir); }

.carte-gardien__niveau {
    color: var(--gris);
    font-size: 0.85rem;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Niv. X (niveau en cours, pas encore max) → blanc */
.carte-gardien__niveau--actif { color: var(--blanc); }

/* Niv. X (MAX) → couleur de la ressource du gardien */
.carte--or .carte-gardien__niveau--max { color: var(--or-clair); }
.carte--mana .carte-gardien__niveau--max { color: var(--bleu-clair); }
.carte--materiaux .carte-gardien__niveau--max { color: var(--blanc); }

/* Bouton désactivé (niveau maximum) */
.bouton--desactive {
    background: var(--noir-clair);
    border-color: var(--bordure);
    color: var(--gris);
    cursor: default;
    opacity: 0.55;
    margin-top: 0;
    padding: 0.45rem 0.9rem;
    font-size: 0.8rem;
}

.bouton--desactive:hover {
    background: var(--noir-clair);
    color: var(--gris);
    border-color: var(--bordure);
}

/* ============ Tableau de bord d'administration ============ */
.admin-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
    margin-bottom: 1.6rem;
}

.admin-stat {
    border: 1px solid var(--bordure);
    border-radius: 6px;
    background: var(--noir-clair);
    padding: 1.1rem 1rem;
    text-align: center;
}

.admin-stat__valeur {
    display: block;
    font-family: var(--police-titre);
    font-size: 1.9rem;
    line-height: 1;
    color: var(--or-clair);
}

.admin-stat__libelle {
    display: block;
    margin-top: 0.45rem;
    color: var(--gris-texte);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.admin-sections {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}

.admin-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.6rem 1.3rem 1.3rem;
}

.admin-section__icone {
    position: relative;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    margin-bottom: 0.9rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid color-mix(in srgb, var(--crochet) 55%, transparent);
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.4);
}

/* Chaque forme garde sa couleur de ressource (or, bleu, blanc, marron),
   positionnée en triangle / losange autour du centre du cercle. */
.admin-section__icone .forme {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.admin-section__icone .forme--cercle { width: 10px; height: 10px; }
.admin-section__icone .forme--losange { width: 9px; height: 13px; }
.admin-section__icone .forme--triangle { border-left-width: 5px; border-right-width: 5px; border-bottom-width: 9px; }
.admin-section__icone .forme--anneau {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--marron-clair);
}
.admin-section__icone .forme--anneau::after {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    background: var(--marron-clair);
}

/* Gardiens : or en haut, mana à droite, matériaux à gauche */
.admin-section--gardiens .admin-section__icone .forme--cercle   { top: 30%; left: 50%; }
.admin-section--gardiens .admin-section__icone .forme--losange  { top: 64%; left: 68%; }
.admin-section--gardiens .admin-section__icone .forme--triangle { top: 64%; left: 32%; }

/* Intendants : mana en haut, matériaux à droite, or à gauche (ordre différent) */
.admin-section--intendants .admin-section__icone .forme--losange  { top: 30%; left: 50%; }
.admin-section--intendants .admin-section__icone .forme--triangle { top: 64%; left: 68%; }
.admin-section--intendants .admin-section__icone .forme--cercle   { top: 64%; left: 32%; }

/* Améliorations : carré à 4 coins - or haut-gauche, mana haut-droite, matériaux bas-droite, global bas-gauche */
.admin-section--ameliorations .admin-section__icone .forme--cercle   { top: 32%; left: 32%; }
.admin-section--ameliorations .admin-section__icone .forme--losange  { top: 32%; left: 68%; }
.admin-section--ameliorations .admin-section__icone .forme--triangle { top: 68%; left: 68%; }
.admin-section--ameliorations .admin-section__icone .forme--anneau   { top: 68%; left: 32%; }

/* ---- Fusion des couleurs : chaque couleur est placée à l'angle de sa forme ----
   Conique : 0deg = haut, sens horaire. Gardiens : or=haut, mana=bas-droite(150),
   matériaux=bas-gauche(210). Intendants : mana=haut, matériaux=bas-droite, or=bas-gauche.
   Améliorations : or=haut(0), mana=droite(90), matériaux=bas(180), global=gauche(270). */

/* Grand contour de la carte = dégradé conique aligné sur les formes */
.admin-section--gardiens,
.admin-section--gardiens:hover {
    border: 2px solid transparent;
    border-image: conic-gradient(var(--or-clair) 0deg, var(--bleu-clair) 150deg, var(--blanc) 210deg, var(--or-clair) 360deg) 1;
}
.admin-section--intendants,
.admin-section--intendants:hover {
    border: 2px solid transparent;
    border-image: conic-gradient(var(--bleu-clair) 0deg, var(--blanc) 150deg, var(--or-clair) 210deg, var(--bleu-clair) 360deg) 1;
}
.admin-section--ameliorations,
.admin-section--ameliorations:hover {
    border: 2px solid transparent;
    border-image: conic-gradient(from 315deg, var(--or-clair), var(--bleu-clair), var(--blanc), var(--marron-clair), var(--or-clair)) 1;
}

/* Anneau de l'icône = même dégradé conique, aligné sur les formes à l'intérieur */
.admin-section--gardiens .admin-section__icone {
    border: 2px solid transparent;
    background:
        linear-gradient(var(--noir-clair), var(--noir-clair)) padding-box,
        conic-gradient(var(--or-clair) 0deg, var(--bleu-clair) 150deg, var(--blanc) 210deg, var(--or-clair) 360deg) border-box;
}
.admin-section--intendants .admin-section__icone {
    border: 2px solid transparent;
    background:
        linear-gradient(var(--noir-clair), var(--noir-clair)) padding-box,
        conic-gradient(var(--bleu-clair) 0deg, var(--blanc) 150deg, var(--or-clair) 210deg, var(--bleu-clair) 360deg) border-box;
}
.admin-section--ameliorations .admin-section__icone {
    border: 2px solid transparent;
    background:
        linear-gradient(var(--noir-clair), var(--noir-clair)) padding-box,
        conic-gradient(from 315deg, var(--or-clair), var(--bleu-clair), var(--blanc), var(--marron-clair), var(--or-clair)) border-box;
}

/* Crochets : la couleur de chaque coin = la forme située de ce côté */
/* Gardiens : or en haut (2 coins), matériaux bas-gauche, mana bas-droite */
.admin-section.admin-section--gardiens::after {
    background:
        linear-gradient(var(--or-clair), var(--or-clair)) top left / 16px 4px no-repeat,
        linear-gradient(var(--or-clair), var(--or-clair)) top left / 4px 16px no-repeat,
        linear-gradient(var(--or-clair), var(--or-clair)) top right / 16px 4px no-repeat,
        linear-gradient(var(--or-clair), var(--or-clair)) top right / 4px 16px no-repeat,
        linear-gradient(var(--blanc), var(--blanc)) bottom left / 16px 4px no-repeat,
        linear-gradient(var(--blanc), var(--blanc)) bottom left / 4px 16px no-repeat,
        linear-gradient(var(--bleu-clair), var(--bleu-clair)) bottom right / 16px 4px no-repeat,
        linear-gradient(var(--bleu-clair), var(--bleu-clair)) bottom right / 4px 16px no-repeat,
        linear-gradient(var(--bordure), var(--bordure)) top / 100% 2px no-repeat,
        linear-gradient(var(--bordure), var(--bordure)) bottom / 100% 2px no-repeat,
        linear-gradient(var(--bordure), var(--bordure)) left / 2px 100% no-repeat,
        linear-gradient(var(--bordure), var(--bordure)) right / 2px 100% no-repeat;
}
/* Intendants : mana en haut (2 coins), or bas-gauche, matériaux bas-droite */
.admin-section.admin-section--intendants::after {
    background:
        linear-gradient(var(--bleu-clair), var(--bleu-clair)) top left / 16px 4px no-repeat,
        linear-gradient(var(--bleu-clair), var(--bleu-clair)) top left / 4px 16px no-repeat,
        linear-gradient(var(--bleu-clair), var(--bleu-clair)) top right / 16px 4px no-repeat,
        linear-gradient(var(--bleu-clair), var(--bleu-clair)) top right / 4px 16px no-repeat,
        linear-gradient(var(--or-clair), var(--or-clair)) bottom left / 16px 4px no-repeat,
        linear-gradient(var(--or-clair), var(--or-clair)) bottom left / 4px 16px no-repeat,
        linear-gradient(var(--blanc), var(--blanc)) bottom right / 16px 4px no-repeat,
        linear-gradient(var(--blanc), var(--blanc)) bottom right / 4px 16px no-repeat,
        linear-gradient(var(--bordure), var(--bordure)) top / 100% 2px no-repeat,
        linear-gradient(var(--bordure), var(--bordure)) bottom / 100% 2px no-repeat,
        linear-gradient(var(--bordure), var(--bordure)) left / 2px 100% no-repeat,
        linear-gradient(var(--bordure), var(--bordure)) right / 2px 100% no-repeat;
}
/* Améliorations : or haut-gauche, mana haut-droite, global bas-gauche, matériaux bas-droite */
.admin-section.admin-section--ameliorations::after {
    background:
        linear-gradient(var(--or-clair), var(--or-clair)) top left / 16px 4px no-repeat,
        linear-gradient(var(--or-clair), var(--or-clair)) top left / 4px 16px no-repeat,
        linear-gradient(var(--bleu-clair), var(--bleu-clair)) top right / 16px 4px no-repeat,
        linear-gradient(var(--bleu-clair), var(--bleu-clair)) top right / 4px 16px no-repeat,
        linear-gradient(var(--marron-clair), var(--marron-clair)) bottom left / 16px 4px no-repeat,
        linear-gradient(var(--marron-clair), var(--marron-clair)) bottom left / 4px 16px no-repeat,
        linear-gradient(var(--blanc), var(--blanc)) bottom right / 16px 4px no-repeat,
        linear-gradient(var(--blanc), var(--blanc)) bottom right / 4px 16px no-repeat,
        linear-gradient(var(--bordure), var(--bordure)) top / 100% 2px no-repeat,
        linear-gradient(var(--bordure), var(--bordure)) bottom / 100% 2px no-repeat,
        linear-gradient(var(--bordure), var(--bordure)) left / 2px 100% no-repeat,
        linear-gradient(var(--bordure), var(--bordure)) right / 2px 100% no-repeat;
}

.carte .admin-section__titre { margin: 0 0 0.3rem; font-size: 1.15rem; }

.admin-section__desc {
    color: var(--gris-texte);
    font-size: 0.88rem;
    line-height: 1.5;
    margin: 0 0 0.7rem;
}

.admin-section__compte { margin: 0 0 1.1rem; color: var(--gris); font-size: 0.85rem; }
.admin-section__compte strong { color: var(--crochet); font-size: 1.05rem; }

.admin-section__actions {
    margin-top: auto;
    display: flex;
    gap: 0.6rem;
    width: 100%;
}

/* Mêmes boutons que dans la salle des gardiens : fond transparent, bordure + texte or,
   remplissage or au survol */
.bouton-admin {
    flex: 1;
    margin-top: 0;
    padding: 0.45rem 0.9rem;
    border-radius: 4px;
    border: 1px solid var(--or);
    background: transparent;
    color: var(--or-clair);
    font-family: var(--police-accent);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.bouton-admin:hover {
    background: var(--or);
    color: var(--noir);
    text-decoration: none;
}

/* ============ Liste d'administration (tableau Gardiens) ============ */
.fil-ariane {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    margin-bottom: 0.8rem;
}
.fil-ariane a { color: var(--or-clair); text-decoration: none; }
.fil-ariane a:hover { text-decoration: underline; }
.fil-ariane__sep { color: var(--gris); }
.fil-ariane__actuel { color: var(--gris-texte); }

.admin-liste__entete {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.2rem;
}
.admin-liste__entete h1 { margin-bottom: 0.2rem; }
.admin-liste__entete .sous-titre { margin-top: 0.5rem; }
.admin-liste__entete .bouton-admin { flex: 0 0 auto; margin-top: 0.4rem; }

/* Carte à bordure dorée englobant le tableau */
.admin-tableau__carte {
    border: 1px solid var(--or);
    background: var(--noir-clair);
    border-radius: 6px;
    overflow-x: auto;
    margin-bottom: 1.2rem;
}

.admin-tableau {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.admin-tableau thead { background: #131116; }
.admin-tableau th {
    text-align: left;
    padding: 0.85rem 1.1rem;
    color: var(--or-clair);
    font-family: var(--police-accent);
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 700;
    border-bottom: 1px solid #2a2530;
    white-space: nowrap;
}
.admin-tableau td {
    padding: 0.8rem 1.1rem;
    border-bottom: 1px solid #2a2530;
    color: var(--blanc);
    vertical-align: middle;
}
.admin-tableau tbody tr:last-child td { border-bottom: none; }
.admin-tableau tbody tr:hover { background: #1f1b24; }
.admin-tableau__vide {
    text-align: center;
    color: var(--gris);
    padding: 2rem 1rem;
}
.admin-tableau__cout { color: var(--or-clair); white-space: nowrap; }
.admin-tableau__col-actions { text-align: right; }

/* Cellule Gardien : avatar + nom + étage */
.admin-tableau__gardien { display: flex; align-items: center; gap: 0.75rem; }
.admin-tableau__avatar {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--noir);
    border: 1px solid var(--bordure);
    font-family: var(--police-titre);
    font-size: 1.1rem;
    line-height: 1;
}
.admin-tableau__avatar--or { color: var(--or-clair); border-color: var(--or); }
.admin-tableau__avatar--mana { color: var(--bleu-clair); border-color: var(--bleu-clair); }
.admin-tableau__avatar--materiaux { color: var(--blanc); border-color: var(--blanc); }
.admin-tableau__avatar--neutre { color: var(--or-clair); border-color: var(--or); }
.admin-tableau__avatar--global { color: var(--marron-clair); border-color: var(--marron-clair); }

/* Cellule « Dotation » : plusieurs badges de ressource */
.admin-tableau__dotation { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.admin-tableau__ident { display: flex; flex-direction: column; min-width: 0; }
.admin-tableau__nom { font-weight: 600; color: var(--blanc); overflow-wrap: anywhere; word-break: break-word; }
.admin-tableau__sous { font-size: 0.8rem; color: var(--gris); }

/* Actions : Éditer (doré) + ✕ (rouge) */
.admin-tableau__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}
.admin-tableau__actions form { margin: 0; }
.bouton-admin--petit {
    flex: 0 0 auto;
    padding: 0.38rem 0.85rem;
    font-size: 0.76rem;
}
.bouton-suppr {
    margin: 0;
    padding: 0.38rem 0.85rem;
    border-radius: 4px;
    border: 1px solid var(--rouge);
    background: transparent;
    color: var(--rouge-clair);
    font-family: var(--police-accent);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.bouton-suppr:hover { background: var(--rouge); color: var(--blanc); }

/* Pagination */
.admin-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}
.admin-pagination__info { margin: 0; color: var(--gris); font-size: 0.85rem; }
.admin-pagination__info strong { color: var(--or-clair); }
.admin-pagination__boutons { display: flex; align-items: center; gap: 0.7rem; }
.admin-pagination__pos { color: var(--gris); font-size: 0.85rem; }
.bouton-page {
    padding: 0.45rem 1rem;
    border-radius: 4px;
    border: 1px solid var(--bordure);
    background: var(--noir-clair);
    color: var(--gris-texte);
    font-family: var(--police-accent);
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.bouton-page:hover {
    text-decoration: none;
    background: var(--or);
    border-color: var(--or);
    color: var(--noir);
}
.bouton-page--actif { border-color: var(--or); color: var(--or-clair); }
.bouton-page--inactif { opacity: 0.4; cursor: default; pointer-events: none; }

/* ============ Formulaire d'administration (créer / modifier) ============ */
.admin-formulaire { max-width: 620px; }

/* Éditeur en deux colonnes : formulaire à gauche, aperçu de la carte en jeu à droite */
.admin-editeur {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 1.5rem;
    align-items: start;
}
.admin-formulaire__carte {
    border: 1px solid var(--or);
    background: var(--noir-clair);
    border-radius: 6px;
    padding: 1.6rem;
}
.admin-formulaireulaire__corps { gap: 0.5rem; }

/* Colonne aperçu (suit le défilement) */
.admin-apercu { position: sticky; top: 1rem; }
.admin-apercu__libelle {
    display: block;
    margin-bottom: 0.6rem;
    font-family: var(--police-accent);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.8rem;
    color: var(--or-clair);
}
/* La carte d'aperçu réutilise les styles de jeu ; on neutralise le survol. */
.admin-apercu .carte:hover { transform: none; }
.admin-apercu .badge { overflow-wrap: anywhere; word-break: break-word; }

/* Compteur de caractères de la description */
.admin-formulaire__compteur {
    align-self: flex-end;
    margin-top: 0.15rem;
    font-size: 0.75rem;
    color: var(--gris);
}
.admin-formulaire__compteur--limite { color: var(--rouge-clair); }

/* Légende d'un groupe de champs (ex. dotation de l'intendant) */
.admin-formulaire__legende {
    margin: 0.8rem 0 0;
    font-family: var(--police-accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.78rem;
    color: var(--or-clair);
}

/* Robustesse : un nom/description sans espace ne déborde jamais d'une carte
   (s'applique aux cartes réelles en jeu ET aux aperçus de l'admin). */
.carte-gardien__titre,
.carte-gardien__description,
.carte-intendant__titre,
.carte-intendant__description,
.carte-amelioration__titre,
.carte-amelioration__description { overflow-wrap: anywhere; word-break: break-word; }

/* Champs numériques sur une ligne */
.admin-formulaire__grille {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.8rem;
    margin-top: 0.4rem;
}
.admin-formulaire__grille--2 { grid-template-columns: repeat(2, 1fr); }
.admin-formulaire__champ { display: flex; flex-direction: column; gap: 0.4rem; }
.admin-formulaire__champ label { margin-top: 0; }

/* Textarea aligné sur le style des inputs */
.formulaire textarea {
    padding: 0.5rem;
    border-radius: 4px;
    border: 1px solid var(--bordure);
    background: var(--noir);
    color: var(--blanc);
    font-family: inherit;
    font-size: inherit;
    resize: vertical;
    min-height: 3.4rem;
}
.formulaire textarea:focus { outline: none; border-color: var(--or); }
.formulaire textarea::placeholder { color: var(--gris-texte); opacity: 0.7; }

/* Actions : bouton principal + lien Annuler discret */
.admin-formulaire__actions {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-top: 1.2rem;
}
.admin-formulaire__actions button { margin-top: 0; flex: 0 0 auto; }
/* Bouton secondaire : même famille que Précédent/Suivant (.bouton-page) */
.admin-formulaire__annuler {
    padding: 0.55rem 1.1rem;
    border-radius: 4px;
    border: 1px solid var(--bordure);
    background: transparent;
    color: var(--gris-texte);
    font-family: var(--police-accent);
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.admin-formulaire__annuler:hover {
    text-decoration: none;
    border-color: var(--gris-texte);
    color: var(--blanc);
    background: rgba(255, 255, 255, 0.04);
}

/* ============ Pages d'erreur (404 / 403) ============ */
.erreur-page {
    max-width: 560px;
    margin: 2.5rem auto;
    padding: 2rem 1rem;
    text-align: center;
}
.erreur-page__code {
    margin: 0;
    font-family: var(--police-titre);
    font-size: clamp(4rem, 18vw, 8rem);
    line-height: 1;
    color: var(--or-clair);
    text-shadow: 0 0 28px rgba(220, 180, 62, 0.25);
}
.erreur-page__titre {
    border: none;
    animation: none;
    margin: 0.4rem 0 0.7rem;
    color: var(--blanc);
    font-size: clamp(1.2rem, 4vw, 1.6rem);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.erreur-page__message {
    margin: 0 0 1.7rem;
    color: var(--gris-texte);
}
.erreur-page__retour {
    display: inline-block;
    padding: 0.6rem 1.4rem;
    border-radius: 4px;
    border: 1px solid var(--or);
    background: transparent;
    color: var(--or-clair);
    font-family: var(--police-accent);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}
.erreur-page__retour:hover { background: var(--or); color: var(--noir); text-decoration: none; }

/* Repli en HAMBURGER, déclenché par la classe .nav--compact ajoutée en JavaScript quand
   l'en-tête complet ne tient plus sur une seule ligne (voir application.js). Cette détection
   au rendu réel remplace l'ancien seuil en pixels, fragile face au zoom, à la mise à l'échelle
   Windows et à la largeur variable des ressources (qui grandit avec les gros nombres). */
.nav--compact .nav__bascule {
    display: flex;
    order: 2;
}
.nav--compact .nav__liens {
    order: 4;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    row-gap: 0;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
}
.nav--compact .nav__liens--ouvert {
    max-height: 320px;
    padding-top: 0.6rem;
}
.nav--compact .nav__liens a {
    padding: 0.6rem 0.2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.nav--compact .nav__deconnexion {
    margin-top: 0.4rem;
}
.nav--compact .nav__deconnexion button {
    width: 100%;
}
/* Ressources compactes sans libellé (l'icône colorée suffit à les identifier). */
.nav--compact .nav__ressource__nom {
    display: none;
}
.nav--compact .nav__ressources {
    font-size: 0.82rem;
    padding: 0.4rem 0.6rem;
}
.nav--compact .nav__ressource {
    gap: 0.45rem;
    padding: 0 0.9rem 0.7rem;
}
.nav--compact .nav__taux {
    left: 0.9rem;
    font-size: 0.66rem;
}

/* Petits écrans : 6 éclairs pleine largeur surchargent l'affichage, on en garde 3 et on les affine. */
@media (max-width: 640px) {
    /* Tableau d'admin : on abandonne la grille (scroll horizontal pénible) et chaque
       ligne devient une carte empilée, avec un libellé devant chaque valeur. */
    .admin-liste__entete { flex-direction: column; }
    .admin-liste__entete .bouton-admin { align-self: stretch; margin-top: 0; }

    /* Plus de cadre doré englobant : chaque ligne devient une carte indépendante */
    .admin-tableau__carte {
        overflow-x: visible;
        border: none;
        background: transparent;
        border-radius: 0;
    }
    .admin-tableau thead { display: none; }
    .admin-tableau,
    .admin-tableau tbody,
    .admin-tableau tr,
    .admin-tableau td { display: block; width: 100%; }

    .admin-tableau tr {
        padding: 1.1rem 1rem;
        margin-bottom: 0.9rem;
        background: var(--noir-clair);
        border: 1px solid var(--bordure);
        border-radius: 6px;
    }
    .admin-tableau tbody tr:last-child { margin-bottom: 0; }
    .admin-tableau tbody tr:hover { background: var(--noir-clair); }
    .admin-tableau td {
        padding: 0.45rem 0;
        border-bottom: none;
    }

    /* En-tête de la carte : avatar + nom + étage */
    .admin-tableau__td-gardien {
        padding-bottom: 0.7rem;
        margin-bottom: 0.4rem;
        border-bottom: 1px solid #2a2530;
    }

    /* Lignes « libellé : valeur » */
    .admin-tableau td[data-libelle] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }
    .admin-tableau td[data-libelle]::before {
        content: attr(data-libelle);
        color: var(--or-clair);
        font-family: var(--police-accent);
        font-size: 0.72rem;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        flex-shrink: 0;
    }

    /* Actions en pied de carte : boutons à leur largeur naturelle, alignés à gauche */
    .admin-tableau__td-actions { padding-top: 1rem; }
    .admin-tableau__td-actions .admin-tableau__actions { justify-content: flex-start; }

    /* Pagination empilée et centrée */
    .admin-pagination { justify-content: center; text-align: center; }
    .admin-pagination__boutons { flex-wrap: wrap; justify-content: center; }

    /* Formulaire : une colonne, aperçu sous le formulaire, champs numériques empilés */
    .admin-editeur { grid-template-columns: 1fr; }
    .admin-apercu { position: static; }
    .admin-formulaire__grille { grid-template-columns: 1fr; }
    .admin-formulaire__carte { padding: 1.1rem; }

    /* Aperçu intendant : le bandeau s'empile au lieu de rester en ligne */
    .carte-intendant--apercu { flex-direction: column; align-items: stretch; gap: 1rem; }
    .carte-intendant--apercu .carte-intendant__ressources { flex-wrap: wrap; }

    /* Carte intendant (page Gardiens) : même empilement sur mobile. Sinon, le
       bloc info (flex:1; min-width:0) est écrasé à ~0px par le bouton nowrap et
       les badges (flex-shrink:0), son texte s'enroule sur toute la hauteur, et
       la carte explose en hauteur + déborde en largeur. */
    .carte-intendant { flex-direction: column; align-items: stretch; gap: 1rem; }
    .carte-intendant .carte-intendant__ressources { flex-wrap: wrap; }

    /* Boutons d'action d'un formulaire admin : ils passent à la ligne plutôt que
       de déborder de l'écran (ex: « Créer l'amélioration » + « Annuler »). */
    .admin-formulaire__actions { flex-wrap: wrap; }

    /* En-tête collant + 3 lignes empilées (marque/ressources/liens) prend trop de place
       sur un petit écran : on le laisse défiler avec le contenu, et les liens passent
       dans un menu burger repliable au lieu de rester ouverts en permanence. */
    .nav {
        position: static;
        padding: 0.7rem 1.2rem;
    }

    .nav__ligne1 {
        gap: 0.6rem;
    }

    .nav__ligne2 {
        justify-content: center;
    }

    /* Sous 640px, « logo · ressources · hamburger » ne tient plus sur une ligne :
       les ressources passent sur leur propre ligne centrée (logo + hamburger au-dessus). */
    .nav__stats {
        display: flex;
        order: 3;
        flex-basis: 100%;
        justify-content: center;
        margin-top: 0.5rem;
    }

    .eclair-foudre {
        width: 90px;
        height: 100vh;
        top: 0;
    }

    .eclair-surcouche svg:nth-of-type(n+4) {
        display: none;
    }

    /* On ne garde que 3 éclairs sur mobile : on les répartit sur toute la largeur
       au lieu de les laisser groupés à gauche (positions par défaut 2%/18%/36%). */
    .eclair-foudre--pos-1 { left: 4%; }
    .eclair-foudre--pos-2 { left: 40%; }
    .eclair-foudre--pos-3 { left: 76%; }
}

/* ============ Page d'accueil publique (landing) ============ */
.accueil {
    max-width: 960px;
    margin: 0 auto;
    padding: 1rem 0 2rem;
}

/* Hero centré : titre du jeu, accroche et appels à l'action. */
.accueil__hero {
    text-align: center;
    padding: 2rem 0 2.5rem;
}
.accueil__surtitre {
    margin: 0 0 0.6rem;
    color: var(--or);
    font-family: var(--police-accent);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.8rem;
}
.accueil__titre {
    margin: 0;
    font-family: var(--police-titre);
    font-size: clamp(1.7rem, 6vw, 2.6rem);
    line-height: 1.1;
    color: var(--or-clair);
    text-shadow: 0 0 30px rgba(220, 180, 62, 0.25);
}
.accueil__accroche {
    margin: 1rem auto 0.6rem;
    max-width: 40ch;
    color: var(--blanc);
    font-size: clamp(1rem, 2.6vw, 1.2rem);
}
.accueil__texte {
    margin: 0 auto;
    max-width: 52ch;
    color: var(--gris);
    line-height: 1.6;
}
.accueil__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.8rem;
}

/* Boutons de la landing : ils réutilisent la règle `button` du site (même rouge/or que
   connexion/inscription). Étant des <a>, ils ont juste besoin de ces ajustements. */
.bouton-principal,
.bouton-secondaire {
    display: inline-block;
    margin-top: 0;
    text-decoration: none;
}

.accueil__section-titre {
    text-align: center;
    margin: 2.5rem 0 1.5rem;
    font-family: var(--police-titre);
    font-size: clamp(1.15rem, 3.2vw, 1.45rem);
    color: var(--or-clair);
}

/* La section "atouts" réutilise les composants du jeu (.carte .carte--deco
   .carte-amelioration). Seule la grille est ajustée : 4 cartes en 2x2 (puis 1 colonne
   sur mobile), plus équilibré que l'auto-remplissage pour un nombre fixe de cartes. */
.accueil__cartes {
    grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 560px) {
    .accueil__cartes {
        grid-template-columns: 1fr;
    }
}

/* Étapes de prise en main, numérotées. */
.accueil__etapes {
    max-width: 46ch;
    margin: 0 auto;
    padding-left: 1.4rem;
    color: var(--gris);
    line-height: 1.9;
}
.accueil__etapes strong {
    color: var(--blanc);
}

/* Appel à l'action final. */
.accueil__cta-final {
    text-align: center;
    margin-top: 3rem;
    padding: 2rem 1rem;
    border-top: 1px solid var(--bordure);
}
.accueil__cta-final h2 {
    margin: 0 0 1.2rem;
    font-family: var(--police-titre);
    color: var(--or-clair);
    font-size: clamp(1.2rem, 3.4vw, 1.5rem);
}