:root {
	--couleur_fond: #f3efe8;
	--couleur_claire: #fbf9f5;
	--couleur_principale: #302f2a;
	--couleur_secondaire: #6d7762;
	--couleur_accent: #9b604f;
	--couleur_doree: #b89b70;
	--couleur_texte: #34332f;
	--couleur_texte_clair: #78736a;
	--couleur_bordure: #dcd5cb;
	--ombre_douce: 0 24px 70px rgba(48, 47, 42, 0.11);
	--largeur_contenu: 1240px;
	--rayon_petit: 4px;
}
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
html {
	scroll-behavior: smooth;
}
body {
	overflow-x: hidden;
	background: var(--couleur_fond);
	color: var(--couleur_texte);
	font-family: "Manrope", sans-serif;
	line-height: 1.75;
}
body.menu_ouvert,
body.visionneuse_ouverte {
	overflow: hidden;
}
img {
	display: block;
	width: 100%;
}
a {
	color: inherit;
	text-decoration: none;
}
button {
	color: inherit;
	font: inherit;
}
.conteneur {
	width: min(calc(100% - 48px), var(--largeur_contenu));
	margin: 0 auto;
}
.section {
	padding: 120px 0;
}
.section_claire {
	background: var(--couleur_claire);
}
.entete_section {
	max-width: 760px;
	margin-bottom: 62px;
}
.entete_section.centre {
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}
.sur_titre {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 17px;
	color: var(--couleur_accent);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}
.sur_titre::before {
	width: 34px;
	height: 1px;
	background: currentColor;
	content: "";
}
.titre_section {
	font-family: "Cormorant Garamond", serif;
	font-size: clamp(2.9rem, 5.5vw, 5.2rem);
	font-weight: 500;
	line-height: 0.98;
	letter-spacing: -0.035em;
}
.texte_intro {
	max-width: 680px;
	margin-top: 24px;
	color: var(--couleur_texte_clair);
	font-size: 1.04rem;
}
.centre .texte_intro {
	margin-right: auto;
	margin-left: auto;
}
.bouton {
	display: inline-flex;
	min-height: 54px;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 14px 27px;
	border: 1px solid var(--couleur_principale);
	border-radius: var(--rayon_petit);
	background: var(--couleur_principale);
	color: #ffffff;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.bouton:hover {
	transform: translateY(-3px);
	background: var(--couleur_accent);
	border-color: var(--couleur_accent);
}
.bouton_clair {
	background: transparent;
	color: var(--couleur_principale);
}
.bouton_clair:hover {
	color: #ffffff;
}
.lien_simple {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding-bottom: 5px;
	border-bottom: 1px solid var(--couleur_doree);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}
.lien_simple span {
	transition: transform 0.25s ease;
}
.lien_simple:hover span {
	transform: translateX(5px);
}
.en_tete {
	position: absolute;
	z-index: 20;
	top: 0;
	left: 0;
	width: 100%;
}
.barre_navigation {
	display: flex;
	min-height: 104px;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
}
.logo {
	position: relative;
	z-index: 22;
	display: flex;
	align-items: center;
	gap: 14px;
}
.logo_symbole {
	position: relative;
	display: grid;
	width: 48px;
	height: 48px;
	place-items: center;
	border: 1px solid var(--couleur_principale);
	border-radius: 50%;
	color: var(--couleur_principale);
	font-family: "Cormorant Garamond", serif;
	font-size: 1.35rem;
	font-weight: 600;
}
.logo_symbole::after {
	position: absolute;
	right: -3px;
	bottom: 5px;
	width: 11px;
	height: 11px;
	border: 3px solid var(--couleur_fond);
	border-radius: 50%;
	background: var(--couleur_accent);
	content: "";
}
.logo_texte {
	display: flex;
	flex-direction: column;
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	line-height: 1.3;
	text-transform: uppercase;
}
.logo_texte strong {
	color: var(--couleur_principale);
	font-family: "Cormorant Garamond", serif;
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: none;
}
.menu {
	display: flex;
	align-items: center;
	gap: 33px;
	list-style: none;
}
.menu a:not(.bouton) {
	position: relative;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.04em;
}
.menu a:not(.bouton)::after {
	position: absolute;
	right: 0;
	bottom: -8px;
	left: 0;
	height: 1px;
	background: var(--couleur_accent);
	content: "";
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.25s ease;
}
.menu a:not(.bouton):hover::after {
	transform: scaleX(1);
	transform-origin: left;
}
.bouton_menu {
	position: relative;
	z-index: 22;
	display: none;
	width: 48px;
	height: 48px;
	border: 1px solid var(--couleur_bordure);
	border-radius: 50%;
	background: rgba(251, 249, 245, 0.88);
	cursor: pointer;
}
.bouton_menu span {
	position: absolute;
	left: 14px;
	width: 18px;
	height: 1px;
	background: var(--couleur_principale);
	transition: top 0.25s ease, transform 0.25s ease;
}
.bouton_menu span:first-child {
	top: 19px;
}
.bouton_menu span:last-child {
	top: 27px;
}
.menu_ouvert .bouton_menu span:first-child {
	top: 23px;
	transform: rotate(45deg);
}
.menu_ouvert .bouton_menu span:last-child {
	top: 23px;
	transform: rotate(-45deg);
}
.accueil {
	position: relative;
	min-height: 860px;
	padding: 175px 0 95px;
	overflow: hidden;
}
.accueil::before {
	position: absolute;
	top: 0;
	right: 0;
	width: 39%;
	height: 100%;
	background: #e4ded4;
	content: "";
}
.grille_accueil {
	position: relative;
	z-index: 1;
	display: grid;
	align-items: center;
	grid-template-columns: minmax(0, 0.9fr) minmax(470px, 1fr);
	gap: 86px;
}
.titre_accueil {
	max-width: 760px;
	font-family: "Cormorant Garamond", serif;
	font-size: clamp(4.4rem, 8.1vw, 8rem);
	font-weight: 500;
	line-height: 0.82;
	letter-spacing: -0.055em;
}
.titre_accueil em {
	display: block;
	margin-left: 13%;
	color: var(--couleur_accent);
	font-weight: 500;
}
.texte_accueil {
	max-width: 590px;
	margin: 35px 0;
	color: var(--couleur_texte_clair);
	font-size: 1.08rem;
}
.actions_accueil {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px 28px;
}
.visuel_accueil {
	position: relative;
	padding: 0 40px 42px 0;
}
.image_accueil {
	height: 605px;
	box-shadow: var(--ombre_douce);
	object-fit: cover;
}
.signature_accueil {
	position: absolute;
	right: 0;
	bottom: 0;
	max-width: 255px;
	padding: 22px 25px;
	background: var(--couleur_principale);
	color: #ffffff;
}
.signature_accueil strong {
	display: block;
	margin-bottom: 5px;
	font-family: "Cormorant Garamond", serif;
	font-size: 1.45rem;
	font-style: italic;
	font-weight: 500;
	line-height: 1.15;
}
.signature_accueil span {
	color: rgba(255, 255, 255, 0.62);
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.mot_maison {
	padding: 58px 0;
	border-top: 1px solid var(--couleur_bordure);
	border-bottom: 1px solid var(--couleur_bordure);
}
.texte_maison {
	max-width: 980px;
	margin: 0 auto;
	font-family: "Cormorant Garamond", serif;
	font-size: clamp(2rem, 4vw, 3.5rem);
	font-weight: 500;
	line-height: 1.25;
	text-align: center;
}
.texte_maison em {
	color: var(--couleur_accent);
	font-weight: 500;
}
.grille_expertises {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.carte_expertise {
	position: relative;
	min-height: 390px;
	padding: 38px 34px;
	border: 1px solid var(--couleur_bordure);
	background: var(--couleur_claire);
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.carte_expertise:hover {
	transform: translateY(-7px);
	box-shadow: var(--ombre_douce);
}
.pastille_couleur {
	display: block;
	width: 62px;
	height: 62px;
	margin-bottom: 58px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 8px rgba(255, 255, 255, 0.3);
}
.pastille_sauge {
	background: #7b8871;
}
.pastille_argile {
	background: #aa6f5c;
}
.pastille_ivoire {
	background: #d9cdbb;
}
.carte_expertise h3 {
	margin-bottom: 15px;
	font-family: "Cormorant Garamond", serif;
	font-size: 2rem;
	font-weight: 600;
	line-height: 1.08;
}
.carte_expertise p {
	margin-bottom: 26px;
	color: var(--couleur_texte_clair);
	font-size: 0.93rem;
}
.galerie {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-auto-rows: 105px;
	gap: 16px;
}
.photo_galerie {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: #ded8ce;
	cursor: zoom-in;
	overflow: hidden;
}
.photo_galerie:nth-child(1) {
	grid-column: span 7;
	grid-row: span 5;
}
.photo_galerie:nth-child(2) {
	grid-column: span 5;
	grid-row: span 3;
}
.photo_galerie:nth-child(3) {
	grid-column: span 5;
	grid-row: span 4;
}
.photo_galerie:nth-child(4) {
	grid-column: span 4;
	grid-row: span 4;
}
.photo_galerie:nth-child(5) {
	grid-column: span 3;
	grid-row: span 4;
}
.photo_galerie:nth-child(6) {
	grid-column: span 5;
	grid-row: span 3;
}
.photo_galerie img {
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s ease, filter 0.4s ease;
}
.photo_galerie:hover img {
	transform: scale(1.035);
	filter: brightness(0.77);
}
.legende_photo {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	padding: 55px 24px 21px;
	align-items: flex-end;
	justify-content: space-between;
	gap: 15px;
	background: linear-gradient(to top, rgba(20, 20, 18, 0.76), transparent);
	color: #ffffff;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}
.photo_galerie:hover .legende_photo,
.photo_galerie:focus-visible .legende_photo {
	opacity: 1;
	transform: translateY(0);
}
.legende_photo strong {
	display: block;
	font-family: "Cormorant Garamond", serif;
	font-size: 1.35rem;
	font-weight: 600;
	line-height: 1.1;
}
.legende_photo span {
	font-size: 0.67rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.ouvrir_photo {
	font-size: 1.5rem;
}
.grille_approche {
	display: grid;
	align-items: center;
	grid-template-columns: minmax(430px, 0.9fr) minmax(0, 1fr);
	gap: 95px;
}
.visuel_approche {
	position: relative;
	padding: 42px 0 0 42px;
}
.visuel_approche::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 68%;
	height: 72%;
	background: var(--couleur_secondaire);
	content: "";
}
.visuel_approche img {
	position: relative;
	height: 620px;
	object-fit: cover;
}
.liste_approche {
	margin-top: 38px;
	list-style: none;
}
.element_approche {
	display: grid;
	padding: 25px 0;
	border-top: 1px solid var(--couleur_bordure);
	grid-template-columns: 18px 1fr;
	gap: 17px;
}
.element_approche:last-child {
	border-bottom: 1px solid var(--couleur_bordure);
}
.repere_approche {
	width: 8px;
	height: 8px;
	margin-top: 9px;
	border-radius: 50%;
	background: var(--couleur_accent);
}
.element_approche h3 {
	margin-bottom: 5px;
	font-family: "Cormorant Garamond", serif;
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.15;
}
.element_approche p {
	color: var(--couleur_texte_clair);
	font-size: 0.92rem;
}
.bande_couleurs {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
}
.nuance {
	position: relative;
	min-height: 230px;
	padding: 25px;
	color: #ffffff;
}
.nuance:nth-child(1) {
	background: #4a5143;
}
.nuance:nth-child(2) {
	background: #94604f;
}
.nuance:nth-child(3) {
	background: #c3a57b;
}
.nuance:nth-child(4) {
	background: #aeb4a2;
	color: var(--couleur_principale);
}
.nuance:nth-child(5) {
	background: #ded4c4;
	color: var(--couleur_principale);
}
.nuance span {
	position: absolute;
	bottom: 22px;
	left: 25px;
	font-family: "Cormorant Garamond", serif;
	font-size: 1.25rem;
	font-style: italic;
}
.grille_avis {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.carte_avis {
	display: flex;
	min-height: 330px;
	flex-direction: column;
	padding: 37px;
	border: 1px solid var(--couleur_bordure);
	background: var(--couleur_claire);
}
.guillemets {
	margin-bottom: 25px;
	color: var(--couleur_doree);
	font-family: "Cormorant Garamond", serif;
	font-size: 4rem;
	line-height: 0.7;
}
.carte_avis blockquote {
	margin-bottom: 30px;
	font-family: "Cormorant Garamond", serif;
	font-size: 1.35rem;
	font-style: italic;
	line-height: 1.45;
}
.auteur_avis {
	margin-top: auto;
	color: var(--couleur_texte_clair);
	font-size: 0.73rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}
.auteur_avis strong {
	display: block;
	color: var(--couleur_principale);
	font-size: 0.8rem;
}
.appel_action {
	padding: 0 0 120px;
}
.bloc_action {
	position: relative;
	display: grid;
	align-items: center;
	padding: 78px 72px;
	background: var(--couleur_principale);
	color: #ffffff;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 55px;
	overflow: hidden;
}
.bloc_action::after {
	position: absolute;
	right: 16%;
	bottom: -165px;
	width: 310px;
	height: 310px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 50%;
	content: "";
}
.bloc_action .sur_titre {
	color: #d8bca8;
}
.bloc_action .titre_section {
	max-width: 760px;
	font-size: clamp(2.7rem, 5vw, 4.7rem);
}
.bloc_action p {
	max-width: 680px;
	margin-top: 20px;
	color: rgba(255, 255, 255, 0.65);
}
.bloc_action .bouton {
	position: relative;
	z-index: 1;
	border-color: #ffffff;
	background: #ffffff;
	color: var(--couleur_principale);
}
.bloc_action .bouton:hover {
	border-color: var(--couleur_accent);
	background: var(--couleur_accent);
	color: #ffffff;
}
.pied_page {
	padding: 72px 0 30px;
	border-top: 1px solid var(--couleur_bordure);
	background: var(--couleur_claire);
}
.grille_pied {
	display: grid;
	margin-bottom: 60px;
	grid-template-columns: 1.3fr 0.6fr 0.8fr;
	gap: 75px;
}
.texte_pied {
	max-width: 430px;
	margin-top: 23px;
	color: var(--couleur_texte_clair);
	font-size: 0.9rem;
}
.colonne_pied h3 {
	margin-bottom: 20px;
	color: var(--couleur_accent);
	font-size: 0.68rem;
	letter-spacing: 0.17em;
	text-transform: uppercase;
}
.colonne_pied ul {
	display: grid;
	gap: 10px;
	color: var(--couleur_texte_clair);
	font-size: 0.87rem;
	list-style: none;
}
.colonne_pied a:hover {
	color: var(--couleur_accent);
}
.bas_pied {
	display: flex;
	padding-top: 28px;
	border-top: 1px solid var(--couleur_bordure);
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	color: var(--couleur_texte_clair);
	font-size: 0.7rem;
}
.credits_images {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 9px;
}
.visionneuse {
	position: fixed;
	z-index: 100;
	inset: 0;
	display: grid;
	padding: 70px;
	place-items: center;
	background: rgba(20, 20, 18, 0.94);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease;
}
.visionneuse.ouverte {
	opacity: 1;
	pointer-events: auto;
}
.image_visionneuse {
	width: auto;
	max-width: min(1100px, 100%);
	max-height: calc(100vh - 140px);
	box-shadow: 0 30px 90px rgba(0, 0, 0, 0.35);
}
.fermer_visionneuse {
	position: absolute;
	top: 22px;
	right: 25px;
	display: grid;
	width: 45px;
	height: 45px;
	place-items: center;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 50%;
	background: transparent;
	color: #ffffff;
	cursor: pointer;
	font-size: 1.45rem;
}
.apparition {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 0.75s ease, transform 0.75s ease;
}
.apparition.visible {
	opacity: 1;
	transform: translateY(0);
}

/* BOUTON DE RETOUR */

.bouton_retour{
	position:fixed;
	left:50%;
	transform:translateX(-50%);
	bottom:24px;
	z-index:9999;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	padding:14px 20px;
	border:1px solid rgba(32,35,33,.12);
	border-radius:999px;
	background:#fff;
	color:#202321;
	box-shadow:0 12px 35px rgba(0,0,0,.16);
	text-decoration:none;
	font:600 14px "DM Sans",sans-serif;
	transition:transform .25s ease,box-shadow .25s ease;
}

.bouton_retour:hover{
	transform:translateX(-50%) translateY(-3px);
	box-shadow:0 16px 40px rgba(0,0,0,.22);
}

.bouton_retour:focus-visible{
	outline:3px solid #202321;
	outline-offset:4px;
}

.bouton_retour span{
	font-size:18px;
	line-height:1;
}

@media (max-width: 1020px) {
	.section {
		padding: 92px 0;
	}
	.bouton_menu {
		display: block;
	}
	.menu {
		position: fixed;
		z-index: 21;
		inset: 0;
		flex-direction: column;
		justify-content: center;
		gap: 27px;
		background: var(--couleur_claire);
		opacity: 0;
		pointer-events: none;
		transform: translateY(-18px);
		transition: opacity 0.25s ease, transform 0.25s ease;
	}
	.menu_ouvert .menu {
		opacity: 1;
		pointer-events: auto;
		transform: translateY(0);
	}
	.menu a:not(.bouton) {
		font-family: "Cormorant Garamond", serif;
		font-size: 1.85rem;
	}
	.grille_accueil {
		grid-template-columns: 1fr 0.82fr;
		gap: 48px;
	}
	.image_accueil {
		height: 530px;
	}
	.grille_expertises {
		grid-template-columns: repeat(2, 1fr);
	}
	.carte_expertise:last-child {
		grid-column: 1 / -1;
	}
	.galerie {
		grid-auto-rows: 88px;
	}
	.grille_approche {
		gap: 58px;
	}
	.grille_avis {
		grid-template-columns: 1fr;
	}
	.carte_avis {
		min-height: 260px;
	}
}
@media (max-width: 760px) {
	.conteneur {
		width: min(calc(100% - 28px), var(--largeur_contenu));
	}
	.section {
		padding: 74px 0;
	}
	.accueil {
		padding-top: 140px;
	}
	.accueil::before {
		top: auto;
		bottom: 0;
		width: 100%;
		height: 38%;
	}
	.grille_accueil,
	.grille_approche,
	.bloc_action {
		grid-template-columns: 1fr;
	}
	.grille_accueil {
		gap: 58px;
	}
	.titre_accueil {
		font-size: clamp(4rem, 20vw, 6.1rem);
	}
	.visuel_accueil {
		width: min(100%, 540px);
		margin: 0 auto;
	}
	.image_accueil {
		height: 585px;
	}
	.grille_expertises {
		grid-template-columns: 1fr;
	}
	.carte_expertise:last-child {
		grid-column: auto;
	}
	.carte_expertise {
		min-height: 340px;
	}
	.pastille_couleur {
		margin-bottom: 40px;
	}
	.galerie {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: 260px;
	}
	.photo_galerie:nth-child(n) {
		grid-column: span 1;
		grid-row: span 1;
	}
	.photo_galerie:nth-child(1),
	.photo_galerie:nth-child(4) {
		grid-column: 1 / -1;
	}
	.legende_photo {
		opacity: 1;
		transform: none;
	}
	.grille_approche {
		gap: 65px;
	}
	.visuel_approche {
		padding: 30px 0 0 30px;
	}
	.visuel_approche img {
		height: 550px;
	}
	.bande_couleurs {
		grid-template-columns: repeat(5, minmax(150px, 1fr));
		overflow-x: auto;
	}
	.nuance {
		min-height: 180px;
	}
	.bloc_action {
		padding: 58px 30px;
		gap: 30px;
	}
	.bloc_action .bouton {
		justify-self: start;
	}
	.grille_pied {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	.bas_pied {
		align-items: flex-start;
		flex-direction: column;
	}
	.credits_images {
		justify-content: flex-start;
	}
	.visionneuse {
		padding: 55px 15px 25px;
	}
	.image_visionneuse {
		max-height: calc(100vh - 80px);
	}
}
@media (max-width: 500px) {
	.barre_navigation {
		min-height: 88px;
	}
	.logo_texte span {
		display: none;
	}
	.actions_accueil {
		align-items: stretch;
		flex-direction: column;
	}
	.bouton {
		width: 100%;
	}
	.visuel_accueil {
		padding: 0 18px 38px 0;
	}
	.image_accueil {
		height: 470px;
	}
	.signature_accueil {
		max-width: 225px;
		padding: 18px 20px;
	}
	.galerie {
		grid-template-columns: 1fr;
		grid-auto-rows: 315px;
	}
	.photo_galerie:nth-child(n) {
		grid-column: auto;
	}
	.visuel_approche img {
		height: 455px;
	}
	.carte_avis {
		padding: 30px;
	}
}
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
	}
	.apparition {
		opacity: 1;
		transform: none;
	}
}