/* Ælen Paris — lookbook (magazine plein écran en ouverture) */
.mag { position: relative; background: #0f0c09; }
.mag-stage { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 480px; overflow: hidden; background: #0f0c09; }
#glc { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: pointer; touch-action: pan-y; }
.mag-bar { position: absolute; left: 0; right: 0; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); display: flex; justify-content: center; pointer-events: none; z-index: 5; }
.mag-label { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.8); }
.mag-btn { position: absolute; top: 50%; margin-top: -19px; width: 38px; height: 38px; border: 1px solid rgba(255, 255, 255, 0.7); background: rgba(15, 12, 9, 0.35); color: #fff; cursor: pointer; font-size: 16px; pointer-events: auto; z-index: 6; }
.mag-btn:hover { background: #fff; color: #0f0c09; }
#magPrev { left: max(16px, env(safe-area-inset-left, 0px)); }
#magNext { right: max(16px, env(safe-area-inset-right, 0px)); }
.mag-skip { position: absolute; left: max(18px, env(safe-area-inset-left, 0px)); bottom: calc(10px + env(safe-area-inset-bottom, 0px)); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; color: rgba(255, 255, 255, 0.85); border-bottom: 1px solid rgba(255, 255, 255, 0.5); z-index: 5; }
.mag-stage.nogl { display: none; }
@media (max-width: 860px) {
  #magPrev { left: 6px; }
  #magNext { right: 6px; }
  .mag-skip { display: none; }
}

/* en-tête transparent par-dessus le magazine */
.site-header { transition: background 0.3s ease, border-color 0.3s ease; }
body.inmag .site-header { background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.inmag .brand-logo { filter: brightness(0) invert(1); }
body.inmag .main-nav a, body.inmag .cart-toggle { color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); }
body.inmag .nav-toggle span { background: #fff; }
body.inmag .main-nav.open a, body.inmag .main-nav.open .nav-account-btn { color: var(--ink-soft); text-shadow: none; }

/* animations douces des photos (sans IA) */
@keyframes kbA { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.09) translate(-1.6%, -1.2%); } }
@keyframes kbB { from { transform: scale(1.08) translate(1.4%, 0); } to { transform: scale(1) translate(0, 1%); } }
@keyframes kbC { from { transform: scale(1) translate(0, 1.2%); } to { transform: scale(1.09) translate(1.5%, -1%); } }
.product-card .thumb { overflow: hidden; }
.product-card.kb .thumb img { animation: kbA 9s ease-in-out infinite alternate; transition: none; }
.product-card.kb:nth-child(3n + 2) .thumb img { animation-name: kbB; animation-duration: 10s; }
.product-card.kb:nth-child(3n) .thumb img { animation-name: kbC; animation-duration: 11s; }
.modal-image { overflow: hidden; }
.modal-image img.kb { animation: kbA 10s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) {
  .product-card.kb .thumb img, .modal-image img.kb { animation: none !important; }
}