/* ==========================================================================
   ASPTT AIACCIU ATLETISMU — Feuille de style principale
   Couleurs du club : noir & rouge
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variables
   -------------------------------------------------------------------------- */
:root {
  /* Couleurs */
  --noir: #0b0b0e;
  --noir-2: #14141a;
  --noir-3: #1f1f28;
  --rouge: #e01b26;
  --rouge-clair: #ff3d47;
  --rouge-sombre: #9d0f18;

  --blanc: #ffffff;
  --gris-50: #f8f8f9;
  --gris-100: #eeeef1;
  --gris-200: #dcdce2;
  --gris-300: #c2c2cc;
  --gris-500: #9b9baa;
  --gris-600: #5a5a66;
  --gris-800: #2c2c35;

  /* Thème sombre : le site est posé sur un dégradé diagonal rouge → noir. */
  --texte: #f4f4f7;
  --texte-doux: #c3c3d0;
  --fond: #0b0b0e;
  --fond-alt: rgba(255, 255, 255, .05);
  --bordure: rgba(255, 255, 255, .13);

  /* Surfaces posées sur le dégradé : sombres et légèrement translucides,
     pour que le rouge du fond reste perceptible derrière. */
  --panneau: rgba(17, 17, 22, .72);
  --panneau-2: rgba(24, 24, 31, .78);
  --panneau-bord: rgba(255, 255, 255, .13);
  --panneau-bord-fort: rgba(255, 255, 255, .28);

  /* Dégradé de fond, en un seul endroit. */
  --fond-degrade: linear-gradient(135deg,
      #7e121a 0%,
      #641018 12%,
      #470e14 26%,
      #2e0c11 42%,
      #1c0b10 58%,
      #120c10 76%,
      #0b0b0e 100%);

  /* Typographie */
  --font-titre: "Barlow Condensed", "Oswald", "Arial Narrow", system-ui, sans-serif;
  --font-texte: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Mesures */
  --max: 1200px;
  --max-etroit: 780px;
  --gouttiere: clamp(1.25rem, 4vw, 2.5rem);
  --rayon: 14px;
  --rayon-sm: 8px;

  /* Ombres */
  --ombre-sm: 0 1px 2px rgba(11, 11, 14, .06), 0 2px 6px rgba(11, 11, 14, .05);
  --ombre-md: 0 4px 12px rgba(11, 11, 14, .08), 0 12px 28px rgba(11, 11, 14, .07);
  --ombre-lg: 0 10px 24px rgba(11, 11, 14, .12), 0 24px 60px rgba(11, 11, 14, .12);

  /* Transitions */
  --t: 220ms cubic-bezier(.4, 0, .2, 1);

  --header-h: 76px;
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* L'attribut `hidden` doit toujours l'emporter : sans ce garde-fou, une règle
   comme `.visio { display: grid }` le neutralise, et l'élément « caché »
   continue d'intercepter les clics. */
[hidden] { display: none !important; }

html {
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-texte);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--texte);
  /* Dégradé diagonal rouge → noir, fixe : il ne défile pas avec la page,
     l'inclinaison reste donc identique sur une page courte comme longue. */
  background-color: var(--fond);
  background-image: var(--fond-degrade);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

a { color: var(--rouge-clair); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  font-family: var(--font-titre);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.01em;
  margin: 0 0 .5em;
  text-transform: uppercase;
}

h1 { font-size: clamp(2.4rem, 6vw, 4.25rem); }
h2 { font-size: clamp(1.9rem, 4.2vw, 3rem); }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
h4 { font-size: 1.1rem; letter-spacing: .02em; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

ul, ol { padding-left: 1.25rem; }
li { margin-bottom: .4em; }

strong { font-weight: 650; color: var(--texte); }

hr { border: 0; border-top: 1px solid var(--bordure); margin: 2.5rem 0; }

:focus-visible {
  outline: 3px solid var(--rouge);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Lien d'évitement */
.skip-link {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(-120%);
  z-index: 999;
  background: var(--rouge);
  color: #fff;
  padding: .8rem 1.4rem;
  font-weight: 600;
}
.skip-link:focus { transform: translateY(0); text-decoration: none; }

/* --------------------------------------------------------------------------
   3. Utilitaires de mise en page
   -------------------------------------------------------------------------- */
.conteneur {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}
.conteneur--etroit { max-width: var(--max-etroit); }

.section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.section--alt { background: var(--fond-alt); }
.section--sombre { background: var(--noir); color: var(--gris-200); }
.section--sombre h2, .section--sombre h3 { color: #fff; }
.section--compacte { padding: clamp(2.5rem, 5vw, 3.5rem) 0; }

.entete-section { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.entete-section.centre { margin-inline: auto; text-align: center; }
.entete-section p { color: var(--texte-doux); font-size: 1.1rem; margin-bottom: 0; }
.section--sombre .entete-section p { color: var(--gris-300); }

.surtitre {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-texte);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rouge);
  margin-bottom: .9rem;
}
.surtitre::before {
  content: "";
  width: 28px;
  height: 3px;
  background: var(--rouge);
  border-radius: 2px;
}
.entete-section.centre .surtitre::before { display: none; }

.grille { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
.grille--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grille--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1000px) {
  .grille--3, .grille--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .grille--2, .grille--3, .grille--4 { grid-template-columns: minmax(0, 1fr); }
}

.texte-doux { color: var(--texte-doux); }
.centre { text-align: center; }
.mt-2 { margin-top: 2rem; }
.visuellement-cache {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   4. Boutons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  font-family: var(--font-texte);
  font-size: .95rem;
  font-weight: 650;
  letter-spacing: .01em;
  padding: .85rem 1.6rem;
  border: 2px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: transform var(--t), background var(--t), color var(--t), border-color var(--t), box-shadow var(--t);
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primaire { background: var(--rouge); color: #fff; box-shadow: 0 6px 18px rgba(224, 27, 38, .3); }
.btn--primaire:hover { background: var(--rouge-clair); box-shadow: 0 10px 26px rgba(224, 27, 38, .38); color: #fff; }

.btn--secondaire { background: transparent; color: var(--texte); border-color: var(--gris-300); }
.btn--secondaire:hover { border-color: var(--texte); background: var(--texte); color: #fff; }

.btn--clair { background: #fff; color: var(--noir); }
.btn--clair:hover { background: var(--gris-100); color: var(--noir); }

.btn--contour-clair { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .4); }
.btn--contour-clair:hover { background: #fff; color: var(--noir); border-color: #fff; }

.btn--petit { padding: .55rem 1.1rem; font-size: .85rem; }

.groupe-btn { display: flex; flex-wrap: wrap; gap: .85rem; }

/* --------------------------------------------------------------------------
   5. En-tête & navigation
   -------------------------------------------------------------------------- */
.entete {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(11, 11, 14, .92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.entete__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: var(--header-h);
  min-width: 0;
}

/* Le logo du club est dessiné pour un fond clair : on le pose donc sur une
   plaque blanche, sans le retoucher. */
.logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  background: #fff;
  border-radius: 10px;
  padding: 5px 9px;
  text-decoration: none;
  transition: box-shadow var(--t), transform var(--t);
}
.logo:hover {
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(224, 27, 38, .45);
}
.logo__img { display: block; height: 46px; width: auto; }

@media (max-width: 420px) {
  .logo { padding: 5px 8px; }
  .logo__img { height: 34px; }
}

.nav { display: flex; align-items: center; gap: .1rem; min-width: 0; flex-shrink: 1; }
.nav a {
  color: var(--gris-200);
  font-size: .88rem;
  font-weight: 550;
  padding: .5rem .62rem;
  border-radius: var(--rayon-sm);
  transition: color var(--t), background var(--t);
  white-space: nowrap;
}
.nav a:hover { color: #fff; background: rgba(255, 255, 255, .08); text-decoration: none; }
.nav a[aria-current="page"] { color: #fff; }
/* Le bouton d'appel à l'action du menu ne sert qu'en version mobile. */
.nav > .btn { display: none; }

.nav a[aria-current="page"]::after {
  content: "";
  display: block;
  height: 2px;
  background: var(--rouge);
  border-radius: 2px;
  margin-top: 3px;
}

.entete__actions { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; }

.burger {
  display: none;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: var(--rayon-sm);
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
}
.burger span {
  display: block;
  width: 20px; height: 2px;
  background: #fff;
  position: relative;
  transition: background var(--t);
}
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0;
  width: 20px; height: 2px; background: #fff;
  transition: transform var(--t), top var(--t);
}
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 1150px) {
  .burger { display: flex; }
  .entete__actions .btn { display: none; }
  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--noir);
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    padding: 1rem var(--gouttiere) 2rem;
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: transform var(--t), opacity var(--t), visibility var(--t);
  }
  .nav[data-ouvert="true"] { transform: translateY(0); opacity: 1; visibility: visible; }
  .nav a { padding: .95rem .5rem; font-size: 1.05rem; border-bottom: 1px solid rgba(255, 255, 255, .07); border-radius: 0; }
  /* Le bouton d'appel à l'action du menu ne sert qu'en version mobile. */
.nav > .btn { display: none; }

.nav a[aria-current="page"]::after { display: none; }
  .nav a[aria-current="page"] { color: var(--rouge-clair); }
  .nav .btn { display: inline-flex; margin-top: 1.25rem; align-self: flex-start; }
}

/* --------------------------------------------------------------------------
   6. Bandeau d'annonce
   -------------------------------------------------------------------------- */
.annonce {
  background: linear-gradient(90deg, var(--rouge-sombre), var(--rouge));
  color: #fff;
  font-size: .88rem;
  font-weight: 550;
  text-align: center;
  padding: .6rem var(--gouttiere);
}
.annonce a { color: #fff; text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--noir);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1000px 520px at 78% 12%, rgba(224, 27, 38, .38), transparent 62%),
    radial-gradient(760px 480px at 8% 88%, rgba(224, 27, 38, .16), transparent 60%);
  z-index: -2;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    115deg,
    rgba(255, 255, 255, .03) 0 1px,
    transparent 1px 78px
  );
  z-index: -1;
}

.hero__inner {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding: clamp(3.5rem, 9vw, 7rem) 0;
}
@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__media { order: -1; }
}

.hero h1 { color: #fff; margin-bottom: 1rem; }
.hero h1 em { font-style: normal; color: var(--rouge-clair); display: block; }
.hero__intro {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--gris-300);
  max-width: 52ch;
  margin-bottom: 2rem;
}

.hero--page { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.hero--page .hero__inner { display: block; padding: clamp(2.75rem, 7vw, 5rem) 0; }
.hero--page h1 { max-width: 20ch; }
.hero--page .hero__intro { margin-bottom: 0; }

/* Bandeau de page avec le logo de l'épreuve */
.hero__avec-logo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
.hero__avec-logo > div { flex: 1 1 340px; min-width: 0; }
.hero__logo {
  flex: 0 0 auto;
  background: #fff;
  border-radius: 14px;
  padding: 1rem 1.2rem;
}
.hero__logo img { display: block; width: 100%; max-width: 230px; height: auto; }

@media (max-width: 760px) {
  .hero__logo { order: -1; padding: .8rem .95rem; }
  .hero__logo img { max-width: 168px; }
}

/* Fil d'ariane */
.ariane { font-size: .82rem; color: var(--gris-500); margin-bottom: 1.25rem; }
.ariane a { color: var(--gris-300); }
.ariane span { margin: 0 .45rem; opacity: .5; }

/* Compteur / chiffres du hero */
.hero__chiffres {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: 2.75rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.chiffre__val {
  font-family: var(--font-titre);
  font-size: clamp(2rem, 4vw, 2.9rem);
  font-weight: 700;
  color: #fff;
  line-height: 1;
}
.chiffre__lib {
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gris-500);
  margin-top: .4rem;
}

/* --------------------------------------------------------------------------
   8. Carte "événement phare"
   -------------------------------------------------------------------------- */
.carte-phare {
  background: linear-gradient(160deg, var(--noir-2), var(--noir-3));
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--rayon);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: var(--ombre-lg);
  position: relative;
  overflow: hidden;
}
.carte-phare::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--rouge), var(--rouge-clair));
}
.carte-phare__tete {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .9rem;
  margin-bottom: 1rem;
}
.carte-phare__logo {
  background: #fff;
  border-radius: 10px;
  padding: .5rem .6rem;
  flex-shrink: 0;
}
.carte-phare__logo img { display: block; width: 132px; height: auto; }
.carte-phare__tete .carte-phare__date { margin: 0; }

.carte-phare__date {
  font-family: var(--font-titre);
  font-size: 1.05rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rouge-clair);
  font-weight: 700;
}
.carte-phare h2, .carte-phare h3 { color: #fff; margin: .35rem 0 1rem; }
.carte-phare p { color: var(--gris-300); font-size: .98rem; }

.liste-epreuves { list-style: none; padding: 0; margin: 1.25rem 0; }
.liste-epreuves li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  font-size: .95rem;
  color: var(--gris-200);
  margin: 0;
}
.liste-epreuves li:last-child { border-bottom: 0; }
.liste-epreuves strong { color: #fff; font-weight: 650; }
.liste-epreuves .heure {
  font-family: var(--font-titre);
  font-size: 1.15rem;
  color: var(--rouge-clair);
  font-weight: 700;
  letter-spacing: .02em;
}

/* --------------------------------------------------------------------------
   8 bis. Compte à rebours
   -------------------------------------------------------------------------- */
.rebours {
  margin: 0 0 1.25rem;
  padding: 1rem 0 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.rebours__titre {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gris-500);
  margin: 0 0 .7rem;
}
.rebours__grille {
  list-style: none;
  padding: 0;
  margin: 0 0 .7rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .45rem;
}
.rebours__grille li {
  margin: 0;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--rayon-sm);
  padding: .55rem .2rem .45rem;
  text-align: center;
}
.rebours__val {
  display: block;
  font-family: var(--font-titre);
  font-size: clamp(1.5rem, 3.4vw, 2.05rem);
  font-weight: 700;
  line-height: 1;
  color: var(--rouge-clair);
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}
.rebours__lib {
  display: block;
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gris-500);
  margin-top: .32rem;
}
.rebours__date {
  margin: 0;
  font-size: .86rem;
  color: var(--gris-300);
}
.rebours__fin {
  margin: 0;
  font-family: var(--font-titre);
  font-size: 1.35rem;
  text-transform: uppercase;
  color: var(--rouge-clair);
}

/* --------------------------------------------------------------------------
   9. Cartes
   -------------------------------------------------------------------------- */
.carte {
  background: #fff;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: clamp(1.4rem, 2.5vw, 2rem);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
  position: relative;
  display: flex;
  flex-direction: column;
}
.carte:hover { transform: translateY(-4px); box-shadow: var(--ombre-md); border-color: var(--gris-200); }
.carte h3 { margin-bottom: .6rem; }
.carte p { color: var(--texte-doux); font-size: .98rem; }
.carte__pied { margin-top: auto; padding-top: 1.25rem; }

.carte--lien { cursor: pointer; }
.carte--lien:hover { border-color: var(--rouge); }

.carte__icone {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: rgba(224, 27, 38, .1);
  color: var(--rouge);
  margin-bottom: 1.1rem;
  flex-shrink: 0;
}
.carte__icone svg { width: 24px; height: 24px; }

.carte--sombre {
  background: var(--noir-2);
  border-color: rgba(255, 255, 255, .12);
  color: var(--gris-300);
}
.carte--sombre h3 { color: #fff; }
.carte--sombre p { color: var(--gris-300); }

/* Étiquette */
.etiquette {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .3rem .7rem;
  border-radius: 999px;
  background: rgba(224, 27, 38, .1);
  color: var(--rouge);
  margin-bottom: .8rem;
}
.etiquette--neutre { background: var(--gris-100); color: var(--texte-doux); }
.etiquette--sombre { background: rgba(255, 255, 255, .1); color: #fff; }

/* --------------------------------------------------------------------------
   10. Cartes événement (avec visuel)
   -------------------------------------------------------------------------- */
.carte-event {
  display: flex;
  flex-direction: column;
  border-radius: var(--rayon);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--bordure);
  transition: transform var(--t), box-shadow var(--t);
}
.carte-event:hover { transform: translateY(-4px); box-shadow: var(--ombre-md); }
.carte-event__visuel {
  aspect-ratio: 16 / 9;
  background: var(--noir);
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.carte-event__visuel::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(600px 300px at 70% 20%, rgba(224, 27, 38, .55), transparent 65%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 1px, transparent 1px 48px);
}
.carte-event__visuel span {
  position: relative;
  font-family: var(--font-titre);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-align: center;
  padding: 1rem;
  text-shadow: 0 2px 12px rgba(0,0,0,.5);
}
.carte-event__corps { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.carte-event__corps p { color: var(--texte-doux); font-size: .97rem; }
.carte-event__meta {
  display: flex; flex-wrap: wrap; gap: .5rem 1.1rem;
  font-size: .85rem; color: var(--texte-doux);
  margin-bottom: .9rem;
}
.carte-event__meta span { display: inline-flex; align-items: center; gap: .35rem; }

/* --------------------------------------------------------------------------
   11. Agenda / timeline
   -------------------------------------------------------------------------- */
.agenda { list-style: none; padding: 0; margin: 0; }
.agenda > li {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  gap: clamp(1rem, 3vw, 2rem);
  align-items: center;
  padding: 1.4rem 0;
  border-top: 1px solid var(--bordure);
  margin: 0;
}
.agenda > li:last-child { border-bottom: 1px solid var(--bordure); }
.agenda__date {
  text-align: center;
  background: var(--noir);
  color: #fff;
  border-radius: var(--rayon-sm);
  padding: .6rem .4rem;
  line-height: 1;
}
.agenda__jour { font-family: var(--font-titre); font-size: 1.75rem; font-weight: 700; display: block; }
.agenda__mois { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--rouge-clair); margin-top: .3rem; display: block; }
.agenda__titre { font-family: var(--font-titre); font-size: 1.3rem; text-transform: uppercase; margin: 0 0 .2rem; }
.agenda__lieu { font-size: .9rem; color: var(--texte-doux); margin: 0; }
@media (max-width: 640px) {
  /* 72 px ne suffisaient pas pour « AOÛ » ou « NOV » en Barlow Condensed :
     le mois débordait de la pastille. */
  .agenda > li { grid-template-columns: 84px 1fr; }
  .agenda__jour { font-size: 1.55rem; }
  .agenda > li .btn { grid-column: 2; justify-self: start; }
}

/* --------------------------------------------------------------------------
   12. Horaires (tableau)
   -------------------------------------------------------------------------- */
.tableau-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--rayon); border: 1px solid var(--bordure); }
table { width: 100%; border-collapse: collapse; font-size: .95rem; background: #fff; min-width: 560px; }
caption { text-align: left; font-weight: 650; padding: 1rem 1.25rem; color: var(--texte-doux); font-size: .9rem; }
th, td { padding: .95rem 1.25rem; text-align: left; border-bottom: 1px solid var(--bordure); }
thead th {
  background: var(--noir);
  color: #fff;
  font-family: var(--font-texte);
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:nth-child(even) { background: var(--fond-alt); }
td strong { color: var(--texte); }

/* --------------------------------------------------------------------------
   13. Accordéon (FAQ)
   -------------------------------------------------------------------------- */
.accordeon { border: 1px solid var(--bordure); border-radius: var(--rayon); overflow: hidden; background: #fff; }
.accordeon details { border-bottom: 1px solid var(--bordure); }
.accordeon details:last-child { border-bottom: 0; }
.accordeon summary {
  cursor: pointer;
  padding: 1.15rem 3rem 1.15rem 1.4rem;
  font-weight: 600;
  list-style: none;
  position: relative;
  transition: background var(--t);
}
.accordeon summary::-webkit-details-marker { display: none; }
.accordeon summary:hover { background: var(--fond-alt); }
.accordeon summary::after {
  content: "";
  position: absolute;
  right: 1.4rem; top: 50%;
  width: 10px; height: 10px;
  border-right: 2px solid var(--rouge);
  border-bottom: 2px solid var(--rouge);
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--t);
}
.accordeon details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.accordeon .accordeon__corps { padding: 0 1.4rem 1.4rem; color: var(--texte-doux); font-size: .98rem; }

/* --------------------------------------------------------------------------
   14. Liste de liens / documents
   -------------------------------------------------------------------------- */
.liste-docs { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.liste-docs li { margin: 0; }
.liste-docs a {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .9rem 1.1rem;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-sm);
  background: #fff;
  color: var(--texte);
  font-weight: 550;
  font-size: .95rem;
  transition: border-color var(--t), background var(--t), transform var(--t);
}
.liste-docs a:hover { border-color: var(--rouge); background: rgba(224, 27, 38, .04); text-decoration: none; transform: translateX(3px); }
.liste-docs svg { width: 18px; height: 18px; color: var(--rouge); flex-shrink: 0; }
.liste-docs .type {
  margin-left: auto;
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gris-500);
  font-weight: 700;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   14 bis. Vidéo
   -------------------------------------------------------------------------- */
.video {
  margin: 0;
  background: var(--noir);
  border-radius: var(--rayon);
  padding: clamp(.75rem, 2vw, 1.1rem);
  display: grid;
  gap: 1rem;
  justify-items: center;
}
.video__lecteur {
  display: block;
  width: auto;
  max-width: 100%;
  max-width: min(100%, 920px);
  max-height: min(78vh, 640px);
  border-radius: var(--rayon-sm);
  background: #000;
}
.video__legende { text-align: center; max-width: 60ch; color: var(--gris-300); }
.video__titre {
  font-family: var(--font-titre);
  font-size: 1.25rem;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 .3rem;
}
.video__legende p:last-child { margin-bottom: 0; font-size: .95rem; }

/* --------------------------------------------------------------------------
   15. Galerie d'albums
   -------------------------------------------------------------------------- */
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1rem; }
.galerie a {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--rayon-sm);
  overflow: hidden;
  background: linear-gradient(150deg, var(--noir-2), var(--noir-3));
  display: flex;
  align-items: flex-end;
  padding: 1rem;
  color: #fff;
  font-weight: 600;
  font-size: .92rem;
  line-height: 1.3;
  border: 1px solid rgba(255,255,255,.08);
  transition: transform var(--t), box-shadow var(--t);
}
.galerie a::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(500px 260px at 75% 15%, rgba(224,27,38,.5), transparent 65%);
  transition: opacity var(--t);
  opacity: .75;
}
.galerie a:hover { transform: translateY(-3px); box-shadow: var(--ombre-md); text-decoration: none; }
.galerie a:hover::before { opacity: 1; }
.galerie a span { position: relative; }

/* --------------------------------------------------------------------------
   16. Bloc CTA
   -------------------------------------------------------------------------- */
.cta {
  background: var(--noir);
  color: #fff;
  border-radius: var(--rayon);
  padding: clamp(2.25rem, 5vw, 4rem);
  text-align: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.cta::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(700px 380px at 50% 0%, rgba(224, 27, 38, .4), transparent 65%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.04) 0 1px, transparent 1px 64px);
}
.cta h2 { color: #fff; }
.cta p { color: var(--gris-300); max-width: 55ch; margin-inline: auto; margin-bottom: 2rem; }
.cta .groupe-btn { justify-content: center; }

/* --------------------------------------------------------------------------
   17. Formulaire
   -------------------------------------------------------------------------- */
.formulaire { display: grid; gap: 1.15rem; }
.champ { display: grid; gap: .45rem; }
.champ label { font-size: .88rem; font-weight: 650; }
.champ .aide { font-size: .82rem; color: var(--texte-doux); }
.champ input, .champ select, .champ textarea {
  font-family: inherit;
  font-size: 1rem;
  padding: .8rem 1rem;
  border: 1px solid var(--gris-300);
  border-radius: var(--rayon-sm);
  background: #fff;
  color: var(--texte);
  width: 100%;
  transition: border-color var(--t), box-shadow var(--t);
}
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none;
  border-color: var(--rouge);
  box-shadow: 0 0 0 3px rgba(224, 27, 38, .15);
}
.champ textarea { resize: vertical; min-height: 140px; }
.champ--duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
@media (max-width: 560px) { .champ--duo { grid-template-columns: 1fr; } }
.champ--case { display: flex; align-items: flex-start; gap: .65rem; }
.champ--case input { width: auto; margin-top: .25rem; flex-shrink: 0; }
.champ--case label { font-weight: 400; font-size: .9rem; color: var(--texte-doux); }

.encadre {
  border-left: 4px solid var(--rouge);
  background: var(--fond-alt);
  padding: 1.25rem 1.5rem;
  border-radius: 0 var(--rayon-sm) var(--rayon-sm) 0;
  font-size: .96rem;
}
.encadre p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   18. Contacts
   -------------------------------------------------------------------------- */
.liste-contact { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.4rem; }
.liste-contact li { display: flex; gap: 1rem; margin: 0; }
.liste-contact svg { width: 20px; height: 20px; color: var(--rouge); flex-shrink: 0; margin-top: .25rem; }
.liste-contact strong { display: block; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-doux); font-weight: 700; margin-bottom: .15rem; }

/* --------------------------------------------------------------------------
   19. Pied de page
   -------------------------------------------------------------------------- */
.pied {
  background: var(--noir);
  color: var(--gris-300);
  padding: clamp(3rem, 6vw, 4.5rem) 0 0;
  font-size: .93rem;
}
.pied__grille {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: clamp(1.75rem, 4vw, 3rem);
  padding-bottom: 3rem;
}
@media (max-width: 880px) { .pied__grille { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .pied__grille { grid-template-columns: 1fr; } }

.pied h4 {
  color: #fff;
  font-size: .82rem;
  letter-spacing: .14em;
  margin-bottom: 1.1rem;
}
.pied ul { list-style: none; padding: 0; margin: 0; }
.pied li { margin-bottom: .6rem; }
.pied a { color: var(--gris-300); }
.pied a:hover { color: #fff; }
.pied .logo { margin-bottom: 1rem; }

.pied__bas {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding: 1.5rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  font-size: .84rem;
  color: var(--gris-500);
}
.pied__bas a { color: var(--gris-500); }

.reseaux { display: flex; gap: .6rem; }
.reseaux a {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  transition: background var(--t), transform var(--t);
}
.reseaux a:hover { background: var(--rouge); transform: translateY(-2px); }
.reseaux svg { width: 18px; height: 18px; }

/* --------------------------------------------------------------------------
   20. Animations d'apparition
   -------------------------------------------------------------------------- */
/* Le contenu reste visible si JavaScript est absent ou en échec. */
.js .apparait { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js .apparait.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .apparait { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   18 bis. Photo large (accueil)
   --------------------------------------------------------------------------
   Une photo du club, en pleine largeur de la colonne, avec sa légende.
   Le cadre est un bloc blanc comme les autres (voir la section 20 bis).
   -------------------------------------------------------------------------- */
.photo-large {
  margin: 0;
  background: #fff;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: clamp(.6rem, 1.6vw, .9rem);
  display: grid;
  gap: .85rem;
  justify-items: center;
  max-width: 940px;
  margin-inline: auto;
}
.photo-large img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--rayon-sm);
  background: var(--fond-alt);
}
.photo-large figcaption {
  text-align: center;
  max-width: 62ch;
  font-size: .95rem;
  color: var(--texte-doux);
}

/* --------------------------------------------------------------------------
   18 ter. Champ-piège des formulaires
   --------------------------------------------------------------------------
   Un robot remplit tous les champs qu'il trouve ; contact.php refuse l'envoi
   si celui-ci n'est pas vide. Il est sorti de l'écran plutôt que masqué par
   `display:none` — certains robots savent ignorer ce qui est caché.
   -------------------------------------------------------------------------- */
.piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   19 bis. Visionneuse (documents et photos)
   --------------------------------------------------------------------------
   Fenêtre ouverte par-dessus la page quand on clique sur un document ou une
   photo hébergés avec le site. Construite par `main.js` ; sans JavaScript,
   rien de tout ceci n'apparaît et les liens s'ouvrent dans un onglet.
   -------------------------------------------------------------------------- */
.visio {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(.75rem, 3vw, 2.5rem);
}
.visio__fond {
  position: absolute;
  inset: 0;
  background: rgba(6, 6, 8, .82);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border: 0;
  cursor: zoom-out;
}
.visio__boite {
  position: relative;
  width: min(1100px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  color: var(--texte-clair, #17171d);
  border-radius: var(--rayon);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
  overflow: hidden;
  /* Jetons en version claire : la fenêtre est un bloc blanc, comme les autres. */
  --texte: #17171d;
  --texte-doux: #5a5a66;
  --bordure: #e4e4ea;
  --panneau-bord-fort: #cbcbd4;
  --rouge-clair: #c1121c;
}
.visio__tete {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--bordure);
}
.visio__titre {
  margin: 0;
  font-weight: 650;
  font-size: .98rem;
  color: var(--texte);
  flex: 1 1 12rem;
  min-width: 0;
}
.visio__compteur {
  margin: 0;
  font-size: .82rem;
  color: var(--texte-doux);
  font-variant-numeric: tabular-nums;
}
.visio__actions { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.visio__actions .btn { color: var(--texte); border-color: var(--panneau-bord-fort); }
.visio__actions .btn:hover { background: var(--texte); color: #fff; border-color: var(--texte); }
.visio__fermer {
  width: 2.2rem; height: 2.2rem;
  display: grid; place-items: center;
  background: var(--noir);
  color: #fff;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  font-size: .95rem;
  line-height: 1;
}
.visio__fermer:hover { background: var(--rouge); }

.visio__cadre {
  flex: 1 1 auto;
  min-height: 0;
  background: #101014;
  display: grid;
  place-items: center;
  overflow: auto;
}
.visio__image, .visio__video {
  display: block;
  max-width: 100%;
  max-height: min(78vh, 900px);
  width: auto;
  height: auto;
}
.visio__pdf {
  display: block;
  width: 100%;
  height: min(78vh, 900px);
  border: 0;
  background: #fff;
}

.visio__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  background: rgba(11, 11, 14, .72);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
}
.visio__nav:hover { background: var(--rouge); border-color: var(--rouge); }
.visio__nav--prec { left: .5rem; }
.visio__nav--suiv { right: .5rem; }

/* Pas de défilement derrière la fenêtre ouverte. */
body.visio-ouverte { overflow: hidden; }

@media (max-width: 640px) {
  .visio__tete { padding: .7rem .8rem; }
  .visio__titre { flex-basis: 100%; }
  .visio__image, .visio__video { max-height: 68vh; }
}

/* --------------------------------------------------------------------------
   20 bis. Fond rouge & noir, blocs blancs
   --------------------------------------------------------------------------
   Le fond de page est un dégradé diagonal rouge sourd → noir (voir `body`).
   Deux registres se superposent :

   1. Ce qui est posé À MÊME le dégradé — bandeaux, titres de section, agenda,
      pied de page — est en texte clair (jetons `--texte`, `--texte-doux`… du
      bloc `:root`, réglés pour un fond sombre).
   2. Les BLOCS de contenu — cartes, tableaux, FAQ, listes de documents,
      encadrés, champs de formulaire — sont des panneaux BLANCS. Chacun
      redéfinit chez lui les jetons de couleur en version claire : tout ce qu'il
      contient (textes, bordures, gris, rouge) suit automatiquement.

   Restent volontairement sombres, comme accents : le bandeau d'appel à
   l'action, les vignettes d'albums, la pastille de date de l'agenda et la
   ligne d'en-tête des tableaux.
   -------------------------------------------------------------------------- */

/* --- 1. Ce qui est posé à même le dégradé -------------------------------- */

/* Bandeaux : transparents, le dégradé de page les traverse. */
.hero { background: transparent; }
/* Les halos rouges d'origine feraient doublon avec le dégradé de page :
   il ne reste qu'un voile sombre en bas à droite, pour creuser la diagonale. */
.hero::before {
  background: radial-gradient(900px 560px at 88% 96%, rgba(0, 0, 0, .45), transparent 66%);
}

/* Bandes de section */
.section--alt { background: rgba(255, 255, 255, .045); }
.section--sombre { background: rgba(11, 11, 14, .62); }

/* Le surtitre et le fil d'ariane sont posés à même le dégradé : en blanc ils
   restent lisibles aussi bien sur le rouge que sur le noir. */
.surtitre { color: #fff; }
.surtitre::before { background: var(--rouge-clair); }
.ariane { color: rgba(255, 255, 255, .72); }
.ariane a { color: #fff; }

/* Agenda : la pastille de date est un bloc blanc (voir la liste ci-dessous),
   avec le jour en noir et le mois en rouge. */
.agenda__date { border: 1px solid var(--bordure); }

/* Liens dans le corps du texte : sur un fond qui va du rouge au noir, un lien
   rouge devient illisible dès qu'il tombe sur la zone rouge. On les met donc
   en blanc (ou en noir dans un bloc blanc), soulignés de rouge — repérables
   par la forme, pas par la couleur. Les liens des menus, des cartes et du
   pied de page gardent leur style. */
p a, li a, dd a, td a, th a, caption a,
.accordeon__corps a, .encadre a, .texte-doux a {
  color: currentColor;
  text-decoration: underline;
  text-decoration-color: var(--rouge-clair);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
p a:hover, li a:hover, dd a:hover, td a:hover,
.accordeon__corps a:hover, .encadre a:hover, .texte-doux a:hover {
  color: var(--rouge-clair);
  text-decoration-color: currentColor;
}
/* …sauf quand ce « lien de texte » est en réalité un bouton ou une vignette. */
p a.btn, li a.btn, td a.btn, .pied li a {
  color: inherit;
  text-decoration: none;
}
.galerie a, .liste-docs a { text-decoration: none; }
/* Les vignettes d'albums gardent leur fond sombre, donc leur texte blanc,
   y compris lorsqu'elles sont posées dans une carte blanche. */
.galerie a, .galerie a span { color: #fff; }
.pied li a { color: var(--gris-300); }
.pied li a:hover { color: #fff; text-decoration: underline; }

/* Boutons posés sur le dégradé */
.btn--secondaire { color: var(--texte); border-color: var(--panneau-bord-fort); }
.btn--secondaire:hover { background: #fff; color: var(--noir); border-color: #fff; }

/* Pied de page : on l'appuie en noir plein pour asseoir le bas de page. */
.pied { background: rgba(11, 11, 14, .88); }

/* --- 2. Les blocs blancs ------------------------------------------------- */

/* Un seul endroit décide de la liste des blocs blancs. Chacun redéfinit les
   jetons de couleur en clair : les règles écrites plus haut dans la feuille
   (qui utilisent ces mêmes jetons) s'y adaptent sans être réécrites. */
:is(.carte, .carte-event, .carte-phare, .accordeon, .encadre, .video,
    .photo-large, table, .tableau-wrap, .liste-docs a, .agenda__date,
    .champ input, .champ select, .champ textarea) {
  --texte: #17171d;
  --texte-doux: #5a5a66;
  --bordure: #e4e4ea;
  --fond-alt: #f6f6f8;
  --panneau-bord: #e4e4ea;
  --panneau-bord-fort: #cbcbd4;
  /* Ces trois gris servaient de texte clair sur fond sombre : en version
     claire, ils deviennent des gris de texte. */
  --gris-200: #3d3d47;
  --gris-300: #5a5a66;
  --gris-500: #6f6f7c;
  /* Le rouge clair est illisible sur blanc : dans un bloc, le rouge d'accent
     redevient le rouge du club, légèrement assombri. */
  --rouge-clair: #c1121c;

  background: #fff;
  color: var(--texte);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* Volontairement, ce groupe ne touche pas `border-color` : chaque bloc garde
   la bordure écrite dans sa propre règle, qui utilise `--bordure` — donc la
   valeur claire redéfinie juste au-dessus. C'est ce qui permet à l'encadré de
   conserver son filet rouge à gauche. */

/* Titres et mentions qui étaient écrits en blanc dans les blocs sombres */
:is(.carte, .carte-phare, .carte-event, .video) :is(h2, h3, h4),
.carte-phare h2, .carte-phare h3,
.liste-epreuves strong,
.video__titre { color: var(--texte); }

.carte-phare {
  background: #fff;
  border: 1px solid var(--bordure);
}
.carte-phare p { color: var(--texte-doux); }
.liste-epreuves li { border-bottom-color: var(--bordure); color: var(--texte); }

/* Compte à rebours dans la carte « événement phare » */
.rebours { border-top-color: var(--bordure); border-bottom-color: var(--bordure); }
.rebours__grille li { background: var(--fond-alt); border-color: var(--bordure); }

/* Cartes : l'ancienne variante « sombre » devient blanche comme les autres,
   pour que tous les blocs se ressemblent. */
.carte--sombre { background: #fff; }
.carte:hover { border-color: var(--panneau-bord-fort); box-shadow: var(--ombre-lg); }

/* Étiquettes : posées à même le dégradé, une pastille rouge pleine à texte
   blanc (le rouge en texte ne passe pas sur un fond sombre) ; dans un bloc
   blanc, la pastille rosée d'origine à texte rouge. */
.etiquette { background: var(--rouge); color: #fff; }
.etiquette--neutre,
.etiquette--sombre { background: rgba(255, 255, 255, .14); color: #fff; }

:is(.carte, .carte-event, .carte-phare, .accordeon, .encadre, table) .etiquette {
  background: rgba(224, 27, 38, .12);
  /* rouge assombri : sur la pastille rosée, le rouge vif n'atteint pas le
     contraste demandé pour un texte aussi petit. */
  color: var(--rouge-clair);
}
:is(.carte, .carte-event, .carte-phare, .accordeon, .encadre, table)
  :is(.etiquette--neutre, .etiquette--sombre) {
  background: var(--fond-alt);
  color: var(--texte-doux);
}

/* Pictogrammes dans les blocs blancs */
.carte__icone { background: rgba(224, 27, 38, .1); color: var(--rouge); }
.liste-docs svg,
.liste-contact svg,
.accordeon summary::after { color: var(--rouge); }
.accordeon summary::after {
  border-right-color: var(--rouge);
  border-bottom-color: var(--rouge);
}

/* Tableaux : en-tête noir conservé, lignes paires en gris très clair. */
thead th { background: var(--noir); color: #fff; }
tbody tr:nth-child(even) { background: var(--fond-alt); }

/* FAQ */
.accordeon summary:hover { background: var(--fond-alt); }

/* Listes de documents */
.liste-docs a:hover { background: rgba(224, 27, 38, .06); border-color: var(--rouge); }

/* Formulaires */
.champ input::placeholder, .champ textarea::placeholder { color: var(--gris-500); }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  border-color: var(--rouge);
  box-shadow: 0 0 0 3px rgba(224, 27, 38, .18);
}
.encadre { background: var(--fond-alt); }

/* Les champs de saisie : `--gris-300` sert de texte clair ailleurs, la
   bordure est donc donnée en clair ici. */
.champ input, .champ select, .champ textarea { border-color: #c9c9d2; }

/* Boutons à l'intérieur d'un bloc blanc : les variantes prévues pour un fond
   sombre y seraient invisibles. */
:is(.carte, .carte-phare, .carte-event, .accordeon, .encadre, .video, table)
  :is(.btn--contour-clair, .btn--secondaire) {
  color: var(--texte);
  border-color: var(--panneau-bord-fort);
  background: transparent;
}
:is(.carte, .carte-phare, .carte-event, .accordeon, .encadre, .video, table)
  :is(.btn--contour-clair, .btn--secondaire):hover {
  background: var(--texte);
  color: #fff;
  border-color: var(--texte);
}
:is(.carte, .carte-phare, .carte-event, .accordeon, .encadre, .video, table) .btn--clair {
  background: var(--noir);
  color: #fff;
}
:is(.carte, .carte-phare, .carte-event, .accordeon, .encadre, .video, table) .btn--clair:hover {
  background: var(--noir-3);
  color: #fff;
}


/* --------------------------------------------------------------------------
   21. Impression
   -------------------------------------------------------------------------- */
@media print {
  .entete, .pied, .annonce, .cta, .burger, .visio { display: none !important; }
  body { color: #000; font-size: 11pt; background: #fff; }
  .hero { background: none; color: #000; }
  .hero h1, .hero h2 { color: #000; }
  /* Le thème sombre ne s'imprime pas : on remet des surfaces blanches
     et du texte noir, sinon la page sort grise et illisible. */
  .hero::before, .hero::after, .cta::before { display: none !important; }
  .carte, .carte--sombre, .carte-event, .carte-phare, .accordeon, .liste-docs a,
  table, .section--alt, .section--sombre, .encadre, .cta, .video, .photo-large,
  .agenda__date, thead th, tbody tr:nth-child(even) {
    background: #fff !important;
    color: #000 !important;
    border-color: #bbb !important;
    backdrop-filter: none !important;
  }
  h1, h2, h3, h4, p, li, td, th, strong, a, .surtitre, .texte-doux,
  .ariane, .ariane a, .carte p, .carte-phare p, .cta p, .hero__intro,
  .accordeon__corps {
    color: #000 !important;
  }
  a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}