:root{--red:#d12020;--red-dark:#b21616;--text:#fff;--bg:#f7f7f7;--shadow:0 10px 30px rgba(0,0,0,.15);--radius-pill:999px}
*{box-sizing:border-box} html,body{height:100%} body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans",sans-serif;color:#222;background:var(--bg)}
/* Topbar */
.topbar{position:fixed;inset:0 0 auto 0;height:60px;background:var(--red);color:var(--text);display:flex;align-items:center;justify-content:space-between;padding:0 16px;z-index:40}
.brand{color:var(--text);text-decoration:none;font-weight:700;letter-spacing:.5px}
.topnav a{color:var(--text);text-decoration:none;font-weight:600;margin-left:16px}
.topnav a:hover{opacity:.9}
/* Burger + Drawer */
.burger{all:unset;cursor:pointer;display:flex;gap:4px;flex-direction:column}
.burger span{display:block;width:24px;height:2px;background:#fff}
.drawer{position:fixed;top:0;left:-280px;width:260px;height:100dvh;background:#fff;box-shadow:var(--shadow);padding:80px 20px;z-index:50;transition:left .25s ease}
.drawer nav{display:flex;flex-direction:column;gap:14px}
.drawer a{color:#333;text-decoration:none;font-weight:600}
.drawer a:hover{color:var(--red)}
.drawer.open{left:0}
.drawer-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.3);opacity:0;pointer-events:none;transition:opacity .2s;z-index:45}
.drawer-backdrop.show{opacity:1;pointer-events:auto}
/* Page wrapper (compense la topbar) */
.page{padding:90px 16px 24px;max-width:1100px;margin:0 auto}
/* Footer */
.site-footer{background:var(--red);color:var(--text);padding:14px 0;margin-top:40px}
.foot-inner{max-width:1100px;margin:0 auto;padding:0 16px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center}
.site-footer a{color:#ffecec;text-decoration:none;font-weight:600}
.site-footer a:hover{opacity:.9}
/* Hero (pour la home) */
.hero{position:relative;min-height:calc(100vh - 0px);background:center/cover no-repeat fixed;display:grid;place-items:center;padding-top:60px}
.hero-overlay{position:absolute;inset:0;background:rgba(255,255,255,.55);backdrop-filter:saturate(120%) blur(1px)}
.hero-content{position:relative;z-index:1;text-align:center;padding:24px;max-width:980px}
.logo{width:min(380px,70vw);height:auto;margin:12px auto 24px;display:block}
.tagline{color:#c01515;font-weight:900;line-height:1.25;font-size:clamp(18px,3.2vw,34px);text-transform:uppercase;letter-spacing:.8px;margin:0 auto 28px}
.btn{display:inline-block;font-weight:800;text-decoration:none;color:#fff;padding:18px 28px;border-radius:var(--radius-pill);box-shadow:var(--shadow);transition:transform .04s ease;background:var(--red)}
.btn:hover{background:var(--red-dark)}
.cta-group{display:flex;flex-wrap:wrap;justify-content:center;gap:18px}
@media (min-width:900px){.topbar{height:70px;padding:0 24px}.brand{font-size:22px}.btn{font-size:20px;padding:20px 34px}}

/* --- Compact hero (remonte le contenu) --- */
:root{ --topbar-h:60px; }

@media (min-width:900px){
  :root{ --topbar-h:70px; }
}

.hero--compact{
  min-height:82vh;                  /* moins haut que 100vh = remonte le fold */
  place-items:start center;          /* ancre en haut */
  padding-top:calc(var(--topbar-h) + 10px); /* petit offset sous la barre */
}

.hero--compact .logo{
  width:min(320px,60vw);             /* logo un peu plus petit */
  margin:4px auto 12px;              /* réduit l’espace au-dessus/dessous */
}

.hero--compact .tagline{
  margin:6px auto 14px;              /* resserre encore */
  font-size:clamp(18px,2.6vw,30px);  /* titre un peu moins grand */
  line-height:1.2;
}

.hero--compact .cta-group{
  margin-top:6px;                    /* rapproche les boutons du titre */
  gap:12px;
}

.hero--compact .btn{
  padding:14px 22px;                 /* boutons un poil plus compacts */
  font-size:18px;
}