/*
 * Punchbox — (c) 2026 Alexis Clement. Tous droits reserves.
 * Logiciel proprietaire. Toute reproduction ou diffusion interdite sans
 * autorisation ecrite.
 */

/* architecture.css — feuille DÉDIÉE à /architecture (mission bandeau-unique-
 * et-architecture, 6 septembre 2026). Isolée de style.css : n'affecte aucune
 * autre page. Repose sur les mêmes jetons de charte (--carte, --bordure,
 * --rayon, --texte, --secondaire, --laiton, --discret) que le reste du site.
 */

.archi-intro { max-width: 62ch; color: var(--secondaire); }

/* --------------------------------------------------------------------------
   Les faits — grille de cartes plates (aucun dégradé bombé, charte §pbnav).
   -------------------------------------------------------------------------- */
.archi-faits {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px; margin: 18px 0 2.4rem;
}
.archi-fait {
  border: 1px solid var(--bordure); border-radius: var(--rayon);
  background: var(--carte); padding: 16px 18px;
}
.archi-fait h3 { margin: 0 0 8px; font-size: 1.02rem; font-weight: 700; color: var(--texte); }
.archi-fait p { margin: 0; color: var(--secondaire); font-size: .95rem; }
.archi-fait p + p { margin-top: 8px; }
/* Composition (mission composition-anti-pendouille, 06/09/2026) : 7 cartes
   dans une grille `auto-fit` — à 1920/1366px (3 colonnes) et à 712px
   (2 colonnes), 7 ne se divise pas exactement : la dernière carte reste
   seule sur son rang, colonnes voisines nettement plus courtes, fond de
   page visible dessous (mesuré : écart de 266-314px, vu à l'écran,
   captures-avant/architecture.png). La dernière carte occupe tout le rang
   plutôt que de rester seule dans sa colonne — la grille SE REMPLIT au lieu
   de laisser un rang orphelin. Sans effet quand le compte de cartes tombe
   juste (elle redevient une carte normale) ni en une colonne (mobile). */
.archi-fait:last-child { grid-column: 1 / -1; }

/* --------------------------------------------------------------------------
   Le schéma — le chemin d'une dictée. TOUJOURS empilé verticalement (une
   colonne centrée) : à toute largeur, la lecture reste dans l'ordre, sans
   repli de grille ambigu. AUCUNE topologie : chaque étape nomme une FONCTION
   (navigateur, serveur en UE, moteurs), jamais un conteneur, un port ni un
   nom de machine.
   -------------------------------------------------------------------------- */
.archi-schema {
  list-style: none; margin: 0 auto 2rem; padding: 0; max-width: 420px;
  display: flex; flex-direction: column; align-items: stretch; gap: 4px;
}
.archi-etape {
  border: 1px solid var(--bordure); border-radius: var(--rayon);
  background: var(--carte); padding: 16px 14px; text-align: center;
}
.archi-icone { width: 1.8rem; height: 1.8rem; color: var(--laiton-fonce, var(--laiton)); margin-bottom: 8px; }
.archi-etape-titre { margin: 0 0 4px; font-weight: 700; color: var(--texte); font-size: .98rem; }
.archi-etape-note { margin: 0; color: var(--secondaire); font-size: .85rem; }

.archi-fleche {
  display: flex; flex-direction: row; align-items: center; justify-content: center;
  gap: 8px; color: var(--discret); font-size: .8rem; text-align: center; padding: 6px 4px;
}
.archi-icone-fleche { width: 1.4rem; height: 1.4rem; flex: none; transform: rotate(90deg); }

/* L'étape « moteurs » porte LE point que le fondateur veut visible en un
   coup d'œil : la flèche/appel barré vers une API tierce. Couleur d'alerte
   discrète (jamais rouge criard — charte : sobriété), texte TOUJOURS present
   (jamais l'icône seule). */
.archi-etape-moteurs { border-color: var(--laiton); }
.archi-barre {
  margin: 10px 0 0; padding-top: 10px; border-top: 1px dashed var(--bordure);
  display: flex; align-items: center; justify-content: center; gap: 6px;
  color: var(--laiton-fonce, var(--laiton)); font-size: .82rem; font-weight: 600;
}
.archi-icone-barre { width: 1.2rem; height: 1.2rem; flex: none; }