/* ============================================================================
   LA VITRINE DES CONCOURS
   ============================================================================

   Elle prolonge `styles.css` et n'invente aucun jeton : les mêmes couleurs, la
   même serif pour les titres, la même sans pour les chiffres. Ce qui lui est
   propre tient en trois formes :

     · LA CARTE À PASTILLE DE CALENDRIER, parce qu'on cherche un concours par sa
       date avant de le chercher par son nom ;
     · L'ÉTAT EN UN MOT, une pastille dont la couleur DOUBLE le mot et ne le
       remplace jamais : « Annulé » se lit sans distinguer les rouges ;
     · LE CLASSEMENT, un tableau qui doit rester lisible sur un téléphone, au
       bord d'une carrière, en plein soleil.

   LE PODIUM EST LA SEULE COULEUR CATÉGORIELLE DE LA PAGE, et elle est
   redondante avec le rang écrit à côté : l'or, l'argent et le bronze sont des
   conventions du sport, pas un code à apprendre. Personne n'a besoin de les
   distinguer pour lire le tableau.
   ========================================================================== */

/* ---------- L'en-tête de section, commun aux deux pages ---------- */
.vitrine-tete h1,
.vitrine-fiche-tete h1 { max-width: 22ch; }
.vitrine-tete .section__intro,
.vitrine-fiche-tete .section__intro { max-width: 52ch; }

.fil {
  display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
  font-family: var(--sans); font-size: .85rem; color: var(--ivoire-faible);
  margin-bottom: 1.6rem;
}
.fil a { color: var(--ivoire-faible); text-decoration: none; }
.fil a:hover { color: var(--or-clair); }
.fil span { color: var(--ligne-forte); }

.visuellement-cache {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- L'état, en un mot ---------- */
.etat {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--sans); font-size: .72rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .3rem .6rem; border-radius: 999px;
  border: 1px solid var(--ligne-forte); color: var(--ivoire-doux);
  white-space: nowrap;
}
.etat--ouvert { border-color: rgba(120, 170, 110, .5); color: #9ec48f; }
.etat--aujourdhui { border-color: var(--or); color: var(--or-clair); background: rgba(192, 143, 53, .12); }
.etat--resultats { border-color: var(--or-sombre); color: var(--or-clair); }
.etat--annule { border-color: rgba(200, 110, 95, .5); color: #d99c8e; }
.etat--clos, .etat--bientot, .etat--passe { color: var(--ivoire-faible); }

/* ---------- La barre de filtres ---------- */
.liste-c__barre {
  display: flex; flex-wrap: wrap; gap: 1rem 1.4rem;
  align-items: center; justify-content: space-between;
  padding-bottom: 1.2rem; margin-bottom: 1.6rem;
  border-bottom: 1px solid var(--ligne);
}
.filtres { display: flex; gap: .4rem; flex-wrap: wrap; }
.filtre {
  font-family: var(--sans); font-size: .9rem; text-decoration: none;
  color: var(--ivoire-doux); padding: .5rem .95rem; border-radius: 999px;
  border: 1px solid transparent; transition: color .2s, border-color .2s, background .2s;
}
.filtre:hover { color: var(--or-clair); }
.filtre--actif { border-color: var(--ligne-forte); background: var(--encre-2); color: var(--ivoire); }

/* SUR UN TÉLÉPHONE, LE CHAMP PREND LA LARGEUR ET LE BOUTON RESTE À CÔTÉ :
   à 390 px, une largeur fixe laissait le bouton passer seul à la ligne, ce qui
   se lit comme deux contrôles sans rapport. */
/* `min-width: 0` EST LA LIGNE QUI COMPTE : un élément flex a par défaut une
   largeur minimale égale à son contenu, donc le formulaire refusait de
   rétrécir sous ses 18 rem de base et débordait de 23 px à 360 px. Mesuré. */
.chercher { display: flex; gap: .5rem; flex: 1 1 18rem; min-width: 0; max-width: 30rem; }
.chercher input[type="search"] {
  font: inherit; font-size: .95rem; color: var(--ivoire); background: var(--encre-2);
  border: 1px solid var(--ligne); border-radius: .5rem; padding: .55rem .8rem;
  min-width: 0; flex: 1 1 auto;
}
.chercher .bouton { flex: 0 0 auto; }
.chercher input[type="search"]::placeholder { color: var(--ivoire-faible); }
.chercher input[type="search"]:focus-visible { outline: 2px solid var(--or); outline-offset: 1px; border-color: var(--or); }

.liste-c__compte { font-size: .95rem; color: var(--ivoire-faible); margin: 0 0 1.4rem; }
.liste-c__vide p { max-width: 56ch; }
.liste-c__vide-actions { margin-top: 1.2rem; }

/* ---------- La liste : des cartes à pastille de calendrier ---------- */
.liste-c { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
@media (min-width: 44rem) { .liste-c { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 74rem) { .liste-c { grid-template-columns: repeat(3, 1fr); } }

.carte-c { min-width: 0; }
.carte-c__lien {
  display: flex; gap: 1.1rem; height: 100%;
  text-decoration: none; color: inherit;
  background: var(--encre-2); border: 1px solid var(--ligne);
  border-radius: var(--rayon); padding: 1.1rem 1.2rem;
  transition: border-color .25s ease, transform .25s ease, background .25s ease;
}
.carte-c__lien:hover { border-color: var(--ligne-forte); background: var(--encre-3); transform: translateY(-2px); }
.carte-c__lien:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }

.carte-c__date {
  flex: 0 0 auto; width: 3.4rem; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding-top: .15rem; border-right: 1px solid var(--ligne); padding-right: 1rem;
}
.carte-c__jour { font-family: var(--serif); font-size: 2rem; line-height: 1; color: var(--or-clair); }
.carte-c__mois { font-family: var(--sans); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ivoire-doux); margin-top: .2rem; }
.carte-c__annee { font-family: var(--sans); font-size: .7rem; color: var(--ivoire-faible); margin-top: .1rem; }

.carte-c__corps { display: flex; flex-direction: column; gap: .5rem; min-width: 0; align-items: flex-start; }
/* Dans une colonne flex, un `inline-flex` s'étire sur toute la largeur : la
   pastille faisait une barre. Elle se recale sur son propre texte. */
.carte-c__corps .etat { align-self: flex-start; }
.carte-c__nom { font-family: var(--serif); font-size: 1.25rem; line-height: 1.25; color: var(--ivoire); }
.carte-c__lien:hover .carte-c__nom { color: var(--or-clair); }
.carte-c__lieu { font-size: .9rem; color: var(--ivoire-doux); }
.carte-c__dep { color: var(--ivoire-faible); }
.carte-c__faits { list-style: none; padding: 0; margin: .15rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem .7rem; font-size: .82rem; color: var(--ivoire-faible); font-family: var(--sans); }
.carte-c__tag { border: 1px solid var(--ligne); border-radius: 999px; padding: .1rem .55rem; color: var(--ivoire-doux); }
.carte-c__classes { color: var(--or-clair); }

/* ---------- La fiche : les faits, en paires ---------- */
.vitrine-fiche__lieu { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; color: var(--ivoire-doux); margin-bottom: 1.6rem; }
.vitrine-fiche__notes { max-width: 56ch; color: var(--ivoire-doux); margin-top: 1.4rem; }
.vitrine-annule { margin: 1.4rem 0; }

.faits { display: grid; gap: .9rem 2rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); margin: 1.8rem 0 0; }
.faits__paire { min-width: 0; }
.faits dt { font-family: var(--sans); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ivoire-faible); margin-bottom: .25rem; }
.faits dd { margin: 0; color: var(--ivoire); }

/* ---------- Le direct ---------- */
.direct {
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  background: rgba(192, 143, 53, .1); border: 1px solid var(--or-sombre);
  border-radius: var(--rayon); padding: .9rem 1.1rem; margin: 1.4rem 0 0;
}
.direct__pastille {
  width: .55rem; height: .55rem; border-radius: 50%; background: var(--or-clair);
  flex: 0 0 auto; align-self: center;
}
@media (prefers-reduced-motion: no-preference) {
  .direct__pastille { animation: direct-battement 2s ease-in-out infinite; }
}
@keyframes direct-battement { 50% { opacity: .25; transform: scale(.75); } }
.direct__mot { font-family: var(--sans); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: .78rem; color: var(--or-clair); }
.direct__note { font-size: .92rem; color: var(--ivoire-doux); }
#direct-heure { color: var(--ivoire-faible); }

/* ---------- Le programme ---------- */
.epreuves { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.2rem; counter-reset: epreuve; }
.epreuve { background: var(--encre-2); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 1.2rem 1.3rem; min-width: 0; }
.epreuve--classee { border-color: var(--ligne-forte); }
.epreuve__tete { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; margin-bottom: .9rem; }
.epreuve__rang { font-family: var(--serif); font-size: 1.1rem; color: var(--or-sombre); flex: 0 0 auto; }
.epreuve__nom { font-size: 1.15rem; margin: 0; }
.epreuve__meta { font-family: var(--sans); font-size: .84rem; color: var(--ivoire-faible); margin: 0; display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.epreuve__point { color: var(--ligne-forte); }
.epreuve__heure { color: var(--ivoire-doux); }
.epreuve__parcours { color: var(--or-sombre); }
.epreuve__attente { font-size: .92rem; color: var(--ivoire-faible); margin: 0; padding-left: 1rem; border-left: 2px solid var(--ligne); }
.programme-day { color: var(--or-clair); font-family: var(--serif); font-size: 1.2rem; padding-top: .6rem; }
.programme-slot { display: grid; grid-template-columns: minmax(5rem, auto) 1fr; gap: 1rem; padding: 1rem 1.3rem; border-left: 3px solid var(--or-sombre); background: rgba(192,143,53,.045); min-width: 0; }
.programme-slot > div { min-width: 0; }
.programme-slot__time { color: var(--or-clair); font-variant-numeric: tabular-nums; margin: 0; }
.programme-slot h3 { font-size: 1.05rem; margin: 0 0 .4rem; overflow-wrap: anywhere; }
.programme-slot__notes { margin: .6rem 0 0; color: var(--ivoire-doux); white-space: pre-line; overflow-wrap: anywhere; }
.programme-options { margin: 0 0 1rem; color: var(--ivoire-doux); font-size: .9rem; }
.programme-options summary { cursor: pointer; color: var(--or-clair); width: fit-content; }
.programme-options summary:focus-visible { outline: 2px solid var(--or-clair); outline-offset: 4px; }
.programme-options dl { display: grid; gap: .7rem 1.4rem; grid-template-columns: repeat(auto-fit,minmax(min(100%,13rem),1fr)); margin: .8rem 0; }
.programme-options dt { color: var(--ivoire-faible); font-size: .8rem; }
.programme-options dd { margin: .15rem 0 0; overflow-wrap: anywhere; white-space: pre-line; }
.classement__refus { display: block; }
@media (max-width: 28rem) { .programme-slot { grid-template-columns: 1fr; gap: .35rem; } }

/* ---------- Le classement ----------
   IL DÉFILE DANS SON PROPRE CADRE, jamais la page : un tableau de cinq colonnes
   sur un téléphone de 360 px déborderait sinon le document entier, et le
   défilement horizontal du corps est la faute la plus visible d'un site. */
.classement__cadre { overflow-x: auto; margin: 0 -.3rem; padding: 0 .3rem; }
/* L'INDICE DU DÉFILEMENT, SUR PETIT ÉCRAN SEULEMENT. Cinq colonnes ne tiennent
   pas dans 330 px, et un tableau qui se coupe sans le dire se lit comme un
   tableau incomplet. Une phrase vaut mieux qu'une ombre : elle se lit aussi à
   la voix, et elle ne demande aucun script. */
.classement__cadre::after {
  content: attr(data-scroll-hint);
  display: none; font-size: .78rem; color: var(--ivoire-faible);
  padding: .5rem .7rem 0; font-style: italic;
}
@media (max-width: 34rem) { .classement__cadre::after { display: block; } }
.classement { width: 100%; border-collapse: collapse; font-size: .93rem; min-width: 30rem; }
.classement th {
  font-family: var(--sans); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ivoire-faible); font-weight: 600; text-align: left;
  padding: 0 .7rem .55rem; border-bottom: 1px solid var(--ligne);
}
.classement td { padding: .6rem .7rem; border-bottom: 1px solid rgba(192, 143, 53, .08); vertical-align: baseline; }
.classement tr:last-child td { border-bottom: 0; }
.classement .num, .classement th.num { text-align: right; font-variant-numeric: tabular-nums; }

.classement__rang { width: 3rem; }
.classement__rang span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.8rem; height: 1.8rem; padding: 0 .35rem; border-radius: 999px;
  font-family: var(--sans); font-weight: 600; font-size: .9rem;
  border: 1px solid var(--ligne); color: var(--ivoire-doux);
}
.classement__ligne--p1 .classement__rang span { border-color: var(--or); background: var(--or); color: var(--encre); }
.classement__ligne--p2 .classement__rang span { border-color: #b9b2a6; color: #d8d2c7; }
.classement__ligne--p3 .classement__rang span { border-color: #a3764a; color: #c99a6d; }
.classement__cheval { color: var(--ivoire); }
.classement__cavalier { display: block; font-size: .82rem; color: var(--ivoire-faible); margin-top: .1rem; }
.classement__club { color: var(--ivoire-doux); font-size: .88rem; }
.classement__tu { color: var(--ivoire-faible); font-style: italic; }
.classement__refus { color: #d99c8e; font-size: .85rem; }

/* Une ligne qui vient d'arriver par le direct s'annonce, une fois. */
@media (prefers-reduced-motion: no-preference) {
  .classement__ligne--neuve { animation: ligne-neuve 2.4s ease-out; }
}
@keyframes ligne-neuve {
  0%   { background: rgba(192, 143, 53, .28); }
  100% { background: transparent; }
}

.vitrine-note {
  margin-top: 1.6rem; font-size: .88rem; color: var(--ivoire-faible);
  padding-left: 1rem; border-left: 2px solid var(--ligne-forte); max-width: 62ch;
}

/* ---------- L'appel du bas ---------- */
.vitrine-appel__interieur { display: grid; gap: 1.4rem; align-items: center; }
.vitrine-appel__interieur h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin-bottom: .7rem; }
.vitrine-appel__interieur p { color: var(--ivoire-doux); max-width: 56ch; margin: 0; }
.vitrine-appel__actions { display: flex; gap: .7rem; flex-wrap: wrap; }
@media (min-width: 56rem) {
  .vitrine-appel__interieur { grid-template-columns: 1.4fr auto; gap: 2.5rem; }
}

.programme-information { margin-block:1.5rem; padding:1.25rem; border:1px solid var(--ligne); border-radius:8px; overflow-wrap:anywhere; }
.programme-information img { float:right; width:80px; height:80px; object-fit:contain; margin:0 0 1rem 1rem; }
.programme-information h3 { margin-top:0; }
.programme-information dl { margin:0; display:grid; gap:1rem; }
.programme-information dt { font-weight:600; }
.programme-information dd { margin:.25rem 0 0; white-space:pre-wrap; }