/* Bloc « Fonctions » des pages champ — grille de cartes.

   Avant : sept lignes empilées, une vignette de 76×44 collée à gauche de chaque texte.
   Format « tableau de spécifications » — juste, mais tout y avait le même poids, et le
   lecteur qui descend la page n'y trouvait aucun relief : la fonction qui fait la
   différence se lisait comme la septième.

   Après : une grille asymétrique de six colonnes. La taille de la carte EST la
   hiérarchie — on voit ce qui compte avant de le lire. Et le visuel passe devant : à
   300 px de large un schéma raconte, à 76 px il décore.

   Pourquoi SIX colonnes : c'est le plus petit nombre qui se divise à la fois en 1, 2 et
   3 parts égales. Une carte pleine largeur (6), deux moyennes (3+3) et trois petites
   (2+2+2) tombent donc juste, sans colonne orpheline ni fraction de pixel.

   Deux fonds : le bloc vit aujourd'hui sur bande sombre, mais l'alternance des bandes
   peut le faire passer sur la bande claire. Toutes les teintes — y compris celles des
   schémas SVG — passent par des variables redéfinies sous `.band-light`. C'est aussi la
   raison pour laquelle les SVG portent des CLASSES et non des couleurs en dur. */

.cards{
  /* — surfaces — */
  --card-bg:linear-gradient(180deg,rgba(27,43,65,.42),rgba(12,24,37,.42));
  --card-line:var(--rule);
  --card-line-hi:var(--rule-hi);
  --card-viz-bg:rgba(165,184,208,.035);
  --card-ink:#F7F6F4;
  --card-key:rgba(165,184,208,.78);
  --card-txt:#CFD0D4;
  /* — grammaire des schémas : GRIS = l'état, BORDEAUX = ce que la fonction change — */
  --vz-line:rgba(165,184,208,.44);
  --vz-line-2:rgba(165,184,208,.72);
  --vz-gwash:rgba(165,184,208,.13);
  --vz-acc:#C0455E;
  --vz-wash:rgba(192,69,94,.17);
  --vz-paper:rgba(165,184,208,.055);
  /* fond des cercles évidés : doit coller au fond de la carte pour que le trou soit
     un trou. Valeur mesurée du dégradé de carte posé sur la bande sombre. */
  --vz-hole:#152433;

  list-style:none;
  display:grid;
  /* minmax(0,1fr) et non 1fr : sans le 0, une carte au contenu large (tableau, texte
     long, SVG) impose son minimum intrinsèque à la colonne et fait déborder la page. */
  grid-template-columns:repeat(6,minmax(0,1fr));
  /* Retour Maxime 03/08 : « plus espace ». L'ecart entre cartes passe de 20 a 30 px au
     maximum, ce qui detache chaque dessin de son voisin au lieu de les faire cohabiter.
     Depuis le retrait des boîtes (18/08), l'écart VERTICAL est le seul séparateur entre
     deux rangées : il double, sinon le filet de tête d'une rangée se lit comme le pied
     de la rangée précédente. L'écart horizontal, lui, reste tenu par les colonnes. */
  gap:clamp(40px,4.4vw,66px) clamp(24px,2.6vw,40px);
}

.band-light .cards{
  --card-bg:linear-gradient(180deg,rgba(255,255,255,.74),rgba(255,255,255,.44));
  --card-line:var(--rule);
  --card-line-hi:var(--rule-hi);
  --card-viz-bg:rgba(11,27,39,.028);
  --card-ink:#0B1B27;
  /* .5 mesuré à 3,13:1 sur la bande claire, sous le seuil AA de 4,5. La valeur
     n'avait jamais été exercée : les cartes n'étaient servies qu'en bande sombre
     avant le passage des pages produit en clair (18/08). .72 mesure 6,1:1. */
  --card-key:rgba(11,27,39,.72);
  --card-txt:#3D5168;
  /* Ces valeurs avaient été réglées sur un fond de carte (un blanc à 74 %). Le dessin est
     désormais posé à même la bande et n'a plus de cadre pour le désigner : c'est son trait
     qui doit tenir seul. Mesuré sur la bande papier : .32 donnait 2,06:1, sous le seuil de
     3:1 que WCAG demande à un élément graphique porteur de sens ; .50 donne 3,30:1.
     Les schémas sont marqués aria-hidden, donc formellement hors critère — mais ils
     portent la démonstration à l'écran, et 2:1 était pâle pour un œil comme pour une norme. */
  --vz-line:rgba(11,27,39,.5);
  --vz-line-2:rgba(11,27,39,.72);
  --vz-gwash:rgba(11,27,39,.07);
  --vz-acc:#63001F;
  --vz-wash:rgba(99,0,31,.1);
  /* la maquette d'interface de la carte d'ouverture : c'est un écran, il doit se lire
     comme un objet blanc posé sur la bande, pas comme un voile gris de plus */
  --vz-paper:rgba(255,255,255,.92);
  /* le trou vaut le fond : sur la bande acier, c'est --light ; la bande papier a sa
     propre règle juste en dessous. Cette valeur était figée à #F4F7FB, c'est-à-dire au
     fond de carte d'avant — les cartes n'en ont plus. */
  --vz-hole:var(--light);
}
/* Le trou doit valoir EXACTEMENT le fond sur lequel il est posé. Depuis le retrait des
   fonds de carte, ce fond est la bande elle-même : sur la bande papier, c'est --paper-top. */
.band-paper .cards{--vz-hole:var(--paper-top)}

/* ═══════════ La carte ═══════════════════════════════════════════════════════════════ */
/* ── La carte n'est plus une boîte (18/08) ──────────────────────────────────────────
   Mesuré avant : fond blanc à 74 % posé sur la bande claire, soit deux surfaces
   pratiquement de même valeur. Les sept rectangles ne se détachaient donc pas du fond,
   et comme ils ont trois tailles, leur contour irrégulier se lisait comme un patchwork
   plutôt que comme une grille.
   Après : plus de fond ni d'arrondi. Chaque fonction est une PIÈCE POSÉE sur la bande,
   ouverte par un filet de tête. Les filets d'une même rangée s'alignent, ce qui rend la
   grille de six colonnes enfin visible — c'était elle, le dessin, pas les rectangles. */
.card{
  grid-column:span 2;              /* défaut : petite carte */
  min-width:0;                     /* même raison que minmax(0,1fr), côté enfant */
  display:flex;flex-direction:column;
  border-top:1px solid var(--card-line);
  padding-top:clamp(16px,1.8vw,24px);
}
/* Le dessin n'a plus de cadre. Une trame de points a bien été essayée ici (18/08) puis
   retirée le jour même : un schéma en filets d'un pixel et une trame de points sont deux
   textures de même finesse et de même gris, elles se sont mangées l'une l'autre au lieu
   de se porter. La trame vit désormais là où elle est seule à parler, sur la bande de
   relance (champ.css). Ici, le dessin se tient par son propre contraste. */
.card .viz{
  min-width:0;
  padding:clamp(10px,1.4vw,18px) 0 clamp(16px,2vw,26px);
}
.card .vz{display:block;width:100%;height:auto}
/* Le rapport est répété ici alors que `height:auto` suffirait sur un SVG à viewBox :
   c'est ce qui empêche une carte de s'effondrer à 0 de haut le temps du chargement, et
   donc la page de sauter sous les yeux du lecteur.

   ── LES PLAFONDS SONT LA MOITIÉ DU DESSIN ──────────────────────────────────────────
   Chaque `max-width` vaut EXACTEMENT la largeur du viewBox du schéma qu'il reçoit
   (cf. l'en-tête de pictos.py). Ce n'est pas un réglage de mise en page, c'est ce qui
   rend le dessin vrai : tant que ces brides manquaient, la toile de 300 s'étirait sur
   518 px et multipliait tout par 1,73 — un trait de 3 arrivait à 5,2 px, une barre de
   30 à 52 px, un axe de 1,6 à 2,8 px. On corrigeait alors les nombres au jugé.

   Avec ces plafonds, le facteur d'échelle est ≤ 1 sur TOUTE la plage de largeurs de
   fenêtre : aucune valeur écrite dans le SVG ne peut être dépassée à l'écran. Aux
   fenêtres étroites le dessin rétrécit, ce qui ne peut qu'affiner le trait.

   Les brides tiennent aussi la hiérarchie des AIRES : ouverture 560×320 (179 200),
   moyenne 520×296 (153 920), bandeau 704×160 (112 640), petite 360×205 (73 800).
   La carte qui doit dominer a le plus grand dessin, le bandeau de clôture ferme sans
   concurrencer l'ouverture — ce qui n'était plus le cas quand il tenait 880 × 189. */
/* ── ET LE DESSIN S'ALIGNE, IL NE FLOTTE PLUS ──────────────────────────────────────
   `margin-inline:auto` centrait chaque dessin dans sa colonne. Tant qu'il y avait une
   carte autour, le centrage se lisait comme une marge intérieure. Sans carte, le dessin
   flotte : mesuré 31 px de décalage entre le bord gauche d'un schéma et celui du mot-clé
   qui le nomme, juste dessous — deux bords à 31 px l'un de l'autre ne se lisent pas comme
   un alignement, mais comme un défaut. Le dessin part maintenant du même bord que son
   texte. Le bandeau de clôture garde son centrage : il est pleine largeur, il n'a pas de
   colonne voisine à contredire.
   ── ET LES PLAFONDS SONT PLUS BAS QUE LA TOILE ────────────────────────────────────
   Retour Maxime 03/08 : « ces graphes sont trop gros ». Les dessins tenaient exactement
   la largeur de leur viewBox, donc à l'échelle 1 : justes, mais ils écrasaient le texte
   de leur carte. Chaque plafond descend d'environ 15 %, ce qui divise l'aire par 1,4 et
   affine tous les traits d'autant, puisque le facteur d'échelle passe sous 1. La
   hiérarchie des aires est conservée : ouverture > moyenne > bandeau > petite. */
.viz-hero .vz{aspect-ratio:7/4;max-width:476px;margin-inline:0}       /* toile 560 × 320 */
.viz-std  .vz{aspect-ratio:65/37;max-width:442px;margin-inline:0}     /* toile 520 × 296 */
.viz-wide .vz{aspect-ratio:22/5;max-width:598px;margin-inline:auto}   /* toile 704 × 160 */
/* Le bandeau porte DEUX toiles, et c'est le seul emplacement dans ce cas.
   Pourquoi lui : sa largeur d'affichage varie du simple au triple (880 px sur grand écran,
   318 px à 390 px de fenêtre) parce qu'il est pleine largeur partout. La toile de 704 y
   tombait à ×0,45 — filets à 0,45 px, libellés MPP/XER/CSV à 6,8 px. Et comme le facteur
   frappe TOUT, aucune retouche des nombres du SVG ne pouvait le rattraper.
   La règle d'échelle interdisant de dépasser le plafond, la seule sortie était un second
   dessin, conçu pour 360 (cf. le dictionnaire ETROIT de pictos.py). Ici on ne fait que
   choisir lequel des deux est servi — d'où `display`, et rien de plus.
   Sans JavaScript : les deux SVG sont dans le HTML, ~1,4 ko de plus par page.
   La règle ci-dessus porte sur `.vz` et non sur `.vz-w` : une page générée AVANT cette
   reprise n'a qu'un SVG, sans suffixe, et garde ainsi son rapport et son plafond. Les
   suffixes ne servent qu'à choisir lequel des deux s'affiche. */
.viz-wide .vz-n{display:none}
/* `viz-std` sert deux emplacements de largeurs très différentes (518 px pour la carte
   moyenne, 318 px pour la petite) : une toile unique en aurait forcément trahi une.
   Chacune a donc la sienne, au même rapport — d'où deux plafonds et non un. */
/* Ces deux règles sont plus spécifiques que les plafonds ci-dessus : sans les baisser
   elles annulaient la réduction demandée. Même retrait d'environ 15 %. */
.card.c-md .viz .vz{max-width:442px;margin-inline:0}                  /* toile 520 × 296 */
.card.c-sm .viz .vz{max-width:306px;margin-inline:0}                  /* toile 360 × 205 */

.card .card-txt{
  min-width:0;
  display:flex;flex-direction:column;gap:13px;
  /* plus de boîte, donc plus de marges intérieures : le texte s'aligne directement sur
     la colonne de la grille, comme le reste de la page */
  padding:0;
}
.card .k{
  /* casse normale, sans espacement de lettres (Maxime, 22/09) : ce n'est plus une
     étiquette en capitales, seulement le premier mot de la fonction. Couleur et
     taille inchangées. */
  display:block;margin-bottom:9px;
  font-family:var(--fm,'JetBrains Mono',ui-monospace,monospace);
  font-size:var(--t-micro);line-height:1.5;color:var(--card-key);
}
.card h3{
  font-weight:600;font-size:var(--t-large);line-height:1.32;letter-spacing:-.012em;
  color:var(--card-ink);
}
.card p{font-size:var(--t-base);line-height:1.56;color:var(--card-txt);max-width:60ch}
/* la bande claire repeint tous les <p> en gris acier : les cartes ont leur propre gris */
.band-light .card p{color:var(--card-txt)}

/* ═══════════ Les quatre tailles ═════════════════════════════════════════════════════ */

/* 1 — LA CARTE D'OUVERTURE, pleine largeur.
   « Interrogeable » (et « Audit » pour l'architecture) est le différenciateur du
   produit : la donnée est adressable, un agent la lit, on l'interroge en français.
   C'est la seule fonction que personne d'autre ne propose — elle prend donc la place
   d'une bande entière, avec une vraie maquette d'interface plutôt qu'un pictogramme.
   Disposition texte à gauche / démonstration à droite : c'est déjà la grammaire du
   hero de la page, on ne réinvente pas un sens de lecture au milieu du document. */
.card.c-hero{
  grid-column:1 / -1;
  display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);
  /* étirement (valeur par défaut) et non `center` : les deux colonnes doivent monter
     jusqu'au bord de la carte, sinon le filet vertical qui les sépare s'arrête en
     plein milieu. Le centrage se fait DANS chaque colonne. */
  align-items:stretch;
}
.c-hero .viz{
  order:2;                      /* le SVG reste premier dans le DOM (décoratif, aria-hidden) */
  display:flex;align-items:center;
  /* le filet vertical qui séparait les deux colonnes tombe avec les boîtes : entre un
     filet de tête et une trame de points, un troisième trait ne dit plus rien. */
  padding-left:clamp(22px,3vw,52px);
}
/* La maquette d'ouverture ferme la ligne sur le bord du rail. Alignée à gauche comme les
   autres dessins, elle laissait 90 px de vide entre elle et la fin du rail : une pièce
   qui s'arrête juste avant le bord se lit comme un défaut de calage, alors que le texte
   d'en face, lui, part exactement du bord opposé. */
.c-hero .viz .vz{flex:1 1 auto;margin-left:auto;margin-right:0}
.c-hero .card-txt{order:1;justify-content:center;padding:clamp(6px,1vw,14px) 0 0;gap:14px}
.c-hero h3{font-size:var(--t-lead);line-height:1.2;letter-spacing:-.02em}
.c-hero p{font-size:var(--t-base);line-height:1.6;max-width:44ch}
.c-hero .k{margin-bottom:12px;font-size:var(--t-micro)}

/* 2 — LES DEUX MOYENNES (3 colonnes). Les fonctions qui portent le cœur du moteur. */
.card.c-md{grid-column:span 3}
.c-md h3{font-size:var(--t-large)}

/* 3 — LES TROIS PETITES (2 colonnes). Le détail qui crédibilise, pas la vitrine. */
.card.c-sm{grid-column:span 2}

/* 4 — LE BANDEAU DE CLÔTURE, pleine largeur mais bas.
   La dernière fonction de chaque champ parle d'une frontière ou d'un lien (formats
   échangés, limite du réseau, conclusion qui renvoie à ses pièces) : un sujet
   horizontal, dessiné dans une toile horizontale. Titre à gauche, explication à
   droite, pour que la carte reste basse et ne concurrence pas celle d'ouverture. */
.card.c-wide{grid-column:1 / -1}
.c-wide .card-txt{flex-direction:row;gap:clamp(22px,3.4vw,60px);align-items:flex-start}
.c-wide .hd{flex:0 0 40%;min-width:0}
.c-wide h3{font-size:var(--t-large)}
.c-wide p{flex:1 1 0;min-width:0;max-width:56ch}

/* ═══════════ Les schémas : la couleur vit ici, pas dans le SVG ═══════════════════════ */
.vz .g{stroke:var(--vz-line)}
.vz .gf{fill:var(--vz-line)}
.vz .gw{fill:var(--vz-gwash)}   /* aplat gris léger : une surface, pas une masse */
.vz .a{stroke:var(--vz-acc)}
.vz .af{fill:var(--vz-acc)}
.vz .aw{fill:var(--vz-wash)}
.vz .pa{fill:var(--vz-paper)}
.vz .hole{fill:var(--vz-hole)}
.vz .tx{fill:var(--vz-line-2)}
.vz .txa{fill:var(--vz-acc)}
.vz text{font-family:var(--fm,'JetBrains Mono',ui-monospace,monospace);letter-spacing:.02em}

/* ═══════════ Survol : un signe, pas un spectacle ════════════════════════════════════ */
/* Une pièce sans bord n'a plus rien à soulever : le `translateY` déplaçait un texte posé
   à même la bande, ce qui se voyait comme un défaut plutôt que comme une réponse. C'est
   le filet de tête qui s'éclaire, et la trame qui se densifie sous le dessin. */
/* Une pièce sans bord n'a plus rien à soulever : le `translateY` déplaçait un texte posé
   à même la bande, ce qui se voyait comme un défaut plutôt que comme une réponse. C'est
   le filet de tête qui s'éclaire — un signe, à l'endroit exact qui ouvre la pièce. */
@media (hover:hover){
  .card{transition:border-color .26s ease}
  .card:hover{border-top-color:var(--card-line-hi)}
}
@media (prefers-reduced-motion:reduce){.card{transition:none}}

/* ═══════════ Replis ═════════════════════════════════════════════════════════════════
   Le passage de 6 à 2 colonnes est direct, sans étape à 4 ou 3 : découper 6 en 4 ou en
   3 laisse des trous dès qu'une rangée de trois petites cartes n'a plus la place. Deux
   colonnes égales n'en laissent jamais — à condition qu'une rangée impaire soit rendue
   pleine largeur, d'où la classe `c-sm-w` posée sur la dernière petite carte quand
   elles sont en nombre impair. */
@media (max-width:1060px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card,.card.c-md,.card.c-sm{grid-column:span 1}
  .card.c-hero,.card.c-wide,.card.c-sm-w{grid-column:1 / -1}
  .c-md h3,.c-wide h3{font-size:var(--t-large)}

  /* La carte d'ouverture est empilée DÈS que la grille passe à deux colonnes, et pas
     plus tard. Mesuré : à 900 px, en gardant sa double colonne, sa maquette tombait à
     166 px de haut — moins que les 188 px des cartes moyennes d'à côté. La carte la
     plus importante avait le plus petit visuel de la page. Empilée, elle reprend toute
     la largeur et redevient la plus grande. */
  .card.c-hero{display:flex;flex-direction:column}
  /* `order` remis à zéro sur des sélecteurs AUSSI spécifiques que ceux du desktop
     (`.card.c-hero .viz`, deux classes) : écrit `.c-hero>*`, la règle perdait contre
     `.c-hero .viz{order:2}` malgré sa position plus bas dans la feuille — le visuel
     restait sous le texte en pile. Vu au rendu à 360 px, pas à la lecture du code. */
  /* en pile, le décalage qui séparait les deux colonnes n'a plus d'objet : le dessin
     doit repartir du bord gauche de la colonne, comme le texte au-dessus de lui */
  .card.c-hero .viz{order:0;display:block;padding-left:0}
  .card.c-hero .viz .vz{margin-left:0}   /* empilée, elle repart du bord gauche */
  .card.c-hero .card-txt{order:0}
  .c-hero p{max-width:60ch}
}

/* La petite carte orpheline promue pleine largeur passe en deux colonnes plutôt que de
   laisser son schéma s'étirer sur 760 px (il grossissait 2,4 fois et écrasait les
   cartes voisines). Même sens de lecture que la carte d'ouverture : la parole à
   gauche, la démonstration à droite. */
@media (min-width:621px) and (max-width:1060px){
  .card.c-sm-w{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);align-items:stretch}
  .c-sm-w .viz{order:2;display:flex;align-items:center;
    padding-left:clamp(20px,3vw,44px)}
  .c-sm-w .vz{flex:1 1 auto}
  .c-sm-w .card-txt{order:1;justify-content:center}
}

/* Le bandeau de clôture garde son titre à gauche et son texte à droite tant qu'il reste
   de la largeur ; en dessous, deux colonnes de texte se réduiraient à des mots seuls. */
@media (max-width:820px){
  .c-wide .card-txt{flex-direction:column;gap:11px}
  .c-wide .hd{flex:none}
}

@media (max-width:620px){
  .cards{grid-template-columns:minmax(0,1fr);gap:12px}
  .card,.card.c-hero,.card.c-md,.card.c-sm,.card.c-sm-w,.card.c-wide{grid-column:1 / -1}
  .card.c-sm-w{display:flex;flex-direction:column}
  .card.c-sm-w .viz{order:0;display:block;padding-left:0}
  .card.c-sm-w .card-txt{order:0}
  /* Plus de boîte, donc plus de rembourrage latéral à payer : le dessin dispose de toute
     la colonne, et c'est la gouttière de la page qui le tient à distance du bord. Le
     rembourrage qui restait ici coûtait 28 px de largeur au dessin, soit 9 % d'échelle
     sur un écran de 360 px — pris directement sur l'épaisseur des traits et la taille
     des libellés. Seul l'écart vertical demeure, pour que les pièces ne se collent pas. */
  .card .viz{padding:10px 0 14px}
  .card .card-txt{padding:0}
  /* Le bandeau de clôture prend ici sa toile étroite (360 × 180) : on éteint la large et
     on allume l'autre. Le plafond vaut, comme partout, la largeur du viewBox — le facteur
     reste donc ≤ 1 (mesuré : ×0,72 à 320 px de fenêtre, ×0,88 à 390, ×1,00 dès 430).
     La bascule est ici et pas plus haut : à 621 px la toile large tient encore 485 px,
     soit ×0,69 et des libellés à 10,3 px, tout juste au-dessus du plancher de lisibilité.
     Rapport 2/1 : à 318 px de rendu le dessin fait 159 px de haut, contre 165 px pour tous
     les autres visuels de la page une fois empilés (mesuré à 390 px). Le bandeau reste le
     dessin le plus bas — il ferme le bloc sans concurrencer la carte d'ouverture, comme
     sur grand écran. Une toile plus haute l'aurait fait passer devant elle. */
  .viz-wide .vz-w{display:none}
  .viz-wide .vz-n{display:block;aspect-ratio:2/1;max-width:360px}
  /* Toute la largeur du carton pour le dessin : il porte déjà ses marges intérieures et
     ne touchera pas le bord. Le rembourrage vertical reste, la carte ne colle pas.
     Ces 28 px rendus au dessin ne sont pas cosmétiques : ils valent 9 % d'échelle, et
     c'est ce qui tient les libellés MPP/XER/CSV au-dessus de 10 px jusqu'à 320 px de
     fenêtre. */
  .c-wide .viz{padding:12px 0}
}

/* ── Fins de ligne ────────────────────────────────────────────────────────────────────
   Aucune propriété d'équilibrage n'existait sur le site : les titres cassaient où le
   navigateur voulait, et douze d'entre eux laissaient leur dernier mot seul sur sa ligne,
   dont les trois verbes signature de l'accueil (audit typographique 03/08).
   balance égalise la longueur des lignes d'un titre ; pretty empêche le mot orphelin en
   fin de paragraphe. Les deux dégradent proprement sur les navigateurs qui les ignorent. */
h1,h2,h3,h4,.hs-title,.pq-title,.s-eyebrow,legend{text-wrap:balance}
p,li,.sub,.s-lead,.card p,.lead{text-wrap:pretty}