/* ==========================================================================
   CABINET NZEBA — Feuille de style principale
   Conforme à la charte graphique, édition 2026.
   Palette : grège 58 % · ivoire 24 % · noir 14 % · bronze 4 %
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Jetons de design
   -------------------------------------------------------------------------- */
:root {
  /* Couleurs de la charte */
  --noir: #1A1918;
  --grege: #D5D4D0;
  --ivoire: #EDEAE3;
  --bronze: #8A6D4B;        /* accent graphique : filets, numérotation, détails */
  --encre: #3E3C38;
  --ligne: #B9B6AF;
  --ligne-claire: #C6C3BC;
  --sable: #DCDAD5;

  /* Déclinaisons de lisibilité — même famille chromatique, contraste AA
     pour les petits corps (libellés 11 px, notes 13 px). Le bronze de la
     charte reste employé tel quel pour les filets et les grands numéros. */
  --gris: #5C5A55;          /* texte secondaire sur fond clair — AA */
  --gris-doux: #6B6862;     /* valeur charte : éléments non textuels */
  --bronze-texte: #6F5638;  /* accent, petit texte sur fond clair — AA */
  --bronze-clair: #9B7E58;  /* accent, petit texte sur fond sombre — AA */

  /* Jetons contextuels : basculent automatiquement en zone sombre */
  --accent-texte: var(--bronze-texte);
  --texte-doux: var(--gris);

  /* Typographie */
  --titre: "Italiana", "Didot", "Bodoni MT", Georgia, serif;
  --intro: "Cormorant Garamond", Garamond, Georgia, serif;
  --texte: "Jost", "Futura", "Century Gothic", -apple-system, sans-serif;

  /* Échelle typographique fluide */
  --t-display: clamp(2.75rem, 1.4rem + 5.6vw, 6.5rem);
  --t-h1: clamp(2.25rem, 1.35rem + 3.6vw, 4.25rem);
  --t-h2: clamp(1.75rem, 1.25rem + 2vw, 2.875rem);
  --t-h3: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem);
  --t-lede: clamp(1.25rem, 1.02rem + 0.95vw, 1.9rem);
  --t-corps: clamp(0.975rem, 0.94rem + 0.16vw, 1.0625rem);
  --t-petit: 0.8125rem;
  --t-libelle: 0.6875rem;

  /* Rythme */
  --gouttiere: clamp(1.5rem, 5vw, 4rem);
  --large: 1180px;
  --etroit: 720px;
  --section-y: clamp(4.5rem, 9vw, 9.5rem);

  /* Mouvement */
  --lent: 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --moyen: 480ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --court: 220ms ease;

  --entete-h: 84px;
}

/* --------------------------------------------------------------------------
   2. Réinitialisation
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--entete-h) + 24px);
}

body {
  margin: 0;
  background: var(--grege);
  color: var(--noir);
  font-family: var(--texte);
  font-size: var(--t-corps);
  font-weight: 300;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--court);
}
a:hover { color: var(--accent-texte); }

::selection { background: var(--noir); color: var(--ivoire); }

:focus-visible {
  outline: 1px solid var(--bronze);
  outline-offset: 4px;
}

/* --------------------------------------------------------------------------
   3. Primitives typographiques
   -------------------------------------------------------------------------- */
/* Zones sombres : les jetons contextuels basculent, les composants suivent. */
.ouverture,
.panneau-sombre,
.appel-final,
.pied,
.tiroir,
.erreur {
  --accent-texte: var(--bronze-clair);
  --texte-doux: rgba(237, 234, 227, 0.68);
  --encre: rgba(237, 234, 227, 0.8);
  --ligne-claire: rgba(237, 234, 227, 0.2);
}

.libelle {
  display: block;
  font-size: var(--t-libelle);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent-texte);
  font-weight: 400;
}
.libelle--gris { color: var(--texte-doux); }

.titre {
  font-family: var(--titre);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.14;
  text-wrap: balance;
}
.titre--display { font-size: var(--t-display); letter-spacing: 0.17em; }
.titre--1 { font-size: var(--t-h1); }
.titre--2 { font-size: var(--t-h2); }
.titre--3 { font-size: var(--t-h3); letter-spacing: 0.1em; }

.lede {
  font-family: var(--intro);
  font-size: var(--t-lede);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.005em;
  text-wrap: pretty;
}
.lede em { font-style: italic; }

.texte { color: var(--encre); }
.texte + .texte { margin-top: 1.25em; }
.texte a { border-bottom: 1px solid var(--ligne); }
.texte a:hover { border-color: var(--bronze); }

.chiffre {
  font-family: var(--titre);
  font-size: clamp(2.5rem, 1.6rem + 3.4vw, 3.9rem);
  line-height: 1;
  letter-spacing: 0.04em;
}

.gris { color: var(--texte-doux); }
.petit { font-size: var(--t-petit); line-height: 1.75; }

/* --------------------------------------------------------------------------
   4. Mise en page
   -------------------------------------------------------------------------- */
.enveloppe {
  width: 100%;
  max-width: var(--large);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.section { padding-block: var(--section-y); }
.section--filet { border-top: 1px solid var(--ligne); }
.section--serre { padding-block: clamp(3rem, 6vw, 6rem); }

/* Grille éditoriale reprise de la charte : colonne d'appel + colonne de contenu */
.duo {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
@media (max-width: 860px) {
  .duo { grid-template-columns: 1fr; gap: 2rem; }
}

.duo__appel { position: sticky; top: calc(var(--entete-h) + 40px); }
@media (max-width: 860px) { .duo__appel { position: static; } }

.appel__num {
  font-family: var(--titre);
  font-size: clamp(2.5rem, 1.9rem + 2.4vw, 3.25rem);
  line-height: 1;
  color: var(--noir);
}
.appel__titre { margin-top: 0.55rem; }
.appel__note {
  margin-top: 1.5rem;
  font-size: 0.875rem;
  line-height: 1.75;
  color: var(--encre);
  max-width: 30ch;
}

.pile > * + * { margin-top: clamp(1.75rem, 3vw, 2.75rem); }
.pile-l > * + * { margin-top: clamp(3rem, 6vw, 5rem); }

.mesure { max-width: 68ch; }
.mesure-courte { max-width: 52ch; }

.filet { height: 1px; background: var(--ligne); border: 0; margin: 0; }
.filet--bronze { background: var(--bronze); }
.filet--noir { background: var(--noir); }

/* --------------------------------------------------------------------------
   5. En-tête et navigation
   -------------------------------------------------------------------------- */
.entete {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--entete-h);
  display: flex;
  align-items: center;
  transition: background var(--moyen), border-color var(--moyen), height var(--moyen);
  border-bottom: 1px solid transparent;
}
.entete--pose {
  background: rgba(213, 212, 208, 0.92);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: var(--ligne);
}
.entete--sombre { color: var(--ivoire); }
/* En-tête transparent au-dessus du bandeau sombre : accent clair. */
.entete--sombre:not(.entete--pose) {
  --accent-texte: var(--bronze-clair);
  --texte-doux: rgba(237, 234, 227, 0.68);
}
/* Repli si JavaScript indisponible : l'en-tête prend son fond opaque, faute de
   quoi son texte ivoire resterait sur le grège une fois la page défilée. */
.js-off .entete,
.js-off .entete--sombre {
  background: rgba(213, 212, 208, 0.95);
  border-bottom-color: var(--ligne);
  color: var(--noir);
  --accent-texte: var(--bronze-texte);
  --texte-doux: var(--gris);
}
.js-off .entete--sombre:not(.entete--pose) .marque__signe--negatif { display: none; }
.js-off .entete--sombre:not(.entete--pose) .marque__signe--positif { display: block; }
.entete--sombre.entete--pose {
  color: var(--noir);
}

.entete__inner {
  width: 100%;
  max-width: var(--large);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.marque {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-shrink: 0;
}
.marque:hover { color: inherit; }
.marque__signe { width: 30px; transition: opacity var(--court); }
.marque__signe--negatif { display: none; }
.entete--sombre:not(.entete--pose) .marque__signe--positif { display: none; }
.entete--sombre:not(.entete--pose) .marque__signe--negatif { display: block; }

.marque__nom {
  font-family: var(--titre);
  font-size: 1.0625rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  line-height: 1;
  padding-top: 2px;
}
@media (max-width: 420px) { .marque__nom { font-size: 0.9375rem; letter-spacing: 0.2em; } }

.nav { display: flex; align-items: center; gap: clamp(1.4rem, 2.4vw, 2.4rem); }
.nav__lien {
  position: relative;
  font-size: var(--t-libelle);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding-block: 0.5rem;
  white-space: nowrap;
}
.nav__lien::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--moyen);
}
.nav__lien:hover::after,
.nav__lien[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav__lien[aria-current="page"] { color: var(--accent-texte); }

.bouton-nav {
  border: 1px solid currentColor;
  padding: 0.7rem 1.35rem;
  font-size: var(--t-libelle);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  transition: background var(--court), color var(--court), border-color var(--court);
}
.bouton-nav:hover { background: var(--noir); border-color: var(--noir); color: var(--ivoire); }
.entete--sombre:not(.entete--pose) .bouton-nav:hover { background: var(--ivoire); border-color: var(--ivoire); color: var(--noir); }

@media (max-width: 1000px) { .nav--bureau { display: none; } }

/* Bouton menu */
.burger {
  display: none;
  width: 44px; height: 44px;
  margin-right: -10px;
  align-items: center;
  justify-content: center;
}
@media (max-width: 1000px) { .burger { display: flex; } }
.burger__trait {
  display: block;
  width: 26px; height: 1px;
  background: currentColor;
  position: relative;
  transition: background var(--court);
}
.burger__trait::before, .burger__trait::after {
  content: "";
  position: absolute; left: 0;
  width: 26px; height: 1px;
  background: currentColor;
  transition: transform var(--moyen);
}
.burger__trait::before { top: -8px; }
.burger__trait::after { top: 8px; }
.burger[aria-expanded="true"] .burger__trait { background: transparent; }
.burger[aria-expanded="true"] .burger__trait::before { transform: translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__trait::after { transform: translateY(-8px) rotate(-45deg); }

/* Tiroir mobile */
.tiroir {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--noir);
  color: var(--ivoire);
  padding: calc(var(--entete-h) + 3rem) var(--gouttiere) 3rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--moyen), transform var(--moyen), visibility var(--moyen);
  overflow-y: auto;
}
.tiroir[data-ouvert="true"] { opacity: 1; visibility: visible; transform: none; }
.tiroir__liste > li { border-top: 1px solid rgba(237, 234, 227, 0.18); }
.tiroir__liste > li:last-child { border-bottom: 1px solid rgba(237, 234, 227, 0.18); }
.tiroir__lien {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  padding: 1.15rem 0;
  font-family: var(--titre);
  font-size: clamp(1.5rem, 5vw, 2rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.tiroir__lien span:first-child {
  font-family: var(--texte);
  font-size: var(--t-libelle);
  letter-spacing: 0.2em;
  color: var(--accent-texte);
}
.tiroir__pied {
  margin-top: 3rem;
  font-size: var(--t-petit);
  color: rgba(237, 234, 227, 0.6);
  line-height: 2;
}
body[data-fige="true"] { overflow: hidden; }

/* --------------------------------------------------------------------------
   6. Boutons et liens d'action
   -------------------------------------------------------------------------- */
.bouton {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.05rem 2.1rem;
  border: 1px solid var(--noir);
  font-size: var(--t-libelle);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  background: transparent;
  color: var(--noir);
  transition: background var(--moyen), color var(--moyen), border-color var(--moyen);
}
.bouton:hover { background: var(--noir); color: var(--ivoire); }
.bouton__fleche { transition: transform var(--moyen); }
.bouton:hover .bouton__fleche { transform: translateX(5px); }

.bouton--plein { background: var(--noir); color: var(--ivoire); }
.bouton--plein:hover { background: var(--bronze); border-color: var(--bronze); color: var(--ivoire); }

.bouton--clair { border-color: var(--ivoire); color: var(--ivoire); }
.bouton--clair:hover { background: var(--ivoire); color: var(--noir); }

.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: var(--t-libelle);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--ligne);
  transition: border-color var(--court), color var(--court);
}
.lien-fleche:hover { border-color: var(--bronze); }
.lien-fleche svg { transition: transform var(--moyen); }
.lien-fleche:hover svg { transform: translateX(5px); }

/* --------------------------------------------------------------------------
   7. Bandeau d'ouverture
   -------------------------------------------------------------------------- */
.ouverture {
  position: relative;
  background: var(--noir);
  color: var(--ivoire);
  min-height: min(94svh, 900px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-block: calc(var(--entete-h) + 4rem) clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
}
.ouverture--breve { min-height: min(62svh, 620px); }

.ouverture__fond {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(115% 85% at 78% 12%, rgba(138, 109, 75, 0.30) 0%, transparent 62%),
    radial-gradient(90% 70% at 12% 96%, rgba(138, 109, 75, 0.14) 0%, transparent 58%),
    linear-gradient(168deg, #24221F 0%, #1A1918 46%, #121110 100%);
}
.ouverture__grain {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.28'/%3E%3C/svg%3E");
}
.ouverture__filigrane {
  position: absolute;
  top: 50%;
  right: clamp(-90px, -4vw, 0px);
  transform: translateY(-50%);
  width: clamp(280px, 34vw, 520px);
  opacity: 0.07;
  pointer-events: none;
}
.ouverture__inner { position: relative; z-index: 1; width: 100%; }

.ouverture__haut {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding-bottom: clamp(2.5rem, 6vw, 5rem);
  flex-wrap: wrap;
}
.ouverture__titre { margin-top: 1.75rem; }
.ouverture__sous {
  margin-top: 1.5rem;
  font-size: var(--t-petit);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(237, 234, 227, 0.62);
}
.ouverture__lede {
  margin-top: clamp(2rem, 4vw, 3rem);
  max-width: 46ch;
  color: rgba(237, 234, 227, 0.86);
}
.ouverture__bas {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid rgba(237, 234, 227, 0.2);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  flex-wrap: wrap;
}
.ouverture__pagination {
  font-family: var(--titre);
  font-size: 1.375rem;
  letter-spacing: 0.1em;
  color: rgba(237, 234, 227, 0.68);
}

/* Défilement suggéré */
.defiler {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  font-size: var(--t-libelle);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(237, 234, 227, 0.6);
}
.defiler__trait {
  display: block;
  width: 56px; height: 1px;
  background: rgba(237, 234, 227, 0.4);
  position: relative;
  overflow: hidden;
}
.defiler__trait::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--bronze);
  transform-origin: left;
  animation: glisse 2.8s var(--lent) infinite;
}
@keyframes glisse {
  0% { transform: scaleX(0); transform-origin: left; }
  45% { transform: scaleX(1); transform-origin: left; }
  55% { transform: scaleX(1); transform-origin: right; }
  100% { transform: scaleX(0); transform-origin: right; }
}

/* --------------------------------------------------------------------------
   8. Fil d'Ariane des pages intérieures
   -------------------------------------------------------------------------- */
.fil {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: var(--t-libelle);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(237, 234, 227, 0.68);
}
.fil span[aria-hidden] { color: var(--accent-texte); }

/* --------------------------------------------------------------------------
   9. Cartouches, cadres, listes
   -------------------------------------------------------------------------- */
.cadres {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--noir);
}
.cadres > * + * { border-left: 1px solid var(--noir); }
.cadres__item { padding: clamp(1.5rem, 2.6vw, 2rem) clamp(1.4rem, 2.4vw, 1.9rem); }
.cadres__titre { font-family: var(--titre); font-size: 1.375rem; letter-spacing: 0.06em; }
.cadres__note { margin-top: 0.5rem; font-size: var(--t-petit); color: var(--texte-doux); line-height: 1.7; }
@media (max-width: 760px) {
  .cadres { grid-template-columns: 1fr; }
  .cadres > * + * { border-left: 0; border-top: 1px solid var(--noir); }
}

/* Liste de domaines : lignes éditoriales dépliables au survol */
.domaines { border-top: 1px solid var(--ligne); }
.domaine {
  border-bottom: 1px solid var(--ligne);
  display: grid;
  grid-template-columns: 64px minmax(0, 1.18fr) minmax(0, 1fr) 28px;
  gap: clamp(1rem, 2vw, 2.25rem);
  align-items: start;
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
  transition: background var(--moyen), padding-inline var(--moyen);
}
.domaine:hover { background: var(--sable); padding-inline: clamp(0.75rem, 1.6vw, 1.5rem); }
.domaine__num { font-family: var(--titre); font-size: 1.75rem; color: var(--bronze); line-height: 1.2; }
.domaine__titre {
  font-family: var(--titre);
  font-size: clamp(1.1875rem, 1.05rem + 0.55vw, 1.5rem);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.3;
  text-wrap: balance;
}
.domaine__resume { color: var(--encre); font-size: 0.9375rem; line-height: 1.85; }
.domaine__signe {
  justify-self: end;
  align-self: center;
  color: var(--texte-doux);
  transition: transform var(--moyen), color var(--moyen);
}
.domaine:hover .domaine__signe { transform: translateX(6px); color: var(--accent-texte); }
@media (max-width: 860px) {
  .domaine { grid-template-columns: 56px 1fr; }
  .domaine__resume { grid-column: 2; }
  .domaine__signe { display: none; }
}

/* Fiches détaillées */
.fiches { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--ligne); border: 1px solid var(--ligne); }
.fiche { background: var(--grege); padding: clamp(1.75rem, 3.4vw, 2.75rem); }
.fiche__num { font-family: var(--titre); font-size: 1.5rem; color: var(--bronze); }
.fiche__titre { margin-top: 0.75rem; }
.fiche__texte { margin-top: 1rem; font-size: 0.9375rem; line-height: 1.85; color: var(--encre); }
.fiche__liste { margin-top: 1.35rem; padding-top: 1.35rem; border-top: 1px solid var(--ligne-claire); }
@media (max-width: 800px) { .fiches { grid-template-columns: 1fr; } }

/* Liste à puces bronze */
.liste-puces > li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.9375rem;
  line-height: 1.85;
  color: var(--encre);
}
.liste-puces > li + li { margin-top: 0.55rem; }
.liste-puces > li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.85em;
  width: 8px; height: 1px;
  background: var(--bronze);
}

/* Étapes de la méthode */
.etapes { counter-reset: etape; }
.etape {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding-block: clamp(1.75rem, 3vw, 2.75rem);
  border-top: 1px solid var(--ligne);
}
.etape:last-child { border-bottom: 1px solid var(--ligne); }
.etape__num {
  font-family: var(--titre);
  font-size: 2.25rem;
  line-height: 1;
  color: var(--noir);
  position: relative;
  padding-top: 0.15em;
}
.etape__num::after {
  content: "";
  display: block;
  width: 34px; height: 1px;
  background: var(--bronze);
  margin-top: 1rem;
}
.etape__titre { font-family: var(--titre); font-size: var(--t-h3); letter-spacing: 0.1em; text-transform: uppercase; }
.etape__texte { margin-top: 0.85rem; font-size: 0.9375rem; line-height: 1.85; color: var(--encre); max-width: 62ch; }
@media (max-width: 640px) {
  .etape { grid-template-columns: 1fr; gap: 1rem; }
  .etape__num::after { margin-top: 0.75rem; }
}

/* Repères chiffrés */
.reperes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--ligne);
  border-block: 1px solid var(--ligne);
}
.repere { background: var(--grege); padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 2vw, 1.75rem); }
.repere__valeur { font-family: var(--titre); font-size: clamp(2rem, 1.4rem + 2vw, 2.75rem); line-height: 1; }
.repere__note { margin-top: 0.85rem; font-size: var(--t-petit); color: var(--texte-doux); line-height: 1.7; }
@media (max-width: 860px) { .reperes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .reperes { grid-template-columns: 1fr; } }

/* Panneau sombre */
.panneau-sombre {
  background: var(--noir);
  color: var(--ivoire);
  position: relative;
  overflow: hidden;
}
.panneau-sombre .texte, .panneau-sombre .fiche__texte, .panneau-sombre .etape__texte { color: rgba(237, 234, 227, 0.78); }

.panneau-sombre .filet, .panneau-sombre .etape, .panneau-sombre .domaines, .panneau-sombre .domaine { border-color: rgba(237, 234, 227, 0.18); }
.panneau-sombre .appel__num, .panneau-sombre .etape__num { color: var(--ivoire); }
.panneau-sombre .appel__note { color: rgba(237, 234, 227, 0.7); }
.panneau-sombre__filigrane {
  position: absolute;
  bottom: -6%;
  left: -3%;
  width: clamp(220px, 26vw, 400px);
  opacity: 0.05;
  pointer-events: none;
}

/* Citation */
.citation {
  font-family: var(--intro);
  font-size: clamp(1.5rem, 1.05rem + 1.9vw, 2.5rem);
  line-height: 1.45;
  text-wrap: pretty;
  max-width: 24ch;
}
.citation__source {
  margin-top: 1.75rem;
  font-size: var(--t-libelle);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent-texte);
}

/* Portrait / direction */
.direction { display: grid; grid-template-columns: minmax(0, 340px) 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
@media (max-width: 800px) { .direction { grid-template-columns: 1fr; } }
.portrait {
  aspect-ratio: 4 / 5;
  background:
    linear-gradient(150deg, rgba(138,109,75,0.12), transparent 60%),
    repeating-linear-gradient(45deg, #CCC9C2 0 10px, #D5D4D0 10px 20px);
  border: 1px solid var(--ligne);
  display: flex;
  align-items: center;
  justify-content: center;
}
.portrait img { width: 42%; opacity: 0.5; }

/* Engagement / mentions */
.engagement {
  border: 1px solid var(--noir);
  padding: clamp(1.75rem, 3.4vw, 2.75rem);
}
.engagement__titre { font-family: var(--titre); font-size: var(--t-h3); letter-spacing: 0.1em; text-transform: uppercase; }

/* --------------------------------------------------------------------------
   10. Formulaire
   -------------------------------------------------------------------------- */
.formulaire { display: grid; gap: clamp(1.5rem, 2.6vw, 2rem); }
.champs-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 2.6vw, 2rem); }
@media (max-width: 620px) { .champs-2 { grid-template-columns: 1fr; } }

.champ { display: flex; flex-direction: column; gap: 0.7rem; }
.champ__label {
  font-size: var(--t-libelle);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--texte-doux);
}
.champ__label .requis { color: var(--accent-texte); }

.champ input,
.champ textarea,
.champ select {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ligne);
  padding: 0.7rem 0;
  font-size: 1rem;
  font-weight: 300;
  color: var(--noir);
  border-radius: 0;
  transition: border-color var(--court);
  appearance: none;
}
.champ textarea { resize: vertical; min-height: 130px; line-height: 1.8; }
.champ select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%236B6862' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  padding-right: 1.75rem;
  cursor: pointer;
}
.champ input:focus, .champ textarea:focus, .champ select:focus {
  outline: none;
  border-bottom-color: var(--bronze);
}
.champ input::placeholder, .champ textarea::placeholder { color: rgba(107, 104, 98, 0.55); }
.champ__aide { font-size: var(--t-petit); color: var(--texte-doux); }
.champ__erreur { font-size: var(--t-petit); color: #8A3B2E; min-height: 0; }
.champ[data-invalide="true"] input,
.champ[data-invalide="true"] textarea,
.champ[data-invalide="true"] select { border-bottom-color: #8A3B2E; }

/* Case à cocher */
.case { display: flex; align-items: flex-start; gap: 0.9rem; cursor: pointer; }
.case input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.case__boite {
  flex-shrink: 0;
  width: 17px; height: 17px;
  border: 1px solid var(--gris-doux);
  margin-top: 4px;
  display: grid;
  place-items: center;
  transition: border-color var(--court), background var(--court);
}
.case__boite::after {
  content: "";
  width: 7px; height: 7px;
  background: var(--bronze);
  transform: scale(0);
  transition: transform var(--court);
}
.case input:checked + .case__boite { border-color: var(--bronze); }
.case input:checked + .case__boite::after { transform: scale(1); }
.case input:focus-visible + .case__boite { outline: 1px solid var(--bronze); outline-offset: 3px; }
.case__texte { font-size: var(--t-petit); color: var(--encre); line-height: 1.75; }

/* Confirmation */
.confirmation {
  border: 1px solid var(--bronze);
  padding: clamp(1.75rem, 3.4vw, 2.5rem);
  background: var(--ivoire);
}
[hidden] { display: none !important; }

.miel { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

/* --------------------------------------------------------------------------
   11. Coordonnées
   -------------------------------------------------------------------------- */
.coordonnees { display: grid; gap: 0; border-top: 1px solid var(--ligne); }
.coordonnee {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 1.5rem;
  padding-block: 1.35rem;
  border-bottom: 1px solid var(--ligne);
  align-items: baseline;
}
.coordonnee__valeur { font-size: 0.9375rem; line-height: 1.8; }
@media (max-width: 560px) { .coordonnee { grid-template-columns: 1fr; gap: 0.4rem; } }

/* --------------------------------------------------------------------------
   12. Appel de bas de page
   -------------------------------------------------------------------------- */
.appel-final {
  background: var(--noir);
  color: var(--ivoire);
  padding-block: clamp(4rem, 8vw, 7rem);
  position: relative;
  overflow: hidden;
  text-align: center;
}
.appel-final__signe { width: 62px; margin-inline: auto; opacity: 0.9; }
.appel-final__titre { margin-top: 2rem; }
.appel-final__texte { margin-top: 1.5rem; margin-inline: auto; max-width: 46ch; color: rgba(237, 234, 227, 0.75); }
.appel-final__action { margin-top: 2.75rem; }

/* --------------------------------------------------------------------------
   13. Pied de page
   -------------------------------------------------------------------------- */
.pied {
  background: var(--noir);
  color: var(--ivoire);
  padding-top: clamp(3.5rem, 6vw, 5.5rem);
  padding-bottom: 2.25rem;
  border-top: 1px solid rgba(237, 234, 227, 0.12);
}
.pied__haut {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid rgba(237, 234, 227, 0.16);
}
@media (max-width: 800px) { .pied__haut { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .pied__haut { grid-template-columns: 1fr; } }

.pied__signe { width: 46px; }
.pied__nom {
  font-family: var(--titre);
  font-size: 1.375rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-top: 1.5rem;
}
.pied__sous {
  margin-top: 0.75rem;
  font-size: var(--t-libelle);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent-texte);
}
.pied__note { margin-top: 1.5rem; font-size: var(--t-petit); color: rgba(237, 234, 227, 0.6); line-height: 1.85; max-width: 34ch; }

.pied__liste { margin-top: 1.5rem; }
.pied__liste > li + li { margin-top: 0.7rem; }
.pied__liste a { font-size: 0.9375rem; color: rgba(237, 234, 227, 0.82); }
.pied__liste a:hover { color: var(--accent-texte); }

.pied__bas {
  padding-top: 2.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-size: var(--t-libelle);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(237, 234, 227, 0.68);
}
.pied__bas a { color: inherit; }
.pied__bas nav { display: flex; gap: 1.75rem; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   14. Accessibilité
   -------------------------------------------------------------------------- */
.saut {
  position: absolute;
  left: var(--gouttiere);
  top: 0;
  transform: translateY(-140%);
  z-index: 200;
  background: var(--noir);
  color: var(--ivoire);
  padding: 0.85rem 1.5rem;
  font-size: var(--t-libelle);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  transition: transform var(--moyen);
}
.saut:focus { transform: translateY(18px); color: var(--ivoire); }

.visuellement-cache {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   15. Apparitions au défilement
   -------------------------------------------------------------------------- */
[data-apparait] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--lent), transform var(--lent);
  transition-delay: var(--retard, 0ms);
}
[data-apparait][data-vu="true"] { opacity: 1; transform: none; }

.js-off [data-apparait] { opacity: 1; transform: none; }

@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;
  }
  [data-apparait] { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   16. Impression
   -------------------------------------------------------------------------- */
@media print {
  .entete, .tiroir, .appel-final, .defiler, .burger { display: none !important; }
  body { background: #fff; color: #000; }
  .ouverture, .panneau-sombre, .pied { background: #fff !important; color: #000 !important; }
  [data-apparait] { opacity: 1 !important; transform: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.75em; color: #555; }
}