/* Global colors */
:root
{
    --color-page: #fffdfb;
    --color-surface: #f8f2ee;
    --color-surface-strong: #efe4dc;
    --color-border: #dfcec2;
    --color-text: #2f2825;
    --color-muted: #6f6660;
    --color-accent: #8f171d;
    --color-accent-soft: #fff7f5;
    --gradient-link: linear-gradient(to top, rgba(47, 40, 37, 0.74), rgba(47, 40, 37, 0.08));
    --shadow-soft: 0 14px 34px rgba(62, 39, 31, 0.12);
    --page-width: 1000px;
}

html
{
    background: #f5eee8;
}

body
{
    background: var(--color-page);
    color: var(--color-text);
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.45;
    margin: auto;
    max-width: var(--page-width);
    min-height: 100vh;
}

/* Global elements */

a
{
    color: var(--color-accent);
}

img
{
    max-width: 100%;
}

button,
input,
textarea
{
    font: inherit;
}

#general
{
    box-sizing: border-box;
}

/* Fond de page */
.page-band
{
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
}


/* Bouton de navigation */

.button-primary,
.button-secondary
{
    align-items: center;
    border-radius: 8px;
    display: inline-flex;
    font-weight: 700;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    text-decoration: none;
}

.button-primary
{
    background: var(--color-accent);
    color: #ffffff;
}

.button-secondary
{
    background: transparent;
    border: 1px solid var(--color-accent);
    color: var(--color-accent);
}

.button-margin
{
    margin-top: 28px;
}

/* styles titre */

.small-title
{
    color: var(--color-accent);
    font-size: 0.86em;
    font-weight: 700;
    letter-spacing: 0.8px;
    margin: 0 0 8px;
    text-transform: uppercase;
}

.title-main,
.title-section
{
    color: var(--color-text);
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    line-height: 1.02;
    margin: 0;
}

.title-main
{
    font-size: 3.1em;
}

.title-section
{
    font-size: 2.35em;
}

@media screen and (max-width: 600px), screen and (max-device-width: 700px) {
    .title-main
    {
        font-size: 2.35em;
    }

    .title-section
    {
        font-size: 2em;
    }
}