/* VERSION V4 - MENUS MOBILES ALIGNES A GAUCHE - 2026-09-06 */ /* ===================================================================== THEME : DEFAULT Base fonctionnelle : Xbox V8.9.4 Tous les correctifs responsive / tableaux / dropdowns / z-index / offcanvas de la V8.9.4 sont conservés. ===================================================================== */ @charset "UTF-8"; /* ===================================================================== CSS UNIQUE DU SITE - UCL / UFL Regroupe Bootstrap 5, DataTables et tous les CSS personnalisés du site. Le thème UCL bleu est placé en dernier pour conserver la priorité. ===================================================================== */ /* ===================================================================== BOOTSTRAP 5 - BASE Source : bootstrap.min.css ===================================================================== */ /*! * Bootstrap v5.0.0 (https://getbootstrap.com/) * Copyright 2011-2021 The Bootstrap Authors * Copyright 2011-2021 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) */:root{--bs-blue: #FFFFFF;--bs-indigo: #FFFFFF;--bs-purple: #00D9FF;--bs-pink: #d63384;--bs-red: #dc3545;--bs-orange: #3CAEFF;--bs-yellow: #0878D1;--bs-green: #198754;--bs-teal: #20c997;--bs-cyan: #00D9FF;--bs-white: #fff;--bs-gray: #6c757d;--bs-gray-dark: #343a40;--bs-primary: #0878D1;--bs-secondary: #02050C;--bs-success: #198754;--bs-info: #00D9FF;--bs-warning: #0878D1;--bs-danger: #dc3545;--bs-light: #F2F2F2;--bs-dark: #030711;--bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0))}*,*::before,*::after{box-sizing:border-box}@media(prefers-reduced-motion: no-preference){:root{scroll-behavior:smooth}}body{margin:0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,"Roboto",sans-serif;font-size:1rem;font-weight:400;line-height:1.5;color:#757575;background-color:#fff;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0)}hr{margin:1rem 0;color:inherit;background-color:currentColor;border:0;opacity:.25}hr:not([size]){height:1px}h6,.h6,h5,.h5,h4,.h4,h3,.h3,h2,.h2,h1,.h1{margin-top:0;margin-bottom:.5rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,"Jost",sans-serif;font-weight:500;line-height:1.2;color:#222}h1,.h1{font-size:calc(1.375rem + 1.5vw)}@media(min-width: 1200px){h1,.h1{font-size:2.5rem}}h2,.h2{font-size:calc(1.325rem + 0.9vw)}@media(min-width: 1200px){h2,.h2{font-size:2rem}}h3,.h3{font-size:calc(1.3rem + 0.6vw)}@media(min-width: 1200px){h3,.h3{font-size:1.75rem}}h4,.h4{font-size:calc(1.275rem + 0.3vw)}@media(min-width: 1200px){h4,.h4{font-size:1.5rem}}h5,.h5{font-size:1.25rem}h6,.h6{font-size:1rem}p{margin-top:0;margin-bottom:1rem}abbr[title],abbr[data-bs-original-title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}ol,ul{padding-left:2rem}ol,ul,dl{margin-top:0;margin-bottom:1rem}ol ol,ul ul,ol ul,ul ol{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}small,.small{font-size:0.875em}mark,.mark{padding:.2em;background-color:#fcf8e3}sub,sup{position:relative;font-size:0.75em;line-height:0;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}a{color:#0878D1;text-decoration:none}a:hover{color:#0878D1}a:not([href]):not([class]),a:not([href]):not([class]):hover{color:inherit;text-decoration:none}pre,code,kbd,samp{ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,var(--bs-font-monospace);font-size:1em;direction:ltr /* rtl:ignore */;unicode-bidi:bidi-override}pre{display:block;margin-top:0;margin-bottom:1rem;overflow:auto;font-size:0.875em}pre code{font-size:inherit;color:inherit;word-break:normal}code{font-size:0.875em;color:#d63384;word-wrap:break-word}a>code{color:inherit}kbd{padding:.2rem .4rem;font-size:0.875em;color:#fff;background-color:#212529;border-radius:0}kbd kbd{padding:0;font-size:1em;font-weight:700}figure{margin:0 0 1rem}img,svg{vertical-align:middle}table{caption-side:bottom;border-collapse:collapse}caption{padding-top:.5rem;padding-bottom:.5rem;color:#6c757d;text-align:left}th{text-align:inherit;text-align:-webkit-match-parent}thead,tbody,tfoot,tr,td,th{border-color:inherit;border-style:solid;border-width:0}label{display:inline-block}button{border-radius:0}button:focus:not(:focus-visible){outline:0}input,button,select,optgroup,textarea{margin:0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,inherit;font-size:inherit;line-height:inherit}button,select{text-transform:none}[role=button]{cursor:pointer}select{word-wrap:normal}select:disabled{opacity:1}[list]::-webkit-calendar-picker-indicator{display:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button:not(:disabled),[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled){cursor:pointer}::-moz-focus-inner{padding:0;border-style:none}textarea{resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{float:left;width:100%;padding:0;margin-bottom:.5rem;font-size:calc(1.275rem + 0.3vw);line-height:inherit}@media(min-width: 1200px){legend{font-size:1.5rem}}legend+*{clear:left}::-webkit-datetime-edit-fields-wrapper,::-webkit-datetime-edit-text,::-webkit-datetime-edit-minute,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-year-field{padding:0}::-webkit-inner-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:textfield}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-color-swatch-wrapper{padding:0}::file-selector-button{font:inherit}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}iframe{border:0}summary{display:list-item;cursor:pointer}progress{vertical-align:baseline}[hidden]{display:none !important}.lead{font-size:1.25rem;font-weight:300}.display-1{font-size:calc(1.625rem + 4.5vw);font-weight:600;line-height:1.2}@media(min-width: 1200px){.display-1{font-size:5rem}}.display-2{font-size:calc(1.575rem + 3.9vw);font-weight:600;line-height:1.2}@media(min-width: 1200px){.display-2{font-size:4.5rem}}.display-3{font-size:calc(1.525rem + 3.3vw);font-weight:600;line-height:1.2}@media(min-width: 1200px){.display-3{font-size:4rem}}.display-4{font-size:calc(1.475rem + 2.7vw);font-weight:600;line-height:1.2}@media(min-width: 1200px){.display-4{font-size:3.5rem}}.display-5{font-size:calc(1.425rem + 2.1vw);font-weight:600;line-height:1.2}@media(min-width: 1200px){.display-5{font-size:3rem}}.display-6{font-size:calc(1.375rem + 1.5vw);font-weight:600;line-height:1.2}@media(min-width: 1200px){.display-6{font-size:2.5rem}}.list-unstyled{padding-left:0;list-style:none}.list-inline{padding-left:0;list-style:none}.list-inline-item{display:inline-block}.list-inline-item:not(:last-child){margin-right:.5rem}.initialism{font-size:0.875em;text-transform:uppercase}.blockquote{margin-bottom:1rem;font-size:1.25rem}.blockquote>:last-child{margin-bottom:0}.blockquote-footer{margin-top:-1rem;margin-bottom:1rem;font-size:0.875em;color:#6c757d}.blockquote-footer::before{content:"— "}.img-fluid{max-width:100%;height:auto}.img-thumbnail{padding:.25rem;background-color:#fff;border:1px solid #dee2e6;border-radius:0;max-width:100%;height:auto}.figure{display:inline-block}.figure-img{margin-bottom:.5rem;line-height:1}.figure-caption{font-size:0.875em;color:#6c757d}.container,.container-fluid,.container-xxl,.container-xl,.container-lg,.container-md,.container-sm{width:100%;padding-right:var(--bs-gutter-x, 0.75rem);padding-left:var(--bs-gutter-x, 0.75rem);margin-right:auto;margin-left:auto}@media(min-width: 576px){.container-sm,.container{max-width:540px}}@media(min-width: 768px){.container-md,.container-sm,.container{max-width:720px}}@media(min-width: 992px){.container-lg,.container-md,.container-sm,.container{max-width:960px}}@media(min-width: 1200px){.container-xl,.container-lg,.container-md,.container-sm,.container{max-width:1140px}}@media(min-width: 1400px){.container-xxl,.container-xl,.container-lg,.container-md,.container-sm,.container{max-width:1320px}}.row{--bs-gutter-x: 1.5rem;--bs-gutter-y: 0;display:flex;flex-wrap:wrap;margin-top:calc(var(--bs-gutter-y)*-1);margin-right:calc(var(--bs-gutter-x)/-2);margin-left:calc(var(--bs-gutter-x)/-2)}.row>*{flex-shrink:0;width:100%;max-width:100%;padding-right:calc(var(--bs-gutter-x)/2);padding-left:calc(var(--bs-gutter-x)/2);margin-top:var(--bs-gutter-y)}.col{flex:1 0 0%}.row-cols-auto>*{flex:0 0 auto;width:auto}.row-cols-1>*{flex:0 0 auto;width:100%}.row-cols-2>*{flex:0 0 auto;width:50%}.row-cols-3>*{flex:0 0 auto;width:33.3333333333%}.row-cols-4>*{flex:0 0 auto;width:25%}.row-cols-5>*{flex:0 0 auto;width:20%}.row-cols-6>*{flex:0 0 auto;width:16.6666666667%}.col-auto{flex:0 0 auto;width:auto}.col-1{flex:0 0 auto;width:8.3333333333%}.col-2{flex:0 0 auto;width:16.6666666667%}.col-3{flex:0 0 auto;width:25%}.col-4{flex:0 0 auto;width:33.3333333333%}.col-5{flex:0 0 auto;width:41.6666666667%}.col-6{flex:0 0 auto;width:50%}.col-7{flex:0 0 auto;width:58.3333333333%}.col-8{flex:0 0 auto;width:66.6666666667%}.col-9{flex:0 0 auto;width:75%}.col-10{flex:0 0 auto;width:83.3333333333%}.col-11{flex:0 0 auto;width:91.6666666667%}.col-12{flex:0 0 auto;width:100%}.offset-1{margin-left:8.3333333333%}.offset-2{margin-left:16.6666666667%}.offset-3{margin-left:25%}.offset-4{margin-left:33.3333333333%}.offset-5{margin-left:41.6666666667%}.offset-6{margin-left:50%}.offset-7{margin-left:58.3333333333%}.offset-8{margin-left:66.6666666667%}.offset-9{margin-left:75%}.offset-10{margin-left:83.3333333333%}.offset-11{margin-left:91.6666666667%}.g-0,.gx-0{--bs-gutter-x: 0}.g-0,.gy-0{--bs-gutter-y: 0}.g-1,.gx-1{--bs-gutter-x: 0.25rem}.g-1,.gy-1{--bs-gutter-y: 0.25rem}.g-2,.gx-2{--bs-gutter-x: 0.5rem}.g-2,.gy-2{--bs-gutter-y: 0.5rem}.g-3,.gx-3{--bs-gutter-x: 1rem}.g-3,.gy-3{--bs-gutter-y: 1rem}.g-4,.gx-4{--bs-gutter-x: 1.5rem}.g-4,.gy-4{--bs-gutter-y: 1.5rem}.g-5,.gx-5{--bs-gutter-x: 3rem}.g-5,.gy-5{--bs-gutter-y: 3rem}@media(min-width: 576px){.col-sm{flex:1 0 0%}.row-cols-sm-auto>*{flex:0 0 auto;width:auto}.row-cols-sm-1>*{flex:0 0 auto;width:100%}.row-cols-sm-2>*{flex:0 0 auto;width:50%}.row-cols-sm-3>*{flex:0 0 auto;width:33.3333333333%}.row-cols-sm-4>*{flex:0 0 auto;width:25%}.row-cols-sm-5>*{flex:0 0 auto;width:20%}.row-cols-sm-6>*{flex:0 0 auto;width:16.6666666667%}.col-sm-auto{flex:0 0 auto;width:auto}.col-sm-1{flex:0 0 auto;width:8.3333333333%}.col-sm-2{flex:0 0 auto;width:16.6666666667%}.col-sm-3{flex:0 0 auto;width:25%}.col-sm-4{flex:0 0 auto;width:33.3333333333%}.col-sm-5{flex:0 0 auto;width:41.6666666667%}.col-sm-6{flex:0 0 auto;width:50%}.col-sm-7{flex:0 0 auto;width:58.3333333333%}.col-sm-8{flex:0 0 auto;width:66.6666666667%}.col-sm-9{flex:0 0 auto;width:75%}.col-sm-10{flex:0 0 auto;width:83.3333333333%}.col-sm-11{flex:0 0 auto;width:91.6666666667%}.col-sm-12{flex:0 0 auto;width:100%}.offset-sm-0{margin-left:0}.offset-sm-1{margin-left:8.3333333333%}.offset-sm-2{margin-left:16.6666666667%}.offset-sm-3{margin-left:25%}.offset-sm-4{margin-left:33.3333333333%}.offset-sm-5{margin-left:41.6666666667%}.offset-sm-6{margin-left:50%}.offset-sm-7{margin-left:58.3333333333%}.offset-sm-8{margin-left:66.6666666667%}.offset-sm-9{margin-left:75%}.offset-sm-10{margin-left:83.3333333333%}.offset-sm-11{margin-left:91.6666666667%}.g-sm-0,.gx-sm-0{--bs-gutter-x: 0}.g-sm-0,.gy-sm-0{--bs-gutter-y: 0}.g-sm-1,.gx-sm-1{--bs-gutter-x: 0.25rem}.g-sm-1,.gy-sm-1{--bs-gutter-y: 0.25rem}.g-sm-2,.gx-sm-2{--bs-gutter-x: 0.5rem}.g-sm-2,.gy-sm-2{--bs-gutter-y: 0.5rem}.g-sm-3,.gx-sm-3{--bs-gutter-x: 1rem}.g-sm-3,.gy-sm-3{--bs-gutter-y: 1rem}.g-sm-4,.gx-sm-4{--bs-gutter-x: 1.5rem}.g-sm-4,.gy-sm-4{--bs-gutter-y: 1.5rem}.g-sm-5,.gx-sm-5{--bs-gutter-x: 3rem}.g-sm-5,.gy-sm-5{--bs-gutter-y: 3rem}}@media(min-width: 768px){.col-md{flex:1 0 0%}.row-cols-md-auto>*{flex:0 0 auto;width:auto}.row-cols-md-1>*{flex:0 0 auto;width:100%}.row-cols-md-2>*{flex:0 0 auto;width:50%}.row-cols-md-3>*{flex:0 0 auto;width:33.3333333333%}.row-cols-md-4>*{flex:0 0 auto;width:25%}.row-cols-md-5>*{flex:0 0 auto;width:20%}.row-cols-md-6>*{flex:0 0 auto;width:16.6666666667%}.col-md-auto{flex:0 0 auto;width:auto}.col-md-1{flex:0 0 auto;width:8.3333333333%}.col-md-2{flex:0 0 auto;width:16.6666666667%}.col-md-3{flex:0 0 auto;width:25%}.col-md-4{flex:0 0 auto;width:33.3333333333%}.col-md-5{flex:0 0 auto;width:41.6666666667%}.col-md-6{flex:0 0 auto;width:50%}.col-md-7{flex:0 0 auto;width:58.3333333333%}.col-md-8{flex:0 0 auto;width:66.6666666667%}.col-md-9{flex:0 0 auto;width:75%}.col-md-10{flex:0 0 auto;width:83.3333333333%}.col-md-11{flex:0 0 auto;width:91.6666666667%}.col-md-12{flex:0 0 auto;width:100%}.offset-md-0{margin-left:0}.offset-md-1{margin-left:8.3333333333%}.offset-md-2{margin-left:16.6666666667%}.offset-md-3{margin-left:25%}.offset-md-4{margin-left:33.3333333333%}.offset-md-5{margin-left:41.6666666667%}.offset-md-6{margin-left:50%}.offset-md-7{margin-left:58.3333333333%}.offset-md-8{margin-left:66.6666666667%}.offset-md-9{margin-left:75%}.offset-md-10{margin-left:83.3333333333%}.offset-md-11{margin-left:91.6666666667%}.g-md-0,.gx-md-0{--bs-gutter-x: 0}.g-md-0,.gy-md-0{--bs-gutter-y: 0}.g-md-1,.gx-md-1{--bs-gutter-x: 0.25rem}.g-md-1,.gy-md-1{--bs-gutter-y: 0.25rem}.g-md-2,.gx-md-2{--bs-gutter-x: 0.5rem}.g-md-2,.gy-md-2{--bs-gutter-y: 0.5rem}.g-md-3,.gx-md-3{--bs-gutter-x: 1rem}.g-md-3,.gy-md-3{--bs-gutter-y: 1rem}.g-md-4,.gx-md-4{--bs-gutter-x: 1.5rem}.g-md-4,.gy-md-4{--bs-gutter-y: 1.5rem}.g-md-5,.gx-md-5{--bs-gutter-x: 3rem}.g-md-5,.gy-md-5{--bs-gutter-y: 3rem}}@media(min-width: 992px){.col-lg{flex:1 0 0%}.row-cols-lg-auto>*{flex:0 0 auto;width:auto}.row-cols-lg-1>*{flex:0 0 auto;width:100%}.row-cols-lg-2>*{flex:0 0 auto;width:50%}.row-cols-lg-3>*{flex:0 0 auto;width:33.3333333333%}.row-cols-lg-4>*{flex:0 0 auto;width:25%}.row-cols-lg-5>*{flex:0 0 auto;width:20%}.row-cols-lg-6>*{flex:0 0 auto;width:16.6666666667%}.col-lg-auto{flex:0 0 auto;width:auto}.col-lg-1{flex:0 0 auto;width:8.3333333333%}.col-lg-2{flex:0 0 auto;width:16.6666666667%}.col-lg-3{flex:0 0 auto;width:25%}.col-lg-4{flex:0 0 auto;width:33.3333333333%}.col-lg-5{flex:0 0 auto;width:41.6666666667%}.col-lg-6{flex:0 0 auto;width:50%}.col-lg-7{flex:0 0 auto;width:58.3333333333%}.col-lg-8{flex:0 0 auto;width:66.6666666667%}.col-lg-9{flex:0 0 auto;width:75%}.col-lg-10{flex:0 0 auto;width:83.3333333333%}.col-lg-11{flex:0 0 auto;width:91.6666666667%}.col-lg-12{flex:0 0 auto;width:100%}.offset-lg-0{margin-left:0}.offset-lg-1{margin-left:8.3333333333%}.offset-lg-2{margin-left:16.6666666667%}.offset-lg-3{margin-left:25%}.offset-lg-4{margin-left:33.3333333333%}.offset-lg-5{margin-left:41.6666666667%}.offset-lg-6{margin-left:50%}.offset-lg-7{margin-left:58.3333333333%}.offset-lg-8{margin-left:66.6666666667%}.offset-lg-9{margin-left:75%}.offset-lg-10{margin-left:83.3333333333%}.offset-lg-11{margin-left:91.6666666667%}.g-lg-0,.gx-lg-0{--bs-gutter-x: 0}.g-lg-0,.gy-lg-0{--bs-gutter-y: 0}.g-lg-1,.gx-lg-1{--bs-gutter-x: 0.25rem}.g-lg-1,.gy-lg-1{--bs-gutter-y: 0.25rem}.g-lg-2,.gx-lg-2{--bs-gutter-x: 0.5rem}.g-lg-2,.gy-lg-2{--bs-gutter-y: 0.5rem}.g-lg-3,.gx-lg-3{--bs-gutter-x: 1rem}.g-lg-3,.gy-lg-3{--bs-gutter-y: 1rem}.g-lg-4,.gx-lg-4{--bs-gutter-x: 1.5rem}.g-lg-4,.gy-lg-4{--bs-gutter-y: 1.5rem}.g-lg-5,.gx-lg-5{--bs-gutter-x: 3rem}.g-lg-5,.gy-lg-5{--bs-gutter-y: 3rem}}@media(min-width: 1200px){.col-xl{flex:1 0 0%}.row-cols-xl-auto>*{flex:0 0 auto;width:auto}.row-cols-xl-1>*{flex:0 0 auto;width:100%}.row-cols-xl-2>*{flex:0 0 auto;width:50%}.row-cols-xl-3>*{flex:0 0 auto;width:33.3333333333%}.row-cols-xl-4>*{flex:0 0 auto;width:25%}.row-cols-xl-5>*{flex:0 0 auto;width:20%}.row-cols-xl-6>*{flex:0 0 auto;width:16.6666666667%}.col-xl-auto{flex:0 0 auto;width:auto}.col-xl-1{flex:0 0 auto;width:8.3333333333%}.col-xl-2{flex:0 0 auto;width:16.6666666667%}.col-xl-3{flex:0 0 auto;width:25%}.col-xl-4{flex:0 0 auto;width:33.3333333333%}.col-xl-5{flex:0 0 auto;width:41.6666666667%}.col-xl-6{flex:0 0 auto;width:50%}.col-xl-7{flex:0 0 auto;width:58.3333333333%}.col-xl-8{flex:0 0 auto;width:66.6666666667%}.col-xl-9{flex:0 0 auto;width:75%}.col-xl-10{flex:0 0 auto;width:83.3333333333%}.col-xl-11{flex:0 0 auto;width:91.6666666667%}.col-xl-12{flex:0 0 auto;width:100%}.offset-xl-0{margin-left:0}.offset-xl-1{margin-left:8.3333333333%}.offset-xl-2{margin-left:16.6666666667%}.offset-xl-3{margin-left:25%}.offset-xl-4{margin-left:33.3333333333%}.offset-xl-5{margin-left:41.6666666667%}.offset-xl-6{margin-left:50%}.offset-xl-7{margin-left:58.3333333333%}.offset-xl-8{margin-left:66.6666666667%}.offset-xl-9{margin-left:75%}.offset-xl-10{margin-left:83.3333333333%}.offset-xl-11{margin-left:91.6666666667%}.g-xl-0,.gx-xl-0{--bs-gutter-x: 0}.g-xl-0,.gy-xl-0{--bs-gutter-y: 0}.g-xl-1,.gx-xl-1{--bs-gutter-x: 0.25rem}.g-xl-1,.gy-xl-1{--bs-gutter-y: 0.25rem}.g-xl-2,.gx-xl-2{--bs-gutter-x: 0.5rem}.g-xl-2,.gy-xl-2{--bs-gutter-y: 0.5rem}.g-xl-3,.gx-xl-3{--bs-gutter-x: 1rem}.g-xl-3,.gy-xl-3{--bs-gutter-y: 1rem}.g-xl-4,.gx-xl-4{--bs-gutter-x: 1.5rem}.g-xl-4,.gy-xl-4{--bs-gutter-y: 1.5rem}.g-xl-5,.gx-xl-5{--bs-gutter-x: 3rem}.g-xl-5,.gy-xl-5{--bs-gutter-y: 3rem}}@media(min-width: 1400px){.col-xxl{flex:1 0 0%}.row-cols-xxl-auto>*{flex:0 0 auto;width:auto}.row-cols-xxl-1>*{flex:0 0 auto;width:100%}.row-cols-xxl-2>*{flex:0 0 auto;width:50%}.row-cols-xxl-3>*{flex:0 0 auto;width:33.3333333333%}.row-cols-xxl-4>*{flex:0 0 auto;width:25%}.row-cols-xxl-5>*{flex:0 0 auto;width:20%}.row-cols-xxl-6>*{flex:0 0 auto;width:16.6666666667%}.col-xxl-auto{flex:0 0 auto;width:auto}.col-xxl-1{flex:0 0 auto;width:8.3333333333%}.col-xxl-2{flex:0 0 auto;width:16.6666666667%}.col-xxl-3{flex:0 0 auto;width:25%}.col-xxl-4{flex:0 0 auto;width:33.3333333333%}.col-xxl-5{flex:0 0 auto;width:41.6666666667%}.col-xxl-6{flex:0 0 auto;width:50%}.col-xxl-7{flex:0 0 auto;width:58.3333333333%}.col-xxl-8{flex:0 0 auto;width:66.6666666667%}.col-xxl-9{flex:0 0 auto;width:75%}.col-xxl-10{flex:0 0 auto;width:83.3333333333%}.col-xxl-11{flex:0 0 auto;width:91.6666666667%}.col-xxl-12{flex:0 0 auto;width:100%}.offset-xxl-0{margin-left:0}.offset-xxl-1{margin-left:8.3333333333%}.offset-xxl-2{margin-left:16.6666666667%}.offset-xxl-3{margin-left:25%}.offset-xxl-4{margin-left:33.3333333333%}.offset-xxl-5{margin-left:41.6666666667%}.offset-xxl-6{margin-left:50%}.offset-xxl-7{margin-left:58.3333333333%}.offset-xxl-8{margin-left:66.6666666667%}.offset-xxl-9{margin-left:75%}.offset-xxl-10{margin-left:83.3333333333%}.offset-xxl-11{margin-left:91.6666666667%}.g-xxl-0,.gx-xxl-0{--bs-gutter-x: 0}.g-xxl-0,.gy-xxl-0{--bs-gutter-y: 0}.g-xxl-1,.gx-xxl-1{--bs-gutter-x: 0.25rem}.g-xxl-1,.gy-xxl-1{--bs-gutter-y: 0.25rem}.g-xxl-2,.gx-xxl-2{--bs-gutter-x: 0.5rem}.g-xxl-2,.gy-xxl-2{--bs-gutter-y: 0.5rem}.g-xxl-3,.gx-xxl-3{--bs-gutter-x: 1rem}.g-xxl-3,.gy-xxl-3{--bs-gutter-y: 1rem}.g-xxl-4,.gx-xxl-4{--bs-gutter-x: 1.5rem}.g-xxl-4,.gy-xxl-4{--bs-gutter-y: 1.5rem}.g-xxl-5,.gx-xxl-5{--bs-gutter-x: 3rem}.g-xxl-5,.gy-xxl-5{--bs-gutter-y: 3rem}}.table{--bs-table-bg: transparent;--bs-table-striped-color: #757575;--bs-table-striped-bg: rgba(0, 0, 0, 0.05);--bs-table-active-color: #757575;--bs-table-active-bg: rgba(0, 0, 0, 0.1);--bs-table-hover-color: #757575;--bs-table-hover-bg: rgba(0, 0, 0, 0.075);width:100%;margin-bottom:1rem;color:#757575;vertical-align:top;border-color:#dee2e6}.table>:not(caption)>*>*{padding:.5rem .5rem;background-color:var(--bs-table-bg);border-bottom-width:1px;box-shadow:inset 0 0 0 9999px var(--bs-table-accent-bg)}.table>tbody{vertical-align:inherit}.table>thead{vertical-align:bottom}.table>:not(:last-child)>:last-child>*{border-bottom-color:currentColor}.caption-top{caption-side:top}.table-sm>:not(caption)>*>*{padding:.25rem .25rem}.table-bordered>:not(caption)>*{border-width:1px 0}.table-bordered>:not(caption)>*>*{border-width:0 1px}.table-borderless>:not(caption)>*>*{border-bottom-width:0}.table-striped>tbody>tr:nth-of-type(odd){--bs-table-accent-bg: var(--bs-table-striped-bg);color:var(--bs-table-striped-color)}.table-active{--bs-table-accent-bg: var(--bs-table-active-bg);color:var(--bs-table-active-color)}.table-hover>tbody>tr:hover{--bs-table-accent-bg: var(--bs-table-hover-bg);color:var(--bs-table-hover-color)}.table-primary{--bs-table-bg: #fef1e0;--bs-table-striped-bg: #f1e5d5;--bs-table-striped-color: #000;--bs-table-active-bg: #e5d9ca;--bs-table-active-color: #000;--bs-table-hover-bg: #ebdfcf;--bs-table-hover-color: #000;color:#000;border-color:#e5d9ca}.table-secondary{--bs-table-bg: #fdf9f4;--bs-table-striped-bg: #f0ede8;--bs-table-striped-color: #000;--bs-table-active-bg: #e4e0dc;--bs-table-active-color: #000;--bs-table-hover-bg: #eae6e2;--bs-table-hover-color: #000;color:#000;border-color:#e4e0dc}.table-success{--bs-table-bg: #d1e7dd;--bs-table-striped-bg: #c7dbd2;--bs-table-striped-color: #000;--bs-table-active-bg: #bcd0c7;--bs-table-active-color: #000;--bs-table-hover-bg: #c1d6cc;--bs-table-hover-color: #000;color:#000;border-color:#bcd0c7}.table-info{--bs-table-bg: #cff4fc;--bs-table-striped-bg: #c5e8ef;--bs-table-striped-color: #000;--bs-table-active-bg: #badce3;--bs-table-active-color: #000;--bs-table-hover-bg: #bfe2e9;--bs-table-hover-color: #000;color:#000;border-color:#badce3}.table-warning{--bs-table-bg: #fff3cd;--bs-table-striped-bg: #0878D1;--bs-table-striped-color: #000;--bs-table-active-bg: #e6dbb9;--bs-table-active-color: #000;--bs-table-hover-bg: #ece1be;--bs-table-hover-color: #000;color:#000;border-color:#e6dbb9}.table-danger{--bs-table-bg: #f8d7da;--bs-table-striped-bg: #eccccf;--bs-table-striped-color: #000;--bs-table-active-bg: #dfc2c4;--bs-table-active-color: #000;--bs-table-hover-bg: #e5c7ca;--bs-table-hover-color: #000;color:#000;border-color:#dfc2c4}.table-light{--bs-table-bg: #F2F2F2;--bs-table-striped-bg: #e6e6e6;--bs-table-striped-color: #000;--bs-table-active-bg: #dadada;--bs-table-active-color: #000;--bs-table-hover-bg: #e0e0e0;--bs-table-hover-color: #000;color:#000;border-color:#dadada}.table-dark{--bs-table-bg: #030711;--bs-table-striped-bg: #2d2d2d;--bs-table-striped-color: #fff;--bs-table-active-bg: #383838;--bs-table-active-color: #fff;--bs-table-hover-bg: #333333;--bs-table-hover-color: #fff;color:#fff;border-color:#383838}.table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}@media(max-width: 575.98px){.table-responsive-sm{overflow-x:auto;-webkit-overflow-scrolling:touch}}@media(max-width: 767.98px){.table-responsive-md{overflow-x:auto;-webkit-overflow-scrolling:touch}}@media(max-width: 991.98px){.table-responsive-lg{overflow-x:auto;-webkit-overflow-scrolling:touch}}@media(max-width: 1199.98px){.table-responsive-xl{overflow-x:auto;-webkit-overflow-scrolling:touch}}@media(max-width: 1399.98px){.table-responsive-xxl{overflow-x:auto;-webkit-overflow-scrolling:touch}}.form-label{margin-bottom:.5rem}.col-form-label{padding-top:calc(0.375rem + 1px);padding-bottom:calc(0.375rem + 1px);margin-bottom:0;font-size:inherit;line-height:1.5}.col-form-label-lg{padding-top:calc(0.5rem + 1px);padding-bottom:calc(0.5rem + 1px);font-size:1.25rem}.col-form-label-sm{padding-top:calc(0.25rem + 1px);padding-bottom:calc(0.25rem + 1px);font-size:0.875rem}.form-text{margin-top:.25rem;font-size:0.875em;color:#6c757d}.form-control{display:block;width:100%;padding:.375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;color:#757575;background-color:#fff;background-clip:padding-box;border:1px solid #ced4da;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion: reduce){.form-control{transition:none}}.form-control[type=file]{overflow:hidden}.form-control[type=file]:not(:disabled):not(:-moz-read-only){cursor:pointer}.form-control[type=file]:not(:disabled):not(:read-only){cursor:pointer}.form-control:focus{color:#757575;background-color:#fff;border-color:#C2B37F;outline:0;box-shadow:0 0 0 .25rem rgba(248,184,100,.25)}.form-control::-webkit-date-and-time-value{height:1.5em}.form-control::-moz-placeholder{color:#6c757d;opacity:1}.form-control::placeholder{color:#6c757d;opacity:1}.form-control:-moz-read-only{background-color:#e9ecef;opacity:1}.form-control:disabled,.form-control:read-only{background-color:#e9ecef;opacity:1}.form-control::file-selector-button{padding:.375rem .75rem;margin:-0.375rem -0.75rem;margin-inline-end:.75rem;color:#757575;background-color:#e9ecef;pointer-events:none;border-color:inherit;border-style:solid;border-width:0;border-inline-end-width:1px;border-radius:0;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion: reduce){.form-control::file-selector-button{transition:none}}.form-control:hover:not(:disabled):not(:-moz-read-only)::file-selector-button{background-color:#dde0e3}.form-control:hover:not(:disabled):not(:read-only)::file-selector-button{background-color:#dde0e3}.form-control::-webkit-file-upload-button{padding:.375rem .75rem;margin:-0.375rem -0.75rem;margin-inline-end:.75rem;color:#757575;background-color:#e9ecef;pointer-events:none;border-color:inherit;border-style:solid;border-width:0;border-inline-end-width:1px;border-radius:0;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion: reduce){.form-control::-webkit-file-upload-button{-webkit-transition:none;transition:none}}.form-control:hover:not(:disabled):not(:read-only)::-webkit-file-upload-button{background-color:#dde0e3}.form-control-plaintext{display:block;width:100%;padding:.375rem 0;margin-bottom:0;line-height:1.5;color:#757575;background-color:rgba(0,0,0,0);border:solid rgba(0,0,0,0);border-width:1px 0}.form-control-plaintext.form-control-sm,.form-control-plaintext.form-control-lg{padding-right:0;padding-left:0}.form-control-sm{min-height:calc(1.5em + 0.5rem + 2px);padding:.25rem .5rem;font-size:0.875rem;border-radius:0}.form-control-sm::file-selector-button{padding:.25rem .5rem;margin:-0.25rem -0.5rem;margin-inline-end:.5rem}.form-control-sm::-webkit-file-upload-button{padding:.25rem .5rem;margin:-0.25rem -0.5rem;margin-inline-end:.5rem}.form-control-lg{min-height:calc(1.5em + 1rem + 2px);padding:.5rem 1rem;font-size:1.25rem;border-radius:0}.form-control-lg::file-selector-button{padding:.5rem 1rem;margin:-0.5rem -1rem;margin-inline-end:1rem}.form-control-lg::-webkit-file-upload-button{padding:.5rem 1rem;margin:-0.5rem -1rem;margin-inline-end:1rem}textarea.form-control{min-height:calc(1.5em + 0.75rem + 2px)}textarea.form-control-sm{min-height:calc(1.5em + 0.5rem + 2px)}textarea.form-control-lg{min-height:calc(1.5em + 1rem + 2px)}.form-control-color{max-width:3rem;height:auto;padding:.375rem}.form-control-color:not(:disabled):not(:-moz-read-only){cursor:pointer}.form-control-color:not(:disabled):not(:read-only){cursor:pointer}.form-control-color::-moz-color-swatch{height:1.5em;border-radius:0}.form-control-color::-webkit-color-swatch{height:1.5em;border-radius:0}.form-select{display:block;width:100%;padding:.375rem 2.25rem .375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;color:#757575;background-color:#fff;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right .75rem center;background-size:16px 12px;border:1px solid #ced4da;border-radius:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.form-select:focus{border-color:#C2B37F;outline:0;box-shadow:0 0 0 .25rem rgba(248,184,100,.25)}.form-select[multiple],.form-select[size]:not([size="1"]){padding-right:.75rem;background-image:none}.form-select:disabled{background-color:#e9ecef}.form-select:-moz-focusring{color:rgba(0,0,0,0);text-shadow:0 0 0 #757575}.form-select-sm{padding-top:.25rem;padding-bottom:.25rem;padding-left:.5rem;font-size:0.875rem}.form-select-lg{padding-top:.5rem;padding-bottom:.5rem;padding-left:1rem;font-size:1.25rem}.form-check{display:block;min-height:1.5rem;padding-left:1.5em;margin-bottom:.125rem}.form-check .form-check-input{float:left;margin-left:-1.5em}.form-check-input{width:1em;height:1em;margin-top:.25em;vertical-align:top;background-color:#fff;background-repeat:no-repeat;background-position:center;background-size:contain;border:1px solid rgba(0,0,0,.25);-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-print-color-adjust:exact;color-adjust:exact}.form-check-input[type=checkbox]{border-radius:.25em}.form-check-input[type=radio]{border-radius:50%}.form-check-input:active{filter:brightness(90%)}.form-check-input:focus{border-color:#C2B37F;outline:0;box-shadow:0 0 0 .25rem rgba(248,184,100,.25)}.form-check-input:checked{background-color:#0878D1;border-color:#0878D1}.form-check-input:checked[type=checkbox]{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e")}.form-check-input:checked[type=radio]{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e")}.form-check-input[type=checkbox]:indeterminate{background-color:#0878D1;border-color:#0878D1;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e")}.form-check-input:disabled{pointer-events:none;filter:none;opacity:.5}.form-check-input[disabled]~.form-check-label,.form-check-input:disabled~.form-check-label{opacity:.5}.form-switch{padding-left:2.5em}.form-switch .form-check-input{width:2em;margin-left:-2.5em;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");background-position:left center;border-radius:2em;transition:background-position .15s ease-in-out}@media(prefers-reduced-motion: reduce){.form-switch .form-check-input{transition:none}}.form-switch .form-check-input:focus{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fcdcb2'/%3e%3c/svg%3e")}.form-switch .form-check-input:checked{background-position:right center;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e")}.form-check-inline{display:inline-block;margin-right:1rem}.btn-check{position:absolute;clip:rect(0, 0, 0, 0);pointer-events:none}.btn-check[disabled]+.btn,.btn-check:disabled+.btn{pointer-events:none;filter:none;opacity:.65}.form-range{width:100%;height:1.5rem;padding:0;background-color:rgba(0,0,0,0);-webkit-appearance:none;-moz-appearance:none;appearance:none}.form-range:focus{outline:0}.form-range:focus::-webkit-slider-thumb{box-shadow:0 0 0 1px #fff,0 0 0 .25rem rgba(248,184,100,.25)}.form-range:focus::-moz-range-thumb{box-shadow:0 0 0 1px #fff,0 0 0 .25rem rgba(248,184,100,.25)}.form-range::-moz-focus-outer{border:0}.form-range::-webkit-slider-thumb{width:1rem;height:1rem;margin-top:-0.25rem;background-color:#0878D1;border:0;border-radius:1rem;-webkit-transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;-webkit-appearance:none;appearance:none}@media(prefers-reduced-motion: reduce){.form-range::-webkit-slider-thumb{-webkit-transition:none;transition:none}}.form-range::-webkit-slider-thumb:active{background-color:#fdead1}.form-range::-webkit-slider-runnable-track{width:100%;height:.5rem;color:rgba(0,0,0,0);cursor:pointer;background-color:#dee2e6;border-color:rgba(0,0,0,0);border-radius:1rem}.form-range::-moz-range-thumb{width:1rem;height:1rem;background-color:#0878D1;border:0;border-radius:1rem;-moz-transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;-moz-appearance:none;appearance:none}@media(prefers-reduced-motion: reduce){.form-range::-moz-range-thumb{-moz-transition:none;transition:none}}.form-range::-moz-range-thumb:active{background-color:#fdead1}.form-range::-moz-range-track{width:100%;height:.5rem;color:rgba(0,0,0,0);cursor:pointer;background-color:#dee2e6;border-color:rgba(0,0,0,0);border-radius:1rem}.form-range:disabled{pointer-events:none}.form-range:disabled::-webkit-slider-thumb{background-color:#adb5bd}.form-range:disabled::-moz-range-thumb{background-color:#adb5bd}.form-floating{position:relative}.form-floating>.form-control,.form-floating>.form-select{height:calc(3.5rem + 2px);padding:1rem .75rem}.form-floating>label{position:absolute;top:0;left:0;height:100%;padding:1rem .75rem;pointer-events:none;border:1px solid rgba(0,0,0,0);transform-origin:0 0;transition:opacity .1s ease-in-out,transform .1s ease-in-out}@media(prefers-reduced-motion: reduce){.form-floating>label{transition:none}}.form-floating>.form-control::-moz-placeholder{color:rgba(0,0,0,0)}.form-floating>.form-control::placeholder{color:rgba(0,0,0,0)}.form-floating>.form-control:not(:-moz-placeholder-shown){padding-top:1.625rem;padding-bottom:.625rem}.form-floating>.form-control:focus,.form-floating>.form-control:not(:placeholder-shown){padding-top:1.625rem;padding-bottom:.625rem}.form-floating>.form-control:-webkit-autofill{padding-top:1.625rem;padding-bottom:.625rem}.form-floating>.form-select{padding-top:1.625rem;padding-bottom:.625rem}.form-floating>.form-control:not(:-moz-placeholder-shown)~label{opacity:.65;transform:scale(0.85) translateY(-0.5rem) translateX(0.15rem)}.form-floating>.form-control:focus~label,.form-floating>.form-control:not(:placeholder-shown)~label,.form-floating>.form-select~label{opacity:.65;transform:scale(0.85) translateY(-0.5rem) translateX(0.15rem)}.form-floating>.form-control:-webkit-autofill~label{opacity:.65;transform:scale(0.85) translateY(-0.5rem) translateX(0.15rem)}.input-group{position:relative;display:flex;flex-wrap:wrap;align-items:stretch;width:100%}.input-group>.form-control,.input-group>.form-select{position:relative;flex:1 1 auto;width:1%;min-width:0}.input-group>.form-control:focus,.input-group>.form-select:focus{z-index:3}.input-group .btn{position:relative;z-index:2}.input-group .btn:focus{z-index:3}.input-group-text{display:flex;align-items:center;padding:.375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;color:#757575;text-align:center;white-space:nowrap;background-color:#e9ecef;border:1px solid #ced4da;border-radius:0}.input-group-lg>.form-control,.input-group-lg>.form-select,.input-group-lg>.input-group-text,.input-group-lg>.btn{padding:.5rem 1rem;font-size:1.25rem;border-radius:0}.input-group-sm>.form-control,.input-group-sm>.form-select,.input-group-sm>.input-group-text,.input-group-sm>.btn{padding:.25rem .5rem;font-size:0.875rem;border-radius:0}.input-group-lg>.form-select,.input-group-sm>.form-select{padding-right:3rem}.input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu),.input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3){border-top-right-radius:0;border-bottom-right-radius:0}.input-group.has-validation>:nth-last-child(n+3):not(.dropdown-toggle):not(.dropdown-menu),.input-group.has-validation>.dropdown-toggle:nth-last-child(n+4){border-top-right-radius:0;border-bottom-right-radius:0}.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}.valid-feedback{display:none;width:100%;margin-top:.25rem;font-size:0.875em;color:#198754}.valid-tooltip{position:absolute;top:100%;z-index:5;display:none;max-width:100%;padding:.25rem .5rem;margin-top:.1rem;font-size:0.875rem;color:#fff;background-color:rgba(25,135,84,.9);border-radius:0}.was-validated :valid~.valid-feedback,.was-validated :valid~.valid-tooltip,.is-valid~.valid-feedback,.is-valid~.valid-tooltip{display:block}.was-validated .form-control:valid,.form-control.is-valid{border-color:#198754;padding-right:calc(1.5em + 0.75rem);background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right calc(0.375em + 0.1875rem) center;background-size:calc(0.75em + 0.375rem) calc(0.75em + 0.375rem)}.was-validated .form-control:valid:focus,.form-control.is-valid:focus{border-color:#198754;box-shadow:0 0 0 .25rem rgba(25,135,84,.25)}.was-validated textarea.form-control:valid,textarea.form-control.is-valid{padding-right:calc(1.5em + 0.75rem);background-position:top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem)}.was-validated .form-select:valid,.form-select.is-valid{border-color:#198754}.was-validated .form-select:valid:not([multiple]):not([size]),.was-validated .form-select:valid:not([multiple])[size="1"],.form-select.is-valid:not([multiple]):not([size]),.form-select.is-valid:not([multiple])[size="1"]{padding-right:4.125rem;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"),url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");background-position:right .75rem center,center right 2.25rem;background-size:16px 12px,calc(0.75em + 0.375rem) calc(0.75em + 0.375rem)}.was-validated .form-select:valid:focus,.form-select.is-valid:focus{border-color:#198754;box-shadow:0 0 0 .25rem rgba(25,135,84,.25)}.was-validated .form-check-input:valid,.form-check-input.is-valid{border-color:#198754}.was-validated .form-check-input:valid:checked,.form-check-input.is-valid:checked{background-color:#198754}.was-validated .form-check-input:valid:focus,.form-check-input.is-valid:focus{box-shadow:0 0 0 .25rem rgba(25,135,84,.25)}.was-validated .form-check-input:valid~.form-check-label,.form-check-input.is-valid~.form-check-label{color:#198754}.form-check-inline .form-check-input~.valid-feedback{margin-left:.5em}.was-validated .input-group .form-control:valid,.input-group .form-control.is-valid,.was-validated .input-group .form-select:valid,.input-group .form-select.is-valid{z-index:3}.invalid-feedback{display:none;width:100%;margin-top:.25rem;font-size:0.875em;color:#dc3545}.invalid-tooltip{position:absolute;top:100%;z-index:5;display:none;max-width:100%;padding:.25rem .5rem;margin-top:.1rem;font-size:0.875rem;color:#fff;background-color:rgba(220,53,69,.9);border-radius:0}.was-validated :invalid~.invalid-feedback,.was-validated :invalid~.invalid-tooltip,.is-invalid~.invalid-feedback,.is-invalid~.invalid-tooltip{display:block}.was-validated .form-control:invalid,.form-control.is-invalid{border-color:#dc3545;padding-right:calc(1.5em + 0.75rem);background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right calc(0.375em + 0.1875rem) center;background-size:calc(0.75em + 0.375rem) calc(0.75em + 0.375rem)}.was-validated .form-control:invalid:focus,.form-control.is-invalid:focus{border-color:#dc3545;box-shadow:0 0 0 .25rem rgba(220,53,69,.25)}.was-validated textarea.form-control:invalid,textarea.form-control.is-invalid{padding-right:calc(1.5em + 0.75rem);background-position:top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem)}.was-validated .form-select:invalid,.form-select.is-invalid{border-color:#dc3545}.was-validated .form-select:invalid:not([multiple]):not([size]),.was-validated .form-select:invalid:not([multiple])[size="1"],.form-select.is-invalid:not([multiple]):not([size]),.form-select.is-invalid:not([multiple])[size="1"]{padding-right:4.125rem;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"),url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");background-position:right .75rem center,center right 2.25rem;background-size:16px 12px,calc(0.75em + 0.375rem) calc(0.75em + 0.375rem)}.was-validated .form-select:invalid:focus,.form-select.is-invalid:focus{border-color:#dc3545;box-shadow:0 0 0 .25rem rgba(220,53,69,.25)}.was-validated .form-check-input:invalid,.form-check-input.is-invalid{border-color:#dc3545}.was-validated .form-check-input:invalid:checked,.form-check-input.is-invalid:checked{background-color:#dc3545}.was-validated .form-check-input:invalid:focus,.form-check-input.is-invalid:focus{box-shadow:0 0 0 .25rem rgba(220,53,69,.25)}.was-validated .form-check-input:invalid~.form-check-label,.form-check-input.is-invalid~.form-check-label{color:#dc3545}.form-check-inline .form-check-input~.invalid-feedback{margin-left:.5em}.was-validated .input-group .form-control:invalid,.input-group .form-control.is-invalid,.was-validated .input-group .form-select:invalid,.input-group .form-select.is-invalid{z-index:3}.btn{display:inline-block;font-weight:400;line-height:1.5;color:#757575;text-align:center;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:rgba(0,0,0,0);border:1px solid rgba(0,0,0,0);padding:.375rem .75rem;font-size:1rem;border-radius:0;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion: reduce){.btn{transition:none}}.btn:hover{color:#757575}.btn-check:focus+.btn,.btn:focus{outline:0;box-shadow:0 0 0 .25rem rgba(248,184,100,.25)}.btn:disabled,.btn.disabled,fieldset:disabled .btn{pointer-events:none;opacity:.65}.btn-primary{color:#000;background-color:#0878D1;border-color:#0878D1}.btn-primary:hover{color:#000;background-color:#78EEFF;border-color:#78EEFF}.btn-check:focus+.btn-primary,.btn-primary:focus{color:#000;background-color:#78EEFF;border-color:#78EEFF;box-shadow:0 0 0 .25rem rgba(211,156,85,.5)}.btn-check:checked+.btn-primary,.btn-check:active+.btn-primary,.btn-primary:active,.btn-primary.active,.show>.btn-primary.dropdown-toggle{color:#000;background-color:#78EEFF;border-color:#78EEFF}.btn-check:checked+.btn-primary:focus,.btn-check:active+.btn-primary:focus,.btn-primary:active:focus,.btn-primary.active:focus,.show>.btn-primary.dropdown-toggle:focus{box-shadow:0 0 0 .25rem rgba(211,156,85,.5)}.btn-primary:disabled,.btn-primary.disabled{color:#000;background-color:#0878D1;border-color:#0878D1}.btn-secondary{color:#000;background-color:#02050C;border-color:#02050C}.btn-secondary:hover{color:#000;background-color:#f5e5cf;border-color:#f4e3cc}.btn-check:focus+.btn-secondary,.btn-secondary:focus{color:#000;background-color:#f5e5cf;border-color:#f4e3cc;box-shadow:0 0 0 .25rem rgba(207,190,168,.5)}.btn-check:checked+.btn-secondary,.btn-check:active+.btn-secondary,.btn-secondary:active,.btn-secondary.active,.show>.btn-secondary.dropdown-toggle{color:#000;background-color:#f5e6d1;border-color:#f4e3cc}.btn-check:checked+.btn-secondary:focus,.btn-check:active+.btn-secondary:focus,.btn-secondary:active:focus,.btn-secondary.active:focus,.show>.btn-secondary.dropdown-toggle:focus{box-shadow:0 0 0 .25rem rgba(207,190,168,.5)}.btn-secondary:disabled,.btn-secondary.disabled{color:#000;background-color:#02050C;border-color:#02050C}.btn-success{color:#fff;background-color:#198754;border-color:#198754}.btn-success:hover{color:#fff;background-color:#157347;border-color:#146c43}.btn-check:focus+.btn-success,.btn-success:focus{color:#fff;background-color:#157347;border-color:#146c43;box-shadow:0 0 0 .25rem rgba(60,153,110,.5)}.btn-check:checked+.btn-success,.btn-check:active+.btn-success,.btn-success:active,.btn-success.active,.show>.btn-success.dropdown-toggle{color:#fff;background-color:#146c43;border-color:#13653f}.btn-check:checked+.btn-success:focus,.btn-check:active+.btn-success:focus,.btn-success:active:focus,.btn-success.active:focus,.show>.btn-success.dropdown-toggle:focus{box-shadow:0 0 0 .25rem rgba(60,153,110,.5)}.btn-success:disabled,.btn-success.disabled{color:#fff;background-color:#198754;border-color:#198754}.btn-info{color:#000;background-color:#00D9FF;border-color:#00D9FF}.btn-info:hover{color:#000;background-color:#FFFFFF;border-color:#FFFFFF}.btn-check:focus+.btn-info,.btn-info:focus{color:#000;background-color:#FFFFFF;border-color:#FFFFFF;box-shadow:0 0 0 .25rem rgba(0,217,255,.5)}.btn-check:checked+.btn-info,.btn-check:active+.btn-info,.btn-info:active,.btn-info.active,.show>.btn-info.dropdown-toggle{color:#000;background-color:#FFFFFF;border-color:#FFFFFF}.btn-check:checked+.btn-info:focus,.btn-check:active+.btn-info:focus,.btn-info:active:focus,.btn-info.active:focus,.show>.btn-info.dropdown-toggle:focus{box-shadow:0 0 0 .25rem rgba(0,217,255,.5)}.btn-info:disabled,.btn-info.disabled{color:#000;background-color:#00D9FF;border-color:#00D9FF}.btn-warning{color:#000;background-color:#0878D1;border-color:#0878D1}.btn-warning:hover{color:#000;background-color:#3CAEFF;border-color:#3CAEFF}.btn-check:focus+.btn-warning,.btn-warning:focus{color:#000;background-color:#3CAEFF;border-color:#3CAEFF;box-shadow:0 0 0 .25rem rgba(217,164,6,.5)}.btn-check:checked+.btn-warning,.btn-check:active+.btn-warning,.btn-warning:active,.btn-warning.active,.show>.btn-warning.dropdown-toggle{color:#000;background-color:#3CAEFF;border-color:#3CAEFF}.btn-check:checked+.btn-warning:focus,.btn-check:active+.btn-warning:focus,.btn-warning:active:focus,.btn-warning.active:focus,.show>.btn-warning.dropdown-toggle:focus{box-shadow:0 0 0 .25rem rgba(217,164,6,.5)}.btn-warning:disabled,.btn-warning.disabled{color:#000;background-color:#0878D1;border-color:#0878D1}.btn-danger{color:#fff;background-color:#dc3545;border-color:#dc3545}.btn-danger:hover{color:#fff;background-color:#bb2d3b;border-color:#b02a37}.btn-check:focus+.btn-danger,.btn-danger:focus{color:#fff;background-color:#bb2d3b;border-color:#b02a37;box-shadow:0 0 0 .25rem rgba(225,83,97,.5)}.btn-check:checked+.btn-danger,.btn-check:active+.btn-danger,.btn-danger:active,.btn-danger.active,.show>.btn-danger.dropdown-toggle{color:#fff;background-color:#b02a37;border-color:#a52834}.btn-check:checked+.btn-danger:focus,.btn-check:active+.btn-danger:focus,.btn-danger:active:focus,.btn-danger.active:focus,.show>.btn-danger.dropdown-toggle:focus{box-shadow:0 0 0 .25rem rgba(225,83,97,.5)}.btn-danger:disabled,.btn-danger.disabled{color:#fff;background-color:#dc3545;border-color:#dc3545}.btn-light{color:#000;background-color:#f2f2f2;border-color:#f2f2f2}.btn-light:hover{color:#000;background-color:#f4f4f4;border-color:#f3f3f3}.btn-check:focus+.btn-light,.btn-light:focus{color:#000;background-color:#f4f4f4;border-color:#f3f3f3;box-shadow:0 0 0 .25rem rgba(206,206,206,.5)}.btn-check:checked+.btn-light,.btn-check:active+.btn-light,.btn-light:active,.btn-light.active,.show>.btn-light.dropdown-toggle{color:#000;background-color:#f5f5f5;border-color:#f3f3f3}.btn-check:checked+.btn-light:focus,.btn-check:active+.btn-light:focus,.btn-light:active:focus,.btn-light.active:focus,.show>.btn-light.dropdown-toggle:focus{box-shadow:0 0 0 .25rem rgba(206,206,206,.5)}.btn-light:disabled,.btn-light.disabled{color:#000;background-color:#f2f2f2;border-color:#f2f2f2}.btn-dark{color:#fff;background-color:#222;border-color:#222}.btn-dark:hover{color:#fff;background-color:#1d1d1d;border-color:#1b1b1b}.btn-check:focus+.btn-dark,.btn-dark:focus{color:#fff;background-color:#1d1d1d;border-color:#1b1b1b;box-shadow:0 0 0 .25rem rgba(67,67,67,.5)}.btn-check:checked+.btn-dark,.btn-check:active+.btn-dark,.btn-dark:active,.btn-dark.active,.show>.btn-dark.dropdown-toggle{color:#fff;background-color:#1b1b1b;border-color:#1a1a1a}.btn-check:checked+.btn-dark:focus,.btn-check:active+.btn-dark:focus,.btn-dark:active:focus,.btn-dark.active:focus,.show>.btn-dark.dropdown-toggle:focus{box-shadow:0 0 0 .25rem rgba(67,67,67,.5)}.btn-dark:disabled,.btn-dark.disabled{color:#fff;background-color:#222;border-color:#222}.btn-outline-primary{color:#0878D1;border-color:#0878D1}.btn-outline-primary:hover{color:#000;background-color:#0878D1;border-color:#0878D1}.btn-check:focus+.btn-outline-primary,.btn-outline-primary:focus{box-shadow:0 0 0 .25rem rgba(248,184,100,.5)}.btn-check:checked+.btn-outline-primary,.btn-check:active+.btn-outline-primary,.btn-outline-primary:active,.btn-outline-primary.active,.btn-outline-primary.dropdown-toggle.show{color:#000;background-color:#0878D1;border-color:#0878D1}.btn-check:checked+.btn-outline-primary:focus,.btn-check:active+.btn-outline-primary:focus,.btn-outline-primary:active:focus,.btn-outline-primary.active:focus,.btn-outline-primary.dropdown-toggle.show:focus{box-shadow:0 0 0 .25rem rgba(248,184,100,.5)}.btn-outline-primary:disabled,.btn-outline-primary.disabled{color:#0878D1;background-color:rgba(0,0,0,0)}.btn-outline-secondary{color:#02050C;border-color:#02050C}.btn-outline-secondary:hover{color:#000;background-color:#02050C;border-color:#02050C}.btn-check:focus+.btn-outline-secondary,.btn-outline-secondary:focus{box-shadow:0 0 0 .25rem rgba(243,224,198,.5)}.btn-check:checked+.btn-outline-secondary,.btn-check:active+.btn-outline-secondary,.btn-outline-secondary:active,.btn-outline-secondary.active,.btn-outline-secondary.dropdown-toggle.show{color:#000;background-color:#02050C;border-color:#02050C}.btn-check:checked+.btn-outline-secondary:focus,.btn-check:active+.btn-outline-secondary:focus,.btn-outline-secondary:active:focus,.btn-outline-secondary.active:focus,.btn-outline-secondary.dropdown-toggle.show:focus{box-shadow:0 0 0 .25rem rgba(243,224,198,.5)}.btn-outline-secondary:disabled,.btn-outline-secondary.disabled{color:#02050C;background-color:rgba(0,0,0,0)}.btn-outline-success{color:#198754;border-color:#198754}.btn-outline-success:hover{color:#fff;background-color:#198754;border-color:#198754}.btn-check:focus+.btn-outline-success,.btn-outline-success:focus{box-shadow:0 0 0 .25rem rgba(25,135,84,.5)}.btn-check:checked+.btn-outline-success,.btn-check:active+.btn-outline-success,.btn-outline-success:active,.btn-outline-success.active,.btn-outline-success.dropdown-toggle.show{color:#fff;background-color:#198754;border-color:#198754}.btn-check:checked+.btn-outline-success:focus,.btn-check:active+.btn-outline-success:focus,.btn-outline-success:active:focus,.btn-outline-success.active:focus,.btn-outline-success.dropdown-toggle.show:focus{box-shadow:0 0 0 .25rem rgba(25,135,84,.5)}.btn-outline-success:disabled,.btn-outline-success.disabled{color:#198754;background-color:rgba(0,0,0,0)}.btn-outline-info{color:#00D9FF;border-color:#00D9FF}.btn-outline-info:hover{color:#000;background-color:#00D9FF;border-color:#00D9FF}.btn-check:focus+.btn-outline-info,.btn-outline-info:focus{box-shadow:0 0 0 .25rem rgba(255,255,255,.5)}.btn-check:checked+.btn-outline-info,.btn-check:active+.btn-outline-info,.btn-outline-info:active,.btn-outline-info.active,.btn-outline-info.dropdown-toggle.show{color:#000;background-color:#00D9FF;border-color:#00D9FF}.btn-check:checked+.btn-outline-info:focus,.btn-check:active+.btn-outline-info:focus,.btn-outline-info:active:focus,.btn-outline-info.active:focus,.btn-outline-info.dropdown-toggle.show:focus{box-shadow:0 0 0 .25rem rgba(255,255,255,.5)}.btn-outline-info:disabled,.btn-outline-info.disabled{color:#00D9FF;background-color:rgba(0,0,0,0)}.btn-outline-warning{color:#0878D1;border-color:#0878D1}.btn-outline-warning:hover{color:#000;background-color:#0878D1;border-color:#0878D1}.btn-check:focus+.btn-outline-warning,.btn-outline-warning:focus{box-shadow:0 0 0 .25rem rgba(255,193,7,.5)}.btn-check:checked+.btn-outline-warning,.btn-check:active+.btn-outline-warning,.btn-outline-warning:active,.btn-outline-warning.active,.btn-outline-warning.dropdown-toggle.show{color:#000;background-color:#0878D1;border-color:#0878D1}.btn-check:checked+.btn-outline-warning:focus,.btn-check:active+.btn-outline-warning:focus,.btn-outline-warning:active:focus,.btn-outline-warning.active:focus,.btn-outline-warning.dropdown-toggle.show:focus{box-shadow:0 0 0 .25rem rgba(255,193,7,.5)}.btn-outline-warning:disabled,.btn-outline-warning.disabled{color:#0878D1;background-color:rgba(0,0,0,0)}.btn-outline-danger{color:#dc3545;border-color:#dc3545}.btn-outline-danger:hover{color:#fff;background-color:#dc3545;border-color:#dc3545}.btn-check:focus+.btn-outline-danger,.btn-outline-danger:focus{box-shadow:0 0 0 .25rem rgba(220,53,69,.5)}.btn-check:checked+.btn-outline-danger,.btn-check:active+.btn-outline-danger,.btn-outline-danger:active,.btn-outline-danger.active,.btn-outline-danger.dropdown-toggle.show{color:#fff;background-color:#dc3545;border-color:#dc3545}.btn-check:checked+.btn-outline-danger:focus,.btn-check:active+.btn-outline-danger:focus,.btn-outline-danger:active:focus,.btn-outline-danger.active:focus,.btn-outline-danger.dropdown-toggle.show:focus{box-shadow:0 0 0 .25rem rgba(220,53,69,.5)}.btn-outline-danger:disabled,.btn-outline-danger.disabled{color:#dc3545;background-color:rgba(0,0,0,0)}.btn-outline-light{color:#f2f2f2;border-color:#f2f2f2}.btn-outline-light:hover{color:#000;background-color:#f2f2f2;border-color:#f2f2f2}.btn-check:focus+.btn-outline-light,.btn-outline-light:focus{box-shadow:0 0 0 .25rem rgba(242,242,242,.5)}.btn-check:checked+.btn-outline-light,.btn-check:active+.btn-outline-light,.btn-outline-light:active,.btn-outline-light.active,.btn-outline-light.dropdown-toggle.show{color:#000;background-color:#f2f2f2;border-color:#f2f2f2}.btn-check:checked+.btn-outline-light:focus,.btn-check:active+.btn-outline-light:focus,.btn-outline-light:active:focus,.btn-outline-light.active:focus,.btn-outline-light.dropdown-toggle.show:focus{box-shadow:0 0 0 .25rem rgba(242,242,242,.5)}.btn-outline-light:disabled,.btn-outline-light.disabled{color:#f2f2f2;background-color:rgba(0,0,0,0)}.btn-outline-dark{color:#222;border-color:#222}.btn-outline-dark:hover{color:#fff;background-color:#222;border-color:#222}.btn-check:focus+.btn-outline-dark,.btn-outline-dark:focus{box-shadow:0 0 0 .25rem rgba(34,34,34,.5)}.btn-check:checked+.btn-outline-dark,.btn-check:active+.btn-outline-dark,.btn-outline-dark:active,.btn-outline-dark.active,.btn-outline-dark.dropdown-toggle.show{color:#fff;background-color:#222;border-color:#222}.btn-check:checked+.btn-outline-dark:focus,.btn-check:active+.btn-outline-dark:focus,.btn-outline-dark:active:focus,.btn-outline-dark.active:focus,.btn-outline-dark.dropdown-toggle.show:focus{box-shadow:0 0 0 .25rem rgba(34,34,34,.5)}.btn-outline-dark:disabled,.btn-outline-dark.disabled{color:#222;background-color:rgba(0,0,0,0)}.btn-link{font-weight:400;color:#0878D1;text-decoration:none}.btn-link:hover{color:#0878D1}.btn-link:disabled,.btn-link.disabled{color:#6c757d}.btn-lg,.btn-group-lg>.btn{padding:.5rem 1rem;font-size:1.25rem;border-radius:0}.btn-sm,.btn-group-sm>.btn{padding:.25rem .5rem;font-size:0.875rem;border-radius:0}.fade{transition:opacity .15s linear}@media(prefers-reduced-motion: reduce){.fade{transition:none}}.fade:not(.show){opacity:0}.collapse:not(.show){display:none}.collapsing{height:0;overflow:hidden;transition:height .35s ease}@media(prefers-reduced-motion: reduce){.collapsing{transition:none}}.dropup,.dropend,.dropdown,.dropstart{position:relative}.dropdown-toggle{white-space:nowrap}.dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";border-top:.3em solid;border-right:.3em solid rgba(0,0,0,0);border-bottom:0;border-left:.3em solid rgba(0,0,0,0)}.dropdown-toggle:empty::after{margin-left:0}.dropdown-menu{position:absolute;z-index:1000;display:none;min-width:10rem;padding:.5rem 0;margin:0;font-size:1rem;color:#757575;text-align:left;list-style:none;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.15);border-radius:0}.dropdown-menu[data-bs-popper]{top:100%;left:0;margin-top:.125rem}.dropdown-menu-start{--bs-position: start}.dropdown-menu-start[data-bs-popper]{right:auto /* rtl:ignore */;left:0 /* rtl:ignore */}.dropdown-menu-end{--bs-position: end}.dropdown-menu-end[data-bs-popper]{right:0 /* rtl:ignore */;left:auto /* rtl:ignore */}@media(min-width: 576px){.dropdown-menu-sm-start{--bs-position: start}.dropdown-menu-sm-start[data-bs-popper]{right:auto /* rtl:ignore */;left:0 /* rtl:ignore */}.dropdown-menu-sm-end{--bs-position: end}.dropdown-menu-sm-end[data-bs-popper]{right:0 /* rtl:ignore */;left:auto /* rtl:ignore */}}@media(min-width: 768px){.dropdown-menu-md-start{--bs-position: start}.dropdown-menu-md-start[data-bs-popper]{right:auto /* rtl:ignore */;left:0 /* rtl:ignore */}.dropdown-menu-md-end{--bs-position: end}.dropdown-menu-md-end[data-bs-popper]{right:0 /* rtl:ignore */;left:auto /* rtl:ignore */}}@media(min-width: 992px){.dropdown-menu-lg-start{--bs-position: start}.dropdown-menu-lg-start[data-bs-popper]{right:auto /* rtl:ignore */;left:0 /* rtl:ignore */}.dropdown-menu-lg-end{--bs-position: end}.dropdown-menu-lg-end[data-bs-popper]{right:0 /* rtl:ignore */;left:auto /* rtl:ignore */}}@media(min-width: 1200px){.dropdown-menu-xl-start{--bs-position: start}.dropdown-menu-xl-start[data-bs-popper]{right:auto /* rtl:ignore */;left:0 /* rtl:ignore */}.dropdown-menu-xl-end{--bs-position: end}.dropdown-menu-xl-end[data-bs-popper]{right:0 /* rtl:ignore */;left:auto /* rtl:ignore */}}@media(min-width: 1400px){.dropdown-menu-xxl-start{--bs-position: start}.dropdown-menu-xxl-start[data-bs-popper]{right:auto /* rtl:ignore */;left:0 /* rtl:ignore */}.dropdown-menu-xxl-end{--bs-position: end}.dropdown-menu-xxl-end[data-bs-popper]{right:0 /* rtl:ignore */;left:auto /* rtl:ignore */}}.dropup .dropdown-menu[data-bs-popper]{top:auto;bottom:100%;margin-top:0;margin-bottom:.125rem}.dropup .dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";border-top:0;border-right:.3em solid rgba(0,0,0,0);border-bottom:.3em solid;border-left:.3em solid rgba(0,0,0,0)}.dropup .dropdown-toggle:empty::after{margin-left:0}.dropend .dropdown-menu[data-bs-popper]{top:0;right:auto;left:100%;margin-top:0;margin-left:.125rem}.dropend .dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";border-top:.3em solid rgba(0,0,0,0);border-right:0;border-bottom:.3em solid rgba(0,0,0,0);border-left:.3em solid}.dropend .dropdown-toggle:empty::after{margin-left:0}.dropend .dropdown-toggle::after{vertical-align:0}.dropstart .dropdown-menu[data-bs-popper]{top:0;right:100%;left:auto;margin-top:0;margin-right:.125rem}.dropstart .dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:""}.dropstart .dropdown-toggle::after{display:none}.dropstart .dropdown-toggle::before{display:inline-block;margin-right:.255em;vertical-align:.255em;content:"";border-top:.3em solid rgba(0,0,0,0);border-right:.3em solid;border-bottom:.3em solid rgba(0,0,0,0)}.dropstart .dropdown-toggle:empty::after{margin-left:0}.dropstart .dropdown-toggle::before{vertical-align:0}.dropdown-divider{height:0;margin:.5rem 0;overflow:hidden;border-top:1px solid rgba(0,0,0,.15)}.dropdown-item{display:block;width:100%;padding:.25rem 1rem;clear:both;font-weight:400;color:#212529;text-align:inherit;white-space:nowrap;background-color:rgba(0,0,0,0);border:0}.dropdown-item:hover,.dropdown-item:focus{color:#1e2125;background-color:#e9ecef}.dropdown-item.active,.dropdown-item:active{color:#fff;text-decoration:none;background-color:#0878D1}.dropdown-item.disabled,.dropdown-item:disabled{color:#adb5bd;pointer-events:none;background-color:rgba(0,0,0,0)}.dropdown-menu.show{display:block}.dropdown-header{display:block;padding:.5rem 1rem;margin-bottom:0;font-size:0.875rem;color:#6c757d;white-space:nowrap}.dropdown-item-text{display:block;padding:.25rem 1rem;color:#212529}.dropdown-menu-dark{color:#dee2e6;background-color:#343a40;border-color:rgba(0,0,0,.15)}.dropdown-menu-dark .dropdown-item{color:#dee2e6}.dropdown-menu-dark .dropdown-item:hover,.dropdown-menu-dark .dropdown-item:focus{color:#fff;background-color:rgba(255,255,255,.15)}.dropdown-menu-dark .dropdown-item.active,.dropdown-menu-dark .dropdown-item:active{color:#fff;background-color:#0878D1}.dropdown-menu-dark .dropdown-item.disabled,.dropdown-menu-dark .dropdown-item:disabled{color:#adb5bd}.dropdown-menu-dark .dropdown-divider{border-color:rgba(0,0,0,.15)}.dropdown-menu-dark .dropdown-item-text{color:#dee2e6}.dropdown-menu-dark .dropdown-header{color:#adb5bd}.btn-group,.btn-group-vertical{position:relative;display:inline-flex;vertical-align:middle}.btn-group>.btn,.btn-group-vertical>.btn{position:relative;flex:1 1 auto}.btn-group>.btn-check:checked+.btn,.btn-group>.btn-check:focus+.btn,.btn-group>.btn:hover,.btn-group>.btn:focus,.btn-group>.btn:active,.btn-group>.btn.active,.btn-group-vertical>.btn-check:checked+.btn,.btn-group-vertical>.btn-check:focus+.btn,.btn-group-vertical>.btn:hover,.btn-group-vertical>.btn:focus,.btn-group-vertical>.btn:active,.btn-group-vertical>.btn.active{z-index:1}.btn-toolbar{display:flex;flex-wrap:wrap;justify-content:flex-start}.btn-toolbar .input-group{width:auto}.btn-group>.btn:not(:first-child),.btn-group>.btn-group:not(:first-child){margin-left:-1px}.btn-group>.btn:not(:last-child):not(.dropdown-toggle),.btn-group>.btn-group:not(:last-child)>.btn{border-top-right-radius:0;border-bottom-right-radius:0}.btn-group>.btn:nth-child(n+3),.btn-group>:not(.btn-check)+.btn,.btn-group>.btn-group:not(:first-child)>.btn{border-top-left-radius:0;border-bottom-left-radius:0}.dropdown-toggle-split{padding-right:.5625rem;padding-left:.5625rem}.dropdown-toggle-split::after,.dropup .dropdown-toggle-split::after,.dropend .dropdown-toggle-split::after{margin-left:0}.dropstart .dropdown-toggle-split::before{margin-right:0}.btn-sm+.dropdown-toggle-split,.btn-group-sm>.btn+.dropdown-toggle-split{padding-right:.375rem;padding-left:.375rem}.btn-lg+.dropdown-toggle-split,.btn-group-lg>.btn+.dropdown-toggle-split{padding-right:.75rem;padding-left:.75rem}.btn-group-vertical{flex-direction:column;align-items:flex-start;justify-content:center}.btn-group-vertical>.btn,.btn-group-vertical>.btn-group{width:100%}.btn-group-vertical>.btn:not(:first-child),.btn-group-vertical>.btn-group:not(:first-child){margin-top:-1px}.btn-group-vertical>.btn:not(:last-child):not(.dropdown-toggle),.btn-group-vertical>.btn-group:not(:last-child)>.btn{border-bottom-right-radius:0;border-bottom-left-radius:0}.btn-group-vertical>.btn~.btn,.btn-group-vertical>.btn-group:not(:first-child)>.btn{border-top-left-radius:0;border-top-right-radius:0}.nav{display:flex;flex-wrap:wrap;padding-left:0;margin-bottom:0;list-style:none}.nav-link{display:block;padding:.5rem 1rem;color:#0878D1;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out}@media(prefers-reduced-motion: reduce){.nav-link{transition:none}}.nav-link:hover,.nav-link:focus{color:#0878D1}.nav-link.disabled{color:#6c757d;pointer-events:none;cursor:default}.nav-tabs{border-bottom:1px solid #dee2e6}.nav-tabs .nav-link{margin-bottom:-1px;background:none;border:1px solid rgba(0,0,0,0);border-top-left-radius:0;border-top-right-radius:0}.nav-tabs .nav-link:hover,.nav-tabs .nav-link:focus{border-color:#e9ecef #e9ecef #dee2e6;isolation:isolate}.nav-tabs .nav-link.disabled{color:#6c757d;background-color:rgba(0,0,0,0);border-color:rgba(0,0,0,0)}.nav-tabs .nav-link.active,.nav-tabs .nav-item.show .nav-link{color:#495057;background-color:#fff;border-color:#dee2e6 #dee2e6 #fff}.nav-tabs .dropdown-menu{margin-top:-1px;border-top-left-radius:0;border-top-right-radius:0}.nav-pills .nav-link{background:none;border:0;border-radius:0}.nav-pills .nav-link.active,.nav-pills .show>.nav-link{color:#fff;background-color:#0878D1}.nav-fill>.nav-link,.nav-fill .nav-item{flex:1 1 auto;text-align:center}.nav-justified>.nav-link,.nav-justified .nav-item{flex-basis:0;flex-grow:1;text-align:center}.nav-fill .nav-item .nav-link,.nav-justified .nav-item .nav-link{width:100%}.tab-content>.tab-pane{display:none}.tab-content>.active{display:block}.navbar{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding-top:.5rem;padding-bottom:.5rem}.navbar>.container,.navbar>.container-fluid,.navbar>.container-sm,.navbar>.container-md,.navbar>.container-lg,.navbar>.container-xl,.navbar>.container-xxl{display:flex;flex-wrap:inherit;align-items:center;justify-content:space-between}.navbar-brand{padding-top:.3125rem;padding-bottom:.3125rem;margin-right:1rem;font-size:1.25rem;white-space:nowrap}.navbar-nav{display:flex;flex-direction:column;padding-left:0;margin-bottom:0;list-style:none}.navbar-nav .nav-link{padding-right:0;padding-left:0}.navbar-nav .dropdown-menu{position:static}.navbar-text{padding-top:.5rem;padding-bottom:.5rem}.navbar-collapse{flex-basis:100%;flex-grow:1;align-items:center}.navbar-toggler{padding:.25rem .75rem;font-size:1.25rem;line-height:1;background-color:rgba(0,0,0,0);border:1px solid rgba(0,0,0,0);border-radius:0;transition:box-shadow .15s ease-in-out}@media(prefers-reduced-motion: reduce){.navbar-toggler{transition:none}}.navbar-toggler:hover{text-decoration:none}.navbar-toggler:focus{text-decoration:none;outline:0;box-shadow:0 0 0 .25rem}.navbar-toggler-icon{display:inline-block;width:1.5em;height:1.5em;vertical-align:middle;background-repeat:no-repeat;background-position:center;background-size:100%}.navbar-nav-scroll{max-height:var(--bs-scroll-height, 75vh);overflow-y:auto}@media(min-width: 576px){.navbar-expand-sm{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-sm .navbar-nav{flex-direction:row}.navbar-expand-sm .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-sm .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}.navbar-expand-sm .navbar-nav-scroll{overflow:visible}.navbar-expand-sm .navbar-collapse{display:flex !important;flex-basis:auto}.navbar-expand-sm .navbar-toggler{display:none}}@media(min-width: 768px){.navbar-expand-md{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-md .navbar-nav{flex-direction:row}.navbar-expand-md .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-md .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}.navbar-expand-md .navbar-nav-scroll{overflow:visible}.navbar-expand-md .navbar-collapse{display:flex !important;flex-basis:auto}.navbar-expand-md .navbar-toggler{display:none}}@media(min-width: 992px){.navbar-expand-lg{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-lg .navbar-nav{flex-direction:row}.navbar-expand-lg .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-lg .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}.navbar-expand-lg .navbar-nav-scroll{overflow:visible}.navbar-expand-lg .navbar-collapse{display:flex !important;flex-basis:auto}.navbar-expand-lg .navbar-toggler{display:none}}@media(min-width: 1200px){.navbar-expand-xl{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-xl .navbar-nav{flex-direction:row}.navbar-expand-xl .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-xl .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}.navbar-expand-xl .navbar-nav-scroll{overflow:visible}.navbar-expand-xl .navbar-collapse{display:flex !important;flex-basis:auto}.navbar-expand-xl .navbar-toggler{display:none}}@media(min-width: 1400px){.navbar-expand-xxl{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand-xxl .navbar-nav{flex-direction:row}.navbar-expand-xxl .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-xxl .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}.navbar-expand-xxl .navbar-nav-scroll{overflow:visible}.navbar-expand-xxl .navbar-collapse{display:flex !important;flex-basis:auto}.navbar-expand-xxl .navbar-toggler{display:none}}.navbar-expand{flex-wrap:nowrap;justify-content:flex-start}.navbar-expand .navbar-nav{flex-direction:row}.navbar-expand .navbar-nav .dropdown-menu{position:absolute}.navbar-expand .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}.navbar-expand .navbar-nav-scroll{overflow:visible}.navbar-expand .navbar-collapse{display:flex !important;flex-basis:auto}.navbar-expand .navbar-toggler{display:none}.navbar-light .navbar-brand{color:rgba(0,0,0,.9)}.navbar-light .navbar-brand:hover,.navbar-light .navbar-brand:focus{color:rgba(0,0,0,.9)}.navbar-light .navbar-nav .nav-link{color:rgba(0,0,0,.55)}.navbar-light .navbar-nav .nav-link:hover,.navbar-light .navbar-nav .nav-link:focus{color:rgba(0,0,0,.7)}.navbar-light .navbar-nav .nav-link.disabled{color:rgba(0,0,0,.3)}.navbar-light .navbar-nav .show>.nav-link,.navbar-light .navbar-nav .nav-link.active{color:rgba(0,0,0,.9)}.navbar-light .navbar-toggler{color:rgba(0,0,0,.55);border-color:rgba(0,0,0,.1)}.navbar-light .navbar-toggler-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")}.navbar-light .navbar-text{color:rgba(0,0,0,.55)}.navbar-light .navbar-text a,.navbar-light .navbar-text a:hover,.navbar-light .navbar-text a:focus{color:rgba(0,0,0,.9)}.navbar-dark .navbar-brand{color:#fff}.navbar-dark .navbar-brand:hover,.navbar-dark .navbar-brand:focus{color:#fff}.navbar-dark .navbar-nav .nav-link{color:rgba(255,255,255,.55)}.navbar-dark .navbar-nav .nav-link:hover,.navbar-dark .navbar-nav .nav-link:focus{color:rgba(255,255,255,.75)}.navbar-dark .navbar-nav .nav-link.disabled{color:rgba(255,255,255,.25)}.navbar-dark .navbar-nav .show>.nav-link,.navbar-dark .navbar-nav .nav-link.active{color:#fff}.navbar-dark .navbar-toggler{color:rgba(255,255,255,.55);border-color:rgba(255,255,255,.1)}.navbar-dark .navbar-toggler-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")}.navbar-dark .navbar-text{color:rgba(255,255,255,.55)}.navbar-dark .navbar-text a,.navbar-dark .navbar-text a:hover,.navbar-dark .navbar-text a:focus{color:#fff}.card{position:relative;display:flex;flex-direction:column;min-width:0;word-wrap:break-word;background-color:#fff;background-clip:border-box;border:1px solid rgba(0,0,0,.125);border-radius:0}.card>hr{margin-right:0;margin-left:0}.card>.list-group{border-top:inherit;border-bottom:inherit}.card>.list-group:first-child{border-top-width:0;border-top-left-radius:0;border-top-right-radius:0}.card>.list-group:last-child{border-bottom-width:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.card>.card-header+.list-group,.card>.list-group+.card-footer{border-top:0}.card-body{flex:1 1 auto;padding:1rem 1rem}.card-title{margin-bottom:.5rem}.card-subtitle{margin-top:-0.25rem;margin-bottom:0}.card-text:last-child{margin-bottom:0}.card-link:hover{text-decoration:none}.card-link+.card-link{margin-left:1rem}.card-header{padding:.5rem 1rem;margin-bottom:0;background-color:rgba(0,0,0,.03);border-bottom:1px solid rgba(0,0,0,.125)}.card-header:first-child{border-radius:0 0 0 0}.card-footer{padding:.5rem 1rem;background-color:rgba(0,0,0,.03);border-top:1px solid rgba(0,0,0,.125)}.card-footer:last-child{border-radius:0 0 0 0}.card-header-tabs{margin-right:-0.5rem;margin-bottom:-0.5rem;margin-left:-0.5rem;border-bottom:0}.card-header-pills{margin-right:-0.5rem;margin-left:-0.5rem}.card-img-overlay{position:absolute;top:0;right:0;bottom:0;left:0;padding:1rem;border-radius:0}.card-img,.card-img-top,.card-img-bottom{width:100%}.card-img,.card-img-top{border-top-left-radius:0;border-top-right-radius:0}.card-img,.card-img-bottom{border-bottom-right-radius:0;border-bottom-left-radius:0}.card-group>.card{margin-bottom:.75rem}@media(min-width: 576px){.card-group{display:flex;flex-flow:row wrap}.card-group>.card{flex:1 0 0%;margin-bottom:0}.card-group>.card+.card{margin-left:0;border-left:0}.card-group>.card:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.card-group>.card:not(:last-child) .card-img-top,.card-group>.card:not(:last-child) .card-header{border-top-right-radius:0}.card-group>.card:not(:last-child) .card-img-bottom,.card-group>.card:not(:last-child) .card-footer{border-bottom-right-radius:0}.card-group>.card:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.card-group>.card:not(:first-child) .card-img-top,.card-group>.card:not(:first-child) .card-header{border-top-left-radius:0}.card-group>.card:not(:first-child) .card-img-bottom,.card-group>.card:not(:first-child) .card-footer{border-bottom-left-radius:0}}.accordion-button{position:relative;display:flex;align-items:center;width:100%;padding:1rem 1.25rem;font-size:1rem;color:#757575;text-align:left;background-color:#fff;border:0;border-radius:0;overflow-anchor:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,border-radius .15s ease}@media(prefers-reduced-motion: reduce){.accordion-button{transition:none}}.accordion-button:not(.collapsed){color:#3CAEFF;background-color:#fef8f0;box-shadow:inset 0 -1px 0 rgba(0,0,0,.125)}.accordion-button:not(.collapsed)::after{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23dfa65a'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");transform:rotate(-180deg)}.accordion-button::after{flex-shrink:0;width:1.25rem;height:1.25rem;margin-left:auto;content:"";background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23757575'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");background-repeat:no-repeat;background-size:1.25rem;transition:transform .2s ease-in-out}@media(prefers-reduced-motion: reduce){.accordion-button::after{transition:none}}.accordion-button:hover{z-index:2}.accordion-button:focus{z-index:3;border-color:#C2B37F;outline:0;box-shadow:0 0 0 .25rem rgba(248,184,100,.25)}.accordion-header{margin-bottom:0}.accordion-item{background-color:#fff;border:1px solid rgba(0,0,0,.125)}.accordion-item:first-of-type{border-top-left-radius:0;border-top-right-radius:0}.accordion-item:first-of-type .accordion-button{border-top-left-radius:0;border-top-right-radius:0}.accordion-item:not(:first-of-type){border-top:0}.accordion-item:last-of-type{border-bottom-right-radius:0;border-bottom-left-radius:0}.accordion-item:last-of-type .accordion-button.collapsed{border-bottom-right-radius:0;border-bottom-left-radius:0}.accordion-item:last-of-type .accordion-collapse{border-bottom-right-radius:0;border-bottom-left-radius:0}.accordion-body{padding:1rem 1.25rem}.accordion-flush .accordion-collapse{border-width:0}.accordion-flush .accordion-item{border-right:0;border-left:0;border-radius:0}.accordion-flush .accordion-item:first-child{border-top:0}.accordion-flush .accordion-item:last-child{border-bottom:0}.accordion-flush .accordion-item .accordion-button{border-radius:0}.breadcrumb{display:flex;flex-wrap:wrap;padding:0 0;margin-bottom:1rem;list-style:none}.breadcrumb-item+.breadcrumb-item{padding-left:.5rem}.breadcrumb-item+.breadcrumb-item::before{float:left;padding-right:.5rem;color:#6c757d;content:var(--bs-breadcrumb-divider, "/") /* rtl: var(--bs-breadcrumb-divider, "/") */}.breadcrumb-item.active{color:#6c757d}.pagination{display:flex;padding-left:0;list-style:none}.page-link{position:relative;display:block;color:#0878D1;background-color:#fff;border:1px solid #dee2e6;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion: reduce){.page-link{transition:none}}.page-link:hover{z-index:2;color:#0878D1;background-color:#e9ecef;border-color:#dee2e6}.page-link:focus{z-index:3;color:#0878D1;background-color:#e9ecef;outline:0;box-shadow:0 0 0 .25rem rgba(248,184,100,.25)}.page-item:not(:first-child) .page-link{margin-left:-1px}.page-item.active .page-link{z-index:3;color:#fff;background-color:#0878D1;border-color:#0878D1}.page-item.disabled .page-link{color:#6c757d;pointer-events:none;background-color:#fff;border-color:#dee2e6}.page-link{padding:.375rem .75rem}.page-item:first-child .page-link{border-top-left-radius:0;border-bottom-left-radius:0}.page-item:last-child .page-link{border-top-right-radius:0;border-bottom-right-radius:0}.pagination-lg .page-link{padding:.75rem 1.5rem;font-size:1.25rem}.pagination-lg .page-item:first-child .page-link{border-top-left-radius:0;border-bottom-left-radius:0}.pagination-lg .page-item:last-child .page-link{border-top-right-radius:0;border-bottom-right-radius:0}.pagination-sm .page-link{padding:.25rem .5rem;font-size:0.875rem}.pagination-sm .page-item:first-child .page-link{border-top-left-radius:0;border-bottom-left-radius:0}.pagination-sm .page-item:last-child .page-link{border-top-right-radius:0;border-bottom-right-radius:0}.badge{display:inline-block;padding:.35em .65em;font-size:0.75em;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:0}.badge:empty{display:none}.btn .badge{position:relative;top:-1px}.alert{position:relative;padding:1rem 1rem;margin-bottom:1rem;border:1px solid rgba(0,0,0,0);border-radius:0}.alert-heading{color:inherit}.alert-link{font-weight:700}.alert-dismissible{padding-right:3rem}.alert-dismissible .btn-close{position:absolute;top:0;right:0;z-index:2;padding:1.25rem 1rem}.alert-primary{color:#0D1B2D;background-color:#fef1e0;border-color:#fdead1}.alert-primary .alert-link{color:#07111F}.alert-secondary{color:#615a4f;background-color:#fdf9f4;border-color:#fbf6ee}.alert-secondary .alert-link{color:#4e483f}.alert-success{color:#0f5132;background-color:#d1e7dd;border-color:#badbcc}.alert-success .alert-link{color:#0c4128}.alert-info{color:#0D1B2D;background-color:#cff4fc;border-color:#FFFFFF}.alert-info .alert-link{color:#0D1B2D}.alert-warning{color:#0D1B2D;background-color:#fff3cd;border-color:#C2B37F}.alert-warning .alert-link{color:#0D1B2D}.alert-danger{color:#842029;background-color:#f8d7da;border-color:#f5c2c7}.alert-danger .alert-link{color:#6a1a21}.alert-light{color:#616161;background-color:#fcfcfc;border-color:#fbfbfb}.alert-light .alert-link{color:#4e4e4e}.alert-dark{color:#141414;background-color:#d3d3d3;border-color:#bdbdbd}.alert-dark .alert-link{color:#101010}@keyframes progress-bar-stripes{0%{background-position-x:1rem}}.progress{display:flex;height:1rem;overflow:hidden;font-size:0.75rem;background-color:#e9ecef;border-radius:0}.progress-bar{display:flex;flex-direction:column;justify-content:center;overflow:hidden;color:#fff;text-align:center;white-space:nowrap;background-color:#0878D1;transition:width .6s ease}@media(prefers-reduced-motion: reduce){.progress-bar{transition:none}}.progress-bar-striped{background-image:linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-size:1rem 1rem}.progress-bar-animated{animation:1s linear infinite progress-bar-stripes}@media(prefers-reduced-motion: reduce){.progress-bar-animated{animation:none}}.list-group{display:flex;flex-direction:column;padding-left:0;margin-bottom:0;border-radius:0}.list-group-numbered{list-style-type:none;counter-reset:section}.list-group-numbered>li::before{content:counters(section, ".") ". ";counter-increment:section}.list-group-item-action{width:100%;color:#495057;text-align:inherit}.list-group-item-action:hover,.list-group-item-action:focus{z-index:1;color:#495057;text-decoration:none;background-color:#f8f9fa}.list-group-item-action:active{color:#757575;background-color:#e9ecef}.list-group-item{position:relative;display:block;padding:.5rem 1rem;color:#212529;background-color:#fff;border:1px solid rgba(0,0,0,.125)}.list-group-item:first-child{border-top-left-radius:inherit;border-top-right-radius:inherit}.list-group-item:last-child{border-bottom-right-radius:inherit;border-bottom-left-radius:inherit}.list-group-item.disabled,.list-group-item:disabled{color:#6c757d;pointer-events:none;background-color:#fff}.list-group-item.active{z-index:2;color:#fff;background-color:#0878D1;border-color:#0878D1}.list-group-item+.list-group-item{border-top-width:0}.list-group-item+.list-group-item.active{margin-top:-1px;border-top-width:1px}.list-group-horizontal{flex-direction:row}.list-group-horizontal>.list-group-item:first-child{border-bottom-left-radius:0;border-top-right-radius:0}.list-group-horizontal>.list-group-item:last-child{border-top-right-radius:0;border-bottom-left-radius:0}.list-group-horizontal>.list-group-item.active{margin-top:0}.list-group-horizontal>.list-group-item+.list-group-item{border-top-width:1px;border-left-width:0}.list-group-horizontal>.list-group-item+.list-group-item.active{margin-left:-1px;border-left-width:1px}@media(min-width: 576px){.list-group-horizontal-sm{flex-direction:row}.list-group-horizontal-sm>.list-group-item:first-child{border-bottom-left-radius:0;border-top-right-radius:0}.list-group-horizontal-sm>.list-group-item:last-child{border-top-right-radius:0;border-bottom-left-radius:0}.list-group-horizontal-sm>.list-group-item.active{margin-top:0}.list-group-horizontal-sm>.list-group-item+.list-group-item{border-top-width:1px;border-left-width:0}.list-group-horizontal-sm>.list-group-item+.list-group-item.active{margin-left:-1px;border-left-width:1px}}@media(min-width: 768px){.list-group-horizontal-md{flex-direction:row}.list-group-horizontal-md>.list-group-item:first-child{border-bottom-left-radius:0;border-top-right-radius:0}.list-group-horizontal-md>.list-group-item:last-child{border-top-right-radius:0;border-bottom-left-radius:0}.list-group-horizontal-md>.list-group-item.active{margin-top:0}.list-group-horizontal-md>.list-group-item+.list-group-item{border-top-width:1px;border-left-width:0}.list-group-horizontal-md>.list-group-item+.list-group-item.active{margin-left:-1px;border-left-width:1px}}@media(min-width: 992px){.list-group-horizontal-lg{flex-direction:row}.list-group-horizontal-lg>.list-group-item:first-child{border-bottom-left-radius:0;border-top-right-radius:0}.list-group-horizontal-lg>.list-group-item:last-child{border-top-right-radius:0;border-bottom-left-radius:0}.list-group-horizontal-lg>.list-group-item.active{margin-top:0}.list-group-horizontal-lg>.list-group-item+.list-group-item{border-top-width:1px;border-left-width:0}.list-group-horizontal-lg>.list-group-item+.list-group-item.active{margin-left:-1px;border-left-width:1px}}@media(min-width: 1200px){.list-group-horizontal-xl{flex-direction:row}.list-group-horizontal-xl>.list-group-item:first-child{border-bottom-left-radius:0;border-top-right-radius:0}.list-group-horizontal-xl>.list-group-item:last-child{border-top-right-radius:0;border-bottom-left-radius:0}.list-group-horizontal-xl>.list-group-item.active{margin-top:0}.list-group-horizontal-xl>.list-group-item+.list-group-item{border-top-width:1px;border-left-width:0}.list-group-horizontal-xl>.list-group-item+.list-group-item.active{margin-left:-1px;border-left-width:1px}}@media(min-width: 1400px){.list-group-horizontal-xxl{flex-direction:row}.list-group-horizontal-xxl>.list-group-item:first-child{border-bottom-left-radius:0;border-top-right-radius:0}.list-group-horizontal-xxl>.list-group-item:last-child{border-top-right-radius:0;border-bottom-left-radius:0}.list-group-horizontal-xxl>.list-group-item.active{margin-top:0}.list-group-horizontal-xxl>.list-group-item+.list-group-item{border-top-width:1px;border-left-width:0}.list-group-horizontal-xxl>.list-group-item+.list-group-item.active{margin-left:-1px;border-left-width:1px}}.list-group-flush{border-radius:0}.list-group-flush>.list-group-item{border-width:0 0 1px}.list-group-flush>.list-group-item:last-child{border-bottom-width:0}.list-group-item-primary{color:#0D1B2D;background-color:#fef1e0}.list-group-item-primary.list-group-item-action:hover,.list-group-item-primary.list-group-item-action:focus{color:#0D1B2D;background-color:#e5d9ca}.list-group-item-primary.list-group-item-action.active{color:#fff;background-color:#0D1B2D;border-color:#0D1B2D}.list-group-item-secondary{color:#615a4f;background-color:#fdf9f4}.list-group-item-secondary.list-group-item-action:hover,.list-group-item-secondary.list-group-item-action:focus{color:#615a4f;background-color:#e4e0dc}.list-group-item-secondary.list-group-item-action.active{color:#fff;background-color:#615a4f;border-color:#615a4f}.list-group-item-success{color:#0f5132;background-color:#d1e7dd}.list-group-item-success.list-group-item-action:hover,.list-group-item-success.list-group-item-action:focus{color:#0f5132;background-color:#bcd0c7}.list-group-item-success.list-group-item-action.active{color:#fff;background-color:#0f5132;border-color:#0f5132}.list-group-item-info{color:#0D1B2D;background-color:#cff4fc}.list-group-item-info.list-group-item-action:hover,.list-group-item-info.list-group-item-action:focus{color:#0D1B2D;background-color:#badce3}.list-group-item-info.list-group-item-action.active{color:#fff;background-color:#0D1B2D;border-color:#0D1B2D}.list-group-item-warning{color:#0D1B2D;background-color:#fff3cd}.list-group-item-warning.list-group-item-action:hover,.list-group-item-warning.list-group-item-action:focus{color:#0D1B2D;background-color:#e6dbb9}.list-group-item-warning.list-group-item-action.active{color:#fff;background-color:#0D1B2D;border-color:#0D1B2D}.list-group-item-danger{color:#842029;background-color:#f8d7da}.list-group-item-danger.list-group-item-action:hover,.list-group-item-danger.list-group-item-action:focus{color:#842029;background-color:#dfc2c4}.list-group-item-danger.list-group-item-action.active{color:#fff;background-color:#842029;border-color:#842029}.list-group-item-light{color:#616161;background-color:#fcfcfc}.list-group-item-light.list-group-item-action:hover,.list-group-item-light.list-group-item-action:focus{color:#616161;background-color:#e3e3e3}.list-group-item-light.list-group-item-action.active{color:#fff;background-color:#616161;border-color:#616161}.list-group-item-dark{color:#141414;background-color:#d3d3d3}.list-group-item-dark.list-group-item-action:hover,.list-group-item-dark.list-group-item-action:focus{color:#141414;background-color:#bebebe}.list-group-item-dark.list-group-item-action.active{color:#fff;background-color:#141414;border-color:#141414}.btn-close{box-sizing:content-box;width:1em;height:1em;padding:.25em .25em;color:#000;background:rgba(0,0,0,0) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;border:0;border-radius:0;opacity:.5}.btn-close:hover{color:#000;text-decoration:none;opacity:.75}.btn-close:focus{outline:0;box-shadow:0 0 0 .25rem rgba(248,184,100,.25);opacity:1}.btn-close:disabled,.btn-close.disabled{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:.25}.btn-close-white{filter:invert(1) grayscale(100%) brightness(200%)}.toast{width:350px;max-width:100%;font-size:0.875rem;pointer-events:auto;background-color:rgba(255,255,255,.85);background-clip:padding-box;border:1px solid rgba(0,0,0,.1);box-shadow:0 .5rem 1rem rgba(0,0,0,.15);border-radius:0}.toast:not(.showing):not(.show){opacity:0}.toast.hide{display:none}.toast-container{width:-moz-max-content;width:max-content;max-width:100%;pointer-events:none}.toast-container>:not(:last-child){margin-bottom:.75rem}.toast-header{display:flex;align-items:center;padding:.5rem .75rem;color:#6c757d;background-color:rgba(255,255,255,.85);background-clip:padding-box;border-bottom:1px solid rgba(0,0,0,.05);border-top-left-radius:0;border-top-right-radius:0}.toast-header .btn-close{margin-right:-0.375rem;margin-left:.75rem}.toast-body{padding:.75rem;word-wrap:break-word}.modal-open{overflow:hidden}.modal-open .modal{overflow-x:hidden;overflow-y:auto}.modal{position:fixed;top:0;left:0;z-index:1060;display:none;width:100%;height:100%;overflow:hidden;outline:0}.modal-dialog{position:relative;width:auto;margin:.5rem;pointer-events:none}.modal.fade .modal-dialog{transition:transform .3s ease-out;transform:translate(0, -50px)}@media(prefers-reduced-motion: reduce){.modal.fade .modal-dialog{transition:none}}.modal.show .modal-dialog{transform:none}.modal.modal-static .modal-dialog{transform:scale(1.02)}.modal-dialog-scrollable{height:calc(100% - 1rem)}.modal-dialog-scrollable .modal-content{max-height:100%;overflow:hidden}.modal-dialog-scrollable .modal-body{overflow-y:auto}.modal-dialog-centered{display:flex;align-items:center;min-height:calc(100% - 1rem)}.modal-content{position:relative;display:flex;flex-direction:column;width:100%;pointer-events:auto;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.2);border-radius:0;outline:0}.modal-backdrop{position:fixed;top:0;left:0;z-index:1040;width:100vw;height:100vh;background-color:#000}.modal-backdrop.fade{opacity:0}.modal-backdrop.show{opacity:.5}.modal-header{display:flex;flex-shrink:0;align-items:center;justify-content:space-between;padding:1rem 1rem;border-bottom:1px solid #dee2e6;border-top-left-radius:0;border-top-right-radius:0}.modal-header .btn-close{padding:.5rem .5rem;margin:-0.5rem -0.5rem -0.5rem auto}.modal-title{margin-bottom:0;line-height:1.5}.modal-body{position:relative;flex:1 1 auto;padding:1rem}.modal-footer{display:flex;flex-wrap:wrap;flex-shrink:0;align-items:center;justify-content:flex-end;padding:.75rem;border-top:1px solid #dee2e6;border-bottom-right-radius:0;border-bottom-left-radius:0}.modal-footer>*{margin:.25rem}@media(min-width: 576px){.modal-dialog{max-width:500px;margin:1.75rem auto}.modal-dialog-scrollable{height:calc(100% - 3.5rem)}.modal-dialog-centered{min-height:calc(100% - 3.5rem)}.modal-sm{max-width:300px}}@media(min-width: 992px){.modal-lg,.modal-xl{max-width:800px}}@media(min-width: 1200px){.modal-xl{max-width:1140px}}.modal-fullscreen{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen .modal-header{border-radius:0}.modal-fullscreen .modal-body{overflow-y:auto}.modal-fullscreen .modal-footer{border-radius:0}@media(max-width: 575.98px){.modal-fullscreen-sm-down{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen-sm-down .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen-sm-down .modal-header{border-radius:0}.modal-fullscreen-sm-down .modal-body{overflow-y:auto}.modal-fullscreen-sm-down .modal-footer{border-radius:0}}@media(max-width: 767.98px){.modal-fullscreen-md-down{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen-md-down .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen-md-down .modal-header{border-radius:0}.modal-fullscreen-md-down .modal-body{overflow-y:auto}.modal-fullscreen-md-down .modal-footer{border-radius:0}}@media(max-width: 991.98px){.modal-fullscreen-lg-down{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen-lg-down .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen-lg-down .modal-header{border-radius:0}.modal-fullscreen-lg-down .modal-body{overflow-y:auto}.modal-fullscreen-lg-down .modal-footer{border-radius:0}}@media(max-width: 1199.98px){.modal-fullscreen-xl-down{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen-xl-down .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen-xl-down .modal-header{border-radius:0}.modal-fullscreen-xl-down .modal-body{overflow-y:auto}.modal-fullscreen-xl-down .modal-footer{border-radius:0}}@media(max-width: 1399.98px){.modal-fullscreen-xxl-down{width:100vw;max-width:none;height:100%;margin:0}.modal-fullscreen-xxl-down .modal-content{height:100%;border:0;border-radius:0}.modal-fullscreen-xxl-down .modal-header{border-radius:0}.modal-fullscreen-xxl-down .modal-body{overflow-y:auto}.modal-fullscreen-xxl-down .modal-footer{border-radius:0}}.tooltip{position:absolute;z-index:1080;display:block;margin:0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,"Roboto",sans-serif;font-style:normal;font-weight:400;line-height:1.5;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;white-space:normal;line-break:auto;font-size:0.875rem;word-wrap:break-word;opacity:0}.tooltip.show{opacity:.9}.tooltip .tooltip-arrow{position:absolute;display:block;width:.8rem;height:.4rem}.tooltip .tooltip-arrow::before{position:absolute;content:"";border-color:rgba(0,0,0,0);border-style:solid}.bs-tooltip-top,.bs-tooltip-auto[data-popper-placement^=top]{padding:.4rem 0}.bs-tooltip-top .tooltip-arrow,.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow{bottom:0}.bs-tooltip-top .tooltip-arrow::before,.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before{top:-1px;border-width:.4rem .4rem 0;border-top-color:#000}.bs-tooltip-end,.bs-tooltip-auto[data-popper-placement^=right]{padding:0 .4rem}.bs-tooltip-end .tooltip-arrow,.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow{left:0;width:.4rem;height:.8rem}.bs-tooltip-end .tooltip-arrow::before,.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before{right:-1px;border-width:.4rem .4rem .4rem 0;border-right-color:#000}.bs-tooltip-bottom,.bs-tooltip-auto[data-popper-placement^=bottom]{padding:.4rem 0}.bs-tooltip-bottom .tooltip-arrow,.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow{top:0}.bs-tooltip-bottom .tooltip-arrow::before,.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before{bottom:-1px;border-width:0 .4rem .4rem;border-bottom-color:#000}.bs-tooltip-start,.bs-tooltip-auto[data-popper-placement^=left]{padding:0 .4rem}.bs-tooltip-start .tooltip-arrow,.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow{right:0;width:.4rem;height:.8rem}.bs-tooltip-start .tooltip-arrow::before,.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before{left:-1px;border-width:.4rem 0 .4rem .4rem;border-left-color:#000}.tooltip-inner{max-width:200px;padding:.25rem .5rem;color:#fff;text-align:center;background-color:#000;border-radius:0}.popover{position:absolute;top:0;left:0 /* rtl:ignore */;z-index:1070;display:block;max-width:276px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,"Roboto",sans-serif;font-style:normal;font-weight:400;line-height:1.5;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;white-space:normal;line-break:auto;font-size:0.875rem;word-wrap:break-word;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.2);border-radius:0}.popover .popover-arrow{position:absolute;display:block;width:1rem;height:.5rem}.popover .popover-arrow::before,.popover .popover-arrow::after{position:absolute;display:block;content:"";border-color:rgba(0,0,0,0);border-style:solid}.bs-popover-top>.popover-arrow,.bs-popover-auto[data-popper-placement^=top]>.popover-arrow{bottom:calc(-0.5rem - 1px)}.bs-popover-top>.popover-arrow::before,.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::before{bottom:0;border-width:.5rem .5rem 0;border-top-color:rgba(0,0,0,.25)}.bs-popover-top>.popover-arrow::after,.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::after{bottom:1px;border-width:.5rem .5rem 0;border-top-color:#fff}.bs-popover-end>.popover-arrow,.bs-popover-auto[data-popper-placement^=right]>.popover-arrow{left:calc(-0.5rem - 1px);width:.5rem;height:1rem}.bs-popover-end>.popover-arrow::before,.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::before{left:0;border-width:.5rem .5rem .5rem 0;border-right-color:rgba(0,0,0,.25)}.bs-popover-end>.popover-arrow::after,.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::after{left:1px;border-width:.5rem .5rem .5rem 0;border-right-color:#fff}.bs-popover-bottom>.popover-arrow,.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow{top:calc(-0.5rem - 1px)}.bs-popover-bottom>.popover-arrow::before,.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::before{top:0;border-width:0 .5rem .5rem .5rem;border-bottom-color:rgba(0,0,0,.25)}.bs-popover-bottom>.popover-arrow::after,.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::after{top:1px;border-width:0 .5rem .5rem .5rem;border-bottom-color:#fff}.bs-popover-bottom .popover-header::before,.bs-popover-auto[data-popper-placement^=bottom] .popover-header::before{position:absolute;top:0;left:50%;display:block;width:1rem;margin-left:-0.5rem;content:"";border-bottom:1px solid #f0f0f0}.bs-popover-start>.popover-arrow,.bs-popover-auto[data-popper-placement^=left]>.popover-arrow{right:calc(-0.5rem - 1px);width:.5rem;height:1rem}.bs-popover-start>.popover-arrow::before,.bs-popover-auto[data-popper-placement^=left]>.popover-arrow::before{right:0;border-width:.5rem 0 .5rem .5rem;border-left-color:rgba(0,0,0,.25)}.bs-popover-start>.popover-arrow::after,.bs-popover-auto[data-popper-placement^=left]>.popover-arrow::after{right:1px;border-width:.5rem 0 .5rem .5rem;border-left-color:#fff}.popover-header{padding:.5rem 1rem;margin-bottom:0;font-size:1rem;color:#222;background-color:#f0f0f0;border-bottom:1px solid #d8d8d8;border-top-left-radius:0;border-top-right-radius:0}.popover-header:empty{display:none}.popover-body{padding:1rem 1rem;color:#757575}.carousel{position:relative}.carousel.pointer-event{touch-action:pan-y}.carousel-inner{position:relative;width:100%;overflow:hidden}.carousel-inner::after{display:block;clear:both;content:""}.carousel-item{position:relative;display:none;float:left;width:100%;margin-right:-100%;backface-visibility:hidden;transition:transform .6s ease-in-out}@media(prefers-reduced-motion: reduce){.carousel-item{transition:none}}.carousel-item.active,.carousel-item-next,.carousel-item-prev{display:block}.carousel-item-next:not(.carousel-item-start),.active.carousel-item-end{transform:translateX(100%)}.carousel-item-prev:not(.carousel-item-end),.active.carousel-item-start{transform:translateX(-100%)}.carousel-fade .carousel-item{opacity:0;transition-property:opacity;transform:none}.carousel-fade .carousel-item.active,.carousel-fade .carousel-item-next.carousel-item-start,.carousel-fade .carousel-item-prev.carousel-item-end{z-index:1;opacity:1}.carousel-fade .active.carousel-item-start,.carousel-fade .active.carousel-item-end{z-index:0;opacity:0;transition:opacity 0s .6s}@media(prefers-reduced-motion: reduce){.carousel-fade .active.carousel-item-start,.carousel-fade .active.carousel-item-end{transition:none}}.carousel-control-prev,.carousel-control-next{position:absolute;top:0;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;width:15%;padding:0;color:#fff;text-align:center;background:none;border:0;opacity:.5;transition:opacity .15s ease}@media(prefers-reduced-motion: reduce){.carousel-control-prev,.carousel-control-next{transition:none}}.carousel-control-prev:hover,.carousel-control-prev:focus,.carousel-control-next:hover,.carousel-control-next:focus{color:#fff;text-decoration:none;outline:0;opacity:.9}.carousel-control-prev{left:0}.carousel-control-next{right:0}.carousel-control-prev-icon,.carousel-control-next-icon{display:inline-block;width:2rem;height:2rem;background-repeat:no-repeat;background-position:50%;background-size:100% 100%}.carousel-control-prev-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e")}.carousel-control-next-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")}.carousel-indicators{position:absolute;right:0;bottom:0;left:0;z-index:2;display:flex;justify-content:center;padding:0;margin-right:15%;margin-bottom:1rem;margin-left:15%;list-style:none}.carousel-indicators [data-bs-target]{box-sizing:content-box;flex:0 1 auto;width:30px;height:3px;padding:0;margin-right:3px;margin-left:3px;text-indent:-999px;cursor:pointer;background-color:#fff;background-clip:padding-box;border:0;border-top:10px solid rgba(0,0,0,0);border-bottom:10px solid rgba(0,0,0,0);opacity:.5;transition:opacity .6s ease}@media(prefers-reduced-motion: reduce){.carousel-indicators [data-bs-target]{transition:none}}.carousel-indicators .active{opacity:1}.carousel-caption{position:absolute;right:15%;bottom:1.25rem;left:15%;padding-top:1.25rem;padding-bottom:1.25rem;color:#fff;text-align:center}.carousel-dark .carousel-control-prev-icon,.carousel-dark .carousel-control-next-icon{filter:invert(1) grayscale(100)}.carousel-dark .carousel-indicators [data-bs-target]{background-color:#000}.carousel-dark .carousel-caption{color:#000}@keyframes spinner-border{to{transform:rotate(360deg) /* rtl:ignore */}}.spinner-border{display:inline-block;width:2rem;height:2rem;vertical-align:-0.125em;border:.25em solid currentColor;border-right-color:rgba(0,0,0,0);border-radius:50%;animation:.75s linear infinite spinner-border}.spinner-border-sm{width:1rem;height:1rem;border-width:.2em}@keyframes spinner-grow{0%{transform:scale(0)}50%{opacity:1;transform:none}}.spinner-grow{display:inline-block;width:2rem;height:2rem;vertical-align:-0.125em;background-color:currentColor;border-radius:50%;opacity:0;animation:.75s linear infinite spinner-grow}.spinner-grow-sm{width:1rem;height:1rem}@media(prefers-reduced-motion: reduce){.spinner-border,.spinner-grow{animation-duration:1.5s}}.offcanvas{position:fixed;bottom:0;z-index:1050;display:flex;flex-direction:column;max-width:100%;visibility:hidden;background-color:#fff;background-clip:padding-box;outline:0;transition:transform .3s ease-in-out}@media(prefers-reduced-motion: reduce){.offcanvas{transition:none}}.offcanvas-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1rem}.offcanvas-header .btn-close{padding:.5rem .5rem;margin:-0.5rem -0.5rem -0.5rem auto}.offcanvas-title{margin-bottom:0;line-height:1.5}.offcanvas-body{flex-grow:1;padding:1rem 1rem;overflow-y:auto}.offcanvas-start{top:0;left:0;width:400px;border-right:1px solid rgba(0,0,0,.2);transform:translateX(-100%)}.offcanvas-end{top:0;right:0;width:400px;border-left:1px solid rgba(0,0,0,.2);transform:translateX(100%)}.offcanvas-top{top:0;right:0;left:0;height:30vh;max-height:100%;border-bottom:1px solid rgba(0,0,0,.2);transform:translateY(-100%)}.offcanvas-bottom{right:0;left:0;height:30vh;max-height:100%;border-top:1px solid rgba(0,0,0,.2);transform:translateY(100%)}.offcanvas.show{transform:none}.clearfix::after{display:block;clear:both;content:""}.link-primary{color:#0878D1}.link-primary:hover,.link-primary:focus{color:#78EEFF}.link-secondary{color:#02050C}.link-secondary:hover,.link-secondary:focus{color:#f5e6d1}.link-success{color:#198754}.link-success:hover,.link-success:focus{color:#146c43}.link-info{color:#00D9FF}.link-info:hover,.link-info:focus{color:#FFFFFF}.link-warning{color:#0878D1}.link-warning:hover,.link-warning:focus{color:#3CAEFF}.link-danger{color:#dc3545}.link-danger:hover,.link-danger:focus{color:#b02a37}.link-light{color:#f2f2f2}.link-light:hover,.link-light:focus{color:#f5f5f5}.link-dark{color:#222}.link-dark:hover,.link-dark:focus{color:#1b1b1b}.ratio{position:relative;width:100%}.ratio::before{display:block;padding-top:var(--bs-aspect-ratio);content:""}.ratio>*{position:absolute;top:0;left:0;width:100%;height:100%}.ratio-1x1{--bs-aspect-ratio: 100%}.ratio-4x3{--bs-aspect-ratio: 75%}.ratio-16x9{--bs-aspect-ratio: 56.25%}.ratio-21x9{--bs-aspect-ratio: 42.8571428571%}.fixed-top{position:fixed;top:0;right:0;left:0;z-index:1030}.fixed-bottom{position:fixed;right:0;bottom:0;left:0;z-index:1030}.sticky-top{position:sticky;top:0;z-index:1020}@media(min-width: 576px){.sticky-sm-top{position:sticky;top:0;z-index:1020}}@media(min-width: 768px){.sticky-md-top{position:sticky;top:0;z-index:1020}}@media(min-width: 992px){.sticky-lg-top{position:sticky;top:0;z-index:1020}}@media(min-width: 1200px){.sticky-xl-top{position:sticky;top:0;z-index:1020}}@media(min-width: 1400px){.sticky-xxl-top{position:sticky;top:0;z-index:1020}}.visually-hidden,.visually-hidden-focusable:not(:focus):not(:focus-within){position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.stretched-link::after{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;content:""}.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.align-baseline{vertical-align:baseline !important}.align-top{vertical-align:top !important}.align-middle{vertical-align:middle !important}.align-bottom{vertical-align:bottom !important}.align-text-bottom{vertical-align:text-bottom !important}.align-text-top{vertical-align:text-top !important}.float-start{float:left !important}.float-end{float:right !important}.float-none{float:none !important}.overflow-auto{overflow:auto !important}.overflow-hidden{overflow:hidden !important}.overflow-visible{overflow:visible !important}.overflow-scroll{overflow:scroll !important}.d-inline{display:inline !important}.d-inline-block{display:inline-block !important}.d-block{display:block !important}.d-grid{display:grid !important}.d-table{display:table !important}.d-table-row{display:table-row !important}.d-table-cell{display:table-cell !important}.d-flex{display:flex !important}.d-inline-flex{display:inline-flex !important}.d-none{display:none !important}.shadow{box-shadow:0 .5rem 1rem rgba(0,0,0,.15) !important}.shadow-sm{box-shadow:0 .125rem .25rem rgba(0,0,0,.075) !important}.shadow-lg{box-shadow:0 1rem 3rem rgba(0,0,0,.175) !important}.shadow-none{box-shadow:none !important}.position-static{position:static !important}.position-relative{position:relative !important}.position-absolute{position:absolute !important}.position-fixed{position:fixed !important}.position-sticky{position:sticky !important}.top-0{top:0 !important}.top-50{top:50% !important}.top-100{top:100% !important}.bottom-0{bottom:0 !important}.bottom-50{bottom:50% !important}.bottom-100{bottom:100% !important}.start-0{left:0 !important}.start-50{left:50% !important}.start-100{left:100% !important}.end-0{right:0 !important}.end-50{right:50% !important}.end-100{right:100% !important}.translate-middle{transform:translate(-50%, -50%) !important}.translate-middle-x{transform:translateX(-50%) !important}.translate-middle-y{transform:translateY(-50%) !important}.border{border:1px solid #dee2e6 !important}.border-0{border:0 !important}.border-top{border-top:1px solid #dee2e6 !important}.border-top-0{border-top:0 !important}.border-end{border-right:1px solid #dee2e6 !important}.border-end-0{border-right:0 !important}.border-bottom{border-bottom:1px solid #dee2e6 !important}.border-bottom-0{border-bottom:0 !important}.border-start{border-left:1px solid #dee2e6 !important}.border-start-0{border-left:0 !important}.border-primary{border-color:#0878D1 !important}.border-secondary{border-color:#02050C !important}.border-success{border-color:#198754 !important}.border-info{border-color:#00D9FF !important}.border-warning{border-color:#0878D1 !important}.border-danger{border-color:#dc3545 !important}.border-light{border-color:#f2f2f2 !important}.border-dark{border-color:#222 !important}.border-white{border-color:#fff !important}.border-1{border-width:1px !important}.border-2{border-width:2px !important}.border-3{border-width:3px !important}.border-4{border-width:4px !important}.border-5{border-width:5px !important}.w-25{width:25% !important}.w-50{width:50% !important}.w-75{width:75% !important}.w-100{width:100% !important}.w-auto{width:auto !important}.mw-100{max-width:100% !important}.vw-100{width:100vw !important}.min-vw-100{min-width:100vw !important}.h-25{height:25% !important}.h-50{height:50% !important}.h-75{height:75% !important}.h-100{height:100% !important}.h-auto{height:auto !important}.mh-100{max-height:100% !important}.vh-100{height:100vh !important}.min-vh-100{min-height:100vh !important}.flex-fill{flex:1 1 auto !important}.flex-row{flex-direction:row !important}.flex-column{flex-direction:column !important}.flex-row-reverse{flex-direction:row-reverse !important}.flex-column-reverse{flex-direction:column-reverse !important}.flex-grow-0{flex-grow:0 !important}.flex-grow-1{flex-grow:1 !important}.flex-shrink-0{flex-shrink:0 !important}.flex-shrink-1{flex-shrink:1 !important}.flex-wrap{flex-wrap:wrap !important}.flex-nowrap{flex-wrap:nowrap !important}.flex-wrap-reverse{flex-wrap:wrap-reverse !important}.gap-0{gap:0 !important}.gap-1{gap:.25rem !important}.gap-2{gap:.5rem !important}.gap-3{gap:1rem !important}.gap-4{gap:1.5rem !important}.gap-5{gap:3rem !important}.justify-content-start{justify-content:flex-start !important}.justify-content-end{justify-content:flex-end !important}.justify-content-center{justify-content:center !important}.justify-content-between{justify-content:space-between !important}.justify-content-around{justify-content:space-around !important}.justify-content-evenly{justify-content:space-evenly !important}.align-items-start{align-items:flex-start !important}.align-items-end{align-items:flex-end !important}.align-items-center{align-items:center !important}.align-items-baseline{align-items:baseline !important}.align-items-stretch{align-items:stretch !important}.align-content-start{align-content:flex-start !important}.align-content-end{align-content:flex-end !important}.align-content-center{align-content:center !important}.align-content-between{align-content:space-between !important}.align-content-around{align-content:space-around !important}.align-content-stretch{align-content:stretch !important}.align-self-auto{align-self:auto !important}.align-self-start{align-self:flex-start !important}.align-self-end{align-self:flex-end !important}.align-self-center{align-self:center !important}.align-self-baseline{align-self:baseline !important}.align-self-stretch{align-self:stretch !important}.order-first{order:-1 !important}.order-0{order:0 !important}.order-1{order:1 !important}.order-2{order:2 !important}.order-3{order:3 !important}.order-4{order:4 !important}.order-5{order:5 !important}.order-last{order:6 !important}.m-0{margin:0 !important}.m-1{margin:.25rem !important}.m-2{margin:.5rem !important}.m-3{margin:1rem !important}.m-4{margin:1.5rem !important}.m-5{margin:3rem !important}.m-auto{margin:auto !important}.mx-0{margin-right:0 !important;margin-left:0 !important}.mx-1{margin-right:.25rem !important;margin-left:.25rem !important}.mx-2{margin-right:.5rem !important;margin-left:.5rem !important}.mx-3{margin-right:1rem !important;margin-left:1rem !important}.mx-4{margin-right:1.5rem !important;margin-left:1.5rem !important}.mx-5{margin-right:3rem !important;margin-left:3rem !important}.mx-auto{margin-right:auto !important;margin-left:auto !important}.my-0{margin-top:0 !important;margin-bottom:0 !important}.my-1{margin-top:.25rem !important;margin-bottom:.25rem !important}.my-2{margin-top:.5rem !important;margin-bottom:.5rem !important}.my-3{margin-top:1rem !important;margin-bottom:1rem !important}.my-4{margin-top:1.5rem !important;margin-bottom:1.5rem !important}.my-5{margin-top:3rem !important;margin-bottom:3rem !important}.my-auto{margin-top:auto !important;margin-bottom:auto !important}.mt-0{margin-top:0 !important}.mt-1{margin-top:.25rem !important}.mt-2{margin-top:.5rem !important}.mt-3{margin-top:1rem !important}.mt-4{margin-top:1.5rem !important}.mt-5{margin-top:3rem !important}.mt-auto{margin-top:auto !important}.me-0{margin-right:0 !important}.me-1{margin-right:.25rem !important}.me-2{margin-right:.5rem !important}.me-3{margin-right:1rem !important}.me-4{margin-right:1.5rem !important}.me-5{margin-right:3rem !important}.me-auto{margin-right:auto !important}.mb-0{margin-bottom:0 !important}.mb-1{margin-bottom:.25rem !important}.mb-2{margin-bottom:.5rem !important}.mb-3{margin-bottom:1rem !important}.mb-4{margin-bottom:1.5rem !important}.mb-5{margin-bottom:3rem !important}.mb-auto{margin-bottom:auto !important}.ms-0{margin-left:0 !important}.ms-1{margin-left:.25rem !important}.ms-2{margin-left:.5rem !important}.ms-3{margin-left:1rem !important}.ms-4{margin-left:1.5rem !important}.ms-5{margin-left:3rem !important}.ms-auto{margin-left:auto !important}.m-n1{margin:-0.25rem !important}.m-n2{margin:-0.5rem !important}.m-n3{margin:-1rem !important}.m-n4{margin:-1.5rem !important}.m-n5{margin:-3rem !important}.mx-n1{margin-right:-0.25rem !important;margin-left:-0.25rem !important}.mx-n2{margin-right:-0.5rem !important;margin-left:-0.5rem !important}.mx-n3{margin-right:-1rem !important;margin-left:-1rem !important}.mx-n4{margin-right:-1.5rem !important;margin-left:-1.5rem !important}.mx-n5{margin-right:-3rem !important;margin-left:-3rem !important}.my-n1{margin-top:-0.25rem !important;margin-bottom:-0.25rem !important}.my-n2{margin-top:-0.5rem !important;margin-bottom:-0.5rem !important}.my-n3{margin-top:-1rem !important;margin-bottom:-1rem !important}.my-n4{margin-top:-1.5rem !important;margin-bottom:-1.5rem !important}.my-n5{margin-top:-3rem !important;margin-bottom:-3rem !important}.mt-n1{margin-top:-0.25rem !important}.mt-n2{margin-top:-0.5rem !important}.mt-n3{margin-top:-1rem !important}.mt-n4{margin-top:-1.5rem !important}.mt-n5{margin-top:-3rem !important}.me-n1{margin-right:-0.25rem !important}.me-n2{margin-right:-0.5rem !important}.me-n3{margin-right:-1rem !important}.me-n4{margin-right:-1.5rem !important}.me-n5{margin-right:-3rem !important}.mb-n1{margin-bottom:-0.25rem !important}.mb-n2{margin-bottom:-0.5rem !important}.mb-n3{margin-bottom:-1rem !important}.mb-n4{margin-bottom:-1.5rem !important}.mb-n5{margin-bottom:-3rem !important}.ms-n1{margin-left:-0.25rem !important}.ms-n2{margin-left:-0.5rem !important}.ms-n3{margin-left:-1rem !important}.ms-n4{margin-left:-1.5rem !important}.ms-n5{margin-left:-3rem !important}.p-0{padding:0 !important}.p-1{padding:.25rem !important}.p-2{padding:.5rem !important}.p-3{padding:1rem !important}.p-4{padding:1.5rem !important}.p-5{padding:3rem !important}.px-0{padding-right:0 !important;padding-left:0 !important}.px-1{padding-right:.25rem !important;padding-left:.25rem !important}.px-2{padding-right:.5rem !important;padding-left:.5rem !important}.px-3{padding-right:1rem !important;padding-left:1rem !important}.px-4{padding-right:1.5rem !important;padding-left:1.5rem !important}.px-5{padding-right:3rem !important;padding-left:3rem !important}.py-0{padding-top:0 !important;padding-bottom:0 !important}.py-1{padding-top:.25rem !important;padding-bottom:.25rem !important}.py-2{padding-top:.5rem !important;padding-bottom:.5rem !important}.py-3{padding-top:1rem !important;padding-bottom:1rem !important}.py-4{padding-top:1.5rem !important;padding-bottom:1.5rem !important}.py-5{padding-top:3rem !important;padding-bottom:3rem !important}.pt-0{padding-top:0 !important}.pt-1{padding-top:.25rem !important}.pt-2{padding-top:.5rem !important}.pt-3{padding-top:1rem !important}.pt-4{padding-top:1.5rem !important}.pt-5{padding-top:3rem !important}.pe-0{padding-right:0 !important}.pe-1{padding-right:.25rem !important}.pe-2{padding-right:.5rem !important}.pe-3{padding-right:1rem !important}.pe-4{padding-right:1.5rem !important}.pe-5{padding-right:3rem !important}.pb-0{padding-bottom:0 !important}.pb-1{padding-bottom:.25rem !important}.pb-2{padding-bottom:.5rem !important}.pb-3{padding-bottom:1rem !important}.pb-4{padding-bottom:1.5rem !important}.pb-5{padding-bottom:3rem !important}.ps-0{padding-left:0 !important}.ps-1{padding-left:.25rem !important}.ps-2{padding-left:.5rem !important}.ps-3{padding-left:1rem !important}.ps-4{padding-left:1.5rem !important}.ps-5{padding-left:3rem !important}.font-monospace{ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,var(--bs-font-monospace) !important}.fs-1{font-size:calc(1.375rem + 1.5vw) !important}.fs-2{font-size:calc(1.325rem + 0.9vw) !important}.fs-3{font-size:calc(1.3rem + 0.6vw) !important}.fs-4{font-size:calc(1.275rem + 0.3vw) !important}.fs-5{font-size:1.25rem !important}.fs-6{font-size:1rem !important}.fst-italic{font-style:italic !important}.fst-normal{font-style:normal !important}.fw-light{font-weight:300 !important}.fw-lighter{font-weight:lighter !important}.fw-normal{font-weight:400 !important}.fw-bold{font-weight:700 !important}.fw-bolder{font-weight:bolder !important}.lh-1{line-height:1 !important}.lh-sm{line-height:1.25 !important}.lh-base{line-height:1.5 !important}.lh-lg{line-height:2 !important}.text-start{text-align:left !important}.text-end{text-align:right !important}.text-center{text-align:center !important}.text-decoration-none{text-decoration:none !important}.text-decoration-underline{text-decoration:underline !important}.text-decoration-line-through{text-decoration:line-through !important}.text-lowercase{text-transform:lowercase !important}.text-uppercase{text-transform:uppercase !important}.text-capitalize{text-transform:capitalize !important}.text-wrap{white-space:normal !important}.text-nowrap{white-space:nowrap !important}.text-break{word-wrap:break-word !important;word-break:break-word !important}.text-primary{color:#0878D1 !important}.text-secondary{color:#02050C !important}.text-success{color:#198754 !important}.text-info{color:#00D9FF !important}.text-warning{color:#0878D1 !important}.text-danger{color:#dc3545 !important}.text-light{color:#f2f2f2 !important}.text-dark{color:#222 !important}.text-white{color:#fff !important}.text-body{color:#757575 !important}.text-muted{color:#6c757d !important}.text-black-50{color:rgba(0,0,0,.5) !important}.text-white-50{color:rgba(255,255,255,.5) !important}.text-reset{color:inherit !important}.bg-primary{background-color:#0878D1 !important}.bg-secondary{background-color:#02050C !important}.bg-success{background-color:#198754 !important}.bg-info{background-color:#00D9FF !important}.bg-warning{background-color:#0878D1 !important}.bg-danger{background-color:#dc3545 !important}.bg-light{background-color:#f2f2f2 !important}.bg-dark{background-color:#222 !important}.bg-body{background-color:#fff !important}.bg-white{background-color:#fff !important}.bg-transparent{background-color:rgba(0,0,0,0) !important}.bg-gradient{background-image:var(--bs-gradient) !important}.user-select-all{-webkit-user-select:all !important;-moz-user-select:all !important;user-select:all !important}.user-select-auto{-webkit-user-select:auto !important;-moz-user-select:auto !important;user-select:auto !important}.user-select-none{-webkit-user-select:none !important;-moz-user-select:none !important;user-select:none !important}.pe-none{pointer-events:none !important}.pe-auto{pointer-events:auto !important}.rounded{border-radius:0 !important}.rounded-0{border-radius:0 !important}.rounded-1{border-radius:0 !important}.rounded-2{border-radius:0 !important}.rounded-3{border-radius:0 !important}.rounded-circle{border-radius:50% !important}.rounded-pill{border-radius:50rem !important}.rounded-top{border-top-left-radius:0 !important;border-top-right-radius:0 !important}.rounded-end{border-top-right-radius:0 !important;border-bottom-right-radius:0 !important}.rounded-bottom{border-bottom-right-radius:0 !important;border-bottom-left-radius:0 !important}.rounded-start{border-bottom-left-radius:0 !important;border-top-left-radius:0 !important}.visible{visibility:visible !important}.invisible{visibility:hidden !important}@media(min-width: 576px){.float-sm-start{float:left !important}.float-sm-end{float:right !important}.float-sm-none{float:none !important}.d-sm-inline{display:inline !important}.d-sm-inline-block{display:inline-block !important}.d-sm-block{display:block !important}.d-sm-grid{display:grid !important}.d-sm-table{display:table !important}.d-sm-table-row{display:table-row !important}.d-sm-table-cell{display:table-cell !important}.d-sm-flex{display:flex !important}.d-sm-inline-flex{display:inline-flex !important}.d-sm-none{display:none !important}.flex-sm-fill{flex:1 1 auto !important}.flex-sm-row{flex-direction:row !important}.flex-sm-column{flex-direction:column !important}.flex-sm-row-reverse{flex-direction:row-reverse !important}.flex-sm-column-reverse{flex-direction:column-reverse !important}.flex-sm-grow-0{flex-grow:0 !important}.flex-sm-grow-1{flex-grow:1 !important}.flex-sm-shrink-0{flex-shrink:0 !important}.flex-sm-shrink-1{flex-shrink:1 !important}.flex-sm-wrap{flex-wrap:wrap !important}.flex-sm-nowrap{flex-wrap:nowrap !important}.flex-sm-wrap-reverse{flex-wrap:wrap-reverse !important}.gap-sm-0{gap:0 !important}.gap-sm-1{gap:.25rem !important}.gap-sm-2{gap:.5rem !important}.gap-sm-3{gap:1rem !important}.gap-sm-4{gap:1.5rem !important}.gap-sm-5{gap:3rem !important}.justify-content-sm-start{justify-content:flex-start !important}.justify-content-sm-end{justify-content:flex-end !important}.justify-content-sm-center{justify-content:center !important}.justify-content-sm-between{justify-content:space-between !important}.justify-content-sm-around{justify-content:space-around !important}.justify-content-sm-evenly{justify-content:space-evenly !important}.align-items-sm-start{align-items:flex-start !important}.align-items-sm-end{align-items:flex-end !important}.align-items-sm-center{align-items:center !important}.align-items-sm-baseline{align-items:baseline !important}.align-items-sm-stretch{align-items:stretch !important}.align-content-sm-start{align-content:flex-start !important}.align-content-sm-end{align-content:flex-end !important}.align-content-sm-center{align-content:center !important}.align-content-sm-between{align-content:space-between !important}.align-content-sm-around{align-content:space-around !important}.align-content-sm-stretch{align-content:stretch !important}.align-self-sm-auto{align-self:auto !important}.align-self-sm-start{align-self:flex-start !important}.align-self-sm-end{align-self:flex-end !important}.align-self-sm-center{align-self:center !important}.align-self-sm-baseline{align-self:baseline !important}.align-self-sm-stretch{align-self:stretch !important}.order-sm-first{order:-1 !important}.order-sm-0{order:0 !important}.order-sm-1{order:1 !important}.order-sm-2{order:2 !important}.order-sm-3{order:3 !important}.order-sm-4{order:4 !important}.order-sm-5{order:5 !important}.order-sm-last{order:6 !important}.m-sm-0{margin:0 !important}.m-sm-1{margin:.25rem !important}.m-sm-2{margin:.5rem !important}.m-sm-3{margin:1rem !important}.m-sm-4{margin:1.5rem !important}.m-sm-5{margin:3rem !important}.m-sm-auto{margin:auto !important}.mx-sm-0{margin-right:0 !important;margin-left:0 !important}.mx-sm-1{margin-right:.25rem !important;margin-left:.25rem !important}.mx-sm-2{margin-right:.5rem !important;margin-left:.5rem !important}.mx-sm-3{margin-right:1rem !important;margin-left:1rem !important}.mx-sm-4{margin-right:1.5rem !important;margin-left:1.5rem !important}.mx-sm-5{margin-right:3rem !important;margin-left:3rem !important}.mx-sm-auto{margin-right:auto !important;margin-left:auto !important}.my-sm-0{margin-top:0 !important;margin-bottom:0 !important}.my-sm-1{margin-top:.25rem !important;margin-bottom:.25rem !important}.my-sm-2{margin-top:.5rem !important;margin-bottom:.5rem !important}.my-sm-3{margin-top:1rem !important;margin-bottom:1rem !important}.my-sm-4{margin-top:1.5rem !important;margin-bottom:1.5rem !important}.my-sm-5{margin-top:3rem !important;margin-bottom:3rem !important}.my-sm-auto{margin-top:auto !important;margin-bottom:auto !important}.mt-sm-0{margin-top:0 !important}.mt-sm-1{margin-top:.25rem !important}.mt-sm-2{margin-top:.5rem !important}.mt-sm-3{margin-top:1rem !important}.mt-sm-4{margin-top:1.5rem !important}.mt-sm-5{margin-top:3rem !important}.mt-sm-auto{margin-top:auto !important}.me-sm-0{margin-right:0 !important}.me-sm-1{margin-right:.25rem !important}.me-sm-2{margin-right:.5rem !important}.me-sm-3{margin-right:1rem !important}.me-sm-4{margin-right:1.5rem !important}.me-sm-5{margin-right:3rem !important}.me-sm-auto{margin-right:auto !important}.mb-sm-0{margin-bottom:0 !important}.mb-sm-1{margin-bottom:.25rem !important}.mb-sm-2{margin-bottom:.5rem !important}.mb-sm-3{margin-bottom:1rem !important}.mb-sm-4{margin-bottom:1.5rem !important}.mb-sm-5{margin-bottom:3rem !important}.mb-sm-auto{margin-bottom:auto !important}.ms-sm-0{margin-left:0 !important}.ms-sm-1{margin-left:.25rem !important}.ms-sm-2{margin-left:.5rem !important}.ms-sm-3{margin-left:1rem !important}.ms-sm-4{margin-left:1.5rem !important}.ms-sm-5{margin-left:3rem !important}.ms-sm-auto{margin-left:auto !important}.m-sm-n1{margin:-0.25rem !important}.m-sm-n2{margin:-0.5rem !important}.m-sm-n3{margin:-1rem !important}.m-sm-n4{margin:-1.5rem !important}.m-sm-n5{margin:-3rem !important}.mx-sm-n1{margin-right:-0.25rem !important;margin-left:-0.25rem !important}.mx-sm-n2{margin-right:-0.5rem !important;margin-left:-0.5rem !important}.mx-sm-n3{margin-right:-1rem !important;margin-left:-1rem !important}.mx-sm-n4{margin-right:-1.5rem !important;margin-left:-1.5rem !important}.mx-sm-n5{margin-right:-3rem !important;margin-left:-3rem !important}.my-sm-n1{margin-top:-0.25rem !important;margin-bottom:-0.25rem !important}.my-sm-n2{margin-top:-0.5rem !important;margin-bottom:-0.5rem !important}.my-sm-n3{margin-top:-1rem !important;margin-bottom:-1rem !important}.my-sm-n4{margin-top:-1.5rem !important;margin-bottom:-1.5rem !important}.my-sm-n5{margin-top:-3rem !important;margin-bottom:-3rem !important}.mt-sm-n1{margin-top:-0.25rem !important}.mt-sm-n2{margin-top:-0.5rem !important}.mt-sm-n3{margin-top:-1rem !important}.mt-sm-n4{margin-top:-1.5rem !important}.mt-sm-n5{margin-top:-3rem !important}.me-sm-n1{margin-right:-0.25rem !important}.me-sm-n2{margin-right:-0.5rem !important}.me-sm-n3{margin-right:-1rem !important}.me-sm-n4{margin-right:-1.5rem !important}.me-sm-n5{margin-right:-3rem !important}.mb-sm-n1{margin-bottom:-0.25rem !important}.mb-sm-n2{margin-bottom:-0.5rem !important}.mb-sm-n3{margin-bottom:-1rem !important}.mb-sm-n4{margin-bottom:-1.5rem !important}.mb-sm-n5{margin-bottom:-3rem !important}.ms-sm-n1{margin-left:-0.25rem !important}.ms-sm-n2{margin-left:-0.5rem !important}.ms-sm-n3{margin-left:-1rem !important}.ms-sm-n4{margin-left:-1.5rem !important}.ms-sm-n5{margin-left:-3rem !important}.p-sm-0{padding:0 !important}.p-sm-1{padding:.25rem !important}.p-sm-2{padding:.5rem !important}.p-sm-3{padding:1rem !important}.p-sm-4{padding:1.5rem !important}.p-sm-5{padding:3rem !important}.px-sm-0{padding-right:0 !important;padding-left:0 !important}.px-sm-1{padding-right:.25rem !important;padding-left:.25rem !important}.px-sm-2{padding-right:.5rem !important;padding-left:.5rem !important}.px-sm-3{padding-right:1rem !important;padding-left:1rem !important}.px-sm-4{padding-right:1.5rem !important;padding-left:1.5rem !important}.px-sm-5{padding-right:3rem !important;padding-left:3rem !important}.py-sm-0{padding-top:0 !important;padding-bottom:0 !important}.py-sm-1{padding-top:.25rem !important;padding-bottom:.25rem !important}.py-sm-2{padding-top:.5rem !important;padding-bottom:.5rem !important}.py-sm-3{padding-top:1rem !important;padding-bottom:1rem !important}.py-sm-4{padding-top:1.5rem !important;padding-bottom:1.5rem !important}.py-sm-5{padding-top:3rem !important;padding-bottom:3rem !important}.pt-sm-0{padding-top:0 !important}.pt-sm-1{padding-top:.25rem !important}.pt-sm-2{padding-top:.5rem !important}.pt-sm-3{padding-top:1rem !important}.pt-sm-4{padding-top:1.5rem !important}.pt-sm-5{padding-top:3rem !important}.pe-sm-0{padding-right:0 !important}.pe-sm-1{padding-right:.25rem !important}.pe-sm-2{padding-right:.5rem !important}.pe-sm-3{padding-right:1rem !important}.pe-sm-4{padding-right:1.5rem !important}.pe-sm-5{padding-right:3rem !important}.pb-sm-0{padding-bottom:0 !important}.pb-sm-1{padding-bottom:.25rem !important}.pb-sm-2{padding-bottom:.5rem !important}.pb-sm-3{padding-bottom:1rem !important}.pb-sm-4{padding-bottom:1.5rem !important}.pb-sm-5{padding-bottom:3rem !important}.ps-sm-0{padding-left:0 !important}.ps-sm-1{padding-left:.25rem !important}.ps-sm-2{padding-left:.5rem !important}.ps-sm-3{padding-left:1rem !important}.ps-sm-4{padding-left:1.5rem !important}.ps-sm-5{padding-left:3rem !important}.text-sm-start{text-align:left !important}.text-sm-end{text-align:right !important}.text-sm-center{text-align:center !important}}@media(min-width: 768px){.float-md-start{float:left !important}.float-md-end{float:right !important}.float-md-none{float:none !important}.d-md-inline{display:inline !important}.d-md-inline-block{display:inline-block !important}.d-md-block{display:block !important}.d-md-grid{display:grid !important}.d-md-table{display:table !important}.d-md-table-row{display:table-row !important}.d-md-table-cell{display:table-cell !important}.d-md-flex{display:flex !important}.d-md-inline-flex{display:inline-flex !important}.d-md-none{display:none !important}.flex-md-fill{flex:1 1 auto !important}.flex-md-row{flex-direction:row !important}.flex-md-column{flex-direction:column !important}.flex-md-row-reverse{flex-direction:row-reverse !important}.flex-md-column-reverse{flex-direction:column-reverse !important}.flex-md-grow-0{flex-grow:0 !important}.flex-md-grow-1{flex-grow:1 !important}.flex-md-shrink-0{flex-shrink:0 !important}.flex-md-shrink-1{flex-shrink:1 !important}.flex-md-wrap{flex-wrap:wrap !important}.flex-md-nowrap{flex-wrap:nowrap !important}.flex-md-wrap-reverse{flex-wrap:wrap-reverse !important}.gap-md-0{gap:0 !important}.gap-md-1{gap:.25rem !important}.gap-md-2{gap:.5rem !important}.gap-md-3{gap:1rem !important}.gap-md-4{gap:1.5rem !important}.gap-md-5{gap:3rem !important}.justify-content-md-start{justify-content:flex-start !important}.justify-content-md-end{justify-content:flex-end !important}.justify-content-md-center{justify-content:center !important}.justify-content-md-between{justify-content:space-between !important}.justify-content-md-around{justify-content:space-around !important}.justify-content-md-evenly{justify-content:space-evenly !important}.align-items-md-start{align-items:flex-start !important}.align-items-md-end{align-items:flex-end !important}.align-items-md-center{align-items:center !important}.align-items-md-baseline{align-items:baseline !important}.align-items-md-stretch{align-items:stretch !important}.align-content-md-start{align-content:flex-start !important}.align-content-md-end{align-content:flex-end !important}.align-content-md-center{align-content:center !important}.align-content-md-between{align-content:space-between !important}.align-content-md-around{align-content:space-around !important}.align-content-md-stretch{align-content:stretch !important}.align-self-md-auto{align-self:auto !important}.align-self-md-start{align-self:flex-start !important}.align-self-md-end{align-self:flex-end !important}.align-self-md-center{align-self:center !important}.align-self-md-baseline{align-self:baseline !important}.align-self-md-stretch{align-self:stretch !important}.order-md-first{order:-1 !important}.order-md-0{order:0 !important}.order-md-1{order:1 !important}.order-md-2{order:2 !important}.order-md-3{order:3 !important}.order-md-4{order:4 !important}.order-md-5{order:5 !important}.order-md-last{order:6 !important}.m-md-0{margin:0 !important}.m-md-1{margin:.25rem !important}.m-md-2{margin:.5rem !important}.m-md-3{margin:1rem !important}.m-md-4{margin:1.5rem !important}.m-md-5{margin:3rem !important}.m-md-auto{margin:auto !important}.mx-md-0{margin-right:0 !important;margin-left:0 !important}.mx-md-1{margin-right:.25rem !important;margin-left:.25rem !important}.mx-md-2{margin-right:.5rem !important;margin-left:.5rem !important}.mx-md-3{margin-right:1rem !important;margin-left:1rem !important}.mx-md-4{margin-right:1.5rem !important;margin-left:1.5rem !important}.mx-md-5{margin-right:3rem !important;margin-left:3rem !important}.mx-md-auto{margin-right:auto !important;margin-left:auto !important}.my-md-0{margin-top:0 !important;margin-bottom:0 !important}.my-md-1{margin-top:.25rem !important;margin-bottom:.25rem !important}.my-md-2{margin-top:.5rem !important;margin-bottom:.5rem !important}.my-md-3{margin-top:1rem !important;margin-bottom:1rem !important}.my-md-4{margin-top:1.5rem !important;margin-bottom:1.5rem !important}.my-md-5{margin-top:3rem !important;margin-bottom:3rem !important}.my-md-auto{margin-top:auto !important;margin-bottom:auto !important}.mt-md-0{margin-top:0 !important}.mt-md-1{margin-top:.25rem !important}.mt-md-2{margin-top:.5rem !important}.mt-md-3{margin-top:1rem !important}.mt-md-4{margin-top:1.5rem !important}.mt-md-5{margin-top:3rem !important}.mt-md-auto{margin-top:auto !important}.me-md-0{margin-right:0 !important}.me-md-1{margin-right:.25rem !important}.me-md-2{margin-right:.5rem !important}.me-md-3{margin-right:1rem !important}.me-md-4{margin-right:1.5rem !important}.me-md-5{margin-right:3rem !important}.me-md-auto{margin-right:auto !important}.mb-md-0{margin-bottom:0 !important}.mb-md-1{margin-bottom:.25rem !important}.mb-md-2{margin-bottom:.5rem !important}.mb-md-3{margin-bottom:1rem !important}.mb-md-4{margin-bottom:1.5rem !important}.mb-md-5{margin-bottom:3rem !important}.mb-md-auto{margin-bottom:auto !important}.ms-md-0{margin-left:0 !important}.ms-md-1{margin-left:.25rem !important}.ms-md-2{margin-left:.5rem !important}.ms-md-3{margin-left:1rem !important}.ms-md-4{margin-left:1.5rem !important}.ms-md-5{margin-left:3rem !important}.ms-md-auto{margin-left:auto !important}.m-md-n1{margin:-0.25rem !important}.m-md-n2{margin:-0.5rem !important}.m-md-n3{margin:-1rem !important}.m-md-n4{margin:-1.5rem !important}.m-md-n5{margin:-3rem !important}.mx-md-n1{margin-right:-0.25rem !important;margin-left:-0.25rem !important}.mx-md-n2{margin-right:-0.5rem !important;margin-left:-0.5rem !important}.mx-md-n3{margin-right:-1rem !important;margin-left:-1rem !important}.mx-md-n4{margin-right:-1.5rem !important;margin-left:-1.5rem !important}.mx-md-n5{margin-right:-3rem !important;margin-left:-3rem !important}.my-md-n1{margin-top:-0.25rem !important;margin-bottom:-0.25rem !important}.my-md-n2{margin-top:-0.5rem !important;margin-bottom:-0.5rem !important}.my-md-n3{margin-top:-1rem !important;margin-bottom:-1rem !important}.my-md-n4{margin-top:-1.5rem !important;margin-bottom:-1.5rem !important}.my-md-n5{margin-top:-3rem !important;margin-bottom:-3rem !important}.mt-md-n1{margin-top:-0.25rem !important}.mt-md-n2{margin-top:-0.5rem !important}.mt-md-n3{margin-top:-1rem !important}.mt-md-n4{margin-top:-1.5rem !important}.mt-md-n5{margin-top:-3rem !important}.me-md-n1{margin-right:-0.25rem !important}.me-md-n2{margin-right:-0.5rem !important}.me-md-n3{margin-right:-1rem !important}.me-md-n4{margin-right:-1.5rem !important}.me-md-n5{margin-right:-3rem !important}.mb-md-n1{margin-bottom:-0.25rem !important}.mb-md-n2{margin-bottom:-0.5rem !important}.mb-md-n3{margin-bottom:-1rem !important}.mb-md-n4{margin-bottom:-1.5rem !important}.mb-md-n5{margin-bottom:-3rem !important}.ms-md-n1{margin-left:-0.25rem !important}.ms-md-n2{margin-left:-0.5rem !important}.ms-md-n3{margin-left:-1rem !important}.ms-md-n4{margin-left:-1.5rem !important}.ms-md-n5{margin-left:-3rem !important}.p-md-0{padding:0 !important}.p-md-1{padding:.25rem !important}.p-md-2{padding:.5rem !important}.p-md-3{padding:1rem !important}.p-md-4{padding:1.5rem !important}.p-md-5{padding:3rem !important}.px-md-0{padding-right:0 !important;padding-left:0 !important}.px-md-1{padding-right:.25rem !important;padding-left:.25rem !important}.px-md-2{padding-right:.5rem !important;padding-left:.5rem !important}.px-md-3{padding-right:1rem !important;padding-left:1rem !important}.px-md-4{padding-right:1.5rem !important;padding-left:1.5rem !important}.px-md-5{padding-right:3rem !important;padding-left:3rem !important}.py-md-0{padding-top:0 !important;padding-bottom:0 !important}.py-md-1{padding-top:.25rem !important;padding-bottom:.25rem !important}.py-md-2{padding-top:.5rem !important;padding-bottom:.5rem !important}.py-md-3{padding-top:1rem !important;padding-bottom:1rem !important}.py-md-4{padding-top:1.5rem !important;padding-bottom:1.5rem !important}.py-md-5{padding-top:3rem !important;padding-bottom:3rem !important}.pt-md-0{padding-top:0 !important}.pt-md-1{padding-top:.25rem !important}.pt-md-2{padding-top:.5rem !important}.pt-md-3{padding-top:1rem !important}.pt-md-4{padding-top:1.5rem !important}.pt-md-5{padding-top:3rem !important}.pe-md-0{padding-right:0 !important}.pe-md-1{padding-right:.25rem !important}.pe-md-2{padding-right:.5rem !important}.pe-md-3{padding-right:1rem !important}.pe-md-4{padding-right:1.5rem !important}.pe-md-5{padding-right:3rem !important}.pb-md-0{padding-bottom:0 !important}.pb-md-1{padding-bottom:.25rem !important}.pb-md-2{padding-bottom:.5rem !important}.pb-md-3{padding-bottom:1rem !important}.pb-md-4{padding-bottom:1.5rem !important}.pb-md-5{padding-bottom:3rem !important}.ps-md-0{padding-left:0 !important}.ps-md-1{padding-left:.25rem !important}.ps-md-2{padding-left:.5rem !important}.ps-md-3{padding-left:1rem !important}.ps-md-4{padding-left:1.5rem !important}.ps-md-5{padding-left:3rem !important}.text-md-start{text-align:left !important}.text-md-end{text-align:right !important}.text-md-center{text-align:center !important}}@media(min-width: 992px){.float-lg-start{float:left !important}.float-lg-end{float:right !important}.float-lg-none{float:none !important}.d-lg-inline{display:inline !important}.d-lg-inline-block{display:inline-block !important}.d-lg-block{display:block !important}.d-lg-grid{display:grid !important}.d-lg-table{display:table !important}.d-lg-table-row{display:table-row !important}.d-lg-table-cell{display:table-cell !important}.d-lg-flex{display:flex !important}.d-lg-inline-flex{display:inline-flex !important}.d-lg-none{display:none !important}.flex-lg-fill{flex:1 1 auto !important}.flex-lg-row{flex-direction:row !important}.flex-lg-column{flex-direction:column !important}.flex-lg-row-reverse{flex-direction:row-reverse !important}.flex-lg-column-reverse{flex-direction:column-reverse !important}.flex-lg-grow-0{flex-grow:0 !important}.flex-lg-grow-1{flex-grow:1 !important}.flex-lg-shrink-0{flex-shrink:0 !important}.flex-lg-shrink-1{flex-shrink:1 !important}.flex-lg-wrap{flex-wrap:wrap !important}.flex-lg-nowrap{flex-wrap:nowrap !important}.flex-lg-wrap-reverse{flex-wrap:wrap-reverse !important}.gap-lg-0{gap:0 !important}.gap-lg-1{gap:.25rem !important}.gap-lg-2{gap:.5rem !important}.gap-lg-3{gap:1rem !important}.gap-lg-4{gap:1.5rem !important}.gap-lg-5{gap:3rem !important}.justify-content-lg-start{justify-content:flex-start !important}.justify-content-lg-end{justify-content:flex-end !important}.justify-content-lg-center{justify-content:center !important}.justify-content-lg-between{justify-content:space-between !important}.justify-content-lg-around{justify-content:space-around !important}.justify-content-lg-evenly{justify-content:space-evenly !important}.align-items-lg-start{align-items:flex-start !important}.align-items-lg-end{align-items:flex-end !important}.align-items-lg-center{align-items:center !important}.align-items-lg-baseline{align-items:baseline !important}.align-items-lg-stretch{align-items:stretch !important}.align-content-lg-start{align-content:flex-start !important}.align-content-lg-end{align-content:flex-end !important}.align-content-lg-center{align-content:center !important}.align-content-lg-between{align-content:space-between !important}.align-content-lg-around{align-content:space-around !important}.align-content-lg-stretch{align-content:stretch !important}.align-self-lg-auto{align-self:auto !important}.align-self-lg-start{align-self:flex-start !important}.align-self-lg-end{align-self:flex-end !important}.align-self-lg-center{align-self:center !important}.align-self-lg-baseline{align-self:baseline !important}.align-self-lg-stretch{align-self:stretch !important}.order-lg-first{order:-1 !important}.order-lg-0{order:0 !important}.order-lg-1{order:1 !important}.order-lg-2{order:2 !important}.order-lg-3{order:3 !important}.order-lg-4{order:4 !important}.order-lg-5{order:5 !important}.order-lg-last{order:6 !important}.m-lg-0{margin:0 !important}.m-lg-1{margin:.25rem !important}.m-lg-2{margin:.5rem !important}.m-lg-3{margin:1rem !important}.m-lg-4{margin:1.5rem !important}.m-lg-5{margin:3rem !important}.m-lg-auto{margin:auto !important}.mx-lg-0{margin-right:0 !important;margin-left:0 !important}.mx-lg-1{margin-right:.25rem !important;margin-left:.25rem !important}.mx-lg-2{margin-right:.5rem !important;margin-left:.5rem !important}.mx-lg-3{margin-right:1rem !important;margin-left:1rem !important}.mx-lg-4{margin-right:1.5rem !important;margin-left:1.5rem !important}.mx-lg-5{margin-right:3rem !important;margin-left:3rem !important}.mx-lg-auto{margin-right:auto !important;margin-left:auto !important}.my-lg-0{margin-top:0 !important;margin-bottom:0 !important}.my-lg-1{margin-top:.25rem !important;margin-bottom:.25rem !important}.my-lg-2{margin-top:.5rem !important;margin-bottom:.5rem !important}.my-lg-3{margin-top:1rem !important;margin-bottom:1rem !important}.my-lg-4{margin-top:1.5rem !important;margin-bottom:1.5rem !important}.my-lg-5{margin-top:3rem !important;margin-bottom:3rem !important}.my-lg-auto{margin-top:auto !important;margin-bottom:auto !important}.mt-lg-0{margin-top:0 !important}.mt-lg-1{margin-top:.25rem !important}.mt-lg-2{margin-top:.5rem !important}.mt-lg-3{margin-top:1rem !important}.mt-lg-4{margin-top:1.5rem !important}.mt-lg-5{margin-top:3rem !important}.mt-lg-auto{margin-top:auto !important}.me-lg-0{margin-right:0 !important}.me-lg-1{margin-right:.25rem !important}.me-lg-2{margin-right:.5rem !important}.me-lg-3{margin-right:1rem !important}.me-lg-4{margin-right:1.5rem !important}.me-lg-5{margin-right:3rem !important}.me-lg-auto{margin-right:auto !important}.mb-lg-0{margin-bottom:0 !important}.mb-lg-1{margin-bottom:.25rem !important}.mb-lg-2{margin-bottom:.5rem !important}.mb-lg-3{margin-bottom:1rem !important}.mb-lg-4{margin-bottom:1.5rem !important}.mb-lg-5{margin-bottom:3rem !important}.mb-lg-auto{margin-bottom:auto !important}.ms-lg-0{margin-left:0 !important}.ms-lg-1{margin-left:.25rem !important}.ms-lg-2{margin-left:.5rem !important}.ms-lg-3{margin-left:1rem !important}.ms-lg-4{margin-left:1.5rem !important}.ms-lg-5{margin-left:3rem !important}.ms-lg-auto{margin-left:auto !important}.m-lg-n1{margin:-0.25rem !important}.m-lg-n2{margin:-0.5rem !important}.m-lg-n3{margin:-1rem !important}.m-lg-n4{margin:-1.5rem !important}.m-lg-n5{margin:-3rem !important}.mx-lg-n1{margin-right:-0.25rem !important;margin-left:-0.25rem !important}.mx-lg-n2{margin-right:-0.5rem !important;margin-left:-0.5rem !important}.mx-lg-n3{margin-right:-1rem !important;margin-left:-1rem !important}.mx-lg-n4{margin-right:-1.5rem !important;margin-left:-1.5rem !important}.mx-lg-n5{margin-right:-3rem !important;margin-left:-3rem !important}.my-lg-n1{margin-top:-0.25rem !important;margin-bottom:-0.25rem !important}.my-lg-n2{margin-top:-0.5rem !important;margin-bottom:-0.5rem !important}.my-lg-n3{margin-top:-1rem !important;margin-bottom:-1rem !important}.my-lg-n4{margin-top:-1.5rem !important;margin-bottom:-1.5rem !important}.my-lg-n5{margin-top:-3rem !important;margin-bottom:-3rem !important}.mt-lg-n1{margin-top:-0.25rem !important}.mt-lg-n2{margin-top:-0.5rem !important}.mt-lg-n3{margin-top:-1rem !important}.mt-lg-n4{margin-top:-1.5rem !important}.mt-lg-n5{margin-top:-3rem !important}.me-lg-n1{margin-right:-0.25rem !important}.me-lg-n2{margin-right:-0.5rem !important}.me-lg-n3{margin-right:-1rem !important}.me-lg-n4{margin-right:-1.5rem !important}.me-lg-n5{margin-right:-3rem !important}.mb-lg-n1{margin-bottom:-0.25rem !important}.mb-lg-n2{margin-bottom:-0.5rem !important}.mb-lg-n3{margin-bottom:-1rem !important}.mb-lg-n4{margin-bottom:-1.5rem !important}.mb-lg-n5{margin-bottom:-3rem !important}.ms-lg-n1{margin-left:-0.25rem !important}.ms-lg-n2{margin-left:-0.5rem !important}.ms-lg-n3{margin-left:-1rem !important}.ms-lg-n4{margin-left:-1.5rem !important}.ms-lg-n5{margin-left:-3rem !important}.p-lg-0{padding:0 !important}.p-lg-1{padding:.25rem !important}.p-lg-2{padding:.5rem !important}.p-lg-3{padding:1rem !important}.p-lg-4{padding:1.5rem !important}.p-lg-5{padding:3rem !important}.px-lg-0{padding-right:0 !important;padding-left:0 !important}.px-lg-1{padding-right:.25rem !important;padding-left:.25rem !important}.px-lg-2{padding-right:.5rem !important;padding-left:.5rem !important}.px-lg-3{padding-right:1rem !important;padding-left:1rem !important}.px-lg-4{padding-right:1.5rem !important;padding-left:1.5rem !important}.px-lg-5{padding-right:3rem !important;padding-left:3rem !important}.py-lg-0{padding-top:0 !important;padding-bottom:0 !important}.py-lg-1{padding-top:.25rem !important;padding-bottom:.25rem !important}.py-lg-2{padding-top:.5rem !important;padding-bottom:.5rem !important}.py-lg-3{padding-top:1rem !important;padding-bottom:1rem !important}.py-lg-4{padding-top:1.5rem !important;padding-bottom:1.5rem !important}.py-lg-5{padding-top:3rem !important;padding-bottom:3rem !important}.pt-lg-0{padding-top:0 !important}.pt-lg-1{padding-top:.25rem !important}.pt-lg-2{padding-top:.5rem !important}.pt-lg-3{padding-top:1rem !important}.pt-lg-4{padding-top:1.5rem !important}.pt-lg-5{padding-top:3rem !important}.pe-lg-0{padding-right:0 !important}.pe-lg-1{padding-right:.25rem !important}.pe-lg-2{padding-right:.5rem !important}.pe-lg-3{padding-right:1rem !important}.pe-lg-4{padding-right:1.5rem !important}.pe-lg-5{padding-right:3rem !important}.pb-lg-0{padding-bottom:0 !important}.pb-lg-1{padding-bottom:.25rem !important}.pb-lg-2{padding-bottom:.5rem !important}.pb-lg-3{padding-bottom:1rem !important}.pb-lg-4{padding-bottom:1.5rem !important}.pb-lg-5{padding-bottom:3rem !important}.ps-lg-0{padding-left:0 !important}.ps-lg-1{padding-left:.25rem !important}.ps-lg-2{padding-left:.5rem !important}.ps-lg-3{padding-left:1rem !important}.ps-lg-4{padding-left:1.5rem !important}.ps-lg-5{padding-left:3rem !important}.text-lg-start{text-align:left !important}.text-lg-end{text-align:right !important}.text-lg-center{text-align:center !important}}@media(min-width: 1200px){.float-xl-start{float:left !important}.float-xl-end{float:right !important}.float-xl-none{float:none !important}.d-xl-inline{display:inline !important}.d-xl-inline-block{display:inline-block !important}.d-xl-block{display:block !important}.d-xl-grid{display:grid !important}.d-xl-table{display:table !important}.d-xl-table-row{display:table-row !important}.d-xl-table-cell{display:table-cell !important}.d-xl-flex{display:flex !important}.d-xl-inline-flex{display:inline-flex !important}.d-xl-none{display:none !important}.flex-xl-fill{flex:1 1 auto !important}.flex-xl-row{flex-direction:row !important}.flex-xl-column{flex-direction:column !important}.flex-xl-row-reverse{flex-direction:row-reverse !important}.flex-xl-column-reverse{flex-direction:column-reverse !important}.flex-xl-grow-0{flex-grow:0 !important}.flex-xl-grow-1{flex-grow:1 !important}.flex-xl-shrink-0{flex-shrink:0 !important}.flex-xl-shrink-1{flex-shrink:1 !important}.flex-xl-wrap{flex-wrap:wrap !important}.flex-xl-nowrap{flex-wrap:nowrap !important}.flex-xl-wrap-reverse{flex-wrap:wrap-reverse !important}.gap-xl-0{gap:0 !important}.gap-xl-1{gap:.25rem !important}.gap-xl-2{gap:.5rem !important}.gap-xl-3{gap:1rem !important}.gap-xl-4{gap:1.5rem !important}.gap-xl-5{gap:3rem !important}.justify-content-xl-start{justify-content:flex-start !important}.justify-content-xl-end{justify-content:flex-end !important}.justify-content-xl-center{justify-content:center !important}.justify-content-xl-between{justify-content:space-between !important}.justify-content-xl-around{justify-content:space-around !important}.justify-content-xl-evenly{justify-content:space-evenly !important}.align-items-xl-start{align-items:flex-start !important}.align-items-xl-end{align-items:flex-end !important}.align-items-xl-center{align-items:center !important}.align-items-xl-baseline{align-items:baseline !important}.align-items-xl-stretch{align-items:stretch !important}.align-content-xl-start{align-content:flex-start !important}.align-content-xl-end{align-content:flex-end !important}.align-content-xl-center{align-content:center !important}.align-content-xl-between{align-content:space-between !important}.align-content-xl-around{align-content:space-around !important}.align-content-xl-stretch{align-content:stretch !important}.align-self-xl-auto{align-self:auto !important}.align-self-xl-start{align-self:flex-start !important}.align-self-xl-end{align-self:flex-end !important}.align-self-xl-center{align-self:center !important}.align-self-xl-baseline{align-self:baseline !important}.align-self-xl-stretch{align-self:stretch !important}.order-xl-first{order:-1 !important}.order-xl-0{order:0 !important}.order-xl-1{order:1 !important}.order-xl-2{order:2 !important}.order-xl-3{order:3 !important}.order-xl-4{order:4 !important}.order-xl-5{order:5 !important}.order-xl-last{order:6 !important}.m-xl-0{margin:0 !important}.m-xl-1{margin:.25rem !important}.m-xl-2{margin:.5rem !important}.m-xl-3{margin:1rem !important}.m-xl-4{margin:1.5rem !important}.m-xl-5{margin:3rem !important}.m-xl-auto{margin:auto !important}.mx-xl-0{margin-right:0 !important;margin-left:0 !important}.mx-xl-1{margin-right:.25rem !important;margin-left:.25rem !important}.mx-xl-2{margin-right:.5rem !important;margin-left:.5rem !important}.mx-xl-3{margin-right:1rem !important;margin-left:1rem !important}.mx-xl-4{margin-right:1.5rem !important;margin-left:1.5rem !important}.mx-xl-5{margin-right:3rem !important;margin-left:3rem !important}.mx-xl-auto{margin-right:auto !important;margin-left:auto !important}.my-xl-0{margin-top:0 !important;margin-bottom:0 !important}.my-xl-1{margin-top:.25rem !important;margin-bottom:.25rem !important}.my-xl-2{margin-top:.5rem !important;margin-bottom:.5rem !important}.my-xl-3{margin-top:1rem !important;margin-bottom:1rem !important}.my-xl-4{margin-top:1.5rem !important;margin-bottom:1.5rem !important}.my-xl-5{margin-top:3rem !important;margin-bottom:3rem !important}.my-xl-auto{margin-top:auto !important;margin-bottom:auto !important}.mt-xl-0{margin-top:0 !important}.mt-xl-1{margin-top:.25rem !important}.mt-xl-2{margin-top:.5rem !important}.mt-xl-3{margin-top:1rem !important}.mt-xl-4{margin-top:1.5rem !important}.mt-xl-5{margin-top:3rem !important}.mt-xl-auto{margin-top:auto !important}.me-xl-0{margin-right:0 !important}.me-xl-1{margin-right:.25rem !important}.me-xl-2{margin-right:.5rem !important}.me-xl-3{margin-right:1rem !important}.me-xl-4{margin-right:1.5rem !important}.me-xl-5{margin-right:3rem !important}.me-xl-auto{margin-right:auto !important}.mb-xl-0{margin-bottom:0 !important}.mb-xl-1{margin-bottom:.25rem !important}.mb-xl-2{margin-bottom:.5rem !important}.mb-xl-3{margin-bottom:1rem !important}.mb-xl-4{margin-bottom:1.5rem !important}.mb-xl-5{margin-bottom:3rem !important}.mb-xl-auto{margin-bottom:auto !important}.ms-xl-0{margin-left:0 !important}.ms-xl-1{margin-left:.25rem !important}.ms-xl-2{margin-left:.5rem !important}.ms-xl-3{margin-left:1rem !important}.ms-xl-4{margin-left:1.5rem !important}.ms-xl-5{margin-left:3rem !important}.ms-xl-auto{margin-left:auto !important}.m-xl-n1{margin:-0.25rem !important}.m-xl-n2{margin:-0.5rem !important}.m-xl-n3{margin:-1rem !important}.m-xl-n4{margin:-1.5rem !important}.m-xl-n5{margin:-3rem !important}.mx-xl-n1{margin-right:-0.25rem !important;margin-left:-0.25rem !important}.mx-xl-n2{margin-right:-0.5rem !important;margin-left:-0.5rem !important}.mx-xl-n3{margin-right:-1rem !important;margin-left:-1rem !important}.mx-xl-n4{margin-right:-1.5rem !important;margin-left:-1.5rem !important}.mx-xl-n5{margin-right:-3rem !important;margin-left:-3rem !important}.my-xl-n1{margin-top:-0.25rem !important;margin-bottom:-0.25rem !important}.my-xl-n2{margin-top:-0.5rem !important;margin-bottom:-0.5rem !important}.my-xl-n3{margin-top:-1rem !important;margin-bottom:-1rem !important}.my-xl-n4{margin-top:-1.5rem !important;margin-bottom:-1.5rem !important}.my-xl-n5{margin-top:-3rem !important;margin-bottom:-3rem !important}.mt-xl-n1{margin-top:-0.25rem !important}.mt-xl-n2{margin-top:-0.5rem !important}.mt-xl-n3{margin-top:-1rem !important}.mt-xl-n4{margin-top:-1.5rem !important}.mt-xl-n5{margin-top:-3rem !important}.me-xl-n1{margin-right:-0.25rem !important}.me-xl-n2{margin-right:-0.5rem !important}.me-xl-n3{margin-right:-1rem !important}.me-xl-n4{margin-right:-1.5rem !important}.me-xl-n5{margin-right:-3rem !important}.mb-xl-n1{margin-bottom:-0.25rem !important}.mb-xl-n2{margin-bottom:-0.5rem !important}.mb-xl-n3{margin-bottom:-1rem !important}.mb-xl-n4{margin-bottom:-1.5rem !important}.mb-xl-n5{margin-bottom:-3rem !important}.ms-xl-n1{margin-left:-0.25rem !important}.ms-xl-n2{margin-left:-0.5rem !important}.ms-xl-n3{margin-left:-1rem !important}.ms-xl-n4{margin-left:-1.5rem !important}.ms-xl-n5{margin-left:-3rem !important}.p-xl-0{padding:0 !important}.p-xl-1{padding:.25rem !important}.p-xl-2{padding:.5rem !important}.p-xl-3{padding:1rem !important}.p-xl-4{padding:1.5rem !important}.p-xl-5{padding:3rem !important}.px-xl-0{padding-right:0 !important;padding-left:0 !important}.px-xl-1{padding-right:.25rem !important;padding-left:.25rem !important}.px-xl-2{padding-right:.5rem !important;padding-left:.5rem !important}.px-xl-3{padding-right:1rem !important;padding-left:1rem !important}.px-xl-4{padding-right:1.5rem !important;padding-left:1.5rem !important}.px-xl-5{padding-right:3rem !important;padding-left:3rem !important}.py-xl-0{padding-top:0 !important;padding-bottom:0 !important}.py-xl-1{padding-top:.25rem !important;padding-bottom:.25rem !important}.py-xl-2{padding-top:.5rem !important;padding-bottom:.5rem !important}.py-xl-3{padding-top:1rem !important;padding-bottom:1rem !important}.py-xl-4{padding-top:1.5rem !important;padding-bottom:1.5rem !important}.py-xl-5{padding-top:3rem !important;padding-bottom:3rem !important}.pt-xl-0{padding-top:0 !important}.pt-xl-1{padding-top:.25rem !important}.pt-xl-2{padding-top:.5rem !important}.pt-xl-3{padding-top:1rem !important}.pt-xl-4{padding-top:1.5rem !important}.pt-xl-5{padding-top:3rem !important}.pe-xl-0{padding-right:0 !important}.pe-xl-1{padding-right:.25rem !important}.pe-xl-2{padding-right:.5rem !important}.pe-xl-3{padding-right:1rem !important}.pe-xl-4{padding-right:1.5rem !important}.pe-xl-5{padding-right:3rem !important}.pb-xl-0{padding-bottom:0 !important}.pb-xl-1{padding-bottom:.25rem !important}.pb-xl-2{padding-bottom:.5rem !important}.pb-xl-3{padding-bottom:1rem !important}.pb-xl-4{padding-bottom:1.5rem !important}.pb-xl-5{padding-bottom:3rem !important}.ps-xl-0{padding-left:0 !important}.ps-xl-1{padding-left:.25rem !important}.ps-xl-2{padding-left:.5rem !important}.ps-xl-3{padding-left:1rem !important}.ps-xl-4{padding-left:1.5rem !important}.ps-xl-5{padding-left:3rem !important}.text-xl-start{text-align:left !important}.text-xl-end{text-align:right !important}.text-xl-center{text-align:center !important}}@media(min-width: 1400px){.float-xxl-start{float:left !important}.float-xxl-end{float:right !important}.float-xxl-none{float:none !important}.d-xxl-inline{display:inline !important}.d-xxl-inline-block{display:inline-block !important}.d-xxl-block{display:block !important}.d-xxl-grid{display:grid !important}.d-xxl-table{display:table !important}.d-xxl-table-row{display:table-row !important}.d-xxl-table-cell{display:table-cell !important}.d-xxl-flex{display:flex !important}.d-xxl-inline-flex{display:inline-flex !important}.d-xxl-none{display:none !important}.flex-xxl-fill{flex:1 1 auto !important}.flex-xxl-row{flex-direction:row !important}.flex-xxl-column{flex-direction:column !important}.flex-xxl-row-reverse{flex-direction:row-reverse !important}.flex-xxl-column-reverse{flex-direction:column-reverse !important}.flex-xxl-grow-0{flex-grow:0 !important}.flex-xxl-grow-1{flex-grow:1 !important}.flex-xxl-shrink-0{flex-shrink:0 !important}.flex-xxl-shrink-1{flex-shrink:1 !important}.flex-xxl-wrap{flex-wrap:wrap !important}.flex-xxl-nowrap{flex-wrap:nowrap !important}.flex-xxl-wrap-reverse{flex-wrap:wrap-reverse !important}.gap-xxl-0{gap:0 !important}.gap-xxl-1{gap:.25rem !important}.gap-xxl-2{gap:.5rem !important}.gap-xxl-3{gap:1rem !important}.gap-xxl-4{gap:1.5rem !important}.gap-xxl-5{gap:3rem !important}.justify-content-xxl-start{justify-content:flex-start !important}.justify-content-xxl-end{justify-content:flex-end !important}.justify-content-xxl-center{justify-content:center !important}.justify-content-xxl-between{justify-content:space-between !important}.justify-content-xxl-around{justify-content:space-around !important}.justify-content-xxl-evenly{justify-content:space-evenly !important}.align-items-xxl-start{align-items:flex-start !important}.align-items-xxl-end{align-items:flex-end !important}.align-items-xxl-center{align-items:center !important}.align-items-xxl-baseline{align-items:baseline !important}.align-items-xxl-stretch{align-items:stretch !important}.align-content-xxl-start{align-content:flex-start !important}.align-content-xxl-end{align-content:flex-end !important}.align-content-xxl-center{align-content:center !important}.align-content-xxl-between{align-content:space-between !important}.align-content-xxl-around{align-content:space-around !important}.align-content-xxl-stretch{align-content:stretch !important}.align-self-xxl-auto{align-self:auto !important}.align-self-xxl-start{align-self:flex-start !important}.align-self-xxl-end{align-self:flex-end !important}.align-self-xxl-center{align-self:center !important}.align-self-xxl-baseline{align-self:baseline !important}.align-self-xxl-stretch{align-self:stretch !important}.order-xxl-first{order:-1 !important}.order-xxl-0{order:0 !important}.order-xxl-1{order:1 !important}.order-xxl-2{order:2 !important}.order-xxl-3{order:3 !important}.order-xxl-4{order:4 !important}.order-xxl-5{order:5 !important}.order-xxl-last{order:6 !important}.m-xxl-0{margin:0 !important}.m-xxl-1{margin:.25rem !important}.m-xxl-2{margin:.5rem !important}.m-xxl-3{margin:1rem !important}.m-xxl-4{margin:1.5rem !important}.m-xxl-5{margin:3rem !important}.m-xxl-auto{margin:auto !important}.mx-xxl-0{margin-right:0 !important;margin-left:0 !important}.mx-xxl-1{margin-right:.25rem !important;margin-left:.25rem !important}.mx-xxl-2{margin-right:.5rem !important;margin-left:.5rem !important}.mx-xxl-3{margin-right:1rem !important;margin-left:1rem !important}.mx-xxl-4{margin-right:1.5rem !important;margin-left:1.5rem !important}.mx-xxl-5{margin-right:3rem !important;margin-left:3rem !important}.mx-xxl-auto{margin-right:auto !important;margin-left:auto !important}.my-xxl-0{margin-top:0 !important;margin-bottom:0 !important}.my-xxl-1{margin-top:.25rem !important;margin-bottom:.25rem !important}.my-xxl-2{margin-top:.5rem !important;margin-bottom:.5rem !important}.my-xxl-3{margin-top:1rem !important;margin-bottom:1rem !important}.my-xxl-4{margin-top:1.5rem !important;margin-bottom:1.5rem !important}.my-xxl-5{margin-top:3rem !important;margin-bottom:3rem !important}.my-xxl-auto{margin-top:auto !important;margin-bottom:auto !important}.mt-xxl-0{margin-top:0 !important}.mt-xxl-1{margin-top:.25rem !important}.mt-xxl-2{margin-top:.5rem !important}.mt-xxl-3{margin-top:1rem !important}.mt-xxl-4{margin-top:1.5rem !important}.mt-xxl-5{margin-top:3rem !important}.mt-xxl-auto{margin-top:auto !important}.me-xxl-0{margin-right:0 !important}.me-xxl-1{margin-right:.25rem !important}.me-xxl-2{margin-right:.5rem !important}.me-xxl-3{margin-right:1rem !important}.me-xxl-4{margin-right:1.5rem !important}.me-xxl-5{margin-right:3rem !important}.me-xxl-auto{margin-right:auto !important}.mb-xxl-0{margin-bottom:0 !important}.mb-xxl-1{margin-bottom:.25rem !important}.mb-xxl-2{margin-bottom:.5rem !important}.mb-xxl-3{margin-bottom:1rem !important}.mb-xxl-4{margin-bottom:1.5rem !important}.mb-xxl-5{margin-bottom:3rem !important}.mb-xxl-auto{margin-bottom:auto !important}.ms-xxl-0{margin-left:0 !important}.ms-xxl-1{margin-left:.25rem !important}.ms-xxl-2{margin-left:.5rem !important}.ms-xxl-3{margin-left:1rem !important}.ms-xxl-4{margin-left:1.5rem !important}.ms-xxl-5{margin-left:3rem !important}.ms-xxl-auto{margin-left:auto !important}.m-xxl-n1{margin:-0.25rem !important}.m-xxl-n2{margin:-0.5rem !important}.m-xxl-n3{margin:-1rem !important}.m-xxl-n4{margin:-1.5rem !important}.m-xxl-n5{margin:-3rem !important}.mx-xxl-n1{margin-right:-0.25rem !important;margin-left:-0.25rem !important}.mx-xxl-n2{margin-right:-0.5rem !important;margin-left:-0.5rem !important}.mx-xxl-n3{margin-right:-1rem !important;margin-left:-1rem !important}.mx-xxl-n4{margin-right:-1.5rem !important;margin-left:-1.5rem !important}.mx-xxl-n5{margin-right:-3rem !important;margin-left:-3rem !important}.my-xxl-n1{margin-top:-0.25rem !important;margin-bottom:-0.25rem !important}.my-xxl-n2{margin-top:-0.5rem !important;margin-bottom:-0.5rem !important}.my-xxl-n3{margin-top:-1rem !important;margin-bottom:-1rem !important}.my-xxl-n4{margin-top:-1.5rem !important;margin-bottom:-1.5rem !important}.my-xxl-n5{margin-top:-3rem !important;margin-bottom:-3rem !important}.mt-xxl-n1{margin-top:-0.25rem !important}.mt-xxl-n2{margin-top:-0.5rem !important}.mt-xxl-n3{margin-top:-1rem !important}.mt-xxl-n4{margin-top:-1.5rem !important}.mt-xxl-n5{margin-top:-3rem !important}.me-xxl-n1{margin-right:-0.25rem !important}.me-xxl-n2{margin-right:-0.5rem !important}.me-xxl-n3{margin-right:-1rem !important}.me-xxl-n4{margin-right:-1.5rem !important}.me-xxl-n5{margin-right:-3rem !important}.mb-xxl-n1{margin-bottom:-0.25rem !important}.mb-xxl-n2{margin-bottom:-0.5rem !important}.mb-xxl-n3{margin-bottom:-1rem !important}.mb-xxl-n4{margin-bottom:-1.5rem !important}.mb-xxl-n5{margin-bottom:-3rem !important}.ms-xxl-n1{margin-left:-0.25rem !important}.ms-xxl-n2{margin-left:-0.5rem !important}.ms-xxl-n3{margin-left:-1rem !important}.ms-xxl-n4{margin-left:-1.5rem !important}.ms-xxl-n5{margin-left:-3rem !important}.p-xxl-0{padding:0 !important}.p-xxl-1{padding:.25rem !important}.p-xxl-2{padding:.5rem !important}.p-xxl-3{padding:1rem !important}.p-xxl-4{padding:1.5rem !important}.p-xxl-5{padding:3rem !important}.px-xxl-0{padding-right:0 !important;padding-left:0 !important}.px-xxl-1{padding-right:.25rem !important;padding-left:.25rem !important}.px-xxl-2{padding-right:.5rem !important;padding-left:.5rem !important}.px-xxl-3{padding-right:1rem !important;padding-left:1rem !important}.px-xxl-4{padding-right:1.5rem !important;padding-left:1.5rem !important}.px-xxl-5{padding-right:3rem !important;padding-left:3rem !important}.py-xxl-0{padding-top:0 !important;padding-bottom:0 !important}.py-xxl-1{padding-top:.25rem !important;padding-bottom:.25rem !important}.py-xxl-2{padding-top:.5rem !important;padding-bottom:.5rem !important}.py-xxl-3{padding-top:1rem !important;padding-bottom:1rem !important}.py-xxl-4{padding-top:1.5rem !important;padding-bottom:1.5rem !important}.py-xxl-5{padding-top:3rem !important;padding-bottom:3rem !important}.pt-xxl-0{padding-top:0 !important}.pt-xxl-1{padding-top:.25rem !important}.pt-xxl-2{padding-top:.5rem !important}.pt-xxl-3{padding-top:1rem !important}.pt-xxl-4{padding-top:1.5rem !important}.pt-xxl-5{padding-top:3rem !important}.pe-xxl-0{padding-right:0 !important}.pe-xxl-1{padding-right:.25rem !important}.pe-xxl-2{padding-right:.5rem !important}.pe-xxl-3{padding-right:1rem !important}.pe-xxl-4{padding-right:1.5rem !important}.pe-xxl-5{padding-right:3rem !important}.pb-xxl-0{padding-bottom:0 !important}.pb-xxl-1{padding-bottom:.25rem !important}.pb-xxl-2{padding-bottom:.5rem !important}.pb-xxl-3{padding-bottom:1rem !important}.pb-xxl-4{padding-bottom:1.5rem !important}.pb-xxl-5{padding-bottom:3rem !important}.ps-xxl-0{padding-left:0 !important}.ps-xxl-1{padding-left:.25rem !important}.ps-xxl-2{padding-left:.5rem !important}.ps-xxl-3{padding-left:1rem !important}.ps-xxl-4{padding-left:1.5rem !important}.ps-xxl-5{padding-left:3rem !important}.text-xxl-start{text-align:left !important}.text-xxl-end{text-align:right !important}.text-xxl-center{text-align:center !important}}@media(min-width: 1200px){.fs-1{font-size:2.5rem !important}.fs-2{font-size:2rem !important}.fs-3{font-size:1.75rem !important}.fs-4{font-size:1.5rem !important}}@media print{.d-print-inline{display:inline !important}.d-print-inline-block{display:inline-block !important}.d-print-block{display:block !important}.d-print-grid{display:grid !important}.d-print-table{display:table !important}.d-print-table-row{display:table-row !important}.d-print-table-cell{display:table-cell !important}.d-print-flex{display:flex !important}.d-print-inline-flex{display:inline-flex !important}.d-print-none{display:none !important}} /* ===================================================================== DATATABLES + BOOTSTRAP 5 Source : dataTables.bootstrap5.min.css ===================================================================== */ :root{--dt-row-selected: 13, 110, 253;--dt-row-selected-text: 255, 255, 255;--dt-row-selected-link: 9, 10, 11;--dt-row-stripe: 0, 0, 0;--dt-row-hover: 0, 0, 0;--dt-column-ordering: 0, 0, 0;--dt-html-background: white}:root.dark{--dt-html-background: rgb(33, 37, 41)}table.dataTable td.dt-control{text-align:center;cursor:pointer}table.dataTable td.dt-control:before{display:inline-block;box-sizing:border-box;content:"";border-top:5px solid transparent;border-left:10px solid rgba(0, 0, 0, 0.5);border-bottom:5px solid transparent;border-right:0px solid transparent}table.dataTable tr.dt-hasChild td.dt-control:before{border-top:10px solid rgba(0, 0, 0, 0.5);border-left:5px solid transparent;border-bottom:0px solid transparent;border-right:5px solid transparent}html.dark table.dataTable td.dt-control:before,:root[data-bs-theme=dark] table.dataTable td.dt-control:before{border-left-color:rgba(255, 255, 255, 0.5)}html.dark table.dataTable tr.dt-hasChild td.dt-control:before,:root[data-bs-theme=dark] table.dataTable tr.dt-hasChild td.dt-control:before{border-top-color:rgba(255, 255, 255, 0.5);border-left-color:transparent}div.dt-scroll-body thead tr,div.dt-scroll-body tfoot tr{height:0}div.dt-scroll-body thead tr th,div.dt-scroll-body thead tr td,div.dt-scroll-body tfoot tr th,div.dt-scroll-body tfoot tr td{height:0 !important;padding-top:0px !important;padding-bottom:0px !important;border-top-width:0px !important;border-bottom-width:0px !important}div.dt-scroll-body thead tr th div.dt-scroll-sizing,div.dt-scroll-body thead tr td div.dt-scroll-sizing,div.dt-scroll-body tfoot tr th div.dt-scroll-sizing,div.dt-scroll-body tfoot tr td div.dt-scroll-sizing{height:0 !important;overflow:hidden !important}table.dataTable thead>tr>th:active,table.dataTable thead>tr>td:active{outline:none}table.dataTable thead>tr>th.dt-orderable-asc span.dt-column-order:before,table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order:before,table.dataTable thead>tr>td.dt-orderable-asc span.dt-column-order:before,table.dataTable thead>tr>td.dt-ordering-asc span.dt-column-order:before{position:absolute;display:block;bottom:50%;content:"▲";content:"▲"/""}table.dataTable thead>tr>th.dt-orderable-desc span.dt-column-order:after,table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order:after,table.dataTable thead>tr>td.dt-orderable-desc span.dt-column-order:after,table.dataTable thead>tr>td.dt-ordering-desc span.dt-column-order:after{position:absolute;display:block;top:50%;content:"▼";content:"▼"/""}table.dataTable thead>tr>th.dt-orderable-asc,table.dataTable thead>tr>th.dt-orderable-desc,table.dataTable thead>tr>th.dt-ordering-asc,table.dataTable thead>tr>th.dt-ordering-desc,table.dataTable thead>tr>td.dt-orderable-asc,table.dataTable thead>tr>td.dt-orderable-desc,table.dataTable thead>tr>td.dt-ordering-asc,table.dataTable thead>tr>td.dt-ordering-desc{position:relative;padding-right:30px}table.dataTable thead>tr>th.dt-orderable-asc span.dt-column-order,table.dataTable thead>tr>th.dt-orderable-desc span.dt-column-order,table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order,table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order,table.dataTable thead>tr>td.dt-orderable-asc span.dt-column-order,table.dataTable thead>tr>td.dt-orderable-desc span.dt-column-order,table.dataTable thead>tr>td.dt-ordering-asc span.dt-column-order,table.dataTable thead>tr>td.dt-ordering-desc span.dt-column-order{position:absolute;right:12px;top:0;bottom:0;width:12px}table.dataTable thead>tr>th.dt-orderable-asc span.dt-column-order:before,table.dataTable thead>tr>th.dt-orderable-asc span.dt-column-order:after,table.dataTable thead>tr>th.dt-orderable-desc span.dt-column-order:before,table.dataTable thead>tr>th.dt-orderable-desc span.dt-column-order:after,table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order:before,table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order:after,table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order:before,table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order:after,table.dataTable thead>tr>td.dt-orderable-asc span.dt-column-order:before,table.dataTable thead>tr>td.dt-orderable-asc span.dt-column-order:after,table.dataTable thead>tr>td.dt-orderable-desc span.dt-column-order:before,table.dataTable thead>tr>td.dt-orderable-desc span.dt-column-order:after,table.dataTable thead>tr>td.dt-ordering-asc span.dt-column-order:before,table.dataTable thead>tr>td.dt-ordering-asc span.dt-column-order:after,table.dataTable thead>tr>td.dt-ordering-desc span.dt-column-order:before,table.dataTable thead>tr>td.dt-ordering-desc span.dt-column-order:after{left:0;opacity:.125;line-height:9px;font-size:.8em}table.dataTable thead>tr>th.dt-orderable-asc,table.dataTable thead>tr>th.dt-orderable-desc,table.dataTable thead>tr>td.dt-orderable-asc,table.dataTable thead>tr>td.dt-orderable-desc{cursor:pointer}table.dataTable thead>tr>th.dt-orderable-asc:hover,table.dataTable thead>tr>th.dt-orderable-desc:hover,table.dataTable thead>tr>td.dt-orderable-asc:hover,table.dataTable thead>tr>td.dt-orderable-desc:hover{outline:2px solid rgba(0, 0, 0, 0.05);outline-offset:-2px}table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order:before,table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order:after,table.dataTable thead>tr>td.dt-ordering-asc span.dt-column-order:before,table.dataTable thead>tr>td.dt-ordering-desc span.dt-column-order:after{opacity:.6}table.dataTable thead>tr>th.sorting_desc_disabled span.dt-column-order:after,table.dataTable thead>tr>th.sorting_asc_disabled span.dt-column-order:before,table.dataTable thead>tr>td.sorting_desc_disabled span.dt-column-order:after,table.dataTable thead>tr>td.sorting_asc_disabled span.dt-column-order:before{display:none}table.dataTable thead>tr>th:active,table.dataTable thead>tr>td:active{outline:none}div.dt-scroll-body>table.dataTable>thead>tr>th,div.dt-scroll-body>table.dataTable>thead>tr>td{overflow:hidden}:root.dark table.dataTable thead>tr>th.dt-orderable-asc:hover,:root.dark table.dataTable thead>tr>th.dt-orderable-desc:hover,:root.dark table.dataTable thead>tr>td.dt-orderable-asc:hover,:root.dark table.dataTable thead>tr>td.dt-orderable-desc:hover,:root[data-bs-theme=dark] table.dataTable thead>tr>th.dt-orderable-asc:hover,:root[data-bs-theme=dark] table.dataTable thead>tr>th.dt-orderable-desc:hover,:root[data-bs-theme=dark] table.dataTable thead>tr>td.dt-orderable-asc:hover,:root[data-bs-theme=dark] table.dataTable thead>tr>td.dt-orderable-desc:hover{outline:2px solid rgba(255, 255, 255, 0.05)}div.dt-processing{position:absolute;top:50%;left:50%;width:200px;margin-left:-100px;margin-top:-22px;text-align:center;padding:2px;z-index:10}div.dt-processing>div:last-child{position:relative;width:80px;height:15px;margin:1em auto}div.dt-processing>div:last-child>div{position:absolute;top:0;width:13px;height:13px;border-radius:50%;background:rgb(255,255,255);background:rgb(var(--dt-row-selected));animation-timing-function:cubic-bezier(0, 1, 1, 0)}div.dt-processing>div:last-child>div:nth-child(1){left:8px;animation:datatables-loader-1 .6s infinite}div.dt-processing>div:last-child>div:nth-child(2){left:8px;animation:datatables-loader-2 .6s infinite}div.dt-processing>div:last-child>div:nth-child(3){left:32px;animation:datatables-loader-2 .6s infinite}div.dt-processing>div:last-child>div:nth-child(4){left:56px;animation:datatables-loader-3 .6s infinite}@keyframes datatables-loader-1{0%{transform:scale(0)}100%{transform:scale(1)}}@keyframes datatables-loader-3{0%{transform:scale(1)}100%{transform:scale(0)}}@keyframes datatables-loader-2{0%{transform:translate(0, 0)}100%{transform:translate(24px, 0)}}table.dataTable.nowrap th,table.dataTable.nowrap td{white-space:nowrap}table.dataTable th,table.dataTable td{box-sizing:border-box}table.dataTable th.dt-left,table.dataTable td.dt-left{text-align:left}table.dataTable th.dt-center,table.dataTable td.dt-center{text-align:center}table.dataTable th.dt-right,table.dataTable td.dt-right{text-align:right}table.dataTable th.dt-justify,table.dataTable td.dt-justify{text-align:justify}table.dataTable th.dt-nowrap,table.dataTable td.dt-nowrap{white-space:nowrap}table.dataTable th.dt-empty,table.dataTable td.dt-empty{text-align:center;vertical-align:top}table.dataTable th.dt-type-numeric,table.dataTable th.dt-type-date,table.dataTable td.dt-type-numeric,table.dataTable td.dt-type-date{text-align:right}table.dataTable thead th,table.dataTable thead td,table.dataTable tfoot th,table.dataTable tfoot td{text-align:left}table.dataTable thead th.dt-head-left,table.dataTable thead td.dt-head-left,table.dataTable tfoot th.dt-head-left,table.dataTable tfoot td.dt-head-left{text-align:left}table.dataTable thead th.dt-head-center,table.dataTable thead td.dt-head-center,table.dataTable tfoot th.dt-head-center,table.dataTable tfoot td.dt-head-center{text-align:center}table.dataTable thead th.dt-head-right,table.dataTable thead td.dt-head-right,table.dataTable tfoot th.dt-head-right,table.dataTable tfoot td.dt-head-right{text-align:right}table.dataTable thead th.dt-head-justify,table.dataTable thead td.dt-head-justify,table.dataTable tfoot th.dt-head-justify,table.dataTable tfoot td.dt-head-justify{text-align:justify}table.dataTable thead th.dt-head-nowrap,table.dataTable thead td.dt-head-nowrap,table.dataTable tfoot th.dt-head-nowrap,table.dataTable tfoot td.dt-head-nowrap{white-space:nowrap}table.dataTable tbody th.dt-body-left,table.dataTable tbody td.dt-body-left{text-align:left}table.dataTable tbody th.dt-body-center,table.dataTable tbody td.dt-body-center{text-align:center}table.dataTable tbody th.dt-body-right,table.dataTable tbody td.dt-body-right{text-align:right}table.dataTable tbody th.dt-body-justify,table.dataTable tbody td.dt-body-justify{text-align:justify}table.dataTable tbody th.dt-body-nowrap,table.dataTable tbody td.dt-body-nowrap{white-space:nowrap}/*! Bootstrap 5 integration for DataTables * * ©2020 SpryMedia Ltd, all rights reserved. * License: MIT datatables.net/license/mit */table.table.dataTable{clear:both;margin-bottom:0;max-width:none;border-spacing:0}table.table.dataTable.table-striped>tbody>tr:nth-of-type(2n+1)>*{box-shadow:none}table.table.dataTable>:not(caption)>*>*{background-color:var(--bs-table-bg)}table.table.dataTable>tbody>tr{background-color:transparent}table.table.dataTable>tbody>tr.selected>*{box-shadow:inset 0 0 0 9999px rgb(255,255,255);box-shadow:inset 0 0 0 9999px rgb(var(--dt-row-selected));color:rgb(255, 255, 255);color:rgb(var(--dt-row-selected-text))}table.table.dataTable>tbody>tr.selected a{color:rgb(9, 10, 11);color:rgb(var(--dt-row-selected-link))}table.table.dataTable.table-striped>tbody>tr:nth-of-type(2n+1)>*{box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-stripe), 0.05)}table.table.dataTable.table-striped>tbody>tr:nth-of-type(2n+1).selected>*{box-shadow:inset 0 0 0 9999px rgba(255,255,255,0.95);box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.95)}table.table.dataTable.table-hover>tbody>tr:hover>*{box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-hover), 0.075)}table.table.dataTable.table-hover>tbody>tr.selected:hover>*{box-shadow:inset 0 0 0 9999px rgba(255,255,255,0.975);box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.975)}div.dt-container div.dt-length label{font-weight:normal;text-align:left;white-space:nowrap}div.dt-container div.dt-length select{width:auto;display:inline-block;margin-right:.5em}div.dt-container div.dt-search{text-align:right}div.dt-container div.dt-search label{font-weight:normal;white-space:nowrap;text-align:left}div.dt-container div.dt-search input{margin-left:.5em;display:inline-block;width:auto}div.dt-container div.dt-info{padding-top:.85em}div.dt-container div.dt-paging{margin:0}div.dt-container div.dt-paging ul.pagination{margin:2px 0;flex-wrap:wrap}div.dt-container div.dt-row{position:relative}div.dt-scroll-head table.dataTable{margin-bottom:0 !important}div.dt-scroll-body{border-bottom-color:var(--bs-border-color);border-bottom-width:var(--bs-border-width);border-bottom-style:solid}div.dt-scroll-body>table{border-top:none;margin-top:0 !important;margin-bottom:0 !important}div.dt-scroll-body>table>tbody>tr:first-child{border-top-width:0}div.dt-scroll-body>table>thead>tr{border-width:0 !important}div.dt-scroll-body>table>tbody>tr:last-child>*{border-bottom:none}div.dt-scroll-foot>.dt-scroll-footInner{box-sizing:content-box}div.dt-scroll-foot>.dt-scroll-footInner>table{margin-top:0 !important;border-top:none}div.dt-scroll-foot>.dt-scroll-footInner>table>tfoot>tr:first-child{border-top-width:0 !important}@media screen and (max-width: 767px){div.dt-container div.dt-length,div.dt-container div.dt-search,div.dt-container div.dt-info,div.dt-container div.dt-paging{text-align:center}div.dt-container .row{--bs-gutter-y: 0.5rem}div.dt-container div.dt-paging ul.pagination{justify-content:center !important}}table.dataTable.table-sm>thead>tr th.dt-orderable-asc,table.dataTable.table-sm>thead>tr th.dt-orderable-desc,table.dataTable.table-sm>thead>tr th.dt-ordering-asc,table.dataTable.table-sm>thead>tr th.dt-ordering-desc,table.dataTable.table-sm>thead>tr td.dt-orderable-asc,table.dataTable.table-sm>thead>tr td.dt-orderable-desc,table.dataTable.table-sm>thead>tr td.dt-ordering-asc,table.dataTable.table-sm>thead>tr td.dt-ordering-desc{padding-right:20px}table.dataTable.table-sm>thead>tr th.dt-orderable-asc span.dt-column-order,table.dataTable.table-sm>thead>tr th.dt-orderable-desc span.dt-column-order,table.dataTable.table-sm>thead>tr th.dt-ordering-asc span.dt-column-order,table.dataTable.table-sm>thead>tr th.dt-ordering-desc span.dt-column-order,table.dataTable.table-sm>thead>tr td.dt-orderable-asc span.dt-column-order,table.dataTable.table-sm>thead>tr td.dt-orderable-desc span.dt-column-order,table.dataTable.table-sm>thead>tr td.dt-ordering-asc span.dt-column-order,table.dataTable.table-sm>thead>tr td.dt-ordering-desc span.dt-column-order{right:5px}div.dt-scroll-head table.table-bordered{border-bottom-width:0}div.table-responsive>div.dt-container>div.row{margin:0}div.table-responsive>div.dt-container>div.row>div[class^=col-]:first-child{padding-left:0}div.table-responsive>div.dt-container>div.row>div[class^=col-]:last-child{padding-right:0}:root[data-bs-theme=dark]{--dt-row-hover: 255, 255, 255;--dt-row-stripe: 255, 255, 255;--dt-column-ordering: 255, 255, 255} /* ===================================================================== STYLE GLOBAL DU SITE Source : style.css ===================================================================== */ /********************* GLOBAL *********************/ body{ background:#000; color:#fff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height:1.6; } h1,h2,h3,h4,h5,h6{ font-weight:600; color:#ffffff; } /********************* WATERMARK *********************/ html:after{ font-size:650%; color:rgba(255,255,255,.05); z-index:9999; position:fixed; top:35%; left:10%; right:0; text-align:center; font-weight:800; letter-spacing:8px; transform:rotate(-35deg); pointer-events:none; user-select:none; } /********************* BACKGROUNDS *********************/ .bg-dark{ background-color:#000 !important; } .bg-light{ background-color:#02050C !important; } .bg-index{ background:linear-gradient(135deg,#02050C,#0878D1); border-radius:12px; padding:20px; box-shadow:0 10px 25px rgba(0,0,0,.4); } /********************* COMPETENCES *********************/ .competence{ color:#000; background:linear-gradient(135deg,#ffffff,#d8d8d8); border-radius:12px; padding:15px; transition:.25s ease; } .competence:hover{ transform:translateY(-3px); box-shadow:0 10px 20px rgba(0,0,0,.35); } .competenceSearch{ color:#000; background:linear-gradient(135deg,#02050C,#0878D1); border-radius:12px; } .competenceCachee{ color:#000; background:linear-gradient(135deg,#e4fa03,#bfbfbf); border-radius:12px; } /********************* NAVBAR *********************/ .navbar{ background:rgba(0,0,0,.9); } .navbar-light .navbar-nav .nav-link{ color:#fff; font-weight:500; transition:.25s; } .navbar-light .navbar-nav .nav-link:hover{ color:#0878D1; } .navbar-light .navbar-nav .nav-link.active{ color:#0878D1; } /********************* LINKS *********************/ a{ color:#fff; transition:.2s; } a:hover{ color:#0878D1; text-decoration:none; } /********************* BUTTONS .btn{ font-weight:600; border-radius:8px; transition:.25s; } .btn-primary{ color:#000 !important; background-color:#0878D1; border-color:#0878D1; } .btn-primary:hover{ background-color:#00D9FF; border-color:#00D9FF; transform:translateY(-2px); } .btn-secondary{ background-color:#02050C; border-color:#02050C; } .btn-secondary:hover{ background-color:#00D9FF; border-color:#00D9FF; } *********************/ /********************* TABLES *********************/ .table-striped tbody tr:nth-of-type(odd){ background:#5C5F5C; } /********************* CARDS / BLOCS *********************/ .card{ border:none; border-radius:12px; overflow:hidden; background:#111; box-shadow:0 10px 25px rgba(0,0,0,.4); } /********************* IMAGES HOVER *********************/ .service-item img, .blog-item img, .gallery-item img{ transition:transform .4s; } .service-item:hover img, .blog-item:hover img, .gallery-item:hover img{ transform:scale(1.08); } /********************* SPINNER *********************/ #spinner{ opacity:0; visibility:hidden; transition:opacity .6s ease; z-index:99999; } #spinner.show{ visibility:visible; opacity:1; } /********************* BACK TO TOP *********************/ .back-to-top{ position:fixed; right:25px; bottom:25px; width:48px; height:48px; background:#0878D1; color:#000; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 20px rgba(0,0,0,.4); transition:.25s; } .back-to-top:hover{ background:#00D9FF; transform:translateY(-4px); } /********************* FOOTER *********************/ .footer{ border-top:1px solid rgba(255,255,255,.1); background:#02050C; } .footer a{ color:#ccc; } .footer a:hover{ color:#0878D1; } /********************* COPYRIGHT *********************/ .copyright{ border-top:1px solid rgba(255,255,255,.08); background:#02050C !important; } /********************* PAGINATION *********************/ .paginate_button{ display:inline-block; padding:.375rem .75rem; border-radius:6px; transition:.2s; } .paginate_button:hover{ background:#02050C; color:#fff; } /*** Single Page Hero Header End ***/ /*** About Start ***/ .about .tab-class .nav .nav-item a.active, .about .tab-class .nav .nav-item a.active span { background: var(--bs-primary) !important; color: var(--bs-white) !important; } /*** About End ***/ /*** SURCHARGE TB DARK ****/ .table-dark thead th { background-color: #0878D1; color: #ffffff; } .general-card { border-top: 4px solid var(--ucl-gold); border-radius: 16px; margin-top:10px; } .general-card:hover { } .general-card.LM { /*background: linear-gradient(135deg, #02050C, #FFFFFF);*/ } /* logo joueur er clubs classements */ .imgClassement{ height: 2rem; display: block; /* margin: auto; */ border-radius: 50%; padding: 1px; background: linear-gradient(145deg, #ffffff33, #00000066); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.6), inset 0 0 8px rgba(255, 255, 255, 0.3); } .imgTopPodium{ display: block; /* margin: auto; */ border-radius: 50%; padding: 1px; background: linear-gradient(145deg, #ffffff33, #00000066); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.6), inset 0 0 8px rgba(255, 255, 255, 0.3); } .imgClubMenu{ height: 1.5rem; display: inline; /* margin: auto; */ border-radius: 50%; padding: 1px; background: linear-gradient(145deg, #ffffff33, #00000066); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.6), inset 0 0 8px rgba(255, 255, 255, 0.3); } .col-lg-12 , .col-xl-12{ padding-left:0 !important; padding-right:0 !important } .imgMyTeam{ height: 2.5rem; display: inline; /* margin: auto; */ border-radius: 50%; padding: 1px; background: linear-gradient(145deg, #ffffff33, #00000066); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.6), inset 0 0 8px rgba(255, 255, 255, 0.3); } /*******************************************************************************/ .gallery-rowManager { margin-bottom: 30px; } .gallery-itemManager { margin-bottom: 20px; } .cardManager { display: block; border-radius: 16px; overflow: hidden; text-decoration: none; background: var(--ucl-gradient); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.6), inset 0 0 8px rgba(255, 255, 255, 0.3); transition: transform 0.25s ease, box-shadow 0.25s ease; } .cardManager:hover { transform: translateY(-6px); box-shadow: 0 12px 30px rgba(0,0,0,0.15); } /* 🔥 IMPORTANT : on enlève le crop */ .img-wrapperManager { padding: 10px; /* background: var(--ucl-gradient); */ display: block; background: linear-gradient(145deg, #07111F, #02050C); border: 1px solid rgba(212, 175, 55, 0.35); border-radius: 14px; overflow: hidden; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; text-decoration: none; } .img-wrapperManager img { width: 100%; height: auto; /* ✔ image complète */ object-fit: contain; /* ✔ garde les proportions */ } /* optionnel : effet léger au hover */ .cardManager:hover img { transform: scale(1.03); transition: transform 0.3s ease; } .cardManager-body { padding: 10px; text-align: center; } .cardManager-body h5 { margin: 0; font-size: 15px; color: #333; } /***********************************************/ /* cache le checkbox */ .img-wrapperManager input { display: none; } /* image normale */ .img-wrapperManager img { width: 100%; height: auto; cursor: zoom-in; transition: transform 0.3s ease; } /* 🔥 overlay quand zoom */ .img-wrapperManager input:checked + label { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.85); display: flex; align-items: center; justify-content: center; z-index: 9999; } /* image agrandie */ .img-wrapperManager input:checked + label img { width: auto; height: auto; max-width: 90%; max-height: 90%; cursor: zoom-out; transform: scale(1); } /* ===================================================================== COULEURS / SECTIONS LM Source : LM.css ===================================================================== */ .cssSectionDiv1{ margin-top: 0.5em; border-radius: 15px; background: linear-gradient(#d1dd79, black,black, #d1dd79); filter: drop-shadow(10px 10px 24px #030711); } .cssTbDiv1{ background-color: gray ; color: #d1dd79; text-color:#d1dd79; } .cssTbDiv1 a{ color: black; } .cssSectionDiv2{ margin-top: 0.5em; border-radius: 15px; background: linear-gradient(#d1dd79, black,black, #d1dd79); filter: drop-shadow(10px 10px 24px #030711); } .cssTbDiv2{ background-color: #d1dd79 ; color: #000000; text-color:#000000; } .cssTbDiv2 a{ color: #000000; } .cssSectionDiv3{ margin-top: 0.5em; border-radius: 15px; background: linear-gradient(#00D9FF, black,black, #00D9FF); filter: drop-shadow(10px 10px 24px #030711); } .cssTbDiv3{ background-color: #00D9FF ; color: #000000; text-color:#000000; } .cssTbDiv3 a{ color: black; } .cssSectionDiv50{ margin-top: 0.5em; border-radius: 15px; background: linear-gradient(#00D9FF, black,black, #00D9FF); filter: drop-shadow(10px 10px 24px #030711); } .cssTbDiv50{ background-color: #00D9FF ; color: white; text-color:white; } .cssTbDiv50 a{ color: black; } .cssSectionDiv51{ margin-top: 0.5em; border-radius: 15px; background: linear-gradient(#19cb56, black,black, #19cb56); filter: drop-shadow(10px 10px 24px #030711); } .cssTbDiv51{ background-color: #19cb56 ; color: #000000; text-color:#000000; } .cssTbDiv51 a{ color: black; } .cssSectionDiv52{ margin-top: 0.5em; border-radius: 15px; background: linear-gradient(#bdc50c, black,black, #bdc50c); filter: drop-shadow(10px 10px 24px #030711); } .cssTbDiv52{ background-color: #bdc50c ; color: #000000; text-color:#000000; } .cssTbDiv52 a{ color: black; } .cssSectionDiv53{ margin-top: 0.5em; border-radius: 15px; background: linear-gradient(#c3131499, black,black, #c3131499); filter: drop-shadow(10px 10px 24px #030711); } .cssTbDiv53{ background-color: #c3131499 ; color: white; text-color:#000000; } .cssTbDiv53 a{ color: black; } .cssSectionDiv55{ margin-top: 0.5em; border-radius: 15px; background: linear-gradient(#034E8C, black,black, #034E8C); filter: drop-shadow(10px 10px 24px #030711); } .cssTbDiv55{ background-color: #034E8C ; color: white; text-color:#000000; } .cssTbDiv55 a{ color: black; } .cssSectionDiv56{ margin-top: 0.5em; border-radius: 15px; background: linear-gradient(#034E8C, black,black, #034E8C); filter: drop-shadow(10px 10px 24px #030711); } .cssTbDiv56{ background-color: #034E8C ; color: white; text-color:#000000; } .cssTbDiv56 a{ color: black; } .cssSectionDiv57{ margin-top: 0.5em; border-radius: 15px; background: linear-gradient(#034E8C, black,black, #034E8C); filter: drop-shadow(10px 10px 24px #030711); } .cssTbDiv57{ background-color: #034E8C ; color: white; text-color:#000000; } .cssTbDiv57 a{ color: black; } .cssSectionDiv58{ margin-top: 0.5em; border-radius: 15px; background: linear-gradient(#034E8C, black,black, #034E8C); filter: drop-shadow(10px 10px 24px #030711); } .cssTbDiv58{ background-color: #034E8C ; color: white; text-color:#000000; } .cssTbDiv58 a{ color: black; } .cssSectionDiv60{ margin-top: 0.5em; border-radius: 5px 0 20px 20px; color:white; background: linear-gradient(#1924ce6e, black,black, #1924ce6e); filter: drop-shadow(10px 10px 24px #030711); } .cssTbDiv60{ background-color: #1924ce6e ; color: white; } .cssTbDiv60 a{ color: black; } .cssSectionDiv61{ margin-top: 0.5em; border-radius: 15px; background: linear-gradient(#19cb5675, black,black, #19cb5675); filter: drop-shadow(10px 10px 24px #030711); } .cssTbDiv61{ background-color: #19cb5675 ; color: #000000; text-color:#000000; } .cssTbDiv61 a{ color: #000000; } .cssSectionDiv62{ margin-top: 0.5em; border-radius: 15px; background: linear-gradient(#3CAEFF, black,black, #3CAEFF); filter: drop-shadow(10px 10px 24px #030711); } .cssTbDiv62{ background-color: #3CAEFF ; color: #000000; text-color:#000000; } .cssTbDiv62 a{ color: black; } .cssTbDiv100{ background-color: #FFFFFF ; color: #000000; text-color:#000000; } .cssTbDiv150{ background-color: #FFFFFF ; color: #000000; text-color:#000000; } .cssTbDiv151{ background-color: #E01B1B ; color: #000000; text-color:#000000; } .cssTbDiv200{ background-color: #00D9FF ; color: #000000; text-color:#000000; } .cssTbDivWC a{ color: black; } .cssTbDivWC{ background-color: #02050C ; color: #ffffff; text-color:#ffffff; } .cssTbDivWC a{ color: black; } /* ===================================================================== POSITIONS / JOUEURS / BADGES Source : positions.css ===================================================================== */ /* --- COULEURS D'ÉQUIPE --- */ .bgDomicile { background: linear-gradient(135deg, #030711 0%, #0D1B2D 100%); color: white; padding: 5px 10px; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.3); } .bgExterieur { background: linear-gradient(135deg, #6c757d 0%, #495057 100%); color: white; padding: 5px 10px; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.3); } .nomDomicile { font-weight: bold; text-decoration: underline; text-decoration-color: #030711; color: #030711; text-transform: uppercase; } .nomExterieur { font-weight: bold; text-decoration: underline; text-decoration-color: #6c757d; color: #6c757d; text-transform: uppercase; } /* --- ÉLÉMENTS JOUEURS --- */ .imagePlayer { width: 20px; border-radius: 50%; vertical-align: middle; border: 1px solid rgba(0,0,0,0.1); } /* --- COULEURS PAR POSTE (TEXTE ET TABLEAUX) --- */ .colorGardiens { color: #3CAEFF; font-weight: bold; } .colorDefenseurs { color: #00D9FF; font-weight: bold; } .colorMilieux { color: #4b9f23; font-weight: bold; } .colorAttaquants { color: #be262e; font-weight: bold; } .colorGardiensTab { background-color: #3CAEFF; color: white; } .colorDefenseursTab { background-color: #00D9FF; color: white; } .colorMilieuxTab { background-color: #4b9f23; color: white; } .colorAttaquantsTab { background-color: #be262e; color: white; } /* --- BADGES DE POSITION (Style FIFA/UCL) --- */ /* Base commune pour toutes les positions */ .posGB, .posDC, .posDG, .posDD, .posMDf, .posMR, .posMO, .posMLG, .posMLD, .posMDF, .posAC, .posSA, .posAiG, .posAiD, .posAIG, .posAID, .backup { display: inline-flex; align-items: center; justify-content: center; color: #FFF; font-weight: bold; text-align: center; border-radius: 4px; font-size: 0.7em; width: 3.2em; height: 1.6em; text-transform: uppercase; box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 1px 3px rgba(0,0,0,0.4); border: 1px solid rgba(0,0,0,0.2); } .posGB { background: linear-gradient(to bottom, #3CAEFF, #0878D1); border-top-color: #3CAEFF; border-bottom-color: #034E8C; } .posDC, .posDG, .posDD { background: linear-gradient(to bottom, #00D9FF, #0878D1); border-top-color: #00D9FF; border-bottom-color: #0878D1; } .posMDf, .posMR, .posMO, .posMLG, .posMLD, .posMDF { background: linear-gradient(to bottom, #4b9f23, #336e17); border-top-color: #6cb14b; border-bottom-color: #336e17; } .posAC, .posSA, .posAiG, .posAiD, .posAIG, .posAID { background: linear-gradient(to bottom, #be262e, #83191f); border-top-color: #ca4e54; border-bottom-color: #83191f; } .backup { background: #495057; padding: 2px 5px; } /* --- NOTES DE GÉNÉRAL (GEN) --- */ .gen_less_75, .gen_less_85, .gen_less_95, .gen_Max { display: inline-flex; align-items: center; justify-content: center; color: #000; font-weight: bold; text-align: center; border-radius: 4px; font-size: 0.7em; width: 3em; height: 1.5em; box-shadow: 0 1px 2px rgba(0,0,0,0.2); } .gen_less_75 { background-color: #fd3730; stroke: #fd3730; } .gen_less_85 { background-color: #3CAEFF; stroke: #3CAEFF; } .gen_less_95 { background-color: #a8fe02; stroke: #a8fe02; } .gen_Max { background-color: #02fec5; stroke: #02fec5; box-shadow: 0 0 8px rgba(2, 254, 197, 0.5); } /* --- RÉSULTATS FORME (V, N, D) --- */ .resultForme_V, .resultForme_N, .resultForme_D, .resultForme_NC { display: inline-block; width: 1.125rem; height: 1.125rem; color: white; font-size: .72rem; font-weight: bold; text-align: center; line-height: 1.125rem; overflow: hidden; margin-left: 0.125rem; border-radius: 2px; } .resultForme_V { background-color: #28a745; } .resultForme_N { background-color: #3CAEFF; color: #000; } .resultForme_D { background-color: #dc3545; } .resultForme_NC { background-color: #d8d8d8; color: #666; } /* --- CONTRATS --- */ .contrat_5, .contrat_4, .contrat_3, .contrat_2, .contrat_1 { font-weight: bold; text-align: center; border-radius: 3px; display: inline-block; width: 1.125rem; height: 1.125rem; line-height: 1.125rem; font-size: 0.7rem; } .contrat_5 { background-color: #28a745; color: #FFF; } .contrat_4 { background-color: #02fec5; color: #000; } .contrat_3 { background-color: #ff0; color: #000; } .contrat_2 { background-color: #3CAEFF; color: #000; } .contrat_1 { background-color: #f00; color: #FFF; } /* --- CONDITIONS PHYSIQUES --- */ .condition_A, .condition_B, .condition_C, .condition_D, .condition_E { text-align: center; font-weight: bold; font-size: 1.4em; text-shadow: 1px 1px 2px rgba(0,0,0,0.3); } .condition_A { color: #FFFFFF; } .condition_B { color: #22FF00; } .condition_C { color: #FFE600; } .condition_D { color: #3CAEFF; } .condition_E { color: #FF0000; } /* --- SECTION PLAYERS & FORMULAIRE --- */ .players-section { padding: 5rem 0; background: linear-gradient(to bottom, rgba(22, 22, 22, 0.3) 0%, rgba(22, 22, 22, 0.7) 75%, #161616 100%), url("../img/bg-signup.jpg") center/cover no-repeat fixed; } .players-section .form-inline input { box-shadow: 0 0.1875rem 0.3rem 0 rgba(0, 0, 0, 0.2) !important; padding: 1.25rem 2rem; height: auto; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, 'Varela Round', sans-serif; font-size: 85%; text-transform: uppercase; letter-spacing: 0.15rem; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.05); color: white; transition: 0.3s; } .players-section .form-inline input:focus { background: rgba(255,255,255,0.1); border-color: #FFFFFF; outline: none; } /* ===================================================================== ARBRE DE COUPE Source : arbreCup.css ===================================================================== */ .tournament-container {} .tournament-headers { flex-grow: 1; display: flex; flex-direction: row; justify-content: space-around; border-bottom: 1px solid #ccc; } .tournament-headers h3 { width: 25%; text-align: center; font-weight: 400; border-right: 1px dashed #ccc; margin: 0; padding: 1rem; } .tournament-brackets { display: flex; flex-direction: row; list-style-type: none; background: #fdfdfd; margin-bottom: 50px; } .bracket { padding-left: 0; display: flex; margin: 0; padding: 30px 0; flex-grow: 1; flex-direction: column; justify-content: space-around; list-style-type: none; border-right: 1px dashed #ccc; /*flex: 1;*/ } .team-item { /* background-color: #f4f4f4;*/ padding: .5rem; display: block; margin: .5rem 10px; position: relative; vertical-align: middle; line-height: 2; text-align: center; } .team-item:after { content:''; border-color: #4f7a38; border-width: 2px; position: absolute; display: block; width: 10px; right: -11px; } .team-item:nth-of-type(odd):after { border-right-style: solid; border-top-style: solid; height: 100%; top: 50%; } .team-item:nth-of-type(even):after { border-right-style: solid; border-bottom-style: solid; height: 100%; top: -50%; } .team-item:before { content:''; border-top: 2px solid #4f7a38; position: absolute; height: 2px; width: 10px; left: -10px; top: 50%; } .bracket-2 .team-item:nth-of-type(odd):after { height: 200%; top: 50%; } .bracket-2 .team-item:nth-of-type(even):after { height: 200%; top: -150%; } .bracket-3 .team-item:nth-of-type(odd):after { height: 350%; top: 50%; } .bracket-3 .team-item:nth-of-type(even):after { height: 350%; top: -300%; } .bracket-4 .team-item:nth-of-type(odd):after { height: 700%; top: 50%; } .bracket-4 .team-item:nth-of-type(even):after { height: 700%; top: -650%; } .bracket:first-of-type .team-item:before { display: none; } .bracket-4 .team-item:after { display: none; } .bracket:last-of-type .team-item:before, .bracket:last-of-type .team-item:after { display: none; } .team-item time { display: inline-block; border-radius: 0 25% 0 25%; background: linear-gradient(145deg, #ffffff33, #00000066); font-size: .8rem; padding: 0 .2rem; color: black; font-weight: bold; } .imgClubCup{ height: 2rem; display: inline; /* margin: auto; */ border-radius: 50%; padding: 4px; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.6), inset 0 0 8px rgba(255, 255, 255, 0.3); } /* ===================================================================== PODIUM / SCOREBOARD Source : podium.css ===================================================================== */ /* ================================================================ SCOREBOARD & PODIUMS - THEME UFL PREMIUM (VERSION RESPONSIVE 3 MARCHES) ================================================================ */ .number-holder { transition: all 500ms ease-in-out; } .scoreboard { border-radius: 12px; display: flex; margin: 0 auto; flex-direction: column; background: #02050C; color: #ffffff; padding: 25px; box-shadow: 0 10px 30px rgba(0,0,0,0.8); max-width: 100%; /* Sécurité mobile */ } /* --- PODIUMS - STRUCTURE DE BASE (CONSERVÉE) --- */ .scoreboard__podiums { display: flex; flex-direction: row; /* Force l'alignement horizontal (3 marches) */ justify-content: center; /* Centre le podium */ margin: 40px 0; min-height: 380px; align-items: flex-end; /* Aligne les socles en bas */ } .scoreboard__podiums .scoreboard__podium { margin: 0 10px; /* Espace entre les marches (PC) */ display: flex; flex-direction: column; align-self: flex-end; flex: 1; /* Chaque marche prend un tiers de la largeur disponible */ max-width: 200px; /* Largeur max sur PC pour un look épuré */ opacity: 0; position: relative; } .scoreboard__podiums .scoreboard__podium.is-visible { opacity: 1; transition: all 600ms cubic-bezier(.4,.2,.2,1); } /* Chiffre de rang (1, 2, 3) */ .scoreboard__podiums .scoreboard__podium-rank { font-size: 5.5rem; font-weight: 900; position: absolute; left: 50%; transform: translateX(-50%); bottom: 20px; z-index: 1; color: rgba(255, 255, 255, 0.12); -webkit-text-stroke: 1px rgba(255,255,255,0.2); pointer-events: none; } /* Socles du podium */ .scoreboard__podiums .scoreboard__podium-base { height: 0; min-width: 90px; width: 100%; border-radius: 6px 6px 2px 2px; transition: all 1200ms cubic-bezier(.17,.67,.83,.67); opacity: 0; position: relative; z-index: 2; box-shadow: 0 10px 25px rgba(0,0,0,0.6); } .scoreboard__podiums .scoreboard__podium-base.is-expanding { opacity: 1; } .scoreboard__podiums .scoreboard__podium-base--first { background: linear-gradient(to bottom, #3CAEFF 0%, #0878D1 100%); border: 1px solid rgba(255,255,255,0.4); } .scoreboard__podiums .scoreboard__podium-base--second { background: linear-gradient(to bottom, #e0e0e0 0%, #8e8e8e 100%); border: 1px solid rgba(255,255,255,0.3); } .scoreboard__podiums .scoreboard__podium-base--third { background: linear-gradient(to bottom, #0878D1 0%, #0D1B2D 100%); border: 1px solid rgba(255,255,255,0.2); } /* Texte sous le podium (Nom et Score) */ .scoreboard__podiums .scoreboard__podium-number { text-align: center; font-weight: 800; margin-top: 15px; color: #ffffff; text-shadow: 1px 1px 3px rgba(0,0,0,0.9); } .scoreboard__podiums .scoreboard__podium-number b { font-size: 1.2rem; color: #ffffff; } .scoreboard__podiums .scoreboard__podium-number small { display: block; font-size: 0.75rem; color: #0878D1; /* Or UFL */ text-transform: uppercase; font-weight: 700; margin-top: 4px; } /* ================================================================ ADAPTATION MOBILE - FORCE L'ASPECT 3 MARCHES (AJOUTÉ/CORRIGÉ) ================================================================ */ /* --- TABLETTES ET GRANDS MOBILES --- */ @media (max-width: 768px) { .scoreboard { padding: 15px; } .scoreboard__podiums { margin: 20px 0; min-height: 280px; /* Hauteur réduite pour mobile */ gap: 5px; /* Espace minimal entre les marches */ } .scoreboard__podiums .scoreboard__podium { margin: 0; /* On enlève les marges PC */ max-width: none; /* On laisse le flex gérer la largeur */ } .scoreboard__podiums .scoreboard__podium-base { min-width: 70px; /* Socles plus étroits */ } /* Réduction des textes */ .scoreboard__podiums .scoreboard__podium-number b { font-size: 0.95rem; /* Score plus petit */ } .scoreboard__podiums .scoreboard__podium-number small { font-size: 0.65rem; /* Nom du joueur plus petit */ letter-spacing: 0.5px; } } /* --- PETITS MOBILES (iPhone SE, etc.) --- */ @media (max-width: 420px) { .scoreboard__podiums { min-height: 240px; /* Encore plus bas */ gap: 2px; /* Presque collés pour gagner de la place */ } .scoreboard__podiums .scoreboard__podium-base { min-width: 60px; /* Socles ultra-étroits */ } /* Le chiffre derrière devient envahissant, on le réduit ou on le masque */ .scoreboard__podiums .scoreboard__podium-rank { font-size: 3rem; bottom: 30px; } /* Texte sous le podium : C'est ici que ça se joue */ .scoreboard__podiums .scoreboard__podium-number { margin-top: 8px; line-height: 1.1; /* Resserre les lignes */ } .scoreboard__podiums .scoreboard__podium-number b { font-size: 0.85rem; /* Très petit */ } .scoreboard__podiums .scoreboard__podium-number small { font-size: 0.6rem; /* Micro texte pour le nom */ display: -webkit-box; -webkit-line-clamp: 2; /* Force le nom sur 2 lignes si trop long */ -webkit-box-orient: vertical; overflow: hidden; /* Coupe le texte si ça dépasse */ } } /* --- LE RESTE DU CSS (LISTES) RESTE IDENTIQUE --- */ .scoreboard__item { /*...*/ } .scoreboard__title { /*...*/ } .scoreboard__numbers { /*...*/ } .scoreboard__bar { /*...*/ } .bump { /*...*/ } @keyframes bump { /*...*/ } /* ===================================================================== FLIP CARDS JOUEURS Source : flipCard.css ===================================================================== */ /********************* FLIP CARD UCL/UFL - PREMIUM EDITION (Structure 100% conservée, Visuels améliorés) *********************/ .flip-card-3D-wrapper { width: 100%; height: 100%; max-width: 300px; perspective: 1000px; /* Légèrement augmenté pour une meilleure 3D */ margin: 10px 10px; } .flip-card { height: 100%; transition: transform 0.8s cubic-bezier(.4,.2,.2,1), box-shadow 0.3s ease; transform-style: preserve-3d; border-radius: 16px; /* AMÉLIORATION : Ombre plus profonde et fond "Spotlight" */ box-shadow: 0 12px 30px rgba(0,0,0,0.8), inset 0 0 20px rgba(255,255,255,0.02); background: radial-gradient(circle at 50% 30%, #0D1B2D 0%, #02050C 100%); } /* AMÉLIORATION : Léger effet de brillance quand on passe la souris sur la carte */ .flip-card-3D-wrapper:hover .flip-card { box-shadow: 0 15px 40px rgba(0,0,0,0.9), 0 0 15px rgba(248, 184, 100, 0.15); } .do-flip {transform: rotateY(-180deg);} /********************* BOUTONS (Visuel "Glassmorphism" & Survol) *********************/ .flip-card-btn-turn-to-back, .flip-card-btn-turn-to-front, .flip-card-btn-turn-to-back2 { position: absolute; bottom: 4px; /* Un poil remonté pour respirer */ visibility: hidden; border-radius: 6px; /* Plus carré, plus moderne */ font-size: 11px; padding: 3px 8px; /* AMÉLIORATION : Look moderne au lieu du style "inset" des années 2000 */ border: 1px solid rgba(248, 184, 100, 0.4); background: rgba(0, 0, 0, 0.7); color: #3CAEFF; border-style: solid; cursor: pointer; transition: all 0.3s ease; backdrop-filter: blur(4px); } .flip-card-btn-turn-to-back, .flip-card-btn-turn-to-front { right: 4px; } .flip-card-btn-turn-to-back2 { left: 4px; } /* AMÉLIORATION : Effet quand on passe la souris sur le bouton */ .flip-card-btn-turn-to-back:hover, .flip-card-btn-turn-to-front:hover, .flip-card-btn-turn-to-back2:hover { background: #3CAEFF; color: #000; border-color: #3CAEFF; } /********************* FACES & BORDURES (Lueur interne ajoutée) *********************/ .flip-card-front, .flip-card-back { height: 100%; width: 100%; position: absolute; backface-visibility: hidden; z-index: 2; border-radius: 10px; border: 5px solid transparent; /* AMÉLIORATION : Reflet vitré en haut de la carte */ background-image: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(0,0,0,0) 30%); } .flip-card-back { transform: rotateY(180deg); } /* ============================================================ BASE COMMUNE ============================================================ */ .flip-card_GB .flip-card-front, .flip-card_GB .flip-card-back, .flip-card_DEF .flip-card-front, .flip-card_DEF .flip-card-back, .flip-card_MIL .flip-card-front, .flip-card_MIL .flip-card-back, .flip-card_ATT .flip-card-front, .flip-card_ATT .flip-card-back { position: absolute; /* Fond premium très sombre */ background: #02050C !important; /* Bordure fine */ border-width: 2px !important; border-style: solid !important; /* Empêche les débordements */ overflow: hidden; /* Aspect carte */ border-radius: 15px; /* Légère profondeur */ box-shadow: 0 12px 30px rgba(0, 0, 0, 0.65), inset 0 0 25px rgba(255,255,255,0.025); } /* ============================================================ REFLET MÉTALLIQUE COMMUN ============================================================ */ .flip-card_GB .flip-card-front::before, .flip-card_GB .flip-card-back::before, .flip-card_DEF .flip-card-front::before, .flip-card_DEF .flip-card-back::before, .flip-card_MIL .flip-card-front::before, .flip-card_MIL .flip-card-back::before, .flip-card_ATT .flip-card-front::before, .flip-card_ATT .flip-card-back::before { content: ""; position: absolute; top: 0; left: -40%; width: 80%; height: 100%; pointer-events: none; background: linear-gradient( 110deg, transparent 0%, rgba(255,255,255,0.025) 45%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.015) 55%, transparent 100% ); transform: skewX(-15deg); z-index: 1; } /* ============================================================ LIGNE PREMIUM SUPÉRIEURE ============================================================ */ .flip-card_GB .flip-card-front::after, .flip-card_GB .flip-card-back::after, .flip-card_DEF .flip-card-front::after, .flip-card_DEF .flip-card-back::after, .flip-card_MIL .flip-card-front::after, .flip-card_MIL .flip-card-back::after, .flip-card_ATT .flip-card-front::after, .flip-card_ATT .flip-card-back::after { content: ""; position: absolute; top: 0; left: 15%; right: 15%; height: 2px; border-radius: 0 0 5px 5px; z-index: 5; } /* ============================================================ GB — GOLD / JAUNE ============================================================ */ .flip-card_GB .flip-card-front, .flip-card_GB .flip-card-back { border-color: #3CAEFF !important; box-shadow: 0 12px 30px rgba(0,0,0,0.65), inset 0 0 35px rgba(245,197,66,0.055), 0 0 10px rgba(245,197,66,0.12); } .flip-card_GB .flip-card-front::after, .flip-card_GB .flip-card-back::after { background: linear-gradient( 90deg, transparent, #3CAEFF, #3CAEFF, transparent ); box-shadow: 0 0 10px rgba(245,197,66,0.6); } /* ============================================================ DEF — BLEU ============================================================ */ .flip-card_DEF .flip-card-front, .flip-card_DEF .flip-card-back { border-color: #FFFFFF !important; box-shadow: 0 12px 30px rgba(0,0,0,0.65), inset 0 0 35px rgba(255,255,255,0.055), 0 0 10px rgba(255,255,255,0.12); } .flip-card_DEF .flip-card-front::after, .flip-card_DEF .flip-card-back::after { background: linear-gradient( 90deg, transparent, #FFFFFF, #FFFFFF, transparent ); box-shadow: 0 0 10px rgba(255,255,255,0.6); } /* ============================================================ MIL — VERT ============================================================ */ .flip-card_MIL .flip-card-front, .flip-card_MIL .flip-card-back { border-color: #20d878 !important; box-shadow: 0 12px 30px rgba(0,0,0,0.65), inset 0 0 35px rgba(32,216,120,0.05), 0 0 10px rgba(32,216,120,0.12); } .flip-card_MIL .flip-card-front::after, .flip-card_MIL .flip-card-back::after { background: linear-gradient( 90deg, transparent, #65f0aa, #20d878, transparent ); box-shadow: 0 0 10px rgba(32,216,120,0.6); } /* ============================================================ ATT — ROUGE ============================================================ */ .flip-card_ATT .flip-card-front, .flip-card_ATT .flip-card-back { border-color: #f23852 !important; box-shadow: 0 12px 30px rgba(0,0,0,0.65), inset 0 0 35px rgba(242,56,82,0.055), 0 0 10px rgba(242,56,82,0.12); } .flip-card_ATT .flip-card-front::after, .flip-card_ATT .flip-card-back::after { background: linear-gradient( 90deg, transparent, #ff6b7c, #f23852, transparent ); box-shadow: 0 0 10px rgba(242,56,82,0.6); } /* ============================================================ PETIT REFLET AU SURVOL ============================================================ */ .flip-card-3D-wrapper:hover .flip-card_GB .flip-card-front, .flip-card-3D-wrapper:hover .flip-card_GB .flip-card-back { box-shadow: 0 18px 40px rgba(0,0,0,0.8), inset 0 0 40px rgba(245,197,66,0.08), 0 0 18px rgba(245,197,66,0.2); } .flip-card-3D-wrapper:hover .flip-card_DEF .flip-card-front, .flip-card-3D-wrapper:hover .flip-card_DEF .flip-card-back { box-shadow: 0 18px 40px rgba(0,0,0,0.8), inset 0 0 40px rgba(255,255,255,0.08), 0 0 18px rgba(255,255,255,0.2); } .flip-card-3D-wrapper:hover .flip-card_MIL .flip-card-front, .flip-card-3D-wrapper:hover .flip-card_MIL .flip-card-back { box-shadow: 0 18px 40px rgba(0,0,0,0.8), inset 0 0 40px rgba(32,216,120,0.08), 0 0 18px rgba(32,216,120,0.2); } .flip-card-3D-wrapper:hover .flip-card_ATT .flip-card-front, .flip-card-3D-wrapper:hover .flip-card_ATT .flip-card-back { box-shadow: 0 18px 40px rgba(0,0,0,0.8), inset 0 0 40px rgba(242,56,82,0.08), 0 0 18px rgba(242,56,82,0.2); } /* --- AJUSTEMENT DES TEXTES POUR LE CONTRASTE --- */ .flip-card-front h4, .flip-card-back h4 { text-shadow: 0 0 10px rgba(0,0,0,1), 0 2px 4px rgba(0,0,0,1); } /* --- COHÉRENCE DE LA PHOTO (Optionnel, à adapter selon tes classes) --- */ .flip-card_GB .player-photo { background: linear-gradient(135deg, #3CAEFF, #000) !important; } .flip-card_DEF .player-photo { background: linear-gradient(135deg, #FFFFFF, #000) !important; } .flip-card_MIL .player-photo { background: linear-gradient(135deg, #00ff66, #000) !important; } .flip-card_ATT .player-photo { background: linear-gradient(135deg, #ff0033, #000) !important; } /********************* TYPOGRAPHIE (Ombres pour la lisibilité) *********************/ .flip-card-front h4, .flip-card-back h4, .flip-card-front h6, .flip-card-back h6 { color: #ffffff; /* AMÉLIORATION : Ombre portée sur le texte pour détacher du fond */ text-shadow: 0 2px 5px rgba(0,0,0,0.9); letter-spacing: 0.5px; } .flip-card-front h5, .flip-card-back h5 { color: #3CAEFF; /* Sous-titres en Or */ text-shadow: 0 2px 4px rgba(0,0,0,0.9); } /********************* PHOTOS & LOGOS (Cercles métalliques) *********************/ .player-photo { height: 5rem; display: block; margin: auto; border-radius: 50%; padding: 3px; background: linear-gradient(135deg, #3CAEFF, #034E8C, #3CAEFF); box-shadow: 0 8px 15px rgba(0,0,0,0.8), inset 0 0 10px rgba(0,0,0,0.8); } .profile-photo { position: relative; bottom: -1px; display: block; margin: auto; width: 100%; max-width: 200px; border-radius: 10px; box-shadow: 0 10px 25px rgba(0,0,0,0.8); } /* LOGOS */ .club-logo, .gp-logo { height: 2rem; display: block; margin: auto; /* AMÉLIORATION : Ombre plus douce pour que le logo s'intègre mieux */ filter: drop-shadow(0 3px 5px rgba(0,0,0,0.8)); } .gp-logo { display:inline;height: 1.2rem !important; } .flip-card_GB .player-photo { background: linear-gradient( 135deg, #fff2a8, #3CAEFF, #034E8C ) !important; } .flip-card_DEF .player-photo { background: linear-gradient( 135deg, #FFFFFF, #FFFFFF, #0878D1 ) !important; } .flip-card_MIL .player-photo { background: linear-gradient( 135deg, #b4ffd7, #20d878, #087d45 ) !important; } .flip-card_ATT .player-photo { background: linear-gradient( 135deg, #ffc0c8, #f23852, #8f1729 ) !important; } /* ===================================================================== TABLEAUX STICKY Source : LMTables.css ===================================================================== */ .tableClassement > tbody > tr > td:nth-child(1) { position: sticky; left:0px; } .tableClassement > tbody > tr > td:nth-child(4) { position: sticky; left: 15px; } .tableClassement> th:nth-child(4) { position: sticky; left:15px; opacity: 1; } .tableClassement > tbody > tr > td:nth-child(1) { opacity: 1; } .tableClassement > tbody > tr> td:nth-child(2) { opacity: 1; } .tableClassement > tbody > tr > td:nth-child(3) { opacity: 1; } .tableClassement > tbody > tr > td:nth-child(4) { opacity: 1; } /* On cible les 4 premières colonnes (th et td) */ .tableClassement th:nth-child(-n+4), .tableClassement td:nth-child(-n+4) { position: sticky !important; z-index: 10 !important; opacity: 1 !important; /* On force le fond opaque pour bloquer la transparence du striped */ /*background-color: var(--bs-dark) !important;*/ } .tableManagers > tbody > tr > td:nth-child(1) { position: sticky; left:0em; font-weight: bold; color:white; z-index: 10; } .tableManagers > tbody > tr > td:nth-child(2) { font-weight: bold; color:white; } /* Lignes impaires (ou base) */ .tableManagers tbody tr:nth-of-type(odd) td:nth-child(-n+4) { background-color: var(--bs-dark) !important; } /* Lignes paires (Striped) - On met une couleur solide légèrement différente */ .tableManagers.table-striped tbody tr:nth-of-type(even) td:nth-child(-n+4) { background-color: #030711 !important; /* Un bleu très proche mais opaque */ } /* ===================================================================== MODALES Source : modalLM.css ===================================================================== */ .modal-body { background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../img/breadcrumb-bg.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover; } /* ===================================================================== THEME UCL FINAL / SURCHARGES Source : cssFixed.css ===================================================================== */ /* ================================================================ THEME UNIFIÉ - VERSION UCL (BLEU) ================================================================ */ :root { --bs-primary: #0878D1; --bs-secondary: #FFFFFF; --bs-dark: #000000; --ucl-gradient: linear-gradient(90deg, #0878D1, #FFFFFF); --ucl-blue: #0878D1; --ucl-dark: #02050C; --ucl-cyan: #FFFFFF; --ucl-gold: #3CAEFF; --bg: #030711; --bs-table-bg: #0878D1; --bs-table-striped-bg: #02050C; } /* --- FOND GLOBAL --- */ body { /*background-color: var(--bs-dark) !important;*/ color: #ffffff; margin: 0; } /* --- NAVBAR (ANTI-TRANSPARENCE) --- */ .navbar, .navbar-collapse, .sidebar, nav.navbar { background-color: #030711 !important; background: #030711 !important; opacity: 1 !important; visibility: visible !important; } header, .sidebar-wrapper { background-color: #030711 !important; } /* --- NAVBAR (ANTI-TRANSPARENCE) --- */ .navbar, .navbar-collapse, .sidebar, nav.navbar { background-color: #030711 !important; background: #030711 !important; opacity: 1 !important; visibility: visible !important; } header, .sidebar-wrapper { background-color: #030711 !important; } /* --- LIENS NAVIGATION --- */ .navbar .nav-link { color: #ffffff !important; font-weight: 500; padding: 12px 15px !important; background: transparent !important; transition: 0.3s; } /* Hover / focus */ .navbar .nav-link:hover, .navbar .nav-link:focus, .navbar .nav-item:hover > .nav-link { color: var(--bs-secondary) !important; /* bleu clair */ background-color: rgba(255, 255, 255, 0.05) !important; } /* Actif */ .navbar .nav-link.active, .navbar .navbar-nav .nav-link.active { color: var(--bs-secondary) !important; border-left: 4px solid var(--bs-secondary) !important; } /* --- DROPDOWN --- */ .dropdown-menu { background-color: #07111F !important; color: #07111F !important; border-radius: 6px !important; border: none !important; box-shadow: 0 10px 25px rgba(0,0,0,0.6) !important; } .dropdown-item { color: #07111F !important; font-weight: 500 !important; /*background: transparent !important;*/ } .dropdown-item:hover { background: var(--ucl-gradient) !important; color: #07111F !important; } /* --- BOUTONS ---*/ .btn-primary { background: var(--ucl-gradient) !important; color: var(--ucl-gold) !important; border: none !important; } .btn-primary:hover { opacity: 0.9; } .btn-secondary { background: var(--bs-secondary) !important; color: #07111F !important; border: none !important; } .btn-secondary:hover { opacity: 0.9; background: var(--ucl-gradient) !important; } .btn-success { background: var(--ucl-gradient) !important; color: #ffffff !important; border: none !important; } .btn-success:hover { opacity: 0.9; } .btn-primary {color: #ffffff !important;} .btn-secondary {color: #ffffff !important;} .btn-primary:hover { background: var(--ucl-gradient) !important; } .btn-secondary:hover { background: var(--bs-secondary) !important; } .nav-link:hover { color: #ffffff !important; } .nav-link { color: #ffffff !important; } .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { background: var(--ucl-blue) !important; color: #ffffff !important; border: none !important; } /* --- UTILITAIRES --- */ .bg-primary { background: var(--ucl-gradient) !important; } .bg-secondary { background-color: var(--bs-secondary) !important; } .bg-dark { background-color: var(--bs-dark) !important; } .bg-light { background-color: #07111F !important; } .text-primary { color: var(--bs-secondary) !important; } .bg-breadcrumb{ background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../img/xbox-bg_8.jpg?1.4); background-position: center center; background-repeat: no-repeat; background-size: cover; padding: 60px 0 0 0; } /* --- L'ASSET JOUEUR ULTIME (STYLE UFL ELITE) --- */ .img-ufl-player { max-width: 100%; height: auto; display: block; position: relative; z-index: 2; /* 1. ÉCLAIRAGE DE CONTOUR (Rim Light) */ /* Crée une légère aura dorée autour du détourage du joueur */ /* 2. DÉGRADÉ DE TRANSPARENCE (Masking) */ /* Le buste se fond parfaitement dans le bas de la carte */ mask-image: linear-gradient(to bottom, black 0%, black 80%, rgba(0,0,0,0.5) 92%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, black 0%, black 80%, rgba(0,0,0,0.5) 92%, transparent 100%); /* 3. EFFET DE CONTRASTE "NEXT-GEN" */ /* Rend les couleurs plus vibrantes et les noirs plus profonds */ filter: brightness(1.1) contrast(1.05) saturate(1.1) drop-shadow(0 0 1px rgba(255, 204, 0, 0.8)) drop-shadow(0 0 15px rgba(197, 160, 89, 0.3)); /* 4. ANIMATION DE FLOTTEMENT ET ZOOM */ transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); cursor: pointer; } /* --- EFFETS AU SURVOL (HOVER) --- */ .img-ufl-player:hover { /* Le joueur avance vers l'utilisateur */ transform: scale(1.08) translateY(-10px); /* L'aura devient plus intense (effet de puissance) */ filter: brightness(1.2) drop-shadow(0 0 2px rgba(255, 204, 0, 1)) drop-shadow(0 10px 30px rgba(197, 160, 89, 0.6)); } /* --- OPTIONNEL : EFFET DE REFLET (SHINE) SUR LE JOUEUR --- */ /* Ajoute cette classe au parent de l'image (la carte) pour un flash périodique */ @keyframes ufl-shine { 0% { filter: brightness(1); } 50% { filter: brightness(1.3) contrast(1.1); } 100% { filter: brightness(1); } } .card-active .img-ufl-player { animation: ufl-shine 3s infinite ease-in-out; } /* ================================================================ BOOTSTRAP 5 OVERRIDE - THEME UFL ELITE ================================================================ */ /* 1. Le conteneur global */ .accordion { --bs-accordion-bg: #000000; /* Fond Bleu Nuit */ --bs-accordion-color: #ffffff; --bs-accordion-border-color: none; --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23c5a059'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); border-radius: 8px; overflow: hidden; } /* 2. Le bouton (Header) */ .accordion-button { font-weight: 800; text-transform: uppercase; letter-spacing: 1px; /* color: #0878D1 !important; */ /* Texte Or par défaut */ color: #ffffff !important; /* Texte Or par défaut */ box-shadow: none !important; /* Supprime le halo bleu au clic */ border: none; transition: all 0.3s ease; background:var(--ucl-gradient); } /* 3. État ouvert (Active) */ .accordion-button:not(.collapsed) { /* background-color: rgba(197, 160, 89, 0.1) !important; Fond Or très léger */ background:var(--ucl-gradient); color: #ffffff !important; /* Le texte devient blanc quand ouvert */ } /* 4. Le corps (Contenu) */ .accordion-body { background: rgba(255, 255, 255, 0.03); /*background:var(--ucl-gradient);*/ color: #e0e0e0; font-size: 0.9rem; border-top: 1px solid rgba(197, 160, 89, 0.15); margin-top:1em; } /* 5. Nettoyage des bordures Bootstrap */ .accordion-item { border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important; background: transparent; } .accordion-item:last-child { border-bottom: none !important; } /* 6. Effet de survol (Hover) */ .accordion-button:hover { background-color: rgba(255, 255, 255, 0.05); } /* Surcharge globale de la classe .badge */ .badge { /*padding: 0.5em 0.8em;*/ font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; border-radius: 6px; /* Un peu plus carré/moderne que l'arrondi total */ position: relative; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); transition: all 0.3s ease; } /* Effet de brillance au survol */ .badge:hover { transform: translateY(-1px); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); filter: brightness(1.1); } /* --- Variantes de couleurs stylisées --- */ /* Primary - Style UCL #0878D1 */ .bg-primary { background: linear-gradient(135deg, #0878D1 0%, #02050C 100%) !important; border-color: #FFFFFF !important; color: #fff !important; } /* Success - Émeraude profond */ .bg-success { background: linear-gradient(135deg, #0878D1 0%, #38ef7d 100%) !important; border-color: rgba(255,255,255,0.2) !important; color:#000 !important; } /* Danger - Rubis / Feu */ .bg-danger { background: linear-gradient(135deg, #cb2d3e 0%, #ef473a 100%) !important; border-color: rgba(255,255,255,0.2) !important; } /* Warning - Or / Ambre */ .bg-warning { background: linear-gradient(135deg, #3CAEFF 0%, #3CAEFF 100%) !important; color: #212529 !important; /* Texte sombre pour la lisibilité */ border-color: rgba(0,0,0,0.1) !important; } /* Info - #00D9FF électrique */ .bg-info { background: linear-gradient(135deg, #FFFFFF 0%, #FFFFFF 100%) !important; color: #fff !important; } /* Custom Gold (pour tes gagnants) */ .badge-gold { background: linear-gradient(135deg, #0878D1, #fcf6ba, #0878D1, #fbf5b7, #0878D1) !important; color: #000 !important; font-weight: 800; border: 1px solid #0D1B2D !important; } /* --- STRUCTURE GLOBALE DE L'OFFCANVAS --- */ .offcanvas { /* Fond en dégradé profond avec effet de flou (Glassmorphism) */ background: linear-gradient(180deg, #030711 0%, #02050C 100%) !important; backdrop-filter: blur(10px); border-left: 2px solid rgba(255,255,255,0.3) !important; /* Bordure #00D9FF subtile */ color: white !important; box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5); } /* --- EN-TÊTE (Header) --- */ .offcanvas-header { background: var(--ucl-gradient); border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding: 1.5rem; } .offcanvas-title { font-weight: 800; text-transform: uppercase; letter-spacing: 2px; color: #0878D1; /* Couleur Or UCL */ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, 'Varela Round', sans-serif; text-shadow: 0 0 10px rgba(197, 160, 89, 0.3); } /* Bouton fermer personnalisé */ .btn-close-white { filter: invert(1) grayscale(100%) brightness(200%); transition: transform 0.3s ease; } .btn-close-white:hover { transform: rotate(90deg) scale(1.2); } /* --- CORPS (Body) --- */ .offcanvas-body { padding: 2rem 1.5rem; } /* Style pour les listes de liens à l'intérieur */ .offcanvas-body .nav-link { color: #ddd !important; font-weight: 600; padding: 12px 15px; border-radius: 8px; margin-bottom: 8px; transition: all 0.3s ease; border: 1px solid transparent; } .offcanvas-body .nav-link:hover { background: rgba(255,255,255,0.1); color: #FFFFFF !important; border-color: rgba(255,255,255,0.3); padding-left: 25px; /* Petit effet de décalage au survol */ } /* État actif */ .offcanvas-body .nav-link.active { background: linear-gradient(90deg, rgba(255,255,255,0.40), transparent); border-left: 4px solid #FFFFFF; color: #fff !important; } /* --- SECTIONS DE CONTENU (Titres internes) --- */ .offcanvas-subtitle { font-size: 0.75rem; color: #6c757d; text-transform: uppercase; letter-spacing: 1.5px; margin: 20px 0 10px 10px; font-weight: bold; } /* --- PIED DE PAGE (Optionnel) --- */ .offcanvas-footer { padding: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.2); } /* --- SURCHARGE DE LA TABLE --- */ .table { margin-bottom: 0; color: #e0e0e0 !important; background-color: transparent !important; border-collapse: collapse; } /* --- EN-TÊTE (thead) : On garde la hauteur, on change le look --- */ .table thead th { text-transform: uppercase; background-color: rgba(255, 255, 255, 0.05) !important; /* Le gris/bleu translucide du 1er tableau */ color: rgba(255, 255, 255, 0.6) !important; } /* --- EFFET HOVER (Survol) --- */ /* On ajoute une lueur #00D9FF et une bordure interne sans changer la taille */ .table-hover tbody tr:hover { background-color: rgba(255,255,255,0.07) !important; color: #fff !important; box-shadow: inset 3px 0 0 #FFFFFF; /* Indicateur visuel à gauche */ transition: background-color 0.2s ease; } /* --- ZÉBRURES (Striped) --- */ .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, 0.02) !important; } /* --- COULEURS SPÉCIFIQUES POUR LES TEXTES --- */ /* On s'assure que les noms dans le tableau ressortent bien */ .table tbody tr td:first-child { color: #fff; font-weight: 600; } /* --- ADAPTATION TABLE DARK --- */ .table-dark { --bs-table-bg: transparent; --bs-table-border-color: rgba(255, 255, 255, 0.1); } /* CONTENEUR DU FOOTER */ .ufl-footer { background-color: #000000; /* Bleu nuit profond */ z-index: 1030; } /* BORDURE DORÉE SUPÉRIEURE */ .border-top-ufl { border-top: 1px solid rgba(197, 160, 89, 0.4); box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.3); } /* STYLE DES LIENS (OR & BLANC) */ .ufl-footer-link { color: #0878D1 !important; /* Or UFL */ text-decoration: none; font-weight: 700; text-transform: uppercase; font-size: 0.6rem; letter-spacing: 1px; transition: all 0.3s ease; } .ufl-footer-link:hover { color: #ffffff !important; text-shadow: 0 0 8px rgba(197, 160, 89, 0.6); } .ufl-footer-link i { color: #ffffff; /* Les icônes restent blanches pour le contraste */ } /* TRÈS IMPORTANT : Éviter que le footer ne cache le contenu */ body { padding-bottom: 70px; /* Ajuste selon la hauteur de ton footer */ } /* Le menu "Master" au-dessus de la mêlée */ .navbar.fixed-top, .navbar.sticky-top { z-index: 2000 !important; } .dropdown-menu.show { z-index: 2001 !important; } /* Le footer reste à sa place en bas */ .ufl-footer { z-index: 1000 !important; } /* Conteneur de la barre */ .ufl-winrate-container { display: flex; width: 100%; height: 14px; /* Hauteur de la barre */ background-color: rgba(255, 255, 255, 0.05); border-radius: 6px; overflow: hidden; /* Pour que les segments épousent les bords arrondis */ box-shadow: inset 0 1px 3px rgba(0,0,0,0.5); } /* Style commun aux segments */ .winrate-bar { display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 800; color: white; text-shadow: 1px 1px 2px rgba(0,0,0,0.5); transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1); position: relative; } /* Couleurs UFL Premium */ .winrate-bar.v { background: linear-gradient(to bottom, #2ecc71, #27ae60); border-right: 1px solid rgba(255,255,255,0.1); } .winrate-bar.n { background: linear-gradient(to bottom, #f1c40f, #3CAEFF); border-right: 1px solid rgba(255,255,255,0.1); } .winrate-bar.d { background: linear-gradient(to bottom, #3CAEFF, #0878D1); } /* Petit effet de reflet sur la barre */ .winrate-bar::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 50%; background: rgba(255, 255, 255, 0.1); pointer-events: none; } .winrate-bar span { z-index: 1; } /* --- BADGE UFL STYLE --- */ .badge-ufl { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 14px; padding: 0 8px; border-radius: 4px; /* Coins légèrement arrondis pour le look moderne */ font-size: 0.8rem; font-weight: 800; text-transform: uppercase; color: #ffffff; text-shadow: 1px 1px 1px rgba(0,0,0,0.3); box-shadow: 0 2px 4px rgba(0,0,0,0.3), inset 0 1px 1px rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.1); transition: transform 0.2s ease; } .badge-ufl:hover { transform: scale(1.1); /* Petit effet au survol */ } /* Variantes de couleurs (Gradients UFL) */ .badge-ufl.v { background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%); border-color: rgba(46, 204, 113, 0.4); } .badge-ufl.n { background: linear-gradient(135deg, #f1c40f 0%, #3CAEFF 100%); border-color: rgba(241, 196, 15, 0.4); } .badge-ufl.d { background: linear-gradient(135deg, #3CAEFF 0%, #0878D1 100%); border-color: rgba(231, 76, 60, 0.4); } /* Badge OR pour les infos spéciales */ .badge-ufl.gold { background: linear-gradient(135deg, #3CAEFF 0%, #0878D1 100%); color: #000000; text-shadow: none; border-color: #3CAEFF; } /* ============================================================ SPINNER DE CHARGEMENT UFL PREMIUM (Or & Bleu Sombre) ============================================================ */ /* 1. Conteneur plein écran (Overlay) */ .ufl-loader-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; /* Fond Bleu Sombre UFL semi-transparent pour l'effet d'immersion */ background-color: rgba(2,5,12,0.9); display: flex; flex-direction: column; justify-content: center; align-items: center; /* Assure que le loader est au-dessus de TOUT, y compris le footer sticky */ z-index: 9999; visibility: visible; opacity: 1; transition: opacity 0.5s ease, visibility 0.5s ease; } /* Classe pour masquer le loader proprement via JS */ .ufl-loader-overlay.fade-out { opacity: 0; visibility: hidden; } /* 2. La roue de chargement (The Spinning Wheel) */ .ufl-spinner { width: 60px; height: 60px; border-radius: 50%; position: relative; /* La bordure de base est transparente */ border: 6px solid transparent; /* La partie animée utilise l'Or UFL avec un dégradé */ border-top: 6px solid #3CAEFF; /* Or Clair */ border-right: 6px solid rgba(197, 160, 89, 0.5); /* Or Moyen transparent */ border-bottom: 6px solid rgba(197, 160, 89, 0.2); /* Or Sombre très transparent */ /* Effet de lueur interne (glow) */ box-shadow: 0 0 20px rgba(248, 184, 100, 0.3); /* Définition de l'animation */ animation: ufl-spin 1s cubic-bezier(0.5, 0.1, 0.4, 0.9) infinite; } /* 3. Définition de l'animation Keyframes (Rotation) */ @keyframes ufl-spin { 0% { transform: rotate(0deg); box-shadow: 0 0 20px rgba(248, 184, 100, 0.3); } 50% { box-shadow: 0 0 35px rgba(248, 184, 100, 0.5); /* Pulsation de la lueur */ } 100% { transform: rotate(360deg); box-shadow: 0 0 20px rgba(248, 184, 100, 0.3); } } /* 4. Texte de chargement optionnel */ .ufl-loader-text { margin-top: 20px; color: #0878D1; /* Texte Or UFL */ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, 'Montserrat', sans-serif; /* Ou ta police principale */ font-weight: 700; text-transform: uppercase; font-size: 0.9rem; letter-spacing: 2px; text-shadow: 0 2px 4px rgba(0,0,0,0.5); animation: ufl-text-pulse 1.5s ease-in-out infinite; } /* Animation de pulsation du texte */ @keyframes ufl-text-pulse { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; filter: brightness(1.2); } } /* ===================================================================== THEME ENGINE - MODERNE & CENTRALISE --------------------------------------------------------------------- Pour changer de thème : Pour créer un nouveau thème, il suffit de copier un bloc [data-theme] et de changer les variables ci-dessous. ===================================================================== */ :root, [data-theme="ucl"] { /* Couleurs principales */ --theme-primary: #0878D1; --theme-primary-rgb: 0, 78, 146; --theme-secondary: #FFFFFF; --theme-secondary-rgb: 0, 210, 255; --theme-accent: #3CAEFF; --theme-accent-rgb: 245, 158, 11; /* Fonds */ --theme-bg: #030711; --theme-bg-rgb: 2, 6, 23; --theme-surface: #07111F; --theme-surface-rgb: 15, 23, 42; --theme-surface-2: #07111F; --theme-surface-2-rgb: 17, 24, 39; /* Textes */ --theme-text: #f8fafc; --theme-text-rgb: 248, 250, 252; --theme-muted: #94a3b8; /* Etats */ --theme-success: #22c55e; --theme-warning: #3CAEFF; --theme-danger: #ef4444; --theme-info: #FFFFFF; /* UI */ --theme-border: rgba(var(--theme-text-rgb), .10); --theme-border-strong: rgba(var(--theme-secondary-rgb), .32); --theme-hover: rgba(var(--theme-secondary-rgb), .08); --theme-focus: rgba(var(--theme-secondary-rgb), .25); --theme-radius-sm: 6px; --theme-radius: 12px; --theme-radius-lg: 16px; --theme-shadow-sm: 0 4px 14px rgba(0, 0, 0, .18); --theme-shadow: 0 10px 30px rgba(0, 0, 0, .32); --theme-shadow-lg: 0 18px 50px rgba(0, 0, 0, .42); --theme-gradient: linear-gradient( 135deg, var(--theme-primary) 0%, var(--theme-secondary) 100% ); --theme-gradient-dark: linear-gradient( 135deg, var(--theme-bg) 0%, var(--theme-primary) 100% ); --theme-transition: 180ms ease; } /* --------------------------------------------------------------------- THEMES PREDEFINIS --------------------------------------------------------------------- */ [data-theme="gold"] { --theme-primary: #0878D1; --theme-primary-rgb: 161, 98, 7; --theme-secondary: #3CAEFF; --theme-secondary-rgb: 251, 191, 36; --theme-accent: #78EEFF; --theme-accent-rgb: 253, 230, 138; --theme-bg: #030711; --theme-bg-rgb: 12, 9, 4; --theme-surface: #030711; --theme-surface-rgb: 28, 22, 11; --theme-surface-2: #030711; --theme-surface-2-rgb: 41, 32, 17; --theme-text: #fffaf0; --theme-text-rgb: 255, 250, 240; --theme-muted: #C2B37F; } [data-theme="purple"] { --theme-primary: #00D9FF; --theme-primary-rgb: 109, 40, 217; --theme-secondary: #c084fc; --theme-secondary-rgb: 192, 132, 252; --theme-accent: #f0abfc; --theme-accent-rgb: 240, 171, 252; --theme-bg: #02050C; --theme-bg-rgb: 11, 6, 20; --theme-surface: #07111F; --theme-surface-rgb: 26, 16, 43; --theme-surface-2: #0D1B2D; --theme-surface-2-rgb: 37, 22, 59; --theme-text: #faf5ff; --theme-text-rgb: 250, 245, 255; --theme-muted: #c4b5d7; } [data-theme="emerald"] { --theme-primary: #047857; --theme-primary-rgb: 4, 120, 87; --theme-secondary: #34d399; --theme-secondary-rgb: 52, 211, 153; --theme-accent: #a7f3d0; --theme-accent-rgb: 167, 243, 208; --theme-bg: #03120d; --theme-bg-rgb: 3, 18, 13; --theme-surface: #0b241a; --theme-surface-rgb: 11, 36, 26; --theme-surface-2: #123326; --theme-surface-2-rgb: 18, 51, 38; --theme-text: #ecfdf5; --theme-text-rgb: 236, 253, 245; --theme-muted: #9fcbbb; } [data-theme="crimson"] { --theme-primary: #9f1239; --theme-primary-rgb: 159, 18, 57; --theme-secondary: #fb7185; --theme-secondary-rgb: 251, 113, 133; --theme-accent: #fda4af; --theme-accent-rgb: 253, 164, 175; --theme-bg: #160509; --theme-bg-rgb: 22, 5, 9; --theme-surface: #2a0d15; --theme-surface-rgb: 42, 13, 21; --theme-surface-2: #3b111d; --theme-surface-2-rgb: 59, 17, 29; --theme-text: #fff1f2; --theme-text-rgb: 255, 241, 242; --theme-muted: #d9a2ab; } [data-theme="light"] { --theme-primary: #00D9FF; --theme-primary-rgb: 29, 78, 216; --theme-secondary: #00D9FF; --theme-secondary-rgb: 2, 132, 199; --theme-accent: #3CAEFF; --theme-accent-rgb: 217, 119, 6; --theme-bg: #f8fafc; --theme-bg-rgb: 248, 250, 252; --theme-surface: #ffffff; --theme-surface-rgb: 255, 255, 255; --theme-surface-2: #f1f5f9; --theme-surface-2-rgb: 241, 245, 249; --theme-text: #07111F; --theme-text-rgb: 15, 23, 42; --theme-muted: #034E8C; --theme-border: rgba(5,11,20,.12); --theme-shadow-sm: 0 4px 14px rgba(5,11,20,.08); --theme-shadow: 0 10px 30px rgba(5,11,20,.12); --theme-shadow-lg: 0 18px 50px rgba(5,11,20,.16); } /* --------------------------------------------------------------------- ALIAS DE COMPATIBILITE Tes anciennes classes peuvent continuer à utiliser --ucl-* / --bs-*. --------------------------------------------------------------------- */ :root, [data-theme] { --ucl-blue: var(--theme-primary); --ucl-dark: var(--theme-bg); --ucl-cyan: var(--theme-secondary); --ucl-gold: var(--theme-accent); --ucl-gradient: var(--theme-gradient); --bs-primary: var(--theme-primary); --bs-secondary: var(--theme-secondary); --bs-dark: var(--theme-bg); --bs-body-color: var(--theme-text); --bs-body-bg: var(--theme-bg); --bs-border-color: var(--theme-border); --bs-table-bg: transparent; --bs-table-color: var(--theme-text); --bs-table-striped-bg: rgba(var(--theme-text-rgb), .025); --bs-table-hover-bg: var(--theme-hover); } /* ===================================================================== BASE VISUELLE ===================================================================== */ html { color-scheme: dark; } [data-theme="light"] { color-scheme: light; } body { background: var(--theme-bg) !important; color: var(--theme-text) !important; transition: background-color var(--theme-transition), color var(--theme-transition); } body, button, input, select, textarea { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } h1, h2, h3, h4, h5, h6 { color: var(--theme-text) !important; } a { color: var(--theme-secondary); transition: color var(--theme-transition), opacity var(--theme-transition); } a:hover { color: var(--theme-accent); } ::selection { background: rgba(var(--theme-secondary-rgb), .28); color: var(--theme-text); } /* Focus clavier moderne et accessible */ :where( a, button, input, select, textarea, [tabindex] ):focus-visible { outline: 2px solid var(--theme-secondary); outline-offset: 2px; } /* ===================================================================== UTILITAIRES THEME ===================================================================== */ .text-primary { color: var(--theme-primary) !important; } .text-secondary { color: var(--theme-secondary) !important; } .text-muted { color: var(--theme-muted) !important; } .bg-primary { background: var(--theme-gradient) !important; color: #fff !important; } .bg-secondary { background: var(--theme-secondary) !important; } .bg-dark { background: var(--theme-bg) !important; } .bg-light { background: var(--theme-surface) !important; color: var(--theme-text) !important; } .border-primary { border-color: var(--theme-primary) !important; } .border-secondary { border-color: var(--theme-secondary) !important; } /* ===================================================================== NAVBAR / MENU ===================================================================== */ .navbar, .navbar-collapse, .sidebar, .sidebar-wrapper, nav.navbar { background: rgba(var(--theme-bg-rgb), .96) !important; color: var(--theme-text); border-color: var(--theme-border) !important; } .navbar { box-shadow: 0 8px 28px rgba(0, 0, 0, .18); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .navbar.fixed-top, .navbar.sticky-top { z-index: 2000 !important; } .navbar-brand, .navbar-brand span { color: var(--theme-text) !important; font-weight: 800; } .navbar .nav-link { color: var(--theme-text) !important; border-radius: var(--theme-radius-sm); transition: color var(--theme-transition), background-color var(--theme-transition), transform var(--theme-transition); } .navbar .nav-link:hover, .navbar .nav-link:focus, .navbar .nav-item:hover > .nav-link { color: var(--theme-secondary) !important; background: var(--theme-hover) !important; } .navbar .nav-link.active, .navbar .navbar-nav .nav-link.active { color: var(--theme-secondary) !important; background: rgba(var(--theme-secondary-rgb), .10) !important; box-shadow: inset 3px 0 0 var(--theme-secondary); } /* Dropdown */ .dropdown-menu { background: var(--theme-surface) !important; color: var(--theme-text) !important; border: 1px solid var(--theme-border) !important; border-radius: var(--theme-radius) !important; box-shadow: var(--theme-shadow) !important; padding: .45rem; } .dropdown-menu.show { z-index: 2001 !important; } .dropdown-item { color: var(--theme-text) !important; background: transparent !important; border-radius: var(--theme-radius-sm); transition: color var(--theme-transition), background-color var(--theme-transition); } .dropdown-item:hover, .dropdown-item:focus, .dropdown-item.active { color: #fff !important; background: var(--theme-gradient) !important; } /* ===================================================================== BOUTONS ===================================================================== */ .btn { border-radius: var(--theme-radius-sm); font-weight: 700; transition: transform var(--theme-transition), filter var(--theme-transition), box-shadow var(--theme-transition), background-color var(--theme-transition); } .btn:hover { transform: translateY(-1px); } .btn-primary, .btn-success { color: #fff !important; background: var(--theme-gradient) !important; border-color: transparent !important; box-shadow: 0 5px 16px rgba(var(--theme-primary-rgb), .28); } .btn-primary:hover, .btn-success:hover { color: #fff !important; filter: brightness(1.08); } .btn-secondary { color: var(--theme-text) !important; background: var(--theme-surface) !important; border: 1px solid var(--theme-border-strong) !important; } .btn-secondary:hover { color: #fff !important; background: var(--theme-gradient) !important; } .btn-outline-primary { color: var(--theme-secondary) !important; border-color: var(--theme-secondary) !important; } .btn-outline-primary:hover { color: #fff !important; background: var(--theme-gradient) !important; } /* ===================================================================== CARDS / BLOCS ===================================================================== */ .card, .general-card, .content, .match-card, .scoreboard { color: var(--theme-text); background: var(--theme-surface); border: 1px solid var(--theme-border); border-radius: var(--theme-radius); box-shadow: var(--theme-shadow-sm); } .card, .general-card, .match-card { transition: transform var(--theme-transition), border-color var(--theme-transition), box-shadow var(--theme-transition); } .card:hover, .general-card:hover, .match-card:hover { border-color: var(--theme-border-strong); box-shadow: var(--theme-shadow); } .general-card { border-top: 3px solid var(--theme-secondary); } .content { height: 100%; padding: 12px 15px; } .content h5 { color: var(--theme-text) !important; } .content h5::after { background: var(--theme-secondary); } .colour-1, .colour-2, .colour-3, .colour-4, .colour-5, .colour-6 { background: linear-gradient( 135deg, var(--theme-surface-2) 0%, var(--theme-surface) 100% ); border-top: 3px solid var(--theme-accent); } /* ===================================================================== TABLEAUX ===================================================================== */ .table, table.dataTable { color: var(--theme-text) !important; background: transparent !important; } .table > :not(caption) > * > *, table.dataTable > :not(caption) > * > * { color: inherit; border-color: var(--theme-border) !important; } .table thead th, .content table th { color: var(--theme-muted) !important; background: rgba(var(--theme-text-rgb), .045) !important; border-bottom-color: var(--theme-border) !important; } .table-striped > tbody > tr:nth-of-type(odd) > *, .table.dataTable.table-striped > tbody > tr:nth-of-type(odd) > * { background: rgba(var(--theme-text-rgb), .025) !important; } .table-hover > tbody > tr:hover > *, .table.dataTable.table-hover > tbody > tr:hover > * { color: var(--theme-text) !important; background: var(--theme-hover) !important; box-shadow: inset 3px 0 0 var(--theme-secondary) !important; } .content table td { color: var(--theme-text) !important; } /* Colonnes sticky : fond opaque, donc pas de superposition de texte */ .tableClassement th:nth-child(-n+4), .tableClassement td:nth-child(-n+4), .tableManagers td:first-child { background: var(--theme-surface) !important; } /* DataTables */ div.dt-container, div.dataTables_wrapper { color: var(--theme-text); } div.dt-container input, div.dt-container select, div.dataTables_wrapper input, div.dataTables_wrapper select { color: var(--theme-text); background: var(--theme-surface); border: 1px solid var(--theme-border); border-radius: var(--theme-radius-sm); } .page-link { color: var(--theme-text); background: var(--theme-surface); border-color: var(--theme-border); } .page-link:hover, .page-item.active .page-link { color: #fff; background: var(--theme-gradient); border-color: transparent; } /* ===================================================================== FORMULAIRES ===================================================================== */ .form-control, .form-select, .input-group-text { color: var(--theme-text); background-color: var(--theme-surface); border-color: var(--theme-border); border-radius: var(--theme-radius-sm); } .form-control::placeholder { color: var(--theme-muted); } .form-control:focus, .form-select:focus { color: var(--theme-text); background-color: var(--theme-surface); border-color: var(--theme-secondary); box-shadow: 0 0 0 .2rem var(--theme-focus); } .form-check-input:checked { background-color: var(--theme-primary); border-color: var(--theme-primary); } /* ===================================================================== ACCORDION ===================================================================== */ .accordion { --bs-accordion-bg: var(--theme-surface); --bs-accordion-color: var(--theme-text); --bs-accordion-border-color: var(--theme-border); } .accordion-item { color: var(--theme-text); background: transparent; border-color: var(--theme-border) !important; } .accordion-button { color: var(--theme-text) !important; background: var(--theme-gradient-dark) !important; box-shadow: none !important; } .accordion-button:not(.collapsed) { color: #fff !important; background: var(--theme-gradient) !important; } .accordion-body { color: var(--theme-text); background: rgba(var(--theme-text-rgb), .025); } /* ===================================================================== MODALES / OFFCANVAS ===================================================================== */ .modal-content { color: var(--theme-text); background: var(--theme-surface); border: 1px solid var(--theme-border); border-radius: var(--theme-radius-lg); box-shadow: var(--theme-shadow-lg); } .modal-header, .modal-footer { border-color: var(--theme-border); } .offcanvas { color: var(--theme-text) !important; background: linear-gradient( 180deg, var(--theme-surface) 0%, var(--theme-bg) 100% ) !important; border-color: var(--theme-border-strong) !important; } .offcanvas-header { background: var(--theme-gradient-dark); } .offcanvas-title { color: var(--theme-secondary); } .offcanvas-body .nav-link:hover { color: var(--theme-secondary) !important; background: var(--theme-hover); } /* ===================================================================== BADGES / ETATS ===================================================================== */ .badge { border-radius: var(--theme-radius-sm); border: 1px solid rgba(255, 255, 255, .10); box-shadow: 0 3px 8px rgba(0, 0, 0, .18); } .badge-result { color: #fff; background: rgba(255, 255, 255, .15); } .resultForme_V { background: var(--theme-success); } .resultForme_N { color: #07111F; background: var(--theme-warning); } .resultForme_D { background: var(--theme-danger); } .badge-ufl.gold { color: #111 !important; background: linear-gradient( 135deg, var(--theme-accent), var(--theme-secondary) ) !important; border-color: var(--theme-accent); } /* ===================================================================== MATCH CARDS ===================================================================== */ .match-card { padding: 10px; } .match-card:hover { transform: translateY(-4px); } .match-card.LM { background: var(--theme-gradient); } .match-header { margin-bottom: 15px; text-align: right; } .match-body { display: flex; align-items: center; justify-content: space-between; } .team { width: 40%; text-align: center; } .team-name { margin-bottom: 8px; font-size: 14px; } .score { font-size: 12px; font-weight: 800; } .vs { color: rgba(var(--theme-text-rgb), .72); font-size: 10px; font-weight: 800; } /* ===================================================================== COMMENTAIRES / LIKES ===================================================================== */ .card-comment { color: var(--theme-text); background: var(--theme-surface); border: 1px solid var(--theme-border); border-radius: var(--theme-radius); padding: 20px; box-shadow: var(--theme-shadow-sm); } .meta { margin-bottom: 10px; color: var(--theme-text); font-weight: 700; } .contenu { margin-bottom: 10px; color: var(--theme-text); font-size: 14px; line-height: 1.6; } .date { color: var(--theme-muted); font-size: 10px; text-align: right; } .read-more-btn, .like-btn { border: 0; background: transparent; cursor: pointer; } .read-more-btn { padding: 0; color: var(--theme-secondary); font-size: 13px; } .read-more-btn:hover { color: var(--theme-accent); } .like-btn { display: inline-flex; align-items: center; gap: 6px; color: var(--theme-text); font-size: 14px; } .heart { color: var(--theme-danger); font-size: 12px; transition: transform var(--theme-transition); } .like-btn.liked .heart { transform: scale(1.25); } .like-count { color: var(--theme-text); } /* ===================================================================== SWITCH BUTTONS ===================================================================== */ .switch-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 15px; } .switch-buttons button { padding: 8px 14px; color: var(--theme-text); background: var(--theme-surface); border: 1px solid var(--theme-border); border-radius: var(--theme-radius-sm); cursor: pointer; transition: background-color var(--theme-transition), border-color var(--theme-transition), color var(--theme-transition); } .switch-buttons button:hover { border-color: var(--theme-secondary); } .switch-buttons button.active { color: #fff; background: var(--theme-gradient); border-color: transparent; } .top-badge { margin-bottom: 6px; font-weight: 700; } /* ===================================================================== SWIPER ===================================================================== */ .swiper { width: 95%; padding: 0 0 40px; } .swiper-wrapper { align-items: flex-start; } .swiper-controls { display: flex; align-items: center; justify-content: center; gap: 15px; margin-top: 15px; } .swiper-pagination { position: relative; width: auto; } .swiper-pagination-bullet { height: 4px; background: rgba(var(--theme-text-rgb), .25); border-radius: 999px; opacity: 1; } .swiper-pagination-bullet-active { background: var(--theme-secondary); } .swiper-button-prev, .swiper-button-next { position: relative; top: auto; right: auto; left: auto; display: flex; width: 32px; height: 32px; margin: 0; align-items: center; justify-content: center; color: #fff; background: var(--theme-gradient); border-radius: 50%; box-shadow: var(--theme-shadow-sm); } .swiper-button-prev::after, .swiper-button-next::after { color: #fff; font-size: 14px; } /* ===================================================================== FOOTER / RETOUR HAUT ===================================================================== */ .ufl-footer, .footer { color: var(--theme-text); background: var(--theme-bg); border-top: 1px solid var(--theme-border); } .ufl-footer-link, .footer a { color: var(--theme-secondary) !important; } .ufl-footer-link:hover, .footer a:hover { color: var(--theme-accent) !important; } .back-to-top { color: #fff; background: var(--theme-gradient); box-shadow: var(--theme-shadow); } /* ===================================================================== LOADER ===================================================================== */ .ufl-loader-overlay { background: rgba(var(--theme-bg-rgb), .92); } .ufl-spinner { border-color: transparent; border-top-color: var(--theme-secondary); border-right-color: rgba(var(--theme-secondary-rgb), .50); border-bottom-color: rgba(var(--theme-secondary-rgb), .20); box-shadow: 0 0 20px rgba(var(--theme-secondary-rgb), .30); } .ufl-loader-text { color: var(--theme-secondary); } /* ===================================================================== RESPONSIVE ===================================================================== */ @media (max-width: 768px) { .content { padding: 8px 10px; } .content h5 { margin-bottom: 8px; font-size: .78rem; } .content table thead, .content table tr:first-child:not(:only-child) th { display: none !important; } .content table tbody tr, .content table tr { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 4px !important; padding: 6px 8px !important; background: rgba(var(--theme-text-rgb), .035) !important; border: 1px solid var(--theme-border) !important; border-radius: var(--theme-radius-sm) !important; } .content table td { padding: 1px 3px !important; border: 0 !important; } .content table td:first-child, .content table td:nth-child(3) { flex: 1 1 55% !important; color: var(--theme-text) !important; font-size: .75rem !important; font-weight: 600 !important; } .content table td:last-child { flex: 0 0 auto !important; color: var(--theme-secondary) !important; font-size: .75rem !important; font-weight: 700 !important; text-align: right !important; } .content table td:nth-child(2) { flex: 0 0 auto !important; padding: 0 4px !important; background: rgba(var(--theme-text-rgb), .08) !important; border-radius: 3px !important; font-size: .62rem !important; } .content table .btn, .content table .btn-sm { padding: 1px 5px !important; font-size: .6rem !important; } .colour-1 table tr { padding: 3px 0 !important; background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--theme-border) !important; border-radius: 0 !important; } .colour-1 table td { font-size: .72rem !important; } } /* ===================================================================== ACCESSIBILITE / MOUVEMENTS ===================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ===================================================================== PRO UI LAYER Lisibilité, menus, Swiper, tables tactiques et saisie de match --------------------------------------------------------------------- Cette couche doit rester A LA FIN du fichier. Elle utilise uniquement les variables --theme-* afin de rester compatible avec tous les thèmes définis plus haut. ===================================================================== */ /* --------------------------------------------------------------------- VARIABLES UI COMPLEMENTAIRES --------------------------------------------------------------------- */ :root, [data-theme] { --ui-bg-elevated: color-mix(in srgb, var(--theme-surface) 88%, white 12%); --ui-bg-subtle: color-mix(in srgb, var(--theme-surface) 94%, var(--theme-text) 6%); --ui-border: color-mix(in srgb, var(--theme-text) 14%, transparent); --ui-border-hover: color-mix(in srgb, var(--theme-secondary) 52%, transparent); /* Texte à utiliser SUR une couleur claire / accent */ --ui-on-accent: #030711; /* Accent volontairement plus sombre pour les composants actifs */ --ui-accent-strong: color-mix(in srgb, var(--theme-primary) 82%, #000 18%); --ui-accent-soft: color-mix(in srgb, var(--theme-primary) 22%, transparent); --ui-radius-xs: 5px; --ui-radius-sm: 8px; --ui-radius-md: 12px; --ui-radius-lg: 16px; --ui-shadow-soft: 0 6px 18px rgba(0, 0, 0, .20); --ui-shadow-float: 0 14px 36px rgba(0, 0, 0, .30); } [data-theme="light"] { --ui-bg-elevated: #ffffff; --ui-bg-subtle: #f8fafc; --ui-border: rgba(5,11,20,.12); --ui-border-hover: rgba(var(--theme-primary-rgb), .42); --ui-on-accent: #ffffff; --ui-shadow-soft: 0 6px 18px rgba(5,11,20,.08); --ui-shadow-float: 0 14px 36px rgba(5,11,20,.14); } /* --------------------------------------------------------------------- TYPOGRAPHIE / CONTRASTE GLOBAL --------------------------------------------------------------------- */ body { font-size: 0.95rem; letter-spacing: 0.005em; } small, .small, .text-muted { color: var(--theme-muted) !important; } label, .form-label { color: color-mix(in srgb, var(--theme-text) 92%, transparent); font-weight: 650; } /* --------------------------------------------------------------------- NAVIGATION PRO Pas de texte blanc posé sur du bleu clair. --------------------------------------------------------------------- */ .navbar { border-bottom: 1px solid var(--ui-border) !important; } .navbar .nav-link { position: relative; color: color-mix(in srgb, var(--theme-text) 88%, transparent) !important; font-weight: 650; letter-spacing: .01em; } .navbar .nav-link:hover, .navbar .nav-link:focus { color: var(--theme-text) !important; background: rgba(var(--theme-text-rgb), .055) !important; } .navbar .nav-link.active, .navbar .navbar-nav .nav-link.active { color: var(--theme-text) !important; background: linear-gradient( 90deg, rgba(var(--theme-secondary-rgb), .16), rgba(var(--theme-secondary-rgb), .04) ) !important; box-shadow: inset 3px 0 0 var(--theme-secondary); } /* Dropdown sombre, texte clair, sélection sobre */ .dropdown-menu { min-width: 13rem; padding: .5rem !important; background: color-mix(in srgb, var(--theme-surface) 97%, #000 3%) !important; border: 1px solid var(--ui-border) !important; border-radius: var(--ui-radius-md) !important; box-shadow: var(--ui-shadow-float) !important; } .dropdown-item { margin: 2px 0; padding: .62rem .78rem !important; color: color-mix(in srgb, var(--theme-text) 92%, transparent) !important; background: transparent !important; border-radius: var(--ui-radius-sm) !important; font-size: .9rem; font-weight: 600 !important; } .dropdown-item:hover, .dropdown-item:focus { color: var(--theme-text) !important; background: rgba(var(--theme-secondary-rgb), .12) !important; } .dropdown-item.active, .dropdown-item:active { color: var(--ui-on-accent) !important; background: color-mix( in srgb, var(--theme-secondary) 74%, white 26% ) !important; box-shadow: inset 0 0 0 1px rgba(var(--theme-secondary-rgb), .28); } .dropdown-divider { border-color: var(--ui-border) !important; } /* Tabs : actif foncé, pas #00D9FF vif + texte blanc */ .nav-tabs { gap: .35rem; border-bottom-color: var(--ui-border) !important; } .nav-tabs .nav-link { color: var(--theme-muted) !important; background: transparent !important; border: 1px solid transparent !important; border-radius: var(--ui-radius-sm) var(--ui-radius-sm) 0 0 !important; } .nav-tabs .nav-link:hover { color: var(--theme-text) !important; background: rgba(var(--theme-text-rgb), .04) !important; } .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: var(--theme-text) !important; background: var(--ui-accent-strong) !important; border-color: var(--ui-border-hover) !important; } /* --------------------------------------------------------------------- BOUTONS --------------------------------------------------------------------- */ .btn { min-height: 36px; border-radius: var(--ui-radius-sm) !important; font-weight: 700; letter-spacing: .01em; } .btn-primary { color: #fff !important; background: linear-gradient( 135deg, var(--theme-primary), var(--ui-accent-strong) ) !important; border: 1px solid color-mix(in srgb, var(--theme-secondary) 40%, transparent) !important; } .btn-primary:hover { filter: brightness(1.08); box-shadow: 0 8px 20px rgba(var(--theme-primary-rgb), .24); } .btn-secondary { color: var(--theme-text) !important; background: var(--ui-bg-elevated) !important; border: 1px solid var(--ui-border) !important; } .btn-secondary:hover { color: var(--theme-text) !important; background: rgba(var(--theme-secondary-rgb), .10) !important; border-color: var(--ui-border-hover) !important; } /* --------------------------------------------------------------------- FORMULAIRES Très important pour la page de saisie des matchs. --------------------------------------------------------------------- */ .form-control, .form-select, textarea, input[type="text"], input[type="number"], input[type="url"], input[type="date"], input[type="datetime-local"], input[type="time"] { color: var(--theme-text) !important; background: color-mix( in srgb, var(--theme-surface) 92%, var(--theme-text) 8% ) !important; border: 1px solid var(--ui-border) !important; border-radius: var(--ui-radius-sm) !important; min-height: 38px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025); transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease; } textarea { min-height: 94px; resize: vertical; } .form-control:hover, .form-select:hover, textarea:hover { border-color: color-mix( in srgb, var(--theme-secondary) 28%, var(--ui-border) ) !important; } .form-control:focus, .form-select:focus, textarea:focus, input:focus { color: var(--theme-text) !important; background: color-mix( in srgb, var(--theme-surface) 86%, var(--theme-text) 14% ) !important; border-color: var(--theme-secondary) !important; box-shadow: 0 0 0 3px rgba(var(--theme-secondary-rgb), .14) !important; } .form-control::placeholder, textarea::placeholder, input::placeholder { color: color-mix( in srgb, var(--theme-muted) 78%, transparent ) !important; opacity: 1; } /* Autofill Chrome : empêche le gros fond blanc/bleu clair */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill, select:-webkit-autofill { -webkit-text-fill-color: var(--theme-text) !important; -webkit-box-shadow: 0 0 0 1000px var(--theme-surface) inset !important; caret-color: var(--theme-text); } /* --------------------------------------------------------------------- PAGE SAISIE MATCH Sélecteurs volontairement larges pour fonctionner avec l'existant. --------------------------------------------------------------------- */ .match-form, .saisie-match, .form-match, .match-entry, .match-edit { padding: clamp(12px, 2vw, 24px); background: color-mix( in srgb, var(--theme-bg) 84%, var(--theme-surface) 16% ); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); box-shadow: var(--ui-shadow-soft); } /* Tables utilisées comme layout de formulaire */ .match-form table, .saisie-match table, .form-match table, .match-entry table, .match-edit table, .tableMatch, .tableSaisieMatch { width: 100%; border-collapse: separate !important; border-spacing: 0; overflow: hidden; background: color-mix( in srgb, var(--theme-bg) 92%, var(--theme-surface) 8% ) !important; border: 1px solid var(--ui-border) !important; border-radius: var(--ui-radius-md); } .match-form td, .saisie-match td, .form-match td, .match-entry td, .match-edit td, .tableMatch td, .tableSaisieMatch td { padding: .55rem .65rem !important; vertical-align: middle; color: var(--theme-text) !important; border-bottom: 1px solid rgba(var(--theme-text-rgb), .07) !important; } .match-form tr:last-child td, .saisie-match tr:last-child td, .form-match tr:last-child td, .match-entry tr:last-child td, .match-edit tr:last-child td, .tableMatch tr:last-child td, .tableSaisieMatch tr:last-child td { border-bottom: 0 !important; } /* Colonne centrale des libellés de statistiques */ .match-form td:nth-child(2), .saisie-match td:nth-child(2), .form-match td:nth-child(2), .match-entry td:nth-child(2), .match-edit td:nth-child(2), .tableMatch td:nth-child(2), .tableSaisieMatch td:nth-child(2) { color: color-mix( in srgb, var(--theme-text) 76%, var(--theme-muted) 24% ) !important; font-size: .78rem; font-weight: 700; text-align: center; white-space: nowrap; } /* Score et données numériques plus visibles */ .match-form input[type="number"], .saisie-match input[type="number"], .form-match input[type="number"], .tableMatch input[type="number"], .tableSaisieMatch input[type="number"] { font-variant-numeric: tabular-nums; font-weight: 800; text-align: center; } /* --------------------------------------------------------------------- BADGES : lisibilité renforcée --------------------------------------------------------------------- */ .badge, .badge-ufl, .badge-result, [class*="badge-"] { text-shadow: none !important; } .badge { display: inline-flex; align-items: center; justify-content: center; min-height: 24px; padding: .36em .66em !important; border: 1px solid rgba(255, 255, 255, .12) !important; border-radius: 999px !important; font-size: .72rem; font-weight: 800 !important; letter-spacing: .025em; line-height: 1; } /* Primaire : bleu foncé, texte blanc */ .badge.bg-primary, .bg-primary.badge { color: #fff !important; background: linear-gradient( 135deg, var(--theme-primary), var(--ui-accent-strong) ) !important; } /* Info/#00D9FF : texte sombre pour CONTRASTE */ .badge.bg-info, .bg-info.badge { color: var(--ui-on-accent) !important; background: color-mix( in srgb, var(--theme-secondary) 78%, white 22% ) !important; } /* Warning : sombre sur jaune/or */ .badge.bg-warning, .bg-warning.badge { color: #171717 !important; text-shadow: none !important; } /* Success */ .badge.bg-success, .bg-success.badge { color: #06291a !important; text-shadow: none !important; } /* Danger */ .badge.bg-danger, .bg-danger.badge { color: #fff !important; } /* Badge résultat */ .badge-result { min-width: 78px; color: var(--theme-text) !important; background: rgba(var(--theme-text-rgb), .08) !important; border: 1px solid var(--ui-border) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); } /* Forme V/N/D */ .badge-ufl { min-width: 34px; min-height: 22px; height: auto !important; padding: 4px 8px !important; border-radius: 999px !important; } .badge-ufl.v { color: #052e16 !important; background: #4ade80 !important; } .badge-ufl.n { color: #07111F !important; background: #3CAEFF !important; } .badge-ufl.d { color: #fff !important; background: #dc2626 !important; } .badge-ufl.gold { color: #030711 !important; background: linear-gradient( 135deg, #78EEFF, #3CAEFF ) !important; } /* --------------------------------------------------------------------- SWIPER - BOUTONS PLUS PRO --------------------------------------------------------------------- */ .swiper-controls { gap: 10px; margin-top: 18px; } .swiper-button-prev, .swiper-button-next { position: relative !important; top: auto !important; right: auto !important; left: auto !important; width: 40px !important; height: 40px !important; margin: 0 !important; color: var(--theme-text) !important; background: color-mix( in srgb, var(--theme-surface) 92%, var(--theme-text) 8% ) !important; border: 1px solid var(--ui-border) !important; border-radius: 10px !important; box-shadow: 0 5px 14px rgba(0, 0, 0, .20) !important; transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease !important; } .swiper-button-prev:hover, .swiper-button-next:hover { transform: translateY(-2px); color: var(--theme-text) !important; background: rgba(var(--theme-secondary-rgb), .12) !important; border-color: var(--ui-border-hover) !important; box-shadow: 0 9px 20px rgba(0, 0, 0, .28) !important; } .swiper-button-prev:active, .swiper-button-next:active { transform: translateY(0) scale(.96); } .swiper-button-prev::after, .swiper-button-next::after { color: currentColor !important; font-size: 14px !important; font-weight: 900 !important; } .swiper-button-disabled { opacity: .35 !important; cursor: not-allowed !important; } .swiper-pagination { display: flex; align-items: center; gap: 5px; } .swiper-pagination-bullet { width: 18px !important; height: 4px !important; margin: 0 !important; background: rgba(var(--theme-text-rgb), .18) !important; border-radius: 999px !important; opacity: 1 !important; transition: width 180ms ease, background-color 180ms ease !important; } .swiper-pagination-bullet-active { width: 34px !important; background: var(--theme-secondary) !important; } /* --------------------------------------------------------------------- TABLE TACTIQUE Aspect dashboard / scouting professionnel. --------------------------------------------------------------------- */ .tableTactique { --tactique-cell-bg: color-mix( in srgb, var(--theme-surface) 95%, var(--theme-text) 5% ); width: 100%; color: var(--theme-text) !important; background: transparent !important; border-collapse: separate !important; border-spacing: 0 6px !important; } .tableTactique thead th { padding: .7rem .65rem !important; color: color-mix( in srgb, var(--theme-muted) 90%, var(--theme-text) 10% ) !important; background: transparent !important; border: 0 !important; font-size: .69rem !important; font-weight: 800 !important; letter-spacing: .055em; text-transform: uppercase; } .tableTactique tbody tr { transition: transform 150ms ease, filter 150ms ease; } .tableTactique tbody tr:hover { transform: translateY(-1px); } .tableTactique tbody td { padding: .68rem .7rem !important; color: var(--theme-text) !important; background: var(--tactique-cell-bg) !important; border-top: 1px solid var(--ui-border) !important; border-bottom: 1px solid var(--ui-border) !important; font-size: .82rem; vertical-align: middle; } .tableTactique tbody td:first-child { border-left: 1px solid var(--ui-border) !important; border-radius: var(--ui-radius-sm) 0 0 var(--ui-radius-sm); } .tableTactique tbody td:last-child { border-right: 1px solid var(--ui-border) !important; border-radius: 0 var(--ui-radius-sm) var(--ui-radius-sm) 0; } .tableTactique tbody tr:hover td { background: color-mix( in srgb, var(--theme-surface) 88%, var(--theme-secondary) 12% ) !important; border-color: color-mix( in srgb, var(--theme-secondary) 28%, transparent ) !important; } /* joueur / intitulé principal */ .tableTactique tbody td:first-child { font-weight: 750; } /* Valeurs numériques */ .tableTactique td[data-value], .tableTactique .value, .tableTactique .stat, .tableTactique td:last-child { font-variant-numeric: tabular-nums; } /* Images joueurs/clubs dans la tactique */ .tableTactique img { max-width: 34px; max-height: 34px; object-fit: contain; } /* Inputs intégrés à une table tactique */ .tableTactique .form-control, .tableTactique .form-select, .tableTactique input, .tableTactique select { min-height: 32px; padding: .28rem .5rem; font-size: .78rem; } /* --------------------------------------------------------------------- CARDS / COMMENTAIRES --------------------------------------------------------------------- */ .card, .general-card, .card-comment, .match-card { border-color: var(--ui-border) !important; } .card-comment { color: var(--theme-text) !important; background: color-mix( in srgb, var(--theme-surface) 96%, var(--theme-text) 4% ) !important; } .read-more-btn { font-weight: 750; } .like-btn { padding: 4px 0; } .heart { font-size: 14px; } /* --------------------------------------------------------------------- TABLEAUX CLASSIQUES --------------------------------------------------------------------- */ .table thead th { color: color-mix( in srgb, var(--theme-muted) 92%, var(--theme-text) 8% ) !important; background: rgba(var(--theme-text-rgb), .035) !important; border-bottom: 1px solid var(--ui-border) !important; } .table > tbody > tr > td { border-bottom-color: rgba(var(--theme-text-rgb), .055) !important; } .table-hover > tbody > tr:hover > * { background: rgba(var(--theme-secondary-rgb), .055) !important; box-shadow: none !important; } /* --------------------------------------------------------------------- RESPONSIVE --------------------------------------------------------------------- */ @media (max-width: 767.98px) { .dropdown-menu { border-radius: var(--ui-radius-sm) !important; } .swiper-button-prev, .swiper-button-next { width: 36px !important; height: 36px !important; } .tableTactique { border-spacing: 0 4px !important; } .tableTactique thead { display: none; } .tableTactique tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin-bottom: 8px; background: var(--tactique-cell-bg); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); overflow: hidden; } .tableTactique tbody td, .tableTactique tbody td:first-child, .tableTactique tbody td:last-child { padding: .5rem .6rem !important; background: transparent !important; border: 0 !important; border-bottom: 1px solid rgba(var(--theme-text-rgb), .045) !important; border-radius: 0 !important; } .tableTactique tbody td:first-child { grid-column: 1 / -1; } .match-form td:nth-child(2), .saisie-match td:nth-child(2), .form-match td:nth-child(2), .tableMatch td:nth-child(2), .tableSaisieMatch td:nth-child(2) { white-space: normal; } } /* ===================================================================== FINAL UI OVERRIDES - VERSION PRO ===================================================================== IMPORTANT : laisser cette section TOUT A LA FIN du fichier. Elle neutralise les anciens fonds Bootstrap/DataTables qui peuvent encore prendre le dessus. ===================================================================== */ /* ===================================================================== 1. CLASSEMENTS : NOIR / GRIS, JAMAIS BLEU ===================================================================== */ :root, [data-theme] { --ranking-bg: #02050C; --ranking-row: #02050C; --ranking-row-alt: #303030; --ranking-head: #07111F; --ranking-border: rgba(255,255,255,.07); --ranking-text: #f8fafc; --ranking-muted: #aab4c4; } /* Neutralise les anciennes variables Bootstrap/DataTables */ .tableClassement, .tableManagers, .tableClassement.table, .tableManagers.table, table.dataTable.tableClassement, table.dataTable.tableManagers { --bs-table-bg: transparent !important; --bs-table-striped-bg: transparent !important; --bs-table-accent-bg: transparent !important; --bs-table-hover-bg: transparent !important; color: var(--ranking-text) !important; background: var(--ranking-bg) !important; border-collapse: separate !important; border-spacing: 0 !important; } /* Toutes les cellules : suppression des overlays DataTables */ .tableClassement > :not(caption) > * > *, .tableManagers > :not(caption) > * > *, table.dataTable.tableClassement > :not(caption) > * > *, table.dataTable.tableManagers > :not(caption) > * > * { color: var(--ranking-text) !important; background-image: none !important; box-shadow: none !important; } /* Header */ .tableClassement thead th, .tableManagers thead th, table.dataTable.tableClassement thead th, table.dataTable.tableManagers thead th { background: var(--ranking-head) !important; color: var(--ranking-muted) !important; border-top: 1px solid var(--ranking-border) !important; border-bottom: 1px solid var(--ranking-border) !important; font-size: .72rem !important; font-weight: 800 !important; letter-spacing: .04em; text-transform: uppercase; } /* Ligne sombre */ .tableClassement tbody tr:nth-child(odd) > *, .tableManagers tbody tr:nth-child(odd) > *, table.dataTable.tableClassement tbody tr:nth-child(odd) > *, table.dataTable.tableManagers tbody tr:nth-child(odd) > * { background: var(--ranking-row) !important; box-shadow: none !important; } /* Ligne grise */ .tableClassement tbody tr:nth-child(even) > *, .tableManagers tbody tr:nth-child(even) > *, table.dataTable.tableClassement tbody tr:nth-child(even) > *, table.dataTable.tableManagers tbody tr:nth-child(even) > * { background: var(--ranking-row-alt) !important; box-shadow: none !important; } /* Hover discret */ .tableClassement tbody tr:hover > *, .tableManagers tbody tr:hover > *, table.dataTable.tableClassement tbody tr:hover > *, table.dataTable.tableManagers tbody tr:hover > * { background: #07111F !important; color: #fff !important; box-shadow: none !important; } /* IMPORTANT : les cellules sticky doivent reprendre EXACTEMENT le zébrage */ .tableClassement tbody tr:nth-child(odd) td:nth-child(-n+4), .tableManagers tbody tr:nth-child(odd) td:nth-child(-n+4) { background: var(--ranking-row) !important; } .tableClassement tbody tr:nth-child(even) td:nth-child(-n+4), .tableManagers tbody tr:nth-child(even) td:nth-child(-n+4) { background: var(--ranking-row-alt) !important; } .tableClassement tbody tr:hover td:nth-child(-n+4), .tableManagers tbody tr:hover td:nth-child(-n+4) { background: #07111F !important; } /* Liens/noms de managers : accent lisible */ .tableClassement tbody a, .tableManagers tbody a { color: var(--theme-secondary) !important; font-weight: 750; } .tableClassement tbody a:hover, .tableManagers tbody a:hover { color: #fff !important; } /* Position / chiffres */ .tableClassement tbody td, .tableManagers tbody td { border-bottom: 1px solid var(--ranking-border) !important; font-variant-numeric: tabular-nums; } /* Bouton loupe dans le classement */ .tableClassement .btn, .tableManagers .btn { min-width: 32px; min-height: 32px; padding: 4px 7px !important; color: #fff !important; background: #034E8C !important; border: 1px solid #FFFFFF !important; border-radius: 8px !important; box-shadow: none !important; } .tableClassement .btn:hover, .tableManagers .btn:hover { background: #0878D1 !important; transform: none; } /* ===================================================================== 2. MENUS : SOMBRES ET LISIBLES ===================================================================== */ /* Navbar */ .navbar, .navbar-collapse, .navbar-nav, .sidebar, .sidebar-wrapper { background: #02050C !important; } /* Liens principaux */ .navbar .nav-link, .navbar .dropdown-toggle { color: #cbd5e1 !important; background: transparent !important; font-size: .84rem; font-weight: 650; } .navbar .nav-link:hover, .navbar .dropdown-toggle:hover, .navbar .nav-item:hover > .nav-link { color: #fff !important; background: #07111F !important; } /* Etat actif : bleu foncé seulement */ .navbar .nav-link.active, .navbar .nav-item.show > .nav-link, .navbar .dropdown-toggle.show, .navbar .show > .nav-link { color: #fff !important; background: #0D1B2D !important; border: 0 !important; box-shadow: inset 0 -2px 0 var(--theme-secondary) !important; } /* Dropdown / mega menu */ .navbar .dropdown-menu, .dropdown-menu { background: #030711 !important; color: #e5edf7 !important; border: 1px solid #0D1B2D !important; border-radius: 10px !important; box-shadow: 0 18px 50px rgba(0,0,0,.55) !important; padding: 8px !important; } /* Très important : neutralise les bg-primary / bg-info / anciens gradients éventuellement présents DANS le mega-menu. */ .navbar .dropdown-menu .bg-primary, .navbar .dropdown-menu .bg-secondary, .navbar .dropdown-menu .bg-info, .navbar .dropdown-menu .bg-light, .navbar .dropdown-menu [class*="bg-"], .dropdown-menu .bg-primary, .dropdown-menu .bg-secondary, .dropdown-menu .bg-info { background: transparent !important; } /* Colonnes/conteneurs du mega menu */ .navbar .dropdown-menu .row, .navbar .dropdown-menu [class*="col-"], .navbar .dropdown-menu .container, .navbar .dropdown-menu .container-fluid { background: transparent !important; } /* Eléments */ .navbar .dropdown-item, .dropdown-menu .dropdown-item { color: #dbe5f1 !important; background: transparent !important; padding: 9px 11px !important; margin: 1px 0; border-radius: 7px !important; font-size: .82rem; font-weight: 650 !important; text-shadow: none !important; } /* Icônes */ .navbar .dropdown-item i, .navbar .dropdown-item svg, .dropdown-menu .dropdown-item i { color: #FFFFFF !important; } /* Hover menu */ .navbar .dropdown-item:hover, .navbar .dropdown-item:focus, .dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus { color: #fff !important; background: #0D1B2D !important; } /* Actif menu */ .navbar .dropdown-item.active, .navbar .dropdown-item:active, .dropdown-menu .dropdown-item.active, .dropdown-menu .dropdown-item:active { color: #fff !important; background: #034E8C !important; box-shadow: inset 3px 0 0 #FFFFFF !important; } /* Séparateurs */ .navbar .dropdown-divider, .dropdown-menu .dropdown-divider { border-color: rgba(255,255,255,.10) !important; } /* Titres internes */ .navbar .dropdown-header, .dropdown-menu .dropdown-header { color: #FFFFFF !important; font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } /* ===================================================================== 3. ONGLETS CLASSEMENTS / MATCHS ===================================================================== */ .nav-tabs { border-bottom: 1px solid #0D1B2D !important; } .nav-tabs .nav-link { color: #94a3b8 !important; background: transparent !important; border: 0 !important; border-radius: 8px 8px 0 0 !important; font-size: .8rem; font-weight: 700; } .nav-tabs .nav-link:hover { color: #fff !important; background: #07111F !important; } .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: #fff !important; background: #034E8C !important; border: 0 !important; box-shadow: inset 0 -2px 0 #FFFFFF; } /* ===================================================================== 4. SAISIE MATCH - RENDU PROCHE DE LA CAPTURE DE REFERENCE ===================================================================== */ /* Utiliser idéalement la classe .tableMatch sur la table de saisie. Les alias ci-dessous permettent aussi de fonctionner avec plusieurs noms déjà possibles dans le projet. */ .tableMatch, .tableSaisieMatch, .match-form table, .saisie-match table, .form-match table, .match-entry table, .match-edit table { width: 100%; color: #fff !important; background: #000 !important; border-collapse: separate !important; border-spacing: 0 !important; border-top: 4px solid var(--theme-accent) !important; border-left: 1px solid #0D1B2D !important; border-right: 1px solid #0D1B2D !important; border-bottom: 1px solid #0D1B2D !important; border-radius: 0 !important; overflow: hidden; } /* Toutes les cellules */ .tableMatch td, .tableSaisieMatch td, .match-form table td, .saisie-match table td, .form-match table td, .match-entry table td, .match-edit table td { height: 36px; padding: 4px 8px !important; color: #f8fafc !important; background: #02050C !important; border: 0 !important; border-bottom: 1px solid rgba(255,255,255,.045) !important; vertical-align: middle; } /* Zébrage identique à la capture */ .tableMatch tr:nth-child(even) td, .tableSaisieMatch tr:nth-child(even) td, .match-form table tr:nth-child(even) td, .saisie-match table tr:nth-child(even) td, .form-match table tr:nth-child(even) td, .match-entry table tr:nth-child(even) td, .match-edit table tr:nth-child(even) td { background: #030711 !important; } /* Equipes : première ligne / zone haute */ .tableMatch tr:first-child td, .tableSaisieMatch tr:first-child td, .match-form table tr:first-child td, .saisie-match table tr:first-child td, .form-match table tr:first-child td, .match-entry table tr:first-child td, .match-edit table tr:first-child td { background: #02050C !important; } /* Libellé central */ .tableMatch td:nth-child(2), .tableSaisieMatch td:nth-child(2), .match-form table td:nth-child(2), .saisie-match table td:nth-child(2), .form-match table td:nth-child(2), .match-entry table td:nth-child(2), .match-edit table td:nth-child(2) { width: 28%; color: #FFFFFF !important; font-size: .67rem !important; font-weight: 800 !important; line-height: 1.05; text-align: center !important; text-transform: uppercase; } /* Colonnes domicile / extérieur */ .tableMatch td:first-child, .tableMatch td:last-child, .tableSaisieMatch td:first-child, .tableSaisieMatch td:last-child, .match-form table td:first-child, .match-form table td:last-child, .saisie-match table td:first-child, .saisie-match table td:last-child, .form-match table td:first-child, .form-match table td:last-child { width: 36%; text-align: center; } /* Inputs compacts de score/statistiques */ .tableMatch input, .tableMatch select, .tableSaisieMatch input, .tableSaisieMatch select, .match-form table input, .match-form table select, .saisie-match table input, .saisie-match table select, .form-match table input, .form-match table select, .match-entry table input, .match-entry table select, .match-edit table input, .match-edit table select { width: min(100%, 52px) !important; min-width: 46px; height: 32px !important; min-height: 32px !important; padding: 2px 5px !important; color: #fff !important; background: #0D1B2D !important; border: 1px solid #034E8C !important; border-radius: 6px !important; box-shadow: none !important; font-size: .82rem !important; font-weight: 800 !important; font-variant-numeric: tabular-nums; text-align: center !important; } /* Focus discret */ .tableMatch input:focus, .tableSaisieMatch input:focus, .match-form table input:focus, .saisie-match table input:focus, .form-match table input:focus { background: #0D1B2D !important; border-color: #FFFFFF !important; box-shadow: 0 0 0 2px rgba(255,255,255,.12) !important; } /* Champ "Homme du match" / pleine largeur dans une ligne */ .tableMatch input.w-100, .tableMatch td[colspan] input, .tableSaisieMatch input.w-100, .tableSaisieMatch td[colspan] input { width: 100% !important; max-width: none !important; } /* Zone de formulaire sous la table */ .match-form .form-control, .saisie-match .form-control, .form-match .form-control, .match-entry .form-control, .match-edit .form-control { color: #fff !important; background: #0D1B2D !important; border: 1px solid #034E8C !important; border-radius: 6px !important; box-shadow: none !important; } /* Commentaires */ .match-form textarea, .saisie-match textarea, .form-match textarea, .match-entry textarea, .match-edit textarea { min-height: 52px; color: #fff !important; background: #0D1B2D !important; border: 1px solid #034E8C !important; border-radius: 6px !important; } /* Labels sous la table */ .match-form label, .saisie-match label, .form-match label, .match-entry label, .match-edit label { display: block; margin: 6px 0 2px; color: #fff !important; font-size: .78rem; font-weight: 800; } /* Bouton ENREGISTRER pleine largeur */ .match-form .btn-primary, .saisie-match .btn-primary, .form-match .btn-primary, .match-entry .btn-primary, .match-edit .btn-primary, .btn-save-match, .btnSaveMatch { width: 100%; min-height: 40px; margin-top: 10px; color: #fff !important; background: linear-gradient( 90deg, #FFFFFF, #FFFFFF ) !important; border: 0 !important; border-radius: 8px !important; font-size: .82rem; font-weight: 900 !important; letter-spacing: .03em; text-transform: uppercase; box-shadow: none !important; } .match-form .btn-primary:hover, .saisie-match .btn-primary:hover, .form-match .btn-primary:hover, .match-entry .btn-primary:hover, .match-edit .btn-primary:hover, .btn-save-match:hover, .btnSaveMatch:hover { filter: brightness(1.08); transform: none; } /* ===================================================================== 5. BADGES PLUS PROPRES / LISIBLES ===================================================================== */ .badge, .badge-result, .badge-ufl, .resultForme_V, .resultForme_N, .resultForme_D, .resultForme_NC { border-radius: 4px !important; text-shadow: none !important; font-size: .68rem !important; font-weight: 850 !important; letter-spacing: .02em; box-shadow: none !important; } /* Badges bleus : bleu foncé + blanc */ .badge.bg-primary, .bg-primary.badge { color: #fff !important; background: #034E8C !important; border: 1px solid #FFFFFF !important; } /* #00D9FF : texte TRES sombre */ .badge.bg-info, .bg-info.badge { color: #0D1B2D !important; background: #FFFFFF !important; border: 1px solid #FFFFFF !important; } /* Success */ .badge.bg-success, .bg-success.badge, .badge-ufl.v { color: #052e16 !important; background: #4ade80 !important; border: 1px solid #22c55e !important; } /* Warning */ .badge.bg-warning, .bg-warning.badge, .badge-ufl.n { color: #07111F !important; background: #3CAEFF !important; border: 1px solid #3CAEFF !important; } /* Danger */ .badge.bg-danger, .bg-danger.badge, .badge-ufl.d { color: #fff !important; background: #dc2626 !important; border: 1px solid #ef4444 !important; } /* ===================================================================== 6. SWIPER - SOBRIETE ===================================================================== */ .swiper-button-prev, .swiper-button-next { width: 38px !important; height: 38px !important; color: #cbd5e1 !important; background: #030711 !important; border: 1px solid #0D1B2D !important; border-radius: 8px !important; box-shadow: 0 5px 14px rgba(0,0,0,.28) !important; } .swiper-button-prev:hover, .swiper-button-next:hover { color: #fff !important; background: #0D1B2D !important; border-color: #FFFFFF !important; transform: translateY(-1px); } .swiper-button-prev::after, .swiper-button-next::after { font-size: 13px !important; font-weight: 900 !important; } .swiper-pagination-bullet { background: #0D1B2D !important; } .swiper-pagination-bullet-active { background: #FFFFFF !important; } /* ===================================================================== 7. RESPONSIVE ===================================================================== */ @media (max-width: 767.98px) { .navbar .dropdown-menu, .dropdown-menu { border-radius: 8px !important; box-shadow: 0 12px 34px rgba(0,0,0,.48) !important; } .tableClassement, .tableManagers { font-size: .74rem; } .tableClassement thead th, .tableManagers thead th { padding: .45rem .3rem !important; } .tableClassement tbody td, .tableManagers tbody td { padding: .38rem .3rem !important; } .tableMatch td:nth-child(2), .tableSaisieMatch td:nth-child(2), .match-form table td:nth-child(2), .saisie-match table td:nth-child(2), .form-match table td:nth-child(2) { width: 30%; font-size: .60rem !important; } .tableMatch input, .tableSaisieMatch input, .match-form table input, .saisie-match table input, .form-match table input { min-width: 42px; width: 46px !important; } } /* ========================================================= INFOBAR MERCATO - INTEGREE AU CSS GLOBAL (DOIT RESTER EN FIN) ========================================================= */ /* ========================================================= MERCATO DASHBOARD / INFO BAR À ajouter dans le CSS global ========================================================= */ /* --------------------------------------------------------- Z-INDEX / SUPERPOSITION Les menus de navigation doivent TOUJOURS passer au-dessus. --------------------------------------------------------- */ .navbar, .navbar.fixed-top, .navbar.sticky-top, header, .main-header { position: relative; z-index: 5000 !important; } .navbar .dropdown-menu, .navbar .dropdown-menu.show, .dropdown-menu.show, .navbar .mega-menu, .navbar .dropdown { z-index: 5100 !important; } .mercato-dashboard-wrap, .user-dashboard-card { position: relative; z-index: 20; } /* Si la barre est sticky/fixed, elle reste quand même sous les menus */ .mercato-dashboard-wrap.sticky-top, .user-dashboard-card.sticky-top, .mercato-dashboard-wrap.fixed-top, .user-dashboard-card.fixed-top { z-index: 40 !important; } /* --------------------------------------------------------- CONTENEUR --------------------------------------------------------- */ .mercato-dashboard-wrap { width: 100%; background: transparent; } .user-dashboard-card { width: 100%; margin: 0 0 12px; padding: 7px 12px 6px; color: var(--theme-text, #f8fafc); background: linear-gradient( 180deg, color-mix(in srgb, var(--theme-surface, #07111F) 92%, #000 8%), color-mix(in srgb, var(--theme-bg, #030711) 88%, var(--theme-primary, #0878D1) 12%) ); border-top: 1px solid rgba(var(--theme-secondary-rgb, 0,210,255), .22); border-bottom: 1px solid rgba(var(--theme-secondary-rgb, 0,210,255), .12); border-left: 0; border-right: 0; border-radius: 0; box-shadow: 0 8px 24px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .025); overflow: visible; } /* Accent supérieur plus discret */ .user-dashboard-card::before { content: ""; position: absolute; top: 0; left: 7%; right: 7%; height: 1px; background: linear-gradient( 90deg, transparent, rgba(var(--theme-secondary-rgb, 0,210,255), .60), transparent ); pointer-events: none; } /* --------------------------------------------------------- TABLE --------------------------------------------------------- */ .user-dashboard-card table.table { width: 100%; margin: 0 !important; color: inherit !important; background: transparent !important; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: .74rem !important; } .user-dashboard-card table.table > tbody > tr > td { position: relative; padding: 5px 6px !important; color: var(--theme-text, #f8fafc) !important; background: transparent !important; border: 0 !important; vertical-align: middle !important; text-align: center; box-shadow: none !important; } /* Séparateurs verticaux */ .user-dashboard-card tr:first-child td:not(:last-child)::after { content: ""; position: absolute; top: 18%; right: 0; width: 1px; height: 64%; background: linear-gradient( to bottom, transparent, rgba(var(--theme-text-rgb, 248,250,252), .09), transparent ); pointer-events: none; } /* --------------------------------------------------------- LIENS --------------------------------------------------------- */ .user-dashboard-card a { color: var(--theme-text, #e2e8f0) !important; text-decoration: none !important; transition: color 160ms ease, opacity 160ms ease; } .user-dashboard-card a:hover { color: var(--theme-secondary, #FFFFFF) !important; } /* --------------------------------------------------------- LABELS --------------------------------------------------------- */ .dashboard-label { display: block; margin-bottom: 3px; color: var(--theme-muted, #94a3b8); font-size: .57rem; font-weight: 750; letter-spacing: .065em; text-transform: uppercase; } /* --------------------------------------------------------- BUDGET --------------------------------------------------------- */ .user-dashboard-card td:first-child { min-width: 105px; } .user-dashboard-card td:first-child a { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 3px 8px; background: rgba(var(--theme-secondary-rgb, 0,210,255), .07); border: 1px solid rgba(var(--theme-secondary-rgb, 0,210,255), .12); border-radius: 8px; } .dashboard-budget { color: var(--theme-secondary, #FFFFFF) !important; font-size: .86rem; font-weight: 850; font-variant-numeric: tabular-nums; } .dashboard-gp-icon { width: 1.35em; height: 1.35em; object-fit: contain; vertical-align: middle; filter: drop-shadow( 0 0 5px rgba(var(--theme-accent-rgb, 245,158,11), .28) ); } /* --------------------------------------------------------- BADGES --------------------------------------------------------- */ .user-dashboard-card .badge { display: inline-flex; min-width: 22px; min-height: 19px; align-items: center; justify-content: center; padding: .22em .50em !important; border-radius: 6px !important; font-size: .62rem !important; font-weight: 850 !important; line-height: 1; border: 1px solid rgba(255,255,255,.10) !important; box-shadow: none !important; text-shadow: none !important; transition: transform 140ms ease, filter 140ms ease; } .user-dashboard-card .badge:hover { transform: translateY(-1px); filter: brightness(1.08); } /* Couleurs lisibles */ .user-dashboard-card .badge.bg-success { color: #052e16 !important; background: #4ade80 !important; border-color: #22c55e !important; } .user-dashboard-card .badge.bg-danger { color: #fff !important; background: #dc2626 !important; border-color: #ef4444 !important; } .user-dashboard-card .badge.bg-warning { color: #07111F !important; background: #3CAEFF !important; border-color: #3CAEFF !important; } .user-dashboard-card .badge.bg-info { color: #0D1B2D !important; background: #FFFFFF !important; border-color: #FFFFFF !important; } .user-dashboard-card .badge.bg-primary { color: #fff !important; background: var(--theme-primary, #034E8C) !important; border-color: color-mix( in srgb, var(--theme-secondary, #FFFFFF) 42%, transparent ) !important; } /* --------------------------------------------------------- GROUPES ACHATS / PRÊTS --------------------------------------------------------- */ .dashboard-badge-group { display: flex; justify-content: center; align-items: center; gap: 4px; } .dashboard-badge-group a { display: inline-flex; line-height: 1; } /* --------------------------------------------------------- CLUB --------------------------------------------------------- */ .user-dashboard-card td:nth-child(4) .badge { width: 25px; height: 20px; } .user-dashboard-card td:nth-child(4) .badge i { font-size: .67rem; } /* --------------------------------------------------------- COUNTDOWN --------------------------------------------------------- */ .dashboard-countdown-row { padding: 6px 5px 2px !important; color: var(--theme-muted, #94a3b8) !important; border-top: 1px solid rgba(var(--theme-text-rgb, 248,250,252), .055) !important; font-size: .55rem; font-weight: 650; letter-spacing: .07em; text-align: center; text-transform: uppercase; } .dashboard-countdown-row span { display: inline-flex; min-width: 23px; margin: 0 2px; align-items: center; justify-content: center; color: var(--theme-secondary, #FFFFFF); font-size: .68rem; font-weight: 850; font-variant-numeric: tabular-nums; } /* --------------------------------------------------------- HOVER CELLULE --------------------------------------------------------- */ .user-dashboard-card tr:first-child td:hover { background: rgba(var(--theme-text-rgb, 248,250,252), .018) !important; } /* --------------------------------------------------------- RESPONSIVE TABLETTE --------------------------------------------------------- */ @media (max-width: 900px) { .user-dashboard-card { padding: 6px 5px 5px; overflow-x: auto; -webkit-overflow-scrolling: touch; } .user-dashboard-card table.table { min-width: 760px; } } /* --------------------------------------------------------- MOBILE Au lieu d'écraser les infos, on permet le scroll horizontal. --------------------------------------------------------- */ @media (max-width: 600px) { .user-dashboard-card { padding-left: 4px; padding-right: 4px; } .user-dashboard-card table.table { min-width: 700px; font-size: .68rem !important; } .user-dashboard-card table.table > tbody > tr > td { padding: 4px 4px !important; } .dashboard-label { font-size: .50rem; } .dashboard-countdown-row { font-size: .50rem; } } /* ========================================================= INFO BAR MERCATO - MOBILE SANS SCROLL HORIZONTAL ========================================================= */ @media (max-width: 900px) { .mercato-dashboard-wrap, .user-dashboard-card { width: 100%; max-width: 100%; overflow: hidden !important; } .user-dashboard-card { padding: 5px 2px 4px !important; } .user-dashboard-card table.table { width: 100% !important; min-width: 0 !important; max-width: 100% !important; table-layout: fixed !important; border-spacing: 0 !important; font-size: .62rem !important; } /* Les 8 informations principales occupent toute la largeur */ .user-dashboard-card table.table > tbody > tr:first-child > td { width: 12.5% !important; min-width: 0 !important; max-width: none !important; padding: 3px 1px !important; overflow: hidden; } /* Dernière cellule vide du HTML : inutile sur mobile */ .user-dashboard-card table.table > tbody > tr:first-child > td:last-child { display: none !important; } /* Les 8 cellules restantes se partagent 100% */ .user-dashboard-card table.table > tbody > tr:first-child > td:not(:last-child) { width: 12.5% !important; } .user-dashboard-card tr:first-child td:not(:last-child)::after { opacity: .55; } /* Budget */ .user-dashboard-card td:first-child { min-width: 0 !important; } .user-dashboard-card td:first-child a { width: 100%; max-width: 100%; gap: 2px !important; padding: 2px 1px !important; background: transparent !important; border: 0 !important; } .dashboard-budget { max-width: calc(100% - 14px); overflow: hidden; font-size: .67rem !important; line-height: 1; text-overflow: ellipsis; white-space: nowrap; } .dashboard-gp-icon { flex: 0 0 auto; width: 12px !important; height: 12px !important; } /* Libellés */ .dashboard-label { display: block; margin-bottom: 2px; overflow: hidden; color: var(--theme-muted, #94a3b8); font-size: .43rem !important; font-weight: 750; letter-spacing: .015em !important; line-height: 1.05; text-overflow: ellipsis; white-space: nowrap; } /* Badges plus petits mais toujours lisibles */ .user-dashboard-card .badge { min-width: 17px !important; min-height: 16px !important; padding: .14em .30em !important; border-radius: 5px !important; font-size: .53rem !important; line-height: 1 !important; } .user-dashboard-card td:nth-child(4) .badge { width: 18px !important; height: 16px !important; } .user-dashboard-card td:nth-child(4) .badge i { font-size: .52rem !important; } .dashboard-badge-group { width: 100%; gap: 1px !important; justify-content: center; white-space: nowrap; } /* Compte à rebours : même hauteur, mais plus compact */ .dashboard-countdown-row { padding: 4px 1px 1px !important; overflow: hidden; font-size: .42rem !important; letter-spacing: .015em !important; white-space: nowrap; } .dashboard-countdown-row span { min-width: auto !important; margin: 0 1px !important; font-size: .56rem !important; line-height: 1; } } /* Téléphones étroits */ @media (max-width: 600px) { .user-dashboard-card { padding: 4px 1px 3px !important; } .user-dashboard-card table.table { min-width: 0 !important; font-size: .56rem !important; } .user-dashboard-card table.table > tbody > tr:first-child > td { padding: 2px 0 !important; } .dashboard-label { font-size: .39rem !important; } .dashboard-budget { font-size: .60rem !important; } .dashboard-gp-icon { width: 10px !important; height: 10px !important; } .user-dashboard-card .badge { min-width: 15px !important; min-height: 14px !important; padding: .11em .24em !important; font-size: .48rem !important; border-radius: 4px !important; } .dashboard-countdown-row { padding-top: 3px !important; font-size: .38rem !important; } .dashboard-countdown-row span { font-size: .50rem !important; } } /* Très petits écrans : priorité aux valeurs, sans créer une 3e ligne */ @media (max-width: 420px) { .dashboard-label { font-size: .36rem !important; } .dashboard-budget { font-size: .55rem !important; } .user-dashboard-card .badge { min-width: 14px !important; min-height: 13px !important; padding: .08em .18em !important; font-size: .44rem !important; } .dashboard-countdown-row { font-size: .34rem !important; } .dashboard-countdown-row span { font-size: .46rem !important; } } /* ========================================================= BOUTONS V2 — sobres et compacts Aucun changement HTML nécessaire. ========================================================= */ .btn { border-radius: 6px !important; font-weight: 700 !important; box-shadow: none !important; text-shadow: none !important; transition: background-color .15s ease, border-color .15s ease, color .15s ease !important; } /* Le point important : btn-sm reste VRAIMENT petit */ .btn-sm, .btn-group-sm > .btn { min-height: 0 !important; height: auto !important; padding: 3px 7px !important; border-radius: 5px !important; font-size: .68rem !important; line-height: 1.25 !important; gap: 3px !important; } /* Primary : plat et lisible, sans gros dégradé/ombre */ .btn-primary { color: #fff !important; background: #034E8C !important; border: 1px solid #0878D1 !important; box-shadow: none !important; } .btn-primary:hover, .btn-primary:focus { color: #fff !important; background: #0878D1 !important; border-color: #FFFFFF !important; box-shadow: none !important; transform: none !important; } .btn-primary:active, .btn-primary.active { color: #fff !important; background: #034E8C !important; border-color: #FFFFFF !important; transform: none !important; box-shadow: inset 0 1px 2px rgba(0,0,0,.20) !important; } /* Icônes : pas de taille imposée au bouton */ .btn-sm i, .btn-sm svg, .btn-sm [class^="fa-"], .btn-sm [class*=" fa-"] { margin: 0 !important; font-size: .72rem !important; } /* Bouton réellement composé uniquement d'une icône : compact, mais pas un gros carré forcé. */ .btn-sm:has(i:only-child), .btn-sm:has(svg:only-child) { min-width: 24px !important; width: auto !important; height: 24px !important; min-height: 24px !important; padding: 2px 5px !important; } /* Les autres variantes restent également plates */ .btn-secondary { color: #e5e7eb !important; background: #0D1B2D !important; border-color: #0D1B2D !important; box-shadow: none !important; } .btn-secondary:hover { color: #fff !important; background: #0D1B2D !important; border-color: #034E8C !important; transform: none !important; } .btn-success { color: #052e16 !important; background: #4ade80 !important; border-color: #22c55e !important; box-shadow: none !important; } .btn-danger { color: #fff !important; background: #c62828 !important; border-color: #ef4444 !important; box-shadow: none !important; } .btn-warning { color: #030711 !important; background: #3CAEFF !important; border-color: #3CAEFF !important; box-shadow: none !important; } .btn-info { color: #0D1B2D !important; background: #FFFFFF !important; border-color: #FFFFFF !important; box-shadow: none !important; } .btn:disabled, .btn.disabled { opacity: .45 !important; box-shadow: none !important; transform: none !important; } @media (max-width: 600px) { .btn-sm, .btn-group-sm > .btn { padding: 2px 5px !important; font-size: .62rem !important; border-radius: 4px !important; } .btn-sm:has(i:only-child), .btn-sm:has(svg:only-child) { min-width: 22px !important; height: 22px !important; min-height: 22px !important; padding: 2px 4px !important; } } /* ========================================================= SAISIE MATCH V2 - GLOBAL ========================================================= */ /* ================================================================ SAISIE MATCH V2 ================================================================ */ .match-form-v2 { --m-bg: #000; --m-panel: #02050C; --m-row: #02050C; --m-row-alt: #030711; --m-field: #0D1B2D; --m-field-hover: #0D1B2D; --m-border: #0D1B2D; --m-border-soft: rgba(255,255,255,.055); --m-text: #f8fafc; --m-muted: #FFFFFF; --m-accent: var(--theme-accent, #3CAEFF); --m-focus: var(--theme-secondary, #FFFFFF); width: 100%; color: var(--m-text); } .match-panel { overflow: hidden; background: var(--m-bg); border: 1px solid #0D1B2D; } .match-topline { height: 4px; background: var(--m-accent); } /* HEADER */ .match-header-v2 { display: grid; grid-template-columns: 1fr minmax(72px, 120px) 1fr; align-items: center; min-height: 112px; background: #02050C; } .match-side, .match-competition { display: flex; flex-direction: column; align-items: center; justify-content: center; } .match-club-logo { width: 62px; height: 62px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0,0,0,.55)); } .match-division-logo { width: 68px; height: 68px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0,0,0,.55)); } .match-club-name { margin-top: 5px; color: #fff; font-size: .82rem; font-weight: 850; line-height: 1.1; text-align: center; } .match-manager { margin-top: 2px; color: #fff; font-size: .68rem; font-style: italic; font-weight: 700; } /* SCORE */ .match-score-row { display: grid; grid-template-columns: 1fr minmax(100px, 180px) 1fr; align-items: center; min-height: 58px; background: var(--m-row-alt); border-top: 1px solid var(--m-border-soft); border-bottom: 1px solid var(--m-border-soft); } .score-box { display: flex; justify-content: center; } .score-title { color: #FFFFFF; font-size: .67rem; font-weight: 900; letter-spacing: .035em; text-align: center; text-transform: uppercase; } .match-score-input, .match-stat-input { -moz-appearance: textfield; } .match-score-input::-webkit-outer-spin-button, .match-score-input::-webkit-inner-spin-button, .match-stat-input::-webkit-outer-spin-button, .match-stat-input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; } .match-score-input { width: 58px; height: 34px; color: #fff; background: var(--m-field); border: 1px solid #034E8C; border-radius: 7px; outline: none; font-size: 1rem; font-weight: 900; text-align: center; } /* BUTEURS */ .goals-grid { display: grid; grid-template-columns: 1fr 1px 1fr; min-height: 48px; background: #02050C; } .goals-panel { min-width: 0; padding: 8px; } .goals-separator { background: rgba(255,255,255,.06); } /* Neutralise les tableaux injectés par JS dans les zones buteurs */ .goals-panel table { width: 100% !important; margin: 0 !important; color: #fff !important; background: transparent !important; border-collapse: collapse !important; } .goals-panel table td, .goals-panel table th { padding: 3px 5px !important; color: #fff !important; background: transparent !important; border: 0 !important; border-bottom: 1px solid rgba(255,255,255,.04) !important; font-size: .7rem !important; } .goals-panel input, .goals-panel select { min-height: 30px !important; color: #fff !important; background: var(--m-field) !important; border: 1px solid #034E8C !important; border-radius: 6px !important; font-size: .7rem !important; } /* HOMME DU MATCH */ .motm-block { padding: 8px; background: #030711; border-top: 1px solid var(--m-border-soft); border-bottom: 1px solid var(--m-border-soft); } .motm-block label { display: block; margin-bottom: 4px; color: #fff; font-size: .68rem; font-weight: 850; } /* STATS */ .stats-block { background: #000; } .stat-row { display: grid; grid-template-columns: 1fr minmax(110px, 220px) 1fr; align-items: center; min-height: 42px; border-bottom: 1px solid var(--m-border-soft); } .stat-row:nth-child(even) { background: var(--m-row-alt); } .stat-row:nth-child(odd) { background: var(--m-row); } .stat-value { display: flex; justify-content: center; } .stat-label { color: var(--m-muted); font-size: .65rem; font-weight: 900; line-height: 1.05; letter-spacing: .025em; text-align: center; text-transform: uppercase; } .match-stat-input { width: 48px; height: 30px; color: #fff; background: var(--m-field); border: 1px solid #034E8C; border-radius: 6px; outline: none; font-size: .82rem; font-weight: 850; text-align: center; } .match-stat-input[readonly] { color: #cbd5e1; background: #0D1B2D; } /* FIELDS */ .match-field, .match-select, .match-textarea { width: 100%; color: #fff !important; background: var(--m-field) !important; border: 1px solid #034E8C !important; border-radius: 7px !important; outline: none; box-shadow: none !important; font-size: .76rem; } .match-field, .match-select { min-height: 34px; padding: 5px 9px; } .match-textarea { min-height: 74px; padding: 8px 9px; resize: vertical; } .match-field:focus, .match-select:focus, .match-textarea:focus, .match-score-input:focus, .match-stat-input:focus { background: var(--m-field-hover) !important; border-color: var(--m-focus) !important; box-shadow: 0 0 0 2px rgba(255,255,255,.12) !important; } /* EXTRA */ .match-extra { display: grid; gap: 8px; padding: 10px; background: #000; } .form-group-v2 label { display: block; margin-bottom: 3px; color: #fff; font-size: .7rem; font-weight: 850; } .match-submit { padding: 10px; background: #000; border-top: 1px solid var(--m-border-soft); } .btn-save-match { width: 100%; min-height: 42px; color: #fff; background: linear-gradient(90deg, #FFFFFF, #FFFFFF); border: 0; border-radius: 8px; cursor: pointer; font-size: .78rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; } .btn-save-match:hover { filter: brightness(1.08); } /* RESPONSIVE */ @media (max-width: 767.98px) { .match-header-v2 { grid-template-columns: 1fr 70px 1fr; min-height: 96px; } .match-club-logo { width: 48px; height: 48px; } .match-division-logo { width: 48px; height: 48px; } .match-club-name { font-size: .70rem; } .match-manager { font-size: .60rem; } .match-score-row { grid-template-columns: 1fr 90px 1fr; } .goals-grid { grid-template-columns: 1fr; } .goals-separator { display: none; } .goals-panel + .goals-panel { border-top: 1px solid rgba(255,255,255,.06); } .stat-row { grid-template-columns: 1fr 105px 1fr; } .stat-label { font-size: .58rem; } .match-score-input { width: 52px; } .match-stat-input { width: 44px; } } /* ========================================================= CATALOGUE JOUEURS / MERCATO - PRO CARDS ========================================================= */ .players-market-page{ --pc-bg:#02050C; --pc-surface:#030711; --pc-border:rgba(255,255,255,.09); --pc-muted:#94a3b8; width:100%; padding:8px 0 18px; } .players-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; margin-bottom:12px; padding:7px 8px; background:color-mix(in srgb,var(--theme-surface,#07111F) 88%,#000 12%); border:1px solid var(--pc-border); border-radius:9px; } .players-pagination{ display:flex; flex-wrap:wrap; gap:4px; margin:0!important; padding:0!important; background:transparent!important; border:0!important; } .players-pagination li{display:flex} .players-pagination .btn{ min-height:28px!important; padding:3px 8px!important; border-radius:5px!important; font-size:.67rem!important; } .players-results-count{ color:var(--pc-muted)!important; font-size:.63rem; white-space:nowrap; } .players-results-count i{font-style:normal} .players-card-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px 14px; width:100%; } .player-card-slot{ display:flex; min-width:0; align-items:stretch; justify-content:center; } .player-card-slot>[class*="col-"]{ width:100%!important; max-width:100%!important; padding:0!important; margin:0!important; flex:none!important; } /* CARTES */ .players-market-page .flip-card-3D-wrapper{ width:100%!important; max-width:285px!important; margin:0 auto!important; perspective:1200px; } .players-market-page .flip-card{ border-radius:14px!important; background: radial-gradient(circle at 50% 14%,rgba(var(--theme-secondary-rgb,0,210,255),.07),transparent 34%), linear-gradient(180deg,#030711 0%,#02050C 100%)!important; box-shadow:0 10px 28px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,255,255,.035)!important; transition:transform .2s ease,box-shadow .2s ease!important; } .players-market-page .flip-card-3D-wrapper:hover .flip-card{ transform:translateY(-3px); box-shadow:0 16px 34px rgba(0,0,0,.56),inset 0 1px 0 rgba(255,255,255,.05)!important; } .players-market-page .flip-card.do-flip{transform:rotateY(-180deg)!important} .players-market-page .flip-card_GB .flip-card-front, .players-market-page .flip-card_GB .flip-card-back, .players-market-page .flip-card_DEF .flip-card-front, .players-market-page .flip-card_DEF .flip-card-back, .players-market-page .flip-card_MIL .flip-card-front, .players-market-page .flip-card_MIL .flip-card-back, .players-market-page .flip-card_ATT .flip-card-front, .players-market-page .flip-card_ATT .flip-card-back{ background:linear-gradient(180deg,rgba(255,255,255,.025),transparent 25%),var(--pc-bg)!important; border-width:1px!important; border-style:solid!important; border-radius:13px!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.03)!important; overflow:hidden; } .players-market-page .flip-card_GB .flip-card-front, .players-market-page .flip-card_GB .flip-card-back{border-color:rgba(245,197,66,.55)!important} .players-market-page .flip-card_DEF .flip-card-front, .players-market-page .flip-card_DEF .flip-card-back{border-color:rgba(255,255,255,.55)!important} .players-market-page .flip-card_MIL .flip-card-front, .players-market-page .flip-card_MIL .flip-card-back{border-color:rgba(32,216,120,.50)!important} .players-market-page .flip-card_ATT .flip-card-front, .players-market-page .flip-card_ATT .flip-card-back{border-color:rgba(242,56,82,.52)!important} .players-market-page .flip-card-front::after, .players-market-page .flip-card-back::after{ left:18%!important; right:18%!important; height:2px!important; box-shadow:none!important; } .players-market-page .flip-card-front::before, .players-market-page .flip-card-back::before{opacity:.30} /* TYPO */ .players-market-page .flip-card-front h4, .players-market-page .flip-card-back h4{ margin-bottom:3px!important; color:#fff!important; font-size:.93rem!important; font-weight:850!important; letter-spacing:-.01em!important; line-height:1.1!important; text-shadow:0 2px 4px rgba(0,0,0,.65)!important; } .players-market-page .flip-card-front h5, .players-market-page .flip-card-back h5{ color:#cbd5e1!important; font-size:.70rem!important; font-weight:700!important; text-shadow:none!important; } .players-market-page .flip-card-front h6, .players-market-page .flip-card-back h6{ color:#94a3b8!important; font-size:.62rem!important; font-weight:650!important; text-shadow:none!important; } /* PHOTO */ .players-market-page .player-photo{ width:76px!important; height:76px!important; margin:6px auto!important; padding:2px!important; object-fit:cover; border:1px solid rgba(255,255,255,.12); border-radius:50%!important; background:#07111F!important; box-shadow:0 7px 18px rgba(0,0,0,.42)!important; } .players-market-page .flip-card_GB .player-photo{border-color:rgba(245,197,66,.60)!important;background:#030711!important} .players-market-page .flip-card_DEF .player-photo{border-color:rgba(255,255,255,.60)!important;background:#030711!important} .players-market-page .flip-card_MIL .player-photo{border-color:rgba(32,216,120,.55)!important;background:#07170f!important} .players-market-page .flip-card_ATT .player-photo{border-color:rgba(242,56,82,.55)!important;background:#19090d!important} .players-market-page .profile-photo{ width:min(100%,180px)!important; border-radius:9px!important; box-shadow:0 8px 22px rgba(0,0,0,.42)!important; } .players-market-page .club-logo{ height:28px!important; filter:drop-shadow(0 3px 5px rgba(0,0,0,.55))!important; } .players-market-page .gp-logo{height:15px!important} /* BOUTONS FLIP */ .players-market-page .flip-card-btn-turn-to-back, .players-market-page .flip-card-btn-turn-to-front, .players-market-page .flip-card-btn-turn-to-back2{ bottom:6px!important; padding:3px 7px!important; color:#cbd5e1!important; background:rgba(2,5,12,.88)!important; border:1px solid rgba(255,255,255,.14)!important; border-radius:5px!important; font-size:.62rem!important; backdrop-filter:blur(6px); } .players-market-page .flip-card-btn-turn-to-back:hover, .players-market-page .flip-card-btn-turn-to-front:hover, .players-market-page .flip-card-btn-turn-to-back2:hover{ color:#fff!important; background:#0D1B2D!important; border-color:rgba(var(--theme-secondary-rgb,0,210,255),.50)!important; } /* ACTION MERCATO */ .players-market-page .player-market-action{ width:calc(100% - 12px)!important; min-height:29px!important; margin:4px 6px 6px!important; padding:4px 7px!important; border-radius:6px!important; font-size:.67rem!important; font-weight:800!important; line-height:1.15!important; } .players-market-page .player-market-action i{ font-style:normal; font-size:.67rem!important; } .players-market-page .flip-card .btn-sm{ min-height:26px!important; padding:3px 6px!important; font-size:.64rem!important; } /* OFFCANVAS */ .player-detail-offcanvas{ color:var(--theme-text,#fff)!important; background:linear-gradient(180deg,#030711,#02050C)!important; border-right:1px solid rgba(var(--theme-secondary-rgb,0,210,255),.22)!important; } .player-detail-offcanvas .offcanvas-header{ padding:13px 15px!important; background:#030711!important; border-bottom:1px solid rgba(255,255,255,.08); } .player-detail-offcanvas .offcanvas-title{ color:#fff!important; font-size:.90rem!important; letter-spacing:.02em!important; text-transform:none!important; } .player-detail-offcanvas-body{padding:0!important} /* MODAL */ #modalAction .modal-content{ overflow:hidden; background:#030711!important; border:1px solid rgba(255,255,255,.10)!important; border-radius:12px!important; } #modalAction .modal-body>.bg-primary{ background:linear-gradient(135deg,#034E8C,#0D1B2D)!important; } @media(max-width:1199.98px){ .players-card-grid{grid-template-columns:repeat(3,minmax(0,1fr))} } @media(max-width:899.98px){ .players-card-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 10px} .players-toolbar{align-items:flex-start;flex-direction:column} .players-results-count{padding-left:2px} } @media(max-width:520px){ .players-market-page{padding-top:4px} .players-card-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 6px} .players-market-page .flip-card-3D-wrapper{max-width:100%!important} .players-market-page .player-photo{width:62px!important;height:62px!important} .players-market-page .flip-card-front h4, .players-market-page .flip-card-back h4{font-size:.78rem!important} .players-market-page .flip-card-front h5, .players-market-page .flip-card-back h5{font-size:.61rem!important} .players-market-page .flip-card-front h6, .players-market-page .flip-card-back h6{font-size:.55rem!important} .players-market-page .player-market-action{font-size:.58rem!important} } @media(max-width:370px){ .players-card-grid{grid-template-columns:1fr} .players-market-page .flip-card-3D-wrapper{max-width:270px!important} } /* ========================================================= MY TEAM / PALMARES / TACTIQUES / EFFECTIFS - PRO UI ========================================================= */ .palmares-table{ margin:0!important; color:#e5edf7!important; background:#02050C!important; border-collapse:collapse!important; font-size:.72rem!important; } .palmares-team-logo{ width:30px; height:30px; padding:2px; object-fit:contain; border-radius:50%; background:#07111F; border:1px solid rgba(255,255,255,.10); } /* ---------- MANAGER PROFILE ---------- */ .manager-profile-wrap{ overflow:hidden; border:1px solid var(--panel-border); border-radius:12px; background:#02050C; box-shadow:0 10px 28px rgba(0,0,0,.28); } .manager-profile-table{ margin:0!important; color:#e5edf7!important; background:#02050C!important; font-size:.76rem!important; } .manager-profile-table td{ padding:.55rem .65rem!important; color:#e5edf7!important; background:#02050C!important; border-color:rgba(255,255,255,.045)!important; vertical-align:middle!important; } .manager-profile-table tr:nth-child(even) td{background:#030711!important} .manager-profile-table td:first-child{ color:#94a3b8!important; font-weight:700; } .manager-team-title{ margin:0!important; color:#fff!important; font-size:1rem!important; font-weight:850!important; } .profile-team-logo{ width:46px!important; height:46px!important; object-fit:contain; } .manager-social-icon{ margin-left:8px; color:#FFFFFF; font-size:1.35rem!important; } .gp-inline-icon{ width:1.25em!important; height:1.25em!important; margin-left:3px; object-fit:contain; vertical-align:-.18em; } .manager-email-btn{ width:100%!important; min-height:34px!important; } .manager-card-gallery{ margin:4px 0!important; } /* ---------- TACTIQUES ---------- */ .myteam-tactics-page{ padding:6px 0 12px; } .tactic-summary-table, .tactic-editor-table, .tactic-lineup-table{ width:100%!important; margin:0 0 10px!important; color:#e5edf7!important; background:#02050C!important; border:1px solid var(--panel-border)!important; border-collapse:separate!important; border-spacing:0!important; border-radius:10px; overflow:hidden; font-size:.74rem!important; } .tactic-summary-table td, .tactic-editor-table td, .tactic-lineup-table td{ padding:.45rem .55rem!important; color:#e5edf7!important; background:#02050C!important; border-bottom:1px solid rgba(255,255,255,.045)!important; vertical-align:middle!important; } .tactic-summary-table tr:nth-child(even) td, .tactic-editor-table tr:nth-child(even) td, .tactic-lineup-table tr:nth-child(even) td{ background:#030711!important; } .tactic-summary-table td:first-child, .tactic-editor-table td:first-child, .tactic-lineup-table td:first-child{ color:#FFFFFF!important; font-size:.66rem; font-weight:800; text-transform:uppercase; } .tactic-select{ width:100%!important; min-height:32px!important; padding:4px 28px 4px 8px!important; color:#fff!important; background-color:#0D1B2D!important; border:1px solid #034E8C!important; border-radius:6px!important; font-size:.71rem!important; } .tactic-select:focus{ border-color:var(--theme-secondary,#FFFFFF)!important; box-shadow:0 0 0 2px rgba(var(--theme-secondary-rgb,0,210,255),.12)!important; } .tactic-save-btn{ width:100%; min-height:32px!important; } #tableTactique, #WC_tableTactique{ margin-top:8px; } /* ---------- ACCORDIONS EFFECTIFS ---------- */ .squad-accordion-item{ margin-bottom:7px; overflow:hidden; background:#02050C!important; border:1px solid var(--panel-border)!important; border-radius:10px!important; } .squad-accordion-button{ min-height:46px; gap:9px; padding:.65rem .8rem!important; color:#e5edf7!important; background:#030711!important; border:0!important; box-shadow:none!important; font-size:.78rem!important; font-weight:800!important; } .squad-accordion-button:not(.collapsed){ color:#fff!important; background:#0D1B2D!important; } .squad-accordion-button::after{ filter:brightness(2); opacity:.75; } .squad-manager-logo{ width:30px!important; height:30px!important; padding:2px; object-fit:contain; border-radius:50%; background:#07111F; } .squad-accordion-body{ padding:0!important; background:#02050C!important; } .squad-summary-table{ margin:0!important; color:#dce7f3!important; background:#02050C!important; font-size:.72rem!important; } .squad-summary-table td{ padding:.42rem .55rem!important; background:#02050C!important; border-color:rgba(255,255,255,.045)!important; } .squad-summary-table tr:nth-child(even) td{background:#030711!important} /* ---------- MINI CARDS EFFECTIF ---------- */ .squad-card-grid{ display:grid!important; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; margin:0!important; padding:8px; } .squad-player-slot{ min-width:0; } .squad-mini-card{ width:100%!important; height:132px!important; margin:0!important; border-radius:9px!important; background:#02050C!important; border:1px solid rgba(255,255,255,.08)!important; box-shadow:0 6px 16px rgba(0,0,0,.28)!important; } .squad-mini-card-body{ height:100%; padding:8px!important; } .squad-mini-table{ width:100%!important; margin:0!important; color:#fff; font-size:.68rem!important; } .squad-mini-photo{ width:64px!important; height:78px!important; object-fit:contain!important; border-radius:7px!important; background:transparent!important; box-shadow:none!important; } /* ---------- PLAYER CONTRACT / ACTION TABLES ---------- */ .player-contract-table, .player-card-actions-table, .player-values-table{ width:100%!important; margin:0!important; color:#e5edf7!important; background:#02050C!important; font-size:.68rem!important; } .player-contract-table td, .player-card-actions-table td, .player-values-table td{ padding:.38rem .42rem!important; color:#e5edf7!important; background:#02050C!important; border-color:rgba(255,255,255,.045)!important; vertical-align:middle!important; } .player-contract-table tr:nth-child(even) td, .player-values-table tr:nth-child(even) td{ background:#030711!important; } .player-contract-action{ width:90%!important; min-height:28px!important; margin:2px auto!important; padding:3px 7px!important; font-size:.64rem!important; } .squad-table-player-photo{ width:42px!important; height:42px!important; padding:0!important; object-fit:contain!important; border:1px solid rgba(255,255,255,.08)!important; border-radius:7px!important; background:#07111F!important; } /* ---------- WC SQUAD ---------- */ .wc-squad-summary-wrap, .wc-squad-list-wrap{ margin-bottom:10px; border:1px solid var(--panel-border); border-radius:10px; overflow:hidden; } .wc-squad-summary-table, .wc-squad-table{ width:100%!important; margin:0!important; color:#e5edf7!important; background:#02050C!important; font-size:.72rem!important; } .wc-squad-summary-table td, .wc-squad-table td{ padding:.46rem .5rem!important; color:#e5edf7!important; background:#02050C!important; border-color:rgba(255,255,255,.045)!important; vertical-align:middle!important; } .wc-squad-summary-table tr:nth-child(even) td, .wc-squad-table tr:nth-child(even) td{background:#030711!important} .wc-squad-table a{color:#dbeafe!important;font-weight:700} .wc-squad-table a:hover{color:#FFFFFF!important} .squad-club-logo{ width:24px!important; height:24px!important; object-fit:contain; } .wc-remove-player-btn{ min-width:28px!important; padding:3px 6px!important; } /* ---------- Responsive ---------- */ @media(max-width:1199.98px){ .squad-card-grid{grid-template-columns:repeat(4,minmax(0,1fr))} } @media(max-width:899.98px){ .squad-card-grid{grid-template-columns:repeat(3,minmax(0,1fr))} } @media(max-width:650px){ .squad-card-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; padding:6px; } .squad-mini-card{height:124px!important} .squad-mini-photo{width:56px!important;height:68px!important} .manager-profile-table, .palmares-table, .wc-squad-table{font-size:.66rem!important} .palmares-table thead th{font-size:.57rem!important;padding:.38rem .3rem!important} .palmares-table tbody td{padding:.38rem .3rem!important} .tactic-summary-table, .tactic-editor-table, .tactic-lineup-table{font-size:.68rem!important} } /* ========================================================= FLIP CARD MY TEAM - MEME STYLE QUE JOUEURSCARDS ========================================================= */ .player-fut-col { display:flex; margin-bottom:16px; } .player-fut-wrapper { width:100%!important; max-width:285px!important; margin:0 auto!important; perspective:1200px; } .player-fut-card { width:100%!important; min-height:455px!important; height:auto!important; border-radius:14px!important; background: radial-gradient( circle at 50% 12%, rgba(var(--theme-secondary-rgb,0,210,255),.07), transparent 34% ), linear-gradient(180deg,#030711 0%,#02050C 100%)!important; box-shadow: 0 10px 28px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.035)!important; transition: transform .2s ease, box-shadow .2s ease!important; } .player-fut-card-owner { min-height:500px!important; } .player-fut-card-mercato { min-height:545px!important; } .player-fut-wrapper:hover .player-fut-card:not(.do-flip) { transform:translateY(-3px); box-shadow: 0 16px 34px rgba(0,0,0,.56), inset 0 1px 0 rgba(255,255,255,.05)!important; } .player-fut-card.do-flip { transform:rotateY(-180deg)!important; } /* --------------------------------------------------------- Faces --------------------------------------------------------- */ .player-fut-front, .player-fut-back { padding:0!important; background: linear-gradient(180deg,rgba(255,255,255,.022),transparent 26%), #02050C!important; border-width:1px!important; border-style:solid!important; border-radius:13px!important; overflow:hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,.03)!important; } /* Accent poste */ .player-fut-card.flip-card_GB .player-fut-front, .player-fut-card.flip-card_GB .player-fut-back { border-color:rgba(245,197,66,.55)!important; } .player-fut-card.flip-card_DEF .player-fut-front, .player-fut-card.flip-card_DEF .player-fut-back { border-color:rgba(255,255,255,.55)!important; } .player-fut-card.flip-card_MIL .player-fut-front, .player-fut-card.flip-card_MIL .player-fut-back { border-color:rgba(32,216,120,.50)!important; } .player-fut-card.flip-card_ATT .player-fut-front, .player-fut-card.flip-card_ATT .player-fut-back { border-color:rgba(242,56,82,.52)!important; } /* --------------------------------------------------------- Corps --------------------------------------------------------- */ .player-fut-body { position:relative; display:flex; flex-direction:column; min-height:100%; padding:12px!important; color:#f8fafc; } /* --------------------------------------------------------- En-tête --------------------------------------------------------- */ .player-fut-topline { display:grid; grid-template-columns: minmax(42px,auto) 1fr minmax(34px,auto); gap:7px; align-items:center; min-height:40px; } .player-position-badge { display:inline-flex; min-width:38px; min-height:24px; align-items:center; justify-content:center; padding:3px 7px; border-radius:6px; color:#fff; font-size:.68rem; font-weight:900; line-height:1; letter-spacing:.03em; } .player-position-gb { background:#034E8C; border:1px solid #3CAEFF; } .player-position-def { background:#0878D1; border:1px solid #FFFFFF; } .player-position-mid { background:#176b42; border:1px solid #20d878; } .player-position-att { background:#8f2030; border:1px solid #f23852; } .player-fut-title { min-width:0; text-align:center; } .player-fut-name-link { display:block; overflow:hidden; color:#fff!important; font-size:.82rem; font-weight:850; line-height:1.15; text-overflow:ellipsis; white-space:nowrap; text-decoration:none!important; } .player-fut-name-link:hover { color:var(--theme-secondary,#FFFFFF)!important; } .player-condition-wrap { display:flex; justify-content:flex-end; font-size:.65rem; } /* --------------------------------------------------------- Zone principale --------------------------------------------------------- */ .player-fut-main { display:grid; grid-template-columns: 56px minmax(0,1fr) 56px; gap:7px; align-items:center; margin-top:10px; } .player-rating-block { display:flex; flex-direction:column; align-items:center; gap:6px; } .player-rating-label { color:#034E8C; font-size:.50rem; font-weight:850; letter-spacing:.07em; text-transform:uppercase; } .player-rating { display:inline-flex; width:42px; height:42px; align-items:center; justify-content:center; border-radius:9px; color:#030711; font-size:1rem; font-weight:950; font-variant-numeric:tabular-nums; box-shadow: inset 0 1px 0 rgba(255,255,255,.30), 0 5px 12px rgba(0,0,0,.28); } .player-rating-elite { background:#36e8c5; border:1px solid #71f4d9; } .player-rating-high { background:#a8e85b; border:1px solid #c4f782; } .player-rating-medium { background:#3CAEFF; border:1px solid #78EEFF; } .player-rating-low { color:#fff; background:#cc443e; border:1px solid #ef625c; } .player-meta-logo { width:24px!important; height:24px!important; padding:2px; object-fit:contain; border-radius:6px; background:#030711; border:1px solid rgba(255,255,255,.08); filter: drop-shadow(0 3px 5px rgba(0,0,0,.40))!important; } .player-flag-logo { border-radius:50%; } /* --------------------------------------------------------- Photo --------------------------------------------------------- */ .player-fut-photo-wrap { position:relative; display:flex; min-height:164px; align-items:flex-end; justify-content:center; overflow:hidden; } .player-fut-photo-halo { position:absolute; left:50%; bottom:6px; width:120px; height:120px; transform:translateX(-50%); border-radius:50%; background: radial-gradient( circle, rgba(var(--theme-secondary-rgb,0,210,255),.12), transparent 68% ); filter:blur(4px); pointer-events:none; } .player-fut-photo { position:relative; z-index:2; width:auto!important; max-width:150px!important; height:164px!important; margin:0!important; padding:0!important; object-fit:contain!important; object-position:center bottom; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; filter: drop-shadow(0 10px 12px rgba(0,0,0,.50))!important; } /* --------------------------------------------------------- Style / constance --------------------------------------------------------- */ .player-fut-style { position:relative; display:flex; min-height:42px; margin-top:6px; padding:7px 34px 7px 9px; flex-direction:column; align-items:center; justify-content:center; background:#030711; border:1px solid rgba(255,255,255,.06); border-radius:8px; text-align:center; } .player-style-name { color:#dbeafe; font-size:.68rem; font-weight:750; line-height:1.2; } .player-constance { margin-top:2px; color:#FFFFFF; font-size:.57rem; font-weight:750; } .player-ballon-or { position:absolute; top:50%; right:7px; width:24px; height:24px; transform:translateY(-50%); object-fit:contain; } /* --------------------------------------------------------- Infos physiques --------------------------------------------------------- */ .player-fut-physical { display:flex; gap:6px; margin-top:7px; align-items:center; justify-content:center; color:#94a3b8; font-size:.60rem; font-weight:650; } .player-fut-physical span:not(:last-child)::after { content:"•"; margin-left:6px; color:#034E8C; } /* --------------------------------------------------------- Infos supplémentaires / contrat --------------------------------------------------------- */ .player-fut-extra { flex:1; min-height:0; margin-top:8px; overflow:hidden; border-top:1px solid rgba(255,255,255,.06); } .player-fut-extra table { width:100%!important; margin:0!important; color:#dce7f3!important; background:transparent!important; font-size:.63rem!important; } .player-fut-extra table td, .player-fut-extra table th { padding:.30rem .34rem!important; color:#dce7f3!important; background:transparent!important; border-color:rgba(255,255,255,.04)!important; } /* --------------------------------------------------------- Actions --------------------------------------------------------- */ .player-fut-actions { display:flex; gap:6px; margin-top:auto; padding-top:8px; align-items:center; justify-content:flex-end; } .player-card-icon-btn { position:static!important; width:30px!important; min-width:30px!important; height:30px!important; min-height:30px!important; margin:0!important; padding:0!important; color:#cbd5e1!important; background:#030711!important; border:1px solid rgba(255,255,255,.12)!important; border-radius:6px!important; box-shadow:none!important; } .player-card-icon-btn:hover { color:#fff!important; background:#0D1B2D!important; border-color: rgba(var(--theme-secondary-rgb,0,210,255),.52)!important; transform:none!important; } /* --------------------------------------------------------- Verso --------------------------------------------------------- */ .player-fut-contract-body { padding:12px!important; } .player-fut-back-header { padding:4px 4px 10px; color:#fff; border-bottom:1px solid rgba(255,255,255,.07); font-size:.78rem; font-weight:850; text-align:center; } .player-fut-contract-content { flex:1; margin-top:8px; overflow:auto; scrollbar-width:thin; } .player-fut-contract-content table { width:100%!important; margin:0!important; color:#dce7f3!important; background:transparent!important; font-size:.67rem!important; } .player-fut-contract-content td, .player-fut-contract-content th { padding:.38rem .40rem!important; color:#dce7f3!important; background:#02050C!important; border-color:rgba(255,255,255,.045)!important; } .player-fut-contract-content tr:nth-child(even) td { background:#030711!important; } .player-card-back-btn { position:static!important; width:100%!important; min-height:31px!important; margin-top:10px!important; color:#e5edf7!important; background:#030711!important; border:1px solid rgba(255,255,255,.12)!important; border-radius:6px!important; font-size:.67rem!important; font-weight:800!important; box-shadow:none!important; } .player-card-back-btn:hover { color:#fff!important; background:#0D1B2D!important; border-color: rgba(var(--theme-secondary-rgb,0,210,255),.52)!important; transform:none!important; } /* --------------------------------------------------------- Responsive --------------------------------------------------------- */ @media(max-width:1199.98px) { .player-fut-wrapper { max-width:275px!important; } } @media(max-width:767.98px) { .player-fut-col { padding-left:5px!important; padding-right:5px!important; } .player-fut-card, .player-fut-card-owner, .player-fut-card-mercato { min-height:440px!important; } .player-fut-body { padding:10px!important; } .player-fut-main { grid-template-columns:50px minmax(0,1fr) 50px; } .player-rating { width:38px; height:38px; font-size:.88rem; } .player-fut-photo-wrap { min-height:145px; } .player-fut-photo { max-width:132px!important; height:145px!important; } .player-fut-name-link { font-size:.75rem; } } @media(max-width:420px) { .player-fut-col { width:100%!important; } .player-fut-wrapper { max-width:290px!important; } } /* ========================================================= PLAYER MODALS / STATS / CONTRACTS - PRO UI ========================================================= */ .modal-backdrop.show { opacity:.72!important; background:#000!important; } .modal-dialog { margin:1rem auto; } .modal-dialog.modal-lg, .modal-dialog.modal-xl { max-width:min(1120px,calc(100vw - 32px))!important; } .modal-content { overflow:hidden; color:var(--theme-text,#f8fafc)!important; background:linear-gradient(180deg,#030711 0%,#02050C 100%)!important; border:1px solid rgba(var(--theme-secondary-rgb,0,210,255),.18)!important; border-radius:14px!important; box-shadow:0 26px 70px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.035)!important; } .modal-header { min-height:58px; padding:13px 16px!important; background:#030711!important; border-bottom:1px solid rgba(255,255,255,.07)!important; } .modal-title, .modal-header h5, .modal-header h6 { margin:0!important; color:#fff!important; font-size:.88rem!important; font-weight:850!important; letter-spacing:.01em; text-transform:none!important; } .modal-header small { color:#fff!important; font-size:inherit!important; } .modal-body { padding:14px!important; color:#dce7f3!important; background:#02050C!important; background-image:none!important; overflow:auto; } .modal-footer { padding:10px 14px!important; background:#02050C!important; border-top:1px solid rgba(255,255,255,.06)!important; } .modal .btn-close { width:30px; height:30px; margin:0!important; padding:0!important; border-radius:7px; background-color:#07111F!important; filter:invert(1) grayscale(1) brightness(1.8); opacity:.78; } .modal .btn-close:hover { opacity:1; } .modal img[src*="/Players/"], .modal img[src*="img/Players/"] { max-width:180px; max-height:220px; object-fit:contain; border-radius:10px; background:radial-gradient(circle,rgba(var(--theme-secondary-rgb,0,210,255),.10),transparent 68%); filter:drop-shadow(0 12px 18px rgba(0,0,0,.48)); } /* CONTRACTS */ .player-contract-modal-table, .player-contract-flip-table { width:100%!important; margin:0!important; color:#dce7f3!important; background:transparent!important; border-collapse:separate!important; border-spacing:0 5px!important; font-size:.76rem!important; } .player-contract-modal-table td, .player-contract-flip-table td { padding:.58rem .65rem!important; color:#dce7f3!important; background:#030711!important; border-top:1px solid rgba(255,255,255,.06)!important; border-bottom:1px solid rgba(255,255,255,.06)!important; vertical-align:middle!important; } .player-contract-modal-table td:first-child, .player-contract-flip-table td:first-child { border-left:1px solid rgba(255,255,255,.06)!important; border-radius:8px 0 0 8px; } .player-contract-modal-table td:last-child, .player-contract-flip-table td:last-child { border-right:1px solid rgba(255,255,255,.06)!important; border-radius:0 8px 8px 0; } .player-contract-modal-table tr:hover td, .player-contract-flip-table tr:hover td { background:#07111F!important; } .player-contract-modal-table td:first-child { color:#FFFFFF!important; font-weight:750; text-align:left!important; } .player-contract-flip-table td { text-align:center!important; } .player-contract-flip-table tr:nth-child(odd) td { color:#FFFFFF!important; background:#07111F!important; font-size:.66rem; font-weight:800; letter-spacing:.025em; text-transform:uppercase; } .player-contract-flip-table tr:nth-child(even) td { color:#fff!important; font-size:.80rem; font-weight:800; } .player-modal-gp-icon { width:18px!important; height:18px!important; margin-left:4px; object-fit:contain; vertical-align:-4px; } .player-contract-warning { display:inline-flex; padding:5px 9px; color:#fecaca; background:#351016; border:1px solid rgba(239,68,68,.35); border-radius:6px; font-size:.66rem; font-weight:800; } /* STATS */ .player-stats-modal-table { width:100%!important; margin:0!important; color:#dce7f3!important; background:#02050C!important; border-collapse:separate!important; border-spacing:0!important; font-size:.66rem!important; } .player-stats-modal-table > tbody > tr:first-child > td { padding:.58rem .42rem!important; color:#FFFFFF!important; background:#07111F!important; border-bottom:1px solid rgba(var(--theme-secondary-rgb,0,210,255),.16)!important; font-size:.62rem; font-weight:900; letter-spacing:.055em; text-align:center; text-transform:uppercase; } .player-stats-modal-table td { padding:.42rem .44rem!important; color:#cbd5e1!important; background:#02050C!important; border-bottom:1px solid rgba(255,255,255,.045)!important; vertical-align:middle!important; } .player-stats-modal-table .player-stat-row-alt td { background:#030711!important; } .player-stats-modal-table tr:hover td { background:#07111F!important; } .player-stat-label { font-weight:700; } .player-stat-value { display:inline-flex; min-width:31px; min-height:25px; padding:3px 6px; align-items:center; justify-content:center; border-radius:6px; color:#030711; font-size:.72rem; font-weight:900; font-variant-numeric:tabular-nums; box-shadow:inset 0 1px 0 rgba(255,255,255,.22); } .player-stat-label.player-stat-elite { color:#55e7cb!important; } .player-stat-label.player-stat-high { color:#b6e86b!important; } .player-stat-label.player-stat-medium { color:#3CAEFF!important; } .player-stat-label.player-stat-low { color:#ef716b!important; } .player-stat-value.player-stat-elite { background:#42dfc1; border:1px solid #72f0d8; } .player-stat-value.player-stat-high { background:#a8df5c; border:1px solid #c6ef85; } .player-stat-value.player-stat-medium { background:#3CAEFF; border:1px solid #78EEFF; } .player-stat-value.player-stat-low { color:#fff; background:#c84640; border:1px solid #ed6a64; } /* SKILLS */ .player-skills-cell { padding:9px!important; text-align:left!important; } .player-skill-chip { display:inline-flex; margin:3px; padding:4px 7px; align-items:center; color:#cfe8ff; background:#0D1B2D; border:1px solid rgba(var(--theme-secondary-rgb,0,210,255),.18); border-radius:999px; font-size:.58rem; font-weight:700; line-height:1.1; } .player-skill-chip-search { color:#d1fae5; background:#103128; border-color:rgba(52,211,153,.35); } .player-skill-chip-hidden { color:#78EEFF; background:#07111F; border-color:rgba(245,158,11,.36); } /* ARROWS */ .player-arrows-table { width:100%; margin:4px 0!important; color:#fff; border-collapse:separate; border-spacing:3px; font-size:.66rem; text-align:center; } .player-arrows-bar-row td { height:7px!important; padding:0!important; border:0!important; border-radius:999px; } .arrow-prob-a { background:#FFFFFF!important; } .arrow-prob-b { background:#4ade80!important; } .arrow-prob-c { background:#3CAEFF!important; } .arrow-prob-d { background:#3CAEFF!important; } .arrow-prob-e { background:#ef4444!important; } .player-arrows-values-row td { padding:6px 2px!important; color:#cbd5e1!important; background:transparent!important; border:0!important; font-weight:800; } .player-arrows-values-row img { width:22px; height:22px; object-fit:contain; } /* PITCH */ .pitch { position:relative; width:180px; height:230px; margin:10px auto; overflow:hidden; border:1px solid rgba(255,255,255,.10); border-radius:10px; background:#07150d; box-shadow:0 8px 20px rgba(0,0,0,.30); } .pitch > img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; pointer-events:none; } .pitch > .pos1, .pitch > .pos2 { position:absolute; z-index:2; border-radius:4px; pointer-events:none; } .pitch > .pos1 { background:rgba(52,211,153,.35); border:1px solid rgba(110,231,183,.45); } .pitch > .pos2 { background:rgba(52,211,153,.72); border:1px solid rgba(167,243,208,.72); box-shadow:0 0 10px rgba(52,211,153,.28); } .pitch > .gk { left:48px; top:195px; width:84px; height:32px; } .pitch > .cb { left:45px; top:159px; width:90px; height:32px; } .pitch > .lb { left:3px; top:159px; width:41px; height:68px; } .pitch > .rb { left:137px; top:159px; width:41px; height:68px; } .pitch > .dmf { left:45px; top:131px; width:90px; height:27px; } .pitch > .cmf { left:45px; top:101px; width:90px; height:29px; } .pitch > .lmf { left:3px; top:72px; width:41px; height:86px; } .pitch > .rmf { left:137px; top:72px; width:41px; height:86px; } .pitch > .amf { left:45px; top:72px; width:90px; height:27px; } .pitch > .lwf { left:3px; top:3px; width:41px; height:68px; } .pitch > .rwf { left:137px; top:3px; width:41px; height:68px; } .pitch > .ss { left:45px; top:39px; width:90px; height:32px; } .pitch > .cf { left:48px; top:3px; width:84px; height:32px; } [id^="modalManager"] .modal-dialog, [id^="modalMaxLevels"] .modal-dialog, [id^="modInfoUser_"] .modal-dialog, [id^="modInfoMaxLevel_"] .modal-dialog { max-width:min(1160px,calc(100vw - 30px))!important; } @media(max-width:767.98px) { .modal-dialog, .modal-dialog.modal-lg, .modal-dialog.modal-xl, [id^="modalManager"] .modal-dialog, [id^="modalMaxLevels"] .modal-dialog, [id^="modInfoUser_"] .modal-dialog, [id^="modInfoMaxLevel_"] .modal-dialog { width:calc(100vw - 12px)!important; max-width:none!important; margin:6px auto!important; } .modal-content { max-height:calc(100vh - 12px); border-radius:10px!important; } .modal-header { min-height:48px; padding:10px 11px!important; } .modal-body { padding:8px!important; } .player-stats-modal-table { min-width:760px; font-size:.58rem!important; } .player-stats-modal-table td { padding:.34rem .32rem!important; } .player-contract-modal-table, .player-contract-flip-table { font-size:.69rem!important; } .pitch { width:150px; height:192px; } .pitch > .gk { left:40px; top:163px; width:70px; height:27px; } .pitch > .cb { left:38px; top:133px; width:75px; height:27px; } .pitch > .lb { left:3px; top:133px; width:34px; height:57px; } .pitch > .rb { left:114px; top:133px; width:34px; height:57px; } .pitch > .dmf { left:38px; top:109px; width:75px; height:23px; } .pitch > .cmf { left:38px; top:84px; width:75px; height:24px; } .pitch > .lmf { left:3px; top:60px; width:34px; height:72px; } .pitch > .rmf { left:114px; top:60px; width:34px; height:72px; } .pitch > .amf { left:38px; top:60px; width:75px; height:23px; } .pitch > .lwf { left:3px; top:3px; width:34px; height:57px; } .pitch > .rwf { left:114px; top:3px; width:34px; height:57px; } .pitch > .ss { left:38px; top:33px; width:75px; height:27px; } .pitch > .cf { left:40px; top:3px; width:70px; height:27px; } .player-skill-chip { margin:2px; padding:3px 5px; font-size:.52rem; } } /* ========================================================= CARTES JOUEURS - HARMONISATION MYTEAM / DATABASE ========================================================= */ /* --------------------------------------------------------- MYTEAM : hauteur suffisante pour ne plus couper les boutons --------------------------------------------------------- */ /* Les faces .flip-card-front/.flip-card-back sont absolues. Il faut donc une hauteur explicite sur le parent .flip-card. */ .player-fut-wrapper { height:auto!important; min-height:0!important; } .player-fut-card { height:560px!important; min-height:560px!important; } .player-fut-card.player-fut-card-owner { height:650px!important; min-height:650px!important; } .player-fut-card.player-fut-card-owner.player-fut-card-mercato { height:710px!important; min-height:710px!important; } /* Les deux faces prennent exactement toute la hauteur */ .player-fut-front, .player-fut-back { width:100%!important; height:100%!important; min-height:100%!important; } /* Le corps devient une vraie colonne sur toute la hauteur. Les actions sont donc repoussées naturellement en bas. */ .player-fut-body { box-sizing:border-box!important; width:100%; height:100%!important; min-height:0!important; } .player-fut-extra { flex:0 1 auto!important; max-height:245px; overflow:auto!important; scrollbar-width:thin; scrollbar-color:#0D1B2D transparent; } .player-fut-actions { flex:0 0 auto; margin-top:auto!important; padding-top:10px!important; padding-bottom:1px!important; background: linear-gradient( 180deg, transparent, rgba(2,5,12,.90) 40% ); } /* Les boutons du bas restent toujours visibles */ .player-fut-actions .player-card-icon-btn { visibility:visible!important; opacity:1!important; position:static!important; bottom:auto!important; left:auto!important; right:auto!important; z-index:8; } /* Bouton retour du verso */ .player-card-back-btn, .player-fut-back .flip-card-btn-turn-to-front { visibility:visible!important; opacity:1!important; } /* --------------------------------------------------------- DATABASE : rapprochement visuel du rendu MyTeam --------------------------------------------------------- */ .players-market-page .flip-card-3D-wrapper { max-width:285px!important; } .players-market-page .flip-card { height:520px!important; min-height:520px!important; border-radius:14px!important; background: radial-gradient( circle at 50% 13%, rgba(var(--theme-secondary-rgb,0,210,255),.055), transparent 32% ), linear-gradient( 180deg, #030711 0%, #02050C 100% )!important; } .players-market-page .flip-card-front, .players-market-page .flip-card-back { height:100%!important; border-width:1px!important; border-radius:13px!important; background: linear-gradient( 180deg, rgba(255,255,255,.022), transparent 25% ), #02050C!important; overflow:hidden; } /* Carte DB : moins "vide", contenu plus proche de MyTeam */ .players-market-page .flip-card-front .card-body, .players-market-page .flip-card-back .card-body { display:flex; flex-direction:column; box-sizing:border-box; width:100%; height:100%; padding:11px!important; } /* Nom */ .players-market-page .flip-card-front h4, .players-market-page .flip-card-front h5, .players-market-page .flip-card-back h4, .players-market-page .flip-card-back h5 { letter-spacing:0!important; } /* Photo : plus présente comme sur MyTeam */ .players-market-page .player-photo { width:112px!important; height:142px!important; margin:8px auto!important; padding:0!important; object-fit:contain!important; object-position:center bottom; border:1px solid rgba(255,255,255,.10)!important; border-radius:50% 50% 12px 12px!important; background: radial-gradient( circle at 50% 45%, rgba(var(--theme-secondary-rgb,0,210,255),.10), transparent 68% )!important; box-shadow: 0 9px 20px rgba(0,0,0,.42)!important; } /* Logos club / nation / compétition */ .players-market-page .club-logo { width:27px!important; height:27px!important; padding:2px; object-fit:contain; border-radius:6px; background:#030711; border:1px solid rgba(255,255,255,.07); } /* Les anciennes notes inline deviennent de vrais pavés propres */ .players-market-page .flip-card-front span[style*="background-color"] { display:inline-flex!important; min-width:42px!important; min-height:38px!important; align-items:center!important; justify-content:center!important; padding:3px 6px!important; border-radius:8px!important; font-size:.92rem!important; font-weight:900!important; line-height:1!important; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 5px 12px rgba(0,0,0,.22)!important; } /* Badge de poste historique */ .players-market-page .flip-card-front h5[style*="background-color"] { display:inline-flex!important; min-width:38px; min-height:23px; margin:0!important; padding:3px 7px!important; align-items:center; justify-content:center; border-radius:6px!important; color:#fff!important; font-size:.65rem!important; font-weight:900!important; line-height:1!important; } /* Style de jeu : bloc proche MyTeam */ .players-market-page .styleDeJeu { display:block; width:100%; margin-top:5px; padding:7px 8px; color:#dbeafe!important; background:#030711; border:1px solid rgba(255,255,255,.06); border-radius:8px; font-size:.65rem!important; font-style:normal!important; font-weight:750; line-height:1.25; text-align:center; } /* Infos âge / taille / poids */ .players-market-page .flip-card-front p { margin:6px 0!important; color:#94a3b8!important; font-size:.58rem!important; font-style:normal!important; text-align:center; } /* Actions DB placées en bas, toujours visibles */ .players-market-page .flip-card-front .flip-card-btn-turn-to-back, .players-market-page .flip-card-front .flip-card-btn-turn-to-back2 { visibility:visible!important; opacity:1!important; bottom:7px!important; width:30px!important; height:30px!important; padding:0!important; color:#cbd5e1!important; background:#030711!important; border:1px solid rgba(255,255,255,.12)!important; border-radius:6px!important; box-shadow:none!important; } .players-market-page .flip-card-front .flip-card-btn-turn-to-back:hover, .players-market-page .flip-card-front .flip-card-btn-turn-to-back2:hover { color:#fff!important; background:#0D1B2D!important; border-color: rgba(var(--theme-secondary-rgb,0,210,255),.52)!important; } /* Même logique sur le verso */ .players-market-page .flip-card-back .flip-card-btn-turn-to-front { visibility:visible!important; opacity:1!important; bottom:7px!important; color:#e5edf7!important; background:#030711!important; border:1px solid rgba(255,255,255,.12)!important; border-radius:6px!important; } /* --------------------------------------------------------- TABLETTES / MOBILE --------------------------------------------------------- */ @media(max-width:767.98px) { .player-fut-card { height:540px!important; min-height:540px!important; } .player-fut-card.player-fut-card-owner { height:620px!important; min-height:620px!important; } .player-fut-card.player-fut-card-owner.player-fut-card-mercato { height:680px!important; min-height:680px!important; } .player-fut-extra { max-height:220px; } .players-market-page .flip-card { height:490px!important; min-height:490px!important; } .players-market-page .player-photo { width:94px!important; height:122px!important; } } @media(max-width:420px) { .player-fut-card, .player-fut-card.player-fut-card-owner { height:610px!important; min-height:610px!important; } .player-fut-card.player-fut-card-owner.player-fut-card-mercato { height:675px!important; min-height:675px!important; } } /* ========================================================= CARTES + MODALS V2 Compact, sans scroll interne ========================================================= */ /* ========================================================= 1. MYTEAM : CARTE PLUS COMPACTE ========================================================= */ /* Annule les hauteurs trop grandes de la version précédente. Le contenu contractuel ne doit plus avoir son propre scroll. */ .player-fut-card, .player-fut-card.player-fut-card-owner, .player-fut-card.player-fut-card-owner.player-fut-card-mercato { height:535px!important; min-height:535px!important; max-height:535px!important; } .player-fut-front, .player-fut-back { height:100%!important; min-height:100%!important; overflow:hidden!important; } .player-fut-body { height:100%!important; min-height:0!important; padding:10px!important; } /* Photo légèrement plus compacte */ .player-fut-photo-wrap { min-height:142px!important; max-height:142px!important; } .player-fut-photo { height:142px!important; max-height:142px!important; max-width:142px!important; } /* Réduction des espaces */ .player-fut-main { margin-top:6px!important; } .player-fut-style { min-height:38px!important; margin-top:4px!important; padding:5px 30px 5px 8px!important; } .player-fut-physical { margin-top:5px!important; font-size:.56rem!important; } /* IMPORTANT : plus de scrollbar interne dans la partie contrat. */ .player-fut-extra { flex:1 1 auto!important; min-height:0!important; max-height:none!important; margin-top:5px!important; overflow:visible!important; } /* Tables contrat compactées */ .player-fut-extra table, .player-contract-table, .player-card-actions-table, .player-values-table { font-size:.58rem!important; } .player-fut-extra table td, .player-fut-extra table th, .player-contract-table td, .player-card-actions-table td, .player-values-table td { padding:.22rem .28rem!important; line-height:1.12!important; } /* Boutons de contrat plus petits */ .player-fut-extra .btn, .player-fut-extra .btn-sm, .player-contract-action { min-height:25px!important; padding:2px 5px!important; margin:1px auto!important; font-size:.56rem!important; line-height:1.1!important; } /* Actions toujours en bas */ .player-fut-actions { flex:0 0 auto!important; margin-top:auto!important; padding-top:5px!important; background:transparent!important; } /* ========================================================= 2. DATABASE : MEME PHOTO QUE MYTEAM ========================================================= */ /* On annule l'ancien cercle/ovale. La photo DB devient un portrait rectangulaire comme MyTeam. */ .players-market-page .player-photo { width:122px!important; max-width:122px!important; height:145px!important; max-height:145px!important; margin:7px auto!important; padding:0!important; object-fit:contain!important; object-position:center bottom!important; border:1px solid rgba(255,255,255,.08)!important; border-radius:0!important; background: linear-gradient( 180deg, rgba(var(--theme-secondary-rgb,0,210,255),.10), rgba(var(--theme-primary-rgb,0,78,146),.22) )!important; box-shadow: 0 8px 18px rgba(0,0,0,.38)!important; filter:none!important; } /* Couleur de fond photo selon poste */ .players-market-page .flip-card_GB .player-photo { background: linear-gradient(180deg,#3CAEFF,#3CAEFF)!important; } .players-market-page .flip-card_DEF .player-photo { background: linear-gradient(180deg,#0878D1,#0D1B2D)!important; } .players-market-page .flip-card_MIL .player-photo { background: linear-gradient(180deg,#158653,#0a402a)!important; } .players-market-page .flip-card_ATT .player-photo { background: linear-gradient(180deg,#9c2437,#4d0e1a)!important; } /* Carte DB moins haute */ .players-market-page .flip-card { height:475px!important; min-height:475px!important; max-height:475px!important; } /* Les contenus restent visibles sans zones scrollables */ .players-market-page .flip-card-front, .players-market-page .flip-card-back, .players-market-page .flip-card-front .card-body, .players-market-page .flip-card-back .card-body { overflow:hidden!important; } /* ========================================================= 3. MODALS : AUCUN SCROLL INTERNE ========================================================= */ /* La version précédente forçait min-width:760px sur mobile. C'est la principale cause de la scrollbar horizontale. */ .modal-content { max-height:none!important; overflow:visible!important; } .modal-body { max-height:none!important; overflow:visible!important; padding:9px!important; } /* Modals joueurs plus larges sur desktop */ [id^="modalManager"] .modal-dialog, [id^="modalMaxLevels"] .modal-dialog, [id^="modInfoUser_"] .modal-dialog, [id^="modInfoMaxLevel_"] .modal-dialog { width:min(1180px,calc(100vw - 18px))!important; max-width:1180px!important; } /* Tableau stats compact */ .player-stats-modal-table { width:100%!important; min-width:0!important; table-layout:fixed!important; font-size:.54rem!important; } .player-stats-modal-table > tbody > tr:first-child > td { padding:.32rem .20rem!important; font-size:.53rem!important; letter-spacing:.025em!important; } .player-stats-modal-table td { padding:.24rem .22rem!important; font-size:.53rem!important; line-height:1.08!important; overflow-wrap:anywhere; } /* 4 groupes = 8 colonnes */ .player-stats-modal-table td:nth-child(odd) { width:18.5%; } .player-stats-modal-table td:nth-child(even) { width:6.5%; text-align:center; } /* Notes plus petites */ .player-stat-value { min-width:27px!important; min-height:22px!important; padding:2px 4px!important; border-radius:5px!important; font-size:.61rem!important; } .player-stat-label { font-size:.52rem!important; line-height:1.05!important; } /* ========================================================= 4. TERRAIN PLUS PETIT ========================================================= */ .pitch { width:112px!important; height:143px!important; margin:5px auto!important; border-radius:7px!important; } /* ratio ~ 0.622 de la version 180x230 */ .pitch > .gk { left:30px!important; top:121px!important; width:52px!important; height:20px!important; } .pitch > .cb { left:28px!important; top:99px!important; width:56px!important; height:20px!important; } .pitch > .lb { left:2px!important; top:99px!important; width:25px!important; height:42px!important; } .pitch > .rb { left:85px!important; top:99px!important; width:25px!important; height:42px!important; } .pitch > .dmf { left:28px!important; top:81px!important; width:56px!important; height:17px!important; } .pitch > .cmf { left:28px!important; top:63px!important; width:56px!important; height:18px!important; } .pitch > .lmf { left:2px!important; top:45px!important; width:25px!important; height:53px!important; } .pitch > .rmf { left:85px!important; top:45px!important; width:25px!important; height:53px!important; } .pitch > .amf { left:28px!important; top:45px!important; width:56px!important; height:17px!important; } .pitch > .lwf { left:2px!important; top:2px!important; width:25px!important; height:42px!important; } .pitch > .rwf { left:85px!important; top:2px!important; width:25px!important; height:42px!important; } .pitch > .ss { left:28px!important; top:24px!important; width:56px!important; height:20px!important; } .pitch > .cf { left:30px!important; top:2px!important; width:52px!important; height:20px!important; } /* ========================================================= 5. PROBABILITES / COMPETENCES COMPACTES ========================================================= */ .player-arrows-table { margin:2px 0!important; font-size:.53rem!important; } .player-arrows-bar-row td { height:5px!important; } .player-arrows-values-row td { padding:3px 1px!important; font-size:.51rem!important; } .player-arrows-values-row img { width:16px!important; height:16px!important; } .player-skills-cell { padding:4px!important; line-height:1!important; } .player-skill-chip { margin:1px!important; padding:2px 5px!important; font-size:.47rem!important; line-height:1.05!important; } /* Contrats modal compactés */ .player-contract-modal-table, .player-contract-flip-table { border-spacing:0 2px!important; font-size:.66rem!important; } .player-contract-modal-table td, .player-contract-flip-table td { padding:.35rem .42rem!important; } /* ========================================================= 6. MOBILE ========================================================= */ @media(max-width:767.98px) { /* MyTeam compact mais suffisamment haut */ .player-fut-card, .player-fut-card.player-fut-card-owner, .player-fut-card.player-fut-card-owner.player-fut-card-mercato { height:520px!important; min-height:520px!important; max-height:520px!important; } .player-fut-photo-wrap { min-height:132px!important; max-height:132px!important; } .player-fut-photo { height:132px!important; max-height:132px!important; } /* DB */ .players-market-page .flip-card { height:455px!important; min-height:455px!important; max-height:455px!important; } .players-market-page .player-photo { width:108px!important; max-width:108px!important; height:130px!important; max-height:130px!important; } /* Modal = quasiment toute la largeur, sans scrollbar interne */ .modal-dialog, .modal-dialog.modal-lg, .modal-dialog.modal-xl, [id^="modalManager"] .modal-dialog, [id^="modalMaxLevels"] .modal-dialog, [id^="modInfoUser_"] .modal-dialog, [id^="modInfoMaxLevel_"] .modal-dialog { width:calc(100vw - 6px)!important; max-width:none!important; margin:3px auto!important; } .modal-header { min-height:38px!important; padding:6px 8px!important; } .modal-header h5, .modal-header h6, .modal-title { font-size:.73rem!important; } .modal-body { padding:4px!important; } .player-stats-modal-table { width:100%!important; min-width:0!important; table-layout:fixed!important; font-size:.47rem!important; } .player-stats-modal-table td { padding:.18rem .12rem!important; font-size:.46rem!important; line-height:1.02!important; } .player-stats-modal-table > tbody > tr:first-child > td { padding:.23rem .10rem!important; font-size:.46rem!important; } .player-stat-label { font-size:.45rem!important; } .player-stat-value { min-width:23px!important; min-height:19px!important; padding:1px 3px!important; font-size:.53rem!important; } .pitch { width:96px!important; height:123px!important; } /* ratio 96/112 */ .pitch > .gk { left:26px!important; top:104px!important; width:45px!important; height:17px!important; } .pitch > .cb { left:24px!important; top:85px!important; width:48px!important; height:17px!important; } .pitch > .lb { left:2px!important; top:85px!important; width:21px!important; height:36px!important; } .pitch > .rb { left:73px!important; top:85px!important; width:21px!important; height:36px!important; } .pitch > .dmf { left:24px!important; top:70px!important; width:48px!important; height:15px!important; } .pitch > .cmf { left:24px!important; top:54px!important; width:48px!important; height:15px!important; } .pitch > .lmf { left:2px!important; top:39px!important; width:21px!important; height:46px!important; } .pitch > .rmf { left:73px!important; top:39px!important; width:21px!important; height:46px!important; } .pitch > .amf { left:24px!important; top:39px!important; width:48px!important; height:15px!important; } .pitch > .lwf { left:2px!important; top:2px!important; width:21px!important; height:36px!important; } .pitch > .rwf { left:73px!important; top:2px!important; width:21px!important; height:36px!important; } .pitch > .ss { left:24px!important; top:21px!important; width:48px!important; height:17px!important; } .pitch > .cf { left:26px!important; top:2px!important; width:45px!important; height:17px!important; } .player-skill-chip { margin:1px!important; padding:2px 3px!important; font-size:.42rem!important; } .player-arrows-values-row img { width:14px!important; height:14px!important; } } /* ========================================================= PLAYER MODALS V3 — ZERO SCROLL INTERNE ========================================================= */ /* Le conteneur Bootstrap du modal ne scrolle plus */ .modal { overflow:hidden!important; } .modal.show { overflow:hidden!important; } /* Le dialog reste centré et contenu dans le viewport */ [id^="modalManager"] .modal-dialog, [id^="modalMaxLevels"] .modal-dialog, [id^="modInfoUser_"] .modal-dialog, [id^="modInfoMaxLevel_"] .modal-dialog { display:flex!important; width:min(1180px,calc(100vw - 12px))!important; max-width:none!important; min-height:0!important; max-height:none!important; margin:6px auto!important; align-items:flex-start; } /* Aucun scroll sur le content/body */ [id^="modalManager"] .modal-content, [id^="modalMaxLevels"] .modal-content, [id^="modInfoUser_"] .modal-content, [id^="modInfoMaxLevel_"] .modal-content { width:100%!important; max-height:none!important; overflow:visible!important; } [id^="modalManager"] .modal-body, [id^="modalMaxLevels"] .modal-body, [id^="modInfoUser_"] .modal-body, [id^="modInfoMaxLevel_"] .modal-body { max-height:none!important; overflow:visible!important; overflow-x:visible!important; overflow-y:visible!important; scrollbar-width:none!important; } [id^="modalManager"] .modal-body::-webkit-scrollbar, [id^="modalMaxLevels"] .modal-body::-webkit-scrollbar, [id^="modInfoUser_"] .modal-body::-webkit-scrollbar, [id^="modInfoMaxLevel_"] .modal-body::-webkit-scrollbar { display:none!important; } /* Les anciens wrappers responsive autour des tables sont une cause fréquente de scrollbar horizontale. */ [id^="modalManager"] .table-responsive, [id^="modalMaxLevels"] .table-responsive, [id^="modInfoUser_"] .table-responsive, [id^="modInfoMaxLevel_"] .table-responsive { width:100%!important; max-width:100%!important; overflow:visible!important; overflow-x:visible!important; overflow-y:visible!important; } /* Tables toujours contraintes à la largeur du modal */ [id^="modalManager"] table, [id^="modalMaxLevels"] table, [id^="modInfoUser_"] table, [id^="modInfoMaxLevel_"] table, .player-stats-modal-table { width:100%!important; max-width:100%!important; min-width:0!important; table-layout:fixed!important; } /* Evite que le texte force une largeur supplémentaire */ .player-stats-modal-table td, .player-stats-modal-table th { min-width:0!important; max-width:none!important; white-space:normal!important; overflow-wrap:anywhere!important; word-break:normal!important; } /* --------------------------------------------------------- COMPACTION VERTICALE DE BASE --------------------------------------------------------- */ .player-stats-modal-table td { padding:.20rem .18rem!important; font-size:.50rem!important; line-height:1.02!important; } .player-stats-modal-table > tbody > tr:first-child > td { padding:.26rem .16rem!important; font-size:.79rem!important; //manual change } .player-stat-label { font-size:.48rem!important; } .player-stat-value { min-width:25px!important; min-height:20px!important; padding:1px 3px!important; font-size:.56rem!important; } .player-arrows-table { margin:1px 0!important; } .player-arrows-values-row td { padding:2px 1px!important; } .player-arrows-values-row img { width:13px!important; height:13px!important; } /* Terrain encore plus compact */ .pitch { width:90px!important; height:115px!important; margin:3px auto!important; } /* ratio 90/112 */ .pitch > .gk { left:24px!important; top:97px!important; width:42px!important; height:16px!important; } .pitch > .cb { left:23px!important; top:80px!important; width:45px!important; height:16px!important; } .pitch > .lb { left:2px!important; top:80px!important; width:20px!important; height:34px!important; } .pitch > .rb { left:68px!important; top:80px!important; width:20px!important; height:34px!important; } .pitch > .dmf { left:23px!important; top:65px!important; width:45px!important; height:14px!important; } .pitch > .cmf { left:23px!important; top:51px!important; width:45px!important; height:14px!important; } .pitch > .lmf { left:2px!important; top:36px!important; width:20px!important; height:43px!important; } .pitch > .rmf { left:68px!important; top:36px!important; width:20px!important; height:43px!important; } .pitch > .amf { left:23px!important; top:36px!important; width:45px!important; height:14px!important; } .pitch > .lwf { left:2px!important; top:2px!important; width:20px!important; height:34px!important; } .pitch > .rwf { left:68px!important; top:2px!important; width:20px!important; height:34px!important; } .pitch > .ss { left:23px!important; top:19px!important; width:45px!important; height:16px!important; } .pitch > .cf { left:24px!important; top:2px!important; width:42px!important; height:16px!important; } /* Compétences : chips très compactes */ .player-skills-cell { padding:3px!important; } .player-skill-chip { margin:1px!important; padding:2px 4px!important; font-size:.43rem!important; line-height:1!important; } /* ========================================================= ADAPTATION A LA HAUTEUR DE L'ECRAN zoom agit sur le layout : pas seulement visuellement. ========================================================= */ /* Ecrans ~900 px de haut */ @media (max-height:900px) { [id^="modalManager"] .modal-dialog, [id^="modalMaxLevels"] .modal-dialog, [id^="modInfoUser_"] .modal-dialog, [id^="modInfoMaxLevel_"] .modal-dialog { zoom:.92; } } /* Ecrans portables classiques */ @media (max-height:800px) { [id^="modalManager"] .modal-dialog, [id^="modalMaxLevels"] .modal-dialog, [id^="modInfoUser_"] .modal-dialog, [id^="modInfoMaxLevel_"] .modal-dialog { zoom:.84; width:min(1360px,calc((100vw - 10px) / .84))!important; } .modal-header { min-height:40px!important; padding:6px 9px!important; } .modal-body { padding:5px!important; } } /* Hauteurs <= 700 px */ @media (max-height:700px) { [id^="modalManager"] .modal-dialog, [id^="modalMaxLevels"] .modal-dialog, [id^="modInfoUser_"] .modal-dialog, [id^="modInfoMaxLevel_"] .modal-dialog { zoom:.74; width:min(1500px,calc((100vw - 8px) / .74))!important; margin:3px auto!important; } } /* Très petits écrans en hauteur */ @media (max-height:600px) { [id^="modalManager"] .modal-dialog, [id^="modalMaxLevels"] .modal-dialog, [id^="modInfoUser_"] .modal-dialog, [id^="modInfoMaxLevel_"] .modal-dialog { zoom:.64; width:min(1700px,calc((100vw - 6px) / .64))!important; } } /* ========================================================= MOBILE : compacte aussi selon largeur ========================================================= */ @media (max-width:767.98px) { .modal { padding:0!important; } [id^="modalManager"] .modal-dialog, [id^="modalMaxLevels"] .modal-dialog, [id^="modInfoUser_"] .modal-dialog, [id^="modInfoMaxLevel_"] .modal-dialog { width:calc(100vw - 4px)!important; margin:2px auto!important; } .player-stats-modal-table td { padding:.14rem .10rem!important; font-size:.43rem!important; } .player-stats-modal-table > tbody > tr:first-child > td { padding:.18rem .08rem!important; font-size:.42rem!important; } .player-stat-label { font-size:.41rem!important; } .player-stat-value { min-width:21px!important; min-height:17px!important; padding:1px 2px!important; font-size:.48rem!important; } .player-skill-chip { padding:1px 3px!important; font-size:.38rem!important; } .pitch { width:76px!important; height:97px!important; } } /* Sur mobile en paysage, la hauteur est le vrai facteur limitant : réduction plus forte. */ @media (max-width:900px) and (max-height:550px) { [id^="modalManager"] .modal-dialog, [id^="modalMaxLevels"] .modal-dialog, [id^="modInfoUser_"] .modal-dialog, [id^="modInfoMaxLevel_"] .modal-dialog { zoom:.56; width:calc((100vw - 4px) / .56)!important; } } /* ========================================================= PLAYER MODALS V4 — CORRECTION DEFINITIVE DES SCROLLBARS ========================================================= La V3 utilisait zoom, ce qui réduisait le rendu mais pas correctement la boîte de layout. Ici on annule totalement cette technique. ========================================================= */ /* --------------------------------------------------------- 1. ANNULE TOUS LES ZOOM / TRANSFORM HERITES --------------------------------------------------------- */ [id^="modalManager"] .modal-dialog, [id^="modalMaxLevels"] .modal-dialog, [id^="modInfoUser_"] .modal-dialog, [id^="modInfoMaxLevel_"] .modal-dialog { zoom:1!important; transform:none!important; box-sizing:border-box!important; width:min(1080px,calc(100vw - 16px))!important; max-width:min(1080px,calc(100vw - 16px))!important; height:auto!important; min-height:0!important; max-height:none!important; margin:8px auto!important; } /* --------------------------------------------------------- 2. LE MODAL NE DOIT JAMAIS CREER DE SCROLL INTERNE --------------------------------------------------------- */ .modal, .modal.show { overflow-x:hidden!important; overflow-y:hidden!important; } [id^="modalManager"] .modal-content, [id^="modalMaxLevels"] .modal-content, [id^="modInfoUser_"] .modal-content, [id^="modInfoMaxLevel_"] .modal-content, .modal-dialog-scrollable .modal-content { width:100%!important; height:auto!important; min-height:0!important; max-height:none!important; overflow:hidden!important; } [id^="modalManager"] .modal-body, [id^="modalMaxLevels"] .modal-body, [id^="modInfoUser_"] .modal-body, [id^="modInfoMaxLevel_"] .modal-body, .modal-dialog-scrollable .modal-body { width:100%!important; height:auto!important; min-height:0!important; max-height:none!important; overflow:hidden!important; overflow-x:hidden!important; overflow-y:hidden!important; padding:7px!important; } /* Neutralise Bootstrap */ .modal-dialog-scrollable { height:auto!important; max-height:none!important; } .modal-dialog-scrollable .modal-content { max-height:none!important; } .modal-dialog-scrollable .modal-body { overflow-y:hidden!important; } /* --------------------------------------------------------- 3. AUCUN WRAPPER TABLE NE PEUT DEBORDER --------------------------------------------------------- */ [id^="modalManager"] .table-responsive, [id^="modalMaxLevels"] .table-responsive, [id^="modInfoUser_"] .table-responsive, [id^="modInfoMaxLevel_"] .table-responsive { display:block!important; width:100%!important; max-width:100%!important; margin:0!important; padding:0!important; overflow:hidden!important; } /* --------------------------------------------------------- 4. TABLE STATS : LARGEUR REELLE 100% --------------------------------------------------------- */ .player-stats-modal-table { display:table!important; width:100%!important; min-width:0!important; max-width:100%!important; margin:0!important; table-layout:fixed!important; border-collapse:collapse!important; font-size:.51rem!important; } /* 8 colonnes : libellé / valeur x 4. Les valeurs occupent peu de place, les libellés le reste. */ .player-stats-modal-table td:nth-child(1), .player-stats-modal-table td:nth-child(3), .player-stats-modal-table td:nth-child(5), .player-stats-modal-table td:nth-child(7) { width:18.5%!important; } .player-stats-modal-table td:nth-child(2), .player-stats-modal-table td:nth-child(4), .player-stats-modal-table td:nth-child(6), .player-stats-modal-table td:nth-child(8) { width:6.5%!important; } .player-stats-modal-table td, .player-stats-modal-table th { min-width:0!important; max-width:none!important; padding:3px 3px!important; white-space:normal!important; word-break:normal!important; overflow-wrap:anywhere!important; line-height:1.05!important; } .player-stats-modal-table > tbody > tr:first-child > td { padding:4px 2px!important; font-size:.79rem!important; //manual change } /* Labels plus lisibles sans élargir */ .player-stat-label { display:inline!important; font-size:.48rem!important; line-height:1.05!important; } /* Notes compactes */ .player-stat-value { display:inline-flex!important; width:28px!important; min-width:28px!important; max-width:28px!important; height:22px!important; min-height:22px!important; padding:0!important; align-items:center; justify-content:center; font-size:.57rem!important; } /* --------------------------------------------------------- 5. ZONES BASSES PLUS COMPACTES --------------------------------------------------------- */ .player-arrows-table { width:100%!important; margin:2px 0!important; table-layout:fixed!important; } .player-arrows-bar-row td { height:4px!important; } .player-arrows-values-row td { padding:2px 1px!important; font-size:.47rem!important; line-height:1!important; } .player-arrows-values-row img { width:13px!important; height:13px!important; } /* Terrain */ .pitch { width:82px!important; height:105px!important; margin:3px auto!important; } /* coordonnées recalées pour 82 x 105 */ .pitch > .gk { left:22px!important; top:89px!important; width:38px!important; height:15px!important; } .pitch > .cb { left:21px!important; top:73px!important; width:41px!important; height:15px!important; } .pitch > .lb { left:2px!important; top:73px!important; width:18px!important; height:31px!important; } .pitch > .rb { left:62px!important; top:73px!important; width:18px!important; height:31px!important; } .pitch > .dmf { left:21px!important; top:59px!important; width:41px!important; height:13px!important; } .pitch > .cmf { left:21px!important; top:46px!important; width:41px!important; height:13px!important; } .pitch > .lmf { left:2px!important; top:33px!important; width:18px!important; height:39px!important; } .pitch > .rmf { left:62px!important; top:33px!important; width:18px!important; height:39px!important; } .pitch > .amf { left:21px!important; top:33px!important; width:41px!important; height:13px!important; } .pitch > .lwf { left:2px!important; top:2px!important; width:18px!important; height:31px!important; } .pitch > .rwf { left:62px!important; top:2px!important; width:18px!important; height:31px!important; } .pitch > .ss { left:21px!important; top:17px!important; width:41px!important; height:15px!important; } .pitch > .cf { left:22px!important; top:2px!important; width:38px!important; height:15px!important; } /* Compétences */ .player-skills-cell { padding:3px!important; line-height:.95!important; } .player-skill-chip { margin:1px!important; padding:2px 4px!important; font-size:.40rem!important; line-height:1!important; } /* --------------------------------------------------------- 6. SUPPRIME LES LARGEURS / HAUTEURS INLINE RESIDUELLES --------------------------------------------------------- */ [id^="modalManager"] table[width], [id^="modalMaxLevels"] table[width], [id^="modInfoUser_"] table[width], [id^="modInfoMaxLevel_"] table[width] { width:100%!important; } [id^="modalManager"] tr[height], [id^="modalMaxLevels"] tr[height], [id^="modInfoUser_"] tr[height], [id^="modInfoMaxLevel_"] tr[height] { height:auto!important; } /* --------------------------------------------------------- 7. MOBILE --------------------------------------------------------- */ @media(max-width:767.98px) { [id^="modalManager"] .modal-dialog, [id^="modalMaxLevels"] .modal-dialog, [id^="modInfoUser_"] .modal-dialog, [id^="modInfoMaxLevel_"] .modal-dialog { zoom:1!important; width:calc(100vw - 4px)!important; max-width:calc(100vw - 4px)!important; margin:2px auto!important; } .modal-header { min-height:34px!important; padding:4px 7px!important; } .modal-title, .modal-header h5, .modal-header h6 { font-size:.68rem!important; } .modal .btn-close { width:24px!important; height:24px!important; } .modal-body { padding:3px!important; } .player-stats-modal-table { width:100%!important; min-width:0!important; font-size:.41rem!important; } .player-stats-modal-table td, .player-stats-modal-table th { padding:2px 2px!important; font-size:.41rem!important; line-height:1!important; } .player-stats-modal-table > tbody > tr:first-child > td { padding:3px 1px!important; font-size:.40rem!important; } .player-stat-label { font-size:.40rem!important; } .player-stat-value { width:23px!important; min-width:23px!important; max-width:23px!important; height:18px!important; min-height:18px!important; font-size:.48rem!important; } .pitch { width:72px!important; height:92px!important; } .player-skill-chip { padding:1px 3px!important; font-size:.35rem!important; } .player-arrows-values-row img { width:11px!important; height:11px!important; } } /* --------------------------------------------------------- 8. PETITE HAUTEUR D'ECRAN Pas de zoom : seulement une compaction réelle. --------------------------------------------------------- */ @media(max-height:750px) { .modal-header { min-height:32px!important; padding:3px 7px!important; } .modal-body { padding:3px!important; } .player-stats-modal-table td { padding:2px 2px!important; } .pitch { width:68px!important; height:87px!important; margin:1px auto!important; } .player-skill-chip { margin:0 1px 1px!important; padding:1px 3px!important; } } /* ========================================================= PLAYER MODAL V5 — PANNEAUX + ONGLETS Nécessite usesPlayer-modal-v2.php ========================================================= */ /* Le nouveau contenu n'utilise plus le vieux tableau 8 colonnes. */ [id^="modalMaxLevels"] .modal-dialog, [id^="modInfoMaxLevel_"] .modal-dialog { width:min(980px,calc(100vw - 18px))!important; max-width:980px!important; margin:8px auto!important; } [id^="modalMaxLevels"] .modal-content, [id^="modInfoMaxLevel_"] .modal-content { overflow:hidden!important; border-radius:14px!important; border:1px solid rgba(var(--theme-secondary-rgb,0,210,255),.18)!important; background:#02050C!important; } [id^="modalMaxLevels"] .modal-header, [id^="modInfoMaxLevel_"] .modal-header { min-height:48px!important; padding:10px 14px!important; background:#030711!important; } [id^="modalMaxLevels"] .modal-body, [id^="modInfoMaxLevel_"] .modal-body { padding:10px!important; overflow:hidden!important; background:#02050C!important; } .player-modal-tabs-wrap { width:100%; } .player-modal-tabs { display:grid!important; grid-template-columns:repeat(4,1fr); gap:5px; margin:0 0 9px!important; padding:4px!important; border:1px solid rgba(255,255,255,.07); border-radius:9px; background:#030711; } .player-modal-tabs .nav-item { width:100%; } .player-modal-tabs .nav-link { width:100%; min-height:31px; padding:5px 7px!important; color:#94a3b8!important; background:transparent!important; border:0!important; border-radius:6px!important; font-size:.66rem!important; font-weight:800!important; line-height:1!important; text-transform:uppercase; letter-spacing:.035em; } .player-modal-tabs .nav-link:hover { color:#fff!important; background:#07111F!important; } .player-modal-tabs .nav-link.active { color:#fff!important; background:#034E8C!important; box-shadow:inset 0 -2px 0 var(--theme-secondary,#FFFFFF)!important; } .player-modal-tabcontent { width:100%; min-height:0; } .player-modal-tabcontent > .tab-pane { width:100%; } /* ---------------- STATS ---------------- */ .player-stat-groups { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; align-items:start; } .player-stat-panel { min-width:0; overflow:hidden; background:#030711; border:1px solid rgba(255,255,255,.07); border-radius:9px; } .player-stat-panel h6 { margin:0!important; padding:7px 8px!important; color:#FFFFFF!important; background:#07111F!important; border-bottom:1px solid rgba(255,255,255,.06); font-size:.61rem!important; font-weight:900!important; letter-spacing:.045em; text-align:left; text-transform:uppercase; } .player-stat-list { display:grid; grid-template-columns:1fr; } .player-stat-item { display:grid; grid-template-columns:minmax(0,1fr) 34px; gap:5px; align-items:center; min-height:30px; padding:4px 6px; border-bottom:1px solid rgba(255,255,255,.04); } .player-stat-item:last-child { border-bottom:0; } .player-stat-item:nth-child(even) { background:#030711; } .player-stat-item > span:first-child { min-width:0; color:#d5deea; font-size:.57rem!important; font-weight:650; line-height:1.12; } .player-stat-item .player-stat-value { width:31px!important; min-width:31px!important; max-width:31px!important; height:23px!important; min-height:23px!important; margin-left:auto; padding:0!important; font-size:.60rem!important; border-radius:6px!important; } /* ---------------- FORME ---------------- */ .player-form-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; max-width:620px; margin:16px auto; } .player-form-item { display:flex; min-height:92px; flex-direction:column; align-items:center; justify-content:center; gap:8px; background:#030711; border:1px solid rgba(255,255,255,.07); border-radius:10px; } .player-form-item img { width:34px!important; height:34px!important; object-fit:contain; } .player-form-item strong { color:#fff; font-size:.78rem; font-variant-numeric:tabular-nums; } .form-A{border-top:3px solid #FFFFFF}.form-B{border-top:3px solid #4ade80}.form-C{border-top:3px solid #3CAEFF}.form-D{border-top:3px solid #3CAEFF}.form-E{border-top:3px solid #ef4444} /* ---------------- POSITIONS ---------------- */ .player-position-card { display:flex; align-items:center; justify-content:center; min-height:290px; padding:10px; background:#030711; border:1px solid rgba(255,255,255,.07); border-radius:10px; } .player-position-card .pitch { width:170px!important; height:217px!important; margin:0!important; } /* recalage terrain pour 170x217 */ .player-position-card .pitch>.gk{left:45px!important;top:184px!important;width:79px!important;height:30px!important} .player-position-card .pitch>.cb{left:43px!important;top:150px!important;width:85px!important;height:30px!important} .player-position-card .pitch>.lb{left:3px!important;top:150px!important;width:38px!important;height:64px!important} .player-position-card .pitch>.rb{left:129px!important;top:150px!important;width:38px!important;height:64px!important} .player-position-card .pitch>.dmf{left:43px!important;top:124px!important;width:85px!important;height:25px!important} .player-position-card .pitch>.cmf{left:43px!important;top:95px!important;width:85px!important;height:27px!important} .player-position-card .pitch>.lmf{left:3px!important;top:68px!important;width:38px!important;height:81px!important} .player-position-card .pitch>.rmf{left:129px!important;top:68px!important;width:38px!important;height:81px!important} .player-position-card .pitch>.amf{left:43px!important;top:68px!important;width:85px!important;height:25px!important} .player-position-card .pitch>.lwf{left:3px!important;top:3px!important;width:38px!important;height:64px!important} .player-position-card .pitch>.rwf{left:129px!important;top:3px!important;width:38px!important;height:64px!important} .player-position-card .pitch>.ss{left:43px!important;top:37px!important;width:85px!important;height:30px!important} .player-position-card .pitch>.cf{left:45px!important;top:3px!important;width:79px!important;height:30px!important} /* ---------------- COMPETENCES ---------------- */ .player-skills-cloud { min-height:180px; padding:12px; background:#030711; border:1px solid rgba(255,255,255,.07); border-radius:10px; } .player-skills-cloud .player-skill-chip { margin:3px!important; padding:5px 8px!important; font-size:.57rem!important; border-radius:999px!important; } .player-hidden-skills { margin-top:12px; padding-top:10px; border-top:1px solid rgba(255,255,255,.07); } .player-modal-section-title { margin-bottom:5px; color:#3CAEFF; font-size:.59rem; font-weight:900; letter-spacing:.04em; text-transform:uppercase; } .player-empty-state { padding:30px 10px; color:#034E8C; font-size:.70rem; text-align:center; } /* ---------------- MOBILE ---------------- */ @media(max-width:767.98px){ [id^="modalMaxLevels"] .modal-dialog, [id^="modInfoMaxLevel_"] .modal-dialog{ width:calc(100vw - 6px)!important; max-width:calc(100vw - 6px)!important; margin:3px auto!important; } [id^="modalMaxLevels"] .modal-header, [id^="modInfoMaxLevel_"] .modal-header{ min-height:38px!important; padding:6px 8px!important; } [id^="modalMaxLevels"] .modal-body, [id^="modInfoMaxLevel_"] .modal-body{ padding:6px!important; } .player-modal-tabs{gap:3px;margin-bottom:6px!important;padding:3px!important} .player-modal-tabs .nav-link{min-height:27px;padding:4px 2px!important;font-size:.52rem!important;letter-spacing:0} .player-stat-groups{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; } .player-stat-panel h6{padding:5px 6px!important;font-size:.52rem!important} .player-stat-item{min-height:24px;padding:2px 4px;grid-template-columns:minmax(0,1fr) 29px;gap:3px} .player-stat-item>span:first-child{font-size:.48rem!important;line-height:1.05} .player-stat-item .player-stat-value{width:26px!important;min-width:26px!important;max-width:26px!important;height:19px!important;min-height:19px!important;font-size:.50rem!important} .player-form-grid{gap:4px;margin:8px auto} .player-form-item{min-height:64px;gap:4px;border-radius:7px} .player-form-item img{width:24px!important;height:24px!important} .player-form-item strong{font-size:.61rem} .player-position-card{min-height:220px;padding:6px} .player-position-card .pitch{transform:scale(.85);transform-origin:center} .player-skills-cloud{min-height:130px;padding:7px} .player-skills-cloud .player-skill-chip{margin:2px!important;padding:3px 5px!important;font-size:.48rem!important} } @media(max-width:420px){ .player-stat-item>span:first-child{font-size:.44rem!important} .player-stat-panel h6{font-size:.48rem!important} .player-modal-tabs .nav-link{font-size:.47rem!important} } /* ========================================================= MODAL - CROIX BLANCHE BOOTSTRAP ========================================================= On laisse Bootstrap dessiner son icône, puis on la force en blanc. Les anciens pseudo-éléments sont neutralisés. ========================================================= */ .modal .modal-header .btn-close, .modal .btn-close { --bs-btn-close-opacity: 1; --bs-btn-close-hover-opacity: 1; --bs-btn-close-focus-shadow: none; display:block!important; width:32px!important; min-width:32px!important; height:32px!important; margin:0!important; padding:6px!important; background-color:#0D1B2D!important; /* IMPORTANT : on garde l'icône Bootstrap */ background-size:14px 14px!important; background-position:center!important; background-repeat:no-repeat!important; border:1px solid #034E8C!important; border-radius:8px!important; opacity:1!important; visibility:visible!important; /* L'icône Bootstrap est noire par défaut. Inversion = blanc. */ filter:invert(1) grayscale(1) brightness(2)!important; box-shadow:none!important; z-index:9999!important; } /* Neutralise les anciens essais de croix CSS */ .modal .modal-header .btn-close::before, .modal .modal-header .btn-close::after, .modal .btn-close::before, .modal .btn-close::after { content:none!important; display:none!important; } /* Hover : le filtre reste blanc */ .modal .modal-header .btn-close:hover, .modal .btn-close:hover { background-color:#7f1d1d!important; border-color:#ef4444!important; opacity:1!important; filter:invert(1) grayscale(1) brightness(2)!important; } /* Focus */ .modal .modal-header .btn-close:focus, .modal .btn-close:focus { outline:none!important; box-shadow: 0 0 0 3px rgba(239,68,68,.18)!important; } /* ========================================================= FLIP CARDS - BOUTONS TOUJOURS VISIBLES ========================================================= Les joueurs en prêt n'ont plus ces boutons dans le HTML. Donc tout bouton réellement présent peut être affiché. ========================================================= */ .flip-card-btn-turn-to-back, .flip-card-btn-turn-to-back2, .flip-card-btn-turn-to-front { visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } /* Boutons face avant */ .flip-card-front .flip-card-btn-turn-to-back, .flip-card-front .flip-card-btn-turn-to-back2, .player-fut-front .flip-card-btn-turn-to-back, .player-fut-front .flip-card-btn-turn-to-back2 { display: inline-flex !important; align-items: center !important; justify-content: center !important; z-index: 20 !important; } /* Bouton retour face arrière */ .flip-card-back .flip-card-btn-turn-to-front, .player-fut-back .flip-card-btn-turn-to-front { display: inline-flex !important; align-items: center !important; justify-content: center !important; z-index: 20 !important; } /* Zone actions MyTeam */ .player-fut-actions { display: flex !important; visibility: visible !important; opacity: 1 !important; position: relative !important; z-index: 20 !important; } /* Évite qu'un overlay de la carte bloque les clics */ .flip-card-front::before, .flip-card-front::after, .flip-card-back::before, .flip-card-back::after, .player-fut-photo-halo { pointer-events: none !important; } /* Les boutons restent cliquables même si la carte utilise overflow hidden */ .flip-card button, .player-fut-card button { pointer-events: auto !important; } /* ========================================================= FLIP CARDS - ETAT NORMAL / PRET ========================================================= */ /* NORMAL : boutons visibles */ .player-owned-card .flip-card-btn-turn-to-back, .player-owned-card .flip-card-btn-turn-to-back2, .player-owned-card .flip-card-btn-turn-to-front { display:inline-flex !important; visibility:visible !important; opacity:1 !important; pointer-events:auto !important; } /* PRET : aucun bouton */ .player-loan-card .flip-card-btn-turn-to-back, .player-loan-card .flip-card-btn-turn-to-back2, .player-loan-card .flip-card-btn-turn-to-front, .player-loan-card .player-fut-actions { display:none !important; visibility:hidden !important; opacity:0 !important; pointer-events:none !important; } /* PRET : face contrat inaccessible et invisible */ .player-loan-card .flip-card-back { display:none !important; } /* PRET : jamais de flip */ .flip-card-3D-wrapper.player-loan-card .flip-card, .flip-card.player-loan-card { transform:none !important; } /* Les décors ne bloquent aucun clic */ .flip-card-front::before, .flip-card-front::after, .flip-card-back::before, .flip-card-back::after, .player-fut-photo-halo { pointer-events:none !important; } /* ========================================================= MATCH LIST / MATCH DETAILS - PRO UI usesMatchs.php + WC_usesMatchs.php ========================================================= */ .match-list-grid { --match-bg:#02050C; --match-surface:#030711; --match-surface-2:#07111F; --match-border:rgba(255,255,255,.09); --match-muted:#00D9FF; margin-left:-6px!important; margin-right:-6px!important; } .match-card-col { padding:6px!important; } .match-list-card { position:relative; height:100%; min-height:285px; padding:0!important; overflow:hidden; background: radial-gradient(circle at 50% 0%,rgba(var(--theme-secondary-rgb,0,210,255),.045),transparent 38%), linear-gradient(180deg,#030711 0%,#02050C 100%)!important; border:1px solid var(--match-border)!important; border-radius:12px!important; box-shadow:0 10px 26px rgba(0,0,0,.30)!important; } /* Thin status line instead of full-card coloured gradients */ .match-list-card::before { content:""; position:absolute; z-index:2; top:0; left:0; right:0; height:3px; background:#034E8C; } .match-list-card.match-status-to-enter::before { background:#3CAEFF; } .match-list-card.match-status-pending::before { background:#ef4444; } .match-list-card.match-status-validated::before { background:var(--theme-secondary,#FFFFFF); } .match-summary-table, .match-detail-header-table { width:100%!important; margin:0!important; table-layout:fixed; color:#e5edf7!important; background:transparent!important; font-size:.68rem!important; } .match-summary-table td, .match-detail-header-table td { padding:.42rem .34rem!important; color:#e5edf7!important; background:transparent!important; border-color:rgba(255,255,255,.045)!important; vertical-align:middle!important; } .match-summary-table tr:first-child td { padding-top:.72rem!important; } .match-team-logo { width:42px!important; height:42px!important; padding:2px; object-fit:contain; border-radius:50%; background:#030711; border:1px solid rgba(255,255,255,.08); box-shadow:0 5px 12px rgba(0,0,0,.30); } .match-summary-table h5, .match-detail-header-table h5 { margin:0!important; color:#fff!important; font-size:1rem!important; font-weight:950!important; font-variant-numeric:tabular-nums; } .match-summary-table p, .match-detail-header-table p { margin:2px 0 0!important; color:var(--match-muted)!important; font-size:.56rem!important; font-style:normal!important; } .match-summary-table td:first-child, .match-summary-table td:last-child { font-weight:750; } .match-status-label { display:inline-flex; padding:4px 7px; color:#d8f7ff; background:rgba(var(--theme-secondary-rgb,0,210,255),.10); border:1px solid rgba(var(--theme-secondary-rgb,0,210,255),.22); border-radius:999px; font-size:.56rem; font-weight:750; } .match-summary-table .fa-ambulance { color:#fb7185; font-size:.80rem; } .match-summary-table img[src*="/meteo/"] { max-width:58px!important; height:auto!important; } /* Homme du match */ .match-summary-table tr[style*="color:gold"] td, .match-stats-table tr[style*="color:gold"] td { padding:.42rem!important; color:#78EEFF!important; background:rgba(245,158,11,.08)!important; border-top:1px solid rgba(245,158,11,.15)!important; border-bottom:1px solid rgba(245,158,11,.15)!important; } /* Buttons */ .match-action-btn, .match-details-btn { width:100%!important; min-height:30px!important; margin:2px 0!important; padding:4px 8px!important; border-radius:6px!important; font-size:.65rem!important; font-weight:850!important; } .match-details-btn { color:#dff7ff!important; background:#0D1B2D!important; border:1px solid rgba(var(--theme-secondary-rgb,0,210,255),.28)!important; } .match-details-btn:hover { color:#fff!important; background:#0D1B2D!important; border-color:var(--theme-secondary,#FFFFFF)!important; } /* ========================================================= MATCH DETAILS OFFCANVAS ========================================================= */ .match-details-offcanvas { width:min(520px,94vw)!important; color:#e5edf7!important; background:linear-gradient(180deg,#030711,#02050C)!important; border-left:1px solid rgba(var(--theme-secondary-rgb,0,210,255),.20)!important; } .match-details-offcanvas .offcanvas-header { min-height:52px; padding:10px 12px!important; background:#030711!important; border-bottom:1px solid rgba(255,255,255,.07)!important; } .match-details-offcanvas-body { padding:10px!important; background:#02050C!important; } .match-detail-header-table { margin-bottom:10px!important; overflow:hidden; background:#030711!important; border:1px solid var(--match-border)!important; border-radius:10px; } /* Main stats */ .match-stats-table { width:100%!important; margin:0!important; color:#dce7f3!important; background:transparent!important; border-collapse:separate!important; border-spacing:0 4px!important; font-size:.69rem!important; } .match-stats-table > tbody > tr > td { padding:.48rem .5rem!important; color:#dce7f3!important; background:#030711!important; border-top:1px solid rgba(255,255,255,.05)!important; border-bottom:1px solid rgba(255,255,255,.05)!important; vertical-align:middle!important; } .match-stats-table > tbody > tr > td:first-child { border-left:1px solid rgba(255,255,255,.05)!important; border-radius:7px 0 0 7px; } .match-stats-table > tbody > tr > td:last-child { border-right:1px solid rgba(255,255,255,.05)!important; border-radius:0 7px 7px 0; } .match-stats-table > tbody > tr:hover > td { background:#07111F!important; } /* Center stat label */ .match-stats-table > tbody > tr > td[colspan="3"] { color:#00D9FF!important; font-size:.61rem; font-weight:800; letter-spacing:.02em; text-transform:uppercase; } /* Scorers */ .match-scorers-table, .match-scorer-list { width:100%!important; margin:0!important; color:#e5edf7!important; background:transparent!important; font-size:.66rem!important; } .match-scorers-table td, .match-scorer-list td { padding:.3rem .4rem!important; background:transparent!important; border-color:rgba(255,255,255,.04)!important; } .match-scorer-list .imgClassement { width:32px!important; height:32px!important; object-fit:contain; } /* Comments / links / validation fields */ .match-details-offcanvas textarea, .match-comment-input { width:100%!important; min-height:82px!important; margin:4px 0!important; padding:8px!important; color:#e5edf7!important; background:#030711!important; border:1px solid #0D1B2D!important; border-radius:7px!important; font-size:.69rem!important; } .match-details-offcanvas input.form-control, .match-details-offcanvas select.form-control, .match-details-offcanvas .form-select, .match-fairplay-select { width:100%!important; min-height:31px!important; margin:4px 0!important; color:#fff!important; background-color:#030711!important; border:1px solid #0D1B2D!important; border-radius:6px!important; font-size:.67rem!important; } .match-details-offcanvas a { color:#FFFFFF!important; overflow-wrap:anywhere; } /* ========================================================= ACTION FEEDBACK MODAL ========================================================= */ .match-action-modal { overflow:hidden; background:#02050C!important; border:1px solid rgba(255,255,255,.09)!important; border-radius:12px!important; } .match-action-modal-icon { display:flex; justify-content:center; padding:18px!important; background:linear-gradient(135deg,#0D1B2D,#07111F)!important; } .match-action-modal-trophy { display:inline-flex!important; width:62px; height:62px; align-items:center; justify-content:center; color:#FFFFFF!important; background:#030711!important; border:1px solid rgba(var(--theme-secondary-rgb,0,210,255),.22); border-radius:50%; font-size:1.35rem!important; } .match-action-modal-close { width:100%!important; min-height:34px!important; border-radius:0!important; } /* ========================================================= RESPONSIVE ========================================================= */ @media(max-width:767.98px) { .match-card-col { padding:4px!important; } .match-list-card { min-height:250px; border-radius:9px!important; } .match-summary-table { font-size:.61rem!important; } .match-summary-table td { padding:.34rem .24rem!important; } .match-team-logo { width:34px!important; height:34px!important; } .match-summary-table h5 { font-size:.87rem!important; } .match-details-offcanvas { width:100vw!important; } .match-details-offcanvas-body { padding:7px!important; } .match-stats-table { font-size:.62rem!important; } .match-stats-table > tbody > tr > td { padding:.38rem .34rem!important; } } /* ========================================================= MATCH CARDS V3 - READABLE TABLE LAYOUT ========================================================= Objectif : conserver la lisibilité de l'ancien rendu, sans transformer les en grid/flex. ========================================================= */ .match-list-grid { margin-left:-6px!important; margin-right:-6px!important; } .match-card-col { padding:6px!important; } .match-list-card { position:relative; height:100%; min-height:0!important; overflow:hidden; padding:8px 9px 9px!important; color:#f8fafc!important; background: radial-gradient( circle at 50% -10%, rgba(var(--theme-secondary-rgb,0,210,255),.055), transparent 40% ), linear-gradient(180deg,#030711 0%,#02050C 100%)!important; border:1px solid rgba(255,255,255,.10)!important; border-radius:11px!important; box-shadow:0 10px 26px rgba(0,0,0,.32)!important; } .match-list-card::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:#034E8C; } .match-list-card.match-status-to-enter::before { background:#3CAEFF; } .match-list-card.match-status-pending::before { background:#ef4444; } .match-list-card.match-status-validated::before { background:var(--theme-secondary,#FFFFFF); } /* IMPORTANT : tableau classique, pas grid/flex */ .match-summary-table { display:table!important; width:100%!important; margin:0!important; table-layout:fixed!important; border-collapse:collapse!important; color:#f8fafc!important; background:transparent!important; font-size:.68rem!important; } .match-summary-table tbody { display:table-row-group!important; } .match-summary-table tr { display:table-row!important; } .match-summary-table td { display:table-cell!important; padding:.35rem .25rem!important; color:#f8fafc!important; background:transparent!important; border:0!important; vertical-align:middle!important; } /* Logos */ .match-team-logo { width:42px!important; height:42px!important; padding:2px; object-fit:contain; border-radius:50%; background:#07111F!important; border:1px solid rgba(255,255,255,.10)!important; box-shadow:0 5px 12px rgba(0,0,0,.30)!important; } /* Noms équipes */ .match-summary-table td:first-child, .match-summary-table td:last-child { font-weight:800; } .match-summary-table p { margin:2px 0 0!important; color:#00D9FF!important; font-size:.54rem!important; font-style:italic!important; line-height:1.15!important; } /* Score */ .match-summary-table h5 { margin:0!important; color:#fff!important; font-size:1rem!important; font-weight:950!important; line-height:1!important; } /* Petit séparateur */ .match-summary-table td:nth-child(3) { color:#034E8C!important; } /* Date / statut */ .match-status-label { display:inline-flex; padding:4px 7px; color:#d8f6ff!important; background:#0D1B2D; border:1px solid rgba(var(--theme-secondary-rgb,0,210,255),.26); border-radius:999px; font-size:.54rem!important; font-weight:800; line-height:1.1; white-space:nowrap; } /* Homme du match : discret et lisible */ .match-motm-row td { padding:.38rem .4rem!important; color:#3CAEFF!important; background:rgba(245,158,11,.08)!important; border-top:1px solid rgba(245,158,11,.12)!important; border-bottom:1px solid rgba(245,158,11,.12)!important; font-size:.60rem!important; font-weight:800!important; } /* Blessés */ .match-summary-table .fa-ambulance { margin-bottom:2px; color:#fb7185!important; font-size:.76rem!important; } /* Météo */ .match-summary-table img[src*="/meteo/"] { max-width:64px!important; height:auto!important; } /* Espace météo/blessés */ .match-summary-table tr:nth-last-child(3) td, .match-summary-table tr:nth-last-child(4) td { color:#a8b6c7!important; font-size:.56rem!important; } /* Boutons */ .match-action-btn, .match-details-btn { width:100%!important; min-height:32px!important; margin:4px 0 0!important; padding:4px 8px!important; border-radius:6px!important; font-size:.64rem!important; font-weight:850!important; } .match-details-btn { color:#e4f8ff!important; background:#0D1B2D!important; border:1px solid rgba(var(--theme-secondary-rgb,0,210,255),.35)!important; } .match-details-btn:hover { color:#fff!important; background:#0D1B2D!important; border-color:var(--theme-secondary,#FFFFFF)!important; } /* --------------------------------------------------------- OFFCANVAS DETAILS --------------------------------------------------------- */ .match-details-offcanvas { width:min(520px,95vw)!important; color:#e5edf7!important; background:#02050C!important; border-left:1px solid rgba(var(--theme-secondary-rgb,0,210,255),.20)!important; } .match-details-offcanvas .offcanvas-header { min-height:52px; padding:10px 12px!important; background:#030711!important; border-bottom:1px solid rgba(255,255,255,.07)!important; } .match-details-offcanvas-body { padding:10px!important; background:#02050C!important; } .match-detail-header-table { width:100%!important; margin:0 0 10px!important; color:#e5edf7!important; background:#030711!important; border:1px solid rgba(255,255,255,.08)!important; border-radius:9px; font-size:.66rem!important; } .match-detail-header-table td { padding:.38rem .30rem!important; color:#e5edf7!important; background:transparent!important; border:0!important; } .match-stats-table { width:100%!important; margin:0!important; color:#dce7f3!important; background:transparent!important; border-collapse:collapse!important; font-size:.67rem!important; } .match-stats-table td { padding:.42rem .45rem!important; color:#dce7f3!important; background:#030711!important; border-bottom:1px solid rgba(255,255,255,.05)!important; vertical-align:middle!important; } .match-stats-table tr:nth-child(even) td { background:#030711!important; } .match-scorers-table, .match-scorer-list { width:100%!important; margin:0!important; color:#e5edf7!important; background:transparent!important; font-size:.64rem!important; } .match-scorers-table td, .match-scorer-list td { padding:.28rem .35rem!important; background:transparent!important; border-color:rgba(255,255,255,.04)!important; } /* --------------------------------------------------------- MOBILE --------------------------------------------------------- */ @media(max-width:767.98px) { .match-card-col { padding:4px!important; } .match-list-card { padding:7px!important; border-radius:9px!important; } .match-summary-table { font-size:.61rem!important; } .match-summary-table td { padding:.30rem .18rem!important; } .match-team-logo { width:36px!important; height:36px!important; } .match-summary-table h5 { font-size:.90rem!important; } .match-summary-table p { font-size:.79rem!important; //manual change } .match-status-label { padding:3px 5px; font-size:.79rem!important; //manual change } .match-details-offcanvas { width:100vw!important; } } /* ========================================================= MATCH TABLE COLUMNS - PROPORTIONS V2 ========================================================= */ /* Main cards: let width attributes work predictably */ .match-summary-table, .match-detail-header-table { table-layout: fixed !important; } /* Names may wrap cleanly instead of colliding with score */ .match-summary-table td, .match-detail-header-table td { overflow-wrap: anywhere; word-break: normal; } .match-summary-table p, .match-detail-header-table p { white-space: normal !important; } /* Score cells remain compact */ .match-summary-table h5, .match-detail-header-table h5 { white-space: nowrap; } /* Detail stats: 24 / 52 / 24 */ .match-stats-table { table-layout: fixed !important; } .match-stats-table > tbody > tr > td:first-child, .match-stats-table > tbody > tr > td:last-child { width: 24% !important; } .match-stats-table > tbody > tr > td[colspan="3"] { width: 52% !important; text-align: center !important; } /* Scorers: two balanced halves */ .match-scorers-table { table-layout: fixed !important; } .match-scorers-table td { overflow-wrap: anywhere; } /* Mobile: keep names readable */ @media (max-width: 767.98px) { .match-summary-table td { padding-left: .14rem !important; padding-right: .14rem !important; } .match-summary-table td:first-child, .match-summary-table td:last-child { font-size: .58rem !important; } .match-stats-table > tbody > tr > td:first-child, .match-stats-table > tbody > tr > td:last-child { width: 22% !important; } .match-stats-table > tbody > tr > td[colspan="3"] { width: 56% !important; } } /* ========================================================= ARBRE DE COUPE — PRO ========================================================= */ .cup-page { --cup-bg: #02050C; --cup-surface: #030711; --cup-surface-2: #07111F; --cup-border: rgba(255,255,255,.09); --cup-muted: #0878D1; --cup-text: #e8eef6; --cup-accent: var(--theme-secondary, #FFFFFF); --cup-accent-rgb: var(--theme-secondary-rgb, 34, 211, 238); --cup-success: #22c55e; --cup-warning: #3CAEFF; width: 100%; padding: 14px; color: var(--cup-text); background: radial-gradient(circle at 50% -10%, rgba(var(--cup-accent-rgb), .08), transparent 32%), var(--cup-bg); border: 1px solid rgba(255,255,255,.06); border-radius: 14px; } .cup-page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; padding: 2px 2px 12px; border-bottom: 1px solid rgba(255,255,255,.07); } .cup-eyebrow { display: block; margin-bottom: 2px; color: var(--cup-accent); font-size: .55rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; } .cup-title { margin: 0; color: #fff; font-size: 1rem; font-weight: 900; } .cup-legend { display: flex; gap: 12px; color: var(--cup-muted); font-size: .57rem; font-weight: 700; } .cup-legend span { display: inline-flex; align-items: center; gap: 5px; } .cup-legend-dot { width: 7px; height: 7px; border-radius: 50%; } .cup-legend-dot.is-pending { background: var(--cup-warning); } .cup-legend-dot.is-finished { background: var(--cup-success); } .tournament-container { width: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: #0D1B2D transparent; } .tournament-brackets { display: flex; align-items: stretch; min-width: 1120px; margin: 0; padding: 0; background: transparent; } .cup-round { position: relative; display: flex; flex: 1 0 224px; min-width: 224px; flex-direction: column; border-right: 1px solid rgba(255,255,255,.05); } .cup-round:last-child { border-right: 0; } .cup-round-header { position: sticky; top: 0; z-index: 4; min-height: 52px; padding: 8px 10px; text-align: center; background: linear-gradient(180deg, rgba(3,7,17,.98), rgba(3,7,17,.92)); border-bottom: 1px solid rgba(255,255,255,.07); backdrop-filter: blur(8px); } .cup-round-index { display: block; margin-bottom: 1px; color: var(--cup-muted); font-size: .48rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; } .cup-round-header h3 { margin: 0; color: #dce9f5; font-size: .68rem; font-weight: 900; text-transform: uppercase; } .bracket { position: relative; display: flex; flex: 1; flex-direction: column; justify-content: space-around; gap: 6px; margin: 0; padding: 12px 10px; list-style: none; } .cup-match-item { position: relative; display: block; margin: 0; padding: 0; } .cup-match-card { position: relative; z-index: 2; overflow: hidden; background: linear-gradient(180deg, var(--cup-surface-2), var(--cup-surface)); border: 1px solid var(--cup-border); border-radius: 9px; box-shadow: 0 6px 16px rgba(0,0,0,.24); } .cup-match-card::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 2px; background: #034E8C; } .cup-match-card.is-pending::before { background: var(--cup-warning); } .cup-match-card.is-finished::before { background: var(--cup-success); } .cup-match-card.is-empty::before { background: #0D1B2D; } .cup-match-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 25px; padding: 5px 7px 4px 9px; background: rgba(255,255,255,.025); border-bottom: 1px solid rgba(255,255,255,.05); } .cup-match-number { color: #0878D1; font-size: .46rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; } .cup-match-status { padding: 2px 5px; color: #9eb0c3; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.06); border-radius: 999px; font-size: .44rem; font-weight: 800; } .is-finished .cup-match-status { color: #a7f3d0; background: rgba(34,197,94,.08); border-color: rgba(34,197,94,.14); } .is-pending .cup-match-status { color: #78EEFF; background: rgba(245,158,11,.08); border-color: rgba(245,158,11,.14); } .cup-match-teams { padding: 4px 6px 5px 8px; } .cup-team { display: flex; align-items: center; justify-content: space-between; gap: 7px; min-height: 38px; padding: 4px 2px; border-bottom: 1px solid rgba(255,255,255,.04); } .cup-team:last-child { border-bottom: 0; } .cup-team.is-winner { background: linear-gradient(90deg, rgba(34,197,94,.07), transparent 70%); } .cup-team-identity { display: flex; min-width: 0; flex: 1; align-items: center; gap: 7px; } .cup-team-logo { width: 28px; height: 28px; flex: 0 0 28px; object-fit: contain; padding: 2px; background: #030711; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; } .cup-team-logo-empty { display: inline-block; opacity: .22; border-style: dashed; } .cup-team-copy { min-width: 0; } .cup-team-name, .cup-team-manager { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cup-team-name { color: #edf4fb; font-size: .57rem; font-weight: 850; } .cup-team.is-winner .cup-team-name { color: #d1fae5; } .cup-team-manager { margin-top: 1px; color: #0878D1; font-size: .45rem; font-style: italic; font-weight: 650; } .cup-team-score { display: inline-flex; width: 25px; height: 25px; flex: 0 0 25px; align-items: center; justify-content: center; color: #fff; background: #02050C; border: 1px solid rgba(255,255,255,.10); border-radius: 6px; font-size: .68rem; font-weight: 950; font-variant-numeric: tabular-nums; } .cup-team.is-winner .cup-team-score { color: #dcfce7; background: rgba(22,101,52,.32); border-color: rgba(34,197,94,.30); } .cup-match-footer { padding: 4px 8px 5px; color: #0878D1; background: rgba(0,0,0,.12); border-top: 1px solid rgba(255,255,255,.04); font-size: .45rem; font-weight: 750; text-align: right; } .cup-match-placeholder .cup-match-card { opacity: .52; box-shadow: none; } /* --------------------------------------------------------- Connecteurs --------------------------------------------------------- */ @media (min-width: 769px) { .cup-round:not(:last-child) .cup-match-item::after { content: ""; position: absolute; z-index: 1; top: 50%; right: -10px; width: 10px; height: 1px; background: rgba(var(--cup-accent-rgb), .27); } .cup-round:not(:first-child) .cup-match-item::before { content: ""; position: absolute; z-index: 1; top: 50%; left: -10px; width: 10px; height: 1px; background: rgba(var(--cup-accent-rgb), .27); } } /* --------------------------------------------------------- Responsive : chaque tour devient une section lisible --------------------------------------------------------- */ @media (max-width: 768px) { .cup-page { padding: 9px; border-radius: 10px; } .cup-page-header { align-items: flex-start; flex-direction: column; gap: 8px; } .tournament-container { overflow: visible; } .tournament-brackets { display: block; min-width: 0; } .cup-round { min-width: 0; margin-bottom: 12px; border: 1px solid rgba(255,255,255,.06); border-radius: 9px; overflow: hidden; } .cup-round-header { position: static; min-height: 44px; } .bracket { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; padding: 8px; } .cup-round.bracket-3 .bracket, .cup-round.bracket-4 .bracket { grid-template-columns: 1fr; } .cup-team-name { font-size: .54rem; } .cup-team-logo { width: 26px; height: 26px; flex-basis: 26px; } } @media (max-width: 480px) { .bracket { grid-template-columns: 1fr; } .cup-match-card { border-radius: 8px; } .cup-team { min-height: 36px; } } /* ========================================================= ARBRE DE COUPE V2 - sans titre global - sans "Tour X" - sans "Match X" - vrai arbre horizontal également sur mobile ========================================================= */ .cup-page { padding: 8px !important; } /* Le header global a été retiré du PHP */ .cup-page-header, .cup-eyebrow, .cup-title, .cup-legend, .cup-match-number, .cup-round-index { display: none !important; } /* Les titres de phases restent seuls pour se repérer */ .cup-round-header { min-height: 34px !important; padding: 7px 8px 6px !important; } .cup-round-header h3 { font-size: .62rem !important; letter-spacing: .025em; } /* Header de match = uniquement statut, aligné à droite */ .cup-match-head { min-height: 20px !important; justify-content: flex-end !important; padding: 3px 5px !important; } .cup-match-status { padding: 2px 5px !important; font-size: .41rem !important; } /* Cartes un peu plus compactes */ .cup-match-teams { padding: 3px 5px 4px 7px !important; } .cup-team { min-height: 34px !important; gap: 5px !important; padding: 3px 1px !important; } .cup-team-logo { width: 25px !important; height: 25px !important; flex-basis: 25px !important; } .cup-team-name { font-size: .53rem !important; } .cup-team-manager { font-size: .42rem !important; } .cup-team-score { width: 23px !important; height: 23px !important; flex-basis: 23px !important; font-size: .62rem !important; } /* ========================================================= MOBILE : on conserve le bracket gauche -> droite ========================================================= */ @media (max-width: 768px) { .cup-page { padding: 5px !important; overflow: hidden; } /* * IMPORTANT : * contrairement à l'ancienne version mobile, * les tours ne passent plus les uns sous les autres. */ .tournament-container { width: 100% !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; scrollbar-width: thin; overscroll-behavior-x: contain; } .tournament-brackets { display: flex !important; align-items: stretch !important; /* * 5 colonnes suffisamment larges pour rester lisibles. * Le bracket reste donc un vrai arbre. */ width: max-content !important; min-width: 860px !important; padding: 0 !important; } .cup-round { display: flex !important; flex: 0 0 172px !important; min-width: 172px !important; flex-direction: column !important; margin: 0 !important; overflow: visible !important; border: 0 !important; border-right: 1px solid rgba(255,255,255,.055) !important; border-radius: 0 !important; } .cup-round:last-child { border-right: 0 !important; } .cup-round-header { position: sticky !important; top: 0; z-index: 4; min-height: 31px !important; padding: 6px 4px !important; background: rgba(3,7,17,.97) !important; } .cup-round-header h3 { font-size: .56rem !important; } .bracket, .cup-round.bracket-3 .bracket, .cup-round.bracket-4 .bracket { display: flex !important; flex: 1 !important; flex-direction: column !important; justify-content: space-around !important; grid-template-columns: none !important; gap: 5px !important; margin: 0 !important; padding: 7px 6px !important; } .cup-match-card { width: 100% !important; border-radius: 7px !important; } .cup-match-head { min-height: 18px !important; padding: 2px 4px !important; } .cup-match-status { padding: 1px 4px !important; font-size: .36rem !important; } .cup-team { min-height: 31px !important; } .cup-team-logo { width: 22px !important; height: 22px !important; flex-basis: 22px !important; } .cup-team-name { font-size: .47rem !important; } .cup-team-manager { font-size: .37rem !important; } .cup-team-score { width: 21px !important; height: 21px !important; flex-basis: 21px !important; font-size: .56rem !important; } /* * Connecteurs : réactivés sur mobile. * L'ancienne CSS ne les affichait qu'au-dessus de 769px. */ .cup-round:not(:last-child) .cup-match-item::after { content: ""; position: absolute; z-index: 1; top: 50%; right: -6px; width: 6px; height: 1px; background: rgba(var(--cup-accent-rgb), .32); } .cup-round:not(:first-child) .cup-match-item::before { content: ""; position: absolute; z-index: 1; top: 50%; left: -6px; width: 6px; height: 1px; background: rgba(var(--cup-accent-rgb), .32); } } /* Très petit écran : toujours un arbre, simplement plus compact */ @media (max-width: 480px) { .tournament-brackets { min-width: 775px !important; } .cup-round { flex-basis: 155px !important; min-width: 155px !important; } .cup-round-header h3 { font-size: .51rem !important; } .cup-team-name { font-size: .44rem !important; } .cup-team-manager { font-size: .35rem !important; } } /* ========================================================= ARBRE CUP - TOUJOURS DERRIÈRE LES MENUS ========================================================= */ /* Bloc général de l'arbre */ .tournament-container, .tournament-brackets, .cup-round, .cup-round-header { position: relative !important; z-index: 1 !important; } /* Le bandeau des phases ne doit jamais passer devant */ .cup-round-header { z-index: 1 !important; } /* Si un sticky est actif sur mobile */ @media (max-width: 768px) { .cup-round-header { position: sticky !important; top: 0; z-index: 2 !important; } } /* ========================================================= NAVBAR / MENUS TOUJOURS AU-DESSUS ========================================================= */ .navbar, header, .navbar-collapse, .navbar-nav { position: relative !important; z-index: 10000 !important; overflow: visible !important; } .navbar .dropdown-menu, .navbar-nav .dropdown-menu, .dropdown-menu.show { position: absolute !important; z-index: 20000 !important; } /* ========================================================= MANAGERS PAGE - PRO UI ========================================================= */ .managers-page{ --mgr-bg:#02050C; --mgr-surface:#030711; --mgr-surface-alt:#030711; --mgr-border:rgba(255,255,255,.075); --mgr-text:#dce7f3; --mgr-muted:#0878D1; width:100%; } .managers-table-wrap{ width:100%; overflow:auto; background:var(--mgr-bg); border:1px solid var(--mgr-border); border-radius:10px; box-shadow:0 10px 26px rgba(0,0,0,.24); } .managers-table{ width:100%!important; min-width:1750px; margin:0!important; color:var(--mgr-text)!important; background:var(--mgr-bg)!important; border-collapse:separate!important; border-spacing:0!important; font-size:.66rem!important; } .managers-table thead{ position:sticky; top:0; z-index:6; } .managers-table thead th{ padding:.52rem .42rem!important; color:#00D9FF!important; background:#030711!important; border-bottom:1px solid rgba(255,255,255,.09)!important; font-size:.55rem!important; font-weight:850!important; letter-spacing:.025em; text-transform:uppercase; white-space:nowrap; text-align:center; } .managers-table tbody td{ padding:.42rem .40rem!important; color:var(--mgr-text)!important; background:var(--mgr-bg)!important; border-bottom:1px solid rgba(255,255,255,.04)!important; vertical-align:middle!important; white-space:nowrap; } .managers-table tbody tr:hover td{ background:#07111F!important; } /* Manager sticky column */ .managers-table .managers-col-manager, .managers-table .manager-name-cell{ position:sticky; left:0; z-index:4; min-width:130px; text-align:left!important; } .managers-table thead .managers-col-manager{ z-index:8; background:#030711!important; } .manager-name-cell{ background:#02050C!important; } .managers-table tbody tr:nth-child(even) .manager-name-cell{ background:#030711!important; } .managers-table tbody tr:hover .manager-name-cell{ background:#07111F!important; } .manager-name-link{ color:#e7f8ff!important; text-decoration:none!important; font-weight:850!important; } .manager-name-link:hover{ color:var(--theme-secondary,#FFFFFF)!important; } .manager-team-logo{ width:34px!important; height:34px!important; object-fit:contain; border-radius:50%; padding:2px; background:#07111F; border:1px solid rgba(255,255,255,.08); } .manager-badge-logo{ width:27px!important; height:27px!important; object-fit:contain; } .manager-team-name{ min-width:130px; max-width:180px; color:#f8fafc!important; font-weight:750; white-space:normal!important; line-height:1.2; } .manager-info-btn{ display:inline-flex!important; width:28px!important; min-width:28px!important; height:28px!important; padding:0!important; align-items:center!important; justify-content:center!important; color:#dff7ff!important; background:#0D1B2D!important; border:1px solid rgba(var(--theme-secondary-rgb,0,210,255),.30)!important; border-radius:6px!important; } .manager-info-btn:hover{ background:#0D1B2D!important; border-color:var(--theme-secondary,#FFFFFF)!important; } .manager-money{ min-width:84px; text-align:right!important; font-variant-numeric:tabular-nums; } .manager-capital{ color:#fff!important; font-weight:900!important; } .manager-salary{ color:#FFFFFF!important; } .manager-diff{ display:inline-flex; min-width:64px; padding:3px 6px; justify-content:center; border-radius:999px; font-size:.59rem; font-weight:850; } .manager-diff-positive{ color:#86efac; background:rgba(34,197,94,.10); border:1px solid rgba(34,197,94,.22); } .manager-diff-negative{ color:#fca5a5; background:rgba(239,68,68,.10); border:1px solid rgba(239,68,68,.22); } .manager-social{ display:inline-flex; width:26px; height:26px; align-items:center; justify-content:center; border-radius:6px; text-decoration:none!important; background:#07111F; border:1px solid rgba(255,255,255,.08); } .manager-social-youtube{color:#fb7185!important;} .manager-social-twitch{color:#c084fc!important;} .manager-social:hover{ background:#0D1B2D; border-color:rgba(255,255,255,.18); } /* ========================================================= MANAGER OFFCANVAS ========================================================= */ .manager-offcanvas{ width:min(460px,94vw)!important; color:#e5edf7!important; background:linear-gradient(180deg,#030711,#02050C)!important; border-left:1px solid rgba(var(--theme-secondary-rgb,0,210,255),.20)!important; } .manager-offcanvas .offcanvas-header{ min-height:54px; padding:10px 12px!important; background:#030711!important; border-bottom:1px solid rgba(255,255,255,.07)!important; } .manager-offcanvas .offcanvas-title{ color:#fff!important; font-size:.86rem!important; font-weight:900!important; } .manager-offcanvas-body{ padding:12px!important; background:#02050C!important; } .manager-offcanvas-content{ display:grid; gap:10px; } .manager-info-card{ display:grid; grid-template-columns:38px minmax(0,1fr); gap:10px; padding:12px; background:#030711; border:1px solid rgba(255,255,255,.07); border-radius:9px; } .manager-info-card-icon{ display:flex; width:34px; height:34px; align-items:center; justify-content:center; color:#FFFFFF; background:#07111F; border:1px solid rgba(var(--theme-secondary-rgb,0,210,255),.18); border-radius:8px; } .manager-info-card h6{ margin:0 0 5px; color:#fff; font-size:.68rem; font-weight:850; } .manager-info-card p{ margin:0; color:#aebed0; font-size:.65rem; line-height:1.55; } /* ========================================================= MOBILE ========================================================= */ @media(max-width:767.98px){ .managers-table{ min-width:1500px; font-size:.60rem!important; } .managers-table thead th{ padding:.42rem .30rem!important; font-size:.50rem!important; } .managers-table tbody td{ padding:.34rem .30rem!important; } .manager-team-logo{ width:30px!important; height:30px!important; } .manager-offcanvas{ width:100vw!important; } } /* ===================================================================== THEME FINAL : XBOX --------------------------------------------------------------------- Ce bloc est volontairement placé EN DERNIER pour surcharger toutes les anciennes couleurs codées en dur dans cssFixed.css. ===================================================================== */ :root, html, body { --theme-primary: #0878D1 !important; --theme-primary-rgb: 8,120,209 !important; --theme-secondary: #FFFFFF !important; --theme-secondary-rgb: 232,255,0 !important; --theme-accent: #00D9FF !important; --theme-accent-rgb: 0,217,255 !important; --theme-bg: #02050C !important; --theme-bg-rgb: 5, 8, 5 !important; --theme-surface: #07111F !important; --theme-surface-rgb: 13, 19, 13 !important; --theme-surface-2: #101E32 !important; --theme-surface-2-rgb: 21, 32, 21 !important; --theme-text: #f5fff3 !important; --theme-text-rgb: 245, 255, 243 !important; --theme-muted: #aab9a7 !important; --theme-border: rgba(245, 255, 243, .10) !important; --theme-hover: rgba(232,255,0, .09) !important; --theme-gradient: linear-gradient(135deg, #0878D1 0%, #FFFFFF 100%) !important; --theme-gradient-dark: linear-gradient(135deg, #02050C 0%, #101E32 100%) !important; /* Alias historiques */ --ucl-blue: #0878D1 !important; --ucl-dark: #02050C !important; --ucl-cyan: #FFFFFF !important; --ucl-gold: #00D9FF !important; --ucl-gradient: linear-gradient(90deg, #0878D1, #FFFFFF) !important; /* Bootstrap */ --bs-primary: #0878D1 !important; --bs-secondary: #FFFFFF !important; --bs-dark: #02050C !important; --bs-body-color: #f5fff3 !important; --bs-body-bg: #02050C !important; --bs-border-color: rgba(245, 255, 243, .10) !important; } html, body { color-scheme: dark; color: var(--theme-text) !important; background: var(--theme-bg) !important; } /* Surfaces principales */ .navbar, .dropdown-menu, .offcanvas, .modal-content, .card, .accordion-item { background-color: var(--theme-surface) !important; color: var(--theme-text) !important; } .dropdown-menu { border-color: var(--theme-border) !important; } .dropdown-item, .nav-link, .navbar .nav-link { color: var(--theme-text) !important; } .dropdown-item:hover, .dropdown-item:focus, .nav-link:hover, .nav-link:focus { color: #fff !important; background: rgba(var(--theme-secondary-rgb), .12) !important; } .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: #fff !important; background: var(--theme-primary) !important; border-color: transparent !important; } /* Boutons */ .btn-primary, .btn-success { color: #fff !important; background: var(--theme-gradient) !important; border-color: var(--theme-primary) !important; } .btn-primary:hover, .btn-success:hover { filter: brightness(1.10); color: #fff !important; } .btn-secondary { color: #fff !important; background: var(--theme-surface-2) !important; border-color: rgba(var(--theme-secondary-rgb), .35) !important; } .btn-secondary:hover { color: #fff !important; background: var(--theme-primary) !important; border-color: var(--theme-secondary) !important; } .btn-outline-primary { color: var(--theme-secondary) !important; border-color: var(--theme-secondary) !important; } .btn-outline-primary:hover { color: #fff !important; background: var(--theme-primary) !important; border-color: var(--theme-secondary) !important; } /* Utilitaires Bootstrap */ .bg-primary { background: var(--theme-gradient) !important; } .bg-secondary { background: var(--theme-surface-2) !important; } .bg-dark { background: var(--theme-bg) !important; } .text-primary { color: var(--theme-secondary) !important; } /* Tables */ .table, .table-dark { --bs-table-bg: transparent !important; --bs-table-color: var(--theme-text) !important; --bs-table-striped-bg: rgba(var(--theme-text-rgb), .025) !important; --bs-table-hover-bg: rgba(var(--theme-secondary-rgb), .08) !important; --bs-table-border-color: var(--theme-border) !important; color: var(--theme-text) !important; } .table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: rgba(var(--theme-text-rgb), .018) !important; } .table-hover > tbody > tr:hover > * { --bs-table-accent-bg: rgba(var(--theme-secondary-rgb), .08) !important; } /* Formulaires */ .form-control, .form-select, .input-group-text { color: var(--theme-text) !important; background-color: var(--theme-surface-2) !important; border-color: var(--theme-border) !important; } .form-control:focus, .form-select:focus { color: var(--theme-text) !important; background-color: var(--theme-surface-2) !important; border-color: var(--theme-secondary) !important; box-shadow: 0 0 0 .15rem rgba(var(--theme-secondary-rgb), .18) !important; } /* Accordéons */ .accordion { --bs-accordion-bg: var(--theme-surface) !important; --bs-accordion-color: var(--theme-text) !important; } .accordion-button, .accordion-button:not(.collapsed) { color: #fff !important; background: var(--theme-gradient) !important; } /* Modales / offcanvas */ .modal-header, .offcanvas-header { color: var(--theme-text) !important; background: var(--theme-surface) !important; border-color: var(--theme-border) !important; } .modal-body, .offcanvas-body { color: var(--theme-text) !important; background-color: var(--theme-bg) !important; } /* Badges */ .badge.bg-primary, .bg-primary.badge { color: #fff !important; background: var(--theme-gradient) !important; } .badge-result { color: var(--theme-text) !important; background: rgba(var(--theme-secondary-rgb), .08) !important; border-color: rgba(var(--theme-secondary-rgb), .22) !important; } /* Footer */ .ufl-footer { background: var(--theme-bg) !important; border-color: rgba(var(--theme-secondary-rgb), .22) !important; } .ufl-footer-link { color: var(--theme-secondary) !important; } .ufl-footer-link:hover { color: #fff !important; text-shadow: 0 0 8px rgba(var(--theme-secondary-rgb), .45) !important; } /* Scrollbar WebKit */ *::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--theme-primary) 75%, var(--theme-secondary) 25%) !important; } /* Xbox : accents plus francs et géométriques */ ::selection { color: #fff; background: #0878D1; } a { color: #00D9FF; } a:hover { color: #FFFFFF; } .swiper-button-prev, .swiper-button-next { background: #0878D1 !important; border: 1px solid rgba(232,255,0, .35) !important; } .swiper-pagination-bullet-active { background: #FFFFFF !important; } .match-card.LM { background: linear-gradient(135deg, #0b0b0b, #0878D1) !important; } /* ===================================================================== XBOX THEME V2 - OVERRIDES DEFINITIFS Aucun composant ne doit récupérer le bleu du thème par défaut. ===================================================================== */ :root { --bs-blue:#0878D1 !important; --bs-cyan:#00D9FF !important; --bs-primary:#0878D1 !important; --bs-secondary:#02050C !important; --bs-info:#00D9FF !important; --theme-primary:#0878D1 !important; --theme-primary-rgb:8,120,209 !important; --theme-secondary:#FFFFFF !important; --theme-secondary-rgb:232,255,0 !important; --theme-accent:#00D9FF !important; --theme-accent-rgb:0,217,255 !important; --ucl-blue:#0878D1 !important; --ucl-dark:#02050C !important; --ucl-cyan:#FFFFFF !important; } /* Navigation */ .navbar, .navbar-collapse, .dropdown-menu, .dropdown-menu.show { background:#080d08 !important; border-color:rgba(232,255,0,.16) !important; } .navbar-brand, .navbar-brand h1, .navbar .text-primary, .navbar .fa-bars { color:#FFFFFF !important; } .navbar .nav-link, .dropdown-item { color:#f4fff2 !important; } .navbar .nav-link:hover, .navbar .nav-link:focus, .navbar .nav-link.active, .navbar .show > .nav-link, .dropdown-item:hover, .dropdown-item:focus, .dropdown-item.active, .dropdown-item:active { color:#02050C !important; background:#FFFFFF !important; } /* Tous les boutons Bootstrap principaux */ .btn-primary, .btn-info, .btn-success, .btn-outline-primary:hover, .btn-outline-info:hover, .btn-outline-success:hover, .page-item.active .page-link, .nav-pills .nav-link.active, .nav-pills .show > .nav-link { color:#fff !important; background:#0878D1 !important; border-color:#00D9FF !important; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .btn-info:hover, .btn-success:hover { color:#02050C !important; background:#FFFFFF !important; border-color:#FFFFFF !important; box-shadow:0 0 0 .15rem rgba(232,255,0,.20) !important; } .btn-secondary, .btn-dark { color:#f4fff2 !important; background:#101810 !important; border-color:rgba(232,255,0,.25) !important; } .btn-secondary:hover, .btn-dark:hover { color:#02050C !important; background:#00D9FF !important; border-color:#FFFFFF !important; } .btn-outline-primary, .btn-outline-info, .btn-outline-success { color:#FFFFFF !important; background:transparent !important; border-color:#00D9FF !important; } /* Liens */ a, .btn-link, .link-primary, .text-primary, .text-info { color:#00D9FF !important; } a:hover, .btn-link:hover, .link-primary:hover { color:#FFFFFF !important; } /* Backgrounds */ .bg-primary, .bg-info { background:#0878D1 !important; } .bg-secondary, .bg-dark { background:#02050C !important; } /* Inputs */ .form-control:focus, .form-select:focus, .form-check-input:focus { border-color:#FFFFFF !important; box-shadow:0 0 0 .16rem rgba(232,255,0,.17) !important; } .form-check-input:checked, .form-check-input[type=checkbox]:indeterminate, .form-range::-webkit-slider-thumb { background-color:#0878D1 !important; border-color:#FFFFFF !important; } /* Swiper */ .swiper-button-prev, .swiper-button-next { background:#0878D1 !important; border:1px solid #00D9FF !important; box-shadow:0 4px 12px rgba(255,255,255,.28) !important; } .swiper-button-prev:hover, .swiper-button-next:hover { background:#FFFFFF !important; } .swiper-button-prev:hover:after, .swiper-button-next:hover:after { color:#02050C !important; } .swiper-pagination-bullet-active { background:#FFFFFF !important; } /* Tables / cards / panels */ .table thead th, .table-dark thead th, .content h5::after { border-color:rgba(232,255,0,.18) !important; } .card, .content, .modal-content, .offcanvas, .match-card, .player-fut-card, .flip-card-front, .flip-card-back { border-color:rgba(232,255,0,.13) !important; } .match-card.LM { background:linear-gradient(135deg,#02050C 0%,#0D1B2D 52%,#0878D1 100%) !important; } /* Badges actifs */ .badge.bg-primary, .badge-primary, .switch-buttons button.active, .top-badge { color:#02050C !important; background:#FFFFFF !important; border-color:#00D9FF !important; } /* Pagination */ .page-link { color:#00D9FF !important; background:#07111F !important; border-color:rgba(232,255,0,.14) !important; } .page-link:hover { color:#02050C !important; background:#FFFFFF !important; } /* Loader */ .ufl-spinner { border-color:rgba(232,255,0,.16) !important; border-top-color:#FFFFFF !important; } .ufl-loader-text { color:#FFFFFF !important; } /* ===================================================================== XBOX V3 - SUPPRESSION DES DERNIERS BLEUS UCL ===================================================================== */ /* Liens et textes qui restaient #00D9FF/bleus */ .table a, .tableClassement a, .tableManagers a, .manager-name-link, .ranking-team-link, a.text-info, a.text-primary, .text-info, .text-primary, .link-info, .link-primary { color:#00D9FF !important; } .table a:hover, .tableClassement a:hover, .tableManagers a:hover, .manager-name-link:hover, .ranking-team-link:hover { color:#FFFFFF !important; } /* Ligne active / première ligne / classement */ .table-primary > *, .table-active > *, .tableClassement tbody tr.table-primary > *, .tableClassement tbody tr.table-active > *, .tableClassement tbody tr:first-child.table-primary > *, .ranking-row-leader > td { color:#f6fff4 !important; background:#0D1B2D !important; box-shadow:inset 3px 0 0 #FFFFFF !important; } /* Evite le bleu Bootstrap sur une ligne sélectionnée */ .table-primary, .table-primary > tr, .table-primary > td, .table-primary > th { --bs-table-bg:#0D1B2D !important; --bs-table-striped-bg:#173b17 !important; --bs-table-hover-bg:#1a471a !important; --bs-table-color:#f6fff4 !important; } /* Boutons iconiques : recherche / info / cartes */ .btn-primary, .ranking-search-btn, .manager-info-btn, .flip-card-btn-turn-to-back, .flip-card-btn-turn-to-back2, .player-fut-actions .btn, .tableClassement .btn-primary, .tableManagers .btn-primary { color:#f5fff3 !important; background:#0878D1 !important; border-color:#00D9FF !important; } .btn-primary:hover, .ranking-search-btn:hover, .manager-info-btn:hover, .flip-card-btn-turn-to-back:hover, .flip-card-btn-turn-to-back2:hover { color:#02050C !important; background:#FFFFFF !important; border-color:#FFFFFF !important; } /* Onglets */ .nav-tabs, .nav-tabs .nav-link { border-color:rgba(232,255,0,.16) !important; } .nav-tabs .nav-link { color:#c7d7c4 !important; background:#030711 !important; } .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color:#02050C !important; background:#FFFFFF !important; border-color:#FFFFFF !important; } /* Barres / bordures qui restaient bleues */ .border-primary, .border-info { border-color:#00D9FF !important; } hr, .card, .content, .table-responsive, .ranking-table-wrap, .managers-table-wrap { border-color:rgba(232,255,0,.13) !important; } /* Footer / info bar */ .ufl-footer, .infoBar, .info-bar, #infoBarMercato { border-color:rgba(232,255,0,.22) !important; } .ufl-footer-link, .ufl-footer .text-info, .ufl-footer .text-primary { color:#00D9FF !important; } /* Progress, pagination, badges */ .progress-bar { background:#0878D1 !important; } .page-item.active .page-link, .badge.bg-primary, .badge.bg-info { color:#02050C !important; background:#FFFFFF !important; border-color:#FFFFFF !important; } /* DataTables */ .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { color:#02050C !important; background:#FFFFFF !important; border-color:#FFFFFF !important; } /* Sélection */ ::selection { color:#02050C !important; background:#FFFFFF !important; } /* ===================================================================== XBOX V4 - ZERO #00D9FF / ZERO #0878D1 ===================================================================== */ :root{ --bs-info:#00D9FF !important; --bs-link-color:#00D9FF !important; --bs-link-hover-color:#FFFFFF !important; --theme-secondary:#FFFFFF !important; --theme-secondary-rgb:232,255,0 !important; --theme-accent:#00D9FF !important; --theme-accent-rgb:0,217,255 !important; } /* Icônes des menus et éléments info */ .navbar i, .navbar .fa, .navbar .fas, .navbar .far, .navbar .fab, .navbar .bi, .dropdown-menu i, .dropdown-menu .fa, .dropdown-menu .fas, .dropdown-menu .far, .dropdown-menu .fab, .dropdown-menu .bi, .text-info, .text-primary, .text-secondary, .link-info, .link-primary { color:#00D9FF !important; } /* Éléments actifs des dropdowns : vert clair, jamais bleu */ .dropdown-item.active, .dropdown-item:active, .dropdown-item:hover, .dropdown-item:focus, .navbar .dropdown-item.active, .navbar .dropdown-item:active { color:#02050C !important; background:#FFFFFF !important; } /* Sous-menus / zones mises en avant */ .dropdown-menu .active, .dropdown-menu .show > .dropdown-item, .dropdown-menu li:hover > a { color:#02050C !important; background:#FFFFFF !important; } /* Boutons infos/loupes */ .btn-info, .btn-primary, .manager-info-btn, .ranking-search-btn, .table .btn-primary, .table .btn-info { color:#fff !important; background:#0878D1 !important; border-color:#00D9FF !important; } .btn-info:hover, .btn-primary:hover, .manager-info-btn:hover, .ranking-search-btn:hover { color:#02050C !important; background:#FFFFFF !important; border-color:#FFFFFF !important; } /* Badges info */ .badge.bg-info, .bg-info, .alert-info { color:#02050C !important; background:#00D9FF !important; border-color:#00D9FF !important; } /* ===================================================================== XBOX V5 - NAVIGATION STRICTEMENT VERTE Les icônes des dropdowns ne peuvent plus hériter de Bootstrap info/#00D9FF. ===================================================================== */ :root { --bs-info: #00D9FF !important; --bs-info-rgb: 0,217,255 !important; --bs-primary: #0878D1 !important; --bs-primary-rgb: 8,120,209 !important; --bs-link-color: #00D9FF !important; --bs-link-color-rgb: 0,217,255 !important; } /* Icônes de la navbar et de TOUS les menus déroulants */ .navbar .dropdown-menu .dropdown-item i, .navbar .dropdown-menu .dropdown-item i::before, .navbar .dropdown-menu .dropdown-item .bi, .navbar .dropdown-menu .dropdown-item .bi::before, .navbar .dropdown-menu .dropdown-item .fa, .navbar .dropdown-menu .dropdown-item .fas, .navbar .dropdown-menu .dropdown-item .far, .navbar .dropdown-menu .dropdown-item .fab, .navbar .dropdown-menu .dropdown-item svg, .navbar .dropdown-menu .dropdown-item svg *, .dropdown-menu .dropdown-item i, .dropdown-menu .dropdown-item i::before, .dropdown-menu .dropdown-item .bi, .dropdown-menu .dropdown-item .bi::before, .dropdown-menu .dropdown-item .fa, .dropdown-menu .dropdown-item .fas, .dropdown-menu .dropdown-item .far, .dropdown-menu .dropdown-item .fab { color: #00D9FF !important; fill: #00D9FF !important; } /* Neutralise explicitement les utilitaires Bootstrap dans les dropdowns */ .navbar .dropdown-menu .text-info, .navbar .dropdown-menu .text-primary, .navbar .dropdown-menu .text-info i, .navbar .dropdown-menu .text-primary i, .navbar .dropdown-menu [class*="text-info"], .navbar .dropdown-menu [class*="text-primary"] { color: #00D9FF !important; } /* Item actif/survolé : icône sombre sur fond vert clair */ .navbar .dropdown-menu .dropdown-item:hover i, .navbar .dropdown-menu .dropdown-item:hover i::before, .navbar .dropdown-menu .dropdown-item:focus i, .navbar .dropdown-menu .dropdown-item:focus i::before, .navbar .dropdown-menu .dropdown-item.active i, .navbar .dropdown-menu .dropdown-item.active i::before, .navbar .dropdown-menu .dropdown-item:active i, .navbar .dropdown-menu .dropdown-item:active i::before, .navbar .dropdown-menu .dropdown-item:hover svg, .navbar .dropdown-menu .dropdown-item.active svg { color: #02050C !important; fill: #02050C !important; } /* Même traitement pour les icônes des boutons de navigation */ .navbar .nav-link i, .navbar .nav-link i::before, .navbar .nav-link .bi, .navbar .nav-link .bi::before, .navbar .nav-link svg, .navbar .nav-link svg * { color: #00D9FF !important; fill: #00D9FF !important; } .navbar .nav-link.active i, .navbar .nav-link.active i::before, .navbar .show > .nav-link i, .navbar .show > .nav-link i::before { color: #02050C !important; } /* ===================================================================== XBOX V6 - ICONES GLOBALES STRICTEMENT VERTES Dropdowns + offcanvas + cards + info panels ===================================================================== */ /* Toutes les icônes "info" dans les menus */ .dropdown-menu i, .dropdown-menu i::before, .dropdown-menu .bi, .dropdown-menu .bi::before, .dropdown-menu .fa, .dropdown-menu .fas, .dropdown-menu .far, .dropdown-menu .fab, .dropdown-menu svg, .dropdown-menu svg * { color:#00D9FF !important; fill:#00D9FF !important; } /* Icônes dans offcanvas / panneaux infos */ .offcanvas i, .offcanvas i::before, .offcanvas .bi, .offcanvas .bi::before, .offcanvas .fa, .offcanvas .fas, .offcanvas .far, .offcanvas .fab, .offcanvas svg, .offcanvas svg *, .manager-info-card-icon, .manager-info-card-icon i, .manager-info-card-icon i::before, .card i.text-info, .card .text-info, .content i.text-info, .content .text-info { color:#00D9FF !important; fill:#00D9FF !important; } /* Petits blocs d'icône */ .manager-info-card-icon, .ranking-offcanvas .manager-info-card-icon, .offcanvas .manager-info-card-icon { background:#0d1a0d !important; border-color:rgba(232,255,0,.28) !important; } /* Active / hover : icône sombre */ .dropdown-item:hover i, .dropdown-item:hover i::before, .dropdown-item.active i, .dropdown-item.active i::before, .dropdown-item:active i, .dropdown-item:active i::before { color:#02050C !important; fill:#02050C !important; } /* Couleurs utilitaires */ .text-info, .text-primary, .text-#00D9FF, .text-secondary { color:#00D9FF !important; } .bg-info, .bg-primary { background:#0878D1 !important; } /* Icônes bootstrap qui utilisent currentColor */ .bi::before, [class^="bi-"]::before, [class*=" bi-"]::before { color:inherit !important; } /* ===================================================================== CARTES EN PRET - REGLE DEFINITIVE PAR CONTENEUR --------------------------------------------------------------------- Dans #MyTeamEffectifPrets : aucun bouton d'action du bas ne doit être visible. Ailleurs : les boutons restent gérés normalement. ===================================================================== */ /* Bouton statistiques */ #MyTeamEffectifPrets .flip-card-btn-turn-to-back2, #MyTeamEffectifPrets button.flip-card-btn-turn-to-back2, #MyTeamEffectifPrets .player-fut-actions .flip-card-btn-turn-to-back2 { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* Bouton secondaire / action */ #MyTeamEffectifPrets .flip-card-btn-turn-to-back, #MyTeamEffectifPrets button.flip-card-btn-turn-to-back, #MyTeamEffectifPrets .player-fut-actions .flip-card-btn-turn-to-back { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* * Si les boutons sont enveloppés dans une zone d'actions, * on conserve la zone mais sans éléments interactifs. * Cela évite de modifier la hauteur de la carte. */ #MyTeamEffectifPrets .player-fut-actions { pointer-events: none !important; } /* ===================================================================== HORS PRETS : boutons visibles --------------------------------------------------------------------- On ne cible volontairement PAS #MyTeamEffectifPrets ici. ===================================================================== */ #MyTeamEffectif:not(#MyTeamEffectifPrets) .flip-card-btn-turn-to-back2, #MyTeamEffectif:not(#MyTeamEffectifPrets) .flip-card-btn-turn-to-back, #MyTeamEffectifBlesses .flip-card-btn-turn-to-back2, #MyTeamEffectifBlesses .flip-card-btn-turn-to-back, #MyTeamEffectifSuspendus .flip-card-btn-turn-to-back2, #MyTeamEffectifSuspendus .flip-card-btn-turn-to-back, #MyTeamEffectifReserves .flip-card-btn-turn-to-back2, #MyTeamEffectifReserves .flip-card-btn-turn-to-back { visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } /* ===================================================================== CARTES JOUEURS - BOUTONS DU BAS --------------------------------------------------------------------- - premier bouton toujours à gauche - second bouton toujours à droite - boutons masqués dans #MyTeamEffectifPrets ===================================================================== */ /* Zone d'actions : répartit bien les deux boutons */ .player-fut-actions, .flip-card-front .player-fut-actions { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; margin-top: auto !important; padding: 8px 0 0 !important; position: relative !important; left: auto !important; right: auto !important; bottom: auto !important; } /* Premier bouton : forcé à gauche */ .player-fut-actions .flip-card-btn-turn-to-back2, .flip-card-front .player-fut-actions .flip-card-btn-turn-to-back2 { order: 1 !important; margin-left: 0 !important; margin-right: auto !important; position: static !important; } /* Second bouton : forcé à droite */ .player-fut-actions .flip-card-btn-turn-to-back, .flip-card-front .player-fut-actions .flip-card-btn-turn-to-back { order: 2 !important; margin-left: auto !important; margin-right: 0 !important; position: static !important; } /* Cas où les boutons ne sont pas enveloppés comme prévu */ .flip-card-front > .flip-card-btn-turn-to-back2 { left: 8px !important; right: auto !important; } .flip-card-front > .flip-card-btn-turn-to-back { left: auto !important; right: 8px !important; } /* PRETS : aucun bouton visible */ #MyTeamEffectifPrets .flip-card-btn-turn-to-back2, #MyTeamEffectifPrets .flip-card-btn-turn-to-back, #MyTeamEffectifPrets button.flip-card-btn-turn-to-back2, #MyTeamEffectifPrets button.flip-card-btn-turn-to-back, #MyTeamEffectifPrets .player-fut-actions .flip-card-btn-turn-to-back2, #MyTeamEffectifPrets .player-fut-actions .flip-card-btn-turn-to-back { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* ===================================================================== FEUILLES DE MATCH - XBOX ===================================================================== */ .match-sheet, .match-form, .match-detail, .match-entry, .match-page, .match-stats, .match-stats-table, .match-detail-header-table, .match-summary-table { --match-accent:#FFFFFF; --match-accent-rgb:232,255,0; --match-accent-2:#00D9FF; --match-surface:#030711; --match-surface-2:#101E32; --match-border:rgba(232,255,0,.18); } /* Libellés centraux/statistiques */ .match-sheet label, .match-form label, .match-detail label, .match-entry label, .match-page label, .match-stats-table td:nth-child(2), .match-detail-header-table td:nth-child(2), .match-summary-table .match-stat-label, .match-summary-table td[colspan], .match-page .match-label, .match-page .stat-label, .match-page .text-info, .match-page .text-primary { color:#FFFFFF !important; font-weight:850 !important; } /* Score et valeurs */ .match-sheet .score, .match-form .score, .match-detail .score, .match-entry .score, .match-page .score, .match-page .match-score, .match-page .score-value, .match-stats-table td:first-child, .match-stats-table td:last-child { color:#fff !important; } /* Champs / select / textarea */ .match-sheet .form-control, .match-sheet .form-select, .match-form .form-control, .match-form .form-select, .match-entry .form-control, .match-entry .form-select, .match-page .form-control, .match-page .form-select, .match-page textarea { color:#f6fff4 !important; background:#101E32 !important; border:1px solid rgba(232,255,0,.20) !important; } .match-sheet .form-control:focus, .match-sheet .form-select:focus, .match-form .form-control:focus, .match-form .form-select:focus, .match-entry .form-control:focus, .match-entry .form-select:focus, .match-page .form-control:focus, .match-page .form-select:focus, .match-page textarea:focus { color:#fff !important; background:#0d160d !important; border-color:#FFFFFF !important; box-shadow:0 0 0 .15rem rgba(232,255,0,.14) !important; } /* Placeholder */ .match-page ::placeholder, .match-form ::placeholder, .match-entry ::placeholder { color:#8da18b !important; } /* Tables statistiques */ .match-stats-table, .match-detail table, .match-page table { color:#eef8ec !important; } .match-stats-table td, .match-detail table td, .match-page .match-stats-table td { background:#030711 !important; border-color:rgba(232,255,0,.08) !important; } .match-stats-table tr:nth-child(even) td, .match-page .match-stats-table tr:nth-child(even) td { background:#0d150d !important; } /* Boutons */ .match-page .btn-primary, .match-page .btn-info, .match-form .btn-primary, .match-entry .btn-primary { color:#02050C !important; background:#FFFFFF !important; border-color:#FFFFFF !important; } .match-page .btn-primary:hover, .match-form .btn-primary:hover, .match-entry .btn-primary:hover { color:#fff !important; background:#0878D1 !important; border-color:#00D9FF !important; } /* Commentaires / textes secondaires */ .match-page .comments, .match-page .commentaires, .match-detail .comments, .match-detail .commentaires { color:#d9ead6 !important; } /* Icônes */ .match-page i, .match-form i, .match-entry i { color:#00D9FF !important; } /* ================================================================ FIX MENU MOBILE XBOX À PLACER TOUT À LA FIN DU CSS ================================================================ */ @media (max-width: 991.98px) { /* ============================================================ NAVBAR / OFFCANVAS ============================================================ */ .navbar-collapse, .offcanvas, .offcanvas-body { overflow-x: hidden !important; } .offcanvas-body { padding: 16px !important; } /* * Chaque entrée doit occuper sa propre ligne. */ .offcanvas .navbar-nav, .offcanvas .nav, .navbar-collapse .navbar-nav { display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 100% !important; gap: 6px !important; } .offcanvas .nav-item, .navbar-collapse .nav-item { position: relative !important; display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } /* ============================================================ LIENS PRINCIPAUX ============================================================ */ .offcanvas .nav-link, .navbar-collapse .nav-link { position: relative !important; display: flex !important; align-items: center !important; width: 100% !important; min-height: 48px !important; padding: 11px 14px !important; margin: 0 !important; line-height: 1.25 !important; white-space: normal !important; color: #f5f7f5 !important; background: rgba(255,255,255,.025) !important; border: 1px solid rgba(255,255,255,.05) !important; border-radius: 8px !important; box-sizing: border-box !important; overflow: visible !important; } /* Icônes */ .offcanvas .nav-link i, .navbar-collapse .nav-link i { flex: 0 0 24px; width: 24px; margin-right: 10px !important; color: var(--xbox-neon, #FFFFFF) !important; text-align: center; } /* ============================================================ DROPDOWN : FIX PRINCIPAL ============================================================ */ .offcanvas .dropdown-menu, .navbar-collapse .dropdown-menu { /* * Très important : * empêche le dropdown de flotter au-dessus * des autres éléments. */ position: static !important; inset: auto !important; transform: none !important; float: none !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 5px 0 8px 0 !important; padding: 5px !important; background: #030711 !important; border: 1px solid rgba(139,240,0,.20) !important; border-radius: 8px !important; box-shadow: none !important; box-sizing: border-box !important; } /* * Bootstrap ajoute parfois cette propriété * avec Popper. */ .offcanvas .dropdown-menu[data-bs-popper], .navbar-collapse .dropdown-menu[data-bs-popper] { top: auto !important; left: auto !important; right: auto !important; margin-top: 5px !important; } /* ============================================================ ITEMS DES DROPDOWNS ============================================================ */ .offcanvas .dropdown-item, .navbar-collapse .dropdown-item { display: flex !important; align-items: center !important; width: 100% !important; min-height: 42px !important; margin: 2px 0 !important; padding: 9px 12px !important; color: #dfe7df !important; background: transparent !important; border: 0 !important; border-radius: 6px !important; font-size: .95rem !important; font-weight: 600 !important; line-height: 1.25 !important; white-space: normal !important; box-sizing: border-box !important; } .offcanvas .dropdown-item:hover, .offcanvas .dropdown-item:focus, .navbar-collapse .dropdown-item:hover, .navbar-collapse .dropdown-item:focus { color: #ffffff !important; background: rgba(139,240,0,.12) !important; padding-left: 16px !important; } /* ============================================================ EMPÊCHE LA RÈGLE GÉNÉRALE a:not(.btn) DE CASSER LES DROPDOWNS ============================================================ */ .offcanvas .dropdown-menu a:not(.btn) { display: flex !important; width: 100% !important; margin: 0 !important; border: 0 !important; box-shadow: none !important; } /* ============================================================ FLÈCHE DROPDOWN ============================================================ */ .offcanvas .dropdown-toggle, .navbar-collapse .dropdown-toggle { padding-right: 38px !important; } .offcanvas .dropdown-toggle::after, .navbar-collapse .dropdown-toggle::after { position: absolute !important; right: 15px !important; top: 50% !important; transform: translateY(-50%) !important; margin: 0 !important; } /* ============================================================ SELECT / FORM CONTROL ============================================================ */ .offcanvas select, .offcanvas .form-select, .offcanvas .form-control, .navbar-collapse select, .navbar-collapse .form-select, .navbar-collapse .form-control { display: block !important; width: 100% !important; max-width: 100% !important; min-height: 44px !important; margin: 6px 0 !important; color: #ffffff !important; background-color: #202420 !important; border: 1px solid rgba(139,240,0,.30) !important; border-radius: 7px !important; box-sizing: border-box !important; } /* ============================================================ ESPACEMENT DES BLOCS ============================================================ */ .offcanvas .dropdown + .nav-item, .offcanvas .nav-item + .nav-item, .navbar-collapse .nav-item + .nav-item { margin-top: 2px !important; } /* ============================================================ TITRES DE SECTION ============================================================ */ .offcanvas-subtitle, .offcanvas h5, .offcanvas h6 { display: block !important; width: 100% !important; margin: 18px 0 8px 0 !important; padding: 0 4px !important; line-height: 1.3 !important; } /* ============================================================ MENU USER ============================================================ */ .offcanvas .dropdown.show, .navbar-collapse .dropdown.show { height: auto !important; overflow: visible !important; } /* ============================================================ BOUTONS ADMIN / DECONNEXION ============================================================ */ .offcanvas .btn, .navbar-collapse .btn { min-height: 44px; margin-top: 5px; white-space: nowrap; } } /* ================================================================ PETITS MOBILES ================================================================ */ @media (max-width: 575.98px) { .offcanvas-body { padding: 12px !important; } .offcanvas .nav-link, .navbar-collapse .nav-link { min-height: 46px !important; padding: 10px 12px !important; font-size: .95rem !important; } .offcanvas .dropdown-item, .navbar-collapse .dropdown-item { min-height: 40px !important; padding: 8px 10px !important; font-size: .90rem !important; } .offcanvas .dropdown-menu, .navbar-collapse .dropdown-menu { margin: 4px 0 7px 0 !important; } } /* ===================================================================== eFOOTBALL NEON - FINAL THEME + PHOTO EFFECTS BY POSITION Fichier complet basé sur cssFixed-xbox.css. - Pas d'image de fond derrière les joueurs - Effet photo adapté au thème et au poste - Aucun trait/halo parasite au hover - Responsive mobile : 1 carte par ligne ===================================================================== */ :root { --theme-primary: #0878D1 !important; --theme-primary-dark: #034E8C !important; --theme-primary-light: #3CAEFF !important; --theme-accent: #00D9FF !important; --theme-accent-light: #78EEFF !important; --theme-special: #FFFFFF !important; --theme-special-light: #F4F4F4 !important; --theme-bg: #02050C !important; --theme-bg-2: #030711 !important; --theme-surface: #07111F !important; --theme-surface-2: #0D1B2D !important; --theme-surface-3: #07111F !important; --theme-border: rgba(255,255,255,.23) !important; --theme-text: #f8fafc !important; --theme-muted: #00D9FF !important; --bs-primary: #0878D1 !important; --bs-primary-rgb: 8,120,209 !important; --bs-info: #00D9FF !important; --bs-info-rgb: 0,217,255 !important; --ucl-blue: #0878D1 !important; --ucl-cyan: #00D9FF !important; --ucl-gold: #FFFFFF !important; } /* ===================================================================== GLOBAL ===================================================================== */ html, body { background: radial-gradient(circle at 15% 0%, rgba(255,255,255,.15), transparent 36%), radial-gradient(circle at 90% 28%, rgba(255,255,255,.07), transparent 31%), linear-gradient(180deg,#02050C,#030711) !important; color: #f8fafc !important; } ::selection { color: #030711 !important; background: #FFFFFF !important; } a, .btn-link, .link-primary, .text-primary, .text-info { color: #FFFFFF !important; } a:hover, .btn-link:hover, .link-primary:hover { color: #FFFFFF !important; } /* ===================================================================== NAVBAR / DROPDOWN ===================================================================== */ .navbar, .navbar-collapse, .sidebar, nav.navbar, header, .sidebar-wrapper { background: #030711 !important; border-color: rgba(255,255,255,.23) !important; } .navbar-brand, .navbar-brand h1, .navbar .fa-bars, .navbar .bi-list, .navbar .text-primary { color: #FFFFFF !important; } .navbar .nav-link { color: #f8fafc !important; } .navbar .nav-link:hover, .navbar .nav-link:focus, .navbar .nav-link.active, .navbar .show > .nav-link { color: #FFFFFF !important; background: rgba(232,255,0,.08) !important; } .navbar .nav-link::after { background: #FFFFFF !important; box-shadow: 0 0 10px rgba(232,255,0,.48) !important; } .dropdown-menu, .dropdown-menu.show { background: #0D1B2D !important; border-color: rgba(255,255,255,.23) !important; } .dropdown-item { color: #f8fafc !important; } .dropdown-item:hover, .dropdown-item:focus, .dropdown-item.active, .dropdown-item:active { color: #030711 !important; background: #FFFFFF !important; } /* ===================================================================== BUTTONS ===================================================================== */ .btn-primary, .bg-primary, .page-item.active .page-link, .nav-pills .nav-link.active, .nav-pills .show > .nav-link { color: #fff !important; background: linear-gradient( 135deg, #0878D1, #034E8C ) !important; border-color: #00D9FF !important; box-shadow: 0 4px 14px rgba(255,255,255,.26) !important; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { color: #030711 !important; background: #FFFFFF !important; border-color: #FFFFFF !important; } .btn-secondary, .btn-dark { color: #f8fafc !important; background: #0D1B2D !important; border-color: rgba(255,255,255,.12) !important; } .btn-secondary:hover, .btn-dark:hover { color: #fff !important; background: #0878D1 !important; border-color: #00D9FF !important; } /* ===================================================================== GENERAL CARDS ===================================================================== */ .card, .general-card, .content, .modal-content, .offcanvas, .match-card, .player-fut-card, .flip-card-front, .flip-card-back { background: linear-gradient( 180deg, #07111F 0%, #07111F 100% ) !important; border-color: rgba(255,255,255,.23) !important; color: #f8fafc !important; } .card-header, .general-card-header, .general-card .card-header { background: linear-gradient( 90deg, #0D1B2D, #07111F ) !important; border-bottom: 1px solid rgba(255,255,255,.23) !important; color: #fff !important; } /* ===================================================================== TABLES - HOMOGENES + ZERO TRAIT AU HOVER ===================================================================== */ .table, .table-dark, table.dataTable, .tableClassement, .tableManagers { --bs-table-bg: transparent !important; --bs-table-striped-bg: transparent !important; --bs-table-hover-bg: transparent !important; --bs-table-accent-bg: transparent !important; background: #07111F !important; color: #f8fafc !important; border-color: rgba(255,255,255,.12) !important; } .table > thead > tr > *, .table-dark > thead > tr > *, table.dataTable > thead > tr > *, .tableClassement > thead > tr > *, .tableManagers > thead > tr > * { color: #FFFFFF !important; background: #07111F !important; border-color: rgba(255,255,255,.12) !important; } .table > tbody > tr:nth-child(odd) > *, .table-dark > tbody > tr:nth-child(odd) > *, table.dataTable > tbody > tr:nth-child(odd) > *, .tableClassement > tbody > tr:nth-child(odd) > *, .tableManagers > tbody > tr:nth-child(odd) > * { background: #030711 !important; } .table > tbody > tr:nth-child(even) > *, .table-dark > tbody > tr:nth-child(even) > *, table.dataTable > tbody > tr:nth-child(even) > *, .tableClassement > tbody > tr:nth-child(even) > *, .tableManagers > tbody > tr:nth-child(even) > * { background: #07111F !important; } .table-hover tbody tr:hover, .table tbody tr:hover, .table-dark tbody tr:hover, table.dataTable tbody tr:hover, .tableClassement tbody tr:hover, .tableManagers tbody tr:hover { box-shadow: none !important; outline: none !important; border-left: 0 !important; border-right: 0 !important; } .table-hover tbody tr:hover > *, .table tbody tr:hover > *, .table-dark tbody tr:hover > *, table.dataTable tbody tr:hover > *, .tableClassement tbody tr:hover > *, .tableManagers tbody tr:hover > * { color: #fff !important; background: #0D1B2D !important; box-shadow: none !important; outline: none !important; border-left-color: transparent !important; border-right-color: transparent !important; } .table-hover tbody tr:hover::before, .table-hover tbody tr:hover::after, .table tbody tr:hover::before, .table tbody tr:hover::after, .tableClassement tbody tr:hover::before, .tableClassement tbody tr:hover::after, .tableManagers tbody tr:hover::before, .tableManagers tbody tr:hover::after { content: none !important; display: none !important; } .table a, .table-dark a, table.dataTable a, .tableClassement a, .tableManagers a { color: #FFFFFF !important; } .table a:hover, .table-dark a:hover, table.dataTable a:hover, .tableClassement a:hover, .tableManagers a:hover { color: #FFFFFF !important; } /* ===================================================================== CARDS : SUPPRESSION DES TRAITS / HOVER PARASITES ===================================================================== */ .flip-card-3D-wrapper:hover, .players-market-page .flip-card-3D-wrapper:hover, .flip-card-3D-wrapper:hover .flip-card, .players-market-page .flip-card-3D-wrapper:hover .flip-card, .player-fut-card:hover, .players-market-page .player-fut-card:hover { transform: none !important; } .flip-card-front::after, .flip-card-back::after, .player-fut-front::after, .player-fut-back::after, .players-market-page .flip-card-front::after, .players-market-page .flip-card-back::after, .players-market-page .player-fut-front::after, .players-market-page .player-fut-back::after { content: none !important; display: none !important; width: 0 !important; height: 0 !important; background: none !important; box-shadow: none !important; } /* ===================================================================== PHOTO : AUCUNE IMAGE DE FOND ===================================================================== */ .players-market-page .player-fut-photo-wrap, .players-market-page .player-photo, .flip-card-front .profile-photo, .flip-card-back .profile-photo, .profile-photo, .flip-card_GB .player-photo, .flip-card_DEF .player-photo, .flip-card_MIL .player-photo, .flip-card_ATT .player-photo { background-image: none !important; } .players-market-page .player-fut-photo-wrap::before, .players-market-page .player-photo::before, .flip-card-front::before, .flip-card-back::before, .profile-photo::before { content: none !important; display: none !important; } /* ===================================================================== PHOTO : EFFET DE BASE ===================================================================== */ .players-market-page .player-fut-photo-wrap, .players-market-page .player-photo, .flip-card-front .profile-photo, .flip-card-back .profile-photo, .profile-photo { position: relative !important; isolation: isolate !important; overflow: hidden !important; background: radial-gradient( circle at 50% 40%, rgba(255,255,255,.065), transparent 43% ), linear-gradient( 180deg, #07111F 0%, #07111F 100% ) !important; border: 1px solid rgba(255,255,255,.10) !important; box-shadow: inset 0 0 28px rgba(0,0,0,.20), 0 8px 18px rgba(0,0,0,.38) !important; } .players-market-page .player-fut-photo-wrap::after, .players-market-page .player-photo::after { content: "" !important; display: block !important; position: absolute !important; z-index: 1 !important; inset: 0 !important; pointer-events: none !important; background: linear-gradient( 135deg, rgba(255,255,255,.04) 0%, transparent 30%, transparent 70%, rgba(255,255,255,.02) 100% ) !important; } .players-market-page .player-fut-photo, .players-market-page .player-photo img { position: relative !important; z-index: 3 !important; } /* ===================================================================== BASE DE DONNEES - EFFETS PAR POSTE ===================================================================== */ /* GB */ .players-market-page .player-fut-card:has(.player-position-gb) .player-fut-photo-wrap, .players-market-page .flip-card_GB .player-photo { background: radial-gradient( circle at 50% 38%, rgba(232,255,0,.30), transparent 46% ), linear-gradient( 160deg, #31380b 0%, #181d05 52%, #090b02 100% ) !important; border-color: rgba(232,255,0,.48) !important; box-shadow: inset 0 0 34px rgba(232,255,0,.14), 0 0 20px rgba(232,255,0,.12) !important; } /* DEF */ .players-market-page .player-fut-card:has(.player-position-def) .player-fut-photo-wrap, .players-market-page .flip-card_DEF .player-photo { background: radial-gradient( circle at 50% 38%, rgba(255,255,255,.30), transparent 46% ), linear-gradient( 160deg, #0D1B2D 0%, #07111F 52%, #02050C 100% ) !important; border-color: rgba(255,255,255,.48) !important; box-shadow: inset 0 0 34px rgba(255,255,255,.13), 0 0 20px rgba(255,255,255,.12) !important; } /* MIL */ .players-market-page .player-fut-card:has(.player-position-mid) .player-fut-photo-wrap, .players-market-page .flip-card_MIL .player-photo { background: radial-gradient( circle at 50% 38%, rgba(255,255,255,.30), transparent 46% ), linear-gradient( 160deg, #0D1B2D 0%, #07111F 52%, #02050C 100% ) !important; border-color: rgba(255,255,255,.48) !important; box-shadow: inset 0 0 34px rgba(255,255,255,.13), 0 0 20px rgba(255,255,255,.12) !important; } /* ATT */ .players-market-page .player-fut-card:has(.player-position-att) .player-fut-photo-wrap, .players-market-page .flip-card_ATT .player-photo { background: radial-gradient( circle at 50% 38%, rgba(178,73,255,.30), transparent 46% ), linear-gradient( 160deg, #2b1047 0%, #170c25 52%, #02050C 100% ) !important; border-color: rgba(178,73,255,.46) !important; box-shadow: inset 0 0 34px rgba(178,73,255,.13), 0 0 20px rgba(178,73,255,.11) !important; } /* ===================================================================== MYTEAM - EFFETS PAR POSTE ===================================================================== */ /* GB */ .flip-card_GB .profile-photo, .flip-card_GB .player-photo { background: radial-gradient(circle at 50% 38%, rgba(232,255,0,.30), transparent 46%), linear-gradient(160deg,#31380b,#181d05) !important; border-color: rgba(232,255,0,.48) !important; box-shadow: inset 0 0 32px rgba(232,255,0,.14), 0 0 18px rgba(232,255,0,.12) !important; } /* DEF */ .flip-card_DEF .profile-photo, .flip-card_DEF .player-photo { background: radial-gradient(circle at 50% 38%, rgba(255,255,255,.30), transparent 46%), linear-gradient(160deg,#0D1B2D,#07111F) !important; border-color: rgba(255,255,255,.48) !important; box-shadow: inset 0 0 32px rgba(255,255,255,.13), 0 0 18px rgba(255,255,255,.12) !important; } /* MIL */ .flip-card_MIL .profile-photo, .flip-card_MIL .player-photo { background: radial-gradient(circle at 50% 38%, rgba(255,255,255,.30), transparent 46%), linear-gradient(160deg,#0D1B2D,#07111F) !important; border-color: rgba(255,255,255,.48) !important; box-shadow: inset 0 0 32px rgba(255,255,255,.13), 0 0 18px rgba(255,255,255,.12) !important; } /* ATT */ .flip-card_ATT .profile-photo, .flip-card_ATT .player-photo { background: radial-gradient(circle at 50% 38%, rgba(178,73,255,.30), transparent 46%), linear-gradient(160deg,#2b1047,#170c25) !important; border-color: rgba(178,73,255,.46) !important; box-shadow: inset 0 0 32px rgba(178,73,255,.13), 0 0 18px rgba(178,73,255,.11) !important; } /* ===================================================================== PORTRAIT FILTERS PAR POSTE ===================================================================== */ .players-market-page .player-fut-card:has(.player-position-gb) .player-fut-photo { filter: drop-shadow(0 9px 13px rgba(0,0,0,.54)) drop-shadow(0 0 10px rgba(232,255,0,.12)) saturate(1.04) contrast(1.04) !important; } .players-market-page .player-fut-card:has(.player-position-def) .player-fut-photo { filter: drop-shadow(0 9px 13px rgba(0,0,0,.54)) drop-shadow(0 0 10px rgba(255,255,255,.12)) saturate(1.04) contrast(1.04) !important; } .players-market-page .player-fut-card:has(.player-position-mid) .player-fut-photo { filter: drop-shadow(0 9px 13px rgba(0,0,0,.54)) drop-shadow(0 0 10px rgba(255,255,255,.12)) saturate(1.04) contrast(1.04) !important; } .players-market-page .player-fut-card:has(.player-position-att) .player-fut-photo { filter: drop-shadow(0 9px 13px rgba(0,0,0,.54)) drop-shadow(0 0 10px rgba(178,73,255,.11)) saturate(1.04) contrast(1.04) !important; } /* ===================================================================== ZERO HOVER SUR PHOTOS/CARTES ===================================================================== */ .players-market-page .player-fut-card:hover .player-fut-photo, .players-market-page .player-fut-card:hover .player-fut-photo-wrap, .flip-card_GB:hover .profile-photo, .flip-card_DEF:hover .profile-photo, .flip-card_MIL:hover .profile-photo, .flip-card_ATT:hover .profile-photo, .flip-card_GB:hover .player-photo, .flip-card_DEF:hover .player-photo, .flip-card_MIL:hover .player-photo, .flip-card_ATT:hover .player-photo { transform: none !important; } .players-market-page .player-fut-card:hover::before, .players-market-page .player-fut-card:hover::after, .flip-card:hover::before, .flip-card:hover::after { content: none !important; display: none !important; } /* ===================================================================== OFFCANVAS / FOOTER / SWIPER ===================================================================== */ .offcanvas { background: #030711 !important; border-color: rgba(255,255,255,.23) !important; } .offcanvas-header { background: linear-gradient( 135deg, #0878D1, #034E8C ) !important; } .ufl-footer, .footer, .copyright { background: #030711 !important; border-color: rgba(255,255,255,.23) !important; } .ufl-footer-link, .read-more-btn, .vs { color: #FFFFFF !important; } .swiper-button-prev, .swiper-button-next { background: #0878D1 !important; border-color: #00D9FF !important; } .swiper-pagination-bullet-active { background: #FFFFFF !important; } .back-to-top { color: #fff !important; background: #0878D1 !important; border-color: #00D9FF !important; } .back-to-top:hover { color: #030711 !important; background: #FFFFFF !important; border-color: #FFFFFF !important; } /* ===================================================================== MOBILE ===================================================================== */ @media (max-width: 575.98px) { .players-market-page .players-card-grid, .players-card-grid { grid-template-columns: 1fr !important; gap: 16px !important; padding-inline: 8px !important; } .players-market-page .player-fut-wrapper, .players-market-page .flip-card-3D-wrapper, .flip-card-3D-wrapper { width: 100% !important; max-width: 340px !important; margin-inline: auto !important; } .players-market-page .player-fut-photo-wrap { min-height: 195px !important; } .players-market-page .player-fut-photo { height: 195px !important; max-width: 188px !important; } } /* ===================================================================== FINAL NO-XBOX BRAND OVERRIDE Suppression des derniers résidus de palette Xbox dans ce thème. Les verts sémantiques (succès/victoire) restent autorisés uniquement sur badges/états, jamais comme couleur de thème. ===================================================================== */ :root { --xbox-green: #0878D1 !important; --xbox-green-bright: #FFFFFF !important; --xbox-green-soft: #00D9FF !important; --xbox-lime: #FFFFFF !important; --xbox-lime-light: #F4F4F4 !important; --theme-primary: #0878D1 !important; --theme-primary-dark: #034E8C !important; --theme-accent: #00D9FF !important; --theme-special: #FFFFFF !important; --bs-primary: #0878D1 !important; --bs-info: #00D9FF !important; --ucl-blue: #0878D1 !important; --ucl-cyan: #00D9FF !important; --ucl-gold: #FFFFFF !important; } /* GLOBAL / NAV */ .navbar-brand, .navbar-brand h1, .navbar .fa-bars, .navbar .bi-list, .navbar .text-primary { color: #FFFFFF !important; } .navbar .nav-link:hover, .navbar .nav-link:focus, .navbar .nav-link.active { color: #FFFFFF !important; background: color-mix(in srgb, #FFFFFF 8%, transparent) !important; } .navbar .nav-link::after { background: #FFFFFF !important; box-shadow: 0 0 10px color-mix(in srgb, #FFFFFF 48%, transparent) !important; } .btn-primary, .bg-primary, .page-item.active .page-link, .nav-pills .nav-link.active { background: linear-gradient(135deg,#0878D1,#034E8C) !important; border-color: #00D9FF !important; } .btn-primary:hover, .btn-primary:focus { color: #030711 !important; background: #FFFFFF !important; border-color: #FFFFFF !important; } /* TABLEAUX */ .table > thead > tr > *, .table-dark > thead > tr > *, table.dataTable > thead > tr > *, .tableClassement > thead > tr > *, .tableManagers > thead > tr > * { color: #FFFFFF !important; } .table a, .table-dark a, table.dataTable a, .tableClassement a, .tableManagers a { color: #FFFFFF !important; } .table a:hover, .table-dark a:hover, table.dataTable a:hover, .tableClassement a:hover, .tableManagers a:hover { color: #FFFFFF !important; } .table-hover tbody tr:hover > *, .table tbody tr:hover > *, .table-dark tbody tr:hover > *, table.dataTable tbody tr:hover > *, .tableClassement tbody tr:hover > *, .tableManagers tbody tr:hover > * { background: #0D1B2D !important; box-shadow: none !important; border-left-color: transparent !important; border-right-color: transparent !important; } /* COMMENTAIRES : supprime le grand fond vert Xbox visible */ .card-comment, .comment-card, .comments-card, .swiper .card-comment, .swiper-slide .card-comment { color: #f8fafc !important; background: radial-gradient(circle at 92% 0%, color-mix(in srgb, #00D9FF 8%, transparent), transparent 34%), linear-gradient(135deg,#07111F,#0D1B2D) !important; border: 1px solid rgba(255,255,255,.28) !important; box-shadow: 0 8px 22px rgba(0,0,0,.30) !important; } .card-comment .meta, .card-comment .date, .card-comment .contenu, .card-comment p, .card-comment span { color: inherit; } .card-comment a, .card-comment .manager-name-link { color: #FFFFFF !important; } .card-comment a:hover, .card-comment .manager-name-link:hover { color: #FFFFFF !important; } /* zones de score / vote des commentaires */ .card-comment .score, .card-comment .comment-score, .card-comment .vote-score, .card-comment .rating-score, .card-comment .like-count { color: #fff !important; } .card-comment .team, .card-comment .comment-team, .card-comment .manager-zone { background: transparent !important; } /* Boutons commentaires */ .card-comment .btn, .card-comment button:not(.btn-danger):not(.btn-warning) { color: #fff !important; background: linear-gradient(135deg,#0878D1,#034E8C) !important; border-color: #00D9FF !important; } .card-comment .btn:hover, .card-comment button:not(.btn-danger):not(.btn-warning):hover { color: #030711 !important; background: #FFFFFF !important; border-color: #FFFFFF !important; } /* FOOTER */ .ufl-footer-link, .read-more-btn, .vs { color: #FFFFFF !important; } .back-to-top { background: #0878D1 !important; border-color: #00D9FF !important; } .back-to-top:hover { color: #030711 !important; background: #FFFFFF !important; border-color: #FFFFFF !important; } /* Les vrais succès restent verts uniquement pour les états sémantiques */ .badge-ufl.v, .winrate-bar.v, .badge.bg-success, .alert-success, .text-success.semantic-success { /* volontairement non redéfinis */ } /* ===================================================================== FINAL TABLE FIX Corrige les fonds différents entre colonnes / cellules sticky / table-striped / table-dark / DataTables / Classement / Managers. ===================================================================== */ body .table, body .table-dark, body table.dataTable, body .tableClassement, body .tableManagers { --bs-table-bg: transparent !important; --bs-table-striped-bg: transparent !important; --bs-table-striped-color: #f8fafc !important; --bs-table-active-bg: transparent !important; --bs-table-active-color: #f8fafc !important; --bs-table-hover-bg: transparent !important; --bs-table-hover-color: #fff !important; --bs-table-accent-bg: transparent !important; color: #f8fafc !important; border-color: rgba(255,255,255,.12) !important; } body .table > thead > tr > th, body .table > thead > tr > td, body .table-dark > thead > tr > th, body .table-dark > thead > tr > td, body table.dataTable > thead > tr > th, body table.dataTable > thead > tr > td, body .tableClassement > thead > tr > th, body .tableClassement > thead > tr > td, body .tableManagers > thead > tr > th, body .tableManagers > thead > tr > td { color: #FFFFFF !important; background: #07111F !important; background-color: #07111F !important; background-image: none !important; border-color: rgba(255,255,255,.12) !important; box-shadow: none !important; } body .table > tbody > tr > th, body .table > tbody > tr > td, body .table-dark > tbody > tr > th, body .table-dark > tbody > tr > td, body table.dataTable > tbody > tr > th, body table.dataTable > tbody > tr > td, body .tableClassement > tbody > tr > th, body .tableClassement > tbody > tr > td, body .tableManagers > tbody > tr > th, body .tableManagers > tbody > tr > td { --bs-table-bg: transparent !important; --bs-table-accent-bg: transparent !important; color: #f8fafc !important; background-image: none !important; border-color: rgba(255,255,255,.12) !important; box-shadow: none !important; } body .table > tbody > tr:nth-child(odd) > th, body .table > tbody > tr:nth-child(odd) > td, body .table-dark > tbody > tr:nth-child(odd) > th, body .table-dark > tbody > tr:nth-child(odd) > td, body table.dataTable > tbody > tr:nth-child(odd) > th, body table.dataTable > tbody > tr:nth-child(odd) > td, body .tableClassement > tbody > tr:nth-child(odd) > th, body .tableClassement > tbody > tr:nth-child(odd) > td, body .tableManagers > tbody > tr:nth-child(odd) > th, body .tableManagers > tbody > tr:nth-child(odd) > td { background: #030711 !important; background-color: #030711 !important; } body .table > tbody > tr:nth-child(even) > th, body .table > tbody > tr:nth-child(even) > td, body .table-dark > tbody > tr:nth-child(even) > th, body .table-dark > tbody > tr:nth-child(even) > td, body table.dataTable > tbody > tr:nth-child(even) > th, body table.dataTable > tbody > tr:nth-child(even) > td, body .tableClassement > tbody > tr:nth-child(even) > th, body .tableClassement > tbody > tr:nth-child(even) > td, body .tableManagers > tbody > tr:nth-child(even) > th, body .tableManagers > tbody > tr:nth-child(even) > td { background: #07111F !important; background-color: #07111F !important; } body .tableClassement > tbody > tr:nth-child(odd) > td:nth-child(-n+4), body .tableClassement > tbody > tr:nth-child(odd) > th:nth-child(-n+4), body .tableManagers > tbody > tr:nth-child(odd) > td:nth-child(-n+4), body .tableManagers > tbody > tr:nth-child(odd) > th:nth-child(-n+4) { background: #030711 !important; background-color: #030711 !important; } body .tableClassement > tbody > tr:nth-child(even) > td:nth-child(-n+4), body .tableClassement > tbody > tr:nth-child(even) > th:nth-child(-n+4), body .tableManagers > tbody > tr:nth-child(even) > td:nth-child(-n+4), body .tableManagers > tbody > tr:nth-child(even) > th:nth-child(-n+4) { background: #07111F !important; background-color: #07111F !important; } body .table > tbody > tr:hover > th, body .table > tbody > tr:hover > td, body .table-dark > tbody > tr:hover > th, body .table-dark > tbody > tr:hover > td, body table.dataTable > tbody > tr:hover > th, body table.dataTable > tbody > tr:hover > td, body .tableClassement > tbody > tr:hover > th, body .tableClassement > tbody > tr:hover > td, body .tableManagers > tbody > tr:hover > th, body .tableManagers > tbody > tr:hover > td { color: #fff !important; background: #0D1B2D !important; background-color: #0D1B2D !important; background-image: none !important; box-shadow: none !important; outline: none !important; border-left-color: rgba(255,255,255,.12) !important; border-right-color: rgba(255,255,255,.12) !important; } body .table > tbody > tr:hover::before, body .table > tbody > tr:hover::after, body .tableClassement > tbody > tr:hover::before, body .tableClassement > tbody > tr:hover::after, body .tableManagers > tbody > tr:hover::before, body .tableManagers > tbody > tr:hover::after { content: none !important; display: none !important; } body .table-primary, body .table-active, body .table-primary > *, body .table-active > *, body .tableClassement > tbody > tr.table-primary > *, body .tableClassement > tbody > tr.table-active > *, body .tableManagers > tbody > tr.table-primary > *, body .tableManagers > tbody > tr.table-active > *, body .ranking-row-leader > td { --bs-table-bg: #034E8C !important; --bs-table-striped-bg: #034E8C !important; --bs-table-hover-bg: #034E8C !important; --bs-table-accent-bg: transparent !important; color: #fff !important; background: #034E8C !important; background-color: #034E8C !important; background-image: none !important; box-shadow: inset 3px 0 0 #FFFFFF !important; } body .tableClassement > tbody > tr.table-primary > td:nth-child(-n+4), body .tableClassement > tbody > tr.table-active > td:nth-child(-n+4), body .tableManagers > tbody > tr.table-primary > td:nth-child(-n+4), body .tableManagers > tbody > tr.table-active > td:nth-child(-n+4) { background: #034E8C !important; background-color: #034E8C !important; } body .table a, body .table-dark a, body table.dataTable a, body .tableClassement a, body .tableManagers a, body .manager-name-link, body .ranking-team-link { color: #FFFFFF !important; font-weight: 600; } body .table a:hover, body .table-dark a:hover, body table.dataTable a:hover, body .tableClassement a:hover, body .tableManagers a:hover, body .manager-name-link:hover, body .ranking-team-link:hover { color: #FFFFFF !important; } body .nav-tabs .nav-link, body .nav-pills .nav-link { background: #07111F !important; } body .nav-tabs .nav-link.active, body .nav-tabs .nav-item.show .nav-link, body .nav-pills .nav-link.active { color: #030711 !important; background: #FFFFFF !important; border-color: #FFFFFF !important; } body .tableClassement tbody td:nth-child(n+5), body .tableManagers tbody td:nth-child(n+3), body .table tbody td:nth-child(n+1), body table.dataTable tbody td:nth-child(n+1) { background-image: none !important; } @media (max-width: 767.98px) { body .table, body .table-dark, body .tableClassement, body .tableManagers, body table.dataTable { font-size: .74rem !important; } body .table > thead > tr > *, body .table-dark > thead > tr > *, body .tableClassement > thead > tr > *, body .tableManagers > thead > tr > *, body table.dataTable > thead > tr > * { padding: .45rem .30rem !important; } body .table > tbody > tr > *, body .table-dark > tbody > tr > *, body .tableClassement > tbody > tr > *, body .tableManagers > tbody > tr > *, body table.dataTable > tbody > tr > * { padding: .38rem .30rem !important; } } /* ===================================================================== FINAL FLIP CARD FIX Restaure le retournement au clic sur le bouton bas-droite. Certaines règles ajoutées pour neutraliser le hover forçaient transform:none!important et empêchaient .do-flip de fonctionner. Ce bloc DOIT rester tout à la fin du CSS. ===================================================================== */ /* --------------------------------------------------------------------- ANCIEN SYSTEME MYTEAM : .flip-card --------------------------------------------------------------------- */ .flip-card-3D-wrapper { perspective: 1200px !important; -webkit-perspective: 1200px !important; } .flip-card-3D-wrapper .flip-card, .players-market-page .flip-card-3D-wrapper .flip-card { position: relative !important; transform-style: preserve-3d !important; -webkit-transform-style: preserve-3d !important; transform: rotateY(0deg) !important; -webkit-transform: rotateY(0deg) !important; transition: transform .65s cubic-bezier(.4,.2,.2,1) !important; -webkit-transition: -webkit-transform .65s cubic-bezier(.4,.2,.2,1) !important; } /* IMPORTANT : le .do-flip doit gagner même si le pointeur est encore au-dessus de la carte après le clic. */ .flip-card-3D-wrapper .flip-card.do-flip, .flip-card-3D-wrapper:hover .flip-card.do-flip, .players-market-page .flip-card-3D-wrapper .flip-card.do-flip, .players-market-page .flip-card-3D-wrapper:hover .flip-card.do-flip { transform: rotateY(-180deg) !important; -webkit-transform: rotateY(-180deg) !important; } /* Neutralise uniquement le hover quand la carte N'EST PAS retournée */ .flip-card-3D-wrapper:hover .flip-card:not(.do-flip), .players-market-page .flip-card-3D-wrapper:hover .flip-card:not(.do-flip) { transform: rotateY(0deg) !important; -webkit-transform: rotateY(0deg) !important; } /* Faces */ .flip-card-front, .flip-card-back, .players-market-page .flip-card-front, .players-market-page .flip-card-back { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; -webkit-backface-visibility: hidden !important; backface-visibility: hidden !important; transform-style: preserve-3d !important; -webkit-transform-style: preserve-3d !important; } .flip-card-front, .players-market-page .flip-card-front { transform: rotateY(0deg) !important; -webkit-transform: rotateY(0deg) !important; z-index: 2 !important; } .flip-card-back, .players-market-page .flip-card-back { transform: rotateY(180deg) !important; -webkit-transform: rotateY(180deg) !important; z-index: 1 !important; } /* Lors du retournement, ne surtout pas masquer la face arrière via display / visibility / opacity. */ .flip-card.do-flip .flip-card-back, .players-market-page .flip-card.do-flip .flip-card-back { display: block !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } /* Boutons de retournement toujours cliquables */ .flip-card-btn-turn-to-back, .flip-card-btn-turn-to-front, .flip-card-btn-turn-to-back2, button.flip-card-btn-turn-to-back, button.flip-card-btn-turn-to-front, button.flip-card-btn-turn-to-back2 { z-index: 50 !important; pointer-events: auto !important; touch-action: manipulation !important; } /* --------------------------------------------------------------------- NOUVEAU SYSTEME : .player-fut-card --------------------------------------------------------------------- */ .player-fut-wrapper { perspective: 1200px !important; -webkit-perspective: 1200px !important; } .player-fut-wrapper .player-fut-card { position: relative !important; transform-style: preserve-3d !important; -webkit-transform-style: preserve-3d !important; transform: rotateY(0deg) !important; -webkit-transform: rotateY(0deg) !important; transition: transform .65s cubic-bezier(.4,.2,.2,1) !important; -webkit-transition: -webkit-transform .65s cubic-bezier(.4,.2,.2,1) !important; } .player-fut-wrapper .player-fut-card.do-flip, .player-fut-wrapper:hover .player-fut-card.do-flip, .players-market-page .player-fut-wrapper .player-fut-card.do-flip, .players-market-page .player-fut-wrapper:hover .player-fut-card.do-flip { transform: rotateY(-180deg) !important; -webkit-transform: rotateY(-180deg) !important; } .player-fut-wrapper:hover .player-fut-card:not(.do-flip), .players-market-page .player-fut-wrapper:hover .player-fut-card:not(.do-flip) { transform: rotateY(0deg) !important; -webkit-transform: rotateY(0deg) !important; } .player-fut-front, .player-fut-back { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; -webkit-backface-visibility: hidden !important; backface-visibility: hidden !important; } .player-fut-front { transform: rotateY(0deg) !important; -webkit-transform: rotateY(0deg) !important; z-index: 2 !important; } .player-fut-back { transform: rotateY(180deg) !important; -webkit-transform: rotateY(180deg) !important; z-index: 1 !important; } .player-fut-card.do-flip .player-fut-back { display: block !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } /* Sur mobile Edge / Chrome : évite certains artefacts 3D */ .flip-card, .player-fut-card, .flip-card-front, .flip-card-back, .player-fut-front, .player-fut-back { -webkit-transform-origin: center center !important; transform-origin: center center !important; } /* Pas de transition parasite sur les boutons */ .flip-card-btn-turn-to-back, .flip-card-btn-turn-to-front, .flip-card-btn-turn-to-back2 { transform: none !important; -webkit-transform: none !important; } /* --------------------------------------------------------------------- ACCESSIBILITE Même avec prefers-reduced-motion, le changement de face doit fonctionner. --------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .flip-card-3D-wrapper .flip-card, .player-fut-wrapper .player-fut-card { transition-duration: .01ms !important; } .flip-card-3D-wrapper .flip-card.do-flip, .player-fut-wrapper .player-fut-card.do-flip { transform: rotateY(-180deg) !important; -webkit-transform: rotateY(-180deg) !important; } } /* ===================================================================== SYNCHRONISATION DB CARDS AVEC cssDefaut Thème : efootball Même structure, mêmes classes et mêmes dimensions que cssDefaut. ===================================================================== */ /* ===================================================================== DB PLAYER CARDS - COMPACT + PHOTO IDENTIQUE MYTEAM A placer tout a la fin du CSS. Cible uniquement les cartes DB de la page revue (classe .db-player-card). ===================================================================== */ /* --------------------------------------------------------------------- 1. HAUTEUR DE CARTE --------------------------------------------------------------------- */ /* Le flip 3D a besoin d'une hauteur explicite. On la réduit fortement pour supprimer le grand vide sous le contenu. */ .players-market-page .db-player-card { height: 430px !important; min-height: 430px !important; max-height: 430px !important; } .players-market-page .db-player-card.player-fut-card-owner, .players-market-page .db-player-card.player-fut-card-mercato { height: 430px !important; min-height: 430px !important; max-height: 430px !important; } .players-market-page .db-player-front, .players-market-page .db-player-back { height: 100% !important; min-height: 100% !important; max-height: 100% !important; } /* Corps compact */ .players-market-page .db-player-body { height: 100% !important; min-height: 100% !important; padding: 10px !important; } /* --------------------------------------------------------------------- 2. PHOTO : REPREND EXACTEMENT LES DIMENSIONS MYTEAM --------------------------------------------------------------------- */ /* Le problème venait surtout de la classe legacy .player-photo qui ajoutait encore cadre / dimensions / fond spécifiques DB. On neutralise ces anciennes règles. */ .players-market-page .db-player-card .player-fut-photo-wrap { position: relative !important; display: flex !important; min-height: 142px !important; height: 142px !important; max-height: 142px !important; align-items: flex-end !important; justify-content: center !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } /* IMPORTANT : .player-photo était l'ancienne classe DB. Ici on force le rendu de .player-fut-photo MyTeam. */ .players-market-page .db-player-card .player-fut-photo.player-photo, .players-market-page .db-player-card img.player-fut-photo, .players-market-page .db-player-card img.player-photo { position: relative !important; z-index: 2 !important; display: block !important; width: auto !important; max-width: 142px !important; height: 142px !important; max-height: 142px !important; margin: 0 !important; padding: 0 !important; object-fit: contain !important; object-position: center bottom !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; filter: drop-shadow(0 10px 12px rgba(0,0,0,.50)) !important; transform: none !important; } /* Neutralise les anciens pseudo-décors DB */ .players-market-page .db-player-card .player-photo::before, .players-market-page .db-player-card .player-photo::after, .players-market-page .db-player-card .player-fut-photo-wrap::before, .players-market-page .db-player-card .player-fut-photo-wrap::after { content: none !important; display: none !important; } /* --------------------------------------------------------------------- 3. FOND PHOTO PAR POSTE Même logique visuelle que MyTeam, sans cadre supplémentaire. --------------------------------------------------------------------- */ /* GB */ .players-market-page .db-player-card:has(.player-position-gb) .player-fut-photo-wrap { background: radial-gradient( circle at 50% 40%, rgba(255,255,255,.30), transparent 48% ), linear-gradient( 160deg, #07111F 0%, #030711 52%, #030711 100% ) !important; } /* DEF */ .players-market-page .db-player-card:has(.player-position-def) .player-fut-photo-wrap { background: radial-gradient( circle at 50% 40%, rgba(255,255,255,.30), transparent 48% ), linear-gradient( 160deg, #0D1B2D 0%, #0D1B2D 52%, #030711 100% ) !important; } /* MIL */ .players-market-page .db-player-card:has(.player-position-mid) .player-fut-photo-wrap { background: radial-gradient( circle at 50% 40%, rgba(255,255,255,.28), transparent 48% ), linear-gradient( 160deg, #0D1B2D 0%, #07111F 52%, #02050C 100% ) !important; } /* ATT */ .players-market-page .db-player-card:has(.player-position-att) .player-fut-photo-wrap { background: radial-gradient( circle at 50% 40%, rgba(166,91,255,.28), transparent 48% ), linear-gradient( 160deg, #2b1248 0%, #07111F 52%, #02050C 100% ) !important; } /* --------------------------------------------------------------------- 4. MAIN : MEMES PROPORTIONS QUE MYTEAM --------------------------------------------------------------------- */ .players-market-page .db-player-card .player-fut-main { grid-template-columns: 56px minmax(0,1fr) 56px !important; gap: 7px !important; margin-top: 6px !important; } /* --------------------------------------------------------------------- 5. STYLE / PHYSIQUE --------------------------------------------------------------------- */ .players-market-page .db-player-card .player-fut-style { min-height: 38px !important; margin-top: 4px !important; padding: 5px 30px 5px 8px !important; } .players-market-page .db-player-card .player-style-name { font-size: .66rem !important; } .players-market-page .db-player-card .player-constance { font-size: .54rem !important; } .players-market-page .db-player-card .player-fut-physical { margin-top: 5px !important; font-size: .56rem !important; } /* --------------------------------------------------------------------- 6. PRIX / SALAIRE / PROPRIETAIRE --------------------------------------------------------------------- */ .players-market-page .db-player-card .db-player-extra { flex: 0 0 auto !important; min-height: 0 !important; max-height: none !important; margin-top: 5px !important; padding-top: 5px !important; overflow: visible !important; } .players-market-page .db-player-card .db-player-price-row { padding: 5px !important; } .players-market-page .db-player-card .db-player-price-main { font-size: .69rem !important; } .players-market-page .db-player-card .db-player-salary { margin-top: 2px !important; font-size: .52rem !important; } .players-market-page .db-player-card .db-player-owner { margin-top: 4px !important; padding: 3px 4px !important; font-size: .54rem !important; } /* --------------------------------------------------------------------- 7. ACTIONS : JUSTE SOUS LE CONTENU --------------------------------------------------------------------- */ .players-market-page .db-player-card .db-player-actions { flex: 0 0 auto !important; margin-top: 8px !important; padding-top: 5px !important; background: transparent !important; } .players-market-page .db-player-card .db-player-actions .player-card-icon-btn { width: 30px !important; min-width: 30px !important; height: 30px !important; min-height: 30px !important; } /* --------------------------------------------------------------------- 8. MOBILE --------------------------------------------------------------------- */ @media (max-width: 575.98px) { .players-market-page .db-player-wrapper { max-width: 285px !important; } .players-market-page .db-player-card, .players-market-page .db-player-card.player-fut-card-owner, .players-market-page .db-player-card.player-fut-card-mercato { height: 420px !important; min-height: 420px !important; max-height: 420px !important; } .players-market-page .db-player-card .player-fut-photo-wrap { min-height: 132px !important; height: 132px !important; max-height: 132px !important; } .players-market-page .db-player-card .player-fut-photo.player-photo, .players-market-page .db-player-card img.player-fut-photo, .players-market-page .db-player-card img.player-photo { height: 132px !important; max-height: 132px !important; max-width: 132px !important; } } /* ===================================================================== DB PLAYER CARDS - REMOVE BOTTOM EMPTY SPACE IMPORTANT : ce bloc doit rester tout a la fin du CSS. ===================================================================== */ /* La hauteur réelle du contenu est bien inférieure à 430px */ .players-market-page .db-player-card, .players-market-page .db-player-card.player-fut-card-owner, .players-market-page .db-player-card.player-fut-card-mercato { height: 370px !important; min-height: 370px !important; max-height: 370px !important; } /* La face garde la hauteur du parent pour le flip */ .players-market-page .db-player-front, .players-market-page .db-player-back { height: 100% !important; min-height: 100% !important; max-height: 100% !important; } /* Le principal responsable du grand vide était le flex + margin-top:auto sur la zone d'actions. On laisse désormais les boutons suivre immédiatement le contenu. */ .players-market-page .db-player-card .db-player-actions, .players-market-page .db-player-card .player-fut-actions { flex: 0 0 auto !important; margin-top: 6px !important; margin-bottom: 0 !important; padding-top: 4px !important; padding-bottom: 0 !important; background: transparent !important; } /* Le bloc extra ne doit plus absorber toute la hauteur restante */ .players-market-page .db-player-card .db-player-extra, .players-market-page .db-player-card .player-fut-extra { flex: 0 0 auto !important; min-height: 0 !important; height: auto !important; max-height: none !important; margin-top: 4px !important; overflow: visible !important; } /* Le corps ne répartit plus artificiellement l'espace vertical */ .players-market-page .db-player-card .db-player-body, .players-market-page .db-player-card .player-fut-body { justify-content: flex-start !important; } /* Petites optimisations verticales */ .players-market-page .db-player-card .player-fut-main { margin-top: 4px !important; } .players-market-page .db-player-card .player-fut-style { margin-top: 3px !important; } .players-market-page .db-player-card .player-fut-physical { margin-top: 4px !important; margin-bottom: 0 !important; } .players-market-page .db-player-card .db-player-price-row { margin-top: 2px !important; } /* Mobile */ @media (max-width: 575.98px) { .players-market-page .db-player-card, .players-market-page .db-player-card.player-fut-card-owner, .players-market-page .db-player-card.player-fut-card-mercato { height: 360px !important; min-height: 360px !important; max-height: 360px !important; } } /* ===================================================================== BACKGROUND CONSISTENCY - EFOOTBALL --------------------------------------------------------------------- Ce bloc harmonise les fonds de page. Les anciennes règles .bg-dark / .bg-light / .bg-index ne peuvent plus injecter des couleurs d'un autre thème au milieu de la page. ===================================================================== */ :root { --theme-page-background: radial-gradient(circle at 15% 0%, rgba(255,255,255,.15), transparent 36%), radial-gradient(circle at 90% 28%, rgba(255,255,255,.07), transparent 31%), linear-gradient(180deg,#02050C 0%,#030711 100%) !important; --theme-page-surface: #07111F !important; --theme-page-surface-2: #0D1B2D !important; --theme-page-border: rgba(255,255,255,.17) !important; } /* Fond global : une seule source de vérité */ html { min-height: 100% !important; background: #07111F !important; } body { min-height: 100vh !important; background: var(--theme-page-background) !important; background-attachment: fixed !important; background-repeat: no-repeat !important; background-size: cover !important; } /* * Les grands wrappers doivent laisser voir le fond global. * On évite ainsi la grande zone bleu/noir/verte différente sous le contenu. */ main, .main, .main-content, .page-content, .content-wrapper, .page-wrapper, .site-content, .content-area, #content, #main, #wrapper, .wrapper { background-color: transparent !important; } /* * Les helpers Bootstrap historiques étaient la principale source * des changements de couleur entre deux zones de la même page. */ /* * IMPORTANT : * on ne rend plus .bg-dark / .bg-light transparents globalement. * Cette ancienne règle avait une spécificité très forte et pouvait * rendre les dropdown-menu transparents malgré leurs propres styles. * * Les grands wrappers sont déjà rendus transparents juste au-dessus ; * seul .bg-index a donc besoin de rester transparent ici. */ .bg-index { background: transparent !important; background-color: transparent !important; } /* Les helpers Bootstrap gardent une vraie surface Xbox. */ .bg-dark { background-color: #07111F !important; } .bg-light { background-color: #101E32 !important; color: #f4fff4 !important; } /* Dropdown : surface intégralement opaque, y compris si bg-dark/bg-light est présent directement sur le menu ou sur un wrapper interne. */ .dropdown-menu.bg-dark, .dropdown-menu.bg-light, .dropdown-menu .bg-dark, .dropdown-menu .bg-light { opacity: 1 !important; background: #07111F !important; background-color: #07111F !important; background-image: none !important; } /* Conteneurs de contenu : surface uniforme du thème */ .general-card, .card, .accordion-item, .modal-content, .table-responsive { --bs-card-bg: var(--theme-page-surface) !important; } /* * Les cartes déjà stylées conservent leurs backgrounds propres. * Ce fallback s'applique uniquement si aucun background plus spécifique * n'est défini. */ .general-card { background-color: var(--theme-page-surface) !important; } /* Zones structurelles sombres cohérentes */ .offcanvas-footer, .card-footer { background-color: color-mix( in srgb, var(--theme-page-surface) 84%, #000 16% ) !important; } /* Footer : même famille de fond que la page, pas une ancienne couleur */ .ufl-footer, .footer, .copyright { background: linear-gradient( 180deg, var(--theme-page-surface), color-mix(in srgb,var(--theme-page-surface) 72%,#000 28%) ) !important; border-color: var(--theme-page-border) !important; } /* * Les tables restent sur une surface lisible, mais sans utiliser * des bleus/verts hérités d'un autre thème. */ .table, .table-dark { --bs-table-bg: transparent !important; } /* Empêche les anciennes zones pleines de réapparaître au responsive */ @media (max-width: 991.98px) { main, .main, .main-content, .page-content, .content-wrapper, .page-wrapper, .site-content, .content-area, #content, #main, #wrapper, .wrapper, .bg-index { background-color: transparent !important; } } /* ========================================================= MY TEAM / PALMARES / TACTIQUES / EFFECTIFS - PRO UI ========================================================= */ .palmares-table{ margin:0!important; color:#e5edf7!important; background:#02050C!important; border-collapse:collapse!important; font-size:.72rem!important; } .palmares-team-logo{ width:30px; height:30px; padding:2px; object-fit:contain; border-radius:50%; background:#07111F; border:1px solid rgba(255,255,255,.10); } /* ===================================================================== XBOX PURE GREEN - FINAL CLEAN OVERRIDE Base reconstruite depuis cssFixed-efootball(2).css. Aucune couleur bleue/cyan dans l'identité visuelle. ===================================================================== */ :root{ --theme-primary:#0878D1!important; --theme-primary-dark:#034E8C!important; --theme-primary-light:#3CAEFF!important; --theme-accent:#00D9FF!important; --theme-accent-light:#78EEFF!important; --theme-special:#FFFFFF!important; --theme-special-light:#F4F4F4!important; --bs-primary:#0878D1!important; --bs-primary-rgb:16,124,16!important; --bs-info:#00D9FF!important; --bs-info-rgb:93,194,30!important; --ucl-blue:#0878D1!important; --ucl-cyan:#00D9FF!important; --ucl-gold:#FFFFFF!important; --xbox-green:#0878D1!important; --xbox-green-dark:#034E8C!important; --xbox-green-bright:#FFFFFF!important; --xbox-green-soft:#00D9FF!important; --xbox-lime:#FFFFFF!important; --xbox-lime-light:#F4F4F4!important; } html, body{ background: radial-gradient(circle at 12% 0%,rgba(8,120,209,.18),transparent 34%), radial-gradient(circle at 88% 25%,rgba(255,255,255,.07),transparent 30%), linear-gradient(180deg,#02050C 0%,#030711 52%,#02050C 100%)!important; } /* ===================================================================== TABLES - VERROUILLAGE DEFINITIF Même header partout + alternance exclusivement verte. ===================================================================== */ html body .table, html body .table-dark, html body .tableClassement, html body .tableManagers, html body table.dataTable{ --bs-table-bg:transparent!important; --bs-table-striped-bg:transparent!important; --bs-table-active-bg:transparent!important; --bs-table-hover-bg:transparent!important; --bs-table-accent-bg:transparent!important; color:#f5fff5!important; background:#041004!important; border-color:rgba(255,255,255,.10)!important; } /* Tous les headers = exactement la même couleur. */ html body .table > thead > tr > th, html body .table > thead > tr > td, html body .table-dark > thead > tr > th, html body .table-dark > thead > tr > td, html body .tableClassement > thead > tr > th, html body .tableClassement > thead > tr > td, html body .tableManagers > thead > tr > th, html body .tableManagers > thead > tr > td, html body table.dataTable > thead > tr > th, html body table.dataTable > thead > tr > td{ --bs-table-bg:#0D1B2D!important; --bs-table-accent-bg:transparent!important; color:#FFFFFF!important; background:#0D1B2D!important; background-color:#0D1B2D!important; background-image:none!important; border-color:rgba(255,255,255,.16)!important; box-shadow:none!important; } /* DataTables peut ajouter .sorting / classes diverses : même fond. */ html body table.dataTable thead th[class], html body table.dataTable thead td[class], html body .table thead th[class], html body .table thead td[class]{ background-color:#0D1B2D!important; background-image:none!important; } /* Lignes impaires : vert noir. */ html body .table > tbody > tr:nth-child(odd) > *, html body .table-dark > tbody > tr:nth-child(odd) > *, html body .tableClassement > tbody > tr:nth-child(odd) > *, html body .tableManagers > tbody > tr:nth-child(odd) > *, html body table.dataTable > tbody > tr:nth-child(odd) > *, html body table.dataTable > tbody > tr.odd > *{ --bs-table-bg:#07111F!important; --bs-table-accent-bg:transparent!important; color:#f5fff5!important; background:#07111F!important; background-color:#07111F!important; background-image:none!important; box-shadow:none!important; } /* Lignes paires : vert sombre, jamais navy. */ html body .table > tbody > tr:nth-child(even) > *, html body .table-dark > tbody > tr:nth-child(even) > *, html body .tableClassement > tbody > tr:nth-child(even) > *, html body .tableManagers > tbody > tr:nth-child(even) > *, html body table.dataTable > tbody > tr:nth-child(even) > *, html body table.dataTable > tbody > tr.even > *{ --bs-table-bg:#101E32!important; --bs-table-accent-bg:transparent!important; color:#f5fff5!important; background:#101E32!important; background-color:#101E32!important; background-image:none!important; box-shadow:none!important; } /* Les colonnes sticky reprennent strictement la ligne. */ html body .tableClassement > tbody > tr:nth-child(odd) > *:nth-child(-n+4), html body .tableManagers > tbody > tr:nth-child(odd) > *:nth-child(-n+4){ background:#07111F!important; background-color:#07111F!important; background-image:none!important; } html body .tableClassement > tbody > tr:nth-child(even) > *:nth-child(-n+4), html body .tableManagers > tbody > tr:nth-child(even) > *:nth-child(-n+4){ background:#101E32!important; background-color:#101E32!important; background-image:none!important; } /* Highlight uniquement si la ligne porte réellement une classe sémantique. */ html body .table > tbody > tr.table-primary > *, html body .table > tbody > tr.table-active > *, html body .tableClassement > tbody > tr.table-primary > *, html body .tableClassement > tbody > tr.table-active > *, html body .tableManagers > tbody > tr.table-primary > *, html body .tableManagers > tbody > tr.table-active > *, html body .ranking-row-leader > *{ --bs-table-bg:#0878D1!important; color:#fff!important; background:#0878D1!important; background-color:#0878D1!important; background-image:none!important; box-shadow:inset 3px 0 0 #FFFFFF!important; } /* Hover. */ html body .table-hover > tbody > tr:hover > *, html body .tableClassement > tbody > tr:hover > *, html body .tableManagers > tbody > tr:hover > *, html body table.dataTable > tbody > tr:hover > *{ color:#fff!important; background:#0D1B2D!important; background-color:#0D1B2D!important; background-image:none!important; box-shadow:inset 3px 0 0 #FFFFFF!important; } /* Onglets classement / matchs. */ html body .nav-tabs .nav-link, html body .nav-pills .nav-link{ color:#dfffc9!important; background:#07111F!important; } html body .nav-tabs .nav-link.active, html body .nav-tabs .nav-item.show .nav-link, html body .nav-pills .nav-link.active{ color:#030711!important; background:#FFFFFF!important; border-color:#FFFFFF!important; } /* Correctif palmarès : sombre neutre-vert au lieu du bleu-noir historique. */ .palmares-table{ margin:0!important; color:#e5f2e5!important; background:#050a05!important; border-collapse:collapse!important; font-size:.72rem!important; } .palmares-team-logo{ width:30px; height:30px; padding:2px; object-fit:contain; border-radius:50%; background:#07111F; border:1px solid rgba(255,255,255,.12); } /* ===================================================================== XBOX PURE GREEN V5 - TABLE HEADER + HOVER CLEAN FIX --------------------------------------------------------------------- - Tous les en-têtes ont STRICTEMENT le même fond - Aucun trait vert vertical au hover - Aucun box-shadow / outline / bordure colorée cellule par cellule ===================================================================== */ /* ===== EN-TETES : couleur unique absolue ===== */ html body table.table > thead, html body table.table-dark > thead, html body table.tableClassement > thead, html body table.tableManagers > thead, html body table.dataTable > thead, html body table.table > thead > tr, html body table.table-dark > thead > tr, html body table.tableClassement > thead > tr, html body table.tableManagers > thead > tr, html body table.dataTable > thead > tr{ background:#0D1B2D !important; background-color:#0D1B2D !important; background-image:none !important; box-shadow:none !important; } /* Toutes les cellules d'en-tête, y compris sticky / DataTables */ html body table.table > thead > tr > th, html body table.table > thead > tr > td, html body table.table-dark > thead > tr > th, html body table.table-dark > thead > tr > td, html body table.tableClassement > thead > tr > th, html body table.tableClassement > thead > tr > td, html body table.tableManagers > thead > tr > th, html body table.tableManagers > thead > tr > td, html body table.dataTable > thead > tr > th, html body table.dataTable > thead > tr > td{ --bs-table-bg:#0D1B2D !important; --bs-table-accent-bg:transparent !important; color:#FFFFFF !important; background:#0D1B2D !important; background-color:#0D1B2D !important; background-image:none !important; border-top:0 !important; border-left:0 !important; border-right:0 !important; border-bottom:1px solid rgba(255,255,255,.18) !important; outline:0 !important; box-shadow:none !important; text-shadow:none !important; } /* Sticky headers : aucune couleur différente */ html body .tableClassement thead th:nth-child(-n+4), html body .tableClassement thead td:nth-child(-n+4), html body .tableManagers thead th:nth-child(-n+4), html body .tableManagers thead td:nth-child(-n+4){ background:#0D1B2D !important; background-color:#0D1B2D !important; background-image:none !important; border-left:0 !important; border-right:0 !important; box-shadow:none !important; } /* DataTables sorting ne doit pas modifier le fond */ html body table.dataTable thead th.dt-orderable-asc, html body table.dataTable thead th.dt-orderable-desc, html body table.dataTable thead th.dt-ordering-asc, html body table.dataTable thead th.dt-ordering-desc, html body table.dataTable thead td.dt-orderable-asc, html body table.dataTable thead td.dt-orderable-desc, html body table.dataTable thead td.dt-ordering-asc, html body table.dataTable thead td.dt-ordering-desc{ background:#0D1B2D !important; background-color:#0D1B2D !important; background-image:none !important; outline:0 !important; box-shadow:none !important; } /* Même au hover sur un header triable */ html body table.dataTable thead th:hover, html body table.dataTable thead td:hover{ background:#0D1B2D !important; background-color:#0D1B2D !important; background-image:none !important; outline:0 !important; box-shadow:none !important; } /* ===== HOVER CORPS : aucun trait vertical ===== */ html body .table-hover > tbody > tr:hover > td, html body .table-hover > tbody > tr:hover > th, html body .tableClassement > tbody > tr:hover > td, html body .tableClassement > tbody > tr:hover > th, html body .tableManagers > tbody > tr:hover > td, html body .tableManagers > tbody > tr:hover > th, html body table.dataTable > tbody > tr:hover > td, html body table.dataTable > tbody > tr:hover > th{ color:#ffffff !important; background:#0D1B2D !important; background-color:#0D1B2D !important; background-image:none !important; border-left:0 !important; border-right:0 !important; border-top-color:rgba(255,255,255,.08) !important; border-bottom-color:rgba(255,255,255,.08) !important; outline:0 !important; box-shadow:none !important; } /* Neutralise explicitement les anciens inset / liserés hover */ html body .table-hover > tbody > tr:hover, html body .tableClassement > tbody > tr:hover, html body .tableManagers > tbody > tr:hover, html body table.dataTable > tbody > tr:hover{ outline:0 !important; box-shadow:none !important; } /* Les colonnes sticky au hover reprennent exactement le même fond */ html body .tableClassement > tbody > tr:hover > td:nth-child(-n+4), html body .tableClassement > tbody > tr:hover > th:nth-child(-n+4), html body .tableManagers > tbody > tr:hover > td:nth-child(-n+4), html body .tableManagers > tbody > tr:hover > th:nth-child(-n+4){ background:#0D1B2D !important; background-color:#0D1B2D !important; background-image:none !important; border-left:0 !important; border-right:0 !important; outline:0 !important; box-shadow:none !important; } /* Evite les séparateurs vert lime hérités sur les cellules */ html body .table tbody td, html body .table tbody th, html body .tableClassement tbody td, html body .tableClassement tbody th, html body .tableManagers tbody td, html body .tableManagers tbody th, html body table.dataTable tbody td, html body table.dataTable tbody th{ border-left-color:transparent !important; border-right-color:transparent !important; } /* Mobile : même logique stricte */ @media(max-width:767.98px){ html body .table > thead > tr > th, html body .table > thead > tr > td, html body .table-dark > thead > tr > th, html body .table-dark > thead > tr > td, html body .tableClassement > thead > tr > th, html body .tableClassement > thead > tr > td, html body .tableManagers > thead > tr > th, html body .tableManagers > thead > tr > td, html body table.dataTable > thead > tr > th, html body table.dataTable > thead > tr > td{ background:#0D1B2D !important; background-color:#0D1B2D !important; background-image:none !important; box-shadow:none !important; } } /* ===================================================================== XBOX PURE GREEN V6 - SCOREBOARD / PODIUM PREMIUM --------------------------------------------------------------------- Podium 100% Xbox : - 1er = lime Xbox - 2e = vert lumineux - 3e = vert profond - cartes / avatars / noms mieux lisibles - vrai podium responsive sur mobile ===================================================================== */ .scoreboard{ position:relative; isolation:isolate; width:100%; max-width:980px; margin:18px auto; padding:24px 24px 28px; overflow:hidden; color:#f7fff7 !important; background: radial-gradient( circle at 50% -10%, rgba(255,255,255,.12), transparent 38% ), radial-gradient( circle at 8% 72%, rgba(8,120,209,.13), transparent 30% ), linear-gradient( 180deg, #030711 0%, #02050C 100% ) !important; border: 1px solid rgba(255,255,255,.18) !important; border-radius:18px !important; box-shadow: 0 18px 46px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.025), 0 0 28px rgba(255,255,255,.035) !important; } /* Barre Xbox discrète en haut */ .scoreboard::before{ content:""; position:absolute; z-index:0; top:0; left:10%; right:10%; height:2px; background: linear-gradient( 90deg, transparent, #0878D1 18%, #FFFFFF 50%, #0878D1 82%, transparent ); box-shadow: 0 0 14px rgba(255,255,255,.34); pointer-events:none; } .scoreboard::after{ content:""; position:absolute; z-index:-1; width:360px; height:360px; left:50%; top:46%; transform:translate(-50%,-50%); border-radius:50%; background: radial-gradient( circle, rgba(255,255,255,.055) 0%, rgba(8,120,209,.025) 43%, transparent 70% ); pointer-events:none; } /* ===================================================================== ZONE PODIUM ===================================================================== */ .scoreboard__podiums{ position:relative; z-index:1; display:flex; align-items:flex-end; justify-content:center; gap:14px; width:100%; max-width:760px; min-height:410px; margin:18px auto 6px; padding:42px 10px 0; } /* légère ligne de sol */ .scoreboard__podiums::after{ content:""; position:absolute; left:4%; right:4%; bottom:0; height:1px; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.28), transparent ); box-shadow: 0 0 12px rgba(255,255,255,.10); pointer-events:none; } .scoreboard__podiums .scoreboard__podium{ position:relative; display:flex; flex:1 1 0; flex-direction:column; align-items:center; align-self:flex-end; min-width:0; max-width:210px; margin:0 !important; opacity:0; transform: translateY(12px); transition: opacity .45s ease, transform .55s cubic-bezier(.2,.8,.2,1); } .scoreboard__podiums .scoreboard__podium.is-visible{ opacity:1; transform: translateY(0); } /* Si le navigateur le permet : affichage podium classique 2e / 1er / 3e */ @supports selector(.scoreboard__podium:has(.scoreboard__podium-base--first)){ .scoreboard__podium:has(.scoreboard__podium-base--second){ order:1; } .scoreboard__podium:has(.scoreboard__podium-base--first){ order:2; } .scoreboard__podium:has(.scoreboard__podium-base--third){ order:3; } } /* ===================================================================== AVATAR / LOGO DU PODIUM ===================================================================== */ .scoreboard .imgTopPodium, .scoreboard__podium .imgTopPodium{ position:relative; z-index:6; display:block; width:72px !important; height:72px !important; margin:0 auto 10px; padding:4px !important; object-fit:contain; border-radius:50% !important; background: linear-gradient( 145deg, #101E32, #030711 ) !important; border: 2px solid rgba(255,255,255,.44) !important; box-shadow: 0 9px 18px rgba(0,0,0,.48), 0 0 0 4px rgba(8,120,209,.12), 0 0 18px rgba(255,255,255,.10) !important; } /* 1er : avatar plus grand */ .scoreboard__podium:has(.scoreboard__podium-base--first) .imgTopPodium{ width:86px !important; height:86px !important; border-color:#FFFFFF !important; box-shadow: 0 11px 23px rgba(0,0,0,.50), 0 0 0 5px rgba(255,255,255,.10), 0 0 24px rgba(255,255,255,.18) !important; } /* ===================================================================== CHIFFRES DE RANG ===================================================================== */ .scoreboard__podiums .scoreboard__podium-rank{ position:absolute; z-index:4; left:50%; bottom:18px; transform: translateX(-50%); margin:0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Jost", system-ui, sans-serif; font-size:5.2rem; line-height:1; font-weight:950; letter-spacing:-5px; color: rgba(255,255,255,.075) !important; -webkit-text-stroke: 1px rgba(255,255,255,.12); text-shadow: none !important; pointer-events:none; } /* rang 1 plus marqué */ .scoreboard__podium:has(.scoreboard__podium-base--first) .scoreboard__podium-rank{ color: rgba(255,255,255,.12) !important; -webkit-text-stroke: 1px rgba(255,255,255,.20); } /* ===================================================================== SOCLES ===================================================================== */ .scoreboard__podiums .scoreboard__podium-base{ position:relative; z-index:2; width:100%; min-width:0 !important; overflow:hidden; border-radius: 12px 12px 4px 4px !important; opacity:0; transition: height 900ms cubic-bezier(.2,.75,.2,1), opacity .35s ease !important; box-shadow: 0 13px 26px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.18), inset 0 -16px 26px rgba(0,0,0,.18) !important; } .scoreboard__podiums .scoreboard__podium-base.is-expanding{ opacity:1; } /* reflet */ .scoreboard__podiums .scoreboard__podium-base::before{ content:""; position:absolute; top:0; left:0; right:0; height:42%; background: linear-gradient( 180deg, rgba(255,255,255,.16), transparent ); pointer-events:none; } /* ligne lumineuse supérieure */ .scoreboard__podiums .scoreboard__podium-base::after{ content:""; position:absolute; top:0; left:8%; right:8%; height:2px; background: rgba(255,255,255,.55); border-radius:999px; opacity:.50; pointer-events:none; } /* 1ER - Xbox Lime */ .scoreboard__podiums .scoreboard__podium-base--first{ background: linear-gradient( 180deg, #F4F4F4 0%, #FFFFFF 30%, #00D9FF 72%, #0878D1 100% ) !important; border: 1px solid rgba(255,224,138,.70) !important; box-shadow: 0 17px 34px rgba(0,0,0,.52), 0 0 24px rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.32), inset 0 -18px 30px rgba(3,7,17,.22) !important; } /* 2E - Xbox green lumineux */ .scoreboard__podiums .scoreboard__podium-base--second{ background: linear-gradient( 180deg, #78EEFF 0%, #00D9FF 35%, #0878D1 72%, #034E8C 100% ) !important; border: 1px solid rgba(103,232,249,.46) !important; } /* 3E - Xbox deep green */ .scoreboard__podiums .scoreboard__podium-base--third{ background: linear-gradient( 180deg, #034E8C 0%, #0878D1 38%, #034E8C 72%, #063b06 100% ) !important; border: 1px solid rgba(0,217,255,.38) !important; } /* ===================================================================== NOM + SCORE ===================================================================== */ .scoreboard__podiums .scoreboard__podium-number{ position:relative; z-index:7; width:100%; margin-top:12px; padding:9px 8px 8px; text-align:center; border: 1px solid rgba(255,255,255,.10); border-radius:9px; background: linear-gradient( 180deg, rgba(8,120,209,.10), rgba(2,5,12,.82) ); box-shadow: inset 0 1px 0 rgba(255,255,255,.025); line-height:1.15; } .scoreboard__podiums .scoreboard__podium-number b{ display:block; overflow:hidden; color:#f8fff8 !important; font-size:1.05rem !important; line-height:1.15; font-weight:900; white-space:nowrap; text-overflow:ellipsis; text-shadow: 0 2px 5px rgba(0,0,0,.60) !important; } .scoreboard__podiums .scoreboard__podium-number small{ display:block; margin-top:4px; color:#FFFFFF !important; font-size:.69rem !important; line-height:1.1; font-weight:850; letter-spacing:.55px; text-transform:uppercase; text-shadow:none !important; } /* 1er mis davantage en valeur */ .scoreboard__podium:has(.scoreboard__podium-base--first) .scoreboard__podium-number{ border-color: rgba(255,255,255,.24); background: linear-gradient( 180deg, rgba(255,255,255,.12), rgba(3,7,17,.90) ); box-shadow: 0 6px 16px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.04); } .scoreboard__podium:has(.scoreboard__podium-base--first) .scoreboard__podium-number b{ color:#ffffff !important; font-size:1.15rem !important; } /* ===================================================================== SCOREBOARD LISTE / STATS ===================================================================== */ .scoreboard__item{ display:grid; grid-template-columns:minmax(100px,1fr) 2fr auto; align-items:center; gap:12px; padding:10px 12px; border-bottom: 1px solid rgba(255,255,255,.075); } .scoreboard__item:last-child{ border-bottom:0; } .scoreboard__title{ min-width:0; color:#f2fff2; font-size:.78rem; font-weight:800; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .scoreboard__numbers{ color:#FFFFFF; font-size:.75rem; font-weight:900; white-space:nowrap; } .scoreboard__bar{ position:relative; height:8px; overflow:hidden; border-radius:999px; background:#101E32; border: 1px solid rgba(255,255,255,.075); box-shadow: inset 0 2px 4px rgba(0,0,0,.38); } .scoreboard__bar::after{ content:""; position:absolute; top:0; left:0; bottom:0; width:var(--scoreboard-value,0%); border-radius:inherit; background: linear-gradient( 90deg, #0878D1, #00D9FF, #FFFFFF ); box-shadow: 0 0 10px rgba(255,255,255,.18); } /* ===================================================================== RESPONSIVE ===================================================================== */ @media(max-width:768px){ .scoreboard{ margin:10px auto; padding: 16px 10px 20px; border-radius: 14px !important; } .scoreboard__podiums{ gap:7px; min-height:315px; margin: 6px auto 2px; padding: 28px 2px 0; } .scoreboard__podiums .scoreboard__podium{ max-width:none; } .scoreboard .imgTopPodium, .scoreboard__podium .imgTopPodium{ width:55px !important; height:55px !important; margin-bottom:7px; } .scoreboard__podium:has(.scoreboard__podium-base--first) .imgTopPodium{ width:65px !important; height:65px !important; } .scoreboard__podiums .scoreboard__podium-rank{ font-size:3.9rem; bottom:16px; letter-spacing:-4px; } .scoreboard__podiums .scoreboard__podium-number{ margin-top:7px; padding: 7px 4px; } .scoreboard__podiums .scoreboard__podium-number b{ font-size:.78rem !important; } .scoreboard__podiums .scoreboard__podium-number small{ font-size:.56rem !important; letter-spacing:.25px; } .scoreboard__podium:has(.scoreboard__podium-base--first) .scoreboard__podium-number b{ font-size:.86rem !important; } } @media(max-width:430px){ .scoreboard{ padding: 14px 6px 18px; } .scoreboard__podiums{ gap:4px; min-height:275px; padding-top:22px; } .scoreboard .imgTopPodium, .scoreboard__podium .imgTopPodium{ width:46px !important; height:46px !important; padding:3px !important; } .scoreboard__podium:has(.scoreboard__podium-base--first) .imgTopPodium{ width:55px !important; height:55px !important; } .scoreboard__podiums .scoreboard__podium-rank{ font-size:3rem; bottom:14px; } .scoreboard__podiums .scoreboard__podium-number{ border-radius:7px; } .scoreboard__podiums .scoreboard__podium-number b{ display:-webkit-box; font-size:.68rem !important; white-space:normal; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .scoreboard__podiums .scoreboard__podium-number small{ font-size:.49rem !important; } .scoreboard__item{ grid-template-columns: minmax(70px,1fr) minmax(90px,1.5fr) auto; gap:6px; padding: 8px 6px; } .scoreboard__title, .scoreboard__numbers{ font-size:.66rem; } } /* ===================================================================== XBOX PURE GREEN V7 - DERNIERS RESULTATS MOBILE --------------------------------------------------------------------- Le tableau historique lastResultsHP contient 9 colonnes : 1 détail | 2 logo J1 | 3 J1 | 4 score J1 | 5 score J2 | 6 J2 | 7 logo J2 | 8 compétition | 9 date Sur smartphone on conserve l'information essentielle : détail + logo domicile + J1 + score + score + J2. ===================================================================== */ @media (max-width: 575.98px){ /* * Sélecteur du tableau historique lastResultsHP. * On cible volontairement sa combinaison de classes + style * afin de ne pas modifier tous les tableaux du site. */ table.table.table-dark.table-striped.table-sm.text-center.align-middle[style*="font-size:0.7em"], .lrhp-match-table{ width:100% !important; max-width:100% !important; min-width:0 !important; margin:0 !important; table-layout:fixed !important; font-size:.62rem !important; overflow:hidden !important; border-collapse:collapse !important; } /* * Les trois informations secondaires passent dans le détail * du match : deuxième logo, compétition et date. */ table.table.table-dark.table-striped.table-sm.text-center.align-middle[style*="font-size:0.7em"] > tbody > tr > td:nth-child(7), table.table.table-dark.table-striped.table-sm.text-center.align-middle[style*="font-size:0.7em"] > tbody > tr > td:nth-child(8), table.table.table-dark.table-striped.table-sm.text-center.align-middle[style*="font-size:0.7em"] > tbody > tr > td:nth-child(9), table.table.table-dark.table-striped.table-sm.text-center.align-middle[style*="font-size:0.7em"] > tr > td:nth-child(7), table.table.table-dark.table-striped.table-sm.text-center.align-middle[style*="font-size:0.7em"] > tr > td:nth-child(8), table.table.table-dark.table-striped.table-sm.text-center.align-middle[style*="font-size:0.7em"] > tr > td:nth-child(9){ display:none !important; } /* Toutes les cellules visibles sont très compactes */ table.table.table-dark.table-striped.table-sm.text-center.align-middle[style*="font-size:0.7em"] > tbody > tr > td, table.table.table-dark.table-striped.table-sm.text-center.align-middle[style*="font-size:0.7em"] > tr > td, .lrhp-match-table td{ min-width:0 !important; padding:6px 3px !important; vertical-align:middle !important; border-left:0 !important; border-right:0 !important; overflow:hidden !important; } /* Bouton détail */ table.table.table-dark.table-striped.table-sm.text-center.align-middle[style*="font-size:0.7em"] td:nth-child(1){ width:36px !important; } table.table.table-dark.table-striped.table-sm.text-center.align-middle[style*="font-size:0.7em"] td:nth-child(1) .btn{ width:28px !important; min-width:28px !important; height:28px !important; min-height:28px !important; padding:0 !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; border-radius:7px !important; font-size:.66rem !important; } /* Logo équipe 1 */ table.table.table-dark.table-striped.table-sm.text-center.align-middle[style*="font-size:0.7em"] td:nth-child(2){ width:38px !important; } table.table.table-dark.table-striped.table-sm.text-center.align-middle[style*="font-size:0.7em"] td:nth-child(2) .imgClassement{ width:29px !important; max-width:29px !important; height:29px !important; padding:2px !important; object-fit:contain !important; border-radius:50% !important; } /* Noms des managers : partagent l'espace disponible */ table.table.table-dark.table-striped.table-sm.text-center.align-middle[style*="font-size:0.7em"] td:nth-child(3), table.table.table-dark.table-striped.table-sm.text-center.align-middle[style*="font-size:0.7em"] td:nth-child(6){ width:auto !important; padding-left:4px !important; padding-right:4px !important; text-align:left !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } table.table.table-dark.table-striped.table-sm.text-center.align-middle[style*="font-size:0.7em"] td:nth-child(3) a, table.table.table-dark.table-striped.table-sm.text-center.align-middle[style*="font-size:0.7em"] td:nth-child(6) a{ display:block !important; max-width:100% !important; overflow:hidden !important; white-space:nowrap !important; text-overflow:ellipsis !important; font-size:.61rem !important; line-height:1.05 !important; font-weight:800 !important; color:#FFFFFF !important; } /* Scores */ table.table.table-dark.table-striped.table-sm.text-center.align-middle[style*="font-size:0.7em"] td:nth-child(4), table.table.table-dark.table-striped.table-sm.text-center.align-middle[style*="font-size:0.7em"] td:nth-child(5){ width:34px !important; padding-left:2px !important; padding-right:2px !important; } table.table.table-dark.table-striped.table-sm.text-center.align-middle[style*="font-size:0.7em"] td:nth-child(4) > div, table.table.table-dark.table-striped.table-sm.text-center.align-middle[style*="font-size:0.7em"] td:nth-child(5) > div{ width:30px !important; min-width:30px !important; max-width:30px !important; height:23px !important; margin:0 auto !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:4px !important; font-size:.66rem !important; line-height:1 !important; font-weight:900 !important; } /* * Le wrapper responsive ne doit pas créer de largeur artificielle. */ .table-responsive:has( > table.table.table-dark.table-striped.table-sm.text-center.align-middle[style*="font-size:0.7em"] ){ width:100% !important; max-width:100% !important; overflow-x:hidden !important; } /* Version relookée si elle est utilisée */ .lrhp-widget{ width:100% !important; max-width:100% !important; overflow:hidden !important; } .lrhp-match-card, .lrhp-match-content{ width:100% !important; max-width:100% !important; } .lrhp-match-table{ min-width:0 !important; } } /* Très petits téléphones */ @media (max-width: 380px){ table.table.table-dark.table-striped.table-sm.text-center.align-middle[style*="font-size:0.7em"] td:nth-child(1){ width:32px !important; } table.table.table-dark.table-striped.table-sm.text-center.align-middle[style*="font-size:0.7em"] td:nth-child(2){ width:34px !important; } table.table.table-dark.table-striped.table-sm.text-center.align-middle[style*="font-size:0.7em"] td:nth-child(4), table.table.table-dark.table-striped.table-sm.text-center.align-middle[style*="font-size:0.7em"] td:nth-child(5){ width:31px !important; } table.table.table-dark.table-striped.table-sm.text-center.align-middle[style*="font-size:0.7em"] td:nth-child(3) a, table.table.table-dark.table-striped.table-sm.text-center.align-middle[style*="font-size:0.7em"] td:nth-child(6) a{ font-size:.57rem !important; } } /* ===================================================================== XBOX PURE GREEN V8 - DERNIERS RESULTATS MOBILE / TOUTES COLONNES --------------------------------------------------------------------- Toutes les colonnes restent visibles sur smartphone. Aucun masquage, aucun scroll horizontal obligatoire. ===================================================================== */ @media (max-width:575.98px){ /* Réaffiche explicitement les colonnes masquées dans la V7 */ table.table.table-dark.table-striped.table-sm.text-center.align-middle[style*="font-size:0.7em"] > tbody > tr > td:nth-child(7), table.table.table-dark.table-striped.table-sm.text-center.align-middle[style*="font-size:0.7em"] > tbody > tr > td:nth-child(8), table.table.table-dark.table-striped.table-sm.text-center.align-middle[style*="font-size:0.7em"] > tbody > tr > td:nth-child(9), table.table.table-dark.table-striped.table-sm.text-center.align-middle[style*="font-size:0.7em"] > tr > td:nth-child(7), table.table.table-dark.table-striped.table-sm.text-center.align-middle[style*="font-size:0.7em"] > tr > td:nth-child(8), table.table.table-dark.table-striped.table-sm.text-center.align-middle[style*="font-size:0.7em"] > tr > td:nth-child(9){ display:table-cell !important; } /* Le tableau tient dans la largeur du téléphone */ table.table.table-dark.table-striped.table-sm.text-center.align-middle[style*="font-size:0.7em"], .lrhp-match-table{ width:100% !important; max-width:100% !important; min-width:0 !important; table-layout:fixed !important; margin:0 !important; font-size:.50rem !important; line-height:1.05 !important; border-collapse:collapse !important; } table.table.table-dark.table-striped.table-sm.text-center.align-middle[style*="font-size:0.7em"] td, .lrhp-match-table td{ min-width:0 !important; max-width:none !important; padding:5px 1px !important; overflow:hidden !important; vertical-align:middle !important; border-left:0 !important; border-right:0 !important; } /* 1 - bouton détail */ table.table.table-dark.table-striped.table-sm.text-center.align-middle[style*="font-size:0.7em"] td:nth-child(1){ width:8% !important; } table.table.table-dark.table-striped.table-sm.text-center.align-middle[style*="font-size:0.7em"] td:nth-child(1) .btn{ width:24px !important; min-width:24px !important; max-width:24px !important; height:24px !important; min-height:24px !important; padding:0 !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; border-radius:6px !important; font-size:.55rem !important; } /* 2 et 7 - logos */ table.table.table-dark.table-striped.table-sm.text-center.align-middle[style*="font-size:0.7em"] td:nth-child(2), table.table.table-dark.table-striped.table-sm.text-center.align-middle[style*="font-size:0.7em"] td:nth-child(7){ width:8% !important; } table.table.table-dark.table-striped.table-sm.text-center.align-middle[style*="font-size:0.7em"] td:nth-child(2) .imgClassement, table.table.table-dark.table-striped.table-sm.text-center.align-middle[style*="font-size:0.7em"] td:nth-child(7) .imgClassement{ width:23px !important; max-width:23px !important; height:23px !important; padding:1px !important; object-fit:contain !important; border-radius:50% !important; } /* 3 et 6 - managers */ table.table.table-dark.table-striped.table-sm.text-center.align-middle[style*="font-size:0.7em"] td:nth-child(3), table.table.table-dark.table-striped.table-sm.text-center.align-middle[style*="font-size:0.7em"] td:nth-child(6){ width:18% !important; padding-left:2px !important; padding-right:2px !important; text-align:left !important; } table.table.table-dark.table-striped.table-sm.text-center.align-middle[style*="font-size:0.7em"] td:nth-child(3) a, table.table.table-dark.table-striped.table-sm.text-center.align-middle[style*="font-size:0.7em"] td:nth-child(6) a{ display:block !important; width:100% !important; max-width:100% !important; overflow:hidden !important; white-space:nowrap !important; text-overflow:ellipsis !important; font-size:.48rem !important; line-height:1 !important; font-weight:800 !important; color:#FFFFFF !important; } /* 4 et 5 - scores */ table.table.table-dark.table-striped.table-sm.text-center.align-middle[style*="font-size:0.7em"] td:nth-child(4), table.table.table-dark.table-striped.table-sm.text-center.align-middle[style*="font-size:0.7em"] td:nth-child(5){ width:7% !important; padding:0 !important; } table.table.table-dark.table-striped.table-sm.text-center.align-middle[style*="font-size:0.7em"] td:nth-child(4) > div, table.table.table-dark.table-striped.table-sm.text-center.align-middle[style*="font-size:0.7em"] td:nth-child(5) > div{ width:22px !important; min-width:22px !important; max-width:22px !important; height:20px !important; margin:0 auto !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:3px !important; font-size:.52rem !important; line-height:1 !important; font-weight:900 !important; } /* 8 - compétition */ table.table.table-dark.table-striped.table-sm.text-center.align-middle[style*="font-size:0.7em"] td:nth-child(8){ width:12% !important; padding-left:1px !important; padding-right:1px !important; color:#F4F4F4 !important; font-size:.42rem !important; line-height:1.05 !important; font-weight:700 !important; white-space:normal !important; overflow-wrap:anywhere !important; } /* 9 - date */ table.table.table-dark.table-striped.table-sm.text-center.align-middle[style*="font-size:0.7em"] td:nth-child(9){ width:15% !important; padding-left:1px !important; padding-right:1px !important; color:#b8c8b8 !important; font-size:.40rem !important; line-height:1.05 !important; white-space:normal !important; overflow-wrap:anywhere !important; } /* Wrapper : aucune colonne tronquée */ .table-responsive:has( > table.table.table-dark.table-striped.table-sm.text-center.align-middle[style*="font-size:0.7em"] ){ width:100% !important; max-width:100% !important; overflow-x:hidden !important; } } /* Très petits écrans */ @media (max-width:390px){ table.table.table-dark.table-striped.table-sm.text-center.align-middle[style*="font-size:0.7em"]{ font-size:.46rem !important; } table.table.table-dark.table-striped.table-sm.text-center.align-middle[style*="font-size:0.7em"] td{ padding-top:4px !important; padding-bottom:4px !important; } table.table.table-dark.table-striped.table-sm.text-center.align-middle[style*="font-size:0.7em"] td:nth-child(1) .btn{ width:22px !important; min-width:22px !important; height:22px !important; min-height:22px !important; } table.table.table-dark.table-striped.table-sm.text-center.align-middle[style*="font-size:0.7em"] td:nth-child(2) .imgClassement, table.table.table-dark.table-striped.table-sm.text-center.align-middle[style*="font-size:0.7em"] td:nth-child(7) .imgClassement{ width:21px !important; max-width:21px !important; height:21px !important; } table.table.table-dark.table-striped.table-sm.text-center.align-middle[style*="font-size:0.7em"] td:nth-child(3) a, table.table.table-dark.table-striped.table-sm.text-center.align-middle[style*="font-size:0.7em"] td:nth-child(6) a{ font-size:.44rem !important; } table.table.table-dark.table-striped.table-sm.text-center.align-middle[style*="font-size:0.7em"] td:nth-child(8){ font-size:.38rem !important; } table.table.table-dark.table-striped.table-sm.text-center.align-middle[style*="font-size:0.7em"] td:nth-child(9){ font-size:.36rem !important; } } /* ===================================================================== XBOX PURE GREEN V8.1 - SWIPER BUTTONS ONLY --------------------------------------------------------------------- Base = V8 validée. Seuls les boutons précédent / suivant sont retouchés. Aucun changement sur : - hauteur du Swiper - swiper-wrapper - swiper-slide - swiper-controls - pagination - cartes commentaires ===================================================================== */ .swiper-button-prev, .swiper-button-next{ width:34px !important; min-width:34px !important; height:34px !important; min-height:34px !important; color:#f7fff7 !important; background: linear-gradient( 145deg, #034E8C 0%, #0878D1 100% ) !important; border: 1px solid rgba(255,255,255,.48) !important; border-radius: 9px !important; box-shadow: 0 4px 10px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.10) !important; transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease !important; } .swiper-button-prev:hover, .swiper-button-next:hover{ color:#030711 !important; background: linear-gradient( 145deg, #00D9FF, #FFFFFF ) !important; border-color:#FFFFFF !important; box-shadow: 0 5px 13px rgba(0,0,0,.34), 0 0 10px rgba(255,255,255,.18) !important; transform: translateY(-1px) !important; } .swiper-button-prev:active, .swiper-button-next:active{ transform: scale(.95) !important; } .swiper-button-prev::after, .swiper-button-next::after{ color:currentColor !important; font-size:12px !important; line-height:1 !important; font-weight:950 !important; } .swiper-button-disabled{ opacity:.28 !important; filter: grayscale(.35) !important; } /* Smartphone : encore légèrement plus compact */ @media(max-width:575.98px){ .swiper-button-prev, .swiper-button-next{ width:31px !important; min-width:31px !important; height:31px !important; min-height:31px !important; border-radius: 8px !important; } .swiper-button-prev::after, .swiper-button-next::after{ font-size: 11px !important; } } /* Pas d'effet hover artificiel sur écran tactile */ @media(hover:none) and (pointer:coarse){ .swiper-button-prev:hover, .swiper-button-next:hover{ color:#f7fff7 !important; background: linear-gradient( 145deg, #034E8C, #0878D1 ) !important; border-color: rgba(255,255,255,.48) !important; box-shadow: 0 4px 10px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.10) !important; transform:none !important; } } /* ===================================================================== XBOX PURE GREEN V8.3 - MOBILE TABS SAFE --------------------------------------------------------------------- Base = V8.1 validée. Objectifs : - garder les onglets sur une seule ligne - NE PAS casser les dropdown Bootstrap - ne pas utiliser overflow-x:auto sur .nav-tabs / .nav-pills - conserver les dropdown-menu en positionnement Bootstrap ===================================================================== */ @media (max-width: 767.98px){ /* * Une seule ligne, mais overflow VISIBLE : * c'est essentiel pour que les menus déroulants puissent sortir * du conteneur sans être coupés. */ .nav-tabs, .nav-pills, .home-tabs, .competition-tabs{ display:flex !important; flex-wrap:nowrap !important; width:100% !important; max-width:100% !important; overflow:visible !important; gap:3px !important; white-space:nowrap !important; } /* * Les items peuvent légèrement rétrécir. * On ne force surtout pas flex:0 0 auto partout. */ .nav-tabs .nav-item, .nav-pills .nav-item, .home-tabs .nav-item, .competition-tabs .nav-item{ flex:0 1 auto !important; width:auto !important; min-width:0 !important; position:relative !important; } /* * Onglets compacts pour tenir sur une ligne. */ .nav-tabs .nav-link, .nav-pills .nav-link, .home-tabs .nav-link, .competition-tabs .nav-link{ display:inline-flex !important; align-items:center !important; justify-content:center !important; width:auto !important; min-width:0 !important; padding:8px 10px !important; font-size:.68rem !important; line-height:1 !important; white-space:nowrap !important; } /* * Les toggles dropdown restent entièrement cliquables. */ .nav-tabs .dropdown-toggle, .nav-pills .dropdown-toggle, .home-tabs .dropdown-toggle, .competition-tabs .dropdown-toggle{ position:relative !important; white-space:nowrap !important; cursor:pointer !important; } /* * On laisse Bootstrap gérer top/left/transform/inset. * On force uniquement visibilité + z-index + largeur raisonnable. */ .nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .home-tabs .dropdown-menu, .competition-tabs .dropdown-menu{ position:absolute !important; z-index:1085 !important; min-width:145px !important; max-width:min(88vw,320px) !important; white-space:normal !important; overflow:visible !important; } /* * Le parent dropdown doit aussi laisser sortir son menu. */ .nav-tabs .dropdown, .nav-pills .dropdown, .home-tabs .dropdown, .competition-tabs .dropdown{ position:relative !important; overflow:visible !important; } } /* Smartphone étroit */ @media (max-width: 430px){ .nav-tabs, .nav-pills, .home-tabs, .competition-tabs{ gap:2px !important; } .nav-tabs .nav-link, .nav-pills .nav-link, .home-tabs .nav-link, .competition-tabs .nav-link{ padding:7px 8px !important; font-size:.63rem !important; } } /* Très petits smartphones */ @media (max-width: 360px){ .nav-tabs .nav-link, .nav-pills .nav-link, .home-tabs .nav-link, .competition-tabs .nav-link{ padding:6px 6px !important; font-size:.58rem !important; } } /* ===================================================================== XBOX PURE GREEN V8.4 - DROPDOWN OPAQUE --------------------------------------------------------------------- Les menus déroulants sont désormais totalement opaques. Aucun contenu de la page ne doit apparaître par transparence. ===================================================================== */ .dropdown-menu, .dropdown-menu.show, .navbar .dropdown-menu, .navbar-collapse .dropdown-menu, .offcanvas .dropdown-menu, .nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .home-tabs .dropdown-menu, .competition-tabs .dropdown-menu{ opacity:1 !important; background:#07111F !important; background-color:#07111F !important; background-image: linear-gradient( 180deg, #0D1B2D 0%, #07111F 100% ) !important; border: 1px solid rgba(255,255,255,.34) !important; box-shadow: 0 12px 28px rgba(0,0,0,.72), 0 0 12px rgba(255,255,255,.08) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; filter:none !important; } /* Sous-menus / éléments du dropdown */ .dropdown-menu .dropdown-item, .navbar .dropdown-menu .dropdown-item, .navbar-collapse .dropdown-menu .dropdown-item, .offcanvas .dropdown-menu .dropdown-item, .nav-tabs .dropdown-menu .dropdown-item, .nav-pills .dropdown-menu .dropdown-item{ opacity:1 !important; color:#efffed !important; background:#07111F !important; background-color:#07111F !important; background-image:none !important; text-shadow:none !important; } /* Hover menu */ .dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus, .dropdown-menu .dropdown-item.active, .dropdown-menu .dropdown-item:active{ color:#030711 !important; background: linear-gradient( 90deg, #00D9FF, #FFFFFF ) !important; background-color:#00D9FF !important; } /* Séparateurs */ .dropdown-divider{ opacity:1 !important; border-color: rgba(255,255,255,.18) !important; } /* Texte / headers éventuels */ .dropdown-header{ color:#FFFFFF !important; background:#07111F !important; } /* Mobile : même fond 100% opaque */ @media(max-width:767.98px){ .dropdown-menu, .dropdown-menu.show, .navbar .dropdown-menu, .navbar-collapse .dropdown-menu, .offcanvas .dropdown-menu, .nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .home-tabs .dropdown-menu, .competition-tabs .dropdown-menu{ background:#07111F !important; background-color:#07111F !important; background-image: linear-gradient( 180deg, #0D1B2D, #07111F ) !important; opacity:1 !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; box-shadow: 0 12px 30px rgba(0,0,0,.78), 0 0 10px rgba(255,255,255,.08) !important; } } /* ===================================================================== XBOX PURE GREEN V8.5 - FULL DROPDOWN OPAQUE WRAPPER --------------------------------------------------------------------- Rend TOUT le menu déroulant opaque : conteneur, UL, LI et zones vides. ===================================================================== */ /* Conteneur global du dropdown */ .dropdown, .dropup, .dropend, .dropstart{ isolation:isolate; } .dropdown-menu, .dropdown-menu.show, ul.dropdown-menu, .navbar .dropdown-menu, .navbar-collapse .dropdown-menu, .offcanvas .dropdown-menu, .nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .home-tabs .dropdown-menu, .competition-tabs .dropdown-menu{ opacity:1 !important; overflow:hidden !important; padding:6px !important; border-radius:10px !important; background:#07111F !important; background-color:#07111F !important; background-image:linear-gradient(180deg,#0D1B2D 0%,#07111F 100%) !important; background-clip:padding-box !important; border:1px solid rgba(255,255,255,.34) !important; box-shadow:0 12px 28px rgba(0,0,0,.72),0 0 12px rgba(255,255,255,.08) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; filter:none !important; } /* Zone interne complète */ .dropdown-menu::before, .dropdown-menu::after, .dropdown-menu.show::before, .dropdown-menu.show::after{ content:none !important; } .dropdown-menu > *, ul.dropdown-menu > *, .dropdown-menu li, .dropdown-menu ul, .dropdown-menu div, .dropdown-menu form, .dropdown-menu .dropdown-item, .dropdown-menu .dropdown-header, .dropdown-menu .dropdown-divider, .dropdown-menu .dropdown-submenu, .dropdown-menu .dropdown-menu-inner{ opacity:1 !important; background-color:transparent !important; background-image:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } /* Les LI / wrappers reprennent le fond opaque pour supprimer les trous */ .dropdown-menu li, .dropdown-menu > li, .dropdown-menu .nav-item, .dropdown-menu .dropdown-submenu, .dropdown-menu .dropdown-item-wrapper, .dropdown-menu .dropdown-row{ background:#07111F !important; } /* Liens */ .dropdown-menu .dropdown-item, .navbar .dropdown-menu .dropdown-item, .navbar-collapse .dropdown-menu .dropdown-item, .offcanvas .dropdown-menu .dropdown-item, .nav-tabs .dropdown-menu .dropdown-item, .nav-pills .dropdown-menu .dropdown-item{ display:block !important; width:100% !important; border-radius:6px !important; color:#efffed !important; background:#07111F !important; background-color:#07111F !important; background-image:none !important; text-shadow:none !important; } /* Hover menu */ .dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus, .dropdown-menu .dropdown-item.active, .dropdown-menu .dropdown-item:active{ color:#030711 !important; background:linear-gradient(90deg,#00D9FF,#FFFFFF) !important; background-color:#00D9FF !important; } /* Séparateurs */ .dropdown-divider{ height:1px !important; margin:6px 0 !important; background:rgba(255,255,255,.18) !important; border:0 !important; opacity:1 !important; } /* Header éventuel */ .dropdown-header{ color:#FFFFFF !important; background:#07111F !important; } /* Mobile */ @media(max-width:767.98px){ .dropdown-menu, .dropdown-menu.show, ul.dropdown-menu, .navbar .dropdown-menu, .navbar-collapse .dropdown-menu, .offcanvas .dropdown-menu, .nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .home-tabs .dropdown-menu, .competition-tabs .dropdown-menu{ background:#07111F !important; background-color:#07111F !important; background-image:linear-gradient(180deg,#0D1B2D,#07111F) !important; opacity:1 !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; box-shadow:0 12px 30px rgba(0,0,0,.78),0 0 10px rgba(255,255,255,.08) !important; } .dropdown-menu li, .dropdown-menu > li, .dropdown-menu .nav-item, .dropdown-menu .dropdown-submenu, .dropdown-menu .dropdown-item-wrapper, .dropdown-menu .dropdown-row, .dropdown-menu .dropdown-item, .dropdown-menu .dropdown-header{ background:#07111F !important; } } /* ===================================================================== XBOX PURE GREEN V8.6 - BACKGROUND HELPER FIX ===================================================================== */ html body .dropdown-menu, html body .dropdown-menu.show, html body .navbar .dropdown-menu, html body .navbar-collapse .dropdown-menu, html body .nav-tabs .dropdown-menu, html body .nav-pills .dropdown-menu { opacity: 1 !important; background: #07111F !important; background-color: #07111F !important; background-image: linear-gradient(180deg,#0D1B2D 0%,#07111F 100%) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html body .dropdown-menu > *, html body .dropdown-menu li, html body .dropdown-menu .dropdown-item, html body .dropdown-menu .dropdown-header { opacity: 1 !important; } html body .dropdown-menu .dropdown-item { background-color: #07111F !important; } /* ===================================================================== XBOX PURE GREEN V8.7 - DROPDOWN / TABS ALWAYS ON TOP --------------------------------------------------------------------- Correction des contextes d'empilement : - menus des onglets toujours au premier plan - pas masqués par cards / tableaux / podium / contenu suivant - fonctionnement Bootstrap conservé ===================================================================== */ /* Barre d'onglets au-dessus du contenu */ .nav-tabs, .nav-pills, .home-tabs, .competition-tabs{ position:relative !important; z-index:3000 !important; overflow:visible !important; isolation:auto !important; } /* Chaque item dropdown crée un point d'ancrage au premier plan */ .nav-tabs .nav-item, .nav-pills .nav-item, .home-tabs .nav-item, .competition-tabs .nav-item, .nav-tabs .dropdown, .nav-pills .dropdown, .home-tabs .dropdown, .competition-tabs .dropdown{ position:relative !important; z-index:3001 !important; overflow:visible !important; } /* Quand un dropdown est ouvert, son item passe encore au-dessus */ .nav-tabs .nav-item.show, .nav-pills .nav-item.show, .home-tabs .nav-item.show, .competition-tabs .nav-item.show, .nav-tabs .dropdown.show, .nav-pills .dropdown.show, .home-tabs .dropdown.show, .competition-tabs .dropdown.show{ z-index:10000 !important; } /* Le menu lui-même */ .nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .home-tabs .dropdown-menu, .competition-tabs .dropdown-menu, .nav-tabs .dropdown-menu.show, .nav-pills .dropdown-menu.show, .home-tabs .dropdown-menu.show, .competition-tabs .dropdown-menu.show{ position:absolute !important; z-index:10001 !important; overflow:visible !important; opacity:1 !important; background:#07111F !important; background-color:#07111F !important; box-shadow: 0 14px 32px rgba(0,0,0,.82), 0 0 14px rgba(255,255,255,.10) !important; } /* Le contenu sous les onglets doit rester derrière */ .tab-content, .tab-pane, .card, .general-card, .scoreboard, .table-responsive{ z-index:auto !important; } /* * Plusieurs pages utilisent un wrapper positionné autour des onglets. * On le laisse respirer verticalement afin de ne pas couper le menu. */ .nav-tabs-wrapper, .nav-pills-wrapper, .tabs-wrapper, .tabs-container, .home-tabs-wrapper, .competition-tabs-wrapper{ position:relative !important; z-index:2999 !important; overflow:visible !important; } /* Si un parent Bootstrap/card contient directement les tabs */ .card:has(> .nav-tabs), .card:has(.card-header > .nav-tabs), .general-card:has(> .nav-tabs), .general-card:has(.nav-tabs), .card:has(> .nav-pills), .general-card:has(> .nav-pills){ overflow:visible !important; } /* Parent contenant un dropdown ouvert : priorité maximale */ .card:has(.dropdown-menu.show), .general-card:has(.dropdown-menu.show), section:has(> .nav-tabs .dropdown-menu.show), section:has(> .nav-pills .dropdown-menu.show), div:has(> .nav-tabs .dropdown-menu.show), div:has(> .nav-pills .dropdown-menu.show){ position:relative !important; z-index:9998 !important; overflow:visible !important; } /* * Les gros blocs situés juste sous les onglets ne doivent jamais * passer devant un dropdown ouvert. */ .nav-tabs + *, .nav-pills + *, .home-tabs + *, .competition-tabs + *{ position:relative; z-index:1; } /* Mobile */ @media(max-width:767.98px){ .nav-tabs, .nav-pills, .home-tabs, .competition-tabs{ z-index:5000 !important; overflow:visible !important; } .nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .home-tabs .dropdown-menu, .competition-tabs .dropdown-menu{ z-index:12000 !important; } .nav-tabs .dropdown.show, .nav-pills .dropdown.show, .home-tabs .dropdown.show, .competition-tabs .dropdown.show, .nav-tabs .nav-item.show, .nav-pills .nav-item.show{ z-index:11999 !important; } } /* ===================================================================== XBOX PURE GREEN V8.9 - BODY BACKGROUND FIX ===================================================================== Le BODY est l'unique fond de page. On évite le dégradé vertical qui créait deux zones de vert différentes. ===================================================================== */ html{ min-height:100% !important; background:#02050C !important; background-color:#02050C !important; } body{ min-height:100vh !important; margin:0 !important; /* * Fond uniforme Xbox. * Le radial est uniquement décoratif et ne crée pas de coupure * horizontale entre le haut et le bas de la page. */ background-color:#02050C !important; background-image: radial-gradient( circle at 50% -180px, rgba(8,120,209,.20) 0, rgba(8,120,209,.08) 260px, rgba(8,120,209,0) 620px ) !important; background-repeat:no-repeat !important; background-position:top center !important; background-size:100% 760px !important; background-attachment:scroll !important; color:#fff !important; } /* ========================================================= WRAPPERS : ils ne doivent JAMAIS repeindre le fond du body ========================================================= */ body > main, body > .main, body > #main, body > #content, body > #wrapper, body > .wrapper, body > .page-wrapper, body > .content-wrapper, body > .main-content, body > .page-content, body > .site-content, body > .content-area, main, .main-content, .page-content, .content-wrapper, .page-wrapper, .site-content, .content-area{ background:transparent !important; background-color:transparent !important; background-image:none !important; } /* ========================================================= DB / LISTE JOUEURS ========================================================= */ .players-market-page, .players-market-page.bg-dark, .players-market-page.bg-light, .players-market-page > .container, .players-market-page > .container-fluid, .players-market-page .row, .players-market-page [class*="col-"]{ background:transparent !important; background-color:transparent !important; background-image:none !important; } /* ========================================================= Bootstrap bg-dark/bg-light : on ne les neutralise PAS globalement. Seulement lorsqu'ils servent de grand wrapper de page. ========================================================= */ body > .bg-dark:not(.navbar):not(.offcanvas):not(.ufl-footer):not(.footer), body > .bg-light:not(.navbar):not(.offcanvas):not(.ufl-footer):not(.footer), main.bg-dark, main.bg-light, #main.bg-dark, #main.bg-light, #content.bg-dark, #content.bg-light, #wrapper.bg-dark, #wrapper.bg-light, .page-wrapper.bg-dark, .page-wrapper.bg-light, .content-wrapper.bg-dark, .content-wrapper.bg-light, .main-content.bg-dark, .main-content.bg-light, .page-content.bg-dark, .page-content.bg-light{ background:transparent !important; background-color:transparent !important; background-image:none !important; } /* ========================================================= Les composants qui DOIVENT conserver leur propre fond ========================================================= */ .players-toolbar{ background:#07111F !important; background-image: linear-gradient(180deg,#07111F,#050b05) !important; } .dropdown-menu, .dropdown-menu.show{ background-color:#07111F !important; background-image: linear-gradient(180deg,#0D1B2D,#07111F) !important; } /* Mobile : exactement le même fond */ @media(max-width:767.98px){ html{ background:#02050C !important; } body{ background-color:#02050C !important; background-image: radial-gradient( circle at 50% -100px, rgba(8,120,209,.18) 0, rgba(8,120,209,.07) 220px, rgba(8,120,209,0) 520px ) !important; background-size:100% 620px !important; } } /* ===================================================================== XBOX PURE GREEN V8.9.1 - OFFCANVAS ABOVE TAB MENUS --------------------------------------------------------------------- Base : V8.9 Seule la hiérarchie des offcanvas est modifiée. Menus onglets existants : - desktop : jusqu'à ~10001 - mobile : jusqu'à ~12000 Offcanvas : - backdrop : 19990 - offcanvas : 20000 - contenu / dropdowns internes : 20010+ ===================================================================== */ /* Backdrop de l'offcanvas : au-dessus du contenu et des menus d'onglets */ html body .offcanvas-backdrop, html body .offcanvas-backdrop.show{ z-index:19990 !important; } /* Tous les offcanvas passent devant les menus des onglets */ html body .offcanvas, html body .offcanvas.show, html body .offcanvas.showing, html body .offcanvas.hiding, html body .offcanvas-start, html body .offcanvas-end, html body .offcanvas-top, html body .offcanvas-bottom{ z-index:20000 !important; } /* Header / body / footer de l'offcanvas */ html body .offcanvas .offcanvas-header, html body .offcanvas .offcanvas-body, html body .offcanvas .offcanvas-footer{ position:relative !important; z-index:20001 !important; } /* * Les dropdowns qui se trouvent DANS un offcanvas * doivent rester au-dessus de l'offcanvas lui-même. */ html body .offcanvas .dropdown, html body .offcanvas .nav-item{ position:relative !important; z-index:20005 !important; } html body .offcanvas .dropdown-menu, html body .offcanvas .dropdown-menu.show{ z-index:20010 !important; opacity:1 !important; background:#07111F !important; background-color:#07111F !important; } /* Le bouton fermeture reste toujours cliquable */ html body .offcanvas .btn-close, html body .offcanvas [data-bs-dismiss="offcanvas"]{ position:relative !important; z-index:20020 !important; } /* Mobile : même hiérarchie */ @media(max-width:991.98px){ html body .offcanvas-backdrop, html body .offcanvas-backdrop.show{ z-index:19990 !important; } html body .offcanvas, html body .offcanvas.show, html body .offcanvas.showing, html body .offcanvas.hiding{ z-index:20000 !important; } html body .offcanvas .dropdown-menu, html body .offcanvas .dropdown-menu.show{ z-index:20010 !important; } } /* ===================================================================== XBOX PURE GREEN V8.9.2 - TOP MENU ABOVE TAB MENUS --------------------------------------------------------------------- Base : V8.9.1 Hiérarchie : - menus onglets : ~10000 / 12000 - menu principal : 15000+ - offcanvas : 20000+ ===================================================================== */ /* Menu principal / header */ html body header, html body .navbar, html body nav.navbar, html body .main-header, html body .top-nav, html body .top-menu, html body .main-menu{ position:relative !important; z-index:15000 !important; overflow:visible !important; } /* Conteneurs de la navbar */ html body .navbar .container, html body .navbar .container-fluid, html body .navbar-nav{ position:relative !important; z-index:15001 !important; overflow:visible !important; } /* Items et dropdowns du menu principal */ html body .navbar .nav-item, html body .navbar .dropdown, html body header .nav-item, html body header .dropdown{ position:relative !important; z-index:15010 !important; overflow:visible !important; } /* Menus déroulants du menu du haut */ html body .navbar .dropdown-menu, html body .navbar .dropdown-menu.show, html body header .dropdown-menu, html body header .dropdown-menu.show{ z-index:15100 !important; opacity:1 !important; background:#07111F !important; background-color:#07111F !important; } /* Collapse Bootstrap desktop/mobile */ html body .navbar-collapse, html body .navbar-collapse.show, html body .navbar-collapse.collapsing{ position:relative !important; z-index:15020 !important; overflow:visible !important; } /* Bouton hamburger */ html body .navbar-toggler{ position:relative !important; z-index:15030 !important; } /* Mobile */ @media(max-width:991.98px){ html body header, html body .navbar, html body nav.navbar, html body .main-header, html body .top-nav, html body .top-menu, html body .main-menu{ z-index:15000 !important; } html body .navbar-collapse, html body .navbar-collapse.show, html body .navbar-collapse.collapsing{ z-index:15020 !important; } html body .navbar .dropdown-menu, html body .navbar .dropdown-menu.show, html body header .dropdown-menu, html body header .dropdown-menu.show{ z-index:15100 !important; } } /* ===================================================================== XBOX PURE GREEN V8.9.3 - TOP MENU ABSOLUTE PRIORITY --------------------------------------------------------------------- Le menu principal doit passer DEVANT absolument tout le contenu de page, y compris les menus déroulants des onglets. Hiérarchie : - MENU DU HAUT : 100000+ - OFFCANVAS : 20000+ - MENUS D'ONGLETS DE PAGE : 200 - ONGLETS DE PAGE : 100 ===================================================================== */ /* ========================================================= 1. ONGLETS DE PAGE : abaissés volontairement ========================================================= */ html body .nav-tabs, html body .nav-pills, html body .home-tabs, html body .competition-tabs{ position:relative !important; z-index:100 !important; overflow:visible !important; } html body .nav-tabs .nav-item, html body .nav-pills .nav-item, html body .home-tabs .nav-item, html body .competition-tabs .nav-item, html body .nav-tabs .dropdown, html body .nav-pills .dropdown, html body .home-tabs .dropdown, html body .competition-tabs .dropdown{ position:relative !important; z-index:110 !important; overflow:visible !important; } html body .nav-tabs .dropdown-menu, html body .nav-pills .dropdown-menu, html body .home-tabs .dropdown-menu, html body .competition-tabs .dropdown-menu, html body .nav-tabs .dropdown-menu.show, html body .nav-pills .dropdown-menu.show, html body .home-tabs .dropdown-menu.show, html body .competition-tabs .dropdown-menu.show{ z-index:200 !important; } /* ========================================================= 2. WRAPPER QUI CONTIENT LE MENU DU HAUT ========================================================= */ /* * C'est la partie importante : * un z-index énorme sur .navbar ne suffit pas si son parent crée * un stacking-context inférieur. On élève donc aussi les wrappers * directs qui contiennent la navbar. */ html body > header, html body > .header, html body > .main-header, html body > .top-header, html body > .navbar, html body > nav, html body > *:has(> .navbar), html body > *:has(> nav.navbar), html body > *:has(.navbar-collapse){ position:relative !important; z-index:100000 !important; overflow:visible !important; transform:none !important; filter:none !important; perspective:none !important; isolation:isolate !important; } /* Wrappers Bootstrap / sticky autour du menu */ html body .sticky-top:has(.navbar), html body .fixed-top:has(.navbar), html body .container:has(> .navbar), html body .container-fluid:has(> .navbar), html body header:has(.navbar), html body .header:has(.navbar), html body .main-header:has(.navbar){ position:relative !important; z-index:100000 !important; overflow:visible !important; transform:none !important; filter:none !important; perspective:none !important; isolation:isolate !important; } /* ========================================================= 3. NAVBAR ELLE-MÊME ========================================================= */ html body header, html body .header, html body .main-header, html body .navbar, html body nav.navbar, html body .top-nav, html body .top-menu, html body .main-menu, html body .mobile-menu, html body .mobile-nav, html body .mobile-navbar{ position:relative !important; z-index:100100 !important; overflow:visible !important; transform:none !important; filter:none !important; } /* Conteneurs internes */ html body .navbar > .container, html body .navbar > .container-fluid, html body .navbar-nav{ position:relative !important; z-index:100110 !important; overflow:visible !important; } /* ========================================================= 4. MENU MOBILE OUVERT ========================================================= */ html body .navbar-collapse, html body .navbar-collapse.show, html body .navbar-collapse.collapsing{ position:relative !important; z-index:100200 !important; overflow:visible !important; transform:none !important; filter:none !important; isolation:isolate !important; } /* Items du menu */ html body .navbar .nav-item, html body .navbar .dropdown, html body .navbar-collapse .nav-item, html body .navbar-collapse .dropdown, html body header .nav-item, html body header .dropdown{ position:relative !important; z-index:100210 !important; overflow:visible !important; } /* Dropdowns du menu du haut */ html body .navbar .dropdown-menu, html body .navbar .dropdown-menu.show, html body .navbar-collapse .dropdown-menu, html body .navbar-collapse .dropdown-menu.show, html body header .dropdown-menu, html body header .dropdown-menu.show{ z-index:100300 !important; opacity:1 !important; background:#07111F !important; background-color:#07111F !important; overflow:visible !important; } /* Hamburger */ html body .navbar-toggler{ position:relative !important; z-index:100400 !important; } /* ========================================================= 5. QUAND LE MENU MOBILE EST OUVERT : les onglets de la PAGE sont forcés derrière ========================================================= */ body:has(.navbar-collapse.show) .nav-tabs, body:has(.navbar-collapse.show) .nav-pills, body:has(.navbar-collapse.show) .home-tabs, body:has(.navbar-collapse.show) .competition-tabs{ z-index:0 !important; } body:has(.navbar-collapse.show) .nav-tabs .dropdown-menu, body:has(.navbar-collapse.show) .nav-pills .dropdown-menu, body:has(.navbar-collapse.show) .home-tabs .dropdown-menu, body:has(.navbar-collapse.show) .competition-tabs .dropdown-menu{ z-index:1 !important; } /* * Si des tabs existent réellement DANS la navbar, * elles restent au niveau du menu principal. */ html body .navbar .nav-tabs, html body .navbar .nav-pills, html body .navbar-collapse .nav-tabs, html body .navbar-collapse .nav-pills, html body header .nav-tabs, html body header .nav-pills{ z-index:100220 !important; } html body .navbar .nav-tabs .dropdown-menu, html body .navbar .nav-pills .dropdown-menu, html body .navbar-collapse .nav-tabs .dropdown-menu, html body .navbar-collapse .nav-pills .dropdown-menu, html body header .nav-tabs .dropdown-menu, html body header .nav-pills .dropdown-menu{ z-index:100310 !important; } /* ========================================================= 6. OFFCANVAS On conserve la correction V8.9.1. Il reste sous le menu principal puisque tu demandes que le menu du haut soit au-dessus de tout. ========================================================= */ html body .offcanvas-backdrop, html body .offcanvas-backdrop.show{ z-index:19990 !important; } html body .offcanvas, html body .offcanvas.show, html body .offcanvas.showing, html body .offcanvas.hiding{ z-index:20000 !important; } /* ========================================================= 7. MOBILE ========================================================= */ @media(max-width:991.98px){ html body > *:has(.navbar), html body > *:has(.navbar-collapse), html body header, html body .header, html body .main-header, html body .navbar, html body nav.navbar{ z-index:100000 !important; overflow:visible !important; } html body .navbar-collapse, html body .navbar-collapse.show, html body .navbar-collapse.collapsing{ z-index:100200 !important; overflow:visible !important; } html body .navbar .dropdown-menu, html body .navbar .dropdown-menu.show, html body .navbar-collapse .dropdown-menu, html body .navbar-collapse .dropdown-menu.show{ z-index:100300 !important; } html body .nav-tabs, html body .nav-pills, html body .home-tabs, html body .competition-tabs{ z-index:100 !important; } html body .nav-tabs .dropdown-menu, html body .nav-pills .dropdown-menu, html body .home-tabs .dropdown-menu, html body .competition-tabs .dropdown-menu{ z-index:200 !important; } } /* ===================================================================== XBOX PURE GREEN V8.9.4 - OFFCANVAS ABSOLUTE PRIORITY --------------------------------------------------------------------- Hiérarchie finale : 1. OFFCANVAS / bouton fermer : 120000+ 2. MENU DU HAUT : 100000+ 3. MENUS D'ONGLETS : 200 4. CONTENU NORMAL : auto L'offcanvas passe donc aussi devant la navbar / menu mobile. ===================================================================== */ /* ========================================================= 1. BACKDROP OFFCANVAS ========================================================= */ html body .offcanvas-backdrop, html body .offcanvas-backdrop.show{ z-index:119900 !important; opacity:.55 !important; background:#000 !important; } /* ========================================================= 2. OFFCANVAS ========================================================= */ html body .offcanvas, html body .offcanvas.show, html body .offcanvas.showing, html body .offcanvas.hiding, html body .offcanvas-start, html body .offcanvas-end, html body .offcanvas-top, html body .offcanvas-bottom{ z-index:120000 !important; overflow:visible !important; } /* Contenu interne */ html body .offcanvas .offcanvas-header, html body .offcanvas .offcanvas-body, html body .offcanvas .offcanvas-footer{ position:relative !important; z-index:120010 !important; } /* ========================================================= 3. BOUTON FERMER : TOUJOURS ACCESSIBLE ========================================================= */ html body .offcanvas .btn-close, html body .offcanvas button.btn-close, html body .offcanvas [data-bs-dismiss="offcanvas"], html body .offcanvas .offcanvas-close{ position:relative !important; z-index:120100 !important; pointer-events:auto !important; } /* ========================================================= 4. DROPDOWNS INTERNES DE L'OFFCANVAS ========================================================= */ html body .offcanvas .dropdown, html body .offcanvas .nav-item{ position:relative !important; z-index:120020 !important; overflow:visible !important; } html body .offcanvas .dropdown-menu, html body .offcanvas .dropdown-menu.show{ z-index:120050 !important; opacity:1 !important; background:#07111F !important; background-color:#07111F !important; } /* ========================================================= 5. SI L'OFFCANVAS EST OUVERT : on force navbar + tabs derrière ========================================================= */ body:has(.offcanvas.show) header, body:has(.offcanvas.show) .navbar, body:has(.offcanvas.show) nav.navbar, body:has(.offcanvas.show) .navbar-collapse, body:has(.offcanvas.show) .navbar-nav, body:has(.offcanvas.show) .top-menu, body:has(.offcanvas.show) .top-nav, body:has(.offcanvas.show) .main-menu{ z-index:100000 !important; } body:has(.offcanvas.show) .nav-tabs, body:has(.offcanvas.show) .nav-pills, body:has(.offcanvas.show) .home-tabs, body:has(.offcanvas.show) .competition-tabs{ z-index:100 !important; } body:has(.offcanvas.show) .nav-tabs .dropdown-menu, body:has(.offcanvas.show) .nav-pills .dropdown-menu, body:has(.offcanvas.show) .home-tabs .dropdown-menu, body:has(.offcanvas.show) .competition-tabs .dropdown-menu{ z-index:200 !important; } /* ========================================================= 6. MOBILE ========================================================= */ @media(max-width:991.98px){ html body .offcanvas-backdrop, html body .offcanvas-backdrop.show{ z-index:119900 !important; } html body .offcanvas, html body .offcanvas.show, html body .offcanvas.showing, html body .offcanvas.hiding{ z-index:120000 !important; } html body .offcanvas .offcanvas-header, html body .offcanvas .offcanvas-body, html body .offcanvas .offcanvas-footer{ z-index:120010 !important; } html body .offcanvas .btn-close, html body .offcanvas [data-bs-dismiss="offcanvas"]{ z-index:120100 !important; } html body .offcanvas .dropdown-menu, html body .offcanvas .dropdown-menu.show{ z-index:120050 !important; } } /* ===== TARGET THEME FINAL LOCK ===== */ :root{ --theme-primary:#0878D1 !important; --theme-primary-dark:#034E8C !important; --theme-primary-light:#3CAEFF !important; --theme-accent:#00D9FF !important; --theme-accent-light:#78EEFF !important; --theme-special:#FFFFFF !important; --theme-special-light:#F4F4F4 !important; --bs-primary:#0878D1 !important; --bs-primary-rgb:8,120,209 !important; --bs-info:#00D9FF !important; --bs-info-rgb:0,217,255 !important; /* variables historiques gardées uniquement pour compatibilité */ --xbox-green:#0878D1 !important; --xbox-green-dark:#034E8C !important; --xbox-green-bright:#FFFFFF !important; --xbox-green-soft:#00D9FF !important; --xbox-lime:#FFFFFF !important; --xbox-lime-light:#F4F4F4 !important; } html{ min-height:100% !important; background:#030711 !important; } body{ min-height:100vh !important; background-color:#030711 !important; background-image: radial-gradient( circle at 50% -160px, rgba(8,120,209,.18) 0%, rgba(0,217,255,.06) 300px, transparent 650px ) !important; background-repeat:no-repeat !important; background-position:top center !important; background-size:100% 780px !important; background-attachment:scroll !important; } /* MY TEAM / PALMARES - correction conservée */ .palmares-table{ margin:0!important; color:#e5edf7!important; background:#070b12!important; border-collapse:collapse!important; font-size:.72rem!important; } .palmares-team-logo{ width:30px; height:30px; padding:2px; object-fit:contain; border-radius:50%; background:#111827; border:1px solid rgba(255,255,255,.10); } /* ===================================================================== V8.9.4.1 - BREADCRUMB PREMIUM / THEME-AWARE ===================================================================== */ .bg-breadcrumb{ position:relative; width:100%; margin:0 0 12px 0 !important; padding:8px 12px !important; color:var(--theme-text,#f8fbff) !important; background: radial-gradient( circle at 0% 50%, color-mix( in srgb, var(--theme-primary,var(--bs-primary,#0878D1)) 16%, transparent ), transparent 42% ), linear-gradient( 90deg, color-mix( in srgb, var(--theme-surface,#070b12) 96%, #000 4% ), color-mix( in srgb, var(--theme-surface-2,#0d1624) 90%, #000 10% ) ) !important; border: 1px solid color-mix( in srgb, var(--theme-accent,var(--bs-info,#00D9FF)) 18%, transparent ) !important; border-left: 3px solid var(--theme-primary,var(--bs-primary,#0878D1)) !important; border-radius:8px !important; box-shadow: 0 5px 14px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.025) !important; } /* Breadcrumb Bootstrap */ .bg-breadcrumb .breadcrumb{ display:flex; align-items:center; flex-wrap:wrap; gap:2px; margin:0 !important; padding:0 !important; background:transparent !important; } /* Eléments */ .bg-breadcrumb .breadcrumb-item{ color:var(--theme-muted,#9aa8cf) !important; font-size:.67rem !important; font-weight:700 !important; line-height:1.2 !important; } /* Liens */ .bg-breadcrumb .breadcrumb-item a{ color: var(--theme-accent,var(--bs-info,#00D9FF)) !important; text-decoration:none !important; font-weight:800 !important; transition: color .15s ease, text-shadow .15s ease !important; } .bg-breadcrumb .breadcrumb-item a:hover{ color: var(--theme-special,#9bf00b) !important; text-shadow: 0 0 7px color-mix( in srgb, var(--theme-special,#9bf00b) 25%, transparent ); } /* Page actuelle */ .bg-breadcrumb .breadcrumb-item.active{ color:#fff !important; font-weight:900 !important; } /* Séparateur */ .bg-breadcrumb .breadcrumb-item + .breadcrumb-item::before{ content:"›" !important; padding:0 6px !important; color: color-mix( in srgb, var(--theme-accent,var(--bs-info,#00D9FF)) 55%, #fff 15% ) !important; font-size:.76rem !important; font-weight:900 !important; } /* Icônes éventuelles */ .bg-breadcrumb i, .bg-breadcrumb .fa, .bg-breadcrumb .fas, .bg-breadcrumb .bi{ margin-right:4px; color: var(--theme-primary,var(--bs-primary,#0878D1)) !important; font-size:.72rem; } /* ========================================================= MOBILE ========================================================= */ @media(max-width:575.98px){ .bg-breadcrumb{ margin-bottom:8px !important; padding:6px 8px !important; border-radius:6px !important; } .bg-breadcrumb .breadcrumb{ flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; white-space:nowrap; scrollbar-width:none; } .bg-breadcrumb .breadcrumb::-webkit-scrollbar{ display:none; } .bg-breadcrumb .breadcrumb-item{ flex:0 0 auto; font-size:.58rem !important; } .bg-breadcrumb .breadcrumb-item + .breadcrumb-item::before{ padding:0 4px !important; font-size:.65rem !important; } } /* ===================================================================== V8.9.4.2 - BREADCRUMB ULTRA COMPACT ===================================================================== */ .bg-breadcrumb{ height:auto !important; min-height:0 !important; margin:0 0 10px 0 !important; padding:6px 10px !important; border-radius:7px !important; } .bg-breadcrumb > div, .bg-breadcrumb .container, .bg-breadcrumb .container-fluid, .bg-breadcrumb .row{ height:auto !important; min-height:0 !important; margin-top:0 !important; margin-bottom:0 !important; padding-top:0 !important; padding-bottom:0 !important; } .bg-breadcrumb .row{ align-items:center !important; } .bg-breadcrumb h1, .bg-breadcrumb h2, .bg-breadcrumb h3, .bg-breadcrumb h4, .bg-breadcrumb h5, .bg-breadcrumb h6{ margin:0 !important; padding:0 !important; line-height:1.05 !important; } .bg-breadcrumb img{ max-height:46px !important; width:auto !important; margin:0 7px 0 0 !important; } @media(max-width:575.98px){ .bg-breadcrumb{ height:auto !important; min-height:0 !important; margin-bottom:8px !important; padding:5px 8px !important; } .bg-breadcrumb > div, .bg-breadcrumb .container, .bg-breadcrumb .container-fluid, .bg-breadcrumb .row{ height:auto !important; min-height:0 !important; padding-top:0 !important; padding-bottom:0 !important; } .bg-breadcrumb img{ max-height:42px !important; } .bg-breadcrumb h1, .bg-breadcrumb h2, .bg-breadcrumb h3, .bg-breadcrumb h4, .bg-breadcrumb h5, .bg-breadcrumb h6{ font-size:1rem !important; line-height:1 !important; } } /* ===================================================================== V8.9.4.3 - BREADCRUMB CLEAN STRIP --------------------------------------------------------------------- Objectif : - supprimer l'effet "gros cadre dans un cadre" - bandeau beaucoup plus léger - logo + titre au centre - aucun gros fond interne parasite ===================================================================== */ .bg-breadcrumb{ display:flex !important; align-items:center !important; justify-content:center !important; width:100% !important; height:auto !important; min-height:0 !important; margin:0 0 12px 0 !important; padding:7px 10px !important; background: linear-gradient( 90deg, transparent 0%, color-mix( in srgb, var(--theme-primary,var(--bs-primary,#0878D1)) 7%, transparent ) 50%, transparent 100% ) !important; border:0 !important; border-top: 1px solid color-mix( in srgb, var(--theme-accent,var(--bs-info,#00D9FF)) 14%, transparent ) !important; border-bottom: 1px solid color-mix( in srgb, var(--theme-accent,var(--bs-info,#00D9FF)) 18%, transparent ) !important; border-radius:0 !important; box-shadow:none !important; } /* Tous les wrappers internes deviennent neutres */ .bg-breadcrumb > *, .bg-breadcrumb > div, .bg-breadcrumb .container, .bg-breadcrumb .container-fluid, .bg-breadcrumb .row, .bg-breadcrumb [class*="col-"]{ width:auto !important; height:auto !important; min-height:0 !important; margin:0 !important; padding:0 !important; background:transparent !important; background-color:transparent !important; background-image:none !important; border:0 !important; box-shadow:none !important; } /* Ligne interne */ .bg-breadcrumb .row{ display:flex !important; align-items:center !important; justify-content:center !important; gap:8px !important; } /* Logo */ .bg-breadcrumb img{ display:block !important; width:auto !important; max-width:42px !important; height:42px !important; max-height:42px !important; margin:0 !important; object-fit:contain !important; border-radius:50% !important; filter: drop-shadow(0 2px 5px rgba(0,0,0,.34)) !important; } /* Titre */ .bg-breadcrumb h1, .bg-breadcrumb h2, .bg-breadcrumb h3, .bg-breadcrumb h4, .bg-breadcrumb h5, .bg-breadcrumb h6{ display:block !important; margin:0 !important; padding:0 !important; color:#fff !important; font-size:.98rem !important; font-weight:900 !important; line-height:1 !important; letter-spacing:.01em !important; text-shadow: 0 2px 4px rgba(0,0,0,.45) !important; } /* Si un breadcrumb Bootstrap est réellement présent */ .bg-breadcrumb .breadcrumb{ display:flex !important; align-items:center !important; width:auto !important; margin:0 !important; padding:0 !important; background:transparent !important; } /* Mobile */ @media(max-width:575.98px){ .bg-breadcrumb{ margin-bottom:9px !important; padding:6px 8px !important; } .bg-breadcrumb .row{ gap:7px !important; } .bg-breadcrumb img{ width:38px !important; max-width:38px !important; height:38px !important; max-height:38px !important; } .bg-breadcrumb h1, .bg-breadcrumb h2, .bg-breadcrumb h3, .bg-breadcrumb h4, .bg-breadcrumb h5, .bg-breadcrumb h6{ font-size:.90rem !important; } } /* ===================================================================== V8.9.4.4 - BREADCRUMB FINAL COMPACT --------------------------------------------------------------------- - moins de hauteur - logo plus petit - titre plus proche du logo - fond quasi invisible - séparation plus fine avec le contenu ===================================================================== */ .bg-breadcrumb{ display:flex !important; align-items:center !important; justify-content:center !important; width:100% !important; min-height:0 !important; height:auto !important; margin:0 0 8px 0 !important; padding:3px 8px !important; background: linear-gradient( 90deg, transparent, color-mix( in srgb, var(--theme-primary,var(--bs-primary,#0878D1)) 2.5%, transparent ) 50%, transparent ) !important; border:0 !important; border-bottom: 1px solid color-mix( in srgb, var(--theme-accent,var(--bs-info,#00D9FF)) 12%, transparent ) !important; border-radius:0 !important; box-shadow:none !important; } .bg-breadcrumb > *, .bg-breadcrumb > div, .bg-breadcrumb .container, .bg-breadcrumb .container-fluid, .bg-breadcrumb .row, .bg-breadcrumb [class*="col-"]{ width:auto !important; min-height:0 !important; height:auto !important; margin:0 !important; padding:0 !important; background:transparent !important; background-color:transparent !important; background-image:none !important; border:0 !important; box-shadow:none !important; } .bg-breadcrumb .row{ display:flex !important; align-items:center !important; justify-content:center !important; gap:5px !important; flex-wrap:nowrap !important; } .bg-breadcrumb img{ display:block !important; width:34px !important; max-width:34px !important; height:34px !important; max-height:34px !important; margin:0 !important; object-fit:contain !important; border-radius:50% !important; filter:drop-shadow(0 2px 4px rgba(0,0,0,.40)) !important; } .bg-breadcrumb h1, .bg-breadcrumb h2, .bg-breadcrumb h3, .bg-breadcrumb h4, .bg-breadcrumb h5, .bg-breadcrumb h6{ display:block !important; margin:0 !important; padding:0 !important; color:#fff !important; font-size:.82rem !important; font-weight:900 !important; line-height:1 !important; letter-spacing:0 !important; text-shadow:0 1px 3px rgba(0,0,0,.48) !important; } .bg-breadcrumb a{ color:#fff !important; text-decoration:none !important; } .bg-breadcrumb .breadcrumb{ display:flex !important; align-items:center !important; width:auto !important; margin:0 !important; padding:0 !important; background:transparent !important; } @media(max-width:575.98px){ .bg-breadcrumb{ margin-bottom:7px !important; padding:2px 6px !important; } .bg-breadcrumb .row{ gap:4px !important; } .bg-breadcrumb img{ width:31px !important; max-width:31px !important; height:31px !important; max-height:31px !important; } .bg-breadcrumb h1, .bg-breadcrumb h2, .bg-breadcrumb h3, .bg-breadcrumb h4, .bg-breadcrumb h5, .bg-breadcrumb h6{ font-size:.76rem !important; } } /* ===================================================================== LM THEME - DEFAULT Base fonctionnelle : V8.9.4.4 ===================================================================== */ :root{ --moto-theme-name:"Default"; --theme-primary:#0878D1 !important; --theme-primary-dark:#034E8C !important; --theme-primary-light:#3CAEFF !important; --theme-accent:#00D9FF !important; --theme-accent-light:#78EEFF !important; --theme-special:#FFFFFF !important; --theme-special-light:#F4F4F4 !important; --theme-bg:#030711 !important; --theme-bg-2:#02050C !important; --theme-surface:#07111F !important; --theme-surface-2:#0D1B2D !important; --theme-surface-3:#101E32 !important; --theme-primary-rgb:8,120,209 !important; --theme-accent-rgb:0,217,255 !important; --bs-primary:#0878D1 !important; --bs-info:#00D9FF !important; /* Alias historiques conservés pour compatibilité */ --xbox-green:#0878D1 !important; --xbox-green-dark:#034E8C !important; --xbox-green-bright:#FFFFFF !important; --xbox-green-soft:#00D9FF !important; --xbox-lime:#FFFFFF !important; --xbox-lime-light:#F4F4F4 !important; --ucl-blue:#0878D1 !important; --ucl-cyan:#00D9FF !important; --ucl-gold:#FFFFFF !important; } html, body{ background: radial-gradient(circle at 15% -80px, rgba(8,120,209,.15), transparent 36%), radial-gradient(circle at 92% 28%, rgba(0,217,255,.07), transparent 31%), linear-gradient(180deg,#02050C,#030711) !important; } /* KTM - orange / noir / blanc */ .btn-primary, .bg-primary, .page-item.active .page-link, .nav-pills .nav-link.active{ background:linear-gradient(135deg,#0878D1,#034E8C) !important; border-color:#00D9FF !important; } .navbar-brand, .navbar .fa-bars, .navbar .bi-list{ color:#0878D1 !important; } .table > thead > tr > *, .table-dark > thead > tr > *, table.dataTable > thead > tr > *{ letter-spacing:.03em !important; } /* ===================================================================== LM FINAL - LOGO SITE + BODY HARMONISE Logo : /img/logoLM_7a.webp ===================================================================== */ /* --- Fond général, en accord avec le thème --- */ html { min-height:100% !important; background:#02050C !important; } body { min-height:100vh !important; margin:0 !important; background-color:#02050C !important; background-image: radial-gradient( circle at 14% -120px, rgba(8,120,209,0.2) 0, rgba(8,120,209,0.08) 260px, transparent 610px ), radial-gradient( circle at 92% 250px, rgba(0,217,255,0.085) 0, transparent 470px ), linear-gradient( 180deg, #02050C 0%, color-mix(in srgb,#02050C 91%,#0878D1 9%) 48%, #02050C 100% ) !important; background-repeat:no-repeat !important; background-position:top center !important; background-size:100% 820px,100% 720px,100% 100% !important; background-attachment:scroll !important; color:#fff !important; } /* Empêche les anciens helpers de remettre un gros fond opaque sur la page. */ body > .container-fluid:not(.fixed-top):not(.offcanvas), body > main, main { background-color:transparent; } /* --- LM remplacé par le logo officiel du site --- */ html body .navbar .navbar-brand { position:relative !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; flex:0 0 54px !important; width:54px !important; min-width:54px !important; max-width:54px !important; height:50px !important; min-height:50px !important; margin-left:10px !important; margin-right:10px !important; padding:2px !important; overflow:visible !important; color:transparent !important; font-size:0 !important; line-height:0 !important; background:transparent !important; border:0 !important; box-shadow:none !important; } /* Masque uniquement le contenu LM existant (h1, span, img éventuel). */ html body .navbar .navbar-brand > * { display:none !important; } /* Affiche img/logoLM_7a.webp. */ html body .navbar .navbar-brand::before { content:"" !important; display:block !important; flex:0 0 auto !important; width:46px !important; height:46px !important; margin:0 !important; background-color:transparent !important; background-image:url("/img/logoLM_7a.webp") !important; background-repeat:no-repeat !important; background-position:center !important; background-size:contain !important; border:0 !important; border-radius:0 !important; filter: drop-shadow(0 3px 5px rgba(0,0,0,.42)) drop-shadow(0 0 7px rgba(8,120,209,0.12)) !important; opacity:1 !important; visibility:visible !important; pointer-events:none !important; } /* Aucun pseudo-élément parasite sur le lien du logo. */ html body .navbar .navbar-brand::after { display:none !important; content:none !important; } /* Le logo reste compact sur téléphone. */ @media(max-width:575.98px) { html body .navbar .navbar-brand { flex-basis:46px !important; width:46px !important; min-width:46px !important; max-width:46px !important; height:44px !important; min-height:44px !important; margin-left:7px !important; margin-right:6px !important; padding:2px !important; } html body .navbar .navbar-brand::before { width:39px !important; height:39px !important; } body { background-size:100% 650px,100% 620px,100% 100% !important; } } /* ===================================================================== BODY WALLPAPER - Default 100% largeur + répétition verticale pour toutes les hauteurs. ===================================================================== */ html { min-height:100% !important; background-color:#02050C !important; } body { min-height:100vh !important; background-color:#02050C !important; background-image: linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.20) 48%,rgba(0,0,0,.34)), url("/img/theme-body-2/body-default.webp") !important; background-position:center top,center top !important; background-size:100% 100%,100% auto !important; background-repeat:no-repeat,repeat-y !important; background-attachment:scroll,scroll !important; } /* ===================================================================== LM PAGE TITLE

Base de données

ou

Base de données

===================================================================== */ .lm-page-title { width:100% !important; min-height:58px !important; margin:0 0 14px 0 !important; padding:10px 16px !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:9px !important; color:#fff !important; background: linear-gradient( 90deg, transparent, color-mix(in srgb,#0878D1 12%,transparent) 26%, color-mix(in srgb,#0D1B2D 88%,transparent) 50%, color-mix(in srgb,#00D9FF 9%,transparent) 74%, transparent ) !important; border:0 !important; border-bottom:1px solid color-mix(in srgb,#00D9FF 32%,transparent) !important; border-radius:0 !important; box-shadow:0 8px 20px rgba(0,0,0,.15) !important; } .lm-page-title h1, .lm-page-title h2, .lm-page-title h3, h1.lm-page-title, h2.lm-page-title, h3.lm-page-title { margin:0 !important; padding:0 !important; color:#fff !important; font-size:1.55rem !important; font-weight:900 !important; line-height:1.1 !important; letter-spacing:.015em !important; text-align:center !important; text-shadow: 0 2px 5px rgba(0,0,0,.62), 0 0 16px color-mix(in srgb,#0878D1 22%,transparent) !important; } .lm-page-title img { width:42px !important; height:42px !important; max-width:42px !important; max-height:42px !important; object-fit:contain !important; filter:drop-shadow(0 3px 6px rgba(0,0,0,.38)) !important; } @media(max-width:767.98px) { .lm-page-title { min-height:60px !important; margin-bottom:10px !important; padding:10px !important; gap:7px !important; } .lm-page-title h1, .lm-page-title h2, .lm-page-title h3, h1.lm-page-title, h2.lm-page-title, h3.lm-page-title { font-size:1.45rem !important; line-height:1.08 !important; } .lm-page-title img { width:38px !important; height:38px !important; max-width:38px !important; max-height:38px !important; } } @media(max-width:390px) { .lm-page-title h1, .lm-page-title h2, .lm-page-title h3, h1.lm-page-title, h2.lm-page-title, h3.lm-page-title { font-size:1.32rem !important; } } /* ===================================================================== LM FINAL BODY WALLPAPER - couvre toujours toute la largeur - couvre toujours toute la hauteur visible - reste visible sur les pages longues - ne modifie pas les z-index navbar / modal / offcanvas / onglets ===================================================================== */ html { min-width:100% !important; min-height:100% !important; } body { position:relative !important; z-index:0 !important; width:100% !important; min-width:100% !important; min-height:100vh !important; margin:0 !important; background:transparent !important; background-color:transparent !important; background-image:none !important; } /* Wallpaper indépendant de la hauteur du contenu */ body::before { content:"" !important; position:fixed !important; inset:0 !important; width:100vw !important; height:100vh !important; min-width:100vw !important; min-height:100vh !important; z-index:-1 !important; pointer-events:none !important; background-image: linear-gradient( 180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.18) 48%, rgba(0,0,0,.30) 100% ), url("/img/theme-body-2/body-default.webp") !important; background-repeat:no-repeat,no-repeat !important; background-position:center center,center center !important; background-size:100% 100%,cover !important; } /* Les wrappers principaux restent transparents */ body > main, main, .bg-index { background-color:transparent !important; } @media(max-width:767.98px) { body::before { height:100dvh !important; min-height:100dvh !important; background-size:100% 100%,cover !important; background-position:center center,center center !important; } } @supports not (height:100dvh) { @media(max-width:767.98px) { body::before { height:100vh !important; min-height:100vh !important; } } } /* ===================================================================== LM - CARTE JOUEUR : CONTRAT / SALAIRE / VALEUR Correctif indépendant de Bootstrap pour éviter les héritages .table. ===================================================================== */ .player-fut-extra { width:100% !important; padding:8px 10px 10px !important; box-sizing:border-box !important; background: color-mix( in srgb, var(--theme-surface, var(--lm-surface, #07111f)) 88%, transparent ) !important; border-top: 1px solid color-mix( in srgb, var(--theme-primary, var(--lm-primary, #0878d1)) 18%, rgba(255,255,255,.10) ) !important; } /* Nouveau tableau autonome */ .player-loan-table { width:100% !important; margin:0 !important; padding:0 !important; table-layout:fixed !important; border-collapse:collapse !important; color:#fff !important; background:transparent !important; } /* Empêche les règles génériques des thèmes de recolorer les cellules */ .player-loan-table > thead, .player-loan-table > tbody, .player-loan-table > thead > tr, .player-loan-table > tbody > tr, .player-loan-table > thead > tr > th, .player-loan-table > tbody > tr > td { background:transparent !important; background-color:transparent !important; box-shadow:none !important; } /* Titres des colonnes */ .player-loan-table th { padding:0 4px 6px !important; border:0 !important; color: color-mix( in srgb, var(--theme-text, var(--lm-text, #fff)) 72%, transparent ) !important; font-size:10px !important; font-weight:700 !important; line-height:1.1 !important; text-align:center !important; text-transform:uppercase !important; vertical-align:middle !important; white-space:nowrap !important; } /* Valeurs */ .player-loan-table td { padding:2px 4px !important; border:0 !important; color:#fff !important; font-size:12px !important; font-weight:800 !important; line-height:1.2 !important; text-align:center !important; vertical-align:middle !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } /* Répartition fixe des 3 colonnes */ .player-loan-table th:nth-child(1), .player-loan-table td:nth-child(1) { width:30% !important; } .player-loan-table th:nth-child(2), .player-loan-table td:nth-child(2) { width:30% !important; } .player-loan-table th:nth-child(3), .player-loan-table td:nth-child(3) { width:40% !important; } /* Badge PRÊT */ .loan-player-badge { display:inline-flex !important; align-items:center !important; justify-content:center !important; min-width:45px !important; height:23px !important; padding:0 8px !important; border-radius:6px !important; background: color-mix( in srgb, var(--theme-primary, var(--lm-primary, #0878d1)) 22%, transparent ) !important; border: 1px solid color-mix( in srgb, var(--theme-primary, var(--lm-primary, #0878d1)) 72%, #fff 28% ) !important; color:#fff !important; font-size:10px !important; font-weight:900 !important; line-height:1 !important; letter-spacing:.03em !important; } /* Salaire / valeur */ .loan-player-value { color:#fff !important; font-weight:800 !important; } /* Logo GP */ .loan-player-gp { display:inline-block !important; width:15px !important; height:15px !important; max-width:15px !important; max-height:15px !important; margin-left:3px !important; object-fit:contain !important; vertical-align:-3px !important; } /* Mobile */ @media(max-width:576px) { .player-fut-extra { padding:7px 6px 9px !important; } .player-loan-table th { font-size:9px !important; } .player-loan-table td { font-size:11px !important; padding-left:2px !important; padding-right:2px !important; } .loan-player-badge { min-width:42px !important; height:21px !important; padding:0 6px !important; font-size:9px !important; } .loan-player-gp { width:14px !important; height:14px !important; max-width:14px !important; max-height:14px !important; } .player-fut-extra > table.table { font-size:11px !important; } .player-fut-extra > table.table > tbody > tr > td, .player-fut-extra > table.table > thead > tr > th { padding:2px !important; font-size:11px !important; } } /* ===================================================================== LM - FALLBACK ANCIEN TABLEAU DE PRÊT UNIQUEMENT IMPORTANT : Ne touche PAS aux autres tableaux .player-fut-extra. Le sélecteur :has(.loan-player-badge) cible uniquement le bloc prêt. ===================================================================== */ .player-fut-extra > table.table:has(.loan-player-badge) { width:100% !important; table-layout:fixed !important; margin:0 !important; color:#fff !important; background:transparent !important; font-size:12px !important; } .player-fut-extra > table.table:has(.loan-player-badge) > tbody > tr > td, .player-fut-extra > table.table:has(.loan-player-badge) > thead > tr > th { background:transparent !important; background-color:transparent !important; color:#fff !important; border:0 !important; box-shadow:none !important; padding:3px 4px !important; white-space:nowrap !important; text-align:center !important; vertical-align:middle !important; } .player-fut-extra > table.table:has(.loan-player-badge) td:nth-child(1), .player-fut-extra > table.table:has(.loan-player-badge) th:nth-child(1) { width:30% !important; } .player-fut-extra > table.table:has(.loan-player-badge) td:nth-child(2), .player-fut-extra > table.table:has(.loan-player-badge) th:nth-child(2) { width:30% !important; } .player-fut-extra > table.table:has(.loan-player-badge) td:nth-child(3), .player-fut-extra > table.table:has(.loan-player-badge) th:nth-child(3) { width:40% !important; } /* Le grand tableau de gestion joueur conserve son comportement d'origine. */ .player-fut-extra > table.table:not(:has(.loan-player-badge)) { table-layout:auto !important; } .player-fut-extra > table.table:not(:has(.loan-player-badge)) td { width:auto !important; max-width:none !important; overflow:visible !important; text-overflow:clip !important; } /* Respecte les align="right" / align="center" existants du HTML */ .player-fut-extra > table.table:not(:has(.loan-player-badge)) td[align="right"] { text-align:right !important; } .player-fut-extra > table.table:not(:has(.loan-player-badge)) td[align="center"] { text-align:center !important; } @media(max-width:576px) { .player-fut-extra > table.table:has(.loan-player-badge) { font-size:11px !important; } .player-fut-extra > table.table:has(.loan-player-badge) > tbody > tr > td, .player-fut-extra > table.table:has(.loan-player-badge) > thead > tr > th { padding:2px !important; font-size:11px !important; } } /* ===================================================================== LM - EFFECTIF COMPACT Réduit l'espace vertical entre les cartes de la page Effectif. Limité à .effectif-compact-item pour ne pas modifier les autres pages. ===================================================================== */ .effectif-compact-item { height:auto !important; min-height:0 !important; margin:0 !important; padding:0 !important; } .effectif-compact-item > .player-fut-col { height:auto !important; min-height:0 !important; margin-bottom:16px !important; padding-top:0 !important; padding-bottom:0 !important; } .effectif-compact-item .player-fut-wrapper, .effectif-compact-item .flip-card-3D-wrapper { height:300px !important; min-height:300px !important; max-height:300px !important; margin-top:0 !important; margin-bottom:0 !important; } .effectif-compact-item .player-fut-card, .effectif-compact-item .flip-card { height:100% !important; min-height:0 !important; max-height:100% !important; margin-bottom:0 !important; } .effectif-compact-item .flip-card-front, .effectif-compact-item .flip-card-back, .effectif-compact-item .player-fut-front, .effectif-compact-item .player-fut-back { height:100% !important; min-height:0 !important; } /* Si le conteneur utilise flex/grid, pas de hauteur étirée */ .effectif-compact-item { align-self:start !important; } @media (max-width:767.98px) { .effectif-compact-item > .player-fut-col { margin-bottom:12px !important; } .effectif-compact-item .player-fut-wrapper, .effectif-compact-item .flip-card-3D-wrapper { height:300px !important; min-height:300px !important; max-height:300px !important; } } /* ===================================================================== LM V8.9.4 - DETAIL MATCH / OFFCANVAS RESPONSIVE Correctif commun ajouté aux thèmes. - Compatible avec le HTML actuel (aucune classe supplémentaire requise) - Supporte aussi .match-score-table / .match-stats-table si utilisées - Règles volontairement limitées au détail d'un match afin de ne pas modifier les tableaux présents dans les cartes joueurs. ===================================================================== */ /* Identification du tableau SCORE : soit classe explicite, soit tableau direct contenant les logos d'équipe. */ .match-score-table, .offcanvas-body.bg-dark > table.table.table-dark:has(img.imgClassement):not(.table-striped) { --match-primary: var(--theme-primary, var(--bs-primary, #0878d1)); --match-accent: var(--theme-accent, var(--bs-info, #00d9ff)); --match-accent-light: var(--theme-accent-light, var(--bs-info, #78eeff)); --match-text: var(--theme-text, #f8fbff); --match-muted: var(--theme-muted, #9aa8cf); --match-surface: var(--theme-surface, var(--bs-dark, #07111f)); --match-surface-2: var(--theme-surface-2, #0d1b2d); --match-surface-3: var(--theme-surface-3, #132942); width: 100% !important; table-layout: fixed !important; margin: 0 0 8px !important; color: var(--match-text) !important; background: transparent !important; border-collapse: separate !important; border-spacing: 0 !important; } /* Identification du tableau STATS : soit classe explicite, soit tableau striped direct dont la première ligne contient l'homme du match. */ .match-stats-table, .offcanvas-body.bg-dark > table.table.table-dark.table-striped:has( > tbody > tr:first-child > td[colspan="5"] ) { --match-primary: var(--theme-primary, var(--bs-primary, #0878d1)); --match-accent: var(--theme-accent, var(--bs-info, #00d9ff)); --match-accent-light: var(--theme-accent-light, var(--bs-info, #78eeff)); --match-text: var(--theme-text, #f8fbff); --match-muted: var(--theme-muted, #9aa8cf); --match-surface: var(--theme-surface, var(--bs-dark, #07111f)); --match-surface-2: var(--theme-surface-2, #0d1b2d); --match-surface-3: var(--theme-surface-3, #132942); width: 100% !important; table-layout: fixed !important; margin: 0 !important; color: var(--match-text) !important; background: transparent !important; border-collapse: separate !important; border-spacing: 0 3px !important; } /* ===================== SCORE / EQUIPES ===================== */ .match-score-table > tbody > tr > td, .offcanvas-body.bg-dark > table.table.table-dark:has(img.imgClassement):not(.table-striped) > tbody > tr > td { padding: 5px 3px !important; color: var(--match-text) !important; background: transparent !important; border: 0 !important; box-shadow: none !important; text-align: center !important; vertical-align: middle !important; } .match-score-table .imgClassement, .offcanvas-body.bg-dark > table.table.table-dark:has(img.imgClassement):not(.table-striped) .imgClassement { width: 42px !important; height: 42px !important; max-width: 42px !important; max-height: 42px !important; padding: 3px !important; margin: 0 auto !important; object-fit: contain !important; background: color-mix( in srgb, var(--match-surface-2) 90%, #fff 4% ) !important; border: 1px solid color-mix( in srgb, var(--match-accent) 18%, transparent ) !important; border-radius: 50% !important; box-shadow: 0 5px 12px rgba(0,0,0,.28) !important; } .match-score-table h5, .offcanvas-body.bg-dark > table.table.table-dark:has(img.imgClassement):not(.table-striped) h5 { margin: 0 !important; color: #fff !important; font-size: 1.25rem !important; font-weight: 950 !important; line-height: 1 !important; } /* ===================== STATS ===================== */ .match-stats-table > tbody > tr > td, .offcanvas-body.bg-dark > table.table.table-dark.table-striped:has( > tbody > tr:first-child > td[colspan="5"] ) > tbody > tr > td { padding: 6px 5px !important; color: var(--match-text) !important; background: color-mix( in srgb, var(--match-surface-2) 92%, transparent ) !important; border: 0 !important; border-top: 1px solid color-mix( in srgb, var(--match-accent) 7%, transparent ) !important; border-bottom: 1px solid color-mix( in srgb, var(--match-accent) 7%, transparent ) !important; box-shadow: none !important; vertical-align: middle !important; } /* Valeurs gauche / droite des lignes de statistiques. */ .match-stats-table > tbody > tr > td:first-child:not([colspan]), .match-stats-table > tbody > tr > td:last-child:not([colspan]), .offcanvas-body.bg-dark > table.table.table-dark.table-striped:has( > tbody > tr:first-child > td[colspan="5"] ) > tbody > tr > td:first-child:not([colspan]), .offcanvas-body.bg-dark > table.table.table-dark.table-striped:has( > tbody > tr:first-child > td[colspan="5"] ) > tbody > tr > td:last-child:not([colspan]) { width: 27% !important; color: #fff !important; font-weight: 900 !important; font-variant-numeric: tabular-nums !important; } /* Libellé central : Possession, Total passes, etc. */ .match-stats-table > tbody > tr > td[colspan="3"], .offcanvas-body.bg-dark > table.table.table-dark.table-striped:has( > tbody > tr:first-child > td[colspan="5"] ) > tbody > tr > td[colspan="3"] { width: 46% !important; color: color-mix( in srgb, var(--match-text) 84%, var(--match-muted) 16% ) !important; font-size: .72rem !important; font-weight: 760 !important; text-align: center !important; } /* Homme du match */ .match-stats-table > tbody > tr:first-child > td, .offcanvas-body.bg-dark > table.table.table-dark.table-striped:has( > tbody > tr:first-child > td[colspan="5"] ) > tbody > tr:first-child > td { padding: 8px !important; color: #fff !important; background: linear-gradient( 90deg, color-mix( in srgb, var(--match-primary) 26%, var(--match-surface-2) ), color-mix( in srgb, var(--match-accent) 10%, var(--match-surface) ) ) !important; border: 1px solid color-mix( in srgb, var(--match-accent) 18%, transparent ) !important; border-radius: 7px !important; font-size: .74rem !important; font-weight: 950 !important; text-align: center !important; } /* Barre de possession : le tableau imbriqué reste compact. */ .match-stats-table > tbody > tr:nth-child(2) > td, .offcanvas-body.bg-dark > table.table.table-dark.table-striped:has( > tbody > tr:first-child > td[colspan="5"] ) > tbody > tr:nth-child(2) > td { padding: 2px !important; background: transparent !important; border: 0 !important; } .match-stats-table > tbody > tr:nth-child(2) table, .offcanvas-body.bg-dark > table.table.table-dark.table-striped:has( > tbody > tr:first-child > td[colspan="5"] ) > tbody > tr:nth-child(2) table { width: 100% !important; height: 7px !important; min-height: 7px !important; max-height: 7px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: var(--match-surface-3) !important; border-collapse: collapse !important; border-radius: 999px !important; } .match-stats-table > tbody > tr:nth-child(2) table td, .offcanvas-body.bg-dark > table.table.table-dark.table-striped:has( > tbody > tr:first-child > td[colspan="5"] ) > tbody > tr:nth-child(2) table td { height: 7px !important; min-height: 7px !important; padding: 0 !important; border: 0 !important; } /* Pourcentages secondaires. */ .match-stats-table b, .offcanvas-body.bg-dark > table.table.table-dark.table-striped:has( > tbody > tr:first-child > td[colspan="5"] ) b { color: var(--match-accent-light) !important; font-size: .68rem !important; } /* ===================== COMMENTAIRES / LIENS ===================== */ .match-stats-table > tbody > tr > td[colspan="5"][align="left"], .offcanvas-body.bg-dark > table.table.table-dark.table-striped:has( > tbody > tr:first-child > td[colspan="5"] ) > tbody > tr > td[colspan="5"][align="left"] { width: 100% !important; padding: 7px 8px !important; color: var(--match-text) !important; white-space: normal !important; overflow-wrap: anywhere !important; font-size: .69rem !important; line-height: 1.35 !important; text-align: left !important; } /* ===================== MOBILE ===================== */ @media (max-width: 575.98px) { /* Uniquement les offcanvas de match identifiés par les tableaux ci-dessus. */ .offcanvas-body.bg-dark:has( > table.table.table-dark:has(img.imgClassement) ) { padding: 7px !important; } .match-score-table, .offcanvas-body.bg-dark > table.table.table-dark:has(img.imgClassement):not(.table-striped) { margin-bottom: 4px !important; } .match-score-table > tbody > tr > td, .offcanvas-body.bg-dark > table.table.table-dark:has(img.imgClassement):not(.table-striped) > tbody > tr > td { padding: 4px 2px !important; } .match-score-table .imgClassement, .offcanvas-body.bg-dark > table.table.table-dark:has(img.imgClassement):not(.table-striped) .imgClassement { width: 36px !important; height: 36px !important; max-width: 36px !important; max-height: 36px !important; } .match-score-table h5, .offcanvas-body.bg-dark > table.table.table-dark:has(img.imgClassement):not(.table-striped) h5 { font-size: 1.12rem !important; } .match-stats-table, .offcanvas-body.bg-dark > table.table.table-dark.table-striped:has( > tbody > tr:first-child > td[colspan="5"] ) { border-spacing: 0 2px !important; font-size: .69rem !important; } .match-stats-table > tbody > tr > td, .offcanvas-body.bg-dark > table.table.table-dark.table-striped:has( > tbody > tr:first-child > td[colspan="5"] ) > tbody > tr > td { padding: 5px 3px !important; } .match-stats-table > tbody > tr > td:first-child:not([colspan]), .match-stats-table > tbody > tr > td:last-child:not([colspan]), .offcanvas-body.bg-dark > table.table.table-dark.table-striped:has( > tbody > tr:first-child > td[colspan="5"] ) > tbody > tr > td:first-child:not([colspan]), .offcanvas-body.bg-dark > table.table.table-dark.table-striped:has( > tbody > tr:first-child > td[colspan="5"] ) > tbody > tr > td:last-child:not([colspan]) { width: 25% !important; font-size: .73rem !important; } .match-stats-table > tbody > tr > td[colspan="3"], .offcanvas-body.bg-dark > table.table.table-dark.table-striped:has( > tbody > tr:first-child > td[colspan="5"] ) > tbody > tr > td[colspan="3"] { width: 50% !important; font-size: .63rem !important; line-height: 1.15 !important; } .match-stats-table > tbody > tr:first-child > td, .offcanvas-body.bg-dark > table.table.table-dark.table-striped:has( > tbody > tr:first-child > td[colspan="5"] ) > tbody > tr:first-child > td { padding: 6px !important; font-size: .68rem !important; } .match-stats-table b, .offcanvas-body.bg-dark > table.table.table-dark.table-striped:has( > tbody > tr:first-child > td[colspan="5"] ) b { display: inline-block !important; margin-top: 1px !important; font-size: .60rem !important; line-height: 1.05 !important; } .match-stats-table > tbody > tr > td[colspan="5"][align="left"], .offcanvas-body.bg-dark > table.table.table-dark.table-striped:has( > tbody > tr:first-child > td[colspan="5"] ) > tbody > tr > td[colspan="5"][align="left"] { padding: 6px 7px !important; font-size: .64rem !important; } } /* ========================================================================== */ /* LM - MENU MOBILE COMPACT INSPIRE DE LA CAPTURE */ :root { --lm-ui-font: Arial, Helvetica, sans-serif; --lm-dropdown-trigger-bg: var(--theme-surface, var(--bs-dark, #050a24)); --lm-dropdown-trigger-text: var(--theme-accent-light, #00d9ff); --lm-dropdown-panel-bg: var(--theme-accent-light, var(--theme-accent, #00d9ff)); --lm-dropdown-panel-text: #020711; --lm-dropdown-border: var(--theme-border, rgba(255, 255, 255, .55)); } html, html body { font-family: var(--lm-ui-font) !important; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html body h1, html body h2, html body h3, html body h4, html body h5, html body h6, html body p, html body a, html body button, html body input, html body select, html body textarea, html body label, html body table, html body .btn, html body .nav-link, html body .dropdown-item, html body .card, html body .modal, html body .offcanvas, html body .accordion { font-family: var(--lm-ui-font) !important; } /* Bouton principal du menu, sombre comme dans la capture. */ html body .navbar .nav-item.dropdown, html body header .nav-item.dropdown, html body .navbar-collapse .nav-item.dropdown, html body .offcanvas .nav-item.dropdown { background: var(--lm-dropdown-trigger-bg) !important; border: 1px solid var(--lm-dropdown-border) !important; border-radius: .35rem !important; } html body .navbar .nav-item.dropdown > .nav-link, html body header .nav-item.dropdown > .nav-link, html body .navbar-collapse .nav-item.dropdown > .nav-link, html body .offcanvas .nav-item.dropdown > .nav-link { color: var(--lm-dropdown-trigger-text) !important; background: transparent !important; border: 0 !important; border-radius: inherit !important; } /* Grand panneau colore : cyan dans le theme par defaut, autre teinte ailleurs. */ html body .navbar .nav-item.dropdown > .dropdown-menu, html body header .nav-item.dropdown > .dropdown-menu, html body .navbar-collapse .nav-item.dropdown > .dropdown-menu, html body .offcanvas .nav-item.dropdown > .dropdown-menu, html body .nav-item.dropdown > .dropdown-menu.show { color: var(--lm-dropdown-panel-text) !important; background: var(--lm-dropdown-panel-bg) !important; border: 1px solid var(--lm-dropdown-border) !important; border-radius: 0 0 .35rem .35rem !important; box-shadow: 0 .55rem 1.2rem rgba(0, 0, 0, .28) !important; overflow: hidden; } html body .nav-item.dropdown > .dropdown-menu, html body .nav-item.dropdown > .dropdown-menu > *, html body .nav-item.dropdown > .dropdown-menu li, html body .nav-item.dropdown > .dropdown-menu div, html body .nav-item.dropdown > .dropdown-menu ul { color: var(--lm-dropdown-panel-text) !important; background-color: transparent !important; } html body .nav-item.dropdown > .dropdown-menu .dropdown-item, html body .nav-item.dropdown > .dropdown-menu a { color: var(--lm-dropdown-panel-text) !important; background: transparent !important; border: 0 !important; box-shadow: none !important; text-shadow: none !important; } html body .nav-item.dropdown > .dropdown-menu .dropdown-divider, html body .nav-item.dropdown > .dropdown-menu hr { border-color: rgba(2, 7, 17, .16) !important; opacity: 1 !important; } html body .nav-item.dropdown > .dropdown-menu .dropdown-item:hover, html body .nav-item.dropdown > .dropdown-menu .dropdown-item:focus, html body .nav-item.dropdown > .dropdown-menu .dropdown-item.active, html body .nav-item.dropdown > .dropdown-menu .dropdown-item:active, html body .nav-item.dropdown > .dropdown-menu a:hover, html body .nav-item.dropdown > .dropdown-menu a:focus { color: var(--lm-dropdown-panel-text) !important; background: rgba(255, 255, 255, .25) !important; } @media (max-width: 767.98px) { html body { font-size: 14px !important; line-height: 1.4 !important; letter-spacing: 0 !important; } /* Les champs restent a 16 px pour eviter le zoom automatique sur iPhone. */ html body input:not([type="checkbox"]):not([type="radio"]), html body select, html body textarea, html body .form-control, html body .form-select { font-size: 16px !important; } html body .navbar .nav-item.dropdown, html body header .nav-item.dropdown, html body .navbar-collapse .nav-item.dropdown, html body .offcanvas .nav-item.dropdown { width: 100%; margin: .15rem 0 !important; } html body .navbar .nav-item.dropdown > .nav-link, html body header .nav-item.dropdown > .nav-link, html body .navbar-collapse .nav-item.dropdown > .nav-link, html body .offcanvas .nav-item.dropdown > .nav-link { min-height: 40px; display: flex !important; align-items: center; padding: .55rem .75rem !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1.2 !important; } html body .navbar .nav-item.dropdown > .dropdown-menu, html body header .nav-item.dropdown > .dropdown-menu, html body .navbar-collapse .nav-item.dropdown > .dropdown-menu, html body .offcanvas .nav-item.dropdown > .dropdown-menu, html body .nav-item.dropdown > .dropdown-menu.show { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: .25rem .45rem !important; font-size: 12px !important; line-height: 1.2 !important; } html body .nav-item.dropdown > .dropdown-menu .dropdown-item, html body .nav-item.dropdown > .dropdown-menu a { min-height: 25px; display: flex !important; align-items: center; padding: .2rem .35rem !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.2 !important; white-space: normal !important; overflow-wrap: anywhere; } html body .nav-item.dropdown > .dropdown-menu i, html body .nav-item.dropdown > .dropdown-menu svg, html body .nav-item.dropdown > .dropdown-menu img { flex: 0 0 auto; } } @media (max-width: 380px) { html body .navbar .nav-item.dropdown > .nav-link, html body header .nav-item.dropdown > .nav-link, html body .navbar-collapse .nav-item.dropdown > .nav-link, html body .offcanvas .nav-item.dropdown > .nav-link, html body .nav-item.dropdown > .dropdown-menu, html body .nav-item.dropdown > .dropdown-menu .dropdown-item, html body .nav-item.dropdown > .dropdown-menu a { font-size: 11.5px !important; } } /* LM - CORRECTION ALIGNEMENT GAUCHE DES MENUS MOBILES */ @media (max-width: 767.98px) { html body .navbar-collapse .navbar-nav, html body .offcanvas .navbar-nav { align-items: stretch !important; text-align: left !important; } html body .navbar .nav-item.dropdown, html body header .nav-item.dropdown, html body .navbar-collapse .nav-item.dropdown, html body .offcanvas .nav-item.dropdown, html body .nav-item.dropdown > .dropdown-menu, html body .nav-item.dropdown > .dropdown-menu > *, html body .nav-item.dropdown > .dropdown-menu > .row, html body .nav-item.dropdown > .dropdown-menu > .row > * { text-align: left !important; } html body .navbar .nav-item.dropdown > .nav-link, html body header .nav-item.dropdown > .nav-link, html body .navbar-collapse .nav-item.dropdown > .nav-link, html body .offcanvas .nav-item.dropdown > .nav-link, html body .nav-item.dropdown > .dropdown-menu .dropdown-item, html body .nav-item.dropdown > .dropdown-menu a { justify-content: flex-start !important; text-align: left !important; } html body .nav-item.dropdown > .dropdown-toggle::after { margin-left: .3rem !important; margin-right: 0 !important; } } /* LM - ALIGNEMENT GAUCHE UNIVERSEL DES DROPDOWNS MOBILES */ @media (max-width: 767.98px) { html body .dropdown-menu, html body .dropdown-menu.show, html body .nav-tabs .dropdown-menu, html body .nav-pills .dropdown-menu, html body .home-tabs .dropdown-menu, html body .competition-tabs .dropdown-menu, html body .dropdown-menu > li, html body .dropdown-menu > div { text-align: left !important; } html body .dropdown-menu .dropdown-item, html body .dropdown-menu.show .dropdown-item, html body .dropdown-menu.show > a, html body .dropdown-menu.show > button, html body .dropdown-menu.show > li > a, html body .dropdown-menu.show > li > button, html body .nav-tabs .dropdown-menu .dropdown-item, html body .nav-pills .dropdown-menu .dropdown-item, html body .home-tabs .dropdown-menu .dropdown-item, html body .competition-tabs .dropdown-menu .dropdown-item { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; float: none !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; text-align: left !important; } html body .dropdown-menu.show .dropdown-item > span, html body .dropdown-menu.show .dropdown-item > div, html body .dropdown-menu.show > li, html body .dropdown-menu.show > li > a, html body .dropdown-menu.show > li > button { text-align: left !important; justify-content: flex-start !important; } } /* LM PATCH MOBILE V4 - ALIGNEMENT GAUCHE ABSOLU */ @media (max-width: 767.98px) { html body .dropdown-menu.show, html body .dropdown-menu.show *, html body .dropdown-menu.show [role="menuitem"], html body .nav-tabs .dropdown-menu, html body .nav-tabs .dropdown-menu *, html body .nav-pills .dropdown-menu, html body .nav-pills .dropdown-menu * { text-align: left !important; justify-content: flex-start !important; } html body .dropdown-menu.show > *, html body .dropdown-menu.show > li, html body .dropdown-menu.show > div, html body .dropdown-menu.show > a, html body .dropdown-menu.show > button { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } html body .dropdown-menu.show ul { padding-left: 0 !important; margin-left: 0 !important; } }