/* ------------------------------
   RESET + THEME
-------------------------------*/
*,*::before,*::after{box-sizing:border-box}
html:focus-within{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:#0b0f14;color:#eef3f7}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:root{
  --c-bg:#0b0f14;
  --c-card:#111823;
  --c-card-alt:#0f1420;
  --c-accent:#00e7d6;
  --c-accent-2:#6ec2ff;
  --c-text:#eef3f7;
  --c-text-dim:#b7c3cf;
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

/* ------------------------------
   BACKGROUND STATIQUE (ballon SVG)
-------------------------------*/
.bg-stage{
  position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden;
  background: radial-gradient(1200px 600px at 10% 0%, rgba(0,231,214,.12) 0%, transparent 60%),
              radial-gradient(900px 500px at 100% 100%, rgba(110,194,255,.10) 0%, transparent 60%),
              linear-gradient(180deg, #0b0f14 0%, #0b0f14 30%, #0d131b 100%);
}
.bg-ball{
  position:absolute; width:min(54vmin,560px); aspect-ratio:1/1;
  top:8vh; left:-18vw; opacity:.07;
  filter:drop-shadow(0 0 24px rgba(0,231,214,.15));
}
.bg-ball svg{width:100%;height:100%}
.bg-ball path{
  fill:none; stroke:var(--c-accent); stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round;
}

/* ------------------------------
   APP BAR / HEADER
-------------------------------*/
.appbar{
  position:sticky; top:-70px;
  z-index:50; transition:top .45s ease, background .3s ease, box-shadow .3s ease;
  background:rgba(11,15,20,.35); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.appbar.scrolled{ top:0; background:rgba(10,14,19,.7); box-shadow:var(--shadow) }
.appbar-inner{
  max-width:1200px; margin:auto; padding:10px 20px; display:flex; align-items:center; gap:16px;
}
.brand{display:flex; align-items:center; gap:10px}
.brand img{height:44px}
.brand a{font-weight:700; letter-spacing:.3px}
.spacer{flex:1}

/* Bloc langue + actions */
.langbox{position:relative; display:flex; align-items:center; gap:8px}
.lang-trigger{
  display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:10px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); cursor:pointer
}
.lang-trigger img{height:18px;border-radius:3px}
.lang-list{
  position:absolute; top:120%; left:0; min-width:180px; background:var(--c-card);
  border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:8px; display:none;
  box-shadow:var(--shadow)
}
.langbox[aria-expanded="true"] .lang-list{display:block}
.lang-list li{list-style:none}
.lang-list button{
  width:100%; display:flex; align-items:center; gap:10px; padding:8px 10px; border:0;
  background:transparent; color:var(--c-text); cursor:pointer; border-radius:10px
}
.lang-list button:hover{background:rgba(255,255,255,.06)}
.lang-list img{height:18px;border-radius:3px}

.actions a{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08); margin-left:8px; transition:transform .2s ease
}
.actions a:hover{transform:translateY(-2px); background:rgba(255,255,255,.09)}

/* ------------------------------
   NAV SECONDAIRE (onglets ligues)
-------------------------------*/
.tabbar{
  position:relative; z-index:40; background:rgba(255,255,255,0.02); border-bottom:1px solid rgba(255,255,255,.06);
}
.tabs{
  max-width:1200px; margin:auto; padding:8px 16px; display:flex; gap:18px; overflow:auto; scrollbar-width:none
}
.tabs::-webkit-scrollbar{display:none}
.tab{
  color:var(--c-text-dim); padding:10px 14px; border-radius:24px; white-space:nowrap; border:1px solid transparent;
  transition:color .2s, background .2s, border-color .2s
}
.tab:hover{color:var(--c-text); background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.08)}
.tab[aria-current="page"]{color:#051416; background:linear-gradient(135deg,var(--c-accent),var(--c-accent-2)); border-color:transparent}

/* ------------------------------
   HERO
-------------------------------*/
.hero{
  min-height: 85vh; 
  position:relative; 
  padding:64px 20px 64px; 
  border-bottom:1px solid rgba(255,255,255,.06); 
  margin-bottom: 0%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-inner{
  max-width:1200px; 
  margin:auto; 
  text-align:center;
}
.hero h1{
  font-size:clamp(32px,5vw,56px); 
  line-height:1.1; 
  margin:0 0 16px; 
  margin-top: 3%;
}
.hero p{
  color:var(--c-text-dim); 
  font-size:1.2rem; 
  margin: 4% auto 12% auto;
  max-width: 800px;
}
.hero .cta-buttons{
  display:flex; 
  justify-content:center; 
  flex-wrap:wrap; 
  gap:14px;
}
.hero .btn{
  display:inline-flex; 
  align-items:center; 
  justify-content:center;
  padding:12px 20px; 
  border-radius:12px; 
  font-weight:700; 
  cursor:pointer; 
  border:0;
  background:linear-gradient(135deg,var(--c-accent),var(--c-accent-2)); 
  color:#051416;
  transition:transform .2s ease;
  text-decoration: none;
}
.hero .btn:hover{
  transform:translateY(-2px);
  filter:brightness(1.05);
}
.hero .btn.secondary{
  background:rgba(255,255,255,.05); 
  border:1px solid rgba(255,255,255,.08); 
  color:var(--c-text);
  padding: 16px 32px;
  font-size: 1.1rem; 
}

/* ------------------------------
   MAIN CONTENT
-------------------------------*/
main{position:relative; z-index:1}
.container{max-width:1200px; margin:auto; padding:28px 20px 56px; display:grid; gap:28px}
.section-card{
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow);
  transform:translateY(16px); opacity:0; transition:opacity .6s ease, transform .6s ease
}
.section-card.visible{opacity:1; transform:translateY(0)}
.section-card h2{margin:0 0 10px; font-size:1.6rem}
.muted{color:var(--c-text-dim)}

/* Layout deux colonnes révisé */
.two-columns {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 40px;
  align-items: center;
}

.country-content {
  padding-right: 20px;
}

.country-content h2 {
  font-size: 2rem;
  margin-bottom: 16px;
  background: linear-gradient(135deg, var(--c-accent), var(--c-accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.country-content p {
  line-height: 1.6;
  margin-bottom: 16px;
  font-size: 1.1rem;
}

.country-content .highlight {
  color: var(--c-accent);
  font-weight: 600;
}

.country-image {
  display: flex;
  justify-content: center;
  align-items: center;
}

.country-flag {
  width: 100%;
  max-width: 400px;
}


.values{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-top:12px}
.value{
  background:var(--c-card); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:16px;
  transition:transform .25s ease, box-shadow .25s ease
}
.value:hover{transform:translateY(-4px); box-shadow:0 12px 30px rgba(0,0,0,.35)}

.team{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin-top:12px}
.member{
  background:var(--c-card); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:16px; text-align:center;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; cursor:pointer;
}
.member:hover{ transform:translateY(-2px); border-color:rgba(255,255,255,.14); box-shadow:0 14px 26px rgba(0,0,0,.35); }
.avatar{
  width:64px;height:64px;border-radius:50%;margin:0 auto 10px;display:grid;place-items:center;
  color:#051416; font-weight:800; background:linear-gradient(135deg,var(--c-accent),var(--c-accent-2))
}
.team-avatar {
  background-size: cover;
  background-position: center;
}
.role{color:var(--c-text-dim); font-size:.95rem; margin:.25rem 0 .35rem}
.avatar, .team-avatar :hover{
  transform: none;
}

/* Boutons */
.btn-small {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 12px;
  font-weight: 600;
  color: #051416;
  background: linear-gradient(135deg,var(--c-accent),var(--c-accent-2));
  border: 0;
  cursor: pointer;
  margin-top: 12px;
  text-decoration: none;
  font-size: 0.9rem;
}
.btn-small:hover{filter:brightness(1.03)}

/* ------------------------------
   FOOTER
-------------------------------*/
footer{
  border-top:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);
  padding:18px 20px; text-align:center; color:var(--c-text-dim)
}
.social-media{
  display:flex; gap:16px; justify-content:center; margin: 1.5% 0 1% 0;
}
.social-media a{
  display:inline-block; width:24px; height:24px; color:var(--c-text-dim); transition:color .2s ease
}
.social-media a:hover{ color:var(--c-accent) }
.social-media svg{ width:100%; height:100%; fill:currentColor }

/* ------------------------------
   RESPONSIVE
-------------------------------*/
@media (max-width:960px){
  .hero-inner{grid-template-columns:1fr}
  .appbar-inner{gap:10px}
  .two-columns {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 30px;
  }
  .country-content {
    padding-right: 0;
    order: 2;
  }
  .country-image {
    order: 1;
  }
}
@media (max-width:600px){
  .lang-trigger span{display:flex;color:white;}
  .brand a{display:none}
  .hero .cta-buttons {
    flex-direction: column;
    align-items: center;
  }
  .hero .btn {
    width: 100%;
    max-width: 280px;
  }
}

.white-image {
  filter: brightness(0) invert(1);
}

.has-light {
  position: relative;
  overflow: hidden;
}
.has-light::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.15), transparent 80%);
  opacity: var(--light-opacity, 0);
  pointer-events: none;
  transition: opacity 0.15s ease;
}

#h2-equipes {
  margin-bottom: 2.5%;
}