/************************************************
*                   VARIABLES                   *
************************************************/

:root{
    /* Couleurs marque */
    --color-beige: #F7F1E5; /* Light Beige */
    --color-gold:  #C79209; /* Dark Gold */
    --color-blue:  #0E4496; /* Dark Blue */

    /* Neutres */
    --color-white: #FFFFFF;
    --color-black: #111111;
    --color-beige-2: #E9E2D3;
    --light-highlight: #efefef;
    --light-gold: #fbf7ef;

    /* Variations */
    --color-blue-light: #2359ab;
    --color-blue-dark: #16396d;

    /* Rôles */
    --bg: var(--color-white);
    --surface: var(--color-beige);
    --border: var(--color-beige-2);

    --text: var(--color-black);
    --text-muted: #4B5563;

    --text-inverse: var(--color-white);
    --text-inverse-muted: #D1D5DB;

    --primary: var(--color-blue);
    --on-primary: var(--color-white);

    --secondary: var(--color-gold);
    --on-secondary: var(--color-black); /* important pour l'accessibilité */

    --link: var(--color-blue);
    --link-hover: #0C3C84; /* bleu légèrement plus sombre */
    --focus: var(--color-blue);
}

/************************************************
*                     FONTS                     *
************************************************/

@font-face {
    font-family: 'Faune';
    src:    url('../fonts/eot/Faune-Display_Black.eot');
    src:    url('../fonts/eot/Faune-Display_Black.eot?#iefix') format('embedded-opentype'),
            url('../fonts/woff/Faune-Display_Black.woff') format('woff'),
            url('../fonts/woff2/Faune-Display_Black.woff2') format('woff2'),
            url('../fonts/ttf/Faune-Display_Black.ttf') format('truetype'),
            url('../fonts/svg/Faune-Display_Black.svg#svgFontName') format('svg');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Faune';
    src:    url('../fonts/eot/Faune-Display_Bold_Italic.eot');
    src:    url('../fonts/eot/Faune-Display_Bold_Italic.eot?#iefix') format('embedded-opentype'),
            url('../fonts/woff/Faune-Display_Bold_Italic.woff') format('woff'),
            url('../fonts/woff2/Faune-Display_Bold_Italic.woff2') format('woff2'),
            url('../fonts/ttf/Faune-Display_Bold_Italic.ttf') format('truetype'),
            url('../fonts/svg/Faune-Display_Bold_Italic.svg#svgFontName') format('svg');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Faune';
    src:    url('../fonts/eot/Faune-Display_Thin.eot');
    src:    url('../fonts/eot/Faune-Display_Thin.eot?#iefix') format('embedded-opentype'),
            url('../fonts/woff/Faune-Display_Thin.woff') format('woff'),
            url('../fonts/woff2/Faune-Display_Thin.woff2') format('woff2'),
            url('../fonts/ttf/Faune-Display_Thin.ttf') format('truetype'),
            url('../fonts/svg/Faune-Display_Thin.svg#svgFontName') format('svg');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Faune';
    src:    url('../fonts/eot/Faune-Text_Bold.eot');
    src:    url('../fonts/eot/Faune-Text_Bold.eot?#iefix') format('embedded-opentype'),
            url('../fonts/woff/Faune-Text_Bold.woff') format('woff'),
            url('../fonts/woff2/Faune-Text_Bold.woff2') format('woff2'),
            url('../fonts/ttf/Faune-Text_Bold.ttf') format('truetype'),
            url('../fonts/svg/Faune-Text_Bold.svg#svgFontName') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Faune';
    src:    url('../fonts/eot/Faune-Text_Italic.eot');
    src:    url('../fonts/eot/Faune-Text_Italic.eot?#iefix') format('embedded-opentype'),
            url('../fonts/woff/Faune-Text_Italic.woff') format('woff'),
            url('../fonts/woff2/Faune-Text_Italic.woff2') format('woff2'),
            url('../fonts/ttf/Faune-Text_Italic.ttf') format('truetype'),
            url('../fonts/svg/Faune-Text_Italic.svg#svgFontName') format('svg');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Faune';
    src:    url('../fonts/eot/Faune-Text_Regular.eot');
    src:    url('../fonts/eot/Faune-Text_Regular.eot?#iefix') format('embedded-opentype'),
            url('../fonts/woff/Faune-Text_Regular.woff') format('woff'),
            url('../fonts/woff2/Faune-Text_Regular.woff2') format('woff2'),
            url('../fonts/ttf/Faune-Text_Regular.ttf') format('truetype'),
            url('../fonts/svg/Faune-Text_Regular.svg#svgFontName') format('svg');
    font-weight: normal;
    font-style: normal;
}


/************************************************
*                      BASE                     *
************************************************/

* {
    font-family: 'Faune', serif;
    line-height: 1.5;
}

body {
    margin: 0;
    padding: 0;
    font-size: 16px; /* Base font size, TODO: make bigger and adapt media queries/style */
    box-sizing: border-box;
}

main {
    font-size: 1.2em;
}

section {
    padding: 2rem;
    color: var(--primary);
}

.section-contenu {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

/* all section except last have a separator */
section:not(:last-of-type) {
    border-bottom: 1px solid var(--color-beige);
}

/* every other section has a light gold background */
section:nth-of-type(even) {
    background-color: var(--light-gold);
}

.separateur {
    height: 0.3em;
    width: 5em;
    background-color: var(--primary);
}

.dore {
    background-color: var(--color-gold);
}

.separateur-centre {
    margin: 1.5em auto;
    height: 0.3em;
    width: 5em;
    background-color: var(--primary);
}