/* =========================================================
   SAHP – REFONTE PREMIUM : pages hors maquette
   Zones d'intervention, pages locales (94, Créteil, Choisy),
   Devis, pages légales, plan du site, cookies, 404.
   À charger APRÈS toutes les autres feuilles de ces pages.
   Ne modifie aucun texte : uniquement l'habillage.
========================================================= */

:root{
  --s-blue:#0069D0; --s-sky:#2B95E9; --s-navy:#0F3555; --s-green:#73C70F; --s-green-d:#4C9A08;
  --s-text:#1F2A37; --s-soft:#4B5563; --s-bg:#F3F7FA; --s-line:#E3EAF2;
  --s-grad:linear-gradient(90deg,#0069D0 0%,#2B95E9 100%);
  --s-wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath d='M0 34 C 240 0, 480 10, 720 40 S 1200 70, 1440 22' fill='none' stroke='%2373C70F' stroke-width='4'/%3E%3C/svg%3E");
  --s-goutte:url("/assets/img/refonte/goutte-duo.png");
  --s-band:440px;
}

/* ---------- 0. Page et en-tête : le bandeau bleu commence tout en haut, sous l'en-tête ---------- */
body.sahp-chrome{background:var(--s-bg) !important}
body.sahp-chrome > div:has(> .hd-bar){background:var(--s-grad)}

/* ---------- 1. Fond commun : bandeau bleu + goutte + vague, puis gris clair ---------- */
.zone-page,.vdm-page,.legal-page,.cookie-page,#devis-sahp,.page-404{
  background:
    var(--s-wave) left 0 top calc(var(--s-band) - 46px) / 100% 46px no-repeat,
    var(--s-goutte) right -110px top calc(var(--s-band) - 360px) / 440px auto no-repeat,
    var(--s-grad) left top / 100% var(--s-band) no-repeat,
    var(--s-bg) !important;
  padding-top:56px !important; padding-bottom:96px !important;
}
@media (max-width:760px){
  :root{--s-band:380px}
  .zone-page,.vdm-page,.legal-page,.cookie-page,#devis-sahp,.page-404{
    background:
      var(--s-wave) left 0 top calc(var(--s-band) - 34px) / 100% 34px no-repeat,
      var(--s-grad) left top / 100% var(--s-band) no-repeat,
      var(--s-bg) !important;
    padding-top:36px !important; padding-bottom:64px !important;
  }
}

/* ---------- 2. Carte blanche principale ---------- */
.vdm-container,.legal-container,.cookie-page .legal-container{
  margin:0 auto !important; background:#fff !important;
  border-radius:28px !important; box-shadow:0 30px 80px rgba(15,53,85,.14) !important;
  padding:clamp(28px,4.5vw,64px) !important; color:var(--s-text);
}
.vdm-container{max-width:1100px !important}
.legal-container{max-width:1000px !important}

/* ---------- 3. Typographie commune ---------- */
.vdm-container h1,.legal-container h1,.zone-page h1,.devis-header h1,.page-404 h1{
  font-family:Montserrat,sans-serif !important; font-weight:800 !important;
  letter-spacing:-.015em; line-height:1.12 !important;
}
.vdm-container h1,.legal-container h1{font-size:clamp(30px,3.6vw,46px) !important; color:var(--s-navy) !important; margin:0 0 18px !important}
.vdm-container h2,.legal-container h2,.local-links-section h2,.faq-title{
  font-family:Montserrat,sans-serif !important; font-weight:800 !important;
  font-size:clamp(22px,2.2vw,30px) !important; line-height:1.25 !important;
  color:var(--s-navy) !important; margin:56px 0 18px !important;
  padding-left:16px; border-left:6px solid var(--s-green);
}
.vdm-container h3,.legal-container h3{font-family:Montserrat,sans-serif !important;font-weight:800 !important;color:var(--s-navy) !important}
.vdm-container p,.legal-container p,.legal-container li,.vdm-container li{
  font-family:Roboto,sans-serif !important; font-size:17px !important; line-height:1.75 !important; color:var(--s-text) !important;
}
.vdm-subtitle,.legal-intro{font-size:19px !important;line-height:1.7 !important;color:var(--s-soft) !important;font-weight:400 !important}
.vdm-container a:not(.vdm-btn):not(.pricing-btn),.legal-container a{color:var(--s-blue) !important;text-decoration:underline;text-decoration-color:rgba(0,105,208,.35);text-underline-offset:3px}
.vdm-container a:not(.vdm-btn):not(.pricing-btn):hover,.legal-container a:hover{text-decoration-color:var(--s-green)}

/* ---------- 4. Listes à coche verte ---------- */
.vdm-list,.legal-container ul{list-style:none !important;margin:8px 0 24px !important;padding:0 !important}
.vdm-list li,.legal-container ul > li{position:relative;padding:8px 0 8px 40px !important;margin:0 !important}
.vdm-list li::before,.legal-container ul > li::before{
  content:"";position:absolute;left:0;top:11px;width:26px;height:26px;border-radius:50%;
  background:var(--s-green) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5L20 7'/></svg>") center/15px no-repeat;
}
.legal-container ul ul{margin:6px 0 6px !important}
.legal-container ul ul > li::before{width:10px;height:10px;top:18px;left:8px;background:var(--s-blue)}

/* ---------- 5. Encadrés ---------- */
.vdm-note{
  font-style:normal !important; background:#F1FAE5 !important; border:0 !important; border-left:5px solid var(--s-green) !important;
  border-radius:0 18px 18px 0 !important; padding:18px 22px !important; margin:24px 0 !important; color:#2F4A12 !important;
}
.vdm-cta-banner{
  background:#EEF4FA !important;border:0 !important;border-radius:24px !important;padding:26px 30px !important;margin:44px 0 !important;
}
.vdm-cta-banner p{font-family:Montserrat,sans-serif !important;font-weight:800 !important;font-size:20px !important;color:var(--s-navy) !important}
.vdm-cta-final{
  background:var(--s-goutte) right -60px bottom -90px / 300px auto no-repeat, var(--s-grad) !important;
  border-radius:28px !important;padding:clamp(32px,4vw,52px) !important;margin-top:64px !important;overflow:hidden;
}
.vdm-cta-final h2{color:#fff !important;border:0 !important;padding:0 !important;margin:0 0 12px !important}
.vdm-cta-final p{color:#F2FAFF !important}

/* ---------- 6. Boutons (pilules, comme le reste du site) ---------- */
.vdm-btn,.pricing-btn,.zone-page-call,.btn-home{
  border-radius:32px !important;min-height:50px !important;padding:0 26px !important;
  font-family:Montserrat,sans-serif !important;font-weight:800 !important;font-size:15px !important;
  transition:transform .25s,box-shadow .25s,background .25s !important;
}
.vdm-btn:hover,.pricing-btn:hover,.zone-page-call:hover,.btn-home:hover{transform:translateY(-2px)}
.vdm-btn-call{background:var(--s-blue) !important;border-color:var(--s-blue) !important;color:#fff !important;box-shadow:0 12px 28px rgba(0,105,208,.28) !important}
.vdm-btn-primary{background:#fff !important;border:2px solid var(--s-blue) !important;color:var(--s-blue) !important}
.vdm-btn-ghost{background:transparent !important;border:2px solid var(--s-line) !important;color:var(--s-navy) !important}
.vdm-cta-final .vdm-btn-call{background:#fff !important;color:var(--s-blue) !important;border-color:#fff !important}
.vdm-cta-final .vdm-btn-primary{background:var(--s-green) !important;border-color:var(--s-green) !important;color:#fff !important}
.vdm-cta-final .vdm-btn-ghost{border-color:rgba(255,255,255,.7) !important;color:#fff !important}

/* ---------- 7. Visuels, tableaux ---------- */
.vdm-hero-visual{border-radius:24px !important;box-shadow:0 20px 50px rgba(15,53,85,.16);background:transparent !important}
.vdm-hero-visual img{border-radius:24px !important}
.creteil-table-wrapper,.choisy-table-wrapper{border-radius:20px;overflow:auto;box-shadow:0 10px 30px rgba(15,53,85,.08);margin:20px 0 28px}
.creteil-table,.choisy-table{width:100%;border-collapse:collapse !important;font-size:16px}
.creteil-table thead tr,.choisy-table thead tr{background:var(--s-blue) !important}
.creteil-table th,.choisy-table th{color:#fff !important;font-family:Montserrat,sans-serif;font-weight:700;padding:14px 16px !important;text-align:left;border:0 !important}
.creteil-table td,.choisy-table td{padding:14px 16px !important;border:0 !important;border-bottom:1px solid var(--s-line) !important}
.creteil-table tbody tr:nth-child(even),.choisy-table tbody tr:nth-child(even){background:var(--s-bg)}

/* ---------- 8. Villes et liens locaux ---------- */
.vdm-cities li,.local-links-grid li{background:var(--s-bg) !important;border:0 !important;border-radius:32px !important;transition:background .25s,color .25s}
.vdm-cities li{padding:12px 18px !important;color:var(--s-blue) !important;font-family:Montserrat,sans-serif;font-weight:700}
.local-links-grid li:hover{background:var(--s-green) !important;box-shadow:none !important}
.local-links-grid li:hover a{color:#fff !important}
.local-links-grid a{font-family:Montserrat,sans-serif;font-weight:700 !important;color:var(--s-blue) !important;text-decoration:none !important;padding:14px 20px !important}

/* ---------- 9. Carte de prix (pages locales) ---------- */
.page-pricing-card{background:var(--s-blue) !important;color:#fff !important;border-radius:28px !important;padding:clamp(26px,3.4vw,44px) !important;box-shadow:0 20px 50px rgba(0,105,208,.25) !important;border:0 !important}
.page-pricing-card .pricing-ttc-title{color:#fff !important;font-family:Montserrat,sans-serif !important;font-weight:800 !important;font-size:26px !important;border:0 !important;padding:0 !important;margin:0 !important}
.page-pricing-card .pricing-ttc-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;border:0;padding:0;margin-bottom:18px}
.page-pricing-card .pricing-ht-ttc{display:flex;background:rgba(255,255,255,.16);border-radius:32px;padding:4px}
.page-pricing-card .pricing-ht-ttc .pricing-ttc-btn{min-width:54px;min-height:36px;border:none !important;border-radius:32px;background:transparent !important;color:#fff !important;font-family:Montserrat,sans-serif;font-weight:700;cursor:pointer}
.page-pricing-card .pricing-ht-ttc .pricing-ttc-btn.active{background:#fff !important;color:#0069D0 !important;font-weight:800}
.page-pricing-card .pricing-item{display:flex;justify-content:space-between;gap:18px;padding:15px 0 !important;border:0 !important;border-bottom:1px solid rgba(255,255,255,.18) !important;background:transparent !important}
.page-pricing-card .service-name{color:#fff !important;font-size:16px}
.page-pricing-card::before{display:none !important}
.page-pricing-card{max-width:none !important;width:100% !important}
.page-pricing-card .service-price{color:#8FD63A !important;background:none !important;padding:0 !important;border-radius:0 !important;box-shadow:none !important;font-family:Montserrat,sans-serif;font-weight:800;white-space:nowrap}
.page-pricing-card .pricing-btn{background:#fff !important;color:var(--s-blue) !important;display:inline-flex;align-items:center;text-decoration:none !important}

/* ---------- 10. FAQ en accordéon (pages locales) ---------- */
.faq-block{margin-top:56px !important}
.faq-list{display:flex;flex-direction:column;gap:12px}
.faq-item{background:var(--s-bg) !important;border:0 !important;border-radius:20px !important;box-shadow:none !important;overflow:hidden}
.faq-question{padding:20px 24px !important;list-style:none;cursor:pointer}
.faq-question-heading{margin:0 !important;font-family:Montserrat,sans-serif !important;font-weight:800 !important;font-size:17px !important;color:var(--s-navy) !important;padding-right:40px}
.faq-question::after{color:var(--s-blue) !important}
.faq-answer{padding:0 24px 20px !important}
.faq-answer p{margin:0 !important}

/* ---------- 11. Zones d'intervention ---------- */
.zone-page-inner{max-width:1270px;margin:0 auto}
.zone-page h1{color:#fff !important;font-size:clamp(32px,4.2vw,56px) !important;margin:0 0 18px !important;max-width:900px}
.zone-page-intro{color:#F2FAFF !important;font-size:19px !important;line-height:1.65 !important;max-width:760px !important;margin:0 0 30px !important}
.zone-page-empty{background:#fff;border-radius:24px;padding:28px 30px;color:var(--s-text) !important;box-shadow:0 20px 50px rgba(15,53,85,.12);max-width:760px !important;margin:0 0 20px !important}
.zone-page-call{background:#fff !important;color:var(--s-blue) !important;box-shadow:0 12px 28px rgba(15,53,85,.18)}
.zone-articles{gap:28px !important;margin-top:24px}
.zone-articles .article-card{background:#fff !important;border-radius:28px !important;overflow:hidden;box-shadow:0 20px 50px rgba(15,53,85,.12) !important;border:0 !important;transition:transform .3s,box-shadow .3s}
.zone-articles .article-card:hover{transform:translateY(-6px);box-shadow:0 28px 60px rgba(15,53,85,.18) !important}
.zone-articles .article-image img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.zone-articles .article-content{padding:22px 24px 26px !important}
.zone-articles .article-date{color:var(--s-green-d) !important;font-family:Montserrat,sans-serif}
.zone-articles .article-content h2{font-family:Montserrat,sans-serif !important;font-weight:800 !important;color:var(--s-navy) !important;font-size:19px !important}
.zone-articles .article-link{color:var(--s-blue) !important;font-family:Montserrat,sans-serif;font-weight:700}

/* Zones, Devis et 404 : tout le bloc est bleu (le texte blanc ne peut jamais déborder sur le gris),
   la vague verte ferme le bloc, puis une bande gris clair avant le pied de page */
.zone-page,#devis-sahp,.page-404{
  background:
    var(--s-wave) left 0 bottom 90px / 100% 46px no-repeat,
    var(--s-goutte) right -90px bottom 70px / 380px auto no-repeat,
    var(--s-grad) left top / 100% calc(100% - 90px) no-repeat,
    var(--s-bg) !important;
  padding-bottom:190px !important;
}
@media (max-width:760px){
  .zone-page,#devis-sahp,.page-404{
    background:
      var(--s-wave) left 0 bottom 60px / 100% 34px no-repeat,
      var(--s-grad) left top / 100% calc(100% - 60px) no-repeat,
      var(--s-bg) !important;
    padding-bottom:130px !important;
  }
}

/* ---------- 12. Devis ---------- */
#devis-sahp{color:#fff}
.devis-header h1{font-size:clamp(32px,4vw,52px) !important;color:#fff !important}
.devis-badge{background:rgba(255,255,255,.18) !important;border:0 !important;border-radius:32px !important}
.devis-subtitle{color:#F2FAFF !important;font-size:18px !important}
.devis-grid{gap:28px !important}
.devis-form{background:#fff !important;border:0 !important;border-radius:28px !important;box-shadow:0 30px 80px rgba(15,53,85,.22) !important;backdrop-filter:none !important;color:var(--s-text) !important}
.devis-form h2{color:var(--s-navy) !important;font-family:Montserrat,sans-serif !important}
.devis-form h2 span{color:var(--s-green-d) !important;opacity:1 !important}
.devis-form input,.devis-form select,.devis-form textarea{background:var(--s-bg) !important;border:2px solid transparent !important;border-radius:16px !important;color:var(--s-text) !important}
.devis-form input:focus,.devis-form select:focus,.devis-form textarea:focus{border-color:var(--s-blue) !important;box-shadow:0 0 0 4px rgba(0,105,208,.12) !important;background:#fff !important}
.devis-form button[type=submit]{background:var(--s-blue) !important;color:#fff !important;border:0 !important;border-radius:32px !important;min-height:56px;font-family:Montserrat,sans-serif !important;font-weight:800 !important;font-size:17px !important;box-shadow:0 14px 30px rgba(0,105,208,.3) !important;cursor:pointer}
.devis-form-reassure{color:var(--s-soft) !important}
.sahp-hp,.devis-form label:has(input[name="website"]){position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden}
.devis-call{background:linear-gradient(90deg,#4C9A08 0%,#73C70F 100%) !important;border:0 !important;border-radius:28px !important;box-shadow:0 30px 80px rgba(40,80,5,.25) !important;color:#fff !important}
.devis-call-badge{background:rgba(255,255,255,.2) !important;color:#fff !important;border-radius:32px !important}
.devis-call h3{color:#fff !important;font-family:Montserrat,sans-serif !important;font-weight:800 !important}
.devis-call p,.call-note,.devis-call-points li{color:#F3FBEA !important}
.call-phone{color:#fff !important;font-family:Montserrat,sans-serif !important;font-weight:800 !important;white-space:nowrap}
.devis-call-check{background:#fff !important;color:var(--s-green-d) !important}
.devis-trust li{color:#fff !important}
.devis-trust-icon{background:var(--s-green) !important;color:#fff !important}
@media (max-width:900px){.devis-grid{grid-template-columns:1fr !important}}
@media (max-width:760px){.vdm-cta-final{background:var(--s-grad) !important}}

/* ---------- 13. Plan du site / cookies ---------- */
.legal-container.sitemap ul ul > li::before{width:8px;height:8px;top:19px;left:10px;background:var(--s-blue)}
.sitemap h2{color:var(--s-navy) !important}
.cookie-page__panel{background:var(--s-bg) !important;border:0 !important;border-radius:20px !important}

/* ---------- 14. Page 404 ---------- */
.page-404{min-height:auto !important;color:#fff}
.page-404 h1{font-size:clamp(46px,7vw,84px) !important;text-shadow:none !important;color:#fff !important}
.page-404 .subtitle{color:#F2FAFF !important;font-size:20px !important}
.illustration-container{background:#fff !important;border-radius:28px !important;box-shadow:0 30px 80px rgba(15,53,85,.22) !important;backdrop-filter:none !important}
.btn-home{background:var(--s-green) !important;color:#fff !important;box-shadow:0 14px 30px rgba(76,154,8,.3) !important;text-decoration:none !important}
.page-404 .divider{background:var(--s-line) !important;opacity:1}
.page-404 .contact-card,.page-404 .zone-card{background:#fff !important;border:0 !important;border-radius:28px !important;box-shadow:0 20px 50px rgba(15,53,85,.12) !important;color:var(--s-text) !important;backdrop-filter:none !important}
.page-404 .contact-card h2,.page-404 .zone-card h2{color:var(--s-navy) !important;font-family:Montserrat,sans-serif !important;font-weight:800 !important}
.page-404 .contact-line,.page-404 .contact-line a,.page-404 .contact-line strong{color:var(--s-text) !important}
.page-404 .contact-line .icon{background:var(--s-bg) !important;color:var(--s-blue) !important;border-radius:12px}
.page-404 .zone-map img{border-radius:20px}

/* ---------- 15. Accessibilité ---------- */
@media (prefers-reduced-motion:reduce){
  .vdm-btn,.pricing-btn,.zone-page-call,.btn-home,.zone-articles .article-card{transition:none !important}
}