/**
 * Formulaire de pré-adoption pas à pas (FluentForms #4).
 * Suit les couleurs du thème via les tokens --wp--preset--color--*.
 */

.cc-step[hidden] { display: none !important; }

/* --- Barre de progression --- */
/* selecteur préfixé .wp-block-post-content pour battre la règle de thème
   « .wp-block-post-content ol { list-style: decimal } » (même piège que les
   autres listes structurelles du site). */
.wp-block-post-content ol.cc-step-nav,
.cc-step-nav {
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
}
.wp-block-post-content ol.cc-step-nav > li,
.cc-step-nav > li {
	list-style: none;
}
.cc-step-nav {
	--cc-sn-accent: var( --wp--preset--color--primary, #2f6f4f );
	--cc-sn-fg: var( --wp--preset--color--contrast, #1a1a1a );
	--cc-sn-line: color-mix( in srgb, var( --cc-sn-fg ) 20%, transparent );
	--cc-sn-btn-fg: var( --cc-btn-fg, #fff );
	display: flex;
	gap: .25rem;
	overflow-x: auto;
	scrollbar-width: thin;
}
.cc-step-nav__item {
	flex: 1 1 0;
	min-width: 0;
	position: relative;
	text-align: center;
}
.cc-step-nav__btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .35rem;
	width: 100%;
	padding: .3rem .35rem .1rem;
	background: none;
	border: 0;
	font: inherit;
	font-size: .78rem;
	line-height: 1.2;
	color: color-mix( in srgb, var( --cc-sn-fg ) 65%, transparent );
	cursor: pointer;
}
.cc-step-nav__num {
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: color-mix( in srgb, var( --cc-sn-fg ) 12%, transparent );
	color: var( --cc-sn-fg );
	font-weight: 700;
	font-size: .95rem;
}
.cc-step-nav__label { display: block; hyphens: manual; overflow-wrap: normal; word-break: keep-all; }
/* trait de liaison entre les pastilles */
.cc-step-nav__item + .cc-step-nav__item::before {
	content: "";
	position: absolute;
	top: 1.3rem;
	left: -50%;
	width: 100%;
	height: 2px;
	background: var( --cc-sn-line );
	z-index: 0;
}
.cc-step-nav__num { position: relative; z-index: 1; }

.cc-step-nav__item.is-current .cc-step-nav__btn { color: var( --cc-sn-fg ); font-weight: 600; }
.cc-step-nav__item.is-current .cc-step-nav__num {
	background: var( --cc-sn-accent );
	color: var( --cc-sn-btn-fg );
	box-shadow: 0 0 0 4px color-mix( in srgb, var( --cc-sn-accent ) 25%, transparent );
}
.cc-step-nav__item.is-done .cc-step-nav__num {
	background: color-mix( in srgb, var( --cc-sn-accent ) 22%, transparent );
	color: var( --cc-sn-accent );
}
.cc-step-nav__item.is-done .cc-step-nav__num {
	font-size: 0;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%232f6f4f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.5 3.5L13 4'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: center;
	background-size: 15px;
}

/* --- Actions Précédent / Suivant --- */
.cc-step-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .8rem;
	margin-top: 1.6rem;
	padding-top: 1.2rem;
	border-top: 1px solid color-mix( in srgb, var( --wp--preset--color--contrast, #1a1a1a ) 15%, transparent );
}
.cc-step-actions .ff_submit_btn_wrapper { margin: 0; }
.cc-step-btn {
	appearance: none;
	border: 0;
	border-radius: 999px;
	padding: .7rem 1.7rem;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
.cc-step-btn[hidden] { display: none; }
.cc-step-btn--next {
	background: var( --wp--preset--color--primary, #2f6f4f );
	color: var( --cc-btn-fg, #fff );
	margin-left: auto;
}
.cc-step-btn--prev {
	background: transparent;
	color: var( --wp--preset--color--contrast, #1a1a1a );
	box-shadow: inset 0 0 0 2px color-mix( in srgb, var( --wp--preset--color--contrast, #1a1a1a ) 35%, transparent );
}
.cc-step-btn--next:hover,
.cc-step-btn--next:focus-visible { background: var( --wp--preset--color--primary-dark, #245a3f ); }
.cc-step-btn--prev:hover,
.cc-step-btn--prev:focus-visible { background: color-mix( in srgb, var( --wp--preset--color--contrast, #1a1a1a ) 8%, transparent ); }

/* --- Champ non renseigné à cette étape --- */
.ff-el-group.cc-step-invalid {
	position: relative;
	margin-left: -.9rem;
	padding: .55rem 0 .55rem .9rem;
	border-left: 4px solid #d63638;
	border-radius: 0 6px 6px 0;
	background: color-mix( in srgb, #d63638 7%, transparent );
}
/* libellé souligné en rouge (utile pour les radios / cases, sans bordure d'input) */
.ff-el-group.cc-step-invalid > label,
.ff-el-group.cc-step-invalid .ff-el-input--label label {
	color: #b32b2d;
	text-decoration: underline;
	text-decoration-color: #d63638;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}
.ff-el-group.cc-step-invalid input,
.ff-el-group.cc-step-invalid select,
.ff-el-group.cc-step-invalid textarea {
	border-color: #d63638 !important;
	box-shadow: 0 0 0 1px #d63638;
}
.ff-el-group.cc-step-invalid input[type="radio"],
.ff-el-group.cc-step-invalid input[type="checkbox"] {
	accent-color: #d63638;
	outline: 2px solid #d63638;
	outline-offset: 2px;
	box-shadow: none;
}
/* .fluentform en préfixe pour battre le clearfix « .fluentform .ff-el-group:after ». */
.fluentform .ff-el-group.cc-step-invalid::after {
	content: "⚠ Cette réponse est obligatoire pour continuer.";
	display: block;
	clear: both;
	margin-top: .35rem;
	color: #b32b2d;
	font-size: .88rem;
	font-weight: 600;
}

/* --- Message de confirmation (après envoi) : très visible --- */
.fluentform_wrapper_4 .ff-message-success {
	margin: 1.5rem 0;
	padding: 2rem 1.75rem 2rem 4.25rem;
	background: #edfaef;
	border: 2px solid #46b450;
	border-left-width: 8px;
	border-radius: 12px;
	box-shadow: 0 10px 30px -12px rgba( 20, 98, 42, .35 );
	position: relative;
	color: #14351a;
	font-size: 1.2rem;
	line-height: 1.6;
}
.fluentform_wrapper_4 .ff-message-success::before {
	content: "";
	position: absolute;
	left: 1.4rem;
	top: 2rem;
	width: 2rem;
	height: 2rem;
	background: #46b450 url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.5 3.5L13 4'/%3E%3C/svg%3E" ) center / 1.15rem no-repeat;
	border-radius: 50%;
}
.fluentform_wrapper_4 .ff-message-success > *:first-child { margin-top: 0; }
.fluentform_wrapper_4 .ff-message-success > *:last-child { margin-bottom: 0; }

@media ( max-width: 600px ) {
	.fluentform_wrapper_4 .ff-message-success {
		padding: 1.5rem 1.1rem 1.5rem 1.1rem;
		font-size: 1.05rem;
	}
	.fluentform_wrapper_4 .ff-message-success::before {
		position: static;
		display: block;
		margin: 0 0 .75rem;
	}
}

/* --- Mobile --- */
@media ( max-width: 600px ) {
	.cc-step-nav { gap: 0; }
	.cc-step-nav__label { display: none; }
	.cc-step-nav__item + .cc-step-nav__item::before { top: 1rem; }
	.cc-step-nav__num { width: 1.7rem; height: 1.7rem; font-size: .8rem; }
	.cc-step-btn { flex: 1 1 100%; text-align: center; }
	.cc-step-btn--next { margin-left: 0; }
	.cc-step-actions .ff_submit_btn_wrapper { flex: 1 1 100%; }
	.cc-step-actions .ff_submit_btn_wrapper button { width: 100%; }
}