/* ==========================================================================
   1. VARIABLES & STRUCTURE GLOBALE
   ========================================================================== */
:root {
    /* Espace réel de la zone de combats (100vh - header - footer/paddings) */
    --hauteur-dispo: 82vh;
}

/* Calcul matriciel dynamique de la hauteur d'une ligne selon la configuration XSLT */
.main-container-flex {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    /* 82vh (écran) divisé par le nb de lignes de tapis, moins 6vh pour l'entête, le tout divisé par le nb de combats */
    --hauteur-un-combat: calc(((82vh / var(--lignes-tapis)) - 6vh) / var(--nb-combats));
}

/* Surcharge W3.CSS pour des polices 100% relatives à l'écran */
.tv-body {
    font-size: 1.5vh;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

    .tv-body .w3-small {
        font-size: 1.2vh !important;
    }

    .tv-body .w3-medium {
        font-size: 1.5vh !important;
    }

    .tv-body .w3-large {
        font-size: 1.8vh !important;
    }

    .tv-body .w3-xlarge {
        font-size: 2.2vh !important;
    }

    .tv-body .w3-xxlarge {
        font-size: 3vh !important;
    }

/* En-tête de la compétition */
.tv-header {
    height: 8vh;
    display: flex;
    align-items: center;
}

.tv-logo-cell {
    width: 15%;
    text-align: center;
}

.tv-logo {
    max-height: 6vh;
}

.tv-title {
    width: 70%;
    font-weight: bold;
    text-align: center;
}

/* ==========================================================================
   2. GESTION DES TAPIS (CONTENEURS)
   ========================================================================== */
.tapis-card {
    box-sizing: border-box;
}

.tapis-card-inner-wrapper {
    height: 100%;
    width: 100%;
}

/* Boîte interne d'un tapis (Hauteur définie par les variables) */
.tapis-inner {
    height: 100%;
    display: flex;
    overflow: hidden;
    --hauteur-brute: calc(var(--hauteur-ecran-utile) / var(--lignes-tapis));
}

/* Dispositions dictées par le XSLT (LayoutMode) */
.dispo-ligne {
    flex-direction: row;
}

.dispo-colonne {
    flex-direction: column;
}

/* En-têtes spécifiques selon la disposition du tapis */
.tapis-header-ligne {
    width: 6vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .tapis-header-ligne b {
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        white-space: nowrap;
        margin: auto;
    }

.tapis-header-colonne {
    flex-shrink: 0;
}

.tapis-content {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ==========================================================================
   3. STRUCTURE DE LA GRILLE DE COMBAT
   ========================================================================== */
.combat-grid-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    margin: 0;
}

/* Ligne de combat : Séparation stricte de l'espace */
.grid-combat-row {
    display: grid;
    /* minmax(0, 1fr) est VITAL pour empêcher un texte long de déformer les colonnes Judokas */
    grid-template-columns: var(--hauteur-un-combat) minmax(0, 1fr) 16% minmax(0, 1fr) !important;
    align-items: stretch; /* Hauteur égale pour toutes les cellules */
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    grid-column-gap: 0;
    background-color: #ffffff;
}

    /* Couleurs alternées (Zebra) et couleur de combat en cours */
    .grid-combat-row:nth-of-type(even) {
        background-color: #f1f1f1;
    }

    .grid-combat-row.w3-pale-green {
        background-color: #ddffdd !important;
    }

/* ==========================================================================
   4. CELLULES ET BOÎTES INTERNES (JUDOKAS & CATÉGORIES)
   ========================================================================== */

/* Badge numéro de combat */
.grid-cell-badge {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0;
}

.pos-badge {
    height: calc(var(--hauteur-un-combat) * 0.75);
    width: calc(var(--hauteur-un-combat) * 0.75);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: calc(var(--hauteur-un-combat) * 0.30);
    flex-shrink: 0;
    margin: 0 !important;
}

/* Cellules porteuses (Judokas et Catégories) */
.grid-cell-judoka, .grid-cell-cat {
    padding: 0 !important;
    display: flex;
    align-items: stretch; /* Étire les boîtes colorées enfants */
    height: 100%;
    width: 100%;
    min-width: 0; /* Autorise la cellule à bloquer le texte trop long */
}

/* Boîtes colorées internes (Rouge, Bleu, Jaune) */
.judoka-box, .cat-box {
    margin: 0.4vh 0.2vw !important; /* Gouttière aérée entre les combats */
    flex: 1; /* Remplit automatiquement la hauteur de la cellule */
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    min-width: 0; /* VITAL pour déclencher le JS de réduction */
    overflow: hidden;
}

.cat-box {
    padding: 0.3vh;
    font-weight: bold;
    text-align: center;
}

    .cat-box img {
        height: 1.5vh;
        width: auto;
    }

/* Conteneur direct des textes (Nom/Club) */
.judoka-box .w3-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* --- Alignements et Comportements (Pilote JS) --- */

/* Disposition : LIGNE (Mode par défaut de ces classes) */
.jc-normal-ligne-right {
    padding: 0.6vh 1vw;
    display: flex;
    justify-content: flex-end;
}

.jc-normal-ligne-left {
    padding: 0.6vh 1vw;
    display: flex;
    justify-content: flex-start;
}

.jc-attente-ligne {
    padding: 0.6vh 1vw;
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
    align-items: center;
}

/* Correction et Forçage du mode Ligne par le JS */
.judoka-box .jc-normal-ligne-right, .judoka-box .jc-normal-ligne-left {
    flex-direction: row !important;
    align-items: center !important; /* Empêche le désalignement vertical du club par rapport au nom */
}
    /* Empêche les div d'occuper 100% de la largeur en mode Ligne */
    .judoka-box .jc-normal-ligne-right > div, .judoka-box .jc-normal-ligne-left > div {
        width: auto !important;
        flex: 0 1 auto;
        min-width: 0;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

/* Disposition : COLONNE */
.jc-normal-colonne-right {
    padding: 0.5vh 1vw;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

.jc-normal-colonne-left {
    padding: 0.5vh 1vw;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.jc-attente-colonne {
    padding: 0.5vh 1vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

/* Espacements Nom / Club */
.club-ligne-right {
    margin-right: 1.5vw;
}

.club-ligne-left {
    margin-left: 1.5vw;
}

.club-colonne {
    margin-top: 0.1vh;
    height: 1.2em;
    line-height: 1.2;
}

.order-1 {
    order: 1;
}

.order-2 {
    order: 2;
}

/* ==========================================================================
   5. TYPOGRAPHIE ET ANTI-DÉBORDEMENT (ELLIPSIS)
   ========================================================================== */

/* Tailles de base calculées via la hauteur du combat */
.dyn-txt-nom {
    font-size: calc(var(--hauteur-un-combat) * 0.55);
    line-height: 1.1;
    font-weight: bold;
    width: 100%;
}

.dyn-txt-club {
    font-size: calc(var(--hauteur-un-combat) * 0.35);
    line-height: 1.1;
    opacity: 0.85;
    width: 100%;
}

.dyn-txt-cat-titre {
    font-size: calc(var(--hauteur-un-combat) * 0.25);
    line-height: 1.1;
}

.dyn-txt-cat-sub {
    font-size: calc(var(--hauteur-un-combat) * 0.20);
    opacity: 0.7;
}

/* Tailles agrandies en mode LIGNE */
.jc-normal-ligne-left .dyn-txt-nom, .jc-normal-ligne-right .dyn-txt-nom, .jc-attente-ligne .dyn-txt-nom {
    font-size: calc(var(--hauteur-un-combat) * 0.65);
}

.jc-normal-ligne-left .dyn-txt-club, .jc-normal-ligne-right .dyn-txt-club {
    font-size: calc(var(--hauteur-un-combat) * 0.25);
}

/* Tailles réduites en mode COLONNE */
.jc-normal-colonne-left .dyn-txt-nom, .jc-normal-colonne-right .dyn-txt-nom, .jc-attente-colonne .dyn-txt-nom {
    font-size: calc(var(--hauteur-un-combat) * 0.45);
}

.jc-normal-colonne-left .dyn-txt-club, .jc-normal-colonne-right .dyn-txt-club {
    font-size: calc(var(--hauteur-un-combat) * 0.25);
}

/* Règle globale d'ellipsis : on coupe avec des points de suspension ce qui dépasse */
.judoka-box .w3-container:not([class*="jc-attente"]) > div, .cat-box > div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

/* Utilitaires Textes & Images */
.txt-bold {
    font-weight: bold;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    line-height: 1.2;
}

.img-attente {
    height: 0.8em;
    width: auto;
    margin-right: 0.5vw;
    display: inline-block;
    vertical-align: middle;
}

/* Ajustement vertical si présence du cartouche Equipe (3 lignes) */
.cat-box-equipe .dyn-txt-cat-titre {
    font-size: calc(var(--hauteur-un-combat) * 0.20);
}

.cat-box-equipe .dyn-txt-cat-sub {
    font-size: calc(var(--hauteur-un-combat) * 0.18);
}
/* Structure du cartouche Equipe */
.cartouche-equipe-wrapper {
    margin-top: 0.3vh;
    display: flex;
    justify-content: center;
    width: 100%;
    overflow: hidden;
}

.cartouche-equipe {
    display: inline-flex !important;
    flex-wrap: nowrap !important; /* INTERDIT le passage sur 2 lignes */
    white-space: nowrap !important; /* INTERDIT la casse du texte */
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    line-height: 1.1;
    padding: 0.2vh 0.5vw;
    max-width: 100%;
    /* La police de base pour tout le cartouche (soumise au JS) */
    font-size: calc(var(--hauteur-un-combat) * 0.22);
}

/* Le texte hérite simplement de la taille du parent */
.dyn-txt-cat-equipe {
    font-size: 1em;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Fix du filtre CSS et protection contre l'écrasement */
.cartouche-icone-mask {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    overflow: hidden;
    flex-shrink: 0; /* GARANTIT que l'icone ne sera jamais compressée */
}

/* L'image prend 1.6 fois la taille de la police du cartouche (Bien visible) */
.cat-box img.cartouche-icone {
    width: auto !important;
    height: 1.0em !important;
}

/* ==========================================================================
   6. PAGINATION & BARRE DE PROGRESSION
   ========================================================================== */

/* Barre inférieure */
.progress-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2vh;
    z-index: 9999;
    background-color: rgba(0,0,0,0.6);
}

.progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    transition: width 0.1s linear;
}

.progress-text {
    position: relative;
    z-index: 10000;
    color: white;
    text-align: center;
    font-size: 1.3vh;
    line-height: 2vh;
    font-weight: bold;
}

/* Points de pagination (Puces) */
.paging-ligne-container {
    width: 100%;
    padding-top: 1.5vh;
    display: flex;
    justify-content: center;
}

.paging-ligne-dots {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.2vw;
    padding: 0 0.4vw;
}

.paging-colonne-container {
    margin-right: 1vw;
}

.paging-colonne-dots {
    display: flex;
    flex-direction: row;
    gap: 0.3vw;
    align-items: center;
}

.page-dot {
    font-size: 2.5vh;
    transition: opacity 0.3s;
}

.page-dot-active {
    opacity: 1;
}

.page-dot-inactive {
    opacity: 0.3;
}

@keyframes dot-blink {
    0% {
        opacity: 1.0;
    }

    50% {
        opacity: 0.3;
    }

    100% {
        opacity: 1.0;
    }
}

.w3-dot-active {
    animation: dot-blink 1.5s infinite ease-in-out;
    display: inline-block;
}