/* ============================================================================= tournois.css — PAGE /tournois (liste des tournois), VERSION MOBILE UNIQUEMENT ============================================================================= Tout est scopé sous `body.uft-tournois-page` ET enfermé dans un media query. La version desktop de la page n'est donc touchée par aucune règle de ce fichier, et aucune autre page du site n'est concernée. Seuil 991.98px : c'est celui qui pilote déjà la bascule desktop/mobile de cette page. Le template rend en effet DEUX en-têtes distincts — `.responsive-hide` (desktop) et `.responsive-show` (mobile) — que fix/style.css et fix/responsive.css inversent à 991px. On se cale dessus pour ne pas créer un troisième comportement intermédiaire. ============================================================================= */ /* ----------------------------------------------------------------------------- 1. TITRE « TOURNOIS » ----------------------------------------------------------------------------- `fs-1` = 2.5rem (40px) : trop imposant sur un écran de 390px, le titre mangeait un tiers de la hauteur utile avant les cartes. -------------------------------------------------------------------------- */ @media (max-width: 991.98px) { body.uft-tournois-page .tournois-event-title { font-size: 2rem !important; margin-bottom: 1.25rem !important; } } /* ----------------------------------------------------------------------------- 2. LES DEUX PAVÉS « CRÉER UN TOURNOI » / « MES TOURNOIS » ----------------------------------------------------------------------------- AVANT : deux blocs `w-50` dans un conteneur à `width: 90%`, donc quasiment toute la largeur de l'écran, avec un texte qui s'étalait sur une seule ligne. La maquette les montre nettement plus étroits, centrés, avec le libellé sur deux lignes et une vraie gouttière au milieu. `justify-content: center` + largeur plafonnée : les deux pavés gardent la même taille entre eux (`flex: 0 0 …`) et restent centrés quelle que soit la largeur. -------------------------------------------------------------------------- */ @media (max-width: 991.98px) { body.uft-tournois-page .tournois-hero-actions { width: 100% !important; /* Un pavé calé à gauche, l'autre à droite. Leur écartement se règle donc avec le `padding` ci-dessous, pas avec le `gap` (qui ne sert plus que de sécurité si l'écran devient très étroit). */ justify-content: space-between; gap: 20px; padding: 0 16px; } body.uft-tournois-page .tournois-hero-actions > div { /* Annule le `w-50` : largeur fixe et identique pour les deux pavés */ width: auto !important; flex: 0 1 100px; max-width: 100px; padding-left: 12px !important; padding-right: 12px !important; /* Le `me-3` du markup ferait doublon avec le `gap` ci-dessus */ margin-right: 0 !important; font-size: 13px; line-height: 1.15; gap: 6px; } /* --- Découpe en biais + liseré parallèle ------------------------------- Deux formes à dessiner : le corps du pavé avec son coin coupé, et un fin liseré vert parallèle à la coupe, détaché, dans l'angle libéré. POURQUOI PAS `clip-path` SUR LE PAVÉ : `clip-path` rogne l'élément ET tous ses descendants, ::before / ::after compris. Un pavé clippé ne peut donc pas porter son liseré en ::after, il serait découpé avec l'angle. On enlève donc `clip-path` du pavé — son biais se fait très bien avec un dégradé à 2 arrêts — ce qui libère le ::after pour le liseré, avec son propre clip-path indépendant. (1) LE CORPS — un dégradé, 2 arrêts : transparent jusqu'à 20px depuis le coin, vert au-delà. L'axe part du coin biseauté, les bandes sont perpendiculaires à cet axe, donc à 45°. `45deg` = axe partant du coin bas-GAUCHE (« Créer un tournoi ») `313deg` = axe partant du coin bas-DROIT (« Mes tournois ») Le demi-pixel (20 -> 20.5) lisse l'arête : deux arrêts strictement identiques donneraient une diagonale crénelée. `background-color: transparent` neutralise le vert plein de `.green-primary-bg`, qui masquerait sinon la partie transparente. (2) LE LISERÉ — un ::after de 22x22 collé dans l'angle, clippé en bande : les 4 sommets du polygone sont les intersections de DEUX diagonales avec les bords de la boîte. Une diagonale « à la distance a du coin » relie (0, 22-a) et (a, 22). Ici a = 14 (bord extérieur) et a = 17 (bord intérieur). Les 3 réglages sont donc lisibles directement : 14 = écart entre le coin et le liseré 17 - 14 = épaisseur du liseré 20 - 17 = largeur de la séparation avec le corps du pavé Changer l'un des trois ne touche pas les deux autres. ATTENTION aux unités : ces distances sont mesurées le long de l'axe à 45°, pas perpendiculairement au trait. L'épaisseur réelle à l'écran vaut donc l'écart divisé par racine de 2 : 3 / 1,414 = ~2px. Pour un trait de N px à l'écran, prendre un écart de N x 1,414. Ici : liseré fin de 2px, séparation de 2px également. Les deux pavés sont MIROIR l'un de l'autre, comme sur la maquette : - « Créer un tournoi » : biais en bas à GAUCHE - « Mes tournois » : biais en bas à DROITE (`.polygon-div-bottom` du markup ne sait faire que le bas-droit.) */ body.uft-tournois-page .tournois-hero-actions > div { -webkit-clip-path: none; clip-path: none; background-color: transparent; background-repeat: no-repeat; /* Repère pour le ::after du liseré */ position: relative; /* De la place sous l'icône pour que le biais ne la morde pas */ padding-bottom: 18px !important; } /* Le liseré, commun aux deux pavés */ body.uft-tournois-page .tournois-hero-actions > div::after { content: ""; position: absolute; bottom: 0; width: 22px; height: 22px; background-color: #006f3a; pointer-events: none; } /* Pavé gauche : coupe et liseré dans l'angle bas-GAUCHE */ body.uft-tournois-page .tournois-hero-actions > div:first-child { background-image: linear-gradient(45deg, transparent 0, transparent 20px, #006f3a 20.5px); } body.uft-tournois-page .tournois-hero-actions > div:first-child::after { left: 0; clip-path: polygon(0 5px, 0 8px, 14px 22px, 17px 22px); } /* Pavé droit : coupe et liseré dans l'angle bas-DROIT (miroir) */ body.uft-tournois-page .tournois-hero-actions > div:last-child { background-image: linear-gradient(313deg, transparent 0, transparent 20px, #006f3a 20.5px); } body.uft-tournois-page .tournois-hero-actions > div:last-child::after { right: 0; clip-path: polygon(22px 5px, 22px 8px, 8px 22px, 5px 22px); } body.uft-tournois-page .tournois-hero-actions .fs-4 { font-size: 1.15rem !important; } } /* ----------------------------------------------------------------------------- 2 bis. RECHERCHE RAPIDE PAR NOM — masquée en mobile ----------------------------------------------------------------------------- Absente de la maquette. Masquée et non supprimée : `#quick_tournois_keyword` et `#quick_tournois_search_btn` sont écoutés par tournoi.js, et le bloc reste utilisé en desktop. -------------------------------------------------------------------------- */ @media (max-width: 991.98px) { body.uft-tournois-page .tournois-quick-search { display: none !important; } } /* ----------------------------------------------------------------------------- 3. FILTRE PAR DATE — masqué en mobile ----------------------------------------------------------------------------- Absent de la maquette (on passe directement des 2 pavés au sélecteur de mois). Masqué et non supprimé : `.filter-tournois-date` est écouté par tournoi.js, retirer le champ du DOM casserait le handler. Le pendant desktop est déjà masqué par un `style="display:none!important"` dans le template. -------------------------------------------------------------------------- */ @media (max-width: 991.98px) { body.uft-tournois-page .tournois-date-filter-mobile { display: none !important; } } /* ----------------------------------------------------------------------------- 4. SÉLECTEUR DE MOIS « ◀ SEPTEMBRE ▶ » ----------------------------------------------------------------------------- `w-50` = 50% de l'écran, soit ~195px à 390px : les flèches du carrousel (`.carousel-control-prev/next`, positionnées sur les bords) venaient chevaucher le nom du mois pour les libellés longs (SEPTEMBRE, NOVEMBRE, DÉCEMBRE). On élargit et on réserve de la place de part et d'autre du texte. -------------------------------------------------------------------------- */ @media (max-width: 991.98px) { body.uft-tournois-page #carouselTournoiMonthsMobile { width: 260px !important; margin-bottom: 1.5rem !important; } body.uft-tournois-page #carouselTournoiMonthsMobile .carousel-inner h1 { font-size: 1.5rem !important; margin: 0; padding: 0 34px; } /* Flèches : largeur fixe pour qu'elles ne s'étalent pas sur la moitié du carrousel (comportement par défaut de Bootstrap) et restent collées au nom du mois. */ body.uft-tournois-page #carouselTournoiMonthsMobile .carousel-control-prev, body.uft-tournois-page #carouselTournoiMonthsMobile .carousel-control-next { width: 34px; opacity: 1; } body.uft-tournois-page #carouselTournoiMonthsMobile .carousel-control-prev i, body.uft-tournois-page #carouselTournoiMonthsMobile .carousel-control-next i { font-size: 1.5rem !important; } } /* ----------------------------------------------------------------------------- 5. CARTES DE TOURNOI ----------------------------------------------------------------------------- La structure de la carte correspond déjà à la maquette (logo blanc découpé à gauche, titre/date/adresse à droite, ligne de 3 caractéristiques, bandeau de statut, bouton « voir Détails »). On n'ajuste donc que la densité : `.supp-event-container` a un `padding: 2em` (32px) prévu pour une colonne desktop d'un tiers de large — beaucoup trop une fois la carte en pleine largeur d'écran. -------------------------------------------------------------------------- */ @media (max-width: 991.98px) { body.uft-tournois-page .supp-event-container { padding: 1.25em 1.15em; } /* Espacement régulier entre les cartes (le `pt-4` du markup ne sépare que du haut, ce qui laissait la dernière carte collée au bas de page). */ body.uft-tournois-page .tournoi-item { padding-top: 0 !important; margin-bottom: 20px; } /* Titre du tournoi : `fs-5` sur une carte pleine largeur passe bien, mais il doit pouvoir revenir à la ligne sans pousser l'étoile favori hors cadre. */ body.uft-tournois-page .tournoi-item h6 { font-size: 1.15rem !important; line-height: 1.2; word-break: break-word; } /* --- En-tête de carte : logo + titre/date/adresse --------------------- Le bloc texte est aligné en haut, à la même verticale que le sommet du logo (et non centré), comme sur la maquette. */ body.uft-tournois-page .tournoi-item .row { align-items: flex-start; --bs-gutter-x: 0.9rem; /* Le titre / la date / l'adresse doivent TOUJOURS rester à droite du logo. `.row` est en `flex-wrap: wrap` : sans ce `nowrap`, un titre ou une adresse un peu longs suffisent à faire basculer la colonne texte sous le logo (voir l'explication du `flex-basis` juste en dessous). */ flex-wrap: nowrap; } /* Le logo reste carré : sans largeur imposée, la colonne `col-3` donnait une vignette étroite et le texte partait trop à gauche. */ body.uft-tournois-page .tournoi-item .col-3.polygan-div-top-bottom { flex: 0 0 84px; max-width: 84px; } /* `flex: 1 1 0` — la valeur `0` est ce qui compte : c'est la flex-basis. Dans un conteneur `flex-wrap: wrap`, le passage à la ligne se décide sur la taille HYPOTHÉTIQUE des items (leur flex-basis), AVANT que le rétrécissement ne s'applique. Avec une basis `auto`, celle de la colonne texte vaut sa largeur max-content — l'adresse complète sur une seule ligne, ~300px — donc 84px + 300px dépassaient la carte et la colonne partait à la ligne, sous le logo. Avec une basis de 0, l'item tient toujours sur la ligne, puis `flex-grow` lui donne toute la place restante. `min-width: 0` autorise le texte à se compresser sous sa largeur min-content (sinon un mot long le bloquerait). */ body.uft-tournois-page .tournoi-item .col-9 { flex: 1 1 0; max-width: none; min-width: 0; } /* Icône de localisation : elle était centrée sur les deux lignes d'adresse, la maquette la cale en haut, en regard de la première ligne. */ body.uft-tournois-page .tournoi-item .bi-geo-alt { align-self: flex-start; flex: 0 0 auto; line-height: 1.2; margin-right: 4px; } body.uft-tournois-page .tournoi-item .list-tounroi-adresse { min-width: 0; } /* --- Ligne « U 7 / 8 VS 8 / Moyen » ---------------------------------- AVANT : `gap-4` (24px) + `flex-wrap` -> les 3 éléments, de largeurs très inégales, se tassaient à gauche et le 3e repassait à la ligne sur les petits écrans. APRÈS : les 3 se répartissent sur toute la largeur de la carte, alignés sur une seule ligne, icône et libellé centrés verticalement entre eux. */ body.uft-tournois-page .tournoi-item .d-flex.gap-4 { gap: 8px !important; flex-wrap: nowrap; justify-content: space-between; align-items: center; width: 100%; } body.uft-tournois-page .tournoi-item .d-flex.gap-4 > span { flex: 0 1 auto; min-width: 0; white-space: nowrap; align-items: center; } /* Icônes des 3 caractéristiques : même gabarit pour un alignement régulier */ body.uft-tournois-page .tournoi-item .d-flex.gap-4 > span > img { height: 18px !important; width: 18px; object-fit: contain; flex: 0 0 auto; } body.uft-tournois-page .tournoi-item .size-card-subtitle { font-size: 0.85em; } /* Adresse : deux lignes maximum, sans casser la hauteur de la carte. */ body.uft-tournois-page .list-tounroi-adresse { line-height: 1.25; } /* Bandeau de statut : un peu plus compact. */ body.uft-tournois-page .evenement-type0, body.uft-tournois-page .evenement-type1, body.uft-tournois-page .evenement-type2 { padding: 0.65em 0.8em; margin: 0.8em 0; } } /* ----------------------------------------------------------------------------- 6. BOUTON DE FILTRE FLOTTANT ----------------------------------------------------------------------------- AVANT : `.mobile-position-filter { position: absolute; top: 30vh; }` — sans `left`/`right`, il restait donc calé à GAUCHE (position statique horizontale de son conteneur `.w-25`), et le bouton gardait la forme rectangulaire `rounded-top` de Bootstrap. La maquette le montre rond, vert, collé au bord DROIT et flottant par-dessus les cartes. On le passe en `position: fixed` pour qu'il reste accessible pendant le défilement, au-dessus des cartes mais sous la barre de navigation basse (z-index 1030). -------------------------------------------------------------------------- */ @media (max-width: 991.98px) { body.uft-tournois-page .mobile-position-filter { position: fixed; top: auto; bottom: 96px; /* juste au-dessus de la barre de navigation basse */ right: 16px; left: auto; width: auto !important; z-index: 1020; } body.uft-tournois-page .mobile-position-filter > .btn { width: 52px; height: 52px; padding: 0 !important; border-radius: 50% !important; background-color: #026633; border-color: #026633; color: #ffffff; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25); } body.uft-tournois-page .mobile-position-filter > .btn i { font-size: 1.35rem !important; } } /* ----------------------------------------------------------------------------- 7. ONGLETS « CONFIRMÉS / EN ATTENTE / TERMINÉS / FAVORIS » (page /tournois/mes-tournois, rendus quand showFilter = true) ----------------------------------------------------------------------------- Exactement les mêmes défauts que les onglets HOMME/FEMME de l'inscription (cf. auth.css section 11), mais aggravés car il y a ici QUATRE onglets. a) LES ONGLETS PASSENT À LA LIGNE responsive.css applique `.padding-tab-event-mobile { width: calc(100%/3) }` sous 991px — une règle écrite pour un jeu de 3 onglets. Avec 4 onglets, 4 x 33,3% = 133% : le 4e (« Favoris ») basculait sur une 2e ligne. b) ONGLET ACTIF ILLISIBLE `.nav-pills .nav-link.active` pose `background-color: #006f3a` et `.top-nav-container .nav-link` pose `color: #006f3a` — même spécificité, mais notre CSS est chargé après le CDN Bootstrap, donc il écrase le `color: #fff` de Bootstrap. Résultat : vert foncé sur vert foncé. En desktop le problème n'existe pas, responsive.css rétablit le blanc dans un bloc `@media (min-width: 991px)` — qui ne s'applique pas ici. c) LIBELLÉ NON CENTRÉ Le