/* Palmarès FCB — dépend des tokens de css/fcb-ui.css (--ink, --bone, --blood).
   Chaque var() porte un repli : si l'ordre de chargement change, la page
   reste lisible au lieu de virer au noir sur noir. */

.fcb-palmares {
  max-width: 68rem;
  margin: 0 auto;
  padding: 2rem 1rem 4rem;
  color: var(--bone, #ece7e1);
}

/* Logo et titre sur une ligne. `flex-wrap` parce qu'à 320 px « Palmarès du
   FCB Montady » ne tient pas à côté d'un logo : il passe alors dessous
   plutôt que de comprimer l'un ou l'autre. */
.fcb-palmares-titre-ligne {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(0.6rem, 2vw, 1.2rem);
}

/* Taille en `clamp` calée sur celle du titre : les deux grandissent ensemble,
   et le logo ne devient jamais une vignette perdue à côté d'un titre de
   4,5rem. `height:auto` avec les attributs width/height du HTML — ceux-ci
   réservent la place avant le chargement, celui-là laisse la hauteur suivre
   la largeur imposée ici. */
.fcb-palmares-logo {
  width: clamp(3rem, 9vw, 5rem);
  height: auto;
  flex: none;
}

.fcb-palmares-titre {
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: clamp(2.5rem, 8vw, 4.5rem);
  letter-spacing: 0.02em;
  margin: 0 0 0.25rem;
  color: var(--bone, #ece7e1);
}

.fcb-palmares-chapo {
  font-family: Barlow, system-ui, sans-serif;
  max-width: 42rem;
  opacity: 0.78;
  margin: 0 0 2rem;
}

/* Sur sa propre ligne : noyée dans le chapô, l'astuce se lit comme la suite
   de la phrase précédente et ne se remarque pas. */
.fcb-palmares-astuce {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.9rem;
  font-style: italic;
}

/* --- Mur de médailles ------------------------------------------------------
   Grille auto-ajustée plutôt qu'un nombre de colonnes fixe : les six cartes
   se rangent d'elles-mêmes en 6, 3 ou 2 colonnes selon la largeur, sans une
   seule media-query à maintenir. `minmax(0, …)` et non `minmax(auto, …)` :
   sans le zéro, un nombre large empêcherait la carte de rétrécir et la
   grille déborderait sur mobile. */
.fcb-palm-mur {
  list-style: none;
  margin: 0 0 2.5rem;
  padding: 0;
  display: grid;
  /* 10rem et non 8.5 : depuis que le pictogramme est passé à côté du chiffre,
     la ligne de tête ne doit pas déborder de sa carte. Sur un écran de 360 px
     deux colonnes tiennent toujours. */
  grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
  gap: 0.75rem;
}

.fcb-palm-carte {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  padding: 1rem 0.5rem;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-top: 3px solid rgba(255, 255, 255, 0.24);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
}

/* Pictogramme et chiffre côte à côte, tous deux en grand : la carte se lit
   d'un seul coup d'œil, sans descendre jusqu'au libellé.
   `nowrap` parce que le couple ne doit JAMAIS se couper en deux lignes — un
   pictogramme orphelin au-dessus de son chiffre ne veut plus rien dire ; la
   largeur minimale des colonnes du mur est dimensionnée pour l'accueillir. */
.fcb-palm-carte-tete {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  white-space: nowrap;
}

/* Un cran sous le chiffre — environ 15 % de moins. Le pictogramme n'est pas
   une décoration en marge, il doit se lire de loin ; mais à taille égale il
   disputait la vedette au nombre, qui reste l'information. */
.fcb-palm-carte-picto {
  font-size: clamp(1.7rem, 5vw, 2.5rem);
  line-height: 1;
}

.fcb-palm-carte b {
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: clamp(2rem, 6vw, 3rem);
  line-height: 1;
  letter-spacing: 0.02em;
  /* `<b>` vaut 700 par défaut, et cette famille n'existe QU'EN 400 : sans
     cette ligne le navigateur épaississait les six nombres mécaniquement
     (faux gras). Ils sont déjà les plus gros caractères de la carte — c'est
     la TAILLE qui porte l'emphase, pas la graisse.
     ⚠️ La déclaration vit DANS la règle qui bascule la famille, et pas dans
     un sélecteur voisin de même spécificité : les deux dépendraient alors de
     leur ordre d'écriture, et ajouter un `font-weight` ici défferait
     l'autre en silence. Voir la note de `.fcb-brand b` dans css/fcb-ui.css :
     seuil de synthèse mesuré à 600, et aucune graisse supérieure à charger. */
  font-weight: 400;
}

/* ⚠️ Cible le LIBELLÉ par sa classe, jamais `.fcb-palm-carte span`. Ce
   sélecteur-là attrapait TOUS les spans de la carte — le conteneur de tête et
   le pictogramme en font partie — et sa spécificité (une classe + un type)
   l'emportait sur `.fcb-palm-carte-picto` (une classe seule) : le
   pictogramme était rendu à 0,78rem en petites capitales, et aucune
   augmentation de sa taille n'avait le moindre effet. Défaut invisible en
   lisant la règle du picto, qui a l'air correcte. */
.fcb-palm-carte-libelle {
  font-family: Barlow, system-ui, sans-serif;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.68;
}

/* Le métal est porté par le LISERÉ HAUT, pas par un aplat : sur ce thème
   sombre un fond doré rendrait le chiffre illisible. */
.fcb-palm-or     { border-top-color: #d9a441; }
.fcb-palm-argent { border-top-color: #b9bcc2; }
.fcb-palm-bronze { border-top-color: #b07444; }
.fcb-palm-or b     { color: #e6b856; }
.fcb-palm-argent b { color: #cdd0d6; }
.fcb-palm-bronze b { color: #c98a55; }

/* --- Fiche d'un athlète ---------------------------------------------------- */
.fcb-palmares-retour { margin: 0 0 1rem; font-family: Barlow, system-ui, sans-serif; }
.fcb-palmares-retour a { color: inherit; opacity: 0.75; text-decoration: none; }
.fcb-palmares-retour a:hover,
.fcb-palmares-retour a:focus-visible { opacity: 1; text-decoration: underline; }

/* Le nom d'un athlète est un lien vers sa fiche, et il doit SE VOIR comme
   tel. Un simple soulignement au survol ne suffisait pas : rien n'invitait à
   essayer, et personne ne survole 62 lignes pour découvrir ce qui bouge. Au
   doigt, il n'y a même pas de survol du tout.
   Le pointillé signale l'interaction sans faire le mur qu'auraient fait 62
   soulignements pleins ; il devient plein et rouge club au survol et au
   focus clavier. `text-underline-offset` l'écarte des jambages, sans quoi le
   pointillé se confond avec le bas des lettres. */
.fcb-palmares-lien-athlete {
  color: inherit;
  text-decoration: underline dotted;
  text-decoration-color: rgba(255, 255, 255, 0.4);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  cursor: pointer;
}

.fcb-palmares-lien-athlete:hover,
.fcb-palmares-lien-athlete:focus-visible {
  text-decoration: underline solid;
  text-decoration-color: var(--blood, #a3232b);
  text-decoration-thickness: 2px;
}

.fcb-palm-meilleur {
  font-family: Barlow, system-ui, sans-serif;
  margin: 0 0 2rem;
  padding: 0.8rem 1rem;
  border-left: 3px solid var(--blood, #a3232b);
  background: rgba(255, 255, 255, 0.04);
}

.fcb-palm-progression { margin: 0 0 2.5rem; }

.fcb-palm-progression h2 {
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 1.75rem;
  letter-spacing: 0.04em;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--blood, #a3232b);
  margin: 0 0 0.75rem;
}

.fcb-palm-progression ul { list-style: none; margin: 0; padding: 0; }

/* Empilé sur mobile, en trois colonnes dès qu'il y a la place : la saison
   sert d'ancre à gauche, les médailles se lisent d'un coup d'œil au centre. */
.fcb-palm-progression li {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.15rem 1rem;
  padding: 0.7rem 0.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-family: Barlow, system-ui, sans-serif;
}

@media (min-width: 40rem) {
  .fcb-palm-progression li {
    grid-template-columns: 7rem 12rem 1fr;
    align-items: baseline;
  }
}

.fcb-palm-prog-saison {
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 1.2rem;
  letter-spacing: 0.04em;
}

.fcb-palm-prog-medailles b { font-weight: 600; margin-right: 0.6rem; white-space: nowrap; }
.fcb-palm-prog-medailles i { opacity: 0.55; font-style: italic; }
.fcb-palm-prog-detail { font-size: 0.85rem; opacity: 0.62; }

/* --- Temps forts ---------------------------------------------------------- */
.fcb-palm-forts { margin: 0 0 2.5rem; }

.fcb-palm-forts h2 {
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 1.75rem;
  letter-spacing: 0.04em;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--blood, #a3232b);
  margin: 0 0 0.75rem;
}

.fcb-palm-forts ul { list-style: none; margin: 0; padding: 0; }

/* La médaille tient TOUTE la hauteur du bloc (nom, compétition, détail) et
   non la seule première ligne : alignée sur la ligne de base du nom, elle
   passait pour une puce de liste. `center` et non `baseline` — il n'y a plus
   de ligne de base commune quand un élément couvre trois lignes. */
.fcb-palm-forts li {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-family: Barlow, system-ui, sans-serif;
}

.fcb-palm-fort-rang {
  font-size: clamp(2rem, 6vw, 2.8rem);
  line-height: 1;
  text-align: center;
}
.fcb-palm-fort-corps b { display: block; font-weight: 600; }
.fcb-palm-fort-corps small { display: block; font-size: 0.85rem; opacity: 0.62; }

/* Barre d'outils : 44 px de haut minimum, comme la barre de la galerie */
.fcb-palmares-barre {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 1.5rem;
}

.fcb-palmares-barre select,
.fcb-palmares-barre input[type="search"] {
  min-height: 44px;
  padding: 0 0.75rem;
  font: inherit;
  color: var(--bone, #ece7e1);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
}

.fcb-palmares-barre input[type="search"] { flex: 1 1 16rem; }
.fcb-palmares-champ { display: flex; align-items: center; gap: 0.5rem; }

/* La case à cocher garde la hauteur tactile de 44 px de ses voisines : une
   bascule deux fois plus basse que les menus casse l'alignement de la barre
   et se rate au doigt. */
.fcb-palmares-bascule {
  min-height: 44px;
  padding: 0 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  cursor: pointer;
}

.fcb-palmares-bascule input { width: 1.05rem; height: 1.05rem; accent-color: var(--blood, #a3232b); }

.fcb-palmares-groupe { margin: 0 0 2.5rem; }

.fcb-palmares-groupe h2 {
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 1.75rem;
  letter-spacing: 0.04em;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--blood, #a3232b);
  margin: 0 0 0.75rem;
}

.fcb-palmares-groupe h2 small {
  font-family: Barlow, system-ui, sans-serif;
  font-size: 0.8rem;
  opacity: 0.6;
  margin-left: 0.5rem;
}

.fcb-palmares-groupe ul { list-style: none; margin: 0; padding: 0; }

/* Une ligne = un résultat. En grille sur large, empilée sur mobile.
   Sur mobile la grille n'a que 2 colonnes (rang, athlète) : sans placement
   explicite, l'auto-placement de Grid case compétition et catégorie sur la
   ligne suivante EN COLONNES au lieu de les empiler pleine largeur — la
   compétition héritait alors de la colonne de 3rem du rang et s'y enroulait
   mot par mot. `grid-column: 1 / -1` les force sur toute la largeur. */
.fcb-palmares-ligne {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: 0.15rem 0.75rem;
  padding: 0.7rem 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-family: Barlow, system-ui, sans-serif;
}

.fcb-palmares-compet,
.fcb-palmares-cat { grid-column: 1 / -1; }

/* Empilée, la ligne fait trois rangées (athlète / compétition / catégorie) et
   la médaille les couvre TOUTES : cantonnée à la première, elle passait pour
   une puce de liste. Ne vaut que sur cette mise en page-là — voir le
   rétablissement dans la requête média ci-dessous. */
.fcb-palmares-rang {
  grid-row: 1 / -1;
  align-self: center;
  font-size: clamp(1.7rem, 5.5vw, 2.3rem);
  line-height: 1;
  text-align: center;
}

@media (min-width: 46rem) {
  .fcb-palmares-ligne {
    grid-template-columns: 3rem 14rem 1fr 14rem;
    align-items: baseline;
  }

  /* À partir d'ici la grille a ses 4 colonnes explicites (rang, athlète,
     compétition, catégorie) : reprendre le placement automatique remet
     chaque span dans sa propre colonne au lieu de la pleine largeur mobile. */
  .fcb-palmares-compet,
  .fcb-palmares-cat { grid-column: auto; }

  /* Une seule rangée ici : la médaille n'a plus rien à couvrir, et une
     grid-row héritée de la mise en page empilée l'étirerait sur une hauteur
     qui n'existe plus. Elle reste néanmoins bien plus grande qu'une ligne de
     texte — c'est elle qu'on cherche en parcourant la liste — quitte à ce que
     la ligne y gagne en hauteur, ce qui est le bon compromis. */
  .fcb-palmares-rang {
    grid-row: auto;
    align-self: baseline;
    font-size: 2rem;
  }
}
.fcb-palmares-athlete { font-weight: 600; }
.fcb-palmares-compet { opacity: 0.9; }
.fcb-palmares-cat { font-size: 0.85rem; opacity: 0.62; }

/* Podium mis en avant : un liseré, pas un fond — le thème est sombre et
   un aplat rouge écraserait le texte. */
.fcb-palmares-podium { border-left: 3px solid var(--blood, #a3232b); }

/* --- Badge de type de compétition ------------------------------------------
   Le pictogramme porte le sens, la pastille colorée porte la famille. Les
   deux ensemble : la couleur seule ne suffit pas (daltonisme, impression en
   noir et blanc), et le pictogramme seul se lit mal dans une liste longue.
   L'intitulé exact reste dans title= et aria-label=. */
/* `min-width` et non `width` : le drapeau 🇫🇷 est composé de DEUX indicateurs
   régionaux et se rend nettement plus large que 🏆 ou 🥊 selon la police du
   système. À largeur fixe il débordait de sa pastille sur certains postes,
   sans que rien ne le signale ici. */
.fcb-palm-type {
  display: inline-block;
  min-width: 2.6rem;
  margin-right: 0.4rem;
  padding: 0.1rem 0.25rem;
  text-align: center;
  font-size: 1.35rem;
  line-height: 1.2;
  border-radius: 3px;
  border-bottom: 2px solid transparent;
  background: rgba(255, 255, 255, 0.06);
  cursor: help;
}

.fcb-palm-type-france       { border-bottom-color: #e6b856; background: rgba(230, 184, 86, 0.14); }
.fcb-palm-type-coupe-fr     { border-bottom-color: #7fa8d4; background: rgba(127, 168, 212, 0.14); }
.fcb-palm-type-championnat  { border-bottom-color: #c98a55; background: rgba(201, 138, 85, 0.14); }
.fcb-palm-type-coupe        { border-bottom-color: #9db8cf; background: rgba(157, 184, 207, 0.12); }
.fcb-palm-type-open         { border-bottom-color: #7fb07a; background: rgba(127, 176, 122, 0.14); }
.fcb-palm-type-autre        { border-bottom-color: rgba(255, 255, 255, 0.28); }

.fcb-palmares-vide { opacity: 0.7; font-style: italic; }

.fcb-palmares-maj {
  margin-top: 2.5rem;
  font-size: 0.8rem;
  opacity: 0.5;
}

/* --- Graisse de la police de titrage -------------------------------------- */
/* Bebas Neue n'est publiée QU'EN 400, et aucune des règles ci-dessous ne
   précisait de graisse.
   Quatre des cinq sélecteurs sont des titres (`h1`/`h2`), donc à 500 via
   Bootstrap 4 : ils demandaient une graisse qui n'existe pas. Le cinquième,
   `.fcb-palm-prog-saison`, est un `<span>` que Bootstrap ne touche pas — il
   héritait déjà 400 et n'est ici que pour ne pas dépendre de ce qu'un parent
   déclarera demain.
   Aucun effet VISIBLE aujourd'hui — mesuré au pixel dans Chromium le
   09/09/2026, la synthèse de gras ne s'enclenche qu'à partir de 600, et un
   500 rend exactement comme un 400. C'est donc de l'hygiène, pas un
   correctif : la valeur devient explicite au lieu de dépendre du seuil de
   synthèse d'un navigateur, que rien n'oblige à valoir 600 ailleurs.
   (Le vrai faux gras de cette feuille était `.fcb-palm-carte b`, à 700 :
   corrigé dans la règle elle-même, plus haut.)
   Les trois autres feuilles du club (styles.css, galerie/css/gallery.css,
   calendrier/css/style_calendrier.css) posent ce `font-weight: 400` sur
   `h1,h2,h3` depuis l'origine. Cette feuille-ci était la seule sans — comme
   elle était la seule à ne pas charger les polices le 08/09. */
.fcb-palmares-titre,
.fcb-palm-progression h2,
.fcb-palm-prog-saison,
.fcb-palm-forts h2,
.fcb-palmares-groupe h2 { font-weight: 400; }