/* ----------------------------------------------------
   RESPONSIVE GLOBAL — Brod'Art Studio (2025)
   - Navbar
   - Hero
   - Grilles produits / boutique
   - Panier latéral (.cart-sidebar)
   - Popup checkout (#checkout-modal)
---------------------------------------------------- */

/* ============================
   ≤ 1200px — Desktop rétréci
============================ */
@media (max-width: 1200px) {

  .hero-inner {
    max-width: 70%;
  }

  .products-grid {
    gap: 24px;
  }

  .shop-grid {
    gap: 24px;
  }
}

/* ============================
   ≤ 992px — Tablette paysage
============================ */
@media (max-width: 992px) {

  .hero-inner {
    max-width: 80%;
    padding: 32px;
  }

  .products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ============================
   ≤ 768px — Tablette portrait / mobile large
============================ */
@media (max-width: 768px) {

  /* --- NAVBAR --- */
  .nav-menu {
    display: none;
  }

  .menu-toggle {
    display: inline-block;
  }

  /* --- HERO --- */
  .hero-inner {
    max-width: 90%;
    margin: 0 auto;
    padding: 24px 18px;
  }

  .hero-title {
    font-size: 2rem;
  }

  .hero-sub {
    font-size: 0.98rem;
  }

  /* --- GRILLES PRODUITS / SHOP --- */
  .products-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .shop-grid {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  /* ============================
       PANIER LATÉRAL MOBILE
     ============================ */

  .cart-sidebar {
    width: 100%;
    max-width: 100vw;
    height: 100vh;
    right: -100%;
    top: 0;

    border-left: none;
    border-radius: 0;

    padding: 18px 14px 90px;
    box-shadow: -6px 0 20px rgba(0,0,0,0.35);

    transition: right 0.32s ease;
  }

  .cart-sidebar.open {
    right: 0;
  }

  .cart-items {
    max-height: calc(100vh - 290px);
    overflow-y: auto;
    padding-right: 4px;
  }

  .cart-item-thumb {
    width: 58px;
    height: 58px;
  }

  .cart-item-title {
    font-size: 0.98rem;
  }

  .cart-item-variants {
    font-size: 0.8rem;
  }

  .cart-item-qty .qty-btn {
    width: 26px;
    height: 26px;
    font-size: 18px;
  }

  .cart-summary p {
    font-size: 0.95rem;
  }

  /* Bouton "Passer à la commande" en bas du panier sur mobile */
  #checkout-button {
    position: fixed;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);

    width: 92%;
    max-width: 420px;

    z-index: 99995;
    padding: 14px;
    border-radius: 10px;
    font-size: 1.05rem;
  }

  /* ============================
       POPUP CHECKOUT MOBILE
     ============================ */

  #checkout-modal.active {
    align-items: flex-start;
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .checkout-box {
    width: 94%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 18px 16px 16px;
  }

  #checkout-form {
    gap: 10px;
  }

  .checkout-grid {
    grid-template-columns: 1fr !important;
    gap: 10px 0;
  }

  #checkout-form input,
  #checkout-form textarea,
  #checkout-form select {
    font-size: 0.95rem;
    padding: 9px 10px;
  }

  .checkout-shipping {
    padding: 10px;
  }

  .checkout-total-line {
    font-size: 1rem;
  }

  #checkout-submit,
  #checkout-form button[type="submit"] {
    padding: 12px;
    font-size: 1.05rem;
  }

  /* --- FOOTER --- */
  .site-footer {
    text-align: center;
    padding: 18px 12px;
    font-size: 0.85rem;
  }

  .site-footer a {
    display: inline-block;
    margin-top: 4px;
  }
}

/* ============================
   ≤ 576px — Mobile standard
============================ */
@media (max-width: 576px) {

  body {
    font-size: 0.95rem;
  }

  .hero-inner {
    padding: 20px 16px;
  }

  .products-title {
    font-size: 1.3rem;
  }

  .product-card {
    padding: 14px;
  }

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

  .cart-summary p {
    font-size: 0.9rem;
  }

  #checkout-button {
    width: 94%;
    font-size: 1rem;
  }

  .checkout-box {
    width: 96%;
  }
}

/* ============================
   ≤ 400px — Très petits mobiles
============================ */
@media (max-width: 400px) {

  .hero-title {
    font-size: 1.7rem;
  }

  .hero-sub {
    font-size: 0.9rem;
  }

  .cart-item-thumb {
    width: 50px;
    height: 50px;
  }

  #checkout-button {
    width: 95%;
    font-size: 0.95rem;
  }

  .checkout-box {
    padding: 14px 12px 12px;
  }

  #checkout-form input,
  #checkout-form textarea {
    font-size: 0.9rem;
  }
}
/* =========================================
   FIX MOBILE — bouton checkout toujours visible
========================================= */

@media (max-width: 768px) {


  /* Bouton checkout DANS le panier / popup */
  .checkout-overlay .checkout-btn,
  .cart-sidebar .checkout-btn {
    position: sticky;
    bottom: 12px;
    z-index: 3;
  }
}
/* =========================================
   FIX MENU MOBILE — affichage du menu déroulant
========================================= */

@media (max-width: 768px) {

  .nav-menu {
    display: none;
    flex-direction: column;
    gap: 10px;
    background: rgba(15,15,15,0.96);
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 14px 16px;
    z-index: 10000;
  }

  .nav-menu.open {
    display: flex; /* 🔥 LIGNE CRITIQUE */
  }
}
/* =========================================
   MOBILE — Checkout bouton (CENTRÉ & STABLE)
========================================= */
@media (max-width: 768px) {

  #checkout-button {
    position: fixed;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);

    width: calc(100% - 24px);
    max-width: 420px;

    margin: 0;
    padding: 14px 16px;

    display: flex;
    align-items: center;
    justify-content: center;

    z-index: 100000;
  }
}
/* =====================================================
   MOBILE — Checkout bouton (lié au panier RÉEL)
===================================================== */
@media (max-width: 768px) {

  /* caché par défaut */
  #checkout-button {
    display: none !important;
    pointer-events: none;
  }

  /* visible UNIQUEMENT quand le panier est ouvert */
  .cart-sidebar.open ~ #checkout-button,
  .cart-sidebar.open #checkout-button {
    display: flex !important;
    pointer-events: auto;

    position: fixed;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);

    width: calc(100% - 24px);
    max-width: 420px;

    padding: 14px 16px;
    margin: 0;

    justify-content: center;
    align-items: center;

    z-index: 100000;
  }
}
/* =====================================================
   MOBILE — Checkout bouton au-dessus du footer
===================================================== */
@media (max-width: 768px) {

  /* caché par défaut */
  #checkout-button {
    display: none !important;
    pointer-events: none;
  }

  /* visible quand le panier est ouvert */
  .cart-sidebar.open #checkout-button,
  .cart-sidebar.open ~ #checkout-button {
    display: flex !important;
    pointer-events: auto;

    position: fixed;
    left: 50%;
    transform: translateX(-50%);

    /* 🔑 remonte le bouton AU-DESSUS du footer */
    bottom: calc(env(safe-area-inset-bottom) + 72px);

    width: calc(100% - 24px);
    max-width: 420px;

    padding: 14px 16px;
    margin: 0;

    justify-content: center;
    align-items: center;

    border-radius: 18px;
    z-index: 100000;
  }
}
/* =====================================================
   UX POLISH — Animation douce du bouton checkout mobile
   (dépend de .cart-sidebar.open)
===================================================== */

@media (max-width: 768px) {

  .cart-sidebar.open #checkout-button,
  .cart-sidebar.open ~ #checkout-button {
    animation: checkoutSlideUp 0.25s ease-out;
  }

  @keyframes checkoutSlideUp {
    from {
      opacity: 0;
      transform: translate(-50%, 20px);
    }
    to {
      opacity: 1;
      transform: translate(-50%, 0);
    }
  }
}
@media (max-width: 768px) {
  .overlay,
  .cart-overlay,
  .checkout-overlay {
    backdrop-filter: none;
    filter: none;
  }
}
@media (max-width: 768px) {
  #heroOverlay {
    filter: none;
  }
}