/* La charte de l'OUTIL — portail, ecran K2, tutoriels, FAQ.
 *
 * 🔴 UNE SEULE SOURCE. Ces jetons vivaient en DEUX exemplaires — `tools/portail.py` et
 * `site/app/index.html` — identiques au caractere pres le 11/08/2026. Habiller les
 * tutoriels et la FAQ en recopiant en aurait fait quatre. Elles n'avaient pas encore
 * diverge ; elles auraient diverge.
 *
 * ⚠️ Ce fichier ne porte QUE ce qui sert a plusieurs ecrans. Restent chez eux : la porte,
 * le formulaire et le clap du portail ; la bobine, les outils et l'inspecteur de K2 —
 * 21 612 octets qui ne decrivent qu'un seul ecran.
 *
 * ⚠️ Sur 45 selecteurs au portail et 169 chez K2, SIX seulement sont communs aux deux :
 * body, .ecran, .bandeau et ses trois descendants. `.panneau`, `.ligne` et `.pied`
 * viennent du portail seul ; `.bouton` de K2 seul. Ils sont ici parce que les deux pages
 * neuves en ont besoin — c'est le SECOND consommateur qui justifie l'extraction.
 */

:root {
  --fond:#0E1116; --panneau:#151A21; --panneau-2:#1B212A; --creux:#0A0D11;
  --filet:#252C36; --filet-2:#323A46;
  --encre:#E4E8EE; --sourd:#8B95A3; --eteint:#5B6472;
  --bleu:#2C6FD1; --bleu-vif:#4A8FE7;
  /* ⭐ L'ambre dit « refuse », « en cours », « indisponible » — jamais « reussi ». Il
     vivait chez l'ecran de bobine seul (`.erreur`, `.i-erreur`, la puce d'un outil qui
     tourne). Le squelette d'outil en a besoin pour `.fn-err` : deuxieme consommateur,
     donc il remonte ici. Le vert, lui, n'entre pas dans la charte — decision de Nicolas
     le 17/08 : un outil qui a fini le dit en BLEU, l'accent de la maison. */
  --ambre:#C9891E; --ambre-vif:#E0A33C;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --corps:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

html,body { margin:0; padding:0 }
body {
  min-height:100vh; background:var(--fond); color:var(--encre);
  font-family:var(--corps); font-size:12px; -webkit-font-smoothing:antialiased;
}

.ecran { display:flex; flex-direction:column; min-height:100vh }

.bandeau {
  display:flex; align-items:center; gap:14px; height:56px; flex:0 0 56px;
  padding:0 20px; background:var(--panneau-2); border-bottom:1px solid var(--filet);
}
.bandeau .marque {
  display:flex; align-items:center; gap:11px; font-weight:700;
  font-size:16px; letter-spacing:-.02em; color:var(--encre); text-decoration:none;
}
.bandeau .marque img { width:38px; height:38px; border-radius:9px; display:block }
.bandeau .droite {
  margin-left:auto; display:flex; align-items:center; gap:14px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.09em; color:var(--eteint);
}
.bandeau .droite a { color:var(--eteint); text-decoration:none }
.bandeau .droite a:hover { color:var(--sourd) }
.bandeau .droite [aria-current] { color:var(--encre) }

.panneau {
  width:100%; background:var(--panneau); border:1px solid var(--filet);
  border-radius:6px; overflow:hidden;
}

.ligne {
  display:flex; align-items:center; gap:9px; padding:9px 12px; background:var(--panneau);
  border:1px solid var(--filet); border-radius:6px; font-family:var(--mono);
  font-size:11px; color:var(--sourd); text-decoration:none;
}
.ligne .puce { width:5px; height:5px; border-radius:50%; background:var(--filet-2); flex:0 0 auto }
.ligne b {
  font-weight:400; color:var(--eteint); margin-left:auto; font-size:9.5px;
  letter-spacing:.13em; text-transform:uppercase;
}

.pied {
  display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin:0;
  font-family:var(--mono); font-size:10px; letter-spacing:.08em; color:var(--filet-2);
}
.pied a { color:var(--eteint); text-decoration:none }
.pied a:hover { color:var(--sourd) }

.bouton {
  display:block; width:100%; padding:9px; background:var(--bleu); color:#fff;
  text-align:center; font-size:12.5px; font-weight:600;
  border:1px solid var(--bleu-vif); cursor:pointer;
}
.bouton.creux {
  background:transparent; color:var(--sourd); border-color:var(--filet-2); font-weight:400;
}
.bouton[aria-disabled=true] {
  background:transparent; color:var(--eteint); border-color:var(--filet-2);
  font-weight:400; cursor:default;
}

/* ⚠️ Le portail retrecit sa barre sous 520 px. La regle suit la primitive, sinon elle
   resterait orpheline dans un fichier qui ne porte plus `.bandeau`. */
@media (max-width:520px) { .bandeau { padding:0 12px } }