/* ============================================================
   CONTACT
   ============================================================ */

.contact-hero{ min-height:100vh; display:flex; align-items:center; padding: clamp(8rem,14vw,11rem) 0 4rem; background: linear-gradient(155deg, var(--creme) 0%, var(--sage-light) 60%, var(--sage) 100%); position:relative; overflow:hidden; }
.contact-hero .container{ position:relative; z-index:2; }
.contact-hero h1{ font-size: clamp(2.4rem, 7vw, 6.5rem); font-weight:800; line-height:1.04; margin:.6rem 0 0; max-width:100%; letter-spacing:-.02em; }
.contact-hero p{ font-size: var(--fs-lead); color: rgba(60,60,59,.65); max-width:75%; margin-top:1.4rem; }

.contact-main{ background: var(--creme); padding-top: clamp(3rem,6vw,5rem); padding-bottom: clamp(6rem,9vw,8rem); }
.contact-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 4rem; align-items:start; }

/* ---------- Bascule Mail / WhatsApp ---------- */
.contact-switch{ display:flex; gap:.8rem; margin-bottom:2rem; }
.contact-switch button{
  flex:1; display:flex; align-items:center; justify-content:center; gap:.6rem;
  padding: 1rem 1.2rem; border-radius:100px; border:1.5px solid rgba(60,60,59,.18);
  background:transparent; color: var(--anthracite); font-weight:700; font-size:.94rem;
  transition: all .35s var(--ease);
}
.contact-switch button.active{ background: var(--anthracite); border-color: var(--anthracite); color:#fff; }
.contact-switch button svg{ width:18px; height:18px; flex-shrink:0; }

/* ---------- Formulaire ---------- */
.contact-form-wrap{ position:relative; min-height: 420px; }
.contact-channel{ display:flex; flex-direction:column; gap:1.3rem; transition: opacity .4s, transform .4s; }
.contact-channel.hidden{ opacity:0; transform: translateY(10px); pointer-events:none; position:absolute; inset:0; }
.contact-form{ display:flex; flex-direction:column; gap:1.3rem; transition: opacity .4s, transform .4s; }
.contact-form.hidden{ opacity:0; transform: translateY(10px); pointer-events:none; position:absolute; inset:0; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.3rem; }
.field{ display:flex; flex-direction:column; gap:.5rem; }
.field label{ font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; font-weight:700; color: var(--anthracite); }
.field input, .field textarea{
  border:none; border-bottom:2px solid rgba(60,60,59,.2); background:transparent;
  padding:.7rem .1rem; font-family:inherit; font-size:1rem; color: var(--anthracite);
  transition: border-color .35s var(--ease);
}
.field input:focus, .field textarea:focus{ outline:none; border-color: var(--sage-dark); }
.field textarea{ resize:vertical; min-height:110px; }
.contact-form button{ margin-top:.6rem; align-self:flex-start; }

.contact-thanks{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; gap:1rem;
  opacity:0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .5s var(--ease); pointer-events:none;
}
.contact-thanks.show{ opacity:1; transform:none; pointer-events:auto; }
.contact-thanks .check{
  width:60px; height:60px; border-radius:50%; background: var(--sage); display:flex; align-items:center; justify-content:center;
  margin-bottom:.6rem;
}
.contact-thanks h3{ font-size:1.8rem; font-weight:800; margin:0; }
.contact-thanks p{ color: rgba(60,60,59,.7); font-size:1.02rem; max-width:420px; }

/* ---------- Bloc latéral ---------- */
.contact-side{ background: var(--anthracite); color:#fff; border-radius:28px; padding: 2.6rem; }
.contact-side h4{ font-size:1.2rem; margin:0 0 1.4rem; color: var(--sage-light); }
.contact-side .c-item{ display:flex; flex-direction:column; gap:.2rem; padding:1rem 0; border-bottom:1px solid rgba(255,255,255,.12); }
.contact-side .c-item:last-child{ border-bottom:none; }
.contact-side .c-item small{ font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color: rgba(255,255,255,.5); }
.contact-side .c-item a, .contact-side .c-item span{ color:#fff; font-size:1.05rem; font-weight:600; }

@media (max-width: 900px){
  .contact-grid{ grid-template-columns:1fr; gap:2.6rem; }
  .form-row{ grid-template-columns:1fr; }
}
@media (max-width: 640px){
  .contact-hero{ padding: clamp(6rem,12vw,9rem) 0 2.5rem; }
  .contact-hero h1{ font-size: clamp(1.6rem, 6.5vw, 2.2rem); }
  .contact-hero p{ max-width: 100%; font-size: .95rem; }
  .contact-main{ padding-top: clamp(2rem,5vw,3rem); padding-bottom: clamp(3.5rem,7vw,5rem); }
  .contact-grid{ gap:2rem; }
  .contact-side{ padding:1.4rem; border-radius:18px; }
  .contact-side .c-item a{ word-break: break-all; font-size: .84rem; }
  .contact-side .c-item small{ font-size:.68rem; }
  .contact-switch button{ font-size:.82rem; padding:.7rem .85rem; gap:.4rem; }
  .contact-switch button svg{ width:15px; height:15px; }
  .contact-form-wrap{ min-height: 280px; }
  .faq{ padding: clamp(2.5rem,6vw,4rem) 0; }
  .faq-head h3{ font-size:.9rem; }
  .faq-item{ padding:1.1rem 0; }
  .faq-item p{ font-size:.88rem; }
}

/* ---------- FAQ ---------- */
.faq{ background: var(--noir); color:#fff; padding: clamp(5rem,9vw,8rem) 0; }
.faq .section-head h2{ color:#fff; }
.faq .tag{ color: var(--sage-light); }
.faq .tag::before{ background: var(--sage-light); }
.faq-list{ display:flex; flex-direction:column; }
.faq-item{ border-bottom:1px solid rgba(255,255,255,.14); padding:1.6rem 0; cursor:pointer; }
.faq-item:first-child{ border-top:1px solid rgba(255,255,255,.14); }
.faq-head{ display:flex; align-items:center; justify-content:space-between; gap:1.4rem; }
.faq-head h3{ font-size: clamp(1.05rem,2vw,1.3rem); font-weight:700; margin:0; transition: color .3s; }
.faq-plus{ font-size:1.5rem; color: var(--sage-light); transition: transform .4s var(--ease); flex-shrink:0; }
.faq-item.open .faq-plus{ transform: rotate(45deg); }
.faq-item.open .faq-head h3{ color: var(--sage-light); }
.faq-item p{ max-height:0; overflow:hidden; transition: max-height .45s var(--ease); color: rgba(247,246,242,.62); font-size:.98rem; line-height:1.7; }
.faq-item p span{ display:block; padding-top:1rem; }