/* 123Apéro · jetons de design · ATLAS
   Direction artistique : docs/design/DIRECTION.md, seule autorité, non recopiée ici.
   Seul fichier qui déclare les jetons : site.css et v3.css les consomment sans les redéclarer.
   Le site est sombre par défaut : --paper est le fond espresso, --ink est la crème. */
:root {
  /* matière : espresso, brun photo, crème */
  --espresso: #17110E;
  --brown: #2A211D;
  --brown-2: #33271F;
  --cream: #F7F1E6;
  --cream-2: #FBF7F0;
  --paper: #17110E;
  --paper-2: #1F1713;
  --paper-3: #2A211D;
  --paper-4: #3A2B23;
  --stage: #2A211D;
  --ink: #F7F1E6;
  --ink-soft: #EBDCC6;
  --muted: #B7A48C;
  --on-dark-muted: #C9B79C;
  --line: #3B2C24;
  --line-strong: #5A4436;
  --field-line: #6B5242;
  --white: #FFFFFF;
  /* champagne, bordeaux, olive */
  --champagne: #C9A15B;
  --champagne-light: #E4C88C;
  --champagne-deep: #A57F3C;
  --bordeaux: #6E2230;
  --bordeaux-deep: #571A26;
  --olive: #4A5340;
  --olive-ink: #38402F;
  --terra: #6E2230;
  --terra-deep: #571A26;
  --brass: #C9A15B;
  --brass-ink: #E4C88C;
  --sage: #4A5340;
  --sage-ink: #E4C88C;
  --red-wash: #2A1A1E;
  --gold-wash: #241C15;
  --blush: #D9B7A6;
  --success: #9DB58A;
  --warning: #D9A45B;
  --danger: #D98274;
  /* action : la crème porte l'action, le bordeaux la conversion */
  --action: #F7F1E6;
  --action-ink: #17110E;
  --action-hover: #E4C88C;
  /* teintes de famille / catégorie : servent de filet et de pastille */
  --fam-satin: #C9A15B;
  --fam-organza: #C8D3D6;
  --fam-linen: #B9A181;
  --fam-jute: #B98F5B;
  --fam-sisal: #C7B48C;
  --fam-raffia: #93A06A;
  --fam-crispy: #D9B7A6;
  --fam-curling: #B4553F;
  --fam-paper: #DCD2BF;
  --fam-bunting: #8E2C3A;
  --fam-bows: #C9A15B;
  --fam: var(--champagne);

  /* caractère */
  --font-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans: "Figtree", "Segoe UI", system-ui, -apple-system, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Mono", "SFMono-Regular", ui-monospace, monospace;
  /* marque : mot latin, même police dans toutes les langues, jamais surchargée par :lang() */
  --font-brand: "Fraunces", Georgia, "Times New Roman", serif;

  /* échelle typographique fluide 390 -> 1440+ ; --step--2 est la taille mono */
  --step--2: clamp(0.6875rem, 0.67rem + 0.09vw, 0.75rem);
  --step--1: clamp(0.8125rem, 0.78rem + 0.18vw, 0.9375rem);
  --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --step-1: clamp(1.125rem, 1.04rem + 0.4vw, 1.3125rem);
  --step-2: clamp(1.375rem, 1.2rem + 0.85vw, 1.875rem);
  --step-3: clamp(1.75rem, 1.42rem + 1.6vw, 2.75rem);
  --step-4: clamp(2.25rem, 1.6rem + 3.1vw, 4rem);
  --step-5: clamp(2.75rem, 1.7rem + 5vw, 6rem);
  --step-6: clamp(3.4rem, 1.8rem + 7.4vw, 8.4rem);
  --text-h2: clamp(2.5rem, 1.8rem + 3vw, 5.5rem);
  --tracking-tight: -0.02em;
  --tracking-display: -0.03em;
  --tracking-label: 0.12em;
  --leading-tight: 1;
  --leading-snug: 1.22;
  --leading-body: 1.62;

  /* grille & rythme */
  --wrap: 1440px;
  --wrap-narrow: 760px;
  --wrap-wide: 1680px;
  --gut: clamp(20px, 4.4vw, 64px);
  --col-gap: clamp(16px, 2.2vw, 32px);
  --section-y: clamp(72px, 8.9vw, 128px);
  --section-y-md: clamp(64px, 6.67vw, 96px);
  --section-y-lg: clamp(72px, 11.1vw, 160px);
  --section-y-sm: clamp(44px, 5.4vw, 78px);
  --section-y-head: clamp(30px, 3.6vw, 52px);
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  --radius: 0px;
  --radius-lg: 2px;
  --radius-pill: 999px;
  --hair: 1px solid var(--line);
  --hair-strong: 1px solid var(--line-strong);
  --hair-gold: 1px solid var(--champagne);
  --measure: 64ch;
  --measure-tight: 44ch;
  --tap: 44px;
  --header-h: 84px;
  --strip-h: 34px;

  /* mouvement */
  --ease-silk: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-fold: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out: cubic-bezier(.23,1,.32,1);
  --dur-fast: 180ms;
  --dur: 360ms;
  --dur-slow: 680ms;
  --dur-img: 560ms;

  /* ombres douces, lumière rasante */
  --shadow-card: 0 1px 0 rgb(201 161 91 / .18), 0 24px 60px -32px rgb(0 0 0 / .72);
  --shadow-lift: 0 2px 0 rgb(201 161 91 / .22), 0 34px 80px -36px rgb(0 0 0 / .82);
  --shadow-sheet: 0 40px 90px -44px rgb(0 0 0 / .9);
  --shadow-inset: inset 0 1px 0 rgb(255 255 255 / .08);
  --glow-champagne: radial-gradient(60% 60% at 50% 0%, rgb(201 161 91 / .16), transparent 70%);
  --grain-opacity: 0.035;

  /* profondeur */
  --z-base: 1;
  --z-header: 100;
  --z-sticky: 150;
  --z-drawer: 200;
  --z-overlay: 300;
  --z-toast: 400;

  /* alias de transition : noms anciens, une seule source */
  --red: var(--terra);
  --red-deep: var(--terra-deep);
  --gold: var(--brass);
  --ink-muted: var(--muted);
  --ink-faint: var(--muted);
  --serif: var(--font-serif);
  --sans: var(--font-sans);
  --mono: var(--font-mono);
  --ease: var(--ease-silk);
}
/* cyrillique et grec : piles système tant qu'aucun sous-ensemble de police n'est servi */
:root:lang(bg), :root:lang(uk), :root:lang(el) { --font-serif: Georgia, "Times New Roman", serif; --font-sans: "Segoe UI", system-ui, -apple-system, "Noto Sans", "Helvetica Neue", Arial, sans-serif; }
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; --dur-img: 0ms; }
}