/* Amber Arts — identité 2026.
   Jetons de la maquette design_2026 : ivoire, brun, ambre, ocre ; Bodoni Moda
   pour les titres, Josefin Sans pour le texte. Toute valeur de couleur, de
   police ou de rythme vient d'ici ; les autres feuilles ne portent que des
   variables. Le back-office garde sa propre feuille (tokens.css à la racine). */

:root {
  /* Couleurs */
  --color-bg: #f7f2eb;          /* ivoire */
  --color-surface: #efe6d9;     /* ivoire soutenu : fonds d'image, champs */
  --color-text: #3a2418;        /* brun */
  --color-primary: #8b4f27;     /* ambre brun : liens, aplats, pied de page */
  --color-primary-deep: #6e3d1d;
  --color-accent: #d77a1e;      /* orange : survols, compteurs */
  --color-highlight: #e8a340;   /* ocre clair : accents sur fond brun */
  --color-on-primary: #f7f2eb;

  --line: rgba(139, 79, 39, 0.35);
  --line-soft: rgba(139, 79, 39, 0.25);
  --line-strong: var(--color-primary);
  --line-on-primary: rgba(247, 242, 235, 0.35);
  --line-on-primary-soft: rgba(247, 242, 235, 0.25);
  --glow: rgba(215, 122, 30, 0.22);
  --glow-strong: rgba(215, 122, 30, 0.35);
  --shade: rgba(58, 36, 24, 0.85);
  --shadow-float: 0 10px 30px rgba(58, 36, 24, 0.35);
  --shadow-sheet: 0 14px 40px rgba(58, 36, 24, 0.3);

  /* Typographie */
  --font-display: 'Bodoni Moda', 'Didot', Georgia, serif;
  --font-body: 'Josefin Sans', system-ui, sans-serif;
  --track-label: 0.18em;
  --track-label-wide: 0.22em;

  /* Rythme */
  --gutter: clamp(16px, 4vw, 56px);
  --section-gap: clamp(80px, 14vh, 160px);
  --section-gap-sm: clamp(60px, 10vh, 120px);

  /* Formes : angles francs, sauf l'arc et le coin arrondi de la maquette */
  --radius-pill: 999px;
  --radius-corner: clamp(60px, 10vw, 160px);
  --radius-corner-sm: clamp(60px, 10vw, 120px);
  --radius-arch: clamp(90px, 20vw, 340px);

  /* Mouvement */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-menu: cubic-bezier(0.65, 0, 0.15, 1);
  --reveal-shift: 10px;
  --reveal-duration: 1.3s;
}

/* ── Base ─────────────────────────────────────────────────────────────── */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

a { color: var(--color-primary); text-decoration: none; transition: color 0.4s; }
a:hover { color: var(--color-accent); }

img, picture { display: block; max-width: 100%; }
button, input, select, textarea { font-family: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; margin: 0; }
p { margin: 0; }
address { font-style: normal; }

:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
::selection { background: var(--color-highlight); color: var(--color-text); }

/* ── Révélation au défilement ─────────────────────────────────────────
   L'état masqué n'existe que si le script est là (classe « js » posée par
   head.js) : sans lui, tout est visible d'emblée. Le délai propre à chaque
   élément est posé par le script depuis l'attribut data-reveal. */
.js .reveal {
  opacity: 0;
  transform: translateY(var(--reveal-shift));
  transition: opacity var(--reveal-duration) var(--ease-out), transform var(--reveal-duration) var(--ease-out);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

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