:root{
  --green:#0E4B3A;
  --gold:#E8A916;
  --orange:#E8590C;
  --ecume:#F7F4EE;
  --ink:#171B19;
  --red:#9E1B32;
  --green-clair:#2E9E74;
  --filet:#E4E0D6;
  --display: 'Big Shoulders Display', sans-serif;
  --body: 'Inter', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{background:var(--ecume); color:var(--ink); font-family:var(--body); line-height:1.5;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px;}

header{position:sticky; top:0; z-index:50; background:var(--green); color:var(--ecume);}
.navbar{display:flex; align-items:center; justify-content:space-between; padding:14px 24px; max-width:1180px; margin:0 auto;}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--display); font-weight:900; font-size:22px;}
.brand .dot{width:10px; height:10px; border-radius:50%; background:var(--orange);}
nav ul{display:flex; gap:26px; list-style:none; font-size:14px; font-weight:600; text-transform:uppercase;}
nav a:hover{color:var(--gold);}
nav a.nav-actif{color:var(--gold); border-bottom:1px solid var(--gold); padding-bottom:4px;}
.cta-btn{background:var(--orange); color:var(--ecume); padding:9px 18px; border-radius:1px; letter-spacing:.02em; font-weight:700; font-size:13px; text-transform:uppercase;}

.trajectoire{height:2px; background-image:linear-gradient(90deg, var(--green-clair) 0 33.34%, var(--gold) 33.34% 66.67%, var(--red) 66.67% 100%);}
.trajectoire.sombre{height:1px;}

.hero{background:var(--ecume); color:var(--ink); padding:56px 0;}
.slogan{font-family:var(--display); font-size:clamp(22px,3vw,32px); text-transform:uppercase; color:var(--green); letter-spacing:.02em;}
.btn{padding:12px 24px; font-weight:600; font-size:13px; letter-spacing:.04em; text-transform:uppercase; border-radius:1px; display:inline-block; transition:opacity .15s ease;}
.btn:hover{opacity:.85;}
.btn-primary{background:var(--orange); color:var(--ecume);}

.scoreboard{background:var(--ink); border:1px solid rgba(232,169,22,.25); padding:22px; font-family:var(--mono);}
.scoreboard .label{font-size:11px; color:var(--gold); text-transform:uppercase; margin-bottom:14px;}
.score-row{display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.08);}
.score-row:last-child{border-bottom:none;}
.score-team{font-size:14px; color:#F0EEE8;}
.score-num{font-size:28px; font-weight:600; color:var(--gold);}

section{padding:56px 0;}
.sec-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:32px; border-bottom:1px solid #D9D3C4; padding-bottom:14px; position:relative;}
.sec-head::after{content:''; position:absolute; left:0; bottom:-1px; width:56px; height:1px; background:var(--gold);}
.sec-head h2{font-family:var(--display); font-weight:800; font-size:32px; text-transform:uppercase; letter-spacing:.01em;}
.see-all{font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; border-bottom:1px solid var(--gold);}

.news-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:24px;}
.card{background:#fff; border:1px solid var(--filet);}
.card img{aspect-ratio:16/10; object-fit:cover; width:100%;}
.card-body{padding:18px;}
.card .date{font-family:var(--mono); font-size:12px; color:var(--orange); font-weight:600;}
.card h3{font-size:17px; margin-top:8px; font-weight:700; line-height:1.3;}
.card.feature{grid-row:span 2;}
.card.feature h3{font-size:24px;}
.news-grid .card{transition:box-shadow .15s ease;}
.news-grid .card:hover{box-shadow:0 2px 10px rgba(23,27,25,.05); border-color:#D3CDBE;}

.agenda{background:var(--ink); color:var(--ecume);}
.agenda .sec-head{border-bottom-color:rgba(247,244,238,.12);}
.filtre-agenda{display:flex; gap:10px; margin-bottom:24px; flex-wrap:wrap;}
.filtre-agenda a{font-family:var(--mono); font-size:12px; padding:6px 12px; border:1px solid rgba(247,244,238,.22); text-transform:uppercase; letter-spacing:.03em;}
.filtre-agenda a.actif{background:var(--gold); color:var(--ink); border-color:var(--gold);}
.agenda-list{list-style:none;}
.agenda-item{display:grid; grid-template-columns:120px 1fr auto; gap:20px; align-items:center; padding:18px 0; border-bottom:1px solid rgba(247,244,238,.08);}
.agenda-date{font-family:var(--mono); color:var(--gold); font-size:15px;}
.agenda-date .day{font-family:var(--display); font-size:30px; display:block; color:var(--ecume); line-height:1;}
.agenda-title{font-weight:600; font-size:16px;}
.agenda-place{font-size:13px; color:#B7C4BD; margin-top:4px;}
.tag{font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; padding:4px 9px; border:1px solid rgba(232,169,22,.55); color:var(--gold); text-transform:uppercase; white-space:nowrap;}

.clubs-toolbar{margin-bottom:24px;}
.clubs-toolbar input{width:100%; max-width:340px; padding:12px 14px; border:1px solid #C9C2B2; font-family:var(--body); font-size:14px;}.clubs-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.club-chip{background:#fff; border:1px solid var(--filet); padding:15px 16px; font-weight:500; font-size:14px; transition:border-color .15s ease, color .15s ease; display:flex; align-items:center; gap:10px;}
.club-chip:hover{border-color:var(--orange); color:var(--orange);}
.club-chip .ball{width:8px; height:8px; border-radius:50%; background:var(--green); flex-shrink:0;}

.cta-band{background:var(--gold); padding:48px 0; text-align:center;}
.cta-band h2{font-family:var(--display); font-weight:900; font-size:36px; text-transform:uppercase; margin-bottom:14px;}
.cta-band p{max-width:520px; margin:0 auto 24px; font-size:15px;}
.cta-band .btn-primary{background:var(--ink);}

footer{background:var(--ink); color:#B7C4BD; padding:48px 0 24px; font-size:13px;}
.foot-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px; margin-bottom:32px;}
footer h4{color:var(--ecume); font-size:13px; text-transform:uppercase; margin-bottom:14px;}
footer ul{list-style:none;}
footer li{margin-bottom:8px;}
.foot-bottom{border-top:1px solid rgba(255,255,255,.07); padding-top:18px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}

@media(max-width:860px){
  .news-grid{grid-template-columns:1fr;}
  .card.feature{grid-row:auto;}
  .clubs-grid{grid-template-columns:repeat(2,1fr);}
  .foot-grid{grid-template-columns:1fr 1fr;}
  nav ul{display:none;}
  .agenda-item{grid-template-columns:80px 1fr;}
  .tag{display:none;}
}

/* Organigramme du bureau exécutif */
.organigramme{display:flex; justify-content:center; padding:24px 0 48px;}
.organigramme-branche{display:flex; flex-direction:column; align-items:center;}
.organigramme-carte{
  background:#fff; border:1px solid var(--filet); border-top:1px solid var(--gold);
  padding:16px 20px; width:180px; text-align:center;
}
.organigramme-carte img{width:64px; height:64px; object-fit:cover; border-radius:50%; margin:0 auto 10px;}
.organigramme-avatar{
  width:64px; height:64px; border-radius:50%; background:var(--green); color:var(--gold);
  font-family:var(--display); font-size:24px; display:flex; align-items:center; justify-content:center;
  margin:0 auto 10px;
}
.organigramme-nom{font-weight:700; font-size:14px; color:var(--ink);}
.organigramme-fonction{font-family:var(--mono); font-size:11px; color:var(--orange); text-transform:uppercase; margin-top:4px;}
.organigramme-enfants{
  display:flex; gap:32px; margin-top:32px; padding-top:32px; position:relative; flex-wrap:wrap; justify-content:center;
}
.organigramme-enfants::before{
  content:''; position:absolute; top:0; left:50%; width:1px; height:32px; background:#C9C2B2; transform:translateX(-50%);
}
.organigramme-branche .organigramme-branche{position:relative;}
.organigramme-enfants > .organigramme-branche::before{
  content:''; position:absolute; top:-32px; left:50%; width:1px; height:32px; background:#C9C2B2; transform:translateX(-50%);
}
@media(max-width:860px){
  .organigramme-enfants{flex-direction:column; align-items:center; gap:24px;}
}

/* Page "La Fédération" : zones cliquables vers ses sous-pages */
.federation-grille{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.federation-tuile{
  display:block; background:#fff; border:1px solid var(--filet); border-left:1px solid var(--green);
  padding:22px 20px; transition:.15s;
}
.federation-tuile:hover{border-color:var(--green); box-shadow:0 2px 8px rgba(0,0,0,.04);}
.federation-tuile-titre{font-family:var(--display); font-size:18px; text-transform:uppercase; color:var(--ink);}
.federation-tuile-desc{font-size:13px; color:#777; margin-top:6px;}
@media(max-width:860px){
  .federation-grille{grid-template-columns:1fr 1fr;}
}

/* Formulaire de contact */
.card form input[type="text"],
.card form input[type="email"],
.card form input[type="password"],
.card form textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #D3CDBE;
  font-family: var(--body);
  font-size: 14px;
  background: #fff;
  transition: border-color .15s ease;
}
.card form input:focus,
.card form textarea:focus { outline: none; border-color: var(--green); }
.card form textarea { resize: vertical; min-height: 120px; }

/* Piège à robots (honeypot) : invisible pour un humain, mais présent dans
   le DOM — un robot qui remplit tous les champs automatiquement s'y fait
   piéger, alors qu'un display:none pur est parfois repéré et évité. */
.piege-robot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* Bouton d'envoi et retours (erreurs/succès) bien visibles */
.card form button[type="submit"] {
  appearance: none;
  -webkit-appearance: none;
  display: inline-block;
  padding: 14px 28px;
}
.form-erreur {
  background: #FDECEA;
  color: #B3261E;
  border-left: 2px solid #B3261E;
  padding: 10px 14px;
  font-size: 13px;
  margin-top: 6px;
}
.form-succes {
  background: #E8F5E9;
  color: var(--green);
  border-left: 2px solid var(--green);
  padding: 14px 16px;
  margin-bottom: 20px;
  font-weight: 600;
}

/* Galerie photo d'un article, avec visionneuse plein écran en CSS pur
   (technique :target — pas de JS nécessaire, donc rien qui puisse casser
   au chargement). */
.galerie-grille{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:8px;}
.galerie-vignette{display:block; aspect-ratio:4/3; overflow:hidden; border-radius:1px;}
.galerie-vignette img{width:100%; height:100%; object-fit:cover; transition:transform .2s; display:block;}
.galerie-vignette:hover img{transform:scale(1.06);}
.galerie-lightbox{
  display:none; position:fixed; inset:0; z-index:200;
  align-items:center; justify-content:center;
}
.galerie-lightbox:target{display:flex;}
.galerie-lightbox-fond{position:absolute; inset:0; background:rgba(10,12,11,.88);}
.galerie-lightbox-contenu{position:relative; max-width:90vw; max-height:85vh; text-align:center; z-index:1;}
.galerie-lightbox-contenu img{max-width:100%; max-height:75vh; display:block; margin:0 auto; border-radius:2px;}
.galerie-lightbox-contenu p{color:#F0EEE8; margin-top:12px; font-size:14px;}
.galerie-lightbox-fermer{
  position:absolute; top:-38px; right:0; color:#fff; font-size:22px;
  text-decoration:none; line-height:1; padding:4px 8px;
}
@media(max-width:640px){
  .galerie-grille{grid-template-columns:repeat(2,1fr);}
}

/* Bandeau "chiffres clés" de l'accueil */
.chiffres-bande{background:var(--green); padding:36px 0;}
.chiffres-grille{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; text-align:center;}
.chiffre-item{border-left:1px solid rgba(232,169,22,.22); padding-left:24px;}
.chiffre-item:first-child{border-left:none; padding-left:0;}
.chiffre-valeur{font-family:var(--mono); font-size:42px; font-weight:500; color:var(--gold); line-height:1;}
.chiffre-label{font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:#D9E4DE; margin-top:8px;}
@media(max-width:640px){
  .chiffres-grille{grid-template-columns:1fr; gap:20px;}
  .chiffre-item{border-left:none; padding-left:0; border-top:1px solid rgba(232,169,22,.22); padding-top:16px;}
  .chiffre-item:first-child{border-top:none; padding-top:0;}
}

/* Accueil : espacement resserré entre les rubriques (les autres pages
   gardent l'espacement standard de `section`). */
.accueil section{padding:32px 0;}
.accueil .hero{padding:24px 0 20px;}
.accueil .sec-head{margin-bottom:20px; padding-bottom:10px;}
.accueil .chiffres-bande{padding:22px 0;}
.accueil .agenda-item{padding:13px 0;}
.accueil .cta-band{padding:36px 0;}
.accueil .cta-band p{margin-bottom:18px;}
@media(max-width:640px){
  .accueil section{padding:24px 0;}
}