/* ============================================================================= ZONES SURES iOS — VARIABLES ET SIMULATION ============================================================================= Toutes les marges de zone sure du site passent par ces deux variables plutot que par `env()` en direct. Raison : `env()` n'est pas surchargeable, alors qu'une propriete personnalisee l'est — c'est ce qui rend la SIMULATION possible hors iOS. En temps normal elles valent l'encart reel, donc 0 partout sauf sur un appareil a encoche ou a barre d'accueil. --------------------------------------------------------------------------- POUR TESTER SANS IPHONE --------------------------------------------------------------------------- Ajouter la classe `uft-debug-safe-area` sur ou sur , depuis l'inspecteur ou la console : document.documentElement.classList.toggle('uft-debug-safe-area') Les encarts prennent alors des valeurs realistes (47px en haut, 34px en bas, soit un iPhone a encoche en portrait) et tout le site se comporte comme sur l'appareil. Retirer la classe revient a l'etat normal — rien a recompiler, rien a redeployer. La classe est prevue POUR LE TEST : elle n'est posee nulle part dans les gabarits. ============================================================================= */ :root { --uft-safe-top: env(safe-area-inset-top, 0px); --uft-safe-bottom: env(safe-area-inset-bottom, 0px); --uft-safe-left: env(safe-area-inset-left, 0px); --uft-safe-right: env(safe-area-inset-right, 0px); } /* Les deux cibles sont prevues : la classe peut etre posee indifferemment sur ou sur . Une propriete personnalisee ne descend que vers les DESCENDANTS — la poser sur ne l'appliquerait donc pas a , d'ou les deux selecteurs. */ html.uft-debug-safe-area, body.uft-debug-safe-area { --uft-safe-top: 47px; --uft-safe-bottom: 34px; --uft-safe-left: 0px; --uft-safe-right: 0px; } /* --- Surcouches : modals et panneaux coulissants --------------------------- `.modal` et `.offcanvas` sont en `position: fixed` cales sur les quatre cotes du viewport. Avec `viewport-fit=cover`, ils s'etendent donc SOUS l'encoche et sous la barre d'accueil : en haut, le titre et la croix de fermeture d'un modal se retrouvent derriere l'ilot dynamique. On agit sur le conteneur, pas sur `.modal-dialog` : ses marges changent selon le point de rupture (0.5rem en dessous de 576px, 1.75rem au-dessus), et les surcharger obligerait a rejouer chaque valeur. Un padding sur le conteneur s'ajoute proprement a l'existant, quelle que soit la taille d'ecran. `.modal` etant en `overflow-y: auto`, un modal plus haut que l'ecran defile a l'interieur de ce padding : rien n'est masque. Bootstrap ne pose pas de padding vertical sur ces deux conteneurs — aucun risque d'ecraser une valeur existante. Le padding lateral qu'il ajoute pour compenser la barre de defilement vise `body`, pas `.modal`. Sans effet hors iOS : les encarts y valent 0. -------------------------------------------------------------------------- */ .modal, .offcanvas { padding-top: var(--uft-safe-top, 0px); padding-bottom: var(--uft-safe-bottom, 0px); } /* --- Notifications toastr -------------------------------------------------- DESKTOP : inchange. En haut a droite, comme configure dans base.html.twig (`positionClass: 'toast-top-right'`), avec l'encart de zone sure ajoute. MOBILE : repositionnees EN BAS AU CENTRE. C'est la zone du pouce, et ca libere l'en-tete — une notification calee en haut a droite recouvrait le selecteur de langue. Fait en CSS et non via `positionClass` : l'option JavaScript est lue une seule fois au chargement, elle ne suivrait pas une rotation d'ecran. Ici la bascule est immediate, et `base.html.twig` n'a pas besoin de changer. -------------------------------------------------------------------------- */ #toast-container.toast-top-right, #toast-container.toast-top-center, #toast-container.toast-top-left, #toast-container.toast-top-full-width { top: calc(12px + var(--uft-safe-top, 0px)) !important; right: calc(12px + var(--uft-safe-right, 0px)) !important; } #toast-container.toast-bottom-right, #toast-container.toast-bottom-center, #toast-container.toast-bottom-left, #toast-container.toast-bottom-full-width { bottom: calc(12px + var(--uft-safe-bottom, 0px)) !important; } @media (max-width: 850px) { /* Le selecteur couvre les huit positions : quelle que soit celle qui sera configuree un jour dans base.html.twig, le rendu mobile reste celui-ci. Toutes les valeurs sont en `!important` : elles surchargent la feuille du CDN, qu'on ne peut pas modifier. */ #toast-container[class*="toast-"] { top: auto !important; right: auto !important; left: 50% !important; transform: translateX(-50%); width: calc(100vw - 24px) !important; max-width: 420px !important; /* Au-dessus de la barre de navigation basse quand il y en a une — voir les deux regles suivantes. Ici, le cas sans barre. */ bottom: calc(16px + var(--uft-safe-bottom, 0px)) !important; } /* Les deux classes qui signalent une barre basse, et sa hauteur. Sans ce decalage, la notification se poserait dessus. */ body.uft-bottom-nav #toast-container[class*="toast-"] { bottom: calc(76px + 16px + var(--uft-safe-bottom, 0px)) !important; } body.uft-tournoi-bottom-nav #toast-container[class*="toast-"] { bottom: calc(78px + 16px + var(--uft-safe-bottom, 0px)) !important; } /* La feuille du CDN reduit la largeur des notifications sous 480px (`width: 11em`) : sans ca, elles ne rempliraient pas le conteneur. */ #toast-container[class*="toast-"] > div { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } } /* --- Boites de dialogue jquery-confirm ------------------------------------- Un seul usage aujourd'hui (club.js, retrait d'une equipe), mais la boite est centree dans un conteneur plein ecran : meme traitement que les modals, pour que le jour ou un contenu long la fait deborder, elle reste degagee. */ .jconfirm { padding-top: var(--uft-safe-top, 0px); padding-bottom: var(--uft-safe-bottom, 0px); } body { background-color: #fafafa; font-family: 'Manrope', sans-serif; } body.uft-green-body { background-image: url("../img/bg_player.jpeg"); position: relative; background-size: cover; background-position: center; } body.uft-green-body:before { content: ''; /*background-color: #014F27;*/ background-image: linear-gradient(to bottom, #000000, #108147A6); width: 100%; height: 100%; display: block; position: absolute; z-index: -1; } .uft-white-text { color: white !important; } input:focus, textarea:focus, select:focus, a:focus { outline: none; } .btn-green-rounded-md { border-radius: 20px; color: white; background-color: #026633; padding: 5px 20px; } /* Sponsor carousel alignment */ #sponsorCarousel #sponsor-list { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; justify-items: center; align-items: start; --bs-gutter-x: 0; margin-left: 0; margin-right: 0; } #sponsorCarousel #sponsor-list > div { width: 100%; max-width: 100%; min-width: 0; text-align: center; padding: 8px 6px; margin: 0; box-sizing: border-box; } #sponsorCarousel #sponsor-list a { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 90px; height: 90px; background: #f2f2f2; border-radius: 8px; margin: 0 auto; } #sponsorCarousel #sponsor-list img { width: 100%; height: 100%; max-width: 80px; max-height: 80px; object-fit: contain; display: block; } #sponsorCarousel .sponsors-subtitle { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 1.2; min-height: 2.4em; text-align: center; } @media (max-width: 576px) { #sponsorCarousel #sponsor-list a { max-width: 70px; height: 70px; } #sponsorCarousel #sponsor-list img { max-width: 60px; max-height: 60px; } #sponsorCarousel .sponsors-subtitle { min-height: 2.2em; font-size: 0.9em; } } .bg-cut-grey { background-image: url(../img/bg_cut_grey.svg); background-size: 100%; background-repeat: no-repeat; background-position: -50% 100%; } .footer.uft-bg-dark { background-color: #000000; color: white; } .social-icons img { width: 20px; margin-right: 10px; } .newsletter-form input, .newsletter-form button { border-radius: 0px; } .newsletter-form .btn-subscribr-newsletter { background-image: url(../img/chevron-right.svg); background-size: 10px; background-repeat: no-repeat; background-position: center; background-color: #026633; height: 100%; padding: 18px; border: 1px solid #026633; } .r-b-c { -webkit-clip-path: polygon(0 0, 100% 0, 100% 74%, 65% 100%, 0 100%); clip-path: polygon(0 0, 100% 0, 100% 74%, 65% 100%, 0 100%); } .footer-menu-container { list-style: none; padding-left: 0px; } .footer-menu-item { margin-bottom: 10px; color: white; } .footer-menu-item a { color: white; } .after-footer a { color: #82829B; font-size: 14px; } .copyrigth-footer { border-top: 1px solid #343434; color: #82829B; font-size: 12px; background-color: #000000; } .btns-container-cutted { background-color: white; padding: 15px; -webkit-clip-path: polygon(0px 30px, 30px 0px, 100% 0px, 100% 100%, 0px 100%); clip-path: polygon(0px 30px, 30px 0px, 100% 0px, 100% 100%, 0px 100%); box-shadow: 0px 14px 0px rgb(0 0 0 / 41%); } .btns-container-cutted.uft-md { padding: 10px; } .btns-container-cutted.uft-md .btn-green-elec-md { width: calc(50% - 4px); font-size: 14px; padding: 10px; } .btns-container-cutted.uft-md .btn-green-elec-md { -webkit-clip-path: polygon(0px 15px, 15px 0px, 100% 0px, 100% 100%, 0px 100%); clip-path: polygon(0px 20px, 20px 0px, 100% 0px, 100% 100%, 0px 100%); } .btns-container-cutted.uft-nobg { background-color: transparent; border: 1px solid #026633; position: relative; } /* .btns-container-cutted.uft-nobg::before { content: ''; position: absolute; top: -1px; left: -1px; right: -1px; bottom: -1px; z-index: -1; border: 1px solid #026633; clip-path: polygon(0px 30px, 30px 0px, 100% 0px, 100% 100%, 0px 100%); }*/ .btns-container-cutted.uft-nobg .btn-green-elec-md:not(.uft-active-btn) { background-color: transparent; } textarea:focus, textarea.form-control:focus, input.form-control:focus, input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, input[type=number]:focus, [type=text].form-control:focus, [type=password].form-control:focus, [type=email].form-control:focus, [type=tel].form-control:focus, [contenteditable].form-control:focus { box-shadow: inherit; } .uft-grey-input { background: #e1e2ed; } .form-control:disabled, .form-control[readonly] { background-color: #e1e2ed; opacity: 1; } .uft-input-text { border-radius: 0px; border: 0px solid #ccc; padding: 5px 20px; height: 45px; } /* Couleur du texte indicatif (placeholder). Sans cette règle, Bootstrap 5.3 applique `--bs-secondary-color` = rgba(33,37,41,.75), soit un gris quasi noir : le placeholder devenait presque indiscernable d'une valeur réellement saisie (#212529) et les champs vides paraissaient déjà remplis. On reprend #82829B, le gris de la charte déjà utilisé pour les textes secondaires (.forget-password-link, .keep_me_logged_in) : nettement plus clair que le texte saisi, tout en restant lisible. `opacity: 1` est indispensable pour Firefox, qui applique sinon une opacité par défaut au placeholder et l'éclaircit encore. */ .uft-input-text::placeholder, .uft-input-select::placeholder { color: #82829B; opacity: 1; } .uft-input-text::-webkit-input-placeholder, .uft-input-select::-webkit-input-placeholder { color: #82829B; opacity: 1; } .uft-input-text::-moz-placeholder, .uft-input-select::-moz-placeholder { color: #82829B; opacity: 1; } .uft-input-text:-ms-input-placeholder, .uft-input-select:-ms-input-placeholder { color: #82829B; opacity: 1; } .uft-input-text-otp { width: 100%; border: 0px; border-radius: 0px; font-size: 37px; font-weight: 900; text-align: center; background-color: transparent; color: #026633; font-style: italic; border-bottom: 3px solid #026633; } .uft-input-text-otp.uft-input-filled { border-bottom: 3px solid transparent; } .uft-input-text-otp:focus { border-bottom: 3px solid transparent; } .uft-input-select { border-radius: 0px; border: 0px solid #ccc; padding: 5px 20px; height: 45px; } .uft-input-select { -moz-appearance: none; /* Firefox */ -webkit-appearance: none; /* Safari and Chrome */ appearance: none; background-image: url('../img/input-select-chevron.svg'); background-repeat: no-repeat; background-position: 96% center; } .uft-underline { text-decoration: underline; } .uft-info-text { color: #373759; font-size: 16px; font-weight: 400; word-wrap: break-word; margin-bottom: 20px; display: inline-block; } .uft-input-label { color: #026633; font-style: italic; font-weight: 900; word-wrap: break-word; background-position: center left; background-repeat: no-repeat; font-family: "Roboto", sans-serif; } .uft-input-label.md-lbl { font-size: 13px; background-size: 20px; } .view-pass { background-image: url('../img/view-password.svg'); width: 25px; height: 25px; display: inline-block; background-repeat: no-repeat; background-position: center; position: absolute; right: 10px; top: calc(50% - 12px); cursor: pointer; } /* ################### LOGIN PAGE SPECIFIC */ .for-login-form .btn-green-elec-md { width: calc(50% - 4px); font-size: 21px; padding: 15px; } .forget-password-link { display: block; margin-left: auto; width: fit-content; color: #82829B; font-size: 17px; } .keep_me_logged_in { color: #82829B; font-size: 17px; } .register-account-type-selector { -webkit-clip-path: polygon(50px 0, 100% 0, calc(100% - 50px) 100%, 0 100%); clip-path: polygon(50px 0, 100% 0, calc(100% - 50px) 100%, 0 100%); padding: 30px 70px; background-color: #026633; } .register-account-type-selector span { display: block; color: #ffffff; font-weight: 900; font-style: italic; font-family: "Roboto", sans-serif; margin-top: 10px; font-size: 13px; opacity: 0.7; } .register-account-type-selector .registration-role-select>div { text-align: center; cursor: pointer; } .register-account-type-selector .registration-role-select>div:hover img { background-color: white; border-radius: 100%; } .register-account-type-selector .registration-role-select>div:hover span { opacity: 1; } .selected-register-player img { background-color: white; border-radius: 100%; } .selected-register-player span { opacity: 1; } .registration-role-select { display: flex; } .registration-role-select>div { flex: 1; text-align: center; padding: 10px; } label.error { color: red; font-size: 13px; } #formTournoiOne label.error { display: block; font-weight: 600; } #formTournoiOne .select2-selection.select2-selection--multiple[role="combobox"] { height: fit-content !important; padding-bottom: 0px !important; } #formTournoiOne .select2-selection.select2-selection--multiple[role="combobox"]>ul { height: fit-content !important; padding-bottom: 0px !important; } .btns-container-cutted a, .btns-container-cutted a:hover { color: inherit; text-decoration: inherit; } .remove-btn { background-color: red; width: 24px; display: block; height: 24px; text-align: center; margin-right: 10px; border-radius: 2px; color: white; font-size: 12px; font-weight: 900; line-height: 24px; cursor: pointer; } .uft-club-search-result-name { display: block; color: #026633; font-weight: 800; font-family: "Roboto", sans-serif; text-transform: uppercase; font-style: italic; text-align: center; font-size: 12px; } .uft-club-search-result-item { text-align: center; margin: auto; padding: 15px; width: 100%; height: 150px; align-items: center; color: white; padding: 15px 18px; margin-bottom: 20px; } .uft-club-search-result-item img { width: 80px; height: 80px; object-fit: contain; object-position: center; cursor: pointer; } #selected-clubs-list .uft-club-search-result-item img { width: 50px; height: 50px; border-radius: 100%; object-fit: cover; } #selected-clubs-list .uft-club-search-result-item { text-align: left; margin: auto; padding: 15px; width: 100%; height: auto; display: flex; align-items: center; color: white; background-color: #026633; padding: 15px 20px; -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%); margin-bottom: 20px; } #club-serach-result-list .uft-club-search-result-item:hover { opacity: 1; filter: drop-shadow(0px 0px 9px #797979); } #club-serach-result-list .uft-club-search-result-item{ background-image: url('../img/club-search-item-selected.png'); background-size: 100% 100%; background-repeat: no-repeat; } .uft-club-search-result-item.checked-s-i { background-image: url('../img/club-search-item-selected-after.png')!important; background-size: 100% 100%; background-repeat: no-repeat; } .uft-club-search-result-item.checked-s-i .uft-club-search-result-name { color:white!important; } .uft-club-search-result-item.checked-s-i { filter: drop-shadow(0px 0px 9px #797979); } .uft-club-search-club-count:before{ content:''; display: block; } .uft-club-search-club-count .uft-ck-item label { color: white; background-color: #858EBE; } .uft-club-search-club-count .uft-ck-item label { padding: 5px 12px; } .disable-elmt { pointer-events: none; opacity: 0.5; } /* Reserve dans le flux la hauteur de l'en-tete, qui est `position: fixed`. Sous 850px, fix/responsive.css la remplace par `54px + l'encart de zone sure` — la version mobile de l'en-tete etant plus basse. Toute modification de cette valeur doit etre reportee sur le calcul de `min-height` de `.s-body` dans tournoi-new.css, qui la soustrait. */ .fixed-heade-holder { height: 80px; } #poules-no-clubs { text-align: center; color: red; text-transform: uppercase; font-weight: 300; display: none; } .om-disable-col { pointer-events: none; opacity: 0.4; } .req-field-star { color: #c42828; display: inline-block; padding-left: 5px; } .pl-tm-select { cursor: pointer; } .pl-tm-selected { border-bottom: 3px solid #006f3a; } .pl-tm-select.pl-tm-selected { position: relative; } .pl-tm-select.pl-tm-selected:before { position: absolute; display: block; width: 19px; height: 19px; content: 'x'; background-color: red; text-align: center; font-size: 16px; font-weight: 400; border-radius: 0px; line-height: 15px; right: 0px; top: 0px; } .finales-popover-item img { width: 20px; height: 20px; border-radius: 100%; object-fit: cover; } .finales-popover-item { display: flex; gap: 5px; cursor: pointer; padding: 5px 10px; color: #006f3a; } .list-group-item:first-child { border: 0px; } .list-group-item+.list-group-item { border: 0px; } .finales-popover-group { display: inline-block; vertical-align: top; margin-right: 4px; list-style-type: none; padding: 0; } .popover-body { padding: 5px; } /* .popover-finales-team { max-width: 300px; width: 300px; }*/ .popover-finales-team { max-width: fit-content; width: fit-content; } /* .popover-finales-team .finales-popover-group { width: calc(50% - 4px); }*/ .ph-f-team-item { display: flex; } .ph-f-team-item img { width: 25px; height: 25px; margin-right: 5px; border-radius: 100%; } .red-txt { color: red; } .phase-finale-item { margin-bottom: 30px; } .ph-f-place-number { margin-left: 30px; } .hidden-elmnt { display: none !important; } .side-menu-search { display: none !important; } /* Define a class to slide in from the left */ .slide-in-left { display: inherit !important; /* Replace display: none with inherit */ animation: slideIn 0.5s ease-out forwards; } /* Keyframes for the slide-in animation */ @keyframes slideIn { from { transform: translateX(-100%); /* Start from off-screen left */ opacity: 0; /* Optional: Start with 0 opacity */ } to { transform: translateX(0); /* End at original position */ opacity: 1; /* Optional: End with full opacity */ } } .align-filter-left { text-align: left !important; } .sb-select label { padding: 0px 0px !important; font-size: 12px !important; } .sb-select .uft-ck-item.form-control { margin: 2px; } .sb-select .uft-ck-item { width: fit-content; border: 1px solid #37875d; border-radius: 0px; clip-path: inherit !important; } span.list-tounroi-adresse { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; line-height: 1.2em; max-height: 2.4em; } .favorite-toggle { font-size: 29px; color: #ccc; margin-left: 20px; cursor: pointer; } .favorite-toggle:hover { opacity: 0.7; } .favorite-toggle.added-to-f { color: #ffcc00; } .fav-btn-sm { font-size: 22px; margin-left: 10px; } .scrollable-row { position: relative; } .scrollable-row .row { display: flex; flex-wrap: nowrap; overflow-x: auto !important; white-space: nowrap !important; } .scrollable-row .row>.col-lg-4 { display: inline-block !important; /* Ensures columns stay inline */ float: none !important; /* Prevents Bootstrap's default float behavior */ flex: 0 0 auto; max-width: 33.333%; box-sizing: border-box; } .scroll-prev, .scroll-next { position: absolute; width: 60px; height: 60px; background-color: rgb(58 58 58 / 70%); /* Black with transparency */ color: white; /* White chevron */ border: none; border-radius: 0px; /* Optional: slightly rounded corners */ display: flex; /* Flexbox for centering the icon */ align-items: center; justify-content: center; cursor: pointer; z-index: 10; } .scroll-prev:hover, .scroll-next:hover { background-color: rgba(0, 0, 0, 0.9); /* Slightly darker on hover */ } .scroll-prev { left: 0px; top: 7%; transform: translateY(-50%); } .scroll-next { right: 0px; top: 7%; transform: translateY(-50%); } .scroll-prev::before, .scroll-next::before { content: ''; display: inline-block; width: 17px; height: 17px; border-style: solid; border-width: 3px 3px 0 0; transform: rotate(45deg); /* Chevron shape */ } .scroll-prev::before { transform: rotate(-135deg); /* Point left */ } .scroll-next::before { /*transform: rotate(-45deg)*/ /* Point right */ } .full-match-list-ctnr { margin-top: 20px; min-height: 200px !important; } .match-to-select { height: 60px; margin-bottom: 10px; cursor: move; } .full-match-list-parent-ctnr .match_item_start_time_parent { display:none!important; } .inserted-match-item[is_match_retour="true"] .clip-leftPoint { border-bottom: 3px solid blue; border-right: 3px solid blue; } .match-to-select[is_match_retour="true"] { background: blue; border-left: 3px solid blue; border-top: 3px solid blue; border-right: 3px solid blue; border-bottom: 3px solid blue; } .match-twice-same-time .clip-leftPoint { background-color: #ff7272 !important; } /* Ancien override .match-forfait-badge.position-absolute retiré : le badge FORFAIT est maintenant posé en overlay sur le logo de l'équipe forfaitaire (via .forfait-logo-wrapper) au lieu d'être en haut à droite de la tuile. Le positionnement est géré en inline sur le badge lui-même. */ html { scroll-behavior: auto !important; } div[is_match_finale="true"] .match-title { font-size: 0.9rem; text-align: left; width: 100%; padding-left: 10px; text-align: center; } .etiquette-ph-f { font-size: 11px; background-color: #006f3a; padding: 5px 5px; margin-bottom: 5px; color: white; font-weight: 600; /*position: absolute; top: 0px; right: 10px;*/ } /* Same shape & sizing as .etiquette-ph-f, different colour so pool journey labels don't get mistaken for finale placement labels. */ .etiquette-poule { font-size: 11px; background-color: #1565c0; padding: 5px 5px; margin-bottom: 5px; color: white; font-weight: 600; } .no-classement-container { clip-path: polygon(11% 0px, 80% 0%, 100% 0px, 100% 77%, 89% 100%, 20% 100%, 0px 100%, 0px 20%); margin-bottom: 5em; background: linear-gradient(rgb(10, 9, 5), rgb(24, 20, 5), rgb(50, 45, 15), rgb(95, 86, 31)); padding: 3em; } .ranking-table { width: 100%; border-collapse: separate; border-spacing: 0 15px; } table.ranking-table th, table.ranking-table td { /* padding: 15px 20px; */ vertical-align: middle; color: white; font-weight: bold; /* -webkit-clip-path: polygon(100% 0, 98% 100%, 0 100%, 2% 0); */ } .clip-path-parallelogram-number { clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%); } .clip-path-parallelogram-td { clip-path: polygon(3.5% 0%, 100% 0%, 100% 100%, 0% 100%); } .clip-path-parallelogram-td0 { clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%); } .clip-path-parallelogram-td-5 { clip-path: polygon(100% 0, 98% 100%, 0 100%, 5% 0); } .p-shape-both { clip-path: polygon( 20px 0, /* coin haut-gauche décalé de 20px */ 100% 0, /* coin haut-droit */ calc(100% - 20px) 100%, /* coin bas-droit décalé de 20px vers la gauche */ 0 100% /* coin bas-gauche */ ); } /* 2) Seulement le côté gauche incliné → penché à gauche */ .p-shape-left { clip-path: polygon( 20px 0, /* coin haut-gauche décalé */ 100% 0, /* coin haut-droit */ 100% 100%, 0 100% ); } /* 3) Seulement le côté droit incliné → penché à droite */ .p-shape-right { clip-path: polygon( 0 0, /* coin haut-gauche */ 100% 0, /* coin haut-droit */ calc(100% - 20px) 100%, /* coin bas-droit décalé → angle droit */ 0 100% /* coin bas-gauche */ ); } .bg-color-td-1 { height: 46px; background-color: #f1a43c; } .bg-color-td-2 { background-color: #a9a9a9; height: 46px; } .bg-color-td-3 { background-color: #502713; height: 46px; } .bg-color-td-4 { background-color: #fff; height: 46px; } .bg-color-td-4 *{ color:#6b6b6b!important; } .table-w0 { width: 70%; } .table-w1 { width: 30%; } #classement-tabs>li:not(.active) { opacity: 0.3; } .game-btn-ctnr{ min-height: 35px; } .disable-next{ pointer-events: none; opacity: 0.5; } .selection-fix-best .btn:not(.active){ color: white!important; border-radius: 0px!important; border: 0px!important; } .selection-fix-best .btn.active{ border-radius: 0px!important; background-color: white; color: green; clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%); border-radius: 0px; } .selection-fix-best .btn:hover { color: white!important; background-color: inherit!important; border-color: transparent!important; } .select-player-trigger.disabled{ opacity: 0.7!important; background-color: #e1e2ed!important; } .finals-lock-edit .ph-f-team-item{opacity: 0.7;} .finals-lock-edit .icon-btn-pen{ border: 1px dashed #00401e; } .finals-lock-edit .bi-pen:before{ content: "\f47b"; } .p-texte-reglements{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; /* max 3 lignes */ overflow: hidden; } .condition_jeux_container label.error{ text-align: left; } /* ============================================================================= Logo header UFT — override taille en mobile (< 768px) S'applique sur TOUTES les pages du site (pas seulement la landing). Doit battre `.mobileDevices .top-bar-logo` de responsive.css (spéc 0,2,0 + !important). Sélecteur `body.mobileDevices .top-bar-logo` (spéc 0,2,1) + !important pour gagner la cascade. ============================================================================= */ @media (max-width: 768px) { body.mobileDevices .top-bar-logo, body.mobileDevices img.top-bar-logo { height: 45px !important; width: auto !important; } } /* ============================================================================= Landing page — bouton "Connecte toi !" Cette section forçait son affichage en mobile (`display: inline-block !important`), en surcharge de la règle qui le masque dans responsive.css. RETIRÉE sur demande : le bouton est désormais masqué en mobile sur TOUTES les pages, landing comprise. L'accès à la connexion reste assuré depuis le menu hamburger de l'en-tête, qui contient le même lien, et depuis les boutons « Connexion » de la section tarifs de la landing. ============================================================================= */