@media screen and (min-width: 481px) {
    html,body {
        margin: 0px;
        padding: 0px;
    }
    html{
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }
    body {
        min-height: 100%;
        margin: 0;
        flex: 1;
        min-height: 100vh;
        padding-bottom: 35px; /* Hauteur du footer */        
    }
    .menu {
        list-style: none;
        display: flex;
        justify-content: space-evenly;
        margin :0;
        padding: 10px 0 10px 0;
    }
    nav{
        background-color: rgb(38, 106, 216);
        padding: 1px;
    }
    .lien {
        text-decoration: none;
        color: white;
        font-weight: bold;
        font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
    }
    td {
        border: 1px solid black;
    }
    h1 {
        display: inline-block;
    }
    #recherche {
        display: inline-block;
        font-size: 32px;
        font-weight: bold;
    }
    #form_pays {
        width: 600px;
        height: 400px;
        background-color: rgb(200, 200, 200);
        margin-left: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
    }
    #Mbappe {
        width: 40%;
        height: auto;
        border: 1px solid black;
        padding: 5px;
    }
    label {
        font-size: 20px;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        margin: 5px 0 5px 0;
        cursor: pointer;
    }
    #babybel {
        margin-left: 10%;
        display: flex;
        align-items: center;
        flex-direction: column;
    }
    .formulaire {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    input,
    textarea {
        margin-top: 5px;
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
    }
    #boutton_pays {
        width: 200px;
        margin-top: 20px;
        background-color: greenyellow;
        font-weight: bold;
        color: black;
        border: 1px black solid;
        padding: 10px;
        cursor: pointer;
    }
    footer {
        display: flex;
        justify-content: center;
        height: 35px;
        width: 100%;
        background-color: rgb(178, 178, 178);
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        color: black;
        position: fixed;
        bottom: 0; /* Fixe le footer en bas de la fenêtre du navigateur */
        left: 0;
        z-index: 4;
    }
    
    .gallery {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    
    .box {
        width: 32%;
        margin-top: 50px;
        background-color: #f2f2f2;
        border: 1px solid #ccc;
        padding: 10px;
        box-sizing: border-box;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    
    .text {
        grid-column: 1;
    }
    
    .other-info {
        grid-column: 2;
    }
    
    .logo {
        width: 100px;
        height: auto;
        margin-right: 10px;
    }
    
    .text {
        flex-grow: 1;
        font-weight: normal;
        font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
    }
    #colonne {
        position: relative;
    }
    
    #ballon {
        width: 100%;
        z-index: 1;
        opacity: 90%;
    }
    
    #titre {
        font-size: 60px;
        width: 99%;
        height: 200px;
        margin: 0;
        font-family: "Staatliches";
        color: white;
        position: absolute;
        top: 60%;
        left: 1%;
        z-index: 2;
    }
    
    #joueur {
        width: 25%;
        height: auto;
        position: absolute;
        top: 35%;
        left: 18%;
        transform: translate(-50%, -50%);
        z-index: 2;
    }

    #joueur2 {
        width: 33%;
        height: auto;
        position: absolute;
        top: 35%;
        left: 33%;
        transform: translate(-50%, -50%);
        z-index: 2;
    }

    #bluebox {
        position: absolute;
        width: 100%;
        background-color: #000453;
        z-index: 3;
        margin-top: -300px;
        color: white;
        height: 1600px;
    }

    .ligue {
        font-family: "Anta";
        margin-left: 1%;
    }
    #podium {
        margin-top: 25px;
        display: flex;
        justify-content: space-around;
        align-items: end;
    }
    .place {
        background-color: lightgray;
        width: 19.3%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: black;
        font-family: "Anta";
        font-weight: bold;
    }
    .logo2{
        width: 100px;
        height: auto;
        margin-top: 15px;
        border: 3px solid rgba(0, 0,0,0.5)
    }
    .médaille {
        display: flex;
        justify-content: space-around;
        align-items: end;
        width: 15%;
    }
    #premier {
        height: 1300px;
    }
    #deuxieme {
        height: 1250px;
    }
    #troisieme {
        height: 1250px;
    }
    #quatrieme {
        height: 1175px;
    }
    #cinquieme {
        height: 1175px;
    }
    p {
        margin: 8px;
    }
    .position-table {
        margin-top: 30px;
        width: 99%;
        border-collapse: collapse;
        flex-shrink: 1;
        height: 1000px;
    }
    
    .position-table th, .position-table td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: left;
        font-size: 16px;
        vertical-align: middle;
    }
    .cell-align {
        display: flex;
        align-items: center;
    }
    
    .cell-align img {
        margin-right: 5px; /* Espacement entre l'image et le texte */
    }
    
    .position-table th {
        background-color: #f2f2f2;
    }
    
    .position-table tbody tr:nth-child(even) {
        background-color: #f2f2f2;
    }
    
    .position-table tbody tr:hover {
        background-color: #dedede;
    }
    .mini_logo {
        width: 24px;
        height: 24px;
    }
    .rélégation{
        background-color: rgba(255, 0, 0, 0.7)
    }
    .ldc {
        background-color: rgba(0, 0, 255, 0.7)
    }
    .europa {
        background-color: rgba(255, 128, 0, 0.7)
    }
    .conference {
        background-color: rgba(0, 185, 0, 0.7);
    }
    .barrage {
        background-color: rgba(255, 183, 0, 0.7);
    }
    #neuille {
        display: flex;
        flex-direction: row ;
    }
    .legende {
        color: white;
        font-family: "Anta";
        font-weight: bold;
        margin: 0 0 0 10px;
        padding: 0;
        font-family: "Anta";
        font-weight: bold;
        text-align: center;
        vertical-align: middle; 
    }
    .carre {
        width: 15px;
        height: 15px;
        border: 1px solid black;
        margin-left: 20px;
    }
    .logo3 {
        width: 25px;
        height: auto;
    }
    span {
        display: flex;
        align-items: center;
        justify-content: start;
    }
    span img{
        margin-right: 5px; /* Espace entre l'image et le texte */
        width: 20px; /* Ajustez la largeur de l'image selon vos besoins */
        height: auto; /* Hauteur automatique pour maintenir les proportions */
    }
    #boutton_1 {
        padding: 5px;
        margin:25px 0 0 90px;
        background-color: #b04040;
        color: white;
        cursor: pointer;
        font-size: 20px;
    }
    #idLigue {
        display: flex;
        align-items: center;
        width: 120px;
        height: 100px;
    }
    #boutton_2 {
        padding: 5px;
        width: 100px;
        background-color: #b04040;
        color: white;
        cursor: pointer;
        font-size: 20px;
    }
    #formulaire_2 {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 250px;
    }
    .teddy {
        width:250px;
    }
    .crud {
        color:black;
        font-size: 20px;
    }
    .gestion {
        color: rgb(255, 255, 255);
        font-size: 20px;
        text-decoration: none;
        width: 200px;
        background-color: rgb(38, 106, 216);
        padding: 8px 25px 8px 25px;
        margin: 60px 0 0 25px;
        position: relative;
        top: 15px;
        text-align: center;
        border-radius: 8px;
    }
    select{
        padding: 10px;
    }
    #admin_gestion{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 100px;
    }
    .valide{
        font-size: 20px;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        background-color: rgb(19, 52, 105);
        border-radius: 20px;
        color:white;
        padding: 8px 25px 8px 25px;
        margin: 50px 0 15px 25px;
        max-width: 45%;
    }
    #résultat{
        color:aliceblue;
        cursor: pointer;
    }
    .flex-column {
        display: flex;
        justify-content: start;
    }
}
@media screen and (max-width: 480px) {
    html,body {
        margin: 0px;
        padding: 0px;
    }
    html{
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }
    body {
        min-height: 100%;
        margin: 0;
        flex: 1;
        min-height: 100vh;
        padding-bottom: 35px; /* Hauteur du footer */        
    }
    .menu {
        list-style: none;
        display: flex;
        justify-content: space-evenly;
        margin :0;
        padding: 10px 0 10px 0;
    }
    nav{
        background-color: rgb(38, 106, 216);
        padding: 1px;
        width:auto;
    }
    .lien {
        text-decoration: none;
        color: white;
        font-weight: bold;
        font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
    }
    #form_pays {
        width: 100%;
        height: 400px;
        background-color: rgb(200, 200, 200);
        margin-left: 10px;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        margin: 0;
    }
    #Mbappe {
        width: 50%;
        height: auto;
        border: 1px solid black;
        padding: 5px;
    }
    #label_pays {
        font-size: 20px;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    }
    #babybel {
        margin-top: 10px;
        display: flex;
        align-items: center;
        flex-direction: column;
    }
    input,
    textarea {
        margin-top: 5px;
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
    }
    #boutton_pays {
        width: 200px;
        margin-top: 20px;
        background-color: greenyellow;
        font-weight: bold;
        color: black;
        border: 1px black solid;
        padding: 10px;
        cursor: pointer;
    }
    footer {
        display: flex;
        justify-content: center;
        height: 35px;
        width: 100%;
        background-color: rgb(178, 178, 178);
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        color: black;
        position: fixed;
        bottom: 0; /* Fixe le footer en bas de la fenêtre du navigateur */
        left: 0;
    }
    .gallery {
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .box {
        width: 80%;
        margin-bottom: 20px;
        background-color: #f2f2f2;
        border: 1px solid #ccc;
        padding: 10px;
        box-sizing: border-box;
    }
    
    .logo {
        width: 100px;
        height: auto;
        margin-right: 10px;
    }
    
    .text {
        flex-grow: 1;
    }
    #colonne {
        position: relative;
    }
    
    #ballon {
        width: 100%;
        z-index: 1;
        opacity: 90%;
    }
    
    #titre {
        font-size: 30px;
        width: 100%;
        margin-top: -5px;
        font-family: "Staatliches";
        color: white;
        text-align: center;
        background-color: rgb(0, 46, 80);
    }
    
    #joueur {
        width: 50%;
        height: auto;
        position: absolute;
        top: 35%;
        left: 30%;
        transform: translate(-50%, -50%);
        z-index: 2;
    }

    #joueur2 {
        width: 63%;
        height: auto;
        position: absolute;
        top: 36.7%;
        left: 65%;
        transform: translate(-50%, -50%);
        z-index: 2;
    }
    #bluebox {
        position: absolute;
        width: 100%;
        background-color: #000453;
        z-index: 3;
        margin-top: -25px;
        color: white;
        height: 7550px;
    }

    .ligue {
        font-family: "Anta";
        margin-left: 1%;
    }
    #podium {
        margin-top: 25px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .place {
        background-color: lightgray;
        width: 95%;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: black;
        font-family: "Anta";
        font-weight: bold;
        margin-top: 50px;
    }
    .logo2{
        width: 100px;
        height: auto;
        margin-top: 15px;
        border: 3px solid rgba(0, 0,0,0.5)
    }
    .médaille {
        display: flex;
        flex-direction: column;
        width: 15%;
    }
    #premier {
        height: 1400px;
    }
    #deuxieme {
        height: 1350px;
    }
    #troisieme {
        height: 1350px;
    }
    #quatrieme {
        height: 1275px;
    }
    #cinquieme {
        height: 1275px;
    }
    p {
        margin: 8px;
    }
    .position-table {
        margin-top: 30px;
        width: 100%;
        border-collapse: collapse;
    }
    
    .position-table th, .position-table td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: left;
        font-size: 16px;
        vertical-align: middle;
    }
    .cell-align {
        display: flex;
        align-items: center;
    }
    
    .cell-align img {
        margin-right: 5px; /* Espacement entre l'image et le texte */
    }
    
    .position-table th {
        background-color: #f2f2f2;
    }
    
    .position-table tbody tr:nth-child(even) {
        background-color: #f2f2f2;
    }
    
    .position-table tbody tr:hover {
        background-color: #ddd;
    }
    .mini_logo {
        width: 24px;
        height: 24px;
    }
    .carre {
        width: 15px;
        height: 15px;
        border: 1px solid black;
        margin-left: 20px;
    }
    .rélégation{
        background-color: rgba(255, 0, 0, 0.7)
    }
    .ldc {
        background-color: rgba(0, 0, 255, 0.7)
    }
    .europa {
        background-color: rgba(255, 128, 0, 0.7)
    }
    .conference {
        background-color: rgba(0, 185, 0, 0.7);
    }
    .barrage {
        background-color: rgba(255, 183, 0, 0.7);
    }
    .logo3 {
        width: 25px;
        height: auto;
    }
    span {
        display: flex;
        align-items: center;
        justify-content: start;
    }
    span img{
        margin-right: 5px; /* Espace entre l'image et le texte */
        width: 20px; /* Ajustez la largeur de l'image selon vos besoins */
        height: auto; /* Hauteur automatique pour maintenir les proportions */
    }
    #boutton_1 {
        padding: 5px;
        margin:25px 0 0 90px;
        background-color: #b04040;
        color: white;
        cursor: pointer;
        font-size: 20px;
    }
    #idLigue {
        display: flex;
        align-items: center;
        width: 120px;
        height: 100px;
    }
    #boutton_2 {
        padding: 5px;
        width: 100px;
        background-color: #b04040;
        color: white;
        cursor: pointer;
        font-size: 20px;
    }
    #formulaire_2 {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 250px;
    }
    .teddy {
        width:250px;
    }
    .crud {
        color:black;
        font-size: 20px;
    }
    .gestion {
        color: rgb(255, 255, 255);
        font-size: 20px;
        text-decoration: none;
        width: 200px;
        background-color: rgb(38, 106, 216);
        padding: 8px 25px 8px 25px;
        margin: 60px 0 0 25px;
        position: relative;
        top: 15px;
        text-align: center;
        border-radius: 8px;
    }
    select{
        padding: 10px;
    }
    #admin_gestion{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 100px;
    }
    .valide{
        font-size: 20px;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        background-color: rgb(19, 52, 105);
        border-radius: 20px;
        color:white;
        padding: 8px 25px 8px 25px;
        width: 75%;
        margin-top: 50px;
    }
    #résultat{
        color:aliceblue;
        cursor: pointer;
    }
    .flex-column {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}