:root {
    --green: #69c95a;
    --green-dark: #2f7f3b;
    --green-soft: #eef8eb;

    --coral: #e96f70;
    --coral-dark: #cf5b5d;

    --header-green: #8BCB67;

    --black: #171917;
    --grey: #6b706b;
    --light-grey: #f5f6f3;
    --border: #dde2da;
    --white: #ffffff;

    --page-width: 1120px;
}


/* ========================================
BASE
======================================== */

* {
    box-sizing: border-box;
}


html {
    min-height: 100%;

    scroll-behavior: smooth;
}


body {
    min-height: 100vh;

    margin: 0;

    display: flex;
    flex-direction: column;

    font-family: Arial, Helvetica, sans-serif;

    color: var(--black);

    background: var(--white);
}


/*
 * Le contenu principal occupe tout l'espace
 * disponible entre le header et le footer.
 *
 * Sur une page courte, cela pousse naturellement
 * le footer en bas de l'écran.
 */

main {
    flex: 1 0 auto;
}


.site-footer {
    flex-shrink: 0;
}


a {
    color: inherit;
}


/* ========================================
FLÈCHES
======================================== */

.site-arrow {
    display: block;

    height: auto;

    flex-shrink: 0;
}


.site-arrow-straight {
    width: 23px;
    height: 23px;

    display: block;

    flex-shrink: 0;
}


@media (max-width: 760px) {

    .site-arrow-straight {
        width: 21px;
        height: 21px;
    }

}


/* ========================================
TITRES
======================================== */

/*
 * Sur les grands écrans, les titres ne doivent
 * pas conserver un max-width prévu pour mobile
 * ou tablette.
 *
 * Cela évite par exemple :
 *
 * "Qui porte la"
 * "marche ?"
 *
 * alors qu'il reste beaucoup de place.
 */

@media (min-width: 1200px) {

    main h1,
    main h2,
    .page-title,
    .section-title {
        width: 100%;

        max-width: none !important;
    }

}


/* ========================================
TRÈS GRAND ÉCRAN
======================================== */

/*
 * Pour les vrais titres principaux de page,
 * à partir d'une largeur confortable,
 * on peut également empêcher le retour
 * à la ligne.
 */

@media (min-width: 1500px) {

    main h1,
    .page-title {
        white-space: nowrap;
    }

}