*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

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

/* Le body reprend son comportement naturel pour le blog */
body {
    font-family: var(--font-family);
    background: var(--bg);
    color: var(--text);
    width: 100%;
    margin: 0;
    padding: 0;
    /* 🔥 ON ANNULE LE BLOCAGE DE MAIN.CSS 🔥 */
    overflow-y: auto;
    height: auto;
    min-height: 100vh;
}

/* Style du conteneur global du bloc de code */
pre {
    padding: var(--spacing-unit); /* Ajoute de l'espace à l'intérieur du bloc */
    margin: var(--spacing-unit) 0; /* Aligne l'espacement avec le reste de tes paragraphes */
    border-radius: var(--border-radius, 8px); /* Arrondit les angles pour plus de douceur */
    overflow-x: auto; /* Essentiel : empêche une ligne de code trop longue de casser le design en ajoutant un défilement horizontal */
    border: 1px solid var(--border); /* Optionnel : une petite bordure élégante pour délimiter le bloc */
}

/* Style de la police informatique */
code,
pre,
kbd,
samp {
    font-family: var(--font-family-mono) !important;
    font-size: 0.9em;
}

/* Bonus : style pour le code "en ligne" (quand tu encadres un mot avec de simples backticks dans une phrase) */
:not(pre) > code {
    background-color: var(--color-bg-alt);
    padding: 0.2em 0.4em;
    border-radius: 4px;
}

/* Le conteneur qui gère la largeur, le centrage et esquive le menu */
.site-wrapper {
    /* Largeur gérée dans responsive.css */
    /*width: 100%;*/
    /*max-width: var(--max-width);*/
    margin: 0 auto !important; /* Force le centrage */
    padding: 100px var(--spacing-unit-double) var(--spacing-unit); /* Dégage la ligne rouge */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

h1,
h2,
h3,
h4,
h5,
h6,
.site-title {
    font-family: var(--font-heading);
    line-height: var(--line-height-heading);
    margin-bottom: var(--spacing-unit);
    letter-spacing: 0.01em;
}

h1 {
    font-size: var(--font-size-h1);
    margin-top: var(--spacing-unit-double);
}
h2,
.site-title {
    font-size: var(--font-size-h2);
}
h2 {
    margin-top: var(--spacing-unit-triple);
}
h3 {
    font-size: var(--font-size-h3);
    margin-top: var(--spacing-unit);
}
h4 {
    font-size: var(--font-size-h4);
}
h5 {
    font-size: var(--font-size-h5);
}
h6 {
    font-size: var(--font-size-h6);
}

p,
ul,
ol {
    margin-bottom: var(--spacing-unit);
}

a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s;
}

a:hover,
a.active {
    border-color: var(--accent);
}

ul,
ol {
    margin-bottom: var(--spacing-unit);
    padding-left: 1.2rem;
}

hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: var(--spacing-unit) 0;
}