/* ═══════════════════════════════════════════════════════════════════════════
   p-agenda.css — LE CALENDRIER DE LA SAISON & LE MUR DES CLUBS
   Direction ÉMAIL & ACIER · pages /agenda et /clubs

   Chargée DEPUIS les deux vues (même motif que fil.css) : un envoi FTP partiel
   ne peut pas laisser une page sans style, et app.css n'est pas touché.

   RÈGLE DE TENUE — aucune couleur nouvelle. Pas un seul hexadécimal ici : tout
   passe par les rôles du socle, qui sont déjà déclarés dans les DEUX lieux
   (Plein Cagnard et La Buvette). Les seules valeurs propres à ce fichier sont
   des GÉOMÉTRIES (largeur du rail, hauteur d'en-tête), et elles ne peuvent
   donc pas rater un thème.

   Les deux familles de fête :
     .pa-jour--fete      l'or en filet et en voile   (kermesse, férié, anniversaire)
     .pa-jour--nocturne  l'émail marine, l'or en lettre (semi-nocturne de 19 h)
     .pa-jour--finale    l'or en aplat — le sommet de la saison, une fois l'an
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Le rail de l'affiche (rapport 01 § 6) : la colonne de gauche ne bouge
     jamais d'une page à l'autre. Agenda = la date, classement = le rang. */
  --pa-rail: 4.5rem;

  /* Hauteur de l'en-tête collant. Le socle la posera un jour sous le nom
     --h-entete ; tant qu'elle n'existe pas, 62px est la valeur écrite dans
     app.css (.entete .enveloppe { min-height: 62px }). Le var(--h-entete, …)
     de chaque usage fait la bascule tout seul, sans rien à reprendre ici. */
  --pa-collant: calc(var(--h-entete, 62px) + var(--r2));
}

@layer pages {

  /* ═══════════════════════════════════════════════════ 1. L'EN-TÊTE DE PAGE ══
     La grammaire d'en-tête (rapport 03, P8) : une page de DONNÉE porte le
     bandeau d'émail, jamais l'or. L'or ne dit plus l'humeur, il dit qu'il se
     passe quelque chose maintenant. */

  .pa-surtitre { color: var(--sur-panneau-2); }

  .pa-chiffres {
    display: flex; flex-wrap: wrap; gap: var(--r2) var(--r5);
    margin-top: var(--r4); padding: 0; list-style: none;
    font-variant-numeric: tabular-nums;
  }
  .pa-chiffres > li { display: flex; align-items: baseline; gap: .4rem; min-width: 0; }
  .pa-chiffres b {
    font-family: var(--titre); font-weight: 900; font-size: 1.9rem; line-height: .9;
    letter-spacing: -.01em; color: var(--jaune);
  }
  .pa-chiffres span {
    font-size: .72rem; font-weight: 800; letter-spacing: .12em;
    text-transform: uppercase; color: var(--sur-panneau-2);
  }

  /* ══════════════════════════════════════════════════ 2. LES DEUX FILTRES ══
     Le type de date, et le mois. Deux rails horizontaux, même grammaire, pour
     qu'on n'ait qu'un geste à apprendre. */

  .pa-rail-filtres {
    display: flex; gap: var(--r2); flex-wrap: wrap;
    margin: 0; padding: 0; list-style: none;
  }

  .pa-puce {
    display: inline-flex; align-items: center; gap: .35rem;
    min-height: 40px; padding: .35rem .85rem;
    border: 1.5px solid var(--trait-2); border-radius: 999px;
    background: transparent; color: var(--encre);
    font-size: .85rem; font-weight: 700; text-decoration: none; white-space: nowrap;
  }
  .pa-puce:hover { border-color: var(--jaune); color: var(--encre); }
  .pa-puce[aria-current] {
    background: var(--panneau); border-color: var(--panneau); color: var(--jaune);
  }
  .pa-puce[aria-current]:hover { color: var(--jaune); }
  .pa-puce .pa-compte {
    font-variant-numeric: tabular-nums; font-weight: 800;
    color: var(--encre-2); font-size: .78rem;
  }
  .pa-puce[aria-current] .pa-compte { color: var(--sur-panneau-2); }

  /* Sur le bandeau d'émail, la puce inactive doit tenir sur le marine. */
  .banniere-bleue .pa-puce { border-color: var(--marine-500); color: var(--sur-panneau); }
  .banniere-bleue .pa-puce .pa-compte { color: var(--sur-panneau-2); }
  .banniere-bleue .pa-puce:hover { border-color: var(--jaune); color: var(--blanc); }
  .banniere-bleue .pa-puce[aria-current] {
    background: var(--jaune); border-color: var(--jaune); color: var(--bleu-nuit);
  }
  .banniere-bleue .pa-puce[aria-current] .pa-compte { color: var(--or-950); }

  /* Le rail des mois : la saison entière en douze pastilles, qui défile au
     doigt. scroll-snap en « proximity » et non « mandatory » : on ne reprend
     jamais la main sur un geste que le joueur a commencé. */
  .pa-mois-rail {
    display: flex; gap: var(--r2);
    margin: 0; padding: var(--r1) var(--r1) var(--r3);
    list-style: none; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }
  .pa-mois-rail > li { scroll-snap-align: start; flex: none; }
  .pa-mois-rail .pa-puce { min-height: 44px; }
  .pa-mois-rail .pa-puce[data-passe] { color: var(--encre-2); border-color: var(--trait); }
  .pa-mois-rail .pa-puce[data-passe]:hover { color: var(--encre); }

  /* ════════════════════════════════════════════ 3. LES TITRES DE SECTION ══ */

  .pa-tete {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--r3); flex-wrap: wrap;
    margin-bottom: var(--r4);
  }
  .pa-tete h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
  .pa-tete p { margin: 0; color: var(--encre-2); font-size: .88rem; }

  /* L'en-tête de mois colle sous l'en-tête du site : on sait toujours dans
     quel mois on lit, même au milieu de quarante-six dates. Il porte un fond
     opaque, sinon les lignes défileraient derrière lui. */
  .pa-mois {
    position: sticky; top: var(--h-entete, 62px); z-index: 20;
    display: flex; align-items: center; gap: var(--r3);
    margin: var(--r5) 0 var(--r2);
    padding: var(--r2) 0;
    background: var(--sol);
    font-family: var(--titre); font-weight: 800;
    font-size: 1.45rem; line-height: 1; letter-spacing: -.01em;
    text-transform: uppercase; color: var(--encre-accent);
    scroll-margin-top: var(--pa-collant);
  }
  .pa-mois::before {
    content: ""; width: 6px; height: 1.3em; flex: none;
    background: var(--jaune); border-radius: 2px;
  }
  .pa-mois .pa-mois-compte {
    margin-left: auto;
    font-family: var(--texte); font-weight: 700; font-size: .74rem;
    letter-spacing: .1em; color: var(--encre-2);
  }
  .pa-mois[data-passe]::before { background: var(--trait-2); }

  /* ════════════════════════════════════════════════ 4. LA LIGNE DE JOURNÉE ══
     Trois pistes : le rail (la date), le corps (ce que c'est), le comptoir
     (l'état, la drache, la distance). Le rail ne bouge jamais : c'est lui qui
     rend la page lisible en diagonale. */

  .pa-jours { display: flex; flex-direction: column; gap: var(--r2); }

  .pa-jour {
    display: grid;
    grid-template-columns: var(--pa-rail) minmax(0, 1fr) minmax(0, auto);
    align-items: center;
    gap: var(--r3) var(--r4);
    padding: var(--r3) var(--r4) var(--r3) var(--r3);
    background: var(--carte);
    border: 1px solid var(--trait);
    border-left: 4px solid var(--trait-2);
    border-radius: var(--arrondi);
    color: inherit; text-decoration: none;
    scroll-margin-top: var(--pa-collant);
  }
  .pa-jour > * { min-width: 0; }
  .pa-jour:hover { border-color: var(--jaune); border-left-color: var(--jaune); color: inherit; }
  .pa-jour:focus-visible { border-left-color: var(--jaune); }

  @media (prefers-reduced-motion: no-preference) {
    .pa-jour { transition: border-color var(--duree-1) var(--sortant); }
  }

  /* — le rail : la date, et rien d'autre — */
  .pa-date { text-align: center; line-height: 1; }
  .pa-date .pa-j {
    display: block;
    font-family: var(--titre); font-weight: 900; font-size: 2.1rem; line-height: .86;
    letter-spacing: -.02em; font-variant-numeric: tabular-nums;
    color: var(--encre-accent);
  }
  .pa-date .pa-s {
    display: block; margin-top: .2rem;
    font-size: .62rem; font-weight: 800; letter-spacing: .12em;
    text-transform: uppercase; color: var(--encre-2);
  }

  /* — le corps — */
  .pa-corps { display: flex; flex-direction: column; gap: .3rem; }
  .pa-titre {
    font-weight: 700; font-size: 1.02rem; line-height: 1.25;
    text-wrap: balance;
  }
  .pa-info {
    font-size: .84rem; color: var(--encre-2);
    display: flex; flex-wrap: wrap; gap: .1rem .45rem;
  }
  .pa-info .pa-sep { color: var(--trait-2); }

  /* Le badge de fête : il NOMME. Une couleur qui ne dit pas son nom ne dit
     rien à un joueur qui lit la page une fois par mois. */
  .pa-fete {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: .35rem;
    margin-top: .15rem; padding: .16rem .55rem;
    border-radius: 999px;
    background: var(--jaune-voile); color: var(--jaune-profond);
    font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    white-space: nowrap;
  }
  .pa-fete::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none;
    background: var(--jaune);
  }

  /* — le comptoir : l'état, la météo, la distance — */
  .pa-comptoir {
    display: flex; flex-direction: column; align-items: flex-end; gap: .35rem;
    text-align: right;
  }
  .pa-etats { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .3rem; }

  .pa-delai {
    font-size: .72rem; font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase; color: var(--encre-2);
    font-variant-numeric: tabular-nums;
  }

  .pa-meteo, .pa-loin {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .8rem; font-weight: 700; color: var(--encre-2);
    font-variant-numeric: tabular-nums;
  }
  .pa-meteo .pa-signe { flex: none; }

  /* La drache prend le marine — l'eau, l'émail. Le cagnard prend le bronze :
     c'est le SEUL or qui a le droit d'être une lettre sur fond clair. */
  .pa-meteo--drache  { color: var(--bleu-texte); }
  .pa-meteo--cagnard { color: var(--jaune-profond); }

  /* La phrase de comptoir, sous la ligne de la prochaine journée seulement. */
  .pa-drache-mot {
    grid-column: 1 / -1;
    margin: 0; padding-top: var(--r2);
    border-top: 1px dashed var(--trait);
    font-size: .88rem; font-weight: 600; color: var(--encre-2);
    text-wrap: pretty;
  }

  /* — les trois familles de fête — */

  /* Kermesse, lundi de Pâques, lundi de Pentecôte, anniversaire de club :
     l'or en FILET et en VOILE. Jamais l'or en lettre sur fond clair. */
  .pa-jour--fete {
    border-left-color: var(--jaune);
    background: linear-gradient(90deg,
                var(--jaune-voile) 0, var(--jaune-voile) 14%, var(--carte) 62%);
  }

  /* La semi-nocturne de 19 h : l'émail. Le seul fond marine du calendrier,
     et il tombe pile sur les deux soirées d'été du circuit. */
  .pa-jour--nocturne {
    background: var(--panneau);
    border-color: var(--panneau); border-left-color: var(--jaune);
    color: var(--sur-panneau);
  }
  .pa-jour--nocturne .pa-date .pa-j { color: var(--jaune); }
  .pa-jour--nocturne .pa-date .pa-s,
  .pa-jour--nocturne .pa-info,
  .pa-jour--nocturne .pa-delai,
  .pa-jour--nocturne .pa-meteo,
  .pa-jour--nocturne .pa-loin { color: var(--sur-panneau-2); }
  .pa-jour--nocturne .pa-info .pa-sep { color: var(--marine-500); }
  .pa-jour--nocturne .pa-titre { color: var(--blanc); }
  .pa-jour--nocturne .pa-fete { background: var(--marine-750); color: var(--or-300); }
  .pa-jour--nocturne .pa-drache-mot { border-top-color: var(--marine-600); color: var(--sur-panneau-2); }
  .pa-jour--nocturne:hover { border-color: var(--jaune); }

  /* La finale : l'or en aplat. Une fois l'an, et c'est tout. */
  .pa-jour--finale {
    background: var(--jaune);
    border-color: var(--jaune-profond); border-left-color: var(--bleu-nuit);
    color: var(--bleu-nuit);
  }
  .pa-jour--finale .pa-date .pa-j,
  .pa-jour--finale .pa-titre { color: var(--bleu-nuit); }
  .pa-jour--finale .pa-date .pa-s,
  .pa-jour--finale .pa-info,
  .pa-jour--finale .pa-delai,
  .pa-jour--finale .pa-loin { color: var(--or-950); }
  .pa-jour--finale .pa-info .pa-sep { color: var(--or-900); }
  .pa-jour--finale .pa-fete { background: var(--bleu-nuit); color: var(--jaune); }
  .pa-jour--finale .pa-fete::before { background: var(--jaune); }
  .pa-jour--finale:hover { border-color: var(--bleu-nuit); border-left-color: var(--bleu-nuit); }

  /* Ce qui est joué s'efface, sans jamais devenir illisible : 4,5:1 tenu. */
  .pa-jour--passee { background: var(--sol-2); border-left-color: var(--trait); }
  .pa-jour--passee .pa-date .pa-j { color: var(--encre-2); }
  .pa-jour--passee .pa-titre { font-weight: 600; }

  /* La prochaine journée du circuit : le seul objet de ces deux pages qui
     porte l'acier. Une boule, une seule — c'est elle qui dit « c'est ici ».
     Elle est posée dans le rail, au-dessus de la date : aucun position:absolute,
     donc aucune dépendance à un ancêtre positionné. */
  .pa-jour--prochaine { border-left-color: var(--jaune); box-shadow: var(--ombre-2); }
  .pa-boule { display: none; }
  .pa-jour--prochaine .pa-boule {
    display: block; width: 22px; height: 22px; margin: 0 auto .3rem;
    border-radius: 50%;
    background: var(--acier); box-shadow: var(--acier-ombre);
  }

  /* ═════════════════════════════════════════════════════ 5. L'ÉTAT VIDE ══
     Le cercle tracé au pied dans le gravier. Un état vide qui ne propose rien
     est une impasse : celui-ci a toujours une sortie. */

  .pa-vide {
    display: grid; justify-items: center; text-align: center;
    gap: var(--r3); padding: var(--r7) var(--r5);
    background: var(--carte);
    border: 1.5px dashed var(--trait-2);
    border-radius: var(--arrondi-2);
  }
  .pa-vide h3 { font-size: 1.4rem; color: var(--encre); }
  .pa-vide p { margin: 0; max-width: 44ch; color: var(--encre-2); text-wrap: pretty; }
  .pa-vide .pa-cercle {
    width: 56px; height: 56px; border-radius: 50%;
    border: 3px solid var(--trait-2);
    border-bottom-color: transparent;
    transform: rotate(-24deg);
  }

  /* ══════════════════════════════════════════════ 6. LE MUR DES CLUBS ══════
     Douze villages d'Ardenne et de Gaume. La carte dit ce que le club FAIT,
     pas seulement où il est. */

  .pa-mur {
    display: grid; gap: var(--r4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  }
  .pa-mur > * { min-width: 0; }

  .pa-club {
    display: flex; flex-direction: column; gap: var(--r3);
    padding: var(--r4);
    background: var(--carte);
    border: 1px solid var(--trait);
    border-top: 4px solid var(--trait-2);
    border-radius: var(--arrondi-2);
    scroll-margin-top: var(--pa-collant);
  }
  .pa-club--moi { border-top-color: var(--jaune); box-shadow: var(--ombre-2); }

  .pa-club-tete { display: flex; align-items: flex-start; gap: var(--r2); flex-wrap: wrap; }
  .pa-club h3 {
    font-family: var(--titre); font-weight: 800;
    font-size: clamp(1.4rem, 2.4vw, 1.7rem); line-height: .95; letter-spacing: -.012em;
    color: var(--encre-accent); text-transform: uppercase;
  }
  .pa-club-ville {
    font-size: .74rem; font-weight: 800; letter-spacing: .12em;
    text-transform: uppercase; color: var(--encre-2);
  }

  /* Le poids : une barre, un chiffre, une phrase. La barre est décorative —
     le nombre est écrit à côté, elle n'est jamais seule porteuse. */
  .pa-poids { display: flex; flex-direction: column; gap: .35rem; }
  .pa-poids-ligne {
    display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
    font-variant-numeric: tabular-nums;
  }
  .pa-poids-ligne b {
    font-family: var(--titre); font-weight: 900; font-size: 1.7rem; line-height: .9;
    color: var(--encre);
  }
  .pa-poids-ligne span { font-size: .82rem; color: var(--encre-2); }
  .pa-jauge {
    height: 10px; border-radius: 999px;
    background: var(--chart-or-voile);
    box-shadow: inset 0 0 0 1px var(--trait);
    overflow: hidden;
  }
  .pa-jauge > i {
    display: block; height: 100%;
    width: var(--part, 0%);
    background: var(--chart-or);
    box-shadow: inset 0 0 0 1px var(--chart-or-trait);
    border-radius: 999px;
  }

  .pa-club-faits {
    display: grid; gap: .45rem;
    margin: 0; padding: var(--r3) 0 0;
    border-top: 1px solid var(--trait);
    font-size: .88rem;
  }
  .pa-club-faits > div { display: flex; align-items: baseline; gap: .5rem; }
  .pa-club-faits dt {
    flex: none; min-width: 7.5rem;
    font-size: .68rem; font-weight: 800; letter-spacing: .1em;
    text-transform: uppercase; color: var(--encre-2);
  }
  .pa-club-faits dd { margin: 0; min-width: 0; font-variant-numeric: tabular-nums; }

  .pa-club-prochaine {
    display: flex; align-items: center; gap: var(--r2);
    padding: var(--r2) var(--r3);
    border-radius: var(--arrondi);
    background: var(--jaune-voile);
    color: var(--encre); text-decoration: none;
    font-size: .86rem; font-weight: 700;
  }
  .pa-club-prochaine:hover { color: var(--encre); box-shadow: inset 0 0 0 1.5px var(--jaune); }
  .pa-club-prochaine .pa-quand {
    margin-left: auto; flex: none;
    font-size: .72rem; font-weight: 800; letter-spacing: .06em;
    text-transform: uppercase; color: var(--encre-2);
  }

  .pa-club-pied {
    margin-top: auto; padding-top: var(--r3);
    border-top: 1px solid var(--trait);
    font-size: .82rem; color: var(--encre-2);
    display: flex; flex-direction: column; gap: .3rem;
  }
  .pa-club-pied a { font-weight: 600; }

  /* La ligne qui remet les petits clubs debout. Elle n'est pas décorative. */
  .pa-mur-mot {
    margin: var(--r5) 0 0; padding-top: var(--r4);
    border-top: 1px solid var(--trait);
    color: var(--encre-2); font-size: .9rem; max-width: 68ch; text-wrap: pretty;
  }

  /* ════════════════════════════════════ 7. LE TABLEAU DES CLUBS (rappel) ══ */

  .pa-tableau-note { color: var(--encre-2); font-size: .82rem; max-width: 68ch; text-wrap: pretty; }
  .pa-tableau-note:first-of-type { margin-top: var(--r3); }
  .tableau .pa-moi-club td { background: var(--jaune-voile); }
  .tableau .pa-moi-club td:first-child { box-shadow: inset 3px 0 0 var(--jaune); }

  /* ═══════════════════════════════════════════════ 8. LES LARGEURS ══════ */

  @media (max-width: 46rem) {
    :root { --pa-rail: 3.4rem; }

    .pa-jour {
      grid-template-columns: var(--pa-rail) minmax(0, 1fr);
      padding: var(--r3);
      gap: var(--r2) var(--r3);
    }
    /* Le comptoir tombe sous le corps, jamais sous le rail : la date garde
       sa colonne, et l'œil garde son point d'entrée. */
    .pa-comptoir {
      grid-column: 2; text-align: left;
      flex-direction: row; flex-wrap: wrap; align-items: center; gap: .35rem .6rem;
    }
    .pa-etats { justify-content: flex-start; }
    .pa-date .pa-j { font-size: 1.75rem; }
    .pa-titre { font-size: .98rem; }
    .pa-club-faits dt { min-width: 6.5rem; }
    .pa-mois { font-size: 1.25rem; }
  }

  @media (max-width: 30rem) {
    .pa-club-faits > div { flex-direction: column; gap: .1rem; }
    .pa-club-faits dt { min-width: 0; }
  }

  /* ══════════════════════════════════════════════════════ 9. LE PAPIER ══════
     Le calendrier finit punaisé au mur de la buvette. Rien ne colle, rien ne
     tombe en aplat sombre : la fête se lit alors à son filet et à son mot. */

  @media print {
    .pa-mois { position: static; background: transparent; }
    .pa-mois-rail, .pa-rail-filtres, .pa-boule { display: none !important; }
    .pa-jour {
      break-inside: avoid; box-shadow: none;
      border: 1px solid #999; border-left-width: 4px;
    }
    .pa-jour--nocturne, .pa-jour--finale, .pa-jour--fete {
      background: transparent !important; color: #000 !important;
    }
    .pa-jour--nocturne .pa-titre, .pa-jour--nocturne .pa-date .pa-j,
    .pa-jour--finale .pa-titre, .pa-jour--finale .pa-date .pa-j { color: #000 !important; }
    .pa-jour--nocturne .pa-info, .pa-jour--nocturne .pa-date .pa-s,
    .pa-jour--finale .pa-info, .pa-jour--finale .pa-date .pa-s { color: #333 !important; }
    .pa-fete { background: transparent !important; color: #000 !important; box-shadow: inset 0 0 0 1px #666; }
    .pa-club { break-inside: avoid; box-shadow: none; }
    .pa-mur { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
}