:root{
  --bg:#ffffff;
  --text:#1b1f2a;
  --muted:#6b7280;
  --line:#e7ebf2;
  --blue:#1e88e5;
  --blue2:#0d6fbf;
  --card:#ffffff;
  --shadow: 0 12px 30px rgba(17, 24, 39, .12);
  --radius:18px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:var(--bg)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.container{width:min(1120px, calc(100% - 32px));margin:0 auto}

/* Header */
.topbar{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--line);z-index:50}
.topbar__wrap{display:flex;align-items:center;gap:18px;padding:12px 0}
.brand{display:flex;align-items:center;gap:10px}
.brand__logo{
  width:38px;height:38px;border-radius:12px;
  background:linear-gradient(135deg,var(--blue),var(--blue2));
  color:#fff;display:grid;place-items:center;font-weight:800
}
.brand__text small{display:block;color:var(--muted);margin-top:2px;font-size:12px}
.nav{display:flex;gap:14px;margin-left:auto}
.nav__link{padding:8px 10px;border-radius:10px;color:#334155}
.nav__link:hover{background:#f3f6fb}
.nav__link.is-active{background:#eef6ff;color:#0b5ea8;font-weight:700}
.topbar__cta{display:flex;align-items:center;gap:10px}
.pill{border:1px solid var(--line);padding:8px 10px;border-radius:999px;font-weight:600;background:#fff}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 14px;border-radius:12px;border:1px solid transparent;
  font-weight:800;cursor:pointer;transition:.15s;
}
.btn--primary{background:linear-gradient(135deg,var(--blue),var(--blue2));color:#fff;box-shadow:var(--shadow)}
.btn--primary:hover{transform:translateY(-1px)}
/* ===== BURGER ROND BLEU LUMINEUX ===== */
.burger{
  display:none;
  width:46px;
  height:46px;
  border:none;
  border-radius:999px;
  padding:0;
  cursor:pointer;
  position:relative;
  background: linear-gradient(135deg,var(--blue),var(--blue2));
  box-shadow: 0 12px 26px rgba(13,111,191,.35);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}

/* effet brillant */
.burger::after{
  content:"";
  position:absolute;
  inset:3px;
  border-radius:999px;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.55), transparent 55%);
  pointer-events:none;
}

.burger:hover{
  box-shadow: 0 16px 34px rgba(13,111,191,.45);
  filter: brightness(1.05);
}
.burger:active{ transform: scale(.93); }

/* 3 barres */
.burger span{
  position:absolute;
  top:50%;
  left:50%;
  width:20px;
  height:2px;
  background:#fff;
  border-radius:2px;
  transform:translate(-50%,-50%);
  transition: transform .25s ease, opacity .2s ease;
}
.burger span:nth-child(1){ transform:translate(-50%,-50%) translateY(-6px); }
.burger span:nth-child(2){ transform:translate(-50%,-50%); }
.burger span:nth-child(3){ transform:translate(-50%,-50%) translateY(6px); }

/* devient une croix quand actif */
.burger.is-active span:nth-child(1){ transform:translate(-50%,-50%) rotate(45deg); }
.burger.is-active span:nth-child(2){ opacity:0; }
.burger.is-active span:nth-child(3){ transform:translate(-50%,-50%) rotate(-45deg); }

.mobilemenu{display:none;border-top:1px solid var(--line);padding:12px}
.mobilemenu a{display:block;padding:10px;border-radius:12px}
.mobilemenu a:hover{background:#f3f6fb}

/* Hero */
/* Hero (background slider derrière le formulaire) */
.hero{
  position:relative;
  min-height:760px;   /* ⬅️ augmente ici (700–850 selon ton goût) */
  display:grid;
  align-items:center; /* ⬅️ mieux que stretch ici */
  overflow:hidden;
}

/* L'image (qui va changer via JS) */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--hero-bg);
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  opacity: var(--hero-bg-opacity, 1);
  transition: opacity .6s ease;
  z-index:0;
}

/* Le voile blanc au-dessus de l'image */
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0) 75%,   /* transparent sur l’image */
    rgba(255,255,255,0.4) 85%, /* léger voile */
    rgba(255,255,255,0.8) 93%, /* presque blanc */
    #ffffff 100%              /* blanc total en bas */
  );
}

/* Le contenu (titre + formulaire) au-dessus */
.hero__grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:28px;
  padding:38px 0;
}

.hero__title{
  font-size:44px;
  line-height:1.05;
  margin:0 0 14px;
  margin-left:0;
  transform:none;
}

.hero__title .t1{color:var(--blue)}
.hero__title .t2{color:#d4af37}
.hero__bullets{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  margin-top:18px;
  margin-left:0;
}

.badge{
  display:flex;gap:10px;align-items:center;
  padding:10px 14px;border-radius:999px;background:#fff;border:1px solid var(--line);
  box-shadow:0 10px 22px rgba(17,24,39,.08);
  font-weight:700;color:#0f172a
}
.check{
  width:22px;height:22px;border-radius:999px;
  background:linear-gradient(135deg,var(--blue),var(--blue2));
  display:grid;place-items:center;color:#fff;font-size:13px
}

/* Card form */
.card{
  background: rgba(255,255,255,0); /* beaucoup plus transparent */
  border:1px solid rgba(255,255,255,0.25);
  border-radius:var(--radius);
  box-shadow:0 25px 60px rgba(0,0,0,0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hero__card{
  align-self:stretch;        /* ⬅️ IMPORTANT : prend la hauteur dispo */
  padding:28px;
  display:flex;
  flex-direction:column;
  justify-content:center;    /* centre le contenu dans la carte */
}

.card h3{margin:0 0 12px;font-size:18px;text-align:center}
.formgrid{
  display:grid;
  gap:18px; /* ⬅️ espace vertical entre les champs */
}
fieldset{border:0;padding:0;margin:0}
fieldset + fieldset{
  margin-top:30px; /* espace entre les sections */
}
legend{font-size:12px;color:#111;font-weight:800;text-transform:uppercase;letter-spacing:.05em;margin:10px 0 6px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.input, select, textarea{
  width:100%;padding:12px 12px;border-radius:12px;border:1px solid #d8e1ef;
  background:#fbfdff;outline:none
}
.input:focus, select:focus, textarea:focus{border-color:#7db7ff;box-shadow:0 0 0 4px rgba(30,136,229,.12)}
.small{font-size:12px;color:var(--muted)}
.filebtn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 12px;border-radius:12px;border:1px dashed #c9d6ea;background:#f7fbff;
  font-weight:800;color:#0b5ea8;cursor:pointer
}
.formactions{display:grid;gap:10px;margin-top:10px}
.btnwide{width:100%}

/* Sections */
.section{padding:62px 0}
.section--soft{background:#f7fbff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.split{
  display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center
}
.rounded-img{
  border-radius:28px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line)
}
.h2{font-size:34px;margin:0 0 10px}
.p{color:#334155;line-height:1.6}
.listcheck{display:grid;gap:10px;margin:18px 0}
.li{
  display:flex;gap:10px;align-items:flex-start;
  color:#0f172a;font-weight:650
}
.li span{color:#334155;font-weight:600}

/* Stats band */
.stats{
  background:linear-gradient(90deg,var(--blue2),var(--blue));
  color:#fff;
  padding:34px 0
}
.stats__grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:center
}
.stat__icon{font-size:26px;opacity:.95}
.stat__num{font-size:30px;font-weight:900;margin-top:6px}
.stat__label{opacity:.92}

/* Cards grid */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tile{
  padding:18px;border-radius:18px;border:1px solid var(--line);
  background:#fff;box-shadow:0 10px 22px rgba(17,24,39,.08)
}
.tile h3{margin:8px 0 6px;text-align:left}
.tile p{margin:0;color:#334155;line-height:1.55}
.kicker{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-size:12px;font-weight:900}

/* Formules */
.cards4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pricecard{overflow:hidden}
.pricecard img{height:120px;width:100%;object-fit:cover}
.pricecard__body{padding:14px}
.pricecard__body h4{margin:0 0 8px}
.ul{margin:0;padding-left:18px;color:#334155}
.ul li{margin:6px 0}

/* Testimonials slider */
.slider{position:relative}
.slider__track{display:flex;gap:14px;overflow:hidden;scroll-behavior:smooth}
.review{min-width:320px}
.slider__nav{display:flex;justify-content:center;gap:10px;margin-top:12px}
.dot{width:10px;height:10px;border-radius:999px;border:1px solid #bcd3ef;background:#fff;cursor:pointer}
.dot.is-active{background:var(--blue);border-color:var(--blue)}

/* FAQ */
.faq{display:grid;gap:10px}
.faq__item{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.faq__q{
  width:100%;text-align:left;padding:14px 14px;border:0;background:#fff;
  display:flex;justify-content:space-between;align-items:center;font-weight:850;cursor:pointer
}
.faq__a{padding:0 14px 14px;color:#334155;display:none}
.faq__item.is-open .faq__a{display:block}
.chev{transition:.15s}
.faq__item.is-open .chev{transform:rotate(180deg)}

/* Footer */
.footer{background:#0b1a2b;color:#e7eefc;padding:44px 0 18px;margin-top:40px}
.footer__grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.3fr;gap:18px}
.footer h4{margin:0 0 10px}
.list{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.muted{color:rgba(231,238,252,.78)}
.footer__bottom{border-top:1px solid rgba(231,238,252,.16);margin-top:22px;padding-top:14px}

/* Devis multi-steps */
.stepper{display:flex;gap:10px;justify-content:center;margin:10px 0 18px}
.step{
  width:36px;height:36px;border-radius:999px;display:grid;place-items:center;
  border:1px solid #cfe0f7;background:#fff;color:#0b5ea8;font-weight:900
}
.step.is-active{background:linear-gradient(135deg,var(--blue),var(--blue2));border-color:transparent;color:#fff}
.twocol{
  display:grid;grid-template-columns:1fr .9fr;gap:18px;align-items:start
}
.infobox{padding:16px}
.infobox h3{text-align:left;margin:0 0 10px}
.tickline{display:flex;gap:10px;align-items:flex-start;margin:10px 0;color:#0f172a;font-weight:700}

/* Responsive */
@media (max-width: 980px){
  .hero__bullets{ margin-left:0; }
  .nav{display:none}
  .burger{display:inline-flex}
  .hero__grid{grid-template-columns:1fr}
  .hero::after{
    background: linear-gradient(180deg,
      rgba(255,255,255,.96) 0 55%,
      rgba(255,255,255,.86) 55% 100%
    );
  }
  .split{grid-template-columns:1fr}
  .stats__grid{grid-template-columns:repeat(2,1fr)}
  .grid3{grid-template-columns:1fr}
  .cards4{grid-template-columns:1fr 1fr}
  .footer__grid{grid-template-columns:1fr 1fr}
  .twocol{grid-template-columns:1fr}
}
@media (max-width: 520px){
  .hero__title{font-size:34px}
  .row2{grid-template-columns:1fr}
  .cards4{grid-template-columns:1fr}
}

/* Suggestions adresse (autocomplete) */
.addr_suggest{
  position:relative;
}
.addr_suggest .item{
  background:#fff;
  border:1px solid var(--line);
  border-top:none;
  padding:10px 12px;
  cursor:pointer;
  font-size:14px;
  color:#0f172a;
}
.addr_suggest .item:first-child{
  border-top:1px solid var(--line);
  border-top-left-radius:12px;
  border-top-right-radius:12px;
}
.addr_suggest .item:last-child{
  border-bottom-left-radius:12px;
  border-bottom-right-radius:12px;
}
.addr_suggest .item:hover{
  background:#f3f6fb;
}

/* ✅ ESPACES ENTRE LES CHAMPS DU FORMULAIRE HERO */
.hero__card .formgrid fieldset{
  display: grid;
  gap: 14px;           /* espace entre les lignes à l’intérieur d’un fieldset */
}
.hero__card .formgrid .row2{
  gap: 14px;           /* espace entre les 2 colonnes */
}
/* option : si tu veux encore plus d’air */
.hero__card .formgrid{
  gap: 18px;           /* espace entre les fieldsets */
}

.hero{
  min-height: 820px; /* augmente si tu veux */
}
.hero__card{
  height: 100%;
}
/* Remonter légèrement le formulaire */
.hero__card{
  position: relative;
  transform: translateY(-40px);
}

/* ===== SECTION AVIS (STYLE GOOGLE) ===== */
.reviews{
  padding:80px 0;
  background:#fff;
  text-align:center;
}
.reviews__title{
  font-size:36px;
  font-weight:900;
  margin:0 0 22px;
}
.reviews__title span{
  color:#6ee7a2; /* vert comme ton exemple */
}
.reviews__rating{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:#f3f4f6;
  padding:12px 22px;
  border-radius:12px;
  margin:0 0 34px;
  font-size:18px;
  font-weight:800;
}
.reviews__rating .stars{
  color:#fbbf24;
  letter-spacing:2px;
}
.reviews__grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:18px;
  margin:0 0 34px;
}
.review{
  background:#f9fafb;
  padding:18px;
  border-radius:14px;
  text-align:left;
  box-shadow:0 6px 16px rgba(0,0,0,.06);
}
.review__stars{
  color:#fbbf24;
  margin-bottom:10px;
}
.review p{
  margin:0 0 12px;
  font-size:14px;
  line-height:1.5;
  color:#374151;
}
.review__source{
  font-size:12px;
  color:#6b7280;
}
.reviews__cta{
  margin-top:10px;
}
/* Responsive */
@media (max-width: 1024px){
  .reviews__grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 600px){
  .reviews__grid{ grid-template-columns:1fr; }
  .reviews__title{ font-size:26px; }
}

/* MOBILE: cacher le bouton téléphone dans la topbar */
@media (max-width: 520px){
  .topbar__cta .pill{
    display:none !important;
  }
}

/* Bouton flottant appel (mobile) */
.fab-call{
  position:fixed;
  right:16px;
  bottom:16px;
  width:60px;
  height:60px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#1e88e5,#0d6fbf);
  color:#fff;
  box-shadow:0 18px 35px rgba(0,0,0,.25);
  z-index:9999;
  animation:pulseCall 2.2s infinite;
}

.fab-call svg{
  width:26px;
  height:26px;
}
@keyframes pulseCall{
  0%{
    box-shadow:0 0 0 0 rgba(30,136,229,.55),
               0 18px 35px rgba(0,0,0,.25);
  }
  70%{
    box-shadow:0 0 0 14px rgba(30,136,229,0),
               0 18px 35px rgba(0,0,0,.25);
  }
  100%{
    box-shadow:0 0 0 0 rgba(30,136,229,0),
               0 18px 35px rgba(0,0,0,.25);
  }
}
.fab-call:active{
  transform:scale(.92);
}

@media (max-width: 520px){
  .fab-call{ display:flex; }
}

/* MOBILE: bouton "Devis gratuit" sur une seule ligne */
@media (max-width: 520px){
  .topbar__cta .btn{
    white-space: nowrap;
    padding: 10px 12px;   /* un peu plus compact */
    font-size: 14px;      /* un peu plus petit */
  }
}
@media (max-width: 520px){
  .topbar__wrap{ gap: 10px; }
  .topbar__cta{ gap: 8px; }
}

/* MOBILE — Titre Hero bien positionné */
@media (max-width: 768px){
  .hero__title{
    margin-left: 0;          /* enlève le décalage gauche desktop */
    transform: none;         /* annule la remontée */
    text-align: center;      /* centre le texte */
    margin-top: 20px;
  }
  .hero__bullets{
    margin: 20px 0 0 0;      /* remet les badges sous le titre */
    justify-content: center; /* centre les badges */
  }
}

/* MOBILE — Badges sur une seule ligne */
@media (max-width: 768px){
  .hero__bullets{
    display:flex;
    flex-wrap: nowrap;        /* empêche retour à la ligne */
    justify-content: center;
    gap:10px;
  }
  .badge{
    font-size:12px;
    padding:8px 10px;
    white-space: nowrap;      /* empêche le texte de se couper */
  }
}

/* MOBILE — Hero avec image bien visible derrière */
@media (max-width: 768px){
  .hero{
    min-height: 720px;
  }
  /* On réduit fortement le voile blanc */
  .hero::after{
    background: linear-gradient(
      to bottom,
      rgba(255,255,255,0.05) 60%,
      rgba(255,255,255,0.15) 75%,
      rgba(255,255,255,0.35) 90%,
      rgba(255,255,255,0.6) 100%
    );
  }
  /* Carte formulaire version "verre" */
  .hero__card{
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border:1px solid rgba(255,255,255,0.35);
    box-shadow: 0 20px 40px rgba(0,0,0,0.25);
  }
  /* Inputs légèrement transparents */
  .hero__card .input,
  .hero__card select,
  .hero__card textarea{
    background: rgba(255,255,255,0.85);
  }
}

@media (max-width: 768px){
  .hero__title{
    margin-left: 0;          /* annule le -130px */
    transform: none; /* ajuste la hauteur du titre */
    font-size: 34px;         /* plus adapté mobile */
    line-height: 1.1;
    text-align: center;        /* ou center si tu préfères */
    padding: 0 14px;         /* espace sur les côtés */
    margin-top: 20px;
  }
  /* optionnel : pour que ça reste lisible sur une photo */
  .hero__title span{
    text-shadow: 0 3px 10px rgba(0,0,0,0.35);
  }
}

@media (max-width: 768px){
  .hero__bullets{
    margin: 18px 0 0 0;
    justify-content: center;   /* centre les badges */
    gap: 8px;                  /* espace entre eux */
    flex-wrap: nowrap;         /* force une seule ligne */
  }
  .badge{
    padding: 6px 10px;         /* plus petits */
    font-size: 12px;
    border-radius: 999px;
  }
  .badge .check{
    width: 18px;
    height: 18px;
    font-size: 11px;
  }
}

@media (max-width: 768px){
  .hero__card{
    margin-top: 40px;   /* descend le formulaire */
    transform: none;    /* enlève le décalage desktop */
  }
}

@media (max-width: 768px){
  /* 1) stop le débordement horizontal (ce qui coupe) */
  html, body{
    overflow-x: hidden;
  }

  /* 2) container full largeur en mobile */
  .container{
    width: calc(100% - 24px);
  }

  /* 3) reset des décalages desktop */
  .hero__title{
    margin-left: 0;
    transform: none;
    text-align: center;
    font-size: 32px;
    line-height: 1.1;
    margin-top: 18px;
  }

  .hero__bullets{
    margin-left: 0;
    margin-top: 18px;
    justify-content: center;
    flex-wrap: nowrap;          /* reste sur une ligne */
    gap: 10px;
    overflow-x: auto;           /* si ça dépasse, ça scroll horizontal */
    padding: 0 4px 6px;
    -webkit-overflow-scrolling: touch;
  }

  .badge{
    padding: 8px 10px;
    font-size: 12px;
    white-space: nowrap;        /* empêche le retour à la ligne dans le badge */
  }

  /* 4) descendre le formulaire + éviter qu'il dépasse */
  .hero__card{
    margin-top: 26px;
    transform: none;
    width: 100%;
  }

  .hero__card .input,
  .hero__card select,
  .hero__card textarea{
    width: 100%;
  }
}

/* === FIX COUPÉ À DROITE (mobile) === */
@media (max-width: 520px){
  /* le container doit être vraiment mobile-friendly */
  .container{
    width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* le contenu hero ne doit JAMAIS dépasser */
  .hero__grid{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  /* carte formulaire full largeur */
  .hero__card{
    width: 80%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

/* ===== TAILLE FORMULAIRE MOBILE ===== */
@media (max-width: 520px){
  .hero__card{
    width: 80% !important;        /* ⬅️ largeur du formulaire */
    margin: 30px auto 0 auto !important;  /* ⬅️ centre + descend */
    padding: 10px !important;     /* ⬅️ espace intérieur */
    transform: none !important;   /* enlève les décalages desktop */
  }

  .hero__card .input,
  .hero__card select,
  .hero__card textarea{
    font-size: 14px !important;   /* taille texte champs */
    padding: 10px !important;     /* hauteur des champs */
  }

  .hero__card h3{
    font-size: 16px !important;   /* titre "devis immédiat" */
  }
}

/* =========================
   FIX HERO MOBILE (pas de dépassement, bien centré)
   À coller tout en bas du CSS
========================= */
@media (max-width: 768px){
  /* 1) On empêche tout débordement horizontal */
  html, body{
    max-width: 100%;
    overflow-x: hidden !important; /* IMPORTANT */
  }

  /* 2) Le container ne doit jamais dépasser l’écran */
  .container{
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin: 0 auto !important;
  }

  /* 3) Le hero et sa grille ne doivent jamais dépasser */
  .hero,
  .hero__grid{
    width: 100% !important;
    max-width: 100% !important;
  }

  .hero__grid{
    grid-template-columns: 1fr !important;
    justify-items: center;        /* centre le contenu */
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 4) On reset les décalages desktop (gros coupable) */
  .hero__title{
    margin-left: 0 !important;
    transform: none !important;
    text-align: center;
  }

  .hero__bullets{
    margin-left: 0 !important;
    margin-top: 18px !important;
    justify-content: center;
    max-width: 100%;
  }

  /* 5) La carte du formulaire centrée, sans dépasser */
  .hero__card{
    width: 100% !important;       /* <- au lieu de 80% si ça te crée des calculs bizarres */
    max-width: 520px;             /* optionnel: limite jolie */
    margin: 26px auto 0 auto !important;
    transform: none !important;
  }
}

/* =========================
   FIX OVERFLOW 5–15px MOBILE
   (le petit débordement à droite)
========================= */

/* 1) coupe définitivement tout scroll horizontal */
html, body{
  max-width: 100%;
  overflow-x: clip !important;   /* meilleur que hidden */
}
@supports not (overflow: clip){
  html, body{ overflow-x: hidden !important; }
}

/* 2) sécurité : certains blocs peuvent dépasser à cause d’un pixel rounding */
.topbar,
.hero,
.hero__grid,
.container{
  max-width: 100% !important;
  overflow-x: clip;
}
@supports not (overflow: clip){
  .topbar, .hero, .hero__grid, .container{ overflow-x: hidden; }
}

/* 3) le coupable fréquent : les badges (largeur + gap) */
.hero__bullets{
  width: 100%;
  max-width: 100%;
}
.badge{ flex: 0 0 auto; } /* empêche un calcul chelou de flex qui dépasse */

/* 4) évite tout “100vw” implicite (si jamais tu en as ailleurs) */
.hero::before,
.hero::after{
  left: 0;
  right: 0;
}

/* =========================
   BADGES MOBILE : pas de débordement
========================= */
@media (max-width: 520px){
  .hero__bullets{
    display: flex;
    flex-wrap: wrap !important;      /* ✅ autorise la ligne 2 */
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    margin: 14px 0 0 0 !important;
    padding: 0 10px;                 /* ✅ évite de coller aux bords */
  }

  .badge{
    padding: 6px 8px !important;     /* ✅ plus petit */
    font-size: 11px !important;      /* ✅ plus petit */
    border-radius: 999px;
    max-width: 100%;
    white-space: normal !important;  /* ✅ autorise retour ligne dans badge */
  }

  .badge .check{
    width: 16px !important;
    height: 16px !important;
    font-size: 10px !important;
  }
}

/* =========================
   Anti flicker slider mobile
========================= */
.hero__grid{
  position: relative;
  z-index: 3;
  transform: translateZ(0);        /* force une couche */
  will-change: transform;
}
.hero__title,
.hero__bullets{
  transform: translateZ(0);        /* évite le flicker */
  will-change: transform;
}
.hero::before,
.hero::after{
  pointer-events: none;
  backface-visibility: hidden;
  transform: translateZ(0);        /* couche séparée */
  will-change: opacity;
}

/* Option : si le blur déclenche le bug sur certains téléphones */
@media (max-width: 768px){
  .hero__card{
    transform: translateZ(0);
    backface-visibility: hidden;
  }
}

@media (max-width: 520px){
  /* Carte formulaire plus petite */
  .hero__card{
    padding: 10px !important;
    margin-top: 20px !important;
    border-radius: 14px;
  }

  /* Titre "devis immédiat" */
  .hero__card h3{
    font-size: 14px;
    margin-bottom: 6px !important;
  }

  /* Grille globale plus serrée */
  .hero__card .formgrid{
    gap: 8px !important;
  }

  /* Espacement entre sections (logement actuel / nouveau) */
  .hero__card fieldset + fieldset{
    margin-top: 8px !important;
  }

  /* Labels (VOTRE LOGEMENT ACTUEL etc.) */
  .hero__card legend{
    font-size: 11px;
    margin-bottom: 4px;
  }

  /* Champs beaucoup plus compacts */
  .hero__card .input,
  .hero__card select,
  .hero__card textarea{
    padding: 7px 8px !important;
    font-size: 12.5px;
    border-radius: 10px;
  }

  /* Bouton devis */
  .hero__card .btn{
    padding: 9px 10px;
    font-size: 13px;
    border-radius: 10px;
  }

  /* Réduit aussi les lignes doubles */
  .hero__card .row2{
    gap: 8px !important;
  }
}

/* =========================
   SWITCH FORMULAIRES (PC vs MOBILE)
========================= */

/* Par défaut = desktop : hero OK, heroform caché */
.heroform{
  display: none;
}

/* Mobile : on cache le formulaire du hero, on affiche heroform */
@media (max-width: 768px){
  .hero .hero__card{
    display: none !important;
  }

  .heroform{
    display: block;
    padding: 22px 0 34px;
    background: #fff;
  }

  .heroform .hero__card{
    margin: 0 auto;
    width: 100%;
    max-width: 520px;
  }

  /* Optionnel : le hero devient juste image + titre + badges */
  .hero{
    min-height: auto;
    padding-bottom: 18px;
  }

  .hero__grid{
    grid-template-columns: 1fr !important;
  }
}

/* =========================
   HERO TEXTE TROP À GAUCHE (DESKTOP FIX)
========================= */
@media (min-width: 981px){
  /* La grille du hero mieux équilibrée */
  .hero__grid{
    grid-template-columns: 1fr 480px; /* texte flexible + largeur form fixe */
    align-items: center;
  }

  /* On enlève TOUS les décalages négatifs du titre */
  .hero__title{
    margin-left: 0 !important;
    transform: none !important;
    max-width: 560px; /* évite que le texte s'étale trop */
  }

  /* Idem pour les badges */
  .hero__bullets{
    margin-left: 0 !important;
  }

  /* On s'assure que le bloc texte ne colle pas au bord */
  .hero__grid > div:first-child{
    padding-left: 40px;
  }
}

/* =========================
   BADGES HERO SUR UNE LIGNE (DESKTOP)
========================= */
@media (min-width: 981px){
  .hero__bullets{
    display: flex;
    flex-wrap: nowrap;          /* 🔥 force une seule ligne */
    gap: 18px;
    align-items: center;
    margin-top: 40px;           /* espace sous le titre */
  }

  .badge{
    white-space: nowrap;        /* empêche retour à la ligne dans le badge */
  }
}

/* =========================
   MONTER TITRE + BADGES DANS LE HERO (DESKTOP)
========================= */
@media (min-width: 981px){
  /* Aligne le contenu du hero en haut au lieu du centre */
  .hero__grid{
    align-items: start;      /* ⬅️ au lieu de center */
    padding-top: 60px;       /* ajuste la hauteur depuis le haut */
  }

  /* Titre plus proche du haut */
  .hero__title{
    margin-top: 0 !important;
  }

  /* Badges juste sous le titre */
  .hero__bullets{
    margin-top: 25px !important;
  }
}

/* =========================
   MOBILE : cacher texte hero
========================= */
@media (max-width: 768px){
  .hero__title,
  .hero__bullets{
    display: none;
  }

  .hero{
    min-height: 220px; /* hero devient juste une bannière image */
  }
}

/* =========================
   TEXTE HERO DÉPLACÉ (MOBILE)
========================= */
.mobile-hero-text{
  display: none;
}

@media (max-width: 768px){
  .mobile-hero-text{
    display: block;
    text-align: center;
    padding: 25px 14px 10px;
  }

  .mobile-hero-text .hero__title{
    display: block;
    font-size: 28px;
    line-height: 1.15;
    margin-bottom: 14px;
  }

  .mobile-hero-text .hero__bullets{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 18px;
  }

  .mobile-hero-text .badge{
    font-size: 12px;
    padding: 6px 10px;
  }
}

/* =========================
   MOBILE : HERO PLUS BAS (VERS LE TITRE)
========================= */
@media (max-width: 768px){
  .hero{
    min-height: 380px;   /* ⬅️ augmente la hauteur du hero */
    padding-bottom: 0;
  }
}

/* =========================
   MOBILE : RÉDUIRE ESPACE HERO → TITRE
========================= */
@media (max-width: 768px){
  /* Hero un peu moins haut */
  .hero{
    min-height: 260px;   /* avant plus grand → on réduit */
  }

  /* On réduit l’espace au-dessus du titre mobile */
  .mobile-hero-text{
    padding-top: 10px !important;
  }
}

/* =========================
   OVERRIDE MOBILE (à coller tout en bas)
   Photo 70% écran + texte/badges plus bas (sous la photo)
========================= */
@media (max-width: 768px){

  /* PHOTO (hero) = 70% écran */
  .hero{
    height: 55vh !important;
    min-height: 50vh !important;
    padding: 0 !important;
    overflow: hidden;
  }

  /* Tirer la photo vers le bas */
  .hero::before{
    background-position: center 30% !important; /* mets 70% si tu veux encore + bas */
  }

  /* Évite que le voile blanc cache la photo */
  .hero::after{
    background: linear-gradient(
      to bottom,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0) 75%,
      rgba(255,255,255,0.25) 90%,
      rgba(255,255,255,0.6) 100%
    ) !important;
  }

  /* Sur mobile : le formulaire du hero est caché (tu le fais déjà) */
  .hero .hero__card{ display:none !important; }

  /* Descendre le bloc texte+badges (dans heroform) */
  .heroform{
    padding-top: 10px !important; /* ✅ change 60 -> 40 ou 80 selon ton goût */
  }
}

#laune .h2{
  text-align: center;
  margin-bottom: 40px;
}
/* === ALIGNEMENT PARFAIT DES CARTES FORMULES === */

#laune .cards4{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 1100px;
  margin: 0 auto;
}

#laune .pricecard{
  display: flex;
  flex-direction: column;
  height: 100%;
}

#laune .pricecard__body{
  display: flex;
  flex-direction: column;
  flex: 1;
}

#laune .btn-card{
  margin-top: auto;      /* pousse en bas */
  align-self: center;    /* centre horizontalement */
}

/* Desktop */
@media (min-width: 1025px){
  #laune .cards4{
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Tablette */
@media (max-width: 1024px){
  #laune .cards4{
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
}

/* Mobile */
@media (max-width: 600px){
  #laune .cards4{
    grid-template-columns: 1fr;
    gap: 14px;
  }
}
#formules .h2{
  text-align: center;
  margin-bottom: 40px;
}


.filename{
  margin-top: 8px;
  font-size: 14px;
  opacity: .9;
}
@media (max-width: 768px){
  .topbar__cta{
    margin-left: auto;   /* pousse le bloc (donc le burger) tout à droite */
  }
}