/* ================================================================
   KOOKIYA FLAVORS — univers.css
   Styles spécifiques de la page /univers.
   Structure : 4 blocs · Hero · Manifeste · Trois territoires ·
   Positionnement.
   SEULE page du site qui introduit la palette territoriale
   (--terracotta, --jade, --or-solaire) — en accents ponctuels
   uniquement (filets, bordures, eyebrows de carte).
   ================================================================ */


/* ================================================================
   BLOC 1 — UNIVERS HERO · Ivoire
   Typographique pur · aucun visuel · pas de CTA · cohérent /Accueil.
   ================================================================ */

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

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

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

.univers-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;
}

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


/* ================================================================
   BLOC 2 — MANIFESTE · Encre
   Texte centré max-width 720 · phrase signature Cormorant Safran.
   ================================================================ */

.univers-manifeste{ }

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

.univers-manifeste__corps{
  display:flex;
  flex-direction:column;
  gap:24px;
  width:100%;
}

.univers-manifeste__corps p{
  font-family:var(--font-corps);
  font-weight:300;
  font-size:16px;
  line-height:1.8;
  color:var(--ivoire);
  text-align:justify;
  text-align-last:start;
  hyphens:none;
}

/* Phrase signature interne — Cormorant Italic + Safran · 1.05em pour
   compenser le x-height plus petit de Cormorant vs Raleway ambiant */
.univers-manifeste__signature{
  font-family:var(--font-titre);
  font-style:italic;
  font-weight:500;
  color:var(--safran);
  font-size:1.05em;
}


/* ================================================================
   BLOC 3 — TROIS TERRITOIRES · Ivoire
   Grille 3 cartes · palette territoriale en accents (filets + eyebrow).
   Variable locale --accent définie par modifier par territoire.
   ================================================================ */

.univers-territoires{ }

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

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

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

.univers-territoires__grille{
  max-width:var(--max-content);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(48px, 6vw, 72px);
}

@media (min-width:860px){
  .univers-territoires__grille{
    grid-template-columns:repeat(3, 1fr);
    gap:clamp(32px, 4vw, 64px);
  }
}

/* Carte territoire — --accent défini par modifier */
.univers-territoire{
  display:flex;
  flex-direction:column;
  gap:20px;
}

.univers-territoire--caraibes{ --accent:var(--turquoise); }
.univers-territoire--afrique{  --accent:var(--terracotta); }
.univers-territoire--asie{     --accent:var(--jade); }

/* Emplacement visuel 4:5 · Ivoire plus saturé · filet fin territorial */
.univers-territoire__visuel{
  width:100%;
  aspect-ratio:4/5;
  background:#F4E9CE;
  border:0.5px solid var(--accent);
  position:relative;
}
/* Petit marqueur central discret en attendant l'image réelle */
.univers-territoire__visuel::before{
  content:'';
  position:absolute;
  top:50%; left:50%;
  width:24px; height:0.5px;
  background:var(--accent);
  opacity:0.5;
  transform:translate(-50%, -50%);
}
.univers-territoire__visuel img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Eyebrow territoriale — couleur = --accent via override */
.univers-territoire__eyebrow{
  color:var(--accent);
}

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

/* Filet 40 px sous le titre · couleur territoriale */
.univers-territoire__filet{
  display:block;
  width:40px;
  height:0.5px;
  background:var(--accent);
}

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


/* ================================================================
   BLOC 4 — POSITIONNEMENT · Ivoire (dernier bloc avant footer Encre,
   rupture visuelle avec footer cf. bloc invitation d'index.html).
   2 colonnes desktop (filet vertical central Turquoise) ·
   listes centrées · transition fin avec 2 liens texte.
   ================================================================ */

.univers-positionnement{ text-align:center; }

.univers-positionnement__entete{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  margin-bottom:clamp(56px, 7vh, 80px);
}

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

.univers-positionnement__soustitre{
  font-family:var(--font-titre);
  font-style:italic;
  font-weight:500;
  font-size:20px;
  color:var(--encre);
  opacity:0.6;
  text-align:center;
  text-align-last:center;
  hyphens:none;
  -webkit-hyphens:none;
}

.univers-positionnement__grille{
  max-width:var(--max-content);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr;
  gap:56px;
  position:relative;
}

@media (min-width:900px){
  .univers-positionnement__grille{
    grid-template-columns:1fr 1fr;
    gap:80px;
  }
  /* Filet vertical central Turquoise · desktop uniquement · opacité renforcée sur fond Ivoire */
  .univers-positionnement__grille::before{
    content:'';
    position:absolute;
    left:50%;
    top:10%;
    bottom:10%;
    width:0.5px;
    background:var(--turquoise);
    opacity:0.5;
    pointer-events:none;
  }
}

.univers-positionnement__col{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:32px;
}

.univers-positionnement__label{
  font-family:var(--font-corps);
  font-weight:500;
  font-size:11px;
  letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;
  color:var(--turquoise);
  text-align:center;
}

.univers-positionnement__liste{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:6px;
  max-width:360px;
  /* Items alignés à gauche dans leur largeur contenue ; la liste
     elle-même reste centrée dans la colonne via align-items:center
     du parent .univers-positionnement__col. */
  text-align:left;
}

.univers-positionnement__liste li{
  font-family:var(--font-corps);
  font-weight:300;
  font-size:16px;
  line-height:2;
  color:var(--encre);
  opacity:0.92;
}

/* Transition de fin · phrase Cormorant + 2 liens */
.univers-positionnement__transition{
  margin-top:clamp(64px, 8vh, 96px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:32px;
}

.univers-positionnement__phrase{
  font-family:var(--font-titre);
  font-style:italic;
  font-weight:500;
  font-size:clamp(20px, 2vw, 24px);
  line-height:1.3;
  color:var(--encre);
  max-width:520px;
  text-align:center;
  text-align-last:center;
  hyphens:none;
  -webkit-hyphens:none;
}

.univers-positionnement__liens{
  display:flex;
  flex-wrap:wrap;
  gap:32px;
  align-items:center;
  justify-content:center;
}