`) : un anneau qui pulse et s'efface —
RGBA figé de `--ok` (un keyframe ne peut pas lire `color-mix` avec alpha
variable), la confirmation la plus concrète qu'on puisse donner sans
passer par un message texte facilement raté. */
@keyframes ml-bilan-pulse { 0% { box-shadow: 0 0 0 0 rgba(30,158,90,.45); }
70% { box-shadow: 0 0 0 10px rgba(30,158,90,0); } 100% { box-shadow: 0 0 0 0 rgba(30,158,90,0); } }
.ml-bilan-ligne.ml-bilan-vient-d-etre-note { animation: ml-bilan-pulse 1.4s ease-out; }
@media (prefers-reduced-motion: reduce) {
.ml-bilan-ligne.ml-bilan-vient-d-etre-note { animation: none; outline: 2px solid var(--ok, #1E9E5A); outline-offset: 2px; }
}
/* Joueurs non reconnus par la photo : recherche pour mapper à une fiche
existante plutôt que d'en recréer une en double. */
.ml-manquants .ml-joueur { padding-bottom: 12px; }
/* Joueur retrouvé mais de côté inconnu (cf. `joueurs_club_errone`) : cadre
ambré, pour qu'on le repère comme une anomalie à vérifier et non comme un
effectif normal. */
.ml-club-alerte { border: 1px solid var(--sand); border-radius: var(--radius); padding: 12px 14px; }
.ml-club-alerte .ml-club-nom { color: var(--sand-fg, #7A5A1E); }
.ml-recherche-input {
width: 100%; box-sizing: border-box; border: 1px solid var(--line-2);
border-radius: var(--radius); padding: 10px 12px; margin-bottom: 6px;
}
.ml-recherche-resultats { display: grid; gap: 4px; }
.ml-recherche-item {
text-align: left; padding: 9px 12px; border: 1px solid var(--line-2);
border-radius: var(--radius); background: var(--bg); cursor: pointer; font-size: 13.5px;
}
.ml-recherche-item:hover, .ml-recherche-item:focus-visible { border-color: var(--night); }
/* Une COLONNE PAR ÉQUIPE (terrain, dispositif ET effectif complet ensemble),
jamais un bloc après l'autre : c'est justement pour comparer les deux
équipes d'un coup d'œil, de haut en bas, sur le téléphone, que la mise en
page existe. `min-width: 0` est indispensable sur la colonne flex — sans
lui un enfant flex refuse de rétrécir sous la largeur de son contenu
(même piège que la barre de navigation, déjà documenté). */
.ml-rangee-equipes { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 2px; }
.ml-colonne-equipe { flex: 1 1 0; min-width: 0; }
.ml-club-nom-pitch {
text-align: center; font-size: 12.5px; margin: 0 0 4px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Terrain d'équipe : un point par TITULAIRE sur un emplacement du dispositif
choisi, même habillage « nuit tracée à la lumière » que le mini-terrain de
la fiche (.hero-pitch) — le terrain reste de la DONNÉE, pas un décor
emprunté. */
.ml-pitch {
position: relative; width: 100%; margin: 0 0 4px;
aspect-ratio: 100 / 132; border-radius: 14px; overflow: hidden;
background:
repeating-linear-gradient(0deg, rgba(224,192,144,.05) 0 20px, rgba(255,255,255,0) 20px 40px),
linear-gradient(158deg, #2A3A52 0%, #1B2738 58%, #121A26 100%);
border: 1px solid rgba(224,192,144,.28);
box-shadow: inset 0 1px 0 rgba(255,255,255,.12),
inset 0 0 30px rgba(0,0,0,.30), 0 8px 20px rgba(0,0,0,.24);
/* Sans ça, un glisser tactile fait défiler la page au lieu de déplacer le
jeton — le geste de repositionnement doit rester dans le terrain. */
touch-action: none;
}
.ml-pitch .hp-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.ml-pitch .hp-lines * {
fill: none; stroke: rgba(224,192,144,.42); stroke-width: 1;
vector-effect: non-scaling-stroke;
}
.ml-pitch .hp-lines .hp-out { stroke: rgba(224,192,144,.55); }
.ml-pitch .hp-lines .hp-spot { fill: rgba(224,192,144,.55); stroke: none; }
/* ⚠️ BUG RÉEL trouvé le 22/09/2026 (retour de la cellule : « mes deux bulles
de milieu sont l'une sur l'autre ») : `.ml-dot` centrait via `transform:
translate(-50%,-50%)` toute sa boîte flex — chip ET étiquette confondus.
Passer l'étiquette en `row`/`row-reverse` élargit cette boîte (chip + gap
+ nom), et le centrage déplace alors le CHIP LUI-MÊME hors de son point
réel — les deux relayeurs du 3-5-2/3-4-3 (l'un vers la droite, l'autre
vers la gauche) glissaient donc l'un vers l'autre jusqu'à se chevaucher,
malgré des coordonnées correctes dans `utils.FORMATIONS`.
Fix : le CHIP seul reste dans le flux normal de `.ml-dot` (donc seul à
déterminer sa taille, donc seul centré par le `translate`) ; l'étiquette
passe en `position: absolute`, ancrée sur `.ml-dot` (positionné) et
orientée par côté (`top`/`bottom`/`left`/`right` + `transform` de demi-
décalage) — elle peut s'étaler dans n'importe quelle direction sans
jamais déplacer le jeton qu'elle accompagne. */
.ml-dot {
position: absolute; transform: translate(-50%,-50%); z-index: 2;
display: flex; align-items: center; justify-content: center;
background: none; border: none; padding: 0; margin: 0; cursor: pointer;
touch-action: none; -webkit-tap-highlight-color: transparent;
}
/* Le gardien est TOUJOURS l'emplacement le plus proche du bord (slot « g »,
y 90-93 % selon le dispositif, cf. `utils.FORMATIONS`) — une étiquette
SOUS le jeton comme tout le monde débordait donc du terrain, et
`.ml-pitch` (`overflow: hidden`) la tronquait net. `data-slot-id` suit le
JOUEUR qui occupe l'emplacement (recalculé par `recalculer()` au
changement de dispositif ou au glisser-déposer, cf. match_live.html) —
ce sélecteur reste donc juste quel que soit qui s'y trouve. Étiquette à
GAUCHE du jeton pour ce seul emplacement (retour de la cellule,
22/09/2026 : préférée à l'étiquette au-dessus). */
.ml-dot[data-slot-id="g"] .ml-dot-nom { top: 50%; left: auto; right: 100%; transform: translateY(-50%); margin: 0 3px 0 0; }
/* Ailiers du 4-4-2 (« mg »/« md ») et latéraux d'une défense à 4 (« dg »/
« dd », dans les trois dispositifs 4-3-3/4-2-3-1/4-4-2) : nom au-dessus
du jeton, demande de la cellule (22/09/2026). Ces quatre identifiants ne
sont réutilisés dans AUCUN autre dispositif, le sélecteur reste donc
juste sans scoper par dispositif. */
.ml-dot[data-slot-id="mg"] .ml-dot-nom, .ml-dot[data-slot-id="md"] .ml-dot-nom,
.ml-dot[data-slot-id="dg"] .ml-dot-nom, .ml-dot[data-slot-id="dd"] .ml-dot-nom {
top: auto; bottom: 100%; margin: 0 0 3px;
}
/* Les deux relayeurs du 3-5-2 ET du 3-4-3 (« mcg »/« mcd ») : nom AU-DESSUS
du jeton (comme les latéraux/mg-md), mais légèrement dégagé vers son
propre côté plutôt que centré pile dessus — demande de la cellule
(22/09/2026, dernier réglage après le fix d'ancrage ci-dessus : « au-
dessus mais légèrement dégagé sur leur côté pour pas que ce soit l'un
sur l'autre »). `mcg`/`mcd` existent aussi dans d'autres dispositifs
(4-3-3, 5-3-2) où ce réglage n'a pas été demandé — le sélecteur passe
donc par `[data-dispositif]`, posé en JS sur le terrain lui-même (cf.
match_live.html), jamais par l'identifiant seul. */
.ml-pitch[data-dispositif="3-5-2"] .ml-dot[data-slot-id="mcg"] .ml-dot-nom,
.ml-pitch[data-dispositif="3-4-3"] .ml-dot[data-slot-id="mcg"] .ml-dot-nom {
top: auto; bottom: 100%; left: 50%; transform: translateX(calc(-50% - 12px)); margin: 0 0 3px;
}
.ml-pitch[data-dispositif="3-5-2"] .ml-dot[data-slot-id="mcd"] .ml-dot-nom,
.ml-pitch[data-dispositif="3-4-3"] .ml-dot[data-slot-id="mcd"] .ml-dot-nom {
top: auto; bottom: 100%; left: 50%; transform: translateX(calc(-50% + 12px)); margin: 0 0 3px;
}
/* Le numéro de maillot est le repère PRINCIPAL en tribune, pas le poste —
la position sur le terrain dit déjà le poste (emplacement du dispositif).
D'où un chiffre grand et gras plutôt qu'une abréviation de poste. */
/* Taille réduite par défaut : les deux terrains vivent côte à côte dans une
colonne étroite (téléphone), pas seuls sur toute la largeur.
⚠️ Retouché le 21/09/2026 (retour de la cellule : « les compos mal
affichées » sur téléphone) — 34px/8px passait tout juste le plancher de
cible tactile déjà documenté (34-44px), mais un chiffre à 14px sur un
disque de 34px et un nom à 8px étaient à la limite du lisible sur un
vrai écran de téléphone. À 390px de large, chaque colonne d'équipe fait
~181px (`.ml-rangee-equipes`, gap 8px) : la marge existe pour un chiffre
et un nom plus confortables SANS renoncer aux deux terrains côte à côte
(l'intérêt même de cette mise en page, cf. plus haut). */
.ml-dot-chip {
position: relative; display: flex; align-items: center; justify-content: center;
width: 41px; height: 41px; border-radius: 50%; color: var(--night);
background: radial-gradient(circle at 34% 28%, #ffdf94, var(--sand) 78%);
border: 2px solid #fff;
font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 17px;
box-shadow: 0 0 0 3px rgba(240,180,50,.18), 0 2px 7px rgba(0,0,0,.4);
}
/* TOUJOURS une seule ligne (demande de la cellule, 22/09/2026 : le repli
sur deux lignes essayé plus tôt le même jour gênait plus qu'il n'aidait)
— le chevauchement sur une ligne à 4 défenseurs se règle désormais en
écartant/étageant les emplacements eux-mêmes (cf. `utils.FORMATIONS`),
pas en changeant la mise en forme de l'étiquette. `max-width` élargi
ensuite (52 -> 60px, même jour) : des noms de 8-9 lettres (« ÉDOUARD »,
« BULATOVIC », « CUISANCE »...) finissaient tronqués en « … » même sans
ligne à 4 voisine juste à côté — la marge existe désormais aussi grâce
à l'écartement des emplacements ci-dessus. */
.ml-dot-nom {
/* Position par défaut : SOUS le jeton, centrée — les variantes
au-dessus/à-gauche/à-droite ci-dessus ne font que réécrire ces quatre
propriétés, jamais toucher `.ml-dot` (cf. le bloc plus haut). */
position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
margin: 3px 0 0;
max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font-size: 8px; font-weight: 700; color: #fff; line-height: 11px;
padding: 1px 5px; border-radius: 6px; background: rgba(8,22,15,.68);
box-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.ml-dot.ml-dot-drag { z-index: 5; }
.ml-dot.ml-dot-drag .ml-dot-chip { box-shadow: 0 0 0 4px rgba(240,180,50,.3), 0 6px 16px rgba(0,0,0,.5); }
/* Repère « déjà noté ce match » (cf. `.ml-dot--note`, match_live.html) — vert
comme les autres confirmations de l'appli (`.ml-valide-msg-ok`), jamais la
même lumière que le jeton lui-même (Calico y est déjà l'identité du
joueur, pas un état à lire par-dessus). */
.ml-dot-note {
position: absolute; top: -3px; right: -3px; width: 15px; height: 15px;
border-radius: 50%; background: var(--ok, #157A43); color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 10px; font-weight: 800; border: 2px solid #fff; line-height: 1;
}
.ml-deja-note {
color: var(--ok, #157A43); font-weight: 800; font-size: 13px; margin-left: 2px;
}
/* Jeton PROVISOIRE (non-identifié posté à la main, cf. .ml-manquant-poste) :
en pointillés, jamais confondu avec un titulaire confirmé — même position
de terrain, mais l'aplat ambré (identité certaine) cède la place à un
contour vide (identité encore ouverte). */
.ml-dot-virtuel .ml-dot-chip {
background: rgba(255,255,255,.12); border: 2px dashed rgba(224,192,144,.85);
color: var(--sand); box-shadow: none;
}
.ml-dot-virtuel .ml-dot-nom { background: rgba(8,22,15,.5); font-style: italic; }
.ml-pitch-aide { font-size: 12px; color: var(--muted); text-align: center; margin: 0 0 8px; }
.ml-pitch-aide:last-of-type { margin-bottom: 16px; }
.ml-dispo-lab { display: block; margin: 0 0 4px; }
.ml-dispo {
display: block; width: 100%; box-sizing: border-box; text-align: center;
font: inherit; font-weight: 700; font-size: 12.5px; color: var(--night);
border: 1px solid var(--line-2); border-radius: var(--radius);
padding: 5px 4px; background: var(--surface);
}
/* Au-delà du téléphone, les deux terrains ont la place d'être plus grands —
la lisibilité du chiffre prime dès que la place le permet. */
@media (min-width: 560px) {
.ml-dot-chip { width: 46px; height: 46px; font-size: 20px; border-width: 2.5px; }
.ml-dot-nom { max-width: 78px; font-size: 9.5px; line-height: 14px; padding: 0 6px; }
.ml-club-nom-pitch { font-size: 15px; }
.ml-rangee-equipes { gap: 16px; }
.ml-liste-compacte { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
}
/* Banc : mêmes cartes que les titulaires, repliées par défaut pour que le
terrain reste le premier regard — le remplaçant n'a pas de position à lire. */
.ml-banc { margin: 6px 0 0; }
.ml-banc > summary {
cursor: pointer; font-weight: 700; padding: 10px 0; min-height: 44px;
display: flex; align-items: center; list-style: none; color: var(--muted);
}
.ml-banc > summary::-webkit-details-marker { display: none; }
/* ═══════════════════════════════════════════════════════════════════════════
LA BARRE LATÉRALE SUR TÉLÉPHONE ET TABLETTE (21/09/2026)
Sous 900 px, la navigation était une bande d'onglets horizontale : elle
mangeait 60 px de hauteur sur un écran qui en a 700, et les six entrées
défilaient à l'horizontale, donc les dernières n'existaient pas pour qui ne
pensait pas à pousser la bande du doigt.
Elle devient un RAIL, comme sur grand écran, avec deux états :
· rangé (par défaut) — 56 px, les icônes seules ;
· ouvert — 236 px, PAR-DESSUS le contenu, avec un voile qui le referme.
⚠️ Ouvert, il se pose par-dessus au lieu de pousser la page : décaler le
contenu de 180 px sur un écran de 390 rendrait illisible ce qu'on est en
train de consulter, et le geste « je regarde où aller » ne doit pas défaire
la mise en page de ce qu'on lit.
Placé APRÈS le bloc « MOBILE ET TABLETTE » — c'est le seul endroit de ce
fichier où l'ordre joue en notre faveur : ces règles doivent gagner sur
celles de la bande d'onglets qu'elles remplacent.
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
:root { --rail-mini: 56px; }
body { padding-left: var(--rail-mini); }
.nav {
position: fixed; top: 0; left: 0; bottom: 0; right: auto;
width: var(--rail-mini); z-index: 60;
border-bottom: 0; border-right: 2px solid var(--sand);
overflow: visible;
background:
radial-gradient(320px 180px at 0% 0%, rgba(224,192,144,.13), transparent 70%),
linear-gradient(180deg, var(--night) 0%, var(--night-3) 100%);
transition: width .22s cubic-bezier(.22,1,.36,1);
}
.nav-inner {
position: relative;
flex-direction: column; align-items: stretch; justify-content: flex-start;
height: 100%; max-width: none; gap: 0; padding: 14px 8px 12px;
overflow: hidden;
}
.brand { margin: 0 0 30px; padding: 0; justify-content: center; flex: 0 0 auto; }
.brand .mark { width: 32px; height: 32px; }
.brand .libelle { display: none; }
.nav-links {
flex-direction: column; margin-left: 0; gap: 3px;
overflow: visible; min-width: 0;
}
.nav-links a {
height: 44px; padding: 0; gap: 0; justify-content: center;
border-radius: 9px; border-bottom: 0; margin-bottom: 0; position: relative;
}
/* Le libellé reste dans le DOM (il est simplement hors écran) : un lecteur
d'écran continue de l'annoncer, et il réapparaît quand le rail s'ouvre. */
.nav-links a > span {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.nav-links a .ic { display: block; width: 21px; height: 21px; opacity: .85; }
.nav-links a.active { background: var(--night-2); }
.nav-links a.active .ic { color: var(--sand); opacity: 1; }
.nav-links a.active::before {
content: ""; position: absolute; left: -8px; top: 9px; bottom: 9px;
width: 3px; border-radius: 0 3px 3px 0; background: var(--sand);
}
.nav-compte {
margin: auto 0 0; padding: 12px 0 0; gap: 8px;
flex-direction: column; align-items: center;
border-left: 0; border-top: 1px solid rgba(255,255,255,.16);
}
.nav-qui { gap: 0; }
.nav-nom { display: none; }
.nav-logout { width: 100%; }
.nav-logout button { width: 100%; padding: 0; min-height: 38px; justify-content: center; }
.nav-logout-mot {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Le bouton : sous le blason, centré. Cible tactile de 40 px. */
.rail-pli {
display: inline-flex; position: static; align-self: center;
width: 40px; height: 40px; margin: -18px 0 14px;
}
/* ── Ouvert : le rail passe PAR-DESSUS ───────────────────────────────── */
.rail-ouvert .nav { width: 236px; box-shadow: 8px 0 28px rgba(9, 14, 22, .38); }
.rail-ouvert .nav-inner { padding: 16px 12px 14px; }
.rail-ouvert .brand { justify-content: flex-start; margin-bottom: 22px; }
.rail-ouvert .brand .mark { width: 36px; height: 36px; }
.rail-ouvert .brand .libelle { display: inline; }
.rail-ouvert .nav-links a { justify-content: flex-start; padding: 0 12px; gap: 12px; }
.rail-ouvert .nav-links a > span {
position: static; width: auto; height: auto; margin: 0;
overflow: visible; clip: auto;
}
.rail-ouvert .nav-links a.active::before { left: 0; }
.rail-ouvert .nav-compte { align-items: stretch; padding: 12px 4px 0; }
.rail-ouvert .nav-nom { display: inline; }
.rail-ouvert .nav-logout button { justify-content: center; }
.rail-ouvert .nav-logout-mot {
position: static; width: auto; height: auto; margin: 0;
overflow: visible; clip: auto;
}
.rail-ouvert .rail-pli {
position: absolute; top: 18px; right: 10px; margin: 0;
transform: rotate(180deg);
}
/* Le voile : il referme le rail, et il dit qu'on est en surcouche. Il ne
porte pas de texte — le bouton reste accessible au clavier pour fermer. */
.rail-voile {
position: fixed; inset: 0; z-index: 55;
background: rgba(9, 14, 22, .5);
border: 0; padding: 0; cursor: pointer;
animation: voile-entre .18s ease-out;
}
@keyframes voile-entre { from { opacity: 0; } to { opacity: 1; } }
.rail-voile[hidden] { display: none; }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
.nav, .rail-voile { transition: none; animation: none; }
}
/* Sous 380 px, le rail mini se resserre encore : sur un petit téléphone,
56 px de gouttière laissaient trop peu au contenu. */
@media (max-width: 380px) {
:root { --rail-mini: 50px; }
.nav-links a .ic { width: 19px; height: 19px; }
}
/* ═══════════════════════════════════════════════════════════════════════════
LA PAGE LISTES SUR TÉLÉPHONE (21/09/2026)
Trois défauts constatés sur un iPhone 13, dans l'ordre où ils gênent :
1. les dix rayons se CHEVAUCHAIENT — même cause que les onglets de
recommandation : le conteneur comprimait les segments sous la largeur de
leur texte, qui ne se coupe pas ;
2. le sélecteur de compte prenait un écran et demi avant d'atteindre la
première liste ;
3. le tableau de dix colonnes imposait un défilement horizontal, c'est-à-
dire l'un des deux gestes qu'on ne fait jamais sur un téléphone.
══════════════════════════════════════════════════════════════════════════ */
/* 1. Les rayons défilent au doigt, ils ne se compriment plus. Dix segments
courts (« DCD », « MDF ») : le défilement horizontal est ici le bon geste,
là où l'enveloppement en ferait trois lignes de pastilles. */
nav.listes-onglets {
flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
nav.listes-onglets::-webkit-scrollbar { display: none; }
nav.listes-onglets > a { flex: 0 0 auto; }
/* Au-dessus de 900 px, le club a sa colonne : la ligne sous le nom ferait
doublon. */
.lg .lg-club { display: none; }
.lg .c-actions { width: 104px; }
@media (max-width: 900px) {
/* 2. Le sélecteur de compte devient une rangée qui défile : on choisit un
compte en passant le doigt, au lieu de dérouler quatre cartes pleine
largeur avant d'atteindre le contenu de la page. */
.lsel-grille {
display: flex; flex-wrap: nowrap; gap: 8px;
overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
}
.lsel-grille::-webkit-scrollbar { display: none; }
.lsel-carte {
flex: 0 0 auto; width: auto; min-width: 0; gap: 9px;
padding: 9px 13px 9px 10px;
}
.lsel-av { width: 30px; height: 30px; font-size: 12px; }
.lsel-nom { font-size: 14px; }
.lsel-role { font-size: 10.5px; }
.lsel-n { flex-direction: row; align-items: baseline; gap: 4px; }
.lsel-n b { font-size: 17px; }
.lsel-n small { font-size: 10.5px; }
/* 3. Le tableau tient dans l'écran : on retire la largeur minimale (qui
imposait le défilement) et on laisse tomber les colonnes que la fiche du
joueur donne de toute façon en un tap — club, championnat, âge, poste,
valeur. Restent le rang, le nom, les deux moyennes et les commandes,
c'est-à-dire ce qui fait la liste : un ORDRE et des noms. */
.lg .table-scroll { overflow-x: visible; }
/* ⚠️ `table-layout: fixed` : en disposition automatique, le club sous le nom
(« Bayern Munich · Bundesliga ») imposait sa largeur à la colonne et
poussait les commandes hors de la carte. En disposition fixe, les largeurs
déclarées font loi et c'est le texte qui se coupe — ce qui est le bon
arbitrage : le rang, la note et les commandes sont la raison d'être de
cette page, le nom du championnat non. */
.lg table.grid { min-width: 0; table-layout: fixed; width: 100%; }
.lg .lg-rang { width: 40px; }
.lg .c-act { width: 46px; }
.lg .name { overflow: hidden; }
.lg .lg-club { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg .c-age, .lg .c-poste, .lg .c-champ, .lg .c-val, .lg .c-club { display: none; }
/* Le nom ne se coupe plus en deux lignes une fois la place rendue. */
.lg .name-link { white-space: nowrap; }
.lg .name-link .first { font-size: .85em; }
.lg table.grid td, .lg table.grid th { padding: 9px 8px; }
.lg .name-link { font-size: 15px; }
/* Le club passe SOUS le nom : l'information reste, elle change de place. */
.lg .name .lg-club {
display: block; font-size: 11.5px; color: var(--muted);
font-weight: 400; margin-top: 1px;
}
/* ⚠️ JAMAIS `display:flex` sur un `` : la déclaration remplace
`display: table-cell`, la cellule sort de la table, et les boutons se
dessinent PAR-DESSUS le nom du joueur (constaté ici même). On aligne donc
en ligne, et ce sont les formulaires qui portent le `inline-flex`. */
.lg-actions { white-space: nowrap; text-align: right; }
.lg-actions form { display: inline-flex; margin: 0; }
.lg .c-actions { width: 100px; white-space: nowrap; padding-left: 0; padding-right: 6px; }
.lg-actions .icon-btn { width: 30px; height: 30px; min-width: 30px; min-height: 30px; }
.lg-actions { gap: 2px; }
.lg-tete { flex-wrap: wrap; }
}
@media (max-width: 420px) {
/* Sur les plus petits écrans, les moyennes passent en une seule colonne :
deux pastilles côte à côte plus les trois commandes ne tiennent pas. */
.lg .c-pot { display: none; }
}
/* ── Téléphone (≤ 720 px) : le rayon n'est plus un tableau ─────────────────
Entre 721 et 900 px (tablette), masquer des colonnes suffit — le tableau
respire encore. Sous 720, non : quatre colonnes plus trois commandes de
38 px ne tiennent pas dans 300 px utiles, et tout ce qu'on peut faire est
rogner l'un ou l'autre. Or les cibles tactiles de 38 px sont un acquis
(audit du 17/08/2026) qu'on ne reprend pas pour faire entrer une colonne.
Les éléments du tableau passent donc en blocs : une LIGNE par joueur, le
rang en pastille à gauche, la note en haut à droite, les commandes sur leur
propre rangée. Le balisage ne bouge pas — c'est toujours un ``, avec
ses en-têtes pour les lecteurs d'écran et son ordre de lecture intact. */
@media (max-width: 720px) {
.lg table.grid { display: block; table-layout: auto; }
.lg table.grid thead { display: none; }
.lg table.grid tbody { display: block; }
.lg table.grid tr {
display: block; position: relative;
padding: 12px 12px 10px 56px;
border-top: 1px solid var(--line); cursor: default;
}
.lg table.grid tr:first-child { border-top: 0; }
/* ⚠️ `height: auto` : le bloc tactile de l'audit d'août pose
`.grid tbody td { height: 44px }` pour donner de la prise au doigt. Sur une
VRAIE cellule de tableau, `height` agit comme un minimum ; sur une cellule
passée en bloc, c'est une hauteur FERME — et la ligne « club · championnat »
sous le nom se retrouvait coupée par le `overflow: hidden` de la cellule.
Invisible à l'inspection du DOM (l'élément est bien là, avec sa taille et
sa couleur), visible seulement à l'écran. */
.lg table.grid td { display: block; padding: 0; border: 0; height: auto; }
/* ⚠️ Re-masquer EXPLICITEMENT les colonnes repliées : la règle qui passe les
cellules en blocs est plus spécifique que le `display: none` posé par
palier plus haut, et les colonnes masquées réapparaissaient les unes sous
les autres — âge, poste, club, championnat, valeur, chacun sur sa ligne. */
.lg table.grid td.c-age, .lg table.grid td.c-poste, .lg table.grid td.c-champ,
.lg table.grid td.c-val, .lg table.grid td.c-club, .lg table.grid td.c-pot { display: none; }
.lg .lg-rang { position: absolute; left: 12px; top: 12px; }
.lg .lg-rang .tnum { width: 30px; height: 30px; }
/* La note reste en haut à droite : c'est la colonne qu'on balaie du regard
en descendant une liste classée. */
.lg .c-act {
position: absolute; right: 12px; top: 10px; width: auto;
text-align: right !important;
}
.lg .name { padding-right: 52px; }
.lg .name-link { white-space: normal; font-size: 16px; }
.lg .lg-club { white-space: normal; }
.lg .lg-memo { display: block; margin-top: 3px; }
/* Les commandes prennent leur propre rangée, alignées à gauche sous le nom :
à droite, le pouce les atteint moins bien sur un grand téléphone. */
/* Pas de filet au-dessus des commandes : `.lg table.grid td { border: 0 }`
(même bloc, sélecteur plus spécifique) l'emporterait, et une déclaration
qui ne peint rien est un piège pour la prochaine lecture. L'espace suffit
à séparer. */
.lg .c-actions { width: auto; padding: 10px 0 0; text-align: left; margin-top: 2px; }
/* ⚠️ Sélecteurs alignés sur ceux qu'ils doivent battre. La règle qui passe
les cellules en blocs (`.lg table.grid td`) est plus spécifique qu'un
simple `.lg-actions`, et l'alignement à droite posé pour la tablette porte
exactement le même sélecteur que celui-ci : à spécificité égale, seul
l'ordre tranche, et il ne suffisait pas ici. On reprend donc le sélecteur
complet côté cellule, et on réécrit `.lg-actions` tel quel pour le reste. */
.lg table.grid td.lg-actions {
display: flex; gap: 8px; justify-content: flex-start; align-items: center;
}
.lg-actions { text-align: left; white-space: normal; }
.lg-actions .icon-btn { width: 38px; height: 38px; min-width: 38px; min-height: 38px; }
}
/* ── Champs à 16 px : deux oublis, trouvés par le test ────────────────────
Sous 16 px, iOS ZOOME à la sélection d'un champ et laisse la page décalée —
le scout doit pincer pour revenir. La règle existait pour les champs des
filtres ; ces deux-là y avaient échappé parce qu'ils sont déclarés dans des
sections postérieures (la recherche du bandeau, l'ajout rapide d'un joueur).
Le garde-fou de `test_mobile` les attrape désormais tous. */
@media (max-width: 720px) {
.quart-rech input, .nj-vite input { font-size: 16px; }
}
/* ── Photos de joueurs (28-29/09/2026) ──────────────────────────────────────
Balise `{% avatar p "" %}` (players_extras) : la photo TM rapatriée
(cf. players/photos.py), sinon les initiales. Classes toutes neuves, posées
en fin de fichier : aucune règle plus ancienne ne les dispute.
Les portraits TM (`header`, 139×181) sont des GROS PLANS déjà serrés sur le
visage, yeux vers 40 % de la hauteur. Deux leçons du premier essai :
- sous ~32 px, un visage ne se reconnaît plus : on ne descend pas en dessous
sur les écrans de lecture (liste, tableau de bord, rapports) ;
- rien ne se pose SUR la photo (le bandeau de poste masquait la bouche et le
menton) : l'étiquette passe sous le portrait. */
.avatar {
display: inline-flex; flex: none; align-items: center; justify-content: center;
position: relative; overflow: hidden; border-radius: 50%; vertical-align: middle;
background: var(--night-2); color: var(--night-mut);
font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
letter-spacing: .3px; line-height: 1; text-transform: uppercase;
}
.avatar img {
width: 100%; height: 100%; display: block;
object-fit: cover; object-position: 50% 28%;
}
/* Filet intérieur : détache le visage du fond blanc sans cadre dur. */
.avatar::after {
content: ""; position: absolute; inset: 0; border-radius: inherit;
box-shadow: inset 0 0 0 1px rgba(20,24,26,.12); pointer-events: none;
}
/* Initiales sur fond clair : grises, jamais Calico — la lumière ne décore pas. */
.avatar--vide { background: #EEF1F4; color: var(--muted); }
.avatar--mini { width: 30px; height: 30px; font-size: 11px; }
.avatar--ligne { width: 38px; height: 38px; font-size: 13px; }
.avatar--liste { width: 40px; height: 40px; font-size: 13px; margin-right: 12px; }
.avatar--ml { width: 40px; height: 40px; font-size: 13px; }
/* Portrait de fiche : au format de la photo (3:4), jamais rogné en rond. */
.avatar--hero {
width: 116px; height: 151px; border-radius: 10px;
background: var(--night-3);
box-shadow: 0 10px 26px rgba(0,0,0,.35), 0 0 0 1px rgba(224,192,144,.35);
}
.avatar--hero::after { box-shadow: inset 0 -40px 30px -30px rgba(18,26,38,.45); }
/* Liste (tableau) et listes par poste : photo + nom en bloc aligné. */
.name-link:has(.avatar--liste) { display: inline-flex; align-items: center; }
/* ── Portraits verticaux (29/09) ──
Les ronds glissés au milieu d'une ligne se lisaient comme des pastilles
collées sur le texte (retour de la cellule). Partout hors liste Joueurs :
le MÊME langage que la carte et la fiche, qui plaisent — un portrait 3:4
aux coins doux, posé EN TÊTE, jamais dans le fil du texte, avec le nom et
son contexte empilés à droite. Trois tailles seulement :
ps = 34×44 (lignes denses : échéances, suivis, matchs, compo, direct)
pm = 42×55 (listes par poste, journal du tableau de bord)
pl = 54×70 (flux des rapports) */
.avatar--ps, .avatar--pm, .avatar--pl { border-radius: 7px; background: var(--night-3); }
.avatar--ps.avatar--vide, .avatar--pm.avatar--vide, .avatar--pl.avatar--vide { background: #EEF1F4; }
.avatar--ps { width: 34px; height: 44px; font-size: 12px; border-radius: 6px; }
.avatar--pm { width: 42px; height: 55px; font-size: 14px; }
.avatar--pl { width: 54px; height: 70px; font-size: 16px; border-radius: 8px; }
/* Bloc d'identité générique : portrait + textes empilés. */
.ident { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ident-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ident-txt .name-link { padding: 0; }
.lg .ident-txt .lg-memo { margin-top: 2px; }
/* Tableau de bord, matchs : portrait + texte alignés. */
.avec-avatar { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.ligne-reg:has(.avatar) { align-items: center; }
/* Journal du tableau de bord (refonte du 29/09) : photo | qui + verdict + où +
extrait | quand/par qui. La date n'a plus sa colonne vide à gauche, le
verdict colle au nom, et TOUTE la ligne ouvre la fiche (lien étiré). */
.entree.entree--v2 {
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center; gap: 0 14px; padding: 11px 16px; cursor: pointer;
}
.entree--v2 .e-corps { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.entree--v2 .e-l1 { display: flex; align-items: center; gap: 10px; min-width: 0; }
.entree--v2 .qui {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.15;
}
.entree--v2 .e-l1 .reco { flex: none; }
.entree--v2 .e-lien::after { content: ""; position: absolute; inset: 0; }
.entree--v2 .e-lien:focus-visible { outline: none; }
.entree--v2:has(.e-lien:focus-visible) { outline: 2px solid var(--night); outline-offset: -2px; }
.entree--v2 .ou { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.entree--v2 .dit {
grid-column: auto; margin: 3px 0 0; font-size: 13px; color: var(--muted);
-webkit-line-clamp: 1;
}
.entree--v2 .e-meta {
display: flex; flex-direction: column; align-items: flex-end; gap: 3px;
align-self: start; padding-top: 2px; white-space: nowrap;
}
.entree--v2 .e-meta .quand { color: var(--ink-2); font-weight: 700; }
.entree--v2 .e-meta .par-qui {
font-family: 'Barlow Condensed', sans-serif; font-weight: 600;
text-transform: uppercase; letter-spacing: .8px; font-size: 11px; color: var(--muted);
}
.entree--v2:hover .qui { text-decoration: underline; }
/* Registres de droite : toute la ligne ouvre la fiche, comme le journal. */
.ligne-reg:has(.avatar) { position: relative; cursor: pointer; }
.ligne-reg:has(.avatar) .nom::after { content: ""; position: absolute; inset: 0; }
/* Flux des rapports : portrait en colonne, tout le corps de la carte à droite. */
.fx-corps--photo { display: flex; align-items: flex-start; gap: 16px; }
.fx-corps--photo > .avatar { margin-top: 2px; }
.fx-corps-txt { flex: 1 1 auto; min-width: 0; }
/* Carte de la liste : un vrai portrait (3:4) à la place de la plaque, le poste
en étiquette SOUS la photo, à cheval sur son bord — jamais sur le visage. */
.cj-portrait {
flex: none; align-self: flex-start; position: relative;
display: flex; flex-direction: column; align-items: center;
width: 64px; padding-bottom: 9px; margin-right: 4px;
}
/* La carte est une grille dont la 1re colonne vaut 54 px (la plaque) : le
portrait, plus large, débordait sur le nom. */
.carte-j:has(.cj-portrait) { grid-template-columns: 64px minmax(0, 1fr); column-gap: 14px; }
.cj-portrait .avatar--carte {
width: 64px; height: 84px; border-radius: 8px; background: var(--night-3);
}
.cj-portrait-poste {
position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
min-width: 34px; padding: 2px 7px; border-radius: 999px; text-align: center;
font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
font-size: 12px; line-height: 14px; letter-spacing: .5px;
background: var(--night); color: var(--sand);
border: 2px solid var(--surface);
}
/* Match en direct : dans la carte du joueur, pas sur le jeton du terrain (la
ligne arrière y est déjà à la limite de la lisibilité). Dans la grille
compacte (résumé en colonne), la photo passe au-dessus du nom. */
.ml-joueur summary .avatar + .ml-nom { margin-right: auto; }
.ml-liste-compacte .ml-joueur summary .avatar--ps { width: 40px; height: 52px; margin-bottom: 4px; }
.ml-bilan-qui { align-items: center; }
@media (max-width: 720px) {
.avatar--hero { width: 84px; height: 110px; }
.avatar--liste { width: 34px; height: 34px; margin-right: 9px; }
.avatar--pl { width: 44px; height: 57px; }
.fx-corps--photo { gap: 12px; }
/* Téléphone : la colonne quand/qui passerait sous le nom ; elle rejoint la
ligne du lieu, en petit, et le verdict reste collé au nom. */
.entree.entree--v2 { grid-template-columns: auto minmax(0, 1fr); gap: 0 12px; }
/* L'ancienne règle mobile (`.entree > span:not(.quand)…`) enverrait la
photo — un — seule sur sa ligne. Elle pèse (0,3,1) : ces sélecteurs
portent l'élément pour passer devant. */
article.entree.entree--v2 > span.avatar { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
article.entree.entree--v2 > div.e-corps { grid-column: 2; grid-row: 1; }
article.entree.entree--v2 > div.e-meta { grid-row: 2; }
.entree--v2 .e-meta {
grid-column: 2; flex-direction: row; gap: 8px; align-items: center; padding-top: 3px;
}
.entree--v2 .e-l1 { flex-wrap: wrap; row-gap: 4px; }
}
/* ── Bandeau de fiche : sur UNE ligne (29/09/2026) ─────────────────────────
Demande de la cellule : avec beaucoup de pastilles (prêt, statut, Comparer,
Transfermarkt…), `.hero-lead` repliait et le mini-terrain tombait sous la
photo — le bandeau doublait de hauteur. Les crans se règlent sur la largeur
du BANDEAU (container query), pas de l'écran : rail ouvert ou rangé, la
place réelle n'est pas la même.
- Partout : les commandes reprennent la taille des étiquettes (13 px —
`.chip-cmd` héritait des 15 px du corps via `font: inherit`).
- ≥ 900 px de bandeau : rien ne passe à la ligne. En dernier recours, les
ÉTIQUETTES (championnat, statut, « Prêté par ») se raccourcissent en « … »
(jamais sous ~7 caractères, texte complet en infobulle) — les commandes
jamais : « Ex… » ne se lit plus.
- 900-1199 px : commandes en ICÔNE SEULE (libellé conservé pour les
lecteurs d'écran, infobulle `title`).
- < 900 px (tablette, téléphone) : repli d'origine — photo, terrain et
valeurs ne laissent plus la place d'une ligne de pastilles lisible. */
.hero-top { container: hero-top / inline-size; }
.hero-meta .chip-txt { margin-left: 5px; }
.hero-meta .chip-cmd { font-size: 13px; }
@container hero-top (min-width: 900px) {
.hero-lead { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; gap: 18px; }
.hero-lead > .hero-id { flex: 1 1 auto; min-width: 0; }
.hero-val { flex: 0 0 auto; }
.hero-id > .hero-meta { flex-wrap: nowrap; gap: 6px; }
.hero-id > .hero-meta > * { flex: 0 0 auto; white-space: nowrap; }
.hero-id > .hero-meta .chip-cmd { padding: 3px 9px; min-height: 28px; }
.hero-id > .hero-meta > .badge { max-width: 16em; overflow: hidden; text-overflow: ellipsis; }
.hero-id > .hero-meta > .chip:not(.chip-cmd) {
flex: 0 1 auto; min-width: 6em; overflow: hidden; text-overflow: ellipsis;
}
}
@container hero-top (min-width: 900px) and (max-width: 1199px) {
.hero-id > .hero-meta .chip-cmd { min-width: 32px; justify-content: center; padding: 3px 8px; }
.hero-id > .hero-meta .chip-txt {
position: absolute; width: 1px; height: 1px; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap; margin: 0;
}
.hero-id > .hero-meta > .tm-link { display: inline-flex; align-items: center; min-height: 28px; }
}
/* ═══════════════════════════════════════════════════════════════════════════
MISSIONS (30/09/2026)
Deux faces du même pilotage : la couverture montre les trous des listes, la
mission les bouche. Mêmes registres que l'accueil (`.bloc`, portrait en tête
de ligne, nom en Barlow Condensed) — ce ne sont pas de nouveaux objets, ce
sont de nouvelles lignes dans les mêmes carnets.
Couleurs d'état : rouge = jamais vu, ambre = vu il y a longtemps, sable =
vu une seule fois, nuit = à jour. PAS de vert : il appartient aux
percentiles StatsBomb, et « à jour » n'est pas un jugement de valeur.
══════════════════════════════════════════════════════════════════════════ */
.page-sub a { color: var(--night); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
/* Filtre « scout » : une étiquette et un menu, rien de plus. */
.mi-filtre { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; }
.mi-filtre label {
font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 13px;
text-transform: uppercase; letter-spacing: .8px; color: var(--muted);
}
.mi-filtre select {
font: inherit; font-size: 14px; padding: 7px 10px; min-height: 36px;
border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--surface);
}
.mi-bloc + .mi-bloc { margin-top: 22px; }
.mi-n { font-weight: 600; color: var(--muted); margin-left: 6px; }
/* Étiquettes d'état — texte TOUJOURS présent, la couleur ne fait que doubler. */
.mi-etat, .cv-etat {
display: inline-flex; align-items: center; white-space: nowrap;
font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 11.5px;
text-transform: uppercase; letter-spacing: .7px;
padding: 2px 8px; border-radius: 999px; border: 1px solid transparent;
}
.mi-retard { background: var(--error-bg); color: var(--error-fg); border-color: var(--error-line); }
.mi-faite { background: var(--paper); color: var(--ink-2); border-color: var(--line-2); }
.mi-encours { background: var(--sand-voile); color: var(--sand-fg); border-color: var(--sand); }
a.mi-etat:hover { text-decoration: underline; }
/* ── Une ligne de mission ── */
.mi-ligne {
display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 14px;
align-items: start; padding: 12px 16px; border-bottom: 1px solid var(--line);
}
.mi-ligne:last-child { border-bottom: 0; }
.mi-ligne.est-retard { background-image: linear-gradient(90deg, rgba(188,67,45,.07), rgba(188,67,45,0) 55%); }
.mi-l1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mi-nom {
font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 18px; color: var(--ink);
}
.mi-nom:hover { text-decoration: underline; }
.mi-ou { font-size: 13px; color: var(--ink-2); }
.mi-ou .sep, .fm-titre .sep, .cv-ou .sep { color: var(--line-2); margin: 0 6px; }
.mi-quoi { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 3px;
font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 14px; color: var(--night); }
.mi-libre { color: var(--muted); font-weight: 500; }
.mi-consigne, .fm-consigne, .cv-memo {
margin: 5px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2);
max-width: 75ch; white-space: pre-line;
}
.mi-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.mi-qui {
font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 12px;
text-transform: uppercase; letter-spacing: .8px; color: var(--muted);
}
.mi-lien { font-size: 13px; font-weight: 600; color: var(--night); text-decoration: underline; text-underline-offset: 3px; }
/* ── Formulaire « confier une mission » (fenêtre de fiche + couverture) ── */
.mi-form { gap: 12px; }
.mi-grille { display: flex; flex-wrap: wrap; gap: 12px; }
.mi-grille > .rf-field:first-child { flex: 1 1 180px; }
.mi-grille .mi-match { flex: 2 1 220px; }
.mi-form textarea { min-height: 64px; }
.mi-pied { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mi-aide { font-size: 12.5px; color: var(--muted); }
/* ── Bandeau des missions sur la fiche ── */
.fiche-missions { display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; }
.fm-ligne {
display: flex; align-items: flex-start; gap: 12px; padding: 11px 14px;
background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--sand);
border-radius: var(--radius);
}
.fm-ligne.est-retard { border-left-color: var(--bad); }
.fm-ligne > .ic { flex: 0 0 auto; margin-top: 2px; color: var(--sand-fg); }
.fm-corps { flex: 1 1 auto; min-width: 0; }
.fm-titre { margin: 0; font-size: 14px; color: var(--ink); display: flex; align-items: center; flex-wrap: wrap; gap: 0 2px; }
.fm-titre .mi-etat { margin-left: 8px; }
/* Abréviation de poste en pastille nuit (dossier face-à-face). */
.cv-abbr {
font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 12px;
background: var(--night); color: var(--sand); border-radius: 4px; padding: 1px 6px; letter-spacing: .5px;
}
@media (max-width: 900px) {
.mi-ligne { grid-template-columns: auto minmax(0, 1fr); }
.mi-meta { grid-column: 2; align-items: flex-start; }
.mi-filtre select, .mi-form input, .mi-form select, .mi-form textarea { font-size: 16px; }
}
/* ═══════════════════════════════════════════════════════════════════════════
FACE-À-FACE — sélection et synthèse (30/09/2026)
Trois temps sur une page — le poste, les candidats, le dossier. Le dossier
est une grille : une colonne par candidat, les mêmes rubriques à la même
hauteur, parce que c'est l'alignement qui fait la comparaison.
Les citations des rapports sont en sable pâle, comme l'exergue du PDF :
c'est la parole d'un scout, pas celle de l'IA.
══════════════════════════════════════════════════════════════════════════ */
.cm-etape { margin-bottom: 26px; }
.cm-etape-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.cm-etape-tete .cm-etape-t { margin: 0; }
.cm-etape-t {
display: flex; align-items: center; gap: 10px; margin: 0 0 12px;
font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 18px;
text-transform: uppercase; letter-spacing: .6px; color: var(--night);
}
.cm-etape-t small { font-family: 'Barlow', sans-serif; font-weight: 400; font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--muted); }
.cm-num {
display: inline-flex; align-items: center; justify-content: center;
width: 24px; height: 24px; border-radius: 50%;
background: var(--night); color: var(--sand); font-size: 14px;
}
.cm-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cm-postes { display: flex; flex-wrap: wrap; gap: 8px; }
.cm-poste {
display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 6px 12px;
background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius);
font-size: 14px; font-weight: 600; color: var(--ink);
}
.cm-poste:hover { border-color: var(--night); }
.cm-poste.est-courant { background: var(--night); border-color: var(--night); color: var(--on-night); }
.cm-cands { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.cm-cand {
display: flex; align-items: center; gap: 12px; padding: 10px 12px; cursor: pointer;
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.cm-cand:has(input:checked) { border-color: var(--sand-2); box-shadow: inset 3px 0 0 var(--sand); background: var(--sand-voile); }
.cm-cand:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.cm-cand input { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--night); }
.cm-cand-txt { display: flex; flex-direction: column; min-width: 0; }
.cm-cand-txt b { font-family: 'Barlow Condensed', sans-serif; font-size: 16px; color: var(--ink); }
.cm-cand-txt span { font-size: 12.5px; color: var(--ink-2); }
.cm-cand-txt .cm-cand-listes { color: var(--muted); font-size: 12px; }
.cm-choix-pied { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.cm-rien { margin: 4px 16px 14px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.cm-erreur { margin: 4px 16px 8px; font-size: 13px; color: var(--error-fg); }
.cm-synthese { padding: 0 16px 14px; }
.cm-synthese[aria-busy="true"] { opacity: .6; }
.cm-synthese .cm-rien, .cm-synthese .cm-erreur { margin-left: 0; margin-right: 0; }
.cm-sous {
margin: 8px 0 6px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
font-size: 12px; text-transform: uppercase; letter-spacing: .8px; color: var(--ink-2);
}
.cm-point { margin-bottom: 10px; padding-left: 10px; border-left: 3px solid var(--line-2); }
.cm-point.cm-force { border-left-color: var(--night-2); }
.cm-point.cm-reserve { border-left-color: var(--warn); }
.cm-point-t { margin: 0 0 4px; font-size: 14px; font-weight: 600; color: var(--ink); }
.cm-preuve {
margin: 0; padding: 7px 10px; background: var(--sand-voile); border-radius: 4px;
font-size: 13px; line-height: 1.5; color: var(--ink-2); font-style: italic;
}
.cm-preuve cite { display: block; margin-top: 3px; font-style: normal; font-size: 11.5px; color: var(--muted); }
.cm-meta { margin: 8px 0 0; font-size: 11.5px; color: var(--muted); }
.cm-rediger { margin: 2px 0 4px; }
@media (max-width: 900px) {
.cm-cands { grid-template-columns: minmax(0, 1fr); }
}
.lg-comite { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--night); text-decoration: underline; text-underline-offset: 3px; }
/* ═══════════════════════════════════════════════════════════════════════════
FACE-À-FACE — la comparaison (30/09/2026, 2e version)
Demande de la cellule : « comparer en un œil, percutant, visuel, présentable
à un président ou un coach ». Chaque joueur a SA couleur (--j1 nuit, --j2
sable foncé, --j3 bleu acier) qui le suit de la carte au radar et à l'en-tête
de la carte de chaleur. Les percentiles gardent leurs couleurs à eux (vert
→ rouge) : ils disent « fort / faible », pas « qui ».
══════════════════════════════════════════════════════════════════════════ */
:root { --j1: #1B2738; --j2: #B08A46; --j3: #3E7CB1; }
.fa-j1 { --j: var(--j1); } .fa-j2 { --j: var(--j2); } .fa-j3 { --j: var(--j3); }
.fa-une { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.fa-carte {
background: var(--surface); border: 1px solid var(--line); border-top: 6px solid var(--j);
border-radius: var(--radius); box-shadow: var(--shadow); display: flex; flex-direction: column;
}
.fa-tete { display: flex; gap: 12px; align-items: center; padding: 14px 16px 10px; position: relative; }
.fa-id { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.fa-nom { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 23px; line-height: 1.05; color: var(--j); text-transform: uppercase; }
.fa-j2 .fa-nom { color: #7A5A1E; }
.fa-nom:hover { text-decoration: underline; }
.fa-det { font-size: 12.5px; color: var(--ink-2); }
.fa-verdict {
align-self: flex-start; margin-top: 5px; padding: 3px 9px; border-radius: 999px; border: 1px solid transparent;
font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px;
}
.fa-tuiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 4px 16px 12px; }
.fa-tuile {
display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 4px;
background: var(--paper); border-radius: 6px; min-width: 0;
}
.fa-tuile .l { font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); font-weight: 600; }
.fa-tuile .v { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 21px; line-height: 1.1; color: var(--ink);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.fa-tuile.est-alerte { background: var(--error-bg); }
.fa-tuile.est-alerte .v, .fa-tuile.est-alerte .l { color: var(--error-fg); }
.fa-ppi.p-elite { background: var(--p-elite-bg); } .fa-ppi.p-elite .v, .fa-ppi.p-elite .l { color: var(--p-elite-fg); }
.fa-ppi.p-good { background: var(--p-good); } .fa-ppi.p-avg { background: var(--p-avg); }
.fa-ppi.p-low { background: var(--p-low); }
.fa-ppi.p-poor { background: var(--p-poor-bg); } .fa-ppi.p-poor .v, .fa-ppi.p-poor .l { color: var(--p-poor-fg); }
.fa-ppi.p-good .l, .fa-ppi.p-avg .l, .fa-ppi.p-low .l { color: var(--ink); }
.fa-scouts { padding: 10px 16px 14px; border-top: 1px solid var(--line); margin-top: auto; }
.fa-rub {
margin: 0 0 8px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 13px;
text-transform: uppercase; letter-spacing: .8px; color: var(--sand-fg);
}
.fa-rub small { font-family: 'Barlow', sans-serif; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted); font-size: 12px; }
.fa-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fa-note { display: flex; align-items: baseline; justify-content: center; gap: 8px; padding: 8px; border-radius: 6px; border: 1px solid transparent; }
.fa-note .v { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 28px; line-height: 1; }
.fa-note .l { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; font-weight: 700; }
.fa-recos { display: flex; height: 12px; margin-top: 10px; border-radius: 6px; overflow: hidden; background: var(--paper); }
.fa-reco-seg { display: block; height: 100%; }
.rs-avancer { background: var(--sand); } .rs-suivre { background: var(--success-fg); } .rs-pas_interet { background: var(--bad); }
.fa-recos-leg { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--ink-2); }
.fa-recos-leg i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: 0; }
.fa-regards { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.fa-stats { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 14px; margin-top: 16px; align-items: start; }
.fa-radar { margin: 0; padding: 14px 16px; }
.fa-radar svg { display: block; width: 100%; height: auto; max-height: 520px; }
.fa-anneau { fill: none; stroke: var(--line); stroke-width: 1; }
.fa-anneau:last-of-type { stroke: var(--line-2); }
.fa-axe { stroke: var(--line); stroke-width: 1; }
.fa-axe-l { font-family: 'Barlow', sans-serif; font-size: 12px; fill: var(--ink-2); }
.fa-serie { fill: var(--j); fill-opacity: .14; stroke: var(--j); stroke-width: 2.5; stroke-linejoin: round; }
.fa-sommet { fill: var(--j); stroke: var(--surface); stroke-width: 1.5; }
.fa-legende { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; font-weight: 600; }
.fa-legende i, .fa-hm thead i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--j); margin-right: 6px; vertical-align: -1px; }
.fa-legende small { font-weight: 400; color: var(--muted); }
.fa-chaleur { padding: 14px 16px; }
.fa-chaleur-cadre { overflow-x: auto; }
.fa-hm { width: 100%; border-collapse: separate; border-spacing: 3px; font-size: 13px; }
.fa-hm thead th {
font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 14px; text-transform: uppercase;
color: var(--j, var(--ink)); text-align: center; padding: 4px 6px; white-space: nowrap;
border-bottom: 3px solid var(--j, transparent);
}
.fa-hm tbody th[scope="row"] { text-align: right; font-weight: 500; color: var(--ink-2); padding: 0 8px 0 0; white-space: nowrap; }
.fa-hm-bloc th {
text-align: left; padding: 10px 0 2px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
font-size: 12px; text-transform: uppercase; letter-spacing: .8px; color: var(--sand-fg);
}
.fa-hm td { text-align: center; padding: 5px 4px; border-radius: 4px; min-width: 64px; font-weight: 700; }
.hm-elite { background: var(--p-elite-bg); color: var(--p-elite-fg); }
.hm-good { background: var(--p-good); color: var(--ink); }
.hm-avg { background: var(--p-avg); color: var(--ink); }
.hm-low { background: var(--p-low); color: var(--ink); }
.hm-poor { background: var(--p-poor-bg); color: var(--p-poor-fg); }
.hm-na { background: var(--paper); color: var(--muted); font-weight: 400; }
.fa-hm td.est-meilleur { box-shadow: inset 0 0 0 2.5px var(--ink); font-size: 14.5px; }
.fa-titre {
margin: 26px 0 10px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 18px;
text-transform: uppercase; letter-spacing: .6px; color: var(--night);
}
.fa-dire { background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--j); border-radius: var(--radius); }
.fa-dire-nom { margin: 0; padding: 10px 16px 0; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 17px; text-transform: uppercase; color: var(--j); }
.fa-j2 .fa-dire-nom { color: #7A5A1E; }
.fa-dire .cm-synthese { padding-top: 4px; }
.cm-point > summary { list-style: none; cursor: pointer; }
.cm-point > summary::-webkit-details-marker { display: none; }
.cm-point > summary::after { content: " ›"; color: var(--muted); }
.cm-point[open] > summary::after { content: " ⌄"; }
.cm-point .cm-preuve { margin-top: 5px; }
@media (max-width: 1100px) {
.fa-stats { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
.fa-une { grid-template-columns: minmax(0, 1fr); }
.fa-tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fa-tete { flex-wrap: wrap; }
}
/* ═══════════════════════════════════════════════════════════════════════════
MISSIONS — tableau et « Confier un joueur » (01/10/2026, 3e version)
Demande de la cellule : « beaucoup plus joli, intuitif, design ». Trois
principes :
- « Confier un joueur » est LE geste de la page : bouton principal, fenêtre
en quatre étapes numérotées, récapitulatif qui se compose avant l'envoi ;
- une mission est une CARTE (joueur, échéance en mots, match, consigne),
la même partout — tableau du pilote et « Mes missions » du scout ;
- l'échéance se lit en délai (« dans 3 j », « en retard de 2 j ») et se
teinte : sable = bientôt, rouge = en retard.
══════════════════════════════════════════════════════════════════════════ */
.mt-head { align-items: center; justify-content: space-between; flex-wrap: wrap; }
.mt-confier-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; font-size: 14px; }
/* ── Compteurs = filtres ── */
.mt-kpis { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; align-items: stretch; }
.mt-kpi {
display: flex; align-items: center; gap: 10px; padding: 10px 18px 10px 14px; min-width: 150px;
background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
box-shadow: var(--shadow); color: var(--ink); transition: border-color .12s, transform .12s;
}
.mt-kpi:hover { border-color: var(--line-2); transform: translateY(-1px); }
.mt-kpi .ic { width: 22px; height: 22px; padding: 7px; box-sizing: content-box; border-radius: 8px; }
.mt-kpi .v { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 28px; line-height: 1; }
.mt-kpi .l { font-size: 13px; color: var(--muted); }
.mt-kpi-voir .ic { background: var(--sand-voile); color: var(--sand-fg); }
.mt-kpi-retard .ic { background: var(--error-bg); color: var(--error-fg); }
.mt-kpi-retard .v { color: var(--bad); }
.mt-kpi-retard.est-nul .v { color: var(--ink); }
.mt-kpi-vus .ic { background: #E6EBF2; color: var(--night); }
.mt-kpi.est-courant { border-color: var(--night); box-shadow: inset 0 0 0 1px var(--night), var(--shadow); }
.mt-tout { align-self: center; font-size: 13px; font-weight: 600; color: var(--night); text-decoration: underline; text-underline-offset: 3px; }
/* ── Filtre par personne ── */
.mt-qui { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.mt-qui-chip {
display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 14px 4px 5px;
border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface);
font-size: 13.5px; font-weight: 600; color: var(--ink-2);
}
.mt-qui-chip:first-child { padding-left: 14px; }
.mt-qui-chip b { font-family: 'Barlow Condensed', sans-serif; font-size: 13px; color: var(--sand-fg);
background: var(--sand-voile); border-radius: 999px; padding: 0 7px; }
.mt-qui-chip:hover { border-color: var(--night); }
.mt-qui-chip.est-courant { background: var(--night); border-color: var(--night); color: var(--on-night); }
.mt-qui-chip.est-courant b { background: rgba(224,192,144,.25); color: var(--sand); }
.mt-qui-av {
display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
border-radius: 50%; background: var(--sand); color: var(--night);
font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 12px;
}
/* ── Colonnes par personne ── */
.mt-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 18px; align-items: start; }
.mt-col { background: #EEF1F5; border-radius: 12px; padding: 0 10px 10px; }
.mt-col-tete {
display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: center;
margin: 0 -10px 10px; padding: 14px 16px 12px; background: var(--night); border-radius: 12px 12px 0 0;
}
.mt-av {
display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
border-radius: 50%; background: var(--sand); color: var(--night);
font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 16px;
}
.mt-col-id h2 {
margin: 0; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 19px;
color: var(--on-night); text-transform: uppercase; letter-spacing: .4px;
}
.mt-col-n { font-size: 12.5px; color: var(--night-mut); }
.mt-col-n b { color: var(--on-night); }
.mt-col-retard { color: #F4A492; font-weight: 600; }
.mt-prog { grid-column: 1 / -1; display: block; height: 5px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; margin-top: 6px; }
.mt-prog > span { display: block; height: 100%; background: var(--sand); border-radius: 3px; }
.mt-sec {
margin: 12px 4px 6px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 12px;
text-transform: uppercase; letter-spacing: 1px; color: var(--muted);
}
/* ── La carte d'une mission ── */
.mt-carte {
display: block; background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
padding: 11px 12px; margin-bottom: 8px; box-shadow: 0 1px 2px rgba(18,26,38,.05);
border-left: 4px solid var(--sand);
}
.mt-carte.est-retard { border-left-color: var(--bad); }
.mt-carte.est-faite, .mt-vu { border-left-color: var(--night); }
.mt-carte-l1 { display: flex; align-items: center; gap: 11px; }
.mt-corps { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.mt-nom { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 17px; color: var(--ink); line-height: 1.15; }
a.mt-nom:hover { text-decoration: underline; }
.mt-det { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-quand { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 9px; }
.mt-ech {
display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px;
font-size: 12.5px; font-weight: 600; background: var(--paper); color: var(--ink-2);
}
.mt-ech-proche { background: var(--sand-voile); color: var(--sand-fg); }
.mt-ech-retard { background: var(--error-bg); color: var(--error-fg); }
.mt-ech-libre { color: var(--muted); font-weight: 500; }
.mt-match { font-size: 12.5px; font-weight: 600; color: var(--night); }
.mt-consigne {
margin: 8px 0 0; padding: 7px 10px; background: var(--paper); border-radius: 6px;
font-size: 13px; line-height: 1.45; color: var(--ink-2);
}
.mt-retirer {
display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: 0 0 auto;
border: 1px solid transparent; border-radius: 8px; background: none; color: var(--muted); cursor: pointer;
}
.mt-retirer:hover { border-color: var(--line-2); color: var(--bad); background: var(--error-bg); }
.mt-fait { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--night); white-space: nowrap; }
.mt-fait:hover { text-decoration: underline; }
.mt-vu > summary { list-style: none; cursor: pointer; }
.mt-vu > summary::-webkit-details-marker { display: none; }
.mt-vu:hover { border-color: var(--line-2); }
.mt-chevron { color: var(--muted); transition: transform .15s; flex: 0 0 auto; }
.mt-vu[open] .mt-chevron { transform: rotate(90deg); }
.mt-verdict { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.mt-note {
display: inline-flex; align-items: baseline; gap: 4px; padding: 2px 9px; border-radius: 999px; border: 1px solid transparent;
font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 15px;
}
.mt-note small { font-family: 'Barlow', sans-serif; font-weight: 600; font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px; opacity: .8; }
.mt-rapport { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line-2); }
.mt-r-concl {
margin: 0 0 8px; padding: 8px 12px; border-left: 3px solid var(--sand); background: var(--sand-voile);
border-radius: 0 6px 6px 0; font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--ink); white-space: pre-line;
}
.mt-r-lab { margin: 6px 0 2px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 11.5px;
text-transform: uppercase; letter-spacing: .8px; color: var(--sand-fg); }
.mt-r-txt { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink); white-space: pre-line; }
.mt-r-meta { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.mt-rapport .mi-lien { display: inline-block; margin-top: 8px; }
.mt-vide {
display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
padding: 48px 20px; background: var(--surface); border: 1px dashed var(--line-2); border-radius: 12px;
}
.mt-vide > .ic { width: 34px; height: 34px; color: var(--sand-fg); }
.mt-vide .vide-aide { max-width: 46ch; margin-bottom: 10px; }
/* « Mes missions » du scout : la même carte, en liste. */
.mt-liste { max-width: 820px; }
.mt-liste + .mt-liste { margin-top: 26px; }
.mt-liste-tete { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 10px; }
.mt-liste-tete h2 { margin: 0; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 17px;
text-transform: uppercase; letter-spacing: .6px; color: var(--night); }
/* ── « Confier un joueur » : la fenêtre en quatre étapes ── */
.mdl-large:modal { width: min(720px, 100%); }
.cf { padding: 6px 20px 18px; }
.cf-etape { padding: 14px 0; border-bottom: 1px solid var(--line); }
.cf-t {
display: flex; align-items: center; gap: 10px; margin: 0 0 10px;
font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 15px;
text-transform: uppercase; letter-spacing: .6px; color: var(--night);
}
.cf-t small { font-family: 'Barlow', sans-serif; font-weight: 400; font-size: 12.5px; text-transform: none; letter-spacing: 0; color: var(--muted); }
.cf-n {
display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
border-radius: 50%; background: var(--night); color: var(--sand); font-size: 13px;
}
.cf-cherche { position: relative; display: flex; align-items: center; }
.cf-cherche > .ic { position: absolute; left: 14px; color: var(--muted); pointer-events: none; }
.cf-cherche input {
width: 100%; min-height: 46px; padding: 10px 14px 10px 42px; font: inherit; font-size: 16px;
border: 1.5px solid var(--line-2); border-radius: 10px; background: var(--surface);
}
.cf-cherche input:focus { outline: none; border-color: var(--night); box-shadow: 0 0 0 3px rgba(27,39,56,.12); }
.cf-cherche[hidden], .cf-joueur[hidden], .cf-sugg[hidden] { display: none; }
.cf-sugg {
position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0; margin: 0; padding: 6px;
list-style: none; background: var(--surface); border: 1px solid var(--line-2); border-radius: 10px;
box-shadow: 0 14px 34px rgba(18,26,38,.18); max-height: 300px; overflow-y: auto;
}
.cf-sugg button {
display: flex; align-items: center; gap: 12px; width: 100%; padding: 7px 8px; background: none;
border: 0; border-radius: 8px; text-align: left; cursor: pointer; font: inherit;
}
.cf-sugg button:hover, .cf-sugg button:focus-visible { background: var(--sand-voile); outline: none; }
.cf-sugg-txt { display: flex; flex-direction: column; min-width: 0; }
.cf-sugg-txt b { font-size: 14.5px; color: var(--ink); }
.cf-sugg-txt span { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-sugg-vide { padding: 10px; font-size: 13px; color: var(--muted); }
.cf-av {
display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
width: 36px; height: 46px; border-radius: 6px; overflow: hidden; background: #EEF1F4;
font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 14px; color: var(--ink-2);
}
.cf-av img { width: 100%; height: 100%; object-fit: cover; }
.cf-joueur {
display: flex; align-items: center; gap: 14px; padding: 10px 12px;
background: var(--sand-voile); border: 1.5px solid var(--sand); border-radius: 10px;
}
.cf-joueur .cf-av { width: 42px; height: 55px; }
.cf-joueur-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cf-joueur-txt b { font-family: 'Barlow Condensed', sans-serif; font-size: 19px; color: var(--ink); text-transform: uppercase; }
.cf-joueur-txt span { font-size: 13px; color: var(--ink-2); }
.cf-changer { border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--night); text-decoration: underline; cursor: pointer; }
.cf-qui { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.cf-scout {
position: relative; display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer;
border: 1.5px solid var(--line-2); border-radius: 10px; background: var(--surface); transition: border-color .12s, background .12s;
}
.cf-scout input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cf-scout:hover { border-color: var(--night); }
.cf-scout:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(27,39,56,.18); }
.cf-scout-av {
display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: 0 0 auto;
border-radius: 50%; background: #E6EBF2; color: var(--night);
font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 14px;
}
.cf-scout-txt { display: flex; flex-direction: column; min-width: 0; }
.cf-scout-txt b { font-size: 14px; color: var(--ink); }
.cf-scout-txt small { font-size: 11.5px; color: var(--muted); }
.cf-coche { margin-left: auto; color: var(--night); opacity: 0; transition: opacity .12s; }
.cf-scout:has(input:checked) { border-color: var(--night); background: var(--sand-voile); }
.cf-scout:has(input:checked) .cf-scout-av { background: var(--night); color: var(--sand); }
.cf-scout:has(input:checked) .cf-coche { opacity: 1; }
.cf-quand { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; }
.cf-quand input[type=date], .cf-match {
min-height: 42px; padding: 8px 12px; font: inherit; font-size: 15px;
border: 1.5px solid var(--line-2); border-radius: 10px; background: var(--surface);
}
.cf-match { grid-column: 1 / -1; }
.cf-raccourcis { display: flex; flex-wrap: wrap; gap: 6px; }
.cf-raccourcis button, .cf-tags button {
min-height: 34px; padding: 5px 12px; border: 1px solid var(--line-2); border-radius: 999px;
background: var(--surface); font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer;
}
.cf-raccourcis button:hover, .cf-tags button:hover { border-color: var(--night); color: var(--night); }
.cf-raccourcis button.est-actif, .cf-tags button.est-actif { background: var(--night); border-color: var(--night); color: var(--sand); }
.cf-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.cf textarea {
width: 100%; min-height: 70px; padding: 10px 12px; font: inherit; font-size: 15px; line-height: 1.5; resize: vertical;
border: 1.5px solid var(--line-2); border-radius: 10px; background: var(--surface); box-sizing: border-box;
}
.cf input:focus, .cf textarea:focus { outline: none; border-color: var(--night); box-shadow: 0 0 0 3px rgba(27,39,56,.12); }
.cf-pied { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 16px; flex-wrap: wrap; }
.cf-recap { margin: 0; font-size: 13.5px; color: var(--muted); }
.cf-recap.est-pret { color: var(--night); font-weight: 600; }
.cf-pied .btn { padding: 10px 20px; font-size: 14px; }
@media (max-width: 900px) {
.mt-grille { grid-template-columns: minmax(0, 1fr); }
.mt-kpi { flex: 1 1 140px; min-width: 0; }
.cf { padding: 4px 14px 14px; }
.cf-quand { grid-template-columns: minmax(0, 1fr); }
.cf-qui { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cf-scout { padding: 8px; gap: 8px; }
.cf-scout-av { width: 28px; height: 28px; font-size: 12px; }
.cf-quand input[type=date], .cf-match, .cf textarea { font-size: 16px; }
}
/* ═══════════════════════════════════════════════════════════════════════════
DOSSIER DE PRÉSENTATION — la page qui le prépare (02/10/2026)
══════════════════════════════════════════════════════════════════════════ */
.pr-head { align-items: center; justify-content: space-between; flex-wrap: wrap; }
.pr-ident { display: flex; align-items: center; gap: 16px; }
.pr-ident .page-sub { margin: 4px 0 0; }
.pr-pdf { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; font-size: 14px; }
.pr-grille { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(260px, 1fr); gap: 18px; align-items: start; }
.pr-ia-corps { padding: 14px 18px 18px; }
.pr-badge {
font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 11.5px; text-transform: uppercase;
letter-spacing: .7px; padding: 2px 9px; border-radius: 999px; background: var(--paper); color: var(--ink-2);
}
.pr-badge-ia { background: var(--sand-voile); color: var(--sand-fg); }
.pr-attente { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 14px; color: var(--night); }
.pr-spin { width: 16px; height: 16px; border: 2px solid var(--line-2); border-top-color: var(--night); border-radius: 50%; animation: pr-tourne 0.8s linear infinite; }
@keyframes pr-tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pr-spin { animation: none; } }
.pr-erreur { margin: 0 0 10px; font-size: 13px; color: var(--error-fg); }
.pr-info { margin: 0 0 10px; font-size: 13px; color: var(--warn-fg); }
.pr-aide { margin: 6px 0 14px; font-size: 12.5px; color: var(--muted); max-width: 70ch; }
.pr-accroche { margin: 8px 0 14px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 21px; color: var(--night); }
.pr-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pr-cols h3 { margin: 0 0 8px; padding-top: 8px; border-top: 3px solid var(--sand);
font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: .6px; color: var(--night); }
.pr-cols > div:nth-child(2) h3 { border-top-color: var(--bad); }
.pr-cols > div:nth-child(3) h3 { border-top-color: #6F93C0; }
.pr-cols ul { margin: 0; padding: 0; list-style: none; }
.pr-cols li { padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.pr-cols li:last-child { border-bottom: 0; }
.pr-vide { color: var(--muted); }
.pr-verdict { margin: 16px 0 0; padding: 10px 14px; background: var(--sand-voile); border-left: 3px solid var(--sand);
border-radius: 0 6px 6px 0; font-size: 14px; line-height: 1.55; }
.pr-verdict b { font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .6px; margin-right: 6px; color: var(--sand-fg); }
.pr-liste { margin: 0; padding: 12px 16px 12px 36px; font-size: 14px; line-height: 1.9; color: var(--ink); }
.pr-note { margin: 0; padding: 0 16px 16px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
@media (max-width: 1000px) {
.pr-grille, .pr-cols { grid-template-columns: minmax(0, 1fr); }
}
/* ── Dossier de présentation : l'éditeur et la fenêtre d'export (02/10/2026) ── */
.pr-publics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; }
.pr-public {
display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-radius: 10px;
background: var(--surface); border: 1.5px solid var(--line-2); color: var(--ink);
}
.pr-public b { font-family: 'Barlow Condensed', sans-serif; font-size: 17px; text-transform: uppercase; letter-spacing: .4px; }
.pr-public span { font-size: 12.5px; color: var(--muted); }
.pr-public:hover { border-color: var(--night); }
.pr-public.est-courant { background: var(--night); border-color: var(--night); color: var(--on-night); }
.pr-public.est-courant span { color: var(--night-mut); }
.pr-avertir { margin: 0 0 14px; padding: 9px 14px; border-radius: 8px; background: var(--sand-voile);
font-size: 13px; color: var(--sand-fg); }
.pr-cote { display: flex; flex-direction: column; gap: 18px; }
.pr-champ { margin: 0 0 14px; }
.pr-champ-tete { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.pr-champ-tete label { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 14px;
text-transform: uppercase; letter-spacing: .5px; color: var(--night); }
.pr-modif { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--sand-voile); color: var(--sand-fg); }
.pr-remettre { margin-left: auto; border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 600;
color: var(--night); text-decoration: underline; cursor: pointer; }
.pr-champ textarea {
width: 100%; box-sizing: border-box; padding: 10px 12px; font: inherit; font-size: 14px; line-height: 1.5;
border: 1.5px solid var(--line-2); border-radius: 8px; background: var(--surface); resize: vertical;
}
.pr-champ.est-modifie textarea { border-color: var(--sand-2); background: #FFFDF8; }
.pr-champ textarea:focus { outline: none; border-color: var(--night); box-shadow: 0 0 0 3px rgba(27,39,56,.12); }
.pr-legendes { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.pr-legendes > summary { cursor: pointer; margin-bottom: 12px; font-weight: 600; font-size: 13.5px; color: var(--night); }
.pr-pied { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--line); background: var(--paper); }
.pr-photo-bloc { padding: 14px 18px 18px; border-top: 1px solid var(--line); }
.pr-photo-bloc h3 { margin: 0 0 10px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 14px;
text-transform: uppercase; letter-spacing: .5px; color: var(--night); }
.pr-photo { display: flex; gap: 16px; align-items: flex-start; }
.pr-photo img { width: 96px; height: 128px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line-2); }
.pr-retirer { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; }
.pdfx-pres { padding: 4px 18px 0; }
.pdfx-pres-t { margin: 10px 0 8px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 14px;
text-transform: uppercase; letter-spacing: .6px; color: var(--night); }
.pdfx-pres-choix { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pdfx-pres-btn {
display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 10px;
border: 1.5px solid var(--line-2); background: var(--surface); color: var(--ink);
}
.pdfx-pres-btn b { font-family: 'Barlow Condensed', sans-serif; font-size: 15px; text-transform: uppercase; }
.pdfx-pres-btn span { font-size: 11.5px; line-height: 1.35; color: var(--muted); }
.pdfx-pres-btn:hover { border-color: var(--night); background: var(--sand-voile); }
.pdfx-pres-perso { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--night); text-decoration: underline; text-underline-offset: 3px; }
.pdfx-pres-ou { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
@media (max-width: 900px) {
.pr-publics, .pdfx-pres-choix { grid-template-columns: minmax(0, 1fr); }
.pr-champ textarea { font-size: 16px; }
}
/* ── Éditeur du dossier : graphiques et tableaux (02/10/2026) ── */
.pr-graph { margin: 4px 18px 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.pr-graph > summary { display: flex; align-items: baseline; gap: 10px; cursor: pointer; list-style: none; }
.pr-graph > summary::-webkit-details-marker { display: none; }
.pr-graph > summary > span:first-child { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 15px;
text-transform: uppercase; letter-spacing: .5px; color: var(--night); }
.pr-graph > summary::after { content: "›"; margin-left: auto; color: var(--muted); transition: transform .15s; }
.pr-graph[open] > summary::after { transform: rotate(90deg); }
.pr-aide-inline { font-size: 12.5px; color: var(--muted); }
.pr-remettre-graph { display: inline-block; margin: 10px 0 0; }
.pr-cases { margin: 14px 0 0; padding: 0; border: 0; }
.pr-cases legend { margin-bottom: 7px; font-weight: 700; font-size: 13.5px; color: var(--ink); }
.pr-cases legend small { font-weight: 400; color: var(--muted); }
.pr-cases-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px; }
.pr-case { display: flex; align-items: center; gap: 7px; min-height: 34px; padding: 4px 10px;
border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface); font-size: 13px; cursor: pointer; }
.pr-case:has(input:checked) { border-color: var(--night); background: var(--sand-voile); }
.pr-case input { width: 16px; height: 16px; accent-color: var(--night); flex: 0 0 auto; }
/* ══ RAPPORT DE MATCH (05/10/2026) ═══════════════════════════════════════════
Contexte du match, notes par domaine (1-4, turquoise comme toute note de
scout), note de l'ALGO /100 (couleurs de percentile --p-*, jamais turquoise :
c'est un calcul, pas un regard), bloc « Forme » de la fiche, bilan complet
du match en direct. Placé APRÈS le bloc « MOBILE ET TABLETTE » : ses règles
mobiles sont dans le @media de fin de section. */
/* ── Formulaire général ── */
.rf .rf-match { margin: 0; padding: 12px 14px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); min-width: 0; }
.rf .rf-match[hidden] { display: none; }
.rf .rf-match > legend { padding: 0 6px; }
.rf-match-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 16px; }
/* Les segments (lieu, rôle) prennent la largeur de leur case et partagent
l'espace : à largeur naturelle, « ? » sortait de la case. */
.rf-match .seg, .ml-bilan-match .seg { display: flex; width: 100%; }
.rf-match .seg-opt, .ml-bilan-match .seg-opt { flex: 1 1 0; min-width: 0; }
.rf-match .seg-opt span, .ml-bilan-match .seg-opt span { width: 100%; min-width: 0; padding: 8px 6px; }
.rf .rf-match input[type=number] { font-family: 'Barlow', sans-serif; font-size: 14px; padding: 8px 10px;
border: 1px solid var(--line-2); border-radius: 5px; background: var(--surface); color: var(--ink); width: 100%; }
.rf-score { display: flex; align-items: center; gap: 6px; }
.rf .rf-score input[type=number] { width: 64px; text-align: center; }
.rf-aide { font-style: normal; text-transform: none; letter-spacing: 0; font-family: 'Barlow', sans-serif; font-weight: 400; color: var(--muted); }
.rf-domaines { border-top: 1px dashed var(--line-2); padding-top: 10px; }
.rf-domaines > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; min-height: 34px; }
.rf-domaines > summary::-webkit-details-marker { display: none; }
.rf-domaines > summary::before { content: "›"; display: inline-block; transition: transform .15s; font-size: 15px; }
.rf-domaines[open] > summary::before { transform: rotate(90deg); }
.rf-domaines-grille, .ml-bilan-domaines { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px 22px; margin-top: 8px; }
.rf-domaine { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rf-domaine-lab { font-weight: 600; font-size: 13.5px; color: var(--ink); }
.notes-vide-ok .note-opt span { width: 36px; height: 36px; font-size: 16px; }
.notes-vide-ok .note-opt.n-x input:checked + span { background: var(--paper); border-color: var(--muted); color: var(--muted); }
/* ── Cartes de rapport : contexte, algo, domaines ── */
.rm-infos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 4px 0 6px; font-size: 12.5px; color: var(--ink-2); }
.rm-ctx { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 6px; }
.rm-sep { color: var(--line-2); }
.rm-score { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 14px; color: var(--ink); }
.rm-score-v { color: var(--p-elite-tx); }
.rm-score-d { color: var(--p-poor-tx); }
.rm-domaines { display: inline-flex; flex-wrap: wrap; gap: 4px 8px; }
.rm-dom { display: inline-flex; align-items: center; gap: 4px; }
.rm-dom i { font-style: normal; color: var(--muted); }
.rm-dom .n { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px;
border: 1px solid; border-radius: 4px; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 13px; }
.algo-note { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 4px; border-radius: 20px;
background: var(--paper); border: 1px solid var(--line); }
.algo-note-lab { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase;
letter-spacing: .6px; font-size: 11px; color: var(--muted); padding-left: 4px; }
.algo-note .fitpct { min-width: 30px; padding: 1px 6px; font-size: 12.5px; text-align: center; }
.algo-note i { font-style: normal; color: var(--muted); font-size: 11px; }
.algo-mini.fitpct { min-width: 26px; padding: 0 5px; font-size: 11.5px; margin-left: 4px; text-align: center; }
.rm-quoi .rm-score { margin-left: 4px; font-size: 13px; }
.carnet .rd-algo dd.fitpct { min-width: 40px; text-align: center; font-size: 16px; padding: 4px 8px; }
.carnet.rd-domaines { padding: 0; border-left: 0; justify-content: flex-start; gap: 18px; margin-top: 10px; }
/* ── Forme (fiche, onglet Rapports) ── */
.forme { margin: 0 0 18px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.forme-tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; }
.forme-titre { margin: 0; font-family: 'Barlow Condensed', sans-serif; font-size: 15px; font-weight: 700;
text-transform: uppercase; letter-spacing: .6px; color: var(--night); }
.forme-resume { margin: 0; font-size: 13px; color: var(--ink-2); display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.forme-sep { color: var(--line-2); }
.forme-corps { display: grid; gap: 4px 28px; }
.forme-corps--2 { grid-template-columns: minmax(0, 480px) minmax(0, 1fr); align-items: start; }
.forme-cote > :first-child { margin-top: 12px; }
.forme-fig { margin: 10px 0 0; }
/* ⚠️ Le texte du SVG grandit et rapetisse AVEC lui : 9 unités à ~480 px de
large ≈ 13,5 px à l'écran ; sur téléphone (~270 px) on passe à 11 unités
(≈ 9 px), sinon les repères deviennent illisibles. */
.forme-svg { display: block; width: 100%; max-width: 480px; height: auto; overflow: visible; }
.forme-grille { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 3; }
.forme-axe { font-family: 'Barlow', sans-serif; font-size: 9px; fill: var(--muted); }
.forme-aire { fill: var(--night); opacity: .06; }
.forme-ligne { fill: none; stroke: var(--night); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.forme-pt { fill: var(--tc, var(--muted)); stroke: var(--surface); stroke-width: 1.5; }
.forme-vu { fill: none; stroke: var(--n1-fg); stroke-width: 2; }
.forme-g { cursor: default; }
.forme-legende { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; font-size: 11.5px; color: var(--muted); }
/* Puce neutre : la couleur des points EST la note (percentile), la légende ne
doit pas en suggérer une. */
.forme-puce { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--night); margin-right: 5px; vertical-align: -1px; }
.forme-puce-vu { background: transparent; border: 2px solid var(--n1-fg); width: 11px; height: 11px; }
.forme-matchs { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 4px; }
.forme-matchs li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto auto auto; align-items: center; gap: 10px;
padding: 6px 8px; border-radius: 6px; background: var(--paper); font-size: 13px; }
.forme-date { color: var(--muted); font-size: 12px; }
.forme-adv { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--ink); }
.forme-matchs .fitpct { min-width: 32px; text-align: center; font-size: 12.5px; padding: 1px 6px; }
.forme-matchs .n { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1px solid;
border-radius: 5px; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 14px; }
.forme-lien { font-size: 12px; font-weight: 600; color: var(--night); white-space: nowrap; }
.forme-domaines { margin-top: 14px; display: grid; gap: 6px; }
.forme-sous { margin: 0 0 2px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase;
letter-spacing: .6px; font-size: 12px; color: var(--muted); }
.forme-sous i { font-family: 'Barlow', sans-serif; font-style: normal; font-weight: 400; text-transform: none; letter-spacing: 0; }
.forme-dom { display: grid; grid-template-columns: 82px minmax(0, 1fr) 36px auto; align-items: center; gap: 10px; font-size: 13px; }
.forme-dom-lab { font-weight: 600; color: var(--ink); }
.forme-barre { height: 8px; border-radius: 4px; background: var(--paper); overflow: hidden; }
.forme-barre-in { display: block; height: 100%; border-radius: 4px; border: 0; }
.forme-barre-in.n-1 { background: var(--n1-fg); } .forme-barre-in.n-2 { background: var(--n2-fg); }
.forme-barre-in.n-3 { background: var(--n3-fg); } .forme-barre-in.n-4 { background: var(--n4-fg); }
.forme-dom-val { text-align: center; border-radius: 5px; border: 1px solid; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 14px; padding: 1px 0; }
.forme-dom-n { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
/* ══ SES MATCHS — fiche > Données > Matchs (05/10/2026, refait le soir) ═══════
Le langage de la fiche, pas celui d'un tableau de bord : un REGISTRE de
matchs (lignes à filets, la ligne choisie en nuit), un bandeau nuit à arête
Calico portant un RELEVÉ (mesures séparées par des filets, jamais des tuiles),
les chiffres du poste en LIGNES DE PERCENTILE comme le reste de l'onglet
Données (barre, repère médian, rang), et UN grand terrain de nuit à calques.
Couleurs : percentiles --p-* (la donnée) ; sur le terrain, Calico = le joueur
(sa chaleur, ses passes qui font avancer, ses buts), bleu acier = passes clés,
blanc = réussi, corail éteint = raté. Jamais de turquoise : c'est la couleur
des notes de scout. Comparaison : --j1 / --j2 du Face-à-face. */
.am-zone { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 24px; align-items: start; }
/* ── Registre ── */
.am-registre { position: sticky; top: 14px; }
.am-reg-periode { display: grid; gap: 2px; padding: 12px 14px; margin-bottom: 14px; border-radius: var(--radius);
border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); text-decoration: none; }
.am-reg-periode:hover { border-color: var(--night); }
.am-reg-periode[aria-current] { background: var(--night); border-color: var(--night); color: var(--on-night);
box-shadow: inset 0 -2px 0 var(--sand); }
.am-reg-titre { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase;
letter-spacing: .7px; font-size: 14px; }
.am-reg-sous { font-size: 12px; color: var(--muted); }
.am-reg-periode[aria-current] .am-reg-sous { color: var(--night-mut); }
.am-reg-sep { display: flex; justify-content: space-between; margin: 0 2px 4px; font-family: 'Barlow Condensed', sans-serif;
font-weight: 600; text-transform: uppercase; letter-spacing: 1px; font-size: 11.5px; color: var(--muted); }
.am-reg-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); max-height: 62vh; overflow-y: auto;
scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.am-reg-liste li { border-bottom: 1px solid var(--line); }
.am-reg-liste a { display: grid; grid-template-columns: 38px minmax(0, 1fr) 30px 38px; align-items: center; gap: 8px;
min-height: 44px; padding: 4px 6px; color: var(--ink); text-decoration: none; font-size: 13px; }
.am-reg-liste a:hover { background: var(--paper); }
.am-reg-liste a[aria-current] { background: var(--night); color: var(--on-night); box-shadow: inset 2px 0 0 var(--sand); }
.am-reg-date { font-size: 12px; color: var(--muted); }
.am-reg-adv { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.am-reg-adv i { font-style: normal; font-weight: 400; color: var(--muted); }
.am-reg-score { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 13.5px; text-align: center; }
.am-issue-v { color: var(--p-elite-tx); } .am-issue-d { color: var(--p-poor-tx); } .am-issue-n { color: var(--ink-2); }
.am-reg-note { display: grid; justify-items: end; gap: 3px; }
.am-reg-note b { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 16px; line-height: 1; color: var(--tc-texte, var(--muted)); }
.am-reg-note i { display: block; height: 3px; border-radius: 2px; background: var(--tc, var(--line-2)); justify-self: stretch; max-width: 100%; }
.am-reg-liste a[aria-current] .am-reg-date, .am-reg-liste a[aria-current] .am-reg-adv i { color: var(--night-mut); }
.am-reg-liste a[aria-current] .am-reg-note b, .am-reg-liste a[aria-current] .am-reg-score { color: var(--on-night); }
.am-reg-aide { margin: 8px 2px 0; font-size: 11.5px; color: var(--muted); line-height: 1.45; }
/* ── Fiche de match (16/10/2026) : deux compositions, note de l'algo ──
Réutilise `.am-reg-note`/`.tnum`/`.t-` ci-dessus pour la pastille de
note — même langage visuel que le registre « Match par match ». */
.mf-score { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; color: var(--sand); margin: 0 4px; }
.mf-vs { color: var(--muted); margin: 0 10px; font-weight: 400; }
.mf-roster { list-style: none; margin: 10px 0 0; padding: 0; }
.mf-ligne {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 7px 0; border-bottom: 1px dashed var(--line);
}
.mf-ligne:last-child { border-bottom: 0; padding-bottom: 0; }
.mf-nomposte { display: flex; flex-direction: column; min-width: 0; }
.mf-nom { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mf-poste { font-size: 11.5px; color: var(--muted); }
.mf-ligne .am-reg-note { width: 44px; flex: 0 0 auto; }
.am-panneau { min-width: 0; transition: opacity .2s cubic-bezier(.16, 1, .3, 1); }
.am-panneau.est-en-charge { opacity: .4; }
/* ── Bandeau ── */
.am-bandeau { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px;
padding: 18px 22px 16px; border-radius: var(--radius); background: var(--night); color: var(--on-night);
box-shadow: inset 0 -2px 0 var(--sand); }
.am-titre { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; font-family: 'Barlow Condensed', sans-serif;
font-weight: 700; font-size: 28px; line-height: 1.1; letter-spacing: .2px; color: var(--on-night); text-wrap: balance; }
.am-score { color: var(--sand); font-size: 30px; font-weight: 800; }
.am-score i { font-style: normal; margin: 0 4px; color: var(--night-mut); font-weight: 600; }
.am-contre { font-style: normal; font-family: 'Barlow', sans-serif; font-size: 15px; color: var(--night-mut); }
.am-meta { margin: 8px 0 0; font-size: 13px; color: var(--night-mut); line-height: 1.5; max-width: 62ch; }
.am-sep { margin: 0 7px; opacity: .55; }
.am-releve { display: flex; margin: 0; }
.am-releve > div { padding: 0 20px; border-left: 1px solid rgba(255, 255, 255, .14); }
.am-releve > div:first-child { border-left: 0; padding-left: 0; }
.am-releve dt { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 1px;
font-size: 11px; color: var(--night-mut); margin-bottom: 4px; white-space: nowrap; }
.am-releve dd { margin: 0; display: flex; align-items: baseline; gap: 4px; }
.am-releve dd b { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 30px; line-height: 1; }
.am-releve dd i { font-style: normal; font-size: 12px; color: var(--night-mut); }
/* La note de l'algo prend la couleur du percentile en TEXTE sur la nuit : les
variantes -tx sont faites pour le blanc, on reprend donc les teintes pleines. */
.am-releve-note { color: var(--tc, var(--on-night)); }
.am-releve .am-pos { color: #8FD9AE; } .am-releve .am-neg { color: #F2A493; }
.am-releve-lien { display: inline-flex; align-items: center; gap: 8px; color: var(--on-night); text-decoration: none;
font-weight: 600; font-size: 14px; border-bottom: 1px solid var(--sand-voile); padding-bottom: 2px; }
.am-releve-lien:hover { border-color: var(--sand); }
/* Depuis le panneau d'UN match : rejoindre la fiche de match (16/10/2026). */
.am-lien-match { color: var(--sand); text-decoration: none; font-weight: 600; }
.am-lien-match:hover { text-decoration: underline; }
.am-releve-lien .n { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 1px solid;
border-radius: 50%; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 15px; }
/* ── Comparer ── */
.am-comparer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 14px 0 0; padding: 10px 14px;
border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); font-size: 13px; color: var(--ink-2); }
.am-comparer label { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.am-comparer select { font: inherit; font-size: 14px; padding: 7px 10px; min-height: 38px; border: 1px solid var(--line-2);
border-radius: 5px; background: var(--surface); color: var(--night); font-weight: 600; min-width: 220px; }
.am-duo { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 10px; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.am-duo span::before, .am-fig-nom::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 2px;
margin-right: 6px; vertical-align: -1px; background: var(--j); }
.am-duo-j1 { --j: var(--sand-2); } .am-duo-j2 { --j: var(--j3); }
/* ── Sections ── */
.am-section { margin-top: 30px; }
.am-section-tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px;
padding-bottom: 8px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.am-h { margin: 0; font-family: 'Barlow Condensed', sans-serif; font-size: 17px; font-weight: 700; text-transform: uppercase;
letter-spacing: .7px; color: var(--night); }
.am-legende-tete { margin: 0; font-size: 12.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.am-fleche { transform: rotate(180deg); }
.am-tend-haut { color: var(--p-elite-tx); } .am-tend-bas { color: var(--p-poor-tx); }
/* ── Lignes de percentile du poste ── */
.am-lignes { display: grid; gap: 10px; }
.am-ligne { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) 190px; align-items: center; gap: 4px 14px; }
.am-ligne-duo { padding-bottom: 8px; border-bottom: 1px dashed var(--line); }
.am-lbl { font-size: 13.5px; color: var(--ink); font-weight: 500; text-align: right; }
.am-lbl-j2 { font-size: 12px; color: var(--muted); }
.am-track { position: relative; height: 16px; border-radius: 3px; background: var(--paper); overflow: hidden; }
.am-track::after { content: ""; position: absolute; left: 50%; top: 2px; bottom: 2px; width: 1px; background: var(--line-2); }
.am-track-j2 { height: 9px; }
.am-fill { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--tc, var(--line-2));
transition: width .5s cubic-bezier(.16, 1, .3, 1); }
.am-val { display: grid; grid-template-columns: auto 1fr auto 16px; align-items: baseline; gap: 8px; white-space: nowrap; }
.am-val b { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 18px; color: var(--ink); }
.am-val-j2 b { font-size: 14px; color: var(--ink-2); }
.am-det { font-size: 11.5px; color: var(--muted); }
.am-rg { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 12.5px; color: var(--muted); text-align: right; }
.am-rg sup { font-size: .72em; }
.am-tend-vide { width: 16px; }
.am-val .ic { align-self: center; }
/* ── Familles de statistiques (Son poste, Attaque, Construction, Ballon, Défense, Valeur) ── */
.am-cat[hidden] { display: none; }
.am-cat-t { margin: 0 0 12px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.am-cat-t b { font-family: 'Barlow Condensed', sans-serif; font-size: 15px; font-weight: 700; text-transform: uppercase;
letter-spacing: .6px; color: var(--night); }
.am-cat-t span { font-size: 12.5px; color: var(--muted); }
.am-cat-moy { margin-left: 7px; padding-left: 7px; border-left: 1px solid var(--line-2); font-family: 'Barlow Condensed', sans-serif;
font-weight: 700; font-size: 13px; opacity: .8; }
.am-cats { margin-bottom: 16px; }
/* ── Le terrain ── */
.am-calques { margin-bottom: 12px; }
.am-calques[hidden] { display: none; }
.am-scene { display: grid; grid-template-columns: minmax(0, 1fr) 248px; gap: 18px; align-items: start; }
.am-scene-duo { grid-template-columns: minmax(0, 1fr); }
.am-terrains { display: grid; gap: 12px; }
.am-scene-duo .am-terrains { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.am-scene-duo .am-detail { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.am-fig { margin: 0; }
.am-fig-nom { font-size: 12.5px; font-weight: 600; color: var(--ink); margin: 0 0 6px; }
.am-calque[hidden] { display: none; }
.am-terrain { display: block; width: 100%; height: auto; border-radius: var(--radius); background: var(--night);
box-shadow: 0 1px 2px rgba(18, 26, 38, .25), 0 8px 24px -12px rgba(18, 26, 38, .45); }
.am-fig .am-calque + .am-calque { margin-top: 12px; }
.tr-lignes rect, .tr-lignes line, .tr-lignes circle, .tr-lignes path { fill: none; stroke: rgba(224, 192, 144, .32); stroke-width: .35; }
.tr-lignes .tr-point { fill: rgba(224, 192, 144, .45); stroke: none; }
.tr-lignes .tr-but { fill: rgba(224, 192, 144, .6); stroke: none; }
.am-chaleur rect { fill: var(--sand); }
.am-moy circle { fill: var(--night); stroke: var(--on-night); stroke-width: .6; }
.am-moy text { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 4.2px; fill: var(--on-night); }
.am-p { stroke-width: .5; stroke-linecap: round; transition: opacity .2s; }
.am-p-ok { stroke: rgba(255, 255, 255, .5); }
.am-p-prog { stroke: var(--sand); stroke-width: .65; }
.am-p-cle { stroke: #8EC0EA; stroke-width: .8; }
.am-p-ko { stroke: rgba(242, 164, 147, .6); stroke-dasharray: 1.1 .9; }
.am-fl-ok { fill: rgba(255, 255, 255, .7); } .am-fl-prog { fill: var(--sand); }
.am-fl-cle { fill: #8EC0EA; } .am-fl-ko { fill: rgba(242, 164, 147, .8); }
.am-p-cache, .am-def-cache { opacity: .06; }
.am-conduite { stroke: var(--sand); stroke-width: .6; stroke-dasharray: 1.4 1; opacity: .8; }
.am-tir { stroke: var(--on-night); stroke-width: .45; fill: rgba(255, 255, 255, .06); }
.am-tir-but { fill: var(--sand); stroke: var(--sand); }
.am-tir-cadre { fill: rgba(255, 255, 255, .85); }
.am-def { stroke-width: .5; transition: opacity .2s; }
.am-def-duel { fill: #fff; stroke: #fff; } .am-def-interception { fill: #8EC0EA; stroke: #8EC0EA; }
.am-def-recuperation { fill: var(--sand); stroke: var(--sand); } .am-def-degagement { fill: #A7B5C8; stroke: #A7B5C8; }
.am-def-contre { fill: #E8A15A; stroke: #E8A15A; } .am-def-pressing { fill: rgba(255, 255, 255, .32); stroke: none; }
.am-def-aerien { fill: transparent; stroke: #F2A493; }
.am-def.am-def-rate { fill: transparent; }
/* ── Le détail du calque (à droite du terrain) ── */
.am-detail-t { margin: 0 0 8px; display: flex; justify-content: space-between; align-items: baseline;
font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .7px;
font-size: 13.5px; color: var(--night); }
.am-detail-t span { color: var(--muted); font-weight: 600; }
.am-detail-txt { margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.am-filtres { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.am-filtres li { border-bottom: 1px solid var(--line); }
.am-filtre { width: 100%; display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 8px; min-height: 38px;
padding: 4px 8px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.am-filtre:hover { background: var(--paper); }
.am-filtre.est-actif { background: var(--night); color: var(--on-night); }
.am-filtre span { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 14px; }
.am-filtre:focus-visible { outline: 2px solid var(--night); outline-offset: -2px; }
.am-puce { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid transparent; }
.am-puce-tout { background: conic-gradient(var(--sand) 0 25%, #fff 0 50%, #8EC0EA 0 75%, #F2A493 0); border-color: var(--night); }
.am-puce-prog { background: var(--sand); } .am-puce-ok { background: #fff; border-color: var(--line-2); }
.am-puce-cle { background: #8EC0EA; } .am-puce-ko { background: #F2A493; }
.am-puce-pression, .am-puce-longue, .am-puce-centre { background: transparent; border-color: var(--muted); }
.am-filtre.est-actif .am-puce-pression, .am-filtre.est-actif .am-puce-longue, .am-filtre.est-actif .am-puce-centre { border-color: var(--night-mut); }
.am-puce-tir-but { background: var(--sand); } .am-puce-tir-cadre { background: var(--night); }
.am-puce-tir-rate, .am-puce-tir-contre { border-color: var(--night); }
.am-detail .am-puce.am-def-duel { background: #fff; border-color: var(--line-2); }
.am-detail .am-puce.am-def-interception { background: #8EC0EA; } .am-detail .am-puce.am-def-recuperation { background: var(--sand); }
.am-detail .am-puce.am-def-degagement { background: #A7B5C8; } .am-detail .am-puce.am-def-contre { background: #E8A15A; }
.am-detail .am-puce.am-def-pressing { background: rgba(27, 39, 56, .25); }
.am-detail .am-puce.am-def-aerien { border-color: #E07A62; }
.am-journal { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.am-journal li { display: grid; grid-template-columns: 34px 16px 1fr auto; align-items: center; gap: 6px; padding: 7px 4px;
border-bottom: 1px solid var(--line); font-size: 13px; }
.am-journal li > .tnum:first-child { color: var(--muted); font-size: 12px; }
.am-journal-v { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 14px; }
.am-actions .am-journal li { grid-template-columns: 34px 1fr auto; }
.am-vide { color: var(--muted); display: block !important; }
/* ── Déroulé ── */
.am-courbe { display: block; width: 100%; height: auto; overflow: visible; }
.am-zero { stroke: var(--line-2); stroke-width: 1; }
.am-mi { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 3; }
.am-axe { font-family: 'Barlow', sans-serif; font-size: 10px; fill: var(--muted); }
.am-aire { opacity: .16; } .am-aire-pos { fill: var(--p-elite); } .am-aire-neg { fill: var(--p-poor); }
.am-ligne { fill: none; stroke: var(--night); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.am-marque { stroke: var(--surface); stroke-width: 1.6; }
.am-marque-top { fill: var(--p-elite); } .am-marque-flop { fill: var(--p-poor); }
.am-pos { color: var(--p-elite-tx); } .am-neg { color: var(--p-poor-tx); }
.am-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; margin-top: 14px; }
/* ── Physique : 1re et 2e mi-temps ── */
.am-mt { margin-top: 18px; padding-top: 12px; border-top: 1px dashed var(--line); max-width: 760px; }
.am-mt-leg { display: inline-flex; align-items: center; gap: 6px; font-family: 'Barlow', sans-serif; font-size: 12px;
font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted); }
.am-mt-leg i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-left: 6px; }
.am-mt-c1 { background: var(--night); } .am-mt-c2 { background: #8A97AA; }
.am-mt-ligne { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) 64px; align-items: center;
gap: 14px; padding: 6px 0; }
.am-mt-lbl { font-size: 13px; color: var(--ink); text-align: right; }
.am-mt-barres { display: grid; gap: 3px; }
.am-mt-b { display: flex; align-items: center; gap: 8px; }
.am-mt-b i { display: block; height: 9px; border-radius: 2px; }
.am-mt-b b { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 13px; color: var(--ink-2); }
.am-mt-ecart { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 15px; text-align: right; }
.am-mt-baisse { color: var(--p-poor-tx); } .am-mt-hausse { color: var(--p-elite-tx); } .am-mt-stable { color: var(--muted); }
@media (max-width: 720px) {
.am-mt-ligne { grid-template-columns: minmax(0, 1fr) 56px; }
.am-mt-lbl { grid-column: 1 / -1; text-align: left; }
}
/* En comparaison, le détail passe SOUS les deux terrains : les filtres
redeviennent une rangée de puces plutôt qu'une colonne étirée. */
.am-scene-duo .am-filtres { display: flex; flex-wrap: wrap; gap: 6px; border: 0; }
.am-scene-duo .am-filtres li { border: 0; }
.am-scene-duo .am-filtre { width: auto; border: 1px solid var(--line-2); border-radius: 999px; padding: 4px 12px; min-height: 36px; }
.am-scene-duo .am-filtre span { margin-left: 4px; }
/* ── 360 : le relevé, sur papier ── */
.am-releve-360 { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px 0; }
.am-releve-360 li { border-right: 0; border-left: 1px solid var(--line); padding: 0 16px; flex-direction: column; gap: 6px; }
.am-releve-360 .v { color: var(--night); }
.am-releve-360 .l { color: var(--ink-2); }
.am-rg-txt { color: var(--tc-texte, var(--muted)); font-weight: 700; }
.am-note-bas { max-width: 90ch; }
@media (max-width: 1180px) {
.am-zone { grid-template-columns: minmax(0, 1fr); }
.am-registre { position: static; }
.am-reg-liste { max-height: 228px; }
.am-scene { grid-template-columns: minmax(0, 1fr); }
.am-detail { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}
@media (max-width: 720px) {
.am-bandeau { padding: 14px 16px; }
.am-titre { font-size: 22px; } .am-score { font-size: 24px; }
.am-releve { width: 100%; }
.am-releve > div { padding: 0 14px; }
.am-releve dd b { font-size: 24px; }
.am-ligne { grid-template-columns: minmax(0, 1fr) auto; }
.am-lbl { text-align: left; grid-column: 1 / -1; }
.am-track { grid-column: 1; }
.am-val { grid-template-columns: auto auto 16px; }
.am-val .am-det { display: none; }
.am-scene-duo .am-terrains { grid-template-columns: minmax(0, 1fr); }
.am-actions { grid-template-columns: minmax(0, 1fr); }
.am-axe { font-size: 16px; }
.am-comparer select { font-size: 16px; width: 100%; }
}
/* ── Vigie : ses derniers matchs (outil matchs_joueur) ── */
.asst-matchs-table th[scope=row] a { color: var(--ink); text-decoration: none; font-weight: 600; }
.asst-matchs-table th[scope=row] a:hover { color: var(--night); text-decoration: underline; text-underline-offset: 3px; }
.asst-matchs-date { display: inline-block; min-width: 52px; color: var(--muted); font-weight: 400; }
.asst-matchs-table .fitpct { min-width: 32px; text-align: center; font-size: 12.5px; }
/* ── /matchs/ : la cellule était-elle au stade ? ── */
.match-vu { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--night); white-space: nowrap; }
.match-vu .n { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 1px solid;
border-radius: 5px; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 13px; }
/* ── Bilan complet du match en direct ── */
.ml-bilan-score { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 16px; padding: 10px 12px;
border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.ml-score-eq { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13.5px; color: var(--ink); }
.ml-score-eq span { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-bilan-score input[type=number] { width: 52px; height: 40px; text-align: center; font-family: 'Barlow Condensed', sans-serif;
font-weight: 800; font-size: 20px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--surface); color: var(--night); }
.ml-score-tiret { font-weight: 800; color: var(--muted); }
.ml-bilan-score .btn { margin-left: auto; }
.ml-bilan-lab { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: .7px;
font-size: 11.5px; color: var(--muted); }
.ml-bilan-propose { font-family: 'Barlow', sans-serif; font-style: normal; text-transform: none; letter-spacing: 0; color: var(--sand-fg); }
.ml-bilan-form { display: grid; gap: 12px; margin: 6px 0 0; }
.ml-bilan-champ { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ml-bilan-notes { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.ml-bilan-match { display: grid; grid-template-columns: minmax(230px, auto) 90px minmax(150px, 1fr); gap: 10px 14px; align-items: end; }
.rf-domaines > summary { flex-wrap: wrap; }
.ml-bilan-form input[type=number], .ml-bilan-form select, .ml-bilan-form textarea {
font-family: 'Barlow', sans-serif; font-size: 14px; padding: 8px 10px; width: 100%;
border: 1px solid var(--line-2); border-radius: 5px; background: var(--surface); color: var(--ink); }
.ml-bilan-form textarea { resize: vertical; line-height: 1.5; }
.ml-bilan-form .recos .reco-opt { flex: 1 1 140px; }
.ml-bilan-form .recos .reco-opt span { padding: 9px 12px; }
.ml-bilan-plus > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--night); min-height: 34px; display: flex; align-items: center; }
.ml-bilan-pied { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ml-bilan-pied .btn { min-height: 40px; padding-left: 22px; padding-right: 22px; }
@media (max-width: 720px) {
.rf-match-grille, .rf-domaines-grille, .ml-bilan-domaines { grid-template-columns: minmax(0, 1fr); }
/* Un domaine = son nom au-dessus, ses cinq boutons sur toute la largeur. */
.rf-domaine { flex-direction: column; align-items: stretch; gap: 4px; }
.notes-vide-ok { display: flex; width: 100%; }
.notes-vide-ok .note-opt { flex: 1 1 0; min-width: 0; }
.notes-vide-ok .note-opt span { width: 100%; height: 40px; }
.rf .rf-match input[type=number], .ml-bilan-form input[type=number], .ml-bilan-form select,
.ml-bilan-form textarea, .ml-bilan-score input[type=number] { font-size: 16px; }
.ml-bilan-match { grid-template-columns: minmax(0, 1fr) 90px; }
.ml-bilan-poste { grid-column: 1 / -1; }
.ml-bilan-notes { flex-direction: column; }
/* Score : « Équipe A [ ] – [ ] Équipe B » sur une ligne, centré sur le tiret. */
.ml-bilan-score { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.ml-bilan-score > .ml-bilan-lab, .ml-bilan-score .btn { grid-column: 1 / -1; }
.ml-score-eq { justify-self: end; }
.ml-score-eq-ext { justify-self: start; }
.ml-score-eq span { max-width: 92px; }
.ml-bilan-score .btn { margin-left: 0; width: 100%; }
.forme-corps--2 { grid-template-columns: minmax(0, 1fr); }
.forme-axe { font-size: 11px; }
.forme-matchs li { grid-template-columns: 44px minmax(0, 1fr) auto auto; }
.forme-lien { grid-column: 2 / -1; justify-self: start; }
.forme-dom { grid-template-columns: 70px minmax(0, 1fr) 34px; }
.forme-dom-n { display: none; }
}
.ml-rapport-page { max-width: 920px; margin: 0 auto; }
.ml-rapport-retour { display: inline-flex; min-height: 44px; align-items: center; }
.ml-rapport-entete { display: flex; align-items: center; gap: 14px; margin: 8px 0 18px; }
.ml-rapport-entete h1 { margin: 0; font-size: clamp(24px, 6vw, 38px); }
.ml-rapport-entete p { margin: 3px 0 0; color: var(--muted); }
.ml-rapport-formulaire { display: block; }
.ml-brouillon-pastille {
color: #201b12; background: var(--sand); border-radius: 999px;
padding: .18rem .42rem; font-size: .68rem; font-weight: 700;
}
.brouillon-rappel { margin: .75rem 0; padding: .75rem 1rem; border-left: 3px solid var(--sand); background: rgba(224,192,144,.14); }
.brouillons-barre { position: sticky; bottom: .75rem; z-index: 40; display: flex; justify-content: center; padding: .55rem; pointer-events: none; }
.brouillons-barre[hidden] { display: none; } /* la classe pose display:flex : sans ça `hidden` ne masque rien */
.brouillons-barre button { pointer-events: auto; box-shadow: 0 8px 26px rgba(0,0,0,.28); }
.brouillon-etat { min-height: 1.25rem; margin: .4rem 0 0; color: var(--muted, #777); font-size: .8rem; }
.ml-rapport-navigation { display: flex; justify-content: space-between; gap: .75rem; margin-top: 1rem; }
.ml-rapport-panneau-fond { position: fixed; inset: 0; z-index: 880; background: rgba(11,18,29,.72); }
.ml-rapport-panneau-fond[hidden], .ml-rapport-panneau[hidden], .ml-rapport-erreur[hidden] { display: none; }
.ml-rapport-panneau { position: fixed; inset: 0; z-index: 890; overflow: auto; background: var(--paper, #fff); color: var(--ink, #172231); }
.ml-rapport-panneau-barre { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: .5rem 1rem; background: var(--night); color: #fff; }
.ml-rapport-panneau-barre h2 { margin: 0; font-size: 1.2rem; }
.ml-rapport-fermer { width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 1.35rem; cursor: pointer; }
.ml-rapport-panneau-corps { padding: 1rem; outline: none; }
.ml-rapport-panneau .ml-rapport-retour { display: none; }
.ml-rapport-chargement { margin: 3rem auto; max-width: 32rem; text-align: center; }
.ml-rapport-erreur { padding: .75rem; border-left: 3px solid #b83a3a; background: #fff0f0; }
body.ml-rapport-ouvert { overflow: hidden; }
@media (min-width: 900px) {
.ml-rapport-panneau { left: auto; width: min(860px, 86vw); box-shadow: -16px 0 42px rgba(0,0,0,.35); }
.ml-rapport-panneau-corps { padding: 1.5rem 2rem 3rem; }
}
|