/* AJNOR — Version du site : 1.0.25 — 2026-08-18 */
/* -------------------- GLOBAL -------------------- */
:root {
	--gold: #c6a75e;
	--font: 'Montserrat', sans-serif;
	--font-alt: "Playfair Display", serif;
	--cartouche_color: #fff;
	--bkg_color: #f4f4f4;
}
html {
	scroll-behavior: smooth;
}

*, *::before, *::after {
	box-sizing: border-box;
}

body {
	margin:0;
	padding:0;
	font-size:16px;
	font-weight:300;
	font-family: var(--font);
	line-height:1.7;
	background: var(--bkg_color);
	color:#222;
}
strong {
	font-weight: 700;
	color: #111;
}
a {
	transition:.25s;
}

a:hover {
	opacity:.7;
}

.s1 a {
	border: 2px solid var(--gold);
	font-family: unset;
    display: block;
    inline-size: fit-content;
    margin: 0 auto;
    padding: 1rem;
    color: var(--gold);
    text-decoration: none;
  	text-transform: uppercase;
}
.s1 a:hover {
	background: var(--gold);
    color: black;
}
    
    
a.callToAction {
	padding: 1rem;
	border: 2px solid var(--gold);
	color:var(--gold);
    background: transparent;
	text-transform: uppercase;
}
a.callToAction:hover {
    background: var(--gold);
    color: black;
}
.desktop-menu a.callToAction {
 font-weight: 700;
 background: var(--gold);
 padding: 0 1rem;
}

	
p {
	margin-bottom: 2rem;
}
	
.font-alt {
  font-family: var(--font-alt);
  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: 1.5;
	margin: 0 0 30px 0;
	font-size: 150%;
	color: dimgray;
	-webkit-hyphens: auto;
	hyphens: auto;
}
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%;
  	padding:20px 8%;
  	box-sizing: border-box;
	background:#fff;
	display:flex;
	justify-content:space-between;
	align-items:center;
	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: 0px 10px 10px rgba(0, 0, 0, 0.1);
	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
========================================================= */


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

.mobile-header-menu {
	display: none;
	align-items: center;
	gap: 16px;
	min-width: 0;
}

.hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
  gap: 5px;
}

.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%;
	box-sizing: border-box;
	overflow-y: auto;
	background: var(--bkg_color);
	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 {
	text-decoration:none;
	color:#000;
	font-size:16px;
	padding: 1rem;
    border-radius: 1rem;
	background: transparent;
    line-height: 1.2;
}
.mobile-menu a:hover {
	font-weight:700;
	background: white;
    line-height: 1.2;
}

/* RESPONSIVE */

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

	.mobile-header-menu {
		display:flex;
	}

	.hamburger{
		display:flex;
	}
	
	.mt-4 { 
		margin: 2.5rem 2rem 0; 
		display: block;
	}
}
.logo.mobile {
	font-style: inherit;
	font-weight: 700;
	flex-shrink: 0;
	white-space: nowrap;
}

.mobile-current-section {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1 1 auto;
	min-width: 0;
	max-width: none;
}

.mobile-header-actions {
	display: none;
	align-items: center;
	gap: 8px;
	margin-left: auto;
	flex-shrink: 0;
}

.mobile-header-actions a {
	box-sizing: border-box;
	text-decoration: none;
	white-space: nowrap;
}

.mobile-top-button {
	display: none;
	position: fixed;
	left: -2px;
	right: auto;
	bottom: 24px;
	z-index: 900;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	box-sizing: border-box;
	border: 2px solid #000;
	color: #000;
	background: #fff;
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
}


.mobile-top-button.is-visible {
	display: inline-flex;
}

.mobile-top-button:hover {
	background: var(--bkg_color);
}

.logo.mobile,
.mobile-current-section {
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}
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;
}

/* Élément actif du menu desktop */
@media (min-width: 769px) {
	.desktop-menu a.active {
		font-weight: 700;
		background: var(--bkg_color);
	}
}
/* CORRECTION MENU MOBILE */
@media (max-width: 768px) {
	/* Header mobile stable au scroll : même hauteur et mêmes marges
	   avant/après l’ajout de la classe .scrolled. */
	header,
	header.scrolled {
		box-sizing: border-box;
		padding: 20px 10% 10px 10%;
	}

	nav.desktop-menu,
	.desktop-menu {
		display: none !important;
	}

	.mobile-header-menu {
		display: flex !important;
		width: 100%;
		gap: 10px;
	}

	.hamburger {
		display: flex !important;
		flex-shrink: 0;
	}

	.mobile-header-actions {
		display: flex;
	}


	.mobile-header-actions .mobile-contact-button {
		padding: 0.5rem 0.65rem;
		font-size: 10px;
		font-weight: 700;
		line-height: 1;
		background: transparent;
		color: var(--gold);
		border: 2px solid var(--gold);
	}

	.mobile-header-actions .mobile-contact-button:hover,
	.mobile-header-actions .mobile-contact-button.active {
		background: var(--gold);
		color: #000;
	}
}

/* -------------------- SECTIONS -------------------- */
section {
	scroll-margin-top: 90px;
	padding:110px 10%;
	display:flex;
	flex-direction:column;
	justify-content:center;
}
.js section {
	opacity:0;
	transform:translateY(40px);
	transition:opacity .9s cubic-bezier(.2,.65,.3,1), transform .9s cubic-bezier(.2,.65,.3,1);
}

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

h2 {
	font-size:3em;
	margin: 0 0 20px 0;
	font-family:var(--font-alt);
	letter-spacing:1px;
	font-weight: 500;
}

/* -------------------- HERO VIDEO -------------------- */
/* Section d'accueil : vidéo sur toute la hauteur de l'écran */
.s1 {
	min-height: 100vh;
	overflow: hidden;
}

.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: var(--gold);
}	
.caps {
	text-transform: uppercase;
}

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



.certifs {
	text-align: center;
	padding:0.5rem;
}
.certifs img {
	max-width: 200px;
	border-radius: 0;
}
@media (max-width: 768px) {
	.certifs img {
		max-width: 130px;
	}
}



/* -------------------- 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%;
	box-sizing:border-box;
	padding:14px;
	margin-bottom:15px;
	border:1px solid #ccc;
	font-family: var(--font);
}
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;

	align-items: flex-start;
}

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:9999;
	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);
}

body.lightbox-open {
	overflow: hidden;
}

.close,
.lightbox .arrow {
	position:absolute;
	border:0;
	background:transparent;
	color:#fff;
	cursor:pointer;
	z-index:2;
}

.close {
	top:30px;
	right:40px;
	font-size:40px;
	line-height:1;
}

.lightbox .arrow {
	top:50%;
	transform:translateY(-50%);
	font-size:2.5rem;
	padding:1rem;
}
.lightbox .arrow.left { left:20px; }
.lightbox .arrow.right { right:20px; }
.close:focus-visible,
.lightbox .arrow:focus-visible,
.gallery-luxe img:focus-visible,
img.lightboxable:focus-visible,
.hamburger:focus-visible {
	outline:3px solid var(--gold);
	outline-offset:4px;
}

/* 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;
	}
}
	
/* img */
/* Images WebP avec fallback JPG/PNG.
   display: contents préserve le comportement de mise en page et des grids existantes. */
picture.webp-picture {
	display: contents;
}

.imgMobileOnly {
	display: none !important;
}
@media(max-width:768px) {
	.imgMobileOnly {
		display: block !important;
	}
}





/* ===== 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;
	font-weight: 600;
    margin-top: 2rem;
}

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

.legal-content{
	max-height:0;
	overflow:hidden;
	font-size: 13px;
	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;
	}
}









.cartouche {
	padding: 1rem;
    border-radius: 2rem;
    background: var(--cartouche_color);
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}

#contactForm {
    margin: 0 auto;
}


/* Grid */
.grid-container {
	display: grid;
 	grid-template-columns: 2fr 1fr;
  	gap: 20px;
	width: 100%;
/*	max-width: 1400px;*/
	margin: 0 auto;
	grid-auto-rows:1fr;
}
.gridx1 {
	grid-template-columns: 1fr;
}
.gridx2 {
	grid-template-columns: 1fr 1fr;
}
.gridx2largeOnly {
	display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
    gap: 20px;
}
@media (max-width: 768px) {
    .gridx2largeOnly {
        grid-template-columns: 1fr;
    }

    .gridx2largeOnly_item {
        width: 100%;
    }
}
.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;
	}
}

	
#strong, 
.liste.liste_light h3 { 
	font-size: unset;
	font-weight: unset;
    margin-top: 0;
    line-height: inherit;
/*	color: red; */
}	
.liste.liste_light h3::before {
	content: "•";
	margin-right: 10px;
	font-weight: 600;
	font-size: 20px;
    line-height: 1;
}
.liste h3 {
	margin-bottom: 0;
	font-weight: 300;
}
.liste p {
	margin: 0 0 0 16px;
}




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

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

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

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

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

.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;
	text-align: right;
}

/* Mobile — titres H2 */
@media (max-width: 768px) {
	h2 {
		font-size: 2.5rem;
		line-height: 1.2;
	}

	blockquote {
		font-size: inherit;
	}
}


/* Accessibilité : limiter les animations si l’utilisateur le demande */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.js section {
		opacity: 1;
		transform: none;
	}
}