/* =========================================================================
   KaptyForm — styles front. Léger, responsive, sans dépendance.
   Couleurs pilotées par les variables --kf-bar / --kf-accent (inline).
   ========================================================================= */

.kaptyform {
	--kf-bar: #4cc3f0;
	--kf-bar-2: #38a9e4;
	--kf-track: #eef2fa;
	--kf-accent: #4cc3f0;
	--kf-radius: 12px;
	--kf-border: #e3e3ec;
	--kf-text: #2d2d3a;
	--kf-muted: #8a8a9a;
	--kf-error: #e74c3c;
	max-width: 640px;
	margin: 0 auto;
	font-family: inherit;
	color: var(--kf-text);
	box-sizing: border-box;
}
.kaptyform *,
.kaptyform *::before,
.kaptyform *::after {
	box-sizing: border-box;
}

/* L'attribut [hidden] doit TOUJOURS l'emporter : certains thèmes déclarent
   un `display` sur button/div, ce qui annule le display:none du navigateur
   (boutons Suivant/Envoyer visibles en même temps, étapes superposées…). */
.kaptyform [hidden] {
	display: none !important;
}

.kaptyform__title {
	margin: 0 0 1.2em;
	font-size: 1.5em;
	line-height: 1.25;
}

/* ----- Barre de progression -------------------------------------------- */
.kaptyform__progress {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 1.8em;
}
.kaptyform__progress-track {
	flex: 1;
	height: 10px;
	background: var(--kf-track, #eef2fa);
	border-radius: 999px;
	overflow: visible;
}
.kaptyform__progress-fill {
	height: 100%;
	width: 0;
	min-width: 10px;
	border-radius: 999px;
	/* Dégradé horizontal entre les deux couleurs de barre. */
	background-image: linear-gradient( 90deg, var(--kf-bar), var(--kf-bar-2, var(--kf-bar)) );
	transition: width 0.55s cubic-bezier( 0.22, 1, 0.36, 1 );
}
.kaptyform__progress-label {
	min-width: 3em;
	text-align: right;
	font-size: 0.85em;
	font-weight: 600;
	color: var(--kf-accent);
	font-variant-numeric: tabular-nums;
}

/* ----- Étapes ----------------------------------------------------------- */
/* Courbe d'accélération douce (identique au modèle de référence). */
.kaptyform {
	--kf-ease: cubic-bezier( 0.22, 0.61, 0.36, 1 );
	--kf-in: 0.42s;
	--kf-out: 0.2s;
}
/* Aucune animation permanente sur l'étape : elle n'anime QUE pendant une
   transition (classes is-entering / is-leaving posées par le JS). Sinon,
   au retrait de la classe de transition, une animation de base se rejouerait
   sur une étape déjà visible (effet vertical parasite). */
.kaptyform__step {
	will-change: opacity, transform;
}
.kaptyform__step-title {
	margin: 0 0 1em;
	font-size: 1.1em;
	color: var(--kf-text);
}

/* Sortie : fondu + léger glissement dans le sens de la navigation. */
.kaptyform__step.is-leaving-next { animation: kaptyform-out-left var(--kf-out) ease-in forwards; }
.kaptyform__step.is-leaving-prev { animation: kaptyform-out-right var(--kf-out) ease-in forwards; }
/* Entrée : fondu + glissement depuis le côté opposé. */
.kaptyform__step.is-entering-next { animation: kaptyform-in-right var(--kf-in) var(--kf-ease) both; }
.kaptyform__step.is-entering-prev { animation: kaptyform-in-left var(--kf-in) var(--kf-ease) both; }

/* Fondu pur (opacité seule, aucun déplacement) pour les champs. */
@keyframes kaptyform-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes kaptyform-out-left {
	from { opacity: 1; transform: none; }
	to   { opacity: 0; transform: translateX( -18px ); }
}
@keyframes kaptyform-out-right {
	from { opacity: 1; transform: none; }
	to   { opacity: 0; transform: translateX( 18px ); }
}
@keyframes kaptyform-in-right {
	from { opacity: 0; transform: translateX( 26px ); }
	to   { opacity: 1; transform: none; }
}
@keyframes kaptyform-in-left {
	from { opacity: 0; transform: translateX( -26px ); }
	to   { opacity: 1; transform: none; }
}

/* Accessibilité : pas d'animation si l'utilisateur la refuse. */
@media ( prefers-reduced-motion: reduce ) {
	.kaptyform__step,
	.kaptyform__step.is-leaving-next,
	.kaptyform__step.is-leaving-prev,
	.kaptyform__step.is-entering-next,
	.kaptyform__step.is-entering-prev,
	.kaptyform__field {
		animation: none !important;
	}
	.kaptyform__progress-fill { transition: none !important; }
}

/* ----- Grille des champs (largeurs) ------------------------------------ */
.kaptyform__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0 18px;
}
.kaptyform__field {
	margin-bottom: 1.1em;
	animation: kaptyform-fade-in 0.3s ease both;
	/* grow/shrink séparés du basis pour que les classes de largeur priment. */
	flex-grow: 0;
	flex-shrink: 1;
	flex-basis: 100%;
	max-width: 100%;
	min-width: 0;
}
/* Largeurs : on retire la gouttière correspondante du flex-basis.
   width ET flex-basis pour battre tout CSS de thème/Elementor. */
.kaptyform__row > .kaptyform__field--w-full       { flex-basis: 100%; max-width: 100%; }
.kaptyform__row > .kaptyform__field--w-half       { flex-basis: calc(50% - 9px); max-width: calc(50% - 9px); }
.kaptyform__row > .kaptyform__field--w-third      { flex-basis: calc(33.333% - 12px); max-width: calc(33.333% - 12px); }
.kaptyform__row > .kaptyform__field--w-two_thirds { flex-basis: calc(66.666% - 6px); max-width: calc(66.666% - 6px); }
.kaptyform__row > .kaptyform__field--w-quarter    { flex-basis: calc(25% - 13.5px); max-width: calc(25% - 13.5px); }

/* Champs masqués par condition : ne pas occuper de place dans la grille. */
.kaptyform__field[hidden] { display: none; }

@media ( max-width: 600px ) {
	/* Sur mobile, tout repasse en pleine largeur. */
	.kaptyform__field { flex-basis: 100% !important; }
}
.kaptyform__label {
	display: block;
	margin-bottom: 0.45em;
	font-weight: 600;
	font-size: 0.95em;
}
.kaptyform__req { color: var(--kf-error); }

.kaptyform__input {
	width: 100%;
	padding: 0.75em 0.9em;
	border: 1.5px solid var(--kf-border);
	border-radius: var(--kf-radius);
	font: inherit;
	color: var(--kf-text);
	background: #fff;
	transition: border-color 0.2s, box-shadow 0.2s;
}
.kaptyform__input:focus {
	outline: none;
	border-color: var(--kf-accent);
	box-shadow: 0 0 0 3px color-mix( in srgb, var(--kf-accent) 18%, transparent );
}
textarea.kaptyform__input { resize: vertical; min-height: 110px; }

.kaptyform__options {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6em;
}
.kaptyform__option {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.6em 0.9em;
	border: 1.5px solid var(--kf-border);
	border-radius: var(--kf-radius);
	cursor: pointer;
	transition: border-color 0.2s, background 0.2s;
	font-size: 0.95em;
}
.kaptyform__option:hover { border-color: var(--kf-accent); }
.kaptyform__option input { accent-color: var(--kf-accent); }
.kaptyform__option:has( input:checked ) {
	border-color: var(--kf-accent);
	background: color-mix( in srgb, var(--kf-accent) 8%, #fff );
}

/* ----- Cartes à icônes -------------------------------------------------- */
/* Colonnes et largeur passent par des variables plutôt que par des propriétés
   directes. Elementor ne fait qu'écrire la variable : le rendu ne dépend donc
   plus de l'ordre de chargement des feuilles de style, ce qui rend l'aperçu
   fidèle dans l'éditeur comme sur le site.
   Chaîne de priorité : réglage Elementor > nombre choisi dans le
   constructeur (classe --colsN) > 2 colonnes. */
.kaptyform__cards {
	display: grid;
	gap: var(--kf-cards-gap, 12px);
	grid-template-columns: repeat( var(--kf-cards-cols, var(--kf-cards-cols-default, 2)), minmax( 0, 1fr ) );
	max-width: var(--kf-cards-max-w, 100%);
	margin-left: var(--kf-cards-ml, 0);
	margin-right: var(--kf-cards-mr, 0);
}
.kaptyform__cards--cols1 { --kf-cards-cols-default: 1; }
.kaptyform__cards--cols2 { --kf-cards-cols-default: 2; }
.kaptyform__cards--cols3 { --kf-cards-cols-default: 3; }
.kaptyform__cards--cols4 { --kf-cards-cols-default: 4; }
/* Sur mobile, les cartes s'empilent par défaut (une par ligne). On agit sur la
   valeur PAR DÉFAUT : un réglage explicite dans Elementor reste prioritaire,
   quel que soit l'appareil. */
@media ( max-width: 600px ) {
	.kaptyform__cards {
		--kf-cards-cols-default: 1;
	}
}

.kaptyform__card {
	--kf-card-img-h: 130px;
	--kf-card-ico-size: 30px;
	--kf-card-veil: rgba( 0, 0, 0, .42 );
	position: relative;
	overflow: hidden;
	appearance: none;
	cursor: pointer;
	font: inherit;
	text-align: left;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 1em 1.1em;
	border: 1.5px solid var(--kf-border);
	border-radius: var(--kf-radius);
	background: #fff;
	color: var(--kf-text);
	transition: border-color .18s, box-shadow .18s, transform .12s, background .18s;
}
.kaptyform__card:hover {
	/* Variables surchargeables ; Elementor peut aussi écraser directement. */
	border-color: var(--kf-card-border-hover, var(--kf-accent));
	background-color: var(--kf-card-bg-hover, #fff);
	transform: translateY( var(--kf-card-lift, -2px) );
}
.kaptyform__card.is-selected {
	border-color: var(--kf-accent);
	background: color-mix( in srgb, var(--kf-accent) 7%, #fff );
	box-shadow: 0 0 0 3px color-mix( in srgb, var(--kf-accent) 18%, transparent );
}
.kaptyform__card-label { font-weight: 600; font-size: 0.97em; }

/* --- Style « icône + libellé » --- */
.kaptyform__card-ico {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--kf-accent);
}
.kaptyform__card-ico img,
.kaptyform__card-ico svg {
	width: var(--kf-card-ico-size);
	height: var(--kf-card-ico-size);
	object-fit: contain;
	display: block;
}

/* --- Style « image en haut » --- */
.kaptyform__cards--image-top .kaptyform__card {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	padding: 0;
	text-align: center;
}
.kaptyform__cards--image-top .kaptyform__card-img {
	display: block;
	width: 100%;
	height: var(--kf-card-img-h);
	overflow: hidden;
	background: #f1f2f6;
}
.kaptyform__cards--image-top .kaptyform__card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .35s ease;
}
.kaptyform__cards--image-top .kaptyform__card:hover .kaptyform__card-img img {
	transform: scale( 1.05 );
}
.kaptyform__cards--image-top .kaptyform__card-label {
	padding: 0.85em 1em;
}

/* --- Style « image en fond » --- */
.kaptyform__cards--image-bg .kaptyform__card {
	min-height: var(--kf-card-img-h);
	align-items: flex-end;
	padding: 1.1em;
	border-color: transparent;
	color: #fff;
}
.kaptyform__card-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: transform .4s ease;
	z-index: 0;
}
.kaptyform__card-veil {
	position: absolute;
	inset: 0;
	background: var(--kf-card-veil);
	transition: background .25s ease;
	z-index: 1;
}
.kaptyform__cards--image-bg .kaptyform__card-label {
	position: relative;
	z-index: 2;
	font-size: 1.05em;
	text-shadow: 0 1px 8px rgba( 0, 0, 0, .35 );
}
.kaptyform__cards--image-bg .kaptyform__card:hover .kaptyform__card-bg { transform: scale( 1.06 ); }
.kaptyform__cards--image-bg .kaptyform__card.is-selected {
	background: transparent;
	border-color: var(--kf-accent);
	box-shadow: 0 0 0 3px var(--kf-accent);
}
.kaptyform__cards--image-bg .kaptyform__card.is-selected .kaptyform__card-veil {
	background: color-mix( in srgb, var(--kf-accent) 55%, rgba( 0, 0, 0, .35 ) );
}

@supports not ( background: color-mix( in srgb, red 50%, blue ) ) {
	.kaptyform__card.is-selected { background: #f6f5ff; box-shadow: 0 0 0 3px rgba( 108, 92, 231, .18 ); }
}

/* Sous-titre d'étape.
   Marges via variables : le bloc de renfort plus bas a la même spécificité
   que le CSS généré par Elementor, les variables évitent tout conflit. */
.kaptyform__step-sub {
	/* Longhands volontaires : une var() dans le raccourci `margin` n'est
	   pas résolue par tous les moteurs. */
	margin-top: var(--kf-sub-mt, -0.6em);
	margin-bottom: var(--kf-sub-mb, 1.2em);
	margin-left: 0;
	margin-right: 0;
	color: var(--kf-muted);
	font-size: 0.95em;
	line-height: 1.5;
}

/* Bouton désactivé (validation live) */
.kaptyform__btn:disabled,
.kaptyform__btn.is-disabled {
	opacity: 0.45;
	cursor: not-allowed;
	transform: none !important;
	box-shadow: none;
}

/* Erreurs */
.kaptyform__field.has-error .kaptyform__input { border-color: var(--kf-error); }
.kaptyform__field.has-error .kaptyform__card { border-color: var(--kf-error); }
.kaptyform__error {
	display: block;
	margin-top: 0.35em;
	color: var(--kf-error);
	font-size: 0.82em;
	min-height: 1em;
}

/* Honeypot caché */
.kaptyform__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ----- Navigation / boutons -------------------------------------------- */
.kaptyform__nav {
	display: flex;
	align-items: center;
	gap: 0.8em;
	margin-top: 1.4em;
	/* L'alignement des boutons se règle ici (Elementor → Alignements). */
	justify-content: var(--kf-nav-align, space-between);
	flex-wrap: wrap;
}
.kaptyform__btn {
	appearance: none;
	border: none;
	cursor: pointer;
	font: inherit;
	font-weight: 600;
	padding: 0.8em 1.6em;
	border-radius: var(--kf-radius);
	transition: transform 0.12s ease, box-shadow 0.2s, background 0.2s, opacity 0.2s;
}
.kaptyform__btn--next,
.kaptyform__btn--submit {
	color: #fff;
	background: var(--kf-accent);
	/* Ombre désactivée par défaut (--kf-btn-shadow = none). Elementor peut la
	   réactiver via une valeur de box-shadow personnalisée. */
	box-shadow: var(--kf-btn-shadow, none);
}
.kaptyform__btn--next:hover,
.kaptyform__btn--submit:hover { transform: translateY( -2px ); }
.kaptyform__btn--next:active,
.kaptyform__btn--submit:active { transform: translateY( 0 ); }
.kaptyform__btn--prev {
	background: transparent;
	color: var(--kf-muted);
	border: 1.5px solid var(--kf-border);
}
.kaptyform__btn--prev:hover { color: var(--kf-text); border-color: var(--kf-muted); }

.kaptyform__btn.is-loading {
	position: relative;
	color: transparent !important;
	pointer-events: none;
}
.kaptyform__btn.is-loading::after {
	content: "";
	position: absolute;
	width: 1.1em;
	height: 1.1em;
	top: 50%;
	left: 50%;
	margin: -0.55em 0 0 -0.55em;
	border: 2px solid rgba( 255, 255, 255, 0.5 );
	border-top-color: #fff;
	border-radius: 50%;
	animation: kaptyform-spin 0.6s linear infinite;
}
@keyframes kaptyform-spin { to { transform: rotate( 360deg ); } }

/* ----- Message global -------------------------------------------------- */
.kaptyform__message {
	margin-top: 1em;
	font-size: 0.9em;
	min-height: 1em;
}
.kaptyform__message.is-error { color: var(--kf-error); }

/* ----- Écran de succès ------------------------------------------------- */
.kaptyform__success {
	text-align: center;
	padding: 2em 1em;
	animation: kaptyform-fade-in 0.4s ease both;
}
.kaptyform__success-text {
	font-size: 1.2em;
	font-weight: 600;
	margin: 0.8em 0 0;
	color: var(--kf-text);
}
.kaptyform__check svg {
	width: 84px;
	height: 84px;
}
.kaptyform__check circle {
	stroke: var(--kf-accent);
	stroke-width: 2;
	stroke-dasharray: 166;
	stroke-dashoffset: 166;
	animation: kaptyform-stroke 0.6s cubic-bezier( 0.65, 0, 0.45, 1 ) forwards;
}
.kaptyform__check path {
	stroke: var(--kf-accent);
	stroke-width: 4;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 48;
	stroke-dashoffset: 48;
	animation: kaptyform-stroke 0.4s cubic-bezier( 0.65, 0, 0.45, 1 ) 0.5s forwards;
}
@keyframes kaptyform-stroke { to { stroke-dashoffset: 0; } }

/* ----- Responsive ------------------------------------------------------- */
@media ( max-width: 480px ) {
	.kaptyform__nav { flex-direction: column-reverse; }
	.kaptyform__btn { width: 100%; }
	.kaptyform__btn--next,
	.kaptyform__btn--submit { margin-left: 0; }
}

/* Fallback color-mix pour vieux navigateurs : couleur pleine. */
@supports not ( background: color-mix( in srgb, red 50%, blue ) ) {
	.kaptyform__progress-fill { background: var(--kf-bar); }
	.kaptyform__input:focus { box-shadow: 0 0 0 3px rgba( 108, 92, 231, 0.18 ); }
}

/* ----- Bloc de texte libre --------------------------------------------- */
.kaptyform__field--html { margin-bottom: 1.1em; }
.kaptyform__html {
	font-size: 0.92em;
	line-height: 1.6;
	color: var(--kf-muted);
}
.kaptyform__html a { color: var(--kf-accent); text-decoration: underline; }
.kaptyform__html p:last-child { margin-bottom: 0; }

/* ----- Alignement par champ (responsive) -------------------------------
   Points de rupture alignés sur Elementor : tablette ≤1024, mobile ≤767.
   Aligne le contenu du champ : libellé, saisie, options, cartes, boutons.
   --------------------------------------------------------------------- */
.kaptyform__field--al-left   { text-align: left; }
.kaptyform__field--al-center { text-align: center; }
.kaptyform__field--al-right  { text-align: right; }

/* Les éléments en flex/grid doivent suivre l'alignement du texte. */
.kaptyform__field--al-center .kaptyform__options,
.kaptyform__field--al-center .kaptyform__html { justify-content: center; }
.kaptyform__field--al-right .kaptyform__options,
.kaptyform__field--al-right .kaptyform__html { justify-content: flex-end; }
.kaptyform__field--al-center .kaptyform__card { justify-content: center; text-align: center; }
.kaptyform__field--al-right .kaptyform__card  { justify-content: flex-end; text-align: right; }

/* Une saisie centrée : on centre le champ lui-même, pas juste son texte. */
/* Alignement du texte saisi. Deux niveaux :
   --kf-input-ta-field : réglage propre à UN champ (constructeur) ;
   --kf-input-ta       : réglage global (Elementor).
   Le champ l'emporte sur le global, le global sur la valeur de départ. */
.kaptyform__field--al-left .kaptyform__input   { --kf-input-ta-field: left; }
.kaptyform__field--al-center .kaptyform__input { --kf-input-ta-field: center; }
.kaptyform__field--al-right .kaptyform__input  { --kf-input-ta-field: right; }

@media ( max-width: 1024px ) {
	.kaptyform__field--al-t-left   { text-align: left; }
	.kaptyform__field--al-t-center { text-align: center; }
	.kaptyform__field--al-t-right  { text-align: right; }
	.kaptyform__field--al-t-center .kaptyform__options,
	.kaptyform__field--al-t-center .kaptyform__html { justify-content: center; }
	.kaptyform__field--al-t-right .kaptyform__options,
	.kaptyform__field--al-t-right .kaptyform__html { justify-content: flex-end; }
	.kaptyform__field--al-t-center .kaptyform__card { justify-content: center; text-align: center; }
	.kaptyform__field--al-t-right .kaptyform__card  { justify-content: flex-end; text-align: right; }
	.kaptyform__field--al-t-left .kaptyform__input   { --kf-input-ta-field: left; }
	.kaptyform__field--al-t-center .kaptyform__input { --kf-input-ta-field: center; }
	.kaptyform__field--al-t-right .kaptyform__input  { --kf-input-ta-field: right; }
}

@media ( max-width: 767px ) {
	.kaptyform__field--al-m-left   { text-align: left; }
	.kaptyform__field--al-m-center { text-align: center; }
	.kaptyform__field--al-m-right  { text-align: right; }
	.kaptyform__field--al-m-center .kaptyform__options,
	.kaptyform__field--al-m-center .kaptyform__html { justify-content: center; }
	.kaptyform__field--al-m-right .kaptyform__options,
	.kaptyform__field--al-m-right .kaptyform__html { justify-content: flex-end; }
	.kaptyform__field--al-m-center .kaptyform__card { justify-content: center; text-align: center; }
	.kaptyform__field--al-m-right .kaptyform__card  { justify-content: flex-end; text-align: right; }
	.kaptyform__field--al-m-left .kaptyform__input   { --kf-input-ta-field: left; }
	.kaptyform__field--al-m-center .kaptyform__input { --kf-input-ta-field: center; }
	.kaptyform__field--al-m-right .kaptyform__input  { --kf-input-ta-field: right; }
}

/* ----- Séparateur ------------------------------------------------------- */
.kaptyform__field--separator { margin-bottom: 1.4em; }
.kaptyform__sep {
	border: none;
	border-top-width: 1px;
	border-top-color: var(--kf-border);
	margin: 0.6em 0;
}
.kaptyform__sep--solid  { border-top-style: solid; }
.kaptyform__sep--dashed { border-top-style: dashed; }
.kaptyform__sep--dotted { border-top-style: dotted; }

/* ----- Liste d'icônes --------------------------------------------------- */
.kaptyform__ilist {
	--kf-ilist-ico: 22px;
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 14px 22px;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}
.kaptyform__ilist--cols1 { grid-template-columns: 1fr; }
.kaptyform__ilist--cols2 { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
.kaptyform__ilist--cols3 { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); }
.kaptyform__ilist--cols4 { grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); }
@media ( max-width: 600px ) {
	.kaptyform__ilist { grid-template-columns: 1fr; }
}
.kaptyform__ilist-item {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 0.95em;
	font-weight: 600;
	color: var(--kf-text);
	line-height: 1.35;
}
.kaptyform__ilist-ico {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
}
.kaptyform__ilist-ico img {
	width: var(--kf-ilist-ico);
	height: var(--kf-ilist-ico);
	object-fit: contain;
	display: block;
}
/* Centré : on centre chaque élément dans sa colonne. */
.kaptyform__field--al-center .kaptyform__ilist-item { justify-content: center; }
.kaptyform__field--al-right .kaptyform__ilist-item  { justify-content: flex-end; }

/* =========================================================================
   RENFORCEMENT — protège l'apparence du formulaire contre le CSS du thème.
   On redéclare l'essentiel avec le préfixe .kaptyform (spécificité 0,2,0),
   ce qui bat les règles de thème habituelles tout en laissant Elementor
   (dont les sélecteurs générés sont au moins aussi spécifiques et chargés
   après) garder la main sur la personnalisation.
   ========================================================================= */

/* --- Saisie --- */
.kaptyform .kaptyform__input,
.kaptyform input.kaptyform__input,
.kaptyform textarea.kaptyform__input,
.kaptyform select.kaptyform__input {
	width: 100%;
	max-width: 100%;
	padding: 0.75em 0.9em;
	border: 1.5px solid var(--kf-border);
	border-radius: var(--kf-radius);
	font: inherit;
	line-height: 1.4;
	color: var(--kf-text);
	background-color: #fff;
	background-image: none;
	box-shadow: none;
	outline: none;
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
	height: auto;
	min-height: 0;
	text-transform: none;
	letter-spacing: normal;
}
/* La flèche n'est plus une image de fond du <select> : elle est dessinée sur
   l'enveloppe .kaptyform__select (voir plus bas), ce qui la rend recolorable
   et redimensionnable depuis Elementor. */
.kaptyform .kaptyform__input:focus {
	border-color: var(--kf-accent);
	box-shadow: 0 0 0 3px color-mix( in srgb, var(--kf-accent) 18%, transparent );
	background-color: #fff;
	outline: none;
}
.kaptyform textarea.kaptyform__input { min-height: 110px; }

/* --- Libellés --- */
.kaptyform .kaptyform__label {
	display: block;
	margin-top: var(--kf-label-mt, 0);
	margin-bottom: var(--kf-label-mb, 0.45em);
	padding: 0;
	font-weight: 600;
	font-size: 0.95em;
	line-height: 1.35;
	text-transform: none;
	letter-spacing: normal;
	color: inherit;
}

/* --- Boutons (le thème ne doit ni colorer ni redimensionner) --- */
.kaptyform .kaptyform__btn {
	appearance: none;
	-webkit-appearance: none;
	display: inline-block;
	width: auto;
	height: auto;
	min-height: 0;
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	text-transform: none;
	letter-spacing: normal;
	text-decoration: none;
	text-shadow: none;
	cursor: pointer;
	border: none;
	border-radius: var(--kf-radius);
	padding: 0.8em 1.6em;
	margin: 0;
	background-image: none;
}
.kaptyform .kaptyform__btn--next,
.kaptyform .kaptyform__btn--submit {
	color: #fff;
	background-color: var(--kf-accent);
}
.kaptyform .kaptyform__btn--prev {
	color: var(--kf-muted);
	background-color: transparent;
	border: 1.5px solid var(--kf-border);
}
.kaptyform .kaptyform__btn--prev:hover {
	color: var(--kf-text);
	border-color: var(--kf-muted);
	background-color: transparent;
}
.kaptyform .kaptyform__nav { margin-top: 1.4em; }

/* --- Options (radio / cases) --- */
.kaptyform .kaptyform__option {
	background-color: #fff;
	color: inherit;
	font-weight: 400;
	text-transform: none;
}

/* --- Cartes --- */
.kaptyform .kaptyform__card {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	height: auto;
	min-height: 0;
	font: inherit;
	line-height: 1.35;
	text-transform: none;
	letter-spacing: normal;
	text-shadow: none;
	margin: 0;
	background-image: none;
}

/* --- Listes --- */
.kaptyform .kaptyform__ilist { list-style: none; margin: 0; padding: 0; }
.kaptyform .kaptyform__ilist-item { margin: 0; padding: 0; list-style: none; }



/* =========================================================================
   MISE EN PAGE DU CADRE
   Largeur : pilotée par --kf-max-w (Elementor → Conteneur → Largeur max).
   Hauteur : totalement adaptative (le bloc épouse le contenu de l'étape).
   Le contenu est centré verticalement dans l'espace disponible.
   ========================================================================= */
/* Le wrapper du widget Elementor doit occuper toute la largeur disponible :
   sinon, dans un conteneur en « largeur adaptée au contenu », le formulaire
   se comprime à la largeur de son contenu. */
.elementor-widget-kaptyform,
.elementor-widget-kaptyform > .elementor-widget-container {
	width: 100%;
	flex-grow: 1;
	align-self: stretch;
}

.kaptyform {
	/* Largeur pilotable ; 100% par défaut pour suivre le conteneur. */
	width: 100%;
	max-width: var(--kf-max-w, 640px);
	margin-left: auto;
	margin-right: auto;
}

/* Le conteneur d'étapes s'adapte au contenu, sans hauteur imposée. */
.kaptyform .kaptyform__steps {
	position: relative;
	display: block;
	min-height: var(--kf-min-h, 0);
}

/* Une étape occupe la hauteur disponible et centre son contenu
   verticalement (utile quand une hauteur minimale est définie). */
.kaptyform .kaptyform__step {
	display: flex;
	flex-direction: column;
	justify-content: var(--kf-v-align, center);
	min-height: inherit;
	width: 100%;
	max-width: 100%;
}

/* Le formulaire devient une colonne flex : ses enfants (étapes visibles ou
   écran de succès) peuvent alors occuper la hauteur restante et y centrer
   leur contenu. Sans cela, l'écran de succès se collait en haut du bloc. */
.kaptyform {
	display: flex;
	flex-direction: column;
	min-height: var(--kf-min-h, 0);
}
.kaptyform > .kaptyform__form {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}
.kaptyform > .kaptyform__form > .kaptyform__steps {
	flex: 1 1 auto;
}

/* Écran de succès : centré horizontalement, et verticalement dans la hauteur
   disponible. Il peut avoir sa propre hauteur minimale, indépendante de celle
   du conteneur. */
.kaptyform .kaptyform__success {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: var(--kf-succ-h, center);
	justify-content: var(--kf-succ-v, center);
	text-align: center;
	min-height: var(--kf-succ-min-h, var(--kf-min-h, 0));
	width: 100%;
}
.kaptyform .kaptyform__success[hidden] { display: none !important; }
.kaptyform .kaptyform__success-text {
	margin: 0.8em 0 0;
	max-width: 34em;
}
.kaptyform .kaptyform__check { display: flex; justify-content: center; }

/* =========================================================================
   CONSENTEMENT RGPD — case à cocher entièrement personnalisable
   La case native est masquée (mais reste accessible au clavier et aux
   lecteurs d'écran) ; le carré et la coche sont dessinés sur le LABEL, ce qui
   laisse le texte en flux normal — le lien reste donc DANS la phrase.
   ========================================================================= */
/* inline-block (et non block) : le libellé forme un bloc autonome, que le
   text-align du champ peut donc centrer ou pousser à droite d'un seul tenant,
   case comprise. La phrase, elle, reste alignée à gauche à l'intérieur. */
.kaptyform .kaptyform__consent {
	position: relative;
	display: inline-block;
	max-width: 100%;
	padding-left: calc(var(--kf-cb-size, 1.15em) + var(--kf-cb-gap, 0.7em));
	cursor: pointer;
	line-height: 1.5;
	text-align: left;
	vertical-align: top;
}

/* Case native : invisible mais focusable. */
.kaptyform .kaptyform__consent > input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	margin: 0;
	pointer-events: none;
}

/* Le texte reste en flux normal : le lien s'insère dans la phrase. */
.kaptyform .kaptyform__consent-text {
	display: inline;
}

/* Carré dessiné en CSS, positionné dans la marge réservée par le padding. */
.kaptyform .kaptyform__consent::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc((1.5em - var(--kf-cb-size, 1.15em)) / 2);
	box-sizing: border-box;
	width: var(--kf-cb-size, 1.15em);
	height: var(--kf-cb-size, 1.15em);
	border: var(--kf-cb-bw, 2px) solid var(--kf-cb-border, currentColor);
	border-radius: var(--kf-cb-radius, 4px);
	background: var(--kf-cb-bg, transparent);
	transition: background-color 0.18s ease, border-color 0.18s ease;
}

/* État coché : fond + cadre. */
.kaptyform .kaptyform__consent:has(> input[type="checkbox"]:checked)::before {
	border-color: var(--kf-cb-border-checked, var(--kf-cb-border, currentColor));
	background: var(--kf-cb-bg-checked, var(--kf-accent, #6366f1));
}

/* La coche : deux bords tracés puis pivotés. */
.kaptyform .kaptyform__consent::after {
	content: "";
	position: absolute;
	left: calc(var(--kf-cb-size, 1.15em) * 0.34);
	top: calc((1.5em - var(--kf-cb-size, 1.15em)) / 2 + var(--kf-cb-size, 1.15em) * 0.18);
	width: calc(var(--kf-cb-size, 1.15em) * 0.3);
	height: calc(var(--kf-cb-size, 1.15em) * 0.55);
	border: solid var(--kf-cb-check, #ffffff);
	border-width: 0 var(--kf-cb-check-bw, 2px) var(--kf-cb-check-bw, 2px) 0;
	transform: rotate(45deg) scale(0.6);
	opacity: 0;
	transition: opacity 0.15s ease, transform 0.18s cubic-bezier(0.2, 0.9, 0.3, 1.4);
	pointer-events: none;
}
.kaptyform .kaptyform__consent:has(> input[type="checkbox"]:checked)::after {
	opacity: 1;
	transform: rotate(45deg) scale(1);
}

/* Focus clavier : anneau discret autour de la case. */
.kaptyform .kaptyform__consent:has(> input[type="checkbox"]:focus-visible)::before {
	outline: 2px solid var(--kf-cb-bg-checked, var(--kf-accent, #6366f1));
	outline-offset: 2px;
}

/* Lien de la politique de confidentialité : inline, dans la phrase. */
.kaptyform .kaptyform__consent-text a {
	color: var(--kf-cb-link, var(--kf-accent, #6366f1));
	text-decoration: var(--kf-cb-link-deco, underline);
	text-underline-offset: 2px;
	transition: color 0.18s ease;
}
.kaptyform .kaptyform__consent-text a:hover,
.kaptyform .kaptyform__consent-text a:focus {
	color: var(--kf-cb-link-hover, var(--kf-cb-link, var(--kf-accent, #6366f1)));
}

/* Erreur : la case passe en rouge. */
.kaptyform .kaptyform__field--consent.has-error .kaptyform__consent::before {
	border-color: var(--kf-error, #e74c3c);
}

/* =========================================================================
   LARGEURS PILOTABLES (Elementor)
   Chaque bloc est simplement rétréci puis repositionné par des marges auto.
   Aucun changement de type d'affichage : la mise en page existante (grille
   des champs, cartes, consentement) n'est pas touchée.
   ========================================================================= */

/* ----- Barre de progression -------------------------------------------- */
.kaptyform .kaptyform__progress {
	width: var(--kf-bar-w, 100%);
	max-width: 100%;
	margin-left: var(--kf-bar-ml, auto);
	margin-right: var(--kf-bar-mr, auto);
}

/* ----- Champs de saisie ------------------------------------------------- */
/* Même liste de sélecteurs que le bloc de renfort plus haut : sans cela sa
   spécificité l'emporterait et --kf-input-w n'aurait aucun effet. */
.kaptyform .kaptyform__input,
.kaptyform input.kaptyform__input,
.kaptyform textarea.kaptyform__input,
.kaptyform select.kaptyform__input {
	width: var(--kf-input-w, 100%);
	max-width: 100%;
	margin-left: var(--kf-input-ml, auto);
	margin-right: var(--kf-input-mr, auto);
}
/* Message d'erreur : toujours calé sur le champ. */
.kaptyform .kaptyform__field > .kaptyform__error {
	width: var(--kf-input-w, 100%);
	max-width: 100%;
	margin-left: var(--kf-input-ml, auto);
	margin-right: var(--kf-input-mr, auto);
}

/* Libellé : largeur INDÉPENDANTE de celle du champ.
   Sans réglage propre, il suit le champ comme avant ; dès que
   --kf-label-w est défini, il s'en détache (utile pour une question longue
   au-dessus d'un champ étroit, ou l'inverse). */
.kaptyform .kaptyform__field > .kaptyform__label {
	width: var(--kf-label-w, var(--kf-input-w, 100%));
	max-width: 100%;
	margin-left: var(--kf-label-ml, var(--kf-input-ml, auto));
	margin-right: var(--kf-label-mr, var(--kf-input-mr, auto));
}

/* ----- Zone de message (textarea) uniquement ---------------------------- */
/* Par défaut elle suit les autres champs ; --kf-textarea-w la détache. */
.kaptyform textarea.kaptyform__input {
	width: var(--kf-textarea-w, var(--kf-input-w, 100%));
	min-height: var(--kf-textarea-h, 110px);
	resize: var(--kf-textarea-resize, vertical);
	/* Position propre au paragraphe ; à défaut il suit les autres champs. */
	margin-left: var(--kf-textarea-ml, var(--kf-input-ml, auto));
	margin-right: var(--kf-textarea-mr, var(--kf-input-mr, auto));
}
.kaptyform .kaptyform__field:has( > textarea.kaptyform__input ) > .kaptyform__error {
	width: var(--kf-textarea-w, var(--kf-input-w, 100%));
	margin-left: var(--kf-textarea-ml, var(--kf-input-ml, auto));
	margin-right: var(--kf-textarea-mr, var(--kf-input-mr, auto));
}
/* Le réglage propre au libellé reste prioritaire, même sur une zone de message. */
.kaptyform .kaptyform__field:has( > textarea.kaptyform__input ) > .kaptyform__label {
	width: var(--kf-label-w, var(--kf-textarea-w, var(--kf-input-w, 100%)));
}

/* =========================================================================
   TEXTE SAISI ET TEXTE DE REMPLACEMENT (placeholder)
   ========================================================================= */
.kaptyform .kaptyform__input,
.kaptyform input.kaptyform__input,
.kaptyform textarea.kaptyform__input,
.kaptyform select.kaptyform__input {
	text-align: var(--kf-input-ta-field, var(--kf-input-ta, start));
}

/* Le placeholder hérite de l'alignement du champ ; la couleur et l'opacité,
   elles, doivent être posées explicitement (Firefox applique une opacité
   par défaut qui délave la couleur choisie). */
.kaptyform .kaptyform__input::placeholder {
	color: var(--kf-ph-color, var(--kf-muted, #8a8a9a));
	opacity: 1;
}
.kaptyform .kaptyform__input::-webkit-input-placeholder {
	color: var(--kf-ph-color, var(--kf-muted, #8a8a9a));
	opacity: 1;
}
.kaptyform .kaptyform__input::-moz-placeholder {
	color: var(--kf-ph-color, var(--kf-muted, #8a8a9a));
	opacity: 1;
}

/* =========================================================================
   LISTES DÉROULANTES ET CHOIX (unique / multiple)
   Tout passe par des variables : Elementor écrit la variable, la feuille la
   consomme. Le rendu ne dépend donc pas de l'ordre de chargement des styles.
   ========================================================================= */

/* ----- Liste déroulante ------------------------------------------------- */
/* L'enveloppe porte la flèche : sur un <select> seul, la flèche ne peut être
   qu'une image de fond, donc ni recolorable ni redimensionnable. Ici c'est un
   masque, dont la couleur se règle librement. */
.kaptyform .kaptyform__select {
	position: relative;
	display: block;
	width: 100%;
}
.kaptyform .kaptyform__select > .kaptyform__input {
	/* La flèche native est retirée au profit de la nôtre. */
	background-image: none;
	padding-right: calc(var(--kf-arrow-size, 18px) + 1.6em);
}
.kaptyform .kaptyform__select::after {
	content: "";
	position: absolute;
	top: 50%;
	right: var(--kf-arrow-offset, 0.9em);
	width: var(--kf-arrow-size, 18px);
	height: var(--kf-arrow-size, 18px);
	transform: translateY(-50%);
	background-color: var(--kf-arrow-color, var(--kf-muted, #8a8a9a));
	-webkit-mask: var(--kf-arrow-svg) no-repeat center / contain;
	mask: var(--kf-arrow-svg) no-repeat center / contain;
	pointer-events: none;
	transition: background-color 0.18s ease;
}
.kaptyform {
	--kf-arrow-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* ----- Choix unique / multiple ----------------------------------------- */
/* Le conteneur bascule entre flex (options à la suite) et grille (options
   en colonnes) selon --kf-opt-display, écrit par le réglage « Disposition ».
   La grille permet le mode « largeur du plus long » : une colonne en
   max-content prend la largeur de l'option la plus large, et toutes les
   options s'y alignent — impossible en flex. */
.kaptyform .kaptyform__options {
	display: var(--kf-opt-display, flex);
	flex-wrap: wrap;
	gap: var(--kf-opt-gap, 0.6em);
	grid-template-columns: var(--kf-opt-cols, minmax(0, 1fr));
	/* Position du groupe quand il est plus étroit que le champ. */
	justify-content: var(--kf-opts-justify, flex-start);
	align-items: stretch;
}
.kaptyform .kaptyform__options > .kaptyform__option {
	flex: var(--kf-opt-grow, 0 1 auto);
	width: var(--kf-opt-w, auto);
	max-width: 100%;
}

.kaptyform .kaptyform__option {
	display: inline-flex;
	align-items: center;
	gap: var(--kf-opt-inner-gap, 0.5em);
	padding: var(--kf-opt-pt, 0.6em) var(--kf-opt-pr, 0.9em) var(--kf-opt-pb, 0.6em) var(--kf-opt-pl, 0.9em);
	border-style: solid;
	border-width: var(--kf-opt-bw, 1.5px);
	border-color: var(--kf-opt-border, var(--kf-border, #e3e3ec));
	border-radius: var(--kf-opt-radius, var(--kf-radius, 12px));
	background-color: var(--kf-opt-bg, #fff);
	color: var(--kf-opt-color, inherit);
	cursor: pointer;
	transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}

/* Puce native (rond ou carré) : couleur et taille. */
.kaptyform .kaptyform__option > input {
	accent-color: var(--kf-opt-dot, var(--kf-accent, #4cc3f0));
	width: var(--kf-opt-dot-size, 1em);
	height: var(--kf-opt-dot-size, 1em);
	margin: 0;
	flex: 0 0 auto;
}
/* Masquer la puce et ne garder que la pastille (style « bouton »). */
.kaptyform .kaptyform__options--nodot .kaptyform__option > input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

.kaptyform .kaptyform__option:hover {
	border-color: var(--kf-opt-border-h, var(--kf-accent, #4cc3f0));
	background-color: var(--kf-opt-bg-h, var(--kf-opt-bg, #fff));
	color: var(--kf-opt-color-h, var(--kf-opt-color, inherit));
}

.kaptyform .kaptyform__option:has( > input:checked ) {
	border-color: var(--kf-opt-border-s, var(--kf-accent, #4cc3f0));
	background-color: var(--kf-opt-bg-s, color-mix( in srgb, var(--kf-accent, #4cc3f0) 8%, #fff ));
	color: var(--kf-opt-color-s, var(--kf-opt-color, inherit));
}

/* Accessibilité : le focus clavier reste visible. */
.kaptyform .kaptyform__option:has( > input:focus-visible ) {
	outline: 2px solid var(--kf-opt-border-s, var(--kf-accent, #4cc3f0));
	outline-offset: 2px;
}

/* =========================================================================
   BLOC DE TEXTE LIBRE (paragraphe)
   ========================================================================= */
.kaptyform .kaptyform__html {
	color: var(--kf-html-color, var(--kf-muted, #8a8a9a));
	line-height: var(--kf-html-lh, 1.6);
	width: var(--kf-html-w, 100%);
	max-width: 100%;
	margin-left: var(--kf-html-ml, auto);
	margin-right: var(--kf-html-mr, auto);
	padding: var(--kf-html-pt, 0) var(--kf-html-pr, 0) var(--kf-html-pb, 0) var(--kf-html-pl, 0);
	background-color: var(--kf-html-bg, transparent);
	border-radius: var(--kf-html-radius, 0);
	border-left: var(--kf-html-bar-w, 0) solid var(--kf-html-bar-color, var(--kf-accent, #4cc3f0));
}
/* Espace sous le bloc, indépendant des autres champs. */
.kaptyform .kaptyform__field--html {
	margin-bottom: var(--kf-html-mb, 1.1em);
}
.kaptyform .kaptyform__html a {
	color: var(--kf-html-link, var(--kf-accent, #4cc3f0));
	text-decoration: var(--kf-html-link-deco, underline);
	text-underline-offset: 2px;
	transition: color 0.18s ease;
}
.kaptyform .kaptyform__html a:hover,
.kaptyform .kaptyform__html a:focus {
	color: var(--kf-html-link-h, var(--kf-html-link, var(--kf-accent, #4cc3f0)));
}
/* Espacement entre paragraphes du bloc ; le dernier ne pousse pas vers le bas. */
.kaptyform .kaptyform__html p {
	margin-top: 0;
	margin-bottom: var(--kf-html-p-gap, 0.8em);
}
.kaptyform .kaptyform__html p:last-child {
	margin-bottom: 0;
}