/* Header partage par toutes les pages (brainstorm Jerome 13/09/2026 :
   "la barre header peut etre identique sur TOUS la navigation" - avant
   cette extraction, chaque page dupliquait sa propre copie du header,
   d'ou les incoherences repetees corrigees une a une ce soir (police,
   position du logo, reseaux sociaux, liens Tarifs/A propos...).

   Repose sur un jeu de variables CSS standard que CHAQUE page doit
   definir dans son propre :root (et :root[data-theme="light"]) :
     --bg --surface --header --text-rgb --text --border --blue
   Ce sont exactement les tokens deja utilises par hub.html/prematch.html/
   index.html/break-draw.html/first-half.html - account.html, choose-plan.html
   et landing.html (a-propos) les ont recus en plus pour que ce fichier
   s'applique correctement partout (voir CLAUDE.md / commentaires dans
   chacun de ces 3 fichiers pour le detail de ce qui reste hors perimetre :
   le corps de page de ces 3-la n'est pas repeint en theme clair, seul le
   header l'est - un chantier plus large, separe de cette demande).
*/
header, #app-header {
  background: var(--header);
  border-bottom: 0.5px solid var(--border);
  padding: 6px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 10;
}
.header-left { display: flex; align-items: center; gap: 20px; }
.header-right { display: flex; align-items: center; gap: 10px; }

.logo { font-size: 20px; font-weight: 700; display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.logo-aura { width: 50px; height: 50px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, rgba(100,160,255,0.1) 40%, transparent 70%); display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 0 15px rgba(150,200,255,0.9)); flex-shrink: 0; }
.logo-aura img { width: 40px; height: 40px; object-fit: contain; }

.nav-follow-group { display: flex; align-items: center; gap: 10px; }
.nav-follow-label { font-size: 12px; color: rgba(var(--text-rgb),0.6); font-weight: 700; white-space: nowrap; }
.nav-social { display: flex; align-items: center; gap: 6px; }
.nav-social a { width: 28px; height: 28px; border-radius: 7px; background: rgba(59,130,246,0.15); border: 0.5px solid rgba(59,130,246,0.35); display: flex; align-items: center; justify-content: center; color: var(--blue); transition: background .15s; }
.nav-social a:hover { background: rgba(59,130,246,0.28); }
.nav-social svg { width: 14px; height: 14px; }

.nav-results { font-size: 13px; font-weight: 600; color: rgba(var(--text-rgb),0.6); text-decoration: none; display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.nav-results:hover { color: var(--text); }

.theme-toggle { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid rgba(var(--text-rgb),0.2); background: transparent; cursor: pointer; font-size: 15px; flex-shrink: 0; }
.lang-toggle { display: flex; gap: 4px; background: rgba(var(--text-rgb),0.05); border: 0.5px solid var(--border); border-radius: 20px; padding: 3px; }
.lang-btn { border: none; background: transparent; color: rgba(var(--text-rgb),0.5); font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 16px; cursor: pointer; letter-spacing: 0.3px; }
.lang-btn.active { background: var(--blue); color: #fff; }
.login-link { font-size: 13px; color: var(--blue); text-decoration: none; font-weight: 700; white-space: nowrap; }
/* [MAJ 13/09/2026] .account-area-inner regroupe le contenu de #account-area
   (badge plan + avatar, ou login+signup) - remplace les wrappers en style
   inline dupliques sur chaque page, pour pouvoir les empiler proprement
   dans le menu mobile (voir media query plus bas). */
.account-area-inner { display: flex; align-items: center; gap: 10px; }
.signup-link { color: var(--text); opacity: 0.75; }
.signup-link:hover { opacity: 1; }

.plan-badge { display: flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: 30px; font-size: 12px; font-weight: 700; white-space: nowrap; border: none; }
.plan-badge.linked { background: rgba(74,222,128,0.15); color: #4ade80; border: 0.5px solid rgba(74,222,128,0.3); }
.plan-badge.unlinked { background: transparent; color: var(--text); border: 1.5px solid rgba(var(--text-rgb),0.25); cursor: pointer; transition: border-color .2s; }
.plan-badge.unlinked:hover { border-color: rgba(var(--text-rgb),0.5); }

.avatar-wrap { position: relative; }
.avatar-btn { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border: 1.5px solid rgba(var(--text-rgb),0.2); border-radius: 30px; background: transparent; cursor: pointer; color: var(--text); font-size: 13px; font-weight: 600; transition: border-color .2s; white-space: nowrap; }
.avatar-btn:hover { border-color: rgba(var(--text-rgb),0.5); }
.avatar-chevron { font-size: 10px; opacity: 0.5; margin-left: 2px; }
.dropdown { position: absolute; top: calc(100% + 8px); right: 0; background: var(--surface); border: 0.5px solid rgba(var(--text-rgb),0.15); border-radius: 12px; padding: 8px; min-width: 190px; z-index: 100; display: none; box-shadow: 0 8px 24px rgba(0,0,0,0.18); }
.dropdown.open { display: block; }
.dropdown-user { padding: 8px 10px 10px; border-bottom: 0.5px solid rgba(var(--text-rgb),0.1); margin-bottom: 6px; }
.dropdown-username { font-size: 14px; font-weight: 700; color: var(--text); }
.dropdown-plan { font-size: 11px; color: rgba(var(--text-rgb),0.45); margin-top: 2px; }
.dropdown-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; color: #f87171; cursor: pointer; transition: background .15s; }
.dropdown-item:hover { background: rgba(var(--text-rgb),0.06); }
.dropdown-item.neutral { color: var(--text); }

/* [MAJ 13/09/2026, demande Jerome] Header "brouillon" (langue + theme +
   connexion/compte tous entasses cote a cote) - repliés dans un menu
   ouvert par un bouton hamburger. D'abord limite au mobile, puis etendu
   au desktop le meme soir ("je pense que sur la version pc ca peut
   ameliorer le visuel aussi") - .menu-toggle-btn/.header-menu s'appliquent
   donc desormais a TOUTES les tailles, plus seulement sous 768px. Seuls
   Tarifs/A propos/reseaux sociaux (.nav-results/.nav-follow-group) restent
   caches uniquement sous 768px (inchange, pas lies au menu). */
.menu-toggle-btn { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; border: 1.5px solid rgba(var(--text-rgb),0.2); background: transparent; cursor: pointer; font-size: 16px; color: var(--text); flex-shrink: 0; }
.header-menu { display: none; position: absolute; top: 100%; right: 20px; margin-top: 8px; background: var(--surface); border: 0.5px solid rgba(var(--text-rgb),0.15); border-radius: 12px; padding: 12px; min-width: 190px; box-shadow: 0 8px 24px rgba(0,0,0,0.18); flex-direction: column; align-items: stretch; gap: 10px; z-index: 200; }
.header-menu.open { display: flex; }
.header-menu .lang-toggle, .header-menu .theme-toggle { align-self: flex-start; }
.header-menu .avatar-btn { width: 100%; }
.header-menu .dropdown { position: static; box-shadow: none; border: none; padding: 0; margin-top: 8px; min-width: 0; }
/* Login/signup et badge-plan+avatar empiles verticalement dans le menu
   (au lieu de cote a cote, trop etroit dans un panneau de ~190px). */
.header-menu .account-area-inner { flex-direction: column; align-items: stretch; gap: 8px; width: 100%; }
.header-menu .plan-badge, .header-menu .telegram-badge, .header-menu .btn-login { width: 100%; justify-content: center; margin-right: 0; }

@media (max-width: 768px) {
  .nav-follow-group, .nav-results { display: none; }
}

/* ===================== Frise de navigation par date =====================
   Roadmap point 15 (brainstorm 17/09/2026). Cadre gris neutre volontairement
   distinct de --blue (reserve a l'accent/aujourd'hui/surlignage), meme
   esprit que les cadres de zone d'admin-stats.html - un element structurel,
   pas une donnee coloree. */
.date-strip-bar { background: var(--header); border-bottom: 0.5px solid var(--border); padding: 8px 0; }
/* Largeur FIXE, volontairement identique sur TOUTES les pages (17/09/2026,
   demande Jerome : "il faut que la barre soit identique partout ou je
   navigue, elle differe d'un onglet a un autre" - la 1ere version calait
   la largeur sur --content-max-width de CHAQUE page, qui differe reellement
   d'une page a l'autre (1200/1100/980px) : ca alignait bien avec le
   contenu de CETTE page, mais rendait la frise visuellement instable en
   naviguant - l'uniformite prime desormais sur l'alignement pixel-parfait
   avec le contenu de chaque page. 600px = moitie de 1200px (largeur de
   contenu de hub.html, la page d'accueil), occupe les quarts 2+3 de cette
   reference commune partout, quarts 1/4 volontairement vides. */
.date-strip-inner { display: flex; align-items: center; gap: 6px; max-width: 600px; margin: 0 auto; padding: 0 12px; }
/* Fleches (17/09/2026, demande Jerome : "l'overflow fonctionne au touch sur
   mobile, sur PC avec la souris plus complique" - pas de scrollbar visible
   ni de molette horizontale par defaut pour un utilisateur souris). */
.date-strip-arrow { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border); background: transparent; color: var(--text); font-size: 15px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color .15s, background-color .15s; }
.date-strip-arrow:hover { border-color: rgba(var(--text-rgb),0.4); background: rgba(var(--text-rgb),0.05); }
.date-strip-scroll { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
.date-strip-scroll::-webkit-scrollbar { display: none; }
.date-cell { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 52px; padding: 6px 4px; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--text); cursor: pointer; font-family: inherit; transition: border-color .15s, background-color .15s; }
.date-cell:hover { border-color: rgba(var(--text-rgb),0.4); background: rgba(var(--text-rgb),0.05); }
.date-cell-day { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; color: rgba(var(--text-rgb),0.55); }
.date-cell-num { font-size: 12px; font-weight: 700; }
/* [BUGFIX 21/09/2026, signale par Jerome] Le bleu suit desormais .active
   (geree par JS, header.js::updateDateStripActiveCell) plutot que .today
   (statique, ne changeait jamais au clic) - .today ne porte plus que le
   marqueur "AJD" en texte, aucun style distinct tant que ce n'est pas la
   date active. */
.date-cell.active { border-color: var(--blue); background: rgba(59,130,246,0.12); }
.date-cell.active .date-cell-day, .date-cell.active .date-cell-num { color: var(--blue); }

/* [MAJ 21/09/2026, demande Jerome "est ce que ca pourrait ouvrir l'espace
   entre module pre match et la barre des dates pour un aspect moderne ?"
   puis "j'opte pour une taille fixe avec scroll"] Passe d'un modal flottant
   (position:fixed, fond assombri par-dessus toute la page) a un panneau
   INLINE, integre dans le flux normal juste apres la frise (deja injecte a
   cet endroit precis par openDatePanel() plus bas - aucun changement de
   position DOM necessaire). Plus de dimming/centrage plein ecran : simple
   bloc de page, largeur/centrage par max-width+margin comme un conteneur de
   contenu ordinaire. Hauteur FIXE choisie par Jerome (plutot qu'illimitee,
   qui aurait allonge toute la page a chaque ouverture) - le scroll reste
   interne au panneau (.date-panel-body), jamais la page entiere.*/
.date-panel-overlay { background: var(--header); border-bottom: 0.5px solid var(--border); padding: 16px; }
.date-panel-overlay[hidden] { display: none; }
.date-panel { background: var(--surface); border: 0.5px solid var(--border); border-radius: 14px; width: 100%; max-width: 860px; height: 480px; margin: 0 auto; display: flex; flex-direction: column; box-shadow: 0 4px 16px rgba(0,0,0,0.2); }
/* [MAJ 21/09/2026, demande Jerome "meme ligne date et bouton" - fusionner
   titre+filtres sur 1 ligne] Les filtres de statut (#date-panel-header-
   filters, injectes par openDatePanel) rejoignent la ligne titre+fermer
   UNIQUEMENT a partir de 640px (voir media query plus bas) - teste sur
   mobile, un empilement des 4 filtres a cote du titre etirait le bloc
   titre/fermer sur toute la hauteur et les faisait flotter au centre,
   illisible. Sous 640px : titre+fermer sur leur ligne (.date-panel-header-top,
   comme avant), filtres sur la ligne suivante - meme hauteur qu'avant la
   fusion, pas de regression mobile. Le gain de hauteur (panneau fixe,
   480px) beneficie donc surtout au desktop/tablette. */
.date-panel-header { padding: 14px 18px; border-bottom: 0.5px solid var(--border); }
.date-panel-header-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
#date-panel-header-filters.date-panel-status-filters { margin-top: 10px; }
@media (min-width: 640px) {
  .date-panel-header { display: flex; align-items: center; gap: 14px; }
  .date-panel-header-top { flex-shrink: 0; }
  #date-panel-header-filters.date-panel-status-filters { flex: 1; margin-top: 0; gap: 8px 16px; }
}
.date-panel-title { flex-shrink: 0; }
.date-panel-close { flex-shrink: 0; }
.date-panel-title { font-size: 16px; font-weight: 800; color: var(--text); }
.date-panel-close { background: none; border: none; color: var(--text); opacity: 0.6; font-size: 16px; cursor: pointer; padding: 4px 8px; }
.date-panel-close:hover { opacity: 1; }
/* [MAJ 22/09/2026, signale par Jerome "je le voyais plus sur le cote gauche
   qu'au dessus"] Colonne laterale a partir de 640px (comme .sidebar-col dans
   prematch.html/index.html) plutot qu'empile au-dessus de la liste - .date-
   panel-body devient le conteneur flex ligne, ses 2 enfants directs deja en
   place (.date-panel-country-filter + #date-panel-list, voir openDatePanel
   dans header.js) n'ont besoin d'aucun changement de structure, juste de
   largeur/scroll propres. Sous 640px : empile en colonne comme avant (etroit
   pour une vraie colonne laterale). */
.date-panel-body { overflow-y: auto; padding: 8px 0; display: flex; flex-direction: column; }
@media (min-width: 640px) {
  .date-panel-body { flex-direction: row; padding: 0; overflow: hidden; }
}
.date-panel-loading, .date-panel-empty { padding: 30px 18px; text-align: center; color: rgba(var(--text-rgb),0.55); font-size: 13px; }
/* [AJOUT 20/09/2026, demande Jerome] Filtres de statut (activables en meme
   temps, pas un choix exclusif) + recherche equipe/ligue/pays, au-dessus de
   la liste du panneau. */
.date-panel-controls { padding: 4px 18px 10px; display: flex; flex-direction: column; gap: 12px; border-bottom: 0.5px solid var(--border); margin-bottom: 4px; }
/* [MAJ 20/09/2026, demande Jerome "les 3 boutons sur la meme ligne avec un
   bouton Tous"] "Tous les matchs" + les 3 statuts en ligne (pas en colonne),
   passent a la ligne suivante seulement si la largeur manque (mobile
   etroit). Libelle au-dessus du poussoir, plus compact qu'un libelle a
   cote quand 4 items doivent tenir en largeur. */
.date-panel-status-filters { display: flex; flex-direction: row; flex-wrap: wrap; gap: 14px 18px; }
.date-panel-status-item { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.date-panel-status-item-label { font-size: 11px; font-weight: 700; color: var(--text); white-space: nowrap; }
/* [MAJ 20/09/2026, demande Jerome "bouton poussoir a droite dans les memes
   couleurs"] Chips remplacees par un interrupteur par item - meme bleu
   Mantisnap que le reste du panneau a l'etat actif, piste neutre desactive. */
.date-panel-switch { position: relative; flex-shrink: 0; width: 42px; height: 24px; border-radius: 12px; border: none; padding: 0; cursor: pointer; background: rgba(var(--text-rgb),0.15); transition: background-color .15s; }
.date-panel-switch.active { background: var(--blue); }
.date-panel-switch-knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.3); transition: transform .15s; }
.date-panel-switch.active .date-panel-switch-knob { transform: translateX(18px); }
/* [MAJ 22/09/2026, demande Jerome "le meme filtre que dans avant match ou
   live"] Remplace la simple barre de recherche texte par le meme widget
   pays/ligue (recherche + "Top ligues uniquement" + liste TOP LIGUES/AUTRES
   PAYS avec compteurs) que prematch.html/index.html - classes prefixees
   date-panel- pour ne jamais entrer en collision avec les classes .country-*/
   .league-item locales a ces 2 pages (chacune garde son propre <style>,
   header.css est partage par toutes - une meme classe definie 2 fois
   ecraserait l'une des deux de facon imprevisible selon l'ordre de chargement).
   Duplication assumee (petit widget, pas de fichier CSS partage possible ici).
   Reference : .country-item/.country-top-box/.top-leagues-toggle/.league-item
   dans prematch.html. */
.date-panel-country-filter { border: 0.5px solid var(--border); border-radius: 10px; margin: 0 18px 10px; overflow: hidden; }
@media (min-width: 640px) {
  /* Colonne laterale fixe (comme .sidebar-col, prematch.html/index.html) -
     recherche+toggle restent fixes en haut, seule .date-panel-country-list
     (flex:1 plus bas) defile independamment de la liste de matchs a droite. */
  .date-panel-country-filter { width: 220px; flex-shrink: 0; border: none; border-right: 0.5px solid var(--border); border-radius: 0; margin: 0; display: flex; flex-direction: column; overflow: hidden; }
  .date-panel-country-list { flex: 1; max-height: none; }
  #date-panel-list { flex: 1; overflow-y: auto; padding: 8px 18px; min-width: 0; }
}
.date-panel-country-search-wrap { position: relative; padding: 10px 10px 8px; }
.date-panel-country-search-icon { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); font-size: 11px; color: rgba(var(--text-rgb),0.35); pointer-events: none; }
.date-panel-country-search { width: 100%; box-sizing: border-box; padding: 8px 10px 8px 26px; border-radius: 8px; border: 1.5px solid var(--border); background: var(--bg); color: var(--text); font: inherit; font-size: 12px; outline: none; }
.date-panel-country-search:focus { border-color: var(--blue); }
.date-panel-country-search::placeholder { color: rgba(var(--text-rgb),0.4); }
.date-panel-top-leagues-toggle { display: flex; align-items: center; gap: 8px; padding: 7px 10px; margin: 0 10px 8px; border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer; color: rgba(var(--text-rgb),0.75); border: 1.5px solid var(--border); }
.date-panel-top-leagues-toggle:hover { background: rgba(var(--text-rgb),0.06); }
.date-panel-top-leagues-toggle.on { background: rgba(59,130,246,0.15); color: var(--blue); border-color: rgba(59,130,246,0.3); }
.date-panel-top-leagues-check { width: 14px; flex-shrink: 0; text-align: center; font-size: 11px; color: rgba(var(--text-rgb),0.3); }
.date-panel-top-leagues-toggle.on .date-panel-top-leagues-check { color: var(--blue); }
.date-panel-country-list { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: 0 10px 10px; }
.date-panel-country-item { padding: 7px 10px; border-radius: 8px; font-size: 12.5px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; color: rgba(var(--text-rgb),0.75); }
.date-panel-country-item:hover { background: rgba(var(--text-rgb),0.06); }
.date-panel-country-item.active { background: rgba(59,130,246,0.15); color: var(--blue); font-weight: 700; }
.date-panel-country-count { font-size: 10.5px; color: rgba(var(--text-rgb),0.4); flex-shrink: 0; }
.date-panel-country-empty { padding: 8px 10px; font-size: 12px; color: rgba(var(--text-rgb),0.4); }
.date-panel-country-top-box { border: 1px solid var(--border); border-radius: 10px; padding: 4px; margin: 0 10px 10px; background: rgba(59,130,246,0.04); }
.date-panel-country-section-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: rgba(var(--text-rgb),0.4); padding: 6px 8px 4px; }
.date-panel-league-item { padding: 6px 10px 6px 24px; border-radius: 8px; font-size: 11.5px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; color: rgba(var(--text-rgb),0.6); }
.date-panel-league-item:hover { background: rgba(var(--text-rgb),0.06); }
.date-panel-league-item.active { background: rgba(59,130,246,0.12); color: var(--blue); font-weight: 700; }
/* Presentation par groupe pays+ligue (previewee et validee par Jerome via
   preview_match_row.html le 17/09/2026) : bandeau drapeau+ligue, une equipe
   par ligne, minute affichee en live + label "Terminé" explicite, bleu
   Mantisnap pour le live (pas de rouge, demande explicite de Jerome). */
.date-panel-group { margin-bottom: 4px; }
.date-panel-group + .date-panel-group { border-top: 0.5px solid var(--border); }
.date-panel-banner { display: flex; align-items: center; gap: 8px; padding: 8px 18px; background: rgba(59,130,246,0.08); }
.date-panel-banner-flag { font-size: 14px; }
.date-panel-banner-country { font-size: 12px; font-weight: 700; color: rgba(var(--text-rgb),0.7); }
.date-panel-banner-sep { font-size: 12px; color: rgba(var(--text-rgb),0.35); }
.date-panel-banner-league { font-size: 12px; font-weight: 800; color: var(--blue); }
.date-panel-match { display: flex; align-items: center; gap: 10px; padding: 9px 18px; text-decoration: none; color: var(--text); cursor: pointer; transition: background-color .15s; }
.date-panel-match:hover { background: rgba(var(--text-rgb),0.06); }
.date-panel-match.not-clickable { cursor: default; }
.date-panel-match.not-clickable:hover { background: none; }
/* [AJOUT 20/09/2026, demande Jerome "il faut qu'on distingue bien le match
   choisi... un encadre bien net"] Bascule avec le panneau deplie
   (setDatePanelRowActive) - fond teinte + liseret bleu a gauche, pour
   qu'on sache immediatement a quel match appartient le panneau ouvert en
   dessous, meme au milieu d'une longue liste. */
.date-panel-match.date-panel-match-active { background: rgba(59,130,246,0.1); box-shadow: inset 3px 0 0 var(--blue); }
.date-panel-match.date-panel-match-active:hover { background: rgba(59,130,246,0.14); }
/* [AJOUT 20/09/2026, demande Jerome "il faut que le cadre du match soit
   total qu'on voit bien ou l'on navigue"] Le liseret bleu s'arretait a la
   ligne du match, le panneau deplie juste en dessous (stade/meteo/terrain)
   redevenait visuellement "hors cadre" - prolonge le meme liseret + fond
   teinte sur tout le panneau qui suit un match actif, pour que la ligne et
   son contenu deplie forment un seul bloc visuellement encadre. */
.date-panel-match.date-panel-match-active + .date-panel-summary {
  background: rgba(59,130,246,0.05);
  box-shadow: inset 3px 0 0 var(--blue);
}
/* [AJOUT 17/09/2026, demande Jerome] Separation visuelle entre deux matchs
   d'un meme groupe pays+ligue - sans ca, une fois un resume deplie, les
   deux matchs se confondaient en un seul bloc continu. Le "+" saute par-
   dessus .date-panel-summary (toujours present dans le DOM pour un match
   live, meme masque par [hidden] - le combinateur adjacent le voit quand
   meme), donc s'applique aussi bien apres un match sans resume qu'apres un
   match live replie/deplie. Jamais sur le tout 1er match (juste apres le
   bandeau, pas besoin de trait). */
.date-panel-match + .date-panel-match,
.date-panel-summary + .date-panel-match {
  border-top: 0.5px solid var(--border);
}
.date-panel-teams { flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.date-panel-match-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.date-panel-team-row { display: flex; align-items: center; gap: 8px; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.date-panel-logo { width: 16px; height: 16px; object-fit: contain; flex-shrink: 0; border-radius: 3px; }
.date-panel-status { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 5px 6px; border-radius: 8px; width: 66px; text-align: center; }
.date-panel-status-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: rgba(var(--text-rgb),0.55); white-space: nowrap; }
.date-panel-status-score { font-size: 13px; font-weight: 800; color: var(--text); }
/* [MAJ 21/09/2026, demande Jerome "match termine : gris. match a venir en
   bleu couleur mantisnap. match en live : en bleu avec la pastille"]
   "A venir" passe du gris (identique a "Termine" auparavant) au bleu
   Mantisnap, meme traitement que "En direct" - seul "Termine" reste gris. */
.date-panel-status.status-upcoming { background: rgba(59,130,246,0.15); }
.date-panel-status.status-upcoming .date-panel-status-label,
.date-panel-status.status-upcoming .date-panel-status-score { color: var(--blue); }
.date-panel-status.status-live { background: rgba(59,130,246,0.15); }
.date-panel-status.status-live .date-panel-status-label,
.date-panel-status.status-live .date-panel-status-score { color: var(--blue); }
.date-panel-status.status-finished { background: rgba(var(--text-rgb),0.08); }
.date-panel-status.status-finished .date-panel-status-score { color: rgba(var(--text-rgb),0.7); }

/* Resume deplie d'un match en direct (brainstorm Jerome 17/09/2026) : la
   ligne live devient un simple toggle (pas de navigation directe, la
   plupart des matchs live ne sont dans aucune fenetre cliquable), le detail
   buts/cartons/changements apparait juste en dessous. Classes prefixees
   "date-panel-events-"/"date-panel-card" pour ne jamais entrer en collision
   avec les classes courtes .events-row/.card-badge deja definies localement
   dans index.html. */
.date-panel-match.live-row, .date-panel-match.upcoming-row { cursor: pointer; }
/* [AJOUT 20/09/2026, demande Jerome] Apercu pre-match deplie (stade/meteo/
   compos/absents) - meme container .date-panel-summary que le resume live,
   lignes plus simples (icone + texte) puisqu'il n'y a pas de timeline ici. */
.date-panel-preview-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 8px; font-size: 12.5px; color: rgba(var(--text-rgb),0.85); padding: 4px 0; }
.date-panel-preview-icon { flex-shrink: 0; width: 18px; text-align: center; }
.date-panel-preview-sep { color: rgba(var(--text-rgb),0.3); margin: 0 2px; }
.date-panel-preview-absents > div > div { margin-bottom: 2px; }
.date-panel-preview-absents b { color: var(--text); font-weight: 700; }
/* [MAJ 20/09/2026, demande Jerome "stade et meteo a gauche du bouton
   analyse complete qu'on va mettre tout a droite"] Stade/meteo et bouton
   sur la meme ligne, plutot que le bouton seul centre au-dessus. */
/* Grid a 2 colonnes plutot qu'un flex-wrap (teste et abandonne : le texte
   de secours "Stade non communique" + la meteo pouvaient se retrouver a
   cheval sur 3 lignes ET chevaucher le bouton). La colonne stade/meteo
   garde sa largeur, le texte s'y enroule proprement SANS jamais toucher au
   bouton, qui reste ancre a droite sur la meme ligne a n'importe quelle
   largeur. */
.date-panel-preview-top { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; padding: 6px 0 4px; }
.date-panel-preview-venue { padding: 0; min-width: 0; }
.date-panel-preview-cta { position: relative; overflow: hidden; display: block; width: fit-content; padding: 9px 18px; border-radius: 20px; background: var(--blue); color: #fff; font-size: 12.5px; font-weight: 700; text-decoration: none; text-align: center; white-space: nowrap; transition: background-color .15s; }
.date-panel-preview-cta:hover { background: #2563eb; }
/* [AJOUT 20/09/2026, demande Jerome "le bouton analyse complete qui
   brille c'est possible ?"] Reflet diagonal qui balaie le bouton
   periodiquement (pause entre 2 passages, pas un scintillement continu
   qui distrairait). */
.date-panel-preview-cta::before {
  content: '';
  position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-20deg);
  animation: datePanelCtaShine 3.5s ease-in-out infinite;
}
@keyframes datePanelCtaShine {
  0%, 40% { left: -60%; }
  60%, 100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce) { .date-panel-preview-cta::before { animation: none; } }
/* [AJOUT 20/09/2026, demande Jerome "avec le contour lumiere comme sur les
   modules ?"] Meme halo rotatif que .module-row.featured::before (hub.html)
   / .date-panel-live-btn-ring, porte par un wrapper (le bouton a deja
   overflow:hidden pour le reflet ci-dessus, qui rognerait un halo dessine
   hors de ses bords). */
.date-panel-preview-cta-wrap { position: relative; width: fit-content; border-radius: 20px; }
@property --date-panel-cta-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes datePanelCtaGlowSpin { from { --date-panel-cta-angle: 0deg; } to { --date-panel-cta-angle: 360deg; } }
.date-panel-preview-cta-wrap::before {
  content: '';
  position: absolute; inset: -2px; border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from var(--date-panel-cta-angle, 0deg),
    transparent 0deg, transparent 260deg,
    #93c5fd 300deg, #fff 320deg, #93c5fd 340deg, transparent 360deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: datePanelCtaGlowSpin 3.2s linear infinite;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .date-panel-preview-cta-wrap::before { animation: none; } }
/* [MAJ 20/09/2026, demande Jerome "la le terrain est verticale, hors il le
   faut horizontal" + image de fond fournie par Jerome, img/terrain-compos.png]
   Terrain HORIZONTAL (domicile a gauche attaque vers la droite, exterieur a
   droite attaque vers la gauche, gardiens aux 2 extremites) sur l'image
   fournie plutot qu'un degrade CSS. Le panneau etant etroit, le terrain
   SCROLL horizontalement (.date-panel-pitch-scroll, largeur minimale fixe)
   plutot que de reduire les avatars/textes a l'illisible. */
.date-panel-pitch-scroll { margin: 6px 0; overflow-x: auto; scrollbar-width: none; }
.date-panel-pitch-scroll::-webkit-scrollbar { display: none; }
/* Ratio et paddings calques sur les vraies proportions de l'image (le
   terrain y est dessine en perspective/trapeze, plus etroit en haut) - les
   paddings utilisent la marge la plus contraignante (le bord du haut) pour
   qu'aucun joueur ne deborde de la pelouse a aucune hauteur de colonne. */
.date-panel-pitch { min-width: 480px; aspect-ratio: 1619 / 971; background-image: url('/img/terrain-compos.png'); background-size: cover; background-position: center; border-radius: 10px; display: flex; align-items: stretch; padding: 15% 12%; box-sizing: border-box; }
.date-panel-pitch-half { flex: 1; display: flex; justify-content: space-evenly; align-items: stretch; gap: 4px; }
.date-panel-pitch-col { display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; gap: 4px; }
.date-panel-pitch-halfway { width: 1px; background: rgba(255,255,255,0.4); margin: 0 2px; flex-shrink: 0; }
.date-panel-pitch-labels { display: flex; justify-content: space-between; padding: 4px 4px 0; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; color: rgba(var(--text-rgb),0.6); min-width: 480px; box-sizing: border-box; }
.date-panel-pitch-player { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 44px; padding-top: 8px; }
.date-panel-pitch-avatar { position: relative; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,0.18); overflow: hidden; flex-shrink: 0; }
.date-panel-pitch-avatar img { width: 100%; height: 100%; object-fit: cover; }
.date-panel-pitch-number { position: absolute; bottom: -3px; right: -3px; min-width: 14px; height: 14px; padding: 0 2px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 8.5px; font-weight: 800; line-height: 14px; text-align: center; box-shadow: 0 0 0 1.5px #1e5631; }
.date-panel-pitch-name { font-size: 8.5px; font-weight: 700; color: #fff; text-align: center; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 44px; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
/* [AJOUT 20/09/2026, demande Jerome "la note du joueur on utilise celle
   qu'on connait deja"] Badge forme recente, coin superieur gauche du
   joueur - memes seuils de couleur que la reference Flashscore. */
.date-panel-pitch-rating { position: absolute; top: 0; left: 2px; min-width: 20px; padding: 1px 3px; border-radius: 4px; font-size: 9px; font-weight: 800; color: #fff; text-align: center; line-height: 1.3; }
.date-panel-pitch-rating.good { background: #16a34a; }
.date-panel-pitch-rating.ok { background: #ea580c; }
.date-panel-pitch-rating.bad { background: #dc2626; }
/* [AJOUT 21/09/2026, demande Jerome "pc horizontale, mobile verticale si
   possible"] Terrain VERTICAL sous 480px, sur une 2e image fournie par
   Jerome (img/terrain-compos-mobile.png, vue droite de dessus sans
   perspective - contrairement a l'horizontale, un trapeze n'aurait aucun
   sens une fois les 2 equipes empilees). Reoriente uniquement via
   flex-direction (aucun changement JS : renderPitchHtml/buildPitchRows
   produit le meme HTML dans les 2 cas - l'inversion deja appliquee cote
   serveur sur les colonnes de l'equipe exterieure, pour que les 2 equipes
   attaquent vers le centre, reste valable une fois les axes pivotes). */
@media (max-width: 480px) {
  .date-panel-pitch-scroll { overflow-x: visible; }
  .date-panel-pitch {
    min-width: 0;
    width: 100%;
    aspect-ratio: 971 / 1620;
    background-image: url('/img/terrain-compos-mobile.png');
    flex-direction: column;
    padding: 8% 10%;
  }
  .date-panel-pitch-half { flex-direction: column; }
  .date-panel-pitch-col { flex-direction: row; }
  .date-panel-pitch-halfway { width: 100%; height: 1px; margin: 2px 0; }
  .date-panel-pitch-labels { min-width: 0; }
}
.date-panel-summary { padding: 0 18px 14px 18px; background: rgba(var(--text-rgb),0.03); }
.date-panel-summary[hidden] { display: none; }
/* [AJOUT 17/09/2026, demande Jerome] Menu horizontal, un seul onglet
   "Résumé" pour l'instant - prevu pour en accueillir d'autres plus tard
   (compos, stats...) sans reprendre cette structure. */
.date-panel-summary-tabs { display: flex; gap: 4px; padding-top: 8px; margin-bottom: 4px; border-bottom: 0.5px solid var(--border); }
.date-panel-summary-tab { border: none; background: none; font: inherit; cursor: pointer; padding: 6px 10px 8px; font-size: 12px; font-weight: 700; color: rgba(var(--text-rgb),0.5); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.date-panel-summary-tab.active { color: var(--blue); border-bottom-color: var(--blue); }
.date-panel-summary-body { padding-top: 4px; }
.date-panel-summary-loading, .date-panel-summary-empty { font-size: 12px; color: rgba(var(--text-rgb),0.55); padding: 6px 0; text-align: center; }
/* [AJOUT 20/09/2026, demande Jerome "onglet resume : classement global avec
   les 2 equipes surlignees"] Classement complet (pas juste les 2 equipes). */
.date-panel-standings { width: 100%; border-collapse: collapse; font-size: 12px; }
.date-panel-standings td { padding: 4px 6px; border-bottom: 0.5px solid var(--border); }
.date-panel-standings td:first-child { color: rgba(var(--text-rgb),0.5); width: 24px; }
.date-panel-standings td:nth-child(3), .date-panel-standings td:nth-child(4) { text-align: right; font-variant-numeric: tabular-nums; color: rgba(var(--text-rgb),0.6); width: 30px; }
.date-panel-standings td:last-child { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; width: 32px; }
.date-panel-standings-highlight { background: rgba(59,130,246,0.1); }
.date-panel-standings-highlight td { font-weight: 700; color: var(--blue); }
.date-panel-standings-legend { display: flex; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(var(--text-rgb),0.45); padding: 0 6px 4px; }
.date-panel-standings-legend span:first-child { width: 24px; }
.date-panel-standings-legend span:nth-child(2) { flex: 1; }
.date-panel-standings-legend span:nth-child(3), .date-panel-standings-legend span:nth-child(4) { width: 30px; text-align: right; }
.date-panel-standings-legend span:last-child { width: 32px; text-align: right; }
/* [AJOUT 20/09/2026, meme soir, demande Jerome "divise l'affichage en 2. a
   droite le classement... a gauche un resume par equipe"] Colonne gauche =
   2 blocs equipe cote a cote (mirroir) ; colonne droite = classement. Passe
   en 1 colonne sous 480px (panneau trop etroit pour 3 sous-colonnes). */
.date-panel-resume-split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 480px) {
  .date-panel-resume-split { grid-template-columns: 1fr; }
}
.date-panel-resume-teams { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.date-panel-resume-team { font-size: 12px; }
.date-panel-resume-team.mirrored { text-align: right; }
.date-panel-resume-team-name { font-weight: 700; margin-bottom: 4px; }
.date-panel-resume-team-line { margin-bottom: 3px; color: rgba(var(--text-rgb),0.75); }
.date-panel-resume-team.mirrored .date-panel-resume-team-line { flex-direction: row-reverse; }
.date-panel-resume-team-label { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.03em; color: rgba(var(--text-rgb),0.45); }
.date-panel-form-letter { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 3px; font-size: 9px; font-weight: 700; color: #fff; margin-right: 2px; flex-shrink: 0; }
.date-panel-form-letter.good { background: #16a34a; }
.date-panel-form-letter.ok { background: #6b7280; }
.date-panel-form-letter.bad { background: #dc2626; }
/* [AJOUT 20/09/2026, meme soir, demande Jerome "en dessous du classement dom
   et ext, 3 onglets General/Domicile/Exterieur... 5 derniers matchs...
   toujours en mode miroir"] Meme composant tab que .date-panel-summary-tab
   mais plus petit (sous-onglet, pas l'onglet principal Resume/Compos). */
.date-panel-resume-left { display: flex; flex-direction: column; gap: 8px; }
.date-panel-form-tabs { display: flex; justify-content: center; gap: 2px; border-bottom: 0.5px solid var(--border); }
.date-panel-form-tab { border: none; background: none; font: inherit; cursor: pointer; padding: 4px 8px 6px; font-size: 10.5px; font-weight: 700; color: rgba(var(--text-rgb),0.5); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.date-panel-form-tab.active { color: var(--blue); border-bottom-color: var(--blue); }
.date-panel-form-body > div:not([hidden]) { display: flex; gap: 8px; padding-top: 6px; }
.date-panel-form-col { flex: 1; min-width: 0; font-size: 11px; }
.date-panel-form-match { display: flex; align-items: center; gap: 2px; margin-bottom: 4px; color: rgba(var(--text-rgb),0.8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.date-panel-form-col.mirrored { text-align: right; }
.date-panel-form-col.mirrored .date-panel-form-match { flex-direction: row-reverse; justify-content: flex-end; }
/* [AJOUT 20/09/2026, meme soir, demande Jerome "4eme onglet H2H"] Liste
   unique pleine largeur (pas 2 colonnes miroir, les 2 equipes sont deja
   dans chaque ligne). */
.date-panel-h2h-list { width: 100%; font-size: 11px; }
.date-panel-h2h-match { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 0.5px solid var(--border); }
.date-panel-h2h-match:last-child { border-bottom: none; }
.date-panel-h2h-date { color: rgba(var(--text-rgb),0.45); font-variant-numeric: tabular-nums; flex-shrink: 0; width: 70px; }
.date-panel-events-divider { display: flex; align-items: center; gap: 8px; margin: 8px 0 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(var(--text-rgb),0.5); }
.date-panel-events-divider::before, .date-panel-events-divider::after { content: ''; flex: 1; height: 0.5px; background: var(--border); }
.date-panel-events-row { display: flex; gap: 8px; margin-bottom: 4px; }
.date-panel-events-row:last-of-type { margin-bottom: 10px; }
.date-panel-events-col { flex: 1; font-size: 13px; color: rgba(var(--text-rgb),0.92); font-weight: 600; line-height: 2.1; }
.date-panel-events-col.away { text-align: right; }
.date-panel-events-col-spacer { min-width: 40px; flex-shrink: 0; }
.date-panel-events-minute { font-weight: 800; color: var(--text); margin: 0 2px; }
/* [MAJ 20/09/2026, demande Jerome "live est affiche comme ca (bonne
   methode)... a mettre a jour"] Reprend exactement le style d'index.html
   (.card-badge/.sub-icon/.goal-score-badge/.events-frame) - meme rendu
   partout, plus de version "allegee" propre au panneau de la frise. */
.date-panel-card-badge { display: inline-block; width: 12px; height: 17px; border-radius: 2px; vertical-align: -3px; margin-right: 4px; box-shadow: 0 0 0 1px rgba(0,0,0,0.35) inset; }
.date-panel-card-badge.yellow { background: #eab308; }
.date-panel-card-badge.red { background: #ef4444; }
.date-panel-sub-icon { vertical-align: -4px; margin-right: 4px; }
.date-panel-events-col.away .date-panel-card-badge, .date-panel-events-col.away .date-panel-sub-icon { margin-right: 0; margin-left: 3px; }
.date-panel-goal-score-badge { display: inline-flex; align-items: center; gap: 4px; border: 1.5px solid rgba(var(--text-rgb),0.35); border-radius: 7px; padding: 1px 8px; font-weight: 800; margin: 0 5px; white-space: nowrap; }
.date-panel-events-frame { border: 1px solid rgba(var(--text-rgb),0.14); border-radius: 10px; padding: 10px 12px 4px; margin-bottom: 12px; background: rgba(var(--text-rgb),0.035); }
.date-panel-scorers-label { font-size: 10px; font-weight: 700; color: rgba(var(--text-rgb),0.4); letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 8px; }
.date-panel-events-frame .date-panel-events-row:last-of-type { margin-bottom: 6px; }

/* [MAJ 17/09/2026, demande Jerome "je les verrai plus a gauche du score
   avec l'effet de lumiere qui tourne autour comme pour les modules"] Bouton
   "Voir en Live", deplace a gauche du score badge - meme technique de halo
   rotatif que .module-row.featured::before/.live-tile::before (hub.html) :
   anneau conic-gradient masque pour ne garder que le contour, tourne en
   continu via @property --angle. Duplique ici en miniature circulaire
   (fichier CSS different, meme "petite duplication assumee" que le reste
   de ce fichier). */
@property --date-panel-live-btn-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes datePanelLiveBtnSpin { from { --date-panel-live-btn-angle: 0deg; } to { --date-panel-live-btn-angle: 360deg; } }
.date-panel-live-btn {
  position: relative; flex-shrink: 0;
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(59,130,246,0.18); color: var(--blue);
  font-size: 10px; text-decoration: none;
}
.date-panel-live-btn:hover { background: rgba(59,130,246,0.28); }
.date-panel-live-btn-ring {
  content: ''; position: absolute; inset: -3px; border-radius: 50%;
  padding: 2px;
  background: conic-gradient(
    from var(--date-panel-live-btn-angle, 0deg),
    transparent 0deg, transparent 260deg,
    #93c5fd 300deg, #fff 320deg, #93c5fd 340deg, transparent 360deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: datePanelLiveBtnSpin 3.2s linear infinite;
  pointer-events: none;
}