/* Cléopâtre — styles (demonstration theme). Mobile first. */
:root {
	--ml-choco: var(--wp--preset--color--chocolat, #3B2527);
	--ml-nuit: var(--wp--preset--color--chocolat-nuit, #2A1A1C);
	--ml-rose: var(--wp--preset--color--rose, #A97C72);
	--ml-rose-f: var(--wp--preset--color--rose-fonce, #8A5E55);
	--ml-nude: var(--wp--preset--color--nude, #E3CFC6);
	--ml-creme: var(--wp--preset--color--creme, #F5EFEA);
	--ml-pierre: var(--wp--preset--color--pierre, #ECE7E3);
	--ml-encre: var(--wp--preset--color--encre, #2B2123);
	--ml-gris: var(--wp--preset--color--gris, #6E6466);
	--ml-titre: var(--wp--preset--font-family--titre, Georgia, serif);
	--ml-ease: cubic-bezier(.2, .7, .2, 1);
}
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }
.wp-site-blocks { padding: 0; }
.wp-site-blocks > * + * { margin-block-start: 0; }
img { max-width: 100%; height: auto; display: block; }
em { font-style: italic; }
h1 em, h2 em { color: var(--ml-rose); }

/* ---------- Common ---------- */
.ml-large { max-width: 1240px; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2.5rem); }
.ml-section { padding: clamp(4rem, 9vw, 7.5rem) 0; }
.ml-surtitre { font-size: .74rem; letter-spacing: .26em; text-transform: uppercase; font-weight: 700; color: var(--ml-rose); margin: 0 0 1rem; }
.ml-centre { text-align: center; margin-top: 3rem; }
.ml-deux { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.ml-trois { display: grid; gap: 2rem; }
@media (min-width: 900px) {
	.ml-deux { grid-template-columns: 1fr 1fr; }
	.ml-trois { grid-template-columns: repeat(3, 1fr); }
}
.ml-boutons { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2rem; }
.ml-bouton {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 1rem 2rem; background: var(--ml-rose); color: #fff !important; text-decoration: none;
	font-size: .76rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
	border: 1px solid var(--ml-rose); transition: background .3s var(--ml-ease), color .3s, border-color .3s, transform .3s var(--ml-ease);
}
.ml-bouton:hover { background: var(--ml-choco); border-color: var(--ml-choco); transform: translateY(-2px); }
.ml-bouton--ligne { background: transparent; color: var(--ml-choco) !important; border-color: currentColor; }
.ml-bouton--ligne:hover { background: var(--ml-choco); color: #fff !important; }
.ml-lien { color: var(--ml-choco); font-weight: 700; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid var(--ml-rose); padding-bottom: 2px; }
.ml-demo { font-size: .82rem; color: var(--ml-gris); font-style: italic; }

/* Fade-in on scroll (only when JS is on) */
.ml-js .ml-apparait { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ml-ease), transform .9s var(--ml-ease); }
.ml-js .ml-apparait.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .ml-js .ml-apparait { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* ---------- Header ---------- */
.ml-entete { position: sticky; top: 0; z-index: 50; background: rgba(245, 239, 234, .9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: box-shadow .3s; }
.ml-entete.is-defile { box-shadow: 0 6px 24px rgba(42, 26, 28, .08); }
.ml-logo { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; text-decoration: none; color: var(--ml-choco); border: 1px solid currentColor; padding: .45rem .9rem .5rem; }
.ml-logo__nom { font-family: var(--ml-titre); font-size: 1.45rem; letter-spacing: .02em; }
.ml-logo__sous { font-size: .56rem; letter-spacing: .32em; text-transform: uppercase; margin-top: .3rem; }
.ml-logo--clair { color: var(--ml-nude); }
.ml-entete .wp-block-navigation { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; }
.ml-entete .wp-block-navigation a { color: var(--ml-choco); text-decoration: none; }
.ml-entete .wp-block-navigation a:hover { color: var(--ml-rose); }
@media (max-width: 781px) { .ml-cache-mobile { display: none !important; } }

/* ---------- Hero (split) ---------- */
.ml-heros { display: grid; background: var(--ml-choco); color: var(--ml-nude); min-height: clamp(560px, calc(100vh - 70px), 920px); }
.ml-heros__texte { display: flex; flex-direction: column; justify-content: center; padding: clamp(3rem, 7vw, 6rem) clamp(1.2rem, 5vw, 5rem); position: relative; z-index: 2; }
.ml-heros h1 { color: #fff; margin: 0 0 1.2rem; font-size: var(--wp--preset--font-size--hero); }
.ml-heros h1 em { color: var(--ml-nude); }
.ml-heros .ml-surtitre { color: var(--ml-nude); opacity: .85; }
.ml-heros__intro { max-width: 30rem; font-size: 1.12rem; color: rgba(255, 255, 255, .82); margin: 0; }
.ml-heros .ml-bouton--ligne { color: #fff !important; }
.ml-heros .ml-bouton--ligne:hover { background: #fff; color: var(--ml-choco) !important; border-color: #fff; }
.ml-cadre { display: none; }
.ml-heros__photo { position: relative; aspect-ratio: 4 / 5; max-height: 640px; width: 100%; overflow: hidden; background: var(--ml-nude); }
.ml-heros__photo picture, .ml-heros__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.ml-heros__photo img { animation: ml-zoom 18s var(--ml-ease) both; }
@keyframes ml-zoom { from { transform: scale(1.08); } to { transform: scale(1); } }
.ml-dechirure { display: none; }
@media (min-width: 900px) {
	.ml-heros { grid-template-columns: 46% 54%; }
	.ml-cadre { display: inline-flex; flex-direction: column; align-items: center; align-self: flex-start; border: 1px solid rgba(227, 207, 198, .7); padding: 1.1rem 2rem 1.2rem; margin-bottom: 2.6rem; color: #fff; }
	.ml-cadre__nom { font-family: var(--ml-titre); font-size: 2.6rem; line-height: 1; }
	.ml-cadre__sous { font-size: .62rem; letter-spacing: .38em; text-transform: uppercase; margin-top: .55rem; color: var(--ml-nude); }
	.ml-heros__photo { aspect-ratio: auto; max-height: none; min-height: 100%; }
	/* Torn-paper edge, only when the desktop photo does not already have it */
	.ml-heros--dechire .ml-dechirure { display: block; position: absolute; top: 0; left: -1px; height: 100%; width: 80px; z-index: 2; filter: drop-shadow(6px 0 10px rgba(42, 26, 28, .28)); }
	.ml-dechirure__papier { fill: var(--ml-creme); }
	.ml-dechirure__fond { fill: var(--ml-choco); }
}
@media (prefers-reduced-motion: reduce) { .ml-heros__photo img { animation: none; } }

/* ---------- Studio ---------- */
.ml-studio__photo { margin: 0; position: relative; }
.ml-studio__photo img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.ml-studio__photo::after { content: ""; position: absolute; inset: .8rem -.6rem -.8rem .8rem; border: 1px solid var(--ml-rose); z-index: -1; }
@media (min-width: 900px) { .ml-studio__photo::after { inset: 1.4rem -1.4rem -1.4rem 1.4rem; } }
.ml-studio { position: relative; z-index: 0; overflow: hidden; }
.ml-points { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: .6rem; }
.ml-points li { padding-left: 1.6rem; position: relative; }
.ml-points li::before { content: ""; position: absolute; left: 0; top: .78em; width: .8rem; height: 1px; background: var(--ml-rose); }

/* ---------- Signature tiles ---------- */
.ml-signature { display: grid; background: var(--ml-pierre); }
@media (min-width: 900px) { .ml-signature { grid-template-columns: repeat(3, 1fr); min-height: 560px; } }
.ml-tuile { padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 3vw, 3rem); display: flex; flex-direction: column; justify-content: center; text-align: center; }
.ml-tuile h3 { font-size: 1.7rem; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 1.2rem; color: var(--ml-choco); }
.ml-tuile p { color: var(--ml-gris); margin: 0 auto 1rem; max-width: 22rem; }
.ml-tuile__prix { font-family: var(--ml-titre); font-size: 1.5rem; color: var(--ml-choco) !important; margin: .6rem auto 1.4rem !important; }
.ml-tuile .ml-lien { align-self: center; }
.ml-tuile--photo { padding: 0; position: relative; min-height: 420px; background: var(--ml-fond) center / cover no-repeat, var(--ml-nude); overflow: hidden; }
.ml-tuile--photo a { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; color: #fff; background: linear-gradient(rgba(42, 26, 28, .18), rgba(42, 26, 28, .42)); transition: background .4s; }
.ml-tuile--photo a:hover { background: linear-gradient(rgba(42, 26, 28, .32), rgba(42, 26, 28, .6)); }
.ml-tuile--photo h3 { color: #fff; font-size: 2rem; margin: 0 0 .4rem; }
.ml-tuile--photo span { font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; }

/* ---------- Numbered treatments ---------- */
.ml-entete-section { text-align: center; max-width: 36rem; margin: 0 auto 3rem; }
.ml-entete-section h2 { text-transform: uppercase; letter-spacing: .06em; margin: 0 0 1rem; }
.ml-entete-section p { color: var(--ml-gris); }
.ml-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(59, 37, 39, .2); }
.ml-liste li { border-bottom: 1px solid rgba(59, 37, 39, .2); }
.ml-liste a { display: grid; grid-template-columns: 2.4rem 1fr auto; gap: .4rem 1rem; align-items: baseline; padding: 1.4rem .4rem; text-decoration: none; color: var(--ml-encre); transition: background .3s, padding .3s var(--ml-ease); }
.ml-liste a:hover { background: rgba(169, 124, 114, .08); padding-left: 1rem; }
.ml-liste__num { font-size: .8rem; font-weight: 700; color: var(--ml-rose); }
.ml-liste__titre { font-family: var(--ml-titre); font-size: clamp(1.5rem, 3vw, 2rem); color: var(--ml-choco); }
.ml-liste__texte { grid-column: 2 / 4; color: var(--ml-gris); font-size: .98rem; }
.ml-liste__fleche { grid-column: 3; grid-row: 1; color: var(--ml-rose); font-size: 1.3rem; transition: transform .3s var(--ml-ease); }
.ml-liste a:hover .ml-liste__fleche { transform: translateX(6px); }
@media (min-width: 900px) {
	.ml-liste a { grid-template-columns: 3rem 1fr 1.3fr 2rem; }
	.ml-liste__texte { grid-column: auto; }
	.ml-liste__fleche { grid-column: auto; grid-row: auto; }
}

/* ---------- Promises ---------- */
.ml-promesses { background: var(--ml-rose); color: #fff; }
.ml-promesses h2 { color: #fff; text-align: center; margin: 0 0 3rem; }
.ml-promesses h2 em { color: var(--ml-nude); }
.ml-promesse { border-top: 1px solid rgba(255, 255, 255, .45); padding-top: 1.4rem; }
.ml-promesse__num { font-family: var(--ml-titre); font-size: 2.4rem; color: var(--ml-nude); }
.ml-promesse h3 { color: #fff; margin: .4rem 0 .6rem; }
.ml-promesse p { color: rgba(255, 255, 255, .88); margin: 0; }

/* ---------- Team ---------- */
.ml-membres { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.ml-membre { margin: 0; }
.ml-membre img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; filter: saturate(.92); transition: transform .6s var(--ml-ease); }
.ml-membre:hover img { transform: scale(1.02); }
.ml-membre figcaption { padding-top: .9rem; }
.ml-membre strong { display: block; font-family: var(--ml-titre); font-weight: 400; font-size: 1.4rem; color: var(--ml-choco); }
.ml-membre span { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ml-rose); }
.ml-membre p { color: var(--ml-gris); margin: .7rem 0 0; }
.ml-membres--grand { gap: clamp(1.5rem, 4vw, 4rem); }
@media (max-width: 600px) { .ml-membres--grand { grid-template-columns: 1fr; } }

.ml-equipe__photo { margin: 0; }
.ml-equipe__photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.ml-equipe__photo--grand { margin-bottom: clamp(2rem, 5vw, 4rem); }
.ml-membre--texte { background: var(--ml-pierre); padding: clamp(1.5rem, 3vw, 2.4rem); align-self: start; }
.ml-membre--texte strong { display: block; font-family: var(--ml-titre); font-weight: 400; font-size: 1.4rem; color: var(--ml-choco); }
.ml-membre--texte span { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ml-rose); }
.ml-membre--texte p { color: var(--ml-gris); margin: .7rem 0 0; }

/* ---------- Gallery ---------- */
.ml-galerie-bande { display: grid; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .ml-galerie-bande { grid-template-columns: repeat(4, 1fr); } }
.ml-galerie-bande a { display: block; overflow: hidden; aspect-ratio: 1; }
.ml-galerie-bande img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ml-ease); }
.ml-galerie-bande a:hover img { transform: scale(1.06); }
.ml-galerie { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 900px) { .ml-galerie { grid-template-columns: repeat(3, 1fr); gap: 1.4rem; } }
.ml-galerie figure { margin: 0; overflow: hidden; aspect-ratio: 1; }
.ml-galerie img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ml-ease); }
.ml-galerie figure:hover img { transform: scale(1.05); }

/* ---------- Visit / book ---------- */
.ml-visite { background: var(--ml-fond) center / cover no-repeat, var(--ml-pierre); padding: clamp(4rem, 9vw, 7rem) 0; }
.ml-visite__grille { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 900px) { .ml-visite__grille { grid-template-columns: 1.2fr 1fr; } }
.ml-visite__carte, .ml-visite__infos { background: rgba(245, 239, 234, .94); padding: clamp(2rem, 4vw, 3.2rem); }
.ml-visite__carte { background: var(--ml-choco); color: var(--ml-nude); }
.ml-visite__carte h2 { color: #fff; margin: 0 0 1rem; }
.ml-visite__carte h2 em { color: var(--ml-nude); }
.ml-visite__carte .ml-surtitre { color: var(--ml-nude); }
.ml-visite__infos h3 { margin: 0 0 .8rem; }
.ml-visite__infos h3 + p, .ml-visite__infos .ml-horaires + h3 { margin-top: 1.6rem; }
.ml-horaires { list-style: none; padding: 0; margin: 0; }
.ml-horaires li { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px dashed rgba(59, 37, 39, .2); }
.ml-horaires li.is-aujourdhui { font-weight: 700; color: var(--ml-rose-f); }

/* ---------- Page headers ---------- */
.ml-entete-page { background: var(--ml-choco); color: var(--ml-nude); padding: clamp(4rem, 9vw, 7rem) 0 clamp(3rem, 6vw, 5rem); }
.ml-entete-page h1 { color: #fff; margin: 0 0 1rem; }
.ml-entete-page h1 em { color: var(--ml-nude); }
.ml-entete-page p { max-width: 36rem; color: rgba(255, 255, 255, .82); margin: 0; }
.ml-entete-page .ml-surtitre { color: var(--ml-nude); }

/* ---------- Treatments page ---------- */
.ml-categorie { display: grid; gap: 1.6rem; padding: 2.6rem 0; border-bottom: 1px solid rgba(59, 37, 39, .15); scroll-margin-top: 90px; }
@media (min-width: 900px) { .ml-categorie { grid-template-columns: 340px 1fr; gap: 3.5rem; align-items: start; } }
.ml-categorie img, .ml-categorie__vide { aspect-ratio: 1; object-fit: cover; width: 100%; }
.ml-categorie__vide { display: flex; align-items: center; justify-content: center; background: var(--ml-nude); font-family: var(--ml-titre); font-size: 2rem; color: var(--ml-choco); }
.ml-categorie h2 { font-size: var(--wp--preset--font-size--grand); margin: 0 0 .6rem; }
.ml-categorie > div > p { color: var(--ml-gris); }
.ml-prix { list-style: none; padding: 0; margin: 1.4rem 0 0; }
.ml-prix li { display: flex; align-items: baseline; gap: .6rem; padding: .55rem 0; }
.ml-prix__points { flex: 1; border-bottom: 1px dotted rgba(59, 37, 39, .35); transform: translateY(-4px); }
.ml-prix__val { font-family: var(--ml-titre); color: var(--ml-choco); white-space: nowrap; }
.ml-note { color: var(--ml-gris); font-size: .9rem; margin-top: 2rem; }

/* ---------- Contact ---------- */
.ml-contact { align-items: start; }
.ml-contact__carte { background: var(--ml-pierre); padding: clamp(2rem, 4vw, 3rem); }
.ml-contact h3 { margin-top: 2rem; }

/* ---------- Footer ---------- */
.ml-pied a { color: var(--ml-nude); }
.ml-pied a:hover { color: #fff; }
.ml-pied h3 { color: #fff; font-size: 1.1rem; margin: 0 0 1rem; }
.ml-pied__grille { display: grid; gap: 2.4rem; }
@media (min-width: 900px) { .ml-pied__grille { grid-template-columns: 1.3fr 1fr 1fr; } }
.ml-pied .ml-horaires li { border-bottom-color: rgba(227, 207, 198, .2); font-size: .92rem; }
.ml-pied__bas { margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid rgba(227, 207, 198, .2); font-size: .82rem; color: rgba(227, 207, 198, .7); }

/* Leave room for the chat bubble (bottom-right) on phones */
@media (max-width: 600px) { .ml-pied__bas { padding-bottom: 4.5rem; } }