/* =========================
   Variables & Base
========================= */
:root{
  --bg:#0b0b0b; --card:#141414; --text:#0b0b0b; --muted:#bdbdbd; --accent:#00FFC2; --accent-2:#2EE6A6;
  --border:1px solid rgba(255,255,255,.08); --radius:16px; --shadow:0 12px 32px rgba(0,0,0,.35);
  --container:1180px; --gap:16px;
  --navH:72px; /* hauteur header pour le drawer mobile */
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;-webkit-tap-highlight-color:transparent}
a{color:var(--text);text-decoration:none}
img{max-width:100%;height:auto}
.container{max-width:var(--container);margin:auto;padding:0 20px}
.grid{display:grid;gap:var(--gap)}
.card{background:var(--card);border:var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:12px 16px;border-radius:999px;background:var(--accent);color:#05261e;font-weight:700;border:0;cursor:pointer;box-shadow:var(--shadow);transition:.2s}
.btn:hover{transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--text);border:var(--border)}
.badge{display:inline-flex;align-items:center;padding:.35rem .75rem;border-radius:999px;background:#11251f;border:1px solid #184e42;color:#9ff7db;font-size:.75rem;font-weight:600}
.tag{display:inline-block;padding:.25rem .6rem;border-radius:999px;border:1px solid rgba(255,255,255,.12);font-size:.75rem;color:#cbd5e1}
.star{filter:drop-shadow(0 0 6px rgba(255,215,0,.2))}

/* =========================
   Header / Navigation
========================= */
header.nav{
  position:sticky; top:0; z-index:3000;
  backdrop-filter:saturate(120%) blur(12px);
  background:rgba(10,10,10,.6);
  border-bottom:var(--border);
  isolation:isolate; /* évite fuites d’overlay */
}
.nav .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:72px; gap:16px; padding:0 16px;
}
.nav .brand img{display:block; height:36px}
.burger{
  font-size:24px; line-height:1; padding:8px 12px; color:#00ffb2;
  background:transparent; border:1px solid rgba(0,255,178,.25); border-radius:12px; cursor:pointer;
}
.burger:active{transform:scale(.98)}

/* Menu (structure partagée) */
.menu{ /* en mobile: drawer; en desktop: inline (via media query) */
  display:flex; gap:14px; flex-wrap:nowrap;
}
.menu-section a{
  display:block; padding:12px 12px 12px 14px; border-radius:10px;
  color:#e8f6f2; font-size:17px; position:relative;
}
.menu-section a:hover{background:rgba(255,255,255,.04)}
.menu-section a.active{background:rgba(0,255,178,.08)}
.menu-section a.active:before{
  content:""; position:absolute; left:0; top:10px; bottom:10px;
  width:3px; border-radius:3px; background:#00ffb2; pointer-events:none;
}

/* =========================
   Drawer Mobile
========================= */
@media (max-width: 991.98px){
  .burger{display:inline-flex}
  .menu{
    position:fixed; top:var(--navH); right:0; bottom:0; width:min(86vw,380px);
    transform:translateX(100%); transition:transform .26s ease;
    background:#0f1312; padding:14px 18px 24px; overflow:auto;
    box-shadow:-28px 0 64px rgba(0,0,0,.45); z-index:3002;
    flex-direction:column; gap:6px;
  }
  body.menu-open .menu{transform:translateX(0)}
  .backdrop{
    position:fixed; inset:0; background:rgba(0,0,0,.45);
    opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:3001;
  }
  body.menu-open .backdrop{opacity:1; pointer-events:auto}

  .menu-head, .menu-cta{display:block}
  .menu-head{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,.06); margin-bottom:14px;
  }
  .menu-close{background:transparent; border:0; color:#cfeee6; font-size:22px; padding:4px 6px; border-radius:8px; cursor:pointer}
  .menu-cta{display:grid; gap:10px; margin:6px 0 14px}
  .menu-cta .btn{
    display:inline-flex; align-items:center; justify-content:center;
    width:100%; min-height:44px; padding:12px 14px; border-radius:12px; font-weight:600;
  }
}

/* =========================
   Desktop (menu centré)
========================= */
@media (min-width: 992px){
  .burger{display:none}
  .backdrop{display:none}

  .nav .wrap{
    justify-content:center; /* centre l’ensemble */
    gap:40px;
  }
  .nav .brand{flex:0 0 auto}
  .menu{
    position:static; transform:none; width:auto; height:auto;
    background:transparent; padding:0; box-shadow:none; overflow:visible;
    display:flex; align-items:center; gap:0;
    flex:0 1 auto;
  }
  .menu-head, .menu-cta{display:none}
  .menu-section{
    display:flex; flex-direction:row; align-items:center; gap:28px;
  }
  .menu-section a{
    display:inline-flex; align-items:center; padding:8px 0; border-radius:0; background:transparent;
    font-size:16px;
  }
  .menu-section a:hover{color:var(--accent)}
  .menu-section a.active{color:var(--accent)}
  .menu-section a.active:before{display:none}
}

/* =========================
   Sections génériques
========================= */
.hero{
  padding:90px 0;
  background:
    radial-gradient(1200px 400px at 20% -10%, rgba(0,255,194,.12), transparent),
    linear-gradient(180deg, rgba(0,0,0,0.0), rgba(0,0,0,.25));
}
.hero h1{font-size:clamp(28px,6vw,56px);margin:0 0 10px}
.hero p{color:var(--muted);max-width:760px}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}

.kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
.cards{grid-template-columns:repeat(3,minmax(0,1fr))}
section{padding:50px 0}

table{width:100%;border-collapse:separate;border-spacing:0;background:var(--card);border:var(--border);border-radius:14px;overflow:hidden}
th,td{padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.06);text-align:left}
tr:last-child td{border-bottom:0}

label{display:block;font-weight:600;margin:.5rem 0 .35rem}
input,select,textarea{width:100%;padding:12px 14px;border-radius:10px;border:var(--border);background:#0c0c0c;color:var(--text)}
.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}

.notice{padding:12px 14px;border-radius:12px;background:#0c140f;border:1px solid #1a3e32;color:#b4fbe2}
.alert{padding:12px 14px;border-radius:12px;background:#140c0c;border:1px solid #3e1a1a;color:#ffc6c6}

footer{margin-top:60px;padding:40px 0;border-top:var(--border);background:#0b0b0b;color:var(--muted)}
@media (max-width:960px){
  .kpis{grid-template-columns:repeat(2,1fr)}
  .cards{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
}

/* =========================
   Sécurité clics
========================= */
.menu, .menu * { pointer-events:auto }
.menu-section a::before, .menu-section a::after{ pointer-events:none }
/* --- FIX global: le header ne doit pas forcer le menu en flex sur mobile --- */
@media (min-width: 992px){
  .nav .menu{                         /* desktop only */
    display:flex !important;
    align-items:center;
    gap:0;
  }
}

/* --- MOBILE: vrai drawer, rien dans la barre tant que fermé --- */
@media (max-width: 991.98px){
  :root{ --navH: 72px; }

  .burger{ display:inline-flex !important; }

  /* override fort contre la règle "nav .menu{display:flex}" */
  .nav .menu{
    position: fixed !important;
    top: var(--navH) !important;
    right: 0; bottom: 0; left: auto;
    width: min(86vw, 380px);
    transform: translateX(100%);
    transition: transform .26s ease;
    background: #0f1312;
    padding: 14px 18px 24px;
    overflow: auto;
    box-shadow: -28px 0 64px rgba(0,0,0,.45);
    z-index: 3002;
    display: block !important;            /* plus de flex wrap dans la barre */
  }
  body.menu-open .nav .menu{ transform: translateX(0); }

  /* backdrop */
  .backdrop{
    position: fixed; inset: 0;
    background: rgba(0,0,0,.45);
    opacity: 0; pointer-events: none;
    transition: opacity .2s ease;
    z-index: 3001;
  }
  body.menu-open .backdrop{ opacity:1; pointer-events:auto; }

  /* contenu du drawer */
  .menu-head, .menu-cta{ display:block !important; }
  .menu-section{ display:flex !important; flex-direction:column !important; gap:4px !important; }
  .menu-section a{ display:block !important; padding:12px 12px 12px 14px !important; }
}

/* sécurité clics + empilement */
header.nav{ isolation:isolate; }
.menu, .menu *{ pointer-events:auto; }
.menu-section a::before, .menu-section a::after{ pointer-events:none; }

/* DESKTOP: no drawer artefacts */
@media (min-width: 992px){
  .burger{ display:none !important; }
  .backdrop, .menu-head, .menu-cta{ display:none !important; }
  .menu{ position:static !important; transform:none !important; width:auto !important; height:auto !important;
         background:transparent !important; padding:0 !important; box-shadow:none !important; overflow:visible !important; }
  .menu-section{ display:flex !important; flex-direction:row !important; align-items:center !important; gap:22px !important; }
  .menu-section a{ padding:8px 0 !important; border-radius:0 !important; background:transparent !important; }
  .menu-section a.active::before{ display:none !important; }
}
/* Mobile: empêcher le header de piéger le position:fixed du menu */
@media (max-width: 991.98px){
  header.nav{
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background:#0b0f0d !important; /* fond opaque pour compenser le blur retiré */
  }
}
/* LOGO HLR PERFORMANCE */
header .logo img {
  max-height: 90px;
  width: auto;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 0 12px rgba(0,255,194,0.8)) drop-shadow(0 0 24px rgba(0,255,194,0.4));
  animation: pulseGlow 3s infinite ease-in-out;
  transition: transform .4s ease;
}

header .logo img:hover {
  transform: scale(1.12) rotate(-1.5deg);
  filter: drop-shadow(0 0 16px rgba(0,255,194,1)) drop-shadow(0 0 30px rgba(0,255,194,0.8));
}

/* Animation effet pulse */
@keyframes pulseGlow {
  0%   { filter: drop-shadow(0 0 8px rgba(0,255,194,0.6)) drop-shadow(0 0 16px rgba(0,255,194,0.3)); }
  50%  { filter: drop-shadow(0 0 20px rgba(0,255,194,1)) drop-shadow(0 0 40px rgba(0,255,194,0.9)); }
  100% { filter: drop-shadow(0 0 8px rgba(0,255,194,0.6)) drop-shadow(0 0 16px rgba(0,255,194,0.3)); }
}
/* STRUCTURE HEADER */
.site-header {
  background: #0b0b0b;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 10px 20px;
}

/* NAVIGATION EN LIGNE */
.main-nav ul {
  list-style: none;
  display: flex;
  gap: 28px;
  margin: 0;
  padding: 0;
}

.main-nav a {
  color: #f5f5f7;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 15px;
  letter-spacing: 0.5px;
  position: relative;
  transition: color .3s ease;
}

.main-nav a:hover {
  color: #00ffc2;
}

.main-nav a::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: #00ffc2;
  transition: width .3s ease;
}
.main-nav a:hover::after {
  width: 100%;
}

/* CTA BOUTONS */
.cta {
  display: flex;
  gap: 12px;
}

.btn-simu, .btn-garage {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 50px;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 14px;
  transition: all .3s ease;
}

.btn-simu {
  background: linear-gradient(135deg, #00ffc2, #2EE6A6);
  color: #0b0b0b;
  box-shadow: 0 0 15px rgba(0,255,194,0.7);
}
.btn-simu:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 0 25px rgba(0,255,194,1);
}

.btn-garage {
  background: rgba(255,255,255,0.1);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
}
.btn-garage:hover {
  background: #00ffc2;
  color: #0b0b0b;
  box-shadow: 0 0 15px rgba(0,255,194,0.7);
}
/* =========================
   Header / Navigation UNIQUEMENT
========================= */
header.site-header{
  position:sticky; top:0; z-index:1000;
  backdrop-filter:saturate(120%) blur(12px);
  background:rgba(10,10,10,.6);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.header-grid{
  display:flex; align-items:center; justify-content:space-between;
  max-width:1180px; margin:auto; padding:10px 20px;
  gap:30px;
}

/* Logo pulse */
header .logo img{
  max-height:70px; transition:.3s ease;
  filter:drop-shadow(0 0 12px rgba(0,255,194,.7));
  animation:pulseGlow 3s infinite ease-in-out;
}
header .logo img:hover{transform:scale(1.1) rotate(-1.5deg)}
@keyframes pulseGlow{
  0%,100%{filter:drop-shadow(0 0 8px rgba(0,255,194,.5))}
  50%{filter:drop-shadow(0 0 20px rgba(0,255,194,1))}
}

/* Nav desktop */
header .main-nav ul{
  list-style:none; display:flex; gap:24px; margin:0; padding:0;
}
header .main-nav a{
  font-weight:500; text-transform:uppercase; font-size:15px; position:relative;
}
header .main-nav a:hover{color:var(--accent)}
header .main-nav a::after{
  content:"";position:absolute;bottom:-4px;left:0;width:0;height:2px;
  background:var(--accent);transition:.3s;
}
header .main-nav a:hover::after{width:100%}

/* CTA */
header .cta{display:flex;gap:12px}
header .btn{
  padding:10px 18px; border-radius:50px; font-weight:600; font-size:14px;
  transition:.3s; display:inline-block;
}
header .btn-simu{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#0b0b0b;box-shadow:0 0 15px rgba(0,255,194,.7)}
header .btn-simu:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 0 25px rgba(0,255,194,1)}
header .btn-garage{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.25)}
header .btn-garage:hover{background:var(--accent);color:#0b0b0b}

/* Burger mobile */
header .burger{display:none;font-size:24px;background:none;border:0;color:var(--accent);cursor:pointer}
@media(max-width:991px){
  header .burger{display:block}
  header .main-nav{display:none}
  body.menu-open header .main-nav{
    display:flex;flex-direction:column;gap:12px;
    position:fixed;top:var(--navH);right:0;bottom:0;width:80vw;
    background:#0f1312;padding:20px;z-index:2000;
    box-shadow:-20px 0 40px rgba(0,0,0,.5)
  }
}
/* Header / logo */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(0,0,0,0.6);           /* améliore le contraste */
  backdrop-filter: blur(6px);
}

.site-header .logo img {
  height: clamp(42px, 6.2vw, 72px);       /* grossit sur mobile et desktop */
  filter: drop-shadow(0 1px 8px rgba(0,0,0,0.35));
}

/* Si tu as un logo blanc, force l’affichage en mode sombre clair */
[data-theme="light"] .site-header { background: rgba(255,255,255,0.92); }
[data-theme="light"] .site-header .logo img.dark-only { display:none; }
[data-theme="light"] .site-header .logo img.light-only { display:block; }

[data-theme="dark"] .site-header { background: rgba(0,0,0,0.72); }
[data-theme="dark"] .site-header .logo img.light-only { display:none; }
[data-theme="dark"] .site-header .logo img.dark-only { display:block; }

/* Réserve de place sous un header sticky (évite que le contenu passe dessous) */
.header-spacer { height: clamp(56px, 8vw, 86px); }

/* ====== Harmonisation "Mentions & pages légales" ====== */
.wrap { max-width: var(--container); margin: 0 auto; padding: 32px 20px 40px; }

/* Hero variante (dégradés vert/cyan comme reprogrammation) */
.hero.hero--glass {
  position: relative;
  padding: 48px 0 28px;
  border-bottom: var(--border);
  background:
    radial-gradient(800px 320px at 30% -10%, rgba(0,255,194,.12), transparent 60%),
    radial-gradient(700px 300px at 80% -20%, rgba(46,230,166,.10), transparent 60%);
}

/* Petits utilitaires typographiques */
.pill {
  display:inline-block; font-size:.82rem; color:var(--muted);
  border: var(--border); padding:.28rem .6rem; border-radius:999px; background:rgba(255,255,255,.02)
}
.prose p{margin:.55em 0}
.prose ul{margin:.3em 0 .8em 1.25em}
.list-compact li{margin:.28em 0}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace}

/* Cartes verre fumé */
.card.card--glass{
  background: linear-gradient(180deg, var(--card) 0%, #0c121a 100%);
  border: var(--border); border-radius: 18px; padding: 20px;
  box-shadow: var(--shadow);
  backdrop-filter: saturate(120%) blur(6px);
}
.card.card--glass h2{font-size:1.12rem; margin:.2em 0 .6em}

/* Notices (accents verts doux) */
.notice{
  background: rgba(0,255,194,.06);
  border: 1px dashed rgba(0,255,194,.25);
  color: #b6ffe8; border-radius: 12px; padding: 12px 14px; font-size: .95rem;
}
.tag{
  display:inline-block; padding:.1em .55em; border-radius:999px;
  border: var(--border); font-size:.78rem; color:var(--muted); background:rgba(255,255,255,.03)
}

/* Fil d’Ariane */
.breadcrumb{font-size:.9rem;color:var(--muted); margin:6px 0 14px}
.breadcrumb a{color:inherit; text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}

/* === Mobile-first : burger === */
.site-header{position:sticky;top:0;z-index:1000;background:rgba(11,11,12,.9);backdrop-filter:blur(6px)}
.header-grid{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;padding:10px 16px}

/* état par défaut en mobile : nav repliée, CTA masqués (on les ouvrira avec le burger) */
.main-nav,
.cta { display:none; }

.burger{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border:1px solid rgba(255,255,255,.18);
  border-radius:12px;background:transparent;color:#fff;font-size:22px;
}

/* panneau mobile plein écran quand ouvert */
.site-header.menu-open .main-nav,
.site-header.menu-open .cta { 
  display:block;
}
.site-header.menu-open .main-nav{
  position:fixed; inset:64px 0 auto 0; /* sous le header */
  background:#0B0B0C; border-top:1px solid rgba(255,255,255,.08);
  max-height:calc(100dvh - 64px); overflow:auto; animation:slideDown .2s ease;
}
.site-header.menu-open .main-nav ul{list-style:none;margin:0;padding:8px}
.site-header.menu-open .main-nav li{border-bottom:1px solid rgba(255,255,255,.08)}
.site-header.menu-open .main-nav a{display:block;padding:14px 12px;font-size:16px}

.site-header.menu-open .cta{
  position:fixed; inset:auto 0 0 0; background:#0B0B0C;
  padding:12px; border-top:1px solid rgba(255,255,255,.08);
  display:grid; grid-template-columns:1fr; gap:10px;
}

/* Desktop : nav/cta visibles en ligne, burger masqué */
@media (min-width: 992px){
  .header-grid{grid-template-columns:auto 1fr auto auto; gap:24px}
  .main-nav{display:block; position:static}
  .main-nav ul{display:flex; gap:24px; list-style:none; margin:0; padding:0}
  .main-nav a{padding:10px 0; display:inline-block}
  .cta{display:flex; gap:10px}
  .burger{display:none}
}

/* petits plus */
.btn{display:inline-flex;align-items:center;justify-content:center;
  padding:10px 14px;border:1px solid rgba(255,255,255,.18);border-radius:12px}
.btn.btn-simu {
  background: #28a745; /* ton vert */
  color: #fff;
  border-color: #28a745;
  font-weight: 600;
}

.btn.btn-garage{background:transparent}

/* anim */
@keyframes slideDown{from{transform:translateY(-6px);opacity:0}to{transform:translateY(0);opacity:1}}

/* Mobile : nav/cta repliés par défaut */
.main-nav, .cta { display:none; }
.site-header.menu-open .main-nav,
.site-header.menu-open .cta { display:block; }

@media (min-width: 992px){
  .main-nav{display:block}
  .cta{display:flex; gap:10px}
  .burger{display:none}
}
/* ====== HEADER POLISH (drop-in) ====== */

/* palette & bases */
:root{
  --bg: #0B0B0C;
  --line: rgba(255,255,255,.08);
  --muted: rgba(255,255,255,.72);
  --text: #fff;
  --green: #28a745; /* garde ton vert bouton */
}

html,body{overflow-x:hidden}
.site-header{
  background: rgba(11,11,12,.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
  overflow-x: clip; /* évite la petite barre horizontale */
}

/* grille et alignements */
.header-grid{
  display:grid;
  grid-template-columns:auto 1fr auto auto;
  gap: 20px;
  align-items:center;
  min-height:68px;
  padding:10px 16px;
}

/* NAV : typographie & espacement plus pro */
.main-nav ul{
  display:flex; align-items:center; gap: 28px;
  list-style:none; margin:0; padding:0;
}
.main-nav a{
  display:inline-block;
  padding:10px 0;
  color:var(--text);
  font-weight:600;
  letter-spacing:.2px;
  text-transform:uppercase;
  font-size:14px;
  opacity:.92;
  position:relative;
  transition:opacity .15s ease, transform .15s ease;
}
/* soulignement propre au survol/actif */
.main-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-10px;
  height:2px; background:linear-gradient(90deg,transparent, #3af2b2 30%, #3af2b2 70%, transparent);
  transform:scaleX(0); transform-origin:50% 100%; transition:transform .2s ease;
}
.main-nav a:hover{opacity:1; transform:translateY(-1px)}
.main-nav a:hover::after,
.main-nav a.active::after{transform:scaleX(1)}
/* supprime tout ancien border-bottom sous les <li> si existait */
.main-nav li{border:0}

/* CTA alignés, hauteur identique */
.cta{display:flex; gap:10px; align-items:center}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  height:44px; padding:0 16px; border-radius:14px;
  border:1px solid var(--line);
  font-weight:600;
}

/* Reprog = vert propre, glow discret */
.btn.btn-simu{
  background: var(--green);
  color:#071015;
  border-color: var(--green);
  box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 8px 18px rgba(40,167,69,.22);
}
.btn.btn-simu:hover{filter:brightness(1.04)}
/* Devis = pill sombre cohérente */
.btn.btn-garage{
  background: rgba(255,255,255,.06);
  color:#fff;
  border-color: rgba(255,255,255,.18);
}
.btn.btn-garage:hover{background: rgba(255,255,255,.1)}

/* Burger (mobile), on ne change pas ta logique JS */
.burger{
  display:none;  /* caché en desktop */
  width:44px;height:44px;border:1px solid rgba(255,255,255,.18);
  border-radius:12px;background:transparent;color:#fff;font-size:22px;
}

/* État mobile : nav en panneau propre + CTA en bas */
@media (max-width: 991.98px){
  .header-grid{grid-template-columns:1fr auto; gap:12px}
  .main-nav, .cta{display:none}
  .burger{display:inline-flex}

  .site-header.menu-open .main-nav{ 
    display:block; position:fixed; inset:64px 0 auto 0; 
    background:var(--bg); border-top:1px solid var(--line);
    max-height:calc(100dvh - 120px); overflow:auto; padding:8px 12px;
  }
  .site-header.menu-open .main-nav ul{flex-direction:column; gap:0}
  .site-header.menu-open .main-nav a{width:100%; padding:14px 4px; font-size:16px}
  .site-header.menu-open .main-nav a::after{bottom:-2px}

  .site-header.menu-open .cta{
    display:grid; grid-template-columns:1fr; gap:10px;
    position:fixed; left:0; right:0; bottom:0; padding:12px;
    background:var(--bg); border-top:1px solid var(--line);
  }
}

/* Accessibilité & motion */
@media (prefers-reduced-motion: reduce){
  .main-nav a, .main-nav a::after, .btn{transition:none}
}
/* Par défaut : masqués */
.only-mobile { display:none }

/* Mobile : afficher boutons dans burger, masquer CTA */
@media (max-width: 991.98px){
  .only-mobile { display:block }
  .main-nav .only-mobile .btn {
    width:100%; height:46px; margin:8px 0;
  }
  .main-nav .only-mobile.divider {
    height:1px; background:rgba(255,255,255,.12); margin:6px 0 10px 0;
  }

  /* Masque le bloc CTA du header en mobile */
  .cta { display:none !important; }
}
/* =========================
   THEME HLR — Harmonisation logo
   (ajoute ce bloc à la fin de ton CSS)
========================= */

/* Palette dérivée du logo */
:root{
  --bg:#0A0B0B;                 /* fond principal (noir profond) */
  --card:#101313;               /* cartes/verre fumé */
  --text:#F4F7F6;               /* texte principal */
  --muted:#B7C4C1;              /* texte atténué */
  --line:rgba(255,255,255,.10); /* traits & bordures discrètes */

  /* Teals HLR */
  --hlr:#00FFC2;                /* primaire (logo) */
  --hlr-2:#2EE6A6;              /* secondaire (logo) */
  --hlr-3:#0CBF9A;              /* foncé (hover) */
  --hlr-ink:#051E19;            /* texte sur btn clair */

  /* UI */
  --radius:16px;
  --shadow:0 12px 34px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.03);
  --ring:0 0 0 3px rgba(0,255,194,.18), 0 0 0 1px rgba(0,255,194,.55);
}

/* Arrière-plans & containers */
html,body{background:var(--bg);color:var(--text)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.container{max-width:1180px;margin:auto;padding:0 20px}

/* Liens */
a{color:var(--text);text-decoration:none}
a:hover{color:var(--hlr)}
a:focus-visible{outline:none;box-shadow:var(--ring);border-radius:8px}

/* Soulignement animé uniforme */
.main-nav a::after{
  background:linear-gradient(90deg,transparent,var(--hlr) 28%,var(--hlr) 72%,transparent);
}

/* Boutons (cohérents logo) */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:12px 16px;border-radius:999px;border:1px solid var(--line);
  font-weight:700; cursor:pointer; transition:transform .18s ease, filter .18s ease;
  box-shadow:var(--shadow);
}
.btn:hover{transform:translateY(-1px)}
.btn:focus-visible{outline:none;box-shadow:var(--ring)}

.btn-simu,
.btn--primary{
  background:linear-gradient(135deg,var(--hlr),var(--hlr-2));
  color:var(--hlr-ink);
  border-color:rgba(0,0,0,.12);
  text-transform:uppercase; letter-spacing:.2px;
}
.btn-simu:hover,.btn--primary:hover{filter:brightness(1.04)}
.btn-simu:active,.btn--primary:active{transform:translateY(0)}

.btn-garage,
.btn--ghost{
  background:rgba(255,255,255,.06);
  color:var(--text);
  border-color:var(--line);
}
.btn-garage:hover,.btn--ghost:hover{background:rgba(255,255,255,.10)}

/* Badges/Tags/Stars */
.badge{
  background:rgba(0,255,194,.10);
  border:1px solid rgba(0,255,194,.35);
  color:#A2FFE9;
}
.tag{border:1px solid var(--line);color:#CFEAE3;background:rgba(255,255,255,.03)}
.star{filter:drop-shadow(0 0 8px rgba(0,255,194,.35))}

/* Notices ton HLR */
.notice{
  background:rgba(0,255,194,.08);
  border:1px dashed rgba(0,255,194,.35);
  color:#BFFCEC;
}
.alert{
  background:#140C0C;
  border:1px solid #3E1A1A;
  color:#FFCACA;
}

/* Formulaires */
input,select,textarea{
  background:#0D100F;border:1px solid var(--line);color:var(--text);
  border-radius:12px; padding:12px 14px;
}
input:focus,select:focus,textarea:focus{outline:none;box-shadow:var(--ring);border-color:rgba(0,255,194,.45)}

/* Tables */
table{background:var(--card);border:1px solid var(--line);border-radius:14px}
th,td{border-bottom:1px solid rgba(255,255,255,.06)}
tr:hover td{background:rgba(255,255,255,.02)}

/* Header collant + glow logo harmonisé */
.site-header{
  background:rgba(0,0,0,.68);
  backdrop-filter:blur(10px) saturate(120%);
  border-bottom:1px solid var(--line);
}
header .logo img{
  max-height:72px; transition:transform .3s ease, filter .3s ease;
  filter:drop-shadow(0 0 12px rgba(0,255,194,.55)) drop-shadow(0 0 26px rgba(0,255,194,.25));
  animation:hlrPulse 3s infinite ease-in-out;
}
header .logo img:hover{
  transform:scale(1.07) rotate(-1.2deg);
  filter:drop-shadow(0 0 18px rgba(0,255,194,.9)) drop-shadow(0 0 30px rgba(0,255,194,.6));
}
@keyframes hlrPulse{
  0%,100%{filter:drop-shadow(0 0 10px rgba(0,255,194,.45))}
  50%    {filter:drop-shadow(0 0 22px rgba(0,255,194,1))}
}

/* Hero & sections avec dégradés logo */
.hero{
  background:
    radial-gradient(1200px 420px at 18% -12%, rgba(0,255,194,.14), transparent 60%),
    radial-gradient(900px 360px at 85% -18%, rgba(46,230,166,.12), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.28));
}

/* Focus accessibles partout */
*[tabindex]:focus-visible,
a:focus-visible,
button:focus-visible{outline:none;box-shadow:var(--ring)}

/* CTA en mobile : pas de doublons, les vrais boutons vivent dans le drawer */
@media (max-width: 991.98px){
  .cta { display:none !important; }              /* masque le bloc CTA de l’en-tête */
  .main-nav .only-mobile { display:block }       /* montre les boutons clonés dans le menu */
  .main-nav .only-mobile .btn{ width:100%; height:46px }
}
@media (min-width: 992px){
  .cta { display:flex !important; gap:12px }     /* CTA visibles en desktop */
}
/* ======================================================
   HLR THEME OVERRIDE — à placer TOUT EN BAS du CSS
   (on ne change pas la structure, on unifie juste thème/couleurs)
====================================================== */
:root{
  /* Palette logo */
  --bg:#0A0B0B !important;
  --card:#101313 !important;
  --text:#F4F7F6 !important;
  --muted:#B7C4C1 !important;

  /* Accents issus du logo (on garde les noms existants) */
  --accent:#00FFC2 !important;
  --accent-2:#2EE6A6 !important;

  /* Lignes & bordures */
  --line:rgba(255,255,255,.10) !important;
  --border:1px solid var(--line) !important;

  /* Effets */
  --radius:16px !important;
  --shadow:0 12px 34px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.03) !important;
}

/* Fond / cartes / texte */
html,body{background:var(--bg) !important; color:var(--text) !important;}
.card{background:var(--card) !important; border:var(--border) !important; box-shadow:var(--shadow) !important;}

/* Liens & soulignements nav */
a{color:var(--text) !important;}
a:hover{color:var(--accent) !important;}
.main-nav a::after,
header .main-nav a::after{
  background:linear-gradient(90deg,transparent,var(--accent) 30%,var(--accent) 70%,transparent) !important;
}

/* Header (les deux variantes) */
header.nav, .site-header{
  background:rgba(0,0,0,.72) !important;
  backdrop-filter:blur(8px) saturate(120%) !important;
  border-bottom:1px solid var(--line) !important;
}

/* Boutons */
.btn{border:1px solid var(--line) !important;}
.btn-simu, .btn--primary{
  background:linear-gradient(135deg,var(--accent),var(--accent-2)) !important;
  color:#06261d !important;
  border-color:transparent !important;
  text-transform:uppercase; letter-spacing:.2px;
}
.btn-simu:hover, .btn--primary:hover{filter:brightness(1.04) !important;}
.btn-garage, .btn--ghost{
  background:rgba(255,255,255,.06) !important;
  color:var(--text) !important;
  border-color:var(--line) !important;
}
.btn-garage:hover, .btn--ghost:hover{background:rgba(255,255,255,.10) !important;}

/* Badges / notices */
.badge{
  background:rgba(0,255,194,.10) !important;
  border:1px solid rgba(0,255,194,.35) !important;
  color:#A2FFE9 !important;
}
.notice{
  background:rgba(0,255,194,.08) !important;
  border:1px dashed rgba(0,255,194,.35) !important;
  color:#BFFCEC !important;
}

/* Formulaires */
input,select,textarea{
  background:#0D100F !important;
  border:1px solid var(--line) !important;
  color:var(--text) !important;
}
input:focus,select:focus,textarea:focus{
  outline:none !important;
  box-shadow:0 0 0 3px rgba(0,255,194,.18), 0 0 0 1px rgba(0,255,194,.55) !important;
  border-color:rgba(0,255,194,.45) !important;
}

/* Hero (dégradés logo) */
.hero{
  background:
    radial-gradient(1100px 380px at 18% -12%, rgba(0,255,194,.14), transparent 60%),
    radial-gradient(900px 340px at 85% -18%, rgba(46,230,166,.12), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.28)) !important;
}

/* Logo glow */
header .logo img{
  filter:drop-shadow(0 0 12px rgba(0,255,194,.55)) drop-shadow(0 0 26px rgba(0,255,194,.25)) !important;
}

/* Mobile : pas de doublons de CTA (CTA dans le drawer) */
@media (max-width: 991.98px){
  .cta{display:none !important;}
  .main-nav .only-mobile{display:block !important;}
  .main-nav .only-mobile .btn{width:100% !important; height:46px !important;}
}
@media (min-width: 992px){
  .cta{display:flex !important; gap:12px !important;}
}
/* =========================
   HLR — CONTRASTE BOOST (paste at end)
========================= */
:root{
  /* Fonds plus sombres, texte plus clair */
  --bg:#080909 !important;
  --card:#0E1010 !important;
  --text:#FFFFFF !important;         /* était #F4F7F6 */
  --muted:#CFD6D3 !important;        /* + lisible sur fond sombre */

  /* Accents identiques au logo mais avec variantes d’accessibilité */
  --accent:#00FFC2 !important;
  --accent-2:#2EE6A6 !important;

  /* Bordures un poil plus visibles */
  --line:rgba(255,255,255,.14) !important;
  --border:1px solid var(--line) !important;

  /* Focus plus net */
  --ring:0 0 0 3px rgba(0,255,194,.28),0 0 0 1px rgba(0,255,194,.75) !important;
}

/* Corps & cartes */
html,body{background:var(--bg) !important; color:var(--text) !important;}
.card{background:var(--card) !important; border:var(--border) !important;}

/* Header plus opaque = meilleure lisibilité nav */
header.nav, .site-header{
  background:rgba(0,0,0,.86) !important;
  border-bottom:1px solid var(--line) !important;
}

/* Titres + contraste/impact */
.hero h1,
h1,h2{
  color:#fff !important;
  letter-spacing:-.01em;
  text-rendering:optimizeLegibility;
}

/* Paragraphe & meta */
.hero p, p, .prose p, .breadcrumb, .tag{
  color:var(--muted) !important;
}

/* Navigation : survol et actif plus visibles */
.main-nav a{ color:#F5FBF9 !important; }
.main-nav a:hover{ color:var(--accent) !important; }
.main-nav a::after{
  background:linear-gradient(90deg,transparent,var(--accent) 30%,var(--accent) 70%,transparent) !important;
  height:3px !important;            /* 2px -> 3px */
  bottom:-8px !important;
}

/* Boutons : texte blanc et contrastes AA+ */
.btn{
  border:1px solid var(--line) !important;
  box-shadow:none !important;
}
.btn-simu, .btn--primary{
  background:linear-gradient(135deg,#00F2B8,#19DFA4) !important; /* légère baisse de luminosité pour un meilleur ratio */
  color:#04261C !important;                                      /* texte foncé lisible sur vert clair */
}
.btn-garage, .btn--ghost{
  background:rgba(255,255,255,.10) !important;
  color:#FFFFFF !important;
  border-color:var(--line) !important;
}

/* Badges/notice/tags : bordure + claire et texte plus lisible */
.badge{
  background:rgba(0,255,194,.12) !important;
  border:1px solid rgba(0,255,194,.45) !important;
  color:#D7FFF3 !important;
}
.tag{
  border:1px solid var(--line) !important;
  color:#E6EFEC !important;
}
.notice{
  background:rgba(0,255,194,.10) !important;
  border:1px dashed rgba(0,255,194,.45) !important;
  color:#D7FFF3 !important;
}

/* Formulaires : champs plus lisibles */
input,select,textarea{
  background:#0B0D0D !important;
  border:1px solid var(--line) !important;
  color:#FFFFFF !important;
}
input::placeholder,textarea::placeholder{ color:#AAB7B3 !important; }
label{ color:#F4F9F7 !important; }

/* Tables : séparateurs plus visibles */
th,td{ border-bottom:1px solid rgba(255,255,255,.12) !important; }
tr:hover td{ background:rgba(255,255,255,.03) !important; }

/* Hero : dégradés un peu plus marqués mais propres */
.hero{
  background:
    radial-gradient(1200px 420px at 18% -12%, rgba(0,255,194,.18), transparent 60%),
    radial-gradient(900px 360px at 85% -18%, rgba(46,230,166,.16), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.36)) !important;
}
/* =========================
   CTA PRINCIPAUX
========================= */
.btn-simu {
  background: linear-gradient(135deg,#00e6ad,#00ffc2);
  color: #00120d;                    /* texte noir profond lisible */
  font-weight: 700;
  border: none;
  box-shadow: 0 0 18px rgba(0,255,194,.35);
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn-simu:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 0 28px rgba(0,255,194,.55);
}

.btn-garage {
  background: #181a1a;               /* pas transparent → vrai bouton */
  color: #f5f5f7;
  font-weight: 700;
  border: 1px solid rgba(255,255,255,.25);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.btn-garage:hover {
  background: var(--accent);
  color: #00120d;
  transform: translateY(-2px);
  box-shadow: 0 0 22px rgba(0,255,194,.45);
}
/* ====== FIX CTA visible & contrasté ====== */
.hero-cta .btn,
.btn.btn-simu,
.btn.btn-garage{ 
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  line-height:1.2 !important; font-size:16px !important; font-weight:800 !important;
  padding:12px 20px !important; border-radius:999px !important; text-transform:none !important;
}

/* Primaire (vert HLR) — texte foncé lisible */
.btn.btn-simu{
  background:linear-gradient(135deg,#00e6ad,#00ffc2) !important;
  color:#041e18 !important;
  border:none !important;
  box-shadow:0 0 18px rgba(0,255,194,.35) !important;
}
.btn.btn-simu *, .btn.btn-simu:visited{ color:#041e18 !important; }  /* span/strong/a */

/* Secondaire (ghost sombre) — texte blanc lisible */
.btn.btn-garage{
  background:rgba(255,255,255,.10) !important;
  color:#ffffff !important;
  border:1px solid rgba(255,255,255,.25) !important;
  box-shadow:none !important;
}
.btn.btn-garage *, .btn.btn-garage:visited{ color:#ffffff !important; }

/* Hover states */
.btn.btn-simu:hover{ transform:translateY(-2px) scale(1.03) !important; }
.btn.btn-garage:hover{
  background:var(--accent) !important; color:#041e18 !important; border-color:transparent !important;
}
.btn.btn-garage:hover *{ color:#041e18 !important; }

/* --- HOTFIX CTA (isolé) --- */
.hero-cta .btn,
.btn.btn-simu,
.btn.btn-garage{
  display:inline-flex; align-items:center; justify-content:center;
  line-height:1.2; font-size:16px; font-weight:800;
  padding:12px 20px; border-radius:999px; text-transform:none;
}

.btn.btn-simu{
  background:linear-gradient(135deg,#00E6AD,#00FFC2);
  color:#041E18; /* contraste fort */
  border:0;
  box-shadow:0 0 18px rgba(0,255,194,.35);
  transition:transform .2s ease, box-shadow .2s ease;
}
.btn.btn-simu:hover{
  transform:translateY(-2px) scale(1.03);
  box-shadow:0 0 28px rgba(0,255,194,.55);
}

.btn.btn-garage{
  background:rgba(255,255,255,.10);
  color:#FFFFFF;
  border:1px solid rgba(255,255,255,.25);
  box-shadow:none;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.btn.btn-garage:hover{
  background:#00FFC2; color:#041E18; border-color:transparent;
  transform:translateY(-2px);
}
/* --- THEME HLR SCOPÉ (inoffensif) --- */
.hlr-theme{
  --bg:#0A0B0B; --card:#101313; --text:#FFFFFF; --muted:#CFD6D3;
  --accent:#00FFC2; --accent-2:#2EE6A6; --line:rgba(255,255,255,.14);
}
.hlr-theme html, .hlr-theme body{ background:var(--bg); color:var(--text); }
.hlr-theme a:hover{ color:var(--accent); }
.hlr-theme .card{ background:var(--card); border:1px solid var(--line); }

.hlr-theme .hero{
  background:
    radial-gradient(1200px 420px at 18% -12%, rgba(0,255,194,.18), transparent 60%),
    radial-gradient(900px 360px at 85% -18%, rgba(46,230,166,.16), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.36));
}
.hlr-theme header .logo img{
  filter:drop-shadow(0 0 12px rgba(0,255,194,.55)) drop-shadow(0 0 26px rgba(0,255,194,.25));
  transition:transform .3s ease, filter .3s ease;
}
.hlr-theme header .logo img:hover{
  transform:scale(1.07) rotate(-1.2deg);
  filter:drop-shadow(0 0 18px rgba(0,255,194,.9)) drop-shadow(0 0 30px rgba(0,255,194,.6));
}

/* CTA cohérents (mêmes règles que le hotfix, mais scoping) */
.hlr-theme .hero-cta .btn,
.hlr-theme .btn.btn-simu,
.hlr-theme .btn.btn-garage{
  display:inline-flex; align-items:center; justify-content:center;
  line-height:1.2; font-size:16px; font-weight:800;
  padding:12px 20px; border-radius:999px; text-transform:none;
}
.hlr-theme .btn.btn-simu{
  background:linear-gradient(135deg,#00E6AD,#00FFC2);
  color:#041E18; border:0; box-shadow:0 0 18px rgba(0,255,194,.35);
}
.hlr-theme .btn.btn-simu:hover{
  transform:translateY(-2px) scale(1.03);
  box-shadow:0 0 28px rgba(0,255,194,.55);
}
.hlr-theme .btn.btn-garage{
  background:rgba(255,255,255,.10); color:#FFFFFF;
  border:1px solid rgba(255,255,255,.25); box-shadow:none;
}
.hlr-theme .btn.btn-garage:hover{
  background:var(--accent); color:#041E18; border-color:transparent;
  transform:translateY(-2px);
}
/* ====== CTA boutons ====== */
.btn-simu {
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 20px; border-radius:999px;
  font-size:16px; font-weight:700; line-height:1.2;
  background:linear-gradient(135deg,#00e6ad,#00ffc2);
  color:#041e18;                       /* texte sombre lisible */
  border:none;
  box-shadow:0 0 18px rgba(0,255,194,.35);
  transition:transform .2s ease, box-shadow .2s ease;
}
.btn-simu:hover {
  transform:translateY(-2px) scale(1.03);
  box-shadow:0 0 28px rgba(0,255,194,.55);
  color:#041e18;                       /* 🔒 fixe la couleur du texte */
}

.btn-garage {
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 20px; border-radius:999px;
  font-size:16px; font-weight:700; line-height:1.2;
  background:rgba(255,255,255,.10);
  color:#ffffff;                       /* texte blanc par défaut */
  border:1px solid rgba(255,255,255,.25);
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.btn-garage:hover {
  background:var(--accent);
  color:#041e18;                       /* texte sombre quand fond devient vert */
  transform:translateY(-2px);
  box-shadow:0 0 22px rgba(0,255,194,.45);
}
/* CTA primaire : toujours lisible au hover */
.btn.btn-simu,
.btn.btn-simu * { color:#041e18 !important; }

.btn.btn-simu:hover,
.btn.btn-simu:hover * {
  color:#041e18 !important;
  -webkit-text-fill-color:#041e18; /* WebKit */
}