/* ===== PAGE RÈGLEMENT ===== */
.reglement { padding: calc(160px + var(--banner-h)) 0 100px; background: var(--noir); }
.reglement .head { margin-bottom: 60px; }
.reglement h1 { font-size: clamp(40px, 6vw, 70px); font-style: italic; }
.reg-adresse { color: var(--muted); margin-top: 24px; }
.reg-adresse b { color: var(--blanc); }
.reg-art {
  background: var(--gris);
  border-left: 4px solid var(--orange);
  padding: 30px 34px;
  margin-bottom: 16px;
}
.reg-art h2 {
  font-size: 24px;
  font-style: italic;
  margin-bottom: 14px;
}
.reg-art p { color: var(--muted); margin-bottom: 12px; }
.reg-art p:last-child { margin-bottom: 0; }
.reg-art b { color: var(--blanc); }
.reg-art a { color: var(--orange); }
.reg-art a:hover { text-decoration: underline; }
.reg-art ul { margin: 0 0 12px 20px; color: var(--muted); }
.reg-art li { margin-bottom: 8px; }

@media (max-width: 960px) {
  .reglement { padding: calc(120px + var(--banner-h)) 0 60px; }
  .reg-art { padding: 20px; }
}

/* ===== ACCESSIBILITÉ =====
   Articles rendus atteignables au clavier par `tabindex="0"` en HTML.
   --focus / --focus-halo viennent du bloc ACCESSIBILITÉ de style.css, chargé
   avant cette feuille sur les deux pages. */
.reg-art {
  /* le header est fixe : sans cette marge, l'article tabulé se cale sous lui */
  scroll-margin-top: calc(var(--banner-h) + 110px);
  transition: background .3s, border-color .3s;
}
.reg-art:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--focus-halo);
  /* les articles n'ont pas d'état de survol : on marque le bloc actif par un
     fond légèrement relevé, en plus de l'anneau */
  background: var(--gris2);
}

@media (forced-colors: active) {
  .reg-art:focus-visible { outline: 3px solid Highlight; outline-offset: 3px; }
}

/* ===== PAGE 404 =====
   Même gabarit que la page règlement, mais l'en-tête est centré et dominé
   par le code d'erreur. Tout est porté par `.err404` sur le <main> : ces
   règles ne touchent ni le règlement ni les mentions légales. */
.err404 .head { text-align: center; }

.err404 .err-code {
  font-family: var(--display);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(120px, 26vw, 300px);
  line-height: .8;
  letter-spacing: -.02em;
  color: var(--orange);
  margin-bottom: 4px;
}

/* Chiffres évidés : plus léger qu'un aplat de cette taille.
   Sans `-webkit-text-stroke`, on garde le 404 plein en orange. */
@supports (-webkit-text-stroke: 4px currentColor) {
  .err404 .err-code {
    color: transparent;
    -webkit-text-stroke: clamp(2px, .6vw, 5px) var(--orange);
  }
}

/* Le contraste d'un texte évidé n'est pas garanti : en contraste forcé
   comme en contraste réduit, on revient au chiffre plein. */
@media (forced-colors: active), (prefers-contrast: more) {
  .err404 .err-code { color: var(--orange); -webkit-text-stroke: 0; }
}

.err404 .subtitle { margin-top: 14px; }

@media (max-width: 960px) {
  .err404 .err-code { margin-bottom: 0; }
}