:root{
  --brand:#cc1636;
  --brand-2:#e63a56; /* teinte voisine pour dégradés */
  --anthracite:#0f1216; /* inspiration siège: anthracite */
  --anthracite-2:#171b22;
  --bg:#f9f7f7;
  --text:#111827;
  --muted:#6b7280;
  --surface:#f8fafc;
  --border:#e5e7eb;
  --shadow:0 10px 30px rgba(17,24,39,.08);
}
*{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,Arial,sans-serif;line-height:1.6;min-height:100vh}
body{display:flex;flex-direction:column}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.site-header{position:sticky;top:0;background:#f5f4f4;border-bottom:1px solid rgba(17,24,39,.08);box-shadow:0 6px 18px rgba(17,24,39,.06);z-index:50}
.header-wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.nav{display:flex;gap:18px;align-items:center}
.nav a{padding:.4rem .6rem;border-radius:8px}
.nav a.cta{background:var(--brand);color:#fff;font-weight:600}
.burger{display:none;border:0;background:#fff;font-size:22px}
.hero{position:relative;overflow:hidden;padding:72px 0;background:linear-gradient(180deg, #fff 0%, #fff 100%), radial-gradient(100% 60% at 0% 0%, rgba(204,19,54,.08), transparent 60%), radial-gradient(80% 50% at 100% 0%, rgba(230,58,86,.10), transparent 60%)}
.hero::before,.hero::after{content:"";position:absolute;pointer-events:none;filter:blur(40px);opacity:.75;z-index:0}
/* gouttes liquides décoratives */
.hero::before{width:520px;height:520px;left:-160px;top:-140px;background:radial-gradient(60% 60% at 40% 40%, rgba(204,19,54,.28) 0%, rgba(204,19,54,.12) 45%, transparent 60%);border-radius:43% 57% / 58% 42%;animation:floatA 14s ease-in-out infinite}
.hero::after{width:620px;height:620px;right:-220px;bottom:-260px;background:radial-gradient(60% 60% at 60% 60%, rgba(230,58,86,.22) 0%, rgba(230,58,86,.10) 45%, transparent 65%);border-radius:56% 44% / 44% 56%;animation:floatB 18s ease-in-out infinite}
@keyframes floatA{0%{transform:translateY(0) rotate(0)}50%{transform:translateY(12px) rotate(6deg)}100%{transform:translateY(-4px) rotate(-4deg)}}
@keyframes floatB{0%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(-6deg)}100%{transform:translateY(6px) rotate(4deg)}}
.hero h1{font-family:Poppins,Inter,sans-serif;font-weight:800;letter-spacing:-.02em;font-size:clamp(28px,4vw,44px);margin:0 0 12px}
.hero p.lead{font-size:clamp(16px,2.2vw,20px);color:var(--muted);max-width:800px}
.btns{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap}
.button{position:relative;display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:12px;border:1px solid var(--border);background:#fff;box-shadow:var(--shadow);font-weight:600;transition:transform .2s ease, box-shadow .2s ease}
.button.primary{color:#fff;border-color:transparent;background:linear-gradient(135deg,var(--brand) 0%,var(--brand-2) 100%);background-size:180% 180%;transition:transform .2s ease,box-shadow .2s ease,background-position .4s ease}
.button.primary::after{content:"";position:absolute;inset:-1px;border-radius:12px;background:radial-gradient(120px 60px at 10% 10%, rgba(255,255,255,.35), transparent 40%), radial-gradient(120px 60px at 90% 20%, rgba(255,255,255,.15), transparent 45%);mix-blend-mode:soft-light;pointer-events:none}
.button:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(17,24,39,.12)}
.button.primary:hover{background-position:80% 30%}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.card{background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:20px;transition:transform .2s ease, box-shadow .2s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(17,24,39,.12)}
.card.equal{display:flex;flex-direction:column}
.card.equal .card-actions{margin-top:auto}
.features{padding:32px 0;background:var(--surface)}
.features .feature{display:flex;gap:14px;align-items:flex-start}
.feature .icon{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--border);background:radial-gradient(40px 40px at 30% 30%, rgba(204,19,54,.12), rgba(248,250,252,1) 60%)}
.feature .icon:hover{box-shadow:0 6px 24px rgba(204,19,54,.15)}
.kpis{display:flex;gap:24px;flex-wrap:wrap;margin:24px 0}
.kpi{padding:14px 18px;border:1px solid var(--border);border-radius:12px;background:#fff;box-shadow:var(--shadow)}
.section{padding:56px 0}
.section h2{font-family:Poppins,Inter,sans-serif;font-weight:700;letter-spacing:-.01em;margin:0 0 16px}
.hero h1 em{background:linear-gradient(135deg,var(--brand),var(--brand-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.badge{display:inline-block;background:#fff;border:1px solid var(--border);padding:6px 10px;border-radius:999px;font-size:12px;color:var(--muted)}
/* (nettoyage) styles inutilisés retirés: .brand-band, .brand-color */
.page-hero{position:relative;overflow:hidden;padding:48px 0;background:
  linear-gradient(180deg,#fff 0%, #fff 100%),
  radial-gradient(80% 60% at 0% 0%, rgba(204,19,54,.06), transparent 60%),
  radial-gradient(70% 60% at 100% 0%, rgba(230,58,86,.08), transparent 60%)}
.page-hero::before,.page-hero::after{content:"";position:absolute;pointer-events:none;filter:blur(30px);opacity:.7}
.page-hero::before{width:360px;height:360px;left:-120px;top:-120px;background:radial-gradient(55% 55% at 40% 40%, rgba(204,19,54,.22), rgba(204,19,54,.08) 50%, transparent 65%);border-radius:43% 57% / 58% 42%;animation:floatA 16s ease-in-out infinite}
.page-hero::after{width:420px;height:420px;right:-160px;bottom:-200px;background:radial-gradient(55% 55% at 60% 60%, rgba(230,58,86,.16), rgba(230,58,86,.08) 55%, transparent 70%);border-radius:56% 44% / 44% 56%;animation:floatB 20s ease-in-out infinite}
.liquid-divider{height:28px;background:radial-gradient(28px 14px at 14px 0, #fff 98%, transparent 100%) repeat-x;background-size:56px 28px;transform:translateY(1px)}
.cta-block{padding:26px;border:2px dashed var(--border);border-radius:16px;background:var(--surface)}
.showrooms{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.site-footer{position:relative;border-top:1px solid var(--border);margin-top:48px;padding:24px 0;background:#fff;overflow:hidden}
.site-footer{flex:0 0 auto}
main{flex:1 0 auto}
.site-footer::before{content:"";position:absolute;top:-28px;left:0;right:0;height:28px;pointer-events:none;background:
  radial-gradient(28px 14px at 14px 100%, #fff 98%, transparent 100%) repeat-x;
background-size:56px 28px}
.site-footer .grid-3{grid-template-columns:2fr 1fr 1fr}
.site-footer p, .site-footer li{margin:6px 0;color:#4b5563}
.site-footer .subfooter{border-top:1px solid var(--border);margin-top:10px;padding-top:10px}
.socials{list-style:none;padding:0}
.socials li{margin:6px 0}
.socials a{display:inline-flex;align-items:center;gap:8px}
.ico{width:18px;height:18px;display:inline-block;vertical-align:middle;color:currentColor}
/* Footer social bar */
.footer-socials{display:flex;justify-content:center;align-items:center;gap:14px;margin:8px auto;width:100%;text-align:center}
.footer-socials > *{flex:0 0 auto}
.site-footer .footer-socials{display:flex;justify-content:center;align-items:center}
.footer-socials a{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--border);background:#fff;box-shadow:0 6px 18px rgba(17,24,39,.06);transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.footer-socials a:hover{transform:translateY(-1px);border-color:var(--brand);box-shadow:0 10px 24px rgba(204,22,54,.16)}
.footer-socials .ico{width:18px;height:18px;color:var(--brand)}
.small{font-size:13px;color:var(--muted)}
.ft-brand{font-weight:600}
.notice{background:#fffbe6;border:1px solid #f5e6a7;color:#7a5f00;padding:12px;border-radius:12px}
form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
form label{display:block;font-weight:600;margin-bottom:6px}
input[type=text], input[type=email], input[type=tel], textarea{width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:10px;outline:none}
textarea{min-height:130px;resize:vertical}
button[type=submit]{padding:12px 16px;border-radius:10px;border:0;background:var(--brand);color:#fff;font-weight:700;box-shadow:var(--shadow)}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid var(--border);padding:10px;text-align:left}
@media(max-width:900px){
  .grid-3,.grid-4{grid-template-columns:1fr}
  .showrooms{grid-template-columns:1fr}
  form .row{grid-template-columns:1fr}
  .nav{display:none;position:absolute;top:64px;right:0;background:#f5f4f4;border-left:1px solid var(--border);border-bottom:1px solid var(--border);flex-direction:column;padding:10px;width:min(90vw,320px)}
  .burger{display:block}
}

/* accessibilité / mouvements réduits */
@media (prefers-reduced-motion: reduce){
  .hero::before,.hero::after{animation:none}
  .page-hero::before,.page-hero::after{animation:none}
  .button,.button.primary{transition:none}
  .card{transition:none}
}

/* Floating WhatsApp button */
.fab-wa{position:fixed;right:20px;bottom:20px;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#25D366,#128C7E);color:#fff;text-decoration:none;box-shadow:0 14px 36px rgba(18,140,126,.35), inset 0 0 0 1px rgba(255,255,255,.18);z-index:60;transition:transform .2s ease, box-shadow .2s ease}
.fab-wa:hover{transform:translateY(-2px);box-shadow:0 18px 44px rgba(18,140,126,.45)}
.fab-wa svg{width:26px;height:26px;color:#fff}
.fab-wa::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(closest-side, rgba(255,255,255,.25), transparent 80%);opacity:.0;animation:faw 2.2s ease-in-out infinite}
@keyframes faw{0%{opacity:.0;transform:scale(.9)}50%{opacity:.35;transform:scale(1)}100%{opacity:.0;transform:scale(1.08)}}
@media (prefers-reduced-motion: reduce){.fab-wa{transition:none}.fab-wa::after{animation:none;opacity:0}}

/* Smartphones */
@media(max-width:520px){
  .container{padding:0 14px}
  .header-wrap{height:56px}
  .nav{top:56px;width:100vw;right:0;left:0;border-left:0;box-shadow:0 10px 24px rgba(17,24,39,.08)}
  .nav a{padding:14px 16px}
  .burger{font-size:26px}

  .hero, .page-hero{padding:56px 0 44px}
  .hero-beam{height:10px;width:calc(100vw - 24px)}
  .ph-beam{height:8px;width:calc(100vw - 24px)}
  .hero-ring{width:min(92vw,520px);height:min(92vw,520px);top:30%;opacity:.7}
  .ph-ring{width:min(86vw,460px);height:min(86vw,460px);top:30%;opacity:.7}
  .hero h1{font-size:clamp(24px,8vw,32px);line-height:1.2}
  .section h2{font-size:22px}
  body{font-size:15.5px}

  .btns{flex-direction:column;align-items:stretch}
  .button{justify-content:center}
  .kpis{flex-direction:column}
  .kpi{width:100%}
  .card{padding:16px}

  .fab-wa{right:14px;bottom:14px;width:52px;height:52px}

  /* tables (admin) */
  .table{display:block;overflow-x:auto;white-space:nowrap}

  /* Social links: icons only on mobile (text visually hidden but accessible) */
  .socials a{gap:0}
  .socials a span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .ico{width:20px;height:20px}
  .footer-socials{gap:12px}
  .footer-socials a{width:34px;height:34px}
  .footer-socials .ico{width:18px;height:18px}
}

/* Bold hero inspired by HQ */
.hero-bold{color:#e5e7eb;background:linear-gradient(180deg,var(--anthracite) 0%, var(--anthracite-2) 100%)}
.hero-bold .lead{color:#cbd5e1}
.hero-bold .kpi{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12);color:#e5e7eb}
.hero-bold .badge{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:#e5e7eb}
.hero-bold a{color:#fff}
.hero-bold .button{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:#fff}
.hero-bold .button.primary{background:linear-gradient(135deg,var(--brand) 0%, var(--brand-2) 100%)}
.hero-bold .card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:#e5e7eb}
.hero-bold .card h3{color:#fff}
.hero-bold .cta-block{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.16)}
.hero-beam{position:absolute;left:50%;top:2px;transform:translateX(-50%);height:14px;width:min(88vw,1080px);background:linear-gradient(180deg,#cc1636,#cc1636);box-shadow:0 6px 24px rgba(204,22,54,.45);border-radius:10px;z-index:0}
.hero-beam::before{content:"";position:absolute;inset:0;border-radius:10px;background:
  repeating-linear-gradient(90deg, rgba(255,255,255,.28), rgba(255,255,255,.28) 2px, transparent 3px, transparent 22px);
  opacity:.35}
.hero-ring{position:absolute;left:50%;top:26%;transform:translate(-50%, -10%);width:min(70vw,700px);height:min(70vw,700px);border-radius:50%;background:
  radial-gradient(closest-side, transparent 62%, rgba(255,255,255,.18) 65%, rgba(255,255,255,.06) 74%, transparent 76%),
  radial-gradient(closest-side, rgba(255,255,255,.08), transparent 70%);
  filter:blur(.2px);opacity:.9;pointer-events:none;z-index:0}

/* Dark page banner */
.page-hero{color:#e5e7eb;background:linear-gradient(180deg,var(--anthracite) 0%, var(--anthracite-2) 100%)}
.page-hero h1,.page-hero h2{color:#fff}
.page-hero p{color:#cbd5e1}
.page-hero .card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:#e5e7eb}
.page-hero .card h3{color:#fff}
.page-hero .cta-block{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.16)}
.ph-beam{position:absolute;left:50%;top:2px;transform:translateX(-50%);height:10px;width:min(84vw,960px);background:linear-gradient(180deg,#cc1636,#cc1636);box-shadow:0 6px 22px rgba(204,22,54,.4);border-radius:10px;z-index:0}
.ph-beam::before{content:"";position:absolute;inset:0;border-radius:10px;background:
  repeating-linear-gradient(90deg, rgba(255,255,255,.28), rgba(255,255,255,.28) 2px, transparent 3px, transparent 22px);
  opacity:.28}
.ph-ring{position:absolute;left:50%;top:28%;transform:translate(-50%,-10%);width:min(58vw,580px);height:min(58vw,580px);border-radius:50%;background:
  radial-gradient(closest-side, transparent 62%, rgba(255,255,255,.18) 65%, rgba(255,255,255,.06) 74%, transparent 76%),
  radial-gradient(closest-side, rgba(255,255,255,.06), transparent 70%);
  filter:blur(.2px);opacity:.9;pointer-events:none;z-index:0}

/* keep content above decorative elements */
.hero .container, .page-hero .container{position:relative;z-index:2}