/**
 * ═══════════════════════════════════════════════════════════════════════════
 * BASE.CSS - Palimpseste
 * Styles de base : reset, body, scrollbar, accessibility
 * ═══════════════════════════════════════════════════════════════════════════
 */

/* ═══════════════════════════════════════════════════════════════════════════
   RESET
   ═══════════════════════════════════════════════════════════════════════════ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Form element reset */
button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

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

/* ═══════════════════════════════════════════════════════════════════════════
   ACCESSIBILITY
   ═══════════════════════════════════════════════════════════════════════════ */

/* Screen-reader only content */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Skip to content link */
.skip-link {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent);
    color: #fff;
    padding: 8px 16px;
    border-radius: 0 0 4px 4px;
    z-index: 100001;
    font-weight: bold;
    text-decoration: none;
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 0;
}

/* Focus-visible for keyboard navigation */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Remove default focus ring for mouse users */
:focus:not(:focus-visible) {
    outline: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BODY
   ═══════════════════════════════════════════════════════════════════════════ */
body {
    font-family: 'EB Garamond', Georgia, serif;
    line-height: 1.8;
    color: var(--text);
    background-color: var(--bg);
    min-height: 100vh;
    padding-top: 60px; /* Compense le header fixed (56px + 4px de border/shadow) */
}

/* Mobile: pas de padding-top car géré différemment */
@media screen and (max-width: 900px) {
    body {
        padding-top: 0;
    }
}

/* Texture grain seulement sur desktop */
@media screen and (min-width: 901px) {
    body {
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
        background-blend-mode: overlay;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCROLLBAR PERSONNALISEE
   ═══════════════════════════════════════════════════════════════════════════ */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-elevated);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border) var(--bg-elevated);
}