/* =====================================================================
 * zeMoritz — LES SIX FICHES PROJETS
 *
 * Une seule feuille pour les six pages : Castel, VMC Pêche, Innovative
 * Water Care Europe, VINCI Autoroutes, VINCI Immobilier Elixyr et Honda
 * Jardin France. Elles ont exactement la même composition, et rien ne
 * justifierait d'en écrire six.
 *
 * Écrite le 29 août 2026. Préfixe « .fiche- », vérifié absent de
 * styles.css, realisations.css, contact.css et pages-legales.css avant
 * d'être employé.
 *
 * ⚠ RÈGLE DE LIVRAISON PROPRE À CETTE FEUILLE. Elle est chargée par SIX
 * pages. Les six doivent porter la MÊME chaîne « ?v= » dans la MÊME
 * livraison — sinon l'une d'elles sert une version périmée depuis le cache,
 * et le défaut apparaît sur une page que personne n'a touchée. C'est le
 * piège de pages-legales.css, qui en habille deux, en trois fois plus gros.
 *
 * UNE MAQUETTE EXISTE, et c'est la première depuis la page Présentation :
 *   04_MAQUETTES/01_En_préparation/03_Fiches_projets_V1/
 *   07_JPGs de maquette PAGES FICHE PROJET/
 *   001-zeMoritz – fiche CASTEL – ordinateur - v2_de_la_V1.jpg  (1440 x 2230)
 * Toutes les cotes ci-dessous sont RELEVÉES DEDANS, jamais estimées. Là où
 * la maquette reprend une cote du site, c'est écrit ; là où elle en invente
 * une, c'est écrit aussi.
 *
 * ⚠ AUCUNE COULEUR N'EST RELEVÉE SUR LA MAQUETTE. C'est un JPG, et la
 * compression déplace les valeurs. Les jetons de « :root » font foi, et eux
 * seuls. Quand une couleur de la maquette ne correspond à aucun jeton, elle
 * est DÉRIVÉE d'un jeton par un calcul écrit — voir le § 3.
 *
 * Cette feuille n'habille aucun sélecteur du tronc.
 *
 * ÉTAT AU 29 AOÛT : TEMPS 1 SEULEMENT — l'ouverture. Les deux colonnes, les
 * Points clés et le bas de page viennent aux temps 2, 3 et 4.
 * ===================================================================== */


/* ---------------------------------------------------------------------
 * 0. [TRONC] Bandeau de page
 *
 * COPIÉ de pages-legales.css, qui l'avait copié de contact.css, qui l'avait
 * copié de realisations.css où il est marqué [TRONC] — et non déplacé :
 * deux conversations n'écrivent pas dans le tronc en même temps. À la
 * fusion, une seule copie survivra et servira aux DIX pages sans écran
 * d'ouverture.
 *
 * LA MAQUETTE NE DEMANDE RIEN DE NEUF ICI, ET C'EST LE POINT LE PLUS
 * IMPORTANT DU RELEVÉ. La bande orange qu'elle montre en haut de page
 * existe déjà, à l'identique, sur Réalisations, Contact et les deux pages
 * légales : 110 px de blanc, puis 56 px d'orange plein sur toute la
 * largeur, logo de 273 x 61 centré. Mesuré des deux côtés, écart nul.
 *
 * ⚠ « data-site-header » est posé sur ce bandeau pour régler le seuil du
 * header au survol. Conséquence connue depuis le 27 août : script.js y
 * écrit « --p: 1 » en style en ligne et lui ajoute « est-compact ». Un seul
 * sélecteur du tronc en dépend — la réduction du logo — et il est neutralisé
 * juste en dessous. Sans le « transform: none », le facteur 0,62 du tronc
 * s'appliquerait une seconde fois sur une largeur déjà réduite et le logo
 * tomberait de 273 à 169 px, sans erreur et sans que rien d'autre ne bouge.
 * ------------------------------------------------------------------- */

.fiche-bandeau__blanc {
  height: 110px;
  display: grid;
  place-items: center;
  background: var(--color-white);
}

.fiche-bandeau__blanc .brand-link {
  display: block;
  width: 273px;        /* la cote du site, écrite et non obtenue par réduction */
  margin-inline: auto;
  transform: none;     /* neutralise la réduction du tronc — voir ci-dessus */
}

.fiche-bandeau__blanc .brand-logo {
  width: 273px;
  height: auto;
  display: block;
}

/*
 * « .compact-nav » du tronc est en position absolue, invisible, et son
 * opacité dépend de « --p ». Ici la barre est un objet ordinaire : on
 * neutralise ces trois états. On ne touche pas au tronc, on le recouvre.
 */
.fiche-bandeau__nav {
  position: static;
  height: 56px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}


/* ---------------------------------------------------------------------
 * 1. Gabarit de la page
 *
 * Coquille de 994 px, comme Réalisations, Contact et les deux pages
 * légales. RELEVÉE DANS LA MAQUETTE : le contenu y va de x 223 à x 1216,
 * soit 994 px exactement, et 223 est le bord gauche des quatre autres
 * pages à 1440. La maquette n'invente rien ici non plus.
 *
 * Réserve haute 56 px : la cote de Réalisations et de Contact. Elle place
 * la première encre à la même hauteur que sur les quatre autres pages —
 * vérifié, y 226 sur Réalisations et sur les mentions légales, y 227 dans
 * la maquette de la fiche.
 * ------------------------------------------------------------------- */

.fiche-shell {
  width: min(calc(100% - 2 * var(--gutter)), 994px);
  margin-inline: auto;
}

.fiche {
  position: relative;
  display: block;       /* <article> : reprise explicite, il n'est pas bloc partout */
  padding-top: 56px;
  /*
   * ⚠ RÉSERVE BASSE NULLE, ET C'EST UN INVARIANT DU SITE.
   *
   * Le pictogramme, le filet et les trois colonnes forment un seul bloc — le
   * pied de page —, et l'écart entre le pictogramme et le filet vaut 32 px,
   * les 32 px du pied de page lui-même et rien d'autre. C'est la cote de la
   * page Présentation, la seule des cinq à suivre une maquette validée, et
   * c'est celle de la maquette de fiche : 31 px relevés entre le bas d'encre
   * du pictogramme (y 2059) et le filet (y 2090).
   *
   * ⚠ NE PAS Y AJOUTER DE RÉSERVE. Le 29 août au soir, une consigne de
   * Florian sur l'espace au-dessus du pictogramme a été appliquée ICI par
   * erreur : le pied de page s'était éloigné de 57 px et les fiches ne
   * disaient plus la même chose que l'accueil. Ce qui s'ajuste, quand le bloc
   * paraît trop près du texte, c'est la réserve HAUTE du pictogramme — voir
   * « .fiche-mark », § 9.
   */
  padding-bottom: 0;
}


/* ---------------------------------------------------------------------
 * 2. L'ouverture : surtitre, titre, ligne d'agence
 *
 * LA MAQUETTE REPREND EXACTEMENT LES DEUX VOIX DE L'OUVERTURE DU SITE, et
 * les met dans le même ordre et au même endroit :
 *
 *   - « Fiche projet » occupe la voix du TITRE DE PAGE — Source Sans 3
 *     semibold 27 / 34, anthracite —, et sa boîte est à y 222, comme le
 *     « h1 » de Réalisations, de Contact et des deux pages légales ;
 *   - le nom du projet occupe la voix du CHAPÔ — Barlow Semi Condensed gras
 *     42 / 46, orange moyen —, et sa boîte est à y 261, comme le chapô des
 *     quatre autres pages.
 *
 * Les deux ont été vérifiées par le calcul et par la mesure : à 42 / 46, la
 * hauteur de capitale de Barlow tombe à 10,4 px sous le haut de la boîte,
 * donc à y 271,4 — et le « C » de « Castel » est relevé à y 271 dans la
 * maquette. Ce n'est pas une ressemblance, c'est le même réglage.
 *
 * LA SEULE VOIX NEUVE DE L'OUVERTURE EST LA LIGNE D'AGENCE (§ 2.3).
 * ------------------------------------------------------------------- */

/*
 * 2.1 — L'en-tête sur une ligne : le surtitre à gauche, le parcours à
 * droite. « flex-start » et non « center » : le parcours est calé sur le
 * haut de la ligne, pas sur son milieu — c'est ce que montre la maquette,
 * où le bloc va de y 224 à y 246 dans une ligne qui va de 222 à 256.
 */
.fiche-entete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.fiche-surtitre {
  margin: 0;
  color: var(--color-anthracite);
  font-size: 27px;
  font-weight: var(--weight-semibold);
  line-height: 34px;
}

/*
 * 2.2 — Le titre du projet.
 *
 * C'est le « h1 » de la page, et son dessin est celui du chapô des quatre
 * autres pages : « .rea-chapo », « .contact-chapo », « .legal-chapo », au
 * réglage près identique. La largeur de 868 px est celle du chapô du site ;
 * aucun des six titres ne l'atteint, mais la règle se redit, elle ne
 * s'hérite pas.
 *
 * Marge de 5 px : la boîte du surtitre finit à y 256, celle du titre
 * commence à y 261. Même écart que sur les quatre autres pages.
 */
.fiche-titre {
  max-width: 868px;
  margin: 5px 0 0;
  color: var(--color-orange-mid);
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: var(--weight-bold);
  line-height: 46px;
}

/*
 * 2.3 — La ligne d'agence. LA SEULE VOIX NEUVE DE L'OUVERTURE.
 *
 * Elle existe déjà dans les 27 fenêtres de projet, en italique gris bleuté
 * de 14 px, où elle est une légende sous une vignette. Ici elle qualifie
 * toute une page : la maquette la porte à 21 px, et c'est le seul endroit
 * du site où ce corps apparaît.
 *
 * COTE RELEVÉE, NON ESTIMÉE, ET PAR TROIS CHEMINS QUI CONVERGENT :
 *   - largeur d'encre de la ligne entière — 544 px dans la maquette, 539 à
 *     21 px dans la fonte réelle ;
 *   - hauteur de capitale du « P » de « Projet » — 14 px relevés, 13,9 à
 *     21 px (Source Sans 3 : capitale = 0,66 em) ;
 *   - étendue d'encre de la ligne — 336 à 356 dans la maquette, 336,2 à
 *     356,6 avec une boîte posée à y 331 et un interligne de 28.
 *
 * Interligne 28 : la ligne est unique, l'interligne ne sert donc qu'à poser
 * la boîte. 28 est le seul entier qui place la capitale à y 338, la cote
 * relevée. Marge de 24 px : la boîte du titre finit à y 307.
 *
 * L'italique est celle du site, réellement chargée — jamais une inclinaison
 * simulée par le navigateur.
 */
.fiche-agence {
  max-width: 868px;
  margin: 24px 0 0;
  color: var(--color-blue-gray);
  font-size: 21px;
  font-style: italic;
  line-height: 28px;
}


/* ---------------------------------------------------------------------
 * 3. Le parcours des fiches — fiche précédente, retour, fiche suivante
 *
 * OBJET NEUF, entièrement décrit par la maquette. Trois commandes calées
 * sur le bord DROIT de la coquille, sur la ligne du surtitre.
 *
 * COTES RELEVÉES : boutons de 23 px de haut, 22 px de large pour les deux
 * flèches, 68 px pour « Retour », 5 px entre chacun, bord droit à x 1216 —
 * le bord droit de la coquille, au pixel. Angles arrondis de 3 px. Chevron
 * de 7 x 12 px, celui des fenêtres de projet, au même tracé.
 *
 * LES DEUX COULEURS.
 *
 * L'orange des deux commandes actives est relevé à (176, 74, 0) dans la
 * maquette, soit EXACTEMENT « --color-orange-dark », #b04a00. Pas de
 * dérivation, pas d'approximation : c'est le jeton.
 *
 * Le gris de la commande éteinte est relevé à (223, 227, 228) — une valeur
 * froide, bleutée, qui ne correspond à aucun jeton du site. Elle n'est pas
 * inventée pour autant : « --color-blue-gray » (#66717a) posé à 20 % sur du
 * blanc donne (224,4 ; 226,6 ; 228,4), c'est-à-dire la valeur relevée à un
 * point d'échantillonnage près, teinte comprise. C'est donc ce calcul qui
 * est écrit, et non la valeur brute — le jour où le gris bleuté du site
 * change, ce gris-ci change avec lui.
 *
 * La ligne « background » en dur juste au-dessus est un REPLI pour les
 * navigateurs qui ne connaissent pas « color-mix ». Sans elle, un vieux
 * navigateur laisserait le fond transparent et le chevron blanc
 * disparaîtrait sur du blanc.
 *
 * ZONE TACTILE. Les boutons font 23 px de haut, la cible visée par le
 * projet est de 44. C'est le cas déjà rencontré sur les boutons de 02-6,
 * qui font 37 px : la zone est étendue par un pseudo-élément en « inset »
 * négatif, SANS TOUCHER AU DESSIN. Le procédé existe, il n'est pas inventé
 * ici.
 * ------------------------------------------------------------------- */

.fiche-parcours {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: none;
  margin-top: 2px;      /* boîte de ligne à y 222, bloc relevé à y 224 */
}

.fiche-parcours__fleche,
.fiche-parcours__retour {
  position: relative;
  height: 23px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  color: var(--color-white);
  background: var(--color-orange-dark);
  text-decoration: none;
}

.fiche-parcours__fleche {
  width: 22px;
}

/*
 * Le chevron du fichier source pointe à gauche. La flèche « suivante » est
 * le même tracé retourné : un seul dessin dans la page, comme dans les
 * fenêtres de projet.
 */
.fiche-parcours__fleche--suivante svg {
  transform: rotate(180deg);
}

.fiche-parcours__fleche--eteinte {
  background: #dfe3e4;   /* repli — voir le commentaire du § 3 */
  background: color-mix(in srgb, var(--color-blue-gray) 20%, var(--color-white));
  cursor: default;
}

.fiche-parcours__retour {
  width: 68px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: var(--weight-semibold);
  line-height: 23px;
  letter-spacing: 1.5px;
  text-indent: 1.5px;    /* rattrape l'espace que l'interlettrage laisse à droite */
  text-transform: uppercase;
}

/*
 * La zone tactile, portée à 44 px de haut sans changer le dessin. Elle
 * déborde de 10,5 px en haut et en bas ; les trois commandes étant sur une
 * seule ligne, aucune ne recouvre le texte d'une autre.
 */
.fiche-parcours__fleche::after,
.fiche-parcours__retour::after {
  content: "";
  position: absolute;
  inset: -10.5px 0;
}

.fiche-parcours__fleche--eteinte::after {
  content: none;         /* rien à toucher : ce n'est pas une commande */
}

/*
 * Survol : l'ombre douce des boutons orange du site (§ 13 du parti animé),
 * reprise telle quelle et non réinventée. Le contour de focus n'est jamais
 * remplacé par une ombre (§ 14), d'où l'exclusion.
 */
@media (hover: hover) and (pointer: fine) {
  .fiche-parcours__fleche--suivante:hover:not(:focus-visible),
  .fiche-parcours__retour:hover:not(:focus-visible) {
    box-shadow: 0 5px 12px rgb(21 21 21 / 18%);
  }
}

.fiche-parcours__fleche--suivante:active:not(:focus-visible),
.fiche-parcours__retour:active:not(:focus-visible) {
  box-shadow: inset 0 2px 5px rgb(21 21 21 / 25%);
}


/* ---------------------------------------------------------------------
 * 4. LES DEUX COLONNES
 *
 * OBJET NEUF, entièrement décrit par la maquette. Rien de tel n'existe
 * ailleurs sur le site : les quatre autres pages sans écran d'ouverture ont
 * une seule colonne de lecture.
 *
 * COTES RELEVÉES à 1440 : image de 482 x 482 à x 223, gouttière de 39,
 * colonne de texte de 473 se terminant à x 1216. 482 + 39 + 473 = 994, la
 * coquille du site au pixel.
 *
 * Les deux colonnes sont écrites en PROPORTION, pas en pixels : à 994 elles
 * valent exactement 482 et 473, et en dessous elles se réduisent ensemble
 * sans qu'aucune cote de bascule nouvelle soit inventée. La seule cote de
 * bascule du site reste 900.
 *
 * « align-items: start » : les deux colonnes commencent en haut. C'est ce
 * que montre la maquette — le haut de l'image et le titre « Présentation »
 * sont sur la même ligne.
 * ------------------------------------------------------------------- */

.fiche-corps {
  margin-top: 59px;          /* boîte de la ligne d'agence finie à y 359, image à y 418 */
  display: grid;
  grid-template-columns: minmax(0, 482fr) minmax(0, 473fr);
  column-gap: 39px;
  align-items: start;
}

/*
 * 4.1 — La vue courante.
 *
 * Carrée, comme les 107 vues des fenêtres de projet : les images sources
 * sont fournies en 1200 x 1200 et servies en 1100. « aspect-ratio » réserve
 * la place avant que l'image arrive, ce qui évite que la page saute au
 * chargement.
 */
.fiche-visuel {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  display: block;
}

/*
 * ⚠ « display: block » BAT « hidden ». Sur Elixyr, la sixième vue est une
 * vidéo : l'image et la vidéo cohabitent au même endroit et le script masque
 * l'une pour montrer l'autre. Sans cette règle, la déclaration ci-dessus
 * l'emporterait sur le « display: none » que le navigateur associe à
 * « hidden », et les deux s'afficheraient l'une sous l'autre.
 */
.fiche-visuel[hidden] {
  display: none;
}

/*
 * LA VUE ANIMÉE. Même boîte que l'image, même carré. Le fond gris clair se
 * voit le temps que la première image arrive, et sous « mouvement réduit » où
 * la vidéo ne démarre jamais : c'est alors son image d'attente qui reste.
 *
 * Les fichiers sont CEUX DE LA PAGE RÉALISATIONS, déjà en ligne : la fenêtre
 * de projet Elixyr montre la même borne animée. La fiche les réutilise.
 */
video.fiche-visuel {
  background: var(--color-light-gray);
  object-fit: cover;
}

/* ---------------------------------------------------------------------
 * 5. LE CARROUSEL DES VIGNETTES
 *
 * COTES RELEVÉES : bande de vignettes à y 915, vignettes de 97 x 98, pas de
 * 103 — donc 6 px entre elles —, quatre visibles, chevrons de 25 x 44
 * centrés sur la bande. 4 x 97 + 3 x 6 = 406.
 *
 * ⚠ UN ÉCART DE 5 px AVEC LA MAQUETTE, ASSUMÉ ET CONSIGNÉ. La maquette pose
 * la bande à x 266 ; ici elle est centrée entre les deux chevrons, donc à
 * x 261. Les cinq pixels ne se justifient par aucune règle : 25 + 13 + 406
 * + 13 + 25 = 482 est la seule répartition qui se redise sur les six fiches
 * et à toutes les largeurs. À arbitrer par Florian.
 *
 * LE MÉCANISME EST CELUI DU SITE, pas un mécanisme neuf : une piste qui
 * défile, calée par « scroll-snap », que le doigt déplace directement et que
 * les chevrons déplacent par « scrollTo ». C'est exactement ce que font les
 * fenêtres de projet et le carrousel mobile de la page Présentation.
 *
 * IL NE BOUCLE PAS. Au bout, le chevron s'éteint. Sur des séries qui vont
 * jusqu'à neuf vues, fermer vaut mieux que boucler.
 * ------------------------------------------------------------------- */

.fiche-carrousel {
  margin-top: 15px;          /* bord bas de l'image à y 900, bande de vignettes à y 915 */
  display: flex;
  align-items: center;
  gap: 13px;
}

.fiche-carrousel__piste {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  overscroll-behavior-x: contain;   /* le glissement ne déborde pas sur la page */
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

/* La barre de défilement de la piste n'a rien à dire : les chevrons le disent. */
.fiche-carrousel__piste::-webkit-scrollbar {
  display: none;
}

/*
 * Quatre vignettes visibles, quelle que soit la largeur : la vignette prend
 * le quart de la piste, moins les trois gouttières. À 406 px de piste, elle
 * mesure exactement 97.
 */
.fiche-carrousel__vue {
  flex: 0 0 calc((100% - 3 * 6px) / 4);
  scroll-snap-align: start;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative;
  line-height: 0;
}

.fiche-carrousel__vue img {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  display: block;
}

/*
 * LA VIGNETTE COURANTE EST GRISÉE, et c'est le seul repère : c'est elle
 * qu'on voit en grand, il n'y a rien à aller chercher en la cliquant.
 *
 * COTES RELEVÉES DANS LA MAQUETTE, et non choisies : la vignette grisée y a
 * une saturation strictement nulle — mesurée, écart maximum-minimum de 0,0
 * sur les trois canaux — et une opacité de 0,285 sur blanc. Le modèle
 * « niveaux de gris puis 28 % » reproduit la vignette de la maquette avec
 * une erreur moyenne de 2 points sur 255, ce qui est le bruit du JPG.
 */
.fiche-carrousel__vue.est-courante img {
  filter: grayscale(1);
  opacity: 0.28;
}

/* Sans JavaScript, les vignettes ne commandent rien : elles restent des images. */
html:not(.js) .fiche-carrousel__vue {
  cursor: default;
}

/*
 * Les chevrons. Le tracé est celui des fenêtres de projet, et il n'entre pas
 * dans le site une seconde fois : c'est le même chemin SVG, en ligne.
 * L'orange est « --color-orange-dark », relevé (176, 74, 0) dans la
 * maquette : le jeton exact, comme sur le bloc RETOUR.
 */
.fiche-carrousel__fleche {
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  line-height: 0;
  cursor: pointer;
  position: relative;
  color: var(--color-orange-dark);
}

.fiche-carrousel__fleche--suiv svg {
  transform: rotate(180deg);
}

/*
 * Le chevron éteint. Relevé (236, 236, 236) dans la maquette : aucun jeton
 * ne vaut cette valeur, mais « --color-anthracite » à 10 % sur blanc donne
 * (236,2 ; 236,0 ; 235,8). C'est donc le calcul qui est écrit, et non la
 * valeur brute — même méthode que le bouton éteint du bloc RETOUR. La ligne
 * en dur au-dessus est le repli des navigateurs sans « color-mix ».
 */
.fiche-carrousel__fleche[disabled] {
  color: #ececec;
  color: color-mix(in srgb, var(--color-anthracite) 10%, var(--color-white));
  cursor: default;
}

/*
 * Zone tactile des chevrons portée à 44 px de large, sans toucher au dessin
 * — le procédé du bloc RETOUR et des boutons de 02-6. Le débord de 9,5 px de
 * chaque côté ne recouvre aucune vignette : il reste dans la gouttière de
 * 13 px.
 */
.fiche-carrousel__fleche::after {
  content: "";
  position: absolute;
  inset: 0 -9.5px;
}

.fiche-carrousel__fleche[disabled]::after {
  content: none;             /* rien à toucher : ce n'est pas une commande */
}


/* ---------------------------------------------------------------------
 * 6. LA COLONNE DE TEXTE
 *
 * ⚠ LA SEULE VOIX VRAIMENT NEUVE DE LA PAGE : les titres de partie.
 *
 * Le site a un seul autre « h2 » — « Écrivez-moi » sur Contact, repris par
 * les dix titres de partie des pages légales : Barlow Semi Condensed GRAS,
 * 27 / 34, anthracite. La maquette des fiches en demande un autre :
 * SEMIBOLD, 32, NOIR PROFOND. C'est mesuré, pas supposé, et par deux
 * chemins : la largeur d'encre des quatre titres — « Présentation » 162,
 * « Intervention » 152, « Points clés » 137, « Résultat / apport » 214 —
 * tombe à moins de 1,6 px du calcul en semibold 32 dans la fonte réelle, et
 * la hauteur de capitale relevée, 23 px, vaut 32 x 0,70.
 *
 * L'ENCRE EST NOIR PROFOND, ET C'EST VÉRIFIÉ MALGRÉ LA RÈGLE DU JPG. On ne
 * relève pas une couleur sur une maquette compressée — sauf à disposer d'un
 * TÉMOIN dans la même image. Ici il y en a un : le surtitre « Fiche projet »,
 * dont on sait qu'il est en anthracite. Mesuré au même endroit et de la même
 * façon, il sort à (62, 63, 65) quand les titres de partie et le corps
 * sortent à (20, 20, 20). Les deux jetons du site sont #3f4143 et #151515 :
 * la comparaison est sans ambiguïté, et c'est la COMPARAISON qui vaut, pas
 * la valeur absolue.
 *
 * Le corps est celui du site, 18 / 26, avec l'écart de 15 px entre
 * paragraphes — la cote de Contact et des deux pages légales.
 * ------------------------------------------------------------------- */

/*
 * ⚠ LA COLONNE DE TEXTE REMONTE DE 11 px, ET CE N'EST PAS UN BRICOLAGE.
 *
 * La maquette aligne l'ENCRE du premier titre sur le haut de l'image, pas sa
 * BOÎTE. Or une ligne de Barlow en 32 / 40 commence son encre 9 px sous le
 * haut de sa boîte : posée au même y que l'image, elle paraîtrait descendue
 * de 9 px. Les 11 px sont la cote qui replace l'encre du titre à y 416,
 * relevée dans la maquette, quand l'image commence à y 418.
 *
 * C'est une correction OPTIQUE, du même ordre que celles du reste du site :
 * on aligne ce que l'œil voit, pas ce que la boîte mesure.
 */
.fiche-textes,
.fiche-suite,
.fiche-resultat {
  color: var(--color-deep-black);
  font-size: 18px;
  line-height: 26px;
}

.fiche-textes {
  margin-top: -11px;
}

/*
 * La voix des titres de partie, commune aux QUATRE de la page : les deux de
 * la colonne de droite, « Points clés » et « Résultat / apport ». Une seule
 * règle : le jour où le corps change, il change aux quatre endroits.
 */
.fiche h2 {
  margin: 0;
  color: var(--color-deep-black);
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: var(--weight-semibold);
  line-height: 40px;
}

.fiche-textes h2 + p,
.fiche-suite h2 + p {
  margin-top: 16px;          /* première ligne de corps à y 467, relevé maquette */
}

.fiche-textes p,
.fiche-suite p {
  margin: 0;
  max-width: none;
}

.fiche-textes p + p,
.fiche-suite p + p {
  margin-top: 15px;          /* la cote du site */
}

.fiche-textes p + h2 {
  margin-top: 52px;          /* « Intervention » à y 825, relevé maquette */
}


/* ---------------------------------------------------------------------
 * 6 ter. LA SUITE, EN PLEINE LARGEUR — trois fiches sur six
 *
 * SUR TROIS FICHES, « Intervention » SORT DE LA COLONNE DE DROITE et revient
 * à la colonne de lecture de 617 px, sous le bloc des visuels. Sur les trois
 * autres — Castel, Honda Jardin, Innovative Water Care — il reste où la
 * maquette le met, dans la colonne étroite.
 *
 * ⚠ CE N'EST PAS UNE FANTAISIE, C'EST UNE MESURE. La maquette Castel est
 * équilibrée par coïncidence : sa colonne de texte fait 595 px, sa colonne
 * d'image 594. Un pixel. Les cinq autres fiches ont des textes plus longs, et
 * le blanc laissé sous le carrousel se creuse à mesure :
 *
 *     Castel 0 · Honda 146 · Innovative Water Care 224
 *     VMC 317 · Elixyr 384 · VINCI Autoroutes 607
 *
 * Florian a fixé le seuil à l'œil, sur trois captures, le 29 août : les trois
 * trous de plus de 300 px basculent, les autres non. Sur VINCI, le blanc passe
 * ainsi de 607 px à 27.
 *
 * Le partage du site est respecté : ce qui se lit EN CONTINU garde ses 617 px
 * et ses 78 signes par ligne — c'est déjà ce que fait « Résultat / apport ».
 *
 * 62 px de réserve haute, la cote de « Points clés » : après un bloc pleine
 * largeur, un autre bloc pleine largeur garde le même intervalle.
 * ------------------------------------------------------------------- */

.fiche-suite {
  margin-top: 62px;
  max-width: 617px;
}


/* ---------------------------------------------------------------------
 * 6 bis. POINTS CLÉS — la grille de huit cases
 *
 * OBJET NEUF, mais bâti sur une grille qui existe déjà.
 *
 * ⚠ C'EST LA GRILLE DE RÉALISATIONS, ET C'EST DÉLIBÉRÉ. La maquette pose des
 * cases de 227 px avec 28,67 px entre elles ; « .rea-grille » pose des
 * vignettes de 226 avec 30. Les deux tiennent dans la coquille de 994 —
 * 4 x 227 + 3 x 28,67 = 994 comme 4 x 226 + 3 x 30 = 994 — et l'écart maximum
 * entre les deux est de UN pixel, sur le bord gauche des colonnes 2, 3 et 4.
 *
 * C'est la grille du site qui est reprise, pas celle de la maquette : écrire
 * une seconde grille à un pixel près de la première, c'est se condamner à les
 * tenir toutes les deux. Le geste est le même que sur la page Réalisations —
 * quatre carrés par ligne dans la même coquille —, et il n'y a aucune raison
 * qu'il s'écrive de deux façons. ÉCART D'UN PIXEL CONSIGNÉ.
 *
 * LES CASES SONT CARRÉES, et le carré est tenu par « aspect-ratio » : la
 * hauteur suit la largeur, sans qu'aucune cote de hauteur soit écrite. Si un
 * texte ne tient pas — et c'est ce qui arrive quand la fenêtre se resserre —
 * la case grandit plutôt que de rogner le texte. Toute la rangée grandit avec
 * elle, la grille reste régulière.
 *
 * LES DEUX RESPIRATIONS ORANGE SONT DES CASES VIDES, en aplat
 * « --color-orange ». Décision de Florian : de une à trois par fiche, et le
 * total est toujours un multiple de quatre — 4, 8, 12 ou 16. Elles recevront
 * plus tard un détail de photo du projet, détramé ; en attendant, l'aplat est
 * ce qu'il demande.
 *
 * CONTRASTE. Le blanc sur le gris bleuté du site donne 4,96:1 — au-dessus des
 * 4,5 exigés pour du texte courant, et très au-dessus des 3,0 exigés pour du
 * texte de cette taille. Les cases orange ne portent aucun texte : il n'y a
 * rien à contraster.
 * ------------------------------------------------------------------- */

.fiche-cles {
  margin-top: 62px;          /* bas du carrousel à y 1013, encre de « Points clés » à y 1083 */
}

.fiche-cles__grille {
  margin: 21px 0 0;          /* haut de la première rangée à y 1135 */
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;                 /* la gouttière de « .rea-grille » */
}

/*
 * Le texte des cases : Source Sans 3 medium 27 / 32, blanc. Corps établi par
 * la mesure, et non choisi — la largeur d'encre de dix lignes de la maquette
 * tombe à 1,1 px en moyenne du calcul en medium 27 dans la fonte réelle,
 * avec des écarts qui changent de signe. En semibold, ils sont tous positifs.
 *
 * Retrait de 16 px et réserve haute de 14 px : les deux sont réglées sur
 * l'ENCRE relevée dans la maquette — première ligne à y 1153 pour une case
 * qui commence à 1135, et bord d'encre à 17-19 px du bord de la case selon la
 * lettre. Une réserve n'est pas un retrait d'encre : à 27 / 32, l'encre
 * commence 6,6 px sous le haut de sa boîte, et chaque lettre a sa propre
 * approche de gauche.
 *
 * ⚠ MESURE : les lignes rendues sont 2 px plus étroites que celles du JPG.
 * Ce n'est pas un écart de corps mais un écart de méthode — du texte BLANC
 * sur un fond gris bave vers l'extérieur à la compression, et le seuil de
 * relevé le suit. Le calcul dans la fonte réelle donne 114,2 px pour
 * « Catalogue » ; le JPG en mesure 115, le rendu 112. C'est le calcul qui
 * tranche, et il dit 27.
 */
.fiche-cles__point {
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
  padding: 14px 16px;
  background: var(--color-blue-gray);
  color: var(--color-white);
  font-size: 27px;
  font-weight: var(--weight-medium);
  line-height: 32px;

  /*
   * ⚠ LE CARRÉ NE GRANDIT JAMAIS : C'EST LE CORPS QUI DESCEND.
   *
   * Règle de Florian, 29 août au soir : « ne jamais agrandir la hauteur du
   * carré concerné, mais réduire le corps de l'ensemble des points clés de la
   * page à la taille la plus élevée permettant au point clé incriminé de tenir
   * en entier sur la hauteur de son carré ».
   *
   * CE N'EST PAS UN CAS RARE. À 1440 les cases font 226 px et tout tient ;
   * mais la coquille rétrécit dès 1114 px, et à 900 la case tombe à 184. Le
   * corps restant à 27, TOUTES LES FICHES débordaient — jusqu'à huit cases sur
   * douze pour VINCI Autoroutes, et des rangées de 284 px au lieu de 184.
   *
   * LA RÈGLE S'ÉCRIT DONC UNE FOIS, EN PROPORTION, plutôt qu'en paliers
   * choisis à la main : le corps suit la largeur de la case, si bien que le
   * nombre de lignes d'un texte NE CHANGE JAMAIS. Ce qui tient à 1440 tient à
   * toutes les largeurs, et le corps est à chaque instant le plus grand
   * possible — c'est exactement la règle, appliquée en continu.
   *
   * « container-type » fait de la case son propre repère de mesure, et
   * « cqw » vaut 1 % de sa largeur. Les valeurs sont les cotes de la maquette
   * ramenées à la case de 226 px : 27 / 226 = 11,9469 %, 14 = 6,195 %,
   * 16 = 7,0796 %. À 226 px on retombe donc au pixel sur la maquette.
   *
   * Les déclarations en pixels ci-dessus restent, et ce n'est pas un doublon :
   * elles sont ce que voit un navigateur trop ancien pour « cqw ». Il retrouve
   * alors le comportement d'avant — juste à 1440, débordant en dessous.
   */
  container-type: inline-size;
  padding: 0;
}

/*
 * LE PLAFOND DE LA PAGE. 27 px, la cote de la maquette, sauf sur les fiches
 * où un MOT est plus large que la case — voir « --resserre » plus bas.
 *
 * « min() » plafonne, et ce n'est pas une précaution inutile : sous 900 px la
 * grille passe à deux colonnes, et les cases y sont PLUS LARGES qu'à 1440 —
 * 270 px sur un écran de 600. Sans plafond, le corps y monterait à 32 px,
 * c'est-à-dire au-dessus de tout ce que la maquette dit. La règle ne sert qu'à
 * DESCENDRE ; 27 px reste le sommet.
 *
 * ⚠ LE RÉGLAGE DE PAGE EST UN NOMBRE SANS UNITÉ, et ce n'est pas un caprice
 * d'écriture : « 24px * 0.44cqw » multiplierait deux longueurs entre elles, ce
 * qui ne fait pas une longueur et que CSS rejette en silence — la déclaration
 * tombe, et le corps repasse à 27 px partout, y compris là où il déborde.
 * Erreur commise puis mesurée ici même le 29 août. Le facteur multiplie donc
 * le corps entier, plafond compris.
 */
.fiche-cles {
  --cles-reduction: 1;
}

.fiche-cles__texte {
  display: block;
  padding: min(14px, 6.195cqw) min(16px, 7.0796cqw);
  font-size: calc(var(--cles-reduction) * min(27px, 11.9469cqw));
  line-height: 1.1852;       /* 32 / 27, le rapport de la maquette */
}

/*
 * ⚠ QUAND UN MOT EST PLUS LARGE QUE LA CASE.
 *
 * La règle des carrés ne regarde que la HAUTEUR : un point clé qui tient en
 * six lignes tient dans son carré. Mais un mot plus long que la ligne se coupe
 * en plein milieu — le tronc pose « overflow-wrap: break-word » —, et le carré
 * ne déborde pas pour autant : la mesure de hauteur ne voit rien.
 *
 * UN SEUL MOT DE TOUTE LA SÉRIE est dans ce cas : « commercialisation », sur
 * la fiche Elixyr, 212 px de large pour 194 px de ligne utile. Il s'affichait
 * « commercialisati / on ».
 *
 * Le remède est celui de Florian, appliqué à l'autre dimension : on ne coupe
 * pas le mot, on ne rogne pas le carré — on descend le corps de TOUTE la page
 * jusqu'à ce que le mot tienne. 24 px laisse 5 px de marge sous les 194.
 */
.fiche-cles--resserre {
  --cles-reduction: 0.8889;    /* 24 / 27 */
}

.fiche-cles__point--respiration {
  background: var(--color-orange);
}

/*
 * LA RESPIRATION PEUT PORTER UNE IMAGE : un détail de photo du projet,
 * détramé en orange, fourni par Florian — vingt-trois en tout, une par
 * respiration des six fiches.
 *
 * L'APLAT ORANGE RESTE SOUS L'IMAGE, et ce n'est pas une survivance : c'est
 * ce qu'on voit le temps que l'image arrive, et c'est ce qui reste si un
 * fichier manque. Une case vide ne trouera jamais la grille.
 *
 * « object-fit: cover » plutôt qu'une déformation : l'image est fournie
 * carrée, mais si elle ne l'était pas tout à fait, elle serait recadrée au
 * centre et non écrasée. La case, elle, reste carrée quoi qu'il arrive.
 *
 * L'image est DÉCORATIVE — texte de remplacement vide, et la case entière
 * porte déjà « aria-hidden ». Ces cases aèrent, elles n'informent pas.
 */
.fiche-cles__point--respiration img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}


/* ---------------------------------------------------------------------
 * 6 ter. RÉSULTAT / APPORT
 *
 * Le dernier bloc de la fiche, et le SEUL qui revienne à la colonne de
 * lecture du site : 617 px, la cote de Réalisations, de Contact et des deux
 * pages légales. Relevé dans la maquette : le texte y va de x 223 à 836, soit
 * 614 px pour la ligne la plus longue.
 *
 * C'est cohérent, et ce n'est pas une exception : ce qui se lit EN CONTINU
 * garde ses 78 signes par ligne. Les deux colonnes du haut et la grille de
 * Points clés sont des objets — une image, un carrousel, huit cases —, pas du
 * texte suivi ; c'est pour ça qu'elles prennent les 994 px de la coquille.
 * Contact fait exactement le même partage entre son formulaire de 868 et son
 * corps de 617.
 *
 * Le titre partage la voix des trois autres, « .fiche h2 ».
 * ------------------------------------------------------------------- */

.fiche-resultat {
  margin-top: 70px;          /* bas de la grille à y 1618, encre du titre à y 1697 */
}

.fiche-resultat p {
  max-width: 617px;
  margin: 16px 0 0;          /* première ligne de corps à y 1748 */
}


/* ---------------------------------------------------------------------
 * 7. LE RENVOI ET SA PETITE FENÊTRE
 *
 * OBJET NEUF. Un appel « (1) » dans le texte ouvre une note de 303 px de
 * large, posée sous la ligne qui le porte et calée sur son bord droit.
 *
 * ⚠ CE N'EST PAS, ET NE PEUT PAS ÊTRE, UN ATTRIBUT « title ». Le projet
 * l'interdit — vingt et une bulles ont été retirées le 28 août — et une
 * bulle de navigateur ne saurait de toute façon ni s'ouvrir au clavier, ni
 * se fermer, ni tenir sur deux lignes réglées.
 *
 * COTES RELEVÉES sur la maquette « avec Note » : boîte de 303 x 55 à
 * x 822 / y 657, filet de 1 px en orange foncé, fond off-white, texte de
 * 14 px sur 23 en anthracite, croix de 11 x 11 en haut à droite. La ligne
 * qui porte l'appel a son encre de y 638 à 655 : la note s'ouvre 2 px sous
 * elle, et son bord droit tombe sur celui de l'appel.
 *
 * ⚠ LE CARACTÈRE « ① » N'EXISTE DANS AUCUNE DES SIX FONTES DU SITE.
 * Vérifié dans les tables de caractères : ni Source Sans 3, ni Barlow Semi
 * Condensed ne le portent. Écrit tel quel, il serait dessiné par une fonte
 * de secours du système — donc différent sur un Mac, sur un PC et sur un
 * téléphone, au milieu d'une phrase. Il est donc DESSINÉ : un chiffre du
 * site dans un cercle tracé en CSS. Le rendu est celui de la maquette, et il
 * est le même partout.
 * ------------------------------------------------------------------- */

.fiche-renvoi {
  position: relative;
}

/*
 * L'appel. Boîte fixe de 11 x 10 px, relevée dans la maquette.
 *
 * ⚠ IL EST SOULEVÉ PAR « position: relative », ET SURTOUT PAS PAR
 * « vertical-align ». C'est un piège qui a été payé ici même : soulevé de
 * 6 px par « vertical-align », un bloc en ligne de 10 px de haut dépasse le
 * jambage des majuscules et FAIT GRANDIR SA LIGNE — mesuré, les cinq lignes
 * suivantes du paragraphe descendaient de 6 px, et elles seules. Posé sur la
 * ligne de base puis remonté par « position », il ne pèse plus sur rien : le
 * paragraphe se compose exactement comme s'il n'était pas là.
 *
 * Cette boîte connue est aussi ce qui permet de poser la note au pixel sous
 * la ligne, où que l'appel se trouve dans le texte.
 */
.fiche-renvoi__appel {
  display: inline-block;
  min-width: 11px;
  height: 10px;
  padding: 0;
  border: 0;
  background: none;
  white-space: nowrap;   /* sinon « (1) » se coupe entre la parenthèse et le chiffre */
  position: relative;
  top: -6px;
  color: var(--color-orange-dark);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  line-height: 10px;
  cursor: pointer;
}

/* Zone tactile de 44 px, sans toucher au dessin. */
.fiche-renvoi__appel::after {
  content: "";
  position: absolute;
  inset: -17px;
}

.fiche-note {
  position: absolute;
  top: 23px;                 /* note à y 657, soit 2 px sous l'encre de la ligne qui porte l'appel */
  right: 0;
  z-index: 5;
  width: 303px;
  box-sizing: border-box;
  /*
   * La réserve de droite fait 38 px, et ce n'est pas une marge décorative :
   * c'est la place de la croix de fermeture. Sans elle, le texte passerait
   * dessous et la première ligne se composerait autrement que dans la
   * maquette. Cote relevée : la ligne 1 s'y arrête à x 1085 pour une boîte
   * qui finit à 1123.
   */
  padding: 7px 38px 10px 10px;
  border: 1px solid var(--color-orange-dark);
  background: var(--color-off-white);
  color: var(--color-anthracite);
  font-size: 14px;
  font-weight: var(--weight-regular);
  font-style: normal;
  line-height: 18px;         /* interligne serré, relevé : 668 puis 686 dans la maquette */
  text-align: left;
  display: block;
}

/*
 * Le « ① » dessiné : un cercle de 14 px tracé au filet, le chiffre au
 * centre. Il ne dépend d'aucune fonte particulière.
 */
.fiche-note__marque {
  display: inline-block;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  margin-right: 4px;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: var(--color-orange-dark);
  font-size: 10px;
  line-height: 12px;
  text-align: center;
  /*
   * Le cercle est calé 1 px AU-DESSUS du haut d'encre de sa ligne : relevé
   * 667 dans la maquette pour un texte qui commence à 668. C'est le
   * décalage vertical que Florian avait posé dans son PSD.
   */
  vertical-align: 2px;
}

.fiche-note__fermer {
  position: absolute;
  top: 5px;
  right: 6px;   /* croix relevée à x 1108-1117 pour une boîte finissant à 1124 */
  padding: 0;
  border: 0;
  background: none;
  line-height: 0;
  color: var(--color-orange-dark);
  cursor: pointer;
}

/* Zone tactile de la croix, portée à 44 px sans toucher au dessin. */
.fiche-note__fermer::after {
  content: "";
  position: absolute;
  inset: -16.5px;
}


/* ---------------------------------------------------------------------
 * 8. MOUVEMENT RÉDUIT
 *
 * Le seul mouvement de la page est le glissement de la piste de vignettes.
 * Il redit sa relève ici, avec « !important », comme toute animation neuve
 * du site. Le carrousel continue de fonctionner : la piste saute au lieu de
 * glisser.
 * ------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .fiche-carrousel__piste {
    scroll-behavior: auto !important;
  }
}


/* ---------------------------------------------------------------------
 * 9. Le pictogramme de fin
 *
 * ⚠ LE PICTOGRAMME APPARTIENT AU PIED DE PAGE, ET C'EST CE QUI COMMANDE
 * TOUTES LES COTES D'ICI.
 *
 * C'est la façon dont Florian le lit, dite par lui le 29 août au soir : « le
 * picto zz fait partie du footer ». Le pictogramme, le filet et les trois
 * colonnes forment UN SEUL BLOC. Il s'ensuit deux règles :
 *
 *   1. LA TAILLE DU PICTOGRAMME ET SA DISTANCE AU FILET SONT DES INVARIANTS
 *      DU SITE. 83 px de large, 32 px jusqu'au filet — les cotes de la page
 *      Présentation, qui est la seule des cinq à suivre une maquette validée.
 *      ⚠ ON N'Y TOUCHE JAMAIS, sur aucune page. Le 27 août, Réalisations,
 *      Contact et les deux pages légales ont dérivé à 100 px et 72 px sans
 *      maquette pour les tenir : c'est un défaut, il est signalé, et il sera
 *      corrigé de leur côté. Pas un modèle à suivre.
 *
 *   2. CE QUI S'AJUSTE, C'EST LA DISTANCE AU TEXTE QUI PRÉCÈDE, au-dessus du
 *      bloc et non dedans.
 *
 * D'OÙ VIENNENT LES 113 px. La maquette pose 56 px de réserve — 59 px d'encre
 * à encre entre la dernière ligne de « Résultat / apport » et le haut du
 * pictogramme. En regardant les six fiches composées, Florian a jugé le bloc
 * trop près du texte et demandé d'ajouter, à cette distance, LA HAUTEUR DES
 * DEUX Z du pictogramme.
 *
 * Cette hauteur est mesurée dans le dessin, pas estimée : les deux z occupent
 * y 91,141 → 160 sur les 160 unités du tracé, soit 68,859. À 83 px de large le
 * pictogramme fait 132,8 de haut, donc une échelle de 0,83 : 68,859 x 0,83 =
 * 57,15 px. Et 56 + 57 = 113.
 *
 * ⚠ CETTE COTE EST LIÉE À LA LARGEUR DU PICTOGRAMME. Si les 83 px changent un
 * jour, les 57 px ajoutés changent avec eux, dans le même rapport.
 * ------------------------------------------------------------------- */

.fiche-mark {
  margin: 113px auto 0;      /* 56 de la maquette + 57, la hauteur des deux z */
  display: block;
  width: 83px;
}

.fiche-mark img {
  width: 100%;
  height: auto;
  display: block;
}


/* =====================================================================
 * SOUS 900 px — LE CHASSIS, PUIS LA COMPOSITION, TEMPS PAR TEMPS
 *
 * ⚠ ÉTAT AU 30 AOÛT 2026, ET CE COMMENTAIRE SE MET À JOUR À CHAQUE TEMPS.
 * Un commentaire périmé part chez le visiteur et piège la reprise suivante :
 * le défaut a été payé TROIS fois sur ce chantier — realisations.html,
 * contact.css, pages-legales.css.
 *
 *   § M0, LE CHASSIS — ÉCRIT le 30 août avec la composition d'ordinateur.
 *     Le strict nécessaire pour que la page ne soit pas FAUSSE sous 900 px :
 *     bandeau, colonne, empilement des deux colonnes, grille à deux
 *     colonnes, borne de la note, réserve de « .fiche-suite ».
 *   § M1, L'OUVERTURE — ÉCRIT le 30 août, temps ①. Réserve haute, bloc
 *     RETOUR au-dessus du surtitre, surtitre, titre, ligne d'agence, et
 *     l'intervalle qui ferme l'ouverture.
 *   § M2, L'IMAGE ET LE CARROUSEL — ÉCRIT le 30 août, temps ②. Trois
 *     vignettes visibles au lieu de quatre ; tout le reste du bloc est
 *     vérifié et inchangé, et le § dit pourquoi objet par objet.
 § M3, LES TEXTES — ÉCRIT le 30 août, temps ③. Titres de partie, corps,
 *     et le blanc au-dessus d'un titre, unifié à 52 px.
 *   § M4, LA NOTE DU RENVOI — ÉCRIT le 30 août, fin du temps ③. L'appel
 *     descend sur la ligne, la note est recalée par le script.
 *   § M5, LES POINTS CLÉS — ÉCRIT le 30 août, temps ④. Borne de la grille et
 *     rang d'affichage des respirations.
 *   § M6, LE BAS DE PAGE — ÉCRIT le 31 août, temps ⑤. La réserve au-dessus
 *     du pictogramme.
 *
 *   ⚠ LA COMPOSITION MOBILE DES FICHES EST COMPLÈTE. Il ne reste que la
 *     relecture des six fiches sur appareil.
 *
 * POURQUOI LE BANDEAU EST OBLIGATOIRE DÈS MAINTENANT.
 * « data-bandeau-permanent » est posé sur le <body> : le header fixe du site
 * est là dès le premier pixel. Sans ce bloc, le bandeau de page garderait
 * ses cotes d'ordinateur — 166 px de haut, logo de 273 centré — et le header
 * fixe de 76 px viendrait se poser dessus : deux logos superposés et une
 * réserve haute fausse.
 *
 * POURQUOI LA COLONNE Y EST AUSSI. Sans la ligne « --mob-colonne », la
 * coquille retombe sur « --gutter », qui vaut 24 px sous 900, quand les
 * cinq autres pages posent leur colonne à 20 : passer de l'une à l'autre
 * ferait sauter le texte de 4 px. Ce défaut a déjà été payé DEUX fois — sur
 * Contact le 28 août, sur les deux pages légales le 29. Ce n'est pas de la
 * composition mobile, c'est une règle du site qui se redit.
 *
 * La cote de bascule est celle du site, 900 px, et il n'y en a pas d'autre.
 * ===================================================================== */

@media (max-width: 899px) {

  /* Les cinq gestes du bandeau, COPIÉS du bloc M0 de pages-legales.css. */

  .fiche-bandeau__blanc {
    height: var(--mob-bandeau);        /* 76 px */
    display: flex;                     /* reprise explicite du « grid » desktop */
    align-items: center;
    justify-content: flex-start;       /* reprise explicite de « place-items: center » */
    padding-inline: var(--mob-marge);  /* 20 px */
  }

  .fiche-bandeau__blanc .brand-link {
    width: var(--mob-logo-compact);    /* 160 px */
    margin-inline: 0;                  /* reprise explicite du « auto » desktop */
    margin-top: 5px;                   /* le logo n'est pas centré : il descend */
  }

  .fiche-bandeau__blanc .brand-logo {
    width: var(--mob-logo-compact);
  }

  /*
   * Avec JavaScript, le header fixe est posé exactement sur ce bandeau. Le
   * laisser peint dessous laisserait une seconde cible clavier invisible
   * sous la première. « visibility » et non « display » : la boîte de 76 px
   * reste, donc la réserve sous le header fixe reste, et « #haut-de-page »
   * reste une cible d'ancre positionnable.
   */
  .js .fiche-bandeau__blanc {
    visibility: hidden;
  }

  /*
   * Reprise EXPLICITE, non complétée : à trois entrées, la navigation du
   * bandeau dépasse 320 px de large, et le projet interdit tout défilement
   * horizontal de 320 à 1920 px. Le menu du site reste atteignable par le
   * burger du header fixe.
   */
  .fiche-bandeau__nav {
    display: none;
  }

  /* La colonne du site, bord à 20 px — voir l'en-tête de ce bloc. */
  .fiche-shell {
    width: var(--mob-colonne);
  }

  /*
   * LES DEUX COLONNES S'EMPILENT. Ce n'est pas de la composition mobile,
   * c'est du châssis : à 375 px de large, deux colonnes de 48 % donneraient
   * une image de 170 px et une colonne de texte de 170 px, c'est-à-dire une
   * page FAUSSE et non une page mal composée. L'écart entre les deux blocs
   * reprend la gouttière du desktop.
   *
   * Tout le reste de la composition mobile — cotes de l'image, du
   * carrousel, des titres, de la note — reste à écrire.
   */
  .fiche-corps {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 39px;
  }

  /*
   * LA SUITE PLEINE LARGEUR N'A PLUS DE SENS ICI : tout est déjà sur une
   * colonne. Elle garde seulement son intervalle, aligné sur celui qui sépare
   * les deux blocs empilés juste au-dessus. Sa borne de 617 px ne gêne pas —
   * la colonne mobile est plus étroite —, mais elle ne veut plus rien dire :
   * autant l'écrire. Châssis, pas composition.
   */
  .fiche-suite {
    margin-top: 39px;
    max-width: none;
  }

  /*
   * La note fait 303 px de large, et le premier titre du site est calé à
   * 20 px du bord : sur un écran de 375, une note posée sur le bord droit
   * d'un appel proche du début d'une ligne sortirait de l'écran et créerait
   * un défilement horizontal, ce que le projet interdit de 320 à 1920 px.
   * Elle se borne donc à la colonne. Cote provisoire, à reprendre avec la
   * composition mobile.
   */
  .fiche-note {
    max-width: calc(100vw - 2 * var(--mob-marge));
  }

  /*
   * LA GRILLE DES POINTS CLÉS PASSE À DEUX COLONNES. Châssis, pas
   * composition : à 375 px de large, quatre cases donneraient des carrés de
   * 78 px pour un texte de 27, c'est-à-dire une page fausse. À deux, elles
   * font 157 px — encore trop petit pour ce corps, mais la page tient, se
   * lit et ne déborde pas.
   *
   * ⚠ CE QUI RESTE À DÉCIDER AVEC FLORIAN, ET QUI N'EST PAS ÉCRIT ICI : le
   * corps du texte des cases en petite largeur, et le nombre de colonnes
   * entre 900 et 1200 px. Il a seulement arrêté « toujours quatre par ligne
   * au-dessus de 1200 px ».
   */
  .fiche-cles__grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }


  /* ..................................................................
   * M1. LE TEMPS ① — L'OUVERTURE
   *
   * 30 août 2026. Aucune maquette mobile de fiche n'existe : le dossier
   * OneDrive a été vérifié le 30 août, il ne contient que les deux JPG
   * d'ordinateur de Castel. Tout ce qui suit est TRANSPOSÉ, et la source
   * est LE BLOC M1 DE « pages-legales.css » — la page la plus proche : pas
   * d'écran d'ouverture, même bandeau de 76 px, même suite titre / chapô.
   * Chaque cote dit sur quoi elle s'appuie.
   *
   * Largeur de composition : 375 px. Fenêtre : 375 x 768.
   * .................................................................. */

  /*
   * Réserve haute 56 → 36 px. En ordinateur la page respire 56 px sous un
   * bandeau de 166 ; en mobile le bandeau tombe à 76 et la réserve se
   * resserre avec lui. C'est la cote des QUATRE autres pages sans écran
   * d'ouverture, qui posent toutes leur première encre à 112 px du haut.
   *
   * ⚠ LA RÉSERVE BASSE RESTE NULLE. Voir l'avertissement du § 1 : le
   * pictogramme appartient au pied de page, et rien ne s'ajoute sous lui.
   * Redit ici explicitement pour qu'aucune passe mobile ne l'ajoute.
   */
  .fiche {
    padding-top: 36px;
    padding-bottom: 0;
  }

  /*
   * ⚠ LE BLOC RETOUR PASSE AU-DESSUS DU SURTITRE, ET IL EST FERRÉ À GAUCHE.
   * Décision de Florian, 30 août.
   *
   * En ordinateur, les trois commandes sont calées sur le bord DROIT de la
   * coquille, sur la ligne du surtitre. À 375 px, cette ligne ne peut plus
   * porter les deux : « Fiche projet » et les 122 px du bloc laissent
   * 75 px de blanc à 375, et seulement 24 à 320 — où « Fiche projet » se
   * cassait en deux lignes. Mesuré avant la passe.
   *
   * « column-reverse » retourne la ligne en colonne SANS TOUCHER AU
   * BALISAGE : le second enfant passe au-dessus du premier. L'ordre du
   * balisage ne change pas, donc l'ordre de lecture au clavier et à la
   * voix ne change pas non plus — et le surtitre reste le premier élément
   * lu, comme en ordinateur.
   *
   * ⚠ L'ÉCART DE 24 px NE CHANGE PAS DE VALEUR, IL CHANGE DE DIRECTION.
   * « gap » est déjà écrit à 24 px pour séparer le surtitre du bloc en
   * ordinateur ; en colonne, le même 24 les sépare verticalement. Aucune
   * cote n'est inventée ici.
   *
   * CONSÉQUENCE ASSUMÉE : la première encre de la page est désormais le
   * bloc RETOUR, à y 112, et « Fiche projet » descend à y 159. La réserve
   * haute de 36 px est tenue ; c'est le premier objet qui change, pas la
   * réserve.
   */
  .fiche-entete {
    flex-direction: column-reverse;
    align-items: flex-start;
    justify-content: flex-start;   /* reprise explicite du « space-between » */
  }

  /*
   * Les 2 px qui calaient le bloc sur la ligne du surtitre n'ont plus
   * d'objet : il n'est plus sur cette ligne.
   */
  .fiche-parcours {
    margin-top: 0;
  }

  /*
   * Surtitre 27 / 34 → 22,5 / 29, la cote de « .rea-titre », de
   * « .contact-titre » et de « .legal-titre », elle-même reprise du « h1 »
   * de l'ouverture mobile de Présentation. Le surtitre occupe la voix du
   * titre de page : il en suit la cote mobile.
   */
  .fiche-surtitre {
    font-size: 22.5px;
    line-height: 29px;
  }

  /*
   * Titre 42 / 46 → 33,5 / 38, la cote de « .rea-chapo », de
   * « .contact-chapo » et de « .legal-chapo ».
   *
   * DEMANDÉ PAR FLORIAN LE 30 AOÛT, mot pour mot : le titre d'une fiche a
   * les mêmes attributs que les chapôs de Réalisations, des mentions
   * légales et de la politique de confidentialité ; en mobile il suit la
   * même logique. Ce n'est donc pas une transposition proposée, c'est une
   * consigne.
   *
   * CE QUE ÇA CHANGE, MESURÉ AVANT LA PASSE : à 42 px sur une colonne de
   * 335, le titre de Honda Jardin occupait SIX lignes et 276 px, celui
   * d'Innovative Water Care cinq lignes et 230 px, et la première image de
   * Honda Jardin ne commençait qu'à y 670.
   *
   * « max-width: none » : les 868 px de l'ordinateur ne bornent plus rien
   * sous 900, mais la reprise est explicite. Une règle se redit, elle ne
   * s'hérite pas.
   *
   * L'écart de 5 px au surtitre NE BOUGE PAS : c'est un petit blanc entre
   * deux lignes de texte, pas une respiration de section, et les petits
   * blancs ne se resserrent pas. Même arbitrage que les 14 px du chapô des
   * pages légales.
   */
  .fiche-titre {
    max-width: none;
    margin-top: 5px;
    font-size: 33.5px;
    line-height: 38px;
  }

  /*
   * LA LIGNE D'AGENCE : 21 / 28 → 20 / 26.
   *
   * C'est la seule voix de l'ouverture qui n'existe nulle part ailleurs sur
   * le site, donc la seule qui n'ait aucune cote mobile à reprendre. Elle
   * est transposée par LE GESTE DE LA MAQUETTE, pas par un rapport : en
   * ordinateur, elle est posée UN CRAN AU-DESSUS DU CORPS — 21 pour un
   * corps de 18. Le corps mobile du site vaut 17 : le même cran donne 20.
   *
   * L'interligne prend celui du corps mobile, 26, et non 27 : la ligne
   * d'agence tombe alors sur le même rythme que tout le texte de la page.
   *
   * L'italique et le gris bleuté sont ses seules marques, comme dans les
   * 27 fenêtres de projet où la même information se lit au corps du texte
   * courant : « ce qu'il dit n'est pas d'un rang inférieur, c'est d'une
   * autre nature, et seule l'inclinaison le signale ».
   *
   * Son écart de 24 px au titre ne bouge pas — petit blanc, redit.
   */
  .fiche-agence {
    max-width: none;
    margin-top: 24px;
    font-size: 20px;
    line-height: 26px;
  }

  /*
   * L'INTERVALLE QUI FERME L'OUVERTURE : 59 → 39 px.
   *
   * En ordinateur, 59 px séparent la ligne d'agence du haut de l'image.
   * C'est une respiration de section, et les respirations se resserrent en
   * mobile. La cote n'est pas choisie : 39 px est déjà l'intervalle qui
   * sépare les deux blocs empilés juste en dessous — la gouttière de
   * l'ordinateur, reprise à la verticale par le châssis, et reprise une
   * troisième fois par « .fiche-suite ». Les trois grands intervalles de la
   * fiche mobile valent donc le même 39, et aucun n'est inventé.
   */
  .fiche-corps {
    margin-top: 39px;
  }



  /* ..................................................................
   * M2. LE TEMPS ② — L'IMAGE ET LE CARROUSEL
   *
   * 30 août 2026. Une seule cote change, et c'est Florian qui l'a choisie
   * sur son iPhone, en comparant trois pages réelles : QUATRE VIGNETTES
   * DEVIENNENT TROIS.
   *
   * *« J'aime bien le 4, mais j'ai peur que ce soit trop petit. Le 2, je
   * n'aime pas du tout, ça prend une place énorme. Je trouve que 3
   * vignettes est un bon compromis. »*
   * .................................................................. */

  /*
   * TROIS VIGNETTES VISIBLES AU LIEU DE QUATRE.
   *
   * La piste mesure 259 px à 375 — la colonne de 335 moins les deux
   * chevrons de 25 et leurs deux écarts de 13. À quatre, la vignette y
   * tombait à 60,25 px ; à trois, elle fait 82,33. Les cotes des autres
   * largeurs suivent d'elles-mêmes, la vignette étant une fraction de la
   * piste et non une longueur écrite : 64 px à 320, 95 à 414.
   *
   * ⚠ LA GOUTTIÈRE RESTE À 6 px, ET LE COMPTE CHANGE AVEC LE NOMBRE.
   * Trois vignettes ne laissent que DEUX gouttières entre elles, quand
   * quatre en laissaient trois. Écrire « 3 * 6px » ici donnerait des
   * vignettes trop étroites de 2 px et un quatrième bord qui dépasserait de
   * la piste — le genre d'écart qui ne se voit pas et qui casse le calage.
   *
   * La déclaration est écrite en entier — « flex » et non « flex-basis » —
   * parce que la règle d'ordinateur est elle-même écrite en raccourci :
   * n'en reprendre qu'un morceau laisserait deux moitiés de règle à deux
   * endroits. Une règle se redit, elle ne se complète pas.
   *
   * CE QUI N'EST PAS TOUCHÉ, ET POURQUOI :
   *
   *   — LES CHEVRONS gardent leurs 25 x 44 px et leurs écarts de 13. Les
   *     retirer sous 900 px a été envisagé : ils mangent 76 px des 335 de
   *     la colonne, soit 23 % de la largeur, et 27 % à 320. Mais les rendre
   *     aux vignettes les porterait à 108 px, c'est-à-dire à une bande
   *     presque aussi encombrante que le réglage à deux vignettes que
   *     Florian écarte. La question est donc close par son propre choix.
   *
   *   — LA GRANDE VUE n'a besoin d'aucune règle mobile : « width: 100% » et
   *     « aspect-ratio: 1/1 » suivent la colonne à toutes les largeurs. Elle
   *     fait 335 px à 375, 280 à 320. Rien à redire, au sens propre.
   *
   *   — LES 15 px ENTRE L'IMAGE ET LA BANDE ne bougent pas. C'est un petit
   *     blanc entre deux objets du même bloc, pas une respiration de
   *     section, et les petits blancs ne se resserrent pas en mobile — même
   *     arbitrage que les 5 px du titre et les 24 px de la ligne d'agence au
   *     temps ①.
   *
   *   — LA ZONE TACTILE des chevrons fait déjà 44 px, et la piste ne déborde
   *     pas sur la page au glissement (« overscroll-behavior-x: contain »).
   *     Les deux étaient déjà justes depuis la composition d'ordinateur :
   *     vérifiés, pas réécrits.
   */
  .fiche-carrousel__vue {
    flex: 0 0 calc((100% - 2 * 6px) / 3);
  }



  /* ..................................................................
   * M3. LE TEMPS ③ — LES TEXTES
   *
   * 30 août 2026. Les trois voix de la colonne de lecture, et les blancs
   * qui les séparent. La note du renvoi est traitée au § M4.
   * .................................................................. */

  /*
   * LES TITRES DE PARTIE : 32 / 40 → 25,5 / 32.
   *
   * C'est la voix la plus particulière de la fiche — Barlow SEMIBOLD, noir
   * profond —, et elle n'existe nulle part ailleurs sur le site : les
   * autres « h2 » sont en 27 / 34 GRAS anthracite. Elle n'a donc aucune
   * cote mobile à reprendre, comme la ligne d'agence au temps ①.
   *
   * ⚠ ELLE NE PEUT PAS RESTER À 32. En ordinateur, le nom du projet fait 42
   * et le titre de partie 32 : l'écart se voit. En mobile le nom du projet
   * descend à 33,5 — les deux voix se retrouveraient à un demi-point l'une
   * de l'autre, et la page n'aurait plus de premier titre.
   *
   * LA COTE EST DONC CELLE QUI GARDE LE RAPPORT DES DEUX VOIX DE BARLOW :
   * 32 / 42 = 0,762 en ordinateur ; 33,5 x 0,762 = 25,5. Et l'interligne
   * suit le même rapport que la maquette, 40 / 32 = 1,25, soit 32 tout
   * rond. Rien n'est choisi : les deux nombres tombent du réglage
   * d'ordinateur.
   *
   * La hiérarchie mobile se lit alors comme celle de l'ordinateur :
   *   nom du projet 33,5 · titre de partie 25,5 · « Fiche projet » 22,5 ·
   *   corps 17.
   */
  .fiche h2 {
    font-size: 25.5px;
    line-height: 32px;
  }

  /*
   * LE CORPS : 18 / 26 → 17 / 26. Le corps de TOUTE la page mobile de
   * Présentation, celui de Réalisations, de Contact et des deux pages
   * légales. Aucune transposition à faire : c'est la cote du site.
   */
  .fiche-textes p,
  .fiche-suite p,
  .fiche-resultat p {
    font-size: 17px;
    line-height: 26px;
  }

  /*
   * LES DEUX PETITS BLANCS NE BOUGENT PAS, ET LA REPRISE EST EXPLICITE.
   *
   *   — 16 px entre un titre de partie et son texte : cette attache est
   *     indépendante de la largeur. Même arbitrage que les 12 px des pages
   *     légales.
   *   — 15 px entre deux paragraphes : la cote du site, en ordinateur comme
   *     en mobile, sur cinq pages déjà.
   */
  .fiche-textes h2 + p,
  .fiche-suite h2 + p,
  .fiche-resultat p {
    margin-top: 16px;
  }

  .fiche-textes p + p,
  .fiche-suite p + p {
    margin-top: 15px;
  }

  /*
   * ⚠ LE BLANC AU-DESSUS D'UN TITRE DE PARTIE : 52 px PARTOUT, ET C'EST UNE
   * CORRECTION.
   *
   * En ordinateur, ce blanc vaut QUATRE valeurs différentes, et chacune a sa
   * raison : 52 px entre deux parties de la colonne de lecture, 62 px
   * au-dessus de « Intervention » quand elle sort en pleine largeur, 62 px
   * au-dessus de « Points clés », 70 px au-dessus de « Résultat / apport ».
   * Ces écarts disent la nature des blocs qui se suivent — colonne étroite,
   * bloc pleine largeur, grille.
   *
   * ⚠ EN MOBILE, CETTE DISTINCTION N'EXISTE PLUS : tout est sur une seule
   * colonne. Un titre de partie y suit toujours du texte, et rien d'autre.
   * Les quatre valeurs deviennent quatre écarts différents pour une seule et
   * même situation.
   *
   * PIRE, ET C'EST CE QUI FORCE LA CORRECTION : les six fiches ne se
   * liraient pas pareil. « Intervention » reste dans la colonne sur Castel,
   * Honda Jardin et Innovative Water Care, et sort en pleine largeur sur les
   * trois autres. En ordinateur ça se voit et c'est voulu ; en mobile les
   * deux cas sont visuellement identiques, et pourtant l'un aurait 52 px
   * au-dessus et l'autre 62 — sans que rien ne le justifie.
   *
   * Le blanc est donc UNIFIÉ À 52 px, la cote relevée dans la maquette pour
   * deux parties qui se suivent dans la colonne de lecture — exactement la
   * situation que le mobile crée partout.
   *
   * ⚠ « .fiche-suite » portait 39 px, posés par le châssis. C'était une
   * valeur d'attente, explicitement provisoire, alignée sur l'écart des deux
   * colonnes empilées. Elle est remplacée ici.
   *
   * ⚠ SEUL « Résultat / apport » GARDE SES 70 px : c'est le seul titre qui
   * ne suit pas du texte mais la grille des points clés. La distinction qui
   * disparaît est celle des colonnes, pas celle des objets. Redit
   * explicitement pour qu'aucune passe ne l'aligne par symétrie.
   */
  .fiche-textes p + h2 {
    margin-top: 52px;
  }

  .fiche-suite {
    margin-top: 52px;
  }

  .fiche-cles {
    margin-top: 52px;
  }

  .fiche-resultat {
    margin-top: 70px;
  }



  /* ..................................................................
   * M4. LE TEMPS ③, SECOND MORCEAU — LA NOTE DU RENVOI
   *
   * 30 août 2026. Deux gestes, tous deux demandés par Florian après essai
   * sur son iPhone : la note ne sort plus de l'écran, et l'appel cesse
   * d'être en exposant.
   *
   * ⚠ LE RECALAGE DE LA NOTE EST DANS « fiches-projets.js », ET IL NE PEUT
   * PAS ÊTRE ICI : la position de l'appel dans sa ligne n'est connue qu'à
   * l'exécution. Le § du script l'explique en entier.
   * .................................................................. */

  /*
   * ⚠ L'APPEL N'EST PLUS EN EXPOSANT, ET IL PREND LE CORPS DU TEXTE.
   *
   * Demande de Florian, 30 août : *« On a vraiment du mal à voir le (1). »*
   * En ordinateur il fait 10 px et il est soulevé de 6 ; sur un téléphone,
   * dix pixels au-dessus de la ligne ne se voient pas, et surtout ne se
   * visent pas.
   *
   * Il redescend donc sur la ligne — « top: 0 » — et passe à 17 / 26, le
   * corps et l'interligne du texte courant. Il se lit alors comme un
   * caractère de la phrase, ce qu'il est.
   *
   * ⚠ ET LA LIGNE NE GRANDIT PAS POUR AUTANT. C'est le point délicat, et il
   * a été mesuré : l'appel est un bloc en ligne, son interligne est celui du
   * paragraphe, donc sa boîte fait exactement la hauteur d'une ligne. Le
   * paragraphe de Castel fait 182 px avec l'ancien appel comme avec le
   * nouveau. C'est la même précaution qu'en ordinateur, où le soulèvement se
   * fait par « position » et jamais par « vertical-align » — un bloc en
   * ligne trop haut fait descendre toutes les lignes suivantes.
   *
   * « height: auto » et « min-width: 0 » défont la boîte de 11 x 10 px de
   * l'ordinateur, qui n'a plus lieu d'être : elle servait à poser la note au
   * pixel sous une ligne, et c'est le script qui s'en charge maintenant.
   */
  .fiche-renvoi__appel {
    top: 0;
    min-width: 0;
    height: auto;
    font-size: 17px;
    line-height: 26px;
  }

  /*
   * La zone tactile reste à 44 px, et les débords changent parce que la
   * boîte a changé : 21 x 26 px mesurés, donc 12 px de chaque côté et 9 en
   * haut et en bas. 21 + 24 = 45, 26 + 18 = 44.
   */
  .fiche-renvoi__appel::after {
    inset: -9px -12px;
  }

  /*
   * LA NOTE S'OUVRE EXACTEMENT UNE LIGNE SOUS CELLE QUI PORTE L'APPEL.
   *
   * 23 px en ordinateur, relevés dans la maquette : 2 px sous l'encre. Ici
   * la règle est plus simple et plus sûre — 26 px, l'interligne du texte —,
   * et elle donne le même résultat à 2 px près, mesuré. Surtout, elle ne
   * peut jamais mordre sur les jambages de la ligne du dessus, quel que soit
   * le corps du texte.
   *
   * La borne de largeur posée par le châssis reste, et elle sert : à 320 px
   * de large, la note est ramenée à 280 px et le recalage la pose alors
   * exactement sur la colonne.
   */
  .fiche-note {
    top: 26px;
  }



  /* ..................................................................
   * M5. LE TEMPS ④ — LES POINTS CLÉS
   *
   * 30 août 2026. Deux gestes : la grille cesse de grandir au-delà de la
   * cote d'ordinateur, et les respirations orange cessent de se toucher.
   * .................................................................. */

  /*
   * ⚠ LA GRILLE NE DÉPASSE PLUS 472 px, ET C'EST UNE CORRECTION.
   *
   * « --mob-colonne » plafonne à 560 px. Au-delà de 600 px d'écran, la
   * colonne ne bouge donc plus, mais la grille restait à deux colonnes : les
   * cases atteignaient 270 px de côté — PLUS GRANDES QU'À 1440 px, où elles
   * font 226 —, et la page devenait plus haute qu'à 375. Mesuré : Castel
   * passait de 3 670 à 3 963 px entre 375 et 600.
   *
   * 472 = 2 x 226 + 20, c'est-à-dire deux cases à leur cote d'ordinateur et
   * la gouttière mobile. La case ne dépasse donc jamais sa taille de
   * maquette, exactement comme le corps du texte des cases ne dépasse jamais
   * ses 27 px : la règle ne sert qu'à descendre.
   *
   * La grille se centre dans la colonne, comme la coquille se centre dans la
   * page. Aucune seconde cote de bascule n'est introduite : c'est une borne,
   * pas un seuil.
   */
  .fiche-cles__grille {
    max-width: 472px;
    margin-inline: auto;
  }

  /*
   * ⚠ LES RESPIRATIONS NE SE TOUCHENT PLUS.
   *
   * Règle de Florian, 30 août : *« je veux éviter que 2 blocs de respiration
   * orange soient voisins immédiats, surtout quand ils sont les deux seuls à
   * illustrer les points clés de la fiche »* — le cas de Castel.
   *
   * LE DÉFAUT VIENT DU CHANGEMENT DE GRILLE, PAS DU CONTENU. La place des
   * respirations a été arrêtée pour QUATRE colonnes. À deux, deux
   * respirations distantes de deux cases tombent l'une SOUS l'autre, et deux
   * distantes d'une case peuvent tomber côte à côte. Relevé sur les six
   * fiches : cinq étaient touchées, seule Innovative Water Care ne l'était
   * pas.
   *
   * LE RANG D'AFFICHAGE EST CALCULÉ PAR LE PROGRAMME, dans « rangs.py », et
   * posé sur chaque case en clair. Trois règles le tiennent :
   *   — les cases de TEXTE ne bougent pas, jamais ;
   *   — chaque respiration reste sur la rangée qu'elle occuperait sans
   *     correction ; c'est sa COLONNE qui change ;
   *   — deux respirations ne partagent jamais un bord.
   * Le programme vérifie les deux dernières par assertion : une disposition
   * fausse ne peut pas sortir de la fabrique.
   *
   * ⚠ POURQUOI ON A LE DROIT DE LES DÉPLACER. Les respirations portent
   * « aria-hidden » et un texte de remplacement vide : elles aèrent, elles
   * n'informent pas. Les déplacer ne change rien à ce qui est lu, ni à
   * l'ordre du balisage — « order » ne touche que le dessin.
   *
   * ⚠ ET CE RANG NE VAUT QUE SOUS 900 px. Au-dessus, la grille reprend ses
   * quatre colonnes et l'ordre du balisage, celui de la maquette validée.
   */
  .fiche-cles__point {
    order: var(--rang, 0);
  }

  /*
   * ⚠ TROIS RESPIRATIONS AU LIEU DE CINQ SUR TROIS FICHES.
   *
   * VMC Pêche, Elixyr et Honda Jardin en portent CINQ pour douze cases. À
   * quatre colonnes elles se répartissent ; à deux, la règle des voisins ne
   * laisse plus qu'un zigzag — un carré orange dans presque chaque rangée.
   * Florian en a demandé TROIS pour le téléphone. La grille mobile y compte
   * donc DIX cases, soit cinq rangées pleines : rien ne dépasse, rien ne
   * manque.
   *
   * ⚠ « display: none » ICI, ET C'EST UNE EXCEPTION MOTIVÉE. Le site masque
   * avec l'attribut « hidden », jamais à la main. Mais « hidden » ne sait pas
   * lire la largeur de l'écran : ces deux cases existent en ordinateur et pas
   * en mobile, et le balisage ne peut pas dire ça. La case est décorative —
   * « aria-hidden », texte de remplacement vide — donc rien n'est retiré à la
   * lecture : c'est un aplat de couleur qui ne paraît pas.
   */
  .fiche-cles__point--hors-mobile {
    display: none;
  }



  /* ..................................................................
   * M6. LE TEMPS ⑤ — LE BAS DE PAGE
   *
   * 31 août 2026. Une seule cote, et c'est la dernière de la composition
   * mobile.
   * .................................................................. */

  /*
   * ⚠ LA RÉSERVE AU-DESSUS DU PICTOGRAMME : 113 → 93 px.
   *
   * LA CONSTRUCTION EST CELLE DE FLORIAN, TRANSPOSÉE. En ordinateur, les
   * 113 px valent 56 + 57 : les 56 px de la maquette, plus la hauteur des
   * deux z du tracé à l'échelle 0,83 (voir le § 9). En mobile, les 56 px de
   * réserve du site deviennent 36 partout — bloc M1, et les quatre autres
   * pages avant lui. Le même calcul donne donc 36 + 57 = 93.
   *
   * ⚠ ET LE RÉSULTAT A ÉTÉ VÉRIFIÉ CONTRE LA PAGE DE RÉFÉRENCE, QUI EST LA
   * SEULE À SUIVRE UNE MAQUETTE VALIDÉE. Sur Présentation en mobile, le
   * pictogramme est posé 97 px sous le dernier élément de la page. Mais cet
   * élément est un BOUTON : son bord est de l'encre, et 97 px écrits font
   * 97 px de blanc. Sur une fiche, le dernier élément est une ligne de
   * texte, dont la boîte descend 5 px plus bas que la dernière lettre.
   *
   * Mesuré sur les pixels d'une capture, et non calculé :
   *
   *     Présentation, 97 px écrits  →  98 px de blanc vu
   *     Fiche à 113 px écrits       →  118 px de blanc vu
   *     Fiche à  97 px écrits       →  102 px de blanc vu
   *     Fiche à  93 px écrits       →   98 px de blanc vu
   *
   * LES DEUX CHEMINS TOMBENT SUR LE MÊME BLANC. La transposition de la
   * recette de Florian et la comparaison optique avec la page de référence
   * donnent 93 toutes les deux. C'est ce qui a emporté la décision.
   *
   * ⚠ CE QUI NE BOUGE PAS, ET QUI EST VÉRIFIÉ IDENTIQUE À PRÉSENTATION EN
   * MOBILE : le pictogramme fait 83 px de large, il est à 32 px du filet, et
   * il reste 55 px sous le dernier lien du pied de page. Ces trois cotes
   * sont des invariants du site — on n'y touche jamais, sur aucune page.
   *
   * ⚠ ET LA RÉSERVE BASSE RESTE NULLE. Redite une troisième fois ici, à
   * l'endroit même où la tentation existe : le 29 août au soir, une consigne
   * de Florian sur l'espace AU-DESSUS du pictogramme avait été appliquée
   * SOUS lui, et le pied de page s'était éloigné de 57 px.
   */
  .fiche-mark {
    margin-top: 93px;
  }

}