/**
 * RP Bons Playtomic - styles du formulaire.
 *
 * Les couleurs et polices sont lues depuis les variables globales Elementor du
 * site, avec les valeurs du kit en repli : le bloc suit automatiquement le
 * theme si la charte evolue, et reste correct si Elementor est absent.
 *
 * CONVENTION : tout selecteur de composant est prefixe par .rp-bons, meme quand
 * la classe suffirait. Le kit Elementor du site applique des regles du type
 * .elementor-kit-8 h2 { font-size: 3.2rem } et .elementor-kit-8 a { color: ... },
 * de specificite 0,1,1, qui l'emportent sur une classe seule (0,1,0). Le prefixe
 * porte chaque regle a 0,2,0 et repasse devant sans recourir a !important.
 * Une nouvelle regle ecrite sans ce prefixe sera silencieusement ignoree des que
 * le kit cible la meme balise.
 */

.rp-bons {
	--rp-green: var(--e-global-color-primary, #2A7E74);
	--rp-green-dark: var(--e-global-color-secondary, #004C45);
	--rp-green-light: var(--e-global-color-accent, #7EBBB5);
	--rp-ink: var(--e-global-color-text, #1B1B1B);
	/* Gris vert pour les textes secondaires, 5.03:1 sur blanc. */
	--rp-muted: #5F7370;
	--rp-surface: #FFFFFF;
	/* Gris legerement vert plutot que gris chaud, pour les bordures. */
	--rp-line: #DCE4E2;
	--rp-danger: #B3261E;

	--rp-font-title: var(--e-global-typography-primary-font-family, "Bebas Neue"), Impact, sans-serif;
	--rp-font-body: var(--e-global-typography-text-font-family, "Aeonik"), Arial, sans-serif;

	--rp-radius: 14px;
	--rp-gap: 18px;

	max-width: 720px;
	margin-inline: auto;
	font-family: var(--rp-font-body);
	color: var(--rp-ink);
	line-height: 1.6;
	box-sizing: border-box;
}

.rp-bons *,
.rp-bons *::before,
.rp-bons *::after {
	box-sizing: inherit;
}

/* ---------- Carte ---------- */

.rp-bons .rp-bons__card {
	background: var(--rp-surface);
	border: 1px solid var(--rp-line);
	border-top: 4px solid var(--rp-green);
	border-radius: var(--rp-radius);
	padding: clamp(22px, 4vw, 36px);
	box-shadow: 0 10px 30px rgba(0, 47, 41, 0.07);
}

/*
 * Reglage du titre sur petite largeur. 1.9rem etait trop gros et prenait trois
 * lignes, 1.5rem trop discret : la courbe vise environ 27px sur un telephone
 * courant, pour deux lignes lisibles. La borne haute reste a 2.6rem, donc le
 * rendu au-dela de 1150px est inchange.
 */
.rp-bons .rp-bons__title {
	margin: 0 0 10px;
	font-family: var(--rp-font-title);
	font-size: clamp(1.65rem, 1.3rem + 1.8vw, 2.6rem);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: 0.5px;
	color: var(--rp-green-dark);
}

.rp-bons .rp-bons__intro {
	margin: 0 0 26px;
	font-size: 1.02rem;
	color: var(--rp-ink);
}

/* ---------- Champs ---------- */

.rp-bons .rp-bons__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--rp-gap);
}

.rp-bons .rp-bons__field {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.rp-bons .rp-bons__field--wide {
	grid-column: 1 / -1;
}

.rp-bons .rp-bons__label {
	font-size: 0.86rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--rp-green-dark);
}

.rp-bons .rp-bons__input {
	width: 100%;
	padding: 13px 15px;
	font-family: inherit;
	font-size: 1rem;
	color: var(--rp-ink);
	background: var(--rp-surface);
	border: 1px solid var(--rp-line);
	border-radius: 8px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	appearance: none;
}

.rp-bons .rp-bons__input:hover {
	border-color: var(--rp-green-light);
}

.rp-bons .rp-bons__input:focus {
	outline: none;
	border-color: var(--rp-green);
	box-shadow: 0 0 0 3px rgba(42, 126, 116, 0.18);
}

.rp-bons .rp-bons__input[aria-invalid="true"] {
	border-color: var(--rp-danger);
	box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.12);
}

.rp-bons .rp-bons__help,
.rp-bons .rp-bons__suggestion {
	font-size: 0.82rem;
	color: var(--rp-muted);
}

.rp-bons .rp-bons__suggestion button {
	font: inherit;
	color: var(--rp-green);
	background: none;
	border: none;
	padding: 0;
	text-decoration: underline;
	cursor: pointer;
}

/* ---------- Consentement ---------- */

/*
 * La case est dessinee entierement ici plutot que laissee au rendu natif : le
 * theme du site impose ses propres dimensions et marges aux cases a cocher, ce
 * qui faussait le calage vertical. En fixant taille, marges et apparence, le
 * centrage sur la premiere ligne de texte devient calculable.
 */
.rp-bons .rp-bons__checkbox {
	--rp-check-size: 18px;
	--rp-check-line: 1.5;

	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 22px;
	font-size: 0.93rem;
	line-height: var(--rp-check-line);
	cursor: pointer;
}

.rp-bons .rp-bons__checkbox input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 auto;
	width: var(--rp-check-size);
	height: var(--rp-check-size);
	/* Certains themes imposent un min-width aux champs de formulaire. */
	min-width: var(--rp-check-size);
	min-height: var(--rp-check-size);
	margin: 0;
	padding: 0;
	/* font-size heritee pour que le 1em du calcul ci-dessous soit celui du texte. */
	font-size: inherit;
	/* Centre la case sur la premiere ligne : (hauteur de ligne - taille) / 2. */
	margin-block-start: calc( ( 1em * var(--rp-check-line) - var(--rp-check-size) ) / 2 );
	background: var(--rp-surface);
	border: 1px solid var(--rp-line);
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.rp-bons .rp-bons__checkbox input[type="checkbox"]:hover {
	border-color: var(--rp-green-light);
}

.rp-bons .rp-bons__checkbox input[type="checkbox"]:focus-visible {
	outline: none;
	border-color: var(--rp-green);
	box-shadow: 0 0 0 3px rgba(42, 126, 116, 0.18);
}

/* Coche en SVG encode dans l'URL : aucune police d'icones a charger. */
.rp-bons .rp-bons__checkbox input[type="checkbox"]:checked {
	background-color: var(--rp-green);
	border-color: var(--rp-green);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 13px 13px;
}

/* En contraste force, on rend la main au rendu natif du systeme. */
@media (forced-colors: active) {
	.rp-bons .rp-bons__checkbox input[type="checkbox"] {
		appearance: auto;
		-webkit-appearance: auto;
	}
}

/* ---------- Champ piege ---------- */

.rp-bons .rp-bons__hp {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------- Alerte ---------- */

.rp-bons .rp-bons__alert {
	margin-top: 20px;
	padding: 12px 15px;
	font-size: 0.93rem;
	color: #7A1A15;
	background: #FCEFEE;
	border: 1px solid #F0CFCC;
	border-radius: 8px;
}

.rp-bons .rp-bons__alert[hidden] {
	display: none;
}

/* ---------- Note d'information ---------- */

.rp-bons .rp-bons__notice {
	margin: 0 0 22px;
	padding: 12px 15px;
	font-size: 0.9rem;
	color: var(--rp-green-dark);
	background: #F3F8F7;
	border-left: 3px solid var(--rp-green-light);
	border-radius: 0 8px 8px 0;
}

/* ---------- Bouton ---------- */

.rp-bons .rp-bons__submit {
	display: inline-block;
	width: 100%;
	margin-top: 22px;
	padding: 15px 24px;
	font-family: inherit;
	font-size: 1.03rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-align: center;
	text-decoration: none;
	color: #FFFFFF;
	background: var(--rp-green);
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.06s ease;
}

/*
 * Le kit Elementor du site applique .elementor-kit-8 a { color: ... }, dont la
 * specificite (0,1,1) depasse celle d'une classe seule. Les regles de couleur
 * des boutons-liens sont donc prefixees par .rp-bons pour reprendre la main
 * sans recourir a !important.
 */
.rp-bons a.rp-bons__submit,
.rp-bons a.rp-bons__submit:visited {
	color: #FFFFFF;
}

.rp-bons .rp-bons__submit:hover,
.rp-bons .rp-bons__submit:focus-visible,
.rp-bons a.rp-bons__submit:hover,
.rp-bons a.rp-bons__submit:focus-visible {
	background: var(--rp-green-dark);
	color: #FFFFFF;
}

.rp-bons .rp-bons__submit:active {
	transform: translateY(1px);
}

.rp-bons .rp-bons__submit[disabled] {
	opacity: 0.6;
	cursor: progress;
}

.rp-bons .rp-bons__submit--link {
	width: auto;
	padding-inline: 30px;
}

/* ---------- Mention legale ---------- */

.rp-bons .rp-bons__privacy {
	margin: 16px 0 0;
	font-size: 0.8rem;
	line-height: 1.5;
	color: var(--rp-muted);
}

.rp-bons .rp-bons__privacy a,
.rp-bons .rp-bons__privacy a:visited {
	color: var(--rp-green);
	text-decoration: underline;
}

.rp-bons .rp-bons__privacy a:hover,
.rp-bons .rp-bons__privacy a:focus-visible {
	color: var(--rp-green-dark);
}

/* ---------- Ecran de confirmation ---------- */

.rp-bons .rp-bons__panel[hidden] {
	display: none;
}

.rp-bons .rp-bons__result-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: 18px;
	border-radius: 50%;
	background: rgba(42, 126, 116, 0.12);
	color: var(--rp-green);
	font-size: 26px;
	line-height: 1;
}

.rp-bons .rp-bons__result-note {
	margin: 14px 0 0;
	padding: 12px 15px;
	font-size: 0.9rem;
	color: var(--rp-green-dark);
	background: #F3F8F7;
	border-left: 3px solid var(--rp-green-light);
	border-radius: 0 8px 8px 0;
}

/* ---------- Marche a suivre ---------- */

/*
 * Aplat vert et texte blanc. Le blanc pur est conserve pour le corps de texte :
 * un blanc adouci ferait tomber le contraste sous le seuil AA sur ce fond.
 */
.rp-bons .rp-bons__steps {
	margin-top: 30px;
	padding: clamp(20px, 3.5vw, 30px);
	background: var(--rp-green);
	border-radius: var(--rp-radius);
	color: #FFFFFF;
}

.rp-bons .rp-bons__steps-title {
	margin: 0 0 20px;
	font-family: var(--rp-font-title);
	font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem);
	font-weight: 600;
	letter-spacing: 0.4px;
	color: #FFFFFF;
}

.rp-bons .rp-bons__steps-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 16px;
	counter-reset: none;
}

.rp-bons .rp-bons__step {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin: 0;
}

/* Pastille inversee : disque blanc, chiffre vert fonce. */
.rp-bons .rp-bons__step-number {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #FFFFFF;
	color: var(--rp-green-dark);
	font-family: var(--rp-font-title);
	font-size: 1.05rem;
	line-height: 1;
	padding-top: 2px;
}

.rp-bons .rp-bons__step-body {
	display: block;
}

.rp-bons .rp-bons__step-title {
	display: block;
	color: #FFFFFF;
	font-weight: 700;
}

.rp-bons .rp-bons__step-text {
	display: block;
	font-size: 0.95rem;
}

/* ---------- Mobile ---------- */

@media (max-width: 560px) {
	.rp-bons .rp-bons__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.rp-bons .rp-bons__input,
	.rp-bons .rp-bons__submit {
		transition: none;
	}
}