/* =========================
RollBall France — styles
Theme: #22273B (bleu foncé France)
Font: Manrope (Google Fonts)
========================= */
:root{
--brand:#22273B;
--brand-600:#2b3150;
--brand-700:#1a1f33;
--bg:#0e1224;
--text:#eef2ff;
--muted:#9aa3c7;
--card:#1a2037cc;
--glass:rgba(255,255,255,0.06);
--border:rgba(255,255,255,0.12);
--accent:#69a7ff; /* léger contraste pour les détails */
--shadow:0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0;
font-family:"Manrope",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
color:var(--text);
background:
radial-gradient(1200px 800px at 110% -10%, #3b4670 0%, transparent 60%),
radial-gradient(800px 500px at -10% 110%, #1d2542 0%, transparent 60%),
linear-gradient(180deg, var(--brand-700), var(--bg));
background-attachment: fixed;
}

.container{width:min(1100px, 92%); margin-inline:auto}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

/* Assure que le header reste au-dessus de tout */
.site-header{
  position: sticky;
  top: 0;
  z-index: 9999;      /* plus haut que tout le reste */
  isolation: isolate; /* crée un stacking context propre au header */
}

/* Empêche des éléments de passer au-dessus du header */
.hero, .section, .footer, .carousel, .ratio{
  position: relative;
  z-index: 0;
}

/* La forme d’arrière-plan du hero reste bien derrière */
.bg-shape{ z-index: 0; }

/* Évite que les iframes “perforent” visuellement le header sur certains navigateurs */
.ratio iframe{
  position: relative;
  z-index: 0;
}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.05rem; letter-spacing:.2px}
.brand-logo{width:36px; height:36px; object-fit:contain; border-radius:8px; background:var(--glass)}
.brand-text{color:#fff}
.nav{display:flex; gap:18px; align-items:center}
.nav a{color:#dbe3ff; font-weight:600; opacity:.9}
.nav a:hover{opacity:1}
.lang-switch{display:flex; align-items:center; gap:8px; color:var(--muted)}
.lang-switch .sep{opacity:.5}
.btn{
appearance:none; border:none; padding:10px 16px; border-radius:999px; font-weight:700; cursor:pointer;
transition:transform .06s ease, background .2s ease, color .2s ease, border-color .2s ease; will-change:transform;
}
.btn:active{transform:translateY(1px)}
.btn-ghost{background:transparent; color:#dbe3ff; border:1px solid var(--border)}
.btn-ghost[aria-pressed="true"]{background:var(--glass); color:#fff}
.btn-primary{background:var(--accent); color:#0a1025; box-shadow:var(--shadow)}
.btn-primary:hover{filter:brightness(1.05)}
.btn-outline{border:1px solid var(--accent); color:var(--text); background:transparent}
.btn-outline:hover{background:rgba(105,167,255,.1)}

/* Hero */
.hero{position:relative; padding:96px 0 48px}
.hero-inner{text-align:center}
.hero-title{font-size:clamp(32px, 5vw, 64px); line-height:1.05; margin:0 0 10px; font-weight:800}
.accent{background:linear-gradient(90deg,#9ac0ff, #e0ebff); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero-sub{margin:0 auto 24px; color:#c7d2ff; font-size:clamp(16px,2.2vw,22px); max-width:780px}
.hero-ctas{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.hero-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:28px}
.stat{background:var(--card); border:1px solid var(--border); padding:16px; border-radius:16px; box-shadow:var(--shadow)}
.stat-kpi{font-weight:800; font-size:18px}
.stat-label{color:var(--muted); font-weight:600}
.bg-shape{
position:absolute; inset:0; pointer-events:none;
background:
radial-gradient(400px 180px at 70% 20%, rgba(105,167,255,.25), transparent 60%),
radial-gradient(500px 220px at 20% 80%, rgba(255,255,255,.08), transparent 60%);
}

/* Sections */
.section{padding:64px 0}
.center{text-align:center}
.card{
background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
border:1px solid var(--border); padding:24px; border-radius:20px; box-shadow:var(--shadow)
}
.card h2, .card h3{margin-top:0}
.card-ghost{background:transparent}

.grid-2{display:grid; gap:20px; grid-template-columns:1.1fr .9fr}
@media (max-width:900px){.grid-2{grid-template-columns:1fr}}

.pill-row{display:flex; gap:10px; flex-wrap:wrap; margin:14px 0 10px}
.pill{padding:8px 12px; border-radius:999px; border:1px solid var(--border); background:var(--glass); color:#eaf0ff; font-weight:600}

.links{display:flex; gap:12px; margin-top:10px}
.link{display:inline-flex; align-items:center; gap:8px}

/* Checklist */
.checklist{margin:12px 0 6px; padding-left:0; list-style:none}
.checklist li{padding-left:26px; position:relative; margin:10px 0}
.checklist li::before{
content:"✓"; position:absolute; left:0; top:0; color:#cfe1ff; font-weight:800; background:var(--glass);
width:20px; height:20px; display:grid; place-items:center; border-radius:50%;
}

/* Timeline */
.timeline{position:relative; margin:24px auto; max-width:860px}
.tl-item{display:flex; gap:14px; margin:18px 0}
.tl-dot{
flex:0 0 12px; height:12px; border-radius:50%; background:#cfe1ff; margin-top:12px; box-shadow:0 0 0 6px rgba(105,167,255,.15)
}
.tl-card{flex:1; background:var(--card); border:1px solid var(--border); border-radius:16px; padding:16px}
.tl-card h4{margin:0 0 6px}
.cards-2{display:grid; gap:16px; grid-template-columns:repeat(2,1fr); margin-top:14px}
@media (max-width:800px){.cards-2{grid-template-columns:1fr}}

/* Videos */
.video-grid{display:grid; gap:16px; grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){.video-grid{grid-template-columns:1fr}}
.ratio{position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; border-radius:16px; border:1px solid var(--border); box-shadow:var(--shadow)}
.ratio iframe{position:absolute; inset:0; width:100%; height:100%}
.caption{text-align:center; color:#dbe3ff; margin:8px 0 0; font-weight:600}

/* Carousel */
.carousel{position:relative; overflow:hidden; border-radius:20px; border:1px solid var(--border); background:var(--card); box-shadow:var(--shadow)}
.c-track{display:flex; transition:transform .4s ease}
.c-slide{min-width:100%; }
.c-slide img{width:100%; height:62vh; object-fit:cover; display:block}
@media (max-width:900px){.c-slide img{height:48vh}}
.c-arrow{
position:absolute; top:50%; transform:translateY(-50%); z-index:5;
width:42px; height:42px; border-radius:50%; border:1px solid var(--border);
background:rgba(0,0,0,.35); color:#fff; display:grid; place-items:center; cursor:pointer
}
.c-prev{left:10px}
.c-next{right:10px}
.c-arrow:hover{background:rgba(0,0,0,.5)}
.c-dots{position:absolute; left:0; right:0; bottom:10px; display:flex; gap:8px; justify-content:center; z-index:6}
.c-dot{
width:10px; height:10px; border-radius:999px; background:#94a3c7; border:none; cursor:pointer; opacity:.8
}
.c-dot.active{background:#fff; opacity:1}

/* Footer */
.footer{padding:28px 0; border-top:1px solid var(--border); background:rgba(10,14,30,.6); margin-top:48px}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.muted{color:var(--muted)}