/* ============================================================
   REVERALL et Compagnie
   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);
  --esp-6: clamp(4.5rem, 12vw, 9rem);

  /* ---- Rayons ---- */
  --r-xs: 6px;
  --r-sm: 12px;
  --r-md: 22px;
  --r-lg: 34px;
  --r-xl: 48px;
  --r-pilule: 999px;
}

/* 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;
}

p { margin: 0 0 1em; }

a {
  color: var(--accent-texte);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover { color: var(--accent-sombre); }

/* 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); }

.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. */
.kicker {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-texte);
  margin-bottom: var(--esp-3);
}

.kicker::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  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 {
  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. */
/* Le logo n'a pas de texte : sa ligne de base est le bas de sa boîte, qui
   coïncide au pixel près avec le pied des lettres de « reverall ». Un
   alignement baseline pose donc « et Compagnie » sur la même ligne d'écriture
   que le mot du logo. */
.brand {
  text-decoration: none;
  color: var(--encre);
  display: inline-flex;
  align-items: baseline;
  gap: 0.49rem;
}

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

.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);
}

/* « et compagnie » s'écrit en minuscules, calé sur le dessin du logo Reverall.
   Pas de text-transform : la casse rendue est celle du balisage, donc lisible
   dans le source et par les lecteurs d'écran. La mention est en grotesque comme
   la navigation, en demi-gras : en monospace clair elle se lisait à peine à
   côté du mot du logo. L'interlettrage est légèrement négatif : le mot se lit
   comme un bloc serré contre le logo, là où le monospace de départ, à chasses
   fixes, écartait les lettres.

   Elle prend la couleur du mot du logo — l'encre sur papier, le papier sur
   l'aplat sombre du pied de page : la mention porte la suite du nom,
   elle s'écrit donc de la même encre que lui. */
.brand-sub {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: none;
  color: 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);
}

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

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

/* Aplat sombre. `.section-sombre` reste l'alias historique. */
.section-encre,
.section-sombre {
  background: var(--fond-sombre);
  color: var(--papier);
}

/* 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);
}

/* --- 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); }
.section-encre a:not(.btn):not(.btn-fleche):not(.carte-lien):not(.tag),
.section-sombre a:not(.btn):not(.btn-fleche):not(.carte-lien):not(.tag) { color: var(--blanc); }
.section-encre a:not(.btn):not(.btn-fleche):not(.carte-lien):not(.tag):hover,
.section-sombre a:not(.btn):not(.btn-fleche):not(.carte-lien):not(.tag):hover { color: var(--gris-clair); }
.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 a:not(.btn):not(.btn-fleche):not(.carte-lien):not(.tag) { color: 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
   ============================================================ */

.hero {
  background: var(--hero-fond, var(--fond-sombre-profond));
  color: var(--papier);
  padding-block: var(--esp-6) var(--esp-5);
  position: relative;
  overflow: hidden;
}

/* 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);
}

.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: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  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-6) var(--esp-5);
}

.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: 0.78rem;
  letter-spacing: 0.14em;
  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: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  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: 1.7rem 1.6rem 1.8rem;
  transition: border-color 0.2s ease;
}

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

.parcours .etape-num {
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  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); }
}

.carte-offre {
  position: relative;
  background: var(--papier-clair);
  border: 1px solid var(--carte-filet, var(--filet));
  border-radius: var(--r-md);
  overflow: hidden;
  padding: 2.1rem 1.7rem 1.7rem;
  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: 2.6rem;
  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: 0.78rem;
  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: 1.6rem;
  font-weight: 500;
  color: var(--accent-texte);
  display: block;
  line-height: 1;
  letter-spacing: -0.03em;
  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); }

/* ============================================================
   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; }

.chiffre-libelle {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  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-xl);
  padding: clamp(1.8rem, 5vw, 3.5rem);
  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); }

@media (max-width: 34rem) {
  .bloc { border-radius: var(--r-lg); }
}

/* ============================================================
   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;
}

.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
   ============================================================ */

.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-5) 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: 1.6rem 1.8rem;
  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: 0.76rem;
  letter-spacing: 0.06em;
  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: 1.8rem 2rem;
  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: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  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: 0.78rem;
  font-weight: 500;
  letter-spacing: 0;
  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-5);
  scroll-margin-top: 6rem;
}

.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: clamp(2.6rem, 7vw, 4.5rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.05em;
  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;
}

.signature-manifeste {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.08rem;
  color: var(--gris-chaud);
  margin-top: var(--esp-4);
}

.lien-ancre {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gris-chaud);
  text-decoration: none;
  display: inline-block;
  margin-top: var(--esp-2);
}

.lien-ancre:hover { color: var(--accent-texte); }

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

.contrat {
  background: var(--fond-sombre);
  color: var(--papier);
  border-radius: var(--r-xl);
  padding: clamp(1.8rem, 5vw, 3rem);
  margin: var(--esp-4) 0;
}

.contrat-titre {
  font-family: var(--mono);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  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; }
  .contrat { border-radius: var(--r-lg); }
}

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

.entrees-contact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  align-items: start;
  gap: 1.2rem;
  margin-top: var(--esp-4);
}

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

.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: 0.76rem;
  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-5) 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 .brand-sub { color: var(--papier); }

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

.footer-signature {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.45;
  color: var(--papier) !important;
  max-width: 38ch;
  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: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  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: 0.74rem;
  color: var(--gris-clair);
  margin: 0;
}

/* 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: 0.78rem;
  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: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  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 du collectif
   ============================================================ */

/* Le collectif est à dimension variable : la grille ne doit dépendre d'aucun
   effectif. Une rangée de trois laisse la septième carte seule — on saute donc
   directement de deux à quatre colonnes, sans palier intermédiaire, et jamais
   par « autant de cartes qu'il en tient » : chaque largeur est posée au calc,
   sur le gap. 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é. */
.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%;
  }
}

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

.carte-membre {
  position: relative;
  background: var(--papier-clair);
  border: 1px solid var(--accent-filet, var(--filet));
  border-radius: var(--r-md);
  overflow: hidden;
  padding: 2.1rem 1.6rem 1.5rem;
  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: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  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: 0.76rem;
  letter-spacing: 0.06em;
  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: 1.8rem 1.6rem 1.4rem;
  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: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  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; }
}

/* --- 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. */
.bloc-illustre {
  display: grid;
  gap: var(--esp-4);
  align-items: center;
  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; }
}

/* --- 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. */
.marches {
  list-style: none;
  padding: 0;
  margin: var(--esp-4) 0 0;
  display: grid;
  gap: var(--esp-5);
}

.marche {
  position: relative;
  background: var(--papier-clair);
  border: 1px solid var(--carte-filet, var(--filet));
  border-radius: var(--r-md);
  padding: var(--esp-4);
  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: clamp(2rem, 4vw, 3rem);
  font-weight: 500;
  line-height: 1;
  color: var(--carte-texte, var(--accent-texte));
  margin: 0;
}

.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: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  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: 0.78rem;
  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. */
.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%, calc(var(--esp-5) / 2 - 50%)) rotate(90deg);
  background: 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 -1.7rem 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; }
}