* {
    margin: 0;
    /* Supprime les marges par défaut */
    padding: 0;
    /* Supprime les espacements internes par défaut */
    box-sizing: border-box;
    /* Inclut la bordure et le padding dans la largeur et la hauteur des éléments */
    text-decoration: none;
    /* Enlève les soulignements des liens */
}


a:visited {
    color: white;
    /* Définit la couleur des liens visités en blanc */
}

/* Header ---------------------------------------------------------------------------- */

/* Commun a toutes les pages*------*/
header {
    font-weight: 400;
    /* Taile de la police*/
    display: flex;
    /* Utilisation de Flexbox pour disposer les éléments de l'en-tête en ligne */
    justify-content: space-between;
    /* Espace entre les éléments à gauche et à droite de l'en-tête */
    align-items: center;
    /* Alignement vertical des éléments au centre */
    flex-wrap: wrap;
    /* Permet aux éléments de se réorganiser si nécessaire en cas de taille d'écran plus petite */
    color: white;
    /* Définit la couleur du texte dans l'en-tête en blanc */

}

/* Bar de Navigation */
#nav {
    border-bottom: 2px solid rgba(184, 134, 11);
    /* Bordure bleue de 4px */
    display: flex;
    /* Utilisation de Flexbox pour la barre de navigation */
    position: fixed;
    /* Positionnement fixe en haut de la page */
    top: 0;
    /* Positionne la barre en haut de la page */
    left: 0;
    /* Positionne la barre à gauche de la page */
    right: 0;
    /* Positionne la barre à droite de la page */
    flex: 2;
    /* L'élément prend 2 parts d'espace par rapport aux autres éléments frères */
    padding-top: 1%;
    /* Espace de 1% en haut du conteneur */
    padding-bottom: 1%;
    /* Espace de 1% en bas du conteneur */
    background: black;
    /* Fond noir pour la barre de navigation */
    font-size: 25px;
    /* Taille de police définie à 25px */
    margin-left: 0;
    /* Aucune marge à gauche */
}

/* Réseaux sociaux */
#social {
    display: flex;
    /* Utilisation de Flexbox pour aligner les éléments sociaux */
    gap: 40px;
    /* Espace de 40px entre chaque élément */
    flex: 1;
    /* L'élément prend une part d'espace */
    justify-content: right;
    /* Aligne les éléments à droite de la barre */
    padding-right: 1%;
    /* Ajoute un padding à droite de 1% */
}

/* Liens des pages */
#lien_site {
    display: flex;
    /* Utilisation de Flexbox pour aligner les liens du site */
    gap: 80px;
    /* Espace de 80px entre les éléments */
    flex: 1;
    /* L'élément prend une part d'espace */
    color: green;
    /* Définit la couleur des liens en vert */
    padding-left: 1%;
    /* Ajoute un padding à gauche de 1% */
}

/* Header Titre */
#header_titre {
    display: flex;
    /* Utilisation de Flexbox */
    font-family: "Permanent Marker", cursive;
    /* Police du titre*/
    font-size: 100px;
    /* Taille de la police définie à 100px */
    flex-direction: column;
    /* Organise les éléments en colonne */
}

/* Header Sous-titre*/
#header_soustitre {
    font-family: "Exo 2", serif;
    /* Police des sous-titres*/
    font-size: 25px;
    /* Taille de la police définie à 80px */
}


/* --------------------------------*/

/* Header Image - Accueil */
#index_header_img {
    height: 100vh;
    /* Définit la hauteur de l'image d'en-tête à 100% de la hauteur de la fenêtre */
    width: 100%;
    /* L'image couvre toute la largeur */
    background-position: center;
    /* Positionne l'image au centre */
    display: flex;
    /* Utilisation de Flexbox pour la disposition des éléments */
    justify-content: center;
    /* Centre les éléments horizontalement */
    align-items: center;
    /* Centre les éléments verticalement */
    text-align: center;
    /* Centre le texte */
    flex-direction: column;
    /* Organise les éléments en colonne */
    color: white;
    /* Définit la couleur du texte en blanc */
}

/* Header Image - Guide */
#guide_header_img {
    height: 100vh;
    /* Définit la hauteur de l'image d'en-tête */
    width: 100%;
    /* L'image couvre toute la largeur */
    background-position: center;
    /* Positionne l'image au centre */
    display: flex;
    /* Utilisation de Flexbox pour la disposition des éléments */
    justify-content: center;
    /* Centre les éléments horizontalement */
    align-items: center;
    /* Centre les éléments verticalement */
    text-align: center;
    /* Centre le texte */
    flex-direction: column;
    /* Organise les éléments en colonne */
    color: white;
    /* Définit la couleur du texte en blanc */

}

/* Header Image - A propos */
#apropos_header_img {
    height: 100vh;
    /* Définit la hauteur de l'image d'en-tête */
    width: 100%;
    /* L'image couvre toute la largeur */
    background-position: center;
    /* Positionne l'image au centre */
    display: flex;
    /* Utilisation de Flexbox pour la disposition des éléments */
    justify-content: center;
    /* Centre les éléments horizontalement */
    align-items: center;
    /* Centre les éléments verticalement */
    text-align: center;
    /* Centre le texte */
    flex-direction: column;
    /* Organise les éléments en colonne */
    color: white;
    /* Définit la couleur du texte en blanc */
}


/* Main ------------------------------------------------------------------------------ */

/* Commun a toutes les pages*------*/

/*Section contenant le texte*/
#section_texte {
    display: flex;
    /* Utilisation de Flexbox pour la disposition des éléments */
    flex-direction: column;
    /* Organise les éléments en colonne */
    width: 60%;
    /* La section prend 60% de la largeur */
    height: 100%;
    /* La section prend 100% de la hauteur */
    padding-top: 2%;
    /* Padding de 2% en haut */
    font-size: x-large;
    /* Taille de police large */
    text-align: left;
    /* Alignement du texte à gauche */
    color: rgb(255, 255, 255);
    /* Texte en blanc */
}

/*Section contenant les videos*/
#section_video {
    display: flex;
    /* Utilisation de Flexbox pour la disposition des éléments dans la section */
    width: 100%;
    /* Largeur de la section à 100% */
    height: 100%;
    /* Hauteur de la section à 100% */
}

/*Section contenant les videos*/
#section_img {
    display: flex;
    /* Utilisation de Flexbox pour la disposition des images */
    background-repeat: no-repeat;
    /* Empêche la répétition de l'image d'arrière-plan */
    height: 600px;
    /* Hauteur de l'image fixée à 600px */
    width: 500px;
    /* Largeur de l'image fixée à 500px */
    margin-top: 5%;
    /* Marge de 5% en haut */
    margin-left: 2%;
    /* Marge de 2% a gauche */
    padding-bottom: 5%;
    /* Marge de 5% en bas */
}

/*Section contenant les titre des parties*/
#section_titre {
    padding-left: 2%;
    /* Espacement de 5% a aguche */
}

/*Section contenant les texte*/
#section_texte {
    display: flex;
    /* Utilisation de Flexbox pour la disposition des éléments */
    flex-direction: column;
    /* Organise les éléments en colonne */
    width: 60%;
    /* La section prend 60% de la largeur */
    height: 100%;
    /* La section prend 100% de la hauteur */
    padding-top: 2%;
    /* Padding de 2% en haut */
    font-size: x-large;
    /* Taille de police large */
    text-align: left;
    /* Alignement du texte à gauche */
    color: rgb(255, 255, 255);
    /* Texte en blanc */
}

/*Section contenant les paragraphes*/
#main_p {
    padding-left: 2%;
    /* Padding de 2% a gauche*/
    text-align: justify;
    /* Justifie le texte dans les paragraphes */
    line-height: 200%;
    /* Augmente la hauteur de ligne pour améliorer la lisibilité */
}

/*---------------------------------*/

/*Section Aceuil*/
#index_section {
    display: flex;
    /* Utilisation de Flexbox pour la disposition des éléments dans la section */
    flex-direction: row;
    justify-content: space-around;
    /* Organise les éléments en ligne */
    width: 90%;
    /* Largeur de la section à 100% */
    height: 80%;
    /* Hauteur de la section à 100% */
    background-color: rgba(255, 255, 255, 0.103);
    margin-left: 5%;
    /*Margin de 5% a gauche*/
    margin-right: 5%;
    /*Margin de 5% a droite*/
    margin-bottom: 3%;
    /*Margin de 5% en bas*/
}

/*Section Guide du boxeur*/
#guide_section {
    display: flex;
    /* Utilisation de Flexbox pour la disposition des éléments dans la section */
    flex-direction: row;
    justify-content: space-around;
    /* Organise les éléments en ligne */
    width: 90%;
    /* Largeur de la section à 90% */
    height: 70%;
    /* Hauteur de la section à 70% */
    background-color: rgba(0, 0, 0, 0.658);
    /* Couleur du fond*/
    margin-left: 5%;
    /*Margin de 5% a gauche*/
    margin-right: 5%;
    /* Margin de 5% a droite*/
}

/*Section A propos*/
#apropos_section {
    display: flex;
    /* Utilisation de Flexbox pour la disposition des éléments dans la section */
    flex-direction: row;
    justify-content: space-around;
    /* Organise les éléments en ligne */
    width: 90%;
    /* Largeur de la section à 100% */
    height: 80%;
    /* Hauteur de la section à 100% */
    background-color: rgba(0, 0, 0, 0.658);
    margin-left: 5%;
    /* Margin de 5% a gauche*/
    margin-right: 5%;
    /* Margin de 5% a droite*/
    margin-top: 1%;
    /* Margin de 1% en haut*/
    margin-bottom: 2%;
    /* Margin de 2% en bas*/
}

/*Section contenant le texte spécifiques a la page guide*/
#guide_section_texte {
    display: flex;
    /* Utilisation de Flexbox pour la disposition des éléments */
    flex-direction: column;
    /* Organise les éléments en colonne */
    width: 60%;
    /* La section prend 60% de la largeur */
    height: 100%;
    /* La section prend 100% de la hauteur */
    padding-top: 2%;
    /* Padding de 2% en haut */
    font-size: x-large;
    /* Taille de police large */
    text-align: left;
    /* Alignement du texte à gauche */
    color: rgb(255, 255, 255);
    /* Texte en blanc */

}

/*Section contenant vidéos spécifiques a la page guide*/
#guide_section_video {
    display: flex;
    /* Utilisation de Flexbox pour la disposition des éléments */
    flex-direction: column;
    /* Organise les éléments en colonne */
    padding: 20px;
    /* Padding de 20px*/
    width: 90%;
    /* La section prend 60% de la largeur */
    background-color: rgba(0, 0, 0, 0.658);
    /* Fond sombre pour la section */
    margin-left: 5%;
    /* Marge de 5% a gauche*/
    margin-right: 5%;
    /* Marge de 5% a droite*/

}

/*Videos de la page guide*/
#guide_section_vid {
    display: flex;
    /* Utilisation de Flexbox pour la disposition des éléments */
    height: 15vw;
    /* Hauteur de 15vw de la largeur de la fenêtre */
    width: 50vh;
    /* Largeur de 50vh de la hauteur de la fenêtre */
    background-repeat: no-repeat;
    /* Empêche la répétition de l'image d'arrière-plan */
    border-radius: 10px;
    /* Arrondit les coins de la div */
    align-items: center;
    /* Aligne les éléments au centre verticalement */
    color: rgba(0, 0, 0, 0.63);
    /* Définit la couleur du texte en azure */
    margin-bottom: 10px;
    /* Marge de 10px en bas */
}


/*Section contenant les images spécifiques a la page guide*/
#guide_section_img {
    display: flex;
    /* Utilisation de Flexbox pour la disposition des images */
    background-repeat: no-repeat;
    /* Empêche la répétition de l'image d'arrière-plan */
    height: 550px;
    /* Hauteur de l'image fixée à 550px */
    width: 475px;
    /* Largeur de l'image fixée à 475px */
    margin-top: 10%;
    /* Marge de 10% en haut */
    margin-left: 0%;
    /* Pas de marge a gauche*/
    padding-bottom: 5%;
    /* Padding de 5% en bas*/
}

/*Section contenant la carte spécifique a la page a propos*/
#section_carte {
    display: flex;
    /* Utilisation de Flexbox pour la disposition des images */
    padding-top: 2%;
    /* Padding de 2% en bas*/
    padding-bottom: 2%;
    /* Padding de 5% en haut */
    font-size: x-large;
    /* Taille de police large */
    text-align: left;
    /* Alignement du texte à gauche */
    color: rgb(255, 255, 255);
    /* Texte en blanc */
}

/*Section contenant les titre des sections spécifique a la page guide du boxeur*/
#title_section {
    background-color: black;
    /* Fond noir pour la section du titre */
    color: white;
    /* Texte en blanc */
    width: 90%;
    /* Hauteur de la section du titre à 90% de la fenêtre */
    padding-left: 20px;
    /* Padding de 20px à gauche */
    border: 2px solid rgba(184, 134, 11);
    /* Bordure dorée avec style solid */
    background-color: rgb(0, 0, 0);
    margin-left: 5%;
    /* Marge de 5% a gauche */
    margin-right: 5%;
    /* Marge de 5% a droite */
    text-align: center;
    /* Aligne le texte a droite */
    margin-top: 1%;
    /* Marge de 1% en haut */
    margin-bottom: 2%;
    /* Marge de 2% en bas */

}

/*Titres des sections spécifique a la page guide du boxeur*/
#title_combat {
    margin: 1%;
    /* Margin de 1%*/
}

body main div {
    display: flex;
    /* Utilisation de Flexbox pour disposer les éléments */
    justify-content: space-around;
    /* Espacement uniforme entre les éléments */
    align-items: center;
    /* Alignement vertical des éléments au centre */
}

body header h1 span {
    color: rgba(184, 134, 11);
    /* Couleur dorée pour les éléments span dans les titres */
}

body header div a span {
    color: rgba(184, 134, 11);
    /* Couleur dorée pour les éléments span dans les liens */
}

main section section p span {
    color: rgba(184, 134, 11);
    /* Couleur dorée pour les éléments span dans les paragraphes */
}

#guide_body {
    background:
        linear-gradient(to bottom, rgba(0, 0, 0, 0.568), rgba(0, 0, 0, 0.568), rgb(0, 0, 0)),
        /* Ajoute un dégradé noir transparent sur l'image */
        url('images/header9.jpg');

    background-position: center;
    /* Positionne l'image au centre */
    background-attachment: fixed;
    /* Rend l'image fixe */
}


#index_body {
    background:
        linear-gradient(to bottom, rgba(0, 0, 0, 0.568), rgba(0, 0, 0, 0.568), rgb(0, 0, 0)),
        /* Ajoute un dégradé noir transparent sur l'image */
        url('images/header8.jpg');

    background-position: center;
    /* Positionne l'image au centre */
    background-attachment: fixed;
    /* Rend l'image fixe */
}

#body_a_propos {

    background:
        linear-gradient(to bottom, rgba(0, 0, 0, 0.411), rgba(0, 0, 0, 0.486), rgb(0, 0, 0)),
        /* Ajoute un dégradé noir transparent sur l'image */
        url('images/header19.webp');

    /* Positionne l'image au centre */
    background-attachment: fixed;
    /* Rend l'image fixe */
    background-size: cover;

}

#combats_body {
    background:
        linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.288), rgb(0, 0, 0)),
        /* Ajoute un dégradé noir transparent sur l'image */
        url('images/header.jpg');

    background-position: center;
    /* Positionne l'image au centre */
    background-attachment: fixed;
    /* Rend l'image fixe */
    background-size: cover;
}


/* Animations */
#social a {
    transition: transform 0.3s ease, color 0.3s ease;
    /* Transition douce pour les transformations et les couleurs */
}

#social a:hover {
    transform: scale(1.2);
    /* Augmente la taille de l'icône au survol */
    color: rgba(184, 134, 11);
    /* Change la couleur des icônes au survol */
}

#nav a {
    transition: transform 0.3s ease, color 0.3s ease;
    /* Transition douce pour les transformations et les couleurs */
}

#nav a:hover {
    transform: scale(1.2);
    /* Augmente la taille de l'icône au survol */
}




@media (min-width: 320px) and (max-width: 375px) {

    /*Commun a toutes les pages ------------------------------------*/
    #nav {
        display: flex;
        /* Utilisation de Flexbox pour disposer les éléments */
        flex-direction: column;
        /* Element de navigation en column*/
        text-align: center;
        /* Texte aligné au centre*/
        align-items: center;
        /* Element de navigation eu centre*/
        font-size: 20px;
        /* Taille plice
        gap: 20px;
        /* Espace entre les liens des pages et les nav*/
    }

    #lien_site {
        gap: 20px;
        /* Espace entre les liens des pages*/

    }

    #main_p {
        line-height: 120%;
        /* Augmente la hauteur de ligne pour améliorer la lisibilité */
        font-size: 15px;
    }

    #section_texte {
        height: 100%;
        /* Hauteur section */

        width: 100%;
        /* Taille de la section*/

    }

    #section_img {
        display: none;
        /* Ne pas afficher l'image */
    }

    #header_soustitre {
        font-size: 15px;
        /* Taile police */
        font-family: "Exo 2", serif;
        /* Police */
    }

    /*index----------------------------------------------------*/

    #index_header_img {
        justify-content: center;
        /* Place le titre de la page au centre*/
        height: 600px;
        /* Espace entre le top et le texte*/
    }

    #index_section {
        height: 67%;
        /* La section prend 67% de la hauteur totale*/
        padding-top: 1%;
        /* Espace entre la section et le haut de la page*/
        padding-left: 1%;
        /* Espace entre la section et la gauche de la page*/
        padding-right: 1%;
        /* Espace entre la section et la droite de la page*/
    }


    /*guide ----------------------------------------------------*/

    #guide_header_img {
        justify-content: center;
        /* Place le titre de la page au centre*/
        height: 600px;
        /* Espace entre le top et le texte*/
    }

    #header_titre {
        font-size: 20px;
        /* Taille de la police du titre a 40 px*/
    }

    #guide_section {
        height: 42%;
        /* La section prend 42% de la hauteur totale*/
        padding-top: 1%;
        /* Espace entre la section et le haut de la page*/
        padding-left: 1%;
        /* Espace entre la section et la gauche de la page*/
        padding-right: 1%;
        /* Espace entre la section et la droite de la page*/

    }

    #section_vidéo iframe {
        width: 90%;
        /* Chaque vidéo occupe toute la largeur de l'écran */
        height: 100px;
        /* Hauteur fixe pour chaque vidéo */
        max-width: 800px;
        /* Limite la largeur maximale de la vidéo */
    }

    #title_combat {
        font-size: 20px;
        /*Taille des titres a 20px*/
    }

    #guide_section_img {
        display: none;
        /* Ne pas afficher l'image */
    }

    /*a propos----------------------------------------------------*/

    #apropos_header_img {
        justify-content: center;
        /* Place le titre de la page au centre*/
        height: 600px;
        /* Espace entre le top et le texte*/
    }

    #apropos_section {
        height: 70%;
        /* La section prend 70% de la hauteur totale*/
        padding-top: 1%;
        /* Espace entre la section et le haut de la page*/
        padding-left: 1%;
        /* Espace entre la section et la gauche de la page*/
        padding-right: 1%;
        /* Espace entre la section et la droite de la page*/
    }

    #_section_img {
        display: none;
        /* Ne pas afficher l'image */
    }

    #section_carte {
        display: none;
        /* Ne pas afficher l'image */
    }

}

@media (min-width: 375px) and (max-width: 425px) {

    /*Commun a toutes les pages ------------------------------------*/
    #nav {
        display: flex;
        /* Utilisation de Flexbox pour disposer les éléments */
        flex-direction: column;
        /* Element de navigation en column*/
        text-align: center;
        /* Texte aligné au centre*/
        align-items: center;
        /* Element de navigation eu centre*/
        font-size: 20px;
        /* Taille police*/
        gap: 20px;
        /* Espace entre les liens des pages et les nav*/
    }

    #lien_site {
        gap: 20px;
        /* Espace entre les liens des pages*/

    }

    #main_p {
        line-height: 120%;
        /* Augmente la hauteur de ligne pour améliorer la lisibilité */
        font-size: 15px;
        /* Taille police*/
    }

    #section_texte {
        height: 100%;
        /* Hauteur section */

        width: 100%;
        /* Taille de la section*/

    }

    #section_img {
        display: none;
        /* Ne pas afficher l'image */
    }

    /*index----------------------------------------------------*/

    #index_header_img {
        justify-content: center;
        /* Place le titre de la page au centre*/
        height: 600px;
        /* Espace entre le top et le texte*/
    }

    #index_section {
        height: 54%;
        /* La section prend 54% de la hauteur totale*/
        padding-top: 1%;
        /* Espace entre la section et le haut de la page*/
        padding-left: 1%;
        /* Espace entre la section et la gauche de la page*/
        padding-right: 1%;
        /* Espace entre la section et la droite de la page*/
    }


    /*guide ----------------------------------------------------*/

    #guide_header_img {
        justify-content: center;
        /* Place le titre de la page au centre*/
        height: 600px;
        /* Espace entre le top et le texte*/
    }

    #header_titre {
        font-size: 40px;
        /* Taille de la police du titre a 40 px*/
    }

    #guide_section {
        height: 35%;
        /* La section prend 35% de la hauteur totale*/
        padding-top: 1%;
        /* Espace entre la section et le haut de la page*/
        padding-left: 1%;
        /* Espace entre la section et la gauche de la page*/
        padding-right: 1%;
        /* Espace entre la section et la droite de la page*/

    }

    #section_vidéo iframe {
        width: 90%;
        /* Chaque vidéo occupe toute la largeur de l'écran */
        height: 100px;
        /* Hauteur fixe pour chaque vidéo */
        max-width: 800px;
        /* Limite la largeur maximale de la vidéo */
    }

    #title_combat {
        font-size: 20px;
        /* Taille des titres a 20px*/
    }

    #guide_section_img {
        display: none;
        /* Ne pas afficher l'image */
    }

    /*a propos----------------------------------------------------*/

    #apropos_header_img {
        justify-content: center;
        /* Place le titre de la page au centre*/
        height: 600px
        /* Espace entre le top et le texte*/
    }

    #apropos_section {
        height: 60%;
        /* La section prend 60% de la hauteur totale*/
        padding-top: 1%;
        /* Espace entre la section et le haut de la page*/
        padding-left: 1%;
        /* Espace entre la section et la gauche de la page*/
        padding-right: 1%;
        /* Espace entre la section et la droite de la page*/
    }

    #section_img {
        display: none;
        /* Ne pas afficher l'image */
    }

    #section_carte {
        display: none;
        /* Ne pas afficher l'image */
    }

}


@media (min-width: 425px) and (max-width: 700px) {

    /*Commun a toutes les pages ------------------------------------*/
    #nav {
        display: flex;
        /* Utilisation de Flexbox pour disposer les éléments */
        flex-direction: column;
        /*  Element de navigation en column*/
        text-align: center;
        /* Texte aligné au centre*/
        align-items: center;
        /* Element de navigation eu centre*/
        font-size: 20px;
        /* Taille police */
        gap: 20px;
        /* Espace entre les liens des pages et les nav*/
    }

    #lien_site {
        gap: 20px;
        /* Espace entre les liens des pages*/

    }

    #main_p {
        line-height: 120%;
        /* Augmente la hauteur de ligne pour améliorer la lisibilité */
        font-size: 15px;
        /* Taille police*/
    }

    #section_texte {
        height: 100%;
        /* Hauteur */
        width: 100%;
        /* Taille de la section*/

    }

    #section_img {
        display: none;
        /* Ne pas afficher l'image */
    }

    /*index----------------------------------------------------*/

    #index_header_img {
        justify-content: center;
        /* Place le titre de la page au centre*/
        height: 600px;
        /* Espace entre le top et le texte*/
    }

    #index_section {
        height: 52%;
        /* La section prend 52% de la hauteur totale*/
        padding-top: 1%;
        /* Espace entre la section et le haut de la page*/
        padding-left: 1%;
        /* Espace entre la section et la gauche de la page*/
        padding-right: 1%;
        /* Espace entre la section et la droite de la page*/
    }


    /*guide ----------------------------------------------------*/

    #guide_header_img {
        justify-content: center;
        /* Place le titre de la page au centre*/
        height: 600px;
        /* Espace entre le top et le texte*/
    }

    #header_titre {
        font-size: 40px;
        /* Taille de la police du titre a 40 px*/
    }

    #guide_section {
        height: 35%;
        /* La section prend 35% de la hauteur totale*/
        padding-top: 1%;
        /* Espace entre la section et le haut de la page*/
        padding-left: 1%;
        /* Espace entre la section et la gauche de la page*/
        padding-right: 1%;
        /* Espace entre la section et la droite de la page*/

    }

    #section_vidéo iframe {
        width: 90%;
        /* Chaque vidéo occupe toute la largeur de l'écran */
        height: 100px;
        /* Hauteur fixe pour chaque vidéo */
        max-width: 800px;
        /* Limite la largeur maximale de la vidéo */
    }

    #title_combat {
        font-size: 20px;
        /* Taille des titres a 20px*/
    }

    #guide_section_img {
        display: none;
        /* Te pas afficher l'image */
    }

    /*a propos----------------------------------------------------*/

    #apropos_header_img {
        justify-content: center;
        /* Place le titre de la page au centre*/
        height: 600px
        /* Espace entre le top et le texte*/

    }

    #apropos_section {
        height: 50%;
        /* La section prend 50% de la hauteur totale*/
        padding-top: 1%;
        /* Espace entre la section et le haut de la page*/
        padding-left: 1%;
        /* Espace entre la section et la gauche de la page*/
        padding-right: 1%;
        /* Espace entre la section et la droite de la page*/
    }

    #_section_img {
        display: none;
        /* Ne pas afficher l'image */
    }

    #section_carte {
        display: none;
        /* Ne pas afficher l'image */
    }

}


@media (min-width: 700px) and (max-width: 768px) {

    /*Commun a toutes les pages ------------------------------------*/
    #nav {
        display: flex;
        /* Utilisation de Flexbox pour disposer les éléments */
        flex-direction: column;
        /* Element de navigation en column*/
        text-align: center;
        /* Texte aligné au centre*/
        align-items: center;
        /* Element de navigation eu centre*/
        font-size: 20px;
        /* Taille police*/
        gap: 20px;
        /* Espace entre les liens des pages et les nav*/
    }

    #lien_site {
        gap: 20px;
        /* Espace entre les liens des pages*/

    }

    #main_p {
        line-height: 120%;
        /* Augmente la hauteur de ligne pour améliorer la lisibilité */
        font-size: 15px;
        /* Taille police */
    }

    #section_texte {
        height: 100%;
        /* Hauteur*/
        width: 100%;
        /* Taille de la section*/
    }

    #section_img {
        display: none;
        /* Ne pas afficher l'image */
    }

    /*index----------------------------------------------------*/

    #index_header_img {
        justify-content: center;
        /* Place le titre de la page au centre*/
        height: 600px;
        /* Espace entre le top et le texte*/
    }

    #index_section {
        height: 35%;
        /* La section prend 35% de la hauteur totale*/
        padding-top: 1%;
        /* Espace entre la section et le haut de la page*/
        padding-left: 1%;
        /* Espace entre la section et la gauche de la page*/
        padding-right: 1%;
        /* Espace entre la section et la droite de la page*/
    }


    /*guide ----------------------------------------------------*/

    #guide_header_img {
        justify-content: center;
        /* Place le titre de la page au centre*/
        height: 600px;
        /* Espace entre le top et le texte*/
    }

    #header_titre {
        font-size: 40px;
        /* Taille de la police du titre a 40 px*/
    }

    #guide_section {
        height: 25%;
        /* La section prend 25% de la hauteur totale*/
        padding-top: 1%;
        /* Espace entre la section et le haut de la page*/
        padding-left: 1%;
        /* Espace entre la section et la gauche de la page*/
        padding-right: 1%;
        /* Espace entre la section et la droite de la page*/

    }

    #section_vidéo iframe {
        width: 90%;
        /* Chaque vidéo occupe toute la largeur de l'écran */
        height: 100px;
        /* Hauteur fixe pour chaque vidéo */
        max-width: 800px;
        /* Limite la largeur maximale de la vidéo */
    }

    #title_combat {
        font-size: 20px;
        /* Taille des titres a 20px*/
    }

    #guide_section_img {
        display: none;
        /* Ne pas afficher l'image */
    }

    /*a propos----------------------------------------------------*/

    #apropos_header_img {
        justify-content: center;
        /* Place le titre de la page au centre*/
        height: 600px
        /* Espace entre le top et le texte*/
    }

    #apropos_section {
        height: 35%;
        /* La section prend 35% de la hauteur totale*/
        padding-top: 1%;
        /* Espace entre la section et le haut de la page*/
        padding-left: 1%;
        /* Espace entre la section et la gauche de la page*/
        padding-right: 1%;
        /* Espace entre la section et la droite de la page*/
    }

    #_section_img {
        display: none;
        /* Ne pas afficher l'image */
    }

    #section_carte {
        display: none;
        /* Ne pas afficher l'image */
    }
}

@media (min-width: 769px) and (max-width: 1024px) {

    /*Page Aceuille----------------------------*/
    #index_section {
        height: 50%;
        /* La section prend 50% de la hauteur totale*/
        padding-top: 1%;
        /* Espace entre la section et le haut de la page*/
        padding-left: 1%;
        /* Espace entre la section et la gauche de la page*/
        padding-right: 1%;
        /* Espace entre la section et la droite de la page*/
    }

    #main_p {
        line-height: 120%;
        /* Augmente la hauteur de ligne pour améliorer la lisibilité */
        font-size: 18px;
    }

    #header_titre {
        font-size: 80px;
        /* Taille de la police du titre a 80 px*/
    }

    /*Page Guide-----------------------------*/
    #guide_section {
        height: 35%;
        /* La section prend 35% de la hauteur totale*/
        padding-top: 1%;
        /* Espace entre la section et le haut de la page*/
        padding-left: 1%;
        /* Espace entre la section et la gauche de la page*/
        padding-right: 1%;
        /* Espace entre la section et la droite de la page*/

    }

    #section_img {
        display: flex;
        /* Utilisation de Flexbox pour la disposition des images */
        background-repeat: no-repeat;
        /* Empêche la répétition de l'image d'arrière-plan */
        height: 400px;
        /* Hauteur de l'image fixée à 40px */
        width: 300px;
        /* Largeur de l'image fixée à 300px */
        margin-top: 5%;
        /* Marge de 5% en haut */
        margin-left: 2%;
        /* Marge de 2% a gauche */
        padding-bottom: 5%;
        /* Padding en bas */
    }

    #guide_section_img {
        display: flex;
        /* Utilisation de Flexbox pour la disposition des images */
        background-repeat: no-repeat;
        /* Empêche la répétition de l'image d'arrière-plan */
        height: 350px;
        /* Hauteur de l'image fixée à 350px */
        width: 275px;
        /* Largeur de l'image fixée à 275px */
        margin-top: 10%;
        /* Marge de 10% en haut */
        margin-left: 0%;
        /* Pas de marge*/
        padding-bottom: 5%;
        /* Padding de 5% en bas */
    }

    #section_vidéo iframe {
        width: 90%;
        /* Chaque vidéo occupe presque toute la largeur de l'écran */
        height: 200px;
        /* Hauteur fixe pour chaque vidéo */
        max-width: 800px;
        /* Limite la largeur maximale de la vidéo */
    }

    /*Page A propos---------------------------*/
    #apropos_section {
        height: 50%;
        /* La section prend 50% de la hauteur totale*/
        padding-top: 1%;
        /* Espace entre la section et le haut de la page*/
        padding-left: 1%;
        /* Espace entre la section et la gauche de la page*/
        padding-right: 1%;
        /* Espace entre la section et la droite de la page*/
    }

    #section_carte iframe {
        width: 270px;
        /* Largeur*/
        height: 500px;
        /* hauteur */
    }

}

@media (min-width: 1025px) and (max-width: 1440px) {
    #section_vidéo iframe {
        width: 400px;
        /* Chaque vidéo occupe toute la largeur de l'écran */
    }

    #apropos_section {
        height: 90%;
        /* Hauteur */
    }
}