2025/themes/2026/assets/css/base.css

html {
    color-scheme: dark;
    font-size: max(100%, var(--font-size-root-min));
}

body {
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    line-height: 1.7;
    background: linear-gradient(
        170deg,
        color-mix(in srgb, var(--color-background-wash) 16%, var(--color-background-alt)) 0%,
        color-mix(in srgb, var(--color-background-wash) 8%, var(--color-background-alt)) 46%,
        color-mix(in srgb, var(--color-background-wash) 4%, var(--color-background-deep)) 100%
    );
    color: var(--color-text);
    padding: var(--space-4);
}

body > header,
body > main,
body > footer {
    width: min(100%, var(--max-width));
    margin-inline: auto;
}

body > main,
body > footer {
    margin-bottom: var(--space-6);
}

body > main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
}

main > article {
    min-width: 0;
    width: min(100%, var(--max-width-reading));
}

h1,
h2,
h3 {
    font-family: var(--font-heading);
    line-height: 1.15;
    color: var(--color-heading);
    text-wrap: balance;
    letter-spacing: 0.01em;
    font-weight: 700;
}

h1 {
    font-size: clamp(2rem, 4.2vw, 4rem);
    text-transform: uppercase;
}

h2 {
    font-size: clamp(1.35rem, 2.2vw, 2rem);
}

h3 {
    font-size: clamp(1.05rem, 1.7vw, 1.35rem);
}

main > article > :not(footer.article-footer) :is(strong, b) {
    font-weight: 800;
    color: var(--color-heading);
    text-shadow: none;
    background-image: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--color-strong-highlight) 82%, var(--color-background-deep)) 0%,
        color-mix(in srgb, var(--color-strong-highlight) 92%, var(--color-background-deep)) 100%
    );
    background-size: 100% 1em;
    background-position: 0 52%;
    background-repeat: no-repeat;
    padding: 0 0.12em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

p,
ul,
ol,
figure,
pre,
blockquote,
table,
section,
article,
aside,
nav,
details,
dl {
    margin-top: var(--space-3);
}

a {
    color: var(--color-link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: color-mix(in srgb, currentColor 72%, transparent);
    text-underline-offset: 0.15em;
    word-break: break-word;
}

a:hover,
a:focus-visible {
    color: var(--color-link-hover);
    text-decoration-thickness: 2px;
    text-decoration-color: currentColor;
    text-underline-offset: 0.2em;
}

a.link-external:not(.link-affiliated) {
    color: var(--color-link-external);
}

a.link-external:not(.link-affiliated):is(:hover, :focus-visible) {
    color: var(--color-link-external-hover);
}

a.link-affiliated {
    color: var(--color-link-affiliated);
}

a.link-affiliated:is(:hover, :focus-visible) {
    color: var(--color-link-affiliated-hover);
}

a.link-dead {
    text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-thickness: 1px;
    text-decoration-color: color-mix(in srgb, currentColor 72%, transparent);
    text-underline-offset: 0.2em;
}

a.link-dead:is(:hover, :focus-visible) {
    text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-thickness: 2px;
    text-decoration-color: currentColor;
}

a.link-dead.link-dead-404 {
    color: var(--color-link-dead-404);
    text-decoration-color: color-mix(in srgb, var(--color-link-dead-404) 78%, transparent);
}

a.link-dead.link-dead-404:is(:hover, :focus-visible) {
    color: var(--color-link-dead-404-hover);
    text-decoration-color: currentColor;
}

img,
video,
audio,
svg {
    max-width: 100%;
}

figure img {
    display: block;
}

time,
sub,
small {
    color: var(--color-text-muted);
}

hr {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin-top: var(--space-5);
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1.03rem;
}

th,
td {
    border: 1px solid var(--color-border);
    padding: var(--space-2);
    text-align: left;
    vertical-align: top;
}

thead th {
    color: var(--color-heading);
    background: rgba(255, 255, 255, 0.03);
}

dt {
    color: var(--color-text-muted);
}

dd {
    color: var(--color-heading);
}

details > summary {
    cursor: pointer;
    color: var(--color-heading);
}

/* Habillage commun des boutons contextuels (Sommaire, liens d'en-tête, oeuvres). */
.ui-button {
    list-style: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 2.35rem;
    padding: 0.45rem 0.85rem;
    border: 1px solid var(--color-border-strong);
    background: linear-gradient(180deg, rgba(118, 167, 215, 0.22) 0%, rgba(17, 27, 42, 0.9) 100%);
    color: var(--color-heading);
    text-decoration: none;
    font-family: var(--font-heading);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.2;
    cursor: pointer;
    user-select: none;
}

.ui-button:is(:hover, :focus-visible) {
    border-color: color-mix(in srgb, var(--color-accent-1) 62%, var(--color-border-strong));
    background: linear-gradient(180deg, rgba(118, 167, 215, 0.32) 0%, rgba(17, 27, 42, 0.96) 100%);
    color: #ffffff;
    text-decoration: none;
}

a.ui-button:visited,
a.ui-button.link-external:not(.link-affiliated),
a.ui-button.link-affiliated {
    color: var(--color-heading);
}

.ui-button--vertical {
    width: 2.25rem;
    min-height: 7.2rem;
    padding: 0;
}

.ui-button--vertical > span {
    display: inline-block;
    transform: rotate(90deg);
    white-space: nowrap;
}

main > section,
main > aside,
main > article {
    border-top: var(--border-width-regular) solid var(--color-border);
    padding-top: var(--space-4);
}

main > section:nth-of-type(3n+1) {
    border-top-color: var(--color-section-divider-1);
}

main > article {
    border-top-color: var(--color-accent-1);
}

main > section:nth-of-type(3n+2) {
    border-top-color: var(--color-section-divider-2);
}

main > section:nth-of-type(3n),
main > aside:last-child {
    border-top-color: var(--color-section-divider-3);
}