/* Section CONTACT */
#contact{
  position:relative; z-index:10; padding:90px 20px 60px 20px;
  --terracotta: #D36B4F;
  --terracotta-strong: #F08A69;
}
#contact .contact-inner{ max-width:1100px; margin:0 auto; }
#contact .contact-head{ text-align:center; margin-bottom:24px; }
#contact .contact-title{ font-size:clamp(1.8rem,4vw,2.2rem); letter-spacing:-.02em; }
#contact .contact-kicker{ margin-top:6px; opacity:.85; font-size:.95rem; text-transform:none; letter-spacing:0; }

/* Grille */
#contact .contact-grid{  margin-top:18px; }

/* Cartes */
#contact .contact-card{ background:#1f1f1f; border:1px solid rgba(248,245,242,.1); padding:18px 18px 24px; }

/* Sous-titres */
#contact .contact-subtitle{ font-size:1.05rem; margin-bottom:12px; }

/* Infos */
#contact .contact-list{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
#contact .c-label{ display:block; font-size:.8rem; opacity:.75; margin-bottom:4px; text-transform:uppercase; letter-spacing:.06em; }
#contact .c-text{ text-transform:none; letter-spacing:0; opacity:.95; }

/* Email terracotta */
#contact .link{
  color: var(--terracotta);
  text-decoration: none;
  border-bottom: 1px solid rgba(211,107,79,.6);
  text-transform: none; letter-spacing: 0;
}
#contact .link:hover, #contact .link:focus-visible{
  color: var(--terracotta-strong);
  border-bottom-color: var(--terracotta-strong);
  outline: none;
}

/* Liens sociaux (effet navbar) */
#contact .links{ display:flex; gap:8px; flex-wrap:wrap; }
#contact .btn-link{
  position:relative; display:inline-block; padding:10px 14px; text-decoration:none;
  color:var(--warm-off-white); overflow:hidden; z-index:1; transition:color .3s ease;
}
#contact .btn-link::before{
  content:""; position:absolute; left:0; right:0; bottom:0; height:0;
  background:var(--warm-off-white); z-index:-1; transition:height .25s cubic-bezier(.445,.05,.55,.95);
}
#contact .btn-link:hover{ color:var(--warm-off-black); }
#contact .btn-link:hover::before{ height:100%; }
#contact .btn-link:not(:hover)::before{ transition-duration:.8s; }

/* CTA */
#contact .contact-cta{ margin-top:16px; display:flex; gap:10px; flex-wrap:wrap; }

/* Boutons globaux (effet navbar) */
#contact .btn{
  position:relative; display:inline-block; text-decoration:none; text-transform:uppercase; font-weight:700;
  text-align:center; color:var(--warm-off-white); padding:12px 18px; overflow:hidden; transition:color .3s ease; z-index:1; border:none;
}
#contact .btn::before{
  content:""; position:absolute; left:0; right:0; bottom:0; height:0;
  background-color:var(--warm-off-white); z-index:-1; transition:height .25s cubic-bezier(.445,.05,.55,.95);
}
#contact .btn:hover{ color:var(--warm-off-black); }
#contact .btn:hover::before{ height:100%; }
#contact .btn:not(:hover)::before{ transition-duration:.8s; }

/* Bouton ENVOYER : contraste fort */
#contact .btn-submit{
  background: var(--terracotta);
  color: #fff;
  border: 1px solid var(--terracotta);
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}
#contact .btn-submit::before{ content: none; }
#contact .btn-submit:hover{ filter: brightness(1.06); }
#contact .btn-submit:active{ transform: translateY(0); }
#contact .btn-submit:focus-visible{
  outline: 2px dashed var(--terracotta-strong);
  outline-offset: 2px;
}
/* Inputs */
#contact input, #contact textarea{
  width:100%; padding:12px; border:1px solid rgba(248,245,242,.14);
  background:rgba(248,245,242,.03); color:var(--warm-off-white); outline:none;
  transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;
  text-transform:none; letter-spacing:0;
}
#contact input::placeholder, #contact textarea::placeholder{ opacity:.5; }
#contact input:focus, #contact textarea:focus{
  border-color:rgba(248,245,242,.32); background:rgba(248,245,242,.06);
  box-shadow:0 0 0 3px rgba(248,245,242,.08);
}

/* ====== FIX consentement (case à cocher) ====== */
/* Cible le .field qui contient la checkbox */
#contact .field:has(#cf-consent){ margin-top: 6px; }

/* Label + texte du consentement en flex propre et lisible */
#contact .field:has(#cf-consent) > label{
  display:flex !important;
  align-items:flex-start;
  gap:12px;
  line-height: 1.45;
  text-transform: none;
  letter-spacing: 0;
  opacity: .92;
}

/* Case à cocher carrée, visible */
#contact #cf-consent{
  appearance: none;
  width: 18px; height: 18px;
  border: 1px solid rgba(248,245,242,.5);
  background: rgba(248,245,242,.02);
  margin: 2px 0 0 0; /* aligne en haut du texte */
  outline: none;
}
#contact #cf-consent:checked{
  background: var(--terracotta);
  border-color: var(--terracotta);
}
#contact #cf-consent:focus-visible{
  outline: 2px dashed var(--terracotta-strong);
  outline-offset: 2px;
}

/* Texte du consentement : prend la largeur, wrap correct */
#contact .field:has(#cf-consent) > label > span{
  flex: 1 1 auto;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.45;
  opacity: .92;
  margin-top: -2px; /* ajuste l’alignement vertical fin */
}

/* Plus d'espace avant les boutons pour éviter le tassement */
#contact .form-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }

/* Feedback (succès/erreur) si présent */
#contact #formStatus,[role="status"]{
  text-transform:none; letter-spacing:0;
  min-height:1.2em; margin:6px 0 4px;
}

/* Responsive */
@media (max-width:960px){
  #contact .contact-grid{ grid-template-columns:1fr; }
  #contact .form-row{ grid-template-columns:1fr; }
}
@media (max-width:420px){
  #contact .contact-card{ padding:14px; }
  #contact .btn, #contact .btn-link{ padding:10px 14px; }
  #contact input, #contact textarea{ padding:10px; }
  #contact #cf-consent{ width: 20px; height: 20px; } /* touch-friendly */
}