/* =====================================================================
   Club du Lundi — page d'accueil publique
   Palette : craie sauge / encre olive / laiton. Un seul accent, le laiton,
   réservé au soleil et aux repères de saison.
   La photographie se remplace à un seul endroit : .plate (voir REMPLACER).
   ===================================================================== */

:root {
  --ground:      #edf0ea;
  --ground-soft: #f6f8f3;
  --ink:         #12160f;
  --ink-soft:    #4e574a;
  --ink-faint:   #7c8676;
  --rule:        #ccd3c4;
  --rule-strong: #aab29f;
  --accent:      #8a5a12;
  --accent-soft: #c9a25a;
  --accent-2:    #2f6b4f;   /* le vert de l'index CDL, à côté du brun officiel */
  --sky-1:       #cfd9dd;
  --sky-2:       #e6dcc8;
  --ridge-far:   #9aa7a4;
  --ridge-near:  #5f6f64;
  --turf-1:      #7e9463;
  --turf-2:      #566b41;
  --alerte:      #8c2f21;
  --shadow:      0 1px 0 rgba(18, 22, 15, .06);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:      #10130e;
    --ground-soft: #171b15;
    --ink:         #e6ebdf;
    --ink-soft:    #9aa492;
    --ink-faint:   #6d7767;
    --rule:        #2b3127;
    --rule-strong: #3d4537;
    --accent:      #d6a44a;
    --accent-soft: #7d6430;
    --accent-2:    #7fbe9a;
    --sky-1:       #1d262b;
    --sky-2:       #37301f;
    --ridge-far:   #2a3433;
    --ridge-near:  #1b241e;
    --turf-1:      #2c3a24;
    --turf-2:      #1c2717;
    --alerte:      #e08b78;
    --shadow:      0 1px 0 rgba(0, 0, 0, .4);
  }
}

:root[data-theme="dark"] {
  --ground:      #10130e;
  --ground-soft: #171b15;
  --ink:         #e6ebdf;
  --ink-soft:    #9aa492;
  --ink-faint:   #6d7767;
  --rule:        #2b3127;
  --rule-strong: #3d4537;
  --accent:      #d6a44a;
  --accent-soft: #7d6430;
  --accent-2:    #7fbe9a;
  --sky-1:       #1d262b;
  --sky-2:       #37301f;
  --ridge-far:   #2a3433;
  --ridge-near:  #1b241e;
  --turf-1:      #2c3a24;
  --turf-2:      #1c2717;
  --alerte:      #e08b78;
  --shadow:      0 1px 0 rgba(0, 0, 0, .4);
}

/* =====================================================================
   Socle commun aux pages de l'espace membres.
   La page d'accueil garde ses propres règles ; tout le reste vit ici.
   ===================================================================== */

* { box-sizing: border-box; }

/* Sans cela, toute règle `display:` d'une classe l'emporterait sur l'attribut
   `hidden` du navigateur, et les blocs masqués resteraient visibles. */
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100svh;
  background: var(--ground);
  color: var(--ink);
  font-family: Karla, ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.mono, .etiquette, .bar a, .monogram, .note, .menu a {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}

/* ---------- Bandeau ---------- */

.bar {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: clamp(1rem, 2.4vw, 1.6rem) clamp(1.15rem, 4vw, 3rem);
  border-bottom: 1px solid var(--rule);
}
.monogram {
  font-size: .8rem; font-weight: 500; letter-spacing: .34em; text-indent: .34em;
  color: var(--ink); text-decoration: none;
}
.menu {
  display: flex; flex-wrap: wrap; justify-content: flex-end;
  gap: .5rem clamp(.9rem, 2.4vw, 1.8rem); align-items: baseline;
}
.menu a {
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  text-decoration: none; color: var(--ink-soft);
  padding-bottom: 2px; border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.menu a:hover, .menu a[aria-current="page"] { color: var(--accent); border-color: var(--accent); }

/* Sur un téléphone, le bandeau se replie : le monogramme d'un côté, le menu
   de l'autre, sur deux lignes si nécessaire. Sans cela les quatre liens
   dépassaient la largeur de l'écran et décalaient toute la page. */
@media (max-width: 560px) {
  .bar { padding-inline: 1.15rem; gap: .5rem; }
  .menu { gap: .35rem .9rem; }
  .menu a { font-size: .66rem; letter-spacing: .12em; }
  .monogram { font-size: .72rem; letter-spacing: .28em; text-indent: .28em; }
}

/* ---------- Structure ---------- */

.page {
  max-width: 68rem; margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.6rem) clamp(1.15rem, 4vw, 3rem) 5rem;
  display: flex; flex-direction: column; gap: clamp(1.8rem, 4vw, 3rem);
}
.page--etroite { max-width: 30rem; }

h1 {
  margin: 0;
  font-family: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  font-weight: 800; letter-spacing: -.03em; line-height: .95;
  font-size: clamp(2.1rem, 5vw, 3.2rem);
  text-wrap: balance;
}
h2 {
  margin: 0;
  font-family: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  font-weight: 600; font-size: 1.12rem; letter-spacing: -.01em;
}
.etiquette {
  display: block;
  font-size: .66rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-faint);
}
.note { font-size: .72rem; letter-spacing: .06em; color: var(--ink-faint); }
.lede { margin: 0; color: var(--ink-soft); max-width: 42ch; }

.bloc {
  border: 1px solid var(--rule);
  background: var(--ground-soft);
  padding: clamp(1.2rem, 3vw, 1.8rem);
  display: flex; flex-direction: column; gap: 1.1rem;
}
.bloc__tete { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: clamp(1.2rem, 3vw, 1.8rem); }

/* ---------- Formulaires ---------- */

.champ { display: flex; flex-direction: column; gap: .38rem; }
.champ input, .champ select {
  font: inherit; color: var(--ink);
  background: var(--ground);
  border: 1px solid var(--rule-strong); border-radius: 2px;
  padding: .7rem .8rem;
  font-variant-numeric: tabular-nums;
}
.champ input:focus-visible { border-color: var(--accent); }
.champ input[aria-invalid="true"] { border-color: var(--alerte); }
.ligne { display: flex; gap: .7rem; flex-wrap: wrap; align-items: flex-end; }
.ligne > .champ { flex: 1 1 8rem; }

.bouton {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .76rem; letter-spacing: .14em; text-transform: uppercase;
  padding: .82rem 1.5rem; border-radius: 2px; cursor: pointer;
  border: 1px solid var(--ink); background: var(--ink); color: var(--ground);
  transition: opacity .2s ease;
}
.bouton:hover { opacity: .85; }
.bouton[disabled] { opacity: .45; cursor: default; }
.bouton--discret { background: transparent; color: var(--ink-soft); border-color: var(--rule-strong); }
.bouton--discret:hover { color: var(--accent); border-color: var(--accent); opacity: 1; }
.bouton--danger { background: transparent; color: var(--alerte); border-color: var(--alerte); }

.message { padding: .85rem 1rem; border-left: 2px solid var(--rule-strong); font-size: .92rem; }
.message--erreur { border-color: var(--alerte); color: var(--alerte); }
.message--ok { border-color: var(--accent); color: var(--ink-soft); }

/* ---------- Données ---------- */

.valeur {
  font-family: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  font-size: clamp(1.8rem, 4.5vw, 2.6rem); line-height: 1;
}
.valeur--accent { color: var(--accent); }
.valeur--cdl    { color: var(--accent-2); }

table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { padding: .5rem .6rem; text-align: right; border-bottom: 1px solid var(--rule); }
th:first-child, td:first-child { text-align: left; padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; }
thead th {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-weight: 400; font-size: .64rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-faint); border-bottom-color: var(--rule-strong);
}
tbody tr:last-child td { border-bottom: 0; }
td.recoit { color: var(--accent); font-weight: 600; }

.defilable {
  overflow-x: auto;
  /* Sans cela, un tableau plus large que l'écran étire la page entière. */
  max-width: 100%;
}
.defilable > table { min-width: max-content; }

/* ---------- Photo ---------- */

.portrait {
  width: 116px; height: 116px; border-radius: 50%;
  object-fit: cover; background: var(--rule);
  border: 1px solid var(--rule-strong);
}
.portrait--vide {
  display: grid; place-items: center;
  font-family: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  font-size: 2rem; font-weight: 600; color: var(--ink-faint);
}

.squelette { opacity: .35; }

/* =====================================================================
   L'histoire d'un joueur — partagée entre sa propre fiche et celle
   qu'un autre membre consulte.
   ===================================================================== */

/* Un libellé, un chiffre dessous, centrés l'un sur l'autre. Alignés à gauche
   sous une étiquette longue, les chiffres flottaient loin de ce qu'ils
   nommaient. Les cases partagent leurs traits : un filet d'un pixel, et le
   fond du bloc qui transparaît entre elles. */
.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
            gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.chiffre { background: var(--ground); padding: 1rem 1.1rem; text-align: center; }
.chiffre b, .chiffre .valeur {
  display: block; margin: .45rem 0 0;
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 600;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem); letter-spacing: -.03em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.chiffre.accent b { color: var(--accent); }
.chiffre .etiquette { letter-spacing: .14em; }
.chiffre .sous, .chiffre__note {
  display: block; margin-top: .4rem; font-size: .72rem; color: var(--ink-faint);
}

/* ---- le choix de la saison, en tête de fiche ---- */
.saisons-choix {
  display: flex; gap: .4rem; flex-wrap: wrap;
  margin: 0 0 1.1rem;
}
.saisons-choix .annee-choix { font-size: .78rem; padding: .45rem .9rem; }
.saison-ligne { cursor: pointer; }
.saison-ligne:hover td { background: var(--ground-soft); }
.saison-ligne:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.saison-ligne--active td { background: var(--ground-soft); }
.saison-ligne--active td:first-child { box-shadow: inset 2px 0 0 var(--accent); }

/* ---- la courbe d'index ---- */
.sparkline svg { display: block; width: 100%; height: auto; overflow: visible; }
.sparkline path { fill: none; stroke: var(--accent); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.sparkline .aire { fill: var(--accent); opacity: .08; stroke: none; }
.sparkline circle { fill: var(--ground); stroke: var(--accent); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.sparkline text {
  font-family: "IBM Plex Mono", monospace; font-size: 13px;
  fill: var(--ink-faint); letter-spacing: .08em;
}

/* ---- les cartes ---- */
.carte-ligne {
  display: grid; grid-template-columns: 5.5rem 1fr auto auto;
  gap: .8rem; align-items: baseline; width: 100%; text-align: left;
  padding: .7rem 0; border-bottom: 1px solid var(--rule);
  background: none; border-left: 0; border-right: 0; border-top: 0;
  font: inherit; color: inherit; cursor: pointer;
}
.carte-ligne:hover { background: var(--ground-soft); }
.carte-ligne__date {
  font-family: "IBM Plex Mono", monospace; font-size: .76rem;
  color: var(--ink-soft); font-variant-numeric: tabular-nums;
}
.carte-ligne__lieu { color: var(--ink-soft); font-size: .88rem; }
.carte-ligne__brut {
  font-family: "IBM Plex Mono", monospace; font-size: .76rem; color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.carte-ligne__pts {
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 600;
  font-size: 1.25rem; color: var(--accent); font-variant-numeric: tabular-nums;
  min-width: 2.4rem; text-align: right;
}
.carte-ligne--retenue .carte-ligne__date::before {
  content: "★ "; color: var(--accent);
}

.carte-detail { padding: .3rem 0 1.1rem; border-bottom: 1px solid var(--rule); }
.carte-grille { border-collapse: collapse; }
.carte-grille th, .carte-grille td {
  border: 1px solid var(--rule); padding: .3rem .55rem; text-align: center;
  font-variant-numeric: tabular-nums; font-size: .84rem;
}
.carte-grille th {
  font-family: "IBM Plex Mono", monospace; font-weight: 400;
  font-size: .62rem; letter-spacing: .1em; color: var(--ink-faint); text-align: right;
}
.carte-grille td.rendu { position: relative; }
.carte-grille td.rendu::after {
  content: "•"; position: absolute; top: -2px; right: 2px;
  color: var(--accent); font-size: .7rem;
}
.carte-grille td.birdie { color: var(--accent); font-weight: 600; }
.carte-grille td.total { background: var(--ground-soft); font-weight: 600; }

/* ---- le graphique des résultats de la saison ---- */
.graphe svg { display: block; width: 100%; height: auto; overflow: visible; }
.g-grille { stroke: var(--rule); stroke-width: 1; vector-effect: non-scaling-stroke; }
.g-barre { fill: var(--accent); opacity: .22; }
.g-barre--retenue { opacity: 1; }
.g-barre:hover { opacity: .7; }
.g-barre--retenue:hover { opacity: .85; }
.g-moyenne { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.g-legende {
  font-family: "IBM Plex Mono", monospace; font-size: 14px;
  fill: var(--ink-faint); letter-spacing: .08em;
}
.g-date {
  font-family: "IBM Plex Mono", monospace; font-size: 13px;
  fill: var(--ink-faint); letter-spacing: .04em;
}
.annees { display: flex; gap: .3rem; }
.annee-choix {
  font-family: "IBM Plex Mono", monospace; font-size: .7rem; letter-spacing: .1em;
  background: none; border: 1px solid var(--rule-strong); border-radius: 2px;
  color: var(--ink-soft); padding: .3rem .6rem; cursor: pointer;
}
.annee-choix[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }

/* ---- la grille de saisie d'un parcours ---- */
.grille-trous { border-collapse: collapse; }
.grille-trous th, .grille-trous td { border: 1px solid var(--rule); padding: 2px; text-align: center; }
.grille-trous thead th {
  font-family: "IBM Plex Mono", monospace; font-size: .62rem;
  letter-spacing: .06em; color: var(--ink-faint); padding: .3rem;
}
.grille-trous tbody th {
  font-family: "IBM Plex Mono", monospace; font-size: .62rem; font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint);
  text-align: right; padding: .3rem .6rem; white-space: nowrap;
}
.grille-trous input {
  width: 2.6rem; border: 0; background: transparent; text-align: center;
  font: inherit; font-size: .9rem; color: var(--ink); padding: .3rem 0;
  font-variant-numeric: tabular-nums; -moz-appearance: textfield;
}
.grille-trous input::-webkit-outer-spin-button,
.grille-trous input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.grille-trous td:focus-within { box-shadow: inset 0 0 0 1px var(--accent); }

/* ---- le toast : une confirmation visible, où que l'on soit dans la page ---- */
.toast {
  position: fixed; left: 50%; bottom: 1.6rem; z-index: 100;
  transform: translateX(-50%) translateY(12px);
  max-width: min(92vw, 34rem);
  padding: .85rem 1.2rem; border-radius: 3px;
  background: var(--ink); color: var(--ground);
  font-size: .92rem; line-height: 1.45;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast--erreur { background: var(--alerte); color: #fff; }
.toast--ok::before { content: "✓  "; color: var(--accent-soft); }
.bouton[aria-busy="true"] { opacity: .6; cursor: progress; }

.bouton--armer { background: var(--accent); border-color: var(--accent); color: #fff; }

/* =====================================================================
   La notation des cartes de score, comme sur le papier :
   cercle pour un birdie, double cercle pour un eagle,
   carré pour un bogey, double carré au-delà. Le par ne porte rien.
   ===================================================================== */

.score {
  display: inline-grid; place-items: center;
  width: 1.75em; height: 1.75em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.score--birdie {
  border: 1.5px solid var(--accent); border-radius: 50%;
  color: var(--accent); font-weight: 600;
}
.score--eagle {
  border: 1.5px solid var(--accent); border-radius: 50%;
  color: var(--accent); font-weight: 600;
  box-shadow: 0 0 0 1.5px var(--ground), 0 0 0 3px var(--accent);
}
.score--bogey {
  border: 1.5px solid var(--rule-strong); border-radius: 2px;
}
.score--double {
  border: 1.5px solid var(--rule-strong); border-radius: 2px;
  box-shadow: 0 0 0 1.5px var(--ground), 0 0 0 3px var(--rule-strong);
}
.score--vide { color: var(--ink-faint); }

/* Dans un tableau, il faut un peu d'air pour que les doubles anneaux respirent. */
td:has(> .score--eagle), td:has(> .score--double) { padding-block: .5rem; }

.legende-score {
  display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; align-items: center;
  font-family: "IBM Plex Mono", monospace; font-size: .66rem;
  letter-spacing: .08em; color: var(--ink-faint);
}
.legende-score span { display: flex; align-items: center; gap: .4rem; }
.legende-score .score { font-size: .8rem; }

/* ---- les cases éditables d'un tableau d'administration ---- */
.cellule {
  font: inherit; font-size: .88rem; color: var(--ink);
  background: transparent; border: 1px solid transparent; border-radius: 2px;
  padding: .3rem .4rem; width: 100%; min-width: 5rem;
  transition: border-color .15s ease, background .3s ease;
}
.cellule:hover { border-color: var(--rule); }
.cellule:focus { border-color: var(--accent); background: var(--ground); outline: none; }
.cellule--manquante { border-color: var(--alerte); background: color-mix(in srgb, var(--alerte) 6%, transparent); }
.cellule--ok { background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: var(--accent); }
.cellule--erreur { border-color: var(--alerte); background: color-mix(in srgb, var(--alerte) 12%, transparent); }
.cellule:disabled { opacity: .5; }

/* --- Calque de rappel -------------------------------------------------------
   Un calque dessiné par la page, et non une boîte de dialogue du navigateur :
   un réglage peut faire disparaître confirm() sans le moindre message, et le
   rappel ne serait jamais vu. Ici, si le CSS charge, le calque s'affiche.
   Un clic à côté ou la touche Échap le referment — on ne piège personne. */
.calque {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: 1.2rem;
  background: rgba(18, 22, 15, .55);
  backdrop-filter: blur(2px);
  animation: calque-entre .18s ease-out;
}
.calque__boite {
  width: min(30rem, 100%);
  background: var(--ground);
  border: 1px solid var(--rule-strong);
  border-radius: 3px;
  box-shadow: 0 18px 48px rgba(18, 22, 15, .28);
  padding: 1.5rem 1.4rem 1.2rem;
  display: flex; flex-direction: column; gap: .8rem;
  max-height: calc(100dvh - 2.4rem); overflow: auto;
}
.calque__boite h2 { margin: 0; font-size: 1.2rem; }
.calque__pied { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: flex-end; }
@keyframes calque-entre { from { opacity: 0 } to { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .calque { animation: none } }

/* Les touches et les exemples de frappe, dans les notes d'aide. */
code, kbd {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .92em; letter-spacing: .06em;
  background: var(--ground-soft); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 2px;
  padding: .08em .38em;
}

/* --- Les sorties -------------------------------------------------------------
   Une carte par sortie ou par séjour : la date d'abord, parce que c'est ce
   qu'on cherche, puis le nom, le lieu, et ce qu'il y a dedans. */
.sortie-carte {
  display: block; text-decoration: none; color: inherit;
  padding: 1rem 0; border-bottom: 1px solid var(--rule);
}
.sortie-carte:hover { background: var(--ground-soft); }
.sortie-carte__quand {
  font-family: "IBM Plex Mono", monospace; font-size: .68rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint);
}
.sortie-carte__titre { display: block; font-size: 1.15rem; margin: .2rem 0 .1rem; }
.sortie-carte__lieu { display: block; color: var(--ink-soft); font-size: .92rem; }
.sortie-carte__marques {
  display: block; margin-top: .4rem;
  font-family: "IBM Plex Mono", monospace; font-size: .68rem;
  letter-spacing: .08em; color: var(--ink-faint);
}

/* --- La galerie -------------------------------------------------------------
   Les photos arrivent déjà réduites par le navigateur : 2000 px de côté.
   La grille se remplit d'elle-même et ne se soucie pas de leur nombre. */
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .5rem; }
.galerie__vue { position: relative; margin: 0; }
.galerie__vue img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 2px; background: var(--ground-soft);
}
.galerie__vue figcaption {
  font-size: .7rem; color: var(--ink-faint); margin-top: .3rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.galerie__retirer {
  position: absolute; top: .35rem; right: .35rem;
  border: 0; border-radius: 2px; cursor: pointer;
  background: rgba(18, 22, 15, .62); color: #fff;
  font-family: "IBM Plex Mono", monospace; font-size: .72rem;
  padding: .15rem .45rem; line-height: 1.4;
}
.galerie__retirer:hover { background: var(--alerte); }
.galerie__depot { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; margin-top: 1.1rem; }

/* --- Le programme d'un séjour, rendu depuis le markdown --- */
.prose { max-width: 62ch; color: var(--ink-soft); }
.prose h2, .prose h3, .prose h4 { color: var(--ink); margin: 1.6rem 0 .5rem; }
.prose h2 { font-size: 1.25rem; }
.prose h3 { font-size: 1.05rem; }
.prose h4 { font-size: .95rem; }
.prose p { margin: .7rem 0; line-height: 1.75; }
.prose ul, .prose ol { margin: .7rem 0; padding-left: 1.3rem; line-height: 1.8; }
.prose li { margin: .2rem 0; }
.prose blockquote {
  margin: .9rem 0; padding: .3rem 0 .3rem 1rem;
  border-left: 2px solid var(--accent); color: var(--ink);
}
.prose hr { border: 0; border-top: 1px solid var(--rule); margin: 1.6rem 0; }
.prose a { color: var(--accent); }

/* --- L'agenda ----------------------------------------------------------------
   Une ligne par rendez-vous, dans l'ordre des dates. Le genre en petit d'abord :
   c'est lui qui dit ce qu'on regarde avant même de lire le titre. */
.agenda-ligne {
  display: block; text-decoration: none; color: inherit;
  padding: 1.05rem 0; border-bottom: 1px solid var(--rule);
}
.agenda-ligne:hover { background: var(--ground-soft); }
.agenda-ligne__genre {
  font-family: "IBM Plex Mono", monospace; font-size: .62rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--accent);
}
.agenda-ligne__quand {
  display: block; font-family: "IBM Plex Mono", monospace; font-size: .68rem;
  letter-spacing: .1em; color: var(--ink-faint); margin-top: .15rem;
}
.agenda-ligne__titre { display: block; font-size: 1.15rem; margin: .25rem 0 .1rem; }
.agenda-ligne__lieu { display: block; color: var(--ink-soft); font-size: .92rem; }
.agenda-ligne__marques {
  display: block; margin-top: .4rem;
  font-family: "IBM Plex Mono", monospace; font-size: .68rem;
  letter-spacing: .08em; color: var(--ink-faint);
}
/* Ce qui est passé s'efface sans disparaître : on y revient pour les photos. */
.agenda-ligne--passe .agenda-ligne__genre { color: var(--ink-faint); }
.agenda-ligne--passe .agenda-ligne__titre { color: var(--ink-soft); }
.agenda-ligne--annule .agenda-ligne__titre { text-decoration: line-through; }

/* --- La cotisation, sur la fiche du membre ---
   Un rappel, pas une relance : la ligne réglée s'efface, celle qui reste due
   se voit sans crier. */
.cotisation {
  font-family: "IBM Plex Mono", monospace; font-size: .72rem;
  letter-spacing: .06em; margin: .9rem 0 0;
  padding-left: .7rem; border-left: 2px solid var(--rule-strong);
}
.cotisation--payee { color: var(--ink-faint); }
.cotisation--due { color: var(--accent); border-left-color: var(--accent); }

/* --- La visionneuse -----------------------------------------------------------
   La photo en grand, sur fond sombre quel que soit le thème : c'est elle qu'on
   regarde, pas la page. Les commandes restent au bord, à portée de pouce sur un
   téléphone, et s'effacent devant l'image. */
.visionneuse {
  position: fixed; inset: 0; z-index: 80;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: .4rem; padding: clamp(.6rem, 3vw, 2rem);
  background: rgba(8, 10, 7, .93);
  animation: calque-entre .16s ease-out;
}
.visionneuse__cadre {
  margin: 0; display: flex; flex-direction: column; align-items: center;
  gap: .8rem; min-width: 0; max-height: 100%;
}
.visionneuse__cadre img {
  max-width: 100%; max-height: calc(100dvh - 7rem);
  object-fit: contain; border-radius: 2px; cursor: default;
}
.visionneuse__cadre figcaption {
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .72rem;
  letter-spacing: .08em; color: rgba(255, 255, 255, .72); text-align: center;
  white-space: pre-wrap;
}
.visionneuse__pas, .visionneuse__fermer {
  background: rgba(255, 255, 255, .08); color: #fff;
  border: 1px solid rgba(255, 255, 255, .22); border-radius: 2px;
  cursor: pointer; line-height: 1; padding: 0;
}
.visionneuse__pas { width: 3rem; height: 4.4rem; font-size: 1.8rem; }
.visionneuse__pas:hover, .visionneuse__fermer:hover { background: rgba(255, 255, 255, .2); }
.visionneuse__fermer {
  position: absolute; top: clamp(.6rem, 3vw, 1.4rem); right: clamp(.6rem, 3vw, 1.4rem);
  width: 2.4rem; height: 2.4rem; font-size: 1.4rem;
}
@media (max-width: 560px) {
  /* Sur un téléphone, on balaie : les flèches deviennent étroites plutôt
     que de manger la photo. */
  .visionneuse__pas { width: 2.1rem; height: 3.4rem; font-size: 1.3rem; }
}
@media (prefers-reduced-motion: reduce) { .visionneuse { animation: none } }

/* Un lundi encore à venir se voit, mais ne s'ouvre pas : rien n'y a été joué. */
.manche-ligne--avenir { cursor: default; opacity: .55; }
.manche-ligne--avenir:hover { background: none; }

/* Un PDF dans une galerie : un document, pas une image. Il s'ouvre dans un
   onglet plutôt que dans la visionneuse. */
.galerie__document {
  display: grid; place-items: center; text-decoration: none;
  width: 100%; aspect-ratio: 4 / 3; border-radius: 2px;
  background: var(--ground-soft); border: 1px solid var(--rule-strong);
}
.galerie__document:hover { border-color: var(--accent); }
.galerie__pdf {
  font-family: "IBM Plex Mono", monospace; font-size: .82rem;
  letter-spacing: .18em; color: var(--accent);
}

/* Ce qui vient, en tête de fiche : la première chose qu'on cherche en se
   connectant un lundi après-midi. */
.ce-lundi {
  font-family: "IBM Plex Mono", monospace; font-size: .76rem;
  letter-spacing: .05em; color: var(--ink-soft);
  margin: 0 0 1.4rem; padding: .75rem 1rem;
  border: 1px solid var(--rule); border-left: 2px solid var(--accent);
  border-radius: 2px; background: var(--ground-soft);
}
.ce-lundi b { color: var(--ink); }
.ce-lundi a { color: var(--accent); }

/* --- Des noms en pastilles ---
   Ceux qui manquent — au sondage, à la cotisation — et ceux qui sont inscrits.
   Utilisé par plusieurs écrans : la règle vit donc ici, pas dans l'un d'eux. */
.manquants { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .3rem; }
.manquant {
  font-family: "IBM Plex Mono", monospace; font-size: .72rem;
  border: 1px solid var(--rule-strong); border-radius: 2px;
  padding: .38rem .7rem; color: var(--ink-soft);
}
.manquant--sans-telegram { border-style: dashed; }