/*
 * Page « Soumission gratuite » (soumission.html)
 * Reprend les couleurs du thème : vert #449a13, gris foncé #323232, gris clair #f2f2f2.
 * Tout est limité à #soumission pour ne rien changer aux autres pages.
 */

#soumission [hidden] { display: none !important; }

#soumission .sm-intro { font-size: 16px; line-height: 26px; max-width: 760px; }

/* ---------- Étapes ---------- */
#soumission .sm-etape { margin-top: 38px; }

#soumission .sm-etape > h3 {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 12px;
	font-size: 22px;
	line-height: 1.2;
	color: #323232;
}

#soumission .sm-num {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #449a13;
	color: #fff;
	font-size: 18px;
	line-height: 1;
}

#soumission .sm-facultatif { font-size: 14px; font-weight: 400; color: #888; }

#soumission fieldset { min-width: 0; margin: 0 0 16px; padding: 0; border: 0; }
#soumission legend { width: auto; margin: 0 0 6px; padding: 0; border: 0; font-size: inherit; font-weight: 700; line-height: inherit; color: #323232; }
#soumission .sm-aide { margin: 0 0 14px; max-width: 760px; }

/* ---------- Champs ---------- */
#soumission label { display: block; margin: 0 0 6px; font-weight: 700; color: #323232; }
#soumission .required { color: #d93025; }

#soumission .form-control {
	height: 48px;
	padding: 10px 14px;
	font-size: 16px; /* 16 px : évite le zoom automatique sur iPhone */
	background-color: #f2f2f2;
	border: 2px solid transparent;
	border-radius: 5px;
	box-shadow: none;
}

#soumission textarea.form-control { height: auto; min-height: 96px; resize: vertical; }

#soumission .form-control:focus { background-color: #fff; border-color: #449a13; box-shadow: none; }
#soumission .form-control.sm-invalide { border-color: #d93025; background-color: #fff; }

#soumission .sm-champ { margin-bottom: 16px; }
#soumission .sm-erreur { margin-top: 5px; color: #c0392b; font-size: 14px; line-height: 1.3; }

/* Champ piège anti-robot : hors écran, invisible pour les humains */
#soumission .sm-piege {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- Boutons ---------- */
#soumission .sm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 10px 14px;
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-transform: none;
	letter-spacing: 0;
	color: #323232;
	background: #fff;
	border: 2px solid #323232;
	border-radius: 4px;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background-color .2s, border-color .2s, color .2s, opacity .2s;
}

#soumission .sm-btn:hover:not(:disabled) { background: #323232; color: #fff; }

#soumission .sm-btn-primaire { color: #fff; background: #449a13; border-color: #449a13; }
#soumission .sm-btn-primaire:hover:not(:disabled) { background: #367a0f; border-color: #367a0f; }

#soumission .sm-btn-danger { color: #c0392b; border-color: #c0392b; }
#soumission .sm-btn-danger:hover:not(:disabled) { background: #c0392b; border-color: #c0392b; color: #fff; }

#soumission .sm-btn:disabled { opacity: .4; cursor: not-allowed; }

#soumission .sm-btn:focus-visible,
#soumission .sm-case input:focus-visible,
#soumission .sm-type:focus-visible {
	outline: 3px solid rgba(68, 154, 19, .5);
	outline-offset: 2px;
}

/* ---------- Recherche d'adresse ---------- */
#soumission .sm-recherche { display: flex; gap: 8px; align-items: stretch; }
#soumission .sm-recherche .form-control { flex: 1 1 auto; min-width: 0; }
#soumission .sm-recherche .sm-btn { flex: none; padding-left: 20px; padding-right: 20px; }

#soumission .sm-msg { min-height: 22px; margin-top: 8px; font-size: 15px; color: #555; }
#soumission .sm-msg.sm-msg-erreur { color: #c0392b; }

#soumission .sm-resultats { list-style: none; margin: 6px 0 0; padding: 0; }
#soumission .sm-resultats li { margin: 0 0 6px; }
#soumission .sm-resultats .sm-btn {
	width: 100%;
	justify-content: flex-start;
	text-align: left;
	font-weight: 400;
	min-height: 44px;
}

/* ---------- Carte ---------- */
#soumission .sm-carte {
	position: relative;
	z-index: 0; /* garde les boutons de la carte sous l'en-tête du site */
	width: 100%;
	height: 62vh;
	min-height: 340px;
	max-height: 600px;
	background: #2b2b2b;
	border: 2px solid #323232;
	border-radius: 6px;
	cursor: crosshair;
}

#soumission .sm-carte .leaflet-control-zoom a { width: 38px; height: 38px; line-height: 38px; font-size: 20px; }

.sm-etiquette span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border: 2px solid #fff;
	border-radius: 50%;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .65);
	color: #111;
	font: 700 14px/1 Arial, sans-serif;
}

#soumission .sm-statut {
	margin-top: 10px;
	padding: 10px 12px;
	min-height: 46px;
	background: #f2f2f2;
	border-left: 4px solid #449a13;
	border-radius: 4px;
	color: #323232;
	font-size: 15px;
	line-height: 1.4;
}

#soumission .sm-statut.sm-statut-alerte { border-left-color: #d93025; background: #fdecea; }

#soumission .sm-barre {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-top: 10px;
}

/* ---------- Superficies ---------- */
#soumission .sm-panneau { padding: 16px; background: #f2f2f2; border-radius: 6px; }
#soumission .sm-panneau h4 { margin: 0 0 12px; font-size: 18px; color: #323232; }

#soumission .sm-zones { list-style: none; margin: 0; padding: 0; }
#soumission .sm-zones .sm-vide { color: #777; font-size: 15px; }

#soumission .sm-zone {
	display: grid;
	grid-template-columns: 30px 1fr auto;
	gap: 8px 10px;
	align-items: center;
	padding: 10px 0;
	border-bottom: 1px solid #dcdcdc;
}

#soumission .sm-pastille {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border: 2px solid #fff;
	border-radius: 50%;
	box-shadow: 0 0 0 1px #999;
	color: #111;
	font-size: 14px;
	font-weight: 700;
}

#soumission .sm-type {
	width: 100%;
	height: 44px;
	padding: 6px 10px;
	font-size: 15px;
	background-color: #fff;
	border: 2px solid #dcdcdc;
	border-radius: 5px;
}

#soumission .sm-zone-aire { font-size: 17px; font-weight: 700; color: #323232; white-space: nowrap; }

#soumission .sm-zone .sm-avert,
#soumission .sm-zone .sm-encours { grid-column: 2 / 4; font-size: 13px; line-height: 1.3; }
#soumission .sm-zone .sm-avert { color: #b45309; }
#soumission .sm-zone .sm-encours { color: #777; }

#soumission .sm-total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 2px solid #449a13;
	font-weight: 700;
	color: #323232;
}

#soumission .sm-total strong { font-size: 28px; line-height: 1.1; color: #449a13; white-space: nowrap; }
#soumission .sm-note { margin: 12px 0 0; font-size: 13px; line-height: 1.4; color: #666; }

/* ---------- Services (cases à cocher) ---------- */
#soumission .sm-choix {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 8px;
}

#soumission .sm-case {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 52px;
	margin: 0;
	padding: 10px 14px;
	background: #f2f2f2;
	border: 2px solid transparent;
	border-radius: 6px;
	font-weight: 600;
	line-height: 1.25;
	cursor: pointer;
}

#soumission .sm-case input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: #449a13; }
#soumission .sm-case.sm-coche { background: #e8f3df; border-color: #449a13; }

/* ---------- Envoi ---------- */
#soumission .sm-envoi { margin-top: 26px; }

#soumission .sm-btn-envoi {
	width: 100%;
	min-height: 58px;
	font-size: 16px;
	text-transform: uppercase;
}

#soumission .sm-alerte {
	margin-top: 14px;
	padding: 12px 14px;
	background: #fdecea;
	border-left: 4px solid #d93025;
	border-radius: 4px;
	color: #8a1f11;
	font-size: 15px;
	line-height: 1.4;
}

#soumission .sm-alerte p { margin: 0 0 4px; }
#soumission .sm-alerte p:last-child { margin-bottom: 0; }
#soumission .sm-alerte a { color: inherit; text-decoration: underline; }

#soumission .sm-confidentialite { margin: 12px 0 0; font-size: 13px; color: #777; }

/* ---------- Écrans plus larges ---------- */
@media (min-width: 992px) {
	#soumission .sm-carte { height: 560px; }
	#soumission .sm-btn-envoi { width: auto; min-width: 320px; }
}

@media (max-width: 991px) {
	#soumission .sm-panneau { margin-top: 18px; }
}

@media (max-width: 400px) {
	#soumission .sm-btn { font-size: 14px; padding: 8px 8px; }
	#soumission .sm-recherche .sm-btn { padding-left: 14px; padding-right: 14px; }
}