/* 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')}
/* Le vrai gras, et non celui que le navigateur fabrique : ces pages en
   portaient quatre-vingt-six, un `<b>` sur deux phrases (P1-2, 09/10/2026).
   Même fichier que l'accueil, voir `index.html`. */
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(./barlow-600.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')}
/* La fonte du logo, pour les étiquettes, comme sur l'accueil (P2-8,
   09/10/2026) : elles étaient en Michroma là-bas et en Barlow Condensed ici.
   Elle ne sert qu'à quelques mots en capitales espacées ; une étiquette d'un
   mot ne change pas de ligne quand elle arrive, rien ne saute. */
@font-face{font-family:'Michroma';font-style:normal;font-weight:400;font-display:swap;src:url(./michroma-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;
  /* Les polices sont celles du socle commun (`jetons.css`, 09/10/2026),
     `--f-titre`, `--f-corps`, `--f-chiffre` et `--f-marque`, aux mêmes piles :
     la vitrine les nommait la première, sous `--titre`, `--corps`, `--chiffre`
     et `--capitale`. */
  --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(--f-corps);font-size:clamp(var(--t-4),4.36vw,var(--t-5));line-height:1.6;overflow-x:hidden;
  /* Aucun gras fabriqué, voir `index.html`. */
  font-synthesis:style;
}
@media (min-width:700px){ body{font-size:var(--t-5)} }

.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:var(--z-alerte)}
.evite:focus{left:8px;top:8px}

/* ─── L'EN-TÊTE COMMUN (P2-8, 09/10/2026) ─────────────────────────────────
   Le logo, puis « Articles », « Tarifs » et l'appel compact, en contour : le
   bouton plein reste celui de la carte finale. Chaque lien fait 44 px de haut
   au pouce, sans un pixel dessiné de plus. */
header.tete{display:flex;align-items:center;justify-content:space-between;
  gap:6px 18px;flex-wrap:wrap;padding:18px 0 22px}
.marque img{display:block;width:150px;height:auto}
.tete-liens{display:flex;align-items:center;gap:18px}
.tete-liens a{display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--f-titre);font-weight:700;font-size:var(--t-1);letter-spacing:.12em;
  text-transform:uppercase;color:var(--mute);text-decoration:none}
.tete-liens a:hover{color:var(--ink)}
.tete-liens .tete-appel{min-height:34px;padding:0 14px;margin:5px 0;
  border:1px solid rgba(var(--brassRvb),.5);border-radius:var(--r-pilule);color:var(--brass)}
.tete-liens .tete-appel:hover{background:var(--brass);color:var(--inkOnBrass)}
.tete-liens a:focus-visible{outline:var(--focus);outline-offset:var(--focus-decale)}

/* ─── UNE SEULE RÈGLE POUR LES TITRES (P2-8) ──────────────────────────────
   Le titre était en capitales sur l'accueil, en bas de casse serrée ici :
   deux maisons. Les titres prennent la règle de l'accueil, Barlow Condensed
   en capitales ; le texte qu'ils portent ne change pas. */
h1{
  font-family:var(--f-titre);font-weight:700;line-height:.98;
  font-size:clamp(var(--t-8),7.5vw,var(--t-9));letter-spacing:.01em;text-transform:uppercase;
  margin:14px 0 0;text-wrap:balance;
}
.chapeau{color:var(--mute);margin:14px 0 0;max-width:48ch}

h2{font-family:var(--f-titre);font-weight:700;font-size:clamp(var(--t-6),5vw,var(--t-7));
   line-height:1.08;letter-spacing:.03em;text-transform:uppercase;margin:38px 0 8px;text-wrap:balance}
h3{font-family:var(--f-titre);font-weight:700;font-size:clamp(var(--t-4),3.6vw,var(--t-6));
   line-height:1.2;letter-spacing:.05em;text-transform:uppercase;margin:24px 0 6px;
   color:var(--brass);text-wrap:balance}
p{margin:0 0 14px}
/* Un paragraphe ne finit plus sur un mot seul : « pas. » sous le chapeau de la
   feuille de match (P1-15, 09/10/2026). */
p,li{text-wrap:pretty}
a{color:var(--brass)}
a:hover{color:var(--or)}

.etiq{font-family:var(--f-marque);font-weight:400;text-transform:uppercase;
      letter-spacing:.09em;font-size:var(--t-1);line-height:1.5;color:var(--brass);margin:0}

/* La saison, la mise à jour et la source, sous le chapeau (P2-9). */
.a-jour{margin:14px 0 0;font-size:var(--t-3);line-height:1.55;color:var(--mute)}
.a-jour time{color:var(--ink);font-family:var(--f-chiffre);font-size:.95em}

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:var(--r-2);
  padding:16px 18px;margin:0 0 18px}
pre.bloc{font-family:var(--f-chiffre);font-size:var(--t-3);line-height:1.6;
  white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ink)}
.bloc .etiq{display:block;margin:0 0 8px}

/* ─── Copier le modèle (P1-14, 09/10/2026) ───
   Le bouton de l'accueil, « Copier le message », à l'identique : en contour,
   laiton, 44 px de haut. La phrase qui suit dit si c'est fait. */
.copier-ligne{margin:-6px 0 18px}
.copier{min-height:44px;padding:0 18px;cursor:pointer;background:none;
  border:1px solid rgba(var(--brassRvb),.5);border-radius:var(--r-1);color:var(--brass);
  font-family:var(--f-titre);font-weight:700;font-size:var(--t-2);letter-spacing:.1em;
  text-transform:uppercase;transition:background var(--d-1),border-color var(--d-1),color var(--d-1)}
.copier[hidden]{display:none}
.copier:hover{background:rgba(var(--brassRvb),.14);border-color:var(--brass);color:var(--or)}
.copier-dit{margin:10px 0 0;font-size:var(--t-3);line-height:1.55;color:var(--mute)}
.copier-dit:empty{margin:0}
.copier-dit[data-etat="ok"]{color:var(--brass)}
.copier-dit[data-etat="mal"]{color:#E0A0A0}
/* Le mouvement réduit : la règle commune du socle (`jetons.css`, 09/10/2026). */

/* ─── 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(--f-titre);font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;font-size:var(--t-1);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. */
/* 24 px au-dessus (P2-5) : le chapeau s'y collait, sans air entre le texte
   libre et l'encadré. */
.district{border-left:2px solid var(--brass);padding:2px 0 2px 16px;
  margin:24px 0 18px;color:var(--mute)}
.district b{font-weight:400;color:var(--ink)}

/* ─── LE PIED DE L'ACCUEIL (P2-7, 09/10/2026) ─────────────────────────────
   Produit, articles, légal, en trois colonnes dès 640 px ; une ligne de
   44 px par lien, et l'année que la construction pose. */
footer{border-top:1px solid var(--filet);margin:56px 0 0;padding:26px 0 40px;
  color:var(--mute);font-size:var(--t-3)}
footer a{color:var(--mute);text-decoration:underline}
footer a:hover{color:var(--ink)}
.pied-colonnes{display:grid;gap:26px 22px}
@media (min-width:640px){ .pied-colonnes{grid-template-columns:repeat(3,minmax(0,1fr))} }
.pied-colonnes .etiq{margin:0 0 6px}
.pied-colonnes ul{list-style:none;margin:0;padding:0}
.pied-colonnes li{margin:0}
.pied-colonnes a{display:flex;align-items:center;min-height:44px;padding:6px 0;
  color:var(--ink);text-decoration:none;border-bottom:1px solid var(--filet);line-height:1.35}
.pied-colonnes a:hover{color:var(--brass)}
.pied-colonnes a[aria-current="page"]{color:var(--brass)}
.pied-bas{margin:28px 0 0;padding-top:18px;border-top:1px solid var(--filet)}

/* ─── LA CARTE FINALE, AVEC UN ÉCRAN DU PRODUIT (P2-9, 09/10/2026) ────────
   La pilule « Voir Kickalys » de 131 × 43 était tout l'appel de la page. */
.carte-fin{display:grid;gap:22px;align-items:center;margin:48px 0 0;padding:24px;
  background:var(--solid);border:1px solid var(--filet);border-radius:var(--r-3)}
@media (min-width:560px){ .carte-fin{grid-template-columns:150px minmax(0,1fr);padding:28px} }
.carte-fin img{display:block;justify-self:center;width:100%;max-width:150px;height:auto;
  aspect-ratio:780/1688;border-radius:var(--r-3);
  box-shadow:0 0 0 1px rgba(var(--brassRvb),.22),0 30px 50px -30px rgba(0,0,0,.9)}
.carte-fin h2{margin:8px 0 10px}
.carte-fin .appel{margin:20px 0 0}
.carte-fin .note{margin:14px 0 0}
.retour{display:inline-block;font-family:var(--f-titre);font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;font-size:var(--t-2);
  border:1px solid var(--filet);border-radius:var(--r-pilule);padding:10px 20px;
  margin:34px 0 0;text-decoration:none;color:var(--ink)}
.retour:hover{border-color:var(--brass);color:var(--brass)}

/* ─── L'appel principal, sur la page 404 (P1-12, 09/10/2026) ───
   Le bouton plein de l'accueil, « Ouvrir ma catégorie, ce soir », au même
   dessin : celui qui tombe sur une adresse morte doit retrouver le geste
   que la page d'accueil lui aurait proposé. C'est le bouton laiton du socle
   commun (`bouton-laiton`, `jetons.css`) ; `.appel` ne garde que sa place. */
.appel{display:flex;width:100%;max-width:26em;margin:26px 0 0;font-size:var(--t-4)}
/* La liste des articles : une ligne par article, et une ligne de 48 px au
   pouce plutôt que le corps d'un lien. */
.articles{list-style:none;padding:0;margin:0 0 14px}
.articles li{margin:0;border-bottom:1px solid var(--filet)}
.articles a{display:flex;align-items:center;min-height:48px;padding:8px 0;
  color:var(--ink);text-decoration:none}
.articles a:hover{color:var(--brass)}