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

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

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

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

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

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

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

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

/* Première section de la page — respiration de 25vh sous le header fixé.
   Même sélecteur que hero / feature / logos. */
.altus-section-founder:first-child {
  padding-top: 25vh;
}

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

.altus-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. */
.altus-section-founder-media {
  position: relative;
  margin: 0;
  width: 100%;
  max-width: 440px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--altus-sep);
  background: var(--altus-bg);
  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. */
.altus-section-founder-portrait {
  position: absolute;
  top: -6%;
  left: 0;
  display: block;
  width: 100%;
  height: 112%;
  object-fit: cover;
  background: var(--altus-bg);
}

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

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

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

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

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

/* Filet sous le titre — largeur 64px, porte le rôle bronze de la section.
   .altus-hairline (couche motion) fournit le 1px bronze ; data-altus-hairline
   le fait se TRACER à l'entrée. */
.altus-section-founder-rule {
  --altus-hairline-w: 64px;
  margin: 28px 0 0;
}

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

/* Citation optionnelle — filet bronze à gauche, sans guillemets décoratifs.
   Quand elle est présente, c'est ELLE le rôle bronze : retirer le filet
   sous le titre (voir règle bronze en tête de fichier). */
.altus-section-founder-quote {
  margin: 32px 0 0;
  padding-left: 24px;
  border-left: 1px solid var(--altus-accent);
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: var(--altus-w-light);
  line-height: 1.5;
  color: var(--altus-fg1);
  max-width: 44ch;
  text-wrap: pretty;
}
.altus-section-founder-quote-cite {
  display: block;
  margin-top: 12px;
  font-size: 13px;
  font-weight: var(--altus-w-medium);
  letter-spacing: 0.04em;
  color: var(--altus-fg2);
}

/* ────────────────────────────────────────────────────────────
   Variante inverse — fond ivoire (C-flat / C)
   ──────────────────────────────────────────────────────────── */
.altus-section-founder.altus-section-inverse {
  background: var(--altus-bg-inverse);
  color: var(--altus-fg1-inverse);
}
.altus-section-founder.altus-section-inverse .altus-section-founder-title      { color: var(--altus-fg1-inverse); }
.altus-section-founder.altus-section-inverse .altus-section-founder-body       { color: var(--altus-fg2-inverse); }
.altus-section-founder.altus-section-inverse .altus-section-founder-quote      { color: var(--altus-fg1-inverse); }
.altus-section-founder.altus-section-inverse .altus-section-founder-quote-cite { color: var(--altus-fg2-inverse); }
.altus-section-founder.altus-section-inverse .altus-section-founder-media {
  border-color: color-mix(in srgb, var(--altus-fg1-inverse) 14%, transparent);
}
/* L'eyebrow reste bronze sur les deux thèmes. */

/* ────────────────────────────────────────────────────────────
   Variante broll — fond image + voile B/C + noise
   ──────────────────────────────────────────────────────────── */
.altus-section-founder[data-altus-broll] {
  background-image: var(--altus-broll);
  background-size: cover;
  background-position: center;
}
.altus-section-founder[data-altus-broll]::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(20, 17, 13, 0.72);
  z-index: 0;
}
.altus-section-founder.altus-section-inverse[data-altus-broll]::before {
  background: rgba(235, 229, 218, 0.88);
}
.altus-section-founder[data-altus-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) {
  .altus-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. */
  .altus-section-founder-media,
  .altus-section-founder-media-right .altus-section-founder-media {
    order: 0;
    justify-self: start;
    margin-block: 0;
    max-width: 360px;
  }
  .altus-section-founder-media-right .altus-section-founder-text { order: 1; }
}

/* ≤ 560px — padding resserré. */
@media (max-width: 560px) {
  .altus-section-founder { padding-inline: 22px; }
  .altus-section-founder:first-child { padding-top: 20vh; }
}