/* Bloc cnd/capture-form — formulaire maison (nom/e-mail/tél/ville/motif/message/consentement).
   Racine scopée .cnd.cnd-capture-form (correctif post-QA). */
.cnd.cnd-capture-form {
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
	max-width: 560px;
}
.cnd.cnd-capture-form .cnd-field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--s-4);
}
@media (max-width: 560px) {
	.cnd.cnd-capture-form .cnd-field-row {
		grid-template-columns: 1fr;
	}
}
/* Champ : bordure fine grise, fond blanc, rayon 8 px (règle §9). */
.cnd.cnd-capture-form .cnd-field-group {
	position: relative;
	display: flex;
	flex-direction: column;
}
.cnd.cnd-capture-form .cnd-field,
.cnd.cnd-capture-form textarea.cnd-field {
	/* !important nécessaire : CSS additionnelle du site (hors plugin, réglage « Additional CSS »
	   visiblement issu de Tutor LMS) pose `input[type=...], select, textarea { border: #dcdfe5
	   !important; }` — un raccourci `border` invalide (sans largeur/style), qui réinitialise
	   border-width à `medium`/border-style à `none` et supprime toute bordure visible. Aucune
	   spécificité ne peut gagner contre un !important ; signalé à Emmanuel (correctif hors
	   périmètre plugin, potentiellement impacte d'autres formulaires du site). */
	border: 1px solid var(--line-2) !important;
	border-radius: var(--r-sm);
	background: var(--surface);
	font-family: var(--font-body);
	font-weight: 400;
	font-size: var(--t-small);
	color: var(--ink);
	padding: 22px 15px 9px;
}
.cnd.cnd-capture-form textarea.cnd-field {
	padding-top: 24px;
	resize: vertical;
}
.cnd.cnd-capture-form .cnd-field[aria-invalid="true"] {
	border-color: var(--danger);
}
/* Libellé flottant, posé dans le champ (règle §9) : 10 px/600, gris #8A8D92.
   Contre-QA (point 3) : la maquette Contact.dc.html pose ce même libellé en permanence petit,
   position absolute, sans transform/transition ni état "grand au repos" — aucun vrai floating
   label dans la maquette source. État permanent confirmé conforme, aucun changement requis. */
.cnd.cnd-capture-form .cnd-field-label {
	position: absolute;
	top: 8px;
	left: 16px;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 10px;
	line-height: 1;
	/* --ink-4 (contre-QA v0.2.6, point 4d) : sous le seuil AA à cette taille. --ink-3 : 4,5:1. */
	color: var(--ink-3);
	text-decoration: none;
	margin: 0;
	pointer-events: none;
	z-index: 1;
}
.cnd.cnd-capture-form .cnd-field-error {
	font-family: var(--font-body);
	font-size: var(--t-caption);
	color: var(--danger);
	margin: var(--s-1) 0 0;
}
.cnd.cnd-capture-form .cnd-capture-form__consent {
	display: flex;
	align-items: flex-start;
	gap: var(--s-2);
	font-family: var(--font-body);
	font-size: var(--t-caption);
	color: var(--ink-3);
}
/* Lien du consentement (v0.25.0) : sans règle propre, il prenait le survol du thème
   (`a:hover { color: #909B71 }`, 2,95:1 sur blanc). Gris du texte, souligné ; survol en encre. */
.cnd.cnd-capture-form .cnd-capture-form__consent a,
.cnd.cnd-capture-form .cnd-capture-form__consent a:focus {
	color: inherit;
	text-decoration: underline;
}
.cnd.cnd-capture-form .cnd-capture-form__consent a:hover {
	color: var(--ink);
	text-decoration: underline;
}
.cnd.cnd-capture-form .cnd-capture-form__consent input {
	margin-top: 3px;
}
/* Mention d'information RGPD sous le bouton (v0.39.0, remplace la case « J'accepte… »). Lien : mêmes règles
   que celles du consentement (gris du texte souligné, survol en encre, jamais le survol du thème). */
.cnd.cnd-capture-form .cnd-capture-form__mention {
	margin: var(--s-3) 0 0;
	font-family: var(--font-body);
	font-size: var(--t-caption);
	line-height: 1.5;
	color: var(--ink-3);
}
.cnd.cnd-capture-form .cnd-capture-form__mention a,
.cnd.cnd-capture-form .cnd-capture-form__mention a:focus {
	color: inherit;
	text-decoration: underline;
}
.cnd.cnd-capture-form .cnd-capture-form__mention a:hover {
	color: var(--ink);
	text-decoration: underline;
}
/* v0.24.0 : place réservée au widget Turnstile (65 px en taille normale). Sans elle, son insertion
   pousse le bouton d'envoi ; sur les landings, où le formulaire est dans le premier écran, CLS 0,013. */
.cnd.cnd-capture-form .cf-turnstile {
	min-height: 65px;
}
.cnd.cnd-capture-form .cnd-capture-form__status {
	font-family: var(--font-body);
	font-size: var(--t-caption);
	padding: var(--s-2) var(--s-3);
	border-radius: var(--r-md);
}
.cnd.cnd-capture-form .cnd-capture-form__status[data-cnd-status="success"] {
	background: var(--brand-tint);
	color: var(--brand-strong);
}
.cnd.cnd-capture-form .cnd-capture-form__status[data-cnd-status="error"] {
	background: var(--danger-tint);
	color: var(--danger);
}
/* Honeypot : invisible (hors écran) ET hors flux (position absolute, ne pousse aucun autre
   champ) — double garantie contre un remplissage involontaire ou automatisé. */
.cnd.cnd-capture-form .cnd-capture-form__hp {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
/* Bouton d'envoi : hauteur ~47 px (règle §10). Couleurs et états : ceux de tout bouton principal
   (.cnd-btn--primary — repos --brand/--brand-on, survol --brand-hover, focus = repos + anneau).
   Contre-QA v0.3.4 : il était resté au repos en --brand-strong, seule exception du site, ce qui
   rendait aussi son survol (déjà --brand-strong) invisible. */
.cnd.cnd-capture-form button[type="submit"] {
	font-size: 15px;
	min-height: 47px;
	width: 100%;
}

/* ---------- Variante « qualifiant » (v0.5.0) — maquette ACACED, carte « Recevoir les dates et le
   programme » : carte blanche bordée de l'accent (2 px), rayon 16 px, choix en pilules, champs
   resserrés. Remplit la largeur de sa colonne (pas de max-width 560 px). ---------- */
.cnd.cnd-capture-form--qualifiant {
	gap: var(--s-3);
	max-width: none;
	background: var(--surface);
	border: 2px solid var(--brand-border);
	border-radius: var(--r-lg);
	padding: var(--s-5);
	color: var(--ink);
}
.cnd.cnd-capture-form .cnd-capture-form__head {
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
}
/* Titre : le kit Elementor pose sa police sur h1–h3 (0,1,1) — redéclarée ici à (0,2,1). */
.cnd.cnd-capture-form h3.cnd-capture-form__title {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: var(--t-h4);
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ink);
	margin: 0;
}
.cnd.cnd-capture-form .cnd-capture-form__subtitle,
.cnd.cnd-capture-form .cnd-capture-form__legend {
	font-family: var(--font-body);
	font-size: var(--t-caption);
	line-height: 1.4;
	color: var(--ink-3);
	margin: 0;
}
.cnd.cnd-capture-form .cnd-field-required {
	color: var(--brand-strong);
}
.cnd.cnd-capture-form--qualifiant .cnd-field-row {
	gap: var(--s-2);
}
.cnd.cnd-capture-form--qualifiant .cnd-field,
.cnd.cnd-capture-form--qualifiant .cnd-field-label {
	min-width: 0;
}

/* Groupes de choix : <fieldset>/<legend> natifs, remis à plat (le navigateur et le thème leur
   posent bordure, marge et padding). */
.cnd.cnd-capture-form fieldset.cnd-choice-group {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
	background: none;
}
.cnd.cnd-capture-form legend.cnd-choice-group__legend {
	float: left;
	width: 100%;
	padding: 0;
	margin: 0 0 6px;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--t-caption);
	line-height: 1.4;
	color: var(--ink);
	border: 0;
}
.cnd.cnd-capture-form .cnd-choice-group__hint {
	font-weight: 400;
	color: var(--ink-3);
}
.cnd.cnd-capture-form .cnd-choice-group__items {
	clear: both;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.cnd.cnd-capture-form .cnd-choice {
	position: relative;
	display: inline-flex;
}
/* Vraie case / vrai bouton radio, retiré de la vue mais pas de l'arbre d'accessibilité : la
   pilule est son <label>. Clip plutôt que display:none (sinon plus de focus clavier). */
.cnd.cnd-capture-form input.cnd-choice__input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	opacity: 0;
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	background: none;
	box-shadow: none;
	cursor: pointer;
	z-index: 1;
}
.cnd.cnd-capture-form label.cnd-choice__pill {
	position: static;
	display: inline-flex;
	align-items: center;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: var(--t-caption);
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	color: var(--ink);
	background: var(--surface);
	border: 1px solid var(--line-2);
	border-radius: var(--r-pill);
	padding: 6px 12px;
	margin: 0;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.cnd.cnd-capture-form .cnd-choice:hover label.cnd-choice__pill {
	border-color: var(--brand-border);
}
.cnd.cnd-capture-form input.cnd-choice__input:checked + label.cnd-choice__pill {
	background: var(--brand-tint);
	border-color: var(--brand-border);
	color: var(--brand-strong);
}
.cnd.cnd-capture-form input.cnd-choice__input:focus-visible + label.cnd-choice__pill {
	outline: 2px solid var(--brand-strong);
	outline-offset: 2px;
}

.cnd.cnd-capture-form--qualifiant .cnd-capture-form__consent input {
	accent-color: var(--brand);
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	margin-top: 0;
}
.cnd.cnd-capture-form--qualifiant button[type="submit"] {
	font-size: var(--t-small);
}

/* ---------- v0.6.0 : liste déroulante (âge du chien), groupe obligatoire en erreur ---------- */
.cnd.cnd-capture-form select.cnd-field {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	padding-right: 40px;
	cursor: pointer;
}
/* Chevron dessiné par masque (couleur = token), le select n'ayant plus de flèche native. */
.cnd.cnd-capture-form .cnd-field-group--select::after {
	content: "";
	position: absolute;
	right: 16px;
	top: 25px;
	width: 12px;
	height: 12px;
	background: var(--ink-3);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
	pointer-events: none;
}
.cnd.cnd-capture-form fieldset.cnd-choice-group[aria-invalid="true"] .cnd-choice__pill {
	border-color: var(--danger);
}
.cnd.cnd-capture-form fieldset.cnd-choice-group .cnd-field-error {
	margin-top: var(--s-1);
}

/* Liens selon un choix (v0.13.0) : sans JavaScript, tous visibles ; avec, celui du choix coché. */
.cnd.cnd-capture-form .cnd-capture-form__links { margin: var(--s-3) 0 0; }
.cnd.cnd-capture-form .cnd-capture-form__link {
	font-family: var(--font-body);
	font-size: var(--t-small);
	color: var(--ink-2);
	margin: 0 0 var(--s-1);
}
html.cnd-js .cnd.cnd-capture-form .cnd-capture-form__link:not(.is-active) { display: none; }

/* ---------- Modale (v0.33.4, assets/js/form-modal.js) — maquette Education Service et suivantes : fond
   sombre, boîte blanche de 880 px au plus, rayon 16 px, photo et pastilles à gauche (240 px de base), formulaire
   à droite (380 px de base) ; les deux colonnes s'empilent sous 620 px. Racine posée par le script en fin de
   <body>, classe .cnd (portée du design system : surlignage des titres, reset des boutons) ; sélecteurs
   .cnd-modal, sans .cnd.cnd-capture-form. ---------- */
html.cnd-modal-ouverte,
html.cnd-modal-ouverte body {
	overflow: hidden;
}
html.cnd-modal-ouverte body {
	padding-right: var(--cnd-modal-barre, 0);
}
.cnd-modal[hidden] {
	display: none !important;
}
.cnd-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--s-4);
	box-sizing: border-box;
	font-family: var(--font-body);
	color: var(--ink-2);
}
.cnd-modal__fond {
	position: fixed;
	inset: 0;
	background: rgba(28, 28, 26, .55);
}
.cnd-modal__boite {
	position: relative;
	max-width: 880px;
	margin: 0 auto;
	background: var(--surface);
	border-radius: var(--r-lg);
	overflow: hidden;
	display: flex;
	flex-wrap: wrap;
	box-shadow: var(--shadow-float);
}
.cnd-modal__boite:focus {
	outline: none;
}
.cnd-modal button.cnd-modal__fermer {
	all: unset;
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;
	box-sizing: border-box;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--ink);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.cnd-modal button.cnd-modal__fermer:hover {
	border-color: var(--brand-border);
}
.cnd-modal button.cnd-modal__fermer:focus-visible {
	outline: 2px solid var(--brand-strong);
	outline-offset: 2px;
}
.cnd-modal__media {
	flex: 1 1 240px;
	position: relative;
	min-height: 160px;
	background-color: var(--brand-tint);
	background-size: cover;
	background-position: center;
}
.cnd-modal__pastilles {
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 20px;
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
}
.cnd-modal__pastille {
	align-self: flex-start;
	background: rgba(255, 255, 255, .92);
	color: var(--brand-strong);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	padding: 5px 12px;
	border-radius: var(--r-pill);
}
.cnd-modal__corps {
	flex: 1 1 380px;
	min-width: 0;
	padding: var(--s-5) 20px;
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
	box-sizing: border-box;
}
.cnd-modal__entete {
	padding-right: 44px;
}
.cnd-modal__corps--titre-formulaire .cnd-capture-form__head {
	padding-right: 44px;
}
.cnd-modal p.cnd-modal__surtitre {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--brand-strong);
	margin: 0 0 6px;
}
/* Titre : h2 de la section ou h3 du formulaire, à 22 px (maquette) quelle que soit sa balise. */
.cnd-modal .cnd-modal__entete :is(h2, h3),
.cnd-modal .cnd.cnd-capture-form h3.cnd-capture-form__title {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 22px;
	line-height: 1.25;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ink);
	margin: 0 0 6px;
}
.cnd-modal .cnd-modal__entete p:not(.cnd-modal__surtitre) {
	font-size: 13px;
	line-height: 1.5;
	color: var(--ink-3);
	margin: 0;
	max-width: none;
}
/* Dans la boîte, le formulaire n'est plus une carte : ni bordure ni marge propre. */
.cnd-modal .cnd.cnd-capture-form,
.cnd-modal .cnd.cnd-capture-form--qualifiant {
	max-width: none;
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
}
@media (min-width: 768px) {
	.cnd-modal {
		padding: var(--s-7) var(--s-5);
	}
	.cnd-modal__media {
		min-height: 480px;
	}
	.cnd-modal__corps {
		padding: var(--s-6);
	}
}
@media (prefers-reduced-motion: no-preference) {
	.cnd-modal:not([hidden]) .cnd-modal__boite {
		animation: cnd-modal-entree .2s ease-out;
	}
	@keyframes cnd-modal-entree {
		from { opacity: 0; transform: translateY(8px); }
		to { opacity: 1; transform: none; }
	}
}