/* Polices auto-hébergées (RGPD : aucune requête vers Google au chargement des pages) */
@font-face{
  font-family:'Karla'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/karla.woff2') format('woff2');
}
@font-face{
  font-family:'Karla'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fonts/karla.woff2') format('woff2');
}
@font-face{
  font-family:'Karla'; font-style:normal; font-weight:600; font-display:swap;
  src:url('fonts/karla.woff2') format('woff2');
}
@font-face{
  font-family:'Karla'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/karla.woff2') format('woff2');
}
@font-face{
  font-family:'Oswald'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/oswald.woff2') format('woff2');
}
@font-face{
  font-family:'Oswald'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fonts/oswald.woff2') format('woff2');
}
@font-face{
  font-family:'Oswald'; font-style:normal; font-weight:600; font-display:swap;
  src:url('fonts/oswald.woff2') format('woff2');
}
@font-face{
  font-family:'Oswald'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/oswald.woff2') format('woff2');
}

:root{
  --forest:#152A1D;
  --forest-2:#1E3927;
  --moss:#2F5138;
  --leaf:#839A4C;
  --leaf-dim:#697B3D;
  --leaf-pale:#C7D2AE;
  --leaf-bright:#97AF5C;
  --cream:#F4F2E9;
  --cream-2:#E9E5D6;
  --ink:#152A1D;
  --steel:#546156;
  --line: rgba(21,42,29,0.14);
  --white:#FFFFFF;
  /* ---- timing scale: every hover/interaction transition on the site pulls
     from this small set, instead of ad hoc durations/easings, for a
     consistent, deliberate feel across every page. ---- */
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-fast:0.18s;
  --dur:0.28s;
  --dur-slow:0.6s;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Karla', sans-serif;
  color:var(--ink);
  background:var(--cream);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:'Oswald', sans-serif;
  text-transform:uppercase;
  letter-spacing:0.01em;
  line-height:1.08;
  color:var(--forest);
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
button{font-family:inherit; cursor:pointer;}
.wrap{max-width:1180px; margin:0 auto; padding:0 28px; transition:max-width var(--dur-slow) var(--ease);}
/* le conteneur restait figé à 1180px quelle que soit la taille de l'écran :
   en plein écran sur un grand moniteur, tout le contenu (textes, grilles
   à 2/3 colonnes) se retrouvait comprimé au centre avec d'énormes marges
   vides de chaque côté. Il s'élargit maintenant progressivement au-delà
   de 1440px, pour utiliser vraiment l'espace disponible sur les grands
   écrans — mobile et tablette ne sont pas concernés (déjà gérés par les
   breakpoints existants plus bas). */
@media (min-width:1440px){ .wrap{max-width:1320px;} }
@media (min-width:1800px){ .wrap{max-width:1480px; padding:0 40px;} }
:focus-visible{outline:3px solid var(--leaf); outline-offset:2px;}

/* ===== reveal-on-scroll ===== */
.reveal{opacity:0; transform:translateY(22px); transition:opacity 0.7s cubic-bezier(.2,.7,.2,1), transform 0.7s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1; transform:translateY(0);}
.reveal-stagger > *{opacity:0; transform:translateY(18px); transition:opacity 0.6s ease, transform 0.6s ease;}
.reveal-stagger.in > *{opacity:1; transform:translateY(0);}
/* per-child stagger delay is set inline by script.js and cleared after the
   reveal transition ends, so it never delays later hover transitions */
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-stagger > *{opacity:1 !important; transform:none !important; transition:none !important;}
  html{scroll-behavior:auto;}
}

/* ===== HEADER ===== */
header{
  position:fixed; top:0; left:0; right:0; z-index:200;
  background:rgba(21,42,29,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.header-inner{
  max-width:1180px; margin:0 auto; padding:0 28px;
  display:flex; align-items:center; justify-content:space-between;
  height:76px;
}
@media (min-width:1440px){ .header-inner{max-width:1320px;} }
@media (min-width:1800px){ .header-inner{max-width:1480px; padding:0 40px;} }
.logo{
  font-family:'Oswald', sans-serif;
  font-weight:700; font-size:1.5rem;
  color:var(--white); letter-spacing:0.02em;
  display:flex; align-items:center; gap:10px;
  background:none; border:none;
}
/* "63" collé directement à "ECOLOC" : regroupés dans un seul span
   (.logo-text) qui n'est pas lui-même un enfant flex, le "gap" du flex
   parent ne s'applique donc plus entre les deux — seul .logo-num reste
   coloré, "ECOLOC" garde la couleur blanche du logo. */
.logo .logo-num{color:var(--leaf);}
.logo-badge{display:flex; align-items:center; justify-content:center; line-height:0;}
.logo-badge img{
  height:52px; width:auto; display:block;
  transition:transform var(--dur-slow) var(--ease-out);
}
.header-right{display:flex; align-items:center; gap:18px;}
.navlink-mobile-only{display:none;}
nav{display:flex; align-items:center; gap:8px; position:relative;}
nav a.navlink{
  color:var(--cream-2); font-size:0.9rem; font-weight:600;
  text-transform:uppercase; letter-spacing:0.04em;
  position:relative; padding:10px 14px;
}
nav a.navlink::after{
  content:''; position:absolute; left:14px; right:14px; bottom:6px; height:2px; width:0;
  background:var(--leaf); transition:width var(--dur) var(--ease-out);
}
/* le survol garde son propre petit soulignement immédiat ; l'indicateur
   "actif" est maintenant la barre glissante partagée ci-dessous, pas ce
   soulignement par lien (qui se figeait indépendamment sur chaque lien
   au lieu de vraiment se déplacer). */
nav a.navlink:hover::after{width:calc(100% - 28px);}
nav a.navlink.active{color:var(--white);}
/* ---- barre verte glissante : un seul élément, positionné par JS
   (script.js, syncNavIndicator) en transform+width — les deux
   propriétés transitionnent ensemble pour un vrai glissement fluide
   d'un lien à l'autre, plutôt que deux soulignements qui s'ouvrent et
   se ferment indépendamment. ---- */
.nav-indicator{
  position:absolute; left:0; bottom:6px; height:2px; background:var(--leaf);
  width:0; opacity:0; pointer-events:none; border-radius:1px;
  transition:transform var(--dur-slow) var(--ease-out), width var(--dur-slow) var(--ease-out), opacity var(--dur) var(--ease);
  will-change:transform;
}
@media (prefers-reduced-motion: reduce){
  .nav-indicator{transition:opacity var(--dur) var(--ease);}
}
/* même traitement "moderne" que .btn-leaf (dégradé + ombre déjà visible
   au repos, coins arrondis) plutôt que l'aplat plat d'origine, avec une
   icône de repérage pour illustrer "retrouver ma machine". */
.header-phone{
  display:flex; align-items:center; gap:8px;
  background:linear-gradient(155deg, var(--leaf-bright) 0%, var(--leaf) 100%);
  color:var(--forest);
  padding:11px 20px; font-weight:700; font-size:0.92rem;
  white-space:nowrap; border:none; border-radius:8px;
  box-shadow:0 3px 10px rgba(131,154,76,0.28);
  transition:background var(--dur) var(--ease), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease);
}
.header-phone:hover{background:linear-gradient(155deg, #A6BE68 0%, var(--leaf-bright) 100%); transform:translateY(-1px); box-shadow:0 8px 18px rgba(131,154,76,0.35);}
.header-phone svg{width:16px; height:16px; flex-shrink:0;}
.burger{display:none; background:none; border:none; padding:8px;}
.burger span{display:block; width:24px; height:2px; background:var(--white); margin:6px 0; transition:transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease);}
.burger.open span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.burger.open span:nth-child(2){opacity:0;}
.burger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

/* ===== HERO (home) ===== */
/* centré verticalement (plutôt que calé en bas) : le contenu reste ainsi
   au centre de l'écran quelle que soit sa hauteur — mobile, PC, plein
   écran, très grand moniteur — au lieu de se retrouver planté en bas sur
   les formats très hauts/étroits ou très larges. */
.hero{position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:center; justify-content:center; padding-top:76px; overflow:hidden;}
.hero-bg{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(21,42,29,0.72) 0%, rgba(21,42,29,0.8) 45%, rgba(21,42,29,0.97) 100%),
             url('images/parc-ecoloc63.webp') center/cover no-repeat;
  /* un léger flou + un voile bien plus sombre/opaque : la photo doit se
     deviner en arrière-plan, pas se regarder en détail — ça camoufle son
     manque de netteté au lieu de l'exposer. */
  filter:saturate(1.15) blur(3px);
  transform:scale(1.1); animation:heroZoom 12s ease-out forwards;
}
@keyframes heroZoom{ to{ transform:scale(1); } }
/* la photo (paysage, 550x378) est extrêmement recadrée par "cover" sur un
   écran mobile très étroit et haut : sur un iPhone type, on ne voit plus
   que ~30% de sa largeur, zoomée dans le vide — on réduit donc la hauteur
   de la section et on retire le zoom d'entrée pour limiter ce recadrage. */
@media (max-width:700px){
  .hero{min-height:88vh; min-height:88svh;}
  .hero-bg{transform:scale(1); animation:none;}
  /* sur un écran étroit ET court (petit téléphone), le titre et le texte
     passent sur beaucoup plus de lignes : le bloc centré peut alors
     devenir assez haut pour venir chevaucher le repère "Défiler" positionné
     en absolu en bas de section. On réserve donc une bande basse dédiée en
     réduisant l'espace de centrage, plutôt que de dépendre d'une hauteur de
     contenu qui varie avec la longueur du texte et la largeur d'écran. */
  .hero{padding-bottom:104px;}
}
.hero-content{position:relative; max-width:1180px; margin:0 auto; padding:0 28px; width:100%; text-align:center;}
@media (min-width:1440px){ .hero-content{max-width:1320px;} }
@media (min-width:1800px){ .hero-content{max-width:1480px; padding:0 40px;} }
.hero-tag{color:var(--leaf); font-weight:700; font-size:0.9rem; letter-spacing:0.06em; margin-bottom:18px; display:flex; align-items:center; justify-content:center; gap:10px; opacity:0; animation:fadeUp 0.8s ease 0.15s forwards;}
.hero-tag::before{content:''; width:34px; height:2px; background:var(--leaf);}
/* centré, et un peu plus large (15ch -> 30ch) pour que le titre se casse
   en 2 lignes bien pleines plutôt qu'en 3 lignes courtes et hachées. */
.hero h1{color:var(--white); font-size:clamp(2.3rem, 5.6vw, 4.4rem); max-width:30ch; margin:0 auto 24px; opacity:0; animation:fadeUp 0.8s ease 0.3s forwards;}
.hero p{color:var(--cream-2); font-size:1.13rem; max-width:46ch; margin:0 auto 36px; opacity:0; animation:fadeUp 0.8s ease 0.45s forwards;}
.hero-actions{display:flex; justify-content:center; gap:16px; flex-wrap:wrap; opacity:0; animation:fadeUp 0.8s ease 0.6s forwards;}
@keyframes fadeUp{ from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:translateY(0);} }
.scroll-cue{position:absolute; bottom:26px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--cream-2); font-size:0.75rem; letter-spacing:0.08em; text-transform:uppercase; opacity:0; animation:fadeUp 0.8s ease 0.9s forwards;}
.scroll-cue .line{width:1px; height:34px; background:linear-gradient(var(--leaf), transparent); position:relative; overflow:hidden;}
.scroll-cue .line::after{content:''; position:absolute; top:-34px; left:0; width:100%; height:34px; background:linear-gradient(var(--white), transparent); animation:cueMove 1.8s ease-in-out infinite;}
@keyframes cueMove{ 50%{ top:34px; } 100%{ top:34px; } }

.btn{display:inline-flex; align-items:center; gap:10px; padding:16px 30px; font-weight:700; font-size:0.94rem; text-transform:uppercase; letter-spacing:0.04em; border:2px solid transparent; border-radius:9px; background:transparent; transition:transform var(--dur-fast) var(--ease-out), background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);}
/* bouton principal repensé : dégradé subtil (au lieu d'un aplat uni) et
   une ombre légère au repos déjà — pas seulement au survol — pour un
   rendu plus doux et actuel que le vert plat d'origine. */
.btn-leaf{background:linear-gradient(155deg, var(--leaf-bright) 0%, var(--leaf) 100%); color:var(--forest); box-shadow:0 3px 10px rgba(131,154,76,0.28);}
.btn-leaf:hover{background:linear-gradient(155deg, #A6BE68 0%, var(--leaf-bright) 100%); transform:translateY(-2px); box-shadow:0 12px 26px rgba(131,154,76,0.4);}
.btn-outline{border-color:rgba(255,255,255,0.5); color:var(--white);}
.btn-outline:hover{background:rgba(255,255,255,0.1); border-color:var(--white); transform:translateY(-2px);}
.btn-forest{background:var(--forest); color:var(--white);}
.btn-forest:hover{background:var(--moss); transform:translateY(-2px);}
.btn-line{border-color:var(--line); color:var(--forest);}
.btn-line:hover{background:var(--cream-2);}
.btn svg{width:16px; height:16px;}

/* ===== STAT BAR ===== */
.statbar{background:var(--forest-2); border-top:1px solid rgba(255,255,255,0.08);}
.statbar .wrap{display:grid; grid-template-columns:repeat(4,1fr); padding:40px 28px;}
.stat{text-align:center; color:var(--cream); border-left:1px solid rgba(255,255,255,0.12); padding:0 12px;}
.stat:first-child{border-left:none;}
.stat .num{font-family:'Oswald', sans-serif; font-weight:700; font-size:clamp(1.7rem, 3vw, 2.5rem); color:var(--leaf); display:block;}
.stat .label{font-size:0.82rem; text-transform:uppercase; letter-spacing:0.04em; color:#9FB0A3; margin-top:6px; display:block;}

/* ===== SECTION GENERIC ===== */
section{padding:110px 0;}
.section-head{max-width:640px; margin-bottom:56px;}
.kicker{color:var(--leaf-dim); font-weight:700; font-size:0.85rem; letter-spacing:0.05em; margin-bottom:12px; display:block; position:relative; padding-left:0;}
.section-head h2{font-size:clamp(1.9rem, 4vw, 2.7rem); margin-bottom:18px;}
.section-head p{color:var(--steel); font-size:1.08rem; max-width:56ch;}

/* ---- révélation "texte" au scroll, sur tous les titres de section : le
   même déclencheur que .reveal (voir IntersectionObserver dans script.js,
   qui ajoute .in) — un petit trait se dessine devant le kicker, puis le
   titre se découvre de gauche à droite comme un rideau qui s'ouvre, façon
   "swipe" — juste après le fondu du bloc, jamais à la place. Discret,
   un seul passage, jamais répété. ---- */
.section-head .kicker::before{
  content:''; display:inline-block; width:0; height:2px; background:var(--leaf-dim);
  margin-right:0; vertical-align:middle; transition:width 0.5s var(--ease-out) 0.1s;
}
.section-head.in .kicker::before{width:22px; margin-right:8px;}
.section-head h2{
  clip-path:inset(0 100% 0 0);
  transition:clip-path 0.85s var(--ease-out) 0.12s;
}
.section-head.in h2{clip-path:inset(0 0 0 0);}
@media (prefers-reduced-motion: reduce){
  .section-head .kicker::before{transition:none; width:22px; margin-right:8px;}
  .section-head h2{transition:none; clip-path:inset(0 0 0 0);}
}

/* ===== ABOUT ===== */
.about{background:var(--cream);}
.about-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:64px; align-items:center;}
.about-text p{margin-bottom:18px; color:#33402F; font-size:1.02rem;}
.about-text p:last-child{margin-bottom:0;}
.about-media{position:relative; overflow:hidden;}
.about-logo-panel{
  height:460px; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 42%, rgba(131,154,76,0.12) 0%, transparent 65%);
  transition:transform var(--dur-slow) var(--ease-out);
}
.about-media:hover .about-logo-panel{transform:scale(1.02);}
.logo-reveal{display:flex; flex-direction:column; align-items:center; gap:22px;}
.logo-reveal-gear{
  width:150px; height:auto; opacity:0;
  filter:drop-shadow(0 16px 26px rgba(21,42,29,0.16));
  transform:rotate(-220deg) scale(0.6);
}
.about-media.in .logo-reveal-gear{animation:gearUnroll 1.1s cubic-bezier(.2,.8,.25,1) forwards;}
@keyframes gearUnroll{
  0%{opacity:0; transform:rotate(-220deg) scale(0.6);}
  55%{opacity:1; transform:rotate(12deg) scale(1.05);}
  100%{opacity:1; transform:rotate(0deg) scale(1);}
}
.logo-reveal-text{display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;}
.lr-line{opacity:0; transform:translateY(14px); text-transform:uppercase;}
.about-media.in .lr-eco{animation:lrLineUp 0.6s ease 0.85s forwards;}
.about-media.in .lr-tag{animation:lrLineUp 0.6s ease 1.05s forwards;}
.about-media.in .lr-sub{animation:lrLineUp 0.6s ease 1.25s forwards;}
@keyframes lrLineUp{ to{opacity:1; transform:translateY(0);} }
.lr-eco{font-family:'Oswald', sans-serif; font-weight:700; font-size:1.9rem; letter-spacing:0.02em; color:var(--forest);}
.lr-tag{font-family:'Oswald', sans-serif; font-weight:700; font-size:1.15rem; letter-spacing:0.03em; color:var(--leaf-dim);}
.lr-sub{font-family:'Karla', sans-serif; font-weight:600; font-size:0.72rem; letter-spacing:0.14em; color:var(--steel);}
@media (prefers-reduced-motion: reduce){
  .logo-reveal-gear, .lr-line{opacity:1 !important; transform:none !important; animation:none !important;}
}

/* ===== ECO ===== */
.eco{background:linear-gradient(160deg, var(--moss) 0%, var(--forest) 100%); color:var(--cream);}
.eco .kicker{color:var(--leaf-pale);}
.eco .section-head{max-width:820px;}
.eco .section-head h2{color:var(--white);}
.eco .section-head p{color:#CFE0D2; max-width:none; margin-bottom:14px;}
.eco .section-head p:last-child{margin-bottom:0;}
.eco-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.14);}
.eco-card{background:var(--forest-2); padding:38px 32px; transition:background var(--dur) var(--ease), transform var(--dur) var(--ease-out);}
.eco-card:hover{background:#254230; transform:translateY(-4px);}
.eco-card .icon{width:44px; height:44px; margin-bottom:20px; color:var(--leaf);}
.eco-card h3{color:var(--white); font-size:1.15rem; margin-bottom:12px; text-transform:none; letter-spacing:0;}
.eco-card p{color:#C4D6C7; font-size:0.96rem;}
.eco-banner-wrap{
  display:flex; align-items:center; gap:24px;
  max-width:760px; margin:60px auto 0; padding-top:44px;
  border-top:1px solid rgba(255,255,255,0.14);
}
.eco-banner-label{
  color:var(--leaf-pale); font-weight:700; font-size:0.78rem; text-transform:uppercase;
  letter-spacing:0.05em; white-space:nowrap; flex-shrink:0;
}
.eco-banner{display:block; width:100%; height:auto; clip-path:inset(0 100% 0 0);}
.eco-banner-wrap.in .eco-banner{animation:ecoBannerReveal 1.3s cubic-bezier(.2,.7,.2,1) 0.15s forwards;}
@keyframes ecoBannerReveal{ to{clip-path:inset(0 0 0 0);} }
@media (prefers-reduced-motion: reduce){
  .eco-banner{clip-path:none;}
}

/* ===== FLEET OVERVIEW CARDS (home) ===== */
.fleet{background:var(--cream);}
.fleet-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; margin-bottom:8px;}
.fleet-card{position:relative; background:linear-gradient(160deg, #0F1D14 0%, var(--forest) 100%); aspect-ratio:4/3; overflow:hidden; display:flex; align-items:flex-end; border:none; text-align:left; padding:0; width:100%;}
/* padding en % (et non en px) : la grille s'élargit sur les grands écrans
   (voir .wrap) et fait grandir ces cartes en proportion (aspect-ratio:4/3)
   — un padding fixe en px devient alors minuscule à cette échelle et les
   machines finissent par coller les bords. En %, la marge grandit avec
   la carte, quelle que soit sa taille réelle à l'écran. */
.fleet-card img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:8% 10% 16%; box-sizing:border-box; transition:transform var(--dur-slow) var(--ease-out);}
.fleet-card:hover img{transform:scale(1.05);}
.fleet-card::before{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(21,42,29,0) 32%, rgba(21,42,29,0.94) 100%); z-index:1;}
.fleet-card-content{position:relative; z-index:2; padding:26px; width:100%;}
.fleet-card-content .tag{color:var(--leaf); font-size:0.78rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; display:block; margin-bottom:8px;}
.fleet-card-content h3{color:var(--white); font-size:1.1rem; margin-bottom:4px;}
.fleet-card-content .arrow{display:inline-flex; align-items:center; gap:6px; color:var(--cream-2); font-size:0.85rem; margin-top:10px; opacity:0; transform:translateY(6px); transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease-out);}
.fleet-card:hover .fleet-card-content .arrow{opacity:1; transform:translateY(0);}
.fleet-card-content .arrow svg{width:14px; height:14px;}

/* ===== BRANDS ===== */
.brands{background:var(--forest-2); padding:70px 0; overflow:hidden;}
.brands-head{text-align:center; color:var(--cream-2); font-size:0.85rem; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:38px;}
.brands-marquee{overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);}
.brands-row{display:flex; align-items:center; gap:0; width:max-content; will-change:transform; animation:brandsScroll 20s linear infinite;}
/* Le décalage est fixé en pixels exacts par script.js (--marquee-shift),
   mesuré sur le vrai premier jeu de logos, plutôt que "-50%" : un simple
   pourcentage se recalcule à chaque frame par rapport à la largeur du
   bloc, donc le moindre micro-écart d'arrondi (zoom de page, police qui
   finit de charger, redimensionnement) décale le point de bouclage et
   provoque un petit saut visible à chaque tour — d'où le bug intermittent.
   Le -50% reste en secours tant que le JS n'a pas encore mesuré. */
@keyframes brandsScroll{ from{transform:translate3d(0,0,0);} to{transform:translate3d(var(--marquee-shift, -50%),0,0);} }
.brand-logo{
  background:var(--white); border-radius:10px; margin:0 10px;
  width:150px; height:70px; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; box-shadow:0 4px 14px rgba(0,0,0,0.18); padding:14px;
}
/* hauteur fixe (plutôt que object-fit:contain sur toute la boîte) : les
   logos fournis ont des ratios très différents (certains très larges et
   fins, d'autres presque carrés) — une hauteur commune garantit qu'ils
   paraissent tous de la même taille, comme sur une vraie bande de logos
   partenaires. */
.brand-logo img{height:34px; width:auto; max-width:100%; object-fit:contain; transition:transform var(--dur) var(--ease-out);}
.brand-logo:hover{transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,0.24);}
.brand-logo:hover img{transform:scale(1.05);}
@media (prefers-reduced-motion: reduce){
  .brands-row{animation:none; flex-wrap:wrap; justify-content:center; width:auto;}
  .brands-row .brand-logo[aria-hidden="true"]{display:none;}
}

/* ===== ZONE ===== */
.zone{background:var(--cream); text-align:center;}
.zone .section-head{margin:0 auto 40px; text-align:center;}
.zone .section-head p{margin:0 auto;}
.clientele{display:flex; flex-wrap:wrap; justify-content:center; gap:12px; max-width:820px; margin:0 auto;}
.chip{border:1px solid var(--line); padding:10px 20px; font-size:0.9rem; color:var(--forest); font-weight:600; transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease-out);}
.chip:hover{background:var(--leaf); border-color:var(--leaf); transform:translateY(-2px);}

/* ===== CONTACT ===== */
.contact{background:var(--forest-2); color:var(--white);}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:70px;}
.contact h2{color:var(--white); font-size:clamp(1.9rem,4vw,2.6rem); margin-bottom:20px;}
.contact-lead{color:#C4CEC6; font-size:1.05rem; max-width:48ch; margin-bottom:18px;}
.contact-lead strong{color:var(--white);}
.contact-perks{list-style:none; margin-bottom:22px;}
.contact-perks li{display:flex; gap:10px; align-items:flex-start; color:#C4CEC6; font-size:0.98rem; padding:7px 0;}
.contact-perks li svg{width:17px; height:17px; color:var(--leaf); flex-shrink:0; margin-top:3px;}
.contact-tagline{color:var(--leaf); font-weight:700; text-transform:uppercase; letter-spacing:0.02em; font-size:1rem; margin-bottom:30px;}
.info-list{list-style:none;}
.info-list li{display:flex; gap:16px; padding:20px 0; border-bottom:1px solid rgba(255,255,255,0.1); transition:padding-left var(--dur) var(--ease-out);}
.info-list li:hover{padding-left:6px;}
.info-list li:first-child{padding-top:0;}
.info-list .icon{width:22px; height:22px; color:var(--leaf); flex-shrink:0; margin-top:2px;}
.info-list strong{display:block; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.04em; color:#93A19B; margin-bottom:4px;}
.info-list span, .info-list a{font-size:1.05rem; font-weight:600;}
.info-list a:hover{color:var(--leaf);}
.contact-card{background:var(--forest); padding:44px;}
.contact-card h3{color:var(--white); font-size:1.3rem; margin-bottom:14px;}
.contact-card p{color:#B9C4BC; margin-bottom:28px;}
.form-row{margin-bottom:16px;}
.form-row label{display:block; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.04em; color:#93A19B; margin-bottom:6px;}
.form-row input, .form-row textarea{
  width:100%; padding:12px 14px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.18);
  color:var(--white); font-family:inherit; font-size:0.95rem; transition:border-color 0.2s ease, background 0.2s ease;
}
.form-row input:focus, .form-row textarea:focus{outline:none; border-color:var(--leaf); background:rgba(255,255,255,0.1);}
.form-row textarea{resize:vertical; min-height:96px;}
.hours-row{display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid rgba(255,255,255,0.08); font-size:0.95rem;}
.hours-row span:first-child{color:#B9C4BC;}
.hours-row span:last-child{font-weight:700; color:var(--white);}
.map-embed{width:100%; height:420px; margin-top:70px; border-top:1px solid rgba(255,255,255,0.1);}
.map-embed iframe{width:100%; height:100%; border:0; display:block;}
.map-placeholder{
  height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  background:var(--forest-2); color:#C4CEC6; text-align:center; padding:40px 28px;
}
.map-placeholder p{max-width:52ch; margin:0; font-size:0.98rem;}
.map-placeholder a{color:var(--leaf); font-weight:700;}
.map-placeholder-btn{padding:12px 26px; font-size:0.88rem;}

/* ===== COOKIE CONSENT BANNER ===== */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:500;
  background:var(--forest); color:var(--cream);
  padding:22px 28px; display:flex; flex-wrap:wrap; gap:16px 28px; align-items:center; justify-content:space-between;
  box-shadow:0 -8px 26px rgba(0,0,0,0.28); border-top:1px solid rgba(255,255,255,0.1);
}
.cookie-banner p{margin:0; font-size:0.92rem; max-width:640px; color:#D6DED8; flex:1 1 380px;}
.cookie-banner a{color:var(--leaf); text-decoration:underline;}
.cookie-banner-actions{display:flex; gap:12px; flex-shrink:0;}
.cookie-banner .btn{padding:12px 24px; font-size:0.85rem;}
@media (max-width:560px){
  .cookie-banner{padding:18px 20px;}
  .cookie-banner-actions{width:100%;}
  .cookie-banner-actions .btn{flex:1;}
}

/* ===== FOOTER ===== */
footer{background:var(--forest); color:#8C9990; padding:36px 0;}
.footer-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; font-size:0.85rem;}
.footer-row a{color:#8C9990; transition:color 0.2s ease;}
.footer-row a:hover{color:var(--leaf);}
.footer-links{display:flex; gap:24px; flex-wrap:wrap;}

/* ===== BACK TO TOP ===== */
.to-top{
  position:fixed; right:24px; bottom:24px; width:48px; height:48px;
  background:var(--leaf); color:var(--forest); border:none;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transform:translateY(10px);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease-out), background var(--dur) var(--ease);
  z-index:150;
}
.to-top.show{opacity:1; pointer-events:auto; transform:translateY(0);}
.to-top:hover{background:var(--leaf-bright);}
.to-top svg{width:20px; height:20px;}

/* ===================================================== */
/* ===== PRODUCT PAGE SPECIFIC STYLES ===== */
/* ===================================================== */

.breadcrumb{
  background:var(--forest-2); padding:130px 0 26px;
}
.legal{background:var(--cream); padding:70px 0 110px;}
.legal-content{max-width:820px;}
.legal-content h1{font-size:clamp(1.9rem,4vw,2.6rem); margin-bottom:30px;}
.legal-content h2{font-size:1.2rem; margin:36px 0 14px; text-transform:none; letter-spacing:0;}
.legal-content p{color:#33402F; font-size:1rem; margin-bottom:16px;}
.legal-content a{color:var(--leaf-dim); text-decoration:underline;}
.legal-content a:hover{color:var(--leaf);}
.breadcrumb .wrap{display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:0.85rem; color:#A7B7AA;}
.breadcrumb a{color:#A7B7AA; transition:color 0.2s ease;}
.breadcrumb a:hover{color:var(--leaf);}
.breadcrumb .sep{color:#5C6C60;}
.breadcrumb .current{color:var(--leaf);}

.product-hero{background:var(--forest-2); padding-bottom:0;}
.product-hero .wrap{
  display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; padding-bottom:70px;
}
.product-hero-media{position:relative;}
.product-hero-media img{
  width:100%; height:420px; object-fit:contain;
  filter:drop-shadow(0 20px 24px rgba(0,0,0,0.3));
  animation:machineFloat 3.6s ease-in-out infinite;
  will-change:transform;
}
/* légère flottaison verticale de la photo entière — un seul mouvement
   simple et sobre, identique sur toutes les machines, plutôt qu'une
   animation propre à chaque partie mobile. */
@keyframes machineFloat{
  0%, 100%{transform:translateY(0);}
  50%{transform:translateY(-12px);}
}
@media (prefers-reduced-motion: reduce){
  .product-hero-media img{animation:none;}
}
.product-badges{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px;}
.badge{
  padding:7px 16px; font-size:0.78rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em;
  border:1px solid rgba(255,255,255,0.25); color:var(--leaf-pale);
}
.product-hero-text .kicker{color:var(--leaf-pale);}
.product-kicker-row{display:flex; align-items:center; gap:10px; margin-bottom:12px;}
.product-kicker-row .kicker{margin-bottom:0;}

/* ---- discreet animated machine-type icon, next to the kicker ---- */
.machine-icon{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.14);
}
.machine-icon svg{width:22px; height:22px; overflow:visible;}
.mi-scissor-body{transform-origin:50px 84px; animation:miScissorExtend 3.2s ease-in-out infinite;}
.mi-mast-jib{animation:miMastSlide 3.4s ease-in-out infinite;}
.mi-boom-lower{transform-origin:40px 78px; animation:miBoomLower 3s ease-in-out infinite;}
.mi-boom-upper{transform-origin:60px 42px; animation:miBoomUpper 3s ease-in-out infinite;}
.mi-tele-boom{transform-origin:46px 68px; animation:miTeleBoom 3s ease-in-out infinite;}
.mi-tele-fork{transform-origin:78px 32px; animation:miTeleFork 3s ease-in-out infinite;}
@keyframes miScissorExtend{ 0%,100%{transform:scaleY(1);} 50%{transform:scaleY(1.16);} }
@keyframes miMastSlide{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-16px);} }
@keyframes miBoomLower{ 0%,100%{transform:rotate(0deg);} 50%{transform:rotate(9deg);} }
@keyframes miBoomUpper{ 0%,100%{transform:rotate(0deg);} 50%{transform:rotate(-7deg);} }
@keyframes miTeleBoom{ 0%,100%{transform:rotate(0deg);} 50%{transform:rotate(8deg);} }
@keyframes miTeleFork{ 0%,100%{transform:rotate(0deg);} 50%{transform:rotate(-6deg);} }
@media (prefers-reduced-motion: reduce){
  .mi-scissor-body, .mi-mast-jib, .mi-boom-lower, .mi-boom-upper, .mi-tele-boom, .mi-tele-fork{animation:none;}
}
.product-hero-text h1{color:var(--white); font-size:clamp(2rem,4.2vw,3.2rem); margin-bottom:20px; max-width:14ch;}
.product-hero-text p{color:#CFDCD1; font-size:1.08rem; max-width:52ch; margin-bottom:30px;}
.key-figures{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.15); margin-bottom:34px;}
/* un 2e bloc, séparé et pleine largeur, pour un chiffre qui ne fait pas
   partie de la même série que les 3 du dessus (ex. nombre de modèles
   disponibles, à part des caractéristiques techniques). */
.key-figures + .key-figures--single{margin-top:-24px;}
.key-figures--single{grid-template-columns:1fr;}
.key-figure{background:var(--forest); padding:18px 16px; text-align:center;}
.key-figure .kf-num{font-family:'Oswald'; font-weight:700; color:var(--leaf); font-size:1.4rem; display:block;}
.key-figure .kf-label{font-size:0.72rem; text-transform:uppercase; letter-spacing:0.03em; color:#9FB0A3; margin-top:4px; display:block;}
.product-hero-actions{display:flex; gap:14px; flex-wrap:wrap;}

.product-body{background:var(--cream);}
.product-body-grid{display:grid; grid-template-columns:1.3fr 0.7fr; gap:60px; align-items:start;}
.product-desc h2{font-size:1.6rem; margin-bottom:20px;}
.product-desc p{color:#33402F; font-size:1.03rem; margin-bottom:18px; max-width:66ch;}
.side-card{background:var(--forest); color:var(--white); padding:32px; margin-bottom:20px;}
.side-card h3{color:var(--white); font-size:1.05rem; margin-bottom:14px; text-transform:none; letter-spacing:0;}
.side-card p{color:#C4D2C7; font-size:0.92rem; margin-bottom:20px;}

.acc-tabs{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px;}
.acc-tab{
  padding:10px 20px; font-size:0.85rem; font-weight:700; letter-spacing:0.02em;
  border:1px solid var(--line); color:var(--steel); background:var(--cream);
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.acc-tab.active{background:var(--forest); border-color:var(--forest); color:var(--white);}
.acc-tab:hover:not(.active){border-color:var(--forest);}
.chariot-model h3{font-size:1.25rem; margin-bottom:6px;}
.chariot-model p{color:#33402F; font-size:1.02rem; margin-bottom:0;}

.spec-block{background:var(--white); border:1px solid var(--line); padding:8px 32px;}
.tech-diagram{background:var(--white); border:1px solid var(--line); padding:28px; text-align:center;}
.tech-diagram img{max-width:100%; height:auto; margin:0 auto;}
.spec-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:0 32px;}
.spec-row{display:flex; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:1px solid var(--line); font-size:0.94rem;}
.spec-row:last-child, .spec-row:nth-last-child(2){border-bottom:none;}
.spec-row .k{color:var(--steel);}
.spec-row .v{color:var(--forest); font-weight:700; text-align:right;}

.spec-highlights{list-style:none; display:grid; grid-template-columns:repeat(2,1fr); gap:0 32px; background:var(--white); border:1px solid var(--line); padding:8px 32px;}
.spec-highlights li{display:flex; gap:10px; align-items:flex-start; color:#33402F; font-size:0.96rem; padding:14px 0; border-bottom:1px solid var(--line);}
.spec-highlights li svg{width:17px; height:17px; color:var(--leaf-dim); flex-shrink:0; margin-top:3px;}

.model-list-intro{color:var(--steel); font-size:0.96rem; margin:14px 0 20px;}
.model-list{list-style:none; border-top:1px solid var(--line);}
.model-list li{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:14px 0; border-bottom:1px solid var(--line); font-size:0.94rem;}
.model-list .model-name{color:var(--forest); font-weight:600;}
.model-list .model-fiche{flex-shrink:0; font-size:0.8rem; font-weight:700; text-transform:uppercase; letter-spacing:0.03em; color:var(--leaf-dim); white-space:nowrap;}
.model-list .model-fiche:hover{color:var(--leaf);}
.model-list .model-fiche.disabled{color:var(--steel); font-weight:400; text-transform:none; letter-spacing:0;}

/* ---- per-model tab content: name + embedded fiche technique preview ---- */
.model-tab-card{padding-top:4px;}
.model-tab-card h3{font-size:1.2rem; margin-bottom:4px;}
.model-tab-brand{color:var(--steel); font-size:0.82rem; text-transform:uppercase; letter-spacing:0.04em; margin-bottom:8px;}
.model-tab-note{color:var(--steel); font-size:0.88rem; font-style:italic; margin-bottom:18px;}
.model-tab-frame{background:var(--white); border:1px solid var(--line); height:480px; margin-bottom:14px;}
.model-tab-frame iframe{width:100%; height:100%; border:0; display:block;}
.model-tab-expand{display:inline-flex; align-items:center; gap:6px; font-size:0.82rem; font-weight:700; color:var(--leaf-dim); text-transform:uppercase; letter-spacing:0.03em;}
.model-tab-expand:hover{color:var(--leaf);}
.model-tab-empty{background:var(--cream-2); border:1px solid var(--line); padding:40px 32px; text-align:center; color:var(--steel); margin-bottom:14px;}
@media (max-width:900px){
  .model-tab-frame{height:60vh; min-height:360px;}
}

/* ===== FICHE TECHNIQUE VIEWER ===== */
.fiche-viewer{background:var(--cream); padding:44px 0 80px;}
.fiche-viewer-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:28px;}
.fiche-viewer-head h1{font-size:clamp(1.5rem,3vw,2.1rem); margin-top:8px; max-width:32ch;}
.fiche-pdf-frame{background:var(--white); border:1px solid var(--line); height:85vh; min-height:600px; position:relative;}
.fiche-pdf-frame iframe{width:100%; height:100%; border:0; display:block;}
.fiche-pdf-fallback{position:absolute; bottom:14px; left:0; right:0; text-align:center; font-size:0.82rem; color:var(--steel); pointer-events:none;}
.fiche-pdf-fallback a{color:var(--leaf-dim); font-weight:700; pointer-events:auto;}
@media (max-width:900px){
  .fiche-pdf-frame{height:70vh; min-height:420px;}
}
@media (max-width:560px){
  /* le lecteur PDF natif du mobile, en superposition sur l'iframe, est
     petit et difficile à toucher précisément par-dessus le document —
     on le sort du cadre pour en faire un vrai bouton, pleine largeur. */
  .fiche-pdf-frame{height:56vh; min-height:340px;}
  .fiche-pdf-fallback{
    position:static; pointer-events:auto; margin-top:12px;
    background:var(--white); border:1px solid var(--line); padding:14px 16px;
  }
}

.related{background:var(--forest-2); padding:90px 0;}
.related .section-head h2{color:var(--white);}
.related .section-head p{color:#C4D2C7;}
.related .kicker{color:var(--leaf-pale);}
.related-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.related-card{
  background:var(--forest); overflow:hidden; display:flex; flex-direction:column;
  border:1px solid rgba(255,255,255,0.1); transition:transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease);
}
.related-card:hover{transform:translateY(-6px); border-color:var(--leaf);}
.related-card-img{height:160px; background:linear-gradient(160deg, #0F1D14 0%, var(--forest) 100%); overflow:hidden;}
.related-card-img img{width:100%; height:100%; object-fit:contain; padding:14px; box-sizing:border-box;}
.related-card-body{padding:20px 22px 24px;}
.related-card-body .tag{color:var(--leaf); font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; display:block; margin-bottom:6px;}
.related-card-body h3{color:var(--white); font-size:1rem; margin-bottom:0;}

.cta-band{background:var(--forest); padding:60px 0; border-top:1px solid rgba(255,255,255,0.08);}
.cta-band .wrap{display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap;}
.cta-band h2{color:var(--white); font-size:clamp(1.4rem,3vw,2rem); max-width:26ch;}
.cta-band .btn-leaf:hover{background:var(--leaf-bright);}

/* ===== RESPONSIVE ===== */
/* header nav switches to the burger menu a bit earlier than the rest of the
   layout, since the extra "Ma nacelle" button makes the full nav row tight
   on mid-size laptop widths (~960-1040px). */
@media (max-width:1040px){
  nav{position:fixed; top:76px; left:0; right:0; width:100%; background:var(--forest);
      flex-direction:column; align-items:flex-start; gap:0; padding:10px 28px 26px;
      transform:translateY(-8px); opacity:0; pointer-events:none; transition:all 0.25s ease;
      border-bottom:1px solid rgba(255,255,255,0.08);}
  nav.open{transform:translateY(0); opacity:1; pointer-events:auto;}
  nav a.navlink{padding:14px 0; width:100%; border-bottom:1px solid rgba(255,255,255,0.06);}
  .navlink-mobile-only{display:block;}
  .burger{display:block;}
  .header-phone{display:none;}
  .header-right{gap:0; display:contents;}
  /* le menu déroulant mobile empile les liens verticalement : une barre
     glissante horizontale n'y a pas de sens, la couleur du lien actif
     (déjà en blanc) suffit à s'y repérer. */
  .nav-indicator{display:none;}
}
@media (max-width:900px){
  .about-grid{grid-template-columns:1fr; gap:70px;}
  .about-logo-panel{height:300px;}
  .about-badge{left:0;}
  .eco-grid{grid-template-columns:1fr;}
  .fleet-grid{grid-template-columns:1fr 1fr;}
  .statbar .wrap{grid-template-columns:1fr 1fr; row-gap:26px;}
  .stat:nth-child(3){border-left:none;}
  .contact-grid{grid-template-columns:1fr; gap:50px;}
  .product-hero .wrap{grid-template-columns:1fr; gap:36px; padding-bottom:50px;}
  .product-hero-media img{height:280px;}
  .product-body-grid{grid-template-columns:1fr; gap:36px;}
  .spec-grid{grid-template-columns:1fr;}
  .spec-highlights{grid-template-columns:1fr;}
  .related-grid{grid-template-columns:1fr;}
  .key-figures{grid-template-columns:1fr 1fr;}
  /* toujours 3 chiffres clés : à cette largeur, le bloc repasse en 2
     colonnes et le 3e devient seul sur sa ligne, avec une case vide moche
     à côté — il occupe alors toute la largeur. Ne s'applique qu'ici : en
     3 colonnes (desktop) les 3 cases sont déjà pleines, pas besoin. */
  .key-figure:nth-child(3):last-child{grid-column:1 / -1;}
  .cta-band .wrap{flex-direction:column; align-items:flex-start;}
}
@media (max-width:560px){
  .fleet-grid{grid-template-columns:1fr;}
  .hero h1{max-width:100%;}
  .brand-logo{padding:14px 18px;}
  .brand-logo img{max-height:28px;}
  .to-top{right:16px; bottom:16px;}
  .spec-block, .spec-highlights{padding:6px 20px;}
  /* les paddings verticaux (110px) sont pensés pour desktop : sur mobile
     ça donne des écrans de vide entre chaque section, une impression de
     défilement peu naturel — on resserre nettement. */
  section{padding:64px 0;}
  .section-head{margin-bottom:36px;}
  .breadcrumb{padding:108px 0 22px;}
  .key-figures{grid-template-columns:1fr;}
  .key-figure:nth-child(3):last-child{grid-column:auto;}
  .about-logo-panel{height:240px;}
  .eco-card{padding:30px 24px;}
  .contact-card{padding:30px 24px;}
}