/* ==========================================================================
   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; } }
.direction--seule { grid-template-columns: minmax(0, 62ch); }
.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; }
}

/* ==========================================================================
   17. MOUVEMENT — couche dynamique
   Lente et mesurée, conformément à la charte : le mouvement accompagne la
   lecture, il ne la concurrence pas. Tout est neutralisé si le visiteur a
   demandé à réduire les animations.
   ========================================================================== */

/* Zones sombres supplémentaires */
.vitrine__panneau,
.rideau {
  --accent-texte: var(--bronze-clair);
  --texte-doux: rgba(237, 234, 227, 0.68);
  --encre: rgba(237, 234, 227, 0.8);
}

/* --- Rideau de transition entre les pages --- */
.rideau {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  place-items: center;
  background: var(--noir);
  transition: transform 850ms cubic-bezier(0.76, 0, 0.24, 1);
  pointer-events: none;
}
html:not(.js-off) .rideau { display: grid; }
.rideau__contenu { display: grid; justify-items: center; gap: 1.5rem; }
.rideau img { width: 52px; transition: opacity 500ms ease, transform 850ms cubic-bezier(0.19, 1, 0.22, 1); }
.rideau__trait { width: 120px; height: 1px; background: rgba(237, 234, 227, 0.15); position: relative; overflow: hidden; }
.rideau__trait::after {
  content: ""; position: absolute; inset: 0; background: var(--bronze);
  transform: scaleX(0); transform-origin: left;
  animation: rideau-trait 700ms cubic-bezier(0.19, 1, 0.22, 1) 80ms forwards;
}
@keyframes rideau-trait { to { transform: scaleX(1); } }
.rideau[data-etat="ouvert"] { transform: translateY(-100%); }
.rideau[data-etat="ouvert"] img { opacity: 0; transform: translateY(-30px); }
.rideau[data-etat="ferme"] { transform: none; }
/* Secours : si le script ne se charge pas, le rideau se lève quand même. */
html:not(.js-off) .rideau:not([data-etat]) { animation: rideau-secours 1ms linear 2.5s forwards; }
@keyframes rideau-secours { to { transform: translateY(-100%); visibility: hidden; } }

/* --- Barre de progression de lecture --- */
.progression {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 110;
  background: var(--bronze); transform: scaleX(0); transform-origin: left;
  pointer-events: none;
}

/* --- Curseur suiveur (pointeurs précis uniquement) --- */
.curseur {
  position: fixed; top: 0; left: 0; z-index: 150;
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border: 1px solid var(--bronze); border-radius: 50%;
  pointer-events: none; opacity: 0;
  transition: opacity 300ms ease, width 400ms cubic-bezier(0.19, 1, 0.22, 1),
              height 400ms cubic-bezier(0.19, 1, 0.22, 1), margin 400ms cubic-bezier(0.19, 1, 0.22, 1),
              background-color 400ms ease;
}
.curseur[data-visible="true"] { opacity: 1; }
.curseur[data-survol="true"] { width: 68px; height: 68px; margin: -34px 0 0 -34px; background-color: rgba(138, 109, 75, 0.14); }

/* --- Découpage des titres en mots / lettres --- */
.mot { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.mot > span {
  display: inline-block; transform: translateY(110%);
  transition: transform 1100ms cubic-bezier(0.19, 1, 0.22, 1);
  transition-delay: var(--d, 0ms);
}
[data-split][data-vu="true"] .mot > span { transform: none; }

/* --- Filets qui se tracent --- */
.trace { height: 1px; background: var(--ligne); transform: scaleX(0); transform-origin: left; transition: transform 1400ms cubic-bezier(0.19, 1, 0.22, 1); }
.trace[data-vu="true"], .js-off .trace { transform: none; }
.panneau-sombre .trace { background: rgba(237, 234, 227, 0.2); }

/* --- Bandeau d'ouverture vivant --- */
.ouverture__lumiere {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(38rem circle at var(--mx, 72%) var(--my, 22%), rgba(138, 109, 75, 0.28), transparent 62%);
}
.ouverture__fond { animation: respire 18s ease-in-out infinite; }
@keyframes respire { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08) translate(-1.5%, 1%); } }
.ouverture__filigrane { translate: 0 var(--py, 0px); animation: flotte 14s ease-in-out infinite; }
@keyframes flotte { 0%, 100% { rotate: 0deg; scale: 1; } 50% { rotate: -3deg; scale: 1.05; } }
.ouverture__actions { display: flex; align-items: center; gap: 1.75rem; flex-wrap: wrap; }
.lien-fleche--clair { color: var(--ivoire); border-color: rgba(237, 234, 227, 0.3); }
.lien-fleche--clair:hover { color: var(--ivoire); border-color: var(--bronze-clair); }
[data-parallaxe] { translate: 0 var(--py, 0px); }

/* --- Boutons : balayage et aimantation --- */
.bouton {
  position: relative; overflow: hidden; isolation: isolate;
  transition: color 500ms ease, border-color 500ms ease, translate 450ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.bouton::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--noir);
  transform: scaleX(0); transform-origin: right;
  transition: transform 650ms cubic-bezier(0.19, 1, 0.22, 1);
}
.bouton:hover { background: transparent; }
.bouton:hover::before { transform: scaleX(1); transform-origin: left; }
.bouton--plein:hover { background: var(--noir); border-color: var(--bronze-texte); }
.bouton--plein::before { background: var(--bronze-texte); }
.bouton--clair::before { background: var(--ivoire); }
.bouton--clair:hover { background: transparent; color: var(--noir); }

/* --- Bandeau défilant des domaines --- */
.defile { overflow: hidden; border-bottom: 1px solid var(--ligne); padding-block: clamp(1.25rem, 2.5vw, 1.9rem); }
.defile__piste { display: flex; width: max-content; animation: defile 48s linear infinite; }
.defile:hover .defile__piste { animation-play-state: paused; }
.defile__groupe { display: flex; align-items: center; gap: clamp(1.75rem, 3vw, 3rem); padding-right: clamp(1.75rem, 3vw, 3rem); }
.defile__item {
  font-family: var(--titre); font-size: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; color: var(--noir);
}
.defile__item:nth-of-type(even) { color: var(--bronze); }
.defile__sep { width: 9px; height: 9px; border: 1px solid var(--bronze); rotate: 45deg; flex-shrink: 0; }
@keyframes defile { to { transform: translateX(-50%); } }

/* --- Citation en grand --- */
.citation--large { font-size: clamp(1.9rem, 1.1rem + 3vw, 3.4rem); line-height: 1.22; max-width: 22ch; }

/* --- Cadres des valeurs : réaction au survol --- */
.cadres__item { position: relative; transition: background-color var(--moyen); }
.cadres__item::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--bronze);
  transform: scaleX(0); transform-origin: left; transition: transform 700ms cubic-bezier(0.19, 1, 0.22, 1);
}
.cadres__item:hover { background-color: var(--sable); }
.cadres__item:hover::after { transform: scaleX(1); }
.cadres__num { display: block; margin-bottom: 1.75rem; font-family: var(--titre); font-size: 1.25rem; color: var(--accent-texte); transition: translate var(--moyen); }
.cadres__item:hover .cadres__num { translate: 8px 0; }

/* --- En-tête de section --- */
.entete-section {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.entete-section__titre { max-width: 18ch; }

/* --- Vitrine interactive des domaines --- */
.vitrine { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.vitrine__liste { border-top: 1px solid var(--ligne); }
.vitrine__item {
  position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr) 24px; gap: 1rem; align-items: baseline;
  padding-block: clamp(1.15rem, 2vw, 1.5rem); border-bottom: 1px solid var(--ligne);
}
.vitrine__item::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--noir);
  transform: scaleX(0); transform-origin: left; transition: transform 800ms cubic-bezier(0.19, 1, 0.22, 1);
}
.vitrine__item[data-actif="true"]::before { transform: scaleX(1); }
.vitrine__item:hover { color: inherit; }
.vitrine__num { font-family: var(--titre); font-size: 1.2rem; color: var(--accent-texte); }
.vitrine__titre {
  font-family: var(--titre); font-size: clamp(1.1rem, 0.9rem + 0.85vw, 1.55rem); letter-spacing: 0.09em;
  text-transform: uppercase; line-height: 1.3; color: var(--gris);
  transition: color 500ms ease, translate 700ms cubic-bezier(0.19, 1, 0.22, 1);
}
.vitrine__item[data-actif="true"] .vitrine__titre { color: var(--noir); translate: 10px 0; }
.vitrine__fleche { align-self: center; opacity: 0; translate: -10px 0; transition: opacity 500ms ease, translate 700ms cubic-bezier(0.19, 1, 0.22, 1); color: var(--bronze-texte); }
.vitrine__item[data-actif="true"] .vitrine__fleche { opacity: 1; translate: 0 0; }
.vitrine__resume { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vitrine__panneau {
  position: sticky; top: calc(var(--entete-h) + 40px);
  display: grid; min-height: clamp(20rem, 32vw, 26rem); overflow: hidden;
  padding: clamp(2rem, 4vw, 3rem); background: var(--noir); color: var(--ivoire);
}
.vitrine__signe { position: absolute; right: -8%; bottom: -12%; width: 55%; opacity: 0.06; pointer-events: none; }
.vitrine__fiche {
  grid-area: 1 / 1; position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
  opacity: 0; visibility: hidden; translate: 0 18px;
  transition: opacity 500ms ease, translate 800ms cubic-bezier(0.19, 1, 0.22, 1), visibility 500ms;
}
.vitrine__fiche[data-actif="true"] { opacity: 1; visibility: visible; translate: 0 0; }
.vitrine__grand { font-family: var(--titre); font-size: clamp(5rem, 3rem + 6vw, 9rem); line-height: 0.9; color: var(--bronze); }
.vitrine__nom { font-family: var(--titre); font-size: clamp(1.3rem, 1rem + 1vw, 1.8rem); letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.25; }
.vitrine__texte { margin-top: 1rem; font-size: 0.9375rem; line-height: 1.85; color: var(--encre); max-width: 40ch; }
@media (max-width: 860px) {
  .vitrine { grid-template-columns: 1fr; }
  .vitrine__panneau { display: none; }
  .vitrine__titre { color: var(--noir); }
  .vitrine__fleche { opacity: 1; translate: 0 0; }
  .vitrine__resume {
    position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal;
    grid-column: 2 / -1; font-size: 0.9375rem; line-height: 1.8; color: var(--encre);
  }
}

/* --- Phrases en rotation --- */
.rotatif { display: grid; font-family: var(--intro); font-size: clamp(1.6rem, 1rem + 2.6vw, 3rem); line-height: 1.3; }
.rotatif__item {
  grid-area: 1 / 1; opacity: 0; translate: 0 0.5em; filter: blur(6px);
  transition: opacity 900ms ease, translate 1100ms cubic-bezier(0.19, 1, 0.22, 1), filter 900ms ease;
}
.rotatif__item[data-actif="true"] { opacity: 1; translate: 0 0; filter: none; }

/* --- Principes (page cabinet) --- */
.principes { border-top: 1px solid var(--ligne); }
.principe {
  position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1rem, 3vw, 2.5rem);
  align-items: baseline; padding-block: clamp(1.75rem, 4vw, 3rem); border-bottom: 1px solid var(--ligne);
}
.principe::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--bronze);
  transform: scaleX(0); transform-origin: left; transition: transform 900ms cubic-bezier(0.19, 1, 0.22, 1);
}
.principe:hover::before { transform: scaleX(1); }
.principe__num { font-family: var(--titre); font-size: 1.35rem; color: var(--accent-texte); }
.principe__titre {
  font-family: var(--titre); font-weight: 400; font-size: clamp(2rem, 1.2rem + 3vw, 3.75rem);
  letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.1;
  transition: translate 800ms cubic-bezier(0.19, 1, 0.22, 1);
}
.principe:hover .principe__titre { translate: 12px 0; }
.principe__texte { font-family: var(--intro); font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem); line-height: 1.45; color: var(--encre); }
@media (max-width: 700px) {
  .principe { grid-template-columns: 1fr; gap: 0.75rem; }
}

/* --- Domaines détaillés : sommaire suivi --- */
.sommaire-fixe { display: flex; flex-direction: column; margin-top: 1.5rem; border-left: 1px solid var(--ligne); }
.sommaire-fixe a {
  position: relative; display: flex; gap: 0.9rem; align-items: baseline; padding: 0.55rem 0 0.55rem 1.1rem;
  font-size: 0.875rem; line-height: 1.5; color: var(--gris);
  transition: color 400ms ease, translate 600ms cubic-bezier(0.19, 1, 0.22, 1);
}
.sommaire-fixe a::before {
  content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 1px; background: var(--bronze);
  transform: scaleY(0); transition: transform 600ms cubic-bezier(0.19, 1, 0.22, 1);
}
.sommaire-fixe a span { font-family: var(--titre); color: var(--bronze-texte); min-width: 1.5rem; }
.sommaire-fixe a[aria-current] { color: var(--noir); translate: 6px 0; }
.sommaire-fixe a[aria-current]::before { transform: scaleY(1); }
@media (max-width: 860px) { .sommaire-fixe { display: none; } }

.domaine-bloc { padding-block: clamp(3rem, 7vw, 6rem); }
.domaine-bloc:first-child { padding-top: 0; }
.domaine-bloc > * + * { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.domaine-bloc__tete { display: grid; gap: 1rem; }
.domaine-bloc__grand { font-family: var(--titre); font-size: clamp(3.5rem, 2.2rem + 5vw, 7rem); line-height: 0.85; color: var(--bronze); }

/* --- Appel final et pied de page --- */
.appel-final__mail { margin-top: 1.75rem; font-size: var(--t-petit); letter-spacing: 0.2em; }
.appel-final__mail a { color: var(--texte-doux); border-bottom: 1px solid rgba(237, 234, 227, 0.25); padding-bottom: 0.2rem; }
.appel-final__mail a:hover { color: var(--ivoire); }
.pied__marque {
  overflow: hidden; margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid rgba(237, 234, 227, 0.16);
  font-family: var(--titre); font-size: clamp(2rem, 8.4vw, 8.5rem); line-height: 1; letter-spacing: 0.06em;
  text-transform: uppercase; white-space: nowrap; color: rgba(237, 234, 227, 0.92);
}

/* --- Réduction des animations --- */
@media (prefers-reduced-motion: reduce) {
  .rideau, .curseur, .progression { display: none !important; }
  .mot > span, .trace { transform: none !important; }
  .ouverture__fond, .ouverture__filigrane, .defile__piste { animation: none !important; }
  [data-parallaxe] { translate: none !important; }
}

/* ==========================================================================
   18. AFFINAGE RESPONSIVE
   Petits écrans, encoches, orientation paysage et zones tactiles.
   ========================================================================== */

/* Encoches et barres système (viewport-fit=cover) */
:root {
  --marge-sure: max(var(--gouttiere), env(safe-area-inset-left), env(safe-area-inset-right));
}
.enveloppe, .entete__inner, .tiroir { padding-inline: var(--marge-sure); }
.appel-final { padding-bottom: calc(clamp(4rem, 8vw, 7rem) + env(safe-area-inset-bottom)); }
.pied { padding-bottom: calc(2.25rem + env(safe-area-inset-bottom)); }

/* En-tête plus bas sur petits écrans : le bandeau gagne en hauteur utile */
@media (max-width: 700px) {
  :root { --entete-h: 68px; }
  .marque__signe { width: 26px; }
  .marque__nom { font-size: 0.9375rem; letter-spacing: 0.2em; }
}
@media (max-width: 360px) {
  .marque__nom { font-size: 0.8125rem; letter-spacing: 0.16em; }
  .marque { gap: 0.6rem; }
}

/* Zones tactiles : 44 px minimum sur les liens de navigation et de pied */
.nav__lien { padding-block: 0.85rem; }
.bouton-nav { padding-block: 0.85rem; }
.pied__liste a, .sommaire-fixe a, .pied__bas a {
  display: inline-block;
  min-height: 44px;
  padding-block: 0.6rem;
}
.pied__liste > li + li { margin-top: 0.15rem; }
.pied__bas nav { gap: 1.5rem; }
.fil a { display: inline-block; padding-block: 0.5rem; }

/* Adresses longues : jamais de débordement */
.pied__liste a, .tiroir__pied, .coordonnee__valeur, .confirmation { overflow-wrap: anywhere; }

/* Téléphone en paysage : le bandeau ne doit pas occuper tout l'écran */
@media (max-height: 520px) and (orientation: landscape) {
  .ouverture { min-height: 0; padding-block: calc(var(--entete-h) + 2.5rem) 2.5rem; }
  .ouverture--breve { min-height: 0; }
  .tiroir { padding-top: calc(var(--entete-h) + 1.5rem); }
  .tiroir__lien { padding-block: 0.7rem; font-size: 1.15rem; }
  .tiroir__pied { margin-top: 1.5rem; }
}

/* Très petits écrans : resserrement mesuré */
@media (max-width: 420px) {
  .ouverture__bas { gap: 1.25rem; }
  .ouverture__actions { width: 100%; }
  .ouverture__actions .bouton { width: 100%; justify-content: center; }
  .defiler { display: none; }
  .cadres__item { padding: 1.4rem 1.25rem; }
  .vitrine__item { grid-template-columns: 40px minmax(0, 1fr); }
  .vitrine__fleche { display: none; }
  .vitrine__resume { grid-column: 1 / -1; }
  .domaine-bloc__grand { font-size: clamp(3rem, 16vw, 4rem); }
  .principe__num { font-size: 1.1rem; }
  .confirmation > div { flex-direction: column; align-items: stretch; }
  .confirmation .bouton { width: 100%; justify-content: center; }
  .bouton { padding-inline: 1.5rem; }
}

/* Le mot-marque du pied de page ne doit jamais élargir la page */
.pied__marque { font-size: clamp(1.75rem, 8.2vw, 8.5rem); }

/* Grands écrans : la mesure de lecture reste confortable */
@media (min-width: 1700px) {
  :root { --large: 1320px; }
}

/* Impression : le mouvement et les éléments décoratifs disparaissent */
@media print {
  .rideau, .curseur, .progression, .defile, .vitrine__panneau, .pied__marque { display: none !important; }
  .mot > span { transform: none !important; }
  .vitrine__resume { position: static; width: auto; height: auto; clip: auto; white-space: normal; }
}

/* Zones tactiles complémentaires (logo, liens flèche, fil d'Ariane) */
.marque { padding-block: 0.5rem; }
.lien-fleche { min-height: 44px; padding-top: 0.5rem; align-items: center; }
.fil a { min-height: 44px; display: inline-flex; align-items: center; }
.appel-final__mail a { display: inline-flex; align-items: center; min-height: 44px; }
.coordonnee__valeur a { display: inline-flex; align-items: center; min-height: 44px; }