/* ══════════════════════════════════════════════════
   CHORBANE — depth.css
   Système 3D Premium · Float · Tilt · Shimmer · Depth
   GPU-only (transform + opacity uniquement)
   ══════════════════════════════════════════════════ */

/* ── PERSPECTIVE GLOBALS ────────────────────────── */
:root {
  --persp:        900px;
  --persp-near:   600px;
  --persp-far:   1400px;
  --float-dur:    5.5s;
  --float-ease:   cubic-bezier(.45, .05, .55, .95);
  --tilt-dur:     .55s;
  --tilt-ease:    cubic-bezier(.25, .1, .25, 1);
  --sh-bottle-idle: 0 18px 48px rgba(0,0,0,.42), 0 4px 12px rgba(0,0,0,.22);
  --sh-bottle-up:   0 28px 64px rgba(0,0,0,.55), 0 6px 18px rgba(0,0,0,.28);
}
[data-theme="light"] {
  --sh-bottle-idle: 0 16px 40px rgba(45,30,8,.22), 0 3px 10px rgba(45,30,8,.14);
  --sh-bottle-up:   0 24px 56px rgba(45,30,8,.32), 0 6px 16px rgba(45,30,8,.2);
}

/* ════════════════════════════════════════════════════
   1. BOUTEILLES — Système 3D complet
   Float continu + tilt mousemove + shimmer + ombre
═════════════════════════════════════════════════════ */

/* Context perspectif sur les wrappers */
.prod-visual,
.hi-prod-visual {
  perspective: var(--persp);
  perspective-origin: 50% 40%;
  overflow: visible !important; /* laisser l'ombre déborder */
}

/* ── FLOAT ANIMATION ────────────────────────────── */
/* Flottement continu — comme suspendu dans l'air */
.bottle-svg {
  animation: bottleFloat var(--float-dur) var(--float-ease) infinite;
  will-change: transform, filter;
  /* Override: on retire la transition CSS pour laisser JS gérer le tilt */
  transition: filter .6s ease !important;
  transform-style: preserve-3d;
  filter: drop-shadow(var(--sh-bottle-idle));
}

@keyframes bottleFloat {
  0%   { transform: translateY(0px)   rotate3d(0,1,0, 0deg); }
  28%  { transform: translateY(-7px)  rotate3d(0,1,0,  .8deg); }
  50%  { transform: translateY(-11px) rotate3d(0,1,0,  0deg); }
  72%  { transform: translateY(-7px)  rotate3d(0,1,0, -.8deg); }
  100% { transform: translateY(0px)   rotate3d(0,1,0,  0deg); }
}

/* Float suspendu pour la homepage mini-bottle */
.hi-bottle {
  animation: bottleFloatSm 6s var(--float-ease) infinite;
  will-change: transform, filter;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.38));
  transition: filter .5s ease !important;
}
@keyframes bottleFloatSm {
  0%,100% { transform: translateY(0px); }
  50%     { transform: translateY(-7px); }
}

/* ── TILT MOUSEMOVE (géré par JS, état initial) ─── */
/* JS écrit directement sur style.transform — on garde seulement le filter ici */
.prod-visual.is-tilting .bottle-svg {
  animation-play-state: paused; /* pause le float pendant le tilt */
  filter: drop-shadow(var(--sh-bottle-up));
}

/* ── SHIMMER REFLET ─────────────────────────────── */
.bottle-shimmer {
  position: absolute;
  inset: 0; z-index: 10;
  pointer-events: none;
  background: linear-gradient(
    122deg,
    transparent       18%,
    rgba(255,255,255,.13) 40%,
    rgba(255,255,255,.06) 48%,
    transparent       68%
  );
  transform: translateX(-140%) skewX(-12deg);
  border-radius: inherit;
  will-change: transform, opacity;
}
/* Shimmer au hover — déclenché par JS via classe */
.prod-visual.shimmer-run .bottle-shimmer {
  animation: luxeShimmer 1.8s cubic-bezier(.4,0,.4,1) forwards;
}
.hi-prod-preview:hover .bottle-shimmer {
  animation: luxeShimmer 1.4s cubic-bezier(.4,0,.4,1) forwards;
  animation-delay: .1s;
}
@keyframes luxeShimmer {
  0%   { transform: translateX(-140%) skewX(-12deg); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translateX(160%)  skewX(-12deg); opacity: 0; }
}

/* ── OMBRE DYNAMIQUE ────────────────────────────── */
/* L'ombre "suit" le flottement grâce à JS qui écrit --tilt-x, --tilt-y */
.bottle-shadow-plane {
  position: absolute;
  bottom: -8px;
  left: 50%; transform: translateX(-50%);
  width: 70%; height: 18px;
  background: radial-gradient(ellipse, rgba(0,0,0,.35) 0%, transparent 72%);
  border-radius: 50%;
  will-change: transform, opacity;
  animation: shadowFloat var(--float-dur) var(--float-ease) infinite;
  pointer-events: none; z-index: 0;
}
@keyframes shadowFloat {
  0%,100% { transform: translateX(-50%) scaleX(1)    scaleY(1);    opacity: .55; }
  50%     { transform: translateX(-50%) scaleX(.82)  scaleY(.72);  opacity: .28; }
}
[data-theme="light"] .bottle-shadow-plane {
  background: radial-gradient(ellipse, rgba(45,30,8,.22) 0%, transparent 72%);
}

/* ── GLOW AMBIANT ───────────────────────────────── */
.prod-bottle-glow {
  position: absolute;
  width: 160px; height: 160px; border-radius: 50%;
  background: radial-gradient(circle, rgba(58,94,56,.18) 0%, transparent 68%);
  animation: glowPulse 4s ease-in-out infinite;
  will-change: transform, opacity;
  pointer-events: none;
}
@keyframes glowPulse {
  0%,100% { opacity: .35; transform: scale(1); }
  50%     { opacity: .75; transform: scale(1.18); }
}
[data-theme="light"] .prod-bottle-glow {
  background: radial-gradient(circle, rgba(140,110,40,.16) 0%, transparent 68%);
}

/* prod-visual hover — override les anciennes règles premium.css */
.prod-visual:hover .bottle-svg {
  /* Le tilt JS gère transform — on laisse le filter seul */
  transform: none !important; /* reset, JS reprend la main */
  filter: drop-shadow(var(--sh-bottle-up)) !important;
}
.prod-visual:hover .prod-bottle-glow {
  opacity: .85 !important;
  transform: scale(1.3) !important;
}

/* ── BOTTLE WRAPPER 3D ──────────────────────────── */
.prod-bottle-wrap {
  transform-style: preserve-3d;
  perspective: var(--persp);
  position: relative;
  z-index: 2;
  padding: 2.8rem 2.5rem 3.2rem; /* extra bottom pour l'ombre */
}

/* ════════════════════════════════════════════════════
   2. MICRO-INTERACTIONS GLOBALES
═════════════════════════════════════════════════════ */

/* ── BOUTONS — effet pression 3D ────────────────── */
.btn-primary,
.btn-add-cart,
.btn-checkout,
.btn-submit,
.btn-sm {
  transform-style: preserve-3d;
  transition-property: background, transform, box-shadow, border-color, color, filter !important;
  transition-duration: .22s !important;
  transition-timing-function: cubic-bezier(.34,.1,.26,1) !important;
}
.btn-primary:active   { transform: translateY(1px) scale(.985) !important; }
.btn-add-cart:active  { transform: translateY(1px) scale(.988) !important; }
.btn-checkout:active  { transform: translateY(1px) scale(.988) !important; }
.btn-submit:active    { transform: translateY(1px) scale(.988) !important; }
.btn-sm:active        { transform: translateY(1px) !important; }

/* Lift au hover — renforcé */
.btn-primary:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 30px rgba(40,70,38,.32), 0 2px 8px rgba(40,70,38,.18) !important;
}
.btn-add-cart:hover {
  transform: translateY(-2px) !important;
}

/* ── CARTES / MEDALS / PI — tilt mousemove ───────── */
/* Les transitions sont gérées par JS via style.transform
   Le CSS définit seulement l'état de repos et la transition "retour" */
.medal,
.pi,
.teaser-card,
.hi-prod-preview,
.hi-awards,
.ct-form-box,
.jury-quote,
.women-banner,
.sf-excel,
.audience {
  transform-style: preserve-3d;
  backface-visibility: hidden;
  /* transition "retour" définie ici, JS surcharge au hover */
  transition: transform .55s var(--tilt-ease),
              box-shadow .55s ease,
              border-color .3s ease !important;
}
.medal:hover,
.pi:hover {
  box-shadow: var(--sh-md), 0 0 0 1px var(--bd-card-h) !important;
}

/* ── SECTIONS — séparation en profondeur ────────── */
/* Chaque section a un micro z-index différentiel visible au scroll */
.section {
  transform-style: preserve-3d;
  position: relative; z-index: 1;
}
/* Sections "surélevées" légèrement */
.s-alt,
.s-stone {
  box-shadow: 0 -1px 0 var(--bd-card), 0 1px 0 var(--bd-card);
}
/* Effet de profondeur entre sections via micro shadow interne */
.section + .section::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 80px; pointer-events: none; z-index: 2;
  background: linear-gradient(to bottom, rgba(0,0,0,.04) 0%, transparent 100%);
}
[data-theme="light"] .section + .section::before {
  background: linear-gradient(to bottom, rgba(45,30,8,.035) 0%, transparent 100%);
}

/* ── SCROLL PARALLAX LAYER SUPPORT ──────────────── */
.parallax-slow  { will-change: transform; }
.parallax-med   { will-change: transform; }
.parallax-fast  { will-change: transform; }

/* ── IMAGE / VISUALS — micro depth ─────────────── */
.portrait-frame {
  transform-style: preserve-3d;
  transition: transform .55s var(--tilt-ease), box-shadow .55s ease !important;
}
.portrait-frame:hover {
  transform: perspective(1000px) rotateY(-2deg) rotateX(1deg) translateY(-4px) !important;
  box-shadow: var(--sh-lg) !important;
}

/* ── MEDALS — tilt renforcé ─────────────────────── */
.medal {
  transition: transform .4s var(--tilt-ease), box-shadow .4s ease, border-color .3s !important;
}

/* ── SECTION HERO — depth layer ─────────────────── */
.hero-content {
  transform-style: preserve-3d;
}
.hero-title {
  will-change: transform;
}
.hero-sub {
  will-change: transform;
}
.hero-branch {
  will-change: transform;
}

/* ════════════════════════════════════════════════════
   3. EFFETS VISUELS PREMIUM
═════════════════════════════════════════════════════ */

/* ── GLASS REFLECTION sur le hero ──────────────── */
.hero::before {
  content: '';
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(155deg,
      rgba(255,255,255,.022) 0%,
      transparent 28%,
      transparent 72%,
      rgba(255,255,255,.018) 100%
    );
}
[data-theme="light"] .hero::before {
  background:
    linear-gradient(155deg,
      rgba(255,255,255,.05) 0%,
      transparent 28%,
      transparent 72%,
      rgba(200,180,120,.04) 100%
    );
}

/* ── SECTION TRANSITIONS DOUCES ─────────────────── */
/* Fondu vertical entre sections — très subtil */
.s-dark + .s-alt,
.s-dark + .s-stone,
.s-alt  + .s-dark,
.s-stone + .s-dark {
  position: relative;
}
.s-dark + .s-alt::before,
.s-dark + .s-stone::before,
.s-alt  + .s-dark::before,
.s-stone + .s-dark::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 120px; pointer-events: none; z-index: 1;
  background: linear-gradient(to bottom, rgba(0,0,0,.06) 0%, transparent 100%);
}

/* ── MICRO GLOW SUR ÉLÉMENTS CLÉS ──────────────── */
/* Stats hero */
.hst strong {
  text-shadow: 0 0 28px rgba(122,158,118,.18);
}
/* Badge Millésime */
.prod-badge-millesime {
  text-shadow: 0 0 14px rgba(201,134,42,.25);
}
/* Nav logo */
.nav-logo svg {
  filter: drop-shadow(0 0 6px rgba(122,158,118,.25));
}
/* Médaille tags */
.medal-tag {
  text-shadow: 0 0 12px rgba(201,134,42,.2);
}

/* ── FOND — texture subtile renforcée ───────────── */
/* Couche profondeur supplémentaire sur bg-page */
body::after {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 100% 60% at 50% 0%,
      rgba(44,74,42,.04) 0%, transparent 70%),
    radial-gradient(ellipse 80% 40% at 0% 100%,
      rgba(40,60,35,.03) 0%, transparent 60%);
  mix-blend-mode: screen;
}
[data-theme="light"] body::after {
  background:
    radial-gradient(ellipse 100% 60% at 50% 0%,
      rgba(160,140,80,.04) 0%, transparent 70%),
    radial-gradient(ellipse 80% 40% at 100% 100%,
      rgba(80,120,50,.03) 0%, transparent 60%);
}

/* ── NAV DEPTH ───────────────────────────────────── */
.site-header.scrolled {
  box-shadow: 0 1px 0 var(--bd-card),
              0 4px 24px rgba(0,0,0,.18);
}
[data-theme="light"] .site-header.scrolled {
  box-shadow: 0 1px 0 var(--bd-card),
              0 4px 20px rgba(45,30,8,.12);
}

/* ── AWARDS STRIP — subtil depth ────────────────── */
.awards-strip {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04),
              inset 0 -1px 0 rgba(0,0,0,.08);
}

/* ── PAGE HERO — inner glow ─────────────────────── */
.page-hero {
  box-shadow: inset 0 -60px 80px rgba(0,0,0,.06);
}
[data-theme="light"] .page-hero {
  box-shadow: inset 0 -60px 80px rgba(45,30,8,.04);
}

/* ── JURY QUOTE — depth card ─────────────────────── */
.jury-quote {
  transition: transform .5s var(--tilt-ease), box-shadow .5s ease !important;
}
.jury-quote:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--sh-md) !important;
}

/* ── TIMELINE DOT GLOW ───────────────────────────── */
.tl-dot {
  box-shadow: 0 0 0 4px rgba(122,158,118,.08),
              0 0 12px rgba(122,158,118,.22);
  transition: box-shadow .3s ease, transform .3s ease;
}
.tl-item:hover .tl-dot {
  box-shadow: 0 0 0 6px rgba(122,158,118,.14),
              0 0 20px rgba(122,158,118,.35);
  transform: scale(1.25);
}
[data-theme="light"] .tl-dot {
  box-shadow: 0 0 0 4px rgba(60,95,30,.1),
              0 0 10px rgba(60,95,30,.2);
}
[data-theme="light"] .tl-item:hover .tl-dot {
  box-shadow: 0 0 0 6px rgba(60,95,30,.15),
              0 0 18px rgba(60,95,30,.3);
}

/* ── PROCESS CARDS (PI) — lift 3D renforcé ──────── */
.pi {
  perspective: var(--persp-near);
  transition: transform .45s var(--tilt-ease),
              box-shadow .45s ease,
              border-color .3s ease,
              background .3s ease !important;
}

/* ── FOOTER — séparation douce ──────────────────── */
.site-footer {
  box-shadow: inset 0 1px 0 var(--bd-card);
}

/* ════════════════════════════════════════════════════
   4. PANIER — Améliorations
═════════════════════════════════════════════════════ */
/* Suppression article — animation de sortie */
.cart-item {
  transition: opacity .3s ease, transform .3s ease, max-height .35s ease !important;
  overflow: hidden;
  max-height: 120px;
}
.cart-item.removing {
  opacity: 0;
  transform: translateX(20px);
  max-height: 0;
  padding: 0;
  margin: 0;
}

/* ── CART DRAWER — depth ─────────────────────────── */
.cart-drawer.open {
  box-shadow: -20px 0 80px rgba(0,0,0,.45),
              -1px 0 0 var(--bd-card) !important;
}
[data-theme="light"] .cart-drawer.open {
  box-shadow: -12px 0 60px rgba(45,30,8,.2),
              -1px 0 0 var(--bd-card) !important;
}

/* ════════════════════════════════════════════════════
   5. PERFORMANCES — GPU hints
═════════════════════════════════════════════════════ */
.bottle-svg,
.hi-bottle,
.prod-bottle-glow,
.bottle-shimmer,
.bottle-shadow-plane,
.medal,
.pi,
.teaser-card,
.hi-prod-preview,
.btn-primary,
.btn-add-cart,
.btn-submit,
.hero-branch,
.hero-title,
.hero-sub {
  will-change: transform;
}

/* ── DISABLE ON REDUCED MOTION ───────────────────── */
@media (prefers-reduced-motion: reduce) {
  .bottle-svg,
  .hi-bottle,
  .bottle-shadow-plane,
  .prod-bottle-glow {
    animation: none !important;
    will-change: auto !important;
  }
  .bottle-shimmer { display: none !important; }
  .portrait-frame:hover { transform: none !important; }
  .btn-primary:hover { transform: translateY(-1px) !important; }
}

/* ── DISABLE TILT ON TOUCH ───────────────────────── */
@media (pointer: coarse) {
  .bottle-svg { animation-duration: 7s; } /* plus lent sur mobile */
  .bottle-shimmer { display: none; }
  .bottle-shadow-plane { display: none; }
}