/* ia-page.css — page « 04 · Stratégie IA des éditeurs SaaS ».
   Portage de la maquette design_handoff_page_ia/ : les valeurs viennent des maquettes, les
   couleurs et les familles UNIQUEMENT des tokens --rp-* (jamais un hex recopié ici).
   Feuille dédiée à cette page : elle ne pèse sur aucune autre. */

.ia-page { --ia-max: 1120px; --ia-dur: 220ms; --ia-ease: cubic-bezier(0.2, 0.6, 0.2, 1); }
/* Le site pose `html, body { background: var(--rp-dark-blue) }` : CHAQUE section doit donc
   déclarer son fond. Sans cette ligne, les sections claires héritaient du navy et tous les
   titres en var(--rp-fg) — navy eux aussi — devenaient purement invisibles. */
.ia-sec { background: var(--rp-bg); padding: 80px 40px; }

.ia-sec--tight { padding: 56px 40px; }
/* L'ALTERNANCE DOIT SE VOIR (constat PO, 20/08 : « je ne vois pas l'alternance des
   fonds »). `--rp-bg-alt` (#F6F7FA) est à 2 % du blanc — un rythme indiscernable n'est pas
   un rythme. `--rp-bg-tint` (#EEF1F6) est le cran au-dessus de la même charte : bleuté,
   perceptible, et le texte `--rp-fg-2` y garde 7,3:1. */
/* `.ia-sec--alt` (fond gris) est morte avec l'alternance blanc/navy du 19/08 — retirée
   pour que sa réapparition dans un HTML se voie (fond transparent) au lieu de ressusciter
   silencieusement le gris que le PO a écarté. */
.ia-sec--navy { background: var(--rp-dark-blue); }
/* LA CASCADE « SUR NAVY » (20/08). Jusqu'ici, chaque section sombre exigeait des variantes
   posées à la main (--onnavy) sur chacun de ses textes — tenable pour trois sections
   historiques, pas pour une page qui ALTERNE blanc et bleu nuit (arbitrage PO du jour : « il
   faut tout simplement alterner la couleur de fond des blocs » — et il parlait des sections
   de la page, le menu reste blanc). La section sombre devient AUTOSUFFISANTE : ses textes
   communs basculent avec elle. Les cartes (tuiles, fiches, boîtes) gardent leur fond propre
   et n'ont rien à changer. Les variantes --onnavy existantes restent valides — redondantes,
   jamais contredites. */
.ia-sec--navy .ia-h2 { color: var(--rp-fg-on-dark); }
.ia-sec--navy .ia-lead { color: rgba(255, 255, 255, .78); }
.ia-sec--navy .ia-note { color: rgba(255, 255, 255, .62); }
.ia-sec--navy .ia-grp-note { color: rgba(255, 255, 255, .72); }
.ia-sec--navy .ia-grp-name { color: rgba(255, 255, 255, .62); }
.ia-sec--navy .ia-axe-side .n { color: var(--rp-gold); }
.ia-sec--navy .ia-axe-side .name { color: var(--rp-fg-on-dark); }
.ia-sec--navy .ia-axe-side .b { color: rgba(255, 255, 255, .75); }
/* « Comment se lit un palier » se DÉLIMITE (PO 19/08) : sur marine, le bloc de figures
   flottait sans bord — il prend la même surface sombre que les tuiles, et chaque figure
   se sépare de la suivante par un filet discret plutôt que par du vide. */
.ia-sec--navy .ia-nat { border-top: 0; background: linear-gradient(180deg, var(--rp-primary-blue), #28334A);
  border-radius: 12px; padding: 20px 22px 22px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .11) inset, 0 14px 30px -18px rgba(0, 0, 0, .55); }
.ia-sec--navy .ia-nat-l { border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 18px; }
.ia-sec--navy .ia-nat-l:first-of-type { border-top: 0; padding-top: 0; }
.ia-sec--navy .ia-nat-t, .ia-sec--navy .ia-nat-cpt { color: rgba(255, 255, 255, .62); }
.ia-sec--navy .ia-rail-hint { color: rgba(255, 255, 255, .6); }
.ia-sec--navy .ia-rail-btn { background: transparent; color: var(--rp-fg-on-dark);
  border-color: rgba(255, 255, 255, .34); }
.ia-sec--navy .ia-traj-col h3, .ia-sec--navy .ia-traj-col { color: var(--rp-fg-on-dark); }
.ia-sec--navy .ia-faq details { border-bottom-color: rgba(255, 255, 255, .22); }
.ia-sec--navy .ia-faq summary { color: var(--rp-fg-on-dark); }
.ia-sec--navy .ia-faq p { color: rgba(255, 255, 255, .75); }
.ia-sec--navy .ia-bib-cpt { color: var(--rp-fg-on-dark); }
.ia-sec--navy .ia-bib-rien, .ia-sec--navy .ia-bib-sub-lab,
.ia-sec--navy .ia-bib-rail-aide { color: rgba(255, 255, 255, .6); }
/* Les listes des colonnes « six premiers mois » et les figures « comment se lit un palier »
   posaient leur encre claire-sur-clair d'origine sur le navy : constaté sur captures 19/08. */
.ia-sec--navy .ia-traj-col li { color: rgba(255, 255, 255, .78); }
.ia-sec--navy .ia-traj-col .verb { color: var(--rp-fg-on-dark); }
.ia-sec--navy .ia-traj-col .p { color: rgba(255, 255, 255, .55); }
.ia-sec--navy .ia-nat-l { color: var(--rp-fg-on-dark); }
.ia-sec--navy .ia-nat-r { color: rgba(255, 255, 255, .75); }
.ia-sec--navy .ia-nat-r b { color: var(--rp-fg-on-dark); }
.ia-sec--navy .ia-nat-chaine li + li::before { background: rgba(255, 255, 255, .35); }
/* Le dénombrement inverse ses pastilles : pleines = blanches, vides = cerclées de blanc. */
.ia-sec--navy .ia-nat-cpt i { border-color: rgba(255, 255, 255, .45); }
.ia-sec--navy .ia-nat-cpt i.on { background: var(--rp-fg-on-dark); border-color: var(--rp-fg-on-dark); }
/* L'arrivée de la trajectoire était une tuile navy sur navy : elle s'inverse aussi. */
.ia-sec--navy .ia-nat-traj .arr b { background: var(--rp-fg-on-dark); border-color: var(--rp-fg-on-dark);
  color: var(--rp-dark-blue); }

/* ------------------------------------------------------------------ *
 * SUR MARINE, LES TUILES PRENNENT UNE SURFACE SOMBRE (arbitrage PO 19/08, option B).
 *
 * Six dalles blanches sur une section marine écrasaient tout : la page devenait un damier,
 * la colonne d'explication disparaissait. Les cartes du modèle économique et des missions
 * étaient déjà nées sombres (bordure claire, fond transparent) — les tuiles des axes les
 * rejoignent : un bleu à peine plus clair que le fond, un fin liseré lumineux. Le blanc
 * change de rôle : il ne tapisse plus, il SIGNALE — seule la tuile mise en avant (2.2,
 * celle qui porte la thèse) reste blanche, cerclée d'or.
 * ------------------------------------------------------------------ */
.ia-sec--navy .ia-tile { background: linear-gradient(180deg, var(--rp-primary-blue), #28334A);
  border-color: transparent;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .11) inset, 0 14px 30px -18px rgba(0, 0, 0, .55); }
/* Le code d'axe s'éclaircit : le corail de la charte tombe à 3,9:1 sur cette surface,
   sous l'AA des 12 px. Repli blanc là où color-mix n'existe pas. */
.ia-sec--navy .ia-tile .code { color: var(--rp-fg-on-dark); }
@supports (color: color-mix(in srgb, red 60%, white)) {
  .ia-sec--navy .ia-tile .code { color: color-mix(in srgb, var(--step) 60%, white); }
}
.ia-sec--navy .ia-tile .scope { color: rgba(255, 255, 255, .55); }
.ia-sec--navy .ia-tile .name { color: var(--rp-fg-on-dark); }
.ia-sec--navy .ia-tile .b { color: rgba(255, 255, 255, .75); }
.ia-sec--navy .ia-tile-lien { color: var(--rp-fg-on-dark); }
.ia-sec--navy .ia-tile-lien:hover { color: var(--rp-gold); }
.ia-sec--navy .ia-tile-lien:focus-visible { outline-color: var(--rp-gold); }
/* La tuile mise en avant reste dans la MATIÈRE COMMUNE (PO 19/08, « homogénéise ce bloc ») :
   la version blanche cassait la rangée — une dalle au milieu des surfaces sombres. La thèse
   se signale par l'anneau d'or et les accents dorés, pas par un autre monde. */
.ia-sec--navy .ia-tile--hl { border-color: transparent;
  box-shadow: 0 0 0 2px var(--rp-gold), 0 16px 34px -18px rgba(0, 0, 0, .6); }
/* Après le bloc @supports ci-dessus dans la cascade : le code de la tuile-thèse est or,
   comme son anneau — 7,5:1 sur la surface sombre, color-mix ou pas. */
.ia-sec--navy .ia-tile--hl .code { color: var(--rp-gold); }
.ia-sec--navy .ia-tile--hl .scope { color: rgba(255, 255, 255, .6); }
.ia-sec--navy .ia-tile--hl .ia-tile-lien:hover { color: var(--rp-gold); }
.ia-sec--navy .ia-tile--hl .ia-tile-lien:focus-visible { outline-color: var(--rp-gold); }
.ia-sec--line { border-bottom: 1px solid var(--rp-border); }
.ia-in { max-width: var(--ia-max); margin: 0 auto; }
.ia-in--narrow { max-width: 900px; }

/* --- typographie de page --- */
/* VARIANTES TEXTE PAR DÉFAUT, VIVES SUR NAVY (🔴 release-check 19/08) : le corail et l'océan
   de la charte sont faits pour les fonds sombres — 2,78:1 et 2,80:1 sur blanc, mesurés. C'est
   le défaut corrigé le 11/08 sur l'accueil (styles.css, `.eyebrow`) et jamais reporté ici.
   L'or n'a pas de règle claire : les trois sur-titres or vivent tous sur navy (vérifié). */
.ia-eyebrow { font-family: var(--rp-font-ui); font-weight: 700; font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--rp-corail-texte); margin: 0 0 16px; }
.ia-eyebrow--gold { color: var(--rp-gold); font-size: 12px; letter-spacing: .16em; margin-bottom: 26px; }
.ia-eyebrow--ocean { color: var(--rp-ocean-texte); }
.ia-sec--navy .ia-eyebrow { color: var(--rp-coral); }
.ia-sec--navy .ia-eyebrow--ocean { color: var(--rp-ocean); }
.ia-h1 { font-family: var(--rp-font-display); font-weight: 400; font-size: clamp(32px, 4.4vw, 58px);
  line-height: 1.08; color: var(--rp-fg-on-dark); margin: 0 0 6px; max-width: 20em; }
/* Seconde ligne du titre : contour seul, comme la maquette. Elle reste DANS le <h1> —
   la sortir en <p> aurait amputé le titre de la page de sa moitié pour les moteurs
   et les lecteurs d'écran. */
.ia-h1-b { display: block; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .82);
  margin: 0 0 30px; }
@supports not (-webkit-text-stroke: 1px red) { .ia-h1-b { color: rgba(255, 255, 255, .82); } }
.ia-h2 { font-family: var(--rp-font-display); font-weight: 400; font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.15; color: var(--rp-fg); margin: 0 0 12px; max-width: 23em; }
.ia-h2--onnavy { color: var(--rp-fg-on-dark); }
.ia-lead { font-size: 16px; line-height: 1.65; color: var(--rp-fg-2); margin: 0 0 28px; max-width: 66ch; }
.ia-lead--hero { font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, .82); margin: 0 0 36px; max-width: 62ch; }
.ia-lead--onnavy { color: rgba(255, 255, 255, .78); }
.ia-note { font-size: 14px; line-height: 1.65; color: var(--rp-muted); margin: 18px 0 0; max-width: 70ch; }
.ia-note--hero { color: rgba(255, 255, 255, .55); margin: 20px 0 0; }

/* --- boutons --- */
.ia-cta { font-family: var(--rp-font-ui); font-weight: 600; font-size: 15px; color: var(--rp-dark-blue);
  background: var(--rp-white); border-radius: 8px; padding: 15px 24px; min-height: 48px;
  display: inline-flex; align-items: center; text-decoration: none;
  transition: background var(--ia-dur) var(--ia-ease); }
/* même anneau de focus que tout le reste de la page : les CTA étaient les seuls à ne pas
   l'avoir (finding ux 30/07) */
.ia-cta:focus-visible { outline: 3px solid var(--rp-ocean); outline-offset: 2px; }
.ia-cta:hover { background: var(--rp-bg-tint); }
.ia-cta--ghost { background: transparent; color: var(--rp-fg-on-dark); border: 1px solid rgba(255, 255, 255, .34); }
.ia-cta--ghost:hover { background: rgba(255, 255, 255, .08); }
.ia-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* --- le parcours (5 étapes) --- */

/* --- sous-navigation collante + barre de progression --- */
/* Fond OPAQUE : la version translucide laissait lire le contenu à travers la barre quand
   une ancre amenait un titre dessous — une navigation n'a rien à laisser transparaître
   (recette mobile du 30/07). */
/* ── LE SOMMAIRE ANCRÉ (page déroulée, arbitrage PO du 19/08) ──────────────────────────────
   Deux régimes, un seul balisage.
   ≥ 1440 px : rail FIXE dans la gouttière gauche — la place existe ((100vw − var(--ia-max))/2
   dépasse 180 px), les sections gardent leurs fonds pleine largeur, aucun re-emboîtement du
   document. En dessous : rangée collante en haut, qui défile à l'horizontale — la même sous
   900 px, resserrée. Le régime mobile est au cahier des charges de la maquette (rangée de
   puces collante), pas une improvisation. */
.ia-sommaire { position: sticky; top: 63px; z-index: 40; background: var(--rp-bg);
  border-bottom: 1px solid var(--rp-border); padding: 10px 20px; }
.ia-sommaire-titre { display: none; }
.ia-sommaire-liens { display: flex; gap: 4px 14px; overflow-x: auto; scrollbar-width: none;
  max-width: var(--ia-max); margin: 0 auto; }
.ia-sommaire-liens::-webkit-scrollbar { display: none; }
.ia-sommaire a { font-family: var(--rp-font-ui); font-weight: 600; font-size: 12.5px;
  color: var(--rp-fg-2); text-decoration: none; white-space: nowrap; padding: 8px 2px;
  min-height: 40px; display: inline-flex; align-items: center;
  border-bottom: 2px solid transparent; }
.ia-sommaire a:hover { color: var(--rp-fg); }
.ia-sommaire a[aria-current="true"] { color: var(--rp-fg); border-bottom-color: var(--rp-gold);
  font-weight: 700; }
.ia-sommaire a:focus-visible { outline: 3px solid var(--rp-ocean); outline-offset: 2px; }
.ia-sommaire-resume { font-weight: 700; color: var(--rp-primary-blue); }
@media (min-width: 1440px) {
  /* LA CARTE BLANCHE, ARBITRAGE FINAL DU PO (20/08 : « j'aimais bien le bloc avec fond
     blanc et textes bleus »). Deux directions ont été essayées sur la recette le même jour —
     la carte opaque, puis le rail transparent aux textes adaptés au fond survolé — et le PO
     a tranché pour la première en voyant les deux. La carte est lisible sur n'importe quelle
     section, sans mécanique : c'est aussi la plus simple. L'adaptation par entrée a été
     RETIRÉE avec son JavaScript — une mécanique morte se relit comme une intention. */
  .ia-sommaire { position: fixed; top: 96px; left: 24px;
    width: calc((100vw - var(--ia-max)) / 2 - 48px); max-width: 208px;
    background: var(--rp-bg); border: 0; border-radius: 12px; padding: 14px 16px;
    box-shadow: 0 0 0 1px rgba(29, 37, 52, .09) inset, 0 1px 2px rgba(29, 37, 52, .05),
      0 8px 22px -12px rgba(29, 37, 52, .22); }
  .ia-sommaire-titre { display: block; font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--rp-muted);
    margin: 0 0 10px; }
  .ia-sommaire-liens { flex-direction: column; gap: 2px; overflow: visible; }
  /* Le menu est SANS alternance — carte blanche, textes bleus, arbitrage PO du 20/08
     (« le menu était bien tel qu'il était »). Deux zébrages y ont été essayés puis retirés
     le même jour : l'alternance demandée portait sur les SECTIONS de la page, pas sur le
     menu — un malentendu levé par le PO lui-même. Ne pas les réintroduire. */
  .ia-sommaire a { padding: 5px 0 5px 12px; min-height: 32px;
    border-bottom: 0; border-left: 2px solid var(--rp-border); }
  .ia-sommaire a[aria-current="true"] { border-left-color: var(--rp-gold); }
  .ia-sommaire-resume { margin-top: 10px; }
}
/* Les ancres ne se cachent pas sous la rangée collante. Les navigateurs sans `:has`
   perdent 84 px de confort, pas une fonction. */
html:has(.ia-page) { scroll-padding-top: 84px; }
@media (prefers-reduced-motion: no-preference) { html:has(.ia-page) { scroll-behavior: smooth; } }
.ia-prog { height: 2px; background: var(--rp-border); }
.ia-prog > i { display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--rp-coral), var(--rp-gold)); }

/* --- cartes génériques --- */
.ia-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.ia-card { background: var(--rp-bg); border: 1px solid var(--rp-border-strong); border-radius: 12px;
  padding: 22px; box-shadow: var(--rp-shadow-sm); display: flex; flex-direction: column; gap: 8px; }
.ia-card .tag { font-family: var(--rp-font-ui); font-weight: 700; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--step, var(--rp-ocean)); }
.ia-card .t { font-family: var(--rp-font-ui); font-weight: 600; font-size: 17px; line-height: 1.3; color: var(--rp-fg); }
.ia-card .b { font-size: 14px; line-height: 1.6; color: var(--rp-fg-2); }

/* --- 3 · le critère de tri --- */
.ia-crit { border: 1px solid var(--rp-border-strong); border-radius: 12px; background: var(--rp-bg);
  padding: 28px; margin: 0 0 40px; box-shadow: var(--rp-shadow-sm); }
.ia-crit-tag { font-family: var(--rp-font-ui); font-weight: 700; font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--rp-medium-blue); margin: 0 0 14px; }
.ia-crit-lead { font-size: 16px; line-height: 1.65; color: var(--rp-fg); margin: 0 0 22px; max-width: 74ch; }
.ia-crit-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.ia-crit-duo > div { border-top: 2px solid var(--step); padding-top: 14px; }
.ia-crit-duo .tag { font-family: var(--rp-font-ui); font-weight: 700; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--step); margin: 0 0 8px; }
.ia-crit-duo p { font-size: 14px; line-height: 1.65; color: var(--rp-fg-2); margin: 0; }
.ia-crit-end { font-size: 15px; line-height: 1.7; color: var(--rp-fg); margin: 22px 0 0; max-width: 74ch;
  padding-top: 18px; border-top: 1px solid var(--rp-border); }
.ia-crit-stake { font-size: 15px; line-height: 1.7; color: var(--rp-fg-2); margin: 16px 0 0; max-width: 74ch; }

/* --- 3 · les deux axes --- */
.ia-axes { display: flex; flex-direction: column; }
.ia-axe { display: grid; grid-template-columns: minmax(240px, 340px) 1fr; gap: 40px; padding: 32px 0;
  border-top: 2px solid var(--step); }
.ia-axe-side { display: flex; flex-direction: column; gap: 10px; }
.ia-axe-side .n { font-family: var(--rp-font-ui); font-weight: 700; font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--step); }
.ia-axe-side .name { font-family: var(--rp-font-display); font-size: 28px; line-height: 1.2; color: var(--rp-fg); }
.ia-axe-side .b { font-size: 15px; line-height: 1.65; color: var(--rp-fg-2); }
.ia-axe-body { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.ia-grp { min-width: 0; }
.ia-grp-name { font-family: var(--rp-font-ui); font-weight: 700; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--rp-muted); margin: 0 0 12px; }
.ia-grp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 12px; }
.ia-tile { background: var(--rp-bg); border: 1px solid var(--rp-border); border-radius: 12px; padding: 20px;
  box-shadow: var(--rp-shadow-sm); display: flex; flex-direction: column; gap: 8px; }
.ia-tile-head { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; justify-content: space-between; }
.ia-tile .code { font-family: var(--rp-font-ui); font-weight: 700; font-size: 11px; letter-spacing: .06em; color: var(--step); }
.ia-tile .scope { font-family: var(--rp-font-ui); font-weight: 700; font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--rp-muted); }
.ia-tile .name { font-family: var(--rp-font-ui); font-weight: 600; font-size: 16px; line-height: 1.3; color: var(--rp-fg); }
.ia-tile .b { font-size: 14px; line-height: 1.6; color: var(--rp-fg-2); }
/* lien carte → bibliothèque : même vocabulaire visuel que le dépliant des composants
   (bouton nu qui se dit cliquable), flèche vers le bas car la bibliothèque est plus loin
   dans la page ; margin-top:auto le cale en pied de carte quelle que soit la longueur du texte */
.ia-tile-lien { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
  border: 0; background: none; padding: 6px 0 0; cursor: pointer; min-height: 44px;
  font-family: var(--rp-font-ui); font-weight: 700; font-size: 12px; letter-spacing: .04em;
  /* --rp-link (7,7:1 sur blanc) et non --rp-ocean (2,8:1) : à 12 px, l'accent ne passe pas AA */
  color: var(--rp-link); text-decoration: underline; text-underline-offset: 3px; }
.ia-tile-lien::after { content: '↓'; text-decoration: none; }
.ia-tile-lien:hover { color: var(--rp-link-hover); }
.ia-tile-lien:focus-visible { color: var(--rp-link-hover); outline: 3px solid var(--rp-ocean); outline-offset: 2px; }
.ia-grp-note { font-size: 14px; line-height: 1.65; color: var(--rp-fg-2); margin: 14px 0 0; max-width: 70ch; }

/* --- rail des fonctions (défilement auto, arrêtable) --- */
.ia-rail { display: flex; flex-direction: column; gap: 14px; min-width: 0; max-width: 100%; }
.ia-rail-vp { overflow-x: hidden; overflow-y: hidden; scroll-snap-type: x proximity; padding-bottom: 4px;
  min-width: 0; max-width: 100%; }
.ia-rail[data-auto="off"] .ia-rail-vp { overflow-x: auto; }
.ia-rail-track { display: flex; gap: 12px; width: max-content; }
.ia-rail[data-auto="on"] .ia-rail-track { animation: iaRail 46s linear infinite; }
.ia-rail[data-auto="on"]:hover .ia-rail-track,
.ia-rail[data-auto="on"]:focus-within .ia-rail-track { animation-play-state: paused; }
.ia-rail-track > div { flex: 0 0 262px; scroll-snap-align: start; display: flex; }
.ia-rail-bar { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.ia-rail-btn { font-family: var(--rp-font-ui); font-weight: 600; font-size: 13px; color: var(--rp-primary-blue);
  background: var(--rp-bg); border: 1px solid var(--rp-border-strong); border-radius: 999px; padding: 9px 16px;
  min-height: 44px; cursor: pointer; white-space: nowrap; }
.ia-rail-hint { font-size: 13px; line-height: 1.5; color: var(--rp-muted); }
@keyframes iaRail { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* --- 3a · facturation (sur navy) --- */
.ia-price { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.ia-price-card { border: 1px solid rgba(255, 255, 255, .2); border-radius: 12px; padding: 24px;
  display: flex; flex-direction: column; gap: 10px; background: transparent; }
.ia-price-card--first { border-color: var(--rp-gold); }
.ia-price-card--last { background: rgba(255, 255, 255, .06); }
.ia-price-head { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; }
.ia-price-card .num { font-family: var(--rp-font-ui); font-weight: 700; font-size: 12px; letter-spacing: .1em;
  color: rgba(255, 255, 255, .45); }
.ia-price-card--first .num, .ia-price-card--first .tag { color: var(--rp-gold); }
.ia-price-card .tag { font-family: var(--rp-font-ui); font-weight: 700; font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.ia-price-card .t { font-family: var(--rp-font-ui); font-weight: 600; font-size: 17px; line-height: 1.3;
  color: var(--rp-fg-on-dark); }
.ia-price-card .b { font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .78); }
.ia-price-card .eff { font-size: 13px; line-height: 1.55; color: var(--rp-ocean); padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, .16); }
.ia-price-foot { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px; margin-top: 36px; }
.ia-price-foot .tag { font-family: var(--rp-font-ui); font-weight: 700; font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--rp-gold); margin: 0 0 10px; }
.ia-price-foot p { font-size: 15px; line-height: 1.7; color: rgba(255, 255, 255, .82); margin: 0; max-width: 66ch; }
.ia-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ia-list li { display: flex; gap: 10px; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .82); }
.ia-list .p { color: var(--rp-gold); }

/* --- 4b · trajectoire --- */
.ia-traj { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.ia-traj-col { border-top: 2px solid var(--step); padding-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.ia-traj-col .when { font-family: var(--rp-font-ui); font-weight: 700; font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--step); }
.ia-traj-col .verb { font-family: var(--rp-font-display); font-size: 24px; line-height: 1.2; color: var(--rp-fg); }
.ia-traj-col ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ia-traj-col li { display: flex; gap: 10px; font-size: 14px; line-height: 1.6; color: var(--rp-fg-2); }
.ia-traj-col .p { color: var(--rp-muted); }

/* --- 5 · la démarche --- */
.ia-method { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.ia-method-item { border-top: 1px solid var(--rp-border-strong); padding-top: 16px; display: flex;
  flex-direction: column; gap: 8px; }
.ia-method-item .n { font-family: var(--rp-font-ui); font-weight: 700; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--rp-ocean-texte); }
.ia-method-item .t { font-family: var(--rp-font-display); font-size: 22px; line-height: 1.25; color: var(--rp-fg); }
.ia-method-item .b { font-size: 14px; line-height: 1.65; color: var(--rp-fg-2); }

/* --- missions (sur navy) --- */
.ia-missions { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.ia-mission { border: 1px solid rgba(255, 255, 255, .2); border-radius: 12px; padding: 24px; display: flex;
  flex-direction: column; gap: 10px; }
.ia-mission .kind { font-family: var(--rp-font-ui); font-weight: 600; font-size: 15px; line-height: 1.3;
  color: var(--rp-gold); }
.ia-mission .b { font-size: 14px; line-height: 1.65; color: rgba(255, 255, 255, .78); }

/* --- FAQ --- */
.ia-faq details { border-bottom: 1px solid var(--rp-border); }
.ia-faq summary { font-family: var(--rp-font-ui); font-weight: 600; font-size: 16px; line-height: 1.4;
  color: var(--rp-fg); padding: 18px 0; cursor: pointer; min-height: 48px; display: flex; align-items: center; }
.ia-faq summary::marker { color: var(--rp-ocean); }
.ia-faq p { font-size: 15px; line-height: 1.7; color: var(--rp-fg-2); margin: 0 0 20px; max-width: 74ch; }

/* --- retour en haut --- */
.ia-back { background: var(--rp-bg); border-top: 1px solid var(--rp-border); padding: 22px 40px; }
.ia-back-in { max-width: var(--ia-max); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 12px 20px;
  align-items: center; justify-content: space-between; }
.ia-back-in span { font-size: 14px; color: var(--rp-muted); }
.ia-back-in a { font-family: var(--rp-font-ui); font-weight: 600; font-size: 14px; color: var(--rp-primary-blue);
  border: 1px solid var(--rp-border-strong); border-radius: 999px; padding: 11px 18px; min-height: 48px;
  display: inline-flex; align-items: center; text-decoration: none;
  transition: background var(--ia-dur) var(--ia-ease); }
.ia-back-in a:hover { background: var(--rp-bg-tint); }

/* --- ancres sous le header collant + la sous-nav --- */
.ia-page [id^="rp-"] { scroll-margin-top: 116px; }
/* sous 700 px la sous-nav passe sur deux lignes : sans marge élargie, une ancre glisse
   le titre visé SOUS la barre (recette mobile du 30/07) */
@media (max-width: 700px) { .ia-page [id^="rp-"] { scroll-margin-top: 176px; } }

/* --- responsive : intention du §8 du handoff, sans les sélecteurs d'attribut du prototype --- */
@media (max-width: 900px) {
  .ia-sec, .ia-sec--tight { padding: 56px 20px; }
  .ia-axe { grid-template-columns: 1fr; gap: 20px; }
  .ia-back { padding: 22px 20px; }
}
@media (max-width: 600px) {
  .ia-cards, .ia-grp-grid, .ia-price, .ia-traj, .ia-method, .ia-missions, .ia-crit-duo { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .ia-rail[data-auto="on"] .ia-rail-track { animation: none; }
  .ia-rail .ia-rail-vp { overflow-x: auto; }
}

/* La tuile mise en avant n'a plus qu'UNE source de vérité : le bloc `.ia-sec--navy
   .ia-tile--hl` en tête de fichier (blanche cerclée d'or, arbitrage PO 19/08). L'ancien
   régime « tuile navy sur cartes blanches » qui vivait ici est mort avec l'alternance —
   le laisser aurait rendu le rendu dépendant d'un comptage de spécificité (🟡 release-check). */

/* RÉSERVATION D'ESPACE DES MODULES À MONTAGE TARDIF (🟠 release-check 19/08).
   L'épingle d'ancre ne protège que l'arrivée par ancre : un visiteur qui défile pendant
   qu'un module se monte au-dessus de lui était poussé sans compensation. On réserve donc
   l'espace AVANT le montage — valeurs mesurées sur la recette le 19/08, et volontairement
   SOUS la plus petite hauteur réelle (celle du grand écran, les hauteurs croissent quand
   l'écran rétrécit) : sous-réserver réduit la poussée à un reliquat, sur-réserver créerait
   un trou qui se referme — un décalage dans l'autre sens. Gardé par `.ia-js` : sans
   JavaScript rien ne viendra remplir l'espace, le repli <noscript> court suffit. */
html.ia-js #ia-diagnostic { min-height: 300px; }
html.ia-js #ia-cas { min-height: 1500px; }
html.ia-js #ia-renversement { min-height: 1700px; }
html.ia-js #ia-architecture { min-height: 2600px; }

/* Emplacements des quatre modules interactifs, pas encore intégrés (lots 2 à 4).
   Une section vide de 160 px de haut est un trou dans le parcours : on annonce
   explicitement ce qui arrive plutôt que de laisser le visiteur dans le vide. */
.ia-module-todo { border: 1px dashed var(--rp-border-strong); border-radius: 12px;
  padding: 28px; text-align: center; }
.ia-module-todo p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--rp-muted); }
.ia-module-todo strong { font-family: var(--rp-font-ui); font-weight: 600; font-size: 15px;
  color: var(--rp-fg-2); display: block; margin-bottom: 6px; }

/* ── « Faites glisser le curseur » (ia-parcours.js) ───────────────────────────
   Trois états, une mécanique. La couleur d'étape suit l'état pour que le
   déplacement se voie sans lire : coral aujourd'hui, ocean augmenté, gold rendu. */
.ia-cur { --cur: var(--rp-coral); }
.ia-cur[data-etat="1"] { --cur: var(--rp-ocean); }
.ia-cur[data-etat="2"] { --cur: var(--rp-gold); }

.ia-cur-tache { font-family: var(--rp-font-display); font-size: 22px; line-height: 1.25;
  color: var(--rp-fg); margin: 0 0 26px; max-width: 30em; }

.ia-cur-piste { margin: 0 0 24px; }
.ia-cur-lab { display: block; font-family: var(--rp-font-ui); font-weight: 700; font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--rp-muted); margin: 0 0 10px; }
.ia-cur-range { width: 100%; max-width: 640px; display: block; accent-color: var(--cur);
  height: 44px; cursor: pointer; }
.ia-cur-steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; margin: 4px 0 0; padding: 0; max-width: 640px; }
.ia-cur-steps button { width: 100%; text-align: left; font-family: var(--rp-font-ui);
  font-weight: 600; font-size: 13px; color: var(--rp-muted); background: transparent;
  border: 0; border-top: 2px solid var(--rp-border); padding: 10px 0 0; min-height: 44px;
  cursor: pointer; transition: color var(--ia-dur) var(--ia-ease), border-color var(--ia-dur) var(--ia-ease); }
.ia-cur-steps button[aria-current="true"] { color: var(--rp-fg); border-top-color: var(--cur); }
.ia-cur-steps li:nth-child(2) button { text-align: center; }
.ia-cur-steps li:nth-child(3) button { text-align: right; }

.ia-cur-scene { display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: start;
  border-top: 2px solid var(--cur); padding: 24px 0 0; transition: border-color var(--ia-dur) var(--ia-ease); }
.ia-cur-quoi h3 { font-family: var(--rp-font-ui); font-weight: 600; font-size: 17px;
  color: var(--cur); margin: 0 0 10px; }
.ia-cur-quoi p { font-size: 15px; line-height: 1.7; color: var(--rp-fg-2); margin: 0; max-width: 60ch; }
.ia-cur-kpis { display: flex; flex-direction: column; gap: 16px; }
.ia-cur-kpi { display: flex; flex-direction: column; gap: 2px; border-left: 2px solid var(--rp-border);
  padding-left: 14px; }
.ia-cur-kpi b { font-family: var(--rp-font-display); font-size: 28px; line-height: 1.1;
  color: var(--rp-fg); font-variant-numeric: tabular-nums; }
.ia-cur-kpi span { font-size: 13px; line-height: 1.45; color: var(--rp-muted); }
.ia-cur-kpi--gain { border-left-color: var(--cur); }
.ia-cur-kpi--gain b { color: var(--cur); }

.ia-cur-facture { margin: 26px 0 0; padding: 18px 20px; border-radius: 12px;
  background: var(--rp-dark-blue); display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; }
.ia-cur-facture span { font-family: var(--rp-font-ui); font-weight: 700; font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.ia-cur-facture strong { font-family: var(--rp-font-ui); font-weight: 600; font-size: 17px;
  color: var(--cur); }

/* Simulateur : huit paramètres saisissables, puis le temps et l'argent qui en découlent. */
.ia-cur-sim { margin: 26px 0 0; padding: 22px; border: 1px solid var(--rp-border-strong);
  border-radius: 12px; background: var(--rp-bg); }
.ia-cur-sim .t { font-family: var(--rp-font-ui); font-weight: 700; font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--rp-muted); margin: 0; }
.ia-cur-sim .l { font-size: 14.5px; line-height: 1.6; color: var(--rp-fg-2); margin: 8px 0 18px; }
.ia-cur-sim-champs { display: grid; gap: 14px 18px;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
/* Les libellés n'ont pas tous la même longueur : « Sollicitations reçues par semaine — mails,
   courriers, SMS, WhatsApp, portail » tient sur deux lignes là où « 46 » en tient une, et les
   champs se retrouvaient décalés en escalier (retour PO 30/07). La grille donne à chaque cellule
   la même hauteur ; le libellé occupe la première rangée, souple, et le champ la seconde, calée
   en bas. Tous les champs d'une même ligne s'alignent, quelle que soit la longueur du texte. */
.ia-cur-sim-champ { display: grid; grid-template-rows: 1fr auto; gap: 6px; align-content: stretch; }
.ia-cur-sim-champ span { font-size: 14px; line-height: 1.4; color: var(--rp-fg-2); }
.ia-cur-sim-champ input { font-family: var(--rp-font-ui); font-weight: 600; font-size: 15px;
  color: var(--rp-fg); background: var(--rp-bg); border: 1px solid var(--rp-border-strong);
  border-radius: 8px; padding: 10px 12px; min-height: 44px; width: 100%;
  font-variant-numeric: tabular-nums; }
.ia-cur-sim-flux { font-size: 13.5px; line-height: 1.6; color: var(--rp-muted);
  margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--rp-border); }
.ia-cur-sim-res { display: grid; gap: 16px 26px; margin: 14px 0 0;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.ia-cur-sim-res div { display: flex; flex-direction: column; gap: 2px; }
.ia-cur-sim-res b { font-family: var(--rp-font-ui); font-weight: 700; font-size: 30px;
  line-height: 1.1; color: var(--cur); font-variant-numeric: tabular-nums; }
.ia-cur-sim-res span { font-size: 13px; line-height: 1.45; color: var(--rp-muted); }
.ia-cur-sim-alerte { font-size: 13.5px; line-height: 1.6; color: var(--rp-coral);
  margin: 14px 0 0; padding: 10px 12px; border-left: 3px solid var(--rp-coral);
  background: var(--rp-bg-alt); border-radius: 0 8px 8px 0; }
.ia-cur-sim-rendu { font-family: var(--rp-font-ui); font-weight: 600; font-size: 16px;
  color: var(--rp-fg); margin: 18px 0 0; }
.ia-cur-sim-bascule { font-size: 15px; line-height: 1.6; color: var(--rp-primary-blue);
  margin: 8px 0 0; }
.ia-cur-sim-socle { font-size: 12.5px; line-height: 1.6; color: var(--rp-muted); margin: 16px 0 0; }
.ia-cur-sim-champ input:focus-visible,
.ia-cur-steps button:focus-visible,
.ia-cur-range:focus-visible { outline: 3px solid var(--rp-ocean); outline-offset: 2px; }

@media (max-width: 900px) {
  .ia-cur-scene { grid-template-columns: 1fr; gap: 22px; }
  .ia-cur-steps button, .ia-cur-steps li:nth-child(2) button,
  .ia-cur-steps li:nth-child(3) button { text-align: left; font-size: 12px; }
}

/* parcours annoncé mais non publié : on montre ce qu'il est, pas ce qu'il contient */
.ia-cta--ligne { background: transparent; color: var(--rp-primary-blue);
  border: 1px solid var(--rp-border-strong); font-family: var(--rp-font-ui); font-weight: 600;
  font-size: 15px; border-radius: 8px; padding: 15px 24px; min-height: 48px; cursor: pointer; }
.ia-cta--ligne:hover { background: var(--rp-bg-tint); }
.ia-cur [hidden] { display: none; }

/* « Le métier, précisément » — le cas d'usage avant la démonstration */
.ia-cur-metier { border-top: 1px solid var(--rp-border); border-bottom: 1px solid var(--rp-border);
  padding: 20px 0; margin: 0 0 26px; }
.ia-cur-metier-faits { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px 28px; }
.ia-cur-metier-faits > div { display: flex; flex-direction: column; gap: 4px; }
.ia-cur-metier-faits span { font-family: var(--rp-font-ui); font-weight: 700; font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--rp-muted); }
.ia-cur-metier-faits p { font-size: 14px; line-height: 1.6; color: var(--rp-fg-2); margin: 0; }
.ia-cur-pieges { margin: 18px 0 0; }
.ia-cur-pieges summary { font-family: var(--rp-font-ui); font-weight: 600; font-size: 14px;
  color: var(--rp-primary-blue); cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.ia-cur-pieges summary::marker { color: var(--rp-coral); }
.ia-cur-pieges ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex;
  flex-direction: column; gap: 10px; }
.ia-cur-pieges li { position: relative; padding-left: 18px; font-size: 14px; line-height: 1.6;
  color: var(--rp-fg-2); max-width: 78ch; }
.ia-cur-pieges li::before { content: '—'; position: absolute; left: 0; color: var(--rp-coral); }

/* « Ce que votre logiciel fait déjà » — on nomme l'existant avant de proposer quoi que ce soit */
.ia-cur-deja { border-left: 3px solid var(--rp-ocean); background: var(--rp-bg-tint);
  border-radius: 0 12px 12px 0; padding: 18px 22px; margin: 0 0 22px; }
.ia-cur-deja .t { font-family: var(--rp-font-ui); font-weight: 700; font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--rp-ocean); margin: 0 0 8px; }
.ia-cur-deja .c { font-size: 14px; line-height: 1.65; color: var(--rp-fg-2); margin: 0 0 10px; max-width: 76ch; }
.ia-cur-deja .b { font-size: 15px; line-height: 1.6; color: var(--rp-fg); margin: 0; max-width: 76ch; }

/* le concept de la page, nommé seulement à la marche où il se vérifie */
.ia-cur-concept { font-family: var(--rp-font-ui); font-weight: 700; font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--rp-gold);
  margin: -4px 0 10px; }

/* le seuil de confiance : qui arme l'automatisme, et qui le désarme */
.ia-cur-gouv { margin: 20px 0 0; padding: 18px 20px; border: 1px solid var(--rp-border-strong);
  border-left: 3px solid var(--rp-dark-blue); border-radius: 0 12px 12px 0; background: var(--rp-bg-alt); }
.ia-cur-gouv .t { font-family: var(--rp-font-ui); font-weight: 700; font-size: 12px;
  letter-spacing: .06em; color: var(--rp-fg); margin: 0 0 8px; }
.ia-cur-gouv .c { font-size: 14px; line-height: 1.65; color: var(--rp-fg-2); margin: 0 0 12px; max-width: 70ch; }
.ia-cur-gouv ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ia-cur-gouv li { position: relative; padding-left: 18px; font-size: 13.5px; line-height: 1.55; color: var(--rp-fg-2); }
.ia-cur-gouv li::before { content: '✓'; position: absolute; left: 0; color: var(--rp-ocean); font-weight: 700; }

/* Un paragraphe pour tous les éditeurs, puis la phrase qui annonce le cas retenu.
   Pas d'encart, pas de justification : le choix se pose, il ne se défend pas. */
.ia-cur-intro { font-size: 16px; line-height: 1.7; color: var(--rp-fg); margin: 0 0 16px; max-width: 70ch; }
.ia-cur-parti { font-family: var(--rp-font-ui); font-weight: 600; font-size: 14px;
  line-height: 1.55; color: var(--rp-fg-2); margin: 0 0 22px; padding-left: 14px;
  border-left: 2px solid var(--rp-coral); max-width: 70ch; }

/* ── Bibliothèque des cas d'usage (ia-bibliotheque.js) ───────────────────── */
/* ── LE BANDEAU DE FILTRES (refonte 18/08) ────────────────────────────────────────────────
   Deux niveaux qui ne se ressemblent plus. L'axe SE CHOISIT — un sélecteur segmenté, quatre
   options qui s'excluent dans un seul objet ; la fonction S'AFFINE — des puces plus petites,
   sur fond clair, sans bordure. Avant, les deux niveaux portaient la même pastille de 44 px :
   le regard ne savait pas lequel était le principal, et les lisait tous. */
.ia-bib-filtres { display: flex; flex-direction: column; align-items: flex-start; gap: 0;
  margin: 0 0 16px; }
.ia-bib-seg { display: inline-flex; background: var(--rp-bg-alt); border-radius: 10px;
  padding: 3px; max-width: 100%; overflow-x: auto;
  box-shadow: 0 0 0 1px rgba(29, 37, 52, .08) inset; }
.ia-bib-seg-btn { font-family: var(--rp-font-ui); font-weight: 600; font-size: 13px;
  color: var(--rp-fg-2); background: none; border: 0; border-radius: 8px; padding: 9px 15px;
  min-height: 40px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  white-space: nowrap; transition: background var(--ia-dur) var(--ia-ease),
    color var(--ia-dur) var(--ia-ease); }
.ia-bib-seg-btn:hover { color: var(--rp-fg); }
.ia-bib-seg-btn[aria-pressed="true"] { background: var(--rp-bg); color: var(--rp-fg);
  box-shadow: 0 0 0 1px rgba(29, 37, 52, .10), 0 1px 2px rgba(29, 37, 52, .06); }
.ia-bib-seg-btn:focus-visible { outline: 3px solid var(--rp-ocean); outline-offset: 2px; }
.ia-bib-seg-btn b { font-family: var(--rp-font-mono); font-size: 11px; font-weight: 400;
  opacity: .55; font-variant-numeric: tabular-nums; }

.ia-bib-sub { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-top: 12px; }
.ia-bib-sub-lab { font-family: var(--rp-font-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--rp-muted); margin-right: 3px; }
.ia-bib-sc { font-family: var(--rp-font-ui); font-weight: 600; font-size: 12px;
  color: var(--rp-medium-blue); background: var(--rp-bg-alt); border: 0; border-radius: 7px;
  padding: 7px 11px; min-height: 34px; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background var(--ia-dur) var(--ia-ease), color var(--ia-dur) var(--ia-ease); }
.ia-bib-sc:hover { background: var(--rp-bg-tint); }
.ia-bib-sc[aria-pressed="true"] { background: var(--rp-dark-blue); color: var(--rp-fg-on-dark); }
.ia-bib-sc:focus-visible { outline: 3px solid var(--rp-ocean); outline-offset: 2px; }
.ia-bib-sc b { font-family: var(--rp-font-mono); font-size: 10.5px; font-weight: 400;
  opacity: .55; font-variant-numeric: tabular-nums; }

/* Le résumé des filtres actifs. Il porte AUSSI le filtre posé depuis la matrice, qui a quitté
   l'écran quand on lit les fiches — c'est le seul endroit d'où on peut le retirer. */
.ia-bib-actifs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--rp-border); width: 100%; }
.ia-bib-cpt { font-family: var(--rp-font-mono); font-size: 11.5px; letter-spacing: .05em;
  color: var(--rp-fg); font-variant-numeric: tabular-nums; }
.ia-bib-rien { font-family: var(--rp-font-mono); font-size: 11px; letter-spacing: .05em;
  color: var(--rp-muted); }
.ia-bib-tag { display: inline-flex; align-items: center; gap: 4px; font-family: var(--rp-font-ui);
  font-size: 12px; font-weight: 600; color: var(--rp-primary-blue); background: var(--rp-bg-tint);
  border-radius: 7px; padding: 0 4px 0 10px; min-height: 30px; }
.ia-bib-tag button { border: 0; background: none; cursor: pointer; color: var(--rp-fg-2);
  font-size: 16px; line-height: 1; padding: 4px 6px; border-radius: 5px; }
.ia-bib-tag button:hover { background: rgba(29, 37, 52, .09); color: var(--rp-fg); }
.ia-bib-tag button:focus-visible { outline: 2px solid var(--rp-ocean); outline-offset: 1px; }
.ia-bib-raz { font-family: var(--rp-font-ui); font-size: 12px; font-weight: 600;
  color: var(--rp-medium-blue); background: none; border: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; padding: 6px 2px; }
.ia-bib-raz:hover { color: var(--rp-fg); }
.ia-bib-raz:focus-visible { outline: 3px solid var(--rp-ocean); outline-offset: 2px; }
.ia-bib-chip { font-family: var(--rp-font-ui); font-weight: 600; font-size: 13px;
  color: var(--rp-fg-2); background: var(--rp-bg); border: 1px solid var(--rp-border-strong);
  border-radius: 999px; padding: 10px 15px; min-height: 44px; cursor: pointer;
  transition: background var(--ia-dur) var(--ia-ease), color var(--ia-dur) var(--ia-ease),
    border-color var(--ia-dur) var(--ia-ease); }
.ia-bib-chip:hover { background: var(--rp-bg-tint); }
.ia-bib-chip[aria-pressed="true"] { background: var(--rp-dark-blue); border-color: var(--rp-dark-blue);
  color: var(--rp-fg-on-dark); }
.ia-bib-chip:focus-visible { outline: 3px solid var(--rp-ocean); outline-offset: 2px; }
/* Le bandeau « ces cas viennent de votre diagnostic ». Il n'apparaît QUE dans ce cas-là :
   c'est le seul moment où la liste est courte sans que le visiteur l'ait réduite lui-même. */
/* Le compte que porte chaque puce. Discret : c'est une indication de volume, pas une valeur
   à lire — il sert AVANT le clic, pour ne pas promettre un tri qu'un seul cas ne fera pas. */
/* Le message d'un lien de partage illisible. Il vit sur l'écran d'intro, au-dessus du titre :
   c'est le seul endroit où le visiteur le lira avant de conclure que l'outil est cassé. Ton
   d'information et non d'erreur — il n'a rien fait de mal, et il n'y a rien à réparer chez lui. */
.ia-dx-lien-casse { border: 1px solid var(--rp-gold); border-radius: 12px; padding: 14px 18px;
  margin: 0 0 22px; background: var(--rp-bg-tint); font-size: 14.5px; line-height: 1.55;
  color: var(--rp-fg-2); }

.ia-bib-chip-n { margin-left: 8px; font-variant-numeric: tabular-nums; font-size: 12px;
  font-weight: 600; color: var(--rp-muted); }
.ia-bib-chip[aria-pressed="true"] .ia-bib-chip-n { color: var(--rp-fg-on-dark); opacity: .75; }
.ia-bib-vos { display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  border: 1px solid var(--rp-gold); border-radius: 12px; padding: 14px 18px; margin: 0 0 16px;
  background: var(--rp-bg-tint); }
.ia-bib-vos[hidden] { display: none; }
.ia-bib-vos p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--rp-fg-2); }

.ia-bib-compte { font-family: var(--rp-font-ui); font-weight: 700; font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--rp-muted); margin: 0 0 16px; }
.ia-bib-vide { font-size: 15px; line-height: 1.6; color: var(--rp-fg-2);
  border: 1px dashed var(--rp-border-strong); border-radius: 12px; padding: 22px; margin: 0; }

/* --- la bibliothèque en RANGÉE (demande PO, 18/08) -----------------------------------------
   Trente-cinq cartes dépliées en grille faisaient de ce panneau un mur : on y descendait
   longtemps sans voir la fin, et le reste de la page devenait inatteignable. La rangée rend au
   panneau une hauteur constante, quel que soit le nombre de cas que le filtre laisse passer.

   LE DÉFILEMENT EST EN CSS, PAS EN JAVASCRIPT : toutes les cartes restent dans le document.
   C'est ce qui garde le texte des cas lisible par les moteurs — la matière que cette page
   existe pour faire lire — et éditable depuis le back-office. */
.ia-bib-rail { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px;
  align-items: center; }
.ia-bib-liste { list-style: none; margin: 0; padding: 4px; display: flex; gap: 18px;
  align-items: stretch; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding: 4px; }
/* La rangée est atteignable au clavier : sans anneau visible, on ne saurait pas où l'on est. */
.ia-bib-liste:focus-visible { outline: 3px solid var(--rp-ocean); outline-offset: 2px; border-radius: 12px; }
/* La hauteur est bornée, et le débordement se lit : une carte coupée sans indice se prend pour
   une carte complète, et la mesure qui compte est justement en bas de fiche.
   UN SEUL BLOC pour ce sélecteur : deux règles pour un même sélecteur sont le défaut le plus
   fréquent de ce dépôt — seule la dernière atteint l'écran, et on cherche la cause ailleurs. */
.ia-bib-liste > li { flex: 0 0 min(360px, 82vw); scroll-snap-align: start;
  max-height: 62vh; overflow-y: auto; }
.ia-bib-rail-btn { font-family: var(--rp-font-ui); font-weight: 700; font-size: 20px; line-height: 1;
  color: var(--rp-primary-blue); background: var(--rp-bg); border: 1px solid var(--rp-border-strong);
  border-radius: 999px; min-width: 44px; min-height: 44px; cursor: pointer; }
.ia-bib-rail-btn:hover { border-color: var(--rp-ocean); color: var(--rp-ocean); }
.ia-bib-rail-btn:focus-visible { outline: 3px solid var(--rp-ocean); outline-offset: 2px; }
/* Un bouton qui ne mène nulle part doit le dire : on est au bout de la rangée. */
.ia-bib-rail-btn[disabled] { opacity: .4; cursor: default; border-color: var(--rp-border-strong);
  color: var(--rp-muted); }
.ia-bib-rail-aide { font-size: 13px; line-height: 1.5; color: var(--rp-muted); margin: 10px 0 0; }
/* Sur un écran étroit, les deux boutons volent la largeur d'une carte : le doigt suffit. */
@media (max-width: 700px) {
  .ia-bib-rail { grid-template-columns: minmax(0, 1fr); }
  .ia-bib-rail-btn { display: none; }
}
/* ── LA CARTE DE CAS ────────────────────────────────────────────────────────────────────
   L'ANNEAU INTÉRIEUR REMPLACE LA BORDURE (repris de Geist/Vercel, 18/08). Une bordure de 1 px
   occupe la boîte et durcit l'angle ; un anneau posé À L'INTÉRIEUR tient le contour sans
   l'alourdir. C'est ce qui sépare, à l'œil, une carte dessinée d'une carte encadrée.
   Et les ombres S'EMPILENT au survol au lieu de gonfler : trois décalages courts valent mieux
   qu'un flou large, qui donne toujours l'air d'un autocollant. */
.ia-bib-cas { display: flex; flex-direction: column; background: var(--rp-bg);
  border-radius: var(--rp-radius-lg); overflow: hidden;
  box-shadow: 0 0 0 1px rgba(29, 37, 52, .09) inset,
              0 1px 2px rgba(29, 37, 52, .05),
              0 6px 14px -8px rgba(29, 37, 52, .10);
  transition: transform .24s cubic-bezier(.2, .7, .3, 1), box-shadow .24s ease; }
.ia-bib-cas:hover, .ia-bib-cas:focus-within {
  transform: translateY(-5px);
  box-shadow: 0 0 0 1px rgba(29, 37, 52, .14) inset,
              0 2px 4px rgba(29, 37, 52, .06),
              0 10px 20px -10px rgba(29, 37, 52, .18),
              0 24px 44px -24px rgba(29, 37, 52, .30); }
/* Un mouvement qu'on n'a pas demandé n'est pas un signal, c'est une gêne. */
@media (prefers-reduced-motion: reduce) {
  .ia-bib-cas { transition: none; }
  .ia-bib-cas:hover, .ia-bib-cas:focus-within { transform: none; }
}

/* ── la tête : identification, puis position ── */
/* VERT PROFOND ET NON NAVY (PO 19/08) : la section rp-cas est passée au fond navy avec
   l'alternance, et une tête navy s'y fondait — les titres flottaient sans carte. L'océan
   assombri de la charte tranche avec le fond ET avec le corps blanc : blanc 6,7:1, or 5,9:1. */
.ia-bib-tete { background: var(--rp-ocean-texte); color: var(--rp-fg-on-dark);
  padding: 19px 22px 17px; display: grid; grid-template-columns: 1fr auto; gap: 16px;
  align-items: start; }
/* Sur-titre en CHASSE FIXE : il signale une donnée de classement, pas une phrase. */
.ia-bib-fn { font-family: var(--rp-font-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--rp-gold); margin: 0 0 10px; }
.ia-bib-tete h3 { font-family: var(--rp-font-display); font-weight: 400; font-size: 20px;
  line-height: 1.28; color: var(--rp-fg-on-dark); margin: 0; letter-spacing: -.018em; }
/* LA MINI-MATRICE : lignes = effort, colonnes = délai, exactement comme `matrice()` et comme
   le grand tableau plus haut sur la page. Neuf cases, une allumée. */
.ia-bib-mat { display: grid; grid-template-columns: repeat(3, 7px);
  grid-template-rows: repeat(3, 7px); gap: 3px; }
.ia-bib-mat i { background: rgba(255, 255, 255, .15); border-radius: 1.5px; display: block; }
.ia-bib-mat i.on { background: var(--rp-gold); box-shadow: 0 0 0 3px rgba(255, 209, 102, .20); }
/* .72 ET NON .45 : sur la tête passée au vert profond (plus clair que le navy d'origine),
   .45 tombait à 2,7:1 — mesuré par le gardien UX le 19/08, sous l'AA des 8,5 px. */
.ia-bib-matlab { font-family: var(--rp-font-mono); font-size: 8.5px; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255, 255, 255, .72); margin: 7px 0 0;
  text-align: right; line-height: 1.5; }

/* Le bloc de position, à droite de la tête : il ne porte que la matrice et son intitulé. */
.ia-bib-pos { display: flex; flex-direction: column; align-items: flex-end; }
/* Un cas dont la matière publique n'est pas encore intégrée : la tête est identique — le cas
   existe et se situe — seul son corps est plus sobre. Le distinguer par une couleur de bord
   reviendrait à réintroduire le liseré qu'on vient de retirer. */
.ia-bib-cas--ferme .ia-bib-corps { background: var(--rp-bg-alt); }

/* ── la bande de données : ce que la matrice dit, en toutes lettres ── */
.ia-bib-strip { display: flex; margin: 0; background: var(--rp-bg-alt);
  box-shadow: 0 -1px 0 rgba(29, 37, 52, .06) inset; }
.ia-bib-strip > div { flex: 1; padding: 10px 22px; }
.ia-bib-strip > div + div { box-shadow: -1px 0 0 rgba(29, 37, 52, .07); }
.ia-bib-strip dt { font-family: var(--rp-font-mono); font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--rp-muted); margin: 0 0 4px; }
.ia-bib-strip dd { margin: 0; font-family: var(--rp-font-ui); font-size: 13px; font-weight: 600;
  color: var(--rp-fg); letter-spacing: -.005em; }

/* ── le corps ──
   UNE SEULE COULEUR Y VIT, celle du panneau de réponse. Cinq libellés de cinq couleurs
   feraient un arc-en-ciel : la retenue est ce qui distingue les systèmes de référence, où
   « l'encre EST la marque ». Les icônes portent la distinction, jamais la teinte. */
.ia-bib-corps { padding: 17px 22px 20px; display: flex; flex-direction: column; flex: 1; }
.ia-bib-rub { padding: 0 0 15px; }
.ia-bib-rub:last-child { padding-bottom: 0; }
.ia-bib-rub .r { display: flex; align-items: center; gap: 7px; font-family: var(--rp-font-ui);
  font-weight: 700; font-size: 11px; letter-spacing: .02em; color: var(--rp-fg);
  margin: 0 0 7px; line-height: 1.4; }
.ia-bib-rub .r svg { width: 16px; height: 16px; flex: 0 0 16px; stroke: currentColor;
  fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; opacity: .72; }
.ia-bib-rub p { font-size: 14.5px; line-height: 1.68; color: var(--rp-fg-2); margin: 0; }
/* La réponse est la seule chose que le lecteur vient chercher : elle se distingue sans qu'on
   la cherche. `--rp-ocean-texte` est mesuré à 6,68:1 sur ce fond — le jeton de charte
   `--rp-ocean` n'atteint que 2,61:1 et ne peut pas porter du texte. */
.ia-bib-rub--sol { background: var(--rp-bg-alt); border-radius: 10px; padding: 15px 16px;
  margin: 0 0 15px; box-shadow: 0 0 0 1px rgba(29, 37, 52, .05) inset; }
.ia-bib-rub--sol .r { color: var(--rp-ocean-texte); }
.ia-bib-rub--sol .r svg { opacity: 1; }
.ia-bib-rub--sol p { color: var(--rp-primary-blue); }
/* L'ÉTAT DE LA FICHE — « vue Reabel », ou « déroulé en rendez-vous ». Ces deux règles étaient
   emportées par la refonte alors que `fiche()` les émet toujours : une classe sans style ne
   lève rien, elle rend juste du texte nu au milieu d'une carte soignée. */
.ia-bib-etat { font-family: var(--rp-font-ui); font-weight: 700; font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--rp-muted); margin: 0 0 12px; }
.ia-bib-etat--reserve { color: var(--rp-ocean-texte); }
.ia-bib-forme { font-size: 12.5px; line-height: 1.55; color: var(--rp-fg-2); margin: 6px 0 0;
  padding-top: 10px; border-top: 1px dashed var(--rp-border-strong); }

.ia-bib-form { margin: 28px 0 0; padding: 24px; border-radius: 12px;
  background: var(--rp-dark-blue); }
.ia-bib-form h3 { font-family: var(--rp-font-display); font-size: 24px; line-height: 1.25;
  color: var(--rp-fg-on-dark); margin: 0 0 8px; }
.ia-bib-form > p { font-size: 15px; line-height: 1.65; color: rgba(255, 255, 255, .78);
  margin: 0 0 18px; max-width: 66ch; }
.ia-bib-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px; margin: 0 0 16px; }
.ia-bib-champs label { display: flex; flex-direction: column; gap: 6px;
  font-family: var(--rp-font-ui); font-weight: 600; font-size: 12px; letter-spacing: .04em;
  color: rgba(255, 255, 255, .72); }
.ia-bib-champs input { font-family: var(--rp-font-body); font-size: 15px; color: var(--rp-fg);
  background: var(--rp-bg); border: 1px solid var(--rp-border-strong); border-radius: 8px;
  padding: 12px; min-height: 48px; }
.ia-bib-champs input:focus-visible { outline: 3px solid var(--rp-ocean); outline-offset: 2px; }
.ia-bib-pot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ia-bib-msg { font-size: 14px; line-height: 1.55; margin: 14px 0 0; }
.ia-bib-msg.ok { color: var(--rp-mint); }
.ia-bib-msg.err { color: var(--rp-blush); }

/* l'industrie témoin, nommée dès l'accroche */
.ia-hero-industrie { font-size: 15px; line-height: 1.65; color: rgba(255, 255, 255, .72);
  margin: 0 0 30px; max-width: 62ch; padding-left: 14px; border-left: 2px solid var(--rp-gold); }

/* ── « Sous le capot » : l'architecture couche par couche (ia-architecture.js) ──────────── */
.ia-ar-variantes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px; margin: 0 0 18px; }
.ia-ar-variante { text-align: left; background: var(--rp-bg); border: 1px solid var(--rp-border-strong);
  border-radius: 12px; padding: 16px 18px; min-height: 48px; cursor: pointer;
  display: flex; flex-direction: column; gap: 6px;
  transition: background var(--ia-dur) var(--ia-ease), border-color var(--ia-dur) var(--ia-ease); }
.ia-ar-variante .tag { font-family: var(--rp-font-ui); font-weight: 700; font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--rp-muted); }
.ia-ar-variante .lab { font-family: var(--rp-font-ui); font-weight: 600; font-size: 16px;
  line-height: 1.3; color: var(--rp-fg); }
.ia-ar-variante:hover { background: var(--rp-bg-tint); }
.ia-ar-variante[aria-selected="true"] { background: var(--rp-dark-blue); border-color: var(--rp-dark-blue); }
.ia-ar-variante[aria-selected="true"] .lab { color: var(--rp-fg-on-dark); }
.ia-ar-variante[aria-selected="true"] .tag { color: var(--rp-gold); }
.ia-ar-variante:focus-visible { outline: 3px solid var(--rp-ocean); outline-offset: 2px; }
.ia-ar-lead { font-size: 15px; line-height: 1.7; color: var(--rp-fg-2); margin: 0 0 24px; max-width: 72ch; }

.ia-ar-corps { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: 28px;
  align-items: start; }
.ia-ar-etages { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ia-ar-etages button { width: 100%; text-align: left; display: flex; align-items: baseline; gap: 10px;
  background: var(--rp-bg); border: 1px solid var(--rp-border); border-left-width: 3px;
  border-radius: 0 10px 10px 0; padding: 13px 14px; min-height: 48px; cursor: pointer;
  transition: background var(--ia-dur) var(--ia-ease), border-color var(--ia-dur) var(--ia-ease); }
.ia-ar-etages button.souv { border-left-color: var(--rp-ocean); }
.ia-ar-etages button.nonsouv { border-left-color: var(--rp-gold); }
.ia-ar-etages button:hover { background: var(--rp-bg-tint); }
.ia-ar-etages button[aria-current="true"] { background: var(--rp-dark-blue); border-color: var(--rp-dark-blue); }
.ia-ar-etages button[aria-current="true"] .t { color: var(--rp-fg-on-dark); }
.ia-ar-etages button[aria-current="true"] .n { color: var(--rp-gold); }
.ia-ar-etages .n { font-family: var(--rp-font-ui); font-weight: 700; font-size: 11px;
  letter-spacing: .08em; color: var(--rp-muted); }
.ia-ar-etages .t { font-family: var(--rp-font-ui); font-weight: 600; font-size: 14.5px;
  line-height: 1.35; color: var(--rp-fg); }
.ia-ar-etages button:focus-visible { outline: 3px solid var(--rp-ocean); outline-offset: 2px; }

.ia-ar-detail { border: 1px solid var(--rp-border-strong); border-radius: 12px; padding: 24px;
  background: var(--rp-bg); box-shadow: var(--rp-shadow-sm); }
.ia-ar-detail .flux { font-family: var(--rp-font-ui); font-weight: 700; font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; margin: 0 0 10px; }
.ia-ar-detail .flux.souv { color: var(--rp-ocean-texte); }
.ia-ar-detail .flux.nonsouv { color: var(--rp-or-texte); }
.ia-ar-detail h3 { font-family: var(--rp-font-display); font-size: 26px; line-height: 1.2;
  color: var(--rp-fg); margin: 0 0 4px; }
.ia-ar-detail .sub { font-size: 13.5px; line-height: 1.5; color: var(--rp-muted); margin: 0 0 14px; }
.ia-ar-detail .body { font-size: 15px; line-height: 1.7; color: var(--rp-fg-2); margin: 0 0 16px; max-width: 66ch; }
.ia-ar-detail .pourquoi { border-top: 1px solid var(--rp-border); padding-top: 14px; }
.ia-ar-detail .pourquoi .r { font-family: var(--rp-font-ui); font-weight: 700; font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--rp-corail-texte); margin: 0 0 6px; }
.ia-ar-detail .pourquoi p { font-size: 14.5px; line-height: 1.7; color: var(--rp-fg); margin: 0; max-width: 66ch; }
.ia-ar-nav { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0; }
.ia-ar-nav button { font-family: var(--rp-font-ui); font-weight: 600; font-size: 14px;
  border-radius: 8px; padding: 12px 18px; min-height: 48px; cursor: pointer;
  border: 1px solid var(--rp-border-strong); background: var(--rp-bg); color: var(--rp-primary-blue); }
.ia-ar-nav .ia-ar-suiv { background: var(--rp-dark-blue); border-color: var(--rp-dark-blue);
  color: var(--rp-fg-on-dark); }
.ia-ar-nav button[disabled] { opacity: .45; cursor: default; }
.ia-ar-nav button:focus-visible { outline: 3px solid var(--rp-ocean); outline-offset: 2px; }

.ia-ar-contrainte { margin: 24px 0 0; padding: 18px 22px; border-left: 3px solid var(--rp-coral);
  background: var(--rp-bg-tint); border-radius: 0 12px 12px 0; }
.ia-ar-contrainte .t { font-family: var(--rp-font-ui); font-weight: 700; font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--rp-corail-texte); margin: 0 0 8px; }
.ia-ar-contrainte p { font-size: 15px; line-height: 1.7; color: var(--rp-fg); margin: 0; max-width: 74ch; }

.ia-ar-guards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px; margin: 26px 0 0; }
.ia-ar-guard { border: 1px solid var(--rp-border-strong); border-radius: 12px; padding: 20px;
  background: var(--rp-bg); }
.ia-ar-guard .tag { font-family: var(--rp-font-ui); font-weight: 700; font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--rp-ocean-texte); margin: 0 0 6px; }
.ia-ar-guard .n { font-family: var(--rp-font-ui); font-weight: 600; font-size: 16px;
  line-height: 1.3; color: var(--rp-fg); margin: 0 0 8px; }
.ia-ar-guard .b { font-size: 14px; line-height: 1.65; color: var(--rp-fg-2); margin: 0 0 8px; }
.ia-ar-guard .w { font-size: 13.5px; line-height: 1.6; color: var(--rp-muted); margin: 0; }

@media (max-width: 900px) { .ia-ar-corps { grid-template-columns: 1fr; gap: 18px; } }

/* l'exemple qui ancre la couche dans le cas déroulé plus haut */
.ia-ar-exemple { margin: 0 0 16px; padding: 12px 14px; background: var(--rp-bg-alt);
  border-radius: 8px; max-width: 66ch; }
.ia-ar-exemple span { display: block; font-family: var(--rp-font-ui); font-weight: 700;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--rp-ocean);
  margin-bottom: 4px; }
.ia-ar-exemple em { font-style: normal; font-size: 14.5px; line-height: 1.65; color: var(--rp-fg); }

/* bascule lecture métier / lecture technique */
.ia-ar-lecture { display: inline-flex; gap: 0; margin: 0 0 20px; border: 1px solid var(--rp-border-strong);
  border-radius: 999px; padding: 3px; background: var(--rp-bg); }
.ia-ar-lecture button { font-family: var(--rp-font-ui); font-weight: 600; font-size: 13px;
  color: var(--rp-fg-2); background: transparent; border: 0; border-radius: 999px;
  padding: 10px 18px; min-height: 44px; cursor: pointer;
  transition: background var(--ia-dur) var(--ia-ease), color var(--ia-dur) var(--ia-ease); }
.ia-ar-lecture button[aria-pressed="true"] { background: var(--rp-dark-blue); color: var(--rp-fg-on-dark); }
.ia-ar-lecture button:focus-visible { outline: 3px solid var(--rp-ocean); outline-offset: 2px; }

.ia-ar-tech { margin: 0 0 16px; padding: 16px 18px; border-radius: 8px;
  background: var(--rp-dark-blue); }
.ia-ar-tech .t { font-family: var(--rp-font-ui); font-weight: 700; font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--rp-gold); margin: 0 0 10px; }
.ia-ar-tech ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ia-ar-tech li { position: relative; padding-left: 18px; font-size: 14px; line-height: 1.6;
  color: rgba(255, 255, 255, .85); font-family: var(--rp-font-body); }
.ia-ar-tech li::before { content: '›'; position: absolute; left: 2px; color: var(--rp-ocean); font-weight: 700; }

/* schéma d'ensemble de la lecture technique */
:root { --rp-fg-on-dark-2: rgba(255, 255, 255, .72); }  /* texte secondaire sur fond sombre */
.ia-ar-schema { margin: 26px 0 0; padding: 22px; border: 1px solid var(--rp-border-strong);
  border-radius: 12px; background: var(--rp-bg); }
.ia-ar-schema .t { font-family: var(--rp-font-ui); font-weight: 700; font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--rp-muted); margin: 0 0 14px; }
/* le schéma est large : il défile DANS son cadre, la page ne défile jamais latéralement.
   Les ombres de défilement (fond local + ombre fixe) n'apparaissent QUE s'il reste du
   contenu hors champ — l'indice disparaît de lui-même sur écran assez large. */
.ia-ar-schema .vp { overflow-x: auto; overflow-y: hidden;
  background:
    linear-gradient(90deg, var(--rp-bg) 40%, transparent) 0 0 / 48px 100%,
    linear-gradient(270deg, var(--rp-bg) 40%, transparent) 100% 0 / 48px 100%,
    radial-gradient(farthest-side at 0 50%, rgba(29, 37, 52, .22), transparent) 0 0 / 18px 100%,
    radial-gradient(farthest-side at 100% 50%, rgba(29, 37, 52, .22), transparent) 100% 0 / 18px 100%;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll; }
.ia-ar-schema .vp svg { min-width: 1000px; display: block; font-family: var(--rp-font-ui); }
.ia-ar-schema .lg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px;
  font-size: 12.5px; color: var(--rp-muted); margin: 14px 0 0; }
.ia-ar-schema .lg span { width: 22px; height: 0; border-top: 2px solid var(--rp-ocean); }
.ia-ar-schema .lg .nonsouv { border-top-style: dashed; border-top-color: var(--rp-gold); }
.ia-ar-schema .lg .ret { border-top-style: dashed; border-top-color: var(--rp-coral); }
.ia-ar-schema-txt { margin: 12px 0 0; }
.ia-ar-schema-txt summary { font-family: var(--rp-font-ui); font-weight: 600; font-size: 13px;
  color: var(--rp-primary-blue); cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.ia-ar-schema-txt ol { margin: 4px 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.ia-ar-schema-txt li { font-size: 13.5px; line-height: 1.55; color: var(--rp-fg-2); }

/* ------------------------------------------------------------------ *
 * 04 — Diagnostic deux axes                                           *
 * ------------------------------------------------------------------ */
.ia-dx-note { font-size: 13px; line-height: 1.6; color: var(--rp-muted); margin: 0 0 20px; max-width: 70ch; }
.ia-dx-jauge { display: flex; align-items: center; gap: 14px; margin: 0 0 26px; }
.ia-dx-jauge .b { flex: 1; height: 6px; border-radius: 3px; background: var(--rp-border); overflow: hidden; }
.ia-dx-jauge .b i { display: block; height: 100%; background: var(--rp-ocean); transition: width .25s ease; }
.ia-dx-jauge span { font-family: var(--rp-font-ui); font-weight: 600; font-size: 13px;
  color: var(--rp-muted); font-variant-numeric: tabular-nums; }
.ia-dx-etape { font-family: var(--rp-font-display); font-size: 26px; line-height: 1.25;
  color: var(--rp-fg); margin: 0 0 10px; }
.ia-dx-intent { font-size: 15px; line-height: 1.65; color: var(--rp-fg-2); margin: 0 0 26px; max-width: 70ch; }

.ia-dx-q { border: 0; margin: 0 0 22px; padding: 0; }
.ia-dx-q legend { font-size: 15.5px; line-height: 1.6; color: var(--rp-fg); padding: 0; margin: 0 0 10px; max-width: 74ch; }
.ia-dx-q legend .aide { display: block; font-size: 13px; color: var(--rp-muted); margin-top: 2px; }
.ia-dx-echelle { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.ia-dx-opt { display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 8px 12px;
  border: 1px solid var(--rp-border); border-radius: 8px; background: var(--rp-bg);
  font-size: 14px; color: var(--rp-fg-2); cursor: pointer; }
.ia-dx-opt.on { border-color: var(--rp-primary-blue); background: var(--rp-bg-tint); color: var(--rp-primary-blue); font-weight: 600; }
.ia-dx-opt input { accent-color: var(--rp-primary-blue); width: 17px; height: 17px; flex: none; }
.ia-dx-opt:focus-within { outline: 3px solid var(--rp-ocean); outline-offset: 2px; }
.ia-dx-partiel { font-size: 13px; line-height: 1.6; color: var(--rp-muted); margin: 26px 0 0; max-width: 70ch; }
.ia-dx-nav { margin-top: 18px; }

.ia-dx-banniere { font-size: 13.5px; line-height: 1.6; color: var(--rp-fg-2); margin: 0 0 24px;
  padding: 12px 14px; border-left: 3px solid var(--rp-gold); background: var(--rp-bg-alt);
  border-radius: 0 8px 8px 0; }
.ia-dx-axes { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin: 0 0 40px; }
.ia-dx-axe { padding: 22px; border: 1px solid var(--rp-border-strong); border-radius: 12px; background: var(--rp-bg); }
.ia-dx-axe .t { font-family: var(--rp-font-ui); font-weight: 700; font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--rp-muted); margin: 0 0 10px; }
.ia-dx-axe .p { font-family: var(--rp-font-display); font-size: 28px; line-height: 1.15; margin: 0 0 10px; }
.ia-dx-axe--produit .p { color: var(--rp-coral); }
.ia-dx-axe--fonctions .p { color: var(--rp-ocean); }
.ia-dx-axe .c { font-size: 14.5px; line-height: 1.6; color: var(--rp-fg-2); margin: 0; }
.ia-dx-h3 { font-family: var(--rp-font-display); font-size: 22px; line-height: 1.3; color: var(--rp-fg); margin: 0 0 8px; }
.ia-dx-detail { display: grid; gap: 22px 30px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin: 0 0 40px; }
.ia-dx-detail .t { font-family: var(--rp-font-ui); font-weight: 700; font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--rp-muted); margin: 0 0 10px; }
.ia-dx-detail ul { list-style: none; margin: 0; padding: 0; }
.ia-dx-detail li { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px 14px;
  padding: 10px 0; border-bottom: 1px solid var(--rp-border); font-size: 14px; }
/* Jauge à quatre segments : la couleur illustre le palier, elle ne le remplace pas — le nom
   reste écrit à côté et l'aria-label le répète. */
.ia-dx-detail .j, .ia-dx-axe .j { display: inline-flex; gap: 3px; }
.ia-dx-detail .j i { width: 16px; height: 6px; border-radius: 2px; }
.ia-dx-axe .j { margin: 0 0 14px; }
.ia-dx-axe .j i { width: 30px; height: 7px; border-radius: 2px; }
.ia-dx-detail .j i.v, .ia-dx-axe .j i.v { background: var(--rp-bg-tint); box-shadow: inset 0 0 0 1px var(--rp-border); }
/* ── LA MATRICE EFFORT × DÉLAI (PO 17/08) ─────────────────────────────────────────────
   Un schéma en HTML et non en image : la règle du 07/08 interdit le texte dans une
   illustration, et un tableau dessiné se traduit, se corrige et se lit à la voix.
   Le voile de vert profond porte le nombre — c'est lui qui rend la diagonale visible
   avant qu'on ait lu un seul chiffre. Titre et légende en encres claires : la matrice ne
   vit que sur la section marine, et le gris d'origine y tombait sous l'AA. */
.ia-bib-mat-t { font-family: var(--rp-font-ui); font-weight: 700; font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .62); margin: 34px 0 6px; }
.ia-bib-mat-l { font-size: 14.5px; color: rgba(255, 255, 255, .7); margin: 0 0 18px; max-width: 68ch; }
.ia-bib-matrice { margin: 0 0 26px; overflow-x: auto; }
.ia-bib-mat-axe--d { display: grid; grid-template-columns: repeat(3, minmax(96px, 1fr));
  gap: 8px; margin-left: 108px; margin-bottom: 6px; }
/* CARTE DE CHALEUR (option A, PO 19/08). La matrice vit sur la section marine : neuf dalles
   blanches y refaisaient le damier qu'on vient de quitter, et la pastille-barre n'encodait
   sa hauteur nulle part où l'œil la compare. La case prend la surface sombre des tuiles ;
   un voile de vert profond — celui des têtes de cartes — porte la densité par son opacité ;
   la case filtrée est cerclée d'or, comme la tuile 2.2. */
.ia-bib-mat-axe--d span { font-family: var(--rp-font-ui); font-size: 11px; letter-spacing: .05em;
  text-transform: uppercase; color: rgba(255, 255, 255, .6); text-align: center; }
.ia-bib-mat-corps { display: grid; grid-template-columns: 100px repeat(3, minmax(96px, 1fr));
  gap: 10px; align-items: stretch; }
.ia-bib-mat-eff { font-family: var(--rp-font-ui); font-size: 11px; letter-spacing: .05em;
  text-transform: uppercase; color: rgba(255, 255, 255, .6); display: flex; align-items: center;
  justify-content: flex-end; text-align: right; padding-right: 12px; }
.ia-bib-mat-case { position: relative; display: flex; flex-direction: column;
  align-items: flex-start; justify-content: flex-end; gap: 2px; min-height: 96px; padding: 14px 16px 12px;
  border: 0; border-radius: 12px;
  background: linear-gradient(180deg, var(--rp-primary-blue), #28334A);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .11) inset;
  cursor: pointer; font: inherit; overflow: hidden; }
.ia-bib-mat-case .fond { position: absolute; inset: 0; border-radius: 12px;
  background: var(--rp-ocean-texte); pointer-events: none;
  /* .07 pour qu'une case à un seul cas se distingue déjà du vide, .68 au plus dense */
  opacity: calc(0.07 + var(--part) * 0.61); }
.ia-bib-mat-case b { position: relative; font-family: var(--rp-font-display); font-size: 30px;
  line-height: 1; color: var(--rp-fg-on-dark); font-variant-numeric: tabular-nums; }
.ia-bib-mat-case .u { position: relative; font-family: var(--rp-font-ui); font-weight: 700;
  font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255, 255, 255, .72); }
.ia-bib-mat-case:hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, .35) inset; }
.ia-bib-mat-case.on { box-shadow: 0 0 0 2px var(--rp-gold), 0 14px 30px -18px rgba(0, 0, 0, .6); }
.ia-bib-mat-case:focus-visible { outline: 3px solid var(--rp-gold); outline-offset: 2px; }
.ia-bib-mat-case--vide { background: transparent;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .10) inset; cursor: default; }
.ia-bib-mat-case--vide b { color: rgba(255, 255, 255, .35); font-size: 20px; }
.ia-bib-mat-case--vide .u { color: rgba(255, 255, 255, .35); }
@media (max-width: 620px) {
  .ia-bib-mat-axe--d { margin-left: 76px; grid-template-columns: repeat(3, minmax(72px, 1fr)); }
  .ia-bib-mat-corps { grid-template-columns: 68px repeat(3, minmax(72px, 1fr)); }
  .ia-bib-mat-eff { font-size: 10px; }
}

/* TROIS AXES DEPUIS LE 16/08. La grille est en `auto-fit minmax(280px, 1fr)` : elle accueille
   la troisième carte sans être touchée. Ce qui suit ne concerne que la carte de l'axe 3, qui
   n'affiche pas un palier mais un DÉNOMBREMENT — neuf segments, pas quatre. */
.ia-dx-axe--fabrique .p { color: var(--rp-coral); }
/* À 30 px fixes, neuf segments font 294 px et débordent une carte de 280 px : ils se partagent
   la largeur disponible au lieu de la fixer. Le `min-width` garde un segment visible même à
   quinze fonctions, si la liste s'allonge un jour. */
.ia-dx-axe .j--compte { display: flex; gap: 3px; }
.ia-dx-axe .j--compte i { width: auto; flex: 1 1 0; min-width: 6px; }
/* Le compte est une phrase, pas un mot : 28 px la font tenir sur trois lignes dans une carte
   étroite, et la carte se désaligne des deux autres. */
.ia-dx-axe--fonctions .p { font-size: 21px; }
@media (max-width: 520px) {
  .ia-dx-detail li { grid-template-columns: 1fr auto; }
  .ia-dx-detail .j { grid-column: 1 / -1; }
}
.ia-dx-detail .n { color: var(--rp-fg-2); }
.ia-dx-detail .p { font-family: var(--rp-font-ui); font-weight: 600; color: var(--rp-fg); white-space: nowrap; }
.ia-dx-detail .p.non { font-weight: 400; color: var(--rp-muted); font-style: italic; }
.ia-dx-chantiers { list-style: none; counter-reset: dxc; margin: 0 0 40px; padding: 0;
  display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.ia-dx-chantiers li { counter-increment: dxc; padding: 22px; border: 1px solid var(--rp-border-strong);
  border-radius: 12px; background: var(--rp-bg); }
.ia-dx-chantiers li::before { content: counter(dxc); font-family: var(--rp-font-ui); font-weight: 700;
  font-size: 12px; color: var(--rp-gold); letter-spacing: .1em; }
.ia-dx-chantiers .t { font-family: var(--rp-font-ui); font-weight: 700; font-size: 17px;
  color: var(--rp-fg); margin: 6px 0 4px; }
.ia-dx-chantiers .p { font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--rp-muted); margin: 0 0 10px; }
.ia-dx-chantiers .c { font-size: 14px; line-height: 1.6; color: var(--rp-fg-2); margin: 0 0 12px; }
.ia-dx-lien { font-family: var(--rp-font-ui); font-weight: 600; font-size: 13.5px;
  color: var(--rp-primary-blue); background: none; border: 0; padding: 10px 0; min-height: 44px;
  cursor: pointer; text-align: left; }
.ia-dx-lien:hover { text-decoration: underline; }
.ia-dx-lien:focus-visible, .ia-dx-jauge:focus-visible { outline: 3px solid var(--rp-ocean); outline-offset: 2px; }
.ia-dx-suite { padding: 26px; border: 1px solid var(--rp-border-strong); border-radius: 12px; background: var(--rp-bg-alt); }
.ia-dx-suite h3 { font-family: var(--rp-font-display); font-size: 22px; color: var(--rp-fg); margin: 0 0 8px; }
.ia-dx-suite p { font-size: 15px; line-height: 1.65; color: var(--rp-fg-2); margin: 0 0 18px; max-width: 70ch; }
.ia-dx-avenir { font-size: 13px; color: var(--rp-muted); font-style: italic; margin: 12px 0 0; }
.ia-dx-etape:focus-visible { outline: 3px solid var(--rp-ocean); outline-offset: 4px; }
.ia-dx-confirme { margin: 18px 0 0; padding: 18px; border: 1px solid var(--rp-coral);
  border-radius: 10px; background: var(--rp-bg); }
.ia-dx-confirme p { font-size: 14.5px; line-height: 1.6; color: var(--rp-fg); margin: 0 0 14px; max-width: 64ch; }
/* Ce qui manque, et où : le module comptait sans jamais nommer les trous. */
.ia-dx-manque { font-size: 13px; line-height: 1.7; color: var(--rp-fg-2); margin: -14px 0 24px; }
.ia-dx-manque--ok { color: var(--rp-ocean); }
.ia-dx-vers { font-family: var(--rp-font-ui); font-weight: 700; font-size: 13px;
  color: var(--rp-primary-blue); background: var(--rp-bg-tint); border: 1px solid var(--rp-border-strong);
  border-radius: 6px; padding: 2px 9px; margin: 0 1px; min-height: 28px; cursor: pointer; }
.ia-dx-vers:hover { background: var(--rp-primary-blue); color: var(--rp-fg-on-dark, #fff); }
.ia-dx-vers:focus-visible { outline: 3px solid var(--rp-ocean); outline-offset: 2px; }

/* Les trois états du simulateur, en regard. Montrés ensemble, les deux pourcentages de gain se
   voient agir — au premier cran, seuls, ils semblaient sans effet et l'outil paraissait cassé. */
.ia-cur-sim-etats { display: grid; gap: 14px; margin: 16px 0 0;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.ia-cur-sim-etat { padding: 16px 18px; border: 1px solid var(--rp-border);
  border-radius: 10px; background: var(--rp-bg); }
.ia-cur-sim-etat.on { border-color: var(--cur); box-shadow: inset 3px 0 0 var(--cur); }
.ia-cur-sim-etat .t { font-family: var(--rp-font-ui); font-weight: 700; font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--rp-muted); margin: 0 0 10px; }
.ia-cur-sim-etat.on .t { color: var(--cur); }
.ia-cur-sim-etat .h { font-family: var(--rp-font-ui); font-weight: 700; font-size: 30px;
  line-height: 1; color: var(--rp-fg); margin: 0; font-variant-numeric: tabular-nums; }
.ia-cur-sim-etat.on .h { color: var(--cur); }
.ia-cur-sim-etat span { display: block; font-size: 12.5px; line-height: 1.4;
  color: var(--rp-muted); margin-top: 3px; }
.ia-cur-sim-etat .k { font-size: 13px; color: var(--rp-fg-2); margin: 10px 0 0;
  font-variant-numeric: tabular-nums; }
/* Le gain, en dominant : l'euro d'abord, les heures ensuite, le calcul en note. */
.ia-cur-sim-etat .ge { font-family: var(--rp-font-ui); font-weight: 700; font-size: 34px;
  line-height: 1; color: var(--rp-ocean); margin: 0; font-variant-numeric: tabular-nums; }
.ia-cur-sim-etat.on .ge { color: var(--cur); }
.ia-cur-sim-etat .gs { display: block; font-size: 12.5px; line-height: 1.4; color: var(--rp-fg-2); margin-top: 3px; }
.ia-cur-sim-etat .gh { font-family: var(--rp-font-ui); font-weight: 600; font-size: 15px;
  color: var(--rp-ocean); margin: 8px 0 0; }
.ia-cur-sim-etat.on .gh { color: var(--cur); }

/* ------------------------------------------------------------------ *
 * Architecture — les couches déroulées (un seul contrôle, PO 30/07)   *
 * ------------------------------------------------------------------ */
.ia-ar-fil { list-style: none; margin: 26px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 18px; }
.ia-ar-couche { padding: 24px 26px; border: 1px solid var(--rp-border-strong);
  border-radius: 12px; background: var(--rp-bg); border-left-width: 3px; }
.ia-ar-couche.souv { border-left-color: var(--rp-ocean); }
.ia-ar-couche.nonsouv { border-left-color: var(--rp-gold); }
.ia-ar-couche .flux { font-family: var(--rp-font-ui); font-weight: 700; font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; margin: 0 0 8px; }
.ia-ar-couche.souv .flux { color: var(--rp-ocean); }
.ia-ar-couche.nonsouv .flux { color: var(--rp-gold); }
.ia-ar-couche h3 { font-family: var(--rp-font-display); font-size: 22px; line-height: 1.25;
  color: var(--rp-fg); margin: 0 0 2px; }
.ia-ar-couche h3 .n { color: var(--rp-muted); font-size: 15px; margin-right: 6px; }
.ia-ar-couche .sub { font-size: 13px; color: var(--rp-muted); margin: 0 0 12px; }
.ia-ar-couche .body { font-size: 15px; line-height: 1.65; color: var(--rp-fg-2); margin: 0 0 14px; max-width: 78ch; }
.ia-ar-couche .ia-ar-exemple { margin: 0 0 14px; }
.ia-ar-couche .pourquoi { margin: 0; }
.ia-ar-tech-pli { margin: 16px 0 0; }
/* Un dépliant doit se DIRE dépliant (retour PO 30/07) : sans chevron ni relief, « Les composants
   techniques » se lisait comme un intertitre mort. Style de bouton + chevron qui pivote. */
.ia-ar-tech-pli summary { font-family: var(--rp-font-ui); font-weight: 600; font-size: 13.5px;
  color: var(--rp-primary-blue); cursor: pointer; min-height: 44px;
  display: inline-flex; align-items: center; gap: 9px; padding: 0 16px;
  background: var(--rp-bg-tint); border: 1px solid var(--rp-border-strong); border-radius: 8px;
  list-style: none; transition: border-color .15s ease; }
.ia-ar-tech-pli summary::-webkit-details-marker { display: none; }
.ia-ar-tech-pli summary::before { content: '▸'; font-size: 12px; transition: transform .15s ease; }
.ia-ar-tech-pli[open] summary::before { transform: rotate(90deg); }
.ia-ar-tech-pli summary:hover { border-color: var(--rp-primary-blue); }
.ia-ar-tech-pli summary::after { content: attr(data-nb); font-weight: 400; font-size: 12px;
  color: var(--rp-muted); }
.ia-ar-tech-pli ul { margin: 12px 0 8px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.ia-ar-tech-pli li { font-size: 13.5px; line-height: 1.55; color: var(--rp-fg-2); }
.ia-ar-schema { margin-top: 26px; }

/* ---- impression de la restitution du diagnostic (arbitrage PO 30/07, tâche #26) ----
   Le bouton « Imprimer / enregistrer en PDF » pose .rp-print-dx sur <html> le temps de
   l'impression : seule la restitution sort, sans navigation ni boutons. Un Ctrl+P sans
   passer par le bouton imprime la page entière, comme partout ailleurs. */
@media print {
  html.rp-print-dx .site-header,
  html.rp-print-dx .ia-sommaire,
  html.rp-print-dx .site-footer,
  html.rp-print-dx footer,
  html.rp-print-dx .ia-page > section:not(#rp-diagnostic),
  html.rp-print-dx #rp-diagnostic .ia-actions,
  html.rp-print-dx #rp-diagnostic .ia-dx-suite,
  html.rp-print-dx #rp-diagnostic [data-banniere][hidden] { display: none !important; }
  html.rp-print-dx #rp-diagnostic { padding: 0; }
  /* les jauges de palier sont des fonds : sans cette directive, l'impression les blanchit */
  html.rp-print-dx .ia-dx .j i { print-color-adjust: exact; -webkit-print-color-adjust: exact; }

  /* Depuis la page déroulée (19/08), plus aucune section n'est masquée : un Ctrl+P
     ordinaire sort la page entière par construction. Seul le sommaire — une navigation —
     n'a rien à faire sur papier. */
  html:not(.rp-print-dx) .ia-sommaire { display: none !important; }
}

/* cadrage du hero : rattache la page au plan de création de valeur (PO 31/07) */
.ia-lead--cadrage { margin-top: 18px; }

/* ------------------------------------------------------------------ *
 * LA NATURE DE CHAQUE AXE, MONTRÉE PLUTÔT QU'EXPLIQUÉE (PO 17/08).
 *
 * La colonne de gauche de l'axe 1 portait un paragraphe puis NEUF CENTS PIXELS DE VIDE en
 * regard des cartes — c'est ce déséquilibre que le PO a relevé. Le remplir de texte aurait
 * alourdi une page qu'il trouve déjà lourde ; ces trois figures disent en un coup d'œil ce
 * que trois paragraphes disaient mal : une chaîne se lit par son maillon faible, une
 * trajectoire par sa destination, un dénombrement se compte.
 *
 * AUCUN TEXTE DANS UNE IMAGE (règle du 07/08) : tout est du HTML et du CSS. Les libellés
 * portent un `data-edit`, se traduisent, se lisent au lecteur d'écran et se corrigent en une
 * ligne. Seuls les traits et les pastilles sont décoratifs, et ils sont `aria-hidden`.
 * ------------------------------------------------------------------ */
.ia-nat { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--rp-border-strong); }
.ia-nat-t { font-family: var(--rp-font-ui); font-weight: 700; font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--rp-muted); margin: 0 0 20px; }
.ia-nat-l { font-family: var(--rp-font-ui); font-weight: 600; font-size: 13.5px; color: var(--rp-fg);
  margin: 22px 0 10px; }
.ia-nat-l:first-of-type { margin-top: 0; }
.ia-nat-r { font-size: 13.5px; line-height: 1.55; color: var(--rp-fg-2); margin: 10px 0 0; }
.ia-nat-r b { font-weight: 600; color: var(--rp-fg); }

/* La chaîne : trois maillons reliés, celui du milieu VISIBLEMENT plus bas — c'est lui qui
   fixe le palier, et la figure doit le faire voir avant qu'on ait lu la légende. */
.ia-nat-chaine { list-style: none; display: flex; align-items: flex-end; gap: 6px; margin: 0; padding: 0; }
.ia-nat-chaine li { flex: 1; display: flex; align-items: center; justify-content: center;
  height: 44px; border-radius: 8px; background: var(--rp-bg-tint);
  border: 1px solid var(--rp-border-strong); position: relative; }
.ia-nat-chaine li + li::before { content: ""; position: absolute; left: -7px; top: 50%;
  width: 8px; height: 1px; background: var(--rp-border-strong); }
.ia-nat-chaine li.bas { height: 26px; background: var(--rp-coral); border-color: var(--rp-coral); }
.ia-nat-chaine li.bas b { color: var(--rp-fg-on-dark); }
.ia-nat-chaine b { font-family: var(--rp-font-ui); font-weight: 700; font-size: 13px; color: var(--rp-fg); }

/* La trajectoire : deux départs, un mur, une arrivée. Le mur EST le plafond du calcul.
   Le mur ne s'étire plus (`flex: 1` poussait l'arrivée à l'autre bout de la colonne et la
   figure se lisait comme trois objets sans rapport — retour PO 19/08) : départs, mur et
   arrivée se tiennent, reliés par les mêmes traits que la chaîne au-dessus. */
.ia-nat-traj { display: flex; align-items: center; gap: 0; }
.ia-nat-traj .dep { display: flex; flex-direction: column; gap: 4px; }
.ia-nat-traj .dep b, .ia-nat-traj .arr b { display: block; font-family: var(--rp-font-ui);
  font-weight: 700; font-size: 13px; padding: 5px 12px; border-radius: 8px;
  background: var(--rp-bg-tint); border: 1px solid var(--rp-border-strong); color: var(--rp-fg); }
.ia-nat-traj .mur { flex: 0 0 auto; height: 44px; border-left: 2px dashed var(--rp-gold);
  margin-left: 14px; }
.ia-nat-traj .arr { margin-left: 14px; }
.ia-nat-traj .arr b { background: var(--rp-dark-blue); border-color: var(--rp-dark-blue);
  color: var(--rp-fg-on-dark); }

/* Le dénombrement : neuf pastilles, trois pleines. Un compte, pas une jauge — une barre
   suggérerait une progression continue là où il n'y a que des fonctions indépendantes. */
.ia-nat-cpt { display: flex; flex-wrap: wrap; gap: 6px; }
.ia-nat-cpt i { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--rp-border-strong); }
.ia-nat-cpt i.on { background: var(--rp-dark-blue); border-color: var(--rp-dark-blue); }

/* LES CARTES D'UN MÊME GROUPE ONT LA MÊME HAUTEUR. Sans cela, un texte long chez l'une
   creuse un blanc chez les autres — le second défaut relevé le 17/08. */
.ia-grp-grid { align-items: stretch; }
.ia-grp-grid .ia-tile { display: flex; flex-direction: column; }
.ia-grp-grid .ia-tile .b { margin-top: auto; }

/* ------------------------------------------------------------------ *
 * LA RANGÉE DES SIX FICHES DE L'AXE 1 (demande PO 19/08 : « dans un carrousel également
 * pour gagner de la place »). Mécanique MANUELLE, celle de la bibliothèque — six cartes
 * denses se lisent, elles ne défilent pas toutes seules comme le rail de l'axe 2. Les deux
 * noms de groupe sont des JALONS dans la rangée : on sait toujours dans quel volet on est.
 * Elle ne vit que sur la section marine rp-cadre : encres claires directes.
 * ------------------------------------------------------------------ */
.ia-tuiles-rangee { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x proximity;
  align-items: stretch; padding: 4px 4px 14px; scrollbar-width: thin; }
.ia-tuiles-rangee:focus-visible { outline: 3px solid var(--rp-gold); outline-offset: 2px; }
.ia-tuiles-rangee .ia-tile { flex: 0 0 min(340px, 82vw); scroll-snap-align: start;
  display: flex; flex-direction: column; }
.ia-tuiles-rangee .ia-tile .b { margin-top: auto; }
.ia-rangee-jalon { flex: 0 0 150px; display: flex; align-items: flex-end;
  scroll-snap-align: start; padding-bottom: 8px; }
.ia-rangee-jalon .ia-grp-name { margin: 0; }
.ia-rangee-barre { display: flex; align-items: center; gap: 12px; margin: 2px 0 0; }
.ia-rangee-btn { width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto;
  /* .6 et non .35 : un composant d'interface exige 3:1 sur son fond (🔴 veille 19/08) */
  border: 1px solid rgba(255, 255, 255, .6); background: transparent;
  color: var(--rp-fg-on-dark); font-size: 20px; line-height: 1; cursor: pointer; }
.ia-rangee-btn:hover { border-color: var(--rp-fg-on-dark); }
.ia-rangee-btn:focus-visible { outline: 3px solid var(--rp-gold); outline-offset: 2px; }

/* Le point de preuve agrégé du héros (avis benchmark, soldé PO 19/08) : trois pastilles
   sobres sous l'accroche — le motif des « 300+ éditeurs » de l'accueil, en régime sombre. */
.ia-preuve { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.ia-preuve-chip { font-family: var(--rp-font-ui); font-weight: 600; font-size: 12px;
  letter-spacing: .06em; color: rgba(255, 255, 255, .85);
  border: 1px solid rgba(255, 255, 255, .4); border-radius: var(--rp-radius-pill);
  padding: 8px 16px; white-space: nowrap; }
/* L'AXE 1 S'EMPILE (PO 19/08, 3e passe : « le vide est à gauche maintenant ! »).
   Tant que la rangée vivait dans la colonne de droite, le vide changeait de camp à chaque
   correction — la colonne courte laissait toujours un blanc en regard de la longue. Fini
   les colonnes : l'intro devient un BANDEAU (titre à gauche, texte en regard, mêmes
   largeurs qu'avant pour la continuité visuelle), puis la rangée et le pied prennent
   toute la largeur. L'axe 2 garde ses colonnes : son intro est assez longue pour les tenir. */
.ia-axe--pile { grid-template-columns: 1fr; }
.ia-axe--pile .ia-axe-side { display: grid; grid-template-columns: minmax(240px, 340px) 1fr;
  grid-template-rows: auto 1fr; column-gap: 40px; row-gap: 6px; margin-bottom: 26px; }
.ia-axe--pile .ia-axe-side .n { grid-column: 1; }
.ia-axe--pile .ia-axe-side .name { grid-column: 1; }
.ia-axe--pile .ia-axe-side .b { grid-column: 2; grid-row: 1 / span 2; max-width: 66ch; }
@media (max-width: 900px) {
  .ia-axe--pile .ia-axe-side { grid-template-columns: 1fr; grid-template-rows: none; }
  .ia-axe--pile .ia-axe-side .b { grid-column: 1; grid-row: auto; }
}

/* LE PIED DE L'AXE 1 : la figure « comment se lit un palier » quitte la colonne de gauche
   — la rangée a raccourci le corps, la figure y creusait un grand vide en bas à droite
   (constat PO 19/08). Elle vit désormais à côté du texte de conclusion, et la colonne de
   gauche redevient ce qu'elle est sur l'axe 2 : un titre et une introduction. */
.ia-axe-pied { display: grid; grid-template-columns: minmax(300px, 400px) 1fr;
  gap: 36px; align-items: start; margin-top: 26px;
  /* pleine largeur SOUS les deux colonnes de l'axe : dans la colonne de droite, il
     recreusait à gauche le vide qu'il venait de combler à droite (PO 19/08, 2e passe) */
  grid-column: 1 / -1; }
.ia-axe-pied .ia-nat { margin-top: 0; }
.ia-axe-pied .ia-grp-note { margin-top: 0; }
@media (max-width: 900px) { .ia-axe-pied { grid-template-columns: 1fr; gap: 24px; } }

@media (max-width: 900px) { .ia-nat { margin-top: 20px; } }

/* ------------------------------------------------------------------ *
 * DEUX CONTRASTES SOUS AA, TROUVÉS PAR LE GARDIEN UX APRÈS MISE EN PRODUCTION (17/08).
 *
 * Le premier est le plus instructif : la tuile mise en avant (2.2) surchargeait TOUTES ses
 * couleurs pour son fond sombre — le code, le sur-titre, le nom, le corps — sauf le lien
 * « Voir les cas correspondants », posé dans ce même lot. Il gardait `--rp-link`, une couleur
 * conçue pour le blanc : 1,99:1 sur #1D2534, mesuré. L'action la plus utile de la page était
 * quasi invisible, et précisément sur la tuile qu'on met en avant.
 *
 * Le second était déjà documenté ailleurs dans le dépôt et n'a pas été reproduit ici : le
 * corail ne porte pas de blanc — 2,78:1. Le maillon bas de la chaîne prend donc le texte
 * sombre, à 5,54:1, et la figure ne perd rien : c'est la HAUTEUR du maillon qui dit qu'il est
 * le plus faible, pas sa couleur de texte.
 * ------------------------------------------------------------------ */
/* Le correctif du lien de la tuile mise en avant a REJOINT le bloc unique
   `.ia-sec--navy .ia-tile--hl` en tête de fichier (🟡 release-check 19/08) : trois blocs
   dispersés stylaient la même tuile, et le rendu ne tenait qu'à un comptage de classes. */
.ia-nat-chaine li.bas b { color: var(--rp-dark-blue); }

/* LE REPLI DES SECTIONS À MODULE — visible seulement sans JavaScript (20/08).
   Il vivait dans un `<noscript>`, où le worker ne réécrit pas : ses douze clés `data-edit`
   étaient INERTES, le back-office affichait « enregistré » et rien ne changeait. C'est le
   défaut qui m'a fait annoncer au PO un titre de diagnostic qui n'était affiché à personne.
   Hors du `<noscript>`, les clés redeviennent vivantes ; c'est cette règle qui cache le bloc,
   et une feuille de secours `<noscript><style>` dans l'en-tête le révèle quand JavaScript
   manque. Masqué par DÉFAUT, donc jamais de scintillement avant le montage du module. */
.ia-repli { display: none; }

/* Les règles `.ia-ed*` de la fenêtre d'édition (administrateur seul) vivent dans
   `ia-editeur.css` depuis le 24/08, chargée par le même garde `data-admin` que son module —
   un visiteur ne télécharge ni l'une ni l'autre. */