/* =============================================================================
tournoi-new.css — PAGE /tournoi/new (création de tournoi), MOBILE UNIQUEMENT
=============================================================================
Tout est scopé sous `body.uft-tournoi-new-page` ET enfermé dans un media
query <= 991.98px. La version desktop n'est touchée par aucune règle, et
aucune autre page du site n'est concernée.
PÉRIMÈTRE : habillage seulement. L'ORDRE DES CHAMPS N'EST PAS MODIFIÉ —
il diffère de la maquette, mais le déplacer imposerait de toucher au DOM
(les champs sont répartis dans 10 `.row` et 4 `.col-md-6`, et `order` ne
réordonne que des frères d'un même conteneur flex), donc de changer aussi
le desktop. À traiter séparément.
NB : Bootstrap applique `.row > * { width: 100% }`, les `col-md-*` sont donc
DÉJÀ en pleine largeur sous 768px. Inutile de forcer leur largeur ici.
============================================================================= */
/* -----------------------------------------------------------------------------
1. BANDEAU DES 2 ÉTAPES (« INFORMATIONS TOURNOIS » / « OPTIONS SUPP. »)
-----------------------------------------------------------------------------
AVANT : styles inline `padding-left: 70px; padding-right: 70px` sur
`.green-bg-cut`, plus `width: fit-content` venant de la classe. Sur un écran
de 390px, 140px de padding ne laissaient que ~200px pour deux colonnes de
texte sur deux lignes chacune — les libellés se cassaient mot par mot.
Les paddings étant en style inline, un `!important` en feuille est nécessaire
pour les surcharger.
-------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
body.uft-tournoi-new-page .green-bg-cut {
width: 100% !important;
padding: 16px 18px !important;
/* L'image de fond (483x160) était étirée en largeur seulement, ce qui
laissait le bas du bandeau vide sur mobile */
background-size: 100% 100%;
}
body.uft-tournoi-new-page .green-bg-cut > div {
padding-right: 6px !important;
min-width: 0;
}
body.uft-tournoi-new-page .green-bg-cut img {
width: 40px !important;
}
body.uft-tournoi-new-page .uft-tabs-subtitle {
font-size: 11px;
line-height: 1.25;
}
/* Titre « CRÉER TON TOURNOI » */
body.uft-tournoi-new-page #add_tournoi_header .uft-title-h4 {
font-size: 1.5rem;
margin-bottom: 20px !important;
}
}
/* -----------------------------------------------------------------------------
2. CARTES « INTÉRIEUR » / « EXTÉRIEUR » (conditions de jeu)
-----------------------------------------------------------------------------
BUG DE DÉBORDEMENT RÉEL : les deux `
après « 24 » pour forcer un retour à la ligne — utile en desktop où les
pastilles sont larges, contre-productif ici. On le neutralise, les pastilles
compactes tiennent alors sur une seule ligne comme sur la maquette.
La découpe d'angle passe de 15px à 10px : sur une pastille de ~28px de haut,
15px mangeaient la moitié de la hauteur.
-------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
body.uft-tournoi-new-page .uft-ck-item {
margin-right: 8px;
margin-bottom: 8px;
clip-path: polygon(0 10px, 10px 0, 100% 0, 100% 100%, 100% 100%, 0 100%);
}
body.uft-tournoi-new-page .uft-ck-item label {
padding: 7px 12px;
font-size: 11px;
/* Le libellé « MASCULIN » porte `display: flex` en style inline : sans
`align-items`, son icône s'étirait sur toute la hauteur de la
pastille (comportement `stretch` par défaut). */
align-items: center;
}
/* Icônes des pastilles GENRE (masculin / féminin) : aucune dimension dans
le markup, elles s'affichaient donc à leur taille intrinsèque. */
body.uft-tournoi-new-page .uft-ck-item label img {
height: 17px;
width: auto;
flex: 0 0 auto;
vertical-align: middle;
}
/* Le séparateur de ligne du markup n'a plus lieu d'être en mobile */
body.uft-tournoi-new-page .uft-checkbox-ctnr .break {
display: none;
}
}
/* -----------------------------------------------------------------------------
4. CHAMPS DE SAISIE
-----------------------------------------------------------------------------
Les champs portent `width: auto; min-width: 50%` en style inline. Sur une
colonne déjà en pleine largeur, 50% laissait la moitié de l'écran vide à
droite de chaque champ. On remonte le plancher à 75%.
`!important` obligatoire : la valeur visée est en style INLINE, qu'une
déclaration normale de feuille ne peut pas surcharger.
Les champs SANS style inline (ex. les deux durées de jeu côte à côte, dans
des `col-6`) portent déjà `width: 100%` via `.form-control` : un plancher à
75% ne les modifie donc pas.
`font-size: 16px` : en dessous, iOS Safari zoome automatiquement au focus.
-------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
/* `:not(.select2-hidden-accessible)` est INDISPENSABLE.
Select2 ne supprime pas le d'origine : il le laisse dans le DOM,
masque visuellement avec la classe `.select2-hidden-accessible`, qui vaut
`position: absolute; width: 1px !important` (technique d'accessibilite :
invisible a l'oeil, toujours lu par les lecteurs d'ecran).
Sans cette exclusion, le `min-width: 75%` ci-dessous s'y applique aussi :
le select invisible passe a 75% de son bloc conteneur tout en restant en
position absolue. Il ne se voit pas, mais il compte dans la zone de
defilement -> barre de scroll horizontale.
Cas concret : #devise (ligne PRIX / EN / Devise) est le seul select2
situe a l'extreme droite d'une ligne ; 75% depuis cette position
depassaient le bord de l'ecran. */
body.uft-tournoi-new-page .uft-input-text:not(.select2-hidden-accessible),
body.uft-tournoi-new-page .uft-input-select:not(.select2-hidden-accessible),
body.uft-tournoi-new-page .form-control:not(.select2-hidden-accessible) {
min-width: 75% !important;
max-width: 100%;
font-size: 16px;
/* 45px -> 38px : la hauteur d'origine est calibrée pour le desktop et
donnait un formulaire interminable sur mobile. 38px reste au-dessus
du seuil de confort tactile une fois le label pris en compte. */
height: 38px;
padding: 4px 14px;
}
/* Le bouton « + » à côté de l'adresse porte `height: 45px; width: 50px` en
style INLINE : sans `!important` il resterait à 45px et dépasserait de
l'input désormais à 38px. */
body.uft-tournoi-new-page #save-tournoi-adress {
height: 38px !important;
width: 44px !important;
padding: 0 !important;
display: flex;
align-items: center;
justify-content: center;
}
body.uft-tournoi-new-page #save-tournoi-adress img {
width: 14px;
height: auto;
}
/* Select2 : son conteneur est inséré juste après le d'origine.
Le panneau déroulant, lui, est déplacé dans et porte la même
classe — il ne doit surtout pas être forcé, sa largeur inline est
calculée pour coller au champ. D'où le sélecteur `+`. */
body.uft-tournoi-new-page .uft-input-select + .select2-container {
min-width: 75%;
max-width: 100%;
}
/* Select2 doit suivre la même hauteur que les PASSER AU PAIEMENT` :
on masque simplement le préfixe sous 991px, le desktop garde le libellé
complet. Concerne les deux boutons du parcours (#load_paiement_init à
l'étape 1, #load_paiement à l'étape 3).
-------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
body.uft-tournoi-new-page .paiement-label-long {
display: none;
}
}
/* -----------------------------------------------------------------------------
12. ÉTAPE PAIEMENT (fragment tournoi/paiement.html.twig)
-----------------------------------------------------------------------------
Injecté dans /tournoi/new comme les autres étapes. Particularité : le JS
masque `#add_tournoi_header` en arrivant ici, donc ni le titre « CRÉER TON
TOURNOI », ni le bandeau des étapes, ni le X de l'en-tête ne sont visibles.
Le fragment porte donc son propre bouton de fermeture.
-------------------------------------------------------------------------- */
/* Le X est masqué par défaut : invisible en desktop, partout où il apparaît. */
.tournoi-new-close {
display: none;
}
@media (max-width: 991.98px) {
/* Titre « PAIEMENT » + son X, calé à gauche sans décentrer le titre. */
body.uft-tournoi-new-page .paiement-title-ctnr {
position: relative;
}
body.uft-tournoi-new-page .paiement-title-ctnr .tournoi-new-close {
position: absolute;
left: 12px;
top: 2px;
}
body.uft-tournoi-new-page .paiement-title-ctnr .uft-title-h4 {
font-size: 1.5rem;
margin-bottom: 22px !important;
}
/* Cartes tournoi / options : `padding: 15px 25px` en style inline, d'où le
`!important`. Les largeurs internes 50/50 et 80/20 sont également inline :
sur une carte de ~340px, 20% ne suffisent pas à l'interrupteur. */
body.uft-tournoi-new-page #tournoi-paiement-ctnr .tournoi-options-ctnr {
padding: 22px 25px !important;
align-items: center;
}
body.uft-tournoi-new-page #tournoi-paiement-ctnr .tournoi-options-ctnr > div:first-of-type {
width: auto !important;
flex: 1 1 auto;
min-width: 0;
}
body.uft-tournoi-new-page #tournoi-paiement-ctnr .tournoi-options-ctnr > div:last-of-type {
width: auto !important;
flex: 0 0 auto;
padding-left: 12px;
}
/* Les boutons supprimer / editer sont en `position: absolute; left: 16px`,
larges de 24px : ils occupent donc 16 -> 40px depuis le bord de la carte.
Le contenu, lui, demarre au padding de la carte (16px) et le titre avait
20px de retrait, soit 36px -> le texte passait SUR les boutons.
On porte le retrait a 30px (16 + 30 = 46px, soit 6px de marge). */
body.uft-tournoi-new-page #tournoi-paiement-ctnr .tournoi-options-ctnr .uft-title-h5 {
font-size: 15px !important;
line-height: 1.2;
}
body.uft-tournoi-new-page #tournoi-paiement-ctnr .tournoi-options-ctnr.f-item .uft-title-h5 {
padding-left: 30px !important;
}
/* Les deux boutons sont espaces de 25px (top 15 puis 40) pour une hauteur
de 24px : on les resserre pour qu'ils tiennent dans la carte compactee. */
body.uft-tournoi-new-page #tournoi-paiement-ctnr .remove-tournoi-btn {
top: 14px !important;
}
body.uft-tournoi-new-page #tournoi-paiement-ctnr .edit-tournoi-btn {
top: 42px !important;
}
/* Montants : `min-height: 47px` inline réservait 3 lignes pour 2. */
body.uft-tournoi-new-page #tournoi-paiement-ctnr .tournoi-options-ctnr > div span {
font-size: 14px !important;
line-height: 1.35;
min-height: 0 !important;
font-weight: 500 !important;
}
/* Encart du total : `width: fit-content` + `padding: 10px 30px` inline. */
/* NB : `.uft-saved-adres-ctnr` sert AUSSI a la liste des adresses de
l'etape 1. Le selecteur est donc volontairement prefixe par
`#tournoi-paiement-ctnr` : rien d'autre n'est touche. */
body.uft-tournoi-new-page #tournoi-paiement-ctnr .uft-saved-adres-ctnr {
padding: 14px 18px !important;
width: 80% !important;
background-color: #ffffff36;
background-image: inherit !important;
border: 1px solid white;
position: relative;
}
/* La bordure du cote de la decoupe.
`clip-path` coupe l'element ET sa bordure : l'angle bas-droit se
retrouve donc sans trait. On redessine la diagonale manquante avec un
::after : une barre de 1px, longue de 30 x racine(2) = ~42px (la coupe
fait 30px), tournee de -45 deg et centree sur le milieu de la coupe,
decalee de ~1px vers l'interieur pour ne pas etre rognee a son tour. */
body.uft-tournoi-new-page #tournoi-paiement-ctnr .uft-saved-adres-ctnr::after {
content: "";
position: absolute;
right: -5px;
bottom: 15px;
width: 42px;
height: 1px;
background-color: #ffffff;
transform: rotate(-45deg);
pointer-events: none;
}
body.uft-tournoi-new-page #tournoi-paiement-ctnr .uft-saved-adres-ctnr .uft-tabs-subtitle {
font-size: 16px !important;
}
/* Séparateur : 40px de padding + 40px de marge, trop sur un écran étroit. */
body.uft-tournoi-new-page #tournoi-paiement-ctnr hr {
padding-top: 20px !important;
margin-top: 20px !important;
}
/* Bloc Stripe : 20px de padding inline de chaque côté. */
/* Le conteneur est A NOUS (l'iframe Stripe est a l'interieur) : son fond
vert est pose en style inline, d'ou le `!important`. L'apparence des
champs eux-memes se regle dans tournoi.js via l'objet `appearance`. */
body.uft-tournoi-new-page #payment-element {
padding: 0 !important;
background-color: transparent !important;
}
/* « CRÉER UN NOUVEAU TOURNOI » : masqué en mobile sur l'étape paiement
(demande client), conformément à la maquette qui ne montre que RETOUR et
PAYER. Il reste disponible en desktop. */
body.uft-tournoi-new-page #btn_new_tournoi {
display: none !important;
}
}
/* -----------------------------------------------------------------------------
13. GARDE-FOU CONTRE LE DÉBORDEMENT HORIZONTAL
-----------------------------------------------------------------------------
Deux conteneurs de pastilles du markup sont en `display:flex` SANS
`flex-wrap` (GENRE, et INSCRIPTION DES ÉQUIPES) : leurs pastilles ne peuvent
pas revenir à la ligne et poussent la page vers la droite dès que l'écran
est étroit. Les autres conteneurs ont déjà le wrap en style inline, la règle
est donc sans effet sur eux.
`min-width: 0` sur les pastilles : sans lui, un item flex refuse de passer
sous sa largeur min-content et déborde au lieu de se compresser.
-------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
body.uft-tournoi-new-page .uft-checkbox-ctnr {
flex-wrap: wrap;
}
body.uft-tournoi-new-page .uft-ck-item {
min-width: 0;
}
}
/* -----------------------------------------------------------------------------
ZONE SURE iOS EN BAS DE PAGE
-----------------------------------------------------------------------------
Ce parcours n'a pas de barre de navigation basse : rien ne reservait donc
l'encart de la barre d'accueil, et le dernier element de l'etape pouvait
passer dessous.
POSE SUR `.s-body`, ET NON SUR `body`. La difference est visible :
`.s-body` porte son propre fond (l'image `body-bg-double-cut.png` de
clean.css) tandis que le `body` porte un degrade. Un padding sur `body`
pousse `.s-body` vers le haut et laisse apparaitre le degrade en dessous —
une bande d'une autre couleur au bas de l'ecran. A l'interieur de `.s-body`,
le fond continue jusqu'au bord et seul le CONTENU remonte.
Scope `body.uft-tournoi-new-page` : les pages qui ont une barre basse
comptent deja l'encart dans leur reserve, l'ajouter ici le compterait deux
fois.
-------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
body.uft-tournoi-new-page .s-body,
body.uft-paiement-page .s-body {
padding-bottom: var(--uft-safe-bottom, 0px);
}
}
/* -----------------------------------------------------------------------------
HAUTEUR DE `.s-body` — LE FOND DOIT DESCENDRE JUSQU'EN BAS
-----------------------------------------------------------------------------
`.s-body` est un bloc ordinaire : sa hauteur est celle de son contenu. Sur
les etapes courtes — « SOUHAITEZ VOUS CREER UN NOUVEAU TOURNOI ? », qui tient
en un titre et deux boutons — il s'arretait bien avant le bas de l'ecran, et
le degrade du `body` reapparaissait en dessous. Deux fonds differents, d'ou
la demarcation.
`min-height` ET NON `height` : les etapes 1 et 2 sont de longs formulaires.
Une hauteur fixe les ferait deborder de leur propre fond, ce qui recreerait
exactement le defaut qu'on corrige, a l'envers.
CE QU'ON SOUSTRAIT : `.s-body` demarre sous l'espaceur d'en-tete
(`.fixed-heade-holder`), seul element en flux au-dessus de lui — l'en-tete
lui-meme est `fixed`, donc hors flux. Or cet espaceur n'a pas la meme hauteur
partout :
au-dessus de 850px : 80px (global.css)
en dessous de 850px : 54px + l'encart haut (fix/responsive.css)
D'ou les deux plages ci-dessous. Sans cette distinction, on gagne une barre
de defilement de 32px sur toutes les etapes dans la plage intermediaire.
L'ENCART BAS n'est PAS soustrait : `.s-body` porte deja
`padding-bottom: var(--uft-safe-bottom)` (bloc precedent), et avec
`box-sizing: border-box` — pose globalement par Bootstrap — ce padding est
COMPRIS dans la hauteur calculee. Le fond descend donc jusqu'au bord reel de
l'ecran pendant que le contenu, lui, reste au-dessus de la barre d'accueil.
`dvh` double le `vh` plutot que de le remplacer : les navigateurs qui ne
connaissent pas l'unite ignorent la seconde declaration et gardent la
premiere. Dans la WebView de l'application les deux sont identiques, il n'y
a pas de barre d'adresse retractable.
-------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
body.uft-tournoi-new-page .s-body,
body.uft-paiement-page .s-body {
min-height: calc(100vh - 80px);
min-height: calc(100dvh - 80px);
}
}
@media (max-width: 850px) {
body.uft-tournoi-new-page .s-body,
body.uft-paiement-page .s-body {
min-height: calc(100vh - 54px - var(--uft-safe-top, 0px));
min-height: calc(100dvh - 54px - var(--uft-safe-top, 0px));
}
}