/* ============================================ */
/* CORRECTION GRADIENTS TEXTE                  */
/* Préserve les gradients + garantit lisibilité*/
/* ============================================ */

/* ============================= */
/* GRADIENTS TEXTE CORRIGÉS      */
/* ============================= */

/* Gradient animé principal - RENFORCÉ */
.gradient-text-animated {
	background: linear-gradient(
		270deg,
		#a8c7ff 0%,
		/* Bleu très clair */ #ddd6fe 35%,
		/* Violet très clair */ #a8c7ff 70%,
		/* Bleu très clair */ #bbd4ff 100% /* Bleu ultra clair */
	) !important;
	background-size: 300% 300% !important;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	background-clip: text !important;
	animation: gradient-shift 8s ease infinite;
	font-weight: 700 !important;

	/* Fallback pour problèmes */
	position: relative;
}

/* Fallback si le gradient échoue */
.gradient-text-animated::before {
	content: attr(data-text);
	position: absolute;
	top: 0;
	left: 0;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	z-index: -1;
	font-weight: 700;
	opacity: 0;
	transition: opacity 0.3s ease;
}

/* Active le fallback si nécessaire */
@supports not (-webkit-background-clip: text) {
	.gradient-text-animated {
		color: #ffffff !important;
		background: none !important;
	}
}

/* Brand text - Logo */
.brand-text {
	background: linear-gradient(135deg, #a8c7ff 0%, #ddd6fe 100%) !important;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	background-clip: text !important;
	font-weight: var(--font-bold) !important;

	/* Fallback critique pour navigation */
	position: relative;
}

.brand-text::after {
	content: 'TCodes';
	position: absolute;
	top: 0;
	left: 0;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	z-index: -1;
	opacity: 0;
	font-weight: var(--font-bold);
	transition: opacity 0.3s ease;
}

/* Title gradient */
.title-gradient {
	background: linear-gradient(135deg, #a8c7ff 0%, #ddd6fe 100%) !important;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	background-clip: text !important;
	display: block;
	position: relative;
}

.title-gradient::after {
	content: attr(data-text);
	position: absolute;
	top: 0;
	left: 0;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	z-index: -1;
	opacity: 0;
	transition: opacity 0.3s ease;
}

/* Word rotate spans */
.word-rotate span {
	background: linear-gradient(135deg, #a8c7ff 0%, #ddd6fe 100%) !important;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	background-clip: text !important;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	transform: translateY(100%);
	transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.word-rotate span.active {
	opacity: 1;
	transform: translateY(0);
}

/* Price highlight */
.price-highlight {
	background: linear-gradient(135deg, #86efac 0%, #6ee7b7 100%) !important;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	background-clip: text !important;
	font-weight: 900 !important;
	text-shadow: 0 0 25px rgba(134, 239, 172, 0.4) !important;
	position: relative;
}

.price-highlight::after {
	content: attr(data-text);
	position: absolute;
	top: 0;
	left: 0;
	color: #86efac !important;
	-webkit-text-fill-color: #86efac !important;
	z-index: -1;
	opacity: 0;
	font-weight: 900;
	text-shadow: 0 0 25px rgba(134, 239, 172, 0.4);
	transition: opacity 0.3s ease;
}

/* Metric values */
.metric-value {
	background: linear-gradient(135deg, #a8c7ff 0%, #ddd6fe 100%) !important;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	background-clip: text !important;
	display: block;
	font-size: var(--text-3xl);
	font-weight: var(--font-black);
	position: relative;
}

.metric-value::after {
	content: attr(data-text);
	position: absolute;
	top: 0;
	left: 0;
	color: #a8c7ff !important;
	-webkit-text-fill-color: #a8c7ff !important;
	z-index: -1;
	opacity: 0;
	font-size: inherit;
	font-weight: inherit;
	transition: opacity 0.3s ease;
}

/* Gradients dans les sections - AJOUTS MANQUANTS */

/* "Ultra Performants" dans tech-benefits */
.tech-benefits h3 .gradient-text-animated {
	background: linear-gradient(
		270deg,
		#a8c7ff 0%,
		#ddd6fe 35%,
		#a8c7ff 70%,
		#bbd4ff 100%
	) !important;
	background-size: 300% 300% !important;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	background-clip: text !important;
	animation: gradient-shift 8s ease infinite;
	font-weight: 700 !important;
	position: relative;
}

.tech-benefits h3 .gradient-text-animated::before {
	content: 'Ultra Performants';
	position: absolute;
	top: 0;
	left: 0;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	z-index: -1;
	font-weight: 700;
	opacity: 0;
	transition: opacity 0.3s ease;
}

/* "Présence en Ligne" dans CTA */
.cta-content h2 .gradient-text-animated {
	background: linear-gradient(
		270deg,
		#a8c7ff 0%,
		#ddd6fe 35%,
		#a8c7ff 70%,
		#bbd4ff 100%
	) !important;
	background-size: 300% 300% !important;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	background-clip: text !important;
	animation: gradient-shift 8s ease infinite;
	font-weight: 700 !important;
	display: inline-block;
	padding: 0 8px;
	position: relative;
}

.cta-content h2 .gradient-text-animated::before {
	content: 'Présence en Ligne ?';
	position: absolute;
	top: 0;
	left: 8px; /* Même padding que l'original */
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	z-index: -1;
	font-weight: 700;
	opacity: 0;
	transition: opacity 0.3s ease;
}

/* Tous les autres gradients dans les sections */
.section-intro h2 .gradient-text-animated,
.explications-section h3 .gradient-text-animated,
.services-section h2 .gradient-text-animated,
.portfolio-section h2 .gradient-text-animated,
.process-section h2 .gradient-text-animated,
.about-section h2 .gradient-text-animated {
	background: linear-gradient(
		270deg,
		#a8c7ff 0%,
		#ddd6fe 35%,
		#a8c7ff 70%,
		#bbd4ff 100%
	) !important;
	background-size: 300% 300% !important;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	background-clip: text !important;
	font-weight: 700 !important;
	position: relative;
}

/* Fallbacks pour tous les gradients de sections */
.section-intro h2 .gradient-text-animated::before,
.explications-section h3 .gradient-text-animated::before,
.services-section h2 .gradient-text-animated::before,
.portfolio-section h2 .gradient-text-animated::before,
.process-section h2 .gradient-text-animated::before,
.about-section h2 .gradient-text-animated::before {
	content: attr(data-text);
	position: absolute;
	top: 0;
	left: 0;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	z-index: -1;
	font-weight: 700;
	opacity: 0;
	transition: opacity 0.3s ease;
}

/* Correction spéciale pour les spans dans title-gradient */
.title-gradient .gradient-text-animated {
	background: linear-gradient(135deg, #a8c7ff 0%, #ddd6fe 100%) !important;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	background-clip: text !important;
	display: block;
	position: relative;
}

/* ============================= */
/* DETECTION PROBLEMES MOBILE     */
/* Active les fallbacks si besoin */
/* ============================= */

/* Détection si gradient texte ne fonctionne pas */
@media (max-width: 768px) {
	/* Test si -webkit-text-fill-color est supporté */
	@supports not (-webkit-text-fill-color: transparent) {
		.gradient-text-animated,
		.brand-text,
		.title-gradient,
		.word-rotate span,
		.price-highlight,
		.metric-value {
			background: none !important;
			color: #ffffff !important;
			-webkit-text-fill-color: #ffffff !important;
		}

		.price-highlight {
			color: #86efac !important;
			-webkit-text-fill-color: #86efac !important;
		}

		.metric-value {
			color: #a8c7ff !important;
			-webkit-text-fill-color: #a8c7ff !important;
		}
	}
}

/* Mobile + Dark mode système - Active fallbacks TOUS LES GRADIENTS */
@media (max-width: 768px) and (prefers-color-scheme: dark) {
	/* Force l'activation des fallbacks si gradients invisibles */
	.gradient-text-animated::before,
	.brand-text::after,
	.title-gradient::after,
	.price-highlight::after,
	.metric-value::after,
	.tech-benefits h3 .gradient-text-animated::before,
	.cta-content h2 .gradient-text-animated::before,
	.section-intro h2 .gradient-text-animated::before,
	.explications-section h3 .gradient-text-animated::before,
	.services-section h2 .gradient-text-animated::before,
	.portfolio-section h2 .gradient-text-animated::before,
	.process-section h2 .gradient-text-animated::before,
	.about-section h2 .gradient-text-animated::before {
		opacity: 1 !important;
		z-index: 1 !important;
	}

	/* Cache les gradients originaux si problème */
	.gradient-text-animated,
	.brand-text,
	.title-gradient,
	.price-highlight,
	.metric-value,
	.tech-benefits h3 .gradient-text-animated,
	.cta-content h2 .gradient-text-animated {
		-webkit-text-fill-color: transparent !important;
		color: transparent !important;
	}
}

/* Très petits écrans - Priorité à la lisibilité TOUS LES GRADIENTS */
@media (max-width: 480px) {
	.gradient-text-animated,
	.brand-text,
	.title-gradient,
	.word-rotate span,
	.tech-benefits h3 .gradient-text-animated,
	.cta-content h2 .gradient-text-animated,
	.section-intro h2 .gradient-text-animated,
	.explications-section h3 .gradient-text-animated,
	.services-section h2 .gradient-text-animated,
	.portfolio-section h2 .gradient-text-animated,
	.process-section h2 .gradient-text-animated,
	.about-section h2 .gradient-text-animated {
		background: none !important;
		color: #ffffff !important;
		-webkit-text-fill-color: #ffffff !important;
		text-shadow: 0 0 15px rgba(255, 255, 255, 0.3) !important;
	}

	.price-highlight {
		background: none !important;
		color: #86efac !important;
		-webkit-text-fill-color: #86efac !important;
		text-shadow: 0 0 20px rgba(134, 239, 172, 0.5) !important;
	}

	.metric-value {
		background: none !important;
		color: #a8c7ff !important;
		-webkit-text-fill-color: #a8c7ff !important;
	}
}

/* ============================= */
/* ANIMATION GRADIENT CORRIGÉE    */
/* ============================= */

@keyframes gradient-shift {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

/* ============================= */
/* DEBUG - Active si gradients buggés */
/* ============================= */

/* Classe d'urgence à ajouter si problème COMPLÈTE */
.text-fallback {
	background: none !important;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
}

.text-fallback.price {
	color: #86efac !important;
	-webkit-text-fill-color: #86efac !important;
}

.text-fallback.primary {
	color: #a8c7ff !important;
	-webkit-text-fill-color: #a8c7ff !important;
}

/* Application automatique des fallbacks si détection problème */
@supports not (-webkit-text-fill-color: transparent) {
	.gradient-text-animated,
	.brand-text,
	.title-gradient,
	.word-rotate span,
	.price-highlight,
	.metric-value,
	.tech-benefits h3 .gradient-text-animated,
	.cta-content h2 .gradient-text-animated,
	.section-intro h2 .gradient-text-animated,
	.explications-section h3 .gradient-text-animated,
	.services-section h2 .gradient-text-animated,
	.portfolio-section h2 .gradient-text-animated,
	.process-section h2 .gradient-text-animated,
	.about-section h2 .gradient-text-animated {
		background: none !important;
		color: #ffffff !important;
		-webkit-text-fill-color: #ffffff !important;
	}

	.price-highlight {
		color: #86efac !important;
		-webkit-text-fill-color: #86efac !important;
	}

	.metric-value {
		color: #a8c7ff !important;
		-webkit-text-fill-color: #a8c7ff !important;
	}
}

/* ============================= */
/* CORRECTION SPÉCIFIQUE ÉLÉMENTS */
/* ============================= */

/* Hero title - Pas de gradient, couleur pure */
.hero-title {
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	text-shadow: 0 0 10px rgba(255, 255, 255, 0.1) !important;
	background: none !important;
}

/* Section titles - Couleur pure */
.section-title {
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	background: none !important;
}

/* Tous les h1-h6 - Couleur pure sauf exceptions */
h1:not(.gradient-text-animated):not(.brand-text),
h2:not(.gradient-text-animated):not(.title-gradient),
h3:not(.gradient-text-animated),
h4:not(.gradient-text-animated),
h5:not(.gradient-text-animated),
h6:not(.gradient-text-animated) {
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	background: none !important;
	text-shadow: 0 0 5px rgba(255, 255, 255, 0.1) !important;
}

/* ============================= */
/* SOLUTION JAVASCRIPT FALLBACK   */
/* À ajouter si CSS ne suffit pas */
/* ============================= */

/*
// JavaScript à ajouter si les gradients posent encore problème :

document.addEventListener('DOMContentLoaded', function() {
    // Test si les gradients fonctionnent
    const testElement = document.createElement('div');
    testElement.style.background = 'linear-gradient(to right, red, blue)';
    testElement.style.webkitBackgroundClip = 'text';
    testElement.style.webkitTextFillColor = 'transparent';
    
    if (getComputedStyle(testElement).webkitTextFillColor !== 'transparent') {
        // Les gradients ne fonctionnent pas, active les fallbacks
        document.querySelectorAll('.gradient-text-animated, .brand-text, .title-gradient, .price-highlight').forEach(el => {
            el.classList.add('text-fallback');
            if (el.classList.contains('price-highlight')) {
                el.classList.add('price');
            } else {
                el.classList.add('primary');
            }
        });
    }
});
*/