/**
 * Utilitaires personnalisés SugarSweets
 * À copier dans le style.css de votre thème WordPress (ou à importer après Tailwind).
 * Ces classes complètent Tailwind pour les couleurs et effets du projet.
 */

/* ==========================================================================
   PALETTE — Couleurs du thème
   ========================================================================== */

:root {
	--color-brand-coral: #ee6c5e;
	--color-soft-cream: #f5f0e8;
	--color-charcoal: #2d2d2d;
	--color-organic-peach: #e8b4a0;
	--color-clay: #8b6914;
	--color-warm-grey: #6b6b6b;
}

/* --- Background --- */
.bg-brand-coral { background-color: var(--color-brand-coral); }
.bg-soft-cream { background-color: var(--color-soft-cream); }
.bg-charcoal { background-color: var(--color-charcoal); }
.bg-organic-peach { background-color: var(--color-organic-peach); }
.bg-clay { background-color: var(--color-clay); }
.bg-warm-grey { background-color: var(--color-warm-grey); }

.bg-brand-coral\/20 { background-color: rgba(238, 108, 94, 0.2); }
.bg-brand-coral\/30 { background-color: rgba(238, 108, 94, 0.3); }
.bg-soft-cream\/90 { background-color: rgba(245, 240, 232, 0.9); }

/* --- Text --- */
.text-brand-coral { color: var(--color-brand-coral); }
.text-soft-cream { color: var(--color-soft-cream); }
.text-charcoal { color: var(--color-charcoal); }
.text-organic-peach { color: var(--color-organic-peach); }
.text-clay { color: var(--color-clay); }
.text-warm-grey { color: var(--color-warm-grey); }

.text-charcoal\/50 { color: rgba(45, 45, 45, 0.5); }

/* --- Border --- */
.border-brand-coral { border-color: var(--color-brand-coral); }
.border-charcoal { border-color: var(--color-charcoal); }
.hover\:border-brand-coral:hover { border-color: var(--color-brand-coral); }
.border-white\/20 { border-color: rgba(255, 255, 255, 0.2); }

/* --- Hover text --- */
.group:hover .group-hover\:text-brand-coral { color: var(--color-brand-coral); }
.hover\:text-brand-coral:hover { color: var(--color-brand-coral); }
.hover\:text-charcoal:hover { color: var(--color-charcoal); }
.hover\:text-white:hover { color: #fff; }

/* --- Hover background --- */
.hover\:bg-brand-coral:hover { background-color: var(--color-brand-coral); }
.hover\:bg-charcoal:hover { background-color: var(--color-charcoal); }
.hover\:bg-white:hover { background-color: #fff; }
.hover\:bg-organic-peach:hover { background-color: var(--color-organic-peach); }

/* --- Dégradés (hero + indicateur de scroll)
     Dans front-page.php : pour le hero, vous pouvez remplacer
     "bg-gradient-to-b from-black/50 via-black/40 to-soft-cream/90"
     par "gradient-hero-overlay".
     Pour la ligne de scroll, remplacer
     "bg-gradient-to-b from-transparent via-brand-coral to-transparent"
     par "gradient-scroll-line". --- */
.gradient-hero-overlay {
	background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.4), rgba(245, 240, 232, 0.9));
}
.gradient-scroll-line {
	background-image: linear-gradient(to bottom, transparent, var(--color-brand-coral), transparent);
}

/* ==========================================================================
   FORMES & EFFETS
   ========================================================================== */

/* Contour du texte (titre hero) */
.text-outline {
	-webkit-text-stroke: 1px rgba(0, 0, 0, 0.3);
	text-stroke: 1px rgba(0, 0, 0, 0.3);
}

/* Forme type "blob" pour images / cadres */
.rounded-blob {
	border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}

/* Limiter le texte à 3 lignes avec ellipsis */
.line-clamp-3 {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Flou fort (si pas fourni par Tailwind) */
.blur-3xl { filter: blur(48px); }

/* Ombre bouton coral */
.shadow-\[0_4px_14px_0_rgba\(238\,108\,94\,0\.39\)\] {
	box-shadow: 0 4px 14px 0 rgba(238, 108, 94, 0.39);
}

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */

@keyframes fade-in-up {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.animate-fade-in-up {
	animation: fade-in-up 0.6s ease-out forwards;
}

/* ==========================================================================
   FONTS (optionnel — si Kaushan Script pour le sous-titre hero)
   ========================================================================== */

.font-serif {
	font-family: Georgia, "Times New Roman", serif;
}

.font-sans {
	font-family: system-ui, -apple-system, sans-serif;
}