/* ================================================================
   merch.css — SUPRADRAMA Merch (2025-09-01)
   Mobile-first, cohérent avec le site, sans styles redondants
================================================================ */

/* ===== 0. Variables utilitaires ================================= */
:root {
  --font: 'Poppins', sans-serif;
  --fg: #fff;
  --bg: #000;
  --shadow: 0 8px 24px rgba(0,0,0,.35);
  --radius: 14px;
  --header-height: 70px;
  --burger-color: #fff;
}

/* ===== 1. Layout & Background =================================== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: url('../images/background2.png') center / cover no-repeat fixed;
  font-family: var(--font);
  color: var(--fg);
}

/* ===== 2. Header & Navigation =================================== */
header {
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  z-index: 100;
}

.logo { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); z-index: 10; }
.logo img { height: 50px; transition: transform .3s ease; }
.logo:hover img { transform: scale(1.05); }

/* Burger */
.burger-menu {
  position: absolute; top: 20px; left: 20px;
  width: 24px; height: 18px;
  display: flex; flex-direction: column; justify-content: space-between;
  cursor: pointer; background: transparent; border: 0; box-shadow: none; z-index: 1000;
}
.burger-menu span {
  width: 100%; height: 3px; background: var(--burger-color);
  border-radius: 2px; transition: transform .3s ease, opacity .3s ease;
}
.burger-menu.open span:nth-child(1) { transform: rotate(45deg) translateY(6px); }
.burger-menu.open span:nth-child(2) { opacity: 0; }
.burger-menu.open span:nth-child(3) { transform: rotate(-45deg) translateY(-6px); }

/* Le menu fullscreen est géré par global.css */

/* ===== 3. Hero =================================================== */
.collection-intro { text-align: center; margin-top: 120px; padding: 0 20px; }
.collection-intro h1 { font-size: 2.5rem; letter-spacing: 2px; }

/* ===== 4. Petit visuel carré =================================== */
.logo-square {
  width: 400px;                 /* taille desktop */
  aspect-ratio: 1 / 1;          /* carré */
  margin: 12px auto 24px;       /* centré */
  border-radius: 10px;          /* coins doux (optionnel) */
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.25); /* léger cadre */
}
.logo-square img {
  width: 100%; height: 100%;
  object-fit: contain;          /* logo net */
  display: block;
}
@media (max-width: 768px){
  .logo-square { width: 300px; margin: 8px auto 20px; }
}

/* ===== 5. Video boxes ============================================ */
.video-section { margin: 48px auto 24px; display: grid; gap: 24px; }

/* Desktop 16:9 – avec thumbnail cliquable */
.video-box {
  position: relative;
  width: min(96vw, 960px);
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  box-shadow: var(--shadow);
}
.video-box .video-thumbnail,
.video-box .video-player { position: absolute; inset: 0; width: 100%; height: 100%; }
.video-box .video-thumbnail { object-fit: cover; cursor: pointer; filter: saturate(1.05); }
.video-box .video-play { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.video-box .video-play .btn {
  padding: 12px 18px; border-radius: 999px; background: rgba(255,255,255,.95); color: #000;
  font: 600 14px/1 var(--font); box-shadow: var(--shadow);
}
.video-box .video-player { display: none; }
.video-box video, .video-box iframe { width: 100%; height: 100%; border: 0; }

/* Mobile 9:16 */
.video-mobile {
  display: none;
  position: relative;              /* nécessaire pour thumbnail + bouton + player */
  width: min(92vw, 420px);
  aspect-ratio: 9 / 16;
  margin: 0 auto;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  box-shadow: var(--shadow);
}
.video-mobile .video-thumbnail,
.video-mobile .video-player { position: absolute; inset: 0; width: 100%; height: 100%; }
.video-mobile .video-thumbnail { object-fit: cover; cursor: pointer; z-index: 1; }
.video-mobile .video-player { display: none; z-index: 0; }
.video-mobile video { width: 100%; height: 100%; object-fit: cover; }

/* Bouton play uniquement pour le bloc mobile */
.video-mobile .mobile-play{
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 64px; height: 64px;
  border-radius: 999px;
  background: rgba(255,255,255,.95);
  color: #000; border: 0;
  font: 700 22px/64px var(--font);
  text-align: center;
  box-shadow: var(--shadow);
  cursor: pointer;
  z-index: 2;
}
.video-mobile .mobile-play:active { transform: translate(-50%, -50%) scale(.97); }

/* Switch visibilité */
@media (max-width: 768px){
  .video-box { display: none; }
  .video-mobile { display: block; }
}

/* ===== 6. Info two-columns ====================================== */
.info-row {
  display: flex; justify-content: center; align-items: center;
  gap: 20px; margin: 40px 20px;
}
.left-block, .right-block { width: 48%; padding: 20px; font-size: 1rem; }
.left-block { text-align: right; }
.right-block { text-align: left; }

.left-block a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.left-block a:hover { opacity: .85; }

/* séparateur vertical desktop seulement */
.vertical-divider { width: 1px; background: rgba(255,255,255,.7); align-self: stretch; }

/* Stacking en mobile */
@media (max-width: 768px){
  .info-row { flex-direction: column; text-align: center; }
  .left-block, .right-block { width: 100%; text-align: center; }
  .vertical-divider { display: none; }
}

/* ===== 7. Dividers & container ================================== */
.small-divider {
  width: 30%;
  margin: 20px auto;
  border: 0; border-top: .5px solid #fff;   /* ligne fine nette */
}
.merch-container {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 100px 20px 60px; gap: 40px;
}

/* ===== 8. Main visual =========================================== */
.big-photo {
  max-width: 1200px; width: 100%;
  margin: 40px auto; border-radius: 10px; overflow: hidden;
}
.big-photo img {
  width: 100%; display: block; object-fit: cover; transition: transform .3s ease;
}
.big-photo:hover img { transform: scale(1.05); }

/* ===== 9. Shopify buy-button ==================================== */
.order-button { margin-top: 40px; width: 100%; text-align: center; }
#product-component-1,
#product-component-2,
#product-component-3 {
  display: block !important; width: 100% !important; margin: 0 auto !important; text-align: center !important;
}

/* ===== 10. Sizing table ========================================= */
.sizing-table-container { padding: 0 20px; margin-bottom: 60px; }
.sizing-table { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.sizing-table thead th { text-transform: uppercase; background: rgba(255,255,255,.2); }
.sizing-table th, .sizing-table td {
  border: 1px solid rgba(255,255,255,.2); padding: 10px; text-align: center;
}
.sizing-note { font-size: .8rem; text-align: center; opacity: .9; }

/* ===== 11. Footer =============================================== */
footer {
  width: 100%; background: var(--bg);
  text-align: center; font-size: 12px; color: rgba(255,255,255,.6);
  padding: 15px 0; margin-top: 40px;
}
.follow-us { margin-top: 10px; font-size: 14px; }
.follow-us a { color: #fff; margin-left: 8px; font-weight: 700; text-decoration: none; }
.follow-us a:hover { color: rgba(255,255,255,.9); }

/* ===== 12. Accessibilité & confort =============================== */
.burger-menu:focus-visible,
a:focus-visible,
button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce){
  * { animation: none !important; transition: none !important; }
}

/* ===== 13. Overrides spécifiques page MERCH ====================== */
/* Kill la barre ombrée sous le logo (héritage global) */
header,
.header {
  background: transparent !important;
  box-shadow: none !important;
  position: absolute !important; /* évite le sticky du global */
  top: 0; left: 0; right: 0;
}
/* Pas de pseudo-éléments décoratifs */
header::before,
header::after { content: none !important; }