/* ========================================================================== */
/* 1. POLICES                                                                 */
/* ========================================================================== */

/* Police principale du site : utilisée pour les textes courants. */
@font-face {
    font-family: 'Quicksand';
    src: url('/font/Quicksand/Quicksand-VariableFont_wght.ttf') format('truetype');
    font-display: swap;
    /* Affiche une police de secours pendant le chargement. */
}

/* Police décorative utilisée pour les titres et la navigation. */
@font-face {
    font-family: 'Aboreto';
    src: url('../font/Aboreto/Aboreto-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ========================================================================== */
/* 2. VARIABLES GLOBALES                                                      */
/* ========================================================================== */

:root {
    --color-text: #3d3623;
    /* Couleur principale des textes. */
    --color-title: #885036;
    /* Couleur principale des titres. */
    --color-section-alt: rgba(202, 176, 106, 0.1);
    /* Fond d'une section sur deux. */
    --content-max-width: 1200px;
    /* Largeur maximale du contenu. */
    --radius: 10px;
    /* Rayon commun des blocs et images. */
}

/* ========================================================================== */
/* 3. COMPORTEMENT GÉNÉRAL                                                    */
/* ========================================================================== */

html {
    scroll-behavior: smooth;
    /* Rend les ancres plus fluides. */
}

/* Empêche la page de défiler quand la lightbox est ouverte. */
body:has(#lightbox.open) {
    overflow: hidden;
}

/* ========================================================================== */
/* 4. TITRES                                                                  */
/* ========================================================================== */

/* Base commune à tous les titres. */
h1,
h2,
h3,
h4 {
    margin-top: 2rem;
    /* Espace avant le titre. */
    color: var(--color-title);
    /* Couleur brune de la charte. */
    font-family: 'Aboreto';
    /* Police décorative. */
    font-size: 1.5rem;
    /* Taille par défaut des titres secondaires. */
    line-height: 1.2;
    /* Hauteur de ligne compacte. */
    text-transform: uppercase;
    /* Affiche les titres en majuscules. */
}

/* Titre principal de page. */
h1 {
    margin-bottom: 1.5rem;
    font-size: 2.6rem;
    font-weight: bold;
    word-break: break-word;
    /* Évite qu'un long titre déborde de l'écran. */
}

/* Titres principaux de section. */
h2 {
    margin-bottom: 1.5rem;
    font-size: 2rem;
}

/* Réduit l'espace lorsqu'un h3 est immédiatement suivi d'un paragraphe. */
h3:has(+ p) {
    margin-bottom: 0;
}

/* Le h1 et le texte du header sont clairs car placés sur une image sombre. */
h1,
header p {
    color: rgb(233, 233, 233) !important;
}

/* Réduit le gros titre sur les écrans intermédiaires et petits. */
@media (max-width: 946px) {
    h1 {
        font-size: 1.4rem !important;
    }
}

/* ========================================================================== */
/* 5. TEXTE COURANT                                                           */
/* ========================================================================== */

/* Typographie commune des textes, liens, listes et citations. */
ul li,
dd,
dl,
dt,
p,
a,
blockquote footer {
    color: var(--color-text);
    font-family: 'Quicksand';
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0;
}

/* Renforce les balises <b>. */
b {
    font-weight: bold;
}

/* Espacement vertical standard des paragraphes, listes et citations. */
p,
ul,
blockquote {
    margin-bottom: 2rem;
}

/* Rapproche un paragraphe de la liste qui le suit. */
p:has(+ ul) {
    margin-bottom: 0.2rem;
}

/* Rapproche le texte d'une citation de son auteur. */
blockquote p {
    margin-bottom: 0.2rem;
}

/* Texte d'introduction dans le header. */
header p {
    font-size: 1.5rem;
}

/* ========================================================================== */
/* 6. LISTES                                                                  */
/* ========================================================================== */

/* Style des listes classiques. */
ul li {
    margin-left: 3rem;
    margin-bottom: 0.3rem;
    list-style-type: disc;
}

/* Retire la puce du parent lorsqu'il contient une sous-liste. */
ul li:has(ul) {
    list-style-type: none;
}

/* Évite un espace inutile après le dernier élément d'une sous-liste. */
ul li ul li:last-child {
    margin-bottom: 0 !important;
}

/* Supprime les marges externes des sous-listes. */
ul li ul {
    margin: 0 !important;
}

/* ========================================================================== */
/* 7. CLASSES UTILITAIRES                                                     */
/* ========================================================================== */

.bold {
    font-weight: bold;
    /* Force un texte en gras. */
}

.bigger {
    font-size: 1.2rem;
    /* Agrandit légèrement un texte. */
}

.uppercase {
    text-transform: uppercase !important;
    /* Force l'affichage en majuscules. */
}

/* Couleurs sémantiques utilisées dans les contenus. */
.red {
    color: red;
}

.purple {
    color: #A02A93;
}

.orange {
    color: #E09731;
}

.blue {
    color: #0E9ED5;
}

.green {
    color: #4DA72D;
}

.grey {
    color: #929292;
}

/* ========================================================================== */
/* 8. SECTIONS ET BLOCS                                                       */
/* ========================================================================== */

/* Ajoute un fond léger à une section sur deux. */
section:nth-of-type(even) {
    background-color: var(--color-section-alt);
}

/* Conteneur principal de chaque section. */
section {
    max-width: var(--content-max-width) !important;
    margin: 0 auto 2em;
    /* Centre la section et crée l'espace inférieur. */
    padding: 1rem 3rem 0.1rem 3rem;
    border-radius: var(--radius);
}

/* Réduit l'espace sous les groupes d'images. */
.image-section {
    margin-bottom: 1rem !important;
}

/* Grille utilisée pour les blocs d'informations pratiques. */
.block-info-block {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
}

/* Espace interne de chaque bloc d'information. */
.info-block {
    padding: 2rem;
}

/* Sur mobile, les blocs d'informations passent sur une seule colonne. */
@media (max-width: 768px) {
    .block-info-block {
        grid-template-columns: 1fr;
    }

    section {
        padding: 1.5rem 1.25rem 0.1rem;
        /* Réduit les marges latérales sur mobile. */
    }
}

/* Sépare visuellement le header du contenu principal. */
header {
    margin-bottom: 2rem !important;
}