/* ---------------------------------------------------------------------------
   Ekichurch — console éditeur.

   ⚠️⚠️ CETTE FEUILLE NE REDÉFINIT QUE DES VARIABLES. Elle n'écrit aucun composant : les cartes,
   jetons, tableaux, vignettes et la navigation viennent tous d'`assets/socle.css`, qui ne pose
   jamais une couleur en dur. La console est le même système, en sombre.

   Écrire une seconde feuille de composants aurait donné deux systèmes à corriger deux fois — et
   ils auraient divergé dès la première correction.

   ⚠️ CHARGÉE APRÈS LE SOCLE (voir GabaritConsole::tete). Avant, elle serait écrasée par les
   valeurs claires du `:root` du socle et la console s'afficherait en clair.

   ⚠️ LES VOILES DU SOCLE SONT DES NOIRS TRANSLUCIDES — parfaits sur fond clair, invisibles ici.
   Ce sont donc les seules valeurs qu'il faut réellement retourner : des BLANCS translucides.
   --------------------------------------------------------------------------- */

.eki-console {
    /* Servi par le socle en clair — ici, l'identité de l'éditeur. */
    --eki-primaire: #e0a94a;
    --eki-accent:   #e0a94a;
    --eki-fond:     #16181b;
    --eki-texte:    #e9e6df;

    /* Neutres de la console. */
    --eki-carte:       #1c1f23;
    --eki-bord:        #2c3036;
    --eki-filet:       #24272c;
    --eki-doux:        #9b968c;
    --eki-tres-doux:   #756f66;
    --eki-entete-fond: #202329;

    /* ⚠️ Blancs translucides, pas noirs : sur un fond sombre, un voile noir ne se voit pas. */
    --eki-voile:      rgba(255, 252, 245, .055);
    --eki-voile-fort: rgba(255, 252, 245, .105);

    --eki-danger:      #e2756b;
    --eki-danger-fond: #33201f;
}

/* ⚠️ Le fond de page se peint sur `body`, qui porte la classe : sans cette ligne, le `:root` du
   socle continuerait de servir son fond clair derrière un contenu sombre. */
body.eki-console { background: var(--eki-fond); color: var(--eki-texte); }

/* ─── Ce que le socle ne pouvait pas rendre variable ─────────────────────── */

/* Le bouton principal du socle écrit son texte en blanc : sur l'ambre de la console, il faut du
   sombre. C'est la seule règle de composant de ce fichier, et elle est là parce qu'un contraste
   ne se déduit pas d'une variable. */
.eki-console .eki-bouton { color: #17191c; font-weight: 700; }
.eki-console .eki-bouton--discret { color: var(--eki-texte); font-weight: 600; }
.eki-console .eki-bouton--danger { color: #fff; }

/* Idem pour les états remplis : la puce active et le jeton fort se peignent avec `--eki-texte`,
   qui est ici presque blanc — le texte par-dessus doit redevenir sombre. */
.eki-console .eki-puce--actif,
.eki-console .eki-jeton--fort { color: #17191c; }
.eki-console .eki-puce--actif .eki-puce__n { color: rgba(23, 25, 28, .6); }

/* Survols et bordures au survol : les gris du socle sont calculés pour du clair. */
.eki-console .eki-champ:hover:not(:focus),
.eki-console .eki-select:hover:not(:focus) { border-color: #3a3f47; }
.eki-console .eki-bouton--discret:hover { border-color: #3a3f47; }
.eki-console .eki-puce:hover { border-color: #3a3f47; }

.eki-console table.eki-tableau tbody tr:hover,
.eki-console table.eki-tableau--nu tbody tr:hover { background: rgba(255, 252, 245, .03); }

/* Les états colorés du socle sont des pastels pensés pour du blanc : illisibles ici. */
.eki-console .eki-etat--membre    { background: #1e3226; color: #86c9a0; }
.eki-console .eki-etat--visiteur  { background: #33291a; color: #ddb063; }
.eki-console .eki-etat--inactif   { background: var(--eki-voile); color: var(--eki-doux); }
.eki-console .eki-etat--anonymise { background: #262336; color: #a99ad4; }

/* La barre de l'histogramme : le gris du socle disparaît sur fond sombre. */
.eki-console .eki-histo__fut { background: #3d424a; }
.eki-console .eki-histo__col--fort .eki-histo__fut { background: var(--eki-primaire); }

/* Une carte sombre n'a pas besoin d'ombre : elle se détache par sa bordure. */
.eki-console .eki-carte,
.eki-console .eki-stat { box-shadow: none; }

/* ─── États d'instance ───────────────────────────────────────────────────── */

/* ⚠️ Une pastille AVANT le mot, pas une couleur de fond seule : la couleur seule ne se lit pas
   pour huit pour cent des hommes, et l'état d'une base est précisément ce qu'on balaie des yeux. */
.cns-etat { display: inline-flex; align-items: center; gap: .4375rem; }

.cns-etat::before {
    content: "";
    width: .4375rem;
    height: .4375rem;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

.cns-etat--active   { background: #1e3226; color: #86c9a0; border-color: #2b4433; }
.cns-etat--migration { background: #1c2a38; color: #79b0dd; border-color: #2a3d4f; }
.cns-etat--echec    { background: #33201f; color: #e2756b; border-color: #4a2c2a; }
.cns-etat--attente  { background: var(--eki-voile); color: var(--eki-doux); }

/* Le nom d'une base ou d'un domaine se recopie : chasse fixe, et pas de coupure au milieu. */
.cns-machine {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: .8125rem;
    color: var(--eki-doux);
    white-space: nowrap;
}

/* ─── La porte (connexion, réparation) ───────────────────────────────────── */

.eki-console--nu { display: flex; align-items: center; justify-content: center; padding: 1.5rem; }

.cns-porte { width: 100%; max-width: 24rem; }

.cns-porte__marque {
    display: flex;
    flex-direction: column;
    gap: .1875rem;
    margin-bottom: 1.5rem;
    text-align: center;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.cns-porte__marque span {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .09em;
    color: var(--eki-tres-doux);
}

.cns-porte__carte {
    background: var(--eki-carte);
    border: 1px solid var(--eki-bord);
    border-radius: var(--eki-rayon);
    padding: 1.5rem;
}

.cns-porte__champs { display: flex; flex-direction: column; gap: .875rem; }

.cns-porte__champs .eki-champ { width: 100%; }

.cns-porte__envoi { width: 100%; justify-content: center; margin-top: .25rem; }

.cns-porte__aide { margin: 1rem 0 0; font-size: .75rem; color: var(--eki-tres-doux); }

/* ⚠️ Le code à six chiffres s'écrit en chasse fixe et bien espacé : on le recopie d'un téléphone,
   souvent vite, et un « 1 » qui ressemble à un « l » se retape deux fois. */
.cns-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.375rem;
    letter-spacing: .35em;
    text-align: center;
}

/* Le secret d'enrôlement : lisible, sélectionnable, et jamais coupé au mauvais endroit. */
/* Le code graphique d'enrôlement du second facteur.
   ⚠️⚠️ FOND BLANC IMPOSÉ, ET C'EST UNE CONDITION DE LECTURE, PAS UNE COULEUR.
   La console est sombre. Un QR dessiné en noir sur ce fond-là n'a plus aucun contraste : les
   trois repères d'angle disparaissent et AUCUN lecteur ne trouve le code — sans que rien à
   l'écran ne laisse deviner pourquoi, puisque le dessin, lui, s'affiche très bien.
   ⚠️ La marge blanche autour du carré (`padding`) prolonge la zone silencieuse que le SVG porte
   déjà : sur un écran, le bord du cadre est un contraste franc que certains lecteurs prennent
   pour un module. */
.cns-totp-code {
    display: flex;
    justify-content: center;
    margin: 1rem 0;
    padding: .875rem;
    border-radius: var(--eki-rayon-petit);
    background: #fff;
}

.cns-totp-code svg {
    display: block;
    width: 220px;
    height: 220px;
}

/* ⚠️ Le repli manuel reste ATTEIGNABLE au clavier et lisible : c'est la seule issue quand
   l'appareil photo ne peut pas servir. Le masquer derrière un style trop discret reviendrait à
   ne l'avoir pas gardé. */
.cns-totp-repli > summary {
    cursor: pointer;
    padding: .375rem 0;
}

.cns-secret {
    display: block;
    margin: .75rem 0;
    padding: .75rem;
    border: 1px dashed var(--eki-bord);
    border-radius: var(--eki-rayon-petit);
    background: var(--eki-voile);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .9375rem;
    letter-spacing: .1em;
    text-align: center;
    word-break: break-all;
    user-select: all;
}