/* ============================================================================================
   Administration KadoClone.

   Volontairement sobre, et sans rapport avec la charte jungle du site joueur : c'est un outil, pas
   une vitrine, et les deux ne doivent pas se confondre à l'écran — savoir d'un coup d'œil qu'on est
   du côté administration fait partie des garde-fous.
   ============================================================================================ */
:root {
    --encre: #1f2417;
    --encre-douce: #5b6551;
    --fond: #f4f6f2;
    --carte: #ffffff;
    --bord: #dde2d8;
    --accent: #1c4a2c;
    --alerte: #c23b3b;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--encre);
    background: var(--fond);
}

/* Le bandeau d'environnement : rouge en production, pour qu'on ne s'y trompe jamais. */
.bandeau-environnement {
    padding: 0.35rem 1rem;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-align: center;
    color: #fff;
    background: var(--encre-douce);
}

.env-development { background: #4f9a55; }
.env-test { background: #e2692c; }
.env-production { background: var(--alerte); }

.entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.9rem 1.25rem;
    background: var(--carte);
    border-bottom: 1px solid var(--bord);
}

.marque {
    font-weight: 800;
    color: var(--accent);
    text-decoration: none;
}

.deconnexion {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
}

.identite {
    font-size: 0.85rem;
    color: var(--encre-douce);
}

.contenu {
    max-width: 60rem;
    margin: 0 auto;
    padding: 1.5rem 1.25rem;
}

h1 {
    font-size: 1.4rem;
    margin-top: 0;
}

button {
    font: inherit;
    font-weight: 700;
    color: #fff;
    background: var(--accent);
    border: 0;
    border-radius: 6px;
    padding: 0.5rem 0.9rem;
    cursor: pointer;
}

/* ——— Connexion ————————————————————————————————————————————————————————————————— */
.connexion {
    max-width: 22rem;
    margin: 3rem auto;
    padding: 1.5rem;
    background: var(--carte);
    border: 1px solid var(--bord);
    border-radius: 10px;
}

.connexion form {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.connexion label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.85rem;
    font-weight: 700;
}

.connexion input {
    font: inherit;
    padding: 0.5rem;
    border: 1px solid var(--bord);
    border-radius: 6px;
}

.erreur {
    padding: 0.6rem 0.8rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--alerte);
    background: rgba(194, 59, 59, 0.08);
}

.a-venir {
    color: var(--encre-douce);
    font-size: 0.9rem;
}

/* ——— Second facteur ————————————————————————————————————————————————————————————
   Les trois écrans du second facteur — vérification, activation, codes de secours — partagent la
   même largeur de lecture que la connexion, parce qu'ils s'enchaînent : changer de gabarit d'un
   écran à l'autre donnerait l'impression d'avoir changé de site au milieu.

   Tout est exprimé en rem et en pourcentages, sans largeur fixe : ces écrans seront lus sur un
   téléphone au moins autant que sur un ordinateur, puisqu'on y recopie un code affiché sur un
   téléphone. */
.explication,
.secondaire {
    color: var(--encre-douce);
    font-size: 0.9rem;
    line-height: 1.5;
}

.secondaire {
    margin-bottom: 0;
    padding-top: 1rem;
    border-top: 1px solid var(--bord);
    font-size: 0.8rem;
}

.activation,
.codes-de-secours {
    max-width: 34rem;
    margin: 2rem auto;
    padding: 1.5rem;
    background: var(--carte);
    border: 1px solid var(--bord);
    border-radius: 10px;
}

.etapes {
    margin: 0;
    padding-left: 1.25rem;
}

.etapes > li {
    margin-bottom: 1.75rem;
    line-height: 1.5;
}

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

/* Le QR code : jamais plus large que la colonne, pour qu'il reste entier sur un petit écran. Fond
   blanc explicite — l'image est transparente, et un thème sombre la rendrait illisible. */
.qr {
    display: block;
    width: 12rem;
    max-width: 100%;
    height: auto;
    margin: 0.9rem 0;
    padding: 0.5rem;
    background: #fff;
    border: 1px solid var(--bord);
    border-radius: 8px;
}

.repli {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--encre-douce);
}

.repli summary {
    cursor: pointer;
    font-weight: 700;
}

/* La clé recopiée à la main : en chasse fixe, et coupée n'importe où plutôt que débordante — c'est
   une suite de groupes, sa mise à la ligne ne gêne pas la lecture. */
.cle {
    font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
    font-size: 1rem;
    letter-spacing: 0.05em;
    word-break: break-all;
    color: var(--encre);
}

.activation form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.activation label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.85rem;
    font-weight: 700;
}

.activation input {
    font: inherit;
    font-size: 1.1rem;
    letter-spacing: 0.15em;
    width: 7rem;
    padding: 0.5rem;
    border: 1px solid var(--bord);
    border-radius: 6px;
}

.avertissement {
    padding: 0.75rem 0.9rem;
    border-radius: 6px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--alerte);
    background: rgba(194, 59, 59, 0.08);
}

/* Les codes en grille qui se replie d'elle-même : deux colonnes sur un écran ordinaire, une seule
   sur un téléphone, sans qu'aucun point de rupture n'ait à être écrit. */
.codes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.5rem;
    margin: 1.25rem 0;
    padding: 0;
    list-style: none;
}

.codes code {
    display: block;
    padding: 0.5rem;
    font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
    font-size: 1rem;
    text-align: center;
    background: var(--fond);
    border: 1px solid var(--bord);
    border-radius: 6px;
}

.continuer {
    display: inline-block;
    padding: 0.55rem 1rem;
    font-weight: 700;
    color: #fff;
    background: var(--accent);
    border-radius: 6px;
    text-decoration: none;
}

/* À l'impression, ne garder que les codes : c'est la seule page du site qu'on imprime, et on
   l'imprime pour les ranger. */
@media print {
    .bandeau-environnement,
    .avertissement,
    .explication,
    .continuer {
        display: none;
    }

    .codes-de-secours {
        margin: 0;
        border: 0;
    }
}

/* ——— Navigation ————————————————————————————————————————————————————————————————— */
.navigation {
    display: flex;
    gap: 1rem;
    margin-right: auto;
    font-size: 0.9rem;
    font-weight: 700;
}

.navigation a {
    color: var(--encre-douce);
    text-decoration: none;
    padding: 0.2rem 0;
    border-bottom: 2px solid transparent;
}

.navigation a:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* ——— Écran des comptes ——————————————————————————————————————————————————————————— */
.titre-et-action {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.bouton,
.lien-discret {
    display: inline-block;
    padding: 0.5rem 0.9rem;
    font-size: 0.9rem;
    font-weight: 700;
    border-radius: 6px;
    text-decoration: none;
}

.bouton {
    color: #fff;
    background: var(--accent);
}

.lien-discret {
    color: var(--encre-douce);
}

/* Le mot de passe d'un compte qu'on vient de créer : montré une fois, et assez visible pour qu'on
   ne referme pas la page sans l'avoir noté. */
.encart-secret {
    margin: 1rem 0;
    padding: 1rem 1.1rem;
    background: var(--carte);
    border: 2px solid var(--accent);
    border-radius: 10px;
}

.secret {
    margin: 0.75rem 0;
    padding: 0.6rem 0.8rem;
    font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
    font-size: 1.25rem;
    letter-spacing: 0.04em;
    word-break: break-all;
    background: var(--fond);
    border: 1px solid var(--bord);
    border-radius: 6px;
}

.note {
    margin-bottom: 0;
    font-size: 0.85rem;
    color: var(--encre-douce);
    line-height: 1.5;
}

.tableau {
    width: 100%;
    margin-top: 1.25rem;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.tableau th,
.tableau td {
    padding: 0.6rem 0.5rem;
    text-align: left;
    border-bottom: 1px solid var(--bord);
    vertical-align: top;
}

.tableau th {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--encre-douce);
}

.tableau td.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.marqueur {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.1rem 0.4rem;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--accent);
    background: rgba(28, 74, 44, 0.1);
    border-radius: 4px;
}

.etat-bon { color: var(--accent); font-weight: 700; }
.etat-attente { color: #a06a1c; font-weight: 700; }

button.discret {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--encre-douce);
    background: transparent;
    border: 1px solid var(--bord);
    border-radius: 6px;
    padding: 0.35rem 0.6rem;
}

button.discret:hover {
    color: var(--encre);
    border-color: var(--encre-douce);
}

/* Le geste le plus dangereux de l'écran se voit comme tel, sans être pour autant plus difficile à
   viser qu'un autre : c'est la confirmation qui arrête la main, pas la taille du bouton. */
button.dangereux {
    color: var(--alerte);
    border-color: rgba(194, 59, 59, 0.4);
}

button.dangereux:hover {
    color: #fff;
    background: var(--alerte);
    border-color: var(--alerte);
}

/* Sur un téléphone, un tableau à six colonnes ne se lit pas : chaque ligne devient une petite fiche,
   où l'intitulé de la colonne précède sa valeur. */
@media (max-width: 720px) {
    .tableau thead {
        display: none;
    }

    .tableau,
    .tableau tbody,
    .tableau tr,
    .tableau td {
        display: block;
        width: 100%;
    }

    .tableau tr {
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
        border-bottom: 2px solid var(--bord);
    }

    .tableau td {
        border: 0;
        padding: 0.25rem 0;
    }

    .tableau td[data-intitule]::before {
        content: attr(data-intitule) " : ";
        font-size: 0.78rem;
        font-weight: 700;
        color: var(--encre-douce);
    }
}

/* ——— Formulaires d'administration ———————————————————————————————————————————————— */
.formulaire {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 28rem;
    margin-top: 1.25rem;
}

.formulaire label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.85rem;
    font-weight: 700;
}

.formulaire input {
    font: inherit;
    padding: 0.5rem;
    border: 1px solid var(--bord);
    border-radius: 6px;
}

.erreur-champ {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--alerte);
}

.boutons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

/* ——— Accueil ————————————————————————————————————————————————————————————————————— */
.ecrans {
    margin: 1.25rem 0;
    padding: 0;
    list-style: none;
}

.ecrans li {
    padding: 0.9rem 1rem;
    margin-bottom: 0.6rem;
    background: var(--carte);
    border: 1px solid var(--bord);
    border-radius: 10px;
}

.ecrans a {
    display: block;
    font-weight: 700;
    color: var(--accent);
    text-decoration: none;
}

.ecrans span {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.85rem;
    color: var(--encre-douce);
}