/**
 * Dahu Theme Annad 2026 — habillage des formulaires de contact.
 *
 * UN habillage pour tous les formulaires, porté par deux classes interchangeables :
 * - .wpcf7-form : posée par Contact Form 7 sur chaque formulaire — un formulaire créé dans CF7 est
 *   habillé sans rien faire, où qu'il soit inséré (bloc CF7, shortcode, composition) ;
 * - .annad-form : la même chose pour un <form> qui ne vient pas de CF7.
 *
 * Classes d'appoint, à poser sur le <p> d'un champ dans le gabarit du formulaire CF7 :
 * - .annad-half     : champ sur une demi-largeur à partir de 40em (Prénom | Nom) ;
 * - .annad-consent  : ligne de consentement (case + texte), le bouton d'envoi la suit à droite ;
 * - .annad-required : astérisque de champ obligatoire (dans le libellé).
 *
 * Deux contextes, mêmes règles : page sombre (défaut du site) et carte claire (.annad-light-zone,
 * .annad-light-page). Seuls les jetons --annad-form-* changent ; en carte claire, largeur, fond et
 * filet des champs viennent déjà de light-zone.css.
 *
 * Chargée sur tout le site, après light-zone.css (functions.php) et dans l'éditeur (inc/blocks.php).
 * Aucune règle ne pose `display` sur un enfant direct du formulaire : les groupes de l'extension
 * Conditional Fields ([data-class="wpcf7cf_group"]) sont affichés et masqués par elle seule.
 */

:is(.annad-form, .wpcf7-form) {
	--annad-form-gap: 1.25rem; /* entre deux champs */
	--annad-form-label-gap: 0.5rem; /* entre un libellé et son champ */
	--annad-form-text: var(--color-on-surface);
	--annad-form-muted: color-mix(in srgb, var(--color-on-surface) 70%, transparent);
	--annad-form-field-text: var(--color-text);
	--annad-form-field-bg: var(--color-surface-2);
	--annad-form-field-line: var(--color-border);
	--annad-form-radius: 0.625rem;
	--annad-form-focus: var(--color-brand-green);
	--annad-form-submit-text: var(--color-on-surface-light);
	--annad-form-submit-bg: var(--color-surface-light);
	--annad-form-error: #ff8a80; /* hors palette : rouge lisible sur fond sombre */
	--annad-form-error-text: #ffb4ab;

	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--annad-form-gap) 1.5rem;
	color: var(--annad-form-text);
}

/* Carte claire : mêmes règles, jetons du socle clair (light-zone.css) */
:is(.annad-light-page, .annad-light-zone) :is(.annad-form, .wpcf7-form) {
	--annad-form-text: var(--color-on-surface-light);
	--annad-form-muted: var(--light-muted);
	--annad-form-field-text: var(--color-on-surface-light);
	--annad-form-field-bg: var(--light-field);
	--annad-form-field-line: var(--light-line);
	--annad-form-radius: var(--light-radius);
	--annad-form-focus: var(--color-on-surface-light);
	--annad-form-submit-text: var(--color-on-surface);
	--annad-form-submit-bg: var(--color-on-surface-light);
	--annad-form-error: #d93025;
	--annad-form-error-text: #8a1c14;
}

/* ---------- Disposition ---------- */
/* Chaque enfant direct (paragraphe de champ, groupe conditionnel, message) occupe toute la largeur ;
   .annad-half le ramène à une colonne dès que la grille en a deux. */

@media (min-width: 40em) {
	:is(.annad-form, .wpcf7-form) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

:is(.annad-form, .wpcf7-form) > * {
	grid-column: 1 / -1;
	min-width: 0;
	margin-block: 0;
}

@media (min-width: 40em) {
	:is(.annad-form, .wpcf7-form) > .annad-half {
		grid-column: auto;
	}
}

/* Paragraphes d'un groupe conditionnel : même écart que les enfants directs du formulaire */
:is(.annad-form, .wpcf7-form) [data-class="wpcf7cf_group"] > * {
	margin-block: 0;
}

:is(.annad-form, .wpcf7-form) [data-class="wpcf7cf_group"] > * + * {
	margin-top: var(--annad-form-gap);
}

/* ---------- Libellé et champ ---------- */
/* CF7 sépare le libellé du champ par un <br>. Le champ étant en bloc, ce retour ajoutait une ligne
   vide : le libellé se retrouvait à mi-chemin, plus près du champ PRÉCÉDENT que du sien. Retours
   neutralisés, l'écart est porté par --annad-form-label-gap. */
:is(.annad-form, .wpcf7-form) :is(p, label) > br {
	display: none;
}

:is(.annad-form, .wpcf7-form) label {
	display: block;
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0;
	text-transform: none;
	color: var(--annad-form-text);
}

/* <span class="wpcf7-form-control-wrap"> est en ligne : en bloc, le champ prend la largeur et se
   range sous son libellé, que celui-ci soit un <label> frère, un <label> parent ou un texte nu. */
:is(.annad-form, .wpcf7-form) .wpcf7-form-control-wrap {
	display: block;
	margin-top: var(--annad-form-label-gap);
}

/* Libellé écrit en texte nu dans le paragraphe du champ (« N° commande : [champ] », sans <label>) :
   même graisse et même taille qu'un <label>. Les choix d'une liste de cases restent en texte courant. */
:is(.annad-form, .wpcf7-form) p:has(> .wpcf7-form-control-wrap):not(.annad-consent) {
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.35;
}

:is(.annad-form, .wpcf7-form) .wpcf7-list-item-label {
	font-size: 1rem;
	font-weight: 400;
}

:is(.annad-form, .wpcf7-form) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]):not([type="hidden"]), select, textarea) {
	width: 100%;
	max-width: 100%;
	min-height: 2.75rem;
	padding: 0.625rem 0.875rem;
	font: inherit;
	font-weight: 400; /* le libellé parent est en gras : `font: inherit` le transmettrait au champ */
	line-height: 1.4;
	color: var(--annad-form-field-text);
	background-color: var(--annad-form-field-bg);
	border: 1px solid var(--annad-form-field-line);
	border-radius: var(--annad-form-radius);
}

:is(.annad-form, .wpcf7-form) textarea {
	min-height: 8rem;
	resize: vertical;
}

:is(.annad-form, .wpcf7-form) ::placeholder {
	color: var(--annad-form-muted);
	opacity: 1;
}

/* Listes déroulantes : chevron dessiné en CSS, flèche native retirée */
:is(.annad-form, .wpcf7-form) select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 2.25rem;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: right 1.125rem center, right 0.875rem center;
	background-size: 0.375rem 0.375rem;
	background-repeat: no-repeat;
}

/* Sélecteur de date : l'icône native est noire, illisible sur un champ sombre */
:is(.annad-form, .wpcf7-form) input[type="date"] {
	color-scheme: dark;
}

:is(.annad-light-page, .annad-light-zone) :is(.annad-form, .wpcf7-form) input[type="date"] {
	color-scheme: light;
}

:is(.annad-form, .wpcf7-form) input[type="file"] {
	max-width: 100%;
	font: inherit;
	font-size: 0.875rem;
	color: var(--annad-form-muted);
}

:is(.annad-form, .wpcf7-form) :is(input, select, textarea):focus-visible {
	outline: 2px solid var(--annad-form-focus);
	outline-offset: 2px;
}

:is(.annad-form, .wpcf7-form) :is(.annad-required, .wpcf7-required) {
	color: var(--annad-form-error);
}

:is(.annad-form, .wpcf7-form) a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* ---------- Cases à cocher et boutons radio ---------- */
/* Markup de CF7 : .wpcf7-checkbox|.wpcf7-radio|.wpcf7-acceptance > .wpcf7-list-item
   > [label >] input + .wpcf7-list-item-label. Options côte à côte, à la ligne si elles ne tiennent pas. */

:is(.annad-form, .wpcf7-form) :is(.wpcf7-checkbox, .wpcf7-radio, .wpcf7-acceptance) {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem 1.5rem;
}

:is(.annad-form, .wpcf7-form) .wpcf7-list-item {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
}

:is(.annad-form, .wpcf7-form) .wpcf7-list-item > label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 400;
	cursor: pointer;
}

:is(.annad-form, .wpcf7-form) input:is([type="checkbox"], [type="radio"]) {
	flex: 0 0 auto;
	width: 1.25rem;
	height: 1.25rem;
	margin: 0;
	accent-color: var(--color-brand-green);
}

/* ---------- Ligne de consentement (.annad-consent) ---------- */
/* Texte à gauche, case à droite du texte ; le paragraphe du bouton d'envoi la suit. */

:is(.annad-form, .wpcf7-form) .annad-consent {
	font-size: 0.875rem;
}

:is(.annad-form, .wpcf7-form) .annad-consent .wpcf7-form-control-wrap {
	margin-top: 0;
}

:is(.annad-form, .wpcf7-form) .annad-consent .wpcf7-list-item > label {
	flex-direction: row-reverse;
	gap: 0.75rem;
}

/* ---------- Bouton d'envoi ---------- */
/* CF7 rend un <input type="submit" class="wpcf7-submit"> (pas un <button>) ; .annad-form accepte les
   deux. Jamais vert : le vert reste réservé aux boutons d'achat. Le texte qui suit parfois le bouton
   dans le même paragraphe (mention sur les données personnelles) passe dessous, en petit. */

:is(.annad-form, .wpcf7-form) :is(.wpcf7-submit, input[type="submit"], button[type="submit"]) {
	appearance: none;
	-webkit-appearance: none;
	display: inline-block;
	vertical-align: middle;
	width: auto;
	min-height: 2.75rem;
	margin: 0 0 0.75rem;
	padding: 0.625rem 2rem;
	font: inherit;
	font-weight: 700;
	line-height: 1.2;
	color: var(--annad-form-submit-text);
	background-color: var(--annad-form-submit-bg);
	border: 0;
	border-radius: var(--annad-form-radius);
	box-shadow: none;
	cursor: pointer;
	transition: background-color var(--annad-transition-fast) var(--annad-ease);
}

:is(.annad-form, .wpcf7-form) :is(.wpcf7-submit, input[type="submit"], button[type="submit"]):hover {
	color: var(--annad-form-submit-text);
	background-color: color-mix(in srgb, var(--annad-form-submit-bg) 85%, var(--annad-form-field-bg));
}

:is(.annad-form, .wpcf7-form) :is(.wpcf7-submit, input[type="submit"], button[type="submit"]):focus-visible {
	outline: 2px solid var(--annad-form-focus);
	outline-offset: 3px;
}

:is(.annad-form, .wpcf7-form) p:has(> :is(.wpcf7-submit, input[type="submit"], button[type="submit"])) {
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--annad-form-muted);
}

/* Le retour à la ligne qui suit le bouton est le seul conservé : la mention passe sous le bouton,
   l'indicateur d'envoi de CF7 (inséré juste après le bouton) reste à sa droite. */
:is(.annad-form, .wpcf7-form) :is(.wpcf7-submit, input[type="submit"], button[type="submit"]) ~ br {
	display: inline;
}

:is(.annad-form, .wpcf7-form) .wpcf7-spinner {
	margin: 0 0 0.75rem 0.75rem;
	vertical-align: middle;
}

/* Bouton calé à droite quand son paragraphe suit la ligne de consentement (formulaire « Pro ») */
:is(.annad-form, .wpcf7-form) .annad-consent + p {
	text-align: right;
}

:is(.annad-form, .wpcf7-form) .annad-consent + p > :is(.wpcf7-submit, input[type="submit"], button[type="submit"]),
:is(.annad-form, .wpcf7-form) .annad-consent + p > .wpcf7-spinner {
	margin-bottom: 0;
}

/* ---------- Messages de CF7 (validation, envoi, erreur) ---------- */
/* Aux couleurs du thème plutôt qu'aux bordures par défaut de l'extension. Sélecteurs préfixés par
   `form` : à égalité avec ceux de CF7 (`.wpcf7 form.sent .wpcf7-response-output`), dont la feuille
   est chargée avant celle-ci. */

form:is(.annad-form, .wpcf7-form) .wpcf7-response-output {
	margin: 0;
	padding: 0.75rem 1rem;
	font-size: 0.875rem;
	border: 1px solid var(--annad-form-field-line);
	border-radius: var(--annad-form-radius);
}

form:is(.annad-form, .wpcf7-form).sent .wpcf7-response-output {
	background-color: color-mix(in srgb, var(--color-brand-green) 30%, transparent);
	border-color: var(--color-brand-green);
}

form:is(.annad-form, .wpcf7-form):is(.invalid, .unaccepted, .failed, .aborted, .spam) .wpcf7-response-output {
	color: var(--annad-form-error-text);
	background-color: color-mix(in srgb, var(--annad-form-error) 12%, transparent);
	border-color: var(--annad-form-error);
}

:is(.annad-form, .wpcf7-form) .wpcf7-not-valid-tip {
	margin-top: 0.375rem;
	font-size: 0.8125rem;
	font-weight: 400;
	color: var(--annad-form-error-text);
}

:is(.annad-form, .wpcf7-form) .wpcf7-not-valid {
	border-color: var(--annad-form-error);
}

/* ---------- Plusieurs formulaires à la suite (page « Nous contacter ») ---------- */
/* Chaque formulaire s'ouvre par une case (« SAV », « Professionnel »…) qui déplie ses champs :
   sans écart, les quatre cases se touchent. */
.wpcf7 + .wpcf7 {
	margin-top: 1.25rem;
}

@media (prefers-reduced-motion: reduce) {
	:is(.annad-form, .wpcf7-form) :is(.wpcf7-submit, input[type="submit"], button[type="submit"]) {
		transition: none;
	}
}