/* ════════════════════════════════════════════════════════════
   CONTACT PAGE — LAOS
   Mise en page narrative spécifique à contact.html :
     Hero → Why Contact Me → Journey Cards → [Form] → FAQ → Footer

   Le formulaire lui-même reste géré par le système réutilisable
   (css/forms.css + js/forms.js). Ce fichier ne touche QUE la
   présentation propre à la page de contact, plus un léger habillage
   "premium" autour du bloc formulaire.

   Class map :
     .contact-hero / __inner / __title / __text / __scroll / __arrow
     .contact-why  / __title / __text
     .journey / __title / __grid
     .journey-card / __num / __title / __text
     .form-page--premium   (habillage premium du formulaire)
     .contact-faq / __title / __list
     .faq-item / __question / __answer
   ════════════════════════════════════════════════════════════ */

/* ─── HERO ─────────────────────────────────────────────────── */
.contact-hero {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 120px 24px 80px;
  overflow: hidden;
}
.contact-hero::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 1px;
  height: 56px;
  background: linear-gradient(to bottom, transparent, #CC2200);
}

.contact-hero__inner {
  max-width: 720px;
}

.contact-hero__title {
  font-family: 'Cinzel Decorative', serif;
  font-size: clamp(28px, 6vw, 54px);
  line-height: 1.25;
  color: #B38A47;
  margin-bottom: 22px;
}

.contact-hero__text {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(14px, 2.2vw, 17px);
  font-weight: 300;
  color: #C9C9C9;
  line-height: 1.9;
  max-width: 560px;
  margin: 0 auto 40px;
}

.contact-hero__scroll {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Cinzel', serif;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #101010;
  background: #B38A47;
  border: 1px solid #B38A47;
  border-radius: 999px;
  padding: 13px 26px;
  transition: color .2s, background .2s;
}
.contact-hero__scroll:hover {
  background: transparent;
  color: #B38A47;
}
.contact-hero__arrow {
  display: inline-block;
  animation: contact-bounce 1.8s ease-in-out infinite;
}
@keyframes contact-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .contact-hero__arrow { animation: none; }
}

/* ─── BLOC 1 — WHY CONTACT ME ──────────────────────────────── */
.contact-why {
  max-width: 720px;
  margin: 0 auto;
  padding: 64px 24px;
  text-align: center;
}
.contact-why__title {
  font-family: 'Cinzel', serif;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #B38A47;
  margin-bottom: 20px;
}
.contact-why__text {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(16px, 2.4vw, 20px);
  font-weight: 300;
  line-height: 1.95;
  color: #E4E4E4;
}

/* ─── JOURNEY CARDS ────────────────────────────────────────── */
.journey {
  max-width: 980px;
  margin: 0 auto;
  padding: 16px 24px 72px;
}
.journey__title {
  font-family: 'Cinzel', serif;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #B38A47;
  text-align: center;
  margin-bottom: 36px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.journey__title::before,
.journey__title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.30;
}

.journey__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.journey-card {
  display: block;
  background: #1A1A1A;
  border: 1px solid #1f1f1f;
  border-top: 3px solid #CC2200;
  border-radius: 6px;
  padding: 30px 26px;
  transition: transform .2s, border-color .2s, background .2s;
}
.journey-card:hover {
  transform: translateY(-4px);
  border-top-color: #B38A47;
  background: #1d1d1d;
}
.journey-card__num {
  display: block;
  font-family: 'Cinzel Decorative', serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: #B38A47;
  margin-bottom: 16px;
}
.journey-card__title {
  font-family: 'Cinzel', serif;
  font-size: 16px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #F0F0F0;
  margin-bottom: 12px;
}
.journey-card__text {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.8;
  color: #C9C9C9;
}

/* ─── BLOC 2 — PREMIUM FORM SECTION ────────────────────────── */
/* Panneau premium : léger dégradé vertical en fond.
   L'habillage de la carte (bordure or + ombre) est défini dans forms.css. */
.form-page--premium {
  position: relative;
  scroll-margin-top: 80px;
  background: linear-gradient(180deg, #101010 0%, #1A1A1A 100%);
  border-radius: 14px;
}

/* ─── BLOC 3 — FAQ ─────────────────────────────────────────── */
.contact-faq {
  max-width: 720px;
  margin: 0 auto;
  padding: 72px 24px 96px;
}
.contact-faq__title {
  font-family: 'Cinzel', serif;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #B38A47;
  text-align: center;
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.contact-faq__title::before,
.contact-faq__title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.30;
}
.contact-faq__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  background: #1A1A1A;
  border: 1px solid #1f1f1f;
  border-radius: 6px;
  overflow: hidden;
}
.faq-item__question {
  position: relative;
  list-style: none;
  cursor: pointer;
  font-family: 'Cinzel', serif;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: #F0F0F0;
  padding: 20px 52px 20px 24px;
  transition: color .2s;
}
.faq-item__question:hover { color: #B38A47; }
.faq-item__question::-webkit-details-marker { display: none; }
.faq-item__question::after {
  content: '+';
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Poppins', sans-serif;
  font-size: 22px;
  font-weight: 300;
  color: #B38A47;
  transition: transform .2s;
}
.faq-item[open] .faq-item__question::after {
  transform: translateY(-50%) rotate(45deg);
}
.faq-item__answer {
  padding: 0 24px 20px;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.85;
  color: #C9C9C9;
}
.faq-item__answer:empty { display: none; }

/* ─── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 760px) {
  .journey__grid { grid-template-columns: 1fr; }
}