@media (max-width: 768px) {
    .table-container {
        width: 90% !important;
    }

    .equipe-image0 {
        width: 30% !important;
    }
}

@media (max-width: 991px) {
    .responsive-hide {
        display: none !important;
    }

    .responsive-show {
        display: block !important;
    }

    .image-appstore {
        width: 50%
    }

    .image-playstore {
        width: 58%;
    }

    .gap-footer {
        gap: 2em;
    }

    .p-padding-poule {
        padding: 2rem;
    }

    .table-container {
        gap: 0;
        clip-path: polygon(10% 0, 100% 0, 100% 20%, 100% 97%, 90% 100%, 20% 100%, 0 100%, 0 3%);
        width: 100%;
        padding: 2em 4.5em;
    }

    .details-container {
        clip-path: polygon(10% 0, 100% 0, 100% 20%, 100% 93%, 90% 100%, 20% 100%, 0 100%, 0 8%);

    }

    .number-equipe {
        margin: 0 1em;
        width: 92%;
    }

    /*
    .sponsor-container {
        margin: 3em 1em 0 1em;
        width: 92% !important;
    }*/

    .supp-info-container {
        margin: auto;
        left: 0;
        width: 70%;
    }

    .flex-downloadbtn {
        left: 0;
        right: 0;
        width: 100%;
        gap: 2em;
    }

    .top-nav-info {
        width: 92%;
        left: 0;
        right: 0;
        margin: 0 1em;
        clip-path: none;
    }

    .container-topSection {
        width: 90%;
        margin: 0 0.5em;
        clip-path: polygon(50% 0%, 100% 0, 100% 0, 100% 88%, 90% 100%, 50% 100%, 20% 100%, 0 100%, 0% 13%, 11% 0);
    }

    .uft-title {
        font-size: 1rem;
    }

    .adress-header {
        line-height: 0.8em;
        align-items: flex-start;
        margin: 0 !important;
        padding-top: 1.5em;
    }

    .navbar-nav {
        display: flex;
        align-items: flex-start;
    }

    .second-nav .title-info-nav {
        text-align: left;
    }

    .title-info-nav {
        text-align: left;
    }

    .equipe-image0 {
        width: 100%;
    }

    .planning-btn {
        width: 100%;
    }

    .foot-logoball {
        flex-direction: column;
        align-items: center;
    }

    .container-topSection {
        top: -16vh;
    }

    .btn-edit {
        position: absolute;
        top: 0;
        right: 0;
    }

    .sponsors-title {
        padding-bottom: 0.4em;
    }

    .no-photo-title {
        font-size: 2.5em;
        width: 100%;
        padding: 0 0.5em 2em;
    }

    .no-classement-title {
        font-size: 4rem;
        width: 100%;
        text-align: center;
        padding: 1em 0;
        font-size: 2.5em;
    }

    .no-classement-container {
        padding: 2em;
        width: 90%;
    }

    .equipe-container {
        width: 90%;
    }

    .supp-event-container {
        margin: auto;
        width: 100% !important;

    }

    .top-nav-container .nav-link {
        width: auto !important;
        font-weight: 700;
    }

    .sidebar .top-nav-container .nav-link {
        font-size: 1em !important;
    }

    .top-nav-heroSection {
        display: flex !important;
        align-items: center !important;
        margin: auto;
    }

    .padding-tab-event-mobile {
        margin: 0 !important;
        width: calc(100% / 3);
    }

    .tabs-container-event {
        width: 100%;
    }

    .nav-tabs-event-container {
        width: 100%;
    }

    .tournament-modal .modal-dialog {
        max-width: 100%;
    }

    .attente-modal .tournament-modal .modal-dialog {
        max-width: 100%;
    }

    .checked-card-modal {
        width: 100%;
    }

    .attente-list-container {
        width: 90%;
        /* `margin-bottom: 22vh` (fix/style.css:1294) : une marge exprimee en
           fraction de la HAUTEUR D'ECRAN. Sur desktop elle aere le bas de page ;
           sur telephone elle represente pres d'un quart de l'ecran de vide sous
           la carte. Ramenee a une valeur fixe, independante de la hauteur. */
        margin-bottom: 24px;
        padding: 1.2em;
    }

    .margin-plan-title {
        margin-left: 0;
    }

    .responsive-btn-plan {
        justify-content: center !important;
        margin-top: 3em;
    }

    .second-slider tr {
        height: 100% !important;
    }

    .text-align-respo {
        text-align: center;
        margin: 1em 0;
    }

    .equipe-slider-second-form .carousel-control-next,
    .equipe-slider-second-form .carousel-control-prev {
        top: -90%;
        /* left: -49px; */
    }

    .equipe-slider-second-form .carousel-control-prev,
    .equipe-slider-second-form0 .carousel-control-prev {
        right: auto;
        left: auto;
    }

    .equipe-slider-second-form0 .carousel-control-next,
    .equipe-slider-second-form0 .carousel-control-prev {
        top: -113%;
    }

    .second-slider .table-container {
        padding: 2em 1em;
    }

    .clip-path-parallelogram {
        clip-path: polygon(100% 0, 95% 100%, 0 100%, 6% 0);
        -webkit-clip-path: polygon(100% 0, 95% 100%, 0 100%, 6% 0);

    }

    .top-header-container-plan {
        margin: 0 1em;
        clip-path: polygon(0 0, 100% 0, 100% 20%, 100% 90%, 92% 100%, 20% 100%, 0 100%, 0 22%);
    }

    .tournament-modal .modal-content {
        clip-path: polygon(9% 0, 100% 0, 100% 20%, 100% 91%, 91% 100%, 20% 100%, 0 100%, 0 9%);
    }

    .attente-modal .tournament-modal .modal-content {
        clip-path: polygon(11% 0, 100% 0, 100% 20%, 100% 96%, 86% 100%, 20% 100%, 0 100%, 0 4%);
    }

    .padding-modal-center {
        padding: 2em 0;
    }

    .plan-quarts-div {
        width: 100%;

    }

    .participant-container {
        width: 90%;

    }

    .second-j-container {
        width: 100%;
    }

    .bg-container-ajoute {
        clip-path: polygon(10% 0%, 100% 0, 100% 20%, 100% 100%, 80% 100%, 20% 100%, 0 100%, 0% 25%);
    }

    .table-form-container0 .table>:not(caption)>*>* {
        padding: 0.1rem 0.5rem;
    }

    .custom-col:not(:last-child)::after {
        display: none;
    }

    .title-size {
        font-size: 2.5em;
    }

    .trash-container-position {
        top: 4px;
        right: 10px !important;
    }
}

@media (min-width: 991px) {

    .nav-link:hover,
    .nav-link.active {
        color: #000
    }

    .nav-link::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 50%;
        height: 2px;
        background-color: #0e5b3a;
        visibility: hidden;
        transition: 0.3s ease-in-out;
    }

    .nav-link:hover::before,
    .nav-link.active::before {
        width: 80%;
        visibility: visible;
    }
}

@media (min-width: 991px) {

    .top-nav-container .nav-link:hover,
    .top-nav-container .nav-link.active {
        color: #fff;
        background-color: #006f3a;

    }

    .top-nav-container .nav-link::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 50%;
        height: 2px;
        background-color: transparent;
        visibility: hidden;
        transition: 0.3s ease-in-out;

    }

    .top-nav-container .nav-link:hover::before,
    .top-nav-container .nav-link.active::before {
        width: 80%;
        visibility: visible;

    }

}

/* @media (min-width: 768px) {
    .first-slider .carousel-item {
     margin-right: 0.7em;
     flex: 0 0 calc(100% / 3);
     display: block;
     backface-visibility: visible;
   }
   .first-slider .carousel-inner {
     display: flex;
   }
 } */
@media (min-width: 1400px) {
    .sponsors-title {
        padding-bottom: 0.3em;
    }
}

@media screen and (max-width: 1100px) {
    .games-container .row.width-60{
            width: 100%;
    }
}

@media screen and (max-width: 970px) {
    .games-container .tab-pane{
           max-width: 100%;
    }

    .dropdown-language{
        top:54px!important;
    }
}

@media screen and (max-width: 900px) {
    .wrapper .carousel {
        grid-auto-columns: calc((100% / 2));
    }
}

@media screen and (max-width: 600px) {
    .wrapper .carousel {
        grid-auto-columns: 100%;
    }
}

.show-on-mobile{
    display: none;
}

@media (max-width: 850px) {
    .mobileDevices .navbar.navbar-expand-lg.fixed-top.bg-white {
        padding: 0px !important;
        /* ZONE SURE iOS — encoche / ilot dynamique. Le raccourci `padding: 0`
           ci-dessus efface tout, la valeur doit donc etre reposee APRES et en
           `!important` pour le battre. Vaut 0 hors iOS. */
        padding-top: var(--uft-safe-top, 0px) !important;
    }

    .mobileDevices .fixed-heade-holder {
        /* Cet element ne sert qu'a RESERVER dans le flux la hauteur de
           l'en-tete, qui est fixe. Il doit donc suivre sa hauteur reelle.

           Depuis que l'en-tete porte `padding-top: var(--uft-safe-top)` pour
           l'encoche, il mesure 54px PLUS l'encart : sans l'ajouter ici,
           l'espaceur est trop court d'autant et le premier contenu de chaque
           page passe sous l'en-tete.

           C'est le pendant exact de ce qui est fait en bas de page, ou la
           reserve du `body` inclut l'encart de la barre d'accueil. */
        height: calc(54px + var(--uft-safe-top, 0px)) !important;
    }

    .mobileDevices .top-bar-logo {
        width: 45px !important;
        height: 45px !important;
    }

    .mobileDevices .btn-home-f {
        top: 55px !important;
    }


    .mobileDevices .container-topSection {
        top: -4vh !important;
    }

    .mobileDevices .navbar.navbar-expand-lg.top-nav-info {
        display: none !important;
    }

    .mobileDevices .qr-tournoi-main-ctnr {
        justify-content: center !important;
        padding-top: 20px !important;
    }

    .mobileDevices .qr-tournoi-main-ctnr-main {
        margin-bottom: 0px !important;
    }

    .mobileDevices .container-topSection .sub-title-uft {
        font-size: 15px !important;
    }

    .mobileDevices .container-topSection .uft-title {
        font-size: 23px !important;
    }

    .mobileDevices .container-topSection .sub-info-title {
        font-weight: 400 !important;
        font-size: 12px !important;
    }

    .mobileDevices .container-topSection .uft-items-card {
        gap: 10px !important;
    }

    .mobileDevices .cnt-tournoi-info {
        margin-top: 0px !important;
    }

    .mobileDevices .cnt-tournoi-info-list {
        font-size: 13px !important;
        font-weight: 600 !important;
    }

    .mobileDevices .container-sponsors-details .details-container>div {
        width: 50% !important;
    }

    .mobileDevices .container-sponsors-details .details-container .t-details-text {
        font-size: 16px !important;
        font-weight: 600 !important;
    }

    .mobileDevices .reglement-flex-ctnr{
        display:block!important;
    }

    .mobileDevices #reglementAddForm, .mobileDevices #editReglementModal{
        width:100%;
    }

    .mobileDevices .footer {
        display: none !important;
    }


    .mobileDevices .games-container ul.nav.nav-tabs {
        width: 100% !important;
        margin: auto !important;
        font-size: 13px !important;
        padding: 0px !important;
        margin-bottom: 5px !important;
    }

    .mobileDevices .games-container .tab-content>.tab-pane {
        padding-top: 0px !important;
        padding:0px!important;
    }

    .mobileDevices .games-container .row {
        width: 100% !important;
    }

    .mobileDevices .games-container .table-title-container h1 {
        font-size: 14px !important;
    }

    .mobileDevices .games-container .table-title-container {
        padding: 10px !important;
    }

    .mobileDevices .games-container .poules-score-ctnr .poule-table {
        flex: 0 0 100% !important;
        width: 100% !important;
        font-size: 11px !important;
        padding:0px!important;
    }

    .mobileDevices .games-container .poules-score-ctnr{
        --poule-stat-col-width: 28px;
    }

    .mobileDevices .games-container .poules-score-ctnr .poule-table .img-fluid {
        width: 25px !important;
        height: 25px !important;
    }

    .mobileDevices .games-container .classement-item {
        margin-top: 0px !important;
        margin-bottom: 0px !important;
        padding-bottom: 0px !important;
    }

    .mobileDevices .games-container .tab-content{
        padding-left: 0px!important;
        padding-right: 0px!important;
    }

    .mobileDevices .teams_list_ctnr h1 {
        font-size: 18px !important;
        padding-bottom: 0px !important;
    }

    /*
    .mobileDevices .teams_list_ctnr td {
        display: block!important;
        width: 100%!important;
        box-sizing: border-box!important;
    }*/

    #scoreModal .button-container-GREEN,#scoreModal .button-container-RED{
            width: 175px;
    }
    #scoreModal .masquer-btn{
        padding: 5px 30px!important;
    }
    #scoreModal{
        zoom: 0.9;
    }
    #scoreModal .select-player-trigger{
        width: 22px!important;
        height: 22px!important;        
    }

    #scoreModal .form-control{
        padding-right: 0px!important;
    }

    .mobileDevices .tournoi-logo-ctnr{
        width: 100%!important;
        padding-bottom: 10px!important;
        margin-right: 10px;
    }
    .mobileDevices .tournoi-logo-ctnr img{
            width: 60px!important;
            height: 60px!important;
            object-fit: contain!important;
    }

    .mobileDevices .rounded-photo-uploader {
        width: 60px;
        height: 60px;
        margin-right: 10px !important;
    }
    .mobileDevices .sponsor-container h2{
        font-size: 22px !important;
    }

    .mobileDevices .sponsor-container img{
            width: 65%!important;
    }
    .mobileDevices .sponsor-container .sponsors-subtitle{
        font-size: 13px !important;
        font-weight: 600;
    }

    .mobileDevices .score_list_ctnr h1 {
        font-size: 1.3em !important;
        padding-bottom: 0px !important;
    }


    .mobileDevices .teams_list_ctnr .foot-logoball {
        flex-direction: row !important;
    }

    .mobileDevices .teams_list_ctnr .foot-logoball img {
        width: 35px !important;
        height: 35px !important;
    }

    .mobileDevices .teams_list_ctnr table {
        margin-bottom: 0px !important;
    }

    .mobileDevices .teams_list_ctnr tr {
        border-bottom: 0px !important;
    }

    .mobileDevices .teams_list_ctnr .foot-logoball .table-title {
        font-size: 15px !important;
        font-weight: 400;
    }

    .mobileDevices .teams_list_ctnr .foot-logoball span{
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
    }

    .mobileDevices .teams_list_ctnr .col-md-4 {
        width: 100% !important;
        padding: 0px !important;
    }
    .mobileDevices  .nav-item, .mobileDevices  .nav-link{
        text-align: center!important;
    }
    .mobileDevices .teams_list_ctnr .row {
        --bs-gutter-x: inherit !important;
        width: 100% !important;
        margin: auto !important;
        margin-top: 20px !important;
    }

    .mobileDevices .tab-content-games {
        padding-top: 20px;
    }

    .mobileDevices .tab-content-games .games-date h4 {
        font-size: 16px !important;
        margin-bottom: 10px !important;
    }

    .mobileDevices .match-tab-nav .form-select {
        font-size: 12px !important;
    }

    .mobileDevices .tab-content-games .game-item {
        flex: 0 1 100% !important;
        max-width: 100% !important;
        font-size: 12px !important;
        margin-bottom: 10px !important;
    }

    .mobileDevices .tab-content-games .game-item .match-status-text {
        font-size: 11px !important;
    }

    .mobileDevices .tab-content-games .game-item .img-fluid {
        width: 50px !important;
        height: 50px !important;
        max-height: 50px !important;
    }

    .mobileDevices ul.vue-ensemble-finales.nav.nav-tabs {
        width: fit-content !important;
    }

    .mobileDevices .no-classement-container {
        padding: 1em;
        width: 96% !important;
        margin-top: 50px !important;
    }

    .mobileDevices .no-classement-container .tab-content {
        padding: 0px !important;
    }

    .mobileDevices .no-classement-container .tab-content .tab-pane {
        padding: 0px !important;
    }

    .mobileDevices .no-classement-container .tab-content th span {
        font-size: 11px !important;
    }

    .mobileDevices .no-classement-container .tab-content div.d-flex {
        padding-top: 0px !important;
        padding-bottom: 0px !important;
    }

    .mobileDevices .no-classement-container .tab-content td {
        height: 35px !important;
        font-size: 13px !important;
    }

    .mobileDevices .no-classement-container .tab-content th div {
        height: 36px !important;
        width: 58px !important;
        font-size: 13px !important;
    }

    .mobileDevices .ranking-table {
        width: 100% !important;
    }

    .mobileDevices .classement-generale .ranking-table thead th:nth-child(1) {
        width: 50px !important;
    }

    .mobileDevices .classement-generale .ranking-table tbody th:nth-child(1) {
        width: 30px !important;
    }

    .mobileDevices .classement-container li.nav-item {
        font-size: 11px !important;
    }

    .mobileDevices  .tournoi-sponsors-list{
        top: inherit!important;
        position: inherit!important;
        width: 100%!important;
        margin: auto!important;
        margin-bottom: 20px !important;
    }

    .mobileDevices  .tournoi-sponsors-list img{
        height: 40px!important;
        width: auto!important;
    }

    .mobileDevices  .wrapper-reglements  a:first-child {
        left: -10px!important;
    }

    .mobileDevices  .wrapper-reglements  a:last-child {
        right: -10px!important;
    }


    .mobileDevices  .navbar-toggler, .mobileDevices .btn-home-f,.mobileDevices  .show-on-pc {
        display:none!important;
    }

    .mobileDevices .show-on-mobile{
        display: inherit;
    }

    .mobileDevices #share-tournoi{
        position: absolute;
        top: 5px;
        right: 5px;
    }

    .mobileDevices #sponsor-list{
            padding-top: 20px!important;
    }

    .mobileDevices .filter-classement-btn{
        width: max-content!important;
    }
    .mobileDevices .filter-classement-btn a{
        width: max-content!important;
        padding: 0px 10px!important;
        margin: auto!important;
    }
}

.header-img-ctnr{
position: relative;
}
.header-img-ctnr::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30%; /* Adjust for effect size */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, black 100%);
  pointer-events: none;
}

/* Custom styles for the bottom navigation */
.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: #026633;
    padding: 5px 0;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
}

.mobile-bottom-nav-container {
    width: 100%;
}

.mobile-bottom-nav-list {
    display: flex;
    justify-content: space-around;
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-bottom-nav-item {
    text-align: center;
}

.mobile-bottom-nav-link {
    color: white;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 11px;
    padding: 0px 10px;
    border-radius: 0px;
}

.mobile-bottom-nav-link i {
    font-size: 20px;
    margin-bottom: 0px;
}

.mobile-bottom-nav-link.active {
    background-color: rgba(0, 0, 0, 0.2);
}

/* Show only on mobile devices */
@media (max-width: 850px) {
    .mobile-bottom-nav {
        display: block;
    }

    /* RETIRE : `body { padding-bottom: calc(60px + encart) !important }`.

       Cette reserve accompagnait `.mobile-bottom-nav` mais visait `body` SANS
       CONDITION : elle s'appliquait donc a toutes les pages sous 850px, y
       compris celles qui n'ont aucune barre basse — /tournoi/new et ses etapes,
       /login, /register... 60px de vide en bas, et davantage sur iPhone depuis
       l'ajout de l'encart.

       Elle est devenue redondante : chaque page qui a REELLEMENT une barre
       porte l'une des deux classes marqueurs, qui posent la reserve exacte —
       `body.uft-bottom-nav` (76px, tournoi-equipes.css) ou
       `body.uft-tournoi-bottom-nav` (78px, home.css), encart compris.

       Verifie avant retrait : les 16 gabarits qui rendent une barre portent
       tous l'une des deux classes. `.mobile-bottom-nav` n'existe d'ailleurs
       plus dans aucun gabarit — la barre spectateur utilise desormais
       `.tournoi-bottom-nav`. */

    
}

/* Desktop only: les noms de terrain s'affichent sur plusieurs lignes si
   nécessaire (pas de troncature avec "..."). La cellule flex du header
   utilise déjà `min-width: 0` + `word-break: break-word` pour gérer le wrap
   sans déborder. Ancien comportement (ellipsis) retiré à la demande client
   qui préférait voir le nom de terrain en entier. */
@media (min-width: 851px) {
    .match-terrain-name,
    .match-terrain-name-finales {
        display: inline-block;
        max-width: 100%;
        overflow: visible;
        white-space: normal;
        word-break: break-word;
    }
}


/* ============================================================
   PAGE /tournoi/{id}/finales — OPTIMISATIONS MOBILE
   ============================================================
   Avant ce bloc : les colonnes (Quarts / Demis / Finales) prenaient
   col-12 = 100% du viewport et s'enfilaient avec flex-wrap:nowrap
   forcé par .scrollable-row → l'utilisateur ne voyait qu'UNE seule
   colonne à la fois et devait scroller horizontalement sans indice
   qu'il y avait la suite. Les titres + cartes débordaient aussi.

   Strategie RETENUE (revision) : EMPILEMENT VERTICAL. Chaque phase prend
   toute la largeur et se place sous la precedente. Le defilement horizontal
   precedent (colonnes a 85vw) a ete abandonne : il obligeait a deviner
   l'existence des phases suivantes.

   Le contenu de ces phases est genere par JavaScript (public/js/finales.js) :
   AUCUNE accroche ne peut etre ajoutee dans le template, tout passe par les
   classes produites par le JS. On ne touche donc pas au JS, uniquement au CSS.

   Trois regles de global.css doivent etre surchargees pour desactiver le
   defilement horizontal, toutes portees par `.scrollable-row` (classe posee
   sur le meme element que `.phase-finale-item`, cf. finales.js) :
     .scrollable-row .row            -> flex-wrap:nowrap; overflow-x:auto!;
                                        white-space:nowrap!
     .scrollable-row .row>.col-lg-4  -> display:inline-block!; max-width:33.333%
   D'ou les `!important` ci-dessous : sans eux les colonnes restent en ligne.

   Aucune regle desktop n'est alteree. */
@media (max-width: 991px) {

    /* Chaque phase (Quarts / Demis / Finales) prend toute la largeur.
       `display` et `max-width` en `!important` : global.css impose
       `display: inline-block !important` et `max-width: 33.333%` sur
       `.scrollable-row .row > .col-lg-4`. */
    .phase-finale-item .f-phase-item.custom-col {
        display: block !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100%;
        padding-left: 12px !important;
        padding-right: 12px !important;
        margin-bottom: 28px;
    }

    .phase-finale-item .f-phase-item.custom-col:last-child {
        margin-bottom: 0;
    }

    /* Row interne : on autorise le retour a la ligne et on coupe le
       defilement horizontal. `white-space` doit etre remis a `normal` :
       global.css le force a `nowrap !important`, ce qui empecherait les
       libelles des cartes de match de revenir a la ligne. */
    .phase-finale-item > .row {
        flex-wrap: wrap !important;
        overflow-x: visible !important;
        white-space: normal !important;
    }

    /* Titre "Phases finales #1" : trop gros à 2.5em sur mobile */
    .phase-finale-item .title-size,
    .phase-finale-item .final-item-name {
        font-size: 1.4rem !important;
        line-height: 1.2;
    }

    /* Sous-titres "Quarts", "Demis", "Finales" : on adoucit */
    .phase-finale-item .f-phase-item > h2 {
        font-size: 1.1rem;
        margin-bottom: 0.6rem;
    }

    /* Cartes de match : remplir la largeur dispo, autoriser le wrap
       du nom d'équipe + numéro de match pour éviter l'overflow */
    .phase-finale-item .card-finales {
        width: 100%;
    }
    .phase-finale-item .card-finales .card-header {
        padding: 0.4rem 0.6rem;
        flex-wrap: wrap;
    }
    .phase-finale-item .card-finales .card-header > span {
        font-size: 0.78rem;
        white-space: normal;
        word-break: break-word;
    }
    .phase-finale-item .card-finales .card-body {
        padding: 0.6rem;
    }
    .phase-finale-item .card-finales .ph-f-team-item {
        font-size: 0.85rem;
        white-space: normal;
        word-break: break-word;
    }

    /* Le séparateur vertical .custom-col::after est déjà masqué via une
       règle existante <=991px (.custom-col:not(:last-child)::after).
       Rien à faire ici. */

    /* En-tête "Phases finales #N" + bouton crayon : laisser respirer */
    .phase-finale-item .ph-title-ctnr {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .phase-finale-item .ph-title-ctnr .pen-edit-btn {
        margin-left: 0.5rem !important;
        margin-right: 0.5rem !important;
    }

    /* Boutons de bas de page (ajouter phase finale) : pleine largeur */
    .ph-footer-btns .col-12 {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }
}


/* ============================================================
   PAGE /tournoi/{id}/matches — OPTIMISATIONS MOBILE
   ============================================================
   Avant : la row d'une journée affichait 2 colonnes côte à côte
   (terrains 75% + matchs à plannifier 25%) via style inline. Sur
   mobile, la colonne 25% était illisible (filtres + liste écrasés).

   On stack verticalement les 2 colonnes en pleine largeur, et on
   transforme la section "Matchs à plannifier" en accordéon
   collapsible avec un bouton toggle visible uniquement <=991px.

   AUCUNE règle ne s'applique sur desktop (>= 992px). */
@media (max-width: 991px) {

    /* Stack vertical : terrains au-dessus, planification en dessous */
    .matches-day-row {
        flex-direction: column !important;
        gap: 1rem !important;
    }

    /* Les 2 colonnes prennent toute la largeur (override les styles inline
       width: 75% et width: 25%) */
    .matches-terrains-col,
    .matches-plan-col {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Section "Matchs à plannifier" : contenu collapsible (hidden par
       défaut sur mobile, montré quand .mobile-expanded est posée par JS) */
    .plan-section-mobile-wrapper .plan-section-content {
        display: none;
    }
    .plan-section-mobile-wrapper.mobile-expanded .plan-section-content {
        display: block;
    }

    /* Animation de l'icône chevron (rotation 180° quand ouvert) */
    .plan-section-toggle-icon {
        transition: transform .2s ease;
    }
    .plan-section-mobile-wrapper.mobile-expanded .plan-section-toggle-icon {
        transform: rotate(180deg);
    }
}

/* ============================================================
   EN-TÊTE MOBILE — RÈGLES COMMUNES À TOUTES LES PAGES
   ============================================================
   Ces règles s'appliquent partout où `Components/header_logged_out.html.twig`
   est rendu, c'est-à-dire sur l'ensemble du site : l'en-tête mobile doit être
   identique d'une page à l'autre.

   Seuil 850px : c'est déjà celui utilisé plus haut dans ce fichier pour tout
   le reste de l'en-tête mobile (`.mobileDevices .top-bar-logo`,
   `.mobileDevices .navbar.navbar-expand-lg.fixed-top.bg-white`, masquage du
   `.navbar-toggler` et de `.top-nav-info`). On reste cohérent.

   Le DESKTOP n'est pas concerné : tout est enfermé dans le media query.
   ------------------------------------------------------------ */

/* Libellé court du sélecteur de langue (FR / EN).
   Masqué par défaut -> en desktop, c'est « Français » / « English » qui
   s'affiche, exactement comme avant. */
.lang-label-short {
    display: none;
}

@media (max-width: 850px) {

    /* --- Bloc utilisateur (nom + menu « Coach » + pastille d'initiales) ---
       Masqué en mobile : il occupait toute la largeur de la barre à côté du
       logo. La classe est posée sur le bloc INTERNE et non sur le `.text-end`
       parent, car celui-ci contient aussi, dans la branche `{% else %}`, le
       bouton « Connecte toi ! » des visiteurs non connectés — lui doit rester
       visible en mobile. */
    .header-user-block {
        display: none !important;
    }

    /* --- Bouton « Connecte toi ! » ---
       Masque en mobile lui aussi : la barre se limite au logo et au selecteur
       de langue. L'acces a la connexion reste assure par le menu hamburger, et
       par les pages qui redirigent d'elles-memes un visiteur anonyme. */
    .top-bar-login-btn {
        display: none !important;
    }

    /* --- Sélecteur de langue : ramené DANS la barre ---
       AVANT : styles inline `position: absolute; top: 100%; width: 100px`
       -> l'encart blanc pendait SOUS la barre, par-dessus le contenu, avec le
       libellé long. (La règle `.dropdown-language { top: 54px !important }`
       du bloc <=970px plus haut ne faisait que le décaler, pas le rentrer.)

       ATTENTION — NE JAMAIS le passer en `position: static` :
       ce bloc n'est PAS un enfant de `.container-fluid` (qui se ferme avant
       lui), c'est un enfant DIRECT de `<nav class="navbar">`. Or `.navbar` est
       en `display: flex; flex-wrap: wrap` et `.container-fluid` fait
       `width: 100%` : remis dans le flux, le sélecteur passe forcément à la
       ligne suivante. La barre dépasse alors la hauteur du spacer
       `.fixed-heade-holder` (54px), le sélecteur se retrouve sous la barre
       par-dessus le contenu, et son menu s'ouvre à côté de la plaque.

       `.navbar.fixed-top` étant en `position: fixed`, c'est lui le bloc
       conteneur des enfants absolus : `top`/`right` se calent donc sur la barre.
       `right: 12px` = la moitié de `--bs-gutter-x`, soit exactement le padding
       latéral de `.container-fluid` -> aligné sur le bord du logo.

       Les styles inline visés ne sont pas `!important`, un `!important` en
       feuille suffit à les surcharger. Seul `padding: 5px !important` (inline,
       donc prioritaire même sur nos `!important`) reste — la valeur convient. */
    .dropdown-language {
        position: absolute !important;
        /* ZONE SURE iOS. `top: 0` se cale sur le bord de la BOITE DE PADDING de
           la barre, pas sur son contenu. Depuis que l'en-tete porte un
           `padding-top` pour l'encoche, cette boite commence plus haut : le
           selecteur s'etirait donc jusque sous l'encoche et se centrait sur une
           hauteur qui n'etait plus celle du logo.
           En repartant de l'encart, il couvre exactement la meme bande que le
           logo et retrouve son alignement. Vaut 0 hors iOS. */
        top: var(--uft-safe-top, 0px) !important;
        bottom: 0 !important;
        right: 12px !important;
        left: auto !important;
        width: auto !important;
        /* Centre verticalement le bouton sur la hauteur réelle de la barre,
           sans valeur en dur et sans `transform` (qui perturberait le placement
           Popper du menu). `!important` requis : `d-inline-block` du markup est
           une utilitaire Bootstrap, elle-même en !important. */
        display: flex !important;
        align-items: center;
        z-index: 1031;
    }

    .dropdown-language > .btn {
        width: auto !important;
        -webkit-clip-path: none !important;
        clip-path: none !important;
        font-size: 13px;
        white-space: nowrap;
    }

    .dropdown-language > .btn img {
        margin-right: 5px !important;
    }

    /* Bascule vers le libellé court */
    .lang-label-full {
        display: none;
    }

    .lang-label-short {
        display: inline;
    }

    /* Le menu déroulant n'est volontairement PAS surchargé : Bootstrap le place
       via Popper, qui écrit un `transform` en style inline. Forcer top/right ici
       s'ajouterait à ce transform au lieu de le remplacer -> menu décalé.
       Le bouton étant correctement positionné, Popper l'ancre tout seul. */
}


/* ============================================================
   CARTE TOURNOI — VERSION MOBILE (.show-on-mobile)
   ============================================================
   Accompagne la refonte du bloc `.show-on-mobile` de
   Components/tournoi/header.html.twig : logo à gauche, puis titre, date,
   adresse et la ligne Format / Catégorie / Prix.

   Ces règles vivent ici et NON dans une feuille de page, parce que le markup
   est partagé par toutes les pages tournoi (equipes, poules, finales,
   matches, accueil…). Les scoper à une seule page laisserait les autres avec
   le nouveau markup et l'ancien style.

   Le desktop n'est pas concerné : `.show-on-mobile` est en `display: none`
   par défaut et n'apparaît qu'en dessous de 850px (cf. plus haut dans ce
   fichier), où `.show-on-pc` est symétriquement masqué.
   ------------------------------------------------------------ */
@media (max-width: 850px) {

    /* Largeur pleine et léger décalage, demandés côté maquette.
       `.container-topSection` est en `position: relative` (fix/style.css),
       `left` s'applique donc bien. Sélecteur combiné avec `.show-on-mobile`
       pour ne jamais toucher le bloc desktop, qui porte la même classe. */
    .mobileDevices .container-topSection.show-on-mobile {
        width: 100% !important;
        left: -5px !important;
        margin: 0 !important;
        padding: 14px 16px !important;
    }

    .mobileDevices .show-on-mobile .tournoi-card-m {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 20px;
        width: 100%;
        min-width: 0;
    }

    /* Logo : la colonne est calee sur la taille REELLE de l'image, pas plus.
       Piege : plus haut dans ce fichier, le bloc <=850px force deja
       `.mobileDevices .tournoi-logo-ctnr img { width: 60px !important }`.
       Un `!important` bat la specificite, donc l'image fait 60px quoi qu'on
       ecrive ici sans `!important` — une colonne de 84px laissait 24px de vide,
       plus les 10px de `margin-right` du meme bloc. On aligne donc la colonne
       sur 60px et on neutralise cette marge : ~34px rendus aux details, sans
       toucher a la taille du logo.
       Les dimensions de l'image sont redeclarees ici en `!important` pour que
       colonne et image restent synchronisees si l'une des deux evolue. */
    .mobileDevices .show-on-mobile .tournoi-card-m-logo {
        flex: 0 0 60px;
        max-width: 60px;
        width: 60px !important;
        margin-right: 0 !important;
        padding-bottom: 0 !important;
    }

    .mobileDevices .show-on-mobile .tournoi-card-m-logo img {
        width: 60px !important;
        height: 60px !important;
        object-fit: contain !important;
    }

    /* `min-width: 0` : sans lui, un titre long empêche la colonne de se
       compresser et pousse la carte hors de l'écran. */
    .mobileDevices .show-on-mobile .tournoi-card-m-body {
        flex: 1 1 auto;
        min-width: 0;
    }

    .mobileDevices .show-on-mobile .tournoi-card-m-title {
        font-size: 19px !important;
        line-height: 1.15;
        margin-bottom: 2px;
        word-break: break-word;
    }

    /* Etoile "mettre en favori" : `.favorite-toggle` vaut 29px avec 20px de
       marge (global.css), calibre pour le titre desktop. A cote d'un titre de
       19px et dans une colonne deja etroite, elle passait devant le nom du
       tournoi et le poussait a la ligne. */
    .mobileDevices .show-on-mobile .tournoi-card-m-title .favorite-toggle {
        font-size: 16px;
        margin-left: 8px;
        vertical-align: middle;
    }

    .mobileDevices .show-on-mobile .tournoi-card-m-date {
        display: block;
        font-size: 12px !important;
        margin-bottom: 6px;
    }

    /* Adresse : icône + libellé gris + valeur en gras, sur une ligne qui peut
       revenir à la ligne sans désaligner l'icône. */
    /* PAS de flex ici, volontairement : un simple bloc de texte.
       En flex, icone / libelle / valeur sont trois BOITES distinctes — la
       valeur se replie alors dans sa propre colonne, et les lignes suivantes
       s'alignent sous son point de depart, pas sous le debut de la ligne.
       En flux texte normal, l'ensemble se comporte comme une seule phrase :
       quand l'adresse est trop longue, la suite repart du bord gauche du bloc.
       L'icone reste un element inline en tete de cette phrase. */
    .mobileDevices .show-on-mobile .tournoi-card-m-adress {
        display: block;
        font-size: 12px;
        line-height: 1.35;
        margin-bottom: 8px;
    }

    .mobileDevices .show-on-mobile .tournoi-card-m-adress img {
        width: 15px;
        height: auto;
        margin-right: 4px;
        vertical-align: -2px;
    }

    .mobileDevices .show-on-mobile .tournoi-card-m-adress-label {
        color: #82829B;
        font-weight: 400;
        white-space: nowrap;
    }

    .mobileDevices .show-on-mobile .tournoi-card-m-adress-value,
    .mobileDevices .show-on-mobile .tournoi-card-m-adress-value a {
        color: #373759;
        font-weight: 700;
        font-style: italic;
        text-decoration: none;
        word-break: break-word;
    }

    /* Format / Catégorie / Prix : trois colonnes réparties sur la largeur. */
    .mobileDevices .show-on-mobile .tournoi-card-m-stats {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        gap: 8px;
        width: 100%;
        margin: 0;
    }

    .mobileDevices .show-on-mobile .tournoi-card-m-stat {
        flex: 0 1 auto;
        min-width: 0;
    }

    .mobileDevices .show-on-mobile .tournoi-card-m-stat p {
        font-size: 11px !important;
        line-height: 1.2;
        white-space: nowrap;
    }

    .mobileDevices .show-on-mobile .tournoi-card-m-stat span {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 12px !important;
        font-style: italic;
        white-space: nowrap;
    }

    .mobileDevices .show-on-mobile .tournoi-card-m-stat img {
        width: 14px;
        height: auto;
        flex: 0 0 auto;
    }

    /* Bouton de partage, en haut à droite de la carte. Les styles inline
       d'origine ont été retirés du markup, tout est ici. */
    .mobileDevices .show-on-mobile .tournoi-card-m-share {
        position: absolute;
        top: 10px;
        right: 14px;
        width: 34px;
        height: 34px;
        background-image: url(/img/Share.png);
        background-size: 77px;
        background-position: -25px -26px;
        border-radius: 100%;
        cursor: pointer;
        z-index: 2;
    }
}

/* ============================================================
   MODAL DE SÉLECTION D'ÉQUIPES (#modal-clubs-select) — MOBILE
   ============================================================
   Ce modal est inclus par plusieurs pages : les règles sont donc scopées sur
   son ID et non sur une classe de page, pour qu'il se comporte partout pareil.

   Rien n'est retiré du markup, aucun sélecteur JS n'est touché. Accroches à
   préserver si ce bloc évolue :
     #selected-clubs-list, .uft-club-search-result-item, .remove-selected-club,
     #club-serach-result-list, .uft-club-search-club-count (affichée / masquée
     par tournoi.js via .show() / .hide()), #ck_plusieurs_equipes, .club-number,
     .nbr-club-custom-count-ctnr, #btn-add-club-to-tournoi,
     #btn-add-club-to-tournoi-close, #btn-save-club-to-tournoi.

   On ne déclare volontairement AUCUN `display` sur `.uft-club-search-club-count` :
   jQuery le pilote en style inline, une règle ici serait soit ignorée, soit en
   conflit avec le JS.
   ------------------------------------------------------------ */

/* --- Panneau « PLUSIEURS ÉQUIPES » : largeur fluide -------------------------
   Il porte `width: 450px` en dur, en style inline — plus large qu'un écran de
   390px : le panneau débordait des deux côtés et ses boutons sortaient de
   l'écran. `min()` le rend fluide SANS rien changer au-dessus de ~490px de
   large : sur desktop il vaut toujours 450px. La règle est donc volontairement
   hors media query, pour corriger le débordement à toutes les tailles.
   Ce panneau n'a pas de classe propre, d'où le sélecteur par structure. */
#modal-clubs-select .uft-club-search-club-count > .col-md-12 > .row {
    width: min(92vw, 450px) !important;
    max-width: 92vw !important;
}

@media (max-width: 767.98px) {

    /* Voile de fond : géométrie calée en pixels durs
       (`width: calc(100% + 55px)`, `top: calc(0px - 100px)`…), il ne couvrait
       donc pas correctement. Le panneau qu'il accompagne étant déjà en
       `position: fixed`, on le passe en fixed plein écran. */
    #modal-clubs-select .uft-club-search-club-count {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        padding: 16px !important;
    }

    /* Panneau centré et défilable, au lieu du `top: 250px` fixe qui le faisait
       sortir de l'écran dès que le contenu grandissait. */
    #modal-clubs-select .uft-club-search-club-count > .col-md-12 > .row {
        top: 50% !important;
        max-height: 88vh;
        overflow-y: auto;
        padding: 14px !important;
        left: calc(50% + 5px)!important;
    }

    /* Boutons « Sélectionner » / « Fermer » : deux `col-md-6` qui s'empilaient,
       l'un en `text-align: right` et l'autre en `left` (inline) — donc décalés
       en sens inverse une fois l'un sous l'autre. */
    #modal-clubs-select .uft-club-search-club-count .row.mt-5 {
        flex-wrap: nowrap;
        margin-top: 1.25rem !important;
        gap: 0px;
    }
    #btn-add-club-to-tournoi{
        background-image: none!important;
    }

    #modal-clubs-select .uft-club-search-club-count .row.mt-5 > .col-md-6 {
        width: auto;
        flex: 1 1 0;
        min-width: 0;
        text-align: center !important;
    }

    /* `.uft-btn-arrow` dessine la fleche en IMAGE DE FOND, a
       `background-position: calc(100% - 15px) center` et 11px de large : elle
       occupe donc les 26 derniers pixels du bouton. Avec seulement 8px de
       padding a droite, le libelle centre venait se poser dessus.
       On reserve ces 26px des deux cotes pour garder le texte centre. */
    #modal-clubs-select .uft-club-search-club-count .row.mt-5 .btn {
        width: 100%;
        margin: 0 !important;
        font-size: 11px !important;
        padding: 10px 26px;
        white-space: nowrap;
        background-size: 9px;
    }

    /* Carte « PLUSIEURS ÉQUIPES » : largeurs 80% / 20% en inline — 20% ne
       suffisent pas à l'interrupteur sur un panneau étroit. */
    #modal-clubs-select .tournoi-options-ctnr {
        padding: 12px !important;
        align-items: center;
    }

    #modal-clubs-select .tournoi-options-ctnr > div:first-of-type {
        width: auto !important;
        flex: 1 1 auto;
        min-width: 0;
    }

    #modal-clubs-select .tournoi-options-ctnr > div:last-of-type {
        width: auto !important;
        flex: 0 0 auto;
        padding-left: 10px;
    }

    /* --- Corps du modal --------------------------------------------------- */

    /* `padding: 1em` + découpes de 35px aux 4 coins : calibré desktop, énorme
       sur une largeur de téléphone. */
    #modal-clubs-select .modal-content {
        padding: 0.6em !important;
        -webkit-clip-path: polygon(18px 0, 100% 0, 100% 18px, 100% 100%, calc(100% - 18px) 100%, 18px 100%, 0 100%, 0 18px);
        clip-path: polygon(18px 0, 100% 0, 100% 18px, 100% 100%, calc(100% - 18px) 100%, 18px 100%, 0 100%, 0 18px);
    }

    #modal-clubs-select .modal-body {
        padding: 12px 8px;
    }

    #modal-clubs-select .uft-title-h5 {
        font-size: 14px;
        line-height: 1.3;
        margin-bottom: 1.25rem !important;
    }

    /* Zone de résultats : 20px de padding de chaque côté, dans une zone déjà
       limitée en hauteur. */
    #modal-clubs-select #club-serach-result-list {
        padding: 8px !important;
        max-height: 46vh !important;
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }

    /* Cartes de résultat : `height: 150px` fixe, inutile une fois la carte
       redimensionnée. */
    #modal-clubs-select .uft-club-search-result-item {
        height: auto !important;
        padding: 10px 12px !important;
        margin-bottom: 10px !important;
    }

    #modal-clubs-select .uft-club-search-result-item span {
        font-size: 12px !important;
        line-height: 1.25;
    }

    /* --- Résultats de recherche : 3 par ligne ------------------------------
       Le JS génère chaque résultat dans un `.col-md-3` : sous 768px cette
       classe ne définit plus rien, et `.row > *` de Bootstrap les met en
       pleine largeur, soit un seul résultat par ligne.
       Le bloc « Nous n'avons pas trouvé votre équipe » n'a PAS de classe
       `col-*` : ce sélecteur ne le touche pas, il garde toute la largeur. */
    #modal-clubs-select #club-serach-result-list > .col-md-3 {
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
        padding-left: 4px;
        padding-right: 4px;
    }

    /* Hauteur FIXE : sans elle, une carte dont le nom tient sur une ligne est
       plus courte que sa voisine sur deux lignes, et la grille se désaligne
       ligne après ligne. On fige la hauteur et on passe la carte en colonne
       flex pour que logo et nom restent centrés quel que soit le contenu.
       92px = 16 (padding) + 44 (logo) + 4 (marge) + ~24 (2 lignes de nom). */
    #modal-clubs-select #club-serach-result-list .uft-club-search-result-item {
        height: 92px !important;
        padding: 8px 4px !important;
        margin-bottom: 6px !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        overflow: hidden;
    }

    /* Le logo fait 80px par défaut, plus large que la colonne à 3 par ligne. */
    #modal-clubs-select #club-serach-result-list .uft-club-search-result-item img {
        width: 44px !important;
        height: 44px !important;
        object-fit: contain;
    }

    /* Nom du club : doit pouvoir se couper, sinon un nom long fait déborder
       sa colonne. */
    /* Nom limité à 2 lignes avec points de suspension : c'est ce qui garantit
       que la hauteur fixe ci-dessus suffit toujours, même pour un nom long. */
    #modal-clubs-select #club-serach-result-list .uft-club-search-result-name {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 10px !important;
        line-height: 1.2;
        word-break: break-word;
        margin-top: 4px;
        width: 100%;
    }

    /* Liste des équipes déjà sélectionnées : logo un peu réduit, la carte y
       est en flex (logo + texte côte à côte) et reste à 2 par ligne. */
    #modal-clubs-select #selected-clubs-list .uft-club-search-result-item {
        padding: 10px 12px !important;
    }

    #modal-clubs-select #selected-clubs-list .uft-club-search-result-item img {
        width: 38px !important;
        height: 38px !important;
    }

    /* Équipes déjà sélectionnées : 2 par ligne plutôt qu'une. */
    #modal-clubs-select #selected-clubs-list > .col-md-4 {
        flex: 0 0 50%;
        max-width: 50%;
        padding-left: 5px;
        padding-right: 5px;
    }

    /* Champs de recherche. 16px : en dessous, iOS Safari zoome au focus. */
    #modal-clubs-select .uft-input-text {
        height: 38px;
        padding: 4px 12px;
        font-size: 16px;
    }

    /* EXCEPTION — champ PAYS (#club_add_country).
       Il est pilote par countrySelect, qui l'enveloppe dans `.country-select
       .inside` et reserve 52px a gauche pour le drapeau :
           .country-select.inside input { padding-right: 6px; padding-left: 52px }
       Le raccourci `padding` ci-dessus ecrase cette valeur — ma regle porte un
       ID (1,1,0), elle bat donc la specificite du plugin (0,2,1) — et le
       drapeau se retrouvait par-dessus le texte saisi.
       On restitue les valeurs exactes du plugin. Le selecteur exige le wrapper
       `.country-select`, qui n'existe qu'une fois countrySelect initialise :
       aucun effet si le plugin ne tourne pas. */
    #modal-clubs-select .country-select input.uft-input-text {
        padding-left: 52px;
        padding-right: 6px;
    }

    #modal-clubs-select .uft-input-label {
        font-size: 11px;
        line-height: 16px;
        margin-bottom: 4px;
        background-size: 14px auto;
    }

    #modal-clubs-select .uft-input-label.uft-pdl-30 {
        padding-left: 20px;
    }

    #modal-clubs-select .form-group {
        margin-bottom: 0.75rem !important;
    }

    /* Pastilles 1 / 2 / 3 / 4 / PERSONNALISÉ : mêmes `10px 30px` calibrés
       desktop que sur /tournoi/new. */
    #modal-clubs-select .uft-ck-item {
        margin-right: 6px;
        clip-path: polygon(0 10px, 10px 0, 100% 0, 100% 100%, 100% 100%, 0 100%);
    }

    #modal-clubs-select .uft-ck-item label {
        padding: 6px 12px;
        font-size: 11px;
    }

    #modal-clubs-select .poul-bl-title {
        font-size: 13px;
    }

    /* Bouton final « Enregistrer & fermer » : `margin-left: 20px` en inline. */
    #modal-clubs-select #btn-save-club-to-tournoi {
        width: 100%;
        margin-left: 0 !important;
        font-size: 12px !important;
        padding: 11px 14px;
    }
}

/* ============================================================
   MODAL DE CONFIRMATION (#modal-paid-team-action-confirm) — MOBILE
   ============================================================
   Les boutons « Annuler » / « Oui, confirmer » sont dans un conteneur
   `.d-flex.justify-content-end` : cales a droite, ils laissent tout le vide a
   gauche sur un modal etroit. On les centre en mobile.

   `justify-content-end` est une utilitaire Bootstrap en `!important` : il faut
   donc `!important` ici aussi, et c'est la specificite (1 id + 2 classes) qui
   departage.

   `flex-wrap: wrap` + `row-gap` : filet de securite pour les tres petits
   ecrans, ou les deux libelles ne tiennent pas cote a cote — ils passent alors
   l'un sous l'autre au lieu de deborder.
   ------------------------------------------------------------ */
@media (max-width: 767.98px) {

    #modal-paid-team-action-confirm .d-flex.justify-content-end {
        justify-content: center !important;
        flex-wrap: wrap;
        row-gap: 10px;
    }

    #modal-paid-team-action-confirm .d-flex.justify-content-end .btn {
        padding: 10px 18px !important;
        font-size: 12px;
    }

    #modal-paid-team-action-confirm .modal-body {
        padding: 1rem !important;
    }
}

/* ============================================================
   MODAL « LISTE DES ÉQUIPE(S) EN ATTENTE » (#exampleModal1) — MOBILE
   ============================================================
   Ouvert par #show-modal-invitation (qui n'est que le déclencheur : le modal
   lui-même porte l'id #exampleModal1).

   Les cartes sont injectées par tournoi.js -> renderTeams(), dans
   `#team-list`, avec les classes `col-12 col-md-6 col-lg-4` : en mobile,
   `col-12` les met à UNE par ligne, avec un logo de 80px et jusqu'à cinq
   lignes de texte. Sur une liste paginée, ça imposait un défilement
   considérable pour parcourir une seule page.

   Aucun markup n'est touché : renderTeams() reste inchangé, tout se fait ici.
   Les tailles posées en style inline par le JS (logo 80x80) demandent donc
   `!important`.
   ------------------------------------------------------------ */
@media (max-width: 767.98px) {

    /* Deux cartes par ligne : divise par deux la hauteur de la page. */
    #exampleModal1 #team-list > .col-12 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* Gouttière `g-3` (1rem) resserrée : à deux colonnes sur 390px, chaque
       point gagné compte. */
    #exampleModal1 #team-list.g-3 {
        --bs-gutter-x: 0.5rem;
        --bs-gutter-y: 0.5rem;
    }

    /* Carte : `p-3` est une utilitaire Bootstrap en !important. */
    #exampleModal1 #team-list .equipe-shild-container {
        padding: 10px 8px !important;
    }

    /* Logo : 80x80 posé en style inline par le JS. */
    #exampleModal1 #team-list .equipe-shild-container img {
        width: 52px !important;
        height: 52px !important;
    }

    /* Nom de l'équipe : doit pouvoir se couper, sinon un nom long déborde de
       sa colonne. */
    #exampleModal1 #team-list .equipe-subname {
        font-size: 12px !important;
        line-height: 1.2;
        word-break: break-word;
    }

    /* Catégorie, coach, téléphone. */
    #exampleModal1 #team-list .small {
        font-size: 10px !important;
        line-height: 1.25;
    }

    #exampleModal1 #team-list .small .bi {
        font-size: 11px;
    }

    /* Bouton « Ajouter » / badge « Paiement en attente » : `px-3 py-2` sont
       des utilitaires en !important. */
    #exampleModal1 #team-list .btn,
    #exampleModal1 #team-list .badge {
        font-size: 10px !important;
        padding: 7px 10px !important;
        white-space: nowrap;
    }

    /* Badge « xN équipes » en surimpression : `m-2` le décalait trop sur une
       carte deux fois plus étroite. */
    #exampleModal1 #team-list .badge.position-absolute {
        margin: 4px !important;
        font-size: 9px !important;
        padding: 3px 5px !important;
    }

    /* --- Chrome du modal -------------------------------------------------- */

    #exampleModal1 .modal-body.p-4 {
        padding: 1rem !important;
    }

    #exampleModal1 .modal-title {
        font-size: 1rem !important;
        line-height: 1.25;
    }

    #exampleModal1 .modal-header {
        padding: 0.75rem 1rem;
    }

    /* Pagination : `px-4` de part et d'autre du compteur, plus deux boutons —
       trop large une fois le modal à la largeur d'un téléphone. */
    #exampleModal1 #team-list-pagination {
        margin-top: 1rem !important;
    }

    #exampleModal1 #team-list-pagination .btn {
        padding: 6px 12px !important;
    }

    #exampleModal1 #page-info {
        font-size: 11px !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    /* État vide : `py-5` + icône de 3rem, disproportionnés en mobile. */
    #exampleModal1 #team-list-empty {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    #exampleModal1 #team-list-empty .bi {
        font-size: 2rem !important;
    }

    #exampleModal1 #team-list-empty p {
        font-size: 0.9rem !important;
    }
}

/* ============================================================
   MODALS « MODIFICATION » / « RENOMMER LE GROUPE » — MOBILE
   (#tournoi-modal-poules et #tournoi-modal-rename-poules)
   ============================================================
   Les deux sont jumeaux : le premier ouvre le second (bouton « Modifier »).
   On les traite ensemble pour qu'ils restent cohérents.

   Rien n'est retiré du markup, aucun sélecteur JS touché. Accroches lues par
   tournoi.js à préserver : #tournoi-modal-poules[default-poule-equipes],
   #btn-save-poule, #btn-save-name-poule, #nom_phase_poule,
   #clubs_custom_count, .clubs-custom-count-ctnr, les
   `input[name="phase_poule[nombre_equipes]"]`.
   ------------------------------------------------------------ */
@media (max-width: 767.98px) {

    /* `padding: 1em` + découpes de 35px aux 4 coins (fix/style.css) :
       calibré desktop, disproportionné sur une largeur de téléphone. */
    #tournoi-modal-poules .modal-content,
    #tournoi-modal-rename-poules .modal-content {
        padding: 0.6em !important;
        -webkit-clip-path: polygon(18px 0, 100% 0, 100% 18px, 100% 100%, calc(100% - 18px) 100%, 18px 100%, 0 100%, 0 18px);
        clip-path: polygon(18px 0, 100% 0, 100% 18px, 100% 100%, calc(100% - 18px) 100%, 18px 100%, 0 100%, 0 18px);
    }

    #tournoi-modal-poules .modal-body,
    #tournoi-modal-rename-poules .modal-body {
        padding: 10px 8px;
    }

    #tournoi-modal-poules .modal-header,
    #tournoi-modal-rename-poules .modal-header {
        padding: 6px 8px;
    }

    #tournoi-modal-poules .uft-title-h5,
    #tournoi-modal-rename-poules .uft-title-h5 {
        font-size: 15px;
        margin-bottom: 1rem !important;
    }

    /* `mt-5` = 3rem entre chaque bloc : sur un modal court, ça pousse le
       bouton de validation hors de l'écran sans raison. */
    #tournoi-modal-poules .row.mt-5,
    #tournoi-modal-rename-poules .row.mt-5 {
        margin-top: 1.25rem !important;
    }

    #tournoi-modal-poules .form-group.mb-4,
    #tournoi-modal-rename-poules .form-group.mb-4 {
        margin-bottom: 1rem !important;
    }

    /* Logo + pastille d'upload : le conteneur est en `width: 100px` inline,
       la pastille positionnée en pourcentage — on réduit les deux ensemble
       pour que la caméra reste centrée sous le logo. */
    #tournoi-modal-poules .modal-body > .row > .col-md-12 > div[style*="width: 100px"] {
        width: 74px !important;
    }

    #tournoi-modal-poules .modal-body > .row > .col-md-12 > div[style*="width: 100px"] > img:first-child {
        width: 74px !important;
    }

    #tournoi-modal-poules .modal-body > .row > .col-md-12 > div[style*="width: 100px"] > img:last-child {
        width: 24px !important;
        top: calc(100% - 16px) !important;
        left: calc(50% - 12px) !important;
    }

    /* Libellés de champ (« NOM DU GROUPE », « NOMBRE D'ÉQUIPES ») : ils sont
       en `display: flex` inline avec une icône de 20px. */
    #tournoi-modal-poules .uft-input-label,
    #tournoi-modal-rename-poules .uft-input-label {
        font-size: 11px;
        line-height: 16px;
    }

    #tournoi-modal-poules .uft-input-label img,
    #tournoi-modal-rename-poules .uft-input-label img {
        width: 15px !important;
        flex: 0 0 auto;
    }

    /* Pastilles 4 / 5 / 6 / 8 / PERSONNALISÉ : `.md-check label` vaut
       `7px 18px`, « PERSONNALISÉ » débordait donc de la ligne. */
    #tournoi-modal-poules .uft-ck-item.md-check label {
        padding: 6px 12px;
        font-size: 11px;
    }

    #tournoi-modal-poules .uft-ck-item {
        margin-right: 6px;
    }

    /* Champs de saisie. 16px : en dessous, iOS Safari zoome au focus. */
    #tournoi-modal-poules .uft-input-text,
    #tournoi-modal-rename-poules .uft-input-text {
        height: 38px;
        padding: 4px 12px;
        font-size: 16px;
    }

    /* Boutons « Modifier » et « Valider ».
       `.uft-btn-arrow` dessine sa flèche en image de fond à
       `calc(100% - 15px)` sur 11px : elle occupe les 26 derniers pixels. Le
       padding droit doit donc rester au-dessus de cette valeur, sinon le
       libellé passe dessous. Le `padding: 10px 37px` inline du bouton
       « Modifier » impose un `!important`. */
    #tournoi-modal-poules .btn.uft-btn-arrow,
    #tournoi-modal-rename-poules .btn.uft-btn-arrow {
        font-size: 12px !important;
        padding: 10px 30px !important;
        background-size: 9px;
        white-space: nowrap;
    }
}

/* ============================================================
   MODAL « SÉLECTIONNEZ L'ÉQUIPE » (#modal-clubs-select-for-poule) — MOBILE
   ============================================================
   Ouvert depuis /poules pour affecter une équipe à un groupe.

   ATTENTION : ce modal utilise `id="selected-clubs-list"`, le MÊME id que
   modal-clubs-select.html.twig. Les deux ne sont jamais inclus sur la même
   page (l'un vient de /poules, l'autre de /equipes), mais toutes les règles
   ci-dessous sont préfixées par l'id du modal — sans quoi elles fuiteraient
   sur l'autre liste, qui a une mise en page très différente.

   Accroches JS à préserver : .selected-clubs-list-item[attr-club-id]
   [attr-tournoi-club-id], .assign-club-to-tournoi-poule[attr-*],
   #poules-no-clubs.
   ------------------------------------------------------------ */
@media (max-width: 767.98px) {

    #modal-clubs-select-for-poule .modal-content {
        padding: 0.6em !important;
        -webkit-clip-path: polygon(18px 0, 100% 0, 100% 18px, 100% 100%, calc(100% - 18px) 100%, 18px 100%, 0 100%, 0 18px);
        clip-path: polygon(18px 0, 100% 0, 100% 18px, 100% 100%, calc(100% - 18px) 100%, 18px 100%, 0 100%, 0 18px);
    }

    #modal-clubs-select-for-poule .modal-body {
        padding: 10px 8px;
    }

    #modal-clubs-select-for-poule .modal-header {
        padding: 6px 8px;
    }

    #modal-clubs-select-for-poule .uft-title-h5 {
        font-size: 15px;
        margin-bottom: 1rem !important;
    }

    /* La liste porte `padding: 20px` et `mt-5` (3rem) en plus : 40px de
       largeur perdus et un grand vide au-dessus, sur un modal déjà étroit. */
    #modal-clubs-select-for-poule #selected-clubs-list {
        padding: 10px !important;
        max-height: 50vh !important;
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }

    /* Ligne d'équipe : logo + nom + bouton en flex.
       `min-width: 0` sur le nom est le point clé — sans lui, un nom d'équipe
       long refuse de se compresser sous sa largeur min-content et POUSSE le
       bouton « Sélectionner » hors du modal. */
    #modal-clubs-select-for-poule .selected-clubs-list-item {
        margin-bottom: 8px !important;
    }

    #modal-clubs-select-for-poule .selected-clubs-list-item img {
        width: 32px !important;
        height: 32px !important;
        flex: 0 0 auto;
    }

    #modal-clubs-select-for-poule .selected-clubs-list-item strong {
        min-width: 0;
        font-size: 12px;
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-left: 8px !important;
        margin-right: 8px !important;
    }

    /* Bouton « Sélectionner » : padding et taille posés en style inline, d'où
       les `!important`. On garde >= 26px à droite, largeur occupée par la
       flèche de `.uft-btn-arrow` (image de fond a calc(100% - 15px), 11px). */
    #modal-clubs-select-for-poule .assign-club-to-tournoi-poule {
        flex: 0 0 auto;
        font-size: 10px !important;
        padding: 7px 28px 7px 10px !important;
        background-size: 9px;
        white-space: nowrap;
    }

    #modal-clubs-select-for-poule #poules-no-clubs {
        font-size: 12px;
        line-height: 1.35;
    }

    /* Bouton « Fermer » */
    #modal-clubs-select-for-poule .text-center > .btn {
        font-size: 12px !important;
        padding: 10px 30px !important;
        background-size: 9px;
    }
}

/* ============================================================
   BOUTON DE FERMETURE (×) DES PAGES TOURNOI — MOBILE
   ============================================================
   `.tournoi-close-ctnr` / `.tournoi-close-btn` sont des classes propres à ce
   projet, posées uniquement sur les pages de configuration d'un tournoi
   (equipes, poules, finales). La règle est donc volontairement NON scopée à
   une page : le markup n'existant nulle part ailleurs, elle ne peut rien
   affecter d'autre, et une page de plus n'a qu'à poser les deux classes.

   Des règles identiques existent déjà, scopées, dans tournoi-equipes.css et
   tournoi-poules.css. Elles sont laissées en place : mêmes valeurs, donc
   aucun conflit — et les retirer aurait touché du code déjà validé.

   Masqué par défaut -> invisible en desktop.
   ------------------------------------------------------------ */
.tournoi-close-ctnr {
    position: relative;
}

.tournoi-close-btn {
    display: none;
}

@media (max-width: 850px) {

    .tournoi-close-ctnr {
        position: absolute;
        z-index: 5;
    }

    .tournoi-close-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        margin-top: 14px;
        /* Même rouge que les boutons RETOUR du parcours de création */
        background-color: #C72520;
        color: #ffffff;
        text-decoration: none;
        border-radius: 3px;
        font-size: 15px;
        line-height: 1;
        position: relative;
        z-index: 3;
    }

    .tournoi-close-btn:hover,
    .tournoi-close-btn:focus {
        color: #ffffff;
        opacity: 0.85;
    }
}

/* ============================================================
   PAGE /tournoi/{id}/finales — HABILLAGE MOBILE (complement)
   ============================================================
   Complete le bloc « PAGE /tournoi/{id}/finales » plus haut, qui traite
   l'empilement vertical des phases. Ici : boutons de la page et finition des
   cartes de match.

   Scope `body.uft-finales-page` pour tout ce qui touche a des classes
   partagees (`.masquer-btn`, `.ph-footer-btns`...). Les regles visant des
   classes generees par finales.js et propres a cette page
   (`.phase-finale-item`, `.card-finales`...) restent dans le bloc precedent.

   Le contenu des phases etant genere par JavaScript, AUCUNE accroche ne peut
   etre ajoutee dans le template : on ne cible que les classes produites par
   finales.js, et le JS n'est pas touche.
   ------------------------------------------------------------ */
@media (max-width: 991.98px) {

    /* --- Boutons du haut : « REMPLISSAGE AUTOMATIQUE » / « RETIRER LES
       EQUIPES » ------------------------------------------------------------
       Meme traitement que les deux boutons de pied de page : une seule ligne,
       50 / 50, et la typographie du bouton de reference
       (`#add_phase_finale_btn`) — Futura Std, droit, graisse 700, 12px,
       padding 11/14. Les quatre boutons de la page se ressemblent donc.

       C'etaient des `inline-block` dans un conteneur en `text-align: center` :
       s'ils ne tenaient pas sur une ligne, chacune se centrait independamment
       et leurs bords gauches ne coincidaient plus (effet d'escalier).

       Points a ne pas manquer :
         - `white-space: normal` : les libelles sont longs et DOIVENT pouvoir
           se replier sur une demi-largeur, sinon ils debordent.
         - `padding` en `!important` : `uft-btn-pd-10-35` pose `10px 35px`, ce
           qui ne laisserait presque rien au texte.
         - `font-*` en `!important` pour le meme motif : ces boutons heritent de
           `.btn-green-elec-md-*` (Roboto, italique, 900, 19px) et de
           `uft-btn-md` (12px).
         - `align-items: flex-start` : chaque bouton garde la hauteur que lui
           donne son padding, on ne les egalise pas. */
    body.uft-finales-page .finales-top-actions {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 18px !important;
        padding: 0;
    }

    body.uft-finales-page .finales-top-actions .btn {
        flex: 0 0 calc(50% - 5px);
        max-width: calc(50% - 5px);
        width: calc(50% - 5px);
        margin: 0 !important;
        padding: 11px 14px !important;
        font-family: 'Futura Std', sans-serif !important;
        font-style: normal !important;
        font-weight: 700 !important;
        font-size: 12px !important;
        text-align: center;
        white-space: normal;
    }

    /* Dans le DOM, « RETIRER LES EQUIPES » vient en premier ; la maquette met
       « REMPLISSAGE AUTOMATIQUE » a gauche. `order` suffit, sans toucher au
       markup ni au desktop. */
    body.uft-finales-page #auto-fill-phases-finales {
        order: 1;
    }

    body.uft-finales-page #auto-empty-phases-finales {
        order: 2;
    }

    /* --- « AJOUTER UNE PHASE FINALE » -------------------------------------
       `.masquer-btn` pose `padding: 12px 30px` et une decoupe dont le premier
       sommet est a 20% : sur un bouton large, ce biseau devient enorme. On le
       ramene a une valeur en pixels, independante de la largeur.
       (Le pendant desktop des marges du bouton voisin est en fin de ce bloc.)

       CE BOUTON EST LA REFERENCE : sa taille et sa police servent de modele au
       bouton « passer a l'etape suivante » ci-dessous. Ne rien changer ici sans
       verifier l'autre. */
    body.uft-finales-page #add_phase_finale_btn {
        font-size: 12px;
        padding: 11px 14px;
        -webkit-clip-path: polygon(20px 0, 100% 0, 100% 20%, 100% 60%, calc(100% - 20px) 100%, 20px 100%, 0 100%, 0 0);
        clip-path: polygon(20px 0, 100% 0, 100% 20%, 100% 60%, calc(100% - 20px) 100%, 20px 100%, 0 100%, 0 0);
    }

    /* --- ETAT DE LA LISTE DES PHASES FINALES -------------------------------
       `#phases_list_ctnr` est rempli par finales.js apres un appel a
       /phases-finales-details/{id}/load. Avant la reponse, et quand le tournoi
       n'a aucune phase, la zone etait entierement vide : rien ne distinguait
       « ca charge » de « il n'y a rien ».

       UNE SEULE boite pour les deux cas, comme demande : meme fond, meme
       cadre, meme typographie. Seul le texte change, pilote par l'attribut
       `data-state` que pose le script en bas du template.

       Le bloc porte `d-lg-none` dans le markup : au-dessus de 992px il n'est
       pas rendu du tout, le desktop est intact. */
    body.uft-finales-page .finales-empty-state {
        display: block;
        margin: 0 0 18px 0;
        padding: 18px 14px;
        border: 1px dashed rgba(255, 255, 255, 0.35);
        background-color: rgba(255, 255, 255, 0.06);
        color: #ffffff;
        font-family: 'Futura Std', sans-serif;
        font-size: 12px;
        font-weight: 700;
        line-height: 1.45;
        text-align: center;
        text-transform: uppercase;
        letter-spacing: .3px;
    }

    /* Une phase existe : la boite n'a plus lieu d'etre. */
    body.uft-finales-page .finales-empty-state[data-state="hidden"] {
        display: none;
    }

    /* Un seul des deux libelles a la fois. Ils sont tous deux dans le DOM :
       basculer un attribut evite de reecrire du texte en JavaScript, et le
       `aria-live` du conteneur annonce le changement aux lecteurs d'ecran. */
    body.uft-finales-page .finales-empty-state[data-state="loading"] .finales-empty-state-empty,
    body.uft-finales-page .finales-empty-state[data-state="empty"] .finales-empty-state-loading {
        display: none;
    }

    /* Le seul ecart entre les deux etats : un battement discret pendant le
       chargement, pour que l'attente se distingue d'un ecran fige. */
    body.uft-finales-page .finales-empty-state[data-state="loading"] {
        animation: uft-finales-pulse 1.4s ease-in-out infinite;
    }

    /* --- LES DEUX BOUTONS SUR UNE SEULE LIGNE, 50 / 50 --------------------
       Ils vivent dans DEUX `.row` distinctes, empilees l'une sous l'autre.
       Plutot que de toucher au markup, on transforme leur parent commun
       `.ph-footer-btns` en rangee flex : chaque `.row` devient une moitie.

       `align-items: flex-start` et non l'etirement par defaut : chaque bouton
       garde EXACTEMENT la hauteur qu'il avait, dictee par son propre padding.
       Les egaliser les aurait tous les deux allonges. */
    body.uft-finales-page .ph-footer-btns {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    body.uft-finales-page .ph-footer-btns > .row {
        --bs-gutter-x: 0;
        --bs-gutter-y: 0;
        flex: 0 0 calc(50% - 5px);
        max-width: calc(50% - 5px);
        margin: 0;
    }

    /* Les colonnes portent des marges en style inline (`margin: auto` d'un
       cote, `40px` haut et bas de l'autre) et un `text-align: right`, calibres
       pour un empilement. Cote a cote, ils decalent les deux moities l'une par
       rapport a l'autre — d'ou les `!important`. */
    body.uft-finales-page .ph-footer-btns > .row > [class*="col-"] {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
        padding: 0 !important;
        margin: 0 !important;
        text-align: center !important;
    }

    /* --- « PASSER A L'ETAPE SUIVANTE » ------------------------------------
       Seul ce bouton est aligne sur l'autre ; l'autre n'est pas touche.

       Il herite de `.btn-green-elec-md-active` : Roboto, italique, graisse 900,
       19px. Le bouton de reference, lui, ne definit aucune police — il tombe
       sur le Manrope du `body`, en droit, et son libelle est enveloppe dans un
       `<span class="fw-bold">`, donc en graisse 700. On reprend ces valeurs.

       `white-space` repasse a `normal` : sur une demi-largeur, « PASSER A
       L'ETAPE SUIVANTE » ne tient pas sur une ligne et doit pouvoir se replier.

       `padding-left` plus genereux que les 14px de la reference : c'est la
       place occupee par l'icone « + » que `uft-btn-plus-start` dessine en image
       de fond a 15px du bord. Sans elle, le libelle passerait dessus. */
    body.uft-finales-page #save_phase_finales {
        width: 100%;
        margin: 0 !important;
        /* Alignement sur le libelle du bouton de reference : Futura Std, en
           droit, graisse 700 (son `<span class="fw-bold">`). Ces trois valeurs
           remplacent le Roboto / italique / 900 que
           `.btn-green-elec-md-active` impose. */
        font-family: 'Futura Std', sans-serif;
        font-style: normal;
        font-weight: 700;
        font-size: 12px !important;
        /* Exactement le padding du bouton de reference, sur les quatre cotes. */
        padding: 11px 14px 11px 14px;
        /* Sur une demi-largeur, le libelle ne tient pas sur une ligne. */
        white-space: normal;
    }

    /* La colonne du bouton portait `margin: 40px 0` en style inline AVEC
       `!important`. Une declaration importante de l'attribut style bat TOUTE
       declaration de feuille de style, meme importante : il etait donc
       impossible de la retirer en mobile. Elle a ete sortie du template et
       reproduite ci-dessous pour le desktop uniquement.

       En mobile, la marge n'est plus posee du tout — c'est le but. */
    body.uft-finales-page .ph-footer-btns > .row > .col-md-12 {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

}

/* ------------------------------------------------------------
   /finales — MARGES DESKTOP DU BOUTON « PASSER A L'ETAPE SUIVANTE »
   ------------------------------------------------------------
   Ces 40px vivaient en style inline sur la colonne du bouton, avec
   `!important` — donc impossibles a annuler en mobile depuis une feuille de
   style. Sorties du template et restituees ici a l'identique, mais bornees au
   desktop : le rendu au-dessus de 992px est strictement le meme qu'avant.
   ------------------------------------------------------------ */
@media (min-width: 992px) {

    body.uft-finales-page .ph-footer-btns > .row > .col-md-12 {
        margin-top: 40px !important;
        margin-bottom: 40px !important;
    }
}

@media (max-width: 991.98px) {

    /* --- Cartes de match --------------------------------------------------
       `px-5` (3rem de chaque cote) est pose par finales.js sur chaque colonne
       de phase ; le bloc precedent le ramene deja a 12px. Ici on finit la
       carte elle-meme. */
    .phase-finale-item .card-finales .card-header {
        gap: 6px;
    }

    /* « Match 1 » et « PLACES: 1-8 » sont deux <span> dans le meme libelle :
       on les espace pour qu'ils se lisent comme deux informations. */
    .phase-finale-item .ph-f-place-number {
        margin-left: 8px;
        font-weight: 600;
    }

    /* Lignes d'equipe (« A DEFINIR », « GAGNANT MATCH 1 »...).
       `mb-4` (1.5rem) entre les deux lignes d'une carte est trop genereux une
       fois la carte compactee. */
    .phase-finale-item .ph-f-team-holder.mb-4 {
        margin-bottom: 0.75rem !important;
    }

    .phase-finale-item .ph-f-team-item {
        min-width: 0;
        word-break: break-word;
        padding-right: 6px;
    }

    /* Boutons crayon : 30x30 en style inline, d'ou les `!important`. */
    .phase-finale-item .icon-btn-pen {
        width: 26px !important;
        height: 26px !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .phase-finale-item .icon-btn-pen .bi {
        font-size: 12px;
    }

    .phase-finale-item .pen-edit-btn {
        flex: 0 0 auto;
    }
}

/* ============================================================
   MODALS DE LA PAGE /tournoi/{id}/finales — MOBILE
   ============================================================
   Six modals, tous déclarés dans finales.html.twig et ouverts par finales.js.
   Deux familles :

     A. formulaire  — #addPhaseFinaleModalNew (ajout d'une phase depuis une
                      phase de poule), #modalRenamePhaseFinale (renommer /
                      changer la qualification), #addPhaseFinaleModal (ajout
                      simple + option aller/retour)
     B. confirmation — #modalConfirmAddEditPhaseFinale, #ModalUnlockFinalMatch,
                      #ModalConfirmAutoFill : un titre et deux boutons NON/OUI

   Tout est préfixé par l'id du modal : ces règles ne peuvent pas fuir sur les
   autres pages, et le markup de la page (très sensible, piloté par finales.js)
   n'est pas touché.

   Accroches JS à préserver : #add_phase_finale_ph_poules,
   #phase_finale_phase_to_add, #submit_add_new_phase, #editing_input_phase_name,
   .phase_finale_edit_phases_list, #update-phase-name, #add_match_retour_check,
   .confirm-edit-delete-ph-finale, .confirm-final-match-unlock,
   .confirm-final-autofill.
   ------------------------------------------------------------ */
@media (max-width: 767.98px) {

    /* --- A. Modals de formulaire ---------------------------------------- */

    /* `.modal-content` (fix/style.css) : `padding: 1em` + découpes de 35px aux
       quatre coins. Calibré desktop ; sur une largeur de téléphone le biseau
       mange le contenu. Même valeur que les modals de /poules : 18px. */
    #addPhaseFinaleModalNew .modal-content,
    #modalRenamePhaseFinale .modal-content,
    #addPhaseFinaleModal .modal-content {
        padding: 0.6em !important;
        -webkit-clip-path: polygon(18px 0, 100% 0, 100% 18px, 100% 100%, calc(100% - 18px) 100%, 18px 100%, 0 100%, 0 18px);
        clip-path: polygon(18px 0, 100% 0, 100% 18px, 100% 100%, calc(100% - 18px) 100%, 18px 100%, 0 100%, 0 18px);
    }

    #addPhaseFinaleModalNew .modal-header,
    #modalRenamePhaseFinale .modal-header,
    #addPhaseFinaleModal .modal-header {
        padding: 4px 6px 0 6px;
    }

    #addPhaseFinaleModalNew .modal-body,
    #modalRenamePhaseFinale .modal-body,
    #addPhaseFinaleModal .modal-body {
        padding: 6px 8px 12px 8px;
    }

    /* Libellés (« PHASE DE POULE », « QUALIFICATION », « MODIFIER LE NOM »...) */
    #addPhaseFinaleModalNew .form-label,
    #modalRenamePhaseFinale .form-label,
    #addPhaseFinaleModal .form-label {
        font-size: 11px;
        line-height: 15px;
        margin-bottom: 0.35rem;
    }

    /* Champs. 16px est un plancher : en dessous, iOS Safari zoome au focus. */
    #addPhaseFinaleModalNew .form-select,
    #addPhaseFinaleModalNew .form-control,
    #modalRenamePhaseFinale .form-select,
    #modalRenamePhaseFinale .form-control,
    #addPhaseFinaleModal .form-select {
        height: 38px;
        padding: 4px 30px 4px 12px;
        font-size: 16px;
    }

    #addPhaseFinaleModalNew .mb-3,
    #modalRenamePhaseFinale .mb-3,
    #addPhaseFinaleModal .mb-3 {
        margin-bottom: 0.75rem !important;
    }

    /* Bloc « ACTIVER LES MATCHES ALLER/RETOUR » (#addPhaseFinaleModal).
       `width: 80%` est en style inline, d'où le `!important` : sur mobile la
       ligne devient trop étroite pour le libellé et l'interrupteur.
       `.polygon-div-bottom` découpe 35px en bas à droite — réduit à 18px pour
       ne pas rogner l'interrupteur. */
    #addPhaseFinaleModal .button-border-primary {
        width: 100% !important;
    }

    #addPhaseFinaleModal .polygon-div-bottom {
        -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
    }

    #addPhaseFinaleModal .button-container-primary h5 {
        font-size: 11px;
        line-height: 14px;
        margin-bottom: 0;
    }

    /* La colonne de l'interrupteur est un `col-2` : trop étroite pour le
       `padding-left: 2.5em` que Bootstrap pose sur `.form-check.form-switch`.
       On annule ce padding et on laisse l'input se placer seul. */
    #addPhaseFinaleModal .form-check.form-switch {
        padding-left: 0;
        display: flex;
        justify-content: flex-end;
    }

    #addPhaseFinaleModal .form-check.form-switch .form-check-input {
        margin-left: 0;
        float: none;
    }

    /* Bouton « VALIDER ». `mt-5` = 3rem, inutile une fois le modal compacté.
       `font-size: 1em` est en style inline sur les deux boutons, d'où le
       `!important`. La découpe de `.polygon-btn-bottom` est en pixels (15px),
       elle reste correcte à cette taille. */
    #addPhaseFinaleModalNew #submit_add_new_phase,
    #modalRenamePhaseFinale #update-phase-name,
    #addPhaseFinaleModal #submit_add_new_phase {
        margin-top: 1.25rem !important;
        font-size: 12px !important;
        padding: 10px 26px;
        white-space: nowrap;
    }

    /* --- B. Modals de confirmation -------------------------------------- */

    /* `width: 70%; margin: auto` est posé en style inline sur `.modal-content`
       (d'où les `!important`) : 70% d'une boîte déjà étroite, le titre se
       retrouve sur huit lignes et les boutons NON/OUI ne tiennent plus. */
    #modalConfirmAddEditPhaseFinale .modal-content,
    #ModalUnlockFinalMatch .modal-content,
    #ModalConfirmAutoFill .modal-content {
        width: 100% !important;
        padding: 0.6em !important;
        -webkit-clip-path: polygon(18px 0, 100% 0, 100% 18px, 100% 100%, calc(100% - 18px) 100%, 18px 100%, 0 100%, 0 18px);
        clip-path: polygon(18px 0, 100% 0, 100% 18px, 100% 100%, calc(100% - 18px) 100%, 18px 100%, 0 100%, 0 18px);
    }

    #modalConfirmAddEditPhaseFinale .modal-body,
    #ModalUnlockFinalMatch .modal-body,
    #ModalConfirmAutoFill .modal-body {
        padding: 12px 10px;
    }

    /* Ces trois modals n'ont pas de bouton de fermeture : le texte est le seul
       contenu, il doit rester lisible sans occuper tout l'écran. */
    #modalConfirmAddEditPhaseFinale .modal-body h4,
    #ModalUnlockFinalMatch .modal-body h4,
    #ModalConfirmAutoFill .modal-body h4 {
        font-size: 14px;
        line-height: 1.35;
        margin-bottom: 0;
    }

    /* Rangée NON / OUI : `gap-4` (1.5rem) sur deux boutons en `w-100`, ça
       laisse trop peu de place au libellé une fois le padding compté. */
    #modalConfirmAddEditPhaseFinale .modal-body > .d-flex.flex-row,
    #ModalUnlockFinalMatch .modal-body > .d-flex.flex-row,
    #ModalConfirmAutoFill .modal-body > .d-flex.flex-row {
        gap: 10px !important;
        margin-top: 1rem !important;
    }

    #modalConfirmAddEditPhaseFinale .modal-body > .d-flex.flex-row > .btn,
    #ModalUnlockFinalMatch .modal-body > .d-flex.flex-row > .btn,
    #ModalConfirmAutoFill .modal-body > .d-flex.flex-row > .btn {
        font-size: 12px !important;
        padding: 10px 8px;
        white-space: nowrap;
    }
}

/* Battement du bloc d'attente de /finales (cf. `.finales-empty-state`). */
@keyframes uft-finales-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}

/* ============================================================
   PAGES TOURNOI — BANDEAU D'ACTIONS DE L'EN-TETE
   ============================================================
   `.tournoi-header-actions` vit dans Components/tournoi/header.html.twig, seul
   endroit du site ou ce markup existe. Les regles qui le visent sont donc
   volontairement NON scopees a une page : elles ne peuvent rien atteindre
   d'autre, et couvrent d'un coup les neuf pages tournoi — les cinq publiques
   (/accueil, /score, /games, /games-finales, /classement) comme les quatre de
   configuration (/equipes, /poules, /finales, /matches), qui affichent le meme
   bandeau et avaient donc le meme defaut.

   Les regles des BOUTONS DE BAS DE PAGE, plus bas, restent scopees a
   `body.uft-tournoi-public-page` : les pages de configuration ont deja leurs
   propres barres de boutons, traitees ailleurs.

   Il porte « APERCU » ou « CONFIGURATION » et « DEPUBLIER LE TOURNOI », et
   n'apparait que pour le proprietaire du tournoi.

   PROBLEME : son positionnement est en style inline, calibre pour le desktop —
   `position: absolute` a `top: -23vh`, remonte donc d'une fraction de la
   HAUTEUR DE L'ECRAN. Sur un telephone, il passait sous le bouton de fermeture
   (`.tournoi-close-ctnr`) et sortait de la zone visible.

   Les declarations inline n'ayant pas de `!important`, une declaration
   importante de feuille de style suffit a les surcharger.
   ------------------------------------------------------------ */
@media (max-width: 991.98px) {

    /* Retour dans le flux : plus de `absolute`, plus de valeur en `vh`. Le
       decalage de -38px suffit a le remonter contre l'en-tete sans mordre sur
       le bouton de fermeture. */
    .tournoi-header-actions {
        position: relative !important;
        top: -38px !important;
        left: auto !important;
        width: 100% !important;
        display: flex !important;
        gap: 10px;
    }

    /* Les deux boutons reprennent EXACTEMENT l'habillage des deux boutons du
       haut de /poules (tournoi-poules.css, section 8) : 50 / 50, Futura Std,
       droit, graisse 700, 12px, padding 11/14.

       Valeurs recopiees plutot que partagees : les regles de /poules sont
       scopees a `body.uft-poules-page`, les elargir toucherait cette page-la.
       Toute retouche est donc a reporter des deux cotes.

       Les `!important` ne sont pas decoratifs : `.sub-container-dw`
       (fix/style.css:206) impose `width: 100%`, `padding: 12px 30px` et
       `font-size: 1em`, et le markup ajoute `width: auto` et
       `margin-right: 20px` en style inline. */
    .tournoi-header-actions .sub-container-dw {
        flex: 0 0 calc(50% - 5px);
        max-width: calc(50% - 5px);
        width: calc(50% - 5px) !important;
        margin: 0 !important;
        padding: 11px 14px !important;
        font-family: 'Futura Std', sans-serif !important;
        font-style: normal !important;
        font-weight: 700 !important;
        font-size: 12px !important;
        line-height: 1.2;
        align-items: center;
        justify-content: center;
        text-align: center;
        white-space: normal;
    }

    /* `.sub-container-dw` est en `display: flex` avec `gap: 0.5em` : l'icone
       et le libelle sont deux items. On empeche l'icone de partir sur sa
       propre ligne quand le libelle se replie. */
    .tournoi-header-actions .sub-container-dw .bi {
        flex: 0 0 auto;
        font-size: 12px;
    }

    /* --- BOUTONS DE BAS DE PAGE -------------------------------------------
       « PRECEDENT », « PUBLIER »... Ils vivent dans une rangee centree
       `div.mb-5.d-flex.justify-content-center`, notamment dans
       tournoi_details/games-finales-navigation.html.twig.

       Meme habillage que les deux boutons de l'en-tete ci-dessus, donc que ceux
       du haut de /poules : Futura Std, droit, graisse 700, 12px, padding 11/14.

       Le selecteur exige `.btn.polygon-btn-bottom` en ENFANT DIRECT de cette
       rangee : les boutons des modals de ces memes pages portent la meme classe
       `polygon-btn-bottom` mais vivent dans une rangee differente
       (`.mt-5.w-100.d-flex.flex-row.gap-4`), ils ne sont donc pas touches.

       `flex: 1 1 0` avec un plafond a la moitie : deux boutons se partagent la
       ligne, un bouton seul occupe la moitie et reste centre par le
       `justify-content: center` du conteneur. */
    body.uft-tournoi-public-page .mb-5.d-flex.justify-content-center {
        gap: 10px;
        align-items: flex-start;
    }

    body.uft-tournoi-public-page .mb-5.d-flex.justify-content-center > .btn.polygon-btn-bottom {
        flex: 1 1 0;
        min-width: 0;
        max-width: calc(50% - 5px);
        /* `margin-right: 20px` est pose en style inline sur « PRECEDENT ». */
        margin: 0 !important;
        padding: 11px 14px !important;
        font-family: 'Futura Std', sans-serif !important;
        font-style: normal !important;
        font-weight: 700 !important;
        font-size: 12px !important;
        line-height: 1.2;
        justify-content: center;
        text-align: center;
        white-space: normal;
    }

    body.uft-tournoi-public-page .mb-5.d-flex.justify-content-center > .btn.polygon-btn-bottom .bi {
        flex: 0 0 auto;
        font-size: 12px;
    }
}

/* ============================================================
   /accueil — DEBORDEMENT HORIZONTAL DU CARROUSEL D'INFOS
   ============================================================
   `.first-carousel-CONTAINER` n'existe que dans acceuil_tournoi.html.twig et
   acceuil_tournoi_edit.html.twig : la regle ne peut donc pas fuir ailleurs.

   Les fleches du carrousel sont en `position: absolute` avec `left: -22px` et
   `right: -22px` (fix/style.css:519) : elles depassent volontairement de leur
   conteneur. En desktop le `.container` est etroit et centre, la marge suffit.
   En mobile il occupe toute la largeur — la fleche de droite sortait donc de
   l'ecran et rendait le DOCUMENT plus large que la fenetre.

   CONSEQUENCE, et c'est la partie contre-intuitive : un debordement horizontal
   desynchronise la fenetre de mise en page et la fenetre visible. Les elements
   en `position: fixed` s'ancrent sur la premiere — l'en-tete et la barre de
   navigation basse semblaient donc se decaler ou disparaitre au defilement,
   alors qu'ils n'avaient pas bouge (`getBoundingClientRect` les donnait
   toujours a `top: 0`).

   On ramene donc les fleches a l'interieur, plutot que de masquer le
   debordement : le carrousel garde son defilement propre, porte par
   `.carousel` lui-meme (`overflow-x: auto`).
   ------------------------------------------------------------ */
@media (max-width: 991.98px) {

    .first-carousel-CONTAINER {
        max-width: 100%;
        /* `clip` et non `hidden` : `hidden` forcerait `overflow-y` a `auto` et
           creerait un conteneur de defilement parasite. */
        overflow-x: clip;
    }

    .first-carousel-CONTAINER .wrapper a:first-child {
        left: 0;
    }

    .first-carousel-CONTAINER .wrapper a:last-child {
        right: 0;
    }
}

/* ============================================================
   /accueil — BOUTONS « ACCEDER / QR CODE / PLANNING PDF »
   ============================================================
   `.qr-tournoi-main-ctnr` n'existe que dans acceuil_tournoi_edit.html.twig.

   Trois boutons dans un conteneur `display: flex` SANS `flex-wrap` : ils ne
   peuvent pas revenir a la ligne. Avec le `padding: 12px 30px` de
   `.sub-container-dw`, leur largeur cumulee depasse largement un ecran de
   telephone — ils sortaient donc de la page.

   D'ou le symptome constate sur cette page : un debordement horizontal
   desynchronise la fenetre de mise en page et la fenetre visible. Les elements
   en `position: fixed` s'ancrent sur la premiere, si bien que l'en-tete et la
   barre de navigation basse semblaient disparaitre au defilement alors qu'ils
   n'avaient pas bouge.

   Le `width: 80%` du conteneur et le `w-auto` des boutons sont poses l'un en
   style inline, l'autre par un utilitaire Bootstrap `!important` : les deux
   demandent une declaration importante pour etre surcharges.

   Habillage aligne sur les autres boutons des pages tournoi : Futura Std,
   droit, graisse 700, 12px, padding 11/14.
   ------------------------------------------------------------ */
@media (max-width: 991.98px) {

    .qr-tournoi-main-ctnr {
        width: 100% !important;
        max-width: 100% !important;
        flex-wrap: wrap;
        gap: 10px !important;
        justify-content: center !important;
    }

    /* Chaque bouton est enveloppe dans un `<div class="d-flex ...">` : c'est
       lui, et non le bouton, qui est l'element flex a dimensionner.
       Deux par ligne ; le troisieme se centre seul en dessous. */
    .qr-tournoi-main-ctnr > div {
        flex: 0 0 calc(50% - 5px);
        max-width: calc(50% - 5px);
        min-width: 0;
    }

    .qr-tournoi-main-ctnr .sub-container-dw {
        width: 100% !important;
        padding: 11px 14px !important;
        font-family: 'Futura Std', sans-serif !important;
        font-style: normal !important;
        font-weight: 700 !important;
        font-size: 12px !important;
        line-height: 1.2;
        align-items: center;
        justify-content: center;
        text-align: center;
        white-space: normal;
    }

    /* `.sub-container-dw` est en `display: flex` avec `gap: 0.5em` : l'icone et
       le libelle sont deux items. On empeche l'icone de partir sur sa propre
       ligne quand le libelle se replie. */
    .qr-tournoi-main-ctnr .sub-container-dw img {
        flex: 0 0 auto;
        padding-left: 0 !important;
    }
}

/* ============================================================
   MODAL « QR CODE DU TOURNOI » (#ModalCodeQR) — MOBILE
   ============================================================
   Le corps est bati en DEUX COLONNES : le QR a gauche, le lien a copier et le
   bouton de telechargement a droite. Calibre pour un ecran large — sur
   telephone, une image de 200px et un champ de saisie se partageaient la meme
   ligne, chacun ecrase.

   On empile : le QR sur sa propre ligne, souligne d'un filet, puis le reste en
   dessous.

   Le markup n'est pas touche : la bascule se fait en passant la rangee en
   colonne. Le rendu desktop est inchange, tout est borne a 767.98px.
   ------------------------------------------------------------ */
@media (max-width: 767.98px) {

    /* `.modal-content` (fix/style.css) : `padding: 1em` + decoupes de 35px aux
       quatre coins. Meme valeur que les autres modals traites : 18px. */
    #ModalCodeQR .modal-content {
        padding: 0.6em !important;
        -webkit-clip-path: polygon(18px 0, 100% 0, 100% 18px, 100% 100%, calc(100% - 18px) 100%, 18px 100%, 0 100%, 0 18px);
        clip-path: polygon(18px 0, 100% 0, 100% 18px, 100% 100%, calc(100% - 18px) 100%, 18px 100%, 0 100%, 0 18px);
    }

    #ModalCodeQR .modal-header {
        padding: 4px 6px 8px 6px;
    }

    #ModalCodeQR .modal-header h4 {
        font-size: 15px;
        line-height: 1.3;
    }

    #ModalCodeQR .modal-body {
        padding: 8px;
    }

    /* La rangee des deux colonnes passe en pile. `gap-5` (3rem) devient inutile
       une fois empile : c'est le filet qui separe. */
    #ModalCodeQR .modal-body .d-flex.flex-row {
        /* `!important` OBLIGATOIRE : les utilitaires Bootstrap sont tous
           declares importants — `.flex-row { flex-direction: row !important }`.
           Sans lui, la rangee restait horizontale quelle que soit la
           specificite du selecteur. */
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
    }

    /* Colonne du QR : pleine largeur, soulignee d'un filet. */
    #ModalCodeQR .modal-body .d-flex.flex-row > div:first-child {
        width: 100%;
        padding-bottom: 14px;
        margin-bottom: 14px;
        border-bottom: 1px solid #E3E3E8;
    }

    #ModalCodeQR .modal-body h6 {
        font-size: 11px;
        margin-bottom: 6px !important;
    }

    /* 200px sur un ecran de 360px moins les paddings : trop juste. */
    #ModalCodeQR .qr-ctnr img {
        width: 150px !important;
        height: auto;
    }

    /* Colonne de droite, desormais en dessous. */
    #ModalCodeQR .modal-body .d-flex.flex-row > div:last-child {
        width: 100%;
    }

    #ModalCodeQR .form-label {
        font-size: 11px;
        margin-bottom: 0.35rem;
    }

    /* 16px est un plancher sur un champ de saisie : en dessous, iOS Safari
       zoome au focus — meme sur un champ en lecture seule. */
    #ModalCodeQR .form-control {
        height: 38px;
        padding: 4px 10px;
        font-size: 16px;
    }

    #ModalCodeQR #copy-tournoi-link-btn {
        padding: 4px 12px;
    }

    /* Bouton de telechargement : meme habillage que les autres boutons des
       pages tournoi. `w-auto` est un utilitaire Bootstrap `!important`, d'ou la
       surcharge importante. */
    #ModalCodeQR .sub-container-dw {
        width: 100% !important;
        padding: 11px 14px !important;
        font-family: 'Futura Std', sans-serif !important;
        font-style: normal !important;
        font-weight: 700 !important;
        font-size: 12px !important;
        line-height: 1.2;
        align-items: center;
        justify-content: center;
        text-align: center;
        white-space: normal;
    }
}

/* ============================================================
   /club_manage_teams — BOUTONS « RETOUR » ET « TERMINER »
   ============================================================
   `.club-teams-footer-actions` est posee sur les deux rangees « Retour /
   Valider » du parcours equipes : Club/club_manage_teams.html.twig et
   Club/new_team.html.twig (ce dernier injecte en AJAX dans
   `#coach_manage_teams_ctnr`). Nulle part ailleurs — la regle ne peut pas fuir.

   Elle n'est volontairement scopee a AUCUNE page : le fragment injecte n'a pas
   de classe body a lui, et les deux rangees demandent le meme traitement.

   Les deux boutons vivent dans deux `col-md-6`. Or `col-md-*` ne vaut 50% qu'a
   partir de 768px — en dessous, chaque colonne prend toute la largeur et les
   boutons s'empilent, l'un cale a gauche, l'autre a droite.

   `flex-wrap: nowrap` garantit qu'ils restent sur une ligne quoi qu'il arrive.

   Habillage aligne sur les boutons de bas de page des autres parcours :
   Futura Std, droit, graisse 700, 12px, padding 11/14.
   ------------------------------------------------------------ */
@media (max-width: 767.98px) {

    body .club-teams-footer-actions {
        --bs-gutter-x: 0;
        display: flex;
        flex-wrap: nowrap;
        align-items: flex-start;
        gap: 10px;
    }

    body .club-teams-footer-actions > [class*="col-"] {
        flex: 1 1 0;
        width: auto;
        max-width: none;
        min-width: 0;
        padding: 0;
    }

    /* Les deux conteneurs internes portent `text-align: left` et `text-right` :
       cales chacun d'un cote, les boutons ne s'alignaient pas entre eux. */
    body .club-teams-footer-actions > [class*="col-"] > div {
        text-align: center !important;
    }

    body .club-teams-footer-actions .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        margin: 0 !important;
        padding: 11px 14px !important;
        font-family: 'Futura Std', sans-serif !important;
        font-style: normal !important;
        font-weight: 700 !important;
        font-size: 12px !important;
        line-height: 1.2;
        text-align: center;
        white-space: nowrap;
    }

    body .club-teams-footer-actions .btn img {
        flex: 0 0 auto;
    }

}


/* ============================================================
   /club_manage_teams — BOUTONS D'UNE CARTE D'EQUIPE
   ============================================================
   Dans `#coach_manage_teams_ctnr`, chaque carte se termine par une paire de
   boutons — MODIFIER / SE RETIRER pour le coach de l'equipe — ou par un bouton
   seul (SIGNALER, SELECTIONNER) selon le role.

   Ce sont des `inline-block` juxtaposes dans un conteneur centre : des qu'ils
   ne tiennent plus sur une ligne, le second passe dessous et la carte se
   deforme. On les passe en flex `nowrap`, a parts egales.

   SEUIL 991.98px et non 767.98px : les cartes sont en `col-md-4`, elles font
   donc un TIERS de largeur entre 768 et 991px — c'est la qu'elles sont le plus
   a l'etroit. Sous 768px elles reprennent toute la largeur.

   Le selecteur suit la structure du gabarit : `.text-center > div > div` est le
   conteneur direct des boutons, identique dans les trois branches de role.
   ------------------------------------------------------------ */
@media (max-width: 991.98px) {

    body #coach_manage_teams_ctnr .uft-select-team-box .text-center > div > div {
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        gap: 8px;
    }

    /* `uft-btn-pd-10-20` pose `padding: 10px 20px`, `uft-btn-pd-10-35` pose
       `10px 35px` : trop large pour deux boutons dans une carte etroite. */
    body #coach_manage_teams_ctnr .uft-select-team-box .text-center > div > div > .btn {
        flex: 1 1 0;
        min-width: 0;
        margin: 0 !important;
        padding: 9px 8px !important;
        font-family: 'Futura Std', sans-serif !important;
        font-style: normal !important;
        font-weight: 700 !important;
        font-size: 11px !important;
        line-height: 1.2;
        text-align: center;
        white-space: nowrap;
    }

    /* SIGNALER s'affiche TOUJOURS seul : avec `flex: 1 1 0` il s'etirait sur
       toute la carte. Largeur fixe demandee — `flex-basis` reprise a la meme
       valeur, sinon la base l'emporterait sur `width`. */
    body #coach_manage_teams_ctnr .signaler_team_btn {
        flex: 0 0 130px;
        width: 130px;
        max-width: 130px;
    }
}

/* ============================================================
   FOND VERT — DOIT COUVRIR TOUT L'ECRAN
   ============================================================
   `.bg-body-green` pose un degrade sur le `<body>` (clean.css:5). La hauteur du
   `body` etant celle de son contenu, une page courte laissait le degrade se
   terminer a mi-ecran, le reste tombant sur la couleur de fond du navigateur.

   La regle vise la CLASSE DE FOND et non une page : c'est elle qui pose le
   degrade, c'est donc a elle de garantir qu'il couvre l'ecran. Toutes les pages
   qui l'utilisent en beneficient — /equipes, /poules, /finales, /matches, les
   cinq pages spectateur, /tournoi/new/options, les pages d'invitation et les
   404 — et toute page future aussi, sans rien a repeter.

   `body.` en prefixe : la classe n'est jamais posee ailleurs que via
   `bodyClass` (verifie), le prefixe documente donc l'usage reel et evite qu'un
   futur `<div class="bg-body-green">` herite d'une hauteur d'ecran.

   A noter : `tournoi-poules.css` porte deja un `min-height: 100vh` sur
   `body.uft-poules-page`. Il devient redondant, mais reste sans effet de bord —
   meme valeur, plancher identique.

   `min-height` et non `height` : une page longue doit pouvoir depasser.

   PAS de media query, et sans risque : la regle ne fait qu'imposer un plancher.
   Une page deja plus haute que l'ecran n'est pas affectee, en mobile comme en
   desktop.

   Le `padding-bottom` du `body` (78px + encart, pour la barre de navigation)
   est COMPRIS dans cette hauteur : Bootstrap pose `box-sizing: border-box` sur
   tous les elements. Le degrade descend donc jusqu'au bord reel de l'ecran.

   Meme correctif que sur /poules (tournoi-poules.css, section 2), avec `dvh`
   en plus — sur mobile, `vh` ignore la barre du navigateur.
   ------------------------------------------------------------ */
body.bg-body-green {
    min-height: 100vh;
    min-height: 100dvh;
}

/* ============================================================
   MESSAGE « ETAPE NON CONFIGUREE » — MOBILE
   ============================================================
   Rendu par tournoi_details/not-saved-message.html.twig quand une etape du
   parcours n'est pas encore configuree : « Phases de poules non configurees »,
   « Phases finale non configurees »...

   On lui donne EXACTEMENT l'allure du bloc « Aucune phase finale configuree
   pour le moment » de /finales (`.finales-empty-state`, plus haut dans ce
   fichier) : les deux disent la meme chose — il n'y a rien a afficher ici — ils
   doivent se ressembler.

   Toutes les valeurs sont en `!important` : le pave d'origine est decrit en
   style INLINE dans le gabarit (fond vert plein, 1.2em, marges de 100 et
   150px). Ces valeurs restent celles du DESKTOP, ou le message garde son
   apparence actuelle.

   Toute retouche de `.finales-empty-state` doit etre reportee ici : les deux
   blocs sont volontairement identiques, mais leurs regles sont distinctes —
   celle-la doit surcharger de l'inline, pas l'autre.
   ------------------------------------------------------------ */
@media (max-width: 991.98px) {

    .uft-not-saved-message {
        /* `width: auto` et non `100%` : le gabarit pose `width: 100%` en style
           inline, ce qui, ADDITIONNE aux marges laterales, faisait deborder le
           bloc de 24px et apparaitre une barre de defilement horizontale.
           En `auto`, la largeur se calcule sur ce qui reste une fois les marges
           deduites. */
        width: auto !important;
        max-width: 100% !important;
        margin: 24px 12px !important;
        padding: 18px 14px !important;
        border: 1px dashed rgba(255, 255, 255, 0.35) !important;
        background-color: rgba(255, 255, 255, 0.06) !important;
        color: #ffffff !important;
        font-family: 'Futura Std', sans-serif !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 1.45 !important;
        text-align: center !important;
        text-transform: uppercase !important;
        letter-spacing: .3px !important;
    }
}