/*
 * Formulaire public [isation_onepage_form] : carte blanche, barre d'étapes, champs en cartes avec
 * icône, zones d'envoi de fichiers, répéteurs en lignes.
 * Couleurs et polices : variables du site (Oxygen) avec valeurs de repli, réglables sur .isop-form.
 * Media queries : breakpoints du site (1119, 1023, 767, 479 px).
 */

.isop-form {
	--isop-accent: var(--violet-vif, #9d6cf2);
	--isop-accent-hover: color-mix(in srgb, var(--isop-accent) 82%, var(--isop-title));
	--isop-accent-text: color-mix(in srgb, var(--isop-accent) 62%, var(--isop-title));
	--isop-title: var(--noir, #111111);
	--isop-text: var(--gris-8, #606e79);
	--isop-muted: var(--gris-6, #98a1a8);
	--isop-bg: var(--blanc, #ffffff);
	--isop-error: var(--rouge-erreur, #bd2b2b);
	--isop-faint: color-mix(in srgb, var(--isop-accent) 4%, var(--isop-bg));
	--isop-soft: color-mix(in srgb, var(--isop-accent) 9%, var(--isop-bg));
	--isop-soft-strong: color-mix(in srgb, var(--isop-accent) 26%, var(--isop-bg));
	--isop-border: color-mix(in srgb, var(--isop-accent) 12%, var(--gris-1, #eceeef));
	--isop-border-strong: color-mix(in srgb, var(--isop-accent) 30%, var(--gris-2, #dee1e3));
	--isop-ring: color-mix(in srgb, var(--isop-accent) 22%, transparent);
	--isop-shadow: color-mix(in srgb, var(--isop-accent) 20%, transparent);
	--isop-font-titles: var(--op-font-titles, inherit);
	--isop-font-text: var(--op-font-text, inherit);
	--isop-radius: 24px;
	--isop-field-radius: 16px;
	--isop-input-radius: 10px;
	--isop-icon-box: 46px;
	--isop-padding: 44px 30px 30px;
	--isop-steps-inset: 30px;
	--isop-i-type: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 7 4 4 20 4 20 7'/%3E%3Cline x1='9' x2='15' y1='20' y2='20'/%3E%3Cline x1='12' x2='12' y1='4' y2='20'/%3E%3C/svg%3E");
	--isop-i-lines: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 12H3'/%3E%3Cpath d='M17 18H3'/%3E%3Cpath d='M21 6H3'/%3E%3C/svg%3E");
	--isop-i-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2' ry='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21'/%3E%3C/svg%3E");
	--isop-i-chart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v16a2 2 0 0 0 2 2h16'/%3E%3Cpath d='M18 17V9'/%3E%3Cpath d='M13 17V5'/%3E%3Cpath d='M8 17v-3'/%3E%3C/svg%3E");
	--isop-i-list: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h.01'/%3E%3Cpath d='M3 18h.01'/%3E%3Cpath d='M3 6h.01'/%3E%3Cpath d='M8 12h13'/%3E%3Cpath d='M8 18h13'/%3E%3Cpath d='M8 6h13'/%3E%3C/svg%3E");
	--isop-i-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E");
	--isop-i-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E");
	--isop-i-palette: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='13.5' cy='6.5' r='.5' fill='black'/%3E%3Ccircle cx='17.5' cy='10.5' r='.5' fill='black'/%3E%3Ccircle cx='8.5' cy='7.5' r='.5' fill='black'/%3E%3Ccircle cx='6.5' cy='12.5' r='.5' fill='black'/%3E%3Cpath d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z'/%3E%3C/svg%3E");
	--isop-i-sliders: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='21' x2='14' y1='4' y2='4'/%3E%3Cline x1='10' x2='3' y1='4' y2='4'/%3E%3Cline x1='21' x2='12' y1='12' y2='12'/%3E%3Cline x1='8' x2='3' y1='12' y2='12'/%3E%3Cline x1='21' x2='16' y1='20' y2='20'/%3E%3Cline x1='12' x2='3' y1='20' y2='20'/%3E%3Cline x1='14' x2='14' y1='2' y2='6'/%3E%3Cline x1='8' x2='8' y1='10' y2='14'/%3E%3Cline x1='16' x2='16' y1='18' y2='22'/%3E%3C/svg%3E");
	--isop-i-toggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='12' x='2' y='6' rx='6' ry='6'/%3E%3Ccircle cx='16' cy='12' r='2'/%3E%3C/svg%3E");
	--isop-i-layout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='7' x='3' y='3' rx='1'/%3E%3Crect width='9' height='7' x='3' y='14' rx='1'/%3E%3Crect width='5' height='7' x='16' y='14' rx='1'/%3E%3C/svg%3E");
	--isop-i-sections: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Cpath d='M3 9h18'/%3E%3Cpath d='M3 15h18'/%3E%3C/svg%3E");
	--isop-i-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6'/%3E%3Cpath d='M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2'/%3E%3C/svg%3E");
	--isop-i-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E");
	--isop-i-plus-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 12h8'/%3E%3Cpath d='M12 8v8'/%3E%3C/svg%3E");
	--isop-i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");

	position: relative;
	z-index: 1;
	box-sizing: border-box;
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	padding: var(--isop-padding);
	border-radius: var(--isop-radius);
	background: var(--isop-bg);
	box-shadow: 0 30px 80px -40px var(--isop-shadow), 0 2px 10px -4px var(--isop-shadow);
	color: var(--isop-text);
	font-family: var(--isop-font-text);
	font-size: 15px;
	line-height: 1.5;
}

.isop-form *,
.isop-form *::before,
.isop-form *::after {
	box-sizing: border-box;
}

/* Les onglets ACF ne sont masqués qu'une fois les étapes initialisées par le JS. */
.isop-form[data-isop-ready] .acf-tab-wrap {
	display: none;
}

.isop-form [hidden] {
	display: none !important;
}

.isop-form input[type="checkbox"],
.isop-form input[type="radio"] {
	accent-color: var(--isop-accent);
}

/* ------------------------------------------------------------------ */
/* En-tête : surtitre, compteur, barre d'étapes, titre de l'étape      */
/* ------------------------------------------------------------------ */

.isop-steps {
	margin: 0 0 32px;
}

.isop-steps-top {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 16px;
	margin: 0 0 22px;
	padding: 0 var(--isop-steps-inset);
}

.isop-eyebrow,
.isop-steps-count {
	margin: 0;
	color: var(--isop-title);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
}

.isop-eyebrow {
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.isop-steps-count {
	letter-spacing: 0.06em;
}

.isop-stepper {
	display: flex;
	margin: 0;
	padding: 2px var(--isop-steps-inset) 6px;
	list-style: none;
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;
	/* Fondu sur les bords quand la barre défile (beaucoup de sections cochées). */
	-webkit-mask-image: linear-gradient(to right, transparent, #000 var(--isop-steps-inset), #000 calc(100% - var(--isop-steps-inset)), transparent);
	mask-image: linear-gradient(to right, transparent, #000 var(--isop-steps-inset), #000 calc(100% - var(--isop-steps-inset)), transparent);
}

.isop-stepper::-webkit-scrollbar {
	display: none;
}

.isop-stepper-item {
	position: relative;
	display: flex;
	flex: 1 0 88px;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	text-align: center;
}

/* Trait qui relie chaque étape à la précédente. */
.isop-stepper-item + .isop-stepper-item::before {
	content: "";
	position: absolute;
	top: 16px;
	right: calc(50% + 24px);
	left: calc(-50% + 24px);
	height: 2px;
	border-radius: 2px;
	background: var(--isop-soft);
}

.isop-stepper-item.is-done + .isop-stepper-item::before {
	background: var(--isop-border-strong);
}

.isop-stepper-dot {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin: 0;
	padding: 0;
	border: 1.5px solid var(--isop-border);
	border-radius: 50%;
	background: var(--isop-bg);
	color: var(--isop-muted);
	font: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
}

.isop-stepper-item.is-current .isop-stepper-dot {
	border-color: var(--isop-soft-strong);
	background: var(--isop-soft-strong);
	color: var(--isop-accent);
	font-weight: 600;
}

.isop-stepper-item.is-done .isop-stepper-dot {
	border-color: var(--isop-accent);
	background: var(--isop-accent);
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.isop-stepper-item.is-done .isop-stepper-dot::before {
	content: "";
	width: 16px;
	height: 16px;
	background: var(--isop-bg);
	-webkit-mask: var(--isop-i-check) center / contain no-repeat;
	mask: var(--isop-i-check) center / contain no-repeat;
}

.isop-stepper-item.is-done .isop-stepper-dot:hover {
	border-color: var(--isop-accent-hover);
	background: var(--isop-accent-hover);
}

.isop-stepper-dot:focus-visible {
	outline: 2px solid var(--isop-accent);
	outline-offset: 3px;
}

.isop-stepper-label {
	color: var(--isop-muted);
	font-size: 13.5px;
	line-height: 1.3;
	white-space: nowrap;
}

.isop-stepper-item.is-done .isop-stepper-label {
	color: var(--isop-text);
}

.isop-stepper-item.is-current .isop-stepper-label {
	color: var(--isop-accent);
	font-weight: 600;
}

.isop-step-head {
	margin: 44px auto 0;
	text-align: center;
}

.isop-step-title {
	margin: 0 0 12px;
	color: var(--isop-title);
	font-family: var(--isop-font-titles);
	font-size: 40px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

.isop-step-intro {
	max-width: 520px;
	margin: 0 auto;
	color: var(--isop-text);
	font-size: 17px;
	line-height: 1.55;
}

.isop-duration {
	margin: 10px 0 0;
	color: var(--isop-muted);
	font-size: 14px;
}

/* Annonce « site modifiable » (première étape d'une création). */
.isop-annonce {
	margin: 14px 0 0;
	padding: 12px 16px;
	border-left: 3px solid var(--isop-accent);
	border-radius: 0 var(--isop-input-radius) var(--isop-input-radius) 0;
	background: var(--isop-soft);
	color: var(--isop-title);
	font-size: 14px;
	line-height: 1.5;
}

.isop-annonce[hidden],
.isop-preview-open[hidden] {
	display: none;
}

/* Bandeau « Vous modifiez votre site ». */
.isop-edit-banner {
	margin: 0 0 20px;
	padding: 16px 20px;
	border: 1px solid var(--isop-border-strong);
	border-radius: var(--isop-field-radius);
	background: var(--isop-soft);
	color: var(--isop-text);
	font-size: 14px;
	line-height: 1.5;
}

.isop-edit-banner p {
	margin: 0 0 6px;
}

.isop-edit-banner-title {
	color: var(--isop-title);
	font-weight: 700;
	font-size: 16px;
}

.isop-edit-banner-link {
	color: var(--isop-accent-text);
	font-weight: 600;
	text-underline-offset: 3px;
}

/* Lien invalide ou site validé : message à la place du formulaire. */
.isop-edit-refusal .isop-submit {
	margin-left: 0;
	text-decoration: none;
}

/* Galerie actuelle (modification) : case « Garder » sous chaque image. */
.isop-gallery-current {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}

.isop-gallery-current label {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	cursor: pointer;
}

.isop-gallery-current img {
	display: block;
	width: 96px;
	height: 96px;
	border-radius: var(--isop-input-radius);
	object-fit: cover;
}

.isop-gallery-current label:has(input:not(:checked)) img {
	opacity: 0.35;
}

/* ------------------------------------------------------------------ */
/* Champs en cartes : icône à gauche, libellé, aide et saisie à droite */
/* ------------------------------------------------------------------ */

.isop-form .acf-form-fields > .acf-field {
	--isop-icon: var(--isop-i-type);
}

.isop-form .acf-form-fields > .acf-field:not(.acf-field-tab):not(.isop-section-choice) {
	position: relative;
	display: grid;
	grid-template-columns: var(--isop-icon-box) minmax(0, 1fr);
	align-content: start;
	column-gap: 20px;
	float: none;
	margin: 0 0 16px;
	padding: 22px 22px 22px 20px;
	border: 1px solid var(--isop-border);
	border-radius: var(--isop-field-radius);
	background: var(--isop-bg);
	transition: border-color 0.2s ease;
}

.isop-form .acf-form-fields > .acf-field:not(.acf-field-tab):not(.isop-section-choice)::before,
.isop-form .acf-form-fields > .acf-field.isop-section-first::before {
	content: "";
	grid-column: 1;
	grid-row: 1 / span 3;
	width: var(--isop-icon-box);
	height: var(--isop-icon-box);
	border-radius: 12px;
	background: var(--isop-soft);
}

.isop-form .acf-form-fields > .acf-field:not(.acf-field-tab):not(.isop-section-choice)::after,
.isop-form .acf-form-fields > .acf-field.isop-section-first::after {
	content: "";
	position: absolute;
	top: 22px;
	left: 20px;
	width: var(--isop-icon-box);
	height: var(--isop-icon-box);
	background: var(--isop-accent);
	-webkit-mask: var(--isop-icon) center / 20px 20px no-repeat;
	mask: var(--isop-icon) center / 20px 20px no-repeat;
	pointer-events: none;
}

.isop-form .acf-form-fields > .acf-field > .acf-label,
.isop-form .acf-form-fields > .acf-field > .acf-input {
	grid-column: 2;
	min-width: 0;
}

.isop-form .acf-form-fields > .acf-field > .acf-label {
	margin: 0 0 14px;
}

.isop-form .acf-form-fields > .acf-field > .acf-label label {
	display: inline;
	margin: 0;
	color: var(--isop-title);
	font-family: var(--isop-font-titles);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
}

.isop-form .acf-field .acf-label .description,
.isop-form .acf-field .acf-input > .description {
	display: block;
	margin: 4px 0 0;
	padding: 0;
	color: var(--isop-text);
	font-size: 14.5px;
	line-height: 1.5;
}

.isop-form .acf-field .acf-input > .description {
	margin-top: 8px;
	font-size: 13.5px;
}

.isop-form .acf-required {
	color: var(--isop-accent);
}

/* Icône selon le type de champ. */
.isop-form .acf-form-fields > .acf-field[data-type="textarea"],
.isop-form .acf-form-fields > .acf-field[data-type="wysiwyg"] {
	--isop-icon: var(--isop-i-lines);
}

.isop-form .acf-form-fields > .acf-field[data-type="image"],
.isop-form .acf-form-fields > .acf-field[data-type="file"],
.isop-form .acf-form-fields > .acf-field[data-type="gallery"],
.isop-form .acf-form-fields > .acf-field[data-type="isop_gallery_basic"] {
	--isop-icon: var(--isop-i-image);
}

.isop-form .acf-form-fields > .acf-field[data-type="repeater"] {
	--isop-icon: var(--isop-i-list);
}

.isop-form .acf-form-fields > .acf-field[data-type="repeater"][data-name*="chiffres"] {
	--isop-icon: var(--isop-i-chart);
}

.isop-form .acf-form-fields > .acf-field[data-type="url"] {
	--isop-icon: var(--isop-i-link);
}

.isop-form .acf-form-fields > .acf-field[data-type="email"] {
	--isop-icon: var(--isop-i-mail);
}

.isop-form .acf-form-fields > .acf-field[data-type="color_picker"] {
	--isop-icon: var(--isop-i-palette);
}

.isop-form .acf-form-fields > .acf-field[data-type="select"],
.isop-form .acf-form-fields > .acf-field[data-type="radio"],
.isop-form .acf-form-fields > .acf-field[data-type="button_group"],
.isop-form .acf-form-fields > .acf-field[data-type="message"] {
	--isop-icon: var(--isop-i-sliders);
}

.isop-form .acf-form-fields > .acf-field[data-type="true_false"] {
	--isop-icon: var(--isop-i-toggle);
}

.isop-form .acf-form-fields > .acf-field[data-type="isop_template_cards"] {
	--isop-icon: var(--isop-i-layout);
}

.isop-form .acf-form-fields > .acf-field.isop-section-choice {
	--isop-icon: var(--isop-i-sections);
}

/* ------------------------------------------------------------------ */
/* Saisie                                                              */
/* ------------------------------------------------------------------ */

.isop-form .acf-field input[type="text"]:not(.wp-color-picker),
.isop-form .acf-field input[type="email"],
.isop-form .acf-field input[type="url"],
.isop-form .acf-field input[type="number"],
.isop-form .acf-field input[type="tel"],
.isop-form .acf-field input[type="password"],
.isop-form .acf-field textarea,
.isop-form .acf-field select {
	display: block;
	width: 100%;
	min-height: 46px;
	margin: 0;
	padding: 11px 14px;
	border: 1px solid var(--isop-border);
	border-radius: var(--isop-input-radius);
	background: var(--isop-bg);
	box-shadow: none;
	color: var(--isop-title);
	font: inherit;
	font-size: 15px;
	line-height: 1.5;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.isop-form .acf-field textarea {
	min-height: 120px;
	resize: vertical;
}

.isop-form .acf-field input::placeholder,
.isop-form .acf-field textarea::placeholder {
	color: var(--isop-muted);
	opacity: 1;
}

.isop-form .acf-field input:hover,
.isop-form .acf-field textarea:hover,
.isop-form .acf-field select:hover {
	border-color: var(--isop-border-strong);
}

.isop-form .acf-field input:focus,
.isop-form .acf-field textarea:focus,
.isop-form .acf-field select:focus {
	border-color: var(--isop-accent);
	outline: none;
	box-shadow: 0 0 0 3px var(--isop-ring);
}

.isop-counter {
	display: block;
	margin: 6px 0 0;
	color: var(--isop-muted);
	font-size: 13px;
	text-align: right;
}

.isop-counter.is-full {
	color: var(--isop-accent);
}

/* Cases à cocher, boutons radio, choix groupés. */
.isop-form .acf-field .acf-true-false label,
.isop-form .acf-field .acf-radio-list label,
.isop-form .acf-field .acf-checkbox-list label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--isop-title);
	cursor: pointer;
}

.isop-form .acf-field input[type="checkbox"],
.isop-form .acf-field input[type="radio"] {
	width: 18px;
	height: 18px;
	margin: 0;
}

.isop-form .acf-button-group {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 8px;
}

.isop-form .acf-button-group label {
	margin: 0;
	padding: 8px 16px;
	border: 1px solid var(--isop-border);
	border-radius: 999px !important;
	background: var(--isop-bg);
	color: var(--isop-title);
	font-size: 14px;
	cursor: pointer;
}

.isop-form .acf-button-group label:hover {
	border-color: var(--isop-border-strong);
}

.isop-form .acf-button-group label.selected {
	border-color: var(--isop-accent);
	background: var(--isop-accent);
	color: var(--isop-bg);
}

.isop-form .acf-button-group input {
	position: absolute;
	opacity: 0;
}

/* ------------------------------------------------------------------ */
/* Zones d'envoi de fichiers                                           */
/* ------------------------------------------------------------------ */

.isop-form .isop-drop {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-height: 126px;
	margin: 0;
	padding: 24px 16px;
	border: 1.5px dashed var(--isop-border-strong);
	border-radius: 14px;
	background: var(--isop-faint);
	text-align: center;
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

/* Images d'exemple : bouton sous la zone d'envoi, et galerie en fenêtre (hors du formulaire). */
.isop-form .isop-banque-pick {
	display: block;
	margin: 10px auto 0;
	padding: 6px 12px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--isop-accent-text);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.isop-form .isop-banque-pick:hover,
.isop-form .isop-banque-pick:focus-visible {
	background: var(--isop-soft);
	text-decoration: none;
}

.isop-banque-open,
.isop-banque-open body {
	overflow: hidden;
}

.isop-banque {
	--isop-accent: var(--violet-vif, #9d6cf2);
	position: fixed;
	z-index: 100000;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(17, 17, 17, 0.55);
}

.isop-banque[hidden] {
	display: none;
}

.isop-banque-panel {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 880px;
	max-height: calc(100vh - 48px);
	padding: 24px;
	border-radius: 20px;
	background: var(--blanc, #ffffff);
	box-shadow: 0 24px 60px -20px rgba(17, 17, 17, 0.45);
}

.isop-banque-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.isop-banque-title {
	margin: 0;
	color: var(--noir, #111111);
	font-family: var(--op-font-titles, inherit);
	font-size: 20px;
}

.isop-banque-close {
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	background: color-mix(in srgb, var(--isop-accent) 9%, #ffffff);
	color: var(--noir, #111111);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.isop-banque-hint {
	margin: 6px 0 16px;
	color: var(--gris-8, #606e79);
	font-size: 14px;
}

.isop-banque-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.isop-banque-item {
	display: block;
	width: 100%;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 12px;
	background: none;
	overflow: hidden;
	cursor: pointer;
}

.isop-banque-item img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.isop-banque-grid.is-logos .isop-banque-item img {
	aspect-ratio: 3 / 2;
	padding: 16px;
	background: #f4f4f5;
	object-fit: contain;
}

.isop-banque-body {
	min-height: 0;
	overflow-y: auto;
}

.isop-banque-hint[hidden] {
	display: none;
}

.isop-apercu .isop-banque-panel {
	max-width: 960px;
}

.isop-apercu-image {
	display: block;
	width: 100%;
	height: auto;
	margin-top: 12px;
	border-radius: 12px;
}

/* Aperçu du site (one-page temporaire dans un cadre). */
.isop-apercu-site .isop-banque-panel {
	max-width: 1200px;
	height: calc(100vh - 48px);
}

.isop-apercu-site .isop-banque-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 12px;
	overflow: hidden;
}

.isop-site-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.isop-site-sizes {
	display: inline-flex;
	padding: 3px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--isop-accent) 9%, #ffffff);
}

.isop-site-size,
.isop-site-refresh {
	padding: 7px 16px;
	border: 0;
	border-radius: 999px;
	background: none;
	color: var(--noir, #111111);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.isop-site-size[aria-pressed="true"] {
	background: var(--blanc, #ffffff);
	box-shadow: 0 2px 6px -2px rgba(17, 17, 17, 0.25);
}

.isop-site-refresh {
	border: 1.5px solid var(--isop-accent);
}

.isop-site-size:focus-visible,
.isop-site-refresh:focus-visible {
	outline: 2px solid var(--isop-accent);
	outline-offset: 2px;
}

.isop-site-stage {
	position: relative;
	display: flex;
	flex: 1;
	justify-content: center;
	min-height: 0;
	border-radius: 12px;
	background: #f4f4f5;
	overflow: hidden;
}

.isop-site-frame {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	background: var(--blanc, #ffffff);
	transition: opacity 0.2s ease;
}

.isop-site-stage.is-mobile .isop-site-frame {
	width: 390px;
	max-width: 100%;
	border-right: 1px solid #dcdcde;
	border-left: 1px solid #dcdcde;
}

.isop-site-stage.is-loading .isop-site-frame {
	opacity: 0.3;
}

.isop-site-status {
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 50%;
	max-width: calc(100% - 32px);
	margin: 0;
	padding: 12px 20px;
	border-radius: 12px;
	background: var(--blanc, #ffffff);
	box-shadow: 0 8px 24px -12px rgba(17, 17, 17, 0.35);
	color: var(--noir, #111111);
	font-size: 14px;
	text-align: center;
	transform: translate(-50%, -50%);
}

.isop-site-status[hidden] {
	display: none;
}

.isop-banque-item:hover,
.isop-banque-item:focus-visible {
	border-color: var(--isop-accent);
	outline: none;
}

@media (max-width: 479px) {
	.isop-banque {
		padding: 12px;
	}

	.isop-banque-panel {
		max-height: calc(100vh - 24px);
		padding: 16px;
	}

	.isop-banque-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Champ natif transparent sur toute la zone : clic, clavier et glisser-déposer du navigateur. */
.isop-form .isop-drop input[type="file"] {
	position: absolute;
	z-index: 1;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.isop-form .isop-drop:hover,
.isop-form .isop-drop.is-dragover {
	border-color: var(--isop-accent);
	background: var(--isop-soft);
}

.isop-form .isop-drop:focus-within {
	outline: 2px solid var(--isop-accent);
	outline-offset: 2px;
}

.isop-drop-icon {
	position: relative;
	width: 34px;
	height: 34px;
	margin: 0 0 8px;
	border-radius: 50%;
	background: var(--isop-accent);
	box-shadow: 0 6px 16px -6px var(--isop-accent);
}

.isop-drop-icon::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--isop-bg);
	-webkit-mask: var(--isop-i-plus) center / 18px 18px no-repeat;
	mask: var(--isop-i-plus) center / 18px 18px no-repeat;
}

.isop-drop-thumb {
	width: 72px;
	height: 72px;
	margin: 0 0 8px;
	border-radius: 10px;
	object-fit: cover;
}

.isop-drop-title {
	color: var(--isop-accent-text);
	font-family: var(--isop-font-titles);
	font-size: 16px;
	font-weight: 600;
}

.isop-drop-hint {
	color: var(--isop-muted);
	font-size: 13px;
}

.isop-drop-file {
	color: var(--isop-title);
	font-size: 13.5px;
	font-weight: 500;
	word-break: break-all;
}

.isop-drop-file:empty {
	display: none;
}

.isop-form .isop-drop.is-filled {
	border-style: solid;
	border-color: var(--isop-accent);
}

/* ------------------------------------------------------------------ */
/* Répéteurs : lignes de saisie, corbeille, bouton d'ajout en pointillé */
/* ------------------------------------------------------------------ */

.isop-form .acf-repeater {
	padding: 10px;
	border: 1px solid var(--isop-border);
	border-radius: 14px;
	background: var(--isop-faint);
}

.isop-form .acf-repeater > .acf-table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: separate;
	border-spacing: 0 10px;
	background: transparent;
	box-shadow: none;
}

.isop-form .acf-repeater.-empty > .acf-table {
	display: none;
}

/* En-têtes de colonnes gardés pour les lecteurs d'écran seulement. */
.isop-form .acf-repeater > .acf-table > thead {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.isop-form .acf-repeater > .acf-table > tbody > tr > td,
.isop-form .acf-repeater > .acf-table > thead > tr > th {
	padding: 0 5px;
	border: 0;
	background: transparent;
	vertical-align: middle;
}

.isop-form .acf-repeater .acf-row-handle.order {
	display: none;
}

.isop-form .acf-repeater .acf-row-handle.remove {
	width: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	vertical-align: middle;
}

.isop-form .acf-repeater .acf-row-handle .acf-icon.-plus,
.isop-form .acf-repeater .acf-row-handle .acf-icon.-duplicate {
	display: none !important;
}

.isop-form .acf-repeater .acf-row-handle .acf-icon.-minus {
	position: static;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin: 0 auto;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--isop-muted);
	transition: color 0.2s ease, background-color 0.2s ease;
}

.isop-form .acf-repeater .acf-row-handle .acf-icon.-minus::before {
	content: "";
	display: block;
	width: 18px;
	height: 18px;
	margin: 0;
	background: currentColor;
	font-family: inherit;
	-webkit-mask: var(--isop-i-trash) center / contain no-repeat;
	mask: var(--isop-i-trash) center / contain no-repeat;
}

.isop-form .acf-repeater .acf-row-handle .acf-icon.-minus:hover,
.isop-form .acf-repeater .acf-row-handle .acf-icon.-minus:focus-visible {
	background: var(--isop-soft);
	color: var(--isop-error);
}

/* Disposition en blocs : chaque ligne devient une sous-carte (ACF force padding: 0 sur la cellule,
   l'espace intérieur est donc porté par les sous-champs). */
.isop-form .acf-repeater.-block > .acf-table > tbody > tr > td.acf-fields {
	border: 1px solid var(--isop-border);
	border-radius: 12px;
	background: var(--isop-bg);
}

.isop-form .acf-repeater.-block .acf-fields > .acf-field {
	padding: 14px 16px 0;
	border: 0;
}

.isop-form .acf-repeater.-block .acf-fields > .acf-field:last-child {
	padding-bottom: 16px;
}

.isop-form .acf-repeater.-block .acf-fields > .acf-field > .acf-label {
	margin: 0 0 6px;
}

.isop-form .acf-repeater.-block .acf-fields > .acf-field > .acf-label label {
	color: var(--isop-title);
	font-size: 14px;
	font-weight: 600;
}

.isop-form .acf-repeater .acf-actions {
	margin: 0;
	padding: 0 5px;
	text-align: left;
}

.isop-form .acf-repeater.-empty .acf-actions {
	padding: 0;
}

.isop-form .acf-repeater .acf-actions .acf-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	float: none;
	width: 100%;
	height: auto;
	min-height: 44px;
	margin: 0;
	padding: 10px 16px;
	border: 1.5px dashed var(--isop-border-strong);
	border-radius: var(--isop-input-radius);
	background: var(--isop-bg);
	box-shadow: none;
	color: var(--isop-accent);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	text-shadow: none;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.isop-form .acf-repeater .acf-actions .acf-button::before {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	background: currentColor;
	-webkit-mask: var(--isop-i-plus-circle) center / contain no-repeat;
	mask: var(--isop-i-plus-circle) center / contain no-repeat;
}

.isop-form .acf-repeater .acf-actions .acf-button:hover,
.isop-form .acf-repeater .acf-actions .acf-button:focus-visible {
	border-color: var(--isop-accent);
	background: var(--isop-soft);
	color: var(--isop-accent);
}

.isop-form .acf-repeater .acf-actions .acf-button.disabled {
	display: none;
}

/* ------------------------------------------------------------------ */
/* Phase Identité : modèles en cartes                                  */
/* ------------------------------------------------------------------ */

.isop-templates {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 14px;
}

.isop-template-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 10px 10px 14px;
	border: 1.5px solid var(--isop-border);
	border-radius: 14px;
	background: var(--isop-bg);
	cursor: pointer;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.isop-template-card:hover {
	border-color: var(--isop-border-strong);
}

.isop-template-card.is-selected {
	border-color: var(--isop-accent);
	box-shadow: 0 0 0 3px var(--isop-ring);
}

.isop-template-card:focus-within {
	outline: 2px solid var(--isop-accent);
	outline-offset: 2px;
}

/* Radio visuellement masqué mais toujours accessible au clavier et aux lecteurs d'écran. */
.isop-template-card input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.isop-template-card img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	margin: 0 0 6px;
	border-radius: 8px;
	background: var(--isop-soft);
	object-fit: cover;
	object-position: top center;
}

/* Bouton « Voir l'aperçu » : au-dessus du radio de la carte, n'en change pas la sélection. */
.isop-template-card .isop-template-zoom {
	position: relative;
	z-index: 1;
	align-self: flex-start;
	margin: 6px 4px 0;
	padding: 4px 10px;
	border: 1px solid var(--isop-border-strong);
	border-radius: 999px;
	background: var(--isop-bg);
	color: var(--isop-accent-text);
	font: inherit;
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
}

.isop-template-card .isop-template-zoom:hover,
.isop-template-card .isop-template-zoom:focus-visible {
	border-color: var(--isop-accent);
	background: var(--isop-soft);
}

.isop-template-name {
	padding: 0 4px;
	color: var(--isop-title);
	font-weight: 600;
}

.isop-template-desc {
	padding: 0 4px;
	color: var(--isop-text);
	font-size: 13.5px;
}

/* ------------------------------------------------------------------ */
/* Phase Identité : sections en liste de cases dans une même carte     */
/* ------------------------------------------------------------------ */

.isop-form .acf-form-fields > .acf-field.isop-section-choice {
	position: relative;
	display: block;
	float: none;
	margin: 0;
	padding: 5px 22px 5px calc(20px + var(--isop-icon-box) + 20px);
	border: solid var(--isop-border);
	border-width: 0 1px;
	border-radius: 0;
	background: var(--isop-bg);
}

.isop-form .acf-form-fields > .acf-field.isop-section-choice:not(.isop-section-first) > .acf-label {
	display: none;
}

.isop-form .acf-form-fields > .acf-field.isop-section-first {
	padding-top: 22px;
	border-top-width: 1px;
	border-radius: var(--isop-field-radius) var(--isop-field-radius) 0 0;
}

.isop-form .acf-form-fields > .acf-field.isop-section-first::before {
	position: absolute;
	top: 22px;
	left: 20px;
}

/* Dernière case visible : ferme la carte. */
.isop-form .acf-form-fields > .acf-field.isop-section-choice:not(:has(~ .isop-section-choice:not([hidden]))) {
	margin-bottom: 16px;
	padding-bottom: 22px;
	border-bottom-width: 1px;
	border-radius: 0 0 var(--isop-field-radius) var(--isop-field-radius);
}

.isop-form .acf-form-fields > .acf-field.isop-section-first:not(:has(~ .isop-section-choice:not([hidden]))) {
	border-radius: var(--isop-field-radius);
}

.acf-field.isop-section-choice label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
}

.acf-field.isop-section-choice.is-locked label {
	cursor: not-allowed;
	opacity: 0.75;
}

.acf-field.isop-section-choice.is-locked .message::after {
	content: " 🔒";
}

/* ------------------------------------------------------------------ */
/* Phase Style : palettes et polices en un clic                        */
/* ------------------------------------------------------------------ */

.isop-preset-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.isop-preset {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	padding: 10px 14px;
	border: 1.5px solid var(--isop-border);
	border-radius: 12px;
	background: var(--isop-bg);
	color: var(--isop-title);
	font: inherit;
	font-size: 14px;
	cursor: pointer;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.isop-preset:hover {
	border-color: var(--isop-border-strong);
}

.isop-preset[aria-pressed="true"] {
	border-color: var(--isop-accent);
	box-shadow: 0 0 0 3px var(--isop-ring);
}

.isop-swatches {
	display: flex;
}

.isop-swatch {
	width: 20px;
	height: 20px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 50%;
}

.isop-swatch + .isop-swatch {
	margin-left: -5px;
}

.isop-preset-name {
	font-weight: 600;
}

.isop-preset-detail {
	color: var(--isop-text);
	font-size: 13px;
}

/* Phase Style : aperçu de l'animation (effets identiques à assets/css/onepage.css). */
.isop-anim-preview {
	margin-top: 12px;
	padding: 12px;
	border: 1px solid var(--isop-border);
	border-radius: 12px;
	background: var(--isop-faint);
}

.isop-anim-title {
	margin: 0 0 8px;
	color: var(--isop-text);
	font-size: 13px;
	font-weight: 600;
}

.isop-anim-stage {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	overflow: hidden;
}

.isop-anim-block {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	border-radius: 8px;
	background: var(--isop-accent);
	color: var(--isop-bg);
	font-size: 13px;
	font-weight: 600;
}

@media (prefers-reduced-motion: no-preference) {
	.isop-anim-stage.is-playing .isop-anim-block {
		animation: 0.6s ease-out var(--isop-delay, 0s) both;
	}

	.isop-anim-stage.is-playing[data-effect="fade"] .isop-anim-block {
		animation-name: isop-fade;
	}

	.isop-anim-stage.is-playing[data-effect="slide-up"] .isop-anim-block {
		animation-name: isop-slide-up;
	}

	.isop-anim-stage.is-playing[data-effect="zoom"] .isop-anim-block {
		animation-name: isop-zoom;
	}
}

@keyframes isop-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes isop-slide-up {
	from { opacity: 0; transform: translateY(24px); }
	to { opacity: 1; transform: none; }
}

@keyframes isop-zoom {
	from { opacity: 0; transform: scale(0.94); }
	to { opacity: 1; transform: none; }
}

.isop-anim-replay {
	margin-top: 8px;
	padding: 6px 14px;
	border: 1px solid var(--isop-border-strong);
	border-radius: 999px;
	background: var(--isop-bg);
	color: var(--isop-title);
	font: inherit;
	font-size: 13px;
	cursor: pointer;
}

/* ------------------------------------------------------------------ */
/* Aide contextuelle « ? »                                             */
/* ------------------------------------------------------------------ */

.isop-help-host {
	position: relative;
}

.isop-help {
	display: inline-flex;
	vertical-align: middle;
	margin-left: 8px;
}

.isop-help-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 1.5px solid var(--isop-border-strong);
	border-radius: 50%;
	background: var(--isop-bg);
	color: var(--isop-text);
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	cursor: help;
}

.isop-help-btn:hover,
.isop-help-btn[aria-expanded="true"] {
	border-color: var(--isop-accent);
	background: var(--isop-soft);
	color: var(--isop-accent);
}

.isop-help-btn:focus-visible {
	outline: 2px solid var(--isop-accent);
	outline-offset: 2px;
}

.isop-help-bubble {
	position: absolute;
	z-index: 20;
	top: calc(100% + 6px);
	left: 0;
	display: block;
	width: max-content;
	max-width: min(22rem, 100%);
	padding: 10px 12px;
	border-radius: 10px;
	background: var(--isop-title);
	box-shadow: 0 10px 30px -10px var(--isop-shadow);
	color: var(--isop-bg);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.45;
}

/* ------------------------------------------------------------------ */
/* Erreurs                                                             */
/* ------------------------------------------------------------------ */

.isop-form .acf-form-fields > .acf-field.isop-has-error,
.isop-form .acf-form-fields > .acf-field.acf-error {
	border-color: var(--isop-error);
}

.isop-has-error > .acf-label label {
	color: var(--isop-error) !important;
}

.isop-form .acf-notice.-error {
	margin: 0 0 10px;
	padding: 8px 12px;
	border: 0;
	border-radius: 8px;
	background: color-mix(in srgb, var(--isop-error) 8%, var(--isop-bg));
	color: var(--isop-error);
	font-size: 14px;
}

.isop-form .acf-notice.-error p {
	margin: 0;
}

/* ------------------------------------------------------------------ */
/* Navigation                                                          */
/* ------------------------------------------------------------------ */

.isop-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
	margin-top: 24px;
}

.isop-prev,
.isop-next,
.isop-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	margin: 0;
	padding: 12px 30px;
	border: 1.5px solid;
	border-radius: 999px;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.isop-prev {
	border-color: var(--isop-border-strong);
	background: var(--isop-faint);
	color: var(--isop-title);
}

.isop-prev:hover {
	border-color: var(--isop-accent);
	color: var(--isop-accent);
}

.isop-next,
.isop-submit {
	margin-left: auto;
	border-color: var(--isop-accent);
	background: var(--isop-accent);
	box-shadow: 0 10px 24px -12px var(--isop-accent);
	color: var(--isop-bg);
}

.isop-next:hover,
.isop-submit:hover {
	border-color: var(--isop-accent-hover);
	background: var(--isop-accent-hover);
}

.isop-skip {
	margin: 0 0 0 auto;
	padding: 6px 2px;
	border: 0;
	background: none;
	color: var(--isop-text);
	font: inherit;
	font-size: 14px;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.isop-skip:hover {
	color: var(--isop-accent);
}

.isop-skip:not([hidden]) ~ .isop-next,
.isop-skip:not([hidden]) ~ .isop-submit,
.isop-skip:not([hidden]) ~ .isop-preview-open,
.isop-preview-open:not([hidden]) ~ .isop-next,
.isop-preview-open:not([hidden]) ~ .isop-submit {
	margin-left: 0;
}

/* « Voir l'aperçu » : bouton secondaire, juste avant « Continuer ». */
.isop-preview-open {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	margin: 0 0 0 auto;
	padding: 12px 22px;
	border: 1.5px solid var(--isop-accent);
	border-radius: 999px;
	background: var(--isop-bg);
	color: var(--isop-accent-text);
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.isop-preview-open:hover {
	background: var(--isop-soft);
}

.isop-preview-open:focus-visible {
	outline: 2px solid var(--isop-accent);
	outline-offset: 3px;
}

.isop-prev:focus-visible,
.isop-next:focus-visible,
.isop-submit:focus-visible,
.isop-skip:focus-visible {
	outline: 2px solid var(--isop-accent);
	outline-offset: 3px;
}

.isop-arrow {
	flex: none;
	width: 18px;
	height: 18px;
}

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */

@media (max-width: 1023px) {
	.isop-step-title {
		font-size: 34px;
	}
}

@media (max-width: 767px) {
	.isop-form {
		--isop-radius: 20px;
		--isop-icon-box: 40px;
		--isop-padding: 30px 18px 22px;
		--isop-steps-inset: 4px;
	}

	.isop-stepper {
		padding-bottom: 30px;
	}

	.isop-stepper-item {
		flex-basis: 58px;
	}

	/* Seul le nom de l'étape courante reste affiché, sous sa pastille, sans élargir l'étape. */
	.isop-stepper-label {
		position: absolute;
		top: 44px;
		left: 50%;
		transform: translateX(-50%);
	}

	.isop-stepper-item:not(.is-current) .isop-stepper-label {
		display: none;
	}

	.isop-step-head {
		margin-top: 30px;
	}

	.isop-step-title {
		font-size: 28px;
	}

	.isop-step-intro {
		font-size: 16px;
	}

	.isop-form .acf-form-fields > .acf-field:not(.acf-field-tab):not(.isop-section-choice) {
		column-gap: 14px;
		padding: 18px 16px;
	}

	.isop-form .acf-form-fields > .acf-field:not(.acf-field-tab):not(.isop-section-choice)::after,
	.isop-form .acf-form-fields > .acf-field.isop-section-first::after {
		top: 18px;
		left: 16px;
	}

	.isop-form .acf-form-fields > .acf-field.isop-section-choice {
		padding-right: 16px;
		padding-left: calc(16px + var(--isop-icon-box) + 14px);
	}

	.isop-form .acf-form-fields > .acf-field.isop-section-first::before {
		top: 18px;
		left: 16px;
	}
}

@media (max-width: 479px) {
	.isop-form {
		--isop-padding: 24px 14px 18px;
	}

	.isop-step-title {
		font-size: 25px;
	}

	/* Icônes des champs masquées : toute la largeur pour la saisie. */
	.isop-form .acf-form-fields > .acf-field:not(.acf-field-tab):not(.isop-section-choice) {
		grid-template-columns: minmax(0, 1fr);
	}

	.isop-form .acf-form-fields > .acf-field:not(.acf-field-tab):not(.isop-section-choice)::before,
	.isop-form .acf-form-fields > .acf-field:not(.acf-field-tab):not(.isop-section-choice)::after,
	.isop-form .acf-form-fields > .acf-field.isop-section-first::before,
	.isop-form .acf-form-fields > .acf-field.isop-section-first::after {
		display: none;
	}

	.isop-form .acf-form-fields > .acf-field > .acf-label,
	.isop-form .acf-form-fields > .acf-field > .acf-input {
		grid-column: 1;
	}

	.isop-form .acf-form-fields > .acf-field.isop-section-choice {
		padding-left: 16px;
	}

	.isop-form .acf-repeater {
		padding: 6px;
	}

	.isop-form .acf-repeater > .acf-table > tbody > tr > td {
		padding: 0 3px;
	}

	.isop-prev,
	.isop-next,
	.isop-submit {
		padding: 12px 20px;
	}

	.isop-skip {
		order: 3;
		flex-basis: 100%;
		margin: 0;
		text-align: center;
	}

	.isop-skip:not([hidden]) ~ .isop-next,
	.isop-skip:not([hidden]) ~ .isop-submit {
		margin-left: auto;
	}
}

/* Rappel à la dernière étape : logo ou images manquants (en-tête de l'étape). */
.isop-images-reminder {
	--isop-warning: var(--orange-vif, #f47c3c);
	max-width: 720px;
	margin: 22px auto 0;
	padding: 14px 18px;
	border: 1px solid color-mix(in srgb, var(--isop-warning) 45%, var(--isop-bg));
	border-left-width: 4px;
	border-radius: var(--isop-input-radius);
	background: color-mix(in srgb, var(--isop-warning) 8%, var(--isop-bg));
	color: var(--isop-title);
	font-size: 14px;
	line-height: 1.5;
	text-align: left;
}

.isop-images-reminder[hidden] {
	display: none;
}

.isop-images-reminder p {
	margin: 0 0 6px;
}

.isop-images-reminder-title {
	font-weight: 700;
}

.isop-images-reminder-link {
	padding: 0;
	border: 0;
	background: none;
	color: var(--isop-accent-text);
	font: inherit;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.isop-images-reminder .isop-images-reminder-hint {
	margin: 0;
	color: var(--isop-text);
}

/* Avertissement de contraste (phase Style), sous la couleur de fond. */
.isop-contrast {
	--isop-warning: var(--orange-vif, #f47c3c);
	margin: 14px 0 0;
	padding: 14px 16px;
	border: 1px solid color-mix(in srgb, var(--isop-warning) 45%, var(--isop-bg));
	border-left-width: 4px;
	border-radius: var(--isop-input-radius);
	background: color-mix(in srgb, var(--isop-warning) 8%, var(--isop-bg));
	color: var(--isop-title);
	font-size: 14px;
	line-height: 1.5;
}

.isop-contrast[hidden] {
	display: none;
}

.isop-contrast-title {
	margin: 0 0 6px;
	font-weight: 700;
}

.isop-contrast-list {
	margin: 0 0 6px;
	padding-left: 1.2em;
}

.isop-contrast-hint {
	margin: 0;
	color: var(--isop-text);
}

/* ------------------------------------------------------------------ */
/* Aide IA (onepage-ia.js)                                             */
/* ------------------------------------------------------------------ */

/*
 * Encart de l'étape Identité et bouton « Compléter avec l'IA » des étapes de contenus, dans
 * l'en-tête de l'étape. Boutons : briques du site (isation-btn), aux couleurs de la modale.
 */
.isop-ia-barre {
	--op-color-primary: var(--violet-vif, #9d6cf2);
	--op-color-secondary: var(--violet-texte, #7250b0);
	display: flex;
	justify-content: center;
	margin: 26px 0 0;
}

.isop-ia-barre[hidden],
.isop-ia-barre [hidden] {
	display: none;
}

.isop-ia-invite {
	display: flex;
	align-items: center;
	gap: 18px;
	width: 100%;
	max-width: 720px;
	padding: 18px 22px;
	border: 1px solid var(--isop-soft-strong);
	border-radius: var(--isop-field-radius);
	background: radial-gradient(circle at 92% 10%, var(--isop-soft) 0%, transparent 55%), var(--isop-faint);
	text-align: left;
}

.isop-ia-invite-icone {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: var(--isop-icon-box);
	height: var(--isop-icon-box);
	border-radius: 14px;
	background: var(--isop-soft);
	color: var(--isop-accent);
}

.isop-ia-invite-icone svg {
	width: 24px;
	height: 24px;
}

.isop-ia-invite-textes {
	flex: 1 1 auto;
	min-width: 0;
}

.isop-ia-invite-titre {
	margin: 0 0 4px;
	color: var(--isop-title);
	font-family: var(--isop-font-titles);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
}

.isop-ia-invite-texte {
	margin: 0;
	color: var(--isop-text);
	font-size: 15px;
	line-height: 1.5;
}

.isop-ia-invite-bouton {
	flex: 0 0 auto;
}

.isop-ia-section {
	gap: 8px;
}

.isop-ia-section svg {
	width: 18px;
	height: 18px;
}

/* Modale : les classes isation-assistant-* fixent un display qui l'emporte sur l'attribut hidden. */
dialog.isop-ia [hidden] {
	display: none;
}

/* Contenus ajoutés dans le fil de la modale (variables --assistant-* de .isation-assistant). */
.isop-ia-reco {
	display: flex;
	gap: 18px;
	align-items: center;
	max-width: 560px;
	padding: 14px;
	border: 1px solid var(--assistant-bulle-bordure, #e6dcfb);
	border-radius: 18px;
	background: var(--blanc, #ffffff);
}

.isop-ia-reco-image {
	flex: 0 0 auto;
	width: 150px;
	height: auto;
	aspect-ratio: 8 / 5;
	border-radius: 12px;
	object-fit: cover;
	background: var(--assistant-bulle-fond, #f8f5fe);
}

.isop-ia-reco-corps {
	min-width: 0;
}

.isop-ia-reco-surtitre {
	margin: 0 0 2px;
	color: var(--assistant-accent, #9d6cf2);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.isop-ia-reco-nom {
	margin: 0 0 4px;
	color: var(--noir, #111111);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.3;
}

.isop-ia-reco-desc {
	margin: 0 0 10px;
	color: var(--assistant-texte, #444444);
	font-size: 0.9375rem;
	line-height: 1.45;
}

.isop-ia-reco-sections {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.isop-ia-reco-sections li {
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--assistant-bulle-fond, #f8f5fe);
	color: var(--violet-texte, #7250b0);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
}

.isop-ia-manque {
	max-width: 560px;
	margin: 0;
	padding: 12px 16px;
	border-left: 3px solid var(--orange-vif, #f47c3c);
	border-radius: 10px;
	background: color-mix(in srgb, var(--orange-vif, #f47c3c) 8%, var(--blanc, #ffffff));
	color: var(--assistant-texte, #444444);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.isop-ia-manque strong {
	color: var(--noir, #111111);
}

.isop-ia-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.isop-ia-actions .isation-btn:disabled {
	cursor: default;
	opacity: 0.55;
}

.isop-ia-autres {
	margin: 0;
	color: var(--assistant-texte, #444444);
	font-size: 0.875rem;
}

.isop-ia-autre {
	margin: 0 10px 0 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--violet-texte, #7250b0);
	font: inherit;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

@media (max-width: 767px) {
	.isop-ia-invite {
		flex-wrap: wrap;
		padding: 16px;
	}

	.isop-ia-invite-textes {
		flex-basis: calc(100% - var(--isop-icon-box) - 18px);
	}

	.isop-ia-invite-bouton {
		width: 100%;
	}

	.isop-ia-reco {
		flex-direction: column;
		align-items: stretch;
	}

	.isop-ia-reco-image {
		width: 100%;
	}
}