/* La feuille des pages secondaires de la vitrine.
 *
 * ─── POURQUOI UN FICHIER, ICI, ET NON DU STYLE EN LIGNE ─────────────────────
 *
 * `index.html` et `installer.html` portent chacune leur style dans la page, et
 * c'est le bon choix pour elles : la première doit s'afficher avant qu'un
 * président ne referme l'onglet, la seconde se lit sur un téléphone au bord
 * d'un terrain. Une requête de plus y coûterait plus qu'elle ne rapporte.
 *
 * Les trois pages de règles, non. Elles arrivent d'une recherche, elles se
 * ressemblent, et elles se liront l'une après l'autre : la deuxième et la
 * troisième trouvent cette feuille en cache. Surtout, trois copies de cent
 * vingt lignes de style divergeraient à la première retouche, et c'est déjà
 * arrivé dans ce dépôt pour moins que cela.
 *
 * Les couleurs sont celles de la page d'accueil, et depuis le 01/10/2026 elles
 * ne sont plus recopiées : elles viennent de `jetons.css`, la feuille commune
 * aux trois faces, liée par chaque page juste avant celle-ci (UX-07). Une page
 * de règles qui n'aurait pas la même allure ferait douter le lecteur d'être
 * encore chez le même éditeur, au moment précis où il cherche à savoir s'il
 * peut le croire.
 */

@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(./barlow-400.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(./barlow-cond-700.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(./mono-400.woff2) format('woff2')}

:root{
  /* Les couleurs communes aux trois faces (`--bg`, `--solid`, `--ink`, `--mute`,
     `--brass`, `--inkOnBrass`…) viennent de `jetons.css` (UX-07, 01/10/2026),
     aux valeurs de l'application, qui étaient déjà les siennes sous d'autres
     noms. Ici ne restent que les jetons propres à la vitrine. */
  --filet:#1B2740;
  --titre:'Barlow Condensed',ui-sans-serif,system-ui,sans-serif;
  --corps:'Barlow',ui-sans-serif,system-ui,sans-serif;
  --chiffre:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --marge:clamp(20px,5vw,40px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--corps);font-size:17px;line-height:1.6;overflow-x:hidden;
}
@media (min-width:700px){ body{font-size:18px} }

.env{width:min(680px,100%);margin:0 auto;padding:0 var(--marge)}

.evite{position:absolute;left:-9999px;top:0;background:var(--brass);color:var(--inkOnBrass);
  padding:10px 16px;z-index:9}
.evite:focus{left:8px;top:8px}

header{padding:26px 0 8px}
.marque img{display:block;width:150px;height:auto}

h1{
  font-family:var(--titre);font-weight:700;line-height:1.04;
  font-size:clamp(32px,7.5vw,48px);letter-spacing:-.01em;
  margin:18px 0 0;text-wrap:balance;
}
.chapeau{color:var(--mute);margin:14px 0 0;max-width:48ch}

h2{font-family:var(--titre);font-weight:700;font-size:clamp(22px,5vw,28px);
   line-height:1.12;margin:38px 0 8px;text-wrap:balance}
h3{font-family:var(--titre);font-weight:700;font-size:clamp(17px,3.6vw,20px);
   line-height:1.2;margin:24px 0 6px;color:var(--brass)}
p{margin:0 0 14px}
a{color:var(--brass)}
a:hover{color:#E3C88A}

.etiq{font-family:var(--titre);font-weight:700;text-transform:uppercase;
      letter-spacing:.16em;font-size:12px;color:var(--mute);margin:0}

ul,ol{margin:0 0 14px;padding-left:1.15em}
li{margin:0 0 6px}

/* ─── Le bloc qui cite, et qui ne se confond pas avec le texte ───
   Sur ces pages, la moitié du contenu est un EXEMPLE : un message de
   convocation, une ligne de règlement. Le donner dans la même fonte que le
   commentaire qui l'explique ferait lire l'un pour l'autre. */
.bloc{background:var(--solid);border:1px solid var(--filet);border-radius:14px;
  padding:16px 18px;margin:0 0 18px}
pre.bloc{font-family:var(--chiffre);font-size:14.5px;line-height:1.6;
  white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ink)}
.bloc .etiq{display:block;margin:0 0 8px}

/* ─── LE TABLEAU TIENT SUR UN TÉLÉPHONE, ET IL NE LE FAISAIT PAS ────────
   Le commentaire disait déjà « il doit tenir sur un téléphone sans que personne
   n'ait à le faire glisser ». Mesuré le 16/09/2026 à 390 px : le tableau de la
   mixité faisait 556 pixels dans une colonne de 350, celui des vacances 450.
   Et `body` porte `overflow-x:hidden` : ce qui dépassait n'était pas même
   atteignable en glissant, il était COUPÉ. Un président qui ouvrait la page de
   l'article 155 sur son téléphone voyait la colonne « Plafond de surclassées »
   se perdre hors de l'écran, c'est-à-dire le chiffre pour lequel il venait.

   LA CAUSE TIENT EN UN MOT : `white-space:nowrap` sur la première colonne.
   « Championnats régionaux seniors F, Coupe LAuRAFoot Féminine » tenait alors
   sur une seule ligne, et poussait le reste dehors. Sur un écran large le
   `nowrap` sert : il empêche « U10 à U13 » de se casser en deux. Sous 560 px il
   ne sert plus à rien qu'à crever la page, et il part.

   LES MARGES INTÉRIEURES PARTENT AVEC LUI : dix pixels de chaque côté de trois
   colonnes, c'est soixante pixels sur trois cent cinquante, un sixième de la
   largeur dépensé en vide entre des mots qui ont besoin de place. */
.grille{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:.95em}
.grille th,.grille td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--filet);
  vertical-align:top}
.grille th{font-family:var(--titre);font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;font-size:12px;color:var(--mute)}
.grille td:first-child{color:var(--brass);white-space:nowrap}
@media (max-width:560px){
  .grille{font-size:.92em}
  .grille th,.grille td{padding:9px 12px 9px 0}
  .grille th:last-child,.grille td:last-child{padding-right:0}
  .grille td:first-child{white-space:normal}
}

.note{color:var(--mute);font-size:.94em}

/* ─── L'avertissement du district ───
   Il revient sur les trois pages, et c'est la phrase la plus importante de
   toutes : ce qui suit n'est vrai que dans certains districts. La poser en
   encadré plutôt qu'en note de bas de page, parce qu'une note de bas de page
   ne se lit pas. */
.district{border-left:2px solid var(--brass);padding:2px 0 2px 16px;
  margin:0 0 18px;color:var(--mute)}
.district b{font-weight:400;color:var(--ink)}

footer{border-top:1px solid var(--filet);margin:56px 0 0;padding:22px 0 40px;
  color:var(--mute);font-size:14.5px}
footer a{color:var(--mute);text-decoration:underline}
footer a:hover{color:var(--ink)}
.retour{display:inline-block;font-family:var(--titre);font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;font-size:13px;
  border:1px solid var(--filet);border-radius:999px;padding:10px 20px;
  margin:34px 0 0;text-decoration:none;color:var(--ink)}
.retour:hover{border-color:var(--brass);color:var(--brass)}