/* =====================================================================
   Ameliorations responsive du front (tablette & mobile).
   Chargee en dernier, apres custom.css et site-polish.css.
   Objectif : robustesse (pas de debordement horizontal), lisibilite
   et confort tactile sur petits ecrans.
   ===================================================================== */

/* Securite globale : aucun media ne depasse la largeur de l'ecran. */
img,
video,
iframe,
table {
	max-width: 100%;
	height: auto;
}

table {
	height: auto;
}

/* Evite le scroll horizontal accidentel de la page. */
html,
body {
	overflow-x: hidden;
}

/* --------------------------------------------------------------------
   Tablette (<= 991px)
   -------------------------------------------------------------------- */
@media (max-width: 991.98px) {
	/* Pied de page : colonnes mieux espacees. */
	.footer-main-grid {
		row-gap: 1.75rem;
	}

	/* Grille produits : confort de lecture. */
	.grocery-product-card__body {
		padding: 0.85rem 0.9rem 1rem;
	}
}

/* --------------------------------------------------------------------
   Mobile (<= 767px)
   -------------------------------------------------------------------- */
@media (max-width: 767.98px) {
	/* Hero : metriques sur deux colonnes. */
	.grocery-home .grocery-hero__metrics {
		grid-template-columns: 1fr 1fr !important;
		gap: 0.6rem !important;
	}

	/* Tableau du panier : devient scrollable plutot que casse. */
	.cart-table-wrapper,
	.shop_cart_table,
	.table-responsive {
		display: block;
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Titres de section un peu plus compacts. */
	.grocery-section__title,
	.section-title h2 {
		font-size: clamp(1.4rem, 6vw, 1.9rem);
	}

	/* Boutons confort tactile : hauteur minimale et pleine largeur utile. */
	.grocery-product-card__actions .btn,
	.btn-block-mobile {
		min-height: 44px;
	}

	/* Cartes de marque / categorie : 2 par ligne lisibles. */
	.choice-card,
	.brand-card {
		margin-bottom: 1rem;
	}
}

/* --------------------------------------------------------------------
   Petit mobile (<= 575px)
   -------------------------------------------------------------------- */
@media (max-width: 575.98px) {
	/* Hero : metriques empilees. */
	.grocery-home .grocery-hero__metrics {
		grid-template-columns: 1fr !important;
	}

	/* Conteneurs : marges laterales reduites pour gagner de la place. */
	.container,
	.container-fluid {
		padding-left: 14px;
		padding-right: 14px;
	}

	/* Pied de page centre et aere. */
	.footer-about,
	.footer-main-grid [class*="col-"] {
		text-align: center;
	}

	.footer-main-grid [class*="col-"] {
		margin-bottom: 1.25rem;
	}

	/* Fiches produit : prix et titre lisibles. */
	.grocery-product-card__title {
		font-size: 0.95rem;
	}

	/* Boutons d'action empiles confortables. */
	.product-detail-actions .btn,
	.cart-actions .btn {
		width: 100%;
		margin-bottom: 0.5rem;
	}
}