/* Nautik Lavage — styles du module de formulaire natif (site/nautik-form.js).
   Scopés sous .nl-form pour être montables sans danger dans n'importe quelle page/section. */
.nl-form {
  --nlf-ink: #070b0f;
  --nlf-panel: #111a22;
  --nlf-panel-2: #18242e;
  --nlf-line: rgba(232, 241, 247, .14);
  --nlf-text: #edf3f7;
  --nlf-muted: #9aabba;
  --nlf-blue: #6289aa;
  --nlf-blue-light: #9fc0db;
  --nlf-ok: #7ac7b4;
  /* Échelle de rayons unique : petit (champs/contrôles), moyen (boutons),
     grand (cartes/panneaux), pilule (chips/badges). Ne pas ajouter de valeur hors échelle. */
  --nlf-r-sm: 12px;
  --nlf-r-md: 16px;
  --nlf-r-lg: 20px;
  --nlf-r-pill: 999px;
  /* Durées courtes façon iOS : le retour à l'état normal est doux, jamais retardé. */
  --nlf-ease: cubic-bezier(.32, .72, 0, 1);
  --nlf-fast: .16s;
  --nlf-med: .24s;
  /* Pression : quasi instantanée (voir :active plus bas). Relâchement : léger
     dépassement puis stabilisation — l'équivalent du rebond Apple en une seule
     transition CSS, sans keyframes séparées ni conflit de propriété. */
  --nlf-ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
  /* .38s : une courbe à dépassement a besoin de temps pour se lire (le petit
     "pop" à ~1.03 avant de se stabiliser à 1) — plus court, l'œil ne le voit pas.
     N'affecte que le relâchement : la pression reste à .08s linéaire (voir :active). */
  --nlf-press: .38s;
  /* Coin continu (squircle) : amélioration progressive, ignorée si non supportée —
     border-radius reste le rendu réel dans les navigateurs actuels. */
  --nlf-corner: superellipse(1.2);
  color: var(--nlf-text);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
  letter-spacing: -.011em;
  background: transparent;
}
.nl-form * { box-sizing: border-box; }
.nl-form a { color: inherit; text-decoration: none; }
/* Coins continus : liste unique plutôt que dupliquer la propriété sur chaque règle
   qui utilise déjà var(--nlf-r-*) — un seul endroit à maintenir. */
.nl-form .progress, .nl-form .hero,
.nl-form .field input, .nl-form .field textarea, .nl-form .field select,
.nl-form .boat, .nl-form .amount,
.nl-form .btn, .nl-form .calendar, .nl-form .cal-head button, .nl-form .day,
.nl-form .toggle, .nl-form .nlf-check, .nl-form .form-error,
.nl-form .recap, .nl-form .len-exact input, .nl-form .notice,
.nl-form .included, .nl-form details.fold, .nl-form .review-card {
  corner-shape: var(--nlf-corner);
}
.nl-form .progress { height: 5px; background: var(--nlf-line); border-radius: var(--nlf-r-pill); overflow: hidden; margin-bottom: 28px; }
.nl-form .progress span { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--nlf-blue), var(--nlf-blue-light)); transform: scaleX(.12); transform-origin: left; transition: transform .45s cubic-bezier(.4,0,.2,1); }
.nl-form .eyebrow { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--nlf-blue-light); font-weight: 700; margin: 0 0 6px; }
.nl-form .step, .nl-form .success { display: none; }
/* Avancer : glissement doux + fondu. Reculer (data-dir="back", posé par show() dans
   nautik-form.js) : fondu seul, plus court — la direction se distingue sans miroir
   gauche/droite qui pourrait dérouter (voir HIG Motion). */
.nl-form .step.active, .nl-form .success.active { display: block; animation: nlf-enter-forward var(--nlf-med) var(--nlf-ease) both; }
.nl-form .step.active[data-dir="back"] { animation-name: nlf-enter-back; animation-duration: var(--nlf-fast); }
@keyframes nlf-enter-forward { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes nlf-enter-back { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .nl-form .step.active, .nl-form .success.active, .nl-form .step.active[data-dir="back"] { animation: none; }
  /* Le rebond de relâchement (scale) disparaît ; les changements de couleur/bordure
     restent, ils ne dépendent pas du mouvement et gardent le retour visible. */
  .nl-form .btn, .nl-form .boat,
  .nl-form .day, .nl-form .cal-head button, .nl-form .nlf-check {
    transition-property: background-color, border-color, box-shadow, opacity;
    transform: none !important;
  }
  .nl-form .btn:active, .nl-form .boat:active,
  .nl-form .day:active:not(:disabled), .nl-form .cal-head button:active,
  .nl-form .nlf-check:active {
    transform: none;
  }
  /* Curseur-bateau : plus de grossissement ni de rebond, seule la position (utile)
     reste animée en douceur. */
  .nl-form .length-slider-thumb { transition-property: left; transform: translateY(-50%) !important; }
  .nl-form .length-slider input[type=range]:active ~ .length-slider-thumb { transform: translateY(-50%) !important; }
  /* Coche et prix : apparaissent/changent sans effet de scale, l'information reste
     immédiate (opacité seule pour la coche). */
  .nl-form .boat::after { transition-property: opacity; }
  .nl-form .boat.selected::after { transform: none; }
  .nl-form [data-el="price"] { animation: none !important; }
}
/* Anneau de focus clavier unique, cohérent avec le thème sombre — jamais l'anneau
   bleu par défaut du navigateur, jamais seulement une couleur pour distinguer l'état. */
.nl-form button:focus-visible,
.nl-form input[type="range"]:focus-visible,
.nl-form input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(159,192,219,.5);
}
/* Hiérarchie iOS : titre 28-32, sous-titre 17. Le sous-titre est atténué par sa
   couleur (--nlf-muted, 7,46:1) et non par une opacité : à 0,7 le contraste tombe
   à 4,31:1, sous le minimum de 4,5:1. */
.nl-form h1 { font: 800 clamp(28px, 7vw, 32px)/1.15 Montserrat, sans-serif; margin: 4px 0 10px; letter-spacing: -.03em; }
.nl-form .lede { color: var(--nlf-muted); font-size: 17px; line-height: 1.45; margin: 0 0 24px; max-width: 600px; }
/* Écran 1 — emplacement d'un visuel : vide et masqué tant qu'aucune vraie photo n'est
   fournie (les images de site/assets/ sont des photos de banque, pas du Nautik réel). */
.nl-form .hero { margin: 0 0 18px; border-radius: var(--nlf-r-lg); overflow: hidden; }
.nl-form .hero[hidden] { display: none; }
.nl-form .hero img { display: block; width: 100%; height: auto; }
/* Note Google sous le titre : même pilule que dans le carrousel, remontée là où la
   confiance se joue — avant le premier geste. */
.nl-form .start-rating { margin: -6px 0 24px; }
/* La question de l'écran 1 se lit comme une phrase, pas comme une étiquette de champ. */
.nl-form .ask { margin: 0 0 12px; font: 600 17px/1.3 Inter, system-ui, sans-serif; color: var(--nlf-text); }
.nl-form .field { margin: 22px 0; }
.nl-form .field label { display: block; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--nlf-muted); font-weight: 600; margin: 0 0 9px; }
.nl-form .field .opt { font-weight: 400; text-transform: none; letter-spacing: 0; }
.nl-form .field input, .nl-form .field textarea, .nl-form .field select { width: 100%; min-height: 52px; border: 1px solid var(--nlf-line); border-radius: var(--nlf-r-sm); padding: 15px 16px; background: #0b1218; color: var(--nlf-text); font: 17px/1.3 Inter, system-ui, sans-serif; transition: border-color var(--nlf-fast) ease, box-shadow var(--nlf-fast) ease; }
.nl-form .field input::placeholder, .nl-form .field textarea::placeholder { color: #6d8296; }
/* État de focus net, exigé par les règles d'accessibilité : jamais l'outline seul du navigateur. */
.nl-form .field input:focus, .nl-form .field textarea:focus { outline: none; border-color: var(--nlf-blue-light); box-shadow: 0 0 0 4px rgba(159,192,219,.22); }
.nl-form .length-field label { display: flex; align-items: center; justify-content: space-between; }
.nl-form .length-field output { color: var(--nlf-blue-light); font: 800 20px Montserrat, sans-serif; text-transform: none; }
/* Le rail reste visuellement fin (7 px) mais la zone attrapable fait 45 px de haut :
   `background-clip: content-box` cantonne le dégradé au contenu, le rembourrage
   vertical n'est donc pas visible mais reste cliquable. */
/* Slider longueur — l'<input type=range> natif reste l'unique élément interactif
   (clavier, glisser au doigt, lecteur d'écran : rien de tout ça n'est réinventé) mais
   devient invisible ; piste, remplissage et curseur-bateau sont des calques purement
   décoratifs (pointer-events: none) posés par-dessus, alignés sur la même géométrie
   via --nlf-range-pct/--nlf-thumb-scale (posées en JS sur .length-slider, voir
   nautik-form.js syncLength — pas sur l'input : une variable posée sur un élément
   n'atteint jamais ses frères, seulement ses descendants).
   Le point de bascule est corrigé par calc() pour tomber sous le CENTRE de la zone
   tactile de 44px, pas sous son bord gauche. */
.nl-form .length-slider { position: relative; height: 45px; display: flex; align-items: center; margin: 4px 0 2px; }
.nl-form .length-slider input[type=range] {
  position: absolute; inset: 0; width: 100%; margin: 0; z-index: 1;
  appearance: none; background: transparent; border: 0; cursor: pointer; touch-action: pan-y;
  opacity: 0; /* la géométrie (hauteur/rembourrage) reste identique aux calques décoratifs */
}
.nl-form .length-slider input[type=range]::-webkit-slider-thumb { appearance: none; width: 44px; height: 44px; background: transparent; border: 0; }
.nl-form .length-slider input[type=range]::-moz-range-thumb { width: 44px; height: 44px; background: transparent; border: 0; }
.nl-form .length-slider input[type=range]:focus-visible { outline: none; }
.nl-form .length-slider input[type=range]:focus-visible ~ .length-slider-thumb { box-shadow: 0 0 0 3px rgba(159,192,219,.5), 0 3px 10px rgba(0,0,0,.4); }

.nl-form .length-slider-track { position: absolute; left: 0; right: 0; top: 50%; height: 7px; transform: translateY(-50%); border-radius: var(--nlf-r-pill); background: rgba(232,241,247,.16); pointer-events: none; overflow: hidden; }
.nl-form .length-slider-fill { display: block; height: 100%; border-radius: var(--nlf-r-pill); background: linear-gradient(90deg, var(--nlf-blue), var(--nlf-blue-light)); width: calc(var(--nlf-range-pct, .5) * (100% - 44px) + 22px); transition: width .08s linear; }

/* Le vrai logo Nautik (transparent, sans cercle ni fond) remplace le rond plein —
   seul un filtre d'ombre porté aide sa lisibilité sur le dégradé de la piste. */
.nl-form .length-slider-thumb { position: absolute; top: 50%; left: calc(var(--nlf-range-pct, .5) * (100% - 44px)); width: 44px; height: 44px; display: grid; place-items: center; background: transparent; border: 0; box-shadow: none; pointer-events: none; will-change: transform; transform: translateY(-50%) scale(var(--nlf-thumb-scale, 1)); transition: transform var(--nlf-press) var(--nlf-ease-bounce), left .08s linear; }
.nl-form .length-slider-thumb img { width: 28px; height: 28px; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
/* Le logo grossit avec la longueur (voir --nlf-thumb-scale, posé en JS) et grandit
   encore un peu plus le temps de la prise en main. */
.nl-form .length-slider input[type=range]:active ~ .length-slider-thumb { transform: translateY(-50%) scale(calc(var(--nlf-thumb-scale, 1) * 1.12)); transition-duration: .08s; transition-timing-function: linear; }
.nl-form .field textarea { min-height: 100px; resize: vertical; }
/* Une seule colonne à toutes les largeurs : entre 431 et 619 px l'ancienne grille à
   deux colonnes comprimait téléphone et courriel dans la zone mobile. */
.nl-form .pair { display: grid; grid-template-columns: 1fr; gap: 14px; }
.nl-form .hint { font-size: 13px; color: var(--nlf-muted); margin: 7px 0 0; }
/* Légèrement plus serré qu'un .hint isolé : celui-ci suit directement un champ (et son
   erreur ou sa suggestion), l'ordre de lecture est input → err → suggest → hint. */
.nl-form .field .hint { margin-top: 6px; }
/* Ressemble à un lien, pas à un bouton : c'est une correction suggérée, pas une action
   à part entière. Padding vertical seul (pas de fond) pour une zone tactile ≥ 32px sans
   élargir le texte visuellement. */
.nl-form .suggest { display: block; background: transparent; border: 0; color: var(--nlf-blue-light); font: inherit; font-size: 14px; text-decoration: underline; padding: 8px 0; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.nl-form .suggest[hidden] { display: none; }
.nl-form .boat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
/* min-height fixe (pas un simple étirement de grille) : garantit que les 4 cartes font
   la même hauteur, icône + libellé compris — « Autre » n'est plus un style à part,
   elle porte juste une ligne secondaire en plus (centrage vertical absorbe l'écart). */
.nl-form .boat { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; border: 1px solid var(--nlf-line); background: var(--nlf-panel); border-radius: var(--nlf-r-md); color: var(--nlf-text); min-height: 100px; width: 100%; height: 100%; padding: 15px 10px; font: 600 15px Inter, system-ui, sans-serif; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: transform var(--nlf-press) var(--nlf-ease-bounce), background var(--nlf-fast) ease, border-color var(--nlf-fast) ease, opacity var(--nlf-fast) ease; }
.nl-form .boat-icon { width: 26px; height: 26px; color: var(--nlf-blue-light); }
.nl-form .boat-icon svg { display: block; width: 100%; height: 100%; }
.nl-form .boat-sub { font-size: 11px; font-weight: 400; color: var(--nlf-muted); }
/* Halo léger — 4e signal d'état, en plus de la bordure/fond/coche déjà en place. */
@media (hover: hover) {
  .nl-form .boat:hover { box-shadow: 0 0 0 3px rgba(159,192,219,.22); }
}
.nl-form .boat:active { transform: scale(.97); opacity: .96; transition-duration: .08s; transition-timing-function: linear; }
/* Sélection signalée par 4 canaux, pas seulement la couleur : bordure, fond teinté, halo, coche. */
.nl-form .boat.selected { border-color: var(--nlf-blue-light); background: #1d3749; color: var(--nlf-blue-light); box-shadow: 0 0 0 3px rgba(159,192,219,.35); }
.nl-form .boat.selected .boat-icon { color: var(--nlf-text); }
/* La coche existe toujours dans le DOM (content posé ici, pas sur .selected) pour
   pouvoir animer son apparition par transition plutôt que par un pop-in instantané. */
.nl-form .boat::after { content: "✓"; position: absolute; top: 6px; right: 8px; width: 16px; height: 16px; border-radius: 50%; background: var(--nlf-blue-light); color: #0a1218; font-size: 10px; font-weight: 800; line-height: 16px; text-align: center; opacity: 0; transform: scale(0); transition: transform var(--nlf-press) var(--nlf-ease-bounce), opacity var(--nlf-fast) ease; pointer-events: none; }
.nl-form .boat.selected::after { opacity: 1; transform: scale(1); }
.nl-form .amount { margin: 24px 0; border: 1px solid rgba(159,192,219,.4); background: linear-gradient(145deg, rgba(24,51,74,.6), rgba(16,27,37,.6)); padding: 30px 22px; border-radius: var(--nlf-r-lg); text-align: center; }
.nl-form .amount small { display: block; text-transform: uppercase; letter-spacing: .12em; color: var(--nlf-blue-light); font-size: 12px; font-weight: 700; }
.nl-form .amount b { display: block; font: 800 clamp(48px, 13vw, 56px)/1 Montserrat, sans-serif; letter-spacing: -.05em; margin: 12px 0 8px; }
/* Le prix se pose plutôt que d'apparaître à plat : léger retrait depuis 1.05,
   posé par nautik-form.js à chaque calcul (classe .pop, retirée aussitôt après). */
.nl-form [data-el="price"].pop { animation: nlf-price-pop .2s var(--nlf-ease-bounce) both; }
@keyframes nlf-price-pop { from { transform: scale(1.05); } to { transform: scale(1); } }
.nl-form .amount p { font-size: 15px; }
.nl-form .amount p { color: var(--nlf-muted); font-size: 13px; margin: 0; }
.nl-form .amount .estimate-disclaimer { margin-top: 12px; color: var(--nlf-blue-light); font-size: 11px; font-weight: 700; }
.nl-form .summary { margin: 18px 0; padding: 16px; border: 1px solid var(--nlf-line); background: rgba(17,26,34,.6); border-radius: 14px; color: var(--nlf-muted); font-size: 14px; }
.nl-form .summary strong { color: var(--nlf-text); }
/* Boutons iOS : 52 px de haut, coins moyens, semibold 17. */
.nl-form .btn { border: 0; border-radius: var(--nlf-r-md); width: 100%; min-height: 52px; padding: 15px 20px; background: var(--nlf-blue); color: #fff; font: 600 17px/1.2 Inter, system-ui, sans-serif; letter-spacing: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: transform var(--nlf-press) var(--nlf-ease-bounce), background var(--nlf-fast) ease, opacity var(--nlf-fast) ease; }
/* Bouton principal seulement (pas .secondary) : c'est lui qui porte l'action, il
   mérite l'indice de composition, l'ombre posée au repos et son resserrement au clic. */
.nl-form .btn:not(.secondary) { will-change: transform; box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 8px 20px rgba(0,0,0,.15); }
.nl-form .btn:not(.secondary):active { box-shadow: 0 1px 1px rgba(0,0,0,.2), 0 2px 6px rgba(0,0,0,.15); }
@media (hover: hover) {
  .nl-form .btn:hover { background: var(--nlf-blue-light); color: #0a1218; }
  .nl-form .btn.secondary:hover { border-color: var(--nlf-blue-light); background: rgba(98,137,170,.12); }
}
.nl-form .btn:active { transform: scale(.98); opacity: .96; transition-duration: .08s; transition-timing-function: linear; }
.nl-form .btn.secondary { margin-top: 10px; background: transparent; border: 1px solid var(--nlf-line); color: var(--nlf-text); font-weight: 500; }
.nl-form .btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.nl-form .calendar { border: 1px solid var(--nlf-line); border-radius: var(--nlf-r-lg); padding: 16px; background: rgba(17,26,34,.5); }
.nl-form .cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
/* 44x44 minimum : cible tactile confortable au pouce (Apple HIG — Accessibility). */
.nl-form .cal-head button { width: 44px; height: 44px; border-radius: var(--nlf-r-sm); border: 1px solid var(--nlf-line); background: var(--nlf-panel-2); color: var(--nlf-text); cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; font-size: 18px; line-height: 1; transition: transform var(--nlf-press) var(--nlf-ease-bounce), border-color var(--nlf-fast) ease, opacity var(--nlf-fast) ease; }
.nl-form .cal-head button:active { transform: scale(.93); opacity: .96; transition-duration: .08s; transition-timing-function: linear; }
.nl-form .cal-head strong { font-family: Montserrat, sans-serif; }
.nl-form .dow, .nl-form .days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.nl-form .dow span { text-align: center; color: var(--nlf-muted); font-size: 11px; font-weight: 700; }
.nl-form .day { aspect-ratio: 1; border: 1px solid transparent; border-radius: var(--nlf-r-sm); background: var(--nlf-panel-2); color: var(--nlf-text); font: 600 13px Inter, sans-serif; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: transform var(--nlf-press) var(--nlf-ease-bounce), border-color var(--nlf-fast) ease, opacity var(--nlf-fast) ease; }
.nl-form .day:active:not(:disabled) { transform: scale(.92); opacity: .96; transition-duration: .08s; transition-timing-function: linear; }
@media (hover: hover) {
  .nl-form .cal-head button:hover { border-color: var(--nlf-blue-light); }
  .nl-form .day:hover:not(:disabled) { border-color: var(--nlf-blue-light); }
}
.nl-form .day.selected { background: var(--nlf-blue); border-color: #fff; border-width: 2px; color: #fff; font-weight: 800; box-shadow: 0 0 0 2px var(--nlf-blue-light); }
/* Les jours indisponibles étaient à 20 % d'opacité : illisibles en plein soleil sur
   mobile. Le trait diagonal donne un second repère, non chromatique. */
.nl-form .day:disabled { opacity: .38; cursor: not-allowed; background: transparent; border-color: var(--nlf-line); text-decoration: line-through; }
.nl-form .day.empty { opacity: 0; pointer-events: none; }
.nl-form .toggles { display: grid; gap: 10px; margin: 18px 0; }
.nl-form .toggle { border: 1px solid var(--nlf-line); border-radius: var(--nlf-r-md); padding: 13px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.nl-form .toggle small { display: block; color: var(--nlf-muted); font-size: 12px; }
/* Condition opérationnelle obligatoire : mise en avant par un fond teinté et une
   bordure épaisse — c'est la seule case qui bloque l'envoi. */
.nl-form .nlf-check { display: flex; align-items: center; gap: 14px; border: 2px solid rgba(159,192,219,.35); border-radius: var(--nlf-r-md); padding: 18px 18px; cursor: pointer; background: rgba(36,80,110,.22); -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: border-color var(--nlf-fast) ease, background var(--nlf-fast) ease, transform var(--nlf-press) var(--nlf-ease-bounce), opacity var(--nlf-fast) ease; }
.nl-form .nlf-check:active { transform: scale(.99); opacity: .96; transition-duration: .08s; transition-timing-function: linear; }
.nl-form .nlf-check input { width: 26px; height: 26px; accent-color: var(--nlf-blue-light); flex: none; cursor: pointer; }
.nl-form .nlf-check strong { display: block; font-size: 15px; line-height: 1.35; }
/* Le fond teinté de la case a éclairci l'arrière-plan : le gris habituel n'y passait
   plus (3,64:1). Teinte plus claire pour rester au-dessus de 4,5:1. */
.nl-form .nlf-check small { display: block; color: #c5d4e0; font-size: 13px; margin-top: 4px; }
.nl-form .nlf-check:has(input:checked) { border-color: var(--nlf-ok); background: rgba(122,199,180,.14); }
.nl-form .calendar { max-width: 380px; margin: 0 auto; }
.nl-form .day { font-size: 13px; }
.nl-form .success { text-align: center; padding: 40px 12px; }
.nl-form .success.active { display: block; }
.nl-form .success .check { width: 58px; height: 58px; border: 2px solid var(--nlf-ok); border-radius: 50%; display: grid; place-items: center; margin: 0 auto 20px; color: var(--nlf-ok); font-size: 30px; }
.nl-form .success p { color: var(--nlf-muted); }

/* Écran 1 sur grand écran : les quatre types de bateau sur une seule rangée. */
@media (min-width: 620px) {
  .nl-form .boat-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ————— Ajouts tunnel de conversion (2026-09-04) ————— */

/* Erreurs de validation : remplacent les anciennes alert(). Le message vit sous son
   champ et le champ fautif se signale aussi par sa bordure. */
.nl-form .err { color: #ff9d9d; font-size: 13px; margin: 6px 0 0; min-height: 0; }
.nl-form .err:empty { display: none; }
.nl-form [aria-invalid="true"] { border-color: #ff9d9d !important; }
.nl-form .form-error { color: #ff9d9d; font-size: 14px; margin: 14px 0 0; padding: 12px 14px; border: 1px solid rgba(255,157,157,.4); border-radius: var(--nlf-r-sm); background: rgba(255,157,157,.08); }

/* Récapitulatifs : étape date (lignes modifiables) et écran de succès (lecture seule). */
.nl-form .recap { margin: 18px 0; border: 1px solid var(--nlf-line); border-radius: var(--nlf-r-lg); background: rgba(17,26,34,.6); overflow: hidden; text-align: left; }
.nl-form .recap:empty { display: none; }
.nl-form .recap-row { display: flex; align-items: baseline; gap: 10px; padding: 11px 15px; border-bottom: 1px solid var(--nlf-line); }
.nl-form .recap-row:last-child { border-bottom: 0; }
.nl-form .recap-label { color: var(--nlf-muted); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; flex: none; min-width: 96px; }
.nl-form .recap-row strong { color: var(--nlf-text); font-size: 14px; flex: 1; word-break: break-word; }
.nl-form .recap-edit { flex: none; border: 0; background: transparent; color: var(--nlf-blue-light); font: 700 13px Inter, sans-serif; text-decoration: underline; cursor: pointer; padding: 12px 8px; min-height: 44px; margin: -10px 0; transition: opacity var(--nlf-fast) ease; }
.nl-form .recap-edit:active { opacity: .6; }

/* Légende du calendrier : les trois états doivent se lire sans deviner. */
.nl-form .cal-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; list-style: none; padding: 0; margin: 14px 0 0; font-size: 12px; color: var(--nlf-muted); }
.nl-form .cal-legend li { display: flex; align-items: center; gap: 6px; }
.nl-form .cal-legend i { width: 14px; height: 14px; border-radius: 4px; display: block; }
.nl-form .cal-legend .sw-free { background: var(--nlf-panel-2); border: 1px solid var(--nlf-line); }
.nl-form .cal-legend .sw-off { background: transparent; border: 1px solid var(--nlf-line); opacity: .38; }
.nl-form .cal-legend .sw-sel { background: var(--nlf-blue); border: 2px solid #fff; }

/* Saisie exacte de la longueur, en plus du curseur : sur mobile, viser 37 pi au
   glissement est pénible. Le curseur reste la valeur envoyée au serveur. */
.nl-form .len-exact { display: inline-flex; align-items: center; gap: 5px; text-transform: none; letter-spacing: 0; color: var(--nlf-blue-light); font: 800 18px Montserrat, sans-serif; }
.nl-form .len-exact input { width: 72px; height: 44px; padding: 6px 10px; text-align: right; border: 1px solid var(--nlf-line); border-radius: var(--nlf-r-sm); background: #0b1218; color: var(--nlf-blue-light); font: 800 18px Montserrat, sans-serif; transition: border-color var(--nlf-fast) ease; }
.nl-form .len-exact input::-webkit-outer-spin-button, .nl-form .len-exact input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.nl-form .len-exact input[type=number] { -moz-appearance: textfield; }

/* Condition opérationnelle annoncée avant le calendrier, plus seulement à la fin. */
.nl-form .notice { margin: 0 0 18px; padding: 12px 14px; border: 1px solid var(--nlf-line); border-left: 3px solid var(--nlf-blue-light); border-radius: var(--nlf-r-sm); background: rgba(17,26,34,.6); color: var(--nlf-muted); font-size: 13px; }

.nl-form .breakdown { color: var(--nlf-blue-light); font-size: 14px; margin: 6px 0 0; font-weight: 700; }
.nl-form .breakdown:empty { display: none; }
.nl-form .reassure { text-align: center; margin-top: 16px; }

/* Avis clients : carrousel (voir initReviewsCarousel dans nautik-form.js). La piste est un
   défilement horizontal natif (glisser au doigt ou à la souris) qui avance seul de droite à
   gauche ; le JS s'arrête au toucher, au survol, au focus, hors écran, avec le bouton pause,
   et ne démarre pas du tout si l'appareil demande moins d'animations. Aucune librairie. */
.nl-form .reviews { margin: 28px 0 0; }
/* Seul le bouton pause y reste (la note Google est remontée sous le titre de l'écran 1). */
.nl-form .reviews-head { display: flex; align-items: center; justify-content: flex-end; margin: 0 0 8px; }
.nl-form .reviews-summary { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 2px 8px; min-height: 44px; padding: 6px 16px; border: 1px solid var(--nlf-line); border-radius: var(--nlf-r-pill); background: rgba(17,26,34,.6); color: var(--nlf-text); font-size: 14px; line-height: 1.3; }
.nl-form .reviews-summary svg { width: 18px; height: 18px; flex: none; }
.nl-form .reviews-summary .review-stars { margin: 0; }
.nl-form .reviews-summary strong { font-weight: 700; }
.nl-form .reviews-toggle { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--nlf-line); border-radius: 50%; background: rgba(17,26,34,.6); color: var(--nlf-muted); cursor: pointer; }
.nl-form .reviews-toggle[hidden] { display: none; }
.nl-form .reviews-carousel { position: relative; }
.nl-form .reviews-track {
  position: relative; /* bloc de référence des .sr-only : sans lui ils débordent de la piste et allongent la page */
  display: flex; gap: 12px; padding: 2px 0;
  overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  contain: layout paint;
  transform: translateZ(0);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}
.nl-form .reviews-track::-webkit-scrollbar { display: none; }
.nl-form .reviews-track:focus-visible { outline: 2px solid var(--nlf-blue-light); outline-offset: 2px; border-radius: var(--nlf-r-lg); }
.nl-form .reviews-track.is-dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.nl-form .review-card { flex: 0 0 min(82%, 300px); display: flex; flex-direction: column; justify-content: space-between; border: 1px solid var(--nlf-line); border-radius: var(--nlf-r-lg); background: rgba(17,26,34,.6); padding: 20px 20px 8px; }
.nl-form .review-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.nl-form .review-stars { color: #fbbf24; font-size: 14px; letter-spacing: 2px; }
.nl-form .review-head .review-stars { margin: 0; }
.nl-form .review-platform svg { display: block; width: 18px; height: 18px; }
.nl-form .review-card p { font-size: 14px; line-height: 1.4; color: var(--nlf-text); margin: 0 0 14px; }
.nl-form .review-author { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--nlf-muted); }
.nl-form .review-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--nlf-panel-2); color: var(--nlf-blue-light); display: grid; place-items: center; font: 700 11px Montserrat, sans-serif; flex: none; }
.nl-form .review-who { display: flex; flex-direction: column; line-height: 1.25; }
.nl-form .review-who strong { color: var(--nlf-text); font-size: 13px; font-weight: 600; }
.nl-form .review-link { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; color: var(--nlf-blue-light); font-size: 13px; font-weight: 600; }
.nl-form .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (hover: hover) {
  .nl-form .reviews-summary:hover, .nl-form .reviews-toggle:hover { border-color: var(--nlf-blue); }
  .nl-form .review-link:hover { text-decoration: underline; }
}

/* « Ce qui est inclus » — reprend mot pour mot le forfait décrit sur nautiklavage.ca.
   Aucune prestation n'est inventée ici. */
.nl-form .included { margin: 22px 0; padding: 20px; border: 1px solid var(--nlf-line); border-radius: var(--nlf-r-lg); background: rgba(17,26,34,.5); }
.nl-form .included h2 { margin: 0 0 14px; font: 700 15px Montserrat, sans-serif; color: var(--nlf-text); letter-spacing: 0; }
.nl-form .included ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.nl-form .included li { display: flex; align-items: flex-start; gap: 10px; color: var(--nlf-text); font-size: 15px; line-height: 1.35; }
.nl-form .included li::before { content: "✓"; flex: none; width: 21px; height: 21px; border-radius: 50%; background: rgba(122,199,180,.16); color: var(--nlf-ok); font-size: 12px; font-weight: 800; display: grid; place-items: center; margin-top: 1px; }

/* Sections repliables (détails utiles, résumé) — allègent l'écran sans rien retirer. */
.nl-form details.fold { margin: 22px 0; border: 1px solid var(--nlf-line); border-radius: var(--nlf-r-lg); background: rgba(17,26,34,.45); overflow: hidden; }
.nl-form details.fold > summary { list-style: none; cursor: pointer; padding: 15px 16px; min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--nlf-text); font-size: 15px; font-weight: 600; }
.nl-form details.fold > summary::-webkit-details-marker { display: none; }
.nl-form details.fold > summary::after { content: "＋"; color: var(--nlf-blue-light); font-size: 17px; font-weight: 700; flex: none; }
.nl-form details.fold[open] > summary::after { content: "－"; }
.nl-form details.fold .fold-body { padding: 0 16px 16px; }
.nl-form details.fold .field { margin: 0; }
.nl-form details.fold .hint { margin-top: 9px; }

/* Cibles tactiles du calendrier : 7 colonnes doivent tenir dans la largeur d'un
   téléphone. On récupère les pixels sur le rembourrage et les gouttières pour que
   chaque jour atteigne 44 px de haut, le facteur qui compte pour le pouce. */
@media (max-width: 619px) {
  .nl-form .calendar { padding: 10px; max-width: none; }
  .nl-form .dow, .nl-form .days { gap: 3px; }
  .nl-form .day { aspect-ratio: auto; min-height: 44px; }
}

/* Le CTA principal reste dans le pouce sur mobile. `sticky` et non `fixed` : il reste
   dans le flux, donc il ne peut pas recouvrir la navigation de la page d'accueil. */
@media (max-width: 619px) {
  /* Zone sûre iOS : le CTA collant ne doit pas passer sous l'indicateur d'accueil. */
  .nl-form .btn.sticky-cta { position: sticky; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 2; box-shadow: 0 8px 24px rgba(7,11,15,.9); }
  /* Un bouton collant ne doit jamais laisser voir le calendrier au travers : l'opacité
     de l'état désactivé est remplacée par une couleur atténuée mais opaque. */
  .nl-form .btn.sticky-cta:disabled { opacity: 1; background: #2b3d4d; color: #8ea4b6; }
}