/**
 * Base commune — Alesq
 *
 * Contenu : 1. Tokens (:root)  2. Reset  3. Typographie  4. Layout  5. Utilitaires
 *
 * Ce fichier ne contient AUCUN style de section : ceux-ci vont dans css/blocs/<type>.css.
 * docs/02_DESIGN_SYSTEM.md doit toujours dire la même chose que le bloc des tokens.
 */

/* 1. Tokens ---------------------------------------------------------------- */
/* Piste A « Fiche de torréfaction » (choisie le 2026-10-09) : papier crème, encre, rouge tampon,
   vert bouteille pour les sections sombres. Le caramel est repris du site actuel (alesq.com)
   pour la continuité — jamais en texte sur fond clair (contraste insuffisant).
   Concept client : pas de « marron uniforme » → aucun fond brun. */
:root {
    /* Couleurs */
    --color-bg: #F3EDE3;               /* papier crème */
    --color-bg-alt: #E9E0D2;           /* kraft clair */
    --color-bg-dark: #1F3A30;          /* vert bouteille — ≠ --color-bg, et pas brun (concept) */
    --color-text: #1C1714;             /* encre */
    --color-text-muted: #5E544B;
    --color-text-inverse: #F3EDE3;
    --color-text-muted-inverse: #C9BFB2;
    --color-primary: #B23A27;          /* rouge tampon (assombri pour l'AA texte crème) */
    --color-accent: #D4A373;           /* caramel — repris du site actuel */
    --color-border: #CFC3B2;           /* filets décoratifs */

    /* Typographie */
    --font-display: "Fraunces", Georgia, "Times New Roman", serif;
    --font-body: "IBM Plex Sans", system-ui, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
    /* Échelle des tailles hors classes .display-* / .body-* (cf. docs/02_DESIGN_SYSTEM.md) */
    --fs-micro: 0.75rem;               /* sous-libellés du menu, repères de courbe */
    --fs-caption: 0.8125rem;           /* surtitres, légendes, numéros */
    --fs-sm: 0.875rem;                 /* boutons, listes techniques */
    --fs-lg: 1.125rem;                 /* libellés du menu, tagline */
    --fs-h3: clamp(1.25rem, 1.8vw, 1.625rem);   /* titres de rubrique */
    --fs-xl: clamp(2.25rem, 4vw, 3.5rem);       /* titre des cartes de contact, menu mobile */
    --fs-stat: clamp(4rem, 9vw, 7.5rem);        /* chiffres clés */

    /* Espacements */
    --space-2xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2.5rem;
    --space-xl: 4rem;
    --space-2xl: 6rem;
    --space-3xl: 9rem;
    --section-padding: clamp(4.5rem, 10vw, 9rem);
    --container-max: 1280px;
    --gutter: clamp(1rem, 4vw, 3rem);
    --radius-sm: 2px;                  /* coins d'imprimé : quasi droits */
    --radius-lg: 6px;
    --btn-h: 52px;
    --header-h: 76px;

    /* Filet pointillé « carte de café » : épaisseur et pas des points */
    --rule-dot: 1px;
    --rule-gap: 6px;

    /* Mouvement */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --duration-fast: 0.2s;
    --duration-base: 0.4s;
    --duration-slow: 0.8s;
}

/* 2. Reset ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* scrollbar-gutter : la page ne saute pas de côté quand le menu mobile bloque le défilement */
/* scroll-padding-top : une ancre ne passe pas sous le header collant */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-gutter: stable; scroll-padding-top: calc(var(--header-h) + var(--space-sm)); }
body {
    min-height: 100vh;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
/* Grain de papier : calque fixe en multiply, généré en SVG (pas d'image). Valeurs en dur dans
   le data-URI : c'est une texture, pas une couleur de marque. */
body::before {
    content: ""; position: fixed; inset: 0; z-index: 999; pointer-events: none;
    opacity: 0.35; mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.38 0 0 0 0 0.3 0 0 0 0.35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection { background: var(--color-primary); color: var(--color-text-inverse); }
img, picture, video, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { appearance: none; -webkit-appearance: none; background: none; border: 0; cursor: pointer; }
a { color: inherit; }
p { text-wrap: pretty; } /* évite le mot seul en fin de paragraphe */
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.section--dark :focus-visible, .site-footer :focus-visible { outline-color: var(--color-accent); }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* 3. Typographie ----------------------------------------------------------- */
/* Fraunces : serif variable. opsz suit la taille (navigateur), SOFT arrondit les empattements,
   WONK donne les italiques « penchées » — c'est le côté artisanal / malicieux du brief. */
.display-xl, .display-lg, .display-md {
    font-family: var(--font-display);
    font-weight: 600;
    font-optical-sizing: auto;
    font-variation-settings: "SOFT" 50, "WONK" 0;
    letter-spacing: -0.02em;
    text-wrap: balance;
}
.display-xl { font-size: clamp(3rem, 9vw, 8.5rem); line-height: 0.95; letter-spacing: -0.035em; }
.display-lg { font-size: clamp(2.25rem, 5vw, 4.25rem); line-height: 1.02; }
.display-md { font-size: clamp(1.5rem, 2.6vw, 2.25rem); line-height: 1.15; font-weight: 500; }
/* Mot mis en relief dans un titre : italique WONK, en rouge tampon */
.display-xl em, .display-lg em, .display-md em {
    font-style: italic; font-weight: 400; font-variation-settings: "SOFT" 100, "WONK" 1;
    color: var(--color-primary);
}
.section--dark :is(.display-xl, .display-lg, .display-md) em { color: var(--color-accent); }

.eyebrow {
    font-family: var(--font-mono); font-size: var(--fs-caption); font-weight: 500;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-muted);
}
.body-lg { font-size: clamp(1.125rem, 1.5vw, 1.3125rem); line-height: 1.55; }
.body { font-size: 1rem; line-height: 1.65; }
.caption { font-family: var(--font-mono); font-size: var(--fs-caption); line-height: 1.5; color: var(--color-text-muted); }
.section--dark :is(.eyebrow, .caption) { color: var(--color-text-muted-inverse); }

/* 4. Layout ---------------------------------------------------------------- */
/* max() : iPhone en paysage (viewport-fit=cover, R14) — le contenu ne passe pas sous l'encoche (R15) */
.container {
    width: 100%; max-width: var(--container-max); margin-inline: auto;
    padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}
.section { padding-block: var(--section-padding); }
.section--alt { background: var(--color-bg-alt); }
.section--dark { background: var(--color-bg-dark); color: var(--color-text-inverse); }

/* 5. Utilitaires ----------------------------------------------------------- */
/* Filet pointillé de carte de café (séparateur, points de conduite) */
.rule-dotted {
    border: 0;
    background-image: radial-gradient(circle, currentColor var(--rule-dot), transparent calc(var(--rule-dot) + 0.5px));
    background-size: var(--rule-gap) calc(var(--rule-dot) * 2); background-repeat: repeat-x; background-position: left center;
    height: calc(var(--rule-dot) * 2); opacity: 0.5;
}

.visually-hidden {
    position: absolute !important; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link { position: absolute; left: var(--space-sm); top: -100px; z-index: 1000; display: inline-flex; align-items: center; min-height: 44px; padding: var(--space-xs) var(--space-sm); background: var(--color-bg); }
.skip-link:focus { top: var(--space-sm); }

/* Emplacement d'image manquante (cf. CLAUDE.md) */
.img-placeholder {
    display: grid; place-items: center; padding: var(--space-md);
    background: var(--color-bg-alt); color: var(--color-text-muted); font-family: var(--font-mono); font-size: var(--fs-caption); text-align: center;
    border: 1px dashed var(--color-border);
}

/* Animations : le découpage mot à mot de js/common.js (anim-words) */
.anim-word { display: inline-block; }
.anim-word-mask { display: inline-block; overflow: hidden; vertical-align: bottom; }

/* Moteur natif (sans GSAP) : états masqués actifs seulement quand js/common.js a posé
   la classe anim-native sur <html> — sans JS, rien n'est masqué. */
.anim-native .anim-fade-up,
.anim-native .anim-fade,
.anim-native .anim-stagger > *,
.anim-native .anim-word {
    transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);
}
.anim-native .anim-fade-up:not(.is-in) { opacity: 0; transform: translateY(var(--anim-y, 24px)); }
.anim-native .anim-fade:not(.is-in) { opacity: 0; }
.anim-native .anim-stagger > * { transition-delay: calc(var(--i, 0) * var(--anim-stagger, 0.08s)); }
.anim-native .anim-stagger:not(.is-in) > * { opacity: 0; transform: translateY(24px); }
.anim-native .anim-word { transition-delay: calc(var(--i, 0) * var(--anim-stagger, 0.04s)); }
.anim-native .anim-words:not(.is-in) .anim-word { transform: translateY(110%); }