/* ==========================================================================
   CONTACT — styles spécifiques à la page, complètent css/style.css
   et réutilisent les variables/composants globaux (--cyan, --card-bg,
   --panel-border, .final-cta-*, pulseGlow, .footer-social)
   ========================================================================== */

/* ---------- HERO (répliqué depuis .partenaires-hero/.partenaires-title,
   dupliqué ici car partenaires.css n'est pas chargé sur cette page).
   Une seule colonne, alignée à gauche sur desktop : même position et
   même comportement que sur Objectifs / Tarifs / Partenaires. ---------- */
.contact-hero{
  max-width: 640px;
  margin: clamp(28px, 5vh, 48px) 0 9.75vh;
}
.contact-eyebrow{
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.82rem;
  color: var(--cyan);
  margin: 0 0 12px 0;
}
.contact-title{
  font-family: 'Rajdhani', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.08;
  letter-spacing: 0.01em;
  font-size: clamp(1.9rem, 3.2vw, 2.75rem);
  color: var(--white);
  margin: 0 0 16px 0;
}
.contact-title .accent{ color: var(--cyan); text-shadow: 0 0 18px rgba(46,230,224,0.4); }
.contact-divider{
  width: 56px;
  height: 3px;
  background: var(--cyan);
  border-radius: 2px;
  box-shadow: 0 0 12px rgba(46,230,224,0.5);
  margin: 4px 0 18px;
}
.contact-desc{
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 46ch;
  margin: 0;
}

@media (max-width: 980px){
  .contact-hero{ margin-left: auto; margin-right: auto; text-align: center; }
  .contact-desc{ margin: 0 auto; }
  .contact-divider{ margin: 4px auto 18px; }
}

/* ---------- FORMULAIRE + COORDONNÉES
   Prend toute la largeur disponible du .wrap — qui, par construction
   du site (padding de .wrap = clamp identique à la marge du header),
   ne dépasse jamais la largeur du header. La card formulaire est
   flexible (elle absorbe l'espace disponible) tandis que le panneau
   de coordonnées garde une largeur fixe, pour ne jamais être réduit.
   ---------- */
.contact-form-section{
  display: grid;
  grid-template-columns: 1fr 520px;
  gap: 24px;
  margin: 0 0 9.75vh;
  align-items: stretch;
}

.contact-form-card{
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  background: var(--card-bg), rgba(8,12,14,0.35);
  padding: 34px 30px;
  animation: pulseGlow 6s ease-in-out infinite;
}
.contact-form-title{
  text-align: center;
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  color: var(--cyan);
  text-shadow: 0 0 16px rgba(46,230,224,0.4);
  margin: 0 0 24px 0;
}

.field{ margin-bottom: 18px; }
.field:last-of-type{ margin-bottom: 20px; }
.field label{
  display: block;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  color: var(--muted);
  margin-bottom: 8px;
}
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea{
  width: 100%;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  padding: 13px 14px;
  color: var(--white);
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field textarea{ resize: vertical; min-height: 260px; line-height: 1.5; }
.field select{ cursor: pointer; }
.field select option{ color: #06090b; background: #ffffff; }
.field input::placeholder,
.field textarea::placeholder{ color: var(--muted-2); }

.field input:hover,
.field select:hover,
.field textarea:hover{ border-color: var(--cyan-soft); }

.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color: var(--cyan);
  box-shadow: 0 0 14px rgba(46,230,224,0.3);
}

/* États de validation, gérés en JS (js/contact.js) */
.contact-field-error{
  display: none;
  margin-top: 7px;
  font-size: 0.76rem;
  color: #ff6b6b;
}
.field.has-error input,
.field.has-error select,
.field.has-error textarea{
  border-color: rgba(255,107,107,0.6);
  box-shadow: 0 0 12px rgba(255,107,107,0.2);
}
.field.has-error .contact-field-error{ display: block; }
.field.has-success input,
.field.has-success select,
.field.has-success textarea{
  border-color: rgba(53,212,138,0.55);
}

.contact-field-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.contact-submit-btn{
  width: 100%;
  justify-content: center;
  border: none;
  cursor: pointer;
}

.contact-secure-note{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 16px 0 0 0;
  color: var(--muted-2);
  font-size: 0.76rem;
  text-align: center;
}
.contact-secure-note svg{ width: 14px; height: 14px; flex-shrink: 0; color: var(--cyan); }

/* ---------- PANNEAU DE COORDONNÉES
   E-mail / Téléphone / Horaires / Prise de rendez-vous, séparés par
   des lignes fines avec un accent lumineux central (haut et bas de
   la carte), même famille visuelle que .goal-item / .step-item de
   style.css. ---------- */
.contact-info-panel{
  position: relative;
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  background: var(--card-bg), rgba(8,12,14,0.35);
  padding: 8px 30px;
  animation: pulseGlow 6s ease-in-out infinite;
  display: flex;
  flex-direction: column;
}
.contact-info-panel::before,
.contact-info-panel::after{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 110px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  box-shadow: 0 0 12px rgba(46,230,224,0.6);
  opacity: 0.85;
}
.contact-info-panel::before{ top: -1px; }
.contact-info-panel::after{ bottom: -1px; }

.contact-info-row{
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 26px 0;
}
.contact-info-row-icon{
  flex-shrink: 0;
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 1px solid var(--panel-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--cyan);
  box-shadow: 0 0 12px rgba(46,230,224,0.35), 0 0 24px rgba(46,230,224,0.15);
}
.contact-info-row-icon svg{ width: 23px; height: 23px; }
.contact-info-row-body{ flex: 1; min-width: 0; }
.contact-info-row-label{
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.76rem;
  color: var(--cyan);
  margin: 0 0 8px 0;
}
.contact-info-row-value{
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 0.88rem;
  color: var(--white);
  margin: 0 0 6px 0;
  word-break: break-word;
}
.contact-info-link{
  color: inherit;
  font: inherit;
  text-decoration: none;
}
.contact-info-row-desc{
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
  margin: 0;
}
.contact-info-divider{
  height: 1px;
  background: var(--panel-border);
}

.contact-hours-list{
  list-style: none;
  margin: 6px 0 0 0;
  padding: 0;
}
.contact-hours-list li{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--panel-border);
  font-size: 0.88rem;
  color: var(--white);
}
.contact-hours-list li:last-child{ border-bottom: none; }
.contact-hours-list li span:last-child{ color: var(--muted); font-weight: 500; }
.contact-hours-list li.is-closed span:last-child{ color: var(--muted-2); }

.contact-appointment-btn{
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--cyan);
  border-radius: 12px;
  padding: 15px 18px;
  text-decoration: none;
  color: var(--cyan);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.85rem;
  transition: background .2s, box-shadow .2s, transform .2s;
}
.contact-appointment-btn:hover{
  background: rgba(46,230,224,0.1);
  box-shadow: 0 0 18px rgba(46,230,224,0.5), 0 0 36px rgba(46,230,224,0.25);
  transform: translateY(-2px);
}
.contact-appointment-btn-label{ display: flex; align-items: center; gap: 10px; }
.contact-appointment-btn svg{ width: 16px; height: 16px; flex-shrink: 0; }

/* ---------- CARTES D'INFORMATIONS — une seule carte, items séparés
   par des séparateurs (même composant que .partenaires-why-card /
   .partenaires-why-items sur la page Partenaires ; classes réutilisées
   à l'identique, dupliquées ici car partenaires.css n'est pas chargé
   sur cette page). ---------- */
.contact-why-section{ margin-bottom: 9.75vh; }

.contact-why-card{
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  background: var(--card-bg);
  padding: 36px 44px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  animation: pulseGlow 5.38s ease-in-out infinite;
}

.partenaires-why-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 4px 16px;
}
.partenaires-why-item + .partenaires-why-item{
  border-left: 1px solid var(--panel-border);
}
.partenaires-why-icon{
  flex-shrink: 0;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--panel-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--cyan);
  box-shadow: 0 0 12px rgba(46,230,224,0.35), 0 0 24px rgba(46,230,224,0.15);
}
.partenaires-why-icon svg{ width: 20px; height: 20px; }
.partenaires-why-item strong{
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 0.86rem;
  color: var(--white);
}
.partenaires-why-item span{
  font-size: 0.76rem;
  color: var(--muted-2);
  line-height: 1.4;
}

@media (max-width: 980px){
  .contact-why-card{ grid-template-columns: repeat(2, 1fr); row-gap: 26px; padding: 34px 28px; }
  .partenaires-why-item + .partenaires-why-item{ border-left: none; }
  .partenaires-why-item:nth-child(2n){ border-left: 1px solid var(--panel-border); }
}
@media (max-width: 560px){
  .contact-why-card{ grid-template-columns: 1fr; }
  .partenaires-why-item:nth-child(2n){ border-left: none; }
  .partenaires-why-item + .partenaires-why-item{ border-top: 1px solid var(--panel-border); padding-top: 22px; }
}

/* ---------- RESPONSIVE (formulaire + coordonnées) ---------- */
@media (min-width: 641px) and (max-width: 980px){
  .contact-form-section{ grid-template-columns: 1fr; }

  /* Panneau de coordonnées : éléments centrés (tablette uniquement) */
  .contact-info-row{
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .contact-info-row-body{ width: 100%; }

  /* Bouton "Prendre rendez-vous" réduit et centré plutôt qu'étiré
     sur toute la largeur, pour s'adapter au centrage. */
  .contact-appointment-btn{
    display: inline-flex;
    width: auto;
    margin: 16px auto 0;
    padding: 11px 18px;
    font-size: 0.78rem;
  }

  /* Horaires d'ouverture : jour et créneau rapprochés (au lieu d'être
     étalés sur toute la largeur de la carte) et liste centrée. La
     première colonne (jour) a une largeur fixe pour que les jours ET
     les horaires soient chacun alignés en colonne, les uns sous les
     autres, plutôt que décalés selon la longueur du nom du jour. */
  .contact-hours-list{
    width: fit-content;
    margin: 6px auto 0;
  }
  .contact-hours-list li{
    justify-content: flex-start;
    gap: 26px;
  }
  .contact-hours-list li span:first-child{
    min-width: 92px;
  }
}
@media (max-width: 640px){
  .contact-form-section{ grid-template-columns: 1fr; }
  .contact-form-card{ padding: 26px 20px; }
  .contact-info-panel{ padding: 6px 22px; }
  .contact-field-row{ grid-template-columns: 1fr; gap: 0; }
  /* Mobile : le cadenas reste collé au début du texte, même quand celui-ci passe sur 2 lignes */
  .contact-secure-note{ display: block; line-height: 1.5; }
  .contact-secure-note svg{ display: inline-block; vertical-align: -3px; margin-right: 6px; }
}

/* Très petit mobile (≤ 360 px) : « Prendre rendez-vous » tient sur 2 lignes, sans couper « rendez-vous » */
@media (max-width: 360px){
  .contact-appointment-btn{ padding: 10px 14px; font-size: 0.72rem; }
  .contact-appointment-btn .nowrap{ white-space: nowrap; }
}

/* Mention RGPD sous le formulaire */
.contact-rgpd-note{ margin: 8px 0 0 0; color: var(--muted-2); font-size: 0.76rem; line-height: 1.5; text-align: center; }
.contact-rgpd-note a{ color: var(--cyan); text-decoration: none; }
.contact-rgpd-note a:hover{ text-shadow: 0 0 10px rgba(46,230,224,0.6); }

/* Envoi réel : champ piège anti-robot (invisible) et widget Turnstile */
.contact-hp{ position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.contact-turnstile{ margin: 0; }
.contact-submit-btn[disabled]{ opacity: 0.65; cursor: wait; }