/* =======================================================
   assets/css/contact.css
   Style spécifique : Page Contact
   Design "2 Colonnes Luxe Discret"
   ======================================================= */

/* --- 1. HERO SECTION --- */
.contact-hero {
  position: relative;
  padding: 92px 0 66px;
  background:
    radial-gradient(1200px 500px at 50% -50px, rgba(184,107,75,0.16) 0%, rgba(184,107,75,0) 60%),
    radial-gradient(900px 380px at 15% 20%, rgba(85,107,47,0.10) 0%, rgba(85,107,47,0) 55%),
    linear-gradient(180deg, #ffffff 0%, var(--bg-cream) 60%, #ffffff 100%);
  overflow: hidden;
  text-align: center;
}
.contact-hero::before {
  content:"";
  position:absolute; inset:-60px -60px auto -60px; height: 240px;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,0.08), transparent);
  transform: rotate(-6deg); pointer-events:none; opacity:.85;
}

.contact-kicker {
  display:inline-block; text-transform: uppercase; letter-spacing: .22em;
  font-size: .78rem; font-weight: 600; color: var(--terracotta); margin-bottom: 14px;
}
.contact-title {
  font-family: 'Cormorant Garamond', serif; font-weight: 600; color: var(--vin-olive);
  font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.08; margin: 0 0 14px 0;
}
.contact-sub {
  max-width: 860px; margin: 0 auto;
  font-size: clamp(1rem, 1.15vw, 1.15rem); opacity: .86; font-weight: 300; line-height: 1.75;
}

/* --- 2. MAIN SECTION (2 Colonnes) --- */
.contact-main {
  background: var(--bg-white); padding: 70px 0;
}

.contact-wrap {
  display:grid; grid-template-columns: 0.95fr 1.05fr;
  gap: 26px; align-items: start;
}

/* Carte Gauche : Infos */
.contact-card {
  background: var(--bg-cream);
  border: 1px solid rgba(184,107,75,0.14);
  padding: 38px; position: relative; overflow: hidden;
}
.contact-card::before {
  content:""; position:absolute; inset: 0 auto 0 0; width: 3px;
  background: linear-gradient(180deg, rgba(184,107,75,0.92), rgba(184,107,75,0.18));
  opacity: .95;
}

.contact-card h2 {
  margin: 0 0 10px 0; font-family: 'Cormorant Garamond', serif; font-weight: 600;
  color: var(--vin-olive); font-size: 1.8rem; line-height: 1.15;
}
.contact-card p {
  margin: 0 0 18px 0; font-weight: 300; opacity: .86; line-height: 1.75;
}

.contact-lines {
  display:flex; flex-direction: column; gap: 12px; margin-top: 18px;
}
.line {
  display:flex; gap: 10px; align-items:flex-start; padding: 14px 14px;
  background: #fff; border: 1px solid rgba(184,107,75,0.12);
}
.dot {
  width: 18px; height: 18px; border: 1px solid rgba(184,107,75,0.35);
  border-radius: 999px; position: relative; flex: 0 0 18px; margin-top: 2px;
}
.dot::after {
  content:""; position:absolute; inset: 4px; border-radius: 999px;
  background: rgba(184,107,75,0.18);
}
.line strong {
  display:block; font-weight: 600; margin-bottom: 2px; color: var(--terracotta);
}
.line span { font-weight: 300; opacity: .86; line-height: 1.6; }
.line a {
  color: var(--ink); text-decoration: underline; text-underline-offset: 3px;
}
.line a:hover { color: var(--terracotta); }

.cta-row { margin-top: 22px; display:flex; gap: 12px; flex-wrap: wrap; }

.micro {
  margin-top: 16px; font-size: .92rem; color: var(--text-softer, rgba(46,63,54,0.6));
  opacity: 1; font-style: italic; line-height: 1.7;
}

/* Carte Droite : Calendly */
.cal-card {
  background: #fff; border: 1px solid rgba(184,107,75,0.14); overflow: hidden;
}
.cal-head {
  padding: 22px 22px; background: var(--bg-cream); border-bottom: 1px solid rgba(184,107,75,0.12);
}
.cal-head .k {
  display:inline-block; text-transform: uppercase; letter-spacing: .18em;
  font-size: .76rem; font-weight: 600; color: var(--terracotta); margin-bottom: 10px;
}
.cal-head h2 {
  margin: 0 0 10px 0; font-family: 'Cormorant Garamond', serif; font-weight: 600;
  color: var(--vin-olive); font-size: 1.85rem; line-height: 1.15;
}
.cal-head p { margin: 0; font-weight: 300; opacity: .86; line-height: 1.75; }

.cal-embed { width: 100%; height: 760px; border: 0; display:block; background: #fff; }

/* --- RESPONSIVE --- */
@media (max-width: 980px){
  .contact-wrap { grid-template-columns: 1fr; }
  .cal-embed { height: 720px; }
}
@media (max-width: 520px){
  .contact-hero { padding: 82px 0 60px; }
  .contact-card { padding: 30px 18px; }
  .cal-head { padding: 16px 16px; }
  .cal-embed { height: 680px; }
}