/* Base: reset, typography, focus, icons, shared motion. Every value comes from tokens.css. */

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scrollbar-color: var(--border) transparent;
    scroll-padding-top: calc(var(--topbar-h) + env(safe-area-inset-top) + var(--space-4));
    background: var(--bg);
}

body {
    margin: 0;
    min-height: 100dvh;
    background: var(--grad-canvas), var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-base);
    font-weight: var(--weight-regular);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote, pre {
    margin: 0;
}

ul, ol {
    padding: 0;
    list-style: none;
}

a {
    color: inherit;
    text-decoration: none;
}

button, input, textarea, select {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
}

button {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

img, svg {
    display: block;
    max-width: 100%;
}

kbd, code, pre {
    font-family: var(--font-mono);
}

[hidden] {
    display: none !important;
}

::selection {
    background: var(--accent-soft);
    color: var(--text);
}

:focus {
    outline: none;
}

:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--border-width-thick);
    box-shadow: var(--ring-focus);
}

[tabindex="-1"]:focus-visible {
    outline: none;
    box-shadow: none;
}

.defilement-bloque,
.defilement-bloque body {
    overflow: hidden;
}

/* The sprite of index.html: present for <use>, invisible and out of the flow. */
.sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.icone {
    width: var(--space-5);
    height: var(--space-5);
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icone--petite {
    width: var(--space-4);
    height: var(--space-4);
}

.icone--grande {
    width: var(--space-6);
    height: var(--space-6);
}

.chiffres {
    font-variant-numeric: tabular-nums;
}

.cache-visuel {
    position: absolute !important;
    width: var(--space-px);
    height: var(--space-px);
    margin: calc(var(--space-px) * -1);
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.evitement {
    position: fixed;
    top: calc(env(safe-area-inset-top) + var(--space-2));
    left: var(--space-2);
    z-index: var(--z-palette);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--bg-inverse);
    color: var(--text-on-inverse);
    font-weight: var(--weight-semibold);
    transform: translateY(calc(-100% - var(--space-8)));
    transition: transform var(--dur) var(--ease-out);
}

.evitement:focus-visible {
    transform: none;
}

/* Shared motion: transform and opacity only (§9.7). */
@keyframes pulsation {
    0% {
        transform: scale(1);
        opacity: 0.55;
    }
    70%,
    100% {
        transform: scale(2.6);
        opacity: 0;
    }
}

@keyframes respiration {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.45;
    }
}

@keyframes rotation {
    to {
        transform: rotate(1turn);
    }
}

@keyframes apparition {
    from {
        opacity: 0;
        transform: translateY(var(--space-2));
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes descente {
    from {
        opacity: 0;
        transform: translateY(calc(var(--space-3) * -1));
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes glissement {
    from {
        transform: translateX(100%);
    }
    to {
        transform: none;
    }
}

@keyframes fondu {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes disparition {
    to {
        opacity: 0;
        transform: translateY(var(--space-2)) scale(0.98);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: var(--dur-reduced) !important;
        animation-iteration-count: 1 !important;
        transition-duration: var(--dur-reduced) !important;
        scroll-behavior: auto !important;
    }
}