/* ============================================================
   SELFLEADER — Design tokens
   Dérivé de SELFLEADER_Charte_Marque_v1.1.md (source de vérité)
   Ne pas modifier sans avoir bumpé la version de la charte.
   ============================================================ */

:root {

  /* ---------- 1 · Palette ---------- */

  /* Noirs */
  --anthracite:      #1C1C1A;  /* texte principal, fonds sombres */
  --anthracite-deep: #141412;  /* footer, séparateurs sombres */
  --anthracite-mid:  #2C2C2A;  /* variations intermédiaires */

  /* Crèmes */
  --ivory:       #F5F3EE;  /* fond principal clair */
  --ivory-warm:  #FAFAF8;  /* fond clair alternatif, légèrement plus chaud */

  /* Bronzes — règle d'usage stricte */
  --bronze:           #B8A98A;  /* accent SUR FOND SOMBRE uniquement */
  --bronze-light:     #CFC0A8;  /* hover bouton primaire */
  --bronze-on-ivory:  #8A7A5A;  /* accent SUR FOND CLAIR (texte, eyebrows, rules) — WCAG AA 4.6:1 */

  /* Gris pierre */
  --stone:       #8C8880;  /* texte tertiaire — PASS AA sur anthracite uniquement */
  --stone-dark:  #5F5E5A;  /* texte secondaire — PASS AA sur ivory et anthracite */

  /* Séparateurs */
  --separator-light:  #D0CEC8;
  --separator-dark:   #2C2C2A;

  /* Tokens sémantiques */
  --text-primary:    var(--anthracite);
  --text-secondary:  var(--stone-dark);
  --text-muted:      var(--stone);

  /* ---------- 2 · Typographie ---------- */

  /* Familles */
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans:  'Jost', Arial, sans-serif;

  /* Échelle desktop */
  --type-display:  64px;
  --type-h1:       48px;
  --type-h2:       36px;
  --type-h3:       26px;
  --type-lead:     22px;
  --type-body:     18px;
  --type-caption:  14px;
  --type-eyebrow:  12px;

  /* Line heights */
  --lh-display:  1.1;
  --lh-tight:    1.2;
  --lh-snug:     1.35;
  --lh-normal:   1.55;
  --lh-relaxed:  1.7;

  /* Letter spacings */
  --ls-display:  -0.01em;
  --ls-tight:    -0.005em;
  --ls-normal:   0;
  --ls-wide:     0.02em;
  --ls-eyebrow:  0.18em;

  /* ---------- 3 · Espacements ---------- */

  --gap-xs:   8px;
  --gap-sm:   16px;
  --gap-md:   24px;
  --gap-lg:   40px;
  --gap-xl:   64px;
  --gap-2xl:  96px;

  /* Sections (padding) */
  --section-padding-hero:  88px 64px 104px;
  --section-padding-lg:    160px 64px;
  --section-padding-md:    120px 64px;
  --section-padding-sm:    80px 64px;

  /* Conteneurs */
  --max-width-narrow:  640px;
  --max-width-mid:     780px;
  --max-width-wide:    900px;
  --max-width-xl:      1080px;

  /* Rule (filet bronze séparateur) */
  --rule-width:        64px;
  --rule-width-narrow: 32px;

  /* ---------- 4 · Transitions ---------- */

  --transition-fast:    0.15s ease;
  --transition-base:    0.2s ease;
  --transition-slow:    0.3s ease;

  /* ---------- 5 · Animations (entrance / reveal) ---------- */

  --ease-premium:       cubic-bezier(0.16, 1, 0.3, 1);  /* ease-out-expo, signature éditoriale */
  --reveal-distance:    24px;
  --reveal-duration:    2200ms;
  --rule-duration:      1800ms;
  --image-duration:     2800ms;
  --hero-stagger:       380ms;
  --hero-initial-delay: 400ms;
}


/* ---------- Mobile overrides ≤768px ---------- */

@media (max-width: 768px) {
  :root {
    --type-display:  44px;
    --type-h1:       36px;
    --type-h2:       28px;
    --type-h3:       22px;
    --type-lead:     19px;
    --type-body:     17px;
    --type-caption:  13px;
    --type-eyebrow:  11px;

    --section-padding-hero:  64px 24px;
    --section-padding-lg:    80px 24px;
    --section-padding-md:    64px 24px;
    --section-padding-sm:    48px 24px;

    --rule-width:        40px;
    --rule-width-narrow: 24px;
  }
}


/* ============================================================
   Règles UX globales (héritées de ui-ux-pro-max)
   ============================================================ */

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

html {
  scroll-behavior: smooth;
}

body {
  background: var(--ivory);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
}

img, svg {
  display: block;
  max-width: 100%;
}

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}


/* ============================================================
   Animations entrance & scroll reveal — premium éditorial
   Toutes les animations respectent prefers-reduced-motion
   ============================================================ */

/* Default state — éléments invisibles avant reveal */
[data-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition: opacity var(--reveal-duration) var(--ease-premium),
              transform var(--reveal-duration) var(--ease-premium);
  will-change: opacity, transform;
}
[data-reveal].is-revealed {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Stagger via inline style data-reveal-delay set par JS */
[data-reveal][data-reveal-delay="1"] { transition-delay: var(--hero-stagger); }
[data-reveal][data-reveal-delay="2"] { transition-delay: calc(var(--hero-stagger) * 2); }
[data-reveal][data-reveal-delay="3"] { transition-delay: calc(var(--hero-stagger) * 3); }
[data-reveal][data-reveal-delay="4"] { transition-delay: calc(var(--hero-stagger) * 4); }

/* Rule tracing — filets bronze qui s'étirent de 0 à leur largeur cible */
[data-reveal-rule] {
  width: 0 !important;
  transition: width var(--rule-duration) var(--ease-premium);
}
[data-reveal-rule].is-revealed {
  width: var(--rule-width) !important;
}
[data-reveal-rule].rule--narrow.is-revealed {
  width: var(--rule-width-narrow) !important;
}

/* Visuels & portraits — fade plus profond + très léger zoom out */
[data-reveal-image] {
  opacity: 0;
  transform: scale(1.05);
  transition: opacity var(--image-duration) var(--ease-premium),
              transform calc(var(--image-duration) + 400ms) var(--ease-premium);
  will-change: opacity, transform;
}
[data-reveal-image].is-revealed {
  opacity: 1 !important;
  transform: scale(1) !important;
}
/* Hero-art : reveal sans !important sur transform pour laisser le parallax JS prendre la main */
.hero-art { opacity: 0.38; }
.hero-art[data-reveal-image] {
  opacity: 0;
  transform: scale(1.05);
}
.hero-art[data-reveal-image].is-revealed {
  opacity: 0.38 !important;
  transform: scale(1);  /* sans !important — parallax JS override */
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal-rule],
  [data-reveal-image] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  [data-reveal-rule] { width: var(--rule-width) !important; }
  [data-reveal-rule].rule--narrow { width: var(--rule-width-narrow) !important; }
  .hero-art[data-reveal-image] { opacity: 0.38 !important; }
}


/* ============================================================
   Animations avancées — v2 premium wow
   ============================================================ */

/* --- Scroll guide bronze (filet vertical droite) --- */

.scroll-guide {
  position: fixed;
  top: 0;
  right: 0;
  width: 1px;
  height: 100vh;
  background: rgba(184, 169, 138, 0.12);  /* bronze très atténué */
  z-index: 200;
  pointer-events: none;
}
.scroll-guide__progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bronze);
  transform-origin: top center;
  transform: scaleY(0);
  transition: transform 120ms linear;
}
@media (max-width: 768px) {
  .scroll-guide { display: none; }
}

/* --- Hero parallax dual-speed (handled mostly by JS, CSS sets the stage) --- */

.hero-art {
  will-change: transform, opacity;
}

/* --- Magnetic CTA hover preparation --- */

.btn-primary,
.porte-cta,
.hero-soft-cta {
  transform-style: preserve-3d;
  perspective: 800px;
  will-change: transform;
  transition: transform 300ms var(--ease-premium), background var(--transition-base), color var(--transition-base);
}

/* --- Count-up numerals (transition smooth pendant l'incrément) --- */

[data-count-up] {
  font-variant-numeric: tabular-nums;
}

/* --- Verbatim mask wipe (bronze sweep on enter) --- */

[data-mask-wipe] {
  position: relative;
  overflow: hidden;
}
[data-mask-wipe]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ivory-warm);
  transform-origin: right center;
  transition: transform 2000ms var(--ease-premium);
  z-index: 5;
  pointer-events: none;
}
[data-mask-wipe].is-revealed::before {
  transform: scaleX(0);
}
[data-mask-wipe]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bronze);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 800ms var(--ease-premium);
  z-index: 6;
  pointer-events: none;
  opacity: 0.45;
}
[data-mask-wipe].is-revealed::after {
  animation: bronze-sweep 2000ms var(--ease-premium) forwards;
}
@keyframes bronze-sweep {
  0%   { transform: scaleX(0); transform-origin: left center; opacity: 0.45; }
  50%  { transform: scaleX(1); transform-origin: left center; opacity: 0.45; }
  51%  { transform: scaleX(1); transform-origin: right center; opacity: 0.45; }
  100% { transform: scaleX(0); transform-origin: right center; opacity: 0; }
}

/* --- Phase timeline (apropos) — ligne verticale bronze à GAUCHE du contenu --- */

.phases--with-timeline {
  position: relative;
  padding-left: 56px;
}
.phases--with-timeline::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent 0%, var(--bronze-on-ivory) 6%, var(--bronze-on-ivory) 94%, transparent 100%);
  transform-origin: top center;
  transform: scaleY(0);
  transition: transform 3000ms var(--ease-premium);
  pointer-events: none;
  z-index: 0;
}
.phases--with-timeline.timeline-active::before {
  transform: scaleY(1);
}
.phases--with-timeline .phase {
  position: relative;
  z-index: 1;
}
.phases--with-timeline .phase::before {
  content: "";
  position: absolute;
  left: -36px;
  top: 28px;
  width: 9px;
  height: 9px;
  background: var(--bronze-on-ivory);
  border-radius: 50%;
  transform: translateX(-50%) scale(0);
  transition: transform 500ms var(--ease-premium);
  transition-delay: 800ms;
}
.phases--with-timeline.timeline-active .phase::before {
  transform: translateX(-50%) scale(1);
}
.phases--with-timeline.timeline-active .phase:nth-child(1)::before { transition-delay: 900ms; }
.phases--with-timeline.timeline-active .phase:nth-child(2)::before { transition-delay: 1300ms; }
.phases--with-timeline.timeline-active .phase:nth-child(3)::before { transition-delay: 1700ms; }
.phases--with-timeline.timeline-active .phase:nth-child(4)::before { transition-delay: 2100ms; }
.phases--with-timeline.timeline-active .phase:nth-child(5)::before { transition-delay: 2500ms; }
.phases--with-timeline.timeline-active .phase:nth-child(6)::before { transition-delay: 2900ms; }

@media (max-width: 768px) {
  .phases--with-timeline { padding-left: 32px; }
  .phases--with-timeline::before { left: 8px; }
  .phases--with-timeline .phase::before { left: -24px; }
}

/* --- Schema architecture (méthode) — mask reveal bronze sweep --- */

.schema-figure--draw {
  position: relative;
  overflow: hidden;
}
.schema-figure--draw img {
  opacity: 0;
  transition: opacity 1400ms var(--ease-premium);
}
.schema-figure--draw::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, var(--bronze) 49%, var(--bronze) 51%, transparent 100%);
  transform: translateX(-100%);
  transition: transform 1800ms var(--ease-premium);
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: screen;
}
.schema-figure--draw.is-drawn img {
  opacity: 1;
}
.schema-figure--draw.is-drawn::before {
  transform: translateX(100%);
}

/* --- FAQ accordion --- */

.faq-pair--collapsible .faq-answer {
  transition: max-height 500ms var(--ease-premium),
              opacity 400ms var(--ease-premium);
}
.faq-pair--collapsible .faq-question {
  position: relative;
  padding-right: 36px;
  transition: color var(--transition-base);
}
.faq-pair--collapsible .faq-question::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 0;
  width: 24px;
  height: 24px;
  font: 400 22px/1 var(--font-serif);
  color: var(--bronze-on-ivory);
  text-align: center;
  transition: transform 400ms var(--ease-premium);
}
.faq-pair.is-open .faq-question::after {
  content: "−";
  transform: rotate(180deg);
}
.faq-pair--collapsible .faq-question:hover {
  color: var(--bronze-on-ivory);
}
.faq-pair--collapsible .faq-question:focus-visible {
  outline-offset: 4px;
}

/* --- Form fields bronze underline on focus --- */

.contact-form .form-input,
.contact-form .form-select,
.contact-form .form-textarea {
  position: relative;
  border-bottom: 1px solid var(--separator-light);
  transition: border-color 350ms var(--ease-premium);
}
.contact-form .form-input.is-focused,
.contact-form .form-select.is-focused,
.contact-form .form-textarea.is-focused {
  border-bottom-color: var(--bronze-on-ivory);
}

/* --- Portes "stamp" effect (contact) --- */

.porte {
  will-change: transform, box-shadow;
  transition: transform 600ms var(--ease-premium),
              box-shadow 500ms var(--ease-premium);
}
.porte[data-reveal] {
  transform: translateY(var(--reveal-distance)) scale(0.96);
}
.porte[data-reveal].is-revealed {
  transform: translateY(0) scale(1) !important;
}
.porte--featured:hover {
  transform: translateY(-3px) scale(1.005) !important;
  box-shadow: 0 12px 32px -8px rgba(28, 28, 26, 0.25);
}

/* --- Mvmt items bronze trace under title --- */

.mvmt-title {
  position: relative;
  display: inline-block;
}
.mvmt-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 1px;
  background: var(--bronze-on-ivory);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 800ms var(--ease-premium);
  transition-delay: 200ms;
}
.mvmt-item[data-reveal].is-revealed .mvmt-title::after {
  transform: scaleX(1);
}

/* --- Apport hover bronze underline --- */

.apport-title {
  position: relative;
  display: inline-block;
  transition: color 350ms var(--ease-premium);
}
.apport-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 1px;
  background: var(--bronze-on-ivory);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 500ms var(--ease-premium);
}
.apport:hover .apport-title::after {
  transform: scaleX(1);
}

/* --- Scenes-narrative magnetic hover --- */

.scene-narrative {
  position: relative;
  padding-left: var(--gap-md);
  transition: transform 400ms var(--ease-premium), padding-left 400ms var(--ease-premium);
}
.scene-narrative::before {
  content: "";
  position: absolute;
  left: 0;
  top: 25%;
  bottom: 25%;
  width: 1px;
  background: var(--bronze-on-ivory);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 400ms var(--ease-premium);
}
.scene-narrative:hover {
  padding-left: calc(var(--gap-md) + 8px);
}
.scene-narrative:hover::before {
  transform: scaleY(1);
}

/* --- Bio cards slide entrance (apropos) --- */

.bio-large:nth-of-type(1)[data-reveal] {
  transform: translateY(var(--reveal-distance)) translateX(-30px);
}
.bio-large:nth-of-type(2)[data-reveal] {
  transform: translateY(var(--reveal-distance)) translateX(30px);
}
.bio-large[data-reveal].is-revealed {
  transform: translateY(0) translateX(0) !important;
}

/* --- Reduced motion override for all v2 animations --- */

@media (prefers-reduced-motion: reduce) {
  .scroll-guide { display: none !important; }
  .btn-primary, .porte-cta, .hero-soft-cta {
    transform: none !important;
    transition: background var(--transition-base), color var(--transition-base) !important;
  }
  [data-mask-wipe]::before,
  [data-mask-wipe]::after,
  .schema-figure--draw::before { display: none !important; }
  .schema-figure--draw img { opacity: 1 !important; }
  .phases--with-timeline::before { transform: scaleY(1) !important; transition: none !important; }
  .phases--with-timeline .phase::before { transform: translateX(-50%) scale(1) !important; transition: none !important; }
  .porte[data-reveal] { transform: none !important; }
  .mvmt-title::after,
  .apport-title::after,
  .scene-narrative::before { transform: none !important; opacity: 1 !important; }
  .bio-large[data-reveal] { transform: none !important; }
}


/* ============================================================
   Classes utilitaires typographiques
   Préfère ces classes aux overrides locaux.
   ============================================================ */

.type-display {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: var(--type-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--text-primary);
}

.type-h1 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: var(--type-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--text-primary);
}

.type-h2 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: var(--type-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--text-primary);
}

.type-h3 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: var(--type-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-normal);
  color: var(--text-primary);
}

.type-lead {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--type-lead);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-normal);
  color: var(--text-primary);
}

.type-body {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--type-body);
  line-height: var(--lh-relaxed);
  color: var(--text-primary);
}

.type-caption {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--type-caption);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-wide);
  color: var(--text-secondary);
}

.type-eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--type-eyebrow);
  line-height: 1;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--bronze-on-ivory);  /* défaut : fond clair */
}

/* Variantes pour fond sombre — utiliser ces classes quand le bloc est sur anthracite */
.type-display--on-dark,
.type-h1--on-dark,
.type-h2--on-dark,
.type-h3--on-dark,
.type-lead--on-dark,
.type-body--on-dark {
  color: var(--ivory);
}

.type-caption--on-dark { color: var(--ivory); opacity: 0.7; }
.type-eyebrow--on-dark { color: var(--bronze); }


/* ============================================================
   Composants atomiques
   ============================================================ */

/* Filet bronze (rule séparateur) */
.rule {
  width: var(--rule-width);
  height: 1px;
  background: var(--bronze-on-ivory);
  border: none;
  margin: 0 auto var(--gap-lg);
}

.rule--on-dark { background: var(--bronze); }
.rule--left   { margin-left: 0; margin-right: auto; }
.rule--narrow { width: var(--rule-width-narrow); }


/* Bouton primaire (fond bronze, texte anthracite) */
.btn-primary {
  display: inline-block;
  background: var(--bronze);
  color: var(--anthracite);
  font: 500 12px/1 var(--font-sans);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  padding: 18px 48px;
  border: none;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-base);
}
.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--bronze-light);
}


/* Bouton outline (transparent, bordure bronze) */
.btn-outline {
  display: inline-block;
  background: transparent;
  color: var(--bronze-on-ivory);
  font: 500 12px/1 var(--font-sans);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  padding: 16px 40px;
  border: 0.5px solid var(--bronze-on-ivory);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-base), color var(--transition-base);
}
.btn-outline:hover,
.btn-outline:focus-visible {
  background: var(--bronze-on-ivory);
  color: var(--ivory);
}

.btn-outline--on-dark {
  color: var(--bronze);
  border-color: var(--bronze);
}
.btn-outline--on-dark:hover,
.btn-outline--on-dark:focus-visible {
  background: var(--bronze);
  color: var(--anthracite);
}


/* Lien souligné (style "En savoir plus") */
.link-underline {
  display: inline-block;
  font: 500 12px/1 var(--font-sans);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-primary);
  border-bottom: 1px solid var(--bronze-on-ivory);
  padding-bottom: 6px;
  transition: color var(--transition-base), border-color var(--transition-base);
}
.link-underline:hover,
.link-underline:focus-visible {
  color: var(--bronze-on-ivory);
}

.link-underline--on-dark {
  color: var(--ivory);
  border-bottom-color: var(--bronze);
}
.link-underline--on-dark:hover {
  color: var(--bronze);
}


/* ============================================================
   Sections (helpers de layout)
   ============================================================ */

.section          { padding: var(--section-padding-md); }
.section--hero    { padding: var(--section-padding-hero); }
.section--lg      { padding: var(--section-padding-lg); }
.section--sm      { padding: var(--section-padding-sm); }

.section--ivory      { background: var(--ivory); color: var(--text-primary); }
.section--ivory-warm { background: var(--ivory-warm); color: var(--text-primary); }
.section--anthracite { background: var(--anthracite); color: var(--ivory); }
.section--deep       { background: var(--anthracite-deep); color: var(--ivory); }

.container-narrow { max-width: var(--max-width-narrow); margin: 0 auto; }
.container-mid    { max-width: var(--max-width-mid);    margin: 0 auto; }
.container-wide   { max-width: var(--max-width-wide);   margin: 0 auto; }
.container-xl     { max-width: var(--max-width-xl);     margin: 0 auto; }