/* ==========================================================================
   LES FORMULAIRES — « Poser une option » / « Nous contacter » (une même fenêtre) et
   « S'inscrire » (fenêtre en 4 étapes). Position 12, fiche Notion n° 8, D149.

   Repris de la maquette, IDENTIQUES À ELLE (consigne d'Alexandre du 2026-10-08) :
   `style.css` l. 2420-2610 (les deux fenêtres, d'un seul tenant : l'inscription réutilise
   les classes `.opt*`), l. 3086-3110 (étape « Assurances & paiement ») et l. 3132-3139
   (extensions), puis `mobile.css` l. 465-481 (§5, seules les deux lignes des fenêtres) et
   l. 826, 855-857 (§10, survols neutralisés au doigt). Bornes CALCULÉES sur les titres de
   section — la première extraction s'arrêtait à 3092, au milieu du bloc. Les commentaires de
   Fix sont gardés tels quels.

   ⚠️ Fichier PARTAGÉ et chargé sur TOUTES les pages : le bouton « Contact » de l'en-tête
   ouvre la fenêtre de n'importe où.
   ========================================================================== */

/* ==========================================================================
   FORMULAIRE « POSER UNE OPTION » (Fix 07/07) — popup par-dessus le site.
   En-tête = récap voyage (image + titre + méta) ; corps = formulaire.
   ========================================================================== */
.opt-overlay{ position:fixed; inset:0; z-index:99998; display:flex; align-items:center; justify-content:center;
  padding:clamp(16px,4vh,48px); }
.opt-overlay[hidden]{ display:none; }
.opt-back{ position:absolute; inset:0; background:rgba(10,10,10,.78); backdrop-filter:blur(4px);
  animation:optFade .25s ease both; cursor:pointer; }
/* fige-scroll du fond : compense la largeur de la scrollbar disparue (--sbw, posé en JS)
   pour que le site ne saute pas vers la droite à l'ouverture d'une popup. */
html.opt-lock{ overflow:hidden; padding-right:var(--sbw,0px); }
.opt{ position:relative; z-index:1; width:min(920px,100%); max-height:92vh; overflow:auto;
  background:var(--creme); border-radius:20px; box-shadow:0 40px 100px -30px rgba(0,0,0,.6);
  animation:optIn .32s var(--ease) both; }
@keyframes optFade{ from{opacity:0} to{opacity:1} }
@keyframes optIn{ from{opacity:0; transform:translateY(24px) scale(.98)} to{opacity:1; transform:none} }
.opt__x{ position:absolute; top:14px; right:14px; z-index:3; width:38px; height:38px; border-radius:50%;
  border:0; background:rgba(255,255,255,.9); color:var(--noir); font-size:24px; line-height:1; cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.2); transition:background .2s, transform .2s; }
.opt__x:hover{ background:var(--blanc); transform:rotate(90deg); }

/* RÉCAP voyage en en-tête : bande image + infos */
.opt__recap{ position:relative; display:flex; gap:16px; align-items:center; padding:22px 24px;
  background:var(--noir); color:var(--blanc); border-radius:20px 20px 0 0; }
.opt__recap-pic{ width:96px; height:72px; flex:0 0 auto; border-radius:12px; background:#241d12 center/cover no-repeat; }
.opt__recap-eyebrow{ font-size:var(--fs-label); font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--jaune); margin:0 0 3px; }
.opt__recap-titre{ font-size:22px; line-height:1.15; color:var(--blanc); margin:0 0 6px; }
.opt__recap-meta{ list-style:none; display:flex; flex-wrap:wrap; gap:4px 14px; margin:0; padding:0;
  font-size:var(--fs-small); color:rgba(255,255,255,.75); }
.opt__recap-meta strong{ color:var(--jaune); }

.opt__body{ padding:24px; }
.opt__titre{ font-size:clamp(24px,3vw,30px); color:var(--noir); margin:0 0 4px; }
.opt__sub{ font-size:var(--fs-small); color:var(--noir-50); margin:0 0 18px; }
/* form en GRILLE 2 colonnes sur écran large (retour Fix : éviter le scroll vertical) ;
   les champs longs (voyage, dates, message, cases, section, bouton) occupent les 2 colonnes. */
.opt__form{ display:grid; grid-template-columns:1fr 1fr; gap:12px 16px; align-items:start; }
.opt__row{ display:contents; }   /* les 2 champs du row deviennent 2 cellules de la grille */
.opt__form > .opt__sec, .opt__form > label.opt__f:has(textarea), .opt__form > label.opt__f:has(select),
.opt__form > #optDatesWrap, .opt__form > .opt__check, .opt__form > .opt__err, .opt__form > .opt__submit{
  grid-column:1 / -1; }   /* pleine largeur */
.opt__f{ display:flex; flex-direction:column; gap:5px; }
.opt__f > span{ font-size:var(--fs-label); font-weight:600; color:var(--noir); }
.opt__f i{ color:var(--jaune-d); font-style:normal; }
.opt__f input, .opt__f textarea, .opt__sel{ font:inherit; font-size:var(--fs-small); color:var(--noir);
  background:var(--blanc); border:1.5px solid rgba(14,14,14,.15); border-radius:10px; padding:11px 13px;
  outline:none; transition:border-color .2s; width:100%; box-sizing:border-box; }
.opt__f input:focus, .opt__f textarea:focus, .opt__sel:focus{ border-color:var(--jaune); }
.opt__f textarea{ resize:vertical; min-height:64px; }
.opt__check{ display:flex; align-items:flex-start; gap:9px; font-size:var(--fs-small); color:var(--noir-50);
  line-height:1.4; cursor:pointer; }
.opt__check input{ margin-top:2px; width:17px; height:17px; flex:0 0 auto; accent-color:var(--jaune-d); }
/* titre de section (« Informations de votre voyage ») */
.opt__sec{ font-size:var(--fs-label); font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--jaune-d); margin:8px 0 2px; padding-bottom:8px; border-bottom:1px solid var(--creme-2); }
/* dates de départ : cases à cocher encadrées (comme le site d'origine) */
.opt__dates{ display:flex; flex-direction:column; gap:6px; }
.opt__check--date{ background:var(--blanc); border:1.5px solid rgba(14,14,14,.15); border-radius:10px;
  padding:10px 13px; margin:0; align-items:center; color:var(--noir); }
.opt__check--date:has(input:checked){ border-color:var(--jaune); background:#fffdf5; }
.opt__check i{ color:var(--jaune-d); font-style:normal; }
/* Les liens des cases (confidentialité, CGV, CPV) : sans cette règle, `a{ color:inherit;
   text-decoration:none }` de common.css les rendait invisibles — « l'astérisque ne renvoie vers
   rien », retour de la cliente du 2026-11-09 (D182). */
.opt__check a{ color:var(--noir); text-decoration:underline; text-underline-offset:2px; }
.opt__check a:hover, .opt__check a:focus-visible{ color:var(--jaune-d); }
/* « * Champs obligatoires » (D182) */
.opt__legende{ font-size:var(--fs-label); color:var(--noir-50); margin:0; }
.opt__legende i{ color:var(--jaune-d); font-style:normal; }
.opt__form > .opt__legende{ grid-column:1 / -1; }
.ins__form > .opt__legende{ margin-top:14px; }
.opt__sec i{ font-style:normal; }
/* Fenêtre « sur mesure » (D185) : l'habillage de l'option ; seul le choix oui / non de l'aérien
   est propre — deux cases radio côte à côte, sur toute la largeur de la grille. */
.opt__form > .sm-aerien{ grid-column:1 / -1; }
.sm-choix{ display:flex; gap:22px; flex-wrap:wrap; }
.sm-choix .opt__check{ color:var(--noir); }
.opt__err{ color:#c0392b; font-size:var(--fs-small); min-height:16px; }
.opt__submit{ margin-top:4px; width:100%; justify-content:center; }

/* écran de confirmation */
.opt__done{ padding:44px 30px; text-align:center; }
.opt__done[hidden]{ display:none; }
.opt__done-ico{ width:64px; height:64px; margin:0 auto 18px; border-radius:50%; background:#2e7d46; color:var(--blanc);
  display:flex; align-items:center; justify-content:center; font-size:34px; }
.opt__done h2{ font-size:28px; color:var(--noir); margin:0 0 10px; }
.opt__done p{ font-size:var(--fs-body); color:var(--noir-50); margin:0 0 22px; line-height:1.5; }

/* mobile / écran étroit : form en 1 colonne (plus en hauteur) */
@media (max-width:620px){
  .opt__form{ grid-template-columns:1fr; }
  .opt__form > .opt__f, .opt__form > .opt__check{ grid-column:1 / -1; }
  .opt__recap{ flex-direction:column; text-align:center; align-items:center; }
}

/* ==========================================================================
   FORMULAIRE « S'INSCRIRE » (Nicolas 07/15) — popup 3 étapes (form-inscription.js).
   Réutilise .opt* (overlay, carte, champs, récap). Ici : fil d'étapes, pages, participants.
   ========================================================================== */
/* [hidden] doit toujours cacher, même sur .btn (inline-flex) et .opt__f (flex) de la popup */
#insModal [hidden]{ display:none !important; }

/* compteur « Étape X sur N » + barre de progression */
.ins-count{ font-size:var(--fs-label); font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--jaune-d); margin:0 0 8px; }
.ins-bar{ height:5px; border-radius:999px; background:var(--creme-2); overflow:hidden; margin:0 0 16px; }
.ins-bar > span{ display:block; height:100%; background:var(--jaune); border-radius:999px;
  transition:width .45s var(--ease); }

/* animation d'entrée de chaque étape (glissement + fondu) ; --ins-from = décalage initial signé */
@keyframes insSlide{ from{ opacity:0; transform:translateX(var(--ins-from,26px)); } to{ opacity:1; transform:none; } }
.ins-page.ins-anim{ animation:insSlide .34s var(--ease) both; }
@media (prefers-reduced-motion: reduce){ .ins-page.ins-anim{ animation:none; } .ins-bar > span{ transition:none; } }

/* fil des 3 étapes */
.ins-steps{ list-style:none; display:flex; gap:6px; margin:0 0 20px; padding:0; }
.ins-step{ flex:1 1 0; display:flex; align-items:center; gap:8px; font-size:var(--fs-label);
  color:var(--noir-50); padding-bottom:10px; border-bottom:2px solid var(--creme-2); }
.ins-step__num{ width:24px; height:24px; flex:0 0 auto; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-weight:700; background:var(--creme-2); color:var(--noir-50); font-size:13px; }
.ins-step__lbl{ font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ins-step.is-active{ color:var(--noir); border-bottom-color:var(--jaune); }
.ins-step.is-active .ins-step__num{ background:var(--jaune); color:var(--noir); }
.ins-step.is-done{ color:var(--vert); border-bottom-color:var(--vert); }
.ins-step.is-done .ins-step__num{ background:var(--vert); color:var(--blanc); }

/* pages du formulaire : chaque page reprend la grille 2 colonnes de .opt__form */
.ins-page{ display:grid; grid-template-columns:1fr 1fr; gap:12px 16px; align-items:start; }
.ins-page[hidden]{ display:none; }
.ins-page > .opt__sec, .ins-page > label.opt__f:has(textarea), .ins-page > label.opt__f:has(select),
.ins-page > .opt__check, .ins-page > .ins-parts-head, .ins-page > .ins-hint, .ins-page > .ins-parts,
.ins-page > .ins-summary, .ins-page > .ins-presta, .ins-page > .ins-resp-id{ grid-column:1 / -1; }
.ins-resp-id{ margin-top:0; }   /* champs passeport du responsable, pleine largeur, 3 colonnes */
.ins-page > .opt__row{ display:contents; }

.ins-hint{ font-size:var(--fs-small); color:var(--noir-50); margin:0; line-height:1.4; }

/* en-tête « Autres participants » + bouton ajouter */
.ins-parts-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.ins-parts-head .opt__sec{ margin:0; border:0; padding:0; }
.ins-add{ display:inline-flex; align-items:center; gap:6px; font:inherit; font-size:var(--fs-label);
  font-weight:700; color:var(--vert); background:transparent; border:1.5px solid var(--vert);
  border-radius:999px; padding:7px 14px; cursor:pointer; transition:background .2s, color .2s; }
.ins-add span{ font-size:16px; line-height:1; }
.ins-add:hover{ background:var(--vert); color:var(--blanc); }

/* un participant : carte blanche + bouton retirer */
.ins-parts{ display:flex; flex-direction:column; gap:12px; }
.ins-part{ background:var(--blanc); border:1.5px solid rgba(14,14,14,.12); border-radius:12px; padding:14px; }
.ins-part__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.ins-part__t{ font-size:var(--fs-label); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--noir); }
.ins-del{ width:28px; height:28px; flex:0 0 auto; border-radius:50%; border:0; background:var(--creme-2);
  color:var(--noir); font-size:20px; line-height:1; cursor:pointer; transition:background .2s, color .2s; }
.ins-del:hover{ background:#c0392b; color:var(--blanc); }
.ins-part .opt__row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.ins-part__grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; margin-top:12px; }

/* récap final (dl) */
.ins-recap{ display:grid; grid-template-columns:1fr 1fr; gap:10px 20px; margin:0; }
.ins-recap > div{ display:flex; flex-direction:column; gap:2px; padding:10px 0; border-bottom:1px solid var(--creme-2); }
.ins-recap dt{ font-size:var(--fs-label); font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--jaune-d); }
.ins-recap dd{ margin:0; font-size:var(--fs-small); color:var(--noir); }

/* barre de navigation Précédent / Suivant / Envoyer — STICKY en bas de la popup :
   toujours visible pendant qu'on scrolle le formulaire, posée par-dessus le contenu. */
.ins-nav{ position:sticky; bottom:0; z-index:2; display:flex; gap:12px;
  margin:18px -24px -24px; padding:16px 24px;
  background:var(--creme); border-top:1px solid var(--creme-2);
  box-shadow:0 -10px 24px -12px rgba(0,0,0,.18); }
.ins-nav .ins-next, .ins-nav .ins-send{ min-width:180px; }
/* Précédent grisé et non cliquable à la 1re étape */
.ins-nav .btn:disabled{ opacity:.4; cursor:not-allowed; pointer-events:none; }
/* TARIF dynamique à gauche de la barre (pousse les boutons à droite) */
.ins-total{ display:flex; flex-direction:column; justify-content:center; margin-right:auto; line-height:1.15; }
.ins-total[hidden]{ display:none; }
.ins-total__lbl{ font-size:var(--fs-label); color:var(--noir-50); }
.ins-total__val{ font-size:var(--fs-h3); font-weight:700; color:var(--noir); }

/* PACKS d'assurance (radio en cartes) : 4 sur UNE LIGNE (Nicolas 07/15) */
.ins-packs{ display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; }
.ins-pack{ display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; gap:4px 8px;
  align-items:start; padding:12px 12px; background:var(--blanc); border:1.5px solid rgba(14,14,14,.14);
  border-radius:12px; cursor:pointer; transition:border-color .2s, background .2s; }
.ins-pack:hover{ border-color:rgba(244,183,33,.5); }
.ins-pack:has(input:checked){ border-color:var(--jaune); background:#fffdf5; }
.ins-pack input{ grid-row:1 / span 2; margin-top:3px; width:17px; height:17px; accent-color:var(--jaune-d); }
.ins-pack__t{ font-size:var(--fs-label); font-weight:700; color:var(--noir); line-height:1.2; }
.ins-pack__d{ font-size:11px; color:var(--noir-50); line-height:1.3; }

/* SIGNATURE */
.ins-sign__pad{ display:block; width:100%; height:150px; background:var(--blanc); border:1.5px dashed rgba(14,14,14,.25);
  border-radius:12px; cursor:crosshair; touch-action:none; }
/* signature manquante (D166) : même rouge que le message d'erreur de la fenêtre */
.ins-sign__pad.is-erreur{ border-color:#c0392b; border-style:solid; }
.ins-sign__clear{ margin-top:8px; font:inherit; font-size:var(--fs-label); font-weight:700; color:var(--jaune-d);
  background:none; border:0; cursor:pointer; text-decoration:underline; }
.ins-sign__clear:hover{ color:var(--noir); }

@media (max-width:720px){ .ins-packs{ grid-template-columns:1fr 1fr; } }
@media (max-width:440px){ .ins-packs{ grid-template-columns:1fr; } }

@media (max-width:620px){
  .ins-page, .ins-recap{ grid-template-columns:1fr; }
  .ins-part__grid{ grid-template-columns:1fr; }
  .ins-step__lbl{ display:none; }
  .ins-nav{ flex-wrap:wrap; }
}

/* FORMULAIRE D'INSCRIPTION - étape « Assurances & paiement » (C3, 19/07) :
   formules EMPILÉES, prix aligné à droite, lien PDF du contrat par formule. */
.ins-aide{ display:block; margin-top:6px; font-style:normal; font-size:var(--fs-label);
  line-height:1.45; color:var(--noir-50); }
.ins-packs--liste{ display:flex; flex-direction:column; gap:10px; width:100%; grid-column:1 / -1; }
.ins-packs--liste .ins-pack{ display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:14px; padding:14px 18px; }
.ins-packs--liste .ins-pack{ grid-template-rows:auto; }
.ins-pack__txt{ display:block; min-width:0; }
.ins-pack__txt .ins-pack__t{ display:block; font-size:var(--fs-small); }
.ins-pack__txt .ins-pack__d{ display:block; margin-top:3px; font-size:var(--fs-label); }
.ins-pack__prix{ justify-self:end; text-align:right; font-size:var(--fs-small); font-weight:700;
  color:var(--noir); white-space:nowrap; }
.ins-pack__prix em{ display:block; font-style:normal; font-weight:400; font-size:var(--fs-label);
  color:var(--noir-50); }
.ins-pack__pdf{ grid-column:2 / -1; justify-self:start; display:inline-flex; align-items:center; gap:7px;
  margin-top:6px; font-size:var(--fs-label); font-weight:600; color:var(--noir);
  text-decoration:underline; text-underline-offset:3px; }
.ins-pack__pdf:hover{ color:var(--jaune-d); }
.ins-pack__pdf svg{ width:15px; height:15px; }
.ins-packs--liste .ins-pack--decline{ grid-template-columns:auto 1fr; }
@media (max-width:620px){
  .ins-packs--liste .ins-pack{ grid-template-columns:auto 1fr; }
  .ins-pack__prix{ grid-column:2; justify-self:start; text-align:left; }
}

/* EXTENSIONS dans le formulaire d'inscription (G2, 19/07) : cases à cocher, une par extension
   réellement rattachée au voyage. Bloc masqué si le voyage n'en a aucune. */
.ins-ext{ grid-column:1 / -1; }
.ins-ext[hidden]{ display:none; }
.ins-ext__ligne{ align-items:flex-start; padding:12px 14px; margin-top:8px;
  background:var(--teinte-sm); border-radius:10px; }
.ins-ext__ligne em{ display:block; margin-top:2px; font-style:normal;
  font-size:var(--fs-label); color:var(--noir-50); }

/* mobile.css §5 (l. 465-481) — la règle partage sa `@media` avec .feature, .py-culture… :
   seules les deux lignes des fenêtres sont reprises ici. */
@media (max-width:1024px){
  /* Popups « Poser une option » / « S'inscrire ». */
  .opt-overlay{ padding:clamp(16px,4dvh,48px); }
  /* LOT 11 (24/07), retour Nicolas : « on peut bouger le formulaire vers la gauche
     horizontalement » sur « S'inscrire » et « Poser une option », mais pas sur « Nous
     contacter ». `.opt` est le conteneur de défilement de la popup (overflow:auto,
     style.css l.2432) : il défile donc AUSSI en horizontal dès qu'un enfant dépasse.
     Trouvé à la mesure : la barre d'action collante du formulaire d'inscription
     (`.ins-nav`) sort volontairement de la colonne de texte par des marges négatives
     de 24px pour venir toucher les bords de la popup (`margin:18px -24px -24px`,
     style.css l.2572) - c'est un débord VOULU, mais sur un écran étroit il devient une
     course de défilement. « Nous contacter » n'a ni cette barre ni l'en-tête récap,
     d'où l'absence du défaut là-bas, exactement comme constaté.
     On garde le débord (il est juste, la barre doit toucher les bords) et on supprime la
     COURSE : le défilement de la popup redevient strictement vertical. Le débord est alors
     rogné pile aux bords de la popup, c'est-à-dire là où il s'arrêtait déjà - aucun pixel
     visible en moins. */
  .opt{ max-height:92dvh; overflow-x:hidden; }
}

/* mobile.css §10 (l. 826, 855-857) — survols neutralisés au doigt. */
@media (hover:none){
  .opt__x:hover{ transform:none; }
  .ins-add:hover{ background:transparent; color:var(--vert); }
  .ins-del:hover{ background:var(--creme-2); color:var(--noir); }
  .ins-pack:hover{ border-color:rgba(14,14,14,.14); }
}

/* ---- AJOUT PROPRE AU PORTAGE (aucun équivalent dans la maquette) ----
   Le champ PIÈGE anti-robots de la fenêtre : hors écran plutôt que `display:none`, que certains
   robots savent ignorer. Ni visible ni atteignable au clavier (tabindex="-1" dans la vue). */
.opt__piege{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }