/* ============================================================================= tournoi-poules.css — /tournoi/{id}/poules, VERSION MOBILE UNIQUEMENT ============================================================================= Tout est scopé sous `body.uft-poules-page` ET enfermé dans un media query. La version desktop n'est touchée par aucune règle de ce fichier. Le fonctionnel est intact : aucun markup retiré, aucune classe ni id lu par tournoi.js modifié. Accroches à préserver si ce fichier évolue : .ctnr-poules-tournoi[attr-data-team][attr-teams-count], .ph_poules, .poule-ctrnr[attr-poule-id], .poule-club-item[attr-index][attr-poule-index] [attr-ph-poule-index][selected-club-id][selected-tournoi-club-id], .fill_all_poule_teams, .edit-poule-name, .ph-config-mobile-toggle, .transparent-bg-cnt-bordred, #save_phase_poule. Seuil 991.98px : c'est celui des `col-lg-*` / de la bascule mobile du reste des pages tournoi. L'accordéon de configuration, lui, est piloté par les utilitaires `d-block d-md-none` du markup (768px) — on ne touche pas à son seuil pour ne pas désynchroniser le bouton et son panneau. ============================================================================= */ /* ----------------------------------------------------------------------------- 1. BOUTON DE FERMETURE (×) -> « Mes tournois » ----------------------------------------------------------------------------- `.tournoi-close-btn` / `.tournoi-close-ctnr` sont déjà définis pour /equipes dans public/css/tournoi-equipes.css, mais scopés à cette page-là. On réplique ici pour /poules plutôt que de dé-scoper là-bas, afin de ne rien changer au comportement existant. -------------------------------------------------------------------------- */ @media (max-width: 850px) { body.uft-poules-page .tournoi-close-ctnr { position: absolute; z-index: 5; } body.uft-poules-page .tournoi-close-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-top: 14px; background-color: #C72520; color: #ffffff; text-decoration: none; border-radius: 3px; font-size: 15px; line-height: 1; position: relative; z-index: 3; } body.uft-poules-page .tournoi-close-btn:hover, body.uft-poules-page .tournoi-close-btn:focus { color: #ffffff; opacity: 0.85; } } /* ----------------------------------------------------------------------------- 2. LES DEUX COLONNES ----------------------------------------------------------------------------- Le template pose deux `col-6` côte à côte : les groupes à gauche, toute la configuration de la phase à droite (nombre de groupes, critères d'égalité, points de victoire, cas de forfait). `col-6` n'est PAS une classe à breakpoint, contrairement à `col-md-6` : elle vaut 50% à TOUTES les tailles. Les deux blocs restaient donc écrasés dans des demi-colonnes de ~170px sur un téléphone. On les passe en pleine largeur, et `order` remonte la configuration au-dessus des groupes, conformément à la maquette. Les deux colonnes étant sœurs dans `.row.ph_poules` (un conteneur flex), `order` suffit : ni le DOM ni le desktop ne sont modifiés. La `.col-10` parente est également en 50%-à-toutes-tailles… non : `col-10` vaut 83,33% partout. On la passe à 100% pour récupérer les ~17% perdus. -------------------------------------------------------------------------- */ @media (max-width: 991.98px) { /* NE PAS surcharger `padding-left/right` ici. Les gouttieres Bootstrap fonctionnent PAR PAIRES : chaque `.row` porte `margin: 0 calc(-.5 * var(--bs-gutter-x))` et chaque colonne compense avec `padding: 0 calc(var(--bs-gutter-x) * .5)`. Reduire le padding de la colonne sans toucher aux marges de la row qu'elle contient fait deborder cette derniere de la difference, de chaque cote -> barre de defilement horizontale sur toute la page. On agit donc sur `--bs-gutter-x`, qui pilote les DEUX valeurs a la fois. La variable est heritee : elle s'applique aussi aux rows imbriquees (.ph_poules, .list-poule-ctrnr), qui restent donc equilibrees. */ body.uft-poules-page .ctnr-poules-tournoi { --bs-gutter-x: 1rem; } body.uft-poules-page .ctnr-poules-tournoi > .col-10 { flex: 0 0 100%; max-width: 100%; width: 100%; } body.uft-poules-page .ph_poules > .poules-config-col, body.uft-poules-page .ph_poules > .poules-groups-col { flex: 0 0 100%; max-width: 100%; width: 100%; } /* Configuration au-dessus, groupes en dessous. */ body.uft-poules-page .ph_poules > .poules-config-col { order: 1; margin-bottom: 18px; } body.uft-poules-page .ph_poules > .poules-groups-col { order: 2; } } /* ----------------------------------------------------------------------------- 3. GROUPES ET LIGNES D'ÉQUIPE ----------------------------------------------------------------------------- Les groupes sont en `col-12 col-md-6` : déjà pleine largeur sous 768px, on ne touche donc pas à la grille. Le `min-height: 170px` est en style inline, d'où le `!important`. -------------------------------------------------------------------------- */ @media (max-width: 991.98px) { /* Espacement vertical entre groupes : on passe par `--bs-gutter-y` et NON par un `margin-bottom` brut sur la colonne. Bootstrap traduit cette variable en `margin-top` sur `.row > *` ET en `margin-top` negatif sur la `.row` : l'espacement est donc compense, il n'allonge pas la page. Une marge basse brute, elle, s'ajoute a la hauteur totale — ce qui faisait apparaitre la barre verticale, reduisait la largeur visible d'une quinzaine de pixels, et revelait un debordement horizontal qui passait jusque-la tout juste. */ body.uft-poules-page .list-poule-ctrnr { --bs-gutter-y: 22px; } body.uft-poules-page .poule-ctrnr { min-height: 0 !important; } /* Titre du groupe (« GROUPE A ») + ses deux boutons. */ /* Titre du groupe (« GROUPE A »). `min-height` est indexe sur la taille de police, comme dans clean.css : `taille x interligne x 2`, soit la hauteur de DEUX lignes. Cette reserve n'est pas decorative — `.wts-inner` porte un `-webkit-line-clamp: 2`, et la hauteur fixe garde toutes les cartes de groupe alignees, qu'un nom tienne sur une ligne ou deux. La valeur de clean.css est calee sur 28px, soit 64px reserves. Avec un titre ramene a 18px, elle laissait un vide de deux lignes sous un texte qui n'en occupe qu'une. On recalcule avec la meme formule plutot que de poser un nombre en dur : si la taille evolue, le lien reste lisible. */ body.uft-poules-page .poule-ctrnr .white-text-shadowed { font-size: 18px; min-height: calc(18px * 1.15 * 2); margin-bottom: 0; } body.uft-poules-page .poule-ctrnr .fill_all_poule_teams { width: 26px; height: auto; margin-right: 8px; } body.uft-poules-page .poule-ctrnr .edit-poule-name { width: 26px !important; height: auto; margin-left: 10px; } /* Lignes d'équipe : la découpe en biais fait 13px de chaque côté, calibrée pour une demi-colonne desktop. En pleine largeur, on garde la même découpe mais on compacte la hauteur et la police. */ body.uft-poules-page .poule-club-item { margin-bottom: 6px; } body.uft-poules-page .poule-club-item > div { font-size: 13px; padding: 7px 5px 7px 16px; } body.uft-poules-page .poule-club-item > div img { max-height: 20px; width: auto; } } /* ----------------------------------------------------------------------------- 4. ACCORDÉON DE CONFIGURATION ----------------------------------------------------------------------------- Le bouton et sa bascule existent déjà (`.ph-config-mobile-toggle`, markup du template + handler tournoi.js). On n'ajuste que ses proportions — surtout PAS son seuil d'affichage, porté par `d-block d-md-none` : le décaler ici désynchroniserait le bouton et le panneau qu'il ouvre. -------------------------------------------------------------------------- */ @media (max-width: 991.98px) { body.uft-poules-page .ph-config-mobile-toggle { font-size: 13px; padding: 9px 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; /* Inversion des couleurs : fond blanc, texte vert. */ background-color: #ffffff; color: #026633; border-radius: 0px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%); } /* clean.css pose `.ph-config-mobile-toggle:hover { background-color: #038a44 }`. Sans cette surcharge, le bouton redevient vert au survol — et sur mobile le `:hover` reste collé apres un tap, le bouton resterait donc vert. */ body.uft-poules-page .ph-config-mobile-toggle:hover, body.uft-poules-page .ph-config-mobile-toggle:focus, body.uft-poules-page .ph-config-mobile-toggle[aria-expanded="true"] { background-color: #ffffff; color: #026633; } /* Le chevron herite de `color`, il passe donc au vert avec le libelle. */ body.uft-poules-page .ph-config-mobile-toggle-icon { color: inherit; } body.uft-poules-page .transparent-bg-cnt-bordred { padding: 12px !important; } body.uft-poules-page .poul-bl-title { font-size: 13px; } /* Pastilles de réglage (nombre de groupes, points de victoire…). `.ctnr-poules-tournoi .uft-ck-item label` vaut déjà `5px 12px`, on n'ajuste donc que la police. */ body.uft-poules-page .ctnr-poules-tournoi .uft-ck-item label { font-size: 11px; } body.uft-poules-page .ctnr-poules-tournoi .uft-ck-item { margin-right: 6px; margin-bottom: 6px; } } /* ----------------------------------------------------------------------------- 5. FONDS ----------------------------------------------------------------------------- `.bg-body-green` applique `linear-gradient(#000000, #014F27)` sur le . Deux effets de bord en mobile : - `background` sans `background-repeat` sur un : le dégradé est peint sur la boîte du body, pas sur toute la hauteur défilable. Sur une page longue — et /poules l'est, avec plusieurs phases — le bas se retrouve hors dégradé. `min-height: 100vh` + `background-attachment` hérité règlent le cas des pages courtes comme des pages longues. - `.bg-body-green` pose aussi `padding: 0px`, ce qui entrerait en conflit avec la hauteur réservée pour la barre de navigation basse. La règle `body.uft-tournoi-bottom-nav` de tournoi-equipes.css porte `!important` et l'emporte — rien à faire ici, mais c'est à savoir. -------------------------------------------------------------------------- */ @media (max-width: 991.98px) { body.uft-poules-page { min-height: 100vh; background-repeat: no-repeat; background-size: 100% 100%; } /* Filet de securite : aucun enfant ne doit pouvoir depasser la largeur de l'ecran. Pose sur les conteneurs de la page (et non sur `body` avec un `overflow-x: hidden`, qui casserait `position: sticky` et masquerait les vrais debordements au lieu de les corriger). */ body.uft-poules-page .ctnr-poules-tournoi, body.uft-poules-page .ph_poules, body.uft-poules-page .list-poule-ctrnr { max-width: 100%; width: 100%; margin: auto; } /* Le séparateur entre phases est très clair sur fond sombre : on l'adoucit pour qu'il ne coupe pas visuellement la page en deux. */ body.uft-poules-page .ph_poules hr { border-top-color: rgba(255, 255, 255, 0.28) !important; margin: 8px 0 18px; } } /* ----------------------------------------------------------------------------- 6. BOUTONS DE BAS DE PAGE ----------------------------------------------------------------------------- « AJOUTER UNE AUTRE PHASE DE GROUPES » et « PASSER A L'ETAPE SUIVANTE ». Une seule ligne, 50 / 50, et la meme typographie que les boutons du haut : Futura Std, droit, graisse 700, 12px, padding 11/14. Les quatre boutons de la page se ressemblent, comme sur /finales. Les `!important` ne sont pas decoratifs : ces boutons heritent de `.btn-green-elec-md-*` (Roboto, italique, 900, 19px), de `uft-btn-md` (12px) et de `uft-btn-pd-10-35` (padding 10/35). `align-items: flex-start` : chaque bouton garde la hauteur que lui donne son padding, on ne les egalise pas. MARGES : la colonne portait `margin: 40px 0` et le premier bouton `margin-right: 20px`, tous deux en style inline AVEC `!important` — donc impossibles a annuler depuis une feuille de style. Sortis du template, ils sont restitues plus bas pour le desktop uniquement. -------------------------------------------------------------------------- */ @media (max-width: 991.98px) { body.uft-poules-page .btn-add-new-ph-ctnr { --bs-gutter-x: 0; --bs-gutter-y: 0; margin: 0; } body.uft-poules-page .btn-add-new-ph-ctnr > .col-md-12 { display: flex; align-items: flex-start; gap: 10px; width: 100%; max-width: 100%; margin: 18px 0 !important; padding: 0 !important; } body.uft-poules-page .btn-add-new-ph-ctnr .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; /* Sur une demi-largeur, ces libelles ne tiennent pas sur une ligne. */ white-space: normal; } } /* 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-poules-page .btn-add-new-ph-ctnr > .col-md-12 { margin-top: 40px !important; margin-bottom: 40px !important; } body.uft-poules-page #create_new_phase_poule { margin-right: 20px !important; } } /* ----------------------------------------------------------------------------- 7. CARTE « MATCHS DE GROUPES » (.tournoi-options-ctnr, dans l'accordéon) ----------------------------------------------------------------------------- Trois valeurs calibrées desktop la rendaient énorme sur un téléphone : - `clip-path` retirant 30px en bas à droite (common-elements.css) — proportionné à une carte de demi-colonne desktop, la moitié de la hauteur sur une carte compacte ; - largeurs `80%` / `20%` en style INLINE : 20% ne suffisent pas à l'interrupteur une fois la carte étroite, il écrasait le texte ; - `font-size: 19px` en inline sur le titre, et un padding de 15px. Les valeurs visées étant inline, `!important` est nécessaire. -------------------------------------------------------------------------- */ @media (max-width: 991.98px) { body.uft-poules-page .tournoi-options-ctnr { padding: 12px !important; margin-bottom: 12px !important; margin-top: 0 !important; align-items: center; -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%); } /* Le texte prend la place restante, l'interrupteur sa largeur réelle. */ body.uft-poules-page .tournoi-options-ctnr > div:first-of-type { width: auto !important; flex: 1 1 auto; min-width: 0; } body.uft-poules-page .tournoi-options-ctnr > div:last-of-type { width: auto !important; flex: 0 0 auto; padding-left: 10px; } body.uft-poules-page .tournoi-options-ctnr .uft-title-h5 { font-size: 14px !important; line-height: 1.2; } body.uft-poules-page .tournoi-options-ctnr > div span { font-size: 11px !important; line-height: 1.3; } } /* ----------------------------------------------------------------------------- 8. BOUTONS « REMPLISSAGE AUTOMATIQUE » / « RETIRER LES EQUIPES » ----------------------------------------------------------------------------- En desktop : inchanges. En mobile ils deviennent CARRES, cote a cote. C'etaient deux `inline-block` dans un conteneur en `text-align: center` : ensemble ils depassaient 470px, passaient a la ligne, et chaque ligne se centrait independamment — les deux libelles n'ayant pas la meme largeur, leurs bords gauches ne coincidaient pas (effet d'escalier). Deux points a ne pas manquer : - `white-space: normal` : les libelles sont longs et DOIVENT pouvoir passer sur plusieurs lignes dans un pave etroit, sinon ils debordent. - `padding` en `!important` : `uft-btn-pd-10-35` pose `10px 35px`, ce qui ne laisserait aucune place au texte dans un pave de 104px de large. Dimensions retenues : 104x60, graisse 900. Les memes valeurs sont appliquees aux boutons de /finales (fix/responsive.css) : toute modification doit etre reportee des DEUX cotes. La decoupe d'angle de `.btn-green-elec-md-active` (15px en bas a droite) est conservee : elle reste lisible sur un carre et garde la charte UFT. -------------------------------------------------------------------------- */ @media (max-width: 991.98px) { body.uft-poules-page .poules-top-actions { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; margin-bottom: 18px !important; padding: 0; } body.uft-poules-page .poules-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; } } /* ----------------------------------------------------------------------------- 9. « X » DE SUPPRESSION DE PHASE, A COTE DE « CONFIGURATION DE LA PHASE » ----------------------------------------------------------------------------- Le « X » d'origine vit dans `.transparent-bg-cnt-bordred`, que clean.css:163 passe en `display: none` tant que l'accordeon de configuration est ferme : sur telephone il etait donc inatteignable, il fallait deplier le panneau pour le voir. Le markup pose desormais un DOUBLON `.ph-remove-mobile` juste apres le bouton « Configuration de la phase ». Doublon et non deplacement : l'original est ancre en absolu sur l'en-tete du panneau (`top: 11px; right: 16px` en style inline, cf. `.transparent-bg-cnt-bordred > div { position: relative }`), le sortir de la aurait decale le rendu desktop. SEUIL 767.98px et non 991.98px : c'est celui de `d-md-none`, qui pilote a la fois le bouton d'accordeon et ce doublon. Entre 768 et 991px le panneau est deja ouvert et le « X » d'origine visible — il n'y a rien a faire. Le style inline du doublon n'existe pas (contrairement a l'original), mais la classe `.remove-btn` partagee peut porter un positionnement : d'ou les `!important` sur `position` / `top` / `right`, pour le remettre dans le flux. -------------------------------------------------------------------------- */ @media (max-width: 767.98px) { /* La colonne devient une rangee : le bouton d'accordeon et le « X » cote a cote, le panneau (quand il s'ouvre) sur toute la largeur en dessous. */ body.uft-poules-page .poules-config-col { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; } /* `flex-basis: 0` et `width: auto`, PAS `flex: 1 1 auto`. clean.css:174 pose `width: 100%` sur ce bouton. Avec une base `auto`, cette largeur devient la taille hypothetique de l'element — et le passage a la ligne d'un conteneur `flex-wrap` se decide sur la taille HYPOTHETIQUE, avant tout retrecissement. Le bouton reclamait donc 100% a lui seul et poussait le « X » sur la ligne suivante, alors meme qu'il aurait pu se compresser. Avec une base de 0, il ne reclame rien et se contente de l'espace qui reste une fois le « X » place. */ body.uft-poules-page .poules-config-col > .ph-config-mobile-toggle { flex: 1 1 0; width: auto; min-width: 0; } body.uft-poules-page .poules-config-col > .transparent-bg-cnt-bordred { flex: 0 0 100%; } body.uft-poules-page .ph-remove-mobile { position: static !important; top: auto !important; right: auto !important; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 42px; /* `.remove-btn` (global.css:472) impose `height: 24px` et `line-height: 24px`. Une hauteur explicite l'emporte sur le `align-items: stretch` du conteneur : le pave restait donc a 24px quand son voisin en faisait le double. `height: auto` rend la main a l'etirement, et `align-self` le rend explicite. */ height: auto; align-self: stretch; line-height: 1; padding: 0; /* `margin-right: 10px` vient aussi de `.remove-btn` : il decalait le pave du bord droit de la colonne. La marge basse de 6px, en revanche, est REPRISE du bouton voisin (clean.css:187). Avec `align-items: stretch`, c'est la BOITE DES MARGES de chaque element qui est etiree a la hauteur de la ligne : le bouton, marge comprise, faisait donc 6px de moins que le pave en hauteur de bordure. Marges identiques -> hauteurs identiques. */ margin: 0 0 6px 0; /* Meme rouge que les autres actions destructrices du site. */ background-color: #C72520; color: #ffffff; font-weight: 900; font-size: 13px; cursor: pointer; /* `.remove-btn` arrondit les angles de 2px ; le bouton voisin, lui, est a angles vifs. */ border-radius: 0; /* Meme biseau que le bouton d'accordeon voisin, pour qu'ils se lisent comme une paire. */ -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%); } /* Le « X » d'ORIGINE, dans l'en-tete du panneau de configuration, fait desormais doublon avec celui du bandeau : on le masque. Il reste dans le DOM et reste la seule version rendue en desktop (le doublon, lui, porte `d-md-none`). Le selecteur passe par `.transparent-bg-cnt-bordred` pour ne viser que lui : le doublon est en dehors de ce conteneur. */ body.uft-poules-page .transparent-bg-cnt-bordred .remove-ph-btn { display: none; } } /* ----------------------------------------------------------------------------- 10. MODALS DE CONFIRMATION ----------------------------------------------------------------------------- Quatre modals de structure identique — un titre, puis une rangee de boutons : #ModalConfirmPouleEdit « ...modifier la structure des phases... » #ModalConfirmAutoEmptyTeams « ...retirer toutes les equipes... » #nameExists « Ce nom de groupe existe deja » (un seul bouton) #ModalRenamePhasePoule renommage, avec un champ de saisie Traites ensemble : n'en ajuster qu'un laisserait les trois autres a leurs proportions desktop sur la meme page. Les titres sont des `

` (ou un `

` pour #nameExists) : ~2.5rem par defaut, soit un titre plus haut que le contenu qu'il annonce. Celui de #ModalConfirmPouleEdit fait trois phrases, il occupait tout l'ecran. -------------------------------------------------------------------------- */ @media (max-width: 767.98px) { /* `.modal-content` (fix/style.css) : `padding: 1em` + decoupes de 35px aux quatre coins, calibrees pour un ecran large. Meme valeur que les modals de /finales et /matches : 18px. `width` en `!important` : #nameExists porte `width: 70%` en style inline, soit 70% d'une boite deja etroite. */ body.uft-poules-page #ModalConfirmPouleEdit .modal-content, body.uft-poules-page #ModalConfirmAutoEmptyTeams .modal-content, body.uft-poules-page #nameExists .modal-content, body.uft-poules-page #ModalRenamePhasePoule .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); } body.uft-poules-page #ModalConfirmPouleEdit .modal-body, body.uft-poules-page #ModalConfirmAutoEmptyTeams .modal-body, body.uft-poules-page #nameExists .modal-body, body.uft-poules-page #ModalRenamePhasePoule .modal-body { padding: 12px 10px; } body.uft-poules-page #ModalConfirmPouleEdit .modal-body h1, body.uft-poules-page #ModalConfirmAutoEmptyTeams .modal-body h1, body.uft-poules-page #nameExists .modal-body h4, body.uft-poules-page #ModalRenamePhasePoule .modal-body h1 { font-size: 14px; line-height: 1.35; margin-bottom: 0; } /* Rangee des boutons : `gap-4` (1.5rem) entre deux boutons en `w-100`, et `mt-5` (3rem) au-dessus. Trop genereux une fois le modal compacte. */ body.uft-poules-page #ModalConfirmPouleEdit .modal-body > .d-flex.flex-row, body.uft-poules-page #ModalConfirmAutoEmptyTeams .modal-body > .d-flex.flex-row, body.uft-poules-page #nameExists .modal-body > .d-flex.flex-row, body.uft-poules-page #ModalRenamePhasePoule .modal-body > .d-flex.flex-row { gap: 10px !important; margin-top: 1rem !important; } /* `font-size: 1em` est pose en style inline sur chacun de ces boutons. */ body.uft-poules-page #ModalConfirmPouleEdit .modal-body > .d-flex.flex-row > .btn, body.uft-poules-page #ModalConfirmAutoEmptyTeams .modal-body > .d-flex.flex-row > .btn, body.uft-poules-page #nameExists .modal-body > .d-flex.flex-row > .btn, body.uft-poules-page #ModalRenamePhasePoule .modal-body > .d-flex.flex-row > .btn { font-size: 12px !important; padding: 10px 8px; white-space: nowrap; } /* Champ de saisie du renommage. 16px est un plancher : en dessous, iOS Safari zoome au focus. */ body.uft-poules-page #ModalRenamePhasePoule .uft-input-text { width: 100%; height: 38px; margin-top: 12px; padding: 4px 12px; font-size: 16px; } }