/* ==========================================================================
   Rhye Child - Correctifs mobile
   A ajouter dans le theme enfant (rhye-child/css/mobile-fixes.css)
   Regles generiques et sans risque : ne touchent pas au design desktop
   ni aux reglages Elementor.
   ========================================================================== */

/* 1) Empeche tout debordement horizontal (cause frequente de scroll
      lateral indesirable sur mobile avec les sections pleine largeur) */
html, body {
	max-width: 100%;
	overflow-x: hidden;
}

/* 2) Images toujours responsives, meme si un widget Elementor
      leur impose une largeur fixe en pixels */
img, svg, video, iframe {
	max-width: 100%;
	height: auto;
}

/* 3) Cibles tactiles suffisamment grandes (recommandation Google : 44x44px)
      pour les liens/boutons du header, du menu et des fiches produit */
@media screen and (max-width: 767px) {
	a.button,
	button,
	.woocommerce a.button,
	.woocommerce button.button,
	.site-header a,
	.site-header button,
	.menu-item > a {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}

/* 4) Empeche le zoom automatique iOS sur les champs de formulaire
      (Safari zoome si font-size < 16px) */
@media screen and (max-width: 767px) {
	input,
	select,
	textarea {
		font-size: 16px !important;
	}
}

/* 5) Reduction des animations non essentielles sur mobile pour
      economiser le CPU/la batterie (respecte deja prefers-reduced-motion,
      ceci ajoute une marge de securite sur petits ecrans) */
@media screen and (max-width: 767px) {
	.js-split-text,
	[data-animation] {
		animation-duration: 0.3s !important;
	}
}

/* 6) Grille de produits WooCommerce en 2 colonnes sur mobile
      (au lieu de 4). Le ul.products utilise CSS Grid (display:grid),
      donc c'est grid-template-columns sur le parent qui controle le
      nombre de colonnes - pas width/float sur les li. */
@media screen and (max-width: 767px) {
	.woocommerce ul.products.columns-4,
	.woocommerce-page ul.products.columns-4,
	ul.products.columns-4 {
		display: grid !important;
		grid-template-columns: repeat(2, 1fr) !important;
		column-gap: 4% !important;
	}
	.woocommerce ul.products.columns-4 li.product,
	.woocommerce-page ul.products.columns-4 li.product,
	ul.products.columns-4 li.product {
		width: 100% !important;
		margin-right: 0 !important;
		float: none !important;
	}
}