/* =========================================================
   RESPONSIVE — téléphone, tablette, PC
   Chargé en DERNIER sur toutes les pages (publiques + admin) : il corrige
   ou complète les autres feuilles de style sans les réécrire.
   Points de rupture utilisés (les mêmes que le reste du site) :
     ≤ 1023 px  menu burger (téléphone + tablette)
     ≤ 900 px   fiche produit / admin compacts
     ≤ 720 px   bannière cookies compacte
     ≤ 640 px   téléphone
     ≤ 400 px   petits téléphones
   ========================================================= */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img { max-width: 100%; }

/* ---------------------------------------------------------
   1. Panier fermé : plus d'ombre sur le bord de l'écran
   L'ombre du volet (48 px de flou) dépassait dans la page, sur TOUS
   les écrans, même panier fermé. Fermé, il est maintenant invisible
   (et retiré de la navigation au clavier).
   --------------------------------------------------------- */
.cart-drawer {
  box-shadow: none;
  visibility: hidden;
  transition: transform 0.4s var(--ease), visibility 0s linear 0.4s;
}

.cart-drawer.is-open {
  visibility: visible;
  box-shadow: -16px 0 48px rgba(31, 36, 33, 0.2);
  transition: transform 0.4s var(--ease), visibility 0s;
}

/* ---------------------------------------------------------
   2. Sélecteur de langue sur téléphone / tablette
   La règle « .lang-select { display: none } » (≤ 1023 px) masquait aussi
   le sélecteur du menu mobile : impossible de changer de langue.
   --------------------------------------------------------- */
@media (max-width: 1023px) {
  .lang-select.lang-select-mobile { display: block; }
}

/* ---------------------------------------------------------
   3. Menu mobile : défile si l'écran est petit (paysage, petits téléphones)
   --------------------------------------------------------- */
.mobile-nav { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.mobile-nav-inner { padding-bottom: max(24px, env(safe-area-inset-bottom)); }

/* ---------------------------------------------------------
   4. Barres de recherche : le champ peut rétrécir, le bouton ne déborde plus
   --------------------------------------------------------- */
.search-form input,
.catalog-search-form input { min-width: 0; }

@media (max-width: 640px) {
  .search-form { padding: 14px 16px; gap: 10px; }
  .search-form button { padding: 0 16px; flex: 0 0 auto; }
  .catalog-search-form button { padding: 11px 18px; flex: 0 0 auto; }
}

/* ---------------------------------------------------------
   5. Hauteur d'écran sur mobile (la barre d'adresse change la hauteur réelle)
   --------------------------------------------------------- */
.hero { height: 100vh; height: 100svh; }

/* ---------------------------------------------------------
   6. Écrans tactiles : zones de clic de 44 px minimum,
      et pas de zoom automatique de Safari (iPhone) sur les champs de saisie
   --------------------------------------------------------- */
@media (pointer: coarse) {
  .header-actions .icon-btn:not(.lang-toggle),
  .menu-toggle,
  .mobile-nav-close,
  .cart-drawer-close,
  .kalm-modal-close { position: relative; }

  /* Zone cliquable élargie autour des icônes de 24 px, sans changer la mise en page. */
  .header-actions .icon-btn:not(.lang-toggle)::after,
  .menu-toggle::after {
    content: '';
    position: absolute;
    inset: -10px;
  }

  .cart-drawer-close { min-width: 44px; min-height: 44px; }
  .kalm-modal-close { min-width: 44px; min-height: 44px; top: 4px; right: 6px; }
  .lang-option, .mobile-nav-sublist li a { min-height: 44px; display: flex; align-items: center; }
  .cart-item-qty-btn { min-width: 36px; min-height: 36px; }
}

@media (max-width: 900px), (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
  select,
  textarea { font-size: 16px; }
}

/* ---------------------------------------------------------
   7. Bannière cookies : plus compacte sur téléphone
   --------------------------------------------------------- */
@media (max-width: 720px) {
  .cookie-banner {
    padding: 16px 40px 14px 16px;
    gap: 12px;
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
  }
  .cookie-content { gap: 12px; min-width: 0; }
  .cookie-content p { font-size: 0.76rem; line-height: 1.45; }
  .cookie-a11y { width: 26px; height: 26px; padding: 5px; }
  .cookie-actions { min-width: 0; gap: 8px; }
  .cookie-btn { padding: 11px 14px; font-size: 0.78rem; white-space: normal; }
  .cookie-close { top: 10px; right: 12px; }
}

/* ---------------------------------------------------------
   8. Accueil : boutons des produits favoris lisibles (8,5 px avant)
   --------------------------------------------------------- */
@media (max-width: 640px) {
  .favorite-card-add,
  .restock-btn--favorite { font-size: 0.66rem; padding: 9px 10px; }
  .favorite-card-add { flex-wrap: wrap; gap: 2px 8px; }
}

/* ---------------------------------------------------------
   9. Catalogue : cartes étroites (2 par ligne sur téléphone)
   --------------------------------------------------------- */
@media (max-width: 640px) {
  .catalog-card-body { padding: 12px 12px 10px; }
  .catalog-card-name { font-size: 0.9rem; }
  .catalog-card-desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .catalog-card-add { margin: auto 12px 12px; padding: 10px 10px; }
  .restock-btn--card {
    margin: auto 12px 12px;
    padding: 9px 10px;
    font-size: 0.74rem;
    gap: 6px;
  }
  .restock-btn--card .restock-btn-icon { width: 16px; height: 16px; }
  .catalog-tabs { margin-bottom: 32px; padding-bottom: 16px; }
  .catalog-tab { padding: 9px 16px; }
}

/* Très petits écrans : une seule colonne plutôt que deux cartes écrasées. */
@media (max-width: 359px) {
  .catalog-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------
   10. Fiche produit
   --------------------------------------------------------- */
/* Tablette (601–900 px) : image à gauche, infos à droite au lieu d'une image géante. */
@media (min-width: 601px) and (max-width: 900px) {
  .produit-top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "image info" "thumbs info";
    gap: 16px 28px;
  }
  .produit-main-image { grid-area: image; }
  .produit-thumbs { grid-area: thumbs; flex-direction: row; max-height: none; overflow-x: auto; overflow-y: visible; }
  .produit-thumb { width: 64px; height: 64px; }
  .produit-info { grid-area: info; margin-top: 0; }
}

.produit-lightbox-close {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 12px;
  right: 12px;
}

@media (max-width: 640px) {
  .produit-lightbox { padding: 12px; }
  .produit-lightbox-prev { left: 8px; }
  .produit-lightbox-next { right: 8px; }
  .produit-review-form-wrap { padding: 16px; }
  .produit-main { padding-left: 16px; padding-right: 16px; }
}

/* ---------------------------------------------------------
   11. Mon compte : commandes lisibles sur petits téléphones
   --------------------------------------------------------- */
@media (max-width: 400px) {
  .compte-order { padding: 14px; }
  .compte-order-item { gap: 6px 12px; }
  .compte-order-item-qty { min-width: 24px; }
  .compte-order-item-price { min-width: 60px; }
  .compte-user-bar { padding: 14px; }
}

/* ---------------------------------------------------------
   12. Panier : petits écrans
   --------------------------------------------------------- */
@media (max-width: 400px) {
  .cart-drawer-header { padding: 16px 18px; }
  .cart-drawer-footer { padding-left: 18px; padding-right: 18px; }
}

/* ---------------------------------------------------------
   13. Administration (téléphone / tablette)
   --------------------------------------------------------- */
.admin-row select,
.admin-row input,
.admin-row textarea,
.admin-row-fields select { max-width: 100%; min-width: 0; }

.admin-row-file { max-width: 100%; }

.admin-order-body { overflow-x: auto; }

@media (max-width: 900px) {
  .admin-row--favorite { flex-direction: column; align-items: stretch; }
  .admin-row--favorite .admin-row-fields { min-width: 0; width: 100%; }
  .fav-product { width: 100%; }
}

@media (max-width: 640px) {
  .admin-row-fields { min-width: 0; }
  .admin-row-fields input[type="text"] { min-width: 0; }
  .admin-order-items { font-size: 0.8rem; }
  .admin-order-items th, .admin-order-items td { padding: 7px 4px; }
  .admin-promo-item-actions .admin-btn-small { flex: 1 1 auto; text-align: center; }
  .admin-btn-small { padding: 10px 12px; }
}

/* Admin — liste des commandes : la ligne de résumé (n°, date, client, total, statuts)
   ne tenait pas sur un téléphone (page 576 px de large pour un écran de 375). */
@media (max-width: 720px) {
  .admin-order-summary { flex-wrap: wrap; gap: 6px 10px; padding: 12px 14px; }
  .admin-order-customer { flex: 1 1 100%; order: 5; }
  .admin-order-body { padding: 4px 14px 16px; }
  .admin-order-body select { max-width: 100%; }
}