:root{
    --bg:#fff; --ink:#0f1113; --sub:#6b7280; --line:#e6e7eb; --line-strong:#dcdfe4;
    --soft:#f7f8fa; --accent:#111; --cta:#facc15; --cta-ink:#111;
    --radius:14px; --shadow:0 12px 28px rgba(15,17,19,.10); --focus:0 0 0 3px #1111;
    --bottom-safe: env(safe-area-inset-bottom, 12px);
}
*{box-sizing:border-box}
html,body{height:100%}

html, body { overscroll-behavior-y: auto; overflow-x: auto; }
@media (hover: hover) and (pointer: fine) {
  html, body { overscroll-behavior-y: none; overflow-x: hidden; }
}

body{
  margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased
}
a{color:inherit;text-decoration:none}

/* Topbar */
.topbar{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--line);z-index:100}
.topbar .inner{max-width:1200px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:12px}
.grow{flex:1}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:#fff;cursor:pointer;transition:.15s}
.btn:hover{background:#f3f4f6}
.btn-cta{background:var(--cta);border-color:var(--cta);color:var(--cta-ink);font-weight:700}
.btn-primary{background:#111;color:#fff;border-color:#111}
.btn-primary:hover{filter:brightness(1.05)}
.logo-svg{height:28px}
@media (max-width:768px){ .logo-svg{height:24px} }

/* HERO */
.hero{
  position:relative; isolation:isolate;
  background:url('heroo.png') center/cover no-repeat;
  min-height:56vh; display:grid; align-items:end;
}
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.45) 70%);
  z-index:0; pointer-events:none;
}
.hero-inner{ position:relative; z-index:1; max-width:1200px; margin:0 auto; padding:28px 16px 80px }
.hero h1{
  color:#fff; margin:0 0 14px; line-height:1.02; letter-spacing:-.02em;
  font-size:clamp(28px,4.8vw,56px);
}
.hero .lead{ color:#e5e7eb; font-size:16px; margin:0 0 14px }
.hero .cta-row{ display:flex; gap:12px; flex-wrap:wrap }

/* Booking card */
.booking-wrap{ position:relative; margin-top:-42px; z-index:2 }
.booking-card{
  max-width:1200px; margin:0 auto; padding:14px;
  background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)
}
.booking-grid{ display:grid; grid-template-columns:1fr 1fr 1fr auto auto; gap:10px }
@media (max-width:1024px){ .booking-grid{ grid-template-columns:1fr 1fr auto auto; } }
@media (max-width:820px){ .booking-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .booking-grid{ grid-template-columns:1fr; } }

.input-wrap{
  position:relative;border:1px solid var(--line-strong);border-radius:12px;
  min-height:52px;height:auto;display:flex;align-items:center;padding:0 12px;background:#fff
}
.input-wrap:focus-within{box-shadow:var(--focus)}
.input-wrap input,
.input-wrap select{
  border:0;outline:0;background:transparent;width:100%;font:inherit;font-size:16px;line-height:1;height:48px
}
.input-wrap .locbtn{
  position:absolute; right:6px; width:34px; height:34px; border-radius:8px;
  border:1px solid var(--line-strong); background:#fff; display:grid; place-items:center
}

.input-wrap.with-icon{
  display:grid; grid-template-columns:24px 1fr; gap:8px; padding-left:10px; padding-right:12px;
}
.leading-icon{ display:grid; place-items:center }
.leading-icon svg{ width:18px; height:18px; display:block }
.leading-icon .start-fill{ fill:#111 }
.leading-icon .end-fill{ fill:#111 }

.select-wrap{position:relative}
.select-wrap::after{content:"▾"; position:absolute; right:12px; top:50%; transform:translateY(-50%); pointer-events:none; color:#6b7280}

.dropdown{
  position:absolute;z-index:1000;left:0;right:0;top:100%;
  background:#fff;border:1px solid var(--line-strong);border-radius:10px;
  box-shadow:var(--shadow);overflow:auto;display:none;max-height:260px
}
.dropdown.show{display:block}
.opt{padding:12px;cursor:pointer}
.opt:hover{background:#f7f8fa}

/* Sections */
.section{max-width:1200px;margin:30px auto;padding:0 16px}
.section h2{margin:0 0 14px;font-size:clamp(22px,2.4vw,28px)}
.feature-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.service-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:900px){.feature-grid,.service-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.feature-grid,.service-grid{grid-template-columns:1fr}}
.feature,.service{border:1px solid var(--line);border-radius:12px;padding:16px;display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;background:#fff}
.ficon{width:38px;height:38px;border-radius:10px;background:#f7f8fa;display:grid;place-items:center}
.ftitle{font-weight:700}
.fsub{color:var(--sub);font-size:14px}

/* Avis */
.reviews-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:900px){.reviews-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.reviews-grid{grid-template-columns:1fr}}
.review-card{
  border:1px solid var(--line); border-radius:16px; padding:16px;
  background:linear-gradient(180deg,#fff, #fafafa);
  box-shadow:var(--shadow); display:grid; gap:10px
}
.rev-top{display:flex;align-items:center;gap:10px}
.avatar{width:40px;height:40px;border-radius:50%;background:#e5e7eb;display:grid;place-items:center;font-weight:700}
.rev-name{font-weight:700}
.stars{display:flex;gap:2px}
.stars svg{width:16px;height:16px}
.rev-text{color:#111}

/* Modals */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;place-items:end;padding:0;z-index:60}
.modal.open{display:grid}
.modal-card{width:100%;max-width:720px;margin:0 auto;background:#fff;border-radius:20px 20px 0 0;box-shadow:var(--shadow);border:1px solid var(--line);transform:translateY(100%);animation:slideUp .22s ease-out forwards}
@keyframes slideUp{to{transform:translateY(0)}}
.modal-head{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--line);padding:10px 16px 12px;border-radius:20px 20px 0 0}
.handle{width:42px;height:5px;border-radius:999px;background:#e5e7eb;margin:6px auto 10px}
.modal-title{font-weight:700;font-size:16px;display:flex;align-items:center;gap:8px}
.close-x{border-radius:12px;height:40px;padding:0 12px}
.modal-body{max-height:65vh;overflow:auto;padding:12px 16px 16px}
.modal-footer{position:sticky;bottom:0;background:#fff;border-top:1px solid var(--line);padding:10px 16px calc(10px + var(--bottom-safe));display:flex;gap:10px;z-index:1}
.modal-footer .btn{height:50px;flex:1}
.price{font-size:36px;font-weight:800;line-height:1}
.subline{font-size:13px;color:var(--sub)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.chip{background:#f7f8fa;border:1px solid var(--line-strong);border-radius:999px;padding:6px 10px;font-size:13px}
#map{height:280px;border-radius:12px;border:1px solid var(--line);margin-top:10px;overflow:hidden}
.disclaimer{margin:10px 2px 0;color:#9aa1ab;font-size:12px}

@media (max-width:560px){
  .modal-card{max-width:100%;border-radius:16px 16px 0 0}
  .modal-title{font-size:18px}
  .price{font-size:40px}
  .modal-body{max-height:calc(82vh - 120px)}
  #map{height:320px}
}

footer{border-top:1px solid var(--line);margin-top:26px}
.foot{display:flex;gap:12px;flex-wrap:wrap;padding:18px 16px;color:var(--sub);font-size:14px;max-width:1200px;margin:0 auto}
.muted{color:var(--sub);font-size:14px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.pad{padding:16px}
svg.i{width:20px;height:20px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* Form: responsive */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:560px){ .form-grid{ grid-template-columns:1fr; } .modal{ padding:0; } .modal-card{ max-width:100%; width:100%; border-radius:16px 16px 0 0; } .modal-body{ padding-left:12px; padding-right:12px; } }
.btn-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
.btn-row .btn{ flex:1; min-width:140px; }

/* Pleine largeur de tous les champs “final” */
#reserveForm .card[type="text"],
#reserveForm .card[type="email"],
#reserveForm .card[type="tel"],
#reserveForm textarea.card { width:100%; display:block; }

/* Langue */
.lang-wrap{ position:relative; display:inline-flex; align-items:center; gap:8px; }
.lang-wrap select.btn{
  appearance:none; height:40px; padding:0 34px 0 12px; border-radius:999px;
  border:1px solid var(--line); background:#fff; font:inherit; cursor:pointer;
  line-height:40px;
}
.lang-wrap::after{
  content:"▾"; position:absolute; right:12px;
  pointer-events:none; color:#6b7280; font-size:12px;
}
.lang-wrap select.btn:focus{ box-shadow:var(--focus); outline:0; }
.lang-wrap select.btn:hover{ background:#f3f4f6; }
.lang-wrap select.btn{ min-width:86px; }
.lang-wrap select.btn::-ms-expand{ display:none; }
.lang-wrap select.btn::-webkit-contacts-auto-fill-button{ visibility:hidden; display:none!important }

/* Error */
.input-wrap.error{ border-color:#ef4444; }

/* Alerte */
.modal-card.modal-alert{
  border:1px solid #fde68a;
  background:linear-gradient(180deg,#fffdf5,#fffaf0);
}
.modal-card.modal-alert .modal-head{
  background:#fffbeb;
  border-bottom:1px solid #fde68a;
}
.modal-card .modal-title .alert-icon{
  display:inline-flex;
  width:28px;height:28px;
  align-items:center;justify-content:center;
  border-radius:8px;
  background:#fff7ed;
  border:1px solid #fdba74;
  margin-right:8px;
}

/* Bouton principal alert */
.modal-card.modal-alert .btn.btn-primary{
  background:#111;border-color:#111;color:#fff;
}

/* Contact form */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.contact-grid .full{ grid-column:1 / -1; }

.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:12px; color:var(--sub); padding-left:2px; }
.field .input, .field textarea{
  background:#fff; border:1px solid var(--line-strong);
  border-radius:12px; padding:0 12px; height:48px;
  font:inherit; outline:0;
}
.field .input:focus, .field textarea:focus{ box-shadow:var(--focus); }
.field textarea{
  min-height:120px; padding:10px 12px; resize:vertical;
}

@media (max-width:560px){
  .contact-grid{ grid-template-columns:1fr; }
}

.badge{
  display:inline-block;
  background:#f7f8fa;
  border:1px solid var(--line-strong);
  border-radius:999px;
  padding:6px 10px;
  font-size:13px;
  color:#111;
}

/* OOB */
#modal-oob .card{ height:48px; padding:0 12px; }
#modal-oob textarea.card{ height:110px; padding:10px 12px; }

#modal-oob .form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
#modal-oob .form-grid .full{ grid-column:1/-1; }

#modal-oob .btn-row .btn{ height:48px; }

#oob_return_wrap{ border:1px dashed var(--line-strong); border-radius:12px; padding:10px; }
#oob_budget::-webkit-outer-spin-button,
#oob_budget::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
#oob_budget{ -moz-appearance: textfield; }

@media (max-width:560px){
  #modal-oob .form-grid{ grid-template-columns:1fr; }
}

/* Trust / proofs */
.proofs-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:10px;
  flex-wrap:wrap;
}
.trust-row{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  margin:0;
}
.live-metrics{
  display:flex; gap:10px; margin:0;
}
.trust-badge, .badge{
  height:36px; display:inline-flex; align-items:center;
  padding:0 12px; border-radius:999px;
}
.trust-badge .stripe-word{ height:14px; display:block }

/* Mobile proofs */
@media (max-width:560px){
  .proofs-row{ align-items:flex-start }
  .live-metrics{ width:100%; justify-content:flex-start; }
}

/* Motion reduction */
@media (prefers-reduced-motion: reduce) {
  .reveal, .btn-cta, .magnetic, .tilt, .hero::after { transition: none !important; animation: none !important; }
}

/* Fade-in global */
body:not(.loaded) { opacity:.001; transform:translateY(6px); }
body.loaded { transition: opacity .45s ease, transform .45s ease; }

/* Topbar glass */
.topbar { backdrop-filter: blur(0px); background:rgba(255,255,255,.95); transition: backdrop-filter .3s ease, box-shadow .3s ease; }
.topbar.is-scrolled { backdrop-filter: blur(8px); box-shadow: 0 8px 30px rgba(0,0,0,.06); }

/* Hero parallax */
.hero { will-change: background-position, transform; }
.hero.parallax-zoom { transform: scale(1.015); transition: transform .6s ease; }

/* CTA shine */
.btn-cta {
  position:relative; overflow:hidden; transform:translateZ(0);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}
.btn-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(0,0,0,.12); }
.btn-cta::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.4) 20%, transparent 40%);
  transform: translateX(-120%) skewX(-20deg);
}
.btn-cta:hover::before { animation: btnShine 0.9s ease; }
@keyframes btnShine { to { transform: translateX(120%) skewX(-20deg); } }

/* Magnetic */
.magnetic { transition: transform .18s ease; will-change: transform; }

/* Reveal */
.reveal { opacity:0; transform: translateY(14px) scale(.98); }
.reveal.in { opacity:1; transform:none; transition: opacity .6s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1); }

/* Tilt */
.tilt { transform-style: preserve-3d; will-change: transform; transition: transform .12s linear; }
.tilt .tilt-shadow { position:absolute; inset:0; border-radius:inherit; pointer-events:none; box-shadow: 0 25px 50px rgba(0,0,0,.08); opacity:0; transition: opacity .2s ease; }
.tilt:hover .tilt-shadow { opacity:1; }

/* Floating badges */
.badge.floaty { animation: floaty 3.2s ease-in-out infinite; }
.badge.floaty:nth-child(2){ animation-delay:.4s }
@keyframes floaty { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-4px) } }

/* Scroll progress */
.scrollbar {
  position: fixed; top:0; left:0; height:3px; width:0%;
  background: linear-gradient(90deg, #111, #facc15);
  z-index: 200; box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

/* Typing headline */
.headline-type {
  display:inline-block; white-space:nowrap; border-right:2px solid rgba(255,255,255,.85);
  animation: caretBlink 1s step-end infinite;
}
@keyframes caretBlink { 50% { border-color: transparent; } }

/* Card hover shine */
.feature, .service, .review-card {
  position:relative; overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.feature::after, .service::after, .review-card::after{
  content:""; position:absolute; inset:auto 0 0 0; height:40%;
  background: linear-gradient(180deg, transparent, rgba(17,17,17,.03));
  pointer-events:none; transform: translateY(20%); transition: transform .25s ease;
}
.feature:hover, .service:hover, .review-card:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(0,0,0,.08); border-color:#d8dbe1; }
.feature:hover::after, .service:hover::after, .review-card:hover::after{ transform: translateY(0); }

/* Smooth scroll */
html { scroll-behavior:smooth; }

/* Price pulse */
#estimatePrice.pulse { animation: pulse .9s ease 2; }
@keyframes pulse { 0%{ transform:scale(1) } 50%{ transform:scale(1.04) } 100%{ transform:scale(1) } }

/* Modal promo layout */
#modal-promo .form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
#modal-promo .form-grid .field{
  display:flex;
  flex-direction:column;
  gap:6px;
}
#modal-promo label{
  font-size:12px;
  color:var(--sub);
  padding-left:2px;
}
#modal-promo select.card{
  width:100%;
  display:block;
}
@media (max-width:560px){
  #modal-promo .form-grid{
    grid-template-columns:1fr;
  }
}

/* Previous promo blink (now replaced) */
.promo-cta-blink{
  animation: promoBlink 1s ease-in-out infinite;
}
@keyframes promoBlink{
  0%{
    filter: brightness(1);
    box-shadow: 0 10px 24px rgba(0,0,0,.08);
    transform: translateY(0);
  }
  50%{
    filter: brightness(1.12);
    box-shadow: 0 16px 38px rgba(0,0,0,.16);
    transform: translateY(-1px);
  }
  100%{
    filter: brightness(1);
    box-shadow: 0 10px 24px rgba(0,0,0,.08);
    transform: translateY(0);
  }
}

/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .promo-cta-blink{
    animation: none;
  }
}
/* ============================================================
   BOUTON PROMOTION — Ultra Flash / Néon / Glow LED
   ============================================================ */

/* Base flashy */
.btn-cta.promo-cta-blink{
  position:relative;
  background: linear-gradient(135deg, #ffe34a, #facc15, #f59e0b);
  border:2px solid #ffde3b;
  color:#111;
  font-weight:900;
  letter-spacing:.3px;
  text-shadow:0 1px 0 #fff8cc;
  box-shadow:
    0 0 20px rgba(255, 204, 0, .45),
    0 6px 28px rgba(0,0,0,.22);
  animation: promoGlow 1.3s infinite ease-in-out;
  transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

/* Halo néon intense */
.btn-cta.promo-cta-blink::after{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:999px;
  background: radial-gradient(
    rgba(255, 215, 0, .55),
    transparent 60%
  );
  opacity:.7;
  filter:blur(12px);
  pointer-events:none;
  transition:opacity .3s ease;
}

/* Animation “respiration lumineuse” */
@keyframes promoGlow{
  0%{
    transform:scale(1);
    box-shadow:
      0 0 16px rgba(255, 204, 0, .25),
      0 6px 28px rgba(0,0,0,.20);
  }
  50%{
    transform:scale(1.06);
    box-shadow:
      0 0 32px rgba(255, 210, 0, .65),
      0 10px 40px rgba(0,0,0,.28);
  }
  100%{
    transform:scale(1);
    box-shadow:
      0 0 16px rgba(255, 204, 0, .25),
      0 6px 28px rgba(0,0,0,.20);
  }
}

/* Hover desktop : explosion lumineuse */
.btn-cta.promo-cta-blink:hover{
  filter:brightness(1.18);
  transform:translateY(-3px) scale(1.08);
  box-shadow:
    0 0 40px rgba(255, 215, 0, .75),
    0 10px 50px rgba(0,0,0,.35);
}
.btn-cta.promo-cta-blink:hover::after{
  opacity:1;
}

/* Tap mobile */
@media (hover:none){
  .btn-cta.promo-cta-blink:active{
    transform:scale(.94);
    filter:brightness(.92);
  }
}

/* Motion reduce */
@media (prefers-reduced-motion:reduce){
  .promo-cta-blink{
    animation:none !important;
    transform:none !important;
  }
}
/* ============================================================
   AFFICHAGE TARIF PROMO DANS LE MODAL
   ============================================================ */

.promo-price-wrap{
  margin-top:16px;
  text-align:center;
}

.promo-price-main{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 24px;
  min-width:210px;

  border-radius:999px;
  font-size:26px;
  font-weight:900;
  letter-spacing:.3px;

  /* Même style que le bouton promo */
  background: linear-gradient(135deg, #ffe34a, #facc15, #f59e0b);
  border:2px solid #ffde3b;
  color:#111;
  text-shadow:0 1px 0 #fff8cc;
  box-shadow:
    0 0 20px rgba(255, 204, 0, .45),
    0 6px 28px rgba(0,0,0,.22);

  animation: promoGlow 1.3s infinite ease-in-out;
}

.promo-price-sub{
  margin-top:6px;
  font-size:12px;
  color:var(--sub);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}