/* PassionSportives.fr — thème carbone / racing ---------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@600;700&family=Inter:wght@400;500;700;800&display=swap');

:root{
  --carbone:#0C0E13; --carbone2:#12151D; --panneau:#181C26; --panneau2:#1F2431;
  --rouge:#E62231; --rouge2:#B8121F; --volt:#F5C518;
  --blanc:#F4F6FA; --gris:#A7AEBD; --gris2:#6B7280; --bord:#2A3040;
  --vert:#22C55E;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--carbone);color:var(--blanc);font-family:'Inter',system-ui,Arial,sans-serif;font-size:16.5px;line-height:1.65}
img{max-width:100%;height:auto;display:block}
a{color:var(--rouge)}
h1,h2,h3{font-family:'Chakra Petch',sans-serif;line-height:1.12;color:var(--blanc);letter-spacing:.2px;text-transform:uppercase}
h1{font-size:clamp(1.7em,4.6vw,2.9em)}
h2{font-size:clamp(1.25em,3vw,1.75em)}
.wrap{max-width:1120px;margin:0 auto;padding:0 18px}

/* bande racing diagonale */
.slash{height:8px;background:repeating-linear-gradient(-45deg,var(--rouge)0 22px,var(--carbone)22px 30px,var(--volt)30px 38px,var(--carbone)38px 46px)}
.freebar{background:var(--rouge);color:#fff;text-align:center;font-size:14.5px;padding:8px 14px;font-weight:500}
.freebar b{color:#fff;text-transform:uppercase;letter-spacing:.5px}

/* nav */
header.site{background:rgba(12,14,19,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--bord);position:sticky;top:0;z-index:50}
.nav{display:flex;align-items:center;gap:18px;padding:13px 18px;max-width:1120px;margin:0 auto;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand .mark{font-family:'Chakra Petch';font-weight:700;background:linear-gradient(135deg,var(--rouge),var(--rouge2));color:#fff;padding:8px 11px;font-size:18px;clip-path:polygon(0 0,100% 0,86% 100%,0 100%)}
.brand .txt b{font-family:'Chakra Petch';color:var(--blanc);font-size:18px;letter-spacing:.4px;text-transform:uppercase}
.brand .txt b span{color:var(--rouge)}
.brand .txt small{display:block;color:var(--gris2);font-size:11.5px;margin-top:1px}
nav.menu{display:flex;gap:2px;margin-left:auto;flex-wrap:wrap;align-items:center}
nav.menu a{text-decoration:none;color:var(--gris);font-weight:600;font-size:14px;padding:8px 12px;border-radius:6px;text-transform:uppercase;letter-spacing:.4px}
nav.menu a:hover,nav.menu a.active{color:#fff;background:var(--panneau2)}
nav.menu a.cta{background:var(--rouge);color:#fff;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);border-radius:0;padding:10px 20px}
nav.menu a.cta:hover{background:var(--rouge2)}

/* hero */
.hero{position:relative;background:radial-gradient(1200px 500px at 75% -10%,#26170f 0%,var(--carbone2) 45%,var(--carbone) 100%);overflow:hidden;border-bottom:1px solid var(--bord)}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;padding:64px 18px}
.hero h1{margin:.2em 0}
.hero h1 span{color:var(--rouge)}
.hero p.lead{font-size:18px;color:var(--gris);max-width:34em}
.badge-sport{display:inline-block;font-family:'Chakra Petch';font-weight:700;font-size:12.5px;letter-spacing:2.5px;background:transparent;color:var(--volt);padding:6px 0;text-transform:uppercase;border-bottom:2px solid var(--rouge)}
.hero .visu{clip-path:polygon(24px 0,100% 0,100% calc(100% - 24px),calc(100% - 24px) 100%,0 100%,0 24px);box-shadow:0 30px 60px rgba(0,0,0,.55)}
.chrono{display:flex;gap:26px;margin-top:26px;flex-wrap:wrap}
.chrono div{border-left:3px solid var(--rouge);padding-left:12px}
.chrono b{font-family:'Chakra Petch';font-size:22px;color:#fff;display:block}
.chrono small{color:var(--gris2);text-transform:uppercase;letter-spacing:1px;font-size:11px}

/* boutons */
.btn{display:inline-block;text-decoration:none;font-weight:700;font-family:'Chakra Petch';text-transform:uppercase;letter-spacing:.6px;padding:14px 28px;clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);transition:filter .12s,transform .12s;font-size:14.5px}
.btn:hover{filter:brightness(1.12);transform:translateY(-1px)}
.btn-rouge{background:var(--rouge);color:#fff}
.btn-volt{background:var(--volt);color:#141002}
.btn-ghost{background:transparent;color:var(--blanc);box-shadow:inset 0 0 0 2px var(--bord)}

/* sections */
section{padding:56px 0}
section.alt{background:var(--carbone2);border-top:1px solid var(--bord);border-bottom:1px solid var(--bord)}
.kicker{font-family:'Chakra Petch';color:var(--rouge);font-size:13px;letter-spacing:3px;text-transform:uppercase;margin:0 0 6px;font-weight:700}
.kicker:before{content:"// ";color:var(--volt)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}

/* cartes */
.card{background:var(--panneau);border:1px solid var(--bord);overflow:hidden;display:flex;flex-direction:column;transition:transform .15s,border-color .15s;clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%)}
.card:hover{transform:translateY(-4px);border-color:var(--rouge)}
.card img{width:100%;aspect-ratio:16/10;object-fit:contain;background:#0A0C10}
.card .pad{padding:18px 20px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.card h3{margin:0;font-size:1.02em}
.card p{margin:0;color:var(--gris);font-size:14.6px;flex:1}
.card .tags{font-size:12.5px;color:var(--volt);font-weight:700;font-family:'Chakra Petch'}
.card a.lire{color:var(--rouge);font-weight:700;text-decoration:none;font-family:'Chakra Petch';text-transform:uppercase;font-size:13.5px;letter-spacing:.5px}
.card a.lire:hover{color:#fff}
.card .rare{display:inline-block;background:var(--volt);color:#141002;font-family:'Chakra Petch';font-weight:700;font-size:11.5px;letter-spacing:1.5px;padding:4px 10px;text-transform:uppercase;align-self:flex-start}

/* manifeste */
.manifeste{background:var(--panneau);border:1px solid var(--bord);border-left:5px solid var(--rouge);padding:34px 36px}
.manifeste p{margin:0 0 14px;color:var(--gris)}
.manifeste b{color:var(--blanc)}
.manifeste a{color:var(--rouge);font-weight:600}

/* galerie */
.mosaic{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.mosaic img{border:1px solid var(--bord);width:100%;height:auto;clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%)}

/* article/fiche */
article.fiche{max-width:860px;margin:0 auto;background:var(--panneau);border:1px solid var(--bord);border-top:4px solid var(--rouge);padding:40px 42px}
article.fiche img.header{margin:10px 0 22px;clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%)}
article.fiche h2{margin-top:1.6em;border-bottom:2px solid var(--bord);padding-bottom:8px}
article.fiche h2:before{content:"// ";color:var(--rouge)}
article.fiche h3{font-family:'Inter';font-weight:800;color:var(--volt);font-size:1.06em;text-transform:none}
article.fiche p{color:#CBD2DE}
table.cote{width:100%;border-collapse:collapse;margin:14px 0;font-size:15px}
table.cote th{background:var(--rouge);color:#fff;padding:10px 12px;text-align:left;font-family:'Chakra Petch';text-transform:uppercase;font-size:13px;letter-spacing:.6px}
table.cote td{border:1px solid var(--bord);padding:9px 12px;background:var(--carbone2);color:#D8DEE9}
.encart{border-left:5px solid var(--volt);background:var(--panneau2);padding:16px 20px;margin:18px 0;font-size:15.3px;color:#D8DEE9}
.encart a{color:var(--volt)}
.encart.rouge{border-color:var(--rouge)}
ul.check{padding-left:20px}
ul.check li{margin:8px 0;color:#CBD2DE}
ul.check li b{color:var(--blanc)}
ol li{margin:8px 0;color:#CBD2DE}
ol li b{color:var(--blanc)}
.tagline-tags{margin-top:26px;font-size:13.5px;color:var(--gris2)}
.tagline-tags b{color:var(--volt)}
.fiche-data{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0}
.fiche-data div{background:var(--carbone2);border:1px solid var(--bord);padding:12px 14px;text-align:center}
.fiche-data b{font-family:'Chakra Petch';font-size:19px;color:var(--rouge);display:block}
.fiche-data small{color:var(--gris2);text-transform:uppercase;letter-spacing:1px;font-size:10.5px}

/* insta / mascottes */
.insta{background:linear-gradient(120deg,#1a0a0d,#231007 60%,#14161f);border:1px solid var(--bord);border-top:3px solid var(--volt);padding:38px 34px;text-align:center}
.insta h2{color:#fff}
.insta .paws{font-size:30px;letter-spacing:8px}
.insta p{color:var(--gris)}

/* newsletter */
.news{background:var(--panneau2);border:1px solid var(--bord);border-top:3px solid var(--rouge);padding:34px 28px;text-align:center;max-width:720px;margin:0 auto}
.news input[type=email]{padding:13px 16px;border:1px solid var(--bord);background:var(--carbone);color:#fff;min-width:250px;font-size:15px;font-family:inherit}
.news button{padding:13px 26px;border:0;background:var(--rouge);color:#fff;font-family:'Chakra Petch';font-weight:700;font-size:14.5px;cursor:pointer;text-transform:uppercase;letter-spacing:.6px;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)}
.news button:hover{background:var(--rouge2)}

/* CTA ronpoin */
.cta-ronpoin{background:linear-gradient(120deg,var(--rouge2),var(--rouge));color:#fff;text-align:center}
.cta-ronpoin h2{color:#fff}
.cta-ronpoin p{max-width:40em;margin:10px auto 22px;color:#FFE3E5}
.cta-ronpoin .btn-ghost{color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}

/* agenda / clubs listes */
.evt{background:var(--panneau);border:1px solid var(--bord);border-left:4px solid var(--rouge);padding:20px 24px;margin:14px 0}
.evt h3{margin:0 0 6px;text-transform:none;font-family:'Inter';font-weight:800;color:#fff}
.evt p{margin:0;color:var(--gris);font-size:15px}
.evt .date{font-family:'Chakra Petch';color:var(--volt);font-weight:700;font-size:13px;letter-spacing:1px;text-transform:uppercase}

/* footer */
footer.site{background:#07080C;color:#9AA2B1;padding:46px 0 26px;font-size:14.5px;border-top:1px solid var(--bord)}
footer.site h4{color:var(--rouge);font-family:'Chakra Petch';margin:0 0 10px;font-size:13.5px;text-transform:uppercase;letter-spacing:1.5px}
footer.site a{color:#9AA2B1;text-decoration:none;display:block;margin:5px 0}
footer.site a:hover{color:#fff}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:28px;margin-bottom:26px}
.foot-soc a{display:inline-block;margin-right:10px;border:1px solid var(--bord);padding:5px 11px}
.foot-bottom{border-top:1px solid #1C202B;padding-top:18px;font-size:12.8px;color:#6B7280}
.foot-bottom a{display:inline}

@media(max-width:880px){
  .hero .wrap{grid-template-columns:1fr}
  .grid3,.grid2,.mosaic{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
  article.fiche{padding:26px 20px}
  .fiche-data{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .grid3,.mosaic{grid-template-columns:1fr}
  nav.menu{margin-left:0}
}