/*
Theme Name: Monasabati
Description: Thème enfant de Hello Elementor pour Monasabati. Palette rose poudré, champagne, ivoire, crème ; typographie Cormorant Garamond + Jost. Toutes les pages restent éditables dans Elementor.
Template: hello-elementor
Version: 1.2.1
Author: Monasabati
Text Domain: mounasabati
Requires at least: 6.0
Requires PHP: 7.4
*/

:root {
	/* Palette */
	--mns-ivoire: #fffdf8;          /* fond principal */
	--mns-creme: #f6efe4;           /* fonds de section */
	--mns-champagne: #d9c4a0;       /* filets, accents décoratifs */
	--mns-champagne-fonce: #8a6a3d; /* accent lisible sur ivoire (texte, survol) */
	--mns-rose: #ebcfcb;            /* rose poudré : surfaces, sélections */
	--mns-rose-fonce: #a56a65;      /* rose lisible sur ivoire */
	--mns-encre: #2b2523;           /* texte et boutons */
	--mns-gris: #6b615c;            /* texte secondaire */
	--mns-trait: #e8dfd2;           /* bordures */

	/* Typographie */
	--mns-police-titre: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--mns-police-texte: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
}

html { -webkit-text-size-adjust: 100%; }

body {
	background: var(--mns-ivoire);
	color: var(--mns-encre);
	font-family: var(--mns-police-texte);
	font-weight: 400;
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--mns-police-titre);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--mns-encre);
}
h1 { font-size: clamp(2.6rem, 1.6rem + 3.6vw, 4.5rem); }
h2 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); }
h3 { font-size: 1.6rem; }

a { color: var(--mns-encre); text-decoration-color: var(--mns-champagne); text-underline-offset: .22em; }
a:hover { color: var(--mns-champagne-fonce); }

::selection { background: var(--mns-rose); color: var(--mns-encre); }

img { max-width: 100%; height: auto; }

/* ---------- En-tête Hello (sans Elementor Pro) ---------- */
.site-header {
	padding-block: 1.1rem;
	border-bottom: 1px solid var(--mns-trait);
	background: var(--mns-ivoire);
}
.site-header .site-title a,
.site-header .site-branding a {
	font-family: var(--mns-police-titre);
	font-size: 1.9rem;
	font-weight: 500;
	letter-spacing: .02em;
	text-decoration: none;
	color: var(--mns-encre);
}
.site-navigation ul.menu li a,
.site-navigation-dropdown ul.menu li a {
	font-size: .78rem;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--mns-encre);
}
.site-navigation ul.menu li a:hover { color: var(--mns-champagne-fonce); }

/* Élément de menu « Réserver un expert » : classe CSS « menu-cta » */
.site-navigation ul.menu li.menu-cta > a {
	margin-left: .75rem;
	padding: .65rem 1.3rem;
	background: var(--mns-encre);
	color: var(--mns-ivoire);
	border-radius: 999px;
}
.site-navigation ul.menu li.menu-cta > a:hover { background: var(--mns-champagne-fonce); color: #fff; }

.site-footer {
	padding-block: 3rem;
	background: var(--mns-creme);
	border-top: 1px solid var(--mns-trait);
	font-size: .9rem;
	color: var(--mns-gris);
}

/* ---------- Pages simples (fiche prestataire, pages légales) ---------- */
.page-header .entry-title,
.single-mns_prestataire .entry-title {
	font-family: var(--mns-police-titre);
	font-weight: 500;
	font-size: clamp(2.4rem, 1.6rem + 3vw, 4rem);
	margin: 2.5rem 0 1.5rem;
}
.single-mns_prestataire .site-main { max-width: 1200px; margin-inline: auto; padding-inline: 16px; padding-bottom: 5rem; }

/* ---------- Utilitaires à poser dans Elementor (Avancé → Classes CSS) ---------- */
.mns-surtitre-el .elementor-heading-title {
	font-family: var(--mns-police-texte) !important;
	font-size: .75rem !important;
	font-weight: 500 !important;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--mns-champagne-fonce) !important;
}
.mns-filet::after {
	content: "";
	display: block;
	width: 56px;
	height: 1px;
	margin-top: 1.25rem;
	background: var(--mns-champagne);
}
.mns-filet.elementor-widget-heading[style*="center"]::after,
.mns-filet-centre::after { margin-inline: auto; }

/* Bouton Elementor au style de la marque : classe « mns-bouton » sur le widget Bouton */
.mns-bouton .elementor-button {
	min-height: 48px;
	padding: .85rem 1.9rem;
	background: var(--mns-encre);
	color: var(--mns-ivoire);
	border-radius: 999px;
	font-family: var(--mns-police-texte);
	font-size: .8rem;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	transition: background-color .25s ease;
}
.mns-bouton .elementor-button:hover { background: var(--mns-champagne-fonce); color: #fff; }
.mns-bouton--clair .elementor-button { background: transparent; color: var(--mns-encre); border: 1px solid var(--mns-encre); }
.mns-bouton--clair .elementor-button:hover { background: var(--mns-encre); color: var(--mns-ivoire); }

/* Image en arche, signature visuelle discrète : classe « mns-arche » sur un widget Image */
.elementor-widget-image.mns-arche img { width: 100%; max-width: 480px; border-radius: 999px 999px 0 0; aspect-ratio: 4 / 5; object-fit: cover; }

@media (prefers-reduced-motion: reduce) {
	* { animation: none !important; transition: none !important; }
}

/* ---------- Page d'accueil (classes posées sur les widgets Elementor) ---------- */
.elementor-widget-button.elementor-widget__width-auto { vertical-align: top; align-self: flex-start; }
.mns-bouton--ivoire .elementor-button { background: var(--mns-ivoire); color: var(--mns-encre); }
.mns-bouton--ivoire .elementor-button:hover { background: var(--mns-champagne); color: var(--mns-encre); }

.mns-chapo, .mns-chapo p { font-size: 1.15rem; line-height: 1.7; color: var(--mns-gris); max-width: 34em; }
.mns-texte-doux, .mns-texte-doux p { color: var(--mns-gris); font-size: .98rem; }
.mns-texte-seo { max-width: 46em; color: var(--mns-gris); }

.mns-titre-moyen .elementor-heading-title { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem) !important; }
.mns-titre-carte .elementor-heading-title { font-size: 1.55rem !important; }
.mns-titre-carte .elementor-heading-title a { color: inherit; text-decoration: none; }

.mns-chiffre .elementor-heading-title {
	font-family: var(--mns-police-titre) !important;
	font-style: italic;
	font-size: 2.6rem !important;
	line-height: 1;
	color: var(--mns-champagne-fonce) !important;
	padding-bottom: .9rem;
	border-bottom: 1px solid var(--mns-trait);
}

.mns-lien-fleche .elementor-heading-title {
	font-family: var(--mns-police-texte) !important;
	font-size: .78rem !important;
	font-weight: 500 !important;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.mns-lien-fleche a { color: var(--mns-encre); text-decoration: none; border-bottom: 1px solid var(--mns-champagne); padding-bottom: .2rem; }
.mns-lien-fleche a:hover { color: var(--mns-champagne-fonce); }
.mns-sur-sombre .elementor-heading-title, .mns-sur-sombre a { color: var(--mns-champagne) !important; }
.mns-sur-sombre a { border-color: var(--mns-champagne-fonce); }

.mns-carte-categorie { overflow: hidden; }
.elementor-widget-image.mns-carte-categorie img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.mns-carte-categorie a:hover img { transform: scale(1.035); }

#recherche { scroll-margin-top: 1rem; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Accueil v1.2 : ouverture centrée, rangées « top partenaires », tuiles partenaires */
.mns-chapo-centre, .mns-chapo-centre p { margin-inline: auto; text-align: center; }
.mns-ligne-expert .elementor-heading-title { font-family: var(--mns-police-texte) !important; font-size: .95rem !important; color: var(--mns-gris) !important; }
.mns-ligne-expert a { color: var(--mns-encre); text-decoration: none; border-bottom: 1px solid var(--mns-champagne); font-weight: 500; }
.mns-texte-serre p { margin-bottom: .4rem; }
.mns-titre-rangee .elementor-heading-title { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem) !important; font-style: italic; }
.mns-rangee-entete > .elementor-container { border-bottom: 1px solid var(--mns-trait); padding-bottom: .9rem; }
.elementor-widget-image.mns-image-paysage { overflow: hidden; }
.elementor-widget-image.mns-image-paysage img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.elementor-widget-image.mns-image-paysage a:hover img { transform: scale(1.035); }
.mns-tuile > .elementor-widget-wrap { margin: 10px; background: var(--mns-ivoire); border: 1px solid var(--mns-trait); padding: 0 0 1.5rem !important; align-content: flex-start; }
.mns-tuile > .elementor-widget-wrap > .elementor-element:not(.elementor-widget-image) { padding-inline: 1.5rem; }
.mns-tuile .elementor-widget-image img { aspect-ratio: 4 / 3; }

/* Mobile : les rangées de cartes défilent à l'horizontale au lieu de s'empiler */
@media (max-width: 767px) {
	.mns-defilant > .elementor-container {
		flex-wrap: nowrap !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: .5rem;
	}
	.mns-defilant > .elementor-container::-webkit-scrollbar { display: none; }
	.mns-defilant > .elementor-container > .elementor-column { width: 80% !important; flex: 0 0 80%; scroll-snap-align: start; }
}