.select_league option {
  font-size: 24px;
}
.bottom-right-link {
    display: flex;
    justify-content: flex-end;
    margin-top: 1vh;
    margin-right: 1vw;
}

.vp-per-troops-link {
    //font-size: 3vmin;
    color: white; /* Texte en blanc */
    text-decoration: none;
    font-weight: bold;
    transition: opacity 0.3s ease;
}

.vp-per-troops-link:hover {
    opacity: 0.7; /* Effet au survol pour un léger changement */
    cursor: pointer;
}
.bottom-left-link {
    display: flex;
    justify-content: flex-start;
    margin-top: 1vh;
    margin-left: 1vw;
}

.bottom-left-link:hover {
    color: #ccc;
}

.card { /*OK*/
    background-color: #272728;
    box-sizing: border-box;
    width: 95%;
    min-width: 500px;
    margin-right: 0;
    margin-left: 0;
    margin-top: 2.5%;
    border-radius: 10px;
    position: relative;
    display: flex;
    flex-direction: column; /* Empile les enfants verticalement */
    height: 70vh; /* Hauteur de la carte */

    color: white;
    scroll-margin-top: 14vmin;
    transition: transform 0.6s; /* Animation douce */
}
@media (min-width: 1024px) {
    .card {
        width: 25%;
    }
}
.hidden {
    display: none;
}
.card.rotate {
    transform: rotateY(180deg);
}
.card .content_class_tips{
    transition: transform 0.6s; /* Animation douce */
    display: none;
}
.card.rotate .content_class_tips{
     display: block;
    transform: rotateY(180deg);
 }
.card.rotate .title_card{

    transform: rotateY(180deg);
}
.card.rotate .pub{
    transform: rotateY(180deg);
}
.card.rotate .content_card_calculator{
      display: none;
  }
.card .text-Tips {
    //font-size: 2vmin;
    //min-font-size: 45px;
    text-align: center;
    width: 95%;
    margin-left: 2.5%;
    margin-top: 2.5%;
}


.card .title_card { /*OK*/
    transition: transform 0.6s; /* Animation douce */
    min-height: 8em;
    background-size: cover;
    background-position: center;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-repeat: no-repeat;
    position: relative;
    color: black;
}

.card .title_card  h2 { /*OK*/
    //font-size: 3vmin;
    padding: 1%;
    border: 2px solid #000;
    display: inline-block;
    margin-top: 2%;
    margin-left: 2%;
    background-color: rgba(217, 217, 217, 0.5);
}

.card .title_no_screen{
    text-align: center;
    margin-top: 2%;
    background : transparent;
}
.card .title_no_screen h2{
    margin: 0;
    //font-size: 3vmin;
    background : transparent;
}

.card .bloc_text{ /*OK*/
    margin-left: 2%;
    margin-right: 2%;
}

.card .bloc_text label{ /*OK*/
    color: white;
    //font-size: 2vmin;
    max-width: 65%;
}

.card .bloc_text .input_calculator,.simpleInput, .select_league{
    background: black;
    //font-size: 2vmin;
    color: white;
    text-align: center;
    border-radius: 10px;
    height: 3vmin;
    width: 30%;
    box-sizing: border-box;
}
.card .bloc_text .input_calculator{
    position: relative;
}
.card .bloc_text .input_calculator input{
    width: 100%;
    background: transparent;
}
.card .bloc_text .input_calculator select{
    top: 0;
    bottom: 0;
    margin: auto;
    //font-size: 1.5vmin;
    position: absolute;
    right: 3%;
    background: transparent;
    color: white;
    border-color: transparent;
    height: 75%;
}
.card .bloc_text .input_calculator select:focus{
    background: black;
}

/* Pour Chrome, Safari et Edge */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none; /* Supprime les flèches */
    margin: 0; /* Évite les marges */
}

/* Pour Firefox */
input[type="number"] {
    -moz-appearance: textfield; /* Change l'apparence à un champ de texte normal */
}

.card .variable_element {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2.5%;
    margin-top: 2.5%;
}

.card .variable_element .output {
    display: flex;
    justify-content: space-between;
    align-items: center;
    //font-size: 2vmin;
    color: white;
    border: 2px solid white;
    text-align: center;
    border-radius: 10px;
    height: 2.5vmin;
    width: 30%;
}
.card .variable_element .output span{
    width: 100%;
 }

.card .variable_element .output select {
    border: none;
    border-radius: 5px;
    cursor: pointer;
    width: 20%;
    background:rgba(217, 217, 217, 0) ;
    color: white;
    //font-size: 75%;
}
.card .variable_element .output select:focus {
    color: #272728;
}


.text-with-line {
    position: relative;
    text-align: center;
}

.text-with-line::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 96%;
    height: 2px;
    background-color: #ffffff;
    z-index: 1;
    margin-left: 2%;
    margin-right: 2%;
}
@media (prefers-color-scheme: dark) {
    .text-with-line::before  {
        background-color: #adad18; /* Couleur de fond en mode sombre */
    }
}
.text-with-line span,.text-with-line a {
    position: relative;
    //font-size: 2vmin;
    color: white;
    background-color: #272728; /* Changez la couleur de fond si nécessaire */
    padding: 0 10px; /* Espace autour du texte pour que la ligne soit visible */
    z-index: 1;
    text-decoration: none;
}
.text-with-line a {
    z-index: 2;
}


.table-container {
    width: 95%;
    margin-left: 2.5%;
    margin-top: 2.5%;
    height: 100%; /* Hauteur fixe du tableau */
    max-height: 30vh;
    overflow-y: auto; /* Ajoute une barre de défilement verticale */
    overflow-x: hidden; /* Évite le défilement horizontal */
}

.scroll-table {
    width: 100%;
    border-collapse: collapse;
    background-color: white;
    color: black;
}

.scroll-table th, .scroll-table td {
    border: 1px solid black;
    padding: 8px;
    text-align: center;
    //font-size: 2vmin;
}

.scroll-table thead {
    position: sticky;
    background-color: rgba(255,255,255,1);
    top: 0
}
.card .text_no_calculator{
    //font-size: 2vmin;
    width: 95%;
    margin-left: 2.5%;
    margin-top: 2.5%;
}
.tabInput{
    width: 95%;
    text-align: center;
    //font-size: 2vmin;
}
.tabInput td{
    padding-bottom: 5px;
}
td .tableInput {
    background: black;
    //font-size: 2vmin;
    color: white;
    text-align: center;
    border-radius: 10px;
    height: 3vmin;
    box-sizing: border-box;
    width: 95%;
}

.tabInput .output {

        display: flex;
        justify-content: space-between;
        align-items: center;
        //font-size: 2vmin;
        color: white;
        border: 2px solid white;
        text-align: center;
        border-radius: 10px;
        height: 2.5vmin;
        width: 97.5%;

}
.tabInput .output span{

    width: 100%;
}
.bouton_information{
    position: absolute;
    top: 1vmin;   /* Place l'élément en haut */
    right: 1vmin; /* Place l'élément à droite */
    padding: 2px;
    height: 5vmin;
    width: 5vmin;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
}

@media only screen and (max-width: 768px) {
    .card { /*OK*/
        background-color: #272728;
        box-sizing: border-box;
        width: 95%;
        min-width: 300px;
        height: 65vh; /* Hauteur de la carte */
        scroll-margin-top: 20vmin;
    }
    .card .text-Tips {
        //font-size: 3vmin;
    }

    .card .title_card { /*OK*/
        min-height: 2em;
    }

    .card .title_card  h2 { /*OK*/
        //font-size: 4vmin;
    }
    .card .title_no_screen h2{
        //font-size: 4vmin;
    }

    .card .bloc_text label{ /*OK*/
        //font-size: 3vmin;
    }

    .card .bloc_text .input_calculator,.simpleInput, .select_league{
        height: 4vmin;
        //font-size: 3vmin;
    }
    .card .bloc_text .input_calculator select{
        height: 4vmin;
        //font-size: 2.5vmin;
    }

    .card .variable_element .output {
        //font-size: 3vmin;
        height: 3.5vmin;
    }
    .text-with-line span,.text-with-line a {
        //font-size: 3vmin;
    }
    .pub h2 {
        //font-size: 4.5vmin; /* Taille de la police */
    }

    .scroll-table th, .scroll-table td {
        //font-size: 3vmin;
    }
    .card .text_no_calculator{
        //font-size: 3vmin;
    }
    .tabInput{
        //font-size: 3vmin;
    }
    td .tableInput {
        //font-size: 3vmin;
        height: 4vmin;
    }

    .tabInput .output {
        //font-size: 3vmin;
        height: 3.5vmin;

    }
    .bouton_information{
        top: 2vmin;   /* Place l'élément en haut */
        right: 2vmin; /* Place l'élément à droite */
        height: 6vmin;
        width: 6vmin;
    }
}

/*
/////////////////////////////////////////////////////////////////////////
///////////////////// CARD PRESENTATION /////////////////////////////////
/////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////
 */
/* Styles pour les cartes sous le compteur */
div.calculator-contentment div.cards-container {
    display: flex;
    flex-wrap: wrap; /* Permet de passer à la ligne si nécessaire */
    justify-content: space-between; /* Espacement égal entre les cartes */
    gap: 20px; /* Espacement entre les cartes */
    width: 100%; /* Prendre toute la largeur disponible */
    height: 80%; /* S'ajuster en hauteur */
    margin-top: 5vh; /* Espacement entre le compteur et les cartes */
}

/* Styles pour chaque carte dans le conteneur */
div.card_presentation {
    background-color: rgba(0, 0, 0, 0.6); /* Utilisation de rgba pour la transparence */
    color: white;
    flex: 1; /* Faire en sorte que chaque carte prenne une largeur égale */
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    box-sizing: border-box;
    height: 25vw;
    box-shadow: none;
    position: relative; /* Nécessaire pour positionner les titres */

    /* Ombre et bordure pour l'effet 3D */
    border: 2px solid rgba(255, 255, 255, 0.2); /* Bordure claire */
    box-shadow:
            inset 0 2px 4px rgba(255, 255, 255, 0.2), /* Lumière intérieure pour un effet "relief" */
            0 4px 6px rgba(0, 0, 0, 0.5),            /* Ombre extérieure plus sombre */
            0 1px 2px rgba(0, 0, 0, 0.7);            /* Ombre pour un effet de profondeur */
}

/* Styles spécifiques pour les téléphones */
@media screen and (max-width: 1024px) {
    div.calculator-contentment div.cards-container {
        justify-content: center; /* Centrer les cartes */
        gap: 10px; /* Espacement plus petit entre les cartes */
    }

    div.card_presentation {
        flex: 0 0 calc(50% - 10px); /* Deux cartes par ligne, avec un espace de 10px entre elles */
        height: 25vh; /* Adapter automatiquement la hauteur */
    }
}



/*
////////////////////////// 2 images /////////////////////////
 */

/* Styles pour la carte diagonale */
div.card_presentation.diagonal-card, .uni_card {
    position: relative; /* Nécessaire pour positionner les images */
    overflow: hidden; /* Masquer les parties des images qui dépassent */
}
/* Styles communs pour les images */
 .diagonal-image, .uni-image {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Adapter l'image à la taille */
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.1);
    /*transition: clip-path 0.5s ease-in-out; /* Transition fluide pour clip-path */
}

/* Image supérieure droite */
.diagonal-image.top-right {
  clip-path: polygon(0 0, 100% 0, 0 100%); /* Triangle supérieur droit */
  z-index: 2;
}

/* Image supérieure droite lorsqu'elle est active */
div.card_presentation.diagonal-card .diagonal-image.top-right.active {
    clip-path: polygon(0 0, 100% 0, 100% 33%, 33% 100%, 0 100%); /* Transition au triangle modifié */
    z-index: 2;
}

/* Image supérieure droite lorsqu'elle est off */
div.card_presentation.diagonal-card .diagonal-image.top-right.off {
    clip-path: polygon(0 0, 66% 0, 0 66%); /* Transition au triangle modifié */
    z-index: 2;
}

/* Image inférieure gauche */
div.card_presentation.diagonal-card .diagonal-image.bottom-left {
    clip-path: polygon(100% 0, 100% 100%, 0 100%); /* Triangle inférieur gauche */
    z-index: 1;
}

/* Image inférieure gauche lorsqu'elle est active */
div.card_presentation.diagonal-card .diagonal-image.bottom-left.active {
    clip-path: polygon(66% 0 ,100% 0, 100% 100%, 0 100%, 0 66%); /* Transition au triangle modifié */
    z-index: 1;
}

/* Image inférieure gauche lorsqu'elle est off */
div.card_presentation.diagonal-card .diagonal-image.bottom-left.off {
    clip-path: polygon(100% 33%,100% 100%,33% 100%); /* Transition au triangle modifié */
    z-index: 1;
}





/* Ligne blanche diagonale */
div.card_presentation.diagonal-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom right, transparent 49%, white 50%, transparent 51%);
    pointer-events: none; /* Éviter d'interagir avec la ligne */
    z-index: 3; /* Au-dessus des images */
}

/* Ligne blanche diagonale à droite */
div.card_presentation.diagonal-card.right::after {
    background: linear-gradient(to bottom right, transparent 32%, white 33%, transparent 34%);
}

/* Ligne blanche diagonale à gauche */
div.card_presentation.diagonal-card.left::after {
    background: linear-gradient(to bottom right, transparent 65%, white 66%, transparent 67%);
}


/*
////////////////////////// title  /////////////////////////
*/
/* Styles pour les titres */
div.card_presentation .image-title {
    position: absolute;
    color: white;
    background-color: rgba(0, 0, 0, 0.8);
    //font-size: 20px; /* Taille du texte */
    font-weight: bold;
    padding: 5px 10px; /* Espacement de 5px en haut et en bas, 10px à gauche et à droite */
    border-radius: 5px; /* Coins arrondis */
    z-index: 4; /* S'assurer que les titres sont au-dessus des images */
}

/* Ajouter un fond plus clair sous le titre */
div.card_presentation .image-title::before {
    content: ''; /* Nécessaire pour afficher le pseudo-élément */
    position: absolute;
    top: -5px; /* Ajouter un espace autour du titre */
    left: -5px;
    right: -5px; /* Étendre de chaque côté */
    bottom: -5px;
    background-color: rgba(255, 255, 255, 0.2); /* Couleur claire avec transparence */
    border-radius: 8px; /* Coin légèrement plus arrondi que le fond principal */
    z-index: 3; /* Derrière le titre, mais au-dessus de l'image */
}


/* Titre en haut à gauche */
div.card_presentation .image-title.top-left {
    top: 10px;
    left: 10px;
    transition: transform 0.1s ease-in-out; /* Ajout d'une transition pour le mouvement */
}
div.card_presentation .image-title.top-left.active {
    transform:  scale(1.2); /* Centrage parfait */
}
div.card_presentation .image-title.top-left.off {
    transform: scale(0); /* Centrage parfait */
}

/* Styles pour le titre centré dans la carte */
div.card_presentation .image-title.center {
    /* Centrage au milieu de la carte */
    top: 50%; /* Positionner à 50% de la hauteur de la carte */
    left: 50%; /* Positionner à 50% de la largeur de la carte */
    transform: translate(-50%, -50%); /* Ajuster pour centrer parfaitement le titre */
    transition: transform 0.1s ease-in-out; /* Ajout d'une transition pour le mouvement */
}
div.card_presentation .image-title.center.active {
    transform:  translate(-50%, -50%) scale(1.2); /* Centrage parfait */
}
div.card_presentation .image-title.center.off {
    transform: translate(-50%, -50%) scale(0); /* Centrage parfait */
}


/* Titre en bas à droite */
div.card_presentation .image-title.bottom-right {
    bottom: 10px;
    right: 10px;
    transition: transform 0.1s ease-in-out; /* Ajout d'une transition pour le mouvement */
}
div.card_presentation .image-title.bottom-right.active {
    transform:  scale(1.2); /* Centrage parfait */
}
div.card_presentation .image-title.bottom-right.off {
    transform: scale(0); /* Centrage parfait */
}

/* Styles spécifiques pour les titres sur les téléphones */
@media screen and (max-width: 768px) {
    div.card_presentation .image-title {
        //font-size: 11px; /* Taille réduite du texte */
        padding: 3px 8px; /* Ajustement de l'espacement */
        border-radius: 4px; /* Coins légèrement plus petits */
    }

    div.card_presentation .image-title::before {
        top: -3px; /* Réduction de l'espacement autour du titre */
        left: -3px;
        right: -3px;
        bottom: -3px;
        border-radius: 6px; /* Ajustement des coins */
    }
}


/*
////////////////////////// 3 images /////////////////////////
 */

/* Styles pour la carte à trois images avec séparations diagonales */
div.card_presentation.diagonal-card-three {
    position: relative; /* Nécessaire pour positionner les images */
    overflow: hidden; /* Masquer les parties des images qui dépassent */
}

/* Styles communs pour les images */
div.card_presentation.diagonal-card-three .diagonal-image {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Adapter l'image à la taille */
    top: 0;
    left: 0;
}

/* Image du coin supérieur gauche (33%) */
div.card_presentation.diagonal-card-three .diagonal-image.top-left {
    clip-path: polygon(0 0, 66% 0, 0 66%); /* Triangle supérieur gauche jusqu'à 33% */
    z-index: 2; /* Superposer correctement */
}
div.card_presentation.diagonal-card-three .diagonal-image.top-left.active {
    clip-path: polygon(0 0, 100% 0, 100% 33%,33% 100%,0 100%); /* Triangle supérieur gauche jusqu'à 33% */
    z-index: 2; /* Superposer correctement */
}
div.card_presentation.diagonal-card-three .diagonal-image.top-left.off {
    clip-path: polygon(0 0, 33% 0, 0 33%); /* Triangle supérieur gauche jusqu'à 33% */
    z-index: 2; /* Superposer correctement */
}

/* Image du coin supérieur droit (33%) */
div.card_presentation.diagonal-card-three .diagonal-image.top-right {
    clip-path: polygon(66% 0, 100% 0, 100% 33%, 33% 100%,0 100%,0 66%); /* Triangle supérieur droit jusqu'à 66% */
    z-index: 1; /* Superposer correctement */
}
div.card_presentation.diagonal-card-three .diagonal-image.top-right.active {
    clip-path: polygon(33% 0, 100% 0, 100% 66%, 66% 100%,0 100%,0 33%); /* Triangle supérieur droit jusqu'à 66% */
    z-index: 1; /* Superposer correctement */
}
div.card_presentation.diagonal-card-three .diagonal-image.top-right.off.left {
    clip-path: polygon(33% 100%, 100% 33%, 100% 66%,66% 100%); /* Triangle supérieur droit jusqu'à 66% */
    z-index: 1; /* Superposer correctement */
}
div.card_presentation.diagonal-card-three .diagonal-image.top-right.off.right {
    clip-path: polygon(33% 0, 66% 0, 0 66%,0 33% ); /* Triangle supérieur droit jusqu'à 66% */
    z-index: 1; /* Superposer correctement */
}

/* Image du bas (66%) */
div.card_presentation.diagonal-card-three .diagonal-image.bottom-center {
    clip-path: polygon(100% 100%, 33% 100%, 100% 33%); /* Triangle inférieur avec séparation à 66% */
    z-index: 0; /* Dernière image sous les autres */
}
div.card_presentation.diagonal-card-three .diagonal-image.bottom-center.active {
    clip-path: polygon(100% 100%, 0 100% ,0 66% , 66% 0, 100% 0 ); /* Triangle inférieur avec séparation à 66% */
    z-index: 0; /* Dernière image sous les autres */
}
div.card_presentation.diagonal-card-three .diagonal-image.bottom-center.off {
    clip-path: polygon(100% 100%, 66% 100%, 100% 66%); /* Triangle inférieur avec séparation à 66% */
    z-index: 0; /* Dernière image sous les autres */
}

/* Ligne blanche diagonale à 33% */
div.card_presentation.diagonal-card-three::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom right, transparent 32%, white 33%, transparent 34%);
    pointer-events: none; /* Éviter d'interagir avec la ligne */
    z-index: 3; /* Au-dessus des images */
}
/* Ligne blanche diagonale à droite */
div.card_presentation.diagonal-card-three.right::before {
    background: linear-gradient(to bottom right, transparent 15%, white 16%, transparent 17%);
}
/* Ligne blanche diagonale à gauche */
div.card_presentation.diagonal-card-three.left::before {
    background: linear-gradient(to bottom right, transparent 65%, white 66%, transparent 67%);
}/* Ligne blanche diagonale à gauche */
div.card_presentation.diagonal-card-three.center::before {
    background: linear-gradient(to bottom right, transparent 15%, white 16%, transparent 17%);
}

/* Ligne blanche diagonale à 66% */
div.card_presentation.diagonal-card-three::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom right, transparent 65%, white 66%, transparent 67%);
    pointer-events: none; /* Éviter d'interagir avec la ligne */
    z-index: 3; /* Au-dessus des images */
}
/* Ligne blanche diagonale à droite */
div.card_presentation.diagonal-card-three.left::after {
    background: linear-gradient(to bottom right, transparent 82%, white 83%, transparent 84%);
}
/* Ligne blanche diagonale à gauche */
div.card_presentation.diagonal-card-three.right::after {
    background: linear-gradient(to bottom right, transparent 32%, white 33%, transparent 34%);
}/* Ligne blanche diagonale à gauche */
div.card_presentation.diagonal-card-three.center::after {
    background: linear-gradient(to bottom right, transparent 82%, white 83%, transparent 84%);
}