/**
 * Jetons de style — releves sur heolian.fr le 2026-08-26 (kit Elementor 758 + theme heolian).
 *
 * REGLE : on NE redefinit PAS la charte, on s'y raccroche. Chaque jeton retombe sur la
 * variable globale Elementor quand elle existe, et ne garde une valeur en dur que comme
 * repli. Si Julien change une couleur dans Elementor, le configurateur suit tout seul.
 */

.hw-config {
	/* Couleurs — globales Elementor du kit 758 */
	--hw-primary:    var(--e-global-color-primary,   #009FE3); /* bleu HEOLIAN */
	--hw-secondary:  var(--e-global-color-secondary, #354855); /* ardoise */
	--hw-text:       var(--e-global-color-text,      #354855);
	--hw-accent:     var(--e-global-color-accent,    #FB342E); /* rouge — CTA */
	--hw-body-text:  #475A68; /* couleur de corps du theme enfant heolian */
	--hw-bg:         #FFFFFF;
	--hw-bg-soft:    #F4F6F7;
	--hw-border:     #475A68;

	/* Couleurs fonctionnelles du configurateur (energie) — voir ARCHITECTURE.md §7 */
	--hw-autoconso:  #009FE3;
	--hw-batterie:   #7BC143;
	--hw-injection:  #B9C4CB;
	--hw-reseau:     #FB342E;

	/* Typographie — Roboto, comme tout le site (deja chargee par Elementor) */
	--hw-font:        var(--e-global-typography-text-font-family, "Roboto"), sans-serif;
	--hw-size-base:   16px;
	--hw-lh-base:     1.3;   /* 20.8px / 16px, releve sur le site */
	--hw-size-h1:     35px;  /* poids 700 */
	--hw-size-h2:     27px;  /* poids 400 */

	/* Formes — le site est anguleux : radius 1px, pas d'arrondi decoratif */
	--hw-radius:      1px;
	--hw-border-w:    1px;

	/* Rythme */
	--hw-gap:         20px;
	--hw-pad-section: 0 20px; /* padding des sections Elementor */
	--hw-container:   1140px; /* largeur du .elementor-container */

	font-family: var(--hw-font);
	font-size: var(--hw-size-base);
	line-height: var(--hw-lh-base);
	color: var(--hw-body-text);
}

/* Bouton — copie du .gform_button du site (Gravity Forms legacy) */
.hw-config .hw-btn {
	background: var(--hw-accent);
	border: var(--hw-border-w) solid var(--hw-accent);
	border-radius: var(--hw-radius);
	color: #FFF;
	font-family: var(--hw-font);
	font-size: var(--hw-size-base);
	padding: 5px 15px;
	text-transform: none;
	cursor: pointer;
}

/* Champ — copie du .gfield input du site */
.hw-config .hw-input {
	background: var(--hw-bg);
	border: var(--hw-border-w) solid var(--hw-border);
	border-radius: var(--hw-radius);
	font-size: var(--hw-size-base);
	padding: 5px 4px;
}

/* Points de rupture — alignes sur Elementor (additional_custom_breakpoints actif) */
@media (max-width: 1024px) { .hw-config { --hw-container: 100%; } }
@media (max-width: 767px)  { .hw-config { --hw-gap: 12px; } }