/* ================================================================
   KOOKIYA FLAVORS — immersions.css
   Styles spécifiques de la page /immersions.
   Structure : 4 blocs · Hero · Food Experiences ·
   Les éditions (Incarnat) · Invitation.
   ================================================================ */


/* ================================================================
   BLOC 1 — HERO · Ivoire · 80 vh
   Typographique pur · pas de visuel · pas de CTA.
   ================================================================ */

.immersions-hero{
  min-height:80vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:var(--ivoire);
  /* Padding-top explicite fondé sur --header-height · garantit que le
     contenu du hero ne passe jamais sous le header fixe, même si le
     contenu est assez long pour déborder du centrage flex. */
  padding-top:calc(var(--header-height) + clamp(48px, 8vh, 108px));
}

.immersions-hero__inner{
  text-align:center;
  max-width:900px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:28px;
}

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

.immersions-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:680px;
  text-align:center;
  text-align-last:center;
  hyphens:none;
  -webkit-hyphens:none;
}


/* ================================================================
   BLOC 2 — AI FOOD EXPERIENCES · Encre
   Desktop : 2 cols (texte gauche 55 % · visuel droite 40 %).
   Mobile : empilées · visuel entre P1 et P2 (ordre HTML naturel).
   ================================================================ */

.immersions-aife{ }

/* MOBILE (défaut) — grid 1 col avec visuel placé entre P1 et P2 via
   grid-template-areas. Un élément par grid-area, pas de conteneur
   intermédiaire (évite la superposition dans la même cellule). */
.immersions-aife__grille{
  max-width:var(--max-content);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr;
  grid-template-areas:
    "eyebrow"
    "titre"
    "soustitre"
    "p1"
    "visuel"
    "p2"
    "p3"
    "cta"
    "note";
  row-gap:20px;
}

.immersions-aife__eyebrow   { grid-area:eyebrow; }
.immersions-aife__titre     { grid-area:titre;   margin:0; }
.immersions-aife__soustitre { grid-area:soustitre; margin:0; }
.immersions-aife__para--1   { grid-area:p1; margin:0; }
.immersions-aife__para--2   { grid-area:p2; margin:0; }
.immersions-aife__para--3   { grid-area:p3; margin:0; }
.immersions-aife__visuel    { grid-area:visuel; }
.immersions-aife__cta       { grid-area:cta; justify-self:start; margin-top:12px; }
.immersions-aife__note      { grid-area:note; margin:0; }

.immersions-aife__titre{
  font-family:var(--font-titre);
  font-style:italic;
  font-weight:500;
  font-size:clamp(36px, 4vw, 48px);
  line-height:1.05;
  color:var(--ivoire);
}

.immersions-aife__soustitre{
  font-family:var(--font-corps);
  font-weight:300;
  font-size:18px;
  line-height:1.6;
  color:var(--ivoire);
  max-width:540px;
  text-align:justify;
  text-align-last:start;
  hyphens:none;
  -webkit-hyphens:none;
}

/* Paragraphes principaux — Raleway 300 Ivoire · justifié desktop */
.immersions-aife__para{
  font-family:var(--font-corps);
  font-weight:300;
  font-size:16px;
  line-height:1.7;
  color:var(--ivoire);
  opacity:0.92;
  max-width:540px;
}
@media (min-width:900px){
  .immersions-aife__para{
    text-align:justify;
  }
}

.immersions-aife__note{
  font-family:var(--font-corps);
  font-weight:300;
  font-size:13px;
  line-height:1.6;
  color:var(--ivoire);
  opacity:0.7;
  max-width:520px;
  text-align:justify;
  text-align-last:start;
  hyphens:none;
  -webkit-hyphens:none;
}

/* Emplacement visuel 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. */
.immersions-aife__visuel{
  aspect-ratio:3/4;
  width:100%;
  max-width:380px;
  margin:0 auto;
  position:relative;
  overflow:hidden;
}
.immersions-aife__visuel img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* DESKTOP (≥ 1024 px) — 2 colonnes 55 / 40 avec 5 % de gap central ·
   visuel couvre toute la colonne droite, centré verticalement. */
@media (min-width:1024px){
  .immersions-aife__grille{
    grid-template-columns:55fr 40fr;
    column-gap:5%;
    row-gap:20px;
    grid-template-areas:
      "eyebrow   visuel"
      "titre     visuel"
      "soustitre visuel"
      "p1        visuel"
      "p2        visuel"
      "p3        visuel"
      "cta       visuel"
      "note      .";
    align-items:start;
  }
  .immersions-aife__visuel{
    align-self:center;
    max-width:100%;
    margin:40px 0 0;    /* 40px top décale sous le folio (top calc(header+20) ≈ 84 px) · cf. pattern .fondatrice-manifeste__portrait */
  }
}


/* ================================================================
   BLOC 3 — LES ÉDITIONS · Ivoire
   Entête + pièce de tête Incarnat (2 cols desktop).
   ================================================================ */

.immersions-editions{
     /* resserré après suppression de la note finale · bloc 3 et bloc 4 partagent le fond Ivoire, éviter l'effet de zone vide */
}

.immersions-editions__entete{
  max-width:720px;
  margin:0 auto clamp(56px, 7vh, 80px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  text-align:center;
}

.immersions-editions__titre{
  font-family:var(--font-titre);
  font-style:italic;
  font-weight:500;
  font-size:clamp(40px, 5vw, 56px);
  line-height:1.05;
  color:var(--encre);
}

.immersions-editions__soustitre{
  font-family:var(--font-corps);
  font-style:italic;
  font-weight:300;
  font-size:16px;
  line-height:1.6;
  color:var(--encre);
  max-width:640px;
  text-align:center;
  text-align-last:center;
  hyphens:none;
  -webkit-hyphens:none;
}

/* Pièce de tête Incarnat — 2 cols desktop (visuel 0.8fr / texte 1.2fr) */
.edition-tete{
  max-width:var(--max-content);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr;
  gap:40px;
}

@media (min-width:900px){
  .edition-tete{
    grid-template-columns:minmax(260px, 0.8fr) minmax(0, 1.2fr);
    gap:clamp(56px, 7vw, 96px);
    align-items:center;
  }
}

/* Emplacement visuel 4:5 · 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. */
.edition-tete__visuel{
  aspect-ratio:4/5;
  width:100%;
  max-width:420px;
  margin:0 auto;
  position:relative;
  overflow:hidden;
}
.edition-tete__visuel img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

@media (min-width:900px){
  .edition-tete__visuel{ max-width:100%; }
}

.edition-tete__contenu{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.edition-tete__titre{
  font-family:var(--font-titre);
  font-style:italic;
  font-weight:500;
  font-size:clamp(32px, 3.6vw, 40px);
  line-height:1.1;
  color:var(--safran);
  margin:0;
}

.edition-tete__soustitre{
  font-family:var(--font-titre);
  font-style:italic;
  font-weight:500;
  font-size:18px;
  line-height:1.3;
  color:var(--encre);
  margin:0;
  text-align:center;
}

.edition-tete__texte{
  font-family:var(--font-corps);
  font-weight:300;
  font-size:16px;
  line-height:1.7;
  color:var(--encre);
  margin:0;
  text-align:justify;
  text-align-last:start;
  hyphens:none;
}

.edition-tete__filet{
  display:block;
  width:80px;
  height:0.5px;
  background:var(--turquoise);
  margin:8px 0;
}

.edition-tete__statut-label{
  font-family:var(--font-corps);
  font-weight:500;
  font-size:11px;
  letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;
  color:var(--turquoise);
}

.edition-tete__statut-texte{
  font-family:var(--font-corps);
  font-weight:300;
  font-size:14px;
  line-height:1.7;
  color:var(--encre);
  margin:0;
  text-align:justify;
  text-align-last:start;
  hyphens:none;
}

.edition-tete__actions{
  margin-top:16px;
  display:flex;
  flex-direction:column;
  gap:16px;
  align-items:flex-start;
}

/* ================================================================
   BLOC 4 — INVITATION · Ivoire (dernier bloc avant footer Encre,
   rupture visuelle cf. bloc invitation d'index.html).
   Centré · min-height 480 · formulaire email + checkbox Incarnat.
   Ancre #rejoindre (pour CTA Bloc 3).
   ================================================================ */

.immersions-invitation{
  min-height:480px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  scroll-margin-top:calc(var(--header-height) + 20px);
}

.immersions-invitation__inner{
  max-width:720px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
}

.immersions-invitation__titre{
  font-family:var(--font-titre);
  font-style:italic;
  font-weight:500;
  font-size:clamp(26px, 3vw, 32px);
  line-height:1.25;
  color:var(--encre);
  max-width:680px;
}

.immersions-invitation__soustitre{
  font-family:var(--font-corps);
  font-weight:300;
  font-size:16px;
  line-height:1.6;
  color:var(--encre);
  opacity:0.85;
  max-width:540px;
  text-align:center;
  text-align-last:center;
  hyphens:none;
  -webkit-hyphens:none;
}

.immersions-invitation__form{
  margin-top:clamp(32px, 4vh, 48px);
  width:100%;
  max-width:560px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
}

.immersions-invitation__row{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:12px;
}
@media (min-width:640px){
  .immersions-invitation__row{
    flex-direction:row;
    gap:8px;
  }
}

.immersions-invitation__input{
  flex:1 1 280px;
  min-width:280px;
  background:transparent;
  border:0.5px solid var(--encre);
  color:var(--encre);
  padding:14px 16px;
  font-family:var(--font-corps);
  font-weight:300;
  font-size:14px;
  letter-spacing:0.02em;
  transition:border-color 0.3s var(--ease);
}
.immersions-invitation__input:focus{
  outline:none;
  border-color:var(--safran);
}
.immersions-invitation__input::placeholder{
  color:var(--encre);
  opacity:0.5;
}

.immersions-invitation__submit{
  padding:14px 32px;
  background:var(--encre);
  color:var(--ivoire);
  font-family:var(--font-corps);
  font-weight:500;
  font-size:12px;
  letter-spacing:var(--tracking-cta);
  text-transform:uppercase;
  border:none;
  cursor:pointer;
  transition:background 0.3s var(--ease), transform 0.3s var(--ease);
}
.immersions-invitation__submit:hover:not(:disabled),
.immersions-invitation__submit:focus-visible:not(:disabled){
  background:var(--safran);
  transform:translateY(-1px);
}
.immersions-invitation__submit:disabled{
  opacity:0.55;
  cursor:not-allowed;
}

/* Case à cocher Incarnat · Safran pour signer le choix */
.immersions-invitation__option{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-corps);
  font-weight:300;
  font-size:13px;
  line-height:1.5;
  color:var(--encre);
  opacity:0.9;
  cursor:pointer;
  flex-wrap:wrap;
  justify-content:center;
}
.immersions-invitation__option input[type="checkbox"]{
  margin:0;
  width:14px;
  height:14px;
  accent-color:var(--safran);
  cursor:pointer;
}