/* ==========================================================================
   Les Métropolitaines Blot — feuille de style unique
   Charte : palette relevée sur le visuel officiel, deux polices, mobile d'abord.
   ========================================================================== */

/* --------------------------------------------------------------- les polices

   Barlow et Barlow Condensed sont servies par le site lui-même, pas par Google
   Fonts. Trois raisons, dans cet ordre :

   1. c'était la seule requête du site vers un tiers, et donc le seul moment où
      l'adresse IP d'un visiteur partait ailleurs. La page données personnelles
      devait le déclarer ; elle n'a plus à le faire ;
   2. c'est plus rapide. Un appel à Google Fonts coûte une résolution DNS, une
      poignée de main TLS et une feuille de style intermédiaire avant même que
      le premier fichier de police ne soit demandé. Ici, les fichiers sont sur
      la même connexion, déjà ouverte ;
   3. le site ne dépend plus d'un service extérieur pour s'afficher
      correctement — y compris le matin de la course.

   Six graisses, celles réellement utilisées, relevées sur les dix-huit pages
   rendues : Condensed en 700 et 800, Barlow en 400, 500, 600 et 700. La 600
   condensée que l'ancien appel demandait ne servait à rien.

   Chaque graisse existe en deux tranches, `latin` et `latin-ext`, avec la
   plage de caractères que chacune couvre. Le navigateur ne télécharge la
   seconde que s'il rencontre un caractère qui n'est pas dans la première —
   le français tient presque entièrement dans `latin`, `latin-ext` ne sert
   qu'aux noms propres étrangers. 22 Ko par graisse, pas 37.

   `swap` : le texte s'affiche immédiatement dans la police de repli, puis
   change quand la vraie police arrive. Sur un téléphone en bord de route, du
   texte lisible tout de suite vaut mieux qu'un texte parfait en retard.

   Les fichiers viennent des paquets @fontsource/barlow et
   @fontsource/barlow-condensed (5.3.0), qui republient les fichiers de Google
   Fonts sous licence SIL Open Font 1.1.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/barlow-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/barlow-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/barlow-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/barlow-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/barlow-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/barlow-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/barlow-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/barlow-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/barlow-condensed-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/barlow-condensed-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/barlow-condensed-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/barlow-condensed-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root {
  /* palette de marque */
  --turquoise: #00A0B6;
  --azur:      #0098D0;
  --ruban:     #015FA9;
  --marine:    #0E4960;
  --rouge:     #C01818;
  --corail:    #E05038;
  --or:        #F09800;
  --vert:      #007830;
  --creme:     #FAF5EA;
  --noir:      #1C1C1C;
  --blot:      #DD2327;   /* couleur du partenaire titre : logo et visuels seulement */

  /* neutres, légèrement teintés vers le turquoise */
  --blanc:      #FFFFFF;
  --surface:    #F5F9F9;
  --encre:      #2E3F45;
  --encre-2:    #4A5A5F;
  --encre-3:    #6F8288;
  --encre-4:    #8B9A9E;
  --filet:      #D8E2E2;
  --filet-doux: #E8EFEF;

  /* fonds d'état */
  --ouvert-fond:  #E6F2E9;
  --ouvert-texte: #00632A;
  --bientot-fond: #FDF2E0;
  --bientot-texte:#8A5600;
  --alerte-fond:  #FBE9E7;
  --alerte-texte: #A33018;

  --cd: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --tx: "Barlow", "Helvetica Neue", Arial, sans-serif;

  --gouttiere: 20px;
  --large: 1440px;
  --rayon: 8px;
}

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

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

body {
  margin: 0;
  background: var(--blanc);
  color: var(--encre);
  font-family: var(--tx);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--ruban); text-decoration: none; }
a:hover { color: var(--marine); text-decoration: underline; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--ruban);
  outline-offset: 2px;
  border-radius: 3px;
}

ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }

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

.evitement {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--marine); color: var(--blanc); padding: 12px 20px;
  font-weight: 600;
}
.evitement:focus { left: 0; }

.conteneur {
  width: 100%;
  max-width: var(--large);
  margin: 0 auto;
  padding: 0 var(--gouttiere);
}

.ico { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ico--plein { fill: currentColor; stroke: none; }

/* ---------------------------------------------------------------- titres */

.titre-page {
  margin: 0;
  font-family: var(--cd);
  font-size: clamp(2rem, 6vw, 3.125rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--marine);
  text-wrap: balance;
}
.titre-page sup { font-size: 0.5em; }

.titre-section {
  margin: 0;
  font-family: var(--cd);
  font-size: clamp(1.75rem, 4.4vw, 2.75rem);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  color: var(--marine);
  text-wrap: balance;
}
.titre-section--compact { font-size: clamp(1.5rem, 3.4vw, 2.125rem); }
.titre-section--clair { color: var(--blanc); }

.surtitre {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--encre-3);
  margin-bottom: 4px;
}

.texte { font-size: 1.0625rem; line-height: 1.6; color: var(--encre-2); max-width: 68ch; }
.texte--clair { color: #E4F7FA; }

.entete-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-bottom: 3px solid var(--marine);
  padding-bottom: 14px;
  margin-bottom: 28px;
}
.entete-section__note { font-size: 0.9375rem; color: var(--encre-3); }

@media (min-width: 860px) {
  .entete-section { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 24px; }
  .entete-section__note { padding-bottom: 4px; text-align: right; }
}

/* ---------------------------------------------------------------- boutons */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 26px;
  border: 2px solid transparent;
  border-radius: 6px;
  font-family: var(--cd);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.bouton:hover { text-decoration: none; }

.bouton--action { background: var(--rouge); border-color: var(--rouge); color: var(--blanc); }
.bouton--action:hover { background: #9E1414; border-color: #9E1414; color: var(--blanc); }

.bouton--contour { background: transparent; border-color: var(--ruban); color: var(--ruban); }
.bouton--contour:hover { background: var(--ruban); color: var(--blanc); }

.bouton--rouge  { border-color: var(--rouge);  color: var(--rouge); }
.bouton--rouge:hover  { background: var(--rouge);  color: var(--blanc); }
.bouton--ruban  { border-color: var(--ruban);  color: var(--ruban); }
.bouton--vert   { border-color: var(--vert);   color: var(--vert); }
.bouton--vert:hover   { background: var(--vert);   color: var(--blanc); }
.bouton--marine { border-color: var(--marine); color: var(--marine); }
.bouton--marine:hover { background: var(--marine); color: var(--blanc); }
.bouton--clair  { border-color: #4FC3D4; color: #4FC3D4; }
.bouton--clair:hover { background: #4FC3D4; color: var(--marine); }

/* Sur un aplat turquoise, seul le blanc franc tient le contraste. */
.bouton--blanc  { border-color: var(--blanc); color: var(--blanc); }
.bouton--blanc:hover { background: var(--blanc); color: var(--turquoise); }

.bouton--inactif {
  background: var(--filet-doux);
  border-color: var(--filet-doux);
  color: var(--encre-3);
  cursor: default;
  font-size: 1.1875rem;
}
.bouton--grand   { min-height: 58px; font-size: 1.4375rem; }
.bouton--compact { min-height: 44px; padding: 0 20px; font-size: 1.125rem; }
.bouton--large   { width: 100%; }

/* ---------------------------------------------------------------- étiquettes */

.etiquette {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--filet-doux);
  color: var(--encre-3);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* « 1er », « 32e » : l'exposant reste en bas de casse même dans un contexte en
   capitales, et ne prend pas l'interlettrage du texte qui l'entoure.

   La règle est volontairement globale. Elle était auparavant énumérée contexte
   par contexte, et chaque nouveau contexte en capitales rouvrait le défaut :
   le titre de page affichait « LA 32E ÉDITION » et un bouton « OUVRE LE 1ER
   OCTOBRE ». Sur ce site, un `sup` est toujours une marque d'ordinal. */
sup { text-transform: lowercase; letter-spacing: 0; }

.etiquette--ouvert       { background: var(--ouvert-fond);  color: var(--ouvert-texte); }
.etiquette--bientot      { background: var(--bientot-fond); color: var(--bientot-texte); }
.etiquette--label        { background: var(--bientot-fond); color: var(--bientot-texte); }
.etiquette--anniversaire { background: var(--alerte-fond);  color: var(--alerte-texte); }
.etiquette--nouveau      { background: var(--rouge);        color: var(--blanc); }

/* ---------------------------------------------------------------- barre utilitaire */

.barre-utilitaire { background: var(--marine); color: #9FC4D2; font-size: 0.8125rem; }
.barre-utilitaire__interieur {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 6px 20px; padding-top: 9px; padding-bottom: 9px;
}
.barre-utilitaire__edition {
  display: flex; align-items: center; gap: 9px;
  font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
}
.barre-utilitaire__edition .ico { color: #4FC3D4; width: 15px; height: 15px; }
.barre-utilitaire__liens { display: flex; align-items: center; gap: 16px; }
.barre-utilitaire__liens a { color: #9FC4D2; font-weight: 600; }
.barre-utilitaire__liens a:hover { color: var(--blanc); }
.barre-utilitaire__reseaux { display: flex; gap: 10px; }
.barre-utilitaire__reseaux .ico { width: 17px; height: 17px; color: #4FC3D4; }

/* ---------------------------------------------------------------- en-tête */

.entete { background: var(--blanc); border-bottom: 1px solid #E3EAEA; position: relative; z-index: 20; }
.entete__interieur {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding-top: 12px; padding-bottom: 12px;
}

.lockup { display: flex; align-items: center; gap: 13px; color: inherit; }
.lockup:hover { text-decoration: none; }
.lockup__icone { width: 56px; height: 56px; flex: none; }
.lockup__texte { display: flex; flex-direction: column; gap: 2px; }
.lockup__nom {
  font-family: var(--cd); font-size: clamp(1.25rem, 4vw, 1.75rem); font-weight: 800;
  line-height: 0.95; letter-spacing: 0.005em; text-transform: uppercase; color: var(--marine);
}
.lockup__slogan { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.03em; color: var(--encre-4); }

.burger {
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 48px; height: 48px; padding: 0 11px;
  background: none; border: 1px solid var(--filet); border-radius: 6px;
}
.burger__trait { display: block; height: 2px; background: var(--marine); border-radius: 2px; }

.nav { display: none; }
.nav.est-ouverte {
  display: block; position: absolute; left: 0; right: 0; top: 100%;
  background: var(--blanc); border-bottom: 1px solid var(--filet);
  box-shadow: 0 12px 24px -18px rgba(14, 73, 96, .5);
}
.nav__liste { display: flex; flex-direction: column; padding: 8px var(--gouttiere) 16px; }
.nav__liste > li { border-bottom: 1px solid var(--filet-doux); }
.nav__liste > li:last-child { border-bottom: 0; padding-top: 12px; }
.nav__liste a:not(.bouton) {
  display: block; padding: 14px 0;
  font-family: var(--cd); font-size: 1.25rem; font-weight: 700;
  letter-spacing: 0.02em; text-transform: uppercase; color: var(--marine);
}
.nav__liste a.est-actif { color: var(--rouge); }

/* La navigation ne passe à l'horizontale que quand ses huit entrées y tiennent
   vraiment. En dessous, le menu déroulant reste plus lisible qu'un compromis. */
@media (min-width: 1240px) {
  .burger { display: none; }
  .nav { display: block; }
  .nav__liste { flex-direction: row; align-items: center; gap: 14px; padding: 0; }
  .nav__liste a { white-space: nowrap; }
  .nav__liste > li { border: 0; padding: 0; }
  .nav__liste > li:last-child { padding-top: 0; }
  .nav__liste a:not(.bouton) {
    padding: 4px 0;
    font-size: 0.9375rem;
    border-bottom: 3px solid transparent;
  }
  .nav__liste a:not(.bouton):hover { border-bottom-color: var(--filet); text-decoration: none; }
  .nav__liste a.est-actif { border-bottom-color: var(--rouge); }

  /* Le bouton d'inscription de l'en-tête est un rappel : il n'apparaît que
     s'il ne comprime pas la navigation. L'action principale reste dans la
     barre d'action, juste sous le bandeau. */
  .nav__liste .bouton { display: none; }
  .lockup__nom { font-size: 1.375rem; }
}

@media (min-width: 1400px) {
  .nav__liste { gap: 18px; }
  .nav__liste a:not(.bouton) { font-size: 1.0625rem; }
  .lockup__nom { font-size: 1.625rem; }
}

@media (min-width: 1520px) {
  .nav__liste .bouton { display: inline-flex; }
}

/* Le week-end de course, la navigation gagne l'entrée du jour J. À 1520 px les
   deux ne tiennent plus ensemble : c'est le rappel d'inscription qui cède, et
   il revient dès qu'il y a la place. */
@media (min-width: 1520px) and (max-width: 1719px) {
  .nav__liste--longue .bouton { display: none; }
}

/* ---------------------------------------------------------------- bandeau */

.bandeau { background: var(--turquoise); }
.bandeau img {
  display: block; width: 100%;
  height: clamp(200px, 46vw, 520px);
  object-fit: cover; object-position: center 46%;
}

/* ---------------------------------------------------------------- barre d'action */

.barre-action { background: var(--blanc); border-bottom: 1px solid #E3EAEA; padding: 26px 0; }
.barre-action__grille { display: flex; flex-direction: column; gap: 22px; }
.barre-action__texte { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.barre-action__boutons { display: flex; flex-direction: column; gap: 11px; }

@media (min-width: 900px) {
  .barre-action { padding: 30px 0; }
  .barre-action__grille { flex-direction: row; align-items: center; justify-content: space-between; gap: 44px; }
  .barre-action__boutons { min-width: 300px; }
}

/* ---------------------------------------------------------------- état des inscriptions */

.etat { padding-top: 22px; }
.etat__duo, .etat__solo {
  display: flex; flex-direction: column;
  border: 1px solid var(--filet); border-radius: var(--rayon); overflow: hidden;
}
.etat__volet { padding: 22px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.etat__volet--ouvert  { background: var(--ouvert-fond); }
.etat__volet--bientot { background: var(--bientot-fond); }
.etat__volet .bouton { margin-top: 6px; }

.etat__titre {
  font-family: var(--cd); font-size: 1.75rem; font-weight: 800; line-height: 1.05;
  text-transform: uppercase; color: var(--marine);
}
.etat__texte { font-size: 0.9375rem; line-height: 1.5; color: var(--encre-2); }

.etat__solo { background: var(--ouvert-fond); border-color: #CFE3D5; padding: 22px; gap: 22px; }
.etat__chiffre { display: flex; flex-direction: column; gap: 2px; }
.etat__chiffre-libelle { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #3F5F4B; }
.etat__chiffre-valeur {
  font-family: var(--cd); font-size: 1.75rem; font-weight: 800; line-height: 1.1;
  color: var(--marine); font-variant-numeric: tabular-nums;
}
.etat__chiffre-valeur--action { color: var(--rouge); }
.etat__chiffre-note { font-size: 0.875rem; color: #3F5F4B; }
.etat__chiffre--a-confirmer .etat__chiffre-valeur { color: var(--bientot-texte); font-style: italic; }

@media (min-width: 820px) {
  .etat__duo { flex-direction: row; }
  .etat__duo > * { flex: 1 1 0; }
  .etat__volet { padding: 24px 26px; }
  .etat__volet--ouvert { border-right: 1px solid #CFE3D5; }
  .etat__solo { flex-direction: row; align-items: center; gap: 30px; padding: 24px 26px; }
  .etat__solo > .etat__chiffre { border-left: 1px solid #CFE3D5; padding-left: 28px; }
  .etat__solo > div:first-child { flex: 1.4 1 0; }
}

/* ---------------------------------------------------------------- épreuves */

.epreuves { padding: 48px 0 0; }
.epreuves__grille { display: grid; grid-template-columns: 1fr; gap: 18px; }

@media (min-width: 620px) { .epreuves__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .epreuves__grille { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }

.epreuve {
  display: flex; flex-direction: column; gap: 14px;
  padding: 20px 22px 22px;
  background: var(--blanc);
  border: 1px solid var(--filet);
  border-top: 5px solid var(--turquoise);
  border-radius: var(--rayon);
}
.epreuve--rouge  { border-top-color: var(--rouge); }
.epreuve--ruban  { border-top-color: var(--ruban); }
.epreuve--vert   { border-top-color: var(--vert); }
.epreuve--marine { border-top-color: var(--marine); }

.epreuve__entete { display: flex; flex-direction: column; gap: 2px; }

/* Le titre de la carte est un second accès à la page de l'épreuve. Il n'est
   souligné qu'au survol pour ne pas alourdir la grille au repos. */
.epreuve__titre-lien { display: block; color: inherit; text-decoration: none; }
.epreuve__titre-lien:hover { color: inherit; text-decoration: none; }
.epreuve__titre-lien:hover .epreuve__nom {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.epreuve__titre-lien:focus-visible { outline-offset: 4px; }
.epreuve__distance {
  font-family: var(--cd); font-size: 2.875rem; font-weight: 800; line-height: 1;
  color: var(--turquoise); font-variant-numeric: tabular-nums;
}
.epreuve--rouge  .epreuve__distance { color: var(--rouge); }
.epreuve--ruban  .epreuve__distance { color: var(--ruban); }
.epreuve--vert   .epreuve__distance { color: var(--vert); }
.epreuve__nom {
  margin: 0;
  font-family: var(--cd); font-size: 1.5rem; font-weight: 700; line-height: 1.1;
  text-transform: uppercase; color: var(--marine);
}
.epreuve .etiquette { align-self: flex-start; white-space: normal; text-align: left; line-height: 1.35; }
.epreuve__accroche { font-size: 0.875rem; line-height: 1.55; color: var(--encre-2); flex-grow: 1; }
.epreuve__tarif { border-top: 1px solid var(--filet-doux); padding-top: 12px; }
.epreuve__prix {
  font-family: var(--cd); font-size: 1.875rem; font-weight: 800; line-height: 1;
  color: var(--marine); font-variant-numeric: tabular-nums;
}
.epreuve__prix--texte { font-size: 1.5rem; }
.epreuve__prix-note { font-size: 0.8125rem; color: var(--encre-3); }
.epreuve__reserve { font-size: 0.8125rem; color: var(--ouvert-texte); font-weight: 600; text-align: center; }

/* ---------------------------------------------------------------- samedis training */

.training { margin-top: 48px; background: var(--creme); padding: 40px 0 44px; }
.training__grille { display: grid; grid-template-columns: 1fr; gap: 30px; align-items: center; }
.training .titre-section { margin: 4px 0 12px; }
.training__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }

.training__faits {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 26px;
  background: var(--blanc); border: 1px solid #E3DCCB; border-radius: 10px; padding: 24px 26px;
}
.training__faits dt { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--encre-3); }
.training__valeur {
  font-family: var(--cd); font-size: 1.875rem; font-weight: 800; line-height: 1;
  color: var(--marine); font-variant-numeric: tabular-nums;
}
.training__valeur--texte { font-size: 1.375rem; line-height: 1.1; }
.training__valeur--action { color: var(--rouge); }
.training__note { font-size: 0.875rem; color: var(--encre-3); }
.training__pied {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 10px;
  border-top: 1px solid #F0EADC; padding-top: 14px; font-size: 0.875rem; color: var(--encre-2);
}
.training__pied .ico { width: 18px; height: 18px; color: var(--bientot-texte); }

@media (min-width: 940px) {
  .training__grille { grid-template-columns: 1fr 1.2fr; gap: 44px; }
}

/* ---------------------------------------------------------------- boutique */

.boutique { margin-top: 48px; }
.boutique__grille {
  display: grid; grid-template-columns: 1fr;
  background: var(--marine); border-radius: 10px; overflow: hidden;
}
.boutique__texte { padding: 30px 26px; display: flex; flex-direction: column; gap: 13px; align-items: flex-start; }
.boutique__articles {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
  background: #14586F; padding: 24px;
}
.boutique__articles li {
  display: flex; align-items: flex-end; justify-content: center;
  min-height: 130px; padding: 10px;
  border: 2px dashed rgba(255, 255, 255, .35); border-radius: 8px;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #9FC4D2;
}

@media (min-width: 900px) {
  .boutique__grille { grid-template-columns: 1.15fr 1fr; }
  .boutique__texte { padding: 34px 36px; }
  .boutique__articles li { min-height: 168px; }
}

/* ---------------------------------------------------------------- solidarité */

.solidarite { padding: 48px 0 0; }
.solidarite__grille { display: grid; grid-template-columns: 1fr; gap: 18px; }
.solidarite__principale {
  background: var(--turquoise); border-radius: 10px; padding: 26px 28px;
  display: flex; flex-direction: column; gap: 10px;
}
.solidarite__montant {
  font-family: var(--cd); font-size: 4.25rem; font-weight: 800; line-height: 0.9;
  color: var(--blanc); font-variant-numeric: tabular-nums;
}
.solidarite__titre {
  margin: 0;
  font-family: var(--cd); font-size: 1.5rem; font-weight: 800; line-height: 1.15;
  text-transform: uppercase; color: var(--blanc);
}
.solidarite__asso {
  border: 1px solid var(--filet); border-radius: 10px; padding: 24px 26px;
  display: flex; flex-direction: column; gap: 10px;
}
.solidarite__asso-nom {
  margin: 0;
  font-family: var(--cd); font-size: 1.75rem; font-weight: 800; line-height: 1.1;
  text-transform: uppercase; color: var(--marine);
}
.solidarite__asso .texte { flex-grow: 1; font-size: 0.9375rem; }
.solidarite__lien { font-size: 0.875rem; font-weight: 600; }

@media (min-width: 900px) {
  .solidarite__grille { grid-template-columns: 1.4fr 1fr 1fr; gap: 20px; }
}

/* ---------------------------------------------------------------- partenaires */

.partenaires { margin-top: 48px; background: var(--surface); padding: 36px 0 40px; }
.partenaires .entete-section--simple { border-bottom-width: 0; padding-bottom: 0; margin-bottom: 22px; }
.partenaires__rangee { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.partenaires__niveau {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--encre-3);
}
.partenaires__logos { display: grid; gap: 12px; align-items: center; }
.partenaires__logos--grand  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.partenaires__logos--moyen  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.partenaires__logos--petit  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.partenaires__logos li {
  display: flex; align-items: center; justify-content: center;
  background: var(--blanc); border-radius: 6px; padding: 10px;
}
.partenaires__logos--grand li { min-height: 74px; }
.partenaires__logos--moyen li { min-height: 58px; }
.partenaires__logos--petit li { min-height: 46px; }
.partenaires__logos img { max-height: 46px; width: auto; object-fit: contain; }
.partenaires__vide {
  border: 1px dashed #C4D2D2; color: var(--encre-4);
  font-size: 0.75rem; font-style: italic; grid-column: 1 / -1; min-height: 46px;
}

@media (min-width: 760px) {
  .partenaires__rangee { flex-direction: row; align-items: center; gap: 20px; }
  .partenaires__niveau { width: 150px; flex: none; }
  .partenaires__logos { flex-grow: 1; }
  .partenaires__logos--grand { grid-template-columns: 220px; }
  .partenaires__logos--moyen { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .partenaires__logos--petit { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- pied de page */

.pied { margin-top: 48px; background: var(--marine); color: #C9DEE7; padding: 36px 0 26px; }
.pied__colonnes { display: grid; grid-template-columns: 1fr; gap: 26px; }
.pied__marque {
  font-family: var(--cd); font-size: 1.625rem; font-weight: 800; line-height: 1;
  letter-spacing: 0.01em; text-transform: uppercase; color: #4FC3D4; margin-bottom: 8px;
}
.pied__texte { font-size: 0.875rem; line-height: 1.6; color: #9FC4D2; max-width: 34ch; }
.pied__titre { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #4FC3D4; margin-bottom: 9px; }
.pied__bloc li { margin-bottom: 8px; }
.pied__bloc a, .pied__legal a { color: #C9DEE7; font-size: 0.875rem; }
.pied__bloc a:hover, .pied__legal a:hover { color: var(--blanc); }
.pied__bas {
  border-top: 1px solid #1D5C76; margin-top: 24px; padding-top: 16px;
  display: flex; flex-direction: column; gap: 10px;
  font-size: 0.8125rem; color: #7FA9BC;
}
.pied__legal { display: flex; flex-wrap: wrap; gap: 18px; }

@media (min-width: 760px) {
  .pied__colonnes { grid-template-columns: 1.3fr repeat(3, 1fr); gap: 32px; }
  .pied__bas { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ---------------------------------------------------------------- barre de dev */

/* En développement, la barre du bas ne doit pas masquer le pied de page. */
body.a-barre-dev { padding-bottom: 116px; }

.dev-barre {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: var(--noir); color: #E8EFEF;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
  padding: 8px 14px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px;
}

/*
   Le bouton flottant, et la case qui le commande.

   La case à cocher est le seul mécanisme : masquée par la taille — et non par
   `hidden`, qui la sortirait de l'ordre de tabulation — elle porte l'état, le
   libellé lui sert de bouton, et le CSS fait le reste. Pas de JavaScript : un
   outil de développement qui dépendrait d'un script cesserait de fonctionner le
   jour où c'est le script qu'on débogue.

   Sur grand écran, rien ne change : le bouton et la croix sont absents, la
   barre est toujours là. Le repli ne concerne que les petits écrans, où quatre
   lignes de repères mangeaient la moitié de la page.
*/
/* `fixed` et non `absolute` : la case est rendue en fin de document, et un
   navigateur qui lui donne le focus fait défiler la page jusqu'à elle. Un appui
   sur le bouton renvoyait donc en bas de page avant d'ouvrir la barre. Fixée
   sous le bouton, elle est déjà dans l'écran : plus rien à faire défiler. */
.dev-barre__bascule {
  position: fixed; right: 12px; bottom: 12px; z-index: 91;
  width: 1px; height: 1px; opacity: 0;
  margin: 0; padding: 0; border: 0;
}
.dev-barre__bouton,
.dev-barre__fermer { display: none; }

@media (max-width: 899px) {
  /* Repliée : seul le bouton reste, et la page récupère sa hauteur. */
  body.a-barre-dev { padding-bottom: 0; }
  .dev-barre { display: none; }

  .dev-barre__bouton {
    position: fixed; right: 12px; bottom: 12px; z-index: 91;
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 999px;
    background: var(--noir); color: var(--or);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px; font-weight: 700;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
    cursor: pointer;
  }
  .dev-barre__bascule:focus-visible + .dev-barre__bouton {
    outline: 3px solid var(--turquoise); outline-offset: 2px;
  }

  /* Dépliée. La barre peut être plus haute que l'écran : elle défile, et
     s'arrête aux deux tiers pour qu'on voie toujours la page derrière. */
  .dev-barre__bascule:checked ~ .dev-barre {
    display: flex;
    max-height: 70vh; overflow-y: auto;
    padding-right: 46px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .dev-barre__bascule:checked ~ .dev-barre__bouton { display: none; }

  .dev-barre__bascule:checked ~ .dev-barre .dev-barre__fermer {
    position: absolute; top: 6px; right: 8px;
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 999px;
    background: rgba(255, 255, 255, .12); color: #E8EFEF;
    font-size: 20px; line-height: 1;
    cursor: pointer;
  }
}
.dev-barre__etat { display: flex; gap: 14px; align-items: center; }
.dev-barre__alerte {
  margin: 0 0 8px; padding: 8px 12px; border-radius: 6px;
  background: #7A1F1F; color: #FFE8E8; line-height: 1.5;
}
.dev-barre__alerte code { background: rgba(255, 255, 255, .16); padding: 1px 5px; border-radius: 3px; }
.dev-barre__etat strong { color: var(--or); }
.dev-barre__reperes { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.dev-barre__reperes li { display: flex; align-items: baseline; gap: 5px; }

/* Le nom du groupe, et le jalon auquel chaque repère conduit vraiment. */
.dev-barre__groupe {
  color: var(--or); text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 10px; opacity: 0.85;
}
.dev-barre__atteint { color: #7E9AA5; font-size: 10px; }
.dev-barre a { color: #4FC3D4; }
.dev-barre__todo summary { cursor: pointer; color: var(--or); }
.dev-barre__todo ul { list-style: disc; padding-left: 18px; margin-top: 6px; max-width: 70ch; }

/* ---------------------------------------------------------------- impression et préférences */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media print {
  .barre-utilitaire, .burger, .nav, .dev-barre, .evitement { display: none !important; }
  body { font-size: 11pt; }
}

/* ==========================================================================
   Pages d'épreuve
   ========================================================================== */

.section { padding: 44px 0 0; }
.section--creme { margin-top: 44px; padding: 40px 0 44px; background: var(--creme); }
.section:first-of-type { padding-top: 40px; }

.titre-page--clair { color: var(--blanc); }
.surtitre--clair { color: #4FC3D4; }
.texte--petit { font-size: 0.9375rem; }

.etiquette--sobre { background: rgba(255, 255, 255, .14); color: #C9E4F5; }

.ico--grand { width: 38px; height: 38px; stroke-width: 1.5; }

/* ---------------------------------------------------------------- fil d'Ariane */

.ariane { background: var(--surface); border-bottom: 1px solid #E3EAEA; font-size: 0.8125rem; }
.ariane ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 0; }
.ariane li { display: flex; align-items: center; gap: 8px; color: var(--encre-3); }
.ariane li + li::before { content: "›"; color: var(--encre-4); }
.ariane li[aria-current] { color: var(--marine); font-weight: 600; }

/* ---------------------------------------------------------------- hero de page */

.hero-course { background: var(--marine); padding: 36px 0 40px; }
.hero-course__grille { display: grid; grid-template-columns: 1fr; gap: 30px; align-items: start; }
.hero-course__texte { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }

.hero-course__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.hero-course__reserve {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.9375rem; font-weight: 600; color: #8FE0B4;
}
.hero-course--sobre { padding: 36px 0 40px; }
.hero-course--sobre .texte { max-width: 62ch; margin-top: 12px; }
/* Une accroche qui n'a pas à être coupée : la mesure de 62 caractères sert le
   confort de lecture d'un paragraphe, pas celui d'une phrase unique qu'elle
   casse en deux sans raison. À poser au cas par cas, pas par défaut. */
.hero-course--sobre .texte--pleine-largeur { max-width: none; }

/* Le bandeau de titre quand le partenaire du naming a un logotype : le texte à
   gauche, le logotype à droite, là où le bandeau était vide. Sur téléphone les
   deux se suivent. */
.hero-course__bandeau { display: flex; flex-direction: column; align-items: flex-start; gap: 26px; }

/* La pastille blanche n'est pas un effet de style : le logotype de la Banque
   Populaire est bleu marine sur fond transparent, et le bandeau est bleu marine.
   Sans elle, il disparaîtrait. */
.hero-course__naming {
  display: inline-flex; align-items: center; justify-content: center;
  margin: 0; padding: 16px 22px;
  background: var(--blanc); border-radius: var(--rayon);
}
.hero-course__naming img { max-width: 100%; width: auto; height: auto; object-fit: contain; }
.hero-course__naming .logo--carre { max-height: 88px; }
.hero-course__naming .logo--moyen { max-height: 72px; }
.hero-course__naming .logo--large  { max-height: 60px; }

.jetons { display: flex; flex-wrap: wrap; gap: 8px; }

@media (min-width: 920px) {
  .hero-course { padding: 44px 0 46px; }
  .hero-course__grille { grid-template-columns: 1.1fr 1fr; gap: 48px; }
  .hero-course__bandeau { flex-direction: row; align-items: center; justify-content: space-between; gap: 48px; }
  .hero-course__naming { flex: 0 0 auto; }
}

/* ---------------------------------------------------------------- l'essentiel */

.essentiel { background: #14586F; border-radius: 10px; padding: 24px 26px; }
.essentiel__titre {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: #4FC3D4; margin-bottom: 16px;
}
.essentiel__faits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 26px; }
.essentiel__faits dt {
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: #7FB5C6;
}
.essentiel__valeur {
  font-family: var(--cd); font-size: 1.75rem; font-weight: 800; line-height: 1.05;
  color: var(--blanc); font-variant-numeric: tabular-nums;
}
.essentiel__note { font-size: 0.8125rem; color: #A8CBD8; }
.essentiel__reserve {
  display: flex; align-items: flex-start; gap: 9px;
  border-top: 1px solid #1D6B85; margin-top: 20px; padding-top: 14px;
  font-size: 0.8125rem; line-height: 1.5; color: #A8CBD8;
}
.essentiel__reserve .ico { color: var(--or); margin-top: 2px; }

/* ---------------------------------------------------------------- parcours */

.parcours { display: grid; grid-template-columns: 1fr; gap: 22px; }

/* Le logotype du partenaire de l'épreuve, en tête de la colonne des boucles.
   Il vient sur fond clair, donc sans pastille : les fichiers sont détourés sur
   fond blanc et se posent directement.

   Deux bornes, et c'est la plus petite qui gagne. La hauteur suit la forme,
   comme sur le mur des partenaires. La largeur est celle de la colonne : sans
   elle, un logotype de proportion 6/1 — Vivalto Sport — déborderait avant
   d'atteindre sa hauteur. */
.parcours__logos {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px;
  margin: 0 0 4px;
}
.parcours__logos img {
  max-width: 100%; width: auto; height: auto; object-fit: contain;
}
/* Les badges officiels, en pied de la colonne des boucles. Même carte que les
   meneurs d'allure, pour que la colonne garde un seul vocabulaire. */
.labels {
  padding: 18px 20px;
  background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--rayon);
}
.labels__titre {
  margin: 0 0 14px;
  font-family: var(--cd); font-weight: 800; font-size: 1.0625rem;
  text-transform: uppercase; letter-spacing: 0.02em; color: var(--marine);
}
.labels__marques { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin: 0; }
.labels__marques img { max-width: 100%; width: auto; height: auto; max-height: 96px; object-fit: contain; }
.labels__note { margin: 12px 0 0; font-size: 0.875rem; line-height: 1.5; color: var(--encre-3); }

.parcours__logos .logo--carre { max-height: 110px; }
.parcours__logos .logo--moyen { max-height:  84px; }
.parcours__logos .logo--large { max-height:  60px; }
.parcours__boucles { display: flex; flex-direction: column; gap: 12px; }
.parcours__leaflet { min-height: 320px; border-radius: 10px; }

.attente {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; text-align: center; min-height: 300px; padding: 26px;
  background: var(--surface); border: 2px dashed #C4D2D2; border-radius: 10px;
}
.attente .ico { color: var(--encre-4); }
.attente__titre {
  font-family: var(--cd); font-size: 1.375rem; font-weight: 800;
  letter-spacing: 0.03em; text-transform: uppercase; color: var(--marine);
}
.attente__note { font-size: 0.875rem; line-height: 1.5; color: var(--encre-3); max-width: 40ch; }

.boucle {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 18px;
  border: 1px solid var(--filet); border-left: 4px solid var(--turquoise);
  border-radius: 6px;
}
.boucle--rouge { border-left-color: var(--rouge); }
.boucle--ruban { border-left-color: var(--ruban); }
.boucle--vert  { border-left-color: var(--vert); }
.boucle__numero {
  font-family: var(--cd); font-size: 2rem; font-weight: 800; line-height: 1;
  color: var(--turquoise); flex: none;
}
.boucle--rouge .boucle__numero { color: var(--rouge); }
.boucle--ruban .boucle__numero { color: var(--ruban); }
.boucle--vert  .boucle__numero { color: var(--vert); }
.boucle__distance {
  font-family: var(--cd); font-size: 1.5rem; font-weight: 800; line-height: 1.1;
  color: var(--marine); font-variant-numeric: tabular-nums;
}
.boucle__note { font-size: 0.8125rem; color: var(--encre-3); }

.encart {
  background: var(--surface); border-radius: 6px; padding: 15px 18px;
  font-size: 0.875rem; line-height: 1.55; color: var(--encre-2);
}
.encart--alerte { background: var(--bientot-fond); color: var(--bientot-texte); }

@media (min-width: 900px) {
  .parcours { grid-template-columns: 1.5fr 1fr; gap: 28px; }
}

/* ---------------------------------------------------------------- tarifs */

.tarifs {
  margin-top: 22px; background: var(--blanc);
  border: 1px solid #E3DCCB; border-radius: 10px; overflow: hidden;
}
.tarifs__ligne {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px 24px; padding: 18px 22px; border-bottom: 1px solid #F0EADC;
}
.tarifs__ligne:last-child { border-bottom: 0; }
.tarifs__libelle {
  font-family: var(--cd); font-size: 1.375rem; font-weight: 700; line-height: 1.1;
  text-transform: uppercase; color: var(--marine);
}
.tarifs__note { font-size: 0.875rem; color: var(--encre-3); }
.tarifs__montant { text-align: right; }
.tarifs__prix {
  font-family: var(--cd); font-size: 2rem; font-weight: 800; line-height: 1;
  color: var(--marine); font-variant-numeric: tabular-nums;
}
.tarifs__prix--rouge { color: var(--rouge); }
.tarifs__prix--ruban { color: var(--ruban); }
.tarifs__prix--vert  { color: var(--vert); }
.tarifs__prix--marine { color: var(--marine); font-size: 1.5rem; }

/* ---------------------------------------------------------------- plateau */

.plateau { display: grid; grid-template-columns: 1fr; gap: 16px; }
.perf {
  background: var(--blanc); border: 1px solid var(--filet);
  border-top: 5px solid var(--turquoise); border-radius: var(--rayon);
  padding: 20px 22px; display: flex; flex-direction: column; gap: 6px;
}
.perf--rouge     { border-top-color: var(--rouge); }
.perf--ruban     { border-top-color: var(--ruban); }
.perf--vert      { border-top-color: var(--vert); }
.perf--marine    { border-top-color: var(--marine); }
.perf--turquoise { border-top-color: var(--turquoise); }
.perf__libelle {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--encre-3);
}
.perf__valeur {
  font-family: var(--cd); font-size: 2.875rem; font-weight: 800; line-height: 1;
  color: var(--turquoise); font-variant-numeric: tabular-nums;
}
.perf--rouge  .perf__valeur { color: var(--rouge); }
.perf--ruban  .perf__valeur { color: var(--ruban); }
.perf--vert   .perf__valeur { color: var(--vert); }
.perf--marine .perf__valeur { color: var(--marine); }
.perf__nom {
  font-family: var(--cd); font-size: 1.5rem; font-weight: 700; line-height: 1.1;
  color: var(--marine);
}
.perf__note { font-size: 0.875rem; line-height: 1.5; color: var(--encre-3); }

@media (min-width: 620px)  { .plateau { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .plateau { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; } }

/* ---------------------------------------------------------------- équipes de trois */

.equipes {
  background: var(--ruban); border-radius: 10px; padding: 28px 26px;
  display: grid; grid-template-columns: 1fr; gap: 26px; align-items: center;
}
.equipes__texte { display: flex; flex-direction: column; gap: 12px; }
.equipes__formules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.equipes__formules li {
  background: rgba(255, 255, 255, .12); border-radius: 8px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 3px;
}
.equipes__formules strong {
  font-family: var(--cd); font-size: 1.25rem; font-weight: 800;
  text-transform: uppercase; color: var(--blanc);
}
.equipes__formules span { font-size: 0.875rem; color: #C9E4F5; }

@media (min-width: 940px) {
  .equipes { grid-template-columns: 1.1fr 1fr; gap: 40px; padding: 34px 36px; }
}

/* ---------------------------------------------------------------- classements */

.classements { display: grid; grid-template-columns: 1fr; gap: 20px; }
.classements article {
  border: 1px solid var(--filet); border-radius: 10px; padding: 22px 24px;
  display: flex; flex-direction: column; gap: 8px;
}
.classements__titre {
  margin: 0;
  font-family: var(--cd); font-size: 1.5rem; font-weight: 700; line-height: 1.1;
  text-transform: uppercase; color: var(--marine);
}

@media (min-width: 760px) { .classements { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------- renvois et rappels */

.renvoi, .rappel {
  border: 1px solid var(--filet); border-radius: 10px; padding: 24px 26px;
  display: flex; flex-direction: column; gap: 18px;
}
.renvoi > div, .rappel > div { display: flex; flex-direction: column; gap: 6px; }
.rappel__titre {
  font-family: var(--cd); font-size: 1.875rem; font-weight: 800; line-height: 1.1;
  text-transform: uppercase; color: var(--marine);
}
.rappel__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }

@media (min-width: 820px) {
  .renvoi, .rappel {
    flex-direction: row; align-items: center; justify-content: space-between; gap: 32px;
    padding: 28px 32px;
  }
  .renvoi .bouton, .rappel .bouton { flex: none; }
}

/* ---------------------------------------------------------------- don */

.don {
  background: var(--turquoise); border-radius: 10px; padding: 26px 28px;
  display: grid; grid-template-columns: 1fr; gap: 16px; align-items: center;
}
.don__montant {
  font-family: var(--cd); font-size: 4rem; font-weight: 800; line-height: 0.9;
  color: var(--blanc); font-variant-numeric: tabular-nums;
}
.don__titre {
  font-family: var(--cd); font-size: 1.625rem; font-weight: 800; line-height: 1.1;
  text-transform: uppercase; color: var(--blanc); margin-bottom: 4px;
}

@media (min-width: 900px) {
  .don { grid-template-columns: auto 1fr auto; gap: 32px; padding: 30px 34px; }
  .don .bouton { white-space: nowrap; }
}

/* ---------------------------------------------------------------- carte épreuve : lien */

.epreuve__lien { font-size: 0.875rem; font-weight: 600; }

/* ---------------------------------------------------------------- grilles d'épreuves */

/* Trois épreuves, pas quatre : la grille s'ajuste pour ne pas laisser
   une carte orpheline sur sa ligne. */
@media (min-width: 620px) {
  .epreuves__grille--trio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .epreuves__grille--duo  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .epreuves__grille--trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- option d'inscription */

/* Le Challenge Entreprises n'est pas une course : il ne prend donc pas la
   forme d'une carte d'épreuve. Fond neutre, filet gauche, pas de grand
   chiffre de distance. */
.option {
  background: var(--surface);
  border-left: 4px solid var(--marine);
  border-radius: 0 var(--rayon) var(--rayon) 0;
  padding: 24px 26px;
  display: flex; flex-direction: column; gap: 20px;
}
.option__texte { display: flex; flex-direction: column; gap: 8px; }
.option__surtitre {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--ruban);
}
.option__eligibles {
  display: flex; align-items: center; gap: 9px; margin-top: 2px;
  font-size: 0.9375rem; font-weight: 600; color: var(--ouvert-texte);
}
.option__actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.option__note { font-size: 0.8125rem; color: var(--encre-3); }

@media (min-width: 860px) {
  .option {
    flex-direction: row; align-items: center; justify-content: space-between; gap: 36px;
    padding: 26px 30px;
  }
  .option__actions { flex: none; align-items: flex-end; }
}

/* ---------------------------------------------------------------- meneurs d'allure */

.meneurs {
  border: 1px solid var(--filet); border-radius: 6px; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.meneurs__titre {
  font-family: var(--cd); font-size: 1.25rem; font-weight: 700;
  text-transform: uppercase; color: var(--marine);
}
.meneurs__allures { display: flex; flex-wrap: wrap; gap: 8px; }
.meneurs__allures li {
  font-family: var(--cd); font-size: 1.0625rem; font-weight: 700;
  letter-spacing: 0.02em; color: var(--ruban);
  background: #EAF3F8; border-radius: 999px; padding: 5px 13px;
  font-variant-numeric: tabular-nums;
}
.meneurs__note { font-size: 0.8125rem; color: var(--encre-3); }

/* ==========================================================================
   Infos pratiques
   ========================================================================== */

.duo, .trio, .colonnes { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 760px) {
  .duo     { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
}
@media (min-width: 900px) {
  .trio { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
}

/* ---------------------------------------------------------------- départs */

.departs { display: flex; flex-direction: column; gap: 12px; }
.depart {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px;
  padding: 16px 20px;
  background: var(--blanc);
  border: 1px solid var(--filet); border-left: 5px solid var(--turquoise);
  border-radius: 6px;
}
.depart--rouge { border-left-color: var(--rouge); }
.depart--ruban { border-left-color: var(--ruban); }
.depart--vert  { border-left-color: var(--vert); }
.depart__heure {
  font-family: var(--cd); font-size: 2.25rem; font-weight: 800; line-height: 1;
  color: var(--marine); font-variant-numeric: tabular-nums;
  min-width: 5.5ch; flex: none;
}
.depart > div { flex: 1 1 14rem; }
.depart__nom {
  font-family: var(--cd); font-size: 1.375rem; font-weight: 700; line-height: 1.15;
  text-transform: uppercase; color: var(--marine);
}
.depart__note { font-size: 0.875rem; color: var(--encre-3); }
.depart__lien { font-size: 0.875rem; font-weight: 600; flex: none; }

/* ---------------------------------------------------------------- fiches */

.fiche {
  background: var(--blanc);
  border: 1px solid var(--filet); border-top: 5px solid var(--turquoise);
  border-radius: var(--rayon); padding: 20px 22px;
  display: flex; flex-direction: column; gap: 3px;
}
.fiche--rouge { border-top-color: var(--rouge); }
.fiche--ruban { border-top-color: var(--ruban); }
.fiche__libelle {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--encre-3);
}
.fiche__valeur {
  font-family: var(--cd); font-size: 1.625rem; font-weight: 800; line-height: 1.1;
  text-transform: uppercase; color: var(--marine);
}
.fiche__horaire {
  font-family: var(--cd); font-size: 1.5rem; font-weight: 700; line-height: 1.2;
  color: var(--rouge); font-variant-numeric: tabular-nums; margin-bottom: 6px;
}
.fiche__lieu { font-size: 1rem; font-weight: 600; color: var(--encre); }
.fiche__adresse { font-size: 0.875rem; color: var(--encre-3); }
/* La règle sous l'adresse : détachée par un filet, parce qu'elle corrige
   l'horaire affiché juste au-dessus au lieu de le compléter. */
.fiche__note {
  margin: 10px 0 0; padding-top: 10px;
  border-top: 1px solid var(--filet-doux);
  font-size: 0.875rem; line-height: 1.5; color: var(--encre-2);
}

/* ---------------------------------------------------------------- alertes */

.alerte {
  display: flex; align-items: flex-start; gap: 11px;
  margin-top: 18px; padding: 15px 18px;
  background: var(--bientot-fond); color: var(--bientot-texte);
  border-radius: 6px; font-size: 0.9375rem; line-height: 1.55;
}
.alerte .ico { flex: none; margin-top: 3px; }
.alerte--sante { background: var(--alerte-fond); color: var(--alerte-texte); }

/* ---------------------------------------------------------------- navette */

.navette {
  background: var(--ruban); border-radius: 10px; padding: 28px 26px;
  display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center;
}
.navette__texte { display: flex; flex-direction: column; gap: 10px; }
.navette__conseils { display: flex; flex-direction: column; gap: 10px; }
.navette__conseils li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 0.9375rem; line-height: 1.5; color: #D6EAF7;
}
.navette__conseils .ico { color: #8FE0B4; flex: none; margin-top: 3px; }

@media (min-width: 940px) {
  .navette { grid-template-columns: 1.15fr 1fr; gap: 40px; padding: 32px 36px; }
}

/* ---------------------------------------------------------------- avantages */

.avantage {
  border: 1px solid var(--filet); border-radius: var(--rayon); padding: 20px 22px;
  display: flex; flex-direction: column; gap: 6px;
}
.avantage__partenaire {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ruban);
}
.avantage__offre {
  font-family: var(--cd); font-size: 1.5rem; font-weight: 700; line-height: 1.15;
  color: var(--marine);
}
.avantage__note { font-size: 0.8125rem; line-height: 1.5; color: var(--encre-3); }

/* ---------------------------------------------------------------- listes et éco */

.liste-cochee { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; }
.liste-cochee li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 1rem; line-height: 1.5; color: var(--encre-2);
}
.liste-cochee .ico { color: var(--vert); flex: none; margin-top: 4px; }
/* Un paragraphe qui suit une liste cochée reprend de l'air. */
.liste-cochee + .texte { margin-top: 14px; }

.eco { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.eco dt {
  font-family: var(--cd); font-size: 1.1875rem; font-weight: 700;
  text-transform: uppercase; color: var(--marine);
}
.eco dd { font-size: 0.9375rem; line-height: 1.55; color: var(--encre-2); }

/* ---------------------------------------------------------------- attente compacte */

.attente--compacte { min-height: 200px; padding: 20px; }

/* ---------------------------------------------------------------- tuiles */

.quatuor { display: grid; grid-template-columns: 1fr; gap: 12px; }
.tuile {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px;
  background: var(--surface); border: 1px solid var(--filet); border-radius: var(--rayon);
  color: inherit; text-decoration: none;
}
.tuile:hover { background: var(--blanc); border-color: var(--ruban); color: inherit; text-decoration: none; }
.tuile__titre {
  font-family: var(--cd); font-size: 1.3125rem; font-weight: 700;
  text-transform: uppercase; color: var(--marine);
}
.tuile__note { font-size: 0.875rem; color: var(--encre-3); flex: 1 1 auto; }
.tuile__fleche { color: var(--ruban); flex: none; }

/* Le nombre de tuiles varie : quatre sur le sommaire, trois sur une sous-page
   qui ne se cite pas elle-même. auto-fit évite la tuile orpheline. */
@media (min-width: 700px)  { .quatuor { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .quatuor { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }

@media (min-width: 700px) {
  .tuile { flex-direction: column; align-items: flex-start; gap: 6px; }
  .tuile__note { flex: none; }
  .tuile__fleche { margin-top: 6px; }
}

/* ---------------------------------------------------------------- documents */

.documents { display: flex; flex-direction: column; gap: 12px; }
.document {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px;
  padding: 18px 20px;
  border: 1px solid var(--filet); border-radius: var(--rayon);
}
.document > div { flex: 1 1 16rem; }
.document .ico { color: var(--ruban); flex: none; }
.document__titre {
  font-family: var(--cd); font-size: 1.3125rem; font-weight: 700; line-height: 1.2;
  text-transform: uppercase; color: var(--marine);
}
.document__note { font-size: 0.8125rem; color: var(--encre-3); }
.ico--moyen { width: 26px; height: 26px; }

/* ==========================================================================
   Inscriptions et Samedis Training
   ========================================================================== */

.inscriptions { display: flex; flex-direction: column; gap: 12px; }
.inscription {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
  padding: 16px 20px;
  background: var(--blanc);
  border: 1px solid var(--filet); border-left: 5px solid var(--turquoise);
  border-radius: 6px;
}
.inscription--rouge  { border-left-color: var(--rouge); }
.inscription--ruban  { border-left-color: var(--ruban); }
.inscription--vert   { border-left-color: var(--vert); }
.inscription--marine { border-left-color: var(--marine); }
.inscription__quoi { flex: 1 1 18rem; }
.inscription__libelle {
  font-family: var(--cd); font-size: 1.375rem; font-weight: 700; line-height: 1.15;
  text-transform: uppercase; color: var(--marine);
}
.inscription__libelle a { color: inherit; }
.inscription__libelle a:hover { color: var(--ruban); }
.inscription__detail { font-size: 0.875rem; color: var(--encre-3); }
.inscription__prix {
  font-family: var(--cd); font-size: 1.625rem; font-weight: 800; line-height: 1;
  color: var(--marine); font-variant-numeric: tabular-nums; flex: none;
}
.inscription .bouton { flex: none; min-height: 46px; font-size: 1.0625rem; padding: 0 20px; }

.fiche__etat { margin-top: 12px; }

/* ---------------------------------------------------------------- calendrier des séances */

.training__faits--page { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .training__faits--page { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.calendrier { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; }
.seance {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 12px 8px 10px;
  background: var(--blanc);
  border: 1px solid var(--filet); border-top: 4px solid var(--turquoise);
  border-radius: 6px;
}
.seance__numero {
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--encre-4);
}
.seance__date {
  font-family: var(--cd); font-size: 1.875rem; font-weight: 800; line-height: 1;
  color: var(--marine); font-variant-numeric: tabular-nums;
}
.seance__mois { font-size: 0.75rem; color: var(--encre-3); }

/* Une séance passée reste lisible mais s'efface : le calendrier sert
   d'abord à voir ce qui reste. */
.seance--passee { background: var(--surface); border-top-color: var(--filet); }
.seance--passee .seance__date { color: var(--encre-4); }

.jetons--niveaux { margin-top: 14px; }

.renvoi__actions { display: flex; flex-wrap: wrap; gap: 10px; flex: none; }

/* Une information confirmée et rassurante, pas une alerte. */
.alerte--info { background: var(--ouvert-fond); color: var(--ouvert-texte); }

/* ================================================================== le jour J */

/* En-tête du jour J : un aplat sombre pour que le compte à rebours ressorte
   même en plein soleil d'hiver, sur un écran de téléphone. */
.jj-entete { background: var(--marine); padding: 34px 0 40px; }
.jj-entete .titre-page { margin-top: 6px; }
.jj-entete .texte { max-width: 60ch; margin-top: 16px; }
.jj-entete__boutons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

/* Le jour même, le rouge de la marque prend la place du marine : la page change
   de registre en même temps que la journée. */
.jj-entete--matin, .jj-entete--en_course { background: #8F1212; }

.rebours {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 20px; padding: 16px 20px;
  background: rgba(255, 255, 255, .1);
  border-left: 5px solid var(--or);
  border-radius: var(--rayon);
}
.rebours__libelle {
  font-size: 0.875rem; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: rgba(255, 255, 255, .82);
}
.rebours__valeur { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; }
.rebours__delai {
  font-family: var(--cd); font-size: 3rem; font-weight: 800; line-height: 1;
  color: var(--blanc); font-variant-numeric: tabular-nums;
}
.rebours__heure {
  font-family: var(--cd); font-size: 1.375rem; font-weight: 700;
  text-transform: uppercase; color: var(--or);
}

/* ---------------------------------------------------------------- fil du jour */

.fil { list-style: none; margin: 26px 0 0; padding: 0; }

.fil__jour {
  margin: 26px 0 10px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--filet);
  font-family: var(--cd); font-size: 1.5rem; font-weight: 800;
  text-transform: uppercase; color: var(--marine);
}
.fil__jour:first-child { margin-top: 0; }
.fil__jour-note {
  display: block;
  font-family: var(--tx); font-size: 0.8125rem; font-weight: 500;
  letter-spacing: 0.04em; text-transform: none; color: var(--encre-3);
}

/* Le repère « vous êtes ici » : la seule ligne de la page qui bouge d'heure
   en heure, donc la seule qui a droit à une couleur pleine. */
.fil__repere {
  display: flex; align-items: baseline; gap: 12px;
  margin: 4px 0; padding: 8px 14px;
  background: var(--rouge); border-radius: 6px; color: var(--blanc);
}
.fil__repere-heure {
  font-family: var(--cd); font-size: 1.375rem; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.fil__repere-mot {
  font-size: 0.8125rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
}

.fil__moment {
  display: grid; grid-template-columns: 88px 1fr; gap: 4px 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--filet-doux);
}
.fil__moment:last-child { border-bottom: 0; }
.fil__heure {
  font-family: var(--cd); font-size: 1.75rem; font-weight: 800; line-height: 1.1;
  color: var(--marine); font-variant-numeric: tabular-nums;
  /* « 11 h 15 » ne doit pas se couper en deux lignes dans sa colonne. */
  white-space: nowrap;
}
.fil__corps { min-width: 0; }
.fil__titre { font-family: var(--cd); font-size: 1.375rem; font-weight: 700; color: var(--encre); }
.fil__titre a { color: inherit; text-decoration: none; }
.fil__titre a:hover { color: var(--ruban); text-decoration: underline; }
.fil__note { margin-top: 2px; font-size: 0.9375rem; color: var(--encre-2); }

.fil__etat {
  grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
.fil__etat:empty { display: none; }
.fil__passe {
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--encre-4);
}
.fil__carte {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.875rem; font-weight: 600; color: var(--ruban);
}
.fil__carte .ico { width: 16px; height: 16px; }

/* Un moment passé s'efface sans disparaître : on doit pouvoir vérifier qu'on
   n'a rien manqué, mais l'œil doit tomber sur ce qui reste. */
.fil__moment--passe { opacity: .55; }
.fil__moment--en_cours .fil__heure { color: var(--ouvert-texte); }

.fil__moment--rouge .fil__heure { color: var(--rouge); }
.fil__moment--ruban .fil__heure { color: var(--ruban); }
.fil__moment--vert  .fil__heure { color: var(--vert); }
.fil__moment--passe .fil__heure { color: var(--encre-4); }

@media (min-width: 700px) {
  .fil__moment { grid-template-columns: 110px 1fr auto; align-items: baseline; }
  .fil__etat { grid-column: 3; justify-content: flex-end; }
  .fil__heure { font-size: 2.125rem; }
}

/* ---------------------------------------------------------------- réflexes */

.reflexe {
  position: relative;
  padding: 20px 20px 22px;
  background: var(--blanc);
  border: 1px solid var(--filet); border-top: 4px solid var(--turquoise);
  border-radius: var(--rayon);
}
.reflexe__numero {
  font-family: var(--cd); font-size: 2.5rem; font-weight: 800; line-height: 1;
  color: var(--filet);
}
.reflexe__titre {
  margin-top: 2px;
  font-family: var(--cd); font-size: 1.5rem; font-weight: 800;
  text-transform: uppercase; color: var(--marine);
}
.reflexe__texte { margin-top: 8px; font-size: 1rem; color: var(--encre); }
.reflexe__note { margin-top: 10px; font-size: 0.9375rem; color: var(--encre-2); }
.reflexe__note a { color: var(--ruban); font-weight: 600; }

.jj-guide { margin-top: 22px; }

/* ---------------------------------------------------------------- suivre */

.bloc-suivre {
  padding: 22px 22px 24px;
  background: var(--surface);
  border: 1px solid var(--filet); border-radius: var(--rayon);
}
.bloc-suivre .texte { margin-top: 10px; }
.titre-section--petit { font-size: 1.75rem; }

.liens-reseaux {
  list-style: none; display: flex; flex-wrap: wrap; gap: 10px;
  margin: 16px 0 0; padding: 0;
}
.liens-reseaux a {
  display: inline-block; padding: 8px 16px;
  background: var(--blanc);
  border: 1px solid var(--filet); border-radius: 999px;
  font-family: var(--cd); font-size: 1.0625rem; font-weight: 700;
  text-transform: uppercase; text-decoration: none; color: var(--marine);
}
.liens-reseaux a:hover { background: var(--marine); border-color: var(--marine); color: var(--blanc); }

.bloc-suivre__lien { margin-top: 12px; }
.bloc-suivre__lien a { font-weight: 600; color: var(--ruban); }

/* Entrée de navigation saillante : le jour J, le temps d'un week-end. */
.nav__saillant { color: var(--rouge) !important; font-weight: 800 !important; }

/* Rappel de développement, jamais affiché en production. */
.note-dev {
  margin-top: 18px; padding: 10px 14px;
  background: var(--bientot-fond); border-radius: 6px;
  font-size: 0.875rem; color: var(--bientot-texte);
}

/* ================================================================= tracés GPX */

/* Le tracé n'est pas une carte : pas de fond, pas de tuiles, juste la forme du
   parcours. Il se colore avec l'épreuve. */
.trace { --voie: var(--ruban); }
.trace--rouge { --voie: var(--rouge); }
.trace--ruban { --voie: var(--ruban); }
.trace--vert  { --voie: var(--vert); }

.trace__dessin { margin: 0; }
.trace__dessin svg {
  display: block; width: 100%; height: auto;
  /* Un parcours plus haut que large — c'est le cas du 10 km — occuperait sinon
     toute la hauteur de la colonne. Le viewBox garde ses proportions et le
     dessin se centre dans ce qui reste. */
  max-height: 460px;
  background: var(--surface);
  border: 1px solid var(--filet); border-radius: var(--rayon);
}
@media (min-width: 1000px) { .trace__dessin svg { max-height: 520px; } }

.trace__voie {
  fill: none; stroke: var(--voie); stroke-width: 5;
  stroke-linejoin: round; stroke-linecap: round;
  /* Les deux boucles se superposent sur les portions communes : une légère
     transparence laisse voir que le parcours repasse au même endroit. */
  opacity: .85;
}

.trace__borne circle { fill: var(--blanc); stroke: var(--voie); stroke-width: 2; }
.trace__borne text {
  font-family: var(--cd); font-size: 12px; font-weight: 800;
  fill: var(--voie);
}

.trace__jalon text {
  font-family: var(--cd); font-size: 15px; font-weight: 800; fill: var(--blanc);
}
.trace__jalon--depart  circle { fill: var(--vert);  }
.trace__jalon--arrivee circle { fill: var(--noir); }

/* Sous 700 px le dessin descend à moins de la moitié de sa taille de référence :
   les numéros de bornes deviendraient illisibles. Les pastilles suffisent. */
@media (max-width: 699px) {
  .trace__borne text { display: none; }
}

.trace__legende {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  margin-top: 10px;
  font-size: 0.8125rem; color: var(--encre-3);
}
.trace__legende > span { display: inline-flex; align-items: center; gap: 6px; }
.trace__puce {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  font-family: var(--cd); font-size: 0.6875rem; font-weight: 800; color: var(--blanc);
}
.trace__puce--depart  { background: var(--vert); }
.trace__puce--arrivee { background: var(--noir); }
.trace__puce--km {
  width: 12px; height: 12px;
  background: var(--blanc); border: 2px solid var(--voie);
}

.trace__mesures {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px; margin-top: 18px;
}
.mesure {
  padding: 12px 14px;
  background: var(--blanc);
  border: 1px solid var(--filet); border-radius: 6px;
}
.mesure__valeur {
  font-family: var(--cd); font-size: 1.5rem; font-weight: 800; line-height: 1.1;
  color: var(--marine); font-variant-numeric: tabular-nums;
}
.mesure__libelle {
  margin-top: 2px;
  font-size: 0.75rem; letter-spacing: 0.04em; color: var(--encre-3);
}

.trace__profil { margin: 18px 0 0; }
.trace__profil-titre {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  margin-bottom: 8px;
  font-family: var(--cd); font-size: 1.125rem; font-weight: 700;
  text-transform: uppercase; color: var(--marine);
}
.trace__profil-note {
  font-family: var(--tx); font-size: 0.75rem; font-weight: 500;
  text-transform: none; color: var(--encre-3);
}
.trace__profil svg {
  display: block; width: 100%; height: 110px;
  background: var(--surface);
  border: 1px solid var(--filet); border-radius: 6px;
}
.trace__aire  { fill: var(--voie); opacity: .14; stroke: none; }
.trace__ligne { fill: none; stroke: var(--voie); stroke-width: 2.5; vector-effect: non-scaling-stroke; }

.trace__echelle {
  display: flex; justify-content: space-between;
  margin-top: 5px;
  font-size: 0.75rem; color: var(--encre-3); font-variant-numeric: tabular-nums;
}

.trace__telecharger {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  margin-top: 18px;
}
.trace__source { font-size: 0.8125rem; color: var(--encre-3); }

/* =============================================================== partenaires */

.partenaires { padding: 34px 0 40px; background: var(--creme); }
/* Sur la page partenaires, la section porte déjà son fond : le mur est nu. */
.partenaires--nu { padding: 0; background: transparent; }

.partenaires__rangee + .partenaires__rangee { margin-top: 26px; }
.partenaires__niveau {
  padding-bottom: 6px; margin-bottom: 14px;
  border-bottom: 1px solid var(--filet);
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--encre-3);
}

/* Un mur de logos n'a jamais un compte rond : le dernier rang est presque
   toujours incomplet. En flex centré, ce rang se centre au lieu de laisser un
   logo seul contre la marge gauche. */
.partenaires__logos {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  /* Les tuiles d'un même rang s'alignent en hauteur : un nom long ne doit pas
     laisser ses voisines flotter au milieu d'une case trop haute. */
  align-items: stretch;
}
.partenaires__logos > li { display: flex; align-items: stretch; flex: 0 1 152px; }
.partenaires__logos--moyen > li { flex-basis: 200px; }
.partenaires__logos--grand > li { flex-basis: 280px; }
.partenaires__logos a,
.partenaires__logos > li > span {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 76px; padding: 12px 14px;
  background: var(--blanc);
  border: 1px solid var(--filet); border-radius: 6px;
  text-align: center; text-decoration: none;
}
.partenaires__logos a:hover { border-color: var(--ruban); text-decoration: none; }
.partenaires__logos picture { display: flex; align-items: center; justify-content: center; }
.partenaires__logos img { max-width: 100%; width: auto; height: auto; object-fit: contain; }

/* Trois hauteurs d'affichage selon la proportion du logo, pour égaliser les
   surfaces perçues. Un carré monte, un logotype très large descend. */
.logo--carre  { max-height: 66px; }
.logo--moyen  { max-height: 56px; }
.logo--large  { max-height: 46px; }

.partenaires__logos--moyen .logo--carre { max-height: 76px; }
.partenaires__logos--moyen .logo--moyen { max-height: 64px; }
.partenaires__logos--moyen .logo--large { max-height: 52px; }

.partenaires__logos--grand .logo--carre { max-height: 92px; }
.partenaires__logos--grand .logo--moyen { max-height: 80px; }
.partenaires__logos--grand .logo--large { max-height: 64px; }

/* Le nom en toutes lettres quand le logo manque. Il tient la même place qu'un
   logo pour que le mur reste régulier pendant qu'il se remplit. */
.partenaire__nom {
  font-family: var(--cd); font-size: 1.125rem; font-weight: 700;
  line-height: 1.15; text-transform: uppercase; color: var(--marine);
  text-wrap: balance;
}
.partenaires__logos--grand .partenaire__nom { font-size: 1.5rem; }
.partenaires__logos--moyen .partenaire__nom { font-size: 1.25rem; }

/* Les partenaires de l'édition précédente : présents, mais au second plan. */
/* Les partenaires de l'édition précédente restent sur fond blanc : beaucoup de
   logos sont livrés avec un fond blanc opaque, qui se détacherait en rectangle
   sur un aplat teinté. C'est l'opacité qui les met au second plan. */
.partenaires--precedents .partenaires__logos a,
.partenaires--precedents .partenaires__logos > li > span {
  min-height: 62px; opacity: .78;
}
.partenaires--precedents .partenaires__logos a:hover { opacity: 1; }
.partenaires--precedents .partenaire__nom { font-size: 1rem; color: var(--encre-2); }

.partenaires__lien { margin-top: 26px; }
.partenaires__lien a { font-family: var(--cd); font-size: 1.125rem; font-weight: 700; text-transform: uppercase; }

/* ---------------------------------------------------------------- arguments */

.arguments { display: grid; gap: 14px; }
.arguments > li {
  padding: 16px 18px;
  background: var(--blanc);
  border: 1px solid var(--filet); border-left: 4px solid var(--turquoise);
  border-radius: 6px;
}
.argument__titre {
  font-family: var(--cd); font-size: 1.25rem; font-weight: 800;
  text-transform: uppercase; color: var(--marine);
}
.argument__texte { margin-top: 4px; font-size: 0.9375rem; color: var(--encre-2); }

.renvoi__actions--espacees { margin-top: 18px; }

/* ================================================================ hébergement */

.secteur + .secteur { margin-top: 34px; }

.secteur__entete {
  padding-bottom: 8px; margin-bottom: 16px;
  border-bottom: 2px solid var(--filet);
}
.secteur__titre {
  margin: 0;
  font-family: var(--cd); font-size: 1.5rem; font-weight: 800;
  text-transform: uppercase; color: var(--marine);
}
.secteur__note { margin-top: 2px; font-size: 0.9375rem; color: var(--encre-3); }

.secteur__hotels {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.hotel {
  display: flex; flex-direction: column; gap: 4px;
  padding: 18px 20px 20px;
  background: var(--blanc);
  border: 1px solid var(--filet); border-top: 4px solid var(--turquoise);
  border-radius: var(--rayon);
}
.hotel__nom {
  font-family: var(--cd); font-size: 1.375rem; font-weight: 800;
  line-height: 1.15; color: var(--marine);
}
/* Les étoiles sont une mention de classement, pas une décoration : elles
   restent discrètes et gardent leur libellé pour les lecteurs d'écran. */
.hotel__etoiles { margin-left: 4px; font-size: 0.8125rem; color: var(--or); letter-spacing: 0.06em; }

.hotel__adresse { font-size: 0.875rem; color: var(--encre-3); }
.hotel__note    { margin-top: 4px; font-size: 0.9375rem; color: var(--encre-2); }

.hotel__offre {
  margin-top: 10px; padding: 12px 14px;
  background: var(--ouvert-fond); border-radius: 6px;
}
.hotel__formule { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ouvert-texte); }
.hotel__prix {
  font-family: var(--cd); font-size: 1.875rem; font-weight: 800; line-height: 1.1;
  color: var(--ouvert-texte);
}
.hotel__code { font-size: 0.8125rem; color: var(--encre-2); }
.hotel__tarif-libelle { font-size: 0.875rem; color: var(--ouvert-texte); }

/* Plusieurs prix pour un même hôtel : une ligne par formule, le libellé à
   gauche, le montant à droite, alignés d'une ligne à l'autre. */
.hotel__tarifs { margin: 6px 0 0; }
.hotel__tarif {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 4px 0;
}
.hotel__tarif + .hotel__tarif { border-top: 1px solid rgba(0, 0, 0, 0.08); }
.hotel__tarif dt { font-size: 0.9375rem; color: var(--ouvert-texte); }
.hotel__tarif dd {
  margin: 0; white-space: nowrap;
  font-family: var(--cd); font-size: 1.375rem; font-weight: 800; color: var(--ouvert-texte);
}
.hotel__inclus { margin-top: 8px; font-size: 0.875rem; color: var(--encre-2); }

/* L'auto est là pour coller le lien en bas de la carte, quelle que soit la
   longueur des notes : les liens s'alignent d'une carte à l'autre. */
.hotel__lien { margin-top: auto; padding-top: 12px; }
.hotel__lien a { font-weight: 600; }

#hotels .alerte { margin-top: 26px; }

.alerte--espacee { margin-top: 18px; }

/* ====================================================================== édito */

/* Une section qui enchaîne directement sur la suivante : pas de double marge. */
.section--sans-bas { padding-bottom: 0; }

/*
   Les trois tribunes cote a cote, chacune sur son fond.

   Une colonne unique avait ete choisie d'abord, au motif que trois cartes
   donneraient une mesure de trente caracteres. Mesure faite : cinquante-cinq a
   1440 px, soit dans la plage confortable — et la page perd 1 700 pixels de
   haut, ce qui met les trois voix sous les yeux au lieu de les mettre a la
   queue leu leu.

   Les hauteurs sont inegales parce que les textes le sont, et c'est assume :
   les egaliser demanderait d'etirer le plus court ou de couper le plus long.
   Le fond marque des cartes suffit a les tenir ensemble.

   Le fond est froid — celui des filets doux — et non le creme du site : la
   section des renvois, juste dessous, est creme, et deux cremes qui se touchent
   ne feraient plus qu'un seul bloc.
*/
.tribunes { display: grid; gap: 22px; align-items: start; }
@media (min-width:  900px) { .tribunes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .tribunes { grid-template-columns: repeat(3, 1fr); } }

.tribune {
  padding: 22px 24px 26px;
  background: var(--filet-doux);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
}

.tribune__entete {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  margin-bottom: 18px;
}
.tribune__portrait { flex: none; display: block; }
.tribune__portrait img {
  display: block; width: 84px; height: 105px;
  object-fit: cover;
  border-radius: var(--rayon);
  border: 1px solid var(--filet);
}

.tribune__nom {
  margin: 0;
  font-family: var(--cd); font-size: 1.375rem; font-weight: 800; line-height: 1.1;
  text-transform: uppercase; color: var(--marine);
}
.tribune__fonction { margin-top: 2px; font-size: 0.9375rem; color: var(--encre-2); }

/* L'année d'un texte qui ne parle pas de l'édition en cours. Discrète, mais
   pas décorative : c'est ce qui empêche de prêter à un signataire des propos
   sur une édition qu'il n'a pas évoquée. */
.tribune__texte > p {
  font-size: 1rem; line-height: 1.62; color: var(--encre);
}
.tribune__texte > p + p { margin-top: 14px; }

/* Les passages que le signataire a mis en avant dans son texte d'origine. */
.tribune__saillant {
  font-weight: 600;
  color: var(--ruban) !important;
}

.tribune__signature {
  margin-top: 20px; padding-top: 14px;
  border-top: 2px solid var(--filet);
  text-align: right;
  font-family: var(--cd); font-size: 1.125rem; font-weight: 700;
  text-transform: uppercase; color: var(--marine);
}
.tribune__signature span {
  display: block;
  font-family: var(--tx); font-size: 0.875rem; font-weight: 400;
  text-transform: none; color: var(--encre-3);
}

/* Un texte d'une édition antérieure reste lisible, mais se distingue. */
.tribune--anterieure .tribune__texte > p { color: var(--encre-2); }

/* ---------------------------------------------------------------- page légale

   Une page de texte suivi, sans grille ni encadrés : mentions légales, données
   personnelles. Les titres du site ont une marge nulle parce qu'ils vivent
   d'ordinaire dans des blocs qui gèrent leur espacement ; ici il n'y a pas de
   bloc, le rythme vertical est donc porté par ce conteneur.
*/

/* Centrée, comme les tribunes de l'édito : une colonne de lecture posée au
   milieu de la page, et non collée au bord gauche avec la moitié de l'écran
   vide à droite. `margin-inline` plutôt que `margin`, pour ne pas écraser les
   marges verticales que les règles suivantes posent. */
.legal { max-width: 68ch; margin-inline: auto; }
.legal > .titre-section { margin-top: 40px; }
.legal > .titre-section:first-child { margin-top: 0; }
.legal > .titre-section + .texte { margin-top: 12px; }
.legal .texte + .texte { margin-top: 10px; }
.legal .eco { gap: 22px; }
.legal .eco dd .texte + .texte { margin-top: 8px; }
.legal .encart { margin-top: 40px; }

/* ==================================================================== galerie

   Une grille de vignettes, et un agrandissement qui s'ouvre sans JavaScript.

   Le mécanisme tient en une règle : chaque vue est masquée, et `:target`
   l'affiche quand l'adresse de la page désigne son identifiant. Le lien de la
   vignette suffit donc à l'ouvrir, le bouton « précédent » du navigateur à la
   fermer, et l'adresse obtenue est partageable. Aucune bibliothèque, aucun
   script indispensable.
*/

.galerie {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}
@media (min-width: 700px) {
  .galerie { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
}

.galerie__lien {
  display: block; overflow: hidden;
  border-radius: var(--rayon);
  background: var(--filet-doux);
}
.galerie__lien img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform 0.25s ease, filter 0.25s ease;
}
.galerie__lien:hover img,
.galerie__lien:focus-visible img { transform: scale(1.04); filter: brightness(1.05); }
.galerie__lien:focus-visible { outline: 3px solid var(--turquoise); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .galerie__lien img { transition: none; }
  .galerie__lien:hover img, .galerie__lien:focus-visible img { transform: none; }
}

.galerie__provenance {
  margin: 14px 0 0;
  font-size: 0.8125rem; color: var(--encre-3);
}

/* ------------------------------------------------------------- vue agrandie */

.galerie-vue { display: none; }

.galerie-vue:target {
  display: flex; align-items: center; justify-content: center;
  position: fixed; inset: 0; z-index: 200;
  padding: 16px;
  background: rgba(14, 73, 96, 0.94);
  overscroll-behavior: contain;
}

/* Le fond est un lien plein cadre : cliquer à côté ferme, comme partout
   ailleurs. Il est sous la photo, qui reste cliquable sans rien déclencher. */
.galerie-vue__fond { position: absolute; inset: 0; }

.galerie-vue__corps {
  position: relative;
  margin: 0;
  max-width: min(1100px, 100%);
  max-height: 100%;
  display: flex; flex-direction: column; gap: 10px;
}
.galerie-vue__corps img {
  display: block;
  max-width: 100%;
  /* La légende occupe le reste : la photo prend ce qui demeure, pas davantage,
     sinon elle déborde du bas de l'écran sur un téléphone couché. */
  max-height: calc(100vh - 130px);
  width: auto; height: auto;
  margin: 0 auto;
  border-radius: var(--rayon);
}

.galerie-vue__legende {
  color: var(--blanc);
  font-size: 0.875rem; line-height: 1.45;
  text-align: center;
  display: flex; flex-direction: column; gap: 4px;
}
.galerie-vue__rang { color: #BFD6E0; font-size: 0.8125rem; }

.galerie-vue__fermer,
.galerie-vue__prec,
.galerie-vue__suiv {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: var(--blanc); text-decoration: none;
  font-size: 1.75rem; line-height: 1;
}
.galerie-vue__fermer:hover,
.galerie-vue__prec:hover,
.galerie-vue__suiv:hover { background: rgba(255, 255, 255, 0.28); }
.galerie-vue__fermer:focus-visible,
.galerie-vue__prec:focus-visible,
.galerie-vue__suiv:focus-visible { outline: 3px solid var(--blanc); outline-offset: 2px; }

.galerie-vue__fermer { top: 12px; right: 12px; font-size: 2rem; }
.galerie-vue__prec   { left: 12px;  top: 50%; transform: translateY(-50%); }
.galerie-vue__suiv   { right: 12px; top: 50%; transform: translateY(-50%); }

/* Sur un petit écran, les flèches passent sous la photo : superposées aux
   bords, elles couvrent le sujet et se déclenchent au moindre effleurement. */
@media (max-width: 600px) {
  .galerie-vue:target { flex-direction: column; justify-content: center; }
  .galerie-vue__prec, .galerie-vue__suiv {
    top: auto; bottom: 16px; transform: none;
  }
  .galerie-vue__corps img { max-height: calc(100vh - 220px); }
}

/* ===================================================================== teaser

   Le bloc d'annonce d'ouverture des inscriptions : un texte court à gauche, la
   vidéo à droite, empilés sous 900 px. La vidéo garde son rapport 16/9 avant
   même d'être chargée — `aspect-ratio` plus les dimensions intrinsèques — pour
   que la page ne saute pas quand l'image d'affiche arrive.
*/

.teaser { background: var(--surface); }

/* Ordre du document : titre, vidéo, dates — c'est l'ordre de lecture sur un
   téléphone. Au-delà de 900 px, la grille remet le texte à gauche et la vidéo à
   droite sans toucher au HTML. */
.teaser__grille {
  display: grid;
  gap: 20px;
}
@media (min-width: 900px) {
  .teaser__grille {
    grid-template-columns: minmax(260px, 5fr) 7fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "entete video"
      "corps  video";
    gap: 14px 40px;
  }
  .teaser__entete { grid-area: entete; align-self: end; }
  .teaser__corps  { grid-area: corps;  align-self: start; }
  .teaser__video  { grid-area: video;  align-self: center; }
}

.teaser__entete .titre-section { margin: 4px 0 0; }

.teaser__dates {
  list-style: none; margin: 8px 0 0; padding: 0;
  border-top: 1px solid var(--filet);
}
.teaser__dates li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  padding: 12px 0; border-bottom: 1px solid var(--filet);
}
.teaser__jour {
  font-family: var(--cd); font-weight: 800; font-size: 1.125rem;
  text-transform: uppercase; letter-spacing: 0.01em; color: var(--marine);
  min-width: 8.5em;
}
.teaser__qui { color: var(--encre-2); font-size: 0.9375rem; }

/* Une date déjà passée reste lisible, mais cesse d'être une annonce. */
.teaser__dates li.est-passee .teaser__jour { color: var(--ouvert-texte); }
.teaser__dates li.est-passee .teaser__qui { color: var(--encre-3); }

.teaser__actions { margin: 22px 0 0; }

.teaser__video { margin: 0; }
.teaser__video video {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9;
  background: var(--noir);
  border-radius: var(--rayon);
}

.teaser__legende {
  margin-top: 10px;
  font-size: 0.8125rem; color: var(--encre-3);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
}
.teaser__resume summary {
  cursor: pointer; color: var(--ruban);
  text-decoration: underline; text-underline-offset: 2px;
}
.teaser__resume summary:focus-visible { outline: 2px solid var(--turquoise); outline-offset: 2px; }
.teaser__resume p { margin: 8px 0 0; max-width: 62ch; color: var(--encre-2); }

/* =================================================================== bien-être

   Une trentaine de fiches d'article, et les grilles qui y mènent. C'est la seule
   partie du site faite pour être lue longtemps plutôt que consultée vite : la
   colonne de texte est donc étroite, et le rythme vertical plus ample
   qu'ailleurs.
*/

.fiche__corps { max-width: 68ch; margin-inline: auto; }

.fiche__entete { padding-bottom: 4px; border-bottom: 2px solid var(--filet); }
.fiche__entete .titre-page { margin: 4px 0 0; }

.fiche__chapo {
  margin: 16px 0 0;
  font-size: 1.125rem; line-height: 1.55; color: var(--encre);
}
.fiche__chapo strong { font-weight: 600; }

.fiche__signature {
  margin: 14px 0 0;
  font-size: 0.9375rem; color: var(--encre-2);
}
.fiche__signature strong { color: var(--marine); font-weight: 600; }

.fiche__actions { margin: 18px 0 20px; }

/* ------------------------------------------------------- le corps de l'article */

.fiche__texte { margin-top: 28px; }
.fiche__texte h2 {
  font-family: var(--cd); font-weight: 700;
  font-size: 1.375rem; line-height: 1.2; text-transform: none;
  color: var(--marine); margin: 34px 0 10px;
}
.fiche__texte h3 {
  font-family: var(--cd); font-weight: 700; font-size: 1.125rem;
  color: var(--encre); margin: 24px 0 8px;
}
.fiche__texte p  { margin: 0 0 12px; line-height: 1.65; }
.fiche__texte ul,
.fiche__texte ol { margin: 0 0 14px; padding-left: 22px; }
.fiche__texte li { margin-bottom: 6px; line-height: 1.6; }
.fiche__texte hr { border: 0; border-top: 1px solid var(--filet); margin: 28px 0; }
.fiche__texte em { color: var(--encre-2); }

/* Le chiffre clé, hérité des fiches du médecin : un nombre et sa légende, que
   la grille d'origine posait côte à côte. */
.fiche__chiffre {
  display: flex; align-items: baseline; gap: 12px;
  margin: 0 0 10px; padding: 12px 14px;
  background: var(--surface); border-left: 3px solid var(--turquoise);
  border-radius: 0 var(--rayon) var(--rayon) 0;
}
.fiche__chiffre b {
  font-family: var(--cd); font-weight: 800; font-size: 1.75rem;
  line-height: 1; color: var(--turquoise); white-space: nowrap;
}

/* Les illustrations gardent leur définition réelle : beaucoup font moins de
   400 px de large, et les étirer à la colonne les rendrait floues. */
.fiche__illustration { margin: 22px auto; }
.fiche__illustration img {
  display: block; width: 100%; height: auto;
  border-radius: var(--rayon);
}

.fiche__avertissement {
  margin: 32px 0 0; padding: 14px 16px;
  background: var(--bientot-fond); color: var(--bientot-texte);
  border-radius: var(--rayon);
  font-size: 0.9375rem; line-height: 1.55;
}

.fiche__maj { margin: 20px 0 0; font-size: 0.8125rem; color: var(--encre-3); }

/* ----------------------------------------------------------- grille de fiches */

.fiches {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

.fiche-carte a {
  display: flex; flex-direction: column; height: 100%;
  background: var(--blanc); border: 1px solid var(--filet);
  border-radius: var(--rayon); overflow: hidden;
  text-decoration: none; color: inherit;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.fiche-carte a:hover,
.fiche-carte a:focus-visible { border-color: var(--turquoise); transform: translateY(-2px); }
.fiche-carte a:focus-visible { outline: 3px solid var(--turquoise); outline-offset: 2px; }

.fiche-carte__image { display: block; background: var(--filet-doux); }
.fiche-carte__image img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 3 / 2; object-fit: cover;
}

.fiche-carte__texte { display: block; padding: 14px 16px 16px; }
.fiche-carte__titre {
  display: block;
  font-family: var(--cd); font-weight: 700; font-size: 1.0625rem;
  line-height: 1.2; color: var(--marine);
}
.fiche-carte__auteur {
  display: block; margin-top: 6px;
  font-size: 0.8125rem; line-height: 1.4; color: var(--encre-3);
}

@media (prefers-reduced-motion: reduce) {
  .fiche-carte a { transition: none; }
  .fiche-carte a:hover, .fiche-carte a:focus-visible { transform: none; }
}

.rubrique__auteurs {
  margin: 24px 0 0;
  font-size: 0.9375rem; line-height: 1.55; color: var(--encre-2);
}

/* =================================================================== archives

   Les classements et leur recherche. Une page de résultats est d'abord un
   tableau qu'on lit sur un téléphone, en cherchant son nom : la recherche passe
   donc avant le tableau, et le tableau défile horizontalement plutôt que de
   comprimer les colonnes jusqu'à l'illisible.
*/

.recherche { margin: 0 0 28px; }
.recherche__label {
  display: block; margin-bottom: 6px;
  font-family: var(--cd); font-weight: 700; font-size: 1.125rem;
  text-transform: uppercase; letter-spacing: 0.01em; color: var(--marine);
}
.recherche__ligne { display: flex; flex-wrap: wrap; gap: 8px; }
.recherche__champ {
  flex: 1 1 18rem; min-width: 0;
  padding: 11px 14px;
  font: inherit; color: var(--encre);
  background: var(--blanc);
  border: 1px solid var(--filet); border-radius: var(--rayon);
}
.recherche__champ:focus-visible { outline: 3px solid var(--turquoise); outline-offset: 1px; }
.recherche__aide { margin: 8px 0 0; font-size: 0.8125rem; color: var(--encre-3); }

.resultats__compte { margin: 0 0 18px; }
.resultats__note { margin: 26px 0 0; font-size: 0.8125rem; color: var(--encre-3); }

/* --------------------------------------------------------------- le tableau */

.tableau-large { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.resultats {
  width: 100%; border-collapse: collapse;
  font-size: 0.9375rem; font-variant-numeric: tabular-nums;
}
.resultats th, .resultats td {
  padding: 8px 12px 8px 0; text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--filet);
}
.resultats th {
  position: sticky; top: 0; z-index: 1;
  background: var(--blanc);
  font-family: var(--cd); font-weight: 700; font-size: 0.8125rem;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--encre-3);
}
.resultats td.num { text-align: right; }
.resultats td.temps { font-weight: 600; color: var(--marine); }
.resultats td.club {
  white-space: normal; max-width: 22ch;
  font-size: 0.875rem; color: var(--encre-2);
}
.resultats tbody tr:hover { background: var(--surface); }

.pagination {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px;
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--filet);
  font-size: 0.9375rem; color: var(--encre-2);
}

/* ---------------------------------------------------------------- le podium */

.podium + .podium { margin-top: 34px; }
.podium__titre {
  margin: 18px 0 8px;
  font-family: var(--cd); font-weight: 700; font-size: 1rem;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--encre-3);
}
.podium__liste { list-style: none; margin: 0; padding: 0; }
.podium__liste li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
  padding: 10px 0; border-bottom: 1px solid var(--filet);
}
.podium__rang {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--surface); color: var(--marine);
  font-family: var(--cd); font-weight: 800; font-size: 0.875rem;
}
.podium__liste li:first-child .podium__rang { background: var(--or); color: var(--blanc); }
.podium__nom { flex: 1 1 14rem; }
.podium__temps {
  font-variant-numeric: tabular-nums; font-weight: 600; color: var(--marine);
}
.podium__club { flex-basis: 100%; font-size: 0.8125rem; color: var(--encre-3); }

/* ------------------------------------------------------- sommaire d'archives */

.archives { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
@media (min-width: 800px)  { .archives { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .archives { grid-template-columns: repeat(3, 1fr); } }

.archive {
  border: 1px solid var(--filet); border-radius: var(--rayon);
  background: var(--blanc); overflow: hidden;
  /* Colonne souple : les cartes d'une même rangée n'ont pas le même nombre de
     lignes, et sans cela les boutons se retrouvaient à trois hauteurs. */
  display: flex; flex-direction: column;
}
.archive__annee {
  margin: 0; padding: 14px 18px;
  background: var(--marine); color: var(--blanc);
  font-family: var(--cd); font-weight: 800; font-size: 1.25rem;
  text-transform: uppercase; letter-spacing: 0.02em;
}
.archive__corps { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.archive__resume { margin: 0 0 10px; color: var(--encre-2); }
.archive__epreuves { list-style: none; margin: 0 0 16px; padding: 0; }
.archive__epreuves li { padding: 7px 0; border-top: 1px solid var(--filet); }
.archive__epreuve { display: block; font-weight: 600; color: var(--encre); }
.archive__vainqueur { font-size: 0.875rem; color: var(--encre-3); }
.archive__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: auto 0 0; }
/* Le renvoi de bas de section tient sur sa ligne et son filet va au bout.
   Hérité de `.texte`, il était bridé à 68ch : la phrase se coupait en deux et
   le filet s'arrêtait au milieu de la page, ce qui se lisait comme un défaut
   d'affichage plutôt que comme une mesure de confort de lecture. */
.sommaire-croise {
  max-width: none;
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid var(--filet); color: var(--encre-2);
}
.archive__attente {
  display: inline-flex; align-items: center; padding: 0 12px;
  font-size: 0.875rem; color: var(--encre-3);
}

/* ================================================================ actualités

   Un fil d'articles, et l'article lui-même. Même colonne de lecture que les
   fiches bien-être : ce sont des textes, pas des pages de service.
*/

.actu__corps { max-width: 68ch; margin-inline: auto; }
.actu__entete { padding-bottom: 4px; border-bottom: 2px solid var(--filet); }
.actu__entete .titre-page { margin: 4px 0 0; }
.actu__chapo { margin: 16px 0 0; font-size: 1.125rem; line-height: 1.55; color: var(--encre); }
.actu__actions { margin: 18px 0 20px; }

.actu__texte { margin-top: 28px; }
.actu__texte h2 {
  font-family: var(--cd); font-weight: 700; font-size: 1.375rem; line-height: 1.2;
  text-transform: none; color: var(--marine); margin: 34px 0 10px;
}
.actu__texte h3 {
  font-family: var(--cd); font-weight: 700; font-size: 1.125rem;
  color: var(--encre); margin: 24px 0 8px;
}
.actu__texte p  { margin: 0 0 12px; line-height: 1.65; }
.actu__texte ul, .actu__texte ol { margin: 0 0 14px; padding-left: 22px; }
.actu__texte li { margin-bottom: 6px; line-height: 1.6; }
.actu__texte hr { border: 0; border-top: 1px solid var(--filet); margin: 28px 0; }

.actu__illustration { margin: 22px auto; }
.actu__illustration img { display: block; width: 100%; height: auto; border-radius: var(--rayon); }
/* Un logo de partenaire n'est pas une illustration pleine largeur. */
.actu__illustration--logo { max-width: 180px; }
.actu__illustration--logo img { border-radius: 0; }

/* ------------------------------------------------------------------- le fil */

.actus {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.actu-carte a {
  display: flex; flex-direction: column; gap: 6px; height: 100%;
  padding: 16px 18px 18px;
  background: var(--blanc); border: 1px solid var(--filet);
  border-radius: var(--rayon); text-decoration: none; color: inherit;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.actu-carte a:hover, .actu-carte a:focus-visible {
  border-color: var(--turquoise); transform: translateY(-2px);
}
.actu-carte a:focus-visible { outline: 3px solid var(--turquoise); outline-offset: 2px; }

.actu-carte__annee {
  font-family: var(--cd); font-weight: 800; font-size: 0.8125rem;
  letter-spacing: 0.08em; color: var(--turquoise);
}
.actu-carte__titre {
  font-family: var(--cd); font-weight: 700; font-size: 1.125rem;
  line-height: 1.2; color: var(--marine);
}
.actu-carte__chapo { font-size: 0.875rem; line-height: 1.5; color: var(--encre-2); }
.actu-carte__cp {
  margin-top: auto; padding-top: 8px;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--encre-3);
}

.actus__note { margin: 26px 0 0; font-size: 0.8125rem; color: var(--encre-3); }

@media (prefers-reduced-motion: reduce) {
  .actu-carte a { transition: none; }
  .actu-carte a:hover, .actu-carte a:focus-visible { transform: none; }
}

/* ==================================================== l'association : histoire */

/* Le récit est centré : c'est le seul bloc de la page à vivre seul dans sa
   section, sans grille ni voisin pour l'équilibrer, et calé à gauche il
   laissait un vide de moitié de page à sa droite. */
.recit { max-width: 68ch; margin-inline: auto; }
.recit__titre {
  margin: 0 0 14px;
  font-family: var(--cd); font-weight: 800; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.125rem);
  line-height: 1.15; color: var(--marine);
}
.recit__chapeau {
  margin: 0 0 22px; padding-left: 16px;
  border-left: 3px solid var(--ruban);
  font-size: 1.0625rem; line-height: 1.6; color: var(--encre);
}
.recit .texte + .texte { margin-top: 14px; }
.recit__chute {
  margin: 24px 0 0;
  font-family: var(--cd); font-weight: 700; font-size: 1.125rem; color: var(--ruban);
}

/* La frise : une colonne d'années à gauche, un filet vertical, les étapes à
   droite. En dessous de 620 px l'année passe au-dessus de son étape — une
   colonne de dates à côté d'un texte de vingt caractères n'est plus lisible. */
.frise { list-style: none; margin: 26px 0 0; padding: 0; }
.frise__etape { position: relative; padding: 0 0 26px 0; }
.frise__annee {
  margin: 0 0 4px;
  font-family: var(--cd); font-weight: 800; font-size: 1.25rem;
  color: var(--ruban); letter-spacing: 0.01em;
}
.frise__titre {
  margin: 0 0 4px;
  font-size: 1.0625rem; font-weight: 700; color: var(--encre);
}
.frise__reserve {
  margin: 8px 0 0; font-size: 0.875rem; line-height: 1.5; color: var(--encre-3);
  padding-left: 12px; border-left: 2px solid var(--filet);
}
.frise__etape--saillant .frise__annee { font-size: 1.5rem; }

@media (min-width: 620px) {
  .frise { padding-left: 0; }
  .frise__etape {
    display: grid; grid-template-columns: 5.5rem 1fr; gap: 0 26px;
    padding-bottom: 30px;
  }
  /* Le filet relie les étapes entre elles ; la dernière ne prolonge rien. */
  .frise__etape::before {
    content: ""; position: absolute; top: 0.55rem; bottom: -0.2rem; left: 6.2rem;
    width: 1px; background: var(--filet);
  }
  .frise__etape:last-child::before { display: none; }
  .frise__etape::after {
    content: ""; position: absolute; top: 0.4rem; left: 5.9rem;
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--blanc); border: 2px solid var(--ruban);
  }
  .frise__etape--saillant::after { background: var(--ruban); }
  .frise__annee { text-align: right; margin: 0; }
  .frise__corps { padding-left: 14px; }
}

/* ================================================= l'association : engagements */

.axe__chapeau { max-width: 68ch; margin-top: 0; }

/* Un seul axe est illustré, et la mise en page ne doit pas s'en apercevoir :
   sans image, l'ouverture reste le chapeau seul, exactement comme avant. */
.axe__ouverture--illustree {
  display: grid; gap: 24px;
}
/* Le chapeau fait deux lignes, la photo en fait dix : calés en haut, ils
   laissaient un trou sous le texte. Centrés, le vide se partage et la ligne
   des cartes reprend en dessous sans décrochement. */
@media (min-width: 900px) {
  .axe__ouverture--illustree {
    grid-template-columns: 1fr 340px; gap: 36px; align-items: center;
  }
  /* Une image haute prise à la même largeur ferait une colonne d'un demi-écran
     face à deux lignes de texte. On rétrécit plutôt que de recadrer : le sujet
     de celle-ci tient dans toute la hauteur. L'orientation est posée par PHP
     sur le conteneur, et non déduite en CSS par `:has()` — la règle vaut alors
     partout, y compris sur un navigateur qui ne connaît pas ce sélecteur. */
  .axe__ouverture--haute { grid-template-columns: 1fr 260px; }
}

.axe__illustration { margin: 0; }
.axe__illustration img {
  display: block; width: 100%; height: auto;
  border-radius: var(--rayon);
}
/* Le crédit suit la photo partout où elle va : c'est la galerie qui le porte,
   pas la page. */
.axe__illustration figcaption {
  margin-top: 6px;
  font-size: 0.8125rem; letter-spacing: 0.02em; color: var(--encre-4);
}

.engagements {
  display: grid; gap: 20px; margin-top: 26px;
}
@media (min-width: 900px) { .engagements { grid-template-columns: repeat(3, 1fr); } }

.engagement {
  display: flex; flex-direction: column;
  padding: 20px 22px 22px;
  background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--rayon);
}
.section--creme .engagement { background: var(--blanc); }
.engagement__titre {
  margin: 0 0 8px;
  font-family: var(--cd); font-weight: 800; font-size: 1.125rem;
  text-transform: uppercase; letter-spacing: 0.02em; color: var(--marine);
}
.engagement__chiffres {
  list-style: none; display: flex; flex-wrap: wrap; gap: 18px;
  margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--filet);
}
.engagement__valeur {
  display: block;
  font-family: var(--cd); font-weight: 800; font-size: 1.375rem; color: var(--ruban);
}
.engagement__legende { display: block; font-size: 0.8125rem; line-height: 1.4; color: var(--encre-3); max-width: 14ch; }
.engagement__source { margin: 14px 0 0; font-size: 0.8125rem; line-height: 1.5; color: var(--encre-3); }
.engagement .texte + .texte { margin-top: 12px; }
.engagement .epreuve__lien { margin-top: auto; padding-top: 14px; }

.eco--large { margin-top: 26px; }
@media (min-width: 900px) {
  .eco--large { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 28px; }
}

/* ==================================================================== presse */

.contact-presse { display: grid; gap: 22px; }
@media (min-width: 860px) { .contact-presse { grid-template-columns: 1.35fr 1fr; gap: 36px; align-items: start; } }
.contact-presse .texte { max-width: 58ch; }

.contact-presse__carte {
  padding: 20px 22px 22px;
  background: var(--creme); border: 1px solid var(--filet); border-radius: var(--rayon);
}
.contact-presse__asso {
  margin: 0 0 6px;
  font-family: var(--cd); font-weight: 800; font-size: 1rem;
  text-transform: uppercase; letter-spacing: 0.02em; color: var(--marine);
}
.contact-presse__courriel { margin: 0 0 12px; font-size: 1.0625rem; font-weight: 600; word-break: break-word; }
.contact-presse__detail { margin: 0; font-size: 0.875rem; line-height: 1.6; color: var(--encre-3); }

/* La fiche de faits : deux colonnes de définitions, une ligne par fait. */
.faits { display: grid; gap: 0; margin: 22px 0 0; }
@media (min-width: 860px) { .faits { grid-template-columns: repeat(2, 1fr); column-gap: 36px; } }
.faits > div { padding: 12px 0; border-top: 1px solid var(--filet); }
.faits dt {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--encre-3);
}
.faits dd { margin: 4px 0 0; line-height: 1.55; color: var(--encre); }

.faits__soustitre {
  margin: 34px 0 0;
  font-family: var(--cd); font-weight: 800; font-size: 1.125rem;
  text-transform: uppercase; letter-spacing: 0.02em; color: var(--marine);
}

.epreuves-presse { display: grid; gap: 16px; margin-top: 16px; }
@media (min-width: 860px) { .epreuves-presse { grid-template-columns: repeat(3, 1fr); } }
.epreuve-presse {
  padding: 16px 18px 18px;
  background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--rayon);
}
.epreuve-presse__nom { margin: 0 0 4px; font-size: 1.0625rem; font-weight: 700; color: var(--encre); }
.epreuve-presse__chiffres { margin: 0 0 10px; font-size: 0.9375rem; color: var(--encre-2); }
.epreuve-presse__quota { margin: 10px 0 0; font-size: 0.875rem; color: var(--encre-3); }
.etiquettes { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.etiquettes .etiquette { letter-spacing: 0.05em; padding: 4px 10px; }

.records-presse { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 620px) { .records-presse { grid-template-columns: repeat(2, 1fr); } }
.records-presse li {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px;
  padding: 12px 0; border-top: 1px solid var(--filet);
}
.records-presse__temps { font-family: var(--cd); font-weight: 800; font-size: 1.25rem; color: var(--ruban); }
.records-presse__qui { font-weight: 600; color: var(--encre); }
.records-presse__ou { font-size: 0.875rem; color: var(--encre-3); }

/* Les documents : une ligne par pièce, le bouton à droite quand la place existe.
   La carte elle-même (bordure, rayon, marges intérieures) est définie plus haut,
   dans la section « documents », et vaut aussi pour la page des règlements : ne
   pas redéfinir ici `padding` ni `border`. Un `padding: 18px 0` posé à cet
   endroit collait l'icône et le bouton aux bords des cartes, sur les deux pages. */
.documents { list-style: none; margin: 22px 0 0; padding: 0; }
.document {
  justify-content: space-between;
  gap: 14px 22px;
}
.document__corps { flex: 1 1 22rem; }
.document__corps .texte { margin-top: 6px; max-width: 70ch; }
.document__date {
  margin: 0 0 4px;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--encre-3);
}
.document__titre { margin: 0; font-size: 1.0625rem; font-weight: 700; color: var(--encre); }
.document__actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.documents--compact .document__corps .texte { margin-top: 2px; }

.revue { list-style: none; margin: 22px 0 0; padding: 0; }
.revue__item { border-top: 1px solid var(--filet); }
.revue__item:last-child { border-bottom: 1px solid var(--filet); }
.revue__item a {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 4px 20px; padding: 14px 0; color: var(--encre);
}
.revue__item a:hover { color: var(--ruban); }
.revue__titre { font-weight: 600; flex: 1 1 20rem; }
.revue__source { font-size: 0.875rem; color: var(--encre-3); white-space: nowrap; }

/* ======================================================= galeries de course */

/* Le sommaire : une carte par photographe, sa première photo en couverture. */
.galeries { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
@media (min-width: 640px)  { .galeries { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .galeries { grid-template-columns: repeat(3, 1fr); } }

.galerie-carte a {
  display: block; overflow: hidden; color: var(--encre);
  border: 1px solid var(--filet); border-radius: var(--rayon); background: var(--blanc);
}
.galerie-carte a:hover { text-decoration: none; border-color: var(--ruban); }
.galerie-carte a:focus-visible { outline: 3px solid var(--ruban); outline-offset: 2px; }
.galerie-carte__image {
  display: block; width: 100%; height: auto;
  aspect-ratio: 3 / 2; object-fit: cover;
  background: var(--filet-doux);
}
.galerie-carte__corps { display: block; padding: 14px 16px 16px; }
.galerie-carte__titre {
  display: block;
  font-family: var(--cd); font-weight: 800; font-size: 1.0625rem;
  text-transform: uppercase; letter-spacing: 0.02em; color: var(--marine);
}
.galerie-carte__nombre { display: block; margin-top: 2px; font-size: 0.875rem; color: var(--encre-3); }

/*
 * La grille d'une galerie de course.
 *
 * Plus serrée que celle des bénévoles : deux cents vignettes de 220 px font
 * une page interminable, là où vingt-huit portraits méritaient de la place.
 * Le format 3/2 est celui des boîtiers ; le 4/3 de l'autre grille recadrait
 * toutes les photos.
 */
.galerie--course { grid-template-columns: repeat(auto-fill, minmax(102px, 1fr)); gap: 6px; }
@media (min-width: 700px) {
  .galerie--course { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 8px; }
}
.galerie--course .galerie__lien img { aspect-ratio: 3 / 2; }

/* Le lien de téléchargement de l'original, dans la légende de la vue agrandie. */
.galerie-vue__rang a { color: #BFD6E0; text-decoration: underline; }
.galerie-vue__rang a:hover { color: var(--blanc); }

/* ------------------------------------------------- les visuels d'édition */

/* Les neuf bandeaux n'ont pas les mêmes proportions — de 2,0 à 2,8 pour un.
   Aucun n'est recadré : un bandeau rogné perd sa date ou son logotype, c'est-
   à-dire ce qui le distingue de celui d'à côté. Les vignettes ont donc des
   hauteurs inégales, et la grille les cale en haut plutôt que de les étirer. */
.visuels {
  list-style: none; margin: 26px 0 0; padding: 0;
  display: grid; gap: 22px; align-items: start;
}
@media (min-width: 640px)  { .visuels { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .visuels { grid-template-columns: repeat(3, 1fr); } }

.visuel img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--filet); border-radius: var(--rayon);
  background: var(--blanc);
}
.visuel__annee {
  margin: 8px 0 0;
  font-family: var(--cd); font-weight: 800; font-size: 1.25rem;
  font-variant-numeric: tabular-nums; color: var(--marine);
}
/* La légende n'apparaît que les années où quelque chose a changé : elle est
   donc absente le plus souvent, et ne doit pas creuser un vide sous les
   autres vignettes — d'où une marge portée par elle seule. */
.visuel__note {
  margin: 4px 0 0; font-size: 0.875rem; line-height: 1.5; color: var(--encre-3);
}

/* ---------------------------------------------------------------- palmarès */

.palmares {
  width: 100%; border-collapse: collapse; margin-top: 22px;
  font-size: 0.9375rem; font-variant-numeric: tabular-nums;
}
.palmares th, .palmares td {
  padding: 10px 16px 10px 0; text-align: left; vertical-align: baseline;
  border-bottom: 1px solid var(--filet);
}
.palmares thead th {
  font-family: var(--cd); font-weight: 700; font-size: 0.75rem;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--encre-3);
  white-space: nowrap;
}
/* L'année, en tête de ligne : c'est la clé de lecture du tableau. */
.palmares tbody th {
  font-family: var(--cd); font-weight: 800; font-size: 1.0625rem; color: var(--marine);
}
.palmares__temps { color: var(--encre-3); font-size: 0.875rem; white-space: nowrap; }
.palmares__nombre { text-align: right; color: var(--encre-3); white-space: nowrap; }

/* L'année sans course occupe la largeur, et se lit comme une parenthèse. */
.palmares__sans-course td {
  color: var(--encre-2); font-style: italic;
  background: var(--filet-doux);
}
.palmares__sans-course th { background: var(--filet-doux); }

.palmares__note { margin-top: 18px; max-width: 78ch; color: var(--encre-3); }

/* Sous 700 px, le nombre de classés sort du tableau : c'est la colonne la moins
   utile, et la garder obligeait à faire défiler les quatre autres pour la voir.
   Le compte reste lisible dans les archives, page faite pour ça. */
@media (max-width: 699px) {
  .palmares__nombre { display: none; }
  .palmares th, .palmares td { padding-right: 10px; }
  .palmares__sans-course td { white-space: normal; }
}