/* =============================================================================
   tournoi-equipes.css — /tournoi/{id}/equipes, VERSION MOBILE UNIQUEMENT
   =============================================================================

   Tout est scopé sous `body.uft-equipes-page` ET enfermé dans un media query.
   La version desktop n'est touchée par aucune règle de ce fichier.

   Exception assumée : le bloc `.tournoi-bottom-nav` n'est pas scopé — son
   markup n'existe que dans Components/tournoiBottomNavigation.html.twig, il ne
   peut donc affecter aucune autre page, et le composant sera réutilisé sur les
   autres onglets de configuration (poules, finales, matches).

   Deux seuils, comme ailleurs dans le projet :
     - 850px : seuil auquel responsive.css masque la nav haute `.top-nav-info`.
               C'est là que la barre basse doit prendre le relais.
     - 992px : seuil des `col-lg-*` qui pilotent les 2 colonnes de la page.
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1. BARRE DE NAVIGATION BASSE (configuration du tournoi)
   -----------------------------------------------------------------------------
   Masquée par défaut -> invisible en desktop.
   -------------------------------------------------------------------------- */
.tournoi-bottom-nav {
    display: none;
}

@media (max-width: 850px) {

    .tournoi-bottom-nav {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1030;
        background-color: #ffffff;
        border-top: 1px solid #ECECEF;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
        /* Encoche des iPhone : évite de passer sous le home indicator */
        padding-bottom: var(--uft-safe-bottom, 0px);
    }

    .tournoi-bottom-nav-list {
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .tournoi-bottom-nav-item {
        flex: 1 1 0;
        min-width: 0;
    }

    /* `button` pour INFOS TOURNOI, `a` pour les autres : on remet les deux au
       même rendu (le <button> hérite sinon du style natif du navigateur). */
    .tournoi-bottom-nav-link {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        width: 100%;
        padding: 8px 2px 7px;
        background: none;
        border: 0;
        text-decoration: none;
        color: #82829B;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.02em;
        text-align: center;
        line-height: 1.1;
        white-space: nowrap;
        cursor: pointer;
    }

    .tournoi-bottom-nav-link:hover,
    .tournoi-bottom-nav-link:focus {
        color: #82829B;
        text-decoration: none;
    }

    /* `currentColor` dans les SVG -> l'icône suit la couleur du lien.
       `width: auto` : les 5 icônes ont des ratios différents (32x32, 28x26,
       30x30, 29x27, 28x28), les forcer au carré les déformerait. */
    .tournoi-bottom-nav-icon {
        height: 24px;
        width: auto;
        flex: 0 0 auto;
    }

    /* Vert de l'état actif : celui de l'icône « Équipes » fournie (#04743B). */
    .tournoi-bottom-nav-link.active,
    .tournoi-bottom-nav-link.active:hover,
    .tournoi-bottom-nav-link.active:focus {
        color: #04743B;
    }

    /* responsive.css pose déjà `body { padding-bottom: 60px !important }` sous
       850px ; notre barre est plus haute. */
    body.uft-tournoi-bottom-nav {
        /* ZONE SURE iOS : la reserve doit inclure l'encart bas, sinon le
           dernier element de la page passe derriere la barre. */
        padding-bottom: calc(78px + var(--uft-safe-bottom, 0px)) !important;
    }
}


/* -----------------------------------------------------------------------------
   2. BOUTON DE FERMETURE (×) -> « Mes tournois »
   -----------------------------------------------------------------------------
   NE PAS remettre ici un `.tournoi-close-btn { display: none }` NON SCOPE.
   Cette regle existe deja dans fix/responsive.css, qui la reactive en mobile
   pour TOUTES les pages tournoi. Or ce fichier est charge APRES responsive.css
   (base.html.twig, ligne 112 contre 87) et les deux ont la meme specificite
   (0,1,0) : la derniere chargee gagne. Un `display: none` non scope ici
   masquait donc le bouton sur /finales, qui s'appuie sur la regle generique.
   /equipes et /poules n'etaient pas touchees, leurs regles scopees
   (`body.uft-...-page`, specificite 0,2,1) reprenant la main.

   Les regles ci-dessous restent scopees a cette page : memes valeurs que la
   version generique, elles ne font que la confirmer.
   -------------------------------------------------------------------------- */
@media (max-width: 850px) {

    /* Le conteneur sort du flux : le bouton se superpose au haut de page au
       lieu de pousser la banniere vers le bas. `.container-topSection` etant
       en z-index 1, on passe au-dessus. */
    body.uft-equipes-page .tournoi-close-ctnr {
        position: absolute;
        z-index: 5;
    }

    body.uft-equipes-page .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;
    }

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


/* -----------------------------------------------------------------------------
   3. ORDRE DES DEUX COLONNES
   -----------------------------------------------------------------------------
   Le DOM place la liste d'équipes (`col-lg-7`) AVANT les cartes d'action
   (`col-lg-4`) : empilées en mobile, la liste se retrouvait donc en premier.
   La maquette veut l'inverse — les 3 cartes, puis la liste.

   Les deux colonnes sont sœurs dans `.row.container-sponsors-details`, donc
   dans un conteneur flex : un simple `order` suffit, sans toucher au DOM ni au
   desktop.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {

    body.uft-equipes-page .equipes-actions-col {
        order: 1;
        padding: 0px 22px;
    }

    body.uft-equipes-page .equipes-teams-col {
        order: 2;
    }

    /* Le `gap: 2em` inline de la row est un peu large une fois empilé */
    body.uft-equipes-page .container-sponsors-details {
        gap: 1.25em !important;
        margin-bottom: 2.5em !important;
    }
}


/* -----------------------------------------------------------------------------
   4. CARTES D'ACTION (invitation / ajout manuel / liste d'attente)
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {

    body.uft-equipes-page .equipes-actions-col .title-equipe {
        font-size: 15px;
        line-height: 1.2;
        margin-bottom: 4px;
    }

    body.uft-equipes-page .equipes-actions-col .para-equipe {
        font-size: 12px;
        line-height: 1.35;
        margin-bottom: 0;
    }

    body.uft-equipes-page .equipes-actions-col .bg-white {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
        margin-bottom: 12px !important;
    }
}


/* -----------------------------------------------------------------------------
   5. GRILLE DES ÉQUIPES
   -----------------------------------------------------------------------------
   Déjà 2 par ligne en mobile (`col-6`), on ne touche donc pas à la grille :
   uniquement aux tailles, comme demandé (logos et boutons plus petits).
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {

    body.uft-equipes-page .equipe-shild-container {
        padding: 12px !important;
    }

    /* Logos d'équipe.
       Le <img> porte `width: 90px; height: 90px` en style INLINE. Un simple
       `height: auto` en feuille perdait donc face à lui : la largeur tombait à
       56px mais la hauteur restait à 90px -> logo ovale.
       Il faut les DEUX dimensions en `!important`, et les garder ÉGALES, sinon
       le `border-radius: 100%` (inline lui aussi) dessine une ellipse.

       `:not(.edit-team-players)` : le crayon « gérer les joueurs » est lui
       aussi un <img> de cette carte, en position absolue — sans l'exclusion,
       il se retrouvait forcé à 56px. */
    body.uft-equipes-page .tournoi-club-item img:not(.edit-team-players) {
        width: 58px !important;
        height: 58px !important;
        object-fit: cover;
        border-radius: 50% !important;
    }

    /* Nom de l'équipe */
    body.uft-equipes-page .tournoi-club-item .club-name,
    body.uft-equipes-page .tournoi-club-item h5,
    body.uft-equipes-page .tournoi-club-item h6 {
        font-size: 12px !important;
        line-height: 1.2;
    }

    /* Boutons REMPLACER / RETIRER.
       Ils portent la classe `.button-container` (fix/style.css), calibree
       desktop : 130x35px, font-size 1em. On la reduit en mobile.
       `.btn` est vise separement : les deux classes coexistent sur ces
       boutons. */
    body.uft-equipes-page .tournoi-club-item .button-container {
        border: none;
        width: 103px;
        height: 27px;
    }

    body.uft-equipes-page .tournoi-club-item .btn,
    body.uft-equipes-page .tournoi-club-item .button-container {
        font-size: 10px !important;
        padding: 5px 10px !important;
    }

    /* L'icone de « Remplacer » porte `margin-right: 5px` en style inline ;
       a cette taille elle prend trop de place dans un bouton de 103px. */
    body.uft-equipes-page .tournoi-club-item .button-container .bi {
        font-size: 11px;
        margin-right: 3px !important;
    }

    body.uft-equipes-page .tournoi-club-item {
        margin-bottom: 14px !important;
    }

    /* Titre « ÉQUIPES(x/y) » : remplacé en mobile par le compteur placé entre
       les flèches, comme sur la maquette. */
    body.uft-equipes-page #club-count {
        display: none;
    }

    /* Flèches du carrousel : ce sont des `.carousel-control-*` Bootstrap,
       normalement positionnées en absolu et larges de 15% du carrousel. Ici
       elles sont dans une ligne flex -> on les ramène à des boutons carrés. */
    body.uft-equipes-page .btn-carousel-equipe {
        gap: 14px;
        padding-top: 12px !important;
        padding-bottom: 4px !important;
    }

    body.uft-equipes-page .btn-carousel-equipe .carousel-control-prev,
    body.uft-equipes-page .btn-carousel-equipe .carousel-control-next {
        position: relative;
        width: 30px;
        height: 30px;
        flex: 0 0 auto;
        opacity: 1;
        background-color: rgba(255, 255, 255, 0.15);
    }

    /* Le compteur est rendu APRÈS les deux flèches dans le HTML (il doit rester
       hors du `{% if clubsData|length > 6 %}` qui les entoure, pour s'afficher
       même quand il n'y a qu'une page). On le replace visuellement au milieu
       avec `order`, sans toucher au DOM. */
    body.uft-equipes-page .btn-carousel-equipe .carousel-control-prev {
        order: 1;
    }

    body.uft-equipes-page .btn-carousel-equipe .equipes-count-mobile {
        order: 2;
    }

    body.uft-equipes-page .btn-carousel-equipe .carousel-control-next {
        order: 3;
    }

    body.uft-equipes-page .equipes-count-mobile {
        color: #ffffff;
        font-weight: 700;
        font-style: italic;
        font-size: 14px;
        white-space: nowrap;
    }
}

/* Le compteur mobile n'a pas lieu d'être en desktop : le titre `#club-count`
   au-dessus de la grille y joue déjà ce rôle. */
.equipes-count-mobile {
    display: none;
}

@media (max-width: 991.98px) {
    body.uft-equipes-page .equipes-count-mobile {
        display: inline-block;
    }
}


/* -----------------------------------------------------------------------------
   6. CARTE TOURNOI (bloc `.show-on-mobile` de Components/tournoi/header.html.twig)
   -----------------------------------------------------------------------------
   Scopé à cette page ET à `.show-on-mobile` : le bloc `.show-on-pc` du même
   composant, comme les autres pages tournoi, n'est pas concerné.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {

    body.uft-equipes-page .show-on-mobile .uft-title {
        font-size: 20px !important;
        line-height: 1.15;
    }

    body.uft-equipes-page .show-on-mobile .sub-title-uft {
        font-size: 12px !important;
    }

    body.uft-equipes-page .show-on-mobile .sub-info-title {
        font-size: 12px !important;
        font-weight: 700 !important;
    }

    /* Ligne Format / Catégorie / Prix : répartie sur la largeur de la carte
       plutôt que tassée à gauche. */
    body.uft-equipes-page .show-on-mobile .uft-items-card {
        justify-content: space-between;
        flex-wrap: nowrap;
        margin-top: 8px;
    }

    body.uft-equipes-page .show-on-mobile .uft-items-card > div {
        width: auto !important;
        flex: 0 1 auto;
        min-width: 0;
        padding-left: 0 !important;
        padding-right: 6px !important;
    }

    body.uft-equipes-page .show-on-mobile .uft-items-card img {
        width: 14px !important;
    }
}


/* -----------------------------------------------------------------------------
   7. BOUTON « PASSER A L'ETAPE SUIVANTE »
   -----------------------------------------------------------------------------
   Meme typographie que les boutons de /poules et /finales : Futura Std, droit,
   graisse 700, 12px, padding 11/14.

   Il est SEUL sur sa ligne, contrairement aux paires de /poules et /finales :
   pas de 50 / 50 ici. Il garde donc sa largeur naturelle, centre par le
   `text-align: center` de sa colonne.

   Les `!important` ne sont pas decoratifs : ce bouton herite de
   `.btn-green-elec-md-active` (Roboto, italique, 900, 19px), de `uft-btn-md`
   (12px) et de `uft-btn-pd-10-35` (padding 10/35).

   MARGES : la colonne portait `margin: 40px 0` en style inline AVEC
   `!important` — imbattable depuis une feuille de style, si bien que la regle
   mobile qui les ramenait a 16px etait sans effet. Sorties du template, elles
   sont restituees plus bas pour le desktop uniquement.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {

    body.uft-equipes-page .btn-add-new-ph-ctnr .btn {
        width: auto;
        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;
    }

    body.uft-equipes-page .btn-add-new-ph-ctnr > div {
        margin-top: 16px !important;
        margin-bottom: 16px !important;
    }
}

/* Pendant desktop des marges sorties du template : rendu strictement identique
   a ce qu'il etait au-dessus de 992px. */
@media (min-width: 992px) {

    body.uft-equipes-page .btn-add-new-ph-ctnr > .col-md-12 {
        margin-top: 40px !important;
        margin-bottom: 40px !important;
    }
}


/* -----------------------------------------------------------------------------
   8. BOUTONS CONDITIONNELS DES CARTES D'ACTION
   -----------------------------------------------------------------------------
   « Payer cette option » (ajout manuel) et « Activer la liste d'attente » ne
   s'affichent que sous conditions (option non encore payée, tournoi privé...).
   Ils partagent la classe `.polygon-btn-bottom.btn.btn-primary` et héritent de
   la taille desktop, trop imposante dans une carte de téléphone.

   Scopé à `.equipes-actions-col` : les boutons de la grille d'équipes
   (Remplacer / Retirer) ne sont pas concernés, ils ont leur propre règle.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {

    body.uft-equipes-page .equipes-actions-col .btn.btn-primary {
        font-size: 11px !important;
        padding: 7px 12px !important;
        line-height: 1.2;
        white-space: nowrap;
    }

    body.uft-equipes-page .equipes-actions-col .btn.btn-primary .bi {
        font-size: 12px;
        margin-right: 2px;
    }
}