/* Ouassa Design — custom CSS helpers (works with Tailwind CDN) */
:root { 
	--brand-600:#8B4513; 
	--brand-700:#654321; 
	--brand-500:#A0522D; 
	--gold:#DAA520; 
	--accent:#CD853F;
}

/* Typography helpers (Google Fonts loaded in HTML) */
.font-display { font-family: 'Playfair Display', serif; }
.font-sans-base { font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif; }

/* Buttons */
.btn-primary { display:inline-flex; align-items:center; justify-content:center; padding:0.625rem 1.125rem; border-radius:9999px; background:linear-gradient(135deg, var(--brand-600), var(--brand-500)); color:#fff; box-shadow:0 10px 20px -10px rgba(139,69,19,.6); transition:transform .12s ease, box-shadow .2s ease, filter .2s ease; text-decoration:none; border:1px solid rgba(255,255,255,.12); }
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 16px 26px -12px rgba(139,69,19,.65); filter:saturate(1.05); }
.btn-secondary { display:inline-flex; align-items:center; justify-content:center; padding:0.625rem 1.125rem; border-radius:9999px; border:1px solid var(--gold); color:#111827; background:#fff; transition:border-color .2s ease, transform .12s ease, box-shadow .2s ease; text-decoration:none; }
.btn-secondary:hover { border-color:#B8860B; transform:translateY(-1px); box-shadow:0 10px 15px -10px rgba(0,0,0,.15); }

/* Badges */
.badge { display:inline-flex; align-items:center; gap:.5rem; padding:.375rem .75rem; border-radius:9999px; border:1px solid var(--gold); background:rgba(218,165,32,.08); color:var(--brand-700); font-size:.75rem; font-weight:500; }

/* Nav */
.nav-link { color:#374151; text-decoration:none; transition:color .2s ease; }
.nav-link:hover { color:#111827; }
.nav-link.active { color:var(--brand-700); }
.nav-mobile { padding:0.5rem 0.75rem; color:#374151; border-radius:0.5rem; text-decoration:none; }
.nav-mobile:hover { background:#f9fafb; }

/* Header elevation on scroll */
.header { transition: box-shadow .25s ease, background .25s ease; }
.header.elevated { box-shadow:0 8px 24px -18px rgba(0,0,0,.35); background:rgba(255,255,255,.9); }

/* Sections/cards */
.section-title { font-size:1.9rem; font-weight:700; letter-spacing:-0.01em; color:var(--brand-700); }
.card { padding:1.5rem; border:1px solid #e5e7eb; border-radius:1rem; background:#fff; transition:box-shadow .25s ease, transform .12s ease; position:relative; }
.card::before { content:""; position:absolute; top:-1px; left:0; right:0; height:6px; background:repeating-linear-gradient(90deg, var(--gold) 0 10px, transparent 10px 14px); border-top-left-radius:1rem; border-top-right-radius:1rem; opacity:.35; }
.card:hover { box-shadow:0 18px 30px -18px rgba(0,0,0,.25); transform:translateY(-2px); }
.card-title { font-weight:600; color:var(--brand-700); }
.card-text { margin-top:0.5rem; color:#4b5563; }

/* Products */
.product-card { overflow:hidden; border:1px solid #e5e7eb; border-radius:1rem; background:#fff; transition:box-shadow .25s ease, transform .12s ease, border-color .2s ease; }
.product-card:hover { box-shadow:0 18px 30px -18px rgba(0,0,0,.25); transform:translateY(-2px); border-color:var(--gold); }
.product-image { width:100%; height:14rem; object-fit:cover; background:#f3f4f6; display:block; }
.product-title { padding:0.75rem 1rem 0 1rem; font-weight:600; color:var(--brand-700); }
.product-desc { padding:0 1rem 1rem 1rem; color:#4b5563; }

/* Chips */
.chip { padding:0.375rem 0.75rem; border-radius:9999px; border:1px solid #e5e7eb; font-size:.875rem; background:#fff; transition:border-color .2s ease, background .2s ease, color .2s ease, transform .12s ease; }

/* Modern Filter Buttons */
.filter-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	border-radius: 2rem;
	border: 2px solid transparent;
	background: rgba(255, 255, 255, 0.8);
	backdrop-filter: blur(10px);
	font-size: 0.875rem;
	font-weight: 500;
	color: #6b7280;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

.filter-btn::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
	transition: left 0.5s ease;
}

.filter-btn:hover::before {
	left: 100%;
}

.filter-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
	border-color: var(--brand-600);
	color: var(--brand-700);
}

.filter-btn.active {
	background: linear-gradient(135deg, var(--brand-600), var(--brand-500));
	color: white;
	border-color: var(--brand-600);
	box-shadow: 0 8px 20px -5px rgba(139, 69, 19, 0.4);
}

.filter-btn.active:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 25px -5px rgba(139, 69, 19, 0.5);
}

.filter-icon {
	font-size: 1rem;
	transition: transform 0.3s ease;
}

.filter-btn:hover .filter-icon {
	transform: scale(1.1);
}

/* Modern Fabric Cards */
.fabric-card {
	background: white;
	border-radius: 1.5rem;
	overflow: hidden;
	box-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.1);
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	border: 1px solid rgba(229, 231, 235, 0.5);
	position: relative;
}

.fabric-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--brand-600), var(--gold));
	opacity: 0;
	transition: opacity 0.3s ease;
}

.fabric-card:hover::before {
	opacity: 1;
}

.fabric-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.15);
	border-color: var(--gold);
}

.fabric-image-container {
	position: relative;
	overflow: hidden;
	height: 16rem;
}

.fabric-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.fabric-card:hover .fabric-image {
	transform: scale(1.05);
}

.fabric-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg, rgba(139, 69, 19, 0.8), rgba(218, 165, 32, 0.8));
	opacity: 0;
	transition: opacity 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}

.fabric-card:hover .fabric-overlay {
	opacity: 1;
}

.fabric-actions {
	display: flex;
	gap: 1rem;
	transform: translateY(20px);
	transition: transform 0.3s ease 0.1s;
}

.fabric-card:hover .fabric-actions {
	transform: translateY(0);
}

.action-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(10px);
	border: none;
	color: var(--brand-700);
	transition: all 0.3s ease;
	cursor: pointer;
	text-decoration: none;
}

.action-btn:hover {
	background: white;
	transform: scale(1.1);
	box-shadow: 0 8px 20px -5px rgba(0, 0, 0, 0.2);
}

.action-btn.primary {
	background: var(--brand-600);
	color: white;
}

.action-btn.primary:hover {
	background: var(--brand-700);
}

.fabric-content {
	padding: 1.5rem;
}

.fabric-badges {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1rem;
}

.fabric-badge {
	padding: 0.375rem 0.75rem;
	border-radius: 1rem;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.fabric-badge.broderies {
	background: linear-gradient(135deg, #fef3c7, #fde68a);
	color: #92400e;
}

.fabric-badge.sans-broderies {
	background: linear-gradient(135deg, #dbeafe, #93c5fd);
	color: #1e40af;
}

.fabric-badge.trois-pieces {
	background: linear-gradient(135deg, #f3e8ff, #c4b5fd);
	color: #7c3aed;
}

.fabric-quality {
	padding: 0.25rem 0.5rem;
	border-radius: 0.5rem;
	background: rgba(139, 69, 19, 0.1);
	color: var(--brand-700);
	font-size: 0.75rem;
	font-weight: 500;
}

.fabric-title {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--brand-700);
	margin-bottom: 0.5rem;
	line-height: 1.3;
}

.fabric-description {
	color: #6b7280;
	font-size: 0.875rem;
	line-height: 1.5;
	margin-bottom: 1rem;
}

.fabric-details {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
}

.detail-item {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.detail-label {
	font-size: 0.75rem;
	color: #9ca3af;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.detail-value {
	font-size: 0.875rem;
	color: var(--brand-700);
	font-weight: 600;
}

.detail-price {
	font-size: 0.875rem;
	color: var(--brand-600);
	font-weight: 700;
}

/* Animation pour l'apparition des cartes */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.fabric-card {
	animation: fadeInUp 0.6s ease forwards;
}

.fabric-card:nth-child(1) { animation-delay: 0.1s; }
.fabric-card:nth-child(2) { animation-delay: 0.2s; }
.fabric-card:nth-child(3) { animation-delay: 0.3s; }
.fabric-card:nth-child(4) { animation-delay: 0.4s; }
.fabric-card:nth-child(5) { animation-delay: 0.5s; }
.fabric-card:nth-child(6) { animation-delay: 0.6s; }
.chip:hover { transform:translateY(-1px); }
.chip.active { background:var(--brand-700); color:#fff; border-color:var(--brand-700); }

/* Forms */
.form-label { display:block; font-size:.875rem; font-weight:500; color:#374151; margin-bottom:0.25rem; }
.form-input { width:100%; padding:0.5rem 0.75rem; border-radius:0.5rem; border:1px solid #e5e7eb; outline:none; transition: box-shadow .2s ease, border-color .2s ease; }
.form-input:focus { box-shadow:0 0 0 4px rgba(139,69,19,.18); border-color:var(--accent); }

/* Carousel */
.carousel-slide { display:none; width:100%; height:100%; object-fit:cover; }
.carousel-slide.active { display:block; }

/* Premium hero */
.hero { position:relative; overflow:hidden; }
.hero-bg { position:absolute; inset:0; background:radial-gradient(1200px 500px at -10% -10%, rgba(139,69,19,.08), transparent 60%), radial-gradient(800px 400px at 110% 20%, rgba(218,165,32,.08), transparent 60%), linear-gradient(180deg, #ffffff 0%, #fefcf8 100%); }
.hero-shape { position:absolute; filter:blur(24px); opacity:.7; transform:translateZ(0); }
.shape-1 { width:420px; height:420px; background:conic-gradient(from 180deg at 50% 50%, var(--brand-500), var(--gold)); border-radius:50%; top:-80px; left:-120px; animation:float 12s ease-in-out infinite; }
.shape-2 { width:520px; height:520px; background:conic-gradient(from 90deg at 50% 50%, #f5f5dc, #f0e68c); border-radius:50%; bottom:-180px; right:-120px; animation:float 16s ease-in-out infinite reverse; }
@keyframes float { 0%,100% { transform:translateY(0) scale(1);} 50% { transform:translateY(10px) scale(1.02);} }

/* Stitch divider */
.divider-stitch { height:10px; background:repeating-linear-gradient(90deg, var(--gold) 0 12px, transparent 12px 18px); opacity:.5; border-radius:9999px; }

/* Loader Styles */
.loader-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #ffffff 0%, #fefcf8 30%, #f8f4f0 70%, #ffffff 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	opacity: 1;
	transition: opacity 1.2s ease-out, visibility 1.2s ease-out;
	overflow: hidden;
}

.loader-overlay::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: radial-gradient(circle at 20% 80%, rgba(139, 69, 19, 0.1) 0%, transparent 50%),
	            radial-gradient(circle at 80% 20%, rgba(218, 165, 32, 0.1) 0%, transparent 50%);
	animation: backgroundShift 8s ease-in-out infinite;
}

.loader-overlay.hidden {
	opacity: 0;
	visibility: hidden;
}

.loader-container {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 2;
}

/* Logo animé */
.loader-logo {
	width: 100px;
	height: 100px;
	background: linear-gradient(135deg, var(--brand-600), var(--brand-500), var(--gold));
	border-radius: 50%;
	position: relative;
	margin-bottom: 2rem;
	animation: logoFloat 4s ease-in-out infinite;
	box-shadow: 0 25px 50px rgba(139, 69, 19, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1);
	overflow: hidden;
}

.loader-logo::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 50px;
	height: 50px;
	background: linear-gradient(45deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.6));
	border-radius: 50%;
	animation: logoPulse 3s ease-in-out infinite;
	backdrop-filter: blur(10px);
}

.loader-logo::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 25px;
	height: 25px;
	background: linear-gradient(135deg, var(--brand-600), var(--brand-700));
	border-radius: 50%;
	animation: logoCore 2s ease-in-out infinite;
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Effet de brillance sur le logo */
.loader-logo::before {
	background: linear-gradient(45deg, 
		rgba(255, 255, 255, 0.8) 0%, 
		rgba(255, 255, 255, 0.4) 25%, 
		rgba(255, 255, 255, 0.8) 50%, 
		rgba(255, 255, 255, 0.4) 75%, 
		rgba(255, 255, 255, 0.8) 100%);
	background-size: 200% 200%;
	animation: logoPulse 3s ease-in-out infinite, shine 2s linear infinite;
}

/* Texte du loader */
.loader-text {
	font-family: 'Playfair Display', serif;
	font-size: 2.8rem;
	font-weight: 700;
	background: linear-gradient(135deg, var(--brand-700), var(--brand-600), var(--gold));
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	letter-spacing: 0.15em;
	animation: textFade 3s ease-in-out infinite, textGlow 2s ease-in-out infinite;
	text-shadow: 0 0 30px rgba(139, 69, 19, 0.3);
	position: relative;
}

.loader-text::before {
	content: 'OUASSA_DESIGN';
	position: absolute;
	top: 0;
	left: 0;
	background: linear-gradient(135deg, var(--gold), var(--brand-500));
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: textShimmer 3s ease-in-out infinite;
	opacity: 0.7;
}

.loader-dots {
	display: inline-block;
	animation: dotsBlink 1.8s ease-in-out infinite;
	color: var(--gold);
}

/* Anneaux concentriques */
.loader-ring {
	position: absolute;
	border: 3px solid transparent;
	border-radius: 50%;
	animation: ringRotate 3s linear infinite;
	filter: blur(0.5px);
}

.loader-ring:nth-child(1) {
	width: 140px;
	height: 140px;
	border-top: 3px solid var(--brand-600);
	border-right: 3px solid var(--brand-500);
	animation-duration: 2.5s;
	animation-delay: 0s;
	box-shadow: 0 0 20px rgba(139, 69, 19, 0.3);
}

.loader-ring:nth-child(2) {
	width: 180px;
	height: 180px;
	border-top: 3px solid var(--gold);
	border-left: 3px solid var(--brand-600);
	animation-duration: 3.5s;
	animation-delay: -0.8s;
	box-shadow: 0 0 25px rgba(218, 165, 32, 0.3);
}

.loader-ring:nth-child(3) {
	width: 220px;
	height: 220px;
	border-top: 3px solid var(--accent);
	border-bottom: 3px solid var(--gold);
	animation-duration: 4s;
	animation-delay: -1.5s;
	box-shadow: 0 0 30px rgba(205, 133, 63, 0.3);
}

/* Particules flottantes */
.loader-particles {
	position: absolute;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.particle {
	position: absolute;
	width: 6px;
	height: 6px;
	background: var(--brand-600);
	border-radius: 50%;
	animation: particleFloat 5s ease-in-out infinite;
	box-shadow: 0 0 10px currentColor;
}

.particle:nth-child(1) {
	top: 15%;
	left: 15%;
	animation-delay: 0s;
	background: var(--brand-600);
	box-shadow: 0 0 15px var(--brand-600);
}

.particle:nth-child(2) {
	top: 25%;
	right: 15%;
	animation-delay: 1.2s;
	background: var(--gold);
	box-shadow: 0 0 15px var(--gold);
}

.particle:nth-child(3) {
	bottom: 25%;
	left: 25%;
	animation-delay: 2.4s;
	background: var(--accent);
	box-shadow: 0 0 15px var(--accent);
}

.particle:nth-child(4) {
	bottom: 15%;
	right: 25%;
	animation-delay: 3.6s;
	background: var(--brand-500);
	box-shadow: 0 0 15px var(--brand-500);
}

/* Ondes de particules */
.loader-particles::before,
.loader-particles::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 300px;
	height: 300px;
	border: 1px solid rgba(139, 69, 19, 0.2);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	animation: waveExpand 4s ease-out infinite;
}

.loader-particles::after {
	animation-delay: 2s;
	border-color: rgba(218, 165, 32, 0.2);
}

/* Animations */
@keyframes backgroundShift {
	0%, 100% { 
		background: radial-gradient(circle at 20% 80%, rgba(139, 69, 19, 0.1) 0%, transparent 50%),
		            radial-gradient(circle at 80% 20%, rgba(218, 165, 32, 0.1) 0%, transparent 50%);
	}
	50% { 
		background: radial-gradient(circle at 80% 20%, rgba(139, 69, 19, 0.15) 0%, transparent 50%),
		            radial-gradient(circle at 20% 80%, rgba(218, 165, 32, 0.15) 0%, transparent 50%);
	}
}

@keyframes logoFloat {
	0%, 100% { transform: translateY(0px) scale(1) rotate(0deg); }
	25% { transform: translateY(-8px) scale(1.02) rotate(1deg); }
	50% { transform: translateY(-15px) scale(1.05) rotate(0deg); }
	75% { transform: translateY(-8px) scale(1.02) rotate(-1deg); }
}

@keyframes logoPulse {
	0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.9; }
	50% { transform: translate(-50%, -50%) scale(1.3); opacity: 0.6; }
}

@keyframes logoCore {
	0%, 100% { transform: translate(-50%, -50%) scale(1); }
	50% { transform: translate(-50%, -50%) scale(0.7); }
}

@keyframes shine {
	0% { background-position: -200% -200%; }
	100% { background-position: 200% 200%; }
}

@keyframes ringRotate {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

@keyframes textFade {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.8; transform: scale(1.02); }
}

@keyframes textGlow {
	0%, 100% { filter: drop-shadow(0 0 5px rgba(139, 69, 19, 0.3)); }
	50% { filter: drop-shadow(0 0 20px rgba(218, 165, 32, 0.5)); }
}

@keyframes textShimmer {
	0% { opacity: 0.7; transform: translateX(-10px); }
	50% { opacity: 1; transform: translateX(0px); }
	100% { opacity: 0.7; transform: translateX(10px); }
}

@keyframes dotsBlink {
	0%, 20% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.3; transform: scale(0.8); }
	80%, 100% { opacity: 1; transform: scale(1); }
}

@keyframes particleFloat {
	0%, 100% { 
		transform: translateY(0px) translateX(0px) scale(1);
		opacity: 0.8;
	}
	25% { 
		transform: translateY(-25px) translateX(15px) scale(1.2);
		opacity: 1;
	}
	50% { 
		transform: translateY(-15px) translateX(-10px) scale(0.9);
		opacity: 0.9;
	}
	75% { 
		transform: translateY(-35px) translateX(20px) scale(1.1);
		opacity: 0.95;
	}
}

@keyframes waveExpand {
	0% { 
		transform: translate(-50%, -50%) scale(0.5);
		opacity: 1;
	}
	100% { 
		transform: translate(-50%, -50%) scale(1.5);
		opacity: 0;
	}
}

/* Modal Styles */
.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.9);
	backdrop-filter: blur(12px);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	opacity: 1;
	transition: opacity 0.4s ease, visibility 0.4s ease;
}

.modal-overlay.hidden {
	opacity: 0;
	visibility: hidden;
}

.modal-container {
	width: 100%;
	max-width: 1000px;
	max-height: 95vh;
	background: white;
	border-radius: 1.5rem;
	box-shadow: 0 32px 64px -12px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.1);
	overflow: hidden;
	transform: scale(1) translateY(0);
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-overlay.hidden .modal-container {
	transform: scale(0.95) translateY(20px);
}

.modal-content {
	position: relative;
	width: 100%;
	height: 100%;
}

/* Header du modal */
.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1.5rem 2rem;
	border-bottom: 1px solid #e5e7eb;
	background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
}

.modal-badges {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.modal-badge {
	padding: 0.375rem 1rem;
	border-radius: 9999px;
	font-size: 0.875rem;
	font-weight: 600;
	background: var(--brand-600);
	color: white;
	box-shadow: 0 2px 4px rgba(139, 69, 19, 0.2);
}

.modal-badge.fabric {
	background: var(--gold);
	color: var(--brand-700);
	box-shadow: 0 2px 4px rgba(218, 165, 32, 0.3);
}

.modal-close {
	background: rgba(255, 255, 255, 0.9);
	border: none;
	border-radius: 50%;
	width: 3rem;
	height: 3rem;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s ease;
	backdrop-filter: blur(10px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.modal-close:hover {
	background: rgba(255, 255, 255, 1);
	transform: scale(1.1) rotate(90deg);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

/* Body du modal */
.modal-body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	height: calc(95vh - 100px);
}

/* Galerie d'images */
.modal-gallery {
	position: relative;
	background: #ffffff;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	border-right: 1px solid #e5e7eb;
}

.modal-image-container {
	position: relative;
	flex: 1;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
	background: #ffffff;
}

.modal-image {
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #f3f4f6;
	transition: transform 0.3s ease;
}

.modal-image:hover {
	transform: scale(1.02);
}

.image-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(45deg, rgba(0,0,0,0.1) 0%, transparent 50%, rgba(0,0,0,0.1) 100%);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.modal-image-container:hover .image-overlay {
	opacity: 1;
}

.gallery-btn {
	background: rgba(255, 255, 255, 0.9);
	border: none;
	border-radius: 50%;
	width: 3rem;
	height: 3rem;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s ease;
	backdrop-filter: blur(10px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.gallery-btn:hover {
	background: white;
	transform: scale(1.1);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.image-thumbnails {
	height: 120px;
	padding: 1rem;
	display: flex;
	gap: 0.75rem;
	overflow-x: auto;
	align-items: center;
	background: #f8f9fa;
	border-top: 1px solid #e5e7eb;
	flex-shrink: 0;
}

.thumbnail {
	width: 80px;
	height: 80px;
	object-fit: cover;
	border-radius: 0.5rem;
	cursor: pointer;
	transition: all 0.3s ease;
	border: 2px solid transparent;
	flex-shrink: 0;
}

.thumbnail:hover {
	transform: scale(1.05);
	border-color: var(--brand-600);
}

.thumbnail.active {
	border-color: var(--brand-600);
	box-shadow: 0 0 0 2px rgba(139, 69, 19, 0.2);
}

/* Informations du produit */
.modal-info {
	padding: 2rem;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	background: white;
	max-height: calc(95vh - 100px);
}

.modal-title-section {
	margin-bottom: 1.5rem;
}

.modal-title {
	font-size: 2rem;
	font-weight: 700;
	color: var(--brand-700);
	margin-bottom: 0.75rem;
	line-height: 1.2;
}

.modal-rating {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.stars {
	display: flex;
	gap: 0.25rem;
}

.star {
	color: #fbbf24;
	font-size: 1.25rem;
}

.rating-text {
	color: #6b7280;
	font-size: 0.875rem;
	font-weight: 500;
}

.modal-description {
	color: #4b5563;
	font-size: 1rem;
	line-height: 1.7;
	margin-bottom: 2rem;
}

/* Détails techniques */
.modal-details {
	background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
	border-radius: 1rem;
	padding: 1.5rem;
	margin-bottom: 2rem;
	border: 1px solid #e5e7eb;
}

.details-title {
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--brand-700);
	margin-bottom: 1rem;
}

.details-grid {
	display: grid;
	gap: 1rem;
}

.detail-item {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.75rem;
	background: white;
	border-radius: 0.75rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.detail-item:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.detail-icon {
	width: 2.5rem;
	height: 2.5rem;
	background: var(--brand-600);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	flex-shrink: 0;
}

.detail-content {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	flex: 1;
}

.detail-label {
	font-size: 0.875rem;
	font-weight: 500;
	color: #6b7280;
}

.detail-value {
	font-weight: 600;
	color: #111827;
}

.detail-value.price {
	color: var(--brand-600);
	font-size: 1.125rem;
}

/* Options de personnalisation */
.customization-options {
	background: linear-gradient(135deg, #fef7ed 0%, #fef3c7 100%);
	border-radius: 1rem;
	padding: 1.5rem;
	margin-bottom: 2rem;
	border: 1px solid #fbbf24;
}

.options-title {
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--brand-700);
	margin-bottom: 1rem;
}

.options-list {
	display: grid;
	gap: 1rem;
}

.option-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.75rem;
	background: white;
	border-radius: 0.75rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.option-name {
	font-weight: 500;
	color: #374151;
}

.option-value {
	font-weight: 600;
	color: var(--brand-700);
}

.color-swatches {
	display: flex;
	gap: 0.5rem;
}

.color-swatch {
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	cursor: pointer;
	transition: all 0.3s ease;
	border: 2px solid transparent;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.color-swatch:hover {
	transform: scale(1.2);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Actions */
.modal-actions {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 2rem;
}

.modal-actions .btn-primary,
.modal-actions .btn-secondary {
	flex: 1;
	min-width: 160px;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.875rem 1.5rem;
	font-weight: 600;
	transition: all 0.3s ease;
}

.modal-actions .btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(139, 69, 19, 0.4);
}

.modal-actions .btn-secondary:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Témoignage */
.testimonial {
	background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
	border-radius: 1rem;
	padding: 1.5rem;
	border: 1px solid #0ea5e9;
}

.testimonial-content {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.testimonial-text {
	font-style: italic;
	color: #0f172a;
	font-size: 1rem;
	line-height: 1.6;
	margin: 0;
}

.testimonial-author {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.author-avatar {
	width: 2.5rem;
	height: 2.5rem;
	background: var(--brand-600);
	color: white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 1.125rem;
}

.author-info {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.author-name {
	font-weight: 600;
	color: #0f172a;
	font-size: 0.875rem;
}

.author-location {
	color: #64748b;
	font-size: 0.75rem;
}

/* Responsive Modal */
@media (max-width: 768px) {
	.modal-container {
		max-width: 95vw;
		max-height: 90vh;
		margin: 1rem;
	}
	
	.modal-header {
		padding: 1rem 1.5rem;
	}
	
	.modal-body {
		grid-template-columns: 1fr;
		height: calc(90vh - 80px);
	}
	
	.modal-gallery {
		height: 50vh;
		min-height: 300px;
	}
	
	.modal-image-container {
		flex: 1;
		min-height: 200px;
	}
	
	.image-thumbnails {
		height: 100px;
		padding: 0.75rem;
	}
	
	.thumbnail {
		width: 60px;
		height: 60px;
	}
	
	.modal-info {
		padding: 1.5rem;
		overflow-y: auto;
		max-height: 50vh;
	}
	
	.modal-title {
		font-size: 1.5rem;
	}
	
	.modal-actions {
		flex-direction: column;
	}
	
	.modal-actions .btn-primary,
	.modal-actions .btn-secondary {
		flex: none;
		width: 100%;
	}
	
	.details-grid {
		grid-template-columns: 1fr;
	}
	
	.customization-options,
	.modal-details {
		padding: 1rem;
	}
	
	.testimonial {
		padding: 1rem;
	}
}

@media (max-width: 480px) {
	.modal-container {
		margin: 0.5rem;
		max-height: 95vh;
	}
	
	.modal-header {
		padding: 0.75rem 1rem;
	}
	
	.modal-badges {
		gap: 0.5rem;
	}
	
	.modal-badge {
		padding: 0.25rem 0.75rem;
		font-size: 0.75rem;
	}
	
	.modal-close {
		width: 2.5rem;
		height: 2.5rem;
	}
	
	.modal-info {
		padding: 1rem;
	}
	
	.modal-title {
		font-size: 1.25rem;
	}
	
	.detail-item {
		padding: 0.5rem;
		gap: 0.75rem;
	}
	
	.detail-icon {
		width: 2rem;
		height: 2rem;
	}
}

/* Responsive */
@media (max-width: 768px) {
	.loader-text {
		font-size: 2.2rem;
	}
	
	.loader-logo {
		width: 80px;
		height: 80px;
	}
	
	.loader-logo::before {
		width: 40px;
		height: 40px;
	}
	
	.loader-logo::after {
		width: 20px;
		height: 20px;
	}
	
	.loader-ring:nth-child(1) {
		width: 120px;
		height: 120px;
	}
	
	.loader-ring:nth-child(2) {
		width: 150px;
		height: 150px;
	}
	
	.loader-ring:nth-child(3) {
		width: 180px;
		height: 180px;
	}
	
	.loader-particles::before,
	.loader-particles::after {
		width: 250px;
		height: 250px;
	}
}