: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}
}

/* 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}
}