: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; }

/* Bouton sélecteur de langue (dans la topbar) */
.lang-wrap{
  position:relative; display:inline-flex; align-items:center; gap:8px;
}

.lang-wrap select.btn{
  /* neutralise l’apparence native du select */
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  /* taille/rendu bouton */
  height:40px; padding:0 34px 0 12px; border-radius:999px;
  border:1px solid var(--line); background:#fff; font:inherit; cursor:pointer;
  line-height:40px; /* améliore l’alignement visuel */
}

/* petit chevron à droite du select */
.lang-wrap::after{
  content:"▾"; position:absolute; right:12px; /* adapte si besoin */
  pointer-events:none; color:#6b7280; font-size:12px;
}

/* focus accessible */
.lang-wrap select.btn:focus{ box-shadow:var(--focus); outline:0; }

/* hover doux (réutilise ton style bouton) */
.lang-wrap select.btn:hover{ background:#f3f4f6; }

/* largeur mini pour éviter un select trop large */
.lang-wrap select.btn{ min-width:86px; }

/* iOS : retire la flèche native résiduelle */
.lang-wrap select.btn::-ms-expand { display:none; }           /* IE/Edge legacy */
.lang-wrap select.btn::-webkit-contacts-auto-fill-button{ visibility:hidden; display:none !important; pointer-events:none; position:absolute; right:0; }



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

/* Modale alerte plus “belle” */
.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 “plein” quand modal alert */
.modal-card.modal-alert .btn.btn-primary{
  background:#111;border-color:#111;color:#fff;
}

/* ===== Contact form layout ===== */
.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;
}

/* ——— Améliorations formulaire hors zone ——— */
#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; }
}
/* ===== Confiance / preuves ===== */
.trust-row{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  margin-top:10px
}
.trust-badge{
  display:inline-flex; align-items:center; gap:8px;
  background:#f7f8fa; border:1px solid var(--line-strong);
  border-radius:999px; padding:8px 12px; font-size:13px; color:#111;
  white-space:nowrap
}
.trust-badge .i { width:18px; height:18px }
.trust-badge .stripe-word{ height:14px; display:block }

/* ===== Effets “survol” sur mobile (tap feedback) ===== */
.tap-elevate{
  transition: transform .12s ease, box-shadow .12s ease;
  will-change: transform
}
.tap-elevate:active{
  transform: translateY(0px) scale(.985);
  box-shadow: 0 8px 20px rgba(0,0,0,.08)
}
/* état tactile simulé par JS (utile quand :active ne reste pas) */
.is-tapping{
  transform: translateY(0px) scale(.985) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.08) !important;
}

/* Petit “ripple” soft optionnel (sans couleur figée) */
.ripple{
  position:relative; overflow:hidden
}
.ripple::after{
  content:""; position:absolute; inset:auto; width:0; height:0; border-radius:50%;
  background:rgba(0,0,0,.08); transform:translate(-50%,-50%); pointer-events:none;
  opacity:0; transition: width .35s ease, height .35s ease, opacity .6s ease
}
.ripple.is-rippling::after{
  opacity:1; width:220px; height:220px
}

/* Accessibilité motion */
@media (prefers-reduced-motion: reduce){
  .tap-elevate, .ripple::after{ transition:none }
}
/* Conteneur commun */
.proofs-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:10px;
  flex-wrap:wrap; /* autorise le retour à la ligne propre */
}

/* Groupe des badges confiance : reste à gauche */
.trust-row{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  margin:0; /* on retire le margin-top ici puisque géré par .proofs-row */
}

/* Métriques : à droite, même hauteur visuelle */
.live-metrics{
  display:flex; gap:10px; margin:0; /* plus de margin-top inline */
}

/* Harmonise la hauteur/alignement de toutes les pastilles */
.trust-badge, .badge{
  height:36px; display:inline-flex; align-items:center;
  padding:0 12px; border-radius:999px;
}

/* Le petit “S” Stripe bien centré */
.trust-badge .stripe-word{ height:14px; display:block }

/* Mobile : on empile, métriques passent sous les preuves et s’alignent à gauche */
@media (max-width:560px){
  .proofs-row{ align-items:flex-start }
  .live-metrics{ width:100%; justify-content:flex-start; }
}

/* ===== Effets premium additionnels ===== */

/* 0) Préfère réduire le mouvement ? On coupe les anims fortes */
@media (prefers-reduced-motion: reduce) {
  .reveal, .btn-cta, .magnetic, .tilt, .hero::after { transition: none !important; animation: none !important; }
}

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

/* 2) Topbar : fond “glass” + blur au scroll */
.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); }

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

/* 4) CTA “shine” + lift */
.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); } }

/* 5) Magnetic hover (appliqué via .magnetic) */
.magnetic { transition: transform .18s ease; will-change: transform; }

/* 6) Cards reveal (features/services/avis) */
.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); }

/* 7) Tilt sur cartes (3D doux) */
.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; }

/* 8) Badges métriques “float” léger */
.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) } }

/* 9) Scroll progress bar (tout en haut) */
.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);
}

/* 10) Auto-typing headline (masque + curseur) */
.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; } }

/* 11) Glass hover sur .feature / .service / .review-card */
.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); }

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

/* 13) “Pulse” discret quand estimation prête */
#estimatePrice.pulse { animation: pulse .9s ease 2; }
@keyframes pulse { 0%{ transform:scale(1) } 50%{ transform:scale(1.04) } 100%{ transform:scale(1) } }