/* ==================================
   RESET & BASE STYLES
   ================================== */

/* Reset de base */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 62.5%;
    /* 1rem = 10px */
    height: 100%;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: var(--font-body);
    font-size: 1.6rem;
    line-height: 1.8;
    color: var(--color-text);
    background-color: var(--color-bg);
    min-height: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
    overflow-x: hidden;
    max-width: 100vw;
}

/* ==================================
   VARIABLES CSS
   ================================== */

:root {
    /* Couleurs - Scheme 1 (défaut) */
    --color-bg: rgb(250, 250, 250);
    --color-text: rgba(18, 18, 18, 0.75);
    --color-heading: rgb(18, 18, 18);
    --color-border: rgb(186, 186, 186);

    /* Couleurs - Scheme 2 (beige/or) */
    --color-scheme-2-bg: rgb(193, 180, 141);
    --color-scheme-2-text: rgb(255, 255, 255);
    --color-scheme-2-contrast: rgb(134, 119, 73);

    /* Couleurs - Scheme 3 (kaki) */
    --color-scheme-3-bg: rgb(142, 131, 101);
    --color-scheme-3-text: rgb(18, 18, 18);
    --color-scheme-3-contrast: rgb(67, 62, 48);

    /* Couleurs - Scheme 4 (noir) */
    --color-scheme-4-bg: rgb(18, 18, 18);
    --color-scheme-4-text: rgb(255, 255, 255);

    /* Couleurs - Scheme 5 (gris clair) */
    --color-scheme-5-bg: rgb(227, 227, 227);
    --color-scheme-5-text: rgb(18, 18, 18);

    /* Typographie */
    --font-body: "Anonymous Pro", monospace;
    --font-heading: "Alegreya", serif;
    --font-body-scale: 1.0;
    --font-heading-scale: 1.0;

    /* Espacements */
    --spacing-xs: 0.8rem;
    --spacing-sm: 1.6rem;
    --spacing-md: 2.4rem;
    --spacing-lg: 3.6rem;
    --spacing-xl: 4.8rem;
    --spacing-xxl: 6.4rem;

    /* Largeurs */
    --page-width: 120rem;
    --content-width: 75rem;

    /* Bordures */
    --border-radius: 0;
    --border-width: 1px;

    /* Transitions */
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* ==================================
   TYPOGRAPHIE
   ================================== */

/* Chargement des fonts */
@font-face {
    font-family: "Anonymous Pro";
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url("//larbrequimarche.fr/cdn/fonts/anonymous_pro/anonymouspro_n4.f8892cc1cfa3d797af6172c8eeddce62cf610e33.woff2") format("woff2");
}

@font-face {
    font-family: "Anonymous Pro";
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url("//larbrequimarche.fr/cdn/fonts/anonymous_pro/anonymouspro_n7.1abf60a1262a5f61d3e7f19599b5bc79deae580f.woff2") format("woff2");
}

@font-face {
    font-family: "Alegreya";
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url("//larbrequimarche.fr/cdn/fonts/alegreya/alegreya_n4.9d59d35c9865f13cc7223c9847768350c0c7301a.woff2") format("woff2");
}

/* Titres */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 400;
    line-height: 1.2;
    color: var(--color-heading);
    margin-bottom: var(--spacing-md);
}

h1,
.h1 {
    font-size: calc(var(--font-heading-scale) * 4rem);
    margin-bottom: var(--spacing-lg);
}

h2,
.h2 {
    font-size: calc(var(--font-heading-scale) * 3.2rem);
}

h3,
.h3 {
    font-size: calc(var(--font-heading-scale) * 2.4rem);
}

h4,
.h4 {
    color: var(--color-heading);
}
    margin-bottom: var(--spacing-md);
}

strong,
b {
    font-weight: 700;
    color: var(--color-heading);
}

/* Liens */
a {
    color: var(--color-text);
    text-decoration: underline;
    transition: opacity var(--transition-base);
}

a:hover {
    opacity: 0.7;
}

/* Listes */
ul,
ol {
    margin-bottom: var(--spacing-md);
    padding-left: var(--spacing-lg);
}

/* ==================================
   UTILITAIRES
   ================================== */

.page-width {
    max-width: var(--page-width);
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

.page-width--narrow {
    max-width: var(--content-width);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

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

/* Schémas de couleurs */
.color-scheme-1 {
    background-color: var(--color-bg);
    color: var(--color-text);
}

.color-scheme-2 {
    background-color: var(--color-scheme-2-bg);
    color: var(--color-scheme-2-text);
}

.color-scheme-3 {
    background-color: var(--color-scheme-3-bg);
    color: var(--color-scheme-3-text);
}

.color-scheme-4 {
    background-color: var(--color-scheme-4-bg);
    color: var(--color-scheme-4-text);
}

.color-scheme-5 {
    background-color: var(--color-scheme-5-bg);
    color: var(--color-scheme-5-text);
}

/* ==================================
   RESPONSIVE
   ================================== */

@media screen and (min-width: 750px) {
    body {
        font-size: 1.6rem;
    }

    h1,
    .h1 {
        font-size: calc(var(--font-heading-scale) * 5rem);
    }
}

@media screen and (min-width: 990px) {
    :root {
        --spacing-md: 3rem;
        --spacing-lg: 4rem;
        --spacing-xl: 5.6rem;
        --spacing-xxl: 8rem;
    }
}