/* pages.css — composants des pages secondaires rendues par pages/_coquille.mjs
 *
 * `audit.css` porte les jetons et le chrome (couleurs, polices, en-tête, pied
 * de page, boutons, FAQ, gouttière). Ce fichier ne porte que ce qui n'existait
 * nulle part : les compositions propres au hub de services et aux pages de
 * service. Il est chargé APRÈS audit.css et ne redéfinit aucun jeton.
 *
 * Règle héritée de la panne du 2026-08-15 : ne jamais écrire le raccourci
 * `padding` sur un élément qui porte aussi `.wrap`, car les deux zéros latéraux
 * effaceraient la gouttière. Toujours `padding-top` / `padding-bottom`.
 */

/* Visible pour un lecteur d'écran, absent de l'écran. Sert aux légendes de
   tableau : `caption` donne au tableau un nom annoncé à la navigation, mais
   le titre de section le dit déjà à l'œil. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── Rythme vertical ─────────────────────────────────────────────────────── */

.sec { padding-top: 96px; }
.sec-first { padding-top: 54px; }
@media (max-width: 760px) {
  .sec { padding-top: 64px; }
  .sec-first { padding-top: 40px; }
}

.actions-centre {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center; margin-top: 28px;
}
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }

/* ── Chapeau de section centré ───────────────────────────────────────────── */

/* La page d'accueil pose chaque titre de section dans une colonne étroite et
   centrée : `max-width: 780px; margin: 0 auto; text-align: center`, mot-clé,
   titre, introduction. Les pages secondaires alignaient les leurs à gauche, et
   la même marque paraissait composée par deux mains différentes.

   `.tete-c` porte exactement cette mise en page. Elle n'enveloppe que le
   chapeau : le contenu de la section reste dans `.wrap` et garde sa largeur,
   sinon un tableau ou une rangée de cartes se retrouverait rétrécie à 780 px.
   Rien ici ne touche `.wrap` ni les jetons — une page qui ne demande pas
   `.tete-c` garde son chapeau aligné à gauche. */
.tete-c { max-width: 780px; margin: 0 auto; text-align: center; }
/* `.lede` porte un max-width en ch : sans ces deux marges automatiques il
   resterait collé au bord gauche de la colonne, centré seulement en apparence. */
.tete-c .lede { margin-left: auto; margin-right: auto; }
/* Le mot-clé garde EXACTEMENT le dessin de la page d'accueil : un filet
   dégradé de 30 px posé au-dessus du mot, des capitales espacées, aucun fond,
   aucun contour. C'est `.eyebrow` d'audit.css, identique au bloc <style> de
   l'accueil, et rien n'est redéfini ici.

   Une pastille arrondie a été essayée le 2026-08-18 et refusée par le
   propriétaire le jour même : l'accueil avait justement abandonné ce dessin
   (« l'ancienne pastille arrondie faisait "gabarit" », dit son commentaire), et
   la reprendre ici faisait diverger les deux pages.

   Seule adaptation, la même que l'accueil applique à un chapeau centré : le
   filet se centre sous le mot au lieu de rester calé à gauche. audit.css cale
   le sien à gauche par défaut, parce que les autres pages secondaires alignent
   leur chapeau à gauche. */
.tete-c .eyebrow::before { left: 50%; transform: translateX(-50%); }

/* La coupure de ligne posée à la main dans un titre de section : c'est la
   deuxième ligne entière que le marqueur surligne, et un titre qui tient sur
   une seule ligne n'en a pas.

   Le seuil est mesuré, pas deviné : jusqu'à 421 px chaque moitié de titre tient
   encore sur sa ligne, en dessous la plus longue (« quel que soit le service »)
   se recoupe et le marqueur tomberait au milieu d'une phrase. À ces largeurs les
   titres se coupent déjà tout seuls, et la coupure écrite n'a plus rien à faire.
   Vérifié de 320 à 1 440 px : chaque titre garde son marqueur. */
@media (max-width: 420px) { .br-t { display: none; } }

/* L'échelle exacte des titres de section de la page d'accueil, reprise ici
   (2026-08-18). audit.css les composait 14 % plus petits — clamp(27px, 3.2vw,
   42px) — pour tout le site ; dans la même colonne de 780 px, un titre tenait
   donc sur une ligne là où celui de l'accueil en prend deux. Or le marqueur se
   pose sur la DEUXIÈME ligne : à cette taille, la plupart des titres n'en
   avaient pas et ressortaient sans marqueur. Même mesure, même coupure, même
   marqueur. La règle est portée par `.tete-c` et non par `h2` : une page qui
   ne demande pas le chapeau centré garde l'échelle d'audit.css. */
.tete-c h2 {
  font-size: clamp(30px, 3.4vw, 50px); line-height: 1.05; letter-spacing: -0.03em;
  margin: 18px 0 0;
}

/* ── Le marqueur des titres, repris de la page d'accueil ─────────────────── */

/* Port de `.hro-mark` et de `.rv-*` du bloc <style> de public/index.html
   (2026-08-18). Le propriétaire demande le même surlignage ici : une barre
   bleue inclinée passée derrière les lettres, qui deviennent blanches. Ce
   n'est pas du texte coloré — la version précédente, `.hi { color: blue }`,
   a été refusée pour cette raison.

   DEUX COPIES, VOLONTAIREMENT. La page d'accueil est verrouillée et garde son
   style en ligne ; tant qu'il n'est pas extrait, ces règles existent ici et
   là-bas. Elles ne se rencontrent jamais (l'accueil ne charge pas pages.css,
   ces pages ne chargent pas son bloc), mais toute retouche là-bas doit être
   reportée ici. Les noms de classe sont identiques pour que les deux copies
   fusionnent d'elles-mêmes le jour de l'extraction. */

/* Le marqueur posé, sans balayage : celui du titre de page, écrit dans le
   HTML et donc présent même sans JavaScript. C'est `.hro-mark` de l'accueil.
   Le groupe de mots marqué doit tenir sur une ligne à toutes les largeurs :
   une inline coupée en deux verrait son `::before` couvrir aussi le vide
   entre les deux lignes, la boîte d'un absolu englobant tous ses fragments.

   LA BARRE PASSE SOUS TOUT LE TITRE, PAS SEULEMENT SOUS SES PROPRES MOTS.
   Le titre de page interligne à 1,05 : la barre de la deuxième ligne mord
   dans les jambages de la première, et le « q » de « que » y disparaissait.
   `.marque` ne porte donc plus de `z-index` et ne forme plus de contexte
   d'empilement ; c'est le titre qui en forme un, et le `::before` en -1 se
   peint entre son fond et son texte. Tout le titre passe au-dessus de la
   barre, le groupe marqué comme le reste. Même résultat que le
   `.rv-txt:not(.is-mark) { z-index: 1 }` des titres de section, obtenu sans
   avoir à envelopper les mots voisins. */
.tete-c h1 { isolation: isolate; }
.marque { position: relative; color: #ffffff; }
/* Le sens penche vers le haut à droite, c'est-à-dire l'inverse du premier
   titre de section. L'inclinaison alterne d'un titre au suivant (services.js
   pose `data-mark-dir` : -1 au rang 0, +1 au rang 1, et ainsi de suite), et le
   titre de page est le rang qui précède : à -1,2 degré il penchait du même
   côté que le titre juste en dessous et cassait l'alternance. */
.marque::before {
  content: ''; position: absolute; inset: -0.02em -0.14em -0.08em; z-index: -1;
  background: var(--blue); transform: rotate(1.2deg);
}

/* Les titres de section, découpés ligne à ligne par /assets/services.js. Sans
   ce script le titre reste noir et entier : aucune information ne dépend du
   marqueur, et le titre se lit pareil en niveaux de gris ou à l'impression. */
.rv-line {
  position: relative; display: block;
  /* l'interligne des titres est serré, la barre de balayage doit donc mordre
     sous la ligne pour couvrir les jambages */
  padding-bottom: 0.14em; margin-bottom: -0.14em;
}
/* z-index: 0 fait de la ligne son propre contexte d'empilement : le marqueur
   posé en -1 reste derrière ses lettres et devant rien d'autre. */
.rv-txt { position: relative; z-index: 0; display: inline-block; }
/* Les lignes non marquées passent au-dessus : la barre inclinée monte à une
   extrémité jusque dans le jambage de la ligne du dessus, et un marqueur passe
   derrière l'encre, pas dessus. */
.rv-txt:not(.is-mark) { z-index: 1; }
.rv-block {
  position: absolute; inset: 0; background: var(--blue); z-index: 2;
  transform: scaleX(0); transform-origin: left center;
}
/* La barre s'installe d'abord, les lettres passent au blanc ensuite : l'inverse
   donnerait du blanc sur blanc sur la moitié pas encore couverte. Le texte n'est
   pas dupliqué, donc le titre reste lu une seule fois. */
.rv-txt.is-mark { color: #ffffff; }
.rv-txt.is-mark::before {
  content: ''; position: absolute; inset: -0.04em -0.16em -0.20em; z-index: -1;
  background: var(--blue);
  /* l'angle est calculé par le script (--mark-tilt) et son signe alterne d'un
     titre au suivant ; le pivot est au centre, donc chaque extrémité ne
     s'écarte que d'un demi-dénivelé */
  transform: rotate(var(--mark-tilt, -1deg));
}
.rv-go .rv-txt { animation: rv-show .01s linear both; animation-delay: calc(var(--i) * .09s + .39s); }
.rv-go .rv-block { animation: rv-sweep .85s cubic-bezier(.76,0,.24,1) both; animation-delay: calc(var(--i) * .09s); }
.rv-go .rv-txt.is-mark { animation: rv-show .01s linear both, rv-ink .14s linear both; animation-delay: calc(var(--i) * .09s + .39s), calc(var(--i) * .09s + 1.42s); }
.rv-go .rv-txt.is-mark::before { animation: rv-bar .55s cubic-bezier(.76,0,.24,1) both; animation-delay: calc(var(--i) * .09s + .86s); }
@keyframes rv-sweep {
  0%   { transform: scaleX(0); transform-origin: left center; }
  46%  { transform: scaleX(1); transform-origin: left center; }
  54%  { transform: scaleX(1); transform-origin: right center; }
  100% { transform: scaleX(0); transform-origin: right center; }
}
@keyframes rv-show { from { opacity: 0; } to { opacity: 1; } }
/* La barre se dévoile par la gauche avec `clip-path` et non `scaleX`, qui
   occupe le `transform` pris par l'inclinaison. Le découpage se fait avant la
   rotation, donc le bord qui avance est lui aussi incliné. */
@keyframes rv-bar { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes rv-ink { from { color: var(--fg); } to { color: #ffffff; } }

/* ── Chapeau de page ─────────────────────────────────────────────────────── */

.page-tete { padding-top: 54px; position: relative; isolation: isolate; }
/* Le voile de couleur de la page d'accueil (.aurora), en pleine largeur de
   fenêtre. html porte overflow-x: clip (audit.css) pour que les 100vw ne
   créent pas de défilement horizontal. */
.page-tete::before {
  content: ''; position: absolute; left: 50%; width: 100vw; transform: translateX(-50%);
  top: -80px; height: 560px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(30% 58% at 24% 32%, rgba(29,155,240,0.11), transparent 72%),
    radial-gradient(28% 52% at 76% 16%, rgba(124,92,245,0.09), transparent 72%);
}
.page-tete .lede { font-size: 18.5px; }

/* Le fil d'Ariane : une page de service n'est jamais une île, et un visiteur
   arrivé par un moteur doit voir où il est tombé.

   IL RESTE COLLÉ À GAUCHE, même sur /nos-services/ dont le chapeau est centré
   (demande du propriétaire, 2026-08-18). Il est donc écrit dans la section et
   non dans `.tete-c` : c'est un repère de navigation, pas une ligne du titre,
   et toutes les autres pages secondaires le posent déjà au même endroit. */
.fil { font-size: 13.5px; color: var(--muted); margin: 0 0 4px; }
.fil a { color: var(--muted); }
.fil a:hover { color: var(--fg); }
.fil span { color: var(--dim2); padding: 0 6px; }

/* ── Ce qui vient avec : la liste des bénéfices ──────────────────── */

/* Quatrième état de cette section de /nos-services/. Les fiches `.piliers`
   redisaient les pages de service et sont parties le 2026-08-18 ; les trois
   cartes `.apports` qui les ont remplacées disaient la bonne chose mais la
   disaient en pavés, et le propriétaire a demandé le contraire : une liste à
   puces cochées, courte, où l'explication n'apparaît que si on la demande.

   POURQUOI UN ACCORDÉON, ET POURQUOI CELUI DU NAVIGATEUR. Le bénéfice se lit
   d'un coup d'œil, le pourquoi se déplie. C'est <details>/<summary> natif,
   comme la FAQ et comme le menu ☰ : ouvrable au clavier, annoncé comme un
   bouton dépliant par les lecteurs d'écran, et surtout lisible même si le
   script de la page ne se charge jamais. La CSP du Worker est
   « script-src 'self' » : moins de JavaScript, moins de choses à casser.

   LE DESSIN N'EST PAS CELUI DE LA FAQ, EXPRÈS. La page porte déjà une vraie
   FAQ plus bas, en bulles de conversation ; reprendre ici la même pastille et
   la même bulle bleue aurait fait lire deux fois le même objet pour deux
   contenus différents. Seul le « + » / « − » est commun : c'est l'affordance
   du site pour « ça s'ouvre », et elle, il faut la répéter.

   MAQUETTE DU PROPRIÉTAIRE, « section accordeon.png » (2026-08-18). La carte
   unique de 880 px devient un panneau pleine largeur à deux colonnes : la
   liste à droite, une colonne d'appui à gauche. Ce qui change avec elle :

     - LA COCHE PASSE DU VERT AU BLEU. Elle était verte parce que c'est la
       couleur qui dit « acquis » ; la maquette la veut bleue, et `.fuites`
       avait déjà unifié la sienne sur le bleu deux sections plus bas. Deux
       familles de couleur dans une même page coûtaient plus que la nuance
       qu'elles portaient. Le trait reste à `--blue-sh` (#0f6ba8), soit 5,1:1
       sur la pastille claire, et la pastille pleine des lignes ouvertes est à
       `--blue-cta` (#147ab8), soit 4,6:1 pour la coche blanche posée dessus ;
       `--blue` (#1d9bf0) tombait à 3,00:1, pile la limite des 3:1 demandés à
       un élément non textuel, et un trait de 2,8 px n'a pas à se poser là ;

     - LE « + » ENTRE DANS UN ROND. Posé nu, il se lisait comme un caractère du
       titre ; cerclé, il se lit comme une commande, et sa cible passe de la
       taille d'un chiffre à 34 px ;

     - LA LIGNE OUVERTE SE TEINTE. `--tint2` sur toute la hauteur, replis
       compris : c'est ce qui dit quelle explication appartient à quel titre
       quand trois lignes sont ouvertes à la suite ;

     - LES LIGNES SONT NUMÉROTÉES. Elles se lisent comme un parcours, où on la
       rencontre, comment on s'en sert, ce qu'elle évite, ce qu'elle retient,
       sur quelle machine elle tourne. `.fuites` refuse ses numéros pour la
       raison inverse : ses quatre pertes ne sont ni classées ni successives.

   LES VAGUES ONT ÉTÉ REFUSÉES, PUIS REMISES. L'argument d'alors, qu'une
   texture ne dit rien de plus qu'un fond qui s'assombrit, tenait tant qu'on
   regardait la maquette. Il tombe dès qu'on regarde la page : la colonne
   d'appui s'étire sur la hauteur de la liste ouverte, son contenu s'arrête aux
   deux tiers, et le dégradé laissait dessous trois cents pixels de teinte
   plate. La maquette ne remplissait pas ce vide par goût de l'ornement. */
/* LES DEUX COLONNES À LA MÊME HAUTEUR. Elles s'étirent toutes les deux sur
   la rangée, donc la plus haute des deux commande et l'autre la rejoint : les
   deux cartes finissent à ras, comme dans la maquette, dans les cinq états de
   la liste. Cela n'a été possible qu'une fois l'accordéon rendu exclusif :
   tant que les cinq lignes pouvaient être ouvertes ensemble, la liste montait
   à 1 100 px contre 517 à la colonne d'appui, et l'étirement mesuré ci-dessous
   n'aurait rien réglé. Mesuré à 1 440, 1 200 et 1 024 px, l'écart entre les
   deux ne dépasse plus 48 px, et `.ben` dit plus bas où passe ce mou. */
.benefices {
  margin: 34px 0 0; display: grid; align-items: stretch;
  grid-template-columns: minmax(296px, 0.42fr) minmax(0, 1fr); column-gap: 24px;
  background: var(--card3); border: 1px solid var(--border);
  border-radius: 24px; padding: 22px; box-shadow: var(--lift);
}

/* ── La colonne d'appui ──────────────────────────────────────────────────── */

/* Le dégradé remplace le motif de vagues de la maquette : la carte s'ouvre au
   blanc et se referme sur la teinte, ce qui pose la colonne sans l'illustrer.
   Il est écrit ici plutôt que pris à `--wash`, qui descend en diagonale et
   poserait son bleu en haut à gauche, là où la maquette le veut en bas.

   IL COÛTE UN ANGLE MORT, ET LE VOICI COMBLÉ. `npm run contraste` remonte les
   ancêtres jusqu'à une couleur opaque et déclare « non mesurable » tout texte
   posé sur un dégradé : les sept nœuds de cette colonne en font partie, et le
   « 0 échec » de la page ne les couvre pas. Relevé à la main sur #e8f5fe, le
   pied du dégradé donc le pire des cas : titre et intitulés à 16,7:1,
   descriptions à 5,5:1. Les pictogrammes n'en sont pas : ils se posent sur le
   disque opaque de leur pastille, à 5,1:1, que le vérificateur saurait mesurer
   s'il mesurait autre chose que du texte. */
.ben-cote {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--card3) 0%, var(--tint2) 54%, var(--tint) 100%);
  border: 1px solid var(--tint-line); border-radius: 18px; padding: 24px 22px 28px;
}
/* Le fondu du haut n'est pas un effet : sans lui, les vagues passent derrière
   les deux derniers gains quand toutes les lignes sont fermées et que la
   colonne est à sa hauteur la plus courte. Il les efface là où du texte peut
   descendre et les laisse pleines au bas de la carte, où rien ne les gêne.
   Non gérée, la propriété ne fait que les rendre partout : elles restent
   assez pâles pour que ce soit sans conséquence. */
.ben-cote-fond {
  position: absolute; z-index: -1; left: 0; right: 0; bottom: -1px;
  color: var(--tint-line); opacity: 0.55; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 46%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 46%);
}
.ben-cote-fond svg { width: 100%; height: auto; display: block; }
.ben-cote-pic { color: var(--blue-sh); }
.ben-cote-pic svg { width: 26px; height: 26px; display: block; }
/* La coupure « Ce que vous gagnez / au quotidien » de la maquette est obtenue
   par `text-wrap: balance` et non par un <br> : le navigateur cherche la
   coupure qui raccourcit la ligne la plus longue, et c'est exactement
   celle-là. Un <br> l'aurait figée, et elle serait tombée au milieu de la
   phrase dès que la grille se replie. Là où la propriété n'existe pas, le
   titre revient au retour à la ligne ordinaire : deux lignes aussi. */
.ben-cote-t {
  margin: 16px 0 0; font-family: var(--ui); font-weight: 600;
  font-size: 21px; line-height: 1.3; letter-spacing: -0.015em; color: var(--fg);
  text-wrap: balance;
}

/* Le filet de la maquette est la bordure haute de la liste : il suit sa
   largeur sans qu'aucune mesure ne soit écrite ici. */
.ben-gains {
  margin: 20px 0 0; padding: 22px 0 0; list-style: none;
  border-top: 1px solid var(--border);
  display: grid; gap: 24px; align-content: start;
}
.ben-gain { display: flex; align-items: flex-start; gap: 13px; }
/* Disque plein sans filet, celui de la maquette, et non la pastille bordée de
   `.fu-note-pic` : celle-là est posée sur du blanc et a besoin qu'on la borde,
   celle-ci est posée sur la teinte de la colonne. Le filet ne l'aurait pas
   détachée davantage, il aurait seulement rétréci le dessin de deux pixels. */
.ben-gain-pic {
  flex: none; width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--tint); color: var(--blue-sh);
  box-shadow: 0 4px 10px rgba(29,155,240,0.10);
}
.ben-gain-pic svg { width: 30px; height: 30px; display: block; }
.ben-gain-c { min-width: 0; }
.ben-gain-t {
  margin: 4px 0 0; font-family: var(--ui); font-weight: 600; font-size: 15.5px;
  line-height: 1.35; letter-spacing: -0.01em; color: var(--fg);
}
.ben-gain-d { margin: 7px 0 0; font-size: 14px; line-height: 1.6; color: var(--muted); }

/* ── La liste dépliante ──────────────────────────────────────────────────── */

/* `overflow: hidden` fait tenir le fond des lignes ouvertes dans les coins
   arrondis : sans lui, la première et la dernière déborderaient de la carte.
   La colonne est une pile flexible pour la seule raison qui suit. */
.ben-liste {
  display: flex; flex-direction: column;
  background: var(--card3); border: 1px solid var(--border);
  border-radius: 18px; overflow: hidden;
}

/* OÙ PASSE LE MOU. La liste est étirée à la hauteur de la colonne d'appui et
   son contenu est presque toujours un peu plus court : il reste des pixels à
   placer, 48 quand la deuxième ligne est ouverte parce que son explication est
   la plus brève des cinq, et 181 si le visiteur referme celle qu'il a trouvée
   ouverte en arrivant. Sans personne pour les prendre, ils feraient un fond de
   carte blanc sous la cinquième ligne.

   Ils vont aux lignes fermées, à parts égales. Le volet ouvert garde donc
   exactement le même retrait que les quatre autres, ce que l'œil compare d'une
   ligne à la suivante, et le mou se dilue en douze pixels par ligne fermée, ce
   qu'il ne compare pas. Le titre reste centré dans sa ligne parce que le
   <summary> s'étire avec elle ; sans cela il se collerait en haut et la ligne
   paraîtrait cassée. */
.ben { flex: none; border-bottom: 1px solid var(--border-soft); }
.ben:not([open]) { flex: 1 1 auto; display: flex; flex-direction: column; }
.ben:not([open]) > summary { flex: 1 1 auto; }
.ben:last-child { border-bottom: 0; }
.ben[open] { background: var(--tint2); }
.ben > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 14px; padding: 15px 16px;
  transition: background .2s ease;
}
.ben > summary::-webkit-details-marker { display: none; }
.ben > summary:hover { background: var(--feat); }
.ben[open] > summary:hover { background: var(--tint); }
/* L'anneau rentre à l'intérieur : posé en dehors, il serait coupé par
   l'`overflow: hidden` de la carte sur la première et la dernière ligne. */
.ben > summary:focus-visible { outline: 2px solid var(--blue); outline-offset: -3px; }

/* La coche de validation. Creuse tant que la ligne est fermée, pleine dès
   qu'elle s'ouvre : c'est le deuxième signal de l'état, après la teinte de la
   ligne et le « − » du rond, pour qui ne distingue pas ces deux-là. */
.ben-ok {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--tint); color: var(--blue-sh);
  transition: background .2s ease, color .2s ease;
}
.ben-ok svg { width: 17px; height: 17px; display: block; }
.ben[open] .ben-ok { background: var(--blue-cta); color: #fff; }
.ben-t {
  font-family: var(--ui); font-weight: 600; font-size: 17px; line-height: 1.35;
  letter-spacing: -0.01em; color: var(--fg);
}
.ben > summary::after {
  content: ''; margin-left: auto; flex: none; display: block;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--border);
  background:
    linear-gradient(var(--fg), var(--fg)) center / 13px 2px no-repeat,
    linear-gradient(var(--fg), var(--fg)) center / 2px 13px no-repeat,
    var(--card3);
  transition: border-color .2s ease;
}
.ben > summary:hover::after { border-color: var(--tint-border2); }
.ben[open] > summary::after {
  border-color: var(--tint-line);
  background:
    linear-gradient(var(--fg), var(--fg)) center / 13px 2px no-repeat,
    var(--card3);
}

/* L'explication s'aligne sous le titre, pas sous la coche : 16 + 28 + 14 = 58.
   Un retrait qui suit le texte se lit comme sa suite ; un retrait aléatoire se
   lit comme un autre bloc.

   DU REMPLISSAGE, PAS DE LA MARGE. La dernière ligne n'a pas de bordure basse :
   une marge basse s'y échappait du <details> par fusion des marges, et la
   teinte de la ligne ouverte s'arrêtait 20 px trop haut, laissant une bande
   blanche au fond de la carte. Un remplissage ne fusionne jamais. */
.ben-d { padding: 0 18px 20px 58px; animation: ben-in .28s ease both; }
.ben-d p { font-size: 15px; line-height: 1.7; color: var(--muted); margin: 0 0 11px; }
.ben-d p:last-child { margin-bottom: 0; }
@keyframes ben-in { from { opacity: 0; } to { opacity: 1; } }

/* La grille se replie en une colonne sous 940 px. Le seuil est mesuré : en
   dessous, la liste dépliante passe sous 540 px et ses titres se coupent en
   deux lignes. Le plancher de 266 px de la colonne d'appui la tient jusque-là,
   au prix de quelques pixels pris à la liste. */
@media (max-width: 940px) {
  .benefices { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
  /* Les vagues remplissaient le bas vide de la colonne. Repliée en bandeau,
     la colonne n'a plus de bas vide : son texte occupe toute la largeur, et
     les vagues, dont la hauteur suit la largeur, lui passaient dessus. */
  .ben-cote-fond { display: none; }
  /* Les trois gains passent en rangée tant qu'il reste de la place : empilés,
     ils poussaient la liste dépliante hors du premier écran. */
  .ben-gains { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 22px; }
}
@media (max-width: 620px) {
  .benefices { padding: 12px; border-radius: 20px; }
  .ben-cote { padding: 20px 18px 22px; }
  .ben > summary { padding: 14px 12px; gap: 12px; }
  .ben-t { font-size: 16px; }
  .ben-d { padding: 0 12px 18px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .ben > summary, .ben-ok, .ben > summary::after { transition: none; }
  .ben-d { animation: none; }
}

/* Le routeur en rangées citées qui ouvrait /nos-services/ a été remplacé le
   2026-08-17 par les cartes illustrées (.situations, plus bas). Ses règles ont
   été retirées plutôt que gardées « au cas où » : plus aucune page ne les
   appelait, et une feuille de style qui garde ses morts finit par ne plus se
   relire. L'ancienne version reste dans l'historique Git. */

/* ── Listes de livrables ─────────────────────────────────────────────────── */

.liste-check { margin: 16px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.liste-check li {
  position: relative; padding-left: 27px; font-size: 15px; line-height: 1.6; color: var(--muted);
}
.liste-check li::before {
  content: ''; position: absolute; left: 0; top: 8px; width: 15px; height: 8px;
  border-left: 2px solid var(--on-tint); border-bottom: 2px solid var(--on-tint);
  transform: rotate(-45deg); border-radius: 1px;
}
.liste-croix li::before {
  content: ''; top: 9px; width: 13px; height: 13px; transform: none;
  border: 0; border-radius: 0;
  background:
    linear-gradient(currentColor, currentColor) center/100% 2px no-repeat;
  color: var(--dim2);
}

/* ── Deux colonnes : ce que ça fait / ce que ça ne fait pas ──────────────── */

.duo { margin-top: 30px; display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) { .duo { grid-template-columns: minmax(0, 1fr); } }
.encart {
  background: var(--card3); border: 1px solid var(--border);
  border-radius: 16px; padding: 24px; box-shadow: var(--lift);
  transition: box-shadow .2s ease, transform .2s ease;
}
.encart:hover {
  box-shadow: 0 2px 4px rgba(15,20,25,0.05), 0 18px 38px rgba(15,20,25,0.09);
  transform: translateY(-2px);
}
.encart.est-tint { background: var(--wash); }
.encart h3 { font-size: 18px; }
.encart > p { font-size: 15px; line-height: 1.65; color: var(--muted); margin: 12px 0 0; }
/* ── Le duo illustré : pastille, filet, trame ────────────────────────────── */

/* MAQUETTE DU PROPRIÉTAIRE (2026-08-18), pour « Notre façon de travailler » sur
   /a-propos/. Le duo garde ses deux `.encart` ; la maquette leur ajoute trois
   choses, et chacune existait déjà ailleurs sur le site :

     - la pastille ronde et blanche, posée à gauche du titre : c'est `.eq-pic`
       (« Ce que ça change pour vos équipes »), en deux fois plus grande. La
       carte est large et n'a qu'une habitude à porter : elle avait la place ;
     - le filet bleu court sous le titre : c'est `.pt-filet` de /nos-services/,
       au même endroit et pour le même travail, séparer l'affirmation de sa
       démonstration ;
     - la trame de points en bas à gauche : celle de la page d'accueil (pas de
       11 px, `--tint-border`), posée dans le vide laissé sous la pastille.

   Le texte tient la colonne de droite, titre et paragraphe alignés l'un sur
   l'autre : c'est ce retrait qui donne sa marge à la pastille.

   MESURES RELEVÉES SUR L'IMAGE. Elle rend la colonne réelle du site — 1 016 px
   à l'intérieur des gouttières — à 1,422× : cartes de 491 px séparées de 36 px,
   pastille 96, gouttière 28, filet 42 × 3, retraits 38 / 38 / 42, titre 24 px,
   trame de 9 points sur 5 au pas de 11 px. Le corps de texte, lui, ne bouge
   pas : 15 px sur 1,65, la mesure de tous les autres encarts.

   LE GLYPHE EST À `--blue-sh` ET NON AU BLEU DE MARQUE, comme les pastilles
   rondes de `.equipes` plus bas : #0f6ba8 tient 5,6:1 sur blanc. Le filet, lui,
   est décoratif et garde `--blue`, comme `.pt-filet`. */
.duo.est-illustre { gap: 36px; }
.duo.est-illustre > .encart {
  position: relative;
  display: grid; grid-template-columns: 96px minmax(0, 1fr);
  column-gap: 28px; align-items: start;
  border-radius: 18px; padding: 38px 38px 42px;
}
/* Blanche sur une carte blanche : ce sont le filet clair et l'ombre bleutée qui
   la détachent, comme sur la maquette. Aucun `flex: none` ici — la pastille est
   une colonne de grille, sa largeur ne dépend pas de son contenu. */
.enc-pic {
  width: 96px; height: 96px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--card3); border: 1px solid #dcecfa; color: var(--blue-sh);
  box-shadow: 0 20px 34px -16px rgba(29,155,240,0.45), 0 2px 6px rgba(15,107,168,0.07);
}
.enc-pic svg { width: 62px; height: 62px; display: block; }
/* Les 5 px reprennent `.pt-t` : sans eux le titre se colle au sommet de la
   pastille au lieu de tomber dans son premier tiers, comme sur la maquette. */
.duo.est-illustre .enc-corps h3 { font-size: 24px; line-height: 1.2; margin: 5px 0 0; }
.enc-filet {
  display: block; width: 42px; height: 3px; border-radius: 2px;
  background: var(--blue); margin: 18px 0 0;
}
.duo.est-illustre .enc-corps p {
  font-size: 15px; line-height: 1.65; color: var(--muted); margin: 20px 0 0;
}
/* Décor pur. La trame se pose sous la pastille, son bas aligné sur celui du
   paragraphe : elle suppose donc un paragraphe plus haut qu'elle, ce que les
   deux habitudes écrites tiennent largement. */
.enc-trame {
  position: absolute; left: 38px; bottom: 42px; width: 99px; height: 55px;
  background-image: radial-gradient(var(--tint-border) 1.4px, transparent 1.5px);
  background-size: 11px 11px; pointer-events: none;
}
/* Le seuil est mesuré, pas deviné : sous 1 020 px les deux cartes tiennent
   encore côte à côte, mais la colonne de texte passe sous 250 px et le titre se
   coupe en trois. La pastille et les retraits se resserrent pour la lui rendre.
   Sous 860 px le duo passe sur une colonne (règle de `.duo`) et ces mêmes
   valeurs y conviennent encore. */
@media (max-width: 1020px) {
  .duo.est-illustre { gap: 24px; }
  .duo.est-illustre > .encart {
    grid-template-columns: 76px minmax(0, 1fr); column-gap: 22px;
    padding: 28px 26px 30px;
  }
  .enc-pic { width: 76px; height: 76px; }
  .enc-pic svg { width: 48px; height: 48px; }
  .duo.est-illustre .enc-corps h3 { font-size: 21px; margin-top: 3px; }
  /* Sept points sur quatre au lieu de neuf sur cinq : la trame reste sous la
     pastille au lieu de venir toucher la colonne de texte, qui commence 22 px
     plus loin. */
  .enc-trame { left: 26px; bottom: 30px; width: 77px; height: 44px; }
}
/* Sous 460 px, la pastille passe au-dessus du titre : même geste que `.fuites`
   plus bas, et pour la même raison — à cette largeur, la pastille et sa
   gouttière ne laissaient plus assez de colonne au titre. La trame s'en va avec
   la colonne qui la portait : le texte occupe maintenant toute la carte. */
@media (max-width: 460px) {
  .duo.est-illustre { gap: 18px; }
  .duo.est-illustre > .encart { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .duo.est-illustre .enc-corps h3 { margin-top: 0; }
  .enc-trame { display: none; }
}


/* ── Le même duo, habillé « d'où nous venons » ───────────────────────────── */

/* MAQUETTE DU PROPRIÉTAIRE (2026-08-18, 22 h 57), pour la première section de
   /a-propos/. Même squelette que `.est-illustre` juste au-dessus — deux
   `.encart`, une pastille à gauche, un filet sous le titre, le texte dans la
   colonne de droite — et trois différences, toutes dictées par l'image :

     - la pastille est PLEINE et bleue, le pictogramme blanc, quand celle de
       « Notre façon de travailler » est blanche à pictogramme bleu. Elle est
       aussi plus petite, 68 px au lieu de 96, et son bleu roi vient de l'image
       (voir la règle, plus bas, qui dit pourquoi le dégradé de marque n'y
       tenait pas) ;
     - le filet reprend ce dégradé et raccourcit à 26 px, là où `.enc-filet` est
       bleu plein et long de 44 ;
     - une illustration remplace la trame de points : le fronton d'une banque à
       gauche, une paroi de verre qui éclate à droite. Elles sortent par le bas
       et par la gauche de la carte, comme sur l'image.

   MESURES. La maquette rend la colonne réelle (1 016 px) à 1,42×, exactement
   comme celle de 22 h 55 relevée plus haut. Ramenées à l'échelle du site :
   cartes de 495 px, pastille 68, retrait gauche 46, gouttière 44, filet 26 × 3,
   titre 21 px, écart de 20 px entre les deux paragraphes. Le corps de texte ne
   bouge pas — 15 px sur 1,65, la mesure de tous les encarts : à cette échelle,
   l'interligne de la maquette vaut 23 px, celui du site 24,75 px.

   LES ILLUSTRATIONS SONT DES DÉCORS, PAS DES IMAGES. Elles sont peintes en fond
   d'un `<span>` vide : rien n'y est écrit, aucune information ne s'y trouve, et
   la carte se lit entière sans elles — d'où l'absence de texte de remplacement.
   Elles sont découpées dans la maquette elle-même, WebP de 6 et 7 Ko, et leur
   propre fond bleuté est celui que le lavis de la carte prolonge : c'est ce qui
   rend leur lisière invisible. Leur largeur est un pourcentage de celle de la
   carte, comme sur l'image, donc la composition tient à toutes les largeurs ;
   `overflow: hidden` les coupe au bord, arrondi compris. */
.duo.est-origine { gap: 26px; }
.duo.est-origine > .encart {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 68px minmax(0, 1fr);
  column-gap: 44px; align-items: start;
  border-radius: 18px; padding: 32px 38px 42px 46px;
  /* Les illustrations sont en `z-index: -1` : sans contexte d'empilement ici,
     elles passeraient derrière le fond de la carte au lieu de se ranger entre
     ce fond et le texte. */
  isolation: isolate;
  /* Le lavis relevé sur la maquette : un dégradé qui monte du coin bas gauche,
     bleuté là où l'illustration arrive, blanc au coin haut droit. Ce n'est pas
     un ornement de plus : c'est LUI qui rend invisible la lisière de l'image
     découpée, dont le fond est ce même bleu très pâle. */
  background: linear-gradient(35deg, #edf3fd 0%, #f8fbfe 55%, #ffffff 100%);
}
/* La deuxième carte porte `est-tint` comme avant, mais son lavis est plus
   franc et vient de la gauche, pas du haut : `--wash` descend du coin haut
   gauche, la maquette teinte tout le bord gauche. Le filet du contour bleuit
   avec lui, comme sur l'image. */
.duo.est-origine > .est-tint {
  background: linear-gradient(100deg, #e7effd 0%, #f4f8fe 46%, #fdfeff 100%);
  border-color: #d9e5fb;
}
/* Pleine, sans contour : ce sont le dégradé et son ombre portée qui la posent
   sur la carte. Le pictogramme blanc dessus est un décor — il redit le titre
   qui le suit, et `aria-hidden` le retire de la lecture.

   LES DEUX BLEUS SONT RELEVÉS SUR LA MAQUETTE, et c'est le seul endroit du site
   où ils servent. Le dégradé de marque a été essayé d'abord — `--blue` vers
   `--acc-2`, celui de l'eyebrow — et posé plein sur un disque il vire au
   violet, quand l'image peint un bleu roi franc. Le bleu de marque reste donc
   sur le filet, juste dessous, où le dégradé se lit sur 26 px et non sur 68. */
.duo.est-origine .enc-pic {
  width: 68px; height: 68px; border: 0; color: #ffffff;
  background: linear-gradient(104deg, #5f9df3 0%, #2570e7 100%);
  box-shadow: 0 14px 24px -10px rgba(37, 112, 231, 0.55), 0 2px 6px rgba(15, 107, 168, 0.10);
}
.duo.est-origine .enc-pic svg { width: 38px; height: 38px; }
.duo.est-origine .enc-corps h3 { font-size: 21px; line-height: 1.25; margin: 3px 0 0; }
.duo.est-origine .enc-filet {
  width: 26px; height: 3px; margin: 15px 0 0;
  background: linear-gradient(90deg, var(--blue), var(--acc-2));
}
.duo.est-origine .enc-corps p {
  font-size: 15px; line-height: 1.65; color: var(--muted); margin: 22px 0 0;
}
.duo.est-origine .enc-corps p + p { margin-top: 20px; }
/* Le gras de la maquette : il passe à l'encre du titre, sinon il ne se
   distingue pas du gris du paragraphe. */
.duo.est-origine .enc-corps b { color: var(--fg); font-weight: 600; }

.enc-art {
  position: absolute; left: 0; bottom: 0; z-index: -1; pointer-events: none;
  background-repeat: no-repeat; background-size: 100% 100%;
}
/* Les deux rapports largeur/hauteur sont ceux des fichiers : c'est le seul
   moyen de garder l'image entière quelle que soit la largeur de la carte.

   `z-index: -1`, avec l'`isolation` de la carte, les range DERRIÈRE le texte.
   Elles sont écrites après lui dans le balisage, et un élément positionné passe
   sinon au-dessus de ses frères ordinaires : en une seule colonne, où la carte
   s'élargit et le texte descend moins bas, le fronton recouvrait la pastille et
   le début du titre.

   Le plafond de 150 px n'est pas un arrondi : le texte commence à 158 px du
   bord (retrait 46 + pastille 68 + gouttière 44), et le fronton doit tenir dans
   la colonne que la pastille laisse vide sous elle. En une seule colonne, la
   carte double de largeur : sans plafond, 30,5 % l'auraient poussé sous le
   texte. Chaque palier plus bas redescend ce plafond avec la gouttière. */
.est-fronton {
  width: min(30.5%, 150px); aspect-ratio: 216 / 344;
  background-image: url(/assets/a-propos-banque.webp);
}
/* Le fondu du haut : la paroi de verre traverse toute la carte, et son fond
   propre y est un peu plus bleu que le lavis au-dessus. Douze pixels de fondu
   suffisent à effacer la ligne, et ils tombent dans la bande de fond laissée
   exprès au-dessus de la paroi quand l'image a été découpée. */
.est-barriere {
  width: 85.4%; aspect-ratio: 604 / 190;
  background-image: url(/assets/a-propos-barriere.webp);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 12px);
}
/* La paroi de verre traverse toute la largeur : elle a besoin qu'on lui réserve
   le bas de la carte, sinon le dernier paragraphe lui passerait dessus. Sa
   hauteur vaut 26,9 % de la largeur de la carte (85,4 % × 190/604) ; la réserve
   est un peu plus courte, exprès : le haut de l'image est du fond, et la
   maquette y laisse la dernière ligne mordre.
   Elle est en pourcentage pour suivre la carte à toutes les largeurs, et posée
   sur `.encart.est-tint` pour rester plus forte que les raccourcis `padding`
   des paliers plus bas. Le fronton, lui, ne réserve rien : il occupe la colonne
   de la pastille, restée vide sous elle. */
.duo.est-origine > .encart.est-tint { padding-bottom: 25.5%; }
@media (max-width: 860px) { .duo.est-origine { gap: 18px; } }
/* Le palier est à 1 040 px et non à 700 : la grille du duo tient deux colonnes
   jusqu'à 860 px, et entre les deux la carte tombe à 397 px. Aux mesures de la
   maquette, la pastille et sa gouttière y mangeaient 41 % de la carte et il ne
   restait que 201 px de texte, cinq mots par ligne. La pastille rétrécit donc
   avant, et rend la colonne au texte. */
@media (max-width: 1040px) {
  .duo.est-origine > .encart {
    grid-template-columns: 60px minmax(0, 1fr); column-gap: 26px;
    padding: 28px 28px 34px 30px;
  }
  .duo.est-origine .enc-pic { width: 60px; height: 60px; }
  .duo.est-origine .enc-pic svg { width: 34px; height: 34px; }
  .duo.est-origine .enc-corps h3 { font-size: 20px; margin-top: 2px; }
  /* Le texte commence ici à 116 px du bord (30 + 60 + 26). */
  .est-fronton { width: min(30.5%, 110px); }
}
/* Sous 460 px, la pastille passe au-dessus du titre, comme dans
   `.est-illustre` : à cette largeur, elle et sa gouttière ne laissaient plus
   assez de colonne au titre. Le fronton n'a alors plus de colonne libre où se
   poser : il reste dans le coin, en filigrane derrière le texte. */
@media (max-width: 460px) {
  .duo.est-origine > .encart { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
  .duo.est-origine .enc-corps h3 { margin-top: 0; }
  .est-fronton { width: 104px; opacity: 0.5; }
}

/* ── Étapes ──────────────────────────────────────────────────────────────── */

/* La frise de la méthode, reprise de la page d'accueil : un point numéroté
   par étape, un rail fin qui les relie, le texte aligné à gauche. Reste une
   <ol> : l'ordre est porté par le balisage, pas par le dessin. Le premier
   point est bleu, comme l'étape d'entrée gratuite de l'accueil. */
.etapes { margin: 30px 0 0; padding: 0; list-style: none; counter-reset: etape; max-width: 780px; }
.etapes li {
  counter-increment: etape; position: relative;
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 0 22px;
  align-items: start; padding: 0 0 34px;
}
.etapes li:last-child { padding-bottom: 0; }
.etapes li::before {
  content: counter(etape, decimal-leading-zero);
  position: relative; z-index: 1; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ui); font-weight: 600; font-size: 12.5px; line-height: 1;
  background: var(--bg); border: 2px solid var(--border); color: var(--muted);
}
.etapes li:first-child::before { background: var(--blue); border-color: var(--blue); color: #ffffff; }
/* le rail : un segment par étape, caché sur la dernière */
.etapes li::after {
  content: ''; position: absolute; left: 16px; top: 40px; bottom: 6px; width: 2px;
  background: var(--border); border-radius: 999px;
}
.etapes li:last-child::after { display: none; }
/* tout le texte vit dans la deuxième colonne ; sans cette règle, le placement
   automatique de la grille poserait le paragraphe sous le point */
.etapes b, .etapes p { grid-column: 2; }
.etapes b {
  font-family: var(--ui); font-weight: 600; font-size: 20px; line-height: 1.25;
  letter-spacing: -0.02em; color: var(--fg); display: block; padding-top: 5px;
}
.etapes p { margin: 8px 0 0; font-size: 15.5px; line-height: 1.65; color: var(--muted); }
@media (max-width: 760px) {
  .etapes li { grid-template-columns: 28px minmax(0, 1fr); gap: 0 14px; padding-bottom: 30px; }
  .etapes li::before { width: 28px; height: 28px; border-width: 1.5px; font-size: 11px; }
  .etapes li::after { left: 13px; top: 34px; }
  .etapes b { font-size: 18px; padding-top: 3px; }
  .etapes p { font-size: 15px; }
}

/* ── Frise animée, reprise telle quelle de la page d'accueil ─────────────── */

/* `.etapes` ci-dessus reste la frise statique des pages de service et de
   /a-propos/. Celle-ci est la frise de la section « Méthode » de l'accueil,
   avec sa barre qui se remplit au défilement : un seul rail continu derrière
   toutes les étapes, et non un segment par étape, parce que c'est lui que la
   barre bleue parcourt. Sa position et sa longueur sont mesurées en JavaScript
   sur le centre du premier et du dernier point, pour rester justes quel que
   soit le retour à la ligne du texte — d'où `--mth-top` et `--mth-len`, écrits
   par /assets/services.js.

   Les noms de classes sont ceux de l'accueil, à dessein : le jour où le bloc
   <style> de la page d'accueil sera extrait, les deux copies se reconnaîtront
   au lieu de se disputer un nom. En attendant elles ne se croisent jamais —
   l'accueil ne charge pas ce fichier, et ces pages ne chargent pas son style.

   Sans JavaScript la frise reste entière : rail gris, étape 01 en bleu, les
   suivantes en anneau. C'est ce que voyait déjà `.etapes`. */

.mth-wrap { position: relative; max-width: 780px; margin: 44px auto 0; }
.mth-track {
  position: absolute; left: 16px; top: var(--mth-top, 17px);
  height: var(--mth-len, 0px); width: 2px;
  background: var(--border); border-radius: 999px;
}
.mth-fill {
  position: absolute; left: 0; top: 0; width: 100%; height: 0;
  background: linear-gradient(180deg, var(--blue), var(--acc-2));
  border-radius: 999px; transition: height .16s linear;
}
.mth-rail { list-style: none; margin: 0; padding: 0; }
.mth-step {
  position: relative;
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 0 22px;
  align-items: start; padding-bottom: 38px;
}
.mth-step:last-child { padding-bottom: 0; }

/* Le point devient bleu quand le défilement atteint son étape : la couleur
   suit la lecture, elle ne prétend pas que l'étape soit « faite ». L'étape en
   cours porte en plus un halo clair. */
.mth-node {
  position: relative; z-index: 1;
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ui); font-weight: 600; font-size: 12.5px; line-height: 1;
  background: var(--bg); border: 2px solid var(--border); color: var(--muted);
  transition: background .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.mth-step.is-entry .mth-node,
.mth-step.is-on .mth-node {
  background: var(--blue); border-color: var(--blue); color: #ffffff;
}
.mth-step.is-current .mth-node { box-shadow: 0 0 0 5px var(--tint); }
/* le script pose .js-mth : l'étape 01 cesse alors d'être bleue d'office, elle
   le devient comme les autres quand la lecture arrive dessus */
.js-mth .mth-step.is-entry:not(.is-on) .mth-node {
  background: var(--bg); border-color: var(--border); color: var(--muted);
}

/* le texte est décalé pour que le centre du point tombe sur la ligne méta ;
   une seule largeur de mesure, pour que le filet « Remis » s'arrête au même
   bord que la description */
.mth-body { padding-top: 9px; max-width: 640px; text-align: left; }
.mth-when {
  font-family: var(--ui); font-weight: 500; font-size: 12px; letter-spacing: 0.06em;
  line-height: 1.4; color: var(--dim);
}
.mth-h {
  font-family: var(--ui); font-weight: 600; font-size: 20px;
  line-height: 1.25; letter-spacing: -0.02em; color: var(--fg); margin: 7px 0 0;
}
.mth-d { font-size: 15.5px; line-height: 1.65; color: var(--muted); margin: 9px 0 0; }
/* Ce qui est remis à chaque étape : ligne distincte, filet très clair, le
   libellé en Space Grotesk. Le délai n'y est pas répété, il est en ligne méta. */
.mth-give {
  margin: 14px 0 0; padding-top: 13px; border-top: 1px solid var(--border-soft);
  font-size: 14px; line-height: 1.6; color: var(--muted);
}
.mth-give-k {
  font-family: var(--ui); font-weight: 600; font-size: 11.5px; letter-spacing: 0.04em;
  color: var(--on-tint); margin-right: 5px;
}

@media (max-width: 1080px) {
  .mth-step { grid-template-columns: 32px minmax(0, 1fr); gap: 0 18px; padding-bottom: 34px; }
  .mth-node { width: 32px; height: 32px; }
  .mth-track { left: 15px; }
  .mth-h { font-size: 19px; }
}
@media (max-width: 760px) {
  .mth-wrap { margin-top: 36px; }
  .mth-step { grid-template-columns: 28px minmax(0, 1fr); gap: 0 14px; padding-bottom: 30px; }
  .mth-node { width: 28px; height: 28px; border-width: 1.5px; font-size: 11px; }
  .mth-track { left: 13px; }
  .mth-body { padding-top: 6px; }
  .mth-when { font-size: 10.5px; letter-spacing: 0.05em; }
  .mth-h { font-size: 18px; }
  .mth-d { font-size: 15px; }
  .mth-give { font-size: 13.5px; }
}

/* Une frise dont la barre ne bouge plus est une frise dont tous les points
   sont atteints : à l'impression comme sous « animations réduites », elle se
   lit en entier plutôt qu'à moitié éteinte. */
@media (prefers-reduced-motion: reduce) {
  .mth-node, .mth-fill { transition: none; }
}
@media print {
  .mth-fill { display: none; }
  .mth-node { background: var(--bg); border-color: var(--border); color: var(--muted); box-shadow: none; }
}

/* Sous-titre à l'intérieur d'une section, quand un h3 doit ouvrir un bloc sans
   ouvrir une section entière (« Ce que vous gardez » sous « Délais et prix »). */
.sous-titre { margin: 34px 0 0; font-size: 18px; }

/* ── L'argent qui part sans se voir ──────────────────────────────────────── */

/* MAQUETTE DU PROPRIÉTAIRE, « section design 2.png » (2026-08-18). La section
   posait une carte unique à filets : quatre lignes empilées sous un chapeau
   centré, comme `.benefices` juste au-dessus. La maquette la coupe en deux
   colonnes séparées par un trait. Le chapeau tient la gauche, avec le constat
   de la section et un encart sous lui ; les quatre pertes deviennent quatre
   cartes distinctes à droite.

   POURQUOI DEUX COLONNES. Les quatre lignes se lisaient comme une liste à
   parcourir, et le chapeau les quittait dès la première. Posé à côté d'elles,
   il reste sous les yeux pendant toute la lecture : c'est lui qui dit que ce
   qui suit ne se compte pas en heures, et sans lui les quatre cartes ne sont
   plus qu'un inventaire de mauvaises nouvelles. C'est aussi ce qui distingue
   enfin cette section de celle du dessus, que le dessin commun rendait
   presque interchangeable.

   LE BLEU REMPLACE L'AMBRE. Les pastilles étaient ambrées (#8a5512 sur
   #fdf4e6) pour séparer « ce que vous perdez » de « ce que vous gagnez ». La
   maquette unifie sur le bleu, et la mise en page fait maintenant cette
   séparation toute seule : quatre cartes détachées à droite d'un trait, là où
   `.benefices` reste une carte unique. La version ambrée est dans l'historique
   Git.

   Le trait des pictogrammes est à `--blue-sh` (#0f6ba8), soit 5,3:1 sur la
   pastille et 5,6:1 sur blanc : ils accompagnent du texte de moins de 24 px, et
   le bleu de marque ne tiendrait pas les 3:1 demandés à un élément non textuel
   sur un fond aussi clair.

   PAS DE NUMÉROS, PAS DE CHEVRON, PAS DE SURVOL. La maquette numérote les
   cartes de 01 à 04 : ces quatre pertes ne sont ni classées ni successives, et
   les numéroter aurait promis un rang qui n'existe pas (retrait demandé par le
   propriétaire). Elle pose aussi une flèche au bout de chaque carte, et une
   barre de rappel sous la section — la flèche ne mène nulle part, et la phrase
   de la barre avait déjà été retirée du texte. L'effet de survol de `.eq` n'est
   pas repris non plus : une carte qui se soulève sous le curseur dit « clique »,
   et il n'y a rien à cliquer. */
.fuites {
  margin-top: 34px; display: grid; align-items: start;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  column-gap: 40px;
}

/* Le trait de la maquette, porté par la colonne de droite plutôt que dessiné à
   part : une bordure suit la hauteur de la colonne sans qu'aucune mesure ne
   soit écrite ici, et elle s'en va d'elle-même quand la grille se replie. */
.fu-liste {
  display: grid; gap: 16px; align-content: start;
  border-left: 1px solid var(--border); padding-left: 40px;
}

/* ── Le chapeau de section posé dans une colonne ─────────────────────────── */

/* Modificateur de `.tete-c` et non copie : le marqueur, l'échelle des titres et
   le filet du mot-clé continuent de venir d'un seul endroit, seules les trois
   règles de centrage sautent. Il est le seul chapeau aligné à gauche de la
   page, parce qu'il est le seul à ne pas occuper toute la largeur. */
.tete-g { max-width: none; margin: 0; text-align: left; }
.tete-g .lede { margin-left: 0; margin-right: 0; }
.tete-g .eyebrow::before { left: 0; transform: none; }

/* L'échelle descend de clamp(30px, 3.4vw, 50px) à celle-ci, et c'est une
   mesure, pas un goût : dans une colonne de 430 px, « Ce que le calculateur »
   dépasse à 50 px et se recoupe en trois lignes. Or le marqueur se pose sur la
   DEUXIÈME ligne — la coupure écrite dans le titre ne l'aurait plus trouvée au
   bon endroit, et le surlignage serait tombé au milieu d'une phrase. Vérifié de
   320 à 1 440 px. */
.tete-g h2 { font-size: clamp(27px, 3.1vw, 36px); }

/* La citation, seule phrase de la section qui ne décrit aucune des quatre
   pertes : elle dit ce qu'elles ont en commun. Le guillemet est peint en
   pseudo-élément, il décore et ne dit rien que le `blockquote` ne dise déjà.
   La seconde moitié passe au bleu foncé comme dans la maquette ; c'est un
   `<strong>` et non une ligne, donc la coupure peut tomber où elle veut sans
   couper la couleur en deux. */
.fu-cit {
  position: relative; margin: 28px 0 0; padding: 18px 22px 18px 56px;
  background: var(--soft); border: 1px solid var(--tint-line); border-radius: 16px;
}
.fu-cit p {
  margin: 0; font-family: var(--ui); font-weight: 600; font-size: 16.5px;
  line-height: 1.5; letter-spacing: -0.01em; color: var(--fg);
}
.fu-cit strong { font-weight: 600; color: var(--on-tint); }
.fu-cit::before {
  content: '\201C'; position: absolute; left: 20px; top: 13px;
  font-family: Georgia, 'Times New Roman', serif; font-size: 38px; line-height: 1;
  color: var(--tint-border2);
}

/* L'encart qui referme la colonne : la seule réponse de la section à « et
   alors, qu'est-ce qu'on y fait ? ». Pastille ronde à halo, celle de la section
   suivante : deux dessins de pastille à deux sections d'écart auraient fait
   deux marques dans la même page. */
.fu-note {
  margin: 16px 0 0; display: flex; align-items: flex-start; gap: 15px;
  background: var(--card3); border: 1px solid var(--border);
  border-radius: 16px; padding: 18px 20px; box-shadow: var(--lift);
}
.fu-note-pic {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--card3); border: 1px solid var(--tint-line); color: var(--blue-sh);
  box-shadow: 0 0 0 6px rgba(29,155,240,0.05);
}
.fu-note-pic svg { width: 22px; height: 22px; display: block; }
.fu-note-t {
  display: block; font-family: var(--ui); font-weight: 600; font-size: 15.5px;
  line-height: 1.45; color: var(--fg);
}
.fu-note-suite { color: var(--on-tint); }
.fu-note-d {
  display: block; margin-top: 8px; font-size: 13.5px; line-height: 1.6; color: var(--dim);
}

/* ── Les quatre cartes ───────────────────────────────────────────────────── */

/* Le filet vertical entre la pastille et le texte est celui de la maquette : il
   tient la place où elle posait son numéro, et il suit la hauteur du texte
   plutôt qu'une valeur écrite ici. */
.fu {
  display: flex; align-items: center; gap: 18px;
  background: var(--card3); border: 1px solid var(--border);
  border-radius: 16px; padding: 20px 22px; box-shadow: var(--lift);
}
.fu-pic {
  flex: none; width: 58px; height: 58px; border-radius: 17px;
  display: flex; align-items: center; justify-content: center;
  background: var(--soft); border: 1px solid var(--border); color: var(--blue-sh);
}
.fu-pic svg { width: 25px; height: 25px; display: block; }
.fu-c { min-width: 0; border-left: 1px solid var(--border); padding-left: 18px; }
.fu-t {
  font-family: var(--ui); font-weight: 600; font-size: 16.5px; line-height: 1.35;
  letter-spacing: -0.01em; color: var(--fg); margin: 0;
}
.fu-d { font-size: 14.5px; line-height: 1.65; color: var(--muted); margin: 8px 0 0; }

/* La grille se replie en une colonne sous 940 px. Le seuil est mesuré : en
   dessous, la colonne de gauche descend sous 400 px et le titre de section n'y
   tient plus sur ses deux lignes, quelle que soit l'échelle. */
@media (max-width: 940px) {
  .fuites { grid-template-columns: minmax(0, 1fr); row-gap: 26px; }
  .fu-liste { border-left: 0; padding-left: 0; }
  /* Le chapeau retrouve l'échelle des autres titres de la page dès qu'il reprend
     toute la largeur. Il reste aligné à gauche : la citation et l'encart qui le
     suivent le sont, et le centrer aurait fait trois blocs alignés de deux
     façons dans la même colonne. */
  .tete-g h2 { font-size: clamp(30px, 3.4vw, 50px); }
}
@media (max-width: 620px) {
  .fu { padding: 18px 18px; gap: 15px; }
  .fu-c { padding-left: 15px; }
  .fu-t { font-size: 16px; }
  .fu-cit { padding: 16px 18px 16px 48px; }
  .fu-cit p { font-size: 15.5px; }
  .fu-cit::before { left: 16px; font-size: 34px; }
}
/* Sous 480 px, la pastille passe au-dessus du texte : à cette largeur, le filet
   et les 58 px de la pastille ne laissaient plus que deux cents pixels au titre,
   qui se cassait en quatre lignes. */
@media (max-width: 480px) {
  .fu { flex-direction: column; align-items: flex-start; gap: 14px; }
  .fu-pic { width: 50px; height: 50px; border-radius: 15px; }
  .fu-pic svg { width: 22px; height: 22px; }
  .fu-c { border-left: 0; padding-left: 0; }
}

/* ── Ce que ça change pour vos équipes ───────────────────────────────────── */

/* MAQUETTE DU PROPRIÉTAIRE, « design sec.png » (2026-08-18). La section posait
   quatre cartes identiques, deux par deux. La maquette en fait un bento : une
   carte haute à gauche sur toute la hauteur, une carte large en haut à droite,
   deux cartes courtes dessous, une barre de rappel sous l'ensemble.

   POURQUOI CASSER L'ÉGALITÉ. Les quatre cartes ne pèsent pas la même chose. La
   première répond à la question que le dirigeant se pose vraiment, et il faut
   qu'elle soit lue en premier ; la deuxième porte le seul constat de la
   section, celui qui fait hocher la tête ; les deux dernières sont des
   conséquences et se lisent en diagonale. Quatre cartes égales donnaient quatre
   poids égaux, et le regard n'avait aucune raison de commencer par la bonne.

   Trois colonnes. La carte haute tient la première sur les deux rangées, la
   carte large occupe les deux autres colonnes de la rangée du haut. Les
   hauteurs de rangée sont laissées au contenu, comme dans la maquette où la
   rangée du haut est nettement plus grande que celle du bas. Pas de `subgrid`
   ici, contrairement à `.portee` : aucune ligne n'a à s'aligner d'une carte à
   l'autre puisque les cartes n'ont plus la même composition.

   PASTILLES RONDES, ET SEULEMENT ICI. Le reste du site les dessine carrées à
   angles doux (`.pt-pic`, `.fu-pic`, et `.eq-pic` jusqu'à aujourd'hui). La
   maquette les veut rondes, blanches, posées sur un halo bleu très pâle. C'est
   un écart assumé, limité à cette section, et c'est ce que la maquette montre.

   LES DEUX BLEUS. Le trait des pastilles et des jetons est à `--blue-sh`
   (#0f6ba8, 5,6:1 sur blanc) et non au bleu de marque : ces pictogrammes
   accompagnent du texte de moins de 24 px. Le bleu plein `--blue` ne sert qu'aux
   deux pastilles remplies, `.eq-ok` et `.eq-rs-pic`, où le blanc dessus mesure
   3,0:1 : c'est le seuil des éléments non textuels, et ce sont des coches, pas
   des mots. */
.equipes {
  margin-top: 34px; display: grid; gap: 18px;
  grid-template-columns: 1.2fr 1fr 1fr;
}
.eq {
  display: flex; flex-direction: column;
  background: var(--card3); border: 1px solid #e8eff6;
  border-radius: 22px; padding: 32px 28px;
  box-shadow: 0 1px 2px rgba(15,20,25,0.03), 0 16px 40px rgba(23,74,120,0.07);
  transition: box-shadow .2s ease, transform .2s ease;
}
.eq:hover {
  box-shadow: 0 2px 4px rgba(15,20,25,0.04), 0 22px 50px rgba(23,74,120,0.11);
  transform: translateY(-2px);
}
/* Le fond de la carte haute descend vers le bleu, comme dans la maquette :
   c'est la seule carte blanche assez grande pour qu'un aplat s'y voie vide.

   Le dégradé sort huit textes du champ de `npm run contraste`, qui ne sait
   mesurer que les aplats. Vérifié à la main sur l'arrivée du dégradé, #f5faff,
   la plus sombre des deux bornes : --fg 17,6:1, --muted 5,8:1, --dim 5,2:1,
   --on-tint 5,4:1. Tous au-dessus du 4,5:1 de AA, et de loin. */
.eq-haute {
  grid-column: 1; grid-row: 1 / span 2; padding-left: 26px; padding-right: 26px;
  background: linear-gradient(168deg, var(--card3) 44%, #f5faff 100%);
}
.eq-large { grid-column: 2 / -1; grid-row: 1; background: var(--tint2); }

.eq-pic {
  flex: none; width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--card3); border: 1px solid #dcecfa; color: var(--blue-sh);
  box-shadow: 0 0 0 8px rgba(29,155,240,0.045), 0 4px 12px rgba(23,74,120,0.06);
}
.eq-pic svg { width: 25px; height: 25px; display: block; }
/* La grande pastille est la seule qui soit remplie. Blanche sur une carte
   blanche elle ne se voyait pas, alors que la maquette la donne a lire avant
   le titre : c'est le premier objet de la section. */
.eq-pic-g {
  width: 66px; height: 66px; background: var(--tint); border-color: transparent;
  box-shadow: 0 0 0 9px rgba(29,155,240,0.05);
}
.eq-pic-g svg { width: 31px; height: 31px; }

/* La pastille passe à côté du titre dans les trois cartes de droite, et reste
   au-dessus dans la carte haute : c'est la maquette, et c'est aussi ce dont le
   titre le plus court a besoin pour ne pas flotter au milieu d'une colonne. */
.eq-haut { display: flex; align-items: center; gap: 16px; }

.eq-t {
  font-family: var(--ui); font-weight: 600; font-size: 17.5px; line-height: 1.3;
  letter-spacing: -0.01em; color: var(--fg); margin: 0; text-wrap: balance;
}
.eq-large .eq-t { font-size: 21.5px; line-height: 1.3; letter-spacing: -0.02em; }
/* Le plus gros titre de la section, et le seul qui prenne son temps : la
   maquette laisse une quarantaine de pixels sous la pastille avant de le
   poser, et c'est ce vide qui lui donne son poids. */
.eq-t-g {
  font-size: 26px; line-height: 1.18; letter-spacing: -0.025em; font-weight: 700;
  margin: 40px 0 0;
}
.eq-d { font-size: 15px; line-height: 1.7; color: var(--muted); margin: 16px 0 0; }
.eq-haute .eq-d { line-height: 1.78; margin-bottom: 24px; }
/* La carte « On vous aide a l'annoncer » porte trois phrases quand les autres
   en portent deux. La maquette la descend d'un cran plutot que de l'allonger :
   c'est la plus haute des deux cartes du bas qui fixe la hauteur de la rangee,
   et tout ce que celle-ci prend en trop repart en vide dans la carte haute. */
.eq-cote-vert .eq-d { font-size: 14px; line-height: 1.68; }

/* La première phrase du paragraphe, sortie du paragraphe. C'est la seule ligne
   de la carte qu'on peut lire sans lire le reste, et c'est la réponse à la
   question posée : elle passe donc devant, cochée et en bleu. */
.eq-cle {
  display: flex; align-items: flex-start; gap: 10px; margin: 20px 0 0;
  font-family: var(--ui); font-weight: 600; font-size: 15px; line-height: 1.45;
  color: var(--on-tint);
}
.eq-ok {
  flex: none; width: 22px; height: 22px; border-radius: 50%; margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  background: var(--blue); color: #ffffff;
}
.eq-ok svg { width: 12px; height: 12px; display: block; }

/* L'encart qui referme la carte haute. `margin-top: auto` le colle en bas de
   carte : la carte tient deux rangées de grille et dépasse toujours son propre
   contenu, donc sans cela il flotterait sous le paragraphe avec un grand vide
   dessous. Au-dessus de lui, `.eq-haute .eq-d` garde 24 px pour que l'encart
   ne vienne jamais toucher le paragraphe quand la carte est courte. */
.eq-note {
  margin: auto 0 0; display: flex; align-items: flex-start; gap: 13px;
  background: var(--tint); border: 1px solid var(--tint-line); border-radius: 14px;
  padding: 16px 17px;
}
.eq-note-pic { flex: none; color: var(--on-tint); margin-top: 1px; }
.eq-note-pic svg { width: 24px; height: 24px; display: block; }
.eq-note-t {
  display: block; font-family: var(--ui); font-weight: 600; font-size: 14.5px;
  line-height: 1.4; color: var(--on-tint);
}
.eq-note-d { display: block; margin-top: 5px; font-size: 14px; line-height: 1.55; color: var(--dim); }

/* La citation de la carte large. Les deux guillemets sont peints en
   pseudo-éléments, en gris-bleu clair : ils décorent, ils ne disent rien que le
   `blockquote` ne dise déjà. Ils sont posés au pixel parce qu'un guillemet
   dessine tout en haut de sa boîte de ligne : d'où le `bottom` négatif du
   fermant, dont seule la boîte vide déborde sous le cadre. */
.eq-cit {
  position: relative; margin: 20px 0 0; padding: 16px 44px;
  background: var(--tint); border: 1px solid var(--tint-line); border-radius: 14px;
}
.eq-cit p {
  margin: 0; font-size: 15.5px; line-height: 1.6; font-weight: 500; color: var(--on-tint);
}
.eq-cit::before, .eq-cit::after {
  position: absolute; font-family: Georgia, 'Times New Roman', serif;
  font-size: 44px; line-height: 1; color: var(--tint-border2);
}
.eq-cit::before { content: '\201C'; left: 12px; top: 10px; }
.eq-cit::after { content: '\201D'; right: 12px; bottom: -20px; }

/* Les trois jetons sous la citation : ce que la personne concernée y gagne, en
   trois mots chacun. Fond blanc sur la carte teintée, donc ils se détachent
   sans avoir besoin d'une couleur de plus. */
.eq-jetons {
  list-style: none; margin: 18px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 12px;
}
.eq-jeton {
  flex: 1 1 175px; display: flex; align-items: center; gap: 10px;
  background: var(--card3); border: 1px solid #e3edf6; border-radius: 12px;
  padding: 13px 15px;
  font-family: var(--ui); font-weight: 500; font-size: 13.5px; line-height: 1.35;
  color: var(--fg);
}
.eq-jeton-pic { flex: none; color: var(--blue-sh); }
.eq-jeton-pic svg { width: 19px; height: 19px; display: block; }

/* Le filet de couleur des deux cartes du bas. Il ne porte aucune information à
   lui seul : les deux cartes disent la même chose sans lui, il ne fait que les
   distinguer l'une de l'autre, comme dans la maquette. */
.eq-cote { border-left: 6px solid var(--blue); padding: 30px 21px; }
.eq-cote .eq-haut { gap: 12px; }
.eq-cote .eq-pic { width: 44px; height: 44px; }
.eq-cote .eq-pic svg { width: 21px; height: 21px; }
.eq-cote .eq-t { font-size: 16.5px; }
.eq-cote-vert { border-left-color: var(--acc-3); }

/* La barre de rappel. Elle est plus étroite que la grille et centrée sous elle :
   ce qui reste quand on a fermé la page. Elle renvoyait à une `.fuites-note` qui
   n'existe plus — la section du dessus a perdu la sienne, et sa remplaçante
   (« section design 2.png ») ne la reprend pas. */
.eq-resume {
  list-style: none; max-width: 900px; margin: 18px auto 0; padding: 4px 6px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--card3); border: 1px solid #e8eff6;
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(15,20,25,0.03), 0 16px 40px rgba(23,74,120,0.07);
}
.eq-rs {
  display: flex; align-items: center; gap: 15px;
  padding: 17px 20px; border-left: 1px solid var(--border-soft);
}
.eq-rs:first-child { border-left: 0; }
.eq-rs-pic {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--blue); color: #ffffff;
}
.eq-rs-pic svg { width: 21px; height: 21px; display: block; }
.eq-rs-t {
  font-family: var(--ui); font-weight: 500; font-size: 14px; line-height: 1.45;
  color: var(--fg);
}

@media (prefers-reduced-motion: reduce) { .eq { transition: none; } }

/* Le bento se déplie en deux temps. Sous 1 000 px les deux grandes cartes
   prennent toute la largeur et les deux courtes restent côte à côte : elles
   sont assez brèves pour tenir dans une demi-largeur, et les empiler tout de
   suite aurait donné quatre pavés de la même taille, c'est-à-dire exactement
   ce que la maquette corrige. Sous 700 px, une seule colonne.

   `grid-row: auto` est indispensable sur la carte haute : sans lui elle
   continuerait de réclamer deux rangées et laisserait un trou. */
@media (max-width: 1000px) {
  .equipes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eq-haute, .eq-large { grid-column: 1 / -1; grid-row: auto; }
  .eq-note { margin-top: 0; }
  .eq-cote { padding: 30px 26px; }
  .eq-cote .eq-haut { gap: 16px; }
  .eq-cote .eq-pic { width: 54px; height: 54px; }
  .eq-cote .eq-pic svg { width: 25px; height: 25px; }
  .eq-cote .eq-t { font-size: 17.5px; }
}
@media (max-width: 700px) {
  .equipes { grid-template-columns: minmax(0, 1fr); }
  .eq-resume { grid-template-columns: minmax(0, 1fr); }
  .eq-rs { border-left: 0; border-top: 1px solid var(--border-soft); }
  .eq-rs:first-child { border-top: 0; }
}
@media (max-width: 620px) {
  .eq, .eq-cote { padding: 24px 21px; }
  .eq-haute { padding-left: 21px; padding-right: 21px; }
  .eq-t { font-size: 16.5px; }
  .eq-large .eq-t { font-size: 19px; }
  .eq-t-g { font-size: 22px; margin-top: 28px; }
  .eq-pic { width: 48px; height: 48px; }
  .eq-pic svg { width: 23px; height: 23px; }
  .eq-pic-g { width: 56px; height: 56px; }
  .eq-pic-g svg { width: 27px; height: 27px; }
  .eq-haut { gap: 13px; }
  .eq-cit { padding: 14px 32px; }
  .eq-jeton { flex: 1 1 100%; }
}

/* ── L'IA n'est plus réservée aux grands groupes ─────────────────────────── */

/* MAQUETTE DU PROPRIÉTAIRE, « design exemple.png » (2026-08-18). Les cartes
   reprenaient `.eq`, la carte de « Ce que ça change pour vos équipes » : une
   pastille, un titre, un paragraphe. La maquette leur donne trois choses de
   plus, et chacune fait un travail que le paragraphe seul ne faisait pas.

   La pastille grandit et passe à côté du titre au lieu d'être posée au-dessus :
   c'est la ligne du haut de la maquette, et le titre y gagne les deux lignes
   qu'il occupait déjà.

   Le filet bleu court : le même que celui du mot-clé de section, en dessous du
   titre plutôt qu'au-dessus. Il sépare l'affirmation de sa démonstration.

   La ligne cochée, en bas de carte : la maquette la met en bleu sur fond teinté,
   et c'est la seule phrase de la carte qu'on peut lire sans lire le reste. Elle
   est collée en bas (`margin-top: auto`) pour que les trois se posent sur la
   même ligne, quelle que soit la longueur du paragraphe au-dessus.

   Le numéro 01/02/03 posé en angle de carte, lui, n'a pas passé la journée :
   il venait de la maquette et le propriétaire l'a fait retirer le 2026-08-18. */
.portee {
  margin-top: 34px; display: grid; gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) { .portee { grid-template-columns: minmax(0, 1fr); } }

.pt {
  display: flex; flex-direction: column;
  background: var(--card3); border: 1px solid var(--border);
  border-radius: 18px; padding: 26px 22px 22px; box-shadow: var(--lift);
  transition: box-shadow .2s ease, transform .2s ease;
}
.pt:hover {
  box-shadow: 0 2px 4px rgba(15,20,25,0.05), 0 18px 38px rgba(15,20,25,0.09);
  transform: translateY(-2px);
}
.pt-haut { display: flex; align-items: flex-start; gap: 14px; }
.pt-pic {
  flex: none; width: 50px; height: 50px; border-radius: 15px;
  display: flex; align-items: center; justify-content: center;
  background: var(--tint2); border: 1px solid var(--tint-line); color: var(--on-tint);
}
.pt-pic svg { width: 24px; height: 24px; display: block; }
.pt-t {
  font-family: var(--ui); font-weight: 600; font-size: 17.5px; line-height: 1.28;
  letter-spacing: -0.015em; color: var(--fg); margin: 3px 0 0;
}
.pt-filet {
  display: block; width: 28px; height: 3px; border-radius: 2px;
  background: var(--blue); margin: 20px 0 0;
}
.pt-d { font-size: 15px; line-height: 1.7; color: var(--muted); margin: 16px 0 20px; }
.pt-cle {
  margin: auto 0 0; display: flex; align-items: flex-start; gap: 12px;
  background: var(--tint); border: 1px solid var(--tint-line); border-radius: 14px;
  padding: 14px 16px;
  font-family: var(--ui); font-weight: 600; font-size: 14.5px; line-height: 1.45;
  color: var(--on-tint);
}
/* Bleu plein et coche blanche, comme la maquette. Le blanc sur ce bleu fait
   3,0:1, le seuil des éléments non textuels : c'est une coche, pas un mot. */
.pt-ok {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--blue); color: #ffffff;
}
.pt-ok svg { width: 14px; height: 14px; display: block; }

/* LES TROIS CARTES PARTAGENT LEURS LIGNES. La maquette aligne le filet bleu,
   le paragraphe et la ligne cochée d'une carte à l'autre. À la largeur de cette
   page les cartes font un tiers de 1 016 px, moins que dans la maquette, et le
   premier titre y prend trois lignes quand les deux autres en prennent deux :
   chaque carte posait alors son filet à sa propre hauteur.

   `subgrid` fait porter les quatre lignes par la grille des cartes, pas par
   chaque carte : le titre le plus haut fixe la première ligne pour les trois.
   Sous `@supports`, parce que c'est un embellissement : un navigateur qui ne
   connaît pas `subgrid` garde la carte en colonne flex, chaque filet sous son
   propre titre, et rien ne casse.

   `row-gap: 0` sur la carte : une sous-grille hérite des gouttIères de sa
   grille, et les 18 px qui séparent deux cartes se seraient glissés entre le
   titre et son filet. Ce sont les marges des éléments qui espacent, comme
   avant. */
@supports (grid-template-rows: subgrid) {
  .portee { grid-template-rows: auto auto 1fr auto; }
  .pt { display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 0; }
}
@media (prefers-reduced-motion: reduce) { .pt { transition: none; } }
@media (max-width: 620px) {
  .pt { padding: 22px 20px 20px; }
  .pt-pic { width: 48px; height: 48px; border-radius: 14px; }
  .pt-pic svg { width: 23px; height: 23px; }
  .pt-t { font-size: 17px; }
}

/* Le panneau qui referme la section. Ce n'est pas une quatrième carte, c'est la
   conclusion, et elle porte des chiffres qui ne sont pas les nôtres.

   FOND SOMBRE, D'APRÈS LA MAQUETTE. C'est la seule surface sombre de la page, et
   c'est ce qui la détache des trois cartes blanches posées au-dessus : le
   lecteur voit qu'on a changé de registre avant d'avoir lu un mot. Le bleu de
   marque tient 5,7:1 sur ce bleu nuit et le gris clair 10:1, l'un et l'autre
   au-dessus des 4,5:1 demandés au texte courant.

   Les couches translucides sont posées sur un fond opaque, jamais sur une image
   ni un dégradé : le vérificateur de contraste sait composer les premières et
   compte les secondes « non mesurables ».

   Deux colonnes : le raisonnement à gauche, les chiffres à droite, séparés par
   un filet. Sous 900 px la colonne des chiffres passe dessous et le filet
   devient horizontal ; sous 620 px les trois chiffres s'empilent. */
.fenetre {
  margin: 26px 0 0; border-radius: 20px; overflow: hidden;
  background: #0b1b38; color: #c9d6e5;
  display: grid; grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.26fr);
}
.fen-txt { padding: 30px 30px 32px; }
.fen-haut { display: flex; align-items: flex-start; gap: 18px; }
.fen-pic {
  flex: none; width: 54px; height: 54px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(29,155,240,0.16); border: 1px solid rgba(29,155,240,0.32); color: #6ec1f7;
}
.fen-pic svg { width: 26px; height: 26px; display: block; }
.fen-t {
  font-family: var(--ui); font-weight: 600; font-size: clamp(21px, 2vw, 27px);
  line-height: 1.2; letter-spacing: -0.02em; color: #ffffff; margin: 2px 0 0;
}
/* Du texte bleu dans un titre, et non le marqueur : sur un fond sombre, une
   barre bleue derrière des lettres blanches ne se voit plus. C'est le dessin de
   la maquette, et il ne sort pas de ce panneau. */
.fen-hi { color: var(--blue); }
.fen-d { font-size: 15px; line-height: 1.7; color: #b9c8da; margin: 16px 0 0; }
.fen-d a { color: #7cc2f2; }
.fen-d a:hover { color: #ffffff; }
.fen-droite {
  padding: 30px 28px 26px; border-left: 1px solid rgba(255,255,255,0.10);
  display: flex; flex-direction: column; gap: 20px;
}
.fen-chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fen-ch { padding: 0 14px; text-align: center; border-left: 1px solid rgba(255,255,255,0.09); }
.fen-ch:first-child { border-left: 0; }
.fen-visu {
  height: 122px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.fen-anneau { position: relative; display: block; width: 118px; }
.fen-anneau svg { display: block; width: 100%; height: auto; }
.fen-v {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--ui); font-weight: 600; font-size: 29px; letter-spacing: -0.02em; color: #ffffff;
}
.fen-ic { display: block; color: var(--blue); }
.fen-ic svg { width: 44px; height: 44px; display: block; }
.fen-gros {
  display: block; margin: 6px 0 0;
  font-family: var(--ui); font-weight: 600; font-size: 33px; letter-spacing: -0.02em;
  color: var(--blue);
}
.fen-l { font-size: 13.5px; line-height: 1.5; color: #a8b8cc; margin: 12px 0 0; }
.fen-pointe {
  margin: auto 0 0; display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.11);
  border-radius: 999px; padding: 13px 20px;
  font-size: 15px; line-height: 1.45; color: #c9d6e5;
}
.fen-pointe strong { font-family: var(--ui); font-weight: 600; color: var(--blue); }
.fen-sp { flex: none; display: flex; color: var(--blue); }
.fen-sp svg { width: 18px; height: 18px; display: block; }
@media (max-width: 900px) {
  .fenetre { grid-template-columns: minmax(0, 1fr); }
  .fen-droite { border-left: 0; border-top: 1px solid rgba(255,255,255,0.10); }
}
@media (max-width: 620px) {
  .fen-txt { padding: 24px 20px 26px; }
  .fen-droite { padding: 24px 20px; gap: 22px; }
  .fen-haut { gap: 14px; }
  .fen-pic { width: 48px; height: 48px; border-radius: 14px; }
  .fen-pic svg { width: 23px; height: 23px; }
  .fen-chiffres { grid-template-columns: minmax(0, 1fr); }
  .fen-ch { border-left: 0; padding: 0; }
  .fen-ch + .fen-ch { margin-top: 22px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.09); }
  .fen-pointe { border-radius: 18px; align-items: flex-start; padding: 14px 16px; }
}

/* ── Bande d'appel ───────────────────────────────────────────────────────── */

/* Le panneau de contact de la page d'accueil : filet teinté plein, grands
   coins, dégradé bleuté qui fond vers le blanc. */
.bande {
  margin-top: 96px; background: linear-gradient(150deg, #eaf6ff 0%, var(--card3) 55%);
  border: 1px solid var(--tint-solid); border-radius: 24px; padding: 40px;
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 30px; align-items: center;
}
@media (max-width: 860px) { .bande { grid-template-columns: minmax(0, 1fr); padding: 26px; } }
/* un voile doux derrière la bande d'appel, comme autour du panneau de contact
   de l'accueil. :has() est décoratif : un navigateur qui l'ignore perd le
   voile, rien d'autre. */
section:has(> .bande) { position: relative; isolation: isolate; }
section:has(> .bande)::before {
  content: ''; position: absolute; left: 50%; width: 100vw; transform: translateX(-50%);
  top: 0; bottom: -60px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(30% 62% at 72% 46%, rgba(29,155,240,0.10), transparent 72%),
    radial-gradient(26% 54% at 22% 72%, rgba(124,92,245,0.08), transparent 72%);
}
.bande h2 { font-size: clamp(22px, 2.4vw, 30px); }
.bande p { margin: 12px 0 0; font-size: 15.5px; line-height: 1.65; color: var(--muted); }
.bande .actions { margin-top: 0; }

/* ── Note honnête ────────────────────────────────────────────────────────── */

/* Le bloc qui dit ce que nous ne promettons pas. Il est volontairement calme :
   ce n'est pas une alerte, c'est une clause. */
.note-franche {
  margin: 26px 0 0; padding: 16px 18px; border-radius: 12px;
  background: var(--tint2); border: 1px solid var(--tint-line);
  font-size: 14.5px; line-height: 1.65; color: var(--muted);
}
.note-franche b { font-family: var(--ui); font-weight: 600; color: var(--fg); }

/* Un nom de fichier au fil du texte. Pas de police à chasse fixe : IBM Plex
   Mono a été retiré de tout le site (DESIGN-LOCK, point 1), et laisser <code>
   retomber sur la monospace du système ferait entrer une cinquième fonte par
   la petite porte. */
code {
  font-family: var(--ui); font-size: 0.94em; font-weight: 500;
  background: var(--tint); border: 1px solid var(--tint-line);
  border-radius: 5px; padding: 1px 5px; color: var(--on-tint);
}

/* ── Cartes « Reconnaissez votre situation » ─────────────────────────────── */

/* Trois cartes en rangée, une par service, chacune portant son illustration.
   Elles remplacent les rangées citées qui tenaient cette section : la phrase
   reste le point d'entrée, mais l'image dit en un coup d'œil de quel genre de
   travail on parle.

   La lumière est celle de la maquette remise par le propriétaire. Quatre
   calques, tous placés par les deux mêmes variables que /assets/services.js
   tient à jour (--px, --py : la position du curseur DANS la carte, de 0 à 1) :

     1. le fond de .cs    une tache douce posée sous le curseur ;
     2. .cs::before       le filet du bord, teinté et vif ;
     3. .cs::after        un cœur plus clair au milieu de ce filet ;
     4. .cs-halo          la même tache, floutée, derrière la carte.

   La teinte, elle, vient de --gx — la position du curseur dans la FENÊTRE.
   Les trois cartes prennent donc la même à un instant donné, et la rangée se
   lit comme éclairée par une seule source qui la traverse, ce qui est tout
   l'intérêt de l'effet. Sans JavaScript, les valeurs par défaut laissent une
   lumière fixe en haut de chaque carte : rien ne manque, rien ne bouge.

   Deux règles à ne pas casser :
   • .cs ne doit porter ni transform, ni filter, ni isolation, ni opacité
     partielle. N'importe laquelle en ferait un contexte d'empilement, et
     .cs-halo (z-index: -1) repasserait alors AU-DESSUS du fond blanc de la
     carte au lieu de rester derrière. C'est pourquoi le survol se marque à
     l'ombre et à l'intensité de la lumière, jamais par un déplacement.
   • .cs ne doit pas porter overflow: hidden, qui rognerait ce même halo.
     C'est .cs-visu qui découpe l'illustration. */

.situations {
  margin-top: 34px; display: grid; gap: 22px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* Deux paliers, et aucun cap de largeur : les cartes occupent toujours toute
   la gouttière. Le chapeau, lui, reste dans les 780 px de `.tete-c` — c'est
   voulu : une ligne de titre courte au-dessus d'une rangée large, comme sur la
   page d'accueil. Le halo déborde de 10 px, ce qui tient dans la gouttière
   (20 px sur téléphone) comme dans l'écart entre deux cartes (22 px). */
@media (max-width: 900px) {
  .situations { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}
@media (max-width: 620px) {
  .situations { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

.cs {
  /* Les réglages de la lumière, groupés pour être relus d'un coup. */
  --r: 22px;          /* rayon de la carte */
  --ep: 2px;          /* épaisseur du filet lumineux */
  --tache: 300px;     /* rayon de la tache de lumière */
  --base: 196;        /* teinte quand le curseur est au bord gauche */
  --etendue: 68;      /* écart de teinte d'un bord de fenêtre à l'autre */
  --hue: calc(var(--base) + var(--gx, 0.5) * var(--etendue));
  --op-nappe: 0.09;   /* la tache, à l'intérieur */
  --op-filet: 0.9;    /* le filet du bord */
  --op-coeur: 0.55;   /* le cœur clair de ce filet */
  --op-halo: 0.4;     /* la nappe floutée, derrière */

  position: relative; display: flex; flex-direction: column;
  padding: 12px 12px 24px; color: var(--fg);
  border: var(--ep) solid var(--border-soft); border-radius: var(--r);
  background-color: var(--card3);
  background-image: radial-gradient(var(--tache) var(--tache)
    at calc(var(--px, 0.5) * 100%) calc(var(--py, 0.26) * 100%),
    hsl(var(--hue) 95% 56% / var(--op-nappe)), transparent 100%);
  box-shadow: 0 1px 2px rgba(15, 20, 25, 0.04),
              0 20px 46px -26px hsl(var(--hue) 70% 40% / 0.5);
  transition: border-color .25s ease, box-shadow .25s ease;
}

/* La nappe floutée. Elle déborde de 10 px, la carte étant opaque n'en laisse
   voir que ce débord : une lueur qui sort de derrière, du côté du curseur. */
.cs-halo {
  position: absolute; inset: -10px; z-index: -1; pointer-events: none;
  border-radius: calc(var(--r) + 10px);
  opacity: var(--op-halo); filter: blur(17px);
  background-image: radial-gradient(calc(var(--tache) * 0.8) calc(var(--tache) * 0.8)
    at calc(var(--px, 0.5) * 100%) calc(var(--py, 0.26) * 100%),
    hsl(var(--hue) 96% 55%), transparent 100%);
  transition: opacity .25s ease;
}

/* Le filet du bord. Les deux calques de masque ne gardent que l'anneau de la
   bordure : le premier couvre le padding-box, le second le border-box, et
   `exclude` (XOR) ne laisse que ce qui les sépare. Sans ce masque, le dégradé
   remplirait toute la carte — d'où le @supports, qui préfère ne rien dessiner
   plutôt que de dessiner faux. */
@supports (mask-composite: exclude) or (-webkit-mask-composite: xor) {
  .cs::before, .cs::after {
    content: ''; position: absolute; inset: calc(var(--ep) * -1); pointer-events: none;
    border: var(--ep) solid transparent; border-radius: calc(var(--r) + var(--ep));
    background-repeat: no-repeat;
    -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0) border-box;
    mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0) border-box;
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }
  .cs::before {
    background-image: radial-gradient(calc(var(--tache) * 0.75) calc(var(--tache) * 0.75)
      at calc(var(--px, 0.5) * 100%) calc(var(--py, 0.26) * 100%),
      hsl(var(--hue) 95% 54% / var(--op-filet)), transparent 100%);
  }
  .cs::after {
    background-image: radial-gradient(calc(var(--tache) * 0.4) calc(var(--tache) * 0.4)
      at calc(var(--px, 0.5) * 100%) calc(var(--py, 0.26) * 100%),
      hsl(var(--hue) 100% 76% / var(--op-coeur)), transparent 100%);
  }
}

/* L'illustration. Fond blanc sous l'image : les trois fichiers ont un fond
   quasi blanc, c'est lui qui les raccorde entre eux et au reste de la carte. */
.cs-visu {
  display: block; border-radius: 13px; overflow: hidden;
  background: #ffffff; border: 1px solid var(--border-soft);
}
.cs-visu img { display: block; width: 100%; height: auto; }

.cs-corps { display: flex; flex: 1; flex-direction: column; padding: 20px 11px 0; }

/* La pastille et la phrase, côte à côte, comme sur la maquette du 2026-08-18.
   La pastille est alignée sur la première ligne du texte et ne rétrécit pas :
   `flex: none`, sinon une phrase longue la comprimerait en ovale. */
.cs-haut { display: flex; align-items: flex-start; gap: 14px; }
.cs-pic {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--acc-bg); border: 1px solid var(--acc-li); color: var(--acc);
  transition: background-color .2s ease, border-color .2s ease;
}
.cs-pic svg { width: 20px; height: 20px; display: block; }

/* La phrase citée garde les guillemets et la graisse du routeur qu'elle
   remplace : c'est toujours le visiteur qu'on cite, pas nous. */
.cs-dit {
  font-family: var(--ui); font-weight: 600; font-size: 16.5px; line-height: 1.45;
  color: var(--fg); quotes: '\00ab\00a0' '\00a0\00bb'; text-wrap: pretty;
}

/* Le pied de carte, poussé en bas par `margin-top: auto` pour que les trois
   filets s'alignent quelle que soit la longueur de la phrase au-dessus.

   Le nom du service et sa flèche sont centrés sous le filet (demande du
   propriétaire, 2026-08-18). Les deux restent un seul groupe : `justify-content`
   centre la paire, l'écart de 12 px ne bouge pas, et les trois cartes posent
   leur libellé au même endroit même quand il n'a pas la même longueur. */
.cs-pied {
  margin-top: auto; padding-top: 18px;
  border-top: 1px solid var(--border-soft);
  display: flex; align-items: center; justify-content: center; gap: 12px;
}
/* Deux couleurs, deux seuils : le libellé fait 14 px et demande 4,5:1, la
   flèche est un aplat et se contente de 3:1. Un bleu vif en 14 px sur blanc
   tombe à 3,00:1 — il ne peut pas porter le texte. */
.cs-vers {
  font-family: var(--ui); font-weight: 600; font-size: 14.5px; color: var(--acc-t);
}
.cs-fl {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--acc-bg); border: 1px solid var(--acc-li); color: var(--acc);
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

/* Une couleur par carte, reprise de la maquette : bleu, vert, violet. Les trois
   sont déjà employées par les cartes « Cas fréquents » de la page d'accueil. */
.cs-bleu   { --acc: #1d9bf0; --acc-t: #0f6ba8; --acc-bg: #e8f5fe; --acc-li: #cfe8fa; }
.cs-vert   { --acc: #2ea86a; --acc-t: #197a49; --acc-bg: #e6f5ed; --acc-li: #c6e8d6; }
.cs-violet { --acc: #7c5cf5; --acc-t: #5b3fd4; --acc-bg: #f0ecfe; --acc-li: #ddd3fd; }

.cs:hover, .cs:focus-visible {
  --op-nappe: 0.17; --op-halo: 0.62; --op-coeur: 0.75;
  border-color: var(--tint-border);
  box-shadow: 0 1px 2px rgba(15, 20, 25, 0.05),
              0 26px 58px -28px hsl(var(--hue) 72% 42% / 0.62);
}
/* Au survol, la flèche avance et les deux pastilles prennent leur couleur
   pleine : c'est le seul endroit où la carte dit qu'elle est cliquable. */
.cs:hover .cs-fl, .cs:focus-visible .cs-fl { transform: translateX(3px); }
.cs:hover .cs-pic, .cs:focus-visible .cs-pic,
.cs:hover .cs-fl, .cs:focus-visible .cs-fl {
  background: #ffffff; border-color: var(--acc);
}
/* Le contour de focus global arrondit à 4 px ; sur une carte de 22 px, il
   passerait en biais dans les angles. */
.cs:focus-visible { border-radius: var(--r); }

@media (prefers-reduced-motion: reduce) {
  .cs, .cs-halo, .cs-pic, .cs-fl { transition: none; }
  .cs:hover .cs-fl, .cs:focus-visible .cs-fl { transform: none; }
}

@media print {
  .cs-halo { display: none; }
  .cs { box-shadow: none; }
}

@media print {
  .bande, .actions, .actions-centre { display: none !important; }
}
/* ── La galerie de machines (/ia-locale/) ────────────────────────────────── */

/* Cinq photos d'installations en service, la seule section du site qui montre
   du matériel plutôt que de le décrire. Elle répond à une question que personne
   ne pose à voix haute mais que tout le monde se pose avant de signer : à quoi
   ça ressemble, une IA qui tourne chez soi.

   LA CARTE PREND LA FORME DE LA MACHINE. Une tour est plus haute que large, une
   baie est plus large que haute : les trois premières cartes sont donc en
   portrait et les deux dernières en paysage, et la grille se lit du plus petit
   au plus grand sans qu'aucun numéro ne l'annonce. Les images sont recadrées à
   ces deux rapports au moment de la conversion en WebP, pas par le navigateur :
   `object-fit` ne sert qu'aux paliers étroits, où les deux formes doivent
   s'aligner sur une même ligne.

   Six colonnes plutôt que trois : c'est le plus petit compte qui laisse trois
   cartes (2 colonnes chacune) puis deux cartes (3 colonnes chacune) tomber sur
   des lignes pleines, sans grille imbriquée.

   Pas de lumière qui suit le curseur, contrairement à `.cs` : ces cartes ne
   mènent nulle part, et une carte qui s'allume au survol sans être cliquable
   promet un clic qu'on ne tient pas. Le survol ne fait que soulever la carte,
   comme `.pt`. */
.mach {
  margin-top: 34px; display: grid; gap: 20px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.mac { grid-column: span 2; }
.mac-baie { grid-column: span 3; }

.mac {
  display: flex; flex-direction: column; margin: 0;
  background: var(--card3); border: 1px solid var(--border);
  border-radius: 18px; padding: 12px 12px 20px; box-shadow: var(--lift);
  transition: box-shadow .2s ease, transform .2s ease;
}
.mac:hover {
  box-shadow: 0 2px 4px rgba(15,20,25,0.05), 0 18px 38px rgba(15,20,25,0.09);
  transform: translateY(-2px);
}

/* Le fond sombre est celui de `.fenetre`, et il ne se voit jamais : les cinq
   photos couvrent leur cadre. Il n'existe que pour le temps de chargement, où
   un aplat blanc sous une photo sombre fait un éclair à chaque carte. */
.mac-visu {
  display: block; border-radius: 12px; overflow: hidden;
  background: #0b1b38; border: 1px solid var(--border-soft);
}
/* LE RAPPORT EST ÉCRIT, JAMAIS LAISSÉ À `auto`. Les cinq photos sont en
   chargement différé : tant qu'elles ne sont pas arrivées, c'est le rapport
   déclaré qui réserve leur place. Or `aspect-ratio: auto` en CSS l'emporte sur
   les attributs `width` et `height` de la balise, qui ne sont qu'un indice de
   présentation : la carte resterait plate puis s'ouvrirait d'un coup à
   l'arrivée de la photo, en poussant tout ce qui suit. Mesuré à 390 px, où les
   cinq cartes se réduisaient à leur seule légende.

   Les deux valeurs sont exactement celles des fichiers, donc `object-fit` n'a
   rien à rogner ici ; il ne sert qu'au palier deux colonnes, où les deux formes
   passent au carré pour s'aligner sur une même ligne. */
.mac-visu img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 3 / 4; object-fit: cover;
}
.mac-baie .mac-visu img { aspect-ratio: 4 / 3; }

.mac-c { padding: 18px 10px 0; }
/* La ligne méta dit OÙ la machine est posée, pas son rang : c'est le seul
   classement qui apprenne quelque chose au lecteur, et le site ne numérote plus
   ses cartes depuis le 2026-08-18. */
.mac-ou {
  font-family: var(--ui); font-weight: 500; font-size: 12px; letter-spacing: 0.06em;
  line-height: 1.4; color: var(--dim); margin: 0;
}
.mac-t {
  font-family: var(--ui); font-weight: 600; font-size: 17.5px; line-height: 1.28;
  letter-spacing: -0.015em; color: var(--fg); margin: 7px 0 0;
}
.mac-d { font-size: 14.5px; line-height: 1.65; color: var(--muted); margin: 10px 0 0; }

/* Deux colonnes : les cinq cartes n'ont plus la même forme d'image sur une même
   ligne, et une tour à côté d'une baie laisserait la moitié d'une carte vide.
   Le carré est le compromis qui coupe le moins des deux côtés. La cinquième,
   seule sur sa ligne, prend les deux colonnes. */
@media (max-width: 1000px) {
  .mach { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .mac, .mac-baie { grid-column: span 1; }
  .mac-baie:last-child { grid-column: span 2; }
  .mac-visu img, .mac-baie .mac-visu img { aspect-ratio: 1 / 1; }
}
/* En colonne unique, chaque photo retrouve son cadrage d'origine : plus rien
   n'a à s'aligner sur une voisine. */
@media (max-width: 620px) {
  .mach { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .mac-baie:last-child { grid-column: span 1; }
  .mac-visu img { aspect-ratio: 3 / 4; }
  .mac-baie .mac-visu img { aspect-ratio: 4 / 3; }
  .mac { padding: 10px 10px 18px; }
  .mac-c { padding: 16px 8px 0; }
  .mac-t { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) { .mac { transition: none; } }
@media print { .mac { box-shadow: none; } }

/* ════════════════════════════════════════════════════════════════════════════
   LETTRE D'INFORMATION  (/blog/)
   ════════════════════════════════════════════════════════════════════════════

   Un champ, un bouton, une case à cocher. Le formulaire poste nativement vers
   /api/newsletter : aucun script n'est chargé sur cette page, et il n'y en a
   pas besoin. Le Worker répond par une redirection 303 vers #lettre-ok ou
   #lettre-ko, et `:target` affiche le message correspondant.

   C'est la discipline déjà suivie ailleurs sur le site : le panneau de
   navigation s'ouvre avec `:focus-within`, la FAQ avec `<details>`. Un
   gestionnaire d'événements de moins est un fichier de moins à charger, une
   directive de moins à assouplir dans la CSP, et un formulaire qui marche même
   quand le script ne se charge pas. */

/* Le chapeau reprend le centrage de `.aud-top`, qui coiffe déjà la section du
   dessus sur cette page. Pas `.tete-c` : son échelle de titre (jusqu'à 50 px)
   est celle de /nos-services/, et elle passerait devant le h1 de la page.

   Le centrage est posé sur la section, puis repris à gauche par la carte : le
   formulaire est le seul endroit dont le contenu (libellé, case à cocher,
   note) se lit aligné. */
.lettre-sec { text-align: center; }
.lettre-sec > h2,
.lettre-sec > .lede { max-width: 780px; margin-left: auto; margin-right: auto; }

.lettre {
  text-align: left;
  margin: 34px auto 0; max-width: 640px;
  background: var(--wash); border: 1px solid var(--border); border-radius: 22px;
  padding: 28px; box-shadow: var(--lift);
}

/* Le champ et le bouton sur une ligne, le consentement sous les deux.
   `align-items: end` aligne le bas du bouton sur celui du champ, dont le
   libellé occupe une ligne de plus. */
.lettre-form {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px; align-items: end;
}
.lettre-label {
  display: block; font-family: var(--ui); font-weight: 600; font-size: 11.5px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 9px;
}
.lettre-input {
  width: 100%; height: 56px; padding: 0 16px;
  background: var(--card3); border: 1px solid var(--border); border-radius: 12px;
  font-size: 16px; color: var(--fg);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.lettre-input:hover { border-color: var(--tint-border2); }
.lettre-input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(29,155,240,0.16); }
/* Le gris du texte saisi ne convient pas à l'exemple affiché à vide : mesuré
   à 4,45:1 sur le formulaire d'accueil, soit sous le seuil. --dim2 le passe.
   check-contraste.mjs ne voit pas les pseudo-éléments, cette valeur est donc
   vérifiée à la main. */
.lettre-input::placeholder { color: var(--dim2); opacity: 1; }
.lettre-go {
  height: 56px; padding: 0 24px; border: 1px solid transparent; border-radius: 12px;
  background: var(--blue-cta); color: #ffffff; cursor: pointer;
  font-family: var(--ui); font-weight: 600; font-size: 15.5px; white-space: nowrap;
  box-shadow: 0 2px 6px rgba(15,20,25,0.10), 0 10px 24px rgba(29,155,240,0.16);
  transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.lettre-go:hover { background: var(--blue-cta-h); transform: translateY(-1px); }

.lettre-consent {
  grid-column: 1 / -1;
  display: flex; gap: 11px; align-items: flex-start;
  font-size: 13.5px; line-height: 1.6; color: var(--muted);
}
.lettre-consent input { margin-top: 3px; accent-color: var(--on-tint); }

/* Le pot de miel. Hors écran plutôt que `display: none` : un robot qui lit le
   HTML remplit tout ce qui porte un nom, et c'est précisément ce qu'on veut
   qu'il fasse ici. Retiré de la tabulation et de l'arbre d'accessibilité, il
   n'existe donc pour personne d'autre. */
.lettre-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.lettre-note { margin: 16px 0 0; font-size: 13.2px; line-height: 1.55; color: var(--muted); }

/* Les deux réponses possibles. Tant que l'ancre n'est pas active elles
   n'existent ni à l'écran ni pour un lecteur d'écran : la page est exactement
   celle d'avant l'envoi. `scroll-margin-top` tient compte de l'en-tête collant,
   sinon la redirection déposerait le message dessous.

   PAS `display: none`, et c'est mesuré. Un élément sans boîte n'est pas une
   cible pour le navigateur : en arrivant sur /blog/#lettre-ok il n'avait nulle
   part où descendre, la page restait en haut et la confirmation passait sous la
   ligne de flottaison. Une boîte de hauteur nulle lui donne la position ;
   `visibility: hidden` fait le reste du travail de `display: none`, y compris
   le retrait de l'arbre d'accessibilité. */
.lettre-etat {
  visibility: hidden; height: 0; overflow: hidden;
  margin: 0; padding: 0; border: 0 solid transparent; border-radius: 14px;
  scroll-margin-top: 110px;
}
.lettre-etat:target {
  visibility: visible; height: auto; overflow: visible;
  padding: 20px 22px; border-width: 1px;
  /* Sépare le message du formulaire, qui reste sous lui après un échec. */
  margin-bottom: 20px;
}
/* Et il faut désarmer le défilement doux, sinon rien de tout cela ne sert.
   Mesuré dans Chrome : `html { scroll-behavior: smooth }` (audit.css) fait
   sauter le défilement vers l'ancre quand elle arrive avec le document, au
   chargement — pas d'animation, pas de saut, la page reste en haut et la
   confirmation attend sous la ligne de flottaison. Le même appel en
   `behavior: instant` descend correctement, ce qui désigne l'animation et non
   la cible.

   La règle ne vaut donc que pendant cette arrivée-là : `:has()` la limite au
   cas où l'un des deux blocs est la cible courante. Partout ailleurs, y compris
   sur les ancres internes des autres pages, le défilement reste doux. */
html:has(.lettre-etat:target) { scroll-behavior: auto; }
.est-ok:target { background: var(--ok-bg); border-color: var(--ok-line); }
.est-ko:target { background: var(--bad-bg); border-color: var(--bad-line); }
/* Le formulaire s'efface quand l'inscription est enregistrée, et seulement
   là. Après un échec il reste : le message dit « vérifiez l'adresse, puis
   réessayez », ce qui ne veut rien dire si le champ a disparu avec lui. Les
   deux blocs précèdent le formulaire dans le HTML précisément pour rendre ce
   sélecteur possible. */
#lettre-ok:target ~ .lettre-form,
#lettre-ok:target ~ .lettre-note { display: none; }
.lettre-etat-t {
  font-family: var(--ui); font-weight: 600; font-size: 11.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.est-ok .lettre-etat-t { color: var(--ok); }
.est-ko .lettre-etat-t { color: var(--bad); }
.lettre-etat p { margin: 10px 0 0; font-size: 15.5px; line-height: 1.65; color: var(--fg); }
.lettre-etat:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

@media (max-width: 640px) {
  .lettre { padding: 22px; border-radius: 18px; }
  .lettre-form { grid-template-columns: minmax(0, 1fr); }
}

/* ════════════════════════════════════════════════════════════════════════════
   CAS CONCRETS  (/cas-clients/)
   ════════════════════════════════════════════════════════════════════════════

   Une carte par cas, et toutes racontent dans le même ordre : qui, le bazar
   d'avant, ce qui tourne maintenant, qui garde la main, quel service. La
   parallèle est voulue : six récits qui se lisent comme un seul tableau.

   RIEN DE NEUF DANS LE DESSIN, EXPRÈS. La pastille reprend celle de `.pt-pic`
   (carrée à angles doux : les pastilles rondes restent l'écart assumé de la
   section « équipes » de /nos-services/), la liste cochée est `.liste-check`
   telle quelle, l'encart teinté du bas reprend la boîte de `.pt-cle`, et les
   couleurs du lien de service sont les variables de `.cs-bleu` / `.cs-vert` /
   `.cs-violet`, posées sur la carte : le lien prend ainsi la couleur du
   service qu'il désigne, la même que dans le panneau du menu et sur le
   routeur de /nos-services/.

   PAS D'EFFET DE SURVOL. Ces cartes ne mènent nulle part (le lien du pied,
   si) : une carte qui se soulève sous le curseur dit « clique », et c'est la
   même raison qui l'a retirée aux quatre cartes de `.fuites`.

   Les fonds sont des aplats, jamais des dégradés : `npm run contraste` ne
   sait mesurer que les aplats, et tout le texte de cette section doit rester
   dans son champ. */
.cas-grille {
  margin-top: 34px; display: grid; gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}
.cas {
  display: flex; flex-direction: column;
  background: var(--card3); border: 1px solid #e8eff6;
  border-radius: 18px; padding: 26px 24px 22px;
  box-shadow: var(--lift);
}
.cas-haut { display: flex; align-items: flex-start; gap: 14px; }
.cas-pic {
  flex: none; width: 50px; height: 50px; border-radius: 15px;
  display: flex; align-items: center; justify-content: center;
  background: var(--tint2); border: 1px solid var(--tint-line); color: var(--on-tint);
}
.cas-pic svg { width: 24px; height: 24px; display: block; }
.cas-titre { min-width: 0; }
.cas-titre h3 {
  font-family: var(--ui); font-weight: 600; font-size: 17.5px; line-height: 1.28;
  letter-spacing: -0.015em; color: var(--fg); margin: 2px 0 0; text-wrap: balance;
}
/* La ligne « chez qui » : le décor du cas, pas un sous-titre. Le point médian
   sépare le secteur du volume. */
.cas-ou { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--dim); }
.cas-avant { font-size: 15px; line-height: 1.7; color: var(--muted); margin: 16px 0 0; }
/* `.liste-check` vient des pages de service ; seule la respiration change,
   pour que la liste pousse l'encart du bas sans le toucher. */
.cas-faits { margin: 16px 0 20px; }
/* L'encart « qui garde la main », collé en bas de carte : les six se posent
   sur la même ligne quelle que soit la longueur du récit au-dessus. C'est la
   boîte de `.pt-cle`, en composition libre pour porter une pastille et une
   phrase entière. */
.cas-main {
  margin: auto 0 0; display: flex; align-items: flex-start; gap: 12px;
  background: var(--tint); border: 1px solid var(--tint-line); border-radius: 14px;
  padding: 14px 16px;
}
.cas-main-pic { flex: none; color: var(--on-tint); margin-top: 1px; }
.cas-main-pic svg { width: 22px; height: 22px; display: block; }
.cas-main p {
  margin: 0; font-family: var(--ui); font-weight: 500; font-size: 14px;
  line-height: 1.55; color: var(--on-tint);
}
/* Le pied : le service dont le cas relève. Deux couleurs, deux seuils, comme
   `.cs-vers` : le libellé fait 14,5 px et prend `--acc-t` (4,5:1), la flèche
   est un aplat et peut prendre `--acc` (3:1). */
.cas-pied {
  margin: 14px 0 0; padding-top: 14px;
  border-top: 1px solid var(--border-soft);
}
.cas-vers {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--ui); font-weight: 600; font-size: 14.5px; color: var(--acc-t);
}
.cas-vers:hover { color: var(--acc-t); text-decoration: underline; }
.cas-fl {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--acc-bg); border: 1px solid var(--acc-li); color: var(--acc);
  transition: background-color .2s ease, border-color .2s ease;
}
.cas-vers:hover .cas-fl { background: #ffffff; border-color: var(--acc); }

/* Le cas à part occupe sa propre section : une seule carte, large, teintée
   comme `.eq-large`, coupée en deux colonnes pour ne pas étirer une colonne
   de texte sur toute la gouttière. L'encart du bas y garde la teinte pleine
   sur le fond pâle, l'appariement déjà éprouvé par `.eq-cit` sur `.eq-large`. */
.cas-solo {
  margin-top: 34px; display: grid; align-items: start;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  gap: 10px 44px;
  background: var(--tint2); border-color: var(--tint-line);
  padding: 30px 30px 26px;
}
.cas-solo .cas-pic { background: var(--card3); }
.cas-solo .cas-main { margin-top: 20px; }

@media (max-width: 880px) {
  .cas-grille { grid-template-columns: minmax(0, 1fr); }
  .cas-solo { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
@media (max-width: 620px) {
  .cas { padding: 22px 20px 20px; }
  .cas-pic { width: 48px; height: 48px; border-radius: 14px; }
  .cas-pic svg { width: 23px; height: 23px; }
  .cas-titre h3 { font-size: 17px; }
  .cas-solo { padding: 24px 20px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .cas-fl { transition: none; }
}
@media print {
  .cas { box-shadow: none; }
}

/* ── « Rester à la pointe » : la veille, et son panneau des coûts ────────── */

/* Maquette du propriétaire du 2026-08-18 (« Capture d'écran 2026-08-18
   225847.png »), pour la section « Rester à la pointe » de /a-propos/. Ses deux
   `.encart` deviennent deux cartes illustrées, et la note franche qui les
   suivait devient un panneau à part entière. `.duo` et `.encart` ne bougent pas
   d'un pixel : trois autres sections de la même page les emploient tels quels.

   POURQUOI DES CLASSES À ELLE ET NON UN MODIFICATEUR DE `.encart`. La carte de
   cette maquette-ci pose sa pastille EN COLONNE : le filet bleu, les
   paragraphes et la pastille cochée s'alignent sur le titre, pas sur le bord de
   la carte. `.est-illustre`, juste au-dessus, fait le contraire pour la
   maquette voisine — pastille ronde de 100 px, texte en regard — et `.pt` de
   /nos-services/ pose son filet au bord. Trois dessins, trois maquettes ; les
   fondre ferait un composant à trois interrupteurs.

   Le mot-clé et le titre restent ceux de la page d'accueil (demande du
   propriétaire) : la maquette les redessine, on ne la suit pas là-dessus. */

.veille {
  margin-top: 34px; display: grid; gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 860px) { .veille { grid-template-columns: minmax(0, 1fr); } }

/* La carte est une grille de deux colonnes, et non une pile : c'est ce qui met
   tout le texte, filet et pastille compris, dans la colonne du titre. */
.vei {
  display: grid; grid-template-columns: 62px minmax(0, 1fr); column-gap: 20px;
  background: var(--card3); border: 1px solid var(--border);
  border-radius: 18px; padding: 26px 24px 22px; box-shadow: var(--lift);
  transition: box-shadow .2s ease, transform .2s ease;
}
.vei:hover {
  box-shadow: 0 2px 4px rgba(15,20,25,0.05), 0 18px 38px rgba(15,20,25,0.09);
  transform: translateY(-2px);
}
/* Teinte pleine et sans contour, comme la maquette. Le trait du pictogramme est
   à `--on-tint` (#0f6ba8) et non au bleu vif : 5,1:1 sur cette teinte, quand
   `--blue` y tombe à 2,1:1 — sous les 3:1 demandés à un élément non textuel. */
.vei-pic {
  align-self: start; width: 62px; height: 62px; border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  background: var(--tint); color: var(--on-tint);
}
/* 32 px dans 62 : la maquette remplit sa pastille à un peu plus de la
   moitié, et le trait de 24 px de `.pt-pic` y flottait. */
.vei-pic svg { width: 32px; height: 32px; display: block; }
.vei-txt { display: flex; flex-direction: column; min-width: 0; }
.vei-t {
  font-family: var(--ui); font-weight: 600; font-size: 18px; line-height: 1.3;
  letter-spacing: -0.015em; color: var(--fg); margin: 5px 0 0;
}
/* Le filet bleu court, le même qu'à /nos-services/ : il sépare l'affirmation de
   sa démonstration. */
.vei-filet {
  display: block; width: 28px; height: 3px; border-radius: 2px;
  background: var(--blue); margin: 16px 0 0;
}
.vei-d { font-size: 15px; line-height: 1.7; color: var(--muted); margin: 18px 0 0; }
/* LES DEUX PASTILLES SE POSENT SUR LA MÊME LIGNE. `margin-top: auto` les colle
   en bas de leur carte, quelle que soit la longueur du texte au-dessus ; les
   24 px du dernier paragraphe sont là pour la carte la plus haute, celle où il
   ne reste plus d'espace à absorber. */
.vei-d:last-of-type { margin-bottom: 24px; }
/* 13,5 px et non 14 : mesurée, la deuxième pastille demandait 339 px de
   large pour une colonne qui en offre 367. À 14 px elle en demandait 388 et
   repassait à la ligne, quand la maquette la donne sur une seule.
   ELLE A RACCOURCI LE 2026-08-19 (un segment sur trois est tombé) : 40
   caractères au lieu de 45, soit 307 px demandés. La taille reste donc à
   13,5 px : c'est la marge qui a grandi, pas le besoin. */
.vei-cle {
  margin: auto 0 0; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--tint); border-radius: 999px; padding: 8px 15px 8px 10px;
  font-family: var(--ui); font-weight: 600; font-size: 13.5px; line-height: 1.4;
  color: var(--on-tint);
}
.vei-ok { flex: none; display: flex; }
.vei-ok svg { width: 18px; height: 18px; display: block; }

/* Le panneau des coûts. Trois colonnes : le rond, ce qui est dit, la courbe.
   La courbe est un ornement et part la première quand la place manque. */
.cout {
  margin-top: 22px; display: grid; align-items: center;
  grid-template-columns: 66px minmax(0, 1fr) 232px; gap: 0 24px;
  background: var(--tint2); border: 1px solid var(--tint-line);
  border-radius: 18px; padding: 24px 28px;
}
/* Rond et blanc, seul de son espèce dans la page : la maquette le veut ainsi,
   et c'est ce qui le détache du fond teinté du panneau. */
.cout-pic {
  width: 66px; height: 66px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--card3); border: 1px solid var(--tint-line); color: var(--on-tint);
}
.cout-pic svg { width: 34px; height: 34px; display: block; }
.cout-t {
  font-family: var(--ui); font-weight: 600; font-size: 18px; line-height: 1.3;
  letter-spacing: -0.015em; color: var(--fg); margin: 0;
}
/* TROIS LIGNES ICI, DEUX DANS LA MAQUETTE, et c'est mesuré : la première
   phrase demande 776 px, la colonne en offre 612 une fois le rond et la
   courbe déduits. La maquette est dessinée sur 1 315 px de contenu quand
   `.wrap` en fait 1 016 ; descendre la phrase à une ligne demanderait une
   courbe de 70 px, soit plus de courbe du tout.
   ET TROIS `.cout-d` DEPUIS LE 2026-08-19, deux dans la maquette : le volet
   humain s'ajoute et rend deux lignes de plus. Le panneau passe de 166 à
   225 px de haut, la courbe en fait 116 et reste centrée dedans : rien à
   reprendre ici, la règle ne compte pas les paragraphes. */
.cout-d { font-size: 15px; line-height: 1.65; color: var(--muted); margin: 10px 0 0; }
.cout-graph { display: block; color: var(--blue); }
.cout-graph svg { display: block; width: 100%; height: auto; }
/* L'euro est le seul texte du dessin. Il porte `color` ET `fill` : il est peint
   par `fill`, mais `npm run contraste` lit `color`, et sans la première ligne il
   mesurait le bleu vif hérité de `.cout-graph` (2,8:1) au lieu du bleu foncé
   réellement posé. 5,4:1 sur la teinte du panneau, et davantage sur le rond
   blanc qui le porte. */
.cout-eur {
  font-family: var(--ui); font-weight: 700; font-size: 17px;
  color: var(--blue-sh); fill: currentColor;
}

/* Le décor de fond : globe à gauche, machine à droite, tous deux hors de la
   colonne de texte.

   IL EST ACCROCHÉ AU CHAPEAU, PAS AUX BORDS DE LA FENÊTRE (correction du
   propriétaire, 2026-08-18 : « les deux images flottent, elles devraient être
   plus près de la section, et elles ne sont pas centrées »). La première
   version posait une bande de 100 vw et calait le globe à -118 px de son bord
   gauche : sur un écran de 1 440 px il n'en restait qu'un croissant coupé, à
   200 px de tout ce que la section raconte, et sur un écran de 1 920 px il
   s'éloignait encore. La bande reste large de 100 vw — c'est
   elle qui COUPE, et sans elle les dessins sortaient de la fenêtre de 81 px à
   1 130 px de large — mais les deux dessins ne se calent plus sur ses bords :
   ils se calent sur ceux du chapeau, par `calc(50% + 412px)`. 412, c'est la
   demi-colonne de texte (390) plus l'écart voulu (22). Ils gardent donc le même
   écart au titre à toutes les largeurs, et à partir de 1 400 px ils tiennent
   entiers dans la fenêtre.

   Ils sont centrés sur la même ligne, celle du chapeau : `top: 50%` sur les
   deux, et la bande est posée pour que son milieu tombe sur le milieu du bloc
   mot-clé + titre + introduction. */
.est-veille { position: relative; isolation: isolate; }
.vei-decor {
  position: absolute; left: 50%; top: 6px; width: 100vw; height: 430px;
  transform: translateX(-50%); z-index: -1; pointer-events: none; overflow: hidden;
}
.vei-globe {
  position: absolute; right: calc(50% + 412px); top: 50%;
  transform: translateY(-50%); width: 286px; height: 286px;
}
.vei-machine {
  position: absolute; left: calc(50% + 412px); top: 50%;
  transform: translateY(-50%); width: 226px; height: 252px;
}
/* Sous 1 120 px il n'y a plus de marge à gauche ni à droite du chapeau : le
   décor passerait derrière les mots au lieu de rester à côté. */
@media (max-width: 1120px) { .vei-decor { display: none; } }

@media (max-width: 1000px) {
  .cout { grid-template-columns: 66px minmax(0, 1fr); }
  .cout-graph { display: none; }
}
@media (max-width: 620px) {
  .vei { grid-template-columns: 54px minmax(0, 1fr); column-gap: 16px; padding: 22px 20px 20px; }
  .vei-pic { width: 54px; height: 54px; border-radius: 17px; }
  .vei-pic svg { width: 28px; height: 28px; }
  .vei-t { font-size: 17px; }
  .cout { padding: 22px 20px; }
}
/* Sous 460 px, la pastille passe au-dessus du titre : même geste que
   `.est-illustre` et `.fuites`, et pour la même raison — à cette largeur, la
   pastille et sa gouttière ne laissent plus assez de colonne au titre. */
@media (max-width: 460px) {
  .vei { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
  .vei-t { margin-top: 0; }
  .cout { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
}
@media (prefers-reduced-motion: reduce) { .vei { transition: none; } }
@media print {
  .vei-decor { display: none; }
  .vei { box-shadow: none; }
}

/* ── « L'équipe » : les deux fiches et le « + » qui les relie ─────────────── */

/* Maquette du propriétaire du 2026-08-18 (« ChatGPT Image Aug 18, 2026,
   11_00_22 PM.png »), pour la section « L'équipe » de /a-propos/. Comme pour
   `.veille` juste au-dessus, `.duo` et `.encart` ne bougent pas : la fiche a
   ses propres classes, parce que ce dessin-ci est le seul du site dont la
   colonne de gauche EMPILE deux objets, une pastille puis un portrait, le
   texte restant à droite des deux.

   MESURES RELEVÉES SUR L'IMAGE, ramenées à la colonne réellement servie
   (1 016 px, soit 1 080 moins les deux gouttières) : portrait 188, pastille 49,
   gouttière 19, écart entre les fiches 71, « + » de 46, coin de carte 20, et
   une colonne de texte de 216 px.

   LE PORTRAIT EST PLUS PETIT ICI (160 px), ET C'EST LE SEUL ÉCART DE MESURE.
   La maquette compose son texte à l'équivalent de 12 px : à cette taille, 216
   px de colonne suffisent. Le site écrit à 15 px, comme partout ailleurs, et il
   faut donc 250 px pour que la ligne ne se casse pas en morceaux. Ces 34 px
   sont pris au portrait, pas au texte : c'est le texte qu'on lit.
   Le reste suit : pastille 52, gouttière 22, écart 52, « + » de 46.

   LES COULEURS SONT CELLES DU SITE, PAS CELLES DE L'IMAGE. Le rôle et la ligne
   de preuve sont du TEXTE : ils prennent `--blue-sh` (5,1:1 sur `--tint`) et
   `--ok` (5,3:1 sur blanc, 4,7:1 sur `--ok-bg`), les deux seules teintes du
   site qui passent 4,5:1. Le filet et les pointillés sont décoratifs et gardent
   les teintes vives, comme `.vei-filet` et la trame de `.est-illustre`. */

.fiches {
  position: relative;
  margin-top: 34px; display: grid; gap: 52px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Deux colonnes et deux rangées : la pastille occupe la première rangée de la
   colonne de gauche, le portrait la seconde, et le texte tient la seconde
   rangée de droite. C'est ce vide en haut à droite qui fait tomber le nom au
   niveau du portrait, comme sur la maquette.

   `1fr` sur la deuxième rangée est ce qui aligne les deux lignes de preuve :
   les fiches sont déjà de même hauteur (la grille les étire), la rangée prend
   ce qui reste, et `margin-top: auto` colle la ligne en bas. Même mécanique que
   `.vei-cle`.

   `overflow: hidden` coupe les pointillés au bord de la carte. La maquette les
   laisse courir sur le fond de page ; ici ils croiseraient la fiche voisine. */
.fiche {
  position: relative; overflow: hidden;
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: 22px;
  background: var(--card3); border: 1px solid var(--border);
  border-radius: 20px; padding: 24px 24px 26px; box-shadow: var(--lift);
  transition: box-shadow .2s ease, transform .2s ease;
}
.fiche:hover {
  box-shadow: 0 2px 4px rgba(15,20,25,0.05), 0 18px 38px rgba(15,20,25,0.09);
  transform: translateY(-2px);
}
/* Teinte pleine et sans contour, au gabarit de `.vei-pic` : même page, même
   pastille. Le trait est à `--on-tint` et non au bleu vif, pour la raison déjà
   écrite là-bas — `--blue` tombe à 2,1:1 sur cette teinte. */
.fi-pic {
  grid-area: 1 / 1; align-self: start;
  width: 52px; height: 52px; border-radius: 16px; margin-bottom: 18px;
  display: flex; align-items: center; justify-content: center;
  background: var(--tint); color: var(--on-tint);
}
.fi-pic svg { width: 26px; height: 26px; display: block; }

/* Le cadre existe pour une seule raison : donner aux pointillés un repère qui
   soit le portrait lui-même. Tout ce qui les place est en pourcentage de cette
   boîte, donc les trois tailles de portrait ci-dessous n'ont rien à recalculer. */
.fi-cadre {
  grid-area: 2 / 1; align-self: start;
  position: relative; display: block; width: 160px; height: 160px;
}
/* L'image est recadrée sur le disque teinté qu'elle contient déjà : l'arrondi
   tombe donc exactement sur ce disque, et la teinte du fond est celle du
   fichier, bleue pour Armen, verte pour Louis. */
.fi-photo { width: 100%; height: 100%; border-radius: 50%; display: block; }
.fi-trace {
  position: absolute; left: -11.29%; top: -11.29%;
  width: 129.03%; height: 141.94%;
  color: var(--tint-border);
  stroke: currentColor; stroke-width: 1.5; stroke-linecap: round;
  stroke-dasharray: 2 7;
  pointer-events: none;
}

.fi-txt { grid-area: 2 / 2; display: flex; flex-direction: column; min-width: 0; }
.fi-t {
  font-family: var(--ui); font-weight: 600; font-size: 22px; line-height: 1.2;
  letter-spacing: -0.02em; color: var(--fg); margin: 2px 0 0;
}
/* Le rôle en capitales espacées : c'est le dessin de `.eyebrow`, à qui il
   ressemble par le métier — nommer une catégorie au-dessus d'un titre, ou en
   dessous d'un nom. */
.fi-role {
  font-family: var(--ui); font-weight: 600; font-size: 12.5px; line-height: 1.4;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--blue-sh);
  margin: 11px 0 0;
}
.fi-filet {
  display: block; width: 34px; height: 3px; border-radius: 2px;
  background: var(--blue); margin: 17px 0 0;
}
.fi-d { font-size: 15px; line-height: 1.7; color: var(--muted); margin: 20px 0 26px; }
/* Trois colonnes : la marque, la phrase, et le pictogramme de lien sortant qui
   n'existe que sur la fiche d'Armen. Sur celle de Louis la troisième colonne
   n'a pas d'enfant et se réduit à zéro — rien à décrire de plus. */
.fi-cle {
  margin-top: auto;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; column-gap: 12px;
  background: var(--tint); border-radius: 14px; padding: 12px 14px;
  font-size: 14px; line-height: 1.55; color: var(--fg);
}
.fi-ok { display: block; color: var(--blue-cta); }
.fi-ok svg { width: 24px; height: 24px; display: block; }
.fi-sortant { display: block; color: var(--blue-sh); }
.fi-sortant svg { width: 18px; height: 18px; display: block; }

/* La fiche du développeur. Seule la teinte change : le dessin, lui, est le même
   des deux côtés, sinon le « + » du milieu ne relierait rien.
   #2f9e4f pour le filet, et non `--ok` : le filet est décoratif et fait la
   paire avec `--blue` en face, que `--ok` (vert forêt) ne tiendrait pas. Il
   passe 3,4:1 sur blanc, au-dessus des 3:1 demandés à un élément non textuel. */
.fiche.est-dev .fi-pic { background: var(--ok-bg); color: var(--ok); }
.fiche.est-dev .fi-trace { color: var(--ok-line); }
.fiche.est-dev .fi-role { color: var(--ok); }
.fiche.est-dev .fi-filet { background: #2f9e4f; }
.fiche.est-dev .fi-cle { background: var(--ok-bg); }
.fiche.est-dev .fi-ok { color: var(--ok); }

/* Le « + » est posé au centre de la grille, pas dans une carte : il appartient
   à l'écart entre les deux, et c'est cet écart de 52 px qui existe pour lui.

   `.fi-plus` n'est que la boîte ; le rond blanc est son enfant. Le pointillé en
   diagonale de la maquette est donc peint AVANT lui, en `::before`, et le rond
   le recouvre en son milieu — aucun `z-index` négatif, aucune pile à tenir.
   Le trait mesure 110 px pour 29° : ses deux bouts tombent à ±26,6 px du
   centre, soit exactement les 52 px de l'écart. Il ne touche jamais une carte. */
.fi-plus {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 46px; height: 46px;
}
.fi-plus::before {
  content: ''; position: absolute; left: calc(50% - 0.75px); top: -32px;
  width: 0; height: 110px; border-left: 1.5px dashed var(--tint-border);
  transform: rotate(29deg);
}
.fi-plus-rond {
  position: relative; width: 100%; height: 100%; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--card3); color: var(--blue-cta);
  box-shadow: 0 1px 2px rgba(15,20,25,0.05), 0 10px 24px rgba(15,20,25,0.09);
}
.fi-plus svg { width: 17px; height: 17px; display: block; }

/* Sous 1 080 px la colonne se resserre avant les fiches : le portrait et ses
   marges mangeraient la colonne de texte, où le nom de la fiche doit tenir sur
   une ligne. Il rapetisse donc d'abord, et les fiches ne s'empilent qu'ensuite.
   Le palier a été calé sur le nom complet du chef de projet ; depuis le
   2026-08-19 les fiches n'écrivent plus que le prénom et l'initiale, donc la
   contrainte s'est desserrée et la règle tient telle quelle, avec de la
   marge en plus. */
@media (max-width: 1080px) {
  .fiches { gap: 40px; }
  .fiche { grid-template-columns: 158px minmax(0, 1fr); column-gap: 22px; padding: 24px 22px 26px; }
  .fi-cadre { width: 158px; height: 158px; }
  .fi-t { font-size: 20px; }
}
/* Empilées, les fiches retrouvent toute la largeur : le portrait reprend sa
   taille. Le « + » quitte l'absolu et redevient l'élément du milieu, calé dans
   la couture par ses marges négatives. */
@media (max-width: 940px) {
  .fiches { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .fiche { grid-template-columns: 176px minmax(0, 1fr); column-gap: 24px; padding: 26px 26px 28px; }
  .fi-cadre { width: 176px; height: 176px; }
  .fi-t { font-size: 22px; }
  /* Empilé, le « + » n'a plus d'écart à traverser : le pointillé en diagonale
     n'aurait plus rien à relier et se poserait en travers de la page. */
  .fi-plus { position: static; transform: none; justify-self: center; margin: -14px 0; }
  .fi-plus::before { display: none; }
}
@media (max-width: 620px) {
  .fiche { grid-template-columns: 148px minmax(0, 1fr); column-gap: 20px; padding: 22px 20px 24px; }
  .fi-cadre { width: 148px; height: 148px; }
  .fi-pic { width: 48px; height: 48px; border-radius: 15px; margin-bottom: 14px; }
  .fi-pic svg { width: 24px; height: 24px; }
  .fi-t { font-size: 20px; }
  .fi-cle { column-gap: 11px; padding: 12px 13px; font-size: 14px; }
}
/* Sous 520 px, la colonne de texte ne vaut plus rien à côté du portrait : le
   texte passe donc sous les deux, qui se rangent côte à côte en haut. Même
   geste que `.vei` et `.est-illustre`, à la largeur où il devient nécessaire. */
@media (max-width: 520px) {
  .fiche { grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; }
  .fi-pic { margin-bottom: 0; }
  .fi-cadre { grid-area: 1 / 2; justify-self: start; width: 124px; height: 124px; }
  .fi-txt { grid-area: 2 / 1 / 3 / 3; margin-top: 20px; }
  .fi-trace { display: none; }
}
@media (prefers-reduced-motion: reduce) { .fiche { transition: none; } }
@media print {
  .fi-trace, .fi-plus { display: none; }
  .fiche { box-shadow: none; }
}