:root{
  --sy:clamp(72px,8vw,112px);      /* espace vertical entre les sections */
  --gap-head:clamp(24px,3vw,34px); /* bandeau numéroté → titre */
  --gap-body:clamp(40px,5vw,56px); /* titre → contenu */
}
html{scroll-behavior:smooth}
body{margin:0;background:#ECEBE8;color:#1A1B1E;font-family:Geist,system-ui,sans-serif;-webkit-font-smoothing:antialiased;font-feature-settings:"ss01","cv11"}
*{box-sizing:border-box}
a{color:inherit;text-decoration:none}
a:hover{color:#F25A1D}
::selection{background:#F25A1D;color:#fff}
input[type=range]{accent-color:#F25A1D;width:100%;height:4px;cursor:pointer;margin:0}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.75)}}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}

/* Menu : liens collés au logo, bouton à droite */
.nav-links{margin-left:12px;margin-right:auto}

/* Hover states (overrides inline styles from the design export) */
.nav-link:hover{background:rgba(26,27,30,.05)!important;color:#1A1B1E!important}
.btn-nav:hover,.btn-footer:hover{background:#D94A12!important;color:#fff!important}
.btn-hero:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 22px 40px -16px rgba(242,90,29,.95)!important;color:#fff!important}
.btn-lift:hover{transform:translateY(-2px);color:#fff!important}
.link-underline:hover{border-color:#F25A1D!important;color:#F25A1D!important}
.card-lift:hover{transform:translateY(-5px);box-shadow:0 28px 50px -30px rgba(26,27,30,.4)}

/* Responsive behaviour that the design runtime handled in JS */
@media (max-width:899px){
  .nav-links{display:none!important}
  .btn-nav{font-size:13px!important;padding-left:12px!important}
}
@media (max-width:420px){
  .btn-nav .btn-nav-label{display:none}
  .btn-nav::before{content:"Audit gratuit"}
}
.sticky-cta{display:none!important}
@media (max-width:899px){
  body.scrolled .sticky-cta{display:flex!important}
}

/* Sticky headings only make sense when the layout has two columns */
@media (max-width:959px){
  .sticky-col{position:static!important}
}

/* Hero : borne de recharge décorative */
.hero-card{z-index:1}
.ev{position:absolute;left:-80px;top:-124px;width:360px;height:760px;z-index:0;pointer-events:none;overflow:visible}
.ev-flow{animation:evflow 1.1s linear infinite}
.ev-ring{animation:evring 3.2s cubic-bezier(.5,0,.3,1) infinite}
.ev-bar{transform-box:fill-box;transform-origin:left center;animation:evbar 3.2s cubic-bezier(.5,0,.3,1) infinite}
.ev-led{animation:blink 1.6s infinite}
.ev-halo{animation:evhalo 3.2s ease-in-out infinite}
@keyframes evflow{to{stroke-dashoffset:-22}}
@keyframes evring{0%{stroke-dashoffset:214}70%,100%{stroke-dashoffset:0}}
@keyframes evbar{0%{transform:scaleX(0)}70%,100%{transform:scaleX(1)}}
@keyframes evhalo{0%,100%{opacity:.55}50%{opacity:1}}
/* Une seule colonne : la borne passe à droite, au-dessus du simulateur, sans câble */
@media (max-width:1079px){
  .hero-visual{margin-top:96px}
  .ev{left:auto;right:12px;top:-104px;width:240px;height:507px}
  .ev-cable{display:none}
}

/* Packs offerts */
.pk-total{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;margin-top:16px;padding:18px 24px;border-radius:20px;background:#1E1F23;color:#F4F3F0;position:relative;overflow:hidden}
.pk-total::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(242,90,29,.18) 50%,transparent 70%);transform:translateX(-100%);animation:pkshine 4.5s ease-in-out infinite;pointer-events:none}
.pk-total-label{display:block;font-family:'Geist Mono';font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#8A8882}
.pk-total-txt strong{font-family:Archivo;font-weight:800;font-stretch:106%;font-size:20px;letter-spacing:-.02em}
.pk-total-val{font-family:Archivo;font-weight:900;font-stretch:112%;font-size:clamp(30px,3.6vw,42px);letter-spacing:-.04em;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.pk-total-val em{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-size:.55em;letter-spacing:0;color:#F25A1D}
.pk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:16px;margin-top:16px}
.pk{--mx:50%;--my:0%;position:relative;display:flex;flex-direction:column;border-radius:24px;background:#F7F6F4;border:1px solid rgba(26,27,30,.08);overflow:hidden;transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s,border-color .45s}
.pk::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(420px circle at var(--mx) var(--my),rgba(242,90,29,.14),transparent 45%);opacity:0;transition:opacity .4s;pointer-events:none;z-index:2}
.pk:hover{transform:translateY(-6px);box-shadow:0 34px 60px -34px rgba(26,27,30,.45);border-color:rgba(242,90,29,.35)}
.pk:hover::before{opacity:1}
.pk-visual{position:relative;height:210px;background:#1E1F23;background-image:radial-gradient(circle at 85% 0%,rgba(242,90,29,.3),transparent 55%),linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:auto,22px 22px,22px 22px;overflow:hidden}
.pk-num{position:absolute;top:14px;left:16px;font-family:'Geist Mono';font-size:11px;color:rgba(255,255,255,.45);z-index:1}
.pk-mock{position:absolute;inset:0;display:grid;place-items:center}
/* Maquette landing page */
.pk-browser{width:min(78%,300px);border-radius:12px;background:#F7F6F4;box-shadow:0 26px 40px -18px rgba(0,0,0,.75);overflow:hidden;transform:translateY(22px) rotate(-2deg);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.pk:hover .pk-browser{transform:translateY(10px) rotate(0)}
.pk-bar{display:flex;align-items:center;gap:4px;padding:7px 9px;background:#E2E0DB}
.pk-bar i{width:7px;height:7px;border-radius:50%;background:#C9C7C1}.pk-bar i:first-child{background:#F25A1D}
.pk-bar span{margin-left:8px;flex:1;font-family:'Geist Mono';font-size:8px;color:#77756F;background:#F7F6F4;border-radius:5px;padding:2px 6px;white-space:nowrap;overflow:hidden}
.pk-page{position:relative;padding:12px 12px 16px}
.pk-logo{display:flex;align-items:center;gap:5px}.pk-logo b{width:12px;height:12px;border-radius:4px;background:#1A1B1E}.pk-logo span{width:36px;height:5px;border-radius:3px;background:#1A1B1E}
.pk-h{height:9px;width:72%;border-radius:4px;background:#1A1B1E;margin-top:12px}.pk-h2{width:50%;margin-top:5px;background:#F25A1D}
.pk-lines span{display:block;height:4px;width:62%;border-radius:2px;background:#DAD8D3;margin-top:7px}.pk-lines span+span{width:46%;margin-top:4px}
.pk-cta{display:inline-flex;align-items:center;gap:5px;margin-top:11px;background:#F25A1D;color:#fff;font-size:8px;font-weight:600;padding:5px 9px;border-radius:999px;animation:pkcta 2.4s ease-in-out infinite}
.pk-cta em{font-style:normal}
.pk-ev{position:absolute;right:14px;bottom:10px;width:30px;transform-origin:bottom;transition:transform .6s}
.pk:hover .pk-ev{transform:scale(1.12)}
.pk-chip{position:absolute;font-size:10px;font-weight:600;color:#1A1B1E;background:#fff;border-radius:999px;padding:5px 10px;box-shadow:0 12px 24px -12px rgba(0,0,0,.7);white-space:nowrap;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.pk-chip::before{content:"✓ ";color:#F25A1D}
.pk-chip-1{top:30px;right:12%;transform:rotate(4deg)}
.pk-chip-2{bottom:22px;left:9%;transform:rotate(-5deg)}
.pk:hover .pk-chip-1{transform:translate(6px,-4px) rotate(0)}
.pk:hover .pk-chip-2{transform:translate(-6px,4px) rotate(0)}
/* Maquette Google */
.pk-map{position:absolute;inset:0;background:#2A2B30}
.pk-road{position:absolute;background:rgba(255,255,255,.07);border-radius:4px}
.pk-road.r1{left:-10%;right:-10%;top:42%;height:10px;transform:rotate(-8deg)}
.pk-road.r2{top:-10%;bottom:-10%;left:62%;width:9px;transform:rotate(12deg)}
.pk-road.r3{left:-10%;right:40%;top:72%;height:6px;transform:rotate(6deg)}
.pk-pin{position:absolute;left:61%;top:22%;width:26px;animation:pkpin 2.2s ease-in-out infinite}
.pk-pin svg{position:relative;z-index:1;display:block;filter:drop-shadow(0 6px 8px rgba(0,0,0,.5))}
.pk-pulse{position:absolute;left:50%;bottom:-4px;width:26px;height:10px;margin-left:-13px;border-radius:50%;background:rgba(242,90,29,.5);animation:pkpulse 2.2s ease-out infinite}
.pk-gcard{position:absolute;left:8%;bottom:16px;width:min(70%,250px);background:#fff;color:#1A1B1E;border-radius:14px;padding:11px 13px;box-shadow:0 22px 36px -16px rgba(0,0,0,.8);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.pk:hover .pk-gcard{transform:translateY(-6px)}
.pk-gname{font-weight:700;font-size:12px}
.pk-stars{display:flex;align-items:center;gap:1px;margin-top:3px;font-size:11px}
.pk-stars span{font-size:10px;color:#55534E;margin-right:4px}
.pk-stars i{font-style:normal;color:#DAD8D3;transition:color .3s}
.pk-google.is-in .pk-stars i{color:#F5B400}
.pk-google.is-in .pk-stars i:nth-child(2){transition-delay:.15s}.pk-google.is-in .pk-stars i:nth-child(3){transition-delay:.3s}.pk-google.is-in .pk-stars i:nth-child(4){transition-delay:.45s}.pk-google.is-in .pk-stars i:nth-child(5){transition-delay:.6s}.pk-google.is-in .pk-stars i:nth-child(6){transition-delay:.75s}
.pk-gtag{font-size:9.5px;color:#77756F;margin-top:3px}
.pk-gbtns{display:flex;gap:5px;margin-top:8px}
.pk-gbtns span{font-size:8.5px;font-weight:600;color:#1A73E8;border:1px solid #DADCE0;border-radius:999px;padding:3px 7px}
/* Corps des cartes */
.pk-body{position:relative;z-index:3;padding:24px 26px 26px}
.pk-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.pk-top h3{font-family:Archivo;font-weight:800;font-stretch:106%;font-size:24px;letter-spacing:-.03em;margin:0}
.pk-sub{font-size:14px;color:#77756F;margin:4px 0 0}
.pk-price{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.pk-price s{font-family:Archivo;font-weight:800;font-size:20px;letter-spacing:-.02em;color:#A5A39D;text-decoration-thickness:2px;text-decoration-color:#F25A1D;white-space:nowrap}
.pk-free{font-family:'Geist Mono';font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:#F25A1D;border-radius:999px;padding:5px 10px}
.pk-list{list-style:none;margin:18px 0 0;padding:0}
.pk-list li{display:grid;grid-template-columns:18px 1fr auto;gap:10px;align-items:baseline;font-size:15px;line-height:1.5;padding:10px 0;border-top:1px solid rgba(26,27,30,.08);transition:padding .3s}
.pk-list li:hover{padding-left:4px}
.pk-check{width:16px;height:16px;fill:none;stroke:#F25A1D;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;transform:translateY(3px)}
.pk-val{font-family:'Geist Mono';font-size:11px;color:#A5A39D;white-space:nowrap}
@keyframes pkshine{0%,60%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@keyframes pkcta{0%,100%{box-shadow:0 0 0 0 rgba(242,90,29,.5)}50%{box-shadow:0 0 0 6px rgba(242,90,29,0)}}
@keyframes pkpin{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes pkpulse{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.8);opacity:0}}
@media (max-width:480px){
  .pk-visual{height:180px}
  .pk-top{flex-direction:column;gap:10px}
  .pk-price{flex-direction:row;align-items:center}
  .pk-list li{grid-template-columns:18px 1fr;font-size:14px}
  .pk-val{grid-column:2}
}
@media (hover:none){.pk::before{display:none}}

/* Offer ticket */
.ticket{flex-direction:row}
.ticket-right{border-left:2px dashed rgba(26,27,30,.18)}
.notch-1{top:-16px;left:-17px}
.notch-2{top:calc(100% - 16px);left:-17px}
@media (max-width:919px){
  .ticket{flex-direction:column}
  .ticket>div{flex:none!important}
  .ticket-right{border-left:0;border-top:2px dashed rgba(26,27,30,.18)}
  .notch-1{top:-17px;left:-16px}
  .notch-2{top:-17px;left:auto;right:-16px}
}

/* FAQ */
.faq-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.4,0,.2,1)}
.faq-item.open .faq-panel{grid-template-rows:1fr}
.faq-num{color:#77756F}
.faq-item.open .faq-num{color:#F25A1D}
.faq-icon{background:#ECEBE8;color:#1A1B1E}
.faq-item.open .faq-icon{transform:rotate(45deg);background:#F25A1D;color:#fff}
@media (max-width:560px){
  .faq-btn{grid-template-columns:36px 1fr 32px!important}
  .faq-answer{padding:0 8px 24px 48px!important}
}

/* Timeline */
.tl-item{opacity:.42}
.tl-item.active{opacity:1}
.tl-item .tl-bar{width:0}
.tl-item.active .tl-bar{width:100%}
.tl-item:focus-visible{outline:2px solid #F25A1D;outline-offset:4px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}