@import url('https://fonts.googleapis.com/css2?family=Coda:wght@400;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Coda:wght@400;800&display=swap');
body{
    margin: 0;
    padding: 0;
    color: white;
    background-color: black;
}

header{
    display: flex;
    flex-direction: row-reverse;
    height: 40%;
    padding: 5%;
    background-size: cover;
    padding: 5%;
    position: sticky;
    top: 0;
    
    
}
#logo{
    width: 115px;
    height: 107px;
    background-size: cover;
}
h1{
    color: white;
    font-size: 1.6rem;
    padding-bottom: 0;
    padding-top: 70px;
    font-family: "Coda", system-ui;
    font-weight: 700;
    font-style: normal;
    text-decoration: none
}
.arriere-flou{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url(img/head.jpg) center/cover no-repeat;
    filter: blur(4px); 
    z-index: -1; 
    padding: 5%;
    background-size: cover;
   

}
.menu-burger {
    background-color: #222327;
    display: flex;
    
  }
  
  .burger-icon {
    font-size: 2.4rem;
    cursor: pointer;
    padding: 15px;
    color: white;
  }
  #nav{
    z-index: -1;
  }
  #nav-menu {
    position: absolute;
    top: 50px;
    left: -300%;
    width: 100vh;
    color: white;
    display: none; /* caché par défaut */
  }
  
  #nav-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  #nav-menu ul li {
    text-align: center;
    font-size: 1.2rem;
    font-family: "Poppins", serif;
    color: white;
  }
  
  #nav-menu ul li a {
    text-decoration: none;
  }
  #nav-menu img{
    height: 6vh;
    background-size: cover;
  }
    
.hidden {
    display: none;
  }
  
  .candidat{
    padding-bottom: 15px;
  }
  
  .close-icon {
    display: block;
    margin: 0 auto;
    cursor: pointer;
    width: 30%;  
    height: 60px;
    padding: 10px;
  }
  .menu-burger img{
    background-size: cover;
    flex-direction: row-reverse;
    height: 22px;
    align-items: center;  
}
.menu-burger img#france {
    order: 2; /* Place le drapeau après le burger */
    width: 33px;
    height: 22px;
    background-size: cover;
    margin-left: auto; /* Espace entre le burger et le drapeau */
    align-items: center;
    padding: 30px 0px 30px 0px;
}
.menu-burger img#compte {
    order: 3; /* Place le drapeau après le burger */
    width: 33px;
    height: 22px;
    background-size: cover;
    align-items: center;
    padding: 30px 15px 0px 10px;
}



.slider-container {
    max-width: 48vh;
    position: relative;
    margin: auto;
    height: 350px;
    overflow: hidden;
}
.menu label {
    cursor: pointer;
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #ccc;
    border-radius: 50px;
    margin: 0 0.2em 1em;
}
.menu{
    position: absolute;
    left: 0;
    z-index: 11;
    width: 100%;
    bottom: 0;
    text-align: center;
}
.menu label {
    cursor: pointer;
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #ccc;
    border-radius: 50px;
    margin: 0 0.2em 1em;
}
.menu label:hover,.menu label:focus {
    background: #968271;
}
.slide-input{
    opacity: 0;
}
.slide-img {
    width: 100%;
    height: 300px;
    position: absolute;
    top: 0;
    left: 100%;
    z-index: -1;
    transition: left 0s 0.75s;
}
[id^="slide"]:checked + .slide-img {
    left: 0;
    z-index: 100;
    transition: left 0.65s ease-out;
}
.sale {
    background-image: url(img/sale.jpg);
    background-size: cover;
    text-align: center;
    padding: 20%;
    background-position: center;
    height: 8vh;
    margin-bottom: 5vh;

}
.sale-text {
    font-size: 2em;
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;

    
}
.sale-text a {
    text-decoration: none;  /* Enlève le soulignement */
    color: inherit;         /* Garde la couleur d'origine du texte */
}

.sale-text a:visited {
    color: inherit;         /* Enlève la couleur violette des liens visités */
}
h2{
    font-size: 2.5em;
    margin: 0;
}
h3{
    font-size: 1.4em;
    margin: 0;
    padding-left: 90%;
    font-weight: 100;
}
h2, h3{
    text-shadow:
    -3px -3px 0 #000,  /* Je sais, c'est très fort ;)  (2000iq) */
     3px -3px 0 #000,  
    -3px  3px 0 #000,  
     3px  3px 0 #000;  

}

#menu2 h4{
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.6em;
    text-align: center;
    background-color: rgba(139, 138, 138, 0.568);
    justify-content: space-between;
    flex-direction: column;
    padding: 0.81685vh; /* Et ouais, je suis précis comme mek ✨*/
    margin: 8vh 0 0vh 0;
    color: rgb(255, 255, 255);
}
nav a{
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.6em;
    color: white;

}
nav li{
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.6em;
    text-align: center;
    background-color: rgba(139, 138, 138, 0.685);
    justify-content: space-between;
    flex-direction: column;
    padding: 2.222vh; /* Et ouais, je suis précis comme mek ✨*/
    margin: 2vh 0 2vh 0;
    color: rgb(255, 255, 255);
}
#menu2{
    height: 60vh;
    background-image: url(img/menu.jpg);
    display: flex;
    flex-direction: column-reverse; /* C'est quoi "vivre pour les caméras" ✨*/
    background-size: cover;


}

#nav-menu {
    height: 60vh;
    background-image: url(img/burger.jpg);
    display: flex;
    flex-direction: column-reverse; /* C'est quoi "vivre pour les caméras" ✨*/
    background-size: cover;
}
  .burger-logo {
    font-size: 2.4rem;
    cursor: pointer;
    padding: 15px;
  }
  
  #nav-menu {
    position: absolute; 
    top: 50px;
    left: 0%;
    width: 100vw;
    color: white;
    display: none; 
  }
  
  #nav-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  #nav-menu ul li {
    text-align: center;
    font-size: 1.2rem;
    font-family: "Poppins", serif;
    margin: 4vh 0 0vh 0;
  }
  
  #nav-menu ul li a {
    color: white;
    text-decoration: none;
  }
  
  .cacher {
    display: none;
  }
  
  .candidat{
    padding-bottom: 15px;
  }
  
  .logo-fermeture {
    display: block;
    margin: 0 auto;
    cursor: pointer;
    height: 60px;
    padding: 10px;
  }
  #escroquerie{
    display: none;
  }
  @media (min-width: 550px) 

    header{
        padding: 3vh;
        flex-direction: row-reverse;
        margin: 0;
    }
    #logo {
        width: 13vw;
        height: 16vh;
        background-size: cover;
        margin-left: 5vw; /* Colle le logo à gauche */
    } 
    h1{
        margin-left: 3vw;
        margin-right: 50vh;
        font-size: 2.2rem;
    }
    #escroquerie{
        display: flex;
        padding: 0 10vw 0 3vw;
    }
    #escroquerie a{
        font-family: "Bebas Neue", serif;
        font-weight: 200;
        font-style: normal;
        text-decoration: none;
        padding: 2vh 3vw 0 3vw;
        
    }
    .burger-logo{
        display: none;
    }
    #france img{
        margin-left: 0;
    }
    .menu-burger img#france {
        margin-left: 0;
    }
    .sale {
        background-image: url(img/sale.jpg);
        background-size: cover;
        text-align: center;
        background-position: center;
        height: 2vh;
        margin-bottom: 5vh;
        padding: 6vh 12.5vh 17vh 12.5vh;
    
    }
    .sale-text h3{
        font-size: 100px;
    }
    
/* Effet hover pour les li */
a:hover {
    transform: scale(1.1);
    color: #968271;
    transition: all 0.3s ease;
}

/* Effet hover pour les p */
p:hover {
    transform: scale(1.1);
    color: #968271;
    transition: all 0.3s ease;
}

/* Effet hover pour les h2 */
h2:hover {
    transform: scale(1.1);
    color: #968271;
    transition: all 0.3s ease;
}

/* Effet hover pour les h3 */
h3:hover {
    transform: scale(1.1);
    color: #968271;
    transition: all 0.3s ease;
}
h4:hover {
    transform: scale(1.1);
    color: #968271;
    transition: all 0.3s ease;
}
ul li a {
    color: white; /* Définit la couleur des liens */
    text-decoration: none; /* Enlève le soulignement si nécessaire */
    transition: color 0.3s ease; /* Transition fluide pour le hover */
}

/* Style pour les liens visités */
ul li a:visited {
    color: white; /* Garde la couleur blanche pour les liens visités */
}

/* Style pour les liens au hover */
ul li a:hover {
    color: #968271; /* Change la couleur au hover */
    transform: scale(1.1); /* Agrandit légèrement */
    transition: all 0.3s ease;
}

/* Style pour les liens actifs */
ul li a:active {
    color: #968271; /* Change la couleur quand on clique */
}

footer a{
    color: white;
    text-decoration: none;
}
#menu2 a {
    text-decoration: none;  /* Supprime le soulignement */
    color: inherit;         /* Garde la couleur du texte original */
}

#menu2 a:hover {
    color: #968271;         /* Change la couleur lors du survol (ici bleu) */
}
footer {
    background-color: rgb(63, 62, 62); /* Même couleur que #triso */
    text-align: center;
    padding: 20px;
    font-family: "Bebas Neue", sans-serif;
    color: white;
}

footer p {
    margin: 0;
    font-size: 1.2rem;
}