/* ============================================================
   CHROMATIQUE — Design System
   Tokens → Reset → Base → Components → Sections → Utilities
   ============================================================ */

/* ── 1. DESIGN TOKENS ─────────────────────────────────────── */
:root {
  /* Couleurs — fond sombre chaud, jamais un noir pur */
  --bg:           #0E0D12;
  --bg-2:         #141118;
  --surface:      #1C1A24;
  --surface-2:    #242130;
  --border:       rgba(255 255 255 / 0.07);
  --border-hover: rgba(255 255 255 / 0.15);

  /* Encres */
  --ink:          #F2EFE8;       /* blanc cassé chaud — corps principal */
  --ink-muted:    rgba(242 239 232 / 0.55);
  --ink-dim:      rgba(242 239 232 / 0.30);

  /* Accent contextuel — remplacé dynamiquement par JS */
  --accent:       #E4572E;
  --accent-glow:  rgba(228 87 46 / 0.18);

  /* Identité feuille d'or */
  --or:           #C39A4B;   /* or profond */
  --or-clair:     #E8C878;   /* or lumineux, pour le texte */

  /* Typographie */
  --font-display: "Cormorant Garamond", "Georgia", serif;
  --font-body:    "Space Grotesk", "Inter", system-ui, sans-serif;

  /* Échelle typographique */
  --text-xs:    0.75rem;   /* 12px */
  --text-sm:    0.875rem;  /* 14px */
  --text-base:  1rem;      /* 16px */
  --text-md:    1.125rem;  /* 18px */
  --text-lg:    1.375rem;  /* 22px */
  --text-xl:    1.75rem;   /* 28px */
  --text-2xl:   2.25rem;   /* 36px */
  --text-3xl:   3rem;      /* 48px */
  --text-4xl:   4rem;      /* 64px */
  --text-hero:  clamp(3rem, 7vw, 6rem);

  /* Espacements — base 4px */
  --s-1:  0.25rem;   /* 4px  */
  --s-2:  0.5rem;    /* 8px  */
  --s-3:  0.75rem;   /* 12px */
  --s-4:  1rem;      /* 16px */
  --s-5:  1.25rem;   /* 20px */
  --s-6:  1.5rem;    /* 24px */
  --s-8:  2rem;      /* 32px */
  --s-10: 2.5rem;    /* 40px */
  --s-12: 3rem;      /* 48px */
  --s-16: 4rem;      /* 64px */
  --s-20: 5rem;      /* 80px */
  --s-24: 6rem;      /* 96px */
  --s-32: 8rem;      /* 128px */

  /* Rayons */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --radius-xl:  24px;

  /* Durées & easings */
  --dur-fast:   150ms;
  --dur-base:   250ms;
  --dur-slow:   400ms;
  --dur-slower: 700ms;
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);   /* expo out */
  --ease-in:    cubic-bezier(0.7, 0, 0.84, 0);   /* expo in  */
  --ease-inout: cubic-bezier(0.87, 0, 0.13, 1);

  /* Z-index */
  --z-base:     0;
  --z-above:    10;
  --z-sticky:   20;
  --z-overlay:  40;
  --z-modal:    60;
  --z-cursor:   100;
}

/* ── 2. RESET ─────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth; /* scroll natif fluide pour les ancres */
}

body {
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  min-height: 100dvh;
  overflow-x: hidden;
  cursor: none; /* curseur personnalisé actif */
}

/* Fallback si JS désactivé : curseur natif */
@media (hover: none) {
  body { cursor: auto; }
  .cursor { display: none; }
}

img, video, canvas, svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol { list-style: none; }

button {
  font: inherit;
  cursor: none;
  border: none;
  background: none;
}

select, input, textarea {
  font: inherit;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.1;
  text-wrap: balance;
  font-weight: 400;
}

/* ── 3. GRAIN OVERLAY ─────────────────────────────────────── */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-cursor);
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  background-repeat: repeat;
}

/* ── 4. CURSEUR PERSONNALISÉ ──────────────────────────────── */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-cursor);
  pointer-events: none;
  will-change: transform;
}

.cursor__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink);
  position: absolute;
  top: -3px;
  left: -3px;
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.cursor__ring {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(242 239 232 / 0.45);
  border-radius: 50%;
  position: absolute;
  top: -18px;
  left: -18px;
  transition: transform var(--dur-slow) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              opacity var(--dur-base) var(--ease-out);
}

.cursor__label {
  position: absolute;
  top: -10px;
  left: 12px;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0;
  white-space: nowrap;
  transition: opacity var(--dur-base) var(--ease-out);
}

/* État : survol d'une œuvre */
body.cursor--artwork .cursor__ring {
  transform: scale(2.4);
  border-color: var(--accent);
  border-width: 1px;
}
body.cursor--artwork .cursor__label {
  opacity: 1;
}
body.cursor--artwork .cursor__dot {
  opacity: 0;
}

/* État : survol d'un lien/bouton */
body.cursor--link .cursor__ring {
  transform: scale(1.6);
}

/* ── 5. HEADER ────────────────────────────────────────────── */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-5) var(--s-8);
  background: linear-gradient(to bottom, rgba(14, 13, 18, 0.55) 0%, transparent 100%);
  transition: padding var(--dur-base) var(--ease-out),
              background var(--dur-slow) var(--ease-out),
              backdrop-filter var(--dur-slow) var(--ease-out);
}

.header.is-scrolled {
  padding: var(--s-3) var(--s-8);
  background: rgba(14 13 18 / 0.80);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}

.header__logo {
  display: flex;
  align-items: center;
}

.header__logo-serif {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  text-shadow: 0 1px 12px rgba(14, 13, 18, 0.7);
  font-weight: 300;
  letter-spacing: 0.12em;
  color: var(--ink);
  transition: opacity var(--dur-base);
}

.header__logo-serif:hover {
  opacity: 0.7;
}

.header__logo-serif em,
.footer__logo em {
  font-style: italic;
  color: var(--or-clair);
}

.header__nav {
  display: flex;
  gap: var(--s-8);
}

.header__link {
  font-size: var(--text-sm);
  font-weight: 400;
  text-shadow: 0 1px 8px rgba(14, 13, 18, 0.7);
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  transition: color var(--dur-base);
  position: relative;
}

.header__link::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}

.header__link:hover {
  color: var(--or-clair);
}

.header__link:hover::after {
  transform: scaleX(1);
}

/* ── 6. HERO ──────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: clamp(560px, 82vh, 820px);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Pas de clip ici : une œuvre qui dépasse en bas doit rester visible et
     surplomber la section suivante (voir .hero + position: relative qui
     la fait déjà peindre au-dessus du contenu statique du manifeste). */
}

/* --hx/--hy typées en <percentage> pour que la transition ci-dessous
   interpole réellement la position du dégradé au lieu de sauter d'une
   valeur à l'autre (comportement par défaut des custom properties). */
@property --hx {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 68%;
}
@property --hy {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 40%;
}

/* Halo doré qui suit le curseur — fixe au viewport, z-index négatif pour
   rester sous tout le contenu du site (visible seulement dans les zones
   sans fond opaque, comme le fond de page). Un seul calque pour tout le
   site plutôt qu'un par section. */
.site-halo {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at var(--hx, 68%) var(--hy, 40%),
    rgba(195, 154, 75, 0.20) 0%,
    rgba(126, 50, 41, 0.07) 28%,
    transparent 55%);
  pointer-events: none;
  transition: background 0.2s linear;
}

/* Scène de flottaison — fond absolu, décalée sous le header fixe pour
   qu'aucune œuvre ne se retrouve masquée derrière la barre de nav */
.hero__stage {
  position: absolute;
  top: 100px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-base);
}

/* Chaque œuvre flottante dans le hero */
.hero__artwork {
  position: absolute;
  will-change: transform;
  cursor: none;
}

/* Couche intermédiaire : reçoit la dérive GSAP (indépendante du parallaxe) */
.hero__artwork-drift {
  will-change: transform;
}

/* Conteneur visuel avec bord arrondi + clip */
.hero__artwork-inner {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--surface);
  filter: brightness(0.9);
  transition: filter var(--dur-slow), transform var(--dur-slow) var(--ease-out);
}

.hero__artwork:hover .hero__artwork-inner {
  filter: brightness(1.05);
  transform: scale(1.02);
}

.hero__content {
  position: relative;
  z-index: var(--z-above);
  text-align: center;
  pointer-events: none;
  padding: var(--s-8);
}

.hero__eyebrow {
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: var(--s-6);
  /* Visible par défaut — GSAP anime via gsap.from() si disponible */
}

.hero__title {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 300;
  font-style: normal;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: var(--s-6);
}

.hero__title em {
  font-style: italic;
  font-weight: 300;
  color: var(--or-clair);
}

.hero__sub {
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  color: var(--ink-muted);
}

/* Indicateur de scroll */
.hero__scroll-hint {
  position: absolute;
  bottom: var(--s-8);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  z-index: var(--z-above);
}

.hero__scroll-line {
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, var(--ink-dim), transparent);
  animation: scrollLine 2s var(--ease-inout) infinite;
}

.hero__scroll-label {
  font-size: var(--text-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

@keyframes scrollLine {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  51%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ── 7. MANIFESTE ─────────────────────────────────────────── */
.manifeste {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-24) var(--s-8);
  text-align: center;
}

.manifeste__quote {
  max-width: 800px;
  border: none;
}

.manifeste__quote p {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 3.5rem);
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.manifeste__quote em {
  font-style: italic;
  color: var(--accent);
}

/* ── 8. COLLECTION ────────────────────────────────────────── */
.collection {
  padding: var(--s-24) var(--s-8);
  max-width: 1400px;
  margin: 0 auto;
}

.collection__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--s-16);
  gap: var(--s-4);
}

.collection__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.collection__title em,
.artiste__name em,
.acquisition__title em {
  font-style: italic;
  color: var(--or-clair);
}

.collection__count {
  font-size: var(--text-sm);
  color: var(--ink-muted);
  letter-spacing: 0.08em;
}

/* Grille asymétrique — disposition via JS sur grand écran */
.collection__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--s-6);
  align-items: start;
}

/* Carte d'œuvre */
.artwork-card {
  position: relative;
  cursor: none;
  overflow: visible;
  will-change: transform;
}

/* Disposition asymétrique — pattern répété tous les 9 (fonctionne pour n'importe quel nb d'œuvres) */
.artwork-card:nth-child(9n+1) { grid-column: span 5; }
.artwork-card:nth-child(9n+2) { grid-column: span 4; margin-top: var(--s-16); }
.artwork-card:nth-child(9n+3) { grid-column: span 3; margin-top: var(--s-8); }
.artwork-card:nth-child(9n+4) { grid-column: span 4; margin-top: var(--s-12); }
.artwork-card:nth-child(9n+5) { grid-column: span 8; margin-top: var(--s-6); }
.artwork-card:nth-child(9n+6) { grid-column: span 4; margin-top: var(--s-8); }
.artwork-card:nth-child(9n+7) { grid-column: span 4; margin-top: var(--s-20); }
.artwork-card:nth-child(9n+8) { grid-column: span 4; margin-top: var(--s-4); }
.artwork-card:nth-child(9n+9) { grid-column: span 7; margin-top: var(--s-12); }

/* Image de l'œuvre */
.artwork-card__image-wrap {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid rgba(195, 154, 75, 0.25);
  transition: transform 0.6s cubic-bezier(0.22, 0.9, 0.28, 1),
              box-shadow 0.6s cubic-bezier(0.22, 0.9, 0.28, 1),
              border-color 0.6s cubic-bezier(0.22, 0.9, 0.28, 1),
              border-width 0.6s cubic-bezier(0.22, 0.9, 0.28, 1);
}

.artwork-card:hover .artwork-card__image-wrap,
.artwork-card:focus-visible .artwork-card__image-wrap {
  transform: translateY(-8px);
  border-width: 2px;
  border-color: rgba(232, 200, 120, 0.8);
  box-shadow: 0 45px 90px -30px rgba(0, 0, 0, 0.95),
              0 0 100px -6px rgba(195, 154, 75, 0.55);
}

/* Ratios */
.artwork-card__image-wrap[data-ratio="portrait"] {
  aspect-ratio: 3 / 4;
}
.artwork-card__image-wrap[data-ratio="paysage"] {
  aspect-ratio: 16 / 9;
}
.artwork-card__image-wrap[data-ratio="carre"] {
  aspect-ratio: 1 / 1;
}

/* Placeholder coloré */
.artwork-card__placeholder {
  position: absolute;
  inset: 0;
  transition: transform var(--dur-slower) var(--ease-out);
}

/* Glow contextuel */
.artwork-card__glow {
  position: absolute;
  inset: -30%;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-slow) var(--ease-out);
  filter: blur(40px);
  background: radial-gradient(circle, var(--glow-color, #E4572E), transparent 70%);
  z-index: -1;
}

.artwork-card:hover .artwork-card__glow {
  opacity: 0.6;
}

/* Cartel au survol */
.artwork-card__cartel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--s-6) var(--s-5) var(--s-5);
  background: linear-gradient(to top, rgba(14 13 18 / 0.92) 0%, transparent 100%);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  transform: translateY(8px);
  opacity: 0;
  transition: transform var(--dur-slow) var(--ease-out),
              opacity var(--dur-slow) var(--ease-out);
  pointer-events: none;
}

.artwork-card:hover .artwork-card__cartel,
.artwork-card:focus-visible .artwork-card__cartel {
  transform: translateY(-8px);
  opacity: 1;
}

.artwork-card__cartel-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
  font-style: italic;
  color: var(--ink);
  line-height: 1.2;
  margin-bottom: var(--s-1);
}

.artwork-card__cartel-price {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

/* Scale subtil au survol */
.artwork-card__image-wrap img {
  transition: transform 1.1s cubic-bezier(0.22, 0.9, 0.28, 1);
}

.artwork-card:hover .artwork-card__placeholder {
  transform: scale(1.03);
}

.artwork-card:hover .artwork-card__image-wrap img,
.artwork-card:focus-visible .artwork-card__image-wrap img {
  transform: scale(1.035);
}

/* ── 9. LIGHTBOX PLEIN ÉCRAN ──────────────────────────────── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-8);
}

.lightbox[hidden] { display: none; }

.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 7, 12, 0.97);
  cursor: zoom-out;
}

.lightbox__img {
  position: relative;
  z-index: 1;
  max-width: 100%;
  max-height: 100dvh;
  object-fit: contain;
  border-radius: var(--radius-md);
  cursor: zoom-out;
  user-select: none;
}

.lightbox__close {
  position: absolute;
  top: var(--s-6);
  right: var(--s-6);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--ink-dim);
  cursor: pointer;
  transition: color var(--dur-base), border-color var(--dur-base);
}
.lightbox__close:hover { color: var(--ink); border-color: var(--border-hover); }

/* Curseur zoom-in sur les images de l'overlay qui ont une vraie photo */
.focus-overlay__image-wrap.is-zoomable {
  cursor: zoom-in;
}

/* ── 10. FOCUS OVERLAY ─────────────────────────────────────── */
.focus-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
}

.focus-overlay[hidden] {
  display: none;
}

.focus-overlay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(14 13 18 / 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
  cursor: none;
}

.focus-overlay.is-open .focus-overlay__backdrop {
  opacity: 1;
}

.focus-overlay__close {
  position: absolute;
  top: var(--s-6);
  right: var(--s-6);
  z-index: 2;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: color var(--dur-base), border-color var(--dur-base), background var(--dur-base);
  cursor: none;
}

.focus-overlay__close:hover {
  color: var(--ink);
  border-color: var(--border-hover);
  background: var(--surface);
}

.focus-overlay__close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.focus-overlay__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-12);
  max-width: 1100px;
  width: 90%;
  max-height: 90dvh;
  align-items: center;
}

.focus-overlay__image-wrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
  max-height: 80dvh;
}

.focus-overlay__image-wrap img,
.focus-overlay__image-wrap .artwork-card__placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

/* Cartel focus */
.focus-overlay__cartel {
  opacity: 0;
  transform: translateX(20px);
  transition: opacity var(--dur-slow) var(--ease-out) 100ms,
              transform var(--dur-slow) var(--ease-out) 100ms;
}

.focus-overlay.is-open .focus-overlay__cartel {
  opacity: 1;
  transform: translateX(0);
}

.focus__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 300;
  font-style: italic;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: var(--s-6);
  line-height: 1.1;
}

.focus__meta {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-bottom: var(--s-6);
  padding-bottom: var(--s-6);
  border-bottom: 1px solid var(--border);
}

.focus__meta-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-4);
}

.focus__meta-row dt {
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: 500;
  flex-shrink: 0;
}

.focus__meta-row dd {
  font-size: var(--text-sm);
  color: var(--ink-muted);
  text-align: right;
}

.focus__description {
  font-size: var(--text-base);
  color: var(--ink-muted);
  line-height: 1.7;
  margin-bottom: var(--s-6);
  max-width: 45ch;
}

.focus__price {
  font-family: var(--font-body);
  font-size: var(--text-2xl);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  margin-bottom: var(--s-8);
  letter-spacing: -0.02em;
}

/* ── 10. BOUTONS ──────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-8);
  background: linear-gradient(105deg, var(--or) 0%, var(--or-clair) 55%, var(--or) 100%);
  background-size: 200% 100%;
  background-position: 0 0;
  color: #111009;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  transition: transform var(--dur-base) var(--ease-out),
              background-position 0.6s cubic-bezier(0.22, 0.9, 0.28, 1),
              box-shadow var(--dur-base) var(--ease-out);
  position: relative;
  overflow: hidden;
  cursor: none;
  will-change: transform;
}

.btn-primary:hover {
  background-position: 100% 0;
  box-shadow: 0 0 24px rgba(195, 154, 75, 0.35);
  transform: translateY(-2px);
}

.btn-primary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.btn-primary:active {
  transform: scale(0.97);
}

/* Magnetic hover géré par JS */
.btn-primary[data-magnetic] {
  transition: transform var(--dur-slow) var(--ease-out),
              background-position 0.6s cubic-bezier(0.22, 0.9, 0.28, 1),
              box-shadow var(--dur-base) var(--ease-out);
}

.focus__cta {
  width: 100%;
}

.focus__stripe-link {
  display: block;
  text-align: center;
  font-size: var(--text-xs);
  color: var(--ink-dim);
  letter-spacing: 0.08em;
  margin-top: var(--s-3);
  transition: color var(--dur-base);
}

.focus__stripe-link:hover {
  color: var(--ink-muted);
}

/* ── 11. ARTISTE ──────────────────────────────────────────── */
.artiste {
  padding: var(--s-32) var(--s-8);
  max-width: 1100px;
  margin: 0 auto;
}

.artiste__inner {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: var(--s-16);
  align-items: center;
}

.artiste__portrait {
  position: relative;
}

.artiste__portrait-placeholder {
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse at 30% 20%, rgba(212 160 23 / 0.4) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 80%, rgba(100 60 20 / 0.6) 0%, transparent 60%),
    #1C1A24;
  position: relative;
  overflow: hidden;
}

.artiste__portrait-placeholder::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}

.artiste__bio {
  padding-left: var(--s-4);
}

.artiste__title {
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: var(--s-4);
}

.artiste__name {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: var(--s-6);
  line-height: 1.1;
}

.artiste__text {
  font-size: var(--text-base);
  color: var(--ink-muted);
  line-height: 1.75;
  max-width: 55ch;
  margin-bottom: var(--s-4);
}

.artiste__text:last-child {
  margin-bottom: 0;
}

/* ── 12. ACQUISITION / FORMULAIRE ────────────────────────── */
.acquisition {
  padding: var(--s-24) var(--s-8) var(--s-32);
}

.acquisition__inner {
  max-width: 680px;
  margin: 0 auto;
}

.acquisition__intro {
  margin-bottom: var(--s-12);
}

.acquisition__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: var(--s-4);
}

.acquisition__sub {
  font-size: var(--text-base);
  color: var(--ink-muted);
  line-height: 1.7;
  max-width: 55ch;
}

/* Formulaire */
.acquisition__form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-6);
}

.form__field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.form__field--full {
  grid-column: 1 / -1;
}

.form__label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
  transition: color var(--dur-base);
}

.form__field:focus-within .form__label {
  color: var(--ink);
}

.form__required {
  color: var(--accent);
}

.form__input,
.form__select,
.form__textarea {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--ink);
  padding: var(--s-3) var(--s-4);
  min-height: 44px;
  font-size: var(--text-base);
  transition: border-color var(--dur-base),
              box-shadow var(--dur-base);
  -webkit-appearance: none;
  appearance: none;
}

.form__textarea {
  resize: vertical;
  min-height: 130px;
}

.form__select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s-3) center;
  padding-right: var(--s-8);
  cursor: none;
}

.form__input::placeholder,
.form__textarea::placeholder {
  color: var(--ink-dim);
}

.form__input:focus,
.form__select:focus,
.form__textarea:focus {
  outline: none;
  border-color: rgba(242 239 232 / 0.30);
  box-shadow: 0 0 0 3px rgba(242 239 232 / 0.06);
}

.form__input:focus-visible,
.form__select:focus-visible,
.form__textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.form__input.has-error,
.form__textarea.has-error {
  border-color: rgba(228 87 46 / 0.6);
}

.form__error {
  font-size: var(--text-xs);
  color: #E4572E;
  min-height: 1em;
  transition: opacity var(--dur-base);
}

.form__actions {
  grid-column: 1 / -1;
  margin-top: var(--s-2);
}

.form__submit {
  min-width: 220px;
}

.form__success {
  grid-column: 1 / -1;
  background: var(--surface);
  border: 1px solid rgba(0 184 150 / 0.3);
  border-radius: var(--radius-sm);
  padding: var(--s-4) var(--s-6);
  font-size: var(--text-sm);
  color: #00B896;
  letter-spacing: 0.02em;
}

.form__success[hidden] {
  display: none;
}

/* ── 13. FOOTER ───────────────────────────────────────────── */
.footer {
  border-top: 1px solid var(--border);
  padding: var(--s-10) var(--s-8) var(--s-8);
  position: relative;
}

.footer__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-8);
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.footer__logo {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 300;
  letter-spacing: 0.1em;
  color: var(--ink);
}

.footer__tagline {
  font-size: var(--text-xs);
  color: var(--ink-dim);
  letter-spacing: 0.08em;
}

.footer__nav {
  display: flex;
  gap: var(--s-6);
}

.footer__link {
  font-size: var(--text-sm);
  color: var(--ink-muted);
  transition: color var(--dur-base);
}

.footer__link:hover {
  color: var(--or-clair);
}

.footer__meta {
  text-align: right;
}

.footer__legal {
  font-size: var(--text-xs);
  color: var(--ink-dim);
}

.footer__admin-link {
  font-size: var(--text-xs);
  font-family: var(--font-body);
  color: var(--ink-muted);
  text-decoration: none;
  transition: color var(--dur-base);
  margin-left: var(--s-4);
}
.footer__admin-link:hover { color: var(--ink); }

.footer__dev-link {
  font-size: 10px;
  font-family: var(--font-body);
  color: var(--ink-muted);
  text-decoration: none;
  opacity: 0.35;
  letter-spacing: 0.08em;
  transition: opacity var(--dur-base);
  margin-left: var(--s-4);
}
.footer__dev-link:hover { opacity: 0.7; }

/* Bouton retour en haut */
.footer__top-btn {
  position: absolute;
  right: var(--s-8);
  bottom: var(--s-8);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--ink-muted);
  transition: color var(--dur-base),
              border-color var(--dur-base),
              transform var(--dur-base) var(--ease-out);
  cursor: none;
}

.footer__top-btn:hover {
  color: var(--ink);
  border-color: var(--border-hover);
  transform: translateY(-3px);
}

.footer__top-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── 14. SKIP LINK ────────────────────────────────────────── */
.skip-link {
  position: fixed;
  top: var(--s-4);
  left: var(--s-4);
  padding: var(--s-3) var(--s-5);
  background: var(--ink);
  color: var(--bg);
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: var(--radius-sm);
  z-index: calc(var(--z-cursor) + 10);
  transform: translateY(calc(-100% - var(--s-4) - 4px));
  transition: transform var(--dur-base) var(--ease-out);
  cursor: none;
}
.skip-link:focus {
  transform: translateY(0);
}

/* ── 15. TRANSITIONS SCROLL GÉNÉRIQUES ───────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
}

/* ── 16. RESPONSIVE ───────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Grille collection simplifiée */
  .collection__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-5);
  }

  .artwork-card:nth-child(n) {
    grid-column: auto;
    grid-row: auto;
    margin-top: 0;
  }

  .artwork-card:nth-child(odd) {
    margin-top: var(--s-8);
  }

  /* Focus overlay empilé */
  .focus-overlay__inner {
    grid-template-columns: 1fr;
    max-height: 95dvh;
    overflow-y: auto;
    gap: var(--s-6);
    padding: var(--s-12) var(--s-4) var(--s-8);
  }

  .focus-overlay__image-wrap {
    max-height: 50dvh;
  }

  /* Artiste empilé */
  .artiste__inner {
    grid-template-columns: 1fr;
    gap: var(--s-10);
  }

  .artiste__portrait-placeholder {
    aspect-ratio: 4 / 3;
    max-width: 400px;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  :root {
    --s-8: 1.5rem;
    --s-16: 3rem;
    --s-24: 4rem;
    --s-32: 5rem;
  }

  body { cursor: auto; }
  .cursor { display: none; }
  button, a { cursor: pointer; }

  .header {
    padding: var(--s-4) var(--s-5);
  }

  .header.is-scrolled {
    padding: var(--s-3) var(--s-5);
  }

  .header__nav {
    gap: var(--s-5);
  }

  .hero__content {
    padding: var(--s-5);
  }

  /* Garde-fou : empêche toute largeur fixe en px de forcer le viewport
     de layout à s'élargir au-delà de l'écran (casse header/overlays fixes) */
  .hero__artwork {
    max-width: 40vw;
  }

  /* Le glow (inset:-30%) déborde largement une carte pleine largeur en
     colonne unique — même invisible (opacity:0), il élargit le viewport
     de layout et coupe le header/les overlays fixes. On clippe la section
     plutôt que de réduire le halo, pour préserver l'effet visuel. */
  .collection {
    overflow-x: clip;
  }

  /* Collection 1 col sur mobile */
  .collection__grid {
    grid-template-columns: 1fr;
    gap: var(--s-5);
  }

  .artwork-card:nth-child(odd) {
    margin-top: 0;
  }

  /* Formulaire 1 col */
  .acquisition__form {
    grid-template-columns: 1fr;
  }

  /* Footer */
  .footer__inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--s-5);
  }

  .footer__meta {
    text-align: center;
  }

  .footer__top-btn {
    position: static;
    margin: 0 auto;
  }
}

/* Logo + 3 liens de nav ne tiennent plus sur une seule ligne en dessous
   de ~420px (mesuré : ~396px de contenu pour ~335px disponibles à 375px
   de large) — le lien "Acquisition" sortait alors de l'écran. */
@media (max-width: 480px) {
  .header {
    flex-direction: column;
    gap: var(--s-2);
    padding-top: var(--s-3);
    padding-bottom: var(--s-3);
  }

  .header__nav {
    gap: var(--s-4);
  }

  /* Header sur deux lignes ici — la scène d'œuvres doit descendre d'autant */
  .hero__stage {
    top: 116px;
  }
}

/* ── 17. REDUCED MOTION ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .hero__scroll-line {
    animation: none;
    opacity: 0.3;
  }

  /* Couper les gsap.from() qui pourraient laisser des éléments invisibles */
  .hero__artwork {
    opacity: 0.75 !important;
    transform: none !important;
  }

  /* Identité feuille d'or — pas de translation/zoom/glissement, juste la lueur */
  .artwork-card:hover .artwork-card__image-wrap,
  .artwork-card:focus-visible .artwork-card__image-wrap,
  .artwork-card:hover .artwork-card__cartel,
  .artwork-card:focus-visible .artwork-card__cartel,
  .artwork-card:hover .artwork-card__image-wrap img,
  .artwork-card:focus-visible .artwork-card__image-wrap img {
    transform: none !important;
  }

  .btn-primary:hover {
    background-position: 0 0 !important;
    transform: none !important;
  }
}