/**
 * Simulateur solaire Solareco.
 *
 * Le style reprend celui des formulaires du theme, sans pouvoir le reutiliser :
 * les regles .style-line du thème sont portees par « div.wpcf7 .form-style-1 »
 * et le trait sous le champ est injecte par le JS de Contact Form 7. On reproduit
 * donc ici la meme apparence — champ souligne, icone a gauche, trait accentue au
 * focus — avec les memes variables de couleur et la meme police d'icones que le
 * theme, afin que le simulateur ne detonne pas a cote du formulaire de devis.
 *
 * Codepoints des icones, releves dans le CSS du theme :
 *   \e9ae personne   \e9a3 courriel   \e9b8 telephone
 *   \e9cd sujet      \e9e7 zone de texte
 */

.solareco-sim {
	/* Repli sur la charte Solareco si les variables du theme sont absentes. */
	--sim-accent: var(--theme-color-text_link, #66A633);
	--sim-accent-hover: var(--theme-color-text_hover, #4C8A2B);
	--sim-texte: var(--theme-color-text, #54655E);
	--sim-titre: var(--theme-color-text_dark, #161616);
	--sim-bord: var(--theme-color-input_bd_color, #BFCBC2);
	--sim-fond-alt: var(--theme-color-alter_bg_color, #FFFFFF);
	--sim-fond-bloc: var(--theme-color-bg_color, #E7F0E9);

	display: grid;
	gap: 3rem 3.5rem;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: start;
}

@media (max-width: 900px) {
	.solareco-sim {
		grid-template-columns: minmax(0, 1fr);
		gap: 2.5rem;
	}
}

/* --- Formulaire : champs soulignes, a la maniere du theme ---------------- */

.solareco-sim__form {
	display: grid;
	gap: 2.1rem;
}

.solareco-sim__champ {
	display: grid;
	gap: 0.7rem;
}

.solareco-sim__label {
	display: block;
	margin: 0;
	color: var(--sim-titre);
	font-weight: 600;
	line-height: 1.35;
}

/* Le champ chiffre : transparent, souligne, icone a gauche */
.solareco-sim__ligne {
	position: relative;
	display: block;
	width: 100%;
}

.solareco-sim__ligne:before {
	content: "\e9cd";
	font-family: "fontello";
	font-size: 20px;
	font-weight: normal;
	position: absolute;
	top: 10px;
	left: 0;
	color: var(--sim-texte);
	pointer-events: none;
}

.solareco-sim__ligne input[type="number"] {
	width: 100%;
	padding: 8px 0 12px 36px;
	border: none;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--sim-titre);
	font-size: 1.05rem;
	line-height: 1.5;
	appearance: textfield;
	-moz-appearance: textfield;
}

.solareco-sim__ligne input[type="number"]::-webkit-outer-spin-button,
.solareco-sim__ligne input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.solareco-sim__ligne input[type="number"]:focus {
	outline: none;
	box-shadow: none;
}

/* Le trait sous le champ, qui se remplit de la couleur d'accent au focus */
.solareco-sim__ligne .solareco-sim__trait {
	display: block;
	height: 1px;
	width: 100%;
	position: relative;
	background-color: var(--sim-bord);
	margin-top: -1px;
	z-index: 1;
}

.solareco-sim__ligne .solareco-sim__trait:before {
	content: "";
	display: block;
	width: 0;
	height: 1px;
	position: absolute;
	left: 0;
	top: 0;
	background-color: var(--sim-accent);
	transition: width 0.4s ease;
}

.solareco-sim__ligne input:focus ~ .solareco-sim__trait:before,
.solareco-sim__ligne:hover .solareco-sim__trait:before {
	width: 100%;
}

/* --- Choix : boutons a cocher discrets ----------------------------------- */

.solareco-sim__choix {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.solareco-sim__choix label {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 0.55rem 1.05rem;
	border: 1px solid var(--sim-bord);
	border-radius: 100px;
	cursor: pointer;
	line-height: 1.3;
	color: var(--sim-texte);
	transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.solareco-sim__choix label:hover {
	border-color: var(--sim-accent);
	color: var(--sim-titre);
}

.solareco-sim__choix input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.solareco-sim__choix label:has(input:checked) {
	background-color: var(--sim-accent);
	border-color: var(--sim-accent);
	color: #fff;
}

.solareco-sim__choix label:has(input:focus-visible) {
	outline: 2px solid var(--sim-accent);
	outline-offset: 2px;
}

/* Repli pour les navigateurs sans :has() */
.solareco-sim__choix input:checked + span {
	font-weight: 600;
	color: var(--sim-titre);
}

/* --- Resultat ------------------------------------------------------------ */

.solareco-sim__resultat {
	background-color: var(--sim-fond-bloc);
	border-radius: 14px;
	padding: 2rem;
	min-height: 13rem;
	transition: opacity 0.15s ease;
}

.solareco-sim__resultat.is-loading {
	opacity: 0.5;
}

.solareco-sim__attente {
	margin: 0;
	color: var(--sim-texte);
}

.solareco-sim__grille {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
	gap: 0.9rem;
	margin-bottom: 1.8rem;
}

.solareco-sim__bloc {
	background-color: var(--sim-fond-alt);
	border-radius: 10px;
	padding: 1rem 1.1rem;
	display: grid;
	gap: 0.3rem;
}

.solareco-sim__cle {
	font-size: 0.8rem;
	line-height: 1.35;
	color: var(--sim-texte);
}

.solareco-sim__val {
	font-size: 1.3rem;
	line-height: 1.15;
	color: var(--sim-titre);
	font-weight: 600;
}

.solareco-sim__stitre {
	margin: 0 0 1rem;
	font-size: 1.1rem;
	color: var(--sim-titre);
}

/* --- Produits recommandes ------------------------------------------------ */

.solareco-sim__produits {
	display: grid;
	gap: 0.7rem;
}

.solareco-sim__produit {
	display: grid;
	gap: 0.2rem;
	background-color: var(--sim-fond-alt);
	border-radius: 10px;
	border-left: 3px solid var(--sim-accent);
	padding: 1rem 1.1rem;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.solareco-sim__produit:hover,
.solareco-sim__produit:focus {
	transform: translateX(3px);
	box-shadow: 0 4px 14px rgba(22, 22, 22, 0.07);
}

.solareco-sim__produit-role {
	font-size: 0.74rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--sim-accent-hover);
}

.solareco-sim__produit-nom {
	font-weight: 600;
	color: var(--sim-titre);
	line-height: 1.35;
}

.solareco-sim__produit-qte,
.solareco-sim__produit-lien {
	font-size: 0.86rem;
	color: var(--sim-texte);
}

.solareco-sim__produit-lien {
	color: var(--sim-accent-hover);
}

/* --- Appel a l'action ---------------------------------------------------- */

.solareco-sim__cta {
	margin: 1.7rem 0 0;
}

.solareco-sim__bouton {
	display: inline-block;
	background-color: var(--sim-accent);
	color: #fff;
	padding: 0.9rem 1.9rem;
	border-radius: 100px;
	text-decoration: none;
	font-weight: 600;
	line-height: 1.3;
	transition: background-color 0.2s ease;
}

.solareco-sim__bouton:hover,
.solareco-sim__bouton:focus {
	background-color: var(--sim-accent-hover);
	color: #fff;
}

/* --- Mention des hypotheses ---------------------------------------------- */

.solareco-sim__note {
	grid-column: 1 / -1;
	margin: 0;
	padding-top: 0.5rem;
	border-top: 1px solid var(--sim-bord);
	font-size: 0.85rem;
	line-height: 1.55;
	color: var(--sim-texte);
}