/* Adding fonts */
@font-face {
    font-family: "ArchivoBlack";
    src: url('../assets/fonts/Archivo_Black/ArchivoBlack-Regular.ttf');
}

@font-face {
    font-family: "Archivo";
    src: url('../assets/fonts/Archivo/Archivo-VariableFont_wdth\,wght.ttf');
}

@font-face {
    font-family: "Capriola";
    src: url('../assets/fonts/Capriola/Capriola-Regular.ttf');
}

body {
    background-color: #171717;
    overflow: hidden;
}

/* ###############################################################################*/
/*                              For All Non-Admin Pages                           */
/* ###############################################################################*/

header {
    position: absolute;
    z-index: 1;
    display: flex;
    flex-direction: row;
    width: 50vw;
    justify-content: space-evenly;
    color: white;
    font-family: Capriola;
    font-size: 1.2vw;
    margin-top: 3vh;
}

header a {
    text-decoration: none;
    color: white;
}

header h2{
    font-size : 1.5vw;
}

header a.activeUser {
    text-decoration: underline;
    text-decoration-color: white;
    text-decoration-thickness: 0.3vh;
    text-underline-offset: 1vh;
}

.logo {
    position: absolute;
    width: 12vw;
    z-index: 1;
    top: 1vh;
    right: 1vw;
}



/* ###############################################################################*/
/*                              Main Page                                        */
/* ###############################################################################*/

.mainPage {
    width: 100vw;
    height: 100vh;
    background-size: cover;
    background-image: url("../assets/images/background.png");
    display: flex;
    height: 100vh;
    justify-content: space-around;
    align-items: center;
}

.ellipse {
    position: fixed; 
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    margin-left: -15%;
}


.mainPage .mainPageTitle {
    z-index: 1;
    font-size: 7.5vw;
    font-family: "ArchivoBlack", sans-serif;
    color: white;
    margin-left: -15vw;
}




/* ###############################################################################*/
/*                              Login Page                                        */
/* ###############################################################################*/
.connexionPage {
    position: relative;
    width: 100vw;
    height: 100vh;
    background-size: cover;
    background-image: url("../assets/images/background.png");
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.connexionPage .mainPageTitle {
    font-size: 70px;
    font-family: "ArchivoBlack", sans-serif;
    color: #fff;
    margin-bottom: 3rem;
    z-index: 2;
    text-align: center;
}

.connexionPage form {
    background-color: rgba(0, 0, 0, 0.7);
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    z-index: 2;
    width: 80%;
    max-width: 400px;
}

.connexionPage label {
    font-family: "Archivo", sans-serif;
    color: #fff;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    display: block;
}

.connexionPage .center-input {
    width: 80%;
    padding: 0.8rem;
    margin-bottom: 1rem;
    border: 2px solid #999;
    border-radius: 5px;
    background-color: #333;
    color: #fff;
    transition: all 0.3s ease;
}

.connexionPage .center-input:focus {
    border-color: #fff;
}

.connexionPage .password-input {
    position: relative;
    display: flex;
    align-items: center;
}



.connexionPage .error {
    color: #FF6347;
    font-size: 0.9rem;
    margin-top: -0.5rem;
    margin-bottom: 1rem;
    display: block;
}
#button_connexion {
    display: block;
    margin: auto;
    width: 50%;
    padding: 1rem;
    background-color: #298b2d; /* A vibrant orange color for the button */
    border: none;
    border-radius: 25px; /* Fully rounded corners */
    color: #fff; /* White text */
    font-size: 1.2rem;
    font-family: "ArchivoBlack", sans-serif;
    cursor: pointer;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1); /* Subtle shadow for a 3D effect */
    transition: all 0.3s ease;
    text-transform: uppercase; /* Makes the text uppercase */
}

#button_connexion:hover {
    background-color: #1e6521; /* Darker shade of orange on hover */
    box-shadow: 0 15px 20px rgba(0, 0, 0, 0.2); /* Enhanced shadow effect on hover */
    transform: translateY(-3px); /* Slight lift effect on hover */
}


/* ###############################################################################*/
/*                              Actuality Page                                    */
/* ###############################################################################*/

.actualityPage {
    height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    /*margin: 2em;*/
    /*margin-top: 4em;*/
    overflow-y: auto;
}


.actualityBox {
    display: flex;
    background-color: #333;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    padding: 1em;
    align-items: flex-start;
    justify-content: space-between;
    width: 85%;
    margin-top: 7em;
}

.actualityBox:last-child{
    margin-bottom: 1em;
}

.actualityContent {
    display: flex;
    flex-direction: column;
    max-width: 70%;
}

.actualityTitle {
    font-size: 3em;
    color: #fff;
    margin-top: 0;
    padding-bottom: 0.5em;
}

.actualityDescription {
    font-size: 1.2em;
    color: #ddd;
    margin-top: 0;
    padding-bottom: 1em;
}

.actualityImage {
    max-width: 20vw;
}

.actualityImage img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

/* ###############################################################################*/
/*                              Information Page                                  */
/* ###############################################################################*/
.informationPage {
    height: 90vh;
    overflow-y: auto;
}

.informationPage .globalContainer {
    display: flex;
    flex-direction: column;
    width: 90vw;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20vh;
}


.informationPage .informationContainer {
    display: flex;
    flex-direction: row;
    background-color: #2C2C2C;
    border-radius: 1vw;
    color: white;
    height: 35vh;
    transition: all 0.6s;
}

.informationPage .informationContainer:hover{
 cursor: pointer;
 transform: scale(1.03);
}

.informationPage .topContainer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 5vh;
}

.topContainer .containerRegulation{
    margin-right : 2vw;
}

.informationPage h1 {
    font-family: "ArchivoBlack";
    font-size: 2vw;
    margin: 1vw;
}

.topContainer .informationContainer {
    display: flex;
    align-items: center;
    height: 100%;
    width: 40vw;
}

.topContainer .informationContainer h1 {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.informationContainer img {
    border-radius: 1vw;
    width: 15vw;
    height: auto;
}






/* ###############################################################################*/
/*                              Practical Information Page                        */
/* ###############################################################################*/
/*.informationPage .bottomContainer {*/
/*    background-color: #262626;*/
/*    border-radius: 2em;*/
/*    padding: 2vw;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    width: 85%;*/
/*    margin-left: auto;*/
/*    margin-right: auto;*/
/*    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);*/
/*}*/


.informationPage .bottomContainer {
    background-color: #262626;
    border-radius: 2em;
    padding: 2vw;
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: 2vh;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}



.informationPage .bottomContainer h1 {
    font-size: 1.5em;
    color: #ffffff;
    align-self: flex-start;
    margin-left: 2vw;
    margin-bottom: 2vw;
}

.informationPage .infoSection {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.informationPage .infoBlock {
    display: flex;
    flex-direction: column;
    margin-right: 2vw;
}

.informationPage .infoBlock h2 {
    font-size: 1.3em;
    color: #ffffff;
    margin-bottom: 0.5vh;
}

.infoBlock span {
    color: #c1c1c1;
}

.informationPage .topContainer,
.informationPage .bottomContainer {
    box-sizing: border-box;
}




/* ###############################################################################*/
/*                              Member Office Page                                */
/* ###############################################################################*/

.memberOfficePage {
    display: flex;
    flex-wrap: wrap;
    overflow-y: auto;
    max-height: 85vh;
    padding-top: 15vh;
    /*padding: 2vh 5vw;*/
    justify-content: space-evenly;
}

.memberOfficePage .memberEntry {
    display: flex;
    margin-bottom: 5vh;
    border-radius: 1vw;
    padding: 1vw;
    border: 0.15vw solid #ffffff8b;
}

.memberOfficePage .imagePreview {
    box-shadow: 0.3vw 0.3vw 0 rgba(0, 0, 0, 0.5);
    width: 10vw;
    border-radius: 0.8vw;
}

.memberOfficePage .memberDetails {
    display: flex;
    flex-direction: column;
    margin-left: 1vw;
    color: white;
    font-family: Capriola;
    font-size: 1vw;
}

.memberOfficePage .memberDetails h3 {
    font-size: 2vw;
    margin-bottom: 0.3vh;
}

.memberOfficePage .memberDetails h4 {
    font-size: 1.2vw;
    margin-bottom: 1.5vh;
}





/* ###############################################################################*/
/*                              Rules Page                                        */
/* ###############################################################################*/

.regulationsPage {
    overflow-y: auto;
    position: relative;
    width: 100%;
    margin: 0 auto;
    /*padding-top: 13vh;*/
}

.regulationsPage .pdf-viewer{
    width: 80vw;
    border: 0.3em solid #ddd;
    border-radius: 0.4em;
    overflow: hidden;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 65vh;
    margin-top: 23vh;
    margin-bottom:10vh;
}

.regulationsPage .pdf-embed {
    width: 100%;
    height: 100%;
}


/* ###############################################################################*/
/*                              Ranking Page                                      */
/* ###############################################################################*/
.ranking-Title {
    font-size: 3vw;
    color: #FFFFFF;
    margin-bottom: 1vh;
    margin-top: 20vh;
    text-align: center;
}




.mainRankingPage {
    
    max-height: 100vh;
    overflow-y: auto;
}
.historyAllRankingPage{
    z-index:10;
}
.mainRankingPage .containerBoxRankings{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 2vw;
    margin-top:23vh;
    margin-bottom: 10vh;
}
.historyAllRankingPage .containerBoxRankings{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 2vw;
    padding-top: 23vh;
    margin-bottom: 10vh;
}

.mainRankingPage .annualRanking,
.mainRankingPage .quarterlyRanking,
.mainRankingPage .podiumRanking,
.mainRankingPage .weeklyRanking,
.mainRankingPage .killerRanking,
.mainRankingPage .historyPastWeeks,
.mainRankingPage .historyAllRanking,
.historyAllRankingPage .annualRanking,
.historyAllRankingPage .quarterlyRanking,
.historyAllRankingPage .podiumRanking,
.historyAllRankingPage .killerRanking,
.historyAllRankingPage .historyPastWeeks{
    background-color: #2C2C2C;
    cursor: pointer;
    border-radius: 1vw;
    transition: background-color 0.3s;
    width: 80vw;
    height: 8vh;
    display: flex;
    align-items: center;
}

.mainRankingPage .annualRankingText,
.mainRankingPage .quarterlyRankingText,
.mainRankingPage .podiumRankingText,
.mainRankingPage .weeklyRankingText,
.mainRankingPage .killerRankingText,
.mainRankingPage .historyPastWeeksText,
.mainRankingPage .historyAllRankingText,
.historyAllRankingPage .annualRankingText,
.historyAllRankingPage .quarterlyRankingText,
.historyAllRankingPage .podiumRankingText,
.historyAllRankingPage .killerRankingText,
.historyAllRankingPage .historyPastWeeksText{
    color: white;
    font-size: 2.3vw;
    font-weight: bold;
    font-family: "ArchivoBlack", sans-serif;
    padding-left: 5vw;
}



.mainRankingPage .rankingTableContainer .containerDate {
    text-align: center;
    width: 100vw;
    padding-bottom: 1.5vh;
    padding-top: 1.5vh;
    border-bottom: 0.7vh solid #ddd;
    margin-bottom: 1.0vh;
}

.mainRankingPage .rankingTableContainer .containerDate .dateText {
    color: white;
    font-weight: bold;
    font-size: 24px;
    margin: 0 auto;
    /* Center the text block horizontally */
}



.mainRankingPage .rankingTableContainer {
    display: flex;
    /* Columns will be laid out horizontally */
    flex-wrap: wrap;
    /* Allows columns to wrap to the next line if necessary */
    border: 0.4vw solid #ddd;
    /* Border around the entire container */
    border-radius: 0.7vw;
    margin-top: 20vh;
    /* Space at the top */
    margin-left: 5vw;
    margin-right: 5vw;
    padding-bottom: 2.0vh;
}

.mainRankingPage .rankingColumn {
    display: flex;
    flex-direction: column;
}

.mainRankingPage .rankingColumn:first-child {
    border-left: 2.5px solid #ddd;
}

/* Leaving this as a temporary example */
/* Remove the border on the right of the last column */
.mainRankingPage .rankingColumn:last-child {
    border-right: none;
}

.mainRankingPage .rankingRow {
    display: flex;
    /* To position the rank and player's name side by side */
    align-items: center;
    /* Center items vertically */
    padding-left: 0.5em;
    padding-right: 0.5em;
    border-right: 2.5px solid #ddd;
    border-bottom: 2.5px solid #ddd;
    /* Border between rows */
}

.mainRankingPage .rankingRow:first-child {
    border-top: 2.5px solid #ddd;
}

.mainRankingPage .rankingPosition {
    width: 10px;
    /* Width for the rank */
    font-weight: bold;
    /* Make the rank number bold */
    padding-right: 0.5em;
    /* Space between the rank and the player's name */
    color: white;
}

.mainRankingPage .rankingName {
    flex-grow: 1;
    /* Allows the name to take up the remaining space */
    padding: 0.5em;
    color: white;
    border-left: 2.5px solid #ddd;
}




/* ###############################################################################*/
/*                              Annual Ranking Page                               */
/* ###############################################################################*/

.annualRankingPage {
    z-index:10;
    max-height: 100vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /*padding-top: 10vh;*/
    /*padding-bottom: 5vh;*/
    width: 100vw;
}

.annualRankingPage img.logo {
    margin-bottom: 3vh;
}

.annualRankingPage table {
    width: 65vw;
    margin-top: 30px;
    margin-bottom: 5vh;
    border-collapse: collapse;
}

.annualRankingPage th,
.annualRankingPage td {
    border: 3px solid #333030;
    padding: 2px;
    color: #FFFFFF;
    background-color: #4CAF50;
}

.annualRankingPage th {
    font-size: 1.5vw;
    text-align: center;
}
.annualRankingPage td {
    font-size: 1.2vw;
    text-align: left;
    background-color: #FFFFFF;
    color: black;
}
.annualRankingPage td:first-child,
.annualRankingPage td:last-child {
    text-align: center;
}
.annualRankingPage tr:nth-child(even) td {
    background-color: #d8e4bc;
}
.annualRankingPage td:not(:first-child):not(:last-child) {
    padding-left: 5px;
}


/* ###############################################################################*/
/*                              Quarterly Ranking Page                            */
/* ###############################################################################*/

.quarterlyRankingPage {
    z-index:10;
    max-height: 100vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /*padding-top: 10vh;*/
    /*padding-bottom: 5vh;*/
    width: 100vw;
}

.quarterlyRankingPage img.logo {
    margin-bottom: 3vh;
}

.quarterlyRankingPage table {
    width: 65vw;
    margin-top: 30px;
    margin-bottom: 5vh;
    border-collapse: collapse;
}

.quarterlyRankingPage th,
.quarterlyRankingPage td {
    border: 3px solid #333030;
    padding: 2px;
    color: #FFFFFF;
    background-color: #4CAF50;
}

.quarterlyRankingPage th {
    font-size: 1.5vw;
    text-align: center;
}

.quarterlyRankingPage td {
    font-size: 1.2vw;
    background-color: #FFFFFF;
    color: black;
}

.quarterlyRankingPage td:first-child,
.quarterlyRankingPage td:last-child {
    text-align: center;
}

.quarterlyRankingPage tr:nth-child(even) td {
    background-color: #d8e4bc;
}

.quarterlyRankingPage td:not(:first-child):not(:last-child) {
    padding-left: 5px;
}


/* ###############################################################################*/
/*                              Podium Ranking Page                               */
/* ###############################################################################*/

.podiumRankingPage {
    z-index:10;
    max-height: 100vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /*padding-top: 10vh;*/
    /*padding-bottom: 5vh;*/
    width: 100vw;
}

.podiumRankingPage img.logo {
    margin-bottom: 3vh;
}

.podiumRankingPage table {
    width: 65vw;
    margin-top: 30px;
    margin-bottom: 5vh;
    border-collapse: collapse;
}

.podiumRankingPage th,
.podiumRankingPage td {
    border: 3px solid #333030;
    padding: 2px;
    color: #FFFFFF;
    background-color: #4CAF50;
}

.podiumRankingPage th {
    font-size: 1.5vw;
    text-align: center;
}

.podiumRankingPage td {
    font-size: 1.2vw;
    text-align: left;
    background-color: #FFFFFF;
    color: black;
}

.podiumRankingPage tr:nth-child(even) td {
    background-color: #d8e4bc;
}
.podiumRankingPage td:nth-child(2) {
    padding-left: 5px;
}
.podiumRankingPage td:nth-child(1),
.podiumRankingPage td:nth-child(3),
.podiumRankingPage td:nth-child(4),
.podiumRankingPage td:nth-child(5),
.podiumRankingPage td:nth-child(6) {
    text-align: center;
}

/* ###############################################################################*/
/*                              Killer Ranking Page                               */
/* ###############################################################################*/

.killerRankingPage {
    z-index:10;
    max-height: 100vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /*padding-top: 10vh;*/
    /*padding-bottom: 5vh;*/
    width: 100vw;
}

.killerRankingPage img.logo {
    margin-bottom: 3vh;
}

.killerRankingPage table {
    width: 65vw;
    margin-top: 30px;
    margin-bottom: 5vh;
    border-collapse: collapse;
}

.killerRankingPage th,
.killerRankingPage td {
    border: 3px solid #333030;
    padding: 2px;
    color: #FFFFFF;
    background-color: #4CAF50;
}

.killerRankingPage th {
    text-align: center;
    font-size: 1.5vw;
}

.killerRankingPage td {
    font-size: 1.2vw;
    background-color: #FFFFFF;
    text-align: left;
    color: black;
}

.killerRankingPage tr:nth-child(even) td {
    background-color: #d8e4bc;
}
.killerRankingPage td:first-child,
.killerRankingPage td:last-child {
    text-align: center;
}
.killerRankingPage td:nth-child(2){
    padding-left: 5px;
}


/* ###############################################################################*/
/*                              Historical Week Ranking Page                      */
/* ###############################################################################*/

.historyPastWeeksPage {
    display: flex;
    flex-direction: column;
    /*margin-top: 24vh;*/
    width: 90%;
    height: 90vh; /* Permet à la hauteur de s'ajuster automatiquement au contenu */
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 2vh; /* Ajoute un peu de padding en bas pour plus d'espace */
    overflow-y: auto;
}

.historyPastWeeksPage .weekButton {
    background-color: #333;
    color: white;
    padding: 15px;
    margin-bottom: 1.5vw; /* Réduit la marge entre les boutons */
    margin-left: 3vw;
    margin-right: 3vw;
    border: none;
    border-radius: 10px;
    text-align: left;
    font-size: 1.2em;
    cursor: pointer;
    transition: background-color 0.3s;
}
.historyPastWeeksPage .listWeekButton {
    margin-top: 15vh;
    display: flex;
    flex-direction: column;
}
.historyPastWeeksPage .weekButton:last-child {
    margin-bottom: 18vh;
}

.historyPastWeeksPage .weekButton:hover {
    background-color: #555;
}




/* ###############################################################################*/
/*                              History All Ranking Page                          */
/* ###############################################################################*/


.historyPage .quarterButton:hover, .historyPage .yearButton:hover, .historyPage .killerButton:hover,.historyPage .podiumButton:hover {
    background-color: #555;
}

.historyPage {
    z-index: 10;
    display: flex;
    flex-direction: column;
    padding-top: 23vh;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5vh; 
}

.historyPage .detailsButton {
    background-color: #333;
    color: white;
    padding: 15px;
    margin-bottom: 1vw;
    border: none;
    border-radius: 10px;
    text-align: left;
    font-size: 1.2em;
    cursor: pointer;
    transition: background-color 0.3s;
}

.historyPage .detailsButton:hover {
    background-color: #555;
}



/* ###############################################################################*/
/*                              Week Ranking Details Page                         */
/* ###############################################################################*/

.pageWeekRankingDetails {
    z-index: 10;
    max-height: 100vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /*padding-top: 10vh;*/
    /*padding-bottom: 5vh;*/
    width: 100vw;
}

.pageWeekRankingDetails img.logo {
    margin-bottom: 3vh;
}

.pageWeekRankingDetails table {
    width: 65vw;
    margin-top: 30px;
    margin-bottom: 5vh;
    border-collapse: collapse;
}

.pageWeekRankingDetails th,
.pageWeekRankingDetails td {
    border: 3px solid #333030;
    padding: 2px;
    color: #FFFFFF;
    background-color: #4CAF50;
}

.pageWeekRankingDetails th {
    font-size: 1.5vw;
    text-align: center;
    
}

.pageWeekRankingDetails td {
    font-size: 1.2vw;
    text-align: left;
    background-color: #FFFFFF;
    color: black;
}

.pageWeekRankingDetails tr:nth-child(even) td {
    background-color: #d8e4bc;
}
.pageWeekRankingDetails td:first-child,
.pageWeekRankingDetails td:nth-child(4),
.pageWeekRankingDetails td:nth-child(5),
.pageWeekRankingDetails td:last-child {
    text-align: center;
}

.pageWeekRankingDetails td:nth-child(2),
.pageWeekRankingDetails td:nth-child(3){
    padding-left: 5px;
}

/* ###############################################################################*/
/*                              Weekly Ranking Page                               */
/* ###############################################################################*/

.weeklyRankingPage {
    z-index:10;
    max-height: 100vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /*padding-top: 10vh;*/
    /*padding-bottom: 5vh;*/
    width: 100vw;
}

.weeklyRankingPage img.logo {
    margin-bottom: 3vh;
}

/*.title-container {*/
/*    text-align: center;*/
/*    margin-bottom: 2vh; */
/*}*/
/*.weeklyRankingPage*/


.weeklyRankingPage table {
    width: 65vw;
    margin-top: 30px;
    margin-bottom: 5vh;
    border-collapse: collapse;
}

.weeklyRankingPage th,
.weeklyRankingPage td {
    border: 3px solid #333030;
    padding: 2px;
    color: #FFFFFF;
    background-color: #4CAF50;
}

.weeklyRankingPage td:first-child,
.weeklyRankingPage td:nth-child(4),
.weeklyRankingPage td:nth-child(5),
.weeklyRankingPage td:last-child {
    text-align: center;
}

.weeklyRankingPage th {
    font-size: 1.5vw;
    text-align: center;
}

.weeklyRankingPage td {
    font-size: 1.2vw;
    background-color: #FFFFFF;
    color: black;
}

.weeklyRankingPage td:not(:first-child):not(:last-child) {
    padding-left: 5px;
}

.weeklyRankingPage tr:nth-child(even) td {
    background-color: #d8e4bc;
}









/* ###############################################################################*/
/*                              Change Rules Admin Page                           */
/* ###############################################################################*/
.containerRules {
    overflow-y: auto;
    z-index: 1;
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding-top: 10vh;
}

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

.containerRules h1 {
    color: #fff;
    font-size : 2em;
    text-align:center;
}

.containerRules form {
    margin-top: 2vh;
    margin-bottom: 2vh;
}

.containerRules input[type="file"] {
    margin-left: 2vw;
    margin-bottom: 1vh;
}

.containerRules button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 1vh 1vw;
    border-radius: 0.8em;
    cursor: pointer;
    font-size: 16px;
    margin-left: 2vw;
    margin-bottom: 1vh;
}

.containerRules button:hover {
    background-color: #0056b3;
}

.containerRules .error {
    color: #d9534f;
    margin-bottom: 15px;
}

.containerRules .pdf-viewer {
    width: 80vw;
    border: 0.3em solid #ddd;
    border-radius: 0.4em;
    overflow: hidden;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 70vh;
}

.containerRules .pdf-embed {
    width: 100%;
    height: 100%;
}







/* ###############################################################################*/
/*                              Admin Ranking Page                                */
/* ###############################################################################*/


.defaultAdminRankingPage {
    overflow-y: auto;
    position: relative;
    z-index: 1;
    width: 100vw;
    height: 100vh;
    background-size: cover;
    background-image: url("../assets/images/background.png");
    display: flex;
    flex-direction: column;
    align-items: center;
}
.defaultAdminRankingPage .annualRankingPage,
.defaultAdminRankingPage .podiumRankingPage,
.defaultAdminRankingPage .quarterlyRankingPage,
.defaultAdminRankingPage .killerRankingPage,
.defaultAdminRankingPage .historyAllRankingPage{
    margin-top:10vh;
}



/* ###############################################################################*/
/*                              Main Admin                                        */
/* ###############################################################################*/

.defaultAdminPage {
    overflow-y: auto;
    position: relative;
    z-index: 1;
    width: 100vw;
    height: 100vh;
    background-size: cover;
    background-image: url("../assets/images/background.png");
    display: flex;
    height: 100vh;
    justify-content: space-around;
    align-items: center;
}

.defaultAdminRanking {
    position: relative;
    z-index: 1;
    width: 100vw;
    height: 100vh;
    background-size: cover;
    background-image: url("../assets/images/background.png");
    display: flex;
    flex-direction: column;
    height: 100vh;
    justify-content: center;

}

.inputPassword {
    display: none;
}

.weekAdminButton{
    z-index: 1;
    margin-top: 1vh;
    padding-top : 1vh;
    padding-bottom: 1vh;
    margin-bottom: 1vh;
}
.weekAdminRanking {
    max-height: 75vh;
    position : fixed;
    overflow-y: auto;
    /*padding-top: 15vh;*/
    /*bottom: 0;*/
}

.centered-title-text {
    z-index: 1;
    font-size: 6vw;
    font-family: "ArchivoBlack", sans-serif;
    color: white;
}

.yellow {
    color: #B39C3A;
}

.logoPHP74 {
    position: absolute;
    top: 1.5em;
    right: 1.5em;
    cursor: pointer;
    border-radius: 20px;
    transition: all ease 0.3s;
    width: 15vw;
    height: auto;
    max-width: 400px;
}

.logoPHP74:hover {
    box-shadow: 0 0 30px rgba(46, 46, 46, 0.5);
    /* Ombre sur le bas */
}


/* Setting up the hamburger menu */
.hamburgerMenu {
    display: inline-block;
    cursor: pointer;
    position: absolute;
    z-index: 10;
    top: 1.5em;
    left: 1.5em;
}

.bar1,
.bar2,
.bar3 {
    width: 35px;
    height: 5px;
    background-color: white;
    margin: 6px 0;
    transition: 0.4s;
}

.change .bar1 {
    transform: translate(0, 11px) rotate(-45deg);
}

.change .bar2 {
    opacity: 0;
}

.change .bar3 {
    transform: translate(0, -11px) rotate(45deg);
}

/* Content of the menu */

.menuContent {
    position: fixed;
    top: 0;
    left: -40%;
    /* Initial position */
    width: 40%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    transition: left 0.4s ease-in-out;
    z-index: 2;
    /* Assure que le menu soit au-dessus du reste du contenu */
}

.accordion {
    background-color: rgba(0, 0, 0, 0);
    color: #999;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    align-items: flex-start;
    outline: none;
    font-size: 20px;
    transition: 0.4s;
    font-family: "Archivo", sans-serif;
}

.active,
.accordion:hover {
    background-color: #ccc;
}

.accordion:after {
    content: '\02795';
    /* Unicode character for "plus" sign (+) */
    color: red;
    font-size: 13px;
    float: right;
    margin-left: 5px;

}

.active:after {
    content: "\2796";
    /* Unicode character for "minus" sign (-) */
}

button.accordion.active {
    box-shadow: 0 5px 10px #333;
}

.insideMenu {
    margin-top: 10vh;
    font-family: "Archivo", sans-serif;
}


.panel {
    padding: 0 18px;
    max-height: 0;
    background-color: #777;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    align-items: start;
}

.panelButton {
    padding: 0.5em;
    width: 100%;
    background-color: #777;
    border: none;
    border-radius: 5px;
}

.panelButton:first-child {
    margin-top: 0.8em;
}

.panelButton:last-child {
    margin-bottom: 0.8em;
}

.panelButton:hover {
    background-color: #333;
    color: #ccc;
}

button {
    font-size: 15px;
    font-family: "Archivo", sans-serif;
}

.createGame {
    width: 100vw;
    height: 100vh;
    background-size: cover;
    background-image: url("../assets/images/background.png");
    display: flex;
    height: 100vh;
    justify-content: space-around;
    align-items: center;
}


/* ###############################################################################*/
/*                              ADMIN FORMS                                       */
/* ###############################################################################*/
.formContainer {
    z-index: 1;
    color: #999;
    font-family: "Archivo", sans-serif;
}

.AdminH2 {
    font-size: 40px;
    color: #999;
    font-family: "Archivo", sans-serif;
    margin-bottom:2vh;
}

.adminInputForm {
    background-color: #333;
    border: 2px solid #999;
    border-radius: 5px;
    color: aliceblue;
    width: 100%;
    transition: all ease 0.3s;
}

.adminInputForm:hover {
    background-color: #999;
    color: #333;
    border: 2px solid #333;
    color: #333;
}

.createGame .formContainer a{
    color: #dfff00;
    text-decoration: none;
}

.createGame .formContainer a:hover {
    color: #98ac0d; 
    text-decoration: underline;
}

.adminError {
    color: red;
}

.adminFormLabel {
    font-size: 18px;
    font-family: "Archivo", sans-serif;
}

.adminInputSubmit {
    width: 50%;
    margin-left: 25%;
    align-items: center;
    border: 2px solid #999;
    border-radius: 5px;
    background-color: #171717;
    color: #777;
    cursor: pointer;
    transition: all 0.3s ease;
}

.adminInputSubmit:hover {
    background-color: #999;
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    color: black;
}





/* ###############################################################################*/
/*                              Create Game Admin                                 */
/* ###############################################################################*/

.createGamePage .centered-title-text{
    font-size: 2.5em;
}
.gameCreatedTitle {
    text-align: center;
    font-size: 2.5em;
}

/* ###############################################################################*/
/*                              Change Information Admin                          */
/* ###############################################################################*/
.adminForm {
    padding: 20px;
    border-radius: 5px;
    width: 60%;
}

.infoForm {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.formSection {
    width: 100%;
    margin-bottom: 10px;
}

.adminInputForm {
    height: 7vh;
    margin-bottom: 10px;
}

.defaultAdminPage .adminInputSubmit {
    align-self: center;
    margin-top: 15px;
    margin-left: 0%;
    padding: 10px 10px;
}

/* ###############################################################################*/
/*                              Change Office Members Admin Page                  */
/* ###############################################################################*/

.changeOfficeMemberAdminPage {
    max-height: 85vh;
    overflow-y: auto;
    z-index: 10;
    height: 100vh;
    width: 100vw;
    padding-top: 10vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.changeOfficeMemberAdminPage .logoPHP74 {
    width: 20vw;
    margin-bottom: 2vh;
}

.changeOfficeMemberAdminPage .formSection {
    margin-bottom: 2vh;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 150%;
}


.changeOfficeMemberAdminPage .adminInputForm,
.changeOfficeMemberAdminPage .adminInputSubmit,
.changeOfficeMemberAdminPage textarea {
    width: 100%;
    padding: 1em;
    border-radius: 0.5em;
    border: 0.1em solid #777;
    background-color: #222;
    color: white;
    font-family: "Archivo", sans-serif;
}
.changeOfficeMemberAdminPage textarea{
    height: 15vh;
}
.changeOfficeMemberAdminPage .adminInputSubmit {
    background-color: #4CAF50;
    cursor: pointer;
    transition: background-color 0.3s;
}

.changeOfficeMemberAdminPage .adminInputSubmit:hover {
    background-color: #367c39;
}

.changeOfficeMemberAdminPage .memberEntry {
    display: flex;
    background-color: #333;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    padding: 1em;
    align-items: center;
    justify-content: space-between;
    width: 50vw;
    margin-top: 2em;
}

.changeOfficeMemberAdminPage .memberEntry h3 {
    color: #fff;
    font-size: 2em;
}

.changeOfficeMemberAdminPage .memberEntry h4 {
    color: #ddd;
    font-size: 1.5em;
}

.changeOfficeMemberAdminPage .memberEntry p {
    color: #bbb;
    font-size: 1em;
}

.changeOfficeMemberAdminPage .imagePreview {
    width: 10vw;
    height: auto;
    border-radius: 10px;
    margin-right: 2em;
}

.changeOfficeMemberAdminPage .deleteButton {
    background-color: red;
    color: white;
    border: none;
    border-radius: 50%;
    padding: 0.5em 0.75em;
    cursor: pointer;
    transition: background-color 0.3s;
}

.changeOfficeMemberAdminPage .deleteButton:hover {
    background-color: darkred;
}

.changeOfficeMemberAdminPage label {
    color: white;
    font-size: 1.2em;
}

.changeOfficeMemberAdminPage .addButton,
.changeOfficeMemberAdminPage .updateButton {
    cursor: pointer;
    padding: 0.8vh 1.6vw;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 0.5em;
    transition: background-color 0.3s;
}
.changeOfficeMemberAdminPage .updateButton {
    margin: 0 auto; /* Centrer le bouton horizontalement */
    display: intial; /* Assurer que le bouton est traité comme un bloc pour le centrage */
    width: 50%; /* Ajuster la largeur du bouton si nécessaire */
    padding: 0.8vh 1.6vw;
}
.changeOfficeMemberAdminPage .addButton:hover,
.updateButton:hover {
    background-color: #367c39;
}

.changeOfficeMemberAdminPage input[type="file"] {
    color: white;
    background-color: #555;
    border: 1px solid #888;
}

.changeOfficeMemberAdminPage .custom-file-upload {
    cursor: pointer;
    background-color: #444;
    padding: 0.5em 1em;
    border-radius: 0.5em;
    color: white;
    margin-top: 1em;
    transition: background-color 0.3s;
}

.changeOfficeMemberAdminPage .custom-file-upload:hover {
    background-color: #666;
}














































/* ###############################################################################*/
/*                              Change Office Members Admin Page                  */
/* ###############################################################################*/

.changeOfficeMemberAdminPage .memberEntry,
.changeOfficeMemberAdminPage .membersForm,
.changeOfficeMemberAdminPage .memberButtons {
    position: relative;
    z-index: 1;
}

.changeOfficeMemberAdminPage .memberButtons {
    position: absolute;
    top: 20vh;
    right: 1vw;
    padding: 2vw;
}

.changeOfficeMemberAdminPage #membersForm {
    margin-top: 30vh;
}

.changeOfficeMemberAdminPage .formContainer {
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 70vw;
    height: 90vh;
}

.changeOfficeMemberAdminPage .memberEntry {
    display: flex;
    /* Using Flexbox */
    margin-bottom: 3vh;
    /* Space between lines */
    padding-top: 1.0vh;
    padding-right: 1.0vh;
    border: 1px solid #ccc;
    /* Form border */
}

.changeOfficeMemberAdminPage .memberEntry.large {
    width: 100%;
    /* Full width for larger display */
    height: 30%;
}

.changeOfficeMemberAdminPage .memberEntry.small {
    width: 47%;
    /* Reduced width for side-by-side display */
    height: 30%;
}

.changeOfficeMemberAdminPage .memberDetails {
    flex: 3;
    /* More flexibility for details */
}

.changeOfficeMemberAdminPage .memberDetails input[type="text"],
.changeOfficeMemberAdminPage .memberDetails textarea {
    width: 100%;
    /* Using full width */
    margin-bottom: 1.0vh;
    /* Space between fields */
}

.changeOfficeMemberAdminPage .memberDetails textarea {
    height: 20vh;
    /* Bigger height for description */
}


/* --------------------------- Button to change the image of the block of the member ------------------------------------ */

.changeOfficeMemberAdminPage .memberImagePreview {
    flex: 1;
    /* Flexibility for image */
    text-align: center;
    /* Center the image */
    margin-right: 0.5vw;
    /* Space between image and details */
    margin-left: 0.5vw;
    /* Space between image and details */
}

.changeOfficeMemberAdminPage .imagePreview {
    width: 7vw;
    /* Image preview width */
}

.changeOfficeMemberAdminPage .custom-file-upload {
    position: absolute;
    bottom: 0;
    padding-bottom: 1vh;
    padding-left: 0.5vw;
}

.changeOfficeMemberAdminPage .custom-file-upload.small {
    width: 6.3vw;
    /* Width suitable for small blocks */
}

.changeOfficeMemberAdminPage .custom-file-upload.large {
    width: 12.6vw;
    /* Width suitable for large blocks */
}

/* Hide file field by default */
.changeOfficeMemberAdminPage .custom-file-upload input[type="file"] {
    display: none;
}

/* Style for the botton label to add an image */
.changeOfficeMemberAdminPage .custom-file-upload label {
    display: block;
    background: #ddd;
    border: none;
    color: #000;
    border-radius: 0.5vw;
    margin: 1.0vh;
    cursor: pointer;
    text-align: center;
}

.changeOfficeMemberAdminPage .custom-file-upload label:hover {
    background-color: #ccc;
}

.changeOfficeMemberAdminPage .custom-file-upload.small label {
    font-size: 0.7vw;
    /* Smaller font size for small blocks */
    padding: 0.5vh 0.2vw;
    /* Pad adjustment */
    width: 6.3vw;
    /* Width suitable for small blocks */
}

.changeOfficeMemberAdminPage .custom-file-upload.large label {
    font-size: 1.5vw;
    /* Smaller font size for small blocks */
    padding: 0.5vh 0.2vw;
    /* Pad adjustment */
    width: 12.6vw;
    /* Width suitable for large blocks */
}

/* ------------------------------------------------ Button to delete the block member --------------------------------- */
.changeOfficeMemberAdminPage .deleteMemberBtn {
    position: absolute;
    top: 0;
    right: 0;
    background-color: red;
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    padding: 0.25vh 0.25vw;
}

.changeOfficeMemberAdminPage .deleteMemberBtn:hover {
    background-color: darkred;
}
.changeOfficeMemberAdminPage .memberEntry:last-child {
    margin-bottom: 2em; /* Add margin to the bottom of the last box */
}
/* ###############################################################################*/
/*                              Change Actuality Admin                            */
/* ###############################################################################*/
.changeActualityAdminPage {
    z-index: 10;
    width: 85%;
    background-color: #333;
    padding: 2em;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    overflow-y: auto;
    max-height: 85vh;
    margin-top: 8vh;
}
.changeActualityAdminPage .logoPHP74{
    z-index:11;
}
.changeActualityAdminPage h1{
    font-size : 2em;
    text-align:center;
}

.formSection {
    margin-bottom: 2vh;
}

.changeActualityAdminPage .adminInputForm, .changeActualityAdminPage .adminInputSubmit, .changeActualityAdminPage textarea {
    width: 100%;
    height: 16vh;
    border-radius: 0.5em;
    border: 0.1em solid #777;
    background-color: #222;
    color: white;
}

.changeActualityAdminPage .adminInputSubmit {
    background-color: green;
    position: fixed;
    bottom: 2em;
    left: 2em;
}


.changeActualityAdminPage .actualityEntry {
    background-color: #222;
    padding: 1.5em;
    margin-top: 3vh;
    position: relative;
}

.changeActualityAdminPage .actualityEntry h3 input[type="text"],.changeActualityAdminPage .actualityEntry textarea {
    font-size: 1.2em;
}

.changeActualityAdminPage .imageUploadSection,.changeActualityAdminPage .imageFileName {
    display: none;
}


.changeActualityAdminPage input[type="file"] {
    color: white;
    background-color: #555;
    border: 1px solid #888;
}


.changeActualityAdminPage #inputTitle{
    width: 25%;
    height: 3vh;
    border-radius: 0.5em;
    border: 0.1em solid #777;
    background-color: #222;
    color: white;
}


.changeActualityAdminPage .addButton,.changeActualityAdminPage .updateButton {
    cursor: pointer;
    padding: 0.8vh 1.6vw;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 0.5em;
    margin-top: 0.1em;
    transition: background-color 0.3s;
}

.changeActualityAdminPage .addButton:hover,.updateButton:hover {
    background-color: #367c39;
}

 .deleteButton {
    position: absolute;
    top: 0px;
    right: 0px;
    background-color: red;
    color: white;
    border: none;
    padding: 0.7vh 0.7vw;
    border-radius: 100vw;
    cursor: pointer;
    font-size: 0.7em;
}

 .deleteButton:hover {
    background-color: darkred;
}


.changeActualityAdminPage, label {
    color : white;
}








/* ###############################################################################*/
/*                              Change Players Admin                              */
/* ###############################################################################*/

.adminPlayersContainer {
    z-index:10;
    width: 70%; /* Ajuste la largeur du conteneur */
    margin: auto; /* Centre le conteneur dans la page */
    padding: 5em 0; /* Ajoute de l'espace en haut et en bas du conteneur */
}

.adminPlayersTitle {
    text-align: center;
    font-size: 2.5em;
    color: white;
    margin-bottom: 1em; /* Espace en dessous du titre */
}

.adminPlayerEntry {
    background-color: #222;
    padding: 1em;
    border-radius: 0.5em;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    margin-bottom: 1em;
}

.adminPlayerEntry label {
    color: white;
    display: block;
}

.adminPlayerEntry input[type="text"] {
    width: calc(100% - 120px);
    padding: 0.5em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.adminPlayerEntry .adminInputForm[type="checkbox"] {
    transform: scale(1);
    margin-left: 1em;
}

.adminPlayersContainer .adminInputSubmit {
    display: block;
    width: 50%;
    margin-top: 1em;
    margin-left:auto;
    margin-right:auto;
}

.adminPlayersContainer .adminInputForm,
.adminPlayersContainer .adminInputSubmit {
    background-color: #333;
    color: white;
    border-radius: 0.5em;
}



.adminInputForm {
    padding-left:0.5vw;
    margin-right: 0.5em;
    width: auto;
    height: auto;
    margin-bottom: 0;
}

.adminPlayersContainer .adminInputSubmit:hover {
    background-color: #367c39; /* Changement de couleur au survol */
}


#practicalInformationContainer .adminInputForm{
    margin-top:2vh;
    height : 15vh;
    width: 60vw;
}

.playerSubPage #submitBtn {
    background-color: #298b2d; /* Couleur de fond du bouton (peut être ajustée) */
    color: #fff; /* Couleur du texte en blanc */
    padding: 1rem 2rem; /* Espace intérieur du bouton pour le rendre plus grand */
    font-size: 1rem; /* Taille du texte pour qu'il soit plus visible */
    font-family: "ArchivoBlack", sans-serif; /* Police de caractères */
    border: none; /* Pas de bordure */
    border-radius: 10px; /* Coins arrondis */
    cursor: pointer; /* Curseur en forme de main pour indiquer que c'est cliquable */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); /* Ombre pour un effet 3D */
    transition: all 0.3s ease; /* Transition pour les effets d'animation */
}

.playerSubPage #submitBtn:hover {
    background-color: #1e6521; /* Couleur de fond en survol (peut être ajustée) */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); /* Ombre plus importante au survol */
    transform: translateY(-2px); /* Effet de levée du bouton au survol */
}





/* ###############################################################################*/
/*                              displayLeaderboard Admin Page                     */
/* ###############################################################################*/


.defaultAdminRankingPage .historyAllRankingPage .containerBoxRankings{
    padding-top: 12vh;
}










/* ###############################################################################*/
/*                              List Change Result Admin Page                     */
/* ###############################################################################*/

.buttonLink {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    text-align: center;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s;
}

.buttonLink:hover {
    background-color: #0056b3;
}

.changeResultAdmin{
    align-items: start;
}
.changeResultAdmin .historyGamesList{
    margin-top: 0vh;
}



/* ###############################################################################*/
/*                              Week Ranking Page                                 */
/* ###############################################################################*/
.admin-Ranking-Title {
    font-size: 3vw;
    color: #FFFFFF;
    margin-bottom: -2vh;
    margin-top: 5vh;
    text-align: center;
}

.weekAdminRanking {
    width: 80vw; /* Adjust width to fit content */
    margin-top: 5vh;
    padding: 2vh 0;
}

.weekAdminRanking form {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10vh;
}

.weekAdminRanking table {
    margin-top: 2vh;
    width: 100%; /* Use full container width */
    border-collapse: collapse;
    background-color: #333; /* Dark theme for table */
    color: white;
}

.weekAdminRanking th,
.weekAdminRanking td {
    padding: 10px;
    border: 1px solid #ddd; /* Light borders for readability */
    text-align: center;
}

.weekAdminRanking th {
    background-color: #4CAF50; /* Green headers */
}

.weekAdminRanking input[type="text"],
.weekAdminRanking input[type="number"] {
    width: 90%; /* Responsive width */
    padding: 5px;
    border: 2px solid #999;
    background-color: #222;
    color: white;
    border-radius: 5px;
}

.weekAdminRanking button {
    padding: 10px 20px;
    margin-top: 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.weekAdminRanking button:hover {
    background-color: #367c39; /* Darker green on hover */
}



/* Style des éléments <select> pour une meilleure apparence */
.weekAdminRanking select {
    width: 100%;
    padding: 7px 5px;
    margin: 5px 0;
    border-radius: 5px;
    border: 1px solid #ccc;
    background-color: white;
    box-shadow: 0 2px 3px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.weekAdminRanking select:hover {
    box-shadow: 0 3px 4px rgba(0,0,0,1);
}

.weekAdminRanking select:focus {
    outline: none;
    border-color: #4CAF50;
    box-shadow: 0 0 6px rgba(76, 175, 80, 0.5);
}

/* Style des options pour améliorer l'expérience de sélection */
.weekAdminRanking option {
    padding: 8px;
    background: white;
    border-bottom: 1px solid #f1f1f1;
}

/* Assurer que l'option sélectionnée se démarque */
.weekAdminRanking option:checked, option:hover {
    background: #f1f1f1;
}

.weekAdminRanking .GameIsDouble{
    align-self: start;
    margin-top: 1vh;
}

/* ###############################################################################*/
/*                              Change Player Page                                */
/* ###############################################################################*/

/* Ajoutez ce CSS pour le bouton de suppression */
.adminPlayerEntry {
    position: relative;
    padding: 1em;
    margin-bottom: 1em;
    background-color: #222;
    border-radius: 0.5em;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}


.deleteForm {
    position: absolute;
    top: 0;
    right: 0;
}


/* ###############################################################################*/
/*                              Player List Page                                  */
/* ###############################################################################*/
.playerListPage {
    overflow-y: auto;
    position: relative;
    z-index: 1;
    width: 100vw;
    height: 100vh;
    background-size: cover;
    background-image: url("../assets/images/background.png");
    display: flex;
    flex-direction: column; /* Modifié pour disposer les éléments verticalement */
    align-items: center;
    padding-top: 5vh; /* Ajustez cette valeur pour ajouter une marge en haut */
}

.playerListContainer {
    z-index: 1;
    color: #999;
    font-family: "Archivo", sans-serif;
    width: 80%; /* Ajustez selon vos besoins */
    margin-bottom: 5vh; /* Espace en bas de la liste des joueurs */
}

.playerListTitle {
    margin-top: 3vh; /* Espace entre le haut de la page et le titre */
}

.playerList {
    margin-top: 3vh; /* Espace entre le titre et la liste des joueurs */
    margin-bottom: 5vh; /* Espace en bas de la liste des joueurs */
}

.playerList p {
    margin: 0.5em 0; /* Espacement entre les joueurs */
}

.adminError {
    margin-bottom: 5vh; /* Espace en bas de la page */
}



/* ###############################################################################*/
/*                              Modif Ranking Page                                */
/* ###############################################################################*/
.historyGamesList {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 5vh;
    margin-top: 45vh;
}

.historyGameButton {
    display: block;
    background-color: #333;
    color: white;
    margin-bottom: 2vh;
    width: 75%;
    border: none;
    border-radius: 10px;
    text-align: left;
    font-size: 1.2em;
    cursor: pointer;
    transition: background-color 0.3s;
    text-decoration: none; /* Enlève la décoration de lien */
}

.historyGameButton:hover {
    background-color: #555;
}

.historyGamesContainer{
    width : 100%;
}

.historyGamesContainer .centered-title-text{
    text-align: center;
    font-size: 2.5em;
    color: #fff;
    margin-top: 20vh;
    margin-bottom: 5vh;
}

#csvForm {
    display: block;
}

#csvForm button{
    padding: 10px 20px;
    margin-top: 15vh;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

/* Conteneur pour chaque ligne de l'historique des parties */
.historyGameEntry {
    display: flex;
    width: 75%;
    margin-left: 10vw;
}

/* Style du bouton "Supprimer" */
.historyGameEntry .deleteButton {
    background-color: red; /* Couleur de fond rouge pour indiquer la suppression */
    color: white; /* Couleur du texte en blanc */
    border: none; /* Suppression des bordures */
    padding: 10px; /* Espacement intérieur */
    border-radius: 5px; /* Coins arrondis */
    cursor: pointer; /* Curseur en forme de main pour indiquer l'interaction */
    transition: background-color 0.3s; /* Transition douce pour le changement de couleur */
    margin-left: 10px; /* Espace entre le bouton et le lien de la partie */
    margin-top: 0.3vh;
    position: relative !important;
    font-size: 1em !important;
}

/* Changement de couleur au survol pour le bouton "Supprimer" */
.historyGameEntry .deleteButton:hover {
    background-color: #e60000; /* Couleur de fond rouge foncé au survol */
}



/* ###############################################################################*/
/*                              Mobile version                                    */
/* ###############################################################################*/ 
            
            
            
            
@media screen and (max-width: 768px) {


/* ###############################################################################*/
/*                              Main Page Mobile Version                          */
/* ###############################################################################*/ 

    header {
        width: 100vw;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        font-size: 2.5vw;
        padding-left: 2vw;
    }

    header h2 {
        font-size: 3vw;
    }

    header a {
        margin: 0.5em 0;
    }

    .logo {
        width: 25vw;
        top: 2vh;
        right: 2vw;
    }
    
    .mainPage .mainPageTitle {
        font-size: 12vw;
        margin: 0;
        text-align: left;
        padding-left: 2vw;
    }

    .rankingTableContainer .containerDate .dateText {
        font-size: 4vw;
    }

    .rankingTableContainer {
        padding: 5vw;
    }

    .rankingRow {
        padding: 0.5em;
    }

    .rankingPosition {
        font-size: 4vw;
    }

    .rankingName {
        font-size: 4vw;
    }

    .containerBoxRankings .annualRankingText,
    .containerBoxRankings .quarterlyRankingText,
    .containerBoxRankings .podiumRankingText,
    .containerBoxRankings .weeklyRankingText,
    .containerBoxRankings .killerRankingText,
    .containerBoxRankings .historyPastWeeksText,
    .containerBoxRankings .historyAllRankingText {
        font-size: 4vw;
    }
    
    
/* ###############################################################################*/
/*                              Login Page                                        */
/* ###############################################################################*/
    .connexionPage .mainPageTitle {
        font-size: 50px; /* Smaller title */
    }

    /*.connexionPage form {*/
    /*    padding: 1.5rem;*/
    /*    width: 90%;*/
    /*}*/

    /*.connexionPage .center-input {*/
    /*    width: 100%;*/
    /*}*/

    /*#button_connexion {*/
    /*    width: 70%;*/
    /*    font-size: 1.1rem;*/
    /*}*/
    
    
    
    
/* ###############################################################################*/
/*                              Actuality Page                                    */
/* ###############################################################################*/

    .actualityPage {
        margin: 1em;
        margin-top: 2em;
    }

    .actualityBox {
        flex-direction: column;
        align-items: center;
        text-align: left;
        padding: 1em;
    }
    
    .actualityBox:first-of-type {
        margin-top: 20vh;
    }

    .actualityContent {
        max-width: 100%;
        margin-bottom: 1em;
    }

    .actualityTitle {
        font-size: 2em;
    }

    .actualityDescription {
        font-size: 1em;
    }

    .actualityImage {
        max-width: 80%;
        margin-bottom: 1em;
    }

    .actualityImage img {
        width: 100%;
    }



/* ###############################################################################*/
/*                              Information Page                                  */
/* ###############################################################################*/
    
    .informationPage .globalContainer {
        flex-direction: column;
        align-items: center;
        width: 95vw;
        margin-top: 30vh;
    }

    .informationPage .topContainer {
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin-bottom: 2vh;
    }

    .informationPage .informationContainer {
        width: 85%;
        height: auto;
        flex-direction: row;
        align-items: center;
        padding: 2vh 0;
        margin-bottom: 5vh;
    }

    .informationPage .informationContainer img {
        width: 22vw;
        height: auto;
        margin-right: 3vw;
        margin-left: 3vw;
    }

    .informationPage .informationContainer h1 {
        font-size: 6vw;
        margin: 1vh 0;
    }

    .informationPage .bottomContainer {
        width: 100%;
        padding: 2vh;
    }

    .informationPage .bottomContainer h1 {
        font-size: 5vw;
    }

    .informationPage .infoSection {
        flex-direction: column;
        align-items: center;
    }

    .informationPage .infoBlock {
        width: 90%;
        margin-bottom: 2vh;
    }

    .informationPage .infoBlock h2 {
        font-size: 4vw;
    }

    .informationPage .infoBlock p {
        font-size: 3vw;
    }

    
/* ###############################################################################*/
/*                              Member Office Page                                */
/* ###############################################################################*/
    
    body.member-office-page {
        overflow-y: auto; /* Activer la barre de défilement verticale */
        overflow-x: hidden; /* Désactiver la barre de défilement horizontale */
    }
    .memberOfficePage {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 27vh;
        max-height: 85vh;
        height: auto; /* Ajustement de la hauteur automatique pour le contenu */
        overflow-y: hidden;
        overflow-x: hidden;
    }

    .memberOfficePage .logo {
        width: 30vw;
        margin-bottom: 3vh;
    }

    .memberEntry {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 90vw;
        margin-bottom: 5vh;
        background-color: #222;
        padding: 1em;
        border-radius: 0.5em;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    }

    .memberImagePreview {
        width: 25%;
        margin-right: 2vw;
        display: flex;
        justify-content: center;
        margin-top: 1.5vh;
        margin-bottom: 1.5vh;
    }

    .memberImagePreview img {
        width: 100%;
        border-radius: 0.5em;
    }

    .memberDetails {
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: left;
        width: 65%; /* Ajuster en fonction de l'espace disponible */
    }

    .memberDetails h3 {
        font-size: 5vw !important;
        margin-bottom: 1vh !important;
    }

    .memberDetails h4 {
        font-size: 4vw !important;
        margin-bottom: 2vh !important;
    }

    .memberDetails p {
        font-size: 3.5vw !important;
    }
    
    
/* ###############################################################################*/
/*                              Ranking Page                                      */
/* ###############################################################################*/


    .mainRankingPage {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding-bottom: 5vh;
        overflow-y: auto;
        overflow-x: hidden;
        height: 100vh;
        width: 100vw;
    }
    .mainRankingPage .logo {
        width: 25vw;
        margin-bottom: 2vh;
    }

    .rankingTableContainer {
        width: 85vw;
        padding: 2vh 2vw;
        border: none;
        margin-top: 25vh !important;
        margin-bottom: 4vh !important;
    }

    .containerDate {
        text-align: center;
        width: 100%;
        margin-bottom: 2vh;
        padding-bottom: 1vh;
        border-bottom: 1px solid #ddd;
    }

    .containerDate .dateText {
        color: white;
        font-size: 4vw;
    }

    .rankingRow {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1vh 2vw;
        border-bottom: 1px solid #ddd;
    }
    
    .rankingPosition {
        font-size: 2.5vw;
        font-weight: bold;
        color: white;
    }

    .rankingName {
        font-size: 3vw;
        color: white;
        text-align: left;
        margin-left: 2vw;
    }

    .containerBoxRankings {
        display: flex;
        flex-direction: column;
        gap: 2vh;
        width: 85vw;
        margin-top: 65vh !important;
        margin-left: auto;
        margin-right: auto;
    }

    .containerBoxRankings div {
        background-color: #2C2C2C;
        border-radius: 1em;
        padding: 2vh 2vw;
        width: 100%;
        text-align: center;
    }

    .containerBoxRankings span {
        font-size: 4vw !important;
        color: white;
        font-weight: bold;
    }
    .historyAllRankingPage {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 5vh 5vw;
        height: auto;
        overflow-y: auto;
    }

    .historyAllRankingPage .logo {
        width: 30vw;
        margin-bottom: 5vh;
    }

    .historyAllRankingPage .containerBoxRankings {
        width: 100%;
        /*margin-top: 20vh;*/
        margin-bottom: 5vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2vh;
    }

    .historyAllRankingPage .containerBoxRankings div {
        width: 90%;
        padding: 3vh 3vw;
        background-color: #2C2C2C;
        border-radius: 1em;
        text-align: center;
        cursor: pointer;
        transition: background-color 0.3s;
    }

    .historyAllRankingPage .annualRankingText,
    .historyAllRankingPage .quarterlyRankingText,
    .historyAllRankingPage .podiumRankingText,
    .historyAllRankingPage .killerRankingText {
        font-size: 4vw;
        color: white;
        font-weight: bold;
    }

/* ###############################################################################*/
/*                              Annual Ranking Page                               */
/* ###############################################################################*/
    .annualRankingPage {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 5vh 5vw;
        height: auto;
        overflow-y: auto;
    }

    .annualRankingPage .logo {
        width: 30vw;
        margin-bottom: 5vh;
    }

    .annualRankingPage table {
        width: 80%;
        margin-top: 10vh;
        margin-bottom: 15vh;
        border-collapse: collapse;
    }

    .annualRankingPage th,
    .annualRankingPage td {
        padding: 2vw 2vw;
        font-size: 3.5vw;
    }

    .annualRankingPage th {
        background-color: #4CAF50;
    }

    .annualRankingPage td {
        background-color: #FFFFFF;
    }

    .annualRankingPage tr:nth-child(even) td {
        background-color: #d8e4bc;
    }



/* ###############################################################################*/
/*                              Quarterly Ranking Page                            */
/* ###############################################################################*/
    .quarterlyRankingPage {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 5vh 5vw;
        height: auto;
        overflow-y: auto;
    }

    .quarterlyRankingPage .logo {
        width: 30vw;
        margin-bottom: 5vh;
    }

    .quarterlyRankingPage table {
        width: 80%;
        margin-top: 10vh;
        margin-bottom: 15vh;
        border-collapse: collapse;
    }

    .quarterlyRankingPage th,
    .quarterlyRankingPage td {
        padding: 2vw 2vw;
        text-align: left;
        font-size: 3.5vw;
    }

    .quarterlyRankingPage th {
        background-color: #4CAF50;
    }

    .quarterlyRankingPage td {
        background-color: #FFFFFF;
    }

    .quarterlyRankingPage tr:nth-child(even) td {
        background-color: #d8e4bc;
    }



/* ###############################################################################*/
/*                              Podium Ranking Page                               */
/* ###############################################################################*/
.podiumRankingPage {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 5vh 5vw;
        height: auto;
        overflow-y: auto;
    }

    .podiumRankingPage .logo {
        width: 30vw;
        margin-bottom: 5vh;
    }

    .podiumRankingPage table {
        width: 80%;
        margin-top: 10vh;
        margin-bottom: 15vh;
        border-collapse: collapse;
    }

    .podiumRankingPage th,
    .podiumRankingPage td {
        padding: 2vw 2vw;
        text-align: left;
        font-size: 3.5vw;
    }

    .podiumRankingPage th {
        background-color: #4CAF50;
    }

    .podiumRankingPage td {
        background-color: #FFFFFF;
    }

    .podiumRankingPage tr:nth-child(even) td {
        background-color: #d8e4bc;
    }

/* ###############################################################################*/
/*                              Killer Ranking Page                               */
/* ###############################################################################*/
    
    .killerRankingPage {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 5vh 5vw;
        height: auto;
        overflow-y: auto;
    }

    .killerRankingPage .logo {
        width: 30vw;
        margin-bottom: 5vh;
    }

    .killerRankingPage table {
        width: 80%;
        margin-top: 10vh;
        margin-bottom: 15vh;
        border-collapse: collapse;
    }

    .killerRankingPage th,
    .killerRankingPage td {
        padding: 2vw 2vw;
        text-align: left;
        font-size: 3.5vw;
    }

    .killerRankingPage th {
        background-color: #4CAF50;
    }

    .killerRankingPage td {
        background-color: #FFFFFF;
    }

    .killerRankingPage tr:nth-child(even) td {
        background-color: #d8e4bc;
    }
/* ###############################################################################*/
/*                              Historical Week Ranking Page                      */
/* ###############################################################################*/
.historyPastWeeksPage .listWeekButton {
    margin-top: 30vh;
}
    
/* ###############################################################################*/
/*                              History All Ranking Page                          */
/* ###############################################################################*/
    .historyPage {
        width: 85%; /* Augmenter la largeur pour remplir plus d'espace sur l'écran */
        margin-bottom: 10vh; /* Ajouter de l'espace en bas pour une meilleure séparation avec le contenu suivant */
    }

    .historyPage .detailsButton {
        font-size: 4vw; /* Augmenter la taille de la police pour être lisible sur les petits écrans */
        padding: 3vw; /* Ajouter plus de padding pour faciliter les clics sur les petits écrans */
        text-align: center; /* Centrer le texte pour un look plus équilibré sur mobile */
        border-radius: 1em; /* Arrondir davantage les coins pour une apparence plus moderne */
        margin-bottom: 2vh;
    }


/* ###############################################################################*/
/*                              Week Ranking Details Page                         */
/* ###############################################################################*/
    .pageWeekRankingDetails {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 5vh 5vw;
        height: auto;
        overflow-y: auto;
    }

    .pageWeekRankingDetails .logo {
        width: 30vw;
        margin-bottom: 5vh;
    }

    .pageWeekRankingDetails table {
        width: 80%;
        margin-top: 10vh;
        margin-bottom: 15vh;
        border-collapse: collapse;
    }

    .pageWeekRankingDetails th,
    .pageWeekRankingDetails td {
        padding: 2vw 2vw;
        text-align: left;
        font-size: 3.5vw;
    }

    .pageWeekRankingDetails th {
        background-color: #4CAF50;
    }

    .pageWeekRankingDetails td {
        background-color: #FFFFFF;
    }

    .pageWeekRankingDetails tr:nth-child(even) td {
        background-color: #d8e4bc;
    }
    
    
/* ###############################################################################*/
/*                              Weekly Ranking Page                               */
/* ###############################################################################*/
    .weeklyRankingPage {
        display: flex;
        /*flex-direction: row;*/
        align-items: center;
        padding: 5vh 5vw;
        height: auto;
        overflow-y: auto;
    }

    .weeklyRankingPage .logo {
        width: 30vw;
        margin-bottom: 5vh;
    }

    .weeklyRankingPage table {
        width: 80%;
        margin-top: 10vh;
        margin-bottom: 15vh;
        border-collapse: collapse;
    }

    .weeklyRankingPage th,
    .weeklyRankingPage td {
        padding: 2vw 2vw;
        text-align: left;
        font-size: 3.5vw;
    }

    .weeklyRankingPage th {
        background-color: #4CAF50;
    }

    .weeklyRankingPage td {
        background-color: #FFFFFF;
    }

    .weeklyRankingPage tr:nth-child(even) td {
        background-color: #d8e4bc;
    }
    .weeklyRankingPage .ranking-Title{
        font-size: 4.5vw;
        margin-top: 60vh;
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
/* ###############################################################################*/
/*                              Main Page ADMIN                                   */
/* ###############################################################################*/ 
    .defaultAdminPage {
        align-items: start !important;
    }

    .centered-title-text {
        font-size: 8vw; /* Augmente la taille de la police pour une meilleure lisibilité */
        margin-top: 20vh; /* Ajoute de l'espace pour éviter que le texte ne chevauche le logo */
    }

    .logoPHP74 {
        width: 25vw; /* Agrandit le logo pour qu'il soit plus visible sur les petits écrans */
        top: 2em; /* Ajuste la position pour qu'elle soit plus adaptée aux petits écrans */
        right: 2em; /* Ajuste la position pour qu'elle soit plus adaptée aux petits écrans */
    }
    
    .defaultAdminPage .formContainer{
        margin-top: 20vh;
    }
    .defaultAdminPage .formContainer .adminH2{
        font-size: 3.5vh;
    }
    
    .defaultAdminPage .historyGamesContainer{
        margin-top: 0vh;
    }
    
    .defaultAdminPage .historyGamesContainer .historyGamesList{
        margin-top: 0vh;
    }
    
    .defaultAdminRankingPage .historyAllRankingPage {
        margin-top: 10vh !important;
    }
    
    
    .defaultAdminRankingPage .annualRankingPage
    .defaultAdminRankingPage .annualRankingPage,
    .defaultAdminRankingPage .podiumRankingPage,
    .defaultAdminRankingPage .quarterlyRankingPage,
    .defaultAdminRankingPage .killerRankingPage,
    .defaultAdminRankingPage .historyAllRankingPage{
        margin-top: 0vh;
        z-index: 10;
    }
    
    .defaultAdminRankingPage .annualRankingPage th,
    .defaultAdminRankingPage .quarterlyRankingPage th,
    .defaultAdminRankingPage .killerRankingPage th,
    .defaultAdminRankingPage .historyAllRankingPage th,
    .defaultAdminRankingPage .annualRankingPage td,
    .defaultAdminRankingPage .quarterlyRankingPage td,
    .defaultAdminRankingPage .killerRankingPage td,
    .defaultAdminRankingPage .historyAllRankingPage th {
        font-size: 5vw;
    }
    
    
    .defaultAdminPage .adminPlayersContainer{
        width: 90% !important;
        margin-top: 10vh;
    }
    .defaultAdminPage .playerListContainer {
        margin-top: 10vh;
    }
    .defaultAdminPage .playerListTitle{
        margin-left: 5vw;
    }
    .defaultAdminPage .playerList{
        margin-bottom: 5vh;
        margin-left: 5vw;
    }
    .defaultAdminPage .playerList p{
        font-size: 3vw;
    }
    .defaultAdminPage .weekAdminRanking td{
        padding: 5px;
    }
    
    
    .defaultAdminPage .changeActualityAdminPage #inputTitle{
        width: 70% !important;
    }
    .deleteButton{
        padding: 0.7vh 1.1vw;
    }
    
    .playerSubPage {
        padding: 5px;
    }
    
    .playerSubPage td, .playerSubPage th {
        font-size: 3vw;
        padding: 1px;
    }
    .playerSubPage{
        flex-direction: row;
    }
    .defaultAdminRankingPage .historyAllRankingPage .containerBoxRankings {
        padding-top: 0vh;
    }
    .weekAdminRanking {
        margin-top: 15vh;
        width: 90vw;
    }
    .defaultAdminRankingPage .pageWeekRankingDetails table{
        margin-top: 5vh;
    }
    .defaultAdminRankingPage .quarterlyRankingPage table{
        margin-top: 5vh;
    }
    .defaultAdminRankingPage .annualRankingPage table{
        margin-top: 5vh;
    }
    .defaultAdminRankingPage .killerRankingPage table{
        margin-top: 5vh;
    }
    .defaultAdminRankingPage .podiumRankingPage table {
        margin-top: 5vh;
        
    }
    .defaultAdminRankingPage .historyAllRankingPage {
        margin-top : 20vh;
    }
    .defaultAdminRankingPage .containerBoxRankings{
        margin-top: 13vh !important;
    }
    .changeOfficeMemberAdminPage .formSection {
        width: 100%;
    }
}















/* Styles pour les écrans de largeur inférieure à 480px (mobiles) */
@media screen and (max-width: 480px) {
    
/* ###############################################################################*/
/*                              Main Page Mobile Version                          */
/* ###############################################################################*/ 
    header {
        font-size: 3.5vw;
    }

    header h2 {
        font-size: 5vw;
    }

    .logo {
        width: 30vw;
        top: 2vh;
        right: 2vw;
    }
    
    .mainPage .mainPageTitle {
        font-size: 15vw;
    }

    .rankingTableContainer .containerDate .dateText {
        font-size: 5vw;
    }

    .rankingRow {
        padding: 0.5em;
    }

    .rankingPosition {
        font-size: 5vw;
    }

    .rankingName {
        font-size: 5vw;
    }

    .containerBoxRankings .annualRankingText,
    .containerBoxRankings .quarterlyRankingText,
    .containerBoxRankings .podiumRankingText,
    .containerBoxRankings .weeklyRankingText,
    .containerBoxRankings .killerRankingText,
    .containerBoxRankings .historyPastWeeksText,
    .containerBoxRankings .historyAllRankingText {
        font-size: 5vw;
    }
    
    
/* ###############################################################################*/
/*                              Login Page                                        */
/* ###############################################################################*/
    
    .connexionPage .mainPageTitle {
        font-size: 35px; /* Even smaller title */
        margin-top: 18vh;
    }

    /*.connexionPage form {*/
    /*    padding: 1rem; */
    /*    width: 100%;*/
    /*}*/

    /*.connexionPage .center-input {*/
    /*    width: 100%;*/
    /*    padding: 0.7rem;*/
    /*}*/

    #button_connexion {
        width: 60%;
    }
/* ###############################################################################*/
/*                              Actuality Page                                    */
/* ###############################################################################*/

    .actualityPage {
        margin: 0.5em;
        margin-top: 1em;
    }

    .actualityBox {
        flex-direction: column;
        align-items: center;
        text-align: left;
        padding: 0.5em;
    }
    
    .actualityBox:first-of-type {
        margin-top: 25vh;
    }

    .actualityContent {
        max-width: 100%;
        margin-bottom: 1em;
    }

    .actualityTitle {
        font-size: 1.5em;
    }

    .actualityDescription {
        font-size: 0.9em;
    }

    .actualityImage {
        max-width: 100%;
        margin-bottom: 1em;
    }

    .actualityImage img {
        width: 100%;
    }



    
/* ###############################################################################*/
/*                              Information Page                                  */
/* ###############################################################################*/
    
    .informationPage .globalContainer {
        flex-direction: column;
        align-items: center;
        width: 95vw;
        margin-top: 22vh;
    }

    .informationPage .topContainer {
        flex-direction: column;
        width: 85%;
        margin-bottom: 2vh;
    }

    .informationPage .informationContainer {
        width: 90%;
        height: auto;
        flex-direction: row;
        align-items: center;
        padding: 2vh 0;
        margin-bottom: 5vh;
    }

    .informationPage .informationContainer img {
        width: 22vw;
        height: auto;
        margin-right: 3vw;
        margin-left: 3vw;
    }

    .informationPage .informationContainer h1 {
        font-size: 6vw;
        margin: 1vh 0;
    }

    .informationPage .bottomContainer {
        width: 100%;
        padding: 2vh;
    }

    .informationPage .bottomContainer h1 {
        font-size: 6vw;
    }

    .informationPage .infoSection {
        flex-direction: column;
        align-items: center;
    }

    .informationPage .infoBlock {
        width: 90%;
        margin-bottom: 2vh;
    }

    .informationPage .infoBlock h2 {
        font-size: 5vw;
    }

    .informationPage .infoBlock p {
        font-size: 4vw;
    }

    
/* ###############################################################################*/
/*                              Member Office Page                                */
/* ###############################################################################*/
    body.member-office-page {
        overflow-y: auto; /* Activer la barre de défilement verticale */
        overflow-x: hidden; /* Désactiver la barre de défilement horizontale */
    }
    .memberOfficePage {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 25vh; /* Ajuster la marge supérieure pour ne pas chevaucher le header */
        margin-top : 0vh;
        /*padding: 2vh 4vw;*/
        max-height: 100vh; /* S'assurer que le contenu est visible sans coupure */
        overflow-y: auto;
        overflow-x: hidden;
    }

    .memberOfficePage .logo {
        width: 50vw;
        margin-bottom: 3vh;
    }

    .memberEntry {
        display: flex;
        flex-direction: column; /* Passer en disposition colonne pour une meilleure lisibilité */
        align-items: center;
        width: 90vw;
        margin-bottom: 4vh;
        background-color: #222;
        padding: 1.5em;
        border-radius: 0.5em;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    }

    .memberImagePreview {
        width: 40%; /* Taille augmentée pour les images sur mobile */
        margin-bottom: 2vh;
        display: flex;
        justify-content: center;
    }

    .memberImagePreview img {
        width: 100%;
        border-radius: 0.5em;
    }

    .memberDetails {
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center; /* Centrer le texte pour une meilleure présentation sur mobile */
        width: 100%; /* Prendre toute la largeur disponible */
    }

    .memberDetails h3 {
        font-size: 6vw; /* Taille du texte augmentée pour mobile */
        margin-bottom: 1.5vh;
    }

    .memberDetails h4 {
        font-size: 5vw; /* Taille du texte augmentée pour mobile */
        margin-bottom: 2vh;
    }

    .memberDetails p {
        font-size: 4.5vw; /* Taille du texte augmentée pour mobile */
    }
    
    
    .mainRankingPage .containerBoxRankings{
        margin-top: 30vh !important;
    }
/* ###############################################################################*/
/*                              Ranking Page                                      */
/* ###############################################################################*/


    .mainRankingPage {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-bottom: 5vh;
        overflow-y: auto;
        overflow-x: hidden;
        height: 100vh;
        width: 100vw;
    }

    .mainRankingPage .logo {
        width: 40vw;
        margin-bottom: 2vh;
    }

    .rankingTableContainer {
        padding: 2vh 2vw;
        border: none;
        margin-top: 22vh !important;
        margin-bottom: 3vh !important;
    }

    .containerDate {
        text-align: center;
        width: 100%;
        margin-bottom: 2vh;
        padding-bottom: 1vh;
        border-bottom: 1px solid #ddd;
    }

    .containerDate .dateText {
        color: white;
        font-size: 4.5vw;
    }

    .rankingRow {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1vh 2vw;
        border-bottom: 1px solid #ddd;
    }

    .rankingPosition {
        font-size: 4vw;
        font-weight: bold;
        color: white;
    }

    .rankingName {
        font-size: 4.5vw;
        color: white;
        text-align: left;
        margin-left: 2vw;
    }

    .containerBoxRankings {
        display: flex;
        flex-direction: column;
        gap: 2vh;
        width: 90vw;
        margin-top: 5vh;
    }

    .containerBoxRankings div {
        background-color: #2C2C2C;
        border-radius: 1em;
        padding: 2vh 2vw;
        width: 100%;
        text-align: center;
    }

    .containerBoxRankings span {
        font-size: 5vw !important;
        color: white;
        font-weight: bold;
    }

    .historyAllRankingPage {
        padding: 2vh 1vw;
    }

    .historyAllRankingPage .logo {
        width: 45vw; /* Réduit la taille du logo pour les très petits écrans */
        margin-bottom: 3vh;
    }

    .historyAllRankingPage .containerBoxRankings {
        width: 100%;
    }

    .historyAllRankingPage .containerBoxRankings div {
        width: 85%;
        padding: 2vh 2vw; /* Ajoute plus d'espace à l'intérieur des éléments pour qu'ils soient faciles à cliquer */
        background-color: #2C2C2C;
        border-radius: 1.5em; /* Légèrement plus arrondi pour un meilleur look sur les petits écrans */
        text-align: center;
    }

    .historyAllRankingPage .annualRankingText,
    .historyAllRankingPage .quarterlyRankingText,
    .historyAllRankingPage .podiumRankingText,
    .historyAllRankingPage .killerRankingText {
        font-size: 6vw; /* Augmente davantage la taille de la police pour une meilleure lisibilité */
        padding: 0 2vw; /* Ajoute un peu de marge intérieure pour éviter que le texte ne touche les bords */
    }

/* ###############################################################################*/
/*                              Annual Ranking Page                               */
/* ###############################################################################*/
    .annualRankingPage {
        padding: 2vh 1vw;
    }

    .annualRankingPage .logo {
        width: 40vw; /* Réduit la taille du logo pour les très petits écrans */
        margin-bottom: 3vh;
    }

    .annualRankingPage th,
    .annualRankingPage td {
        font-size: 3.5vw;
    }

    .annualRankingPage th {
        font-size: 3.5vw; /* Agrandir les en-têtes pour plus de lisibilité */
    }

    
/* ###############################################################################*/
/*                              Quarterly Ranking Page                            */
/* ###############################################################################*/
    .quarterlyRankingPage {
        padding: 2vh 1vw;
    }

    .quarterlyRankingPage .logo {
        width: 40vw; /* Réduit la taille du logo pour les très petits écrans */
        margin-bottom: 3vh;
    }

    .quarterlyRankingPage th,
    .quarterlyRankingPage td {
        font-size: 3.5vw; /* Agrandir la police pour être lisible sur de petits écrans */
        padding: 3vw 2vw;
    }

    .quarterlyRankingPage th {
        font-size: 3.5vw; /* Agrandir les en-têtes pour plus de lisibilité */
    }
    
    
    
/* ###############################################################################*/
/*                              Podium Ranking Page                               */
/* ###############################################################################*/
    .podiumRankingPage {
        padding: 2vh 1vw;
    }

    .podiumRankingPage .logo {
        width: 40vw; /* Réduit la taille du logo pour les très petits écrans */
        margin-bottom: 3vh;
    }

    .podiumRankingPage th,
    .podiumRankingPage td {
        font-size: 3.5vw; /* Agrandir la police pour être lisible sur de petits écrans */
        padding: 3vw 2vw;
    }

    .podiumRankingPage th {
        font-size: 3.5vw; /* Agrandir les en-têtes pour plus de lisibilité */
    }
    
/* ###############################################################################*/
/*                              Killer Ranking Page                               */
/* ###############################################################################*/
    
    .killerRankingPage {
        padding: 2vh 1vw;
    }

    .killerRankingPage .logo {
        width: 40vw; /* Réduit la taille du logo pour les très petits écrans */
        margin-bottom: 3vh;
    }

    .killerRankingPage th,
    .killerRankingPage td {
        font-size: 3.5vw; /* Agrandir la police pour être lisible sur de petits écrans */
        padding: 3vw 2vw;
    }

    .killerRankingPage th {
        font-size: 3.5vw; /* Agrandir les en-têtes pour plus de lisibilité */
    }
    
    
/* ###############################################################################*/
/*                              Historical Week Ranking Page                      */
/* ###############################################################################*/

.historyPastWeeksPage .weekButton {
    margin-bottom: 2.5vw !important;
}

/* ###############################################################################*/
/*                              History All Ranking Page                          */
/* ###############################################################################*/
    .historyPage {
        width: 95%; /* Presque pleine largeur pour maximiser l'espace utilisable */
        margin-bottom: 15vh; /* Augmenter la marge inférieure pour éviter que le contenu ne soit trop serré */
    }

    .historyPage .detailsButton {
        font-size: 5vw; /* Agrandir encore la taille de la police pour la lisibilité sur les très petits écrans */
        padding: 4vw; /* Plus de padding pour une meilleure interaction tactile */
        text-align: center; /* Centrer le texte pour une meilleure lisibilité et un aspect esthétique sur mobile */
        border-radius: 1.5em; /* Un arrondi plus marqué pour correspondre à la tendance mobile */
        margin-top: 3vh;
    }
    
    
/* ###############################################################################*/
/*                              Week Ranking Details Page                         */
/* ###############################################################################*/
    .pageWeekRankingDetails {
        padding: 2vh 1vw;
    }

    .pageWeekRankingDetails .logo {
        width: 40vw;
        margin-bottom: 3vh;
    }
    
    .pageWeekRankingDetails th,
    .pageWeekRankingDetails td {
        font-size: 3.5vw;
        padding: 3vw 2vw;
    }

    .pageWeekRankingDetails th {
        font-size: 3.5vw;
    }
    
    
/* ###############################################################################*/
/*                              Weekly Ranking Page                               */
/* ###############################################################################*/
    .pageWeekRankingDetails table{
        flex-direction: row;
        margin-top: 5vh;
    }
    .killerRankingPage table{
        flex-direction: row;
        margin-top: 5vh;
    }
    .podiumRankingPage table{
        flex-direction: row;
        margin-top: 5vh;
    }
    .annualRankingPage table{
        flex-direction: row;
        margin-top: 5vh;
    }
    
    .quarterlyRankingPage table{
        flex-direction: row;
        margin-top: 5vh;
    }
    
    .weeklyRankingPage table{
        flex-direction: row;
        margin-top: 5vh;
    }
    .pageWeekRankingDetails table{
        flex-direction: row;
        margin-top: 5vh;
    }
    .weeklyRankingPage {
        padding: 2vh 1vw;
    }

    .weeklyRankingPage .logo {
        width: 40vw; /* Réduit la taille du logo pour les très petits écrans */
        margin-bottom: 3vh;
    }

    .weeklyRankingPage th,
    .weeklyRankingPage td {
        font-size: 3.5vw; /* Agrandir la police pour être lisible sur de petits écrans */
        padding: 3vw 2vw;
    }

    .weeklyRankingPage th {
        font-size: 3.5vw; /* Agrandir les en-têtes pour plus de lisibilité */
    }
    
    .ranking-Title{
        font-size: 5vw !important;
        margin-top: 30vh !important;
    }
    
    .weeklyRankingPage .ranking-Title{
        margin-top: 60vh !important;
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
/* ###############################################################################*/
/*                              Main Page ADMIN                                   */
/* ###############################################################################*/ 
    .defaultAdminPage {
        align-items: start !important;
    }

    .centered-title-text {
        font-size: 10vw; /* Agrandit la police pour garantir la lisibilité sur de très petits écrans */
        margin-top: 25vh; /* Ajoute de l'espace supplémentaire pour éviter les chevauchements */
    }

    .logoPHP74 {
        width: 35vw; /* Agrandit davantage le logo pour qu'il soit bien visible */
        top: 2em; /* Positionne le logo de manière appropriée sur de très petits écrans */
        right: 2em; /* Positionne le logo de manière appropriée sur de très petits écrans */
    }
    .changeActualityAdminPage{
        max-height: 100vh;
        margin-top: 15vh;
    }
    .changeActualityAdminPage #inputTitle{
        width: 70% !important;
    }
    .deleteButton{
        padding: 1vh 2.5vw !important;
    }
    
    .defaultAdminPage .adminForm{
        margin-top: 11vh;
    }
    
    .playerListPage .playerListContainer{
        margin-top: 0vh;
    }
    .playerListPage .playerListTitle{
        margin-left: 10vw;
    }
    .playerListPage .playerList{
        margin-left: 10vw;
    }
    .playerListPage .playerList p{
        font-size: 5vw;
    }
    
    .defaultAdminPage .weekAdminRanking{
        max-height: 80vh;
        
    }
    
    .playerSubPage th, .playerSubPage td {
        font-size: 3vw !important;
        padding: 1px;
    }
    /*.changePlayerSubAdmin table{*/
    /*    margin-left: 5vw;*/
    /*}*/
    .dateStartSub{
        color: white;
        background-color: #539c56;
    }
    
    
    .defaultAdminRankingPage .historyAllRankingPage .containerBoxRankings {
        padding-top: 0vh;
    }
    .weekAdminRanking {
        width: 95vw;
    }
    .defaultAdminRankingPage .containerBoxRankings{
        margin-top: 13vh !important;
    }
    .changeOfficeMemberAdminPage .memberEntry{
        width: 80vw;
        flex-direction: row;
        display: initial;
        
    }
    .changeOfficeMemberAdminPage textarea{
        width: 80%;
        
    }
    
    
    /* ###############################################################################*/
    /*                              Create Game Admin                                 */
    /* ###############################################################################*/
    
    .createGamePage .centered-title-text{
        margin-top: 5vh;
    }
    .playerSubPage .table-container {
        max-height: 90vh; /* Limite la hauteur visible de la table à 80% de la hauteur de l'écran */
        margin-bottom: 0vh;
    }
    .playerSubPage table{
        margin-top: 18vh;
        width: 100%;
    }
    .playerSubPage #submitBtn {
        padding: 0.75rem 0.75rem; /* Espace intérieur du bouton pour le rendre plus grand */
        font-size: 0.75rem;
    }
    .admin-Ranking-Title {
        font-size: 5vw;
        color: #FFFFFF;
        margin-bottom: 1vh;
        margin-top: 5vh;
        text-align: center;
    }
}



@media screen and (min-width: 1920px) {
    .ranking-Title {
        margin-top: 20vh; /* Increase this value for ultra-wide screens */
    }
    .weeklyRankingPage .ranking-Title {
        margin-top: 45vh; /* Increase this value for ultra-wide screens */
    }
}










/* ############################################################################### */
/*                        Admin - Scoring Configs (Flex only)                       */
/* ############################################################################### */
.defaultAdminPage {
    overflow-y: auto;
    position: relative;
    z-index: 1;
    width: 100vw;
    height: 100vh;
    background-size: cover;
    background-image: url(../assets/images/background.png);
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
}
/* Container (dark card style) */
.defaultAdminPage .formContainer {
  width: 92vw;
  max-width: 980px;
  padding: 2.2rem 2rem;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.55);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  box-sizing: border-box;
}

/* Titles */
.defaultAdminPage .formContainer h2,
.defaultAdminPage .formContainer h3 {
  color: #fff;
  font-family: "ArchivoBlack", sans-serif;
  letter-spacing: 0.02em;
}

.defaultAdminPage .formContainer h3 {
  margin-top: 1.2rem;
  margin-bottom: 0.75rem;
}

.defaultAdminPage .formContainer label,
.defaultAdminPage .formContainer p,
.defaultAdminPage .formContainer em {
  color: #e6e6e6;
  font-family: "Archivo", sans-serif;
}

.defaultAdminPage .formContainer p { line-height: 1.4; }

.defaultAdminPage .formContainer hr {
  border: none;
  height: 1px;
  background: rgba(255, 255, 255, 0.14);
  margin: 1.25rem 0;
}

/* Inputs / select */
.defaultAdminPage .formContainer select,
.defaultAdminPage .formContainer input[type="text"],
.defaultAdminPage .formContainer input[type="number"],
.defaultAdminPage .formContainer input[type="date"] {
  background-color: #222;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  padding: 10px 12px;
  font-family: "Archivo", sans-serif;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.defaultAdminPage .formContainer select:focus,
.defaultAdminPage .formContainer input[type="text"]:focus,
.defaultAdminPage .formContainer input[type="number"]:focus,
.defaultAdminPage .formContainer input[type="date"]:focus {
  border-color: rgba(76, 175, 80, 0.75);
  box-shadow: 0 0 0 4px rgba(76, 175, 80, 0.18);
}

.defaultAdminPage .formContainer input[readonly] { opacity: 0.85; }

/* Buttons */
.defaultAdminPage .formContainer button {
  border: none;
  border-radius: 12px;
  padding: 10px 14px;
  font-family: "ArchivoBlack", sans-serif;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.defaultAdminPage .formContainer button[name="save_config"],
.defaultAdminPage .formContainer button[name="save_percentages"],
.defaultAdminPage .formContainer form[method="get"] button[type="submit"] {
  background-color: #4CAF50;
  color: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

.defaultAdminPage .formContainer button[name="save_config"]:hover,
.defaultAdminPage .formContainer button[name="save_percentages"]:hover,
.defaultAdminPage .formContainer form[method="get"] button[type="submit"]:hover {
  background-color: #367c39;
  transform: translateY(-1px);
}

.defaultAdminPage .formContainer button[name="delete_config"] {
  background-color: #b00020 !important;
  color: #fff;
}

.defaultAdminPage .formContainer button[name="delete_config"]:hover {
  background-color: #7d0016 !important;
  transform: translateY(-1px);
}

/* GET form (selector + sim) - Flex layout */
.defaultAdminPage .formContainer form[method="get"] {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  align-items: flex-end;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  padding: 14px;
  box-sizing: border-box;
}

/* Make controls flexible */
.defaultAdminPage .formContainer form[method="get"] label {
  display: inline-flex;
  align-items: center;
  margin-right: 4px;
}

.defaultAdminPage .formContainer form[method="get"] select,
.defaultAdminPage .formContainer form[method="get"] input[type="number"] {
  flex: 1 1 220px; /* grow, shrink, base width */
  min-width: 180px;
}

.defaultAdminPage .formContainer form[method="get"] button[type="submit"] {
  flex: 0 0 auto;
  padding: 12px 16px;
}

/* POST forms buttons full-width on small screens (handled by media query below) */
.defaultAdminPage .formContainer form[method="post"] {
  width: 100%;
}

/* Tables: readable + mobile scroll */
.defaultAdminPage .formContainer table {
  width: 100%;
  border-collapse: collapse;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  overflow: hidden;

  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.defaultAdminPage .formContainer thead,
.defaultAdminPage .formContainer tbody,
.defaultAdminPage .formContainer tfoot {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.defaultAdminPage .formContainer th,
.defaultAdminPage .formContainer td {
  padding: 10px 12px;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  font-family: "Archivo", sans-serif;
  font-size: 0.95rem;
}

.defaultAdminPage .formContainer thead th {
  background-color: rgba(76, 175, 80, 0.18);
  font-family: "ArchivoBlack", sans-serif;
}

.defaultAdminPage .formContainer tbody tr:hover td {
  background-color: rgba(255, 255, 255, 0.03);
}

.defaultAdminPage .formContainer tfoot td {
  background-color: rgba(0, 0, 0, 0.30);
  font-family: "ArchivoBlack", sans-serif;
}

/* Inputs inside tables */
.defaultAdminPage .formContainer table input[type="text"],
.defaultAdminPage .formContainer table input[type="number"] {
  width: 100%;
  min-width: 120px;
  padding: 8px 10px;
  border-radius: 10px;
  box-sizing: border-box;
}

/* ############################################################################### */
/*                                     Mobile                                      */
/* ############################################################################### */
@media screen and (max-width: 768px) {
  .defaultAdminPage .formContainer {
    width: 94vw;
    padding: 1.1rem 1rem;
    border-radius: 14px;
  }

  /* Make GET form stack nicely */
  .defaultAdminPage .formContainer form[method="get"] {
    align-items: stretch;
  }

  .defaultAdminPage .formContainer form[method="get"] select,
  .defaultAdminPage .formContainer form[method="get"] input[type="number"],
  .defaultAdminPage .formContainer form[method="get"] button[type="submit"] {
    flex: 1 1 100%;
    width: 100%;
  }

  /* Prevent iOS zoom + better tap targets */
  .defaultAdminPage .formContainer select,
  .defaultAdminPage .formContainer input[type="text"],
  .defaultAdminPage .formContainer input[type="number"],
  .defaultAdminPage .formContainer input[type="date"] {
    padding: 12px 12px;
    border-radius: 12px;
    font-size: 16px;
  }

  .defaultAdminPage .formContainer th,
  .defaultAdminPage .formContainer td {
    font-size: 0.9rem;
    padding: 10px 10px;
  }

  .defaultAdminPage .formContainer form[method="post"] button {
    width: 100%;
  }
}

@media screen and (max-width: 420px) {
  .defaultAdminPage .formContainer {
    width: 96vw;
    padding: 1rem 0.9rem;
  }

  .defaultAdminPage .formContainer th,
  .defaultAdminPage .formContainer td {
    font-size: 0.85rem;
  }
}

.centered-title-text-scoring-page{
    font-size: 5rem;
}