/* Solareco — configurateur de structure 1.1.0 (charte : #10271d, #66A633, #F5B71E, #13190A, #E7F0E9). */
.ssc {
	--ssc-dark: #10271d;
	--ssc-green: #66A633;
	--ssc-green-dark: #4E8526;
	--ssc-yellow: #F5B71E;
	--ssc-text: #13190A;
	--ssc-muted: #54655E;
	--ssc-soft: #E7F0E9;
	--ssc-card: #F7FAF7;
	--ssc-line: #D5E0D8;
	--ssc-error: #B3261E;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	padding: clamp(20px, 4vw, 48px);
	border-radius: 12px;
	background: #fff;
	color: var(--ssc-text);
	font-size: 15px;
	line-height: 1.55;
}
.ssc *, .ssc *::before, .ssc *::after { box-sizing: border-box; }
.ssc [hidden] { display: none !important; }

/* Étapes */
.ssc-steps { display: flex; gap: 12px; margin: 0 0 32px; padding: 0 0 22px; border-bottom: 1px solid var(--ssc-soft); list-style: none; counter-reset: none; }
.ssc-steps__item { display: flex; flex: 1 1 0; align-items: center; gap: 10px; min-width: 0; margin: 0; padding: 0; color: var(--ssc-muted); font-weight: 700; font-size: 13px; }
.ssc-steps__item::before { display: none; }
.ssc-steps__num { display: inline-flex; flex: 0 0 34px; align-items: center; justify-content: center; width: 34px; height: 34px; border: 2px solid var(--ssc-line); border-radius: 50%; background: #fff; color: var(--ssc-muted); font-size: 14px; }
.ssc-steps__item.is-current .ssc-steps__num { border-color: var(--ssc-green); background: var(--ssc-green); color: #fff; }
.ssc-steps__item.is-current { color: var(--ssc-dark); }
.ssc-steps__item.is-done .ssc-steps__num { border-color: var(--ssc-green); color: var(--ssc-green); }
.ssc-steps__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Formulaire */
.ssc-form { margin: 0; }
.ssc-required-note { margin: 0 0 18px; color: var(--ssc-muted); font-size: 13px; }
.ssc-step__title { margin: 0 0 22px; color: var(--ssc-dark); font-size: clamp(20px, 2vw, 26px); line-height: 1.2; }
.ssc-step__title:focus { outline: none; }
.ssc-step__title:focus-visible { outline: 3px solid var(--ssc-yellow); outline-offset: 4px; }
.ssc-field { min-width: 0; margin: 0 0 22px; padding: 0; border: 0; }
.ssc-label { display: block; margin: 0 0 4px; padding: 0; color: var(--ssc-dark); font-weight: 700; font-size: 15px; }
.ssc-req { color: var(--ssc-error); }
.ssc-opt { color: var(--ssc-muted); font-weight: 400; font-size: 13px; }
.ssc-help { margin: 0 0 10px; color: var(--ssc-muted); font-size: 13px; line-height: 1.45; }
.ssc-note { margin: -6px 0 18px; padding: 10px 14px; border-left: 4px solid var(--ssc-green); border-radius: 6px; background: var(--ssc-card); color: var(--ssc-dark); font-size: 14px; }
.ssc-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.ssc-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ssc-row > .ssc-conditional { min-width: 0; }

.ssc input[type="text"], .ssc input[type="email"], .ssc input[type="tel"], .ssc input[type="number"], .ssc select, .ssc textarea {
	display: block;
	width: 100%;
	max-width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 10px 14px;
	border: 1px solid var(--ssc-line);
	border-radius: 8px;
	background: #fff;
	color: var(--ssc-text);
	font: inherit;
	box-shadow: none;
}
.ssc textarea { min-height: 120px; resize: vertical; }
/* Le thème masque les <select> qu'il n'a pas encore habillés : ceux de l'étape sont créés après son initialisation. */
.ssc select { visibility: visible !important; opacity: 1 !important; -webkit-appearance: menulist; appearance: auto; }
.ssc input[readonly] { background: var(--ssc-card); color: var(--ssc-muted); }
.ssc input:focus-visible, .ssc select:focus-visible, .ssc textarea:focus-visible, .ssc button:focus-visible, .ssc a:focus-visible, .ssc-card:has(input:focus-visible) {
	outline: 3px solid var(--ssc-yellow);
	outline-offset: 2px;
	border-color: var(--ssc-green);
}
.ssc .has-error input:not([type="radio"]):not([type="checkbox"]), .ssc .has-error select, .ssc .has-error textarea { border-color: var(--ssc-error); }
.ssc-error { margin: 6px 0 0; color: var(--ssc-error); font-weight: 600; font-size: 13px; }

/* Cartes de choix */
.ssc-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ssc-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ssc-card { display: flex; align-items: flex-start; gap: 12px; min-height: 56px; margin: 0; padding: 14px 16px; border: 1px solid var(--ssc-line); border-radius: 8px; background: var(--ssc-card); cursor: pointer; transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease; }
.ssc-card:hover { border-color: var(--ssc-green); transform: translateY(-1px); }
.ssc-card:has(input:checked) { border-color: var(--ssc-green); background: var(--ssc-soft); box-shadow: inset 0 0 0 1px var(--ssc-green); }
.ssc-card input { flex: 0 0 auto; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--ssc-green); }
.ssc-card__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ssc-card__title { color: var(--ssc-text); font-weight: 700; font-size: 15px; line-height: 1.3; }
.ssc-card__desc { color: var(--ssc-muted); font-size: 13px; line-height: 1.4; }
.ssc .has-error .ssc-card { border-color: var(--ssc-error); }

/* Cases à cocher (précisions) et choix indisponible */
.ssc-cards--checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ssc-card.is-disabled { opacity: .55; cursor: not-allowed; }
.ssc-card.is-disabled:hover { border-color: var(--ssc-line); transform: none; }

/* Boutons */
.ssc-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; margin-top: 12px; padding-top: 22px; border-top: 1px solid var(--ssc-soft); }
.ssc-btn, .ssc-cta, .ssc .ssc-btn {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 200px;
	min-height: 52px;
	margin: 0;
	padding: 12px 28px;
	border: 2px solid #66A633 !important;
	border-radius: 999px;
	background: #66A633 !important;
	color: #fff !important;
	font: inherit;
	font-weight: 700;
	font-size: 15px;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.ssc-btn:hover, .ssc-cta:hover, .ssc .ssc-btn:hover { border-color: #10271d !important; background: #10271d !important; color: #fff !important; }
.ssc .ssc-btn.ssc-btn--ghost { border-color: #D5E0D8 !important; background: #fff !important; color: #10271d !important; }
.ssc .ssc-btn.ssc-btn--ghost:hover { border-color: #66A633 !important; background: #E7F0E9 !important; color: #10271d !important; }
.ssc-btn[disabled] { opacity: .7; cursor: progress; }
/* Bouton « Configurer ma structure » : vert foncé pour le distinguer de « Ajouter à ma demande ». */
.ssc-cta { border-color: #10271d !important; background: #10271d !important; }
.ssc-cta:hover { border-color: #66A633 !important; background: #66A633 !important; }
.ssc-buttons [data-ssc-prev] { margin-right: auto; }

.ssc-status { margin: 18px 0 0; padding: 14px 16px; border-left: 4px solid var(--ssc-error); border-radius: 8px; background: #FDF1F0; color: var(--ssc-error); font-weight: 600; }
.ssc-status.is-ok { border-left-color: var(--ssc-green); background: var(--ssc-soft); color: var(--ssc-dark); }
.ssc-noscript { padding: 14px 16px; border-radius: 8px; background: var(--ssc-soft); }

/* Boutons produit et bandeau de catégorie */
.ssc-cta-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 14px 0 18px; }
.ssc-cta-note { max-width: 42ch; color: #54655E; font-size: 13px; line-height: 1.45; }
.ssc-cta { --ssc-green: #66A633; --ssc-dark: #10271d; }

/* Étape « Configuration de la structure » du formulaire de devis */
.ssc.ssc-quote { padding: 0; border-radius: 0; background: transparent; }
.ssc-block { margin: 0 0 24px; padding: 24px; border: 1px solid var(--ssc-line); border-radius: 12px; background: #fff; }
.ssc-block__title { margin: 0 0 6px; color: var(--ssc-dark); font-size: 20px; line-height: 1.25; }
.ssc-block__title:focus { outline: none; }
.ssc-lead { margin: 0 0 20px; padding: 10px 14px; border-left: 4px solid var(--ssc-yellow); border-radius: 6px; background: #FFF8E6; color: var(--ssc-dark); font-size: 14px; }
.ssc-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#solareco_devis .ssc-hidden-step { display: none !important; }

@media (max-width: 1100px) {
	.ssc-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.ssc { padding: 20px 16px; font-size: 15px; }
	.ssc-steps { gap: 6px; margin-bottom: 24px; padding-bottom: 16px; }
	.ssc-steps__item { flex-direction: column; align-items: center; gap: 6px; font-size: 11px; text-align: center; }
	.ssc-steps__label { white-space: normal; }
	.ssc-row, .ssc-row--3, .ssc-cards, .ssc-cards--3, .ssc-cards--4, .ssc-cards--checks { grid-template-columns: 1fr; }
	.ssc-buttons { flex-direction: column-reverse; align-items: stretch; }
	.ssc-buttons .ssc-btn { width: 100%; min-width: 0; }
	.ssc-buttons [data-ssc-prev] { margin-right: 0; }
	.ssc-cta, .ssc-banner .ssc-cta { width: 100%; min-width: 0; }
	.ssc-block { padding: 18px 14px; }
}
@media (prefers-reduced-motion: reduce) {
	.ssc-card, .ssc-btn, .ssc-cta { transition: none; }
	.ssc-card:hover { transform: none; }
}