/*
Theme Name: El Loquissimo
Theme URI: https://elloquisimo.com/
Author: Vital Academy Studio
Author URI: https://elloquisimo.com/
Description: Thème one-page pour EL LOQUISSIMO (DJ / Animation / Sonorisation), pensé pour être entièrement modifié (textes, photos, vidéos) avec la version gratuite d'Elementor. Style inspiré des sites DJ événementiels premium, en rouge #e31e24.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: elloquisimo
*/

:root {
	--elq-red: #e31e24;
	--elq-red-dark: #b9161b;
	--elq-black: #0a0a0a;
	--elq-white: #ffffff;
	--elq-gray: #b7b7b7;
	--elq-off: #f7f5f2;
}

body {
	font-family: 'Rajdhani', Helvetica, Arial, sans-serif;
	color: var(--elq-black);
	background: var(--elq-white);
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
	font-family: 'Teko', Helvetica, Arial, sans-serif !important;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .5px;
	line-height: .98;
	color: var(--elq-black);
}

.elq-script.elementor-heading-title {
	font-family: 'Sarina', cursive !important;
	text-transform: none;
	color: var(--elq-red);
	font-weight: 400;
	letter-spacing: 0;
}

.elq-eyebrow.elementor-heading-title {
	font-family: 'Rajdhani', sans-serif !important;
	font-size: 15px !important;
	letter-spacing: 3px;
	color: var(--elq-red);
	font-weight: 700;
}

.elq-title-white.elementor-heading-title {
	color: var(--elq-white) !important;
}

/* ---------- Boutons ---------- */
.elementor-button,
.elq-btn {
	background: var(--elq-red) !important;
	color: var(--elq-white) !important;
	border-radius: 100px !important;
	font-family: 'Rajdhani', sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	padding: 14px 30px !important;
	border: none;
	transition: background .2s ease, transform .2s ease;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	cursor: pointer;
}
.elementor-button:hover,
.elq-btn:hover {
	background: var(--elq-red-dark) !important;
	color: var(--elq-white) !important;
	transform: translateY(-2px);
}

/* ---------- Header ---------- */
.elq-header .elementor-icon-list-icon { display: none; }
.elq-header .elementor-icon-list-items { display: flex; gap: 34px; justify-content: center; }
.elq-header .elementor-icon-list-text {
	color: var(--elq-white);
	font-family: 'Rajdhani', sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 15px;
}
.elq-header .elementor-icon-list-item:hover .elementor-icon-list-text { color: var(--elq-red); }
.elq-header { position: sticky; top: 0; z-index: 999; }

/* ---------- Hero ---------- */
.elq-hero, .elq-dark-overlay { position: relative; }
.elq-hero::before, .elq-dark-overlay::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(10,10,10,.62);
	z-index: 0;
	pointer-events: none;
}
.elq-hero > .elementor-container, .elq-dark-overlay > .elementor-container {
	position: relative;
	z-index: 1;
}
.elq-hero-title.elementor-heading-title {
	color: var(--elq-white) !important;
	font-size: clamp(60px, 12vw, 150px) !important;
}
.elq-hero .elq-script.elementor-heading-title { font-size: clamp(30px, 5vw, 54px) !important; }
.elq-hero .elementor-text-editor { color: var(--elq-gray); font-size: 18px; margin-bottom: 24px; }

/* ---------- Icon box (Expertise) ---------- */
.elq-dark-overlay .elementor-icon-box-title,
.elq-dark-overlay .elementor-icon-box-description { color: var(--elq-white); }
.elementor-icon-box-icon .elementor-icon {
	background: var(--elq-red);
	color: var(--elq-white);
	width: 70px;
	height: 70px;
	border-radius: 12px;
	font-size: 26px;
}
.elementor-icon-box-title { font-size: 22px !important; margin-top: 14px; }

/* ---------- Image box (Prestations) ---------- */
.elementor-image-box-img img {
	border-radius: 14px;
	transition: transform .3s ease;
}
.elementor-image-box-wrapper:hover .elementor-image-box-img img { transform: scale(1.03); }
.elementor-image-box-title { text-transform: uppercase; }

.elq-rounded-image img { border-radius: 16px; }

/* ---------- Social icons ---------- */
.elementor-social-icons-wrapper .elementor-icon {
	color: var(--elq-red) !important;
	background: transparent !important;
	border: 2px solid var(--elq-red);
	transition: all .2s ease;
}
.elementor-social-icons-wrapper .elementor-icon:hover {
	background: var(--elq-red) !important;
	color: var(--elq-white) !important;
}

/* ---------- Formulaire de contact ---------- */
#contact .elementor-heading-title,
#contact .elementor-widget-text-editor { color: var(--elq-white); }

.elq-form { max-width: 640px; }
.elq-form__row { display: flex; gap: 24px; margin-bottom: 18px; flex-wrap: wrap; }
.elq-form__field { flex: 1 1 220px; }
.elq-form__field--full { flex: 1 1 100%; }
.elq-form__field label {
	display: block;
	color: var(--elq-red);
	font-family: 'Rajdhani', sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: 1px;
	margin-bottom: 6px;
}
.elq-form__field input,
.elq-form__field select,
.elq-form__field textarea {
	width: 100%;
	background: transparent;
	border: none;
	border-bottom: 1px solid rgba(255,255,255,.3);
	color: var(--elq-white);
	font-family: 'Rajdhani', sans-serif;
	font-size: 16px;
	padding: 8px 2px;
	outline: none;
}
.elq-form__field select option { color: #000; }
.elq-form__field input:focus,
.elq-form__field select:focus,
.elq-form__field textarea:focus { border-bottom-color: var(--elq-red); }
.elq-form__consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: var(--elq-gray);
	font-size: 13px;
	margin: 18px 0;
}
.elq-form__consent input { margin-top: 3px; }
.elq-hp-field { position: absolute !important; left: -9999px !important; }
.elq-form__submit { margin-top: 10px; }
.elq-form__feedback { font-size: 14px; margin-bottom: 10px; min-height: 18px; }
.elq-form__feedback.is-success { color: #4caf50; }
.elq-form__feedback.is-error { color: var(--elq-red); }

/* ---------- Audio (Dernier mix) ---------- */
audio { accent-color: var(--elq-red); margin-top: 10px; }

/* ---------- Sections avec fond sombre : forcer les couleurs de texte ---------- */
.elq-header, #contact, .elq-dark-overlay, .elq-hero {
	background-color: var(--elq-black);
}

#accueil { min-height: 90vh; display: flex; align-items: center; }

@media (max-width: 767px) {
	.elq-header .elementor-icon-list-items { gap: 18px; flex-wrap: wrap; justify-content: center; }
}