/* ==========================================================================
   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)
      uniquement pour les vrais boutons - PAS les liens du menu de
      navigation, dont la mise en page est geree par le theme (JS/CSS
      propres), pour eviter de casser l'espacement du menu mobile. */
@media screen and (max-width: 767px) {
	a.button,
	button,
	.woocommerce a.button,
	.woocommerce button.button {
		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.
      On exclut .elementor-grid : ces grilles (ex. widget "Produits
      similaires") gerent deja leur propre responsive mobile via les
      classes elementor-grid-mobile-X, il ne faut pas les ecraser. */
@media screen and (max-width: 767px) {
	.woocommerce ul.products.columns-4:not(.elementor-grid),
	.woocommerce-page ul.products.columns-4:not(.elementor-grid),
	ul.products.columns-4:not(.elementor-grid) {
		display: grid !important;
		grid-template-columns: repeat(2, 1fr) !important;
		column-gap: 4% !important;
	}
	.woocommerce ul.products.columns-4:not(.elementor-grid) li.product,
	.woocommerce-page ul.products.columns-4:not(.elementor-grid) li.product,
	ul.products.columns-4:not(.elementor-grid) li.product {
		width: 100% !important;
		margin-right: 0 !important;
		float: none !important;
	}
}

/* 7) Correctif cible pour le widget "Produits similaires" (fiche produit),
      identifie par son ID Elementor unique 6755174, partage par toutes
      les fiches produit via le template. Independant des breakpoints
      Elementor (mobile/tablette) : s'applique a toute largeur d'ecran
      ou de fenetre en dessous de 1024px, en 2 paliers, pour eviter tout
      probleme de correspondance exacte avec les classes elementor-grid-*. */
@media screen and (max-width: 1024px) {
	.elementor-element-6755174 ul.products,
	.elementor-element-6755174 .elementor-grid {
		display: grid !important;
		grid-template-columns: repeat(2, 1fr) !important;
	}
	.elementor-element-6755174 ul.products li.product {
		width: 100% !important;
	}
}
@media screen and (max-width: 480px) {
	.elementor-element-6755174 ul.products,
	.elementor-element-6755174 .elementor-grid {
		grid-template-columns: 1fr !important;
	}
}

/* 8) Ajoute de l'espace au-dessus du titre des pages categorie
      (section-masthead) pour qu'il ne soit plus cache/coupe par
      l'en-tete fixe (logo + menu) sur mobile. */
@media screen and (max-width: 767px) {
	.section-masthead {
		padding-top: 190px !important;
		background-color: #ffffff !important;
	}
	.section-masthead::before,
	.section-masthead::after,
	.section-masthead__inner,
	.section-masthead__header {
		background-color: #ffffff !important;
		background: #ffffff !important;
	}
	/* Le bloc juste apres le titre (marge cream) - uniquement celui-la,
	   pas les autres usages de bg-light-1 ailleurs sur le site. */
	.section-masthead + .bg-light-1 {
		background-color: #ffffff !important;
		background: #ffffff !important;
	}
/* 9) Centre verticalement le texte du bouton "Choix des options" /
      "Ajouter au panier" dans les listes de produits (le style du
      theme pour ce bouton precis est plus specifique que le bloc 3,
      donc on le recible directement). */
@media screen and (max-width: 767px) {
	.woocommerce ul.products li.product a.button,
	.woocommerce ul.products li.product a.add_to_cart_button {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		line-height: 1.2 !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
}
/* 10) Effet au survol (souris) et au clic/tap (tactile) sur les liens
       du menu plein ecran (menu principal + sous-menu categories). */
.menu-overlay a,
.menu-overlay .sub-menu a {
	transition: opacity 0.25s ease, color 0.25s ease;
}
.menu-overlay a:hover,
.menu-overlay .sub-menu a:hover {
	opacity: 0.6;
}
.menu-overlay a:active,
.menu-overlay .sub-menu a:active {
	opacity: 0.35;
	transition: opacity 0.05s ease;
}
/* 11) Meme espace entre les liens, que ce soit le menu principal ou
       le sous-menu categories (annule les marges differentes du theme). */
.menu-overlay > li,
.menu-overlay .sub-menu > li {
	margin: 0 0 20px 0 !important;
}
.menu-overlay > li:last-child,
.menu-overlay .sub-menu > li:last-child {
	margin-bottom: 0 !important;
}