/* =============================================================================
   COULEURS GLOBALES — éditer ici pour changer partout
   =============================================================================
   --couleur-defense  : jetons défensifs + fond scoreboard domicile (défense)
   --couleur-attaque  : fond scoreboard visiteur (attaque) + jetons coureurs
   --couleur-coureur  : jetons coureurs sur terrain (= couleur attaque)
   --couleur-boutons  : boutons de l'interface
============================================================================= */
:root {
    --couleur-defense: #1976d2;   /* bleu  — défense */
    --couleur-attaque: #c62828;   /* rouge — attaque */
    --couleur-coureur: #c62828;   /* rouge — jetons coureurs = même que attaque */
    --couleur-boutons: #1976d2;   /* bleu  — boutons interface */
    --couleur-coureur-out: #7b1212;   /* rouge foncé — coureur retiré (opacité 0.4) */
    --marge-page: 12px;   /* espace entre le contenu et le bord de l'écran (body + calcul de #game-container) */
}

@font-face {
    font-family: 'Barlow Condensed';
    src: url('assets/fonts/BarlowCondensed-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('assets/fonts/Inter.woff2') format('woff2');
    font-weight: 100 900;       /* variable font — couvre tous les weights */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('assets/fonts/Inter-ital.woff2') format('woff2');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

body {
    margin: 0;
    font-family: 'Inter', Arial, sans-serif;
    background: #1e1e1e;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--marge-page);
    box-sizing: border-box;
}

#affichage-coordonnees {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
    padding: 10px 20px;
   /* background: #333;
    border-radius: 6px;
    border: 1px solid #555;*/
}
#coordonnees-live {
    color: #ffeb3b;
}

/* Grille à 3 colonnes : espace libre / terrain / espace libre + fiche.
   Le terrain (colonne du milieu) reste toujours centré, que la fiche soit
   affichée ou non — seule la colonne de droite (1fr) absorbe sa présence. */
#zone-jeu {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: start;
    width: 100%;
    gap: 0 16px;
}

/* Côte à côte (place suffisante) : terrain+fiche sur la 1ère ligne, les 3
   boutons en dessous, alignés strictement sur la largeur du terrain (pas
   toute la largeur de la zone) — même formule de largeur que #game-container,
   pour être garanti identique en toutes circonstances. */
#zone-jeu #game-container {
    grid-row: 1;
}
#zone-jeu #fiche-tactique {
    grid-row: 1;
}
#zone-jeu #boutons-action {
    grid-column: 2;
    grid-row: 2;
    width: min(calc(100vw - 2 * var(--marge-page)), 88vh);
    max-width: min(calc(100vw - 2 * var(--marge-page)), 88vh);
    justify-self: center;
}

/* Si la place manque réellement pour terrain + fiche côte à côte (mesuré en
   JS, voir ajusterLayoutZoneJeu() dans contenus-ui.js), tout repasse sur une
   seule colonne, empilé dans l'ordre : terrain, boutons, fiche. */
#zone-jeu.zone-jeu-empile {
    grid-template-columns: 1fr;
}
#zone-jeu.zone-jeu-empile #game-container {
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
}
#zone-jeu.zone-jeu-empile #boutons-action {
    grid-column: 1;
    grid-row: 2;
    width: min(calc(100vw - 2 * var(--marge-page)), 88vh);
    max-width: min(calc(100vw - 2 * var(--marge-page)), 88vh);
    justify-self: center;
}
#zone-jeu.zone-jeu-empile #fiche-tactique {
    grid-column: 1;
    grid-row: 3;
    justify-self: stretch;
    width: 100%;
    max-width: none;
}

#boutons-action {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: nowrap;
    margin-top: 12px;
}
#boutons-action button {
    flex: 1 1 0;
    min-width: 0;   /* laisse le bouton rétrécir sous sa largeur de contenu naturelle */
    padding-left: 8px;
    padding-right: 8px;
    white-space: normal; /* le texte peut passer sur 2 lignes DANS le bouton plutôt que de le faire déborder */
}

#game-container {
    grid-column: 2;
    /* Utilise (quasi) toute la largeur dispo — pas 80% de la plus petite dimension
       de l'écran, qui laissait beaucoup de côté perdu en portrait mobile (la
       largeur y est la plus petite dimension). Plafonné par 88vh pour ne jamais
       déborder verticalement sur un écran large-mais-bas (paysage). */
    width: min(calc(100vw - 2 * var(--marge-page)), 88vh);
    height: min(calc(100vw - 2 * var(--marge-page)), 88vh);
    overflow: hidden; 
    border: 1px solid white;
    border-radius: 16px;
    position: relative;
    background-color: #2e7d32;
}

#field {
    width: 100%;
    height: 100%;
    background-image: url('terrain.png'); 
    background-size: cover;               
    background-position: center;
    position: relative;
    transition: transform 0.4s ease-in-out; 
}

#click-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(35, 1fr);
    grid-template-rows: repeat(35, 1fr);
    z-index: 10; 
}

.grid-cell {
    border: 1px solid rgba(255, 255, 255, 0.03); 
    cursor: crosshair;
}
.grid-cell:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

.zoom-infield {
    transform: scale(1.7) translate(0%, -15%);
}
.zoom-outfield {
    transform: scale(1) translate(0%, 0%);
}

/* JETONS DÉFENSIFS (Bleus) */
.player {
    position: absolute;
    /* Même logique que #game-container (min largeur/hauteur écran) : les jetons
       rétrécissent avec le terrain au lieu de garder une taille fixe qui paraît
       trop grosse sur un petit écran. */
    width: min(4.6vw, 4vh);
    height: min(4.6vw, 4vh);
    border-radius: 50%;
    background-color: var(--couleur-defense); 
    color: white;
    font-size: min(2.1vw, 1.8vh);
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%); 
    box-shadow: 0 2px 4px rgba(0,0,0,0.4);
    z-index: 3;
}

/* JETONS DES COUREURS ATTAQUANTS (Noirs avec contour blanc) */
#field .player.runner {
    background-color: var(--couleur-coureur);
    border: 2px solid #ffffff !important;
    z-index: 4;
}

/* EFFET HALO : Le gant s'allume en jaune clignotant */
.player.has-ball {
    box-shadow: 0 0 0 0 rgba(255, 235, 59, 0.7);
    animation: pulse-gant 0.8s infinite cubic-bezier(0.66, 0, 0, 1);
    border: 2px solid #fff;
    background-color: #d32f2f !important;
}

@keyframes pulse-gant {
    to {
        box-shadow: 0 0 0 18px rgba(255, 235, 59, 0);
    }
}

/* LA BALLE DE BASEBALL TEXTURÉE RESTAURÉE (14px + coutures rouges d'origine) */
.ball {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #ffffff;
    transform: translate(-50%, -50%);
    box-shadow: 0 2px 5px rgba(0,0,0,0.6);
    z-index: 7; 
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='48' fill='%23ffffff'/><path d='M 20,20 C 35,35 65,35 80,20' fill='none' stroke='%23cc1111' stroke-width='8' stroke-dasharray='6,6'/><path d='M 20,80 C 35,65 65,65 80,80' fill='none' stroke='%23cc1111' stroke-width='8' stroke-dasharray='6,6'/></svg>");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

/* Effet Enseignant / Focus */
.field-focus-active .player {
    opacity: 0.55;
    filter: grayscale(40%);
    transition: opacity 0.3s ease;
}
.field-focus-active .player.focused {
    opacity: 1;
    filter: grayscale(0%);
    box-shadow: 0 0 12px #ffeb3b;
    border: 1.5px solid #ffeb3b;
    transform: translate(-50%, -50%) scale(1.2);
    z-index: 5; /* sous la balle (z-index 7), au-dessus des autres joueurs (z-index 3) */
}

#controls {
    margin-top: 25px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
}

/* Portrait (smartphone, tablette tenue debout...) : chaque select/bouton garde
   sa largeur de contenu naturelle en paysage, mais peut dépasser l'écran une
   fois empilé par flex-wrap (ex. le texte long d'une option de select) — ça
   élargit toute la page. On empile donc explicitement en colonne, en largeur
   pleine, pour que rien ne puisse dépasser. */
@media (orientation: portrait) {
    #controls {
        flex-direction: column;
        align-items: stretch;
    }
    #controls select {
        width: 100%;
        box-sizing: border-box;
    }
}

select {
    padding: 12px;
    font-size: 15px;
    font-weight: bold;
    border-radius: 8px;
    background: #333;
    color: white;
    border: 2px solid #555;
    cursor: pointer;
}

button {
    padding: 14px 24px;
    font-size: 15px;
    font-weight: bold;
    background: var(--couleur-boutons);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}

/* CALQUE SVG POUR LES TRAINÉES ET LES FLÈCHES DANS LE TRACÉ */
#calque-trainees {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; 
    z-index: 2; 
}

/* Style pour le badge d'information tactique */
.badge-tactique {
    position: fixed;
    top: 40px;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    background-color: #1e293b; /* Gris ardoise pro */
    color: #f87171; /* Rouge alerte pastel */
    border: 2px solid #ef4444; /* Bordure rouge */
    padding: 12px 24px;
    font-family: 'Barlow Condensed', Arial, sans-serif;
    font-weight: bold;
    font-size: 16px;
    letter-spacing: 1px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none; /* Ne bloque pas les clics sur l'application */
    z-index: 9999; /* Reste toujours au premier plan */
}

.trajectoire-balle {
    stroke-linecap: round; /* Arrondit les extrémités du trait et de chaque pointillé */
}

/* JETON TAG : contour orange-marron pulsant */
.player.has-tag {
    border: 2px solid #c1440e !important;
    box-shadow: 0 0 0 0 rgba(193, 68, 14, 0.8);
    animation: pulse-tag 0.8s infinite cubic-bezier(0.66, 0, 0, 1);
}

@keyframes pulse-tag {
    to { box-shadow: 0 0 0 14px rgba(193, 68, 14, 0); }
}

/* COUREUR RETIRÉ : contour orange-marron, surpasse le !important du runner */
.player.runner.runner-out {
    border: 2px solid #c1440e !important;
    box-shadow: 0 0 8px rgba(193, 68, 14, 0.8) !important;
}
/* ============================================================
   BANDEAU TV style MLB — overlay haut gauche
   ============================================================ */

#bandeau-tv {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 50;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    border: 1.5px solid rgba(255,255,255,0.2);
    border-radius: 3px;
    overflow: hidden;
    pointer-events: auto;
    font-family: 'Barlow Condensed', Arial, sans-serif;
    font-weight: 700;
}

/* --- Colonne équipes (gauche) --- */
#bandeau-equipes {
    display: flex;
    flex-direction: column;
}

.eq-ligne {
    display: flex;
    align-items: center;     /* centrage vertical via flexbox — le plus fiable */
    gap: 6px;
    padding: 0 11px;
    cursor: pointer;
    min-width: 84px;
    height: 28px;
    box-sizing: border-box;
}

#eq-domicile { background: linear-gradient(to right, var(--couleur-defense) 55%, #000000 99%); }
#eq-visiteur { background: linear-gradient(to right, var(--couleur-attaque) 55%, #000000 99%); }

.eq-input {
    width: 48px;
    background: transparent;
    border: none;
    color: white;
    font-family: 'Barlow Condensed', Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0;
    outline: none;
    line-height: normal;
    cursor: text;
    caret-color: #ffee58;
}

/* --- Séparateur vertical --- */
.bandeau-sep {
    width: 1px;
    background: rgba(255,255,255,0.2);
}

/* --- Bloc noir : diamant + badge outs centrés verticalement --- */
#bandeau-droite {
    background: rgba(0,0,0,0.85);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 11px;
    padding: 0 11px;
}

/* Diamant directement dans #bandeau-droite */

/* Flèches ▲ ▼ */
.fleche-tv {
    font-size: 10px;
    color: rgba(255,255,255,0.2);   /* grisée = défense */
    line-height: 1;
    flex-shrink: 0;
    cursor: default;
    transition: color 0.15s;
}
.fleche-tv.active { color: #ffffff; }  /* jaune = équipe en attaque */

/* Diamant SVG */
#diamant-tv {
    width: 44px;
    height: 30px;
    overflow: visible;
    flex-shrink: 0;
}

/* Réinitialisation des bases : simple croix blanche à la place du marbre
   (pas une 4e base). N'apparaît qu'après un premier clic sur une base (voir
   interactionBases dans scoreboard.js). Ramène au filtre "tous", distinct de
   "bases vides" (voir resetBases() dans scoreboard.js). */
#reset-bases {
    opacity: 0;
    pointer-events: none;
    cursor: pointer;
    transition: opacity 0.15s ease;
}
#reset-bases.visible {
    opacity: 1;
    pointer-events: auto;
}
.reset-tv-hitzone {
    fill: transparent; /* élargit la zone tactile sans rien afficher */
}
.reset-tv-x {
    fill: #fff;
    font-size: 9px;
    font-family: Arial, sans-serif;
}
#reset-bases:hover .reset-tv-x {
    fill: #ffeb3b;
}

.base-tv {
    fill: rgba(255,255,255,0.15);
    cursor: pointer;
    transition: fill 0.12s;
}
.base-tv:hover   { fill: rgba(230,180,0,0.5); }
.base-tv.occupee { fill: #e8a000; }

/* Distingue "aucun choix fait" (état neutre initial, ci-dessus) de "choix
   explicite : aucun coureur sur cette base" (l'utilisateur a interagi avec le
   diamant, voir interactionBases dans scoreboard.js) — sinon les deux se
   ressemblent à l'oeil (aucune base allumée). */
#diamant-tv.filtre-actif .base-tv:not(.occupee) {
    fill: #000;
    stroke: #fff;
    stroke-width: 1;
}

/* Badge out cyclique : ALL → 0 out → 1 out → 2 outs → ALL */
.badge-outs {
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 3px;
    border: 1px solid transparent;
    transition: color 0.12s, border-color 0.12s, background 0.12s;
    white-space: nowrap;
    width: 56px;             /* largeur fixe — "2 OUTS" au max */
    text-align: center;
    user-select: none;
    flex-shrink: 0;
}

.badge-outs.mode-all {
    color: rgba(255,255,255,0.45);
    border-color: rgba(255,255,255,0.15);
    background: transparent;
}
.badge-outs.mode-all:hover {
    color: rgba(255,255,255,0.75);
    border-color: rgba(255,255,255,0.35);
}

.badge-outs.mode-actif {
    color: #e8a000;
    border-color: rgba(232,160,0,0.5);
    background: rgba(232,160,0,0.1);
}
.badge-outs.mode-actif:hover {
    border-color: #e8a000;
    background: rgba(232,160,0,0.18);
}

/* Feedback : pâle si aucun résultat pour le filtre */
#bandeau-tv.sans-resultat .base-tv.occupee {
    fill: rgba(180,140,0,0.5);
}
/* ============================================================
   FICHE TACTIQUE — panneau texte (contenus.js / contenus-ui.js)
   ============================================================ */

#bouton-fiche-tactique {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 51;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 6px;
    background: rgba(0,0,0,0.55);
    border: 1.5px solid rgba(255,255,255,0.25);
    color: white;
    font-size: 16px;
    box-shadow: none;
    cursor: pointer;
}
#bouton-fiche-tactique:hover {
    background: rgba(0,0,0,0.75);
    border-color: var(--couleur-boutons);
}

/* --------------------------------------------------------------------------
   La fiche est une COLONNE fixe à côté du terrain (voir #zone-jeu, en flex
   row). Pas de superposition. #bouton-fiche-tactique et #fiche-fermer
   permettent juste de la masquer/réafficher si besoin de place.
-------------------------------------------------------------------------- */
#fiche-tactique {
    display: none;
    grid-column: 3;
    justify-self: start;
    width: 340px;
    max-width: 340px;
    height: min(calc(100vw - 2 * var(--marge-page)), 88vh);
    max-height: min(calc(100vw - 2 * var(--marge-page)), 88vh);
    background: rgba(20, 20, 20, 0.96);
    border: 1.5px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    color: #eee;
    font-family: 'Inter', Arial, sans-serif;
    flex-direction: column;
    overflow: hidden;
}
#fiche-tactique.ouverte {
    display: flex;
}

#fiche-entete {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.15);
    background: rgba(0,0,0,0.3);
    flex-shrink: 0;
}
#fiche-titre {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: 'Inter', Arial, sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.35;
    color: #fff;
    min-width: 0; /* laisse le texte se réduire/passer à la ligne sans pousser le bouton fermer hors du panneau */
}
#fiche-titre-icone {
    flex-shrink: 0;
    font-size: 22px;
    line-height: 1.35;
}
#fiche-fermer {
    background: transparent;
    border: none;
    color: #ccc;
    font-size: 16px;
    padding: 2px 6px;
    box-shadow: none;
    cursor: pointer;
}
#fiche-fermer:hover { color: #fff; }

.fiche-badge-statut {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 3px;
}
.fiche-badge-statut.statut-review {
    color: #ffffff;
    background: #b71c1c;
}
.fiche-badge-statut.statut-variant {
    color: #1e1e1e;
    background: #e8a000;
}

#fiche-corps {
    padding: 14px;
    overflow-y: auto;
    flex: 1;
}

.fiche-bloc {
    margin-bottom: 16px;
}
.fiche-bloc h4 {
    margin: 0 0 4px 0;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #ffb74d;
}
.fiche-bloc p, .fiche-bloc ul, .fiche-bloc ol {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.45;
    color: #e0e0e0;
}
.fiche-bloc ul, .fiche-bloc ol {
    padding-left: 20px;
}
.fiche-bloc ol {
    list-style: none;
    counter-reset: priorite;
}
.fiche-bloc ol li {
    counter-increment: priorite;
    position: relative;
    padding-left: 4px;
    margin-bottom: 4px;
}
.fiche-bloc ol li::before {
    content: counter(priorite) ".";
    position: absolute;
    left: -20px;
    font-weight: 700;
    color: #ffb74d;
}
.fiche-bloc.fiche-poste {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px;
    padding: 10px 12px;
}
.fiche-bloc.fiche-poste h4 {
    color: #64b5f6;
}
#fiche-poste-titre {
    color: #fff;
    font-weight: 700;
}

#fiche-tactique.fiche-vide #fiche-corps {
    opacity: 0.5;
}
/* ============================================================
   BULLE D'INFO TACTILE/SOURIS GÉNÉRIQUE (tooltips-tactiles.js)
   Un seul élément réutilisé pour tout data-tooltip de la page.
   ============================================================ */
#bulle-info-tactile {
    position: fixed;
    left: 0;
    top: 0;
    transform: translate(-50%, calc(-100% - 10px));
    max-width: 220px;
    background: rgba(15, 15, 15, 0.97);
    border: 1px solid rgba(255,255,255,0.25);
    color: #f2f2f2;
    font-family: 'Inter', Arial, sans-serif;
    font-size: 12px;
    line-height: 1.4;
    padding: 7px 10px;
    border-radius: 6px;
    z-index: 200;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    box-shadow: 0 4px 14px rgba(0,0,0,0.5);
}
#bulle-info-tactile.visible {
    opacity: 1;
}