/* =============================================
   MOBILE — Media queries ≤ 768px
   ============================================= */

@media (max-width: 768px) {
  :root { --side-pad: 24px; }

  html,
  body {
    max-width: 100%;
    overflow-x: clip;
  }

  /* Info Bar — masquée en mobile */
  .navbar__info { display: none; }

  /* Navbar */
  .navbar__bar { width: 100%; max-width: 100vw; padding: 0 12px; box-sizing: border-box; }
  .navbar__links { display: none; }
  .navbar__inner { height: 56px; padding: 6px 12px; gap: 8px; }
  .navbar__right { gap: 8px; }
  .navbar__logo img { width: 110px; height: auto; }
  .navbar__logo { flex-shrink: 1; min-width: 0; }
  .navbar { padding-top: 10px; }

  /* Home — Cosmonaute (masqué en mobile) */
  .cosmo-hand,
  .cosmo-scooter,
  .cosmo-scooter-track { display: none; }
  .cosmo-section { height: 0; margin: 0; overflow: hidden; }

  /* Home — Hero */
  .hero {
    width: 100vw;
    max-width: 100vw;
    min-height: calc(100vh - 45px);
    max-height: calc(100vh - 45px);
    border-radius: 0;
    margin: -76px 0 0;
    box-sizing: border-box;
  }
  .hero__slide--active { min-height: calc(100vh - 45px); }
  .hero__overlay { padding: 0 20px; }
  .hero__content {
    padding-top: 120px;
    justify-content: flex-end;
    padding-bottom: 80px;
  }
  .hero__title { font-size: 30px; line-height: 27px; }
  .hero__float { top: 80px; bottom: auto; }

  /* Global */
  .section-title { font-size: 28px; }

  /* Home — Marquee */
  .marquee-item { font-size: 22px; }
  .marquee-bar { height: 45px; }

  /* Home — Smiley */
  .smiley-sticker { width: 180px; height: 180px; margin: -90px 0 -90px 10px; }

  /* Home — Categories */
  .categories-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .cat-card { min-height: 150px; }

  /* Footer */
  .footer-reassurance__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }
  .reassurance-item {
    flex: 1 1 calc(50% - 12px);
    min-width: 140px;
    font-size: clamp(11px, 2.5vw, 15px);
  }
  .reassurance-icon { width: 40px; height: 40px; }
  .reassurance-icon img { width: 40px; }
  .shops-grid { grid-template-columns: 1fr; }

  /* Home — Reviews */
  .reviews-header { flex-direction: column; align-items: flex-start; }

  /* Home — Blog */
  .blog-grid { grid-template-columns: 1fr; }
  .blog-side-title {
    position: static;
    width: 100%;
    height: auto;
    border-right: none;
    border-bottom: 2px solid var(--black);
    padding: 16px 0;
    margin-bottom: 20px;
  }
  .blog-side-title span {
    transform: none;
    font-size: 28px;
  }

  /* Home — FAQ */
  .faq-section__inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .faq-hologram img { width: 180px; height: auto; }

  /* Home — Product carousel cards (slightly smaller) */
  .carousel-slide { flex: 0 0 70%; max-width: 70%; }
  .carousel-slide .product-card__img-wrap { max-height: 200px; }
  .carousel-slide .product-card__name { font-size: 13px; line-height: 16px; margin-bottom: 6px; }
  .product-section__inner { padding: 40px 12px 60px; }
  .section-title { font-size: 24px; }

  /* Home — Effects: stack vertically */
  .effects-cosmo,
  .effects-floating-img { display: none; }
  .effects-content {
    flex-direction: column;
    align-items: flex-start;
    min-height: auto;
    gap: 24px;
    padding: 0 var(--side-pad);
  }
  .effects-text {
    width: 100%;
    flex: none;
  }
  .effects-text .section-title { font-size: 28px; }
  .effects-desc {
    font-size: 15px;
    line-height: 20px;
    padding-right: 0;
  }
  .effects-tags {
    width: 100%;
    flex: none;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    align-items: stretch;
  }
  .effect-tag {
    flex: 1 1 calc(50% - 4px);
    min-width: 120px;
    height: 42px;
    font-size: 12px;
    padding: 0 10px;
  }
  .effects-section__bg { height: 100%; margin: 0; }

  /* Archive / Catalogue — hide breadcrumb */
  .archive-hero__breadcrumb { display: none !important; }
  .archive-hero__inner { padding-top: 80px; }

  /* Archive — smaller cards, constrain to viewport */
  .archive-header__title { font-size: 36px; }
  .archive-filters { top: 60px; }
  .archive-filters__form { flex-direction: column; }
  .filter-group--sort { margin-left: 0; }
  .filter-select { width: 100%; }
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 0 8px;
    max-width: 100%;
    overflow-x: clip;
  }
  .products-grid .product-card,
  .products-grid .product-card__variant,
  .products-grid .custom-select,
  .products-grid .custom-select__trigger {
    max-width: 100%;
    min-width: 0;
  }
  .subcategories-grid { grid-template-columns: 1fr; }
  .product-card__img-wrap { max-height: 38vw; min-height: 38vw; aspect-ratio: 1/1; }
  .product-card__name {
    font-size: 12px;
    line-height: 15px;
    margin-bottom: 4px;
    height: 30px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .product-card__badges { top: 8px; left: 4px; gap: 2px; }
  .product-card__cat-badge { font-size: 9px; padding: 2px 4px; }

  /* Archive/Product card — effect icon smaller */
  .product-card__effet { width: 34px; height: 34px; top: 6px; right: 6px; }

  /* Custom select (grammage) — smaller on mobile */
  .custom-select__trigger { height: 36px; font-size: 11px; padding: 0 8px; }
  .custom-select__dropdown {
    left: 0;
    right: auto;
    width: max-content;
    min-width: 100%;
    max-width: min(92vw, 520px);
    box-sizing: border-box;
  }

  /* Add to cart — hide label, show icon */
  .product-card .btn.btn--add-to-cart { height: 36px; font-size: 12px; gap: 4px; padding: 0 10px; }
  .product-card .btn__label { display: none; }
  .product-card .btn__sep { display: none; }
  .product-card .btn__cart-icon { display: inline-block; width: 18px; height: 20px; }
  .product-card .btn.btn--out-of-stock { height: 36px; font-size: 11px; }
  .product-card__bottom { gap: 4px; min-height: 76px; }

  /* Single Product — hide breadcrumb + full width */
  .sp-hero .sp-hero__breadcrumb-wrap { visibility: hidden; height: 0; padding: 80px 0 0; overflow: hidden; }
  .sp-hero {
    margin: -105px 0 0;
    border-radius: 0;
    padding-top: 70px;
  }
  .sp-top__inner { margin-top: 0; }
  .sp-gallery__main { height: 300px; }
  .sp-gallery__thumb { width: 60px; height: 60px; }
  .sp-info__frame { border-width: 2px; }
  .sp-info__content { padding: 20px 12px; }
  .sp-info__title { font-size: 20px; line-height: 24px; }
  .sp-info__short-desc { font-size: 10px; line-height: 14px; }
  .sp-variants__grid { gap: 8px; }
  .sp-variant-btn { font-size: 11px; padding: 5px 8px; }
  .sp-add-to-cart { height: 42px; font-size: 12px; }
  .sp-attrs__grid { grid-template-columns: 1fr; }
  .sp-related-carousel__track .product-card { flex: 0 0 calc(50% - 12px); min-width: 160px; }
  .sp-trust__title,
  .sp-trust__slide { font-size: 22px; line-height: 24px; }

  /* Article / Single Post — hide breadcrumb text but keep spacing */
  .single-post .sp-hero__breadcrumb-wrap { visibility: hidden; height: 0; padding: 70px 0 0; overflow: hidden; }
  .single-post .sp-hero {
    margin: -105px 0 0;
    border-radius: 0;
    height: 350px;
  }
  .single-post .sp-hero__title { font-size: 22px; line-height: 1.3; }

  /* Blog — redo thumbnails for mobile */
  .blog-hero { height: 200px; width: calc(100% - 24px); border-radius: 16px; }
  .blog-hero__title { font-size: 28px; letter-spacing: 1px; }
  .blog-breadcrumb { display: none !important; }
  .blog-filters { gap: 8px; margin-top: 24px; padding: 0 12px; }
  .blog-filters__tab { height: 36px; padding: 0 12px; font-size: 11px; }
  .blog-grid-wrapper {
    gap: 16px;
    margin-top: 24px;
    padding: 0 12px;
  }
  .blog-row {
    flex-direction: column;
    gap: 16px;
  }
  .blog-card--large,
  .blog-card--small {
    flex: none;
    width: 100%;
    min-height: 200px;
  }
  .blog-card__link-wrap { min-height: 200px; }
  .blog-card__body { min-height: 200px; padding: 20px; }
  .blog-card__cat { top: 16px; left: 16px; font-size: 10px; }
  .blog-card__title { font-size: 16px; line-height: 21px; -webkit-line-clamp: 2; }
  .blog-card__author { font-size: 12px; }
  .blog-card__read { font-size: 10px; }
  .blog-card__arrow { width: 22px; height: 22px; font-size: 12px; }

  /* Blog — CTA section */
  .blog-cta { margin-top: 40px; padding: 32px 0; }
  .blog-cta__inner { flex-direction: column; gap: 16px; padding: 0 12px; }
  .blog-cta__card { padding: 24px 16px; }
  .blog-cta__title { font-size: 22px; }
  .blog-cta__desc { font-size: 13px; line-height: 20px; }

  /* Checkout — rules consolidated in checkout.css @media (max-width: 768px) */
}

/* =============================================
   CART SIDEBAR — Small screens
   ============================================= */
@media (max-width: 600px) {
  .cart-sidebar { width: 100vw; }
  .cart-sidebar__header { padding: 28px 20px 0; }
  .cart-sidebar__items { padding: 20px; }
  .cart-sidebar__promo { padding: 0 20px 12px; }
  .cart-sidebar__footer { padding: 12px 20px 24px; }
  .cart-item__img { width: 90px; height: 90px; }
  .cart-item__info { min-height: 90px; }
}

/* =============================================
   TRÈS PETIT ÉCRAN — ≤ 480px
   ============================================= */
@media (max-width: 480px) {
  :root { --side-pad: 16px; }

  /* Header */
  .navbar__inner { padding: 8px 10px; height: 56px; }
  .navbar__logo img { width: 90px; }

  /* Home — Hero */
  .hero { min-height: calc(100vh - 45px); max-height: calc(100vh - 45px); }
  .hero__title { font-size: 25px; line-height: 25px; }
  .hero__desc { font-size: 15px; line-height: 18px; }

  /* Home — Carousel cards even smaller */
  .carousel-slide { flex: 0 0 75%; max-width: 75%; }
  .carousel-slide .product-card__img-wrap { max-height: 170px; }

  /* Home — Categories */
  .categories-grid { grid-template-columns: 1fr; }

  /* Home — Effects */
  .effects-text .section-title { font-size: 22px; }
  .effects-desc { font-size: 13px; line-height: 18px; }
  .effect-tag { flex: 1 1 calc(50% - 4px); height: 38px; font-size: 11px; }

  /* Home — Loyalty */
  .loyalty-grid { grid-template-columns: 1fr; }
  .loyalty-card__title { font-size: 26px; }
  .loyalty-card__images { flex-wrap: wrap; gap: 10px; }
  .loyalty-card__images img { width: 120px; height: 140px; }
  .loyalty-card__cta .btn { min-width: 100%; }
  .loyalty-deco { display: none; }

  /* Smiley */
  .smiley-sticker { display: none; }

  /* Archive — single column for very small screens */
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 0 8px; }
  .product-card__img-wrap { max-height: 38vw; min-height: 38vw; aspect-ratio: 1/1; }

  /* Single Product — tighter */
  .sp-info__title { font-size: 18px; line-height: 22px; }
  .sp-variant-btn { font-size: 10px; padding: 4px 6px; }
  .sp-add-to-cart { height: 40px; font-size: 11px; }

  /* Blog — full-width cards */
  .blog-hero { height: 160px; width: calc(100% - 16px); }
  .blog-hero__title { font-size: 22px; }
  .blog-card__body { padding: 16px; min-height: 180px; }
  .blog-card__title { font-size: 14px; line-height: 18px; }
  .blog-card--large,
  .blog-card--small { min-height: 180px; }
  .blog-card__link-wrap { min-height: 180px; }

  /* Checkout — even tighter */
  .ck-card { padding: 14px 10px; }
  .ck-card__title { font-size: 16px; }
  .ck-input,
  .ck-textarea,
  .ck-select { height: 40px; font-size: 12px; }
  .ck-submit { height: 48px; font-size: 13px; }
  .ck-item__img { width: 56px; height: 56px; }
}