/* ============================================================
   Revalta by Altus Conseil — design-system/sections/revalta-section-founder.css
   ------------------------------------------------------------
   Bloc « La dirigeante » — portrait + présentation éditoriale,
   sobre. Ton « Architecture du calme ». Se BRANCHE sur la couche
   revalta-motion (reveal-stagger, parallaxe média, filet qui se trace) ;
   ne ré-implémente aucun motion.

   Class names — convention §00 (préfixe .revalta-section-founder) :
     .revalta-section-founder                         (<section>)
       .revalta-section-founder-content               (grille 2 col, data-revalta-reveal-stagger)
         .revalta-section-founder-media               (<figure> = cadre parallaxe, data-revalta-reveal)
           .revalta-section-founder-portrait          (<img> sur-cadrée, data-revalta-parallax)
         .revalta-section-founder-text                (data-revalta-reveal)
           .revalta-section-founder-eyebrow           (sur-titre bleu encre, tiret 24px)
           .revalta-section-founder-title             (h2 ; -accent = mot bleu encre)
           .revalta-section-founder-rule              (.revalta-hairline, data-revalta-hairline)
           .revalta-section-founder-body              (corps, 1..n paragraphes)
           .revalta-section-founder-quote (opt)       (citation, filet bleu encre à gauche)
             .revalta-section-founder-quote-cite      (attribution)

   Variantes de fond — quatre combinaisons, comme le reste du DS :
     A      .revalta-section-founder                               papier plat
     B      .revalta-section-founder[data-revalta-broll]             papier + image
     C-flat .revalta-section-founder.revalta-section-inverse         marine plat
     C      .revalta-section-founder.revalta-section-inverse[data-revalta-broll]

   Variante de mise en page :
     .revalta-section-founder-media-right   — portrait à DROITE (asymétrie miroir)

   RÈGLE ACCENT — un seul rôle par section. Le filet sous le titre EST
   ce rôle. Si une citation (.revalta-section-founder-quote, filet bleu encre)
   est présente, RETIRER le filet sous le titre : un seul bleu encre à la fois.

   Requiert : colors_and_type.css + revalta-motion.css/.js.
   ============================================================ */

/* ─── Container ────────────────────────────────────────────── */

.revalta-section-founder {
  position: relative;
  background: var(--revalta-bg);
  color: var(--revalta-fg1);
  font-family: var(--revalta-font);
  font-weight: var(--revalta-w-light);
  isolation: isolate;
  padding-block: clamp(80px, 12vh, 168px);
  padding-inline: var(--revalta-web-pad-x);
}

/* Première section de la page : compensation globale du header fixe
   (body.revalta main > :first-child, colors_and_type.css). Rien ici. */

/* ─── Grille 2 colonnes — média ~0.9fr / texte ~1.1fr ──────── */

.revalta-section-founder-content {
  position: relative;
  z-index: 2;
  max-width: 1120px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  column-gap: clamp(40px, 6vw, 88px);
  row-gap: 40px;
  align-items: center;
}

/* ─── Média — figure = CADRE parallaxe (overflow:hidden) ──────
   La parallaxe vit sur l'IMG sur-cadrée À L'INTÉRIEUR du cadre :
   le transform du reveal (sur la figure) et celui de la parallaxe
   (sur l'img) restent sur DEUX éléments distincts — jamais en
   conflit. Le filet 1px encadre la figure. Léger décalage vertical
   du portrait = asymétrie éditoriale assumée. */
.revalta-section-founder-media {
  position: relative;
  margin: 0;
  width: 100%;
  max-width: 440px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 0;
  border-radius: var(--revalta-r-card);     /* identité : vignette 20 px */
  background: var(--revalta-light);
  justify-self: start;
  /* décalage vertical éditorial — le portrait « flotte » plus bas */
  margin-block: clamp(0px, 2.6vw, 36px);
}

/* Portrait — SUR-CADRÉ (112% de haut, débordement 6% en haut/bas) pour
   laisser la parallaxe voyager sans révéler de bord. coins nets. */
.revalta-section-founder-portrait {
  position: absolute;
  top: -6%;
  left: 0;
  display: block;
  width: 100%;
  height: 112%;
  object-fit: cover;
  background: var(--revalta-bg);
}

/* Variante miroir — portrait à droite. */
.revalta-section-founder-media-right .revalta-section-founder-media { order: 2; justify-self: end; }
.revalta-section-founder-media-right .revalta-section-founder-text  { order: 1; }

/* ─── Texte ────────────────────────────────────────────────── */

.revalta-section-founder-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 56ch;
}

/* Sur-titre — bleu encre, précédé d'un tiret de 24px. UPPERCASE, 500. */
.revalta-section-founder-eyebrow {
  margin: 0 0 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  font-weight: var(--revalta-w-medium);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--revalta-accent);
}
.revalta-section-founder-eyebrow::before {
  content: '';
  flex: 0 0 auto;
  width: 24px;
  height: 1px;
  background: var(--revalta-accent);
}

/* Titre — Instrument Sans 300, fluide. Un mot possible en bleu encre (-accent)
   ou en poids variable (data-revalta-variable-weight) — un seul rôle bleu encre. */
.revalta-section-founder-title {
  margin: 0;
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: var(--revalta-w-light);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--revalta-fg1);
  max-width: 20ch;
  text-wrap: balance;
}
.revalta-section-founder-title-accent { color: var(--revalta-accent); }

/* Filet sous le titre — largeur 64px, porte le rôle bleu encre de la section.
   .revalta-hairline (couche motion) fournit le 1px bleu encre ; data-revalta-hairline
   le fait se TRACER à l'entrée. */
.revalta-section-founder-rule {
  --revalta-hairline-w: 48px;
  width: 48px;
  height: 2px;
  margin: 28px 0 0;
  background: var(--revalta-gold);          /* identité : filet or 48 × 2 */
  border: 0;
  opacity: 1;
}

/* Corps — secondaire, mesure bornée, interligne aéré. */
.revalta-section-founder-body {
  margin: 28px 0 0;
  font-size: clamp(16px, 1.3vw, 19px);
  font-weight: var(--revalta-w-light);
  line-height: 1.7;
  color: var(--revalta-fg2);
  max-width: 56ch;
  text-wrap: pretty;
}
.revalta-section-founder-body + .revalta-section-founder-body { margin-top: 20px; }

/* Citation optionnelle — filet bleu encre à gauche, sans guillemets décoratifs.
   Quand elle est présente, c'est ELLE le rôle bleu encre : retirer le filet
   sous le titre (voir règle bleu encre en tête de fichier). */
.revalta-section-founder-quote {
  margin: 32px 0 0;
  padding-left: 20px;
  border-left: 2px solid var(--revalta-gold);   /* identité : filet or */
  font-size: clamp(17px, 1.35vw, 20px);
  font-weight: var(--revalta-w-light);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--revalta-fg1);
  max-width: 44ch;
  text-wrap: pretty;
}
.revalta-section-founder-quote-cite {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  font-style: normal;
  font-weight: var(--revalta-w-light);
  letter-spacing: 0;
  color: var(--revalta-fg2);
}

/* Faits (identité) — trois repères sous un filet : dl > div > dt + dd. */
.revalta-section-founder-facts {
  margin: 24px 0 0;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--revalta-sep);
}
.revalta-section-founder-facts > div { display: grid; gap: 6px; min-width: 0; }
.revalta-section-founder-facts dt { margin: 0; font-size: 17px; font-weight: var(--revalta-w-medium); color: var(--revalta-fg1); }
.revalta-section-founder-facts dd { margin: 0; font-size: 15px; line-height: 1.5; color: var(--revalta-fg2); }

/* Panneau contenu (identité) — data-revalta-contained data-revalta-band="paper" :
   grille 5/7, portrait 4:5 max 440, texte en grille de 22 px (marges internes à 0). */
.revalta-section-founder[data-revalta-contained] .revalta-section-founder-content {
  max-width: none;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(40px, 6vw, 88px);
  row-gap: 22px;
}
.revalta-section-founder[data-revalta-contained] .revalta-section-founder-media { margin-block: 0; }
.revalta-section-founder[data-revalta-contained] .revalta-section-founder-text { display: grid; gap: 22px; max-width: none; }
.revalta-section-founder[data-revalta-contained] .revalta-section-founder-text > * { margin: 0; }

/* ────────────────────────────────────────────────────────────
   Variante inverse — fond marine (C-flat / C)
   ──────────────────────────────────────────────────────────── */
.revalta-section-founder.revalta-section-inverse {
  background: var(--revalta-bg-inverse);
  color: var(--revalta-fg1-inverse);
}
.revalta-section-founder.revalta-section-inverse .revalta-section-founder-title      { color: var(--revalta-fg1-inverse); }
.revalta-section-founder.revalta-section-inverse .revalta-section-founder-body       { color: var(--revalta-fg2-inverse); }
.revalta-section-founder.revalta-section-inverse .revalta-section-founder-quote      { color: var(--revalta-fg1-inverse); }
.revalta-section-founder.revalta-section-inverse .revalta-section-founder-quote-cite { color: var(--revalta-fg2-inverse); }
.revalta-section-founder.revalta-section-inverse .revalta-section-founder-media { border: 0; }
.revalta-section-founder.revalta-section-inverse .revalta-section-founder-rule  { background: var(--revalta-gold-inverse); }
.revalta-section-founder.revalta-section-inverse .revalta-section-founder-quote { border-left-color: var(--revalta-gold-inverse); }
.revalta-section-founder.revalta-section-inverse .revalta-section-founder-facts { border-top-color: var(--revalta-sep-inverse); }
.revalta-section-founder.revalta-section-inverse .revalta-section-founder-facts dt { color: var(--revalta-fg1-inverse); }
.revalta-section-founder.revalta-section-inverse .revalta-section-founder-facts dd { color: var(--revalta-fg2-inverse); }
/* L'eyebrow reste bleu encre sur les deux thèmes. */

/* ────────────────────────────────────────────────────────────
   Variante broll — fond image + voile B/C + noise
   ──────────────────────────────────────────────────────────── */
.revalta-section-founder[data-revalta-broll] {
  background-image: var(--revalta-broll);
  background-size: cover;
  background-position: center;
}
.revalta-section-founder[data-revalta-broll]::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--revalta-veil);
  z-index: 0;
}
.revalta-section-founder.revalta-section-inverse[data-revalta-broll]::before {
  background: var(--revalta-veil-inverse);
}
.revalta-section-founder[data-revalta-broll]::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='5' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.22;
  mix-blend-mode: overlay;
  z-index: 1;
  pointer-events: none;
}

/* ─── Responsive ───────────────────────────────────────────── */

/* ≤ 760px — split rompu : portrait AU-DESSUS, texte en dessous. */
@media (max-width: 760px) {
  .revalta-section-founder-content {
    grid-template-columns: 1fr;
    row-gap: 36px;
    align-items: start;
    justify-items: start;
  }
  /* Portrait toujours au-dessus, décalage annulé — y compris en variante miroir. */
  .revalta-section-founder-media,
  .revalta-section-founder-media-right .revalta-section-founder-media {
    order: 0;
    justify-self: start;
    margin-block: 0;
    max-width: 360px;
  }
  .revalta-section-founder-media-right .revalta-section-founder-text { order: 1; }
}

/* ≤ 560px — padding resserré. */
@media (max-width: 560px) {
  .revalta-section-founder { padding-inline: 22px; }
}

/* Identité — panneau contenu sur petit écran : une colonne, portrait 4:3, faits empilés. */
@media (max-width: 900px) {
  .revalta-section-founder[data-revalta-contained] .revalta-section-founder-content { grid-template-columns: minmax(0, 1fr); }
  .revalta-section-founder[data-revalta-contained] .revalta-section-founder-media { max-width: none; aspect-ratio: 4 / 3; }
  .revalta-section-founder-facts { grid-template-columns: minmax(0, 1fr); }
}