/* ==========================================================================
   CALCULATEUR DE BESOIN EN BTU — apparence
   --------------------------------------------------------------------------
   Tout est piloté par les variables ci-dessous. Les contrôles de l'onglet
   « Style » du widget Elementor ne font qu'écraser ces variables : c'est
   pour ça qu'ajouter un réglage dans le widget ne demande jamais de
   toucher à ce fichier.

   Chaque couleur est branchée sur la palette globale d'Elementor
   (Elementor > Réglages du site). La 2e valeur de var() est le repli
   utilisé si Elementor est absent.
   ========================================================================== */
.btu-calc {
	--btu-primary:   var(--e-global-color-primary,   #EE7523); /* orange LTR       */
	--btu-accent:    var(--e-global-color-accent,    #B5591B); /* orange survol    */
	--btu-text:      var(--e-global-color-text,      #333333); /* texte courant    */
	--btu-heading:   var(--e-global-color-e99f94c,   #080808); /* titres, résultat */
	--btu-muted:     var(--e-global-color-secondary, #707070); /* gris libellés    */
	--btu-soft:      var(--e-global-color-bd2f6bd,   #F4F4F4); /* champs calculés  */
	--btu-white:     #FFFFFF;
	--btu-line:      #E6E6E6;
	--btu-lock-bd:   #DCDCDC;

	--btu-font:        var(--e-global-typography-text-font-family, "Poppins"), sans-serif;
	--btu-font-titre:  var(--e-global-typography-primary-font-family, "Poppins"), sans-serif;
	--btu-poids-titre: var(--e-global-typography-primary-font-weight, 600);

	--btu-hauteur-champ: 54px;

	font-family: var(--btu-font);
	color: var(--btu-text);
	max-width: 980px;
	margin: 0 auto;
	-webkit-font-smoothing: antialiased;
}
.btu-calc *,
.btu-calc *::before,
.btu-calc *::after { box-sizing: border-box; }

/* ---- Étapes et titres ---- */
.btu-calc .btu-step { padding: 28px 0 26px; border-top: 1px solid var(--btu-line); }
.btu-calc .btu-step:first-of-type { border-top: 0; padding-top: 0; }

.btu-calc .btu-title {
	font-family: var(--btu-font-titre);
	font-size: 20px;
	font-weight: var(--btu-poids-titre);
	line-height: 1.3;
	margin: 0 0 18px;
	padding: 0;
	color: var(--btu-heading);
	text-transform: uppercase;
	letter-spacing: .01em;
	display: flex;
	align-items: baseline;
	gap: 12px;
}
.btu-calc .btu-title span {
	font-family: var(--btu-font-titre);
	font-size: 26px;
	font-weight: 700;
	color: var(--btu-primary);
	flex: 0 0 auto;
	line-height: 1;
}

/* ---- Grille des champs ---- */
.btu-calc .btu-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.btu-calc .btu-field { flex: 1 1 150px; min-width: 0; }
.btu-calc .btu-field-wide { flex: 3 1 300px; }
.btu-calc .btu-op {
	flex: 0 0 auto;
	font-size: 20px;
	font-weight: 600;
	color: var(--btu-muted);
	line-height: var(--btu-hauteur-champ);
	-webkit-user-select: none;
	user-select: none;
}
.btu-calc .btu-label {
	display: block;
	font-family: var(--btu-font);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.3;
	color: var(--btu-muted);
	padding: 0 0 6px;
	margin: 0;
	text-transform: none;
	letter-spacing: 0;
}

/* ---- Champs de saisie ---- */
.btu-calc input.btu-in,
.btu-calc input.btu-out {
	display: block;
	width: 100%;
	height: var(--btu-hauteur-champ);
	font-family: var(--btu-font);
	font-size: 20px;
	font-weight: 500;
	text-align: center;
	color: var(--btu-text);
	border: 2px solid var(--btu-primary);
	border-radius: 0;
	padding: 0 12px;
	margin: 0;
	background: var(--btu-white);
	-webkit-appearance: none;
	-moz-appearance: textfield;
	appearance: none;
	box-shadow: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.btu-calc input.btu-in::-webkit-outer-spin-button,
.btu-calc input.btu-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.btu-calc input.btu-in:hover { border-color: var(--btu-accent); }
.btu-calc input.btu-in:focus {
	outline: none;
	border-color: var(--btu-accent);
	box-shadow: 0 0 0 3px rgba(238, 117, 35, .28);
}

/* ---- Champs calculés : gris, non saisissables ---- */
.btu-calc input.btu-out {
	background: var(--btu-soft);
	border-color: var(--btu-lock-bd);
	color: var(--btu-text);
	cursor: default;
	font-weight: 600;
}

/* ---- Résultat final ----
   Fond foncé volontaire : le blanc sur orange donne un contraste de
   2,91:1, insuffisant pour être lisible. Le fond foncé monte à 20:1.
   Ne pas mettre l'orange en fond ici. */
.btu-calc input.btu-out.btu-final {
	background: var(--btu-heading);
	color: var(--btu-white);
	border: 2px solid var(--btu-heading);
	border-top: 4px solid var(--btu-primary);
	font-size: 24px;
	font-weight: 700;
	letter-spacing: .01em;
}
.btu-calc .btu-final-label { color: var(--btu-heading); font-weight: 600; }

/* ---- Options d'étanchéité ---- */
.btu-calc .btu-radio { display: block; margin: 0 0 16px; }
.btu-calc .btu-radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.btu-calc .btu-radio label {
	display: block;
	position: relative;
	padding-left: 36px;
	cursor: pointer;
	font-family: var(--btu-font);
	font-size: 15px;
	line-height: 1.45;
	color: var(--btu-text);
	margin: 0;
}
.btu-calc .btu-radio label::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 20px;
	height: 20px;
	border: 2px solid var(--btu-muted);
	border-radius: 50%;
	background: var(--btu-white);
	transition: border-color .15s ease;
}
.btu-calc .btu-radio label::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 7px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--btu-primary);
	transform: scale(0);
	transition: transform .12s ease;
}
.btu-calc .btu-radio label:hover::before { border-color: var(--btu-primary); }
.btu-calc .btu-radio input:checked + label::before { border-color: var(--btu-primary); }
.btu-calc .btu-radio input:checked + label::after { transform: scale(1); }
.btu-calc .btu-radio input:focus-visible + label::before {
	border-color: var(--btu-accent);
	box-shadow: 0 0 0 3px rgba(238, 117, 35, .28);
}
.btu-calc .btu-radio label b { font-weight: 600; color: var(--btu-heading); }
.btu-calc .btu-radio label em { font-style: normal; font-weight: 400; color: var(--btu-muted); }
.btu-calc .btu-radio label small {
	display: block;
	font-size: 14px;
	font-weight: 400;
	color: var(--btu-muted);
	margin-top: 2px;
	line-height: 1.4;
}

/* ---- Message quand il fait déjà plus chaud dehors ---- */
.btu-calc .btu-note {
	display: none;
	margin: 14px 0 0;
	padding: 12px 16px;
	background: var(--btu-soft);
	border-left: 4px solid var(--btu-primary);
	font-family: var(--btu-font);
	font-size: 15px;
	line-height: 1.45;
	color: var(--btu-text);
}
.btu-calc .btu-note.is-visible { display: block; }

/* ---- Mobile ---- */
@media (max-width: 640px) {
	.btu-calc { --btu-hauteur-champ: 50px; }
	.btu-calc .btu-title { font-size: 17px; gap: 9px; }
	.btu-calc .btu-title span { font-size: 22px; }
	.btu-calc .btu-field,
	.btu-calc .btu-field-wide { flex: 1 1 100%; }
	.btu-calc .btu-op { flex: 1 1 100%; text-align: center; line-height: 1; padding: 6px 0 0; }
	.btu-calc input.btu-in,
	.btu-calc input.btu-out { font-size: 18px; }
}

/* ---- Impression ---- */
@media print {
	.btu-calc input.btu-in,
	.btu-calc input.btu-out { background: #fff !important; color: #000 !important; }
	.btu-calc input.btu-out.btu-final { border-width: 3px !important; }
}