/* ===== SHORTS - TikTok-style vertical player ===== */

/* Page reset */
.shorts-page {
  margin: 0;
  padding: 0;
  background: #000;
  color: #fff;
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---- Container: vertical scroll-snap ---- */
#shortsContainer {
  height: 100vh;
  height: 100dvh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overscroll-behavior-y: contain;
}
#shortsContainer::-webkit-scrollbar { display: none; }

/* ---- Slide ---- */
.shorts-slide {
  height: 100vh;
  height: 100dvh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  position: relative;
  overflow: hidden;
}
.shorts-video-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

/* ---- Poster (visible during load) ---- */
.shorts-poster {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 1;
  transition: opacity 0.4s;
}

/* ---- Loader ---- */
.shorts-slide-loader {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.shorts-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(255,255,255,0.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: shortsPin 0.7s linear infinite;
}
@keyframes shortsPin { to { transform: rotate(360deg); } }

/* ---- Video ---- */
.shorts-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
}

/* ---- Tap zone ---- */
.shorts-tap-zone {
  position: absolute;
  inset: 0;
  z-index: 5;
  cursor: pointer;
}

/* ---- Indicators (mute / play / pause) ---- */
.shorts-mute-indicator,
.shorts-play-indicator,
.shorts-pause-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.5);
  width: 72px;
  height: 72px;
  background: rgba(0,0,0,0.55);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.15s, transform 0.15s;
  pointer-events: none;
}
.shorts-mute-indicator.visible,
.shorts-play-indicator.visible,
.shorts-pause-indicator.visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.shorts-mute-indicator svg,
.shorts-play-indicator svg,
.shorts-pause-indicator svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- Progress bar ---- */
.shorts-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255,255,255,0.15);
  z-index: 15;
  cursor: pointer;
  transition: height 0.15s;
}
.shorts-progress:hover,
.shorts-progress.dragging {
  height: 6px;
}
.shorts-progress-bar {
  height: 100%;
  background: #fff;
  width: 0%;
  border-radius: 0 2px 2px 0;
  pointer-events: none;
}
.shorts-progress-handle {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.15s;
  pointer-events: none;
  box-shadow: 0 0 4px rgba(0,0,0,0.4);
}
.shorts-progress:hover .shorts-progress-handle,
.shorts-progress.dragging .shorts-progress-handle {
  transform: translate(-50%, -50%) scale(1);
}

/* ---- Sidebar (right-side actions) ---- */
.shorts-sidebar {
  position: absolute;
  right: 10px;
  bottom: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  z-index: 10;
}
.shorts-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
  font-size: 11px;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.shorts-action svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}
.shorts-action span {
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.shorts-action.liked svg {
  fill: #ff2d55;
  stroke: #ff2d55;
}
.shorts-action:active {
  transform: scale(0.9);
}

/* ---- Info overlay (bottom left) ---- */
.shorts-info {
  position: absolute;
  bottom: 14px;
  left: 12px;
  right: 56px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.shorts-user a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.shorts-user img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,0.25);
}
.shorts-avatar-placeholder {
  display: inline-block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
}

/* Social promo CTAs */
.shorts-social-promo {
  display: flex;
  gap: 6px;
}
.shorts-social-btn {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 16px;
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  color: #fff;
  backdrop-filter: blur(8px);
}
.shorts-of-btn { background: rgba(0,175,240,0.8); }
.shorts-x-btn { background: rgba(255,255,255,0.15); }

/* Title */
.shorts-title {
  font-size: 13px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* Tags */
.shorts-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.shorts-tag {
  font-size: 11px;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.shorts-tag:hover { color: #fff; }

/* ---- Back button ---- */
.shorts-back-btn {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 20;
  width: 38px;
  height: 38px;
  background: rgba(0,0,0,0.45);
  border: none;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.shorts-back-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
}

/* ---- Promo slide ---- */
.shorts-promo-container { background: #111; }
.shorts-promo-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* ---- Empty state ---- */
.shorts-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  height: 100dvh;
  color: rgba(255,255,255,0.5);
  font-size: 16px;
  text-align: center;
  padding: 20px;
}

/* ---- Tablette : colonne centrée (le desktop A prend le relais ≥1024) ---- */
@media (min-width: 768px) and (max-width: 1023px) {
  #shortsContainer {
    max-width: 480px;
    margin: 0 auto;
    border-radius: 0;
  }
  .shorts-page {
    display: flex;
    align-items: stretch;
    justify-content: center;
  }
}

/* ---- Safe area (iPhone notch) ---- */
@supports (padding: max(0px)) {
  .shorts-info {
    padding-bottom: max(env(safe-area-inset-bottom), 10px);
  }
  .shorts-sidebar {
    bottom: max(calc(160px + env(safe-area-inset-bottom)), 160px);
  }
  .shorts-progress {
    bottom: max(env(safe-area-inset-bottom), 0px);
  }
}

/* ===== DESKTOP OVERLAY (loaded on main site) ===== */
.shorts-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s;
  pointer-events: none;
}
.shorts-overlay.visible {
  opacity: 1;
  pointer-events: all;
}
.shorts-overlay-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 42px;
  height: 42px;
  background: rgba(255,255,255,0.08);
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.shorts-overlay-close:hover {
  background: rgba(255,255,255,0.15);
}
.shorts-overlay iframe {
  width: 100%;
  max-width: 420px;
  height: 100vh;
  height: 100dvh;
  max-height: 92vh;
  border: none;
  border-radius: 12px;
  overflow: hidden;
}

/* ===== Phase 2 : cœur animé · mute · catégories · description · états ===== */
.shorts-heart-pop {
  position: absolute; z-index: 6; width: 110px; height: 110px; margin: -55px 0 0 -55px;
  color: #EE2D3E; opacity: 0; pointer-events: none; transform: scale(.2);
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.5));
}
.shorts-heart-pop svg { width: 100%; height: 100%; fill: #ff2d55; stroke: #ff2d55; stroke-width: 1.5; stroke-linejoin: round; filter: drop-shadow(0 2px 8px rgba(0,0,0,.35)); }
.shorts-heart-pop.pop { animation: shortsHeartPop .8s ease-out forwards; }
@keyframes shortsHeartPop {
  0%   { opacity: 0; transform: scale(.2) rotate(-12deg); }
  15%  { opacity: 1; transform: scale(1.15) rotate(6deg); }
  35%  { transform: scale(.95) rotate(-3deg); }
  70%  { opacity: 1; transform: scale(1) rotate(0); }
  100% { opacity: 0; transform: scale(1.1) translateY(-30px); }
}

.shorts-mute-btn {
  position: absolute; top: calc(14px + env(safe-area-inset-top, 0px)); right: 12px; z-index: 7;
  width: 40px; height: 40px; border: none; border-radius: 9999px; cursor: pointer; color: #fff;
  background: rgba(0,0,0,.45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
}
.shorts-mute-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.shorts-cats { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; }
.shorts-cat {
  font-size: 12px; font-weight: 600; color: #fff; text-decoration: none; padding: 4px 10px;
  border-radius: 9999px; background: rgba(238,45,62,.18); border: 1px solid rgba(238,45,62,.45);
}
.shorts-cat:active { background: rgba(238,45,62,.30); }

.shorts-desc { font-size: 13px; line-height: 1.4; color: rgba(255,255,255,.92); margin: 6px 0 2px; max-width: 78%; }
.shorts-desc.clamp .shorts-desc-txt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.shorts-desc-more { display: inline-block; margin-top: 2px; background: none; border: none; padding: 0; color: #fff; font-weight: 700; font-size: 13px; cursor: pointer; opacity: .85; }

.shorts-empty a { display: inline-block; margin-top: 12px; color: #EE2D3E; font-weight: 700; text-decoration: none; }
.shorts-end-slide { height: 100vh; height: 100dvh; scroll-snap-align: start; display: flex; align-items: center; justify-content: center; background: #000; }
.shorts-end { text-align: center; color: #fff; font-size: 20px; font-weight: 800; line-height: 1.5; padding: 24px; }
.shorts-end span { display: block; margin-top: 8px; font-size: 14px; font-weight: 500; color: rgba(255,255,255,.6); }

/* ===== Phase 4 : réactions serveur (emojis flottants + palette long-press) ===== */
.shorts-react-layer { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.shorts-react-float {
  position: absolute; bottom: 92px; font-size: 30px; line-height: 1; pointer-events: none;
  will-change: transform, opacity; animation: shortsReactRise 2.2s ease-out forwards;
}
@keyframes shortsReactRise {
  0%   { opacity: 0; transform: translateY(0) translateX(0) scale(.6); }
  15%  { opacity: 1; transform: translateY(-20px) translateX(calc(var(--dx, 0px) * .3)) scale(1.1); }
  100% { opacity: 0; transform: translateY(-220px) translateX(var(--dx, 0px)) scale(1); }
}

.shorts-react-palette {
  position: fixed; z-index: 60; display: none; gap: 4px; padding: 8px 10px;
  background: rgba(20,20,22,.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.12); border-radius: 9999px; box-shadow: 0 10px 30px rgba(0,0,0,.5);
}
.shorts-react-palette.open { display: flex; animation: shortsPalettePop .18s ease-out; }
@keyframes shortsPalettePop { from { opacity: 0; transform: translateY(8px) scale(.9); } to { opacity: 1; transform: none; } }
.shorts-react-emoji {
  width: 40px; height: 40px; border: none; background: none; cursor: pointer; font-size: 24px;
  line-height: 1; border-radius: 9999px; transition: transform .12s;
}
.shorts-react-emoji:hover, .shorts-react-emoji:active { transform: scale(1.25); background: rgba(255,255,255,.08); }

@media (prefers-reduced-motion: reduce) {
  .shorts-react-float { animation-duration: 1.2s; }
  .shorts-heart-pop.pop { animation-duration: .4s; }
}

/* ===== Phase 5 : overlay commentaires (sheet mobile / panneau desktop) ===== */
.shorts-comments-overlay { position: fixed; inset: 0; z-index: 200; }
.shorts-comments-overlay[hidden] { display: none; }
.scm-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); opacity: 0; animation: scmFade .2s ease forwards; }
@keyframes scmFade { to { opacity: 1; } }

.scm-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column;
  height: 62vh; max-height: 62vh; background: #121214; color: #fff;
  border-radius: 18px 18px 0 0; box-shadow: 0 -8px 40px rgba(0,0,0,.6);
  transform: translateY(0); transition: height .25s ease, transform .2s ease;
  animation: scmSlideUp .25s ease;
}
.scm-sheet.full { height: 92vh; max-height: 92vh; }
@keyframes scmSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

.scm-handle { width: 40px; height: 4px; border-radius: 99px; background: rgba(255,255,255,.25); margin: 8px auto 4px; flex: none; cursor: grab; touch-action: none; }
.scm-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 16px 8px; flex: none; }
.scm-title { font-size: 16px; font-weight: 700; margin: 0; }
.scm-count { color: rgba(255,255,255,.5); font-weight: 500; }
.scm-close { background: none; border: none; color: #fff; font-size: 28px; line-height: 1; cursor: pointer; padding: 0 4px; }

.scm-list { flex: 1 1 auto; overflow-y: auto; padding: 4px 16px 8px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.scm-item { display: flex; gap: 10px; padding: 10px 0; }
.scm-av { width: 36px; height: 36px; border-radius: 50%; flex: none; object-fit: cover; background: #2a2a2e; }
.scm-av-ph { display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; }
.scm-body { flex: 1 1 auto; min-width: 0; }
.scm-meta { display: flex; gap: 8px; align-items: baseline; }
.scm-name { font-weight: 600; font-size: 13px; }
.scm-date { font-size: 12px; color: rgba(255,255,255,.4); }
.scm-text { font-size: 14px; line-height: 1.4; margin-top: 2px; word-wrap: break-word; overflow-wrap: anywhere; }
.scm-likes { display: inline-block; margin-top: 4px; font-size: 12px; color: rgba(255,255,255,.5); }

.scm-empty, .scm-loading, .scm-error { text-align: center; color: rgba(255,255,255,.6); padding: 32px 16px; font-size: 14px; line-height: 1.6; }
.scm-empty span { color: rgba(255,255,255,.4); font-size: 13px; }
.scm-more { display: block; width: 100%; margin: 8px 0; padding: 10px; background: rgba(255,255,255,.06); color: #fff; border: none; border-radius: 10px; font-weight: 600; cursor: pointer; }

.scm-form { flex: none; border-top: 1px solid rgba(255,255,255,.08); padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: #121214; }
.scm-login-cta { display: block; font-size: 13px; color: #EE2D3E; text-decoration: none; font-weight: 600; margin-bottom: 8px; }
.scm-anon { width: 100%; box-sizing: border-box; margin-bottom: 8px; padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.14); background: #1c1c20; color: #fff; font-size: 14px; }
.scm-input-row { display: flex; gap: 8px; align-items: flex-end; }
.scm-text-in { flex: 1 1 auto; resize: none; max-height: 120px; padding: 10px 12px; border-radius: 16px; border: 1px solid rgba(255,255,255,.14); background: #1c1c20; color: #fff; font-size: 14px; line-height: 1.3; font-family: inherit; box-sizing: border-box; }
.scm-send { flex: none; padding: 0 16px; height: 40px; border: none; border-radius: 16px; background: #EE2D3E; color: #fff; font-weight: 700; cursor: pointer; }
.scm-send.busy { opacity: .6; cursor: default; }
.scm-captcha-row { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.scm-captcha-img { height: 40px; border-radius: 8px; background: #fff; }
.scm-captcha-in { flex: 1 1 auto; min-width: 0; padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.14); background: #1c1c20; color: #fff; font-size: 14px; }
.scm-captcha-refresh { flex: none; width: 40px; height: 40px; border: none; border-radius: 10px; background: rgba(255,255,255,.08); color: #fff; font-size: 18px; cursor: pointer; }
.scm-msg { margin-top: 8px; font-size: 13px; padding: 8px 12px; border-radius: 10px; }
.scm-msg.ok { background: rgba(40,180,99,.16); color: #6ee7a0; }
.scm-msg.err { background: rgba(238,45,62,.16); color: #ff8a93; }

/* Desktop : panneau latéral droit, vidéo continue de jouer */
@media (min-width: 1024px) {
  .scm-backdrop { background: rgba(0,0,0,.2); }
  .scm-sheet {
    left: auto; right: 0; top: 0; bottom: 0; width: 400px; height: 100vh; max-height: 100vh;
    border-radius: 0; transition: none; animation: scmSlideIn .25s ease;
  }
  .scm-sheet.full { height: 100vh; max-height: 100vh; }
  .scm-handle { display: none; }
}
@keyframes scmSlideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }

@media (prefers-reduced-motion: reduce) {
  .scm-backdrop, .scm-sheet { animation: none; }
}

/* ===== Phase 7 : Desktop A — vidéo verticale centrée + actions hors-cadre à droite ===== */
@media (min-width: 1024px) {
  .shorts-page { background: #050505; }
  #shortsContainer { max-width: none; margin: 0; }

  .shorts-slide {
    display: flex; align-items: center; justify-content: center;
    transition: padding-right .25s ease;
  }
  /* La vidéo devient une carte 9:16 centrée (plus un plein-cadre étiré) */
  .shorts-video-container {
    position: relative; width: auto; height: 92vh; max-height: 92vh;
    aspect-ratio: 9 / 16; background: #000; border-radius: 16px;
    box-shadow: 0 24px 80px rgba(0,0,0,.6);
  }
  .shorts-video, .shorts-poster, .shorts-slide-loader { border-radius: 16px; }
  .shorts-tap-zone { cursor: pointer; }

  /* Colonne d'actions juste à DROITE de la carte (hors vidéo) */
  .shorts-sidebar { right: -68px; bottom: 8px; gap: 20px; }
  .shorts-action { transition: transform .12s ease; }
  .shorts-action:hover { transform: scale(1.12); }

  /* Bouton mute en haut-droite de la carte */
  .shorts-mute-btn { top: 12px; right: 12px; }

  /* Commentaires ouverts : on décale la carte vers la gauche, jamais masquée */
  html.scm-open .shorts-slide { padding-right: 400px; }
}

/* ===== Phase 8 : pub (interstitielle native + side-rail desktop) ===== */
.shorts-ad-slide { display: flex; align-items: center; justify-content: center; background: #08080a; }
.shorts-ad-card { position: relative; width: 100%; max-width: 480px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; box-sizing: border-box; }
.shorts-ad-label { position: absolute; top: calc(16px + env(safe-area-inset-top, 0px)); left: 16px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.4); }
.shorts-ad-inner { width: 100%; min-height: 250px; display: flex; align-items: center; justify-content: center; }
.shorts-ad-ph { text-align: center; color: rgba(255,255,255,.5); font-size: 14px; line-height: 1.6; border: 1px dashed rgba(255,255,255,.15); border-radius: 12px; padding: 40px 20px; width: 100%; box-sizing: border-box; }
.shorts-ad-ph span { font-size: 12px; color: rgba(255,255,255,.3); }
.shorts-ad-skip { position: absolute; bottom: calc(28px + env(safe-area-inset-bottom, 0px)); padding: 10px 18px; border: none; border-radius: 9999px; background: rgba(255,255,255,.1); color: #fff; font-weight: 600; cursor: pointer; }

.shorts-side-rail { display: none; }
@media (min-width: 1024px) {
  .shorts-side-rail {
    position: fixed; left: 24px; top: 50%; transform: translateY(-50%);
    width: 300px; max-height: 80vh; z-index: 50; display: block;
  }
  .shorts-side-rail[hidden] { display: none; }
  .shorts-side-rail .shorts-ad-inner { min-height: 250px; }
}

/* Pub VAST verticale (interstitiel Quickies) */
.shorts-ad-vast-host { width: 100%; display: flex; align-items: center; justify-content: center; }
.shorts-ad-video { width: 100%; max-height: 72vh; object-fit: contain; background: #000; border-radius: 12px; }