/*
 * Signal Frelon IDF — styles front
 *
 * Conception mobile d'abord : les règles de base visent le téléphone,
 * les media queries n'ajoutent que ce que les grands écrans permettent.
 * Les couleurs reprennent la charte du site FREDON Île-de-France.
 */

.sfi {
	--sfi-vert: #78895d;
	--sfi-vert-fonce: #5d6b48;
	--sfi-or: #d6970a;
	--sfi-gris: #4c5150;
	--sfi-gris-clair: #6f7674;
	--sfi-surface: #ffffff;
	--sfi-fond: #f6f7f4;
	--sfi-bordure: #e3e6dd;
	--sfi-radius: 12px;
	--sfi-map-height: 460px;
	--sfi-ombre: 0 1px 2px rgba(20, 24, 18, .06), 0 4px 16px rgba(20, 24, 18, .06);
	--sfi-ombre-forte: 0 2px 4px rgba(20, 24, 18, .08), 0 12px 28px rgba(20, 24, 18, .12);

	box-sizing: border-box;
	color: var(--sfi-gris);
	font-size: 16px;
	line-height: 1.55;
	/* container-type retiré en 1.0.1 : le confinement de mise en page
	   réservait de l'espace fantôme sous les blocs dans certains thèmes. */
}

.sfi *,
.sfi *::before,
.sfi *::after {
	box-sizing: inherit;
}

.sfi img {
	max-width: 100%;
	height: auto;
}

/*
 * Plusieurs éléments masqués via l'attribut [hidden] portent aussi une règle
 * display (flex, grid). Cette règle d'auteur l'emporterait sur le display:none
 * de la feuille du navigateur : les fiches repliées resteraient affichées.
 */
.sfi [hidden] {
	display: none !important;
}

/* Masquage visuel sans perte pour les lecteurs d'écran. */
.sfi .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.sfi-titre {
	margin: 0 0 .5em;
	color: var(--sfi-vert);
	font-size: 1.5rem;
	line-height: 1.25;
}

.sfi-intro {
	margin: 0 0 1.25em;
	max-width: 68ch;
	color: var(--sfi-gris-clair);
}

/* --------------------------------------------------------------------------
   Éléments partagés : champs, boutons, icônes
   -------------------------------------------------------------------------- */

.sfi-icone {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
}

.sfi-champ {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	min-width: 0;
}

.sfi-champ-icone {
	position: absolute;
	left: 14px;
	display: flex;
	color: var(--sfi-gris-clair);
	pointer-events: none;
}

.sfi-champ input {
	width: 100%;
	/* 48px : cible tactile confortable, au-delà du minimum de 44px. */
	min-height: 48px;
	padding: 12px 42px 12px 44px;
	border: 1px solid var(--sfi-bordure);
	border-radius: var(--sfi-radius);
	background: var(--sfi-surface);
	color: inherit;
	/* 16px minimum : en dessous, Safari iOS zoome à la mise au point. */
	font-size: 16px;
	font-family: inherit;
	line-height: 1.4;
	transition: border-color .18s ease, box-shadow .18s ease;
	-webkit-appearance: none;
	appearance: none;
}

.sfi-champ input:focus {
	outline: none;
	border-color: var(--sfi-vert);
	box-shadow: 0 0 0 3px rgba(120, 137, 93, .22);
}

.sfi-effacer {
	position: absolute;
	right: 8px;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--sfi-gris-clair);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.sfi-effacer:hover {
	background: var(--sfi-fond);
	color: var(--sfi-gris);
}

.sfi-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 12px 20px;
	border: 1px solid var(--sfi-vert);
	border-radius: var(--sfi-radius);
	background: var(--sfi-vert);
	color: #fff;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .18s ease, border-color .18s ease, transform .12s ease;
}

.sfi-btn:hover {
	background: var(--sfi-vert-fonce);
	border-color: var(--sfi-vert-fonce);
	color: #fff;
}

.sfi-btn:active {
	transform: translateY(1px);
}

.sfi-btn:focus-visible {
	outline: 3px solid var(--sfi-or);
	outline-offset: 2px;
}

.sfi-btn[disabled] {
	opacity: .55;
	cursor: progress;
}

.sfi-btn-reset,
.sfi-btn-plus {
	background: transparent;
	color: var(--sfi-vert);
}

.sfi-btn-reset:hover,
.sfi-btn-plus:hover {
	background: var(--sfi-vert);
	color: #fff;
}

.sfi-message {
	margin: 0 0 1rem;
	padding: 12px 14px;
	border-left: 3px solid var(--sfi-or);
	border-radius: 0 var(--sfi-radius) var(--sfi-radius) 0;
	background: #fdf6e6;
	color: #6b5307;
	font-size: .94rem;
}

.sfi-message.sfi-message-erreur {
	border-left-color: #c0392b;
	background: #fdeeec;
	color: #8c2c21;
}

/* --------------------------------------------------------------------------
   Bloc carte : recherche
   -------------------------------------------------------------------------- */

.sfi-recherche {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 1rem;
}

.sfi-suggestions {
	position: absolute;
	z-index: 500;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	max-height: 280px;
	margin: 0;
	padding: 6px;
	overflow-y: auto;
	list-style: none;
	border: 1px solid var(--sfi-bordure);
	border-radius: var(--sfi-radius);
	background: var(--sfi-surface);
	box-shadow: var(--sfi-ombre-forte);
}

.sfi-suggestions li {
	margin: 0;
	padding: 11px 12px;
	border-radius: 8px;
	font-size: .95rem;
	cursor: pointer;
}

.sfi-suggestions li:hover,
.sfi-suggestions li.is-active {
	background: var(--sfi-fond);
}

.sfi-suggestions li[aria-disabled="true"] {
	color: var(--sfi-gris-clair);
	cursor: default;
}

.sfi-suggestion-contexte {
	display: block;
	color: var(--sfi-gris-clair);
	font-size: .82rem;
}

/* --------------------------------------------------------------------------
   Bloc carte : bascule liste / carte (mobile et tablette)
   -------------------------------------------------------------------------- */

.sfi-bascule {
	display: flex;
	gap: 4px;
	margin-bottom: 12px;
	padding: 4px;
	border-radius: var(--sfi-radius);
	background: var(--sfi-fond);
}

.sfi-bascule-btn {
	flex: 1 1 50%;
	min-height: 44px;
	padding: 10px;
	border: 0;
	border-radius: calc(var(--sfi-radius) - 4px);
	background: transparent;
	color: var(--sfi-gris-clair);
	font-family: inherit;
	font-size: .95rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease;
}

.sfi-bascule-btn.is-active {
	background: var(--sfi-surface);
	color: var(--sfi-vert);
	box-shadow: var(--sfi-ombre);
}

/* --------------------------------------------------------------------------
   Bloc carte : disposition
   -------------------------------------------------------------------------- */

.sfi-split {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

/* Sur petit écran, un seul panneau est visible à la fois. */
.sfi-split [data-vue-panneau] {
	display: none;
}

.sfi-split [data-vue-panneau].is-visible {
	display: block;
}

.sfi-map-wrap {
	position: relative;
}

.sfi-map {
	/* Sur téléphone, la carte laisse toujours dépasser la suite de la page :
	   l'utilisateur voit qu'il y a du contenu dessous et peut y aller. */
	height: min(var(--sfi-map-height), 62vh);
	height: min(var(--sfi-map-height), 62svh);
	position: relative;
	border-radius: var(--sfi-radius);
	background: var(--sfi-fond);
	overflow: hidden;
	box-shadow: var(--sfi-ombre);
}

/* Voile d'aide affiché quand un doigt seul tente de déplacer la carte. */
.sfi-map-indication {
	position: absolute;
	z-index: 3;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(40, 45, 38, .45);
	color: #fff;
	font-size: 1rem;
	font-weight: 600;
	text-align: center;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s ease;
}

.sfi-map-indication.is-visible {
	opacity: 1;
}

/* Leaflet dessine ses tuiles au-dessus de tout si on n'abaisse pas le contexte. */
.sfi-map .leaflet-pane,
.sfi-map .leaflet-control {
	z-index: 1;
}

.sfi-map .leaflet-top,
.sfi-map .leaflet-bottom {
	z-index: 2;
}

.sfi-liste {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sfi-liste-entete {
	margin: 0 0 10px;
	color: var(--sfi-gris-clair);
	font-size: .92rem;
}

.sfi-vide {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 32px 20px;
	border: 1px dashed var(--sfi-bordure);
	border-radius: var(--sfi-radius);
	background: var(--sfi-fond);
	color: var(--sfi-gris-clair);
	text-align: center;
}

.sfi-vide .sfi-icone {
	width: 36px;
	height: 36px;
	color: var(--sfi-vert);
	opacity: .65;
}

.sfi-vide p {
	max-width: 40ch;
	margin: 0;
	font-size: .95rem;
}

/* --------------------------------------------------------------------------
   Bloc carte : résultat (shortlist façon fiche établissement)
   -------------------------------------------------------------------------- */

.sfi-resultat {
	position: relative;
	display: grid;
	grid-template-columns: 34px 1fr;
	gap: 12px;
	padding: 14px;
	border: 1px solid var(--sfi-bordure);
	border-radius: var(--sfi-radius);
	background: var(--sfi-surface);
	cursor: pointer;
	transition: border-color .18s ease, box-shadow .18s ease, transform .12s ease;
}

.sfi-resultat:hover,
.sfi-resultat.is-active {
	border-color: var(--sfi-vert);
	box-shadow: var(--sfi-ombre-forte);
}

.sfi-resultat.is-active {
	transform: translateY(-1px);
}

.sfi-resultat:focus-within {
	outline: 3px solid rgba(120, 137, 93, .35);
	outline-offset: 2px;
}

.sfi-resultat-rang {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--sfi-vert);
	color: #fff;
	font-size: .95rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.sfi-resultat-corps {
	min-width: 0;
}

.sfi-resultat-tete {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.sfi-resultat-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	flex: 0 0 auto;
	padding: 4px;
	border: 1px solid var(--sfi-bordure);
	border-radius: 8px;
	background: #fff;
}

.sfi-resultat-logo img {
	max-height: 100%;
	object-fit: contain;
}

.sfi-resultat-nom {
	margin: 0;
	color: var(--sfi-vert);
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.3;
	/* Un nom à rallonge ne doit pas déformer la fiche. */
	overflow-wrap: anywhere;
}

.sfi-resultat-distance {
	display: inline-block;
	margin-top: 2px;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--sfi-fond);
	color: var(--sfi-gris);
	font-size: .82rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.sfi-resultat-adresse {
	margin: 8px 0 0;
	color: var(--sfi-gris-clair);
	font-size: .9rem;
}

.sfi-resultat-secteur {
	margin: 4px 0 0;
	color: var(--sfi-gris-clair);
	font-size: .84rem;
	font-style: italic;
}

.sfi-resultat-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.sfi-action {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	/* 44px : recommandation d'accessibilité pour une cible tactile. */
	min-height: 44px;
	padding: 8px 12px;
	border: 1px solid var(--sfi-bordure);
	border-radius: 999px;
	background: var(--sfi-surface);
	color: var(--sfi-gris);
	font-size: .88rem;
	font-weight: 600;
	text-decoration: none;
	transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}

.sfi-action:hover {
	border-color: var(--sfi-or);
	color: var(--sfi-or);
}

.sfi-action-principale {
	border-color: var(--sfi-vert);
	background: var(--sfi-vert);
	color: #fff;
}

.sfi-action-principale:hover {
	background: var(--sfi-vert-fonce);
	border-color: var(--sfi-vert-fonce);
	color: #fff;
}

.sfi-action .sfi-icone {
	width: 17px;
	height: 17px;
}

/* Marqueurs numérotés dessinés en CSS plutôt qu'en image. */
.sfi-marqueur {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 2px solid #fff;
	border-radius: 50% 50% 50% 0;
	background: var(--sfi-vert, #78895d);
	color: #fff;
	font-family: inherit;
	font-size: .88rem;
	font-weight: 700;
	transform: rotate(-45deg);
	box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}

.sfi-marqueur span {
	transform: rotate(45deg);
}

.sfi-marqueur.is-active {
	background: var(--sfi-or, #d6970a);
	z-index: 400;
}

.sfi-marqueur-moi {
	width: 18px;
	height: 18px;
	border: 3px solid #fff;
	border-radius: 50%;
	background: #2b6cb0;
	box-shadow: 0 0 0 4px rgba(43, 108, 176, .25), 0 2px 6px rgba(0, 0, 0, .3);
}

.sfi-popup h4 {
	margin: 0 0 4px;
	color: var(--sfi-vert);
	font-size: 1rem;
}

.sfi-popup p {
	margin: 0 0 6px;
	font-size: .88rem;
}

.sfi-popup a {
	color: var(--sfi-or);
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   Bloc annuaire
   -------------------------------------------------------------------------- */

.sfi-filtres {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin-bottom: 1.25rem;
	padding: 16px;
	border: 1px solid var(--sfi-bordure);
	border-radius: var(--sfi-radius);
	background: var(--sfi-fond);
}

.sfi-filtre label {
	display: block;
	margin-bottom: 6px;
	color: var(--sfi-gris);
	font-size: .86rem;
	font-weight: 600;
}

.sfi-filtre select {
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	border: 1px solid var(--sfi-bordure);
	border-radius: var(--sfi-radius);
	background: var(--sfi-surface);
	color: inherit;
	font-family: inherit;
	font-size: 16px;
}

.sfi-filtre select:focus {
	outline: none;
	border-color: var(--sfi-vert);
	box-shadow: 0 0 0 3px rgba(120, 137, 93, .22);
}

.sfi-compteur {
	margin: 0 0 1rem;
	color: var(--sfi-gris-clair);
	font-size: .92rem;
}

.sfi-grille {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

.sfi-fiche {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 18px;
	border: 1px solid var(--sfi-bordure);
	border-radius: var(--sfi-radius);
	background: var(--sfi-surface);
	box-shadow: var(--sfi-ombre);
	transition: box-shadow .2s ease, transform .16s ease;
}

.sfi-fiche:hover {
	box-shadow: var(--sfi-ombre-forte);
	transform: translateY(-2px);
}

.sfi-fiche-entete {
	display: grid;
	grid-template-columns: 72px 1fr;
	gap: 14px;
	align-items: start;
}

.sfi-fiche-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	padding: 6px;
	border: 1px solid var(--sfi-bordure);
	border-radius: 10px;
	background: #fff;
	overflow: hidden;
}

.sfi-fiche-logo img {
	max-height: 100%;
	object-fit: contain;
}

.sfi-fiche-initiale {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border-radius: 8px;
	background: var(--sfi-fond);
	color: var(--sfi-vert);
	font-size: 1.7rem;
	font-weight: 700;
}

.sfi-fiche-nom {
	margin: 0 0 6px;
	color: var(--sfi-vert);
	font-size: 1.12rem;
	font-weight: 700;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.sfi-fiche-adresse {
	margin: 0 0 4px;
	color: var(--sfi-gris-clair);
	font-size: .9rem;
	line-height: 1.45;
}

.sfi-fiche-multi {
	margin: 4px 0 0;
	color: var(--sfi-or);
	font-size: .82rem;
	font-weight: 600;
}

.sfi-fiche-zone {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.sfi-fiche-zone-label {
	color: var(--sfi-gris-clair);
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.sfi-puces {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sfi-puce {
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--sfi-fond);
	color: var(--sfi-vert);
	font-size: .78rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.sfi-fiche-contacts {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid var(--sfi-bordure);
}

.sfi-contact {
	display: flex;
	align-items: center;
	gap: 9px;
	min-height: 44px;
	padding: 6px 2px;
	color: var(--sfi-gris);
	font-size: .9rem;
	text-decoration: none;
	overflow-wrap: anywhere;
	transition: color .18s ease;
}

.sfi-contact:hover {
	color: var(--sfi-or);
}

.sfi-contact .sfi-icone {
	color: var(--sfi-vert);
}

.sfi-contact:hover .sfi-icone {
	color: var(--sfi-or);
}

.sfi-contact-tel span {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.sfi-aucun {
	padding: 28px;
	border: 1px dashed var(--sfi-bordure);
	border-radius: var(--sfi-radius);
	background: var(--sfi-fond);
	color: var(--sfi-gris-clair);
	text-align: center;
}

.sfi-plus-wrap {
	margin-top: 1.5rem;
	margin-bottom: 0;
	text-align: center;
}

/* Aucune marge résiduelle en fin de section : c'est la page qui décide
   de l'espace entre les blocs, pas le widget. */
.sfi > :last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Bloc combiné carte + annuaire
   -------------------------------------------------------------------------- */

.sfi-complet .sfi-carte {
	margin-bottom: 28px;
	padding-bottom: 28px;
	border-bottom: 1px solid var(--sfi-bordure, #e3e6dd);
}

@media (min-width: 900px) {

	.sfi-complet .sfi-carte {
		margin-bottom: 40px;
		padding-bottom: 40px;
	}
}

/* --------------------------------------------------------------------------
   Tablette
   -------------------------------------------------------------------------- */

@media (min-width: 600px) {

	.sfi-titre {
		font-size: 1.75rem;
	}

	.sfi-recherche {
		flex-direction: row;
		align-items: center;
	}

	.sfi-btn-geoloc {
		flex: 0 0 auto;
	}

	.sfi-filtres {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: end;
	}

	.sfi-filtre-recherche {
		grid-column: 1 / -1;
	}

	.sfi-grille {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* --------------------------------------------------------------------------
   Ordinateur : carte et liste côte à côte, plus de bascule
   -------------------------------------------------------------------------- */

@media (min-width: 900px) {

	.sfi-bascule {
		display: none;
	}

	/* Grand écran : la carte reprend sa hauteur nominale,
	   alignée sur la liste défilante d'à côté. */
	.sfi-map {
		height: var(--sfi-map-height);
	}

	.sfi-split {
		grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr);
		gap: 20px;
	}

	/* Les deux panneaux redeviennent visibles simultanément. */
	.sfi-split [data-vue-panneau] {
		display: block;
	}

	.sfi-liste-wrap {
		display: flex;
		flex-direction: column;
		max-height: var(--sfi-map-height);
		overflow-y: auto;
		/* Évite que le défilement de la liste emporte la page entière. */
		overscroll-behavior: contain;
		scrollbar-width: thin;
	}

	.sfi-liste-wrap::-webkit-scrollbar {
		width: 8px;
	}

	.sfi-liste-wrap::-webkit-scrollbar-thumb {
		border-radius: 4px;
		background: var(--sfi-bordure);
	}

	.sfi-panneau-gauche .sfi-map-wrap {
		order: 2;
	}

	.sfi-panneau-gauche .sfi-liste-wrap {
		order: 1;
	}

	.sfi-panneau-gauche .sfi-split {
		grid-template-columns: minmax(320px, 1fr) minmax(0, 1.35fr);
	}

	.sfi-filtres {
		grid-template-columns: 2fr 1fr 1fr auto;
	}

	.sfi-filtre-recherche {
		grid-column: auto;
	}

	.sfi-grille {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {

	.sfi-recherche {
		max-width: 720px;
	}
}

/* --------------------------------------------------------------------------
   Préférences système
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.sfi *,
	.sfi *::before,
	.sfi *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}

	.sfi-fiche:hover,
	.sfi-resultat.is-active {
		transform: none;
	}
}

@media print {

	.sfi-recherche,
	.sfi-bascule,
	.sfi-filtres,
	.sfi-map-wrap,
	.sfi-plus-wrap {
		display: none !important;
	}

	.sfi-fiche {
		break-inside: avoid;
		box-shadow: none;
	}

	.sfi-grille {
		grid-template-columns: repeat(2, 1fr);
	}
}