/*
 * responsive-mid.css
 * Corrections responsives : cat-picker, grille produits (bestsellers), section howto/process
 * Ne pas modifier style.css ni index.html.
 */

/* ══════════════════════════════════════
   CAT-PICKER
   Desktop  : 7 items sur une ligne (géré par style.css flex justify-content:space-between)
   Tablette : 3 par ligne
   Mobile   : 2 ou 3 par ligne selon largeur
══════════════════════════════════════ */

/* — Tablette large (max 1024px) — déjà 7 items, on laisse passer à 3 par ligne proprement */
@media (max-width: 1024px) {
  .cat-picker {
    padding: 36px 48px;
  }

  .cat-picker__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    justify-content: unset;
  }

  .cat-item {
    flex: unset;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
  }
}

/* — Tablette (max 768px) : 3 items par ligne */
@media (max-width: 768px) {
  .cat-picker {
    padding: 28px 24px;
  }

  .cat-picker__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  .cat-item {
    height: auto;
    aspect-ratio: 3 / 4;
    padding: 20px 14px;
    border-radius: 12px;
  }

  .cat-item__img {
    top: 38px;
    width: 90%;
  }

  .cat-item__name {
    font-size: clamp(12px, 3vw, 16px);
  }
}

/* — Mobile (max 480px) : 2 items par ligne */
@media (max-width: 480px) {
  .cat-picker {
    padding: 24px 16px;
  }

  .cat-picker__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .cat-item {
    padding: 16px 10px;
    border-radius: 10px;
  }

  .cat-item__img {
    top: 32px;
    width: 85%;
  }

  .cat-item__name {
    font-size: clamp(11px, 3.5vw, 14px);
  }
}


/* ══════════════════════════════════════
   GRILLE PRODUITS (bestsellers)
   — overlay visible au touch (:active)
   — 2 colonnes sur mobile
   — color-dot ne déborde pas
══════════════════════════════════════ */

/* Touch : rendre l'overlay visible sur appui */
.bestsellers__grid .prod-card:active .prod-img__overlay {
  background: rgba(15, 15, 15, 0.18);
}
.bestsellers__grid .prod-card:active .prod-btn-cart {
  opacity: 1;
  transform: translateY(0);
}
.bestsellers__grid .prod-card:active .prod-img img {
  transform: scale(1.03);
}

/* Général : color-dot ne déborde pas */
.prod-colors {
  flex-wrap: wrap;
  max-width: 100%;
  overflow: hidden;
}

.color-dot {
  flex-shrink: 0;
}

/* — Tablette (max 768px) */
@media (max-width: 768px) {
  .bestsellers__grid,
  .bestsellers__skeleton {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .prod-img {
    aspect-ratio: 3 / 4;
  }

  .prod-img img {
    width: 100%;
    max-width: 100%;
  }
}

/* — Mobile (max 480px) */
@media (max-width: 480px) {
  .bestsellers__grid,
  .bestsellers__skeleton {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .prod-body,
  .prod-info {
    padding: 10px 4px 16px;
  }

  .prod-name {
    font-size: clamp(12px, 3.5vw, 14px);
  }

  .prod-price__main,
  .prod-price {
    font-size: clamp(12px, 3.5vw, 14px);
  }

  .color-dot {
    width: 10px;
    height: 10px;
  }
}


/* ══════════════════════════════════════
   SECTION HOWTO (comment personnaliser)
   — les étapes passent en colonne sur mobile (géré par style.css à 768px)
   — icônes/bulles restent centrées
   — renforts pour petits écrans
══════════════════════════════════════ */

@media (max-width: 768px) {
  .howto__step {
    width: 100%;
    max-width: 280px;
    align-items: center;
  }

  .howto__bubble {
    align-self: center;
  }

  .howto__label {
    text-align: center;
  }

  .howto__tshirt {
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .howto__title {
    font-size: clamp(20px, 6vw, 28px);
  }

  .howto__step {
    max-width: 240px;
  }
}


/* ══════════════════════════════════════
   SECTION PROCESS / STEPS
   — déjà responsive en 2 colonnes jusqu'à 768px dans style.css
   — renforts pour mobile étroit : 1 colonne
══════════════════════════════════════ */

@media (max-width: 768px) {
  .process__track {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  .process__step {
    width: 100%;
    text-align: center;
  }

  .process__arrow {
    transform: rotate(90deg);
  }

  .process__num,
  .process__icon {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 480px) {
  .process__title {
    font-size: clamp(20px, 6vw, 28px);
  }

  .steps__grid {
    grid-template-columns: 1fr;
  }

  .step {
    border-right: none !important;
    border-bottom: 2px solid #0f1117;
    min-height: 200px;
    padding: 24px 18px 28px;
  }

  .step:last-child {
    border-bottom: none;
  }

  .step__num,
  .step__illus {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  .step__bg-num {
    font-size: 90px;
  }
}


/* ══════════════════════════════════════
   OVERFLOW FIXES
══════════════════════════════════════ */

/* Contenir le carousel horizontal bestsellers dans sa section */
@media (max-width: 768px) {
  .bestsellers__inner {
    overflow: hidden;
  }
  .bestsellers__grid,
  .bestsellers__skeleton {
    overflow-x: auto;
  }
}

/* Facon : contenir les cartes et éviter l'overflow horizontal */
@media (max-width: 480px) {
  .facon {
    overflow: hidden;
  }
  .facon__card {
    min-width: 0;
    box-sizing: border-box;
    width: 100%;
  }
}

/* sb-card__imgs : images ne débordent pas */
.sb-card__imgs {
  overflow: hidden;
}
.sb-card__img {
  max-width: 100%;
}