/* ========================================================================
   DEPTH — Direction artistique (couche isolée, chargée APRÈS style.css)
   Même design, même structure, même identité (monochrome).
   Objectif : matière · lumière · profondeur · relief · atmosphère · 3D.
   Réglable/retirable en un seul fichier.
   ======================================================================== */

/* ============ 1. FOND VIVANT — l'atmosphère respire ============ */
body {
  background:
    radial-gradient(125% 105% at 50% 118%, rgba(0,0,0,.75), transparent 55%),
    radial-gradient(100% 75% at 50% -12%, rgba(232,230,223,.06), transparent 60%),
    var(--bg) !important;
  background-attachment: fixed !important;
}

/* Aurores lumineuses en mouvement lent (monochrome, blend screen) */
body::before {
  content: ""; position: fixed; inset: -30%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40vw 40vw at 20% 16%, rgba(232,230,223,.12), transparent 60%),
    radial-gradient(48vw 48vw at 84% 10%, rgba(196,194,186,.09), transparent 62%),
    radial-gradient(54vw 54vw at 62% 98%, rgba(232,230,223,.08), transparent 60%);
  mix-blend-mode: screen;
  animation: auroraDrift 26s ease-in-out infinite;
  will-change: transform;
}
@keyframes auroraDrift {
  0%   { transform: translate3d(-3%, -2%, 0) scale(1.06) rotate(0deg); }
  50%  { transform: translate3d(3%, 4%, 0)  scale(1.20) rotate(4deg); }
  100% { transform: translate3d(-3%, -2%, 0) scale(1.06) rotate(0deg); }
}

/* Grain — matière sur toute la surface (nettement présent) */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  opacity: .13; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* Vignette cinématique (injectée par depth.js) — cadre l'image, crée la profondeur */
.fx-vignette {
  position: fixed; inset: 0; z-index: 9997; pointer-events: none;
  background: radial-gradient(130% 100% at 50% 40%, transparent 48%, rgba(0,0,0,.55) 100%);
}

/* ============ 2. CARTES — matière, relief, 3D ============ */
.card {
  background:
    linear-gradient(157deg, rgba(255,255,255,.13), rgba(255,255,255,.02) 32%, rgba(255,255,255,0) 55%),
    linear-gradient(180deg, #1b1b1b, #0d0d0d) !important;
  border: 1px solid rgba(232,230,223,.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -40px 70px -50px rgba(0,0,0,.95),
    0 3px 8px rgba(0,0,0,.6),
    0 26px 50px -24px rgba(0,0,0,.9),
    0 60px 110px -45px rgba(0,0,0,.85) !important;
  transform-style: preserve-3d;
  transition: box-shadow .5s var(--ease), border-color .45s ease, transform .5s var(--ease);
  will-change: transform;
}
.card:hover,
.card:focus-visible {
  border-color: rgba(232,230,223,.42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    inset 0 -40px 70px -50px rgba(0,0,0,.9),
    0 6px 14px rgba(0,0,0,.6),
    0 40px 80px -28px rgba(0,0,0,.98),
    0 90px 150px -55px rgba(0,0,0,.9) !important;
}

/* Reflet/glare qui suit le curseur (lumière rasante sur la face de la carte) */
.card::before {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit;
  background: radial-gradient(240px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.20), transparent 46%);
  opacity: 0; transition: opacity .4s ease; mix-blend-mode: soft-light;
}
.card:hover::before { opacity: 1; }

/* Photo produit — ancrée dans la carte (sheen haut + ombre de contact bas) */
.card__media::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.08), transparent 18%, transparent 66%, rgba(0,0,0,.42));
}

/* ============ 3. BOUTONS — relief + matière + balayage de lumière ============ */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: ""; position: absolute; top: 0; left: -70%; width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-18deg); opacity: 0; pointer-events: none;
}
.btn:hover::after { animation: btnSweep .75s ease; }
@keyframes btnSweep { 0% { left: -70%; opacity: 0; } 18% { opacity: .9; } 100% { left: 140%; opacity: 0; } }

.btn--primary {
  background: linear-gradient(180deg, #ffffff, var(--text) 52%, #d9d7d0) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -3px 8px rgba(0,0,0,.18),
    0 6px 16px -6px rgba(0,0,0,.6),
    0 16px 34px -12px rgba(0,0,0,.55) !important;
}
.btn--primary:active { transform: translateY(2px) !important; box-shadow: inset 0 2px 6px rgba(0,0,0,.3) !important; }
.btn--ghost {
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 22px -12px rgba(0,0,0,.7) !important;
}
.btn--ghost:active { transform: translateY(2px) !important; }

/* ============ 4. NAV — couche détachée au-dessus du contenu ============ */
.nav { box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 20px 44px -30px rgba(0,0,0,.95); }

/* ============ 5. Accessibilité — respect du reduced-motion ============ */
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  .btn:hover::after { animation: none; }
}