/* ==========================================================================
   Alp' Ramonage 06 — Design System / Tokens
   Minimalist Luxury & Haute-Artisanat (Chaux, Suie, Pierre & Bronze Antique)
   ========================================================================== */

/* ---------- 1. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}
body { min-height: 100svh; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
img, picture, svg, video, canvas { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
[hidden] { display: none !important; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
ul[class], ol[class] { list-style: none; padding: 0; }
a { color: inherit; }
:target { scroll-margin-top: 6rem; }

/* ---------- 2. Tokens : Minimalist Luxury Palette ---------- */
:root {
  /* Surfaces : Chaux pâle & Papier vélin */
  --c-bg:        #FAF8F5;
  --c-bg-sunk:   #F2ECE4;
  --c-surface:   #FFFFFF;
  --c-surface-2: #F8F4EE;

  /* Typographie : Suie minérale chaude & Graphite */
  --c-ink:       #161514;
  --c-ink-2:     #4A453F;
  --c-ink-3:     #8C847B;
  --c-ink-inv:   #FAF8F5;

  /* Filets & Lignes d'Atelier */
  --c-line:      rgba(22, 21, 20, 0.08);
  --c-line-2:    rgba(22, 21, 20, 0.16);
  --c-line-gold: rgba(160, 125, 62, 0.28);

  /* Bronze Noble & Or Patiné */
  --c-ember:     #9E7B3B;
  --c-ember-h:   #82632A;
  --c-ember-s:   #F6EFE3;
  --c-amber:     #B58A3C;
  --c-amber-s:   #FAF1DE;

  /* Suie d'Artisan — Noir Profond Texturé */
  --c-soot:      #121110;
  --c-soot-2:    #1A1918;
  --c-soot-3:    #262422;

  /* Sémantique discrète */
  --c-jade:      #2A7555;
  --c-jade-s:    #EAF4EF;
  --c-danger:    #B93838;
  --c-danger-s:  #FBEAEA;

  /* Rayons architecturaux précis (non-bulleux) */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 12px;
  --r-2xl: 18px;
  --r-full: 9999px;

  /* Élévations feutrées & ultra-diffuses (zéro néon) */
  --sh-1: 0 1px 2px rgba(22, 21, 20, 0.03);
  --sh-2: 0 4px 20px rgba(22, 21, 20, 0.04);
  --sh-3: 0 12px 36px rgba(22, 21, 20, 0.06);
  --sh-4: 0 20px 50px rgba(22, 21, 20, 0.08);
  --sh-ember: 0 4px 18px rgba(158, 123, 59, 0.15);

  /* Rythme & Espacements */
  --sp-1: .25rem; --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem;   --sp-7: 3rem;   --sp-8: 4.5rem;
  --sp-9: 6.5rem; --sp-10: 9rem;

  /* Largeurs */
  --w-max: 1280px;
  --w-prose: 66ch;
  --gutter: clamp(1.5rem, 5vw, 4rem);

  /* Typographie Haute-Fidélité */
  --f-display: 'Cormorant Garamond', Garamond, 'Baskerville', 'Georgia', serif;
  --f-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-mono: ui-monospace, 'SF Mono', Menlo, monospace;

  --t-xs:   .75rem;
  --t-sm:   .8125rem;
  --t-base: .9375rem;
  --t-md:   1.0625rem;
  --t-lg:   clamp(1.15rem, 1rem + .6vw, 1.4rem);
  --t-xl:   clamp(1.4rem, 1.15rem + 1vw, 1.85rem);
  --t-2xl:  clamp(1.85rem, 1.4rem + 1.8vw, 2.75rem);
  --t-3xl:  clamp(2.4rem, 1.7rem + 2.8vw, 3.85rem);
  --t-4xl:  clamp(3rem, 2rem + 4.2vw, 5.2rem);

  /* Transitions */
  --ez: cubic-bezier(.22,.61,.36,1);
  --ez-out: cubic-bezier(.16,1,.3,1);
  --tr: 240ms var(--ez);

  color-scheme: light;
}

/* ---------- 3. Tokens : Mode Sombre Sobre ---------- */
:root[data-theme="dark"] {
  --c-bg:        #0E0D0C;
  --c-bg-sunk:   #080707;
  --c-surface:   #161514;
  --c-surface-2: #1E1D1B;
  --c-ink:       #FAF8F5;
  --c-ink-2:     #C8C2B9;
  --c-ink-3:     #8C847B;
  --c-ink-inv:   #161514;
  --c-line:      rgba(250, 248, 245, 0.08);
  --c-line-2:    rgba(250, 248, 245, 0.16);
  --c-line-gold: rgba(181, 138, 60, 0.32);
  --c-ember:     #B58A3C;
  --c-ember-h:   #C89B48;
  --c-ember-s:   rgba(181, 138, 60, 0.16);
  --c-soot:      #080707;
  --c-soot-2:    #0E0D0C;
  --c-soot-3:    #161514;
  --sh-1: 0 1px 3px rgba(0,0,0,.3);
  --sh-2: 0 4px 18px rgba(0,0,0,.45);
  --sh-3: 0 12px 36px rgba(0,0,0,.6);
  color-scheme: dark;
}

/* ---------- 4. Base Typographique ---------- */
body {
  font-family: var(--f-body);
  font-size: var(--t-md);
  line-height: 1.7;
  letter-spacing: -0.005em;
  color: var(--c-ink);
  background: var(--c-bg);
  transition: background-color var(--tr), color var(--tr);
}

h1, h2, h3, h4, h5 {
  font-family: var(--f-display);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--c-ink);
  text-wrap: balance;
}
h1 { font-size: var(--t-4xl); font-weight: 500; letter-spacing: -0.02em; }
h2 { font-size: var(--t-3xl); font-weight: 500; letter-spacing: -0.018em; }
h3 { font-size: var(--t-xl); font-weight: 500; }
h4 { font-size: var(--t-lg); font-weight: 600; line-height: 1.25; }

p, li, blockquote {
  text-wrap: pretty;
}

a { text-decoration-thickness: 1px; text-underline-offset: 3px; }

::selection { background: var(--c-ember); color: #fff; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 1.5px solid var(--c-ember);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* ---------- 5. Primitives de mise en page ---------- */
.wrap { width: 100%; max-width: var(--w-max); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: 820px; }
.wrap-wide { max-width: 1400px; }
.section { padding-block: clamp(4rem, 8vw, 8rem); }
.section-sm { padding-block: clamp(2.5rem, 5vw, 5rem); }
.stack > * + * { margin-top: var(--flow, 1.4rem); }
.prose { max-width: var(--w-prose); }
.prose p { color: var(--c-ink-2); font-size: var(--t-base); line-height: 1.8; }
.prose p + p, .prose ul + p, .prose p + ul { margin-top: 1.3em; }
.prose h2 { margin-top: 2.4em; margin-bottom: .6em; }
.prose h3 { margin-top: 1.9em; margin-bottom: .45em; }
.prose ul { list-style: none; padding: 0; display: grid; gap: .7rem; }
.prose ul li { position: relative; padding-left: 1.6rem; color: var(--c-ink-2); }
.prose ul li::before {
  content: '—'; position: absolute; left: 0; color: var(--c-ember); font-weight: 400;
}
.prose strong { color: var(--c-ink); font-weight: 600; }
.prose a { color: var(--c-ember); font-weight: 500; text-decoration-color: rgba(158,123,59,0.35); }
.prose a:hover { text-decoration-color: var(--c-ember); }

.grid { display: grid; gap: var(--sp-6); }
.grid > * { min-width: 0; }
.g-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.g-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.g-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

.center { text-align: center; }
.center .prose { margin-inline: auto; }

/* ---------- 6. Typographie d'Artisanat ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .75rem;
  font-family: var(--f-body);
  font-size: 0.72rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--c-ember);
}
.eyebrow::before {
  content: ''; width: 28px; height: 1px; background: currentColor; opacity: .6;
}
.eyebrow.no-rule::before { display: none; }
.lede { font-size: var(--t-lg); line-height: 1.6; color: var(--c-ink-2); font-weight: 400; }
.muted { color: var(--c-ink-3); }
.small { font-size: var(--t-base); }
.tiny { font-size: var(--t-xs); }
.num { font-variant-numeric: tabular-nums; }
.ember-text { color: var(--c-ember); }

/* ---------- 7. Boutons Minimalistes de Luxe ---------- */
.btn {
  --btn-bg: var(--c-ink); --btn-fg: #FAF8F5; --btn-bd: var(--c-ink);
  display: inline-flex; align-items: center; justify-content: center; gap: .65rem;
  padding: .9rem 1.75rem;
  font-family: var(--f-body); font-size: 0.86rem; font-weight: 600;
  letter-spacing: .02em; text-transform: none; line-height: 1;
  color: var(--btn-fg); background: var(--btn-bg);
  border: 1px solid var(--btn-bd); border-radius: var(--r-sm);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform 180ms var(--ez), background-color var(--tr), border-color var(--tr), color var(--tr), box-shadow var(--tr);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .4; pointer-events: none; transform: none; }
.btn svg { flex: none; }

.btn-primary {
  --btn-bg: var(--c-ink);
  --btn-fg: #FAF8F5;
  --btn-bd: rgba(160, 125, 62, 0.4);
  box-shadow: 0 4px 16px rgba(22, 21, 20, 0.08);
}
.btn-primary:hover {
  --btn-bg: #22201E;
  --btn-bd: var(--c-ember);
  box-shadow: 0 6px 22px rgba(158, 123, 59, 0.22);
}

.btn-dark { --btn-bg: var(--c-soot); --btn-fg: #FAF8F5; --btn-bd: rgba(255,255,255,0.15); }
.btn-dark:hover { --btn-bg: #22201E; --btn-bd: var(--c-ember); }

.btn-ghost {
  --btn-bg: transparent;
  --btn-fg: var(--c-ink);
  --btn-bd: var(--c-line-2);
}
.btn-ghost:hover {
  --btn-bd: var(--c-ink);
  background: var(--c-surface);
}

.btn-gold {
  --btn-bg: var(--c-ember);
  --btn-fg: #FAF8F5;
  --btn-bd: var(--c-ember);
}
.btn-gold:hover {
  --btn-bg: var(--c-ember-h);
  --btn-bd: var(--c-ember-h);
}

.btn-outline-gold {
  --btn-bg: transparent;
  --btn-fg: var(--c-ember);
  --btn-bd: var(--c-ember);
}
.btn-outline-gold:hover {
  background: var(--c-ember-s);
}

.btn-light {
  --btn-bg: #FFFFFF;
  --btn-fg: var(--c-ink);
  --btn-bd: rgba(22, 21, 20, 0.12);
}
.btn-light:hover {
  --btn-bd: var(--c-ember);
  box-shadow: var(--sh-2);
}

.btn-outline-light {
  --btn-bg: transparent;
  --btn-fg: #FAF8F5;
  --btn-bd: rgba(255,255,255,0.24);
}
.btn-outline-light:hover {
  --btn-bd: #FAF8F5;
  background: rgba(255,255,255,0.06);
}

.btn-lg { padding: 1.15rem 2.25rem; font-size: 0.88rem; }
.btn-sm { padding: .55rem 1.15rem; font-size: 0.8rem; }
.btn-block { width: 100%; }

@media (max-width: 480px) {
  .btn {
    white-space: normal;
    max-width: 100%;
    text-align: center;
  }
}

/* Lien sous-titre éditorial */
.link-arrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--f-body); font-weight: 600; font-size: 0.82rem;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--c-ember); text-decoration: none;
  border-bottom: 1px solid rgba(160, 125, 62, 0.35);
  padding-bottom: 2px;
  transition: all var(--tr);
}
.link-arrow:hover {
  border-bottom-color: var(--c-ember);
  color: var(--c-ember-h);
}
.link-arrow svg { transition: transform 200ms var(--ez); }
.link-arrow:hover svg { transform: translateX(3px); }

/* ---------- 8. Pastilles & Marques d'Atelier ---------- */
.chip {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .35rem .75rem;
  font-family: var(--f-body);
  font-size: 0.72rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: var(--r-sm);
  background: var(--c-surface); color: var(--c-ink-2);
  border: 1px solid var(--c-line);
}
.chip-ember { background: var(--c-ember-s); color: var(--c-ember); border-color: var(--c-line-gold); }
.chip-jade  { background: var(--c-jade-s);  color: var(--c-jade);  border-color: transparent; }
.chip-amber { background: var(--c-amber-s); color: #8A6420; border-color: transparent; }

/* ---------- 9. Cartes d'Atelier (Fine Hairline) ---------- */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  transition: border-color var(--tr), transform var(--tr), box-shadow var(--tr);
}
.card-hover:hover {
  border-color: var(--c-line-gold);
  transform: translateY(-2px);
  box-shadow: var(--sh-2);
}
.card-flush { padding: 0; overflow: hidden; }

/* ---------- 10. Sections Noires / Suie ---------- */
.on-soot {
  background: var(--c-soot); color: #FAF8F5;
  --c-ink: #FAF8F5; --c-ink-2: #C8C2B9; --c-ink-3: #8C847B;
  --c-line: rgba(255,255,255,.08); --c-line-2: rgba(255,255,255,.16);
  --c-surface: rgba(255,255,255,.03); --c-surface-2: rgba(255,255,255,.06);
  --c-bg-sunk: rgba(255,255,255,.04);
}
.on-soot h1, .on-soot h2, .on-soot h3, .on-soot h4 { color: #FAF8F5; }

/* ---------- 11. Révélation au scroll ---------- */
.reveal { opacity: 0; transform: translateY(16px); }
.reveal.in { opacity: 1; transform: none; transition: opacity .7s var(--ez-out), transform .7s var(--ez-out); }
.reveal[data-d="1"].in { transition-delay: .06s; }
.reveal[data-d="2"].in { transition-delay: .12s; }
.reveal[data-d="3"].in { transition-delay: .18s; }
.reveal[data-d="4"].in { transition-delay: .24s; }
.reveal[data-d="5"].in { transition-delay: .30s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ---------- 12. Utilitaires ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 50%; translate: -50% -150%; z-index: 999;
  padding: .8rem 1.4rem; background: var(--c-ink); color: #FAF8F5;
  border-radius: 0 0 var(--r-sm) var(--r-sm); font-weight: 600; text-decoration: none;
  border: 1px solid var(--c-ember);
  transition: translate 200ms var(--ez);
}
.skip-link:focus { translate: -50% 0; }
.hr { height: 1px; background: var(--c-line); border: 0; }