/* ==========================================================================
   VIOLAINE HERRIAU — COACH DE RÉFÉRENCE
   Système de design — papier ivoire, encre nuit, brique terne
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Inter:wght@400;500;600&display=swap');

:root {
  /* Couleurs */
  --papier-ivoire: #FAF6EE;
  --creme-lisse: #FEFBF6;
  --encre-nuit: #1A1F2E;
  --taupe-profond: #3A2E25;
  --pierre-chaude: #6B5D4F;
  --brique-terne: #8B3A2F;
  --brique-fonce: #722F26;
  --gris-papier-fonce: #E8E1D2;
  --gris-pierre-clair: #A89E8F;

  /* Typographie */
  --serif: 'Libre Baskerville', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Espacements */
  --section-vertical: 144px;
  --section-padding-laterale: 32px;
  --content-max: 800px;
  --content-max-large: 1100px;

  --transition-base: 200ms ease;
}

@media (max-width: 768px) {
  :root {
    --section-vertical: 72px;
    --section-padding-laterale: 20px;
  }
}

/* ----- Reset léger ----- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  color: var(--encre-nuit);
  background-color: var(--papier-ivoire);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Grain de papier très subtil */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.2 0 0 0 0 0.18 0 0 0 0 0.15 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font-family: inherit; }

/* ==========================================================================
   TYPOGRAPHIE
   ========================================================================== */

h1, .h1 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(36px, 5.5vw, 60px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--encre-nuit);
  margin: 0 0 32px;
}
h1 em, .h1 em { font-style: italic; font-weight: 400; }

h2, .h2 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(28px, 3.5vw, 38px);
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--encre-nuit);
  margin: 0 0 24px;
}

h3, .h3 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.3;
  color: var(--encre-nuit);
  margin: 0 0 16px;
}

h4, .h4 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--encre-nuit);
  margin: 0 0 12px;
}

p { margin: 0 0 24px; }
p.large, .corps-large {
  font-size: 19px;
  line-height: 1.65;
}
p.petit, .corps-petit {
  font-size: 15px;
  line-height: 1.6;
  color: var(--pierre-chaude);
}

.sous-titre {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(19px, 1.6vw, 24px);
  line-height: 1.5;
  color: var(--encre-nuit);
  max-width: 680px;
  margin: 0 0 40px;
}

.kicker {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pierre-chaude);
  margin: 0 0 20px;
  display: block;
}
.kicker--accent { color: var(--brique-terne); }

.mention {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.5;
  color: var(--pierre-chaude);
  margin: 16px 0 0;
}

.citation {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--encre-nuit);
  text-align: center;
  max-width: 760px;
  margin: 80px auto;
  padding: 48px 32px;
  border-top: 1px solid rgba(58, 46, 37, 0.3);
  border-bottom: 1px solid rgba(58, 46, 37, 0.3);
}

.italique-edito {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.5;
  color: var(--encre-nuit);
  margin: 32px 0;
}

/* Filet typographique de ponctuation */
.filet {
  display: block;
  width: 64px;
  height: 1px;
  background: var(--taupe-profond);
  opacity: 0.3;
  margin: 56px auto;
  border: none;
}

/* ==========================================================================
   BOUTONS / CTA
   ========================================================================== */

.cta, .cta-secondaire, .cta-texte {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border-radius: 0;
  transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base), opacity var(--transition-base);
  border: none;
}

.cta {
  background: var(--brique-terne);
  color: var(--papier-ivoire);
  padding: 17px 32px;
}
.cta:hover { background: var(--brique-fonce); }

.cta-secondaire {
  background: transparent;
  color: var(--encre-nuit);
  padding: 16px 31px;
  border: 1px solid var(--encre-nuit);
}
.cta-secondaire:hover {
  background: var(--encre-nuit);
  color: var(--papier-ivoire);
}

.cta-texte {
  background: transparent;
  color: var(--brique-terne);
  padding: 4px 0;
  border-bottom: 1px solid var(--brique-terne);
  font-size: 14px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.cta-texte:hover { opacity: 0.7; }

.cta:focus-visible,
.cta-secondaire:focus-visible,
.cta-texte:focus-visible {
  outline: 2px solid var(--encre-nuit);
  outline-offset: 3px;
}

.cta-group {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 32px;
}
.cta-group--center { justify-content: center; }

/* Petit label de public au-dessus d'un CTA (« RH · Dirigeant · PDG ») */
.cta-public {
  display: block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pierre-chaude);
  margin: 0 0 14px;
}
.cta-group .cta-public { width: 100%; flex-basis: 100%; }

/* Paire label + bouton (deux CTAs côte à côte, chacun avec son public) */
.cta-paire {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.cta-paire .cta-public { margin: 0; width: auto; flex-basis: auto; }
.cta-group--center .cta-paire { align-items: center; }
@media (max-width: 640px) {
  .cta-paire { width: 100%; align-items: stretch; }
  .cta-paire .cta, .cta-paire .cta-secondaire { text-align: center; }
}

@media (max-width: 640px) {
  .cta-group { flex-direction: column; align-items: stretch; }
  .cta-group .cta, .cta-group .cta-secondaire { text-align: center; width: 100%; }
}

/* ==========================================================================
   NAVIGATION
   ========================================================================== */

.nav-top {
  position: sticky;
  top: 0;
  background: var(--papier-ivoire);
  border-bottom: 1px solid var(--gris-papier-fonce);
  padding: 22px 48px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  z-index: 100;
  gap: 32px;
}

.nav-logo {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.005em;
  color: var(--encre-nuit);
  text-decoration: none;
  white-space: nowrap;
}
.nav-logo-sous {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pierre-chaude);
  margin-left: 12px;
}

.nav-items {
  display: flex;
  gap: 28px;
  align-items: center;
}
.nav-items a {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 14px;
  color: var(--encre-nuit);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-base);
  white-space: nowrap;
}
.nav-items a:hover,
.nav-items a.active {
  border-bottom-color: var(--encre-nuit);
}

.nav-burger {
  display: none;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--encre-nuit);
  background: transparent;
  border: 1px solid var(--encre-nuit);
  padding: 8px 16px;
  cursor: pointer;
  border-radius: 0;
}

.nav-mobile {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--creme-lisse);
  z-index: 200;
  padding: 24px 32px;
  flex-direction: column;
}
.nav-mobile.open { display: flex; }
.nav-mobile-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 48px;
}
.nav-mobile-items {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.nav-mobile-items a {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 28px;
  color: var(--encre-nuit);
  text-decoration: none;
}

@media (max-width: 1080px) {
  .nav-items { display: none; }
  .nav-burger { display: inline-block; }
  .nav-top { padding: 18px 24px; }
  .nav-logo-sous { display: none; }
}

/* ==========================================================================
   SECTIONS
   ========================================================================== */

section {
  padding: var(--section-vertical) var(--section-padding-laterale);
}
.contenu, section > .contenu {
  max-width: var(--content-max);
  margin: 0 auto;
}
.contenu.contenu--large { max-width: var(--content-max-large); margin: 0 auto; }
section.alternee { background: var(--creme-lisse); }
section.encre { background: var(--encre-nuit); color: var(--papier-ivoire); }

/* ==========================================================================
   PAGE HERO
   ========================================================================== */

.page-hero {
  padding: 128px var(--section-padding-laterale) 96px;
}
.page-hero .contenu { max-width: 880px; }

@media (max-width: 768px) {
  .page-hero { padding: 72px var(--section-padding-laterale) 56px; }
}

/* ----- Home hero — éditorial deux colonnes avec portrait ----- */

.hero-edito {
  padding: 0;
  border-bottom: 1px solid var(--gris-papier-fonce);
}
.hero-edito-grille {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: stretch;
  min-height: calc(100vh - 78px);
  max-height: 880px;
}
.hero-edito-texte {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 96px clamp(40px, 6vw, 96px) 96px clamp(40px, 8vw, 120px);
  border-right: 1px solid var(--gris-papier-fonce);
  background: var(--papier-ivoire);
  position: relative;
}
.hero-edito-texte .kicker { margin-bottom: 32px; }
.hero-edito-texte h1 {
  font-size: clamp(38px, 4.6vw, 60px);
  margin-bottom: 28px;
}
.hero-edito-texte .sous-titre {
  font-size: clamp(18px, 1.5vw, 22px);
  margin-bottom: 40px;
  max-width: 540px;
}
.hero-edito-texte .cta-group { margin-top: 8px; }

/* Petite signature institutionnelle en bas du texte */
.hero-edito-signature {
  position: absolute;
  bottom: 40px;
  left: clamp(40px, 8vw, 120px);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--pierre-chaude);
  display: flex;
  align-items: center;
  gap: 14px;
}
.hero-edito-signature::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--pierre-chaude);
  opacity: 0.6;
}

.hero-edito-image {
  position: relative;
  overflow: hidden;
  background: var(--creme-lisse);
}
.hero-edito-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  /* Photo naturelle, sans filtre */
  display: block;
}
/* Voile crème très léger pour fondre dans le papier ivoire */
.hero-edito-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--papier-ivoire);
  mix-blend-mode: multiply;
  opacity: 0;
  pointer-events: none;
}
/* Repère gauche : un filet vertical qui répond au filet de la grille */
.hero-edito-image::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
}

/* Légende discrète sur l'image */
.hero-edito-legende {
  position: absolute;
  bottom: 24px;
  right: 24px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--papier-ivoire);
  background: rgba(26, 31, 46, 0.55);
  padding: 8px 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.hero-edito-legende::before {
  content: "";
  width: 18px;
  height: 1px;
  background: rgba(245, 240, 230, 0.7);
}

@media (max-width: 1080px) {
  .hero-edito-grille {
    grid-template-columns: 1fr;
    min-height: 0;
    max-height: none;
  }
  .hero-edito-texte {
    border-right: none;
    border-bottom: 1px solid var(--gris-papier-fonce);
    padding: 72px 24px 96px;
    order: 2;
  }
  .hero-edito-image {
    order: 1;
    aspect-ratio: 4 / 3.4;
    max-height: 560px;
  }
  .hero-edito-image img {
    object-position: center 25%;
  }
  .hero-edito-signature {
    position: static;
    margin-top: 48px;
  }
}
@media (max-width: 640px) {
  .hero-edito-image {
    aspect-ratio: 4 / 4.2;
  }
  .hero-edito-texte { padding: 56px 20px 72px; }
}

/* ==========================================================================
   LISTES
   ========================================================================== */

ul.puces {
  list-style: none;
  padding-left: 0;
  margin: 24px 0;
}
ul.puces li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 14px;
  line-height: 1.7;
  font-size: 17px;
}
ul.puces li::before {
  content: "—";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--pierre-chaude);
  font-weight: 400;
}
ul.puces.large li { font-size: 19px; line-height: 1.65; }
ul.puces li strong { font-weight: 600; color: var(--encre-nuit); }

/* ==========================================================================
   PAVÉS NUMÉROTÉS — variantes éditoriales
   ========================================================================== */

.pave-numerote {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 40px;
  align-items: start;
  padding: 40px 0;
  border-bottom: 1px solid var(--gris-papier-fonce);
}
.pave-numerote:last-child { border-bottom: none; }
.pave-numero {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 52px;
  line-height: 1;
  color: var(--pierre-chaude);
  letter-spacing: -0.02em;
}
.pave-numerote h4 { margin-top: 10px; margin-bottom: 12px; }
.pave-numerote p:last-child { margin-bottom: 0; }

/* — Variante 01 : numéro en filigrane derrière le titre (oversize, italique) */
.pave-filigrane {
  position: relative;
  padding: 56px 0 40px;
  border-bottom: 1px solid var(--gris-papier-fonce);
  isolation: isolate;
}
.pave-filigrane:last-child { border-bottom: none; }
.pave-filigrane::before {
  content: attr(data-num);
  position: absolute;
  top: -16px;
  left: -12px;
  font-family: var(--serif);
  font-weight: 700;
  font-style: italic;
  font-size: clamp(120px, 14vw, 180px);
  line-height: 0.85;
  color: var(--gris-papier-fonce);
  z-index: -1;
  letter-spacing: -0.05em;
  pointer-events: none;
  user-select: none;
  opacity: 0.7;
}
.pave-filigrane > .pave-corps { position: relative; padding-left: 24px; padding-top: 20px; }
.pave-filigrane h4 { margin-bottom: 14px; }
.pave-filigrane p:last-child { margin-bottom: 0; }
section.alternee .pave-filigrane::before { color: #EFE6D2; opacity: 1; }
@media (max-width: 768px) {
  .pave-filigrane { padding: 36px 0 28px; }
  .pave-filigrane > .pave-corps { padding-left: 0; padding-top: 56px; }
}

/* — Variante 02 : numéro inline avec le titre (« I.  Titre ») */
.pave-inline {
  padding: 28px 0;
  border-bottom: 1px solid var(--gris-papier-fonce);
}
.pave-inline:last-child { border-bottom: none; }
.pave-inline-titre {
  display: flex;
  align-items: baseline;
  gap: 20px;
  margin: 0 0 14px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--encre-nuit);
}
.pave-inline-num {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: 26px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--brique-terne);
  flex-shrink: 0;
  min-width: 38px;
}
.pave-inline p:last-child { margin-bottom: 0; }

/* — Variante 03 : numéro centré avec filet (chapitre) */
.pave-chapitre {
  text-align: center;
  padding: 56px 0;
  border-bottom: 1px solid var(--gris-papier-fonce);
}
.pave-chapitre:last-child { border-bottom: none; }
.pave-chapitre-mark {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  color: var(--pierre-chaude);
  letter-spacing: 0.05em;
  margin-bottom: 24px;
}
.pave-chapitre-mark::before,
.pave-chapitre-mark::after {
  content: "";
  display: block;
  width: 56px;
  height: 1px;
  background: var(--pierre-chaude);
  opacity: 0.5;
}
.pave-chapitre h4 { margin-bottom: 16px; }
.pave-chapitre p { max-width: 620px; margin-left: auto; margin-right: auto; }
.pave-chapitre p:last-child { margin-bottom: 0; }

@media (max-width: 768px) {
  .pave-numerote { grid-template-columns: 1fr; gap: 12px; padding: 32px 0; }
  .pave-numero { font-size: 36px; }
}

/* ==========================================================================
   ORNEMENTS & VARIATIONS ÉDITORIALES
   ========================================================================== */

/* Drop cap — initiale ornementée pour ouvrir un paragraphe long */
.dropcap::first-letter,
p.dropcap::first-letter {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 76px;
  line-height: 0.85;
  float: left;
  padding: 8px 14px 0 0;
  margin: 4px -2px 0 0;
  color: var(--brique-terne);
}

/* Fleuron typographique — séparateur élégant entre paragraphes */
.fleuron {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 64px auto;
  color: var(--pierre-chaude);
  opacity: 0.7;
}
.fleuron::before,
.fleuron::after {
  content: "";
  display: block;
  width: 36px;
  height: 1px;
  background: currentColor;
}
.fleuron::after { background: currentColor; }
.fleuron-glyph {
  font-family: var(--serif);
  font-size: 14px;
  font-style: italic;
  letter-spacing: 0.4em;
  padding-left: 0.4em;
}
.fleuron-glyph::before { content: "·  ·  ·"; }

/* Variante asterism — trois points en triangle */
.fleuron--asterism .fleuron-glyph::before {
  content: "❦";
  font-size: 18px;
  letter-spacing: 0;
  padding: 0;
}

/* Marginalia — note typographique latérale alignée à droite ou gauche */
.marginalia {
  position: relative;
  padding-left: 28px;
  margin: 40px 0;
}
.marginalia::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--brique-terne);
}
.marginalia p {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.55;
  color: var(--encre-nuit);
  margin: 0;
}
.marginalia-meta {
  display: block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pierre-chaude);
  margin-bottom: 10px;
}

/* Section mark — grand numéral romain en ouverture de section */
.section-mark {
  display: block;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(56px, 7vw, 88px);
  line-height: 1;
  color: var(--gris-pierre-clair);
  letter-spacing: 0.02em;
  margin: 0 0 24px;
  opacity: 0.5;
}

/* Pull-quote dans le flux du texte (différent de .citation, plus discret) */
.pull-quote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.4;
  color: var(--encre-nuit);
  border-left: 2px solid var(--brique-terne);
  padding: 6px 0 6px 28px;
  margin: 48px 0;
  max-width: 92%;
}

/* Ligne d'incipit — première ligne d'une section en italique élégant */
.incipit::first-line {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.5;
  color: var(--encre-nuit);
}

/* Asterisme — 3 étoiles en triangle, séparateur très discret */
.asterisme {
  display: block;
  text-align: center;
  font-family: var(--serif);
  font-size: 22px;
  color: var(--pierre-chaude);
  margin: 56px auto;
  opacity: 0.6;
  line-height: 1;
}
.asterisme::before { content: "⁂"; }

/* ==========================================================================
   PHOTOS ÉDITORIALES — bandeau plein, asymétrique, scène
   ========================================================================== */

/* Bandeau photo plein bleed avec citation en surimpression */
.photo-bandeau {
  position: relative;
  width: 100%;
  height: clamp(360px, 50vw, 540px);
  overflow: hidden;
  background: var(--encre-nuit);
  display: flex;
  align-items: flex-end;
  isolation: isolate;
}
.photo-bandeau img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.5) contrast(0.92) brightness(0.78) sepia(0.08);
  z-index: 0;
}
.photo-bandeau::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(26, 31, 46, 0.94) 0%, rgba(26, 31, 46, 0.78) 30%, rgba(26, 31, 46, 0.45) 58%, rgba(26, 31, 46, 0.18) 80%, rgba(26, 31, 46, 0) 100%);
  z-index: 1;
  pointer-events: none;
}
.photo-bandeau-contenu {
  position: relative;
  z-index: 2;
  max-width: 900px;
  padding: 56px clamp(24px, 4vw, 56px);
  color: var(--papier-ivoire);
}
.photo-bandeau-kicker {
  display: block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245, 240, 230, 0.7);
  margin-bottom: 18px;
}
.photo-bandeau-citation {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.35;
  color: var(--papier-ivoire);
  margin: 0;
  max-width: 760px;
  text-shadow: 0 1px 24px rgba(0, 0, 0, 0.35);
}
.photo-bandeau-legende {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 240, 230, 0.55);
  margin-top: 28px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.photo-bandeau-legende::before {
  content: "";
  width: 24px;
  height: 1px;
  background: rgba(245, 240, 230, 0.55);
}

/* Bloc asymétrique : photo + texte (côte à côte, dans le flux du contenu) */
.photo-scene {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
  margin: 80px auto;
  max-width: var(--content-max-large);
}
.photo-scene--inverse { grid-template-columns: 0.9fr 1.1fr; }
.photo-scene--inverse .photo-scene-figure { order: 2; }
.photo-scene--inverse .photo-scene-texte { order: 1; }
.photo-scene-figure {
  margin: 0;
  position: relative;
  background: var(--creme-lisse);
}
.photo-scene-figure img {
  width: 100%;
  height: auto;
  display: block;
  filter: saturate(0.55) contrast(0.94) brightness(1.02) sepia(0.08);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.photo-scene-figure::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--papier-ivoire);
  mix-blend-mode: multiply;
  opacity: 0.05;
  pointer-events: none;
}
.photo-scene-legende {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pierre-chaude);
  margin-top: 16px;
  display: block;
}
.photo-scene-texte .kicker { margin-bottom: 14px; }
.photo-scene-texte h3 { margin-bottom: 18px; }
.photo-scene-texte p:last-child { margin-bottom: 0; }
@media (max-width: 900px) {
  .photo-scene, .photo-scene--inverse {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .photo-scene--inverse .photo-scene-figure { order: 1; }
  .photo-scene--inverse .photo-scene-texte { order: 2; }
}

/* ==========================================================================
   DIAGRAMME "LE PONT" — visualisation typographique du décalage
   ========================================================================== */

.diagramme-pont {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: center;
  max-width: 720px;
  margin: 56px auto;
  padding: 40px 0;
  border-top: 1px solid var(--gris-papier-fonce);
  border-bottom: 1px solid var(--gris-papier-fonce);
}
.diagramme-pont-cote {
  text-align: center;
  padding: 0 12px;
}
.diagramme-pont-label {
  display: block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pierre-chaude);
  margin-bottom: 14px;
}
.diagramme-pont-mot {
  display: block;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.25;
  color: var(--encre-nuit);
  margin-bottom: 10px;
}
.diagramme-pont-meta {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4;
  color: var(--pierre-chaude);
}
.diagramme-pont-arc {
  position: relative;
  width: 96px;
  height: 56px;
}
.diagramme-pont-arc svg {
  width: 100%;
  height: 100%;
  display: block;
}
@media (max-width: 640px) {
  .diagramme-pont {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 32px 0;
  }
  .diagramme-pont-arc {
    width: 56px;
    height: 36px;
    transform: rotate(90deg);
    margin: 0 auto;
  }
}

/* ==========================================================================
   TIMELINE ÉDITORIALE — horizontale, 4 jalons
   ========================================================================== */

.timeline-edito {
  position: relative;
  margin: 64px auto 32px;
  max-width: var(--content-max-large);
  padding: 24px 0 48px;
}
.timeline-edito-axe {
  position: relative;
  height: 1px;
  background: var(--gris-papier-fonce);
  margin: 0 32px 0;
}
.timeline-edito-grille {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding: 0 32px;
  margin-top: -7px;
}
.timeline-edito-jalon {
  text-align: left;
  position: relative;
  padding-top: 0;
}
.timeline-edito-jalon::before {
  content: "";
  display: block;
  width: 13px;
  height: 13px;
  background: var(--papier-ivoire);
  border: 1px solid var(--encre-nuit);
  margin-bottom: 28px;
  margin-left: 0;
}
section.alternee .timeline-edito-jalon::before { background: var(--creme-lisse); }
.timeline-edito-jalon--actif::before { background: var(--brique-terne) !important; border-color: var(--brique-terne); }
.timeline-edito-annee {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  color: var(--brique-terne);
  margin-bottom: 6px;
}
.timeline-edito-titre {
  display: block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--encre-nuit);
  margin-bottom: 12px;
  line-height: 1.4;
}
.timeline-edito-desc {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
  color: var(--encre-nuit);
  margin: 0;
}
@media (max-width: 900px) {
  .timeline-edito-grille { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .timeline-edito-grille { grid-template-columns: 1fr; gap: 36px; margin-top: 24px; }
  .timeline-edito-axe { display: none; }
}

/* ==========================================================================
   PAGES LÉGALES — typographie de document
   ========================================================================== */

.page-legale {
  padding: 96px var(--section-padding-laterale) 144px;
}
.page-legale .contenu {
  max-width: 760px;
  margin: 0 auto;
}
.page-legale-meta {
  display: block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pierre-chaude);
  margin: 24px 0 56px;
}
.page-legale h1 { margin-bottom: 16px; }
.page-legale h2 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--encre-nuit);
  margin: 56px 0 18px;
}
.page-legale h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--encre-nuit);
  margin: 32px 0 14px;
}
.page-legale p {
  font-size: 16px;
  line-height: 1.7;
  margin: 0 0 18px;
}
.page-legale ul {
  list-style: none;
  padding-left: 0;
  margin: 0 0 24px;
}
.page-legale ul li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 1.65;
}
.page-legale ul li::before {
  content: "—";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--pierre-chaude);
}
.page-legale address {
  font-style: normal;
  font-size: 16px;
  line-height: 1.6;
  padding: 18px 0 18px 22px;
  border-left: 1px solid var(--gris-papier-fonce);
  margin: 0 0 24px;
}
.page-legale .filet { margin: 48px auto; }

/* ==========================================================================
   ENCADRÉS
   ========================================================================== */

.encadre {
  background: var(--creme-lisse);
  padding: 44px 48px;
  margin: 40px 0;
}
.encadre-narratif {
  background: var(--creme-lisse);
  border-left: 3px solid var(--brique-terne);
  padding: 44px 48px;
  margin: 40px 0;
}
.encadre-narratif h3 { margin-bottom: 24px; }
.encadre-narratif p:last-child { margin-bottom: 0; }
.encadre-tarif {
  background: var(--papier-ivoire);
  border: 1px solid var(--gris-papier-fonce);
  padding: 40px 44px;
  margin: 24px 0;
}
.encadre-tarif .tarif-titre {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pierre-chaude);
  margin-bottom: 16px;
}
.encadre-tarif .tarif-valeur {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 32px;
  color: var(--encre-nuit);
  display: block;
  margin-bottom: 4px;
}
.encadre-tarif .tarif-detail {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--pierre-chaude);
  margin-bottom: 16px;
}
.encadre-tarif.recommande { border: 1px solid var(--encre-nuit); }
.encadre-tarif .badge-recommande {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brique-terne);
  margin-bottom: 12px;
}

@media (max-width: 768px) {
  .encadre, .encadre-narratif, .encadre-tarif { padding: 28px 24px; }
}

/* ==========================================================================
   GRILLES
   ========================================================================== */

.grille-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}
.grille-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

@media (max-width: 900px) {
  .grille-2, .grille-3 { grid-template-columns: 1fr; gap: 32px; }
}

/* Cartes-portes (CTA finaux home, contact) */
.carte-porte {
  background: var(--creme-lisse);
  border-top: 3px solid var(--brique-terne);
  padding: 44px 36px 40px;
  display: flex;
  flex-direction: column;
}
.carte-porte.discrete { border-top: 1px solid var(--gris-pierre-clair); }
.carte-porte-icone {
  width: 68px;
  height: 68px;
  margin: 0 auto 32px;
  color: var(--encre-nuit);
  opacity: 0.92;
}
.carte-porte-icone svg {
  width: 100%;
  height: 100%;
  display: block;
}
.carte-porte .kicker { margin-bottom: 16px; text-align: center; }
.carte-porte h3 { margin-bottom: 16px; text-align: center; }
.carte-porte p { font-size: 16px; line-height: 1.65; flex-grow: 1; text-align: center; }
.carte-porte .cta-texte { align-self: center; margin-top: 20px; }

/* Cartes journal */
.carte-article {
  background: var(--creme-lisse);
  border-top: 1px solid var(--gris-papier-fonce);
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
}
.carte-article.pepite { border-top: 4px solid var(--brique-terne); }
.carte-article .meta {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--pierre-chaude);
  margin-bottom: 16px;
}
.carte-article .meta strong {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--brique-terne);
  font-size: 11px;
}
.carte-article h3 { margin-bottom: 16px; font-size: 22px; line-height: 1.3; }
.carte-article p { font-size: 15px; line-height: 1.6; color: var(--encre-nuit); flex-grow: 1; }
.carte-article .cta-texte { align-self: flex-start; margin-top: 16px; }

/* ==========================================================================
   BIO + CHIFFRES (Home)
   ========================================================================== */

.bio-grille {
  display: grid;
  grid-template-columns: 480px 1fr;
  gap: 72px;
  align-items: start;
}
.bio-portrait {
  aspect-ratio: 3/4;
  background: var(--pierre-chaude);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--papier-ivoire);
  position: relative;
  overflow: hidden;
}
.bio-portrait::before {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    135deg,
    transparent 0 18px,
    rgba(0,0,0,0.04) 18px 36px
  );
}
.bio-portrait span {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245,240,230,0.65);
  text-align: center;
  position: relative;
  z-index: 1;
  padding: 0 20px;
}
/* Variante portrait photographique */
.bio-portrait--photo { background: var(--creme-lisse); }
.bio-portrait--photo::before { content: none; }
.bio-portrait--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}
.bio-portrait--photo::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--papier-ivoire);
  mix-blend-mode: multiply;
  opacity: 0;
  pointer-events: none;
}
.bio-portrait-legende {
  position: absolute;
  bottom: 16px;
  left: 16px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--papier-ivoire);
  background: rgba(26, 31, 46, 0.55);
  padding: 7px 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.bio-portrait-legende::before {
  content: "";
  width: 14px;
  height: 1px;
  background: rgba(245, 240, 230, 0.7);
}

@media (max-width: 900px) {
  .bio-grille { grid-template-columns: 1fr; gap: 40px; }
  .bio-portrait { max-width: 420px; }
}

.bandeau-chiffres {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 112px auto 0;
  max-width: 960px;
  padding-top: 80px;
  border-top: 1px solid var(--gris-papier-fonce);
  position: relative;
}
.bandeau-chiffres::before {
  content: "CHIFFRES TENUS · MAI 2026";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--papier-ivoire);
  padding: 0 16px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--pierre-chaude);
}
section.alternee .bandeau-chiffres::before { background: var(--creme-lisse); }

.chiffre {
  padding: 0 22px;
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.chiffre + .chiffre::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--gris-papier-fonce);
}

/* Logos d'accréditation EMCC et ESIA — version N&B sur fond transparent */
.accreditations {
  display: flex;
  gap: 22px;
  margin-top: 18px;
  justify-content: center;
  align-items: center;
}
.accreditation-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  width: auto;
  filter: grayscale(1) contrast(1.02);
  opacity: 0.85;
  transition: opacity var(--transition-base);
}
.accreditation-logo:hover { opacity: 1; }
.accreditation-logo img {
  height: 100%;
  width: auto;
  display: block;
}
/* Variantes conservées pour micro-ajustements ; toutes alignées sur 56px */
.accreditation-logo--circulaire { height: 56px; }
.accreditation-logo--horizontal { height: 56px; }
@media (max-width: 768px) {
  .accreditation-logo,
  .accreditation-logo--circulaire,
  .accreditation-logo--horizontal { height: 48px; }
  .accreditations { gap: 16px; }
}
.chiffre .valeur {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(40px, 4.6vw, 64px);
  line-height: 1;
  color: var(--encre-nuit);
  display: block;
  margin-bottom: 18px;
  letter-spacing: -0.015em;
  white-space: nowrap;
  /* Animation d'entrée — par défaut visible, JS override quand pris en charge */
  opacity: 1;
  transform: none;
}
.chiffre .valeur .prefixe {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 0.55em;
  vertical-align: 0.15em;
  margin-right: 0.08em;
  color: var(--pierre-chaude);
}
.chiffre .valeur .unite {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 0.42em;
  margin-left: 0.12em;
  color: var(--pierre-chaude);
  letter-spacing: 0;
}
.chiffre .valeur.texte {
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.15;
  letter-spacing: 0;
  padding-top: clamp(16px, 2vw, 28px);
}
.chiffre .legende {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pierre-chaude);
  line-height: 1.5;
  display: block;
}

/* Animation d'entrée — discrète, déclenchée à l'apparition dans le viewport */
.bandeau-chiffres[data-anime] .chiffre .valeur,
.bandeau-chiffres[data-anime] .chiffre .legende {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 700ms ease, transform 700ms ease;
}
.bandeau-chiffres[data-anime].entre .chiffre .valeur,
.bandeau-chiffres[data-anime].entre .chiffre .legende {
  opacity: 1;
  transform: none;
}
.bandeau-chiffres[data-anime].entre .chiffre:nth-child(1) .valeur { transition-delay: 0ms; }
.bandeau-chiffres[data-anime].entre .chiffre:nth-child(2) .valeur { transition-delay: 140ms; }
.bandeau-chiffres[data-anime].entre .chiffre:nth-child(3) .valeur { transition-delay: 280ms; }
.bandeau-chiffres[data-anime].entre .chiffre:nth-child(4) .valeur { transition-delay: 420ms; }
.bandeau-chiffres[data-anime].entre .chiffre:nth-child(1) .legende { transition-delay: 200ms; }
.bandeau-chiffres[data-anime].entre .chiffre:nth-child(2) .legende { transition-delay: 340ms; }
.bandeau-chiffres[data-anime].entre .chiffre:nth-child(3) .legende { transition-delay: 480ms; }
.bandeau-chiffres[data-anime].entre .chiffre:nth-child(4) .legende { transition-delay: 620ms; }

@media (prefers-reduced-motion: reduce) {
  .bandeau-chiffres[data-anime] .chiffre .valeur,
  .bandeau-chiffres[data-anime] .chiffre .legende {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

@media (max-width: 900px) {
  .bandeau-chiffres { grid-template-columns: 1fr 1fr; gap: 48px 0; margin-top: 64px; padding-top: 56px; }
  .chiffre { padding: 0 20px; }
  .chiffre:nth-child(3)::before { display: none; }
  .chiffre:nth-child(odd)::before { display: none; }
}
@media (max-width: 480px) {
  .bandeau-chiffres { grid-template-columns: 1fr; gap: 40px 0; }
  .chiffre { padding: 0; text-align: center; }
  .chiffre + .chiffre {
    padding-top: 40px;
    border-top: 1px solid var(--gris-papier-fonce);
  }
  .chiffre + .chiffre::before { display: none; }
}

/* ==========================================================================
   BLOC MANIFESTE
   ========================================================================== */

.bloc-manifeste {
  background: var(--encre-nuit);
  color: var(--papier-ivoire);
  padding: 128px var(--section-padding-laterale);
  position: relative;
  overflow: hidden;
}
/* Bloc en deux colonnes : portrait à gauche, parole à droite. */
.bloc-manifeste-grille {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 80px;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
}
.bloc-manifeste-portrait {
  width: 320px;
  height: 320px;
  margin: 0;
  position: relative;
}
.bloc-manifeste-portrait img {
  width: 100%;
  height: 100%;
  display: block;
  /* Le portrait est déjà circulaire (cercle bleu marine du fichier source) ;
     l'anneau se fond dans l'encre nuit, le visage émerge */
  filter: grayscale(0.35) contrast(0.95) brightness(0.95);
}
/* Halo discret derrière le portrait — donne du relief sans cadre dur */
.bloc-manifeste-portrait::before {
  content: "";
  position: absolute;
  inset: -24px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(245, 240, 230, 0.06) 30%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.bloc-manifeste-content {
  text-align: left;
}
.bloc-manifeste-texte {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.5;
  max-width: 560px;
  margin: 0 0 40px;
  color: var(--papier-ivoire);
  text-align: left;
}
.bloc-manifeste-signature {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245, 240, 230, 0.6);
}
.bloc-manifeste-signature::before {
  content: "";
  width: 32px;
  height: 1px;
  background: rgba(245, 240, 230, 0.4);
}

@media (max-width: 860px) {
  .bloc-manifeste { padding: 88px var(--section-padding-laterale); }
  .bloc-manifeste-grille {
    grid-template-columns: 1fr;
    gap: 48px;
    text-align: center;
    justify-items: center;
  }
  .bloc-manifeste-portrait {
    width: 220px;
    height: 220px;
  }
  .bloc-manifeste-content { text-align: center; }
  .bloc-manifeste-texte { text-align: center; margin-left: auto; margin-right: auto; }
}

/* — Variante typographique pure (sans portrait) : citation monumentale —
   Centré, encadré de guillemets démesurés en brique terne, articulé par un filet. */
.bloc-manifeste--solo .bloc-manifeste-citation {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  padding: 80px 32px 56px;
}
.bloc-manifeste--solo .bloc-manifeste-citation::before,
.bloc-manifeste--solo .bloc-manifeste-citation::after {
  font-family: var(--serif);
  font-weight: 700;
  font-style: italic;
  color: var(--brique-terne);
  opacity: 0.85;
  position: absolute;
  font-size: clamp(120px, 14vw, 180px);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
.bloc-manifeste--solo .bloc-manifeste-citation::before {
  content: "«";
  top: -8px;
  left: 0;
}
.bloc-manifeste--solo .bloc-manifeste-citation::after {
  content: "»";
  bottom: -48px;
  right: 0;
}
.bloc-manifeste--solo .citation-ligne {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  line-height: 1.35;
  color: var(--papier-ivoire);
}
.bloc-manifeste--solo .citation-ligne--negation {
  font-size: clamp(24px, 3vw, 36px);
  color: rgba(245, 240, 230, 0.7);
  margin-bottom: 28px;
}
.bloc-manifeste--solo .citation-filet {
  display: block;
  width: 64px;
  height: 1px;
  background: var(--brique-terne);
  margin: 28px auto;
  opacity: 0.8;
}
.bloc-manifeste--solo .citation-ligne--affirmation {
  font-size: clamp(32px, 4vw, 46px);
  font-weight: 400;
  color: var(--papier-ivoire);
  letter-spacing: -0.005em;
}
.bloc-manifeste--solo .bloc-manifeste-signature {
  display: block;
  text-align: center;
  margin-top: 56px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245, 240, 230, 0.55);
  position: relative;
  padding-top: 32px;
}
.bloc-manifeste--solo .bloc-manifeste-signature::before {
  content: "";
  display: block;
  width: 28px;
  height: 1px;
  background: rgba(245, 240, 230, 0.4);
  margin: 0 auto 24px;
}
@media (max-width: 640px) {
  .bloc-manifeste--solo .bloc-manifeste-citation { padding: 56px 16px 40px; }
  .bloc-manifeste--solo .bloc-manifeste-citation::before { left: -6px; top: -4px; }
  .bloc-manifeste--solo .bloc-manifeste-citation::after { right: -6px; bottom: -36px; }
}
.bloc-manifeste-signature {
  display: block;
  margin-top: 48px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245,240,230,0.6);
}

@media (max-width: 768px) {
  .bloc-manifeste { padding: 80px var(--section-padding-laterale); }
}

/* ==========================================================================
   FORMULAIRES
   ========================================================================== */

.form-row { margin-bottom: 24px; }
.form-label {
  display: block;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--encre-nuit);
  margin-bottom: 10px;
}
.form-input, .form-textarea, .form-select {
  width: 100%;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--encre-nuit);
  background: var(--papier-ivoire);
  border: 1px solid var(--gris-papier-fonce);
  border-radius: 0;
  padding: 14px 16px;
  transition: border-color var(--transition-base);
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
  outline: none;
  border-color: var(--encre-nuit);
}
.form-textarea { min-height: 140px; resize: vertical; font-family: var(--sans); }

.form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  line-height: 1.5;
  margin: 8px 0 24px;
  cursor: pointer;
}
.form-checkbox input[type="checkbox"] {
  appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid var(--encre-nuit);
  background: var(--papier-ivoire);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  margin-top: 2px;
}
.form-checkbox input[type="checkbox"]:checked { background: var(--encre-nuit); }
.form-checkbox input[type="checkbox"]:checked::after {
  content: "✓";
  position: absolute;
  top: -3px;
  left: 2px;
  color: var(--papier-ivoire);
  font-size: 14px;
  font-weight: 700;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer {
  background: var(--encre-nuit);
  color: var(--papier-ivoire);
  padding: 96px 48px 40px;
}
.footer-bloc-principal {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  max-width: 1200px;
  margin: 0 auto 64px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(245, 240, 230, 0.15);
}
.footer-nom {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 22px;
  margin-bottom: 14px;
}
.footer-baseline {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(245, 240, 230, 0.7);
  max-width: 340px;
  margin: 0;
}
.footer-colonne h5 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 240, 230, 0.55);
  margin: 0 0 22px;
}
.footer-colonne a {
  display: block;
  font-size: 14px;
  color: var(--papier-ivoire);
  text-decoration: none;
  margin-bottom: 12px;
  transition: color var(--transition-base);
}
.footer-colonne a:hover { color: rgba(245, 240, 230, 0.6); }

.footer-bas {
  display: flex;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  font-size: 12px;
  color: rgba(245, 240, 230, 0.5);
  gap: 24px;
  flex-wrap: wrap;
}
.footer-bas a {
  color: rgba(245, 240, 230, 0.7);
  text-decoration: none;
  margin: 0 4px;
}

@media (max-width: 900px) {
  .footer-bloc-principal { grid-template-columns: 1fr 1fr; }
  .site-footer { padding: 64px 24px 32px; }
}
@media (max-width: 540px) {
  .footer-bloc-principal { grid-template-columns: 1fr; gap: 32px; }
}

/* ==========================================================================
   LOGO — COACH DE RÉFÉRENCE (sceau typographique)
   ========================================================================== */

.seal-cr {
  display: block;
  margin: 0 auto 28px;
  width: 130px;
  height: 130px;
}
.seal-cr svg { display: block; width: 100%; height: 100%; }
.seal-cr--lg { width: 168px; height: 168px; margin-bottom: 36px; }
/* ==========================================================================
   LOGO — COACH DE RÉFÉRENCE (sceau typographique)
   ========================================================================== */

.seal-cr {
  display: block;
  margin: 0 auto 28px;
  width: 130px;
  height: 130px;
}
.seal-cr svg { display: block; width: 100%; height: 100%; }
.seal-cr--lg { width: 168px; height: 168px; margin-bottom: 36px; }
@media (max-width: 640px) {
  .seal-cr { width: 110px; height: 110px; }
}

/* Mockup carnet — produit posé sur la page, façon catalogue */
.mockup-carnet {
  display: block;
  margin: 72px auto 56px;
  width: 100%;
  max-width: 560px;
  /* Aucun fond, aucun cadre : le carnet est posé sur la couleur de la section */
}
.mockup-carnet svg { display: block; width: 100%; height: auto; }
@media (max-width: 640px) {
  .mockup-carnet { margin: 56px auto 40px; max-width: 380px; }
}

/* ==========================================================================
   OBJET CARTE — visuel posé (carte de visite, marqueur tangible du label)
   ========================================================================== */

.objet-carte {
  display: block;
  margin: 64px auto;
  max-width: 760px;
  position: relative;
  text-align: center;
}
.objet-carte img {
  display: block;
  width: 100%;
  height: auto;
  /* L'ombre est désormais dans l'image elle-même (PNG transparent) */
}
.objet-carte-legende {
  display: block;
  margin-top: 32px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--pierre-chaude);
}
.objet-carte-legende::before,
.objet-carte-legende::after {
  content: "·";
  margin: 0 14px;
  opacity: 0.5;
}
@media (max-width: 640px) {
  .objet-carte { margin: 40px auto; max-width: 100%; }
  .objet-carte-legende { font-size: 9px; letter-spacing: 0.22em; }
}

/* ==========================================================================
   DOSSIER AUDIT — mockup éditorial du livrable
   ========================================================================== */

.dossier-audit {
  display: block;
  max-width: 720px;
  margin: 56px auto 48px;
  position: relative;
}
.dossier-audit svg {
  display: block;
  width: 100%;
  height: auto;
  /* Ombre plus discrète — document posé sans surenchère */
  filter: drop-shadow(0 12px 18px rgba(26, 31, 46, 0.08))
          drop-shadow(0 3px 5px rgba(26, 31, 46, 0.04));
}
.dossier-audit-legende {
  display: block;
  text-align: center;
  margin-top: 28px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--pierre-chaude);
}
.dossier-audit-legende::before,
.dossier-audit-legende::after {
  content: "·";
  margin: 0 14px;
  opacity: 0.5;
}
@media (max-width: 640px) {
  .dossier-audit { margin: 32px auto; }
  .dossier-audit-legende { font-size: 9px; letter-spacing: 0.22em; }
}

/* ==========================================================================
   LISTE "ENLEVER" — colonne de 3, marque typographique forte (−)
   ========================================================================== */

.enlever-liste {
  list-style: none;
  padding: 0;
  margin: 48px 0 32px;
  border-top: 1px solid var(--gris-papier-fonce);
}
.enlever-item {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 32px;
  align-items: center;
  padding: 28px 4px;
  border-bottom: 1px solid var(--gris-papier-fonce);
}
.enlever-marque {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(48px, 5vw, 64px);
  line-height: 1;
  color: var(--brique-terne);
  text-align: center;
  user-select: none;
}
.enlever-item p {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.4;
  color: var(--encre-nuit);
  margin: 0;
}
@media (max-width: 640px) {
  .enlever-item { grid-template-columns: 56px 1fr; gap: 20px; padding: 22px 0; }
  .enlever-marque { font-size: 42px; }
}

/* ==========================================================================
   TRIPTYQUE — 3 axes mis en valeur (mosaïque typographique)
   ========================================================================== */

.triptyque {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--gris-papier-fonce);
  margin: 48px 0;
}
.triptyque-axe {
  background: var(--papier-ivoire);
  padding: 48px 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  position: relative;
}
section.alternee .triptyque-axe { background: var(--creme-lisse); }
.triptyque-num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 36px;
  color: var(--brique-terne);
  margin-bottom: 22px;
  line-height: 1;
}
.triptyque-axe h4 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.35;
  text-transform: none;
  letter-spacing: 0;
  color: var(--encre-nuit);
  margin: 0;
  max-width: 220px;
}
@media (max-width: 768px) {
  .triptyque { grid-template-columns: 1fr; gap: 1px; }
  .triptyque-axe { padding: 36px 24px; }
}

.scene-objet {
  --scene-bg: #C8B6A4;
  background: var(--scene-bg);
  padding: 0;
  position: relative;
  overflow: hidden;
}
.scene-objet-figure {
  margin: 0;
  width: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  max-height: 560px;
}
.scene-objet-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* ==========================================================================
   TÉMOIGNAGES — cartes éditoriales sobres
   ========================================================================== */

.temoignages {
  padding: var(--section-vertical) var(--section-padding-laterale);
}
.temoignages .contenu {
  max-width: var(--content-max-large);
  margin: 0 auto;
  text-align: center;
}
.temoignages h2 { margin-bottom: 64px; }
.temoignages-grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  text-align: left;
}
.temoignage {
  background: var(--creme-lisse);
  border-top: 2px solid var(--encre-nuit);
  padding: 44px 40px 40px;
  display: flex;
  flex-direction: column;
}
.temoignage-exergue {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1.4;
  color: var(--encre-nuit);
  margin: 0 0 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--gris-papier-fonce);
}
.temoignage-corps {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.7;
  color: var(--encre-nuit);
  margin: 0 0 32px;
  flex-grow: 1;
}
.temoignage-signature {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.temoignage-nom {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 17px;
  color: var(--encre-nuit);
}
.temoignage-role {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pierre-chaude);
}
.temoignage-role::before {
  content: "·";
  margin-right: 10px;
  color: var(--pierre-chaude);
  font-weight: 400;
  letter-spacing: 0;
}
.temoignage--seul {
  grid-column: 1 / -1;
  max-width: 720px;
  margin: 0 auto;
  border-top-color: var(--brique-terne);
}
@media (max-width: 760px) {
  .temoignages-grille { grid-template-columns: 1fr; gap: 24px; }
  .temoignage { padding: 32px 24px; }
}

/* ==========================================================================
   BANDEAU CRÉDIBILITÉ — logos clients en niveaux de gris
   ========================================================================== */

.bandeau-credibilite {
  padding: 88px var(--section-padding-laterale);
  border-top: 1px solid var(--gris-papier-fonce);
  border-bottom: 1px solid var(--gris-papier-fonce);
}
.bandeau-credibilite .contenu {
  max-width: var(--content-max-large);
  text-align: center;
}
.bandeau-credibilite .kicker { margin-bottom: 12px; }
.bandeau-credibilite h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.4;
  color: var(--encre-nuit);
  margin: 0 0 56px;
}
.bandeau-credibilite-logos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 56px;
  align-items: center;
  justify-items: center;
}
.bandeau-credibilite-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  width: 100%;
  filter: grayscale(1) contrast(1.05);
  opacity: 0.6;
  transition: opacity var(--transition-base);
}
.bandeau-credibilite-logo:hover { opacity: 0.95; }
.bandeau-credibilite-logo img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  display: block;
  object-fit: contain;
}
.bandeau-credibilite .mention {
  margin-top: 48px;
  font-size: 12px;
}
@media (max-width: 900px) {
  .bandeau-credibilite-logos { grid-template-columns: repeat(2, 1fr); gap: 40px; }
}
@media (max-width: 480px) {
  .bandeau-credibilite-logos { grid-template-columns: 1fr; gap: 32px; }
  .bandeau-credibilite-logo { height: 56px; }
}

.contenu a:not(.cta):not(.cta-secondaire):not(.cta-texte):not(.nav-logo) {
  color: var(--encre-nuit);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: color var(--transition-base);
}
.contenu a:not(.cta):not(.cta-secondaire):not(.cta-texte):hover {
  color: var(--brique-terne);
}

/* ==========================================================================
   IMAGE D'AMBIANCE — placeholder
   ========================================================================== */

.ambiance {
  aspect-ratio: 16/9;
  background: var(--taupe-profond);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(245,240,230,0.6);
  position: relative;
  overflow: hidden;
  margin: 64px 0;
}
.ambiance::before {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    135deg,
    transparent 0 24px,
    rgba(0,0,0,0.05) 24px 48px
  );
}
.ambiance span {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 20px;
}

/* ==========================================================================
   PETIT POLISH
   ========================================================================== */

::selection { background: var(--encre-nuit); color: var(--papier-ivoire); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}