/*
Theme Name: Targa'micale
Theme URI: https://targamicale.fr
Author: Targa'micale
Description: Thème du site de l'Amicale des propriétaires de bateaux Targa. Papier chaud, bleu de coque et un seul accent doré — la charte du club appliquée à WordPress. Le thème ne fait que présenter : les membres, les bateaux, les événements et le forum vivent dans des extensions.
Version: 26.06
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.1
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: targamicale
Tags: club, association, custom-menu, translation-ready
*/

/* **Le gris du texte secondaire est `--ink-500`, jamais `--ink-400`.**
   Mesuré 2026-08-27 sur la page d'un événement : `--ink-400` (#8A9097) donne
   3,22:1 sur blanc et 2,83 sur le papier du club, là où il faut 4,5 pour du
   texte courant — et les quatorze déclarations qu'il peignait ici vont de 0,72
   à 0,8rem, donc rien ne relève de l'exception « grand texte » : les horaires
   du programme, les notes de formulaire, la mention de confidentialité.
   `--ink-500` (#5E6B73) passe des deux côtés, 5,49 et 4,81. Le nom du jeton dit
   ce qu'il est — un gris de *placeholder* — et il n'a jamais été un gris de
   contenu. Le portail a reçu la même correction, dans son propre fichier. */

/* ═══════════════════════════════════════════════════════════════════════════
   Design tokens arrive from assets/css/tokens-*.css, enqueued ahead of this
   file. Never hardcode a colour here — if a value is missing, add it to the
   tokens so the plugins and the mobile app can share it.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* The design system's --container-lg (1200px) is wider than the 960–1080px
     the layout guidance calls for on content pages, so the theme pins its own
     measure. Full-bleed surfaces like the map opt out of this deliberately. */
  --tgc-content-max: 1080px;
}

/* ── Base ────────────────────────────────────────────────────────────────── */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  line-height: var(--text-body-leading);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; }

a {
  color: var(--text-brand);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--navy-600); }

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* Visible only to screen readers, until focused. */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link:focus {
  position: fixed;
  top: 12px; left: 12px;
  z-index: var(--z-toast);
  width: auto; height: auto;
  clip-path: none;
  padding: 10px 18px;
  background: var(--paper-0);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg);
  font-weight: var(--fw-semibold);
}

/* ── Headings ────────────────────────────────────────────────────────────── */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-strong);
  line-height: var(--lh-snug);
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(2rem, 5vw, var(--text-title-size)); font-weight: var(--fw-black); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); }
h2 { font-size: clamp(1.5rem, 3.5vw, var(--text-heading-size)); font-weight: var(--text-heading-weight); letter-spacing: var(--ls-tight); }
h3 { font-size: var(--fs-xl); font-weight: var(--fw-bold); }
h4 { font-size: var(--fs-lg); font-weight: var(--fw-semibold); }

p { margin: 0 0 1.15em; }

/* Specs, dates and identifiers read as ship's data. A signature texture of the
   brand, not decoration — see the design system's type notes. */

.tgc-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-eyebrow-size);
  font-weight: var(--text-eyebrow-weight);
  letter-spacing: var(--text-eyebrow-spacing);
  text-transform: uppercase;
  color: var(--text-accent);
  margin: 0 0 10px;
}

blockquote {
  margin: 1.75em 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--gold-500);
  color: var(--text-strong);
  font-size: var(--fs-lg);
}

code, pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}
pre {
  padding: 18px 20px;
  overflow-x: auto;
  background: var(--surface-sunken);
  border-radius: var(--radius-md);
}

hr {
  height: 0;
  margin: 2.5rem 0;
  border: 0;
  border-top: var(--border-hairline) solid var(--border-subtle);
}

/* ── Layout ──────────────────────────────────────────────────────────────── */

.tgc-container {
  width: min(100% - (var(--gutter) * 2), var(--tgc-content-max));
  margin-inline: auto;
}

.tgc-site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.tgc-main {
  flex: 1 0 auto;
  padding-block: clamp(28px, 5vw, 56px) clamp(48px, 8vw, 88px);
}

/* The landing pager measures its sections in vh, so the main wrapper adds no
 * vertical rhythm of its own there. See tgc_is_fullpage(). */
.tgc-main--bare {
  padding-block: 0;
}

/* Application mode: the member portal fills what the header leaves.
 *
 * A fixed height rather than min-height, so the portal's own panes scroll
 * inside it instead of the window scrolling under a sticky header — which is
 * what makes a map able to occupy the viewport and stay there. `flex: 1` is not
 * enough on its own here: .tgc-site is min-height:100vh, so a tall child grows
 * it and the page scrolls again. See tgc_is_app(). */
/* No theme header in application mode, so the portal's bar is inside this box
   and the box is the whole window. */
.tgc-main--app {
  height: 100vh;
  min-height: 0;
  /* auto, not hidden. The portal scrolls its own pane, so nothing should ever
   * overflow here — but `hidden` makes a broken height chain silent and total:
   * content is clipped and there is no way to reach it. `auto` degrades to a
   * scrollbar instead, which is visible and still usable. */
  overflow: auto;
}



/* ── Le tiroir du membre ─────────────────────────────────────────────────── */

/* Un bouton flottant et ce qu'il ouvre, pour un membre connecté, partout.
 *
 * Il remplace l'en-tête : la carte avait ce dessin, les autres pages du club
 * avaient la barre, et l'on perdait en passant de l'une aux autres le retour à
 * la carte et l'accès à sa fiche. Le balisage est dans
 * `template-parts/drawer.php` ; le portail a cessé de dessiner le sien. */

/* La mesure est publiée : le portail en a besoin pour écarter sa recherche du
 * bouton, et il ne doit pas la deviner. */
:root {
  --tgc-drawer-btn: 44px;
  --tgc-drawer-gap: 14px;

  /* Où le bouton finit. **Une seule mesure, publiée**, parce que trois choses
   * doivent s'en écarter et qu'aucune n'a à la deviner : la recherche de la
   * carte, le panneau du portail et celui que « Mon profil » ouvre sur une page
   * ordinaire. Elles la lisaient chacune à leur façon, et le jour où le chrome
   * a changé de taille l'une est passée sous le bouton pendant que l'autre
   * était juste. */
  --tgc-drawer-end: calc(var(--tgc-drawer-gap) + var(--tgc-drawer-btn));
}

/* Le cercle blanc sur une section vidéo : voir `markVideo()` dans drawer.js.
   Une ombre plutôt qu'une bordure, pour que le bouton garde sa taille — et
   donc sa place, que `--tgc-drawer-btn` réserve au contenu. */
.tgc-on-video .tgc-drawer__toggle {
  box-shadow: 0 0 0 2px var(--paper-0), var(--shadow-md);
}

.tgc-drawer__toggle {
  position: fixed;
  z-index: calc(var(--z-modal) + 20);
  top: var(--tgc-drawer-gap);
  left: var(--tgc-drawer-gap);
  display: grid;
  gap: 5px;
  width: var(--tgc-drawer-btn);
  height: var(--tgc-drawer-btn);
  padding: 13px 11px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--navy-800);
  box-shadow: var(--shadow-md);
  cursor: pointer;
}

.tgc-drawer__toggle span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--paper-0);
  transition: transform 180ms ease, opacity 140ms ease;
}

/* Trois traits qui deviennent une croix : le bouton dit ce qu'il fera, pas ce
 * qu'il a fait. */
.tgc-drawer-open .tgc-drawer__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.tgc-drawer-open .tgc-drawer__toggle span:nth-child(2) { opacity: 0; }
.tgc-drawer-open .tgc-drawer__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.tgc-drawer__toggle:hover { background: var(--navy-700); }

.tgc-drawer__toggle:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 2px;
}

.tgc-drawer__scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  border: 0;
  padding: 0;
  background: rgba(8, 36, 76, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
  cursor: default;
}

.tgc-drawer-open .tgc-drawer__scrim { opacity: 1; pointer-events: auto; }

.tgc-drawer {
  position: fixed;
  z-index: calc(var(--z-modal) + 10);
  top: 0;
  left: 0;
  bottom: 0;
  width: min(300px, 82vw);
  display: flex;
  flex-direction: column;
  padding-bottom: 24px;
  background: var(--navy-800);
  /* **Un panneau qui pose son fond pose son texte.** Il ne le posait pas : ses
     liens s'écrivent en blanc chacun de leur côté, donc rien ne manquait — puis
     la porte du club est arrivée en bas, en bouton fantôme, qui emprunte la
     couleur courante. Elle a hérité de l'encre de la page : **1,53:1** sur le
     navy. Le club a déjà payé cela une fois, sur le menu de l'accueil. */
  color: var(--paper-0);
  box-shadow: 8px 0 32px rgba(8, 36, 76, 0.32);
  overflow-y: auto;

  /* Glissé plutôt que retiré, pour qu'il s'anime dans les deux sens.
   * `visibility` le sort du parcours au clavier tant qu'il est fermé — la
   * translation seule y laisserait chaque lien atteignable hors de l'écran. */
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform 200ms cubic-bezier(0.2, 0, 0.1, 1), visibility 0s linear 200ms;
}

.tgc-drawer-open .tgc-drawer {
  transform: none;
  visibility: visible;
  transition: transform 200ms cubic-bezier(0.2, 0, 0.1, 1), visibility 0s;
}

.tgc-drawer:focus { outline: none; }

.tgc-drawer__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* 68px en haut : le bouton flotte par-dessus le tiroir ouvert, et la marque
   * n'a pas à passer dessous. */
  padding: 68px clamp(18px, 4vw, 26px) 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.tgc-drawer__brand {
  display: inline-flex;
  align-items: center;
  /* Centrée dans le tiroir, demandé 2026-09-27. */
  align-self: center;
  /* La marque est le seul chemin vers le site public depuis le tiroir, et le
     tiroir est le seul chrome : 8px la portent à 42 de haut, une cible qu'un
     pouce trouve. Mesurée à 33 avec la seule pastille de 5px. */
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--paper-0);
  text-decoration: none;
  color: var(--navy-800);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
}

/* La hauteur se règle dans *Personnaliser → Identité du site* ; la largeur
   suit l'image. `max-width` et `object-fit` gardent un logo très large dans la
   largeur du tiroir sans le déformer. */
.tgc-drawer__brand { max-width: 100%; }
.tgc-drawer__brand img {
  display: block;
  height: var(--tgc-logo-drawer-h, 26px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
}

/* Une version claire du logo n'a pas besoin de pastille : *Identité du site →
   Logo sur fond sombre*. La marge verticale reste, c'est la cible au doigt. */
.tgc-drawer__brand--bare {
  background: none;
  padding-inline: 0;
}

/* Le nom est le lien vers sa fiche : un objet, deux faits. Il se comporte donc
 * comme un lien — survol, focus visible — sans en avoir l'air, parce que c'est
 * d'abord une identité qu'on lit. */
.tgc-drawer__who {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 2px 10px;
  padding: 6px 8px;
  margin: -6px -8px;
  border-radius: var(--radius-md);
  text-decoration: none;
}

.tgc-drawer__who:hover { background: rgba(255, 255, 255, 0.09); }

.tgc-drawer__who:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 1px;
}

.tgc-drawer__avatar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  background: var(--navy-600);
  color: var(--paper-0);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
}

.tgc-drawer__name {
  color: rgba(255, 255, 255, 0.92);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  overflow-wrap: anywhere;
}

.tgc-drawer__mine {
  grid-column: 2;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-500);
}

.tgc-drawer__list { display: flex; flex-direction: column; }

/* `[hidden]` pèse (0,0,0), donc n'importe quelle règle d'auteur posant un
 * `display` le bat — et celles d'à côté en posent. C'est le piège que ce projet
 * a déjà payé trois fois le même jour sur `.tgc-ev-*` : une règle pour la
 * famille, et celle qu'on écrira demain est déjà couverte. */
.tgc-drawer [hidden] { display: none; }

.tgc-drawer__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px clamp(18px, 4vw, 26px);
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  font-size: var(--fs-md);
  border-left: 3px solid transparent;
}

.tgc-drawer__link:hover { background: rgba(255, 255, 255, 0.06); color: var(--paper-0); }

/* **Une seule liste, sans filet ni graisse au milieu.** La carte et le bureau
 * étaient séparés des pages du club par un trait, et ces dernières écrites plus
 * petit et plus pâle — un reste de l'époque où les deux venaient d'endroits
 * différents. Le lecteur, lui, y voit les pages du club : les découper en deux
 * lui demande de comprendre notre plomberie pour lire son menu. */

/* Où l'on est. L'accent unique du club, faisant ici son travail habituel :
 * désigner. Marqué plutôt que retiré — un menu sert d'abord à se situer, et une
 * liste qui change d'une page à l'autre ne se parcourt pas des yeux. */
.tgc-drawer__link[aria-current] {
  color: var(--paper-0);
  border-left-color: var(--gold-500);
  background: rgba(255, 255, 255, 0.08);
  cursor: default;
}

/* **Le seul filet de ce tiroir**, entre les sections de l'accueil et les pages
   du club. Ailleurs il n'y en a aucun : la liste des pages a été découpée en
   deux une fois — la carte et le bureau d'un côté, les pages de l'autre — et
   c'était notre plomberie exposée au lecteur. Ici la coupure est réelle : au
   dessus, où aller *dans cette page* ; en dessous, où aller *dans le club*. */
.tgc-drawer__link--section + .tgc-drawer__link:not(.tgc-drawer__link--section) {
  margin-top: 10px;
  padding-top: 20px;
  border-top: var(--border-hairline) solid rgba(255, 255, 255, 0.14);
}

/* La porte, à la place de « Quitter » : le même endroit pour le geste inverse.
   Le bouton fantôme emprunte la couleur du texte, comme dans une section navy. */
.tgc-drawer__door {
  margin-top: auto;
  padding: 16px clamp(18px, 4vw, 26px) 4px;
}

.tgc-drawer__door .tgc-button { width: 100%; justify-content: center; }

.tgc-drawer__quit {
  margin-top: auto;
  padding: 13px clamp(18px, 4vw, 26px);
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
  font-size: var(--fs-sm);
}

.tgc-drawer__quit:hover { color: var(--paper-0); }

/* Le bouton flotte, donc il n'occupe aucune place : sans cela il se pose sur la
 * première ligne de chaque page. C'est le même défaut que la barre du portail et
 * que le chrome du plugin d'accueil, corrigé de la même façon — une seule mesure
 * et non une règle par gabarit. Les deux modes nus s'en chargent eux-mêmes : le
 * portail écarte son propre contenu, et la page d'accueil est elle aussi nue —
 * FullPage y tient la fenêtre et réserve sa place par `--wpfps-chrome`. */
.tgc-has-drawer .tgc-main:not(.tgc-main--bare):not(.tgc-main--app) {
  padding-top: calc(var(--tgc-drawer-gap) + var(--tgc-drawer-btn) + 12px);
}

/* **Le bureau a une barre d'administration, et elle est fixée en haut.**
 * Le bouton flotte à 14px du bord de la fenêtre, donc il passait dessous — la
 * barre est à `z-index: 99999` et gagne. Elle fait 32px, et 46 sous 782px de
 * large : c'est WordPress qui le décide, pas nous. Le membre n'a pas de barre,
 * `BCP_Access` la lui retirant, donc rien ne change pour lui. */
.admin-bar .tgc-drawer__toggle { top: calc(var(--tgc-drawer-gap) + 32px); }
.admin-bar .tgc-drawer,
.admin-bar .tgc-drawer__scrim { top: 32px; }

@media screen and (max-width: 782px) {
  .admin-bar .tgc-drawer__toggle { top: calc(var(--tgc-drawer-gap) + 46px); }
  .admin-bar .tgc-drawer,
  .admin-bar .tgc-drawer__scrim { top: 46px; }
}

/* Et en mode application le pavé est la fenêtre entière : la barre le poussait
 * de 32px vers le bas et il en perdait autant sous le pli — la carte débordait
 * d'exactement la hauteur de la barre. Mesuré : 32 → 932 dans une fenêtre de
 * 900. Ici le calcul en CSS est juste, la carte mesurant sa boîte plutôt que
 * `window.innerHeight` — ce qui est ce qui l'interdisait sur la page d'accueil.
 *
 * **Les deux règles sont nécessaires, et la première est celle qui agit.**
 * `.tgc-main` est `flex: 1 0 auto` dans un `.tgc-site` en `min-height: 100vh` :
 * une hauteur posée sur lui n'est qu'une base que la croissance rattrape aussitôt
 * — mesuré 900px là où la règle disait 868. C'est le conteneur qu'il faut
 * raccourcir ; la hauteur du pavé reste juste et dit ce qu'elle vaut. */
.admin-bar .tgc-site { min-height: calc(100vh - 32px); }
.admin-bar .tgc-main--app { height: calc(100vh - 32px); }

@media screen and (max-width: 782px) {
  .admin-bar .tgc-site { min-height: calc(100vh - 46px); }
  .admin-bar .tgc-main--app { height: calc(100vh - 46px); }
}

@media (prefers-reduced-motion: reduce) {
  .tgc-drawer,
  .tgc-drawer__scrim,
  .tgc-drawer__toggle span { transition: none; }
}

/* ── Le mouvement d'une page à l'autre ───────────────────────────────────── */

/* **C'est le rideau qui bouge, pas la page**, et c'est une mesure qui l'a
 * décidé.
 *
 * Le pavé glissait de 100 % de sa *propre* hauteur, et une page du club en fait
 * une et demie à deux fenêtres : à durée égale, la distance était double et la
 * vitesse quadruple — 2599 px/s d'une page, 3103 px/s d'une autre, contre les
 * 750 px/s d'une section de l'accueil, qui fait exactement une fenêtre par
 * construction. D'où l'impression de précipitation, et le fait qu'elle changeait
 * d'une page à l'autre : l'œil ne trouvait aucun rythme. Rallonger la durée
 * n'aurait pas suffi — il aurait fallu 2,4 s pour la seule sortie d'une page de
 * 1793 px, et une valeur différente sur chaque page.
 *
 * Un rideau fait **toujours une fenêtre**. Sa vitesse est donc la même partout,
 * et le réglage du bureau la gouverne pour de bon. Le fond du club était déjà
 * là, posé derrière la couture ; il la traverse maintenant.
 *
 * Le sens tient : vers le bas il monte du bas, couvre, et repart par le haut sur
 * la page suivante — un seul trajet en deux temps, dont le chargement est le
 * milieu. Le temps d'attente se lit alors comme un rideau baissé plutôt que
 * comme un temps mort.
 *
 * Les durées viennent de `:root`, écrites par le thème depuis le réglage du
 * bureau — elles doivent exister avant tout script, la moitié qui arrive étant
 * posée avant le premier rendu. Les deux moitiés sont égales : elles parcourent
 * la même distance. */
.tgc-backdrop {
  position: fixed;
  inset: 0;
  /* Au-dessus de la page et du pied, sous le tiroir et son bouton : le club
     garde sa commande pendant le trajet, comme l'accueil garde la sienne. */
  z-index: var(--z-overlay);
  display: grid;
  place-items: center;
  background: var(--navy-800);
  visibility: hidden;
  will-change: transform;
}

[class*='tgc-move-'] .tgc-backdrop { visibility: visible; }

.tgc-move-out-down .tgc-backdrop { animation: tgc-curtain-from-below var(--tgc-slide-out, 450ms) var(--tgc-slide-easing, ease-in-out) both; }
.tgc-move-in-down  .tgc-backdrop { animation: tgc-curtain-to-above   var(--tgc-slide-in, 450ms)  var(--tgc-slide-easing, ease-in-out) both; }
.tgc-move-out-up   .tgc-backdrop { animation: tgc-curtain-from-above var(--tgc-slide-out, 450ms) var(--tgc-slide-easing, ease-in-out) both; }
.tgc-move-in-up    .tgc-backdrop { animation: tgc-curtain-to-below   var(--tgc-slide-in, 450ms)  var(--tgc-slide-easing, ease-in-out) both; }

/* En descendant, le rideau monte : il entre par le bas, puis continue vers le
   haut sur la page suivante. Le trajet est le même d'un bout à l'autre. */
@keyframes tgc-curtain-from-below { from { transform: translateY(100%); }  to { transform: none; } }
@keyframes tgc-curtain-to-above   { from { transform: none; }              to { transform: translateY(-100%); } }

/* En montant, l'inverse. */
@keyframes tgc-curtain-from-above { from { transform: translateY(-100%); } to { transform: none; } }
@keyframes tgc-curtain-to-below   { from { transform: none; }              to { transform: translateY(100%); } }

/* La marque est bicolore, donc sur le navy elle prend son cartouche clair — le
 * traitement qu'elle a partout ailleurs sur ce site. Tenue discrète : c'est un
 * fond, pas une annonce. */
.tgc-backdrop img {
  width: min(180px, 28vw);
  height: auto;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  background: var(--paper-0);
  opacity: 0.9;
}

/* Le script n'anime pas quand le lecteur demande moins de mouvement — ceci est
 * la ceinture, pour un navigateur qui le déclare tard. */
@media (prefers-reduced-motion: reduce) {
  [class*='tgc-move-'] .tgc-backdrop { animation: none; visibility: hidden; }
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.tgc-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--action-bg);
  color: var(--action-fg);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard),
              transform  var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
.tgc-button:hover  { background: var(--action-bg-hover); color: var(--action-fg); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.tgc-button:active { background: var(--action-bg-active); transform: none; }

/* Gold is the single accent: one highest-intent action per view, never two. */
.tgc-button--accent {
  background: var(--gold-500);
  color: var(--text-on-accent);
}
.tgc-button--accent:hover  { background: var(--gold-600); color: var(--text-on-accent); }
.tgc-button--accent:active { background: var(--gold-700); }

.tgc-button--ghost {
  background: transparent;
  color: var(--text-brand);
  box-shadow: inset 0 0 0 var(--border-thin) var(--border-default);
}
.tgc-button--ghost:hover {
  background: var(--paper-50);
  color: var(--text-brand);
  box-shadow: inset 0 0 0 var(--border-thin) var(--border-strong);
}

/* ── Page heading ────────────────────────────────────────────────────────── */

.tgc-page-header {
  margin-bottom: clamp(28px, 4vw, 44px);
}

/* Sous la fenêtre d'un article, le titre de la liste est un `h2` — c'est
   l'article qui porte le `h1` du document — mais il se lit comme celui de la
   page des actualités. */
.tgc-page-header__title {
  font-size: clamp(2rem, 5vw, var(--text-title-size));
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
}
.tgc-page-header__lead {
  max-width: 620px;
  margin: 10px 0 0;
  color: var(--text-muted);
  font-size: var(--fs-lg);
}

/* ── Post list ───────────────────────────────────────────────────────────── */

/* **Une carte prend la hauteur de ce qu'elle porte.** Étirées à la hauteur de
   leur rangée, celles qui n'ont pas de photographie gagnaient deux cents pixels
   de blanc entre l'extrait et la date — un vide qui se lit comme une image qui
   n'a pas chargé, et non comme un article qui n'en a pas. Le bureau publiera
   des nouvelles sans photographie ; c'est la liste qui doit le supporter, pas
   la fixture qui doit l'éviter. */
.tgc-posts {
  display: grid;
  gap: clamp(16px, 2.5vw, 24px);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  align-items: start;
}

.tgc-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface-card);
  border: var(--border-hairline) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  transition: transform  var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
}
.tgc-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.tgc-card__media {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--paper-200);
}
.tgc-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-standard);
}
.tgc-card:hover .tgc-card__media img { transform: scale(1.03); }

.tgc-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding: 20px 22px 22px;
}

.tgc-card__title {
  margin: 0;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
}
.tgc-card__title a { color: inherit; text-decoration: none; }
.tgc-card__title a:hover { color: var(--text-brand); }

.tgc-card__excerpt { margin: 0; color: var(--text-muted); font-size: var(--fs-sm); }
.tgc-card__footer  { margin-top: auto; padding-top: 6px; }

/* « Réservé aux membres », sur une carte de la liste et en tête de l'article.

   **Le lavis navy, jamais l'or.** L'or du club désigne l'action attendue du
   lecteur ; ceci n'en demande aucune, cela dit à qui l'article s'adresse. Même
   forme que les pastilles du programme, dont c'est le vocabulaire.

   Elle ne paraît que pour un membre connecté — un visiteur ne voit jamais ces
   articles — donc elle ne dit pas « vous ne pouvez pas lire », elle dit « ceci
   ne sort pas du club ». */
.tgc-lock {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: var(--navy-100);
  color: var(--navy-700);
}

.tgc-card__body > .tgc-lock { align-self: flex-start; }

/* Sur une photographie, le lavis navy n'a plus rien pour le porter : la
   pastille prend un fond à elle. Même famille, même forme. */
.tgc-lock--onphoto { background: rgb(255 255 255 / 0.92); color: var(--navy-800); }

/* Le récit : la couverture touche le haut de la page et le texte respire
   dessous. `.tgc-article--recit` n'a pas d'en-tête à lui, le titre étant
   dans la couverture. */
.tgc-cover + .tgc-container { margin-top: clamp(28px, 5vw, 48px); }

/* Et elle touche l'en-tête : la mesure verticale du site s'efface pour elle,
   comme le conteneur s'efface pour la carte. */
.tgc-has-cover .tgc-main { padding-top: 0; }

/* ── Single post ─────────────────────────────────────────────────────────── */

.tgc-article { width: min(100%, var(--container-sm)); margin-inline: auto; }

/* La brève n'illustre rien et se lit d'un coup d'œil : une mesure plus courte
   et un titre qui n'annonce pas un dossier. C'est tout ce qui la distingue —
   le reste du gabarit est celui de l'article. */
.tgc-article--breve { width: min(100%, 34rem); }
.tgc-article--breve .tgc-article__header h1 { font-size: clamp(1.5rem, 3vw, 2rem); }

/* ── La pleine largeur ────────────────────────────────────────────────────
   `align-wide` était déclaré, donc l'éditeur proposait le bouton — et à
   l'écran une image « pleine largeur » faisait exactement la largeur du texte,
   parce que ce conteneur n'est pas une mise en page contrainte au sens des
   blocs. Un bouton qui existe et ne fait rien est le pire des deux.

   L'article se lit sur 640px ; une photographie s'échappe jusqu'à la mesure de
   la page, celle qu'emploient la liste des actualités et le reste du site. Le
   `max-width` en `vw` ne peut pas déborder : la gouttière fait plus du double
   d'une barre de défilement. */
.tgc-article__content > .alignwide {
  width: var(--tgc-content-max);
  max-width: calc(100vw - var(--gutter) * 2);
  margin-left: 50%;
  transform: translateX(-50%);
}

.tgc-article__content > .alignwide img { width: 100%; }

/* **La galerie du club prend la mesure large d'elle-même.** Elle arrive par un
   raccourci, donc l'éditeur ne peut pas lui donner l'alignement — et serrée sur
   640px, sa barre de tags passait sur deux lignes et ses vignettes tombaient à
   la taille d'un timbre. C'est une série de photographies : c'est ce qu'elle a
   de plus large à montrer.

   **Sauf si le placement demande la mesure du texte** — `[targa_gallery
   width=texte]`, qui pose `--text` sur la racine. Trois photographies au fil
   d'un paragraphe illustrent ce qu'on vient de lire ; les sortir de la colonne
   de lecture en ferait une interruption. Le raccourci nomme, le thème peint. */
.tgc-article__content .targa-gallery-root:not(.targa-gallery-root--text) {
  width: var(--tgc-content-max);
  max-width: calc(100vw - var(--gutter) * 2);
  margin-left: 50%;
  transform: translateX(-50%);
}

/* ── Un article, dans sa fenêtre ──────────────────────────────────────────
   Décidé 2026-09-27 : un article se lit dans une fenêtre, par-dessus la liste,
   plutôt que sur une page à part. Voir template-parts/article-modal.php.

   **Une seule largeur, de haut en bas** : le texte, la galerie, la vidéo, la
   photographie. Il y en avait trois — 640 pour le texte et la vidéo, 1080 pour
   une galerie qui s'échappait de la colonne — et les bords ne s'alignaient
   nulle part. 720 px, soit environ 80 caractères à la ligne : la mesure de
   lecture, et une galerie qui reste lisible. */
.tgc-article-modal {
  --tgc-article-pad: clamp(20px, 4vw, 44px);
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(16px, 5vh, 56px) var(--gutter);
}

.tgc-article-modal[hidden] { display: none; }

.tgc-article-modal__scrim {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--navy-900) 72%, transparent);
  cursor: default;
}

.tgc-article-modal__panel {
  position: relative;
  width: min(100%, calc(720px + var(--tgc-article-pad) * 2));
  padding: var(--tgc-article-pad);
  background: var(--paper-0);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  outline: none;
}

.tgc-article-modal[aria-busy="true"] .tgc-article-modal__panel { opacity: 0.6; }

/* 44 × 44 au doigt, par la marge : la règle de toutes les croix du club. */
.tgc-article-modal__close {
  position: absolute;
  z-index: 2;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--text-strong);
  text-decoration: none;
  background: color-mix(in srgb, var(--paper-0) 88%, transparent);
}

.tgc-article-modal__close:hover { background: var(--paper-100); }
.tgc-article-modal__close:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }

/* La page derrière ne défile plus, avec ou sans script. */
html.tgc-article-open,
html:has(.tgc-article-modal[aria-modal="true"]) { overflow: hidden; }

/* Le cadre de page d'un article n'a pas de sens dans la fenêtre : le
   conteneur et les mesures du texte s'effacent devant la sienne. */
.tgc-article-modal .tgc-container {
  width: 100%;
  max-width: none;
  padding-inline: 0;
}

.tgc-article-modal .tgc-article,
.tgc-article-modal .tgc-article--breve { width: 100%; }

/* **Ce qui s'échappait de la colonne y rentre** : la mesure large n'existe
   plus dans la fenêtre. La galerie compte ses colonnes sur sa propre largeur
   (`ResizeObserver`), donc elle se range d'elle-même. */
.tgc-article-modal .tgc-article__content > .alignwide,
.tgc-article-modal .tgc-article__content .targa-gallery-root,
.tgc-article-modal .tgc-article__content .tgc-video,
.tgc-article-modal .tgc-article__content .wp-block-embed {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  transform: none;
}

/* Le récit porte sa photographie en couverture : elle prend toute la largeur
   de la fenêtre, jusqu'à ses bords arrondis. */
.tgc-article-modal .tgc-cover {
  min-height: clamp(220px, 40vh, 360px);
  margin: calc(var(--tgc-article-pad) * -1) calc(var(--tgc-article-pad) * -1) var(--tgc-article-pad);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
}

/* Sur un téléphone, la fenêtre prend l'écran, et son haut laisse la place au
   bouton du menu, qui flotte au-dessus de tout. */
@media (max-width: 600px) {
  .tgc-article-modal { padding: 0; }
  .tgc-article-modal__panel {
    min-height: 100%;
    border-radius: 0;
    padding-top: max(var(--tgc-article-pad), var(--tgc-drawer-end, 70px));
  }
  .tgc-article-modal .tgc-cover { border-radius: 0; margin-top: calc(max(var(--tgc-article-pad), var(--tgc-drawer-end, 70px)) * -1); }
}

/* ── La vidéo, avant le clic ──────────────────────────────────────────────
   Le plugin des actualités rend une vignette et un bouton à la place de
   l'intégration de YouTube ; rien de Google n'est chargé tant que personne n'a
   cliqué. Le thème peint, comme pour tout ce que les extensions dessinent.

   **Sans affiche, le dégradé de mer prend le relais** — le même que la
   couverture d'un événement sans photographie, et pour la même raison : une
   page ne doit pas avoir l'air amputée. */
.tgc-video { margin: 0; }

.tgc-video__btn {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  color: var(--paper-0);
  background: linear-gradient(170deg, var(--sea-shoal) 0%, var(--sea-mid) 55%, var(--navy-800) 100%);
}

.tgc-video__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Le voile fait tenir le titre blanc sur n'importe quelle image — la leçon de
   la couverture, appliquée ici. */
.tgc-video__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(5 27 56 / 0.88) 0%, rgb(5 27 56 / 0.15) 60%);
}

/* Un rond clair et un triangle : le geste se reconnaît sans un mot, et il ne
   coûte ni image ni police. Pas d'or — l'accent du club va à ce qu'il attend du
   lecteur, et regarder une vidéo n'est pas une demande. */
.tgc-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 64px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgb(255 255 255 / 0.92);
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-base) var(--ease-standard),
              background var(--dur-base) var(--ease-standard);
}

.tgc-video__play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent var(--navy-800);
}

.tgc-video__btn:hover .tgc-video__play { transform: translate(-50%, -50%) scale(1.06); background: #fff; }
.tgc-video__btn:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 3px; }

.tgc-video__title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 18px 16px;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  line-height: 1.25;
  text-align: left;
  text-wrap: balance;
}

.tgc-video__frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--radius-md);
}

/* La légende dit ce que le clic coûte, et porte le lien qui marche sans
   JavaScript. Elle reste après la lecture : ce qu'elle annonce est toujours
   vrai. */
.tgc-video__note {
  margin: 8px 0 0;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .tgc-video__btn:hover .tgc-video__play { transform: translate(-50%, -50%); }
}

@media (max-width: 480px) {
  .tgc-video__play { width: 52px; height: 52px; }
  .tgc-video__play::after { border-width: 9px 0 9px 15px; }
}

.tgc-article__header { margin-bottom: clamp(24px, 4vw, 36px); }

.tgc-article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  margin-top: 14px;
}

.tgc-article__thumb {
  margin: 0 0 clamp(24px, 4vw, 36px);
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.tgc-article__content > * { margin-bottom: 1.15em; }
.tgc-article__content h2 { margin-top: 1.8em; }
.tgc-article__content h3 { margin-top: 1.5em; }
.tgc-article__content img { border-radius: var(--radius-md); }

.tgc-article__footer {
  margin-top: 48px;
  padding-top: 24px;
  border-top: var(--border-hairline) solid var(--border-subtle);
}

.tgc-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tgc-tag {
  padding: 5px 13px;
  border-radius: var(--radius-pill);
  background: var(--paper-200);
  color: var(--text-strong);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  text-decoration: none;
}
.tgc-tag:hover { background: var(--paper-300); color: var(--text-strong); }

/* ── Pagination ──────────────────────────────────────────────────────────── */

.tgc-pagination { margin-top: 48px; }
.tgc-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.tgc-pagination .page-numbers {
  display: grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  background: var(--paper-0);
  border: var(--border-hairline) solid var(--border-subtle);
  color: var(--text-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
}
.tgc-pagination .page-numbers:hover   { background: var(--paper-50); }
.tgc-pagination .page-numbers.current { background: var(--navy-800); border-color: var(--navy-800); color: var(--paper-0); }

/* ── Notices and empty states ────────────────────────────────────────────── */

.tgc-notice {
  padding: clamp(28px, 5vw, 48px);
  background: var(--surface-card);
  border: var(--border-hairline) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  text-align: center;
}
.tgc-notice p { color: var(--text-muted); }
.tgc-notice > :last-child { margin-bottom: 0; }

/* ── Forms ───────────────────────────────────────────────────────────────── */

/* `tel` et `date` manquaient à cette liste, et c'est ce qui donnait **trois
   hauteurs sur un même formulaire** — 43px pour un prénom, 35 pour un
   téléphone, 37 pour une date. `.bcp-input` avait été aligné dessus ; la liste
   est maintenant complète, ce qui vaut aussi pour tout formulaire à venir. */
input[type="text"], input[type="email"], input[type="search"],
input[type="password"], input[type="url"], input[type="number"],
input[type="tel"], input[type="date"],
textarea, select {
  width: 100%;
  padding: 10px 14px;
  background: var(--paper-0);
  border: var(--border-thin) solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  transition: border-color var(--dur-fast) var(--ease-standard),
              box-shadow   var(--dur-fast) var(--ease-standard);
}
/* **La même liste que la règle qui pose le remplacement.** `input:focus` nu
   retirait l'anneau de *toutes* les cases à cocher, de tous les boutons radio
   et de tous les boutons d'envoi du site — qui n'ont ni bordure ni ombre pour
   le remplacer, donc plus rien ne disait où était le curseur au clavier. */
input[type="text"]:focus, input[type="email"]:focus, input[type="search"]:focus,
input[type="password"]:focus, input[type="url"]:focus, input[type="number"]:focus,
input[type="tel"]:focus, input[type="date"]:focus,
textarea:focus, select:focus {
  outline: none;
  border-color: var(--border-focus);
  /* L'anneau du club, pas un lavis à 1,75:1 : `--focus-ring` est ce que le
     reste du site emploie, et c'est ce qui rend le champ focalisé visible. */
  box-shadow: var(--focus-ring);
}
/* **`ink-500`, pas `ink-400`.** Le texte indicatif d'un champ *est* du contenu
   — il dit ce qu'on attend — et `--text-placeholder` donne 3,22:1 sur blanc là
   où il en faut 4,5. Le jeton garde son nom et son rôle ; c'est sa valeur ici
   qui n'allait pas. */
::placeholder { color: var(--ink-500); }

.tgc-search-form { display: flex; gap: 10px; }
.tgc-search-form input[type="search"] { flex: 1; }

/* ── Comments ────────────────────────────────────────────────────────────── */

.tgc-comments { margin-top: 56px; }
.tgc-comments__list { margin: 0 0 40px; padding: 0; list-style: none; }
.tgc-comments__list ol.children { list-style: none; margin-left: clamp(16px, 4vw, 40px); padding: 0; }

.tgc-comments__list article {
  padding: 20px 22px;
  margin-bottom: 14px;
  background: var(--surface-card);
  border: var(--border-hairline) solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.tgc-comments__list .comment-author { display: flex; align-items: center; gap: 10px; font-weight: var(--fw-semibold); }
.tgc-comments__list .comment-author img { border-radius: 50%; }

/* ── Footer ──────────────────────────────────────────────────────────────── */

.tgc-footer {
  flex: none;
  padding-block: clamp(36px, 6vw, 56px);
  background: var(--navy-900);
  color: var(--navy-300);
  font-size: var(--fs-sm);
}

.tgc-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: flex-start;
  justify-content: space-between;
}

/* **Le cartouche blanc est pour l'image, pas pour le nom.** Le logo du club est
   dessiné en encre sombre : sur le navy du pied il lui faut un fond clair. Le
   nom, lui, s'écrit dans l'encre du pied — comme dans le tiroir — et posé dans
   ce même cartouche il donnait une pastille blanche portant deux mots, qui ne
   ressemble à rien de ce club. */
.tgc-footer__brand {
  display: inline-flex;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--paper-0);
}

.tgc-footer__brand:has(img) {
  padding: 5px 10px;
  background: var(--paper-0);
  border-radius: var(--radius-sm);
}

/* `:has()` manque encore à quelques navigateurs : le cartouche est alors absent
   et le logo se pose à nu sur le navy. Une classe posée par le gabarit serait
   plus sûre — mais elle demanderait au pied de savoir ce que
   `the_custom_logo()` a rendu, ce qu'il ne sait pas. Le repli est lisible. */
.tgc-footer--section .tgc-footer__brand { color: inherit; }
/* `the_custom_logo()` rend `<a class="custom-logo-link"><img class="custom-logo">` :
   la mesure vaut pour l'image du personnalisateur comme pour le fichier de
   recours, sans quoi le pied afficherait le logo à sa taille d'origine. */
/* La hauteur se règle dans *Personnaliser → Pied de page*. */
.tgc-footer__brand img { display: block; height: var(--tgc-logo-footer-h, 34px); width: auto; max-width: 100%; object-fit: contain; }
.tgc-footer__brand a { display: block; line-height: 0; }

/* Le logo clair se pose sans pastille, comme au tiroir : voir
   `tgc_footer_logo()`, qui ne le choisit que sur un fond sombre. */
.tgc-footer__brand--bare:has(img) {
  padding: 0;
  background: none;
}

.tgc-footer__tagline { max-width: 32ch; margin: 14px 0 0; color: var(--navy-300); }

.tgc-footer a { color: var(--navy-200); text-decoration: none; }
.tgc-footer a:hover { color: var(--paper-0); text-decoration: underline; }

.tgc-footer__nav ul { margin: 0; padding: 0; list-style: none; display: grid; }

/* **Le vide entre deux liens est mort au doigt.** Ils faisaient 18px de haut
   avec 8 d'écart : un pouce qui tombe entre « Actualités » et « Le programme »
   ne fait rien, et rien ne le dit. L'écart passe donc *dans* le lien, ce qui ne
   déplace aucune ligne et fait des cibles de 31px qui se touchent. Le pied est
   la seule autre liste de pages du club depuis que le tiroir est le seul
   chrome ; autant qu'elle se touche. */
.tgc-footer__nav a { display: block; padding-block: 6px; }

/* ── Le pied dans le cadre d'une section ──────────────────────────────────
   La dernière section de l'accueil rend le même gabarit. Elle a déjà sa mesure
   et sa couleur, choisies par le bureau : ce cadre-ci ne pose donc **pas de
   fond** — mais sa marge verticale, oui, voir plus bas — et il prend ses
   teintes de la couleur courante plutôt que
   des jetons navy. Sans cela, un bureau qui met son pied en papier se
   retrouverait avec du bleu clair sur du beige — la même règle que les cartes
   de section, et pour la même raison. */
.tgc-footer--section {
  /* **La même marge que le pied des pages**, corrigé 2026-09-27. Il était
     écrit « ni marge verticale », en comptant sur celle de la section — mais
     le plugin d'accueil pose `padding: 0 !important` sur toutes ses sections,
     ce qui efface les 60 px prévus pour le pied. Le logo touchait le bord du
     haut (0 px mesuré) et la mention légale était à 14 px du bas. La pastille
     du logo le cachait de ses 5 px ; un logo clair, posé sans elle, l'a
     montré. */
  padding-block: clamp(36px, 6vw, 56px);
  background: none;
  color: inherit;
  /* La section centre son contenu ; un pied se lit aligné, comme partout
     ailleurs sur le site. */
  text-align: left;
}

.tgc-footer--section .tgc-footer__tagline,
.tgc-footer--section .tgc-footer__legal {
  color: color-mix(in srgb, currentColor 72%, transparent);
}

.tgc-footer--section a { color: inherit; }
.tgc-footer--section a:hover { color: inherit; text-decoration: underline; }

.tgc-footer--section .tgc-footer__legal {
  border-top-color: color-mix(in srgb, currentColor 16%, transparent);
}

/* La largeur ne manque pas dans une section : les liens se couchent. */
.tgc-footer--section .tgc-footer__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
}

/* **Ce que le bureau ajoute**, entre les liens et la mention légale. Rien n'est
   posé sur le conteneur lui-même : un club qui n'y met rien ne doit pas payer
   une marge, et le gabarit ne le dessine d'ailleurs pas dans ce cas. Les blocs
   du cœur apportent leurs propres mesures ; ce qui est écrit ici est ce que le
   pied doit leur imposer — sa couleur, et une largeur de lecture. */
.tgc-footer__extra {
  margin-top: 28px;
  color: var(--navy-200);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.tgc-footer__extra > * + * { margin-top: 18px; }

.tgc-footer__extra p,
.tgc-footer__extra ul,
.tgc-footer__extra ol { max-width: 60ch; }

.tgc-footer__extra img { max-width: 100%; height: auto; }

/* Le titre d'un widget parle la langue des légendes du club — petites
   capitales de la police d'affichage — plutôt que celle d'un titre de page :
   c'est une étiquette au-dessus d'un bloc, pas une section. */
.tgc-footer__widget-title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy-300);
}

/* Dans une section de l'accueil, la couleur est celle que le bureau a choisie :
   le pied y prend ses teintes de `currentColor`, comme tout le reste de ce
   cadre. Avec les jetons navy en dur, un pied mis en papier donnerait du bleu
   clair sur du beige. */
.tgc-footer--section .tgc-footer__extra,
.tgc-footer--section .tgc-footer__widget-title {
  color: color-mix(in srgb, currentColor 72%, transparent);
}

/* La ligne légale se lit : `navy-400` sur le navy du pied donne 3,96:1, sous
   le seuil d'un texte courant. `navy-300`, comme la signature juste au-dessus. */
.tgc-footer__legal {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid rgb(255 255 255 / 0.08);
  color: var(--navy-300);
  font-size: var(--fs-xs);
}

/* ── Landing sections ────────────────────────────────────────────────────── */

/* Markup for the full-page landing lives in the landing plugin's section
 * options, but its styling belongs here — the plugin stores per-section
 * background and text colours as raw hex (its admin uses a native colour
 * picker), so everything below inherits colour instead of setting it. The same
 * classes therefore read correctly on a navy section and on a paper one. */

.tgc-lp {
  width: 100%;
  max-width: var(--container-lg);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.tgc-lp__eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.72;
  margin-bottom: 12px;
}

.tgc-lp__title {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  letter-spacing: -0.02em;
  line-height: 1.06;
  color: inherit;
  margin: 0;
}

.tgc-lp__title--hero {
  font-size: clamp(2.1rem, 7vw, 4.6rem);
  line-height: 1.04;
}

/* **60rem, soit environ 90 caractères à la ligne**, décidé 2026-09-27 : à 40rem
   le chapeau s'arrêtait à 704 px sur un écran de 1280 et laissait 576 px de
   marge à droite contre 64 à gauche. La largeur du conteneur entière (1152 px)
   aurait fait 150 caractères, où l'œil ne retrouve plus le début de la ligne
   suivante. Sous cette largeur, le texte occupe déjà tout le conteneur. */
.tgc-lp__lead {
  max-width: 60rem;
  margin: 14px 0 0;
  font-size: var(--fs-lg);
  line-height: 1.6;
  opacity: 0.84;
}

.tgc-lp__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

/* **Sur une vidéo, le texte ne s'estompe pas.** Le sur-titre (72 %) et le
   chapeau (84 %) prennent leur retrait de leur transparence, qui les laisse
   voir la couleur qu'il y a dessous — et sous eux il y a une vidéo. Mesuré
   2026-09-27 : sous un voile navy à 65 % posé sur une image blanche, le titre
   donne 5,0:1 mais le chapeau 4,1 et le sur-titre 3,5. Opaques, ils donnent
   5,0 comme lui, et le voile peut rester à 65 % plutôt que de monter à 75 et
   de cacher davantage la vidéo. La taille et la graisse portent la
   hiérarchie. */
.wpfps-video-section .tgc-lp__eyebrow,
.wpfps-video-section .tgc-lp__lead { opacity: 1; }

/* **Les paragraphes de l'accueil sont justifiés, avec césure**, décidé
   2026-09-27. Sans césure, un texte justifié ouvre de grands blancs entre les
   mots, surtout dans une colonne de téléphone ; `hyphens: auto` coupe selon le
   français, que la page déclare (`lang="fr-FR"`). Les titres restent alignés à
   gauche, et la dernière ligne d'un paragraphe aussi. */
.tgc-lp p {
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* A gold rule under the eyebrow — the one accent moment in the hero. */
.tgc-lp__rule {
  display: inline-block;
  width: 38px;
  height: 3px;
  border-radius: 2px;
  background: var(--gold-500);
  margin-bottom: 20px;
}

/* La porte du club dans le menu des sections de l'accueil. Le balisage est du
 * plugin, la peinture est d'ici — comme pour tout ce qu'il dessine. Un filet
 * au-dessus la sépare des ancres : ce n'est pas une septième section, c'est une
 * sortie. */
.tgc-lp-door {
  margin: 28px 20px 0 0;
  padding-top: 22px;
  border-top: var(--border-thin) solid color-mix(in srgb, currentColor 22%, transparent);
}

/* `text-align` en plus de `justify-content` : « Mon espace membre » passe sur
   deux lignes dans 220px, et centrer la boîte ne centre pas les lignes. */
.tgc-lp-door .tgc-button { width: 100%; justify-content: center; text-align: center; }

/* The ghost button is navy-on-paper by default, which disappears on a navy
 * section. On dark grounds it borrows the section's own text colour. */
.tgc-lp__actions .tgc-button--ghost,
.tgc-lp-door .tgc-button--ghost,
.tgc-drawer__door .tgc-button--ghost {
  color: inherit;
  background: color-mix(in srgb, currentColor 8%, transparent);
  box-shadow: inset 0 0 0 var(--border-thin) color-mix(in srgb, currentColor 45%, transparent);
}
.tgc-lp__actions .tgc-button--ghost:hover,
.tgc-lp-door .tgc-button--ghost:hover,
.tgc-drawer__door .tgc-button--ghost:hover {
  color: inherit;
  background: color-mix(in srgb, currentColor 16%, transparent);
  box-shadow: inset 0 0 0 var(--border-thin) color-mix(in srgb, currentColor 70%, transparent);
}

.tgc-lp__grid {
  display: grid;
  gap: 20px;
  margin-top: 32px;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.tgc-lp-card {
  border: var(--border-thin) solid color-mix(in srgb, currentColor 16%, transparent);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 8rem;
}

.tgc-lp-card__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-lg);
  line-height: 1.2;
  margin: 0;
  color: inherit;
}

.tgc-lp-card__text {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.55;
  opacity: 0.78;
}

/* Une carte de section qui porte un article. Le lien est étiré depuis le titre
   — le montage des cartes du programme et de « la flotte » : un navigateur
   refuse d'imbriquer un lien dans un lien, et ce qu'un lecteur d'écran annonce
   reste le titre plutôt que la date et l'extrait récités.

   **L'anneau du clavier est en `currentColor` et non en `--border-focus`**,
   contrairement aux cartes du programme : le bureau choisit la couleur de fond
   de chaque section de l'accueil, et un anneau navy posé sur une section navy
   n'existe pas. Ces cartes se peignent déjà toutes ainsi. */
.tgc-lp-card--news { position: relative; }

.tgc-lp-card__when {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, currentColor 70%, transparent);
}

.tgc-lp-card--news .tgc-lp-card__title a { color: inherit; text-decoration: none; }

.tgc-lp-card--news .tgc-lp-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
}

.tgc-lp-card--news:hover {
  border-color: color-mix(in srgb, currentColor 34%, transparent);
}

.tgc-lp-card--news .tgc-lp-card__title a:focus-visible { outline: none; }

.tgc-lp-card--news .tgc-lp-card__title a:focus-visible::after {
  outline: 2px solid currentColor;
  outline-offset: -2px;
}

/* Le chemin vers la liste entière. La vitrine montre trois articles ; sans
   cette ligne, elle ne dirait nulle part qu'il y en a d'autres. */
.tgc-lp__more { margin-top: 28px; }

/* Marks content that is deliberately provisional, so a skeleton section is
 * never mistaken for finished copy. Remove with the placeholder text. */
.tgc-lp-placeholder {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.55;
  border: var(--border-thin) dashed color-mix(in srgb, currentColor 34%, transparent);
  border-radius: var(--radius-sm);
  padding: 3px 8px;
  align-self: flex-start;
}

.tgc-lp-footer__cols {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

.tgc-lp-footer__legal {
  margin-top: 28px;
  padding-top: 18px;
  border-top: var(--border-thin) solid color-mix(in srgb, currentColor 14%, transparent);
  font-size: var(--fs-xs);
  opacity: 0.7;
}

/* ── Motion preferences ──────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Le programme — targamicale-evenements
 *
 * Le plugin rend le balisage, le thème le peint : même arrangement que les
 * sections du plugin landing (`.tgc-lp-*`). Aucune couleur n'est écrite dans le
 * plugin, et toutes celles-ci sont des jetons.
 *
 * La composition suit la maquette « La page d'un événement » : la page entière
 * est une carte, la couverture porte le titre, et le rail de droite est une
 * pile de cartes sur un fond plus clair.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── L'index ─────────────────────────────────────────────────────────────── */

/* **L'or foncé, parce que celui-ci est posé sur le papier du club.** Mesuré
   2026-08-27 : `gold-600` y donne 3,33:1 pour 11px, quand il en faut 4,5 ;
   `gold-700` donne 5,10. Le jeton `--text-accent` n'est pas touché et
   `gold-500` non plus : sur le navy des cartes, l'or clair donne 5,65 et
   l'assombrir le ferait tomber à 2,64. C'est le fond qui décide, pas la
   couleur. */
.tgc-ev__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-700);
  margin: 0 0 10px;
}

.tgc-ev__lead {
  color: var(--text-muted);
  max-width: 44rem;
  margin: 12px 0 0;
}

.tgc-ev__empty { color: var(--text-muted); }

.tgc-ev__past-title {
  margin: var(--space-9) 0 var(--space-5);
  font-size: var(--fs-lg);
  color: var(--text-muted);
}

.tgc-ev-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
}

/* Ce qui a eu lieu se lit encore, mais ne réclame plus l'attention.
   Par la couleur du cadre et non par l'opacité : voir .tgc-ev-row--past. */
.tgc-ev-list--past .tgc-ev-card { border-color: var(--paper-200); }
.tgc-ev-list--past .tgc-ev-card__date { opacity: 0.72; }

.tgc-ev-card {
  display: flex;
  background: var(--surface-card);
  border: var(--border-hairline) solid var(--paper-300);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.tgc-ev-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* La pastille de date : le repère qu'on cherche en parcourant un programme. */
.tgc-ev-card__date {
  flex: none;
  width: 96px;
  background: var(--navy-700);
  color: var(--paper-0);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.tgc-ev-card__day {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 34px;
  line-height: 1;
}

.tgc-ev-card__mon {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy-200);
}

.tgc-ev-card__body { flex: 1; padding: 18px 20px; min-width: 0; }
.tgc-ev-card__meta { margin: 0 0 8px; display: flex; gap: 8px; flex-wrap: wrap; }

.tgc-ev-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  margin: 0;
}

.tgc-ev-card__title a { color: var(--navy-800); text-decoration: none; }
.tgc-ev-card__title a:hover { color: var(--text-brand); }

/* Une sortie annulée n'a pas de titre-lien, donc pas de lien étiré : la carte
   entière cesse d'être cliquable, et le curseur le dit. Elle garde sa couleur —
   ce n'est pas un texte désactivé, c'est un événement qui n'aura pas lieu. */
.tgc-ev-card__title--shut { color: var(--navy-800); }

/* Toute la carte mène à l'événement — la pastille de date, le lieu, le résumé.

   **Un lien étiré, pas une carte enveloppée dans un `<a>`.** C'est le montage
   que « la flotte de l'amicale » a déjà imposé ailleurs : un navigateur
   n'imbrique pas un lien dans un lien, donc envelopper la carte condamnerait
   tout ce qu'elle pourrait contenir un jour. Ici le titre reste le seul lien,
   et son `::after` couvre la carte. Ce que lit un lecteur d'écran ne change
   pas non plus : le lien s'annonce sous le nom de l'événement, et non en
   récitant la date, le port et le résumé.

   Réservé à la liste : les cartes du rail de la fiche n'ont pas de titre-lien
   et n'ont rien à ouvrir. */
.tgc-ev-list .tgc-ev-card { position: relative; }

.tgc-ev-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* La cible du clavier est la carte entière, donc l'anneau l'entoure elle. Vers
   l'intérieur, parce que la carte masque ce qui déborde d'elle. */
.tgc-ev-card__title a:focus-visible { outline: none; }

.tgc-ev-card__title a:focus-visible::after {
  outline: 2px solid var(--border-focus);
  outline-offset: -2px;
  border-radius: var(--radius-lg);
}

.tgc-ev-card__where {
  margin: 4px 0 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Le point doré sépare la date du lieu sans ajouter un mot. */
.tgc-ev-card__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-500);
  display: inline-block;
  flex: none;
}

.tgc-ev-card__summary { margin: 10px 0 0; color: var(--text-muted); font-size: var(--fs-sm); }

/* ── Les pastilles ───────────────────────────────────────────────────────── */

.tgc-ev-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }

.tgc-ev-chip {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--gold-500);
  color: var(--navy-800);
  font-weight: 600;
}

/* La pastille d'une annulation qui dit pourquoi : bas-de-casse, sans
   interlettrage, et libre de passer à la ligne. Une étiquette d'un mot se crie
   en capitales ; une raison est une phrase, et « ANNULÉ : TROP PEU DE BATEAUX
   INSCRITS » ne tient dans aucune carte de programme. */
.tgc-ev-chip--why {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.72rem;
  max-width: 100%;
}

/* Sur la couverture, tout ce qui n'est pas la nature de l'événement se tait :
   le club n'a qu'un accent, et il va au premier jeton. */
.tgc-ev-chip--quiet {
  background: rgb(255 255 255 / 0.16);
  color: var(--paper-0);
  font-weight: 400;
}

/* Sur la liste, il n'y a pas de fond sombre derrière : la version discrète
   emprunte le bleu pâle plutôt qu'une transparence qui disparaîtrait. */
.tgc-ev-card__meta .tgc-ev-chip--quiet { background: var(--navy-100); color: var(--navy-700); }


/* Les jetons du lecteur : où *il* en est, à côté de la nature de l'événement.
   Deux au plus — sa place, puis ce qui lui est demandé.

   **Le vert est plein, et il ne dit qu'une chose : vous avez une place.** C'est
   ce qu'on vient vérifier dans un programme, donc c'est ce qui doit se lire sans
   être cherché. Aucun jeton d'événement n'est vert, alors la confusion avec
   « Complet » ou « Pré-inscriptions ouvertes » n'existe pas.

   Le rouge est plein pour la même raison : ce qui est demandé se voit ou ne sert
   à rien. Les deux états tièdes — pré-inscrit, liste d'attente — restent cernés :
   remplis de bleu pâle ils devenaient le sosie du jeton discret de l'événement,
   qui parle de l'événement et non de vous.

   Aucun ne prend l'or, qui appartient au type sur cette ligne et dont le club
   n'a qu'un seul. */
/* Au-dessus du lien étiré : ces deux-là portent en infobulle ce que le libellé
   générique tait — le montant, l'échéance — et un lien posé par-dessus les
   rendrait muets. Ils ne sont pas cliquables, ce qui est correct : ils ne sont
   pas des liens. */
.tgc-ev-chip--mine { position: relative; z-index: 1; font-weight: 600; }

/* Le 700 : cette pastille est le cas même du texte posé sur son propre lavis,
   où le 600 tombe sous 4,5:1. Voir `tokens-colors.css`. */
.tgc-ev-chip--mine.tgc-ev-chip--ok {
  background: var(--status-success-bg);
  color: var(--green-700);
}

/* Le rouge plutôt que l'ambre : l'ambre appartient à la famille de l'or et se
   lirait, à côté du jeton doré du type, comme le même accent délavé. */
.tgc-ev-chip--mine.tgc-ev-chip--due {
  background: var(--status-danger-bg);
  color: var(--red-700);
}

.tgc-ev-chip--mine.tgc-ev-chip--info {
  background: transparent;
  color: var(--status-info-fg);
  box-shadow: inset 0 0 0 1px currentcolor;
}

/* ── La page d'un événement ──────────────────────────────────────────────── */

.tgc-ev-page {
  background: var(--paper-0);
  border: var(--border-hairline) solid var(--paper-300);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

/*
 * La couverture porte le titre. Sans photographie, un dégradé de mer : le club
 * a des événements sans image et la page ne doit pas en avoir l'air.
 */
/*
 * **Une couverture, deux noms.** `.tgc-ev-cover` est celle d'un événement,
 * `.tgc-cover` celle d'un récit photo : c'est le même objet et le même dessin,
 * peint une seule fois. Les deux noms tiennent parce que le balisage vient de
 * deux endroits — une extension et le thème — et qu'un renommage coûterait une
 * reprise de la page d'un événement et de ses contrôles sans rien acheter au
 * lecteur.
 */
.tgc-ev-cover,
.tgc-cover {
  position: relative;
  min-height: 300px;
  display: flex;
  align-items: flex-end;
  background: linear-gradient(170deg, var(--sea-shoal) 0%, var(--sea-mid) 55%, var(--navy-800) 100%);
  background-size: cover;
  background-position: center;
}

.tgc-ev-cover--photo,
.tgc-cover--photo { background-color: var(--navy-800); }

/* Le dégradé sombre est la raison pour laquelle un titre blanc tient sur une
   photographie de ponton en plein soleil. */
.tgc-ev-cover__fade,
.tgc-cover__fade {
  position: absolute;
  inset: auto 0 0 0;
  height: 66%;
  background: linear-gradient(to top, rgb(5 27 56 / 0.92), transparent);
  z-index: 1;
}

.tgc-ev-cover__body,
.tgc-cover__body {
  position: relative;
  z-index: 2;
  padding: 0 34px 28px;
  width: 100%;
}

.tgc-ev-cover h1,
.tgc-cover h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.7rem, 3.6vw, 2.5rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--paper-0);
  margin: 0 0 8px;
  text-wrap: balance;
}

.tgc-ev-cover__meta,
.tgc-cover__meta { color: var(--navy-200); font-size: 0.98rem; margin: 0; }

.tgc-ev-body {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
}

/* Une seule colonne quand le rail n'avait qu'une carte à porter : garder un
   tiers de la largeur, un fond et un filet pour trois lignes revenait à faire
   croire qu'il manquait quelque chose à droite. La carte descend dans la
   colonne principale — voir `event.php`, qui compte avant de placer. */
.tgc-ev-body--single { grid-template-columns: minmax(0, 1fr); }

/* En une colonne, ce n'est plus une carte : c'est une section, et elle prend
   l'habillage des autres — un titre en filet, du texte en dessous, aucun cadre.
   Une boîte de 460px flottant entre une carte pleine largeur et « Les tarifs »
   se lisait comme un morceau venu d'ailleurs, ce qu'elle était. */
.tgc-ev-body--single .tgc-ev-card {
  display: block;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  transition: none;
}

.tgc-ev-body--single .tgc-ev-card:hover { transform: none; box-shadow: none; }

/* Le titre de la carte devient un titre de section, filet compris. */
.tgc-ev-body--single .tgc-ev-card > h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--navy-800);
  margin: 30px 0 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.tgc-ev-body--single .tgc-ev-card > h3::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--paper-300);
}

/* Le corps se lit comme le reste de la colonne, pas comme une note de rail. */
.tgc-ev-body--single .tgc-ev-card > p { font-size: var(--fs-md, 1rem); color: var(--text-body); }
.tgc-ev-body--single .tgc-ev-card .tgc-ev-fills { max-width: 460px; }
.tgc-ev-body--single .tgc-ev-card .tgc-ev-form,
.tgc-ev-body--single .tgc-ev-card .tgc-ev-rows,
.tgc-ev-body--single .tgc-ev-card .tgc-ev-todo,
/* La pastille est poussée à droite de sa ligne : sur toute la largeur d'une
   colonne unique elle finissait à un mètre de la date qu'elle qualifie. */
.tgc-ev-body--single .tgc-ev-card .tgc-ev-until { max-width: 460px; }

.tgc-ev-body__main { padding: 30px 34px 38px; min-width: 0; }

.tgc-ev-body__side {
  padding: 30px 30px 38px;
  border-left: var(--border-hairline) solid var(--paper-200);
  background: var(--paper-50);
  min-width: 0;
}

@media (max-width: 54rem) {
  .tgc-ev-body { grid-template-columns: 1fr; }
  .tgc-ev-body__side {
    border-left: 0;
    border-top: var(--border-hairline) solid var(--paper-200);
    /* Quelqu'un qui ouvre ce lien depuis un message vient s'inscrire. */
    order: -1;
  }
  .tgc-ev-cover__body,
  .tgc-cover__body { padding: 0 20px 22px; }
  .tgc-ev-body__main { padding: 24px 20px 30px; }
}

/*
 * Un titre de section et un filet qui prend ce qui reste : c'est ce qui range
 * la colonne sans poser une boîte de plus autour de chaque bloc.
 */
.tgc-ev-sec {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--navy-800);
  margin: 30px 0 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.tgc-ev-sec:first-child { margin-top: 0; }
.tgc-ev-sec::after { content: ''; flex: 1; height: 1px; background: var(--paper-300); }

.tgc-ev-sec__note {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-500);
  font-weight: 400;
}

/* La raison de l'annulation, en entier, sous « Cet événement a été annulé ».
   La pastille la coupe ; c'est ici qu'on vient la lire. */
.tgc-ev-why {
  margin: 8px 0 0;
  font-size: 0.9rem;
  color: var(--ink-700);
}

.tgc-ev-desc { font-size: 0.97rem; }
.tgc-ev-desc p { margin: 0 0 12px; }

/* Le rappel d'une campagne de confirmation, sous le nom du membre dans le
   tiroir. Discret : c'est un rappel, pas une barrière. L'or le désigne parce
   que c'est la seule chose que le club attend de lui — et il n'y a rien d'autre
   de doré dans le tiroir. */
.tgc-drawer__ask {
  display: block;
  margin: 10px 0 0;
  padding: 9px 12px;
  border-radius: var(--radius-md);
  background: rgb(214 142 0 / 0.16);
  border-left: 2px solid var(--gold-500);
  color: var(--paper-0);
  font-size: 0.82rem;
  line-height: 1.4;
}

.tgc-drawer__ask:hover,
.tgc-drawer__ask:focus-visible { background: rgb(214 142 0 / 0.28); }

/* ── Maintenance ─────────────────────────────────────────────────────────────
 *
 * Une bande sur le devant du site, **pour le bureau seul** : il est le seul à
 * pouvoir naviguer connecté pendant les travaux, donc le seul à pouvoir croire
 * que tout va bien. Un visiteur ne la voit pas — le site public est ouvert, et
 * lui annoncer une maintenance qui ne le concerne pas serait l'inquiéter pour
 * rien.
 *
 * Dans le flux et non fixe : elle dit un état, elle ne réclame pas un geste, et
 * une bande fixe mangerait une mesure sur toutes les pages du club.
 */
.tgc-maintenance-band {
  margin: 0;
  padding: 9px 20px;
  background: var(--gold-500);
  color: var(--navy-950);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-align: center;
}

/* ── Le carnet de route ──────────────────────────────────────────────────── */

/*
 * Le lien vers le roadbook, sous la description d'un événement.
 *
 * **Pas d'or, et pas un bouton.** L'accent unique du club désigne ce qu'il
 * attend du lecteur — s'inscrire, confirmer, régler ; consulter un carnet de
 * route n'engage rien. Le même raisonnement que la demande de don, devenue du
 * texte le jour où elle a cessé d'être un aplat au milieu d'une page qu'on lit.
 *
 * Un filet à gauche plutôt qu'un cadre : le bloc se signale sans poser une
 * boîte de plus dans une colonne qui en a déjà.
 */
.tgc-ev-carnet {
  margin: 18px 0 4px;
  padding: 2px 0 2px 14px;
  border-left: 2px solid var(--paper-300);
}

.tgc-ev-carnet__label {
  margin: 0 0 2px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-500);
}

/* La cible fait 44px de haut par son remplissage, sans que le lien dessine
   une boîte : la règle apprise sur les liens du pied de page. */
.tgc-ev-carnet__link {
  display: inline-block;
  padding: 9px 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--navy-800);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tgc-ev-carnet__link:hover,
.tgc-ev-carnet__link:focus-visible { color: var(--navy-700); }

.tgc-ev-carnet__note {
  margin: 0;
  font-size: 0.82rem;
  color: var(--ink-500);
}

/* ── Le roadbook lui-même ────────────────────────────────────────────────── */

/*
 * Le contenu est écrit dans l'éditeur de blocs, donc le `theme.json` du thème
 * lui impose déjà la palette, les polices et les mesures du club : il n'y a ici
 * que le cadre, et la mesure de lecture.
 */
.tgc-rb { max-width: 720px; margin: 0 auto; }

.tgc-rb__head {
  margin: 0 0 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--paper-300);
}

/* Le retour est en tête : un roadbook fait plusieurs écrans, et un lien de
   sortie au bas se lit après qu'on a renoncé à le trouver. */
.tgc-rb__back {
  display: inline-block;
  padding: 8px 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--ink-500);
}

.tgc-rb__back:hover,
.tgc-rb__back:focus-visible { color: var(--navy-800); }

.tgc-rb__eyebrow {
  margin: 10px 0 4px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-700);
}

.tgc-rb__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  line-height: 1.15;
  color: var(--navy-900);
}

.tgc-rb__when {
  margin: 8px 0 0;
  color: var(--ink-700);
  font-size: 0.95rem;
}

/* Ce qu'un raccourci verse dans le roadbook : la liste des inscrits, le
   programme. Les deux sont rendus par les gabarits de la page d'un événement,
   donc ils sont déjà peints — il ne reste qu'à les espacer. */
.tgc-rb-part { margin: 22px 0; }

/* ── Le déroulé ──────────────────────────────────────────────────────────── */

.tgc-ev-days { display: grid; }

.tgc-ev-day {
  display: grid;
  grid-template-columns: 5.4rem 1fr;
  gap: 16px;
  padding: 14px 0;
  border-top: var(--border-hairline) solid var(--paper-200);
}

.tgc-ev-day:last-child { border-bottom: var(--border-hairline) solid var(--paper-200); }

/* Même raison : ces jours-là sont écrits sur le blanc d'une carte. */
.tgc-ev-day__when {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--gold-700);
  text-transform: uppercase;
  padding-top: 3px;
}

.tgc-ev-day__rows { display: grid; gap: 7px; min-width: 0; }

.tgc-ev-slot {
  display: grid;
  grid-template-columns: 3.6rem 1fr;
  gap: 12px;
  font-size: 0.92rem;
  align-items: baseline;
}

.tgc-ev-slot time { font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-500); }
.tgc-ev-slot b { color: var(--navy-800); font-weight: 600; }
.tgc-ev-slot em { font-style: normal; color: var(--text-muted); }

@media (max-width: 54rem) {
  .tgc-ev-day { grid-template-columns: 1fr; gap: 6px; }
}

/* ── Le lieu ─────────────────────────────────────────────────────────────── */

.tgc-ev-map { margin-top: 4px; }

/* Le repère quand son paquet n'a pas tourné : le lieu en toutes lettres, dans
   la boîte qui l'attendait. Une boîte vide de 190px ne dit rien à personne — et
   la page connaissait le lieu depuis le début. */
.tgc-locator-root--absent {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 88px;
  padding: 16px 20px;
  border: var(--border-hairline) dashed var(--paper-400);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  text-align: center;
}

/* ── Les inscrits ────────────────────────────────────────────────────────── */

.tgc-ev-tabs { display: flex; gap: 6px; margin: 14px 0 0; }

.tgc-ev-tab {
  font-size: 0.84rem;
  padding: 7px 13px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  border: var(--border-hairline) solid transparent;
  color: var(--text-muted);
}

.tgc-ev-tab--on {
  background: var(--paper-0);
  border-color: var(--paper-300);
  border-bottom-color: var(--paper-0);
  color: var(--navy-800);
  font-weight: 600;
}

.tgc-ev-tab__n {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--ink-500);
  margin-left: 5px;
}

.tgc-ev-roster {
  border: var(--border-hairline) solid var(--paper-300);
  border-radius: 0 var(--radius-md) var(--radius-md) var(--radius-md);
  overflow: hidden;
  margin-top: -1px;
}

/* Trois colonnes quand il y a trois choses à dire, deux sinon : une colonne
   vide pour tout le monde n'est pas dessinée du tout, et la grille suit. */
.tgc-ev-roster--2 .tgc-ev-rrow { grid-template-columns: 1.4fr 1.1fr; }
.tgc-ev-roster--1 .tgc-ev-rrow { grid-template-columns: 1fr; }

.tgc-ev-rrow {
  display: grid;
  grid-template-columns: 1.4fr 1.1fr 0.8fr;
  gap: 14px;
  padding: 11px 15px;
  border-top: var(--border-hairline) solid var(--paper-200);
  font-size: 0.9rem;
  align-items: center;
}

.tgc-ev-rrow--head {
  border-top: 0;
  background: var(--paper-50);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.tgc-ev-rrow b { color: var(--navy-800); font-weight: 600; }
.tgc-ev-rrow__boat { color: var(--ink-700); }
.tgc-ev-rrow__port { color: var(--text-muted); font-size: 0.85rem; }

/* Le nom et le bateau ouvrent leur fiche, pour un membre connecté.
   Souligné en pointillé plutôt qu'en plein : la liste en compte deux par ligne
   et un tableau tout souligné se lit comme un formulaire. La couleur reste
   celle de la colonne — c'est le même texte, devenu ouvrable, pas une action
   nouvelle, et l'accent doré du club appartient à un geste. */
.tgc-ev-fiche {
  color: inherit;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  text-decoration-color: var(--paper-400, #CBBCB0);
  border-radius: 3px;
}

/* Au doigt, une ligne de texte de 18px est une petite cible. La zone est
   agrandie sans toucher à la mise en page : la marge négative rend exactement
   ce que la marge intérieure prend, donc rien ne bouge à l'écran.
   **1px, et c'est le maximum.** `inline-block` porte déjà la boîte de 18 à 24,
   et il ne reste que 27px entre les deux liens d'une ligne : à 2px ils se
   chevauchent, et le lien du bas gagnerait le recouvrement. On atteint 26px,
   pas les 44 recommandés — y arriver demanderait de redessiner la ligne, ce qui
   n'est pas une décision de feuille de style. */
.tgc-ev-fiche {
  display: inline-block;
  padding-block: 1px;
  margin-block: -1px;
}

.tgc-ev-fiche:hover,
.tgc-ev-fiche:focus-visible {
  color: var(--navy-800);
  text-decoration-style: solid;
  text-decoration-color: currentColor;
}

.tgc-ev-mine {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--gold-100);
  color: var(--gold-700);
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  margin-left: 7px;
}

.tgc-ev-privacy { font-size: 0.8rem; color: var(--ink-500); margin: 9px 0 0; }

@media (max-width: 54rem) {
  .tgc-ev-rrow { grid-template-columns: 1fr; gap: 3px; }
  .tgc-ev-rrow--head { display: none; }

  /*
   * **Un tiret sans intitulé ne dit rien.** Replié en blocs, l'en-tête de la
   * liste disparaît : « — » seul, sous un nom et un bateau, se lit comme une
   * ligne dont le contenu manque et non comme « le club ne sait pas quel est
   * son port ». L'absence dit la même chose sans énigme.
   *
   * La cellule entière, pas seulement le tiret : vidée, elle garderait sa
   * gouttière et laisserait un blanc au bas de chaque bloc. Sur la table, où
   * le tiret tient la grille sous son en-tête, rien ne bouge.
   */
  .tgc-ev-rrow > span:has(> .tgc-ev-rrow__none:only-child) { display: none; }
}

/* ── Le rail de droite ───────────────────────────────────────────────────── */

.tgc-ev-body__side .tgc-ev-card {
  display: block;
  background: var(--paper-0);
  border: var(--border-hairline) solid var(--paper-300);
  border-radius: var(--radius-md);
  padding: 18px 19px;
  margin-bottom: 16px;
  box-shadow: none;
  transition: none;
}

.tgc-ev-body__side .tgc-ev-card:hover { transform: none; box-shadow: none; }

/* Une seule carte porte l'accent : celle qui demande un geste. */
/* La carte qui demande un geste, et il n'y en a qu'une.

   Écrite `.tgc-ev-card--act` seule, elle ne gagnait jamais : `.tgc-ev-body__side
   .tgc-ev-card` la précède d'un cran en spécificité et repose la bordure pâle,
   si bien que l'accent était dans le balisage et nulle part sur l'écran. Le
   sélecteur porte donc le même poids que celui qu'il corrige. Hors du rail — la
   fiche n'en a pas d'autre usage aujourd'hui — la forme courte suffit. */
.tgc-ev-card--act,
.tgc-ev-body__side .tgc-ev-card--act {
  border-color: var(--gold-500);
  box-shadow: var(--shadow-md);
}

.tgc-ev-body__side h3 {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--navy-800);
  margin: 0 0 4px;
  font-weight: 700;
}

.tgc-ev-card__text { margin: 0; font-size: 0.88rem; color: var(--text-muted); }
.tgc-ev-card__fine { font-size: 0.79rem; color: var(--ink-500); margin: 9px 0 0; }

/* L'offre d'adhésion. Le bouton du thème, jamais son accent : l'or va à ce que
   le club attend — régler, confirmer — et adhérer est une proposition. Pleine
   largeur du rail, qui fait 300px et où un bouton court flotterait. */
.tgc-ev-card__act { margin: 12px 0 0; }
.tgc-ev-card__act .tgc-button { width: 100%; }

.tgc-ev-note {
  background: var(--gold-100);
  color: var(--gold-700);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 0.85rem;
  margin: 12px 0 0;
}

/* Une porte fermée, et non une note : la vie associative n'accepte que les
   membres, et c'est ce qu'il faut lire avant de chercher où ajouter un ami.
   Le rouge du club, celui de ses avis d'échec — il ne sert nulle part
   ailleurs sur cette page, donc il ne se confond avec rien. */
.tgc-ev-note--strict { background: var(--red-100); color: var(--red-700); }

/* ── Jusqu'à quand ───────────────────────────────────────────────────────── */

/* La date porte la graisse, le décompte s'écarte à droite et se lit comme un
   état. Ce qui a été retiré : deux tuiles navy disant « 37 jours · 05 h » avec,
   dessous, « jusqu'au 4 octobre » — le même fait à deux échelles, et un second
   aplat de la couleur de la marque à trois centimètres du seul bouton doré de
   la carte. */
.tgc-ev-until {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: var(--border-hairline) solid var(--paper-200);
}

/* Le libellé prend la ligne entière : posé à côté de la date, il se coupait en
   « PRÉ-INSCRIPTIONS JUSQU' / AU » dès qu'on descendait sous 360px. */
.tgc-ev-until__lab {
  flex: 0 0 100%;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.tgc-ev-until__date {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--navy-800);
}

.tgc-ev-until__left {
  margin-left: auto;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--paper-100);
  font-size: 0.78rem;
  color: var(--ink-500);
  white-space: nowrap;
}

/* Sous 400px la pastille ne tient plus à côté de la date — mesuré : 249px
   demandés dans 242 disponibles, elle passait donc seule sur une troisième
   ligne, poussée à droite d'un vide. Elle monte rejoindre le libellé, qui est
   petit, et la date prend la ligne entière dont elle a besoin de toute façon.
   L'ordre visuel reste celui du balisage. */
@media (max-width: 25rem) {
  .tgc-ev-until__lab { flex: 0 1 auto; order: 1; }
  .tgc-ev-until__left { order: 2; }
  .tgc-ev-until__date { flex: 0 0 100%; order: 3; }
}

/* Le titre de la carte et le libellé sont d'une même famille, à deux niveaux :
   même mono, mêmes capitales, la taille et la graisse faisant la hiérarchie.

   **Deux sélecteurs, et c'est une affaire de spécificité.** `.tgc-ev-body__side
   h3` (0,1,1) et `.tgc-ev-body--single .tgc-ev-card > h3` (0,2,1) habillent
   déjà tous les titres du rail et de la colonne unique ; une classe seule
   (0,1,0) perd contre les deux. En colonne unique le filet du titre de section
   reste — un sur-titre en mono suivi d'un filet est exactement ce dessin-là. */
.tgc-ev-body__side h3.tgc-ev-ask__title,
.tgc-ev-body--single .tgc-ev-card > h3.tgc-ev-ask__title {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy-800);
}

/* ── La jauge ────────────────────────────────────────────────────────────── */

/* Une barre par sujet — les personnes, les bateaux — du même dessin, parce que
   les deux seuils ne se hiérarchisent pas : la confirmation attend les deux.

   **La phrase est dans la piste.** Deux barres qui se touchent et se nomment
   elles-mêmes font un seul objet, et c'est leur écart qu'on lit ; une phrase
   posée entre elles les rendait à deux jauges séparées. */
.tgc-ev-gauge__bar {
  position: relative;
  display: flex;
  align-items: center;
  height: 30px;
  border-radius: var(--radius-pill);
  background: var(--paper-200);
  overflow: hidden;
  margin-top: 13px;
}

.tgc-ev-gauge__bar + .tgc-ev-gauge__bar { margin-top: 6px; }

/* Le remplissage passe *sous* la phrase, en teinte claire, pour qu'elle reste
   lisible d'un bout à l'autre de la piste. La teinte se calcule ici plutôt que
   dans le plugin : celui-ci ne transmet que la couleur choisie par le bureau,
   et le thème peint — c'est la règle de tout ce fichier.

   `--tgc-gauge` absente vaut le bleu du club. Le premier `background` est le
   recours d'un navigateur sans `color-mix()`, qui garde alors une barre bleue
   pâle plutôt que rien. */
.tgc-ev-gauge__fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: var(--radius-pill);
  background: var(--navy-200);
  background: color-mix(in srgb, var(--tgc-gauge, var(--navy-600)) 28%, var(--paper-0));
}

/* Verte une fois la cible atteinte — le minimum est fait, ou le ponton est
   complet : dans les deux cas la barre a fini son travail, et c'est la phrase
   qui dit lequel. **Non réglable, contrairement à la couleur du remplissage** :
   elle ne décore pas, elle dit un état, et elle se déplace d'une barre à
   l'autre — une couleur qui bouge ne peut pas identifier un sujet. */
.tgc-ev-gauge__fill.is-full {
  background: var(--green-100);
  background: color-mix(in srgb, var(--status-success-fg) 30%, var(--paper-0));
}

/* Le repère du minimum, une fois que la barre vise le maximum.
   Un trait plutôt qu'un chiffre : la place dans la pilule est prise par la
   phrase, et le minimum n'est pas ce qu'on vient lire — c'est ce qu'on veut
   pouvoir situer. Il porte son intitulé en `title` et en texte pour les
   lecteurs d'écran, donc il n'est jamais purement visuel.

   En navy translucide, pour tenir aussi bien sur la piste nue que sur le
   remplissage pâle, qui le recouvre dès que la cible est dépassée. Au-dessus du
   remplissage et sous la phrase : c'est un repère sur la piste, pas un mot. */
.tgc-ev-gauge__min {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: rgb(8 36 76 / 0.28);
  pointer-events: auto;
}

/* C'est cette ligne qu'on lit ; le remplissage ne donne que l'ordre de grandeur.
   L'ancienne légende « min. 15 · 27 inscrits · max. 50 » demandait au lecteur
   de rapprocher trois nombres pour répondre à une question qu'une phrase pose
   d'elle-même. */
.tgc-ev-gauge__says {
  position: relative;
  padding: 0 15px;
  font-size: var(--fs-sm);
  color: var(--ink-700);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tgc-ev-gauge__says b {
  font-family: var(--font-mono);
  color: var(--navy-800);
  font-weight: 600;
}

/* Ce que le repère veut dire, dit une fois sous les deux barres plutôt qu'entre
   elles : c'est leur écart qu'on regarde, et une ligne au milieu les séparerait
   à nouveau. */
.tgc-ev-gauge__minima {
  margin: 8px 0 0;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.tgc-ev-gauge__minima b {
  font-family: var(--font-mono);
  color: var(--ink-700);
  font-weight: 600;
}

/* Sous les inscrits, une fois l'événement confirmé : la barre y est la légende
   de la liste, pas une carte. */
.tgc-ev-fill { margin: 14px 0 22px; max-width: 460px; }

/* Dans la carte d'action, sous la phrase qui dit si ça aura lieu. */
.tgc-ev-fills { margin-top: 14px; }

/* La double jauge : deux pistes qui se touchent, chacune portant sa phrase.
   Elles mesurent deux choses qui ne contraignent pas la même — le ponton et les
   couverts — et on les lit l'une contre l'autre : elles partagent leur bord
   gauche et l'écart entre les deux se voit d'un coup d'œil. Un peu plus large
   qu'une barre seule, parce que la phrase vit maintenant dedans et qu'à 460px
   elle aurait été coupée sur les événements aux longs intitulés. */
.tgc-ev-fill.is-pair,
.tgc-ev-fills.is-pair {
  max-width: 620px;
}


/* La réponse à « est-ce que ça aura lieu », qui se lit sous le remplissage dont
   elle est la conclusion — et qui le suit désormais où qu'il aille, le rail ou
   la liste des inscrits. Elle porte donc sa propre typographie : héritée de
   `.tgc-ev-card__text`, elle n'aurait rien eu hors d'une carte. */
.tgc-ev-outlook {
  margin: 12px 0 0;
  /* Sa propre mesure, et non celle des pistes : dans la jauge elle héritait de
     460px — 620 pour une double barre — et « Les inscriptions sont closes
     depuis le 25 août 2026. L'événement aura lieu. » se coupait en deux pour
     trois mots. Mesurée à 480px, elle tient ici avec de la marge, et la
     formulation longue du minimum manqué se replie sur une largeur de lecture
     plutôt que sur les 1010px de la colonne. */
  max-width: 640px;
  font-size: 0.88rem;
  color: var(--text-muted);
}

/* ── Les listes du rail ──────────────────────────────────────────────────── */

.tgc-ev-rows { display: grid; margin-top: 10px; }

.tgc-ev-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  border-top: var(--border-hairline) solid var(--paper-200);
  font-size: 0.89rem;
}

.tgc-ev-row:first-child { border-top: 0; }
.tgc-ev-row span { color: var(--text-muted); }
.tgc-ev-row b { font-family: var(--font-mono); color: var(--navy-800); font-weight: 600; }

/* Une échéance passée reste lisible et cesse d'être une consigne.
   **Estompée par la couleur, jamais par l'opacité** : à 0,5 le texte tombait à
   2,07:1 sous un commentaire qui affirmait qu'il restait lisible. C'est le
   défaut déjà trouvé et corrigé sur les puces du bureau, resté ici. Le filet
   et le fond pâlissent, l'encre non. */
.tgc-ev-row--past { color: var(--ink-500); }
.tgc-ev-row--past span,
.tgc-ev-row--past b { color: var(--ink-500); }
.tgc-ev-row--past b { text-decoration: line-through; }

/* ── La distinction ──────────────────────────────────────────────────────── */

/* Le badge au-dessus, le texte dessous et centré : l'écusson est rond et
   découpé, et posé à gauche d'un bloc de texte il laissait une encoche de blanc
   que rien ne rattrapait. Centré, il devient l'objet de la carte. */
.tgc-ev-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.tgc-ev-badge h3 { margin: 0; }
.tgc-ev-badge p { margin: 0; font-size: 0.88rem; color: var(--text-muted); }

.tgc-ev-medal {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  flex: none;
  background: radial-gradient(circle at 34% 30%, var(--gold-300), var(--gold-500) 62%, var(--gold-700));
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-sm);
  color: var(--navy-800);
}

.tgc-ev-medal svg { width: 22px; height: 22px; }

/* Le vrai badge, quand myCred en tient un pour la référence de l'événement.
   `contain` et jamais `cover` : un badge est un dessin, et le recadrer coupe
   le bord d'un écusson. Pas de fond doré derrière — l'image porte ses propres
   couleurs, et l'accent du club ne se met pas sous une autre. */
.tgc-ev-badge__image {
  /* 109px : la taille que le survol donnait, prise pour de bon. Un écusson est
     un dessin dense — un bateau, un nom, une année — et à 78px il fallait
     s'approcher pour le lire, ce que la loupe compensait au lieu de le régler.
     Toujours sous les 150px de la vignette servie, donc net.
     `contain` et jamais `cover` : recadrer couperait le bord découpé. */
  width: 109px;
  height: 109px;
  flex: none;
  object-fit: contain;
}

/* Où le lecteur se situe dans la liste qui suit : l'état en gras, le nombre de
   participants après un point médian. Une ligne, au-dessus des noms, parce que
   c'est une place dans cette liste et non une réponse à « puis-je venir ». */
/* L'état et la sortie sur une ligne, quand la ligne les porte. Sur un
   téléphone ils demandent 396px pour 340 utiles : le `wrap` fait passer le lien
   dessous, ce qui vaut mieux qu'un point de rupture choisi au jugé. */
.tgc-ev-standing__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 20px;
  margin: 14px 0 18px;
}

/* En tête de la carte de la réservation, la marge du haut ferait démarrer son
   contenu 14px plus bas que celui des cartes voisines. Sous « Les inscrits »
   elle sépare la ligne de la jauge, et elle y reste. */
.tgc-ev-card > .tgc-ev-standing__row:first-child { margin-top: 0; }

.tgc-ev-standing { margin: 0; }

/* **L'état est un titre**, de la graisse et de la taille des titres de cartes —
   « Vos choix », « S'inscrire » — parce que c'est la même voix : le club qui
   s'adresse au lecteur. Sous « Les inscrits » il n'héritait de rien, cette
   section étant dans la colonne centrale ; le sélecteur du rail
   (`.tgc-ev-body__side h3`, 0,1,1) le coiffe déjà là-bas, et celui-ci porte le
   même poids pour ne pas lui disputer la place. */
.tgc-ev-standing h3,
.tgc-ev-body__side .tgc-ev-standing h3 {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy-800);
  margin: 0;
}

.tgc-ev-standing p {
  margin: 2px 0 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* ── Qui vient, sur un événement de vie associative ──────────────────────── */

/* Des cases plutôt qu'un répéteur : le club ne propose que ce que son registre
   connaît, et il n'y a donc rien à saisir. Une ligne par personne, son lien de
   parenté en retrait — c'est lui qui dit pourquoi elle est là. */
/* Le même filet que sous l'échéance, et pour la même raison : ce qui suit est
   un autre sujet. Sans lui, « Qui vient » venait se coller à la date de clôture
   comme s'il en était la suite.

   **`.tgc-ev-form fieldset` (0,1,1) remet la bordure, la marge et le rembourrage
   à zéro** et bat une classe seule (0,1,0) : écrit sans son sélecteur de forme,
   le filet était dans la feuille et nulle part sur l'écran. Troisième fois que
   ce piège se referme sur ce fichier — le thème habille les éléments du
   formulaire globalement, et une classe ne suffit jamais contre lui. */
.tgc-ev-form fieldset.tgc-ev-kin {
  border: 0;
  border-top: var(--border-hairline) solid var(--paper-200);
  margin: 14px 0 0;
  padding: 12px 0 0;
}

.tgc-ev-kin legend {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-500);
  padding: 0;
}

/* Une grille et non un `flex-wrap` : dans un rail de 300px la case, le nom et
   le lien de parenté se répartissaient sur trois lignes, la case seule sur la
   première. Ici la case garde son nom à côté d'elle quelle que soit la
   largeur, et ce qui la qualifie vient dessous, aligné sur le nom. */
/* **`.tgc-ev-form label` (0,1,1) bat une classe seule (0,1,0)** et remet ces
   lignes en `display: block` : la grille était écrite et n'existait nulle part.
   C'est le même piège que `.bcp-input` contre les champs du thème, et il se
   règle de la même façon — le sélecteur porte le poids de celui qu'il corrige. */
.tgc-ev-form label.tgc-ev-kin__one {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  align-items: baseline;
  margin: 10px 0 0;
  padding: 0;
}

.tgc-ev-kin__one input[type="checkbox"] { grid-column: 1; grid-row: 1; margin: 0; }

/* Le libellé porte le nom — « Inscription de votre conjoint : Camille
   Rousseau » se lit d'un trait — et sur deux lignes il reste aligné sur
   lui-même plutôt que de repasser sous la case. */
.tgc-ev-kin__name { grid-column: 2; grid-row: 1; color: var(--navy-800); font-weight: 600; }

/* Le membre s'inscrit sans rien cocher : c'est un fait, pas une commande, et
   c'est le dessin du bateau unique. */
.tgc-ev-kin__solo { margin: 10px 0 0; font-size: var(--fs-sm); color: var(--text-body); }

.tgc-ev-kin__solo b { color: var(--navy-800); font-weight: 600; }

.tgc-ev-kin__tariff { margin-top: 8px; }

/* Le bateau quand il n'y en a qu'un : un fait, pas une liste — et le nom sur la
   ligne de la légende, parce qu'un fait tient sur une ligne. */
.tgc-ev-boat__name {
  color: var(--text-body);
  font-weight: 400;
}


/* Se désister : un lien de bas de carte, pas un bouton.
   L'accent du club va au geste attendu — s'inscrire, régler — et une carte n'en
   porte qu'un. Le retrait se trouve quand on le cherche, et ne se propose pas. */
/* La marge du haut est réduite d'autant que le bouton se donne de hauteur :
   l'écart visuel avec ce qui précède ne bouge pas, et la carte ne grandit que
   de ce qu'il faut à une cible qu'un doigt atteint. */
/* ── La fenêtre qui demande confirmation ─────────────────────────────────
   Une question, pas un formulaire : la boîte est étroite, et les deux gestes
   se lisent sur une ligne — revenir à gauche, discret, parce que c'est la
   sortie la plus probable d'une fenêtre qu'on a ouverte pour réfléchir ; ce
   que le club fait à droite. */
.tgc-ev-modal__box--ask { max-width: 440px; }

.tgc-ev-leave__acts {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: var(--border-hairline) solid var(--paper-300);
}

.tgc-ev-leave__back {
  font-size: var(--fs-sm);
  color: var(--ink-700);
  text-decoration: none;
  padding-block: 11px;
}

.tgc-ev-leave__back:hover { color: var(--navy-800); text-decoration: underline; }

/* Sur 358px les deux libellés se cassaient chacun en deux lignes, ce qui fait
   une rangée de commandes plus haute que la question qu'elle sert. Le retour
   tient sur une ligne — c'est le plus court — et le bouton prend ce qui reste,
   quitte à passer à deux lignes lui-même : c'est lui qui porte la phrase. */
@media (max-width: 480px) {
  .tgc-ev-leave__acts { gap: var(--space-3); }
  .tgc-ev-leave__back { white-space: nowrap; }
}

/* **Le rouge et non l'or.** L'accent du club désigne ce qu'il attend de vous ;
   ceci défait quelque chose, et une couleur d'état n'entre pas en concurrence
   avec lui. `red-700` parce que c'est un fond : sur lui le blanc tient, là où
   `red-600` est le ton qu'on pose *sur* un lavis. */
.tgc-ev-leave__acts .tgc-ev-btn--danger {
  width: auto;
  background: var(--red-700);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.tgc-ev-leave__acts .tgc-ev-btn--danger:hover { background: var(--red-600); }

.tgc-ev-leave { margin: 0; }

.tgc-ev-leave__go {
  /* Au doigt, une ligne de texte de 23px est une petite cible. Ce lien est seul
     sur sa ligne et rien de cliquable ne le jouxte, il peut donc s'offrir de
     vraies 44 — contrairement aux liens de la liste des inscrits, coincés à 26
     par la ligne suivante.
     **Pas de marge négative ici** : la carte est en `overflow: hidden`, donc ce
     qui déborde par le bas est rogné *et* cesse d'être cliquable — la zone
     gagnée aurait été morte. La marge du haut cède la place à la place. */
  display: inline-block;
  padding-block: 10px;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  text-decoration: underline;
  text-decoration-color: var(--paper-400);
  text-underline-offset: 3px;
  cursor: pointer;
}

.tgc-ev-leave__go:hover,
.tgc-ev-leave__go:focus-visible {
  color: var(--status-danger-fg);
  text-decoration-color: currentColor;
}

/* ── Le formulaire ───────────────────────────────────────────────────────── */

.tgc-ev-form { margin-top: 14px; }

/*
 * Le pot de miel : un champ qu'aucun humain ne voit et qu'aucun humain ne
 * remplit. Sorti du flux plutôt que `display: none` — certains robots sautent
 * ce qui est explicitement caché, et c'est justement ceux-là qu'on attend.
 */
.tgc-ev-trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.tgc-ev-form label { display: block; margin-bottom: 10px; }
.tgc-ev-form label > span { display: block; font-size: 0.82rem; color: var(--text-muted); margin-bottom: 4px; }
.tgc-ev-form small { display: block; font-size: 0.76rem; color: var(--ink-500); margin-top: 4px; }

/* **Les mesures du club, et 16px n'est pas cosmétique.** Ces champs faisaient
   0,92rem — 14,7px — et le club a déjà tranché cette question sur `.bcp-input` :
   sous 16px, Safari sur iPhone agrandit la page au moment où l'on touche le
   champ. C'était donc vrai du formulaire public d'inscription à une sortie, et
   personne ne l'avait mesuré. Même marge, même graisse de filet, même rayon que
   partout ailleurs : la candidature et l'inscription se ressemblent, et les deux
   se remplissent au pouce sans que la page saute. */
.tgc-ev-form input[type="text"],
.tgc-ev-form input[type="email"],
.tgc-ev-form input[type="tel"],
.tgc-ev-form input[type="number"],
.tgc-ev-form select {
  width: 100%;
  padding: 10px 14px;
  border: var(--border-thin) solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--paper-0);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  color: var(--text-body);
}

.tgc-ev-form input:focus-visible,
.tgc-ev-form select:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 1px;
}

.tgc-ev-form__pair { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }
.tgc-ev-form__pair label { margin-bottom: 10px; }

.tgc-ev-form__signin { font-size: 0.83rem; color: var(--text-muted); margin: 0 0 12px; }
.tgc-ev-form__hint { font-size: 0.76rem; color: var(--ink-500); margin: 8px 0 0; }

.tgc-ev-form fieldset { border: 0; padding: 0; margin: 0; }

.tgc-ev-people { margin-top: 14px; }

.tgc-ev-people__count { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tgc-ev-people__count > span { margin: 0; flex: 1; }
.tgc-ev-people__count select { width: 5rem; flex: none; }

.tgc-ev-person {
  margin-top: 10px !important;
  padding-top: 10px;
  border-top: var(--border-hairline) dashed var(--paper-300);
}

.tgc-ev-person legend {
  padding: 0;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: 6px;
}

.tgc-ev-boat {
  margin-top: 14px !important;
  padding-top: 12px;
  border-top: var(--border-hairline) solid var(--paper-200);
}

.tgc-ev-boat legend {
  padding: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--navy-800);
  margin-bottom: 8px;
}

/* `[hidden]` est un `display: none` de la feuille du navigateur, donc (0,0,0) :
   n'importe quelle règle d'auteur qui pose un `display` le bat. Ce sous-arbre en
   pose partout — `.tgc-ev-btn` en `block`, `.tgc-ev-total` en `flex`,
   `.tgc-ev-kit__row em` en `block` — et les trois ont montré la même panne le
   même jour : le bouton d'envoi visible dès la première étape, le total dit deux
   fois, et « au registre : oui » sous la case d'un visiteur qui n'a pas de
   registre. Une règle pour la famille, plutôt qu'un correctif par `display` :
   celui qu'on écrira demain est déjà couvert. Le poids (0,2,0) passe devant les
   sélecteurs de cette feuille sans avoir à annoncer `!important`. */
.tgc-ev-form [hidden],
.tgc-ev-modal [hidden],
.tgc-modal [hidden] { display: none; }

.tgc-ev-btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 12px 18px;
  border-radius: 9px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  border: 0;
  margin-top: 14px;
  cursor: pointer;
}

.tgc-ev-btn--gold { background: var(--gold-500); color: var(--navy-800); box-shadow: var(--shadow-sm); }
.tgc-ev-btn--gold:hover { background: var(--gold-600); }

.tgc-ev-btn--ghost {
  background: var(--paper-0);
  color: var(--navy-800);
  border: var(--border-hairline) solid var(--navy-800);
}

.tgc-ev-btn--ghost:hover { background: var(--navy-50); }

/* ── Ce que le lecteur a déjà ────────────────────────────────────────────── */

.tgc-ev-paid { color: var(--green-600); font-weight: 600; margin: 12px 0 0; }

.tgc-ev-ask {
  background: var(--navy-50);
  color: var(--navy-700);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 0.85rem;
  margin: 12px 0 0;
}

.tgc-ev-transfer { margin-top: 14px; font-size: 0.86rem; }
.tgc-ev-transfer h4 { font-size: 0.85rem; margin: 0 0 6px; color: var(--navy-800); }
.tgc-ev-transfer p { color: var(--text-muted); margin: 0 0 10px; }

/* La référence est retapée dans une application bancaire : en grand, en mono,
   espacée, pour qu'aucun caractère ne soit deviné. */
.tgc-ev-transfer__ref code {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  background: var(--navy-50);
  color: var(--navy-800);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
}


/* ── Copier un champ du virement ─────────────────────────────────────────── */

/* Le bouton n'existe que si le script l'a révélé : le serveur le rend `hidden`,
   pour qu'une page sans JavaScript ne montre pas une commande morte. */
.tgc-ev-copy {
  flex: none;
  margin-left: 8px;
  padding: 3px 9px;
  border: var(--border-hairline) solid var(--paper-300);
  border-radius: var(--radius-pill);
  background: var(--paper-0);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease;
}

.tgc-ev-copy:hover { color: var(--navy-800); border-color: var(--navy-300); }

/* Vert le temps de le dire, puis le bouton redevient lui-même : « Copié » qui
   resterait affiché parlerait d'un presse-papier qui a changé depuis. */
.tgc-ev-copy.is-copied { color: var(--status-success-fg); border-color: var(--status-success-fg); }
.tgc-ev-copy.is-failed { color: var(--status-danger-fg); border-color: var(--status-danger-fg); }

.tgc-ev-transfer__ref { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* L'adresse qui rouvre la réservation d'un visiteur. Une URL n'a pas d'espace
   où se couper, et le rail fait 300px : `anywhere` plutôt qu'un débordement
   latéral, et `min-width: 0` parce qu'un enfant de flex refuse par défaut de
   rétrécir sous la largeur de son contenu — le même couple que le courriel de
   l'écran de vérification des candidatures. */
.tgc-ev-keep {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 8px 0 0;
}

.tgc-ev-keep code {
  min-width: 0;
  flex: 1 1 auto;
  overflow-wrap: anywhere;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  background: var(--navy-50);
  color: var(--navy-800);
  padding: 7px 10px;
  border-radius: var(--radius-sm);
}

/* Ces lignes-là ne tiennent pas sur une seule : vingt-sept caractères d'IBAN
   dans un rail de 240px, plus un bouton. Le libellé prend donc sa ligne, la
   valeur et le bouton la suivante — plutôt que la mise en page « libellé à
   gauche, valeur à droite » du reste du rail, qui rejetait le bouton dessous
   et le laissait flotter sans rien à quoi se rattacher. */
.tgc-ev-rows--copy .tgc-ev-row { flex-wrap: wrap; gap: 2px 10px; }
.tgc-ev-rows--copy .tgc-ev-row > span { flex: 0 0 100%; }

.tgc-ev-rows--copy .tgc-ev-row > b {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  word-break: break-all;
}

/* Poussé au bout de la ligne de la valeur, court ou long. */
.tgc-ev-rows--copy .tgc-ev-copy { margin-left: auto; }

/* ── Les messages ────────────────────────────────────────────────────────── */

.tgc-ev-notice {
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin: 0 0 var(--space-5);
  border-inline-start: 3px solid currentColor;
}

.tgc-ev-notice--ok { background: var(--green-100); color: var(--green-700); }
.tgc-ev-notice--warn { background: var(--amber-100); color: var(--amber-700); }
/* `--red-700` et non `--red-600` : sur ce lavis-là celui-ci tombe à 4,31:1,
   et un avis d'échec est la dernière chose qu'on peut se permettre de rendre
   pénible à lire. */
.tgc-ev-notice--bad { background: var(--red-100); color: var(--red-700); }

/* Le même avis, dans la fenêtre : la page en porte un que le voile recouvre.
   Il se pose au-dessus du rail, avant « où en suis-je », parce que c'est lui
   qui explique pourquoi le lecteur est revenu. */
.tgc-ev-form__refusal {
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin: 0 0 18px;
  border-inline-start: 3px solid currentColor;
  background: var(--red-100);
  color: var(--red-700);
  font-size: 0.94rem;
}

.tgc-ev-back { margin-top: var(--space-6); }

/* Le total, dans le formulaire et à un seul endroit : la grille des tarifs ne
   reparaît que lorsqu'on ne peut plus s'inscrire. */
.tgc-ev-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: var(--border-thin) solid var(--paper-300);
}

.tgc-ev-total span { color: var(--text-muted); font-size: 0.85rem; }

.tgc-ev-total b {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  color: var(--navy-800);
  font-variant-numeric: tabular-nums;
}

/* ── Les choix ───────────────────────────────────────────────────────────── */

.tgc-ev-choices { margin-top: 14px; }
.tgc-ev-choices h4 { font-size: 0.85rem; margin: 0 0 8px; color: var(--navy-800); }

/* Un convive à la fois : `<details name>`, l'accordéon natif. Aucun script —
   la fenêtre s'ouvre déjà sans JavaScript, son contenu n'allait pas en
   réclamer. */
.tgc-ev-choices__who {
  border-top: var(--border-hairline) solid var(--paper-200);
}

.tgc-ev-choices__who > summary {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 12px 2px;
  cursor: pointer;
  list-style: none;
}

/* La flèche du navigateur est remplacée par la nôtre : celle de Safari n'a ni
   la même boîte ni la même taille que celle de Chrome. */
.tgc-ev-choices__who > summary::-webkit-details-marker { display: none; }

.tgc-ev-choices__who > summary::before {
  content: '';
  flex: none;
  width: 0;
  height: 0;
  align-self: center;
  border-left: 5px solid var(--ink-400);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform 120ms ease;
}

.tgc-ev-choices__who[open] > summary::before { transform: rotate(90deg); }
.tgc-ev-choices__who > summary:hover .tgc-ev-choices__name { color: var(--text-brand); }

.tgc-ev-choices__name {
  flex: 1;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--navy-800);
}

/* Ce qui manque, dit sur le repli : un accordéon muet oblige à tout ouvrir pour
   savoir où l'on en est, ce qu'il était censé épargner. */
.tgc-ev-choices__state {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--status-success-fg);
}

.tgc-ev-choices__state.is-todo { color: var(--status-danger-fg); }

/* Le nom en tête du panneau : c'est la première chose qu'on vient donner. */
.tgc-ev-choices__id {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 14px;
}

.tgc-ev-choices__id label { flex: 1 1 140px; }

.tgc-ev-choices__group { border: 0; padding: 0; margin: 0 0 10px; }

.tgc-ev-choices__group legend {
  padding: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--navy-800);
  margin-bottom: 6px;
}

/* La date d'une rubrique se lit à côté de son titre : c'est elle qui explique
   pourquoi le menu ne se change plus alors que l'activité, si. */
.tgc-ev-choices__group legend span {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500);
  font-weight: 400;
  margin-left: 6px;
}

/* Fermée : elle se relit, elle ne se change plus. Elle ne disparaît pas —
   quelqu'un qui a commandé du poisson doit pouvoir le vérifier le jour même. */
/* Une rubrique close se lit encore : elle dit ce qui a été commandé. Estompée
   par la couleur, pour la même raison que les deux règles ci-dessus. */
.tgc-ev-choices__group.is-closed { color: var(--ink-500); }
.tgc-ev-choices__group.is-closed legend { color: var(--ink-700); }

.tgc-ev-choices__said {
  display: block;
  font-weight: 600;
  color: var(--navy-800);
  padding: 4px 0;
}

.tgc-ev-choices label { margin-bottom: 8px; }
.tgc-ev-choices label > span { font-size: 0.8rem; }

.tgc-ev-choices select,
.tgc-ev-choices input[type="text"] {
  width: 100%;
  padding: 8px 10px;
  border: var(--border-hairline) solid var(--paper-300);
  border-radius: var(--radius-sm);
  background: var(--paper-0);
  font: inherit;
  font-size: 0.9rem;
  color: inherit;
}

.tgc-ev-choices small { display: block; font-size: 0.72rem; color: var(--ink-500); margin-top: 3px; }

/* ── Les tarifs, comme section de la page ────────────────────────────────── */
/* Dans la colonne de gauche avec le programme et le lieu : ce que la page dit
   de l'événement, et non ce qu'on y fait. Le total vivant du formulaire dit
   autre chose — ce que cette réservation-là coûtera. */

.tgc-ev-tariffs { display: grid; }

.tgc-ev-tariff {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  padding: 11px 0;
  border-top: var(--border-hairline) solid var(--paper-200);
}

.tgc-ev-tariff:last-child { border-bottom: var(--border-hairline) solid var(--paper-200); }

.tgc-ev-tariff__who { color: var(--navy-800); }

/* La borne d'âge n'est pas le nom du tarif : elle se lit à côté, plus bas. */
.tgc-ev-tariff__ages {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-left: 8px;
}

.tgc-ev-tariff__price {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--navy-800);
  font-weight: 600;
}

/* ── La fenêtre du club ──────────────────────────────────────────────────── */
/*
 * **Une fenêtre, deux noms.** `.tgc-ev-modal` est celle du programme et
 * `.tgc-modal` celle de tout le reste — le formulaire de contact aujourd'hui,
 * ce qu'on ouvrira demain. Même objet, même dessin, peint une seule fois : les
 * deux noms tiennent parce que le balisage vient de deux extensions, et qu'un
 * renommage coûterait une reprise de la page d'un événement et de ses contrôles
 * sans rien acheter au lecteur. Le même arrangement que la couverture.
 */
/*
 * Ouverte par `:target`, donc par un lien et non par un script : la page
 * fonctionne entière sans JavaScript, ce qui compte pour une adresse qu'on
 * ouvre depuis un client de messagerie. Le script n'ajoute qu'Échap et le
 * déplacement du curseur, que le navigateur ne sait pas faire seul ici.
 */

.tgc-ev-modal,
.tgc-modal { display: none; }

.tgc-ev-modal:target,
.tgc-modal:target {
  display: grid;
  place-items: center;
  position: fixed;
  inset: 0;
  /* Le thème a ses propres plans : l'en-tête collant est à `--z-sticky` (100),
     et une fenêtre posée au même niveau passe *derrière* lui — ce qui laisse
     une bande de navigation en pleine lumière au-dessus d'un fond assombri.
     C'est à cela que sert `--z-modal`. */
  z-index: var(--z-modal);
  padding: var(--space-4);
}

.tgc-ev-modal__scrim,
.tgc-modal__scrim {
  position: absolute;
  inset: 0;
  background: rgb(5 27 56 / 0.55);
  backdrop-filter: blur(2px);
}

.tgc-ev-modal__box,
.tgc-modal__box {
  position: relative;
  width: min(100%, 34rem);
  max-height: min(86vh, 46rem);
  overflow-y: auto;
  background: var(--paper-0);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-5) var(--space-5) var(--space-6);
}

/* Le formulaire d'inscription demande plus de large que les choix : prénom et
   nom tiennent alors côte à côte, et un tarif sur une ligne. 48rem, pas plus —
   au-delà, les champs s'étirent sans que rien ne se lise mieux. */
.tgc-ev-modal__box--wide { width: min(100%, 48rem); }

/* Un filet sous l'en-tête : la fenêtre des choix a un paragraphe d'introduction
   qui fait la séparation, celle-ci entre droit dans le formulaire. */
.tgc-ev-modal__box--wide .tgc-ev-modal__head,
.tgc-modal__box .tgc-modal__head {
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-4);
  border-bottom: var(--border-hairline) solid var(--paper-300);
}

.tgc-ev-modal__head,
.tgc-modal__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}

/* De quel événement il s'agit, au-dessus du titre de la fenêtre : elle couvre
   la page, et il faut pouvoir le vérifier sans la fermer. */
.tgc-ev-modal__of {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: 4px;
}

.tgc-ev-modal__head h3,
.tgc-modal__head h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--navy-800);
  margin: 0;
}

/* **La croix faisait 21 × 24 au doigt**, sur toutes les fenêtres du club :
   celles du programme, celle du contact, celle du don. C'est une commande, pas
   du texte-lien — l'exception qui vaut pour « mot de passe oublié ? » ne s'y
   applique pas — et c'est la seule façon de fermer sans viser la toile de fond.
   Une boîte de 44, sans que le signe grossisse : la marge fait la cible, et le
   décalage négatif rend la place à l'en-tête pour que rien ne bouge. */
.tgc-ev-modal__close,
.tgc-modal__close {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -10px -12px -10px 0;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--ink-500);
  text-decoration: none;
}

.tgc-ev-modal__close:hover,
.tgc-modal__close:hover { color: var(--navy-800); }

/* Le bouton qui ouvre la fenêtre : un lien, dessiné comme le bouton qu'il
   remplace. `.tgc-ev-btn` est un `<button>` dans le reste de la page, donc les
   quelques réglages qu'un lien n'hérite pas sont posés ici. */
.tgc-ev-open {
  display: block;
  width: 100%;
  text-align: center;
  text-decoration: none;
}

/* Le formulaire respire sous la phrase d'introduction : sans cela le premier
   intitulé s'y colle et se lit comme sa dernière ligne. */
.tgc-modal__lead + .tgc-form { margin-top: var(--space-4); }

.tgc-ev-modal__lead,
.tgc-modal__lead {
  font-size: 0.83rem;
  color: var(--text-muted);
  margin: 8px 0 0;
}

/* ── Le formulaire de contact ────────────────────────────────────────────── */

.tgc-form__row { margin: 0 0 var(--space-4); }

.tgc-form__label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--navy-800);
}

.tgc-form__check { display: flex; align-items: center; gap: 10px; }
.tgc-form__check input { width: auto; }

/* Le pot de miel : hors de vue sans être `display: none`, qu'un robot
   reconnaît, et hors du parcours au clavier comme des lecteurs d'écran. */
.tgc-form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.tgc-form__send { margin-top: var(--space-2); }

/* Ce que la page répond au retour de l'envoi, à côté du bouton qui l'a ouvert. */
.tgc-contact { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* Dans le pied, l'entrée est un lien de la liste : elle prend la mesure et le
   dessin des autres, cible au doigt comprise. */
.tgc-footer__nav .tgc-contact { display: block; }

.tgc-contact__said {
  font-size: var(--fs-sm);
  color: inherit;
}

.tgc-contact__said--ok { color: var(--green-700); }
.tgc-contact__said--ko { color: var(--amber-700); }

/* Dans le pied, qui est navy, les deux teintes d'état ne passent pas : le vert
   et l'ambre sont calibrés sur fond clair. On garde la couleur du panneau. */
.tgc-footer .tgc-contact__said { color: inherit; }

.tgc-contact__error {
  margin: 0 0 var(--space-4);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--status-danger-bg);
  color: var(--red-700);
  font-size: var(--fs-sm);
}

/* ── Ce qu'il reste à faire ──────────────────────────────────────────────── */
/* Le résumé dit ce qu'il y a dans la fenêtre : un bouton « compléter » seul
   oblige à l'ouvrir pour savoir s'il reste quelque chose. */

.tgc-ev-todo { margin-top: 14px; }

.tgc-ev-todo .tgc-ev-ask { margin-top: 0; }
.tgc-ev-todo .tgc-ev-ask strong { display: block; }
.tgc-ev-todo .tgc-ev-ask span { font-size: 0.78rem; opacity: 0.85; }

.tgc-ev-todo__list { list-style: none; margin: 10px 0 0; padding: 0; }

.tgc-ev-todo__list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 6px 0;
  border-top: var(--border-hairline) solid var(--paper-200);
  font-size: 0.85rem;
}

.tgc-ev-todo__list span { color: var(--text-muted); }

.tgc-ev-todo__list b {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--navy-800);
}

/* Un lien qui se comporte en bouton : la flexbox de `.tgc-ev-btn` centre son
   texte, mais un <a> a besoin qu'on lui retire son soulignement. */
a.tgc-ev-btn { text-decoration: none; box-sizing: border-box; }

/* Ce qui manque se voit, et n'empêche pas d'enregistrer : le membre note ce
   qu'il a décidé et revient pour le reste. C'est l'échéance de la rubrique qui
   ferme, pas le formulaire. */
.tgc-ev-choices label.is-missing > span em {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-700);
  background: var(--gold-100);
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  margin-left: 6px;
}

.tgc-ev-choices label.is-missing select,
.tgc-ev-choices label.is-missing input[type="text"] {
  border-color: var(--gold-400);
}

.tgc-ev-choices__fine {
  font-size: 0.76rem;
  color: var(--ink-500);
  margin: 8px 0 0;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LE RÉCIT — la page d'un événement qui a eu lieu
   Le plugin rend le balisage, le thème le peint : aucune couleur n'est écrite
   dans targamicale-evenements, comme pour les sections de la page d'accueil.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Ceux qui y étaient : le bandeau ──────────────────────────────────────
   Deux étages. En haut le blason et ce que la sortie a réuni ; en bas le
   palmarès, sur sa propre ligne. Il a d'abord été une carte de 260px dans un
   rail, où la phrase du bureau passait sur quatre lignes pendant que la liste
   des noms se serrait à côté. Une sortie passée n'a plus de rail à remplir. */
.tgc-ev-band {
  background: var(--paper-50);
  border: var(--border-hairline) solid var(--paper-300);
  border-radius: var(--radius-md);
  padding: 18px 22px;
  margin-bottom: 16px;
  display: grid;
  gap: 16px;
}

.tgc-ev-band__top {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  min-width: 0;
}

/* Dans le bandeau, le blason est une signature : la carte du rail tombe, et il
   se range sur une ligne avec son titre. */
/* Dans le rail, le blason est une carte et se lit en colonne ; ici il est une
   signature et se range sur une ligne. La direction doit être dite : la règle
   du rail impose `column`, et une classe de plus ne la renverse pas toute
   seule. */
.tgc-ev-band__top .tgc-ev-badge {
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: left;
  gap: 12px;
}

.tgc-ev-band__top .tgc-ev-badge__image,
.tgc-ev-band__top .tgc-ev-medal {
  width: 62px;
  height: 62px;
  flex: none;
}

.tgc-ev-band__top .tgc-ev-badge h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.9rem;
  line-height: 1.2;
  color: var(--navy-800);
}

/* Ce que la sortie a réuni. Un filet vertical les sépare du blason : ce sont
   deux choses, ce qui a été gagné et ce qui était là. */
.tgc-ev-tally {
  list-style: none;
  margin: 0;
  padding: 0 0 0 24px;
  border-left: var(--border-hairline) solid var(--paper-300);
  display: flex;
  gap: 22px;
}

.tgc-ev-tally b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--navy-800);
  font-variant-numeric: tabular-nums;
}

.tgc-ev-tally span {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-500);
}

/* ── Le formulaire par étapes ─────────────────────────────────────────────
   Le rail dit où l'on en est ; les traits sous les libellés font la
   progression, ce qui évite un « 3 sur 4 » que personne ne lit. */
/* ── Le rail des étapes, partagé ──────────────────────────────────────────
 *
 * **Un seul dessin pour les deux formulaires en plusieurs étapes du club** :
 * l'inscription à un événement et la candidature. Ils avaient chacun le leur —
 * des pastilles numérotées d'un côté, des onglets sans numéro de l'autre — pour
 * la seule raison qu'ils vivent dans deux extensions et deux techniques. Le
 * lecteur, lui, fait le même geste.
 *
 * Peint ici, comme tout ce que les extensions dessinent : `templates/parts/
 * register.php` côté événement, `src/signup/SignUp.tsx` côté candidature. Le
 * balisage est le même — `<li><b>1</b><span>Libellé</span></li>` — et c'est ce
 * qui permet une seule règle. */
.tgc-steps {
  display: flex;
  gap: 0;
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
}

.tgc-steps li {
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 0 8px 10px 0;
  border-bottom: 2px solid var(--paper-300);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* Le gris de remplissage du thème (ink-400) tombe à 3,22:1, et ces libellés
     font 9px : le rail de « Nous rejoindre » a déjà tranché cette question —
     ce sont des mots qui disent où l'on en est, pas des commandes inactives. */
  color: var(--ink-500);
}

.tgc-steps li b {
  flex: none;
  width: 19px;
  height: 19px;
  border-radius: var(--radius-pill);
  display: inline-grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0;
  background: var(--paper-200);
  /* 4,37:1 en ink-500 sur ce lavis — le même chiffre que le compteur des puces
     du bureau, et la même correction. */
  color: var(--ink-700);
}

.tgc-steps li.is-on { color: var(--navy-800); border-bottom-color: var(--gold-500); }
.tgc-steps li.is-on b { background: var(--gold-500); color: var(--navy-800); }
.tgc-steps li.is-done { color: var(--ink-700); border-bottom-color: var(--navy-300); }
.tgc-steps li.is-done b { background: var(--navy-800); color: var(--text-on-navy); }

/* Sous 560px les libellés ne tiennent plus : les pastilles seules disent où
   l'on en est, et le titre de l'étape est en haut du volet de toute façon. */
@media (max-width: 560px) {
  .tgc-steps li { flex: none; padding-right: 4px; }
  .tgc-steps li span { display: none; }
  /* Sauf celui de l'étape en cours : sans lui il ne reste que « 1 » sur quatre
     pastilles, et rien ne dit ce qu'on est en train de remplir — le titre de la
     fenêtre nomme l'inscription, pas l'étape. */
  .tgc-steps li.is-on { flex: 1; }
  .tgc-steps li.is-on span { display: inline; }
}

.tgc-ev-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: var(--border-hairline) solid var(--paper-300);
}

.tgc-ev-nav__back {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--ink-500);
  white-space: nowrap;
}

.tgc-ev-nav__back:hover { color: var(--navy-800); }

/* « Continuer » est bleu : l'or du club va au geste qui engage, et il n'y en a
   qu'un — le bouton qui envoie, sur la dernière étape. */
.tgc-ev-nav__next {
  margin-left: auto;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--navy-800);
  color: var(--text-on-navy);
  padding: 11px 24px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
}

.tgc-ev-nav__next:hover { background: var(--navy-700); }

@media (max-width: 560px) {
  .tgc-ev-nav__next { padding: 14px 22px; }
}
.tgc-ev-nav .tgc-ev-btn { margin-left: auto; width: auto; }

/* Le récapitulatif : ce qu'on réserve, relu avant de s'engager. */
.tgc-ev-recap {
  border: var(--border-hairline) solid var(--paper-300);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-card);
}

.tgc-ev-recap > div {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 16px;
  border-top: var(--border-hairline) solid var(--paper-200);
  font-size: 0.92rem;
  color: var(--ink-700);
}

.tgc-ev-recap > div:first-child { border-top: 0; }
.tgc-ev-recap > div b { color: var(--navy-800); font-weight: 600; text-align: right; }

.tgc-ev-recap__sum {
  background: var(--surface-raised);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--navy-800);
}

/* Ce que le registre sait de la coque d'un membre, sous son nom : montré pour
   vérification, jamais redemandé. */
.tgc-ev-boat__known {
  margin: 4px 0 0;
  font-size: 0.86rem;
  color: var(--ink-500);
}

/* L'inventaire : une ligne par équipement, la case à gauche du fait. */
.tgc-ev-kit { border: 0; padding: 0; margin: 16px 0 0; }

.tgc-ev-kit legend {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-500);
  padding: 0;
  margin-bottom: 10px;
}

/* `.tgc-ev-form label` (0,1,1) bat une classe seule : la règle qui la corrige
   porte le même poids. Même piège que les cases du conjoint. */
.tgc-ev-form .tgc-ev-kit__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 4px 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: var(--surface-raised);
  border: var(--border-hairline) solid var(--paper-300);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.tgc-ev-kit__row input { margin-top: 3px; }
.tgc-ev-kit__row b { font-weight: 600; color: var(--navy-800); font-size: 0.92rem; }
.tgc-ev-kit__row em {
  display: block;
  font-style: normal;
  font-size: 0.8rem;
  color: var(--ink-500);
  margin-top: 2px;
}

/* ── Le palmarès ─────────────────────────────────────────────────────────
   L'étage du bas : fond blanc et liseré d'or, pour sortir du bandeau sans lui
   prendre son calme. L'or est libre sur cette page — un récit ne demande rien,
   donc aucun bouton ne le réclame. */
/* `min-width: 0` : un enfant de grille refuse par défaut de rétrécir sous la
   largeur de son contenu, et l'intitulé d'un concours en capitales espacées est
   long. Sans lui, le bloc déborde du bandeau de dix-sept pixels sur un
   téléphone — la même faute que l'adresse de la page de candidature. */
.tgc-ev-win {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
  background: var(--surface-card);
  border-left: 3px solid var(--gold-500);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}

/* La coupe dit qu'il y a eu concours, l'écusson est la pièce décernée : deux
   choses, donc les deux, et non l'une à la place de l'autre. */
.tgc-ev-win__cup { width: 30px; height: 30px; flex: none; color: var(--gold-500); }
.tgc-ev-win__badge { width: 44px; height: 44px; flex: none; margin-left: -4px; }
.tgc-ev-win__body { min-width: 0; flex: 1; }

/* Une photographie, à droite, à une largeur fixe : elle illustre le concours
   sans prendre la place des noms, et deux concours ne font pas deux albums. */
.tgc-ev-win__photo {
  flex: none;
  width: 168px;
  height: 112px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: var(--border-hairline) solid var(--paper-300);
}

@media (max-width: 700px) {
  .tgc-ev-win { flex-wrap: wrap; }
  .tgc-ev-win__photo { width: 100%; height: 180px; }
}

.tgc-ev-win__body h4 {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-700);
  font-weight: 600;
}

/* Un classement se range en colonnes ; une distinction seule prend la ligne. */
.tgc-ev-podium {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* `min(220px, 100%)` : sous 220 pixels de large, un plancher de 220 déborde
     au lieu de se replier — sur un téléphone la colonne fait 183. */
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 14px;
}

.tgc-ev-podium--one { grid-template-columns: 1fr; }

.tgc-ev-podium li {
  display: flex;
  align-items: baseline;
  align-content: flex-start;
  flex-wrap: wrap;
  gap: 4px 8px;
  min-width: 0;
}

.tgc-ev-podium__who {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--navy-800);
}

.tgc-ev-podium li:first-child .tgc-ev-podium__who { font-size: 1.08rem; }

.tgc-ev-podium__boat { font-size: 0.88rem; color: var(--ink-700); }
.tgc-ev-podium__boat::before { content: '· '; color: var(--ink-300); }

/* Ce que le registre ne tient pas : l'équipage d'un bateau, ce qui a été pris.
   Sur sa propre ligne — c'est une phrase, pas une étiquette. */
.tgc-ev-podium__note {
  flex-basis: 100%;
  font-size: 0.84rem;
  color: var(--ink-700);
}

/* Alignée sous le nom et non sous la pastille, quand il y en a une : c'est du
   texte qui parle de cette place-là, pas une seconde ligne du classement. */
.tgc-ev-rank ~ .tgc-ev-podium__note { margin-left: 30px; }

/* Seul le premier porte l'or. Deux teintes de plus pour un argent et un bronze
   diraient trois choses là où un chiffre en dit déjà trois. */
.tgc-ev-rank {
  flex: none;
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  border: 1.5px solid var(--paper-400, #CBBCB0);
  background: var(--surface-card);
  color: var(--ink-500);
}

.tgc-ev-rank--1 {
  background: var(--gold-500);
  border-color: var(--gold-500);
  color: var(--navy-800);
}

@media (max-width: 700px) {
  .tgc-ev-band { padding: 16px 18px; }
  .tgc-ev-band__top { gap: 14px; }
  .tgc-ev-tally { padding-left: 0; border-left: 0; width: 100%; }
}

/* Ce qu'elle est, sous son nom : « Targa 32, 2001 ». Une ligne de plus dans la
   colonne du bateau plutôt qu'une colonne de plus — le modèle et l'année se
   lisent avec le nom, pas contre les autres bateaux. */
.tgc-ev-rrow__spec {
  display: block;
  font-size: 0.78rem;
  color: var(--ink-500);
  margin-top: 2px;
}

/* Ce que le bureau raconte d'un moment : du texte courant, avec le filet
   vertical qui dit que c'est une voix et non la suite du programme. */
.tgc-ev-moment__said {
  border-left: 2px solid var(--paper-300);
  padding-left: 14px;
  font-size: 0.92rem;
  color: var(--ink-700);
}

.tgc-ev-moment__said p { margin: 0 0 8px; }
.tgc-ev-moment__said p:last-child { margin-bottom: 0; }

/* Le même commentaire dans le programme replié : une ligne sous l'intitulé et
   non un paragraphe — cette page-là est un inventaire. */
.tgc-ev-slot__said {
  display: block;
  margin-top: 3px;
  font-size: 0.84rem;
  color: var(--ink-700);
}

/* Ce qu'elle est, sous son nom : « Targa 32, 2001 ». Une ligne de plus dans la
   colonne du bateau plutôt qu'une colonne de plus — le modèle et l'année se
   lisent avec le nom, pas contre les autres bateaux. */
.tgc-ev-rrow__spec {
  display: block;
  font-size: 0.78rem;
  color: var(--ink-500);
  margin-top: 2px;
}

/* ── Le fil ───────────────────────────────────────────────────────────────── */

.tgc-ev-thread { display: grid; gap: 26px; }

.tgc-ev-chapter { display: grid; gap: 14px; }

/* Le jour, en petites capitales : c'est une légende de chapitre, pas un titre
   de section — le fil en compte un par date et trois titres pleins feraient
   croire à trois sujets. */
.tgc-ev-chapter__day {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-700);
  margin: 0;
  padding-bottom: 6px;
  border-bottom: var(--border-hairline) solid var(--paper-300);
}

/* Un moment : l'heure dans une colonne étroite, le reste dans l'autre. La
   colonne des heures est ce qui fait le fil — sans elle, les moments sont des
   paragraphes empilés et l'ordre ne se lit plus. */
.tgc-ev-moment {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.tgc-ev-moment__when {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--gold-700);
  padding-top: 2px;
  font-variant-numeric: tabular-nums;
}

.tgc-ev-moment__body { min-width: 0; display: grid; gap: 10px; }

.tgc-ev-moment__what {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--navy-800);
  margin: 0;
}

.tgc-ev-moment__detail {
  margin: -6px 0 0;
  font-size: 0.88rem;
  color: var(--ink-700);
}

/* La carte d'un moment est plus haute que le repère ordinaire : elle porte
   parfois une traversée, donc deux points et le trait entre eux, et 190px pour
   cela ne montre que de l'eau. La hauteur va sur `.tgc-locator`, que React
   dessine dedans — c'est lui qui la porte, et la poser sur la racine ne
   changerait rien. Le cadre et l'arrondi sont déjà les siens. */
.tgc-ev-moment__map .tgc-locator { height: 260px; }

/* Le lieu en toutes lettres : sous la carte d'une étape, qu'aucune pastille ne
   peut nommer sans recouvrir un pin — et à sa place quand le plafond de cartes
   est atteint. */
.tgc-ev-moment__place {
  margin: -4px 0 0;
  font-size: 0.84rem;
  color: var(--ink-500);
}

/* Sur un téléphone, la bande d'un moment redevient une colonne : la mosaïque
   de la galerie tombe à une colonne sous 480px, et cinq photographies pleine
   largeur font cinq écrans — pour ce qui n'est qu'un aperçu, et cinq moments
   plus loin. Rognées à 200px de haut elles restent une bande ; l'album entier
   est à un bouton, et la visionneuse les rend telles qu'elles sont.

   Écrit ici et non dans le plugin : c'est du dessin, et aucun des deux plugins
   n'écrit de CSS. La règle est bornée au récit — la galerie posée seule sur une
   page garde ses grandes images. */
@media (max-width: 640px) {
  .tgc-ev-moment__body .tg-tile__img {
    max-height: 200px;
    object-fit: cover;
  }
}

@media (max-width: 600px) {
  .tgc-ev-moment { grid-template-columns: 1fr; gap: 6px; }
  .tgc-ev-moment__map .tgc-locator { height: 200px; }
}

/* ── L'Amicale en chiffres ────────────────────────────────────────────────
   Une page servie par targamicale-profile, comme le programme l'est par
   targamicale-evenements : le plugin rend le balisage, le thème le peint, et
   aucune couleur n'est écrite dans le plugin. */

/* Aucune mesure verticale à elle : c'est `.tgc-main` qui donne le rythme du
 * site, comme pour le programme et le forum. Elle en avait une du temps où le
 * gabarit ouvrait son propre `<main>` — deux mesures superposées, et cette page
 * démarrait cent trente pixels plus bas que les autres. */

.bcp-figures__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-700);
  margin: 0 0 6px;
}

.bcp-figures__head h1 { margin: 0 0 8px; }
.bcp-figures__lede { color: var(--text-muted); max-width: 52ch; margin: 0; }

.bcp-figures__sec {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--navy-800);
  margin: var(--space-7) 0 var(--space-4);
  display: flex;
  align-items: center;
  gap: 10px;
}

.bcp-figures__sec::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--paper-300);
}

/* Les compteurs. `minmax(min(180px, 100%), 1fr)` plutôt qu'un nombre fixe de
   colonnes : à 390px un compteur prend la largeur, et rien ne déborde. */
.bcp-figures__counters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.bcp-fig {
  background: var(--surface-card);
  border: var(--border-hairline) solid var(--paper-300);
  border-radius: var(--radius-md);
  padding: 16px 18px;
}

.bcp-fig__value {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--navy-800);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.bcp-fig__label { font-size: 0.86rem; color: var(--ink-700); margin-top: 4px; }
.bcp-fig__sub { font-size: 0.74rem; color: var(--ink-500); }

/* Les deux anneaux. */
.bcp-figures__donuts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: var(--space-5);
}

.bcp-figures__donut {
  background: var(--surface-card);
  border: var(--border-hairline) solid var(--paper-300);
  border-radius: var(--radius-md);
  padding: 18px 20px 20px;
}

.bcp-figures__donut h3 {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin: 0 0 14px;
}

.bcp-donut { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.bcp-donut__svg { flex: none; width: 148px; height: 148px; }

/* Le total au creux de l'anneau : c'est le chiffre qu'on cherche d'abord, et
   le trou est fait pour lui. */
.bcp-donut__total {
  text-anchor: middle;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  fill: var(--navy-800);
}

.bcp-donut__unit {
  text-anchor: middle;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  fill: var(--ink-500);
}

.bcp-donut__legend { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 0; }

.bcp-donut__legend li {
  display: grid;
  grid-template-columns: 12px 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  font-size: 0.88rem;
  border-top: var(--border-hairline) solid var(--paper-200);
}

.bcp-donut__legend li:first-child { border-top: 0; }
.bcp-donut__key { width: 12px; height: 12px; border-radius: 3px; }
.bcp-donut__name { color: var(--ink-700); min-width: 0; overflow-wrap: anywhere; }
.bcp-donut__legend b { color: var(--navy-800); font-variant-numeric: tabular-nums; }
.bcp-donut__share { color: var(--ink-500); font-size: 0.78rem; font-variant-numeric: tabular-nums; }

/* Le tableau des durées. */
.bcp-figures__table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface-card);
  border: var(--border-hairline) solid var(--paper-300);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.bcp-figures__table th,
.bcp-figures__table td { text-align: left; padding: 10px 16px; font-size: 0.9rem; }

.bcp-figures__table th {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-500);
  background: var(--surface-raised);
}

.bcp-figures__table tbody tr { border-top: var(--border-hairline) solid var(--paper-200); }
.bcp-figures__table td:first-child { color: var(--navy-800); font-weight: 600; }
.bcp-figures__table td + td { font-variant-numeric: tabular-nums; }

/* Les records — la seule partie qui nomme des gens, et la raison pour laquelle
   la page demande d'être connecté. */
.bcp-figures__records {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: var(--space-3);
}

/* **Le filet était doré, il est navy depuis le 2026-09-02.** Cette page porte
   maintenant un geste — soutenir le club — et le club n'a qu'un accent : six
   cadres dorés à côté du seul bouton qui demande quelque chose, et l'or ne
   désigne plus rien. */
.bcp-record {
  background: var(--surface-card);
  border: var(--border-hairline) solid var(--paper-300);
  border-left: 3px solid var(--navy-600);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}

.bcp-record__label {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: 5px;
}

.bcp-record__who { font-family: var(--font-display); font-weight: 700; color: var(--navy-800); }
.bcp-record__detail { font-size: 0.82rem; color: var(--ink-500); margin-top: 2px; }

/* ── Le hall of fame ──────────────────────────────────────────────────────
   Une liste, pas des cartes : les records sont des cadres parce qu'ils portent
   chacun une mesure, celle-ci porte des personnes et se lit d'un trait. Et
   **pas d'or** — les records en prennent déjà sur cette page, et l'accent
   unique du club est réservé à ce qu'il attend du lecteur. */
.bcp-hall {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

/* La fiche d'honneur : le portrait à gauche, la mention en tête à droite.

   **La raison se lit avant le nom**, ce qui est l'ordre dans lequel on la
   cherche — c'est le choix du 2026-09-02, contre deux autres traitements
   rendus côte à côte. Le cadre est une carte et non un rang à filets : le hall
   est un vote du bureau réservé à l'exceptionnel, quand « Les soutiens » juste
   dessous est une liste, et les deux ne doivent pas se ressembler. */
.bcp-hall__one {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--paper-0, #FFFFFF);
  border: var(--border-hairline) solid var(--paper-300);
  border-radius: var(--radius-md);
}

/* La tuile, et son repli.

   Les deux font exactement la même mesure et le même carré : un rang ne change
   donc pas de hauteur selon que quelqu'un a téléversé ou non, ce qui sera le
   cas de presque tout le monde le premier jour. `object-fit: cover` est sans
   danger ici, contrairement au cadre d'un bateau — le serveur ne range que des
   carrés, donc il n'y a rien à rogner. */
.bcp-hall__face {
  flex: none;
  width: 96px;
  height: 96px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--navy-100, #E2EAF2);
}

.bcp-hall__face--none {
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, #5FA7B5, #1F5E73 60%, var(--navy-800));
  color: rgba(255, 255, 255, 0.94);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xl);
  letter-spacing: 0.05em;
}

.bcp-hall__body { min-width: 0; }

/* La mention porte l'or, et c'est le seul de cette section.

   L'or du club désigne ce qu'il attend du lecteur — ici le bouton « Soutenir
   l'Amicale », deux sections plus bas — mais il *identifie* aussi, comme la
   couleur d'un type d'adhésion dans l'anneau. Une mention est ce que le club
   a décerné : elle nomme, elle ne demande rien. `gold-700` parce que le fond
   est clair, la règle que le club a déjà écrite sur ses deux autres ors. */
.bcp-hall__mention {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-700);
}

.bcp-hall__name {
  display: block;
  margin-top: 2px;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-lg);
  color: var(--navy-800);
  text-decoration: none;
}

a.bcp-hall__name:hover { color: var(--navy-700); text-decoration: underline; }

.bcp-hall__line {
  margin: 6px 0 0;
  /* La mesure de lecture du club. Sans elle la phrase court sur 940 px dans une
     carte pleine largeur, soit près de cent caractères. */
  max-width: 62ch;
  font-size: var(--fs-sm);
  color: var(--ink-700);
}

/* Les deux faits, en petites capitales de la police de données. `ink-500` et
   non `ink-400` : le club a mesuré celui-ci à 3,22:1 sur blanc et l'a retiré
   de tout ce qui porte du texte. */
.bcp-hall__fact {
  margin: 8px 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
}

/* Le séparateur est posé par la feuille, jamais composé dans la chaîne : à 390
   px les deux faits passent à la ligne, et un point écrit entre eux resterait
   pendu en fin de ligne. Empilés, il n'y a plus rien à séparer. */
.bcp-hall__fact span + span::before { content: " · "; }

@media (max-width: 560px) {
  .bcp-hall__fact span { display: block; }
  .bcp-hall__fact span + span::before { content: none; }
}

/* Sur un téléphone la tuile se resserre : 96 px de portrait plus les gouttières
   ne laissaient que 210 px à une mention, un nom et deux faits. */
@media (max-width: 560px) {
  .bcp-hall__one { gap: var(--space-2); padding: var(--space-2); }
  .bcp-hall__face { width: 72px; height: 72px; }
  .bcp-hall__face--none { font-size: var(--fs-lg); }
}

/* ── Ceux qui soutiennent l'Amicale ──────────────────────────────────────
   Trois listes du même dessin — les soutiens, les donateurs, les sponsors —
   l'une sous l'autre en une colonne, décidé 2026-09-02. Aucun montant et aucun
   classement nulle part : l'ordre est alphabétique dans les trois, et un ordre
   différent dans l'une laisserait croire qu'il veut dire quelque chose. */
.bcp-support {
  margin-top: var(--space-2);
  display: grid;
  gap: var(--space-3);
}

.bcp-support__block {
  background: var(--paper-0, #FFFFFF);
  border: var(--border-hairline) solid var(--paper-300);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

/* Le bloc qui demande porte l'accent du club, et il est le seul.

   Le lien « Soutenir l'Amicale » étant redevenu du texte, l'or était libre :
   un cadre désigne la section sans crier ce qu'un aplat criait. **La même
   épaisseur que les deux autres blocs** — un filet plus épais décalerait la
   mesure intérieure de cette carte et les trois cesseraient de s'aligner. */
/* ── La frise de la marque ────────────────────────────────────────────────
   Choisie 2026-09-02 sur maquette, après huit passes avec le bureau.
   Horizontale, une seule rangée sous le fil, aucune photographie sur la frise —
   seulement les écussons — et les fenêtres sur `:target`.

   **Une seule mesure gouverne l'alignement.** Le point, sa tige et la barre
   dorée en dérivent tous : écrites séparément, elles s'étaient décalées d'un
   pixel dans les deux directions, ce qui suffit à ce que la frise ne paraisse
   « pas laser ». */
.tgc-frise {
  --w: 206px;      /* la largeur d'une carte */
  --g: 0.85rem;    /* l'écart entre deux éléments du rang */
  --x: 25px;       /* le centre horizontal du point et de sa tige */
  --fil: 3.6rem;   /* la hauteur du fil dans le rail */
  --d: 14px;       /* le diamètre du point */
  --saut: 38px;    /* du fil au haut d'une carte */
  position: relative;
  margin: var(--space-4) 0;
}

/* La case est le seul état du tri ; on ne la voit jamais. */
.tgc-frise__mk {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

/* ── Les commandes ──
   **Une pastille, pas une rangée.** C'est la commande de zone de la carte :
   elle dit ce qu'on regarde et ouvre sa liste au clic. Elle tient quand la
   frise s'allongera, là où une rangée de puces deviendrait un pavé. Un
   `<details>` natif, donc pas une ligne de script, et le clavier l'ouvre comme
   le doigt. */
.tgc-frise__cmds { display: flex; gap: var(--space-2); flex-wrap: wrap; margin: 0 0 var(--space-2); }
.tgc-frise__cmd { position: relative; }

.tgc-frise__cmd summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  color: var(--navy-800);
  padding: 8px 14px;
  border: var(--border-hairline) solid var(--paper-300);
  border-radius: 999px;
  background: var(--paper-0, #FFFFFF);
}

.tgc-frise__cmd summary::-webkit-details-marker { display: none; }

.tgc-frise__cmd summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--ink-500);
  border-bottom: 1.5px solid var(--ink-500);
  transform: rotate(45deg) translateY(-2px);
}

.tgc-frise__cmd[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.tgc-frise__cmd summary:hover { border-color: var(--navy-300); }

.tgc-frise__liste {
  position: absolute;
  z-index: 5;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
  display: flex;
  flex-direction: column;
  background: var(--paper-0, #FFFFFF);
  border: var(--border-hairline) solid var(--paper-300);
  border-radius: var(--radius-md);
  padding: 5px;
  box-shadow: 0 8px 22px rgba(5, 27, 56, 0.12);
}

.tgc-frise__liste a,
.tgc-frise__liste label {
  display: block;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  color: var(--navy-800);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 7px;
  white-space: nowrap;
}

.tgc-frise__liste a:hover,
.tgc-frise__liste label:hover { background: var(--paper-100); }

/* Un seul libellé à la fois sur la commande fermée : « Choisir un modèle »
   tant que rien n'est trié, le nom de la famille ensuite. Les règles qui
   allument le bon nom sont mintées par le gabarit — le thème ne connaît pas les
   familles du club, et CSS ne sait pas rapprocher un identifiant d'un attribut. */
.tgc-frise__sum { display: none; }
.tgc-frise__sum--all, .tgc-frise__sum--an { display: inline; }
.tgc-frise__nom { display: none; }
.tgc-frise:has(.tgc-frise__mk:checked) .tgc-frise__sum--all { display: none; }

/* **La croix qui défait le tri**, à côté du modèle qu'elle enlève. Elle était
   la première entrée de la liste dépliante : il fallait rouvrir celle-ci pour
   défaire un choix qu'on lisait déjà sur la commande fermée.

   Elle ne paraît que lorsqu'il y a quelque chose à défaire — proposer d'annuler
   un choix que personne n'a fait est un objet de plus sur une commande qui en
   porte déjà deux. */
.tgc-frise__cmd-rang { display: inline-flex; align-items: center; gap: 2px; }

.tgc-frise__x { display: none; }

.tgc-frise:has(.tgc-frise__mk:checked) .tgc-frise__x {
  /* Une croix est une **commande**, pas du texte-lien : l'exception qui vaut
     pour « mot de passe oublié ? » ne s'y applique pas, et c'est la seule façon
     de défaire le tri sans rouvrir la liste. Le club a déjà payé cela sur les
     croix de ses fenêtres, qui faisaient 21 × 24 au doigt.

     44 au doigt, **par la marge**, sans que le signe grossisse ni que la rangée
     bouge : la commande voisine fait 28 de haut, et les marges négatives
     rendent les 16 que le remplissage vient d'ajouter. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -8px -6px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  font-size: 18px;
  line-height: 1;
  color: var(--ink-500);
}

.tgc-frise__x:hover { background: var(--paper-100); color: var(--navy-800); }

/* Le nom dit en toutes lettres pour qui ne voit pas le signe : une croix seule
   ne se lit pas à voix haute. */
.tgc-frise__x-txt {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Le bouton « tous » vit hors de la liste, à côté de sa croix : un `<label>`
   désigne un champ n'importe où, mais on ne s'appuie pas sur ce qu'un
   navigateur fait d'un champ qu'une liste repliée n'affiche pas. */
.tgc-frise__mk-all {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

/* Le choix se voit dans la liste ouverte. Les boutons sont masqués — ce sont
   les libellés qu'on lit — donc c'est l'adjacence qui marque, le gabarit posant
   chaque bouton juste avant le sien. */
.tgc-frise__mk:checked + label {
  color: var(--navy-800);
  font-weight: 600;
  background: var(--paper-100);
}


/* ── Le rang ── */
.tgc-frise__fr {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: thin;
}

.tgc-frise__rail {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--g);
  min-width: min-content;
  padding: var(--fil) 0 var(--space-2);
}

.tgc-frise__rail::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: var(--fil);
  height: 2px;
  background: var(--paper-300);
}

.tgc-frise__tick {
  position: relative;
  flex: none;
  align-self: flex-start;
  width: 2px;
  height: 22px;
  margin-top: -11px;
  background: var(--paper-300);
  scroll-margin-left: var(--space-4);
}

.tgc-frise__tick span {
  position: absolute;
  top: -42px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-500);
}

/* ── Une carte ──
   Elles paraissent en cascade au chargement : une animation CSS ordinaire, qui
   marche partout — la première version reposait sur `animation-timeline:
   view()`, que seul Chrome sait faire, et où il n'y avait rien à voir sur un
   écran large puisque tout était déjà entré dans le champ. */
.tgc-frise__ev {
  position: relative;
  flex: none;
  width: var(--w);
  scroll-snap-align: center;
  margin-top: var(--saut);
  animation: tgc-frise-paraitre 0.5s both cubic-bezier(0.2, 0.7, 0.3, 1);
  animation-delay: calc(var(--i) * 80ms);
}

@keyframes tgc-frise-paraitre {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tgc-frise__ev { animation: none; }
}

/* La tige, du fil au haut de la carte. */
.tgc-frise__ev::after {
  content: "";
  position: absolute;
  left: calc(var(--x) - 1px);
  width: 2px;
  top: calc(1px - var(--saut));
  height: calc(var(--saut) - 1px);
  background: var(--paper-300);
}

/* Le point : même centre horizontal, et son centre exactement sur le fil. */
.tgc-frise__ev::before {
  content: "";
  position: absolute;
  left: calc(var(--x) - var(--d) / 2);
  top: calc(1px - var(--saut) - var(--d) / 2);
  width: var(--d);
  height: var(--d);
  border-radius: 50%;
  background: var(--t, var(--navy-800));
  box-shadow: 0 0 0 3px var(--paper-100);
  z-index: 2;
}

.tgc-frise__card {
  position: relative;
  height: 100%;
  background: var(--paper-0, #FFFFFF);
  border: var(--border-hairline) solid var(--paper-300);
  border-radius: var(--radius-md);
  padding: 11px 14px 13px;
  transition: transform 0.18s, border-color 0.18s, opacity 0.18s;
}

.tgc-frise__card:hover { border-color: var(--navy-300); transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  .tgc-frise__card { transition: none; }
}

/* Le titre porte le lien, étiré sur toute la carte — **la carte n'est pas un
   lien elle-même**, sans quoi l'écusson qu'elle porte ne pourrait pas en être
   un : un navigateur n'imbrique pas les liens. Le montage de « la flotte de
   l'amicale ». */
.tgc-frise__t {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  line-height: 1.25;
  color: var(--navy-800);
  text-decoration: none;
}

.tgc-frise__t::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-md); }
.tgc-frise__t:hover { text-decoration: underline; }

.tgc-frise__tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 26px;
  margin-bottom: 7px;
}

/* L'écusson est au-dessus du lien étiré, sinon il serait muet — et c'est une
   étiquette : le cliquer allume la période de son modèle, le recliquer
   l'éteint. */
.tgc-frise__logo { position: relative; z-index: 2; display: inline-block; border-radius: 4px; }
.tgc-frise__logo img { display: block; height: 22px; width: auto; max-width: 96px; object-fit: contain; }
/* L'écusson est une commande, donc une cible : 22 px de haut n'en est pas une.
   Le remplissage la porte à 28 sans que l'image grandisse ni que le rang
   bouge — `.tgc-frise__tete` a déjà 26 px de garde. */
label.tgc-frise__logo { cursor: pointer; padding: 3px; margin: -3px; }
label.tgc-frise__logo:hover { outline: 2px solid var(--gold-500); outline-offset: 2px; }

/* La pastille de type. La couleur **identifie**, elle ne demande rien : c'est
   ce qui autorise plusieurs teintes sur un site qui n'a qu'un accent, la même
   règle que la couleur d'un type d'adhésion dans l'anneau des chiffres. Le
   lavis est calculé ici, le plugin ne transmettant que la teinte. */
.tgc-frise__ty {
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
  background: color-mix(in srgb, var(--t) 14%, #fff);
  color: color-mix(in srgb, var(--t) 82%, #000);
  border: var(--border-hairline) solid color-mix(in srgb, var(--t) 32%, #fff);
}

.tgc-frise__y {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  color: var(--gold-700);
}

.tgc-frise__s { display: block; margin-top: 2px; font-size: var(--fs-sm); color: var(--ink-500); }

.tgc-frise__m {
  display: flex;
  gap: var(--space-1);
  align-items: center;
  margin-top: 7px;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.tgc-frise__lock { border: var(--border-hairline) solid var(--paper-300); border-radius: 999px; padding: 2px 7px; }

/* ── La période allumée ──
   Un trait, centré sur le fil comme tout le reste : il n'épaissit pas et ne
   descend pas. Ses étiquettes se posent **au-dessus**, où elles ne heurtent ni
   les points ni les chiffres des décennies. */
.tgc-frise__glow {
  position: absolute;
  top: calc(var(--fil) + 1px - 4.5px);
  height: 9px;
  border-radius: 999px;
  background: var(--gold-500);
  opacity: 0;
  transition: opacity 0.25s;
  display: flex;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .tgc-frise__glow { transition: none; }
}

.tgc-frise__gen { position: relative; flex: none; border-right: 2px solid var(--paper-100); }
.tgc-frise__gen:last-child { border-right: 0; }

.tgc-frise__gen em {
  position: absolute;
  bottom: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%);
  font-style: normal;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.05em;
  line-height: 1;
  color: var(--navy-900);
  white-space: nowrap;
  background: var(--gold-500);
  padding: 4px 9px;
  border-radius: 999px;
}

/* Ce qui s'allume, et ce qui s'efface. L'or **désigne** ici et ne demande
   rien — l'emploi que le club en fait déjà pour marquer la page courante dans
   le tiroir.

   **La règle qui rallume la famille choisie est dans le gabarit du plugin**, et
   elle seule : elle joint un identifiant minté à l'exécution à un attribut
   `data-f`, ce que CSS ne sait pas faire et que le thème ne pourrait pas
   deviner. Elle ne porte qu'un `opacity: 1`. */
.tgc-frise:has(.tgc-frise__mk:checked) .tgc-frise__card { opacity: 0.28; }
.tgc-frise:has(.tgc-frise__mk:checked) .tgc-frise__ev::before { opacity: 0.28; }
.tgc-frise:has(.tgc-frise__mk:checked) .tgc-frise__glow { opacity: 0; }

/* **Une carte éteinte sort aussi du clic et du clavier.**

   Elle était seulement pâlie — 1,84:1 pour son titre — et gardait son lien
   étiré : vingt-huit cartes illisibles restaient cliquables, si bien qu'on
   ouvrait ce que le tri venait précisément de mettre de côté.

   **Le lien seulement, jamais la carte** : l'écusson est le tri lui-même, et
   éteindre la carte entière empêchait d'ajouter une famille à la sélection —
   c'est-à-dire de se servir du tri. `frise.js` retire les liens éteints de la
   tabulation, ce que CSS ne sait pas faire ; son absence laisse simplement des
   liens qu'on ne peut pas cliquer. */
.tgc-frise:has(.tgc-frise__mk:checked) .tgc-frise__card a { pointer-events: none; }

/* **La case du tri se voit quand on l'atteint au clavier.**

   Elle est sortie du flux et invisible — c'est l'état, pas une commande — mais
   `pointer-events: none` ne la retire pas de la tabulation, et rien ne posait
   d'anneau : le focus tombait dans le vide. Le gabarit la place désormais juste
   avant son libellé, ce qui suffit à une règle d'adjacence : l'anneau se pose
   sur ce qu'on voit. */
.tgc-frise__mk:focus-visible + label {
  outline: 2px solid var(--gold-500);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ── La fenêtre ──
   Elle emprunte la coquille du club (`.tgc-modal`), la même que le contact et
   le programme : il n'y a qu'une fenêtre dans ce club. */
.tgc-frise__my {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  color: var(--gold-700);
}

.tgc-frise__mt { margin: 4px 0 0; font-size: var(--fs-lg); color: var(--navy-900); }
.tgc-frise__ms { margin: 2px 0 var(--space-3); font-size: var(--fs-sm); color: var(--ink-500); }
.tgc-frise__mc img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }

.tgc-frise__res {
  margin: 0;
  padding: var(--space-3);
  background: var(--paper-100);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  color: var(--ink-700);
}

.tgc-frise__res a { color: var(--navy-800); font-weight: var(--fw-semibold); }

@media (max-width: 560px) {
  .tgc-frise { --w: 196px; }
}

/* ── Les partenariats ─────────────────────────────────────────────────────
   L'annuaire, choisi 2026-09-02 entre trois dessins rendus côte à côte. Une
   ligne par partenaire, du même dessin que les sponsors — ce qui fait des deux
   pages un même club plutôt que deux objets — et qui tient à cinq partenaires
   comme à vingt-cinq, là où une grille de cartes devient un mur. */
.tgc-part {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-4) 0;
}

.tgc-part__one {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3);
  background: var(--paper-0, #FFFFFF);
  border: var(--border-hairline) solid var(--paper-300);
  border-radius: var(--radius-md);
}

/* La tuile est blanche et **ne rogne jamais** : les logos arrivent en toutes
   formes, et un cadre qui rogne coupe la moitié d'un nom d'entreprise. C'est la
   règle du cadre photo d'un bateau, et celle des sponsors. */
.tgc-part__logo {
  flex: none;
  width: 88px;
  height: 52px;
  display: grid;
  place-items: center;
  background: #fff;
  border: var(--border-hairline) solid var(--paper-300);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.tgc-part__logo img {
  max-width: 76px;
  max-height: 40px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.tgc-part__logo--none {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  letter-spacing: 0.06em;
  color: var(--navy-800);
}

.tgc-part__body { min-width: 0; flex: 1; }

.tgc-part__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-lg);
  color: var(--navy-800);
}

/* Le nom est la cible principale de la ligne, et il ne faisait que 20 px.

   **Le lien étiré des sponsors ne marche pas ici** : cette ligne porte déjà les
   liens des articles, et un navigateur n'imbrique pas les liens — c'est le
   piège que « la flotte de l'amicale » a déjà payé. Le remplissage vertical lui
   donne donc sa cible sans boîte et sans recouvrir ses voisins. */
.tgc-part__name a {
  display: inline-block;
  padding: 5px 0;
  color: inherit;
  text-decoration: none;
}

.tgc-part__name a:hover { color: var(--navy-700); text-decoration: underline; }

.tgc-part__trade {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
}

/* L'offre est le sujet de la page : elle porte la graisse, et rien d'autre sur
   cette ligne n'en prend. **Pas d'or** — l'accent du club marque ce qu'il
   attend du lecteur, et ici c'est le partenaire qui donne. */
.tgc-part__offer {
  margin: var(--space-2) 0 0;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-md);
  color: var(--navy-800);
  max-width: 56ch;
}

.tgc-part__how {
  margin: 2px 0 0;
  font-size: var(--fs-sm);
  color: var(--ink-700);
  max-width: 62ch;
}

/* Les articles, sous un filet et en retrait : ils qualifient le partenaire, ils
   ne sont pas ce qu'on vient chercher. */
.tgc-part__reads {
  margin: var(--space-2) 0 0;
  padding-top: var(--space-2);
  border-top: var(--border-hairline) solid var(--paper-200);
  font-size: var(--fs-sm);
}

.tgc-part__reads b {
  display: block;
  margin-bottom: 2px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.tgc-part__reads a { color: var(--navy-800); font-weight: var(--fw-semibold); }

.tgc-part__none { color: var(--ink-500); }

/* Sur un article, la mention du partenaire dont il parle. Le fait vit sur
   l'article, donc cette ligne ne fait que le lire — rien de plus à saisir. */
.tgc-part-note {
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: var(--border-hairline) solid var(--paper-300);
  font-size: var(--fs-sm);
  color: var(--ink-700);
}

.tgc-part-note a { color: var(--navy-800); font-weight: var(--fw-semibold); }

@media (max-width: 560px) {
  .tgc-part__one { gap: var(--space-2); padding: var(--space-2); }
  .tgc-part__logo { width: 68px; height: 44px; }
  .tgc-part__logo img { max-width: 58px; max-height: 34px; }
}

/* ── Les rubriques des actualités ─────────────────────────────────────────
   Des liens vers les archives que WordPress sert déjà, donc pas une ligne de
   script. Le même dessin que les puces de zone de la carte : une rangée qui
   défile latéralement sur un téléphone plutôt qu'un pavé de trois lignes, et la
   barre de défilement masquée — elle ferait un trait gris en travers, et le
   débordement se voit à la puce coupée au bord. La liste ne peut que
   s'allonger : un club range ses nouvelles à mesure qu'il en écrit. */
.tgc-cats {
  display: flex;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.tgc-cats::-webkit-scrollbar { display: none; }

.tgc-cats__one {
  flex: none;
  padding: 9px 16px;
  border: var(--border-hairline) solid var(--paper-300);
  border-radius: 999px;
  background: var(--paper-0, #FFFFFF);
  color: var(--navy-800);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  white-space: nowrap;
}

.tgc-cats__one:hover { border-color: var(--navy-300); color: var(--navy-700); }

/* **La rubrique ouverte reste dans la liste, marquée.** Un menu sert d'abord à
   se situer : la retirer ferait changer la barre d'une page à l'autre, et rien
   ne dirait où l'on est. Le navy plein, et non l'or — l'accent du club désigne
   ce qu'il attend du lecteur, ici il dit seulement où il se trouve. */
.tgc-cats__one[aria-current] {
  background: var(--navy-800);
  border-color: var(--navy-800);
  color: #fff;
}

.bcp-support__block--ask {
  border-color: var(--gold-500);
}

.bcp-support__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: var(--border-hairline) solid var(--paper-200);
}

/* L'écusson n'est que sur les donateurs : myCred le décerne à l'encaissement,
   donc il ne peut pas parer une liste où personne n'a payé. */
.bcp-support__badge {
  flex: none;
  width: 52px;
  height: 52px;
  object-fit: contain;
}

/* Un vrai `<h3>` désormais : la mesure ne change pas, mais la taille par défaut
   d'un titre, si — d'où la reprise explicite. */
.bcp-support__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--navy-800);
}

.bcp-support__sub {
  margin: 2px 0 0;
  font-size: var(--fs-sm);
  color: var(--ink-500);
}

.bcp-support__list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}

/* Un nom par ligne, un filet entre. Pas de colonnes : le club a choisi une
   liste qui se lit d'un trait, et une colonne coupée en deux se parcourt en
   zigzag. */
.bcp-support__row {
  position: relative;
  border-bottom: var(--border-hairline) solid var(--paper-200);
}

.bcp-support__row:last-child { border-bottom: 0; }

.bcp-support__name {
  display: block;
  padding: 10px 2px;
  color: var(--navy-800);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}

a.bcp-support__name:hover { color: var(--navy-700); text-decoration: underline; }

/* **La ligne entière est la cible**, par le lien étiré des cartes du programme
   et de « la flotte de l'amicale ». Un nom de sponsor fait 26 px de haut dans
   une ligne qui en fait 64 : sans cela le doigt tombe à côté du logo et il ne
   se passe rien. Il n'y a qu'un lien par ligne, donc rien à imbriquer. */
a.bcp-support__name::after {
  content: "";
  position: absolute;
  inset: 0;
}

.bcp-support__row--sp:hover { background: var(--paper-100); }

/* Le sponsor : son logo, son nom, son domaine. */
.bcp-support__row--sp {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 6px 2px;
}

/* La tuile est blanche et **ne rogne jamais**. Les logos arrivent en toutes
   formes — un mot large, une marque carrée — et un cadre qui rogne coupe la
   moitié d'un nom d'entreprise : c'est la règle du cadre photo d'un bateau.
   Blanche parce qu'un logo est presque toujours dessiné pour du blanc, y
   compris quand le club passera au thème sombre. */
.bcp-support__logo {
  flex: none;
  width: 88px;
  height: 52px;
  display: grid;
  place-items: center;
  background: #fff;
  border: var(--border-hairline) solid var(--paper-300);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.bcp-support__logo img {
  max-width: 76px;
  max-height: 40px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.bcp-support__logo--none {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  letter-spacing: 0.06em;
  color: var(--navy-800);
}

.bcp-support__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.bcp-support__row--sp .bcp-support__name { padding: 0; }

.bcp-support__site {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-500);
  overflow-wrap: anywhere;
}

/* Comptés plutôt que tus, et **sous les donateurs seulement** : l'anonymat est
   un choix de personne, et il n'a de sens que là où il y a une somme à taire. */
.bcp-support__quiet {
  margin: var(--space-2) 0 0;
  color: var(--ink-500);
  font-size: var(--fs-sm);
}

/* La demande, au pied du bloc des donateurs.

   Elle était au bas de la page, seule sur le fond, après les trois listes — à
   89 % de la hauteur, cinq écrans et demi sur un téléphone. Ici elle est dans
   le bloc qui parle d'argent, sous les noms de ceux qui ont donné : on remercie
   avant de demander, la règle du récit d'une sortie. Le filet la sépare de la
   liste sans en faire un second bloc.

   C'est le seul or de cette page — la raison pour laquelle les records ont
   rendu leur cadre doré le même jour. */
.bcp-support__ask {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: var(--border-hairline) solid var(--paper-200);
  /* La phrase, puis le lien dessous — à toutes les largeurs. Sur un écran
     large la phrase fait deux lignes et le lien se posait à hauteur de la
     première, laissant la seconde courir sous lui : deux lectures d'un même
     bloc selon la largeur. Une colonne se lit pareil partout. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
}

/* La raison porte la mesure de lecture, et le bouton ne l'écrase pas : sous
   400px ils s'empilent d'eux-mêmes, la phrase gardant sa ligne entière. */
.bcp-support__because {
  margin: 0;
  max-width: 62ch;
  font-size: var(--fs-sm);
  color: var(--ink-700);
}

/* La demande est du texte, jamais un bouton.

   Choisi 2026-09-02 : cette page se lit d'un bout à l'autre, et un aplat doré
   au milieu de ses chiffres criait plus fort que tout ce qu'elle raconte. Le
   gras et le navy suffisent à la désigner — **la page n'a donc plus d'or du
   tout**, ce qui est juste : l'accent unique du club marque ce qu'il attend du
   lecteur, et ici il rend compte plutôt qu'il ne demande.

   Le remplissage vertical lui donne une cible au doigt sans lui dessiner de
   boîte : 40px de haut pour 21 de texte. C'est l'exception que le club accorde
   au texte-lien, payée quand même. */
.bcp-support__do {
  display: inline-block;
  padding: 9px 0;
  color: var(--navy-800);
  font-weight: var(--fw-bold);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.bcp-support__do:hover,
.bcp-support__do:focus-visible {
  color: var(--navy-700);
  text-decoration-thickness: 2px;
}

@media (max-width: 560px) {
  .bcp-support__logo { width: 68px; height: 44px; }
  .bcp-support__logo img { max-width: 58px; max-height: 34px; }
}

/* ── Le don ───────────────────────────────────────────────────────────── */
.tgc-don { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 12px; }

.tgc-don__said { font-size: var(--fs-sm); }
.tgc-don__said--ok { color: var(--green-700); }
.tgc-don__said--ko { color: var(--red-700); }

.tgc-don__off { margin: 0; color: var(--ink-500); font-size: var(--fs-sm); }

/* Ce que le don ne donne pas : dit dans la fenêtre, pas en petits caractères
   ailleurs. Une amicale de propriétaires n'est pas d'intérêt général, et le
   malentendu se découvre un an plus tard au moment d'une déclaration. */
.tgc-don__legal {
  margin: var(--space-4) 0;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--paper-100);
  color: var(--ink-700);
  font-size: var(--fs-xs);
  line-height: 1.5;
}

.tgc-form__hint {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-xs);
  color: var(--ink-500);
}