/* ============================================================================
   OCC MIND — LA MISE EN PAGE DU SITE
   ----------------------------------------------------------------------------
   Cette feuille ne porte QUE ce qui est propre au site : la grille, l'en-tête,
   le pied, les sections éditoriales, les quelques blocs qui n'existent qu'ici
   (le schéma d'architecture, la planche des quatorze, la file de décisions).

   Tout le reste vient d'avant elle, dans cet ordre :
     occmind-tokens.css      les couleurs, les polices, le verre, les ombres
     occmind-echelle.css     --fs-* --sp-* --r-* --touch --largeur
     occmind-primitives.css  .carte .btn .portrait .surtitre .chapo .etat …

   ── Les trois règles qui gouvernent ce fichier ─────────────────────────────

   1. **On ne redéfinit jamais une primitive.** Si une forme est réutilisable —
      un bouton, une pastille, une carte — elle appartient à `brand/planche.css`
      et se demande là-bas. La dupliquer ici la fait diverger de l'application
      en une semaine, et c'est exactement ce que le socle existe pour empêcher.

   2. **Aucune valeur en dur** pour une taille de texte, un écart ou un rayon :
      `var(--fs-*)`, `var(--sp-*)`, `var(--r-*)`. Un pixel écrit ici rouvre ce
      que ces jetons ferment. Restent légitimes : les 1 px de filet, les 3 px
      d'accent, les pourcentages de grille et les seuils de media query — ils ne
      relèvent d'aucune échelle.

   3. **Aucune couleur en dur.** Les six couleurs de pôle et les neutres ont
      tous un jeton. Un hexadécimal écrit ici ne suivra pas le jour où la charte
      bouge — et, bien plus souvent, c'est une teinte voisine de la bonne que
      personne ne remarque.

   La profondeur vient du VERRE, jamais d'une lueur : voile clair très faible,
   arête de 1 px en haut, ombre noire large. Pas de dégradé violet-bleu, pas de
   néon, pas de glow. Aucun emoji.
   ============================================================================ */

/* --- Les icônes ------------------------------------------------------------
   Une seule taille de base, en `em` : l'icône suit la taille du texte qui
   l'entoure, sans qu'aucun bloc n'ait à la redimensionner.

   Sans cette règle, un `<svg>` inline sans attributs `width`/`height` prend sa
   taille intrinsèque par défaut — 300 × 150 px. Dans un bouton, la flèche
   pousse alors le libellé sur trois lignes ; et comme le SVG garde son ratio,
   ça ressemble à un problème de texte, pas à un problème d'icône. */

.ico {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}

/* --- Grille de page --------------------------------------------------------
   Une seule largeur utile, un seul rembourrage latéral. Tout ce qui s'aligne
   sur le site s'aligne sur `.wrap` — c'est ce qui fait que le logo de l'en-tête
   tombe sur la même verticale que le premier mot du héros. */

.wrap {
  width: 100%;
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 var(--sp-6);
}
.wrap.etroit {
  max-width: var(--largeur-etroite);
}
/* Un bloc centré : accroche, phrase, boutons, note. C'est la 404 et rien
   d'autre aujourd'hui. Le `gap` est ce qui l'empêche de se lire comme un pavé —
   sans lui, le titre et la phrase se touchent. */
.bloc-centre {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-5);
  text-align: center;
}
.bloc-centre .chapo,
.bloc-centre .texte {
  margin-inline: auto;
}
/* Une note reste alignée à gauche : son filet est à gauche, et un texte centré
   contre un filet vertical se lit de travers. */
.bloc-centre .note {
  text-align: left;
  margin-top: var(--sp-3);
}

.sec {
  padding: var(--sp-9) 0;
}
.page-hero {
  padding: calc(var(--sp-9) + var(--sp-8)) 0 var(--sp-9);
}
/* Le rembourrage bas du héros et celui du haut de la section suivante
   s'additionnaient : deux cent cinquante pixels de vide entre une accroche et
   le premier bloc, ce qui se lit comme un contenu manquant. */
.page-hero + .sec,
.hero + .sec {
  padding-top: var(--sp-8);
}

/* Le lien d'évitement. Il n'est pas caché : il est REPLIÉ hors du cadre tant
   qu'il n'a pas le focus. Un lien d'évitement en `display: none` n'est jamais
   atteint au clavier ; et le vieux motif `left: -9999px` le laisse dans le flux
   horizontal du document, où certains lecteurs d'écran annoncent un saut de
   focus déroutant. Un `translateY` le sort du cadre sans le sortir du flux. */
.saut {
  position: absolute;
  left: var(--sp-4);
  top: var(--sp-4);
  z-index: 100;
  padding: var(--sp-4) var(--sp-6);
  background: var(--terre);
  color: var(--chaux);
  border-radius: var(--r-sm);
  font-family: var(--font-titre);
  font-weight: 700;
  transform: translateY(-200%);
  transition: transform var(--t-fast) var(--ease);
}
.saut:focus {
  transform: none;
  color: var(--chaux);
}

/* --- L'en-tête -------------------------------------------------------------
   Collante, transparente en haut de page, en verre dès qu'on défile. Le seuil
   (12 px, posé par `site.js`) évite qu'un rebond de défilement iOS la fasse
   clignoter autour de zéro. */

.entete {
  position: sticky;
  top: 0;
  z-index: 40;
  /* Le vocabulaire du verre, et rien d'autre : un voile clair très faible, un
     flou qui brouille ce qui passe dessous, une arête de 1 px en haut. Pas de
     valeur trouvée à la main.

     Le voile est là DÈS LE DÉPART, pas seulement une fois défilé : sans lui,
     l'accroche du héros se lit AU TRAVERS des liens de navigation dès le
     premier coup de molette. Deux textes superposés, c'est le défaut le plus
     visible qu'un site puisse avoir, et il n'apparaît qu'en défilant — donc
     jamais sur une capture d'écran de la page en haut. */
  background: var(--verre-haut);
  -webkit-backdrop-filter: var(--verre-flou);
  backdrop-filter: var(--verre-flou);
  border-bottom: 1px solid transparent;
  box-shadow: var(--arete);
  transition:
    border-color var(--t-hover) var(--ease),
    box-shadow var(--t-hover) var(--ease);
}
/* Une fois défilé, l'en-tête se DÉTACHE : le filet et l'ombre apparaissent. La
   classe est posée par `site.js` — s'il ne tourne pas, l'en-tête reste lisible,
   simplement sans sa ligne de séparation. */
.entete.est-fixe {
  border-bottom-color: var(--filet);
  box-shadow: var(--arete), var(--sh-2);
}
/* Sans `backdrop-filter` — GPU coupé, vieux WebView — un voile à 8 % de blanc
   ne cache rien du tout : la barre devient franchement transparente et le
   problème est PIRE, pas moindre. On repasse alors à l'opaque de secours. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .entete {
    background: var(--verre-repli);
  }
}

.entete-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  min-height: calc(var(--touch) + var(--sp-5));
}

.logo {
  font-size: var(--fs-lg);
}
.logo:hover {
  color: var(--chaux);
}
.logo img {
  /* Le symbole ne se recolore pas et ne se déforme pas. */
  display: block;
}
.logo-mot {
  letter-spacing: var(--tr-titre);
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  margin-left: auto;
}
.nav a {
  font-size: var(--fs-md);
  color: var(--galet);
  padding: var(--sp-2) 0;
  position: relative;
}
.nav a:hover {
  color: var(--chaux);
}
.nav a.est-actif {
  color: var(--chaux);
}
/* Le filet sous l'entrée active. En Terre d'Oc, 2 px : c'est le seul orange de
   l'en-tête, et il n'entre pas en concurrence avec un bouton primaire — il n'y
   en a pas ici. */
.nav a.est-actif::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--sp-2) * -1);
  height: 2px;
  border-radius: var(--r-pill);
  background: var(--terre);
}

.entete-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.entete-actions .btn {
  min-height: calc(var(--touch) - var(--sp-4));
  padding: 0 var(--sp-5);
  font-size: var(--fs-xs);
}

/* Le menu mobile est une case à cocher : un téléphone dont le script échoue
   garde sa navigation. */
.nav-open {
  display: none;
}
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: var(--touch);
  height: var(--touch);
  margin-left: auto;
  padding: 0 var(--sp-4);
  border: 1px solid var(--filet);
  border-radius: var(--r-sm);
  background: var(--verre);
  cursor: pointer;
}
.nav-burger span {
  display: block;
  height: 2px;
  border-radius: var(--r-pill);
  background: var(--chaux);
  transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}

/* --- Le fil d'Ariane ------------------------------------------------------- */

.fil {
  border-bottom: 1px solid var(--filet);
}
.fil ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  list-style: none;
  margin: 0;
  padding: var(--sp-4) 0;
  font-size: var(--fs-sm);
  color: var(--galet-fonce);
}
.fil li + li::before {
  content: '/';
  margin-right: var(--sp-3);
  color: var(--filet-clair);
}
.fil a {
  color: var(--galet);
}
.fil a:hover {
  color: var(--terre);
}
.fil [aria-current='page'] {
  color: var(--chaux);
}

/* --- En-tête de section ---------------------------------------------------- */

.tete-sec {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  margin-bottom: var(--sp-8);
  max-width: 42ch;
}
.tete-sec .chapo {
  max-width: 60ch;
}
/* Un en-tête de section qui ne précède rien ne pousse rien : sa marge basse
   s'ajouterait au rembourrage de la section et creuserait un vide de deux cents
   pixels sous une accroche de page. */
.tete-sec:last-child {
  margin-bottom: 0;
}
.tete-sec.est-centre {
  max-width: 62ch;
  margin-inline: auto;
  align-items: center;
  text-align: center;
}
.tete-sec .titre-section em {
  font-style: normal;
  color: var(--terre);
}

/* Un mot plus large que sa colonne pousse la PAGE entière hors de l'écran, et
   le défaut ne se voit qu'en étroit : « CONFIDENTIALITÉ » en Archivo 800
   capitales fait 411 px dans une colonne de 358. `break-word` ne se déclenche
   que dans ce cas précis — un titre qui tient ne change pas d'un pixel.

   ATTENTION — cette protection appartient au socle, pas ici : elle vaut pour
   `.titre-section` partout, application comprise. Elle est posée côté site en
   attendant, et signalée. */
.titre-section,
.titre-hero,
.titre-ecran,
.nom-agent {
  overflow-wrap: break-word;
}

/* Le titre d'ouverture d'une page. Un cran au-dessus du titre de section, et un
   seul par page — c'est l'accroche, pas un titre. */
.titre-hero {
  font-family: var(--font-titre);
  font-weight: 800;
  font-size: var(--fs-5xl);
  line-height: 1.02;
  letter-spacing: var(--tr-titre);
  text-transform: uppercase;
  color: var(--chaux);
  margin: 0;
  text-wrap: balance;
}
.titre-hero em {
  font-style: normal;
  color: var(--terre);
}

/* --- Le héros -------------------------------------------------------------- */

.hero {
  padding: calc(var(--sp-9) + var(--sp-7)) 0 var(--sp-9);
}
.hero-grille {
  display: grid;
  /* La colonne de gauche est plus large que la droite : l'accroche fait seize
     signes en capitales à 64 px, et une largeur égale la coupait après
     « ÉQUIPE », laissant « IA. » seul sur une ligne. */
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: var(--sp-8);
  align-items: center;
}
.hero-texte {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}
.hero-texte .surtitre {
  margin: 0;
}
.hero-actions {
  margin-top: var(--sp-2);
}
.hero-preuves {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
  list-style: none;
  margin: var(--sp-4) 0 0;
  padding: var(--sp-6) 0 0;
  border-top: 1px solid var(--filet);
  font-size: var(--fs-sm);
  color: var(--galet);
}
.hero-preuves li {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
}
.hero-preuves .ico {
  width: 18px;
  height: 18px;
  color: var(--terre);
}

/* --- La file de décisions --------------------------------------------------
   Reconstruite en balisage plutôt qu'en capture d'écran : une image PNG pèse
   300 ko, vieillit à la première évolution de l'interface et devient floue sur
   un écran à haute densité. */

.hero-visuel {
  position: relative;
}
.console {
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.console-barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-2) var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--filet);
}
.console-lignes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.console-lignes .ligne-mission {
  border-radius: var(--r-md);
  transition: background-color var(--t-fast) var(--ease);
}
.console-lignes .ligne-mission:hover {
  background: rgba(255, 255, 255, 0.03);
}
/* Le nom de l'agent passe sous l'intitulé : sur une carte étroite, la ligne
   unique du motif d'origine tronquait le texte utile pour garder le prénom. */
.console-lignes .quoi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  white-space: normal;
  font-size: var(--fs-sm);
  line-height: 1.4;
}
.console-lignes .qui {
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: var(--fs-2xs);
  letter-spacing: var(--tr-surtitre);
  text-transform: uppercase;
}
.console-lignes .qui::before {
  content: none;
}
.console-pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-4) var(--sp-2);
  border-top: 1px solid var(--filet);
}
/* L'image d'un bouton, pas un bouton : il n'est donc PAS en Terre d'Oc. Le seul
   orange du héros est « Rencontrer l'équipe », à gauche — deux oranges de même
   poids sur un même écran, et aucun ne dit plus où cliquer. */
.console-action {
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: 0.02em;
  color: var(--chaux);
  border: 1px solid var(--filet-clair);
  background: rgba(255, 255, 255, 0.05);
  padding: var(--sp-2) var(--sp-5);
  border-radius: var(--r-sm);
}

/* --- La planche des quatorze -----------------------------------------------
   Un portrait, un prénom, une fonction. Sept colonnes sur grand écran : deux
   rangées de sept lisent mieux que quatre rangées de trois — on voit l'équipe,
   pas une liste. */

.planche {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--sp-6) var(--sp-5);
  margin-bottom: var(--sp-8);
}
.tete {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  text-align: center;
  color: var(--chaux);
  padding: var(--sp-4) var(--sp-2);
  border-radius: var(--r-lg);
  transition: background-color var(--t-hover) var(--ease), transform var(--t-hover) var(--ease);
}
.tete:hover {
  background: rgba(255, 255, 255, 0.04);
  transform: translateY(-3px);
  color: var(--chaux);
}
.tete .portrait {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  box-shadow: var(--sh-2);
}
.tete .nom-agent {
  font-size: var(--fs-lg);
}
.tete-fonction {
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: var(--fs-2xs);
  line-height: 1.35;
  letter-spacing: var(--tr-surtitre);
  text-transform: uppercase;
  color: var(--accent, var(--galet-fonce));
  /* Deux lignes réservées. « Agent Devis » tient sur une, « Agent Documents »
     sur deux : sans cette réserve, les deux rangées de la planche ne
     s'alignent plus et l'œil lit un décalage là où il n'y a qu'un mot de plus. */
  min-height: 2.7em;
  text-wrap: balance;
}

/* --- Le schéma d'architecture ----------------------------------------------
   Il se lit de GAUCHE À DROITE, dans le sens du travail : ce qui entre, qui le
   reçoit, comment c'est réparti, qui exécute, où ça atterrit.

   ATTENTION — Aucun portrait ici, et c'est une règle de la charte : un portrait sert à
   identifier un agent, pas à décorer un diagramme. Les chevrons entre colonnes
   sont dessinés en CSS — ils portent le sens de lecture, donc ils disparaissent
   quand la grille se replie en pile verticale sur téléphone. */

.archi {
  display: grid;
  /* Cinq colonnes de largeurs INÉGALES : elles ne portent pas la même quantité
     d'information. Les pôles ont besoin de deux lignes de texte, les outils
     d'assez de largeur pour que leurs pastilles se rangent par deux. */
  grid-template-columns: 0.86fr 1fr 1.2fr 1fr 1.24fr;
  gap: var(--sp-6);
  list-style: none;
  margin: 0 0 var(--sp-7);
  padding: 0;
  counter-reset: none;
}
.archi-col {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.archi-col + .archi-col::before {
  content: '';
  position: absolute;
  left: calc(var(--sp-6) / -2);
  top: calc(var(--sp-7) + var(--sp-3));
  width: 7px;
  height: 7px;
  transform: translateX(-3px) rotate(45deg);
  border-top: 1px solid var(--filet-clair);
  border-right: 1px solid var(--filet-clair);
}
.archi-col .surtitre {
  margin: 0 0 var(--sp-2);
}

.archi-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.archi-liste li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--filet);
  border-radius: var(--r-sm);
  background: var(--ardoise);
  font-size: var(--fs-sm);
  color: var(--galet);
}
.archi-liste .ico {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--galet-fonce);
}

.archi-coeur {
  padding: var(--sp-6) var(--sp-5);
  border: 1px solid var(--accent);
  border-radius: var(--r-lg);
  background: var(--terre-a06);
  box-shadow: var(--arete);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.archi-nom {
  font-family: var(--font-titre);
  font-weight: 800;
  font-size: var(--fs-lg);
  letter-spacing: var(--tr-titre);
  color: var(--chaux);
}
.archi-role {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--chaux);
}

.archi-poles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.archi-poles li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-5);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--ardoise);
}
.archi-poles .legende {
  line-height: 1.4;
}

.archi-agents {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-content: flex-start;
}
.archi-agents li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* Les outils : un nuage d'étiquettes, pas une colonne de lignes. Vingt et une
   entrées empilées feraient une colonne trois fois plus haute que ses voisines,
   et le schéma cesserait de se lire de gauche à droite. */
.archi-outils {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-content: flex-start;
}

/* --- Grilles éditoriales --------------------------------------------------- */

.grille-2,
.grille-3,
.grille-4 {
  display: grid;
  gap: var(--sp-6);
}
.grille-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grille-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grille-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grille-agents {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-6);
}

.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-9);
  align-items: start;
}
.split-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--sp-9);
  align-items: start;
}
.split-hero > div:first-child {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

/* Les cartes du site portent leur propre respiration : la primitive `.carte` ne
   pose ni rembourrage ni disposition, elle ne donne que la matière. */
.sec .carte:not(.carte-agent):not(.bento-cellule):not(.jour-corps) {
  padding: var(--sp-7);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.carte h3 {
  margin: 0;
}
.carte p {
  margin: 0;
}
.carte-suite {
  margin-top: auto;
  padding-top: var(--sp-3);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: var(--fs-2xs);
  letter-spacing: var(--tr-surtitre);
  text-transform: uppercase;
  color: var(--accent, var(--galet-fonce));
}
/* Le chevron de suite avance de trois pixels au survol : c'est le seul
   mouvement d'une carte cliquable, et il dit dans quel sens on va. */
.carte-suite::after {
  transition: transform var(--t-fast) var(--ease);
}
.carte.cliquable:hover .carte-suite::after {
  transform: rotate(-135deg) translate(-3px, 3px);
}

/* La pastille d'icône. Un carré arrondi, un filet, l'icône en Terre d'Oc — ou
   en couleur de pôle quand le bloc en porte une. */
.pastille-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: var(--r-md);
  border: 1px solid var(--filet);
  background: rgba(255, 255, 255, 0.035);
  color: var(--accent, var(--terre));
}
.pastille-ico .ico {
  width: 20px;
  height: 20px;
}

/* Une rangée d'étiquettes : traits d'un agent, outils connectés, villes
   couvertes. Les étiquettes sont des `.chip` du socle ; il ne reste ici que la
   façon dont elles se rangent. */
.rangee-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Le cran « large » : une étiquette qui porte un nom d'outil, pas un adjectif. */
.rangee-chips.large .chip {
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--fs-sm);
}

/* --- La carte d'agent ------------------------------------------------------
   La primitive donne la structure ; le site ajoute l'identité en colonne à
   droite du portrait, et la flèche de suite en bas. */

.carte-agent {
  color: var(--chaux);
}
.carte-agent:hover {
  color: var(--chaux);
}
.carte-agent .identite {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 0;
}
.carte-agent .citation {
  flex: 1;
}
.carte-agent .carte-suite {
  border-top: 1px solid var(--filet);
  padding-top: var(--sp-4);
}

/* Le bloc du cœur. Il ne se compare à aucun autre agent, donc il ne prend pas
   la même forme : portrait à gauche, texte au large. */
.coeur-bloc {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-8);
  align-items: center;
  padding: var(--sp-8);
}
.coeur-texte {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.coeur-bloc .portrait {
  --taille: 168px;
}

.citation-forte {
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: var(--fs-xl);
  line-height: 1.3;
  letter-spacing: var(--tr-titre);
  color: var(--accent, var(--terre));
  margin: 0;
}

/* --- Le catalogue par pôle ------------------------------------------------- */

.catalogue {
  display: flex;
  flex-direction: column;
  gap: var(--sp-9);
}
.bloc-pole-tete {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-6);
  padding-left: var(--sp-5);
  border-left: 3px solid var(--accent);
}
.bloc-pole-tete .surtitre {
  color: var(--accent);
  margin: 0;
}
.bloc-pole-tete .chapo {
  font-size: var(--fs-lg);
}

/* La barre de filtre, injectée par `site.js`. Absente sans script, et c'est
   voulu : la page affiche alors les quatorze agents, soit le résultat exact
   d'un filtre « tous ». Les boutons sont des `.chip` du socle — la forme
   existe, on ne la redessine pas ici. */
.filtre-catalogue {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-7);
}
.filtre-catalogue .chip {
  min-height: 34px;
  cursor: pointer;
}

/* --- La fiche d'agent ------------------------------------------------------ */

.fiche-grille {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--sp-9);
  align-items: center;
}
.fiche-texte {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.fiche-texte .surtitre {
  margin: 0;
}
.fiche-portrait {
  display: flex;
  justify-content: flex-end;
}
.fiche-portrait .portrait {
  --taille: 100%;
  width: min(340px, 100%);
  height: auto;
  aspect-ratio: 1;
  border-radius: var(--r-xl);
  border-width: 2px;
  box-shadow: var(--sh-4);
}

.fiche-aside {
  padding: var(--sp-7);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.faits {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.faits > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-5);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--filet);
}
.faits > div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.faits dt {
  font-size: var(--fs-sm);
  color: var(--galet-fonce);
}
.faits dd {
  margin: 0;
  text-align: right;
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--chaux);
}
.faits.serres > div {
  padding: var(--sp-2) 0;
}

/* La journée type, sur la fiche d'agent. */
.journee {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-6);
}
.journee li {
  padding-top: var(--sp-5);
  border-top: 1px solid var(--filet);
}
.journee .donnee {
  color: var(--terre);
  display: block;
  margin-bottom: var(--sp-3);
}
.journee p {
  margin: 0;
}

/* --- Le bento de la plateforme --------------------------------------------- */

.bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
}
.bento-cellule {
  padding: var(--sp-7);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.bento-cellule.est-large {
  grid-column: span 2;
}

/* --- Les trois actes ------------------------------------------------------- */

.actes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-6);
}
.acte {
  position: relative;
  overflow: hidden;
}
.acte-n {
  position: absolute;
  top: var(--sp-6);
  right: var(--sp-7);
  font-family: var(--font-titre);
  font-weight: 800;
  font-size: var(--fs-4xl);
  line-height: 1;
  color: var(--filet);
}
.acte-titre {
  font-size: var(--fs-2xl);
}

/* --- La chaîne chantier → facture ------------------------------------------ */

.chaine {
  list-style: none;
  margin: 0 0 var(--sp-6);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.chaine-etape {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  padding: var(--sp-5) var(--sp-6);
  border: 1px solid var(--filet);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  background: var(--ardoise);
}
.chaine-etape > div {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 0;
}
.chaine-etape .nom-agent {
  font-size: var(--fs-lg);
}
.chaine-etape .texte {
  margin-top: var(--sp-2);
}

/* --- Étapes, semaine, chronologie ------------------------------------------ */

.etapes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-5);
}
.etape {
  padding: var(--sp-7);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.etape-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--terre-a40);
  background: var(--terre-a10);
  color: var(--terre);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.etape .surtitre {
  margin: var(--sp-3) 0 0;
}

.semaine {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.jour {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
}
.jour-corps {
  padding: var(--sp-7);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.jour-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
}
.jour-tete .surtitre {
  margin: 0;
}

.chrono {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-6);
}
.chrono li {
  padding: var(--sp-7);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.chrono .surtitre {
  margin: 0;
}

/* --- Les piliers, dans une zone accentuée ---------------------------------- */

.pilier {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.pilier h3 {
  margin: 0;
  text-wrap: balance;
}
/* Même raison que pour la planche : dans une rangée de trois ou quatre, un
   titre sur deux lignes décalerait le paragraphe de ses voisins. */
.grille-3 .pilier h3,
.grille-4 .pilier h3 {
  min-height: 2.3em;
}
.pilier p {
  margin: 0;
}
.pilier-donnee {
  color: var(--terre);
  font-size: var(--fs-lg);
}
.piliers-detail .carte {
  gap: var(--sp-3);
}

/* La zone accentuée : UNE par page. La rupture ne vient pas d'un aplat orange —
   la charte interdit une couleur de pôle en aplat plein — mais d'une surface
   Ardoise bordée haut et bas, qui interrompt le fil Nuit. */
.sec-accent {
  background: var(--ardoise);
  border-top: 1px solid var(--filet-clair);
  border-bottom: 1px solid var(--filet-clair);
  box-shadow: var(--arete);
}
.accent-tete {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  max-width: 58ch;
  margin-bottom: var(--sp-8);
}
.accent-tete .chapo {
  max-width: 62ch;
}

/* --- Les chiffres ---------------------------------------------------------- */

.chiffres {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: var(--sp-6);
}
.chiffres .indicateur + .indicateur {
  border-left: 1px solid var(--filet);
}
.chiffres .chiffre {
  color: var(--terre);
}
.chiffres .libelle {
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: var(--fs-2xs);
  letter-spacing: var(--tr-surtitre);
  text-transform: uppercase;
  color: var(--chaux);
}

/* --- Listes cochées, notes ------------------------------------------------- */

.liste-cochee {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.liste-cochee.serree {
  gap: var(--sp-3);
}
.liste-cochee li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--galet);
}
.liste-cochee.serree li {
  font-size: var(--fs-sm);
}
.liste-cochee strong {
  color: var(--chaux);
  font-weight: 600;
}
.liste-cochee .coche {
  margin-top: 0.42em;
  color: var(--terre);
}

.note {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  margin: var(--sp-6) 0 0;
  padding: var(--sp-5) var(--sp-6);
  border: 1px solid var(--filet);
  border-left: 3px solid var(--terre);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--ardoise);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--galet);
  max-width: 78ch;
}
.note strong {
  color: var(--chaux);
}
.note .ico {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 3px;
  color: var(--terre);
}

/* --- La FAQ ----------------------------------------------------------------
   En `<details>` natif : le navigateur gère déjà le clavier, l'état et
   l'accessibilité, et le contenu reste dans le document pour Google même
   replié. Un accordéon fait main perd les trois. */

.faq {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.faq-item {
  border: 1px solid var(--filet);
  border-radius: var(--r-md);
  background: var(--ardoise);
  transition: border-color var(--t-hover) var(--ease);
}
.faq-item[open] {
  border-color: var(--filet-clair);
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  padding: var(--sp-5) var(--sp-6);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: var(--fs-lg);
  letter-spacing: var(--tr-titre);
  color: var(--chaux);
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-plus {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
}
.faq-plus::before,
.faq-plus::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  border-radius: var(--r-pill);
  background: var(--terre);
  transition: transform var(--t-fast) var(--ease);
}
.faq-plus::after {
  transform: rotate(90deg);
}
.faq-item[open] .faq-plus::after {
  transform: rotate(0);
}
.faq-reponse {
  padding: 0 var(--sp-6) var(--sp-6);
}
.faq-reponse p {
  margin: 0;
  max-width: 72ch;
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--galet);
}

/* --- Les voies de contact --------------------------------------------------
   Trois colonnes, et la voie principale prend la LIGNE entière au-dessus. En
   quatre colonnes avec une carte à cheval sur deux, la quatrième voie retombait
   seule sur une deuxième ligne, étroite et orpheline — elle avait l'air d'un
   oubli plutôt que d'un choix. */

.voies {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
}
.voie {
  color: var(--chaux);
}
.voie:hover {
  color: var(--chaux);
}
.voie.est-phare {
  grid-column: 1 / -1;
  border-color: var(--terre-a40);
}

/* --- Le panneau visuel ----------------------------------------------------- */

.panneau-visuel {
  padding: var(--sp-7);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  align-self: start;
}
.panneau-visuel .btn {
  align-self: flex-start;
}

.decision {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border: 1px solid var(--filet);
  border-radius: var(--r-md);
  background: var(--nuit);
}
.decision-tete {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.decision-qui {
  display: flex;
  flex-direction: column;
  margin-right: auto;
  min-width: 0;
}
.decision-qui b {
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--chaux);
}
.decision-objet {
  margin: 0;
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--chaux);
}
.decision-corps {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--galet);
}
.decision-meta {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--filet);
  font-size: var(--fs-xs);
  color: var(--galet-fonce);
}
.decision-meta span {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.decision-meta .ico {
  width: 14px;
  height: 14px;
}
.decision-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
/* Ces trois-là ne sont pas des boutons : ce sont des `<span>` dans une
   illustration. On leur retire le curseur de la primitive pour ne pas promettre
   un clic qui n'existe pas. */
.decision-actions .btn {
  cursor: default;
  pointer-events: none;
}

/* --- Le programme d'une formation ------------------------------------------ */

.programme {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
}
.programme li {
  padding: var(--sp-7);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.programme ul {
  margin: 0;
  padding-left: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.code {
  color: var(--terre);
  letter-spacing: 0.06em;
}
.carte-formation {
  color: var(--chaux);
}
.carte-formation:hover {
  color: var(--chaux);
}
.prix-unite {
  color: var(--galet-fonce);
}

/* --- Le tableau ------------------------------------------------------------
   La forme vient des primitives (`.tableau`, colonnes `.nombre` en chiffres
   tabulaires alignés à droite). Il ne reste ici que le cadre qui le fait
   défiler : un tableau de cinq colonnes ne rentre pas sur un téléphone, et sans
   ce cadre c'est la PAGE entière qui part de travers. */

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--filet);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-6);
}
.table-scroll .tableau tbody tr:last-child td {
  border-bottom: 0;
}
/* Le nom d'une formation est un lien, mais six liens orange dans une colonne
   font une colonne orange : Terre d'Oc cesse d'y désigner quoi que ce soit. Le
   lien se lit en Chaux et ne s'allume qu'au survol. */
.table-scroll .tableau td a {
  color: var(--chaux);
}
.table-scroll .tableau td a:hover {
  color: var(--terre);
}

/* --- Les pages de texte long (légales, régionales, à propos) ---------------
   Le corps est `.md`, une primitive du socle : largeur de ligne bornée, tailles
   de titre bornées, débordement horizontal bloqué. Ce qui suit ne règle que ce
   qui lui est extérieur. */

/* Un bloc de texte introduit par son propre titre, hors du flux `.md`. */
.bloc-texte {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.bloc-texte h2 {
  margin: 0;
}
.sec .md h2 {
  margin-top: var(--sp-7);
}
.sec .md h2:first-child {
  margin-top: 0;
}
.legal-date {
  margin: var(--sp-5) 0 0;
  font-family: var(--font-donnee);
  font-size: var(--fs-sm);
  color: var(--galet-fonce);
}
.page-legal .titre-hero {
  font-size: var(--fs-4xl);
}

.plan {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-8) var(--sp-6);
}
.plan-col h2 {
  margin: 0 0 var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--filet);
}
.plan-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.plan-col a {
  font-size: var(--fs-sm);
  color: var(--galet);
}
.plan-col a:hover {
  color: var(--terre);
}

/* --- La bande d'appel ------------------------------------------------------ */

.bande-cta {
  padding: var(--sp-9) 0;
}
.cta-verre {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: var(--sp-9);
  align-items: center;
  padding: var(--sp-8);
  border-radius: var(--r-xl);
}
.cta-copie {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.cta-copie .surtitre {
  margin: 0;
}
.cta-faits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.cta-faits li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--filet);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--galet);
}
.cta-faits strong {
  color: var(--chaux);
}
.cta-faits .ico {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 2px;
  color: var(--terre);
}

.rangee-btn.centre {
  justify-content: center;
}
.grille-2 + .rangee-btn,
.grille-3 + .rangee-btn,
.grille-4 + .rangee-btn,
.bento + .rangee-btn,
.table-scroll + .rangee-btn,
.finance + .rangee-btn,
.pastilles + .rangee-btn {
  margin-top: var(--sp-8);
}

/* --- Le pied de page ------------------------------------------------------- */

.pied {
  margin-top: var(--sp-9);
  border-top: 1px solid var(--filet);
  padding-bottom: var(--sp-8);
}
.pied .reassurance {
  margin-bottom: var(--sp-9);
}
.pied .reassurance > div {
  padding-left: 0;
}
.pied-haut {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--sp-9);
  padding-bottom: var(--sp-8);
}
.pied-marque {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.pied-marque .texte {
  font-size: var(--fs-sm);
  max-width: 46ch;
}
.pied-contact {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  font-size: var(--fs-sm);
}
.pied-contact li {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  color: var(--galet);
}
.pied-contact a {
  color: var(--galet);
}
.pied-contact a:hover {
  color: var(--terre);
}
.pied-contact .ico {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--galet-fonce);
}

.pied-cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-6);
}
.pied-col h3 {
  margin: 0 0 var(--sp-5);
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: var(--fs-2xs);
  letter-spacing: var(--tr-surtitre);
  text-transform: uppercase;
  color: var(--chaux);
}
.pied-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.pied-col a {
  font-size: var(--fs-sm);
  color: var(--galet);
}
.pied-col a:hover {
  color: var(--terre);
}

.pied-bas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4) var(--sp-7);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--filet);
}
.pied-bas p {
  margin: 0;
}
/* La signature éditeur passe en premier et prend toute la largeur : c'est la
   mention obligatoire, pas une ligne de bas de page parmi d'autres. */
.signature-editeur {
  flex-basis: 100%;
  font-size: var(--fs-md);
}
.pied-bas .legende a {
  color: var(--galet);
}
.pied-bas .legende a:hover {
  color: var(--terre);
}

/* --- L'apparition ----------------------------------------------------------
   `.reveal` est posée par `site.js` À L'EXÉCUTION, jamais dans le HTML produit.
   Écrite à la construction, elle masquerait le contenu pour tout lecteur qui
   n'exécute pas de script — robots d'indexation compris. */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--t-slow) var(--ease),
    transform var(--t-slow) var(--ease);
}
.reveal.est-visible {
  opacity: 1;
  transform: none;
}

/* --- Adaptatif -------------------------------------------------------------
   Trois seuils, pas huit. 1080 replie les grandes grilles, 860 passe en une
   colonne et sort la navigation dans un tiroir, 560 resserre les écarts. */

@media (max-width: 1080px) {
  .archi {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-6);
  }
  .archi-col + .archi-col::before {
    display: none;
  }
  .planche {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .grille-4,
  .voies,
  .etapes,
  .journee,
  .plan {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .voie.est-phare {
    grid-column: 1 / -1;
  }
  .grille-3,
  .grille-agents,
  .actes,
  .chrono,
  .programme {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bento-cellule.est-large {
    grid-column: span 2;
  }
  .pied-haut {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-8);
  }
  .titre-hero {
    font-size: var(--fs-4xl);
  }
}

@media (max-width: 860px) {
  /* La navigation devient un tiroir. La case à cocher l'ouvre : pas de script,
     donc pas de téléphone sans navigation si le script tombe. */
  .nav-burger {
    display: flex;
  }
  .nav {
    position: fixed;
    inset: calc(var(--touch) + var(--sp-5)) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: var(--sp-5) var(--sp-6) var(--sp-7);
    background: var(--nuit);
    border-bottom: 1px solid var(--filet);
    box-shadow: var(--sh-3);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition:
      transform var(--t-hover) var(--ease),
      opacity var(--t-hover) var(--ease),
      visibility var(--t-hover) var(--ease);
  }
  .nav a {
    padding: var(--sp-5) 0;
    font-size: var(--fs-lg);
    border-bottom: 1px solid var(--filet);
  }
  .nav a.est-actif::after {
    display: none;
  }
  .nav-open:checked ~ .entete-inner .nav {
    transform: none;
    opacity: 1;
    visibility: visible;
  }
  .nav-open:checked ~ .entete-inner .nav-burger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .nav-open:checked ~ .entete-inner .nav-burger span:nth-child(2) {
    opacity: 0;
  }
  .nav-open:checked ~ .entete-inner .nav-burger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
  .entete-actions {
    display: none;
  }

  .hero-grille,
  .split,
  .split-hero,
  .fiche-grille,
  .cta-verre {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-8);
  }
  .fiche-portrait {
    justify-content: flex-start;
  }
  .fiche-portrait .portrait {
    width: min(260px, 60%);
  }
  .coeur-bloc {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-6);
    padding: var(--sp-7);
  }
  .coeur-bloc .portrait {
    --taille: 128px;
  }
  .archi {
    grid-template-columns: minmax(0, 1fr);
  }
  .planche {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-5) var(--sp-4);
  }
  .chiffres {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-5);
  }
  .chiffres .indicateur + .indicateur {
    border-left: 0;
  }
  .chiffres .indicateur {
    padding: var(--sp-5);
  }
  .journee {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-5);
  }
  .chaine-etape {
    align-items: flex-start;
  }
}

@media (max-width: 560px) {
  .sec,
  .bande-cta {
    padding: var(--sp-8) 0;
  }
  .hero,
  .page-hero {
    padding: var(--sp-8) 0;
  }
  .wrap {
    padding: 0 var(--sp-5);
  }
  .titre-hero {
    font-size: var(--fs-3xl);
  }
  .titre-section {
    font-size: var(--fs-3xl);
  }
  /* Les titres légaux sont des mots longs et composés, pas des accroches :
     « Politique de confidentialité », « Conditions générales de vente ». Un
     cran de moins les fait tenir sans les couper. */
  .page-legal .titre-section {
    font-size: var(--fs-2xl);
  }
  .grille-2,
  .grille-3,
  .grille-4,
  .grille-agents,
  .voies,
  .etapes,
  .actes,
  .chrono,
  .programme,
  .bento,
  .plan,
  .pied-cols {
    grid-template-columns: minmax(0, 1fr);
  }
  .bento-cellule.est-large,
  .voie.est-phare {
    grid-column: auto;
  }
  .planche {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .sec .carte:not(.carte-agent):not(.bento-cellule):not(.jour-corps),
  .carte-agent,
  .bento-cellule,
  .jour-corps,
  .etape,
  .chrono li,
  .programme li,
  .fiche-aside,
  .panneau-visuel,
  .cta-verre {
    padding: var(--sp-6);
  }
  .jour {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-4);
  }
  .chaine-etape {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-4);
  }
  .acte-n {
    font-size: var(--fs-3xl);
    right: var(--sp-6);
  }
  .faq-item summary {
    font-size: var(--fs-base);
    padding: var(--sp-5);
  }
  .faq-reponse {
    padding: 0 var(--sp-5) var(--sp-5);
  }
  .console {
    padding: var(--sp-4);
  }
  .hero-preuves {
    gap: var(--sp-4);
    flex-direction: column;
  }
  /* En une colonne, plus rien ne s'aligne côte à côte : la réserve de deux
     lignes ne ferait qu'ajouter du vide. */
  .grille-3 .pilier h3,
  .grille-4 .pilier h3 {
    min-height: 0;
  }
}