/* =====================================================================
   ANIMA — FORMULAIRES (sous-étape 2.2)
   B3 : décisions 60 (Contact Form 7) et 65 (recherche).
   Libellés Inter 500 15 px ; champs de 48 px (message 150 px), bordure
   1,5 px #6B7F95, coins 6 px ; focus : bordure et contour bleus 3 px ;
   erreur : bordure #B42318 et message rouge sous le champ ; envoi réussi :
   bandeau vert avec icône.
   Contact Form 7 est habillé uniquement par cette feuille de style : aucun
   réglage ni fichier de l'extension n'est modifié (décision 8 de Nicolas).
   ===================================================================== */

/* ===== Champs : classes du thème et Contact Form 7 ===== */
.champ { margin-bottom: 18px; }
.champ label,
.wpcf7-form label { font-size: 15px; font-weight: 500; line-height: 1.6; color: var(--couleur-texte); }
.champ > label { display: block; margin-bottom: 6px; }
.wpcf7-form label .aide { display: block; margin: 2px 0 0; } /* aide écrite dans l'étiquette : sous le libellé (2.8) */
.champ .aide,
.wpcf7-form .aide { font-size: 14px; font-weight: 400; line-height: 1.45; color: var(--couleur-texte-secondaire); margin: -2px 0 6px; }

.champ :where(input:not([type="checkbox"], [type="radio"], [type="submit"]), textarea, select),
.liste-deroulante,
.wpcf7-form :where(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="hidden"]), textarea, select) {
	display: block; width: 100%; height: 48px; padding: 0 12px; margin: 0;
	border: 1.5px solid var(--couleur-bordure-champ); border-radius: var(--arrondi-champ);
	background-color: var(--couleur-blanc); color: var(--couleur-texte);
	font-family: var(--police-texte); font-size: 16px; font-weight: 400; line-height: var(--interligne-texte);
	box-shadow: none;
}
.champ textarea,
.wpcf7-form textarea { height: 150px; padding: 12px; resize: vertical; }
.champ select, .liste-deroulante, .wpcf7-form select {
	-webkit-appearance: none; appearance: none; padding-right: 40px; cursor: pointer;
	background: var(--couleur-blanc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B2545' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 12px center / 20px no-repeat;
}
.champ :is(input, textarea, select):focus,
.liste-deroulante:focus,
.wpcf7-form :is(input:not([type="checkbox"], [type="radio"], [type="submit"]), textarea, select):focus {
	outline: var(--focus); outline-offset: 0; border-color: var(--couleur-action);
}
:is(.champ, .wpcf7-form) ::placeholder { color: var(--couleur-texte-secondaire); opacity: 1; }

/* Erreur */
.champ.erreur :is(input, textarea, select),
.wpcf7-form .wpcf7-not-valid,
.wpcf7-form [aria-invalid="true"] { border-color: var(--couleur-erreur); }
.champ .message-erreur,
.wpcf7-not-valid-tip { display: block; margin-top: 6px; color: var(--couleur-erreur); font-size: 14px; font-weight: 400; line-height: 1.45; }

/* Cases à cocher et boutons radio (filtres, acceptation) */
.case { display: flex; gap: 10px; align-items: flex-start; padding: 5px 0; font-size: 15px; line-height: 1.35; cursor: pointer; }
.case input,
.wpcf7-form :is(input[type="checkbox"], input[type="radio"]) {
	width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--couleur-action); cursor: pointer;
}
.wpcf7-form .wpcf7-list-item { display: inline-flex; margin: 4px 16px 4px 0; }
.wpcf7-form .wpcf7-list-item > label { display: inline-flex; gap: 10px; align-items: flex-start; font-weight: 400; cursor: pointer; }
.wpcf7-form .wpcf7-list-item-label::before, .wpcf7-form .wpcf7-list-item-label::after { content: none; }

/* ===== Contact Form 7 : disposition ===== */
.wpcf7-form > p, .wpcf7-form > div:not(.wpcf7-response-output, .hidden-fields-container) { margin: 0 0 18px; }
.wpcf7-form > p > label { display: block; } /* 2.8 : étiquette en bloc, sinon la ligne du paragraphe (18 px) la décale de 5 px vers le bas */
.wpcf7-form label .wpcf7-form-control-wrap { display: block; margin-top: 6px; } /* champ sous son libellé (6 px) */
.wpcf7-form label br { display: none; } /* le saut de ligne de l'extension est remplacé par l'espace ci-dessus */
.wpcf7-form-control-wrap { position: relative; display: block; }

/* Bouton d'envoi : bouton principal avec flèche (« Envoyer → ») */
.wpcf7-form .wpcf7-submit,
.wpcf7-form button[type="submit"] {
	display: inline-flex; align-items: center; justify-content: center; width: auto;
	min-height: 48px; padding: 14px 52px 14px 24px; /* 52 = 24 + flèche 20 + écart 8 */
	border: 2px solid transparent; border-radius: var(--arrondi-bouton);
	background: var(--couleur-action) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") right 24px center / 20px no-repeat;
	color: var(--couleur-blanc); font-family: var(--police-texte); font-weight: 500;
	font-size: var(--texte-bouton); line-height: var(--interligne-bouton);
	cursor: pointer; -webkit-appearance: none; appearance: none;
	transition: background-color var(--duree-couleur);
}
.wpcf7-form .wpcf7-submit:hover, .wpcf7-form .wpcf7-submit:active,
.wpcf7-form button[type="submit"]:hover { background-color: var(--couleur-action-survol); }
.wpcf7-form .wpcf7-submit:disabled { background-color: var(--couleur-bordure); color: var(--couleur-texte-secondaire); cursor: not-allowed; }
.wpcf7-form .wpcf7-submit:focus:not(:focus-visible) { outline: none; }
.wpcf7-form .wpcf7-submit:focus-visible { outline: var(--focus); outline-offset: var(--focus-decalage); }
/* Téléphone : pleine largeur. Un bouton d'envoi de Contact Form 7 ne peut pas placer la flèche
   juste après son texte quand il est centré : la flèche est donc retirée sur téléphone. */
@media (max-width: 599.98px) {
	.wpcf7-form .wpcf7-submit, .wpcf7-form button[type="submit"] { width: 100%; padding-right: 24px; background-image: none; }
	/* 0.9.34 (remarque de Nicolas) : le rond « envoi en cours » de l'extension, invisible au repos, passait
	   sous le bouton pleine largeur et y ajoutait une ligne vide (≈ 27 px). Il est maintenant posé dans le bouton, à droite. */
	.wpcf7-form p:has(> .wpcf7-submit) { position: relative; }
	.wpcf7-form .wpcf7-submit ~ .wpcf7-spinner { position: absolute; top: 50%; right: 16px; margin: -12px 0 0; }
}
.wpcf7-spinner { vertical-align: middle; }

/* Message après l'envoi (texte actuel de Contact Form 7) */
.message-succes,
.wpcf7 form .wpcf7-response-output {
	display: flex; gap: 10px; align-items: center;
	margin: 18px 0 0; padding: 12px 16px;
	border: 1px solid var(--couleur-erreur); border-radius: var(--arrondi-champ);
	background: var(--couleur-blanc); color: var(--couleur-erreur);
	font-size: var(--texte-courant); font-weight: 500; line-height: var(--interligne-texte);
}
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output,
.wpcf7 form .wpcf7-response-output:empty { display: none; }
.message-succes,
.wpcf7 form.sent .wpcf7-response-output {
	background: var(--couleur-succes-fond); border-color: var(--couleur-succes); color: var(--couleur-succes);
}
.message-succes .icone { flex: none; }
.wpcf7 form.sent .wpcf7-response-output::before {
	content: ""; flex: none; width: 20px; height: 20px; background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%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 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ===== Vérification par image (extension « Contact Form 7 Image CAPTCHA ») =====
   Cases 52 × 44 px, bordure #C5D2E0 ; case choisie en bleu.
   2.8 : le cadre et le rouge de la feuille de l'extension sont neutralisés ; ses boutons radio,
   qu'elle masque complètement (display: none), redeviennent atteignables au clavier tout en
   restant invisibles. Balisage supposé d'après les versions connues de l'extension : à vérifier
   avec la vraie extension à l'étape 3. */
.captcha,
.wpcf7-form .captcha-image {
	display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; position: relative;
	border: 0; padding: 0; text-align: left;
}
.wpcf7-form .captcha-image .cf7ic_instructions { flex-basis: 100%; font-size: 15px; font-weight: 400; line-height: 1.6; }
.wpcf7-form .captcha-image .cf7ic_instructions span { color: inherit; font-weight: 700; }
.wpcf7-form .captcha-image label > :is(svg, i, img) { border: 0 !important; padding: 0; }
.captcha label,
.wpcf7-form .captcha-image label {
	position: relative; width: 52px; height: 44px; margin: 0;
	display: flex; align-items: center; justify-content: center;
	flex: none; line-height: 1;
	border: 1.5px solid var(--couleur-bordure); border-radius: var(--arrondi-champ);
	color: var(--couleur-marine); cursor: pointer;
	transition: border-color var(--duree-couleur), background-color var(--duree-couleur);
}
.captcha input,
.wpcf7-form .captcha-image input { display: block; position: absolute; opacity: 0; width: 1px; height: 1px; left: 0; top: 0; margin: 0; } /* invisible, gardé dans la case (évite un débordement sur téléphone) */
.captcha label svg, .wpcf7-form .captcha-image label svg { width: 22px; height: 22px; }
/* 3.9 : la feuille de l'extension impose « span.captcha-image > label { display: inline-block
   !important; width: auto !important; } » (vu sur la copie de test) : les cases devenaient
   étroites, le dessin collé en haut. On reprend la main, avec !important et une règle plus précise. */
.wpcf7-form .captcha-image > label { display: flex !important; width: 52px !important; }
.wpcf7-form .captcha-image label svg { display: block; flex: none; }
.wpcf7-form .captcha-image label:hover { border-color: var(--couleur-action); }
.captcha input:checked + label,
.wpcf7-form .captcha-image label:has(input:checked) { border-color: var(--couleur-action); background: var(--couleur-fond-pale); }
.captcha input:focus-visible + label,
.wpcf7-form .captcha-image label:has(input:focus-visible) { outline: var(--focus); outline-offset: 2px; }

/* ===== Bloc « Recherche » de WordPress (gabarits, page 404) ===== */
.wp-block-search__inside-wrapper { gap: 10px; }
.wp-block-search .wp-block-search__input {
	height: 52px; padding: 0 14px; margin: 0;
	border: 1.5px solid var(--couleur-bordure-champ); border-radius: var(--arrondi-champ);
	background: var(--couleur-blanc); color: var(--couleur-texte); font-family: var(--police-texte); font-size: 17px;
}
.wp-block-search .wp-block-search__input:focus { outline: var(--focus); outline-offset: 0; border-color: var(--couleur-action); }
.wp-block-search .wp-block-search__button { margin: 0; min-height: 52px; }
.wp-block-search__label { font-size: 15px; font-weight: 500; }