/* ============================================================
   AURA STORE - RESPONSIVE STYLES
   Couvre à la fois le canvas du builder et la vue publique
   ============================================================ */

/* 1. PREVIEW DEVICE TWEAKS (DANS LE CANVAS DU BUILDER) */
.canvas__viewport {
  transform: translateZ(0);
}
.canvas__frame .sf-drawer {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* Device Desktop Canvas */
.canvas__frame[data-device="desktop"] .sf-grid {
  grid-template-columns: repeat(var(--sf-desktop-cols, var(--sf-responsive-cols, 4)), 1fr);
}
.canvas__frame[data-device="desktop"] .sf-carousel,
.canvas__frame[data-device="desktop"] .sf-gallery-carousel {
  max-height: 420px !important;
}
.canvas__frame[data-device="desktop"] .sf-carousel__slide,
.canvas__frame[data-device="desktop"] .sf-gallery-carousel .sf-carousel__slide {
  max-height: 420px !important;
}
.canvas__frame[data-device="desktop"] .sf-carousel__slide img,
.canvas__frame[data-device="desktop"] .sf-carousel__slide video,
.canvas__frame[data-device="desktop"] .sf-gallery-carousel .sf-carousel__slide img,
.canvas__frame[data-device="desktop"] .sf-gallery-carousel .sf-carousel__slide video {
  max-height: 420px !important;
  object-fit: cover !important;
}
.canvas__frame[data-device="desktop"] .sf-hero__media.sf-carousel {
  max-height: 380px !important;
}

/* Device Tablet Canvas */
.canvas__frame[data-device="tablet"] .sf-section { padding: 36px 20px; }
.canvas__frame[data-device="tablet"] .sf-hero__title { font-size: 26px; }
.canvas__frame[data-device="tablet"] .sf-header { padding: 12px 18px; }
.canvas__frame[data-device="tablet"] .sf-header__nav { display: none !important; }
.canvas__frame[data-device="tablet"] .sf-mobile-burger { display: flex !important; }
.canvas__frame[data-device="tablet"] .sf-grid {
  grid-template-columns: repeat(var(--sf-tablet-cols, var(--sf-responsive-cols, 2)), 1fr);
}
.canvas__frame[data-device="tablet"] .sf-stats {
  grid-template-columns: repeat(2, 1fr) !important;
}
.canvas__frame[data-device="tablet"] .sf-carousel,
.canvas__frame[data-device="tablet"] .sf-gallery-carousel {
  max-height: 320px !important;
}
.canvas__frame[data-device="tablet"] .sf-carousel__slide,
.canvas__frame[data-device="tablet"] .sf-gallery-carousel .sf-carousel__slide {
  max-height: 320px !important;
}
.canvas__frame[data-device="tablet"] .sf-carousel__slide img,
.canvas__frame[data-device="tablet"] .sf-carousel__slide video,
.canvas__frame[data-device="tablet"] .sf-gallery-carousel .sf-carousel__slide img,
.canvas__frame[data-device="tablet"] .sf-gallery-carousel .sf-carousel__slide video {
  max-height: 320px !important;
  object-fit: cover !important;
}
.canvas__frame[data-device="tablet"] .sf-hero__media.sf-carousel {
  max-height: 300px !important;
}

/* Device Mobile Canvas */
.canvas__frame[data-device="mobile"] .sf-section { padding: 28px 16px; }
.canvas__frame[data-device="mobile"] .sf-hero__title { font-size: 22px; }
.canvas__frame[data-device="mobile"] .sf-hero--split { grid-template-columns: 1fr; }
.canvas__frame[data-device="mobile"] .sf-header { padding: 10px 14px; }
.canvas__frame[data-device="mobile"] .sf-header__logo { max-width: 130px; font-size: 15px; }
.canvas__frame[data-device="mobile"] .sf-header__right { gap: 6px; }
.canvas__frame[data-device="mobile"] .sf-icon-btn { width: 34px; height: 34px; }
.canvas__frame[data-device="mobile"] .sf-header__right .sf-btn--sm { padding: 6px 10px; font-size: 11px; }
.canvas__frame[data-device="mobile"] .sf-header__nav { display: none !important; }
.canvas__frame[data-device="mobile"] .sf-mobile-burger { display: flex !important; }
.canvas__frame[data-device="mobile"] .sf-grid {
  grid-template-columns: repeat(var(--sf-mobile-cols, var(--sf-responsive-cols, 2)), 1fr);
}
.canvas__frame[data-device="mobile"] .sf-stats {
  grid-template-columns: repeat(2, 1fr) !important;
}
.canvas__frame[data-device="mobile"] .sf-promo__item {
  flex-basis: calc(80% - 6px);
}
.canvas__frame[data-device="mobile"] .sf-carousel,
.canvas__frame[data-device="mobile"] .sf-carousel[data-carousel="gallery"],
.canvas__frame[data-device="mobile"] .sf-gallery-carousel {
  max-width: 100% !important;
  max-height: 240px !important;
}
.canvas__frame[data-device="mobile"] .sf-carousel .sf-carousel__slide,
.canvas__frame[data-device="mobile"] .sf-carousel[data-carousel="gallery"] .sf-carousel__slide,
.canvas__frame[data-device="mobile"] .sf-gallery-carousel .sf-carousel__slide {
  max-height: 240px !important;
}
.canvas__frame[data-device="mobile"] .sf-carousel .sf-carousel__slide img,
.canvas__frame[data-device="mobile"] .sf-carousel[data-carousel="gallery"] .sf-carousel__slide img,
.canvas__frame[data-device="mobile"] .sf-gallery-carousel .sf-carousel__slide img {
  max-height: 240px !important;
  object-fit: cover !important;
}

/* Canvas navigation style switching */
.canvas__frame[data-device="mobile"] .sf[data-nav-style="bottom"] .sf-mobile-burger,
.canvas__frame[data-device="tablet"] .sf[data-nav-style="bottom"] .sf-mobile-burger {
  display: none !important;
}
.canvas__frame[data-device="mobile"] .sf[data-nav-style="bottom"] .sf-bottom-nav,
.canvas__frame[data-device="tablet"] .sf[data-nav-style="bottom"] .sf-bottom-nav {
  display: flex !important;
}
.canvas__frame[data-device="mobile"] .sf[data-nav-style="bottom"],
.canvas__frame[data-device="tablet"] .sf[data-nav-style="bottom"] {
  padding-bottom: 72px !important;
}

.canvas__frame[data-device="mobile"] .sf[data-nav-style="floating"] .sf-mobile-burger,
.canvas__frame[data-device="tablet"] .sf[data-nav-style="floating"] .sf-mobile-burger {
  display: none !important;
}
.canvas__frame[data-device="mobile"] .sf[data-nav-style="floating"] .sf-floating-nav,
.canvas__frame[data-device="tablet"] .sf[data-nav-style="floating"] .sf-floating-nav {
  display: flex !important;
}
.canvas__frame[data-device="mobile"] .sf[data-nav-style="floating"],
.canvas__frame[data-device="tablet"] .sf[data-nav-style="floating"] {
  padding-bottom: 84px !important;
}

/* Canvas About section tweaks */
.canvas__frame[data-device="mobile"] .sf-about,
.canvas__frame[data-device="tablet"] .sf-about {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}
.canvas__frame[data-device="mobile"] .sf-about--media-left,
.canvas__frame[data-device="tablet"] .sf-about--media-left {
  flex-direction: column !important;
}
.canvas__frame[data-device="mobile"] .sf-about__content,
.canvas__frame[data-device="tablet"] .sf-about__content {
  width: 100% !important;
}
.canvas__frame[data-device="mobile"] .sf-about__media,
.canvas__frame[data-device="tablet"] .sf-about__media {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 220px !important;
  max-height: 380px !important;
  order: -1 !important;
}
.canvas__frame[data-device="mobile"] .sf-about__media img,
.canvas__frame[data-device="mobile"] .sf-about__media video,
.canvas__frame[data-device="mobile"] .sf-about__media .sf-video-player,
.canvas__frame[data-device="tablet"] .sf-about__media img,
.canvas__frame[data-device="tablet"] .sf-about__media video,
.canvas__frame[data-device="tablet"] .sf-about__media .sf-video-player {
  width: 100% !important;
  height: 100% !important;
  min-height: 220px !important;
  max-height: 380px !important;
  object-fit: cover !important;
}

.canvas__frame[data-device="mobile"] .sf-countdown__blocks {
  gap: 8px !important;
}
.canvas__frame[data-device="mobile"] .sf-countdown__block {
  min-width: 52px !important;
  padding: 8px 10px !important;
}
.canvas__frame[data-device="mobile"] .sf-countdown__block span {
  font-size: 22px !important;
}
.canvas__frame[data-device="mobile"] .sf-countdown__block small {
  font-size: 9px !important;
}

/* 2. BUILDER UI RESPONSIVE */
@media (max-width: 1100px) {
  .sidebar--right {
    position: absolute;
    right: 0;
    top: var(--toolbar-h);
    bottom: 0;
    transform: translateX(100%);
    transition: transform var(--t-slow);
  }
  .sidebar--right.is-open {
    transform: translateX(0);
  }
}
@media (max-width: 800px) {
  .sidebar--left {
    width: auto;
  }
  .sidebar__content {
    position: absolute;
    left: 56px;
    top: var(--toolbar-h);
    bottom: 0;
    width: 260px;
    background: var(--white);
    border-right: 1px solid var(--border);
  }
}

/* ============================================================
   3. VRAIE RESPONSIVE PUBLIQUE (/store/:slug)
   ============================================================ */

/* Desktop / Grand écran PC : ≥ 901px */
@media (min-width: 901px) {
  .sf-container,
  .sf .sf-container {
    width: 100%;
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }

  .sf-container--narrow,
  .sf .sf-container--narrow {
    max-width: 860px;
  }

  .sf .sf-header {
    display: flex !important;
    justify-content: center !important;
    padding: 14px 24px;
  }
  .sf .sf-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
  }
  .sf .sf-header--centered .sf-header__inner {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  .sf .sf-hero {
    max-width: 1140px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 48px 24px;
  }

  .sf .sf-hero--split {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 40px;
    align-items: center;
  }

  .sf .sf-hero__title {
    font-size: clamp(28px, 3.2vw, 42px) !important;
    line-height: 1.2;
  }

  .sf .sf-hero__subtitle {
    font-size: clamp(14px, 1.2vw, 17px) !important;
    max-width: 580px;
  }

  .sf .sf-hero__media,
  .sf .sf-hero__video {
    max-height: 420px;
    border-radius: var(--sf-radius);
  }

  .sf .sf-grid {
    grid-template-columns: repeat(var(--sf-desktop-cols, var(--sf-responsive-cols, 4)), 1fr) !important;
    gap: 20px;
  }

  .sf .sf-card {
    max-width: 100%;
  }

  .sf .sf-card__img {
    max-height: 280px;
  }

  .sf .sf-about {
    max-width: 1140px;
    margin: 0 auto;
    gap: 44px;
  }

  .sf .sf-about__media {
    max-height: 400px;
  }

  .sf .sf-service--horizontal {
    padding: 16px 20px;
  }

  .sf .sf-service--horizontal .sf-service__img {
    width: 100px;
    height: 100px;
    min-width: 100px;
  }

  .sf .sf-faq {
    max-width: 860px;
    margin: 0 auto;
  }

  .sf .sf-cta,
  .sf .sf-newsletter {
    max-width: 800px;
    margin: 0 auto;
  }

  .sf .sf-footer {
    max-width: 1140px;
    margin: 0 auto;
  }

  .sf .sf-carousel,
  .sf-carousel,
  .sf .sf-gallery-carousel,
  .sf-gallery-carousel {
    max-height: 420px !important;
  }
  .sf .sf-carousel .sf-carousel__slide,
  .sf-carousel .sf-carousel__slide,
  .sf-gallery-carousel .sf-carousel__slide {
    max-height: 420px !important;
  }
  .sf .sf-carousel .sf-carousel__slide img,
  .sf .sf-carousel .sf-carousel__slide video,
  .sf-carousel .sf-carousel__slide img,
  .sf-gallery-carousel .sf-carousel__slide img {
    max-height: 420px !important;
    object-fit: cover !important;
  }
  .sf .sf-hero__media.sf-carousel {
    max-height: 380px !important;
  }
}

/* Tablette : ≤ 900px */
@media (max-width: 900px) {
  .sf .sf-header__nav { display: none !important; }
  .sf .sf-mobile-burger { display: flex !important; }

  /* Navigation styles conditionnels sur tablette */
  .sf[data-nav-style="bottom"] .sf-mobile-burger { display: none !important; }
  .sf[data-nav-style="bottom"] .sf-bottom-nav { display: flex !important; }
  body:has(.sf-bottom-nav), .sf:has(.sf-bottom-nav), .sf[data-nav-style="bottom"] { padding-bottom: 72px !important; }

  .sf[data-nav-style="floating"] .sf-mobile-burger { display: none !important; }
  .sf[data-nav-style="floating"] .sf-floating-nav { display: flex !important; }
  body:has(.sf-floating-nav), .sf:has(.sf-floating-nav), .sf[data-nav-style="floating"] { padding-bottom: 84px !important; }

  .sf .sf-grid { grid-template-columns: repeat(var(--sf-tablet-cols, var(--sf-responsive-cols, 2)), 1fr) !important; }
  .sf .sf-hero--split { grid-template-columns: 1fr; }

  .sf .sf-about,
  .sf-about {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }
  .sf .sf-about--media-left,
  .sf-about--media-left {
    display: flex !important;
    flex-direction: column !important;
  }
  .sf .sf-about__content,
  .sf-about__content {
    width: 100% !important;
    max-width: 100% !important;
  }
  .sf .sf-about__media,
  .sf-about__media {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 240px !important;
    max-height: 340px !important;
    order: -1 !important;
  }
  .sf .sf-about__media img,
  .sf-about__media img {
    width: 100% !important;
    height: 100% !important;
    min-height: 240px !important;
    max-height: 340px !important;
    object-fit: cover !important;
    display: block !important;
  }
  .sf .sf-about__media video,
  .sf-about__media video,
  .sf .sf-about__media .sf-video-player,
  .sf-about__media .sf-video-player {
    width: 100% !important;
    height: auto !important;
    min-height: 240px !important;
    max-height: 340px !important;
    aspect-ratio: 16/9;
    object-fit: cover !important;
    display: block !important;
  }

  .sf .sf-promo__item { flex-basis: calc(50% - 6px); }
  .sf .sf-stats { grid-template-columns: repeat(2, 1fr) !important; }
  .sf .sf-gallery { grid-template-columns: repeat(var(--sf-responsive-cols, 2), 1fr) !important; }

  .sf .sf-carousel,
  .sf-carousel,
  .sf .sf-gallery-carousel,
  .sf-gallery-carousel {
    max-width: 100% !important;
    max-height: 320px !important;
  }
  .sf .sf-carousel .sf-carousel__slide,
  .sf-carousel .sf-carousel__slide,
  .sf .sf-carousel[data-carousel="gallery"] .sf-carousel__slide,
  .sf-gallery-carousel .sf-carousel__slide {
    max-height: 320px !important;
  }
  .sf .sf-carousel .sf-carousel__slide img,
  .sf .sf-carousel .sf-carousel__slide video,
  .sf-carousel .sf-carousel__slide img,
  .sf .sf-carousel[data-carousel="gallery"] .sf-carousel__slide img,
  .sf-gallery-carousel .sf-carousel__slide img {
    max-height: 320px !important;
    object-fit: cover !important;
  }
  .sf .sf-hero__media.sf-carousel {
    max-height: 300px !important;
  }
}

/* Mobile : ≤ 640px */
@media (max-width: 640px) {
  .sf .sf-section { padding: 32px 16px !important; }
  .sf .sf-hero { padding: 48px 16px !important; }
  .sf .sf-hero__title { font-size: 22px !important; line-height: 1.2; }
  .sf .sf-hero__subtitle { font-size: 14px !important; }
  .sf .sf-hero--split { grid-template-columns: 1fr !important; gap: 16px; }
  .sf .sf-grid { grid-template-columns: repeat(var(--sf-mobile-cols, var(--sf-responsive-cols, 2)), 1fr) !important; gap: 10px; }
  .sf .sf-gallery { grid-template-columns: repeat(var(--sf-responsive-cols, 2), 1fr) !important; }
  .sf .sf-carousel,
  .sf-carousel,
  .sf .sf-gallery-carousel,
  .sf-gallery-carousel {
    max-width: 100% !important;
    max-height: 240px !important;
  }
  .sf .sf-carousel .sf-carousel__slide,
  .sf-carousel .sf-carousel__slide,
  .sf .sf-carousel[data-carousel="gallery"] .sf-carousel__slide,
  .sf-gallery-carousel .sf-carousel__slide {
    max-height: 240px !important;
  }
  .sf .sf-carousel .sf-carousel__slide img,
  .sf .sf-carousel .sf-carousel__slide video,
  .sf-carousel .sf-carousel__slide img,
  .sf .sf-carousel[data-carousel="gallery"] .sf-carousel__slide img,
  .sf-gallery-carousel .sf-carousel__slide img {
    max-height: 240px !important;
    object-fit: cover !important;
  }
  .sf .sf-about__media,
  .sf-about__media {
    min-height: 220px !important;
    max-height: 340px !important;
  }
  .sf .sf-about__media img,
  .sf-about__media img,
  .sf .sf-about__media video,
  .sf-about__media video,
  .sf .sf-about__media .sf-video-player,
  .sf-about__media .sf-video-player {
    min-height: 220px !important;
    max-height: 340px !important;
  }
  .sf .sf-countdown { padding: 24px 16px !important; }
  .sf .sf-countdown__blocks { gap: 8px !important; }
  .sf .sf-countdown__block { min-width: 52px !important; padding: 8px 10px !important; }
  .sf .sf-countdown__block span { font-size: 22px !important; }
  .sf .sf-countdown__block small { font-size: 9px !important; }
  .sf .sf-stats { grid-template-columns: repeat(2, 1fr) !important; }
  .sf .sf-promo__item { flex-basis: calc(80% - 6px); }
  .sf .sf-title { font-size: 20px !important; }
  .sf .sf-header { padding: 10px 14px; }
  .sf .sf-header__logo { max-width: 140px; font-size: 15px; }
  .sf .sf-header__right { gap: 6px; }
  .sf .sf-icon-btn { width: 34px; height: 34px; }
  .sf .sf-header__right .sf-btn--sm { padding: 6px 10px; font-size: 11px; }

  /* Navigation mobile selon le style configuré */
  .sf[data-nav-style="bottom"] .sf-mobile-burger {
    display: none !important;
  }
  .sf[data-nav-style="bottom"] .sf-bottom-nav {
    display: flex !important;
  }
  body:has(.sf-bottom-nav), .sf:has(.sf-bottom-nav), .sf[data-nav-style="bottom"] {
    padding-bottom: 72px !important;
  }

  .sf[data-nav-style="floating"] .sf-mobile-burger {
    display: none !important;
  }
  .sf[data-nav-style="floating"] .sf-floating-nav {
    display: flex !important;
  }
  body:has(.sf-floating-nav), .sf:has(.sf-floating-nav), .sf[data-nav-style="floating"] {
    padding-bottom: 84px !important;
  }
}

/* Visibilité responsive dynamique des sections */
@media (min-width: 901px) {
  .sf .sf-hide-desktop { display: none !important; }
}
@media (min-width: 641px) and (max-width: 900px) {
  .sf .sf-hide-tablet { display: none !important; }
}
@media (max-width: 640px) {
  .sf .sf-hide-mobile { display: none !important; }
}