/* ===================================================================
   FORM-EDITORIAL — direction « île premium éditoriale » (index.html)
   Surcharge de style.css (chargée APRÈS → gagne à spécificité égale).
   Se retire en supprimant le <link> : le formulaire revient à l'état SaaS.
   =================================================================== */

:root {
  --font-display: 'Oswald', 'Arial Narrow', system-ui, sans-serif;
  --font-body: 'Figtree', system-ui, sans-serif;
  --e-paper: #f2f2ec; --e-paper-hi: #f7f7f1; --e-panel: #ecebe1;
  --e-ink: #172530; --e-muted: #5f6b70; --e-faint: #8a938f;
  --e-sea: #1C5FAD; --e-sea-deep: #123a5e; --e-sun: #E87B1A; --e-sun-2: #f2a65a;
  --e-hair: #dcdbcf; --e-hair-2: #e7e6dc;
}

/* ── Anti-débordement horizontal (fini le scroll gauche-droite) ──
   clip sur html uniquement : body ne devient pas un conteneur de défilement
   (sinon la fenêtre ne défile plus et le masquage du header casse).
   PARITÉ iOS : `clip` n'existe que depuis Safari 16. Sans repli, les iPhone
   plus anciens retrouvaient le défilement latéral alors qu'Android non.
   `hidden` d'abord (compris partout), `clip` ensuite pour les navigateurs
   récents — les anciens ignorent la 2e ligne. */
html { overflow-x: hidden; overflow-x: clip; }
body { max-width: 100%; }

/* ── Parité iOS / Android ──
   1. iOS grossit le texte tout seul en paysage : on le neutralise.
   2. Safari iOS zoome sur tout champ de saisie sous 16 px, puis laisse la page
      décalée. Android ne le fait pas. On force donc 16 px minimum. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (max-width: 900px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  select, textarea { font-size: 16px; }
}

/* ── Fond papier ── */
body {
  background:
    radial-gradient(78% 55% at 92% -6%, rgba(232,123,26,.10), transparent 55%),
    radial-gradient(70% 55% at 3% 104%, rgba(28,95,173,.06), transparent 60%),
    var(--e-paper);
  color: var(--e-ink);
  font-family: var(--font-body);
}

/* ── Masthead clair (fini la barre bleue) ── */
.site-header { background: var(--e-paper); box-shadow: none; border-bottom: 1px solid var(--e-hair); overflow: visible; }
.site-header::before { display: none; }
.site-header::after { height: 2px; background: linear-gradient(90deg, var(--e-sun), var(--e-sun-2) 55%, transparent); }
.brand-name { color: var(--e-ink); font-family: var(--font-display); font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 1.6rem; }
.brand-tagline { color: var(--e-muted); }
.header-titles { border-left: 1px solid var(--e-hair); }
.header-controls .btn-outline { color: var(--e-ink); border-color: var(--e-hair); background: var(--e-paper-hi); }
.header-controls .btn-outline:hover { background: #fff; border-color: var(--e-sun); }

/* ── Hero éditorial ── */
.page-head { position: relative; margin: clamp(36px,6vw,80px) 0 clamp(30px,4vw,52px); padding-right: min(30vw,300px); }
.eyebrow { color: var(--e-sun); font-family: var(--font-display); font-weight: 600; letter-spacing: .22em; }
.eyebrow::before { background: var(--e-sun); }
.page-title {
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  font-size: clamp(2.3rem,4.8vw,3.7rem); line-height: .98; letter-spacing: .005em;
  color: var(--e-ink); text-wrap: balance;
}
.page-title em { font-style: normal; font-weight: 600; }
/* Dégradé noir -> bleu Saint-Barth, découpé sur le texte du titre */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .page-title {
    background: linear-gradient(162deg, #0b0e12 0%, #182636 38%, #1C5FAD 82%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
  }
}
.page-subtitle { color: var(--e-muted); max-width: 46ch; font-size: 1.05rem; }
.page-head > *:not(.hero-scape) { position: relative; z-index: 1; }

/* motif île : silhouette de Saint-Barthélemy (contour épais, tracé OSM) */
.hero-scape { position: absolute; top: 0; right: 0; bottom: 0; width: min(27vw,285px); display: flex; align-items: center; pointer-events: none; z-index: 0; }
.hero-scape svg { display: block; width: 100%; height: auto; animation: e-road 1.1s ease .15s both; }
@keyframes e-road { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero-scape svg { animation: none; } }

/* Lumière qui court le long de la côte (comme un train sur le contour) */
.coast-spark {
  stroke-dasharray: 220 780;
  stroke-dashoffset: 0;
  animation: coast-run 3s linear infinite;
  animation-delay: 1.1s;
  filter: drop-shadow(0 0 4px rgba(246,178,94,.95)) drop-shadow(0 0 11px rgba(232,123,26,.55));
}
@keyframes coast-run { to { stroke-dashoffset: -1000; } }

/* ── Réassurance : rangée filée (fini les pills en verre) ── */
.trust-strip { gap: 0 clamp(18px,2.6vw,36px); margin-top: clamp(30px,4vw,52px); padding-top: 22px; border-top: 1px solid var(--e-hair); }
.trust-item { background: none; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 6px 0; color: var(--e-ink); font-weight: 500; font-size: .84rem; }
.trust-ic { width: 24px; height: 24px; background: none; color: var(--e-sun); }
.trust-ic--o { background: none; color: var(--e-sun); }

/* ── Cartes : bloc éditorial (fini l'ombre lourde + la pastille icône) ── */
.form-card { background: var(--e-paper-hi); border: 1px solid var(--e-hair); border-radius: 14px; box-shadow: none; animation: none; }
.form-card:hover { box-shadow: none; }
.form-card:focus-within { border-color: var(--e-hair-2); box-shadow: none; }
.card-header { background: none; border-bottom: 1px solid var(--e-hair); padding: 22px 26px 16px; }
.sec-icon { display: none; }
.form-card:hover .sec-icon, .form-card:focus-within .sec-icon { transform: none; box-shadow: none; }
.card-header h2 { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; font-size: 1.4rem; color: var(--e-ink); letter-spacing: .02em; }
.card-body { padding: 28px 26px; }

/* ── Sous-sections (Contact, Permis, Facturation entreprise) ── */
.form-subsection { background: none; border-left: 0; border-top: 1px solid var(--e-hair); margin: 18px -26px 4px; padding: 18px 26px 2px; }
.form-subsection h3 { font-family: var(--font-body); color: var(--e-muted); font-size: .74rem; letter-spacing: .16em; }

/* ── Champs : soulignés éditoriaux ── */
.form-group label { color: var(--e-muted); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: .72rem; }
.form-group label .req { color: var(--e-sun); }
.form-group input, .form-group select {
  background-color: transparent; border: 0; border-bottom: 1.5px solid var(--e-hair);
  border-radius: 0; padding: 9px 2px 11px; color: var(--e-ink);
}
.form-group input:hover:not(:focus), .form-group select:hover:not(:focus) { background-color: transparent; border-bottom-color: var(--e-sea); }
.form-group input:focus, .form-group select:focus { background-color: transparent; border-bottom-color: var(--e-sun); box-shadow: none; }
.form-group input::placeholder { color: var(--e-faint); }
.form-group select { background-position: right 2px center; padding-right: 26px; }
/* Le bloc code tarifaire ouvre la page : discret en mode libre, il ne doit
   pas donner l'impression qu'un code est indispensable. */
.promo-card .card-body { padding-top: 18px; padding-bottom: 18px; }
.promo-card .promo-field { margin-bottom: 0; }
.promo-help {
  display: block; margin-top: 10px;
  color: var(--e-muted); font-size: .8rem; line-height: 1.5;
}
/* Adresse de contact : reconnaissable comme un lien sans casser la ligne. */
.promo-help a, .bm-banner a {
  color: var(--e-sea, #1C5FAD);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
  white-space: nowrap;
}
.promo-help a:hover, .bm-banner a:hover { color: var(--e-sun); }

/* ── Mode negocie : le code tarifaire decide de tout ────────────────── */
.bm-banner {
  background: var(--e-panel, #f0efe6);
  border-left: 3px solid var(--e-sun);
  border-radius: 4px;
  padding: 13px 16px;
  margin: 0 0 20px;
  font-size: .86rem;
  line-height: 1.55;
  color: var(--e-ink);
}
.bm-banner.bm-ok {
  border-left-color: #0a7d33;
  background: #f0f7f1;
  color: #17492a;
}
/* Un champ fige par le code : lisible, mais visiblement hors d'atteinte. */
.mode-negocie .is-locked,
.mode-negocie .is-locked:hover {
  opacity: .72;
  cursor: not-allowed;
  border-bottom-style: dashed;
  border-bottom-color: var(--e-hair);
}
.mode-negocie .period-trigger.is-locked svg { opacity: .5; }

/* L'icone calendrier est passee a gauche (le bord droit appartient aux
   gestionnaires de mots de passe). right:auto est indispensable : left ET
   right ensemble etireraient le repere sur toute la largeur du champ. */
.date-field .date-display { padding-left: 26px; padding-right: 2px; }
.date-cal-ic { left: 2px; right: auto; color: var(--e-muted); }
.form-group input[type="file"] { border-bottom: 1.5px solid var(--e-hair); padding: 9px 2px; }
.form-group input[type="file"]::file-selector-button { background: none; color: var(--e-sun); border: 1px solid var(--e-sun); border-radius: 999px; padding: 7px 16px; font-weight: 600; }
.address-manual-fields { background: var(--e-panel); border-color: var(--e-hair); }
.promo-row #promoCode { border-bottom: 1.5px solid var(--e-hair); }

/* ── Choix paiement / lieu de remise ── */
.radio-item, .dropoff-option { background: var(--e-paper-hi); border: 1px solid var(--e-hair); border-radius: 10px; }
.radio-item:hover, .dropoff-option:hover { box-shadow: none; border-color: var(--e-sea); }
.radio-item:has(input:checked), .dropoff-option:has(input:checked) { border-color: var(--e-sun); background: #fbf4ea; box-shadow: none; }

/* ── Boîte de prix : bloc « mer profonde » ── */
.pricing-box { background: linear-gradient(150deg, #16324e, #0e2436); box-shadow: none; border: 1px solid rgba(255,255,255,.06); }
.pricing-box h3 { color: rgba(255,255,255,.62); }
.pricing-row.total span:last-child { font-family: var(--font-display); font-weight: 600; }

/* ── Boutons ── */
.generate-wrap .btn-primary { background: var(--e-sun); border: 0; border-radius: 999px; box-shadow: none; font-family: var(--font-body); font-weight: 700; }
.generate-wrap .btn-primary:hover { background: #d4650f; box-shadow: none; transform: translateY(-1px); }
.card-header .btn-outline { color: var(--e-sea); background: var(--e-paper); border-color: var(--e-hair); }

/* ── 2ᵉ conducteur : bouton d'ajout pleine largeur, sobre ── */
.driver2-add-wrap { padding-top: 22px; padding-bottom: 22px; }
.driver2-toggle {
  width: 100%; justify-content: center; gap: 8px;
  color: var(--e-sea); background: var(--e-paper-hi);
  border: 1.5px dashed var(--e-hair); border-radius: 12px;
  padding: 15px 18px; font-weight: 600; font-size: 1rem; box-shadow: none;
}
.driver2-toggle:hover { border-color: var(--e-sea); background: #fff; box-shadow: none; transform: none; }

/* ── Cases à cocher ── */
.cert-check-wrap { background: var(--e-paper-hi); border: 1px solid var(--e-hair); }
.cgl-link { color: var(--e-sun); }

/* ── Footer ── */
.footer-name { font-family: var(--font-display); font-weight: 600; text-transform: none; letter-spacing: 0; }

/* ── Divers ── */
.divider { background: var(--e-hair); }
.field-hint { color: var(--e-faint); }

/* ── Avertissement avant ouverture du contrat ── */
.scroll-notice-ov {
  position: fixed; inset: 0; z-index: 3000;
  background: rgba(12,25,38,.62); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  animation: sn-fade .22s ease both;
}
@keyframes sn-fade { from { opacity: 0; } to { opacity: 1; } }
.scroll-notice {
  background: var(--e-paper-hi); border: 1px solid var(--e-hair); border-radius: 18px;
  padding: 30px 28px 26px; max-width: 420px; width: 100%; text-align: center;
  box-shadow: 0 24px 60px rgba(10,30,50,.3);
  animation: sn-rise .3s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes sn-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.scroll-notice h3 {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .02em;
  font-weight: 600; font-size: 1.35rem; color: var(--e-ink); margin: 0 0 10px;
}
.scroll-notice p { color: var(--e-muted); font-size: 1rem; line-height: 1.5; margin: 0; }
.scroll-notice-arrow {
  font-size: 2.4rem; line-height: 1; color: var(--e-sun); margin: 14px 0 6px;
  animation: sn-bounce 1.25s ease-in-out infinite;
}
@keyframes sn-bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(9px); } }
@media (prefers-reduced-motion: reduce) { .scroll-notice-arrow { animation: none; } }
.scroll-notice-hint { font-size: .86rem !important; color: var(--e-faint) !important; }
.scroll-notice-btn {
  margin-top: 20px; width: 100%; justify-content: center;
  background: var(--e-sun); border: 0; border-radius: 999px;
  padding: 14px 22px; font-weight: 700; font-size: 1rem; box-shadow: none;
}
.scroll-notice-btn:hover { background: #d4650f; box-shadow: none; }


@media (max-width: 760px) {
  /* île animée en bloc, centrée, au-dessus de l'accroche « Réservation en ligne » */
  .hero-scape { position: static; width: 220px; height: auto; margin: 0 auto 14px; }
  .page-head { padding-right: 0; margin-top: 4px; }
  .main-content { padding-top: 10px; }
  .page-title { font-size: clamp(2rem,9vw,2.7rem); }
}