/* ==========================================================================
   Sport Pulse : page de match en direct (match.php + assets/js/match.js),
   football, basket et foot US. Chargée APRÈS accueil.css (jetons de couleur,
   polices, onglets, compteur, états, squelettes, .titre-barre) et commun.css
   (mise en page à colonne droite, fil d'Ariane, « Meilleurs sites de paris »).

   Refaite d'après la maquette de Titouan (07/10/2026) :
     - bandeau sombre façon stade de nuit, tout en CSS (dégradés, halos de
       projecteurs, public en points lumineux, pelouse en perspective ; aucune
       photo de stade), photos « vedettes » fondues sur les côtés ;
     - onglets dans la même carte, soulignement rouge ;
     - cartes blanches à filet fin, coins légèrement arrondis, ombre légère ;
     - joueurs clés, frise centrale des temps forts, terrain en perspective,
       statistiques (rouge pour le domicile, bleu foncé pour l'extérieur),
       infos du match, confrontations directes et forme.
   Polices du site (Barlow, Barlow Condensed), rouge en accent, pictos fins.
   Espacements en multiples de 4 px.

   Couleurs des équipes : variables posées sur <main class="fiche-match">
   par match.php puis match.js (voir couleursEquipes) :
     --dom / --ext ............. couleur lisible sur fond clair (numéros sur
                                 le terrain), --dom-texte / --ext-texte dessus
     --dom-lueur / --ext-lueur . triplet « r, g, b » des halos du bandeau
   ========================================================================== */

.fiche-match {
  --dom: #3B5A9A; --dom-texte: #FFFFFF; --dom-lueur: 59, 90, 154;
  --ext: #E0111B; --ext-texte: #FFFFFF; --ext-lueur: 224, 17, 27;
  --accent-dom: var(--rouge);            /* barres, score courant : domicile en rouge */
  --accent-ext: #1F2D4D;                 /* extérieur en bleu foncé */
  --carte-rayon: 10px;
  --carte-ombre: 0 1px 2px rgba(15, 23, 32, .04), 0 6px 18px rgba(15, 23, 32, .05);
  --piste: #EEF0F3;
}
/* Un élément masqué l'est toujours, même quand sa règle d'affichage est flex ou grid */
.fiche-match [hidden] { display: none !important; }
.fiche-match__ariane { min-height: 20px; }
.fiche-match__grille { margin-top: 14px; }
.fiche-match__principal { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* Côté de chaque élément : couleur d'équipe à portée de main */
.joueur-terrain--domicile, .parquet--domicile { --c: var(--dom); --c-texte: var(--dom-texte); }
.joueur-terrain--exterieur, .parquet--exterieur { --c: var(--ext); --c-texte: var(--ext-texte); }

/* ---------- Pictogrammes : 16 px (tracés dans match.js) ---------- */
.picto { position: relative; display: inline-flex; flex: none; width: 16px; height: 16px; }
.picto svg { display: block; width: 100%; height: 100%; overflow: visible; }
.picto--mini { width: 12px; height: 12px; }
.picto.picto--var {
  width: auto; height: auto; padding: 2px 3px 1px; border: 1px solid #9AA1AB; border-radius: 2px; color: var(--texte-2);
  font-family: var(--police-etroite); font-weight: 700; font-size: 9.5px; line-height: 1; letter-spacing: .05em;
}
/* But refusé : « VAR » barré d'un trait rouge */
.picto.picto--var-barre::after {
  content: ""; position: absolute; left: -3px; right: -3px; top: 50%; height: 1.6px; margin-top: -.8px;
  border-radius: 1px; background: var(--rouge, #E0111B); transform: rotate(-24deg);
}

/* ---------- Portraits : photo ronde (Wikimedia Commons) ou pastille neutre au numéro ---------- */
.portrait {
  --t: 32px;
  position: relative; flex: none; display: inline-grid; place-items: center; overflow: hidden;
  width: var(--t); height: var(--t); border-radius: 50%; background: var(--fond);
  box-shadow: 0 0 0 1px var(--bordure);
}
.portrait--xs { --t: 24px; }
.portrait--s { --t: 28px; }
.portrait--m { --t: 32px; }
.portrait--l { --t: 48px; }
.portrait--frise { --t: 46px; }
.portrait--terrain { --t: var(--t-terrain, 40px); }
.portrait__img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 16%; }
.portrait--numero { background: var(--fond); color: var(--texte-2); }
.portrait__numero {
  font-family: var(--police-etroite); font-weight: 600; line-height: 1;
  font-size: calc(var(--t) * .42); font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Carte de tête : bandeau de score + onglets
   ========================================================================== */
.fiche-match__tete {
  overflow: hidden; background: var(--blanc); border: 1px solid var(--bordure);
  border-radius: var(--carte-rayon); box-shadow: var(--carte-ombre);
}

/* ---------- Bandeau : stade de nuit en CSS ---------- */
.affiche {
  position: relative; isolation: isolate; overflow: hidden; min-height: 272px; color: #fff;
  background-color: #0A0F18;
  background-image:
    radial-gradient(ellipse 34% 62% at 3% 80%, rgba(var(--dom-lueur), .32), transparent 72%),
    radial-gradient(ellipse 34% 62% at 97% 80%, rgba(var(--ext-lueur), .32), transparent 72%),
    radial-gradient(ellipse 56% 40% at 50% -8%, rgba(176, 198, 240, .22), transparent 75%),
    linear-gradient(180deg, #080C14 0%, #0E1626 42%, #0F1A26 63%, #0C2119 81%, #113B25 100%);
}
/* Pelouse en perspective au pied du bandeau */
.affiche::before {
  content: ""; position: absolute; z-index: 0; left: -30%; right: -30%; bottom: -1px; height: 30%;
  background:
    linear-gradient(0deg, transparent 96%, rgba(255, 255, 255, .16) 96%, rgba(255, 255, 255, .16) 97%, transparent 97%),
    repeating-linear-gradient(90deg, #14472B 0 6%, #18532F 6% 12%);
  transform: perspective(260px) rotateX(58deg); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(0deg, #000 30%, transparent 100%);
          mask-image: linear-gradient(0deg, #000 30%, transparent 100%);
  opacity: .9;
}
/* Voile central : le texte reste lisible sur les photos */
.affiche::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(ellipse 40% 78% at 50% 50%, rgba(7, 11, 19, .58), rgba(7, 11, 19, .2) 62%, transparent 86%),
    linear-gradient(180deg, rgba(7, 11, 19, .34), transparent 28%);
}
.affiche__decor { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
/* Projecteurs : deux rampes de points vifs en haut, halos et faisceaux à peine visibles */
.affiche__decor::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 8.5% 8%, #fff 0 1.3px, rgba(255, 255, 255, .4) 2.4px, rgba(200, 215, 255, .12) 8px, transparent 24px),
    radial-gradient(circle at 12% 5.5%, #fff 0 1.3px, rgba(255, 255, 255, .4) 2.4px, rgba(200, 215, 255, .12) 8px, transparent 24px),
    radial-gradient(circle at 15.5% 8%, #fff 0 1.3px, rgba(255, 255, 255, .4) 2.4px, rgba(200, 215, 255, .12) 8px, transparent 24px),
    radial-gradient(circle at 84.5% 8%, #fff 0 1.3px, rgba(255, 255, 255, .4) 2.4px, rgba(200, 215, 255, .12) 8px, transparent 24px),
    radial-gradient(circle at 88% 5.5%, #fff 0 1.3px, rgba(255, 255, 255, .4) 2.4px, rgba(200, 215, 255, .12) 8px, transparent 24px),
    radial-gradient(circle at 91.5% 8%, #fff 0 1.3px, rgba(255, 255, 255, .4) 2.4px, rgba(200, 215, 255, .12) 8px, transparent 24px),
    radial-gradient(ellipse 24% 46% at 12% 0%, rgba(210, 222, 255, .17), transparent 70%),
    radial-gradient(ellipse 24% 46% at 88% 0%, rgba(210, 222, 255, .17), transparent 70%),
    linear-gradient(118deg, transparent 20%, rgba(220, 230, 255, .045) 27%, transparent 35%),
    linear-gradient(242deg, transparent 20%, rgba(220, 230, 255, .045) 27%, transparent 35%);
}
/* Tribunes : le public en points lumineux très discrets, fondus en haut et en bas */
.affiche__decor::after {
  content: ""; position: absolute; left: 0; right: 0; top: 15%; height: 60%; opacity: .85;
  background-image: radial-gradient(rgba(255, 255, 255, .11) .7px, transparent 1.2px), radial-gradient(rgba(255, 255, 255, .06) .7px, transparent 1.2px);
  background-size: 11px 8px, 7px 6px; background-position: 0 0, 3px 4px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 35%, #000 70%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 35%, #000 70%, transparent);
}

/* Photos « vedettes » : fondues dans le fond, légèrement désaturées (crédit au survol) */
.affiche__vedette { position: absolute; z-index: 1; top: 0; bottom: 0; width: 38%; }
.affiche__vedette--domicile { left: 0; }
.affiche__vedette--exterieur { right: 0; }
.affiche__photo {
  display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 20%;
  filter: saturate(.7) contrast(1.06) brightness(.8);
  -webkit-mask-image: radial-gradient(ellipse 78% 96% at 30% 58%, #000 36%, rgba(0, 0, 0, .5) 58%, transparent 80%);
          mask-image: radial-gradient(ellipse 78% 96% at 30% 58%, #000 36%, rgba(0, 0, 0, .5) 58%, transparent 80%);
}
.affiche__vedette--exterieur .affiche__photo {
  -webkit-mask-image: radial-gradient(ellipse 78% 96% at 70% 58%, #000 36%, rgba(0, 0, 0, .5) 58%, transparent 80%);
          mask-image: radial-gradient(ellipse 78% 96% at 70% 58%, #000 36%, rgba(0, 0, 0, .5) 58%, transparent 80%);
}

/* Contenu : au-dessus du voile ; le survol traverse jusqu'aux photos, sauf sur les textes */
.affiche__contenu { position: relative; z-index: 3; padding: 18px 24px 26px; pointer-events: none; }
.affiche__haut > *, .affiche__nom, .affiche__centre > *, .affiche__buteurs li, .affiche__periodes { pointer-events: auto; }
.affiche__haut {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 0;
  text-align: center; font-size: 13.5px; line-height: 1.35; color: rgba(255, 255, 255, .86);
}
.affiche__competition {
  font-family: var(--police-etroite); font-weight: 700; font-size: 14.5px; letter-spacing: .06em;
  text-transform: uppercase; color: #fff;
}
.affiche__infos { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; }
.affiche__competition + .affiche__infos::before {
  content: ""; display: inline-block; width: 1px; height: 13px; margin: 0 12px; background: rgba(255, 255, 255, .38);
}
.affiche__infos > span + span::before { content: "·"; margin: 0 8px; color: rgba(255, 255, 255, .55); }

.affiche__corps {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: 24px; row-gap: 10px;
  align-items: start; max-width: 600px; margin: 22px auto 0;
}
.affiche__equipe { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; min-width: 0; }
.affiche__blason { display: grid; place-items: center; width: 64px; height: 64px; }
.affiche__logo { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .45)); }
.affiche__logo--initiales {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(255, 255, 255, .12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); filter: none;
  font-family: var(--police-etroite); font-weight: 700; font-size: 19px; color: #fff; letter-spacing: .02em;
}
.affiche__nom {
  font-family: var(--police-etroite); font-weight: 700; font-size: 26px; line-height: 1.05;
  text-transform: uppercase; letter-spacing: .02em; text-wrap: balance; overflow-wrap: anywhere;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}
.affiche__nom-court { display: none; }

/* Centre : score blanc, pastille d'état, mi-temps ; il couvre aussi la rangée des buteurs */
.affiche__centre { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 150px; }
.affiche__score {
  display: flex; align-items: center; font-family: var(--police-etroite); font-weight: 700; font-size: 84px;
  line-height: .9; letter-spacing: -.01em; font-variant-numeric: tabular-nums; text-shadow: 0 4px 24px rgba(0, 0, 0, .45);
}
.affiche__tiret { margin: 0 14px; font-weight: 600; font-size: .55em; color: rgba(255, 255, 255, .85); }
.affiche__score--vide { color: rgba(255, 255, 255, .45); }
.affiche__heure {
  font-family: var(--police-etroite); font-weight: 700; font-size: 62px; line-height: .95; font-variant-numeric: tabular-nums;
  text-shadow: 0 4px 24px rgba(0, 0, 0, .45);
}
.affiche__etat {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 5px; border-radius: 6px;
  background: var(--rouge); color: #fff; box-shadow: 0 4px 14px rgba(224, 17, 27, .35);
  font-family: var(--police-etroite); font-weight: 700; font-size: 15px; line-height: 1; letter-spacing: .06em;
  text-transform: uppercase; white-space: nowrap;
}
.affiche__etat--avenir { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .32); }
.affiche__etat--attente { background: rgba(255, 255, 255, .12); color: #FDE68A; box-shadow: none; }
/* Point « direct » : blanc sur la pastille rouge, qui bat */
.affiche__pouls { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: pouls-blanc 2s ease-out infinite; }
@keyframes pouls-blanc {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); }
  70%, 100% { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); }
}
.affiche__minute { padding-left: 7px; border-left: 1px solid rgba(255, 255, 255, .45); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.affiche__mitemps, .affiche__tab { font-size: 13.5px; line-height: 1.3; color: rgba(255, 255, 255, .84); font-variant-numeric: tabular-nums; }

/* Buteurs en petit sous chaque équipe (football) */
.affiche__buteurs {
  display: flex; flex-direction: column; align-items: flex-start; justify-self: center; gap: 2px; min-width: 0;
  font-size: 13.5px; line-height: 1.35; color: rgba(255, 255, 255, .86); text-shadow: 0 1px 6px rgba(0, 0, 0, .55);
}
.affiche__buteurs:empty { display: none; }
.affiche__buteurs--domicile { grid-column: 1; grid-row: 2; }
.affiche__buteurs--exterieur { grid-column: 3; grid-row: 2; }

/* Score par période (basket, foot US) : tableau fin, en clair sur le fond sombre */
.affiche__periodes { margin-top: 20px; display: flex; justify-content: center; overflow-x: auto; }
.periodes {
  border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums;
  background: rgba(7, 11, 19, .45); border-radius: 8px;
}
.periodes th, .periodes td { padding: 6px 12px; text-align: center; white-space: nowrap; }
.periodes thead th {
  font-family: var(--police-etroite); font-weight: 600; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255, 255, 255, .66); border-bottom: 1px solid rgba(255, 255, 255, .16);
}
.periodes tbody th { text-align: left; font-family: var(--police-etroite); font-weight: 700; font-size: 14px; letter-spacing: .03em; }
.periodes tbody tr + tr th, .periodes tbody tr + tr td { border-top: 1px solid rgba(255, 255, 255, .1); }
.periodes td { color: rgba(255, 255, 255, .8); }
.periodes .periodes__total { font-weight: 700; color: #fff; border-left: 1px solid rgba(255, 255, 255, .16); }

.affiche__indisponible { position: relative; z-index: 3; padding: 96px 24px; text-align: center; color: rgba(255, 255, 255, .8); font-size: 14px; }
.affiche--chargement { min-height: 272px; }
.affiche--chargement .fiche-match__chargement { position: relative; z-index: 3; padding: 32px 24px; margin: 0 auto; }
.affiche--chargement .squelette { background: rgba(255, 255, 255, .1); }

/* ---------- Onglets : dans la carte, texte gris, soulignement rouge ---------- */
.fiche-match__onglets { display: flex; gap: 28px; padding: 0 22px; background: var(--blanc); overflow-x: auto; scrollbar-width: none; }
.fiche-match__onglets::-webkit-scrollbar { display: none; }
/* Barre plus large que l'écran : fondu du côté des onglets cachés (posé par match.js) */
.fiche-match__onglets[data-debord="droite"] { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
.fiche-match__onglets[data-debord="gauche"] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px); mask-image: linear-gradient(90deg, transparent, #000 44px); }
.fiche-match__onglets[data-debord="gauche droite"] {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent);
}
.fiche-match__onglets .onglet-direct {
  position: relative; flex: none; gap: 6px; padding: 15px 0 14px; border-radius: 0; background: none;
  font-size: 14.5px; font-weight: 600; color: var(--texte-3);
}
.fiche-match__onglets .onglet-direct:hover { background: none; color: var(--texte); }
.fiche-match__onglets .onglet-direct[aria-selected="true"] { background: none; color: var(--texte); font-weight: 700; }
.fiche-match__onglets .onglet-direct[aria-selected="true"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--rouge);
}
.fiche-match__onglets .onglet-direct:focus-visible { outline-offset: -3px; }
.fiche-match__onglets .compteur,
.fiche-match__onglets .onglet-direct[aria-selected="true"] .compteur { background: var(--fond); color: var(--texte-2); font-weight: 600; }

/* ---------- Panneaux : cartes empilées ---------- */
.fiche-match__panneaux { min-width: 0; }
.fiche-match__panneau { container: panneau / inline-size; display: flex; flex-direction: column; gap: 16px; min-height: 120px; }
.fiche-match__panneau:focus-visible { outline: 2px solid var(--bleu); outline-offset: 4px; border-radius: 4px; }
.fiche-match__panneau > .etat {
  padding: 20px; background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--carte-rayon);
}
.fiche-match__chargement { padding: 16px 20px; max-width: 520px; }
.fiche-match__panneau > .fiche-match__chargement { max-width: none; background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--carte-rayon); }
.fiche-match__note { padding: 8px 0; font-size: 13px; color: #9A3412; }
/* « Mis à jour à 21h52 » : discret, à droite, juste sous la carte de tête (pendant le direct) */
.fiche-match__maj {
  margin: -10px 0 -8px; font-size: 12.5px; line-height: 16px; color: var(--texte-3); text-align: right;
  font-variant-numeric: tabular-nums;
}
.fiche-match__credits { padding: 0 0 16px; }
.fiche-match__suite { display: flex; flex-wrap: wrap; gap: 8px 24px; padding-top: 4px; }

/* ==========================================================================
   Cartes blanches
   ========================================================================== */
.carte-match {
  min-width: 0; padding: 20px 22px 22px; background: var(--blanc);
  border: 1px solid var(--bordure); border-radius: var(--carte-rayon); box-shadow: var(--carte-ombre);
}
.carte-match__tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin-bottom: 16px; }
.carte-match__titre { font-size: 20px; }
.carte-match__sous-titre { margin: -8px 0 16px; font-size: 13px; color: var(--texte-3); }

/* Colonne droite : « Meilleurs sites de paris » en carte, comme les autres ; plus de colonne collante (trop haute) */
.fiche-match__cote { position: static; }
.fiche-match__cote .operateurs {
  padding: 18px 20px 16px; background: var(--blanc); border: 1px solid var(--bordure);
  border-radius: var(--carte-rayon); box-shadow: var(--carte-ombre);
}
.fiche-match__cote .carte-match { padding: 18px 20px 20px; }

/* En-tête « logo + équipe » des deux côtés (stats, meilleurs joueurs) */
.equipes-tete {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-bottom: 14px; border-bottom: 1px solid var(--bordure);
}
.equipes-tete__equipe {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  font-family: var(--police-etroite); font-weight: 700; font-size: 15px; line-height: 1.1; text-transform: uppercase; letter-spacing: .03em;
}
.equipes-tete__equipe span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.equipes-tete__logo { width: 28px; height: 28px; object-fit: contain; flex: none; }
.equipes-tete__logo--initiales, .colonne-equipe__logo--initiales, .compos__logo--initiales, .cle__logo--initiales,
.h2h__logo--initiales, .forme__logo--initiales, .frise__logo--initiales {
  display: inline-grid; place-items: center; border-radius: 50%; background: var(--fond);
  font-size: 9px; font-weight: 700; color: var(--texte-2);
}

/* Deux colonnes, une par équipe (remplaçants, absents, feuilles de match) */
.deux-colonnes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.colonne-equipe { min-width: 0; }
.colonne-equipe__titre {
  display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--bordure-2);
  font-family: var(--police-etroite); font-weight: 700; font-size: 16px; line-height: 1.1; letter-spacing: .03em; text-transform: uppercase;
}
.colonne-equipe__logo { width: 22px; height: 22px; object-fit: contain; flex: none; }

/* ==========================================================================
   Joueurs clés
   ========================================================================== */
.cles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cles--1 .cle--exterieur { grid-column: 2; } /* un seul joueur clé : du côté de son équipe, comme dans le bandeau */
.cle {
  display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 16px; min-width: 0; padding: 16px;
  background: var(--blanc); border: 1px solid var(--bordure); border-radius: var(--carte-rayon); box-shadow: var(--carte-ombre);
}
.cle__photo { display: block; width: 104px; height: 120px; overflow: hidden; border-radius: 8px; background: var(--fond); }
.cle__photo img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 18%; }
.cle__photo--vide {
  display: grid; place-items: center; background: linear-gradient(160deg, #F4F5F7, #E7EAEE);
  font-family: var(--police-etroite); font-weight: 700; font-size: 36px; color: #9AA1AB;
}
.cle__corps { display: flex; flex-direction: column; min-width: 0; }
.cle__haut { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--bordure); }
.cle__ident { min-width: 0; }
.cle__etiquette {
  display: inline-block; padding: 4px 7px 3px; border-radius: 4px; background: var(--fond); color: var(--texte-2);
  font-family: var(--police-etroite); font-weight: 700; font-size: 11.5px; line-height: 1; letter-spacing: .07em; text-transform: uppercase;
}
.cle__nom { margin-top: 8px; font-size: 17px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.cle__equipe { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 13.5px; color: var(--texte-2); }
.cle__logo { width: 18px; height: 18px; object-fit: contain; flex: none; }
.cle__pastille {
  flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px 5px; border-radius: 6px;
  background: var(--accent-dom); color: #fff; font-family: var(--police-etroite); font-weight: 700; font-size: 18px; line-height: 1;
}
.cle--exterieur .cle__pastille { background: var(--accent-ext); }
.cle__pastille-picto { width: 15px; height: 15px; color: #fff; }
.cle__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 12px; }
.cle__stats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cle__stats--1 { grid-template-columns: minmax(0, 1fr); }
.cle__stat { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 0 10px; }
.cle__stat:first-child { padding-left: 0; }
.cle__stat + .cle__stat { border-left: 1px solid var(--bordure); }
.cle__stat-haut { display: flex; align-items: center; gap: 6px; }
.cle__stat-picto { width: 15px; height: 15px; color: var(--texte-3); }
.cle__stat-valeur { font-family: var(--police-etroite); font-weight: 700; font-size: 21px; line-height: 1; font-variant-numeric: tabular-nums; }
.cle__stat-libelle { font-size: 12.5px; line-height: 1.25; color: var(--texte-3); }
.cle__stat--long .cle__stat-haut { align-items: flex-start; }
.cle__stat--long .cle__stat-valeur { font-family: var(--police); font-size: 14px; font-weight: 600; line-height: 1.3; }

/* ==========================================================================
   Temps forts : filtres en pastilles, frise centrale
   ========================================================================== */
.filtres { display: flex; flex-wrap: wrap; gap: 6px; }
.filtre {
  padding: 7px 14px 6px; border: 0; border-radius: 999px; background: var(--fond); color: var(--texte-2);
  font-family: var(--police); font-weight: 600; font-size: 13px; line-height: 1; cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.filtre:hover { background: #E8EBEE; color: var(--texte); }
.filtre[aria-pressed="true"] { background: var(--rouge); color: #fff; }
.filtre:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; }

.frise-carte .carte-match__tete { margin-bottom: 8px; }
.frise__sens { margin-bottom: 4px; font-size: 12.5px; color: var(--texte-3); }
.frise { position: relative; display: flex; flex-direction: column; padding: 4px 0; }
.frise::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; margin-left: -.5px; background: var(--bordure-2); }
.frise__item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr); align-items: start; padding: 10px 0; }
/* Minute dans une bulle à filet fin, sur l'axe */
.frise__minute {
  grid-column: 2; grid-row: 1; justify-self: center; position: relative; z-index: 1;
  display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 7px; border-radius: 20px;
  background: var(--blanc); border: 1px solid var(--bordure-2); box-shadow: 0 1px 3px rgba(15, 23, 32, .07);
  font-family: var(--police-etroite); font-weight: 600; font-size: 14px; line-height: 1; color: var(--texte);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.frise__item--fort .frise__minute { font-weight: 700; border-color: #C9CFD6; }
.frise__fait { grid-row: 1; position: relative; display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.frise__item--domicile .frise__fait { grid-column: 1; padding-left: 7%; }
.frise__item--exterieur .frise__fait, .frise__item--neutre .frise__fait { grid-column: 3; flex-direction: row-reverse; text-align: right; padding-right: 7%; }
/* Filet fin au-dessus de chaque fait, de la photo jusqu'à l'axe */
.frise__fait::before { content: ""; position: absolute; top: -10px; height: 1px; background: var(--bordure); }
.frise__item--domicile .frise__fait::before { left: 7%; right: -36px; }
.frise__item--exterieur .frise__fait::before, .frise__item--neutre .frise__fait::before { left: -36px; right: 7%; }
.frise__item:first-child .frise__fait::before, .frise__item--jalon + .frise__item .frise__fait::before { display: none; }
.frise__avatar { flex: none; display: block; }
.frise__avatar .portrait { box-shadow: 0 0 0 2px var(--blanc), 0 0 0 3px var(--bordure), 0 2px 6px rgba(15, 23, 32, .12); }
.frise__rond { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--fond); }
.frise__rond .frise__picto { width: 20px; height: 20px; }
.frise__texte { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-top: 3px; }
.frise__ligne { display: flex; align-items: center; gap: 7px; font-size: 15px; line-height: 20px; font-weight: 700; color: var(--texte); }
.frise__item--exterieur .frise__ligne, .frise__item--neutre .frise__ligne { justify-content: flex-end; }
.frise__nom { min-width: 0; overflow-wrap: anywhere; }
.frise__picto { width: 16px; height: 16px; }
.frise__logo { display: none; width: 16px; height: 16px; object-fit: contain; flex: none; }
.frise__score {
  display: flex; align-items: baseline; gap: 5px; font-family: var(--police-etroite); font-weight: 700; font-size: 18px;
  line-height: 1.1; color: var(--texte); font-variant-numeric: tabular-nums;
}
.frise__item--exterieur .frise__score, .frise__item--neutre .frise__score { justify-content: flex-end; }
.frise__tiret { font-weight: 500; color: var(--texte-3); }
.frise__chiffre--dom { color: var(--accent-dom); }
.frise__chiffre--ext { color: var(--accent-ext); }
.frise__detail { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 13px; line-height: 18px; color: var(--texte-3); }
.frise__sous { display: flex; align-items: center; gap: 4px; flex-basis: 100%; }
.frise__item--exterieur .frise__sous, .frise__item--neutre .frise__sous { justify-content: flex-end; }
.frise__item--exterieur .frise__detail, .frise__item--neutre .frise__detail { justify-content: flex-end; }
/* Jalons (coup d'envoi, mi-temps, fin de période, fin du match) : pastille centrée sur l'axe */
.frise__item--jalon { display: block; padding: 12px 0; }
.frise__jalon {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  width: max-content; max-width: 100%; margin: 0 auto; padding: 6px 14px 5px; border-radius: 999px;
  background: var(--blanc); border: 1px solid var(--bordure-2);
  font-family: var(--police-etroite); font-weight: 600; font-size: 12.5px; line-height: 1;
  letter-spacing: .07em; text-transform: uppercase; color: var(--texte-3); white-space: nowrap;
}
.frise__jalon strong { color: var(--texte); font-weight: 700; letter-spacing: .03em; font-variant-numeric: tabular-nums; }
.frise__jalon-minute { font-variant-numeric: tabular-nums; }
/* Nouveau fait pendant le direct : apparition discrète */
.frise__item--nouveau { animation: frise-arrivee .35s ease-out both; }
@keyframes frise-arrivee {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

/* ==========================================================================
   Compositions (football), comme la maquette : onze de chaque côté (drapeau,
   équipe, formation, sélectionneur ; numéro gris et nom, une ligne par
   joueur), terrain vert en perspective au centre (dessiné par match.js),
   bascule d'équipe en petites pastilles au-dessus du terrain
   ========================================================================== */
.compos-carte--terrain { --compos-colonnes: minmax(170px, 1fr) minmax(0, 416px) minmax(170px, 1fr); }
/* En-tête de la carte calé sur la grille : la bascule tombe juste au-dessus du terrain */
.compos-carte--terrain .carte-match__tete { display: grid; grid-template-columns: var(--compos-colonnes); column-gap: 16px; }
.compos-carte--terrain .carte-match__tete .bascule { grid-column: 2; justify-self: center; }
.bascule { gap: 4px; }
.bascule .filtre { padding: 6px 12px 5px; font-size: 12.5px; }
.compos {
  display: grid; grid-template-columns: var(--compos-colonnes); grid-template-areas: "dom centre ext";
  column-gap: 16px; align-items: start;
}
.compos--sans-terrain { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "dom ext"; gap: 24px; }
.compos__liste { min-width: 0; }
.compos__liste--domicile { grid-area: dom; }
.compos__liste--exterieur { grid-area: ext; }
.compos__centre { grid-area: centre; min-width: 0; }
.compos__vide { margin-top: 8px; font-size: 13.5px; color: var(--texte-3); }

/* En-tête d'un onze : drapeau, équipe en capitales, formation à droite ; sélectionneur en petit gris dessous */
.onze-tete {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "logo equipe formation" "logo entraineur entraineur"; align-items: center; column-gap: 10px; row-gap: 2px;
}
.onze-tete__logo { grid-area: logo; align-self: start; width: 38px; height: 38px; margin-top: -6px; object-fit: contain; }
.onze-tete__logo--initiales {
  display: inline-grid; place-items: center; width: 30px; height: 30px; margin-top: -2px; border-radius: 50%;
  background: var(--fond); color: var(--texte-2); font-size: 10px; font-weight: 700;
}
.onze-tete__equipe {
  grid-area: equipe; min-width: 0; overflow-wrap: anywhere;
  font-family: var(--police-etroite); font-weight: 700; font-size: 17px; line-height: 1.1; letter-spacing: .03em; text-transform: uppercase;
}
.onze-tete__formation {
  grid-area: formation; justify-self: end; padding: 4px 9px 3px; border-radius: 999px; background: var(--fond); color: var(--texte-2);
  font-family: var(--police-etroite); font-weight: 600; font-size: 13px; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.onze-tete__entraineur { grid-area: entraineur; font-size: 12px; line-height: 1.35; color: var(--texte-3); }
.onze-tete__personne { display: inline-block; } /* nom renvoyé à la ligne d'un bloc */
/* Le onze : numéro en gris, nom, une ligne par joueur, rien d'autre */
.onze { margin-top: 14px; }
.onze__joueur { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: baseline; padding: 1px 0; font-size: 14px; line-height: 1.35; }
.onze__num { color: var(--texte-3); font-variant-numeric: tabular-nums; }
.onze__nom { min-width: 0; color: var(--texte); overflow-wrap: anywhere; }

/* Terrain : trapèze vert (SVG de match.js) vu de face, légèrement incliné ; les joueurs sont posés par-dessus en %
   du repère (1000 × 736). Tailles proportionnelles à la largeur du terrain (unités cqw). */
.terrain { container-type: inline-size; width: 100%; }
.terrain__plan { --t-pion: clamp(26px, 8.6cqw, 38px); position: relative; aspect-ratio: 1000 / 736; }
.terrain__dessin { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 6px 8px rgba(15, 23, 32, .13)); }
.terrain__tranche { fill: #1E5E25; }
.terrain__bande { fill: #2C7E33; }
.terrain__bande--claire { fill: #32893A; }
.terrain__lignes { fill: none; stroke: rgba(255, 255, 255, .86); stroke-width: 1.2px; stroke-linejoin: round; }
.terrain__points { fill: rgba(255, 255, 255, .86); }
.terrain__equipe { position: absolute; inset: 0; }
/* Un joueur : photo centrée sur sa place, nom dessous */
.pion { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: 0; height: 0; }
.pion__corps {
  position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 3px;
  width: max-content; max-width: 108px; transform: translate(-50%, calc(var(--t-pion) / -2));
}
.pion__photo { position: relative; display: block; }
.pion .portrait { --t: var(--t-pion); background: #E9ECEF; box-shadow: 0 0 0 2px #fff, 0 2px 5px rgba(0, 0, 0, .16); }
.pion__num {
  position: absolute; left: -3px; bottom: -2px; display: grid; place-items: center;
  min-width: calc(var(--t-pion) * .42); height: calc(var(--t-pion) * .42); padding: 0 2px; border-radius: 999px;
  background: #1D4ED8; color: #fff; box-shadow: 0 0 0 1.5px #fff;
  font-family: var(--police-etroite); font-weight: 700; font-size: calc(var(--t-pion) * .28); line-height: 1; font-variant-numeric: tabular-nums;
}
.pion__nom {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff;
  font-family: var(--police); font-weight: 700; font-size: clamp(10px, 2.95cqw, 12.5px); line-height: 1.15;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}

/* Remplaçants (onglet « Compos ») : liste fine, numéro, photo, nom ; joueur remplacé et minute en gris */
.banc { margin-top: 2px; }
.banc__joueur {
  display: grid; grid-template-columns: 22px 28px minmax(0, 1fr); align-items: center; column-gap: 10px;
  padding: 7px 0; border-bottom: 1px solid var(--bordure);
}
.banc__joueur:last-child { border-bottom: 0; }
.banc__num { color: var(--texte-3); font-size: 14px; font-variant-numeric: tabular-nums; }
.banc__identite { display: flex; flex-direction: column; min-width: 0; }
.banc__nom { font-size: 14px; line-height: 1.3; color: var(--texte); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.banc__detail { font-size: 12.5px; line-height: 1.3; color: var(--texte-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ==========================================================================
   Basket : cinq de départ sur deux demi-terrains, feuilles de match
   ========================================================================== */
.parquets { container: compo / inline-size; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.parquet-bloc { min-width: 0; }
/* En-tête d'un demi-terrain : logo, équipe, entraîneur */
.compos__tete { display: flex; align-items: flex-start; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--bordure); }
.compos__logo { width: 32px; height: 32px; object-fit: contain; flex: none; }
.compos__ident { flex: 1; min-width: 0; padding-top: 3px; }
.compos__equipe { font-family: var(--police-etroite); font-weight: 700; font-size: 17px; line-height: 1.1; letter-spacing: .03em; text-transform: uppercase; }
.compos__entraineur { margin-top: 3px; font-size: 12.5px; line-height: 1.3; color: var(--texte-3); }
.parquet {
  --t-terrain: 40px;
  position: relative; margin-top: 14px; aspect-ratio: 50 / 47; border-radius: 8px;
  color: rgba(120, 82, 44, .42); background: #F3EADC; box-shadow: inset 0 0 0 1px rgba(120, 82, 44, .12);
}
.parquet__lignes { position: absolute; inset: 0; width: 100%; height: 100%; }
.parquet__lignes .parquet__raquette { fill: rgba(120, 82, 44, .06); }
.parquet__equipe { position: absolute; inset: 0; }
.joueur-terrain {
  position: absolute; left: var(--gauche, 50%); top: var(--haut, 50%);
  width: 84px; margin-left: -42px; margin-top: calc(var(--t-terrain) / -2);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.parquet .joueur-terrain { --gauche: calc(var(--x) * 1%); --haut: calc(7% + var(--y) * .8%); }
.joueur-terrain__photo { position: relative; z-index: 1; display: block; }
.parquet .joueur-terrain .portrait { box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(15, 23, 32, .18); }
.parquet .joueur-terrain .portrait--numero { background: color-mix(in srgb, var(--c) 72%, #11161C); color: var(--c-texte); }
.joueur-terrain__nom {
  position: relative; z-index: 2; display: inline-flex; align-items: baseline; gap: 4px; max-width: 100%;
  color: var(--texte); font-family: var(--police-etroite); font-weight: 600; font-size: 13px; line-height: 1.2; white-space: nowrap;
}
.joueur-terrain__nom > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.joueur-terrain__num { font-weight: 500; color: var(--texte-3); font-variant-numeric: tabular-nums; }

.boite__defile { margin-top: 4px; overflow-x: auto; }
.boite { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.boite th, .boite td { padding: 8px 6px; border-bottom: 1px solid var(--bordure); text-align: right; white-space: nowrap; }
.boite thead th { padding-block: 8px 6px; font-size: 12px; font-weight: 600; color: var(--texte-3); }
.boite abbr { text-decoration: none; }
.boite .boite__nom { width: 100%; padding-left: 0; text-align: left; font-weight: 400; }
.boite td { color: var(--texte-2); }
.boite__joueur { display: flex; align-items: center; gap: 8px; min-width: 0; }
.boite__ident { display: flex; flex-direction: column; min-width: 0; }
.boite__libelle { max-width: 190px; overflow: hidden; text-overflow: ellipsis; font-weight: 600; color: var(--texte); }
.boite__poste { font-size: 11.5px; color: var(--texte-3); }
.boite td.boite__fort { font-weight: 700; color: var(--texte); }
.boite__separation th {
  padding-top: 16px; padding-left: 0; text-align: left; border-bottom-color: var(--bordure-2);
  font-family: var(--police-etroite); font-weight: 600; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--texte-3);
}
.boite tbody:last-child tr:last-child th, .boite tbody:last-child tr:last-child td { border-bottom: 0; }

/* ==========================================================================
   Statistiques : valeurs aux deux bouts, libellé au centre, double barre fine
   ========================================================================== */
.stats { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.stat {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "d l x" "b b b";
  column-gap: 10px; row-gap: 6px; align-items: baseline;
}
.stat__libelle { grid-area: l; text-align: center; font-size: 13px; line-height: 1.25; color: var(--texte-2); }
.stat__valeur { grid-area: d; margin: 0; font-weight: 600; font-size: 13.5px; line-height: 1; color: var(--texte-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat__valeur--exterieur { grid-area: x; text-align: right; }
.stat__valeur--fort { color: var(--texte); font-weight: 700; }
.stat__barre { grid-area: b; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3px; height: 5px; }
.stat__moitie { position: relative; overflow: hidden; border-radius: 3px; background: var(--piste); }
.stat__part { position: absolute; top: 0; bottom: 0; border-radius: 3px; transition: width .4s ease; }
.stat__part--domicile { right: 0; background: var(--accent-dom); }
.stat__part--exterieur { left: 0; background: var(--accent-ext); }
/* Onglet « Stats » : la même carte, en grand */
.stats-carte--grand .stats { gap: 18px; margin-top: 18px; }
.stats-carte--grand .stat { column-gap: 16px; row-gap: 8px; }
.stats-carte--grand .stat__libelle { font-size: 14.5px; }
.stats-carte--grand .stat__valeur { font-family: var(--police-etroite); font-size: 18px; }
.stats-carte--grand .stat__barre { height: 6px; gap: 4px; }
.stats-carte--grand .equipes-tete__equipe { font-size: 17px; }

/* Meilleurs joueurs (basket, foot US) */
.leaders { margin-top: 4px; }
.leader { padding: 16px 0; border-bottom: 1px solid var(--bordure); }
.leader:last-child { border-bottom: 0; padding-bottom: 0; }
.leader__categorie {
  text-align: center; font-family: var(--police-etroite); font-weight: 600; font-size: 13px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--texte-3);
}
.leader__duel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 8px; }
.leader__cote { display: flex; align-items: center; gap: 12px; min-width: 0; }
.leader__cote--exterieur { flex-direction: row-reverse; text-align: right; }
.leader__cote--vide { justify-content: center; color: var(--texte-3); }
.leader__ident { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.leader__nom { font-weight: 600; font-size: 14px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leader__valeur { font-family: var(--police-etroite); font-weight: 700; font-size: 24px; line-height: 1.05; color: var(--texte); font-variant-numeric: tabular-nums; }
.leader__valeur small { font-size: 14px; font-weight: 600; color: var(--texte-3); }
.leader__valeur--long { font-family: var(--police); font-size: 13.5px; font-weight: 500; line-height: 1.3; color: var(--texte-2); }
.leader__detail { font-size: 13px; line-height: 1.3; color: var(--texte-3); }

/* ==========================================================================
   Infos du match : pictos au trait dans un carré gris clair
   ========================================================================== */
.infos { display: flex; flex-direction: column; gap: 14px; }
.info { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "p l" "p v"; column-gap: 12px; row-gap: 1px; align-items: center; }
.info__picto { grid-area: p; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; background: var(--fond); color: var(--texte-2); }
.info__picto svg { width: 20px; height: 20px; }
.info__libelle { grid-area: l; align-self: end; font-weight: 700; font-size: 14px; line-height: 1.2; }
.info__valeur { grid-area: v; align-self: start; margin: 0; font-size: 14px; line-height: 1.3; color: var(--texte-3); overflow-wrap: anywhere; }

/* ==========================================================================
   Face à face : dernières confrontations, forme du moment
   ========================================================================== */
.h2h__bilan {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 24px; margin-bottom: 4px; padding: 10px 12px;
  border-radius: 8px; background: var(--fond); font-size: 14px; color: var(--texte-2);
}
.h2h__bilan strong { color: var(--texte); font-weight: 700; }
.h2h__match { padding: 14px 0; border-bottom: 1px solid var(--bordure); }
.h2h__match:last-child { border-bottom: 0; padding-bottom: 0; }
.h2h__quand { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 8px; font-size: 12.5px; line-height: 1.3; color: var(--texte-3); text-align: center; }
.h2h__quand time + span::before { content: "·"; margin-right: 8px; }
.h2h__affiche { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 14px; margin-top: 8px; }
.h2h__equipe { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; font-size: 15px; line-height: 1.2; color: var(--texte-2); }
.h2h__equipe--domicile { justify-content: flex-end; text-align: right; }
.h2h__equipe--gagnant { color: var(--texte); font-weight: 700; }
.h2h__nom { min-width: 0; overflow-wrap: anywhere; }
.h2h__logo { width: 24px; height: 24px; object-fit: contain; flex: none; }
.h2h__score {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 10px 5px; border-radius: 6px; background: var(--fond);
  font-family: var(--police-etroite); font-weight: 700; font-size: 18px; line-height: 1; font-variant-numeric: tabular-nums;
}
.h2h__tiret { font-weight: 500; color: var(--texte-3); }

.forme { display: flex; flex-direction: column; }
.forme__equipe { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--bordure); }
.forme__equipe:first-child { padding-top: 0; }
.forme__nom { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; font-size: 15px; }
.forme__logo { width: 24px; height: 24px; object-fit: contain; flex: none; }
.forme__suite { display: flex; gap: 5px; flex: none; }
.forme__pastille {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; color: #fff;
  font-family: var(--police-etroite); font-weight: 700; font-size: 13.5px; line-height: 1;
}
.forme__pastille--V { background: #15803D; }
.forme__pastille--N { background: #8A919C; }
.forme__pastille--D { background: var(--rouge); }
.forme__note { margin-top: 10px; font-size: 12.5px; color: var(--texte-3); }

/* ==========================================================================
   Absents
   ========================================================================== */
.absents__liste { margin-top: 2px; }
.absent {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; column-gap: 10px;
  padding: 7px 0; border-bottom: 1px solid var(--bordure);
}
.absent:last-child { border-bottom: 0; }
.absent__identite { display: flex; flex-direction: column; min-width: 0; }
.absent__nom { font-size: 14px; line-height: 1.3; color: var(--texte); }
.absent__raison { font-size: 12.5px; line-height: 1.3; color: var(--texte-3); }
.absent__statut {
  color: var(--texte-3); text-align: right;
  font-family: var(--police-etroite); font-weight: 600; font-size: 12.5px; line-height: 1.2; letter-spacing: .05em; text-transform: uppercase;
}

/* ==========================================================================
   Réduction des animations
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .affiche__pouls, .frise__item--nouveau { animation: none; }
  .stat__part, .filtre { transition: none; }
}

/* ==========================================================================
   Responsive : colonne principale étroite (container queries sur le panneau)
   ========================================================================== */
@container panneau (max-width: 800px) {
  /* Compositions : terrain en haut, les deux onze côte à côte dessous */
  .compos { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "centre centre" "dom ext"; gap: 22px 24px; }
  .compos__centre { justify-self: center; width: 100%; max-width: 460px; }
  .compos-carte--terrain .carte-match__tete { display: flex; }
}
@container panneau (max-width: 700px) {
  .cles { grid-template-columns: minmax(0, 1fr); }
  .cles--1 .cle--exterieur { grid-column: auto; }
}
@container panneau (max-width: 600px) {
  /* Frise sur une colonne : axe et minutes à gauche, logo de l'équipe devant le nom */
  .frise::before { left: 23px; }
  .frise__item { grid-template-columns: 46px minmax(0, 1fr); column-gap: 10px; }
  .frise__minute { grid-column: 1; min-width: 38px; height: 38px; padding: 0 4px; font-size: 13px; }
  .frise__item--domicile .frise__fait, .frise__item--exterieur .frise__fait, .frise__item--neutre .frise__fait {
    grid-column: 2; flex-direction: row; text-align: left; padding: 0;
  }
  .frise__fait { gap: 10px; }
  .frise__fait::before { display: none; }
  .frise__item--exterieur .frise__ligne, .frise__item--neutre .frise__ligne,
  .frise__item--exterieur .frise__score, .frise__item--neutre .frise__score,
  .frise__item--exterieur .frise__detail, .frise__item--neutre .frise__detail { justify-content: flex-start; }
  .frise__item--exterieur .frise__sous, .frise__item--neutre .frise__sous { justify-content: flex-start; }
  .frise__logo { display: block; }
  .frise__ligne { gap: 6px; font-size: 14.5px; }
  .frise__avatar .portrait { --t: 36px; }
  .frise__rond { width: 36px; height: 36px; }
  .frise__rond .frise__picto { width: 17px; height: 17px; }
  .frise__texte { padding-top: 0; }
  .frise__item--jalon { padding: 10px 0; }
  .frise__jalon { margin-left: 0; }
  .carte-match__tete { margin-bottom: 12px; }
  .deux-colonnes { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .parquets { grid-template-columns: minmax(0, 1fr); max-width: 420px; margin-inline: auto; }
  .h2h__equipe { font-size: 14px; }
  .h2h__affiche { gap: 8px; }
  .leader__duel { gap: 8px; }
  .leader__cote { gap: 8px; }
  .leader__valeur { font-size: 20px; }
  .leader .portrait--l { --t: 40px; }
}
@container panneau (max-width: 400px) {
  .cle { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; padding: 14px; }
  .cle__photo { width: 84px; height: 100px; }
  .cle__stat { padding: 0 8px; }
  .cle__stat-valeur { font-size: 19px; }
  .cle__stat-libelle { font-size: 12px; }
  .compos { gap: 18px 14px; }
  .onze-tete { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "logo equipe" "logo formation" "entraineur entraineur"; column-gap: 8px; row-gap: 4px; }
  .onze-tete__logo { width: 30px; height: 30px; margin-top: -4px; }
  .onze-tete__equipe { font-size: 15.5px; }
  .onze-tete__formation { justify-self: start; padding: 3px 7px 2px; font-size: 12px; }
  .onze { margin-top: 10px; }
  .onze__joueur { grid-template-columns: 22px minmax(0, 1fr); font-size: 13.5px; }
  .compos__tete { gap: 8px; }
  .compos__logo { width: 26px; height: 26px; }
  .compos__equipe { font-size: 15.5px; }
}

/* ==========================================================================
   Responsive : fenêtre
   ========================================================================== */
@media (max-width: 760px) {
  .fiche-match__principal { gap: 12px; }
  .fiche-match__panneau { gap: 12px; }
  .affiche { min-height: 0; }
  .affiche__contenu { padding: 14px 14px 18px; }
  .affiche__haut { flex-direction: column; gap: 3px; font-size: 12.5px; }
  .affiche__competition { font-size: 13.5px; }
  .affiche__competition + .affiche__infos::before { content: none; }
  .affiche__infos { flex-direction: column; gap: 3px; }
  .affiche__infos > span + span::before { content: none; }
  .affiche__corps { column-gap: 10px; row-gap: 8px; margin-top: 16px; }
  .affiche__blason, .affiche__logo { width: 46px; height: 46px; }
  .affiche__logo--initiales { width: 42px; height: 42px; font-size: 15px; }
  .affiche__nom { font-size: 18px; }
  .affiche__nom-long { display: none; }
  .affiche__nom-court { display: inline; }
  .affiche__centre { min-width: 0; gap: 8px; }
  .affiche__score { font-size: 58px; }
  .affiche__tiret { margin: 0 8px; }
  .affiche__heure { font-size: 44px; }
  .affiche__etat { gap: 6px; padding: 5px 9px 4px; font-size: 13px; }
  .affiche__minute { padding-left: 6px; }
  .affiche__buteurs { align-items: center; text-align: center; font-size: 12.5px; }
  .affiche__mitemps, .affiche__tab { font-size: 12.5px; }
  .affiche__vedette { width: 46%; opacity: .5; }
  .affiche__periodes { margin-top: 14px; }
  .periodes th, .periodes td { padding: 6px 8px; }
  .fiche-match__onglets { gap: 20px; padding: 0 14px; }
  .fiche-match__onglets .onglet-direct { padding: 13px 0 12px; font-size: 14px; }
  .carte-match, .fiche-match__cote .carte-match { padding: 16px 14px 18px; }
  .fiche-match__cote .operateurs { padding: 16px 14px 14px; }
  .carte-match__titre { font-size: 19px; }
}

@media (max-width: 400px) {
  .affiche__score { font-size: 50px; }
  .affiche__nom { font-size: 16px; }
  .affiche__blason, .affiche__logo { width: 40px; height: 40px; }
  .fiche-match__onglets { gap: 18px; }
}