/* Adaptation tactile commune, sans changement des données ni des commandes. */
#cartDrawer { height: 100vh; height: 100dvh; }
#cartDrawer > :last-child { padding-bottom: max(1.25rem, env(safe-area-inset-bottom)); }
#cartItems { min-height: 0; overscroll-behavior: contain; }
#productModal { overflow-y: auto; overscroll-behavior: contain; }
#productModal > div { max-height: calc(100dvh - 2rem); overflow-y: auto; }
#mobileMenu { max-height: calc(100dvh - 5rem); overflow-y: auto; }
#mobileMenu a { padding: .65rem .75rem; border-radius: .5rem; }
#mobileMenu a:hover, #mobileMenu a:focus-visible { background: rgba(255,255,255,.1); }
:where(button, a, input, select, textarea):focus-visible { outline: 3px solid #d4a373; outline-offset: 3px; }
@media (max-width: 639px) {
    header .flex.items-center.justify-between { gap: .375rem; }
    header a[href="index.php"] span { letter-spacing: .02em; }
    main { min-width: 0; }
    main h1 { font-size: 1.875rem; line-height: 1.2; overflow-wrap: break-word; }
    main h2 { overflow-wrap: break-word; }
    main form { min-width: 0; }
    main input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    main select, main textarea, #cartDrawer input { font-size: 16px; max-width: 100%; min-width: 0; }
    main form.flex > input:not([type="hidden"]), main form.flex > select,
    main form.flex > label { width: 100%; }
    main form.flex { flex-wrap: wrap; }
    main button, #cartDrawer button, #productModal button,
    #mobileMenuButton, header a[aria-label="Mon compte"], header button[aria-label="Ouvrir le panier"] { min-height: 44px; }
    main > nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
    main > nav a { text-align: center; display: flex; align-items: center; justify-content: center; }
    #productsGrid { gap: 1rem; }
    #productsGrid .product-card { padding: .875rem; }
    #productsGrid .product-card h3 { font-size: 1.125rem; }
    #productsGrid [id^="wa-btn-"] { min-height: 44px; }
    #productModal > div { border-radius: 1rem; }
    #productModal .min-h-\[280px\] { min-height: 150px; padding: .75rem; }
    #modalImage { max-height: 180px; }
    #modalName { font-size: 1.375rem; }
    #cartDrawer > div { padding: 1rem; }
    #cartDrawer { overflow-y: auto; overscroll-behavior: contain; }
    #cartDrawer > :last-child { flex-shrink: 0; padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
    #toast { width: calc(100% - 2rem); bottom: max(1rem, env(safe-area-inset-bottom)); }
    .mobile-table, .mobile-table tbody { display: block; width: 100%; }
    .mobile-table thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
    .mobile-table tbody tr { display: block; background: #fff; border: 1px solid #e2e8f0; border-radius: .875rem; padding: .75rem; margin-bottom: .75rem; }
    .mobile-table tbody td { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr); gap: .75rem; padding: .5rem .25rem; text-align: left; overflow-wrap: anywhere; }
    .mobile-table tbody td::before { content: attr(data-mobile-label); color: #475569; font-weight: 600; }
    .mobile-table tbody td > .mobile-cell-value { min-width: 0; }
    .mobile-table tbody td:first-child { display: block; border-bottom: 1px solid #e2e8f0; padding-bottom: .75rem; margin-bottom: .25rem; }
    .mobile-table tbody td:first-child::before { display: block; font-size: .75rem; margin-bottom: .25rem; }
    .mobile-table tbody td a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
}
@media (max-height: 600px) {
    #cartItems { flex-shrink: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .cart-drawer, .modal, .product-card, .product-image { transition: none; }
    .toast { animation: none; }
}