/* ============================================================
 * refonte-fiches.css — LOT 4 (05/09/2026)
 * Chantier « livraison site premium kairos-agency.ch ».
 *
 * Composants pour DESIGN.md §7.4 (bloc de preuve), §7.5 (capture
 * de travail), §7.6 (processus d'automatisation), §7.9 (bloc
 * d'incarnation sans portrait), et la grille de cas de /reference/
 * (§14.3). Sert les pages : automatisation IA, réalisations +
 * fiches, agence, prix, locales.
 *
 * Chargé par inc/refonte-loader.php avec garde file_exists()
 * (ligne ~65) : ce fichier peut être déployé seul sans casser le
 * reste si sa pose échoue. Dépend de refonte-2026.css pour les
 * tokens (--panel, --edge, --edge-fort, --gold, --ivory, --muted,
 * --rule2, --night) : chargé après lui par le loader.
 *
 * N'édite ni refonte-2026.css ni refonte-sections.css : les
 * classes qui y vivent déjà (.fiche, .gar, .maison, .puces, .card,
 * .btn, .cas-list, .faq) sont réutilisées telles quelles dans les
 * pages de ce lot, pas redéfinies ici.
 * ============================================================ */

/* ── Étiquette de nature : DESIGN §7.6, obligatoire sur tout
   schéma ou tout enchaînement présenté. Un scénario présenté
   comme une réalisation est un mensonge : l'étiquette se lit dans
   le composant, jamais en note de bas de page. ──────────────── */
.etq{display:inline-flex;align-items:center;gap:7px;font-family:'JetBrains Mono','JetBrains Mono Repli',ui-monospace,monospace;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:5px 12px;border-radius:999px;border:1px solid var(--edge-fort);
  line-height:1;white-space:nowrap}
.etq-schema{color:var(--muted2)}
.etq-prod{color:var(--gold);border-color:rgba(217,193,135,.5);background:rgba(217,193,135,.08)}
.etq-prod::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none}
.etq-demo{color:var(--muted);border-color:var(--edge)}

/* ── Capture de travail : DESIGN §7.5 ─────────────────────────
   Cadre + barre de repère optionnelle + légende obligatoire sous
   l'image. aspect-ratio est posé en style inline par gabarit,
   1 par asset, pour ne pas décaler la page avant chargement. ── */
.capture{border:1px solid var(--edge-fort);border-radius:3px;overflow:hidden;background:var(--panel)}
.capture-barre{display:flex;align-items:center;justify-content:space-between;height:34px;padding:0 16px;border-bottom:1px solid var(--rule2)}
.capture-points{display:flex;gap:6px}
.capture-points span{width:7px;height:7px;border-radius:50%;background:var(--edge);display:block}
.capture-repere{font-family:'JetBrains Mono','JetBrains Mono Repli',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted2)}
.capture picture,.capture img{display:block;width:100%;height:auto}
.capture figcaption{padding:14px 18px;font-size:13px;line-height:1.55;color:var(--muted);border-top:1px solid var(--rule2)}

/* Cadre pour un schéma SVG inline ou une image de schéma (fond
   panel, respiration autour, légende identique à .capture). */
.capture-schema{padding:24px 22px 6px}
.capture-schema svg,.capture-schema img{display:block;width:100%;height:auto;max-width:640px;margin:0 auto}

/* ── Bloc processus, 5 temps : DESIGN §7.6 ────────────────────
   Horizontal ≥ 960px (grille 5 colonnes, comme .anat déjà en
   place sur les pages d'offre), vertical en dessous avec filet de
   liaison à gauche. Le temps de validation humaine porte
   .proc5-validation, fond or 13%, contour interne or — même
   traitement que .anat .cle déjà en production. ────────────── */
.proc5{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border:1px solid var(--edge);border-radius:3px;overflow:hidden}
.proc5-etape{padding:24px 20px;border-right:1px solid var(--edge);background:linear-gradient(170deg,var(--panel),rgba(8,26,45,.5));
  display:flex;flex-direction:column;gap:11px}
.proc5-etape:last-child{border-right:none}
.proc5-num{font-family:'JetBrains Mono','JetBrains Mono Repli',monospace;font-size:12px;letter-spacing:.12em;color:var(--gold2)}
.proc5-etape h3{font-size:15.5px;font-weight:600;letter-spacing:-.008em;line-height:1.28;margin:0}
.proc5-champ .k{display:block;font-family:'JetBrains Mono','JetBrains Mono Repli',monospace;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted2);margin-bottom:3px}
.proc5-champ p{color:var(--muted);font-size:13px;line-height:1.5;margin:0}
.proc5-etape.proc5-validation{background:linear-gradient(170deg,rgba(217,193,135,.13),rgba(217,193,135,.03));
  box-shadow:inset 0 0 0 1px rgba(217,193,135,.4)}
.proc5-validation .proc5-num{color:var(--gold)}
.proc5-validation .k{color:var(--gold)}
.proc5-validation p{color:var(--ivory)}
@media (max-width:960px){
  .proc5{grid-template-columns:1fr;position:relative}
  .proc5-etape{border-right:none;border-bottom:1px solid var(--edge);padding-left:32px;position:relative}
  .proc5-etape:last-child{border-bottom:none}
  .proc5-etape::before{content:"";position:absolute;left:14px;top:0;bottom:0;width:1px;background:var(--rule);z-index:0}
  .proc5-num,.proc5-etape h3,.proc5-champ{position:relative;z-index:1}
}

/* ── Grille de cas : /reference/, DESIGN §14.3 ────────────────
   Deux colonnes ≥ 960px, une carte par écran en dessous. Chaque
   carte porte capture, secteur/période, résultat avec son unité. */
.cas-grille{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.cas-carte{border:1px solid var(--edge-fort);border-radius:3px;overflow:hidden;background:var(--panel);
  display:flex;flex-direction:column;text-decoration:none;transition:border-color .28s}
.cas-carte:hover{border-color:rgba(217,193,135,.55)}
.cas-carte img{display:block;width:100%;height:auto}
.cas-carte-corps{padding:22px 24px 24px;display:flex;flex-direction:column;gap:9px;flex:1}
.cas-carte .sect{font-family:'JetBrains Mono','JetBrains Mono Repli',monospace;font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold2)}
.cas-carte h3{font-size:22px;font-weight:600;letter-spacing:-.01em;color:var(--ivory);margin:0}
.cas-carte .periode{font-size:13px;color:var(--muted2);margin:0}
.cas-carte .chiffre{font-size:27px;font-weight:600;color:var(--gold);margin-top:auto;padding-top:12px;border-top:1px dashed var(--rule)}
.cas-carte .lien-carte{margin-top:2px;font-size:14px;color:var(--gold);display:inline-flex;align-items:center;gap:8px}
.cas-carte .lien-carte svg{width:15px;height:15px;transition:transform .25s}
.cas-carte:hover .lien-carte svg{transform:translateX(4px)}
@media (max-width:960px){.cas-grille{grid-template-columns:1fr}}

/* ── Bloc d'incarnation sans portrait : DESIGN §7.9 / §14.4 ───
   Tant qu'aucune photographie n'est disponible et autorisée : nom,
   rôle, ancienneté, façon de travailler, sans disque d'initiales
   ni personne synthétique. Le vide graphique est assumé. ────── */
.incarnation{border:1px solid var(--edge);border-radius:3px;padding:32px;background:linear-gradient(160deg,var(--panel),transparent);
  display:flex;flex-direction:column;gap:6px}
.incarnation h4{font-size:20px;font-weight:600;margin:0}
.incarnation .role{font-family:'JetBrains Mono','JetBrains Mono Repli',monospace;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold2)}
.incarnation dl{display:flex;flex-direction:column;gap:9px;margin:16px 0 0;padding-top:16px;border-top:1px solid var(--rule2)}
.incarnation dl div{display:flex;gap:10px;font-size:14px;line-height:1.5;margin:0}
.incarnation dt{color:var(--muted2);flex:none;width:112px}
.incarnation dd{color:var(--ivory);margin:0}
.incarnation p{color:var(--muted);font-size:14.5px;line-height:1.62;margin:16px 0 0}

/* ── Correctif systémique : le marqueur .deux-col ne collapse
   jamais sous 720px ────────────────────────────────────────────
   Trouvé en recette de ce lot (Browser pane, 375px, bloc
   d'incarnation de /lagence/) : .deux-col est un marqueur sans
   aucune règle CSS propre (grep confirmé sur refonte-2026.css et
   refonte-sections.css, 0 occurrence) — chaque gabarit pose sa
   grille en style inline (`grid-template-columns:...`) et ce
   marqueur sert seulement à le signaler visuellement dans le
   code. Une grille à 2 colonnes qui ne s'effondre jamais tronque
   du texte à 375px (constaté ici : « Façon de travailler » coupé
   en bord d'écran), le même défaut que la matrice mobile de
   DESIGN §7.3 (M6) sur un composant différent.
   Ce fichier est chargé par le loader sur TOUTES les pages du
   gabarit refonte (garde file_exists, pas de portée par page) :
   la correction ci-dessous s'applique donc aussi aux grilles
   .deux-col posées par d'autres lots (accueil/expertises L3,
   pages d'offre existantes), pas seulement aux 12 fichiers de ce
   lot. C'est le correctif systémique visé par le mandat plutôt
   qu'une rustine locale à mes seuls gabarits — mais il touche un
   périmètre partagé : signalé explicitement au chef de projet et
   au bêta testeur dans L4-RAPPORT.md pour contrôle croisé.
   !important nécessaire : un style inline gagne sur toute règle
   de feuille externe sauf une règle !important — ce n'est pas un
   contournement de dépannage, c'est le seul mécanisme CSS valide
   pour qu'une media query prenne le dessus sur un attribut style
   posé gabarit par gabarit. */
@media (max-width:720px){
  .deux-col{grid-template-columns:1fr !important}
}

/* Finition D2 : étapes autonomes, aucune hauteur étirée à celle du voisin. */
.proc5{align-items:start;gap:16px;border:0;border-radius:0;overflow:visible}
.proc5 > .proc5-etape,.proc5 > .proc5-etape:last-child{min-height:0;border:1px solid var(--edge);border-radius:3px}