/* Configuration des variables */
:root,
*::before,
*::after {
    --font-size-h1: 5.9rem;
    --font-size-h2: 4rem;
    --font-size-h3: 3rem;
    --font-size-xxl: 2.5rem;
    --font-size-xl: 2.3rem;
    --font-size-l: 2rem;
    --font-size-m: 1.8rem;
    --font-size-s: 1.6rem;
    --font-size-standard: 1.8rem;
    --font-size-xs: 1.3rem;
    --font-size-xxs: 1rem;
    --line-height: 1.5em;
    --line-height-title: 1.15em;
    --font-size-menu-projects: 5rem;
    --font-color: #000;
    --font-color-invert: #FFF;
}

@media screen and (max-width: 1300px) {
    :root,
    *::before,
    *::after {
        --font-size-h1: 5rem;
        --font-size-h2: 3rem;
        --font-size-h3: 2.5rem;
        --font-size-xxl: 2.3rem;
        --font-size-xl: 2.15rem;
        --font-size-l: 2rem;
        --font-size-m: 1.75rem;
        --font-size-s: 1.5rem;
        --font-size-standard: 1.6rem;
        --font-size-menu-projects: 4rem;
    }
}

@media screen and (max-width: 900px) {
    :root,
    *::before,
    *::after {
        --font-size-h1: 4rem;
        --font-size-h2: 2.5rem;
        --font-size-h3: 2.15rem;
        --font-size-xxl: 2.15rem;
        --font-size-xl: 2rem;
        --font-size-l: 1.8rem;
        --font-size-m: 1.6rem;
        --font-size-s: 1.4rem;
        --font-size-standard: 1.6rem;
        --font-size-menu-projects: 3rem;
    }
}

@media screen and (max-width: 450px) {
    :root,
    *::before,
    *::after {
        --font-size-h1: 4rem;
        --font-size-h2: 2.5rem;
        --font-size-h3: 2.15rem;
        --font-size-xxl: 2rem;
        --font-size-xl: 2rem;
        --font-size-l: 1.8rem;
        --font-size-m: 1.6rem;
        --font-size-s: 1.4rem;
        --font-size-standard: 1.6rem;
        --font-size-menu-projects: 3rem;
    }
}

/* Berthold */
@font-face {
    font-family: "Berthold";
    src: url("../Fonts/berthold-akzidenz-grotesk-be-extended.otf") format("truetype");
}

@font-face {
    font-family: "Berthold_Bold";
    src: url("../Fonts/berthold-akzidenz-grotesk-be-medium-extended.ttf") format("truetype");
}

@font-face {
    font-family: "Berthold_Light";
    src: url("../Fonts/berthold-akzidenz-grotesk-be-light.otf") format("truetype");
}

/* TWK Everett */
@font-face {
    font-family: "TWK_Everett";
    src: url("../Fonts/TWKEverett-Regular.otf") format("truetype");
}

@font-face {
    font-family: "TWK_Everett_Bold";
    src: url("../Fonts/TWKEverett-Bold.otf") format("truetype");
}

@font-face {
    font-family: "TWK_Everett_Extrabold";
    src: url("../Fonts/TWKEverett-Extrabold.otf") format("truetype");
}

/* MinionPro */
@font-face {
    font-family: "MinionPro";
    src: url("../Fonts/MinionPro-Regular.otf") format("truetype");
}

@font-face {
    font-family: "MinionPro_Bold";
    src: url("../Fonts/MinionPro-Bold.otf") format("truetype");
}

/* Globale */
html {
    font-size: 62.5%;
}

body {
    font-family: "MinionPro";
    font-size: var(--font-size-l);
    line-height: var(--line-height);
    color: var(--font-color);
}

body.layout--4,
body.layout--4 *::before,
body.layout--4 *::after {
    --font-color: #FFF;
    --font-color-invert: #000;
}

h1 {
    font-size: var(--font-size-h1);
    line-height: var(--line-height-title);
    font-weight: 400;
}

h2 {
    font-size: var(--font-size-h2);
    line-height: var(--line-height-title);
}

h3 {
    font-size: var(--font-size-h3);
    line-height: var(--line-height);
}

a,
a:visited {
    color: var(--font-color);
    text-decoration: underline;
    text-underline-offset: calc(var(--spacer) / 2);
}

a:hover,
a:focus {
    text-decoration: none;
}

.text-center {
    text-align: center;
}

.text-end {
    text-align: right;
}

.sa-caps {
    text-transform: uppercase;
}

/* Header */
body > header * {
    font-family: "TWK_Everett";
    font-size: var(--font-size-s);
    line-height: var(--line-height);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.header__page > a,
.header__page > button,
.menu-lang__link {
    font-size: var(--font-size-xs);
    line-height: var(--line-height);
    text-decoration: none;
}

.header__page > a:hover,
.header__page > a:focus,
.header__page > button:hover,
.header__page > button:focus,
.header__page--active > a,
.header__page--active > button {
    text-decoration: underline;
}

.header__page--active > a:hover,
.header__page--active > a:focus,
.header__page--active > button:hover,
.header__page--active > button:focus {
    text-decoration: none;
}

.menu-lang__link:hover,
.menu-lang__link:focus {
    text-decoration: underline;
}

a.menu-lang__link--active {
    display: none;
}

.header__categorie a {
    font-size: var(--font-size-menu-projects);
    line-height: 1.2em;
    font-weight: 700;
    text-decoration: none;
}

.header__categorie a:hover,
.header__categorie a:focus {
    text-decoration: underline;
}

.header__categories-pages-list li:first-child a {
    font-family: "TWK_Everett_Extrabold";
    font-weight: normal;
}

/* Footer */
footer * {
    font-family: "TWK_Everett";
    font-size: var(--font-size-s);
    line-height: var(--line-height);
}

/* Boutons */
.button {
    font-size: var(--font-size-s);
    line-height: var(--line-height);
    color: var(--font-color-invert);
}

.button:hover,
.button:focus {
    color: var(--font-color);
}

/* Figure */
.frame-type-image figcaption,
.frame-type-textpic figcaption,
.sa-figure figcaption {
    font-size: var(--font-size-s);
    line-height: var(--line-height);
    color: var(--font-color);
}

/* Page projet */
.page--project h1 {
    font-family: "TWK_Everett";
    font-size: var(--font-size-xl);
    font-weight: 500;
    line-height: var(--line-height);
    letter-spacing: 0.69px;
}

.project__introduction-datas-innerContainer p,
.project__introduction-datas-innerContainer ul li,
.project__pdf {
    font-family: "TWK_Everett";
    font-size: var(--font-size-xs);
    font-weight: 400;
    line-height: var(--line-height);
}

.project__pdf {
    text-decoration: none;
}

.project__pdf:hover,
.project__pdf:focus {
    text-decoration: underline;
}

.project__introduction-innerContainer p,
.project__introduction-innerContainer li {
    font-size: var(--font-size-xl);
    line-height: 1.25em;
}

/* Page éditorial */
.page--editorial h1 {
    margin-bottom: calc(var(--spacer) * 10);
}

@media screen and (max-width: 900px) {
    .page--editorial h1 {
        margin-bottom: calc(var(--spacer) * 5);
    }
}

.page--editorial h2 {
    font-family: "TWK_Everett";
    font-weight: 500;
    letter-spacing: 1.2px;
}

.page--editorial .sa-section__content p {
    font-size: var(--font-size-xl);
    line-height: 1.16em;
}

/* Page listing */
.page--listing h1 {
    margin-bottom: calc(var(--spacer) * 5);
}

@media screen and (max-width: 900px) {
    .page--listing h1 {
        margin-bottom: calc(var(--spacer) * 2.5);
    }
}

/* Container over 3 cols */
.sa-container.sa-container--over-3cols .sa-container__title {
    font-family: 'TWK_Everett';
    font-size: var(--font-size-xl);
    font-weight: 500;
    text-transform: uppercase;
}

.sa-container.sa-container--over-3cols .sa-container__inner-container > div:first-child p {
    font-family: 'TWK_Everett';
    font-weight: 500;
    letter-spacing: 0.69px;
}

/* ctype uploads */
.sa-uploads__item-link-container {
    font-family: 'TWK_Everett';
}

.sa-uploads__item-link {
    text-decoration: none;
}

.sa-uploads__item-link:hover,
.sa-uploads__item-link:focus {
    text-decoration: underline;
}