/*
Theme Name: Dar Dmana Decor
Theme URI: https://dardmanadecor.ma
Author: Dar Dmana Decor
Description: Menuiserie artisanale — salons marocains traditionnels et modernes, chambres à coucher sur mesure. Casablanca, Maroc.
Version: 1.1.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: dar-dmana-decor
*/

/* ==========================================================================
   Design tokens — palette lifted from the original Netlify one-pager
   ========================================================================== */
:root {
	--color-ink: #1A1410;
	--color-ink-soft: #3D2B1F;
	--color-charcoal: #4A3728;
	--color-charcoal-soft: #5C4033;
	--color-gold: #C8A45C;
	--color-gold-light: #E8D5A3;
	--color-gold-deep: #9A7B3A;
	--color-gold-rgb: 200, 164, 92;
	--color-ink-rgb: 26, 20, 16;
	--color-cream: #F5F0E8;
	--color-cream-dim: #E8DFD0;
	--color-white: #FFFDF8;
	--color-text-muted: #5C4033;
	--color-border-light: #E8DFD0;

	--font-heading-fr: "Cormorant Garamond", "Georgia", serif;
	--font-body-fr: "Outfit", "Segoe UI", sans-serif;
	--font-heading-ar: "Amiri", "Traditional Arabic", serif;
	--font-body-ar: "Tajawal", "Segoe UI", sans-serif;

	--space-xs: 0.5rem;
	--space-sm: 1rem;
	--space-md: 2rem;
	--space-lg: 4rem;
	--space-xl: 6.25rem;

	--radius-sm: 4px;
	--container-max: 1200px;
	--ease-lux: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--color-white);
	color: var(--color-ink);
	font-family: var(--font-body-fr);
	font-size: 16px;
	font-weight: 300;
	line-height: 1.8;
	-webkit-font-smoothing: antialiased;
}
html[lang^="ar"] body { font-family: var(--font-body-ar); font-weight: 400; }

::selection { background: var(--color-gold); color: var(--color-white); }

img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-gold-deep); text-decoration: none; transition: color 0.3s; }
a:hover { color: var(--color-gold); }

h1, h2, h3, h4 { font-family: var(--font-heading-fr); color: var(--color-ink-soft); line-height: 1.15; margin: 0 0 var(--space-sm); font-weight: 300; }
html[lang^="ar"] h1, html[lang^="ar"] h2, html[lang^="ar"] h3, html[lang^="ar"] h4 { font-family: var(--font-heading-ar); font-weight: 700; }

.section-head h1, .section-head h2 { font-size: clamp(2rem, 4vw, 3.5rem); }

.container { max-width: var(--container-max); margin-inline: auto; padding-inline: 40px; }

.eyebrow {
	font-family: var(--font-body-fr);
	color: var(--color-gold);
	font-size: 0.72rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.35em;
	display: inline-flex;
	align-items: center;
	gap: 1em;
	margin-bottom: var(--space-xs);
}
.eyebrow::before { content: ""; display: inline-block; width: 50px; height: 1px; background: var(--color-gold); }
.section-head .eyebrow::before { display: none; }
html[lang^="ar"] .eyebrow { font-family: var(--font-body-ar); font-size: 0.85rem; letter-spacing: 0.15em; }

.accent-gold { font-style: italic; color: var(--color-gold); }

.btn {
	display: inline-block;
	font-family: var(--font-body-fr);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 2px;
	text-transform: uppercase;
	background: var(--color-gold);
	color: var(--color-ink-soft);
	border: 1px solid var(--color-gold);
	border-radius: 0;
	padding: 16px 40px;
	cursor: pointer;
	transition: all 0.4s var(--ease-lux);
}
html[lang^="ar"] .btn { font-family: var(--font-body-ar); letter-spacing: 0.5px; font-weight: 500; }
.btn:hover { background: var(--color-gold-light); border-color: var(--color-gold-light); color: var(--color-ink-soft); transform: translateY(-2px); box-shadow: 0 8px 30px rgba(var(--color-gold-rgb), 0.3); }
.btn-outline {
	background: transparent;
	color: var(--color-gold);
	border-color: var(--color-gold);
}
.btn-outline:hover { background: var(--color-gold); border-color: var(--color-gold); color: var(--color-ink-soft); box-shadow: none; }

/* ==========================================================================
   Star motif (echoes the logo's khatam / 8-pointed star)
   ========================================================================== */
.star-divider {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);
	margin: 20px 0;
	color: var(--color-gold);
}
.star-divider::before, .star-divider::after {
	content: "";
	height: 1px;
	flex: 1;
	max-width: 60px;
	background: linear-gradient(90deg, transparent, var(--color-gold));
}
.star-divider::after { background: linear-gradient(90deg, var(--color-gold), transparent); }
.star-icon { width: 20px; height: 20px; flex-shrink: 0; }

/* ==========================================================================
   Decorative geometric pattern overlay (echoes zellige lattice motifs)
   ========================================================================== */
.pattern-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }

/* ==========================================================================
   Header — fixed and transparent over the dark hero on the front page,
   solid dark elsewhere; main.js toggles .is-scrolled past 50px.
   ========================================================================== */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(var(--color-ink-rgb), 0.95);
	backdrop-filter: blur(20px);
	transition: background 0.4s, padding 0.4s;
}
.site-header .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: 14px;
	gap: var(--space-md);
	transition: padding 0.4s;
}
body.is-front-page .site-header { position: fixed; inset-inline: 0; }
body.is-front-page .site-header:not(.is-scrolled) {
	background: transparent;
	backdrop-filter: none;
}
body.is-front-page .site-header:not(.is-scrolled) .container {
	padding-block: 22px;
}

/* The logo image contains the wordmark, so it stands alone and is sized to be
   legible rather than sitting next to repeated text. */
.site-logo { display: flex; align-items: center; flex-shrink: 0; }
.site-logo img { height: 68px; width: auto; border-radius: var(--radius-sm); }

.main-nav ul { display: flex; gap: 36px; list-style: none; margin: 0; padding: 0; }
.main-nav a {
	font-family: var(--font-body-fr);
	color: var(--color-cream);
	font-weight: 400;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 2px;
	position: relative;
	padding-bottom: 2px;
}
html[lang^="ar"] .main-nav a { font-family: var(--font-body-ar); font-size: 15px; letter-spacing: 0.5px; }
.main-nav a::after {
	content: "";
	position: absolute;
	bottom: 0;
	inset-inline-start: 0;
	width: 0;
	height: 1px;
	background: var(--color-gold);
	transition: width 0.4s var(--ease-lux);
}
.main-nav a:hover, .main-nav .current-menu-item > a { color: var(--color-gold); }
.main-nav a:hover::after, .main-nav .current-menu-item > a::after { width: 100%; }

/* Collections dropdown. The toggle is a <button> so it's reachable by keyboard
   and announces its state; it's styled to match the sibling <a> links. */
.main-nav .has-submenu { position: relative; }
.submenu-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	background: none;
	border: 0;
	padding: 0 0 2px;
	cursor: pointer;
	font-family: var(--font-body-fr);
	color: var(--color-cream);
	font-weight: 400;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 2px;
	transition: color 0.3s;
}
html[lang^="ar"] .submenu-toggle { font-family: var(--font-body-ar); font-size: 15px; letter-spacing: 0.5px; }
.submenu-toggle:hover, .has-submenu.is-open .submenu-toggle { color: var(--color-gold); }
.submenu-caret {
	width: 6px;
	height: 6px;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform 0.3s var(--ease-lux);
}
.has-submenu.is-open .submenu-caret { transform: rotate(225deg) translateY(-2px); }

.main-nav .submenu {
	position: absolute;
	inset-block-start: calc(100% + 18px);
	inset-inline-start: 0;
	min-width: 240px;
	flex-direction: column;
	gap: 0;
	padding: var(--space-sm) 0;
	background: rgba(var(--color-ink-rgb), 0.98);
	backdrop-filter: blur(20px);
	border: 1px solid rgba(var(--color-gold-rgb), 0.18);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity 0.3s var(--ease-lux), transform 0.3s var(--ease-lux), visibility 0.3s;
}
.has-submenu.is-open .submenu { opacity: 1; visibility: visible; transform: none; }
.main-nav .submenu li { display: block; }
.main-nav .submenu a { display: block; padding: 0.6em var(--space-sm); letter-spacing: 1.5px; }
.main-nav .submenu a::after { display: none; }
.main-nav .submenu a:hover { background: rgba(var(--color-gold-rgb), 0.1); }

.header-actions { display: flex; align-items: center; gap: var(--space-sm); }
.lang-switcher { display: flex; gap: 0.5rem; }
.lang-switcher a { border: 1px solid rgba(var(--color-gold-rgb), 0.35); padding: 0.3em 0.7em; font-size: 0.8rem; letter-spacing: 1px; color: var(--color-cream-dim); }
.lang-switcher a.current-lang, .lang-switcher a:hover { border-color: var(--color-gold); color: var(--color-gold); }

/* Header CTA — gold pill like the old site's "Devis Gratuit", not green */
.whatsapp-btn {
	display: inline-block;
	font-family: var(--font-body-fr);
	background: var(--color-gold);
	color: var(--color-ink-soft);
	padding: 12px 28px;
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 2px;
	text-transform: uppercase;
	transition: all 0.4s var(--ease-lux);
}
html[lang^="ar"] .whatsapp-btn { font-family: var(--font-body-ar); font-size: 13px; letter-spacing: 0.5px; }
.whatsapp-btn:hover { background: var(--color-gold-light); color: var(--color-ink-soft); transform: translateY(-2px); box-shadow: 0 8px 30px rgba(var(--color-gold-rgb), 0.3); }

.nav-toggle { display: none; }

/* ==========================================================================
   Floating WhatsApp button (site-wide)
   ========================================================================== */
.whatsapp-float {
	position: fixed;
	/* Intentionally physical right/bottom, not inset-inline-end: chat bubbles
	   conventionally stay bottom-right regardless of page direction — do not
	   mirror this for RTL. */
	right: 24px;
	bottom: 24px;
	width: 60px;
	height: 60px;
	background: #25D366;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
	z-index: 1000;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	animation: ddd-pulse 2s infinite;
}
.whatsapp-float:hover { transform: scale(1.08); box-shadow: 0 6px 30px rgba(37, 211, 102, 0.5); }
.whatsapp-float svg { width: 28px; height: 28px; }
@keyframes ddd-pulse {
	0%, 100% { box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4); }
	50% { box-shadow: 0 4px 30px rgba(37, 211, 102, 0.6); }
}
@keyframes ddd-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
	.whatsapp-float, .hero::before, .hero::after { animation: none; }
}

/* ==========================================================================
   Hero — full-viewport dark opener, start-aligned, oversized light serif
   ========================================================================== */
.hero {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	padding-block: var(--space-xl);
	/* Soft brown-gold wash on the trailing half, echoing the old hero's
	   clipped wedge panel. Physical "right" — flipped in style-rtl.css. */
	background:
		linear-gradient(115deg, transparent 45%, rgba(74, 55, 40, 0.35) 70%, rgba(var(--color-gold-rgb), 0.07) 100%),
		var(--color-ink);
	color: var(--color-cream-dim);
	text-align: start;
	overflow: hidden;
}
.hero::before {
	content: "";
	position: absolute;
	bottom: -100px;
	right: -100px;
	width: 500px;
	height: 500px;
	border-radius: 50%;
	border: 1px solid rgba(var(--color-gold-rgb), 0.08);
	animation: ddd-float 6s ease-in-out infinite;
	pointer-events: none;
}
.hero::after {
	content: "";
	position: absolute;
	top: 20%;
	left: 10%;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	border: 1px solid rgba(var(--color-gold-rgb), 0.06);
	animation: ddd-float 8s ease-in-out infinite 1s;
	pointer-events: none;
}
.hero .container { position: relative; z-index: 1; width: 100%; padding-top: 60px; }
.hero h1 {
	font-size: clamp(2.6rem, 7vw, 5.2rem);
	font-weight: 300;
	line-height: 1.08;
	letter-spacing: -1px;
	color: var(--color-cream);
	max-width: 18ch;
	margin-bottom: var(--space-sm);
}
.hero p.lead { font-family: var(--font-body-fr); font-size: 1rem; font-weight: 300; color: var(--color-cream-dim); opacity: 0.8; max-width: 500px; margin: 0 0 var(--space-md); }
html[lang^="ar"] .hero p.lead { font-family: var(--font-body-ar); }
.hero-cta { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.hero .eyebrow { color: var(--color-gold); margin-bottom: var(--space-md); }
.hero .accent-gold { color: var(--color-gold); }
.hero .btn-outline { color: var(--color-gold); border-color: var(--color-gold); }
.hero .btn-outline:hover { color: var(--color-ink-soft); background: var(--color-gold); }

.hero-stats { display: flex; gap: 60px; flex-wrap: wrap; margin-top: 70px; }
.hero-stat { text-align: start; }
.hero-stat strong { display: block; font-family: var(--font-heading-fr); font-size: 2.25rem; font-weight: 300; color: var(--color-gold); }
html[lang^="ar"] .hero-stat strong { font-family: var(--font-heading-ar); }
.hero-stat span { display: block; margin-top: 0.3em; font-family: var(--font-body-fr); font-size: 11px; text-transform: uppercase; letter-spacing: 2px; color: var(--color-cream-dim); opacity: 0.6; }
html[lang^="ar"] .hero-stat span { font-family: var(--font-body-ar); letter-spacing: 0.5px; font-size: 13px; }

/* ==========================================================================
   Sections & cards
   ========================================================================== */
.section { padding-block: var(--space-xl); }
.section-alt { background: var(--color-cream); color: var(--color-ink); }
.section-head { text-align: center; max-width: 700px; margin-inline: auto; margin-bottom: var(--space-lg); }
.section-head .eyebrow { justify-content: center; }
.section-head p { font-size: 0.95rem; color: var(--color-text-muted); opacity: 0.85; }

.section-dark {
	background: var(--color-ink);
	color: var(--color-cream-dim);
	position: relative;
	overflow: hidden;
}
.section-dark h1, .section-dark h2, .section-dark h3 { color: var(--color-cream); }
.section-dark .container { position: relative; z-index: 1; }
.section-dark .eyebrow { color: var(--color-gold); }
.section-dark .accent-gold { color: var(--color-gold); }
.section-dark p { color: var(--color-cream-dim); opacity: 0.8; }
.section-dark .btn-outline { color: var(--color-gold); border-color: var(--color-gold); }
.section-dark .btn-outline:hover { color: var(--color-ink-soft); background: var(--color-gold); }

.grid { display: grid; gap: 24px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; } }

/* Default card = light "service" card from the old site: white on cream,
   hairline border, generous padding. Cards that carry media (products,
   categories) instead get the dark gradient treatment below. */
.card {
	background: var(--color-white);
	color: var(--color-text-muted);
	border: 1px solid var(--color-cream-dim);
	border-radius: var(--radius-sm);
	overflow: hidden;
	transition: transform 0.5s var(--ease-lux), box-shadow 0.5s var(--ease-lux), border-color 0.3s;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 20px 60px rgba(61, 43, 31, 0.08); }
.card h1, .card h2, .card h3, .card h4 { color: var(--color-ink-soft); font-weight: 500; }

.card:has(.card-media) {
	background: linear-gradient(135deg, var(--color-ink-soft) 0%, var(--color-charcoal-soft) 55%, var(--color-gold-deep) 130%);
	color: var(--color-cream-dim);
	border: none;
}
.card:has(.card-media):hover { transform: translateY(-8px); box-shadow: 0 24px 60px rgba(var(--color-ink-rgb), 0.25); }
.card:has(.card-media) h1, .card:has(.card-media) h2, .card:has(.card-media) h3 { color: var(--color-cream); }

.card-media { aspect-ratio: 4 / 3; background: transparent; display: flex; align-items: center; justify-content: center; color: rgba(var(--color-gold-rgb), 0.5); }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-media .star-icon { width: 48px; height: 48px; }
.card-body { padding: var(--space-md); }
.card-body h3 { font-size: 1.4rem; margin-bottom: 0.4em; }
.card-meta { font-family: var(--font-body-fr); color: var(--color-gold); font-size: 10px; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 0.8em; }
html[lang^="ar"] .card-meta { font-family: var(--font-body-ar); font-size: 12px; letter-spacing: 1px; }
.card-excerpt { font-size: 13px; line-height: 1.7; margin: 0; }
.card:has(.card-media) .card-excerpt { color: var(--color-cream-dim); opacity: 0.75; }

.product-specs { list-style: none; margin: var(--space-sm) 0; padding: 0; display: grid; gap: 0.5em; }
.product-specs li { display: flex; justify-content: space-between; border-bottom: 1px dashed var(--color-border-light); padding-bottom: 0.4em; color: var(--color-text-muted); }
.product-specs li strong { color: var(--color-ink-soft); }

/* ==========================================================================
   Product filter pills (archive-produit.php)
   ========================================================================== */
.filter-pills { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: var(--space-lg); }

/* ==========================================================================
   Footer — minimal black band like the old site
   ========================================================================== */
.site-footer { background: var(--color-ink); border-top: 1px solid rgba(61, 43, 31, 0.4); padding-block: var(--space-lg) var(--space-md); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: var(--space-lg); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr; gap: var(--space-md); } }
.footer-grid h4 { font-family: var(--font-body-fr); color: var(--color-gold); font-size: 11px; font-weight: 400; text-transform: uppercase; letter-spacing: 3px; }
html[lang^="ar"] .footer-grid h4 { font-family: var(--font-body-ar); font-size: 13px; letter-spacing: 1px; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6em; }
.footer-grid li { color: var(--color-cream-dim); opacity: 0.7; font-size: 14px; }
.footer-grid a { color: var(--color-cream-dim); opacity: 0.7; font-size: 14px; }
.footer-grid a:hover { color: var(--color-gold); opacity: 1; }
.footer-grid p { color: var(--color-cream-dim); opacity: 0.6; font-size: 14px; }
.footer-bottom { text-align: center; color: var(--color-cream-dim); opacity: 0.4; font-size: 12px; margin-top: var(--space-lg); border-top: 1px solid rgba(61, 43, 31, 0.4); padding-top: var(--space-sm); }

.footer-grid .social-title { margin-top: var(--space-md); }
.social-links { display: flex; gap: 12px; }
.social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 1px solid rgba(var(--color-gold-rgb), 0.35);
	color: var(--color-cream-dim);
	opacity: 0.8;
	transition: color 0.3s, border-color 0.3s, background 0.3s, opacity 0.3s, transform 0.3s var(--ease-lux);
}
.social-link svg { width: 19px; height: 19px; }
.social-link:hover {
	color: var(--color-ink);
	background: var(--color-gold);
	border-color: var(--color-gold);
	opacity: 1;
	transform: translateY(-2px);
}

/* ==========================================================================
   Pills (collection filters)
   ========================================================================== */
.pill {
	font-family: var(--font-body-fr);
	border: 1px solid transparent;
	background: none;
	color: var(--color-charcoal-soft);
	padding: 10px 24px;
	border-radius: 0;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 2px;
	cursor: pointer;
	transition: border-color 0.3s, color 0.3s;
}
html[lang^="ar"] .pill { font-family: var(--font-body-ar); font-size: 14px; letter-spacing: 0.5px; }
.pill:hover { border-color: var(--color-gold); color: var(--color-gold); }
.pill.is-active { border-color: var(--color-gold); color: var(--color-gold); background: none; font-weight: 500; }

/* ==========================================================================
   Model page
   ========================================================================== */
.model-page { padding-top: var(--space-lg); }
.model-head { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-lg); align-items: start; }

/* No fixed ratio: the workshop photos are mostly portrait, and forcing them
   into a landscape frame cuts the bottom off the furniture. The image keeps
   its own proportions; only the empty placeholder needs a defined box. */
.model-main-media { background: var(--color-cream); }
.model-main-media img { width: 100%; height: auto; display: block; }
.model-main-trigger {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
	overflow: hidden;
}
.model-main-trigger img { transition: transform 1.2s var(--ease-lux); }
.model-main-trigger:hover img { transform: scale(1.03); }
.model-main-trigger:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 3px; }

.model-media-placeholder {
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(var(--color-gold-rgb), 0.5);
}
.model-media-placeholder .star-icon { width: 64px; height: 64px; }

.model-intro h1 { font-size: clamp(2rem, 4vw, 3.2rem); margin-bottom: 0.2em; }
.model-tagline {
	font-family: var(--font-heading-fr);
	font-style: italic;
	font-size: 1.15rem;
	color: var(--color-charcoal-soft);
	margin: 0 0 var(--space-sm);
}
html[lang^="ar"] .model-tagline { font-family: var(--font-heading-ar); font-style: normal; }
a.eyebrow { text-decoration: none; }
a.eyebrow:hover { color: var(--color-gold-light); }
.model-price {
	font-family: var(--font-heading-fr);
	font-size: 1.6rem;
	color: var(--color-gold-deep);
	margin: 0 0 var(--space-md);
}
html[lang^="ar"] .model-price { font-family: var(--font-heading-ar); }
.model-description { margin-bottom: var(--space-md); }
.model-description p { color: var(--color-text-muted); }
.model-intro .hero-cta { margin-top: var(--space-md); }

.model-gallery-block { margin-top: var(--space-xl); }
.model-gallery-title { text-align: center; font-size: clamp(1.5rem, 3vw, 2.2rem); margin-bottom: var(--space-lg); }
.model-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
/* Square tiles: the photo sets mix portrait and landscape, and a square is the
   least destructive uniform crop for both. Clicking opens the uncropped image. */
.model-gallery-item {
	padding: 0;
	border: none;
	background: var(--color-cream);
	aspect-ratio: 1 / 1;
	cursor: zoom-in;
	overflow: hidden;
}
.model-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-lux); }
.model-gallery-item:hover img { transform: scale(1.05); }

/* Sticky quote bar — mobile only, see the media query at the end of the file.
   Hidden by default so it never appears on desktop. */
.model-sticky-cta { display: none; }

.collection-empty {
	grid-column: 1 / -1;
	text-align: center;
	padding: var(--space-xl) var(--space-md);
	border: 1px dashed var(--color-cream-dim);
	color: var(--color-text-muted);
}
.collection-empty .star-icon { width: 40px; height: 40px; color: var(--color-gold); margin-bottom: var(--space-sm); }
.collection-empty p { max-width: 40ch; margin-inline: auto; margin-bottom: var(--space-md); }

/* Lightbox — built by main.js on first use */
.ddd-lightbox {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: var(--space-md);
	background: rgba(var(--color-ink-rgb), 0.95);
	backdrop-filter: blur(8px);
}
.ddd-lightbox.is-open { display: flex; }
.ddd-lightbox img { max-width: min(1200px, 92vw); max-height: 88vh; object-fit: contain; }
.ddd-lightbox-close {
	position: absolute;
	top: 24px;
	inset-inline-end: 24px;
	width: 48px;
	height: 48px;
	font-size: 2rem;
	line-height: 1;
	background: none;
	border: 1px solid rgba(var(--color-gold-rgb), 0.4);
	color: var(--color-gold);
	cursor: pointer;
}
.ddd-lightbox-close:hover { background: var(--color-gold); color: var(--color-ink); }

/* ==========================================================================
   Contact page
   ========================================================================== */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-info-list { list-style: none; margin: var(--space-sm) 0; padding: 0; display: grid; gap: var(--space-sm); }
.contact-info-list li { display: flex; gap: 0.8em; color: var(--color-text-muted); }
.contact-info-list strong { color: var(--color-ink-soft); font-weight: 500; }
.contact-map { border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--color-cream-dim); }
.contact-map iframe { width: 100%; height: 360px; border: 0; }

form.contact-form { display: grid; gap: var(--space-sm); }
form.contact-form label { display: block; margin-bottom: 0.4em; color: var(--color-gold-deep); font-size: 11px; text-transform: uppercase; letter-spacing: 2px; }
form.contact-form input, form.contact-form textarea, form.contact-form select {
	width: 100%;
	padding: 0.9em 1em;
	background: var(--color-white);
	border: 1px solid var(--color-cream-dim);
	border-radius: 0;
	color: var(--color-ink);
	font-family: inherit;
	font-size: 15px;
}
form.contact-form input:focus, form.contact-form textarea:focus { outline: none; border-color: var(--color-gold); }

/* ==========================================================================
   Scroll fade-in
   ========================================================================== */
.fade-in {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.8s var(--ease-lux), transform 0.8s var(--ease-lux);
	transition-delay: calc(var(--fade-i, 0) * 100ms);
}
.fade-in.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.fade-in { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   Landing page — photo-led storefront sections
   ========================================================================== */

/* Hero with a full-bleed photo behind it. The source renders carry a baked-in
   watermark (studio logo bottom-centre, phone numbers at mid-left and
   mid-right), so the scrim is deliberately heavy on the text side and the
   image is scaled past the frame to push the bottom badge out of view.
   Revisit these values once unwatermarked exports land. */
:root {
	--hero-scrim-angle: 90deg;

	/* Every source render carries a baked-in studio badge across the bottom
	   centre. Photo frames render the image taller than their box and anchor
	   it to the top, so the badge is clipped away. Set this to 1 (or delete
	   the .has-watermark-crop rules further down) once unwatermarked exports
	   are supplied. */
	--watermark-crop: 1.45;
}

.hero-media { background: var(--color-ink); }
.hero-media::before, .hero-media::after { display: none; }

.hero-bg { position: absolute; inset: 0; overflow: hidden; }
.hero-bg-img,
.hero-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 45%;
}

/* Only when the hero falls back to a watermarked render: scale up and anchor
   high so the studio badge along the bottom is pushed out of frame. A clean
   photograph is shown as composed. */
.hero-bg.is-watermarked img {
	object-position: center 28%;
	transform: scale(1.18);
	transform-origin: center 25%;
}
/* Scrim tuned to keep the cream text readable while letting the salon show.
   Heavier on the text side, opening up towards the far edge. */
.hero-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(var(--hero-scrim-angle),
			rgba(var(--color-ink-rgb), 0.90) 0%,
			rgba(var(--color-ink-rgb), 0.72) 40%,
			rgba(var(--color-ink-rgb), 0.34) 72%,
			rgba(var(--color-ink-rgb), 0.20) 100%),
		linear-gradient(to bottom,
			rgba(var(--color-ink-rgb), 0.50) 0%,
			transparent 32%,
			transparent 64%,
			rgba(var(--color-ink-rgb), 0.80) 100%);
}

/* The fallback render carries phone numbers at mid-height on both sides, so
   it needs a much denser wash to stay presentable. */
.hero-bg.is-watermarked::after {
	background:
		linear-gradient(var(--hero-scrim-angle),
			rgba(var(--color-ink-rgb), 0.96) 0%,
			rgba(var(--color-ink-rgb), 0.88) 38%,
			rgba(var(--color-ink-rgb), 0.55) 68%,
			rgba(var(--color-ink-rgb), 0.42) 100%),
		linear-gradient(to bottom,
			rgba(var(--color-ink-rgb), 0.55) 0%,
			transparent 30%,
			transparent 62%,
			rgba(var(--color-ink-rgb), 0.85) 100%);
}

/* Category tiles — tall portrait crop with the label beneath, storefront style */
.tile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.tile-grid-4 { grid-template-columns: repeat(4, 1fr); gap: 24px; }
.tile { display: block; color: inherit; }
.tile-media {
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--color-cream);
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(var(--color-gold-rgb), 0.5);
}
.tile-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-lux); }
.tile-media .star-icon { width: 56px; height: 56px; }
.tile-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, transparent 55%, rgba(var(--color-ink-rgb), 0.45) 100%);
	opacity: 0;
	transition: opacity 0.5s var(--ease-lux);
}
.tile:hover .tile-media img { transform: scale(1.06); }
.tile:hover .tile-media::after { opacity: 1; }
.tile-body { padding-top: var(--space-sm); }
.tile-body h3 { font-size: 1.35rem; margin-bottom: 0.35em; color: var(--color-ink-soft); }
.tile-body p { font-size: 13px; line-height: 1.7; color: var(--color-text-muted); opacity: 0.85; margin: 0 0 0.9em; }
.tile-link {
	font-family: var(--font-body-fr);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--color-gold-deep);
	border-bottom: 1px solid rgba(var(--color-gold-rgb), 0.4);
	padding-bottom: 3px;
	transition: color 0.3s, border-color 0.3s;
}
html[lang^="ar"] .tile-link { font-family: var(--font-body-ar); font-size: 13px; letter-spacing: 0.5px; }
.tile:hover .tile-link { color: var(--color-gold); border-color: var(--color-gold); }
.tile-price {
	font-family: var(--font-heading-fr);
	font-size: 1.1rem;
	color: var(--color-gold-deep);
	margin: 0 0 0.7em;
}
html[lang^="ar"] .tile-price { font-family: var(--font-heading-ar); }

/* Split feature — large image beside a copy block */
.feature-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); align-items: center; }
.feature-split-reverse .feature-media { order: 2; }
.feature-media { overflow: hidden; aspect-ratio: 4 / 3; }
.feature-media img { width: 100%; height: 100%; object-fit: cover; }
.feature-body h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); margin-bottom: var(--space-sm); }
.feature-body p { font-size: 0.95rem; line-height: 1.9; margin-bottom: var(--space-md); }

.variant-strip { margin-bottom: var(--space-md); }
.variant-label {
	display: block;
	font-family: var(--font-body-fr);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 3px;
	color: var(--color-gold-deep);
	margin-bottom: 0.8em;
}
html[lang^="ar"] .variant-label { font-family: var(--font-body-ar); font-size: 12px; letter-spacing: 1px; }
.variant-thumbs { display: flex; gap: 10px; }
.variant-thumb { width: 72px; height: 72px; overflow: hidden; border: 1px solid var(--color-cream-dim); }
.variant-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Realisations mosaic — one lead image plus a 2x2 of supporting shots */
.mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 20px; }
.mosaic-item { margin: 0; overflow: hidden; background: var(--color-cream); }
.mosaic-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-lux); }
.mosaic-item:hover img { transform: scale(1.05); }
.mosaic-item:first-child { grid-column: span 2; grid-row: span 2; }

.section-foot { text-align: center; margin-top: var(--space-lg); }

/* Trust band — warm brown rule between the cream and dark sections */
.trust-band { background: var(--color-charcoal); color: var(--color-cream-dim); padding-block: var(--space-lg); }
.trust-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: var(--space-md); align-items: start; }
.trust-title {
	font-size: 1.6rem;
	line-height: 1.3;
	color: var(--color-cream);
	margin: 0;
	padding-inline-end: var(--space-sm);
}
.trust-item h3 { font-family: var(--font-body-fr); font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: 2px; color: var(--color-gold-light); margin-bottom: 0.6em; }
html[lang^="ar"] .trust-item h3 { font-family: var(--font-body-ar); font-size: 15px; letter-spacing: 0.5px; }
.trust-item p { font-size: 13px; line-height: 1.7; color: var(--color-cream-dim); opacity: 0.75; margin: 0; }
.trust-icon { width: 22px; height: 22px; color: var(--color-gold); margin-bottom: 0.9em; }

/* Process — numbered rail with a hairline connecting the steps */
.process-rail { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }
.process-step { position: relative; padding-top: var(--space-md); }
.process-step::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 1px;
	background: rgba(var(--color-gold-rgb), 0.35);
}
.process-step::after {
	content: "";
	position: absolute;
	inset-block-start: -3px;
	inset-inline-start: 0;
	width: 7px;
	height: 7px;
	background: var(--color-gold);
	border-radius: 50%;
}
.process-num { display: block; font-family: var(--font-heading-fr); font-size: 2.4rem; font-weight: 300; color: var(--color-gold); line-height: 1; margin-bottom: 0.25em; }
html[lang^="ar"] .process-num { font-family: var(--font-heading-ar); }
.process-step h3 { font-size: 1.05rem; margin: 0; }

/* Watermark crop utility — declared after the photo-frame components so it
   wins the equal-specificity tie on `height`. Renders the image taller than
   its frame and anchors it to the top, pushing the baked-in studio badge
   below the clip line. Temporary; see --watermark-crop above. */
.has-watermark-crop { overflow: hidden; }
.has-watermark-crop img {
	height: calc(100% * var(--watermark-crop));
	object-position: center top;
}

/* ==========================================================================
   Responsive nav (mobile)
   ========================================================================== */
@media (max-width: 1024px) {
	.trust-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }
	.trust-title { grid-column: 1 / -1; }
	.process-rail { grid-template-columns: repeat(2, 1fr); }
	.tile-grid-4 { grid-template-columns: repeat(2, 1fr); }
	.model-head { grid-template-columns: 1fr; gap: var(--space-md); }
	.model-gallery { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
	/* One tile per row: the 3/4 portrait crop would otherwise be taller than
	   the viewport on a phone. */
	.tile-grid { grid-template-columns: 1fr; }
	.tile-media { aspect-ratio: 4 / 3; }
	.feature-split { grid-template-columns: 1fr; gap: var(--space-md); }
	.feature-split-reverse .feature-media { order: 0; }
	.mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
	.mosaic-item:first-child { grid-column: span 2; grid-row: span 1; }
}

@media (max-width: 600px) {
	.tile-grid-4 { grid-template-columns: 1fr; }

	/* Two per row rather than one: at 375px a single square tile is ~335px of
	   scrolling per photo, and a 15-shot gallery becomes a very long page. */
	.model-gallery { grid-template-columns: repeat(2, 1fr); gap: 12px; }

	/* 40px of side padding costs 21% of a 375px screen. */
	.container { padding-inline: 20px; }

	/* 100px band padding reads as generous on a desktop and as dead space on a
	   phone. */
	:root { --space-xl: 3.5rem; --space-lg: 2.5rem; }

	.hero { min-height: 0; padding-block: var(--space-lg) var(--space-xl); }
	.hero .container { padding-top: var(--space-md); }
	.hero h1 { font-size: clamp(2rem, 9vw, 2.6rem); }
	.hero p.lead { font-size: 0.95rem; }
	.hero-cta { gap: 0.6rem; }
	.hero-cta .btn { width: 100%; text-align: center; }

	/* Three across instead of wrapping onto three lines. */
	.hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); margin-top: var(--space-lg); }
	.hero-stat strong { font-size: 1.6rem; }
	.hero-stat span { font-size: 10px; letter-spacing: 1px; }

	.section-head { margin-bottom: var(--space-md); }
	.model-head { gap: var(--space-md); }
	.model-intro .hero-cta .btn { width: 100%; }
	/* Keeps "à partir de 990 DH / mètre linéaire" on one line at 375px. */
	.model-price { font-size: 1.2rem; }
	.trust-grid { grid-template-columns: 1fr; }
	.process-rail { grid-template-columns: 1fr; gap: var(--space-sm); }

	/* Comfortable tap targets for the language switcher. */
	.lang-switcher a { padding: 0.5em 0.8em; }

	/* Slightly smaller so it sits less on top of full-width buttons. */
	.whatsapp-float { width: 52px; height: 52px; right: 16px; bottom: 16px; }
	.whatsapp-float svg { width: 24px; height: 24px; }

	/* ----- Sticky quote bar on model pages ----- */
	.model-sticky-cta {
		display: flex;
		align-items: center;
		gap: var(--space-sm);
		position: fixed;
		inset-inline: 0;
		bottom: 0;
		z-index: 1001;
		padding: 10px 20px calc(10px + env(safe-area-inset-bottom));
		background: var(--color-ink);
		border-top: 1px solid rgba(var(--color-gold-rgb), 0.25);
		box-shadow: 0 -8px 24px rgba(var(--color-ink-rgb), 0.35);
	}
	.model-sticky-price { flex: 1; min-width: 0; line-height: 1.25; }
	.model-sticky-label {
		display: block;
		font-family: var(--font-body-fr);
		font-size: 10px;
		text-transform: uppercase;
		letter-spacing: 1.5px;
		color: var(--color-cream-dim);
		opacity: 0.6;
	}
	html[lang^="ar"] .model-sticky-label { font-family: var(--font-body-ar); font-size: 11px; letter-spacing: 0.5px; }
	.model-sticky-price strong {
		font-family: var(--font-heading-fr);
		font-size: 1.2rem;
		font-weight: 400;
		color: var(--color-gold);
		white-space: nowrap;
	}
	html[lang^="ar"] .model-sticky-price strong { font-family: var(--font-heading-ar); }
	.model-sticky-cta .btn { padding: 13px 20px; font-size: 11px; white-space: nowrap; flex-shrink: 0; }

	/* The bar and the bubble both open WhatsApp; two floating triggers stacked
	   on each other is noise, and the bubble was covering the page CTA. */
	.single-produit .whatsapp-float { display: none; }

	/* Clear the bar so it never covers the end of the footer. */
	.single-produit { padding-bottom: 76px; }
}

@media (max-width: 860px) {
	/* Anchored to the header rather than a hard-coded 72px: the header's height
	   changes with the logo and language switcher, and a fixed offset opened
	   the panel underneath it. */
	.main-nav {
		position: absolute;
		inset-block-start: 100%;
		inset-inline: 0;
		/* Fully opaque: the panel overlays photography, and at 0.98 the image
		   behind it still showed through enough to hurt legibility. */
		background: var(--color-ink);
		padding: var(--space-md);
		display: none;
		max-height: 75vh;
		overflow-y: auto;
		border-top: 1px solid rgba(var(--color-gold-rgb), 0.18);
		box-shadow: 0 20px 40px rgba(var(--color-ink-rgb), 0.4);
	}
	.main-nav.is-open { display: block; }
	.main-nav ul { flex-direction: column; gap: var(--space-sm); }
	.nav-toggle { display: inline-flex; background: none; border: 1px solid rgba(var(--color-gold-rgb), 0.4); color: var(--color-gold); border-radius: var(--radius-sm); padding: 0.5em 0.7em; }
	.hero h1 { max-width: none; }

	.site-logo img { height: 56px; }

	/* Menu button first, logo centred, language switcher last. `order` on the
	   flex row means this mirrors on its own under dir="rtl", so the button
	   stays on the reading-start side in both languages. */
	.nav-toggle { order: -1; }
	.site-logo { order: 0; }
	.header-actions { order: 1; }

	/* The header CTA ran off the right edge. The floating WhatsApp button is
	   always on screen on mobile and does the same job. */
	.header-actions .whatsapp-btn { display: none; }

	.site-header .container { padding-block: 10px; gap: var(--space-sm); }
	body.is-front-page .site-header:not(.is-scrolled) .container { padding-block: 12px; }

	/* Inside the collapsed panel the dropdown becomes a plain indented list —
	   the menu is already behind a tap, a second one buys nothing. */
	.submenu-toggle { pointer-events: none; }
	.submenu-caret { display: none; }
	.main-nav .submenu {
		position: static;
		min-width: 0;
		padding: var(--space-sm) 0 0;
		margin-inline-start: var(--space-sm);
		background: none;
		backdrop-filter: none;
		border: 0;
		border-inline-start: 1px solid rgba(var(--color-gold-rgb), 0.25);
		opacity: 1;
		visibility: visible;
		transform: none;
	}
	.main-nav .submenu a { padding-block: 0.35em; }
}