/**
 * Contact Form 7 – ASOFormec
 * Reprend la mise en forme des anciens formulaires Gravity Forms
 * + notifications (toasts, confirmation, erreurs).
 */

.asof-form {
	--asof-success: #2f7a4f;
	--asof-error: #b3261e;
	--asof-warning: #b26a00;
	--asof-req: #790000;
	font-family: "Lato", sans-serif;
	color: var(--couleur-text, #4e4d4d);
}

/* ---------- Champs ---------- */
.asof-form .asof-field {
	margin: 16px 0 0;
}
.asof-form .asof-field:first-child { margin-top: 0; }

.asof-form label,
.asof-form .asof-label {
	display: block;
	margin: 0 0 4px;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.3;
	color: var(--couleur-text, #4e4d4d);
}

.asof-form .asof-req {
	color: var(--asof-req);
	margin-left: 4px;
}

.asof-form .wpcf7-form-control-wrap { display: block; }

.asof-form input[type="text"],
.asof-form input[type="email"],
.asof-form input[type="tel"],
.asof-form select,
.asof-form textarea {
	box-sizing: border-box;
	width: 100%;
	font-family: "Lato", sans-serif;
	font-size: 16px;
	color: #000;
	background-color: #fff;
	border: 1px solid var(--couleur-bg, #e0dcdb);
	border-radius: 0;
	padding: 5px 8px;
	min-height: 31px;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.asof-form textarea {
	height: 160px;
	padding: 6px 8px;
	line-height: 1.5;
	resize: vertical;
}
.asof-form select { padding: 5px 4px; }

/* Largeur "moyenne" Gravity Forms (50 %) */
.asof-form .asof-field--medium .wpcf7-form-control-wrap { width: calc(50% - 8px); }
@media (max-width: 640px) {
	.asof-form .asof-field--medium .wpcf7-form-control-wrap { width: 100%; }
}

.asof-form input:focus,
.asof-form select:focus,
.asof-form textarea:focus {
	outline: none;
	border-color: var(--couleur-cta, #ff8400);
	box-shadow: 0 0 0 3px rgba(255, 132, 0, .15);
}

/* Pièce jointe */
.asof-form input[type="file"] {
	font-size: 15px;
	padding: 6px 0;
	border: 0;
	width: 100%;
}
.asof-form input[type="file"]::file-selector-button {
	font-family: "Lato", sans-serif;
	font-size: 14px;
	margin-right: 12px;
	padding: 6px 14px;
	border: 1px solid var(--couleur-principale, #462d28);
	background: #fff;
	color: var(--couleur-principale, #462d28);
	cursor: pointer;
	transition: all .2s ease;
}
.asof-form input[type="file"]::file-selector-button:hover {
	background: var(--couleur-principale, #462d28);
	color: #fff;
}
.asof-form .asof-help {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	color: #7a7676;
}

/* Anti-spam (Turnstile) */
.asof-form .wpcf7-turnstile,
.asof-form .cf-turnstile { margin-top: 16px; }

/* ---------- Bouton ---------- */
.asof-form .asof-submit {
	margin-top: 20px;
	display: flex;
	align-items: center;
	gap: 12px;
}
.asof-form input[type="submit"].wpcf7-submit {
	width: auto;
	min-width: 120px;
	padding: 7px 18px;
	font-family: "Lato", sans-serif;
	font-size: 16px !important;
	cursor: pointer;
}
.asof-form input[type="submit"].wpcf7-submit:disabled { opacity: .6; cursor: wait; }

/* Spinner CF7 */
.asof-form .wpcf7-spinner {
	margin: 0;
	background-color: var(--couleur-principale, #462d28);
	opacity: .8;
}

/* ---------- Erreurs de validation ---------- */
.asof-form .wpcf7-not-valid {
	border-color: var(--asof-error) !important;
	background-color: #fdf6f5 !important;
}
.asof-form .wpcf7-not-valid-tip {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 5px;
	font-size: 14px;
	color: var(--asof-error);
	animation: asofShake .35s ease;
}
.asof-form .wpcf7-not-valid-tip::before {
	content: "!";
	flex: 0 0 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--asof-error);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
}

/* ---------- Message de réponse dans le formulaire ---------- */
.wpcf7 form.asof-form .wpcf7-response-output {
	--state: var(--couleur-principale, #462d28);
	margin: 20px 0 0;
	padding: 12px 16px 12px 48px;
	border: 0;
	border-left: 4px solid var(--state);
	background: #f7f5f4;
	color: var(--couleur-text, #4e4d4d);
	position: relative;
	font-size: 15px;
	line-height: 1.4;
	animation: asofSlideDown .3s ease;
}
.wpcf7 form.asof-form .wpcf7-response-output::before {
	content: "!";
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	width: 22px;
	height: 22px;
	border-radius: 50%;
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	line-height: 22px;
	text-align: center;
	background: var(--state);
}
.wpcf7 form.asof-form .wpcf7-response-output:empty { display: none; }
.wpcf7 form.asof-form.invalid .wpcf7-response-output,
.wpcf7 form.asof-form.unaccepted .wpcf7-response-output { --state: var(--asof-warning); background: #fdf7ee; }
.wpcf7 form.asof-form.failed .wpcf7-response-output,
.wpcf7 form.asof-form.aborted .wpcf7-response-output,
.wpcf7 form.asof-form.spam .wpcf7-response-output { --state: var(--asof-error); background: #fdf3f2; }
.wpcf7 form.asof-form.sent .wpcf7-response-output { --state: var(--asof-success); background: #f1f8f3; }
.wpcf7 form.asof-form.sent .wpcf7-response-output::before { content: "\2713"; }

/* ---------- Confirmation après envoi ---------- */
.asof-confirmation {
	display: none;
	text-align: center;
	padding: 40px 24px;
	background: #fff;
	border: 1px solid var(--couleur-bg, #e0dcdb);
	border-top: 4px solid var(--couleur-cta, #ff8400);
	animation: asofPop .45s cubic-bezier(.175, .885, .32, 1.275);
}
.asof-confirmation.is-visible { display: block; }
.asof-confirmation h3 {
	font-family: "Cinzel", serif;
	color: var(--couleur-principale, #462d28);
	font-size: 22px;
	margin: 16px 0 8px;
}
.asof-confirmation p { margin: 0 auto 20px; max-width: 460px; }
.asof-confirmation .asof-check {
	width: 64px;
	height: 64px;
	margin: 0 auto;
	display: block;
}
.asof-confirmation .asof-check circle {
	stroke: var(--couleur-cta, #ff8400);
	stroke-width: 3;
	fill: none;
	stroke-dasharray: 166;
	stroke-dashoffset: 166;
	animation: asofStroke .6s ease forwards;
}
.asof-confirmation .asof-check path {
	stroke: var(--couleur-cta, #ff8400);
	stroke-width: 4;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 48;
	stroke-dashoffset: 48;
	animation: asofStroke .35s .5s ease forwards;
}
.asof-confirmation .asof-again {
	background: none;
	border: 1px solid var(--couleur-cta, #ff8400);
	color: var(--couleur-cta, #ff8400);
	font-family: "Lato", sans-serif;
	font-size: 15px;
	padding: 7px 16px;
	cursor: pointer;
	transition: all .2s ease;
}
.asof-confirmation .asof-again:hover {
	background: var(--couleur-cta, #ff8400);
	color: #fff;
}
.wpcf7 form.asof-form.asof-is-sent > *:not(.asof-confirmation):not(.screen-reader-response) { display: none !important; }

/* ---------- Toasts ---------- */
.asof-toasts {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 99999;
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: min(380px, calc(100vw - 32px));
	pointer-events: none;
}
.asof-toast {
	--toast-color: var(--couleur-principale, #462d28);
	pointer-events: auto;
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 40px 16px 14px;
	background: #fff;
	border-left: 4px solid var(--toast-color);
	box-shadow: 0 10px 30px rgba(30, 24, 26, .18), 0 2px 6px rgba(30, 24, 26, .08);
	font-family: "Lato", sans-serif;
	transform: translateX(110%);
	opacity: 0;
	transition: transform .4s cubic-bezier(.175, .885, .32, 1.15), opacity .3s ease;
}
.asof-toast.is-visible { transform: translateX(0); opacity: 1; }
.asof-toast.is-leaving { transform: translateX(110%); opacity: 0; }
.asof-toast--success { --toast-color: #2f7a4f; }
.asof-toast--error { --toast-color: #b3261e; }
.asof-toast--warning { --toast-color: #ff8400; }

.asof-toast__icon {
	flex: 0 0 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--toast-color);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	font-weight: 700;
}
.asof-toast__title {
	display: block;
	font-family: "Cinzel", serif;
	font-size: 16px;
	color: var(--couleur-principale, #462d28);
	margin: 2px 0 3px;
}
.asof-toast__msg {
	display: block;
	font-size: 14px;
	line-height: 1.4;
	color: var(--couleur-text, #4e4d4d);
}
.asof-toast__close {
	position: absolute;
	top: 6px;
	right: 8px;
	background: none;
	border: 0;
	font-size: 20px;
	line-height: 1;
	color: #9a9494;
	cursor: pointer;
	padding: 4px;
}
.asof-toast__close:hover { color: var(--couleur-principale, #462d28); }
.asof-toast__bar {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 3px;
	width: 100%;
	background: var(--toast-color);
	opacity: .35;
	transform-origin: left;
	animation: asofBar linear forwards;
}
.asof-toast:hover .asof-toast__bar { animation-play-state: paused; }

@media (max-width: 640px) {
	.asof-toasts { right: 16px; left: 16px; bottom: 16px; width: auto; }
}

/* ---------- Animations ---------- */
@keyframes asofBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes asofShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes asofSlideDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes asofPop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes asofStroke { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
	.asof-toast, .asof-confirmation, .asof-form .wpcf7-not-valid-tip { animation: none !important; transition: none !important; }
	.asof-confirmation .asof-check circle, .asof-confirmation .asof-check path { animation: none; stroke-dashoffset: 0; }
}

/* ---------- Ordre : Turnstile (inséré en tête par CF7) juste avant le bouton ---------- */
.wpcf7 form.asof-form { display: flex; flex-direction: column; }
.wpcf7 form.asof-form > * { order: 1; }
.wpcf7 form.asof-form > .wpcf7-turnstile { order: 2; margin-top: 20px; }
.wpcf7 form.asof-form > .asof-submit { order: 3; }
.wpcf7 form.asof-form > .wpcf7-response-output,
.wpcf7 form.asof-form > .asof-confirmation { order: 4; }
.wpcf7 form.asof-form > .hidden-fields-container + .asof-field,
.wpcf7 form.asof-form > .hidden-fields-container + .wpcf7-turnstile + .asof-field { margin-top: 0; }