/* =========================================================
   site.css — variables globales, reset, typographie de base
   ========================================================= */

:root {
    /* Couleurs */
    --color-black: #000000;
    --color-white: #ffffff;
    --color-bg: #ffffff;
    --color-text: #000000;
    --color-muted: #6b6b6b;

    /* Bordures et coins */
    --border-thick: 4px;
    --radius-box: 10px;
    --radius-pill: 999px;

    /* Espacements */
    --gap-sm: 8px;
    --gap-md: 16px;
    --gap-lg: 32px;
    --gap-xl: 64px;

    /* Typographie (polices identiques au site original RPPG)
       - VT323 : style terminal pixel fin (pour logo header, titres normaux)
       - Jersey 10 : pixel bloc chunky (pour gros titres style Hero)
       - Bungee : pour boutons / accents
       - DM Mono : texte courant */
    --font-logo: 'VT323', monospace;
    --font-display-big: 'Jersey 10', monospace;
    --font-accent: 'Bungee', monospace;
    --font-body: 'DM Mono', monospace;
    --font-size-base: 18px;
}

/* Reset minimal */
* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    line-height: 1.4;
}

a {
    color: inherit;
}

/* Par défaut, les titres utilisent VT323. Les classes spécifiques
   (ex: .hero-title) surchargeront pour utiliser Jersey 10 sur le Hero. */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-logo);
    font-weight: 400;
    letter-spacing: 0;
    margin: 0 0 var(--gap-md) 0;
}

main {
    min-height: 50vh;
}

/* =========================================================
   Reveal-on-scroll : sections cachées par défaut, slide-up + fade-in
   quand elles entrent dans le viewport (via IntersectionObserver en JS).
   ========================================================= */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 0.7s ease-out,
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.reveal-on-scroll.revealed {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .reveal-on-scroll {
        opacity: 1;
        transform: none;
        transition: none;
    }
}