/**
 * Formulaire de contact (anode-forms, `forms/contact.json`) habillé comme le
 * formulaire Gravity 2 de la production — relevé le 21/10/2026 sur
 * https://www.labelequipee.com/contact-new/, styles calculés, à 1440 et 390 px.
 *
 * Le formulaire « donnees-personnelles » (politique de confidentialité, sans
 * équivalent en production) reprend le même habillage.
 *
 * Écart volontaire : à l'écran 3, le bouton « Précédent » de la production est
 * un carré orange de 48 px où son libellé déborde et chevauche « Envoyer ». Il
 * prend ici la flèche grise de l'écran 2, comme partout ailleurs.
 *
 * @package Anode\Theme
 */

:is([data-form="contact"], [data-form="donnees-personnelles"]) {
	--contact-texte: #212121;
	--contact-fond-champ: rgba(33, 33, 33, 0.03);
	--contact-fond-liste: #f5f5f5;
	--contact-accent: #3499a9;
	--contact-action: #f86544;
	--contact-retour: rgba(33, 33, 33, 0.05);
	--contact-inactif: #f0f0f0;
	--contact-requis: #c02b0a;
	--contact-clair: #fcfcfc;
	--contact-fleche-suivant: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 12L4 12M20 12L16 8M20 12L16 16' stroke='%23FCFCFC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--contact-focus: rgba(32, 76, 229, 0.65);
	--contact-coche: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 12.6111L8.92308 17.5L20 6.5' stroke='%23FCFCFC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--contact-fleche-retour: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 12L20 12M4 12L8 8M4 12L8 16' stroke='%23212121' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

	font-family: "Open Sans", sans-serif;
	color: var(--contact-texte);
}

/* Écran : pastilles, titre, puis une colonne de champs. */
:is([data-form="contact"], [data-form="donnees-personnelles"]) .c-form__body {
	display: flex;
	flex-direction: column;
}

/* « Étape n sur N » reste lu par les lecteurs d'écran ; les pastilles le disent à l'œil. */
:is([data-form="contact"], [data-form="donnees-personnelles"]) .c-form__step {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

:is([data-form="contact"], [data-form="donnees-personnelles"]) .c-form__progress {
	display: flex;
	align-items: center;
	justify-content: center;
	block-size: 18px;
}

:is([data-form="contact"], [data-form="donnees-personnelles"]) .c-form__progress-point {
	flex: 0 0 18px;
	block-size: 18px;
	border-radius: 150px;
	background: var(--contact-inactif);
}

:is([data-form="contact"], [data-form="donnees-personnelles"]) .c-form__progress-line {
	flex: 0 0 64px;
	block-size: 2px;
	background: var(--contact-inactif);
}

:is([data-form="contact"], [data-form="donnees-personnelles"]) .c-form__progress .is-active {
	background: var(--contact-accent);
}

:is([data-form="contact"], [data-form="donnees-personnelles"]) .c-form__screen-title {
	max-inline-size: 390px;
	margin: 30px auto 0;
	font-size: 40px;
	font-weight: 400;
	line-height: 48px;
	text-align: center;
	color: var(--contact-texte);
}

:is([data-form="contact"], [data-form="donnees-personnelles"]) .c-form__grid {
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
	margin-block-start: 20px;
}

:is([data-form="contact"], [data-form="donnees-personnelles"]) .c-form__field {
	gap: 8px;
}

:is([data-form="contact"], [data-form="donnees-personnelles"]) .c-form__label {
	font-size: 16px;
	font-weight: 300;
	line-height: 22.4px;
	text-align: center;
	color: var(--contact-texte);
}

/* La production ne dit pas « (optionnel) » : elle marque l'obligatoire d'un astérisque. */
:is([data-form="contact"], [data-form="donnees-personnelles"]) .c-form__optional {
	display: none;
}

/* Le moteur ne pose pas `required` : il marque au contraire le facultatif. Est
   obligatoire tout champ sans mention « (optionnel) » — sauf la question de
   l'écran 1, sans astérisque en production. */
:is([data-form="contact"], [data-form="donnees-personnelles"]) .c-form__field:not(.c-form__field--radio) > .c-form__label:not(:has(.c-form__optional))::after {
	content: "*";
	font-size: 12px;
	font-weight: 500;
	color: var(--contact-requis);
}

/* Sur les listes, l'astérisque fait partie du libellé, à sa taille et sa couleur. */
:is([data-form="contact"], [data-form="donnees-personnelles"]) .c-form__field:has(.c-form__select) > .c-form__label:not(:has(.c-form__optional))::after {
	content: "*";
	font: inherit;
	color: inherit;
}

:is([data-form="contact"], [data-form="donnees-personnelles"]) .c-form__control.c-form__control {
	block-size: 56px;
	padding: 16px 24px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 400;
	line-height: 19.6px;
	color: var(--contact-texte);
	background: var(--contact-fond-champ);
	border: 0;
	border-radius: 2px;
	box-shadow: none;
}

:is([data-form="contact"], [data-form="donnees-personnelles"]) .c-form__control::placeholder {
	color: rgba(33, 33, 33, 0.55);
	opacity: 1;
}

/* Le focus de Gravity (thème Orbital) : 3 px bleu à 65 %, décalé d'1 px. */
:is([data-form="contact"], [data-form="donnees-personnelles"]) .c-form__control:focus,
:is([data-form="contact"], [data-form="donnees-personnelles"]) .c-form__control:focus-visible {
	outline: 3px solid var(--contact-focus);
	outline-offset: 1px;
}

/* ── Écran 1 : le choix, en deux cases encadrées côte à côte ─────────────── */

:is([data-form="contact"], [data-form="donnees-personnelles"]) .c-form__field--radio > .c-form__label {
	margin-block-end: 4px;
}

:is([data-form="contact"], [data-form="donnees-personnelles"]) .c-form__choices {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px;
	border: 0;
}

:is([data-form="contact"], [data-form="donnees-personnelles"]) .c-form__choices .c-form__choice {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14px 12px;
	font-size: 14px;
	font-weight: 400;
	line-height: 19.6px;
	color: var(--contact-texte);
	background: transparent;
	border: 1px solid var(--contact-texte);
	border-radius: 2px;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

:is([data-form="contact"], [data-form="donnees-personnelles"]) .c-form__choices .c-form__choice + .c-form__choice {
	margin: 0;
	border-top: 1px solid var(--contact-texte);
}

:is([data-form="contact"], [data-form="donnees-personnelles"]) .c-form__choice-mark {
	display: none;
}

:is([data-form="contact"], [data-form="donnees-personnelles"]) .c-form__choice-input {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

:is([data-form="contact"], [data-form="donnees-personnelles"]) .c-form__choices .c-form__choice:hover {
	border-color: var(--contact-accent);
}

:is([data-form="contact"], [data-form="donnees-personnelles"]) .c-form__choices .c-form__choice:has(.c-form__choice-input:checked),
:is([data-form="contact"], [data-form="donnees-personnelles"]) .c-form__choices .c-form__choice:has(.c-form__choice-input:checked) .c-form__choice-text {
	color: var(--contact-clair);
	background: var(--contact-accent);
	border-color: var(--contact-accent);
}

:is([data-form="contact"], [data-form="donnees-personnelles"]) .c-form__choice-text {
	color: inherit;
}

:is([data-form="contact"], [data-form="donnees-personnelles"]) .c-form__choices .c-form__choice:has(.c-form__choice-input:focus-visible) {
	outline: 3px solid var(--contact-focus);
	outline-offset: 1px;
}

/* ── Écran 2 : la liste à choix multiples ───────────────────────────────── */

:is([data-form="contact"], [data-form="donnees-personnelles"]) .c-form__select-button {
	justify-content: space-between;
	text-align: center;
}

:is([data-form="contact"], [data-form="donnees-personnelles"]) .c-form__select-button.is-placeholder .c-form__select-value {
	color: var(--contact-texte);
}

:is([data-form="contact"], [data-form="donnees-personnelles"]) .c-form__select-value {
	text-align: start;
}

/* Le chevron de la production est le caractère « ▾ », pas un trait. */
:is([data-form="contact"], [data-form="donnees-personnelles"]) .c-form__select-chevron {
	inline-size: auto;
	block-size: auto;
	border: 0;
	transform: none;
}

:is([data-form="contact"], [data-form="donnees-personnelles"]) .c-form__select-chevron::before {
	content: "▾";
	font-size: 14px;
	line-height: 19.6px;
}

/* Liste ouverte : le bouton garde le cadre de focus, comme en production,
   même quand le focus est passé sur une option. */
:is([data-form="contact"], [data-form="donnees-personnelles"]) .c-form__select[data-open="true"] .c-form__select-button {
	outline: 3px solid var(--contact-focus);
	outline-offset: 1px;
}

/* Le « ▾ » de la production ne pivote pas à l'ouverture. */
:is([data-form="contact"], [data-form="donnees-personnelles"]) .c-form__select[data-open="true"] .c-form__select-chevron {
	transform: none;
}

:is([data-form="contact"], [data-form="donnees-personnelles"]) .c-form__select-list {
	inset-block-start: calc(100% - 2px);
	max-block-size: 330px;
	padding: 0 0 8px;
	background: var(--contact-fond-liste);
	border: 0;
	border-radius: 0 0 2px 2px;
	box-shadow: none;
}

:is([data-form="contact"], [data-form="donnees-personnelles"]) .c-form__select-option {
	display: flex;
	align-items: center;
	gap: 8px;
	min-block-size: 49.75px;
	padding: 14px 24px;
	font-size: 12px;
	font-weight: 400;
	line-height: 20.76px;
	color: var(--contact-texte);
	border-radius: 0;
}

:is([data-form="contact"], [data-form="donnees-personnelles"]) .c-form__select-option.is-active {
	background: rgba(33, 33, 33, 0.04);
}

/* Cochée : toute la ligne en bleu-vert, texte clair (`label-checked` en production). */
:is([data-form="contact"], [data-form="donnees-personnelles"]) .c-form__select-option[aria-selected="true"] {
	font-weight: 400;
	color: var(--contact-clair);
	background: var(--contact-accent);
}

:is([data-form="contact"], [data-form="donnees-personnelles"]) .c-form__select-option--check::before {
	inline-size: 18px;
	block-size: 18px;
	flex: 0 0 18px;
	margin: 0;
	background: transparent;
	border: 1px solid var(--contact-texte);
	border-radius: 2px;
	box-shadow: rgba(18, 25, 97, 0.08) 0 1px 4px 0;
}

:is([data-form="contact"], [data-form="donnees-personnelles"]) .c-form__select-option--check[aria-selected="true"]::before {
	background: var(--contact-accent) var(--contact-coche) no-repeat 50% 50% / 13px 12px;
	border-color: var(--contact-clair);
}

/* ── Boutons : flèches carrées, « Envoyer » à la fin ────────────────────── */

:is([data-form="contact"], [data-form="donnees-personnelles"]) .c-form__actions {
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 8px;
	margin-block-start: 10px;
}

:is([data-form="contact"], [data-form="donnees-personnelles"]) .c-form__actions .c-form__prev,
:is([data-form="contact"], [data-form="donnees-personnelles"]) .c-form__actions .c-form__submit:not(#CTA_form_submit) {
	inline-size: 48px;
	block-size: 48px;
	min-inline-size: 0;
	padding: 0;
	font-size: 0;
	color: transparent;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: 24px auto;
	border: 0;
	border-radius: 2px;
	box-shadow: none;
	cursor: pointer;
	transition: filter 0.15s ease;
}

:is([data-form="contact"], [data-form="donnees-personnelles"]) .c-form__actions .c-form__prev {
	background-color: var(--contact-retour);
	background-image: var(--contact-fleche-retour);
}

:is([data-form="contact"], [data-form="donnees-personnelles"]) .c-form__actions .c-form__submit:not(#CTA_form_submit) {
	background-color: var(--contact-action);
	background-image: var(--contact-fleche-suivant);
}

:is([data-form="contact"], [data-form="donnees-personnelles"]) .c-form__actions #CTA_form_submit {
	block-size: 45.6px;
	padding: 12px 50px 12px 12px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 19.6px;
	letter-spacing: normal;
	text-transform: none;
	color: var(--contact-clair);
	background: var(--contact-action) var(--contact-fleche-suivant) no-repeat right 14px center / 24px auto;
	border: 1px solid transparent;
	border-radius: 3px;
	box-shadow: rgba(18, 25, 97, 0.08) 0 1px 4px 0;
	cursor: pointer;
	transition: filter 0.15s ease;
}

:is([data-form="contact"], [data-form="donnees-personnelles"]) .c-form__actions button:hover {
	filter: brightness(0.95);
}

:is([data-form="contact"], [data-form="donnees-personnelles"]) .c-form__actions button:active {
	filter: brightness(0.9);
}

:is([data-form="contact"], [data-form="donnees-personnelles"]) .c-form__actions button:focus-visible {
	outline: 2px solid var(--contact-accent);
	outline-offset: 2px;
}

:is([data-form="contact"], [data-form="donnees-personnelles"]) .c-form__actions button:disabled {
	cursor: progress;
	opacity: 0.6;
}

/* Case seule (attestation du formulaire RGPD) : la case puis son libellé, sur une ligne. */
:is([data-form="contact"], [data-form="donnees-personnelles"]) .c-form__field--checkbox {
	flex-flow: row wrap;
	align-items: flex-start;
	column-gap: 10px;
}

:is([data-form="contact"], [data-form="donnees-personnelles"]) .c-form__field--checkbox > .c-form__control {
	flex: none;
	inline-size: 18px;
	block-size: 18px;
	margin: 2px 0 0;
	accent-color: var(--contact-action);
	cursor: pointer;
}

:is([data-form="contact"], [data-form="donnees-personnelles"]) .c-form__field--checkbox > .c-form__control:focus-visible {
	outline: 2px solid var(--contact-focus);
	outline-offset: 2px;
}

:is([data-form="contact"], [data-form="donnees-personnelles"]) .c-form__field--checkbox > .c-form__label {
	flex: 1 1 0;
	min-inline-size: 0;
	margin: 0;
	text-align: start;
	cursor: pointer;
}

:is([data-form="contact"], [data-form="donnees-personnelles"]) .c-form__field--checkbox > .c-form__error {
	flex-basis: 100%;
}

:is([data-form="contact"], [data-form="donnees-personnelles"]) .c-form__help {
	margin: 0;
	font-size: 12px;
	line-height: 17px;
	color: rgba(33, 33, 33, 0.7);
}

:is([data-form="contact"], [data-form="donnees-personnelles"]) .c-form__error {
	font-size: 12px;
	line-height: 17px;
	text-align: center;
	color: var(--contact-requis);
}

:is([data-form="contact"], [data-form="donnees-personnelles"]) .c-form__status {
	text-align: center;
}

/* Liste ouverte au-dessus des champs qui suivent : sans cela, « Lieu » passait
   par-dessus le bas de la liste. */
:is([data-form="contact"], [data-form="donnees-personnelles"]) .c-form__field:has(.c-form__select[data-open="true"]) {
	position: relative;
	z-index: 10;
}