/* ── SYSTÈME : les règles communes de l'accueil (tout est sous html.sys) ──
   Surfaces  : blanc, neutre, anthracite. Plus de bande menthe pleine largeur.
   Largeurs  : une seule colonne de 1140 px (1044 de texte), blocs larges alignés dessus.
   Rythme    : 110 px au-dessus et au-dessous de chaque section (72 sur mobile).
   Rayons    : 36 pour les grands blocs, 24 pour les cartes, 18 pour les petits éléments, pilule pour les boutons.
   Cartes    : fond blanc, filet de 1 px, pas d'ombre au repos ; au survol, liseré vert et halo.
   Boutons   : un seul bouton principal (vert vif, texte noir, lueur). */
html.sys{--s-large:1140px;--s-esp:110px;--s-r-bloc:36px;--s-r-carte:24px;--s-r-petit:18px}

/* Bloc promesse : sur-titre vert sur fond sombre, titre en grand */
.promesse-wrap .section-tag{color:#00F5A0!important;margin-bottom:22px}
html.touches h2.promesse-txt.lit,h2.promesse-txt{font-size:clamp(32px,3.9vw,54px)!important;font-weight:700!important;line-height:1.06!important;letter-spacing:-.04em!important;max-width:14ch!important}

/* Surfaces : alternance neutre / anthracite / blanc */
html.sys #histoire{background:var(--c-bg)!important}
html.sys .sim-section{background:var(--c-bg2)!important;border-top:0!important}
html.sys .blog-wrap{background:var(--c-bg)!important}
html.sys .partner-wrap{background:var(--c-bg2)!important;border-top:0!important}
html.sys .faq-section{background:var(--c-bg)!important;border-top:0!important}

/* Largeurs et rythme */
html.sys .sw{max-width:var(--s-large)!important;padding:var(--s-esp) 48px!important}
html.sys #pourquoi{padding:var(--s-esp) 48px!important}
html.sys #pourquoi .sw{max-width:calc(var(--s-large) - 96px)!important;padding:72px 56px 56px!important}
html.sys .promesse-in{padding-top:var(--s-esp)!important}
html.sys .tuiles{max-width:calc(var(--s-large) - 96px)!important;padding-bottom:var(--s-esp)!important}
html.sys .process-wrap .sw{padding-top:var(--s-esp)!important;padding-bottom:var(--s-esp)!important}
html.sys .partner-wrap{padding:var(--s-esp) 48px!important}
html.sys .partner-inner{max-width:calc(var(--s-large) - 96px)!important}
html.sys .blog-wrap .sw{padding-bottom:calc(var(--s-esp) - 48px)!important}

/* Rayons */
html.sys .tuile,html.sys .hero-reco .reco,html.sys .p-step,html.sys .blog-card,html.sys #histoire .story-role,html.sys .story-photo img,html.sys #histoire .story-photo::before{border-radius:var(--s-r-carte)!important}
html.sys .partner-card,html.sys .sim-card,html.sys #pourquoi .sw{border-radius:var(--s-r-bloc)!important}
html.sys .faq-item,html.sys .sim-opt{border-radius:var(--s-r-petit)!important}

/* Cartes : filet fin, pas d'ombre, liseré vert au survol */
html.sys #histoire .story-role,html.sys .blog-card,html.sys .faq-item{background:var(--c-bg2)!important;border:1px solid var(--c-border2)!important;box-shadow:none!important}
html.sys #histoire .story-role:hover,html.sys .blog-card:hover{border-color:var(--c-vert)!important;box-shadow:0 0 0 4px rgba(0,245,160,.12),0 18px 44px rgba(0,194,126,.14)!important;transform:translateY(-4px)!important}
html.sys .faq-item:hover{border-color:var(--c-vert)!important}
html.sys #histoire .story-role-icon{border-radius:50%!important}
html.sys #histoire .story-team{border-top-color:var(--c-border2)!important}

/* Boutons : « Voir tous les articles » rejoint le bouton principal */
html.sys .blog-wrap a[href="/blog/"][style]{background:var(--c-vert-lt)!important;color:#0a0a09!important;font-weight:700!important;letter-spacing:-.02em;box-shadow:0 8px 26px rgba(0,245,160,.30);transition:transform .2s,box-shadow .2s}
html.sys .blog-wrap a[href="/blog/"][style]:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(0,245,160,.45)}

@media (max-width:900px){
  html.sys{--s-esp:72px}
  html.sys .sw,html.sys .partner-wrap{padding-left:20px!important;padding-right:20px!important}
  html.sys #pourquoi{padding:var(--s-esp) 12px!important}
  html.sys #pourquoi .sw{padding:44px 22px 24px!important;border-radius:26px!important}
  html.sys .partner-card,html.sys .sim-card{border-radius:26px!important}
}

/* ── Toutes les pages ── */
/* Noir pur -> anthracite, bandes menthe -> fond neutre (thème clair) */
html.sys:not([data-theme="dark"]){--c-band:#141917;--c-menthe:var(--c-bg)}
html.sys .hs-tile{background:#141917!important}
html.sys .scta,html.sys .ctafin,html.sys .prose th{background:#141917!important}
html.sys .hs-sec,html.sys .pt-sec{padding-top:var(--s-esp)!important;padding-bottom:var(--s-esp)!important}

/* Cartes claires : fond blanc, filet de 1 px, rayon 24, pas d'ombre ; liseré vert et halo au survol */
html.sys .hs-card-top,html.sys .hs-card-num,html.sys .hs-box:not(.hs-box-dark),html.sys .info-card,html.sys .pt-card,html.sys .pt-role:not(.us),html.sys .pt-steps li,html.sys .pt-res a,html.sys .villes-region,html.sys .blog-card,html.sys .toc,html.sys .info-box,html.sys .form-card,html.sys .copro-form,html.sys .hs-reco,html.sys .rdv-cal{border:1px solid var(--c-border2)!important;border-radius:var(--s-r-carte)!important;box-shadow:none!important}
html.sys .hs-card-top,html.sys .hs-card-num,html.sys .pt-card,html.sys .pt-res a,html.sys .blog-card,html.sys .info-card,html.sys .villes-region{transition:transform .28s var(--ease-out),box-shadow .28s,border-color .28s!important}
html.sys .hs-card-top:hover,html.sys .hs-card-num:hover,html.sys .pt-card:hover,html.sys .pt-res a:hover,html.sys .blog-card:hover,html.sys .info-card:hover,html.sys .villes-region:hover{border-color:var(--c-vert)!important;box-shadow:0 0 0 4px rgba(0,245,160,.12),0 18px 44px rgba(0,194,126,.14)!important;transform:translateY(-4px)}
html.sys .hs-reco{box-shadow:0 30px 70px rgba(11,15,13,.10)!important}
html.sys .hs-ico-o{border:0!important;border-radius:50%!important;background:var(--c-vert-bg)!important}

/* Cartes sur fond sombre */
html.sys .hs-step,html.sys .pt-price,html.sys .hs-box-dark{border-radius:var(--s-r-carte)!important;background:#1B211E!important;border:1px solid rgba(255,255,255,.09)!important}

/* Petits éléments : rayon 18 */
html.sys .faq-city details,html.sys .pt-faq details,html.sys .prose .table-wrap,html.sys .prose table,html.sys .legal-toc-mobile,html.sys .scta,html.sys .prose .ctamid{border-radius:var(--s-r-petit)!important}
html.sys .faq-city details:hover,html.sys .pt-faq details:hover{border-color:var(--c-vert)!important}

/* Grands blocs d'appel : rayon 36, anthracite avec halo vert */
html.sys .cta-box,html.sys .copro-box,html.sys .hs-cta,html.sys .ctafin{border-radius:var(--s-r-bloc)!important;background:radial-gradient(120% 160% at 12% 0%,#0E5A41 0%,#0A3A2B 45%,#0B1F18 100%)!important}

/* Bouton principal : la même lueur partout */
html.sys .btn-primary,html.sys .btn-nav,html.sys .pt-btn-main,html.sys .hs-btn-main,html.sys .btn-jaune{box-shadow:0 8px 26px rgba(0,245,160,.30)}
html.sys .btn-primary:hover,html.sys .pt-btn-main:hover,html.sys .hs-btn-main:hover,html.sys .btn-jaune:hover{box-shadow:0 12px 34px rgba(0,245,160,.45)!important}

/* ── PAGES VILLES, SOLUTIONS, SIMULATEUR : les codes de l'accueil reportés sur les pages villes, solutions et simulateur ──
   Tout est sous html.sys + une classe de page (pg-ville, pg-copro, pg-entreprise, pg-simu) posée sur <html> par les générateurs.
   1. Colonne   : même largeur que l'en-tête et le pied de page (1044 px utiles).
   2. Haut      : la carte de recommandation posée sur une photo sur mesure, en verre dépoli.
   3. Pourquoi  : grande carte photo, titre posé dessus, cartes de verre sans pictogramme (pages solutions).
   4. Étapes    : la lueur verte de l'accueil dans la bande anthracite.
   5. Encadré   : l'encadré sombre des villes devient une tuile photo.
   6. Simulateur: preuves en cartes à filet (le haut de page, simulateur posé sur la photo, vit dans _build_simulateur.py). */

/* 1. Colonne */
html.sys .hs-wrap{max-width:var(--s-large)!important;padding-left:48px!important;padding-right:48px!important}

/* 2. Haut de page : photo + carte de verre */
html.sys .hs-hero.has-card .hs-hero-grid{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr)!important;gap:56px!important}
/* Même départ sous le menu sur toutes les pages (160 px), le texte et la carte alignés en haut */
html.sys .hs-hero{padding-top:calc(var(--topbar-h,40px) + 120px)!important;padding-bottom:var(--s-esp)!important}
html.sys .hs-hero.has-card .hs-hero-grid{align-items:start!important}
html.sys .hs-hero h1{font-size:clamp(36px,4.5vw,58px)!important}
html.sys:is(.pg-ville,.pg-copro,.pg-entreprise,.pg-particuliers,.pg-partenaires,.pg-rdv) .hs-hero-card{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--s-r-bloc);padding:calc(56.25% - 44px) 16px 16px;background:#141917 top center/100% auto no-repeat;box-shadow:0 30px 70px rgba(11,15,13,.16)}
html.sys:is(.pg-ville,.pg-copro,.pg-entreprise,.pg-particuliers,.pg-partenaires,.pg-rdv) .hs-hero-card::after{content:"";position:absolute;left:0;right:0;top:0;aspect-ratio:16/9;z-index:-1;background:linear-gradient(180deg,rgba(20,25,23,0) 62%,#141917 100%)}
html.sys.pg-ville .hs-hero-card{background-image:url(/photos/03-particulier-carport-1200.jpg)}
html.sys.pg-copro .hs-hero-card{background-image:url(/photos/05-copropriete-residence-1200.jpg)}
html.sys.pg-particuliers .hs-hero-card{background-image:url(/photos/02-particulier-recharge-maison-1200.jpg)}
html.sys.pg-entreprise .hs-hero-card{background-image:url(/photos/06-entreprise-parking-1200.jpg)}
html.sys:is(.pg-ville,.pg-copro,.pg-entreprise,.pg-particuliers,.pg-partenaires,.pg-rdv) .hs-hero-card .hs-reco{background:rgba(255,255,255,.9)!important;-webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4);border:1px solid rgba(255,255,255,.6)!important;box-shadow:none!important;border-radius:var(--s-r-carte)!important}
html.sys[data-theme="dark"]:is(.pg-ville,.pg-copro,.pg-entreprise,.pg-particuliers,.pg-partenaires,.pg-rdv) .hs-hero-card .hs-reco{background:rgba(21,27,24,.78)!important;border-color:rgba(255,255,255,.14)!important}

/* 3. « Pourquoi » en grande carte photo (pages solutions) */
html.sys.pg-copro .hs-sec:has(.hs-cards),html.sys.pg-entreprise .hs-sec:has(.hs-cards),html.sys.pg-particuliers .hs-sec:has(.hs-cards){background:var(--c-bg2)!important;padding-left:48px!important;padding-right:48px!important}
html.sys.pg-copro .hs-sec:has(.hs-cards) .hs-wrap,html.sys.pg-entreprise .hs-sec:has(.hs-cards) .hs-wrap,html.sys.pg-particuliers .hs-sec:has(.hs-cards) .hs-wrap{position:relative;isolation:isolate;overflow:hidden;max-width:calc(var(--s-large) - 96px)!important;padding:72px 56px 56px!important;border-radius:var(--s-r-bloc);background:#141917 center/cover no-repeat;color:#fff}
html.sys.pg-copro .hs-sec:has(.hs-cards) .hs-wrap{background-image:url(/photos/04-copropriete-parking-1600.jpg);background-image:image-set(url(/photos/04-copropriete-parking-1600.jpg) 1x,url(/photos/04-copropriete-parking.jpg) 2x);background-position:60% 30%}
html.sys.pg-entreprise .hs-sec:has(.hs-cards) .hs-wrap{background-image:url(/photos/09-entreprise-flotte-1600.jpg);background-image:image-set(url(/photos/09-entreprise-flotte-1600.jpg) 1x,url(/photos/09-entreprise-flotte.jpg) 2x);background-position:50% 30%}
html.sys.pg-particuliers .hs-sec:has(.hs-cards) .hs-wrap{background-image:url(/photos/03-particulier-carport-1200.jpg);background-image:image-set(url(/photos/03-particulier-carport-1200.jpg) 1x,url(/photos/03-particulier-carport.jpg) 2x);background-position:50% 40%}
html.sys.pg-copro .hs-sec:has(.hs-cards) .hs-wrap::after,html.sys.pg-entreprise .hs-sec:has(.hs-cards) .hs-wrap::after,html.sys.pg-particuliers .hs-sec:has(.hs-cards) .hs-wrap::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(11,15,13,.86) 0%,rgba(11,15,13,.5) 46%,rgba(11,15,13,.1) 78%),linear-gradient(180deg,rgba(11,15,13,0) 38%,rgba(11,15,13,.8) 100%)}
html.sys:is(.pg-copro,.pg-entreprise,.pg-particuliers) .hs-sec:has(.hs-cards) .section-tag{color:#00F5A0!important}
html.sys:is(.pg-copro,.pg-entreprise,.pg-particuliers) .hs-sec:has(.hs-cards) .hs-h2{color:#fff!important;max-width:14ch}
html.sys:is(.pg-copro,.pg-entreprise,.pg-particuliers) .hs-sec:has(.hs-cards) .hs-lead{color:rgba(255,255,255,.86)!important;font-weight:400;max-width:440px;margin-bottom:170px!important}
html.sys:is(.pg-copro,.pg-entreprise,.pg-particuliers) .hs-cards{gap:14px!important}
html.sys:is(.pg-copro,.pg-entreprise,.pg-particuliers) .hs-card-top{background:rgba(255,255,255,.09)!important;-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);border:1px solid rgba(255,255,255,.2)!important;padding:26px 24px 28px!important}
html.sys:is(.pg-copro,.pg-entreprise,.pg-particuliers) .hs-card-top:hover{background:rgba(255,255,255,.15)!important;border-color:rgba(255,255,255,.34)!important;box-shadow:none!important}
html.sys:is(.pg-copro,.pg-entreprise,.pg-particuliers) .hs-card-top .hs-tile{display:none!important}
html.sys:is(.pg-copro,.pg-entreprise,.pg-particuliers) .hs-card-top h3{color:#fff!important;min-height:0!important}
html.sys:is(.pg-copro,.pg-entreprise,.pg-particuliers) .hs-card-top p{color:rgba(255,255,255,.8)!important}
html.sys:is(.pg-copro,.pg-entreprise,.pg-particuliers) .hs-card-top .amt{color:#00F5A0!important}

/* 4. Bande des étapes : lueur verte de l'accueil */
html.sys .hs-band,html.sys .simp-steps{position:relative;overflow:clip;isolation:isolate}
html.sys .hs-band::before,html.sys .simp-steps::before{content:"";position:absolute;z-index:-1;left:18%;top:-320px;width:900px;height:900px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(0,245,160,.16),rgba(0,245,160,0));pointer-events:none}

/* 5. Villes : l'encadré sombre « copropriété » devient une tuile photo */
html.sys.pg-ville .hs-box-dark{position:relative;isolation:isolate;overflow:hidden;padding-top:150px!important;border:0!important;background:#141917 url(/photos/05-copropriete-residence-1200.jpg) 60% 30%/cover no-repeat!important}
html.sys.pg-ville .hs-box-dark::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,15,13,.08) 0%,rgba(11,15,13,.82) 46%,rgba(11,15,13,.94) 100%)}
html.sys.pg-ville .hs-box-dark p{color:rgba(255,255,255,.84)!important}

/* 6. Simulateur */
html.sys .simp-hero .sw{padding-top:0!important;padding-bottom:var(--s-esp)!important}
html.sys .simp-hero{padding-bottom:0!important}
html.sys .simp-steps{padding-top:0!important;padding-bottom:0!important}
html.sys .simp-hero h1{font-size:clamp(32px,3.5vw,46px)!important}
html.sys .simp-hero .lead{font-size:16.5px!important}
html.sys .simp-trust{border-bottom:0!important}
html.sys .simp-trust-box{gap:20px!important}
html.sys .simp-trust-item,html.sys .simp-trust-item:first-child{padding:30px 28px!important;border:1px solid var(--c-border2)!important;border-radius:var(--s-r-carte);background:var(--c-bg)}
html.sys .simp-trust-item .n{color:var(--c-vert-txt)!important}
html.sys .simp-step{border-radius:var(--s-r-carte)!important;background:#1B211E!important;border:1px solid rgba(255,255,255,.09)!important}

@media (max-width:900px){
  html.sys .hs-wrap{padding-left:20px!important;padding-right:20px!important}
  html.sys .hs-hero.has-card .hs-hero-grid{grid-template-columns:minmax(0,1fr)!important;gap:36px!important}
  html.sys:is(.pg-ville,.pg-copro,.pg-entreprise,.pg-particuliers,.pg-partenaires,.pg-rdv) .hs-hero-card{padding:calc(56.25% - 36px) 10px 10px;border-radius:26px}
  html.sys .hs-hero{padding-top:calc(var(--topbar-h,40px) + 100px)!important}
  html.sys.pg-copro .hs-sec:has(.hs-cards),html.sys.pg-entreprise .hs-sec:has(.hs-cards),html.sys.pg-particuliers .hs-sec:has(.hs-cards){padding-left:12px!important;padding-right:12px!important}
  html.sys.pg-copro .hs-sec:has(.hs-cards) .hs-wrap,html.sys.pg-entreprise .hs-sec:has(.hs-cards) .hs-wrap,html.sys.pg-particuliers .hs-sec:has(.hs-cards) .hs-wrap{padding:44px 22px 22px!important;border-radius:26px}
  html.sys.pg-copro .hs-sec:has(.hs-cards) .hs-wrap::after,html.sys.pg-entreprise .hs-sec:has(.hs-cards) .hs-wrap::after,html.sys.pg-particuliers .hs-sec:has(.hs-cards) .hs-wrap::after{background:linear-gradient(180deg,rgba(11,15,13,.82) 0%,rgba(11,15,13,.6) 40%,rgba(11,15,13,.86) 100%)}
  html.sys:is(.pg-copro,.pg-entreprise,.pg-particuliers) .hs-sec:has(.hs-cards) .hs-lead{margin-bottom:44px!important}
}

/* ── AUTRES PAGES : installateurs, rendez-vous, guides, articles, pages légales (pg-partenaires, pg-rdv, pg-blog, pg-article, pg-legal).
   Liste des villes (pg-hub) et 404 (pg-404) : les règles communes suffisent. */

/* Haut de page : la carte posée sur une photo, comme les villes et les solutions */
html.sys.pg-partenaires .hs-hero-card{background-image:url(/photos/01-particulier-borne-murale-1200.jpg)}
html.sys.pg-rdv .hs-hero-card{background-image:url(/nous-les-eclaires.jpg);background-position:center 8%}

/* Colonne : même largeur que l'en-tête et le pied de page (1044 px utiles) */
html.sys.pg-partenaires .pt-wrap{max-width:var(--s-large)!important;padding-left:48px!important;padding-right:48px!important}
html.sys.pg-blog .blog-wrap{max-width:var(--s-large)!important;padding-left:48px!important;padding-right:48px!important}
html.sys.pg-article .layout{max-width:var(--s-large)!important;padding-left:48px!important;padding-right:48px!important}
html.sys.pg-article .hero-in{max-width:calc(var(--s-large) - 96px)!important}
html.sys.pg-legal .page{width:100%;box-sizing:border-box;max-width:var(--s-large)!important;padding-left:48px!important;padding-right:48px!important}
/* Départ sous le menu, marge avant le pied de page et taille des titres de page */
html.sys.pg-article .hero{padding-top:calc(var(--topbar-h,40px) + 80px)!important}
html.sys.pg-blog .blog-wrap,html.sys.pg-legal .page,html.sys.pg-article .layout,html.sys.pg-404 .nf-wrap{padding-bottom:var(--s-esp)!important}
html.sys.pg-blog .blog-head h1{font-size:clamp(32px,4vw,52px)!important}
@media (max-width:900px){
  html.sys.pg-partenaires .pt-wrap,html.sys.pg-blog .blog-wrap,html.sys.pg-article .layout,html.sys.pg-legal .page{padding-left:20px!important;padding-right:20px!important}
  html.sys.pg-article .hero{padding-top:calc(var(--topbar-h,40px) + 60px)!important}
  html.sys.pg-blog .blog-filters{margin-left:-20px!important;margin-right:-20px!important;padding-left:20px!important;padding-right:20px!important}
}