/* Fichier produit par inc/enqueue.php à partir de assets/css/src/ — ne pas modifier à la main. */

/* ===== 01-tokens.css ===== */
/* ---------- Police : Archivo variable, auto-hébergée ----------
   Fichiers tirés de Google Fonts (Archivo v25, licence OFL : assets/polices/OFL.txt),
   axes de graisse 400-900 et de chasse 75-125 %, comme dans les maquettes.
   Chaque style existe en deux jeux : latin (chargé partout, le romain est préchargé
   par inc/enqueue.php) et latin étendu (téléchargé seulement si un caractère
   de sa plage apparaît dans la page, ex. un nom polonais ou tchèque). */
@font-face{
  font-family:"Archivo";
  src:url("../polices/archivo-romain.woff2") format("woff2");
  font-style:normal;
  font-weight:400 900;
  font-stretch:75% 125%;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Archivo";
  src:url("../polices/archivo-romain-ext.woff2") format("woff2");
  font-style:normal;
  font-weight:400 900;
  font-stretch:75% 125%;
  font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Archivo";
  src:url("../polices/archivo-italique.woff2") format("woff2");
  font-style:italic;
  font-weight:400 900;
  font-stretch:75% 125%;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Archivo";
  src:url("../polices/archivo-italique-ext.woff2") format("woff2");
  font-style:italic;
  font-weight:400 900;
  font-stretch:75% 125%;
  font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- Tokens : déclarés une seule fois pour tout le site ---------- */
:root{
  --nuit:#0B1B39; --bleu:#1338A0; --bleu-clair:#3C63D2;
  --rouge:#E02A22; --rouge-sombre:#B81C15;
  --papier:#F4F3EF; --encre:#15171C; --gris:#5B6272; --trait:#DDDBD4;
  --max:1180px; --gouttiere:clamp(20px,5vw,48px);
  --mesure:82ch;                      /* longueur de ligne des paragraphes */
  --display:"Archivo",system-ui,sans-serif;
}

/* ===== 02-base.css ===== */
/* ---------- Base commune à toutes les maquettes ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--display);font-variant-numeric:tabular-nums;background:var(--papier);
  color:var(--encre);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gouttiere)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
p{max-width:var(--mesure)}
/* L'attribut hidden l'emporte sur les display des composants (ex. .course{display:grid}). */
[hidden]{display:none!important}

/* ---------- Accessibilité ---------- */
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--bleu-clair);outline-offset:3px}

/* Lien d'évitement : invisible jusqu'à la prise de focus au clavier */
.evitement{position:absolute;left:var(--gouttiere);top:-200px;z-index:100;
  background:var(--encre);color:var(--papier);padding:10px 16px;font-weight:700;text-decoration:none}
.evitement:focus{top:12px}
#contenu{scroll-margin-top:72px}

/* La maquette déclare *{scroll-behavior:auto}, que html{scroll-behavior:smooth} emporte
   par spécificité : on vise html explicitement, et on coupe aussi les animations. */
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto}
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important}
}

/* ===== 03-boutons.css ===== */
/* ---------- Boutons et liens soulignés ---------- */
.btn{display:inline-block;font-weight:700;font-stretch:108%;padding:.72em 1.5em;border-radius:2px;
  text-decoration:none;background:var(--rouge);color:#fff;border:2px solid var(--rouge);
  transition:background .15s,border-color .15s}
.btn:hover{background:var(--rouge-sombre);border-color:var(--rouge-sombre)}
.btn-fantome{background:transparent;color:var(--papier);border-color:rgba(244,243,239,.45)}
.btn-fantome:hover{background:rgba(244,243,239,.12);border-color:var(--papier)}

.lien-simple{font-weight:700;color:var(--bleu);text-decoration:none;border-bottom:2px solid var(--bleu);padding-bottom:2px}
.lien-simple:hover{color:var(--rouge);border-color:var(--rouge)}

/* ===== 04-entete.css ===== */
/* ---------- En-tête ---------- */
.entete{position:sticky;top:0;z-index:50;background:rgba(244,243,239,.94);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--trait)}
.entete .wrap{display:flex;align-items:center;gap:24px;height:72px}
.marque{display:flex;align-items:center;gap:12px;text-decoration:none;line-height:1}
.marque img{height:44px;width:auto;flex:none}
.marque .nom{font-weight:900;font-stretch:112%;font-size:clamp(.92rem,2vw,1.05rem);
  letter-spacing:-.005em;white-space:nowrap}
.marque .nom .fr{color:var(--rouge)}
@media (max-width:400px){ .marque img{height:38px} }
/* Correction validée par Ronan : sous 400 px, le nom passait sous le bouton Menu.
   La marque peut rétrécir, et le nom revenir à la ligne sur les très petits écrans. */
@media (max-width:400px){
  .marque{min-width:0}
  .marque .nom{white-space:normal;font-size:.76rem;line-height:1.1}
}
/* Évolution de l'accueil (validée le 14/09) : six liens avec « Actualités » ; écart réduit
   et pas de retour à la ligne, menu mobile sous 1 040 px (au lieu de 900). */
.nav{margin-left:auto;display:flex;align-items:center;gap:clamp(18px,2vw,26px)}
.nav a{text-decoration:none;font-weight:600;font-size:.95rem;white-space:nowrap}
.nav a:not(.btn):hover{color:var(--bleu)}
.nav a[aria-current]{color:var(--bleu);border-bottom:2px solid var(--rouge);padding-bottom:2px}
/* Ajout thème : sur la page Adhérer, le bouton courant garde son aspect de bouton
   (sinon texte bleu sur fond rouge). */
.nav a.btn[aria-current]{color:#fff;padding-bottom:.72em}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--trait);border-radius:2px;
  padding:8px 12px;font:inherit;font-weight:700;cursor:pointer}
.burger[aria-expanded="true"]{background:var(--encre);color:var(--papier);border-color:var(--encre)}

/* ---------- Menu mobile ---------- */
.menu-mobile{display:none;border-top:1px solid var(--trait);background:var(--papier)}
.menu-mobile.ouvert{display:block}
.menu-mobile a{display:block;padding:15px var(--gouttiere);text-decoration:none;font-weight:700;
  border-bottom:1px solid var(--trait)}
/* Maquette : var(--rouge). Petit texte sur fond clair → --rouge-sombre (CLAUDE.md §9, contraste 4,2:1 sinon). */
.menu-mobile a:last-child{border-bottom:none;color:var(--rouge-sombre)}

@media (max-width:1040px){
  .nav{display:none}
  .burger{display:block}
}

/* ---------- Bandeau « En direct » (maquette du direct) ----------
   Sur toutes les pages pendant les Mondiaux, sauf le direct lui-même : évite un sixième
   lien dans le menu, qui ne tiendrait plus sur une ligne vers 1 000 px. */
.bandeau-direct{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  background:var(--rouge);color:#fff;text-decoration:none;font-size:.9rem;font-weight:600;padding:8px var(--gouttiere)}
.bandeau-direct b{font-weight:900;letter-spacing:.08em;font-size:.8rem}
.bandeau-direct .point{background:#fff;margin-right:0}
.bandeau-direct .suite{font-weight:800;border-bottom:1px solid rgba(255,255,255,.6)}
.bandeau-direct:hover .suite{border-color:#fff}
.point{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--rouge);
  margin-right:7px;vertical-align:baseline;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

/* Ajout thème : l'entête collant passe sous la barre d'administration WordPress
   (visible seulement pour les utilisateurs connectés). */
@media screen and (min-width:783px){ .admin-bar .entete{top:32px} }
@media screen and (min-width:601px) and (max-width:782px){ .admin-bar .entete{top:46px} }

/* ===== 05-pied.css ===== */
/* ---------- Pied ---------- */
.pied{background:var(--encre);color:#B9BDC7;padding:56px 0 30px;font-size:.92rem}
.pied .wrap{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px}
/* Maquette : <h4>. Rendu en <h2> pour éviter un saut de niveau (CLAUDE.md §9) :
   on neutralise ce que les feuilles de gabarit donnent aux h2, pour garder l'aspect du h4. */
.pied h2{color:#fff;font-size:.95rem;margin:0 0 12px;font-weight:700;font-stretch:100%;
  line-height:inherit;letter-spacing:normal;max-width:none}
.pied a{color:#B9BDC7;text-decoration:none;display:block;padding:3px 0}
.pied a:hover{color:#fff}
.pied .presentation{max-width:38ch}
/* grid-column : demande de Ronan (10/09/2026), la ligne du bas court sur toute la largeur
   (dans les maquettes, elle ne tenait que dans la première colonne de la grille). */
.bas{grid-column:1/-1;border-top:1px solid #2A2D35;margin-top:40px;padding-top:20px;display:flex;
  justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.85rem;color:#7C818C}
.bas a{display:inline}
.bas a + a{margin-left:16px}

/* ---------- Bande partenaires du pied de page ---------- */
/* Demande de Ronan (21/09/2026) : bandeau blanc en haut du pied de page, les logos des
   partenaires étant le plus souvent sur fond blanc ; libellés et noms en texte foncés. */
.bande-partenaires{background:#fff;color:var(--encre);margin:-56px 0 40px;padding:26px 0;
  border-top:1px solid var(--trait)}
.bande-partenaires .wrap{display:flex;align-items:center;gap:18px 34px;flex-wrap:wrap}
.bande-partenaires .titre-part{font-size:.72rem;font-weight:800;letter-spacing:.1em;color:var(--gris);
  flex:none}
.logos-pied{display:flex;align-items:center;gap:16px 32px;flex-wrap:wrap}
.logos-pied a{display:inline-flex;align-items:center;padding:0;color:var(--encre);text-decoration:none;
  font-weight:900;font-stretch:112%;font-size:1.05rem;opacity:.75;transition:opacity .15s}
.logos-pied a:hover{opacity:1;color:var(--encre)}
/* Demande de Ronan (15/09/2026) : logos lisibles. Boîte de 150 × 88 px au plus : un logo carré
   ou 5:4 (PNG 500 × 400) monte à 88 px de haut, un logotype large reste sur une ligne. */
.logos-pied img{max-height:88px;max-width:150px;width:auto;height:auto;border-radius:3px}
/* Un SVG sans largeur ni hauteur propres se réduirait à presque rien : hauteur fixée, logo
   ajusté sans déformation dans sa boîte. */
.logos-pied img[src$=".svg"]{height:88px;width:150px;object-fit:contain}
/* Un logo en image n'est pas atténué comme les noms en texte. */
.logos-pied .avec-logo{opacity:1}
/* Demande de Ronan (21/09/2026) : logos en noir et blanc, en couleur au survol et au clavier. */
.logos-pied img{filter:grayscale(1);transition:filter .2s}
.logos-pied > *:hover img,.logos-pied > *:focus-visible img{filter:none}
@media (prefers-reduced-motion:reduce){ .logos-pied img{transition:none} }
.logos-pied .devenir-part{font-weight:700;font-stretch:100%;font-size:.85rem;color:var(--bleu);
  border-bottom:1px solid var(--rouge);opacity:1}
.logos-pied .devenir-part:hover{color:var(--rouge-sombre)}
/* Ajout thème : partenaire sans lien, même aspect qu'un partenaire lié */
.logos-pied > span{display:inline-flex;align-items:center;color:var(--encre);font-weight:900;
  font-stretch:112%;font-size:1.05rem;opacity:.75}
/* Demande de Ronan (15/09/2026) : partenaires de la finale mondiale sur une première ligne,
   puis ceux de l'association ; libellés de même largeur pour aligner les logos. */
.bande-partenaires .titre-part{text-transform:uppercase}
.bande-partenaires .wrap + .wrap{margin-top:22px}
.bande-partenaires.groupes .titre-part{flex:0 0 250px;line-height:1.5}
.bande-partenaires .finale .titre-part{color:var(--rouge-sombre)}
@media (max-width:560px){
  .bande-partenaires.groupes .titre-part{flex-basis:100%}
  .bande-partenaires .wrap{gap:12px 20px}
  .logos-pied{gap:12px 22px}
  .logos-pied a{font-size:.95rem}
  .logos-pied img{max-height:76px;max-width:96px}
  .logos-pied img[src$=".svg"]{height:76px;width:96px}
}

@media (max-width:900px){
  .pied .wrap{grid-template-columns:1fr}
}

/* ===== 06-faq.css ===== */
/* ---------- Questions fréquentes (règles, association, adhérer) ----------
   Identique dans les maquettes règles et association ; la maquette adhérer n'avait pas
   de style pour ce bloc (ajout thème : il reçoit le même). */
/* section.faq : l'emporte sur les « section{} » et « .contenu{} » des gabarits, comme le
   style="padding-top:0" des maquettes. */
section.faq{padding-top:0}
section.faq h2{margin-bottom:24px}
details{background:#fff;border:1px solid var(--trait);padding:16px 20px;margin-bottom:10px}
summary{font-weight:700;cursor:pointer;font-size:1rem}
summary::marker{color:var(--rouge)}
details p{margin-top:12px;font-size:.95rem;color:var(--gris)}