@import url('https://fonts.googleapis.com/css2?family=Fjalla+One&family=Rubik:wght@400;500;600;700;800&display=swap');

:root{--red:#EE1C24;--red2:#c80f16;--ink:#1a1a1a}
*{box-sizing:border-box}
body{margin:0;background:#e9e9e9;color:var(--ink);font-family:'Rubik',Arial,sans-serif}
button{font:inherit;cursor:default}
.deck{max-width:1440px;margin:0 auto}
.intro{background:#151515;color:#fff;padding:18px 48px;display:flex;justify-content:space-between;align-items:center}
.intro strong{font-size:17px}.intro span{font-size:13px;color:#b7b7b7}
.frame{height:900px;position:relative;overflow:hidden;background:#fff;margin-bottom:40px;box-shadow:0 14px 50px #0002}
.tag{position:absolute;z-index:6;top:20px;right:22px;background:var(--ink);color:#fff;padding:9px 14px;border-radius:50px;font-weight:700;font-size:12px;letter-spacing:.08em}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:16px;letter-spacing:.02em}
.brand img{width:44px;height:44px;object-fit:contain}
h1,.display{font-family:'Fjalla One',Impact,sans-serif;text-transform:uppercase;line-height:.95;letter-spacing:.005em;margin:0}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}

header{position:relative;z-index:3;padding:24px 50px;display:flex;justify-content:space-between;align-items:center;background:#fff;border-bottom:3px solid var(--red)}
.nav{display:flex;align-items:center;gap:26px;font-size:14px;font-weight:600}
.cta{border:0;padding:14px 22px;font-weight:700;border-radius:3px;background:var(--red);color:#fff}
.ghost{background:transparent;border:2px solid var(--ink);color:var(--ink);padding:12px 20px;font-weight:700;border-radius:3px}

.hero{position:relative;height:430px}
.heroimg{position:absolute;inset:0;background:url('assets/action-bw.jpg') center 35%/cover;filter:grayscale(1) contrast(1.1)}
.shade{position:absolute;inset:0;background:linear-gradient(100deg,#000 10%,#000000d9 36%,#00000055 65%,transparent 100%),linear-gradient(0deg,#ee1c2422,transparent 40%)}
.herotxt{position:relative;z-index:2;padding:62px 60px 0;max-width:720px;color:#fff}
.herotxt h1{font-size:78px}
.lead{font-size:17px;max-width:480px;line-height:1.5;color:#e8e8e8;margin-top:16px}
.actions{display:flex;gap:14px;margin-top:28px}

.band{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);background:var(--ink)}
.band div{padding:22px 28px;border-right:1px solid #ffffff22}
.band div:last-child{border-right:0}
.band b{display:block;font:800 36px 'Fjalla One',Impact,sans-serif;color:var(--red)}
.band span{font-size:11.5px;font-weight:700;letter-spacing:.08em;color:#cfcfcf}

.strip{display:grid;grid-template-columns:.55fr 1.45fr;height:270px}
.strip .photo{background:url('assets/equipe.jpg') center 25%/cover}
.values{background:#fafafa;padding:40px 48px;display:flex;flex-direction:column;justify-content:center;gap:14px;border-left:4px solid var(--red)}
.values b{font-size:22px;line-height:1.35;font-weight:600}
.values span{font-size:14px;color:#666;line-height:1.5}

.note{max-width:1440px;margin:-15px auto 55px;background:#fff;padding:18px 25px;font-size:14px;line-height:1.5;color:#333}

@media(max-width:700px){
  .frame{height:1200px}
  .nav span{display:none}
  header{padding:16px}
  .herotxt{padding:40px 22px 0}
  .herotxt h1{font-size:46px}
  .band{grid-template-columns:repeat(2,1fr)}
  .strip{grid-template-columns:1fr;height:auto}
  .strip .photo{height:160px}
  .values{padding:24px 22px}
}