/* ==========================================================================
   M'Road Solution — formulaires (recherche personnalisée, contact)
   ========================================================================== */

.text-yellow-deep { color: var(--c-yellow-deep); }

/* Mise en page de la page « Recherche personnalisée » */
.search-page__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	grid-template-areas: "intro form" "aside form";
	grid-template-rows: auto 1fr;
	gap: 0 clamp(32px, 5vw, 72px);
	align-items: start;
}

.search-page__intro { grid-area: intro; }
.search-page__form { grid-area: form; }
.search-page__aside { grid-area: aside; }
.search-page__intro h2 { margin-bottom: 20px; }
.search-page__intro p { color: var(--c-muted); font-size: 18px; }

/* Mobile et tablette : introduction courte → formulaire → étapes et appel */
@media (max-width: 1000px) {
	.search-page__grid { grid-template-columns: 1fr; grid-template-areas: "intro" "form" "aside"; gap: 28px; }
	.search-page__aside { margin-top: 12px; }
}

@media (max-width: 640px) {
	.search-page { padding-top: 40px; }
	.search-page__intro h2 { font-size: 32px; }
	.search-page__intro p { font-size: 16.5px; margin-bottom: 0; }
	.formcard { margin-inline: calc(var(--gutter) * -0.5); padding: 26px 18px 24px; }
	.formcard__title { font-size: 30px; }
	.mform__grid { gap: 16px 12px; }
	.mform__legend { font-size: 16px; letter-spacing: 0.14em; }
	.mform__field--half.mform__field--keep { grid-column: span 3; }
	.callbox__number { font-size: 26px; }
}

/* Étapes */
.steps { display: grid; gap: 4px; margin: 32px 0; padding: 0; list-style: none; counter-reset: none; }
.steps li { display: flex; gap: 18px; padding: 18px 0; border-top: 1px solid var(--c-line-light); }
.steps li:last-child { border-bottom: 1px solid var(--c-line-light); }
.steps__num { flex: none; color: var(--c-yellow-deep); font-family: var(--f-display); font-size: 30px; font-style: italic; font-weight: 800; line-height: 1; }
.steps strong { display: block; margin-bottom: 2px; font-family: var(--f-display); font-size: 20px; letter-spacing: 0.02em; text-transform: uppercase; }
.steps p { margin: 0; color: var(--c-muted); font-size: 15.5px; }

/* Encadré d'appel */
.callbox { display: flex; align-items: center; gap: 16px; padding: 20px 24px; border-radius: var(--radius-lg); background: var(--c-night); color: var(--c-white); }
.callbox .icon { flex: none; width: 48px; height: 48px; padding: 12px; border-radius: 50%; background: var(--c-yellow); color: var(--c-night); }
.callbox__label { margin: 0; color: var(--c-muted-light); font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; }
.callbox__number { font-family: var(--f-display); font-size: 30px; font-style: italic; font-weight: 800; letter-spacing: 0.04em; color: var(--c-yellow); }
.callbox__number:hover { color: var(--c-yellow-hi); }

/* Carte du formulaire */
.formcard {
	position: relative;
	padding: clamp(24px, 4vw, 48px);
	border-radius: var(--radius-lg);
	background: var(--c-white);
	box-shadow: var(--shadow-lift);
	overflow: hidden;
}

.formcard::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: linear-gradient(90deg, var(--c-yellow) 0 35%, var(--c-night) 35% 100%); }
.formcard__title { margin-bottom: 6px; font-size: clamp(30px, 3.4vw, 44px); }
.formcard__lead { margin: 0 0 18px; color: var(--c-muted); font-size: 15.5px; }

/* Choix « boîte de vitesses » : boutons segmentés, faciles à toucher */
.mform__choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1.5px solid var(--c-paper-2); border-radius: var(--radius); background: var(--c-paper); overflow: hidden; }
.mform__choice { position: relative; display: block; cursor: pointer; }
.mform__choice + .mform__choice { border-left: 1.5px solid var(--c-paper-2); }
.mform__choice input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.mform__choice span { display: grid; place-items: center; min-height: 49px; padding: 0 6px; font-size: 15px; font-weight: 600; text-align: center; transition: background-color var(--t-fast) ease, color var(--t-fast) ease; }
.mform__choice:hover span { background: var(--c-white); }
.mform__choice input:checked + span { background: var(--c-night); color: var(--c-yellow); }
.mform__choice input:focus-visible + span { outline: 3px solid var(--c-yellow); outline-offset: -3px; }

/* Formulaire */
.mform { margin: 0; }
.mform__legend-note { margin: 0 0 20px; color: var(--c-muted); font-size: 14px; }
.mform__legend-note span, .mform__req { color: #b3261e; }

.mform__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px 16px; }
.mform__section { display: contents; }
.mform__legend {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	margin: 14px 0 0;
	padding: 0;
	font-family: var(--f-display);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--c-night);
}
.mform__legend::before { content: ""; width: 28px; height: 3px; background: var(--c-yellow); }
.mform__legend::after { content: ""; flex: 1; height: 1px; background: var(--c-line-light); }
.mform__section:first-of-type .mform__legend { margin-top: 0; }

/* fieldset en « display: contents » : la légende devient un élément de la grille */
.mform__section > .mform__legend { float: none; }

.mform__field { display: grid; gap: 6px; align-content: start; min-width: 0; }
.mform__field--full { grid-column: span 6; }
.mform__field--half { grid-column: span 3; }
.mform__field--third { grid-column: span 2; }

@media (max-width: 640px) {
	.mform__field--half,
	.mform__field--third { grid-column: span 6; }
}

.mform__label { font-size: 15px; font-weight: 600; color: var(--c-text); }
.mform__field[role="radiogroup"] .mform__label { cursor: default; }
.mform__hint { margin-left: 4px; color: var(--c-muted); font-weight: 400; }

.mform input[type="text"],
.mform input[type="email"],
.mform input[type="tel"],
.mform select,
.mform textarea {
	width: 100%;
	min-height: 52px;
	padding: 13px 16px;
	border: 1.5px solid var(--c-paper-2);
	border-radius: var(--radius);
	background: var(--c-paper);
	color: var(--c-text);
	font-size: 16px; /* 16 px : évite le zoom automatique sur iPhone */
	line-height: 1.4;
	transition: border-color var(--t-fast) ease, background-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}

.mform textarea { min-height: 150px; resize: vertical; }

.mform select {
	padding-right: 42px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23020b1c' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.mform input::placeholder,
.mform textarea::placeholder { color: #8a93a3; }

.mform input:hover,
.mform select:hover,
.mform textarea:hover { border-color: #cfd4dc; }

.mform input:focus,
.mform select:focus,
.mform textarea:focus {
	outline: none;
	border-color: var(--c-yellow);
	background: var(--c-white);
	box-shadow: 0 0 0 4px rgba(246, 196, 49, 0.22);
}

.mform__control { position: relative; }
.mform__control--suffix input { padding-right: 44px; }
.mform__suffix { position: absolute; top: 50%; right: 16px; color: var(--c-muted); font-weight: 600; transform: translateY(-50%); pointer-events: none; }

/* Erreurs */
.mform__error { display: flex; align-items: center; gap: 6px; margin: 0; color: #b3261e; font-size: 14px; font-weight: 500; }
.mform__error::before { content: "!"; display: grid; place-items: center; flex: none; width: 16px; height: 16px; border-radius: 50%; background: #b3261e; color: #fff; font-size: 11px; font-weight: 800; }
.mform__error[hidden] { display: none; }
.mform .has-error input,
.mform .has-error select,
.mform .has-error textarea { border-color: #b3261e; background: #fdf5f4; }

.mform__alert { display: flex; gap: 14px; margin-bottom: 24px; padding: 16px 18px; border-left: 4px solid #b3261e; border-radius: var(--radius); background: #fdf1f0; color: #5f1410; }
.mform__alert .icon { flex: none; margin-top: 2px; color: #b3261e; }
.mform__alert p { margin: 0; }
.mform__alert ul { margin: 8px 0 0; padding-left: 18px; font-size: 15px; }
.mform__alert a { text-decoration: underline; }
.mform__alert:focus { outline: none; }

/* Consentement */
.mform__consent { margin-top: 8px; padding: 16px 18px; border-radius: var(--radius); background: var(--c-paper); }
.mform__consent label { display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; line-height: 1.55; color: var(--c-muted); cursor: pointer; }
.mform__consent input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--c-night); cursor: pointer; }
.mform__consent a { color: var(--c-night); text-decoration: underline; text-decoration-color: var(--c-yellow); text-underline-offset: 2px; }
.mform__consent.has-error { background: #fdf1f0; box-shadow: inset 0 0 0 1.5px #b3261e; }

/* Envoi */
.mform__submit { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 28px; }
.mform__submit .btn { min-width: 260px; }
.mform__submit .btn.is-loading { opacity: 0.7; pointer-events: none; }
.mform__submit .btn.is-loading .icon { animation: mroad-spin 0.9s linear infinite; }
.mform__secure { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--c-muted); font-size: 14px; }
.mform__secure .icon { flex: none; color: var(--c-yellow-deep); }

@media (max-width: 640px) {
	.mform__submit .btn { width: 100%; min-width: 0; }
}

@keyframes mroad-spin { to { transform: rotate(360deg); } }

/* Champ piège (anti-spam) : hors écran, jamais visible */
.mform__trap { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Confirmation */
.mform-success { padding: clamp(8px, 2vw, 20px) 0; text-align: center; }
.mform-success:focus { outline: none; }
.mform-success__icon { display: inline-grid; place-items: center; width: 84px; height: 84px; margin-bottom: 20px; border-radius: 50%; background: var(--c-yellow); color: var(--c-night); box-shadow: 0 0 0 10px rgba(246, 196, 49, 0.2); animation: mroad-pop 0.6s var(--ease) both; }
.mform-success__title { font-size: clamp(32px, 4vw, 48px); }
.mform-success p { max-width: 520px; margin-inline: auto; color: var(--c-muted); }
.mform-success a:not(.btn) { color: var(--c-night); font-weight: 700; text-decoration: underline; text-decoration-color: var(--c-yellow); }

@keyframes mroad-pop { from { transform: scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }