/* Scoutarium, charte v2 (charte-v2/scoutarium-v2.css), servie entre tokens.css et scoutarium.css. Lot 2 : socle, titres et
   composants ; la coque (marque, navigation, langues, barre basse, « Aujourd'hui », menus, pied) attend le lot 3, la grille
   des notes et l'écart le lot 4, l'impression reste en v1. Seulement des var(--…). Un nom déjà porté par la v1 est restreint,
   jamais renommé : section.une (div.une des quiz), :is(a, button).chip (le chip-étiquette), .une > .photo-stade. */

/* ---------- Socle ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--nuit); color: var(--parchemin);
  font: 16px/1.6 var(--font-texte);
  /* le ciel : dix étoiles, répétées tous les 640 × 900 px ; décoratif, jamais sous un texte dense */
  background-image:
    radial-gradient(1px 1px at 12% 8%, var(--etoile) 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 4%, var(--etoile) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 92% 18%, var(--etoile-or) 50%, transparent 51%),
    radial-gradient(1px 1px at 33% 22%, var(--etoile) 50%, transparent 51%),
    radial-gradient(1px 1px at 58% 12%, var(--etoile) 50%, transparent 51%),
    radial-gradient(1px 1px at 4% 40%, var(--etoile) 50%, transparent 51%),
    radial-gradient(1px 1px at 96% 46%, var(--etoile) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 22% 64%, var(--etoile-or) 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 78%, var(--etoile) 50%, transparent 51%),
    radial-gradient(1px 1px at 8% 90%, var(--etoile) 50%, transparent 51%);
  background-size: 640px 900px;
}
a { color: var(--or-clair); text-underline-offset: 3px; }
a:hover { color: var(--parchemin); }
:focus-visible { outline: 2px solid var(--iris); outline-offset: 2px; }
img { max-width: 100%; }
.wrap { width: 100%; max-width: var(--largeur-page); margin-inline: auto; padding-inline: var(--esp-4); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Titres (la hiérarchie v2) ---------- */
/* Les paragraphes gardent leurs marges de la v1 : la charte les remet à 0, question posée au lot 2. */
h1, h2, h3 { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
h1.affiche { font: 800 clamp(44px, 7vw, 72px)/.92 var(--font-display); letter-spacing: .01em; text-transform: uppercase; color: var(--parchemin); }
h1 { font: 800 clamp(36px, 5vw, 48px)/.95 var(--font-display); letter-spacing: .03em; text-transform: uppercase; color: var(--or); }
h1 em { font-style: normal; color: var(--or); }
h1.affiche em { color: var(--or); }
h2 { font: 700 clamp(24px, 3vw, 30px)/1.05 var(--font-display); letter-spacing: .04em; text-transform: uppercase; color: var(--parchemin); margin-block: var(--esp-6) var(--esp-3); }
h2:first-child { margin-top: 0; }
h3 { font: 600 18px/1.3 var(--font-texte); color: var(--parchemin); margin-bottom: var(--esp-2); }
h2 + h3 { margin-top: var(--esp-3); }
.eyebrow { font: 600 14px/1.3 var(--font-texte); letter-spacing: .08em; text-transform: uppercase; color: var(--or); margin: 0 0 var(--esp-2); }
.eyebrow + h2 { margin-top: 0; } /* un surtitre est suivi de esp-2, pas des esp-6 d'un titre de section (CHARTE.md, Typographie) */
.lead { color: var(--brume); max-width: 62ch; }
.muted { color: var(--brume); }
.small { font-size: 14px; line-height: 1.5; }
.data { font-family: var(--font-data); font-variant-numeric: tabular-nums; }
.titre-col { font: 700 20px/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--or); margin: 0 0 var(--esp-3); display: flex; align-items: center; gap: var(--esp-3); }
.titre-col::after { content: ""; flex: 1; height: 1px; background: var(--trait-or); }
.etiquette { font: 600 14px/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--brume); }
.prose { max-width: var(--largeur-prose); }
.prose p + p { margin-top: var(--esp-3); }

/* ---------- Boutons ---------- */
.btn { font: 700 15px/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase; border-radius: var(--r-sm); padding: 13.5px var(--esp-4); min-height: var(--cible); cursor: pointer; border: 1px solid var(--or-contour); background: var(--or-fond); color: var(--sur-or); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2); }
.btn:hover { background: var(--or-fond-clair); color: var(--sur-or); }
.btn-danger { background: var(--bordeaux); color: var(--sur-bordeaux); border-color: var(--bordeaux-clair); }
.btn-danger:hover { background: var(--bordeaux-vif); color: var(--sur-bordeaux); }
.btn-ligne { background: transparent; color: var(--or); border-color: var(--bronze); }
.btn-ligne:hover { background: var(--or-voile); color: var(--or-clair); }
.btn-grand { padding: 17px var(--esp-5); min-width: 260px; }
.lien-btn { display: inline-flex; align-items: center; min-height: var(--cible); border: 0; padding: 0; background: none; font: 14px/1 var(--font-texte); color: var(--brume); cursor: pointer; }
.lien-btn:hover, .lien-btn.actif { color: var(--or-clair); }
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Surfaces ---------- */
.panneau, .tuile, .fil, .match { background: var(--ardoise); border: 1px solid var(--cadre); border-radius: var(--r-md); }
.panneau { padding: var(--esp-4); }
.panneau > h3 { margin-bottom: var(--esp-2); }
.tuile { display: grid; gap: var(--esp-2); align-content: start; padding: var(--esp-4); color: var(--parchemin); text-decoration: none; }
.tuile h3, .tuile .eyebrow { margin: 0; }
a.tuile:hover, a.panneau:hover { border-color: var(--bronze); color: var(--parchemin); }
.tuile .vignette { width: calc(100% + 2 * var(--esp-4)); max-width: none; aspect-ratio: 16 / 9; object-fit: cover; margin: calc(-1 * var(--esp-4)) calc(-1 * var(--esp-4)) var(--esp-1); border-radius: var(--r-md) var(--r-md) 0 0; display: block; }
.tuile-pied { display: flex; justify-content: space-between; gap: var(--esp-2); align-items: center; flex-wrap: wrap; }
.tuile-club { justify-items: center; text-align: center; border-top: var(--trait-club) solid var(--b1, var(--club-1)); }
.tuile-club .logo-club { width: 48px; height: 48px; }
.tuile-club h3 { font: 700 20px/1.1 var(--font-display); letter-spacing: .05em; text-transform: uppercase; }
.tuile-match { border-top: var(--trait-club) solid var(--b1, var(--club-1)); }
.logo-club { width: var(--logo-club); height: var(--logo-club); object-fit: contain; }
.blason { width: 40px; height: 46px; display: grid; place-items: center; font: 800 15px/1 var(--font-display); clip-path: polygon(0 0,100% 0,100% 62%,50% 100%,0 62%); background: linear-gradient(135deg, var(--b1, var(--club-1)), var(--b2, var(--club-2))); color: var(--b-texte, var(--club-texte)); }
.cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: var(--esp-3); }

/* ---------- Ligne de match : le rang sous le nom, jamais dedans (ANALYSE.md, Accueil 7) ---------- */
.matchs { display: grid; gap: var(--esp-2); }
.ligne-match { display: grid; grid-template-columns: 74px 1fr auto 1fr 112px; gap: var(--esp-3); align-items: center; background: var(--ardoise); border: 1px solid var(--cadre); border-radius: var(--r-md); padding: var(--esp-3) var(--esp-4); text-decoration: none; color: var(--parchemin); }
.ligne-match:hover { border-color: var(--bronze); }
.ligne-match .quand { font: 14px/1.3 var(--font-texte); color: var(--brume); }
.ligne-match .dom { text-align: right; }
.ligne-match .equipe { display: grid; gap: 2px; }
.ligne-match .equipe-nom { font: 700 17px/1.1 var(--font-display); letter-spacing: .05em; text-transform: uppercase; display: inline-flex; align-items: center; gap: var(--esp-2); }
.ligne-match .dom .equipe-nom { justify-content: flex-end; }
.ligne-match .rang { font: 500 14px/1 var(--font-data); color: var(--brume); font-variant-numeric: tabular-nums; }
.ligne-match .res { font: 800 24px/1 var(--font-display); color: var(--or-clair); font-variant-numeric: tabular-nums; letter-spacing: .04em; min-width: 64px; text-align: center; }
.ligne-match .res.avenir { font: 500 14px/1.2 var(--font-texte); color: var(--brume); }
.ligne-match .nb { font: 14px/1.3 var(--font-texte); color: var(--brume); text-align: right; }
.ligne-match .marque-club { width: 20px; height: 20px; object-fit: contain; }
.ligne-match.du-visiteur { border-color: var(--or); background: var(--or-voile); }
.ligne-match.en-direct .res { color: var(--parchemin); }
.ligne-match.tuile-match { border-top: var(--trait-club) solid var(--b1, var(--club-1)); } /* la bande de club reste en haut, survolée ou non */
@media (max-width: 560px) {
  .ligne-match { grid-template-columns: 1fr auto 1fr; row-gap: var(--esp-1); }
  .ligne-match .quand, .ligne-match .nb { grid-column: 1 / -1; text-align: center; }
}

/* ---------- Classement ---------- */
.tableau { border: 1px solid var(--cadre); border-radius: var(--r-md); overflow-x: auto; background: var(--ardoise); }
.tableau table { width: 100%; border-collapse: collapse; font: 14px/1 var(--font-data); font-variant-numeric: tabular-nums; }
.tableau th { font: 600 14px/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--brume); text-align: right; padding: var(--esp-3); border-bottom: 1px solid var(--trait); white-space: nowrap; }
.tableau td { padding: 9px var(--esp-3); text-align: right; border-bottom: 1px solid var(--trait-doux); white-space: nowrap; }
.tableau .g { text-align: left; font-family: var(--font-texte); font-size: 15px; }
.tableau .g a { display: inline-flex; align-items: center; gap: var(--esp-2); color: var(--parchemin); text-decoration: none; }
.tableau tr:last-child td { border-bottom: 0; }
.tableau td.pts { color: var(--or-clair); font-weight: 500; }
.tableau td.rang { color: var(--brume); }
.classement tbody tr { height: var(--cible); }
.classement tbody tr:hover { background: var(--or-voile); }
.classement tr.du-visiteur td { background: var(--or-voile); }
.classement tr.europe td.rang { box-shadow: inset 3px 0 var(--or); }
.classement tr.relegation td.rang { box-shadow: inset 3px 0 var(--bordeaux-clair); }

/* ---------- Tribune (fil et commentaires) ---------- */
.fil > header { padding: var(--esp-3) var(--esp-4); display: flex; justify-content: space-between; align-items: baseline; gap: var(--esp-2); border-bottom: 1px solid var(--trait); flex-wrap: wrap; }
.fil > header b { font: 700 17px/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
.fil > header span { font: 14px/1.3 var(--font-texte); color: var(--brume); }
.com { display: grid; grid-template-columns: var(--avatar) 1fr; gap: var(--esp-3); padding: 14px var(--esp-4); border-bottom: 1px solid var(--trait-doux); }
.com:last-child { border-bottom: 0; }
.com .reponses { grid-column: 2; border-left: 1px solid var(--trait); margin-top: 6px; }
.com .reponses .com { padding: var(--esp-3) 0 var(--esp-3) 14px; border-bottom: 0; }
.avatar { width: var(--avatar); height: var(--avatar); border-radius: 50%; display: grid; place-items: center; font: 700 15px/1 var(--font-display); color: var(--sur-or); background: var(--or-fond); text-decoration: none; }
.meta { display: flex; gap: var(--esp-2); align-items: baseline; flex-wrap: wrap; font-size: 14px; }
.meta b { color: var(--parchemin); font-weight: 600; }
.meta time { font: 14px/1 var(--font-texte); color: var(--pierre); }
.com .texte { margin: var(--esp-1) 0 6px; font-size: 15px; white-space: pre-line; overflow-wrap: anywhere; }
.act { display: flex; gap: 0 14px; flex-wrap: wrap; align-items: center; font: 14px/1 var(--font-texte); color: var(--brume); }
.act a { display: inline-flex; align-items: center; min-height: var(--cible); color: var(--brume); text-decoration: none; }
.act a:hover { color: var(--or-clair); }
.ecrire { padding: var(--esp-3) var(--esp-4) var(--esp-4); display: grid; gap: var(--esp-2); border-top: 1px solid var(--trait); }

/* ---------- Étiquettes : badge et chip ---------- */
.badge { display: inline-block; font: 600 14px/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--or); border: 1px solid var(--bronze); border-radius: var(--r-pilule); padding: 3px var(--esp-2) 2px; }
.badge.etat-direct { color: var(--parchemin); border-color: var(--or); }
.badge.etat-alert { color: var(--erreur-douce); border-color: var(--bordeaux-clair); }
.badge.etat-ok { color: var(--or-clair); }
:is(a, button).chip { display: inline-flex; align-items: center; min-height: var(--cible); padding: 0 14px; font: 500 14px/1 var(--font-texte); color: var(--brume); border: 1px solid var(--cadre); border-radius: var(--r-pilule); background: var(--ardoise); text-decoration: none; cursor: pointer; }
:is(a, button).chip:hover { border-color: var(--bronze); color: var(--or-clair); }
.chip[aria-current], .chip.actif { border-color: var(--club-1); color: var(--or-clair); }
.chip.data { font-family: var(--font-data); }
.journees, .filtres { display: flex; gap: 6px; flex-wrap: wrap; }
.onglets { display: flex; gap: var(--esp-2); overflow-x: auto; padding-bottom: var(--esp-1); }
.onglets a { flex: none; min-height: var(--cible); display: inline-flex; align-items: center; padding: 0 var(--esp-4); border: 1px solid var(--cadre); border-radius: var(--r-pilule); background: var(--ardoise); color: var(--brume); text-decoration: none; font: 600 14px/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
.onglets a[aria-current="page"] { color: var(--or-clair); border-color: var(--club-1); box-shadow: inset 0 -3px 0 var(--club-1); }

/* ---------- Pastille de note ---------- */
.pastille-note { display: inline-block; min-width: 40px; padding: 5px 6px; border-radius: var(--r-sm); font: 600 14px/1 var(--font-data); font-variant-numeric: tabular-nums; text-align: center; white-space: nowrap; }
.pastille-note.grande { min-width: 56px; padding: 9px 10px; font-size: 20px; }
.bande-1 { background: var(--bande-1); color: var(--bande-1-texte); }
.bande-2 { background: var(--bande-2); color: var(--bande-2-texte); }
.bande-3 { background: var(--bande-3); color: var(--bande-3-texte); }
.bande-4 { background: var(--bande-4); color: var(--bande-4-texte); }

/* ---------- Jauges ---------- */
.jauge { display: flex; height: 6px; border-radius: var(--r-pilule); overflow: hidden; background: var(--trait); gap: 2px; }
.jauge i { display: block; height: 100%; }
.jauge .a { background: var(--club-1); }
.jauge .b { background: var(--brume); }
.mini-jauge { display: block; height: 4px; border-radius: var(--r-pilule); background: var(--trait); overflow: hidden; }
.mini-jauge i { display: block; height: 100%; background: var(--club-1); }
.stat { display: grid; grid-template-columns: 64px 1fr 64px; gap: var(--esp-3); align-items: center; font: 500 14px/1 var(--font-data); font-variant-numeric: tabular-nums; }
.stat .v:last-child { text-align: right; }
.stat .mid { display: grid; gap: 5px; }
.stat .lab { text-align: center; font: 600 14px/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--brume); }

/* ---------- Sondage ---------- */
.sondage { display: grid; gap: var(--esp-3); }
.opt { display: grid; gap: var(--esp-1); }
.opt > div:first-child { display: flex; justify-content: space-between; font-size: 15px; gap: var(--esp-2); }
.opt > div:first-child > span { font: 500 14px/1 var(--font-data); font-variant-numeric: tabular-nums; color: var(--brume); }
.opt .jauge { height: 8px; }
.opt .jauge i { background: var(--bronze); }
.opt.top .jauge i { background: var(--or-fond); }
.opt.top > div:first-child > span { color: var(--or-clair); }
.choix { display: grid; gap: var(--esp-2); }
.choix .btn-ligne { justify-content: space-between; text-align: left; }
.choix .btn-ligne span { font: 500 15px/1 var(--font-data); letter-spacing: 0; }

/* ---------- Carte-joueur et portrait ---------- */
.carte-joueur { display: grid; grid-template-columns: 44px 1fr auto; gap: var(--esp-3); align-items: center; background: var(--ardoise); border: 1px solid var(--cadre); border-radius: var(--r-md); padding: var(--esp-3) 14px; color: var(--parchemin); text-decoration: none; }
a.carte-joueur:hover { border-color: var(--bronze); }
.carte-joueur-corps { display: grid; gap: 3px; min-width: 0; }
.carte-joueur .nom { font-size: 15px; font-weight: 600; }
.carte-joueur small { color: var(--pierre); font: 14px/1.3 var(--font-texte); }
.portrait { display: inline-grid; place-items: center; box-sizing: border-box; width: 26px; height: 26px; border-radius: 50%; flex: none; object-fit: cover; background: var(--p1, var(--ardoise-2)); border: 2px solid var(--p2, var(--bronze)); color: var(--p-texte, var(--or)); font: 700 10px/1 var(--font-display); letter-spacing: .02em; text-transform: uppercase; }
.portrait-grand { width: 44px; height: 44px; font-size: 16px; border-width: 3px; }
.portrait-mini { width: 20px; height: 20px; font-size: 8px; border-width: 1.5px; }

/* ---------- Formulaire ---------- */
form.formulaire { display: grid; gap: 14px; max-width: 520px; }
label, .label { font: 600 14px/1.2 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--brume); display: grid; gap: 6px; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea { width: 100%; background: var(--nuit); color: var(--parchemin); border: 1px solid var(--cadre); border-radius: var(--r-sm); padding: 10px var(--esp-3); font: 15px/1.4 var(--font-texte); text-transform: none; letter-spacing: 0; min-height: var(--cible); }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--or); outline-offset: 0; }
textarea { resize: vertical; min-height: 72px; }
::placeholder { color: var(--pierre); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--or-fond); width: 18px; height: 18px; }
.case { display: flex; gap: var(--esp-3); align-items: center; min-height: var(--cible); font: 15px/1.4 var(--font-texte); letter-spacing: 0; text-transform: none; color: var(--parchemin); }
.aide { font: 14px/1.4 var(--font-texte); color: var(--pierre); letter-spacing: 0; text-transform: none; }
.errorlist { list-style: none; margin: 0; padding: 0; color: var(--erreur); font: 14px/1.4 var(--font-texte); letter-spacing: 0; text-transform: none; }
.champ-erreur input { border-color: var(--bordeaux-clair); }

/* ---------- Alertes et flash ---------- */
.alerte { border: 1px solid var(--iris); color: var(--parchemin); background: var(--or-voile); border-radius: var(--r-sm); padding: var(--esp-3) var(--esp-4); }
.flash { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-2); }
.flash li { border: 1px solid var(--bronze); background: var(--ardoise); border-radius: var(--r-sm); padding: var(--esp-3) 14px; font-size: 15px; display: flex; gap: var(--esp-3); align-items: center; }
.flash li.error { border-color: var(--bordeaux-clair); }
.flash li.warning { border-color: var(--iris); }
.carte-saviez { padding: 18px 20px; border-radius: var(--r-md); background: var(--ardoise-2); border-top: 3px solid var(--club-1); }
.carte-saviez blockquote { margin: 6px 0 var(--esp-3); font: italic 400 26px/1.15 var(--font-texte); color: var(--parchemin); }

/* ---------- Chiffres ---------- */
.chiffres { font: 800 58px/1 var(--font-display); color: var(--or-clair); font-variant-numeric: tabular-nums; letter-spacing: .04em; text-align: center; }
.chiffres small { display: block; text-align: center; font: 500 14px/1.5 var(--font-texte); letter-spacing: 0; color: var(--brume); margin-top: 6px; }
.progression { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--esp-2); font-size: 14px; color: var(--brume); }
.progression b { display: block; font: 800 28px/1 var(--font-display); color: var(--or-clair); font-variant-numeric: tabular-nums; }

/* ---------- Une (accueil v2) : le titre affiche et la carte à gauche, la photo à droite (ANALYSE.md, Accueil 1 et 2) ---------- */
section.une { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--esp-6); align-items: center; }
.une-texte { display: grid; gap: var(--esp-4); }
.une-texte .lead { font-size: 18px; max-width: 46ch; }
.actions { display: flex; gap: var(--esp-3); flex-wrap: wrap; }
.photo-stade { margin: 0; min-width: 0; }
.photo-stade img, .photo-stade .cadre-photo { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-md); border: 1px solid var(--bronze); box-shadow: var(--halo-photo); background: linear-gradient(160deg, var(--ardoise-2), var(--nuit)); }
.photo-stade figcaption { margin-top: var(--esp-3); font: 14px/1.5 var(--font-texte); color: var(--pierre); }
@media (max-width: 760px) { section.une { grid-template-columns: 1fr; } .une > .photo-stade { display: none; } }

/* ---------- Mouvement ---------- */
@media (prefers-reduced-motion: no-preference) {
  .btn, button, a.tuile, .carte-moment, .ligne-match, .chip, .onglets a, .carte-joueur { transition: background var(--duree-courte) ease, border-color var(--duree-courte) ease, transform var(--duree-rapide) ease; }
  .btn:active { transform: scale(.97); }
  a.tuile:hover { transform: translateY(-2px); }
  :is(.ligne-match, a.tuile, .carte-moment, a.carte-joueur):active { transform: scale(.985); }
  .point-direct { animation: battement var(--battement) ease-in-out infinite; }
  .flash li { animation: arrivee var(--duree-entree) ease-out both; }
  .flash li + li { animation-delay: 80ms; }
}
@keyframes battement { 50% { opacity: .3; } }
@keyframes arrivee { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- Mode compact : jamais sous 44px ni 14px ---------- */
.compact body { line-height: 1.45; }
.compact :is(.matchs, .cartes) { gap: 6px; }
.compact .ligne-match { min-height: var(--cible); padding-block: 5px; row-gap: 2px; }
.compact :is(.panneau, .tuile) { padding: var(--esp-3) var(--esp-3); }
.compact .tableau td { padding-block: 5px; }
.compact .com { gap: var(--esp-3); padding-block: var(--esp-2); }