/* ============================================================
   L'Atelier d'Angela — tokens.css
   Jetons de la charte graphique : palette, typographie,
   espacements, mouvement. Fichier global, chargé en premier.
   ============================================================ */

:root {
    /* Palette charte */
    --ivory: #f8f4ee;        /* Ivoire atelier — fond principal */
    --paper: #fffdf9;        /* Papier — sections lumineuses, cartes */
    --ink: #292622;          /* Encre — texte et CTA principal */
    --ink-soft: #5f5952;     /* Encre adoucie — textes secondaires */
    --rosewood: #8b5e62;     /* Bois de rose — accent de marque */
    --clay: #a36d56;         /* Argile — accent secondaire ponctuel */
    --champagne: #c7a777;    /* Champagne — filets, sceaux, détails */
    --sage: #72776b;         /* Sauge — accent naturel très limité */

    /* Filets et dégradés utilitaires (dérivés de la palette) */
    --line: rgba(41, 38, 34, .16);
    --line-strong: rgba(41, 38, 34, .25);
    --champagne-soft: rgba(199, 167, 119, .16); /* fonds de placeholder image */
    --champagne-tint: rgba(199, 167, 119, .10); /* survol des lignes de prestations */

    /* Typographie */
    --serif: 'Newsreader', Georgia, serif;
    --sans: 'DM Sans', system-ui, sans-serif;

    /* Mouvement « slow & steady » */
    --ease-organic: cubic-bezier(.22, 1, .36, 1);

    /* Conteneur et formes */
    --container: min(1280px, calc(100vw - 64px));
    --radius-pill: 100px;
}

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

html { scroll-behavior: smooth; }

body {
    margin: 0;
    overflow-x: hidden;
    background: var(--ivory);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

/* --- Accessibilité --- */
.skip-link {
    position: fixed;
    z-index: 100;
    top: 10px;
    left: 10px;
    padding: 10px 16px;
    background: var(--ink);
    color: white;
    transform: translateY(-150%);
}
.skip-link:focus { transform: translateY(0); }

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

:focus-visible {
    outline: 2px solid var(--rosewood);
    outline-offset: 4px;
}

/* Ancres sous le header fixe */
section[id] { scroll-margin-top: 96px; }

/* --- Mouvement d'apparition au scroll --- */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .9s var(--ease-organic), transform .9s var(--ease-organic);
}
.reveal-delay { transition-delay: .12s; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* --- Mouvement coupé si l'utilisateur le demande --- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
    .reveal { opacity: 1; transform: none; }
}