/**
 * RESPONSIVE.CSS v3 — Breakpoints Mobile First
 * Testé : 320 / 360 / 375 / 390 / 412 / 480 / 768 / 1024 / 1440px
 * Correctifs v3 :
 *  - 320px : hero badge, titre, boutons, grille 2 col, popup
 *  - 480px  : hero CTA horizontal, stats
 *  - 768px  : navbar desktop, sidebar filtres, popup 2 colonnes
 *  - 1024px : grille 3→4 colonnes
 *  - 1440px : centrage max-width
 */

/* ════════════════════════════════════════════════
   Base : 320px — le plus petit cas testé
   Ajustements pour ne rien faire déborder
   ════════════════════════════════════════════════ */

/* Navbar : logo max 50vw sur 320px */
@media (max-width: 359px) {
  .navbar__logo { max-width: 45vw; font-size: var(--text-base); }
  .navbar__cart-btn { padding: var(--space-2); }

  /* Hero : typo et espacement ajustés */
  .hero__title  { font-size: 1.6rem; }
  .hero__badge  { font-size: 11px; padding: var(--space-1) var(--space-3); }
  .hero__stats  { gap: var(--space-2); }
  .hero__stat-value { font-size: var(--text-xl); }

  /* Grille 2 col : cartes très compactes */
  .products-grid   { gap: var(--space-2); }
  .categories-grid { gap: var(--space-2); }
  .product-card__body  { padding: var(--space-2); }
  .product-card__price { font-size: var(--text-sm); }
  .product-card__cart-btn { font-size: 11px; padding: var(--space-2) var(--space-2); }

  /* Popup : specs 1 colonne sur 320px */
  .popup__specs-grid { grid-template-columns: 1fr; }
  .popup__price { font-size: var(--text-2xl); }
}

/* ════════════════════════════════════════════════
   ≥ 360px — Smartphones courants
   ════════════════════════════════════════════════ */
@media (min-width: 360px) {
  .product-card__name  { font-size: var(--text-sm); }
  .product-card__price { font-size: var(--text-base); }
  .category-card__title { font-size: var(--text-sm); }
}

/* ════════════════════════════════════════════════
   ≥ 375px — iPhone standard
   ════════════════════════════════════════════════ */
@media (min-width: 375px) {
  .hero__title { font-size: 1.875rem; }
  .hero__subtitle { font-size: var(--text-sm); }
  .product-card__body { padding: var(--space-3); }
  .popup__info { padding: var(--space-5) var(--space-5) var(--space-8); }
}

/* ════════════════════════════════════════════════
   ≥ 390px — iPhone 14
   ════════════════════════════════════════════════ */
@media (min-width: 390px) {
  .product-card__spec { font-size: var(--text-xs); }
  .category-card__desc { -webkit-line-clamp: 2; }
}

/* ════════════════════════════════════════════════
   ≥ 412px — Android courant (Pixel, Samsung)
   ════════════════════════════════════════════════ */
@media (min-width: 412px) {
  .hero__title { font-size: 2rem; }
  .product-card__cart-btn { font-size: var(--text-xs); padding: var(--space-2) var(--space-3); }
}

/* ════════════════════════════════════════════════
   ≥ 480px — Grand phone / petite tablette
   ════════════════════════════════════════════════ */
@media (min-width: 480px) {
  /* Hero CTA horizontal */
  .hero__cta { flex-direction: row; flex-wrap: wrap; }
  .hero__cta .btn { width: auto; flex: 1; min-width: 180px; }

  /* Stats plus grandes */
  .hero__stat-value { font-size: var(--text-2xl); }
  .hero__stat-label { font-size: var(--text-xs); }

  /* Catégories : labels plus visibles */
  .category-card__title { font-size: var(--text-base); }
  .category-card__desc  { font-size: var(--text-xs); -webkit-line-clamp: unset; }

  /* Popup specs : 2 colonnes dès 480px */
  .popup__specs-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ════════════════════════════════════════════════
   ≥ 640px — Tablette portrait
   ════════════════════════════════════════════════ */
@media (min-width: 640px) {
  .container { padding-inline: var(--space-6); }

  .categories-grid { gap: var(--space-4); }
  .products-grid   { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
  .features-grid   { grid-template-columns: repeat(2, 1fr); }
  .contact-grid    { grid-template-columns: 1fr 1fr; }
  .footer__grid    { grid-template-columns: repeat(2, 1fr); }

  .product-card__name  { font-size: var(--text-base); }
  .product-card__price { font-size: var(--text-lg); }
  .product-card__spec  { font-size: var(--text-xs); }
  .product-card__body  { padding: var(--space-4); }
  .product-card__cart-btn { font-size: var(--text-sm); }

  .hero__title    { font-size: clamp(2rem, 6vw, 3rem); }
  .hero__subtitle { font-size: var(--text-base); }

  /* Popup specs 3 colonnes */
  .popup__specs-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ════════════════════════════════════════════════
   ≥ 768px — Tablette paysage / Desktop compact
   ════════════════════════════════════════════════ */
@media (min-width: 768px) {
  .container { padding-inline: var(--space-8); }

  /* ── Navbar desktop ── */
  .navbar__logo   { max-width: unset; margin-right: 0; font-size: var(--text-xl); }
  .navbar__nav    { display: flex; margin-left: var(--space-6); }
  .navbar__burger { display: none; }

  /* ── Layout produit : sidebar visible ── */
  .product-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: var(--space-6);
    align-items: start;
  }
  .filters-sidebar  { display: block; }
  .filters-open-btn { display: none; }

  /* Drawer désactivé côté CSS sur desktop */
  .drawer-overlay,
  .filters-drawer { display: none !important; }

  /* ── Produits ── */
  .products-grid { grid-template-columns: repeat(2, 1fr); }

  /* ── Panier 2 colonnes ── */
  .cart-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--space-6);
    align-items: start;
  }

  /* ── Popup desktop : 2 colonnes côte à côte ── */
  .popup {
    max-width: 860px;
    border-radius: var(--radius-2xl);
    align-self: center;
    max-height: 90svh;
    overflow: hidden;
  }
  .popup-overlay { align-items: center; }

  .popup__inner {
    display: grid;
    /* Gauche : media | Droite : info */
    grid-template-columns: 1fr 1fr;
    height: 100%;
    min-height: 0;
  }

  /* Handle invisible sur desktop */
  .popup__handle { display: none; }

  /* Croix repositionnée dans le contexte du popup desktop */
  .popup__close {
    top: var(--space-3);
    right: var(--space-3);
  }

  /* Bloc media : colonne gauche, scrollable */
  .popup__media {
    border-right: 1px solid var(--color-border);
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
  }

  /* Bloc info : colonne droite, scrollable */
  .popup__info {
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--space-8) var(--space-6) var(--space-6);
  }

  /* popup__name : pas de padding-top nécessaire sur desktop */
  .popup__name { padding-top: 0; }

  /* Desktop : miniatures visibles, dots masqués */
  .carousel__thumbnails { display: flex; }
  .carousel__dots       { display: none; }

  /* Specs 2 colonnes suffisent sur desktop (parfois 3 selon espace) */
  .popup__specs-grid { grid-template-columns: repeat(2, 1fr); }

  /* ── Autres layouts ── */
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid  { grid-template-columns: 1fr 1.5fr; gap: var(--space-8); }

  .hero__cta .btn { min-width: 200px; }
  .hero__stat-value { font-size: var(--text-3xl); }
}

/* ════════════════════════════════════════════════
   ≥ 1024px — Desktop standard
   ════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  .product-layout  { grid-template-columns: var(--sidebar-width) 1fr; gap: var(--space-8); }
  .categories-grid { grid-template-columns: repeat(4, 1fr); }
  .products-grid   { grid-template-columns: repeat(3, 1fr); }
  .features-grid   { grid-template-columns: repeat(2, 1fr); }
  .footer__grid    { grid-template-columns: 2fr 1fr 1fr 1.5fr; }

  .popup { max-width: 960px; }
  .popup__specs-grid { grid-template-columns: repeat(3, 1fr); }

  .cart-grid { grid-template-columns: 1fr 360px; }
}

/* ════════════════════════════════════════════════
   ≥ 1280px — Grand desktop
   ════════════════════════════════════════════════ */
@media (min-width: 1280px) {
  .products-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ════════════════════════════════════════════════
   ≥ 1440px — Large desktop
   Pas de changements de grille, juste l'espacement
   ════════════════════════════════════════════════ */
@media (min-width: 1440px) {
  .container { padding-inline: var(--space-12); }
  .hero__content { padding-block: var(--space-20) var(--space-16); }
}

/* ════════════════════════════════════════════════
   Accessibilité — réduction mouvements
   ════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}