/* ============================================================
   PAGE CONTACT — v2 (route contact_index)
   Mobile-first. Réutilise base.css (typo / couleurs / boutons /
   .container). Ajouts spécifiques à la page ci-dessous.
   Gouttières : 30 mobile / 40 tablette / 100 desktop.
   Breakpoints : base = mobile, 769 = tablette, 1101 = desktop.
   Figma desktop : 961:6407   |   Figma mobile : 961:6600
============================================================ */

/* ------------------------------------------------------------
   GOUTTIÈRES — aligne .container sur la gouttière du header
   (30 / 40 / 100), contenu max 1166, centré au-delà de 1366.
------------------------------------------------------------ */
@media (min-width: 769px) and (max-width: 1100px) {
  .container { padding: 0 40px; max-width: 100%; }
}
@media (min-width: 1101px) {
  .container {
    max-width: min(1166px, calc(100% - 200px));
    margin-inline: auto;
    padding: 0;
  }
}

/* Page fond blanc (le body v2 est beige par défaut). */
body.travels-page { background-color: #ffffff; }

/* Header sur fond BLANC en flux (maquette contact 961:6408) — les autres pages
   v2 l'affichent en beige, mais la page contact a un fond blanc. headerv2 est
   caché par défaut ; contact.css n'étant chargé que sur cette page, l'override
   est scopé au contact (n'affecte pas les autres pages). */
.header-transparant { display: block; }
/* !important : le beige est posé via l'ID #header-transparant (spécificité plus
   forte) dans le CSS partagé ; contact.css n'étant chargé que sur cette page,
   le !important reste scopé au contact. */
#header-transparant.header-transparant { background-color: #ffffff !important; }
@media (min-width: 1100px) {
  .header-transparant { display: block; }
  .header-transparant .menu,
  .header-transparant .destinations-menu { color: #0f1b24; }
  .header-transparant .topbar_top .image-logo { width: 373px; height: 27px; }
  .header-transparant .btn-quote_request { white-space: nowrap; }
  .header-transparant .right-menu { align-items: center; }
  /* Icône « espace client » (bonhomme) = dernier <a> du right-menu. Sans ces
     règles (présentes sur responsable.css), un style par défaut la masquait sur
     la page contact → on l'affiche pour coller à la maquette (961:7090). */
  .header-transparant .right-menu > * { flex-shrink: 0; }
  .header-transparant .right-menu > a:last-child {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
  }
  .header-transparant .right-menu > a:last-child img {
    width: 20px;
    height: 20px;
    display: block;
  }
}

/* Pas de débordement horizontal (garde-fou 375px). */
html, body { overflow-x: hidden; }

/* Champs hors maquette (téléphone fixe / adresse / pays / CSRF). */
.hidden-fields { display: none; }

/* ============================================================
   A. TITRE + FORMULAIRE   (fond blanc, py-60, colonne centrée)
============================================================ */
.contact-form-section {
  background-color: #ffffff;
  padding: 60px 0;
}
.contact-form-section .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;                       /* titre ↔ formulaire (mobile) */
}

.contact-title {
  font-family: 'Asul', sans-serif;
  font-weight: 400;
  font-size: 50px;                 /* mobile */
  line-height: 1;
  color: #0f1b24;
  text-align: center;
  width: 100%;
}

/* Colonne formulaire centrée. */
.contact-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  width: 100%;
}

.contact-subtitle {
  font-family: 'Asul', sans-serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 31px;
  color: #0f1b24;
  text-align: center;
  width: 100%;
}

.contact-fields {
  display: flex;
  flex-direction: column;
  gap: 25px;
  width: 100%;
}

/* --- Lignes (mobile : empilées) --- */
.contact-row {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}
.contact-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

/* --- Champ texte (style commun à tous les inputs) --- */
.contact-input {
  width: 100%;
  height: 46px;
  padding: 13px 17px;
  border: 1px solid #9f9a7c;
  border-radius: 30.076px;
  background: transparent;
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1;
  color: #0f1b24;
}
.contact-input::placeholder {
  color: #949494;
  opacity: 1;
  font-family: 'Lexend Deca', sans-serif;
  font-size: 13px;
}
.contact-input:focus {
  outline: none;
  border-color: #0f1b24;
}

/* --- Champ rempli : × de vidage (input + textarea) --- */
.contact-input-wrap {
  position: relative;
  width: 100%;
}
/* Laisse la place au × pour ne pas chevaucher le texte saisi. */
.contact-input-wrap.is-filled .contact-input { padding-right: 40px; }
.contact-clear {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  display: none;                 /* visible seulement si .is-filled */
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #0f1b24;
  font-family: 'Lexend Deca', sans-serif;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.contact-input-wrap.is-filled .contact-clear { display: inline-flex; }
/* Textarea : × ancré en haut à droite (le champ grandit vers le bas). */
.contact-input-wrap--textarea .contact-clear {
  top: 15px;
  right: 14px;
  transform: none;
}
.contact-input-wrap--textarea.is-filled .contact-textarea { padding-right: 40px; }

/* --- État erreur (validation) : SEUL le texte/placeholder passe en rouge
   #FF0000 (bordure sauge #9F9A7C conservée), comme la page devis. --- */
.contact-input--error,
.contact-input--error::placeholder,
.contact-textarea.contact-input--error,
.contact-textarea.contact-input--error::placeholder { color: #ff0000; opacity: 1; }
.contact-select--error {
  color: #ff0000;
}

/* --- Civilité (pills) --- */
.contact-civilite { width: 100%; }
.contact-pills {
  display: flex;
  flex-direction: row;
  gap: 15px;
}
.contact-pill {
  height: 50px;
  padding: 13px 17px;
  border: 1px solid #9f9a7c;
  border-radius: 30.076px;
  background: transparent;
  font-family: 'Lexend', sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 1;
  color: #9f9a7c;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color .15s ease, color .15s ease;
}
.contact-pill.is-selected {
  background-color: #9f9a7c;
  color: #ffffff;
}
/* Erreur civilité : labels des pills en rouge (bordure sauge conservée). */
.contact-pills--error .contact-pill { color: #ff0000; }
.contact-pills--error .contact-pill.is-selected { color: #ffffff; }
/* Widget natif kind masqué (piloté par les pills). */
.contact-kind-native { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* --- Texte d'aide (sous code postal / ville) --- */
.contact-helper {
  font-family: 'Lexend', sans-serif;
  font-weight: 300;
  font-size: 15px;                 /* mobile */
  line-height: 24px;
  color: #0f1b24;
}

/* --- Select « Comment nous avez-vous connu ? » --- */
/* Le <select> natif est masqué par select2 ; on garde un style de repli
   au cas où select2 n'est pas encore initialisé. */
.contact-select {
  width: 100%;
  height: 46px;
  padding: 13px 17px;
  border: 1px solid #9f9a7c;
  border-radius: 30.076px;
  background: transparent;
  font-family: 'Lexend Deca', sans-serif;
  font-size: 13px;
  color: #0f1b24;
  -webkit-appearance: none;
  appearance: none;
}

/* --- Remarques (label + textarea) --- */
.contact-remarques {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}
.contact-label {
  font-family: 'Lexend', sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.4;
  color: #0f1b24;
}
.contact-textarea {
  width: 100%;
  min-height: 100px;
  padding: 15px 17px 13px;
  border: 1px solid #9f9a7c;
  border-radius: 23px;
  background: transparent;
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.4;
  color: #0f1b24;
  resize: vertical;
}
.contact-textarea::placeholder {
  color: #949494;
  opacity: 1;
  font-family: 'Lexend Deca', sans-serif;
  font-size: 13px;
}
.contact-textarea:focus { outline: none; border-color: #0f1b24; }

/* --- Newsletter + reCAPTCHA --- */
.contact-consent {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.contact-newsletter {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 15px;
}
.contact-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 18.5px;
  height: 18.5px;
  flex-shrink: 0;
  margin: 0;
  border: 1px solid #9f9a7c;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  position: relative;
}
.contact-checkbox:checked {
  background-color: #9f9a7c;
  border-color: #9f9a7c;
}
.contact-checkbox:checked::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 3px;
  width: 4px;
  height: 8px;
  border: solid #ffffff;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.contact-newsletter__label {
  font-family: 'Lexend', sans-serif;
  font-weight: 300;
  font-size: 15px;                 /* mobile */
  line-height: 1.4;
  color: #0f1b24;
  cursor: pointer;
}

/* --- Texte de confidentialité --- */
.contact-privacy {
  font-family: 'Lexend', sans-serif;
  font-weight: 300;
  font-size: 15px;                 /* mobile */
  line-height: 24px;
  color: #0f1b24;
  width: 100%;
}

/* --- Zone de soumission --- */
.contact-submit-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
}
/* Le bouton reste TOUJOURS cliquable (révèle les erreurs au clic). Son
   APPARENCE reflète la complétude : orange 50% si incomplet, orange plein
   (100%) si complet ; le survol change la COULEUR uniquement à l'état complet. */
.contact-submit {
  font-family: 'Asul', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1;
  padding: 13px 17px;
  border-radius: 30.076px;
  width: max-content;
  background-color: rgba(243, 158, 0, 0.5);   /* incomplet : orange 50% */
  border-color: rgba(243, 158, 0, 0.5);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
/* Neutralise le fondu générique .btn:hover (opacity) : ici le survol change
   la couleur, et seulement quand le formulaire est complet. */
.contact-submit:hover { opacity: 1; }
.contact-submit.is-complete {
  background-color: #f39e00;                    /* complet : orange plein */
  border-color: #f39e00;
}
.contact-submit.is-complete:hover {
  background-color: #d98c00;                    /* survol : orange plus soutenu */
  border-color: #d98c00;
}
.contact-required {
  font-family: 'Lexend', sans-serif;
  font-weight: 300;
  font-size: 13px;
  line-height: 1.4;
  color: #0f1b24;
  text-align: center;
  width: 100%;
}

/* --- Alerte / erreurs --- */
.contact-alert {
  width: 100%;
  padding: 12px 17px;
  border-radius: 12px;
  background-color: #f8d7da;
  color: #842029;
  font-family: 'Lexend', sans-serif;
  font-size: 14px;
}
.contact-error {
  color: #b00020;
  font-family: 'Lexend', sans-serif;
  font-weight: 300;
  font-size: 12px;
  line-height: 1.3;
}
.contact-error:empty { display: none; }

/* Erreurs Symfony accessibles : conservées dans le DOM pour les lecteurs
   d'écran, mais masquées visuellement (le repère visuel = placeholder rouge
   + bandeau global, cf. Figma). */
.contact-error--sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Bandeau d'erreur global (sous « Vos informations personnelles »).
   Le formulaire est une colonne flex à gap 60px (toutes largeurs) : on remonte
   le bandeau pour qu'il se lise comme une sous-ligne du sous-titre (~16px). */
.contact-form-error {
  width: 100%;
  margin-top: -44px;
  text-align: center;
  color: #ff0000;
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 300;
  font-size: 13px;
  line-height: 1.4;
}
/* Masqué par défaut dans le flux nominal (révélé en JS au clic incomplet).
   display:none neutralise aussi le margin-top négatif quand caché. */
.contact-form-error[hidden] { display: none; }
/* Message de validité email — aligné à gauche, sous la ligne tél/email. */
.contact-email-error { margin: 4px 0 0; text-align: left; }

/* « *champs obligatoires » en rouge quand le formulaire est en erreur. */
.contact-required--error { color: #ff0000; }

/* Ligne reCAPTCHA : encadrement + texte rouge si non résolu à la soumission.
   Le widget étant un iframe (fond opaque), on l'encadre via outline pour un
   repère visuel clair (le texte rouge seul serait invisible sous l'iframe). */
.contact-consent--captcha-error .g-recaptcha {
  color: #ff0000;
  outline: 2px solid #ff0000;
  outline-offset: 2px;
  border-radius: 4px;
  width: max-content;
}

/* --- Message de succès --- */
.contact-success {
  width: 100%;
  max-width: 964px;
  text-align: center;
}
.contact-success__text {
  font-family: 'Lexend', sans-serif;
  font-weight: 300;
  font-size: 18px;
  line-height: 28px;
  color: #0f1b24;
}

/* ============================================================
   POP-IN de succès (Figma desktop 961:7017 / mobile 961:7739)
   Overlay plein écran + carte blanche centrée. Masquée par défaut ;
   révélée en JS au clic « formulaire complet » (3 s puis redirection).
============================================================ */
.contact-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.contact-modal[hidden] { display: none; }
.contact-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(45, 45, 45, 0.3);
}
.contact-modal__box {
  position: relative;
  width: min(450px, calc(100% - 60px));
  max-width: 450px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(15, 27, 36, 0.18);
  padding: 40px 30px;
  text-align: center;
}
.contact-modal__title {
  font-family: 'Asul', sans-serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 31px;
  color: #0f1b24;
  margin: 0 0 20px;
}
.contact-modal__text {
  font-family: 'Lexend', sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 24px;
  color: #0f1b24;
  margin: 0;
}

/* ------------------------------------------------------------
   select2 — le contrôle fermé doit ressembler à un input « pill ».
------------------------------------------------------------ */
.contact-field .select2-container { width: 100% !important; }
.contact-field .select2-container--default .select2-selection--single {
  height: 46px;
  padding: 0 17px;
  border: 1px solid #9f9a7c;
  border-radius: 30.076px;
  background: transparent;
  display: flex;
  align-items: center;
}
.contact-field .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0 22px 0 0;             /* réserve la place du chevron à droite (comme devis) */
  line-height: 46px;
  color: #0f1b24;                  /* valeur sélectionnée en ink (et non grise) */
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 300;
  font-size: 13px;
}
.contact-field .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #949494;                  /* placeholder gris tant qu'aucun choix */
}
/* Chevron sauge (SVG) identique à la page devis (.devis-field--select) :
   fermé = vers le bas, ouvert = vers le haut. On masque le triangle par défaut. */
.contact-field .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 46px;
  top: 0;
  right: 17px;
  width: 20px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20fill='none'%3E%3Cpath%20d='M17%207L10%2014L3%207'%20stroke='%239F9A7C'%20stroke-width='1.25'%20stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;
}
.contact-field .select2-container--default .select2-selection--single .select2-selection__arrow b { display: none; }
.contact-field .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow {
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20fill='none'%3E%3Cpath%20d='M17%2014L10%207L3%2014'%20stroke='%239F9A7C'%20stroke-width='1.25'%20stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;
}
/* La pill garde son rayon à l'ouverture (select2 carre les coins par défaut). */
.contact-field .select2-container--default.select2-container--open .select2-selection--single { border-radius: 30.076px !important; }
/* Menu déroulant ouvert — rendu IDENTIQUE à la page devis : boîte blanche
   arrondie, options Lexend Deca en ink, survol beige, valeur sélectionnée en
   sauge, scrollbar fine. Scopé à .contact-select-dropdown (n'affecte pas le
   sélecteur de devise du header).
   ⚠️ !important ciblés : basev2 injecte des styles select2 GLOBAUX
   (surlignage teal #075e71, .select2-results__options{scrollbar-color:#2D2D2D
   #EFECE9; padding:15px}, padding-left:0!important) et select2 4.0.3 est chargé
   APRÈS contact.css → sans !important, ces règles écrasent les nôtres et créent
   le « fond bizarre » + la scrollbar sombre. */
.select2-dropdown.contact-select-dropdown {
  border: 1px solid #9f9a7c !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #fff !important;
  box-shadow: 0 8px 24px rgba(15, 27, 36, 0.08) !important;
}
.contact-select-dropdown .select2-results,
.contact-select-dropdown .select2-results__options { background: #fff !important; }
.contact-select-dropdown .select2-results__options {
  padding: 6px !important;              /* remplace le padding:15px global */
  scrollbar-width: thin;
  scrollbar-color: #9f9a7c transparent; /* remplace la scrollbar sombre #2D2D2D/#EFECE9 */
}
.contact-select-dropdown .select2-results__option {
  font-family: 'Lexend Deca', sans-serif !important;
  font-weight: 300 !important;
  font-size: 13px !important;
  line-height: 20px !important;
  color: #0f1b24 !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  background: transparent !important;   /* pas de fond par défaut sur les options */
}
.contact-select-dropdown .select2-results__option--highlighted[aria-selected] {
  background: transparent !important;   /* pas de fond clair au survol (ni beige ni teal #075e71) */
  color: #0f1b24 !important;
}
.contact-select-dropdown .select2-results__option[aria-selected="true"] {
  background: transparent !important;
  color: #9f9a7c !important;            /* valeur sélectionnée en sauge */
  font-weight: 400 !important;
}
/* Scrollbar fine sauge (Webkit). */
.contact-select-dropdown .select2-results__options::-webkit-scrollbar { width: 6px; }
.contact-select-dropdown .select2-results__options::-webkit-scrollbar-track { background: transparent; }
.contact-select-dropdown .select2-results__options::-webkit-scrollbar-thumb { background: #9f9a7c; border-radius: 3px; }

/* ============================================================
   B. NOS AGENCES → module partagé (déplacé dans
   v2/package/css/agences.css, inclus via le fragment
   front/fragment/agences_module.html.twig).
============================================================ */

/* ============================================================
   C. VISUEL — bandeau pleine largeur
============================================================ */
.contact-visuel {
  width: 100%;
  height: 480px;
}
.contact-visuel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================================
   TABLETTE  (≥ 769px)
============================================================ */
@media (min-width: 769px) {
  .contact-form-section .container { max-width: 964px; margin-inline: auto; }

  /* Lignes à 2 colonnes. */
  .contact-row--2 {
    flex-direction: row;
    gap: 20px;
  }
  .contact-row--2 .contact-field { width: 50%; }

  /* connuPar : demi-largeur, aligné à gauche. */
  .contact-row--half .contact-field { width: 50%; }

  /* Texte d'aide + newsletter + privacy en 13px sur desktop/tablette. */
  .contact-helper,
  .contact-newsletter__label,
  .contact-privacy { font-size: 13px; }
  .contact-helper { max-width: 472px; }

  .contact-required { text-align: right; }
}

/* ============================================================
   DESKTOP  (≥ 1101px)
============================================================ */
@media (min-width: 1101px) {
  .contact-form-section { padding: 60px 0; }
  .contact-form-section .container { gap: 90px; }

  .contact-title { font-size: 90px; }
}