/* ============================================================================
   guelmouzy.com — « La porte sous la Voie lactée »
   Importe tokens.css (design system de la galaxie) ; ce fichier ne surcharge
   que les jetons propres à la page. Aucune valeur de couleur hors :root.
   ============================================================================ */

@font-face {
  font-family: "Guelmouzy Display";
  src: url("../fonts/guelmouzy-display-light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Guelmouzy Display";
  src: url("../fonts/guelmouzy-display-regular.woff2") format("woff2");
  font-weight: 400 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}

:root {
  /* typo propre à la page */
  --font-display: "Guelmouzy Display", "Cormorant Garamond", Georgia, serif;
  --font-body: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;

  /* nuit */
  --c-bg: #06070A;
  --c-night-1: #0a0d14;
  --c-night-2: #0f131c;
  --c-text: #EDE6D8;
  --c-text-muted: #A8A296;     /* 7.6:1 sur --c-bg */
  --c-text-subtle: #8A8579;    /* 5.3:1 sur --c-bg */
  --c-line: rgba(237, 230, 216, .10);
  --c-line-strong: rgba(237, 230, 216, .22);
  --c-glass: rgba(18, 20, 27, .58);

  /* la seule lumière chaude : celle de la porte */
  --c-accent: #E9A55B;         /* 9.4:1 sur --c-bg */
  --c-accent-soft: rgba(233, 165, 91, .14);
  --c-on-accent: #1A1009;

  /* identités produits (reprises de leurs chartes) */
  --c-arkhee: #C99A62;
  --c-arkhee-text: #DDB488;
  --c-arkhee-tile: #111D2A;
  --c-erebe: #7A5C9E;
  --c-erebe-text: #B9AACF;
  --c-erebe-tile: #191521;

  --radius-pill: var(--radius-full);
  --ease-cine: cubic-bezier(.65, 0, .35, 1);
  --nav-h: 3rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--c-bg); color: var(--c-text); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-feature-settings: "kern", "liga";
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; border-radius: 6px; box-shadow: none; }

.skip {
  position: absolute; left: var(--space-4); top: -100px; z-index: 50;
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-pill);
  background: var(--c-text); color: var(--c-bg); text-decoration: none; font-weight: 600;
}
.skip:focus { top: var(--space-4); }

/* ---------------------------------------------------------------- nav ---- */
.nav {
  position: fixed; inset: var(--space-4) 0 auto; z-index: 20;
  display: flex; justify-content: center; pointer-events: none;
  padding-top: env(safe-area-inset-top);
}
.nav__pill {
  pointer-events: auto;
  display: flex; gap: 2px; padding: 4px;
  border-radius: var(--radius-pill);
  background: var(--c-glass);
  border: 1px solid var(--c-line);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
}
.nav__pill a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs); font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; color: var(--c-text-muted);
  transition: color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
.nav__pill a:hover { color: var(--c-text); }
.nav__pill a[aria-current="true"] { color: var(--c-text); background: rgba(237, 230, 216, .09); }

/* -------------------------------------------------------------- scène ---- */
/* Sans JS (ou mouvement réduit) : la scène est un seul écran, déjà arrivée. */
.scene { --p: 1; --q: 1; --l: 1; --h: 1; --cue: 0; position: relative; }
.js .scene { height: 300svh; }
@media (max-width: 640px) { .js .scene { height: 260svh; } }

.stage {
  position: sticky; top: 0;
  height: 100svh; min-height: 34rem;
  overflow: hidden;
  background: linear-gradient(to bottom, var(--c-bg) 0%, var(--c-night-1) 55%, var(--c-night-2) 72%, var(--c-bg) 100%);
  isolation: isolate;
}
.sky, .twinkle {
  position: absolute; left: 0; top: 0; width: 100%; height: 130%;
  transform: translate3d(0, calc(var(--q) * -20%), 0);
  will-change: transform;
}
.twinkle { mix-blend-mode: screen; }

.layer, .mist, .horizon-glow {
  position: absolute; inset: 0; width: 100%; height: 100%;
  will-change: transform;
}
.horizon-glow {
  background: radial-gradient(120% 22% at 50% 58%, rgba(92, 112, 150, .20), transparent 70%);
  transform: translate3d(0, calc((1 - var(--q)) * 36svh), 0);
}
.layer--far  { transform: translate3d(0, calc((1 - var(--q)) * 38svh), 0); }
.layer--mid  { transform: translate3d(0, calc((1 - var(--q)) * 62svh), 0); }
.layer--near { transform: translate3d(0, calc((1 - var(--q)) * 96svh), 0); }

.mist { pointer-events: none; left: -8%; width: 116%; }
.mist--high {
  background:
    radial-gradient(60% 9% at 30% 57%, rgba(150, 165, 190, .10), transparent 70%),
    radial-gradient(55% 8% at 74% 59%, rgba(150, 165, 190, .08), transparent 70%);
  transform: translate3d(0, calc((1 - var(--q)) * 48svh), 0);
}
.mist--low {
  background:
    radial-gradient(70% 7% at 22% 63%, rgba(160, 170, 190, .09), transparent 70%),
    radial-gradient(60% 6% at 80% 62%, rgba(160, 170, 190, .08), transparent 70%);
  transform: translate3d(0, calc((1 - var(--q)) * 80svh), 0);
}
@media (prefers-reduced-motion: no-preference) {
  .mist--high { animation: drift 46s var(--ease-cine) infinite alternate; }
  .mist--low  { animation: drift 38s var(--ease-cine) infinite alternate-reverse; }
}
@keyframes drift { from { translate: -3% 0; } to { translate: 3% 0; } }

.light { opacity: var(--l); }
.light--halo { opacity: calc(var(--l) * .95); }
.light--edge { opacity: calc(var(--l) * .55); }
.light--spill { opacity: calc(var(--l) * .95); }

.grain {
  position: absolute; inset: 0; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
}

.cue {
  position: absolute; left: 50%; bottom: max(var(--space-6), env(safe-area-inset-bottom));
  margin: 0; translate: -50% 0;
  display: grid; justify-items: center; gap: var(--space-3);
  font-size: var(--text-xs); letter-spacing: .3em; text-transform: uppercase; color: var(--c-text-subtle);
  opacity: var(--cue);
}
.cue::after {
  content: ""; width: 1px; height: 40px;
  background: linear-gradient(to bottom, var(--c-text-subtle), transparent);
  transform-origin: top;
}
@media (prefers-reduced-motion: no-preference) {
  .cue::after { animation: cue 2.4s var(--ease-cine) infinite; }
}
@keyframes cue { 0% { transform: scaleY(0); } 55% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* Écrans en portrait : la scène se pose plus haut pour laisser le sol au nom. */
.floor { display: none; }
@media (max-aspect-ratio: 4/5) {
  .stage { --cut: 74%; }
  .layer, .mist, .horizon-glow { height: var(--cut); }
  .floor {   /* le sol continue sous la scène, avec la même caméra que le premier plan */
    display: block; position: absolute; left: 0; right: 0; top: calc(var(--cut) - 1px); height: 110%;
    background: var(--c-bg);
    transform: translate3d(0, calc((1 - var(--q)) * 96svh), 0);
  }
}
@media (max-aspect-ratio: 4/5) and (min-height: 50rem) { .stage { --cut: 72%; } }

/* --------------------------------------------------------------- héros ---- */
.hero {
  position: absolute; left: 0; right: 0;
  bottom: max(clamp(1.75rem, 6svh, 4rem), env(safe-area-inset-bottom));
  padding-inline: var(--space-5);
  text-align: center;
  opacity: var(--h);
  transform: translate3d(0, calc((1 - var(--h)) * 1.5rem), 0);
  text-shadow: 0 1px 18px rgba(6, 7, 10, .85);
}
.hero__name {
  margin: 0;
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(2.6rem, 1.6rem + 3.6vw, 5rem);
  line-height: 1; letter-spacing: -.005em;
  font-variant-numeric: lining-nums;
}
.hero__role {
  margin: var(--space-4) 0 0;
  font-size: var(--text-xs); font-weight: 500; letter-spacing: .34em; text-transform: uppercase;
  color: var(--c-accent);
}
.hero__line {
  margin: var(--space-4) auto 0; max-width: 31rem;
  font-size: clamp(.95rem, .9rem + .2vw, 1.0625rem); line-height: 1.6;
  color: var(--c-text-muted);
  text-wrap: balance;
}
.hero__actions {
  margin: var(--space-6) 0 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3);
}

.pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 var(--space-6);
  border-radius: var(--radius-pill);
  border: 1px solid var(--c-line-strong);
  background: var(--c-glass);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size: var(--text-xs); font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; color: var(--c-text); text-shadow: none;
  transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.pill:hover { border-color: rgba(237, 230, 216, .45); background: rgba(237, 230, 216, .08); }
@media (max-width: 30rem) {
  .pill { padding: 0 var(--space-5); letter-spacing: .12em; }
  .hero__actions { flex-wrap: nowrap; }
}
.pill--primary { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); }
.pill--primary:hover { background: #F2B878; border-color: #F2B878; }

/* ------------------------------------------------------------ sections ---- */
.wrap { max-width: 68rem; margin: 0 auto; padding-inline: clamp(1.25rem, 5vw, 3rem); }
.products, .contact { position: relative; padding-block: clamp(5rem, 13vh, 9rem); }
.products { padding-top: clamp(4rem, 10vh, 7rem); }
.kicker {
  margin: 0;
  font-size: var(--text-xs); font-weight: 600; letter-spacing: .3em; text-transform: uppercase;
  color: var(--c-accent);
}
.title {
  margin: var(--space-2) 0 0;
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(2.4rem, 1.8rem + 2.6vw, 3.75rem); line-height: 1.05;
}

.cards {
  list-style: none; margin: var(--space-8) 0 0; padding: 0;
  display: grid; gap: var(--space-5);
}
@media (min-width: 52rem) { .cards { grid-template-columns: 1fr 1fr; } }

.card {
  --brand: var(--c-accent);
  position: relative;
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-5); align-items: start;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--radius-lg);
  border: 1px solid var(--c-line);
  background: linear-gradient(180deg, rgba(237, 230, 216, .035), rgba(237, 230, 216, .012));
  transition: border-color var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out), background-color var(--dur-slow) var(--ease-out);
}
.card::before {  /* filet supérieur à la couleur du produit */
  content: ""; position: absolute; left: 1.5rem; right: 1.5rem; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
  opacity: .7;
}
.card--arkhee { --brand: var(--c-arkhee); }
.card--erebe  { --brand: var(--c-erebe); }
.card:hover { border-color: var(--c-line-strong); }
@media (prefers-reduced-motion: no-preference) { .card:hover { transform: translateY(-2px); } }
.card:focus-within { border-color: var(--c-line-strong); }

.card__mark {
  width: 72px; height: 72px; border-radius: 18px; overflow: hidden;
  display: grid; place-items: center;
  box-shadow: 0 0 0 1px rgba(237, 230, 216, .06), 0 10px 30px rgba(0, 0, 0, .45);
}
.card__mark--arkhee { background: var(--c-arkhee-tile); }
.card__mark--arkhee img { width: 72px; height: 72px; }
.card__mark--erebe { background: var(--c-erebe-tile); }
.card__mark--erebe img { width: 42px; height: auto; }

.card__name {
  margin: 0;
  font-family: var(--font-display); font-weight: 400;
  font-size: 2rem; line-height: 1.05; letter-spacing: .01em;
}
.card--arkhee .card__name { letter-spacing: .06em; }
.card__name a { text-decoration: none; }
.card__name a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card__name a:focus-visible { outline: none; }
.card__name a:focus-visible::after { outline: 2px solid var(--c-accent); outline-offset: 3px; }

.card__tag { margin: var(--space-2) 0 0; font-family: var(--font-display); font-style: normal; font-size: 1.15rem; color: var(--c-arkhee-text); }
.card__tag--caps {
  font-family: var(--font-body); font-size: .7rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase;
  color: var(--c-erebe-text); padding-top: .3rem;
}
.card__text { margin: var(--space-4) 0 0; color: var(--c-text-muted); max-width: 30rem; }
.card__url {
  margin: var(--space-5) 0 0;
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); font-weight: 500; letter-spacing: .04em; color: var(--c-text);
}
.card__url svg { transition: transform var(--dur-base) var(--ease-out); }
@media (prefers-reduced-motion: no-preference) { .card:hover .card__url svg { transform: translateX(4px); } }

.later { margin: var(--space-6) 0 0; color: var(--c-text-subtle); font-size: var(--text-sm); }

@media (max-width: 30rem) {
  .card { grid-template-columns: 1fr; gap: var(--space-4); }
  .card__mark { width: 60px; height: 60px; border-radius: 15px; }
  .card__mark--arkhee img { width: 60px; height: 60px; }
  .card__mark--erebe img { width: 36px; }
}

/* ------------------------------------------------------------ contact ---- */
.contact { border-top: 1px solid var(--c-line); }
.mail {
  margin-top: var(--space-6);
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.75rem, 1rem + 3.4vw, 3.4rem); line-height: 1.1;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em;
  text-decoration-color: var(--c-line-strong);
  overflow-wrap: anywhere;
  transition: text-decoration-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.mail svg { flex: none; color: var(--c-accent); transition: transform var(--dur-base) var(--ease-out); }
.mail:hover { text-decoration-color: var(--c-accent); }
@media (prefers-reduced-motion: no-preference) { .mail:hover svg { transform: translateX(5px); } }

/* ------------------------------------------------------------- footer ---- */
.foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-3);
  text-align: center;
  padding: var(--space-8) var(--space-5) max(var(--space-8), env(safe-area-inset-bottom));
  border-top: 1px solid var(--c-line);
  color: var(--c-text-subtle); font-size: var(--text-sm);
}
.foot p { margin: 0; }

/* ----------------------------------------------------- mouvement réduit ---- */
@media (prefers-reduced-motion: reduce) {
  .js .scene { height: auto; }
  *, *::before, *::after { transition-duration: 1ms !important; animation: none !important; }
}