/* ============================================================
   Reverall
   Système « Signal » — variante Or & Nuit (par défaut) — implémentation de naix-docs/site/charte-graphique-2027.md

   Trois voix typographiques : le grotesque affirme, la monospace régit,
   la serif italique prend la parole.
   Un écran = un aplat. La couleur identifie, elle ne décore pas.
   Aucune webfont, aucune dépendance réseau, aucun asset binaire.
   ============================================================ */

:root {
  /* ---- Neutres : l'encre est bleue ---- */
  --encre: #122C48;              /* 12,94:1 sur papier */
  --encre-douce: #24456A;
  --papier: #F7F5F0;
  --papier-clair: #FDFCF9;
  --blanc: #FFFFFF;
  --gris-chaud: #5C6270;         /* 5,57:1 sur papier */
  --gris-clair: #A8BACD;         /* 7,14:1 sur l'encre */
  --filet: #E2DED4;

  /* ---- Couleur principale : l'or, en quatre valeurs ----
     L'or est une couleur claire : elle ne peut pas porter de texte blanc
     (2,13:1) ni s'écrire sur du papier (1,94:1). D'où la dissociation
     surface / écriture / contraste. Voir la charte, §3. */
  --or: #FF992A;                 /* surface : aplats, pastilles, boutons pleins */
  --or-texte: #9A560C;           /* écriture et tracés sur fond clair, 5,16:1 */
  --or-contraste: #122C48;       /* ce qui s'écrit SUR l'or, 6,65:1 */
  --or-vif: #FF992A;             /* signes tracés sur fond sombre, 7,79:1 */
  --or-sombre: #D97F12;
  --or-pale: #FDF2E2;

  /* ---- Couleurs d'identification des offres ---- */
  --marine: #1B4B87;             /* 8,74:1 sur blanc, 8,02:1 sur papier */
  --marine-pale: #DDE7F5;        /* 11,27:1 avec l'encre, 6,94:1 avec le marine */
  --sauge: #0E6B62;
  --sauge-pale: #D5E8E4;
  --terracotta: #9C3F2E;         /* 6,64:1 sur blanc, 6,10:1 sur papier */
  --terracotta-pale: #F7E8E1;    /* 11,80:1 avec l'encre, 5,24:1 avec la terracotta */
  --prune: #6B2F52;
  --prune-pale: #EFE0E8;
  --safran: #DFA02C;
  --safran-pale: #FAEDD3;

  /* Troisième régime de chaque teinte : le FILET. Ni la surface, ni le pâle
     de fond — la valeur d'un trait d'un pixel qui doit se voir sans crier.
     Chacune est la couleur fondue à 45 % dans le filet neutre #E2DED4 :
     la carte reste un objet de papier, et l'œil lit quand même de quelle
     offre il s'agit avant d'avoir lu le titre.

     L'or part de sa valeur brunie #9A560C, pas de #FF992A : un filet tiré
     de l'or pur ressortirait deux fois plus clair que les trois autres et
     la carte « automatisation » paraîtrait moins cadrée que ses voisines.
     C'est la règle du §3.2 de la charte — l'or est une couleur claire, il
     fonce dès qu'il devient un signe — appliquée à un trait d'un pixel.

     La terracotta fait l'exception inverse : fondue à 45 % elle donnait
     #C39689, à six points de vert du filet de l'or. Or les deux cartes se
     superposent dans la colonne de gauche de la grille 2×2 de l'accueil —
     01 séminaire au-dessus de 03 automatisation — et le trait ne disait plus
     de quelle offre il s'agissait. Elle est donc fondue à 55 % : le filet
     fonce et rougit, au prix d'un poids visuel un peu supérieur à celui de
     ses trois voisins. Un filet qui n'identifie pas ne sert à rien. */
  --marine-filet: #889CB1;
  --sauge-filet: #83AAA1;
  --or-filet: #C2A17A;
  --terracotta-filet: #BC8779;   /* 55 %, pas 45 % : voir la note ci-dessous */
  --prune-filet: #AC8F9A;

  /* ---- Couleur de contexte : redéfinie par page ou par section ----
     Trois rôles distincts, parce qu'une couleur ne peut pas tout faire :
       --accent           surface (aplat, pastille, fond de bouton)
       --accent-texte     pour écrire ou tracer SUR un fond clair
       --accent-contraste pour écrire SUR --accent
     L'or, couleur claire, dissocie les trois. Une couleur sombre comme le
     vermillon de la variante alternative replie les deux premiers l'un sur
     l'autre et met le troisième au blanc — le système la couvre sans effort. */
  --accent: var(--or);
  --accent-texte: var(--or-texte, var(--or));
  --accent-contraste: var(--or-contraste, var(--blanc));
  --accent-sombre: var(--or-sombre);
  --accent-pale: var(--or-pale);
  --accent-filet: var(--or-filet);

  /* Base sombre : deux niveaux, comme les grands aplats de la référence.
     Le hero et le pied de page descendent d'un cran. */
  --fond-sombre: #122C48;
  --fond-sombre-profond: #0C1F35;

  /* Couleur des signes tracés et des accents posés sur un fond sombre. */
  --signe: var(--or-vif);
  /* Pastille de bouton posée sur un fond sombre, et ce qui s'écrit dessus. */
  --pastille-sombre: var(--or);
  --pastille-sombre-contraste: var(--or-contraste);

  /* ---- Couleur d'action : identique sur toutes les pages ----
     La couleur de page (--accent) colore le contexte ; la décision garde
     la couleur de la marque. Ces jetons sont donc distincts de --accent. */
  --action: var(--or);
  --action-texte: var(--or-texte, var(--or));
  --action-contraste: var(--or-contraste, var(--blanc));
  --action-sombre: var(--or-sombre);

  /* ---- Typographie ---- */
  --sans: system-ui, -apple-system, "Helvetica Neue", "Inter", "Segoe UI", Roboto, Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* ---- Grille ---- */
  --largeur-site: 74rem;
  --largeur-large: 84rem;
  --largeur-lecture: 44rem;
  --gouttiere: clamp(1.1rem, 4vw, 2.5rem);

  /* ---- Espacement ---- */
  --esp-1: 0.5rem;
  --esp-2: 1rem;
  --esp-3: 1.6rem;
  --esp-4: 2.6rem;
  --esp-5: clamp(3.5rem, 8vw, 6.5rem);   /* gouttière de colonne, grands écarts */
  --esp-marche: clamp(1.4rem, 2.5vw, 2rem); /* écart entre deux marches du parcours */

  /* ---- Rythme des bandes ----
     Une seule valeur de rembourrage de section (l'ancien --esp-5, 104 px à
     1440) tenait tant que les textes étaient longs. Depuis l'allègement de
     l'été 2026, une bande sur deux porte moins de 300 px de contenu : à 104 px
     en haut ET en bas, la moitié de la bande est du vide, et deux bandes de
     même aplat qui se suivent laissent 208 px sans rien pour dire où l'une
     finit. D'où trois valeurs au lieu d'une.

       --esp-bande        le défaut : une bande qui porte une grille ou une liste ;
       --esp-bande-dense  une bande de transition — un chapeau, un titre, un
                          paragraphe, un lien — qui n'a pas de quoi remplir 84 px ;
       --esp-couture      ce qui reste quand deux bandes de MÊME aplat se
                          touchent : le vide seul ne les sépare plus, c'est un
                          filet qui s'en charge, et il n'a pas besoin de 200 px
                          pour se voir.

     Le hero garde une valeur à lui, plus ample que le reste : c'est la seule
     bande qui doit tenir seule dans le premier écran. */
  --esp-bande: clamp(3.25rem, 6.5vw, 5.25rem);
  --esp-bande-dense: clamp(2.5rem, 5vw, 3.5rem);
  --esp-couture: clamp(1.75rem, 3.5vw, 2.75rem);
  --esp-hero: clamp(3.5rem, 7vw, 6.5rem);

  /* ---- Rembourrage intérieur des surfaces ----
     Huit valeurs sur mesure cohabitaient — 1.7/1.6/1.8, 2.1/1.7/1.7,
     2.2/1.8/1.9, 2.1/1.6/1.5, 1.8/1.6/1.4, 1.6/1.8, 1.8/2, --esp-4 — pour
     deux formes seulement : la carte posée dans une grille, et le pavé qui
     tient toute la largeur. Une par forme suffit. */
  --pad-carte: clamp(1.4rem, 2.5vw, 1.75rem);
  --pad-pave: clamp(1.8rem, 4vw, 2.75rem);

  /* ---- Rayons ----
     Deux valeurs pour les surfaces, et elles disent la taille de l'objet :
     --r-md pour ce qui tient dans une grille (carte, vignette, image),
     --r-lg pour le pavé pleine largeur. --r-xl n'est plus employé : à 48 px
     il faisait passer le pavé pour un objet d'une autre famille que la carte
     posée juste au-dessus — c'est visible sur /offres/, où les quatre marches
     à 22 px précèdent immédiatement deux blocs qui étaient à 48. */
  --r-xs: 6px;
  --r-sm: 12px;
  --r-md: 22px;
  --r-lg: 34px;
  --r-pilule: 999px;

  /* ---- Micro-libellé monospace ----
     Le même rôle — un libellé de registre, en capitales — s'écrivait en douze
     réglages : 0.72 / 0.74 / 0.76 / 0.78 rem, interlettrage 0.06 à 0.16 em.
     Deux d'entre eux se croisaient dans la même carte à 1 px et 0.02 em près.
     Un rôle, un réglage. --texte-mono est son pendant en bas de casse, pour
     les notes et les mentions. */
  --label: 0.74rem;
  --label-tracking: 0.12em;
  --texte-mono: 0.78rem;

  /* Les chiffres monospace, sur trois échelles nommées au lieu de quatre
     valeurs éparses : le marqueur d'étape, le numéro de carte, le numéro de
     page. Toutes à -0.04em d'interlettrage, là où il y en avait trois. */
  --num-etape: 1.6rem;
  --num-carte: clamp(2rem, 4vw, 2.6rem);
  --num-page: clamp(2.6rem, 7vw, 4.5rem);

  /* ---- Liens ----
     Le mot garde l'encre, le trait porte la couleur. Colorer le mot ET le
     souligner donne deux signaux pour une seule information, et l'or bruni sur
     le papier crème salissait la ligne. Le survol épaissit le trait et le
     sature : c'est là que la couleur arrive. */
  --lien-texte: var(--encre);
  --lien-trait: color-mix(in srgb, var(--accent-texte) 42%, transparent);
  --lien-trait-actif: var(--accent-texte);
}

/* Classes de contexte : à poser sur <body> ou sur une <section>.
   Tout le contenu se recolore — tracés, puces, bandeaux, numéros, filets. */

.accent-or {
  --accent: var(--or);
  --accent-texte: var(--or-texte, var(--or));
  --accent-contraste: var(--or-contraste, var(--blanc));
  --accent-sombre: var(--or-sombre);
  --accent-pale: var(--or-pale);
  --accent-filet: var(--or-filet);
}

.accent-marine {
  --accent: var(--marine);
  --accent-texte: var(--marine-texte, var(--marine));
  --accent-contraste: var(--marine-contraste, var(--blanc));
  --accent-sombre: #143A68;
  --accent-pale: var(--marine-pale);
  --accent-filet: var(--marine-filet);
}

.accent-sauge {
  --accent: var(--sauge);
  --accent-texte: var(--sauge-texte, var(--sauge));
  --accent-contraste: var(--sauge-contraste, var(--blanc));
  --accent-sombre: #0A4F48;
  --accent-pale: var(--sauge-pale);
  --accent-filet: var(--sauge-filet);
}

.accent-terracotta {
  --accent: var(--terracotta);
  --accent-texte: var(--terracotta-texte, var(--terracotta));
  --accent-contraste: var(--terracotta-contraste, var(--blanc));
  --accent-sombre: #7A3124;
  --accent-pale: var(--terracotta-pale);
  --accent-filet: var(--terracotta-filet);
}

.accent-prune {
  --accent: var(--prune);
  --accent-texte: var(--prune-texte, var(--prune));
  --accent-contraste: var(--prune-contraste, var(--blanc));
  --accent-sombre: #4E203C;
  --accent-pale: var(--prune-pale);
  --accent-filet: var(--prune-filet);
}

/* ============================================================
   Base
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Titres : grotesque, graisse haute, approche resserrée ---------- */

h1, h2, h3, h4 {
  font-family: var(--sans);
  margin: 0 0 var(--esp-3);
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.3rem, 5vw, 3.6rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.03em;
}

h2 {
  font-size: clamp(1.8rem, 3.6vw, 2.7rem);
  font-weight: 750;
  line-height: 1.1;
  letter-spacing: -0.025em;
  max-width: 30ch;
}

h3 {
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin-bottom: var(--esp-1);
}

h4 {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* La serif garde une voix, mais une seule : celle des citations. */
blockquote {
  font-family: var(--serif);
  font-style: italic;
  margin: 0 0 var(--esp-3);
  line-height: 1.4;
  text-wrap: balance;
}

/* `pretty` interdit le mot seul en dernière ligne. Il ne s'applique qu'aux
   quelques dernières lignes d'un paragraphe, contrairement à `balance` qui
   égalise tout le bloc et ne convient qu'aux titres. */
p {
  margin: 0 0 1em;
  text-wrap: pretty;
}

a {
  color: var(--lien-texte);
  text-decoration-color: var(--lien-trait);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color 0.18s ease, text-decoration-color 0.18s ease;
}

a:hover {
  color: var(--lien-texte);
  text-decoration-color: var(--lien-trait-actif);
  text-decoration-thickness: 2px;
}

/* L'enfoncement au clic ne concerne que les cibles-boutons, pas les liens en ligne. */
.btn:active,
.btn-fleche:active,
.nav-cta:active,
.tag:active,
.skip-link:active,
.carte-lien:active,
button:active { transform: scale(0.96); }

:focus-visible {
  outline: 2px solid var(--accent-texte);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

ul, ol { padding-left: 1.3rem; }
li { margin-bottom: 0.35rem; }

hr {
  border: none;
  border-top: 1px solid var(--filet);
  margin: var(--esp-4) 0;
}

strong { font-weight: 700; }

code, .mono {
  font-family: var(--mono);
  font-size: 0.86em;
}

img { max-width: 100%; }

/* ============================================================
   Utilitaires
   ============================================================ */

.container {
  max-width: var(--largeur-site);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.lecture {
  max-width: var(--largeur-lecture);
}

.muted { color: var(--gris-chaud); }

/* La phrase de conclusion d'une section tient sur la largeur du bloc qu'elle
   commente, pas sur la colonne de lecture : coupée à 44rem, une phrase courte
   se casse au milieu. `balance` répartit les lignes si elle doit tout de même
   passer à la ligne. */
.phrase-pleine {
  max-width: none;
  text-wrap: balance;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--fond-sombre-profond);
  color: var(--papier);
  padding: 0.7rem 1.3rem;
  border-radius: var(--r-pilule);
  z-index: 200;
  text-decoration: none;
  font-weight: 650;
}

.skip-link:focus {
  left: 0.75rem;
  top: 0.75rem;
}

/* Texte réservé aux lecteurs d'écran : le logo étant posé en masque CSS,
   il n'a pas de contenu lisible et le nom de la marque passe par ici. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Chapeau de section : la voix monospace, celle du registre de mission.

   L'alignement est en tête, pas au centre : sur deux lignes — « DIRIGEANTS ET
   RESPONSABLES / MÉTIER », sur /contact/ — un centrage posait la pastille
   entre les deux lignes, à côté de rien. La marge haute la recentre
   optiquement sur la PREMIÈRE ligne, dont la boîte fait 1.65 em. */
.kicker {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-family: var(--mono);
  font-size: var(--label);
  font-weight: 500;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--accent-texte);
  margin-bottom: var(--esp-3);
}

.kicker::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  margin-top: calc((1.65em - 0.5rem) / 2);
  border-radius: var(--r-pilule);
  background: var(--accent-texte);
  flex: none;
}

/* ============================================================
   Signes tracés — soulignage, encerclement, flèche
   Trois SVG dessinés pour la marque, posés en masque : la couleur vient
   de --accent, jamais du fichier. Un seul signe par section.
   ============================================================ */

.trace,
.cercle {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.trace::after {
  content: "";
  position: absolute;
  left: -0.06em;
  right: -0.06em;
  bottom: -0.16em;
  height: 0.24em;
  background-color: var(--couleur-signe, var(--accent-texte));
  -webkit-mask-image: var(--svg-trace);
  mask-image: var(--svg-trace);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  pointer-events: none;
}

.cercle::after {
  content: "";
  position: absolute;
  left: -0.32em;
  right: -0.32em;
  top: -0.22em;
  bottom: -0.22em;
  background-color: var(--couleur-signe, var(--accent-texte));
  -webkit-mask-image: var(--svg-cercle);
  mask-image: var(--svg-cercle);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  pointer-events: none;
}

.fleche-deco {
  display: block;
  width: clamp(4.5rem, 8vw, 7rem);
  height: clamp(2.2rem, 4vw, 3.5rem);
  margin-bottom: 0.6rem;
  background-color: var(--couleur-signe, var(--accent-texte));
  -webkit-mask-image: var(--svg-fleche-deco);
  mask-image: var(--svg-fleche-deco);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

:root {
  --svg-trace: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M3.5 6.4c26-3.4 62 2.6 96-1.1 24-2.6 63 1.4 97-1.6'/%3E%3Cpath d='M11 11.6c33-3 79 2.4 116-1 22-2 51 1.6 69-.6'/%3E%3C/g%3E%3C/svg%3E");
  --svg-cercle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80' preserveAspectRatio='none'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' d='M64 6C33 9 8 22 6 41c-2 21 34 34 96 34 54 0 94-13 96-31 2-19-31-33-83-36'/%3E%3C/svg%3E");
  --svg-fleche-deco: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 58'%3E%3Cg fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7c28-5 62 4 82 32'/%3E%3Cpath d='M70 34l18 8 2-20'/%3E%3C/g%3E%3C/svg%3E");
  --svg-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M4 12h14M12.5 6l6 6-6 6'/%3E%3C/svg%3E");
}

/* ============================================================
   En-tête — collant, avec CTA en pilule
   ============================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--papier);
  border-bottom: 1px solid var(--filet);
}

.header-inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem 2rem;
  min-height: 4.5rem;
  padding-block: 0.8rem;
}

/* ---- Marque ----
   Le logo est posé en deux couches de masque superposées, chacune tirant sa
   couleur d'un jeton : le pictogramme suit la couleur d'action de la variante
   en cours (or par défaut, vermillon sous .theme-vermillon), le mot suit
   l'encre. Un SVG chargé en <img> n'hériterait d'aucune variable ; le masque,
   si. Les deux couches partagent le viewBox du logo complet, ce qui les cale
   l'une sur l'autre sans calcul d'alignement.

   Les tracés sont en data URI, comme tous les signes de cette feuille : un
   masque pointant vers un fichier externe est refusé par les navigateurs quand
   la page est ouverte en file://, et le site doit rester ouvrable d'un
   double-clic. Ils sont repris à l'identique de assets/img/logo-reverall.svg,
   qui reste la source de référence pour les usages hors site. */
/* L'alignement baseline ne sert plus qu'un seul élément visible : la marque
   n'est plus que le logo. Il est conservé tel quel, parce qu'une mention posée
   à côté du logo s'y cale d'elle-même — le logo n'a pas de texte, mais le bas
   de sa boîte coïncide au pixel près avec le pied des lettres de « reverall ». */
/* Le logo est un lien vers l'accueil, et il doit le dire. Il ne peut pas le
   dire par la couleur : §3.7 fixe celle du pictogramme et celle du mot, elles
   ne se recolorent pas au survol. Reste le filet de la navigation, qui est
   déjà le signe « ceci est un lien » de la barre — le logo se comporte donc
   comme une entrée de plus, sans en devenir une.

   Le filet est posé transparent au repos et non ajouté au survol : sinon le
   logo grandit de deux pixels quand la souris arrive, et toute la barre
   sursaute. */
.brand {
  text-decoration: none;
  color: var(--encre);
  display: inline-flex;
  align-items: baseline;
  gap: 0.49rem;
  border-bottom: 2px solid transparent;
  transition: border-color 0.18s ease;
}

.brand:hover {
  color: var(--encre);
  border-bottom-color: var(--filet);
}

.brand-logo {
  position: relative;
  display: block;
  width: 10.5rem;
  aspect-ratio: 473.111 / 80.23;
  flex: none;
}

.brand-logo span {
  position: absolute;
  inset: 0;
  -webkit-mask: var(--masque) no-repeat center / contain;
  mask: var(--masque) no-repeat center / contain;
}

.brand-picto {
  --masque: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 473.111 80.23'%3E%3Cg transform='translate(-154.803,-57.109)'%3E%3Cpath fill='%23000' d='M250.282,61.089 L250.282,136.044 L234.869,136.044 L234.869,95.464 L213.052,79.598 L213.052,102.967 L191.959,87.627 L191.959,110.997 L170.866,95.657 L170.866,136.044 L154.803,136.044 L154.803,61.089 L250.282,61.089 z'/%3E%3C/g%3E%3C/svg%3E");
  background: var(--action);
}

.brand-mot {
  --masque: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 473.111 80.23'%3E%3Cg transform='translate(-154.803,-57.109)'%3E%3Cpath fill='%23000' d='M286.272,91.03 L286.272,84.315 L269.601,84.315 L269.601,136.065 L286.272,136.065 L286.272,113.605 C286.272,108.627 287.314,99.597 296.344,98.671 C299.123,98.439 301.438,99.25 303.985,101.218 L310.121,87.441 C306.648,85.01 302.827,83.736 299.123,83.736 C294.376,83.736 289.05,85.588 286.272,91.03 z M345.2,104.691 C343.81,100.755 340.916,98.786 336.98,98.786 C332.581,98.786 329.455,101.102 328.297,104.691 z M336.517,83.273 C350.988,83.273 362.681,94.85 363.26,109.206 C363.376,111.984 362.681,115.805 362.681,115.805 L328.297,115.805 C329.339,119.278 332.581,121.593 337.327,121.593 C340.569,121.593 343.81,120.552 345.894,117.426 L358.977,125.182 C353.998,132.708 345.547,137.338 336.517,137.338 C321.698,137.338 309.774,125.182 309.774,110.248 C309.774,95.313 321.698,83.273 336.517,83.273 z M402.159,84.315 L419.988,84.315 L400.076,136.065 L383.173,136.065 L363.26,84.315 L381.089,84.315 L391.624,111.753 z M455.414,104.691 C454.025,100.755 451.131,98.786 447.195,98.786 C442.795,98.786 439.669,101.102 438.512,104.691 z M446.732,83.273 C461.203,83.273 472.896,94.85 473.475,109.206 C473.591,111.984 472.896,115.805 472.896,115.805 L438.512,115.805 C439.554,119.278 442.795,121.593 447.542,121.593 C450.784,121.593 454.025,120.552 456.109,117.426 L469.191,125.182 C464.213,132.708 455.762,137.338 446.732,137.338 C431.913,137.338 419.988,125.182 419.988,110.248 C419.988,95.313 431.913,83.273 446.732,83.273 z M497.208,91.03 C499.987,85.588 505.312,83.736 510.059,83.736 C513.763,83.736 517.584,85.01 521.057,87.441 L514.921,101.218 C512.374,99.25 510.059,98.439 507.28,98.671 C498.25,99.597 497.208,108.627 497.208,113.605 L497.208,136.065 L480.537,136.065 L480.537,84.315 L497.208,84.315 L497.208,91.03 z M559.262,104.691 C557.178,100.87 553.473,98.555 549.305,98.555 C543.169,98.555 538.075,103.765 538.075,110.248 C538.075,116.731 543.169,122.057 549.305,122.057 C553.473,122.057 557.178,119.625 559.262,115.921 z M559.377,84.431 L576.048,84.431 L576.048,136.065 L559.377,136.065 L559.377,133.402 C555.557,135.949 550.926,137.338 546.179,137.338 C532.055,137.338 520.594,125.182 520.594,110.248 C520.594,95.313 532.055,83.273 546.179,83.273 C550.926,83.273 555.557,84.662 559.377,87.209 z M585.426,69.149 L601.981,57.109 L601.981,136.065 L585.426,136.065 z M611.359,69.149 L627.914,57.109 L627.914,136.065 L611.359,136.065 z'/%3E%3C/g%3E%3C/svg%3E");
  background: var(--encre);
}

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 1.5rem;
}

.site-nav li { margin: 0; }

.site-nav a {
  color: var(--encre);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  padding-block: 0.55rem;
  border-bottom: 2px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.site-nav a:hover {
  color: var(--action-texte);
  border-bottom-color: var(--filet);
}

.site-nav a[aria-current="page"] {
  border-bottom-color: var(--action-texte);
  font-weight: 700;
}

/* Le CTA encadré de la navigation : pilule outline dans la couleur d'action. */
.site-nav .nav-cta,
.nav-cta {
  border: 2px solid var(--action-texte);
  border-radius: var(--r-pilule);
  color: var(--action-texte);
  padding: 0.5rem 1.1rem;
  font-weight: 700;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.site-nav .nav-cta:hover,
.nav-cta:hover {
  background: var(--action);
  color: var(--action-contraste);
  border-color: var(--action);
}

/* ---- Menu mobile ----
   Sous 48rem, la marque plus cinq liens plus le CTA ne tiennent pas sur une
   ligne. Le repli en `flex-wrap` les poussait sur deux lignes sans jamais
   assez d'écart entre elles : le soulignement du lien actif (ligne 1)
   recouvrait le haut du bouton CTA (ligne 2, qui commençait avant que la
   première ne soit finie). `<details>` remplace ce repli par un vrai menu
   qui se replie, sans script — voir le commentaire dans header.html. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--filet);
  border-radius: var(--r-xs);
  cursor: pointer;
  list-style: none;
}

.nav-toggle::-webkit-details-marker { display: none; }

.nav-toggle-trait,
.nav-toggle-trait::before,
.nav-toggle-trait::after {
  width: 1.3rem;
  height: 2px;
  background: var(--encre);
  border-radius: 1px;
}

.nav-toggle-trait {
  position: relative;
  display: block;
}

.nav-toggle-trait::before,
.nav-toggle-trait::after {
  content: "";
  position: absolute;
  left: 0;
  transition: transform 0.18s ease, top 0.18s ease, opacity 0.18s ease;
}

.nav-toggle-trait::before { top: -6px; }
.nav-toggle-trait::after { top: 6px; }

/* La croix de fermeture : les deux barres pivotent sur la barre centrale,
   qui s'efface pour ne pas épaissir le trait au croisement. */
.nav-mobile[open] .nav-toggle-trait { background: transparent; }
.nav-mobile[open] .nav-toggle-trait::before { top: 0; transform: rotate(45deg); }
.nav-mobile[open] .nav-toggle-trait::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 47.99rem) {
  .nav-toggle { display: inline-flex; }

  .site-nav { display: none; }

  /* Le panneau ne couvre plus toute la largeur : 30 %, accroché au bord droit,
     du côté du bouton qui l'ouvre. La page reste visible derrière, ce qui dit
     que le menu est un volet et non un écran de plus.

     Les 30 % ont un plancher, et ce n'est pas une précaution : le CTA « Parler
     de votre projet » a une largeur minimale incompressible — son mot le plus
     long, plus 1.1rem de padding de chaque côté, plus la bordure de la pilule.
     Le `<ul>` étant un conteneur flex en colonne, cette largeur minimale
     élargit la ligne flex et emporte toutes les entrées avec elle : sous
     ~350px de large, elles sortaient du panneau par la droite (8.6px de
     débord à 320px, 20.6px à 280px, le CTA finissant hors écran), et la
     pilule se cassait en quatre lignes empilées, une grande ellipse.

     10rem est la plus petite valeur qui tienne « votre projet » sur une ligne,
     donc le CTA sur deux. Le plancher ne joue qu'en dessous de 533px de large ;
     au-delà, les 30 % reprennent la main. Il est en `rem` et non en pixels
     parce que ce qu'il borne est en `rem` : une police par défaut plus grande
     déplace les deux ensemble. */
  .nav-mobile[open] ~ .site-nav {
    display: block;
    position: absolute;
    top: calc(100% + 0.8rem);
    right: 0;
    left: auto;
    width: max(30%, 10rem);
    background: var(--papier);
    border: 1px solid var(--filet);
    border-radius: var(--r-sm);
    padding: 0.6rem;
  }

  .site-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  /* `display: block` n'est pas cosmétique : sur un lien resté en `inline`, le
     `padding-block` déborde de la ligne sans la grandir. Les entrées du menu
     se chevauchaient alors de 14px chacune, et le CTA recouvrait « Manifeste »
     puis débordait sous la bordure du panneau. En bloc, chaque entrée occupe
     sa hauteur réelle et devient cliquable sur toute la largeur. */
  /* Le menu s'ouvre par le bouton en haut à droite : les entrées se rangent du
     même côté, sous le pouce qui vient de le toucher. */
  .site-nav a {
    display: block;
    padding-block: 0.7rem;
    text-align: right;
  }

  /* Seule exception au bloc pleine largeur : l'entrée de la page en cours. Son
     soulignement traverserait sinon tout le panneau et se lirait comme un filet
     de séparation, pas comme un repère. La cible tactile y perd de la largeur,
     sur la seule entrée qu'on n'a aucune raison de toucher. `margin-inline-start`
     la ramène contre le bord droit avec les autres.

     Le padding du bas passe à 0.2rem pour que le trait reste au ras du mot, et
     la marge reprend les 0.5rem retirés : l'espacement des entrées ne bouge
     pas, seul le soulignement remonte.

     `:not(.nav-cta)` parce que le CTA porte lui aussi `aria-current="page"`,
     sur /contact/. Ce qui est écrit ici vise le soulignement d'un lien texte ;
     appliqué à la pilule, le padding du bas la laissait avec 0.5rem en haut et
     0.2rem en bas, texte décentré dans son cadre. */
  .site-nav a[aria-current="page"]:not(.nav-cta) {
    width: fit-content;
    margin-inline-start: auto;
    padding-bottom: 0.2rem;
    margin-bottom: 0.5rem;
  }

  .site-nav .nav-cta {
    display: block;
    margin-top: 0.5rem;
    text-align: center;
  }
}

@media (min-width: 48rem) {
  .nav-mobile { display: none; }
}

/* ============================================================
   Aplats de section
   ============================================================ */

.section {
  padding-block: var(--esp-bande);
}

/* Une bande qui ne porte qu'un chapeau, un titre, un paragraphe et un lien.
   Elle existe pour faire passer d'une idée à la suivante, pas pour tenir un
   écran : à 84 px de rembourrage elle était faite de plus de moitié de vide. */
.section-dense {
  padding-block: var(--esp-bande-dense);
}

/* ---- La couture ----
   Deux bandes de MÊME aplat qui se suivent. Le système ne sépare les blocs
   que par le changement de couleur de fond ; quand il n'y en a pas, il ne
   reste que 168 px de blanc, et l'œil ne ferme pas le bloc. Mesuré sur
   l'accueil (« Ce qui peut changer » puis « Commençons par 30 minutes »),
   l'équipe (« L'histoire » puis « Les personnes »), le séminaire et la page
   assistants.

   La couture resserre le rembourrage et pose un filet à la place du vide. Le
   filet est DANS le conteneur, pas en pleine largeur : il se cale sur la
   colonne de texte, comme les autres traits du système.

   Le premier sélecteur dit « une bande sans classe d'aplat suivie d'une autre
   bande sans classe d'aplat ». Les quatre suivants disent la même chose pour
   chacun des aplats nommés. */
.section:not(.section-pale, .section-encre, .section-sombre, .section-accent)
  + .section:not(.section-pale, .section-encre, .section-sombre, .section-accent),
.section-pale + .section-pale,
.section-encre + .section-encre,
.section-sombre + .section-sombre,
.section-accent + .section-accent {
  /* La marge négative remonte la bande basse SUR le rembourrage bas de la
     bande haute, dont il ne reste que --esp-couture. C'est ce qui centre le
     filet dans la couture — contenu, 44 px, filet, 44 px, contenu — sans avoir
     à sélectionner la bande précédente. Les deux aplats sont identiques par
     construction, le chevauchement ne se voit donc pas. */
  margin-top: calc(var(--esp-couture) - var(--esp-bande));
  padding-top: 0;
}

.section:not(.section-pale, .section-encre, .section-sombre, .section-accent)
  + .section:not(.section-pale, .section-encre, .section-sombre, .section-accent) > .container::before,
.section-pale + .section-pale > .container::before,
.section-encre + .section-encre > .container::before,
.section-sombre + .section-sombre > .container::before,
.section-accent + .section-accent > .container::before {
  content: "";
  display: block;
  border-top: 1px solid var(--filet);
  margin-bottom: var(--esp-couture);
}

/* Aplat sombre. `.section-sombre` reste l'alias historique.
   Le filet y est redéfini pour la même raison que sur `.section-pale` : le
   beige de --filet est invisible sur la nuit. Les surcharges au cas par cas
   plus bas (`.etapes li`, `.def-liste dt`, `.livrables li`) deviennent
   redondantes, elles sont laissées : elles ne coûtent rien et documentent. */
.section-encre,
.section-sombre {
  background: var(--fond-sombre);
  color: var(--papier);
  --filet: var(--encre-douce);
}

/* Aplat pâle dans la couleur de contexte. Le filet y est redéfini : le beige
   du filet standard disparaîtrait sur un fond déjà teinté. */
.section-pale {
  background: var(--accent-pale);
  --filet: rgba(20, 16, 14, 0.14);
}

/* Un bloc pâle posé sur un aplat pâle disparaîtrait : il passe en blanc. */
.section-pale .fiche-conditions,
.section-pale .citation,
.section-pale .bloc:not(.bloc-encre) {
  background: var(--blanc);
}

.section-pale .carte-offre,
.section-pale .carte-membre,
.section-pale .fiche-assistant,
.section-pale .entree-contact,
.section-pale .parcours li {
  background: var(--blanc);
  border-color: var(--filet);
}

/* Aplat saturé dans la couleur de contexte. */
.section-accent {
  background: var(--accent);
  color: var(--accent-contraste);
  --filet: color-mix(in srgb, var(--accent-contraste) 28%, transparent);
}

/* --- Adaptation automatique du contenu sur aplat sombre --- */

.section-encre .kicker,
.section-sombre .kicker { color: var(--blanc); }
.section-encre .kicker::before,
.section-sombre .kicker::before { background: var(--signe); }
.section-encre .muted,
.section-sombre .muted { color: var(--gris-clair); }
/* Sur la nuit, le mot passe au papier et le trait au signe : même partage des
   rôles que sur le papier, transposé. */
.section-encre,
.section-sombre {
  --lien-texte: var(--blanc);
  --lien-trait: color-mix(in srgb, var(--signe) 55%, transparent);
  --lien-trait-actif: var(--signe);
}
.section-encre :focus-visible,
.section-sombre :focus-visible { outline-color: var(--blanc); }
.section-encre .btn:not(.btn-primaire),
.section-sombre .btn:not(.btn-primaire) { border-color: var(--papier); color: var(--papier); }
.section-encre .btn:not(.btn-primaire):hover,
.section-sombre .btn:not(.btn-primaire):hover { background: var(--papier); color: var(--encre); }
.section-encre .epigraphe,
.section-sombre .epigraphe { color: var(--papier); }
.section-encre .def-liste dd,
.section-sombre .def-liste dd,
.section-encre .livrables li,
.section-sombre .livrables li { color: var(--gris-clair); }
.section-encre .def-liste dt,
.section-sombre .def-liste dt { border-color: var(--encre-douce); color: var(--papier); }
.section-encre .livrables li,
.section-sombre .livrables li { border-color: var(--encre-douce); }
.section-encre .def-liste dd strong,
.section-sombre .def-liste dd strong,
.section-encre .livrables li strong,
.section-sombre .livrables li strong { color: var(--papier); }
.section-encre .trace::after,
.section-sombre .trace::after,
.section-encre .cercle::after,
.section-sombre .cercle::after,
.section-encre .fleche-deco,
.section-sombre .fleche-deco { background-color: var(--signe); }

/* --- Adaptation automatique du contenu sur aplat saturé --- */

.section-accent .kicker { color: var(--accent-contraste); }
.section-accent .kicker::before { background: var(--accent-contraste); }
.section-accent .muted { color: var(--accent-contraste); }
.section-accent {
  --lien-texte: var(--accent-contraste);
  --lien-trait: color-mix(in srgb, var(--accent-contraste) 45%, transparent);
  --lien-trait-actif: var(--accent-contraste);
}
.section-accent :focus-visible { outline-color: var(--accent-contraste); }
.section-accent .btn:not(.btn-primaire) { border-color: var(--accent-contraste); color: var(--accent-contraste); }
.section-accent .btn:not(.btn-primaire):hover { background: var(--accent-contraste); color: var(--accent); }
.section-accent .btn-primaire { background: var(--accent-contraste); border-color: var(--accent-contraste); color: var(--accent); }
.section-accent .btn-primaire:hover { background: var(--accent-contraste); border-color: var(--accent-contraste); color: var(--accent-sombre); }
.section-accent .epigraphe { color: var(--accent-contraste); }
.section-accent .trace::after,
.section-accent .cercle::after,
.section-accent .fleche-deco { background-color: var(--accent-contraste); }

/* ============================================================
   Hero
   ============================================================ */

/* 144 px de rembourrage haut, plus les 72 px de l'en-tête collant, posaient le
   titre à 216 px du haut de l'écran pour un contenu qui en fait souvent 350.
   --esp-hero ramène la bande à 104 px de part et d'autre : elle reste la plus
   ample du site sans repousser le titre hors du premier coup d'œil. */
.hero {
  background: var(--hero-fond, var(--fond-sombre-profond));
  color: var(--papier);
  padding-block: var(--esp-hero);
  position: relative;
  overflow: hidden;
  --lien-texte: var(--blanc);
  --lien-trait: color-mix(in srgb, var(--signe) 55%, transparent);
  --lien-trait-actif: var(--signe);
}

/* Variante : le hero prend la couleur d'identification de la page. */
.hero--accent {
  --hero-fond: var(--accent);
  color: var(--accent-contraste);
}

.hero h1 {
  font-size: clamp(2.7rem, 7vw, 5.25rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
  max-width: 24ch;
  margin-bottom: var(--esp-3);
}

/* L'accroche de l'accueil compte 81 signes, contre une trentaine sur les autres
   pages : à 5,25 rem elle tenait sur trois lignes, dont une pour le seul signe
   tracé (`.trace` est en white-space: nowrap, il ne se coupe jamais).

   Mesuré le 26 août 2026 dans le navigateur : à font-size 100 px, « ChatGPT
   s'arrête à la porte de votre entreprise. » mesure 2 012 px et « Nous
   continuons de l'autre côté. » 1 386 px. Le conteneur offre 1 104 px au plus
   (74 rem moins deux gouttières). D'où les deux bornes :

     min(6,2vw, …)  la phrase tracée, la plus contrainte puisqu'elle ne se coupe
                    pas, tient sur les écrans étroits : 6,2 vw × 13,86 = 0,86 vw
                    de large pour 0,92 vw disponibles ;
     …, 3,2rem      au-delà de 826 px de fenêtre, la taille se fige à 51,2 px :
                    la première phrase mesure alors 1 030 px et passe sous les
                    1 104 px du conteneur. C'est ce qui donne les deux lignes.

   La marge de 7 % n'est pas du luxe : la police est `system-ui`, donc Segoe UI
   sur Windows, plus large que l'Helvetica Neue d'un Mac.

   `text-wrap: wrap` annule le `balance` hérité des titres. Équilibrer les deux
   lignes coupait la première phrase en son milieu (« …de votre / entreprise.
   Nous continuons… ») et faisait démarrer le soulignement au milieu d'une
   ligne. Sans lui, chaque phrase occupe la sienne et le trait couvre
   exactement la seconde. */
.hero.hero--titre-long h1 {
  /* Deux classes : la règle doit l'emporter sur le `.hero h1 { font-size:
     2.25rem }` du bloc téléphone, en fin de feuille, qui a la même
     spécificité et gagnerait par l'ordre. */
  font-size: min(6.2vw, 3.2rem);
  max-width: none;
  text-wrap: wrap;
}

.hero .accent { color: var(--signe); }
.hero--accent .accent { color: var(--accent-contraste); }

.hero .trace::after,
.hero .cercle::after,
.hero .fleche-deco { background-color: var(--signe); }

.hero--accent .trace::after,
.hero--accent .cercle::after,
.hero--accent .fleche-deco { background-color: var(--accent-contraste); }

.hero-sub {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  line-height: 1.5;
  letter-spacing: -0.01em;
  max-width: 50ch;
  color: var(--gris-clair);
}

.hero--accent .hero-sub,
.hero--accent .hero-meta { color: var(--accent-contraste); }

.hero-meta {
  font-family: var(--mono);
  font-size: var(--label);
  font-weight: 500;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--blanc);
  margin-bottom: var(--esp-2);
}

.hero :focus-visible { outline-color: var(--blanc); }

.hero a:not(.btn):not(.btn-fleche):not(.carte-lien):not(.tag) { color: var(--blanc); }

.hero .btn:not(.btn-primaire) { border-color: var(--papier); color: var(--papier); }
.hero .btn:not(.btn-primaire):hover { background: var(--papier); color: var(--encre); }
.hero--accent .btn-primaire { background: var(--accent-contraste); border-color: var(--accent-contraste); color: var(--accent); }
.hero--accent .btn-primaire:hover { background: var(--accent-contraste); border-color: var(--accent-contraste); color: var(--accent-sombre); }

/* Hero long du manifeste */
.manifeste-hero {
  background: var(--fond-sombre-profond);
  color: var(--papier);
  padding-block: var(--esp-hero);
}

.manifeste-hero h1 {
  font-size: clamp(3.2rem, 11vw, 7rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.98;
  margin-bottom: var(--esp-2);
}

.manifeste-hero .sous-titre {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  color: var(--gris-clair);
  margin-bottom: var(--esp-2);
  max-width: 40ch;
}

.manifeste-hero .date {
  font-family: var(--mono);
  font-size: var(--label);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--signe);
}

.manifeste-hero .trace::after,
.manifeste-hero .cercle::after,
.manifeste-hero .fleche-deco { background-color: var(--signe); }

/* ============================================================
   Boutons
   ============================================================ */

.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
  margin-top: var(--esp-4);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.9rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--r-pilule);
  text-decoration: none;
  font-weight: 650;
  font-size: 0.98rem;
  letter-spacing: -0.01em;
  border: 2px solid var(--encre);
  color: var(--encre);
  background: transparent;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.1s ease;
}

.btn:hover {
  background: var(--encre);
  color: var(--papier);
}

.btn-primaire {
  background: var(--action);
  border-color: var(--action);
  color: var(--action-contraste);
}

.btn-primaire::after {
  content: "";
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
  background-color: currentColor;
  -webkit-mask-image: var(--svg-chevron);
  mask-image: var(--svg-chevron);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  transition: transform 0.18s ease;
}

.btn-primaire:hover {
  background: var(--action-sombre);
  border-color: var(--action-sombre);
  color: var(--action-contraste);
}

.btn-primaire:hover::after { transform: translateX(0.2rem); }

/* ---------- Le bouton-lien à pastille ----------
   Le geste signature : une pastille circulaire qui s'étire en pilule
   pleine au survol. Aucune image, aucun script. */

.btn-fleche {
  --pastille: 2.25rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--pastille);
  padding: 0.35rem calc(var(--pastille) + 0.85rem) 0.35rem 0.95rem;
  border-radius: var(--r-pilule);
  color: var(--accent-texte);
  font-weight: 650;
  font-size: 0.98rem;
  text-decoration: none;
  isolation: isolate;
  transition: color 0.28s ease, transform 0.1s ease;
}

.btn-fleche::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  width: var(--pastille);
  height: var(--pastille);
  border-radius: var(--r-pilule);
  background: var(--accent);
  transition: width 0.28s ease;
}

.btn-fleche::after {
  content: "";
  position: absolute;
  right: calc((var(--pastille) - 1.15rem) / 2);
  top: 50%;
  transform: translateY(-50%);
  width: 1.15rem;
  height: 1.15rem;
  background-color: var(--action-contraste);
  -webkit-mask-image: var(--svg-chevron);
  mask-image: var(--svg-chevron);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.btn-fleche:hover {
  color: var(--action-contraste);
}

.btn-fleche:hover::before { width: 100%; }

/* Sur aplat sombre ou saturé : la pastille passe en blanc, le chevron en fond. */
.section-encre .btn-fleche,
.section-sombre .btn-fleche,
.hero .btn-fleche { color: var(--blanc); }
.section-encre .btn-fleche::after,
.section-sombre .btn-fleche::after,
.hero .btn-fleche::after { background-color: var(--pastille-sombre-contraste); }
.section-accent .btn-fleche { color: var(--accent-contraste); }

/* Sur fond sombre, la pastille prend la couleur principale pleine, et le
   libellé qui s'y inscrit au survol prend --pastille-sombre-contraste :
   nuit sur l'or (6,65:1), blanc sur le vermillon (5,47:1). */
.section-encre .btn-fleche::before,
.section-sombre .btn-fleche::before,
.hero .btn-fleche::before { background: var(--pastille-sombre); }

.section-accent .btn-fleche::before,
.hero--accent .btn-fleche::before { background: var(--accent-contraste); }

.section-accent .btn-fleche::after,
.hero--accent .btn-fleche::after { background-color: var(--accent); }

.section-encre .btn-fleche:hover,
.section-sombre .btn-fleche:hover,
.hero .btn-fleche:hover { color: var(--pastille-sombre-contraste); }

.section-accent .btn-fleche:hover,
.hero--accent .btn-fleche:hover { color: var(--accent); }

/* ---------- Étiquettes ---------- */

.tag,
.badge-signature,
.badge-prealable {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  font-family: var(--mono);
  font-size: var(--label);
  font-weight: 500;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  padding: 0.3rem 0.8rem;
  border-radius: var(--r-pilule);
  border: 1.5px solid currentColor;
  color: var(--accent-texte);
  text-decoration: none;
  margin-bottom: var(--esp-2);
  transition: background-color 0.18s ease, color 0.18s ease;
}

.badge-signature { color: var(--action-texte); }
.badge-prealable { color: var(--gris-chaud); }

a.tag:hover {
  background: var(--accent);
  color: var(--accent-contraste);
}

/* ============================================================
   Les convictions du manifeste — la voix serif
   ============================================================ */

.convictions {
  list-style: none;
  padding: 0;
  margin: var(--esp-3) 0 var(--esp-4);
  counter-reset: conviction;
  max-width: 52rem;
}

.convictions li {
  counter-increment: conviction;
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  gap: 1.2rem;
  align-items: baseline;
  padding-block: 1.15rem;
  border-bottom: 1px solid var(--filet);
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  font-style: italic;
  line-height: 1.4;
}

.convictions li::before {
  content: "0" counter(conviction);
  font-family: var(--mono);
  font-style: normal;
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--accent-texte);
  letter-spacing: 0.08em;
}

/* ============================================================
   Parcours en quatre temps — aplats juxtaposés
   ============================================================ */

.parcours {
  list-style: none;
  padding: 0;
  margin: var(--esp-4) 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
}

.parcours li {
  margin: 0;
  background: var(--papier-clair);
  border: 1px solid var(--filet);
  border-radius: var(--r-md);
  padding: var(--pad-carte);
  transition: border-color 0.2s ease;
}

.parcours li:hover {
  border-color: var(--accent-texte);
}

.parcours .etape-num {
  font-family: var(--mono);
  font-size: var(--label);
  font-weight: 500;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--accent-texte);
  display: block;
  margin-bottom: 0.8rem;
}

.parcours h3 { margin-bottom: 0.4rem; }
.parcours p { margin: 0; color: var(--gris-chaud); font-size: 0.97rem; }

/* ============================================================
   Cartes d'offres — bandeau de couleur d'identification
   ============================================================ */

.cartes-offres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.2rem;
  margin-top: var(--esp-4);
}

/* Quatre cartes : 2×2 explicite, sinon auto-fit laisse une carte orpheline. */
@media (min-width: 48rem) {
  .cartes-offres--quatre { grid-template-columns: repeat(2, 1fr); }
}

/* Une carte qui prend toute la rangée. Sur l'accueil, la quatrième marche suit
   les deux premières : à une demi-largeur elle laissait la case voisine vide,
   et cette rangée à moitié pleine se lisait comme un oubli. En pleine largeur
   elle devient ce qu'elle est — un raccourci offert sous le parcours normal. */
@media (min-width: 48rem) {
  .carte-offre--large { grid-column: 1 / -1; }
}

.carte-offre {
  position: relative;
  background: var(--papier-clair);
  border: 1px solid var(--carte-filet, var(--filet));
  border-radius: var(--r-md);
  overflow: hidden;
  padding: var(--pad-carte);
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s ease, transform 0.12s ease;
}

/* Pas de bandeau en tête de carte. C'est le filet lui-même qui porte la
   teinte de l'offre, en sourdine, et qui se sature au survol — la couleur
   identifie toujours, elle a seulement cessé de se poser dessus comme une
   étiquette.

   Le survol ne déplace rien. Une carte qui saute de deux pixels sous le
   curseur fait bouger la page entière sur une grille de quatre, et c'est le
   tic le plus reconnaissable des bibliothèques de composants. Le seul
   mouvement autorisé est celui du clic, et il va vers l'intérieur —
   principe 5 de la charte : le mouvement confirme une action. */
.carte-offre:hover {
  border-color: var(--carte-texte, var(--accent-texte));
}

.carte-offre:active { transform: scale(0.995); }

/* Ces quatre règles portaient le nom du composant, si bien qu'un autre
   composant reprenant les mêmes classes d'offre — les marches du parcours —
   se retrouvait sans couleur. La couleur identifie l'offre, pas la carte. */
.carte-offre.seminaire, .marche.seminaire { --carte-filet: var(--terracotta-filet); --carte-texte: var(--terracotta); }
.carte-offre.pilote,    .marche.pilote    { --carte-filet: var(--sauge-filet);       --carte-texte: var(--sauge); }
.carte-offre.automatisation, .marche.automatisation { --carte-filet: var(--or-filet); --carte-texte: var(--or-texte, var(--or)); }
.carte-offre.assistants, .marche.assistants { --carte-filet: var(--marine-filet);    --carte-texte: var(--marine); }

.carte-offre .badge-signature { color: var(--sauge); }
.carte-offre.seminaire .badge-prealable { color: var(--terracotta); }

.carte-num {
  font-family: var(--mono);
  font-size: var(--num-carte);
  font-weight: 500;
  color: var(--carte-texte, var(--accent-texte));
  opacity: 0.28;
  line-height: 1;
  letter-spacing: -0.04em;
  margin: 0 0 0.7rem;
}

.carte-offre h3 { margin-bottom: 0.5rem; }

.carte-offre .pitch {
  flex: 1;
  color: var(--gris-chaud);
  margin-bottom: var(--esp-2);
}

.carte-meta {
  font-family: var(--mono);
  font-size: var(--texte-mono);
  color: var(--encre);
  border-top: 1px solid var(--filet);
  padding-top: 0.9rem;
  margin-bottom: 1rem;
  line-height: 1.7;
}

.carte-offre .carte-lien {
  --pastille: 2rem;
  position: relative;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: var(--pastille);
  padding: 0.3rem calc(var(--pastille) + 0.8rem) 0.3rem 0.9rem;
  margin-left: -0.9rem;
  border-radius: var(--r-pilule);
  color: var(--carte-texte, var(--accent-texte));
  font-weight: 650;
  font-size: 0.95rem;
  text-decoration: none;
  isolation: isolate;
  transition: color 0.28s ease;
}

.carte-offre .carte-lien::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  width: var(--pastille);
  height: var(--pastille);
  border-radius: var(--r-pilule);
  background: var(--carte-texte, var(--accent));
  transition: width 0.28s ease;
}

.carte-offre .carte-lien::after {
  content: "";
  position: absolute;
  right: calc((var(--pastille) - 1rem) / 2);
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  background-color: var(--carte-contraste, var(--blanc));
  -webkit-mask-image: var(--svg-chevron);
  mask-image: var(--svg-chevron);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.carte-offre .carte-lien:hover {
  color: var(--carte-contraste, var(--blanc));
  text-decoration: none;
}

.carte-offre .carte-lien:hover::before { width: 100%; }

/* ============================================================
   Méthode en six étapes
   ============================================================ */

.etapes {
  list-style: none;
  padding: 0;
  margin: var(--esp-4) 0 0;
  counter-reset: etape;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1.6rem 2.5rem;
}

.etapes li {
  counter-increment: etape;
  margin: 0;
  padding-top: 1rem;
  border-top: 2px solid var(--filet);
  position: relative;
}

.etapes li::before {
  content: "0" counter(etape);
  font-family: var(--mono);
  font-size: var(--num-etape);
  font-weight: 500;
  color: var(--accent-texte);
  display: block;
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: 0.6rem;
}

.etapes h3 { font-size: 1.12rem; margin-bottom: 0.35rem; }
.etapes p { margin: 0; color: var(--gris-chaud); font-size: 0.97rem; }

.section-encre .etapes li,
.section-sombre .etapes li { border-top-color: var(--encre-douce); }
.section-encre .etapes li::before,
.section-sombre .etapes li::before { color: var(--signe); }
.section-encre .etapes p,
.section-sombre .etapes p { color: var(--gris-clair); }

/* Quatre critères, deux par deux. En auto-fit ils tombaient en 3 + 1 sur un
   grand écran : le quatrième restait seul sur sa ligne et le bloc perdait son
   équerre. Deux colonnes de largeur égale le referment en carré. */
@media (min-width: 40rem) {
  .etapes--paires { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   Chiffre-preuve
   ============================================================ */

.chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--esp-3) var(--esp-4);
  margin: var(--esp-4) 0 0;
  list-style: none;
  padding: 0;
}

.chiffres li { margin: 0; }

/* Deux preuves plutôt que trois : `auto-fit` étire alors chaque colonne sur la
   moitié de la bande, tandis que la note reste bornée à 26 caractères. La
   colonne fait le double de son contenu, la note se replie au milieu, et il
   reste deux trous. Les colonnes se calent donc sur ce qu'elles portent. */
.chiffres--paires {
  grid-template-columns: repeat(auto-fit, minmax(13rem, 22rem));
  justify-content: start;
}

.chiffre-libelle {
  display: block;
  font-family: var(--mono);
  font-size: var(--label);
  font-weight: 500;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--gris-chaud);
  margin-bottom: 0.5rem;
}

.chiffre {
  display: block;
  font-size: clamp(2.8rem, 7vw, 5rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--accent-texte);
  margin-bottom: 0.4rem;
}

.chiffre-note {
  display: block;
  font-size: 0.95rem;
  color: var(--gris-chaud);
  max-width: 26ch;
}

.section-encre .chiffre,
.section-sombre .chiffre { color: var(--signe); }
.section-encre .chiffre-libelle,
.section-sombre .chiffre-libelle,
.section-encre .chiffre-note,
.section-sombre .chiffre-note { color: var(--gris-clair); }
.section-accent .chiffre,
.section-accent .chiffre-libelle,
.section-accent .chiffre-note { color: var(--accent-contraste); }

/* ============================================================
   Bloc de mise en avant — pavé d'aplat à grand rayon
   ============================================================ */

.bloc {
  background: var(--accent-pale);
  border-radius: var(--r-lg);
  padding: var(--pad-pave);
  margin: var(--esp-4) 0;
}

.bloc-encre {
  background: var(--fond-sombre);
  color: var(--papier);
}

.bloc-encre .muted { color: var(--gris-clair); }
.bloc-encre a:not(.btn):not(.btn-fleche):not(.carte-lien):not(.tag) { color: var(--blanc); }
.bloc-encre .btn:not(.btn-primaire) { border-color: var(--papier); color: var(--papier); }
.bloc-encre .btn:not(.btn-primaire):hover { background: var(--papier); color: var(--encre); }
.bloc-encre :focus-visible { outline-color: var(--blanc); }
.bloc-encre .btn-fleche { color: var(--blanc); }
.bloc-encre .btn-fleche::after { background-color: var(--pastille-sombre-contraste); }
.bloc-encre .btn-fleche:hover { color: var(--pastille-sombre-contraste); }
.bloc-encre .btn-fleche::before { background: var(--pastille-sombre); }

/* ============================================================
   Bloc stack et promesses
   ============================================================ */

.promesses,
.livrables,
.card-list {
  list-style: none;
  padding: 0;
}

.promesses {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.7rem 2rem;
}

/* La liste ne pousse rien quand elle ferme un bloc, mais elle rend son air dès
   qu'un lien la suit : sur l'accueil, « Voir les options de protection des
   données » se posait au ras de la deuxième ligne de la première colonne et se
   lisait comme un quatrième élément de la liste. */
.promesses:not(:last-child) {
  margin-bottom: var(--esp-3);
}

/* Quatre promesses, deux par deux. En auto-fit elles s'alignaient à quatre de
   front, et chacune tombait sur trois lignes dans 250 px : la liste se lisait
   comme un tableau de mots coupés. Deux colonnes rendent à chaque promesse la
   largeur d'une phrase. */
@media (min-width: 48rem) {
  .promesses--paires { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.promesses li,
.card-list li {
  margin: 0;
  padding-left: 1.75rem;
  position: relative;
}

.promesses li::before,
.card-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: var(--r-pilule);
  background: var(--accent-texte);
}

.section-encre .promesses li::before,
.section-sombre .promesses li::before { background: var(--signe); }

/* ============================================================
   Citations — la voix serif
   ============================================================ */

/* La marge était à --esp-5, soit 104 px, et elle S'AJOUTAIT au rembourrage de
   la bande qui en mettait déjà autant : 208 px au-dessus de deux lignes de
   citation, et le même dessous. Elle se contente maintenant d'un cran de
   l'échelle ordinaire ; c'est la bande qui donne l'air, pas la citation. */
.epigraphe {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.35rem, 3vw, 2rem);
  line-height: 1.4;
  text-align: center;
  max-width: 34ch;
  margin: var(--esp-4) auto;
  padding: 0;
  color: var(--encre);
}

.epigraphe::before {
  content: "";
  display: block;
  width: 3.4rem;
  height: 0.65rem;
  margin: 0 auto var(--esp-3);
  background-color: var(--accent-texte);
  -webkit-mask-image: var(--svg-trace);
  mask-image: var(--svg-trace);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.section-encre .epigraphe::before,
.section-sombre .epigraphe::before { background-color: var(--signe); }
.section-accent .epigraphe::before { background-color: var(--accent-contraste); }

.citation {
  background: var(--accent-pale);
  border-radius: var(--r-lg);
  margin: var(--esp-4) 0;
  padding: var(--pad-carte);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.18rem;
  line-height: 1.5;
  color: var(--encre);
  max-width: var(--largeur-lecture);
}

.citation cite {
  display: block;
  font-family: var(--mono);
  font-style: normal;
  font-size: var(--texte-mono);
  color: var(--gris-chaud);
  margin-top: 0.8rem;
}

/* ============================================================
   Listes de livrables et de définitions
   ============================================================ */

.livrables {
  margin: var(--esp-3) 0;
}

.livrables li {
  margin: 0;
  padding: 0.8rem 0 0.8rem 1.75rem;
  border-bottom: 1px solid var(--filet);
  position: relative;
}

.livrables li:first-child { border-top: 1px solid var(--filet); }

.livrables li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.35rem;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: var(--r-pilule);
  background: var(--accent-texte);
}

.section-encre .livrables li::before,
.section-sombre .livrables li::before { background: var(--signe); }

.def-liste {
  margin: var(--esp-3) 0;
}

.def-liste dt {
  font-weight: 700;
  font-size: 1.08rem;
  letter-spacing: -0.01em;
  padding-top: 1rem;
  border-top: 1px solid var(--filet);
}

.def-liste dd {
  margin: 0.3rem 0 1rem;
  color: var(--gris-chaud);
}

/* ============================================================
   Fiche conditions — durée, ticket
   ============================================================ */

.fiche-conditions {
  background: var(--accent-pale);
  border-radius: var(--r-lg);
  padding: var(--pad-pave);
  margin: var(--esp-4) 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1.5rem 2.5rem;
}

.fiche-conditions .libelle {
  font-family: var(--mono);
  font-size: var(--label);
  font-weight: 500;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--gris-chaud);
  display: block;
  margin-bottom: 0.45rem;
}

.fiche-conditions .valeur {
  font-size: 1.35rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.fiche-conditions .valeur .prefixe {
  font-family: var(--mono);
  font-size: var(--texte-mono);
  font-weight: 500;
  color: var(--gris-chaud);
  margin-right: 0.4rem;
}

.fiche-conditions .precision {
  display: block;
  font-size: 0.88rem;
  color: var(--gris-chaud);
  margin-top: 0.3rem;
}

/* ============================================================
   Page manifeste
   ============================================================ */

/* Les propositions alternent papier / papier clair : c'est le changement
   d'aplat qui rythme la lecture longue, pas un filet. */
.proposition {
  padding-block: var(--esp-bande);
  scroll-margin-top: 6rem;
}

/* Le préambule ne porte que deux phrases : il annonce, il ne développe pas. */
.proposition-dense {
  padding-block: var(--esp-bande-dense);
}

.proposition:nth-of-type(even) {
  background: var(--papier-clair);
}

/* Dans une page de lecture longue, l'épigraphe se centre sur la colonne
   de texte, pas sur le conteneur : sinon elle flotte à droite du propos. */
.proposition .epigraphe {
  max-width: var(--largeur-lecture);
  margin-inline: 0;
}

.prop-num {
  font-family: var(--mono);
  font-size: var(--num-page);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--accent-texte);
  display: block;
  margin-bottom: var(--esp-2);
}

.proposition h2 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin-bottom: var(--esp-3);
  max-width: 26ch;
}

.proposition .ouverture {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--gris-chaud);
  margin-bottom: var(--esp-3);
  max-width: 46ch;
}

.prose {
  max-width: var(--largeur-lecture);
  font-size: 1.09rem;
  line-height: 1.75;
}


/* ============================================================
   Contrat de mission
   ============================================================ */

.contrat {
  background: var(--fond-sombre);
  color: var(--papier);
  border-radius: var(--r-lg);
  padding: var(--pad-pave);
  margin: var(--esp-4) 0;
}

.contrat-titre {
  font-family: var(--mono);
  font-size: var(--label);
  font-weight: 500;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--signe);
  margin-bottom: var(--esp-3);
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.contrat-titre::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--encre-douce);
}

.contrat ol {
  margin: 0;
  padding-left: 1.4rem;
  columns: 2;
  column-gap: 3rem;
}

.contrat ol li {
  margin-bottom: 0.7rem;
  break-inside: avoid;
}

.contrat ol li::marker {
  color: var(--signe);
  font-family: var(--mono);
  font-size: 0.85em;
}

@media (max-width: 44rem) {
  .contrat ol { columns: 1; }
}

/* ============================================================
   Contact
   ============================================================ */

/* Les cartes s'alignent en pied, comme celles des offres. `align-items: start`
   les laissait en dents de scie : sur /contact/, trois cartes bordées de
   hauteurs différentes, posées sur la même ligne, ne se lisent plus comme une
   rangée. C'est le seul endroit du site où la grille de cartes ne s'alignait
   pas. */
.entrees-contact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  align-items: stretch;
  gap: 1.2rem;
  margin-top: var(--esp-4);
}

.entree-contact {
  display: flex;
  flex-direction: column;
}

/* Le dernier élément de la carte est l'action : elle descend au bas de la
   carte, et les trois boutons s'alignent d'une carte à l'autre. */
.entree-contact > .btn,
.entree-contact > .btn-row {
  margin-top: auto;
  align-self: flex-start;
}

.entree-contact {
  position: relative;
  background: var(--papier-clair);
  border: 1px solid var(--carte-filet, var(--filet));
  border-radius: var(--r-md);
  overflow: hidden;
  padding: var(--pad-carte);
}

.entree-contact:first-child { --carte-filet: var(--or-filet);      --carte-texte: var(--or-texte, var(--or)); }
.entree-contact:last-child  { --carte-filet: var(--marine-filet); --carte-texte: var(--marine); }

.entree-contact h2 { font-size: 1.45rem; max-width: none; }

.formulaire {
  display: grid;
  gap: var(--esp-2);
  margin-top: var(--esp-3);
}

.formulaire label {
  display: block;
  font-weight: 650;
  font-size: 0.92rem;
  margin-bottom: 0.3rem;
}

.formulaire input,
.formulaire textarea {
  width: 100%;
  padding: 0.7rem 0.9rem;
  font: inherit;
  font-size: 0.98rem;
  color: var(--encre);
  background: var(--blanc);
  border: 1px solid var(--gris-chaud);
  border-radius: var(--r-xs);
}

.formulaire input:focus-visible,
.formulaire textarea:focus-visible {
  outline: 2px solid var(--accent-texte);
  outline-offset: 1px;
  border-color: var(--accent);
}

.note-formulaire {
  font-family: var(--mono);
  font-size: var(--texte-mono);
  line-height: 1.6;
  color: var(--gris-chaud);
  background: var(--papier);
  border: 1px solid var(--filet);
  border-radius: var(--r-sm);
  padding: 0.8rem 1rem;
  margin: 0;
}

/* ============================================================
   Pied de page
   ============================================================ */

.site-footer {
  background: var(--fond-sombre-profond);
  color: var(--papier);
  padding-block: var(--esp-bande) 2rem;
  margin-top: 0;
}

.footer-grille {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--esp-4) 2rem;
}

@media (max-width: 44rem) {
  .footer-grille { grid-template-columns: 1fr; }
}

/* Sur l'aplat sombre du pied de page, le mot s'écrit en papier ; le
   pictogramme garde sa couleur d'action, qui tient 7,79:1 sur le nuit. */
.footer-marque {
  display: flex;
  align-items: baseline;
  gap: 0.49rem;
  margin-bottom: var(--esp-2);
}

.footer-marque .brand-logo { width: 7.5rem; }

.site-footer .brand-mot { background: var(--papier); }

.site-footer p {
  color: var(--gris-clair);
  font-size: 0.95rem;
}

/* Pas de `max-width` : à 38ch la signature valait 315 px dans une colonne qui
   en fait 520, si bien qu'elle se coupait après « Vous » alors qu'il restait
   205 px de libres — et le paragraphe juste au-dessus, lui, occupait toute la
   colonne. C'est la colonne du pied de page qui borne la ligne, pas la
   signature. `balance` égalise les deux lignes qui restent. */
.footer-signature {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.45;
  color: var(--papier) !important;
  text-wrap: balance;
  margin-top: var(--esp-2);
}

/* La décision se prend sous la signature : un seul bouton dans le pied
   de page, retiré de la liste « Naviguer » pour ne pas le dire deux fois. */
.footer-cta { margin-top: var(--esp-3); }

/* Le pied de page souligne ses liens et les passe au signe : le bouton,
   lui, garde son contraste. */
.footer-cta .btn:hover {
  color: var(--action-contraste);
  text-decoration: none;
}

.site-footer h2 {
  font-family: var(--mono);
  font-size: var(--label);
  font-weight: 500;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--gris-clair);
  margin-bottom: var(--esp-2);
  max-width: none;
}

.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-footer li { margin-bottom: 0.5rem; }

.site-footer a {
  color: var(--papier);
  text-decoration: none;
  font-size: 0.95rem;
}

.site-footer a:hover {
  color: var(--signe);
  text-decoration: underline;
}

.site-footer :focus-visible { outline-color: var(--blanc); }

.footer-mentions {
  border-top: 1px solid var(--encre-douce);
  margin-top: var(--esp-4);
  padding-top: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
}

.footer-mentions p {
  font-family: var(--mono);
  font-size: var(--texte-mono);
  color: var(--gris-clair);
  margin: 0;
}

/* Le lien de la ligne légale suit sa ligne. `.site-footer a` pose 0,95 rem pour
   les colonnes de navigation ; ici, la ligne est en mono à 0,78 rem, et le lien
   ressortait d'un cran comme s'il était d'une autre police. Il reprend donc la
   taille du texte qui l'entoure, et garde le blanc qui le désigne comme lien. */
.footer-mentions a { font-size: inherit; }

/* Bascule de variante — outil de revue de direction artistique,
   à retirer une fois la variante tranchée. Un carré de couleur, sans
   libellé : celui de la variante vers laquelle on bascule. */
.footer-variante {
  display: flex;
  align-items: center;
  line-height: 1;
}

/* Le carré fait 15 px : le rembourrage porte la cible à 25 px. */
.bascule-variante {
  display: none;
  padding: 0.32rem;
  text-decoration: none;
}

.bascule-variante:hover { text-decoration: none; }

.bascule-carre {
  display: block;
  width: 0.95rem;
  height: 0.95rem;
  border: 1px solid var(--gris-clair);
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.bascule-variante:hover .bascule-carre {
  border-color: var(--papier);
  transform: scale(1.15);
}

/* On n'affiche que la bascule vers l'autre variante. Les valeurs sont
   écrites en dur : le carré montre la couleur de la variante visée, que
   les jetons de la variante active ne portent pas. */
.bascule-variante[data-cible="vermillon"] { display: block; }
.bascule-variante[data-cible="vermillon"] .bascule-carre { background: #C6301A; }

.theme-vermillon .bascule-variante[data-cible="vermillon"] { display: none; }
.theme-vermillon .bascule-variante[data-cible="or"] { display: block; }
.bascule-variante[data-cible="or"] .bascule-carre { background: #FF992A; }

/* ============================================================
   Divers
   ============================================================ */

.grille-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--esp-4) 3.5rem;
  margin-top: var(--esp-3);
}

.note-marge {
  font-family: var(--mono);
  font-size: var(--texte-mono);
  line-height: 1.7;
  color: var(--gris-chaud);
  border-left: 3px solid var(--filet);
  padding: 0.2rem 0 0.2rem 1rem;
  margin-top: var(--esp-4);
  max-width: var(--largeur-lecture);
}

.tableau-reserve {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--esp-3);
  font-size: 0.97rem;
}

.tableau-reserve th {
  text-align: left;
  font-family: var(--mono);
  font-size: var(--label);
  font-weight: 500;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--gris-chaud);
  border-bottom: 2px solid var(--encre);
  padding: 0.6rem 1rem 0.6rem 0;
}

.tableau-reserve td {
  border-bottom: 1px solid var(--filet);
  padding: 0.8rem 1rem 0.8rem 0;
  vertical-align: top;
}

.tableau-reserve td:first-child {
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ============================================================
   Les membres de l'équipe
   ============================================================ */

/* Chaque largeur est posée au calc, sur le gap, et jamais par « autant de
   cartes qu'il en tient » : le nombre de colonnes est décidé, pas subi. Si un
   effectif impair isole la dernière carte à deux colonnes, elle prend la
   rangée entière plutôt que d'y flotter à moitié.

   Trois colonnes au large, parce que l'équipe compte trois personnes. La
   version à sept membres montait à quatre et sautait le palier de trois, qui
   y laissait la septième carte seule ; c'est le seul réglage de cette feuille
   qui suive un effectif, et il se relit le jour où l'effectif change. */
.membres {
  list-style: none;
  padding: 0;
  margin: var(--esp-4) 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.2rem;
}

/* Une colonne */
.membres > .carte-membre {
  flex: 1 1 100%;
  min-width: 0;
}

/* Deux colonnes */
@media (min-width: 38rem) {
  .membres > .carte-membre {
    flex: 0 1 calc((100% - 1.2rem) / 2);
    max-width: calc((100% - 1.2rem) / 2);
  }

  .membres > .carte-membre:last-child:nth-child(odd) {
    flex-basis: 100%;
    max-width: 100%;
  }
}

/* Trois colonnes */
@media (min-width: 68rem) {
  .membres > .carte-membre,
  .membres > .carte-membre:last-child:nth-child(odd) {
    flex: 0 1 calc((100% - 2 * 1.2rem) / 3);
    max-width: calc((100% - 2 * 1.2rem) / 3);
  }
}

.carte-membre {
  position: relative;
  background: var(--papier-clair);
  border: 1px solid var(--accent-filet, var(--filet));
  border-radius: var(--r-md);
  overflow: hidden;
  padding: var(--pad-carte);
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s ease, transform 0.12s ease;
}

/* Même règle que sur les cartes d'offres : le filet se sature, le portrait
   retrouve ses couleurs, rien ne bouge. */
.carte-membre:hover {
  border-color: var(--accent-texte);
}

.carte-membre:active { transform: scale(0.995); }

.membre-photo {
  width: 5.5rem;
  height: 5.5rem;
  object-fit: cover;
  border-radius: var(--r-pilule);
  filter: grayscale(0.3);
  transition: filter 0.25s ease;
  margin-bottom: var(--esp-2);
}

.carte-membre:hover .membre-photo { filter: grayscale(0); }

.carte-membre h3 {
  margin: 0 0 0.3rem;
  font-size: 1.2rem;
}

.membre-role {
  font-family: var(--mono);
  font-size: var(--label);
  font-weight: 500;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--accent-texte);
  margin: 0 0 0.9rem;
  line-height: 1.5;
}

.carte-membre .apport {
  flex: 1;
  color: var(--gris-chaud);
  font-size: 0.97rem;
  margin: 0 0 var(--esp-2);
}

.membre-lien {
  font-family: var(--mono);
  font-size: var(--texte-mono);
  color: var(--gris-chaud);
  text-decoration: none;
  border-top: 1px solid var(--filet);
  padding-top: 0.8rem;
}

.membre-lien:hover {
  color: var(--accent-texte);
  text-decoration: underline;
}

/* ============================================================
   Les assistants — vignette, rangée, extrait de registre

   Deux familles de vignettes cohabitent sur le site, et la forme
   les sépare : le portrait d'un membre est un ROND, la vignette d'un
   assistant est un CARRÉ à rayon --r-md. C'est la seule chose qui
   distingue les deux à la volée, et elle porte le propos de la page
   « un assistant IA par collaborateur » : un assistant n'est pas
   une personne, c'est un poste.

   Le portrait est désaturé au repos et retrouve ses couleurs au
   survol (§6.6 de la charte). Les avatars ne subissent pas ce
   traitement : ce sont des illustrations, pas des photographies —
   les désaturer les salirait sans rien signifier.
   ============================================================ */

.avatar-assistant {
  width: 6.25rem;
  height: 6.25rem;
  object-fit: cover;
  border-radius: var(--r-md);
  border: 1px solid var(--filet);
  margin-bottom: var(--esp-2);
}

/* --- Extrait de registre --- */

/* Six fiches : 3 × 2 en grand, 2 × 3 en moyen, une colonne en petit.
   Paliers posés à la main plutôt qu'en auto-fit — même raison que la
   grille des membres : aucune largeur ne doit laisser une fiche
   orpheline en fin de rangée. */
.registre {
  list-style: none;
  padding: 0;
  margin: var(--esp-4) 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
}

@media (min-width: 38rem) {
  .registre { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 68rem) {
  .registre { grid-template-columns: repeat(3, 1fr); }
}

.fiche-assistant {
  position: relative;
  min-width: 0;   /* une piste de grille ne descend pas sous min-content sans ceci */
  background: var(--papier-clair);
  border: 1px solid var(--accent-filet, var(--filet));
  border-radius: var(--r-md);
  padding: var(--pad-carte);
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s ease;
}

.fiche-assistant:hover { border-color: var(--accent-texte); }

.fiche-assistant h3 {
  margin: 0 0 0.3rem;
  font-size: 1.15rem;
}

.fiche-assistant .mission {
  flex: 1;
  color: var(--gris-chaud);
  font-size: 0.97rem;
  margin: 0 0 var(--esp-2);
}

/* L'état est un statut de registre, pas une couleur d'identification :
   il se lit à la pastille ET au libellé, jamais à la couleur seule.
   Le safran est la teinte de signalement du système (§3.4) — employée
   ici en surface, où elle est valide, jamais en écriture. */
.etat {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--mono);
  font-size: var(--label);
  font-weight: 500;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--gris-chaud);
  border-top: 1px solid var(--filet);
  padding-top: 0.8rem;
  margin: 0;
}

.etat::before {
  content: "";
  flex: 0 0 auto;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: var(--r-pilule);
  background: var(--accent-texte);
}

.etat--supervision::before { background: var(--safran); }

.etat--close::before {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--gris-chaud);
}

/* --- Rangée compacte, pour évoquer l'équipe sans la détailler --- */

.assistants-rangee {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin: var(--esp-4) 0 var(--esp-3);
}

.assistants-rangee img {
  width: 5.25rem;
  height: 5.25rem;
  object-fit: cover;
  border-radius: var(--r-md);
  border: 1px solid var(--filet);
  margin: 0;
}

/* ============================================================
   Illustrations en papier découpé (§7 de la charte)

   Second registre visuel, distinct des aplats : une image posée
   sur la page, avec sa propre palette. Trois règles la gouvernent,
   et elles expliquent tout ce qui suit.

   Pas de bordure, pas d'ombre. Une carte a un contour parce qu'elle
   est une surface d'interface ; une illustration n'en est pas une —
   son fond #F7F8FA doit se fondre sur --papier #F7F5F0, et un filet
   la retransformerait en rectangle collé, ce que la §7.2 interdit.

   Aucun filtre. Même raison que pour .avatar-assistant : ce sont des
   illustrations, pas des photographies. Les désaturer les salirait
   sans rien signifier.

   Jamais sur un aplat sombre ni saturé (§7.1). Ces composants ne
   s'emploient donc que dans .section et .section-pale, et jamais
   dans une section qui porte déjà un signe tracé.
   ============================================================ */

.illustration {
  margin: var(--esp-4) auto;
  max-width: 34rem;
}

.illustration img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
}

/* --- Carrousel d'illustrations --- */

/* Deux modes, et le second n'existe que si le script s'exécute.

   Mode de base — scroll-snap horizontal, en CSS seul. Toutes les vues sont
   atteignables au doigt, à la molette et au clavier. C'est ce que voit un
   lecteur sans JavaScript, et rien n'y manque.

   Mode animé — le script pose `data-anime` et les vues s'empilent dans une
   seule cellule de grille, en fondu glissé. Plus rien ne défile, donc plus
   rien ne peut sauter : c'est ce qui distingue une transition d'un
   déplacement de page. */
.carrousel {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.carrousel::-webkit-scrollbar { display: none; }

.carrousel:focus-visible {
  outline: 2px solid var(--accent-texte);
  outline-offset: 3px;
}

.carrousel > li {
  scroll-snap-align: start;
  min-width: 0;
  display: grid;
  gap: var(--esp-3);
  align-content: start;
}

/* L'illustration tient une colonne bornée : au-delà, elle écrase le texte
   qu'elle est censée accompagner. Les deux partent du même bord haut — un
   titre centré sur une image haute flotte sans point d'appui. */
@media (min-width: 56rem) {
  .carrousel > li {
    grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
    gap: var(--esp-5);
    align-items: start;
    padding-inline: 4rem;
  }
}

@media (min-width: 80rem) {
  .carrousel > li { grid-template-columns: minmax(0, 27rem) minmax(0, 1fr); }
}

.carrousel .illustration {
  margin: 0;
  max-width: none;
}

/* Le titre d'une vue porte seul l'entrée de la page — la section n'a plus de
   titre visible. Il monte donc au-dessus d'un h3 ordinaire, sans aller
   jusqu'au h2 : la hiérarchie du document, elle, ne change pas. */
.carrousel h3 {
  font-size: clamp(1.6rem, 2.9vw, 2.4rem);
  font-weight: 750;
  line-height: 1.1;
  letter-spacing: -0.025em;
  max-width: 17ch;
  margin-bottom: var(--esp-2);
}

.carrousel p {
  font-size: 1.09rem;
  line-height: 1.75;
  color: var(--gris-chaud);
  margin: 0;
  max-width: 40ch;
}

/* --- Mode animé --- */

.carrousel[data-anime] {
  grid-auto-flow: row;
  grid-template-columns: 100%;
  overflow: hidden;
  scroll-snap-type: none;

  --glisse: 3rem;
  --pose: cubic-bezier(0.22, 1, 0.36, 1);   /* arrive vite, puis se pose */
  --duree-vue: 0.6s;
  --duree-image: 0.9s;
  --duree-texte: 0.5s;
}

/* Le sens du glissement suit le sens de la navigation : une vue qui arrive
   en reculant entre par la gauche. Sans cela, avancer et reculer produisent
   le même mouvement, et le geste ne veut plus rien dire. */
.carrousel[data-anime][data-sens="arriere"] { --glisse: -3rem; }

/* Trois états, et c'est le troisième qui fait le passage. La vue au repos
   attend du côté d'où elle viendra ; celle qui part s'en va du côté opposé.
   Avec les deux seuls états d'avant — visible, pas visible — l'entrante et la
   sortante glissaient dans la même direction : elles se croisaient au même
   endroit et il ne restait qu'un fondu sur place.

   Le repos n'a aucune transition, et c'est délibéré : quand la navigation
   change de sens, les vues en attente doivent basculer de l'autre côté sans
   se voir. Le script force un recalcul juste après avoir posé le sens et
   avant de distribuer les états — c'est ce saut muet qui garantit qu'une vue
   entre bien du côté d'où elle est censée venir. */
.carrousel[data-anime] > li {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateX(var(--glisse));
  transition: none;
}

/* Le `!important` des deux règles qui suivent : le reset global de
   `prefers-reduced-motion` (section Base) coupe toutes les transitions du site à
   0.01ms, avec !important lui aussi. Le carrousel est la seule chose du site
   qui bouge malgré ce réglage — la charte §7.4 dit pourquoi et ce que ça
   coûte — et le lever demande la même arme. Nulle part ailleurs. */
.carrousel[data-anime] > li[data-visible] {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity var(--duree-vue) var(--pose), transform var(--duree-vue) var(--pose),
              visibility 0s !important;
}

.carrousel[data-anime] > li[data-sortante] {
  transform: translateX(calc(-1 * var(--glisse)));
  transition: opacity var(--duree-vue) var(--pose), transform var(--duree-vue) var(--pose),
              visibility 0s linear var(--duree-vue) !important;
}

/* L'illustration entre en se posant : six pour cent de trop qui se résorbent,
   plus lentement que le glissement pour qu'on le sente sans le voir. Celle
   qui part reprend son avance, et s'éloigne en s'effaçant. Le débordement est
   coupé ici et pas sur `.illustration`, qui sert ailleurs sans cadre. */
.carrousel[data-anime] .illustration {
  overflow: hidden;
  border-radius: var(--r-md);
}

.carrousel[data-anime] > li img {
  transform: scale(1.06);
  transition: transform var(--duree-image) var(--pose) !important;
}

.carrousel[data-anime] > li[data-visible] img { transform: none; }

/* Le texte suit l'image d'un cheveu. C'est ce décalage qui donne à lire un
   passage là où l'arrivée simultanée ne montrait qu'un changement. Les délais
   portent le !important pour la même raison que les durées : sans lui, la
   déclaration abrégée ci-dessus les remettrait à zéro. */
.carrousel[data-anime] > li .carrousel-texte > h3,
.carrousel[data-anime] > li .carrousel-texte > p {
  opacity: 0;
  transform: translateY(0.6rem);
  transition: opacity var(--duree-texte) var(--pose), transform var(--duree-texte) var(--pose) !important;
}

.carrousel[data-anime] > li[data-visible] .carrousel-texte > h3,
.carrousel[data-anime] > li[data-visible] .carrousel-texte > p {
  opacity: 1;
  transform: none;
}

.carrousel[data-anime] > li[data-visible] .carrousel-texte > h3 { transition-delay: 0.1s !important; }
.carrousel[data-anime] > li[data-visible] .carrousel-texte > p { transition-delay: 0.18s !important; }

/* --- Le cadre, les flèches et les puces, posés par le script --- */

/* Sans JavaScript, rien de tout ceci n'existe : pas de bouton mort, pas de
   promesse d'un défilement qui n'aurait pas lieu. */
.carrousel-cadre {
  position: relative;
  display: grid;
  gap: var(--esp-4);
}

.carrousel-fleche {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 2px solid var(--accent-texte);
  border-radius: var(--r-pilule);
  background: var(--papier-clair);
  color: var(--accent-texte);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Le signe est un SVG, pas un caractère : un glyphe de flèche ne se centre
   pas dans un rond — sa boîte porte les métriques de la police, il se pose
   sur la ligne de base et retombe sous le milieu. */
.carrousel-fleche svg {
  width: 1.15rem;
  height: 1.15rem;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.carrousel-fleche:hover {
  background: var(--accent-texte);
  color: var(--papier-clair);
}

.carrousel-fleche:active { transform: scale(0.96); }

.carrousel-fleche--prec svg { transform: rotate(180deg); }

/* Les commandes se placent sous la vue : une rangée unique, flèches et puces
   ensemble, identique d'un format à l'autre. Les flèches ne flottent plus
   sur les bords, où elles chevauchaient le texte et se retrouvaient à mi-
   hauteur d'une image qui n'a pas de milieu utile. */
.carrousel-commandes {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  justify-content: center;
}

@media (min-width: 56rem) {
  .carrousel-commandes {
    justify-content: flex-start;
    padding-inline: 4rem;
  }
}

.carrousel-puces {
  display: flex;
  gap: 0.55rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.carrousel-puce {
  width: 0.55rem;
  height: 0.55rem;
  padding: 0;
  border: none;
  border-radius: var(--r-pilule);
  background: var(--filet);
  cursor: pointer;
  transition: background-color 0.2s ease, width 0.2s ease;
}

.carrousel-puce[aria-current="true"] {
  width: 1.6rem;
  background: var(--accent-texte);
}

/* Le décompte de la puce courante.

   La puce allongée disait quelle vue est là ; elle dit maintenant combien de
   temps il lui reste. C'est ce qui manquait pour que l'avance automatique
   cesse d'être une surprise : on voit venir le passage, donc on peut le
   devancer d'un clic ou le laisser faire.

   Elle ne se vide que pendant que l'avance tourne — `data-avance`, posé par le
   script. À l'arrêt, sous la souris ou pendant le silence qui suit une action,
   la puce reprend son fond plein : une jauge figée promettrait un passage qui
   ne vient pas. La durée est lue sur `--delai`, que le script pose à partir de
   sa propre constante.

   Première et seule animation de tout le site (§8). Le `!important` : le reset
   de la section Base ramène toute `animation-duration` à 0.01ms, ce qui
   remplirait la jauge d'un coup. Même exception, mêmes raisons qu'au-dessus. */
@keyframes carrousel-decompte {
  from { width: 0; }
  to   { width: 100%; }
}

.carrousel-cadre[data-avance] .carrousel-puce[aria-current="true"] {
  background: var(--filet);
}

.carrousel-cadre[data-avance] .carrousel-puce[aria-current="true"]::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: inherit;
  background: var(--accent-texte);
  animation: carrousel-decompte var(--delai, 6000ms) linear forwards !important;
}

.carrousel-fleche:focus-visible,
.carrousel-puce:focus-visible {
  outline: 2px solid var(--accent-texte);
  outline-offset: 3px;
}

/* La cible tactile fait 44 px même quand la puce n'en montre que 9 : la
   surface cliquable déborde le dessin. */
.carrousel-puce {
  position: relative;
}

.carrousel-puce::after {
  content: "";
  position: absolute;
  inset: -1.1rem -0.6rem;
}

/* Le défilement doux ne sert qu'au mode de base ; en mode animé, plus rien
   ne défile. */
@media (prefers-reduced-motion: no-preference) {
  .carrousel:not([data-anime]) { scroll-behavior: smooth; }
}

/* --- Variante sans illustration : les convictions --- */

/* Le carrousel d'origine tenait sur une image ; celui du manifeste tient sur
   une phrase. Même mécanique — mêmes trois états, mêmes commandes, même
   avance —, mais une seule colonne centrée : sans image, les deux colonnes de
   §7.3 n'ont plus rien à séparer, et une phrase alignée à gauche sous un
   `.kicker` centré partirait de travers.

   Il vit sur `.section-encre`. Les commandes y sont donc redéfinies dans le
   signe plutôt que dans `--accent-texte`, qui est l'or foncé des fonds
   clairs : sur la nuit, il ne se voit pas. */
.carrousel-convictions > li,
.carrousel-convictions[data-anime] > li {
  justify-items: center;
  text-align: center;
}

/* Les trois règles de largeur de §7.3 ne valent que pour la paire
   image + texte. Ici, la vue tient une colonne unique, et le texte porte sa
   propre mesure. */
@media (min-width: 56rem) {
  .carrousel-convictions > li {
    grid-template-columns: 100%;
    padding-inline: 0;
  }
}

@media (min-width: 80rem) {
  .carrousel-convictions > li { grid-template-columns: 100%; }
}

.carrousel-convictions .carrousel-texte {
  display: grid;
  justify-items: center;
}

/* La conviction est une épigraphe, pas un titre de vue : c'est la phrase du
   manifeste, citée telle quelle, et elle se lit dans le serif italique qui la
   porte déjà sur `/manifeste/`. Le `h3` reste un `h3` — la hiérarchie du
   document ne bouge pas, seule sa mise en forme change.

   La vue s'arrête là : pas de numéro, pas de glose en dessous. Une citation
   qui traîne son explication n'est plus une citation, et la page d'accueil
   n'a pas à expliquer le manifeste — elle a à donner envie de l'ouvrir. */
.carrousel-convictions h3 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.35rem, 3vw, 2rem);
  line-height: 1.4;
  letter-spacing: normal;
  color: var(--papier);
  max-width: 34ch;
  margin-bottom: 0;
}

/* Les commandes sous une vue centrée le sont aussi, à tous les formats :
   la règle de §7.3 qui les range à gauche à partir de 56rem suit le bord de
   l'illustration, et il n'y a plus d'illustration. */
.carrousel-convictions + .carrousel-commandes {
  justify-content: center;
  padding-inline: 0;
}

/* Le lien déplacé dans la rangée des commandes y perd sa marge haute : elle
   le décalait vers le bas de la ligne, à côté de puces qui, elles, sont
   centrées. L'écart au groupe de puces est déjà celui de la rangée. */
.carrousel-commandes > .btn-row {
  margin-top: 0;
}

/* Adaptation à l'aplat sombre, sur le modèle des règles de la section « Aplats
   de fond » : le signe remplace `--accent-texte`, qui est l'or foncé réservé
   aux fonds clairs et qui disparaîtrait ici. */
.section-encre .carrousel-fleche,
.section-sombre .carrousel-fleche {
  border-color: var(--signe);
  background: transparent;
  color: var(--signe);
}

.section-encre .carrousel-fleche:hover,
.section-sombre .carrousel-fleche:hover {
  background: var(--signe);
  color: var(--encre);
}

.section-encre .carrousel-puce[aria-current="true"],
.section-sombre .carrousel-puce[aria-current="true"] {
  background: var(--signe);
}

/* `--filet` vaut déjà `--encre-douce` sur l'aplat sombre : la jauge se vide
   dans un creux visible, et se remplit dans le signe. */
.section-encre .carrousel-cadre[data-avance] .carrousel-puce[aria-current="true"]::before,
.section-sombre .carrousel-cadre[data-avance] .carrousel-puce[aria-current="true"]::before {
  background: var(--signe);
}

.section-encre .carrousel-fleche:focus-visible,
.section-sombre .carrousel-fleche:focus-visible,
.section-encre .carrousel-puce:focus-visible,
.section-sombre .carrousel-puce:focus-visible {
  outline-color: var(--blanc);
}

/* --- Texte et illustration côte à côte --- */

/* Une illustration seule au milieu d'une colonne de prose tombe comme un
   ornement ; posée à côté du texte qu'elle accompagne, elle en fait partie.
   L'image passe sous le texte en dessous de 62rem, où deux colonnes ne
   laisseraient de place ni à l'une ni à l'autre. */
/* Alignement en tête, pas au centre : centré, le texte se posait à mi-hauteur
   de l'image et creusait un vide au-dessus ET en dessous — 90 px de chaque
   côté sur /methode/. C'est la règle déjà retenue pour le carrousel : les deux
   colonnes partent du même bord haut. */
.bloc-illustre {
  display: grid;
  gap: var(--esp-4);
  align-items: start;
  margin-block: var(--esp-4);
}

@media (min-width: 62rem) {
  .bloc-illustre {
    grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
    gap: var(--esp-5);
  }

  /* L'image d'abord : l'ordre visuel s'inverse, l'ordre du document non —
     un lecteur d'écran garde le texte avant l'image qui l'illustre. */
  .bloc-illustre--image-avant {
    grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
  }

  .bloc-illustre .illustration {
    margin: 0;
    max-width: none;
  }
}

@media (min-width: 62rem) {
  .bloc-illustre--image-avant .illustration { order: -1; }
}

/* --- Vignette : une image plus petite face à un texte court --- */

/* Ces illustrations sont presque blanches. Posée sur toute sa colonne de 24 rem
   face à deux paragraphes, l'image dépasse le texte de moitié et la section se
   lit comme un grand carré vide. La vignette réduit la colonne d'image à 17 rem,
   et le texte reprend la main sur le bloc.

   Deux compléments, chacun pour une disposition :

   · Sur méthode/ et confidentialite/, le kicker et le titre entrent dans la
     colonne de texte (c'est du balisage, pas du CSS). L'image s'aligne alors sur
     le haut du kicker au lieu de flotter sous le titre — c'est la grille qui la
     fait remonter, pas une marge négative devinée. Un bloc qui ouvre ainsi sa
     section perd sa marge haute, sinon il commencerait plus bas que le premier
     élément de toutes les autres sections.

   · Sur offres/, l'image reste à gauche et le titre au-dessus, à l'aplomb des
     autres titres de la page. Le texte n'y fait que deux lignes : il se centre
     en face de l'image au lieu de se coller à son bord haut. */
.bloc-illustre:first-child {
  margin-top: 0;
}

@media (min-width: 62rem) {
  .bloc-illustre--vignette {
    grid-template-columns: minmax(0, 1fr) minmax(0, 17rem);
  }

  .bloc-illustre--vignette.bloc-illustre--image-avant {
    grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
    align-items: center;
  }
}

/* --- Les marches du parcours --- */

/* Quatre marches sur toute la largeur, l'une sous l'autre. En grille de deux
   par deux elles se lisaient comme un inventaire de produits ; empilées, elles
   redeviennent ce qu'elles sont — une démarche, où l'ordre porte le propos.

   Trois colonnes : le numéro, puis le titre avec ses conditions, puis le pitch
   et le bouton. Rien ne bouge au survol, comme sur les cartes d'offres. */
/* L'écart entre deux marches est plus serré que le rythme habituel des
   grandes listes (--esp-5) : la flèche de progression se pose contre le bas de
   la carte qu'elle prolonge, et un vide de 100 px sous elle rompait le lien
   qu'elle est censée tracer. Assez d'air pour séparer deux cartes, assez peu
   pour qu'on lise une suite. */
.marches {
  list-style: none;
  padding: 0;
  margin: var(--esp-4) 0 0;
  display: grid;
  gap: var(--esp-marche);
}

.marche {
  position: relative;
  background: var(--papier-clair);
  border: 1px solid var(--carte-filet, var(--filet));
  border-radius: var(--r-lg);
  padding: var(--pad-pave);
  display: grid;
  gap: var(--esp-3) var(--esp-4);
  transition: border-color 0.2s ease;
}

.marche:hover { border-color: var(--carte-texte, var(--accent-texte)); }

@media (min-width: 56rem) {
  .marche {
    grid-template-columns: auto minmax(0, 21rem) minmax(0, 1fr);
    align-items: start;
  }
}

.marche-num {
  font-family: var(--mono);
  font-size: var(--num-carte);
  font-weight: 500;
  line-height: 1;
  color: var(--carte-texte, var(--accent-texte));
  margin: 0;
  letter-spacing: -0.04em;
}

.marche-tete h3 {
  color: var(--carte-texte, var(--encre));
  margin-bottom: var(--esp-2);
}

/* Durée, mise en place, abonnement : trois lignes de même forme, dans cet
   ordre — c'est l'ordre dans lequel la question se pose. Le libellé occupe
   une colonne de largeur fixe, sinon les valeurs ne s'alignent pas d'une
   ligne à l'autre et la fiche se lit comme une liste en vrac. */
.marche-conditions {
  margin: 0 0 var(--esp-2);
  display: grid;
  gap: 0.4rem;
}

.marche-conditions > div {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: baseline;
}

.marche-conditions dt {
  font-family: var(--mono);
  font-size: var(--label);
  font-weight: 500;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--gris-chaud);
}

.marche-conditions dd {
  margin: 0;
  font-weight: 600;
  line-height: 1.35;
}

.marche-note {
  font-family: var(--mono);
  font-size: var(--texte-mono);
  line-height: 1.6;
  color: var(--gris-chaud);
  margin: 0;
}

/* Le pitch monte, le bouton descend : `1fr` sur la rangée du milieu pousse le
   lien au bas de la carte quelle que soit la longueur du texte, et les quatre
   boutons s'alignent d'une marche à l'autre. */
.marche-corps {
  display: grid;
  grid-template-rows: auto 1fr;
  justify-items: end;
  gap: var(--esp-3);
  height: 100%;
}

.marche-corps .pitch {
  margin: 0;
  justify-self: stretch;
}

.marche-lien {
  align-self: end;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.4rem;
  border: 2px solid var(--carte-texte, var(--accent-texte));
  border-radius: var(--r-pilule);
  color: var(--carte-texte, var(--accent-texte));
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.marche-lien::after {
  content: "";
  width: 0.9rem;
  height: 0.9rem;
  background: currentColor;
  -webkit-mask: var(--svg-chevron) no-repeat center / contain;
  mask: var(--svg-chevron) no-repeat center / contain;
}

.marche-lien:hover {
  background: var(--carte-texte, var(--accent-texte));
  color: var(--papier-clair);
}

.marche-lien:active { transform: scale(0.97); }

/* La flèche de progression, centrée dans l'écart entre deux marches : elle dit
   que l'ordre compte, ce qu'une simple pile ne dit pas. Un SVG et non un
   glyphe « ↓ » — un caractère se pose sur sa ligne de base et ne se centre pas
   dans une boîte. Décorative, donc absente de l'arbre d'accessibilité.

   La rotation est DANS le `transform`, pas dans la propriété `rotate` à côté :
   le navigateur compose translate · rotate · scale · transform, si bien qu'un
   `rotate` séparé fait tourner le déplacement du `transform` avec l'élément.
   Le vecteur de centrage (-50 % en x, la moitié de l'écart en y) partait donc
   à 90° de sa direction : la flèche se retrouvait à gauche de l'axe et posée
   sur la bordure de la carte au lieu du milieu de l'écart. Dans la liste du
   `transform`, la rotation s'applique la première, sur une boîte carrée
   centrée sur son origine — elle ne déplace rien.

   Elle est posée contre le bas de la carte du dessus, et non centrée dans
   l'écart : elle sort de la marche qu'elle prolonge. Sa couleur est celle de
   cette marche (--carte-texte, hérité de .seminaire, .pilote…) et non l'accent
   de la page — sinon les trois flèches ont la même teinte et ne rattachent
   rien à rien. */
.marche:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 50%;
  width: 1.35rem;
  height: 1.35rem;
  transform: translate(-50%, 0.1rem) rotate(90deg);
  background: var(--carte-texte, var(--accent-texte));
  -webkit-mask: var(--svg-chevron) no-repeat center / contain;
  mask: var(--svg-chevron) no-repeat center / contain;
}

.section-pale .marche { background: var(--blanc); }

/* ============================================================
   Repli : navigateurs sans mask-image
   Les signes tracés disparaissent, la lecture reste intacte.
   ============================================================ */

@supports not ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
  .trace::after,
  .cercle::after,
  .fleche-deco,
  .epigraphe::before { display: none; }

  .btn-fleche::after,
  .carte-offre .carte-lien::after { content: "→"; background: none; width: auto; height: auto; color: var(--blanc); }
}

/* ============================================================
   Accueil — cartes de situation et visage de contact
   Ajoutés le 23 août 2026 avec la refonte « le site parle au dirigeant »
   (naix-docs/site/propositions-site-persona.md, A3 et D2). Réemploi des
   jetons et des composants existants : la carte de situation est une
   carte-offre avec son illustration en bandeau, le visage de contact
   reprend .membre-photo.
   ============================================================ */

.cartes-situations { margin-top: var(--esp-3); }

@media (min-width: 48rem) {
  .cartes-situations { grid-template-columns: repeat(3, 1fr); }
}

.carte-situation { padding-top: 0; }

.carte-situation .illustration {
  margin: 0 calc(-1 * var(--pad-carte)) 1.4rem;
  max-width: none;
}

.carte-situation .illustration img { border-radius: 0; }

.carte-situation h3 {
  font-size: 1.12rem;
  line-height: 1.35;
  font-weight: 650;
}

.visage-contact {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  margin: var(--esp-3) 0 var(--esp-2);
}

.visage-contact .membre-photo {
  flex: 0 0 auto;
  margin: 0;
  filter: none;
}

.section-accent .visage-contact .membre-photo { border: 3px solid var(--accent-contraste); }

.visage-contact p { margin: 0; }
.visage-contact .mono { display: block; margin-top: 0.6rem; font-size: 0.78rem; letter-spacing: 0.04em; }

.section-accent .visage-contact .lecture { color: var(--accent-contraste); }

@media (max-width: 40rem) {
  .visage-contact { flex-direction: column; align-items: flex-start; }
}

.entree-contact .etapes { margin-top: var(--esp-2); gap: 1rem; }
.entree-contact .etapes li::before { font-size: 1.2rem; }

/* Le scénario de l'accueil : quatre temps, deux par deux puis quatre de front. */
@media (min-width: 40rem) { .etapes--scenario { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .etapes--scenario { grid-template-columns: repeat(4, 1fr); } }
.entree-contact .visage-contact { flex-direction: column; align-items: flex-start; gap: var(--esp-2); }
.entree-contact .visage-contact p { font-size: 0.97rem; }

/* Sur un téléphone, le titre du hero descend à 2,25 rem : le signe tracé
   interdit le retour à la ligne (white-space: nowrap), et « Votre entreprise,
   non. » à 2,7 rem mesure 404 px — plus que l'écran. Mesuré le 23 août 2026
   sur 390 px ; l'ancien titre débordait déjà (438 px), masqué par
   l'overflow du hero. */
@media (max-width: 40rem) {
  .hero h1 { font-size: 2.25rem; }
}