/* Passe cloud du 02/11/2026 — composition de la fiche rencontre (ecrans/composition-terrain.js), parité PitchLineupView.swift.
   DA « Le Point » : aplat ENCRE invariable, le terrain se lit à ses lignes (papier à 28 %), aucun vert, aucune ombre, rayon 5.
   Flèches d'entrée (vert) et de sortie (rouge) : exception décidée par Anthony le 23/09/2026 (PolyScoreColor.entreeEnJeu /
   sortieDuJeu), réservée aux flèches de remplacement. Aucun carton : ils ne vivent que dans la timeline.
   Ce rouge de sortie n'est pas le rouge du direct. */
:root { --compo-encre:#0A0A0A; --compo-papier:#FAFAFA; --compo-ligne:rgba(250,250,250,.28); --compo-entree:#1A7F37; --compo-sortie:#CF222E; }
@media (prefers-color-scheme:dark) { :root { --compo-entree:#3FB950; --compo-sortie:#FF6B6B; } }

.compositions .compo-terrain { position:relative; width:100%; max-width:440px; margin:0 auto; aspect-ratio:.62; min-height:var(--compo-hauteur-min,520px); background:var(--compo-encre); border:1px solid var(--compo-ligne); border-radius:5px; overflow:hidden; color:var(--compo-papier); display:flex; flex-direction:column;
  /* Sur le terrain (toujours sombre), les flèches prennent leurs teintes du mode sombre. */
  --compo-entree:#3FB950; --compo-sortie:#FF6B6B; }
.compo-lignes { position:absolute; inset:0; pointer-events:none; }
.compo-lignes::before { content:""; position:absolute; left:0; right:0; top:50%; border-top:1px solid var(--compo-ligne); }
.compo-rond-central { position:absolute; left:50%; top:50%; width:24%; aspect-ratio:1; transform:translate(-50%,-50%); border:1px solid var(--compo-ligne); border-radius:50%; }
.compo-surface { position:absolute; left:27%; width:46%; height:10%; border:1px solid var(--compo-ligne); }
.compo-surface.haut { top:-1px; }
.compo-surface.bas { bottom:-1px; }
.compo-etiquette { position:absolute; left:50%; transform:translateX(-50%); padding:3px 8px; background:var(--compo-encre); border-radius:5px; font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; max-width:90%; overflow:hidden; text-overflow:ellipsis; color:rgba(250,250,250,.85); }
.compo-etiquette.haut { top:4px; }
.compo-etiquette.bas { bottom:4px; }

.compositions .compo-terrain.rangees-4 { --compo-hauteur-min:440px; }
.compositions .compo-terrain.rangees-6 { --compo-hauteur-min:610px; }
.compositions .compo-terrain.rangees-7 { --compo-hauteur-min:700px; }
/* Chaque moitié garde de l'air au rond central (PitchLineupView.rowYRatios : les deux équipes ne se touchent jamais). */
.compo-moitie { position:relative; flex:1 1 50%; min-height:0; display:flex; flex-direction:column; justify-content:space-evenly; padding:24px 0 12px; }
/* L'extérieur en miroir : gardien en bas, ailiers droits du côté opposé ; l'ordre du DOM reste gardien → attaque (lecteur d'écran). */
.compo-moitie.exterieur { flex-direction:column-reverse; padding:12px 0 24px; }
.compo-rangee { display:flex; justify-content:space-evenly; align-items:flex-start; }
.compo-moitie.exterieur .compo-rangee { flex-direction:row-reverse; }
.compo-place { flex:1 1 0; min-width:0; display:flex; justify-content:center; }
.compo-marqueur { display:flex; flex-direction:column; align-items:center; gap:1px; max-width:100%; padding:2px; border-radius:5px; color:var(--compo-papier); text-decoration:none; }
.compo-rond { position:relative; display:inline-flex; align-items:center; justify-content:center; width:27px; height:27px; border-radius:50%; background:var(--compo-papier); color:var(--compo-encre); font-size:12px; font-weight:700; }
/* Les marques collées au flanc droit de la pastille : elles appartiennent sans ambiguïté à ce joueur. */
.compo-rond .compo-marques { position:absolute; left:calc(100% + 2px); top:50%; transform:translateY(-50%); gap:2px; color:var(--compo-papier); }
.compo-nom-terrain { display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; font-weight:700; letter-spacing:-.01em; line-height:13px; }
.compo-terrain .compo-icone { background:var(--compo-encre); border-radius:50%; }

.compo-marques { display:inline-flex; flex:none; align-items:center; gap:3px; }
.compo-icone { width:10px; height:10px; flex:none; }
.compo-entree { fill:var(--compo-entree); }
.compo-sortie { fill:var(--compo-sortie); }
.compo-ballon { fill:currentColor; }
.compo-ballon .trait { fill:none; stroke:currentColor; stroke-width:1; }
.compo-multiple { font-size:10px; font-weight:700; }
.compo-terrain .compo-multiple { color:var(--compo-papier); background:var(--compo-encre); border-radius:5px; padding:0 2px; }

/* Colonnes (autres sports, formation absente) et banc. */
.compo-colonnes { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.compo-colonnes .compo-colonne + .compo-colonne { border-left:1px solid var(--filet); padding-left:12px; }
.compo-colonne { min-width:0; }
.compo-tete { display:flex; align-items:baseline; gap:6px; margin:0 0 4px; min-width:0; }
.compo-equipe { font-size:13px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.compo-formation { font-size:11px; color:var(--secondaire); }
.compo-liste { list-style:none; margin:0; padding:0; }
.compo-lien { display:flex; align-items:center; gap:5px; min-height:32px; padding:2px 4px; margin:0 -4px; border-radius:5px; color:var(--texte); text-decoration:none; }
.compo-numero { flex:none; width:22px; text-align:right; font-size:11px; color:var(--secondaire); }
.compo-nom { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.compo-bascule { display:flex; align-items:center; gap:6px; width:100%; min-height:44px; margin-top:8px; padding:0; border:0; background:none; color:var(--texte); font:inherit; font-size:13px; font-weight:700; text-decoration:underline; text-underline-offset:2px; cursor:pointer; border-radius:5px; }
.compo-chevron { width:7px; height:7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:translateY(-2px) rotate(45deg); }
.compo-bascule[aria-expanded="true"] .compo-chevron { transform:translateY(2px) rotate(225deg); }
.compo-banc[hidden] { display:none; }

/* Tout appui se voit (MAJ-10) : voile gris, jamais de rouge, ≤ 200 ms. */
a.compo-marqueur:active { background:rgba(250,250,250,.18); }
a.compo-lien:active,.compo-bascule:active { background:var(--fond); }
@media (hover:hover) { a.compo-lien:hover { background:var(--fond); } a.compo-marqueur:hover .compo-nom-terrain { text-decoration:underline; } }
.compo-marqueur:focus-visible { outline:2px solid var(--compo-papier); outline-offset:1px; }
@media (prefers-reduced-motion:no-preference) { .compo-lien,.compo-marqueur,.compo-bascule { transition:background-color 140ms ease; } }

@media (max-width:360px) { .compo-rond { width:26px; height:26px; font-size:11px; } .compo-nom-terrain { font-size:10px; } }

/* Ordinateur : la composition prend toute la largeur de la fiche, terrain à gauche, banc à droite (la page ne s'allonge pas). */
@media (min-width:1024px) {
  .bloc-detail.compositions { grid-column:1/-1; display:grid; grid-template-columns:minmax(0,440px) minmax(0,1fr); grid-template-rows:auto auto 1fr; column-gap:24px; align-content:start; }
  .bloc-detail.compositions > .etiquette,.bloc-detail.compositions > .compo-masque { grid-column:1/-1; }
  .bloc-detail.compositions > .compo-terrain,
  .bloc-detail.compositions > .compo-colonnes:not(.compo-banc) { grid-column:1; grid-row:2/4; }
  .bloc-detail.compositions > .compo-bascule { grid-column:2; grid-row:2; margin-top:0; }
  .bloc-detail.compositions > .compo-banc { grid-column:2; grid-row:3; align-self:start; }
}