/* ============================================================================= home.css — PAGE /home (espace utilisateur), VERSION MOBILE UNIQUEMENT ============================================================================= Toutes les règles de mise en page sont enfermées dans des `@media (max-width: …)`. AUCUNE ne s'applique en desktop : la version PC de /home et de l'en-tête reste strictement identique à avant. Les correctifs de l'en-tête (points 5 et 6) sont volontairement scopés sous `body.uft-home-page` : seule /home est concernée. Les autres pages (login, register, tournoi…) gardent l'en-tête mobile actuel. Pour généraliser plus tard, il suffira de retirer `body.uft-home-page` des sélecteurs concernés. Deux seuils, pour deux raisons distinctes : - 850px : seuil auquel responsive.css masque déjà la barre de nav haute et le hamburger. C'est donc là que la barre du bas doit prendre le relais, sinon il existe une zone sans aucune navigation. - 768px : seuil des classes `col-md-*`. En dessous, les colonnes des cartes n'ont plus aucune largeur définie. ============================================================================= */ /* ----------------------------------------------------------------------------- BARRE DE NAVIGATION BASSE (Components/bottomNavigationHome.html.twig) ----------------------------------------------------------------------------- Masquée par défaut -> invisible en desktop. Ces règles ne peuvent affecter aucune autre page : le markup `.bottom-nav-home` n'existe que dans ce composant. -------------------------------------------------------------------------- */ .bottom-nav-home { display: none; } @media (max-width: 850px) { .bottom-nav-home { 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.06); /* Encoche des iPhone : évite que la barre passe sous le home indicator */ padding-bottom: var(--uft-safe-bottom, 0px); } .bottom-nav-home-list { display: flex; list-style: none; margin: 0; padding: 0; } .bottom-nav-home-item { flex: 1 1 0; min-width: 0; } .bottom-nav-home-link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px 2px 7px; text-decoration: none; color: #82829B; font-size: 10px; font-weight: 700; letter-spacing: 0.02em; text-align: center; line-height: 1.1; /* Le libellé ne doit jamais passer sur 2 lignes et décaler la barre */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bottom-nav-home-link:hover, .bottom-nav-home-link:focus { color: #82829B; text-decoration: none; } /* `currentColor` dans les SVG -> l'icone suit la couleur du lien, sans avoir a dupliquer les fichiers pour l'etat actif. `width: auto` : les 5 icones n'ont pas le meme ratio (27x27, 29x27, 28x26, 38x34, 22x25). Les forcer a 24x24 les deformerait ; on les cale donc sur la hauteur et on laisse la largeur suivre. */ .bottom-nav-home-icon { height: 24px; width: auto; flex: 0 0 auto; } /* Vert de l'etat actif : celui des SVG fournis (#3D8A42). */ .bottom-nav-home-link.active, .bottom-nav-home-link.active:hover, .bottom-nav-home-link.active:focus { color: #3D8A42; } /* responsive.css pose déjà `body { padding-bottom: 60px !important }` sous 850px. Notre barre est plus haute -> on réserve la place correspondante, sinon le bas de page passe dessous. Classe volontairement distincte de `uft-home-page` : elle doit être posée sur TOUTE page qui inclut le composant (aujourd'hui /home et /tournois), alors que `uft-home-page` ne pilote que la mise en page des cartes. */ body.uft-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(76px + var(--uft-safe-bottom, 0px)) !important; } } /* ----------------------------------------------------------------------------- (3) ESPACEMENT DES CARTES + (4) ORDRE PLATEAUX / STAGES ----------------------------------------------------------------------------- (3) Les 4 cartes vont par paires dans une même `.row`. En mobile elles passent à la ligne via `flex-wrap`, mais `--bs-gutter-y` vaut 0 par défaut : TOURNOIS et MATCHS se touchaient, idem pour la 2e paire. On neutralise les `mt-4 mb-4` de la 2e row (utilitaires Bootstrap, donc `!important` nécessaire) et on applique une marge uniforme sous chaque carte. Au passage : `col-md-5` n'a aucune largeur sous 768px, la colonne se dimensionnait donc sur la taille intrinsèque du PNG (332px) au lieu de remplir l'écran. `width: 100%` corrige aussi ça — sans quoi l'espacement n'aurait servi à rien, les cartes restant étroites et centrées. (4) L'ordre du HTML (STAGES puis PLATEAUX) est CONSERVÉ pour ne pas modifier le desktop. On inverse uniquement l'affichage mobile avec `order`, une propriété flex qui ne réordonne que le rendu. -------------------------------------------------------------------------- */ @media (max-width: 767.98px) { body.uft-home-page .home-cards-row { margin-top: 0 !important; margin-bottom: 0 !important; } body.uft-home-page .home-card { flex: 0 0 auto; width: 100%; max-width: 100%; margin-bottom: 20px; } /* (4) PLATEAUX remonte avant STAGES, uniquement en mobile */ body.uft-home-page .home-card-plateaux { order: -1; } } /* ----------------------------------------------------------------------------- (5) BLANC EN BAS DE PAGE ----------------------------------------------------------------------------- Trois espacements s'additionnaient sous la derniere carte : 20px marge basse de la carte (section 3 ci-dessus) 48px `pb-5` de `#sidebar`, le conteneur des cartes 48px `mb-5` du meme `#sidebar` 48px `pb-5` du `
` de base.html.twig 76px `padding-bottom` du `body`, qui reserve la hauteur de la barre de navigation basse — celui-la est necessaire, la barre etant fixe et venant se poser par-dessus le contenu Soit pres de 240px de vide, alors que 76px suffisent. On retire les trois espacements du milieu : ils aerent le bas d'une page SANS barre basse, or la reserve du `body` joue deja exactement ce role. `mb-5` et `pb-5` sont des utilitaires Bootstrap, donc declares `!important` — les surcharges doivent l'etre aussi. `#sidebar` porte les memes classes sur /profile (Profile.html.twig) : le scope `body.uft-home-page` evite de toucher cette page-la. -------------------------------------------------------------------------- */ @media (max-width: 991.98px) { body.uft-home-page main.container { /* `pt-5` / `pb-5` du `
` de base.html.twig : 48px de chaque cote. En haut, l'en-tete fixe a deja son propre espaceur (`.fixed-heade-holder`) ; en bas, la reserve du `body` couvre la barre de navigation. Ces 48px ne servent donc ni d'un cote ni de l'autre. Utilitaires Bootstrap, donc `!important` requis. */ padding-top: 0 !important; padding-bottom: 0 !important; } body.uft-home-page #sidebar { margin-bottom: 0 !important; padding-bottom: 0 !important; } } /* ----------------------------------------------------------------------------- (6) RUBRIQUES PAS ENCORE OUVERTES ----------------------------------------------------------------------------- MATCHS, STAGES et PLATEAUX ne mènent nulle part : leur bouton n'est pas entouré d'un lien, contrairement à TOURNOIS. Rien ne le signalait — on cliquait sans que rien ne se passe. Le marqueur est posé dans le gabarit (`home-card-soon`), pas déduit en CSS : activer une rubrique doit être un geste explicite, pas un effet de bord. PAS de media query : l'information vaut autant en desktop qu'en mobile. -------------------------------------------------------------------------- */ /* Voile sombre sur l'image. Pose sur le conteneur interne, celui qui porte `position: relative` en style inline — c'est lui le bloc conteneur des elements absolus de la carte, et sa hauteur vaut celle de l'image, seul enfant dans le flux. */ body.uft-home-page .home-card-soon > div::before { content: ""; position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.55); z-index: 1; pointer-events: none; } /* La decoupe d'angle n'est pas en CSS : elle est DANS les PNG, en zones transparentes. Un voile rectangulaire debordait donc du visuel. Mesures relevees dans le canal alpha des fichiers (332x222) : le biseau couvre 119px sur la largeur et 66px sur la hauteur, soit 35.8% x 29.7%. Exprime en pourcentages, il suit l'image a n'importe quelle taille. Chaque visuel a UN coin coupe, mais pas le meme — d'ou deux regles : accueil-match-tmp-2 (MATCHS) et -4 (STAGES) -> haut-gauche accueil-match-tmp-3 (PLATEAUX) -> bas-droit (tmp-1, TOURNOIS, est coupe en haut a droite mais n'a pas de voile.) */ body.uft-home-page .home-card-matchs > div::before, body.uft-home-page .home-card-stages > div::before { -webkit-clip-path: polygon(35.8% 0, 100% 0, 100% 100%, 0 100%, 0 29.7%); clip-path: polygon(35.8% 0, 100% 0, 100% 100%, 0 100%, 0 29.7%); } body.uft-home-page .home-card-plateaux > div::before { -webkit-clip-path: polygon(0 0, 100% 0, 100% 70.3%, 64.2% 100%, 0 100%); clip-path: polygon(0 0, 100% 0, 100% 70.3%, 64.2% 100%, 0 100%); } /* Badge sans fond : le voile suffit a le detacher. L'ombre portee garantit la lisibilite quelle que soit la photo dessous. */ body.uft-home-page .home-card-soon-badge { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; color: #ffffff; font-family: 'Futura Std', sans-serif; font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: 1px; line-height: 1; white-space: nowrap; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6); pointer-events: none; } body.uft-home-page .home-card-soon .btn { z-index: 2; opacity: 0.65; pointer-events: none; } body.uft-home-page .home-card-soon > div { cursor: not-allowed; } @media (max-width: 767.98px) { body.uft-home-page .home-card-soon-badge { font-size: 12px; letter-spacing: .5px; } }