/*
 * Refonte des formulaires VLL — bloc « Formulaire devis + contact »
 * (pages établissement) et formulaire de la page Contact.
 *
 * Deux étages :
 *   1. `.vll-devis`  — coquille du bloc établissement (cartes Resalys,
 *      devis complet, carte contact).
 *   2. `.gform_wrapper.gform-theme` — peau moderne des formulaires
 *      Gravity Forms (Orbital), partout où ils apparaissent.
 *
 * TOKENS : mêmes valeurs que assets/css/etablissement.css (docs/tokens.md).
 */
:root {
  --vll-primary: #1972b1;
  --vll-secondary: #e5a92e;
  --vll-dark: #3e405b;
  --vll-text: #515151;
  --vll-grey: #f5f5f6;
  --vll-dark-grey: #ebebee;
  --vll-white: #ffffff;
  --vll-blue-light: #e9f1f8;
  --vll-radius: 10px;
  --vll-round: 999px;
  --vll-gap: 16px;
  --vll-shadow: 0 1px 3px rgba(62, 64, 91, 0.35);
  --vll-shadow-lift: 0 8px 20px rgba(62, 64, 91, 0.18);
  --vll-ease: cubic-bezier(0, 0, 0.025, 1.02);
  /* propres au module formulaires */
  --vllf-bordure: #d9dfeb;
  --vllf-bordure-douce: #e4e8f1;
  --vllf-texte-doux: #6b7080;
  --vllf-erreur: #c0392b;
}

/* ====== coquille du bloc établissement ====== */
.vll-devis.bloc--full-width-color-bg {
  background-color: var(--vll-blue-light);
  padding: clamp(48px, 9vh, 96px) 7vw;
}
#demandedereservation.vll-devis { padding-top: clamp(48px, 9vh, 96px); }

.vll-devis__tete { margin-bottom: calc(var(--vll-gap) * 2); }
.vll-devis__surtitre {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--vll-primary);
}
.vll-devis__tete h2 { margin: 0; }
.vll-devis__chapo {
  margin: 10px 0 0;
  max-width: 62ch;
  color: var(--vllf-texte-doux);
  font-size: 15px;
  line-height: 1.55;
}

/* ====== cartes (variante Resalys) ====== */
.vll-devis__cartes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--vll-gap) * 1.5);
  align-items: stretch;
}
.vll-devis__carte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--vll-white);
  border: 1px solid rgba(62, 64, 91, 0.06);
  border-radius: calc(var(--vll-radius) * 1.6);
  padding: calc(var(--vll-gap) * 1.75);
  box-shadow: 0 2px 10px rgba(62, 64, 91, 0.06);
}
.vll-devis__carte h3 {
  margin: 0 0 10px;
  font-size: 19px;
  font-weight: 700;
  color: var(--vll-dark);
}
.vll-devis__picto {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--vll-gap);
  border-radius: var(--vll-round);
  background: var(--vll-blue-light);
  color: var(--vll-primary);
}
.vll-devis__carte--resa {
  background: linear-gradient(140deg, #1972b1 0%, #124f7c 100%);
  border-color: transparent;
  color: var(--vll-white);
}
.vll-devis__carte--resa h3 { color: var(--vll-white); }
.vll-devis__carte--resa .vll-devis__picto {
  background: rgba(255, 255, 255, 0.16);
  color: var(--vll-white);
}
.vll-devis__points {
  list-style: none;
  margin: 0 0 calc(var(--vll-gap) * 1.25);
  padding: 0;
}
.vll-devis__points li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1.45;
}
.vll-devis__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e5a92e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center / contain;
}

.vll-devis__tel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 21px;
  font-weight: 800;
  color: var(--vll-primary);
  text-decoration: none;
}
.vll-devis__tel:hover { text-decoration: underline; }
.vll-devis__note {
  margin: 8px 0 12px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--vllf-texte-doux);
}
.vll-devis__mail {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--vll-primary);
  overflow-wrap: anywhere;
}
.vll-devis__adresse {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--vllf-bordure-douce);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--vllf-texte-doux);
}

/* ====== boutons d'appel à l'action ====== */
.vll-devis__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: auto;
  padding: 14px 28px;
  border: none;
  border-radius: var(--vll-round);
  background: var(--vll-secondary);
  color: var(--vll-white);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(229, 169, 46, 0.35);
  transition: transform 0.18s var(--vll-ease), box-shadow 0.18s var(--vll-ease);
}
.vll-devis__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(229, 169, 46, 0.45);
}
.vll-devis__cta--contour {
  background: transparent;
  border: 2px solid var(--vll-primary);
  color: var(--vll-primary);
  box-shadow: none;
  transition: background 0.18s var(--vll-ease), color 0.18s var(--vll-ease), transform 0.18s var(--vll-ease);
}
.vll-devis__cta--contour:hover {
  background: var(--vll-primary);
  color: var(--vll-white);
  box-shadow: none;
}
.vll-devis__cta--contour[aria-expanded="true"] {
  background: var(--vll-primary);
  color: var(--vll-white);
}

/* ====== panneau devis replié (variante Resalys) ====== */
.vll-devis__repli { margin-top: calc(var(--vll-gap) * 2); }
/* Cibles d'ancre du bloc : dégagées du menu collant (18/09/2026). */
.vll-devis__repli, .vll-devis__form, .vll-devis__alias { scroll-margin-top: calc(var(--vll-header-h, 120px) + 16px); }
.vll-devis__alias { display: block; height: 0; }
.vll-devis__repli[hidden] { display: none; }
.vll-devis__repli.est-ouvert { animation: vll-devis-ouverture 0.35s var(--vll-ease); }
@keyframes vll-devis-ouverture {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .vll-devis__repli.est-ouvert { animation: none; }
  .vll-devis__cta, .vll-devis__cta:hover { transform: none; transition: none; }
}

/* ====== carte blanche portant le formulaire ====== */
.vll-devis__form {
  background: var(--vll-white);
  border: 1px solid rgba(62, 64, 91, 0.06);
  border-radius: calc(var(--vll-radius) * 1.6);
  padding: clamp(24px, 3.5vw, 44px);
  box-shadow: 0 2px 10px rgba(62, 64, 91, 0.06);
}
.vll-devis__form > h3 { margin: 0 0 calc(var(--vll-gap) * 1.5); }
/* Le thème donne 48px de marge haute et basse à tout <form> : dans la carte,
   cela faisait un grand vide avant le premier champ (20/09/2026). */
.vll-devis__form form.vllf__form { margin: 0; }

/* ====== grille formulaire + carte contact (variante complète) ====== */
.vll-devis__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: calc(var(--vll-gap) * 1.75);
  align-items: start;
}
.vll-devis__aside { position: sticky; top: 110px; }
.vll-devis__carte--contact h3 {
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--vllf-bordure-douce);
  width: 100%;
}
.vll-devis__map {
  width: 100%;
  margin-top: var(--vll-gap);
  border-radius: var(--vll-radius);
  overflow: hidden;
}
.vll-devis__map iframe { display: block; }

/* ==========================================================================
   Peau Gravity Forms (thème Orbital) — devis établissements + page Contact
   ========================================================================== */
.gform_wrapper.gform-theme {
  background: transparent !important;
  padding: 0 !important;
  color: var(--vll-text);
}
.gform_wrapper.gform-theme .gform_required_legend {
  margin: 0 0 18px;
  font-size: 12px;
  color: var(--vllf-texte-doux);
}

/* grille de champs (le thème force display:block, on rétablit une grille) */
.gform_wrapper.gform-theme .gform_fields {
  display: grid !important;
  grid-template-columns: repeat(12, 1fr);
  gap: 22px 20px;
}
.gform_wrapper.gform-theme .gfield {
  grid-column: 1 / -1;
  display: block;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0;
}
.gform_wrapper.gform-theme .gfield.width-50 { grid-column: span 6; }
.gform_wrapper.gform-theme .gfield.width-33 { grid-column: span 4; }
.gform_wrapper.gform-theme .gfield.width-20 { grid-column: span 2; }
.gform_wrapper.gform-theme .gfield.gform_validation_container { display: none !important; }

/* étiquettes */
.gform_wrapper.gform-theme .gfield_label {
  display: inline-flex;
  gap: 4px;
  margin: 0 0 8px;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--vll-dark) !important;
}
.gform_wrapper.gform-theme .gfield_required { color: var(--vll-secondary) !important; }

/* champs de saisie */
.gform_wrapper.gform-theme .gfield input[type="text"],
.gform_wrapper.gform-theme .gfield input[type="email"],
.gform_wrapper.gform-theme .gfield input[type="tel"],
.gform_wrapper.gform-theme .gfield input[type="number"],
.gform_wrapper.gform-theme .gfield select,
.gform_wrapper.gform-theme .gfield textarea {
  width: 100%;
  background-color: var(--vll-white) !important;
  border: 1px solid var(--vllf-bordure) !important;
  border-radius: var(--vll-radius) !important;
  padding: 12px 14px !important;
  font-family: inherit;
  font-size: 15px;
  color: var(--vll-dark);
  box-shadow: none !important;
  text-transform: none !important;
  height: auto !important;
  line-height: 1.4 !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.gform_wrapper.gform-theme .gfield input:focus,
.gform_wrapper.gform-theme .gfield select:focus,
.gform_wrapper.gform-theme .gfield textarea:focus {
  outline: none;
  border-color: var(--vll-primary) !important;
  box-shadow: 0 0 0 3px rgba(25, 114, 177, 0.14) !important;
}
.gform_wrapper.gform-theme .gfield ::placeholder {
  color: #a6adc2;
  font-style: normal;
  text-transform: none;
  opacity: 1;
}
.gform_wrapper.gform-theme .gfield select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 40px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233e405b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px;
  cursor: pointer;
  font-weight: 500;
}
.gform_wrapper.gform-theme .gfield textarea { height: 140px !important; resize: vertical; }
.gform_wrapper.gform-theme .gfield input[type="number"] { text-align: center; }

/* dates : pictogramme calendrier */
.gform_wrapper.gform-theme .gfield--type-date input {
  padding-right: 40px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a90a5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
}

/* descriptions sous champs (tranches d'âge des participants, etc.) */
.gform_wrapper.gform-theme .gfield_description:not(.gfield_validation_message) {
  margin-top: 6px;
  padding: 0;
  font-size: 12px;
  line-height: 1.4;
  color: #8a90a5;
}

/* sections (Adresse, Participants, Séjour) */
.gform_wrapper.gform-theme .gfield.gsection {
  margin-top: 14px !important;
  padding-top: 22px !important;
  border: none !important;
  border-top: 1px solid var(--vllf-bordure-douce) !important;
}
.gform_wrapper.gform-theme .gsection_title {
  margin: 0 !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--vll-primary) !important;
}

/* cases à cocher / boutons radio */
.gform_wrapper.gform-theme .gchoice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.gform_wrapper.gform-theme .gfield input[type="checkbox"],
.gform_wrapper.gform-theme .gfield input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  margin: 1px 0 0 !important;
  background-color: var(--vll-white) !important;
  border: 1.5px solid #c7cede !important;
  border-radius: 6px;
  cursor: pointer;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 12px;
}
.gform_wrapper.gform-theme .gfield input[type="radio"] { border-radius: 50%; }
.gform_wrapper.gform-theme .gfield input[type="checkbox"]:checked,
.gform_wrapper.gform-theme .gfield input[type="radio"]:checked {
  background-color: var(--vll-primary) !important;
  border-color: var(--vll-primary) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") !important;
}
.gform_wrapper.gform-theme .gchoice label {
  font-size: 13.5px;
  font-weight: 500 !important;
  line-height: 1.45;
  color: var(--vllf-texte-doux);
  cursor: pointer;
}

/* bouton d'envoi */
.gform_wrapper.gform-theme .gform_footer {
  display: flex !important;
  margin: 28px 0 0 !important;
  padding: 0 !important;
}
.gform_wrapper.gform-theme input[type="submit"].gform_button {
  padding: 16px 40px !important;
  border: none !important;
  border-radius: var(--vll-round) !important;
  background-color: var(--vll-secondary) !important;
  color: var(--vll-white) !important;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase !important;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(229, 169, 46, 0.35);
  transition: transform 0.18s var(--vll-ease), box-shadow 0.18s var(--vll-ease);
}
.gform_wrapper.gform-theme input[type="submit"].gform_button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(229, 169, 46, 0.45);
}
@media (prefers-reduced-motion: reduce) {
  .gform_wrapper.gform-theme input[type="submit"].gform_button,
  .gform_wrapper.gform-theme input[type="submit"].gform_button:hover { transform: none; transition: none; }
}

/* validation & confirmation */
.gform_wrapper.gform-theme .gform_validation_errors {
  margin: 0 0 20px;
  padding: 14px 18px;
  border: 1px solid rgba(192, 57, 43, 0.25) !important;
  border-radius: var(--vll-radius);
  background: rgba(192, 57, 43, 0.06);
  box-shadow: none !important;
}
.gform_wrapper.gform-theme .gform_validation_errors > h2 {
  margin: 0;
  font-size: 14px !important;
  color: var(--vllf-erreur) !important;
}
.gform_wrapper.gform-theme .gfield_validation_message {
  margin-top: 6px;
  padding: 0;
  background: transparent !important;
  border: none !important;
  font-size: 13px;
  color: var(--vllf-erreur) !important;
}
.gform_wrapper.gform-theme .gfield_error input,
.gform_wrapper.gform-theme .gfield_error select,
.gform_wrapper.gform-theme .gfield_error textarea {
  border-color: var(--vllf-erreur) !important;
}
.gform_confirmation_message {
  display: block;
  padding: 22px 26px;
  background: var(--vll-white);
  border-left: 4px solid var(--vll-primary);
  border-radius: var(--vll-radius);
  box-shadow: 0 2px 10px rgba(62, 64, 91, 0.08);
  font-size: 16px;
  color: var(--vll-dark);
}

/* ====== page Contact : carte d'infos pratiques ====== */
.contact-infos-pratiques {
  background: var(--vll-white) !important;
  border: 1px solid rgba(62, 64, 91, 0.06);
  border-radius: calc(var(--vll-radius) * 1.6);
  padding: calc(var(--vll-gap) * 1.75) !important;
  box-shadow: 0 2px 10px rgba(62, 64, 91, 0.06);
}
.contact-infos-pratiques h6.icon {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 4px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #8a90a5;
}
.contact-infos-pratiques .map iframe { border-radius: var(--vll-radius); }

/* ====== réactivité ====== */
@media (max-width: 1180px) {
  .vll-devis__grille { grid-template-columns: minmax(0, 1fr) 320px; }
}
@media (max-width: 1080px) {
  .vll-devis__cartes { grid-template-columns: 1fr; gap: var(--vll-gap); }
  .vll-devis__grille { grid-template-columns: 1fr; }
  .vll-devis__aside { position: static; }
  .gform_wrapper.gform-theme .gfield.width-20 { grid-column: span 4; }
}
@media (max-width: 1024px) {
  .vll-devis.bloc--full-width-color-bg { padding: 48px 32px; }
  #demandedereservation.vll-devis { padding-top: 48px; }
}
@media (max-width: 760px) {
  /* MOBILE : plus de « boîtes dans des boîtes » (20/09/2026). La bande bleue
     gardait 32px de marge, la carte blanche 24px de plus, le formulaire 48px :
     les champs n'occupaient que 276px sur 390. La bande va de bord à bord avec
     une marge unique, et la carte du formulaire disparaît — les champs, déjà
     blancs et bordés, se posent directement sur la bande. */
  .vll-devis.bloc--full-width-color-bg { padding: 32px 16px 28px; }
  #demandedereservation.vll-devis { padding-top: 32px; }
  .vll-devis__tete { margin-bottom: var(--vll-gap); }
  .vll-devis__form {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
  }
  .gform_wrapper.gform-theme .gform_fields { gap: 18px 14px; }
  .gform_wrapper.gform-theme .gfield.width-50,
  .gform_wrapper.gform-theme .gfield.width-33 { grid-column: 1 / -1; }
  .gform_wrapper.gform-theme .gfield.width-20 { grid-column: span 4; }
  .gform_wrapper.gform-theme input[type="submit"].gform_button { width: 100%; }
  .vll-devis__carte { padding: var(--vll-gap) calc(var(--vll-gap) * 1.25); }
  .vll-devis__tel { font-size: 19px; }
}