/**
 * Configurateur de batterie Solise.
 *
 * La palette passe par des variables CSS : le designer peut la reprendre
 * entièrement en les redéfinissant sur .scb-widget, sans avoir à lutter
 * contre la spécificité des sélecteurs.
 */

.scb-widget {
	--scb-surface: #1c2333;
	--scb-surface-alt: #232b3d;
	--scb-border: #323b50;
	--scb-text: #e6e9f0;
	--scb-text-muted: #9aa3b8;
	--scb-accent: #009c86;
	/* Texte porté par l'accent : le fond étant soutenu, seul le bleu sombre
	   du thème garde un contraste suffisant — le blanc n'y suffirait pas. */
	--scb-accent-text: #1c2333;
	--scb-radius: 12px;
	--scb-gap: 1.25rem;

	margin: 1.5em 0;
	color: var( --scb-text );
}

/* --- 0. Message de résultat ------------------------------------------- */

.scb-widget__notice {
	margin-bottom: var( --scb-gap );
	padding: 1rem 1.25rem;
	border: 1px solid var( --scb-border );
	border-left-width: 4px;
	border-radius: var( --scb-radius );
	background: var( --scb-surface-alt );
}

.scb-widget__notice.is-success {
	border-left-color: #3fb950;
}

.scb-widget__notice.is-error {
	border-left-color: #f0553d;
}

.scb-widget__notice-title {
	margin: 0;
	font-weight: 600;
}

.scb-widget__notice-list {
	margin: 0.5rem 0 0;
	padding-left: 1.25rem;
	color: var( --scb-text-muted );
}

/* --- 1. Encadré d'introduction --------------------------------------- */

.scb-widget__intro {
	margin-bottom: var( --scb-gap );
	padding: 1rem 1.25rem;
	background: var( --scb-surface-alt );
	border-left: 4px solid var( --scb-accent );
	border-radius: var( --scb-radius );
}

.scb-widget__intro p {
	margin: 0;
	color: var( --scb-text-muted );
	line-height: 1.6;
}

/* Titre du configurateur : un <h2> de la page. Placé dans l'encadré, sur
   le fond du widget, pour ne pas dépendre des couleurs du thème. */
.scb-widget__title {
	margin: 0 0 0.5rem;
	color: var( --scb-text );
	font-size: 1.35rem;
	line-height: 1.3;
}

/* --- Présentation détaillée, avant le formulaire ----------------------- */

.scb-widget__details {
	margin-bottom: var( --scb-gap );
	padding: 1.25rem 1.5rem;
	background: var( --scb-surface );
	border: 1px solid var( --scb-border );
	border-radius: var( --scb-radius );
	color: var( --scb-text-muted );
	line-height: 1.6;
}

.scb-widget__details-title {
	margin: 0 0 0.5rem;
	color: var( --scb-text );
	font-size: 1.15rem;
	line-height: 1.3;
}

.scb-widget__details p {
	margin: 0 0 1rem;
}

.scb-widget__details p:last-child {
	margin-bottom: 0;
}

.scb-widget__details-steps {
	margin: 0 0 1rem;
	padding-left: 1.4rem;
}

.scb-widget__details-steps li {
	margin-bottom: 0.4rem;
}

.scb-widget__details-steps strong {
	color: var( --scb-text );
}

/* --- Carte du formulaire --------------------------------------------- */

/* Cible de l'ancre posée après l'envoi : un léger retrait évite que le
   message colle au bord de la fenêtre, ou passe sous un en-tête fixe. */
.scb-widget__run {
	scroll-margin-top: 1.5rem;
}

.scb-widget__form {
	background: var( --scb-surface );
	border: 1px solid var( --scb-border );
	border-radius: var( --scb-radius );
	overflow: hidden;
}

/* --- 2. Barre de progression ----------------------------------------- */

/* Écrite dans chaque étape : déborde du retrait pour toucher les bords du cadre. */
.scb-widget__progress {
	height: 4px;
	margin: 0 -1.5rem;
	background: var( --scb-border );
}

.scb-widget__progress-bar {
	height: 100%;
	background: var( --scb-accent );
}

/* --- 3. Compteur et intitulé de l'étape ------------------------------ */

.scb-widget__stephead {
	padding: 1.5rem 0 0.75rem;
	text-align: center;
}

.scb-widget__stepcount {
	display: inline-block;
	margin: 0 0 0.5rem;
	padding: 0.25rem 0.85rem;
	border: 1px solid var( --scb-accent );
	border-radius: 999px;
	color: var( --scb-accent );
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Titre de chaque étape : un <h3> écrit par le serveur dans sa section. */
.scb-widget__stepname {
	margin: 0 0 1.25rem;
	font-size: 1.4rem;
	line-height: 1.3;
	text-align: center;
	color: var( --scb-text );
}

/* Le script y place le focus à chaque changement d'étape : pas de cadre
   pour un focus programmé, mais un cadre visible au clavier. */
.scb-widget__stepname:focus {
	outline: none;
}

.scb-widget__stepname:focus-visible {
	outline: 2px solid var( --scb-accent );
	outline-offset: 4px;
}

/* --- 4. Contenu de l'étape ------------------------------------------- */

.scb-widget__body {
	padding: 1.5rem;
	min-height: 6rem;
}

.scb-widget__step[hidden] {
	display: none;
}

/*
 * Deux présentations du même HTML.
 *
 * Sans script, toutes les étapes s'affichent à la suite et le formulaire se
 * soumet d'un seul tenant : barre de progression et boutons Précédent /
 * Suivant n'ont alors pas de sens. Le script ajoute la classe
 * is-enhanced et masque les étapes sauf la courante — le motif « contenu en
 * onglets », identique pour le visiteur et pour les moteurs de recherche.
 */
.scb-widget:not( .is-enhanced ) .scb-widget__progress,
.scb-widget:not( .is-enhanced ) .scb-widget__prev,
.scb-widget:not( .is-enhanced ) .scb-widget__next {
	display: none;
}

.scb-widget:not( .is-enhanced ) .scb-widget__stephead {
	padding-top: 0;
}

.scb-widget:not( .is-enhanced ) .scb-widget__nav {
	justify-content: flex-end;
}

.scb-widget:not( .is-enhanced ) .scb-widget__step + .scb-widget__step {
	margin-top: 2rem;
	padding-top: 2rem;
	border-top: 1px solid var( --scb-border );
}

/* Une étape à la fois : sa barre de progression touche le haut du cadre. */
.scb-widget.is-enhanced .scb-widget__body {
	padding-top: 0;
}

.scb-widget__pending {
	margin: 0;
	color: var( --scb-text-muted );
	font-style: italic;
}

/* --- 5. Navigation ---------------------------------------------------- */

.scb-widget__nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 1.25rem 1.5rem;
	border-top: 1px solid var( --scb-border );
}

/* Une règle d'auteur l'emporte sur le [hidden] de la feuille du navigateur :
   sans ce sélecteur, display:flex garderait la barre visible malgré
   l'attribut, et l'on pourrait quitter l'étape d'aboutissement. */
.scb-widget__nav[hidden] {
	display: none;
}

.scb-widget__button {
	padding: 0.7rem 1.4rem;
	border: 1px solid var( --scb-border );
	border-radius: 8px;
	background: transparent;
	color: var( --scb-text );
	font: inherit;
	cursor: pointer;
	transition: opacity 0.2s ease, background-color 0.2s ease;
}

.scb-widget__button:hover:not( :disabled ),
.scb-widget__button:focus-visible:not( :disabled ) {
	background: var( --scb-surface-alt );
}

.scb-widget__button--primary {
	background: var( --scb-accent );
	border-color: var( --scb-accent );
	color: var( --scb-accent-text );
	font-weight: 600;
}

.scb-widget__button--primary:hover:not( :disabled ),
.scb-widget__button--primary:focus-visible:not( :disabled ) {
	background: var( --scb-accent );
	filter: brightness( 1.08 );
}

.scb-widget__button:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.scb-widget__button[hidden] {
	display: none;
}

/* --- Champs fournis par les étapes ------------------------------------ */

.scb-widget__field {
	margin-bottom: 1.25rem;
}

.scb-widget__field:last-child {
	margin-bottom: 0;
}

.scb-widget__label {
	display: block;
	margin-bottom: 0.4rem;
	color: var( --scb-text-muted );
	font-size: 0.85rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.scb-widget__input {
	display: block;
	width: 100%;
	padding: 0.75rem 1rem;
	background: var( --scb-surface-alt );
	border: 1px solid var( --scb-border );
	border-radius: 8px;
	color: var( --scb-text );
	font: inherit;
}

/* --- Étape « technologie » : case maîtresse et tableau ---------------- */

.scb-widget__hint {
	margin: 0 0 1.25rem;
	color: var( --scb-text-muted );
	line-height: 1.6;
}

.scb-widget__checkbox {
	width: 1.15rem;
	height: 1.15rem;
	margin: 0;
	accent-color: var( --scb-accent );
	cursor: pointer;
}

.scb-widget__checkall {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1.25rem;
	padding: 0.9rem 1.1rem;
	background: var( --scb-surface-alt );
	border: 1px solid var( --scb-border );
	border-left: 4px solid var( --scb-accent );
	border-radius: 8px;
}

.scb-widget__checkall-label {
	cursor: pointer;
	font-weight: 600;
	line-height: 1.4;
}

.scb-widget__table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var( --scb-border );
	border-radius: 8px;
	overflow: hidden;
}

.scb-widget__table th,
.scb-widget__table td {
	padding: 0.75rem 1rem;
	text-align: left;
	border-bottom: 1px solid var( --scb-border );
}

.scb-widget__table tbody tr:last-child td {
	border-bottom: 0;
}

.scb-widget__table thead th {
	background: var( --scb-surface-alt );
	color: var( --scb-text-muted );
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Colonne des cases : juste assez large, centrée. */
.scb-widget__table-pick {
	width: 5.5rem;
	text-align: center !important;
}

.scb-widget__table tbody tr:has( input:checked ) {
	background: rgba( 240, 180, 41, 0.07 );
}

.scb-widget__table-label {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	cursor: pointer;
}

.scb-widget__table-name {
	font-weight: 600;
}

.scb-widget__table-alt {
	color: var( --scb-text-muted );
	font-size: 0.85rem;
}

/* --- Étape « tension » : champ avec unité ----------------------------- */

.scb-widget__input-group {
	display: flex;
	align-items: stretch;
}

.scb-widget__input-group .scb-widget__input {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.scb-widget__unit {
	display: flex;
	align-items: center;
	padding: 0 1rem;
	background: var( --scb-border );
	border: 1px solid var( --scb-border );
	border-left: 0;
	border-radius: 0 8px 8px 0;
	color: var( --scb-text-muted );
	font-weight: 600;
}

/* --- Étape « capacité » : méthodes de calcul -------------------------- */

.scb-widget__modes {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.scb-widget__mode {
	padding: 1rem 1.15rem;
	background: var( --scb-surface-alt );
	border: 1px solid var( --scb-border );
	border-radius: 8px;
	transition: border-color 0.2s ease;
}

.scb-widget__mode:has( > .scb-widget__mode-head input:checked ) {
	border-color: var( --scb-accent );
}

.scb-widget__mode-head {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.scb-widget__radio {
	width: 1.1rem;
	height: 1.1rem;
	margin: 0;
	accent-color: var( --scb-accent );
	cursor: pointer;
}

.scb-widget__mode-label {
	cursor: pointer;
	font-weight: 600;
}

.scb-widget__mode-help {
	margin: 0.4rem 0 0 1.85rem;
	color: var( --scb-text-muted );
	font-size: 0.88rem;
}

.scb-widget__mode-fields {
	margin: 1rem 0 0 1.85rem;
}

/* Les champs d'une méthode ou d'une contrainte n'apparaissent que si elle est
   cochée. Sur un navigateur sans :has(), ils restent simplement tous visibles. */
.scb-widget__mode:not( :has( > .scb-widget__mode-head input:checked ) ) .scb-widget__mode-fields {
	display: none;
}

/* --- Notes ------------------------------------------------------------- */

.scb-widget__note {
	margin: 0.75rem 0 0;
	color: var( --scb-text-muted );
	font-size: 0.85rem;
}

/* --- Encadré explicatif ------------------------------------------------ */

.scb-widget__explain {
	margin-bottom: 1.25rem;
	padding: 0.9rem 1.1rem;
	background: var( --scb-surface-alt );
	border-left: 4px solid var( --scb-accent );
	border-radius: 8px;
}

.scb-widget__explain-title {
	margin: 0 0 0.4rem;
	font-weight: 600;
	color: var( --scb-accent );
}

.scb-widget__explain-body {
	margin: 0;
	color: var( --scb-text-muted );
	font-size: 0.9rem;
	line-height: 1.6;
}

/* --- Proposition d'étude sur mesure ------------------------------------ */

.scb-widget__etude {
	margin: 1.25rem 0;
	padding: 1rem 1.25rem;
	background: var( --scb-surface-alt );
	border: 1px solid var( --scb-accent );
	border-left-width: 4px;
	border-radius: 8px;
	text-align: left;
}

.scb-widget__etude-title {
	margin: 0 0 0.4rem;
	font-weight: 600;
	color: var( --scb-accent );
}

.scb-widget__etude-body {
	margin: 0;
	color: var( --scb-text-muted );
	font-size: 0.9rem;
	line-height: 1.6;
}

/* --- Étape finale ------------------------------------------------------ */

.scb-widget__pending-notice {
	margin: 0;
	padding: 0.85rem 1.5rem 0;
	color: var( --scb-accent );
	font-weight: 600;
}

.scb-widget__resultat {
	text-align: center;
}

.scb-widget__resultat-thanks {
	margin: 0 0 0.5rem;
	font-size: 1.15rem;
	font-weight: 600;
	color: var( --scb-accent );
}

.scb-widget__resultat .scb-widget__hint {
	margin-bottom: 1.5rem;
}

/* Le lien de téléchargement reprend l'apparence d'un bouton. */
a.scb-widget__download {
	display: inline-block;
	text-decoration: none;
}

.scb-widget__resultat .scb-widget__note {
	margin-top: 1rem;
}

/* --- Écrans étroits ---------------------------------------------------- */

@media ( max-width: 480px ) {
	.scb-widget__nav {
		flex-direction: column-reverse;
	}

	.scb-widget__button {
		width: 100%;
	}
}