/* ============================================================
   common.css — design system partagé Scale Platform
   Variables, reset, typo, .wrap, système reveal, .section-num,
   .mission-line (title-wipe), .section-statement.
   Extrait fidèlement de la maquette 2026-06-10 (style.css).
   ============================================================ */

/* =====================================================
   SCALE PLATFORM — Home v3
   Direction : forme quart-de-cercle (logo signature),
   typo display outline+filled, parallax multicouche,
   palette bleu nuit / cuivre / crème.
   ===================================================== */

:root {
  /* Palette */
  --c-bg-deep:   #0A1626;
  --c-bg-cream:  #F5F1EA;
  --c-blue:      #00394D;
  --c-copper:    #8E7547;
  --c-text:      #0A1015;
  --c-muted:     #6B7280;
  --c-line:      rgba(10, 22, 38, 0.08);
  --c-line-light:rgba(255, 255, 255, 0.12);

  /* Typo */
  --ff-display:  'Montserrat', system-ui, sans-serif;
  --ff-body:     'Montserrat', system-ui, sans-serif;
  --ff-mono:     'JetBrains Mono', 'SF Mono', monospace;

  /* ============================================================
     GUTTER GLOBAL DU SITE
     ============================================================
     Marge gauche/droite unifiée appliquée à TOUS les éléments
     de premier niveau du site :
     - le header (logo + menu)
     - le titre hero (.hero__text-inner)
     - toutes les sections .wrap

     Pour ajuster les marges du site entier, modifier UNIQUEMENT
     la valeur de --gutter ci-dessous.
     Format : clamp(MIN_MOBILE, % VIEWPORT, MAX_DESKTOP)
     ============================================================ */
  /* Gutter : max augmenté de 120 → 180px pour mieux utiliser l'espace sur
     écrans 27" / 2560px (modif responsive 2026-05-11). */
  --gutter: clamp(24px, 6%, 180px);

  /* Alias rétro-compatibilité : ancien nom toujours supporté */
  --pad: var(--gutter);

  --pad-section: clamp(80px, 14vh, 200px);
  /* Air vertical homogène autour des .section-statement (outros italique cuivre)
     — appliqué en margin-top ET margin-bottom : même valeur sur toutes les sections. */
  --statement-gap: clamp(80px, 10vw, 180px);
  /* Espace vertical uniforme de la section 01 (mission) : gap num/logo/titre du
     hero ET gap entre tous les frères de .mission-extras. Partagé hero_home +
     mission_pictos (hero-home.css le référence avec un fallback). */
  --mission-stack-gap: clamp(48px, 7.5vh, 120px);
  /* Max-width passé de 1440 → 1680px pour respirer sur grand écran 27"/2560. */
  --max: 1680px;

  /* Ease signature */
  --ease: cubic-bezier(0.65, 0.05, 0, 1);
}

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

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  /* Font-size racine fluide (responsive 2026-05-11) : 16px à 1280 → 20px à 2560.
     Tous les `rem` du site s'adaptent automatiquement.
     Formule : f(vw) = 0.3125vw + 12px, clampée [15px, 20px]. */
  font-size: clamp(15px, calc(0.3125vw + 12px), 20px);
}
body {
  font-family: var(--ff-body);
  /* Plus de font-size: 16px ici — c'est le html qui pilote via clamp ci-dessus.
     Le body hérite donc d'une taille fluide qui propage aux rem partout. */
  line-height: 1.5;
  color: var(--c-text);
  background: var(--c-bg-cream);
  overflow-x: hidden;
}

/* === SYSTÈME UNIFIÉ DE RÉVÉLATION DU CONTENU ===
   Refactor 2026-05-11 soir : remplace les anciens systèmes scroll-tied
   (updateGenericScrollReveals, updateResponseCardsReveal) par un système
   simple basé sur .is-in-view ajoutée par IntersectionObserver côté JS.
   - Au LOAD : les éléments visibles au-dessus du fold reçoivent .is-in-view
     en cascade automatique (stagger 0.15s) après l'animation du titre.
   - AU SCROLL : les éléments en dehors du viewport reçoivent .is-in-view
     lorsqu'ils entrent dans le viewport (IntersectionObserver).
   Les états initiaux (opacity 0 + transform/filter) sont définis sur les
   classes elles-mêmes (.step, .article-card, .response-card). */
.step,
.article-card,
.response-card,
.expert-card,
.board-card,
.problem-keystatement,
[data-reveal] {
  transition:
    opacity 0.9s cubic-bezier(0.65, 0.05, 0, 1) var(--reveal-delay, 0s),
    transform 0.9s cubic-bezier(0.65, 0.05, 0, 1) var(--reveal-delay, 0s),
    filter 0.7s cubic-bezier(0.65, 0.05, 0, 1) var(--reveal-delay, 0s);
}
.step.is-in-view,
.article-card.is-in-view,
.response-card.is-in-view,
.expert-card.is-in-view,
.board-card.is-in-view,
.problem-keystatement.is-in-view,
[data-reveal].is-in-view {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .step, .article-card, .response-card, .expert-card, .board-card, .problem-keystatement, [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* Reveals SCRUBBÉS (modif client 2026-05-22) — enfants des conteneurs
   [data-scrub] (gouvernance 03, publications). État initial caché ; opacité et
   transform sont ensuite pilotés inline par le JS (updateScrubReveals), lié au
   scroll et réversible. Transition courte pour lisser entre 2 frames de scroll. */
[data-scrub] > * {
  opacity: 0;
  will-change: transform, opacity;
  transition: transform 0.12s linear, opacity 0.12s linear;
}

/* Wipe scrubbé sur les titres de SECTION (gouvernance 03, publications) — modif
   client 2026-05-22. Surcharge le .mission-line générique (conçu pour le hero,
   centré + 1 ligne) afin que ces titres gardent leur rendu d'origine :
   ALIGNÉS À GAUCHE et MULTI-LIGNES. Une seule bande wipe couvre le bloc titre. */
[data-title-wipe] .mission-line {
  display: block;
  position: relative;
  overflow: hidden;
  height: auto;
  /* Largeur = largeur du TEXTE de la ligne (la bande s'arrête au bout du mot,
     pas au bord du conteneur). Aligné à gauche. */
  width: fit-content;
  max-width: 100%;
  margin: 0;               /* aligné à gauche (était margin:0 auto) */
}
[data-title-wipe] .mission-line__phrase {
  display: block;
  position: relative;
  white-space: nowrap;     /* chaque ligne est explicite dans le HTML */
  opacity: 0;
}
[data-title-wipe] .mission-line__wipe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--c-copper);
  transform-origin: left center;
  transform: scaleX(0);
  pointer-events: none;
  z-index: 2;
}
/* Leads sous les titres (gouvernance 03, publications) — entrent depuis la
   gauche + fondu, pilotés inline par le JS (updateTitleWipes), liés au scroll. */
[data-lead-slide] {
  opacity: 0;
  will-change: transform, opacity;
  transition: transform 0.12s linear, opacity 0.12s linear;
}
@media (prefers-reduced-motion: reduce) {
  [data-lead-slide] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-scrub] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Respect du prefers-reduced-motion — désactive les animations d'ouverture
   du .page-hero pour les utilisateurs sensibles aux mouvements. */
@media (prefers-reduced-motion: reduce) {
  .page-hero__num,
  .page-hero__title,
  .page-hero__lead,
  .page-hero__title .mission-line,
  .page-hero__title .mission-line__phrase {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  .page-hero__title .mission-line__wipe { display: none !important; }
}

/* Après le .page-hero, la section suivante n'a plus besoin de padding-top
   majeur (le hero a déjà géré l'espace). */
.page-hero + section { padding-top: 0; }
/* Cas spécifique : .problem a un padding-top intrinsèque qu'on neutralise */
body.page-mission .page-hero + .problem {
  padding-top: clamp(20px, 3vh, 40px);
}
body.page-process .page-hero + .process {
  padding-top: clamp(20px, 3vh, 40px);
}
body.page-contact .page-hero + .contact-page {
  padding-top: 0;
}
body.page-contact .contact-page__inner > .contact-page__head { display: none; }
body.page-membres .page-hero + .membres-page {
  padding-top: 0;
  min-height: auto;
}
body.page-membres .membres-page__inner > .membres-page__head { display: none; }
/* Pages internes : le header .hdr est position:fixed → on décale le contenu
   sous lui (sinon le 1er bloc, ex. .page-hero__num, passe sous le menu).
   La home (page-home) garde son hero plein écran sous le header → non concernée. */
body.page-standalone .page-main {
  padding-top: var(--header-h, 80px);
  min-height: calc(100vh - var(--header-h, 80px));
}

/* Section .problem (mission.html) — passée en BEIGE (était bleu).
   Le cercle, les labels orbite et keystatement sont adaptés ci-dessous. */
body.page-standalone .problem {
  background: var(--c-bg-cream);
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
ul { list-style: none; }

.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* ========== FORMES SIGNATURE QUART-DE-CERCLE ==========
   Issues du logo : un carré avec UN seul coin arrondi à 90°.
   IMPORTANT : pour un VRAI quart-de-cercle (rayon constant, pas une ellipse),
   on utilise --shape-r en valeur absolue (px / clamp), pas en %. Chaque
   composant peut override --shape-r selon sa taille. */
.shape-tr,
.shape-tl,
.shape-br,
.shape-bl {
  overflow: hidden;
  --shape-r: clamp(120px, 18vw, 280px);
}
.shape-tr { border-radius: 0 var(--shape-r) 0 0; }
.shape-tl { border-radius: var(--shape-r) 0 0 0; }
.shape-br { border-radius: 0 0 var(--shape-r) 0; }
.shape-bl { border-radius: 0 0 0 var(--shape-r); }

/* ========== TYPO ========== */
.h2 {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(2rem, 4.5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--c-blue);
  max-width: 22ch;
}
.h2.light { color: #fff; }

/* ============================================================
   ÉCHELLE TEXTE UNIFIÉE — variables globales pour tous les
   paragraphes / descriptions / leads du site.
   Modifier ces variables = changer la taille partout en cohérence. */
:root {
  --text-sm:   clamp(0.85rem, 0.95vw, 0.95rem);   /* labels, captions, mono */
  --text-base: clamp(1rem, 1.15vw, 1.15rem);      /* texte courant (paragraphes, descriptions, lead) */
  --text-lg:   clamp(1.15rem, 1.4vw, 1.4rem);     /* lead introductif un peu plus marqué */
}

/* Classe utilitaire : texte paragraphe / description standard du site.
   À utiliser pour tout texte de type body (sub, hook, lead, descriptions cards…). */
.text-body {
  font-family: var(--ff-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.55;
  color: var(--c-muted);
  max-width: 60ch;
}
.text-body.light { color: rgba(255,255,255,0.85); }
.text-body strong { color: inherit; font-weight: 700; }
.text-body em {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  color: var(--c-copper);
}

/* Variante "lead" légèrement plus grande pour les paragraphes d'introduction */
.text-lead {
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 1.5;
}

/* Compat : .lead = alias historique de .text-body (pour ne pas casser
   toutes les sections existantes). Le poids et la couleur sont conservés. */
.lead {
  font-family: var(--ff-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.55;
  color: var(--c-muted);
  max-width: 60ch;
  margin-top: 1.5rem;
}
.lead.light { color: rgba(255,255,255,0.85); }
.lead strong { color: inherit; font-weight: 700; }

.section-num {
  display: inline-block;
  font-family: var(--ff-mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-copper);
  margin-bottom: 2rem;
}
.section-num.light { color: var(--c-copper); opacity: 0.9; }

/* ----- .mission-line : bandes wipe des titres [data-title-wipe] ----- */
.mission-line {
  display: block;
  position: relative;
  overflow: hidden;
  height: 1.18em;
  /* Largeur ajustée à la phrase → le wipe s'aligne sur le texte exactement */
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
}
.mission-line__phrase {
  display: block;
  position: relative;
  white-space: nowrap;
  /* Texte invisible par défaut. Le JS le rend visible quand la bande wipe
     a couvert l'intégralité du texte (à mi-anim). */
  opacity: 0;
}
.mission-line__wipe {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: var(--c-copper);
  transform-origin: left center;
  transform: scaleX(0);
  pointer-events: none;
  z-index: 2;
}
/* Mots accent en italique cuivre serif (cohérence avec hero) */
.mission-line__phrase em {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  color: var(--c-copper);
  letter-spacing: -0.01em;
}

/* ----- .section-statement : outro italique cuivre ----- */
.section-statement {
  margin-top: var(--statement-gap);
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: min(90vw, 1100px);
  font-family: var(--ff-body);
  line-height: 1.5;
  text-align: center;
}
/* Pour garantir un ÉCART VISUEL strictement identique au-dessus et en dessous
   du statement, on remplace le padding-bottom natif des sections qui se
   terminent par un .section-statement par exactement --statement-gap.
   Le margin-top du statement gère le dessus, ce padding gère le dessous. */
section:has(.section-statement:last-child),
section:has(> .wrap > .section-statement:last-child) {
  padding-bottom: var(--statement-gap);
}
.section-statement--dark { color: #fff; }
.section-statement--light { color: var(--c-blue); }

.section-statement__intro {
  display: inline-block;
  font-size: var(--text-lg);
  font-weight: 500;
  opacity: 0;
  will-change: opacity, transform;
}
.section-statement--dark .section-statement__intro { color: rgba(255, 255, 255, 0.85); }
.section-statement--light .section-statement__intro { color: var(--c-blue); }

.section-statement__item {
  display: inline-block;
  opacity: 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.6rem, 2.4vw, 2.6rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--c-copper);
  transform-origin: 50% 50%;
  will-change: opacity, transform, filter;
}
.section-statement__item em { font-style: italic; }

.section-statement__sep {
  display: inline-block;
  opacity: 0;
  font-size: clamp(1.6rem, 2.4vw, 2.6rem);
  font-style: italic;
  font-weight: 500;
  font-family: 'Playfair Display', Georgia, serif;
  line-height: 1.2;
  margin: 0 0.3em;
}
.section-statement--dark .section-statement__sep { color: rgba(255, 255, 255, 0.85); }
.section-statement--light .section-statement__sep { color: var(--c-blue); }