/* assets/css/main.css — Système VeRo */

/* ── Fonts locales ── */
@font-face {
    font-family: 'SpaceGrotesk';
    src: url('../fonts/SpaceGrotesk-Regular.ttf') format('truetype');
    font-weight: 400; font-display: swap;
}
@font-face {
    font-family: 'SpaceGrotesk';
    src: url('../fonts/SpaceGrotesk-Medium.ttf') format('truetype');
    font-weight: 500; font-display: swap;
}
@font-face {
    font-family: 'SpaceGrotesk';
    src: url('../fonts/SpaceGrotesk-Bold.ttf') format('truetype');
    font-weight: 700; font-display: swap;
}
@font-face {
    font-family: 'Atkinson';
    src: url('../fonts/AtkinsonHyperlegible-Regular.ttf') format('truetype');
    font-weight: 400; font-display: swap;
}
@font-face {
    font-family: 'Atkinson';
    src: url('../fonts/AtkinsonHyperlegible-Bold.ttf') format('truetype');
    font-weight: 700; font-display: swap;
}

/* ── Variables VeRo ── */
:root {
    --vero-orange:  #F39200;
    --vero-violet:  #80476F;
    --vero-cyan:    #46BFE0;
    --vero-green:   #126036;
    --vero-brown:   #7F5334;
    --vero-black:   #111111;
    --vero-white:   #FFFFFF;
    --vero-gray:    #F5F4F4;
    --vero-border:  #E5E5E5;

    /* Aliases backward compat */
    --color-primary:    var(--vero-black);
    --color-secondary:  var(--vero-orange);
    --color-accent:     var(--vero-violet);
    --color-light:      var(--vero-gray);
    --color-green:      var(--vero-green);
    --color-text:       var(--vero-black);
    --color-text-light: #6B7280;
    --color-white:      var(--vero-white);
    --color-border:     var(--vero-border);

    --font-display: 'SpaceGrotesk', system-ui, sans-serif;
    --font-body:    'Atkinson', system-ui, sans-serif;
    --font-main: var(--font-display);
    --font-ui:   var(--font-body);

    --radius:     4px;
    --shadow:     0 2px 12px rgba(0,0,0,.10);
    --shadow-lg:  0 8px 32px rgba(0,0,0,.16);
    --transition: .25s ease;
    --max-width:  1200px;
    --gutter:     clamp(1rem, 4vw, 2rem);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; color-scheme: light only; }
body {
    font-family: var(--font-body);
    color: var(--vero-black);
    background: var(--vero-white);
    line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--vero-orange); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Typographie VeRo ── */
h1 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.5px;
    color: var(--vero-black);
}
h2 {
    font-family: var(--font-display);
    font-weight: 500;
    line-height: 1.2;
    color: var(--vero-black);
}
h3 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.2;
}

/* ── Composant Section Header (.sh) ── */
.sh { display: flex; flex-direction: column; gap: 6px; }
.sh-label {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
}
.sh-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 28px;
    line-height: 1.15;
}

/* ── Boutons ── */
.btn {
    display: inline-block;
    padding: .65rem 1.4rem;
    border-radius: var(--radius);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: .875rem;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    border: 2px solid transparent;
}
.btn-primary {
    background: var(--vero-orange);
    color: var(--vero-white);
}
.btn-primary:hover {
    background: var(--vero-black);
    color: var(--vero-white);
    text-decoration: none;
}
.btn-outline {
    background: transparent;
    color: var(--vero-orange);
    border-color: var(--vero-orange);
}
.btn-outline:hover {
    background: var(--vero-orange);
    color: var(--vero-white);
    text-decoration: none;
}

/* ── Utilitaires ── */
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: clamp(2.5rem, 6vw, 5rem) 0; }

/* Contenu pages intérieures — aligné avec les sections homepage */
.page-content {
    padding: 52px 56px;
}
@media (max-width: 900px) { .page-content { padding: 36px 32px; } }
@media (max-width: 600px) { .page-content { padding: 28px 20px; } }

/* Texte riche (WYSIWYG) à l'intérieur des pages de contenu */
.page-content h2 {
    font-size: 28px;
    font-weight: 700;
    margin-top: 2.5rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--vero-border);
}
.page-content h2:first-child { margin-top: 0; }
.page-content h3 {
    font-size: 18px;
    margin-top: 1.5rem;
}
.page-content p {
    margin-top: .75rem;
    line-height: 1.6;
}
.page-content ul, .page-content ol {
    margin: .75rem 0 .75rem 1.25rem;
    line-height: 1.6;
}
.page-content blockquote {
    margin: 1rem 0;
    padding-left: 1rem;
    border-left: 3px solid var(--vero-border);
    color: var(--color-text-light);
    font-style: italic;
}

/* ── Animations au scroll ── */
@media (prefers-reduced-motion: no-preference) {
    .sa-hero {
        opacity: 0;
        transform: translateY(14px);
        transition: opacity .6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                    transform .6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    .sa-hero.sa-in { opacity: 1; transform: none; }

    .sa-scroll {
        opacity: 0;
        transform: translateY(18px);
        transition: opacity .6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                    transform .6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    .sa-scroll.sa-in { opacity: 1; transform: none; }

    .sa-scroll.sa-d2 { transition-delay: .1s; }
    .sa-scroll.sa-d3 { transition-delay: .2s; }
}