/************************ ROOT *********************************/
:root {
    /* background page */
    --color1: #31393c;
    /* color write */
    --color2: #f4EBD6;
    /* color navbar & footer */
    --color3: #2176ff;
    /* card kata */
    --color4: #816c6c;
    --color5: #d6955b;
    /* btn-live */
    --color6: #fe3c3c;
    /* infos-card-result */
    --color7: #ECEBEB;
    /* btn-read-more */
    --color8: #33a1fd;
    --color9: #000000;
    /* grid result */
    --color10: #fdfc9f;
    --color11: #f9c4c4;
    --color12: #ee9e9e;
    --color13: #a5baa9;
    --color14: #dd5c5c;
    --color15: #86b68f;
}
/************************** BODY ********************************/
body {
    background-color: var(--color1);
    box-sizing: border-box;
    height: 100%;
    padding: 0;
    margin: 0;
    min-width: 500px;
}
/** avoir pourquoi le text décoration none ne fonctionne pas */
a {
    text-decoration: none;
}
.button{
    text-align: center;
    margin : 0.5rem;
}

.button-back{
    background-color: var(--color4);
    color: var(--color2);
    text-align: center;
    border: 1px solid var(--color2);
    border-radius: 0.5rem;
    padding-right: 2rem;
    padding-left: 2rem;
    font-size: large;
}
.button-back:hover{
    background-color : var(--color2);
    color: var(--color4) ;
    text-align: center;
    border: 1px solid var(--color4);
    border-radius: 0.5rem;
    padding-right: 2rem;
    padding-left: 2rem;
    font-size: large
}

/************************* HOME *********************************/
p, td {
    color:var(--color2);
    text-align: center;
}

h2 {
    color: var(--color2);
    text-align: center;
    margin: 2rem;
}

.text-kata-card {
    background-color: var(--color3);
    border-radius: 0rem 0rem 0.5rem 0.5rem
}

.kata-card-t2 {
    margin-top: 2rem;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

.title-kata-card {
    font-size: 1.5rem;
    
}
.home-text-1 {
    margin: 1rem;
}

.home-text-2 {
    margin-top: 10rem;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}
.logo-img-kata-card{
    border-radius : 0.5rem 0.5rem 0rem 0rem
}

.title-calendar{
    color: var(--color2);
    text-align: center; 
    margin: 2rem;
}

@media (min-width: 360px) {
    .img-calendar {
        width: 20rem;
        height: auto;
    }
}

@media (min-width: 420px) {
    .img-calendar {
        width: 20rem;
        height: auto;
    }
}

@media (min-width: 480px) {
    .img-calendar {
        width: 20rem;
        height: auto;
    }
}


@media (min-width: 576px) {
    .kata-card-t2 {
        margin-top: 0rem;
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }
    .img-calendar {
        width: 30rem;
        height: auto;
    }
}

@media (min-widh : 768px) {
    .kata-card-t2 {
        margin-top: 1rem;
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }
    .img-calendar {
        width: 50rem;
        height: auto;
    }
}

@media (min-width: 992px) {
    .kata-card-t2 {
        margin-top: 2rem;
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }
    .img-calendar {
        width: 50rem;
        height: auto;
    }
}

@media (min-width: 1200px) {
    .kata-card-t2 {
        margin-top: 2rem;
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }

    .img-calendar {
        width: 50rem;
        height: auto;
    }
}
@media (min-width: 1400px) {
    .kata-card-t2 {
        margin-top: 2rem;
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }

    .img-calendar {
        width: 50rem;
        height: auto;
    }
}

/************************* NAVBAR **************************/

/**** @media queries ***/
@media (min-width: 576px) {

    
    
}
nav {
    height: auto;
}
.logo-navbar {
    width: 3rem;
    height: auto;
    border-radius: 0.5rem;
}

.common-navbar {    
    background-color: var(--color3);
}
.title-navbar{
    color : var(--color2);
    margin: 0.5rem;
}

.competitor-navbar{
    background-color: var(--color4);
}

.name-competitor-navbar{
    background-color: var(--color4);
    color : var(--color2);
    margin-right: 2rem;
    margin-left: 2rem;
}




/* 
.div-title-navbar{
    background-color: var(--color2);
    /* color : var(--color4); 
} */
/* 
.div-title-navbar a {
    color : var(--color4);
} */

/************************** FOOTER ***************************/
footer {
    background-color:var(--color3);
    margin-bottom: -1rem;
    margin-top: auto;
}

.title-Footer-list {
    color: var(--color2);
}

.logo-social-media{
    border-radius: 1rem;
    width: 3rem;
    height: 3rem;
}

.logo-partner{
    border-radius: 10% 25%;
    width: 9rem;
    height: auto
}

.pateners{
    display: flex;
    justify-content: space-around;
    align-items: center;
}


/************************ COMING SOON ************************/

.coming-soon-card,
.coming-soon-card-2{ 
    background-color:var(--color4);
    color :var(--color2);
    display: flex;
    flex-direction: wrap;
    align-items: center;
    justify-content: space-around;
    border-radius: 1rem;
    padding: 0.5rem;
    font-size: large
}

.coming-soon-card-message{
    background-color:var(--color4);
    color :var(--color2);
    border-radius: 1rem;
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;    
    height: 100%;           
    text-align: center;    
}

.coming-soon-card-more-details{
    background-color:var(--color4);
    color :var(--color2);
    align-items: center;
    justify-content: space-around;
    border-radius: 1rem;
    padding: 0.5rem;
    font-size: large
}

.coming-soon-card:hover{ 
    background-color:var(--color2);
    display: flex;
    flex-direction: wrap;
    align-items: center;
    justify-content: space-around;
    border-radius: 1rem;
    padding: 0.5rem;
    font-size: large
}

.coming-soon-card:hover p{
    color : var(--color4);
} 
.img-card-coming-soon {
border-radius: 0.5rem;
}

#mapId {
    height: 200px;
    border: var(--color9) 1px solid;
}
/************************* RESULTS *****************************/
.img-card-result {
    border-radius: 5% 5% 0% 0%;
    text-align: center;
    max-width: 15rem;
    height: 20rem;
    position: relative; /* Assurez-vous que le conteneur est positionné relativement */
}

.img-waiting-loaded {
    position: relative;
    width: 100%;
    height: 20rem; /* Hauteur fixe souhaitée, ajustée pour correspondre à .img-card-result */

    
    max-width: 100%; /* Limite la largeur à 100% du conteneur parent */
    max-height: 20rem; 
    overflow: hidden;
    border-radius: 5% 5% 0% 0%;
    text-align: center;
}

.img-waiting-loaded img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; 
    transition: opacity 0.3s ease-in-out;
}

.short-title-card-result{
    background-color: var(--color9);
    font-size: large;
    max-width: 15rem;
    height: 5rem;
}

.short-title-card-result p{
    color : var(--color2);
    padding: 1rem;
    max-width: 15rem;
    text-align: center;

}

.long-title-card-result {
    margin-top: 2rem;
    max-width: 15rem;
}

.long-title-card-result p{
    color : var(--color6);
    max-width: 15rem;
}

.infos-card-result{
    background-color: var(--color7);
    border-radius: 0% 0% 5% 5%;
    max-width: 15rem;
}
.infos-card-result p{
    color : var(--color9);
    margin: 1rem;
    max-width: 15rem;
    
}

.button-read-more{
    background-color: var(--color8);
    color: var(--color2);
    text-align: center;
    border: 1px solid var(--color2);
    border-radius: 0.5rem;
    padding-right: 2rem;
    padding-left: 2rem;
    font-size: large
}

.button-read-more:hover{
    background-color : var(--color3);
    color: var(--color9);
    text-align: center;
    border: 1px solid var(--color3);
    border-radius: 0.5rem;
    padding-right: 2rem;
    padding-left: 2rem;
    font-size: large
}

.button-live{
    background-color: var(--color6);
    color: var(--color2);
    text-align: center;
    border: 1px solid var(--color6);
    border-radius: 0.5rem;
    padding-right: 2rem;
    padding-left: 2rem;
    font-size: large
}

.button-results{
    background-color: var(--color3);
    color: var(--color2);
    text-align: center;
    border: 1px solid var(--color3);
    border-radius: 0.5rem;
    padding-right: 2rem;
    padding-left: 2rem;
    font-size: large
}

.button-results:hover{
    background-color: var(--color8);
    color: var(--color2);
    text-align: center;
    border: 1px solid var(--color8);
    border-radius: 0.5rem;
    padding-right: 2rem;
    padding-left: 2rem;
    font-size: large
}
.hr-card-result{
    color : var(--color9);
    width: 75%;
}
.date-card-result{
    text-align: center;
    padding: 2rem;
    font-size: large;
    
}
.infos-table-result{
    background-color: var(--color4);
    color: var(--color2);
    text-align: center;
    border-radius: 1rem;
    padding: 1rem;
    margin: 1rem;
}
.infos-table-result h3 {
    color: var(--color2);
    font-size: bold;
}

.details-card-result{
    background-color: var(--color4);
    border-radius: 1rem;
    display: flex;
    margin: 0rem;
    padding-right: 1rem;
    padding-left: 1rem;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
}


/*************************  COMING SOON DETAILS *****************************/

.text-coming-soon-details-card {
    background-color: var(--color4);
    color: var(--color2);
    text-align: center;
    border-radius: 1rem;
    padding: 1rem;
}

.img-coming-soon-details{
    border-radius: 5%;
    text-align: center;
    width: 20rem;
    height: auto;
    margin: 1rem;
}


.details-card{
    display: flex;
    margin : 2rem;
    align-items: center;
    justify-content: space-around;
}
/******* media queries ***********/
/* la photo doit passer dessus les textes ddroite*/



/*************************  NEW LOGIN *****************************/


.button-login{
    background-color: var(--color3);
    color: var(--color2);
    text-align: center;
    border: 1px solid var(--color3);
    border-radius: 0.5rem;
    padding-right: 2rem;
    padding-left: 2rem;
    font-size: large
}

.login-form{
    text-align: center;
}

.login-label{
    background-color:var(--color4);
    color :var(--color2);
    text-align: center;
    align-items: center;
    justify-content: space-around;
    border-radius: 0.5rem 0.5rem 0rem 0rem;
    margin-top: 1rem;
    padding: 0.5rem;
    font-size: large;

}

.login-input{
    background-color:var(--color2);
    border-radius: 0rem 0rem 0.5rem 0.5rem ;
    color: var(--color9);
    margin-bottom: 1rem;

}


.img-login{
    text-align: center;
    width: 50%;
    height: auto;
    border-radius: 0.5rem;
}


/*************************  DASHBOARD REGULATIONS *****************************/

.all-regulation-cards{
    margin: 2rem;
}

.logo-regulations {
    width: 17rem;
    height: 17rem;
    border-radius: 5% 5% 0% 0%;
    border: solid black 1px;
}

.title-regulations{
    background-color: var(--color4);
    color: var(--color2);
    border-radius: 0rem 0rem 0.5rem 0.5rem ;
    border: black 1px solid;
    text-align: center;
    height: 3rem;
    padding: 0.5rem;
    margin-bottom: 2rem;

}

/*************************  EVALUATION SHEETS *****************************/

.show-pdf-sheet{
    position: relative;
    width:100%;
    margin:auto;
    padding-bottom: 75%; 
    height: 0;
    overflow: hidden;
    border:2px solid var(--color9);
}

.show-pdf-sheet iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

.choose-evaluation-sheets{
    display: flex;
    text-align: center;
    justify-content: space-around;
    margin: 2rem;
}

.button-select{
    background-color: var(--color3);
    color: var(--color2);
    text-align: center;
    border: 1px solid var(--color3);
    border-radius: 0.5rem;
    padding-right: 2rem;
    padding-left: 2rem;
    font-size: large
}

.button-select:hover{
    background-color: var(--color8);
    color: var(--color2);
    text-align: center;
    border: 1px solid var(--color8);
    border-radius: 0.5rem;
    padding-right: 2rem;
    padding-left: 2rem;
    font-size: large
}

.label-text{
    color : var(--color2)
}


/*************************  TIPS VIDEO *****************************/

.tv-video {
    border: var(--color9) 1px solid;
    width: 100%;
    height: auto;
}

.response-choice{
    color: var(--color2);
    margin : 2rem;
}


/*************************  PRIVACY POLICY *****************************/

.title-privacy{
    text-align: center;
    color: var(--color5);
    font-size: bold;
}


/*************************  COMPETITOR RESULTS *****************************/

.flag{
    width: 3rem;
    height: auto;
}

.th-grid-contest{
    color: var(--color2)
}

.sm{
    background-color:  var(--color10);
    color: var(--color9);
    text-align: center;
}

.mm{
    background-color:  var(--color11);
    color: var(--color9);
    text-align: center;
}

/* ici est-ce que l'on suit un dégré ou fait une cassre pour bien différencier les colonnes ? 
soit la var(--color12) pour le dégradé soit la var(--color13) pour la différenciation */
.lm{
    background-color:  var(--color13);
    color: var(--color9);
    text-align: center;
}

.ft{
    background-color:  var(--color14);
    color: var(--color9);
    text-align: center;
}

.fl-fm {
    background-color:  var(--color15);
    color: var(--color9);
    text-align: center;
}

.text-grid-contest{
    color: var(--color2);
    text-align: center;
    font-size: bold;
}

.competition-details-td{
    font-size: 12pt;
}