/*////////////////////////////////// MENU NAVIGATION ////////////////////////////*/
@font-face {
    font-family: 'splatch';
    src: url('Splatch.ttf') format('woff2'),
         url('Splatch.ttf') format('woff');
    font-weight: normal;
    font-style: normal;
  }


.header {
    background-color: #232621;
    width: calc(100% - 40px);
    height: 70px;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}


/* Logo */
.header__logo img {
    max-height: 50px;
}
/* Logo */

.header__nav__menu {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    align-items: center;
}

.header__nav__menu__link {
    margin-right: 20px
}

.header__nav__menu__link:last-of-type {
    margin-right: initial
}

.header__nav__menu__link a {
    color:rgb(255, 255, 255);
    font-family: Splatch;
    text-shadow: 3px 0 0 rgb(0, 0, 0), 2px 2px 0 rgb(0, 0, 0), 0 2px 0 rgb(0, 0, 0), -2px 2px 0 rgb(0, 0, 0), -2px 0 0 rgb(2, 2, 2), -2px -2px 0 rgb(0, 0, 0), 0 -2px 0 rgb(0, 0, 0), 2px -2px 0 rgb(0, 0, 0);
    font-size: 0.8em;
    font-weight: 600;
    text-decoration: none;
    position: relative;
}

.header__nav__menu__link a:after {
    content: '';
    height: 2px;
    background-color:brown;
    width: 0;
    position: absolute;
    bottom: -5px;
    right: 0;
    transition: 0.2s all ease-in-out;
}

.header__nav__menu__link a:hover:after {
    width: 100%;
    left: 0;
}

.header__burger {
    display: none;
}

.header__burger svg {
    stroke: aliceblue;
    width: 40px;
    height: 40px;
}

.header__nav__close {
    display: none;
}

@media screen and (max-width: 920px) {
    .header__nav {
        display: none;
    }

    .header__burger {
        display: block;
        cursor: pointer;
    }
    
    .header__nav {
        position: fixed;
        top: 0;
        right: 0;
        width: 300px;
        height: 100vh;
        background-color: #232621;
        display: flex;
        align-items: center;
        justify-content: center;
        transform: translateX(150%);
        transition: 0.3 transform ease-in-out;
    }

    .header__nav.open {
        transform: initial;
    }

    .header__nav__menu {
        flex-direction: column;
        align-items: flex-start;

    }

    .header__nav__menu__link {
        margin-right: 0;
        margin-bottom: 30px;
    }

    .header__nav__menu__link a {
        font-size: 1em;
    }

    .header__nav__close {
        display: block;
        cursor: pointer;
    }

    .header__nav__close svg {
        stroke: aliceblue;
        width: 40px;
        height: 40px;
        position: absolute;
        top :16px;
        right: 16px;
    }

    .overlay-menu-mobile {
        position:fixed;
        top: 0;
        left:0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.6);
        display: none;
    }

    .overlay-menu-mobile.open {
        display: block;
    }
}


/*////////////////////////////////// MENU NAVIGATION FIN ////////////////////////////*/

/*///////////////////////////////// BANNIERE////////////////////////////////////////*/

h1 {
    font-family: Splatch;
    font-size: 3em;
    text-align: center;
    top: 0;
    left: 0;
    color: white; /* Changer la couleur du texte en blanc */
    padding: 250px;
    background-attachment: fixed;
    background-size: cover;
    border: 2px solid black; /* Ajouter une bordure noire de 2px */
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
    margin: auto;
    text-shadow: 3px 0 0 rgb(0, 0, 0), 2px 2px 0 rgb(0, 0, 0), 0 2px 0 rgb(0, 0, 0), -2px 2px 0 rgb(0, 0, 0), -2px 0 0 rgb(2, 2, 2), -2px -2px 0 rgb(0, 0, 0), 0 -2px 0 rgb(0, 0, 0), 2px -2px 0 rgb(0, 0, 0);
    transition: background-color 1s, color 0.3s;
    transition: font-size 0.3s; /* Ajoute une transition en douceur pour la taille de police */
    position: relative;
    background-attachment: fixed;
    background-size: cover;
    animation: backgroundMove 20s linear infinite alternate; /* Animation du mouvement de fond */
    position: relative;
    transition: background-color 0.3s ease-in-out;
    background-image: url("Images/Bannière/Bannière\ low\ V2.png");
    background-attachment: fixed;
    background-size: contain; /* Ajuste la taille de l'image pour qu'elle soit complètement visible */
    background-repeat: no-repeat; /* Évite la répétition de l'image */
    background-position: center; /* Centre l'image horizontalement et verticalement */
    position: relative; /* Assurez-vous que la position est relative pour que l'animation fonctionne correctement */
    transition: background-color 1s, color 0.3s; /* Transition pour la couleur de fond et le texte */
}

/* Style pour les petits écrans */
@media screen and (max-width: 920px) {
    h1 {
        font-size: 2em; /* Taille réduite pour les petits écrans */
        font-family: Splatch;
        padding: 150px 0; /* Ajustez le padding vertical pour le centrage */
    }
}

@keyframes backgroundMove {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 100% 20%; /* Ajustez cette valeur pour contrôler la hauteur atteinte */
    }
}

/* Animation de l'arrière-plan pour les grands écrans */
@media screen and (min-width: 920px) {
    h1 {
        animation: backgroundMove 20s linear infinite alternate;
    }
}

h1:hover {
    background-color: rgba(0, 0, 0, 0.7); /* Couleur de fond plus foncée au survol */
    color: rgba(255, 255, 255, 0.9); /* Couleur du texte plus claire au survol */
}



/*///////////////////////////////// BANNIERE FIN ////////////////////////////////////////*/

h2 {
    font-family: Splatch;
    font-size: 1.5em;
    text-align: center;
    color: white;
    border :3px solid black;
    border-radius: 10px;
    text-shadow: 3px 0 0 rgb(0, 0, 0), 2px 2px 0 rgb(0, 0, 0), 0 2px 0 rgb(0, 0, 0), -2px 2px 0 rgb(0, 0, 0), -2px 0 0 rgb(2, 2, 2), -2px -2px 0 rgb(0, 0, 0), 0 -2px 0 rgb(0, 0, 0), 2px -2px 0 rgb(0, 0, 0);
    background-color: #413e34;
    padding: 10px;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.17) 5px -20px 25px 20px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
    
}

@media screen and (max-width: 920px) {
    h2 {
        font-family: Splatch;
        font-size: 1em;
        text-align: center;
        color: white;
        border :3px solid black;
        border-radius: 10px;
        text-shadow: 3px 0 0 rgb(0, 0, 0), 2px 2px 0 rgb(0, 0, 0), 0 2px 0 rgb(0, 0, 0), -2px 2px 0 rgb(0, 0, 0), -2px 0 0 rgb(2, 2, 2), -2px -2px 0 rgb(0, 0, 0), 0 -2px 0 rgb(0, 0, 0), 2px -2px 0 rgb(0, 0, 0);
        background-color: #413e34;
        padding: 10px;
        border-radius: 5px;
        box-shadow: rgba(0, 0, 0, 0.17) 5px -20px 25px 20px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
    }
    
  }

h3 {
    font-family: Splatch;
    font-size: 2em;
    text-align: center;
    color: white;
    text-shadow: 3px 0 0 rgb(0, 0, 0), 2px 2px 0 rgb(0, 0, 0), 0 2px 0 rgb(0, 0, 0), -2px 2px 0 rgb(0, 0, 0), -2px 0 0 rgb(2, 2, 2), -2px -2px 0 rgb(0, 0, 0), 0 -2px 0 rgb(0, 0, 0), 2px -2px 0 rgb(0, 0, 0);
    background-color: #918358;
    padding: 20px 20px 20px 20px;
    border-radius: 10px;
    border :3px solid black;
}

@media screen and (max-width: 920px) {
    h3 {
        font-family: Splatch;
        font-size: 1.3em;
        text-align: center;
        color: white;
        text-shadow: 3px 0 0 rgb(0, 0, 0), 2px 2px 0 rgb(0, 0, 0), 0 2px 0 rgb(0, 0, 0), -2px 2px 0 rgb(0, 0, 0), -2px 0 0 rgb(2, 2, 2), -2px -2px 0 rgb(0, 0, 0), 0 -2px 0 rgb(0, 0, 0), 2px -2px 0 rgb(0, 0, 0);
        background-color: #918358;
        padding: 20px 20px 20px 20px;
        border-radius: 10px;
        border :3px solid black;
    }
  }


p {
    font-family: Cheese Burger;
    font-size:1.5em;
    color: white;
    text-shadow: 2px 0 0 black, 2px 2px 0 black, 0 2px 0 black, -2px 2px 0 black, -2px 0 0 black, -2px -2px 0 black, 0 -2px 0 black, 2px -2px 0 black;
    padding: 10px 10px 10px 10px;
}

@media screen and (max-width: 920px) {
    p {
        font-family: Cheese Burger;
        font-size: 1em;
        color: white;
        text-shadow: 2px 0 0 black, 2px 2px 0 black, 0 2px 0 black, -2px 2px 0 black, -2px 0 0 black, -2px -2px 0 black, 0 -2px 0 black, 2px -2px 0 black;
        padding: 10px 10px 10px 10px;
        border-radius: 5px;
    }
  }


/* Styles globaux MARGES */

body {
    max-width: 100%;
    background-color: #181a1a;
    
}

body::before {
    content: "";
    position: fixed;
    margin-top: 60px;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("Images/Bannière/BackgroungImage.png");
    background-size: cover; /* Ajuste la taille de l'image pour qu'elle couvre entièrement le conteneur */
    opacity: 0.5; /* Réglez l'opacité souhaitée (0.5 pour 50% d'opacité) */
    z-index: -1; /* Assurez-vous que la pseudo-classe se trouve en dessous du contenu principal */
    pointer-events: none; /* Empêche la pseudo-classe de bloquer les interactions avec le contenu */
    filter: blur(4px); /* Réglez la valeur de flou souhaitée en pixels */
    /* Autres styles si nécessaire, comme la position, la taille, etc. */
}

body::before {
    /* ... autres propriétés ... */
    background-position: var(--bg-position, 0% 0%);
    transition: background-position 0.5s ease-in-out; /* Réglez la durée et le mode de transition selon vos préférences */
}


/*////////////////////////////////////////////////////////         Styles globaux MARGES          /////////////////////////////////////////*/

main {
    background-color: #232728;
    margin: 0 auto; /* Marge de 0 en haut et en bas, et centrée horizontalement */
    width: 1200px; /* Largeur fixe de 920px */
}


@media screen and (max-width: 1200px) {
    main {
        width:auto;
        margin: 0; /* Supprimez la marge sur les petits écrans */
    }
}

.conteneur-principal {
    display: flex;
    justify-content: center;
  }

@media screen and (max-width: 1200px) {
  body {
    margin: 0 0.01%; /* Marge de 2% sur les côtés gauche et droit pour les écrans plus petits */
  }
}

/*////////////////////////////////////////////////////////         Styles globaux MARGES FIN         /////////////////////////////////////////*/




/* Menu hidden */

.header {
    /* ... autres propriétés ... */
    transition: transform 0.3s ease-in-out; /* Ajoute une transition en douceur */
}

.menu-hidden {
    transform: translateY(-100%);
}

/* Menu hidden FIN */

/*////////////////////////////////        PAGE INDEX          ///////////////////////////////////////////////////*/

.conteneur {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    justify-content: center;
    margin: 20px;
}

.ImageAdaptative {
    display:block;
    width: 100%;
}

ul {
    list-style-type : none;
  }

  @media screen and (max-width: 920px) {
    .conteneur {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 5px;
        justify-content: center;
        margin: 0px;
    }
  }


  /* Style pour l'image à l'intérieur de la colonne */
.column-image2 img {
    max-width: 90%; /* Pour s'assurer que l'image est réactive et ne dépasse pas la colonne */
    height: auto; /* Conservez la proportion originale de l'image */
    margin-top: 0px; /* Faites monter l'image de 50 pixels */
    margin-bottom: -24px;
}

/* Média query pour réorganiser la disposition en version mobile */
@media screen and (max-width: 920px) {
    .column-image2 {
        flex: initial; /* Réinitialisez la propriété flex pour les deux colonnes */
        margin-top: 0px; /* Faites monter l'image de 50 pixels */
        margin-bottom: 21px;
    }
}

.column-image2 {
    text-align: center; /* Centrer horizontalement le contenu */
}

/*////////////////////////////////        PAGE INDEX FIN        ///////////////////////////////////////////////////*/



/* /////////////////////////////// Contact //////////////////////*/

form{
    color:white;
    margin-top: 100px;
}

form .corps-formulaire{
    flex-wrap:wrap;
    margin-bottom: 20px;
}

form .corps-formulaire .groupe{
    font-family: Splatch;
    font-size: 0.8em;
    margin-top: 20px;
    display: flex;
    flex-direction: column;

}

form .corps-formulaire .groupe input{
    margin-top: 5px;
    padding: 10px 5px 10px 10px;
    border :3px solid black;
    background-color: #413e34;
    outline-color: #5c5439 ;
    color: white;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

form .corps-formulaire .groupe textarea{
    margin-top: 5px;
    padding: 10px 5px 10px 10px;
    border :3px solid black;
    background-color: #413e34;
    color: white;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
    resize: none;
}

form .Pied-formulaire button{
    font-family: Splatch;
    text-shadow: 3px 0 0 rgb(0, 0, 0), 2px 2px 0 rgb(0, 0, 0), 0 2px 0 rgb(0, 0, 0), -2px 2px 0 rgb(0, 0, 0), -2px 0 0 rgb(2, 2, 2), -2px -2px 0 rgb(0, 0, 0), 0 -2px 0 rgb(0, 0, 0), 2px -2px 0 rgb(0, 0, 0);
    margin-top: 20px;
    margin-bottom: 40px;
    padding: 20px 20px 20px 20px;
    font-size: 1em;
    background-color: #413e34;
    color: white;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

form .Pied-formulaire button:hover{
     transform: scale(1.05);
}


/* /////////////////////////////// Contact //////////////////////*/

/* /////////////////////////////// Présentation //////////////////////*/

.Présentation p {
    font-family: Cheese Burger;
    font-size: 0.8em;
    background-color: #584f30;
    text-shadow: 3px 0 0 rgb(0, 0, 0), 2px 2px 0 rgb(0, 0, 0), 0 2px 0 rgb(0, 0, 0), -2px 2px 0 rgb(0, 0, 0), -2px 0 0 rgb(2, 2, 2), -2px -2px 0 rgb(0, 0, 0), 0 -2px 0 rgb(0, 0, 0), 2px -2px 0 rgb(0, 0, 0);
    display: inline-block; /* Afficher les paragraphes en ligne */
    margin: 0; /* Supprimer les marges par défaut pour éviter l'espacement excessif */
    padding: 20px 20px 20px 20px;
}

.présentation br {
    margin-top: 20px;
}

.Présentation h3 {
    font-family: Splatch;
    font-size: 1.2em;
    text-align: center;
    color: white;
    text-shadow: 3px 0 0 rgb(0, 0, 0), 2px 2px 0 rgb(0, 0, 0), 0 2px 0 rgb(0, 0, 0), -2px 2px 0 rgb(0, 0, 0), -2px 0 0 rgb(2, 2, 2), -2px -2px 0 rgb(0, 0, 0), 0 -2px 0 rgb(0, 0, 0), 2px -2px 0 rgb(0, 0, 0);
    background-color: #918358;
    padding: 20px 20px 20px 20px;
}

.conteneur1 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}


/* Style de base pour les images à l'intérieur de .Episodes */
.Episodes img {
    max-width: calc(100% - 40px); /* Ajustez la largeur en conséquence en fonction de vos marges */
    height: auto;
    background-color: #ffffff;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
    margin: 0 auto; /* Centrer horizontalement les images */
    box-sizing: border-box; /* Inclure les marges dans la largeur totale */
  }

  .Episodes {
    text-align: center; /* Centrer horizontalement le contenu */
}
  

  /* Style spécifique pour les écrans de petite taille (par exemple, smartphones) */
  @media screen and (max-width: 920px) {
    .Episodes img {
    max-width: 100%;
    background-color: #ffffff;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 2px;
    padding-right: 2px;
    margin-top: 3px;
    margin-bottom: 3px;
    }
  }

/* Style pour l'image à l'intérieur de la colonne */
.column-image img {
    max-width: 30%; /* Pour s'assurer que l'image est réactive et ne dépasse pas la colonne */
    height: auto; /* Conservez la proportion originale de l'image */
    margin-top: 0px; /* Faites monter l'image de 50 pixels */
    margin-bottom: -35px;
}

/* Média query pour réorganiser la disposition en version mobile */
@media screen and (max-width: 920px) {
    .column-image {
        flex: initial; /* Réinitialisez la propriété flex pour les deux colonnes */
        margin-top: 0px; /* Faites monter l'image de 50 pixels */
        margin-bottom: 31px;
    }
}

.column-image {
    text-align: center; /* Centrer horizontalement le contenu */
}

/* Style pour l'image à l'intérieur de la colonne */
.column-image1 img {
    max-width: 40%; /* Pour s'assurer que l'image est réactive et ne dépasse pas la colonne */
    height: auto; /* Conservez la proportion originale de l'image */
    margin-top: 0px; /* Faites monter l'image de 50 pixels */
    margin-bottom: -104px;
}

/* Média query pour réorganiser la disposition en version mobile */
@media screen and (max-width: 920px) {
    .column-image1 {
        flex: initial; /* Réinitialisez la propriété flex pour les deux colonnes */
        margin-top: 0px; /* Faites monter l'image de 50 pixels */
        margin-bottom: -0px;
    }
}

.column-image1 {
    text-align: center; /* Centrer horizontalement le contenu */
}


/*////////////////////////////////////////////// RESEAUX SOCIAUX ///////////////////////////////////////////////*/

.BoutonTwitter button {
    font-family: Splatch;
    font-size: 1.5em;
    color: white;
    text-shadow: 3px 0 0 rgb(0, 0, 0), 2px 2px 0 rgb(0, 0, 0), 0 2px 0 rgb(0, 0, 0), -2px 2px 0 rgb(0, 0, 0), -2px 0 0 rgb(2, 2, 2), -2px -2px 0 rgb(0, 0, 0), 0 -2px 0 rgb(0, 0, 0), 2px -2px 0 rgb(0, 0, 0);
    text-align: center;
    border-radius: 20px;
    border :3px solid black;
    padding: 20px 0;
    background-color: #b90000b8;
    margin: 0 30%; /* Marge de 5% sur les côtés gauche et droit par défaut */
    margin-bottom: 20px;
    box-shadow: rgba(0, 0, 0, 0.17) 5px -20px 25px 20px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
    cursor: pointer; /* Ajoutez le style de curseur pointer */
}

.BoutonTwitter button:hover {
    transform: scale(1.1);
}

.BoutonTwitter a {
    color: white;
    font-weight: bold;
    text-decoration: none;
}




@media screen and (max-width: 920px) {
    .BoutonTwitter button {
        font-family: Splatch;
        font-size: 1em;
        color: white;
        text-shadow: 3px 0 0 rgb(0, 0, 0), 2px 2px 0 rgb(0, 0, 0), 0 2px 0 rgb(0, 0, 0), -2px 2px 0 rgb(0, 0, 0), -2px 0 0 rgb(2, 2, 2), -2px -2px 0 rgb(0, 0, 0), 0 -2px 0 rgb(0, 0, 0), 2px -2px 0 rgb(0, 0, 0);
        text-align: center;
        border-radius: 20px;
        border :3px solid black;
        padding: 20px 0;
        background-color: #b90000b8;
        margin: 0 30%; /* Marge de 5% sur les côtés gauche et droit par défaut */
        margin-bottom: 20px;
        box-shadow: rgba(0, 0, 0, 0.17) 5px -20px 25px 20px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
    }
  }

/* ////////////////////////////////       FOOTER            /////////////////////////////////////µ*/

footer {
    font-family: arial;
    font-size: 1em;
    color: white;
    text-align: center;
}

/* /////////////////////   FOOTER NAV ////////////////*/

.footer__nav__menu {
    list-style: none;
    display: flex;
    align-items: center;
}

/* Supprimez la règle margin-right ici */
.footer__nav__menu__link {
    text-align: center; /* Par défaut, les liens sont centrés */
}

.footer__nav__menu__link a {
    color: rgb(255, 255, 255);
    font-family: 'arial';
    font-size: 0.8em;
    font-weight: 600;
    text-decoration: none;
}


.footer__nav__menu__link a:hover:after {
    width: 100%;
    left: 0;
}

@media screen and (max-width: 920px) {
    .footer__nav__menu {
        list-style: none;
        display: flex; /* Pour que les éléments soient côte à côte */
        align-items: center;
        text-align: center; /* Centrer le texte */
    }
    
    /* Supprimez la règle margin-right ici */
    
    .footer__nav__menu__link {
        text-align: center; /* Centrer le texte */
        margin-bottom: 0; /* Supprimer la marge inférieure */
    }

    /* Ajouter une règle pour les éléments suivants (du deuxième au dernier) */
    .footer__nav__menu__link:not(:first-child) {
        margin-left: 50px; /* Espacement horizontal de 50px */
    }
    footer {
        font-family: arial;
        font-size: 1em;
        color: white;
        text-align: center; /* Centrer le texte dans le footer */
        padding: 20px 0;
        margin: 0 1%; /* Marge de 5% sur les côtés gauche et droit par défaut */
        margin-bottom: 1px;
    }
}


/* Ajouter une règle pour les grands écrans */
@media screen and (min-width: 921px) {
    .footer__nav__menu__link:not(:first-child) {
        margin-left: 100px; /* Espacement horizontal de 100px pour les grands écrans */
    }

    .footer__nav__menu {
        justify-content: center; /* Pour centrer les éléments horizontalement */
    }
}


/*////////////////////////////////////// Info LEGALES //////////////////////////////////*/

.infoslegales h2 {
            font-family:Arial;
            font-size:2em;
            color: rgb(255, 255, 255);
            background: none; /* Supprime le fond */
            border: none;
}

.infoslegales p {
    font-family:Arial;
    font-size:1em;
    color: rgb(255, 255, 255);
    text-align: center;
    text-decoration: none;
}

.infoslegales h3 {
    font-family:Arial;
    font-size:1.5em;
    color: rgb(255, 255, 255);
    background: none; /* Supprime le fond */
    border: none;
}

.infoslegales a {
    font-family:Arial;
    font-size:1em;
    color: rgb(255, 255, 255);
    background: none; /* Supprime le fond */
    border: none;
    text-decoration: none;
}

/* ///////////////////////////////////// COOKIES ////////////////////////////////////////////*/

.BannièreCookies{
    border-top: red 5px solid ;
    background:#232621;
    position:fixed;
    bottom:0;
    left:0;
    width: 100%;
    color:white;
    display: flex;
    justify-content: space-around;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
}

.Cookies-text p {
    font-size: 1em;
    font-family: 'arial';
    text-decoration: none;
    text-align: center;
}

.Cookies-text a {
    font-size: 1em;
    font-family: 'arial';
    text-decoration: none;
    color: white;
    font-weight: bold; 
}

.button-cookies a {
    text-decoration: none;
    font-size: 1em;
    color:white;
    background: red;
    padding: 15px;
    border:solid 2px black;
    border-radius: 10px;
}

.button-cookies{
    padding: 20px;
    text-align: center;
}

/* ///////////////////////////////////// COOKIES ////////////////////////////////////////////*/

.PremierEp{
    text-align: center;
    margin: 0 30%;
    border:solid 8px rgb(255, 255, 255);
}

.PremierEp :hover{
    transform: scale(1.05);
}

/* ///////////////////////////////////////          Newsletter          ///////////////////////////////*/

.Newsletter{
    font-family: Splatch;
    font-size: 1.5em;
    color: white;
    text-decoration: none;
    text-shadow: 3px 0 0 rgb(0, 0, 0), 2px 2px 0 rgb(0, 0, 0), 0 2px 0 rgb(0, 0, 0), -2px 2px 0 rgb(0, 0, 0), -2px 0 0 rgb(2, 2, 2), -2px -2px 0 rgb(0, 0, 0), 0 -2px 0 rgb(0, 0, 0), 2px -2px 0 rgb(0, 0, 0);
    font-size: 1em;
    color:white;
    background: red;
    padding: 10px;
    border:solid 5px black;
    border-radius: 10px;
    text-align: center;
    margin-left: 30%;
    margin-right: 30%;
    margin-top: 20px;
    box-shadow: rgba(0, 0, 0, 0.17) 5px -20px 25px 20px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

.inscription{
    font-family: Splatch;
    font-size: 1em;
    color: white;
    background: rgb(59, 47, 47);
    padding: 15px;
    border-radius: 10px;
    border:solid 5px black;
    text-shadow: 3px 0 0 rgb(0, 0, 0), 2px 2px 0 rgb(0, 0, 0), 0 2px 0 rgb(0, 0, 0), -2px 2px 0 rgb(0, 0, 0), -2px 0 0 rgb(2, 2, 2), -2px -2px 0 rgb(0, 0, 0), 0 -2px 0 rgb(0, 0, 0), 2px -2px 0 rgb(0, 0, 0);
}

.inscription:hover{
    transform: scale(1.05);
}


.confirmation-dialog {
    background-color: #fff; /* Couleur de fond */
    border: 2px solid #007bff; /* Bordure */
    color: #333; /* Couleur du texte */
    padding: 10px; /* Espacement interne */
    border-radius: 5px; /* Coins arrondis */
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); /* Ombre */
}