/* Général */

* {
    margin: 0;
    padding: 0;
    font-family: Garamond, serif;
}

:root {
    --textColor: #272727;
    --terra1: rgb(85, 6, 6);
    --terra2: #8a3d24;
    --terra3: #975f4c;
    --terra4: #b06851;
    --terra5: #D5AB96;
    --terra6: #eed6cb;
    --color2: #E08E79;
    --blockBgColor: var(--terra5);
    --bodyBgColor: var(--terra6);
    --titleColor: var(--terra4);
    --headTitleColor: var(--terra1);
    --link: var(--terra2);
    --linkVisited: var(--terra3);
    --linkHoover: var(--color2);
    --nbPhoto: 7;
}

.container {
    width: 1000px;
    margin: 0 auto;
}

body {
    background-color: var(--bodyBgColor);
    padding: 16px;
    color: var(--textColor);
}


/* présentation titre photo et nav */

header h1 {
    font-size: 75px;
    font-weight: bold;
    color: var(--headTitleColor);
    border-radius: 5px;
    padding: 5px 0px;
    text-align: center;
    letter-spacing: 5px;
}

header .note {
    color: var(--titleColor);
    font-size: 75px;
}

header img {
    display: block;
    margin: auto;
}

nav ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    font-size: 20px;
    margin-top: 16px;
    margin-bottom: 16px;
    text-align: center;
    list-style: none;
}

nav ul li {
    flex-grow: 1;
}

nav ul li:before {
    content: ">>";
    color: var(--titleColor);
    font-weight: bold;
    margin-right: 8px;
}

.navigation:link {
    color: var(--link);
}

.navigation:hover {
    background-color: var(--linkHoover);
    border-radius: 3px;
}

.navigation:visited {
    color: var(--linkVisited);
}


/* block généraux */

.block {
    background-color: var(--blockBgColor);
    font-size: 18px;
    margin-bottom: 1em;
    margin-top: 1em;
    padding: 16px;
    border-radius: 5px;
    text-align: justify;
    margin-left: 20px;
    margin-right: 20px;
    padding: 16px;
}

.block h2 {
    margin-bottom: 16px;
    font-size: 30px;
    color: var(--titleColor);
}

.list_style li {
    list-style: none;
}

.list_style li:before {
    content: ">>";
    color: var(--titleColor);
    font-weight: bold;
    margin-left: 20px;
    margin-right: 8px;
}

.etoile {
    margin-top: 8px;
    font-size: 14px;
    font-style: italic;
}

.sous_titre {
    font-size: 40px;
    text-align: center;
    color: var(--headTitleColor);
    margin-top: 20px;
    margin-bottom: 20px;
}

.special {
    color: var(--headTitleColor);
    font-weight: bold;
}


/* footer */

footer {
    font-size: 16px;
    font-style: italic;
    text-align: center;
    margin-bottom: 20px;
}

footer .copyright {
    font-size: 8px;
    font-style: italic;
}