/*
 * Meya — mise en forme des sections de l'accueil (custom-home-sections.php)
 * et du hero UKU. Palette Meya : crème #FFFFF0, encre #121110, or #E09F3D.
 */

/* ---- Socle commun ---- */
.mh-section { max-width: 1280px; margin: 0 auto; padding: clamp(56px, 8vw, 112px) clamp(16px, 3vw, 40px); }
.mh-head { margin-bottom: clamp(24px, 4vw, 44px); }
.mh-head--center { text-align: center; }
.mh-eyebrow { margin: 0 0 12px; font-family: "Inter", sans-serif; font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: #94631c; }
.mh-title { margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; font-size: clamp(32px, 4.6vw, 52px); line-height: 1.06; color: #121110; text-wrap: balance; }
.mh-title em { font-style: italic; }
.mh-btn { display: inline-block; padding: 15px 36px; font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; transition: background .2s, color .2s; }
.mh-btn--light { border: 1px solid #fff; color: #fff; }
.mh-btn--light:hover { background: #fff; color: #121110; }

/* ---- Hero UKU (carrousel) ---- */
.uku-hero--carousel .uku-hero__eyebrow { font-size: 11px; font-weight: 500; letter-spacing: .24em; margin: 0 0 14px; }
.uku-hero--carousel .uku-hero__title { font-weight: 500; letter-spacing: .02em; line-height: 1; margin-bottom: 14px; }
.uku-hero--carousel .uku-hero__subtitle { max-width: 34ch; margin: 0 auto 28px; font-size: 15px; line-height: 1.6; letter-spacing: 0; opacity: .92; }
.uku-hero--carousel .uku-hero__overlay-inner[style*="text-align:left"] .uku-hero__subtitle { margin-left: 0; }
.uku-hero--carousel .uku-hero__overlay-inner[style*="text-align:right"] .uku-hero__subtitle { margin-right: 0; }
.uku-hero--carousel .uku-hero__cta { background: #fff; border-color: #fff; color: #121110; font-size: 11px; font-weight: 500; padding: 15px 30px; }
.uku-hero--carousel .uku-hero__cta:hover { background: transparent; color: #fff; }
.uku-hero--carousel .uku-hero__cta--secondary { background: transparent; color: #fff; }
.uku-hero--carousel .uku-hero__cta--secondary:hover { background: #fff; color: #121110; }
.uku-hero--carousel .uku-hero__scrim { background: linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.15) 45%, rgba(0,0,0,0) 70%) !important; opacity: 1 !important; }
@media (min-width: 768px) {
	.uku-hero--carousel .uku-hero__scrim { background: linear-gradient(to top, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 55%), linear-gradient(to right, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 55%) !important; }
	.uku-hero--carousel .uku-hero__overlay { padding: 0 clamp(40px, 6vw, 96px) clamp(64px, 9vh, 112px); }
	.uku-hero--carousel .uku-hero__overlay-inner { max-width: 620px; }
	.uku-hero--carousel { --uku-hero-title-size-desktop: clamp(56px, 6vw, 88px); --uku-hero-title-size-tablet: 56px; }
	.uku-hero--carousel .uku-hero__subtitle { margin-left: 0; font-size: 16px; }
}
/* Indicateurs : traits fins plutôt que pastilles */
.uku-hero--carousel .uku-hero__dots { gap: 6px; padding: 0 0 28px; }
.uku-hero--carousel .uku-hero__dot { width: 28px; height: 2px; border-radius: 0; background: rgba(255,255,255,.4); border: 0; padding: 0; }
.uku-hero--carousel .uku-hero__dot.is-active { background: #fff; }
@media (min-width: 768px) {
	.uku-hero--carousel .uku-hero__dots { justify-content: flex-end; padding: 0 clamp(40px, 6vw, 96px) 40px; }
}
@media (max-width: 767px) {
	.uku-hero--carousel { --uku-hero-title-size-mobile: 44px; }
	.uku-hero--carousel .uku-hero__overlay { position: absolute; inset: 0; padding: 0 20px 56px; align-items: flex-end; justify-content: center; }
	.uku-hero--carousel .uku-hero__overlay-inner { width: 100%; }
	.uku-hero--carousel .uku-hero__ctas { flex-wrap: nowrap; gap: 8px; }
	.uku-hero--carousel .uku-hero__cta { padding: 14px 18px; letter-spacing: .12em; }
	.uku-hero--carousel .uku-hero__overlay-inner { text-align: center !important; }
	.uku-hero--carousel .uku-hero__subtitle { margin-left: auto !important; margin-right: auto !important; font-size: 14px; }
	.uku-hero--carousel .uku-hero__ctas { justify-content: center; }
}

/* ---- Produits mis en avant ---- */
.uku-featured { background: #FFFFF0; }

/* ---- Sliders Best sellers / Trending (shortcodes Meya) alignés sur les titres de section ---- */
.meya-section--slider { padding-top: clamp(56px, 8vw, 104px); }
.meya-section__title { font-family: "Cormorant Garamond", Georgia, serif !important; font-size: clamp(32px, 4.6vw, 52px) !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; }

/* ---- En-têtes de section homogènes : à gauche, lien à droite ---- */
.mh-head--split { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.mh-link { flex: none; padding-bottom: 4px; border-bottom: 1px solid currentColor; font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: #121110; text-decoration: none; }
.uku-featured__head { text-align: left; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.uku-featured__eyebrow { color: #94631c; }
.uku-featured__title { font-size: clamp(32px, 4.6vw, 52px); }

/* ---- Filtres Collections / Rubriques : boutons noirs, texte blanc ---- */
.uku-cfg .uku-cfg-classic__trigger { background: #121110 !important; border-color: #121110 !important; color: #fff !important; }
.uku-cfg .uku-cfg-classic__trigger span,
.uku-cfg .uku-cfg-classic__trigger svg { color: #fff !important; stroke: currentColor; }

/* =====================================================================
 * Langage 2026 — cartes arrondies, bento, apparition au défilement.
 * Rayon unique --mh-r, marges latérales 16px sur mobile partout.
 * ===================================================================== */
:root { --mh-r: 18px; --mh-r-sm: 12px; --mh-ink: #121110; --mh-cream: #FFFFF0; --mh-sand: #f4ede0; --mh-line: #e7e2d8; --mh-gold: #94631c; }

/* ---- Cartes produit : coins arrondis, survol doux ---- */
.uku-pcard__media { border-radius: var(--mh-r-sm); overflow: hidden; }
.uku-pcard__media img { transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.uku-pcard:hover .uku-pcard__media img { transform: scale(1.035); }
.uku-pcard__wish { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background: rgba(255,255,255,.72) !important; }

/* ---- Filtres : pilules noires ---- */
.uku-cfg .uku-cfg-classic__trigger { border-radius: 999px !important; padding-left: 18px !important; padding-right: 16px !important; }

/* ---- Collections : bento ---- */
.mh-col__track { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: repeat(2, minmax(220px, 1fr)); gap: 12px; height: clamp(520px, 62vw, 760px); }
.mh-col__tile:first-child { grid-row: span 2; }
.mh-col__tile:nth-child(4) { grid-column: span 2; }
.mh-col__tile { position: relative; display: block; overflow: hidden; border-radius: var(--mh-r); color: #fff; text-decoration: none; isolation: isolate; }
.mh-col__img { position: absolute; inset: 0; z-index: -1; background: var(--mh-sand); }
.mh-col__img img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }
.mh-col__tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 50%); }
.mh-col__tile:hover .mh-col__img img { transform: scale(1.05); }
.mh-col__meta { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.mh-col__name { font-family: "Cormorant Garamond", serif; font-weight: 500; font-size: clamp(24px, 2.6vw, 36px); line-height: 1; }
.mh-col__go { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: rgba(255,255,255,.18); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.35); font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; transition: background .3s, color .3s; }
.mh-col__go svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform .3s; }
.mh-col__tile:hover .mh-col__go { background: #fff; color: var(--mh-ink); }
.mh-col__tile:hover .mh-col__go svg { transform: translateX(3px); }
@media (max-width: 767px) {
	.mh-col__track { grid-template-columns: 1fr 1fr; grid-template-rows: 300px 220px 220px; height: auto; gap: 10px; }
	.mh-col__tile:first-child { grid-row: auto; grid-column: span 2; }
	.mh-col__tile:nth-child(4) { grid-column: span 2; }
	.mh-col__go { padding: 8px; font-size: 0; gap: 0; }
	.mh-col__go svg { width: 14px; height: 14px; }
	.mh-col__name { font-size: 26px; }
}

/* ---- La maison : carte arrondie insérée, image en zoom au défilement ---- */
.mh-story { max-width: 1280px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 40px); display: block; background: none; color: #fff; }
.mh-story { display: grid; }
.mh-story > * { grid-area: 1 / 1; }
.mh-story__img { position: relative; border-radius: var(--mh-r); overflow: hidden; min-height: clamp(520px, 70vw, 720px); }
.mh-story__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mh-story__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(10,9,8,.82) 0%, rgba(10,9,8,.35) 55%, rgba(10,9,8,0) 100%); }
.mh-story__text { position: relative; z-index: 1; align-self: end; padding: clamp(28px, 5vw, 72px); max-width: 600px; }
.mh-story .mh-eyebrow { color: #E09F3D; }
.mh-story .mh-title { color: #fff; margin-bottom: 18px; }
.mh-story__body { margin: 0 0 28px; font-size: 15px; line-height: 1.75; color: rgba(255,255,255,.82); }
.mh-story .mh-btn--light { border-radius: 999px; background: #fff; color: var(--mh-ink); border-color: #fff; }
.mh-story .mh-btn--light:hover { background: transparent; color: #fff; }
@media (max-width: 767px) {
	.mh-story__img { min-height: 560px; }
	.mh-story__img::after { background: linear-gradient(to top, rgba(10,9,8,.9) 0%, rgba(10,9,8,.5) 45%, rgba(10,9,8,0) 75%); }
	.mh-story__text { padding: 24px 20px 28px; }
}

/* ---- Sur-mesure : carte sable arrondie, image arrondie ---- */
.mh-bespoke { max-width: 1280px; margin: clamp(56px, 8vw, 104px) auto; padding: 12px; border-radius: calc(var(--mh-r) + 6px); background: var(--mh-sand); display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: calc(100% - 2 * clamp(16px, 3vw, 40px)); }
.mh-bespoke__img { border-radius: var(--mh-r); overflow: hidden; min-height: 560px; }
.mh-bespoke__img img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; }
.mh-bespoke__text { align-self: center; padding: clamp(24px, 5vw, 72px); }
.mh-bespoke .mh-title { margin-bottom: 18px; }
.mh-bespoke__body { margin: 0 0 24px; font-size: 15px; line-height: 1.75; color: #4a4640; }
.mh-bespoke__steps { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 8px; }
.mh-bespoke__steps li { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--mh-r-sm); background: rgba(255,255,255,.7); font-size: 14px; color: var(--mh-ink); }
.mh-bespoke__steps span { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--mh-ink); color: #fff; font-size: 11px; letter-spacing: 0; }
.mh-bespoke__ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.mh-btn { border-radius: 999px; }
.mh-btn--dark { background: var(--mh-ink); border: 1px solid var(--mh-ink); color: #fff; }
.mh-btn--dark:hover { background: transparent; color: var(--mh-ink); }
.mh-btn--ghost { border: 1px solid var(--mh-ink); color: var(--mh-ink); }
.mh-btn--ghost:hover { background: var(--mh-ink); color: #fff; }
@media (max-width: 767px) {
	.mh-bespoke { grid-template-columns: 1fr; padding: 8px; }
	.mh-bespoke__img { min-height: 0; aspect-ratio: 4 / 5; }
	.mh-bespoke__text { padding: 20px 12px 16px; }
	.mh-bespoke__ctas .mh-btn { flex: 1 1 100%; text-align: center; }
}

/* ---- Services : bento de 3 cartes + rangée de paiements ---- */
.mh-svc { max-width: 1280px; margin: 0 auto; padding: clamp(48px, 6vw, 88px) clamp(16px, 3vw, 40px); border: 0; background: none; }
.mh-svc__grid { max-width: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; text-align: left; }
.mh-svc__item { padding: 28px; border-radius: var(--mh-r); background: var(--mh-sand); }
.mh-svc__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #fff; }
.mh-svc__icon svg { width: 22px; height: 22px; fill: none; stroke: var(--mh-ink); stroke-width: 1.3; stroke-linejoin: round; }
.mh-svc__item h3 { margin: 20px 0 6px; font-family: "Cormorant Garamond", serif; font-size: 24px; font-weight: 500; }
.mh-svc__item p { margin: 0; font-size: 14px; line-height: 1.65; color: #6a645c; }
.mh-svc__pay { max-width: none; margin: 12px 0 0; padding: 22px 28px; border: 0; border-radius: var(--mh-r); background: var(--mh-ink); display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; text-align: left; }
.mh-svc__pay .mh-eyebrow { margin: 0; color: #E09F3D; }
.mh-svc__pay ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.mh-svc__pay li { display: grid; place-items: center; width: 64px; height: 40px; padding: 6px; border-radius: 10px; background: #fff; }
.mh-svc__pay img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
@media (max-width: 767px) {
	.mh-svc__grid { grid-template-columns: 1fr; gap: 10px; }
	.mh-svc__item { display: grid; grid-template-columns: 48px 1fr; column-gap: 16px; padding: 20px; }
	.mh-svc__item h3 { margin: 0 0 4px; align-self: end; font-size: 21px; }
	.mh-svc__item p { grid-column: 2; }
	.mh-svc__icon { grid-row: span 2; }
	.mh-svc__pay { padding: 20px; justify-content: center; text-align: center; }
	.mh-svc__pay ul { justify-content: center; }
}

/* ---- Bande défilante : fond noir, texte blanc pur ---- */
.mb-mq { background: var(--mh-ink) !important; border: 0 !important; }
.mb-mq__item { color: #fff !important; }
.mb-mq__dot { background: #E09F3D !important; opacity: 1 !important; }

/* ---- Apparition au défilement (CSS natif, sans JS) ---- */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.mh-col__tile, .mh-story__img, .mh-bespoke, .mh-svc__item, .uku-featured .uku-pcard {
			animation: mh-rise linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 40%;
		}
	}
}
@keyframes mh-rise { from { opacity: 0; transform: translateY(32px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes mh-zoom { from { transform: scale(1.12); } to { transform: scale(1); } }
.mh-bespoke__img { position: relative; }
.mh-bespoke__img img { position: absolute; inset: 0; }
.mh-svc__pay li { overflow: hidden; }
.mh-svc__pay img { width: 100%; height: 100%; object-fit: contain; }

/* ---- Stories des collections (façon application) ---- */
.mh-stories { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x proximity; padding: 20px 16px 8px; max-width: 1280px; margin: 0 auto; scrollbar-width: none; }
.mh-stories::-webkit-scrollbar { display: none; }
.mh-story-dot { flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 76px; scroll-snap-align: start; text-decoration: none; color: var(--mh-ink); }
.mh-story-dot__ring { display: block; width: 72px; height: 72px; padding: 2.5px; border-radius: 50%; background: conic-gradient(from 210deg, #E09F3D, #94631c, #f3d29a, #E09F3D); transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.mh-story-dot__img { display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; border: 2.5px solid var(--mh-cream); background: var(--mh-sand); }
.mh-story-dot__img img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.mh-story-dot__name { font-size: 11px; font-weight: 500; letter-spacing: .02em; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mh-story-dot:active .mh-story-dot__ring { transform: scale(.94); }
@media (min-width: 768px) {
	.mh-stories { justify-content: center; gap: 28px; padding: 32px 40px 8px; }
	.mh-story-dot { width: 92px; }
	.mh-story-dot__ring { width: 88px; height: 88px; }
	.mh-story-dot:hover .mh-story-dot__ring { transform: scale(1.05); }
}

/* ---- Les looks du moment : carrousel de cartes, fiche produit en verre ---- */
.mh-looks { timeline-scope: --mh-looks; }
.mh-looks__track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 clamp(16px, 3vw, 40px); margin: 0 calc(-1 * clamp(16px, 3vw, 40px)); padding: 0 clamp(16px, 3vw, 40px) 4px; scrollbar-width: none; scroll-timeline: --mh-looks x; overscroll-behavior-x: contain; }
.mh-looks__track::-webkit-scrollbar { display: none; }
.mh-look { position: relative; flex: 0 0 min(78vw, 380px); scroll-snap-align: start; border-radius: var(--mh-r); overflow: hidden; background: var(--mh-sand); aspect-ratio: 3 / 4.4; }
.mh-look__media { position: absolute; inset: 0; display: block; }
.mh-look__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .6s ease, transform 1.2s cubic-bezier(.2,.7,.2,1); }
.mh-look__img--alt { opacity: 0; }
.mh-look:hover .mh-look__img--alt { opacity: 1; }
.mh-look:hover .mh-look__img { transform: scale(1.03); }
.mh-look__num { position: absolute; top: 14px; left: 14px; padding: 6px 10px; border-radius: 999px; background: rgba(18,17,16,.45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; font-size: 10px; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.mh-look__sheet { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 14px; background: rgba(255,255,240,.78); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.mh-look__thumb { flex: none; width: 44px; height: 44px; border-radius: 10px; object-fit: cover; }
.mh-look__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--mh-ink); }
.mh-look__name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mh-look__price { font-size: 12px; color: #6a645c; font-variant-numeric: tabular-nums; }
.mh-look__price del { opacity: .6; margin-right: 4px; }
.mh-look__add { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--mh-ink); color: #fff; cursor: pointer; transition: transform .2s; }
.mh-look__add svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.mh-look__add:active { transform: scale(.9); }
.mh-looks__bar { position: relative; height: 2px; margin-top: 20px; background: var(--mh-line); border-radius: 2px; overflow: hidden; }
.mh-looks__bar span { position: absolute; inset: 0; background: var(--mh-ink); transform-origin: left; transform: scaleX(.2); }
@supports (animation-timeline: scroll()) {
	.mh-looks__bar span { animation: mh-bar linear both; animation-timeline: --mh-looks; }
}
@keyframes mh-bar { from { transform: scaleX(.15); } to { transform: scaleX(1); } }
@media (min-width: 1024px) {
	.mh-look { flex-basis: calc((100% - 36px) / 3.4); }
}

/* ---- Fiche produit : tailles et bascules en pilules ---- */
.uku-pdp__size-pill { border-radius: 999px !important; min-width: 46px; }
.uku-pdp__size-btn { border-radius: 999px !important; }
.uku-pdp__measure-row input { border-radius: 12px !important; }
.uku-pdp__add-btn { border-radius: 999px; }

.uku-cart-drawer .uku-cart-drawer__checkout-btn { border-radius: 999px !important; }
.uku-cart-drawer__step-qty { border-radius: 999px; overflow: hidden; }
.uku-cart-drawer__item img { border-radius: 10px; }

/* =====================================================================
 * Aperçu rapide — repris de l'aperçu de meyaboutique.com (production),
 * relevé au pixel le 2026-10-18 : fenêtre quasi plein écran, photo bord à
 * bord, fermeture ronde blanche, Inter, sélecteur segmenté, tailles en
 * petits carrés, accordéons en capitales, pied fixe « Ajouter au panier ».
 * ===================================================================== */
.uku-quickview__title { font-family: "Inter", sans-serif !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; color: #111 !important; margin: 0 0 6px !important; }
.uku-quickview__price { font-family: "Inter", sans-serif; font-size: 13px; font-weight: 500; color: #555; margin: 0 0 15px; }
.uku-quickview__size-toggle { display: flex; gap: 0; padding: 1px; margin-bottom: 16px; border: 1px solid #e8e3dc; border-radius: 6px; }
.uku-quickview__size-btn { flex: 1; padding: 9px 0 !important; border: 0 !important; border-radius: 3px !important; background: transparent !important; color: #888 !important; font-family: "Inter", sans-serif; font-size: 11px !important; font-weight: 500 !important; letter-spacing: .04em !important; text-transform: uppercase; }
.uku-quickview__size-btn.is-active { background: #111 !important; color: #fff !important; }
.uku-quickview__size-pills { gap: 8px !important; }
.uku-quickview__size-pill { min-width: 41px; height: 34px; padding: 0 12px !important; border: 1px solid #e8e3dc !important; border-radius: 2px !important; background: #fff !important; color: #111 !important; font-family: "Inter", sans-serif; font-size: 11px !important; font-weight: 500 !important; }
.uku-quickview__size-pill.is-active { background: #111 !important; border-color: #111 !important; color: #fff !important; }
.uku-quickview__hauteur-standard label,
.uku-quickview__measurements label { font-family: "Inter", sans-serif; font-size: 10px !important; font-weight: 500; letter-spacing: .08em !important; text-transform: uppercase; color: #888 !important; }
.uku-hauteur-box, .uku-quickview__measure-row input { border-radius: 3px !important; }
.uku-quickview__info { display: flex; flex-direction: column; }
.uku-quickview__accordion { order: 10; border-top: 1px solid #e8e3dc; margin: 16px 0 0; }
.uku-quickview__accordion summary { display: flex; justify-content: space-between; align-items: center; padding: 13px 0; list-style: none; cursor: pointer; font-family: "Inter", sans-serif !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: .07em !important; text-transform: uppercase; color: #111; }
.uku-quickview__accordion summary::-webkit-details-marker { display: none; }
.uku-quickview__accordion summary::after { content: ""; float: none; font-size: 0; width: 7px; height: 7px; border-right: 1.3px solid #888; border-bottom: 1.3px solid #888; transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
.uku-quickview__accordion[open] summary::after { content: ""; transform: rotate(-135deg) translateY(-2px); }
.uku-quickview__description { padding: 0 0 14px; font-family: "Inter", sans-serif; font-size: 12px; font-weight: 300; line-height: 1.6; color: #555; }
.uku-quickview__size-guide { order: 11; display: flex !important; justify-content: space-between; align-items: center; width: 100%; padding: 13px 0 !important; border: 0 !important; border-top: 1px solid #e8e3dc !important; border-bottom: 1px solid #e8e3dc !important; background: none !important; text-decoration: none !important; font-family: "Inter", sans-serif !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: .07em !important; text-transform: uppercase; color: #111 !important; cursor: pointer; }
.uku-quickview__size-guide::after { content: ""; width: 7px; height: 7px; border-right: 1.3px solid #888; border-bottom: 1.3px solid #888; transform: rotate(45deg) translateY(-2px); }
.uku-quickview__permalink { order: 12; display: block; margin: 16px 0 0; padding: 12px 20px; border: 1.5px solid #111; border-radius: 4px; text-align: center; text-decoration: none !important; font-family: "Inter", sans-serif; font-size: 11px !important; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #111 !important; }
.uku-quickview .uku-quickview__add-btn { order: 20; border-radius: 4px !important; font-family: "Inter", sans-serif; font-size: 12px !important; font-weight: 600; letter-spacing: .12em !important; background: #111 !important; border-color: #111 !important; }
.uku-quickview .uku-quickview__add-btn::before { content: ""; width: 16px; height: 16px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M6 7h12l1 14H5L6 7z'/%3E%3Cpath d='M9 7a3 3 0 0 1 6 0'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M6 7h12l1 14H5L6 7z'/%3E%3Cpath d='M9 7a3 3 0 0 1 6 0'/%3E%3C/svg%3E") center / contain no-repeat; }
.uku-quickview__close { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50% !important; background: #fff !important; color: #111 !important; box-shadow: 0 2px 10px rgba(0,0,0,.15); }
.uku-quickview__close svg { width: 18px; height: 18px; }

@media (max-width: 767.98px) {
	.uku-quickview { align-items: flex-end; }
	.uku-quickview .uku-quickview__panel {
		width: calc(100% - 16px);
		max-width: none;
		max-height: calc(100dvh - 56px);
		padding: 0;
		border-radius: 16px 16px 0 0;
		background: #FFFFF0;
	}
	/* Fermeture : reste en haut à droite pendant le défilement. */
	.uku-quickview .uku-quickview__close { position: sticky; top: 12px; align-self: flex-end; flex: none; margin: 12px 12px -52px auto; z-index: 5; }
	.uku-quickview__gallery { background: #f5f2ee; }
	.uku-quickview__main-img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 0 !important; }
	.uku-quickview__thumbs { gap: 6px; margin: 0; padding: 10px 20px 0; background: #FFFFF0; }
	.uku-quickview__thumb { width: 44px !important; height: 56px !important; border-radius: 4px !important; overflow: hidden; }
	.uku-quickview__info { padding: 20px 20px 0; }
	/* Pied fixe : bouton noir arrondi posé sur une bande crème. */
	.uku-quickview .uku-quickview__add-btn {
		position: sticky;
		bottom: 0;
		width: calc(100% + 40px) !important;
		margin: 16px -20px 0 !important;
		padding: 26px 40px 32px !important;
		border: 0 !important;
		border-radius: 0 !important;
		background: #FFFFF0 !important;
		color: #fff !important;
		box-shadow: 0 -1px 0 #e8e3dc !important;
		isolation: isolate;
	}
	.uku-quickview .uku-quickview__add-btn::after { content: ""; position: absolute; inset: 12px 20px 18px; z-index: -1; border-radius: 4px; background: #111; }
	.uku-quickview .uku-quickview__add-btn:disabled::after { background: #999; }
	.uku-quickview .uku-quickview__add-btn:hover:not(:disabled) { background: #FFFFF0 !important; color: #fff !important; }
	.uku-quickview__permalink { margin-bottom: 0; }
}
/* Libellé « Taille » au-dessus des carrés de taille (comme en production). */
.uku-quickview__size-pills--standard::before {
	content: "Taille";
	flex-basis: 100%;
	margin-bottom: -2px;
	font-family: "Inter", sans-serif;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #888;
}

/* ---- La maison : photo entière, nette (plus de recadrage ni de zoom) ----
   Mobile : photo à son format, texte dessous sur la carte sombre.
   Ordinateur : photo à gauche, texte à droite, dans la même carte. */
.mh-story { display: grid !important; grid-template-columns: 1fr; gap: 0; max-width: 1280px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 40px); }
.mh-story > * { grid-area: auto !important; }
.mh-story__img { min-height: 0 !important; border-radius: var(--mh-r) var(--mh-r) 0 0; background: #121110; }
.mh-story__img::after { display: none; }
.mh-story__img img { position: static !important; display: block; width: 100%; height: auto !important; object-fit: contain; transform: none !important; }
.mh-story__text { align-self: stretch; max-width: none; padding: 32px 22px 36px !important; border-radius: 0 0 var(--mh-r) var(--mh-r); background: #121110; }
@media (min-width: 900px) {
	.mh-story { grid-template-columns: 1fr 1fr; }
	.mh-story__img { border-radius: var(--mh-r) 0 0 var(--mh-r); display: flex; align-items: center; }
	.mh-story__text { align-self: auto; display: flex; flex-direction: column; justify-content: center; padding: clamp(40px, 6vw, 88px) !important; border-radius: 0 var(--mh-r) var(--mh-r) 0; }
}

/* ---- Looks : la fiche en verre reste dans la carte arrondie (Safari iOS
   laissait déborder l'élément flouté hors du découpage arrondi). ---- */
.mh-look { isolation: isolate; }
/* Fiche sans flou d'arrière-plan : sur iPhone, backdrop-filter faisait
   déborder la fiche du coin arrondi de la carte, et l'astuce de découpage
   (-webkit-mask-image) déformait les coins de la carte en ellipse. Fond
   crème presque opaque, rendu identique sur tous les navigateurs. */
.mh-look__sheet { bottom: 10px; border-radius: 14px; background: rgba(255, 255, 240, 0.94) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.mh-look__num { background: rgba(18, 17, 16, 0.6) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

/* ---- Rythme vertical uniforme (relecture finale) : un seul écart entre
   sections, plus petit sur mobile ---- */
:root { --mh-gap: clamp(48px, 7vw, 96px); }
.mh-section { padding-top: var(--mh-gap) !important; padding-bottom: 0 !important; }
.mh-looks { padding-bottom: 0 !important; }
.mh-bespoke { margin-top: var(--mh-gap) !important; margin-bottom: 0 !important; }
.mh-story { margin-top: var(--mh-gap); }
.meya-section--slider { padding-top: var(--mh-gap) !important; }
.meya-section { margin-bottom: 0 !important; }
.mh-svc { padding-top: var(--mh-gap) !important; padding-bottom: var(--mh-gap) !important; }
.uku-featured { padding-bottom: 0 !important; }

/* =====================================================================
 * Règles rétablies : supprimées par erreur dans 595aeec (elles étaient
 * collées aux blocs « Bande défilante » réécrits). Ne pas les détacher.
 * ===================================================================== */
/* Hauteur du hero alignée sur la production : 3:4 sur mobile (largeur × 4/3,
   ~500px sur un téléphone de 375px), au lieu de 78% de l'écran. */
@media (max-width: 767px) {
	.uku-hero--carousel { height: calc(100vw * 4 / 3) !important; max-height: 78vh; }
	/* Comme en production : pas d'accroche sur mobile, bloc de texte
	   compact pour laisser les visages visibles. */
	.uku-hero--carousel .uku-hero__subtitle { display: none; }
	.uku-hero--carousel { --uku-hero-title-size-mobile: 38px; }
	.uku-hero--carousel .uku-hero__eyebrow { margin-bottom: 8px; font-size: 10px; }
	.uku-hero--carousel .uku-hero__title { margin-bottom: 16px; }
	.uku-hero--carousel .uku-hero__overlay { padding-bottom: 44px; }
	.uku-hero--carousel .uku-hero__cta { padding: 12px 16px; font-size: 10px; }
	.uku-hero--carousel .uku-hero__dots { padding-bottom: 18px; }
}
/* Carrousels Meilleures ventes / Tendances : même largeur que les autres sections. */
.meya-section { max-width: 1280px !important; }
/* Sélection : les filtres ouvrent la section, peu d'air au-dessus. */
.uku-featured { padding-top: 32px; }
/* Bouton « + » des looks : Safari iOS ajoute une marge intérieure par défaut
   aux <button>, qui décalait l'icône vers la droite dans le rond. */
.mh-look__add { -webkit-appearance: none; appearance: none; padding: 0 !important; margin: 0; line-height: 0; font-size: 0; }
.mh-look__add svg { display: block; flex: none; margin: 0; }

/* =====================================================================
 * Relecture « navigation fluide » (2026-10-18)
 * ===================================================================== */
/* Titres des filtres : petites étiquettes sur une ligne, pas des titres. */
.uku-featured .uku-cfg-classic__heading {
	margin: 0 0 8px !important;
	font-family: "Inter", sans-serif !important;
	font-size: 10px !important;
	font-weight: 600 !important;
	letter-spacing: .14em !important;
	text-transform: uppercase !important;
	line-height: 1.2 !important;
	color: #77716a !important;
	white-space: nowrap;
}
/* Carrousels Meilleures ventes / Tendances : en-tête comme les autres
   sections (sur-titre, titre, « Tout voir »), barre de défilement fine
   et noire comme celle des looks. */
.meya-section__head { display: flex !important; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: clamp(24px, 4vw, 44px) !important; }
.uku-pcarousel__track { scrollbar-width: thin; scrollbar-color: #121110 #e7e2d8; }
.uku-pcarousel__track::-webkit-scrollbar { height: 2px; }
.uku-pcarousel__track::-webkit-scrollbar-track { background: #e7e2d8; }
.uku-pcarousel__track::-webkit-scrollbar-thumb { background: #121110; border-radius: 2px; }
/* L'expérience Meya : bouton arrondi comme tous les autres. */
.mhiw-cta { border-radius: 999px !important; }
/* Carrousels sur ordinateur : 4 cartes par vue au format portrait (comme la
   sélection et les looks), au lieu de 6 petites vignettes presque carrées. */
@media (min-width: 1024px) {
	.meya-section--slider .uku-pcarousel__track { gap: 12px; }
	.meya-section--slider .uku-pcarousel__track .uku-pcard { flex: 0 0 calc((100% - 36px) / 4) !important; max-width: none !important; }
}
.meya-section--slider .uku-pcard__media { aspect-ratio: 3 / 4; }

/* =====================================================================
 * Manifeste — carte noire arrondie, photos en noir et blanc dévoilées au
 * défilement, couleur au survol ; mobile : cartes à faire glisser.
 * ===================================================================== */
.mh-mani { max-width: 1280px; margin: var(--mh-gap) auto 0; padding: 0 clamp(16px, 3vw, 40px); }
.mh-mani__inner { padding: clamp(32px, 5vw, 64px) clamp(20px, 4vw, 56px); border-radius: calc(var(--mh-r) + 6px); background: #121110; color: #fff; }
.mh-mani__head { margin-bottom: clamp(24px, 4vw, 44px); }
.mh-mani .mh-eyebrow { color: #E09F3D; }
.mh-mani .mh-title { color: #fff; }
.mh-mani__track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mh-mani__card { margin: 0; }
.mh-mani__img { position: relative; aspect-ratio: 3 / 4; border-radius: var(--mh-r); overflow: hidden; background: #1d1b19; }
.mh-mani__img img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; filter: grayscale(1) contrast(1.08); transition: filter .8s ease, transform 1.2s cubic-bezier(.2,.7,.2,1); }
.mh-mani__card:hover .mh-mani__img img { filter: grayscale(0); transform: scale(1.03); }
.mh-mani__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,0) 55%); }
.mh-mani__word { position: absolute; left: 18px; bottom: 14px; z-index: 1; font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 500; font-size: clamp(40px, 4.4vw, 60px); line-height: 1; color: #fff; }
.mh-mani__txt { display: flex; gap: 14px; padding: 16px 4px 0; }
.mh-mani__txt p { margin: 0; font-size: 14px; line-height: 1.65; color: rgba(255,255,255,.72); }
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.mh-mani__img { animation: mh-unveil linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
	}
}
@keyframes mh-unveil { from { clip-path: inset(18% 8% 18% 8% round 18px); opacity: .3; } to { clip-path: inset(0 0 0 0 round 18px); opacity: 1; } }
@media (max-width: 767px) {
	.mh-mani__inner { padding: 32px 0 28px; }
	.mh-mani__head { padding: 0 20px; }
	.mh-mani__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 20px; padding: 0 20px; gap: 12px; scrollbar-width: none; }
	.mh-mani__track::-webkit-scrollbar { display: none; }
	.mh-mani__card { flex: 0 0 78%; scroll-snap-align: start; }
}


/* =====================================================================
 * « La mode pour toutes les femmes » — arche dorée, photo détourée qui en
 * sort, sceau rond qui tourne, étiquettes flottantes ; titre éditorial.
 * ===================================================================== */
.mh-aw2 { max-width: 1280px; margin: var(--mh-gap) auto 0; padding: 0 clamp(16px, 3vw, 40px); display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(32px, 5vw, 80px); }
.mh-aw2__title { margin: 0 0 20px; font-family: "Cormorant Garamond", serif; font-weight: 500; font-size: clamp(48px, 6.4vw, 96px); line-height: .95; letter-spacing: -.015em; color: #121110; }
.mh-aw2__title span, .mh-aw2__title em { display: block; }
.mh-aw2__title em { font-style: italic; color: #94631c; padding-left: .6em; }
.mh-aw2__body { max-width: 420px; margin: 0 0 28px; font-size: 15px; line-height: 1.75; color: #4a4640; }
.mh-aw2__visual { position: relative; display: flex; justify-content: center; align-items: flex-end; height: clamp(520px, 52vw, 680px); }
.mh-aw2__arch { position: absolute; left: 50%; bottom: 0; width: min(78%, 440px); height: 82%; transform: translateX(-50%); border-radius: 999px 999px 24px 24px; background: radial-gradient(90% 70% at 50% 30%, #f3d29a 0%, #E09F3D 55%, #94631c 100%); box-shadow: inset 0 -40px 80px rgba(18,17,16,.18); }
.mh-aw2__arch::after { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(255,255,240,.55); border-radius: inherit; }
.mh-aw2__img { position: relative; z-index: 1; height: 100%; width: auto; max-width: 100%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 30px 40px rgba(18,17,16,.25)); }
.mh-aw2__chip { position: absolute; z-index: 3; padding: 10px 16px; border-radius: 999px; background: #FFFFF0; box-shadow: 0 10px 28px rgba(18,17,16,.16); font-size: 12px; font-weight: 500; color: #121110; white-space: nowrap; }
.mh-aw2__chip--1 { left: 0; top: 30%; }
.mh-aw2__chip--2 { right: 0; top: 52%; }
.mh-aw2__chip--3 { left: 6%; bottom: 10%; }
@media (prefers-reduced-motion: no-preference) {
	.mh-aw2__chip--1 { animation: mh-float 6s ease-in-out infinite; }
	.mh-aw2__chip--2 { animation: mh-float 7s ease-in-out -2s infinite; }
	.mh-aw2__chip--3 { animation: mh-float 6.5s ease-in-out -4s infinite; }
	@supports (animation-timeline: view()) {
		.mh-aw2__arch { animation: mh-arch linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
		.mh-aw2__img { animation: mh-rise-big linear both; animation-timeline: view(); animation-range: entry 10% entry 90%; }
		.mh-aw2__title span, .mh-aw2__title em { animation: mh-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
	}
}
@keyframes mh-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes mh-arch { from { transform: translateX(-50%) scaleY(.4); transform-origin: bottom; opacity: 0; } to { transform: translateX(-50%) scaleY(1); transform-origin: bottom; opacity: 1; } }
@keyframes mh-rise-big { from { opacity: 0; transform: translateY(60px) scale(.96); } to { opacity: 1; transform: none; } }
@media (max-width: 767px) {
	.mh-aw2 { grid-template-columns: 1fr; gap: 28px; }
	.mh-aw2__text { order: 2; }
	.mh-aw2__visual { order: 1; height: 500px; }
	.mh-aw2__arch { width: 82%; height: 84%; }
	.mh-aw2__chip { padding: 8px 12px; font-size: 11px; }
	.mh-aw2__chip--1 { left: -2px; top: 26%; }
	.mh-aw2__chip--2 { right: -2px; top: 50%; }
	.mh-aw2__chip--3 { left: 4px; bottom: 7%; }
	.mh-aw2__title { font-size: 54px; }
}


/* =====================================================================
 * Approche douce, artistique, « mode » (2026-10-18)
 * ===================================================================== */

/* ---- Étiquettes flottantes : verre laiteux, sans puce ---- */
.mh-aw2__chip { padding: 10px 18px; background: rgba(255,255,240,.82); border: 1px solid rgba(18,17,16,.06); box-shadow: 0 14px 34px rgba(18,17,16,.12); font-family: "Cormorant Garamond", serif; font-size: 16px; font-style: italic; font-weight: 500; letter-spacing: .01em; }
@media (max-width: 767px) { .mh-aw2__chip { font-size: 14px; padding: 8px 14px; } }

/* ---- Votre pièce, à votre taille : éditorial, arche, frise d'étapes ---- */
.mh-bespoke { display: grid !important; grid-template-columns: 1fr 1.05fr !important; align-items: center; gap: clamp(32px, 6vw, 96px) !important; max-width: 1280px; width: auto !important; margin: var(--mh-gap) auto 0 !important; padding: 0 clamp(16px, 3vw, 40px) !important; background: none !important; border-radius: 0 !important; }
.mh-bespoke__img { position: relative; margin: 0; min-height: 0 !important; aspect-ratio: 4 / 5; border-radius: 999px 999px 24px 24px !important; overflow: hidden; background: #f4ede0; }
.mh-bespoke__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.mh-bespoke__img figcaption { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); padding: 9px 18px; border-radius: 999px; background: rgba(255,255,240,.86); font-family: "Cormorant Garamond", serif; font-size: 16px; color: #121110; white-space: nowrap; }
.mh-bespoke__img figcaption i { color: #94631c; }
.mh-bespoke__text { padding: 0 !important; }
.mh-bespoke .mh-title { font-size: clamp(40px, 5vw, 68px) !important; line-height: 1 !important; margin-bottom: 18px !important; }
.mh-bespoke__body { max-width: 440px; margin: 0 0 32px !important; color: #6a645c !important; }
.mh-bespoke__steps { counter-reset: step; position: relative; display: grid !important; gap: 0 !important; margin: 0 0 36px !important; padding: 0 0 0 28px !important; list-style: none; }
.mh-bespoke__steps::before { content: ""; position: absolute; left: 5px; top: 12px; bottom: 12px; width: 1px; background: linear-gradient(#E09F3D, rgba(224,159,61,.15)); }
.mh-bespoke__steps li { position: relative; display: block !important; padding: 10px 0 16px !important; border: 0 !important; border-radius: 0 !important; background: none !important; }
.mh-bespoke__steps li::before { content: ""; position: absolute; left: -28px; top: 17px; width: 11px; height: 11px; border-radius: 50%; background: #FFFFF0; border: 1px solid #E09F3D; }
.mh-bespoke__steps strong { display: block; font-family: "Cormorant Garamond", serif; font-size: 26px; font-style: italic; font-weight: 500; line-height: 1.1; color: #121110; }
.mh-bespoke__steps span { display: block !important; width: auto !important; height: auto !important; margin-top: 4px; border-radius: 0 !important; background: none !important; color: #6a645c !important; font-size: 14px !important; letter-spacing: 0 !important; }
.mh-bespoke__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px !important; }
.mh-bespoke__help { font-size: 13px; color: #121110; text-decoration: none; border-bottom: 1px solid rgba(18,17,16,.3); padding-bottom: 2px; }
.mh-bespoke__help:hover { border-color: #121110; }
@media (max-width: 767px) {
	.mh-bespoke { grid-template-columns: 1fr !important; gap: 32px !important; padding: 0 16px !important; }
	.mh-bespoke__img { aspect-ratio: 4 / 4.6; }
	.mh-bespoke__ctas .mh-btn { flex: 1 1 100%; text-align: center; }
	.mh-bespoke__help { margin: 0 auto; }
}

/* ---- Manifeste : la couleur se révèle au défilement (mobile et
   ordinateur), le survol la garde sur ordinateur ---- */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.mh-mani__img img { animation: mh-colorize linear both; animation-timeline: view(); animation-range: cover 25% cover 55%; }
	}
}
@keyframes mh-colorize { from { filter: grayscale(1) contrast(1.08); } to { filter: grayscale(0) contrast(1); } }
@supports not (animation-timeline: view()) {
	@media (hover: none) { .mh-mani__img img { filter: none; } }
}

/* ---- Services : épuré — trois colonnes séparées d'un filet, sans cartes ---- */
.mh-svc__grid { gap: 0 !important; }
.mh-svc__item { display: flex !important; flex-direction: column; align-items: center; padding: 8px 28px !important; border-radius: 0 !important; background: none !important; text-align: center; }
.mh-svc__item + .mh-svc__item { border-left: 1px solid #e7e2d8; }
.mh-svc__icon { width: auto !important; height: auto !important; background: none !important; }
.mh-svc__icon svg { width: 26px !important; height: 26px !important; stroke: #94631c !important; stroke-width: 1 !important; }
.mh-svc__item h3 { margin: 16px 0 6px !important; font-size: 22px !important; font-style: italic; }
.mh-svc__item p { max-width: 260px; font-size: 13px !important; color: #77716a !important; }
@media (max-width: 767px) {
	.mh-svc__grid { grid-template-columns: 1fr !important; }
	.mh-svc__item { display: flex !important; padding: 22px 0 !important; }
	.mh-svc__item + .mh-svc__item { border-left: 0; border-top: 1px solid #e7e2d8; }
	.mh-svc__item h3 { margin: 12px 0 4px !important; grid-column: auto; }
	.mh-svc__item p { grid-column: auto; }
	.mh-svc__icon { grid-row: auto; }
}

/* ---- Footer : fond crème du site (prolonge la page au lieu de la couper
   par un bloc noir), encre du header. Structure : footer éditorial du thème. ---- */
.uku-footer--editorial {
	--fe-bg: #FFFFF0;
	--fe-ink: #0f0e0d;
	margin-top: var(--mh-gap) !important;
	background: var(--fe-bg) !important;
	color: var(--fe-ink) !important;
}
.uku-footer--editorial .uku-fe__logo,
.uku-footer--editorial .uku-header__logo-dot { color: var(--fe-ink) !important; }
.uku-footer--editorial .uku-header__logo-dot { color: #c9a870 !important; }
.mh-svc__item h3, .mh-svc__item p, .mh-svc__icon { align-self: center !important; text-align: center; }

/* ---- Chargement des photos : teinte chaude au lieu du gris, dévoilement
   doux (flou → net, léger resserrement) ---- */
.uku-img-skeleton { background-color: #ece4d6 !important; }
.uku-img-skeleton::before { background-image: linear-gradient(90deg, rgba(255,255,240,0) 0%, rgba(255,255,240,.55) 20%, rgba(255,255,240,0) 40%, rgba(255,255,240,0) 100%) !important; }
.uku-img-skeleton img:first-of-type { transform: scale(1.04); filter: blur(10px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform 1.4s cubic-bezier(.2,.7,.2,1), filter .9s ease !important; }
.uku-img-skeleton.is-loaded img:first-of-type { transform: none; filter: none; }
.mh-img { opacity: 0; transform: scale(1.04); filter: blur(10px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform 1.4s cubic-bezier(.2,.7,.2,1), filter .9s ease; }
.mh-img.is-in { opacity: 1; transform: none; filter: none; }
.mh-col__img, .mh-look, .mh-story__img, .mh-bespoke__img { background-color: #ece4d6; }
@media (prefers-reduced-motion: reduce) {
	.mh-img, .uku-img-skeleton img:first-of-type { transform: none !important; filter: none !important; transition: opacity .3s !important; }
}

/* ---- Titres : dévoilement ligne par ligne au défilement (masque qui
   remonte), sobre et sans JavaScript ---- */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.mh-title, .meya-section__title, .mh-aw2__title {
			animation: mh-title-in linear both;
			animation-timeline: view();
			animation-range: entry 10% entry 70%;
		}
	}
}
@keyframes mh-title-in { from { clip-path: inset(0 0 100% 0); transform: translateY(24px); opacity: 0; } to { clip-path: inset(0 0 -10% 0); transform: none; opacity: 1; } }

/* ---- Transitions de page douces entre les pages du site (View
   Transitions entre documents, navigateurs récents ; ignoré ailleurs) ---- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: mh-vt-out .35s ease both; }
::view-transition-new(root) { animation: mh-vt-in .5s cubic-bezier(.2,.7,.2,1) both; }
@keyframes mh-vt-out { to { opacity: 0; } }
@keyframes mh-vt-in { from { opacity: 0; transform: translateY(12px); } }

/* ---- Italique doré utilisé avec parcimonie : dans les titres de section,
   l'italique reste mais à l'encre ---- */
.mh-title em { color: inherit; }

/* ---- Meilleures ventes / Tendances : une section, deux onglets-titres ---- */
.mh-duo__tabs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 28px; }
.mh-duo__tab { padding: 0; border: 0; background: none; cursor: pointer; font-family: "Cormorant Garamond", serif; font-size: clamp(32px, 4.6vw, 52px); font-weight: 500; line-height: 1.06; color: rgba(18,17,16,.28); transition: color .35s ease; }
.mh-duo__tab.is-active { color: #121110; }
.mh-duo__tab:hover { color: rgba(18,17,16,.6); }
.mh-duo__tab.is-active:hover { color: #121110; }
.mh-duo__panel[hidden] { display: none; }
.mh-duo__panel { animation: mh-vt-in .5s cubic-bezier(.2,.7,.2,1) both; }
.mh-duo .uku-pcarousel__track { scrollbar-width: thin; scrollbar-color: #121110 #e7e2d8; }
@media (min-width: 1024px) {
	.mh-duo .uku-pcarousel__track { gap: 12px; }
	.mh-duo .uku-pcarousel__track .uku-pcard { flex: 0 0 calc((100% - 36px) / 4) !important; max-width: none !important; }
}
.mh-duo .uku-pcard__media { aspect-ratio: 3 / 4; }
@media (max-width: 767px) { .mh-duo__tab { font-size: 30px; } }

/* =====================================================================
 * En-tête — disposition des maisons de luxe (2026-10-18) :
 * bande utilitaire fine (devise | message | langue), puis barre principale
 * menu à gauche · logo centré · icônes à droite, plus haute et aérée,
 * qui se resserre au défilement.
 * ===================================================================== */
.uku-utility-bar { background: #0f0e0d !important; border-bottom: 1px solid rgba(243,238,228,.08); }
.uku-utility-bar__trigger, .uku-utility-bar__lang-btn, .uku-utility-bar__link { font-size: 10px !important; letter-spacing: .16em !important; text-transform: uppercase; color: rgba(243,238,228,.6) !important; }
.uku-utility-bar__lang-btn.is-active, .uku-utility-bar__trigger:hover, .uku-utility-bar__lang-btn:hover { color: #f3eee4 !important; }
.uku-utility-bar__flag { display: none; }
@media (max-width: 767px) {
	.uku-utility-bar__links { display: none !important; }
	.uku-utility-bar__inner { padding: 4px 16px !important; }
}

@media (min-width: 1024px) {
	.uku-utility-bar__inner { min-height: 34px; padding: 0 clamp(24px, 3vw, 48px) !important; }
	.uku-header--tpl-split-band .uku-header__band--main { background: #0f0e0d !important; }
	.uku-header--tpl-split-band .uku-header__inner {
		display: grid !important;
		grid-template-columns: auto minmax(0, 1fr) auto;
		max-width: none !important;
		column-gap: 32px;
		align-items: center;
		min-height: 84px !important;
		padding: 0 clamp(24px, 3vw, 48px) !important;
		transition: min-height .35s cubic-bezier(.2,.7,.2,1);
	}
	.uku-header--tpl-split-band.is-scrolled .uku-header__inner { min-height: 64px !important; }
	.uku-header--tpl-split-band .uku-header__logo { order: 0; justify-self: start; font-size: 21px !important; letter-spacing: .26em !important; font-weight: 500 !important; white-space: nowrap; }
	.uku-header--tpl-split-band .uku-header__nav { order: 1; justify-self: center; justify-content: center !important; flex: none !important; }
	.uku-header--tpl-split-band .uku-header__icons--desktop { order: 2; justify-self: end; gap: 6px !important; }
	.uku-header--tpl-split-band .uku-header__nav ul { gap: 4px !important; }
	.uku-header--tpl-split-band .uku-header__nav a {
		padding: 10px 0 !important;
		margin: 0 15px;
		font-size: 10.5px !important;
		letter-spacing: .18em !important;
		text-transform: uppercase;
		color: rgba(243,238,228,.7) !important;
		transition: color .25s ease;
	}
	.uku-header--tpl-split-band .uku-header__nav a::after { left: 0 !important; right: 0 !important; bottom: 4px !important; background: #f3eee4 !important; }
	.uku-header--tpl-split-band .uku-header__nav a:hover,
	.uku-header--tpl-split-band .uku-header__nav .current-menu-item > a,
	.uku-header--tpl-split-band .uku-header__nav .current_page_item > a { color: #f3eee4 !important; }
	.uku-header--tpl-split-band .uku-header__icons--desktop > * { width: 42px !important; height: 42px !important; color: #f3eee4; }
	.uku-header--tpl-split-band .uku-header__icons--desktop svg { width: 20px; height: 20px; stroke-width: 1.3; }
	.uku-header--tpl-split-band .uku-header__icons--desktop > *:hover { background: rgba(243,238,228,.08) !important; }
}

/* =====================================================================
 * En-tête lumineux (2026-10-18) : crème avec texte encre partout ;
 * bande devise / langue sable clair ; mobile entièrement clair.
 * ===================================================================== */
.uku-utility-bar { background: #efe6d6 !important; border-bottom: 0 !important; }
.uku-utility-bar__trigger, .uku-utility-bar__lang-btn, .uku-utility-bar__link { color: rgba(18,17,16,.62) !important; }
.uku-utility-bar__lang-btn.is-active, .uku-utility-bar__trigger:hover, .uku-utility-bar__lang-btn:hover { color: #121110 !important; }
.uku-utility-bar__lang-sep { color: rgba(18,17,16,.25) !important; }
.uku-utility-bar__menu { background: #FFFFF0 !important; color: #121110 !important; box-shadow: 0 12px 30px rgba(18,17,16,.12); }

/* Mobile et tablette : en-tête crème, logo et icônes à l'encre. */
@media (max-width: 1023.98px) {
	.uku-header--tpl-split-band .uku-header__band--main { background: #FFFFF0 !important; border-bottom: 1px solid rgba(18,17,16,.07); }
	.uku-header--tpl-split-band .uku-header__logo { color: #121110 !important; }
	.uku-header--tpl-split-band .uku-header__band--sub { background: #FFFFF0 !important; border-bottom: 1px solid rgba(18,17,16,.07) !important; }
}

/* Ordinateur : crème, texte encre, sur toutes les pages (la version
   transparente sur le hero était illisible sur les photos qui défilent). */
@media (min-width: 1024px) {
	.uku-header--tpl-split-band .uku-header__band--main { background: rgba(255,255,240,.94) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(18,17,16,.07); transition: background .45s ease, border-color .45s ease; }
	.uku-header--tpl-split-band .uku-header__logo,
	.uku-header--tpl-split-band .uku-header__icons--desktop > * { color: #121110 !important; transition: color .45s ease; }
	.uku-header--tpl-split-band .uku-header__nav a { color: rgba(18,17,16,.62) !important; }
	.uku-header--tpl-split-band .uku-header__nav a:hover,
	.uku-header--tpl-split-band .uku-header__nav .current-menu-item > a,
	.uku-header--tpl-split-band .uku-header__nav .current_page_item > a { color: #121110 !important; }
	.uku-header--tpl-split-band .uku-header__nav a::after { background: #121110 !important; }
	.uku-header--tpl-split-band .uku-header__icons--desktop > *:hover { background: rgba(18,17,16,.06) !important; }

}
/* Le conteneur de l'en-tête portait le noir de header_builder.colors.bg :
   transparent, ce sont les bandes qui portent la couleur. */
.uku-header--tpl-split-band { background: transparent !important; }

/* =====================================================================
 * En-tête — contraste et lisibilité (référence : Farfetch / maisons de
 * luxe — noir pur sur fond clair, capitales ~12px, pas de traits trop
 * fins). Remplace les valeurs « estompées » précédentes.
 * ===================================================================== */
.uku-utility-bar__trigger, .uku-utility-bar__lang-btn, .uku-utility-bar__link { font-size: 10.5px !important; font-weight: 500 !important; color: rgba(18,17,16,.82) !important; }
.uku-utility-bar__lang-btn.is-active { color: #000 !important; font-weight: 600 !important; }
@media (min-width: 1024px) {
	.uku-header--tpl-split-band .uku-header__inner { min-height: 76px !important; }
	.uku-header--tpl-split-band.is-scrolled .uku-header__inner { min-height: 62px !important; }
	.uku-header--tpl-split-band .uku-header__band--main { background: rgba(255,255,240,.97) !important; border-bottom: 1px solid rgba(0,0,0,.09); }
	.uku-header--tpl-split-band .uku-header__logo { color: #000 !important; font-weight: 600 !important; }
	.uku-header--tpl-split-band .uku-header__nav a {
		margin: 0 16px;
		font-size: 12px !important;
		font-weight: 500 !important;
		letter-spacing: .12em !important;
		color: #000 !important;
	}
	.uku-header--tpl-split-band .uku-header__nav a::after { height: 1.5px !important; bottom: 3px !important; background: #000 !important; }
	.uku-header--tpl-split-band .uku-header__icons--desktop > * { color: #000 !important; }
	.uku-header--tpl-split-band .uku-header__icons--desktop svg { width: 22px !important; height: 22px !important; stroke-width: 1.6 !important; }
}
/* Mobile : icônes et menu noir pur, trait 1.6. */
@media (max-width: 1023.98px) {
	.uku-header--tpl-split-band .uku-header__logo { color: #000 !important; font-weight: 600 !important; }
	.uku-header--tpl-split-band .uku-header__icons--mobile > *,
	.uku-header--tpl-split-band .uku-header__burger { color: #000 !important; }
	.uku-header--tpl-split-band .uku-header__icons--mobile svg,
	.uku-header--tpl-split-band .uku-header__burger svg { stroke-width: 1.6 !important; }
}
/* Pastille du panier : noir sur crème plutôt qu'or (plus net, plus « maison »). */
.uku-header .uku-header__cart-count { background: #000 !important; color: #FFFFF0 !important; }

/* ---- Bande défilante épurée ---- */
.mh-mq { overflow: hidden; background: #FFFFF0; border-top: 1px solid rgba(0,0,0,.08); border-bottom: 1px solid rgba(0,0,0,.08); }
.mh-mq__track { display: flex; width: max-content; animation: mh-mq 70s linear infinite; }
.mh-mq:hover .mh-mq__track { animation-play-state: paused; }
.mh-mq__group { display: flex; align-items: center; flex-shrink: 0; }
.mh-mq__item { padding: 13px 0; font-size: 10.5px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; white-space: nowrap; color: #000; }
.mh-mq__sep { display: inline-block; width: 28px; height: 1px; margin: 0 28px; background: rgba(0,0,0,.35); }
@keyframes mh-mq { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .mh-mq__track { animation: none; } }

/* ---- En-tête toujours visible (collant), sans se cacher au défilement ---- */
.uku-header--tpl-split-band.is-hidden { transform: none !important; }

/* =====================================================================
 * Audit visuel (2026-10-18) — « less, but better » : moins d'éléments,
 * hiérarchie nette, règle typographique stricte.
 *   Serif (Cormorant)  → titres éditoriaux uniquement
 *   Sans (Inter)       → interface et textes
 *   Capitales espacées → petites étiquettes uniquement
 * ===================================================================== */

/* ---- Phrase de marque après le hero ---- */
.mh-statement { max-width: 980px; margin: 0 auto; padding: clamp(72px, 11vw, 160px) clamp(20px, 4vw, 40px) clamp(24px, 4vw, 40px); text-align: center; }
.mh-statement .mh-eyebrow { color: rgba(0,0,0,.55); margin-bottom: 28px; }
.mh-statement__text { margin: 0 0 32px; font-family: "Cormorant Garamond", serif; font-weight: 500; font-size: clamp(30px, 4.2vw, 56px); line-height: 1.16; letter-spacing: -.005em; color: #000; text-wrap: balance; }
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.mh-statement__text { animation: mh-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
	}
}

/* ---- Hero : bloc éditorial ancré, un seul appel à l'action ---- */
.uku-hero--carousel .uku-hero__eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: "Inter", sans-serif; letter-spacing: .26em !important; }
.uku-hero--carousel .uku-hero__eyebrow::before { content: ""; width: 32px; height: 1px; background: currentColor; opacity: .8; }
.uku-hero--carousel .uku-hero__subtitle { max-width: 32ch; }
/* Bouton → lien souligné, plus éditorial qu'un bouton blanc posé sur la photo. */
.uku-hero--carousel .uku-hero__cta { padding: 0 0 6px !important; border: 0 !important; border-bottom: 1px solid currentColor !important; border-radius: 0 !important; background: none !important; color: #FFFFF0 !important; font-size: 11px !important; letter-spacing: .22em !important; }
.uku-hero--carousel .uku-hero__cta:hover { opacity: .75; }
@media (min-width: 768px) {
	.uku-hero--carousel { --uku-hero-title-size-desktop: clamp(64px, 7.2vw, 112px); }
	.uku-hero--carousel .uku-hero__scrim { background: linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 50%), linear-gradient(to right, rgba(0,0,0,.5) 0%, rgba(0,0,0,.12) 42%, rgba(0,0,0,0) 62%) !important; }
	.uku-hero--carousel .uku-hero__title { margin-bottom: 18px !important; }
}

/* ---- WhatsApp : rond encre discret au lieu du vert vif ---- */
.uku-whatsapp { width: 48px !important; height: 48px !important; background: #000 !important; color: #FFFFF0 !important; box-shadow: 0 8px 24px rgba(0,0,0,.18) !important; transition: transform .25s ease, background .25s ease; }
.uku-whatsapp:hover { transform: translateY(-2px); }
.uku-whatsapp svg { width: 22px !important; height: 22px !important; }

/* ---- Règle typographique : étiquettes en capitales Inter, pas en serif ---- */
.mh-aw2__chip,
.mh-bespoke__img figcaption { font-family: "Inter", sans-serif !important; font-style: normal !important; font-size: 10.5px !important; font-weight: 500 !important; letter-spacing: .16em !important; text-transform: uppercase; }
.mh-bespoke__img figcaption i { font-style: normal; color: inherit; }
@media (max-width: 767px) { .mh-aw2__chip { font-size: 9.5px !important; } }
/* Étiquettes : même gris partout (plus de mélange or / gris selon les sections). */
.mh-eyebrow { color: rgba(0,0,0,.55) !important; }
.mh-mani .mh-eyebrow, .mh-story .mh-eyebrow { color: rgba(255,255,240,.6) !important; }
/* Pastille panier de la barre d'onglets : crème sur la pilule sombre. */
.uku-tabbar .uku-tabbar__badge { background: #FFFFF0 !important; color: #000 !important; box-shadow: none !important; }

/* =====================================================================
 * Hero — textes de production, sans voile (2026-10-18). Le voile sombre
 * est retiré ; la lisibilité vient de l'emplacement choisi photo par
 * photo (Design → Hero → Diapositives : position, alignement, couleur du
 * titre) et d'une ombre de texte très douce sur le texte clair.
 * ===================================================================== */
.uku-hero--carousel .uku-hero__scrim { display: none !important; }
.uku-hero--carousel .uku-hero__title,
.uku-hero--carousel .uku-hero__eyebrow,
.uku-hero--carousel .uku-hero__subtitle { text-shadow: 0 1px 28px rgba(0,0,0,.28); }
/* Texte encre (diapositives claires) : pas d'ombre. */
.uku-hero--carousel .uku-hero__overlay-inner[style*="#121110"] .uku-hero__title,
.uku-hero--carousel .uku-hero__overlay-inner[style*="#121110"] .uku-hero__eyebrow,
.uku-hero--carousel .uku-hero__overlay-inner[style*="#121110"] .uku-hero__subtitle { text-shadow: none; }
@media (min-width: 768px) {
	.uku-hero--carousel .uku-hero__overlay { padding-top: clamp(40px, 7vh, 88px) !important; }
	.uku-hero--carousel .uku-hero__subtitle { font-size: 15px; font-weight: 400; }
}
/* Teranga (4e diapositive, trois silhouettes sur fond clair) : le texte se
   loge dans le mur libre entre la 1re et la 2e silhouette (≈ 24–42 % de la
   largeur), en haut, à l'encre — sans recouvrir personne. */
@media (min-width: 1024px) {
	.uku-hero--carousel .uku-hero__slide:nth-child(4) .uku-hero__overlay { padding-left: 23vw !important; padding-top: 18vh !important; }
	.uku-hero--carousel .uku-hero__slide:nth-child(4) .uku-hero__overlay-inner { max-width: 19vw !important; }
	.uku-hero--carousel .uku-hero__slide:nth-child(4) .uku-hero__title { font-size: clamp(42px, 4.3vw, 70px) !important; }
}

/* Pas de trait décoratif devant les sur-titres du hero. */
.uku-hero--carousel .uku-hero__eyebrow::before { display: none !important; content: none !important; }

/* Essai (mobile / tablette) : bande du logo en noir, logo en blanc ;
   la bande des icônes reste crème. */
@media (max-width: 1023.98px) {
	.uku-header--tpl-split-band .uku-header__band--main { background: #000 !important; border-bottom: 0 !important; }
	.uku-header--tpl-split-band .uku-header__band--main .uku-header__logo { color: #FFFFF0 !important; }
}

/* Mobile : la bande devise / langue est masquée — ces préférences, peu
   utilisées, passent en bas du menu ☰ (comme Zara, Farfetch) ; l'en-tête
   garde deux bandes seulement (logo, puis menu et icônes). */
@media (max-width: 767.98px) {
	.uku-utility-bar { display: none !important; }
}
/* Langue dans le menu ☰ (fond sombre) : texte clair, pas l'encre de la bande. */
.uku-offcanvas .uku-offcanvas__lang .uku-utility-bar__lang-btn { color: #FFFFF0 !important; font-size: 12px !important; }
.uku-offcanvas .uku-offcanvas__lang .uku-utility-bar__lang-sep { color: rgba(255,255,240,.35) !important; }

/* =====================================================================
 * Hero — même texte sur mobile et ordinateur (sur-titre + titre, sans
 * accroche), toujours posé sur la photo (2026-10-19).
 * ===================================================================== */
.uku-hero--carousel .uku-hero__subtitle { display: none !important; }


/* Hero mobile : texte sur la photo, emplacement et taille choisis photo
   par photo (diapositive 1 sans texte).
   2 · Ubuntu      → en haut à droite, sur le mur ocre, crème
   3 · Meet AFRICA → en bas à gauche, sur le sable clair, encre
   4 · Teranga     → en bas au centre, sur le bas clair de la robe, encre */
@media (max-width: 767px) {
	.uku-hero--carousel { --uku-hero-title-size-mobile: 40px; }
	.uku-hero--carousel .uku-hero__title { margin-bottom: 0 !important; line-height: 1 !important; }
	.uku-hero--carousel .uku-hero__eyebrow { font-size: 10px !important; margin-bottom: 8px !important; }
	.uku-hero--carousel .uku-hero__overlay { padding: 28px 22px 46px !important; }
	.uku-hero--carousel .uku-hero__slide:nth-child(2) .uku-hero__overlay { align-items: flex-start !important; justify-content: flex-end !important; }
	.uku-hero--carousel .uku-hero__slide:nth-child(2) .uku-hero__overlay-inner { text-align: right !important; }
	.uku-hero--carousel .uku-hero__slide:nth-child(3) .uku-hero__overlay { align-items: flex-end !important; justify-content: flex-start !important; }
	.uku-hero--carousel .uku-hero__slide:nth-child(3) .uku-hero__overlay-inner { text-align: left !important; max-width: 46vw !important; }
	.uku-hero--carousel .uku-hero__slide:nth-child(3) .uku-hero__title { font-size: 33px !important; }
	.uku-hero--carousel .uku-hero__slide:nth-child(3) .uku-hero__overlay { padding-left: 18px !important; }
	.uku-hero--carousel .uku-hero__slide:nth-child(4) .uku-hero__overlay { align-items: flex-end !important; justify-content: center !important; }
	.uku-hero--carousel .uku-hero__slide:nth-child(4) .uku-hero__overlay-inner { text-align: center !important; }
}

/* ---- Checkout : feuille crème du site, champs et cartes blancs, points
   d'étape franchis en or — comme le checkout Meya en production. ---- */
.uku-checkout-modal,
.uku-checkout-page { --co-bg: #FFFFF0; --co-soft: #f5f2e8; --co-line: #e7e2d4; }
.uku-order-confirm { --co-bg: #FFFFF0; --co-panel: #f5f1e2; --co-line: #e8e2cf; }
.uku-order-confirm .uku-order-confirm__cta { border-radius: 999px !important; }

/* « La Maison » (ordinateur) : la photo remplit toute sa colonne. En format
   naturel (contain) dans une colonne plus haute qu'elle, le fond beige de
   chargement des images apparaissait en bandes autour. Fond sombre assorti
   au panneau de texte tant que l'image n'est pas chargée. */
.mh-story__img { background-color: #121110 !important; }
@media (min-width: 900px) {
	.mh-story__img { position: relative; display: block; min-height: 100%; }
	.mh-story__img img { position: absolute !important; inset: 0; height: 100% !important; object-fit: cover; object-position: center; }
}

/* ---- « Votre pièce, à votre taille » : étapes à icônes ----
   Pastilles dorées au trait fin reliées par un fil, numéro discret,
   étiquette « Livré partout dans le monde » sur la photo, flèche sur le
   bouton, icône WhatsApp sur le lien d'aide. */
.mh-bespoke__chip { position: absolute; top: 22px; right: 22px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,240,.9); box-shadow: 0 4px 16px rgba(18,17,16,.12); font-size: 12px; font-weight: 500; letter-spacing: .02em; color: #121110; }
.mh-bespoke__chip svg { width: 15px; height: 15px; fill: none; stroke: #94631c; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 899px) { .mh-bespoke__chip { top: auto; bottom: 70px; right: 50%; transform: translateX(50%); } }
.mh-bespoke__steps { padding: 0 !important; gap: 4px !important; }
.mh-bespoke__steps::before { left: 23px !important; top: 30px !important; bottom: 30px !important; width: 1px; background: linear-gradient(#E09F3D, rgba(224,159,61,.2)) !important; }
.mh-bespoke__steps li { display: grid !important; grid-template-columns: 48px 1fr; grid-template-rows: auto auto; column-gap: 18px; align-items: center; padding: 12px 0 !important; }
.mh-bespoke__steps li::before { display: none !important; }
.mh-bespoke__ico { grid-row: 1 / span 2; position: relative; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #FFFFF0; border: 1px solid rgba(224,159,61,.55); box-shadow: 0 2px 10px rgba(148,99,28,.10); transition: transform .3s cubic-bezier(.34,1.36,.64,1), background-color .3s, border-color .3s; }
.mh-bespoke__ico svg { width: 22px; height: 22px; fill: none; stroke: #94631c; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.mh-bespoke__steps li:hover .mh-bespoke__ico { transform: scale(1.06); background: #fbf3e2; border-color: #E09F3D; }
.mh-bespoke__num { grid-column: 2; display: none; }
.mh-bespoke__steps strong { grid-column: 2; display: flex !important; align-items: baseline; gap: 10px; font-size: 26px !important; }
.mh-bespoke__steps strong::before { content: attr(data-n); }
.mh-bespoke__steps span { grid-column: 2; margin-top: 2px !important; }
.mh-bespoke__steps li:nth-child(1) strong::after,
.mh-bespoke__steps li:nth-child(2) strong::after,
.mh-bespoke__steps li:nth-child(3) strong::after { order: -1; font-family: "Inter", sans-serif; font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: .14em; color: #94631c; }
.mh-bespoke__steps li:nth-child(1) strong::after { content: "01"; }
.mh-bespoke__steps li:nth-child(2) strong::after { content: "02"; }
.mh-bespoke__steps li:nth-child(3) strong::after { content: "03"; }
.mh-bespoke .mh-btn--dark { display: inline-flex; align-items: center; gap: 12px; }
.mh-bespoke__arrow { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s cubic-bezier(.22,1,.36,1); }
.mh-bespoke .mh-btn--dark:hover .mh-bespoke__arrow { transform: translateX(4px); }
.mh-bespoke__help { display: inline-flex; align-items: center; gap: 8px; }
.mh-bespoke__help svg { width: 18px; height: 18px; fill: none; stroke: #1a9e57; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* L'arche coupe le haut de la photo : étiquette juste au-dessus de la
   légende « Standard ou sur-mesure », centrée. */
.mh-bespoke__chip { top: auto !important; bottom: 72px !important; right: auto !important; left: 50% !important; transform: translateX(-50%) !important; white-space: nowrap; }
.mh-bespoke__steps strong::before { content: none; }
.mh-bespoke .mh-btn--dark { justify-content: center; }

/* Étapes : icônes PLEINES claires sur pastille encre, sans numéros ni
   doré (retour utilisateur) ; fil de liaison gris neutre. */
.mh-bespoke__steps::before { background: rgba(18,17,16,.14) !important; }
.mh-bespoke__ico { background: #121110 !important; border: 0 !important; box-shadow: 0 6px 16px rgba(18,17,16,.18) !important; }
.mh-bespoke__ico svg { width: 22px !important; height: 22px !important; fill: #FFFFF0 !important; stroke: none !important; }
.mh-bespoke__ico svg .cut { fill: none; stroke: #121110; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mh-bespoke__ico svg path:not(.cut), .mh-bespoke__ico svg rect { fill: #FFFFF0; }
.mh-bespoke__steps li:hover .mh-bespoke__ico { background: #2a2724 !important; }
.mh-bespoke__steps li strong::after { content: none !important; }
.mh-bespoke__chip svg { stroke: #121110 !important; }
.mh-bespoke__ico svg .handle { fill: none !important; stroke: #FFFFF0; stroke-width: 1.8; stroke-linecap: round; }
.mh-bespoke__ico svg { width: 24px !important; height: 24px !important; }

/* ---- « Votre pièce, à votre taille » — version épurée ----
   Photo seule (sans étiquettes) ; étapes en liste à filets fins, titre
   sans-serif gras, description sobre ; icône pleine sur pastille encre ;
   rythme vertical régulier (grille de 8px). L'italique serif reste réservé
   au grand titre. */
.mh-bespoke { align-items: center !important; }
.mh-bespoke .mh-eyebrow { margin-bottom: 16px; }
.mh-bespoke .mh-title { margin-bottom: 20px !important; }
.mh-bespoke__body { max-width: 460px; margin: 0 0 40px !important; font-size: 16px !important; line-height: 1.7 !important; color: #55514a !important; }
.mh-bespoke__steps { max-width: 480px; margin: 0 0 40px !important; gap: 0 !important; }
.mh-bespoke__steps::before { display: none !important; }
.mh-bespoke__steps li { grid-template-columns: 44px 1fr !important; column-gap: 20px !important; padding: 20px 0 !important; border-top: 1px solid rgba(18,17,16,.1) !important; }
.mh-bespoke__steps li:last-child { border-bottom: 1px solid rgba(18,17,16,.1) !important; }
.mh-bespoke__ico { width: 44px !important; height: 44px !important; box-shadow: none !important; }
.mh-bespoke__ico svg { width: 20px !important; height: 20px !important; }
.mh-bespoke__steps li:hover .mh-bespoke__ico { transform: none; }
.mh-bespoke__steps strong { font-family: "Inter", var(--uku-font-body), sans-serif !important; font-style: normal !important; font-size: 16px !important; font-weight: 600 !important; letter-spacing: 0 !important; line-height: 1.3 !important; }
.mh-bespoke__steps span { margin-top: 4px !important; font-size: 14px !important; line-height: 1.55; color: #6b665c !important; }
.mh-bespoke__ctas { gap: 16px 28px !important; }
.mh-bespoke__help { font-size: 14px !important; }
@media (max-width: 899px) {
	.mh-bespoke__body { margin-bottom: 32px !important; }
	.mh-bespoke__steps { margin-bottom: 32px !important; }
	.mh-bespoke__steps li { padding: 16px 0 !important; }
}
.mh-bespoke__steps li { align-items: start !important; align-content: center; row-gap: 2px; } .mh-bespoke__ico { align-self: center; }

/* ---- Photo en duo superposé (lookbook) ----
   Capsule verticale (photo principale) + détail recadré qui la chevauche
   en bas à droite, liseré crème et ombre douce. Le cadre ne découpe plus :
   chaque photo porte sa propre forme. */
.mh-bespoke__img { aspect-ratio: auto !important; border-radius: 0 !important; overflow: visible !important; background: none !important; min-height: 0 !important; padding: 0 0 12% 0; }
.mh-bespoke__img > img { display: none; }
.mh-bespoke__main { position: relative; display: block; width: 78%; aspect-ratio: 3 / 4.2; border-radius: 999px; overflow: hidden; background: #ece4d6; }
.mh-bespoke__main img, .mh-bespoke__detail img { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; }
.mh-bespoke__main img { object-position: center 22%; }
.mh-bespoke__detail { position: absolute; right: 0; bottom: 0; display: block; width: 46%; aspect-ratio: 4 / 5; border-radius: 20px; overflow: hidden; background: #ece4d6; border: 8px solid #FFFFF0; box-shadow: 0 18px 40px rgba(18,17,16,.16); }
.mh-bespoke__detail img { object-position: 50% 42%; transform: scale(1.9); transform-origin: 50% 42%; }
@media (max-width: 899px) {
	.mh-bespoke__img { padding-bottom: 16%; }
	.mh-bespoke__main { width: 80%; }
	.mh-bespoke__detail { width: 48%; border-width: 6px; border-radius: 16px; }
}
@media (prefers-reduced-motion: no-preference) {
	.mh-bespoke__detail { transition: transform .6s cubic-bezier(.22,1,.36,1); }
	.mh-bespoke__img:hover .mh-bespoke__detail { transform: translateY(-6px); }
}
/* Recadrage du détail par taille/position (l'apparition des images remet
   transform: none, ce qui annulait un zoom par scale()). */
.mh-bespoke__detail img { transform: none !important; inset: auto !important; width: 190% !important; height: 190% !important; left: -45% !important; top: -38% !important; }
.mh-bespoke__detail img { left: -12% !important; top: -34% !important; object-position: 30% 40% !important; }
/* Titre épuré : un seul style (serif droit, sans italique ni retour à la
   ligne forcé), corps mesuré, interlignage serré. */
.mh-bespoke .mh-title { max-width: 520px; font-size: clamp(34px, 3.6vw, 48px) !important; font-weight: 400 !important; font-style: normal !important; line-height: 1.1 !important; letter-spacing: -.01em !important; }
@media (max-width: 899px) { .mh-bespoke .mh-title { font-size: 30px !important; } }
/* « La mode pour toutes les femmes » : titre épuré (même traitement que
   « Votre pièce, à votre taille » — serif droit, un seul style, corps
   mesuré, sans italique doré ni retours à la ligne forcés). */
.mh-aw2__title { max-width: 520px; font-size: clamp(34px, 3.6vw, 48px) !important; font-weight: 400 !important; line-height: 1.1 !important; letter-spacing: -.01em !important; }
@media (max-width: 899px) { .mh-aw2__title { font-size: 30px !important; } }
.mh-aw2__title, .mh-bespoke .mh-title { text-wrap: balance; }

/* =====================================================================
 * Accueil — système de mise en page (structure, rythme, séparations)
 * - Rythme unique : 112px entre sections (ordinateur), 72px (mobile).
 * - Séparation par bandes de fond pleine largeur, en alternance :
 *   crème (#FFFFF0) / sable (#f5f1e2) / encre (manifeste) ; filet fin
 *   entre deux sections crème consécutives.
 * - En-têtes homogènes : sur-titre 12px capitales espacées, titre serif
 *   34–48px droit, « Tout voir → » aligné à droite.
 * - Réassurance sous le hero : bande sable, 3 engagements en ligne, icône
 *   sur pastille encre, filets verticaux.
 * Bandes pleine largeur sans casser le conteneur : box-shadow étendu +
 * clip-path (aucun débordement horizontal).
 * ===================================================================== */
:root { --mh-gap: clamp(72px, 9vw, 112px); --mh-band: #f5f1e2; --mh-hair: rgba(18,17,16,.1); }
.mh-section, .uku-featured, .mh-story, .mh-bespoke, .mh-aw2 { margin-top: 0 !important; margin-bottom: 0 !important; padding-top: var(--mh-gap) !important; padding-bottom: var(--mh-gap) !important; }
.mh-mf { margin-top: 0 !important; }

/* Bandes sable : looks, « La mode pour toutes les femmes », réassurance. */
.mh-section:has(.mh-looks__track), .mh-aw2, .mh-svc { position: relative; background: var(--mh-band) !important; box-shadow: 0 0 0 100vmax var(--mh-band); clip-path: inset(0 -100vmax); }
/* Filets fins entre deux sections crème consécutives. */
.mh-section:has(.mh-col__track), .mh-story, .mh-section:has(.mh-duo__panel) { border-top: 1px solid var(--mh-hair); }

/* En-têtes homogènes */
.mh-head { margin-bottom: clamp(32px, 4vw, 48px) !important; }
.mh-head .mh-eyebrow, .uku-featured__eyebrow, .mh-bespoke .mh-eyebrow, .mh-story .mh-eyebrow { margin: 0 0 12px !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: .22em !important; text-transform: uppercase; color: #6b665c !important; }
.mh-story .mh-eyebrow { color: rgba(243,238,228,.7) !important; }
.mh-head .mh-title, .uku-featured__title { margin: 0 !important; font-family: "Cormorant Garamond", serif !important; font-size: clamp(34px, 3.6vw, 48px) !important; font-weight: 400 !important; line-height: 1.1 !important; letter-spacing: -.01em; text-wrap: balance; }
.mh-head .mh-title em { font-style: normal; color: inherit; }
.uku-featured__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(32px, 4vw, 48px) !important; text-align: left !important; }
.mh-link { display: inline-flex; align-items: center; gap: 10px; padding-bottom: 4px; border-bottom: 1px solid currentColor; font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: #121110; text-decoration: none; white-space: nowrap; }
.mh-link::after { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .25s cubic-bezier(.22,1,.36,1); }
.mh-link:hover::after { transform: translateX(3px); }


/* ---- Réassurance sous le hero ---- */
.mh-svc { max-width: none !important; padding: 28px clamp(16px, 3vw, 40px) !important; }
.mh-svc__grid { max-width: 1280px !important; margin: 0 auto; grid-template-columns: repeat(3, 1fr) !important; gap: 0 !important; }
.mh-svc__item { display: grid !important; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 16px; align-items: center; padding: 8px clamp(16px, 3vw, 40px) !important; border-radius: 0 !important; background: none !important; text-align: left !important; }
.mh-svc__item + .mh-svc__item { border-left: 1px solid var(--mh-hair); }
.mh-svc__icon { grid-row: 1 / span 2; width: 44px !important; height: 44px !important; margin: 0 !important; background: #121110 !important; }
.mh-svc__icon svg { width: 20px !important; height: 20px !important; stroke: #FFFFF0 !important; stroke-width: 1.6 !important; }
.mh-svc__item h3 { margin: 0 0 2px !important; align-self: end; font-family: "Inter", sans-serif !important; font-size: 15px !important; font-style: normal !important; font-weight: 600 !important; color: #121110; }
.mh-svc__item p { grid-column: 2; margin: 0 !important; font-size: 13px !important; line-height: 1.5 !important; color: #6b665c !important; }
.mh-svc__pay { display: none !important; }
@media (max-width: 899px) {
	.mh-svc { padding: 8px 16px !important; }
	.mh-svc__grid { grid-template-columns: 1fr !important; }
	.mh-svc__item { padding: 16px 4px !important; }
	.mh-svc__item + .mh-svc__item { border-left: 0; border-top: 1px solid var(--mh-hair); }
	.uku-featured__head { flex-direction: column; align-items: flex-start; }
}
.mh-svc__item h3, .mh-svc__item p { text-align: left !important; align-self: auto; }
.mh-svc__item h3 { align-self: end !important; }

/* Libellés « Toutes les collections / Toutes les rubriques » : police de
   la production (Cormorant Garamond grasse, capitales, noir, centré) —
   600, graisse la plus forte chargée (800 en production = faux gras). */
.uku-featured .uku-cfg-classic__heading { font-family: "Cormorant Garamond", serif !important; font-size: 20px !important; font-weight: 600 !important; letter-spacing: .04em !important; color: #000 !important; text-align: center; white-space: normal; }
@media (max-width: 767px) { .uku-featured .uku-cfg-classic__heading { font-size: 16px !important; } }

/* =====================================================================
 * Manifeste [meya_manifesto] — fidèle à la production (Elementor
 * 4a375808 / 2ecf4ddc / 3b66b75), affiné.
 * Fond #121212 ; rangée = photo ~55 % + texte centré, en alternance ;
 * photos noir et blanc permanentes ; formes : rectangle / pilule
 * horizontale / ovale vertical ; amorce Cormorant grasse capitales, mot
 * Inter 900 capitales. Seulement l'amorce et le mot.
 * ===================================================================== */
.mh-mf { margin: 0 !important; padding: clamp(32px, 4vw, 56px) 0; background: #121212; color: #fff; }
.mh-mf__row { display: grid; grid-template-columns: 55fr 45fr; align-items: center; gap: clamp(24px, 4vw, 64px); max-width: 1280px; margin: 0 auto; padding: clamp(56px, 7vw, 100px) clamp(20px, 4vw, 56px); }
.mh-mf__row--rev { grid-template-columns: 45fr 55fr; }
.mh-mf__row--rev .mh-mf__img { order: 2; }
.mh-mf__img { position: relative; margin: 0; overflow: hidden; background: #1b1b1b; }
.mh-mf__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.04); }
.mh-mf__img--rect { aspect-ratio: 4 / 5; }
.mh-mf__img--pill { aspect-ratio: 16 / 10; border-radius: 999px; }
.mh-mf__img--pill img { object-position: center 30%; }
.mh-mf__img--oval { aspect-ratio: 3 / 4; width: min(440px, 34vw); justify-self: center; border-radius: 50%; }
.mh-mf__img--oval img { object-position: center 20%; }
.mh-mf__txt { text-align: center; }
.mh-mf__lead { margin: 0 0 6px; font-family: "Cormorant Garamond", serif; font-size: clamp(18px, 1.8vw, 26px); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #fff; }
.mh-mf__word { margin: 0; font-family: "Inter", sans-serif; font-size: clamp(52px, 7vw, 112px); font-weight: 900; line-height: .95; letter-spacing: .02em; text-transform: uppercase; color: #fff; }
@media (prefers-reduced-motion: no-preference) {
	.mh-mf__img { opacity: 0; transform: scale(.94); transition: opacity 1s ease, transform 1.4s cubic-bezier(.22,1,.36,1); }
	.mh-mf__lead { opacity: 0; transition: opacity 1s ease .2s; }
	.mh-mf__word { opacity: 0; transform: translateX(48px); transition: opacity 1s ease .3s, transform 1.2s cubic-bezier(.22,1,.36,1) .3s; }
	.mh-mf__row.is-in :is(.mh-mf__img, .mh-mf__lead, .mh-mf__word) { opacity: 1; transform: none; }
}
@media (max-width: 899px) {
	.mh-mf { padding: 8px 0; }
	.mh-mf__row, .mh-mf__row--rev { grid-template-columns: 1fr; gap: 24px; padding: 48px 20px; }
	.mh-mf__row--rev .mh-mf__img { order: 0; }
	/* Largeurs en vw, jamais en % : un % + aspect-ratio dans une grille
	   sous-estime la hauteur au calcul intrinsèque — le conteneur Elementor
	   était ~127px trop court et la section suivante chevauchait « VOUS ». */
	.mh-mf__img { width: min(340px, 78vw); justify-self: center; }
	.mh-mf__img--oval { width: min(280px, 64vw); }
	.mh-mf__lead { font-size: 16px; }
	.mh-mf__word { font-size: clamp(44px, 13vw, 60px); }
}

/* Noir et blanc → couleur : la photo se colore en traversant le centre de
   l'écran (.is-lit, IntersectionObserver), puis repasse en noir et blanc. */
.mh-mf__img img { transition: filter 1.2s ease; }
.mh-mf__img.is-lit img { filter: grayscale(0) contrast(1); }

/* Écrans tactiles : pas d'état de survol « collé » après un appui (bouton
   noir qui devenait transparent, bouton blanc du hero qui disparaissait). */
@media (hover: none) {
	.mh-btn--dark:hover { background: var(--mh-ink); color: #fff; }
	.mh-btn--ghost:hover { background: transparent; color: var(--mh-ink); }
	.mh-story .mh-btn--light:hover { background: #fff; color: var(--mh-ink); }
	.uku-hero--carousel .uku-hero__cta:hover { background: #fff; color: #121110; }
	.uku-hero--carousel .uku-hero__cta--secondary:hover { background: transparent; color: #fff; }
}