/* ============================================================ FWIIP — Design system "très sportif" Rouge dominant · échelle de chaleur · typo athlétique italique ============================================================ */ /* fonts chargées via dans le de chaque page */ :root{ --red:#E5231F; --red-deep:#BE1813; --red-soft:#FF4A3D; --ink:#1A1411; --ink-2:#2A211C; --paper:#FBF5EC; --paper-2:#F3E9DA; --white:#ffffff; --muted:#675A4E; /* heat scale 1 -> 7 (faible -> fort) */ --h1:#F6D44E; --h2:#F7C53C; --h3:#F4A833; --h4:#F0892C; --h5:#EE6A2B; --h6:#EA4A26; --h7:#E5231F; --maxw:1240px; --ease:cubic-bezier(.2,.7,.2,1); } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; background:var(--paper); color:var(--ink); font-family:'Hanken Grotesk',system-ui,sans-serif; font-size:18px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; } a{color:inherit; text-decoration:none;} img{display:block; max-width:100%;} ::selection{background:var(--red); color:#fff;} /* ---------- type ---------- */ .display{ font-family:'Montserrat',sans-serif; font-weight:900; font-style:italic; text-transform:uppercase; line-height:.92; letter-spacing:-.022em; } .kicker{ font-family:'Montserrat',sans-serif; font-weight:800; font-style:italic; text-transform:uppercase; letter-spacing:.16em; font-size:.82rem; } h1,h2,h3{margin:0;} /* ---------- layout helpers ---------- */ .wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;} .section{padding:110px 0;} .center{text-align:center;} /* ---------- buttons ---------- */ .btn{ display:inline-flex; align-items:center; gap:10px; font-family:'Montserrat',sans-serif; font-weight:800; font-style:italic; text-transform:uppercase; letter-spacing:.04em; font-size:1.02rem; padding:16px 30px; border-radius:4px; border:none; cursor:pointer; transition:transform .15s var(--ease), box-shadow .15s var(--ease), background .15s; position:relative; } .btn:active{transform:translateY(1px);} .btn-red{background:var(--red); color:#fff; box-shadow:0 6px 0 var(--red-deep);} .btn-red:hover{transform:translateY(-2px); box-shadow:0 9px 0 var(--red-deep);} .btn-ink{background:var(--ink); color:#fff; box-shadow:0 6px 0 #000;} .btn-ink:hover{transform:translateY(-2px); box-shadow:0 9px 0 #000;} .btn-ghost{background:transparent; color:var(--ink); border:2.5px solid var(--ink);} .btn-ghost:hover{background:var(--ink); color:#fff;} .btn-white{background:#fff; color:var(--ink); box-shadow:0 6px 0 rgba(0,0,0,.25);} .btn-white:hover{transform:translateY(-2px);} .btn .arr{font-style:normal;} /* ---------- navbar ---------- */ .nav{ position:sticky; top:0; z-index:50; background:rgba(251,245,236,.86); backdrop-filter:blur(10px); border-bottom:2px solid var(--ink); } .nav-inner{display:flex; align-items:center; justify-content:space-between; height:74px;} .nav-logo{display:flex; align-items:center; gap:12px;} .nav-logo img{height:38px; width:auto;} .nav-links{display:flex; align-items:center; gap:30px;} .nav-links a{ font-family:'Montserrat',sans-serif; font-weight:700; font-style:italic; text-transform:uppercase; letter-spacing:.04em; font-size:.92rem; color:var(--ink); position:relative; padding:4px 0; white-space:nowrap; } .nav-links a:not(.btn)::after{ content:''; position:absolute; left:0; bottom:-2px; height:3px; width:0; background:var(--red); transition:width .2s var(--ease); } .nav-links a:not(.btn):hover::after{width:100%;} .nav-links a.active:not(.btn)::after{width:100%;} .nav-burger{display:none; background:none; border:none; cursor:pointer; padding:6px;} .nav-burger span{display:block; width:26px; height:3px; background:var(--ink); margin:5px 0; border-radius:2px;} /* ---------- heat bar ---------- */ .heatbar{height:8px; width:100%; background:linear-gradient(90deg,var(--h1),var(--h2),var(--h3),var(--h4),var(--h5),var(--h6),var(--h7));} /* ---------- card image styling ---------- */ .card-img{ border-radius:12px; overflow:hidden; box-shadow:0 18px 40px -12px rgba(26,20,17,.5); background:#fff; } /* ---------- speed slashes decoration ---------- */ .slash{position:absolute; background:var(--red); transform:skewX(-18deg); border-radius:3px;} /* ---------- footer ---------- */ .footer{background:var(--ink); color:#fff; padding:70px 0 40px;} .footer a{color:rgba(255,255,255,.75);} .footer a:hover{color:#fff;} .footer .foot-soon{display:block; padding:6px 0; color:rgba(255,255,255,.32); font-weight:600;} .foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; align-items:start;} .foot-grid img{height:42px; margin-bottom:16px;} .foot-grid p{color:rgba(255,255,255,.6); font-weight:500; max-width:300px;} .foot-col h4{font-family:'Montserrat',sans-serif; font-weight:800; font-style:italic; text-transform:uppercase; letter-spacing:.1em; font-size:.78rem; color:rgba(255,255,255,.4); margin:0 0 16px;} .foot-col a{display:block; padding:6px 0; font-weight:600;} .foot-bottom{margin-top:50px; padding-top:24px; border-top:1px solid rgba(255,255,255,.12); display:flex; justify-content:space-between; gap:16px; color:rgba(255,255,255,.4); font-size:.85rem; flex-wrap:wrap;} @media (max-width:760px){ .foot-grid{grid-template-columns:1fr; gap:30px;} } /* ---------- reveal on scroll ---------- */ .reveal{opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease);} .reveal.in{opacity:1; transform:none;} /* ---------- responsive ---------- */ @media (max-width:900px){ .nav-links{position:fixed; inset:74px 0 auto 0; background:var(--paper); flex-direction:column; align-items:flex-start; gap:0; padding:10px 32px 24px; border-bottom:2px solid var(--ink); transform:translateY(-120%); transition:transform .3s var(--ease); height:auto;} .nav-links.open{transform:none;} .nav-links a{padding:14px 0; width:100%; border-bottom:1px solid rgba(0,0,0,.08);} .nav-burger{display:block;} .section{padding:72px 0;} } /* ---------- accessibilité : focus clavier ---------- */ :focus-visible{outline:3px solid var(--red); outline-offset:3px;} .btn:focus-visible{outline-offset:4px;} .nav-links a:focus-visible{outline-offset:6px;} /* ---------- accessibilité : mouvement réduit ---------- */ @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} .reveal{opacity:1 !important; transform:none !important; transition:none !important;} *{animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important;} }