/* =============================================================================
   Contact Form (Contact Form 7) — Styles
   Rendu cible : champs à bords arrondis, bordure violette, bouton pill.

   Scopé sur des classes 100 % personnalisées pour n'affecter QUE ce formulaire
   (et pas les autres formulaires CF7 du site) :
     - conteneur     : <div class="aperam-contact-form">
     - inputs texte  : class:aperam-input
     - selects       : class:aperam-select
     - textarea      : class:aperam-textarea
     - case RGPD     : class:aperam-acceptance
     - bouton submit : class:aperam-submit
   Les !important restent nécessaires pour surcharger les styles génériques
   d'inputs du kit Elementor (chargés parfois après ce fichier).
============================================================================= */

:root {
	--cf-color-primary:     #771783;
	--cf-color-text:        #1E1E1E;
	--cf-color-placeholder: #4a4a55;
	--cf-color-bg:          #ffffff;
	--cf-color-border:      #771783;
	--cf-radius:            4px;
	--cf-radius-pill:       999px;
	--cf-field-py:          1.4rem;
	--cf-field-px:          1.6rem;
	--cf-gap:               1.1rem;
	--cf-font-size:         16px;
}

/* ── Conteneur du formulaire ─────────────────────────────────────────────── */
.aperam-contact-form {
	color: var(--cf-color-text);
	font-family: inherit;
}

/* Chaque ligne de champ est encapsulée dans un <p> par CF7 (auto-paragraphe) */
.aperam-contact-form p {
	margin: 0 0 var(--cf-gap) !important;
}

.aperam-contact-form p:last-of-type {
	margin-bottom: 0 !important;
}

/* Le wrap injecté par CF7 autour de chaque contrôle doit rester full width.
   L'espacement entre champs est posé ICI (et non plus seulement via la marge
   entre <p> ci-dessus) : le template CF7 peut regrouper plusieurs champs dans
   un seul <p> selon la présence ou non de lignes vides dans l'admin CF7 (ex :
   modification de la liste Job title/Country), ce qui supprimait alors tout
   espacement. En le portant sur chaque wrap de champ, l'espacement reste
   fiable quel que soit le découpage en <p> côté admin. */
.aperam-contact-form .wpcf7-form-control-wrap {
	display: block;
	margin-bottom: var(--cf-gap);
}

/* ── Champs texte, select, textarea ──────────────────────────────────────── */
.aperam-contact-form .aperam-input,
.aperam-contact-form .aperam-select,
.aperam-contact-form .aperam-textarea {
	width: 100% !important;
	box-sizing: border-box !important;
	/* height auto : le kit Elementor force height:50px sur les champs, ce qui
	   coupait le texte avec notre padding vertical. On laisse le padding piloter
	   la hauteur. */
	height: auto !important;
	padding: var(--cf-field-py) var(--cf-field-px) !important;
	font-family: inherit !important;
	font-size: var(--cf-font-size) !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
	color: var(--cf-color-text) !important;
	background-color: var(--cf-color-bg) !important;
	border: 1px solid var(--cf-color-border) !important;
	border-radius: var(--cf-radius) !important;
	box-shadow: none !important;
}

.aperam-contact-form .aperam-input:focus,
.aperam-contact-form .aperam-select:focus,
.aperam-contact-form .aperam-textarea:focus {
	outline: none !important;
	border-color: var(--cf-color-primary) !important;
	box-shadow: 0 0 0 3px rgba(119, 23, 131, 0.15) !important;
}

/* Placeholders */
.aperam-contact-form .aperam-input::placeholder,
.aperam-contact-form .aperam-textarea::placeholder {
	color: var(--cf-color-text) !important;
	font-weight: 500 !important;
	font-size: 16px !important;
	opacity: 1 !important;
}

/* ── Selects (Job title, Country) : flèche custom ────────────────────────── */
.aperam-contact-form .aperam-select {
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23771783' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right var(--cf-field-px) center !important;
	background-size: 1.1rem !important;
	padding-right: calc(var(--cf-field-px) + 1.6rem) !important;
}

/* La 1re option (first_as_label) sert de placeholder */
.aperam-contact-form .aperam-select:invalid,
.aperam-contact-form .aperam-select option[value=""] {
	color: var(--cf-color-text);
	font-weight: 500;
}

/* ── Textarea ────────────────────────────────────────────────────────────── */
.aperam-contact-form .aperam-textarea {
	min-height: 220px !important;
	resize: vertical;
}

/* ── Case à cocher RGPD (acceptance) ─────────────────────────────────────── */
/* Markup CF7 6.1.x : la classe custom (class:aperam-acceptance) se pose sur
   l'<input> lui-même, pas sur un span parent. On ancre donc tous les sélecteurs
   sur input.aperam-acceptance et on remonte au <label> via :has(). */

/* Le <label> parent du checkbox : flex pour aligner case + texte */
.aperam-contact-form label:has(> input.aperam-acceptance) {
	display: flex !important;
	align-items: flex-start;
	gap: 0.6rem;
	cursor: pointer;
}

/* Reset de la marge du wrapper de liste CF7 */
.aperam-contact-form .wpcf7-list-item:has(input.aperam-acceptance) {
	margin: 0 !important;
}

/* Le texte (span frère du checkbox) + le lien Privacy Policy */
.aperam-contact-form input.aperam-acceptance + .wpcf7-list-item-label,
.aperam-contact-form input.aperam-acceptance + .wpcf7-list-item-label a {
	color: var(--cf-color-text) !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
}

/* La case elle-même */
.aperam-contact-form input.aperam-acceptance {
	appearance: none !important;
	-webkit-appearance: none !important;
	flex: 0 0 auto;
	width: 16px !important;
	height: 16px !important;
	margin: 0 !important;
	border: 1px solid var(--cf-color-border) !important;
	border-radius: 6px !important;
	background-color: var(--cf-color-bg) !important;
	cursor: pointer;
	position: relative;
	transition: background-color 0.15s ease;
}

.aperam-contact-form input.aperam-acceptance:checked {
	background-color: var(--cf-color-primary) !important;
	border-color: var(--cf-color-primary) !important;
}

.aperam-contact-form input.aperam-acceptance:checked::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 4px;
	height: 8px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: translate(-50%, -60%) rotate(45deg);
}

.aperam-contact-form input.aperam-acceptance:focus-visible {
	outline: none !important;
	box-shadow: 0 0 0 3px rgba(119, 23, 131, 0.15) !important;
}

/* ── Bouton Send (pill violet) ───────────────────────────────────────────── */
.aperam-contact-form .aperam-submit {
	display: inline-block !important;
	width: auto !important;
	margin-top: 0.5rem !important;
	padding: 1rem 2.6rem !important;
	font-family: inherit !important;
	font-size: var(--cf-font-size) !important;
	font-weight: 700 !important;
	color: #fff !important;
	background-color: var(--cf-color-primary) !important;
	border: none !important;
	border-radius: var(--cf-radius-pill) !important;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.1s ease;
}

.aperam-contact-form .aperam-submit:hover {
	background-color: #5e1268 !important;
}

.aperam-contact-form .aperam-submit:active {
	transform: translateY(1px);
}

/* Spinner AJAX aligné à côté du bouton */
.aperam-contact-form .wpcf7-spinner {
	margin: 0 0 0 1rem;
	vertical-align: middle;
}

/* ── Messages de validation / réponse CF7 ────────────────────────────────── */
.aperam-contact-form .wpcf7-not-valid {
	border-color: #c41230 !important;
}

.aperam-contact-form .wpcf7-not-valid-tip {
	margin-top: 0.35rem;
	font-size: 0.9rem;
	color: #c41230;
}

.aperam-contact-form .wpcf7-response-output {
	margin: 1.2rem 0 0;
	padding: 0.9rem 1.2rem;
	border-radius: var(--cf-radius);
	font-size: 1rem;
}

/* ── Page Contact (elementor-339) : empilement anticipé au breakpoint Tablette ──
   La ligne Elementor texte+formulaire (.elementor-element-6b97656) n'a le
   flex-wrap actif que côté Elementor à partir du breakpoint Mobile (≤767px,
   réglage "flex-wrap-mobile"). En Tablette (768-1024px), les colonnes gardent
   leurs largeurs Desktop (33% texte / 50% formulaire) + un gap fixe de 80px,
   ce qui ne laisse pas assez de place : le formulaire se retrouve écrasé
   (~275px de large sur un viewport de 900px, vérifié en preprod). On déclenche
   ici le même empilement 100% qu'en mobile dès la Tablette. */
@media (max-width: 1024px) {
	.elementor-339 .elementor-element.elementor-element-6b97656 {
		flex-wrap: wrap !important;
	}

	.elementor-339 .elementor-element.elementor-element-2d67da8,
	.elementor-339 .elementor-element.elementor-element-8effc39 {
		width: 100% !important;
		max-width: 100% !important;
	}
}