/* ==========================================================================
   Contact — XD « Formation SIG - Contact » (1920 x 3955)
   Formulaire (blanc) · Interlocuteurs (gris) · Centres de formation (carte arx iT en iframe)
   ========================================================================== */

/* ---------- Formulaire (Contact Form 7, grille posée dans le formulaire : .cf-grid) ---------- */
/*
 * Colonnes XD (1920) : Indicatif 359 · 78 · Téléphone 491 · 127 · Courriel / Prénom 658.
 * Nom et message couvrent les trois premières colonnes, le bouton se cale en bas à droite.
 */
.cf-grid {
	--field-line: rgb(95 95 95 / .6);
	--field-text: var(--c-text-strong);
	--field-placeholder: rgb(95 95 95 / .5);
	display: grid;
	grid-template-columns: minmax(0, 359fr) minmax(0, 78fr) minmax(0, 491fr) minmax(0, 127fr) minmax(0, 658fr);
	grid-template-areas:
		"nom       nom nom . prenom"
		"indicatif .   tel . courriel"
		"message   message message . send";
	row-gap: clamp(28px, 2.9vw, 55px);
}
.cf-nom       { grid-area: nom; }
.cf-prenom    { grid-area: prenom; }
.cf-indicatif { grid-area: indicatif; }
.cf-tel       { grid-area: tel; }
.cf-courriel  { grid-area: courriel; }
.cf-message   { grid-area: message; margin-top: clamp(0px, 1vw, 19px); }
.cf-send      { grid-area: send; align-self: end; justify-self: end; position: relative; }

.cf-grid .wpcf7-form-control-wrap { display: block; position: relative; }

/* Champs soulignés (Regular 22px, texte d'aide #5F5F5F à 50 %), ligne verte au focus */
.cf-grid input[type="text"],
.cf-grid input[type="tel"],
.cf-grid input[type="email"],
.cf-grid select {
	width: 100%;
	height: clamp(38px, 2.37vw, 46px);
	padding: 0 10px;
	border: 0;
	border-bottom: 1px solid var(--field-line);
	border-radius: 0;
	background: transparent;
	font: inherit;
	font-size: var(--fs-22);
	color: var(--field-text);
	outline: none;
	transition: border-color .2s;
}
.cf-grid ::placeholder { color: var(--field-placeholder); opacity: 1; }
.cf-grid input:focus,
.cf-grid select:focus { border-bottom-color: var(--c-green); }

/* Liste des indicatifs : triangle plein gris (XD) */
.cf-grid select {
	appearance: none;
	padding-right: 40px;
	cursor: pointer;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 24'%3E%3Cpath fill='%235f5f5f' d='M0 0h28L14 24z'/%3E%3C/svg%3E") right 4px center / clamp(18px, 1.2vw, 24px) auto no-repeat;
}
/* Tant que « Indicatif * » (option vide) est choisi, même gris que les autres textes d'aide */
.cf-grid select:has(option[value=""]:checked) { color: var(--field-placeholder); }
.cf-grid select option { color: var(--c-text-strong); }

/* Message : cadre 1px arrondi 30px */
.cf-grid textarea {
	display: block;
	width: 100%;
	/* Trame pré-remplie de 7 lignes (retour client) : le cadre s'adapte au texte (field-sizing), jamais sous la hauteur XD */
	field-sizing: content;
	min-height: clamp(260px, 16vw, 310px);
	padding: clamp(14px, 1.25vw, 24px) clamp(14px, .95vw, 18px);
	border: 1px solid var(--field-line);
	border-radius: clamp(20px, 1.56vw, 30px);
	background: transparent;
	font: inherit;
	font-size: var(--fs-22);
	line-height: 1.3;
	color: var(--field-text);
	resize: vertical;
	outline: none;
	transition: border-color .2s;
}
.cf-grid textarea:focus { border-color: var(--c-green); }

/* Bouton « Envoyer le message » (328 x 59) : pilule verte + rond blanc à triangle ; survol : vert plus soutenu, triangle vert */
.cf-send input[type="submit"] {
	height: clamp(48px, 3.07vw, 59px);
	padding: 0 clamp(62px, 3.9vw, 75px) 0 clamp(16px, .94vw, 18px);
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--c-green-soft);
	font: inherit;
	font-size: var(--fs-22);
	color: rgb(255 255 255 / .9);
	cursor: pointer;
	transition: background-color .2s;
}
.cf-send::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 5px;
	width: clamp(40px, 2.6vw, 50px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'%3E%3Cpath fill='%235f5f5f' d='M0 0v28l24-14z'/%3E%3C/svg%3E") 58% 50% / 38% auto no-repeat;
	transform: translateY(-50%);
	pointer-events: none;
	transition: background-image .2s;
}
.cf-send:hover input[type="submit"],
.cf-send input[type="submit"]:focus-visible { background: var(--c-green); }
.cf-send:hover::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'%3E%3Cpath fill='%2395cb43' d='M0 0v28l24-14z'/%3E%3C/svg%3E");
}
.cf-send .wpcf7-spinner { position: absolute; right: 100%; top: 50%; margin: -12px 12px 0 0; }

/* Messages de Contact Form 7 (retour client du 20/10/2026) : cadre rouge si l'envoi échoue ou si le formulaire
   est incomplet (CF7 met de l'orange), cadre du vert arx iT (#95CB43, celui d'arxit.com) quand le message est parti. */
.fsig-form .wpcf7-not-valid-tip { margin-top: 6px; font-size: var(--fs-15); color: #d63638; }
.fsig-form .wpcf7-response-output {
	margin: clamp(24px, 2vw, 36px) 0 0 !important;
	padding: 14px 20px !important;
	border-radius: 12px;
	font-size: var(--fs-16);
}
/* Le formulaire porte lui-même .fsig-form ; préfixe .wpcf7 pour passer devant les couleurs de Contact Form 7 */
.wpcf7 form.fsig-form:is(.invalid, .unaccepted, .payment-required, .spam, .failed, .aborted) .wpcf7-response-output { border-color: #d63638; }
.wpcf7 form.fsig-form.sent .wpcf7-response-output { border-color: var(--c-green); }

/* Mode sombre : lignes et textes d'aide clairs */
[data-theme="dark"] .cf-grid {
	--field-line: rgb(255 255 255 / .35);
	--field-placeholder: rgb(255 255 255 / .45);
}

/* ---------- Interlocuteurs : slider de portraits en losange N&B → couleur et agrandis au survol ---------- */
/* 4 visibles (XD : 335px, pas de 420px), 3 en tablette, 2 sous 768px, 1 sous 568px ; les suivants via les flèches */
.equipe { --per-view: 4; --team-gap: clamp(24px, 4.4vw, 85px); }
.equipe .slider { margin-top: clamp(16px, 2.4vw, 46px); container-type: inline-size; }
/* Marges internes : le portrait agrandi (x 1,14, soit ~24px de chaque côté) n'est pas rogné par le défilement horizontal.
   Latérales aussi (retour client du 03/11/2026 : le premier et le dernier portrait étaient coupés au survol),
   compensées par une marge négative ; limitées à --gutter pour ne pas dépasser de l'écran en mobile. */
.equipe__list {
	--team-bleed: min(24px, var(--gutter));
	gap: var(--team-gap);
	padding: 24px var(--team-bleed);
	margin: -24px calc(var(--team-bleed) * -1);
	scroll-padding-inline: var(--team-bleed);
}
.membre { flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--team-gap)) / var(--per-view)); max-width: 335px; }
/* Flèches centrées sur les portraits (carrés : hauteur = largeur d'un portrait), pas sur portrait + textes */
.equipe .slider__arrow { top: calc(min(335px, (100cqw - (var(--per-view) - 1) * var(--team-gap)) / var(--per-view)) / 2); }
.membre__photo {
	position: relative;
	aspect-ratio: 1;
	margin-bottom: clamp(12px, 1.2vw, 22px);
	clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
	background: var(--c-border);
	transition: transform .4s var(--ease);
}
/* En absolu : la photo remplit le carré sans jamais l'agrandir (sinon aspect-ratio cède à la hauteur de l'image) */
.membre__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1);
	transition: filter .3s ease-out;
}
.membre:hover .membre__photo { transform: scale(1.14); }
.membre:hover .membre__photo img { filter: none; }
/* Retour client du 03/11/2026 : pas d'effet de survol dès 768px (ni zoom ni passage en couleur), portraits directement en couleur */
@media (max-width: 768px) {
	.membre:hover .membre__photo { transform: none; }
	.membre__photo img { filter: none; }
}
.membre__nom { font-size: var(--fs-18); font-weight: 700; line-height: 1.3; color: var(--c-text); }
.membre__fonction { margin-top: clamp(6px, .95vw, 18px); font-size: var(--fs-16); line-height: 1.3; color: var(--c-text); }

/* ---------- Centres de formation : carte arx iT (localisation/) en iframe (XD : 1768 x 729, texte compris) ---------- */
.centres__iframe {
	display: block;
	width: 100%;
	height: clamp(460px, 38vw, 729px);
	border: 0;
	background: var(--c-bg-alt);
}

/* ---------- Tablette ---------- */
@media (max-width: 1140px) {
	.cf-grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
		column-gap: 32px;
		grid-template-areas:
			"nom       prenom"
			"indicatif tel"
			"courriel  courriel"
			"message   message"
			"send      send";
	}
	.equipe { --per-view: 3; }
}

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
	.cf-grid {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "nom" "prenom" "indicatif" "tel" "courriel" "message" "send";
		row-gap: 24px;
	}
	.equipe { --per-view: 2; --team-gap: 20px; }
	.centres__iframe { height: clamp(380px, 100vw, 520px); }
}

@media (max-width: 568px) {
	.equipe { --per-view: 1; }
	.membre { max-width: none; }
	.equipe .slider__arrow { top: 50cqw; }
}

/* Pas de survol au doigt : portraits directement en couleur */
@media (hover: none) {
	.membre__photo img { filter: none; }
}