/* ==========================================================================
   Ligue Auvergne-Rhône-Alpes de Hockey — charte graphique
   Couleurs relevées directement sur le logo (assets/img/logo.png) :
   le bleu du blason, le dégradé cyan des montagnes, le blanc de la crosse.
   ========================================================================== */

:root {
  /* Bleus du blason */
  --bleu-nuit:    #062F59;
  --bleu-fonce:   #083F73;
  --bleu:         #0B4F8C;
  --bleu-trait:   #0B6EB3;

  /* Cyans des facettes de montagne */
  --cyan-fonce:   #0B8ED3;
  --cyan:         #0E95D8;
  --cyan-clair:   #37B8F2;
  --cyan-vif:     #41BDF4;

  /* Neutres */
  --blanc:        #FFFFFF;
  --brume:        #F2F6FA;
  --brume-trait:  #DCE6F0;
  --gris:         #5C7186;
  --encre:        #13212F;

  --degrade-blason: linear-gradient(135deg, #0B4F8C 0%, #083F73 55%, #062F59 100%);
  --degrade-cyan:   linear-gradient(135deg, #37B8F2 0%, #0B8ED3 100%);

  --ombre:      0 2px 4px rgba(6, 47, 89, .04), 0 18px 34px rgba(6, 47, 89, .08);
  --ombre-haut: 0 4px 8px rgba(6, 47, 89, .05), 0 26px 46px rgba(6, 47, 89, .15);

  /* Le masque en coup de pinceau du bloc « territoire ». */
  --pinceau: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300' preserveAspectRatio='none'%3E%3Cpath d='M10 28 C 60 10 120 22 176 14 C 236 6 300 20 352 10 C 380 6 396 16 392 44 C 386 96 396 150 390 206 C 386 252 398 284 366 290 C 300 302 232 286 168 294 C 112 300 58 288 22 294 C 2 297 6 268 10 232 C 16 176 4 120 8 66 C 9 46 4 31 10 28 Z' fill='%23000'/%3E%3C/svg%3E");

  --rayon:    16px;
  --rayon-sm: 10px;

  --largeur: 1180px;
  --titre:  'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --texte:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  /* L'écriture manuscrite de la signature « Plus loin ensemble ». */
  --plume:  'Caveat', 'Segoe Script', cursive;
}

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

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

img { max-width: 100%; height: auto; display: block; }
a { color: var(--bleu); }

h1, h2, h3, h4 {
  font-family: var(--titre);
  line-height: 1.15;
  margin: 0 0 .6em;
  color: var(--bleu-nuit);
}
h1 { font-size: clamp(2rem, 4.2vw, 3rem); font-weight: 800; letter-spacing: .01em; }
h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 800; }
h3 { font-size: 1.15rem; font-weight: 700; }

.conteneur { max-width: var(--largeur); margin: 0 auto; padding: 0 24px; }

/* --- Surtitre : le lettrage espacé du logo -------------------------------- */
.surtitre {
  font-family: var(--titre);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cyan-fonce);
  margin: 0 0 .5rem;
}
.surtitre--clair { color: var(--cyan-clair); }

/* --- Bandeau supérieur ---------------------------------------------------- */
.bandeau {
  background: var(--bleu-nuit);
  color: rgba(255,255,255,.78);
  font-size: .82rem;
}
.bandeau .conteneur {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 38px; flex-wrap: wrap;
}
.bandeau a { color: rgba(255,255,255,.78); text-decoration: none; }
.bandeau a:hover { color: var(--cyan-clair); }
.bandeau-liens { display: flex; gap: 18px; }

/* --- En-tête et navigation ------------------------------------------------ */
/* Structure de la proposition 3 : barre blanche, logo posé sur une carte qui
   déborde sur la photo, menu en capitales bleu nuit. */
.entete {
  position: absolute; top: 0; left: 0; right: 0; z-index: 50;
  background: transparent; color: var(--blanc);
  transition: background .2s ease, box-shadow .2s ease;
}
/* Le calage ne se comprime pas, le menu oui : ainsi ils ne peuvent pas se
   chevaucher, même le temps que la police du site finisse de charger. */
/* L'en-tête a droit à plus de largeur que le texte des pages : c'est la
   seule façon de loger le calage, cinq entrées de menu et un bouton sans
   qu'ils se touchent. Le contenu des pages, lui, reste à 1180 px. */
.entete .conteneur {
  display: flex; align-items: center; gap: clamp(18px, 2.4vw, 36px);
  max-width: var(--largeur); min-height: 126px; transition: min-height .25s ease;
}
.marque { flex: 0 0 auto; }
.nav { min-width: 0; }
/* Le médaillon porte son propre lettrage : plus de texte posé à côté, et plus
   de plaque blanche — le logo a déjà son fond clair et son cerne. */
.marque {
  display: block; text-decoration: none; position: relative; z-index: 4;
  filter: drop-shadow(0 10px 28px rgba(6,47,89,.34));
  transition: transform .25s ease, margin .25s ease;
  margin-bottom: -78px;   /* le médaillon dépasse sous la barre */
  /* Un cercle calé au ras du texte paraît déborder : il ne touche l'alignement
     qu'en un point. Ce décalage rattrape l'illusion. */
  margin-left: 40px; margin-top: 22px;
}
.marque-embleme {
  height: 200px; width: auto; display: block; transition: height .25s ease;
}
/* Les deux filets de part et d'autre de la date, comme sur le logo. */
.marque-date {
  display: flex; align-items: center; gap: 7px; margin-top: 3px;
  font-family: var(--titre); font-weight: 700; font-size: 9px;
  letter-spacing: .28em; text-transform: uppercase; color: var(--cyan-clair);
}
.marque-date::before, .marque-date::after {
  content: ''; flex: 1; height: 2px; border-radius: 2px;
  background: currentColor; opacity: .85;
}

.nav { display: flex; align-items: center; gap: 2px; flex-wrap: nowrap; margin-left: auto; }
.nav-item { position: relative; }
.nav-lien {
  display: block; padding: 11px 12px;
  font-family: var(--titre); font-size: .76rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--blanc); text-decoration: none; white-space: nowrap;
  border-radius: var(--rayon-sm); text-shadow: 0 1px 10px rgba(6,47,89,.5);
}
.nav-lien:hover, .nav-item:hover > .nav-lien { background: rgba(255,255,255,.18); color: var(--blanc); }
.nav-lien[aria-current="page"] { color: var(--cyan-clair); }
.nav-lien[aria-current="page"]::after {
  content: ''; display: block; height: 3px; margin-top: 5px;
  border-radius: 2px; background: var(--degrade-cyan);
}

/* Le bouton de droite, à la place de l'« espace club » de la maquette :
   il mène là où il y a vraiment quelque chose. */
.entete-action {
  display: inline-block; padding: 11px 22px; margin-left: 6px;
  font-family: var(--titre); font-size: .74rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  background: var(--degrade-cyan); color: var(--blanc);
  border-radius: 999px; text-decoration: none; white-space: nowrap;
  box-shadow: 0 6px 16px rgba(11,142,211,.3);
  transition: transform .12s;
}
.entete-action:hover { transform: translateY(-2px); }

.sous-nav {
  position: absolute; top: 100%; left: 0; min-width: 260px;
  background: var(--blanc); border-radius: var(--rayon);
  box-shadow: var(--ombre-haut); padding: 10px;
  list-style: none; margin: 0;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .15s, transform .15s, visibility .15s;
}
.nav-item:hover .sous-nav, .nav-item:focus-within .sous-nav {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.sous-nav a {
  display: block; padding: 9px 14px; border-radius: var(--rayon-sm);
  color: var(--encre); text-decoration: none; font-size: .92rem;
}
.sous-nav a:hover { background: var(--brume); color: var(--bleu); }
.sous-nav-titre {
  padding: 10px 14px 4px; font-size: .7rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gris);
}

/* Une fois qu'on a défilé, la carte du logo rentre dans la barre : elle ne
   doit pas masquer le contenu qu'on est en train de lire. */
.entete.reduit {
  position: fixed; background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
  box-shadow: 0 1px 0 var(--brume-trait), 0 10px 30px rgba(6,47,89,.1);
}
.entete.reduit .conteneur { min-height: 88px; }
/* Une fois dans la barre, le médaillon n'en dépasse plus : il rentre dedans
   et s'y centre. D'où une taille qui laisse dix pixels de part et d'autre,
   et le décalage de gauche qui tombe — il ne servait qu'à rattraper
   l'alignement avec le grand titre, lequel est déjà passé plus haut. */
.entete.reduit .marque { margin: 0 0 0 8px; }
.entete.reduit .marque { filter: drop-shadow(0 4px 12px rgba(6,47,89,.22)); }
.entete.reduit .marque-embleme { height: 68px; }
.entete.reduit .nav-lien { color: var(--bleu-nuit); text-shadow: none; }
.entete.reduit .nav-lien:hover { background: var(--brume); color: var(--bleu); }
.entete.reduit .nav-lien[aria-current="page"] { color: var(--cyan-fonce); }

.bouton-menu {
  display: none; background: rgba(255,255,255,.22); border: 0; color: var(--blanc);
  padding: 10px 14px; border-radius: var(--rayon-sm); font-size: 1.1rem; cursor: pointer;
}

/* --- Boutons -------------------------------------------------------------- */
.bouton {
  display: inline-block; padding: 13px 26px;
  font-family: var(--titre); font-size: .84rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  border-radius: 999px; text-decoration: none; border: 2px solid transparent;
  transition: transform .12s, box-shadow .12s;
}
.bouton:hover { transform: translateY(-2px); }
.bouton--cyan { background: var(--degrade-cyan); color: var(--blanc); box-shadow: 0 6px 18px rgba(11,142,211,.35); }
.bouton--blanc { background: var(--blanc); color: var(--bleu); }
.bouton--fantome { border-color: rgba(255,255,255,.5); color: var(--blanc); }
.bouton--fantome:hover { border-color: var(--blanc); background: rgba(255,255,255,.1); }

/* --- Héros ---------------------------------------------------------------- */
.heros {
  position: relative; background: var(--degrade-blason); color: var(--blanc);
  padding: 84px 0 130px; overflow: hidden;
}
.heros::after { /* le bas de la photo se fond dans la page, sans découpe */
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 190px;
  background: linear-gradient(to bottom,
    rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 52%,
    rgba(255,255,255,.92) 80%, var(--blanc) 100%);
  pointer-events: none;
}
/* Le texte du bandeau garde une colonne de lecture, mais calée à gauche :
   centrée, elle laissait un retrait de deux cents pixels sous le médaillon. */
.heros .conteneur { position: relative; z-index: 2; max-width: 820px; }
.heros:not(.heros--page) .conteneur { max-width: var(--largeur); }
.heros:not(.heros--page) .heros-titre,
.heros:not(.heros--page) .heros-dire { max-width: 22ch; }
.heros:not(.heros--page) .heros-dire { max-width: 46ch; }
/* Tout le bandeau tient sur l'appui gauche : le médaillon, le titre,
   l'accroche et le bouton. */
.heros-titre { margin-bottom: .35em; }
.heros-titre span {
  display: block; font-size: clamp(1rem, 2.1vw, 1.5rem); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--blanc);
  margin-bottom: .1em;
}
.heros-titre {
  font-size: clamp(2.8rem, 6.6vw, 5rem); font-weight: 800; color: var(--blanc);
  letter-spacing: -.01em; text-transform: uppercase; line-height: .98;
}
.heros-dire { white-space: pre-line; font-size: clamp(1.05rem, 1.6vw, 1.3rem); }
.heros .signature {
  font-family: var(--plume); font-weight: 600;
  font-size: clamp(2.2rem, 4.8vw, 3.5rem); line-height: .95;
  color: var(--blanc); margin: 0 0 2px; transform: rotate(-2.5deg);
  transform-origin: left bottom; text-shadow: 0 2px 20px rgba(6,47,89,.5);
}
.heros h1 { color: var(--blanc); margin-bottom: .4em; }
.heros p { font-size: 1.15rem; color: rgba(255,255,255,.86); max-width: 62ch; }
.heros-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }

/* --- Photos de fond du bandeau -------------------------------------------- */
/* Avec une photo, le bandeau se fait plus haut : à 480 px on n'en voyait que
   la moitié, coupée sous les visages. Plus haut, on la recadre moins. */
.heros--photos {
  background: var(--bleu-nuit);
  min-height: clamp(560px, 52vw, 760px);
  display: flex; align-items: center;
  padding-top: 186px;
}
.heros--photos > .conteneur { width: 100%; }
/* Sur les pages intérieures, le contenu tient dans une colonne centrée, donc
   il commence juste sous le médaillon — qui déborde de la barre. Le fil et le
   titre passaient dessous. Le dégagement laisse vingt-quatre pixels sous le
   médaillon, relevés dans le navigateur à chaque palier plutôt que calculés :
   la barre en flex décale son bas de quelques pixels. */
.heros--page.heros--photos {
  min-height: clamp(300px, 27vw, 400px);
  padding-top: 246px; padding-bottom: 96px;
}
.heros-fond { position: absolute; inset: 0; overflow: hidden; z-index: 0; }

.heros-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 45%;
  opacity: 0; transition: opacity 1.4s ease-in-out;
}
.heros-photo.visible { opacity: 1; }

/* Sur l'accueil, la photo garde sa largeur entière. Recadrée pour remplir un
   bandeau plus haut qu'elle, elle perdait un cinquième de sa largeur sur les
   côtés — la montagne rognée, la joueuse en très gros plan. On la cale donc
   en bas, à sa largeur, et le haut du bandeau reste au bleu du blason,
   derrière la barre de menu. Sur les écrans étroits, le bandeau redevient
   plus haut que large : le recadrage reprend, il n'y a pas d'autre choix. */
@media (min-width: 1121px) {
  .heros--photos:not(.heros--page) .heros-photo {
    inset: auto 0 0 0; height: auto;
    /* Son bord haut se fondrait mal dans le bleu : un trait net en travers
       de la page. Il s'efface sur cent pixels. */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 100px);
    mask-image: linear-gradient(to bottom, transparent 0, #000 100px);
  }
}

/* Le voile : sans lui, aucun texte blanc ne tient sur une photo de terrain.
   C'est le dégradé du blason, en transparence. */
.heros-voile {
  position: absolute; inset: 0;
  background:
    /* Dense à gauche, où se tient le texte ; clair à droite, où la photo
       peut se voir. Sans ce dégradé, aucun texte blanc ne tiendrait. */
    linear-gradient(100deg,
      rgba(6,47,89,.90) 0%, rgba(8,63,115,.74) 40%,
      rgba(11,79,140,.40) 72%, rgba(11,79,140,.18) 100%),
    linear-gradient(to bottom, rgba(6,47,89,.55) 0%, transparent 30%);
}

/* La crête reste au-dessus des photos. */
.heros::after { z-index: 3; }

/* Qui a demandé moins de mouvement voit une photo fixe. */
@media (prefers-reduced-motion: reduce) {
  .heros-photo { transition: none; }
}

/* Héros court, pour les pages intérieures */
.heros--page { padding: 56px 0 96px; }
.heros--page h1 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); }

/* --- Sections ------------------------------------------------------------- */
.section { padding: 68px 0; }
.section--brume { background: var(--brume); }
.section-entete { margin-bottom: 36px; }
.section-entete h2 { letter-spacing: -.01em; }
.section-entete p { color: var(--gris); max-width: 68ch; margin: 0; }

/* --- Grilles et cartes ---------------------------------------------------- */
.grille { display: grid; gap: 24px; }
.grille--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grille--3 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.grille--4 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

/* Même dessin que les tuiles d'accès de l'accueil : c'est ce qui donne au
   site son unité d'une page à l'autre. */
.carte {
  background: var(--blanc); border: 1px solid var(--brume-trait);
  border-radius: 18px; padding: 26px;
  box-shadow: 0 2px 4px rgba(6,47,89,.04), 0 18px 34px rgba(6,47,89,.08);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
a.carte { text-decoration: none; color: inherit; display: block; }
a.carte:hover {
  transform: translateY(-4px); border-color: rgba(14,149,216,.45);
  box-shadow: 0 4px 8px rgba(6,47,89,.05), 0 26px 46px rgba(6,47,89,.15);
}
.carte h3 { margin-bottom: .35em; }
.carte p { color: var(--gris); margin: 0; }

.carte-date {
  font-size: .74rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--cyan-fonce); margin-bottom: .5rem;
}

/* --- Logos des clubs ------------------------------------------------------ */
/* Les logos arrivent en toutes tailles et toutes proportions : on leur réserve
   une boîte fixe et on les y contient, sans jamais les déformer ni les rogner. */
.club-logo {
  height: 64px; margin: -2px 0 16px;
  display: flex; align-items: center; justify-content: flex-start;
}
.club-logo img {
  max-height: 100%; max-width: 160px; width: auto; height: auto;
  object-fit: contain;
}
.club-logo--grand { height: 92px; margin-bottom: 22px; }
.club-logo--grand img { max-width: 220px; }

/* La carte d'un club garde la même hauteur, avec ou sans logo. */
.carte-club { display: flex; flex-direction: column; }

/* Vignette colorée en tête de carte (à la place d'une photo) */
.carte-vignette {
  height: 8px; border-radius: 999px; background: var(--degrade-cyan);
  margin: -4px 0 18px; width: 56px;
}

/* --- Étiquettes ----------------------------------------------------------- */
.etiquette {
  display: inline-block; padding: 5px 13px; border-radius: 999px;
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  background: rgba(14,149,216,.12); color: var(--cyan-fonce);
}
.etiquette--bleu { background: rgba(11,79,140,.1); color: var(--bleu); }
.etiquette--pleine { background: var(--degrade-cyan); color: var(--blanc); }

/* --- Tableaux ------------------------------------------------------------- */
.tableau-boite { overflow-x: auto; border-radius: var(--rayon); border: 1px solid var(--brume-trait); background: var(--blanc); }
table { width: 100%; border-collapse: collapse; font-size: .94rem; }
thead th {
  background: var(--bleu-nuit); color: var(--blanc); text-align: left;
  font-family: var(--titre); font-size: .74rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; padding: 13px 16px; white-space: nowrap;
}
tbody td { padding: 13px 16px; border-top: 1px solid var(--brume-trait); }
tbody tr:hover { background: var(--brume); }
td.chiffre, th.chiffre { text-align: center; font-variant-numeric: tabular-nums; }
.score { font-weight: 700; color: var(--bleu); font-variant-numeric: tabular-nums; }
.a-venir { color: var(--gris); }

/* --- Onglets -------------------------------------------------------------- */
.onglets { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 26px; }
.onglet {
  display: inline-block; text-decoration: none;
  padding: 9px 17px; border-radius: 999px; border: 1px solid var(--brume-trait);
  background: var(--blanc); color: var(--gris); cursor: pointer;
  font-family: var(--titre); font-size: .8rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
.onglet[aria-selected="true"] { background: var(--degrade-blason); color: var(--blanc); border-color: transparent; }

/* Variante posée sur fond bleu (le raccourci de l'accueil) */
.onglet--sombre { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28); color: rgba(255,255,255,.85); }
.onglet--sombre:hover { background: rgba(255,255,255,.2); color: var(--blanc); }
.onglet--sombre[aria-selected="true"] { background: var(--blanc); color: var(--bleu); border-color: transparent; }

/* --- Filtres (championnats, calendriers) ---------------------------------- */
.filtres {
  display: flex; flex-direction: column; gap: 14px;
  background: var(--brume); border: 1px solid var(--brume-trait);
  border-radius: var(--rayon); padding: 20px 22px; margin-bottom: 28px;
}
.filtre-groupe { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filtre-titre {
  font-family: var(--titre); font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gris);
  min-width: 74px;
}

/* Rencontre impliquant un club de la ligue, dans un tableau national */
tbody tr.ligne-aura { background: rgba(14,149,216,.07); }
tbody tr.ligne-aura:hover { background: rgba(14,149,216,.13); }

/* --- Page d'un championnat ------------------------------------------------ */

/* Le sommaire de la page, qui reste sous l'en-tête replié en défilant. */
.sous-nav-page {
  position: sticky; top: 84px; z-index: 40;
  background: rgba(255,255,255,.94); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--brume-trait);
}
.sous-nav-page .conteneur {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; min-height: 56px;
}
.sous-nav-liens {
  display: flex; gap: 4px; min-width: 0;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.sous-nav-liens::-webkit-scrollbar { display: none; }
.sous-nav-liens a { white-space: nowrap; flex: none; }
.sous-nav-liens a {
  padding: 8px 14px; border-radius: 999px; text-decoration: none;
  font-family: var(--titre); font-size: .76rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--bleu-nuit);
}
.sous-nav-liens a:hover { background: var(--brume); color: var(--cyan-fonce); }
.sous-nav-chiffres { display: flex; gap: 18px; font-size: .84rem; color: var(--gris); }
.sous-nav-chiffres strong { color: var(--bleu-nuit); font-family: var(--titre); }

/* Les ancres ne doivent pas se cacher sous l'en-tête et le sommaire. */
/* La barre réduite fait 68 px : les ancres se calent en dessous. */
#classement, #matchs, #buteurs, #prochaine-journee { scroll-margin-top: 150px; }
[id] { scroll-margin-top: 96px; }

/* Classement à gauche, les buteurs à droite : les joueurs dès le premier écran. */
.championnat-tete { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(260px, 1fr); gap: 32px; align-items: start; }

.podium {
  background: var(--degrade-blason); color: var(--blanc);
  border-radius: var(--rayon); padding: 24px 24px 20px;
  box-shadow: var(--ombre-haut); position: sticky; top: 160px;
}
.podium-liste { list-style: none; margin: 6px 0 14px; padding: 0; }
.podium-liste li {
  display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 12px;
  padding: 11px 0; border-top: 1px solid rgba(255,255,255,.14);
}
.podium-liste li:first-child { border-top: 0; }
.podium-rang { font-family: var(--titre); font-weight: 800; color: var(--cyan-clair); text-align: center; }
.podium-joueur { font-weight: 600; line-height: 1.25; }
.podium-joueur small { display: block; font-weight: 400; color: rgba(255,255,255,.62); font-size: .78rem; }
.podium-buts { font-family: var(--titre); font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.podium-liste li:first-child .podium-buts { color: var(--cyan-clair); }
.podium-lien { color: var(--cyan-clair); font-size: .88rem; text-decoration: none; font-weight: 600; }
.podium-lien:hover { color: var(--blanc); }
.podium-vide { color: rgba(255,255,255,.7); margin: 0; }

/* Les journées, en colonnes quand la place le permet */
.journees { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px; margin-top: 18px; align-items: start; }
.poule-titre { margin: 34px 0 0; }
.journees .journee { margin: 0; }

/* Une rencontre : les deux équipes, le score, et qui a marqué */
.match {
  display: grid; grid-template-columns: 62px 1fr auto; gap: 14px;
  padding: 14px 16px; border-top: 1px solid var(--brume-trait); align-items: start;
}
.journee-entete + .match { border-top: 0; }
.match-heure { font-size: .74rem; color: var(--gris); line-height: 1.35; }
.match-heure span { color: var(--bleu-nuit); font-weight: 600; }
.match-equipe {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  color: var(--encre);
}
.match-equipe + .match-equipe, .match-buteurs + .match-equipe { margin-top: 4px; }
.match-equipe.gagne { color: var(--bleu-nuit); font-weight: 700; }
.match-buts {
  font-family: var(--titre); font-weight: 800; font-size: 1.1rem;
  font-variant-numeric: tabular-nums; color: #A9BACB;
}
.match-equipe.gagne .match-buts { color: var(--bleu); }
.match-buteurs {
  font-size: .78rem; line-height: 1.4; color: var(--cyan-fonce);
  padding: 1px 0 2px 12px; border-left: 2px solid rgba(14,149,216,.25); margin: 2px 0 4px;
}
.match-lieu { font-size: .74rem; color: var(--gris); margin-top: 6px; }
.match-etat { font-size: .8rem; color: var(--gris); white-space: nowrap; padding-top: 2px; }
.match-etat--a-venir { color: var(--bleu); font-weight: 600; }
.match-etat--en-cours { color: var(--cyan-fonce); font-weight: 700; }
.match--nous { background: rgba(14,149,216,.06); }
.match--en-cours { box-shadow: inset 3px 0 0 var(--cyan); }

/* Le classement complet des buteurs */
.classement-buteurs { list-style: none; padding: 0; margin: 22px 0 0; max-width: 900px; }
.classement-buteurs li {
  display: grid; grid-template-columns: 44px minmax(0, 2.2fr) minmax(80px, 3fr) 76px 76px;
  align-items: center; gap: 14px; padding: 12px 14px;
  border-top: 1px solid var(--brume-trait);
}
.classement-buteurs li:first-child { border-top: 0; }
.cb-rang { font-family: var(--titre); font-weight: 800; color: var(--gris); text-align: center; }
.cb-joueur strong { display: block; color: var(--bleu-nuit); font-weight: 700; }
.cb-joueur small { color: var(--gris); font-size: .8rem; }
.cb-barre { height: 8px; background: var(--brume); border-radius: 999px; overflow: hidden; }
.cb-barre span { display: block; height: 100%; background: var(--degrade-cyan); border-radius: 999px; }
.cb-buts { font-family: var(--titre); font-weight: 800; font-size: 1.15rem; color: var(--bleu); text-align: right; white-space: nowrap; }
.cb-buts small { font-size: .7rem; font-weight: 600; color: var(--gris); }
.cb-matchs { font-size: .8rem; color: var(--gris); text-align: right; white-space: nowrap; }

/* Le podium, trois marches */
.classement-buteurs li.podium-1, .classement-buteurs li.podium-2, .classement-buteurs li.podium-3 {
  border-radius: var(--rayon-sm); border-top-color: transparent; margin-bottom: 4px;
}
.classement-buteurs li.podium-1 { background: linear-gradient(90deg, rgba(55,184,242,.22), rgba(55,184,242,.04)); }
.classement-buteurs li.podium-2 { background: linear-gradient(90deg, rgba(55,184,242,.14), rgba(55,184,242,.03)); }
.classement-buteurs li.podium-3 { background: linear-gradient(90deg, rgba(55,184,242,.09), transparent); }
.classement-buteurs li.podium-1 .cb-rang,
.classement-buteurs li.podium-2 .cb-rang,
.classement-buteurs li.podium-3 .cb-rang { color: var(--cyan-fonce); font-size: 1.1rem; }

@media (max-width: 900px) {
  .championnat-tete { grid-template-columns: 1fr; }
  .podium { position: static; }
  .journees { grid-template-columns: 1fr; }
  .classement-buteurs li { grid-template-columns: 34px 1fr 62px; }
  .cb-barre, .cb-matchs { display: none; }
  .sous-nav-chiffres { display: none; }
}

/* --- Calendrier régional, journée par journée ------------------------------ */
.journee {
  background: var(--blanc); border: 1px solid var(--brume-trait);
  border-radius: var(--rayon); overflow: hidden; margin-bottom: 14px;
}
.journee-entete {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 11px 16px; background: var(--brume); border-bottom: 1px solid var(--brume-trait);
  font-family: var(--titre); font-size: .78rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--bleu-nuit);
}
.journee-date { font-weight: 500; letter-spacing: .06em; color: var(--gris); }

/* La journée en cours, celle qu'on cherche du regard */
.journee--prochaine { border-color: var(--cyan); box-shadow: var(--ombre); }
.journee--prochaine .journee-entete {
  background: var(--degrade-blason); color: var(--blanc); border-bottom-color: transparent;
}
.journee--prochaine .journee-date { color: var(--cyan-clair); }

.journee table tbody tr:first-child td { border-top: 0; }

/* --- Bandeau « nos équipes », sur un championnat national ------------------ */
.nos-equipes {
  background: var(--brume); border: 1px solid var(--brume-trait);
  border-radius: var(--rayon); padding: 24px 26px; margin-bottom: 40px;
}
.nos-equipes .carte { box-shadow: none; }

/* Titre de tableau avec ses filtres à droite */
.entete-tableau {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 14px;
}

/* --- Les résultats, en tête de l'accueil ----------------------------------- */
.section--resultats { padding-top: 56px; }

.resultats-entete {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 10px;
}
.resultats-entete h2 { margin-bottom: .2em; }

/* Le repère du lundi matin : quelque chose a bougé depuis la dernière visite */
.drapeau-frais {
  display: flex; align-items: center; gap: 10px; margin: 6px 0 0;
  padding: 9px 18px; border-radius: 999px;
  background: rgba(14,149,216,.1); color: var(--cyan-fonce);
  font-family: var(--titre); font-size: .74rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.drapeau-frais .point { width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); flex-shrink: 0; }

.resultats-grille { margin-top: 14px; }

.resultat {
  display: block; text-decoration: none; color: inherit; position: relative; overflow: hidden;
  background: var(--blanc); border: 1px solid var(--brume-trait);
  border-radius: var(--rayon); padding: 18px 22px; box-shadow: var(--ombre);
  transition: transform .15s, box-shadow .15s;
}
.resultat:hover { transform: translateY(-3px); box-shadow: var(--ombre-haut); }

.resultat-entete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.resultat-competition {
  font-family: var(--titre); font-size: .7rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--cyan-fonce);
}
.resultat-date { font-size: .74rem; color: var(--gris); white-space: nowrap; }

.resultat-corps { margin-top: 12px; }
.resultat-equipe {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 5px 0; color: var(--gris);
}
.resultat-nom { line-height: 1.3; }
.resultat-buts {
  font-family: var(--titre); font-size: 1.32rem; font-weight: 800;
  font-variant-numeric: tabular-nums; color: #A9BACB; flex-shrink: 0;
}
/* Le gagnant se lit sans effort : c'est le seul en bleu et en gras. */
.resultat-equipe.gagne { color: var(--bleu-nuit); font-weight: 700; }
.resultat-equipe.gagne .resultat-buts { color: var(--bleu); }

.resultat-buteurs {
  font-size: .76rem; line-height: 1.4; color: var(--cyan-fonce);
  padding-left: 10px; border-left: 2px solid rgba(14,149,216,.25); margin: 0 0 4px;
}

.resultat-marque {
  display: inline-block; margin-top: 13px; padding: 4px 12px; border-radius: 999px;
  background: var(--degrade-cyan); color: var(--blanc);
  font-family: var(--titre); font-size: .67rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.resultat-marque--pale { background: var(--brume); color: var(--gris); }

/* Une rencontre pas encore terminée : heure, « en cours », ou score attendu */
.resultat-marque--a-venir  { background: var(--brume); color: var(--bleu); }
.resultat-marque--attendu  { background: var(--brume); color: var(--gris); }
.resultat-marque--en-cours { background: var(--degrade-cyan); color: var(--blanc); }
.resultat-marque .pastille {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--blanc); margin-right: 7px; vertical-align: middle;
}
@media (prefers-reduced-motion: no-preference) {
  .resultat-marque .pastille { animation: battement 1.6s ease-in-out infinite; }
}

/* Sans score, la carte reste plus discrète que celles qui en portent un. */
.resultat--attente .resultat-equipe { color: var(--encre); }
.resultat--attente { border-style: dashed; }
.resultat--en-cours { border-color: var(--cyan); border-style: solid; }

/* Une victoire d'un club d'ici dans un championnat national */
.resultat--victoire { border-color: var(--cyan); }
.resultat--victoire::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--degrade-cyan);
}
.resultat--nul .resultat-equipe { color: var(--encre); }

/* --- L'animation du lundi -------------------------------------------------
   Elle ne se joue qu'une fois, quand le relevé est plus récent que celui vu
   à la dernière visite, et jamais pour qui a demandé moins de mouvement. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes monter { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  @keyframes eclat  { 0% { transform: scale(1); } 35% { transform: scale(1.22); color: var(--cyan); } 100% { transform: scale(1); } }
  @keyframes balayage { to { transform: translateX(130%); } }
  @keyframes battement {
    0%, 100% { box-shadow: 0 0 0 0 rgba(14,149,216,.55); }
    50%      { box-shadow: 0 0 0 8px rgba(14,149,216,0); }
  }

  .frais .resultat {
    animation: monter .55s cubic-bezier(.2,.7,.3,1) backwards;
    animation-delay: calc(var(--i, 0) * 70ms);
  }
  .frais .resultat--victoire .resultat-equipe.gagne .resultat-buts {
    animation: eclat .8s ease-out backwards;
    animation-delay: calc(var(--i, 0) * 70ms + .38s);
  }
  /* Un reflet balaie la carte gagnante, une fois. */
  .frais .resultat--victoire::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(105deg, transparent 32%, rgba(55,184,242,.24) 50%, transparent 68%);
    transform: translateX(-130%);
    animation: balayage 1.1s ease-out backwards;
    animation-delay: calc(var(--i, 0) * 70ms + .32s);
  }
  .drapeau-frais .point { animation: battement 1.9s ease-in-out infinite; }
}

/* --- Le raccourci vers les résultats, sur l'accueil ------------------------ */
.hub { background: var(--degrade-blason); color: var(--blanc); border-radius: var(--rayon); padding: 34px; }
.hub h2, .hub h3 { color: var(--blanc); }
.hub .surtitre { color: var(--cyan-clair); }
.hub-colonnes { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.hub-liste { list-style: none; padding: 0; margin: 0; }
.hub-liste li { border-top: 1px solid rgba(255,255,255,.14); }
.hub-liste li:first-child { border-top: 0; }
.hub-liste a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 11px 2px; color: var(--blanc); text-decoration: none;
}
.hub-liste a:hover { color: var(--cyan-clair); }
.hub-liste small { color: rgba(255,255,255,.6); white-space: nowrap; font-size: .76rem; }
.hub-vide { color: rgba(255,255,255,.7); }

/* --- Fil d'Ariane --------------------------------------------------------- */
.fil { font-size: .84rem; color: rgba(255,255,255,.7); margin-bottom: 14px; }
.fil a { color: rgba(255,255,255,.85); text-decoration: none; }
.fil a:hover { color: var(--cyan-clair); }

/* --- Bandeau d'appel ------------------------------------------------------ */
.appel {
  background: var(--degrade-cyan); color: var(--blanc);
  border-radius: var(--rayon); padding: 44px; text-align: center;
}
.appel h2 { color: var(--blanc); }
.appel p { color: rgba(255,255,255,.9); max-width: 60ch; margin: 0 auto 24px; }

/* --- Note de contenu provisoire ------------------------------------------ */
.note {
  border-left: 4px solid var(--cyan); background: rgba(14,149,216,.07);
  padding: 16px 20px; border-radius: 0 var(--rayon-sm) var(--rayon-sm) 0;
  color: var(--bleu-fonce); font-size: .92rem; margin: 0 0 28px;
}

/* --- Pied de page --------------------------------------------------------- */
.pied { background: var(--bleu-nuit); color: rgba(255,255,255,.72); padding: 60px 0 0; margin-top: 0; }
.pied a { color: rgba(255,255,255,.72); text-decoration: none; }
.pied a:hover { color: var(--cyan-clair); }
.pied h4 {
  color: var(--blanc); font-size: .78rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: 1.2em;
}
.pied-grille { display: grid; gap: 36px; grid-template-columns: 1.4fr 1fr 1fr 1fr; }
.pied ul { list-style: none; padding: 0; margin: 0; }
.pied li { margin-bottom: 9px; }
/* Le logo du pied : l'emblème en couleur — ses bleus clairs tiennent sur le
   fond nuit — et le nom composé en blanc. La version toute blanche du logo
   perdait le relief des montagnes, qui n'y sont dessinées que par des vides. */
.pied-marque {
  display: inline-flex; align-items: center; gap: 14px;
  text-decoration: none; margin-bottom: 20px;
}
.pied-marque img { height: 86px; width: auto; display: block; }
.pied-mots { display: block; line-height: 1.06; }
.pied-region {
  display: block; font-family: var(--titre); font-weight: 700; font-size: 11.5px;
  letter-spacing: .15em; text-transform: uppercase; color: var(--cyan-clair);
  white-space: nowrap;
}
.pied-hockey {
  display: block; font-family: var(--titre); font-weight: 800; font-size: 30px;
  letter-spacing: .005em; text-transform: uppercase; color: var(--blanc);
}
.pied-date {
  display: flex; align-items: center; gap: 7px; margin-top: 3px;
  font-family: var(--titre); font-weight: 700; font-size: 9px;
  letter-spacing: .28em; text-transform: uppercase; color: rgba(255,255,255,.55);
}
.pied-date::before, .pied-date::after {
  content: ''; flex: 1; height: 2px; border-radius: 2px;
  background: currentColor; opacity: .7;
}
.pied-mot { max-width: 34ch; margin: 0 0 16px; }
.pied-reseaux { display: flex; gap: 16px; margin: 0; }
/* Les réseaux : le logo suffit, tout le monde le reconnaît. Le nom reste
   accessible par aria-label pour qui n'affiche pas les images. */
.pied-reseaux a.reseau {
  display: grid; place-items: center; width: 42px; height: 42px;
  border: 1px solid rgba(255,255,255,.28); border-radius: 50%;
  color: rgba(255,255,255,.86);
  transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.pied-reseaux a.reseau svg { width: 21px; height: 21px; display: block; }
.pied-reseaux a.reseau:hover {
  background: var(--blanc); color: var(--bleu-nuit);
  border-color: transparent; transform: translateY(-2px);
}
.pied-bas {
  border-top: 1px solid rgba(255,255,255,.12); margin-top: 48px; padding: 20px 0;
  font-size: .84rem; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}

/* --- Responsive ----------------------------------------------------------- */
/* Entre 1120 et 1360 px, tout tient encore sur une ligne, mais de justesse :
   le calage et le menu se resserrent plutôt que de se chevaucher. */
@media (max-width: 1360px) {
  .entete .conteneur { gap: 18px; min-height: 124px; }
  .marque-embleme { height: 166px; }
  .marque { margin-bottom: -64px; margin-left: 32px; margin-top: 18px; }
  .nav-lien { padding: 10px 9px; font-size: .71rem; letter-spacing: .05em; }
  .entete-action { padding: 10px 16px; font-size: .68rem; }
  .heros--photos { padding-top: 196px; }
  .heros--page.heros--photos { padding-top: 210px; }
}

@media (max-width: 1120px) {
  .bouton-menu { display: block; }
  .nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--blanc); padding: 12px; max-height: 75vh; overflow-y: auto;
    box-shadow: var(--ombre-haut); border-top: 1px solid var(--brume-trait);
  }
  .nav.ouvert { display: flex; }
  .marque-embleme { height: 140px; }
  .marque { margin-bottom: -54px; margin-left: 24px; margin-top: 14px; }
  .heros--page.heros--photos { padding-top: 190px; }
  .marque-region { font-size: 10.5px; }
  .marque-hockey { font-size: 26px; }
  .marque-date { font-size: 8.5px; }
  .entete-action { display: none; }
  .nav { margin-top: 0; }
  .nav-lien { color: var(--bleu-nuit); text-shadow: none; }
  .sous-nav {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; background: rgba(255,255,255,.05); padding: 4px; margin: 0 0 8px;
  }
  .sous-nav { background: var(--brume); }
  .pied-grille { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .pied-grille { grid-template-columns: 1fr; }
  .marque-embleme { height: 114px; }
  .marque { margin-bottom: -44px; margin-left: 16px; margin-top: 10px; }
  .heros--page.heros--photos { padding-top: 170px; }
  .marque-region { font-size: 8.5px; letter-spacing: .12em; }
  .marque-hockey { font-size: 21px; }
  .marque-date { display: none; }
  .heros { padding: 56px 0 100px; }
  .heros--photos { padding-top: 186px; }
}

/* --- Formulaires ---------------------------------------------------------- */
.champ { margin-bottom: 18px; }
.champ label {
  display: block; margin-bottom: 6px;
  font-family: var(--titre); font-size: .78rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--bleu-nuit);
}
.champ input, .champ textarea, .champ select {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--brume-trait); border-radius: var(--rayon-sm);
  font-family: var(--texte); font-size: 1rem; color: var(--encre); background: var(--blanc);
}
.champ input:focus, .champ textarea:focus, .champ select:focus {
  outline: 0; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(14,149,216,.18);
}
.champ textarea { min-height: 150px; resize: vertical; }

/* Piège à robots : hors de l'écran, jamais lu par un lecteur d'écran */
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Messages de formulaire ----------------------------------------------- */
.message { border-radius: var(--rayon); padding: 18px 22px; margin-bottom: 26px; }
.message--succes { background: rgba(14,149,216,.1); border-left: 4px solid var(--cyan); color: var(--bleu-nuit); }
.message--souci  { background: #FDECEC; border-left: 4px solid #C0392B; color: #7B241C; }

/* --- Liste de documents --------------------------------------------------- */
.documents { list-style: none; padding: 0; margin: 0; }
.documents li { border-top: 1px solid var(--brume-trait); }
.documents li:last-child { border-bottom: 1px solid var(--brume-trait); }
.documents a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 4px; text-decoration: none; color: var(--encre);
}
.documents a:hover { color: var(--bleu); }
.documents .doc-type {
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gris);
}

/* --- Texte long ----------------------------------------------------------- */
.texte { max-width: 760px; }
.texte h2 { margin-top: 2em; }
.texte p, .texte li { color: #2A3B4C; }

/* --- Accès rapides, bloc territoire et chiffres (proposition 3) ----------- */
/* La rangée de portes d'entrée remonte sur la bannière, comme la carte du
   logo : c'est ce chevauchement qui fait la signature de la maquette. */
.acces { position: relative; z-index: 4; margin-top: -74px; padding-bottom: 10px; }
/* Autant de colonnes que de tuiles : figée à six, la grille laissait la place
   d'une septième et la rangée penchait à gauche. */
.acces-rangee {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  grid-auto-flow: column;
}
.porte {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 14px; padding: 24px 12px 20px; background: var(--blanc);
  border: 1px solid var(--brume-trait); border-radius: 18px;
  box-shadow: 0 2px 4px rgba(6,47,89,.04), 0 18px 34px rgba(6,47,89,.10);
  text-decoration: none; color: var(--bleu-nuit);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.porte:hover {
  transform: translateY(-4px); border-color: rgba(14,149,216,.45);
  box-shadow: 0 4px 8px rgba(6,47,89,.05), 0 26px 46px rgba(6,47,89,.16);
}
.porte-icone {
  width: 52px; height: 52px; padding: 13px; border-radius: 15px;
  background: linear-gradient(140deg, rgba(55,184,242,.16), rgba(14,149,216,.08));
  color: var(--cyan-fonce); transition: background .18s ease, color .18s ease;
}
.porte:hover .porte-icone { background: var(--degrade-cyan); color: var(--blanc); }
.porte strong {
  font-family: var(--titre); font-size: .78rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
}

.territoire-grille {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.territoire h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
.titre-deux-tons { text-transform: uppercase; letter-spacing: -.005em; }
.titre-deux-tons em { font-style: normal; color: var(--cyan-fonce); }
.territoire p { color: var(--gris); font-size: 1.04rem; }
/* La photo est découpée au coup de pinceau, comme sur la maquette. */
.territoire-image img {
  width: 100%; height: clamp(260px, 32vw, 420px); object-fit: cover;
  -webkit-mask-image: var(--pinceau); mask-image: var(--pinceau);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.bouton--contour { border-color: var(--brume-trait); color: var(--bleu); background: var(--blanc); }
.bouton--contour:hover { border-color: var(--cyan); }

.chiffres { background: var(--degrade-blason); color: var(--blanc); padding: 44px 0; }

/* La bande des chiffres reprend les montagnes de la maquette. Le panorama
   est tiré du fond de la photo d'accueil — déjà flou dans l'original, ce qui
   tombe bien : c'est une matière, pas un sujet. Le dégradé du blason passe
   par-dessus, assez dense à gauche pour que les nombres tiennent. */
.chiffres--photo { position: relative; overflow: hidden; padding: 56px 0; }
.chiffres-fond {
  position: absolute; inset: 0; z-index: 0;
  background: url('../img/chiffres-montagnes.jpg') center 55% / cover no-repeat;
}
.chiffres-fond::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg,
    rgba(6,47,89,.82) 0%, rgba(8,63,115,.72) 48%, rgba(11,79,140,.60) 100%);
}
.chiffres--photo > .conteneur { position: relative; z-index: 1; }
/* Sur la neige, le cyan clair des libellés tombe à deux contre un : illisible.
   Ici seulement, ils passent au blanc. Et comme le voile est assez clair pour
   qu'on voie les crêtes, chaque signe porte son ombre : c'est elle qui tient
   la lecture au-dessus des névés, là où le fond remonte. */
.chiffres--photo .chiffre span { color: rgba(255,255,255,.96); }
.chiffres--photo .chiffre strong,
.chiffres--photo .chiffre span {
  text-shadow: 0 1px 3px rgba(6,47,89,.55), 0 2px 18px rgba(6,47,89,.65);
}
.chiffres--photo .chiffre + .chiffre { border-left-color: rgba(255,255,255,.28); }

.chiffres-rangee {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center;
}
.chiffre strong {
  display: block; font-family: var(--titre); font-weight: 800;
  font-size: clamp(2.1rem, 4vw, 3rem); line-height: 1; color: var(--blanc);
}
.chiffre span {
  display: block; margin-top: 8px; font-family: var(--titre);
  font-size: .72rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--cyan-clair);
}
.chiffre + .chiffre { border-left: 1px solid rgba(255,255,255,.16); }

@media (max-width: 1000px) {
  .acces-rangee { grid-template-columns: repeat(3, 1fr); grid-auto-flow: row; }
  .territoire-grille { grid-template-columns: 1fr; }
  .chiffres-rangee { grid-template-columns: repeat(2, 1fr); gap: 30px 12px; }
  .chiffre:nth-child(3) { border-left: 0; }
}
@media (max-width: 620px) {
  .acces { margin-top: -28px; }
  .acces-rangee { grid-template-columns: repeat(3, 1fr); gap: 10px; grid-auto-flow: row; }
  .porte { padding: 16px 8px 14px; gap: 10px; border-radius: 15px; }
  .porte-icone { width: 42px; height: 42px; padding: 10px; border-radius: 13px; }
  .porte strong { font-size: .68rem; letter-spacing: .06em; }
}

/* --- L'actualité à la une -------------------------------------------------- */
.une {
  display: grid; grid-template-columns: 1.15fr 1fr; align-items: stretch;
  background: var(--blanc); border: 1px solid var(--bord, var(--brume-trait));
  border-radius: 20px; overflow: hidden; text-decoration: none; color: inherit;
  box-shadow: 0 2px 4px rgba(6,47,89,.04), 0 22px 44px rgba(6,47,89,.10);
  transition: transform .18s ease, box-shadow .18s ease;
}
.une:hover { transform: translateY(-3px); box-shadow: 0 4px 8px rgba(6,47,89,.06), 0 30px 56px rgba(6,47,89,.16); }
.une-image { position: relative; display: block; min-height: 300px; }
.une-image img { width: 100%; height: 100%; object-fit: cover; }
.une-marque {
  position: absolute; left: 18px; top: 18px;
  font-family: var(--titre); font-size: .68rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--blanc);
  background: var(--degrade-cyan); padding: 8px 15px; border-radius: 999px;
  box-shadow: 0 6px 18px rgba(6,47,89,.3);
}
.une-dire { display: flex; flex-direction: column; gap: 12px; padding: clamp(24px,3vw,38px); }
.une-haut { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.une-haut .carte-date { margin: 0; }
.une h2, .une h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin: 0; }
.une p { margin: 0; color: var(--gris); font-size: 1.04rem; }
.une-lire {
  margin-top: auto; padding-top: 8px;
  font-family: var(--titre); font-size: .8rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--cyan-fonce);
}
.une:hover .une-lire { color: var(--bleu); }

.titre-suite {
  margin: clamp(34px,5vw,52px) 0 18px;
  font-family: var(--titre); font-size: .74rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gris);
}
.actus-suite {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
}

@media (max-width: 820px) {
  .une { grid-template-columns: 1fr; }
  .une-image { min-height: 200px; max-height: 260px; }
}

/* --- Le jeton : un lien qui a l'air d'un bouton --------------------------- */
/* Un lien souligné dans un tableau attire l'œil plus que la rencontre
   elle-même. On le pose sur une pastille discrète, qui s'allume au survol. */
.jeton-lien {
  display: inline-flex; flex-direction: column; gap: 2px;
  padding: 7px 14px; border-radius: 999px;
  background: var(--brume); border: 1px solid var(--brume-trait);
  color: var(--bleu-nuit); text-decoration: none;
  font-family: var(--titre); font-size: .76rem; font-weight: 700;
  letter-spacing: .02em; line-height: 1.2;
  transition: background .15s, border-color .15s, color .15s, transform .15s;
}
.jeton-lien small {
  font-family: var(--texte); font-size: .68rem; font-weight: 400;
  letter-spacing: 0; color: var(--gris);
}
.jeton-lien:hover {
  background: var(--degrade-cyan); border-color: transparent;
  color: var(--blanc); transform: translateY(-1px);
}
.jeton-lien:hover small { color: rgba(255,255,255,.85); }

/* --- Les échéances de la saison -------------------------------------------- */
/* Une date qui compte se lit d'un coup d'œil : ce qui est passé s'efface,
   ce qui arrive se signale. */
.echeances { display: grid; gap: 14px; }
.echeance {
  display: grid; grid-template-columns: 220px 1fr; gap: 26px; align-items: start;
  background: var(--blanc); border: 1px solid var(--brume-trait);
  border-radius: var(--rayon); padding: 24px 26px;
}
.echeance-date { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.echeance-jour {
  font-family: var(--titre); font-weight: 700; font-size: 1.02rem; color: var(--bleu);
  line-height: 1.3;
}
.echeance-corps h3 { font-size: 1.06rem; margin: 0 0 8px; }
.echeance-corps p { margin: 0; color: var(--gris); font-size: .95rem; max-width: 68ch; }
.echeance-qui {
  margin-top: 10px !important; font-size: .8rem !important;
  text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
  color: var(--cyan-fonce) !important;
}
.echeance.est-passee { opacity: .55; background: var(--brume); }
.echeance.est-proche { border-color: var(--cyan); box-shadow: 0 8px 26px rgba(11,142,211,.12); }

/* Une note qui avertit, plutôt qu'une note qui informe. */
.note--alerte {
  border-left-color: #C0392B; background: rgba(192,57,43,.06); color: #7B241C;
}

@media (max-width: 760px) {
  .echeance { grid-template-columns: 1fr; gap: 12px; padding: 20px; }
  .echeance-date { flex-direction: row; align-items: center; gap: 12px; flex-wrap: wrap; }
}

/* Des montants qui s'alignent, sans la lourdeur d'un tableau dans une colonne étroite. */
.tarifs { list-style: none; padding: 0; margin: 0; }
.tarifs li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 14px 2px; border-bottom: 1px solid var(--brume-trait);
}
.tarifs li:first-child { border-top: 1px solid var(--brume-trait); }
.tarifs strong {
  font-family: var(--titre); font-size: 1.12rem; color: var(--bleu);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* Les évolutions de règles : une liste qu'on parcourt, pas un pavé. */
.changements { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 14px; }
.changements li {
  border-left: 3px solid var(--brume-trait); padding: 2px 0 2px 18px;
  color: var(--gris); max-width: 70ch; line-height: 1.65;
}
.changements strong { color: var(--bleu); }

/* Depuis un championnat, le chemin du retour reste sous la main pendant tout
   le défilement — le fil d'Ariane, lui, est resté tout en haut sur la photo. */
.sous-nav-retour {
  font-weight: 700; color: var(--cyan-fonce) !important;
  margin-right: 8px; padding-right: 16px !important;
  border-right: 1px solid var(--brume-trait); border-radius: 0 !important;
}
.sous-nav-retour:hover { background: transparent !important; color: var(--bleu) !important; }
.sous-nav-retour span { margin-right: 3px; }
/* Sur un écran étroit, le retour se raccourcit plutôt que de passer sur deux
   lignes et de chasser « Buteurs » hors de l'écran. */
@media (max-width: 620px) {
  .sous-nav-retour { margin-right: 4px; padding-right: 10px !important; }
  .sous-nav-retour .sur-large { display: none; }
}

/* --- Recevoir un tournoi de salle ------------------------------------------ */
/* Un club répond depuis son téléphone, souvent entre deux entraînements :
   des cases larges, peu de texte, et l'état visible d'un coup d'œil. */
.salle-formulaire { margin-top: 34px; display: grid; gap: 26px; }
.salle-jour {
  background: var(--blanc); border: 1px solid var(--brume-trait);
  border-radius: var(--rayon); padding: 24px 26px;
}
.salle-date { font-size: 1.1rem; margin: 0 0 4px; color: var(--bleu); }
.salle-avis {
  margin: 0 0 16px; font-size: .88rem; color: var(--cyan-fonce); font-weight: 600;
}
.salle-tournoi { border-top: 1px solid var(--brume-trait); padding-top: 18px; margin-top: 18px; }
.salle-jour .salle-tournoi:first-of-type { border-top: 0; padding-top: 6px; margin-top: 0; }
.salle-categorie {
  font-family: var(--titre); font-weight: 700; font-size: 1rem; margin: 0 0 12px;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.salle-categorie span {
  font-family: var(--texte); font-weight: 400; font-size: .84rem; color: var(--gris);
}
.salle-choix { display: flex; flex-wrap: wrap; gap: 8px; }
.salle-option {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 9px 15px; border-radius: 999px; font-size: .9rem;
  border: 1px solid var(--brume-trait); background: var(--blanc);
  transition: border-color .15s, background .15s;
}
.salle-option:hover { border-color: var(--cyan); }
.salle-option input { margin: 0; accent-color: var(--cyan-fonce); }
.salle-option.est-choisie { border-color: var(--cyan); background: rgba(14,149,216,.08); font-weight: 600; }
.salle-option.est-validee.est-choisie      { border-color: #1F9D5B; background: rgba(31,157,91,.1); }
.salle-option.est-demande.est-choisie      { border-color: #D99A1F; background: #FFF6E6; }
.salle-option.est-indisponible.est-choisie { border-color: #C0392B; background: rgba(192,57,43,.08); }
.salle-option.est-refus.est-choisie        { border-color: var(--gris); background: var(--brume); }
/* Le champ exigé se signale, sans crier. */
.salle-details em {
  font-style: normal; color: #A33227; font-size: .78rem; display: block;
}
.salle-details label.est-requis input { border-color: #D99A1F; }
.salle-details { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.salle-details label { display: grid; gap: 5px; }
.salle-details span { font-size: .82rem; color: var(--gris); }
.salle-details input {
  padding: 10px 13px; border: 1px solid var(--brume-trait); border-radius: var(--rayon-sm);
  font: inherit; font-size: .92rem; background: var(--blanc); color: var(--encre);
}
.salle-details input:focus { outline: 2px solid var(--cyan); outline-offset: 1px; border-color: var(--cyan); }
.salle-envoi {
  position: sticky; bottom: 0; background: rgba(255,255,255,.95); backdrop-filter: blur(8px);
  border-top: 1px solid var(--brume-trait); padding: 16px 0 calc(16px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.salle-envoi p { margin: 0; font-size: .86rem; color: var(--gris); }
@media (max-width: 620px) {
  .salle-jour { padding: 20px; }
  .salle-details { grid-template-columns: 1fr; }
  .salle-option { width: 100%; }
}

/* --- Le planning de la saison ---------------------------------------------- */
/* Un calendrier comme on l'accroche au mur : on y repère une date, pas une
   ligne dans une liste. */
.salle-planning {
  background: var(--blanc); border: 1px solid var(--brume-trait);
  border-radius: var(--rayon); padding: 24px 26px; margin-top: 30px;
}
.salle-planning h2 { font-size: 1.15rem; margin: 0 0 6px; }
.salle-planning > p { margin: 0 0 20px; color: var(--gris); font-size: .94rem; max-width: 68ch; }

.calendrier { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.calendrier-mois h3 {
  font-size: .82rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--cyan-fonce); margin: 0 0 10px;
}
.calendrier-grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.calendrier-entete {
  text-align: center; font-family: var(--titre); font-size: .68rem; font-weight: 700;
  color: var(--gris); padding-bottom: 4px;
}
.calendrier-case {
  min-height: 42px; border-radius: 7px; background: var(--brume);
  padding: 3px 4px; display: flex; flex-direction: column; gap: 2px;
  font-size: .72rem; color: var(--gris); text-decoration: none;
}
.calendrier-case.est-hors { background: transparent; }
.calendrier-jour { font-family: var(--titre); font-weight: 700; font-size: .7rem; }
a.calendrier-case.est-tournoi {
  background: var(--blanc); border: 1px solid var(--cyan);
  color: var(--bleu); min-height: 58px;
}
a.calendrier-case.est-tournoi:hover { box-shadow: 0 4px 14px rgba(11,142,211,.22); }
.calendrier-pastille {
  display: block; border-radius: 4px; padding: 2px 4px; font-size: .62rem;
  line-height: 1.25; font-weight: 600; text-align: center;
  border: 1px solid transparent; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.calendrier-pastille.est-validee      { background: rgba(31,157,91,.16); color: #147A45; }
.calendrier-pastille.est-demande      { background: #FFF1D9;            color: #9A6207; }
.calendrier-pastille.est-indisponible { background: rgba(192,57,43,.1);  color: #A33227; }
.calendrier-pastille.est-refus        { background: var(--brume);        color: var(--gris); }
.calendrier-pastille.est-muet         { background: var(--brume);        color: var(--bleu); }

.planning-legende {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0 !important;
  padding-top: 16px; border-top: 1px solid var(--brume-trait);
}
.planning-legende .calendrier-pastille { font-size: .72rem; padding: 4px 10px; }
@media (max-width: 620px) {
  .salle-planning { padding: 18px; }
  .calendrier { grid-template-columns: 1fr; }
}

/* Une journée à plusieurs tournois les présente côte à côte sur grand écran :
   on compare les deux d'un coup d'œil au lieu de faire défiler. */
.salle-tournois { display: grid; gap: 0; }
@media (min-width: 920px) {
  .salle-tournois { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 26px; }
  .salle-tournois .salle-tournoi {
    border-top: 0; border-left: 1px solid var(--brume-trait);
    padding: 0 0 0 22px; margin: 0;
  }
  .salle-tournois .salle-tournoi:first-child { border-left: 0; padding-left: 0; }
  .salle-tournois:has(.salle-tournoi + .salle-tournoi) .salle-details {
    grid-template-columns: 1fr;
  }
}


/* --- La carte des départements --------------------------------------------- */
/* La carte est fournie par la ligue, noms compris. On n'y ajoute que les
   pastilles des départements où elle a des clubs, posées en pourcentage pour
   suivre l'image quelle que soit sa taille. */
.territoire-carte { align-self: start; }
.carte-boite { position: relative; line-height: 0; }
.carte-image { width: 100%; height: auto; display: block; }
.carte-pastille {
  position: absolute; transform: translate(-50%, -50%);
  /* Le point relevé est celui du nom, imprimé sur la carte : posée dessus,
     la pastille le cachait. Elle descend donc juste en dessous. En pourcentage
     de la largeur de la carte, pour que l'écart tienne à toutes les tailles —
     une marge en pourcentage se calcule toujours sur la largeur. */
  margin-top: 5%;
  min-width: 34px; height: 34px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--blanc); color: var(--bleu);
  border: 2px solid var(--bleu); text-decoration: none;
  font-family: var(--titre); font-size: .9rem; font-weight: 800; line-height: 1;
  box-shadow: 0 4px 12px rgba(6,47,89,.3);
  transition: transform .18s ease, background .18s ease, color .18s ease;
}
.carte-pastille:hover {
  transform: translate(-50%, -50%) scale(1.16);
  background: var(--cyan); color: var(--blanc); border-color: var(--blanc);
}
.carte-pastille:focus-visible { outline: 3px solid var(--bleu-nuit); outline-offset: 2px; }
.carte-legende { margin-top: 16px !important; font-size: .86rem; color: var(--gris); }

/* --- Le sommaire d'une page longue ----------------------------------------- */
/* Les règles du jeu font quinze écrans. Sans repère, on s'y perd ; replier
   les sections empêcherait d'y chercher un mot. D'où ces liens, qui laissent
   tout visible et tout trouvable. */
.sommaire {
  margin: 30px 0 36px; padding: 18px 22px;
  background: var(--brume); border: 1px solid var(--brume-trait);
  border-radius: var(--rayon-sm);
}
.sommaire ul { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px; }
.sommaire a { color: var(--bleu); text-decoration: none; font-weight: 600; }
.sommaire a:hover { color: var(--cyan-fonce); text-decoration: underline; }
.sommaire a::before { content: '↓ '; color: var(--cyan); }
h2[id] { scroll-margin-top: 130px; }

/* --- Ce qu'un club joue cette saison --------------------------------------- */
/* Relevé dans les rencontres : un championnat par ligne, ses équipes dessous. */
.engage { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 12px; }
.engage li {
  display: grid; gap: 4px;
  padding-left: 14px; border-left: 3px solid var(--brume-trait);
}
.engage li:hover { border-left-color: var(--cyan); }
.engage-equipes { font-size: .86rem; color: var(--gris); }
.etiquette--fine {
  font-size: .64rem; padding: 2px 8px; background: var(--brume);
  color: var(--gris); border: 1px solid var(--brume-trait); justify-self: start;
}

/* --- Rencontres : l'aperçu et le pli --------------------------------------- */
/* Cent vingt rencontres d'un seul tenant, c'était une page à dérouler sans
   fin. On en montre huit de chaque côté ; le reste attend ici. */
.compte {
  display: inline-block; margin-left: 10px; padding: 2px 10px;
  border-radius: 99px; background: var(--brume); border: 1px solid var(--brume-trait);
  font-family: var(--titre); font-size: .72rem; font-weight: 700;
  color: var(--gris); vertical-align: middle; font-variant-numeric: tabular-nums;
}
.doux { color: var(--gris); }
.pli { margin-top: 14px; }
.pli > summary {
  cursor: pointer; display: inline-block; list-style: none;
  padding: 10px 20px; border-radius: 99px;
  border: 1px solid var(--brume-trait); background: var(--blanc);
  font-family: var(--titre); font-size: .78rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--bleu);
}
.pli > summary::-webkit-details-marker { display: none; }
.pli > summary::after { content: ' ▾'; }
.pli[open] > summary::after { content: ' ▴'; }
.pli > summary:hover { border-color: var(--cyan); color: var(--cyan-fonce); }
.pli > summary:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.pli .tableau-boite { margin-top: 14px; }

/* Lu par les lecteurs d'écran, invisible à l'œil. */
.visuellement-cache {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
@media (max-width: 560px) {
  /* La carte rétrécit, pas la pastille : elle pèse plus lourd sur l'image et
     doit descendre un peu plus pour laisser le nom lisible. */
  .carte-pastille { min-width: 30px; height: 30px; font-size: .84rem; margin-top: 6.4%; }
}

/* La ligne sous une tuile dit ce qu'on trouve derrière, avant de cliquer. */
.porte small {
  display: block; margin-top: 5px; font-size: .74rem; line-height: 1.35;
  color: var(--gris); max-width: 22ch;
}
@media (max-width: 900px) { .porte small { display: none; } }

/* Les calendriers et résultats se rejoignent depuis les compétitions : une
   seule porte d'entrée, plutôt que deux entrées voisines dans le menu. */
.acces-calendrier {
  display: grid; grid-template-columns: 1fr auto; gap: 26px; align-items: center;
  background: var(--blanc); border: 1px solid var(--brume-trait);
  border-radius: var(--rayon); padding: 26px 28px; margin-bottom: 28px;
  box-shadow: 0 2px 4px rgba(6,47,89,.03), 0 14px 30px rgba(6,47,89,.06);
}
.acces-calendrier h2 { font-size: 1.3rem; margin: 4px 0 8px; }
.acces-calendrier p:last-of-type { margin: 0; color: var(--gris); max-width: 62ch; }
@media (max-width: 720px) {
  .acces-calendrier { grid-template-columns: 1fr; gap: 18px; padding: 22px; }
}

/* Qui répond pour le club, au bas du formulaire de salle. */
.salle-contact { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--brume-trait); }
.salle-contact h2 { margin: 0 0 6px; font-size: 1.15rem; }
.salle-contact-champs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.salle-contact-champs label { display: flex; flex-direction: column; gap: 6px; font-size: .92rem; font-weight: 600; color: var(--bleu-nuit); }
.salle-contact-champs input { padding: 10px 12px; border: 1px solid var(--brume-trait); border-radius: 10px; font: inherit; font-weight: 400; }
.salle-accord { display: flex; gap: 11px; align-items: flex-start; margin-top: 20px; padding: 14px 16px; background: var(--brume, #F2F6FA); border-radius: 12px; }
.salle-accord input { margin-top: 3px; }
.salle-accord small { display: block; margin-top: 4px; font-weight: 400; color: var(--gris); }
@media (max-width: 720px) { .salle-contact-champs { grid-template-columns: 1fr; } }

/* La page des règlements : fiches, listes et tableau des formats de jeu.
   Tout est préfixé « reg- » : les noms courts sont déjà pris ailleurs. */
.reg-fiche {
  background: var(--blanc); border: 1px solid var(--brume-trait);
  border-radius: var(--rayon); padding: 24px 26px;
  box-shadow: 0 2px 4px rgba(6,47,89,.03), 0 12px 26px rgba(6,47,89,.05);
}
.reg-fiche h3 { margin: 0 0 12px; font-size: 1.12rem; color: var(--bleu-nuit); }
.reg-fiche p { margin: 0 0 12px; }
.reg-fiche p:last-child { margin-bottom: 0; }
.reg-liste { margin: 0 0 12px; padding-left: 19px; }
.reg-liste li { margin-bottom: 9px; }
.reg-table-boite { overflow-x: auto; }
.reg-formats { width: 100%; border-collapse: collapse; font-size: .94rem; min-width: 640px; }
.reg-formats th, .reg-formats td { padding: 13px 14px; text-align: left; vertical-align: top; }
.reg-formats thead th {
  font-size: .76rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gris); border-bottom: 2px solid var(--brume-trait); font-weight: 700;
}
.reg-formats tbody th[scope="row"] {
  color: var(--bleu-nuit); font-weight: 700; font-size: 1.02rem; white-space: nowrap;
}
.reg-formats tbody th small {
  display: block; margin-top: 3px; font-size: .76rem; font-weight: 500;
  color: var(--gris); letter-spacing: 0; text-transform: none;
}
.reg-formats tbody tr:not(.formats-note) > * { border-top: 1px solid var(--brume-trait); }
.reg-formats .formats-note td {
  padding-top: 0; padding-bottom: 16px; color: var(--gris); font-size: .89rem;
}
.salle-aide { display: block; margin-top: 7px; font-size: .82rem; line-height: 1.5; color: var(--gris); }