/* ================================================================
   KOOKIYA FLAVORS — fondatrice.css
   Styles spécifiques de la page /fondatrice.
   Structure : 3 blocs · Hero (Ivoire) · Manifeste (Encre) ·
   Invitation (Ivoire).
   ================================================================ */


/* ================================================================
   BLOC 1 — HERO · Ivoire
   100 vh desktop · 80 vh mobile · visuel 3:2 paysage pleine largeur
   en haut, texte centré dessous.
   ================================================================ */

.fondatrice-hero{
  min-height:100vh;
  padding-top:calc(var(--header-height) + clamp(40px, 6vh, 80px));
  background:var(--ivoire);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:clamp(40px, 6vh, 72px);
}

@media (max-width:899px){
  .fondatrice-hero{ min-height:80vh; }
}

/* Emplacement visuel paysage 3:2 · reçoit l'image réelle (object-fit: cover).
   Plus de background/border/pseudo-element : l'image couvre tout le cadre
   sans démarcation possible. Réduit à ~90% de --max-content pour respiration. */
.fondatrice-hero__visuel{
  width:100%;
  max-width:1100px;
  aspect-ratio:3/2;
  position:relative;
  overflow:hidden;
  margin:0 auto;
}
.fondatrice-hero__visuel img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Texte sous le visuel — eyebrow centrée + titre + sous-titre */
.fondatrice-hero__texte{
  text-align:center;
  max-width:900px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:24px;
}

.fondatrice-hero__titre{
  font-family:var(--font-titre);
  font-style:italic;
  font-weight:500;
  color:var(--encre);
  font-size:clamp(48px, 7vw, 80px);
  line-height:1;
  letter-spacing:-0.01em;
  max-width:960px;
}

.fondatrice-hero__soustitre{
  font-family:var(--font-corps);
  font-weight:300;
  font-size:clamp(15px, 1.2vw, 18px);
  line-height:1.6;
  color:var(--encre);
  max-width:580px;
  text-align:center;
  text-align-last:center;
  hyphens:none;
  -webkit-hyphens:none;
}


/* ================================================================
   BLOC 2 — MANIFESTE · Encre
   Desktop : grid 2 cols (60 % texte gauche · 35 % portrait droite) ·
   grid-template-areas pour placement explicite.
   Mobile : flux HTML naturel · portrait intercalé entre P1 et P2.
   ================================================================ */

.fondatrice-manifeste{ }

.fondatrice-manifeste__grille{
  max-width:var(--max-content);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:24px;
}

.fondatrice-manifeste__eyebrow{
  margin-bottom:8px;
}

/* Filet horizontal 0.5 × 40 px Turquoise sous l'eyebrow Bloc 2.
   Espacements cibles : 16 px eyebrow → filet · 24 px filet → P1.
   Le gap du parent (24 mobile · 28 desktop) est compensé par des
   margin-top/bottom négatifs pour atteindre exactement ces valeurs. */
.fondatrice-manifeste__filet{
  display:block;
  width:40px;
  height:0.5px;
  background:var(--turquoise);
  /* Mobile : gap ambiant 24 · réduit à 16 via margin-top:-8 */
  margin-top:-8px;
}

.fondatrice-manifeste__para{
  font-family:var(--font-corps);
  font-weight:300;
  font-size:16px;
  line-height:1.8;
  color:var(--ivoire);
  max-width:640px;
  text-align:justify;
  text-align-last:start;
  hyphens:none;
}
/* Emplacement portrait 3:4 · reçoit l'image réelle (object-fit: cover).
   Plus de background/border/pseudo-element : l'image couvre tout le cadre
   sans démarcation possible. */
.fondatrice-manifeste__portrait{
  aspect-ratio:3/4;
  width:100%;
  max-width:290px;
  margin:16px 0;
  position:relative;
  overflow:hidden;
  align-self:center;
}
.fondatrice-manifeste__portrait img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Desktop — grid 2 colonnes · portrait colonne droite en sticky-like */
@media (min-width:900px){
  .fondatrice-manifeste__grille{
    display:grid;
    grid-template-columns:minmax(0, 1.6fr) minmax(260px, 0.9fr);
    column-gap:clamp(48px, 6vw, 96px);
    row-gap:28px;
    grid-template-areas:
      "eyebrow  portrait"
      "filet    portrait"
      "p1       portrait"
      "p2       portrait"
      "p3       portrait"
      "p4       .";
    align-items:start;
  }
  .fondatrice-manifeste__eyebrow{
    grid-area:eyebrow;
    margin:0;
  }
  .fondatrice-manifeste__filet{
    grid-area:filet;
    /* Desktop : gap ambiant 28 · réduit à 16 (top) et 24 (bottom) */
    margin-top:-12px;
    margin-bottom:-4px;
  }
  .fondatrice-manifeste__para--1{ grid-area:p1; max-width:none; }
  .fondatrice-manifeste__para--2{ grid-area:p2; max-width:none; }
  .fondatrice-manifeste__para--3{ grid-area:p3; max-width:none; }
  .fondatrice-manifeste__para--4{ grid-area:p4; max-width:none; }
  .fondatrice-manifeste__portrait{
    grid-area:portrait;
    align-self:start;
    justify-self:center;        /* centré horizontalement dans la colonne droite */
    margin-top:40px;            /* décale sous la ligne du folio (top calc(header+20) ≈ 84 px) */
    max-width:88%;              /* réduit ~12% dans la colonne droite */
  }
}


/* ================================================================
   BLOC 3 — INVITATION · Ivoire
   Centré · min-height 480 px · 2 CTA · signature Pinyon Turquoise.
   ================================================================ */

.fondatrice-invitation{
  text-align:center;
  min-height:480px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

.fondatrice-invitation__inner{
  max-width:680px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:32px;
}

.fondatrice-invitation__titre{
  font-family:var(--font-titre);
  font-style:italic;
  font-weight:500;
  font-size:clamp(32px, 3.2vw, 40px);
  line-height:1.1;
  color:var(--encre);
}

.fondatrice-invitation__texte{
  font-family:var(--font-corps);
  font-weight:300;
  font-size:clamp(16px, 1.2vw, 18px);
  line-height:1.7;
  color:var(--encre);
  max-width:560px;
  text-align:center;
  text-align-last:center;
  hyphens:none;
  -webkit-hyphens:none;
}

.fondatrice-invitation__ctas{
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  align-items:center;
  justify-content:center;
  margin-top:8px;
}

/* Espacement ~80 px avant la signature · 32 (gap) + 48 (margin-top) */
.fondatrice-invitation .signature{
  margin-top:48px;
}

/* Override local — rôle en Turquoise Caribéen pleinement opaque
   (sur fond Ivoire, contraste meilleur et aligne avec le brief) */
.fondatrice-invitation .signature__role{
  color:var(--turquoise);
  opacity:1;
}