/* ==========================================================================
   VCJN VOYAGES — Ajustements responsives, formulaires et recherche
   Chargé en dernier (après premium.css / quotes.css) pour toutes les pages.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   0. BARRES DE NAVIGATION — fonds pleins, stables, jamais transparents
   ---------------------------------------------------------------------------
   Cause racine : .header était background:0 0 (transparent) en haut de page
   et rgba(255,255,255,.92) + backdrop-filter:blur() au scroll (verre dépoli).
   Le contenu des pages passait donc derrière les barres (topbar, navbar,
   panneau mobile, barre de recherche). On rend chaque état 100 % opaque. */
.header{
  background:var(--navy);
  -webkit-backdrop-filter:none;
  backdrop-filter:none}
.header--scrolled{
  background:#fff;
  -webkit-backdrop-filter:none;
  backdrop-filter:none}
@media (max-width:768px){
.header{background:var(--navy)}
.header--scrolled{background:#fff}
}

/* ---------------------------------------------------------------------------
   1. BARRES DE RECHERCHE — arrière-plan stable (ne « disparaît » plus au scroll)
   ---------------------------------------------------------------------------
   Cause du bug : .search-btn avait background:rgba(255,255,255,.1) : quasi
   invisible une fois l'en-tête blanc (header--scrolled). On lui donne un
   fond opaque dans chaque état, et on remplace le sélecteur mort « body.scrolled »
   par un état dépendant uniquement de .header--scrolled. */
.search-btn{
  background:rgba(255,255,255,.16);
  color:#fff;
  box-shadow:0 2px 8px rgba(4,20,40,.12)}
.search-btn:hover{
  background:rgba(255,255,255,.28);
  color:#fff}
.header--scrolled .search-btn,
.header--scrolled~nav .search-btn{
  background:var(--blue-soft);
  color:var(--navy);
  box-shadow:none}
.header--scrolled .search-btn:hover,
.header--scrolled~nav .search-btn:hover{
  background:#d9e9f8;
  color:var(--blue-deeper)}

/* ---------------------------------------------------------------------------
   2. PAGE « Demande de réservation »
   ---------------------------------------------------------------------------
   Le bandeau supérieur reprend exactement la classe `.page-hero--solid`
   de la page Billets d'avion (fond bleu foncé, texte blanc). Aucun style
   spécifique n'est nécessaire ici : l'identité est partagée avec les autres
   pages via les classes existantes. Le formulaire reste sur fond clair
   (.form-card). */

/* ---------------------------------------------------------------------------
   3. FORMULAIRES — alignement et espacements réguliers
   --------------------------------------------------------------------------- */
.form-card{width:100%}
.form-card>p{line-height:1.55}
.form-card>p.form-card__intro{margin-bottom:24px}
.form-card h2{letter-spacing:-.02em}
.req{color:var(--orange)}
.form-group label{
  display:flex;
  align-items:baseline;
  gap:4px;
  line-height:1.4}
.form-control{
  min-height:48px;
  -webkit-appearance:none;
  appearance:none}
textarea.form-control{min-height:132px;appearance:auto;-webkit-appearance:none}
.form-group--full .btn--block{margin-top:2px}
.radio-option{line-height:1.4}
.form-card__foot{
  margin-top:28px;
  padding-top:24px;
  border-top:1px dashed var(--line);
  text-align:center}
.form-card__foot p{color:var(--muted);font-size:.92rem;margin-bottom:14px}

/* ---------------------------------------------------------------------------
   4. RESPONSIVE GÉNÉRAL — espacements fluides et cohérents
   --------------------------------------------------------------------------- */
html{scroll-padding-top:calc(var(--header-h) + 16px)}
.breadcrumb{flex-wrap:wrap}

@media (max-width:1080px){
.section-head{margin-bottom:44px}
}

@media (max-width:768px){
.section{padding:clamp(52px,11vw,66px) 0}
.page-hero{padding:calc(var(--header-h) + 44px) 0 clamp(44px,9vw,60px)}
.page-hero h1{font-size:clamp(1.7rem,7vw,2.3rem)}
.page-hero p{font-size:1rem;max-width:540px}
.section-head h2{font-size:clamp(1.55rem,6.5vw,1.9rem)}
.section-head p{font-size:.98rem}
.grid--dest .dest-card{min-height:260px}
.hero__stats{gap:14px}
}

@media (max-width:600px){
.grid{gap:20px}
.form-card{padding:clamp(24px,6vw,30px) 22px 30px}
.form-card::before{left:22px;right:22px}
.wa-float{right:14px;bottom:16px}
.wa-float a{width:54px;height:54px}
.wa-float svg{width:29px;height:29px}
.to-top{left:14px;bottom:16px;width:42px;height:42px}
.section{padding-bottom:calc(clamp(52px,11vw,66px) + 30px)}
}

@media (max-width:430px){
.form-grid{gap:16px}
.form-card h2{font-size:1.42rem}
.form-card>p{font-size:.9rem;margin-bottom:20px}
.btn--lg{padding:16px 24px;font-size:.98rem;width:100%}
.btn--block{width:100%}
.radio-option{font-size:.9rem}
.form-note{font-size:.78rem;line-height:1.5;margin-top:16px}
.page-hero{padding-top:calc(var(--header-h) + 36px)}
}

@media (max-width:380px){
.brand__name{font-size:1.16rem}
.form-control{padding:12px 13px;font-size:.95rem}
.page-hero h1{font-size:1.6rem}
.page-hero p{font-size:.95rem}
.btn--lg{padding:15px 20px}
.section-head h2{font-size:1.45rem}
.topbar{font-size:.74rem}
}

/* Éviter que les boutons flottants ne masquent le bas des formulaires */
@supports selector(:has(*)){
@media (max-width:600px){
.section:has(.form-card){padding-bottom:150px}
}
}