/*
 * Fondation visuelle commune du Labo.
 * L’accueil reste la référence de cette palette.
 */

:root {
    --ink: #172033;
    --ink-soft: #53606f;
    --ivory: #fbf8f1;
    --paper: #ffffff;
    --turquoise: #176b68;
    --turquoise-dark: #105653;
    --turquoise-light: #d8efec;
    --amber: #d9952f;
    --amber-light: #f8e8c8;
    --border: #d8dde5;
    --border-strong: #aeb7c4;
    --focus: #0b6bcb;
    --shadow: 0 18px 50px rgba(23, 32, 51, 0.10);
    --shadow-soft: 0 8px 24px rgba(23, 32, 51, 0.05);
    --radius-small: 10px;
    --radius-card: 16px;
    --radius-panel: 20px;
}

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

html {
    scroll-behavior: smooth;
}

.site-shell {
    min-width: 320px;
    margin: 0;
    background: var(--ivory);
    color: var(--ink);
    font-family: Inter, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    text-rendering: optimizeLegibility;
}

.site-shell :where(h1, h2, h3, h4) {
    color: var(--ink);
    font-family: Literata, Georgia, serif;
}

.site-shell :where(button, input, select, textarea) {
    font: inherit;
}

.site-shell :where(a, button, input, select, textarea):focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
}

.site-shell img {
    max-width: 100%;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* Pages membres éditoriales en pleine largeur. */

.site-shell.dashboard-page .account-page,
.site-shell.notifications-page .account-page {
    display: block;
    width: min(1180px, calc(100% - 40px));
    min-height: 0;
    margin-inline: auto;
    padding: clamp(1.5rem, 4vw, 3rem) 0 4.5rem;
}

.site-shell.dashboard-page .account-introduction,
.site-shell.notifications-page .account-introduction {
    display: grid;
    max-width: none;
    margin: 0 0 1.5rem;
    padding: clamp(1.4rem, 4vw, 2.5rem);
    border: 1px solid var(--border);
    border-radius: var(--radius-panel);
    background:
        radial-gradient(
            circle at top right,
            var(--turquoise-light),
            transparent 42%
        ),
        var(--paper);
    box-shadow: var(--shadow-soft);
}

.site-shell.dashboard-page .account-introduction h1,
.site-shell.notifications-page .account-introduction h1 {
    max-width: 850px;
    margin: 0.65rem 0 0.8rem;
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    line-height: 1.05;
}

.site-shell.dashboard-page .account-introduction > p,
.site-shell.notifications-page .account-introduction > p {
    max-width: 760px;
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.65;
}

.site-shell.dashboard-page .principles,
.site-shell.notifications-page .principles {
    margin-top: 1.2rem;
}

.site-shell.dashboard-page .account-card,
.site-shell.notifications-page .account-card {
    width: 100%;
    padding: clamp(1.25rem, 4vw, 2.5rem);
    border-color: var(--border);
    border-radius: var(--radius-panel);
    background: var(--paper);
    box-shadow: var(--shadow);
}

@media (max-width: 820px) {
    .site-shell.dashboard-page .account-introduction,
    .site-shell.notifications-page .account-introduction {
        text-align: left;
    }

    .site-shell.dashboard-page .account-introduction > p,
    .site-shell.notifications-page .account-introduction > p {
        margin-inline: 0;
    }

    .site-shell.dashboard-page .principles,
    .site-shell.notifications-page .principles {
        justify-content: flex-start;
    }
}

@media (max-width: 560px) {
    .site-shell.dashboard-page .account-page,
    .site-shell.notifications-page .account-page {
        width: min(100% - 28px, 1180px);
        padding-top: 1rem;
    }

    .site-shell.dashboard-page .account-introduction,
    .site-shell.notifications-page .account-introduction,
    .site-shell.dashboard-page .account-card,
    .site-shell.notifications-page .account-card {
        border-radius: var(--radius-card);
    }
}