/* ================================================================
   KOOKIYA FLAVORS — contact.css
   Styles spécifiques de la page /contact.
   Structure : 3 blocs · Hero · Les quatre portes · Signature.
   Page la plus courte du site · fonctionnelle, sobre.
   ================================================================ */


/* ================================================================
   BLOC 1 — HERO · Ivoire · 60 vh
   Typographique pur · pas de CTA · hero court (fonctionnel).
   ================================================================ */

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

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

.contact-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:820px;
}

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


/* ================================================================
   BLOC 2 — LES QUATRE PORTES · Encre
   Grille 2×2 desktop · filet 60 px au-dessus de chaque porte.
   Aucun cadre · séparation par espacement généreux.
   ================================================================ */

.contact-portes{ }

.contact-portes__entete{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  margin-bottom:clamp(56px, 7vh, 80px);
  text-align:center;
}

.contact-portes__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(--ivoire);
  max-width:720px;
}

.contact-portes__grille{
  max-width:var(--max-content);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr;
  gap:72px;
}

@media (min-width:900px){
  .contact-portes__grille{
    grid-template-columns:1fr 1fr;
    gap:72px 64px;           /* vertical 72 · horizontal 64 */
  }
}

/* Porte — filet 60 px haut + eyebrow + titre + texte + CTA/lien */
.contact-porte{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.contact-porte__filet{
  display:block;
  width:60px;
  height:0.5px;
  background:var(--turquoise);
  margin-bottom:4px;
}

.contact-porte__titre{
  font-family:var(--font-titre);
  font-style:italic;
  font-weight:500;
  font-size:clamp(24px, 2.6vw, 28px);
  line-height:1.2;
  color:var(--ivoire);
  margin:0;
}

.contact-porte__texte{
  font-family:var(--font-corps);
  font-weight:300;
  font-size:15px;
  line-height:1.7;
  color:var(--ivoire);
  opacity:0.92;
  margin:0;
  text-align:justify;
  text-align-last:start;
  hyphens:none;
  -webkit-hyphens:none;
}

.contact-porte__cta{
  align-self:flex-start;
  margin-top:8px;
}


/* ================================================================
   BLOC 3 — SIGNATURE · Ivoire
   Centré · min-height 400 px · texte + signature Pinyon Turquoise.
   ================================================================ */

.contact-signature{
  min-height:400px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:clamp(64px, 9vh, 120px) var(--gutter);
}

.contact-signature__texte{
  font-family:var(--font-titre);
  font-style:italic;
  font-weight:500;
  font-size:clamp(24px, 2.8vw, 28px);
  line-height:1.4;
  color:var(--encre);
  max-width:640px;
  margin:0 0 48px;
  text-align:center;
  text-align-last:center;
  hyphens:none;
  -webkit-hyphens:none;
}

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

/* Légère accentuation de la taille Pinyon — brief demande 32 px */
.contact-signature .signature__nom{
  font-size:clamp(28px, 2.8vw, 32px);
}