/* Reset & base */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: 'Orbitron', sans-serif; line-height:1.6; scroll-behavior:smooth; color:#fff; background:#0c0c0c; }

/* Couleurs */
:root {
  --primary: #ff0055;
  --secondary: #ff3399;
  --french-blue: #0055A4;
  --french-white: #FFFFFF;
  --french-red: #EF4135;
}

/* Header */
header {
  background: rgba(15,15,15,0.95);
  padding:20px 40px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  position:sticky;
  top:0;
  z-index:1000;
  box-shadow:0 2px 10px rgba(0,0,0,0.5);
}
header h1 { color: var(--french-red); font-size:1.8em; cursor:pointer; }
nav a { color:#fff; margin-left:20px; font-weight:bold; transition:0.3s; }
nav a:hover { color: var(--french-blue); }

/* Hero Section avec accent français */
.hero {
  background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), 
    url('https://images.unsplash.com/photo-1603037466238-5584d2798d36?fit=crop&w=1400&q=80') no-repeat center center/cover;
  height:90vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  animation: fadeIn 1.5s;
  position:relative;
}
.hero::before {
  content:"";
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  background: linear-gradient(90deg, var(--french-blue) 33%, var(--french-white) 33%, var(--french-white) 66%, var(--french-red) 66%);
  opacity:0.30;
  pointer-events:none;
}
.hero h2 { font-size:3.2em; color:var(--french-red); margin-bottom:20px; text-shadow: 2px 2px 8px #000; z-index:1; }
.hero p { font-size:1.3em; max-width:700px; color:#fff; margin-bottom:30px; z-index:1; }
.hero button { padding:12px 25px; font-size:1em; background: var(--french-red); border:none; border-radius:5px; color:#fff; cursor:pointer; transition:0.3s; z-index:1; }
.hero button:hover { background: var(--french-blue); transform: scale(1.05); }

/* Sections normales (noir) */
section { padding:80px 40px; }
section h2 { font-size:2.4em; color:var(--primary); margin-bottom:40px; text-align:center; position:relative; }
section h2::after { content:""; display:block; width:80px; height:3px; background:var(--primary); margin:10px auto 0; border-radius:2px; }

/* Team */
.team-container { display:flex; flex-wrap:wrap; justify-content:center; gap:30px; }
.member { background:#1a1a1a; padding:20px; border-radius:10px; width:250px; text-align:center; transition:0.3s; opacity:0; transform: translateY(30px); animation: fadeUp 1s forwards; }
.member img { width:150px; height:150px; border-radius:50%; object-fit:cover; margin-bottom:15px; border: 3px solid var(--primary); }
.member h3 { color:var(--primary); margin-bottom:5px; }
.member p { font-size:0.9em; color:#ccc; margin-bottom:10px; }
.stats { display:flex; justify-content:space-around; margin-top:10px; }
.stat { font-size:0.85em; color:#fff; }
.member:hover { transform: scale(1.05); box-shadow: 0 0 15px var(--primary); }
.news-card:hover,
.tournament-card:hover,
.Objectifs .tournament-card:hover {
  transform: scale(1.05);
  box-shadow: 0 0 15px var(--primary);
}

/* News */
.news-container { display:grid; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); gap:20px; }
.news-card { background:#1a1a1a; padding:20px; border-radius:10px; transition:0.3s; opacity:0; transform: translateY(30px); animation: fadeUp 1s forwards; }
.news-card img { width:100%; height:150px; object-fit:cover; border-radius:5px; margin-bottom:10px; }
.news-card h4 { color:var(--primary); margin-bottom:10px; }
.news-card p { font-size:0.9em; color:#ccc; }
.news-card span { font-size:0.8em; color:#777; }

/* Tournaments */
.tournaments { display:flex; flex-wrap:wrap; justify-content:center; gap:20px; }
.tournament-card { background:#1a1a1a; padding:20px; border-radius:10px; width:250px; transition:0.3s; opacity:0; transform: translateY(30px); animation: fadeUp 1s forwards; }
.tournament-card h4 { color:var(--primary); margin-bottom:10px; }
.tournament-card p { font-size:0.9em; color:#ccc; }

/* Sponsors */
.Objectifs { display:flex; flex-wrap:wrap; justify-content:center; gap:30px; align-items:center; }
.Objectifs img { width:120px; filter: grayscale(100%); transition:0.3s; }
.Objectifs img:hover { filter: grayscale(0%); transform: scale(1.1); }

/* Contact */
.contact-form { max-width:500px; margin:0 auto; display:flex; flex-direction:column; }
.contact-form input, .contact-form textarea { margin-bottom:15px; padding:10px; border-radius:5px; border:none; }
.contact-form button { padding:12px; border:none; border-radius:5px; background: var(--primary); color:#fff; font-weight:bold; cursor:pointer; transition:0.3s; }
.contact-form button:hover { background: var(--secondary); }

/* Footer */
footer { background:#111; text-align:center; padding:30px 20px; color:#777; }
footer a { color:var(--primary); margin:0 10px; transition:0.3s; }
footer a:hover { color:var(--secondary); }

/* Animations */
@keyframes fadeUp { to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn { from {opacity:0;} to {opacity:1;} }

@media(max-width:768px){
  header { flex-direction:column; }
  nav { margin-top:10px; }
  .hero h2 { font-size:2.4em; }
  .hero p { font-size:1.1em; }
}