/* Composant : contact-form (habillage de Contact Form 7)
   Ne cible que les classes stables générées par CF7 lui-même
   (wpcf7-form-control, wpcf7-form-control-wrap, wpcf7-submit, wpcf7-response-output,
   wpcf7-not-valid-tip, .sent/.failed/.invalid/.spam sur .wpcf7-form) : jamais le
   balisage libre que l'admin écrit dans l'éditeur du formulaire (labels, <p>...),
   qui reste hors du contrôle de ce composant — voir CLAUDE.md du thème (le
   formulaire est géré depuis Contact → Formulaires, pas depuis ce composant).
   Trois exceptions documentées, volontairement écrites à la main dans le
   formulaire de ce site : ".cf7-row" (ci-dessous), ".component-contact-form__file-label"
   et ".component-contact-form__required-legend" (plus bas, section "Champs"). */

.component-contact-form {
	padding-top: var(--component-space-normal);
	padding-bottom: var(--component-space-normal);
	background: var(--component-color-bg);
}

.component-contact-form--theme-dark {
	background: var(--component-color-surface-dark);
}

.component-contact-form__intro {
	margin-bottom: 2rem;
	max-width: 640px;
}

.component-contact-form--columns .component-contact-form__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2.5rem;
	align-items: start;
}

@media (min-width: 768px) {
	.component-contact-form--columns .component-contact-form__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
		gap: 3.5rem;
	}

	.component-contact-form--columns .component-contact-form__intro {
		margin-bottom: 0;
	}
}

.component-contact-form__eyebrow {
	margin: 0 0 0.5em;
	color: var(--component-color-primary);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 0.85rem;
}

.component-contact-form__title {
	margin: 0 0 0.6em;
	color: var(--component-color-dark);
}

.component-contact-form--theme-dark .component-contact-form__eyebrow,
.component-contact-form--theme-dark .component-contact-form__title {
	color: var(--component-color-text-invert);
}

.component-contact-form__text {
	color: var(--component-color-text);
	line-height: 1.7;
}

.component-contact-form--theme-dark .component-contact-form__text {
	color: var(--component-color-text-invert);
	opacity: 0.85;
}

/* -- Champs (balisage généré par CF7 : wpcf7-form-control-wrap / wpcf7-form-control) -- */

/* wpautop() (WordPress) enveloppe chaque champ isolé (Sujet, Message...) dans un
   vrai <p>, avec la marge par défaut du navigateur (~1em) — alors qu'un champ dans
   .cf7-row a son <p> neutralisé (display: contents, donc sans marge, voir plus
   haut). Résultat vérifié : l'écart après "Téléphone" (dans un .cf7-row) faisait
   17.6px, celui après "Sujet" (dans un <p> normal) 33.6px — le double, incohérent.
   On neutralise cette marge de <p> partout : seul .wpcf7-form-control-wrap ci-dessous
   pilote l'espacement vertical, de façon uniforme, que le champ soit dans un
   .cf7-row ou non. */
.component-contact-form__form p {
	margin: 0;
}

.component-contact-form__form .wpcf7-form-control-wrap {
	display: block;
	margin-bottom: 1.1rem;
}

/* Légende "* Champs obligatoires" (".component-contact-form__required-legend",
   voir l'en-tête de ce fichier) : le formulaire n'a que des placeholders, jamais
   de <label> visible — un placeholder disparaît dès la première frappe, donc
   l'astérisque qu'il contient ("Prénom *"...) ne suffit pas seul une fois le champ
   rempli ; cette légende reste, elle, affichée en permanence en tête de formulaire. */
.component-contact-form__form .component-contact-form__required-legend {
	margin-bottom: 1.1rem;
	color: var(--component-color-meta);
	font-size: 0.85rem;
}

.component-contact-form--theme-dark .component-contact-form__required-legend {
	color: var(--component-color-text-invert);
	opacity: 0.7;
}

/* Utilitaire ".cf7-row" (voir aussi ".component-contact-form__file-label" plus bas,
   même principe — le reste de ce fichier ne cible que les classes stables de CF7,
   jamais le balisage libre de l'admin, voir l'en-tête de ce fichier). À écrire à la
   main autour de deux champs dans
   l'onglet "Formulaire" de Contact Form 7 pour les afficher côte à côte (ex.
   Prénom/Nom) plutôt qu'empilés — recette documentée une fois ici plutôt que du
   CSS enfoui dans le contenu de chaque formulaire :
     <div class="cf7-row">[text* your-firstname] [text* your-lastname]</div>
   Empilé sur mobile (les deux champs restent lisibles en dessous de ~480px), deux
   colonnes égales au-delà.

   `wpautop()` (WordPress) reformate ce balisage brut AVANT que CF7 ne le rende :
   les deux champs, écrits sur deux lignes sans ligne vide entre elles, finissent
   TOUS LES DEUX à l'intérieur d'un seul <p>, séparés par un <br> — .cf7-row n'a
   donc qu'un seul enfant direct (ce <p>), pas les deux champs, et la grille
   n'a rien à répartir sur 2 colonnes (vérifié dans le HTML généré). `display:
   contents` neutralise ce <p> pour le calcul de la grille (ses enfants
   deviennent directement les éléments de la grille) sans dépendre du balisage
   exact que wpautop() produit ; le <br> qu'il insère est masqué. */
.component-contact-form__form .cf7-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 1rem;
}

.component-contact-form__form .cf7-row > p {
	display: contents;
}

.component-contact-form__form .cf7-row br {
	display: none;
}

@media (min-width: 480px) {
	.component-contact-form__form .cf7-row {
		grid-template-columns: 1fr 1fr;
	}
}

/* Utilitaire ".component-contact-form__file-label" (voir ".cf7-row" ci-dessus, même
   principe) : un <input type="file"> ne supporte pas de placeholder — seul champ du
   formulaire sans aucune indication de ce qui est attendu sans ce label explicite,
   écrit à la main autour du champ dans l'onglet "Formulaire" de CF7 :
     <label class="component-contact-form__file-label">Pièce jointe (optionnel) — …
     [file your-attachment …]</label>
   Un vrai <label> (pas juste un texte au-dessus) : cliquer sur le texte ouvre aussi
   le sélecteur de fichier, et un lecteur d'écran l'annonce correctement associé au
   champ — un <div> séparé n'aurait ni l'un ni l'autre. */
.component-contact-form__form .component-contact-form__file-label {
	display: block;
	margin-bottom: 1.1rem;
	color: var(--component-color-text);
	font-size: 0.9rem;
}

.component-contact-form--theme-dark .component-contact-form__file-label {
	color: var(--component-color-text-invert);
	opacity: 0.85;
}

.component-contact-form__form .component-contact-form__file-label .wpcf7-form-control-wrap {
	margin-top: 0.5rem;
	margin-bottom: 0;
}

.component-contact-form__form .wpcf7-form-control:not([type="checkbox"], [type="radio"], [type="submit"]) {
	display: block;
	width: 100%;
	padding: 12px 16px;
	border: 1px solid var(--component-color-border);
	border-radius: var(--component-radius);
	background: var(--component-color-bg);
	color: var(--component-color-text);
	font-family: var(--component-font-family);
	font-size: var(--component-font-size-text);
	box-sizing: border-box;
	transition: border-color var(--component-transition), box-shadow var(--component-transition);
}

.component-contact-form--theme-dark .wpcf7-form-control:not([type="checkbox"], [type="radio"], [type="submit"]) {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.2);
	color: var(--component-color-text-invert);
}

.component-contact-form__form textarea.wpcf7-form-control {
	min-height: 140px;
	resize: vertical;
}

.component-contact-form__form .wpcf7-form-control:focus {
	outline: none;
	border-color: var(--component-color-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--component-color-primary) 25%, transparent);
}

/* État invalide : déclenché par CF7 dès la sortie du champ (évènement "change"),
   pas seulement à l'envoi du formulaire — voir includes/js/index.js de CF7. Une
   simple bordure rouge fine passait inaperçue (bordure déjà grise par défaut, peu
   de contraste) : fond teinté + bordure plus épaisse pour un signal impossible à
   manquer, cohérent avec le badge d'icône ci-dessous. `[aria-invalid="true"]` en
   plus de `.wpcf7-not-valid` : CF7 pose systématiquement les deux, mais l'attribut
   ARIA est la source la plus stable dans le temps (pas dépendant d'un nom de
   classe interne à une version de CF7). */
.component-contact-form__form .wpcf7-form-control.wpcf7-not-valid,
.component-contact-form__form .wpcf7-form-control[aria-invalid="true"] {
	border-width: 2px;
	border-color: #dc2626;
	background: #fef2f2;
}

.component-contact-form--theme-dark .wpcf7-form-control.wpcf7-not-valid,
.component-contact-form--theme-dark .wpcf7-form-control[aria-invalid="true"] {
	background: rgba(220, 38, 38, 0.15);
}

.component-contact-form__form .wpcf7-not-valid-tip {
	display: flex;
	align-items: center;
	gap: 0.4em;
	margin-top: 0.35rem;
	font-weight: 600;
	/* Couleur sémantique (message d'erreur de champ), volontairement non liée à
	   l'identité visuelle du site — même exception que .component-testimonials__rating,
	   voir CLAUDE.md §6.1. */
	color: #dc2626;
	font-size: 0.85rem;
}

/* Icône d'alerte dessinée en CSS (cercle + point d'exclamation), pas une police
   d'icônes — même convention que les flèches/chevrons du slider
   (assets/css/components/slider.css). `aria-hidden` posé côté HTML par CF7 lui-même
   sur ce conteneur n'est pas garanti ; le contenu textuel du message porte déjà
   l'information, cette icône est donc purement décorative ici. */
.component-contact-form__form .wpcf7-not-valid-tip::before {
	content: "!";
	flex: 0 0 auto;
	display: block;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #dc2626;
	color: var(--component-color-bg);
	font-size: 0.7rem;
	line-height: 14px;
	text-align: center;
	font-weight: 700;
}

/* -- Bouton d'envoi (réutilise .component-button du thème, voir style.css) -- */
.component-contact-form__form .wpcf7-submit {
	display: inline-block;
	padding: 14px 28px;
	border: 2px solid transparent;
	border-radius: var(--component-radius);
	background: var(--component-color-primary);
	color: var(--component-color-button-font);
	font-weight: 600;
	font-family: var(--component-font-family);
	font-size: var(--component-font-size-text);
	cursor: pointer;
	transition: background var(--component-transition), transform var(--component-transition);
}

.component-contact-form__form .wpcf7-submit:hover,
.component-contact-form__form .wpcf7-submit:focus-visible {
	background: var(--component-color-primary-dark);
	transform: translateY(-1px);
}

.component-contact-form__form .wpcf7-submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
}

.component-contact-form__form .wpcf7-spinner {
	margin-left: 0.6em;
}

/* -- Message de résultat (envoyé / échec / invalide) -- */
.component-contact-form__form .wpcf7-response-output {
	margin-top: 1.25rem;
	padding: 0.85rem 1rem;
	border-radius: var(--component-radius);
	border: 1px solid var(--component-color-border);
	color: var(--component-color-text);
}

/* Couleurs sémantiques d'état (succès/erreur), non liées à l'identité visuelle du
   site — mêmes exceptions documentées que .wpcf7-not-valid-tip ci-dessus. */
.component-contact-form__form form.sent .wpcf7-response-output {
	border-color: #86efac;
	background: #f0fdf4;
	color: #166534;
}

.component-contact-form__form form.failed .wpcf7-response-output,
.component-contact-form__form form.spam .wpcf7-response-output,
.component-contact-form__form form.aborted .wpcf7-response-output {
	border-color: #fca5a5;
	background: #fef2f2;
	color: #991b1b;
}

.component-contact-form__form form.invalid .wpcf7-response-output,
.component-contact-form__form form.unaccepted .wpcf7-response-output {
	border-color: #fde68a;
	background: #fffbeb;
	color: #92400e;
}

@media (prefers-reduced-motion: reduce) {
	.component-contact-form__form .wpcf7-form-control,
	.component-contact-form__form .wpcf7-submit {
		transition: none;
	}
}