/* Copyright (c) 2026 LB IT Cloud SAS. All rights reserved.
   Proprietary source of the LB IT Cloud website. See LICENSE.

   La page Meti — et UNIQUEMENT ce que le bundle de présentation ne sait pas dire.

   `presentation-format.css` dessine tout le reste — la couverture, les cartes, les badges,
   les grilles — et `presentation-theme.css` le passe aux couleurs, aux polices et aux coins
   taillés du site, comme sur Entris et eXact. Ce fichier ne porte que deux choses qu'aucune
   autre page de présentation n'a : les chiffres de la couverture et le comparatif de dérive.
   Les deux sont écrits avec les jetons de theme.css (--ink, --line, --a1…), jamais avec une
   couleur en dur, pour suivre la palette et le thème choisis dans l'en-tête.

   POURQUOI UNE VRAIE TABLE ET PAS UNE CAPTURE. Le dépôt Meti ne contient aucune
   capture d'écran, et c'est une chance : une comparaison champ par champ se rend mieux
   en HTML qu'en image. Elle reste nette à toute taille, se lit par un lecteur d'écran,
   suit le thème clair comme le sombre, et se traduit avec le reste de la page. Une
   capture n'aurait fait aucune de ces quatre choses. */

/* LES CHIFFRES DE LA COUVERTURE — `.facts` / `.fact` comme site.css les dessine sur l'accueil et
   la page À propos, recopiés ici parce que site.css n'est pas chargé sur une page de présentation
   (il réécrirait `body`, `section` et les titres que le bundle dessine). Sans eux, les quatre
   chiffres tombaient en texte brut, collés les uns aux autres. Alignés à gauche, comme la
   couverture depuis le 11/10/2026 — et comme sur l'accueil. */
.facts { display: flex; gap: 40px; flex-wrap: wrap; margin-top: 56px; }
.fact b {
  display: block; font-family: var(--display); font-size: 30px; font-weight: 760; font-stretch: 72%;
  color: var(--a1); font-variant-numeric: tabular-nums;
}
.facts .fact:nth-child(4n+2) b { color: var(--a2); }
.facts .fact:nth-child(4n+3) b { color: var(--a3); }
.facts .fact:nth-child(4n+4) b { color: var(--a4); }
.fact span { font-size: 13.5px; color: var(--ink-2); }

/* LA MARQUE DE CHAQUE CARTE — `.card .ico` de site.css, recopié ici pour la même raison
   que les chiffres juste au-dessus : site.css n'est pas chargé sur une page de présentation.
   Un carré OUVERT, jamais une pastille derrière le dessin ; l'ombre portée intérieure tient
   lieu de filet pour qu'il ne compte pas dans la boîte, exactement comme sur l'accueil.

   L'ACCENT TOURNE PAR POSITION, et c'est pour cela qu'aucune carte ne porte de classe de
   couleur : une rangée se colore toute seule, et insérer une carte au milieu ne demande pas
   de retoucher les suivantes. La même cadence 4n que le bandeau de chiffres, pour que les
   deux se répondent en descendant la page. */
.bento-card .ico, .ob .ico, .sp .ico {
  width: 38px; height: 38px; color: var(--touch);
  box-shadow: inset 0 0 0 1.5px currentColor;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px; flex: none;
}
/* Toutes en orange depuis le 12/10/2026 : le site est bicolore, et les icônes portent la marque. */

/* ---------------------------------------------------------------------------
   LES DEUX RELEVÉS — « resserre Le constat et le socle technique », Clément, 11/10/2026.

   Le diagnostic est posé avant que la page ne montre quoi que ce soit, et les prérequis
   le sont après que tout a été montré : ni l'un ni l'autre n'est ce qu'on vient chercher.
   Ils occupaient pourtant la même forme que les trois sections qui, elles, portent le
   produit — quatre grilles de cartes à la file, qui de loin se ressemblent toutes.

   La réponse n'est pas de couper du texte jusqu'à ce que ce soit court : c'est de CHANGER
   LA FORME. Un constat se lit en relevé, une liste de prérequis se lit en fiche. Les deux
   gardent leur h3 et leur p, dans cet ordre — c'est ce que deck-export.js lit pour fabriquer
   ses puces, et l'export sort donc exactement les mêmes diapositives qu'avant.
   --------------------------------------------------------------------------- */

/* LE CONSTAT. Deux colonnes, la marque en vis-à-vis du titre et la phrase sous les deux :
   le regard descend les quatre titres sans traverser les explications. */
.obs { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 46px; max-width: 1060px; margin: 0 auto; }
.ob { display: grid; grid-template-columns: 38px 1fr; column-gap: 16px; align-items: center; }
.ob .ico { margin-bottom: 0; }
.ob h3 { margin: 0; font-size: 16.5px; font-weight: 650; line-height: 1.3; color: var(--ink); }
.ob p { grid-column: 2; margin: 9px 0 0; font-size: 14.5px; line-height: 1.62; color: var(--ink-2); }

/* LE SOCLE. Une fiche : la marque, le sujet dans la chasse des références, le fait en face.
   Les filets font le travail que faisait le fond des cartes, pour un sixième de la hauteur. */
.spec { max-width: 1060px; margin: 0 auto; border-top: 1px solid var(--line); }
.sp {
  display: grid; grid-template-columns: 38px 232px 1fr; column-gap: 20px;
  align-items: start; padding: 20px 0; border-bottom: 1px solid var(--line);
}
.sp .ico { width: 34px; height: 34px; margin-bottom: 0; }
.sp h3 {
  margin: 0; font: 500 13px/1.45 var(--mono); font-stretch: 87.5%;
  letter-spacing: .01em; color: var(--ink); padding-top: 4px;
}
.sp p { margin: 0; font-size: 14.5px; line-height: 1.62; color: var(--ink-2); padding-top: 3px; }

@media (max-width: 860px) {
  .obs { grid-template-columns: 1fr; gap: 26px; }
  .sp { grid-template-columns: 34px 1fr; row-gap: 7px; }
  .sp p { grid-column: 2; }
}

/* L'INDEX DES CHANTIERS, sous les chiffres de la couverture. Une liste de NOMS, pas de
   phrases : « GPO → CSP » se reconnaît d'un coup d'œil par quelqu'un qui a le problème, là où
   « migration des stratégies de groupe » demande une lecture. Chaque étiquette porte exactement
   le titre de la carte qui la développe plus bas, pour que le scan et la lecture se répondent.

   Des étiquettes, donc, et pas des pastilles : la direction « Signalétique » les a retirées du
   site entier (presentation-theme.css remet à zéro tout ce que `rounded-full` arrondissait).
   Carrées, un filet, la chasse des références — c'est le repère sur un plan, pas un bouton. */
.caps {
  list-style: none; margin: 34px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
  max-width: 960px;
}
.caps li {
  font: 500 12px/1.3 var(--mono); font-stretch: 87.5%; letter-spacing: .01em;
  color: var(--ink-2); background: var(--panel);
  border: 1px solid var(--line); padding: 7px 12px;
  white-space: nowrap;
}
/* Les quatre migrations portent l'accent : ce sont les chantiers, le reste est ce qu'on lit
   en chemin. Par position, comme le bandeau de chiffres juste au-dessus. */
.caps li:nth-child(-n+4) { color: var(--a1); border-color: var(--a1); background: var(--a1-soft); }

/* LE COMPARATIF DE DÉRIVE — le tableau de Knowledge (.kbtable) : l'aplat du panneau, un filet,
   l'en-tête dans la chasse des références sur le second fond. */
.drift {
  width: 100%; border-collapse: collapse; font-size: 14px; font-family: var(--body);
  background: var(--panel); border: 1px solid var(--line);
}
.drift th {
  text-align: left; padding: 11px 16px;
  font: 500 10.5px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-2); background: var(--ground-2); border-bottom: 1px solid var(--line); white-space: nowrap;
}
.drift td {
  padding: 12px 16px; border-bottom: 1px solid var(--line);
  color: var(--ink-2); vertical-align: top;
}
.drift tr:last-child td { border-bottom: 0; }

/* Le nom du champ : c'est une clé d'API, donc en chasse fixe — displayName et
   installCommandLine se lisent comme du code parce qu'ils en sont. */
.drift td.k {
  font: 500 12.5px/1.5 var(--mono); font-stretch: 87.5%; color: var(--ink); white-space: nowrap;
}

/* La valeur SORTANTE est en retrait — c'est celle qu'on remplace. L'ENTRANTE porte
   l'accent de la palette et la flèche. Le sens de lecture est donc donné par la couleur
   avant de l'être par l'en-tête de colonne, ce qui compte sur une table qu'on parcourt. */
.drift td.out { color: var(--ink-3); }
.drift td.in { color: var(--a1); font-weight: 600; }
.drift td.in::before { content: "→ "; opacity: .55; font-weight: 400; }

@media (max-width: 760px) {
  .drift td.k { white-space: normal; overflow-wrap: anywhere; }
  .drift { font-size: 13px; }
  .facts { gap: 28px; }
  .caps { gap: 6px; }
  .caps li { font-size: 11.5px; padding: 6px 10px; white-space: normal; }
}