/* ==========================================================================
   Compléments aux feuilles des maquettes.

   Quelques écrans montrent un état que les maquettes ne dessinent pas :
   la double authentification avant son activation, les codes de secours
   qui ne s’affichent qu’une fois, un champ de mot de passe demandé avant
   une action sensible. Ces règles reprennent les formes et les couleurs
   déjà posées par maquettes/src ; aucune nouvelle couleur n’est introduite.
   Elles ne touchent à aucun écran maquetté.
   ========================================================================== */

/* ── Activation de la double authentification ────────────────────────────── */
.deuxfa { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; margin: 16px 0; }
.deuxfa__qr { padding: 12px; border-radius: 18px; background: #fff; line-height: 0; }
.deuxfa__qr svg { width: 180px; height: 180px; }

/* ── Codes de secours, affichés une seule fois ───────────────────────────── */
.codes-secours { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 24px; margin-top: 16px; }
.codes-secours code { font: 600 16px/28px "Geist Mono", monospace; letter-spacing: .08em; color: var(--encre); }

/* ── Mot de passe redemandé avant une action sensible ────────────────────
   Replié par défaut : la ligne garde exactement la hauteur de la maquette,
   et le formulaire n’apparaît qu’après un clic sur le bouton. */
.protege__demande { padding: 0 0 16px; }
.protege__demande .champ { margin: 0; }
.protege__demande .actions { margin-top: 12px; }

/* Les filtres du journal sont des liens : même aspect que les boutons. */
.filtres a.btn-filtre { display: inline-flex; align-items: center; }

/* ── Se déconnecter, dans le bloc du profil ──────────────────────────────
   La maquette dessine un lien ; c’est un bouton d’envoi, pour que la
   déconnexion soit un POST signé. Mêmes formes et mêmes couleurs que
   « .cote__profil a » dans maquettes/src/4-espace.css, et le bloc reste un
   formulaire sans changer d’aspect. */
form.cote__profil { margin: 0; }
.cote__profil button {
  margin-left: auto; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  border: 0; padding: 0; background: none; cursor: pointer;
  color: var(--discret);
}
.cote__profil button:hover { background: var(--creme); color: var(--rouge); }

/* --- Console en plein écran ------------------------------------------------
   Le cadre du terminal prend l’écran entier. Son fond est celui que
   xterm.js peint déjà dans la page ; aucune nouvelle couleur. */
.terminal:fullscreen {
  width: 100vw;
  height: 100vh;
  border-radius: 0;
  background: #11131a;
  padding: 12px;
}
.terminal:fullscreen > * { width: 100%; height: 100%; }
.terminal:fullscreen pre { min-height: 0; height: 100%; color: #e7e9ee; }

/* --- Console d’un serveur de jeu, en direct --------------------------------
   La maquette montre une console courte et figée. En direct, elle reçoit
   des milliers de lignes : le cadre garde sa hauteur et défile. */
.terminal--jeu pre {
  max-height: 420px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* --- Éditeur d’un fichier de serveur de jeu -------------------------------
   Le champ reprend celui des formulaires, en chasse fixe : un fichier de
   configuration s’aligne en colonnes, et les espaces y comptent. */
.champ--code textarea {
  min-height: 420px;
  font: 500 13.5px/22px "Geist Mono", ui-monospace, monospace;
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
  tab-size: 4;
}

/* ── Page de statut ──────────────────────────────────────────────────────────
   Aucune maquette ne la dessine. Les formes sont celles des maquettes — carte,
   pastille d’état, liste — et les couleurs sont les variables déjà posées :
   le vert des états « ok », l’abricot de « attente », le rouge de « rouge »,
   le trait pour un jour sans mesure. Rien de nouveau.                        */
.statut__maj { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; color: var(--texte); font-size: 15px; }
.statut__maj .etat { margin-left: 0; }

.statut__liste { display: grid; gap: 16px; margin-top: 24px; }
.statut__service { padding: 22px 24px; }
.statut__tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.statut__tete b { display: block; color: var(--encre); font-size: 17px; line-height: 26px; }
.statut__tete .etat { margin-left: 0; flex: none; }

/* Un jour par barre : la bande se serre d’elle-même quand l’historique
   s’allonge, de trente à quatre-vingt-dix jours selon le plan. */
.statut__barres { display: flex; gap: 2px; margin-top: 16px; }
.statut__jour { flex: 1 1 0; min-width: 2px; height: 30px; border-radius: 3px; background: var(--trait); }
.statut__jour--ok { background: var(--vert); }
.statut__jour--attente { background: var(--abricot); }
.statut__jour--rouge { background: var(--rouge); }
.statut__jour--nu { background: var(--trait); }

.statut__chiffres { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 14px; }
.statut__chiffres b { color: var(--encre); font-size: 16px; }
.statut__chiffres small { display: block; color: var(--discret); font-size: 13px; line-height: 20px; }

@media (max-width: 760px) {
  .statut__jour { height: 22px; }
  .statut__tete { flex-direction: column; }
}

/* ── Lien de parrainage ──────────────────────────────────────────────────────
   Un lien se lit en entier et se copie d’un clic. La forme est celle des
   autres « copiable » de l’espace, étirée sur toute la largeur.            */
.parrainage__lien { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 16px; background: #fff; }
.parrainage__lien code { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font: 600 15px/22px "Geist Mono", monospace; color: var(--encre); }
.parrainage__lien button { flex: none; }

/* ── Prix d’un nom de domaine ────────────────────────────────────────────────
   Beaucoup d’extensions sont remisées la première année et se renouvellent
   bien plus cher. Les deux prix se lisent ensemble, le second en dessous :
   le client ne doit pas découvrir le vrai tarif à son renouvellement.     */
.resultats__prix { display: flex; flex-direction: column; align-items: flex-end; line-height: 20px; }
.resultats__prix small { color: var(--discret); font-size: 12.5px; line-height: 18px; }
.resultats__promo { margin-left: 0; flex: none; }

@media (max-width: 760px) {
  .resultats__prix { align-items: flex-start; }
}