/* ==========================================================================
   ECOVISION — Design System (style « Quantrex »)
   Blanc + gris-bleu clair, vert vif d'accent, tags monospace surlignés,
   boutons noirs à flèche ↗, gros titres grotesques, stat-cards, sections vertes.
   ========================================================================== */

/* ----- Tokens ----- */
:root{
  --green:#4caf50;         /* VERT FLUO (ancien site) — accent principal */
  --green-600:#43a047;     /* survol / plus foncé */
  --green-700:#388e3c;
  --green-deep:#0f3a20;    /* vert forêt profond (sections sombres, footer) */
  --tag:#d9f2da;           /* surlignage vert fluo clair des tags */
  --tag-ink:#14401f;       /* texte des tags = vert profond */

  --ink:#0e130c;           /* quasi-noir légèrement verdâtre (texte) */
  --ink-800:#123123;       /* cartes sur fond sombre (vert profond) */
  --ink-700:#1a4531;
  --white:#ffffff;
  --paper:#eef2ea;         /* vert-gris très clair (fonds de section) */
  --paper-2:#f5f8f2;
  --muted:#5f665c;
  --muted-2:#98a091;
  --line:#e2e7db;
  --line-dark:#294a37;

  --radius:16px;
  --radius-lg:24px;
  --radius-sm:10px;
  --radius-pill:999px;
  --shadow:0 20px 55px -26px rgba(13,15,11,.4);
  --shadow-sm:0 10px 28px -16px rgba(13,15,11,.3);

  --wrap:1240px;
  --pad:clamp(20px,5vw,64px);

  --font:"Inter","Helvetica Neue",Arial,sans-serif;
  --display:"Space Grotesk","Inter",Arial,sans-serif;
  --mono:"Space Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ----- Reset ----- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font);color:var(--ink);background:var(--white);line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,textarea,select{font-family:inherit;font-size:1rem}
h1,h2,h3,h4,h5{font-family:var(--display);font-weight:700;line-height:1.02;letter-spacing:-.025em}

/* ----- Layout ----- */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:clamp(70px,10vw,132px)}
.section--paper{background:var(--paper)}
.section--dark{background:var(--green-deep);color:#edf0e8}
.center{text-align:center}
.center .s-sub{margin-inline:auto}
.center .eyebrow{justify-content:center}

/* Tag / eyebrow façon Quantrex : monospace, MAJUSCULES, surligné vert */
.eyebrow{
  display:inline-block;font-family:var(--mono);font-weight:700;font-size:.72rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--tag-ink);
  background:var(--tag);padding:6px 11px;border-radius:6px;line-height:1;
}
.section--dark .eyebrow{background:var(--green);color:#04170a}
.s-title{font-size:clamp(2.1rem,4.8vw,3.6rem);margin-top:20px}
.s-sub{color:var(--muted);max-width:560px;margin-top:18px;font-size:1.06rem}
.section--dark .s-sub{color:#aeb4a4}

/* ----- Boutons (flèche ↗) ----- */
.btn{
  display:inline-flex;align-items:center;gap:9px;padding:15px 24px;border-radius:var(--radius-pill);
  font-weight:700;font-size:.94rem;letter-spacing:-.01em;
  transition:transform .25s var(--ease),background .25s,color .25s,box-shadow .25s;white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn .ar{font-weight:700}
.btn:hover .ar{transform:translate(2px,-2px)}
.btn .ar{transition:transform .25s var(--ease);display:inline-block}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:var(--ink-700)}
.btn-green,.btn-lime{background:var(--green);color:#04170a}
.btn-green:hover,.btn-lime:hover{background:var(--green-600)}
.btn-outline{border:1.5px solid var(--ink);color:var(--ink)}
.btn-outline:hover{background:var(--ink);color:#fff}
.section--dark .btn-outline{border-color:rgba(255,255,255,.4);color:#fff}
.section--dark .btn-outline:hover{background:var(--green);border-color:var(--green);color:#04170a}

/* ==========================================================================
   NAVBAR
   ========================================================================== */
#mainNav{position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:15px var(--pad);background:rgba(255,255,255,.85);backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--line);transition:box-shadow .3s}
#mainNav.scrolled{box-shadow:0 10px 30px -18px rgba(13,15,11,.35)}
.brand{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);font-weight:700;font-size:1.28rem;letter-spacing:-.03em}
.brand .dot{width:30px;height:30px;border-radius:8px;background:var(--green);display:grid;place-items:center;font-size:1rem}
.brand-logo{height:40px;width:auto;object-fit:contain;display:block}
.site-footer .brand-logo{height:44px}
.brand-name{line-height:1}
.brand .custom-logo{height:40px;width:auto}

/* Icônes SVG génériques */
.evi{display:block}
.ic .evi,.sc-ic .evi,.p-ic .evi{width:26px;height:26px}
.feat .fi .evi,.contact-item .ci .evi{width:20px;height:20px}
.fc-ic .evi{width:17px;height:17px}
.social .evi{width:18px;height:18px}
.wl .ck .evi{width:15px;height:15px}
.hero-media .play .evi{width:24px;height:24px}
.fc-ic{display:inline-flex;color:var(--green)}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{padding:9px 15px;border-radius:var(--radius-pill);font-weight:500;font-size:.95rem;color:var(--ink-800);transition:background .2s,color .2s}
.nav-links a:hover{background:var(--paper)}
.nav-links a.active{color:var(--green-700);font-weight:600}
.nav-links a.nav-cta{background:var(--ink);color:#fff;font-weight:700}
.nav-links a.nav-cta:hover{background:var(--ink-700)}
.nav-toggle{display:none;width:44px;height:44px;border-radius:10px;border:1px solid var(--line);place-items:center;color:var(--ink)}
.nav-toggle .evi{width:22px;height:22px}
.nav-toggle .i-close{display:none}
.nav-toggle[aria-expanded="true"] .i-open{display:none}
.nav-toggle[aria-expanded="true"] .i-close{display:block}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{position:relative;min-height:clamp(580px,88vh,860px);display:flex;align-items:flex-end;color:#fff;overflow:hidden}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center}
.hero-bg img{width:100%;height:100%;object-fit:cover}
.hero-bg::after{content:"";position:absolute;inset:0;opacity:var(--ov,1);background:linear-gradient(180deg,rgba(8,12,6,.28) 0%,rgba(8,12,6,.1) 38%,rgba(8,12,6,.8) 100%)}
.hero-inner{position:relative;z-index:2;width:100%;max-width:var(--wrap);margin-inline:auto;padding:0 var(--pad) clamp(40px,6vw,72px)}
.hero-badge{display:inline-flex;align-items:center;gap:9px;padding:6px 12px;border-radius:6px;background:var(--tag);color:var(--tag-ink);
  font-family:var(--mono);font-weight:700;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:22px}
.hero-badge .pulse{width:8px;height:8px;border-radius:50%;background:var(--green-700);box-shadow:0 0 0 0 rgba(30,162,81,.6);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(30,162,81,0)}100%{box-shadow:0 0 0 0 rgba(30,162,81,0)}}
.hero h1{font-size:clamp(2.7rem,7.4vw,5.8rem);max-width:15ch;letter-spacing:-.03em;text-shadow:0 2px 34px rgba(0,0,0,.32)}
.hero h1 span{color:var(--green)}
.hero p{max-width:52ch;margin-top:20px;font-size:1.14rem;color:#e9ece1}
.hero-cta{display:flex;flex-wrap:wrap;gap:13px;margin-top:32px}

/* ==========================================================================
   STAT-CARDS (façon « A world that runs on clean »)
   ========================================================================== */
.section--stats{background:var(--paper)}
.statcards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.statcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 24px 28px;display:flex;flex-direction:column;min-height:210px;
  transition:transform .35s var(--ease),box-shadow .35s}
.statcard:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.statcard:nth-child(even){margin-top:36px}
.statcard .sc-ic{width:40px;height:40px;border-radius:10px;background:var(--paper);display:grid;place-items:center;font-size:1.15rem;margin-bottom:14px}
.statcard .sc-lbl{color:var(--muted);font-size:.92rem;font-weight:500}
.statcard .sc-num{font-family:var(--display);font-weight:700;font-size:clamp(2.4rem,4vw,3.2rem);line-height:1;margin-top:auto;letter-spacing:-.03em}

/* Ancien bandeau stats (compat) */
.stats-strip{background:var(--green);color:#04170a}
.stats-strip .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding-block:34px}
.stat b{font-family:var(--display);font-size:clamp(1.9rem,3.6vw,2.8rem);font-weight:700;display:block;line-height:1}
.stat span{font-weight:600;font-size:.92rem;opacity:.82}
.stat{border-left:2px solid rgba(4,23,10,.18);padding-left:20px}
.stat:first-child{border-left:none;padding-left:0}

/* ==========================================================================
   GRILLES & CARTES
   ========================================================================== */
.grid{display:grid;gap:22px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:48px;flex-wrap:wrap}

.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:30px;
  transition:transform .35s var(--ease),box-shadow .35s,border-color .35s}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.card .ic{width:54px;height:54px;border-radius:13px;background:var(--paper);display:grid;place-items:center;font-size:1.55rem;margin-bottom:20px;transition:background .3s}
.card:hover .ic{background:var(--green)}
.card h3{font-size:1.26rem;margin-bottom:10px}
.card p{color:var(--muted);font-size:.97rem}
.card .more{display:inline-flex;align-items:center;gap:7px;margin-top:18px;font-weight:700;font-size:.88rem;font-family:var(--mono);text-transform:uppercase;letter-spacing:.05em}
.card .more span{transition:transform .25s}
.card:hover .more span{transform:translate(3px,-3px)}
.section--dark .card{background:var(--ink-800);border-color:var(--line-dark)}
.section--dark .card h3{color:#fff}
.section--dark .card p{color:#a9af9e}
.section--dark .card .ic{background:var(--ink-700)}

/* Cartes numérotées 01 / 02 / 03 (façon « Every form of clean power ») */
.num{position:relative}
.num .num-badge{display:inline-grid;place-items:center;min-width:38px;height:34px;padding:0 10px;border-radius:8px;
  background:var(--green);color:#04170a;font-family:var(--display);font-weight:700;font-size:1rem;margin-bottom:18px}

/* ----- Split feature ----- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px);align-items:center}
.split.rev .split-media{order:2}
.split-media{border-radius:var(--radius-lg);overflow:hidden;position:relative;box-shadow:var(--shadow)}
.split-media img{width:100%;aspect-ratio:5/4;object-fit:cover}
.chip-float{position:absolute;background:#fff;border-radius:13px;padding:12px 15px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:11px}
.chip-float b{font-family:var(--display);font-size:1.22rem;display:block;line-height:1}
.chip-float small{color:var(--muted);font-size:.74rem}
.chip-float.tl{top:18px;left:18px}
.chip-float.br{bottom:18px;right:18px}
.feat-list{display:grid;gap:14px;margin-top:26px}
.feat{display:flex;gap:14px;align-items:flex-start}
.feat .fi{flex:0 0 auto;width:40px;height:40px;border-radius:11px;background:var(--paper);display:grid;place-items:center;font-size:1.1rem}
.feat strong{display:block;font-size:1rem}
.feat span{color:var(--muted);font-size:.92rem}

/* ----- Processus ----- */
.proc{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.proc-step{text-align:center}
.proc-circle{width:76px;height:76px;border-radius:50%;background:#fff;border:1px solid var(--line);display:grid;place-items:center;font-size:1.7rem;margin:0 auto 18px;position:relative}
.proc-num{position:absolute;top:-6px;right:-6px;width:26px;height:26px;border-radius:7px;background:var(--green);color:#04170a;font-family:var(--display);font-weight:700;font-size:.82rem;display:grid;place-items:center}
.proc-step h4{font-size:1.04rem;margin-bottom:6px}
.proc-step p{color:var(--muted);font-size:.88rem}

/* ----- Liste « pourquoi » ----- */
.why-list{display:grid;gap:18px;margin-top:28px}
.wl{display:flex;gap:14px;align-items:flex-start}
.wl .ck{flex:0 0 auto;width:30px;height:30px;border-radius:8px;background:var(--green);color:#04170a;display:grid;place-items:center;font-weight:800}
.wl strong{display:block}
.wl span{color:var(--muted);font-size:.94rem}
.section--dark .wl span{color:#a9af9e}

/* ----- Produits ----- */
.prod{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s}
.prod:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.prod-img{aspect-ratio:4/3;background:var(--paper);position:relative;overflow:hidden}
.prod-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.prod:hover .prod-img img{transform:scale(1.05)}
.prod-badge{position:absolute;top:12px;left:12px;background:var(--green);color:#04170a;font-family:var(--mono);font-weight:700;font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;padding:5px 10px;border-radius:6px}
.prod-body{padding:20px}
.prod-cat{color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700;font-family:var(--mono)}
.prod-body h3{font-size:1.1rem;margin:8px 0 8px}
.prod-body p{color:var(--muted);font-size:.9rem}
.prod-foot{display:flex;align-items:center;justify-content:space-between;margin-top:16px}
.prod-price{font-family:var(--display);font-weight:700;font-size:1.15rem}
.prod-price small{color:var(--muted);font-weight:500;font-size:.72rem}

/* ----- Filtres ----- */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.filter-btn{padding:9px 17px;border-radius:var(--radius-pill);border:1px solid var(--line);font-weight:600;font-size:.88rem;transition:.2s}
.filter-btn:hover{border-color:var(--ink)}
.filter-btn.active{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ----- Portfolio ----- */
.folio{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.folio-item{position:relative;border-radius:var(--radius-lg);overflow:hidden;cursor:pointer}
.folio-item img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .6s var(--ease)}
.folio-item:hover img{transform:scale(1.06)}
.folio-item::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(8,12,6,.82))}
.folio-tag{position:absolute;top:14px;left:14px;z-index:2;background:var(--tag);color:var(--tag-ink);font-family:var(--mono);font-weight:700;font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;padding:5px 11px;border-radius:6px}
.folio-cap{position:absolute;left:20px;bottom:18px;z-index:2;color:#fff}
.folio-cap h4{font-size:1.3rem}
.folio-cap p{font-size:.9rem;opacity:.85}

/* ----- Témoignages ----- */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tcard{background:var(--ink-800);border:1px solid var(--line-dark);border-radius:var(--radius);padding:28px}
.stars{color:var(--green);letter-spacing:2px;margin-bottom:14px}
.tquote{font-size:1rem;color:#e6e9df}
.tauthor{display:flex;align-items:center;gap:12px;margin-top:20px}
.tavatar{width:46px;height:46px;border-radius:50%;background:var(--green);color:#04170a;display:grid;place-items:center;font-weight:700}
.tname{font-weight:700;font-size:.95rem}
.tcity{color:#9aa08f;font-size:.82rem}

/* ----- Section VERTE pleine (façon « Rebuilt for the renewable era ») ----- */
.section--green{background:var(--green);color:#04170a;position:relative;overflow:hidden}
.section--green::before{content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle,transparent 0 4px,rgba(4,23,10,.13) 4px 5.4px,transparent 5.5px);background-size:34px 34px;opacity:.7}
.section--green .wrap{position:relative;z-index:1}
.section--green .eyebrow{background:rgba(4,23,10,.85);color:var(--green)}
.section--green .s-sub{color:rgba(4,23,10,.7)}

/* ----- Bandeau CTA (vert vif + motif) ----- */
.cta-band{background:var(--green);color:#04170a;border-radius:var(--radius-lg);text-align:center;padding:clamp(48px,7vw,84px) var(--pad);position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,transparent 0 4px,rgba(4,23,10,.13) 4px 5.4px,transparent 5.5px);background-size:34px 34px;opacity:.7}
.cta-band>*{position:relative;z-index:1}
.cta-band h2{font-size:clamp(2rem,4.6vw,3.3rem)}
.cta-band p{max-width:48ch;margin:16px auto 28px;font-size:1.08rem;color:rgba(4,23,10,.72)}

/* ----- Contact / formulaire ----- */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(30px,5vw,64px)}
.contact-items{display:grid;gap:18px;margin-top:28px}
.contact-item{display:flex;gap:14px;align-items:flex-start}
.contact-item .ci{width:44px;height:44px;border-radius:11px;background:var(--ink);color:var(--green);display:grid;place-items:center;font-size:1.15rem}
.contact-item h4{font-size:.95rem}
.contact-item p{color:var(--muted);font-size:.94rem}
.form{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(24px,3vw,38px);box-shadow:var(--shadow)}
.form h3{font-size:1.4rem;margin-bottom:20px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{margin-bottom:16px}
.field label{display:block;font-weight:600;font-size:.84rem;margin-bottom:7px}
.field input,.field select,.field textarea{width:100%;padding:13px 15px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--paper-2);transition:border .2s,background .2s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--green);background:#fff}
.field textarea{min-height:120px;resize:vertical}
.form .btn{width:100%;justify-content:center;margin-top:6px}
.form-note{color:var(--muted);font-size:.8rem;text-align:center;margin-top:12px}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{background:var(--green-deep);color:#c7ccbc;padding-top:clamp(60px,7vw,92px)}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:40px}
.footer-brand .brand{color:#fff;margin-bottom:16px}
.footer-brand p{color:#99a08d;font-size:.94rem;max-width:38ch}
.socials{display:flex;gap:10px;margin-top:20px}
.social{width:42px;height:42px;border-radius:11px;background:var(--ink-800);display:grid;place-items:center;font-size:1rem;font-weight:700;transition:.2s}
.social:hover{background:var(--green);color:#04170a;transform:translateY(-3px)}
.footer-col h5{color:#fff;font-family:var(--display);font-size:1rem;margin-bottom:16px}
.footer-col ul{display:grid;gap:10px}
.footer-col a,.footer-col li{color:#99a08d;font-size:.92rem;transition:color .2s}
.footer-col a:hover{color:var(--green)}
.fc-line{display:flex;gap:10px;align-items:flex-start}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:clamp(44px,5vw,66px);padding:26px 0;border-top:1px solid var(--line-dark);color:#7d846f;font-size:.86rem}
.footer-bottom a{color:#99a08d}
.footer-bottom a:hover{color:var(--green)}

/* ==========================================================================
   SECTIONS QUANTREX SUPPLÉMENTAIRES
   ========================================================================== */

/* --- Hero : vignette média à droite --- */
.hero-media{position:absolute;right:var(--pad);top:38%;width:min(300px,34vw);border-radius:14px;overflow:hidden;box-shadow:var(--shadow);z-index:2}
.hero-media img{width:100%;aspect-ratio:16/10;object-fit:cover}
.hero-media .play{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:1.6rem;background:rgba(0,0,0,.15)}
@media (max-width:860px){.hero-media{display:none}}

/* --- About (section verte) : 2 colonnes --- */
.ag-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(30px,5vw,64px);align-items:end}
.ag-year{font-family:var(--mono);font-weight:700;font-size:.82rem;opacity:.65;margin-top:14px}
.ag-body p{color:rgba(4,23,10,.78);margin-bottom:16px;font-size:1.04rem}
/* Compteurs compacts intégrés au bloc vert « À propos » */
.ag-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,32px);
	margin-top:clamp(34px,4.5vw,52px);padding-top:clamp(26px,3vw,36px);
	border-top:1px solid rgba(4,23,10,.18)}
.ag-stat{padding-left:0}
.ag-stat+.ag-stat{border-left:1px solid rgba(4,23,10,.14);padding-left:clamp(18px,2.4vw,32px)}
.ags-num{font-family:var(--display);font-weight:700;line-height:1;letter-spacing:-.03em;
	color:#04170a;font-size:clamp(2rem,3.4vw,2.9rem)}
.ags-lbl{margin-top:8px;font-size:.9rem;font-weight:600;color:rgba(4,23,10,.72)}
@media(max-width:760px){
	.ag-stats{grid-template-columns:repeat(2,1fr);gap:22px 18px}
	.ag-stat+.ag-stat{border-left:none;padding-left:0}
	.ag-stat:nth-child(n+3){border-top:1px solid rgba(4,23,10,.14);padding-top:18px}
}

/* --- Citation --- */
.quote-sec{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.bigquote{font-family:var(--display);font-weight:600;font-size:clamp(1.6rem,3.4vw,2.8rem);letter-spacing:-.02em;max-width:20ch;line-height:1.12}
.bigquote::before{content:"“";color:var(--green);margin-right:.1em}
.quote-author{font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;font-size:.8rem;color:var(--muted);margin-top:26px}
.quote-author b{color:var(--ink);display:block;font-family:var(--display);font-size:1rem;letter-spacing:-.01em;text-transform:none}

/* --- Bande image sombre ("Ce qui arrive") --- */
.band{position:relative;min-height:clamp(440px,60vh,600px);display:flex;align-items:center;color:#fff;overflow:hidden}
.band-bg{position:absolute;inset:0;background-size:cover;background-position:center}
.band-bg img{width:100%;height:100%;object-fit:cover}
.band-bg::after{content:"";position:absolute;inset:0;opacity:var(--ov,1);background:linear-gradient(90deg,rgba(8,12,6,.85) 0%,rgba(8,12,6,.55) 55%,rgba(8,12,6,.3) 100%)}
.band .wrap{position:relative;z-index:1}
.band h2{font-size:clamp(1.9rem,4vw,3rem);max-width:18ch}
.band p{max-width:52ch;margin-top:16px;color:#dfe3d8}
.band .btn{margin-top:26px}
/* CTA — Solution autonome (variante centrée de .band) */
.band--cta{min-height:clamp(520px,66vh,650px);text-align:center;padding:clamp(56px,8vw,88px) 0}
.band--cta .band-bg::after{background:
	radial-gradient(130% 120% at 50% -10%, rgba(76,175,80,.22), rgba(6,14,8,0) 46%),
	linear-gradient(180deg, rgba(6,14,8,.80) 0%, rgba(6,14,8,.70) 52%, rgba(6,14,8,.88) 100%)}
.cta-inner{max-width:940px;margin-inline:auto;display:flex;flex-direction:column;align-items:center}
.band--cta h2{max-width:22ch;margin-top:18px}
.band--cta p{max-width:60ch;margin-inline:auto}
/* Chiffre-choc (ex. Jusqu'à −70 %) */
.cta-hook{display:inline-flex;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:4px 12px;margin:18px auto 4px;max-width:none}
.cta-hook .hook-pre{font-size:.9rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.cta-hook .hook-num{font-family:var(--display);font-weight:700;line-height:1;letter-spacing:-.03em;
	font-size:clamp(2.3rem,4.6vw,3.3rem);color:var(--green);text-shadow:0 2px 26px rgba(76,175,80,.5)}
.cta-hook .hook-txt{font-size:clamp(1rem,1.8vw,1.15rem);font-weight:600;color:#eef4ec}
.cta-feats{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:28px 0 2px;padding:0}
.cta-feats li{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.94rem;color:#eef4ec;
	background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);padding:8px 14px;border-radius:999px}
.cta-feats .fi{display:inline-grid;place-items:center;color:var(--green);flex:none}
.cta-feats .fi .evi{width:16px;height:16px}
.cta-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:30px}
.cta-btns .btn{margin-top:0}
.btn-wa{display:inline-flex;align-items:center;gap:9px;color:#fff;border-color:rgba(255,255,255,.45)}
.btn-wa .evi{width:19px;height:19px}
.btn-wa:hover{border-color:var(--green);color:var(--green);background:rgba(76,175,80,.12)}
/* CTA principal : halo pour capter l'œil */
.cta-btns .btn-green{box-shadow:0 10px 30px -8px rgba(76,175,80,.6)}
.cta-btns .btn-green:hover{box-shadow:0 14px 40px -8px rgba(76,175,80,.72)}
/* Ligne de réassurance (gratuit · sans engagement · 24 h) */
.cta-note{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin:22px 0 0;padding:0}
.cta-note li{display:inline-flex;align-items:center;gap:7px;font-size:.9rem;font-weight:500;color:rgba(255,255,255,.82)}
.cta-note .evi{width:16px;height:16px;color:var(--green);flex:none;stroke-width:2.4}

/* --- Liste numérotée ("Toutes les formes d'énergie") --- */
.build-list{border-top:1px solid var(--line)}
.build-row{display:grid;grid-template-columns:56px 1.5fr .7fr 200px;gap:clamp(16px,3vw,40px);align-items:center;
  padding:26px 0;border-bottom:1px solid var(--line);transition:background .3s}
.build-row:hover{background:var(--paper-2)}
.bi-num{font-family:var(--display);font-weight:700;font-size:1.5rem;color:var(--green-700)}
.bi-main h3{font-size:1.4rem;margin-bottom:6px}
.bi-main p{color:var(--muted);font-size:.95rem;max-width:60ch}
.bi-stat{text-align:right}
.bi-stat b{font-family:var(--display);font-weight:700;font-size:2rem;display:block;line-height:1}
.bi-stat span{font-family:var(--mono);text-transform:uppercase;font-size:.7rem;letter-spacing:.08em;color:var(--muted)}
.bi-img{width:200px;height:120px;border-radius:12px;overflow:hidden}
.bi-img img{width:100%;height:100%;object-fit:cover}
@media (max-width:900px){
  .build-row{grid-template-columns:44px 1fr;gap:14px 16px}
  .bi-stat{grid-column:2;text-align:left}
  .bi-img{display:none}
}

/* ===== Carrousel de produits ===== */
.pcarousel{position:relative}
.pcar-head{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;margin-bottom:34px}
.pcar-head .s-sub{max-width:52ch}
.pcar-nav{display:flex;gap:10px;flex:none}
.pcar-btn{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);
	display:grid;place-items:center;cursor:pointer;transition:background .2s,color .2s,border-color .2s,opacity .2s}
.pcar-btn:hover:not(:disabled){background:var(--ink);color:#fff;border-color:var(--ink)}
.pcar-btn:disabled{opacity:.32;cursor:default}
.pcar-btn .evi{width:20px;height:20px}
.pcar-track{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
	padding:4px;margin:-4px;scrollbar-width:none;-ms-overflow-style:none}
.pcar-track::-webkit-scrollbar{display:none}
.pcar-track.drag{scroll-behavior:auto;scroll-snap-type:none;cursor:grabbing}
.pcard{scroll-snap-align:start;flex:0 0 clamp(280px,31.5%,376px);background:#fff;border:1px solid var(--line);
	border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit;
	transition:transform .28s var(--ease),box-shadow .28s,border-color .28s}
.pcard:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.pcar-track.drag .pcard{transform:none}
.pcard-media{position:relative;aspect-ratio:16/11;background:var(--paper-2);overflow:hidden}
.pcard-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.pcard:hover .pcard-media img{transform:scale(1.06)}
.pcard-num{position:absolute;top:12px;left:12px;font-family:var(--mono);font-weight:700;font-size:.78rem;
	background:rgba(4,23,10,.72);color:var(--green);padding:5px 10px;border-radius:8px;backdrop-filter:blur(3px)}
.pcard-body{padding:22px 22px 20px;display:flex;flex-direction:column;flex:1}
.pcard-title{font-size:1.16rem;font-weight:700;letter-spacing:-.01em;margin-bottom:8px}
.pcard-desc{color:var(--muted);font-size:.93rem;line-height:1.55;margin-bottom:18px;flex:1}
.pcard-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding-top:16px}
.pcard-stat b{font-family:var(--display);font-weight:700;font-size:1.5rem;line-height:1;display:block}
.pcard-stat span{font-family:var(--mono);text-transform:uppercase;font-size:.64rem;letter-spacing:.06em;color:var(--muted);display:block;margin-top:3px}
.pcard-go{width:40px;height:40px;flex:none;border-radius:50%;background:var(--paper-2);color:var(--ink);
	display:grid;place-items:center;font-weight:700;transition:background .25s,color .25s,transform .25s}
.pcard:hover .pcard-go{background:var(--green);color:#04170a;transform:translate(2px,-2px)}
.pcar-bar{height:3px;background:var(--line);border-radius:3px;margin-top:26px;overflow:hidden}
.pcar-bar span{display:block;height:100%;width:12%;background:var(--green);border-radius:3px;transition:width .15s linear}
.pcar-dots{display:flex;justify-content:center;align-items:center;gap:9px;margin-top:26px}
.pcar-dot{width:9px;height:9px;padding:0;border:none;border-radius:50%;background:var(--line);cursor:pointer;
	-webkit-appearance:none;appearance:none;transition:background .25s,width .25s var(--ease)}
.pcar-dot:hover{background:var(--muted)}
.pcar-dot.active{background:var(--green);width:26px;border-radius:5px}
@media (max-width:900px){
	.pcar-head{align-items:flex-start}
	.pcard{flex-basis:clamp(258px,62%,320px)}
}
@media (max-width:560px){
	.pcar-head{flex-direction:column;gap:18px}
	.pcard{flex-basis:84%}
}

/* --- Piliers durabilité --- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(30px,4.5vw,60px);margin-top:clamp(54px,6vw,78px)}
.pillar{padding-top:30px;border-top:1px solid rgba(255,255,255,.14);transition:border-color .3s var(--ease)}
.pillar:hover{border-top-color:var(--green)}
.pillar .p-ic{width:56px;height:56px;border-radius:15px;background:rgba(76,175,80,.15);color:var(--green);
	display:grid;place-items:center;margin-bottom:26px;transition:background .3s var(--ease)}
.pillar:hover .p-ic{background:rgba(76,175,80,.24)}
.pillar .p-ic .evi{width:27px;height:27px}
.pillar h4{font-size:clamp(1.25rem,1.6vw,1.45rem);margin-bottom:14px;color:#fff;letter-spacing:-.01em}
.pillar p{color:#b3b9a9;font-size:1.03rem;line-height:1.72;max-width:36ch}
.section--dark .pillar{border-top-color:rgba(255,255,255,.14)}
.section--dark .pillar:hover{border-top-color:var(--green)}
@media (min-width:901px){.pillars-sec .wrap{padding-block:clamp(10px,2vw,30px)}}

/* --- Clients (bandeau logos) --- */
.clients-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 40px;margin-top:40px;align-items:center}
.client-logo{font-family:var(--display);font-weight:700;font-size:1.3rem;color:var(--muted-2);letter-spacing:-.02em;
  opacity:.75;transition:.2s;display:inline-flex;align-items:center;gap:8px}
.client-logo:hover{opacity:1;color:var(--ink)}
.client-logo.has-img{opacity:1}
.client-logo.has-img img{height:clamp(30px,4.5vw,46px);width:auto;max-width:160px;object-fit:contain;display:block;
	filter:grayscale(1);opacity:.62;transition:filter .25s var(--ease),opacity .25s var(--ease)}
.client-logo.has-img:hover img{filter:grayscale(0);opacity:1}

/* --- Témoignage vedette --- */
.bigtest{background:var(--ink-800);border:1px solid var(--line-dark);border-radius:var(--radius-lg);padding:clamp(30px,5vw,60px);position:relative}
.bigtest .tcount{font-family:var(--mono);color:var(--green);font-size:.82rem;letter-spacing:.1em;margin-bottom:20px}
.bigtest blockquote{font-family:var(--display);font-weight:600;font-size:clamp(1.3rem,2.6vw,2rem);color:#eef0e8;line-height:1.25;max-width:30ch}
.bigtest .who{font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;color:#9aa08f;margin-top:26px}
.bigtest .who b{display:block;color:#fff;font-family:var(--display);text-transform:none;font-size:1.05rem;letter-spacing:-.01em}

/* --- Projet en vedette ("En focus") --- */
.focus{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,64px);align-items:center}
.focus-media{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow)}
.focus-media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.focus-loc{position:absolute;top:16px;left:16px;background:var(--tag);color:var(--tag-ink);font-family:var(--mono);text-transform:uppercase;font-size:.7rem;letter-spacing:.06em;padding:5px 11px;border-radius:6px}
.focus-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin:26px 0}
.focus-stat b{font-family:var(--display);font-weight:700;font-size:1.7rem;display:block;line-height:1}
.focus-stat span{font-family:var(--mono);text-transform:uppercase;font-size:.7rem;letter-spacing:.06em;color:var(--muted)}

/* --- Régions ("Où nous opérons") --- */
.regions-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-top:40px;border:1px solid var(--line-dark);border-radius:12px;overflow:hidden;background:var(--line-dark)}
.region{background:var(--ink);padding:20px}
.region .r-code{font-family:var(--mono);font-weight:700;color:var(--green);font-size:.9rem}
.region .r-label{color:#aab0a0;font-size:.86rem;margin-top:6px}
@media (max-width:860px){.regions-grid{grid-template-columns:repeat(2,1fr)}}

/* ===== Carte Tunisie + pins (Où nous opérons) ===== */
.regions-map{display:grid;grid-template-columns:1fr .8fr;gap:clamp(36px,6vw,84px);align-items:center}
.regions-info .s-sub{max-width:44ch;margin-top:16px;color:#aeb4a4}
.region-legend{list-style:none;margin:clamp(28px,3vw,40px) 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:13px 24px}
.region-legend li{display:flex;align-items:baseline;gap:10px;font-size:.97rem;color:#c3c9bb}
.region-legend .rl-dot{width:9px;height:9px;border-radius:50%;background:var(--green);flex:none;transform:translateY(1px);box-shadow:0 0 0 4px rgba(76,175,80,.16)}
.region-legend b{color:#fff;font-weight:600}
.ecomap{width:100%;height:clamp(420px,58vh,580px);border-radius:var(--radius-lg);overflow:hidden;
	border:1px solid var(--line-dark);background:#0b1f10;position:relative;z-index:1}
/* Rendu sombre des tuiles OSM (filtre) — n'affecte que les tuiles, pas les marqueurs/contrôles */
.ecomap .leaflet-tile{filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(.9) grayscale(.18)}
/* Marqueur vert lumineux + pulse */
.eco-marker{background:none;border:0}
.eco-marker-dot{display:block;width:14px;height:14px;border-radius:50%;background:var(--green);position:relative;box-shadow:0 0 12px 2px rgba(76,175,80,.8)}
.eco-marker-dot::before{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--green);opacity:.6;animation:tnpulse 2.4s ease-out infinite}
@keyframes tnpulse{0%{transform:scale(.55);opacity:.75}100%{transform:scale(2.3);opacity:0}}
/* Popups + contrôles Leaflet — thème sombre */
.leaflet-container{font-family:var(--sans,inherit);background:#0b1f10}
.leaflet-container a{color:var(--green)}
.leaflet-popup-content-wrapper{background:#0b1f10;color:#eef0e8;border:1px solid rgba(255,255,255,.14);border-radius:12px;box-shadow:0 16px 40px -16px rgba(0,0,0,.7)}
.leaflet-popup-tip{background:#0b1f10;border:1px solid rgba(255,255,255,.14)}
.leaflet-popup-content{margin:12px 15px}
.eco-pop b{display:block;color:#fff;font-family:var(--display);font-size:1.02rem;font-weight:700}
.eco-pop span{display:block;color:var(--green);font-size:.84rem;margin-top:3px}
.leaflet-popup-close-button{color:#9aa08f!important}
.leaflet-control-zoom a{background:#12281a;color:#eef0e8;border-color:rgba(255,255,255,.12)}
.leaflet-control-zoom a:hover{background:#1a3a26}
.leaflet-control-attribution{background:rgba(4,23,10,.55)!important}
.leaflet-control-attribution,.leaflet-control-attribution a{color:#8b917f!important}
@media (max-width:820px){
	.regions-map{grid-template-columns:1fr;gap:34px}
	.regions-info .s-sub{max-width:none}
	.ecomap{height:clamp(360px,60vh,460px)}
}
@media (max-width:460px){.region-legend{grid-template-columns:1fr}}

/* --- Contact "Parlons-en" (form minimal souligné) --- */
.talk-form{display:grid;gap:26px;max-width:640px;margin-top:36px}
.talk-field label{font-family:var(--mono);text-transform:uppercase;font-size:.72rem;letter-spacing:.1em;color:var(--muted);display:block;margin-bottom:8px}
.talk-field input,.talk-field textarea{width:100%;border:none;border-bottom:2px solid var(--line);background:transparent;padding:10px 0;font-size:1.1rem;transition:border .2s}
.talk-field input:focus,.talk-field textarea:focus{outline:none;border-color:var(--green)}
.talk-field textarea{min-height:90px;resize:vertical}

/* --- Footer : bandeau titre géant --- */
.footer-cta{border-bottom:1px solid var(--line-dark);padding-bottom:clamp(40px,5vw,64px);margin-bottom:clamp(40px,5vw,60px);
  display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
.footer-cta h2{color:#fff;font-size:clamp(2rem,5vw,3.6rem);max-width:16ch;letter-spacing:-.03em}

/* ==========================================================================
   BOUTON WHATSAPP FLOTTANT
   ========================================================================== */
.wa-float{position:fixed;right:22px;bottom:22px;z-index:200;width:60px;height:60px;border-radius:50%;
  background:#25d366;color:#fff;display:grid;place-items:center;box-shadow:0 12px 30px -8px rgba(37,211,102,.6);
  transition:transform .25s var(--ease)}
.wa-float:hover{transform:scale(1.08)}
.wa-float .evi{width:32px;height:32px}
.wa-float::before{content:"";position:absolute;inset:0;border-radius:50%;background:#25d366;opacity:.55;
  animation:waPulse 2.2s infinite;z-index:-1}
@keyframes waPulse{0%{transform:scale(1);opacity:.55}70%{transform:scale(1.7);opacity:0}100%{opacity:0}}
@media (max-width:520px){.wa-float{width:54px;height:54px;right:16px;bottom:16px}}

/* ==========================================================================
   SIMULATEUR D'ÉCONOMIES
   ========================================================================== */
.sim{background:var(--ink);color:#eef0e8;border-radius:var(--radius-lg);overflow:hidden;
  display:grid;grid-template-columns:1fr 1.1fr;gap:0}
.sim-left{padding:clamp(30px,4vw,52px)}
.sim-left .eyebrow{background:var(--green);color:#04170a}
.sim-left h2{color:#fff;font-size:clamp(1.7rem,3.2vw,2.5rem);margin:16px 0 10px}
.sim-left p{color:#a9af9e;font-size:1rem}
.sim-field{margin-top:26px}
.sim-field label{display:block;font-family:var(--mono);text-transform:uppercase;font-size:.72rem;letter-spacing:.1em;color:#9aa08f;margin-bottom:12px}
.sim-input-row{display:flex;align-items:center;gap:12px}
.sim-input-row input[type=number]{width:130px;background:var(--ink-800);border:1px solid var(--line-dark);color:#fff;
  font-family:var(--display);font-size:1.6rem;font-weight:700;padding:10px 14px;border-radius:12px}
.sim-input-row input[type=number]:focus{outline:none;border-color:var(--green)}
.sim-unit{font-family:var(--mono);color:#9aa08f;font-size:.9rem}
.sim-range{width:100%;margin-top:20px;accent-color:var(--green)}
.sim-right{background:var(--green);color:#04170a;padding:clamp(30px,4vw,52px);position:relative;overflow:hidden}
.sim-right::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,transparent 0 4px,rgba(4,23,10,.13) 4px 5.4px,transparent 5.5px);background-size:34px 34px;opacity:.6}
.sim-res{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:22px 18px}
.sim-res .big{grid-column:1 / -1}
.sim-r b{font-family:var(--display);font-weight:700;font-size:1.9rem;display:block;line-height:1}
.sim-r .big-num{font-size:2.8rem}
.sim-r span{font-family:var(--mono);text-transform:uppercase;font-size:.7rem;letter-spacing:.06em;color:rgba(4,23,10,.72);display:block;margin-top:4px}
.sim-cta{position:relative;z-index:1;margin-top:26px}
.sim-note{position:relative;z-index:1;margin-top:16px;font-size:.76rem;color:rgba(4,23,10,.6)}
@media (max-width:860px){.sim{grid-template-columns:1fr}}

/* ===== Mini-simulateur (accueil, teaser vers /simulateur/) ===== */
.simmini{background:var(--ink);color:#eef0e8;border-radius:var(--radius-lg);overflow:hidden;
	display:grid;grid-template-columns:1.15fr .85fr;gap:0;align-items:stretch}
.simmini-left{padding:clamp(26px,3.5vw,44px)}
.simmini-left .eyebrow{background:var(--green);color:#04170a}
.simmini-left h2{color:#fff;font-size:clamp(1.5rem,2.6vw,2.1rem);margin:14px 0 22px;max-width:17ch}
.simmini-left label{display:block;font-family:var(--mono);text-transform:uppercase;font-size:.72rem;letter-spacing:.1em;color:#9aa08f;margin-bottom:12px}
.simmini-inputrow{display:flex;flex-direction:column;gap:16px}
.simmini-inputrow input[type=number]{width:160px;background:var(--ink-800);border:1px solid var(--line-dark);color:#fff;
	font-family:var(--display);font-size:1.7rem;font-weight:700;padding:10px 14px;border-radius:12px}
.simmini-inputrow input[type=number]:focus{outline:none;border-color:var(--green)}
.simmini-inputrow input[type=range]{width:100%;accent-color:var(--green)}
.simmini-right{background:var(--green);color:#04170a;padding:clamp(26px,3.5vw,44px);position:relative;overflow:hidden;
	display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.simmini-right::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,transparent 0 4px,rgba(4,23,10,.13) 4px 5.4px,transparent 5.5px);background-size:34px 34px;opacity:.55}
.simmini-lbl{position:relative;z-index:1;font-family:var(--mono);text-transform:uppercase;font-size:.72rem;letter-spacing:.08em;color:rgba(4,23,10,.72)}
.simmini-right .big-num{position:relative;z-index:1;font-family:var(--display);font-weight:700;font-size:clamp(2.6rem,5vw,3.4rem);line-height:1;margin:6px 0 2px;letter-spacing:-.02em}
.simmini-sub{position:relative;z-index:1;font-size:.92rem;color:rgba(4,23,10,.8);margin-bottom:22px}
.simmini-sub b{font-weight:700}
.simmini-right .btn{position:relative;z-index:1}
@media (max-width:760px){.simmini{grid-template-columns:1fr}}

/* ===== Page Simulateur : onglets ===== */
.simpage .s-title{margin-top:16px}
.simtabs{display:flex;gap:6px;padding:6px;background:var(--paper);border:1px solid var(--line);
	border-radius:var(--radius-pill);width:fit-content;max-width:100%;margin:0 auto 28px}
.simtab{flex:0 1 auto;border:none;background:transparent;color:var(--ink);font-weight:600;font-size:.94rem;
	padding:11px 22px;border-radius:var(--radius-pill);cursor:pointer;transition:background .2s,color .2s;line-height:1.2}
.simtab:hover{background:rgba(4,23,10,.06)}
.simtab.active{background:var(--ink);color:#fff}
.simpanels:not(.js) .simpanel + .simpanel{margin-top:24px}
.simpanels.js .simpanel{display:none}
.simpanels.js .simpanel.active{display:block}
@media (max-width:520px){
	.simtabs{width:100%;border-radius:18px}
	.simtab{flex:1 1 0;padding:10px 10px;font-size:.82rem;border-radius:14px;text-align:center}
}

/* ===== Simulateur autonome : constructeur d'appareils ===== */
.autosim-left .appliance-head,
.autosim-left .appliance-row{display:grid;grid-template-columns:1fr 74px 52px 60px 34px;gap:8px;align-items:center}
.autosim-left .appliance-head{margin:22px 0 8px;padding:0 2px}
.autosim-left .appliance-head span{font-family:var(--mono);text-transform:uppercase;font-size:.6rem;letter-spacing:.05em;color:#9aa08f}
.autosim-left .appliance-row{margin-bottom:8px}
.autosim-left .appliance-row .ap-f{display:block;min-width:0}
.autosim-left .appliance-row .ap-f>span{display:none}
.autosim-left .appliance-row select,
.autosim-left .appliance-row input{background:var(--ink-800);border:1px solid var(--line-dark);color:#fff;
	font-size:.88rem;padding:9px 10px;border-radius:10px;width:100%}
.autosim-left .appliance-row select{min-width:0;text-overflow:ellipsis}
.autosim-left .appliance-row input{text-align:center}
.autosim-left .appliance-row select:focus,
.autosim-left .appliance-row input:focus{outline:none;border-color:var(--green)}
.autosim-left .appliance-row .ap-del{background:transparent;border:1px solid var(--line-dark);color:#c7ccbe;
	border-radius:10px;cursor:pointer;font-size:1.15rem;line-height:1;padding:0;height:38px;display:grid;place-items:center}
.autosim-left .appliance-row .ap-del:hover{border-color:#e2624b;color:#ff7a5f}
.ap-add{margin-top:6px;background:rgba(76,175,80,.14);border:1px dashed rgba(76,175,80,.55);color:var(--green);
	font-weight:600;font-size:.9rem;padding:11px 16px;border-radius:12px;cursor:pointer;width:100%;transition:background .2s}
.ap-add:hover{background:rgba(76,175,80,.22)}
.autosim-autonomy{margin-top:24px;border-top:1px solid var(--line-dark);padding-top:20px}
.autosim-autonomy>label{display:block;font-family:var(--mono);text-transform:uppercase;font-size:.72rem;letter-spacing:.08em;color:#9aa08f;margin-bottom:12px}
.autosim-autorow{display:flex;align-items:center;gap:14px}
.autosim-autorow input[type=range]{flex:1;accent-color:var(--green)}
.autosim-autorow output{font-family:var(--display);font-weight:700;color:#fff;font-size:1.05rem;white-space:nowrap;min-width:78px;text-align:right}
@media (max-width:560px){
	.autosim-left .appliance-head{display:none}
	.autosim-left .appliance-row{grid-template-columns:1fr 1fr 1fr 40px;gap:8px;align-items:end}
	.autosim-left .appliance-row .ap-name{grid-column:1 / -1}
	.autosim-left .appliance-row .ap-f{display:flex;flex-direction:column;gap:4px}
	.autosim-left .appliance-row .ap-f>span{display:block;font-family:var(--mono);text-transform:uppercase;font-size:.56rem;letter-spacing:.05em;color:#9aa08f;padding-left:2px}
	.autosim-left .appliance-row .ap-del{height:40px;align-self:end}
}

/* ==========================================================================
   FAQ (accordéon natif)
   ========================================================================== */
.faq-list{display:grid;gap:12px;margin-top:36px;max-width:840px}
.faq-item{border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden}
.faq-item summary{list-style:none;cursor:pointer;padding:20px 24px;font-family:var(--display);font-weight:700;font-size:1.08rem;
  display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-family:var(--display);font-size:1.5rem;color:var(--green-700);transition:transform .25s;flex:0 0 auto}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item .faq-a{padding:0 24px 20px;color:var(--muted);font-size:.98rem}
.section--dark .faq-item{background:var(--ink-800);border-color:var(--line-dark)}
.section--dark .faq-item summary{color:#fff}

/* ==========================================================================
   BOUTIQUE PRODUITS (sidebar filtres + slider prix) — structure ancien site
   ========================================================================== */
.shop{display:grid;grid-template-columns:280px 1fr;gap:clamp(24px,3vw,38px);align-items:start}
.shop-side{position:sticky;top:88px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.shop-side .side-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.shop-side .side-head strong{font-family:var(--display);font-size:1.1rem}
.side-clear{font-size:.78rem;color:var(--muted);font-weight:700;background:none}
.side-clear:hover{color:var(--green-700)}
.side-group{padding:18px 0;border-top:1px solid var(--line)}
.side-group:first-of-type{border-top:none}
.side-label{font-family:var(--mono);text-transform:uppercase;font-size:.7rem;letter-spacing:.08em;color:var(--muted);display:block;margin-bottom:12px}
.cat-btn{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:9px 12px;border-radius:10px;font-weight:600;font-size:.92rem;color:var(--ink-800);background:none;text-align:left;transition:background .2s,color .2s;margin-bottom:2px}
.cat-btn:hover{background:var(--paper)}
.cat-btn.active{background:var(--green);color:#04170a}
.cat-btn .cnt{font-size:.74rem;opacity:.65;font-family:var(--mono)}
.cat-btn.active .cnt{opacity:.8}
.price-inputs{display:flex;gap:10px}
.price-in{flex:1;border:1px solid var(--line);border-radius:10px;padding:7px 10px;background:var(--paper-2);position:relative}
.price-in label{font-size:.65rem;color:var(--muted-2);text-transform:uppercase;letter-spacing:.05em;display:block}
.price-in .cur{position:absolute;right:10px;bottom:8px;font-size:.72rem;color:var(--muted-2)}
.price-in input{border:none;background:none;width:100%;font-weight:700;font-family:var(--display);font-size:1rem;padding-right:20px}
.price-in input:focus{outline:none}
.range-wrap{position:relative;height:30px;margin-top:16px}
.range-track{position:absolute;top:13px;left:0;right:0;height:4px;background:var(--line);border-radius:4px}
.range-fill{position:absolute;top:13px;height:4px;background:var(--green);border-radius:4px}
.rng{position:absolute;top:4px;left:0;width:100%;height:20px;-webkit-appearance:none;appearance:none;background:none;pointer-events:none}
.rng::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--green);border:3px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,.35);pointer-events:auto;cursor:pointer}
.rng::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--green);border:3px solid #fff;pointer-events:auto;cursor:pointer}
.range-labels{display:flex;justify-content:space-between;font-size:.72rem;color:var(--muted);margin-top:6px}
.presets{display:grid;gap:6px;margin-top:14px}
.preset{text-align:left;padding:8px 12px;border-radius:9px;border:1px solid var(--line);font-size:.84rem;font-weight:600;color:var(--muted);background:none;transition:.2s}
.preset:hover{border-color:var(--ink)}
.preset.active{background:var(--green);color:#04170a;border-color:var(--green)}
.sort-sel{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--paper-2);font-weight:600}
.results-count{display:flex;align-items:center;gap:12px;background:var(--paper);border-radius:12px;padding:12px 14px;margin-top:4px}
.results-count b{font-family:var(--display);font-size:1.5rem;color:var(--green-700)}
.results-count span{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.shop-topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:12px}
.shop-topbar .tb-count strong{font-family:var(--display)}
.view-toggle{display:flex;gap:6px}
.view-btn{width:38px;height:38px;border:1px solid var(--line);border-radius:9px;display:grid;place-items:center;color:var(--muted)}
.view-btn.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.view-btn .evi{width:18px;height:18px}
.shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.shop-grid.list-view{grid-template-columns:1fr;gap:14px}
.shop-grid.list-view .prod{display:grid;grid-template-columns:220px 1fr}
.shop-grid.list-view .prod-imglink{height:100%}
.shop-grid .prod.hidden{display:none}
.no-res{display:none;text-align:center;padding:60px 20px;color:var(--muted)}
.no-res.show{display:block}
.side-toggle{display:none}
@media (max-width:960px){
  .shop{grid-template-columns:1fr}
  .shop-side{position:static}
  .shop-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .shop-grid,.shop-grid.list-view .prod{grid-template-columns:1fr}
}

/* ==========================================================================
   RÉALISATIONS — barre de filtres + masonry — structure ancien site
   ========================================================================== */
.filter-bar2{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;margin-bottom:40px}
.fb{padding:9px 17px;border-radius:var(--radius-pill);border:1px solid var(--line);font-weight:600;font-size:.9rem;background:#fff;color:var(--ink-800);transition:.2s;cursor:pointer}
.fb:hover{border-color:var(--ink)}
.fb.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.fb .cnt{opacity:.6;font-size:.82em;margin-left:5px;font-family:var(--mono)}
.masonry{columns:3;column-gap:18px}
.masonry .folio-item{break-inside:avoid;margin-bottom:18px;width:100%}
.masonry .folio-item.hide{display:none}
.masonry .folio-item:nth-child(3n+1) img{aspect-ratio:4/5}
.masonry .folio-item:nth-child(3n+2) img{aspect-ratio:4/3}
.masonry .folio-item:nth-child(3n) img{aspect-ratio:1/1}
@media (max-width:900px){.masonry{columns:2}}
@media (max-width:560px){.masonry{columns:1}}

/* ==========================================================================
   PAGES DE DÉTAIL (single produit / réalisation / service / solution)
   ========================================================================== */
.breadcrumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.85rem;color:var(--muted);
  padding:22px var(--pad) 0;max-width:var(--wrap);margin-inline:auto}
.breadcrumb a{color:var(--muted);font-weight:600}
.breadcrumb a:hover{color:var(--green-700)}
.breadcrumb .sep{opacity:.5}
.breadcrumb .cur{color:var(--ink)}

.wrap.single{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,4vw,56px);align-items:start}
.single-media{border-radius:var(--radius-lg);overflow:hidden;position:relative;box-shadow:var(--shadow);background:var(--paper)}
.single-media img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.single-media .tagfloat{position:absolute;top:16px;left:16px;background:var(--tag);color:var(--tag-ink);font-family:var(--mono);text-transform:uppercase;font-size:.7rem;letter-spacing:.05em;padding:5px 11px;border-radius:6px}
.single-body .eyebrow{margin-bottom:14px}
.single-body h1{font-size:clamp(1.9rem,4vw,3rem);margin-bottom:14px}
.single-price{font-family:var(--display);font-weight:700;font-size:2rem;margin:6px 0 4px}
.single-price small{color:var(--muted);font-weight:500;font-size:.8rem}
.single-content{color:var(--muted);font-size:1.03rem;margin:16px 0}
.single-content p{margin-bottom:12px}
.single-meta{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}
.single-meta .mchip{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.03em;background:var(--paper);color:var(--muted);padding:6px 12px;border-radius:8px}
.single-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.single-back{margin-top:28px}
@media (max-width:860px){.wrap.single{grid-template-columns:1fr}}

/* Rendre les cartes cliquables */
.prod-link,.folio-link,.card-link{display:block;color:inherit;height:100%}
.prod-img .prod-imglink{display:block;width:100%;height:100%}
.prod-body h3 a{text-decoration:none}
.prod-body h3 a:hover{color:var(--green-700)}
a.folio-item{display:block}
.folio-cover{position:absolute;inset:0;z-index:5}

/* ==========================================================================
   POLISH — slider témoignages, retour haut, accessibilité, 404
   ========================================================================== */

/* Accessibilité : focus clavier visible */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:3px solid var(--green);outline-offset:2px;border-radius:6px}

/* Specs sur les fiches produit */
.prod-specs{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 2px}
.prod-spec{font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.03em;
  background:var(--paper);color:var(--muted);padding:3px 8px;border-radius:6px}

/* Slider témoignages */
.tslider{position:relative;max-width:860px;margin:0 auto}
.tslide{display:none}
.tslide.active{display:block;animation:fadeIn .5s var(--ease)}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.tslider .bigtest blockquote{font-size:clamp(1.2rem,2.4vw,1.85rem)}
.tslider-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:26px}
.tslider-btn{width:46px;height:46px;border-radius:50%;border:1px solid var(--line-dark);color:#eef0e8;display:grid;place-items:center;transition:.2s}
.tslider-btn:hover{background:var(--green);color:#04170a;border-color:var(--green)}
.tslider-btn .evi{width:20px;height:20px}
.tslider-dots{display:flex;gap:8px}
.tdot{width:9px;height:9px;border-radius:50%;background:var(--line-dark);cursor:pointer;transition:.2s}
.tdot.active{background:var(--green);width:26px;border-radius:20px}

/* ===== Avis Google (carte façon Google) ===== */
.greview-head{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 14px;margin-bottom:38px}
.greview-head .gh-g{display:inline-flex}
.greview-head .gh-g svg{width:26px;height:26px;display:block}
.greview-head .gh-lbl{font-weight:700;font-size:1.06rem;color:var(--ink)}
.greview-head .gh-stars{display:inline-flex;gap:2px}
.gh-stars .gstar{width:19px;height:19px;color:#fbbc04}
.greview-head .gh-rating{font-family:var(--display);font-weight:700;font-size:1.12rem;color:var(--ink)}
.greview-head .gh-count{color:var(--muted);font-size:.92rem;position:relative;padding-left:17px}
.greview-head .gh-count::before{content:"";position:absolute;left:7px;top:50%;transform:translateY(-50%);width:3px;height:3px;border-radius:50%;background:var(--muted-2)}
.greview{padding:clamp(24px,2.4vw,34px)}
.greview .grev-text{flex:1}
.grev-head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.grev-av{width:50px;height:50px;flex:none;border-radius:50%;display:grid;place-items:center;color:#fff;
	font-family:var(--display);font-weight:700;font-size:1.25rem;line-height:1}
.grev-id{flex:1;min-width:0}
.grev-name{display:block;font-family:var(--display);font-weight:700;font-size:1.12rem;color:var(--ink);letter-spacing:-.01em}
.grev-sub{display:block;font-size:.85rem;color:var(--muted);margin-top:2px}
.grev-g{flex:none}
.grev-g svg{width:22px;height:22px;display:block}
.grev-stars{display:flex;gap:3px;margin-bottom:14px}
.grev-stars .gstar{width:21px;height:21px;color:#fbbc04}
.grev-stars .gstar.off{color:#dadce0}
.grev-text{font-size:clamp(1.02rem,1.5vw,1.16rem);line-height:1.6;color:#3c4043}
/* Slider sur fond clair : flèches + points */
.section--stats .tslider-btn{border-color:var(--line);background:#fff;color:var(--ink)}
.section--stats .tslider-btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.section--stats .tdot{background:var(--line)}
.section--stats .tdot.active{background:var(--green)}
/* Rapprocher Partenaires ↔ Avis Google */
.clients-sec{padding-bottom:clamp(30px,4vw,56px)}
.avis-sec{padding-top:clamp(30px,4vw,56px)}
/* Carrousel d'avis : 3 cartes tiennent en ligne (puis se centrent) */
.greview-carousel .greview{flex:0 0 clamp(258px,30%,340px)}
/* Carrousel d'avis : contrôles centrés sous les cartes */
.greview-carousel .pcar-controls{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:32px}
.greview-carousel .pcar-controls .pcar-dots{margin-top:0}
/* Quand tout tient (≤ 3 avis) : cartes centrées, pas de contrôles */
.pcar--static .pcar-track{justify-content:center}
.pcar--static .pcar-nav,
.pcar--static .pcar-controls{display:none}

/* Bouton retour en haut */
.to-top{position:fixed;left:22px;bottom:22px;z-index:150;width:46px;height:46px;border-radius:50%;
  background:var(--ink);color:#fff;display:grid;place-items:center;box-shadow:var(--shadow-sm);
  opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .3s,transform .3s,background .2s}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{background:var(--green);color:#04170a}
.to-top .evi{width:20px;height:20px}
@media (max-width:520px){.to-top{left:16px;bottom:82px;width:42px;height:42px}}

/* Page 404 */
.err404{min-height:70vh;display:grid;place-items:center;text-align:center}
.err404 .code{font-family:var(--display);font-weight:700;font-size:clamp(5rem,18vw,11rem);line-height:1;color:var(--green);letter-spacing:-.04em}

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1024px){
  .grid-4,.statcards{grid-template-columns:repeat(2,1fr)}
  .proc{grid-template-columns:repeat(2,1fr);gap:34px}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .nav-toggle{display:grid;place-items:center}
  .nav-links{position:fixed;inset:66px 0 auto 0;flex-direction:column;align-items:stretch;gap:4px;background:#fff;padding:16px var(--pad) 28px;border-bottom:1px solid var(--line);transform:translateY(-140%);transition:transform .4s var(--ease);box-shadow:var(--shadow)}
  .nav-links.open{transform:none}
  .nav-links a{padding:13px 15px}
  .grid-3,.grid-2,.split,.contact-grid,.tgrid,.folio,.form-row,.ag-grid,.focus{grid-template-columns:1fr}
  .pillars{grid-template-columns:1fr}
  .split.rev .split-media{order:0}
  .statcard:nth-child(even){margin-top:0}
  .stats-strip .wrap{grid-template-columns:repeat(2,1fr);gap:20px 16px}
  .stat:nth-child(3){border-left:none;padding-left:0}
}
@media (max-width:520px){
  .grid-4,.statcards{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .proc{grid-template-columns:1fr}
}