/* Corps du site */
body {
    font-family: 'Libre Baskerville', serif;
    text-align: center;
    background: radial-gradient(#F2CEA2, #999999);
    
}

/* Styles pour le header */
header {
    padding: 25px;
    background-color: #3d3d3d;
    height: 100px;
    position: relative;
    text-decoration: none;
}
/*Logo site de l'en-tête*/
.logo_site_header {
    width: 110px 110px;
    height: 130px 130px;
    text-align: left;
    float: left;
}
/*Image des langues (Français, Anglais)*/
.img_lang {
    max-height: 40px; /* Limite la hauteur de l'image du drapeau anglais */
    margin: 10px 20px; /* Ajusté les marges pour un meilleur espacement */
    text-align: end;
    float: right;
}

/*Styles pour le footer*/
footer{
    padding: 30px;
    background-color: #3d3d3d;
    height: 100px;
}
/*Logo site du pied de page*/
.logo_site_footer{
    float: right;
    width: 100px;
    height: 130px;
}

/*Texte liens de l'en-tête et du pied de page*/
.txt_header, .txt_footer{
    text-align: center;
    padding: 20px;
    color: #F2E750;
    line-height: 90px;
    text-decoration: none;
}

.titre_header{
    font-weight: bolder;
    text-align: center;
    line-height: 60px;
    color: #F2E750;
    font-size:xx-large;
}

/*animation des liens*/
.txt_header:hover, .txt_footer:hover{
    background-color: #000000;
    padding: 20px;
    text-decoration: underline;
}

/*La bannière du site dans la page accueil*/
.banniere {
    padding: 70px;
    margin: 20px; /* Ajusté la marge pour un meilleur espacement */
    text-align: center;
}
/*Titre de texte*/
h1 {
    text-align: center;
    margin: 20px; /* Ajusté la marge pour un meilleur espacement */

}
/*Sous-titre de texte*/
h2{
    text-align: left;
    margin: 30px;
}

/*page contact*/
.titre_contact{
    padding: 10px;
}
/*les mails pros*/
.contacts{
    text-align: center;
}
/*images réseaux sociaux*/
.img_x, .img_instagram, .img_facebook{
    padding: 100px;
}

/* images réseaux responsive */
.img_x, .img_instagram, .img_facebook {
    padding: 100px; 
    display: inline-block; 
    max-width: 100%; 
}

/*ajustement responsive réseaux sociaux*/
@media (max-width: 768px) {
    .img_x, .img_instagram, .img_facebook {
        padding: 20px; 
    }
}


/*corps de texte*/
p{
    margin: 30px;
    text-align: justify;
    line-height: 30px;
}
/*Les listes*/
ul{
    text-align: left;
    margin: 30px;
}
/*Images de la page informations*/
.img_bitcoin, .img_litecoin, .img_theta{
    float: right;
    padding: 40px;
}

.img_ethereum, .img_dogecoin{
    float: left;
    padding: 40px;
}

/*Titre des mentions légales*/
.titre_legal{
    text-decoration: none;
    text-align: left;
    color: #F2E750;
}

/*Menu Burger déroulant*/
#burger {
    width: 30px;
    height: 20px;
    cursor: pointer;
    display: none; /* Cacher le bouton de burger par défaut */
    
}

.line {
    width: 100%;
    height: 3px;
    background-color: #333;
    margin: 5px 0;
    transition: 0.4s;
    
}



#burger-toggle:checked + label .line:nth-child(1) {
    transform: rotate(-45deg) translate(-5px, 6px);
    
}

#burger-toggle:checked + label .line:nth-child(2) {
    opacity: 0;
    
}

#burger-toggle:checked + label .line:nth-child(3) {
    transform: rotate(45deg) translate(-5px, -6px);
}

#burger-toggle:checked + label + nav {
    display: block;
    text-align: center;
    background-color: #333;
    
}

nav ul {
    list-style: none;
    padding: 0;
    
}

nav ul li {
    padding: 20px 0;
    
}

nav ul li a {
    text-decoration: none;
    font-size: 18px;
    color: #f2e750;
}

/*Désactivation d'élément pour la version pc qui apparaitront uniquemen dans la version responsive*/

#burger-toggle, nav, .banniere_responsive, .container {
    display: none;
    
}


/*responsive*/
@media screen and (max-width: 768px) {
    .txt_header, .logo_site_footer, .logo_site_header, .banniere{
        display: none;
    }
    
    img{
        float: none;
    }

    .img_bitcoin,.img_dogecoin,.img_ethereum,.img_litecoin,.img_theta{
        text-align: center;
        display: block;
        margin: 60px;    
    }

    footer{
        display: flex;
    }

    .banniere_responsive{
        display: block;
        margin-top: 30px;
    }
   
    #burger-toggle {
        display: none;
    }
    #burger {
        display: block;
    }
}