/*
BODY BG
*/
.bg-body-green{
    background: linear-gradient(#000000, #014F27);
    width: 100%;
    max-width: 100%;
    margin:0px;
    padding:0px;
    margin-bottom:0px!important;
    margin-top:0px!important;
}
.bg-body-green .s-body{
    background-image: url('/img/body-bg-double-cut.png');
}


.bg-body-green-football-player{
    background-image: url('/img/bg-football-player.png');
}
.bg-body-green-football-player .s-body{
    background: linear-gradient(rgba(0, 0, 0, 0.9), rgba(1, 79, 39, 0.9));
}
/*
##############
CUT
*/
.green-bg-cut {
    background-image: url('/img/green-cut-bg.png');
    padding: 20px;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    width: fit-content;
}

/*
##############
*/

.dp-block {
    display: block;
}

/*
#################
CUSTOM RADIO/CHECK
*/
.uft-radio-switch {
    display: none;
}

.uft-radio-switch-ctnr .switch {
    background: #dbdbdb;
    width: 45px;
    height: 25px;
    border-radius: 20px;
    display: block;
    position: relative;
    margin: 10px;
}

.uft-radio-switch-ctnr .switch:hover {
    cursor: pointer
}

.uft-radio-switch-ctnr .switch:after {
    content: "";
    height: 23px;
    width: 23px;
    border-radius: 20px;
    display: block;
    position: absolute;
    top: 1px;
    left: 1px;
    background: white;
    transition: ease-out 0.3s;
}

.uft-radio-switch-ctnr input[type=radio]:checked+label:after,
.uft-radio-switch-ctnr input[type=checkbox]:checked+label:after {
    left: calc(100% - 24px);
    background: white;
}

.uft-radio-switch-ctnr input[type=checkbox]:checked+label.switch {
    background: #026633;
}

.pac-container {
    z-index: 100000 !important;
}

.tournoi-step-disabled{
    opacity: 0.5!important;
}

.tounoi-details-sub-tab-menu>div>div{
    text-align: center;
}
.tounoi-details-sub-tab-menu>div>div a{
    color: #026633;
    font-weight: 900;
    font-style: italic;
    font-size: 15px;
    text-transform: uppercase;
}

.tounoi-details-sub-tab-menu>div>div a.selected-tab{
    color: white;
    background-color: #026633;
    display: block;
    width: fit-content;
    padding: 10px 20px;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%);
}

.white-text-shadowed{
    font-size: 28px;
    line-height: 1.15;
    -webkit-text-stroke: 0.5px #ffffff;
    font-style: italic;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 900;
    margin: 0px;
    margin-right: 10px;
    /* H1 = conteneur flex centré verticalement. Le line-clamp est porté
       par un <span class="wts-inner"> injecté en JS au runtime (cf.
       tournoi.js, MutationObserver). Cette séparation est nécessaire car
       -webkit-box (requis pour line-clamp) ne supporte pas le centrage
       vertical du texte interne. */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    min-height: calc(28px * 1.15 * 2);
    min-width: 0;
    flex: 1 1 auto;
}
.white-text-shadowed > .wts-inner {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    width: 100%;
    min-width: 0;
    /* propriétés font/style héritées du H1 parent */
}

/* Layout mobile pour /tournoi/{id}/poules :
   - Les 2 .col-6 dans .row.ph_poules passent à pleine largeur (sans
     toucher aux classes Bootstrap pour ne rien casser ailleurs).
   - Le 2ème .col-6 (configuration de phase) est replié par défaut
     derrière un bouton toggle visible uniquement en mobile. */
@media (max-width: 767.98px) {
    .row.ph_poules > .col-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    .row.ph_poules > .col-6 > .transparent-bg-cnt-bordred {
        display: none;
    }
    .row.ph_poules > .col-6.ph-config-open > .transparent-bg-cnt-bordred {
        display: block;
        margin-top: 12px;
    }
}

/* Bouton toggle (visible uniquement en mobile via d-block d-md-none) */
.ph-config-mobile-toggle {
    width: 100%;
    background-color: #026633;
    color: #ffffff;
    border: none;
    padding: 10px 16px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 14px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    border-radius: 4px;
    margin-bottom: 6px;
    transition: background-color 0.15s ease;
}
.ph-config-mobile-toggle.d-block {
    display: flex !important;
}
@media (min-width: 768px) {
    .ph-config-mobile-toggle.d-md-none {
        display: none !important;
    }
}
.ph-config-mobile-toggle:hover {
    background-color: #038a44;
}
.ph-config-mobile-toggle-icon {
    transition: transform 0.2s ease;
}
.ph-config-mobile-toggle[aria-expanded="true"] .ph-config-mobile-toggle-icon {
    transform: rotate(180deg);
}

.transparent-bg-cnt-bordred{
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image:url('/img/bg-trns-border-white.png');
    
}
.poul-bl-title{
    color: white;
    font-style: italic;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 600;
    font-size: 17px;
    margin-bottom: 0px;
    margin-left: 5px;
}

.transparent-bg-cnt-bordred>div{
    padding: 10px 15px;
    display: flex;
    align-items: center;
    position: relative;
}
.ctnr-poules-tournoi .uft-ck-item label{
    padding: 5px 12px;
}
.ctnr-poules-tournoi .uft-ck-item{
    clip-path: polygon(0 10px, 10px 0, 100% 0, 100% calc(100% - 0px), calc(100% - 0px) 100%, 0 100%);
}
/*
.transparent-bg-cnt-bordred:after{
    content:'';
    position:absolute;
    width: 100%;
    height: 100%;
    
}*/

.ck-grey{
    background-color: #82829B!important;
    color: white!important;
}

.uft-ck-item.md-check label{
    padding: 7px 18px;
}
.uft-ck-item.md-check{
    clip-path: polygon(0 10px, 10px 0, 100% 0, 100% calc(100% - 0px), calc(100% - 0px) 100%, 0 100%);
}

#tournoi-modal-poules .uft-ck-item input:checked+label {
    background-color: #026633 !important;
}

.point-egalite-item{
    margin-bottom: 14px;
}

.pt-eg-row{
    display: flex;
    align-items: stretch;
    gap: 12px;
    min-height: 52px;
}

.pt-eg-counter{
    flex: 0 0 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #373759;
    font-weight: 900;
    font-size: 34px;
    line-height: 1;
    font-style: italic;
}

.point-egalite-item .pt-eg-txt{
    flex: 1 1 auto;
    clip-path: polygon(13px 0, 100% 0, calc(100% - 13px) 100%, 0 100%);
    padding: 8px 26px;
    background-color: #026633;
    color: white;
    font-weight: 900;
    text-align: center;
    font-size: 14px;
    line-height: 1.25;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 52px;
}

.point-egalite-item.sortable-ptg .pt-eg-txt{
    background-image:url('/img/icn-reorder-ptg.png');
    background-repeat: no-repeat;
    background-position: 21px center;
    padding-left: 44px;
}

.pt-eg-sub{
    display: block;
    font-size: 11px;
    font-weight: 600;
    opacity: 0.9;
    margin-top: 2px;
    line-height: 1.2;
}

.pt-eg-action{
    flex: 0 0 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}


.ptg-disabled .pt-eg-txt{
    background-color: #858EBE;
}

.en-di-pt-egalite.dsbl-peg{
    background-image:url('/img/disable-pt-egalite.png');
}
.en-di-pt-egalite.enbl-peg{
    background-image:url('/img/enable-pt-egalite.png');
}

.en-di-pt-egalite{
    width: 35px;
    height: 35px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    cursor: pointer;
}

.sortable-ptg {
    cursor: move;
}
.remove-poule-team-item{
    width: 22px;
    height: 22px;
    background: #c8251f;
    position: absolute;
    top: -4px;
    right: -4px;
    border-radius: 100%;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    z-index: 1;
    cursor:pointer;
}

.poule-club-item{
    align-items: center;
    margin-bottom: 5px;
    position: relative;
}
.poule-club-item>div{
    position:relative;
    cursor:pointer;
    clip-path: polygon(13px 0, 100% 0, calc(100% - 13px) 100%, 0 100%);
    padding: 5px;
    background-color: white;
    color: #04743B;
    font-weight: 700;
    text-align: left;
    padding-left: 20px;
    font-size: 17px;

}
.poule-club-item>div{margin: auto;width:100%;}
.poule-club-item:nth-child(1)>div{background-color: #F0A538;color: white;}
.poule-club-item:nth-child(2)>div{background-color: #A9A9A9;color: white;}
.poule-club-item:nth-child(3)>div{background-color: #4F2813;color: white;}
.poule-club-item:last-child>div{margin-bottom:20px;}


.row.ph_poules{
    margin-bottom: 20px;
}

.remove-ph-btn{
    clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
    width: 35px;
    margin-right: 0px;
}

.selected-clubs-list-item{
    border-bottom: 1px solid #dfdfdf;
    padding-bottom: 10px;
}
.tournoi-poule-club-item-name img{
    width:25px;
    height: 25px;
    border-radius: 100%;
    object-fit: cover;
    object-position: center;
    margin-right: 5px;
    margin-left: 10px;
}

.ui-widget.ui-widget-content {
    border: 0px solid #c5c5c5;
    height: 4px;
    background-color: #006f3a;
    border-radius: 0px;
    position: relative;
}
.ui-widget-header {
    border: 0px solid #dddddd!important;
    background: #006f3a!important;
}
.ui-widget.ui-widget-content {
    border: 0px solid #c5c5c5!important;
}
.ui-state-default, .ui-widget-content .ui-state-default{
    border: 0px solid #c5c5c5!important;
    background: #006f3a!important;
    border-radius: 100%!important;
    margin-top: -3px!important;
}
.bg-transparent-gray{
    background: rgba(134, 123, 123, 0.3);
}

.clip-leftPoint {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 9% 100%, 0 60%);
}

.match-poule-tag {
    border: 2px solid #a9a8af;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    width: 90px;
}
.custom-select option {
    background-color: #fff;
    border-radius: 0;
    clip-path: polygon(20% 0%, 100% 0, 100% 80%, 80% 100%, 0 100%, 0% 20%) !important;
}

.sortable-match-ctnr{
    width: 100%;
    height: 100%;
}


.sortable-match-ctnr>div{cursor:move;    height: auto;}

.sortable-match-item-holder{
    width: 100%;
    height: 50px;
    border: 2px dotted #ccc;
    background-color: rgba(255, 255, 255, 0.2);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 9% 100%, 0 60%);
    margin-bottom: 10px !important;
}

.ui-sortable-helper {
  opacity: 0.7;
  z-index: 99999!important;
  position: absolute!important;
}
.sortable-placeholder-active{
    opacity: 0.5;
    height: auto!important;
}



.terrain-clip-path-fix {
    position: relative;
  }
  .terrain-clip-path-fix:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: -1;
    background-color: #072518;
    background: rgba(134, 123, 123, 0.3);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 35px), calc(100% - 35px) 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 35px), calc(100% - 35px) 100%, 0 100%);
  }


  .gray-bg-border0 {
    background: gray;
    border-left: 1px solid gray;
    border-top: 1px solid gray;
    border-right: 1px solid gray;
    border-bottom: 1px solid gray;
}


.poly-match-list-div{
    position: relative;
}


.poly-match-list-div:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: -1;
    background-color: #072518;
    background: rgb(255, 255, 255);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 35px), calc(100% - 35px) 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 35px), calc(100% - 35px) 100%, 0 100%);
  }


  .game-team-name{
        min-height: 48px;
  }

  .full-match-list-parent-ctnr .sortable-match-item .clip-leftPoint.bg-white{
    margin-bottom: 0px!important;
  }

/* -------------------------------------------------------------------------
   Filtre par phase de poule (onglets en haut des pages /games, /score…)
   - Wrapper centré avec deux flèches scroll gauche/droite.
   - À l'intérieur, un <ul> en flex nowrap qui scrolle horizontalement et
     affiche ~4 onglets à la fois (selon longueur des libellés).
   - Chaque onglet : largeur auto selon son texte, padding latéral généreux.
   ------------------------------------------------------------------------- */
.phases-nav-wrapper {
    /* PLEINE largeur, jamais moins : sur /score les deux wrappers sont
       enfants directs d'une .row (flex-wrap) — un max-width inferieur a 100%
       (ancien 760px) permettait aux DEUX barres de tenir sur la meme ligne
       sur ecran large, donc affichees cote a cote au lieu de l'une sous
       l'autre. La limite ~4 onglets (760px) est desormais portee par le <ul>
       .phases-nav-scrollable ci-dessous ; le centrage du trio
       [fleche | onglets | fleche] est assure par justify-content-center. */
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    gap: 8px;
}

.phases-nav-scrollable {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 12px;
    flex: 1 1 auto;         /* prend toute la place entre les 2 flèches */
    min-width: 0;           /* permet à flex de réduire correctement */
    /* ~4 onglets de taille moyenne. Portee ICI (et pas sur le wrapper) :
       le <ul> de chaque barre fait ainsi la meme largeur et demarre au meme
       endroit, fleches ou pas (elles se placent A L'EXTERIEUR de cette zone),
       donc les barres restent alignees l'une sous l'autre. */
    max-width: 760px;
    padding: 4px 4px 8px;
    margin: 0;
    list-style: none;
    /* Centrage : voir les règles li:first-child / li:last-child ci-dessous.
       L'ancien `justify-content: safe center` était ignoré par Safari/iOS
       (mot-clé `safe` non supporté → retombée sur flex-start), d'où les deux
       barres parfois pas centrées l'une sous l'autre selon le navigateur. */
    justify-content: flex-start;
    /* Scroll horizontal tactile fluide sur mobile */
    -webkit-overflow-scrolling: touch;
    /* Scrollbar masquée (le scroll reste fonctionnel via les flèches, le
       swipe tactile et la molette/shift+molette). */
    scrollbar-width: none;        /* Firefox */
    -ms-overflow-style: none;     /* IE / vieux Edge */
    scroll-behavior: smooth;
}

.phases-nav-scrollable > li {
    flex: 0 0 auto;             /* largeur = contenu, pas de shrink/grow */
    max-width: none !important; /* override de l'ancien max-width: 85px */
    width: auto;
    padding-left: 10px !important;
    padding-right: 10px !important;
}

/* Centrage compatible TOUS navigateurs (équivalent de `safe center`) :
   quand les onglets tiennent, les marges auto se partagent l'espace libre
   → contenu centré ; quand ça déborde, les marges auto tombent à 0 →
   alignement à gauche et le premier onglet reste atteignable au scroll. */
.phases-nav-scrollable > li:first-child {
    margin-left: auto;
}
.phases-nav-scrollable > li:last-child {
    margin-right: auto;
}

.phases-nav-scrollable > li > a {
    white-space: nowrap;        /* pas de retour à la ligne dans le libellé */
    padding: 0 28px;            /* respiration latérale entre texte et bord */
}

/* Scrollbar masquée côté Chrome / Safari / nouveaux Edge */
.phases-nav-scrollable::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* Flèches gauche / droite — boutons carrés avec petite découpe d'angle
   (cohérent avec le style polygonal du reste de l'app), bien visibles,
   icône centrée parfaitement (horizontal + vertical). */
.phases-nav-arrow {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border: none;
    background-color: #026633;          /* vert UFT, fort contraste sur fond sombre */
    color: #ffffff;
    cursor: pointer;
    padding: 0;
    /* Carré + petite découpe sur le coin haut-gauche uniquement (~25% = ~10 px sur 40 px).
       clip-path cache toute déco extérieure (border, ombre tronquée), donc
       le contraste vient du background + de la couleur de l'icône. */
    border-radius: 0;
    -webkit-clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%, 0 25%);
    clip-path:         polygon(25% 0, 100% 0, 100% 100%, 0 100%, 0 25%);
    /* Cachés par défaut : le JS les affiche (.is-visible) uniquement quand le
       contenu déborde réellement, ce qui évite le flash "visible → caché"
       au chargement de la page. */
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    line-height: 1;
    transition: background-color 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}
.phases-nav-arrow.is-visible {
    display: inline-flex;
}
.phases-nav-arrow > i {
    /* Force le glyphe à occuper exactement le carré flex centré : Bootstrap
       Icons sont des pseudo-elements glyph qui peuvent flotter de 1-2 px
       selon le navigateur, on les pin avec un flex centré explicite. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    width: 100%;
    height: 100%;
}
.phases-nav-arrow:hover {
    background-color: #038a44;
    transform: scale(1.05);
}
.phases-nav-arrow:active {
    transform: scale(0.95);
}
.phases-nav-arrow:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    transform: none;
}

/* -------------------------------------------------------------------------
   Filtres multi-sélection (Select2) sur /tournoi/{id}/games
   - Le tab polygonal blanc reste tel quel.
   - Le widget Select2 dedans : hauteur compacte forcée, placeholder visible
     stylé comme l'ancien select (bold, uppercase, foncé). En mode multiple
     le placeholder est porté par l'<input> interne, pas par un span dédié.
   ------------------------------------------------------------------------- */
/* Anti-FOUC : on cache le <select> natif tant que Select2 ne l'a pas
   transformé (classe .select2-hidden-accessible posée à l'init). Évite le
   flash visible des selects bruts au chargement de la page avant que JS
   ne déclenche Select2. */
select.games-filter-select:not(.select2-hidden-accessible) {
    display: none !important;
}

/* Skeleton statique affiché DANS le polygonal tab avant que Select2 ne
   prenne le relais — visuellement identique au placeholder du widget
   final, donc aucune transition perçue par l'utilisateur. Caché dès que
   Select2 a marqué son <select> comme initialisé (.select2-hidden-accessible).
   Padding top/bottom pour matcher la hauteur visuelle du widget Select2. */
.games-filter-skeleton {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;
    color: #212529;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1em;
    line-height: 1.4;
    padding: 8px 6px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/* Quand Select2 est prêt sur le frère <select>, on cache le skeleton. */
.top-polygon-btn:has(.games-filter-select.select2-hidden-accessible) .games-filter-skeleton {
    display: none;
}

.match-tab-nav .games-filter-select + .select2-container {
    width: 100% !important;
    min-width: 0;
    display: block;
}

.match-tab-nav .games-filter-select + .select2-container .select2-selection--multiple {
    background-color: transparent;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    min-height: 26px;                    /* hauteur compacte du tab */
    height: 26px;
    line-height: 1;
    overflow: hidden;                    /* pas d'expansion verticale */
}

.match-tab-nav .games-filter-select + .select2-container .select2-selection__rendered {
    padding: 0 6px !important;
    margin: 0;
    list-style: none;
    height: 26px;
    line-height: 26px;
    display: flex;
    flex-wrap: nowrap;                   /* tags sur une seule ligne */
    align-items: center;
    justify-content: center;
    gap: 4px;
    overflow: hidden;
}

/* Champ recherche interne — c'est lui qui porte le placeholder en multi. */
.match-tab-nav .games-filter-select + .select2-container .select2-search--inline {
    margin: 0;
    padding: 0;
    flex: 1 1 auto;
    min-width: 0;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.match-tab-nav .games-filter-select + .select2-container .select2-search--inline .select2-search__field {
    margin: 0;
    padding: 0;
    height: 24px;
    line-height: 24px;
    width: 100% !important;
    min-width: 0;
    border: none;
    background: transparent;
    color: #212529;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1em;
    text-align: center;
    cursor: pointer;
    outline: none;
}

/* Placeholder du champ recherche (= placeholder du tab en mode multi). */
.match-tab-nav .games-filter-select + .select2-container .select2-search__field::placeholder {
    color: #212529;
    opacity: 1;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1em;
}
.match-tab-nav .games-filter-select + .select2-container .select2-search__field::-webkit-input-placeholder {
    color: #212529;
    opacity: 1;
    font-weight: 700;
    text-transform: uppercase;
}
.match-tab-nav .games-filter-select + .select2-container .select2-search__field::-moz-placeholder {
    color: #212529;
    opacity: 1;
    font-weight: 700;
    text-transform: uppercase;
}

/* iOS — zoom automatique au focus des filtres. Double parade :
   1) games.js pose inputmode="none" sur le champ (écrans tactiles) : pas de
      clavier virtuel ;
   2) ci-dessous, la police est DÉCLARÉE à 16 px — le seuil sous lequel iOS
      zoome — puis le RENDU est ramené à ~14 px par scale(0.875), pour
      rester proche de la taille d'origine. transform ne modifie pas la
      boîte de layout : texte centré et zone tactile inchangés.
   Mobile uniquement ; en desktop, rien ne change. */
@media (max-width: 850px) {
    .match-tab-nav .games-filter-select + .select2-container .select2-search--inline .select2-search__field {
        font-size: 16px;
        transform: scale(0.875);
        transform-origin: center center;
    }
    /* Le placeholder est rendu DANS le champ : il hérite des 16 px et subit
       le même scale. */
    .match-tab-nav .games-filter-select + .select2-container .select2-search__field::placeholder {
        font-size: 16px;
    }

    /* Hauteur compacte des filtres en mobile : boîte de sélection à 39 px,
       zone rendue (placeholder/badges) à 34 px. Scopé aux filtres de /games
       et /games-finales (.match-tab-nav) pour ne pas toucher les autres
       Select2 du site. */
    .match-tab-nav .games-filter-select + .select2-container.select2-container--default .select2-selection--multiple {
        height: 39px !important;
    }
    .match-tab-nav .games-filter-select + .select2-container.select2-container--default .select2-selection--multiple .select2-selection__rendered {
        height: 34px !important;
    }
}

/* Tag d'une sélection unique OU notre badge custom "X filtres" — vert UFT.
   Largeur 100% : remplit toute la largeur du tab polygonal.
   Découpe polygonale sur le coin HAUT-GAUCHE pour rappeler le style UFT. */
.match-tab-nav .games-filter-select + .select2-container .select2-selection__choice {
    background-color: #026633;
    color: #ffffff;
    border: none;
    border-radius: 0;
    padding: 0 8px;
    margin: 0;
    height: 22px;
    line-height: 22px;
    font-size: 0.75em;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px);
    clip-path:         polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px);
}

/* Quand un chip est visible (1+ sélection), on cache le champ recherche
   inline qui prendrait de l'espace dans le tab — l'utilisateur peut filtrer
   directement depuis le dropdown ouvert. */
.match-tab-nav .games-filter-select + .select2-container .select2-selection__rendered:has(.select2-selection__choice:not(.uft-hidden-chip)) .select2-search--inline {
    display: none;
}

.match-tab-nav .games-filter-select + .select2-container .select2-selection__choice.uft-select2-summary {
    cursor: pointer;
}
.match-tab-nav .games-filter-select + .select2-container .select2-selection__choice.uft-select2-summary .select2-selection__choice__remove {
    display: none;
}
/* Chips supplémentaires lors d'une multi-sélection : invisibles dès la première
   passe de rendu (pas de flash). Seul le premier chip est transformé en badge
   "X filtres" via templateSelection (cf. games.js). */
.match-tab-nav .games-filter-select + .select2-container .select2-selection__choice.uft-hidden-chip {
    display: none !important;
}

.match-tab-nav .games-filter-select + .select2-container .select2-selection__choice__remove {
    color: #ffffff;
    margin-right: 4px;
    margin-left: 0;
    font-weight: 900;
    border: none;
}
.match-tab-nav .games-filter-select + .select2-container .select2-selection__choice__remove:hover {
    color: #ffe;
    background: transparent;
}

/* Override du padding vertical Bootstrap (py-2) UNIQUEMENT sur les tabs
   polygonaux qui contiennent un filtre Select2 (.games-filter-select) —
   pas sur les tabs de navigation par phase de poule. */
.match-tab-nav .top-polygon-btn:has(.games-filter-select) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Dropdown — scope explicite via dropdownCssClass injecté en JS (cf. games.js)
   pour ne pas affecter les autres Select2 du site (country select, etc.). */
.select2-dropdown.games-filter-dropdown .select2-results__option {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 6px 10px;
}

/* Dropdown — appended to body (dropdownParent: $('body'))
   Scopé via la classe games-filter-dropdown pour ne pas affecter
   les autres Select2 du site. Bordure verte UFT + découpe polygonale
   sur le coin BAS-GAUCHE pour rappeler le style des onglets. */
.select2-dropdown.games-filter-dropdown {
    border: 1px solid #026633;
    border-radius: 0;
    z-index: 9999;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 18px 100%, 0 calc(100% - 18px));
    clip-path:         polygon(0 0, 100% 0, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}

/* Mobile : le dropdown prend toute la largeur du viewport pour rester
   lisible (sinon il serait calé sur la largeur réduite du tab polygonal).
   On surcharge les positions inline posées par Select2.

   `position: fixed` est indispensable : sans lui, `left: 0` se calcule DANS
   le wrapper que Select2 appende au body en position absolue A L'ABSCISSE DU
   TAB — le dropdown partait donc de cette abscisse avec 100vw de large, d'où
   un débordement à droite et une scrollbar horizontale en bas de page. En
   fixed, left/largeur se re-basent sur le viewport : plein écran, zéro
   débordement. La position verticale reste celle calculée par Select2
   (emplacement statique dans le wrapper). */
@media (max-width: 767.98px) {
    .select2-dropdown.games-filter-dropdown {
        position: fixed !important;
        left: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
    }
}
/* /accueil du tournoi : en MOBILE, la carte « Sponsors » vide n'apporte rien
   aux visiteurs — masquée quand le tournoi n'a aucun sponsor (classe posée
   par acceuil_tournoi_edit.html.twig, jamais pour le owner qui y garde son
   bouton « Ajouter un sponsor »). Desktop inchangé. */
@media (max-width: 850px) {
    .uft-sponsors-vides {
        display: none !important;
    }
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #026633;
    color: #ffffff;
}
.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #e8f5ec;
    color: #026633;
    font-weight: 700;
}

/* Carrousel équipes sur /tournoi/{id}/accueil : noms tronqués avec "..." sur
   une seule ligne pour ne jamais dépasser leur cellule.
   Le markup utilise <tr style="display:block"> en inline → on doit forcer
   le layout en flex avec !important pour reprendre le contrôle des largeurs
   et permettre au span (3ème niveau) de shrink.
   Au survol, le nom complet apparaît via l'attribut title (cf. tournoi.js).
   S'applique aux 2 carrousels : desktop (#carouselExampleDesktop) et
   mobile (#carouselExampleMobile). */
.teams_list_ctnr .table-container > .row,
.teams_list_ctnr [class^="col-"],
.teams_list_ctnr [class*=" col-"] {
    min-width: 0;
}
.teams_list_ctnr table {
    width: 100% !important;
    table-layout: fixed !important;
}
.teams_list_ctnr table tr {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0;
}
.teams_list_ctnr table th {
    flex: 0 0 auto !important;
    min-width: 30px;
    width: auto !important;
}
.teams_list_ctnr table td {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    width: auto !important;
}
.teams_list_ctnr .foot-logoball {
    display: flex !important;
    align-items: center !important;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    gap: 8px;
}
.teams_list_ctnr .foot-logoball > img {
    flex: 0 0 auto;
}
.teams_list_ctnr .foot-logoball > span {
    flex: 1 1 auto;
    min-width: 0;
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}