html,
body {
	overscroll-behavior-y: contain;
	-webkit-overflow-scrolling: touch;
}

body {
	margin: 0;
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	color: #003C64;
}

header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 60px;
	background-color: white;
	border-bottom: 2px solid #003C64;
	z-index: 1001;
}

.header-inner {
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
}

.logo img {
	width: 250px;
	height: 50px;
	object-fit: contain;
}

.nav-categories {
	display: flex;
	gap: 20px;
}

.nav-categories div {
	font-weight: bold;
	cursor: pointer;
}

.nav-link {
	color: #003C64;
	text-decoration: none;
	font-weight: bold;
}

.simple-link {
	color: #003C64;
	text-decoration: none;
}

.burger-toggle {
	display: none;
	font-size: 24px;
	cursor: pointer;
}

main {
	padding-top: 100px;
	background-color: #DAF1EB;
}

.main-inner,
.footer-inner {
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 10px;
}

footer {
	background-color: white;
	border-top: 2px solid #003C64;
	padding: 20px;
}

.footer-columns {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 15px;
	margin-bottom: 15px;
}

.footer-col {
	text-align: left;
	font-weight: bold;
}

.footer-line {
	padding-bottom: 15px;
}

.footer-link {
	color: #003C64;
	text-decoration: none;
}

.footer-bottom {
	text-align: center;
}

.form-block {
	width: 100%;
	border: 2px solid #003C64;
	border-radius: 5px;
	background-color: white;
	padding: 10px;
	box-sizing: border-box;
}

.content-block {
	width: 100%;
	border: 2px solid #003C64;
	border-radius: 5px;
	background-color: white;
	padding: 10px;
	box-sizing: border-box;
	display: flex;
	align-items: flex-start;
}

.content-block2 {
	width: 100%;
	border: 2px solid #003C64;
	border-radius: 5px;
	background-color: white;
	padding: 10px;
	box-sizing: border-box;
}

.form-grid {
	display: grid;
	grid-template-columns: 2fr 2fr 1fr;
	gap: 15px;
}

.form-grid input,
.form-grid button {
	width: 100%;
	padding: 10px;
	box-sizing: border-box;
}

.form-grid input {
	border: 2px solid #ccc;
	border-radius: 3px;
}

.form-grid button {
	background-color: #003C64;
	color: white;
	font-weight: bold;
	text-transform: uppercase;
	border: none;
	border-radius: 3px;
	cursor: pointer;
}

.form-grid button:hover {
	background-color: #00558c;
}

.form-grid select,
.form-grid input {
	width: 100%;
	padding: 10px;
	box-sizing: border-box;
	border: 2px solid #ccc;
	border-radius: 3px;
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	height: 42px;
	/* homogénéise la hauteur avec les inputs */
	appearance: none;
	/* enlève le style OS natif */
	background-color: white;
}

.form-grid {
	align-items: center;
	/* force l'alignement vertical homogène */
}


.form-grid select {
	background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%23003C64' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 12px 8px;
	padding-right: 30px;
	/* espace pour la flèche */
}

.breadcrumb-container {
	position: relative;
	min-height: 20px;
	margin-top: 5px;
	margin-bottom: 5px;
}

.breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	font-size: 14px;
	line-height: 1.4;
	margin-left: 28px;
	/* correspond à la largeur de l'icône home */
	margin-top: -17px;
}

.breadcrumb>* {
	display: inline-flex;
	align-items: center;
}

.breadcrumb .fa-home {
	position: absolute;
	left: 0;
	margin-right: 6px;
	font-size: 16px;
	top: 1px;
}

.scroll-to-top {
	position: fixed;
	bottom: 20px;
	right: 20px;
	background-color: #003C64;
	color: white;
	padding: 10px 13px;
	border-radius: 8px;
	font-size: 20px;
	font-weight: bold;
	display: none;
	cursor: pointer;
	z-index: 1000;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
	transition: opacity 0.3s ease;
}

.scroll-to-top:hover {
	background-color: #00558c;
}

.autocomplete-suggestions.active {
	display: block;
}


@media (max-width: 768px) {
	.form-grid {
		gap: 10px !important;
		/* réduit l’espace entre éléments */
	}
}

.spacer {
	width: 100%;
	height: 20px;
}

.mini-spacer {
	width: 100%;
	height: 1px;
}

.faicon {
	color: #30AF78;
	width: 30px;
	font-size: 20px;
	vertical-align: sub;
}
.faicon::before {
  display: inline-block;
  width: 30px;
}
.fabreadcrumbs {
	color: #30AF78;
	vertical-align: middle;
	margin-left: 10px;
	margin-right: 10px;
}

.famenu {
	color: #30AF78;
	width: 14px;
	font-size: 18px;
	vertical-align: middle;
}

.inner-blocks {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 10px;
}

.inner-block {
	background-color: #F5F5F5;
	padding: 10px;
	border-radius: 5px;
	text-align: left;
	display: flex;
	align-items: center;
}

.location-block {
	display: flex;
	align-items: center;
}

.location-block .faicon {
	flex-shrink: 0;
	font-size: 18px;
	margin-top: 2px;
}

.inner-block.full-width {
	grid-column: span 3;
}

.image-blocks {
	display: flex;
	flex-wrap: nowrap;
	gap: 10px;
	align-items: flex-start;
	width: 100%;
}

.note-block {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.note-global {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.note-image {
	width: 100px;
	height: 20px;
	padding: 3px;
	background-color: #fff;
	border-radius: 5px;
}

.note-text {
	font-size: 14px;
	color: #003C64;
}

.info-icon {
	color: #D6D6D6;
	font-size: 16px;
}

.info-container {
	position: relative;
	display: inline-block;
}

.info-popup {
	display: none;
	position: absolute;
	top: 15px;
	right: -10px;
	padding: 5px;
	z-index: 100;
	width: 292px;
	height: 90px;
}

/* Affichage au survol desktop */
.info-container:hover .info-popup {
	display: block;
}

.note-distribution {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.note-line {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: #003C64;
}

.note-bar {
	width: 90px;
	height: 18px;
	border-radius: 5px;
}

.horaires-block {
	display: flex;
	align-items: center;
}

.horaires-wrapper {
	display: flex;
	flex-direction: column;
	gap: 3px;
	font-size: 14px;
	color: #003C64;
}

.horaires-note {
	margin-top: 6px;
	font-size: 12px;
	font-style: italic;
	color: #003C64;
}

.image-column,
.small-image-column {
	display: flex;
	justify-content: center;
	align-items: center;
}

.image-column {
	flex: 0 0 160px;
}

.small-image-column {
	flex: 0 0 100px;
}

.image-column img {
	width: 100%;
	max-width: 160px;
	height: 160px;
	border-radius: 10px;
	object-fit: cover;
	object-position: center;
	display: block;
}

.small-image-column img {
	width: 64px;
	height: 64px;
	object-fit: contain;
}

.text-columns,
.text-columns-3 {
	flex: 1 1 auto;
	display: grid;
	gap: 10px;
}

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

.text-columns-3 {
	grid-template-columns: 1fr 1fr;
}

.text-columns-3 .full-width,
.text-item.full-width {
	grid-column: span 2;
}

.text-item {
	background-color: #F5F5F5;
	padding: 10px;
	border-radius: 3px;
	text-align: left;
}

.mini-blocks-container,
.mini-blocks-2col {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}

.mini-block {
	display: flex;
	align-items: center;
	padding-top: 3px;
	padding-bottom: 3px;
}

.mini-block img {
	display: block;
	width: 32px;
	height: 32px;
	margin-right: 10px;
}

.mini-block span {
	flex: 1;
	line-height: 1;
}

.title-block {
	font-size: 16px;
	font-weight: bold;
}

.title-main {
	font-size: 18px;
	font-weight: bold;
	color: #003C64;
	text-decoration: underline #30AF78;
	text-transform: uppercase;
	text-decoration-thickness: 2px;
}

.map-block {
	padding: 0;
	overflow: hidden;
}

.map-container {
	width: 100%;
	height: 300px;
	border-radius: 5px;
}

.map-image-flex {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.image-side {
	flex: 0 0 25%;
	max-width: 25%;
	border-radius: 5px;
	overflow: hidden;
}

.image-side img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.poi-icon {
	vertical-align: sub;
	margin-right: 10px;
	width: 22px;
	height: 22px;
	flex-shrink: 0;
}

.poi-open {
	color: #30AF78;
	font-weight: bold;
}

.poi-close {
	color: #FF4A4A;
	font-weight: bold;
}

.map-side {
	flex: 1 1 75%;
	max-width: 75%;
	border-radius: 5px;
	overflow: hidden;
}

.map-container-2 {
	width: 100%;
	height: 400px;
}

.split-map-flex {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
}

.bloc-image,
.bloc-carte {
	box-sizing: border-box;
	padding: 0;
	border: 2px solid #003C64;
	border-radius: 5px;
	overflow: hidden;
	background: white;
}

.bloc-image {
	flex: 0 0 25%;
	max-width: 25%;
	min-width: 250px;
	height: 300px;
}

.bloc-carte {
	flex: 1;
	max-width: 75%;
	min-width: 300px;
	height: 300px;
}

.image-wrapper {
	width: 100%;
	height: 300px;
	overflow: hidden;
}

.image-wrapper img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.map-container-fixed {
	width: 100%;
	height: 100%;
}

@media (max-width: 768px) {
	.split-map-flex {
		flex-direction: column;
	}

	.image-column img {
		max-width: 100%;
		border-radius: 10px;
		margin-bottom: 10px;
	}

	.bloc-image,
	.bloc-carte {
		max-width: 100%;
		flex: 0 0 100%;
	}

	.form-grid,
	.footer-columns,
	.inner-blocks {
		grid-template-columns: 1fr !important;
	}

	.mini-blocks-container,
	.mini-blocks-2col {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	.image-blocks {
		flex-direction: column;
		align-items: center;
		display: block;
	}

	.text-columns,
	.text-columns-3 {
		grid-template-columns: 1fr;
	}

	.text-columns .full-width,
	.text-columns-3 .full-width,
	.inner-blocks .full-width {
		grid-column: span 1;
	}

	.burger-toggle {
		display: block;
	}

	.nav-categories {
		display: none;
		position: absolute;
		top: 60px;
		left: 0;
		right: 0;
		background: white;
		flex-direction: column;
		padding: 10px 20px;
		border-top: 2px solid #003C64;
		border-bottom: 2px solid #003C64;
		z-index: 999;
	}

	.nav-categories.active {
		display: flex;
	}

	.nav-categories div {
		padding: 10px 0;
	}
}

.autocomplete-wrapper {
	position: relative;
	width: 100%;
}

#villes {
	width: 100%;
	padding: 10px;
	font-size: 14px;
	height: 42px;
	border: 2px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
}

.autocomplete-suggestions {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1000;
	width: 99%;
	background: #fff;
	border-left: 2px solid #ccc;
	border-right: 2px solid #ccc;
	border-bottom: 2px solid #ccc;
	border-top: none;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	box-shadow: none;
	display: none;
	max-height: 235px;
	overflow-y: auto;
	color: #003C64;
	margin-top: 0;
	padding: 0;
}

.autocomplete-suggestions:empty {
	border: none;
}

.autocomplete-suggestions div {
	padding: 10px 14px;
	font-size: 14px;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.autocomplete-suggestions div:hover,
.autocomplete-suggestions .highlighted {
	background-color: #003C64;
	color: #fff;
}

.pics-copyright {
	position: relative;
	bottom: 18px;
	left: 9px;
	color: #CCC;
	font-size: 10px;
}

.color-green {
	color: #30AF78;
}

.uppercase {
	text-transform: uppercase;
}

.mini-space-left {
	margin-left: 5px;
}

.mini-space-right {
	margin-right: 5px;
}

.space-left {
	margin-left: 10px;
}

.space-right {
	margin-right: 10px;
}

.multipoi-map {
	width: 25px;
	height: 25px;
	background-color: #FFF;
	border-radius: 25px;
	border: 2px solid #003C64;
	padding: 3px
}

.multipoi-img {
	width: 25px;
	height: 25px
}

.modal-btn {
	cursor: pointer;
}

.modal {
	display: none;
	position: fixed;
	z-index: 2000;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.7);
}

.modal-content {
	background-color: #fefefe;
	margin-left: auto;
	margin-right: auto;
	margin-top: 100px;
	border: 2px solid #003C64;
	border-radius: 5px;
	width: 90%;
	height: 100%;
	max-width: 600px;
	max-height: 266px;
}

.close {
	float: right;
	font-size: 26px;
	font-weight: bold;
	top: -15px;
	right: -15px;
	position: relative;
	background-color: #FFFFFF;
	border-radius: 50px;
	padding-left: 10px;
	padding-right: 10px;
	border: 2px solid #003C64;
	z-index: 2001;
}

.close:hover,
.close:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
}

.modal-iframe {
	width: 100%;
	height: 100%;
	top: -36px;
	position: relative;
}

.vignette-bloc {
	height: 150px;
	position: relative;
}

.vignette-img {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.vignette-txt {
	text-align: center;
}

.vignette-spacer {
	width: 100%;
	height: 5px;
}

.image-article-wrapper {
	width: 100%;
	height: 300px;
	overflow: hidden;
	border-radius: 10px;
	position: relative;
}

.article-cover-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
}

.article-header-relation {
	font-weight: bold;
	font-size: 16px;
}

.article-list {
	margin-bottom: 10px;
	list-style: none;
	display: flex;
	align-items: center;
}

.fa-article {
	margin-right: 10px;
	color: #30AF78;
}

/* Correction iOS image rendering */
img {
	max-width: 100%;
	height: auto;
	display: block;
	image-rendering: auto;
	-webkit-backface-visibility: hidden;
	-webkit-transform: translateZ(0);
	/* Fix rendering bugs iOS */
}

/* Spécifique aux vignettes */
.vignette-img,
.image-wrapper img,
.article-cover-img {
	width: 100%;
	/*   height: auto; */
	object-fit: cover;
	aspect-ratio: 4/3;
	/* à ajuster selon tes besoins */
}

.note-vignette {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 5px;
}

.note-vignette img {
	width: 80px;
	height: 16px;
	display: inline-block;
	object-fit: contain;
}

.note-vignette span {
	font-size: 14px;
	color: #003C64;
	line-height: 1;
}

.footer-link-line {
	display: flex;
	align-items: center;
	gap: 3px;
}

.footer-link-line .faicon {
	flex-shrink: 0;
}

.footer-link-line .footer-link {
	display: inline-block;
	line-height: 1.4;
}

.inner-blocks-3col {
	grid-template-columns: repeat(3, 1fr);
}
.status-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.status-block {
  white-space: nowrap;
}

.status-icon {
  vertical-align: middle;
}

.status-note {
  font-size: 10px;
  color: #003C64;
  white-space: nowrap;
  margin-left: 5px;
}

.poi-distance {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  width: 75px;
  margin-left: 10px;
}