/* ==========================================================================
   contact-form-block.css — Bloc « Formulaire de Contact » (ombre/contact-form-block).
   - Layout 1 colonne (container--narrow), titre + intro + formulaire CF7
   - Le CSS par défaut de CF7 est désactivé (filter wpcf7_load_css → false dans functions.php)
     donc tous les styles CF7 sont contrôlés ici (.wpcf7-* selectors).
   ========================================================================== */

.contact-form-block {
	position: relative;
	color: inherit;
	padding-block: clamp(var(--space-2xl), 8vw, var(--space-3xl));
}

.contact-form-block.alignfull {
	margin-inline: calc(50% - 50vw);
	width: 100vw;
	max-width: 100vw;
}

.contact-form-block__inner {
	display: flex;
	flex-direction: column;
	gap: clamp(var(--space-xl), 4vw, var(--space-2xl));
}

/* ----------------------------------------- Header */

.contact-form-block__header {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.contact-form-block__title {
	font-family: var(--font-display);
	font-size: var(--fs-3xl);
	font-weight: var(--fw-bold);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
	margin: 0;
	color: inherit;
	text-wrap: balance;
}

.contact-form-block__intro {
	font-size: var(--fs-base);
	line-height: var(--lh-relaxed);
	color: var(--color-text-muted);
	max-width: 64ch;
}

.contact-form-block__intro p {
	margin: 0 0 var(--space-sm);
}

.contact-form-block__intro p:last-child {
	margin-bottom: 0;
}

/* ----------------------------------------- Notices (CF7 absent / invalid / preview) */

.contact-form-block__notice {
	font-size: var(--fs-sm);
	line-height: var(--lh-relaxed);
	color: var(--color-text-muted);
	padding: var(--space-md);
	border: 1px dashed var(--color-border-strong);
	border-radius: var(--radius-md);
	margin: 0;
}

.contact-form-block__notice--admin {
	color: var(--color-warning);
	border-color: var(--color-warning);
	background: rgba(192, 140, 46, 0.08);
}

.contact-form-block__notice code {
	font-family: var(--font-mono);
	font-size: 0.9em;
	background: var(--color-surface-alt);
	padding: 2px 6px;
	border-radius: var(--radius-sm);
}

/* ==========================================================================
   Override CF7 — styles du formulaire généré par le plugin.
   Le CSS par défaut de CF7 étant désactivé, c'est ici qu'on définit l'apparence.
   ========================================================================== */

.contact-form-block .wpcf7 {
	max-width: 100%;
}

.contact-form-block .wpcf7-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

/* CF7 enveloppe chaque champ dans un <p> par défaut. On reset juste les marges
   et on laisse le flow normal — surtout pas de flex-column sur le <label>,
   qui éclaterait le texte et le marqueur d'obligation sur deux lignes. */
.contact-form-block .wpcf7-form > p {
	margin: 0;
}

/* ----------------------------------------- Labels */

.contact-form-block .wpcf7-form label {
	display: block;
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	color: var(--color-text);
	letter-spacing: var(--ls-wide);
	line-height: var(--lh-snug);
}

.contact-form-block .wpcf7-form label .required {
	color: var(--color-accent);
	margin-left: 4px;
	font-weight: var(--fw-bold);
}

/* ----------------------------------------- Inputs / textareas / selects */

/* Le wrap CF7 est inline par défaut ; on le passe en block pour mettre le champ
   sur la ligne suivante du label, avec une petite marge sous le texte du label. */
.contact-form-block .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
	margin-top: var(--space-2xs);
}

.contact-form-block .wpcf7-form input[type="text"],
.contact-form-block .wpcf7-form input[type="email"],
.contact-form-block .wpcf7-form input[type="tel"],
.contact-form-block .wpcf7-form input[type="url"],
.contact-form-block .wpcf7-form input[type="number"],
.contact-form-block .wpcf7-form input[type="date"],
.contact-form-block .wpcf7-form select,
.contact-form-block .wpcf7-form textarea {
	width: 100%;
	max-width: 100%;
	padding: var(--space-sm) var(--space-md);
	background: var(--color-surface);
	color: var(--color-text);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-sm);
	font-family: var(--font-sans);
	font-size: var(--fs-base);
	line-height: var(--lh-snug);
	transition:
		border-color var(--duration-fast) var(--ease-out),
		background-color var(--duration-fast) var(--ease-out),
		box-shadow var(--duration-fast) var(--ease-out);
	-webkit-appearance: none;
	appearance: none;
}

.contact-form-block .wpcf7-form textarea {
	min-height: 140px;
	resize: vertical;
	line-height: var(--lh-relaxed);
}

.contact-form-block .wpcf7-form input::placeholder,
.contact-form-block .wpcf7-form textarea::placeholder {
	color: var(--color-text-muted);
	opacity: 0.7;
}

.contact-form-block .wpcf7-form input:hover,
.contact-form-block .wpcf7-form select:hover,
.contact-form-block .wpcf7-form textarea:hover {
	border-color: var(--color-text-muted);
}

.contact-form-block .wpcf7-form input:focus,
.contact-form-block .wpcf7-form select:focus,
.contact-form-block .wpcf7-form textarea:focus {
	outline: none;
	border-color: var(--color-accent);
	background: var(--color-surface-alt);
	box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.20);
}

/* ----------------------------------------- Validation : champ invalide */

.contact-form-block .wpcf7-not-valid {
	border-color: var(--color-danger);
	box-shadow: 0 0 0 3px rgba(184, 61, 61, 0.12);
}

.contact-form-block .wpcf7-not-valid-tip {
	display: block;
	margin-top: var(--space-2xs);
	font-size: var(--fs-xs);
	color: var(--color-danger);
	font-weight: var(--fw-medium);
	letter-spacing: 0;
}

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

.contact-form-block .wpcf7-submit {
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);
	padding: var(--space-sm) var(--space-lg);
	background: var(--color-accent);
	color: var(--color-text);
	border: 0;
	border-radius: var(--radius-sm);
	font-family: var(--font-sans);
	font-size: var(--fs-base);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	cursor: pointer;
	box-shadow: var(--shadow-sm);
	transition:
		background var(--duration-fast) var(--ease-out),
		transform var(--duration-fast) var(--ease-out),
		box-shadow var(--duration-fast) var(--ease-out);
	align-self: flex-start;
}

.contact-form-block .wpcf7-submit:hover,
.contact-form-block .wpcf7-submit:focus-visible {
	background: var(--color-accent-dark);
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

.contact-form-block .wpcf7-submit:focus-visible {
	outline: 2px solid var(--color-text);
	outline-offset: 3px;
}

.contact-form-block .wpcf7-submit:disabled,
.contact-form-block .wpcf7-submit[aria-disabled="true"] {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
}

/* ----------------------------------------- Spinner CF7 */

.contact-form-block .wpcf7-spinner {
	display: inline-block;
	width: 18px;
	height: 18px;
	margin-left: var(--space-sm);
	vertical-align: middle;
	background: transparent;
	border: 2px solid var(--color-text-muted);
	border-top-color: var(--color-accent);
	border-radius: 50%;
	animation: ombre-cf7-spin 0.8s linear infinite;
	visibility: hidden;
}

.contact-form-block .wpcf7-spinner.is-active,
.contact-form-block form.submitting .wpcf7-spinner {
	visibility: visible;
}

@keyframes ombre-cf7-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.contact-form-block .wpcf7-spinner {
		animation: none;
	}
}

/* ----------------------------------------- Messages de réponse (success / error globaux) */

/* État vide : CF7 marque la sortie aria-hidden="true" — on la rend invisible mais reservée
   pour éviter des sauts visuels au moment de l'apparition. */
.contact-form-block .wpcf7-response-output[aria-hidden="true"]:empty,
.contact-form-block .wpcf7-response-output:empty {
	display: none;
}

.contact-form-block .wpcf7-response-output {
	margin: 0 0 var(--space-md);
	padding: var(--space-md) var(--space-lg);
	border-left: 3px solid var(--color-accent);
	border-radius: var(--radius-sm);
	font-size: var(--fs-sm);
	line-height: var(--lh-relaxed);
	background: var(--color-surface-alt);
	color: var(--color-text);
}

/* CF7 6+ peut empiler la liste des erreurs sous le message principal. */
.contact-form-block .wpcf7-response-output ul {
	margin: var(--space-2xs) 0 0;
	padding-left: var(--space-md);
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
}

.contact-form-block .wpcf7-response-output li {
	margin-bottom: 2px;
}

.contact-form-block form.sent .wpcf7-response-output {
	border-left-color: var(--color-success);
	background: rgba(61, 107, 61, 0.15);
}

.contact-form-block form.invalid .wpcf7-response-output,
.contact-form-block form.unaccepted .wpcf7-response-output,
.contact-form-block form.failed .wpcf7-response-output,
.contact-form-block form.spam .wpcf7-response-output {
	border-left-color: var(--color-danger);
	background: rgba(184, 61, 61, 0.15);
}

/* ----------------------------------------- Honeypot — toujours masqué visuellement, accessible aux bots */

.contact-form-block .wpcf7-form .wpcf7form-honeypot,
.contact-form-block .wpcf7-form input[name="website-name"] {
	position: absolute !important;
	left: -10000px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* ----------------------------------------- Screen-reader response (a11y CF7)
   CF7 émet `<div class="screen-reader-response">` qui annonce le résultat de l'envoi
   aux lecteurs d'écran. Avec le CSS par défaut de CF7 désactivé, cet élément devient
   visible. On reproduit le pattern sr-only standard : invisible à l'œil mais TOUJOURS
   présent dans l'arbre d'accessibilité (raison pour laquelle `visibility: hidden` ou
   `display: none` sont à proscrire — ils retireraient l'annonce des lecteurs d'écran). */
.contact-form-block .screen-reader-response {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ----------------------------------------- Hidden-fields container
   CF7 enveloppe ses champs cachés (_wpcf7, _wpcf7_version, …) dans un <fieldset>.
   Le navigateur applique des bordures par défaut sur fieldset, ce qui produit
   un trait fantôme visible avant le formulaire. `display: contents` retire la boîte
   du fieldset du rendu mais préserve ses enfants (les inputs hidden continuent à
   être soumis normalement). */
.contact-form-block .wpcf7-form .hidden-fields-container {
	display: contents;
}

/* ----------------------------------------- États initiaux pour l'animation GSAP */

.contact-form-block[data-contact-form] .contact-form-block__header,
.contact-form-block[data-contact-form] .contact-form-block__form {
	opacity: 0;
	transform: translateY(24px);
}

.contact-form-block.is-animated .contact-form-block__header,
.contact-form-block.is-animated .contact-form-block__form {
	opacity: 1;
	transform: none;
}

/* ----------------------------------------- Responsive */

@media (max-width: 600px) {
	.contact-form-block__title {
		font-size: var(--fs-2xl);
	}

	.contact-form-block .wpcf7-submit {
		width: 100%;
	}
}

/* ----------------------------------------- Reduced motion */

@media (prefers-reduced-motion: reduce) {
	.contact-form-block[data-contact-form] .contact-form-block__header,
	.contact-form-block[data-contact-form] .contact-form-block__form {
		opacity: 1;
		transform: none;
	}

	.contact-form-block .wpcf7-form input,
	.contact-form-block .wpcf7-form select,
	.contact-form-block .wpcf7-form textarea,
	.contact-form-block .wpcf7-submit {
		transition: none;
	}

	.contact-form-block .wpcf7-submit:hover,
	.contact-form-block .wpcf7-submit:focus-visible {
		transform: none;
	}
}