/* ==========================================================================
   Maison Baldo — styles du thème
   Les couleurs et typographies se règlent dans Elementor › Réglages du site.
   Ce fichier ne gère que ce qu'Elementor gratuit ne sait pas faire seul :
   formes (arches, médaillons), effets, menu mobile, bandeau des marques.

   Classes à utiliser dans Elementor (onglet Avancé › Classes CSS) :
   mb-arche        photo en arche (haut arrondi)
   mb-rond         photo ronde (médaillon)
   mb-arrondi      coins arrondis doux (28 px)
   mb-arrondi-s    coins arrondis légers (20 px)
   mb-ratio-45 / mb-ratio-34 / mb-ratio-54 / mb-ratio-11 / mb-ratio-paysage
                   format de la photo (4:5, 3:4, 5:4, carré, 15:8)
   mb-zoom         zoom lent de la photo au survol
   mb-apparition   apparition douce au défilement (sur un conteneur)
   mb-lien         bouton transformé en lien souligné
   mb-bouton-clair bouton crème (sur fond vert)
   mb-sombre       section sur fond vert (italiques dorés)
   mb-drapeau      petit drapeau français devant un texte
   ========================================================================== */

@font-face {
	font-family: "Cormorant Garamond";
	font-style: normal;
	font-weight: 400 500;
	font-display: swap;
	src: url("../fonts/cormorant-garamond-latin.woff") format("woff");
}
@font-face {
	font-family: "Cormorant Garamond";
	font-style: italic;
	font-weight: 400 500;
	font-display: swap;
	src: url("../fonts/cormorant-garamond-italic-latin.woff") format("woff");
}

:root {
	--mb-vert: var(--e-global-color-mbvert, #27361A);
	--mb-texte: var(--e-global-color-mbtexte, #46523A);
	--mb-laiton: var(--e-global-color-mblaiton, #9C7F4E);
	--mb-or: var(--e-global-color-mbor, #D6BE8D);
	--mb-creme: var(--e-global-color-mbcreme, #EFE7D6);
	--mb-pale: var(--e-global-color-mbpale, #F7F3EA);
	--mb-blanc: var(--e-global-color-mbblanc, #FFFFFF);
	--mb-gris: var(--e-global-color-mbgris, #6B7462);
	--mb-filet: var(--e-global-color-mbfilet, #E4DCCB);
	--mb-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
	--mb-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--mb-ease: cubic-bezier(.2, .7, .2, 1);
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 24px;
}

body {
	background: var(--mb-blanc);
	color: var(--mb-texte);
	font-family: var(--mb-sans);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Hello : pas de titre de page au-dessus des pages Elementor. */
.page-header .entry-title { display: none; }

.elementor-heading-title { text-wrap: balance; }

/* Italiques des titres : la touche laiton. */
.elementor-heading-title em,
.elementor-widget-text-editor em.mb-accent {
	font-style: italic;
	color: var(--mb-laiton);
}
.mb-sombre .elementor-heading-title em { color: var(--mb-or); }

.elementor-widget-text-editor p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Photos : formes et formats
   -------------------------------------------------------------------------- */
.mb-arche img,
.mb-rond img,
.mb-arrondi img,
.mb-arrondi-s img,
[class*="mb-ratio-"] img {
	display: block;
	width: 100%;
	max-width: 100%;
	object-fit: cover;
}
[class*="mb-ratio-"] img { height: auto; }
.mb-ratio-45 img { aspect-ratio: 4 / 5; }
.mb-ratio-34 img { aspect-ratio: 3 / 4; }
.mb-ratio-54 img { aspect-ratio: 5 / 4; }
.mb-ratio-11 img { aspect-ratio: 1 / 1; }
.mb-ratio-paysage img { aspect-ratio: 15 / 8; }

.mb-arche img { border-radius: 999px 999px 0 0; }
.mb-rond img { border-radius: 50%; aspect-ratio: 1 / 1; }
.mb-arrondi img { border-radius: 28px; }
.mb-arrondi-s img { border-radius: 20px; }

/* Zoom lent : le cadre reste fixe, la photo grossit dedans. */
.mb-zoom .elementor-image,
.mb-zoom > .elementor-widget-container,
.mb-zoom a { display: block; }
.mb-zoom img {
	transition: transform 1.6s var(--mb-ease), clip-path 1.6s var(--mb-ease);
	will-change: transform;
}
.mb-zoom.mb-arche,
.mb-zoom.mb-rond,
.mb-zoom.mb-arrondi,
.mb-zoom.mb-arrondi-s { overflow: hidden; }
.mb-zoom.mb-arche { border-radius: 999px 999px 0 0; }
.mb-zoom.mb-rond { border-radius: 50%; }
.mb-zoom.mb-arrondi { border-radius: 28px; }
.mb-zoom.mb-arrondi-s { border-radius: 20px; }
.mb-zoom:hover img { transform: scale(1.05); }

/* Hero : médaillon rond qui chevauche la grande arche. */
.mb-hero-photos { position: relative; }
.mb-hero-photos .mb-arche { width: 86%; margin-left: auto; }
.mb-hero-photos .mb-medaillon {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 38%;
	padding: 12px;
	background: var(--mb-blanc);
	border-radius: 50%;
	z-index: 2;
}

/* --------------------------------------------------------------------------
   Apparitions douces (CSS seul : le contenu reste visible si non pris en charge)
   -------------------------------------------------------------------------- */
@keyframes mbMonte {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: none; }
}
.mb-entree-1 { animation: mbMonte 1.1s .1s both var(--mb-ease); }
.mb-entree-2 { animation: mbMonte 1.1s .3s both var(--mb-ease); }
.mb-entree-3 { animation: mbMonte 1.1s .5s both var(--mb-ease); }

@supports (animation-timeline: view()) {
	body:not(.elementor-editor-active) .mb-apparition {
		animation: mbMonte linear both;
		animation-timeline: view();
		animation-range: entry 0% entry 35%;
	}
}

/* --------------------------------------------------------------------------
   Boutons
   -------------------------------------------------------------------------- */
.elementor-button { transition: background-color .4s ease, color .4s ease; }

body .elementor .elementor-widget-button.mb-lien .elementor-button {
	position: relative;
	background: transparent;
	color: var(--mb-vert);
	padding: 14px 0;
	border-radius: 0;
	min-height: 0;
}
body .elementor .elementor-widget-button.mb-lien .elementor-button::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 8px;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform-origin: left;
	transition: transform .5s ease;
}
body .elementor .elementor-widget-button.mb-lien .elementor-button:hover {
	background: transparent;
	color: var(--mb-vert);
}
body .elementor .elementor-widget-button.mb-lien .elementor-button:hover::after { transform: scaleX(.35); }

body .elementor .elementor-widget-button.mb-bouton-clair .elementor-button {
	background: var(--mb-pale);
	color: var(--mb-vert);
}
body .elementor .elementor-widget-button.mb-bouton-clair .elementor-button:hover {
	background: var(--mb-laiton);
	color: var(--mb-blanc);
}

/* --------------------------------------------------------------------------
   Cartes « univers »
   -------------------------------------------------------------------------- */
.mb-carte .elementor-heading-title,
.mb-carte .elementor-heading-title a { transition: color .4s ease; }
.mb-carte:hover .elementor-heading-title,
.mb-carte:hover .elementor-heading-title a { color: var(--mb-laiton); }

/* Mobile : les univers défilent à l'horizontale, au doigt. */
@media (max-width: 767px) {
	.e-con.mb-defile-mobile {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		margin-right: calc(-1 * var(--padding-right, 24px));
		padding-right: 24px;
	}
	.e-con.mb-defile-mobile::-webkit-scrollbar { display: none; }
	.e-con.mb-defile-mobile > .e-con {
		flex: 0 0 64%;
		max-width: 64%;
		scroll-snap-align: start;
	}
}

/* --------------------------------------------------------------------------
   Étapes « Habillons votre intérieur »
   -------------------------------------------------------------------------- */
.mb-etapes ol {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: mbEtape;
}
.mb-etapes li {
	counter-increment: mbEtape;
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	gap: 16px;
	padding: 18px 0;
	border-top: 1px solid rgba(247, 243, 234, .18);
}
.mb-etapes li:last-child { border-bottom: 1px solid rgba(247, 243, 234, .18); }
.mb-etapes li::before {
	content: counter(mbEtape, lower-roman) ".";
	font-family: var(--mb-serif);
	font-size: 24px;
	line-height: 1.2;
	color: var(--mb-or);
}
.mb-etapes strong { font-weight: 400; color: var(--mb-pale); }

/* --------------------------------------------------------------------------
   Bandeau des marques qui défile
   -------------------------------------------------------------------------- */
.mb-ruban {
	overflow: hidden;
	border-top: 1px solid var(--mb-creme);
	border-bottom: 1px solid var(--mb-creme);
	padding: 30px 0;
}
.mb-ruban .elementor-icon-list-items {
	display: flex !important;
	flex-wrap: nowrap !important;
	width: max-content;
	margin: 0 !important;
	padding: 0;
	animation: mbDefile 60s linear infinite;
}
.mb-ruban:hover .elementor-icon-list-items { animation-play-state: paused; }
.mb-ruban .elementor-icon-list-item {
	display: inline-flex !important;
	align-items: center;
	white-space: nowrap;
	margin: 0 !important;
	padding: 0 28px !important;
}
.mb-ruban .elementor-icon-list-item::after {
	content: "" !important;
	display: inline-block !important;
	position: static !important;
	width: 6px !important;
	height: 6px !important;
	border: 0 !important;
	border-radius: 50%;
	background: var(--mb-laiton);
	margin-left: 56px;
	opacity: .9;
}
.mb-ruban .elementor-icon-list-icon { display: none !important; }
.mb-ruban .elementor-icon-list-text {
	font-family: var(--mb-serif);
	font-size: clamp(30px, 3vw, 44px);
	line-height: 1.2;
	color: var(--mb-vert);
	padding: 0 !important;
}
.mb-ruban .elementor-icon-list-item:nth-child(3n+2) .elementor-icon-list-text { font-style: italic; }
@keyframes mbDefile { to { transform: translateX(-50%); } }

/* --------------------------------------------------------------------------
   Drapeau français (devant « Made in France… »)
   -------------------------------------------------------------------------- */
.mb-drapeau p {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin: 0;
}
.mb-drapeau p::before {
	content: "";
	flex: none;
	width: 18px;
	height: 22px;
	transform: translateY(4px);
	background: url("../img/drapeau.svg") no-repeat center / contain;
	transition: transform .6s ease;
}
.mb-drapeau:hover p::before { transform: translateY(4px) rotate(-4deg); }

/* --------------------------------------------------------------------------
   Horaires
   -------------------------------------------------------------------------- */
.mb-horaires p {
	display: grid;
	grid-template-columns: minmax(0, 150px) minmax(0, 1fr);
	gap: 28px;
	margin: 0 0 10px;
	font-variant-numeric: tabular-nums;
}
.mb-horaires p span:first-child { color: var(--mb-texte); }
.mb-horaires p span:last-child { color: var(--mb-vert); }

/* --------------------------------------------------------------------------
   En-tête
   -------------------------------------------------------------------------- */
.mb-entete { position: relative; z-index: 50; background: var(--mb-blanc); }

.mb-nav .elementor-icon-list-text {
	font-family: var(--mb-sans) !important;
	transition: color .4s ease;
}
.mb-nav .elementor-icon-list-item a {
	padding: 10px 0 6px;
	border-bottom: 1px solid transparent;
	transition: border-color .4s ease;
}
.mb-nav .elementor-icon-list-item a:hover { border-bottom-color: var(--mb-laiton); }
.mb-nav .elementor-icon-list-item a:hover .elementor-icon-list-text { color: var(--mb-vert); }
.mb-nav .elementor-icon-list-icon { display: none; }

/* Boutons ronds du mobile */
body .mb-entete .mb-pastille {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 1px solid var(--mb-filet);
	background: transparent;
	color: var(--mb-vert);
	cursor: pointer;
	padding: 0;
	transition: background-color .3s ease, color .3s ease;
}
body .mb-entete .mb-pastille:hover,
body .mb-entete .mb-pastille:focus-visible { background: var(--mb-pale); border-color: var(--mb-filet); color: var(--mb-vert); }
body .mb-entete .mb-pastille--pleine { background: var(--mb-vert); border-color: var(--mb-vert); color: var(--mb-pale); }
body .mb-entete .mb-pastille--pleine:hover,
body .mb-entete .mb-pastille--pleine:focus-visible { background: var(--mb-laiton); border-color: var(--mb-laiton); color: var(--mb-blanc); }
.mb-pastille svg { display: block; flex: none; }
.mb-pastille .mb-burger-x { display: none; }

@media (max-width: 1024px) {
	.mb-nav {
		position: fixed !important;
		inset: 0;
		z-index: 60;
		display: flex !important;
		align-items: center;
		justify-content: center;
		margin: 0 !important;
		padding: max(96px, env(safe-area-inset-top)) 24px 48px !important;
		background: var(--mb-blanc);
		opacity: 0;
		visibility: hidden;
		transition: opacity .35s ease, visibility 0s linear .35s;
		width: 100% !important;
		max-width: none !important;
	}
	.mb-nav .elementor-icon-list-items {
		flex-direction: column !important;
		align-items: center !important;
		gap: 26px;
	}
	.mb-nav .elementor-icon-list-item { margin: 0 !important; padding: 0 !important; }
	.mb-nav .elementor-icon-list-item::after { display: none !important; }
	.mb-nav .elementor-icon-list-text {
		font-family: var(--mb-serif) !important;
		font-size: 32px !important;
		letter-spacing: 0 !important;
		text-transform: none !important;
		font-weight: 400 !important;
		color: var(--mb-vert) !important;
	}
	body.mb-menu-ouvert { overflow: hidden; }
	body.mb-menu-ouvert .mb-nav {
		opacity: 1;
		visibility: visible;
		transition: opacity .35s ease;
	}
	body.mb-menu-ouvert .mb-burger { position: relative; z-index: 70; }
	body.mb-menu-ouvert .mb-burger .mb-burger-x { display: block; }
	body.mb-menu-ouvert .mb-burger .mb-burger-lignes { display: none; }
}

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */
.mb-pied a { text-decoration: none; transition: color .3s ease; }
.mb-pied .elementor-widget-text-editor p { margin: 0 0 8px; }
.mb-pied .elementor-widget-text-editor a:hover { color: var(--mb-laiton); }
.mb-credit a {
	color: var(--mb-vert);
	text-decoration: none;
	border-bottom: 1px solid var(--mb-laiton);
}
.mb-credit a:hover { color: var(--mb-laiton); }

/* Liens soulignés au clavier */
.elementor a:focus-visible,
.elementor button:focus-visible,
.mb-pastille:focus-visible {
	outline: 2px solid var(--mb-laiton);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Accessibilité : moins d'animations si demandé
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.mb-entree-1, .mb-entree-2, .mb-entree-3, .mb-apparition,
	.mb-ruban .elementor-icon-list-items { animation: none !important; }
	.mb-zoom img { transition: none; }
	.mb-ruban { overflow-x: auto; }
}

/* ==========================================================================
   v1.1 — symbole de fond, pages Contact et Mentions légales
   ========================================================================== */

/* Rameau d'olivier discret dans le fond d'une section (classe : mb-symbole).
   Dessiné sur le bloc intérieur : le ::before du conteneur est réservé
   par Elementor à la superposition de fond. */
.e-con.mb-symbole { overflow: hidden; }
.e-con.mb-symbole > .e-con-inner { position: relative; }
.e-con.mb-symbole > .e-con-inner::before {
	content: "";
	position: absolute;
	right: -40px;
	top: 50%;
	width: clamp(240px, 26vw, 400px);
	aspect-ratio: 420 / 620;
	transform: translateY(-50%) rotate(14deg);
	background: url("../img/rameau.svg") no-repeat center / contain;
	opacity: .8;
	pointer-events: none;
	z-index: 0;
}
.e-con.mb-symbole > .e-con-inner > * { position: relative; z-index: 1; }
@media (max-width: 767px) {
	.e-con.mb-symbole > .e-con-inner::before { width: 200px; right: -90px; top: 30%; opacity: .6; }
}

/* Lignes « libellé / valeur » */
.mb-fiche p {
	display: grid;
	grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
	gap: 4px 24px;
	margin: 0 0 12px;
	max-width: 760px;
}
.mb-fiche p span:first-child { color: var(--mb-gris); font-weight: 300; }
.mb-fiche p span:last-child { color: var(--mb-vert); }
@media (max-width: 767px) {
	.mb-fiche p { grid-template-columns: 1fr; gap: 0; margin-bottom: 14px; }
}
.mb-fiche a,
.mb-legal-texte a,
.mb-info a {
	color: var(--mb-vert);
	text-decoration: none;
	border-bottom: 1px solid var(--mb-laiton);
	transition: color .3s ease;
}
.mb-fiche a:hover,
.mb-legal-texte a:hover,
.mb-info a:hover { color: var(--mb-laiton); }
.mb-legal-texte p { max-width: 700px; }
.mb-legal-texte .mb-maj { font-size: 13px; color: var(--mb-gris); }

/* Sommaire des mentions légales */
.mb-sommaire-col { position: sticky; top: 32px; }
.mb-sommaire .elementor-icon-list-item a {
	display: block;
	padding: 9px 0 9px 16px !important;
	border-left: 1px solid var(--mb-filet);
	transition: border-color .3s ease;
}
.mb-sommaire .elementor-icon-list-item a:hover { border-left-color: var(--mb-laiton); }
.mb-sommaire .elementor-icon-list-icon { display: none; }
.mb-bloc-legal { scroll-margin-top: 32px; }

/* Contact : horaires et infos */
.mb-info p { margin: 0; }
.mb-info .mb-horaires-ligne {
	display: grid;
	grid-template-columns: minmax(0, 150px) minmax(0, 1fr);
	gap: 24px;
	margin-bottom: 6px;
	font-variant-numeric: tabular-nums;
}
.mb-info .mb-horaires-ligne span:first-child { color: var(--mb-texte); }

/* Contact : photo de la boutique et carte posée dessus */
.mb-ratio-219 img { aspect-ratio: 21 / 9; }
.e-con.mb-visite { position: relative; }
.e-con.mb-carte-visite {
	position: absolute;
	right: 32px;
	bottom: 32px;
	width: min(360px, calc(100% - 64px));
	box-shadow: 0 18px 50px rgba(39, 54, 26, .12);
	z-index: 2;
}
@media (max-width: 767px) {
	.mb-ratio-219 img { aspect-ratio: 4 / 3; }
	.e-con.mb-carte-visite {
		position: relative;
		right: auto;
		bottom: auto;
		width: calc(100% - 28px);
		margin: -48px auto 0;
	}
}

/* --------------------------------------------------------------------------
   Formulaire Contact Form 7
   -------------------------------------------------------------------------- */
.mb-cf7 { display: flex; flex-direction: column; gap: 20px; }
.mb-cf7 br { display: none; }
.mb-cf7 p { margin: 0; }
.mb-cf7-champ { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.mb-cf7-champ > span:first-child,
.mb-cf7-choix legend {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--mb-texte);
	padding: 0;
}
.mb-cf7-ligne { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 767px) { .mb-cf7-ligne { grid-template-columns: 1fr; } }
.mb-cf7 .wpcf7-form-control-wrap { display: block; }
.mb-cf7 input[type="text"],
.mb-cf7 input[type="email"],
.mb-cf7 input[type="tel"],
.mb-cf7 textarea {
	width: 100%;
	font: 400 16px/1.5 var(--mb-sans);
	color: var(--mb-vert);
	background: var(--mb-blanc);
	border: 1px solid var(--mb-filet);
	border-radius: 14px;
	padding: 14px 16px;
	transition: border-color .3s ease, box-shadow .3s ease;
}
.mb-cf7 textarea { min-height: 150px; height: 150px; resize: vertical; }
.mb-cf7 input:focus,
.mb-cf7 textarea:focus {
	outline: none;
	border-color: var(--mb-laiton);
	box-shadow: 0 0 0 3px rgba(156, 127, 78, .15);
}
.mb-cf7-choix { border: 0; margin: 0; padding: 0; }
.mb-cf7-choix legend { margin-bottom: 10px; }
.mb-cf7 .wpcf7-radio { display: flex; flex-wrap: wrap; gap: 10px; }
.mb-cf7 .wpcf7-radio .wpcf7-list-item { margin: 0; }
.mb-cf7 .wpcf7-radio label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 0 20px;
	border: 1px solid var(--mb-filet);
	border-radius: 999px;
	background: var(--mb-blanc);
	font-size: 14px;
	color: var(--mb-vert);
	cursor: pointer;
	transition: border-color .3s ease, background-color .3s ease;
}
.mb-cf7 .wpcf7-radio label:has(input:checked) { border-color: var(--mb-vert); background: var(--mb-pale); }
.mb-cf7 input[type="radio"],
.mb-cf7 input[type="checkbox"] { accent-color: var(--mb-vert); width: 16px; height: 16px; margin: 0; }
.mb-cf7-accord .wpcf7-list-item { margin: 0; }
.mb-cf7-accord label { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; line-height: 1.55; color: var(--mb-texte); }
.mb-cf7-accord input { margin-top: 3px !important; flex: none; }
.mb-cf7 .wpcf7-submit { cursor: pointer; border: 0; }
.mb-cf7 .wpcf7-submit:disabled { opacity: .55; cursor: not-allowed; }
.mb-cf7 .wpcf7-not-valid-tip { font-size: 13px; color: #A1452F; margin-top: 6px; }
.mb-carte-form .wpcf7 form .wpcf7-response-output {
	margin: 18px 0 0;
	padding: 12px 16px;
	border-radius: 14px;
	font-size: 14px;
	border-width: 1px;
}
.mb-carte-form .wpcf7 form.sent .wpcf7-response-output { border-color: var(--mb-vert); background: var(--mb-blanc); color: var(--mb-vert); }
.mb-cf7 .wpcf7-spinner { margin: 0 0 0 14px; vertical-align: middle; }