/* -------------------- GLOBAL -------------------- */
body {
	margin:0;
	padding:0;
	box-sizing:border-box;
	font-size:16px;
	font-weight:300;
	font-family:'Montserrat',sans-serif;
	line-height:1.7;
	background:#f4f4f4;
	color:#222;
	scroll-behavior:smooth;
}
a {
	transition:.25s;
}

a:hover {
	opacity:.7;
}
	
p {
	margin-bottom: 2rem;
}
	
.font-alt {
  font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
	

ul {
	list-style: inside;
	margin: 0 0 3rem;
	padding: 0;
}


blockquote {
	font-style: italic;
	line-height: 24px;
	margin: 0 0 30px 0;
	font-size: 125%;
	color: dimgray;
}
blockquote::before, blockquote::after {
	font-size: 150%;
	color:silver;
	line-height: 24px;
}
blockquote::before { content: "«"; padding-right: 0.5rem; }
blockquote::after  { content: "»"; padding-left: 0.3rem;/* display: inline-block; transform: translateY(10px);*/ }



/* -------------------- HEADER -------------------- */
header {
	position:fixed;
	width:100%;
	background:#fff;
	display:flex;
	justify-content:space-between;
	align-items:center;
	padding:20px 8%;
	z-index:1000;
	box-shadow:0 2px 10px rgba(0,0,0,0.05);
	transition:all .35s ease;
}
header.scrolled {
	padding:12px 8%;
	box-shadow:0 6px 30px rgba(0,0,0,0.08);
	background:rgba(255,255,255,0.95);
	backdrop-filter:blur(8px);
}

nav {
	display:flex;
	gap:20px;
	flex-wrap:wrap;
}
nav a {
	text-decoration:none;
	font-size:13px;
}

/* =========================================================
SCROLL ANIMATION
========================================================= */

section{
	opacity:0;
	transform:translateY(40px);
	transition:all .9s cubic-bezier(.2,.65,.3,1);
}

section.visible{
	opacity:1;
	transform:translateY(0);
}

/* -------------------- HAMBURGER -------------------- */



.hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
  gap: 5px;
	transform: translateY(20px);
}

.hamburger span {
  width: 25px;
  height: 3px;
background:#000;
transition:0.3s;
}

/* -------------------- MOBILE MENU -------------------- */
.mobile-menu {
	position: fixed;
	top: 0;
	right: -100%;
	width: 70%;
	height: 100%;
	background: #111;
	padding: 80px 30px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	transition: 0.4s ease;
	z-index: 2000;
	box-shadow:-8px 0 30px rgba(0,0,0,0.08);
}

.mobile-menu.active {
	right: 0;
}

.mobile-menu a {
	color: white;
	text-decoration: none;
}

.mobile-menu a{
	text-decoration:none;
	color:#000;
	font-size:16px;
}

/* RESPONSIVE */

@media (max-width:768px) {
	.desktop-menu{
		display:none;
	}

	.hamburger{
		display:flex;
	}
	
	.mt-4 { 
		margin: 2.5rem 2rem 0; 
		display: block;
	}
}
.logo.mobile {
	font-style:inherit;
	transform: translate(50px, -23px);
}
nav.desktop-menu .logo, .logo {
	font-weight: 700;
/*	font-size: 18px;*/
}

/* DESKTOP / MOBILE MENU */

.desktop-menu{
display:flex;
gap:25px;
}

.desktop-menu a{
text-decoration:none;
color:#000;
}
/* CORRECTION MENU MOBILE */
@media (max-width: 768px) {
	nav.desktop-menu,
	.desktop-menu {
		display: none !important;
	}

	.hamburger {
		display: flex !important;
	}
}

/* -------------------- SECTIONS -------------------- */
section {
	min-height:100vh;
	padding:110px 10%;
	display:flex;
	flex-direction:column;
	justify-content:center;
}

h2 {
	font-size:2em;
	margin-bottom:20px;
	/*font-family:"Playfair Display",serif;*/
	letter-spacing:1px;
	font-weight: 500;
}

/* -------------------- HERO VIDEO -------------------- */
.hero {
	position:relative;
	color:#fff;
}
.hero video {
	position:absolute;
	top:0;left:0;
	width:100%;height:100%;
	object-fit:cover;
	z-index:-2;
	animation:heroZoom 25s ease-in-out infinite alternate;
}
.hero::after{
	content:"";
	position:absolute;
	top:0;left:0;
	width:100%;height:100%;
	background:rgba(0,0,0,0.65);
	z-index:-1;
}
#s1 div {	
	width: 100%;
	text-align: center;
}
h1 {
	font-size: 30px;
	letter-spacing: 6px;
	text-align: center;
	line-height: 1;
}
	h1 span {
		line-height: 1;
	}
.mt-4 {
	margin-top: 1.5rem;
	color: white;
	text-align: center;
		display: block;
	max-width: 100%;
}
section.hero {
	padding: 0;
}
section.hero img {
	max-width: fit-content; 
	padding: 2rem 2rem 2rem 0;
}

.gold {
	color: #c6a75e;
}	
.caps {
	text-transform: uppercase;
}

/* =========================================================
HERO VIDEO EFFECT
========================================================= */
@keyframes heroZoom {
	0% {
		transform:scale(1);
	}
	100% {
		transform:scale(1.12);
	}
}




/* -------------------- MAP -------------------- */
.map {
	margin-top:30px;
	width:100%;
	height:350px;
	border:none;
}

/* -------------------- FORM -------------------- */
form {
	max-width:600px;
	background:#fff;
	padding: 10px 40px 10px 10px;
	box-shadow:0 20px 50px rgba(0,0,0,0.08);
}

input,textarea {
	width:100%;
	padding:14px;
	margin-bottom:15px;
	border:1px solid #ccc;
	font-family:'Montserrat';
}
textarea {
	min-height:130px;
}

button {
	padding:14px;
	background:#000;
	color:#fff;
	border:none;
	cursor:pointer;
	transition:0.3s;
}
button:hover { background:#444; }

.rgpd {
	display:flex;
	align-items:center;
	gap:10px;
	font-size:13px;
	margin-bottom:15px;
}

input[type="checkbox"] {
	width: auto;
	margin-top: 14px;
}

#formMessage {
	margin-top:20px;
}
.success { color:green; }
.error { color:red; }

/* -------------------- GALERIE -------------------- */
/* GALERIE MOSAÏQUE LUXE */

.gallery-luxe{
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	grid-auto-rows:180px;
	gap:22px;
	margin-top:60px;
}

.gallery-luxe .item {
	position:relative;
	overflow:hidden;
	cursor:pointer;
	background:#f2f2f2;
	border-radius: 2rem;
	
	/* Fade-in élégant */
	opacity:1;
	transform:none;
	transition:all 0.8s ease;
}

.gallery-luxe img{
	width:100%;
	height:100%;
	object-fit:cover;
	transition:transform 0.8s ease, filter 0.8s ease;
}

/* gallery: Variations ratios */
.large {
	grid-column:span 2;
	grid-row:span 2;
}
.tall{
	grid-row:span 2;
}
.wide	{
	grid-column:span 2;
}


/* Effet premium subtil */

.gallery-luxe .item:hover img {
	transform:scale(1.05);
	filter:brightness(1.05);
}

/* LIGHTBOX */

.lightbox{
	display:none;
	position:fixed;
	z-index:999;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.92);
	justify-content:center;
	align-items:center;
}

.lightbox.active{
	display:flex;
}

.lightbox-img{
	max-width:85%;
	max-height:85%;
	box-shadow:0 25px 60px rgba(0,0,0,0.5);
}

.close {
	position:absolute;
	top:30px;
	right:40px;
	color:#fff;
	font-size:40px;
	cursor:pointer;
}

/* Responsive */

@media(max-width:768px){
	.gallery-luxe{
		grid-template-columns:repeat(3, 1fr);
		grid-auto-rows:150px;
	}
	.large, .tall, .wide{
		grid-column:span 2;
		grid-row:span 1;
	}
}
	
/* section 1 */


/* ===== MOBILE GALERIE OPTIMISÉE ===== */

@media(max-width:768px) {
	.gallery-luxe{
		grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
		grid-auto-rows:140px;
		gap:12px;
	}
	/* On neutralise les tailles multiples sur mobile */
	.large, .tall, .wide{
		grid-column:span 1 !important;
		grid-row:span 1 !important;
	}
}
















/* ===== MENTIONS LÉGALES ===== */

.legal-toggle{
	display:flex;
	justify-content:space-between;
	align-items:center;
	cursor:pointer;
	padding:15px 0;
	border-bottom:1px solid #ddd;
}

.legal-toggle span {
	font-size: inherit;	
}
.legal-toggle .arrow{
	font-size:22px;
	transition:transform 0.3s ease;
}

.legal-content{
	max-height:0;
	overflow:hidden;
	transition:max-height 0.5s ease, padding 0.3s ease;
}

.legal-content.active{
	max-height:600px;
	padding-top:30px;
}

.legal-grid{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:40px;
	line-height:1.8;
	color:#444;
}

.legal-grid ul{
	list-style:none;
	padding:0;
}

/* Responsive */

@media(max-width:768px){
	.legal-grid{
		grid-template-columns:1fr;
		gap:20px;
	}
}











#contactForm {
    margin: 0 auto;
}


/* Grid */
.grid-container {
	display: grid;
 	grid-template-columns: 2fr, 1fr;
  	gap: 20px;
	width: 100%;
/*	max-width: 1400px;*/
	margin: auto;
	grid-auto-rows:1fr;
}
.gridx1 {
	grid-template-columns: 1fr;
}
.gridx2 {
	grid-template-columns: 1fr 1fr;
}
.gridx3 {
	grid-template-columns: 1fr 1fr 1fr;
}
/* Carte image */
.grid-item {
	position: relative;
	overflow: hidden;
}

.grid-item img {
	width: 100%;
	height: 250px;
	object-fit: cover;
	display: block;
	margin-bottom: 10px;
}

























img {
	border-radius:2rem;
	margin:0/*20px*/ auto;
}

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

.section-img{
	object-fit: cover;
	width:100%;
/*
max-width:1400px;
display:block;
*/
}

.img-inline{
width:100%;
max-width:800px;
display:block;
}










.text-image img,
.text-image .text{
	display:inline-block;
	width:44.9%;
}

.text-image .text{
	margin-right:10%;
}

.text-image{
	object-fit: cover;
}

.text-image.reverse{
flex-direction:row-reverse;
}

/* Responsive */

@media(max-width:900px){
	.text-image{
		flex-direction:column;
	}

	.text-image.reverse{
		flex-direction:column;
	}
}
@media(max-width:768px){
	body {
		font-size:16px;
		line-height:1.4;
		color: black;
	}
}

span {
/*
	font-size: 150%;
	line-height: 1.5;
*/
	color: blue;
}
	
strong, .liste.liste_light h3 { 
	font-size: unset;
	font-weight: unset;
	line-height: normal;
    margin-top: 0;
    line-height: inherit;
/*	color: red; */
}	
.liste.liste_light h3::before {
	content: "•";
	margin-right: 10px;
	font-weight: 600;
}
.liste h3 {
	margin-bottom: 0;
}
.liste p {
	margin: 0;
}




.contact-form {
	max-width: 900px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

.contact-form input,
.contact-form textarea {
	width: 100%;
	padding: 14px 16px;
	border: 1px solid #d8d8d8;
	background: #fff;
	font-size: 16px;
	font-family: inherit;
	box-sizing: border-box;
}

.contact-form textarea {
	resize: vertical;
	min-height: 160px;
}

.contact-form button {
	padding: 14px 22px;
	border: 0;
	cursor: pointer;
	font-size: 16px;
}

.rgpd {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
}

.hp-field {
	position: absolute !important;
	left: -9999px !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

#formMessage.success {
	color: #1f7a1f;
}

#formMessage.error {
	color: #b00020;
}

@media (max-width: 768px) {
	.form-row {
		grid-template-columns: 1fr;
	}
}
.math-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	align-items: end;
	font-size: 13px;
}

.math-question label {
	display: block;
	font-size: 13px;
	line-height: 1.4;
	margin-bottom: 29px;
}