/* Thème Sport Pulse, refonte des pronostics (26/10/2026) : page de match de football (/match/<ligue>/<num>-<slug>/),
   copie fidèle des maquettes validées par Titouan : outils/demo-pronostics/maquette/direct-page.css puis
   direct-page-2.css (image du ballon ramenée à ../img/spp/). Chargée après spp.css et prono-page.css (functions.php). */
/* Maquette de la page direct d'un match de foot (en-tête à score, onglets Direct / Pronostic / Stats, suivi
   graphique, statistiques et événements, compositions, classement, face-à-face, derniers matchs, autres matchs,
   infos du match). Complète pronostics.css et prono-page.css. */

/* En-tête : score ou compte à rebours, statut, buteurs, onglets */
.spp-em__scene--direct { max-width: 560px; margin-bottom: 10px; }
.spp-em__centre { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.spp-score { display: flex; align-items: center; gap: 10px; }
.spp-score b { font: 800 52px/1 var(--spp-etroite); color: var(--spp-texte); font-variant-numeric: tabular-nums; }
.spp-score i { font: 800 36px/1 var(--spp-etroite); color: #B5BAC2; font-style: normal; }
.spp-statut-match { display: inline-flex; align-items: center; gap: 7px; background: var(--spp-panneau); border-radius: 999px; padding: 5px 12px; font: 700 13px/1 var(--spp-etroite); text-transform: uppercase; letter-spacing: .05em; color: var(--spp-texte-2); white-space: nowrap; }
.spp-statut-match.direct { background: var(--spp-rouge-pale); color: var(--spp-rouge); }
.spp-statut-match.direct i { width: 8px; height: 8px; border-radius: 50%; background: var(--spp-rouge); animation: spp-pulse 1.4s ease-in-out infinite; }
@keyframes spp-pulse { 50% { opacity: .25; } }
.spp-buteurs { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 560px; margin: 0 auto 14px; font: 500 13px/1.5 var(--spp-police); color: var(--spp-texte-2); }
.spp-buteurs .dom { text-align: right; }
.spp-buteurs span span { display: block; }
.spp-onglets-match { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; background: var(--spp-panneau); border-radius: 12px; padding: 5px; }
.spp-onglets-match button, .spp-onglets-match a { display: flex; align-items: center; justify-content: center; height: 40px; border-radius: 9px; font: 600 14.5px/1 var(--spp-police); color: var(--spp-texte-2); text-decoration: none; }
.spp-onglets-match [aria-selected="true"] { background: #fff; color: var(--spp-texte); box-shadow: 0 1px 3px rgba(15,23,32,.08), inset 0 -2px 0 var(--spp-rouge); }
.spp-onglets-match button:hover, .spp-onglets-match a:hover { color: var(--spp-texte); background: rgba(255,255,255,.6); }
.spp-volet { display: flex; flex-direction: column; gap: 14px; }
.spp-volet[hidden] { display: none; }

/* Suivi graphique (iframe sportscore.com) */
.spp-suivi { border-radius: 12px; overflow: hidden; background: var(--spp-panneau); }
.spp-suivi iframe { display: block; width: 100%; height: 470px; border: 0; }

/* Statistiques du match et événements, côte à côte */
.spp-deux { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.spp-deux .spp-titre { font-size: 21px; }
.spp-sm { background: var(--spp-panneau); border-radius: 12px; padding: 12px; }
.spp-sm__possession { display: flex; justify-content: space-between; align-items: center; font: 600 12.5px/1 var(--spp-police); color: var(--spp-texte-3); text-transform: uppercase; letter-spacing: .05em; }
.spp-sm__possession b { font: 800 22px/1 var(--spp-etroite); letter-spacing: 0; }
.spp-sm__possession b.dom { color: var(--spp-rouge); }
.spp-sm__possession b.ext { color: #1F2D4D; }
.spp-sm__barre { display: flex; gap: 3px; height: 8px; margin: 8px 0 10px; }
.spp-sm__barre i { border-radius: 4px; }
.spp-sm__barre .dom, .spp-sm__mini .dom { background: var(--spp-rouge); }
.spp-sm__barre .ext, .spp-sm__mini .ext { background: #1F2D4D; }
.spp-sm__ligne { display: grid; grid-template-columns: 34px minmax(0, 1fr) 34px; align-items: center; gap: 4px 8px; background: #fff; border-radius: 9px; padding: 8px 10px 9px; }
.spp-sm__ligne + .spp-sm__ligne { margin-top: 6px; }
.spp-sm__ligne > span { text-align: center; font: 500 13px/1.2 var(--spp-police); color: var(--spp-texte-2); }
.spp-sm__ligne > b { font: 700 16px/1 var(--spp-etroite); color: #9AA1AB; }
.spp-sm__ligne > b:last-of-type { text-align: right; }
.spp-sm__ligne > b.mieux.dom { color: var(--spp-rouge); }
.spp-sm__ligne > b.mieux.ext { color: #1F2D4D; }
.spp-sm__mini { grid-column: 1 / -1; display: flex; gap: 2px; height: 4px; background: var(--spp-panneau); border-radius: 2px; overflow: hidden; }
.spp-sm__mini i { display: block; height: 100%; opacity: .85; }
.spp-evts { list-style: none; padding: 0; margin: 0; background: var(--spp-panneau); border-radius: 12px; padding: 8px 6px; max-height: 640px; overflow-y: auto; scrollbar-width: thin; }
.spp-ev { display: grid; grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1fr); align-items: center; gap: 6px; padding: 5px 0; }
.spp-ev__minute { justify-self: center; background: #fff; border-radius: 6px; padding: 4px 6px; font: 700 12.5px/1 var(--spp-etroite); color: var(--spp-texte-2); white-space: nowrap; }
.spp-ev.but .spp-ev__minute { background: var(--spp-texte); color: #fff; }
.spp-ev__cote { display: flex; align-items: center; gap: 7px; min-width: 0; font: 500 13px/1.25 var(--spp-police); color: var(--spp-texte); }
.spp-ev__cote.dom { flex-direction: row-reverse; text-align: right; }
.spp-ev__cote b { display: block; font-weight: 600; }
.spp-ev__cote small { display: block; font-size: 11.5px; color: var(--spp-texte-3); }
.spp-ev__cote b.entre { color: #15803D; }
.spp-ev__cote small.sort { color: var(--spp-rouge); }
.spp-ev__ico { flex: none; width: 18px; display: grid; place-items: center; }
.spp-ev__ico .spp-ico { width: 18px; height: 18px; }
.spp-carte-ico { display: inline-block; width: 11px; height: 15px; border-radius: 2px; }
.spp-carte-ico.jaune { background: #F5B301; }
.spp-carte-ico.rouge { background: var(--spp-rouge); }
.spp-rempl-ico { width: 18px; height: 18px; }
.spp-ev__sep { text-align: center; padding: 6px 0; }
.spp-ev__sep span { display: inline-block; background: #fff; border: 1px solid var(--spp-ligne); border-radius: 999px; padding: 4px 12px; font: 700 12px/1 var(--spp-etroite); text-transform: uppercase; letter-spacing: .05em; color: var(--spp-texte-2); }

/* Compositions officielles : numéro dans la pastille, buts, cartons et sorties */
.spp-bloc-compos { container-type: inline-size; }
.spp-joueur > i { display: grid; place-items: center; font: 700 11px/1 var(--spp-etroite); color: #fff; font-style: normal; }
.spp-joueur__marques { display: flex; gap: 3px; font-style: normal; min-height: 0; }
.spp-joueur__marques i { width: auto; height: auto; border: 0; box-shadow: none; border-radius: 3px; }
.spp-joueur__marques .m-but { width: 12px; height: 12px; border-radius: 50%; background: #fff url('../img/spp/ballon-foot.svg') center / 12px no-repeat; }
.spp-joueur__marques .m-jaune { width: 8px; height: 11px; background: #F5B301; }
.spp-joueur__marques .m-rouge { width: 8px; height: 11px; background: var(--spp-rouge); }
.spp-joueur__marques .m-sort { background: rgba(0,0,0,.45); color: #fff; font: 700 9.5px/1 var(--spp-etroite); padding: 2px 4px; }
.spp-rempl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.spp-rempl h3 { font: 700 14px/1.2 var(--spp-etroite); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 8px; }
.spp-rempl ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.spp-rempl li { display: grid; grid-template-columns: 40px 18px minmax(0, 1fr); align-items: center; gap: 6px; background: var(--spp-panneau); border-radius: 9px; padding: 6px 8px; font: 500 13px/1.25 var(--spp-police); }
.spp-rempl li.aucun { display: block; color: var(--spp-texte-3); }
.spp-rempl__min { font: 700 12.5px/1 var(--spp-etroite); color: var(--spp-texte-2); }
.spp-rempl li b { display: block; color: #15803D; }
.spp-rempl li small { display: block; color: var(--spp-rouge); }
.spp-banc { margin: 8px 2px 0; font: 400 12px/1.4 var(--spp-police); color: var(--spp-texte-3); }

/* Classement */
.spp-classt { background: var(--spp-panneau); border-radius: 12px; padding: 0 6px 6px; }
.spp-classt__tete, .spp-classt__ligne, .spp-classt__saut { display: grid; grid-template-columns: 30px minmax(0, 1fr) repeat(5, 34px) 40px; align-items: center; gap: 6px; padding: 0 10px; }
.spp-classt__tete { height: 36px; font: 600 11.5px/1 var(--spp-police); color: var(--spp-texte-3); text-align: center; }
.spp-classt__tete span:nth-child(2) { text-align: left; }
.spp-classt__ligne { height: 40px; background: #fff; font: 500 13.5px/1 var(--spp-police); color: var(--spp-texte-2); text-align: center; }
.spp-classt__ligne:nth-child(2) { border-radius: 10px 10px 0 0; }
.spp-classt__ligne:last-child { border-radius: 0 0 10px 10px; }
.spp-classt__ligne + .spp-classt__ligne { border-top: 1px solid var(--spp-ligne); }
.spp-classt__ligne .eq { display: flex; align-items: center; gap: 8px; text-align: left; color: var(--spp-texte); font-weight: 600; min-width: 0; }
.spp-classt__ligne .eq img { width: 20px; height: 20px; object-fit: contain; }
.spp-classt__ligne b { color: var(--spp-texte); }
.spp-classt__ligne.dom { box-shadow: inset 4px 0 0 var(--spp-rouge); background: #FFF6F6; }
.spp-classt__ligne.ext { box-shadow: inset 4px 0 0 #1F2D4D; background: #F4F6FA; }
.spp-classt__saut { height: 22px; background: #fff; color: var(--spp-texte-3); }
.spp-bloc--nu { margin: 0; padding: 0; background: none; }

/* Autres matchs de la journée */
.spp-autres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.spp-autre { display: grid; grid-template-columns: 74px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; row-gap: 5px; align-items: center; background: var(--spp-panneau); border-radius: 12px; padding: 10px 12px; text-decoration: none !important; }
.spp-autre:hover { background: var(--spp-panneau-2); }
.spp-autre__quand { grid-row: 1 / 3; font: 600 12px/1.3 var(--spp-police); color: var(--spp-texte-3); }
.spp-autre__quand .direct { color: var(--spp-rouge); }
.spp-autre__eq { display: flex; align-items: center; gap: 8px; font: 500 14px/1.1 var(--spp-police); color: var(--spp-texte); min-width: 0; }
.spp-autre__eq img { width: 18px; height: 18px; object-fit: contain; }
.spp-autre__eq b { margin-left: auto; font: 700 16px/1 var(--spp-etroite); }

/* Onglet Stats : buts par quart d'heure, résultats */
.spp-quarts { background: #fff; border-radius: 12px; padding: 12px; }
.spp-quarts__axe, .spp-quarts__ligne { display: grid; grid-template-columns: 74px repeat(6, minmax(0, 1fr)); gap: 6px; align-items: end; }
.spp-quarts__axe { font: 600 11px/1 var(--spp-police); color: var(--spp-texte-3); text-align: center; margin-bottom: 8px; }
.spp-quarts__eq + .spp-quarts__eq { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--spp-ligne); }
.spp-quarts__nom { display: flex; align-items: center; gap: 8px; font: 700 14px/1 var(--spp-police); margin: 0 0 8px; }
.spp-quarts__nom img { width: 20px; height: 20px; object-fit: contain; }
.spp-quarts__nom.dom { color: var(--spp-rouge); }
.spp-quarts__nom.ext { color: #1F2D4D; }
.spp-quarts__ligne + .spp-quarts__ligne { margin-top: 6px; }
.spp-quarts__lib { font: 500 12px/1 var(--spp-police); color: var(--spp-texte-3); align-self: center; }
.spp-quart { position: relative; height: 46px; background: var(--spp-panneau); border-radius: 6px; display: flex; align-items: flex-end; overflow: hidden; }
.spp-quart i { display: block; width: 100%; border-radius: 6px 6px 0 0; }
.spp-quart i.marq.dom { background: var(--spp-rouge); }
.spp-quart i.marq.ext { background: #1F2D4D; }
.spp-quart i.enc { background: #C5CAD1; }
.spp-quart b { position: absolute; inset: 0; display: grid; place-items: center; font: 700 14px/1 var(--spp-etroite); color: var(--spp-texte); mix-blend-mode: normal; text-shadow: 0 0 3px #fff; }
.spp-res__deux { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.spp-res { background: #fff; border-radius: 12px; padding: 12px; }
.spp-res__barre { display: flex; gap: 3px; height: 10px; margin-bottom: 10px; }
.spp-res__barre i { border-radius: 4px; }
.spp-res__barre .v { background: #15803D; }
.spp-res__barre .n { background: #9AA1AB; }
.spp-res__barre .d { background: var(--spp-rouge); }
.spp-res__chiffres { display: flex; justify-content: space-between; gap: 6px; font: 500 12px/1.2 var(--spp-police); color: var(--spp-texte-3); }
.spp-res__chiffres b { display: block; font: 800 20px/1 var(--spp-etroite); color: var(--spp-texte); }
.spp-res__chiffres .v b { color: #15803D; }
.spp-res__chiffres .d b { color: var(--spp-rouge); }
.spp-res__mt { margin: 10px 0 0; font: 500 12.5px/1.3 var(--spp-police); color: var(--spp-texte-2); }

/* Colonne de droite : infos du match */
.spp-infos-match dl { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.spp-infos-match dl > div { background: var(--spp-panneau); border-radius: 10px; padding: 9px 12px; }
.spp-infos-match dt { font: 700 11.5px/1 var(--spp-etroite); text-transform: uppercase; letter-spacing: .06em; color: var(--spp-texte-3); margin-bottom: 4px; }
.spp-infos-match dd { margin: 0; font: 600 14px/1.35 var(--spp-police); color: var(--spp-texte); }

@media (max-width: 900px) {
  .spp-deux, .spp-rempl, .spp-res__deux { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .spp-score b { font-size: 40px; }
  .spp-suivi iframe { height: 420px; }
  .spp-autres { grid-template-columns: minmax(0, 1fr); }
  .spp-classt__tete, .spp-classt__ligne, .spp-classt__saut { grid-template-columns: 24px minmax(0, 1fr) 26px 26px 26px 26px 34px 30px; gap: 4px; padding: 0 6px; }
  .spp-quarts__axe, .spp-quarts__ligne { grid-template-columns: 58px repeat(6, minmax(0, 1fr)); gap: 4px; }
  .spp-onglets-match button, .spp-onglets-match a { font-size: 13.5px; }
}
/* Page direct, 2e tour (retours de Titouan du 26/10 au soir) : regarder le match, photos des joueurs, onglet Stats
   plus fin et plus lisible, onglet Pronostic, infos du match illustrées. Complète direct-page.css. */

/* Regarder le match : diffuseurs, lien Canal+, avant-match sur notre terrain */
.spp-regarder { display: flex; align-items: center; gap: 12px; background: var(--spp-panneau); border-radius: 12px; padding: 10px 12px; margin-bottom: 12px; }
.spp-regarder__ico { width: 38px; height: 38px; border-radius: 10px; background: #fff; display: grid; place-items: center; color: var(--spp-rouge); flex: none; }
.spp-regarder__ico svg { width: 22px; height: 22px; }
.spp-regarder__texte { flex: 1; min-width: 0; }
.spp-regarder__texte small { display: block; font: 700 11.5px/1 var(--spp-etroite); text-transform: uppercase; letter-spacing: .06em; color: var(--spp-texte-3); margin-bottom: 4px; }
.spp-regarder__texte b { font: 700 16px/1.2 var(--spp-police); color: var(--spp-texte); }
.spp-regarder__cta { flex: none; display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; background: #111418; color: #fff !important; font: 700 15px/1 var(--spp-etroite); text-transform: uppercase; letter-spacing: .05em; text-decoration: none !important; }
.spp-regarder__cta:hover { background: #000; }
.spp-avant { position: relative; height: 300px; border-radius: 12px; overflow: hidden; background: repeating-linear-gradient(90deg, #2F8F4E 0 10%, #2A8447 10% 20%); }
.spp-avant__terrain { position: absolute; inset: 0; width: 100%; height: 100%; color: rgba(255,255,255,.4); }
.spp-avant__contenu { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; color: #fff; background: radial-gradient(60% 70% at 50% 50%, rgba(0,0,0,.28), rgba(0,0,0,.05)); }
.spp-avant__logos { display: flex; align-items: center; gap: 16px; }
.spp-avant__logos img { width: 56px; height: 56px; object-fit: contain; background: #fff; border-radius: 14px; padding: 6px; box-shadow: 0 6px 16px rgba(0,0,0,.25); }
.spp-avant__logos i { font: 800 18px/1 var(--spp-etroite); font-style: normal; opacity: .85; }
.spp-avant__contenu p { margin: 4px 0 0; font: 700 14px/1 var(--spp-etroite); text-transform: uppercase; letter-spacing: .08em; }
.spp-avant__contenu > small { font: 500 13px/1.3 var(--spp-police); opacity: .9; }
.spp-rebours--clair b { background: rgba(255,255,255,.16); color: #fff; }
.spp-rebours--clair small { color: rgba(255,255,255,.85); }
.spp-rebours--clair > i { color: rgba(255,255,255,.7); }

/* Compositions : photo dans la pastille, numéro en badge */
.spp-joueur > i { position: relative; }
.spp-joueur.avec-photo > i { width: 38px; height: 38px; background: #fff; padding: 0; }
.spp-joueur.avec-photo > i img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: center 20%; display: block; }
.spp-joueur.dom.avec-photo > i { border-color: var(--spp-rouge); }
.spp-joueur.ext.avec-photo > i { border-color: #1F2D4D; }
.spp-joueur__num { position: absolute; right: -6px; bottom: -4px; min-width: 16px; height: 16px; border-radius: 8px; padding: 0 3px; display: grid; place-items: center; font: 700 9.5px/1 var(--spp-etroite); color: #fff; text-decoration: none; border: 1.5px solid #fff; }
.spp-joueur.dom .spp-joueur__num { background: var(--spp-rouge); }
.spp-joueur.ext .spp-joueur__num { background: #1F2D4D; }
@container (max-width: 520px) {
  .spp-joueur.avec-photo > i { width: 26px; height: 26px; }
  .spp-joueur__num { min-width: 13px; height: 13px; font-size: 8px; right: -5px; }
}

/* Onglet Stats : lignes comparatives fines */
.spp-cmp { background: #fff; border-radius: 12px; padding: 6px 14px 10px; }
.spp-cmp__tete { display: flex; justify-content: space-between; padding: 6px 0 8px; font: 700 13.5px/1 var(--spp-police); }
.spp-cmp__tete span { display: inline-flex; align-items: center; gap: 7px; }
.spp-cmp__tete img { width: 20px; height: 20px; object-fit: contain; }
.spp-cmp__tete .dom { color: var(--spp-rouge); }
.spp-cmp__tete .ext { color: #1F2D4D; }
.spp-cmp__ligne { display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px; align-items: center; row-gap: 5px; padding: 8px 0; border-top: 1px solid var(--spp-ligne); }
.spp-cmp__ligne > span:not(.spp-cmp__barres) { text-align: center; font: 500 13px/1.25 var(--spp-police); color: var(--spp-texte-2); }
.spp-cmp__ligne > b { font: 700 15.5px/1 var(--spp-etroite); color: #9AA1AB; font-variant-numeric: tabular-nums; }
.spp-cmp__ligne > b.ext { text-align: right; }
.spp-cmp__ligne > b.mieux.dom { color: var(--spp-rouge); }
.spp-cmp__ligne > b.mieux.ext { color: #1F2D4D; }
.spp-cmp__barres { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.spp-cmp__barres > span { height: 5px; background: var(--spp-panneau); border-radius: 3px; display: flex; overflow: hidden; }
.spp-cmp__barres .g { justify-content: flex-end; }
.spp-cmp__barres i { display: block; height: 100%; border-radius: 3px; }
.spp-cmp__barres i.dom { background: var(--spp-rouge); }
.spp-cmp__barres i.ext { background: #1F2D4D; }
.spp-cmp__barres i.moins { opacity: .3; }

/* Buts par quart d'heure : marqués vers le haut, encaissés vers le bas, chiffres lisibles */
.spp-qh { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.spp-qh__eq { background: #fff; border-radius: 12px; padding: 12px; }
.spp-quarts__nom small { margin-left: auto; font: 500 12px/1 var(--spp-police); color: var(--spp-texte-3); }
.spp-qh__graphe { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-top: 4px; }
.spp-qh__col { display: grid; grid-template-rows: 16px 52px 52px 16px 18px; justify-items: center; }
.spp-qh__col .n { font: 700 13px/16px var(--spp-etroite); color: var(--spp-texte); }
.spp-qh__col .n.e { color: var(--spp-texte-3); }
.spp-qh__col .haut, .spp-qh__col .bas { width: 100%; display: flex; justify-content: center; }
.spp-qh__col .haut { align-items: flex-end; border-bottom: 1.5px solid #D3D7DD; }
.spp-qh__col .bas { align-items: flex-start; }
.spp-qh__col i { display: block; width: 12px; min-height: 2px; }
.spp-qh__col .haut i { border-radius: 4px 4px 0 0; }
.spp-qh__col .haut i.dom { background: var(--spp-rouge); }
.spp-qh__col .haut i.ext { background: #1F2D4D; }
.spp-qh__col .bas i { border-radius: 0 0 4px 4px; background: #C5CAD1; }
.spp-qh__col .lib { font: 600 10.5px/18px var(--spp-police); color: var(--spp-texte-3); }
.spp-qh__legende { display: flex; gap: 14px; margin-top: 6px; font: 500 12px/1 var(--spp-police); color: var(--spp-texte-3); }
.spp-qh__legende span { display: inline-flex; align-items: center; gap: 6px; }
.spp-qh__legende i { width: 10px; height: 10px; border-radius: 3px; }
.spp-qh__legende i.dom { background: var(--spp-rouge); }
.spp-qh__legende i.ext { background: #1F2D4D; }
.spp-qh__legende i.enc { background: #C5CAD1; }
.spp-forme--grand { margin-top: 12px; gap: 5px; }
.spp-forme--grand i { width: 12px; height: 12px; }

/* Onglet Pronostic : résultat du prono, rappel de l'analyse */
.spp-resultat { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 999px; font: 800 15px/1 var(--spp-etroite); text-transform: uppercase; letter-spacing: .05em; color: #fff; }
.spp-resultat.gagne { background: #15803D; }
.spp-resultat.perdu { background: var(--spp-rouge); }
.spp-article--rappel { margin: 4px 6px 4px; }

/* Infos du match : météo illustrée, lignes avec icônes */
.spp-meteo { display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; row-gap: 8px; align-items: center; background: linear-gradient(135deg, #EEF4FF, #F7F9FC); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; }
.spp-meteo__ico { grid-row: 1 / 3; width: 64px; height: 64px; }
.spp-meteo__temp b { display: block; font: 800 30px/1 var(--spp-etroite); color: var(--spp-texte); }
.spp-meteo__temp small { display: block; font: 600 13px/1.2 var(--spp-police); color: var(--spp-texte-2); margin-top: 2px; }
.spp-meteo__details { display: flex; gap: 12px; font: 600 12.5px/1 var(--spp-police); color: var(--spp-texte-2); }
.spp-meteo__details span { display: inline-flex; align-items: center; gap: 5px; }
.spp-meteo__details svg { width: 16px; height: 16px; color: #2F6FE4; }
.spp-infos-match dl > div { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: center; }
.spp-infos__ico { width: 30px; height: 30px; border-radius: 9px; background: #fff; display: grid; place-items: center; color: var(--spp-rouge); }
.spp-infos__ico svg { width: 17px; height: 17px; }

@media (max-width: 640px) {
  .spp-qh { grid-template-columns: minmax(0, 1fr); }
  .spp-avant { height: 260px; }
  .spp-regarder { flex-wrap: wrap; }
  .spp-regarder__cta { width: 100%; justify-content: center; }
}

/* Terrain sur mobile : noms plus petits, une ligne sur deux affiche le nom au-dessus de la pastille (pas de chevauchement) */
@container (max-width: 520px) {
  .spp-joueur { width: 58px; gap: 2px; }
  .spp-joueur b { font-size: 8.5px; }
  .spp-joueur.alt b { order: -1; }
}

/* Statistiques du match (onglet Résumé) : lignes fines comme l'onglet Stats, sans cadre ni pastilles */
.spp-cmp--match { padding: 0; background: none; }
.spp-cmp--match .spp-sm__possession b { font-size: 18px; }
.spp-cmp--match .spp-sm__barre { height: 6px; margin: 8px 0 6px; }
.spp-cmp--match .spp-cmp__ligne { grid-template-columns: 44px minmax(0, 1fr) 44px; padding: 7px 0; row-gap: 4px; }
.spp-cmp--match .spp-cmp__ligne > b { font-size: 14.5px; }
.spp-cmp--match .spp-cmp__barres > span { height: 4px; }

/* Thème (intégration, 26/10/2026) : blocs relus en direct par assets/js/direct.js (<div data-bloc>), sans effet sur la
   mise en page ; onglets sans « Pronostic » quand aucun prono n'est publié pour le match. */
[data-bloc] { display: contents; }
.spp-onglets-match--deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Terrain des compositions sur téléphone : à 390 px le terrain horizontal de la maquette fait se chevaucher les noms
   (lignes à 30 px l'une de l'autre) et coupe ceux des gardiens. Il passe à la verticale, l'équipe qui reçoit en haut :
   mêmes positions relues dans --x (profondeur) et --y (largeur, côté droit du joueur à gauche de l'écran pour l'équipe
   qui reçoit, à droite pour l'autre), lignes du terrain tournées d'un quart de tour, bandes de pelouse horizontales. */
@container (max-width: 520px) {
  .spp-bloc-compos .spp-terrain { aspect-ratio: 560 / 1000; background: repeating-linear-gradient(180deg, #2F8F4E 0 10%, #2A8447 10% 20%); }
  .spp-bloc-compos .spp-terrain__lignes { inset: 0 auto auto 100%; width: 178.5714%; height: 56%; transform-origin: 0 0; transform: rotate(90deg); }
  .spp-bloc-compos .spp-joueur { left: calc(100% - var(--y)) !important; top: var(--x) !important; width: 62px; gap: 3px; }
  .spp-bloc-compos .spp-joueur > i { width: 22px; height: 22px; }
  .spp-bloc-compos .spp-joueur b { font-size: 10px; }
  .spp-bloc-compos .spp-joueur.alt b { order: 0; }
}

/* Suivi sportscore : la barre noire du bas du module (bouton du match, « Live tracker by sportscore.com », 60 px)
   est masquée en rognant le cadre (demande de Titouan, 26/10) */
.spp-suivi { height: 406px; }
@media (max-width: 640px) {
  .spp-suivi { height: 356px; }
}