*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}

:root{
  /* From logo */
  --indigo:#586eb0;
  --gold:#e5ab22;
  --amber:#e58322;
  --green:#3d8b3d;
  --green-bright:#6baf6b;

  /* Warm naturals */
  --cream:#FAFAF5;
  --warm-white:#f7f5f0;
  --sand:#ede8df;
  --bark:#2c2416;
  --soil:#3d3528;
  --stone:#7a7263;
  --moss:#e8eedf;

  --font-display:'DM Serif Display', Georgia, serif;
  --font-body:'Manrope', system-ui, sans-serif;
  --font-mono:'IBM Plex Mono', monospace;
}

body{
  font-family:var(--font-body);
  color:var(--bark);
  background:var(--cream);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{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}

::selection{background:rgba(107,175,107,.25);color:var(--bark)}

/* --- Section label pill --- */
.section-label{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  font-family:var(--font-mono);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--green);
  background:rgba(107,175,107,.1);
  border:1px solid rgba(107,175,107,.2);
  padding:.35rem .9rem .35rem .65rem;
  border-radius:100px;
  margin-bottom:1.25rem;
  width:fit-content;
}

.section-label::before{
  content:'\f058';
  font-family:'Font Awesome 6 Free';
  font-weight:900;
  font-size:.7rem;
}

/* ====================================================================
   HERO — The entire experience
   ==================================================================== */

.hero{
  position:relative;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

/* --- Background layers --- */

/* Video background */
.hero__video-wrap{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
}

.hero__video{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

/* Overlay — gentle left fade for text readability, video stays visible */
.hero__overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(90deg, rgba(250,250,245,.65) 0%, rgba(250,250,245,.35) 40%, transparent 70%);
  pointer-events:none;
}

/* Layer 5: grain overlay */
.hero__grain{
  display:none;
}

/* ====================================================================
   HEADER — Floating glass pill
   ==================================================================== */

.header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:100;
  padding:1rem 2rem;
  pointer-events:none;
  transition:padding .5s cubic-bezier(.16,1,.3,1);
}

.header.scrolled{ padding:.6rem 2rem; }

.header__pill{
  max-width:1320px;
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:1rem;
  padding:.55rem .6rem .55rem 1.25rem;
  pointer-events:all;

  background:rgba(255,255,255,.72);
  backdrop-filter:blur(24px) saturate(1.8);
  -webkit-backdrop-filter:blur(24px) saturate(1.8);
  border:1px solid rgba(255,255,255,.6);
  border-radius:100px;
  box-shadow:
    0 2px 8px rgba(0,0,0,.04),
    0 8px 32px rgba(0,0,0,.06),
    inset 0 1px 0 rgba(255,255,255,.8);

  transition:all .5s cubic-bezier(.16,1,.3,1);
}

.header.scrolled .header__pill{
  background:rgba(255,255,255,.88);
  box-shadow:
    0 2px 8px rgba(0,0,0,.05),
    0 12px 40px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.9);
}

/* Logo — huge on load, shrinks into pill on scroll */
.header__logo{
  flex-shrink:0;
  display:flex;
  align-items:center;
  margin-right:.5rem;
  position:relative;
  z-index:2;
  transition:opacity .3s;
}
.header__logo:hover{opacity:.8}
.header__logo img{
  height:120px;
  width:auto;
  margin:-45px 0 -45px -8px;
  filter:drop-shadow(0 4px 16px rgba(0,0,0,.1));
  transition:all .6s cubic-bezier(.16,1,.3,1);
}

.header.scrolled .header__logo img{
  height:70px;
  margin:-18px 0 -18px 0;
  filter:drop-shadow(0 1px 4px rgba(0,0,0,.06));
}

/* Nav links */
.header__nav{
  display:flex;
  align-items:center;
  gap:.1rem;
  flex:1;
  justify-content:center;
}

.header__link{
  font-size:.82rem;
  font-weight:600;
  color:var(--soil);
  padding:.45rem .75rem;
  border-radius:100px;
  transition:all .3s cubic-bezier(.16,1,.3,1);
  white-space:nowrap;
}

.header__link:hover{
  background:rgba(107,175,107,.1);
  color:var(--green);
}

.header__link--active{
  background:rgba(107,175,107,.12);
  color:var(--green);
}

/* CTA button */
.header__cta{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-family:var(--font-body);
  font-size:.82rem;
  font-weight:700;
  color:#fff;
  background:var(--green);
  padding:.55rem 1.3rem;
  border-radius:100px;
  box-shadow:0 2px 12px rgba(61,139,61,.2);
  transition:all .35s cubic-bezier(.16,1,.3,1);
  white-space:nowrap;
}
.header__cta svg{
  width:14px;height:14px;
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.header__cta:hover{
  background:#347a34;
  box-shadow:0 6px 24px rgba(61,139,61,.3);
  transform:translateY(-1px);
}
.header__cta:hover svg{transform:translateX(3px)}

/* Icons in nav — desktop hidden */
.header__link-icon{display:none}
.header__nav-cta{display:none}
.header__cta-mobile{display:none}

/* Burger */
.header__burger{
  display:none;
  flex-direction:column;
  gap:5px;
  width:26px;
  padding:4px 0;
  flex-shrink:0;
  position:relative;
  z-index:1002;
}
.header__burger span{
  height:2.5px;
  background:var(--bark);
  border-radius:2px;
  transition:all .4s cubic-bezier(.16,1,.3,1);
  display:block;
  width:100%;
}
.header__burger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.header__burger.open span:nth-child(2){opacity:0}
.header__burger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* --- Hero content --- */

.hero__content{
  position:relative;
  z-index:10;
  max-width:1380px;
  margin:0 auto;
  padding:clamp(7rem,14vh,10rem) 2.5rem 0;
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.hero__grid{
  display:grid;
  grid-template-columns:1fr 400px;
  gap:4rem;
  align-items:center;
}

.hero__text{
  min-width:0;
}

/* Badge pill */
.hero__badge{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  width:fit-content;
  padding:.4rem 1.1rem .4rem .6rem;
  background:var(--green);
  border:1px solid var(--green);
  color:#fff;
  border-radius:100px;
  font-family:var(--font-mono);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.04em;
  margin-bottom:2rem;
  animation:fadeSlideIn .8s cubic-bezier(.16,1,.3,1) .2s both;
}

.hero__badge-dot{
  width:7px;height:7px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 6px rgba(255,255,255,.5);
  animation:pulse 2.5s ease-in-out infinite;
}

@keyframes pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.4;transform:scale(.75)}
}

/* Headline */
.hero__title{
  font-family:var(--font-display);
  font-size:clamp(3rem, 7.5vw, 5.5rem);
  font-weight:400;
  line-height:.95;
  letter-spacing:-.02em;
  color:var(--bark);
  margin-bottom:1.5rem;
  max-width:700px;
  text-shadow:0 1px 12px rgba(255,255,255,.5);
  animation:fadeSlideIn .8s cubic-bezier(.16,1,.3,1) .4s both;
}

.hero__title em{
  font-style:italic;
  color:var(--gold);
  text-shadow:0 1px 8px rgba(255,255,255,.4);
}

/* Subtitle */
.hero__subtitle{
  font-size:clamp(1rem, 1.8vw, 1.2rem);
  font-weight:400;
  line-height:1.7;
  color:var(--bark);
  max-width:480px;
  margin-bottom:2.5rem;
  animation:fadeSlideIn .8s cubic-bezier(.16,1,.3,1) .6s both;
  background:transparent;
}

.hero__subtitle span{
  background:rgba(107,175,107,.18);
  padding:.15em .4em;
  border-radius:4px;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}

/* CTA row */
.hero__actions{
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
  animation:fadeSlideIn .8s cubic-bezier(.16,1,.3,1) .8s both;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  font-family:var(--font-body);
  font-weight:700;
  font-size:.88rem;
  padding:.85rem 1.8rem;
  border-radius:100px;
  border:2px solid transparent;
  transition:all .4s cubic-bezier(.16,1,.3,1);
  white-space:nowrap;
  line-height:1.2;
}

.btn svg{
  width:16px;height:16px;
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.btn:hover svg{transform:translateX(3px)}

.btn--green{
  background:var(--green);
  color:#fff;
  border-color:var(--green);
  box-shadow:0 2px 16px rgba(61,139,61,.2);
}
.btn--green:hover{
  background:#347a34;
  border-color:#347a34;
  box-shadow:0 8px 32px rgba(61,139,61,.3);
  transform:translateY(-2px);
}

.btn--outline{
  background:rgba(255,255,255,.6);
  color:var(--bark);
  border-color:rgba(0,0,0,.12);
  backdrop-filter:blur(8px);
}
.btn--outline:hover{
  background:#fff;
  border-color:var(--green);
  color:var(--green);
  box-shadow:0 4px 20px rgba(0,0,0,.06);
  transform:translateY(-2px);
}

/* --- Hero simulator card --- */

.hero__simulator{
  animation:fadeSlideIn .8s cubic-bezier(.16,1,.3,1) .6s both;
}

.sim{
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(20px) saturate(1.5);
  -webkit-backdrop-filter:blur(20px) saturate(1.5);
  border:1px solid rgba(255,255,255,.7);
  border-radius:20px;
  padding:1.75rem;
  box-shadow:
    0 2px 8px rgba(0,0,0,.03),
    0 8px 32px rgba(0,0,0,.06),
    inset 0 1px 0 rgba(255,255,255,.8);
}

.sim__header{
  display:flex;
  align-items:center;
  gap:.75rem;
  margin-bottom:1.5rem;
}

.sim__icon{
  width:40px;height:40px;
  border-radius:12px;
  background:var(--moss);
  color:var(--green);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.sim__icon svg{width:20px;height:20px}

.sim__title{
  font-family:var(--font-body);
  font-size:1rem;
  font-weight:800;
  color:var(--bark);
  line-height:1.2;
  margin-bottom:.1rem;
}

.sim__desc{
  font-size:.78rem;
  color:var(--stone);
  line-height:1.3;
}

.sim__field{margin-bottom:1.25rem}

.sim__label{
  display:block;
  font-size:.8rem;
  font-weight:700;
  color:var(--soil);
  margin-bottom:.4rem;
}

.sim__input-wrap{
  position:relative;
}

.sim__input{
  width:100%;
  padding:.85rem 3rem .85rem 1rem;
  font-size:1.05rem;
  font-family:var(--font-body);
  font-weight:600;
  border:2px solid rgba(0,0,0,.08);
  border-radius:14px;
  background:rgba(255,255,255,.8);
  color:var(--bark);
  transition:border-color .3s, box-shadow .3s;
}
.sim__input:focus{
  outline:none;
  border-color:var(--green-bright);
  box-shadow:0 0 0 4px rgba(107,175,107,.15);
}
.sim__input::placeholder{color:var(--stone);font-weight:400}

.sim__unit{
  position:absolute;
  right:1rem;top:50%;
  transform:translateY(-50%);
  font-size:.85rem;
  font-weight:700;
  color:var(--stone);
  pointer-events:none;
}

.sim__btn{
  width:100%;
  justify-content:center;
  padding:.9rem 1.5rem;
}

.sim .simulator__result{
  margin-top:1.25rem;
  border-radius:14px;
}
.sim .simulator__result--concerned{
  background:rgba(229,171,34,.12);
  border:2px solid var(--gold);
  padding:1.25rem;
}
.sim .simulator__result--safe{
  background:rgba(107,175,107,.1);
  border:2px solid var(--green-bright);
  padding:1.25rem;
}
.sim .simulator__result-title{
  font-family:var(--font-body);
  font-weight:800;
  font-size:1rem;
  margin-bottom:.4rem;
}
.sim .simulator__result-detail{
  font-size:.85rem;
  color:var(--soil);
  margin-bottom:.5rem;
}

/* --- FAQ --- */
.faq{max-width:800px;margin:0 auto}

.faq__item{border-bottom:1px solid var(--sand)}

.faq__question{
  width:100%;text-align:left;
  padding:1.35rem 0;
  font-family:var(--font-display);font-size:1.02rem;font-weight:600;
  color:var(--bark);
  display:flex;justify-content:space-between;align-items:center;
  gap:1.5rem;transition:color .3s;
}
.faq__question:hover{color:var(--green)}

.faq__toggle{
  width:28px;height:28px;
  border-radius:50%;
  border:2px solid var(--sand);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  transition:all .4s cubic-bezier(.16,1,.3,1);
}
.faq__toggle svg{width:14px;height:14px;color:var(--stone);transition:transform .4s cubic-bezier(.16,1,.3,1)}

.faq__item.active .faq__toggle{
  border-color:var(--indigo);background:var(--indigo);
}
.faq__item.active .faq__toggle svg{color:#fff;transform:rotate(45deg)}

.faq__answer{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.33,1,.68,1)}

.faq__answer-inner{
  padding-bottom:1.5rem;
  font-size:.95rem;color:var(--soil);line-height:1.75;
  max-width:640px;
}
.faq__answer-inner a{color:var(--green);text-decoration:underline}

@keyframes fadeSlideIn{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}

/* --- Trust bar (bottom of hero) --- */

.hero__trust{
  position:relative;
  z-index:10;
  margin-top:auto;
  border-top:1px solid rgba(0,0,0,.06);
  border-bottom:none;
  background:rgba(255,255,255,.45);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

.hero{margin-bottom:0}
.features{margin-top:0}

.trust-bar{
  max-width:1280px;
  margin:0 auto;
  padding:.9rem 2.5rem;
  display:flex;
  align-items:center;
  gap:2.5rem;
  flex-wrap:wrap;
}

.trust-item{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-size:.78rem;
  font-weight:600;
  color:var(--stone);
}

.trust-item i{
  font-size:.85rem;
  color:var(--green-bright);
  flex-shrink:0;
  width:18px;
  text-align:center;
}

.trust-item strong{
  color:var(--bark);
  font-weight:700;
}

/* --- Feature strip (overlapping bottom) --- */

.features{
  position:relative;
  z-index:20;
  max-width:100%;
  margin:0;
  padding:0;
}

.features__grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  background:#fff;
  border-radius:0;
  box-shadow:0 1px 0 rgba(0,0,0,.05);
  overflow:hidden;
}

.features__card{
  padding:1.75rem 1.5rem;
  border-right:1px solid rgba(0,0,0,.05);
  transition:background .3s;
}
.features__card:last-child{border-right:none}
.features__card:hover{background:var(--cream)}

.features__icon{
  width:40px;height:40px;
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:.85rem;
  background:var(--moss);
  color:var(--green);
}
.features__icon svg{width:20px;height:20px}

.features__card .features__icon--img{
  background:transparent;
  width:52px;height:52px;
  margin:0 auto 0 0;
  display:block;
  border-radius:0;
}
.features__icon--img img{width:100%;height:100%;object-fit:contain}

.features__title{
  font-family:var(--font-body);
  font-size:.85rem;
  font-weight:800;
  color:var(--bark);
  margin-bottom:.3rem;
}

.features__text{
  font-size:.76rem;
  color:var(--stone);
  line-height:1.5;
}

/* Stat variant */
.features__card--stat{
  background:var(--bark);
  border-right-color:rgba(255,255,255,.08);
}
.features__card--stat:hover{background:var(--soil)}
.features__card--stat .features__title{color:rgba(255,255,255,.8)}
.features__card--stat .features__text{color:rgba(255,255,255,.45)}

.features__number{
  font-family:var(--font-display);
  font-size:2.5rem;
  font-weight:400;
  color:var(--gold);
  line-height:1;
  margin-bottom:.3rem;
}
.features__number span{
  font-family:var(--font-body);
  font-size:1rem;
  font-weight:600;
  opacity:.7;
  margin-left:2px;
}

/* ====================================================================
   PRODUCT SECTIONS
   ==================================================================== */

.product{
  padding:6rem 0;
  background:var(--cream);
  border-bottom:1px solid var(--sand);
}

.product:nth-child(even){ background:var(--warm-white); }

.product__inner{
  max-width:1280px;
  margin:0 auto;
  padding:0 2.5rem;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4rem;
  align-items:center;
}

.product--reverse .product__inner{
  direction:rtl;
}
.product--reverse .product__content,
.product--reverse .product__visual{
  direction:ltr;
}

.product__content h2{
  font-family:var(--font-display);
  font-size:clamp(1.75rem, 3.5vw, 2.5rem);
  line-height:1.1;
  margin-bottom:1.25rem;
}

.product__lead{
  font-size:1.05rem;
  line-height:1.75;
  color:var(--soil);
  margin-bottom:1.75rem;
  max-width:540px;
}

.product__points{
  margin-bottom:1.75rem;
}

.product__points li{
  display:flex;
  align-items:flex-start;
  gap:.6rem;
  font-size:.92rem;
  line-height:1.6;
  color:var(--soil);
  margin-bottom:.6rem;
}

.product__points li i{
  color:var(--green-bright);
  font-size:.8rem;
  margin-top:.3rem;
  flex-shrink:0;
}

.product__hook{
  background:rgba(107,175,107,.1);
  border-left:3px solid var(--green-bright);
  padding:1rem 1.25rem;
  border-radius:0 12px 12px 0;
  font-size:.92rem;
  line-height:1.65;
  color:var(--bark);
  margin-bottom:2rem;
}

.product__hook strong{
  color:var(--green);
}

/* Visual placeholder */
.product__visual{
  position:relative;
  overflow:visible;
}

.product__img{
  width:100%;
  aspect-ratio:4/3;
  border-radius:20px;
  overflow:hidden;
  position:relative;
}

.product__img img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.product__img--pv{
  background:linear-gradient(135deg, #3d4f7a 0%, #586eb0 50%, #7b8dc5 100%);
}
.product__img--carport{
  background:linear-gradient(135deg, #4a6b4a 0%, #6baf6b 50%, #8ec98e 100%);
}
.product__img--panels{
  background:linear-gradient(135deg, #c78a00 0%, #e5ab22 50%, #f0c85a 100%);
}

/* Animated icon badge — top corner, text side */
.product__badge{
  position:absolute;
  top:-20px;
  left:-20px;
  width:80px;height:80px;
  border-radius:50%;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 24px rgba(0,0,0,.1), 0 0 0 5px var(--sand);
  z-index:3;
}
.product__badge i{font-size:1.8rem}
.product__badge img{width:48px;height:48px;object-fit:contain}

/* Produit reverse : badge coin haut-droit */
.product--reverse .product__badge{
  left:auto;
  right:-20px;
}

/* Soleil — pulse */
.product__badge--sun i{color:var(--gold)}
.product__badge--sun{animation:badgePulse 3s ease-in-out infinite}

/* Gear — rotation lente */
.product__badge--gear i{color:var(--green)}
.product__badge--gear i{animation:badgeSpin 8s linear infinite}

/* Bolt — pulse énergie */
.product__badge--bolt i{color:var(--amber)}
.product__badge--bolt{animation:badgePulse 2.5s ease-in-out infinite}

@keyframes badgePulse{
  0%,100%{transform:scale(1);box-shadow:0 4px 20px rgba(0,0,0,.1), 0 0 0 4px rgba(255,255,255,.5)}
  50%{transform:scale(1.08);box-shadow:0 6px 28px rgba(0,0,0,.12), 0 0 0 8px rgba(255,255,255,.3)}
}

@keyframes badgeSpin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}

.product__img-label{
  position:absolute;
  bottom:1rem;left:1rem;
  font-family:var(--font-mono);
  font-size:.65rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.6);
  background:rgba(0,0,0,.2);
  backdrop-filter:blur(4px);
  padding:.25rem .65rem;
  border-radius:6px;
}

/* ====================================================================
   IMPACT — Ecology + Budget + Simulator reminder
   ==================================================================== */

.impact{
  background:var(--bark);
  overflow:hidden;
}

.impact__container{
  max-width:1280px;
  margin:0 auto;
  padding:0 2.5rem;
}

/* Top: headline */
.impact__top{
  padding:5rem 0 3rem;
  text-align:center;
}

.impact__headline{
  font-family:var(--font-display);
  font-size:clamp(2rem, 5vw, 3.25rem);
  font-weight:400;
  color:#fff;
  line-height:1.1;
}

.impact__headline em{
  font-style:italic;
  color:var(--gold);
}

/* Cards grid */
.impact__cards{
  padding-bottom:3.5rem;
}

.impact__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.5rem;
}

.impact__card{
  border-radius:20px;
  padding:2.5rem;
  position:relative;
}

.impact__card--eco{
  background:linear-gradient(160deg, #1a3a1a 0%, #1e4d1e 100%);
  color:rgba(255,255,255,.85);
}

.impact__card--budget{
  background:linear-gradient(160deg, #3a2e10 0%, #4d3c14 100%);
  color:rgba(255,255,255,.85);
}

.impact__card-icon{
  width:48px;height:48px;
  border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:1.25rem;
  font-size:1.2rem;
}

.impact__card--eco .impact__card-icon{
  background:rgba(107,175,107,.2);
  color:var(--green-bright);
}

.impact__card--budget .impact__card-icon{
  background:rgba(229,171,34,.15);
  color:var(--gold);
}

.impact__card-number{
  font-family:var(--font-display);
  font-size:clamp(2.5rem, 5vw, 3.5rem);
  font-weight:400;
  line-height:1;
  margin-bottom:.5rem;
}

.impact__card--eco .impact__card-number{color:var(--green-bright)}
.impact__card--budget .impact__card-number{color:var(--gold)}

.impact__card h3{
  font-family:var(--font-body);
  font-size:1.1rem;
  font-weight:800;
  color:#fff;
  margin-bottom:.75rem;
}

.impact__card p{
  font-size:.92rem;
  line-height:1.65;
  color:rgba(255,255,255,.65);
  margin-bottom:1.25rem;
}

.impact__list{
  display:flex;
  flex-direction:column;
  gap:.5rem;
}

.impact__list li{
  display:flex;
  align-items:flex-start;
  gap:.5rem;
  font-size:.85rem;
  line-height:1.5;
  color:rgba(255,255,255,.6);
}

.impact__card--eco .impact__list li i{color:var(--green-bright);font-size:.7rem;margin-top:.25rem}
.impact__card--budget .impact__list li i{color:var(--gold);font-size:.7rem;margin-top:.25rem}

/* Simulator reminder strip */
.impact__simulator-strip{
  border-top:1px solid rgba(255,255,255,.08);
  padding:1.25rem 0;
}

.impact__sim-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  flex-wrap:wrap;
}

.impact__sim-text{
  display:flex;
  align-items:center;
  gap:1rem;
}

.impact__sim-text > i{
  font-size:1.5rem;
  color:var(--gold);
  flex-shrink:0;
}

.impact__sim-text strong{
  display:block;
  font-size:.95rem;
  color:#fff;
  margin-bottom:.15rem;
}

.impact__sim-text span{
  font-size:.82rem;
  color:rgba(255,255,255,.5);
}

/* ====================================================================
   PREUVE SOCIALE — compact
   ==================================================================== */

.proof{
  background:var(--warm-white);
  border-top:1px solid var(--sand);
  border-bottom:1px solid var(--sand);
  padding:2.5rem 0;
}

.proof__inner{
  max-width:1280px;
  margin:0 auto;
  padding:0 2.5rem;
  display:flex;
  align-items:center;
  gap:3rem;
}

/* Stats row */
.proof__stats{
  display:flex;
  align-items:center;
  gap:2rem;
  flex-shrink:0;
}

.proof__stat{text-align:center}

.proof__num{
  display:block;
  font-family:var(--font-display);
  font-size:1.75rem;
  color:var(--green);
  line-height:1;
  margin-bottom:.2rem;
}

.proof__label{
  font-size:.7rem;
  font-weight:600;
  color:var(--stone);
  text-transform:uppercase;
  letter-spacing:.04em;
}

.proof__sep{
  width:1px;
  height:36px;
  background:var(--sand);
  flex-shrink:0;
}

/* Quote */
.proof__quote{
  flex:1;
  padding-left:2.5rem;
  border-left:2px solid var(--green-bright);
  min-width:0;
}

.proof__quote > i{
  font-size:.75rem;
  color:var(--green-bright);
  margin-bottom:.4rem;
  display:block;
}

.proof__quote blockquote{
  font-family:var(--font-display);
  font-size:1.05rem;
  font-style:italic;
  color:var(--soil);
  line-height:1.55;
  margin-bottom:.35rem;
}

.proof__quote cite{
  font-family:var(--font-body);
  font-style:normal;
  font-size:.78rem;
  font-weight:600;
  color:var(--stone);
}

/* ====================================================================
   COMMENT ÇA MARCHE — 4 steps
   ==================================================================== */

.steps{
  background:var(--cream);
  padding:5rem 0;
}

.steps__container{
  max-width:1280px;
  margin:0 auto;
  padding:0 2.5rem;
}

.steps__header{
  text-align:center;
  max-width:520px;
  margin:0 auto 3.5rem;
}

.steps__header h2{
  font-family:var(--font-display);
  font-size:clamp(1.75rem, 4vw, 2.5rem);
  margin-bottom:.75rem;
}

.steps__header p{
  font-size:1rem;
  color:var(--stone);
}

/* Track */
.steps__track{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:2rem;
  position:relative;
}

.steps__line{
  position:absolute;
  top:28px;
  left:calc(12.5% + 28px);
  right:calc(12.5% + 28px);
  height:2px;
  background:linear-gradient(90deg, var(--green-bright), var(--gold));
  opacity:.25;
  z-index:0;
}

.steps__item{
  text-align:center;
  position:relative;
  z-index:1;
}

.steps__num{
  width:56px;height:56px;
  border-radius:50%;
  background:var(--warm-white);
  border:2px solid var(--sand);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);
  font-size:1.35rem;
  color:var(--green);
  margin:0 auto 1.1rem;
  transition:all .4s cubic-bezier(.16,1,.3,1);
}

.steps__item:hover .steps__num{
  border-color:var(--green-bright);
  background:var(--green);
  color:#fff;
  box-shadow:0 0 0 6px rgba(107,175,107,.12);
}

.steps__item h3{
  font-family:var(--font-body);
  font-size:.95rem;
  font-weight:800;
  margin-bottom:.4rem;
  color:var(--bark);
}

.steps__item p{
  font-size:.82rem;
  line-height:1.6;
  color:var(--stone);
  max-width:220px;
  margin:0 auto;
}

.steps__cta{
  text-align:center;
  margin-top:3rem;
}

/* ====================================================================
   CTA FINAL + FORMULAIRE
   ==================================================================== */

.cta-final{
  background:var(--bark);
  padding:5rem 0;
}

.cta-final__container{
  max-width:1280px;
  margin:0 auto;
  padding:0 2.5rem;
}

.cta-final__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4rem;
  align-items:center;
}

.cta-final__text h2{
  font-family:var(--font-display);
  font-size:clamp(1.75rem, 4vw, 2.5rem);
  color:#fff;
  line-height:1.1;
  margin-bottom:1rem;
}

.cta-final__text h2 em{
  font-style:italic;
  color:var(--gold);
}

.cta-final__text p{
  font-size:1rem;
  color:rgba(255,255,255,.6);
  line-height:1.7;
  margin-bottom:1.5rem;
  max-width:440px;
}

.cta-final__text .section-label{
  color:var(--gold);
  background:rgba(229,171,34,.1);
  border-color:rgba(229,171,34,.2);
}
.cta-final__text .section-label::before{color:var(--gold)}

.cta-final__reassurance{
  display:flex;
  flex-direction:column;
  gap:.5rem;
}

.cta-final__reassurance li{
  display:flex;align-items:center;gap:.5rem;
  font-size:.85rem;
  color:rgba(255,255,255,.55);
}

.cta-final__reassurance li i{
  color:var(--green-bright);
  font-size:.7rem;
}

/* Form card */
.cta-final__form-wrap{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:20px;
  padding:2rem;
}

.cta-form__title{
  font-family:var(--font-body);
  font-size:1.1rem;
  font-weight:800;
  color:#fff;
  margin-bottom:1.5rem;
  text-align:center;
}

.cta-form__step{display:none}
.cta-form__step--active{display:block}

.cta-form__field{margin-bottom:1rem}

.cta-form__field label{
  display:block;
  font-size:.8rem;
  font-weight:700;
  color:rgba(255,255,255,.7);
  margin-bottom:.35rem;
}

.cta-form__field input,
.cta-form__field select,
.cta-form__field textarea{
  width:100%;
  padding:.75rem 1rem;
  font-family:var(--font-body);
  font-size:.95rem;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  color:#fff;
  transition:border-color .3s;
}

.cta-form__field input::placeholder,
.cta-form__field textarea::placeholder{color:rgba(255,255,255,.3)}

.cta-form__field input:focus,
.cta-form__field select:focus,
.cta-form__field textarea:focus{
  outline:none;
  border-color:var(--green-bright);
  box-shadow:0 0 0 3px rgba(107,175,107,.15);
}

.cta-form__field select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='rgba(255,255,255,0.4)' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 1rem center;
  padding-right:2.5rem;
}

.cta-form__field select option{background:var(--bark);color:#fff}

.cta-form__field textarea{resize:vertical;min-height:80px}

.cta-form__error{
  display:none;
  font-size:.72rem;
  color:#f87171;
  margin-top:.25rem;
}
.cta-form__field.error input,
.cta-form__field.error select{border-color:#f87171}
.cta-form__field.error .cta-form__error{display:block}

.cta-form__btn{width:100%;justify-content:center}

.cta-form__actions{
  display:flex;gap:.75rem;
  margin-top:.5rem;
}
.cta-form__actions .btn{flex:1}

/* Success */
.cta-form__success{
  display:none;
  text-align:center;
  padding:2rem 0;
}
.cta-form__success.active{display:block}

.cta-form__success > i{
  font-size:2.5rem;
  color:var(--green-bright);
  margin-bottom:1rem;
}

.cta-form__success h3{
  font-family:var(--font-body);
  font-size:1.15rem;
  font-weight:800;
  color:#fff;
  margin-bottom:.5rem;
}

.cta-form__success p{
  font-size:.9rem;
  color:rgba(255,255,255,.6);
}

/* ====================================================================
   FOOTER
   ==================================================================== */

.footer{
  background:var(--bark);
  border-top:1px solid rgba(255,255,255,.06);
  padding:4rem 0 0;
}

.footer__container{
  max-width:1280px;
  margin:0 auto;
  padding:0 2.5rem;
}

.footer__grid{
  display:grid;
  grid-template-columns:1.8fr 1fr 1fr 1fr;
  gap:2.5rem;
  padding-bottom:3.5rem;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.footer__brand p{
  font-size:.82rem;
  color:rgba(255,255,255,.4);
  line-height:1.6;
  max-width:280px;
  margin-top:.5rem;
}

.footer__brand img{height:102px;width:auto}

.footer__grid h4{
  font-family:var(--font-mono);
  font-size:.65rem;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(255,255,255,.3);
  margin-bottom:1rem;
}

.footer__grid a{
  display:block;
  font-size:.85rem;
  color:rgba(255,255,255,.5);
  padding:.3rem 0;
  transition:color .3s;
}
.footer__grid a:hover{color:var(--gold)}

.footer__contact p{
  font-size:.82rem;
  color:rgba(255,255,255,.5);
  margin-bottom:.5rem;
  display:flex;align-items:center;gap:.5rem;
}
.footer__contact i{
  color:var(--gold);
  font-size:.75rem;
  width:16px;text-align:center;
}

.footer__bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1.25rem 0;
  font-size:.72rem;
  color:rgba(255,255,255,.2);
}

.footer__legal{display:flex;gap:1.5rem}
.footer__legal a{
  color:rgba(255,255,255,.2);
  font-size:.72rem;
  transition:color .3s;
}
.footer__legal a:hover{color:var(--gold)}

/* ====================================================================
   RESPONSIVE
   ==================================================================== */

@media(max-width:1024px){
  .features__grid{grid-template-columns:repeat(3,1fr)}
  .features__card:nth-child(4),
  .features__card:nth-child(5){display:none}
  .header__nav{display:none}
  .header__cta{display:none}
  .header__burger{display:flex;flex-shrink:0}
  .header__pill{padding:.45rem .75rem .45rem .85rem}

  /* CTA mobile — petit bouton entre logo et burger */
  .header__cta-mobile{
    display:inline-flex;
    align-items:center;
    margin-left:auto;
    margin-right:.6rem;
    font-family:var(--font-body);
    font-size:.72rem;
    font-weight:700;
    color:#fff;
    background:var(--green);
    padding:.4rem .85rem;
    border-radius:100px;
    white-space:nowrap;
    text-decoration:none;
    flex-shrink:0;
  }

  /* Menu overlay mobile */
  .header__nav.open{
    display:flex;
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    min-height:100vh;
    min-height:100dvh;
    background:var(--cream);
    z-index:1001;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    padding:6rem 1.5rem 2rem;
    overflow-y:auto;
    overflow-x:hidden;
    box-sizing:border-box;
    margin:0;
  }

  .header__nav.open .header__link{
    font-size:1.05rem;
    font-family:var(--font-body);
    font-weight:700;
    padding:1rem 0;
    color:var(--bark);
    border-bottom:1px solid var(--sand);
    border-radius:0;
    display:flex;
    align-items:center;
    gap:.75rem;
    text-decoration:none;
  }

  .header__nav.open .header__link--active{color:var(--green)}

  .header__nav.open .header__link-icon{
    display:inline-flex;
    width:24px;
    justify-content:center;
    font-size:.85rem;
    color:var(--green);
    flex-shrink:0;
  }

  .header__nav.open .header__nav-cta{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.5rem;
    margin-top:2rem;
    padding:1rem 1.5rem;
    background:var(--green);
    color:#fff;
    font-family:var(--font-body);
    font-size:1rem;
    font-weight:700;
    border-radius:12px;
    text-decoration:none;
  }
}

@media(max-width:768px){
  .header{padding:.6rem 1rem}
  .header__pill{border-radius:20px;padding:.45rem .6rem .45rem .85rem}
  .header__logo img{height:90px;margin:-30px 0 -30px -4px}
  .header.scrolled .header__logo img{height:52px;margin:-10px 0}
  .hero__content{padding:clamp(5.5rem,12vh,8rem) 1.25rem 2rem}
  .hero__grid{grid-template-columns:1fr;gap:0}
  .hero__badge{
    font-size:.68rem;
    margin-bottom:1rem;
  }
  .hero__title{
    font-size:clamp(2.25rem,9vw,3rem);
    line-height:1.1;
    text-shadow:0 2px 12px rgba(255,255,255,.5);
    border-left:4px solid var(--green);
    padding-left:.75rem;
    margin-bottom:1rem;
  }
  .hero__subtitle{margin-bottom:0}
  .hero__simulator{margin-top:2rem}
  .trust-item{font-size:.75rem}
  .product{padding:3.5rem 0}
  .product__inner{grid-template-columns:1fr;gap:2rem;padding:0 1.25rem}
  .product--reverse .product__inner{direction:ltr}
  .product__img{aspect-ratio:16/9}
  .impact__container{padding:0 1.25rem}
  .impact__top{padding:3.5rem 0 2rem}
  .impact__grid{grid-template-columns:1fr}
  .impact__sim-inner{flex-direction:column;text-align:center;gap:1rem}
  .impact__sim-text{flex-direction:column;text-align:center}
  .impact__sim-inner .btn{width:100%;justify-content:center}
  .proof__inner{flex-direction:column;gap:2rem;padding:0 1.25rem}
  .proof__quote{padding-left:1.25rem;border-left-width:2px}
  .steps__container{padding:0 1.25rem}
  .steps__track{grid-template-columns:repeat(2, 1fr);gap:1.5rem}
  .steps__line{display:none}
  .cta-final__container{padding:0 1.25rem}
  .cta-final__grid{grid-template-columns:1fr;gap:2.5rem}
  .footer{padding:3rem 0 0}
  .footer__container{padding:0 1.25rem}
  .footer__grid{grid-template-columns:1fr;gap:1.5rem}
  .footer__brand img{height:160px}
  .footer__brand p{margin-top:.75rem}
  .footer__bottom{flex-direction:column;gap:.5rem;text-align:center}
  .footer__legal{justify-content:center}

  .faq-split{grid-template-columns:1fr !important;gap:2rem !important}
  .faq-photo{position:static !important}
  .related-grid{grid-template-columns:1fr !important}

  .trust-bar{
    padding:.9rem 1.25rem;
    gap:1.25rem;
    flex-direction:column;
    align-items:flex-start;
  }

  .features{padding:0}
  .features__grid{grid-template-columns:1fr}
  .features__card{border-right:none;border-bottom:1px solid rgba(0,0,0,.05)}
  .features__card:last-child{border-bottom:none}
  .features__card--stat{border-bottom-color:rgba(255,255,255,.08)}
}

@media(max-width:480px){
  .hero__sun{width:180px;height:180px;top:8%;right:2%}
  .hero__panels{display:none}
}

@media(prefers-reduced-motion:reduce){
  .hero__sun{animation:none}
  .hero__badge-dot{animation:none}
  .hero__badge,.hero__title,.hero__subtitle,.hero__actions{animation:none;opacity:1;transform:none}
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}