/* Extension vitrine de la charte look-homelab.
 *
 * theme.css porte les jetons, le fond, la police, l'anneau de focus et la
 * neutralisation des animations. Ce fichier n'ajoute QUE ce qu'une page
 * vitrine demande et qu'une application n'a pas : un premier ecran, un
 * selecteur de plateforme, une matrice d'etats, un inventaire.
 *
 * Aucune couleur litterale ici : la palette est celle de theme.css, et une
 * teinte ecrite en dur echapperait au controle de la charte.
 */

/* La charte reserve 3.5rem en bas pour son pied de raccourcis FIXE. Cette page
   n'en a pas -- son pied suit le flux -- et la reserve laisserait un vide. */
body { padding-bottom: 0; }

/* ---- Surfaces du navigateur ------------------------------------------------
 * Ce que l'on ne dessine pas porte quand meme le theme. Laissees par defaut,
 * ces quatre surfaces arrivent en bleu Windows ou en gris Chrome et trahissent
 * une page assemblee plutot que construite. */
::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--texte); }
html { scrollbar-color: var(--bord) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--bord); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--neutre); }
::-webkit-scrollbar-track { background: transparent; }
a { text-underline-offset: 0.2em; }

/* ---- Ossature -------------------------------------------------------------- */
.page { max-width: 68rem; margin: 0 auto; padding: 0 1.5rem; }
.bande { padding: 4.5rem 0; border-top: 1px solid var(--filet); }
.bande:first-of-type { border-top: 0; }
.bande > h2 {
  margin: 0 0 0.75rem; font-size: 1.6rem; font-weight: 650;
  letter-spacing: -0.02em; text-wrap: balance;
}
/* Mesure de lecture : au-dela de ~72 caracteres l'oeil perd la ligne suivante. */
.prose { max-width: 68ch; color: var(--texte-doux); }
.prose strong { color: var(--texte); font-weight: 600; }

/* ---- Premier ecran --------------------------------------------------------- */
.socle { padding: 5rem 0 3.5rem; }
.marque {
  margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(2.75rem, 9vw, 4.5rem); font-weight: 600;
  letter-spacing: -0.045em; line-height: 1; color: var(--texte);
}
/* La barre clignotante derriere le nom : le depot est un outil de terminal, et
   c'est la seule licence poetique de la page. Elle s'arrete pour qui a
   desactive le mouvement (theme.css neutralise l'animation). */
.marque::after {
  content: ""; display: inline-block; width: 0.5ch; height: 0.82em;
  margin-left: 0.18em; vertical-align: -0.06em;
  background: var(--accent); animation: battement 1.4s steps(2, jump-none) infinite;
}
@keyframes battement { 0%, 45% { opacity: 1; } 55%, 100% { opacity: 0.18; } }

.accroche {
  max-width: 56ch; margin: 1.5rem 0 0;
  font-size: 1.25rem; line-height: 1.55; color: var(--texte-doux);
  text-wrap: pretty;
}
.accroche strong { color: var(--texte); font-weight: 600; }

/* ---- Bloc d'installation --------------------------------------------------- */
.installe {
  margin-top: 2.5rem;
  background: var(--fond-eleve); border: 1px solid var(--bord);
  border-radius: var(--rayon); backdrop-filter: blur(14px);
  /* Aucune ombre : la profondeur vient de la matiere translucide, jamais d'un
     eclairage simule. Regle heritee de la table lumineuse. */
}
.plateformes {
  display: flex; gap: 0.25rem; padding: 0.5rem 0.5rem 0;
  border-bottom: 1px solid var(--filet);
  /* overflow-y explicite : `overflow-x: auto` seul implique `overflow-y: auto`,
     et le trait actif pose a `bottom: -1px` suffit a creer 1px de debordement
     vertical -- assez pour faire apparaitre une barre de defilement de 10px sur
     toute la hauteur du bloc. Mesure : scrollHeight 57 pour clientHeight 56. */
  overflow-x: auto; overflow-y: hidden;
}
.plateforme {
  appearance: none; background: none; border: 0; cursor: pointer;
  padding: 0.7rem 1rem 0.85rem; border-radius: 6px 6px 0 0;
  font: inherit; font-size: 0.95rem; font-weight: 550; white-space: nowrap;
  color: var(--texte-doux); position: relative;
  transition: color 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.plateforme:hover { color: var(--texte); }
.plateforme[aria-selected="true"] { color: var(--texte); }
/* Le trait actif est un pseudo-element anime, pas une bordure : une bordure
   sauterait d'un onglet a l'autre au lieu de glisser. */
.plateforme[aria-selected="true"]::after {
  content: ""; position: absolute; inset: auto 0.6rem -1px;
  height: 2px; background: var(--accent); border-radius: 2px 2px 0 0;
}
.plateforme .marqueur {
  display: inline-block; margin-left: 0.5rem; padding: 0.05rem 0.4rem;
  border: 1px solid var(--bord); border-radius: 999px;
  /* 0.72rem = 11.52px : sous 11px, un libelle fonctionnel devient illisible
     pour une partie des lecteurs. Mesure du detecteur : 10.88px avant. */
  font-size: 0.72rem; letter-spacing: 0.04em; color: var(--texte-doux);
  vertical-align: 0.08em;
}
.plateforme[data-etat="direct"] .marqueur { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }

.panneau { padding: 1.25rem; }
.panneau[hidden] { display: none; }
/* L'unique moment anime de la page : le panneau de commande entre en sortie
   exponentielle quand on change de plateforme. Rien d'autre ne bouge. */
.panneau:not([hidden]) { animation: entree 260ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes entree { from { opacity: 0; transform: translateY(4px); } }

.etape { margin: 0 0 0.45rem; font-size: 0.8rem; letter-spacing: 0.08em;
         text-transform: uppercase; color: var(--texte-doux); }
.etape + .commande { margin-bottom: 1.1rem; }

.commande {
  display: flex; align-items: flex-start; gap: 0.75rem;
  background: var(--fond-profond); border: 1px solid var(--bord);
  border-radius: 8px; padding: 0.85rem 0.85rem 0.85rem 1rem;
}
.commande code {
  flex: 1; min-width: 0; overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88rem; line-height: 1.6; color: var(--texte);
  white-space: pre; scrollbar-width: thin; overflow-y: hidden;
}
.commande code .invite { color: var(--neutre); user-select: none; }
.commande code .drapeau { color: var(--accent); }

.copier {
  flex: none; appearance: none; cursor: pointer;
  background: none; border: 1px solid var(--bord); border-radius: 6px;
  padding: 0.3rem 0.6rem; font: inherit; font-size: 0.78rem;
  color: var(--texte-doux);
  transition: color 160ms ease, border-color 160ms ease;
}
.copier:hover { color: var(--texte); border-color: var(--neutre); }
.copier[data-copie="oui"] { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.copier:where(:not([hidden])) { display: block; }

.prealable { margin: 0 0 1.1rem; font-size: 0.88rem; color: var(--texte-doux); }
.prealable code { color: var(--texte); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* Ces quatre regles remplacent des attributs style="" retires du HTML : la CSP
   du vhost est `default-src 'self'; style-src 'self'`, qui depouille tout style
   inline SANS le moindre message -- la page s'affiche, simplement de travers. */
.prealable-suite { margin-top: 0.9rem; margin-bottom: 0; }
.prose-suite { margin-top: 1.25rem; }
.axe-note { margin: 0; font-size: 0.88rem; color: var(--texte-doux); }
.axe-note strong { color: var(--texte); }

/* ---- Faits sous le premier ecran ------------------------------------------- */
.faits {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem;
  margin: 1.5rem 0 0; padding: 0; list-style: none;
  font-size: 0.88rem; color: var(--texte-doux);
}
.faits b { color: var(--texte); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---- Mecanisme : composition asymetrique, pas une grille de cartes --------- */
.tete-mecanisme { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 60rem) { .tete-mecanisme { grid-template-columns: 1.05fr 1fr; gap: 3rem; } }

.affirmation {
  margin: 0; font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 600;
  line-height: 1.25; letter-spacing: -0.025em; color: var(--texte);
  text-wrap: balance;
}
.affirmation code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.86em; color: var(--accent);
}

/* La matrice des deux axes : c'est le mecanisme du depot, donc du CONTENU.
   Chaque etat porte son mot ; la teinte ne fait que le confirmer. */
.matrice { border: 1px solid var(--bord); border-radius: var(--rayon); overflow: hidden;
           background: var(--fond-eleve); backdrop-filter: blur(14px); }
.axe { padding: 1rem 1.1rem; }
.axe + .axe { border-top: 1px solid var(--filet); }
.axe h3 { margin: 0 0 0.15rem; font-size: 0.78rem; letter-spacing: 0.1em;
          text-transform: uppercase; color: var(--texte-doux); font-weight: 600; }
.axe p { margin: 0 0 0.7rem; font-size: 0.88rem; color: var(--texte-doux); }
.etats { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.etat-jeton {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem; padding: 0.2rem 0.55rem; border-radius: 999px;
  border: 1px solid var(--bord); color: var(--texte-doux);
}
.etat-jeton[data-ton="ok"]        { color: var(--ok);        border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.etat-jeton[data-ton="attention"] { color: var(--attention); border-color: color-mix(in srgb, var(--attention) 40%, transparent); }
.etat-jeton[data-ton="alerte"]    { color: var(--alerte);    border-color: color-mix(in srgb, var(--alerte) 40%, transparent); }
.etat-jeton[data-ton="neutre"]    { color: var(--neutre);    border-color: color-mix(in srgb, var(--neutre) 40%, transparent); }

/* Les traits suivants sont une LISTE DE DEFINITIONS, pas des cartes : ils n'ont
   ni le meme poids ni la meme longueur, et un gabarit uniforme le nierait. */
.traits { margin: 3rem 0 0; display: grid; gap: 1.75rem; }
@media (min-width: 48rem) { .traits { grid-template-columns: repeat(2, 1fr); gap: 2rem 3rem; } }
.trait h3 { margin: 0 0 0.35rem; font-size: 1rem; font-weight: 600; color: var(--texte); }
.trait p { margin: 0; font-size: 0.92rem; line-height: 1.6; color: var(--texte-doux); max-width: 46ch; }
.trait code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
              font-size: 0.88em; color: var(--texte); }

/* ---- Schema ---------------------------------------------------------------- */
.schema-cadre {
  margin-top: 1.75rem; border: 1px solid var(--bord); border-radius: var(--rayon);
  overflow: hidden; background: var(--fond-profond);
}
.schema-cadre iframe { display: block; width: 100%; height: 32rem; border: 0; }
@media (max-width: 48rem) { .schema-cadre iframe { height: 24rem; } }
.schema-pied { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: baseline;
               margin-top: 0.75rem; font-size: 0.85rem; color: var(--texte-doux); }

/* ---- Inventaire ------------------------------------------------------------ */
.inventaire { width: 100%; border-collapse: collapse; margin-top: 1.5rem; font-size: 0.9rem; }
.inventaire caption { text-align: left; color: var(--texte-doux); font-size: 0.88rem;
                      padding-bottom: 0.75rem; }
.inventaire th {
  text-align: left; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--texte-doux); font-weight: 600; padding: 0 0.75rem 0.6rem 0;
  border-bottom: 1px solid var(--bord);
}
.inventaire td { padding: 0.6rem 0.75rem 0.6rem 0; border-bottom: 1px solid var(--filet);
                 vertical-align: baseline; color: var(--texte-doux); }
.inventaire tr:last-child td { border-bottom: 0; }
.inventaire .nom { color: var(--texte); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
                   font-size: 0.86rem; white-space: nowrap; }
/* Les deux colonnes de comptes se comparent d'une ligne a l'autre : chasse fixe. */
.inventaire .compte { font-variant-numeric: tabular-nums; text-align: right;
                      white-space: nowrap; padding-right: 1.25rem; }
.inventaire .desc { min-width: 18rem; }
@media (max-width: 52rem) {
  .inventaire .desc, .inventaire th.desc { display: none; }
}

/* Un tableau large defile DANS SON PROPRE conteneur, jamais en poussant la
   page : mesure a 390 px, l'inventaire debordait le document de 28 px et
   faisait defiler tout le corps lateralement. tabindex le rend atteignable au
   clavier -- une zone qui defile et que le clavier ne peut pas atteindre est
   inaccessible. */
.defilable { overflow-x: auto; overscroll-behavior-x: contain; }
.defilable:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.defilable .inventaire { min-width: 34rem; }

/* ---- Pied ------------------------------------------------------------------ */
.pied { border-top: 1px solid var(--filet); padding: 2.5rem 0 3.5rem;
        display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; align-items: baseline;
        font-size: 0.88rem; color: var(--texte-doux); }
.pied nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }