@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Playfair+Display:ital,wght@1,500&display=swap');

:root{ --accent:#5da8ff; --accent-soft:#8fbcee; --bg:#050608; }

body{background:var(--bg)!important; font-family:'Plus Jakarta Sans',sans-serif!important;}
body::before, #particles{display:none!important;}

/* ---------- Header ---------- */
header{
  position:sticky; top:0; z-index:50;
  display:grid!important; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:18px 6vw!important;
  background:rgba(5,6,8,.92)!important; backdrop-filter:blur(14px)!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
}
header .logo{display:none!important;}
.logo-link{justify-self:start;}
.logo-img{width:48px!important; height:48px!important; border-radius:50%; object-fit:contain;}
nav ul{list-style:none; display:flex; justify-content:center!important; gap:6px!important; flex-wrap:nowrap!important;}
nav a{
  position:relative; display:inline-flex!important; font-size:15px!important; letter-spacing:0!important;
  text-transform:none!important; font-weight:600!important; padding:11px 20px!important;
  border-radius:12px!important; background:transparent!important;
  border:1px solid transparent!important; color:#cfd6e0!important;
}
nav a::before{display:none!important;}
nav a:hover, nav a.active{background:rgba(255,255,255,.06)!important; color:var(--accent-soft)!important; transform:none!important;}
nav a.active::after{content:""; position:absolute; left:30%; right:30%; bottom:5px; height:2px; border-radius:2px; background:var(--accent);}
.header-cta{
  justify-self:end; padding:12px 24px; border:1px solid var(--accent); border-radius:999px;
  color:var(--accent-soft); font-weight:700; font-size:14px; transition:background .2s ease, color .2s ease;
}
.header-cta:hover{background:var(--accent); color:#06101c;}
@media (max-width:900px){
  header{display:flex!important; flex-wrap:wrap; gap:12px; justify-content:space-between;}
  .header-cta{display:none;}
  nav a{padding:9px 12px!important; font-size:13px!important;}
}

/* ---------- Héro accueil ---------- */
.home-hero{
  position:relative; z-index:2; overflow:hidden; min-height:calc(100vh - 85px);
  display:flex; align-items:center; justify-content:center; text-align:center; padding:60px 6vw;
}
.home-bg{position:absolute; inset:0; background:url('hero-convoi.jpg') center/cover no-repeat; filter:brightness(.7) saturate(1.05) contrast(1.05);}
.home-overlay{position:absolute; inset:0; background:linear-gradient(180deg,rgba(5,6,8,.45) 0%,rgba(5,6,8,.3) 50%,var(--bg) 100%);}
.home-content{position:relative; z-index:2; max-width:1100px;}
.home-content h1{
  font-weight:800; color:#fff; font-size:clamp(42px,8vw,104px);
  line-height:1.02; letter-spacing:-2px; text-shadow:0 8px 40px rgba(0,0,0,.5);
}
.home-sub{margin-top:26px; font-family:'Playfair Display',serif; font-style:italic; font-size:clamp(22px,3vw,40px); color:var(--accent-soft);}
.home-content .hero-cta{justify-content:center; margin-top:38px;}
.home-event{position:relative; z-index:2; padding:30px 6vw 80px; display:flex; justify-content:center;}
.home-event .event-card{width:100%; max-width:560px;}

/* ---------- Bandeau des pages ---------- */
.page-hero{position:relative; z-index:2; overflow:hidden; min-height:58vh; display:flex; align-items:center; padding:80px 6vw; border-bottom:1px solid rgba(255,255,255,.08);}
.page-hero-bg{position:absolute; inset:0; background-image:var(--hero-img); background-size:cover; background-position:center right; filter:brightness(.85) saturate(1.05);}
.page-hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(90deg,var(--bg) 0%,var(--bg) 28%,rgba(5,6,8,.7) 52%,rgba(5,6,8,.1) 100%),
             linear-gradient(180deg,transparent 75%,var(--bg) 100%);
}
.page-hero-content{position:relative; z-index:2; max-width:640px;}
.page-badge{
  display:inline-flex; align-items:center; gap:12px; padding:11px 22px; margin-bottom:28px;
  border:1px solid rgba(93,168,255,.5); border-radius:999px;
  font-size:13px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:#f5f7fb;
}
.page-badge::before{content:"i"; width:20px; height:20px; border-radius:50%; background:var(--accent); color:var(--bg); display:grid; place-items:center; font-size:12px; font-weight:800;}
.page-hero h1{font-weight:800; color:#fff; font-size:clamp(46px,7.5vw,96px); line-height:1; letter-spacing:-2px;}
.page-sub{margin-top:20px; font-family:'Playfair Display',serif; font-style:italic; font-size:clamp(20px,2.6vw,32px); color:var(--accent-soft);}
@media (max-width:760px){
  .page-hero{min-height:46vh; padding:60px 5vw;}
  .page-hero-overlay{background:linear-gradient(90deg,var(--bg) 0%,rgba(5,6,8,.8) 60%,rgba(5,6,8,.4) 100%),linear-gradient(180deg,transparent 70%,var(--bg) 100%);}
}

/* ---------- Sections et cartes ---------- */
.section-head{margin-left:auto!important; margin-right:auto!important; text-align:center;}
.section-head h2{font-family:'Plus Jakarta Sans',sans-serif!important; font-weight:800!important; text-transform:none!important; letter-spacing:-1px!important;}
.section-head h2 em{font-style:normal; color:var(--accent-soft);}
.section-head .quote{margin-top:14px; font-family:'Playfair Display',serif; font-style:italic; font-size:22px; color:var(--accent-soft);}
.round-icon{width:80px; height:80px; margin:0 auto 26px; border-radius:50%; background:#12151b; display:grid; place-items:center; font-size:34px;}
.plate, .team-card, .event-row, .album-card, .stat-card{background:#0b0d11!important; border:1px solid rgba(255,255,255,.08)!important; border-radius:18px!important;}
.plate::before, .plate::after{display:none!important;}
footer .footer-shell{background:#0b0d11!important; border-radius:18px!important;}

/* ---------- Cartes "Qui est J.B.C Crome ?" ---------- */
.features{padding-top:70px;}
.features-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:1300px; margin:0 auto;}
.feature-card{padding:40px 32px; background:#0b0d11; border:1px solid rgba(255,255,255,.07); border-radius:26px; transition:border-color .25s ease, transform .25s ease;}
.feature-card:hover{border-color:rgba(93,168,255,.35); transform:translateY(-4px);}
.feature-icon{width:70px; height:70px; display:grid; place-items:center; border-radius:18px; background:#15181f; border:1px solid rgba(255,255,255,.08); color:var(--accent-soft);}
.feature-icon svg{width:30px; height:30px;}
.feature-card h3{margin-top:34px; font-weight:800; font-size:24px; letter-spacing:-.5px; color:#fff;}
.feature-line{display:block; width:40px; height:2px; margin:20px 0; background:var(--accent-soft); opacity:.7;}
.feature-card p{color:var(--chrome-3); font-size:15.5px; line-height:1.7;}
@media (max-width:980px){.features-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.features-grid{grid-template-columns:1fr;} .feature-card{padding:30px 24px;}}

/* ---------- Indicateur "Défile" ---------- */
.scroll-hint{
  position:absolute; left:50%; bottom:28px; transform:translateX(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  color:var(--accent-soft); font-size:13px; font-weight:600; letter-spacing:1px;
  opacity:.85; transition:opacity .2s ease;
}
.scroll-hint:hover{opacity:1;}
.scroll-hint svg{width:22px; height:22px; animation:scrollBounce 1.8s ease-in-out infinite;}
@keyframes scrollBounce{0%,100%{transform:translateY(0);} 50%{transform:translateY(7px);}}
@media (prefers-reduced-motion:reduce){.scroll-hint svg{animation:none;}}