/* ============================================================
   E.C.P. Eric Colombero Peinture — CSS global du site statique
   Source : CSS global custom du site GHL live (ecpeinture.com),
   modules 1-21 du skill ghl-site-artisan (= PARTIE 5 de
   ECP-DEPLOYMENT.md, version à jour du site en production)
   + CSS du header global (ECP-block-header.md), adapté hors GHL.
   ============================================================ */

/* --- 0. Base minimale (remplace le reset injecté par GHL) --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; padding: 0; background: #FFFFFF; color: #1A1A1A; }
img { max-width: 100%; }

/* --- 0B. Équivalent propre du hack GHL « Section Margin Top -200 » ---
   Sur GHL, chaque page avait Section Settings → Margin Top -200px pour
   faire passer le hero sous le header sticky flottant (spacer 116/96/80px).
   Ici : même géométrie, appliquée à la 1re section de chaque page. --- */
.hsa-first-section { margin-top: -200px; }

/* === 1. VARIABLES — palette + espacements + typographie ===============
   Couleurs principales : Custom Values existantes (colors__main, colors__secondary, background_alt).
   Variantes (dark/light) : calculées automatiquement via color-mix().
   Neutrals + polices : hardcoded design-system Helyon. */
:root {
  /* Couleurs de marque — pilotées par CV existantes */
    --hsa-primary: #00B5D6;

--hsa-secondary: #e50a6e;

  /* Variantes calculées automatiquement depuis primary */
--hsa-primary-dark: color-mix(in srgb, var(--hsa-primary) 75%, black);
  --hsa-primary-light: color-mix(in srgb, var(--hsa-primary) 15%, white);

  /* Background alterné — CV existante */
  --hsa-bg-alt: #FAF6F0;

  /* Neutrals — design-system, identiques pour tous les clients */
--hsa-dark: #1A1A1A;
  --hsa-text-muted: #5C5C5C;
  --hsa-border: #E5E7EB;
  --hsa-white: #FFFFFF;

  /* Polices — design-system Helyon */
  --hsa-font-heading: 'Manrope', system-ui, sans-serif;
  --hsa-font-body: 'Inter', system-ui, sans-serif;

  /* Design system — constantes */
  --hsa-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --hsa-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
  --hsa-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.12);
  --hsa-radius-sm: 8px;
  --hsa-radius-md: 12px;
  --hsa-radius-lg: 20px;
  --hsa-radius-pill: 100px;
  --hsa-space-xs: 8px;
  --hsa-space-sm: 16px;
  --hsa-space-md: 24px;
  --hsa-space-lg: 48px;
  --hsa-space-xl: 80px;
  --hsa-space-2xl: 120px;
}

/* === 1B. OVERRIDE GLOBAL DES POLICES ================================== */
/* GHL Builder injecte ses propres font-family via des sélecteurs très    */
/* spécifiques ou inline. Sans cet override global, les fonts définies    */
/* dans les variables ne s'appliquent pas dans les sections (p, h3, etc.) */
/* On force explicitement les fonts sur TOUS les éléments structurels.   */

body,
p, li, a, span, div, blockquote,
ul, ol, dl, dd, dt,
td, th, caption,
label, input, textarea, select, button,
small, strong, em, b, i,
section, article, aside, header, footer, nav, main,
details, summary, figure, figcaption {
  font-family: var(--hsa-font-body), system-ui, -apple-system, sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--hsa-font-heading), system-ui, -apple-system, sans-serif !important;
}

/* Éléments avec font-heading malgré être structurellement non-titre */
.hsa-btn,
.hsa-header-phone,
.hsa-section-eyebrow,
.hsa-faq-question,
.hsa-footer-phone-big,
.hsa-process-number,
.hsa-process-cta,
.hsa-pricing-tier,
.hsa-method-step::before,
.hsa-mobile-sticky-cta a,
.hsa-service-card-link,
.hsa-hero-badge {
  font-family: var(--hsa-font-heading), system-ui, -apple-system, sans-serif !important;
}


/* === 1C. TAILLES DE POLICE GLOBALES — V2 montées d'un cran =============
   Base body à 20px (1.25rem), leads autour de 1.45rem (~23px) — aligné
   sur la baseline visuelle du menu header en 1.3rem. */

/* Base & paragraphes */
body {
font-size: 20px !important;
line-height: 1.7 !important;
}

p, li {
font-size: 20px !important;
line-height: 1.7 !important;
}

/* Titres — généreux et hiérarchisés.
   text-wrap: balance équilibre automatiquement les lignes pour éviter
   les coupes orphelines (ex : un seul mot sur la dernière ligne). */
h1, .h1 {
font-size: clamp(2.6rem, 6vw, 4.5rem) !important;
line-height: 1.1 !important;
letter-spacing: -0.02em !important;
text-wrap: balance !important;
}

h2, .h2 {
font-size: clamp(2.2rem, 4.8vw, 3.5rem) !important;
line-height: 1.15 !important;
margin-bottom: 28px !important;
letter-spacing: -0.02em !important;
text-wrap: balance !important;
}

h3, .h3 {
font-size: clamp(1.65rem, 2.4vw, 2rem) !important;
line-height: 1.3 !important;
letter-spacing: -0.01em !important;
text-wrap: balance !important;
}

h4, .h4 {
font-size: clamp(1.3rem, 1.7vw, 1.5rem) !important;
line-height: 1.35 !important;
text-wrap: balance !important;
}

h5 {
font-size: 1.2rem !important;
line-height: 1.4 !important;
}

h6 {
font-size: 1.1rem !important;
line-height: 1.4 !important;
}

/* Lead — sous-titre généreux */
.hsa-lead {
font-size: 1.45rem !important;
line-height: 1.6 !important;
color: var(--hsa-text-muted) !important;
}

/* Eyebrow */
.hsa-section-eyebrow {
font-size: 1.1rem !important;
}

/* Boutons */
.hsa-btn {
font-size: 18px !important;
padding: 20px 40px !important;
}

/* Header phone */
.hsa-header-phone {
font-size: 17px !important;
padding: 12px 18px !important;
}

/* Hero badge */
.hsa-hero-badge {
font-size: 15px !important;
padding: 8px 18px !important;
}

/* Trust bar — texte plus large, icônes maintenant à 36px (cf. module 5) */
.hsa-trust-item {
font-size: 17px !important;
line-height: 1.4 !important;
}

.hsa-trust-item strong {
font-size: 18px !important;
}

/* Service cards */
.hsa-service-card h3 {
font-size: 26px !important;
margin-bottom: 12px !important;
}

.hsa-service-card p {
font-size: 19px !important;
line-height: 1.65 !important;
}

.hsa-service-card-link {
font-size: 16px !important;
}

/* Why item */
.hsa-why-item h3 {
font-size: 22px !important;
margin-bottom: 10px !important;
}

.hsa-why-item p {
font-size: 19px !important;
line-height: 1.65 !important;
}

.hsa-why-item-icon {
width: 68px !important;
height: 68px !important;
}

.hsa-why-item-icon svg {
width: 34px !important;
height: 34px !important;
}

/* Process flow ("Comment ça marche") */
.hsa-process-number {
font-size: 32px !important;
width: 72px !important;
height: 72px !important;
}

.hsa-process-card h3 {
font-size: 26px !important;
margin-bottom: 14px !important;
}

.hsa-process-card p {
font-size: 19px !important;
line-height: 1.65 !important;
}

.hsa-process-cta {
font-size: 17px !important;
padding: 16px 32px !important;
}

/* Reviews */
.hsa-review-stars {
font-size: 24px !important;
letter-spacing: 3px !important;
}

.hsa-review-text {
font-size: 19px !important;
line-height: 1.7 !important;
}

.hsa-review-author {
font-size: 17px !important;
}

.hsa-review-meta {
font-size: 15px !important;
margin-top: 4px !important;
}

/* Zone — tags villes */
.hsa-zone-cities a {
font-size: 16px !important;
padding: 10px 20px !important;
}

/* FAQ */
.hsa-faq-question {
font-size: 21px !important;
padding: 28px !important;
}

.hsa-faq-answer {
font-size: 19px !important;
line-height: 1.7 !important;
padding: 0 28px 28px !important;
}

/* CTA Final */
.hsa-cta-final h2 {
font-size: clamp(2.4rem, 5.2vw, 3.8rem) !important;
}

.hsa-cta-final p {
font-size: 21px !important;
}

/* Footer */
.hsa-footer h4 {
font-size: 19px !important;
margin-bottom: 18px !important;
}

.hsa-footer p, .hsa-footer a {
font-size: 17px !important;
line-height: 1.85 !important;
}

.hsa-footer-phone-big {
font-size: 32px !important;
}

/* Pricing card */
.hsa-pricing-tier {
font-size: 44px !important;
}

.hsa-pricing-disclaimer {
font-size: 16px !important;
}

/* Method step (pages services) */
.hsa-method-step h3 {
font-size: 21px !important;
}

.hsa-method-step::before {
width: 48px !important;
height: 48px !important;
font-size: 22px !important;
}

/* Sticky CTA mobile */
.hsa-mobile-sticky-cta a {
font-size: 17px !important;
padding: 18px !important;
}

/* City tags */
.hsa-city-quartier-tag {
font-size: 16px !important;
padding: 12px 20px !important;
}

.hsa-city-postal-code {
font-size: 15px !important;
padding: 6px 14px !important;
}

/* Breadcrumb */
.hsa-breadcrumb {
font-size: 15px !important;
}


/* === 2. BOUTONS === */
.hsa-btn {
display: inline-flex !important;
align-items: center;
gap: var(--hsa-space-xs);
border-radius: var(--hsa-radius-md);
font-family: var(--hsa-font-heading);
font-size: 1.3rem !important;
font-weight: 700;
text-decoration: none !important;
border: 2px solid transparent;
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
line-height: 1.2;
}
/* font-size + padding définis dans le bloc 1C (Tailles globales) */
.hsa-btn-primary {
background: var(--hsa-primary) !important;
color: var(--hsa-white) !important;
}

.hsa-btn-primary:hover {
background: var(--hsa-primary-dark) !important;
transform: translateY(-2px);
box-shadow: var(--hsa-shadow-md);
color: var(--hsa-white) !important;
}

.hsa-btn-outline {
background: transparent !important;
color: var(--hsa-dark) !important;
border-color: var(--hsa-dark) !important;
}

.hsa-btn-outline:hover {
background: var(--hsa-dark) !important;
color: var(--hsa-white) !important;
}

.hsa-btn-tel {
background: var(--hsa-secondary) !important;
color: var(--hsa-white) !important;
}

.hsa-btn-tel:hover {
background: var(--hsa-dark) !important;
color: var(--hsa-white) !important;
transform: translateY(-2px);
}

.hsa-btn-white {
background: var(--hsa-white) !important;
color: var(--hsa-primary-dark) !important;
}

.hsa-btn-white:hover {
background: var(--hsa-bg-alt) !important;
color: var(--hsa-primary-dark) !important;
}

/* === 3. HEADER === */
.hsa-header-phone {
display: inline-flex !important;
align-items: center;
gap: 6px;
font-family: var(--hsa-font-heading);
font-weight: 700;
color: var(--hsa-dark) !important;
border-radius: var(--hsa-radius-sm);
background: var(--hsa-bg-alt);
text-decoration: none !important;
transition: all 0.2s ease;
}

.hsa-header-phone:hover {
background: var(--hsa-primary) !important;
color: var(--hsa-white) !important;
}

/* === 4. HERO === */
.hsa-hero {
background: linear-gradient(135deg, var(--hsa-bg-alt) 0%, var(--hsa-white) 100%);
}

.hsa-hero-badge {
display: inline-block;
background: var(--hsa-primary-light) !important;
color: var(--hsa-primary-dark) !important;
border-radius: var(--hsa-radius-pill);
font-weight: 700;
letter-spacing: 0.02em;
font-family: var(--hsa-font-body);
}

.hsa-hero-content {
background: var(--hsa-white);
padding: var(--hsa-space-lg);
border-radius: var(--hsa-radius-lg);
box-shadow: var(--hsa-shadow-md);
}

.hsa-hero-form-wrapper {
background: var(--hsa-white);
padding: var(--hsa-space-md);
border-radius: var(--hsa-radius-lg);
box-shadow: var(--hsa-shadow-lg);
}

/* === 5. BANDEAU CONFIANCE === */
.hsa-trust-bar {
background: var(--hsa-primary-dark) !important;
color: var(--hsa-white) !important;
padding: var(--hsa-space-lg) 0;
}

.hsa-trust-bar * {
color: var(--hsa-white);
}

.hsa-trust-item {
display: flex !important;
align-items: center;
gap: 14px;
}

.hsa-trust-item strong {
color: var(--hsa-white) !important;
font-weight: 800;
}

.hsa-trust-item svg, .hsa-trust-item .icon {
color: var(--hsa-white) !important;
flex: 0 0 36px;
width: 36px;
height: 36px;
stroke-width: 2 !important;
}

/* === 6. SECTIONS UTILITAIRES === */
.hsa-section-alt {
background: var(--hsa-bg-alt) !important;
}

.hsa-section-dark {
background: var(--hsa-dark) !important;
color: var(--hsa-white) !important;
}

.hsa-section-dark h1, .hsa-section-dark h2, .hsa-section-dark h3, .hsa-section-dark h4 {
color: var(--hsa-white) !important;
}

.hsa-section-dark p {
color: rgba(255, 255, 255, 0.85) !important;
}

.hsa-section-eyebrow {
display: inline-block;
font-family: var(--hsa-font-heading);
font-weight: 700;
color: var(--hsa-primary) !important;
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: var(--hsa-space-sm);
}

.hsa-lead {
color: var(--hsa-text-muted) !important;
}

/* === 7. SERVICE CARDS === */
.hsa-service-card {
background: var(--hsa-white) !important;
border-radius: var(--hsa-radius-lg) !important;
overflow: hidden;
box-shadow: var(--hsa-shadow-sm);
transition: all 0.3s ease;
display: flex !important;
flex-direction: column;
text-decoration: none !important;
color: var(--hsa-dark) !important;
height: 100%;
}

.hsa-service-card:hover {
transform: translateY(-4px);
box-shadow: var(--hsa-shadow-lg) !important;
color: var(--hsa-dark) !important;
}

.hsa-service-card-image {
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--hsa-bg-alt);
}

.hsa-service-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}

.hsa-service-card:hover .hsa-service-card-image img {
transform: scale(1.05);
}

.hsa-service-card-body {
padding: var(--hsa-space-md);
flex: 1;
display: flex;
flex-direction: column;
}

.hsa-service-card h3 {
color: var(--hsa-dark) !important;
}

.hsa-service-card p {
color: var(--hsa-text-muted) !important;
flex: 1;
}

.hsa-service-card-link {
display: inline-flex !important;
align-items: center;
gap: 6px;
margin-top: var(--hsa-space-sm);
color: var(--hsa-primary) !important;
font-weight: 700;
}

/* === 8. POURQUOI NOUS === */
.hsa-why-item {
padding: var(--hsa-space-md);
}

.hsa-why-item-icon {
border-radius: var(--hsa-radius-md);
background: var(--hsa-primary-light) !important;
color: var(--hsa-primary) !important;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--hsa-space-sm);
}

.hsa-why-item-icon svg {
color: var(--hsa-primary) !important;
}
/* width/height des icônes + font-size des h3/p définis dans le bloc 1C */

/* === 9. GALERIE === */
.hsa-gallery-item {
aspect-ratio: 1 / 1;
border-radius: var(--hsa-radius-md);
overflow: hidden;
background: var(--hsa-bg-alt);
}

.hsa-gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}

.hsa-gallery-item:hover img {
transform: scale(1.08);
}

/* === 10. AVIS === */
.hsa-review-card {
background: var(--hsa-white) !important;
padding: 28px;
border-radius: 16px;
box-shadow: var(--hsa-shadow-sm);
}

.hsa-review-stars {
color: #FBBF24;
margin-bottom: 12px;
}

.hsa-review-text {
color: var(--hsa-dark) !important;
margin-bottom: var(--hsa-space-sm);
}

.hsa-review-author {
font-weight: 700;
color: var(--hsa-dark) !important;
}

.hsa-review-meta {
color: var(--hsa-text-muted) !important;
}

/* === 11. ZONE D'INTERVENTION — pilules villes avec icône pin + hover lift === */
.hsa-zone-cities {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  justify-content: center;
  max-width: 1100px;
  margin: 0 auto;
}

.hsa-zone-cities a,
.hsa-zone-cities span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 26px 12px 22px;
  background: var(--hsa-white) !important;
  border: 1px solid var(--hsa-border);
  border-radius: var(--hsa-radius-pill);
  font-size: 17px;
  font-weight: 600;
  color: var(--hsa-dark) !important;
  text-decoration: none !important;
  box-shadow: 0 1px 3px rgba(15, 37, 48, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Mobile : taille un peu réduite pour respecter le viewport */
@media (max-width: 600px) {
  .hsa-zone-cities a,
  .hsa-zone-cities span {
    font-size: 15px;
    padding: 10px 20px 10px 16px;
    gap: 8px;
  }
}

/* Mini pin SVG en couleur primary avant chaque ville (data URI inline, pas de HTTP) */
.hsa-zone-cities a::before,
.hsa-zone-cities span::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300B5D6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/><circle cx='12' cy='10' r='3'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
  transition: filter 0.2s ease;
}

@media (max-width: 600px) {
  .hsa-zone-cities a::before,
  .hsa-zone-cities span::before {
    width: 14px;
    height: 14px;
  }
}

/* Hover : lift + ombre turquoise + bordure primary + pin devient blanc */
.hsa-zone-cities a:hover,
.hsa-zone-cities span:hover {
  background: var(--hsa-primary) !important;
  color: var(--hsa-white) !important;
  border-color: var(--hsa-primary) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 181, 214, 0.22);
}

.hsa-zone-cities a:hover::before,
.hsa-zone-cities span:hover::before {
  /* Inversion couleur SVG pour passer en blanc au hover */
  filter: brightness(0) invert(1);
}

/* Pas de cursor pointer sur les span (non cliquables), mais pointer sur les a */
.hsa-zone-cities span { cursor: default; }
.hsa-zone-cities a { cursor: pointer; }

/* Masquer les span vides quand certaines biz_area_N ne sont pas remplies */
.hsa-zone-cities span:empty { display: none !important; }

/* === 12. FAQ === */
.hsa-faq-item {
  background: var(--hsa-white) !important;
  border: 1px solid var(--hsa-border);
  border-radius: var(--hsa-radius-md);
  margin-bottom: var(--hsa-space-sm);
  overflow: hidden;
}
.hsa-faq-question {
  cursor: pointer;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  font-family: var(--hsa-font-heading);
  font-weight: 700;
  color: var(--hsa-dark) !important;
  list-style: none;
}
.hsa-faq-question::-webkit-details-marker { display: none; }
.hsa-faq-question::after {
  content: '+';
  font-size: 24px;
  color: var(--hsa-primary) !important;
  transition: transform 0.2s ease;
  font-weight: 400;
  margin-left: auto;
}
.hsa-faq-item[open] .hsa-faq-question::after { transform: rotate(45deg); }
.hsa-faq-answer { color: var(--hsa-text-muted) !important; }

/* === 13. CTA FINAL === */
.hsa-cta-final {
  background: linear-gradient(135deg, var(--hsa-primary) 0%, var(--hsa-primary-dark) 100%) !important;
  color: var(--hsa-white) !important;
  text-align: center;
}
.hsa-cta-final h1, .hsa-cta-final h2, .hsa-cta-final h3, .hsa-cta-final p { color: var(--hsa-white) !important; }
.hsa-cta-final p { opacity: 0.95; }
.hsa-cta-final .hsa-btn-primary { background: var(--hsa-white) !important; color: var(--hsa-primary-dark) !important; }
.hsa-cta-final .hsa-btn-primary:hover { background: var(--hsa-bg-alt) !important; color: var(--hsa-primary-dark) !important; }
.hsa-cta-final .hsa-btn-tel { background: rgba(255, 255, 255, 0.15) !important; color: var(--hsa-white) !important; border-color: var(--hsa-white) !important; }
.hsa-cta-final .hsa-btn-tel:hover { background: var(--hsa-white) !important; color: var(--hsa-primary-dark) !important; }

/* === 14. FOOTER (fond ivoire, texte sombre, tailles confort) === */
.hsa-footer {
  background: var(--hsa-bg-alt) !important;
  color: var(--hsa-text) !important;
  border-top: 1px solid var(--hsa-border);
}

.hsa-footer h1, .hsa-footer h2, .hsa-footer h3, .hsa-footer h4 {
  color: var(--hsa-dark) !important;
  font-weight: 700 !important;
  font-size: 19px !important;
  margin-bottom: 18px !important;
  letter-spacing: -0.01em;
}

.hsa-footer p {
  color: var(--hsa-text) !important;
  font-size: 17px !important;
  line-height: 1.7 !important;
  margin-bottom: 14px !important;
}

.hsa-footer a {
  color: var(--hsa-text) !important;
  text-decoration: none !important;
  font-size: 17px !important;
  line-height: 1.8;
  transition: color 0.2s ease;
}

.hsa-footer a:hover { color: var(--hsa-primary) !important; }

.hsa-footer strong { color: var(--hsa-dark) !important; font-weight: 700; }

/* Téléphone "gros" très visible */
.hsa-footer-phone-big {
  font-family: var(--hsa-font-heading);
  font-size: 26px !important;
  font-weight: 800 !important;
  color: var(--hsa-primary) !important;
  display: inline-block;
  margin-bottom: var(--hsa-space-sm);
  text-decoration: none !important;
  letter-spacing: -0.01em;
}

.hsa-footer-phone-big:hover { color: var(--hsa-primary-dark) !important; }

/* Footer copyright bottom — un cran plus discret */
.hsa-footer .hsa-footer-bottom,
.hsa-footer > div > div:last-child {
  font-size: 14px !important;
  color: var(--hsa-text-muted) !important;
}

/* Bordure de séparation de la barre copyright */
.hsa-footer [style*="border-top"] {
  border-color: var(--hsa-border) !important;
}

/* Zone d'intervention dans le footer : pilules compactes inline */
.hsa-footer-zones {
display: flex;
flex-wrap: wrap;
gap: 6px 8px;
}

.hsa-footer-zones a {
display: inline-block;
padding: 6px 14px;
background: var(--hsa-white);
border: 1px solid var(--hsa-border);
border-radius: var(--hsa-radius-pill);
font-size: 14px !important;
line-height: 1.3;
color: var(--hsa-text) !important;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.hsa-footer-zones a:hover {
background: var(--hsa-primary) !important;
color: var(--hsa-white) !important;
border-color: var(--hsa-primary) !important;
}

/* === 15. STICKY CTA MOBILE === */
.hsa-mobile-sticky-cta {
display: none;
}

@media (max-width: 768px) {
.hsa-mobile-sticky-cta {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    display: none;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
    z-index: 999 !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    margin: 0 !important;
}

.hsa-mobile-sticky-cta.hsa-visible {
    display: grid !important;
}

.hsa-mobile-sticky-cta a {
    text-align: center !important;
    font-weight: 700;
    text-decoration: none !important;
    font-family: var(--hsa-font-heading);
}

.hsa-mobile-sticky-cta .hsa-cta-quote {
    background: var(--hsa-primary) !important;
    color: var(--hsa-white) !important;
}

.hsa-mobile-sticky-cta .hsa-cta-call {
    background: var(--hsa-dark) !important;
    color: var(--hsa-white) !important;
}

body {
    padding-bottom: 60px !important;
}
}

/* === 16. BREADCRUMB === */
.hsa-breadcrumb {
    color: var(--hsa-text-muted) !important;
    padding: var(--hsa-space-sm) 0;
}

.hsa-breadcrumb a {
    color: var(--hsa-text-muted) !important;
    text-decoration: none;
}

.hsa-breadcrumb a:hover {
    color: var(--hsa-primary) !important;
}

.hsa-breadcrumb .hsa-separator {
    margin: 0 8px;
    opacity: 0.5;
}

/* === 17. PRICING CARD === */
.hsa-pricing-card {
    background: var(--hsa-white) !important;
    border: 2px solid var(--hsa-border);
    border-radius: 16px;
    padding: 32px;
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

.hsa-pricing-tier {
    display: inline-block;
    font-family: var(--hsa-font-heading);
    font-weight: 800;
    color: var(--hsa-primary) !important;
    margin: var(--hsa-space-sm) 0;
}

.hsa-pricing-disclaimer {
    color: var(--hsa-text-muted) !important;
    margin-top: var(--hsa-space-sm);
    font-style: italic;
}

/* === 18. PROCESS / MÉTHODE 4 ÉTAPES === */
.hsa-method-step {
    background: var(--hsa-white) !important;
    padding: 32px 24px;
    border-radius: var(--hsa-radius-md);
    box-shadow: var(--hsa-shadow-sm);
    position: relative;
    counter-increment: hsa-step;
}

.hsa-method-list {
    counter-reset: hsa-step;
}

.hsa-method-step::before {
    content: counter(hsa-step);
    position: absolute;
    top: -16px;
    left: 24px;
    background: var(--hsa-primary) !important;
    color: var(--hsa-white) !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-family: var(--hsa-font-heading);
}

.hsa-method-step h3 {
    margin-top: var(--hsa-space-sm);
}

/* === 19. CITY PAGE === */
.hsa-city-quartier-tag {
    background: var(--hsa-bg-alt) !important;
    border-radius: var(--hsa-radius-sm);
    font-weight: 600;
    color: var(--hsa-dark) !important;
    text-align: center;
    display: inline-block;
    margin: 4px;
}

.hsa-city-postal-code {
    background: var(--hsa-white) !important;
    border: 1px solid var(--hsa-border);
    border-radius: var(--hsa-radius-pill);
    font-weight: 600;
    display: inline-block;
    margin: 4px;
}

/* === CONTAINER UTILITAIRE — limite la largeur + centre sur grand écran ===
   À enrober autour de TOUT contenu de Custom HTML element pour que le
   contenu reste centré (max 1500px) quel que soit l'écran.
   Les Sections GHL natives peuvent rester en "Full Width" pour que le
   fond (Trust Bar noir, CTA Final magenta, etc.) prenne toute la largeur,
   seul le contenu interne est limité à 1500px et centré.

   IMPORTANT : les !important sont obligatoires pour battre les éventuels
   styles inline GHL Builder. */
.hsa-container {
  width: 100% !important;
  max-width: 1500px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
}

@media (min-width: 768px) {
  .hsa-container {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}

/* Pour les sections où on veut un container plus étroit (FAQ, blocs SEO texte long) */
.hsa-container-narrow {
  width: 100% !important;
  max-width: 900px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
}

/* Utilities texte — pour réutiliser une CV avec une casse différente sans dupliquer */
.hsa-lower { text-transform: lowercase !important; }
.hsa-upper { text-transform: uppercase !important; }
.hsa-capitalize { text-transform: capitalize !important; }

/* === 20. PROCESS / "COMMENT ÇA MARCHE" — flow visuel === */
.hsa-process-list {
  display: grid;
  gap: 64px;
  grid-template-columns: 1fr;
  position: relative;
  max-width: 1500px;
  margin: 0 auto;
  padding-top: 32px;
}

@media (min-width: 768px) {
  .hsa-process-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
  }
  /* Ligne pointillée connectrice entre les cards (desktop only) */
  .hsa-process-list::before {
    content: '';
    position: absolute;
    top: 60px;
    left: 16%;
    right: 16%;
    height: 2px;
    background-image: linear-gradient(to right, var(--hsa-primary) 50%, transparent 50%);
    background-size: 16px 2px;
    background-repeat: repeat-x;
    z-index: 0;
    opacity: 0.4;
  }
}

.hsa-process-card {
  background: var(--hsa-white) !important;
  padding: 26px 20px 40px;
  border-radius: var(--hsa-radius-lg);
  box-shadow: var(--hsa-shadow-sm);
  position: relative;
  text-align: center;
  z-index: 1;
  transition: all 0.3s ease;
  border: 1px solid var(--hsa-border);
}

.hsa-process-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--hsa-shadow-lg) !important;
  border-color: transparent;
}

.hsa-process-number {
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--hsa-primary) 0%, var(--hsa-primary-dark) 100%) !important;
  color: var(--hsa-white) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--hsa-font-heading);
  font-weight: 800;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--hsa-primary-dark) 35%, transparent);
  z-index: 2;
}

.hsa-process-icon {
  width: 340px;
  height: 340px;
  margin: 0px auto 24px;
  border-radius: var(--hsa-radius-lg);
  overflow: hidden;
  position: relative;
  box-shadow: var(--hsa-shadow-sm);
}

.hsa-process-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.hsa-process-card:hover .hsa-process-icon img {
  transform: scale(1.05);
}

/* Bandeau garantie post-chantier (sous les 3 cartes process) */
.hsa-process-warranty {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 24px 48px;
  margin-top: 56px;
  padding: 28px 40px;
  background: var(--hsa-bg-alt);
  border-radius: var(--hsa-radius-md);
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

.hsa-process-warranty span {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  font-family: var(--hsa-font-body);
  font-size: 1.4rem;
  color: var(--hsa-dark) !important;
  line-height: 1.4;
  font-weight: 700;
}

.hsa-process-warranty svg {
  flex: 0 0 32px;
  width: 32px !important;
  height: 32px !important;
  color: var(--hsa-primary) !important;
}

.hsa-process-card h3 {
  color: var(--hsa-dark) !important;
}

.hsa-process-card p {
  color: var(--hsa-text-muted) !important;
  margin-bottom: 24px;
}

/* Bouton CTA solide — fond plein turquoise, padding généreux */
.hsa-process-cta,
button.hsa-process-cta {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--hsa-primary) !important;
  color: var(--hsa-white) !important;
  border: none !important;
  border-radius: var(--hsa-radius-md);
  font-family: var(--hsa-font-heading);
font-size: 1.3rem !important;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none !important;
  transition: all 0.2s ease;
  margin-top: 8px;
}

.hsa-process-cta:hover,
button.hsa-process-cta:hover {
  background: var(--hsa-primary-dark) !important;
  color: var(--hsa-white) !important;
  transform: translateY(-2px);
  box-shadow: var(--hsa-shadow-md);
}

/* Flèche SVG qui glisse au hover */
.hsa-process-cta svg,
button.hsa-process-cta svg {
  transition: transform 0.2s ease;
}
.hsa-process-cta:hover svg,
button.hsa-process-cta:hover svg {
  transform: translateX(4px);
}

/* === 21. PAGE SERVICE — styles spécifiques === */

/* Hero de page service (breadcrumb intégré, padding-top élevé pour overlay header sticky) */
.hsa-svc-hero {
  min-height: auto !important;
  padding: 260px 0 80px !important;
}

/* Mobile : header plus bas, padding-top réduit */
@media (max-width:767px){
  .hsa-svc-hero { padding: 120px 0 56px !important; }
}

.hsa-svc-hero .hsa-hero-content {
  max-width: 800px;
  margin: 0 auto;
}

.hsa-svc-hero .hsa-breadcrumb {
  margin-bottom: 24px;
  padding: 0;
}

/* Liste des prestations (Notre savoir-faire) */
.hsa-offers-list {
  list-style: none;
  padding: 0;
  margin: 24px 0 !important;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 768px) {
  .hsa-offers-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

.hsa-offers-list li {
  position: relative;
  padding: 14px 18px 14px 44px;
  background: var(--hsa-bg-alt);
  border-radius: var(--hsa-radius-md);
  font-size: 17px !important;
  line-height: 1.5 !important;
}

.hsa-offers-list li::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300B5D6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
}

/* Pourquoi nous spécifique au service (4 différenciateurs en 2x2) */
.hsa-svc-why-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  max-width: 1100px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .hsa-svc-why-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.hsa-svc-why-item {
  background: var(--hsa-white);
  padding: 32px;
  border-radius: var(--hsa-radius-lg);
  box-shadow: var(--hsa-shadow-sm);
  border: 1px solid var(--hsa-border);
}

.hsa-svc-why-item h3 {
  color: var(--hsa-primary) !important;
  margin-bottom: 12px;
}

/* Section Notre savoir-faire — paragraphes denses */
.hsa-svc-content p {
  margin-bottom: 20px !important;
  font-size: 18px !important;
  line-height: 1.7 !important;
}

.hsa-svc-content p strong {
  color: var(--hsa-dark) !important;
  font-weight: 700;
}

.hsa-svc-content h3 {
  margin-bottom: 16px !important;
  margin-top: 48px !important;
}

/* === SAVOIR-FAIRE — Grille de cards prestations V2 (style premium) === */
.hsa-svc-features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  max-width: 1300px;
  margin: 0 auto 64px;
}

@media (min-width: 600px) {
  .hsa-svc-features-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .hsa-svc-features-grid { grid-template-columns: repeat(4, 1fr); gap: 22px; }
}

.hsa-svc-feature-card {
  position: relative;
  background: var(--hsa-white);
  border: 1px solid var(--hsa-border);
  border-radius: var(--hsa-radius-lg);
  padding: 36px 30px;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

/* Mini accent bar en haut de chaque card, primary, qui grandit au hover */
.hsa-svc-feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--hsa-primary);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s ease;
}

.hsa-svc-feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0, 181, 214, 0.12);
  border-color: color-mix(in srgb, var(--hsa-primary) 45%, transparent);
}

.hsa-svc-feature-card:hover::before {
  transform: scaleX(1);
}

/* Badge icône : plus grand, plus pro, gradient subtil */
.hsa-svc-feature-card-icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--hsa-primary) 12%, transparent) 0%,
    color-mix(in srgb, var(--hsa-primary) 18%, transparent) 100%);
  color: var(--hsa-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  transition: background 0.25s ease, transform 0.25s ease;
}

/* Au hover : badge devient primary plein, icône blanche, mini scale */
.hsa-svc-feature-card:hover .hsa-svc-feature-card-icon {
  background: var(--hsa-primary);
  color: var(--hsa-white);
  transform: scale(1.05);
}

.hsa-svc-feature-card-icon svg {
  width: 32px;
  height: 32px;
  transition: transform 0.25s ease;
}

.hsa-svc-feature-card h3 {
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  margin: 0 0 10px 0 !important;
  color: var(--hsa-dark) !important;
  letter-spacing: -0.01em;
}

.hsa-svc-feature-card p {
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: var(--hsa-text) !important;
  margin: 0 !important;
}

/* Mobile : padding un peu réduit mais on garde le confort de lecture */
@media (max-width: 600px) {
  .hsa-svc-feature-card { padding: 28px 24px; }
  .hsa-svc-feature-card-icon { width: 52px; height: 52px; }
  .hsa-svc-feature-card-icon svg { width: 28px; height: 28px; }
}

/* === SAVOIR-FAIRE — Layout 2 colonnes (texte expertise + photo+stats) === */
.hsa-svc-expertise-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto 72px;
  align-items: stretch; /* stretch pour que la colonne droite remplisse la hauteur de la colonne gauche */
}

@media (min-width: 980px) {
  .hsa-svc-expertise-grid {
    grid-template-columns: 1.5fr 1fr;
    gap: 64px;
  }
}

/* Colonne gauche : paragraphes expertise */
.hsa-svc-expertise-text {
  font-size: 17px;
  line-height: 1.7;
  color: var(--hsa-text);
}

.hsa-svc-expertise-text .hsa-lead {
  font-size: 22px !important;
  line-height: 1.4 !important;
  color: var(--hsa-dark) !important;
  font-weight: 500 !important;
  margin: 0 0 24px 0 !important;
}

.hsa-svc-expertise-text p {
  margin: 0 0 16px 0 !important;
}

.hsa-svc-expertise-text p:last-child {
  margin-bottom: 0 !important;
}

/* Colonne droite : wrapper photo + stats (stack vertical) */
.hsa-svc-expertise-right {
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
}

/* Photo de l'artisan en haut de la colonne droite */
.hsa-svc-expertise-image {
    flex: 1 1 auto;
    min-height: 240px;
    border-radius: var(--hsa-radius-lg);
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(15, 37, 48, 0.10);
    background: var(--hsa-bg-alt);
}

.hsa-svc-expertise-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

@media (max-width: 979px) {
  /* Tablet/mobile : limiter la hauteur de l'image pour rester équilibrée */
  .hsa-svc-expertise-image {
    aspect-ratio: 16/10;
    height: auto;
    min-height: 0;
  }
}

/* 3 cards "stat" sous la photo */
.hsa-svc-expertise-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  flex: 0 0 auto;
}

@media (max-width: 599px) {
  .hsa-svc-expertise-stats { gap: 12px; }
}

.hsa-svc-stat-card {
  background: var(--hsa-white);
  border: 1px solid var(--hsa-border);
  border-radius: var(--hsa-radius-md);
  padding: 20px 24px;
  border-left: 4px solid var(--hsa-primary);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hsa-svc-stat-card:hover {
  transform: translateX(4px);
  box-shadow: 0 8px 24px rgba(15, 37, 48, 0.06);
}

.hsa-svc-stat-value {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--hsa-dark);
  margin-bottom: 4px;
}

.hsa-svc-stat-label {
  font-size: 14px;
  line-height: 1.4;
  color: var(--hsa-text);
}

/* === MAILLAGE INTERNE — cartes compactes "thumbnails" === */
.hsa-svc-related-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(2, 1fr);
  max-width: 1300px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .hsa-svc-related-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .hsa-svc-related-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
  }
}

.hsa-svc-related-card {
  display: block;
  background: var(--hsa-white) !important;
  border-radius: var(--hsa-radius-lg);
  overflow: hidden;
  box-shadow: var(--hsa-shadow-sm);
  border: 1px solid var(--hsa-border);
  text-decoration: none !important;
  color: var(--hsa-dark) !important;
  transition: all 0.3s ease;
}

.hsa-svc-related-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--hsa-shadow-lg) !important;
  border-color: transparent;
  color: var(--hsa-dark) !important;
}

.hsa-svc-related-image {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--hsa-bg-alt);
}

.hsa-svc-related-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.hsa-svc-related-card:hover .hsa-svc-related-image img {
  transform: scale(1.05);
}

.hsa-svc-related-body {
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.hsa-svc-related-body h3 {
  font-size: 16px !important;
  margin: 0 !important;
  line-height: 1.3 !important;
  color: var(--hsa-dark) !important;
  flex: 1;
}

.hsa-svc-related-arrow {
  color: var(--hsa-primary) !important;
  font-weight: 700;
  font-size: 18px;
  flex: 0 0 auto;
  transition: transform 0.2s ease;
}

.hsa-svc-related-card:hover .hsa-svc-related-arrow {
  transform: translateX(4px);
}

/* CTA Final page service — fond ivoire, texte sombre, accents turquoise */
.hsa-svc-cta-final {
  background: var(--hsa-bg-alt) !important;
  padding: 80px 16px !important;
}

.hsa-svc-cta-grid {
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr;
  max-width: 1200px;
  margin: 0 auto;
  align-items: start;
}

@media (min-width: 980px) {
  .hsa-svc-cta-grid {
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
  }
}

/* Eyebrow turquoise au-dessus du H2 */
.hsa-svc-cta-eyebrow {
  display: inline-block;
  color: var(--hsa-primary) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 16px;
}

.hsa-svc-cta-text h2 {
  color: var(--hsa-dark) !important;
  margin-bottom: 20px !important;
}

.hsa-svc-cta-text p {
  color: var(--hsa-text) !important;
  font-size: 19px !important;
  line-height: 1.6 !important;
  margin-bottom: 28px !important;
}

/* Liste réassurance — checkmarks dans badges turquoise */
.hsa-svc-cta-reassurance {
  list-style: none;
  padding: 0;
  margin: 0 0 32px 0 !important;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 28px;
}

.hsa-svc-cta-reassurance li {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--hsa-dark) !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}

.hsa-svc-cta-check {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--hsa-primary);
  color: var(--hsa-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hsa-svc-cta-check svg {
  width: 16px;
  height: 16px;
}

/* === Variante bouton outline primary (turquoise / transparent) — réutilisable === */
.hsa-btn-outline-primary {
  background: transparent !important;
  color: var(--hsa-primary) !important;
  border: 2px solid var(--hsa-primary) !important;
  transition: background 0.2s ease, color 0.2s ease;
}

.hsa-btn-outline-primary svg {
  stroke: var(--hsa-primary);
  transition: stroke 0.2s ease;
}

.hsa-btn-outline-primary:hover,
.hsa-btn-outline-primary:focus {
  background: var(--hsa-primary) !important;
  color: var(--hsa-white) !important;
}

.hsa-btn-outline-primary:hover svg,
.hsa-btn-outline-primary:focus svg {
  stroke: var(--hsa-white);
}

/* Bouton tel du CTA Final — hérite de outline-primary + spacing spécifique */
.hsa-svc-cta-tel {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

/* Le form blanc sur fond ivoire — légère élévation pour le faire flotter */
.hsa-svc-cta-form {
  background: var(--hsa-white);
  border-radius: var(--hsa-radius-lg);
  padding: 8px;
  box-shadow: 0 20px 50px rgba(15, 37, 48, 0.12);
  border: 1px solid var(--hsa-border);
}

.hsa-svc-cta-form iframe {
  display: block;
  background: var(--hsa-white);
  border-radius: calc(var(--hsa-radius-lg) - 8px);
}

/* Mobile : 1 colonne, padding réduit + padding horizontal pour ne pas coller au bord */
@media (max-width: 767px) {
  .hsa-svc-cta-final { padding: 56px 5px !important; }
  .hsa-svc-cta-reassurance { grid-template-columns: 1fr; }
  .hsa-svc-cta-form { padding: 4px; }
}

/* ============================================================
   HEADER GLOBAL ECP (extrait de ECP-block-header.md)
   ============================================================ */

  /* ============================================================
     ECP — HEADER GLOBAL · v1.0
     Sticky · Mega-menu desktop · Burger mobile · 100% custom
     ============================================================ */

  /* Mapping sur les CSS vars globales du site (définies dans Custom CSS Head).
     Les fallbacks sont là en filet de sécurité mais en prod le var() global gagne. */
  .ecp-header,
  .ecp-mobile-menu,
  .ecp-mobile-sticky-cta {
    --ecp-primary:    var(--hsa-primary,    #E5097F);
    --ecp-secondary:  var(--hsa-secondary,  #20BDC6);
    --ecp-accent:     var(--hsa-accent,     #C3D54C);
    --ecp-bg:         var(--hsa-bg-alt,     #FAF7F0);
    --ecp-bg-95:      color-mix(in srgb, var(--hsa-bg-alt, #FAF7F0) 95%, transparent);
    --ecp-text:       var(--hsa-text,       #1A1A1A);
    --ecp-text-muted: var(--hsa-text-muted, rgba(26,26,26,0.65));
    --ecp-border:     var(--hsa-border,     rgba(26,26,26,0.08));
    --ecp-shadow-md:  0 2px 12px rgba(0,0,0,0.06);
    --ecp-shadow-lg:  0 12px 40px rgba(0,0,0,0.12);
    --ecp-radius-pill: 999px;
    --ecp-radius-md: 12px;
    --ecp-ease: cubic-bezier(0.4, 0, 0.2, 1);
  }

  .ecp-header * { box-sizing: border-box; margin: 0; padding: 0; }
  .ecp-header,
  .ecp-mobile-menu,
  .ecp-header *:not(svg):not(path):not(polyline):not(circle),
  .ecp-mobile-menu *:not(svg):not(path):not(polyline):not(circle) {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  }

  /* ===== Structure : Floating Card ===== */
  .ecp-header-wrapper {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 9999;
    padding: 20px 32px 0;
    pointer-events: none;
  }
  .ecp-header {
    pointer-events: auto;
    max-width: 1320px;
    margin: 0 auto;
    background: var(--ecp-bg);
    border-radius: 22px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
    transition: box-shadow 0.3s var(--ecp-ease), background 0.3s var(--ecp-ease);
  }
  .ecp-header.is-scrolled {
    box-shadow: 0 8px 32px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.05);
    background: var(--ecp-bg-95);
    backdrop-filter: blur(14px) saturate(1.1);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
  }
  .ecp-header-inner {
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
  }

  /* ===== Logo (container contraint pour ne jamais pousser le burger hors écran) ===== */
  .ecp-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
    height: 68px;
    max-width: 220px;
    overflow: hidden;
    font-size: 14px;
    font-weight: 700;
    color: var(--ecp-text);
    z-index: 2;
  }
  .ecp-logo img {
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    display: block;
  }

  /* ===== Nav Desktop ===== */
  .ecp-nav-desktop {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
    justify-content: center;
  }
  .ecp-nav-item { position: relative; }
  .ecp-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 18px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ecp-text);
    text-decoration: none;
    border-radius: var(--ecp-radius-md);
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s var(--ecp-ease), color 0.2s var(--ecp-ease);
    white-space: nowrap;
  }
  .ecp-nav-link:hover,
  .ecp-nav-link[aria-expanded="true"] {
    background: color-mix(in srgb, var(--ecp-primary) 10%, transparent);
    color: var(--ecp-primary);
  }
  .ecp-nav-chevron {
    width: 16px;
    height: 16px;
    transition: transform 0.2s var(--ecp-ease);
  }
  .ecp-nav-link[aria-expanded="true"] .ecp-nav-chevron {
    transform: rotate(180deg);
  }

  /* ===== Mega-menu ===== */
  .ecp-submenu {
    position: absolute;
    top: 100%;                  /* PAS DE GAP : le padding-top fait office de marge visuelle hoverable */
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    background: #FFFFFF;
    border-radius: 16px;
    box-shadow: var(--ecp-shadow-lg);
    padding: 14px;
    margin-top: 10px;           /* margin (collapsable hover-wise mais purement visuel) */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s var(--ecp-ease), transform 0.2s var(--ecp-ease), visibility 0.2s;
    list-style: none;
  }
  /* Pont invisible qui couvre l'espace entre trigger et menu pour ne jamais perdre le hover */
  .ecp-submenu::before {
    content: '';
    position: absolute;
    top: -14px;
    left: 0; right: 0;
    height: 14px;
    background: transparent;
  }
  .ecp-submenu.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
  .ecp-submenu-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: minmax(56px, auto);
    gap: 2px;
    min-width: 520px;
  }
  .ecp-submenu-link {
    display: flex;
    align-items: center;
    min-height: 56px;
    padding: 10px 16px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--ecp-text);
    text-decoration: none;
    border-radius: 10px;
    transition: background 0.15s var(--ecp-ease), color 0.15s var(--ecp-ease), transform 0.15s var(--ecp-ease);
  }
  .ecp-submenu-link:hover {
    background: var(--ecp-bg);
    color: var(--ecp-primary);
    transform: translateX(3px);
  }

  /* ===== CTA Tel ===== */
  .ecp-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    border: 2px solid var(--ecp-primary);
    border-radius: var(--ecp-radius-pill);
    background: transparent;
    color: var(--ecp-primary);
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s var(--ecp-ease), color 0.2s var(--ecp-ease), transform 0.2s var(--ecp-ease), box-shadow 0.2s var(--ecp-ease);
    flex-shrink: 0;
    line-height: 1;
    width: auto !important;
    height: auto !important;
    aspect-ratio: auto !important;
  }
  .ecp-cta:hover {
    background: var(--ecp-primary);
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--ecp-primary) 30%, transparent);
  }
  .ecp-cta-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }

  /* ===== Burger ===== */
  .ecp-burger {
    display: none;
    width: 44px;
    height: 44px;
    padding: 11px 10px;
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    z-index: 10000;
  }
  .ecp-burger-line {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--ecp-text);
    border-radius: 2px;
    transition: transform 0.3s var(--ecp-ease), opacity 0.3s var(--ecp-ease);
  }
  .ecp-burger[aria-expanded="true"] .ecp-burger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .ecp-burger[aria-expanded="true"] .ecp-burger-line:nth-child(2) { opacity: 0; }
  .ecp-burger[aria-expanded="true"] .ecp-burger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* ===== Mobile Menu Overlay ===== */
  .ecp-mobile-menu {
    position: fixed;
    inset: 0;
    background: var(--ecp-bg);
    z-index: 9998;
    padding: 96px 24px 40px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity 0.3s var(--ecp-ease), transform 0.3s var(--ecp-ease), visibility 0.3s;
  }
  .ecp-mobile-menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .ecp-mobile-nav {
    display: flex;
    flex-direction: column;
    max-width: 480px;
    margin: 0 auto;
    list-style: none;
  }
  .ecp-mobile-item {
    border-bottom: 1px solid var(--ecp-border);
  }
  .ecp-mobile-link,
  .ecp-mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 18px 8px;
    font-size: 17px;
    font-weight: 500;
    color: var(--ecp-text);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    line-height: 1.3;
  }
  .ecp-mobile-toggle .ecp-nav-chevron { width: 18px; height: 18px; }
  .ecp-mobile-toggle[aria-expanded="true"] .ecp-nav-chevron { transform: rotate(180deg); }
  .ecp-mobile-submenu {
    display: none;
    flex-direction: column;
    padding: 0 8px 16px 12px;
    gap: 2px;
    list-style: none;
  }
  .ecp-mobile-submenu.is-open { display: flex; }
  .ecp-mobile-sublink {
    padding: 12px 14px;
    font-size: 15px;
    color: var(--ecp-text-muted);
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.15s var(--ecp-ease), color 0.15s var(--ecp-ease);
  }
  .ecp-mobile-sublink:hover,
  .ecp-mobile-sublink:focus {
    background: color-mix(in srgb, var(--ecp-primary) 10%, transparent);
    color: var(--ecp-primary);
  }
  .ecp-mobile-cta {
    margin-top: 28px;
    width: 100%;
    justify-content: center;
    padding: 16px 24px;
    font-size: 16px;
  }

  /* ===== Spacer (compense fixed header floating card) ===== */
  .ecp-header-spacer { height: 116px; }

  /* ===== Focus visible ===== */
  .ecp-header :focus-visible,
  .ecp-mobile-menu :focus-visible {
    outline: 2px solid var(--ecp-primary);
    outline-offset: 2px;
    border-radius: 8px;
  }

  /* ===== Breakpoints ===== */
  @media (max-width: 1099px) {
    .ecp-nav-desktop { display: none; }
    .ecp-burger { display: flex; }
    .ecp-header-wrapper { padding: 14px 16px 0; }
    .ecp-header { border-radius: 18px; }
    .ecp-header-inner { padding: 10px 16px; gap: 10px; }
    .ecp-logo { height: 56px; max-width: 160px; }
    .ecp-header-spacer { height: 96px; }
    /* CTA reste visible mais plus compact */
    .ecp-header .ecp-cta {
      padding: 10px 18px;
      font-size: 14.5px;
      gap: 8px;
    }
    .ecp-cta-icon { width: 16px; height: 16px; }
  }
  @media (max-width: 600px) {
    .ecp-header-wrapper { padding: 10px 12px 0; }
    .ecp-header { border-radius: 16px; }
    .ecp-header-inner { padding: 8px 12px; gap: 8px; }
    .ecp-logo { height: 48px; max-width: 130px; }
    .ecp-header-spacer { height: 80px; }
    .ecp-mobile-menu { padding: 90px 20px 32px; }
    .ecp-mobile-link,
    .ecp-mobile-toggle { padding: 18px 8px; font-size: 17px; }
    /* CTA icon-only (label caché) pour gagner de la place */
    .ecp-header .ecp-cta {
      padding: 0 !important;
      width: 44px !important;
      height: 44px !important;
      gap: 0;
      justify-content: center;
      border-width: 2px;
    }
    .ecp-header .ecp-cta-label { display: none; }
    .ecp-header .ecp-cta-icon { width: 18px; height: 18px; }
  }

  /* ===== Body lock when menu open ===== */
  body.ecp-menu-open { overflow: hidden; }

  /* ===== Sticky CTA Mobile (apparaît après scroll, mobile uniquement) ===== */
  .ecp-mobile-sticky-cta {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 9997;
    display: none;
    gap: 10px;
    padding: 12px 14px calc(14px + env(safe-area-inset-bottom));
    background: var(--ecp-bg);
    border-top: 1px solid var(--ecp-border);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.10);
    transform: translateY(110%);
    transition: transform 0.35s var(--ecp-ease);
  }
  .ecp-mobile-sticky-cta.is-visible { transform: translateY(0); }

  .ecp-msc-quote,
  .ecp-msc-call {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 16px;
    font-size: 15.5px;
    font-weight: 700;
    text-decoration: none;
    border-radius: var(--ecp-radius-pill);
    transition: transform 0.15s var(--ecp-ease), box-shadow 0.2s var(--ecp-ease);
    line-height: 1;
    white-space: nowrap;
  }
  .ecp-msc-quote {
    background: var(--ecp-primary);
    color: #FFFFFF;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--ecp-primary) 30%, transparent);
  }
  .ecp-msc-call {
    background: var(--ecp-primary);
    color: #FFFFFF;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--ecp-primary) 30%, transparent);
  }
  .ecp-msc-quote:active,
  .ecp-msc-call:active { transform: scale(0.97); }
  .ecp-msc-call svg { width: 16px; height: 16px; }

  /* Mobile uniquement : afficher la sticky bar */
  @media (max-width: 767px) {
    .ecp-mobile-sticky-cta { display: flex; }
  }
  /* Si overlay menu mobile ouvert : cacher la sticky bar */
  body.ecp-menu-open .ecp-mobile-sticky-cta {
    transform: translateY(110%);
  }