:root{
  --bg:#0b0f14;               /* fond très sombre */
  --card:#111827;
  --text:#e5e7eb;
  --muted:#94a3b8;
  --accent:#33818f;
  /* Bleu E-Motion France (plus foncé que RAD) */
  --brand-blue:#002BA1;
  /* Rouge midnight cherry approx. */
  --brand-red:#D9001F;
  --radius:18px;
  --shadow:0 10px 25px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html{
  height:100%;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.18) transparent;
}
body{min-height:100%;overflow-x:hidden}
body::-webkit-scrollbar{width:8px}
body::-webkit-scrollbar-track{background:transparent}
body::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.18);
  border-radius:999px;
}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif;
  color:var(--text);
  /* Dégradé élargi + couvrant (grandes ellipses, coins opposés) */
  background:
    radial-gradient(1000px 600px at 120% -25%, var(--brand-red) 0%, transparent 70%),
    radial-gradient(1000px 600px at -25% 120%, var(--brand-blue) 0%, transparent 80%),
    var(--bg);
}

.wrap{max-width:680px;margin:0 auto;padding:clamp(16px,4vw,28px)}
header{
  text-align:center;
  padding:20px;
  border-radius:var(--radius);
  /* Fond sombre pour que les dégradés n'entrent pas dans le bloc texte */
  background:linear-gradient(180deg, rgba(11,15,20,0.9) 0%, rgba(17,24,39,0.95) 100%);
  border:1px solid rgba(148,163,184,.15);
  box-shadow:var(--shadow);
}

/* Ancienne .logo (inutile si non utilisée) — on la garde au cas où
.logo{
  height:70px; width:auto; display:block; margin:0 auto 14px auto;
} */

h1{margin:.2em 0 .2em;font-size:clamp(22px,5.6vw,28px);line-height:1.15}
h1 span{display:block}
#hero-title-role{
  margin-top:4px;
  font-size:inherit;
  font-weight:inherit;
  color:inherit;
}
.sub{color:var(--muted);font-size:clamp(14px,3.4vw,16px)}
.stack{margin-top:18px;display:grid;gap:14px}

.btn{
  display:flex;align-items:center;gap:14px;
  padding:16px 18px;border-radius:22px;text-decoration:none;color:white;font-weight:700;
  box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.08);
  transition:transform .06s ease, box-shadow .2s ease, opacity .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active{transform:scale(.98)}
.btn .icon{
  width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:rgba(255,255,255,.12);
  flex:0 0 38px;
}
.btn .txt{display:flex;flex-direction:column}
.btn .title{font-size:18px;line-height:1.1}
.btn .desc{font-size:14px;font-weight:600;opacity:.85}

.cta-call{background:linear-gradient(135deg,#0044FF,#00113F)}
.cta-wa{background:linear-gradient(135deg,#26DD6A,#0D632D)}
.cta-site{background:linear-gradient(135deg,#E00020,#47000A)}
.cta-save{background:linear-gradient(135deg,#D719DD,#560A59)}
.cta-email{background:linear-gradient(135deg,#0F766E,#083344)}

footer{
  margin-top:22px;
  color:var(--muted);
  font-size:12px;
  text-align:center
}
/* Logo en bas centré */
.logo-footer{
  height:150px;
  width:auto;
  display:block;
  margin:40px auto 0 auto;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.35));
}