.vipbox-contact {
  --vipbox-brand: #03071e;
  --vipbox-gold: #af8d4a;

  max-width: 640px;
  margin: 0 auto;
  padding: 24px 16px 48px;
  /* Pas de font-family ici : on hérite volontairement de la police du thème WP
     (déjà chargée par le site), pour la cohérence visuelle et sans requête en plus. */
  color: var(--vipbox-brand);
}

@media (max-width: 479px) {
  .vipbox-contact {
    padding-top: 12px;
    padding-bottom: 32px;
  }

  /* Flèches decoratives retirées sur mobile (boutons Continuer/Envoyer + lien Retour) */
  .vipbox-link-back > span,
  #vipbox-contact-form .vipbox-btn-next > span,
  #vipbox-contact-form .vipbox-btn-submit > span {
    display: none;
  }

  /* Messages d'état/erreur (recherche d'agence, validation...) centrés sur mobile */
  .vipbox-help,
  .vipbox-error {
    text-align: center;
  }

  /* Le padding-top de .vipbox-step-merci s'ajoutait à celui du conteneur,
     créant un espace au-dessus du titre plus grand que sur les autres étapes.
     !important nécessaire : à spécificité égale, la règle de base plus bas
     dans ce fichier (padding: 24px 0) gagnerait sinon, media query ou pas. */
  .vipbox-step-merci {
    padding-top: 0 !important;
  }
}

.vipbox-contact,
.vipbox-contact *,
.vipbox-contact *::before,
.vipbox-contact *::after {
  box-sizing: border-box;
}

.vipbox-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* En-tête d'étape : titre + sous-titre, avec une vraie respiration avant le contenu */
.vipbox-step-header {
  margin-bottom: 32px;
  text-align: center;
}

/*
 * Sélecteurs préfixés par #vipbox-contact-form (l'ID du <form>) plutôt que par
 * .vipbox-contact ci-dessus : la page est éditée avec Elementor, dont le Kit
 * applique des styles globaux à button/label/h1-h6 avec une spécificité et
 * des !important qui battent un simple sélecteur de classe. Un ID gagne
 * quasiment toujours ce bras de fer — voir mémoire projet pour le détail.
 */
#vipbox-contact-form h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--vipbox-brand) !important;
}

.vipbox-subtitle,
.vipbox-intro {
  margin: 0;
  color: #4b5563;
  font-size: 0.95rem;
}

.vipbox-intro {
  font-style: italic;
  margin-bottom: 20px;
}

/* Étape 1 : cartes de profil (même esprit que ProfileCards du tunnel) */
.vipbox-choice-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 8px;
}

@media (min-width: 480px) {
  .vipbox-choice-group {
    grid-template-columns: 1fr 1fr;
  }
}

#vipbox-contact-form .vipbox-choice {
  display: flex !important;
  flex-direction: column !important;
  align-items: center;
  gap: 0 !important;
  text-align: center;
  border: 2px solid #e5e7eb !important;
  background: transparent !important;
  border-radius: 16px;
  padding: 28px 20px;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

/* Même comportement que ProfileCards.tsx du tunnel : seule la bordure change (navy) au
   survol, jamais le fond — et rien ne reste "coché" visuellement au retour sur l'étape */
#vipbox-contact-form .vipbox-choice:hover {
  border-color: var(--vipbox-brand) !important;
  background: transparent !important;
}

/* Espacement en margin explicite (plutôt que le gap du flex parent, contourné on ne
   sait comment) : icône → bloc titre/desc → CTA, 12px de chaque côté, titre/desc serrés (4px) */
#vipbox-contact-form .vipbox-choice-icon {
  display: block !important;
  margin: 0 0 12px !important;
  font-size: 1.75rem;
  line-height: 1;
}

#vipbox-contact-form .vipbox-choice-text {
  display: block !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  line-height: 1.2 !important;
}

#vipbox-contact-form .vipbox-choice-title {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
  font-weight: 600;
  font-size: 1.1rem;
}

#vipbox-contact-form .vipbox-choice-desc {
  display: block !important;
  margin: 4px 0 0 !important;
  padding: 7px 0 3px 0 !important;
  font-weight: normal;
  line-height: 1.2 !important;
  font-size: 0.85rem;
  color: #6b7280;
}

#vipbox-contact-form .vipbox-choice-cta {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
  font-size: 0.85rem;
  font-weight: 500;
  color: #9ca3af;
  transition: color 0.15s ease;
}

#vipbox-contact-form .vipbox-choice:hover .vipbox-choice-cta {
  color: var(--vipbox-brand);
}

/* Champs de formulaire */
.vipbox-field,
.vipbox-field-row {
  margin-bottom: 30px;
}

.vipbox-field-row {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* Sans ce reset, chaque .vipbox-field à l'intérieur d'une .vipbox-field-row
   gardait EN PLUS son propre margin-bottom, qui s'ajoutait au gap de la row —
   d'où un écart deux fois plus grand entre Prénom/Nom qu'entre les autres champs. */
.vipbox-field-row .vipbox-field {
  margin-bottom: 0;
}

@media (min-width: 560px) {
  .vipbox-field-row {
    flex-direction: row;
  }

  .vipbox-field-row .vipbox-field {
    flex: 1;
  }
}

#vipbox-contact-form label {
  display: block !important;
  font-weight: 600;
  margin-bottom: 10px !important;
  font-size: 0.9rem;
  color: var(--vipbox-brand) !important;
}

.vipbox-field-calendar-label {
  text-align: center;
}

#vipbox-contact-form input[type="text"],
#vipbox-contact-form input[type="email"],
#vipbox-contact-form input[type="tel"],
#vipbox-contact-form select,
#vipbox-contact-form textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #d1d5db;
  border-radius: 5px !important;
  font-size: 0.9rem;
  font-family: inherit;
  background: #fff;
  color: var(--vipbox-brand);
}

/* Comme le tunnel (CoordonneesForm.tsx) : juste la bordure qui change de couleur
   au focus, pas de halo/glow autour — le box-shadow qu'on avait ici (censé faire
   un effet "glow") ressortait comme une deuxième bordure grise indésirable. */
#vipbox-contact-form input:focus,
#vipbox-contact-form input:focus-visible,
#vipbox-contact-form select:focus,
#vipbox-contact-form select:focus-visible,
#vipbox-contact-form textarea:focus,
#vipbox-contact-form textarea:focus-visible {
  outline: none !important;
  border-color: var(--vipbox-brand) !important;
  box-shadow: none !important;
}

.vipbox-contact textarea {
  resize: vertical;
}

.vipbox-lieu-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

@media (min-width: 560px) {
  .vipbox-lieu-row {
    flex-direction: row;
  }

  .vipbox-lieu-row input {
    flex: 1;
  }

  .vipbox-lieu-row .vipbox-btn {
    flex-shrink: 0;
  }
}

#vipbox-contact-form .vipbox-help {
  margin: 10px 0 0 !important;
  font-size: 0.85rem;
  color: #6b7280;
}

#vipbox-contact-form .vipbox-help-accent {
  color: var(--vipbox-gold) !important;
}

.vipbox-error {
  background: #fbeaea;
  color: #b3261e;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.9rem;
  margin: 16px 0;
}

/* Widget en mode interaction-only : pas de largeur touchée, juste la hauteur
   ramenée à 0 (le conteneur reste dans le flux normal, donc le script
   Cloudflare s'exécute exactement comme sur une page qui ne le cacherait pas).
   Le margin-top négatif n'est pas cosmétique : le champ Message juste avant a
   margin-bottom:30px et .vipbox-actions juste après a margin-top:32px ; en
   temps normal ces deux marges de voisins fusionneraient (32px de gap). Mais
   overflow:hidden crée un nouveau contexte de formatage sur CE conteneur, ce
   qui empêche la fusion à travers lui — les deux marges s'additionnent au
   lieu de fusionner (30 + 32 = 62px, d'où l'espace en trop). Le -30px annule
   uniquement la contribution du champ précédent, pour ne laisser que le
   margin-top de .vipbox-actions — même gap qu'en l'absence du widget. */
#vipbox-contact-form .vipbox-turnstile-wrap {
  max-height: 0;
  overflow: hidden;
  margin: -30px 0 0 !important;
}

.vipbox-hp {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* Calendrier — même logique visuelle que components/reservation/Calendar.tsx du tunnel */
.vipbox-calendar {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.vipbox-calendar-card {
  display: inline-block;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 20px;
}

.vipbox-calendar-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

#vipbox-contact-form .vipbox-calendar-nav-btn {
  width: 32px !important;
  height: 32px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 8px !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #6b7280 !important;
  font-size: 1.15rem;
  line-height: 1;
  padding: 0 !important;
}

#vipbox-contact-form .vipbox-calendar-nav-btn:hover:not(:disabled) {
  background: #f3f4f6 !important;
}

#vipbox-contact-form .vipbox-calendar-nav-btn:disabled {
  opacity: 0.2;
  cursor: not-allowed;
}

.vipbox-calendar-month {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--vipbox-brand);
  width: 160px;
  text-align: center;
}

.vipbox-calendar-weekdays,
.vipbox-calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.vipbox-calendar-weekdays span {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 500;
  color: #9ca3af;
  padding: 4px 0;
}

.vipbox-calendar-days {
  row-gap: 4px;
}

#vipbox-contact-form .vipbox-calendar-day {
  margin: 0 auto;
  width: 36px !important;
  height: 36px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 999px !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 0.9rem;
  color: var(--vipbox-brand) !important;
  transition: background-color 0.15s ease;
  padding: 0 !important;
}

#vipbox-contact-form .vipbox-calendar-day:hover:not(:disabled) {
  background: #f3f4f6 !important;
}

#vipbox-contact-form .vipbox-calendar-day.is-past {
  color: #e5e7eb !important;
  cursor: not-allowed;
}

#vipbox-contact-form .vipbox-calendar-day.is-selected {
  background: var(--vipbox-brand) !important;
  color: #fff !important;
  font-weight: 600;
}

#vipbox-contact-form .vipbox-calendar-day.is-today:not(.is-selected) {
  box-shadow: inset 0 0 0 1px #9ca3af !important;
}

.vipbox-calendar-selected {
  margin-top: 16px;
  font-size: 0.875rem;
  color: #4b5563;
  text-align: center;
}

.vipbox-calendar-selected strong {
  color: var(--vipbox-gold);
}

/* Actions (navigation entre étapes) */
.vipbox-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
}

#vipbox-contact-form .vipbox-btn {
  appearance: none;
  border: none !important;
  border-radius: 5px !important;
  box-shadow: none !important;
  padding: 13px 28px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  justify-content: center;
  transition: opacity 0.15s ease, color 0.15s ease;
  white-space: nowrap;
  background: transparent !important;
  width: auto !important;
  min-width: 0 !important;
}

#vipbox-contact-form .vipbox-btn-next,
#vipbox-contact-form .vipbox-btn-submit,
#vipbox-contact-form .vipbox-btn-cta {
  background: var(--vipbox-gold) !important;
  color: #fff !important;
  margin-left: auto;
}

#vipbox-contact-form .vipbox-btn-next:hover,
#vipbox-contact-form .vipbox-btn-submit:hover,
#vipbox-contact-form .vipbox-btn-cta:hover {
  opacity: 0.9;
}

/* Retour : simple lien texte, volontairement pas un <button> (pour échapper
   complètement au style global "button" imposé par le kit Elementor) */
#vipbox-contact-form .vipbox-link-back {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 13px 8px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #9ca3af !important;
  text-decoration: none !important;
  cursor: pointer;
}

#vipbox-contact-form .vipbox-link-back:hover {
  color: #4b5563 !important;
}

#vipbox-contact-form .vipbox-btn-secondary {
  background: var(--vipbox-gold) !important;
  color: #fff !important;
}

#vipbox-contact-form .vipbox-btn-secondary:hover {
  opacity: 0.9;
}

#vipbox-contact-form .vipbox-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.vipbox-step-merci {
  text-align: center;
  padding: 24px 0;
}

#vipbox-contact-form .vipbox-step-merci h3 {
  margin-bottom: 24px !important;
}

#vipbox-contact-form .vipbox-step-merci p {
  margin: 0 0 20px !important;
}

.vipbox-step-merci .vipbox-btn-cta {
  /* Le dernier paragraphe a maintenant son propre margin-bottom (20px, qui ne
     collapse pas puisque le bouton est en inline-flex) : réduit d'autant ici
     pour revenir à un espace total avant le bouton proche de l'original. */
  margin: 12px auto 0;
}

/* Mobile : les boutons gardent leur taille naturelle (pas pleine largeur),
   simplement empilés et centrés — Retour se retrouve centré par la même occasion
   puisqu'il est aussi un enfant flex de .vipbox-actions */
@media (max-width: 479px) {
  .vipbox-actions {
    flex-direction: column-reverse;
    align-items: center;
  }

  #vipbox-contact-form .vipbox-btn-next,
  #vipbox-contact-form .vipbox-btn-submit {
    margin-left: 0;
  }
}