/* ================================================================
   KOOKIYA FLAVORS — home.css
   Styles spécifiques aux 6 blocs de la page d'accueil.
   Dans l'ordre : Hero · La Voix · Collection · Deux portes ·
   Incarnat · Invitation.
   ================================================================ */


/* ================================================================
   BLOC 1 — HERO
   100 vh · Ivoire · titre Cormorant italique animé mot par mot
   avec bascule Encre → Safran sur « noble. » à 1.8 s.
   ================================================================ */

.hero{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:var(--ivoire);
  padding-top:clamp(120px, 15vh, 180px);
}

.hero__inner{
  text-align:center;
  max-width:1100px;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.hero__eyebrow{
  margin-bottom:clamp(40px, 6vh, 64px);
  opacity:0;
  transform:translateY(14px);
  animation:fade-up 0.9s var(--ease) 0.1s forwards;
}

/* Titre hero — animation mot par mot via data-delay + classe .is-in */
.hero__titre{
  font-family:var(--font-titre);
  font-style:italic;
  font-weight:500;
  color:var(--encre);
  font-size:clamp(48px, 9vw, 88px);
  line-height:0.95;
  letter-spacing:-0.012em;
}
.hero__titre .line{ display:block; }
.hero__titre .word{
  display:inline-block;
  opacity:0;
  transform:translateY(20px);
  transition:opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.hero__titre .word.is-in{
  opacity:1;
  transform:translateY(0);
}
/* Bascule couleur Encre → Safran sur « noble. » */
.hero__titre .word--noble{
  color:var(--encre);
  transition:opacity 0.8s var(--ease),
             transform 0.8s var(--ease),
             color 0.4s var(--ease);
}
.hero__titre .word--noble.is-safran{ color:var(--safran); }

.hero__soustitre{
  margin-top:clamp(32px, 5vh, 48px);
  font-family:var(--font-corps);
  font-weight:300;
  font-size:clamp(15px, 1.2vw, 18px);
  line-height:1.7;
  color:var(--encre);
  max-width:520px;
  opacity:0;
  transform:translateY(12px);
  animation:fade-up 0.8s var(--ease) 1.5s forwards;
  text-align:center;
  text-align-last:center;
  hyphens:none;
  -webkit-hyphens:none;
}
/* Petit point Turquoise entre les territoires : Caraïbes · Afrique · Asie */
.hero__soustitre .dot{
  display:inline-block;
  width:3px; height:3px;
  background:var(--turquoise);
  border-radius:50%;
  vertical-align:middle;
  margin:0 10px 3px;
}

.hero__ctas{
  margin-top:clamp(36px, 5vh, 48px);
  display:flex;
  gap:32px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:center;
  opacity:0;
  transform:translateY(12px);
  animation:fade-up 0.8s var(--ease) 1.9s forwards;
}

/* Lien secondaire du hero — souligné fin, pas d'auto-flèche */
.hero__secondaire{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-corps);
  font-weight:500;
  font-size:13px;
  letter-spacing:var(--tracking-lien);
  text-transform:uppercase;
  color:var(--encre);
  border-bottom:0.5px solid var(--encre);
  padding-bottom:3px;
  transition:gap 0.3s var(--ease);
}
.hero__secondaire:hover,
.hero__secondaire:focus-visible{ gap:14px; }

/* Scroll indicator — fine ligne Turquoise qui descend en boucle */
.hero__scroll{
  position:absolute;
  bottom:30px;
  left:50%;
  transform:translateX(-50%);
  width:1px; height:40px;
  overflow:hidden;
  opacity:0;
  animation:fade 0.6s var(--ease) 2.4s forwards;
}
.hero__scroll::after{
  content:'';
  display:block;
  width:0.5px; height:40px;
  background:var(--turquoise);
  animation:scroll-descend 3s ease-in-out 2.8s infinite;
  transform:translateY(-40px);
}

@keyframes fade-up{
  to { opacity:1; transform:translateY(0); }
}
@keyframes fade{
  to { opacity:1; }
}
@keyframes scroll-descend{
  0%   { transform:translateY(-40px); opacity:0; }
  20%  { transform:translateY(0); opacity:1; }
  80%  { transform:translateY(40px); opacity:0; }
  100% { transform:translateY(40px); opacity:0; }
}


/* ================================================================
   BLOC 2 — LA VOIX
   Fond Encre · phrase manifeste avec « composer » en Safran.
   ================================================================ */

.voix{
  text-align:center;
}

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

.voix__phrase{
  font-family:var(--font-titre);
  font-style:italic;
  font-weight:500;
  color:var(--ivoire);
  font-size:clamp(30px, 3.6vw, 44px);
  line-height:1.2;
  letter-spacing:-0.008em;
  text-align:center;
}
.voix__phrase .accent{ color:var(--safran); }

.voix__filet{
  width:60px;
  height:0.5px;
  background:var(--turquoise);
}

.voix__texte{
  color:var(--ivoire);
  opacity:0.92;
  font-family:var(--font-corps);
  font-weight:300;
  font-size:16px;
  line-height:1.85;
  max-width:680px;
  text-align:center;
  text-align-last:center;
  hyphens:none;
  -webkit-hyphens:none;
}
/* ================================================================
   BLOC 3 — COLLECTION ÉCLOSION NACRÉE
   3 cartes ingrédients · ratio 4:5 · image contenue à 86 %
   avec drop-shadow subtil · attributs sensoriels en eyebrow.
   ================================================================ */

.collection__entete{
  text-align:center;
  max-width:720px;
  margin:0 auto clamp(64px, 8vh, 96px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:28px;
}

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

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

.collection__grille{
  max-width:var(--max-content);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr;
  gap:72px;
}
@media (min-width:860px){
  .collection__grille{
    grid-template-columns:repeat(3, 1fr);
    gap:clamp(32px, 4vw, 64px);
  }
}

.carte{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.carte__visuel{
  width:100%;
  aspect-ratio:4/5;
  background:transparent;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  filter:drop-shadow(0 24px 40px rgba(26, 39, 68, 0.14));
}
.carte__visuel img{
  width:86%;
  height:86%;
  object-fit:contain;
}

/* Fallback si l'image ne charge pas — petit marqueur filet centré */
.carte__visuel--empty::before{
  content:'';
  position:absolute;
  top:50%; left:50%;
  width:24px;
  height:0.5px;
  background:var(--turquoise);
  opacity:0.5;
  transform:translate(-50%, -50%);
}

.carte__nom{
  margin-top:28px;
  font-family:var(--font-titre);
  font-style:italic;
  font-weight:500;
  font-size:24px;
  line-height:1.2;
  color:var(--encre);
}
.carte__origine{
  margin-top:8px;
  font-family:var(--font-corps);
  font-style:italic;
  font-weight:300;
  font-size:14px;
  color:var(--encre);
  opacity:0.8;
  text-align:left;
}

/* Attributs sensoriels — eyebrows reliés par un point Turquoise */
.carte__attributs{
  margin-top:16px;
  font-family:var(--font-corps);
  font-weight:500;
  font-size:10px;
  letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;
  color:var(--turquoise);
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
  text-align:left;
}
.carte__attributs span{
  display:inline-flex;
  align-items:center;
  gap:14px;
}
.carte__attributs span + span::before{
  content:'';
  display:inline-block;
  width:3px;
  height:3px;
  background:var(--turquoise);
  border-radius:50%;
}

.collection__footer{
  margin-top:clamp(56px, 7vh, 80px);
  text-align:center;
}


/* ================================================================
   BLOC 4 — DEUX PORTES
   Grille 2 colonnes desktop · filet vertical central Turquoise ·
   listes typographiées avec puce filet.
   ================================================================ */

.portes__titre{
  text-align:center;
  font-family:var(--font-titre);
  font-style:italic;
  font-weight:500;
  font-size:clamp(32px, 3.4vw, 40px);
  color:var(--encre);
  margin-bottom:clamp(56px, 7vh, 80px);
  line-height:1.1;
}

.portes__grille{
  max-width:var(--max-content);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(24px, 3vw, 40px);
  position:relative;
}

/* Filet vertical central — desktop uniquement */
.portes__grille::before{
  content:'';
  position:absolute;
  left:50%;
  top:8%;
  bottom:8%;
  width:0.5px;
  background:var(--turquoise);
  opacity:0.35;
  pointer-events:none;
  display:none;
}

@media (min-width:860px){
  .portes__grille{
    grid-template-columns:repeat(2, 1fr);
  }
  .portes__grille::before{
    display:block;
  }
}

.porte{
  position:relative;
  padding:clamp(8px, 1vw, 16px) clamp(32px, 4vw, 56px);
  display:flex;
  flex-direction:column;
  gap:24px;
}

.porte__titre{
  font-family:var(--font-titre);
  font-style:italic;
  font-weight:500;
  font-size:28px;
  line-height:1.1;
  color:var(--encre);
}

.porte__intro{
  font-family:var(--font-corps);
  font-weight:300;
  font-size:15px;
  line-height:1.75;
  color:var(--encre);
  text-align:justify;
  text-align-last:start;
  hyphens:none;
}

.porte__liste{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:18px;
  padding-top:20px;
  border-top:0.5px solid rgba(27, 122, 120, 0.35);
}
.porte__liste li{
  font-family:var(--font-corps);
  font-weight:300;
  font-size:14.5px;
  line-height:1.7;
  color:var(--encre);
  padding-left:18px;
  position:relative;
}
/* Puce filet Turquoise */
.porte__liste li::before{
  content:'';
  position:absolute;
  left:0;
  top:12px;
  width:8px;
  height:0.5px;
  background:var(--turquoise);
}
.porte__liste em{
  font-family:var(--font-titre);
  font-style:italic;
  font-weight:500;
  font-size:16px;
  color:var(--encre);
  padding-right:4px;
}

.porte__cta{
  margin-top:auto;
  padding-top:12px;
}


/* ================================================================
   BLOC 5 — INCARNAT · PIÈCE MAÎTRESSE
   Fond Encre · 2 colonnes desktop :
     — colonne gauche : emplacement visuel vertical (Encre sombre +
       filet Turquoise)
     — colonne droite : contenu texte centré (eyebrow, titre Safran,
       sous-titre, table de 4 faits, CTA).
   Mobile : empilé, image en haut.
   ================================================================ */

.incarnat__grille{
  max-width:var(--max-content);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(40px, 6vw, 72px);
  align-items:center;
}

@media (min-width:900px){
  .incarnat__grille{
    grid-template-columns:minmax(260px, 0.85fr) minmax(0, 1.15fr);
    gap:clamp(60px, 7vw, 96px);
  }
}

/* Emplacement visuel vertical — rectangle Encre sombre + filet Turquoise */
.incarnat__visuel{
  aspect-ratio:3/4;
  width:100%;
  max-width:380px;
  margin:0 auto;
  background:var(--encre-sombre);
  border:0.5px solid var(--turquoise);
  position:relative;
  overflow:hidden;
}
@media (min-width:900px){
  .incarnat__visuel{
    max-width:none;
  }
}
/* Petit marqueur central discret en attendant l'image réelle */
.incarnat__visuel::before{
  content:'';
  position:absolute;
  top:50%; left:50%;
  width:32px;
  height:0.5px;
  background:var(--turquoise);
  opacity:0.5;
  transform:translate(-50%, -50%);
}
/* Image réelle à venir — occupera tout l'emplacement en object-fit cover */
.incarnat__visuel img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.incarnat__inner{
  max-width:720px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:36px;
  text-align:center;
}

.incarnat__titre{
  font-family:var(--font-titre);
  font-style:italic;
  font-weight:500;
  font-size:clamp(40px, 5vw, 56px);
  line-height:1.02;
  color:var(--safran);
}

.incarnat__soustitre{
  font-family:var(--font-corps);
  font-weight:300;
  font-size:16px;
  line-height:1.85;
  color:var(--ivoire);
  opacity:0.95;
  max-width:620px;
  text-align:center;
  text-align-last:center;
  hyphens:none;
  -webkit-hyphens:none;
}
.incarnat__filet{
  width:100%;
  max-width:620px;
  height:0.5px;
  background:var(--turquoise);
  margin:8px auto;
}

.incarnat__table{
  width:100%;
  max-width:620px;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:32px 24px;
  padding:8px 0;
}
@media (min-width:1100px){
  .incarnat__table{
    grid-template-columns:repeat(4, 1fr);
    gap:24px;
  }
}

.fait{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:center;
  text-align:center;
}
.fait__label{
  font-family:var(--font-corps);
  font-weight:500;
  font-size:10px;
  letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;
  color:var(--turquoise);
}
.fait__valeur{
  font-family:var(--font-titre);
  font-style:italic;
  font-weight:500;
  font-size:22px;
  color:var(--ivoire);
}

.incarnat__mention{
  font-family:var(--font-titre);
  font-style:italic;
  font-weight:500;
  font-size:17px;
  color:var(--safran);
  letter-spacing:0.01em;
  text-align:center;
}


/* ================================================================
   BLOC 6 — INVITATION
   Fond Ivoire · centré · signature Pinyon Script Turquoise.
   ================================================================ */

.invitation{ text-align:center; }

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

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

.invitation__texte{
  font-family:var(--font-corps);
  font-weight:300;
  font-size:16px;
  line-height:1.75;
  color:var(--encre);
  max-width:520px;
  text-align:center;
  text-align-last:center;
  hyphens:none;
  -webkit-hyphens:none;
}

/* .signature, .signature__nom, .signature__role sont désormais des
   primitives globales définies dans global.css (réutilisables sur
   /fondatrice et /contact). Ici, simple override du margin-top. */
.invitation .signature{ margin-top:32px; }