:root {
    --primary-color: #F5EEE9;
    --secondary-color: #5F6351;
    --blue-color: #213B4E;
    --btn-actif: #E4D1C4;
    --secondary-color-dark: hsl(138, 11%, 12%);
}

@font-face {
    font-family: 'Constantia';
    src: url("fonts/Constantia/Constantia-gDhiuCz.woff2") format('woff2'),
        url("fonts/Constantia/Constantia-Z08jo-Q.woff") format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Constantia';
    src: url("fonts/Constantia-Bold/Constantia-Bold-NYHLL8q.woff2") format('woff2'),
        url("fonts/Constantia-Bold/Constantia-Bold-aRLOAvS.woff") format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Constantia';
    src: url("fonts/Constantia-Italic/Constantia-Italic-VlqpH-D.woff2") format('woff2'),
        url("fonts/Constantia-Italic/Constantia-Italic-4NkIYvY.woff") format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url("fonts/Roboto-Regular/Roboto-Regular-Q296cGy.woff2") format('woff2'),
        url("fonts/Roboto-Regular/Roboto-Regular-S8u0Mfc.woff") format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url("fonts/Roboto-Bold/Roboto-Bold-XwYjVtl.woff2") format('woff2'),
        url("fonts/Roboto-Bold/Roboto-Bold-cKE-WXF.woff") format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url("fonts/Roboto-Italic/Roboto-Italic-jjNDjTA.woff2") format('woff2'),
        url("fonts/Roboto-Italic/Roboto-Italic-KXe51vD.woff") format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'angelina';
    src: url("fonts/angelina-AD0VKp4.woff") format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

header {
    height: 89px;
}

body {
    font-family: 'Roboto-Regular', sans-serif;
    background-color: var(--primary-color);
    color: var(--blue-color);
}

.textVert{
    color:var(--secondary-color);

    & a {
        color:var(--secondary-color);
    }
}

.textBleu{
    color:var(--blue-color);

    & a {
        color:var(--blue-color);

        &:hover {
            color:var(--secondary-color);
        }
    }
}

/* Import des styles pour les composants */
@import './nav.css';
@import './breadcrumb.css';

section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    font-size: 1rem;
    width: 100%;
    max-width: 960px;

    & .titre {
        font-family: 'Constantia-Bold', serif;
        font-size: 2rem;
    }
}

.massages a{
    color: var(--blue-color);
    text-decoration: none;
}