/* ==========================================================================
   SEMSAMAR — Design system
   Remplace form-wizard-blue.css. Conserve volontairement les mêmes sélecteurs
   (.form-wizard, .form-wizard-step, .btn-next, .input-error…) : le JS du
   wizard et des pages s'appuie dessus.
   Se charge APRÈS bootstrap.min.css et surcharge Bootstrap 3.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
	/* Marque */
	--sem-brand:        #009DE0;
	--sem-brand-dark:   #0079ae;
	--sem-brand-darker: #005d87;
	--sem-brand-light:  #4fbdec;
	--sem-brand-50:     #eaf7fe;
	--sem-brand-100:    #cfeefc;

	/* Neutres */
	--sem-ink:        #0f2537;
	--sem-ink-soft:   #47617a;
	--sem-ink-muted:  #7f93a6;
	--sem-line:       #e3eaf1;
	--sem-line-soft:  #eef3f8;
	--sem-surface:    #ffffff;
	--sem-canvas:     #eef3f8;

	/* Sémantique */
	--sem-success:      #12805c;
	--sem-success-bg:   #e8f7f1;
	--sem-danger:       #c92a2a;
	--sem-danger-bg:    #fdecec;
	--sem-warning:      #a65f00;
	--sem-warning-bg:   #fff6e6;

	/* Typo */
	--sem-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	            "Helvetica Neue", Arial, sans-serif;

	/* Rayons */
	--sem-radius-sm: 8px;
	--sem-radius:    12px;
	--sem-radius-lg: 18px;

	/* Élévations */
	--sem-shadow-sm: 0 1px 2px rgba(15, 37, 55, .06);
	--sem-shadow:    0 4px 16px rgba(15, 37, 55, .08);
	--sem-shadow-lg: 0 18px 48px rgba(15, 37, 55, .12);

	/* Anneau de focus — accessibilité */
	--sem-ring: 0 0 0 3px rgba(0, 157, 224, .28);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

html {
	-webkit-text-size-adjust: 100%;
}

body {
	background-color: var(--sem-canvas);
	background-image:
		radial-gradient(ellipse 80% 55% at 50% -10%, var(--sem-brand-50), transparent 70%);
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	font-family: var(--sem-font);
	color: var(--sem-ink);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Le template d'origine neutralisait les pseudo-éléments des liens Bootstrap. */
a:before,
a:after {
	content: none;
}

/* --------------------------------------------------------------------------
   3. Carte principale
   -------------------------------------------------------------------------- */

.form-box {
	padding-top: 48px;
	padding-bottom: 48px;
}

.form-wizard {
	position: relative;
	padding: 36px 34px 30px;
	background: var(--sem-surface);
	border: 1px solid var(--sem-line);
	border-radius: var(--sem-radius-lg);
	box-shadow: var(--sem-shadow-lg);
	font-family: var(--sem-font);
	font-size: 16px;
	font-weight: 400;
	color: var(--sem-ink-soft);
	line-height: 1.6;
	text-align: center;
}

/* Filet de marque en haut de carte */
.form-wizard:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	border-radius: var(--sem-radius-lg) var(--sem-radius-lg) 0 0;
	background: linear-gradient(90deg, var(--sem-brand), var(--sem-brand-light));
}

.form-wizard strong { font-weight: 600; }

.form-wizard a,
.form-wizard a:hover,
.form-wizard a:focus {
	color: var(--sem-brand-dark);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color .15s ease;
}

.form-wizard a:hover,
.form-wizard a:focus {
	border-bottom-color: currentColor;
}

.form-wizard ::-moz-selection { background: var(--sem-brand); color: #fff; text-shadow: none; }
.form-wizard ::selection      { background: var(--sem-brand); color: #fff; text-shadow: none; }

/* --------------------------------------------------------------------------
   4. Titres et logo
   -------------------------------------------------------------------------- */

#logo {
	margin-bottom: 22px;
}

#logo img,
.form-wizard #logo img {
	max-width: 190px;
	width: 62%;
	height: auto;
}

.form-wizard h1,
.form-wizard h2 {
	margin-top: 8px;
	font-size: 30px;
	font-weight: 600;
	color: var(--sem-ink);
	line-height: 1.25;
	letter-spacing: -.01em;
}

.form-wizard h3 {
	margin-top: 0;
	margin-bottom: 6px;
	font-size: 23px;
	font-weight: 600;
	color: var(--sem-ink);
	line-height: 1.3;
	letter-spacing: -.01em;
	text-transform: none; /* l'ancien thème forçait les capitales */
}

.form-wizard h4 {
	float: left;
	width: 100%;
	margin-top: 0;
	font-size: 19px;
	font-weight: 600;
	color: var(--sem-ink);
	line-height: 1.4;
}

.form-wizard h4 span {
	float: right;
	font-size: 17px;
	font-weight: 400;
	color: var(--sem-ink-soft);
	line-height: 1.4;
}

/* Sous-titre d'accroche sous le titre */
.form-wizard > h3 + p,
.form-wizard form > h3 + p,
.form-wizard h4 + p {
	color: var(--sem-ink-muted);
	font-size: 14.5px;
}

.form-wizard img { max-width: 100%; }

/* --------------------------------------------------------------------------
   5. Stepper
   -------------------------------------------------------------------------- */

.form-wizard-steps {
	position: relative;
	margin: 26px auto 8px;
	overflow: hidden;
}

.form-wizard-progress {
	position: absolute;
	top: 22px;
	left: 0;
	width: 100%;
	height: 3px;
	border-radius: 3px;
	background: var(--sem-line);
}

.form-wizard-progress-line {
	position: absolute;
	top: 0;
	left: 0;
	height: 3px;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--sem-brand), var(--sem-brand-light));
	transition: width .45s cubic-bezier(.4, 0, .2, 1);
}

.form-wizard-tolal-steps-3 .form-wizard-step { position: relative; float: left; width: 33.333%; padding: 0 4px; }
.form-wizard-tolal-steps-4 .form-wizard-step { position: relative; float: left; width: 25%;     padding: 0 4px; }
.form-wizard-tolal-steps-5 .form-wizard-step { position: relative; float: left; width: 20%;     padding: 0 4px; }

.form-wizard-step p {
	margin: 8px 0 0;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.35;
}

/* -- Variante « classic » (celle utilisée par toutes les pages) -- */

.form-header-classic .form-wizard-step-icon {
	display: inline-block;
	width: 40px;
	height: 40px;
	margin-top: 3px;
	background: var(--sem-surface);
	border: 2px solid var(--sem-line);
	border-radius: 50%;
	font-size: 15px;
	color: var(--sem-ink-muted);
	line-height: 36px;
	box-shadow: var(--sem-shadow-sm);
	transition: all .25s ease;
}

/* Étape franchie */
.form-header-classic .form-wizard-step.activated .form-wizard-step-icon {
	background: var(--sem-brand-50);
	border-color: var(--sem-brand);
	color: var(--sem-brand-dark);
	line-height: 36px;
}

/* Étape en cours */
.form-header-classic .form-wizard-step.active .form-wizard-step-icon {
	width: 46px;
	height: 46px;
	margin-top: 0;
	background: var(--sem-brand);
	border-color: var(--sem-brand);
	font-size: 19px;
	color: #fff;
	line-height: 42px;
	box-shadow: 0 6px 16px rgba(0, 157, 224, .32);
}

.form-header-classic .form-wizard-step p           { color: var(--sem-ink-muted); }
.form-header-classic .form-wizard-step.activated p { color: var(--sem-brand-dark); }
.form-header-classic .form-wizard-step.active p    { color: var(--sem-ink); font-weight: 600; }

/* -- Variante « modarn » -- */

.form-header-modarn .form-wizard-step {
	padding-top: 10px !important;
	border: 2px solid #fff;
	background: var(--sem-line-soft);
}
.form-header-modarn .form-wizard-step.active,
.form-header-modarn .form-wizard-step.activated { background: var(--sem-brand); }
.form-header-modarn .form-wizard-progress { height: 0; display: none; }
.form-header-modarn .form-wizard-step-icon {
	display: inline-block;
	width: 40px;
	height: 40px;
	margin-top: 4px;
	background: var(--sem-line);
	border-radius: 50%;
	font-size: 16px;
	color: var(--sem-ink-soft);
	line-height: 40px;
}
.form-header-modarn .form-wizard-step.activated .form-wizard-step-icon {
	background: var(--sem-brand); border: 1px solid #fff; color: #fff; line-height: 38px;
}
.form-header-modarn .form-wizard-step.active .form-wizard-step-icon {
	background: #fff; border: 1px solid #fff; color: var(--sem-brand); line-height: 38px;
}
.form-header-modarn .form-wizard-step p,
.form-header-modarn .form-wizard-step.activated p,
.form-header-modarn .form-wizard-step.active p { color: #fff; }

/* --------------------------------------------------------------------------
   6. Barre de progression Bootstrap
   -------------------------------------------------------------------------- */

.form-wizard .progress {
	height: 6px;
	margin-bottom: 22px;
	background: var(--sem-line-soft);
	border-radius: 999px;
	box-shadow: none;
	overflow: hidden;
}

.form-wizard .progress-bar {
	background-color: var(--sem-brand);
	background-image: linear-gradient(90deg, var(--sem-brand), var(--sem-brand-light));
	box-shadow: none;
	transition: width .45s cubic-bezier(.4, 0, .2, 1);
}

/* --------------------------------------------------------------------------
   7. Formulaires
   -------------------------------------------------------------------------- */

.form-wizard fieldset {
	display: none; /* piloté par le JS du wizard (fadeIn) — ne pas retirer */
	text-align: left;
	border: 0 !important;
	padding: 0;
	margin: 0;
}

.form-wizard .form-group {
	margin-bottom: 20px;
}

.form-wizard label {
	display: block;
	margin-bottom: 7px;
	font-size: 14px;
	font-weight: 600;
	color: var(--sem-ink);
	line-height: 1.4;
}

.form-wizard label span { color: var(--sem-danger); }

/* Pastille de contexte (ex. « Espace sécurisé » sur le login admin) */
.sem-badge {
	display: inline-block;
	margin-bottom: 14px;
	padding: 5px 13px;
	background: var(--sem-brand-50);
	border-radius: 999px;
	color: var(--sem-brand-dark);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .02em;
}

.sem-badge .fa { margin-right: 5px; }

/* Écran de connexion */
.sem-login { padding-bottom: 26px; }

.sem-login #logo { margin-bottom: 16px; }

.sem-login fieldset { margin-top: 24px; }

/* Texte d'aide sous un champ */
.sem-hint {
	margin: 7px 0 0;
	color: var(--sem-ink-muted);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.45;
	text-align: left;
}

.sem-hint strong { color: var(--sem-ink-soft); font-weight: 600; }

.sem-hint-block {
	margin: 0;
	padding: 10px 18px;
	border-top: 1px solid var(--sem-line-soft);
	background: var(--sem-line-soft);
}

/* Mention de réassurance en pied de page */
.sem-secure {
	color: var(--sem-success);
	font-weight: 600;
}

.sem-secure .fa { margin-right: 5px; }

.form-body-classic .form-control,
.form-body-material .form-control,
.form-body-stylist .form-control {
	height: 50px;
	margin: 0;
	padding: 0 16px;
	background: var(--sem-surface);
	border: 1.5px solid var(--sem-line);
	border-radius: var(--sem-radius-sm);
	box-shadow: var(--sem-shadow-sm);
	font-family: var(--sem-font);
	font-size: 16px; /* >=16px : évite le zoom automatique sur iOS */
	font-weight: 400;
	line-height: 48px;
	color: var(--sem-ink);
	transition: border-color .15s ease, box-shadow .15s ease;
}

.form-body-classic .form-control:hover,
.form-body-material .form-control:hover,
.form-body-stylist .form-control:hover {
	border-color: #c9d6e3;
}

.form-body-classic .form-control:focus,
.form-body-material .form-control:focus,
.form-body-stylist .form-control:focus {
	outline: 0;
	background: var(--sem-surface);
	border-color: var(--sem-brand);
	box-shadow: var(--sem-ring);
}

.form-control:-moz-placeholder          { color: var(--sem-ink-muted); }
.form-control:-ms-input-placeholder     { color: var(--sem-ink-muted); }
.form-control::-webkit-input-placeholder{ color: var(--sem-ink-muted); }
.form-control::placeholder              { color: var(--sem-ink-muted); }

/* Groupes d'input : l'addon devient une icône intégrée au champ */
.form-wizard .input-group-addon {
	min-width: 48px;
	background: var(--sem-brand-50);
	border: 1.5px solid var(--sem-line);
	border-right: 0;
	border-radius: var(--sem-radius-sm) 0 0 var(--sem-radius-sm);
	color: var(--sem-brand-dark);
	font-size: 15px;
	transition: border-color .15s ease, background-color .15s ease;
}

.form-wizard .input-group-addon:last-child {
	border-right: 1.5px solid var(--sem-line);
	border-left: 0;
	border-radius: 0 var(--sem-radius-sm) var(--sem-radius-sm) 0;
}

.form-wizard .input-group .form-control:first-child {
	border-radius: var(--sem-radius-sm) 0 0 var(--sem-radius-sm);
}

.form-wizard .input-group .form-control:last-child {
	border-radius: 0 var(--sem-radius-sm) var(--sem-radius-sm) 0;
}

/* Le focus du champ éclaire aussi son addon */
.form-wizard .input-group:focus-within .input-group-addon {
	border-color: var(--sem-brand);
	background: var(--sem-brand-100);
}

/* Champ en erreur (classe posée par form-wizard.js) */
.form-wizard .input-error,
.form-body-classic .form-control.input-error {
	border-color: var(--sem-danger) !important;
	box-shadow: 0 0 0 3px rgba(201, 42, 42, .14) !important;
}

/* Masque les flèches des input[type=number] : montants et n° de dossier */
.form-wizard input[type="number"]::-webkit-outer-spin-button,
.form-wizard input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.form-wizard input[type="number"] { -moz-appearance: textfield; }

/* --------------------------------------------------------------------------
   8. Boutons
   -------------------------------------------------------------------------- */

.form-wizard-buttons {
	margin-top: 26px;
	text-align: right;
}

/* Certains écrans posent .btn-lg sans .btn : les deux doivent être couverts. */
.form-body-classic.form-wizard .btn,
.form-body-material.form-wizard .btn,
.form-body-stylist.form-wizard .btn,
.form-wizard .btn,
.form-wizard .btn-lg {
	display: inline-block;
	min-width: 105px;
	width: 100%;
	height: 48px;
	margin: 0;
	padding: 0 22px;
	background: var(--sem-brand);
	border: 0;
	border-radius: var(--sem-radius-sm);
	box-shadow: 0 4px 12px rgba(0, 157, 224, .26);
	font-family: var(--sem-font);
	font-size: 16px;
	font-weight: 600;
	line-height: 48px;
	color: #fff;
	text-shadow: none;
	text-align: center;
	letter-spacing: .01em;
	cursor: pointer;
	transition: background-color .15s ease, box-shadow .15s ease, transform .1s ease;
}

.form-body-classic.form-wizard .btn-lg,
.form-wizard .btn-lg {
	height: 54px;
	font-size: 17px;
	line-height: 54px;
}

.form-wizard .btn:hover,
.form-wizard .btn:focus,
.form-wizard .btn-lg:hover,
.form-wizard .btn-lg:focus {
	background: var(--sem-brand-dark);
	box-shadow: 0 6px 18px rgba(0, 157, 224, .34);
	color: #fff;
}

.form-wizard .btn:focus-visible,
.form-wizard .btn-lg:focus-visible {
	outline: 0;
	box-shadow: var(--sem-ring), 0 6px 18px rgba(0, 157, 224, .34);
}

.form-wizard .btn:active,
.form-wizard .btn-lg:active {
	background: var(--sem-brand-darker);
	box-shadow: 0 2px 6px rgba(0, 157, 224, .3);
	transform: translateY(1px);
	color: #fff;
}

.form-wizard .btn[disabled],
.form-wizard .btn-lg[disabled] {
	background: var(--sem-line);
	box-shadow: none;
	color: var(--sem-ink-muted);
	cursor: not-allowed;
}

/* Actions principales */
.form-wizard .btn.btn-next,
.form-wizard .btn-lg.btn-next,
.form-wizard .btn.btn-submit,
.form-wizard .btn-lg.btn-submit {
	background: var(--sem-brand);
}

.form-wizard .btn.btn-next:hover,
.form-wizard .btn-lg.btn-next:hover,
.form-wizard .btn.btn-submit:hover,
.form-wizard .btn-lg.btn-submit:hover {
	background: var(--sem-brand-dark);
}

/* Action secondaire : retour */
.form-wizard .btn.btn-previous,
.form-wizard .btn.btn-previous:focus {
	background: var(--sem-surface);
	border: 1.5px solid var(--sem-line);
	box-shadow: var(--sem-shadow-sm);
	color: var(--sem-ink-soft);
}

.form-wizard .btn.btn-previous:hover {
	background: var(--sem-line-soft);
	border-color: #c9d6e3;
	color: var(--sem-ink);
}

/* Variantes utilitaires — remplacent les style="background-color:…" en ligne */
.form-wizard .btn.btn-quit,
.form-wizard .btn.btn-quit:focus {
	background: var(--sem-surface);
	border: 1.5px solid var(--sem-line);
	box-shadow: var(--sem-shadow-sm);
	color: var(--sem-ink-soft);
}
.form-wizard .btn.btn-quit:hover {
	background: var(--sem-line-soft);
	border-color: #c9d6e3;
	color: var(--sem-ink);
}

.form-wizard .btn.btn-success-action,
.form-wizard .btn.btn-success-action:focus {
	background: var(--sem-success);
	box-shadow: 0 4px 12px rgba(18, 128, 92, .26);
	color: #fff;
}
.form-wizard .btn.btn-success-action:hover { background: #0d6547; }

/* Deux boutons côte à côte sur la même ligne */
.form-wizard-buttons .btn + .btn { margin-top: 10px; }

@media (min-width: 480px) {
	.form-wizard-buttons.form-wizard-buttons-inline {
		display: flex;
		gap: 12px;
	}

	/* Les boutons sont en width:100% par défaut : en flex ils se partagent la ligne */
	.form-wizard-buttons.form-wizard-buttons-inline .btn,
	.form-wizard-buttons.form-wizard-buttons-inline .btn-lg {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
	}

	.form-wizard-buttons.form-wizard-buttons-inline .btn + .btn { margin-top: 0; }
}

/* Bouton hérité du thème WPBakery */
.vc_general.vc_btn3 {
	display: inline-block;
	position: relative;
	padding: 14px 20px;
	background: var(--sem-brand-50);
	border: 1px solid var(--sem-brand);
	border-radius: var(--sem-radius-sm);
	color: var(--sem-brand-dark);
	font-size: 14px;
	font-weight: 600 !important;
	line-height: normal;
	text-align: center;
	vertical-align: middle;
	word-wrap: break-word;
	cursor: pointer;
	box-sizing: border-box;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	transition: all .2s ease-in-out;
}

.vc_general.vc_btn3:hover {
	background: var(--sem-brand);
	color: #fff;
}

/* --------------------------------------------------------------------------
   9. Tableaux (récapitulatifs, e-reçu)
   -------------------------------------------------------------------------- */

.form-wizard .table-responsive {
	margin-bottom: 22px;
	border: 1px solid var(--sem-line);
	border-radius: var(--sem-radius);
	background: #fbfdfe;
	overflow: hidden;
}

.form-wizard .table {
	margin-bottom: 0;
	font-size: 15px;
}

.form-wizard .table > tbody > tr > th,
.form-wizard .table > tbody > tr > td,
.form-wizard .table > tr > th,
.form-wizard .table > tr > td {
	padding: 13px 18px;
	border-top: 1px solid var(--sem-line-soft);
	vertical-align: middle;
	line-height: 1.45;
}

.form-wizard .table > tbody > tr:first-child > th,
.form-wizard .table > tbody > tr:first-child > td,
.form-wizard .table > tr:first-child > th,
.form-wizard .table > tr:first-child > td {
	border-top: 0;
}

.form-wizard .table tr th {
	font-weight: 500;
	color: var(--sem-ink-soft);
	text-align: left;
}

.form-wizard .table tr td {
	font-weight: 600;
	color: var(--sem-ink);
	text-align: right;
}

.form-wizard .table > tbody > tr:hover { background: var(--sem-brand-50); }

/* Total dû : la ligne la plus importante de l'écran */
#solde .table tr th,
#solde .table tr td {
	font-size: 17px;
	color: var(--sem-ink) !important;
}

#solde .table tr td {
	color: var(--sem-brand-dark) !important;
	font-weight: 700;
	font-size: 20px;
}

#montantRecap {
	color: var(--sem-brand-dark);
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   10. États : chargement, erreur, succès
   -------------------------------------------------------------------------- */

#loading {
	display: none;
	margin-top: 16px;
	padding: 12px 16px;
	background: var(--sem-brand-50);
	border-radius: var(--sem-radius-sm);
	color: var(--sem-brand-dark) !important;
	font-size: 14.5px;
	font-weight: 500;
	text-align: center;
}

/* Spinner CSS : remplace le GIF ajax-loader posé en style inline */
#loading:before {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-right: 9px;
	border: 2px solid var(--sem-brand-100);
	border-top-color: var(--sem-brand);
	border-radius: 50%;
	vertical-align: -3px;
	animation: sem-spin .7s linear infinite;
}

@keyframes sem-spin { to { transform: rotate(360deg); } }

#error,
#resMail {
	margin-top: 14px;
	font-size: 14.5px;
	text-align: center;
}

/* Vide : ne réserve aucun espace */
#error:empty,
#resMail:empty { margin-top: 0; }

/* .sem-status est exclu : sur les écrans de résultat, #error porte le bloc d'état
   et ne doit pas recevoir l'habillage du message d'erreur inline. */
#error:not(:empty):not(.sem-status) {
	padding: 12px 16px;
	background: var(--sem-danger-bg);
	border-left: 3px solid var(--sem-danger);
	border-radius: var(--sem-radius-sm);
	color: var(--sem-danger) !important;
	font-weight: 500;
	text-align: left;
}

/* États posés par le JS (recherche.js, ok.php) plutôt qu'une couleur en ligne */
#error.is-success:not(:empty):not(.sem-status) {
	background: var(--sem-success-bg);
	border-left-color: var(--sem-success);
	color: var(--sem-success) !important;
}

#error.is-warning:not(:empty):not(.sem-status) {
	background: var(--sem-warning-bg);
	border-left-color: var(--sem-warning);
	color: var(--sem-warning) !important;
}

/* Une .alert injectée dans #error remplace l'habillage du conteneur */
#error > .alert {
	margin: -12px -16px;
}

/* Attente de redirection banque — visible par défaut, masqué par PHP/JS */
.sem-wait {
	margin: 18px 0 0;
	padding: 14px 16px;
	background: var(--sem-brand-50);
	border-radius: var(--sem-radius-sm);
	color: var(--sem-brand-dark);
	font-size: 14.5px;
	font-weight: 500;
	text-align: center;
}

.sem-wait:before {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-right: 9px;
	border: 2px solid var(--sem-brand-100);
	border-top-color: var(--sem-brand);
	border-radius: 50%;
	vertical-align: -3px;
	animation: sem-spin .7s linear infinite;
}

#erreur {
	margin-top: 16px;
	text-align: center;
}

#resetpassword {
	margin-top: 18px;
	font-size: 14.5px;
}

#resetpassword p { margin: 0; }

.form-wizard .alert {
	display: block;
	margin-bottom: 0;
	padding: 12px 16px;
	border: 0;
	border-left: 3px solid transparent;
	border-radius: var(--sem-radius-sm);
	font-size: 14.5px;
	font-weight: 500;
	text-align: left;
}

.form-wizard .alert-success { background: var(--sem-success-bg); border-left-color: var(--sem-success); color: var(--sem-success); }
.form-wizard .alert-danger  { background: var(--sem-danger-bg);  border-left-color: var(--sem-danger);  color: var(--sem-danger); }
.form-wizard .alert-warning { background: var(--sem-warning-bg); border-left-color: var(--sem-warning); color: var(--sem-warning); }
.form-wizard .alert-info    { background: var(--sem-brand-50);   border-left-color: var(--sem-brand);   color: var(--sem-brand-dark); }

/* -- Bloc d'état : écrans de résultat (payé, refusé, annulé, en attente) -- */

.sem-status {
	padding: 10px 0 4px;
	text-align: center;
}

.sem-status-icon {
	display: block;
	width: 84px;
	height: 84px;
	margin: 0 auto 20px;
	background: var(--sem-brand-50);
	border-radius: 50%;
	color: var(--sem-brand);
	font-size: 38px;
	line-height: 84px;
	text-align: center;
}

/* float:none — .form-wizard h4 est flotté par défaut */
.form-wizard .sem-status-title,
.sem-status-title {
	float: none;
	width: auto;
	margin: 0 0 10px;
	color: var(--sem-ink);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
}

.sem-status-text {
	margin: 0 auto;
	max-width: 42ch;
	color: var(--sem-ink-soft);
	font-size: 15px;
	line-height: 1.6;
}

.sem-status-text + .sem-status-text { margin-top: 10px; }

.sem-status-ref {
	display: inline-block;
	margin-top: 16px;
	padding: 7px 14px;
	background: var(--sem-line-soft);
	border-radius: var(--sem-radius-sm);
	color: var(--sem-ink-soft);
	font-size: 13.5px;
}

.sem-status-ref strong {
	color: var(--sem-ink);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	letter-spacing: .02em;
}

.sem-status-success .sem-status-icon { background: var(--sem-success-bg); color: var(--sem-success); }
.sem-status-danger  .sem-status-icon { background: var(--sem-danger-bg);  color: var(--sem-danger); }
.sem-status-warning .sem-status-icon { background: var(--sem-warning-bg); color: var(--sem-warning); }
.sem-status-info    .sem-status-icon { background: var(--sem-brand-50);   color: var(--sem-brand); }

/* Ligne de total mise en avant dans les récapitulatifs */
.form-wizard .table > tbody > tr.sem-row-total > th,
.form-wizard .table > tbody > tr.sem-row-total > td {
	background: var(--sem-brand-50);
	font-size: 16px;
}

.form-wizard .table > tbody > tr.sem-row-total > th { color: var(--sem-ink); font-weight: 600; }
.form-wizard .table > tbody > tr.sem-row-total > td { color: var(--sem-brand-dark); font-weight: 700; font-size: 19px; }

.form-wizard .success h3 {
	margin: 18px auto !important;
	color: var(--sem-ink);
	text-align: center;
}

.form-wizard .success .success-icon {
	width: 104px;
	height: 104px;
	margin: 22px auto;
	background: var(--sem-success-bg);
	border: 4px solid var(--sem-success);
	border-radius: 50%;
	color: var(--sem-success);
	font-size: 54px;
	line-height: 96px;
	text-align: center !important;
}

/* --------------------------------------------------------------------------
   11. Pied de carte : logos bancaires
   -------------------------------------------------------------------------- */

#logos_bancaires {
	margin-top: 26px;
	padding-top: 20px;
	border-top: 1px solid var(--sem-line-soft);
}

#logos_bancaires img,
.logos {
	max-width: 240px !important;
	width: 100%;
	height: auto;
	opacity: .85;
}

/* --------------------------------------------------------------------------
   12. Pied de page légal
   -------------------------------------------------------------------------- */

.sem-footer {
	max-width: 620px;
	margin: 30px auto 48px;
	padding: 0 16px;
	color: var(--sem-ink-muted);
	font-family: var(--sem-font);
	font-size: 13px;
	line-height: 1.7;
	text-align: center;
}

.sem-footer p { margin: 0 0 4px; }

.sem-footer a {
	color: var(--sem-ink-soft);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.sem-footer a:hover,
.sem-footer a:focus { color: var(--sem-brand-dark); }

/* Bandeau cookies */
.cookit {
	font-family: var(--sem-font) !important;
	font-size: 13.5px !important;
}

/* --------------------------------------------------------------------------
   13. Fenêtre mentions légales / RGPD (colorbox)
   -------------------------------------------------------------------------- */

.white-popup-block {
	max-width: 980px;
	z-index: 999;
	background-size: cover;
	font-family: var(--sem-font);
}

.white-popup-block .wpb_row {
	position: relative;
	height: 100%;
	border-top: 4px solid var(--sem-brand);
	border-bottom: 4px solid var(--sem-brand);
}

.white-popup-block p { padding-left: 10px; }

.white-popup-block h3 {
	padding: 8px 10px;
	background-color: var(--sem-brand);
	border-radius: var(--sem-radius-sm);
	color: #fff;
	font-weight: 600;
}

.white-popup-block .wpb_column {
	height: 100%;
	background-size: cover;
	color: var(--sem-brand-dark);
	font-family: var(--sem-font);
	font-weight: 400 !important;
	line-height: 1.5;
}

.mfp-close,
button.mfp-arrow {
	position: absolute;
	display: block;
	top: 0;
	right: 0;
	width: 44px;
	height: 44px;
	padding: 0 0 18px 10px;
	background: transparent;
	border: 0;
	box-shadow: none;
	color: var(--sem-brand-dark);
	font-size: 28px;
	font-style: normal;
	line-height: 44px;
	text-align: center;
	text-decoration: none;
	opacity: .65;
	overflow: visible;
	cursor: pointer;
	z-index: 1046;
	-webkit-appearance: none;
}

.mfp-close:hover { opacity: 1; }

@media (min-width: 769px) {
	.white-popup-block { margin: 5% auto; }
	.white-popup-block p { font-size: 17px; }
}

@media (max-width: 768px) {
	.white-popup-block { margin: 10% auto; }
	.white-popup-block p,
	.white-popup-block h3 { font-size: 15px; }
}

/* --------------------------------------------------------------------------
   14. Spinner hérité (.cube1 / .cube2)
   -------------------------------------------------------------------------- */

.spinner {
	position: relative;
	width: 40px;
	height: 40px;
	margin: 100px auto;
}

.cube1, .cube2 {
	position: absolute;
	top: 0;
	left: 0;
	width: 15px;
	height: 15px;
	background-color: var(--sem-brand);
	border-radius: 3px;
	-webkit-animation: sk-cubemove 1.8s infinite ease-in-out;
	animation: sk-cubemove 1.8s infinite ease-in-out;
}

.cube2 {
	-webkit-animation-delay: -0.9s;
	animation-delay: -0.9s;
}

@-webkit-keyframes sk-cubemove {
	25%  { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5); }
	50%  { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg); }
	75%  { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); }
	100% { -webkit-transform: rotate(-360deg); }
}

@keyframes sk-cubemove {
	25%   { transform: translateX(42px) rotate(-90deg) scale(0.5); }
	50%   { transform: translateX(42px) translateY(42px) rotate(-179deg); }
	50.1% { transform: translateX(42px) translateY(42px) rotate(-180deg); }
	75%   { transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); }
	100%  { transform: rotate(-360deg); }
}

/* --------------------------------------------------------------------------
   15. Divers hérités
   -------------------------------------------------------------------------- */

#crypto { width: 6em; }

#btnFermer:after { display: none; }

.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"],
.radio input[type="radio"],
.radio-inline input[type="radio"] {
	position: absolute;
	margin-top: 9px;
	margin-left: -20px;
}

.form-control option:hover,
.form-control option:checked {
	box-shadow: 0 0 10px 100px var(--sem-brand) inset;
}

/* --------------------------------------------------------------------------
   16. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.form-box {
		padding-top: 18px;
		padding-bottom: 18px;
	}

	.form-wizard {
		padding: 26px 18px 22px;
		border-radius: var(--sem-radius);
		box-shadow: var(--sem-shadow);
	}

	.form-wizard:before { border-radius: var(--sem-radius) var(--sem-radius) 0 0; }

	.form-wizard h3 { font-size: 20px; }

	#logo img,
	.form-wizard #logo img { width: 54%; max-width: 150px; }

	/* Stepper compact : on garde les pastilles, on réduit les libellés */
	.form-wizard-steps { margin-top: 20px; }
	.form-wizard-progress { top: 18px; }

	.form-header-classic .form-wizard-step-icon {
		width: 32px;
		height: 32px;
		font-size: 13px;
		line-height: 28px;
	}

	.form-header-classic .form-wizard-step.active .form-wizard-step-icon {
		width: 38px;
		height: 38px;
		font-size: 16px;
		line-height: 34px;
	}

	.form-wizard-step p { font-size: 11px; }

	/* Tableaux : libellé au-dessus de la valeur plutôt qu'une colonne écrasée */
	.form-wizard .table > tbody > tr > th,
	.form-wizard .table > tbody > tr > td,
	.form-wizard .table > tr > th,
	.form-wizard .table > tr > td {
		padding: 10px 14px;
		font-size: 14px;
	}

	.form-wizard .btn,
	.form-wizard .btn-lg { width: 100%; }

	.form-wizard-buttons { text-align: center; }
}

@media (max-width: 380px) {
	.form-wizard-step p { font-size: 10px; }
}

/* Respect des préférences système d'animation */
@media (prefers-reduced-motion: reduce) {
	*,
	*:before,
	*:after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
}

/* --------------------------------------------------------------------------
   17. Impression (e-reçu)
   -------------------------------------------------------------------------- */

@media print {
	body {
		background: #fff !important;
		background-image: none !important;
	}

	.form-box { padding: 0; }

	.form-wizard {
		border: 0;
		box-shadow: none;
		padding: 0;
	}

	.form-wizard:before { display: none; }

	#logo {
		max-width: 27%;
		height: auto;
		margin: auto;
	}

	.form-wizard-steps,
	.form-wizard-buttons,
	.progress,
	.cookit,
	#logos_bancaires,
	.sem-footer { display: none !important; }

	.form-wizard .table-responsive { border: 1px solid #ccc; }
}