/* ============================================================================
 * Mobile Frame iPhone — composant section "Femmes au volant"
 *
 * Source de verite : ux-design-wireframes.md §4 (Spec detaillee).
 *
 * Decision design : frame minimaliste SANS notch / SANS bouton home.
 * Pourquoi : un mockup iPhone detaille crie "section marketing avec App Store
 * screenshots". L'outline pur dit "videos verticales presentees sobrement".
 *
 * Specs strictes :
 *   - Forme : rectangle arrondi
 *   - Ratio : 9 / 19.5 (iPhone moderne)
 *   - Largeur : 320px desktop, 280px tablet
 *   - Border : 1.5px solid #1A1A1A
 *   - Border-radius : 40px
 *   - Padding interne 12px
 *   - Background interne #0A0A0A (avant chargement video)
 *   - Pas de notch, pas de home button : juste une ligne speaker 60x4px en haut
 *   - Ombre douce
 * ========================================================================= */

.mobile-frame {
  position: relative;
  width: 320px;
  max-width: 320px;
  aspect-ratio: 9 / 19.5;
  padding: 12px;
  border: 1.5px solid #1a1a1a;
  border-radius: 40px;
  background: #0a0a0a;
  box-shadow: 0 24px 48px -12px rgba(26, 26, 26, 0.18);
  overflow: hidden;
  /* Permet a un slider interne de se snap correctement. */
  isolation: isolate;
}

/* Tablet : on reduit a 280px (UX §7 responsive map). */
@media (max-width: 1023px) {
  .mobile-frame {
    width: 280px;
    max-width: 280px;
  }
}

/* Slot interne — recoit la video / le slider / l'image poster. */
.mobile-frame__content {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 28px; /* radius interieur = exterieur - padding */
  overflow: hidden;
  background: #0a0a0a;
}

/* Ligne "speaker" stylisee en haut — suggere le top de l'iPhone sans
 * representer un vrai notch / dynamic island. 60x4px arrondi, centre. */
.mobile-frame__speaker {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  border-radius: 2px;
  background: #1a1a1a;
  z-index: 2;
  pointer-events: none;
}

/* ============================================================================
 * Video Player (story 3.2) — utilise dans / hors mobile-frame.
 * ========================================================================= */

.video-player {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0a0a0a;
}

.video-player video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.video-player video::-webkit-media-controls,
.video-player video::-webkit-media-controls-enclosure {
  display: none !important;
}

.video-player__sound {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #ffffff;
  cursor: pointer;
  z-index: 3;
  padding: 0;
  transition:
    background 150ms ease,
    transform 150ms ease;
}

.video-player__sound:hover {
  background: rgba(0, 0, 0, 0.75);
}

.video-player__sound:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.video-player__sound[aria-pressed='false'] .video-player__sound-waves {
  opacity: 0;
}

.video-player__sound[aria-pressed='true'] .video-player__sound-waves {
  opacity: 1;
}

/* ============================================================================
 * Slider Instagram-style (story 3.3)
 * ========================================================================= */

.slider {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.slider__track {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.slider__track::-webkit-scrollbar {
  display: none;
}

.slider__slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.slider__progress {
  position: absolute;
  top: 14px;
  left: 12px;
  right: 12px;
  display: flex;
  gap: 2px;
  z-index: 4;
  height: 1.5px;
}

.slider__bar {
  flex: 1 1 0;
  height: 1.5px;
  background: rgba(255, 255, 255, 0.35);
  border: none;
  padding: 0;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border-radius: 2px;
}

.slider__bar:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.slider__bar-fill {
  display: block;
  width: 0;
  height: 100%;
  background: #ffffff;
  transition: width 100ms linear;
  border-radius: 2px;
}

.slider__bar[aria-current='true'] {
  background: rgba(255, 255, 255, 0.55);
}

.slider__bar[data-progress='complete'] .slider__bar-fill {
  width: 100% !important;
}

.slider__nav-prev,
.slider__nav-next {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 25%;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 2;
}

.slider__nav-prev {
  left: 0;
}

.slider__nav-next {
  right: 0;
}

.slider__nav-prev:focus-visible,
.slider__nav-next:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: -4px;
}

@media (max-width: 640px) {
  .slider {
    width: 100%;
    max-width: 100%;
  }
}

/* prefers-reduced-motion : pas d'animation specifique au frame, mais on garde
 * la ligne juste au cas ou un descendant en ajoute. */
@media (prefers-reduced-motion: reduce) {
  .mobile-frame,
  .mobile-frame *,
  .video-player,
  .video-player *,
  .slider,
  .slider * {
    transition: none !important;
    animation: none !important;
  }
  .slider__track {
    scroll-behavior: auto;
  }
}