@font-face {
    font-family: Gabarito;
    src: url(../assets/Gabarito-Regular-CkCK96p5.ttf) format("truetype");
    font-style: normal
}

@font-face {
    font-family: Gabarito;
    src: url(../assets/Gabarito-Bold-CPy6uhdH.ttf) format("truetype");
    font-weight: 700;
    font-style: normal
}

@font-face {
    font-family: Momcake;
    src: url(../assets/Momcake-Bold-peef53Eh.otf) format("opentype");
    font-weight: 700;
    font-style: normal
}

@font-face {
    font-family: Momcake;
    src: url(../assets/Momcake-Thin-CHIO_Nlj.otf) format("opentype");
    font-weight: 100;
    font-style: normal
}

@font-face {
    font-family: NovaRound;
    src: url(../assets/NovaRound-Bold-BtuA7LGB.ttf) format("truetype");
    font-weight: 700;
    font-style: normal
}

@font-face {
    font-family: NovaRound;
    src: url(../assets/NovaRound-BoldOblique-D1GZ_KsZ.ttf) format("truetype");
    font-weight: 700;
    font-style: oblique
}

@font-face {
    font-family: NovaRound;
    src: url(../assets/NovaRound-Book-BKBW2C0c.ttf) format("truetype");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: NovaRound;
    src: url(../assets/NovaRound-BookOblique-CilGwayF.ttf) format("truetype");
    font-weight: 400;
    font-style: oblique
}

@font-face {
    font-family: NovaRoundSlim;
    src: url(fonts/NovaRoundsSlim-Bold.ttf) format("truetype");
    font-weight: 700;
    font-style: normal
}

@font-face {
    font-family: NovaRoundSlim;
    src: url(../assets/NovaRoundSlim-BoldOblique-7_8A_UIB.ttf) format("truetype");
    font-weight: 700;
    font-style: oblique
}

@font-face {
    font-family: NovaRoundSlim;
    src: url(fonts/NovaRoundsSlim-Book.ttf) format("truetype");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: NovaRoundSlim;
    src: url(../assets/NovaRoundSlim-BookOblique-D04GJfKh.ttf) format("truetype");
    font-weight: 400;
    font-style: oblique
}

* {
    margin: 0;
    padding: 0;
    font-family: Gabarito, sans-serif
}

body {
    background-color: #2b2525
}

div.contenu {
    width: 88%;
    padding-top: 6.5%;
    padding-left: 12%;
    color: #fff
}

.espace {
    display: flex;
    flex-direction: column;
    gap: 30px
}

h1.title {
    margin-top: 40px;
    font-family: NovaRound, sans-serif;
    font-size: 6em;
    text-transform: uppercase
}

.just-mobile {
    display: none !important
}

@media screen and (max-width: 768px) {
    .logononemobile {
        display: none !important
    }

    h1.title {
        font-size: 3em;
        overflow-wrap: break-word;
        word-break: break-word;
        line-height: 1.2;
        max-width: 100%
    }

    div.contenu {
        padding-top: 20% !important
    }

    .just-desktop {
        display: none !important
    }
}

.box {
    margin: 50px;
    display: flex;
    background: #000;
    padding: 30px;
    border-radius: 20px
}

.box:hover {
    transition: .7s;
    transform: scale(1.01)
}

.lesgoats {
    width: 40em;
    margin-left: -30px;
    margin-top: -80px;
    margin-bottom: -34px
}

.gauche {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end
}

h1.title-box {
    font-size: 60px;
    text-transform: uppercase
}

a.button {
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    margin: 50px;
    border-radius: 80px;
    color: #fff;
    padding: 20px;
    background: #ff2672
}

a.button:hover {
    background: #464040;
    transition: .3s
}

.klopp {
    width: 20em;
    margin-left: -30px;
    margin-top: -80px;
    margin-bottom: -34px
}

@media screen and (max-width: 768px) {
    a.nav {
        font-size: 0 !important;
        margin-left: 0 !important
    }

    .lesgoats {
        width: 145%;
        margin-left: -40px;
        margin-top: -80px;
        margin-bottom: -34px
    }

    .klopp {
        width: 120%;
        margin-left: 7%;
        margin-top: -80px;
        margin-bottom: -34px
    }

    .box {
        margin: 30px;
        display: flex;
        background: #000;
        padding: 30px;
        border-radius: 20px;
        flex-direction: column
    }

    a.button {
        margin: 45px 0
    }

    h1.title-box {
        text-align: center;
        font-size: 40px
    }

    .box p {
        text-align: center
    }

    div.box.gestionTeamHome {
        display: none !important
    }
}

.player-carousel {
    margin: 50px;
    position: relative
}

.carousel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px
}

.carousel-header h2 {
    margin: 0;
    font-size: 1.5rem
}

.toggle {
    width: 40px;
    height: 20px;
    background-color: #f05;
    border-radius: 10px;
    cursor: pointer
}

.carousel-container {
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    padding: 20px
}

.carousel-track {
    display: flex;
    transition: transform .5s ease-in-out
}

.carousel-item {
    min-width: 100px;
    margin: 0 10px;
    list-style: none;
    border-radius: 8px;
    overflow: hidden;
    background-color: #00000030;
    box-shadow: 0 4px 8px #0000004d
}

.carousel-item img {
    width: 12em;
    height: auto;
    display: block
}

.carousel-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #f05;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    padding: 5px 10px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10
}

.carousel-button-left {
    left: 10px
}

.carousel-button-right {
    right: 10px
}

.carousel-button:focus {
    outline: none
}

.carousel-button:hover {
    font-size: 2rem;
    padding: 6px 13px;
    transition: .7s
}

li.carousel-item:hover {
    transform: scale(1.05);
    transition: .7s
}

@media screen and (max-width: 768px) {
    .carousel-button {
        display: none !important
    }

    .carousel-item img {
        width: 7em
    }

    .carousel-container {
        padding: 20px 0
    }

    .carousel-header {
        justify-content: center
    }
}

footer {
    position: static;
    display: flex;
    color: #fff;
    background: #231e1e;
    justify-content: flex-end;
    padding: 10px
}

header.high-header {
    box-shadow: 10px 5px 5px #0003;
    position: fixed;
    background: #464040;
    display: flex;
    width: 100%;
    height: 10%;
    justify-content: flex-end;
    align-items: center;
    flex-direction: row;
    z-index: 10
}

img.logoTeam {
    width: 100%;
    height: 100%
}

.containerLogoTeam {
    display: flex;
    width: 3%;
    margin: 20px
}

button.header {
    background: #ff2672;
    padding: 15px 25px;
    color: #fff;
    border-radius: 80px
}

button.header:hover {
    background: #2b2525;
    transition: .3s
}

@media screen and (max-width: 768px) {
    .containerLogoTeam {
        display: flex;
        width: 50px;
        margin: 20px
    }

    button.header {
        font-size: 14px;
        background: #ff2672;
        padding: 10px 20px;
        color: #fff;
        border-radius: 80px
    }
}

#navGauche {
    display: flex;
    flex-direction: column;
    background: #000;
    width: 12%;
    position: fixed;
    height: 100%;
    z-index: 12
}

a.nav {
    margin-left: 20px !important;
    display: flex;
    text-align: end;
    padding: 10px;
    color: #fff;
    text-decoration: none;
    justify-content: flex-start;
    align-items: center
}

img.logo {
    place-self: center;
    margin: 10%;
    width: 75%
}

a.nav:hover {
    color: #f05;
    transition: .3s;
    border-right: solid
}

img.logo-navgauche {
    width: 30px;
    margin-right: 10px
}

.cail:hover {
    color: #96d817 !important
}

.wac:hover {
    color: #d65a49 !important
}

.po:hover {
    color: #3238c0 !important
}

a.nav:hover img.logo-navgauche.home,
a.nav.active img.logo-navgauche.home {
    content: url(../assets/home-pink-C9lkdQ16.png);
    transition: .3s
}

a.nav:hover img.logo-navgauche.teams,
a.nav.active img.logo-navgauche.teams {
    content: url(../assets/teams-pink-BkVConOn.png);
    transition: .3s
}

a.nav:hover img.logo-navgauche.players,
a.nav.active img.logo-navgauche.players {
    content: url(../assets/players-pink-B215VJae.png);
    transition: .3s
}

a.nav:hover img.logo-navgauche.squad-builder,
a.nav.active img.logo-navgauche.squad-builder {
    content: url(../assets/squad-builder-pink-BrtJHQVJ.png);
    transition: .3s
}

a.nav:hover img.logo-navgauche.championnat,
a.nav.active img.logo-navgauche.championnat {
    content: url(../assets/championnat-pink-_r17Gzqi.png);
    transition: 1s;
    transform: rotate(360deg)
}

a.nav:hover img.logo-navgauche.cail,
a.nav.active img.logo-navgauche.cail {
    content: url(../assets/cail-green-CD32crfA.png);
    transition: .3s
}

a.nav:hover img.logo-navgauche.restricted-g,
a.nav.active img.logo-navgauche.restricted-g {
    content: url(../assets/rg-pink.png);
    transition: .3s
}

a.nav:hover img.logo-navgauche.wac,
a.nav.active img.logo-navgauche.wac {
    content: url(../assets/wac-brown-D0u2vI2j.png);
    transition: 1s;
    transform: rotate(360deg)
}

a.nav:hover img.logo-navgauche.po,
a.nav.active img.logo-navgauche.po {
    content: url(../assets/po-blue-cK8byLT8.png);
    transition: .3s
}

a.nav:hover img.logo-navgauche.discord,
a.nav.active img.logo-navgauche.discord {
    content: url(../assets/discord-pink-_LpUGbMs.png);
    transition: .3s
}

a.nav:hover img.logo-navgauche.retour,
a.nav.active img.logo-navgauche.retour {
    content: url(../assets/retour-pink.png);
    transition: .3s
}

a.nav.active {
    color: #f05;
    border-right: solid;
    background: #121212
}

a.nav.cail.active {
    color: #96d817;
    border-right: solid;
    background: #121212
}

a.nav.wac.active {
    color: #d65a49;
    border-right: solid;
    background: #121212
}

a.nav.po.active {
    color: #3238c0;
    border-right: solid;
    background: #121212
}

@media screen and (max-width: 768px) {
    a.nav {
        font-size: 0 !important;
        margin-left: -2px !important
    }

    #navGauche {
        width: 13%
    }

    a.squad-builder-nav.nav {
        display: none !important
    }
}

.login-container {
    background-color: #00000030;
    color: #fff;
    max-width: 400px;
    margin: 50px auto;
    padding: 65px;
    border-radius: 8px;
    box-shadow: 0 4px 8px #0000004d;
    text-align: center
}

.login-container h1 {
    margin-bottom: 20px
}

.login-container form {
    display: flex;
    flex-direction: column
}

.login-container form div {
    margin-bottom: 15px
}

.login-container label {
    display: block;
    margin-bottom: 5px
}

.login-container input {
    width: 100%;
    padding: 8px 0;
    border: 1px solid #ddd;
    border-radius: 4px
}

.login-container .error {
    color: red;
    margin-bottom: 15px
}

.login-container button {
    margin-top: 20px;
    padding: 10px 15px;
    background-color: #ff2672;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer
}

.login-container button:hover {
    background: #464040
}

img.logo-login {
    margin: 1% 0% -2% 42.5%;
    width: 15%
}

.registerbutton {
    margin-top: 20px;
    padding: 10px 15px;
    background-color: #ff2672;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    font-size: 13px
}

.registerbutton:hover {
    background: #464040
}

div.cardContainer {
    width: 14.5em
}

div.cardContainer img {
    width: 100%;
    height: 100%
}

div.cardContainer:hover {
    transform: scale(1.05);
    transition: .7s
}

div.justZoom img {
    width: 100%;
    height: 100%
}

div.justZoom:hover {
    transform: scale(1.05);
    transition: .7s
}

.Robbed {
    filter: saturate(.3)
}

.team-info-card {
    display: flex;
    gap: 10px;
    position: absolute;
    z-index: 0;
    width: 45px;
    margin-top: -70px;
    margin-left: 175px
}

@media screen and (max-width: 768px) {
    .team-info-card {
        width: 20px;
        margin-top: -35px;
        z-index: 0;
        margin-left: 80px
    }
}

.search-container {
    display: flex;
    justify-content: center;
    margin-bottom: 20px
}

.search-bar {
    z-index: 8000;
    bottom: 1em;
    position: fixed;
    padding: 17px;
    width: 50em;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px
}

.cards {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    margin-bottom: 2%
}

.filter-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: -20px
}

.filter-container select.filter-dropdown {
    background: #ff2672;
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 10px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    width: 10%
}

@media screen and (max-width: 768px) {
    .search-bar {
        width: 60%
    }

    .random-container.center {
        position: fixed !important;
        left: 8em !important;
        right: 5em !important;
        bottom: 4em !important
    }

    div.cardContainer {
        width: 6.5em
    }

    .cards {
        display: flex;
        flex-wrap: wrap;
        gap: 0;
        justify-content: center;
        margin-bottom: 30%
    }

    .filter-container select.filter-dropdown {
        width: 35%
    }
}

.player-info {
    margin: 0 3em
}

.info-stat {
    margin: 2em 0;
    padding-top: 1em;
    border-top: solid 1px
}

.cinquantecinquante {
    display: flex;
    flex-direction: row
}

.cardPlayer {
    width: 75%
}

.player-name {
    width: 150%
}

h1.player-name {
    font-size: 4.25em;
    text-transform: uppercase;
    font-family: NovaRound, sans-serif;
    color: #ff2672
}

h3.rose {
    color: #ff2672;
    font-size: 2.25em
}

p.paragraphe {
    margin: 2em 0;
    text-align: justify
}

.player-posteclub {
    gap: 5px;
    margin: 15px 0;
    display: flex;
    align-items: center
}

h3 a {
    font-family: NovaRound, sans-serif
}

.Z {
    color: #00ffde;
    font-weight: 700
}

.D {
    color: #ff4e25;
    font-weight: 700
}

.C {
    color: #ffaa25;
    font-weight: 700
}

.B {
    color: #d8ff00;
    font-weight: 700
}

.A {
    color: #89e427;
    font-weight: 700
}

.S {
    color: #ffdd81;
    font-weight: 700
}

.circle-deco {
    width: 70px
}

.circle-deco img {
    width: 100%
}

img.player-face {
    position: fixed;
    top: 0;
    left: 5em;
    width: 45.5%;
    object-fit: cover;
    z-index: -1;
    opacity: 15%
}

.infoRPTC {
    display: flex;
    gap: 2em
}

button.pick-button {
    position: absolute;
    top: 85%;
    right: 32%;
    background: #ff2672;
    padding: 15px 25px;
    color: #fff;
    border-radius: 80px;
    border: none;
    cursor: pointer
}

button.pick-button:hover {
    background: #464040;
    transition: .3s
}

button.pick-button:disabled {
    background: #464040
}

button.pick-button:disabled:hover {
    transition: 0s;
    cursor: not-allowed
}

.paragraphe a {
    text-decoration: none;
    color: #ff2672;
    font-weight: 700;
    font-family: NovaRound, sans-serif
}

.paragraphe a:hover {
    color: #ffdd81;
    transition: .3s
}

.votre-ordre {
    font-size: 90%;
    position: absolute;
    top: 79%;
    right: 32%;
    z-index: 800;
    padding: 10px;
    border-radius: 80px
}

button.pick-button-v2 {
    background: #ff2672;
    padding: 15px 25px;
    color: #fff;
    border-radius: 80px;
    border: none;
    cursor: pointer
}

button.pick-button-v2:hover {
    background: #464040;
    transition: .3s
}

button.pick-button-v2:disabled {
    background: #464040;
    cursor: no-drop
}

.lemessage {
    font-style: italic;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2em
}

@media screen and (max-width: 768px) {
    .cinquantecinquante {
        display: flex;
        flex-direction: column-reverse;
        margin-bottom: 80px
    }

    div.player-name {
        width: 100%;
        margin-bottom: 6%
    }

    h1.player-name {
        text-align: center;
        width: 100%;
        font-size: 3.25em;
        overflow-wrap: break-word;
        word-break: break-word;
        line-height: 1.2;
        max-width: 100%
    }

    .player-info {
        margin: 0 1em
    }

    h3.rose {
        color: #ff2672;
        font-size: 1.75em;
        text-align: center
    }

    img.player-face {
        position: fixed;
        top: 20px;
        left: 0;
        width: 220%;
        object-fit: cover;
        z-index: -1;
        opacity: 15%
    }

    .infoRPTC {
        display: flex;
        gap: 2em;
        justify-content: center
    }

    .player-posteclub {
        gap: 5px;
        margin: 15px 0;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .cardPlayer {
        width: 100%
    }

    button.pick-button {
        position: fixed;
        top: auto;
        bottom: 3em;
        right: auto
    }

    .lemessage {
        font-style: normal;
        padding: 5%;
        margin-left: 13%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-bottom: 2em;
        position: fixed;
        bottom: 3px;
        left: 0;
        right: 0;
        text-align: center;
        gap: 10px
    }

    .pick-button-center {
        display: flex;
        justify-content: center
    }

    p.paragraphe {
        margin: 2em 0;
        text-align: justify
    }

    .votre-ordre {
        display: flex;
        justify-content: center;
        position: fixed;
        bottom: 8em;
        left: 30%;
        right: 20%;
        font-size: 12px;
        z-index: 800;
        padding: 10px;
        border-radius: 80px;
        background: #ff2672;
        text-align: center;
        top: auto
    }

    div.lemessage p {
        padding: 10px 50px;
        border-radius: 80px;
        background: #ff2672;
        text-align: center;
        font-size: 12px
    }
}

.container_drag {
    height: 37em;
    position: relative;
    overflow: hidden;
    background-image: url(./football-field.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed
}

.card_drag {
    gap: 4px;
    display: flex;
    width: 100px;
    height: 100px;
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
    text-align: center;
    flex-direction: column;
    align-items: center
}

.card-image_drag {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none
}

.card-name {
    font-size: 12px;
    color: #fff;
    text-transform: uppercase;
    font-weight: 700
}

.player-gallery-top {
    bottom: 0;
    position: fixed;
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    align-items: center;
    max-height: 120px;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 10px;
    padding: 10px;
    background-color: #f9f9f9;
    border: 2px solid #ccc;
    border-radius: 8px
}

.player-gallery-top .card_drag {
    width: 80px;
    height: 80px;
    margin: 5px;
    cursor: pointer;
    transition: transform .2s ease-in-out
}

.player-gallery-top .card_drag:hover {
    transform: scale(1.1)
}

.header {
    background-color: #ff4d4d;
    border: none;
    padding: 10px 20px;
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    border-radius: 5px
}

.delete-button {
    position: absolute;
    top: 0;
    right: 0;
    background-color: transparent;
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    width: 20px;
    height: 20px;
    display: none;
    align-items: center;
    justify-content: center
}

.card_drag:hover .delete-button {
    display: flex
}

.delete-button:hover {
    color: #fff
}

h1.title.center img {
    margin: 0 20px;
    width: 100px
}

.container_drag .card_drag {
    width: 75px;
    height: 75px
}

.container_drag {
    position: relative;
    min-height: 700px;
}

.container_drag .card_drag {
    position: absolute;
}

.delete-player {
    position: absolute;
    top: 5px;
    right: 5px;

    width: 22px;
    height: 22px;

    border-radius: 50%;
    color: white;

    font-size: 14px;
    font-weight: bold;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    z-index: 9999;

    opacity: 0;
    transition: opacity 0.2s ease;
}

/* La croix apparaît uniquement au survol */
.card_drag:hover .delete-player {
    opacity: 1;
}

.player-gallery-top .card_drag .card-name {
    display: none
}

h1.title-squad {
    display: flex;
    gap: 15px;
    font-size: 35px;
    text-transform: uppercase;
    align-items: center;
    margin-bottom: 10px
}

img.squad {
    width: 45px
}

h3.separator-squad {
    background: #fff;
    font-size: 1.5px;
    margin: 0 45%
}

.boxes {
    gap: 30px;
    margin: 2em 5em;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around
}

.boxTeam {
    width: 40%;
    gap: 25px;
    background: #000;
    display: flex;
    border-radius: 20px;
    flex-direction: row;
    padding: 2em;
    text-decoration: none;
    color: #fff;
    box-shadow: 0 2px 5px #0000004d;
    transition: transform .2s ease
}

.boxTeam:hover {
    transform: scale(1.02)
}

.gaucheBoxTeam {
    width: 30%;
    display: flex;
    justify-content: center
}

.droiteBoxTeam {
    width: 70%;
    display: flex;
    flex-direction: column;
    justify-content: center
}

a.containerLogoBoxTeam {
    width: 150px
}

img.logoBoxTeam {
    width: 100%
}

h1.titleBoxTeam {
    color: #f05
}

a.boxTeam.No.Team {
    display: none
}

@media screen and (max-width: 768px) {
    .boxTeam {
        width: 70%;
        align-items: center
    }

    .boxes {
        display: flex;
        gap: 30px;
        flex-direction: column;
        align-items: center;
        margin: 20px 0
    }

    h1.titleBoxTeam {
        text-align: center
    }

    .droiteBoxTeam p {
        display: flex !important;
        flex-direction: column !important;
        text-align: center
    }

    .droiteBoxTeam {
        gap: 15px
    }
}

.my-players {
    gap: 30px;
    display: flex;
    flex-direction: column
}

.center {
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center
}

h3.separator {
    background: #fff;
    font-size: 1.5px;
    margin: 0 40%
}

a.random {
    text-align: center;
    color: #fff;
    text-decoration: none;
    padding: 15px 25px;
    margin-bottom: 20px;
    background: #ff2672;
    border-radius: 80px
}

a.random:hover {
    background: #464040;
    transition: .3s
}

.random-container.center {
    position: fixed;
    right: 1em;
    bottom: 0
}

@media screen and (max-width: 768px) {
    a.random {
        text-align: center;
        color: #fff;
        text-decoration: none;
        margin-bottom: 20px;
        border-radius: 80px;
        font-size: 14px;
        background: #ff2672;
        padding: 10px 20px
    }
}

.logo-en-fond {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: -11.5em
}

img.logo-en-fond-img {
    width: 40em;
    opacity: 5%;
    margin: -15em;
    z-index: -80
}

.players-club,
.matchs-club,
.info-club {
    background-color: #1c1c1c;
    border-radius: 20px;
    box-shadow: 0 4px 10px #00000080;
    width: 30%;
    gap: 30px;
    display: flex;
    flex-direction: column;
    padding: 2em 0
}

.div3 {
    display: flex;
    justify-content: space-around;
    margin: 40px
}

.slider-vertical-container {
    margin-top: -25px;
    position: relative;
    width: 100%;
    height: 40em;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center
}

.slider-vertical {
    margin: 70px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
    height: 100%;
    width: 90%;
    scroll-behavior: smooth;
    scrollbar-width: none
}

.slider-vertical::-webkit-scrollbar {
    display: none
}

.slider-vertical-row {
    display: flex;
    justify-content: space-around;
    gap: 10px
}

.slider-vertical-item {
    flex: 1;
    display: flex;
    justify-content: center;
    max-width: 30%
}

.cardContainer {
    width: 90%;
    overflow: hidden
}

.slider-vertical-button {
    position: absolute;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center
}

.slider-vertical-button.up {
    top: 10px
}

.slider-vertical-button.down {
    bottom: 10px
}

.slider-vertical-button:hover {
    background: #000c
}

.match-card {
    background-color: #2c3e50;
    color: #ecf0f1;
    border-radius: 10px;
    padding: 1em;
    box-shadow: 0 4px 10px #00000080;
    text-align: center;
    font-size: 1rem;
    max-width: 90%
}

@media screen and (max-width: 768px) {
    .div3 {
        flex-direction: column;
        gap: 30px
    }

    .players-club,
    .matchs-club,
    .info-club {
        width: 100%
    }

    .players-club,
    .matchs-club {
        height: 25em
    }

    img.team-logo-info {
        width: 100% !important
    }

    img.logo-en-fond-img {
        width: 20em;
        z-index: -80;
        opacity: 100%;
        margin: 0
    }

    .logo-en-fond {
        display: flex;
        justify-content: center;
        width: 100%;
        margin-bottom: 0
    }

    .om-match-card {
        padding: 20px 0 !important
    }

    .other-information {
        padding: 30px 20px
    }

    .om-match-info {
        display: flex;
        align-items: center;
        justify-content: space-around !important
    }
}

.om-slider-vertical-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-height: 600px;
    overflow: hidden
}

.om-slider-vertical {
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: scroll;
    scroll-behavior: smooth;
    height: 100%;
    width: 100%;
    scrollbar-width: none
}

.om-slider-vertical-row {
    display: flex;
    justify-content: center;
    gap: 10px
}

.om-match-card {
    border-radius: 10px;
    box-shadow: none !important;
    padding: 20px;
    transition: transform 0om-3s ease, box-shadow 0om-3s ease;
    width: 90%;
    margin: auto
}

.om-match-card:hover {
    transform: scale(1om-02)
}

.om-match-info {
    display: flex;
    align-items: center;
    justify-content: space-evenly
}

.om-team {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 0% !important
}

.om-team-away {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-direction: row-reverse;
    width: 0% !important
}

.om-team-logo {
    width: 50px;
    height: 50px;
    object-fit: cover
}

.om-score {
    font-family: NovaRound, sans-serif;
    font-size: 1om-5rem;
    font-weight: 700;
    margin: 30px 0
}

.om-match-details {
    font-size: 0om-9rem;
    margin-bottom: 10px;
    text-align: center
}

.om-slider-vertical-button {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center
}

.om-slider-vertical-button:hover {
    background: #444
}

.other-information {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding: 60px;
    text-align: center
}

img.team-logo-info {
    width: 100%;
    margin-top: -40px
}

strong {
    color: #ff2672
}

.register-container {
    background-color: #00000030;
    color: #fff;
    max-width: 400px;
    margin: 50px auto;
    padding: 65px;
    border-radius: 8px;
    box-shadow: 0 4px 8px #0000004d;
    text-align: center
}

.register-container h1 {
    margin-bottom: 20px
}

.register-container form {
    display: flex;
    flex-direction: column
}

.register-container form div {
    margin-bottom: 15px
}

.register-container label {
    display: block;
    margin-bottom: 5px
}

.register-container input {
    width: 100%;
    padding: 8px 0;
    border: 1px solid #ddd;
    border-radius: 4px
}

.register-container .error {
    color: red;
    margin-bottom: 15px
}

.register-container button {
    margin-top: 20px;
    padding: 10px 15px;
    background-color: #ff2672;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer
}

.register-container button:hover {
    background: #464040
}

img.logo-register {
    margin: 1% 0% -2% 42.5%;
    width: 15%
}

textarea.paragraphe-register {
    width: 100%;
    height: 100px
}

.classement-container {
    padding: 20px;
    background-color: #1c1c1c;
    border-radius: 20px;
    box-shadow: 0 4px 10px #00000080;
    width: 70%
}

h1.classement {
    text-align: center;
    margin-bottom: 20px;
    font-size: 1.8em;
    color: #fff
}

.classement-list {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.classement-card {
    display: flex;
    align-items: center;
    background-color: #333;
    padding: 10px 15px;
    border-radius: 15px;
    box-shadow: 0 2px 5px #0000004d;
    transition: transform .2s ease;
    justify-content: space-between
}

.classement-card:hover {
    transform: scale(1.02)
}

.rank {
    font-family: NovaRound, sans-serif;
    font-size: 1.5em;
    font-weight: 700;
    color: #fff;
    text-shadow: 1px 1px 2px black;
    flex-shrink: 0
}

.team-info {
    margin-left: 30px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-grow: 1
}

.team-logo {
    width: 40px;
    height: 40px;
    border-radius: 5px;
    flex-shrink: 0
}

.team-name {
    font-size: 1.2em;
    font-weight: 700;
    color: #fff;
    text-align: left;
    flex-grow: 1
}

.team-stats {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 1em;
    color: #ccc
}

.team-score {
    font-size: 1.2em;
    font-weight: 700;
    color: #fff;
    font-family: NovaRound, sans-serif
}

.goal-average,
.goals,
.goals-conceded {
    color: #ffffffdb
}

.classement-card.p1 {
    background-color: #ff2672
}

.classement-card.p2,
.p3 {
    background-color: #3238c0
}

.classement-card.p5,
.p4,
.p6,
.p7,
.p8 {
    background-color: #3358bd
}

@media screen and (max-width: 768px) {
    .classement-container {
        width: 75%
    }

    h1.classement {
        font-size: 1.4em
    }

    .team-info {
        margin-left: 10px;
        display: flex;
        flex-direction: column;
        align-items: flex-start
    }

    span.goals,
    span.goals-conceded {
        display: none
    }

    .championnat-dispo {
        display: flex;
        margin: 30px 0;
        flex-direction: column
    }

    .rank {
        font-size: 1em
    }

    .team-logo {
        width: 30px;
        height: 30px
    }

    .team-name {
        font-size: 1em;
        white-space: nowrap;
        max-width: 100px;
        display: inline-block
    }

    .team-score {
        font-size: .8em;
        white-space: nowrap
    }

    .goal-average {
        font-size: .7em;
        white-space: nowrap
    }

    .championnat-dispo {
        display: flex;
        justify-content: space-evenly;
        margin: 30px 0;
        align-items: center
    }

    .place-buttons {
        width: 80% !important;
        padding: 3em 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 3em !important;
        flex-wrap: wrap !important
    }
}

.championnat-dispo {
    display: flex;
    justify-content: space-evenly;
    margin: 30px 0
}

.place-buttons {
    width: 15%;
    padding: 3em 0;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    gap: 3em
}

a.button-plus {
    text-align: center;
    background: #ff2672;
    padding: 45px 20px;
    color: #fff;
    border-radius: 20px;
    text-decoration: none
}

div.journees {
    gap: 15px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-content: center
}

a.button-j {
    display: flex;
    height: 30px;
    width: 30px;
    text-align: center;
    background: #ff2672;
    padding: 15px;
    color: #fff;
    border-radius: 10px;
    text-decoration: none;
    align-items: center;
    justify-content: center
}

a.button-plus:hover,
a.button-j:hover {
    background: #464040;
    transition: .3s
}

.notif-match {
    text-align: center;
    width: 100%
}

.contenumatchs {
    padding: 20px;
    margin: 20px auto
}

.matchs-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(300px, 1fr));
    gap: 20px
}

.match-card {
    background: #1c1c1c;
    border-radius: 10px;
    box-shadow: 0 4px 6px #0000001a;
    padding: 20px;
    transition: transform .3s ease, box-shadow .3s ease
}

.match-card:hover {
    transform: scale(1.02)
}

.match-info {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.team {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 40%
}

.team-away {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-direction: row-reverse;
    width: 40%
}

.team-logo {
    width: 50px;
    height: 50px;
    object-fit: cover
}

.score {
    font-family: NovaRound, sans-serif;
    font-size: 1.5rem;
    font-weight: 700
}

.match-details {
    font-size: .9rem;
    margin-bottom: 10px;
    text-align: center
}

.affScorers {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 2px
}

@media screen and (max-width: 768px) {
    .matchs-list {
        display: grid;
        grid-template-columns: repeat(1, minmax(300px, 1fr));
        justify-content: center
    }

    .team-away p,
    .team p {
        display: none
    }

    .score {
        width: 50%
    }

    .match-info {
        justify-content: space-evenly !important
    }

    .team,
    .team-away {
        width: 10%
    }
}

a.button-plus-cail {
    text-align: center;
    background: #96d817;
    padding: 45px 75px;
    color: #000;
    border-radius: 20px;
    text-decoration: none
}

.button-j-cail {
    display: flex;
    height: 30px;
    width: 30px;
    text-align: center;
    background: #96d817;
    padding: 15px;
    color: #000;
    border-radius: 10px;
    text-decoration: none;
    align-items: center;
    justify-content: center
}

a.button-plus-cail:hover,
a.button-j-cail:hover {
    background: #464040;
    transition: .3s;
    color: #96d817
}

.cail-dispo {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    margin: 1em
}

img.tableau-cail {
    width: 90%;
    margin: 10px;
    border-radius: 20px;
    box-shadow: 0 4px 10px #00000080
}

.place-buttons-cail {
    width: 15%;
    padding: 3em 0;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    gap: 3em;
    width: 75%
}

.place-buttons-cail {
    padding: 3em 0;
    display: flex;
    flex-direction: row;
    gap: 3em
}

img.tableau-cail:hover {
    transform: scale(1.03);
    transition: .3s
}

@media screen and (max-width: 768px) {
    .place-image {
        display: block;
        width: 100%;
        overflow-x: auto
    }

    img.tableau-cail {
        width: 250%;
        margin: 10px auto;
        border-radius: 20px;
        box-shadow: 0 4px 10px #00000080
    }

    .place-buttons-cail {
        padding: 3em 0;
        display: flex;
        gap: 3em;
        flex-direction: column
    }
}

a.button-plus-wac {
    text-align: center;
    background: #d65a49;
    padding: 45px 75px;
    color: #fff;
    border-radius: 20px;
    text-decoration: none
}

.button-j-wac {
    display: flex;
    height: 30px;
    width: 30px;
    text-align: center;
    background: #d65a49;
    padding: 15px;
    color: #fff;
    border-radius: 10px;
    text-decoration: none;
    align-items: center;
    justify-content: center
}

a.button-plus-wac:hover,
a.button-j-wac:hover {
    background: #464040;
    transition: .3s
}

.wac-dispo {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    margin: 1em
}

img.tableau-wac {
    width: 90%;
    margin: 10px;
    border-radius: 20px;
    box-shadow: 0 4px 10px #00000080
}

.place-buttons-wac {
    width: 15%;
    padding: 3em 0;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    gap: 3em;
    width: 75%
}

.place-buttons-wac {
    padding: 3em 0;
    display: flex;
    flex-direction: row;
    gap: 3em
}

img.tableau-wac:hover {
    transform: scale(1.03);
    transition: .3s
}

@media screen and (max-width: 768px) {
    .place-image {
        display: block;
        width: 100%;
        overflow-x: auto
    }

    img.tableau-wac {
        width: 250%;
        margin: 10px auto;
        border-radius: 20px;
        box-shadow: 0 4px 10px #00000080
    }

    .place-buttons-wac {
        padding: 3em 0;
        display: flex;
        gap: 3em;
        flex-direction: column
    }
}

a.button-plus-po {
    text-align: center;
    background: #3238c0;
    padding: 45px 75px;
    color: #fff;
    border-radius: 20px;
    text-decoration: none
}

.button-j-po {
    display: flex;
    height: 30px;
    width: 30px;
    text-align: center;
    background: #3238c0;
    padding: 15px;
    color: #fff;
    border-radius: 10px;
    text-decoration: none;
    align-items: center;
    justify-content: center
}

a.button-plus-po:hover,
a.button-j-po:hover {
    background: #464040;
    transition: .3s
}

.po-dispo {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    margin: 1em
}

img.tableau-po {
    width: 90%;
    margin: 10px;
    border-radius: 20px;
    box-shadow: 0 4px 10px #00000080
}

.place-image {
    display: contents
}

.place-buttons-po {
    width: 15%;
    padding: 3em 0;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    gap: 3em;
    width: 75%
}

.place-buttons-po {
    padding: 3em 0;
    display: flex;
    flex-direction: row;
    gap: 3em
}

img.tableau-po:hover {
    transform: scale(1.03);
    transition: .3s
}

.contenumatchs-po {
    padding: 20px 20px 20px 2.5%;
    margin: 20px auto;
    display: flex;
    gap: 40px;
    flex-direction: column
}

@media screen and (max-width: 768px) {
    .place-image {
        display: block;
        width: 100%;
        overflow-x: auto
    }

    img.tableau-po {
        width: 250%;
        margin: 10px auto;
        border-radius: 20px;
        box-shadow: 0 4px 10px #00000080
    }

    .place-buttons-po {
        padding: 3em 0;
        display: flex;
        gap: 3em;
        flex-direction: column
    }
}

.tournament-select {
    margin-bottom: 20px;
    display: flex;
    justify-content: center
}

.tournament-select label {
    font-weight: 700;
    margin-right: 10px
}

.tournament-select select {
    font-size: 16px;
    background: #ff2672;
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 10px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    width: 12%
}

.ranking {
    display: flex;
    gap: 40px;
    margin: 0 40px
}

.section {
    flex: 1
}

.section h2 {
    margin-bottom: 10px;
    font-size: 24px;
    text-align: center
}

.ranking-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    padding: 10px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 2px 2px 5px #0000001a
}

.ranking-item img.player-image {
    width: 50px;
    height: 50px;
    margin-right: 15px;
    object-fit: cover
}

.ranking-item span {
    font-size: 18px;
    color: #555
}

.ranking-item strong {
    color: #000
}

.ranking-item:hover {
    background: #e9ecef;
    transform: scale(1.02);
    transition: all .2s ease
}

.nomDeFamille {
    text-transform: uppercase
}

.statplus {
    margin-top: 0
}

@media screen and (max-width: 768px) {
    .ranking {
        flex-direction: column
    }

    .tournament-select select {
        width: 45%
    }

    .passeur-border {
        border-top: solid 1px;
        padding-top: 10px
    }

    .section h2 {
        padding: 20px
    }
}

.mon-equipe-box {
    width: 40%;
    gap: 25px;
    background: #000;
    display: flex;
    border-radius: 20px;
    flex-direction: row;
    padding: 2em;
    text-decoration: none;
    color: #fff;
    box-shadow: 0 2px 5px #0000004d;
    transition: transform .2sease
}

.page-player-css {
    display: flex;
    justify-content: space-between
}

.tousadroite,
.tousagauche {
    width: 50%;
    margin: 2%
}

.tousagauche {
    background: #000;
    border-radius: 20px
}

.tousadroite {
    display: flex;
    gap: 2.5em;
    flex-direction: column
}

a.mon-equipe-boxx,
a.statistiques-box {
    padding: 20%;
    gap: 25px;
    display: flex;
    border-radius: 20px;
    flex-direction: row;
    text-decoration: none;
    color: #fff;
    box-shadow: 0 2px 5px #0000004d
}

.tous-les-joueurs-box {
    background: #000 url(../assets/see-all-players-CvQJm6Tt.png) no-repeat center center;
    background-size: cover
}

.mon-equipe-boxx {
    background: #000 url(../assets/see-all-my-players-BBHSGpGV.png) no-repeat center center;
    background-size: cover
}

.statistiques-box {
    background: #000 url(../assets/see-stats-CXRG5BkQ.png) no-repeat center center;
    background-size: cover
}

.tous-les-joueurs-box:hover,
.mon-equipe-boxx:hover,
.statistiques-box:hover {
    transform: scale(1.02);
    transition: .2s
}

.section.passeur-border .boxTeam,
.section .boxTeam {
    width: 80%;
    box-shadow: 0 2px 5px #0000004d;
}

.section.stat-base {

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;

}

@media screen and (max-width: 768px) {
    .page-player-css {
        margin: 5% 2% 2%;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        align-items: center
    }

    .just-mobile {
        display: flex !important
    }

    .tousagauche {
        width: 90%;
        background: #000 url(../assets/see-all-players-CvQJm6Tt.png) no-repeat center center;
        background-size: cover
    }

    .tousadroite {
        width: 90%;
        display: flex;
        gap: 1em;
        flex-direction: column
    }

    a.tous-les-joueurs-box {
        height: 200px;
        padding: 20%;
        display: flex;
        border-radius: 20px;
        flex-direction: row;
        text-decoration: none;
        color: #fff
    }
}