/* =========================================================
   LAYOUT GLOBAL
========================================================= */

html,
body {
    max-width: 100%;
    overflow-x: clip;
}

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

body.layout {
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    display: grid;
    grid-template-rows: auto 1fr auto;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
}

.layout,
.layout-main,
.page {
    min-width: 0;
}

/* Main doit tenir compte de la navbar fixed */
.layout-main {
    padding-top: var(--nav-h);
}

/* Wrapper page par défaut */
.page {
    width: min(100%, var(--wrap-wide));
    margin-inline: auto;
    padding: var(--gutter-y) var(--gutter-x);
}

.page-fluid {
    width: 100%;
}

/* Liens dans le contenu (hors navbar) */
.layout-main a {
    text-underline-offset: 0.18em;
}

.page-content a,
.richtext a,
.entry a {
    color: var(--accent);
    text-decoration: underline;
}

.page-content a:hover,
.richtext a:hover,
.entry a:hover {
    text-decoration-thickness: 2px;
}