:root{
  --bg:#061612;
  --surface:rgba(255,255,255,.06);
  --surface2:rgba(255,255,255,.04);
  --border:rgba(255,255,255,.12);
  --text:#eef6f2;
  --muted:#bcd3c9;

  --emerald:#19b37b;
  --emerald2:#0e3a2c;

  --gold:#d7b24c;
  --gold2:#f0d27a;

  --radius:18px;
  --shadow:0 14px 40px rgba(0,0,0,.38);
  --max:1140px;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  color:var(--text);
  background:
    radial-gradient(1200px 680px at 20% -10%, rgba(25,179,123,.28), transparent 60%),
    radial-gradient(900px 520px at 90% 0%, rgba(215,178,76,.18), transparent 55%),
    var(--bg);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.5;
}
a{color:inherit}
img{max-width:100%;display:block}
.container{width:min(var(--max), calc(100% - 2rem)); margin:0 auto;}

.skip{position:absolute;left:-999px}
.skip:focus{left:1rem;top:1rem;background:rgba(0,0,0,.7);padding:.6rem .8rem;border-radius:12px;border:1px solid var(--border);z-index:9999}

.header{
  position:sticky; top:0; z-index:50;
  background: rgba(6,22,18,.62);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(215,178,76,.18);
}
.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap: 1.2rem;
  padding: 1.15rem 0;   /* plus haut */
}
.goldbar{
  height: 12px; /* plus épais */
  background: linear-gradient(90deg,
    rgba(215,178,76,.08),
    rgba(215,178,76,.95),
    rgba(215,178,76,.08)
  );
}

.brand{display:flex;align-items:center;gap:.85rem;text-decoration:none}
.brand__logo{width:52px;height:52px;filter: drop-shadow(0 10px 18px rgba(0,0,0,.35))}
.brand__name{font-weight:900;letter-spacing:.2px}
.brand__tag{color:var(--muted);font-size:.92rem}

.nav__toggle{
  display:none;
  border:1px solid rgba(215,178,76,.28);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  color:var(--text);
  padding:.55rem .8rem;
  border-radius:12px;
}
.nav__menu{display:flex;list-style:none;margin:0;padding:0;gap:.5rem;align-items:center}
.nav__menu a{
  display:inline-flex;align-items:center;
  padding:.55rem .7rem;border-radius:12px;
  border:1px solid transparent;
  color:var(--muted);
  text-decoration:none;
}
.nav__menu a:hover{color:var(--text);border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.05)}
.nav__don{color:var(--text)!important;border-color:rgba(215,178,76,.35)!important;background:radial-gradient(160px 80px at 25% 0%, rgba(215,178,76,.26), rgba(255,255,255,.05))}

.hero{position:relative;padding:3.2rem 0 2.4rem;overflow:hidden}
.hero__bg{
  position:absolute; inset:0;
  background:
    /* voile léger (pas noir) */
    linear-gradient(180deg, rgba(6,22,18,.08), rgba(6,22,18,.40)),
    /* vignette douce pour lisibilité */
    radial-gradient(900px 520px at 18% 78%, rgba(6,22,18,.55), transparent 65%),
    url("/assets/hero-truck.webp?v=6");
  background-size: cover;
  background-position: 32% 60%;
  opacity: 1;
  filter: saturate(1.06) contrast(1.03) brightness(1.06);
}
.hero__inner{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:1.2rem;align-items:start}
.chip{
  display:inline-flex;
.hero{ padding: 4rem 0 3rem; }
  border:1px solid rgba(215,178,76,.28);
  background:rgba(0,0,0,.25);
  font-weight:700;
  width:fit-content;
}
.hero__copy{
  background: rgba(6,22,18,.46);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 18px;
  padding: 1.15rem 1.15rem;
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 50px rgba(0,0,0,.30);
}
.hero h1{ text-shadow: 0 10px 28px rgba(0,0,0,.35); }
.lead{ text-shadow: 0 10px 26px rgba(0,0,0,.25); }
h1{margin:.9rem 0 .7rem;font-size:clamp(2.1rem, 3.2vw, 3.25rem);line-height:1.05}
.lead{margin:0 0 1.05rem;color:var(--muted);font-size:1.06rem;max-width:60ch}

.cta{display:flex;gap:.75rem;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  padding:.72rem 1rem;border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);
  color:var(--text);
  text-decoration:none;
}
.btn:hover{border-color:rgba(215,178,76,.28);background:rgba(255,255,255,.07)}
.btn--primary{border-color:rgba(215,178,76,.35);background:radial-gradient(160px 80px at 25% 0%, rgba(215,178,76,.26), rgba(255,255,255,.05))}
.btn--ghost{color:var(--muted)}

.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;margin-top:1.25rem}
.kpi{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);border-radius:16px;padding:.75rem .8rem}
.kpi b{display:block;color:var(--gold2)}
.kpi span{display:block;color:var(--muted);font-size:.92rem;margin-top:.25rem}

.panel{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:1rem;
}
.panel h2{margin:.15rem 0 .4rem;font-size:1.15rem}
.quick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;margin-top:.85rem}
.quick__card{
  border:1px solid rgba(215,178,76,.20);
  background: radial-gradient(220px 120px at 20% 0%, rgba(25,179,123,.18), rgba(255,255,255,.03));
  border-radius:16px;padding:.85rem;text-decoration:none;
  box-shadow:0 10px 26px rgba(0,0,0,.25);
}
.quick__card b{display:block}
.quick__card span{display:block;color:var(--muted);font-size:.92rem;margin-top:.2rem}

.section{padding:2.35rem 0}
.section--alt{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.head{margin-bottom:1.1rem}
.head h2{margin:.1rem 0 .35rem;font-size:1.7rem}
.muted{color:var(--muted)}
.small{font-size:.92rem}

.grid{display:grid;gap:1rem}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}

.card{
  border:1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:1.1rem 1.05rem;
}
.card h3{margin:.15rem 0 .45rem}
.card p{margin:0;color:var(--muted)}

.callout{
  margin-top:1rem;
  border:1px solid rgba(215,178,76,.22);
  background: radial-gradient(900px 320px at 25% 0%, rgba(25,179,123,.18), rgba(255,255,255,.03));
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:1.05rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}

.split{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:start}
.split--rev{grid-template-columns:1fr 1fr}
.media{border-radius:var(--radius);overflow:hidden;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);box-shadow:var(--shadow)}
.media img{width:100%;height:340px;object-fit:cover;background:rgba(0,0,0,.25)}
.cap{padding:.7rem .85rem}
.stack{display:grid;gap:1rem}

.construction{
  margin-top:1rem;
  border:1px dashed rgba(215,178,76,.35);
  border-radius:16px;
  padding:.85rem .95rem;
  background:rgba(0,0,0,.16);
  color:var(--muted);
  width:fit-content;
}

.note{
  margin-top:1rem;
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  padding:.85rem .95rem;
  background:rgba(255,255,255,.04);
}

.don{display:grid;grid-template-columns:1.15fr .85fr;gap:1rem;align-items:start}
.qr{margin-top:.7rem;width:fit-content;padding:.6rem;border-radius:18px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04)}

.field{display:flex;flex-direction:column;gap:.35rem;margin-top:.65rem}
.field span{color:var(--muted);font-size:.92rem}
.field input,.field textarea{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.18);
  color:var(--text);
  padding:.7rem .8rem;border-radius:14px;outline:none
}
.field input:focus,.field textarea:focus{
  border-color: rgba(215,178,76,.35);
  box-shadow:0 0 0 4px rgba(215,178,76,.10);
}

.footer{padding:1.4rem 0;border-top:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.16)}
.foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.foot__left{display:flex;align-items:center;gap:.75rem}
.foot__logo{width:38px;height:38px;opacity:.95}

@media (max-width:980px){
  .hero__inner{grid-template-columns:1fr}
  .grid--3,.grid--2{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .don{grid-template-columns:1fr}
}
@media (max-width:860px){
  .nav__toggle{display:inline-flex}
  .nav__menu{
    display:none;position:absolute;right:1rem;top:78px;
    flex-direction:column;align-items:stretch;gap:.2rem;
    padding:.55rem;border-radius:16px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(6,22,18,.92);
    width:min(320px, calc(100vw - 2rem));
    box-shadow:var(--shadow);
  }
  .nav__menu.is-open{display:flex}
}