* { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
	min-height: 100%; }

body {
color: var(--texte);
font-family: Arial, Helvetica, sans-serif;
line-height: 1.6;
background: var(--fond-principal); }

body::before {
	content: "";
	position: fixed;
	inset: 0;
	background-image: var(--fond-image);
	background-position: var(--fond-position);
	background-size: var(--fond-size);
	background-repeat: no-repeat;
	background-attachment: var(--fond-attachment);
	z-index: 0; }

body::after {
	content: "";
	position: fixed;
	inset: 0;
	background: var(--fond-overlay);
	z-index: 1; }

a { color: var(--accent);
	text-decoration: none; }

a:hover { text-decoration: underline; }

.page-shell {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	position: relative;
	z-index: 2; }

.main-content {
	flex: 1 1 auto;
	width: 100%;
	padding: 0 20px calc(var(--footer-h) + 28px); }

.container {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto; }

.top-sticky-block {
	position: sticky;
	top: var(--top-sticky-offset);
	z-index: 100;
	background: transparent;
	padding: 0 0 16px; }

.hero-block {
	width: 100%;
	padding: 0 0 10px;
	text-align: center; }

@font-face {
   font-family: 'GorillaMilkshake';
   font-display: swap;
   src: url('fonts/GorillaMilkshake.ttf'); }

@font-face {
   font-family: 'AYearWithoutRain';
   font-display: swap;
   src: url('fonts/AYearWithoutRain.ttf'); }

		h1 {
			margin: 0 0 10px 0;
			font-size: clamp(2rem, 3.5vw, 3.5rem);
			line-height: 1.1;
			font-weight: normal;
			font-family: "AYearWithoutRain";
			font-weight: bold;
			color: #ffffff;
			text-wrap: balance;
			text-align: center;
			margin-top: 30px;
			white-space: nowrap; }

		h2 {
			margin: 0 0 18px 0;
			font-size: clamp(1.00rem, 1.2vw, 1.3rem);
			line-height: 1.2;
			font-weight: normal;
			font-family: "AYearWithoutRain";
			letter-spacing: 2px;
			color: var(--texte-soft);
			text-wrap: balance;
			text-align: center; }
		
		.texte-dore-italique { color: var(--texte-titres); font-style: italic; }
		
		.liste-coche {
			list-style: none;
			padding-left: 0;
			margin: 20px 0; }

				.liste-coche li {
					position: relative;
					padding-left: 30px;
					margin-bottom: 12px;
					line-height: 1.5; }

				.liste-coche li::before {
					content: "✓";
					position: absolute;
					left: 0;
					top: 0;
					color: #8fd694; /* vert clair */
					font-weight: bold;
					font-size: 1.2em; }
		
.logo-entete {
	max-height: 150px;
	width: auto;
	display: block;
	margin: 0 auto; }
	
	@media (max-width: 560px) { .logo-entete { max-height: 70px; } }

/* ICÔNES AVEC LIENS */

@media (max-width: 560px) { .intro-zone { padding: 16px 14px 12px; } }

.phone-link {
	pointer-events: none;
	cursor: default; }
	
.subtitle-icons {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: nowrap;
	gap: 12px;
	margin-top: 5px;
	margin-bottom: 5px; }
	
.icon-tel {
	height: 65px;
	width: auto;
	display: block;
	flex: 0 0 auto; }
	
		@media (max-width: 560px) {
			.phone-link {
				pointer-events: auto;
				cursor: pointer; }
			.subtitle-icons {
				gap: 8px;
				flex-wrap: wrap; }
			.icon-tel { height: 40px; }
			.subtitle-icons .footer-icon-link {
				width: 34px;
				height: 34px;
				min-width: 34px; }
			.subtitle-icons .footer-icon {
				width: 18px;
				height: 18px; }
			.subtitle-icons .nomobile { display: none; } }

.footer-pill-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 38px;
	min-width: 100px;
	padding: 0 2px;
	border: 1px solid rgba(255,255,255,0.18);
	border-radius: 999px;
	background: rgba(255,255,255,0.08);
	transition: background 0.2s ease, transform 0.2s ease;
	box-shadow: 0 2px 6px rgba(0,0,0,0.18);
	overflow: hidden; }

		.footer-pill-link:hover {
			background: rgba(255,255,255,0.16);
			transform: translateY(-1px);
			text-decoration: none; }

		.footer-pill-icon {
			display: block;
			height: 80%;
			width: auto;
			object-fit: contain; }
		
		@media (max-width: 560px) {
			.subtitle-icons .footer-pill-link {
				height: 34px;
				min-width: 72px;
				padding: 0 4px; }
			.subtitle-icons .footer-pill-icon { height: 24px; } }



 /* LIGNE DES MINIATURES */
 
 .miniatures-section {
	margin: 0 auto 20px auto;
	width: 100%;
	overflow: visible;
	display: block;
}

.miniatures-row {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	align-items: start;
	gap: 18px;
	width: 100%;
	max-width: 1200px;
	margin: 20px auto 15px auto; }

		.miniature-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-align: center; }

		.miniature-nom {
			margin-top: 6px;
			font-size: 0.70rem;
			font-style: italic;
			line-height: 1.2;
			color: var(--texte-soft); }

.miniatures-row img {
	display: block;
	width: 100%;
	height: 220px;
	object-fit: cover;
	padding: 6px;
	background: var(--fond-secondaire);
	border: 1px solid var(--bordure);
	border-radius: 8px;
	box-shadow: var(--ombre);
	transition: transform 0.2s ease, background 0.2s ease; }
	
	.miniatures-link:hover {
		transform: translateY(-2px);
		background: rgba(255,255,255,0.14);
		text-decoration: none; }
		
@media (max-width: 560px) {
	.miniatures-section { width: 100%; }
	.miniatures-row { width: 100%; gap: 10px; }
	.miniatures-row img { height: 140px; max-height: none; }
	.miniatures-row.two-rows-mobile {
		grid-auto-flow: row;
		grid-template-columns: repeat(var(--logo-mobile-cols), 1fr); } }

.miniatures-caption {
	text-align: center;
	font-size: 1.20rem;
	font-style: italic;
	color: var(--texte-soft);
	margin-top: 0px;
	margin-bottom: 20px;
	opacity: 1.00; }
	
		@media (max-width: 560px) { .miniatures-caption { font-size: 0.70rem; } }


/* BANDEAU MENU */

	.tabs-bar {
		position: relative;
		z-index: 10;
		display: grid;
		grid-template-columns: repeat(4, 1fr); /* toujours 4 colonnes */
		gap: 8px;
		background: var(--fond-secondaire);
		border: 1px solid rgba(255,255,255,0.18);
		border-radius: 0;
		padding: 10px;
		width: 100vw;
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		padding-left: calc((100vw - 1280px) / 2 + 20px);
		padding-right: calc((100vw - 1280px) / 2 + 20px);

		backdrop-filter: blur(3px);
		-webkit-backdrop-filter: blur(3px); }
		
	@media (max-width: 1280px) { .tabs-bar { padding-left: 20px; padding-right: 20px; } }
			
	.tab-btn {
		display: flex;
		align-items: center;
		justify-content: center;

		height: 48px;
		padding: 6px 6px;

		text-align: center;
		font-size: clamp(0.65rem, 2.5vw, 1rem);
		font-weight: bold;

		white-space: normal;
		line-height: 1.1;
		word-break: break-word;

		background: var(--fond-principal);
		color: #fff;
		border: 1px solid rgba(255,255,255,0.2);
		border-radius: 0;

		transition: background 0.2s ease, transform 0.2s ease; }
		
	.tab-btn:hover,
	.tab-btn.active {
		text-decoration: none;
		transform: translateY(-1px);
		background: var(--hover-boutons);
		box-shadow: 0 2px 6px rgba(0,0,0,0.3); }

	.area {
		padding-top: 24px;
		position: relative;
		z-index: 100;
		background: transparent; }

			.content-panel {
				background: var(--fond-principal);
				border: 1px solid var(--bordure);
				border-radius: 14px;
				padding: 24px;
				box-shadow: var(--ombre);
				min-height: 240px; }
			.content-panel p { margin-bottom: 16px; }
			.content-panel p:last-child { margin-bottom: 0; }

			.content-panel h3 {
				margin-top: 0;
				margin-bottom: 12px;
				font-size: 1.5rem;
				color: var(--texte-titres); }

					.content-photo-top-right {
						float: right;
						max-width: 50%;
						margin: 0 0 12px 20px; }
					.content-photo-top-right img {
						display: block;
						width: 100%;
						height: auto;
						max-height: 400px;
						object-fit: cover;
						border-radius: 10px; }
					.content-photo-bottom-right {
						float: right;
						clear: right;
						max-width: 50%;
						margin: 0 0 12px 20px; }
					.content-photo-bottom-right img {
						display: block;
						width: 100%;
						height: auto;
						max-height: 400px;
						object-fit: cover;
						border-radius: 10px; }
					.content-panel::after {
						content: "";
						display: block;
						clear: both; }						
							
								.content-photo-top-right .diaporama-bienvenue {
									position: relative;
									display: block;
									width: 100%;
									overflow: hidden;
									border-radius: 10px; }

								.content-photo-top-right .diaporama-bienvenue .slide-placeholder {
									display: block;
									width: 100%;
									height: auto;
									max-height: 400px;
									object-fit: cover;
									border-radius: 10px;
									visibility: hidden; }

								.content-photo-top-right .diaporama-bienvenue .slide-item {
									position: absolute;
									top: 0;
									left: 0;
									display: block;
									width: 100%;
									height: 100%;
									max-height: 400px;
									object-fit: cover;
									border-radius: 10px;
									opacity: 0;
									transition: opacity 2.2s ease-in-out; }

								.content-photo-top-right .diaporama-bienvenue .slide-item.active {
									opacity: 1;
									z-index: 2; }
										
						@media (max-width: 700px) {
						.content-photo-top-right,
						.content-photo-bottom-right {
							float: none;
							clear: none;
							max-width: 100%;
							margin: 0 0 16px 0; }

						.content-photo-top-right img,
						.content-photo-bottom-right img {
							display: block;
							max-width: 90%;
							width: auto;
							margin: 0 auto; }

						.content-photo-top-right .diaporama-bienvenue {
							width: 90%;
							margin: 0 auto; }

						.content-photo-top-right .diaporama-bienvenue .slide-placeholder,
						.content-photo-top-right .diaporama-bienvenue .slide-item {
							width: 100%;
							max-width: 100%;
							margin: 0; }

						.content-photo-bottom-right {
							margin-top: 16px; } }

	.pictos-line {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		gap: 10px;
		margin-top: 20px; }
	.picto-item {
		height: 70px;
		width: auto;
		display: block; }

			.visually-hidden {
				position: absolute !important;
				width: 1px !important;
				height: 1px !important;
				padding: 0 !important;
				margin: -1px !important;
				overflow: hidden !important;
				clip: rect(0,0,0,0) !important;
				white-space: nowrap !important;
				border: 0 !important; }

			@media (max-width: 560px) {
				.main-content { padding: 0 14px calc(var(--footer-h) + 34px); }
				.top-sticky-block { padding: 0 0 12px; }
				.content-panel { padding: 18px; } }

		.title-with-logo {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 40px;
			flex-wrap: nowrap; }

		.titles {
			display: flex;
			flex-direction: column;
			align-items: center; }

		@media (max-width: 560px) {
			.title-with-logo {
				flex-direction: row;
				justify-content: center;
				align-items: center;
				gap: 12px;
				flex-wrap: nowrap; }
			.logo-title {
				height: 80px;
				width: auto;
				flex-shrink: 0; }
			.titles {
				align-items: center;
				text-align: center; } }

/* FOOTER STICKY (PIED DE PAGE) */

.footer-sticky {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999;
	min-height: var(--footer-h);
	display: flex;
	align-items: center;
	background: var(--fond-principal);
	border-top: 1px solid rgba(255,255,255,0.12);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px); }

.footer-inner {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 10px 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 14px;
	color: #e8ece8;
	font-size: 0.70rem;
	flex-wrap: nowrap; /* toujours sur une ligne */
	white-space: nowrap; /* empêche les retours */ }

.footer-right {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: nowrap; }

.footer-left {
	flex: 0 1 auto;
	min-width: 0;
	white-space: normal;
	line-height: 1.2; }

.footer-right { flex: 0 0 auto; }

.footer-link {
	color: var(--accent);
	cursor: pointer;
	white-space: nowrap; }

.footer-link:hover { text-decoration: underline; }

.footer-icon-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	min-width: 38px;
	border: 1px solid rgba(255,255,255,0.18);
	border-radius: 50%;
	background: rgba(255,255,255,0.08);
	transition: background 0.2s ease, transform 0.2s ease; }

.footer-icon-link:hover {
	background: rgba(255,255,255,0.16);
	transform: translateY(-1px);
	text-decoration: none; }

.footer-icon {
	width: 20px;
	height: 20px;
	display: block;
	object-fit: contain; }

		.map-wrap {
			text-align: center;
			width: 100%;
			margin: 0 auto 14px auto; }
		.access-map {
			display: block;
			width: 100%;
			max-width: 500px;
			height: auto;
			margin: 0 auto; }
		.map-link-line {
			text-align: center;
			margin-top: 60px;
			margin-bottom: 80px; }
		.map-link {
			color: gold;
			font-size: 1.2rem;
			text-decoration: none; }
		.map-link:hover {
			color: white;
			text-decoration: none; }
		.contact-form {
		margin-top: 20px; }


/* FORMULAIRE DE CONTACT */

.contact-form { margin-top: 20px; }

.contact-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 20px; }

.form-field { display: flex; flex-direction: column; }

.form-field-full { grid-column: 1 / -1; }

.form-field label { margin-bottom: 6px; font-weight: bold; color: #f3f1e8; }

.form-field input,
.form-field textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid rgba(255,255,255,0.18);
	border-radius: 8px;
	background: rgba(255,255,255,0.08);
	color: #ffffff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1rem;
	outline: none; }

.form-field input:focus,
.form-field textarea:focus {
	border-color: var(--accent);
	background: rgba(255,255,255,0.12); }

.form-field textarea {
	resize: vertical;
	min-height: 180px; }
.form-actions {
	margin-top: 20px;
	text-align: center; }
.contact-submit {
	padding: 12px 22px;
	border: 1px solid var(--bordure);
	border-radius: 8px;
	background: var(--fond-secondaire);
	color: var(--texte);
	font-weight: bold;
	font-size: 1rem;
	cursor: pointer;
	box-shadow: var(--ombre);
	transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.contact-submit:hover {
	transform: translateY(-1px);
	background: var(--fond-secondaire);
	color: var(--accent); }

.form-message {
	margin: 0 0 18px 0;
	padding: 12px 14px;
	border-radius: 8px;
	font-weight: bold; }
.form-message.success {
	background: rgba(70, 160, 90, 0.20);
	border: 1px solid rgba(70, 160, 90, 0.45);
	color: #dff5df; }
.form-message.error {
	background: rgba(180, 60, 60, 0.18);
	border: 1px solid rgba(180, 60, 60, 0.40);
	color: #ffdede; }

@media (max-width: 700px) {
	.contact-grid { grid-template-columns: 1fr; }
	.form-field-full { grid-column: auto; } }

.intro-flash-wrap {
	width: 100%;
	max-width: 980px;
	margin: 0 auto 22px auto;
	text-align: center; }
.intro-flash-wrap .form-message {
	margin: 0;
	display: inline-block;
	min-width: 280px;
	max-width: 100%;
	text-align: center; }