/* =========================================================
   La méthode complète de Julien Jimenez
   Direction artistique : éditorial signature haut de gamme
   Noir profond, doré champagne, crème
   ========================================================= */

/* ---------- 1. Variables ---------- */

:root {
  /* Palette imposée */
  --noir: #0D0D0F;
  --noir-doux: #17171B;
  --dore: #C9A227;
  --dore-clair: #E5C765;
  --creme: #F7F3EA;
  --texte-clair: #E8E4DC;
  --gris-texte: #6A6A72;

  /* Déclinaisons de service, calculées pour le contraste */
  --dore-sombre: #7A5F0C;      /* doré lisible sur fond crème */
  --texte-sombre: #1B1B20;     /* texte principal sur crème */
  --texte-sombre-2: #45454E;   /* texte secondaire sur crème */
  --creme-ombre: #EDE6D7;
  --creme-ligne: #DFD5C0;
  --noir-ligne: rgba(233, 228, 220, 0.14);
  --noir-carte: #1D1D22;
  --noir-carte-2: #232329;

  /* Typographie */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --sans: "Segoe UI", "Helvetica Neue", Helvetica, Arial, "Liberation Sans", system-ui, sans-serif;

  --t-micro: 0.75rem;
  --t-petit: 0.875rem;
  --t-base: clamp(1rem, 0.96rem + 0.18vw, 1.075rem);
  --t-intro: clamp(1.06rem, 1rem + 0.35vw, 1.28rem);
  --t-h3: clamp(1.1rem, 1.02rem + 0.4vw, 1.32rem);
  --t-h2: clamp(1.75rem, 1.35rem + 1.7vw, 3rem);
  --t-h1: clamp(2.2rem, 1.5rem + 3.2vw, 4.4rem);
  --t-numero: clamp(3.6rem, 2.2rem + 6vw, 8.5rem);

  /* Espacements */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 3rem;
  --e-8: 4rem;
  --e-9: 6rem;
  --section-y: clamp(3.5rem, 2rem + 6vw, 7.5rem);
  --enveloppe: 1200px;
  --gouttiere: clamp(1.15rem, 0.6rem + 2.4vw, 3rem);

  /* Rayons et ombres */
  --r-s: 3px;
  --r-m: 6px;
  --r-l: 12px;
  --r-rond: 999px;
  --ombre-basse: 0 1px 2px rgba(13, 13, 15, 0.10), 0 4px 12px rgba(13, 13, 15, 0.07);
  --ombre-moyenne: 0 6px 18px rgba(13, 13, 15, 0.14), 0 18px 44px rgba(13, 13, 15, 0.12);
  --ombre-haute: 0 20px 60px rgba(13, 13, 15, 0.34);
  --ombre-or: 0 0 0 1px rgba(201, 162, 39, 0.32), 0 18px 46px rgba(13, 13, 15, 0.42);

  /* Transitions */
  --tr-court: 160ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --tr-moyen: 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --tr-long: 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- 2. Base ---------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 108px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--noir);
  color: var(--texte-clair);
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.72;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.13;
  letter-spacing: -0.014em;
  margin: 0 0 var(--e-4);
  text-wrap: balance;
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.28; }

p { margin: 0 0 var(--e-4); }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul, ol { margin: 0; padding: 0; list-style: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

figure { margin: 0; }

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

:focus-visible {
  outline: 3px solid var(--dore-clair);
  outline-offset: 3px;
  border-radius: var(--r-s);
}

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

.lien-evitement {
  position: absolute;
  left: 50%;
  top: -100px;
  transform: translateX(-50%);
  z-index: 999;
  background: var(--dore-clair);
  color: var(--noir);
  font-weight: 700;
  padding: 0.85rem 1.5rem;
  border-radius: 0 0 var(--r-m) var(--r-m);
  text-decoration: none;
  transition: top var(--tr-court);
}

.lien-evitement:focus {
  top: 0;
}

/* ---------- 3. Enveloppe et sections ---------- */

.enveloppe {
  width: 100%;
  max-width: var(--enveloppe);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.enveloppe--etroite { max-width: 880px; }

.section {
  padding-block: var(--section-y);
  position: relative;
}

.section--noir {
  background: var(--noir);
  color: var(--texte-clair);
}

.section--noir + .section--noir {
  padding-top: 0;
}

.section--creme {
  background: var(--creme);
  color: var(--texte-sombre);
}

.section--creme h2,
.section--creme h3 { color: var(--texte-sombre); }

.section--noir h2,
.section--noir h3 { color: var(--creme); }

.section--creme::before,
.section--noir::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 162, 39, 0.55), transparent);
}

/* ---------- 4. Surtitres et filets dorés ---------- */

.surtitre {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--sans);
  font-size: var(--t-petit);
  font-weight: 700;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--dore-clair);
  margin: 0 0 var(--e-4);
}

.surtitre--sombre { color: var(--dore-sombre); }

.surtitre__filet {
  display: inline-block;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--dore), var(--dore-clair));
  transition: width var(--tr-long);
}

.surtitre--sombre .surtitre__filet {
  background: linear-gradient(90deg, var(--dore-sombre), var(--dore));
}

.est-visible .surtitre__filet,
.surtitre.est-visible .surtitre__filet { width: 46px; }

.sep {
  margin-inline: 0.55rem;
  opacity: 0.55;
}

.intro {
  font-size: var(--t-intro);
  line-height: 1.68;
  max-width: 68ch;
  color: var(--texte-sombre-2);
  margin-bottom: var(--e-7);
}

.intro--clair { color: var(--texte-clair); }

/* ---------- 5. Entête ---------- */

.entete {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(13, 13, 15, 0.86);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--noir-ligne);
  transition: background var(--tr-moyen), border-color var(--tr-moyen);
}

.entete.est-compacte {
  background: rgba(13, 13, 15, 0.97);
  border-bottom-color: rgba(201, 162, 39, 0.34);
}

.entete__int {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  min-height: 68px;
}

.marque {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--texte-clair);
}

.marque__sigle {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  font-family: var(--serif);
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--dore-clair);
  border: 1px solid rgba(201, 162, 39, 0.6);
  border-radius: var(--r-s);
  background: linear-gradient(160deg, rgba(201, 162, 39, 0.16), rgba(201, 162, 39, 0.02));
  transition: transform var(--tr-court), border-color var(--tr-court);
}

.marque:hover .marque__sigle {
  transform: translateY(-1px);
  border-color: var(--dore-clair);
}

.marque__texte {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.marque__texte strong {
  font-family: var(--serif);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--creme);
}

.marque__texte span {
  font-size: var(--t-micro);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--dore-clair);
}

/* Menu */

.menu__liste {
  display: flex;
  align-items: center;
  gap: clamp(0.6rem, 1.4vw, 1.6rem);
}

.menu__liste a {
  display: inline-block;
  padding: 0.5rem 0.2rem;
  font-size: 0.9rem;
  text-decoration: none;
  color: var(--texte-clair);
  position: relative;
  transition: color var(--tr-court);
}

.menu__liste a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0.15rem;
  height: 1px;
  background: var(--dore-clair);
  transition: right var(--tr-moyen);
}

.menu__liste a:hover { color: var(--dore-clair); }
.menu__liste a:hover::after { right: 0; }

.menu__liste a.est-active {
  color: var(--dore-clair);
}

.menu__liste a.est-active::after { right: 0; }

.menu__cta {
  border: 1px solid rgba(201, 162, 39, 0.62);
  border-radius: var(--r-s);
  padding: 0.5rem 0.95rem !important;
  color: var(--dore-clair) !important;
  white-space: nowrap;
}

.menu__cta::after { display: none; }

.menu__cta:hover {
  background: var(--dore-clair);
  color: var(--noir) !important;
}

/* Burger */

.burger {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--noir-ligne);
  border-radius: var(--r-s);
  padding: 0;
  place-items: center;
}

.burger__trait {
  display: block;
  width: 20px;
  height: 2px;
  margin: 3px auto;
  background: var(--texte-clair);
  transition: transform var(--tr-court), opacity var(--tr-court);
}

.burger[aria-expanded="true"] .burger__trait:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__trait:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__trait:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------- 6. Ouverture ---------- */

.ouverture {
  position: relative;
  padding-top: clamp(3rem, 1.5rem + 6vw, 6.5rem);
  background:
    radial-gradient(1100px 620px at 78% 8%, rgba(201, 162, 39, 0.13), transparent 62%),
    linear-gradient(180deg, var(--noir) 0%, var(--noir-doux) 78%, var(--noir) 100%);
}

.ouverture__grille {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  padding-bottom: clamp(2.5rem, 5vw, 5rem);
}

.ouverture h1 em {
  font-style: normal;
  color: var(--dore-clair);
  display: inline-block;
  position: relative;
}

.ouverture h1 em::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.02em;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--dore), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1) 260ms;
}

.est-visible.ouverture__texte h1 em::after,
.ouverture__texte.est-visible h1 em::after { transform: scaleX(1); }

.chapeau {
  font-size: var(--t-intro);
  line-height: 1.66;
  color: var(--texte-clair);
  max-width: 60ch;
  margin-bottom: var(--e-5);
}

.ouverture__note {
  font-size: var(--t-petit);
  color: #B9B4AA;
  max-width: 58ch;
  border-left: 2px solid rgba(201, 162, 39, 0.5);
  padding-left: var(--e-4);
  margin-bottom: var(--e-6);
}

.ouverture__reperes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-5) var(--e-7);
  margin-bottom: var(--e-6);
  padding-block: var(--e-5);
  border-top: 1px solid var(--noir-ligne);
  border-bottom: 1px solid var(--noir-ligne);
}

.ouverture__reperes li {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 120px;
}

.repere__val {
  font-family: var(--serif);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--dore-clair);
}

.repere__lib {
  font-size: var(--t-petit);
  color: #C4BFB5;
  max-width: 20ch;
}

.ouverture__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
}

/* Boutons */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.92rem 1.6rem;
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-radius: var(--r-s);
  transition: transform var(--tr-court), background var(--tr-court), color var(--tr-court), border-color var(--tr-court), box-shadow var(--tr-court);
}

.bouton--or {
  background: linear-gradient(135deg, var(--dore-clair), var(--dore));
  color: #17130A;
  box-shadow: 0 10px 26px rgba(201, 162, 39, 0.22);
}

.bouton--or:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(201, 162, 39, 0.3);
}

.bouton--fantome {
  border: 1px solid rgba(233, 228, 220, 0.3);
  color: var(--texte-clair);
}

.bouton--fantome:hover {
  border-color: var(--dore-clair);
  color: var(--dore-clair);
  transform: translateY(-2px);
}

/* Portrait au liseré doré */

.portrait {
  position: relative;
  justify-self: center;
  max-width: 420px;
  width: 100%;
}

.portrait__cadre {
  position: relative;
  padding: 10px;
  border: 1px solid rgba(201, 162, 39, 0.55);
  border-radius: var(--r-m);
  background: linear-gradient(150deg, rgba(201, 162, 39, 0.2), rgba(13, 13, 15, 0.1));
  box-shadow: var(--ombre-haute);
}

.portrait__cadre::before {
  content: "";
  position: absolute;
  inset: -14px;
  border: 1px solid rgba(201, 162, 39, 0.24);
  border-radius: var(--r-m);
  pointer-events: none;
}

.portrait__cadre img {
  width: 100%;
  border-radius: 3px;
  filter: grayscale(0.32) contrast(1.22) brightness(0.94);
  transition: filter var(--tr-long), transform var(--tr-long);
}

.portrait:hover .portrait__cadre img {
  filter: grayscale(0.08) contrast(1.12) brightness(1);
  transform: scale(1.012);
}

.portrait figcaption {
  margin-top: var(--e-4);
  font-size: var(--t-petit);
  color: #BEB9AF;
  line-height: 1.6;
  border-top: 1px solid var(--noir-ligne);
  padding-top: var(--e-3);
}

/* Bandeau de chiffres */

.bandeau-chiffres {
  border-top: 1px solid rgba(201, 162, 39, 0.28);
  border-bottom: 1px solid rgba(201, 162, 39, 0.28);
  background: rgba(23, 23, 27, 0.7);
  padding-block: var(--e-6);
}

.bandeau-chiffres__grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--e-5);
}

.chiffre {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding-left: var(--e-4);
  border-left: 2px solid rgba(201, 162, 39, 0.45);
}

.chiffre__val {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.35rem);
  line-height: 1.05;
  color: var(--dore-clair);
  font-variant-numeric: tabular-nums;
}

.chiffre__lib {
  font-size: var(--t-petit);
  color: #C4BFB5;
  line-height: 1.45;
}

/* ---------- 7. Frise verticale ---------- */

.frise {
  position: relative;
  display: grid;
  gap: clamp(1.6rem, 3vw, 2.6rem);
  padding-left: clamp(3.2rem, 6vw, 5rem);
}

.frise::before {
  content: "";
  position: absolute;
  left: clamp(1.15rem, 2.4vw, 1.9rem);
  top: 0.6rem;
  bottom: 0.6rem;
  width: 2px;
  background: var(--creme-ligne);
}

.frise::after {
  content: "";
  position: absolute;
  left: clamp(1.15rem, 2.4vw, 1.9rem);
  top: 0.6rem;
  width: 2px;
  height: var(--remplissage, 0%);
  max-height: calc(100% - 1.2rem);
  background: linear-gradient(180deg, var(--dore), var(--dore-sombre));
  transition: height 220ms linear;
}

.frise__item {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--e-4);
}

.frise__puce {
  position: absolute;
  left: calc(-1 * clamp(3.2rem, 6vw, 5rem) + clamp(1.15rem, 2.4vw, 1.9rem) - 6px);
  top: 0.55rem;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--creme);
  border: 2px solid var(--creme-ligne);
  transition: border-color var(--tr-moyen), background var(--tr-moyen), transform var(--tr-moyen);
}

.frise__item.est-atteint .frise__puce {
  border-color: var(--dore);
  background: var(--dore);
  transform: scale(1.18);
}

.frise__num {
  font-family: var(--serif);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--dore-sombre);
  min-width: 2.4ch;
  padding-top: 0.1rem;
  letter-spacing: 0.02em;
}

.frise__corps h3 {
  margin-bottom: 0.2rem;
}

.frise__corps h3 a {
  text-decoration: none;
  color: var(--texte-sombre);
  background-image: linear-gradient(var(--dore), var(--dore));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size var(--tr-moyen), color var(--tr-court);
}

.frise__corps h3 a:hover {
  color: var(--dore-sombre);
  background-size: 100% 1px;
}

.frise__duree {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 700;
  color: var(--dore-sombre);
  margin-bottom: 0.35rem;
}

.frise__corps p:last-child {
  color: var(--texte-sombre-2);
  max-width: 62ch;
}

/* ---------- 8. Navigation de phases collante ---------- */

.nav-phases {
  position: sticky;
  top: 68px;
  z-index: 80;
  background: rgba(13, 13, 15, 0.95);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(201, 162, 39, 0.3);
  border-bottom: 1px solid rgba(201, 162, 39, 0.3);
}

.nav-phases__int {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  min-height: 54px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.nav-phases__titre {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 700;
  color: var(--dore-clair);
  white-space: nowrap;
}

.nav-phases__liste {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.nav-phases__liste a {
  display: inline-grid;
  place-items: center;
  min-width: 38px;
  height: 32px;
  padding-inline: 0.4rem;
  font-family: var(--serif);
  font-size: 0.92rem;
  letter-spacing: 0.05em;
  text-decoration: none;
  color: var(--texte-clair);
  border: 1px solid rgba(233, 228, 220, 0.2);
  border-radius: var(--r-s);
  transition: color var(--tr-court), border-color var(--tr-court), background var(--tr-court);
}

.nav-phases__liste a:hover {
  color: var(--dore-clair);
  border-color: var(--dore-clair);
}

.nav-phases__liste a.est-active {
  background: var(--dore-clair);
  border-color: var(--dore-clair);
  color: #17130A;
  font-weight: 700;
}

.nav-phases__etat {
  margin-left: auto;
  font-size: var(--t-petit);
  color: #C4BFB5;
  white-space: nowrap;
  padding-left: var(--e-4);
}

/* ---------- 9. Phases ---------- */

.phase__entete {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: clamp(1rem, 2.5vw, 2.4rem);
  margin-bottom: var(--e-7);
  padding-bottom: var(--e-5);
  position: relative;
}

.phase__entete::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 0;
  background: linear-gradient(90deg, var(--dore), rgba(201, 162, 39, 0));
  transition: width 1000ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.phase__entete.est-visible::after { width: 100%; }

.phase__numero {
  font-family: var(--serif);
  font-size: var(--t-numero);
  line-height: 0.82;
  margin: 0;
  color: transparent;
  -webkit-text-stroke: 1px rgba(201, 162, 39, 0.75);
  letter-spacing: 0.01em;
}

.phase__numero--sombre {
  -webkit-text-stroke: 1px rgba(122, 95, 12, 0.7);
}

@supports not (-webkit-text-stroke: 1px black) {
  .phase__numero { color: var(--dore); }
  .phase__numero--sombre { color: var(--dore-sombre); }
}

.phase__colonnes {
  display: grid;
  gap: clamp(1.8rem, 3.5vw, 3.4rem);
  align-items: start;
}

.phase__recit p {
  max-width: 66ch;
  margin-bottom: var(--e-4);
}

.section--noir .phase__recit p { color: var(--texte-clair); }
.section--creme .phase__recit p { color: var(--texte-sombre-2); }

.phase__recit p:first-child::first-letter {
  font-family: var(--serif);
  font-size: 2.9em;
  line-height: 0.82;
  float: left;
  padding: 0.08em 0.12em 0 0;
  color: var(--dore);
}

.section--creme .phase__recit p:first-child::first-letter {
  color: var(--dore-sombre);
}

.phase__fiches {
  display: grid;
  gap: var(--e-4);
}

/* Fiches, contraste explicite dans les deux sens */

.fiche {
  padding: var(--e-5);
  border-radius: var(--r-m);
  background: var(--noir-carte);
  color: var(--texte-clair);
  border: 1px solid var(--noir-ligne);
  border-left: 3px solid rgba(201, 162, 39, 0.6);
  transition: transform var(--tr-moyen), border-color var(--tr-moyen), box-shadow var(--tr-moyen), background var(--tr-moyen);
}

.fiche:hover {
  transform: translateY(-3px);
  background: var(--noir-carte-2);
  border-left-color: var(--dore-clair);
  box-shadow: var(--ombre-haute);
}

.fiche h3 {
  font-family: var(--sans);
  font-size: var(--t-petit);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--dore-clair) !important;
  margin-bottom: var(--e-2);
}

.fiche p {
  color: #D6D1C8;
  font-size: 0.97rem;
  line-height: 1.66;
  margin: 0;
}

.fiche--or {
  background: linear-gradient(140deg, rgba(201, 162, 39, 0.14), rgba(23, 23, 27, 0.9));
  border-left-color: var(--dore-clair);
}

.fiche--or p { color: var(--texte-clair); }

/* Fiches claires posées en section crème */

.fiche--claire {
  background: #FFFFFF;
  color: var(--texte-sombre);
  border: 1px solid var(--creme-ligne);
  border-left: 3px solid var(--dore-sombre);
  box-shadow: var(--ombre-basse);
}

.fiche--claire:hover {
  background: #FFFFFF;
  border-left-color: var(--dore);
  box-shadow: var(--ombre-moyenne);
}

.fiche--claire h3 { color: var(--dore-sombre) !important; }
.fiche--claire p { color: var(--texte-sombre-2); }

.fiche--or-clair {
  background: linear-gradient(140deg, rgba(201, 162, 39, 0.13), #FFFFFF 62%);
  border-left-color: var(--dore-sombre);
}

.fiche--or-clair p { color: var(--texte-sombre); }

/* ---------- 10. Visuels ---------- */

.visuel {
  margin-bottom: var(--e-7);
  position: relative;
}

.visuel img {
  width: 100%;
  border-radius: var(--r-m);
  border: 1px solid rgba(201, 162, 39, 0.4);
  filter: contrast(1.06) saturate(0.94);
  box-shadow: var(--ombre-haute);
}

.section--creme .visuel img {
  box-shadow: var(--ombre-moyenne);
  border-color: var(--creme-ligne);
}

.visuel figcaption {
  margin-top: var(--e-3);
  font-size: var(--t-petit);
  line-height: 1.6;
  padding-left: var(--e-4);
  border-left: 2px solid rgba(201, 162, 39, 0.6);
  max-width: 74ch;
}

.section--noir .visuel figcaption { color: #C4BFB5; }
.section--creme .visuel figcaption { color: var(--texte-sombre-2); }

.visuel--large { margin-top: var(--e-8); margin-bottom: 0; }

/* ---------- 11. Bilan ---------- */

.bilan__grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--e-5);
}

.bilan__carte {
  position: relative;
  padding: var(--e-6) var(--e-5) var(--e-5);
  background: #FFFFFF;
  color: var(--texte-sombre);
  border: 1px solid var(--creme-ligne);
  border-radius: var(--r-m);
  box-shadow: var(--ombre-basse);
  overflow: hidden;
  transition: transform var(--tr-moyen), box-shadow var(--tr-moyen);
}

.bilan__carte::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--dore), var(--dore-sombre));
  transition: width var(--tr-long);
}

.bilan__carte.est-visible::before { width: 100%; }

.bilan__carte:hover {
  transform: translateY(-4px);
  box-shadow: var(--ombre-moyenne);
}

.bilan__num {
  display: block;
  font-family: var(--serif);
  font-size: 1.45rem;
  color: var(--dore-sombre);
  margin-bottom: var(--e-2);
  letter-spacing: 0.03em;
}

.bilan__carte h3 {
  font-size: 1.12rem;
  margin-bottom: var(--e-2);
  color: var(--texte-sombre);
}

.bilan__carte p {
  color: var(--texte-sombre-2);
  font-size: 0.97rem;
  line-height: 1.64;
  margin: 0;
}

/* ---------- 12. Calendrier ---------- */

.tableau-enveloppe {
  overflow-x: auto;
  border: 1px solid var(--noir-ligne);
  border-radius: var(--r-m);
  background: var(--noir-doux);
  box-shadow: var(--ombre-haute);
}

.calendrier {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 0.94rem;
}

.calendrier thead th {
  text-align: left;
  padding: var(--e-4) var(--e-5);
  font-family: var(--sans);
  font-size: var(--t-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #17130A;
  background: linear-gradient(135deg, var(--dore-clair), var(--dore));
  white-space: nowrap;
}

.calendrier tbody th {
  text-align: left;
  padding: var(--e-4) var(--e-5);
  font-family: var(--serif);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--dore-clair);
  white-space: nowrap;
  vertical-align: top;
}

.calendrier tbody td {
  padding: var(--e-4) var(--e-5);
  color: #D6D1C8;
  vertical-align: top;
  line-height: 1.55;
}

.calendrier tbody tr {
  border-top: 1px solid var(--noir-ligne);
  transition: background var(--tr-court);
}

.calendrier tbody tr:hover {
  background: rgba(201, 162, 39, 0.09);
}

.calendrier tbody td:last-child {
  color: var(--texte-clair);
}

.calendrier__note {
  margin-top: var(--e-5);
  font-size: var(--t-petit);
  color: #C4BFB5;
  max-width: 76ch;
  padding-left: var(--e-4);
  border-left: 2px solid rgba(201, 162, 39, 0.55);
}

/* ---------- 13. Accordéon ---------- */

.accordeon {
  border-top: 1px solid var(--creme-ligne);
}

.accordeon__item {
  border-bottom: 1px solid var(--creme-ligne);
}

.accordeon__item h3 {
  margin: 0;
  font-family: var(--sans);
  font-size: 1rem;
}

.accordeon__bouton {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e-4);
  text-align: left;
  padding: var(--e-5) 0;
  font-family: var(--serif);
  font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.22rem);
  font-weight: 600;
  line-height: 1.35;
  color: var(--texte-sombre);
  transition: color var(--tr-court);
}

.accordeon__bouton:hover { color: var(--dore-sombre); }

.accordeon__icone {
  position: relative;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin-top: 0.18rem;
  border: 1px solid var(--dore-sombre);
  border-radius: 50%;
}

.accordeon__icone::before,
.accordeon__icone::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--dore-sombre);
  transform: translate(-50%, -50%);
  transition: transform var(--tr-moyen), opacity var(--tr-moyen);
}

.accordeon__icone::before { width: 10px; height: 2px; }
.accordeon__icone::after { width: 2px; height: 10px; }

.accordeon__bouton[aria-expanded="true"] .accordeon__icone::after {
  transform: translate(-50%, -50%) scaleY(0);
  opacity: 0;
}

.accordeon__bouton[aria-expanded="true"] {
  color: var(--dore-sombre);
}

.accordeon__panneau {
  overflow: hidden;
}

.accordeon__panneau p {
  padding: 0 3rem var(--e-6) 0;
  margin: 0;
  color: var(--texte-sombre-2);
  max-width: 74ch;
  line-height: 1.72;
}

.accordeon__panneau[hidden] { display: none; }

.accordeon__panneau.est-anime {
  transition: height var(--tr-moyen);
}

/* ---------- 14. Contact ---------- */

.contact {
  background:
    radial-gradient(900px 520px at 12% 0%, rgba(201, 162, 39, 0.13), transparent 60%),
    var(--noir);
}

.contact__grille {
  display: grid;
  gap: clamp(2rem, 4vw, 3.6rem);
  align-items: center;
}

.contact__texte p {
  color: var(--texte-clair);
  max-width: 62ch;
}

.contact__adresse {
  margin: var(--e-6) 0 var(--e-5);
}

.contact__mail {
  display: inline-block;
  font-family: var(--serif);
  font-size: clamp(1.2rem, 0.95rem + 1.3vw, 2rem);
  color: var(--dore-clair);
  text-decoration: none;
  padding: 0.55rem 0;
  border-bottom: 2px solid rgba(201, 162, 39, 0.45);
  word-break: break-word;
  transition: color var(--tr-court), border-color var(--tr-court), letter-spacing var(--tr-court);
}

.contact__mail:hover {
  color: var(--creme);
  border-bottom-color: var(--dore-clair);
  letter-spacing: 0.012em;
}

.contact__points {
  display: grid;
  gap: var(--e-2);
}

.contact__points li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.95rem;
  color: #C4BFB5;
}

.contact__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 1px;
  background: var(--dore);
}

.contact__portrait {
  justify-self: center;
  max-width: 320px;
}

.contact__portrait img {
  width: 100%;
  border-radius: var(--r-m);
  border: 1px solid rgba(201, 162, 39, 0.5);
  padding: 8px;
  background: linear-gradient(150deg, rgba(201, 162, 39, 0.18), rgba(13, 13, 15, 0.05));
  filter: grayscale(0.28) contrast(1.14);
  box-shadow: var(--ombre-haute);
  transition: filter var(--tr-long);
}

.contact__portrait:hover img { filter: grayscale(0) contrast(1.05); }

.contact__portrait figcaption {
  margin-top: var(--e-3);
  font-size: var(--t-petit);
  color: #BEB9AF;
  line-height: 1.55;
  text-align: center;
}

/* ---------- 15. Pied de page ---------- */

.pied {
  background: var(--noir-doux);
  border-top: 1px solid rgba(201, 162, 39, 0.35);
  padding-top: var(--e-8);
  color: var(--texte-clair);
}

.pied__grille {
  display: grid;
  gap: var(--e-6);
  padding-bottom: var(--e-7);
}

.pied__titre {
  font-size: var(--t-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--dore-clair);
  margin-bottom: var(--e-4);
  padding-bottom: var(--e-2);
  border-bottom: 1px solid rgba(201, 162, 39, 0.28);
}

.marque__sigle--pied {
  margin-bottom: var(--e-3);
}

.pied__nom {
  font-family: var(--serif);
  font-size: 1.28rem;
  color: var(--creme);
  margin-bottom: var(--e-2);
}

.pied__role {
  font-size: var(--t-petit);
  color: #BEB9AF;
  line-height: 1.6;
  max-width: 34ch;
}

.pied__liste {
  display: grid;
  gap: 0.45rem;
}

.pied__liste a {
  font-size: 0.9rem;
  color: #D6D1C8;
  text-decoration: none;
  transition: color var(--tr-court), padding-left var(--tr-court);
}

.pied__liste a:hover {
  color: var(--dore-clair);
  padding-left: 4px;
}

.pied__mail a {
  font-size: 0.98rem;
  color: var(--dore-clair);
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 162, 39, 0.4);
  word-break: break-word;
  transition: color var(--tr-court), border-color var(--tr-court);
}

.pied__mail a:hover {
  color: var(--creme);
  border-bottom-color: var(--creme);
}

.pied__mail { margin-bottom: var(--e-4); }

.pied__bas {
  border-top: 1px solid var(--noir-ligne);
  padding-block: var(--e-5);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--e-3);
}

.pied__bas p {
  margin: 0;
  font-size: var(--t-micro);
  color: #A9A49A;
}

/* ---------- 16. Retour en haut ---------- */

.haut {
  position: fixed;
  right: clamp(1rem, 2.5vw, 2rem);
  bottom: clamp(1rem, 2.5vw, 2rem);
  z-index: 95;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  color: #17130A;
  background: linear-gradient(135deg, var(--dore-clair), var(--dore));
  border-radius: 50%;
  box-shadow: 0 10px 28px rgba(13, 13, 15, 0.5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity var(--tr-moyen), transform var(--tr-moyen), visibility var(--tr-moyen);
}

.haut.est-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.haut:hover {
  transform: translateY(-3px);
}

/* ---------- 17. Apparition au défilement ---------- */

.a-reveler {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 700ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}

.a-reveler.est-visible {
  opacity: 1;
  transform: none;
}

.a-reveler[data-retard="1"] { transition-delay: 90ms; }
.a-reveler[data-retard="2"] { transition-delay: 180ms; }
.a-reveler[data-retard="3"] { transition-delay: 270ms; }
.a-reveler[data-retard="4"] { transition-delay: 360ms; }

/* ---------- 18. Points de rupture ---------- */

@media (max-width: 900px) {
  .entete__int { min-height: 62px; }

  .burger { display: grid; }

  .menu {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--noir);
    border-bottom: 1px solid rgba(201, 162, 39, 0.3);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--tr-moyen);
  }

  .menu.est-ouvert {
    max-height: 460px;
    box-shadow: var(--ombre-haute);
  }

  .menu__liste {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--e-3) var(--gouttiere) var(--e-5);
  }

  .menu__liste li { border-bottom: 1px solid var(--noir-ligne); }
  .menu__liste li:last-child { border-bottom: none; }

  .menu__liste a {
    padding: 0.9rem 0;
    font-size: 1rem;
  }

  .menu__cta {
    display: block;
    margin-top: var(--e-4);
    text-align: center;
    padding: 0.85rem 1rem !important;
  }

  .nav-phases { top: 62px; }

  .nav-phases__etat { display: none; }

  .phase__entete {
    grid-template-columns: 1fr;
    gap: var(--e-2);
  }

  .phase__numero { line-height: 1; }
}

@media (min-width: 641px) {
  .phase__fiches {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 901px) {
  .ouverture__grille {
    grid-template-columns: 1.32fr 1fr;
  }

  .phase__colonnes {
    grid-template-columns: 1.05fr 1fr;
  }

  .contact__grille {
    grid-template-columns: 1.4fr 0.8fr;
  }

  .pied__grille {
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
    gap: var(--e-7);
  }
}

@media (min-width: 1200px) {
  :root { --enveloppe: 1220px; }

  .ouverture__grille { gap: 4.5rem; }

  .phase__colonnes { gap: 4rem; }
}

@media (max-width: 640px) {
  html { scroll-padding-top: 124px; }

  .ouverture__reperes { gap: var(--e-4) var(--e-5); }

  .repere__val { font-size: 2rem; }

  .bouton { width: 100%; }

  .ouverture__actions { flex-direction: column; align-items: stretch; }

  .frise { padding-left: 2.9rem; }

  .frise::before,
  .frise::after { left: 1rem; }

  .frise__puce { left: -2.05rem; }

  .frise__item { grid-template-columns: 1fr; gap: 0.2rem; }

  .frise__num { font-size: 1.25rem; }

  .accordeon__panneau p { padding-right: 0; }

  .phase__recit p:first-child::first-letter { font-size: 2.5em; }

  .pied__grille { gap: var(--e-6); }

  .pied__role { max-width: none; }

  .pied__bas { flex-direction: column; }

  .visuel figcaption { padding-left: var(--e-3); }
}

/* ---------- 19. Bloc de maillage du réseau ---------- */

.pied__reseau {
  position: relative;
}

.pied__reseau .pied__titre {
  color: var(--dore-clair);
  border-bottom-color: rgba(201, 162, 39, 0.4);
}

.pied__liste--reseau {
  gap: 0.55rem;
}

.pied__liste--reseau a {
  display: inline-block;
  position: relative;
  max-width: 100%;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--dore-clair);
  text-decoration: none;
  padding: 0.25rem 0 0.25rem 0.95rem;
  word-break: break-word;
  overflow-wrap: anywhere;
  border-radius: var(--r-s);
  transition: color var(--tr-court), transform var(--tr-court);
}

.pied__liste--reseau a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 6px;
  height: 1px;
  background: var(--dore);
  transition: width var(--tr-court), background var(--tr-court);
}

.pied__liste--reseau a:hover,
.pied__liste--reseau a:focus-visible {
  color: var(--creme);
  transform: translateX(2px);
}

.pied__liste--reseau a:hover::before,
.pied__liste--reseau a:focus-visible::before {
  width: 10px;
  background: var(--creme);
}

.pied__liste--reseau a:focus-visible {
  outline: 3px solid var(--dore-clair);
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .pied__reseau {
    padding-top: var(--e-4);
    border-top: 1px solid var(--noir-ligne);
  }

  .pied__liste--reseau a {
    display: block;
    font-size: 0.95rem;
    padding-block: 0.45rem;
  }

  .pied__liste--reseau a::before { top: 1.05em; }
}

/* ---------- 20. Page 404 ---------- */

.erreur {
  min-height: 100vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--e-8) var(--gouttiere);
  background:
    radial-gradient(900px 520px at 50% 0%, rgba(201, 162, 39, 0.14), transparent 62%),
    var(--noir);
}

.erreur__code {
  font-family: var(--serif);
  font-size: clamp(4.5rem, 3rem + 10vw, 11rem);
  line-height: 0.9;
  color: transparent;
  -webkit-text-stroke: 1px rgba(201, 162, 39, 0.8);
  margin: 0 0 var(--e-4);
}

@supports not (-webkit-text-stroke: 1px black) {
  .erreur__code { color: var(--dore); }
}

.erreur h1 {
  font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.6rem);
  color: var(--creme);
}

.erreur p {
  max-width: 56ch;
  margin-inline: auto;
  color: #C4BFB5;
}

.erreur__filet {
  width: 64px;
  height: 2px;
  margin: var(--e-5) auto;
  background: linear-gradient(90deg, var(--dore), var(--dore-clair));
}

.erreur__actions {
  margin-top: var(--e-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  justify-content: center;
}

/* ---------- 21. Impression ---------- */

@media print {
  .entete,
  .nav-phases,
  .haut,
  .burger { display: none !important; }

  body {
    background: #FFFFFF;
    color: #000000;
  }

  .section--noir,
  .section--creme,
  .ouverture,
  .contact,
  .pied {
    background: #FFFFFF !important;
    color: #000000 !important;
  }

  .section--noir h2,
  .section--noir h3,
  .fiche h3 { color: #000000 !important; }

  .fiche,
  .fiche--claire,
  .bilan__carte {
    background: #FFFFFF !important;
    color: #000000 !important;
    border: 1px solid #999999;
    box-shadow: none;
  }

  .fiche p,
  .bilan__carte p { color: #222222 !important; }

  .a-reveler { opacity: 1 !important; transform: none !important; }
}

/* ---------- 22. Mouvement réduit ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .a-reveler {
    opacity: 1;
    transform: none;
  }

  .surtitre__filet { width: 46px; }

  .phase__entete::after { width: 100%; }

  .bilan__carte::before { width: 100%; }

  .ouverture h1 em::after { transform: scaleX(1); }

  .haut { transition: none; }
}