/*
Theme Name:   Exotique Café Touba — Child
Theme URI:    https://exotiquecafetouba.com
Description:  Thème enfant Hello Elementor pour Exotique Café Touba International. Ne contient que la PRÉSENTATION : le design system et l'habillage. Toute la logique métier vit dans le plugin ect-core.
Author:       OptiLeads
Version:      1.0.0
Template:     hello-elementor
Text Domain:  exotique-cafe-child
*/

/* ==========================================================================
   1. DESIGN SYSTEM — repris du prototype ASSETS/maquette
   Les valeurs sont également déclarées dans les Réglages globaux d'Elementor
   afin de rester administrables ; elles sont dupliquées ici pour le CSS
   des composants qui ne passent pas par Elementor (WooCommerce, formulaires).
   ========================================================================== */
:root {
	/* Fonds */
	--ect-noir: #0E0D0B;
	--ect-noir-2: #151310;
	--ect-noir-3: #1C1915;

	/* Accents */
	--ect-or: #F4B000;
	--ect-or-clair: #F6C64B;
	--ect-orange: #FF8C00;
	--ect-brun: #6B3E1E;
	--ect-brun-2: #4A2C15;

	/* Textes */
	--ect-creme: #F3EDE1;
	--ect-creme-2: #E7DCC7;
	--ect-texte: #EDE7DA;
	--ect-texte-mut: #A69C88;

	/* Filets */
	--ect-ligne: rgba(244, 176, 0, .22);
	--ect-ligne-soft: rgba(244, 176, 0, .10);

	/* Typographies */
	--ect-serif: 'Playfair Display', Georgia, serif;
	--ect-caps: 'Cinzel', Georgia, serif;
	--ect-sans: 'Montserrat', system-ui, -apple-system, sans-serif;

	/* La maquette prévoyait Great Vibes pour le logotype « Touba ». Cette
	   police n'est plus chargée : le logotype est porté par le fichier logo,
	   et une famille entière (≈ 30 Ko) pour deux mots de repli n'était pas
	   justifiée. Playfair en italique assure le relais. */
	--ect-script: 'Playfair Display', Georgia, serif;

	/* Métriques */
	--ect-r: 6px;
	--ect-wrap: 1240px;
	--ect-gap: 32px;
	--ect-t: .35s ease;
}

/* ==========================================================================
   2. SOCLE
   ========================================================================== */
/* Indique au navigateur que l'interface est sombre. C'est ce qui fait rendre
   en sombre tout ce que le CSS ne contrôle pas : la liste déroulante native
   d'un <select>, les barres de défilement, les sélecteurs de date. Sans cela,
   un menu déroulant s'ouvre sur fond blanc avec notre texte crème dessus —
   donc illisible. */
:root {
	color-scheme: dark;
}

body {
	background: var(--ect-noir);
	color: var(--ect-texte);
	font-family: var(--ect-sans);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

/* Garde-fou anti-débordement horizontal (leçon des projets précédents :
   les grilles larges et les halos en position absolue provoquent un scroll
   latéral sur mobile si rien ne le contient).

   `clip` et non `hidden` : `overflow-x: hidden` force `overflow-y: auto`, ce
   qui transforme <html>/<body> en conteneur de défilement et casse à la fois
   `position: sticky` et l'écoute du défilement de la fenêtre. `clip` contient
   le débordement horizontal sans rien de tout cela. */
html,
body {
	overflow-x: clip;
}

img,
video,
iframe {
	max-width: 100%;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--ect-serif);
	color: var(--ect-creme);
	font-weight: 600;
	line-height: 1.12;
}

a {
	color: inherit;
	text-decoration: none;
	transition: color var(--ect-t);
}

a:hover {
	color: var(--ect-or);
}

::selection {
	background: var(--ect-or);
	color: var(--ect-noir);
}

/* Focus visible : obligatoire pour l'accessibilité clavier, et le contour
   par défaut du navigateur est invisible sur fond noir. */
:focus-visible {
	outline: 2px solid var(--ect-or);
	outline-offset: 2px;
}

/* ==========================================================================
   3. COMPOSANTS DE MARQUE
   ========================================================================== */

/* Sur-titre */
.ect-eyebrow {
	font-family: var(--ect-caps);
	letter-spacing: .32em;
	text-transform: uppercase;
	font-size: 12px;
	color: var(--ect-or);
	font-weight: 600;
	display: block;
}

/* Filet dégradé */
.ect-hairline {
	width: 60px;
	height: 1px;
	background: linear-gradient(90deg, var(--ect-or), transparent);
	margin: 16px 0 24px;
	border: 0;
}

.ect-hairline--center {
	margin-inline: auto;
}

/* Titre de section */
.ect-title {
	font-family: var(--ect-serif);
	font-weight: 600;
	font-size: clamp(28px, 4vw, 50px);
	line-height: 1.12;
	color: var(--ect-creme);
	letter-spacing: .01em;
}

.ect-title em {
	font-style: italic;
	color: var(--ect-or-clair);
}

/* Boutons */
.ect-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: var(--ect-caps);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: .16em;
	text-transform: uppercase;
	padding: 15px 28px;
	border-radius: 2px;
	border: 1px solid transparent;
	transition: var(--ect-t);
	cursor: pointer;
	min-height: 44px; /* zone tactile confortable */
}

.ect-btn--gold {
	background: var(--ect-or);
	color: var(--ect-noir);
}

.ect-btn--gold:hover {
	background: var(--ect-orange);
	color: var(--ect-noir);
	transform: translateY(-2px);
	box-shadow: 0 12px 30px rgba(255, 140, 0, .28);
}

.ect-btn--ghost {
	border-color: rgba(243, 237, 225, .35);
	color: var(--ect-creme);
	background: transparent;
}

.ect-btn--ghost:hover {
	border-color: var(--ect-or);
	color: var(--ect-or);
}

.ect-btn--block {
	width: 100%;
}

.ect-btn--sm {
	padding: 11px 20px;
	font-size: 12px;
}

/* Carte sombre générique */
.ect-card {
	background: var(--ect-noir-2);
	border: 1px solid var(--ect-ligne-soft);
	border-radius: var(--ect-r);
	transition: var(--ect-t);
}

.ect-card:hover {
	border-color: var(--ect-or);
	transform: translateY(-4px);
	box-shadow: 0 20px 40px rgba(0, 0, 0, .4);
}

/* Étoiles */
.ect-stars {
	color: var(--ect-or);
	font-size: 12px;
	letter-spacing: 2px;
}

/* ==========================================================================
   4. ACCESSIBILITÉ — mouvement réduit
   Les animations du prototype (vapeur, halos, apparitions) sont décoratives :
   on les neutralise pour les utilisateurs qui le demandent.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}