/* ----------------------------------
   RESET
---------------------------------- */

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

/* ----------------------------------
   MISE EN PAGE GÉNÉRALE
---------------------------------- */

body{
	background: #f4f0e8;
    background-image:url("../images/papier.jpg");
    background-position:center top;
    background-size:cover;
    background-attachment:fixed;

    color:#444;
    font-family:"Josefin Slab", serif;
    font-size:1.3rem;

    padding-bottom:50px;
}

/* ----------------------------------
   EN-TÊTE ET NAVIGATION
---------------------------------- */

header{
    text-align:center;
    padding:10px 20px 40px 20px;
}

nav{
    text-align:right;
    margin-bottom:25px;
}

nav a{
    color:#715a43;
    text-decoration:none;
    margin:0 5px;
    font-size:1rem;
}

nav a:hover{
    text-decoration:underline;
}

/* ----------------------------------
   TITRE DU SITE
---------------------------------- */

.titre-site{
    font-family:"WindSong", cursive;
    font-size:2.5rem;
    font-weight:400;
    color:#715a43;
    line-height:1;
}

.titre-site a{
    color:#715a43;
    text-decoration:none;
}

.titre-site a:hover{
    opacity:0.8;
}

@media (max-width:768px){

    .titre-site{
        font-size:2rem;
    }

}

/* ----------------------------------
   TITRES DE PAGES
---------------------------------- */

h1{
    text-align:center;
    font-weight:normal;
	font-size:1.6rem;
    margin-bottom:60px;
}

/* ----------------------------------
   PAGE D'ACCUEIL
---------------------------------- */

.sous-titre{
    text-align:center;
    margin-bottom:40px;

    font-size:1.2rem;
    letter-spacing:0.05em;
}

.sous-titre span{
    font-size:1rem;
    opacity:0.8;
}

.ligne-separation{
    display:block;
    width:100%;
    max-width:500px;

    margin:10px auto 20px auto;
}

/* ----------------------------------
   GALERIE
---------------------------------- */

.galerie{
    width:90%;
    max-width:900px;
    margin:0 auto;

    display:grid;
    grid-template-columns:repeat(3,1fr);

    gap:12px;
}

.oeuvre{
    display:block;
    aspect-ratio:1/1;
    overflow:hidden;

    box-shadow:0 4px 12px rgba(0,0,0,0.50);
}

.oeuvre img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;

    transition:transform .3s ease;
}

.oeuvre:hover img{
    transform:scale(1.03);
}

.galerie-annee{
    text-align:center;
    font-size:1rem;
    font-weight:normal;
    letter-spacing:0.15em;
    color:#715a43;
    margin:60px 0 25px 0;
}

/* ----------------------------------
PAGES ŒUVRES
---------------------------------- */

.page-oeuvre{
width:90%;
max-width:900px;
margin:0 auto;
}

figure{
margin:0;
text-align:center;
}

.image-oeuvre{
display;
width:100%;
max-width:700px;
margin:40px auto;

box-shadow:0 4px 12px rgba(0,0,0,0.50);

}

figcaption{
font-style;
}

.texte-page{
max-width:700px;
margin:40px auto;
padding:40px;
background:#fffdf9;
box-shadow:0 2px 8px rgba(0,0,0,0.10);
line-height:1.7;
text-align:left;
}

/* ----------------------------------
   PAGES DE TEXTE
---------------------------------- */

.texte-page{
    max-width:700px;
    margin:40px auto;
    padding:40px;

    background:#fffdf9;

    box-shadow:0 2px 8px rgba(0,0,0,0.10);

    line-height:1.7;
}

.texte-page p{
    margin-bottom:1.5em;
}

/* ----------------------------------
   FORMULAIRE
---------------------------------- */

form{
    max-width:700px;
    margin:40px auto;
}

input,
textarea{
    width:100%;

    padding:10px;

    margin-top:5px;
    margin-bottom:20px;

    font-family:"Josefin Slab", serif;
    font-size:1rem;
}

button{
    padding:10px 20px;

    border:none;

    background:#715a43;
    color:white;

    cursor:pointer;
}

/* ----------------------------------
   FOOTER
---------------------------------- */

footer{
    text-align:center;
    padding:40px 20px;
}

footer a{
    color:inherit;
    text-decoration:none;
}

footer a:hover{
    text-decoration:underline;
}

.mentions{
    font-size:1rem;
}

.mentions a{
    color:#715a43;
    text-decoration:none;
}

.mentions a:hover{
    text-decoration:underline;
}