*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: black;
    color: #F1F2E9;
}

br{
    height:2px;
}

#header h1 {
    color: #F1F2E9;
    text-align: center;
    font-size: 5em ;
    text-shadow: 5em black;
    margin-bottom: 3rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    z-index: 2;
    background-image: 
        repeating-linear-gradient(
            45deg, /* Direction du hachurage */
            transparent,
            transparent 8px, /* Taille du transparent */
            rgba(0, 0, 0, 0.1) 10px, /* Début de la ligne hachurée */
            rgba(0, 0, 0, 0.6) 11px /* Fin de la ligne hachurée */
        );
    padding:20px;
}


#header{
    background-image:url(images/background.jpg) ;
    background-size: cover; /* ou cover, selon l'effet désiré */
    background-position: center bottom; /* aligne l'image de fond en bas du conteneur */
    background-attachment: fixed;
    height:100vh;
    width:100%;
    display: flex;
    flex-direction: column; /* Empile les éléments verticalement */
    justify-content: center; /* centre horizontalement */
    align-items: center; /* centre verticalement */
}

.liste a{
    text-decoration: none;
    color:#F1F2E9;
}

.liste {
    list-style-type: none; /* Enlève les puces de la liste */
    padding: 0; /* Enlève le padding par défaut de la liste */
    margin: 0; /* Enlève la marge par défaut de la liste */
    display: flex; /* Affiche les éléments de la liste horizontalement */
    justify-content: center; /* Centre les éléments de la liste dans le conteneur */
    gap: 1rem; /* Ajoute de l'espace entre les éléments de la liste */
    z-index: 2;
    width:70%;
    flex-wrap: wrap;
}
.liste a{
    padding:10px;
    padding-left:20px;
    padding-right:20px;
    font-size: 1.5em;
    border-radius: 15px;
}
.section{
    width:100%;
    text-align:center;
    padding-bottom: 100px;
    align-items: center;
    display: flex;
    flex-direction: column;
}
.centrage{
    width:70%;
    display:flex;
    align-items: center;
}
.biographie_texte{
    column-count: 2;
    column-gap:20px;
}
.titre{
    align-self: center;
    font-size:2.5em;
    margin-bottom: 25px;
    padding-top:60px;
    text-transform: uppercase;
    letter-spacing: 4px;
}

#biographie{
    background-color: #637368;
    background-repeat: repeat;
    background-blend-mode: multiply; /* Mélange ton image avec la couleur de fond */
}

#biographie .centrage{
    align-items: start;
}

#biographie img{
    flex: 0 1 auto;
    margin-right: 1rem;
    width:170px;
    padding-right:20px;
}


#biographie p{
    margin-bottom: 20px;
    text-align: left;
}

.filet{
    border: none; /* Enlève la bordure par défaut */
    border-top: 2px solid #000; /* Crée un filet horizontal */
    margin:0; /* Ajoute de l'espace au-dessus et en dessous du filet */
    border-color : #F1F2E9;
    width:185px;
    margin-bottom:60px;
}

#livres{
    background-color:#182612;
}

#items{
    display:flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
}

#livres img{
    flex: 0 1 auto;
    margin-right: 1rem;
    width:170px;
    padding-right:20px;
}

#livres p{
    text-align:left;
    line-height: 1;
}

.desc{
    flex-grow:10;
    overflow:auto;
}
.vcentre{
    display:flex;
    align-items: center;
    margin-bottom:60px;
    margin-top:60px;
}

.livre_resume{
    column-count:1;
    display:flex;
    flex-direction: column;
    text-align: left;
    justify-content: space-between;
    min-height:221px;

}

.livre_resume a{
    color:white;
    margin-top:20px;
}

.livre_resume ul{
    display: flex;
    flex-direction: row;
    list-style-type: none;
    width:100%;
    justify-content:flex-start;
    justify-self: end;
}

.livre_resume ul li{
    margin-right:30px;
}

#contact{
    background-color:#070D06;
}

.deco{
    width:100%;
    height:100px;
    top:100px;
    
}
#un{
    background-image: url(images/backgrounds/top_3.png);
    background-color:#637368;
}
#deux{
    background-image: url(images/backgrounds/top_2.png);
    background-color:#182612;
}

form{
    width:100%;
    display:grid;
    flex-direction: column;
    gap: 20px;
    
}
#form1{
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
}
#form2{
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
}
#form3{
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
}
#form4{
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 3;
    grid-row-end: 4;
    display:grid;
}
.entree{
    width:100%;
    background-color:#070D06;
    color:#F1F2E9;
    border-color: #F1F2E9;
    padding: 10px;
}
.entree::placeholder{
    color:#F1F2E9;
}
#envoyer{
    justify-self: end;
    color:#F1F2E9;
    border-color: #F1F2E9;
    background-color:#070D06;
}
#envoyer:hover{
    cursor: pointer;
}
button{
    padding: 10px;
    justify-self: end;
    align-self:flex-end;
}
#message{
    height:200px;
}
.sstitre{
    align-self: center;
    font-size:1.5em;
    margin-bottom: 10px;
    padding-top:60px;
    text-transform: uppercase;
    letter-spacing: 4px;
}
.ssfilet{
    border: none; /* Enlève la bordure par défaut */
    border-top: 1px solid #000; /* Crée un filet horizontal */
    margin:0; /* Ajoute de l'espace au-dessus et en dessous du filet */
    border-color : #F1F2E9;
    width:70px;
    margin-bottom:60px;
}
#contact{
    padding-bottom:60px;
}

@media screen and (max-width: 1200px){
    .biographie_texte{
        column-count: 1;
        column-gap:20px;
    }
}
@media screen and (max-width: 800px){
    .liste{
        flex-direction: column;
        text-align: center;
    }
    #biographie .centrage{
        flex-direction: column;
        align-items: center;
    }
    #biographie img{
        margin-bottom:60px;
        margin-right:0px;
        padding-right:0px;
    }
    .centrage{
        flex-direction: column;
    }
    #livres img{
        width:200px;
        padding:0px;
        margin:0px;
        margin-bottom:60px;
    }
}