/* =========================================================================
   Wi-Fix — performance.css
   Lisibilité et robustesse d'affichage sur tous les supports.
   Chargé par functions.php (handle : wifix-performance).
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. CONTENU TOUJOURS VISIBLE
   Le site utilise des animations d'apparition (Elementor + DethemeKit/Sina).
   Quand le scroll est rapide, sur mobile, ou si un script tarde/échoue,
   des sections entières restent INVISIBLES (mesuré : 75 blocs sur 82 non
   révélés au chargement). On force la visibilité du contenu : l'animation
   reste un bonus, jamais une condition d'affichage.
   ---------------------------------------------------------------------- */
.elementor-invisible {
	visibility: visible !important;
	opacity: 1 !important;
	animation: none !important;
}

/* Les animations d'entrée Elementor (fadeIn, etc.) : contenu affiché
   instantanément plutôt qu'en fondu — plus rapide et jamais de blanc. */
.elementor-element.animated,
.elementor-widget.animated {
	animation: none !important;
	opacity: 1 !important;
	transform: none !important;
}

/* États cachés de DethemeKit / Sina (scroll & reveal animations) */
[class*="de_scroll_animation"],
[class*="de-reveal"],
[class*="sina-"] .sina-scroll-item,
.de_staggering > * {
	opacity: 1 !important;
	transform: none !important;
	visibility: visible !important;
	clip-path: none !important;
}

/* Sécurité : aucune partie de page durablement transparente à cause d'une anim */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

/* -------------------------------------------------------------------------
   2. WIDGET GTRANSLATE — le sélecteur de langue flottant
   En attendant son remplacement par un vrai multilingue (Polylang/WPML) ou
   sa suppression : on l'empêche de recouvrir le contenu et les CTA,
   surtout sur mobile.
   ---------------------------------------------------------------------- */
#gt_float_wrapper,
.gtranslate_wrapper {
	z-index: 90 !important;      /* sous les popups Elementor (100000) et le header */
}

@media (max-width: 767px) {
	#gt_float_wrapper,
	.gtranslate_wrapper {
		bottom: 0 !important;
		left: 0 !important;
		right: 0 !important;
		display: flex !important;
		justify-content: center !important;
		background: rgba(255, 255, 255, 0.92) !important;
		backdrop-filter: blur(4px);
		padding: 4px 0 !important;
		box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.12);
	}
	/* évite que le contenu de bas de page passe sous la barre */
	body {
		padding-bottom: 44px;
	}
}

/* -------------------------------------------------------------------------
   3. IMAGES — jamais de débordement horizontal ni d'étirement
   ---------------------------------------------------------------------- */
img {
	max-width: 100%;
	height: auto;
}

/* Empêche le scroll horizontal parasite (fréquent avec Elementor + marges négatives) */
html,
body {
	overflow-x: clip;
}

/* -------------------------------------------------------------------------
   4. LISIBILITÉ DU TEXTE
   Garde-fous globaux : rien ne descend sous un contraste/una taille lisible
   par accident. (Les couleurs précises restent gérées dans Elementor.)
   ---------------------------------------------------------------------- */
body {
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

/* Corps de texte : plancher de taille sur mobile */
@media (max-width: 767px) {
	p,
	li,
	.elementor-widget-text-editor,
	.elementor-widget-theme-post-content {
		font-size: clamp(15px, 4vw, 17px);
		line-height: 1.6;
	}
}

/* Titres : évite les débordements de mots longs (modèles d'appareils, etc.) */
h1, h2, h3, h4 {
	overflow-wrap: break-word;
	hyphens: auto;
}

/* Liens focus visibles (accessibilité clavier) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
	outline: 2px solid #99241a;
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   5. ZONES TACTILES — cibles trop petites sur mobile
   ---------------------------------------------------------------------- */
@media (max-width: 767px) {
	.elementor-social-icon,
	.elementor-icon-list-item a,
	header a[href^="tel:"],
	header a[href^="mailto:"] {
		min-height: 40px;
		display: inline-flex;
		align-items: center;
	}
}

/* -------------------------------------------------------------------------
   6. CHARGEMENT DES POLICES — évite le texte invisible pendant le chargement
   (à confirmer aussi côté déclaration @font-face : font-display: swap)
   ---------------------------------------------------------------------- */
.wf-loading body {
	visibility: visible;
}