/* =========================
   Variables
========================= */
:root{
  --noir:#000;
  --rouge:#e30613;
  --blanc:#fff;
  --gris:#111;
  --header-h:60px; /* ajuste à 64/72 selon la hauteur réelle */
}

/* =========================
   Reset & Base
========================= */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }

/* Corps avec image floue + voile sombre */
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--blanc);
  min-height:100vh;
  position:relative;
  z-index:0;
  padding-top:var(--header-h); /* compense le header FIXE */
}
body::before{
  content:"";
  position:fixed; inset:0;
  background:url("../img/supporters.jpg") center/cover no-repeat;
  filter:blur(5px);
  z-index:-2;
}
body::after{
  content:"";
  position:fixed; inset:0;
  background:rgba(0,0,0,0.75); /* voile sombre (lisibilité) */
  z-index:-1;
}

/* =========================
   Header (FIXE + glass)
========================= */
.site-header{
  position:fixed; top:0; left:0; right:0;
  z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 20px;
  color:var(--blanc);
  background:rgba(0,0,0,0.4);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  box-shadow:0 2px 10px rgba(0,0,0,.35);
  /* pas d’overflow:hidden → ne coupe pas le menu mobile */
}

/* Logo */
.logo{ display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--blanc); }
.logo-img{ height:48px; width:auto; display:block; }
.logo-text{ font-weight:700; text-transform:uppercase; letter-spacing:.5px; line-height:1; }
@media (max-width:600px){ .logo-img{ height:36px; } }

/* =========================
   Navigation
========================= */
/* Bouton burger */
.nav-toggle{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; border:0; clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap; /* accessible, mais invisible */
}
.hamburger{
  display:inline-flex; flex-direction:column; justify-content:center;
  gap:5px; width:42px; height:42px; padding:8px; border-radius:8px; cursor:pointer;
  z-index:2100; /* au-dessus du panneau */
}
.hamburger span{
  display:block; width:22px; height:2px; background:var(--blanc);
  transition:transform .25s ease, opacity .25s ease, width .25s ease;
}

/* Panneau mobile (fermé par défaut) */
.nav{
  position:fixed; top:0; left:0; right:0; bottom:0;
  z-index:2000; /* > header */
  background:rgba(0,0,0,.98);
  transform:translateY(-110vh); /* caché par défaut */
  transition:transform .28s ease;
  padding:calc(var(--header-h) + 12px) 20px 24px; /* contenu sous la barre */
  border-bottom:1px solid #222;
}
.nav ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:16px;
}
.nav a{
  color:var(--blanc); text-decoration:none; font-weight:500; padding:6px 0;
  transition:color .3s ease;
}
.nav a:hover, .nav a:focus-visible{ color:var(--rouge); }
.nav a.active{ color:var(--rouge); }

/* Ouverture via la checkbox */
#nav-toggle:checked ~ .nav{ transform:translateY(0); }
/* Animation burger */
#nav-toggle:checked + .hamburger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
#nav-toggle:checked + .hamburger span:nth-child(2){ opacity:0; }
#nav-toggle:checked + .hamburger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Desktop : menu inline */
@media (min-width:960px){
  .site-header{ padding:14px 40px; }
  .hamburger{ display:none; }
  .nav{
    position:static; transform:none; background:transparent;
    padding:0; border:0; z-index:auto;
  }
  .nav ul{ flex-direction:row; gap:32px; }
}

/* =========================
   Hero
========================= */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;700&display=swap');

/* === HERO === */
.hero {
  background:
    linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    url("../img/hero-us-millas.jpg") center/cover no-repeat;
  color: var(--blanc);
  

  /* Centrage absolu du contenu */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  min-height: 100vh;      /* plein écran */
  text-align: center;
  overflow: hidden;
}

.hero-content {
  width: min(1100px, 92%);
  margin: 0 auto;
}

/* === Titre principal === */
.hero h1 {
  margin: 0 0 0.6em 0;
  font-family: "Times New Roman", Times, serif;
  font-size: 2.8rem;
  text-transform: uppercase;
  color: var(--rouge);
}

/* === Bouton === */
.hero-cta {
  display: inline-block;
  padding: 12px 24px;
  background: var(--rouge);
  color: var(--blanc);
  text-decoration: none;
  font-weight: 700;
  border-radius: 8px;
  transition: background 0.25s ease;
  margin-top: 3rem;
}
.hero-cta:hover { background: #b3050f; }

/* === Texte animé (swap) === */
.hero-content .swap {
  --t-first-total: 7s;
  --fs: clamp(2.6rem, 6vw, 5rem);

  display: grid;
  place-items: center;
  margin: 0.35em 0;

  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 700;
  font-size: var(--fs);
  line-height: 1.1;
  color: #fff;
  text-shadow: 0 3px 10px rgba(0, 0, 0, 0.6);
}

/* Les deux textes se superposent parfaitement */
.hero-content .swap span {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(12px);
  white-space: normal;
  word-break: break-word;
}

/* Animation : première phrase visible puis disparaît */
.hero-content .swap .first {
  animation: showThenHide var(--t-first-total) ease forwards;
}
.hero-content .swap .second {
  animation: fadeInUp 0.9s ease forwards var(--t-first-total);
}

/* Décalage pour la deuxième ligne */
.hero-content .swap.delay-1 {
  --t-first-total: 7.8s;
}

/* Animations */
@keyframes showThenHide {
  0% { opacity: 0; transform: translateY(12px); }
  15% { opacity: 1; transform: translateY(0); }
  85% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(12px); }
}

@keyframes fadeInUp {
  to { opacity: 1; transform: translateY(0); }
}

/* Accessibilité */
@media (prefers-reduced-motion: reduce) {
  .hero-content .swap .first,
  .hero-content .swap .second {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
  .hero-content .swap .first { display: none; }
}
.hero h1,
.hero-content .swap,
.hero-content .swap span {
  font-family: "Times New Roman", Times, serif !important;
}

/* =========================
   Sections & divers
========================= */
.container{ max-width:1200px; margin:0 auto; padding:40px 20px; }
section h2{ font-size:2rem; margin-bottom:20px; text-transform:uppercase; color:var(--rouge); }
h2 a{ color:var(--rouge); text-decoration:none; transition:color .3s ease; }
h2 a:hover, h2 a:focus-visible{ color:var(--noir); }

/* Équipes */
.equipes .grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(250px,1fr)); gap:20px;
}
.equipes article{
  background:#f9f9f900; color:#f8f4f4; padding:20px; border-radius:8px; text-align:center;
}

/* Calendrier */
.calendrier ul{ list-style:none; padding:0; margin:0 0 20px; }
.calendrier li{ margin-bottom:10px; }
.calendrier .btn{
  display:inline-block; padding:10px 20px; background:var(--rouge); color:var(--blanc);
  text-decoration:none; border-radius:6px; font-weight:bold;
}
.calendrier .btn:hover{ background:#b3050f; }

/* FFR embed */
.ffr-embed{ margin-top:24px; }
.ffr-iframe-wrap{
  position:relative; width:100%; min-height:500px; border:1px solid #eee; border-radius:10px;
  overflow:hidden; background:#fff;
}
.ffr-iframe-wrap iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.ffr-fallback{ margin-top:10px; font-size:.95rem; }

/* Actus */
.actus article{ margin-bottom:20px; padding-bottom:15px; border-bottom:1px solid #ddd; }
.actus h3{ margin-bottom:8px; }
.actus a{ color:var(--rouge); text-decoration:none; font-weight:bold; }
.actus a:hover{ text-decoration:underline; }

/* Joueurs (images génériques) */
.joueurs-img{
  width:100%; height:auto; border-radius:8px; margin-top:20px; box-shadow:0 4px 10px rgba(0,0,0,.3);
}

/* Partenaires */
.partenaires-logos{
  display:flex; justify-content:center; align-items:center; gap:30px; flex-wrap:wrap; margin-top:20px;
}
.partenaires-logos img{
  max-height:250px; width:auto; object-fit:contain; filter:grayscale(100%); transition:filter .3s ease;
}
.partenaires-logos img:hover{ filter:grayscale(0%); }

/* Footer */
.site-footer{
  background:var(--noir); color:var(--blanc); padding:40px 20px 20px; margin-top:60px; font-size:.95rem;
}
.footer-content{
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:40px; max-width:1200px; margin:0 auto;
}
.footer-logo-img{ height:60px; margin-bottom:12px; }
.footer-links ul{ list-style:none; padding:0; margin:0; }
.footer-links li{ margin-bottom:8px; }
.footer-links a{ color:var(--blanc); text-decoration:none; transition:color .3s ease; }
.footer-links a:hover{ color:var(--rouge); }
.footer-contact a{ color:var(--rouge); text-decoration:none; }
.footer-contact a:hover{ text-decoration:underline; }
.socials{ margin-top:10px; }
.socials a{ margin-right:10px; font-size:1.2rem; color:var(--blanc); transition:color .3s ease; }
.socials a:hover{ color:var(--rouge); }
.footer-bottom{
  text-align:center; border-top:1px solid #222; margin-top:30px; padding-top:15px; font-size:.85rem; color:#bbb;
}

/* Responsive footer */
@media (max-width:768px){
  .footer-content{ grid-template-columns:1fr; text-align:center; }
  .footer-logo,.footer-links,.footer-contact{ margin-bottom:20px; }
}