/* ============================================

   La Lueur du Seuil — Global Stylesheet

   Multi-page · Modern · Épuré · Design

   ============================================ */



@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&family=Raleway:wght@200;300;400;500;600&display=swap');



/* === CUSTOM PROPERTIES === */

:root {

  --gold: #C9A84C;

  --gold-light: #E8D48B;

  --gold-glow: rgba(201, 168, 76, 0.25);

  --lavender: #9B8BB4;

  --lavender-light: #C4B8D6;

  --lavender-pale: #E8E0F0;

  --cream: #FDF8F0;

  --cream-dark: #F5EDE0;

  --cream-warm: #EDE6D8;

  --brown: #5C4A3A;

  --brown-dark: #3A2E24;

  --brown-light: #7A6B5D;

  --sage: #7A8B6F;

  --sage-light: #A3B396;

  --white: #FFFFFF;

  --text: #3A3A3A;

  --text-light: #6B6B6B;

  --text-muted: #9A9A9A;

  --shadow-sm: 0 2px 8px rgba(92, 74, 58, 0.06);

  --shadow: 0 4px 20px rgba(92, 74, 58, 0.08);

  --shadow-lg: 0 12px 40px rgba(92, 74, 58, 0.12);

  --shadow-xl: 0 24px 60px rgba(92, 74, 58, 0.16);

  --radius: 8px;

  --radius-lg: 16px;

  --transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --transition-slow: 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --font-heading: 'Cormorant Garamond', serif;

  --font-body: 'Raleway', sans-serif;

}



/* === RESET === */

*, *::before, *::after {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

  -webkit-tap-highlight-color: transparent;

}



html {

  font-size: 16px;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}



html.smooth-scroll {

  scroll-behavior: smooth;

}



body {

  font-family: var(--font-body);

  font-weight: 300;

  color: var(--text);

  background-color: var(--cream);

  line-height: 1.7;

  overflow-x: hidden;

  scrollbar-gutter: stable;

}



h1, h2, h3, h4, h5, h6 {

  font-family: var(--font-heading);

  font-weight: 400;

  line-height: 1.2;

}



/* === DOOR INTRO — Immersive entrance animation === */

.door-intro {

  position: relative;

  height: 150vh; /* 1.5x viewport for door + boutique overlay phases */

  background: #1a1410;

  z-index: 50;

}



.door-intro-bg,

.door-intro-front {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100vh;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

  will-change: transform, opacity;

}



.door-intro-bg {

  z-index: 51;

}



.door-intro-bg img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  opacity: 0;

  transform: scale(1.1);

  transition: opacity 0.3s ease;

}



.door-intro-front {

  z-index: 52;

}



.door-intro-front img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transform-origin: center 45%;

  will-change: transform;

}



.door-intro-text {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100vh;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  padding-bottom: 0;

  z-index: 53;

  pointer-events: none;

  will-change: opacity;

}



.door-intro-text span {

  font-family: var(--font-heading);

  font-size: clamp(1.4rem, 3vw, 2.2rem);

  color: rgba(253, 248, 240, 0.95);

  letter-spacing: 0.2em;

  text-transform: uppercase;

  text-shadow: 0 2px 30px rgba(0,0,0,0.8), 0 0 60px rgba(0,0,0,0.5);

  margin-bottom: 1.5rem;

  background: rgba(0,0,0,0.2);

  padding: 0.6rem 2rem;

  border-radius: 999px;

  backdrop-filter: blur(4px);

}



.door-intro-scroll-hint {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 0.5rem;

}



.door-intro-mouse {

  width: 24px;

  height: 38px;

  border: 2px solid rgba(253, 248, 240, 0.5);

  border-radius: 12px;

  position: relative;

}



.door-intro-wheel {

  width: 3px;

  height: 8px;

  background: rgba(253, 248, 240, 0.7);

  border-radius: 2px;

  position: absolute;

  left: 50%;

  top: 6px;

  transform: translateX(-50%);

  animation: doorScrollWheel 1.5s ease-in-out infinite;

}



@keyframes doorScrollWheel {

  0% { opacity: 1; transform: translateX(-50%) translateY(0); }

  100% { opacity: 0; transform: translateX(-50%) translateY(12px); }

}



/* When intro is done, hide fixed layers */

.door-intro.done .door-intro-bg,

.door-intro.done .door-intro-front,

.door-intro.done .door-intro-text {

  position: absolute;

  top: auto;

  bottom: 0;

}



/* Hide intro layers when completely scrolled past */

.door-intro-hidden .door-intro-bg,

.door-intro-hidden .door-intro-front,

.door-intro-hidden .door-intro-text,

.door-intro-hidden .door-overlay {

  display: none !important;

}



/* === DOOR OVERLAY — Elements that pop on boutique background === */

.door-overlay {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100vh;

  z-index: 54;

  pointer-events: none;

  opacity: 0;

}



.door-overlay.active {

  pointer-events: auto;

}



/* Logo + nom en haut à gauche */

.door-overlay-logo {

  position: absolute;

  top: 2.5rem;

  left: 3rem;

  display: flex;

  align-items: center;

  gap: 0.75rem;

  opacity: 0;

  transform: translateY(-20px);

  transition: opacity 0.6s ease, transform 0.6s ease;

}



.door-overlay-logo .door-overlay-header-icon {

  width: 34px;

  height: 34px;

}



.door-overlay-logo img {

  width: 50px;

  height: 50px;

  border-radius: 8px;

  object-fit: cover;

  box-shadow: 0 4px 20px rgba(201, 168, 76, 0.4);

}



/* Titre féerique — écriture qui se révèle */

.door-overlay-title {

  font-family: var(--font-heading);

  font-size: clamp(1.4rem, 2.5vw, 2rem);

  color: var(--cream);

  letter-spacing: 0.05em;

  text-shadow: 0 0 20px rgba(201, 168, 76, 0.6), 0 0 40px rgba(201, 168, 76, 0.3);

  overflow: hidden;

  display: inline-block;

  white-space: nowrap;

  border-right: 2px solid rgba(201, 168, 76, 0.8);

  width: 0;

  animation: none;

}



.door-overlay-title.typing {

  animation: doorTyping 2s steps(18, end) forwards, doorBlink 0.6s step-end infinite;

}



.door-overlay-title.typed {

  width: 100%;

  border-right: none;

  animation: none;

}



@keyframes doorTyping {

  from { width: 0; }

  to { width: 100%; }

}



@keyframes doorBlink {

  50% { border-color: transparent; }

}



/* Header — liens de navigation */

.door-overlay-header {

  position: absolute;

  top: 2.8rem;

  right: 3rem;

  display: flex;

  gap: 2rem;

  opacity: 0;

  transform: translateY(-20px);

  transition: opacity 0.6s ease, transform 0.6s ease;

}



.door-overlay-header a {

  font-family: var(--font-body);

  font-size: 0.85rem;

  font-weight: 400;

  color: var(--cream);

  text-transform: uppercase;

  letter-spacing: 0.15em;

  text-decoration: none;

  text-shadow: 0 2px 10px rgba(0,0,0,0.5);

  transition: color 0.3s ease;

}



.door-overlay-header a:hover {

  color: var(--gold-light);

}



.door-overlay-header-discover {

  border-radius: 8px;

  padding: 0.35rem 1.1rem !important;

  color: rgba(253,248,240,0.92) !important;

  background: rgba(0,0,0,0.25);

  border: 1px solid rgba(201,168,76,0.7);

  box-shadow: 0 0 8px rgba(201,168,76,0.25), inset 0 0 8px rgba(0,0,0,0.2);

  transition: 0.5s ease !important;

  user-select: none;

  text-shadow: 0 1px 6px rgba(0,0,0,0.6);

}



.door-overlay-header-discover:hover {

  color: #fff !important;

  background: rgba(201,168,76,0.15);

  border: 1px solid var(--gold) !important;

  text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #fff !important;

  box-shadow: 0 0 5px rgba(201,168,76,0.8), 0 0 20px rgba(201,168,76,0.6),

    0 0 50px rgba(201,168,76,0.4), 0 0 100px rgba(201,168,76,0.2) !important;

}



.door-overlay-header-icon {

  position: relative;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 42px;

  height: 42px;

  border-radius: 999px;

  border: 1px solid rgba(201,168,76,0.3);

  background: linear-gradient(135deg, rgba(0,0,0,0.55), rgba(0,0,0,0.35));

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

  box-shadow: 0 4px 15px rgba(0,0,0,0.3);

  color: rgba(253,248,240,0.8) !important;

  overflow: hidden;

  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;

  cursor: pointer;

}



.door-overlay-header-icon::before {

  content: '';

  position: absolute;

  inset: 0;

  background: linear-gradient(90deg, transparent, rgba(201,168,76,0.2), transparent);

  transform: translateX(-100%);

  transition: transform 0.7s ease;

}



.door-overlay-header-icon:hover::before {

  transform: translateX(100%);

}



.door-overlay-header-icon:hover {

  transform: scale(1.1) rotate(3deg) !important;

  border-color: rgba(201,168,76,0.7) !important;

  box-shadow: 0 8px 25px rgba(201,168,76,0.35) !important;

  color: var(--gold-light) !important;

}



.door-overlay-header-icon:active {

  transform: scale(0.95) rotate(0deg) !important;

}



/* Bouton central "Découvrir la boutique" */

.door-overlay-cta {

  position: absolute;

  top: 37%;

  left: 61%;

  transform: translate(-50%, -50%) scale(0.8);

  opacity: 0;

  transition: opacity 0.8s ease, transform 0.8s ease;

}



.door-overlay-btn {

  display: inline-flex;

  align-items: center;

  gap: 0.75rem;

  padding: 1.1rem 2.5rem;

  font-family: var(--font-body);

  font-size: 0.9rem;

  font-weight: 500;

  letter-spacing: 0.15em;

  text-transform: uppercase;

  text-decoration: none;

  color: rgba(253,248,240,0.92);

  border: 1px solid rgba(201,168,76,0.7);

  border-radius: 8px;

  background: rgba(0,0,0,0.25);

  box-shadow: 0 0 8px rgba(201,168,76,0.25), inset 0 0 8px rgba(0,0,0,0.2);

  text-shadow: 0 1px 6px rgba(0,0,0,0.6);

  transition: 0.5s ease;

  cursor: pointer;

  user-select: none;

}



.door-overlay-btn:hover {

  color: #fff;

  background: rgba(201,168,76,0.15);

  border: 1px solid var(--gold);

  text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #fff;

  box-shadow: 0 0 5px rgba(201,168,76,0.8), 0 0 20px rgba(201,168,76,0.6),

    0 0 50px rgba(201,168,76,0.4), 0 0 100px rgba(201,168,76,0.2);

}



.door-overlay-btn .btn-arrow {

  display: inline-block;

  width: 20px;

  height: 1px;

  background: var(--gold-light);

  position: relative;

}



.door-overlay-btn .btn-arrow::after {

  content: '';

  position: absolute;

  right: 0;

  top: -3px;

  width: 7px;

  height: 7px;

  border-top: 1px solid var(--gold-light);

  border-right: 1px solid var(--gold-light);

  transform: rotate(45deg);

}



/* Footer en bas */

.door-overlay-footer {

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  padding: 1.2rem 3rem;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 1rem;

  flex-wrap: wrap;

  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 100%);

  opacity: 0;

  transform: translateY(20px);

  transition: opacity 0.6s ease, transform 0.6s ease;

}



.door-overlay-footer-nav {

  display: flex;

  gap: 1.8rem;

  flex-wrap: wrap;

}



.door-overlay-footer-nav a {

  font-family: var(--font-body);

  font-size: 0.78rem;

  font-weight: 500;

  color: rgba(253,248,240,0.75);

  text-decoration: none;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  transition: color 0.3s ease;

}



.door-overlay-footer-nav a:hover {

  color: var(--gold-light);

}



.door-overlay-footer-social {

  display: flex;

  gap: 1rem;

  align-items: center;

}



.door-overlay-footer-social a {

  color: rgba(253,248,240,0.65);

  transition: color 0.3s ease;

  display: flex;

  align-items: center;

  justify-content: center;

}



.door-overlay-footer-social a:hover {

  color: var(--gold-light);

}



.door-overlay-copyright {

  font-family: var(--font-body);

  font-size: 0.72rem;

  color: rgba(253,248,240,0.4);

  letter-spacing: 0.1em;

  white-space: nowrap;

}



/* === HOME-PAGE : masquer tout ce qui est sous le door-intro === */

body.home-page .navbar,

body.home-page .nav-overlay,

body.home-page .marquee,

body.home-page section:not(.door-intro),

body.home-page .split,

body.home-page .footer {

  display: none !important;

}



/* Pop-in state for all overlay elements */

.door-overlay-logo.pop,

.door-overlay-header.pop,

.door-overlay-footer.pop {

  opacity: 1;

  transform: translateY(0);

}



.door-overlay-cta.pop {

  opacity: 1;

  transform: translate(-50%, -50%) scale(1);

}







a {

  text-decoration: none;

  color: inherit;

  transition: color var(--transition);

}



img {

  max-width: 100%;

  height: auto;

  display: block;

}



ul, ol { list-style: none; }



button, input, textarea {

  font-family: inherit;

  font-size: inherit;

  border: none;

  outline: none;

  background: none;

}



/* === CUSTOM CURSOR GLOW (desktop) === */

.cursor-glow {

  position: fixed;

  width: 300px;

  height: 300px;

  border-radius: 50%;

  background: radial-gradient(circle, var(--gold-glow) 0%, transparent 70%);

  pointer-events: none;

  z-index: 9999;

  transform: translate(-50%, -50%);

  transition: opacity 0.3s;

  opacity: 0;

  mix-blend-mode: screen;

}



body:hover .cursor-glow { opacity: 1; }



/* === LOADING SCREEN === */

.loader {

  position: fixed;

  inset: 0;

  z-index: 10000;

  background: var(--brown-dark);

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  transition: opacity 0.6s ease, visibility 0.6s ease;

}



.loader.hidden {

  opacity: 0;

  visibility: hidden;

}



.loader-logo {

  width: 80px;

  height: 80px;

  object-fit: contain;

  animation: loaderPulse 1.5s ease-in-out infinite;

}



.loader-bar {

  width: 120px;

  height: 1px;

  background: rgba(255,255,255,0.15);

  margin-top: 2rem;

  overflow: hidden;

  border-radius: 1px;

}



.loader-bar-inner {

  width: 100%;

  height: 100%;

  background: var(--gold);

  transform-origin: left;

  animation: loaderFill 1.5s ease-in-out forwards;

}



@keyframes loaderPulse {

  0%, 100% { opacity: 0.4; transform: scale(0.95); }

  50% { opacity: 1; transform: scale(1); }

}



@keyframes loaderFill {

  0% { transform: scaleX(0); }

  100% { transform: scaleX(1); }

}



/* === LAYOUT === */

.container {

  max-width: 1280px;

  margin: 0 auto;

  padding: 0 clamp(1.5rem, 4vw, 3rem);

}



.container--narrow {

  max-width: 900px;

}



.container--wide {

  max-width: 1440px;

}



/* === NAVBAR === */

.navbar {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  z-index: 1000;

  padding: 1.2rem 0;

  transition: all var(--transition);

  background: transparent;

}



.navbar.scrolled {

  background: rgba(253, 248, 240, 0.92);

  backdrop-filter: blur(20px);

  -webkit-backdrop-filter: blur(20px);

  box-shadow: 0 1px 30px rgba(92, 74, 58, 0.06);

  padding: 0.7rem 0;

}



.navbar .container {

  display: flex;

  align-items: center;

  justify-content: space-between;

}



.nav-logo {

  display: flex;

  align-items: center;

  gap: 0.75rem;

  z-index: 1001;

}



.nav-logo img {

  height: 48px;

  width: auto;

  transition: height var(--transition);

}



.navbar.scrolled .nav-logo img {

  height: 38px;

}



.nav-logo-text {

  font-family: var(--font-heading);

  font-size: 1.35rem;

  font-weight: 500;

  color: var(--brown);

  letter-spacing: 0.01em;

}



.nav-links {

  display: flex;

  gap: 2.2rem;

  align-items: center;

}



.nav-links a {

  font-size: 0.78rem;

  font-weight: 400;

  text-transform: uppercase;

  letter-spacing: 0.14em;

  color: var(--brown);

  position: relative;

  padding: 0.3rem 0;

}



.nav-links a::after {

  content: '';

  position: absolute;

  bottom: -2px;

  left: 50%;

  width: 0;

  height: 1px;

  background: var(--gold);

  transition: all 0.3s ease;

  transform: translateX(-50%);

}



.nav-links a:hover::after,

.nav-links a.active::after {

  width: 100%;

}



.nav-links a:hover,

.nav-links a.active {

  color: var(--gold);

}



.nav-social-icon {

  display: inline-flex !important;

  align-items: center;

  justify-content: center;

  padding: 0 !important;

  color: var(--text-light) !important;

  transition: color 0.3s ease !important;

}



.nav-social-icon::after {

  display: none !important;

}



.nav-social-icon:hover {

  color: var(--gold) !important;

}



/* Hamburger */

.hamburger {

  display: none;

  flex-direction: column;

  gap: 6px;

  cursor: pointer;

  padding: 5px;

  background: none;

  border: none;

  z-index: 1001;

}



.hamburger span {

  display: block;

  width: 26px;

  height: 1.5px;

  background: var(--brown);

  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);

  transform-origin: center;

}



.hamburger.active span:nth-child(1) {

  transform: rotate(45deg) translate(5px, 5px);

}

.hamburger.active span:nth-child(2) {

  opacity: 0;

  transform: scaleX(0);

}

.hamburger.active span:nth-child(3) {

  transform: rotate(-45deg) translate(5px, -5px);

}



/* Mobile overlay */

.nav-overlay {

  display: none;

  position: fixed;

  inset: 0;

  background: rgba(58, 46, 36, 0.4);

  z-index: 999;

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.4s ease;

}



.nav-overlay.visible {

  opacity: 1;

  pointer-events: auto;

}



/* === PAGE HEADER (for inner pages) === */

.page-header {

  position: relative;

  min-height: 50vh;

  display: flex;

  align-items: flex-end;

  padding-bottom: 4rem;

  overflow: hidden;

  background: linear-gradient(180deg, var(--cream-warm) 0%, var(--cream) 100%);

}



.page-header::before {

  content: '';

  position: absolute;

  top: 0; right: -10%;

  width: 600px; height: 600px;

  border-radius: 50%;

  background: radial-gradient(circle, var(--gold-glow) 0%, transparent 70%);

  pointer-events: none;

}



.page-header::after {

  content: '';

  position: absolute;

  bottom: -20%; left: -10%;

  width: 500px; height: 500px;

  border-radius: 50%;

  background: radial-gradient(circle, rgba(155, 139, 180, 0.08) 0%, transparent 70%);

  pointer-events: none;

}



.page-header-content {

  position: relative;

  z-index: 2;

}



.page-header h1 {

  font-size: clamp(2.5rem, 6vw, 4.5rem);

  color: var(--brown);

  margin-bottom: 0.75rem;

}



.page-header .breadcrumb {

  font-size: 0.8rem;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  color: var(--text-muted);

}



.page-header .breadcrumb a:hover {

  color: var(--gold);

}



.page-header .breadcrumb span {

  color: var(--gold);

}



/* === GLOBAL UTILITIES === */
.hidden { display: none !important; }

/* === SECTION UTILITIES === */

.section {

  padding: clamp(4rem, 8vw, 8rem) 0;

}



.section--cream { background: var(--cream); }

.section--white { background: var(--white); }

.section--warm { background: var(--cream-warm); }

.section--dark {

  background: var(--brown-dark);

  color: var(--cream);

}



.section-label {

  display: inline-block;

  font-size: 0.7rem;

  font-weight: 500;

  text-transform: uppercase;

  letter-spacing: 0.2em;

  color: var(--gold);

  margin-bottom: 1rem;

  position: relative;

  padding-left: 2.5rem;

}



.section-label::before {

  content: '';

  position: absolute;

  left: 0;

  top: 50%;

  width: 1.8rem;

  height: 1px;

  background: var(--gold);

}



.section-title {

  font-size: clamp(2rem, 4.5vw, 3.5rem);

  color: var(--brown);

  margin-bottom: 1.5rem;

  line-height: 1.15;

}



.section--dark .section-title {

  color: var(--cream);

}



.section-text {

  font-size: 1rem;

  color: var(--text-light);

  max-width: 600px;

  line-height: 1.8;

}



.section--dark .section-text {

  color: rgba(253, 248, 240, 0.7);

}



.text-center { text-align: center; }

.mx-auto { margin-left: auto; margin-right: auto; }



/* === DECORATIVE LINE === */

.deco-line {

  width: 50px;

  height: 1px;

  background: var(--gold);

  margin: 1.5rem 0;

}



.deco-line--center {

  margin-left: auto;

  margin-right: auto;

}



/* === BUTTONS === */

.btn {

  display: inline-flex;

  align-items: center;

  gap: 0.75rem;

  padding: 1rem 2.5rem;

  font-family: var(--font-body);

  font-size: 0.78rem;

  font-weight: 400;

  text-transform: uppercase;

  letter-spacing: 0.14em;

  border-radius: 0;

  cursor: pointer;

  position: relative;

  overflow: hidden;

  transition: all var(--transition);

}



.btn--primary {

  background: transparent;

  color: var(--brown);

  border: 1px solid var(--gold);

}



.btn--primary::before {

  content: '';

  position: absolute;

  left: 0; top: 0;

  width: 0; height: 100%;

  background: var(--gold);

  transition: width var(--transition);

  z-index: -1;

}



.btn--primary:hover {

  color: var(--white);

}



.btn--primary:hover::before {

  width: 100%;

}



.btn--filled {

  background: var(--gold);

  color: var(--white);

  border: 1px solid var(--gold);

}



.btn--filled:hover {

  background: var(--brown);

  border-color: var(--brown);

}



.btn--white {

  background: transparent;

  color: var(--cream);

  border: 1px solid rgba(253, 248, 240, 0.4);

}



.btn--white:hover {

  background: var(--cream);

  color: var(--brown);

}



.btn-arrow {

  display: inline-block;

  width: 20px;

  height: 1px;

  background: currentColor;

  position: relative;

  transition: width 0.3s ease;

}



.btn-arrow::after {

  content: '';

  position: absolute;

  right: 0; top: -3px;

  width: 7px; height: 7px;

  border-top: 1px solid currentColor;

  border-right: 1px solid currentColor;

  transform: rotate(45deg);

}



.btn:hover .btn-arrow {

  width: 30px;

}



/* === HERO (Home) === */

.hero {

  position: relative;

  min-height: 100vh;

  display: flex;

  align-items: center;

  overflow: hidden;

  background: var(--cream);

}



.hero-bg {

  position: absolute;

  inset: 0;

  z-index: 0;

}



.hero-bg-shape {

  position: absolute;

  border-radius: 50%;

  filter: blur(80px);

  opacity: 0;

  animation: heroBgFade 2s ease forwards;

}



.hero-bg-shape:nth-child(1) {

  top: -15%; right: -5%;

  width: 50vw; height: 50vw;

  background: var(--gold-glow);

  animation-delay: 0.3s;

}



.hero-bg-shape:nth-child(2) {

  bottom: -20%; left: -10%;

  width: 40vw; height: 40vw;

  background: rgba(155, 139, 180, 0.1);

  animation-delay: 0.6s;

}



.hero-bg-shape:nth-child(3) {

  top: 30%; left: 40%;

  width: 25vw; height: 25vw;

  background: rgba(122, 139, 111, 0.06);

  animation-delay: 0.9s;

}



@keyframes heroBgFade {

  to { opacity: 1; }

}



.hero .container {

  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 4rem;

  align-items: center;

  min-height: 100vh;

  padding-top: 6rem;

  padding-bottom: 4rem;

}



.hero-content {

  max-width: 560px;

}



.hero-label {

  display: inline-block;

  font-size: 0.72rem;

  font-weight: 500;

  text-transform: uppercase;

  letter-spacing: 0.25em;

  color: var(--gold);

  margin-bottom: 1.5rem;

  opacity: 0;

  transform: translateY(20px);

  animation: fadeUp 0.8s ease 0.5s forwards;

}



.hero h1 {

  font-size: clamp(2.8rem, 5.5vw, 4.5rem);

  color: var(--brown);

  line-height: 1.1;

  margin-bottom: 1.5rem;

  opacity: 0;

  transform: translateY(30px);

  animation: fadeUp 1s ease 0.7s forwards;

}



.hero h1 em {

  font-style: italic;

  color: var(--gold);

}



.hero-text {

  font-size: 1.05rem;

  color: var(--text-light);

  line-height: 1.8;

  margin-bottom: 2.5rem;

  opacity: 0;

  transform: translateY(20px);

  animation: fadeUp 0.8s ease 0.9s forwards;

}



.hero-buttons {

  display: flex;

  gap: 1rem;

  flex-wrap: wrap;

  opacity: 0;

  transform: translateY(20px);

  animation: fadeUp 0.8s ease 1.1s forwards;

}



.hero-visual {

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  opacity: 0;

  animation: fadeIn 1.2s ease 0.6s forwards;

}



.hero-image-main {

  position: relative;

  width: 100%;

  max-width: 440px;

  aspect-ratio: 3/4;

  overflow: hidden;

  border-radius: var(--radius-lg);

  box-shadow: var(--shadow-xl);

}



.hero-image-main img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 6s ease;

}



.hero-image-main:hover img {

  transform: scale(1.05);

}



.hero-image-accent {

  position: absolute;

  bottom: -2rem;

  left: -3rem;

  width: 180px;

  aspect-ratio: 1;

  border-radius: var(--radius-lg);

  overflow: hidden;

  box-shadow: var(--shadow-lg);

  border: 4px solid var(--cream);

  z-index: 3;

}



.hero-image-accent img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.hero-float-badge {

  position: absolute;

  top: 2rem;

  right: -1.5rem;

  background: var(--white);

  padding: 1rem 1.5rem;

  border-radius: var(--radius);

  box-shadow: var(--shadow-lg);

  z-index: 3;

  animation: floatBadge 4s ease-in-out infinite;

}



.hero-float-badge-icon {

  font-size: 1.5rem;

  margin-bottom: 0.3rem;

}



.hero-float-badge-text {

  font-size: 0.72rem;

  font-weight: 500;

  text-transform: uppercase;

  letter-spacing: 0.1em;

  color: var(--brown);

}



@keyframes floatBadge {

  0%, 100% { transform: translateY(0); }

  50% { transform: translateY(-10px); }

}



/* === MARQUEE === */

.marquee {

  overflow: hidden;

  padding: 1.5rem 0;

  background: var(--brown-dark);

  white-space: nowrap;

}



.marquee-track {

  display: flex;

  gap: 3rem;

  animation: marqueeScroll 30s linear infinite;

  width: max-content;

}



.marquee-item {

  font-family: var(--font-heading);

  font-size: 1.3rem;

  font-style: italic;

  color: rgba(253, 248, 240, 0.35);

  display: flex;

  align-items: center;

  gap: 3rem;

  flex-shrink: 0;

}



.marquee-item::after {

  content: '✦';

  font-style: normal;

  font-size: 0.6rem;

  color: var(--gold);

}



@keyframes marqueeScroll {

  0% { transform: translateX(0); }

  100% { transform: translateX(-50%); }

}



/* === FEATURED CATEGORIES (Home) === */

.categories-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 2rem;

}



.category-card {

  position: relative;

  aspect-ratio: 3/4;

  border-radius: var(--radius-lg);

  overflow: hidden;

  cursor: pointer;

}



.category-card-bg {

  position: absolute;

  inset: 0;

  background-size: cover;

  background-position: center;

  transition: transform var(--transition-slow);

}



.category-card:hover .category-card-bg {

  transform: scale(1.08);

}



.category-card-overlay {

  position: absolute;

  inset: 0;

  background: linear-gradient(0deg, rgba(58, 46, 36, 0.7) 0%, rgba(58, 46, 36, 0.1) 60%);

  transition: background var(--transition);

}



.category-card:hover .category-card-overlay {

  background: linear-gradient(0deg, rgba(58, 46, 36, 0.85) 0%, rgba(58, 46, 36, 0.2) 60%);

}



.category-card-content {

  position: absolute;

  bottom: 0;

  left: 0; right: 0;

  padding: 2rem;

  color: var(--cream);

  z-index: 2;

}



.category-card-icon {

  font-size: 2rem;

  margin-bottom: 0.8rem;

  display: block;

  transform: translateY(10px);

  opacity: 0.8;

  transition: all var(--transition);

}



.category-card:hover .category-card-icon {

  transform: translateY(0);

  opacity: 1;

}



.category-card h3 {

  font-size: 1.6rem;

  margin-bottom: 0.3rem;

}



.category-card p {

  font-size: 0.85rem;

  opacity: 0;

  transform: translateY(10px);

  transition: all var(--transition);

  max-height: 0;

  overflow: hidden;

}



.category-card:hover p {

  opacity: 0.8;

  transform: translateY(0);

  max-height: 100px;

  margin-top: 0.5rem;

}



/* Placeholder backgrounds with gradients */

.cat-bg-1 { background: linear-gradient(135deg, #D4C5A9 0%, #B8A88A 100%); }

.cat-bg-2 { background: linear-gradient(135deg, #C4B8D6 0%, #9B8BB4 100%); }

.cat-bg-3 { background: linear-gradient(135deg, #A3B396 0%, #7A8B6F 100%); }



/* === SPLIT SECTION (Home about) === */

.split {

  display: grid;

  grid-template-columns: 1fr 1fr;

  min-height: 80vh;

}



.split-image {

  position: relative;

  overflow: hidden;

}



.split-image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.split-image-overlay {

  position: absolute;

  inset: 0;

  background: linear-gradient(90deg, transparent 60%, var(--cream) 100%);

}



.split-content {

  display: flex;

  flex-direction: column;

  justify-content: center;

  padding: clamp(3rem, 6vw, 6rem);

}



/* === VALUES HORIZONTAL SCROLL === */

.values-scroll-wrapper {

  overflow: visible;

  position: relative;

}



.values-scroll {

  display: flex;

  gap: 2rem;

  padding: 2rem 0;

  overflow-x: visible;

  scroll-snap-type: none;

  scrollbar-width: none;

  scroll-behavior: smooth;

  scroll-padding: 0 clamp(1.5rem, 4vw, 3rem);

}



.values-scroll::-webkit-scrollbar { display: none; }



.value-card {

  flex: 0 0 300px;

  scroll-snap-align: start;

  background: var(--white);

  border-radius: var(--radius-lg);

  padding: 2.5rem 2rem;

  box-shadow: var(--shadow);

  transition: all var(--transition);

  position: relative;

  overflow: hidden;

}



.value-card::before {

  content: '';

  position: absolute;

  top: 0; left: 0;

  width: 100%;

  height: 3px;

  background: linear-gradient(90deg, var(--gold), var(--lavender));

  transform: scaleX(0);

  transform-origin: left;

  transition: transform var(--transition);

}



.value-card:hover::before {

  transform: scaleX(1);

}



.value-card:hover {

  transform: translateY(-6px);

  box-shadow: var(--shadow-lg);

}



.value-icon {

  width: 56px;

  height: 56px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.5rem;

  background: var(--cream);

  margin-bottom: 1.5rem;

  transition: all var(--transition);

}



.value-card:hover .value-icon {

  background: var(--gold);

  transform: scale(1.1);

}



.value-card h3 {

  font-size: 1.4rem;

  color: var(--brown);

  margin-bottom: 0.8rem;

}



.value-card p {

  font-size: 0.88rem;

  color: var(--text-light);

}



/* === TESTIMONIALS === */

.testimonials-wrapper {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 2.5rem;

}



.testimonial {

  background: var(--white);

  border-radius: var(--radius-lg);

  padding: 2.5rem;

  box-shadow: var(--shadow);

  position: relative;

  transition: all var(--transition);

}



.testimonial:hover {

  transform: translateY(-4px);

  box-shadow: var(--shadow-lg);

}



.testimonial-quote {

  font-family: var(--font-heading);

  font-size: 4rem;

  color: var(--gold-light);

  line-height: 1;

  margin-bottom: 0.5rem;

}



.testimonial-text {

  font-style: italic;

  font-size: 0.95rem;

  color: var(--text-light);

  line-height: 1.8;

  margin-bottom: 1.5rem;

}



.testimonial-author {

  display: flex;

  align-items: center;

  gap: 0.8rem;

}



.testimonial-avatar {

  width: 44px;

  height: 44px;

  border-radius: 50%;

  background: var(--cream-warm);

  display: flex;

  align-items: center;

  justify-content: center;

  font-family: var(--font-heading);

  font-size: 1.1rem;

  color: var(--brown);

}



.testimonial-author-info h4 {

  font-size: 1rem;

  color: var(--brown);

}



.testimonial-author-info span {

  font-size: 0.75rem;

  color: var(--gold);

}



/* === NEWSLETTER BAND === */

.newsletter-band {

  padding: 5rem 0;

  background: var(--brown-dark);

  position: relative;

  overflow: hidden;

}



.newsletter-band::before {

  content: '';

  position: absolute;

  top: -100px; right: -100px;

  width: 400px; height: 400px;

  border-radius: 50%;

  background: radial-gradient(circle, var(--gold-glow), transparent 70%);

  pointer-events: none;

}



.newsletter-inner {

  text-align: center;

  max-width: 500px;

  margin: 0 auto;

  position: relative;

  z-index: 2;

}



.newsletter-inner h2 {

  font-size: clamp(1.8rem, 3vw, 2.5rem);

  color: var(--cream);

  margin-bottom: 0.5rem;

}



.newsletter-inner p {

  color: rgba(253, 248, 240, 0.6);

  font-size: 0.95rem;

  margin-bottom: 2rem;

}



.newsletter-form {

  display: flex;

  gap: 0;

  max-width: 440px;

  margin: 0 auto;

  border-radius: var(--radius);

  overflow: hidden;

  box-shadow: 0 4px 20px rgba(0,0,0,0.2);

}



.newsletter-form input[type="email"] {

  flex: 1;

  padding: 1rem 1.5rem;

  background: rgba(255,255,255,0.08);

  color: var(--cream);

  font-weight: 300;

  font-size: 0.9rem;

  border: 1px solid rgba(255,255,255,0.1);

  border-right: none;

  border-radius: var(--radius) 0 0 var(--radius);

}



.newsletter-form input[type="email"]::placeholder {

  color: rgba(253, 248, 240, 0.4);

}



.newsletter-form input[type="email"]:focus {

  border-color: var(--gold);

}



.newsletter-form button {

  padding: 1rem 2rem;

  background: var(--gold);

  color: var(--white);

  font-weight: 500;

  font-size: 0.78rem;

  text-transform: uppercase;

  letter-spacing: 0.1em;

  cursor: pointer;

  border-radius: 0 var(--radius) var(--radius) 0;

  transition: background var(--transition);

  white-space: nowrap;

}



.newsletter-form button:hover {

  background: var(--gold-light);

}



/* === FOOTER === */

.footer {

  padding: 5rem 0 2rem;

  background: var(--brown-dark);

  color: rgba(253, 248, 240, 0.7);

}



.footer-grid {

  display: grid;

  grid-template-columns: 2fr 1fr 1fr 1fr;

  gap: 3rem;

  margin-bottom: 4rem;

}



.footer-brand img {

  height: 60px;

  margin-bottom: 1.2rem;

}



.footer-brand p {

  font-size: 0.88rem;

  line-height: 1.8;

  max-width: 300px;

  opacity: 0.6;

}



.footer h4 {

  font-size: 1.1rem;

  color: var(--gold-light);

  margin-bottom: 1.5rem;

  font-weight: 400;

}



.footer ul li {

  margin-bottom: 0.7rem;

}



.footer ul li a {

  font-size: 0.85rem;

  opacity: 0.6;

  transition: all 0.3s ease;

}



.footer ul li a:hover {

  opacity: 1;

  color: var(--gold-light);

  padding-left: 4px;

}



.footer-social {

  display: flex;

  gap: 0.8rem;

  margin-top: 0.5rem;

}



.footer-social a {

  width: 40px;

  height: 40px;

  border-radius: 50%;

  border: 1px solid rgba(255,255,255,0.12);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1rem;

  transition: all 0.3s ease;

}



.footer-social a:hover {

  background: var(--gold);

  border-color: var(--gold);

  color: var(--white);

  transform: translateY(-2px);

}



.footer-bottom {

  border-top: 1px solid rgba(255,255,255,0.06);

  padding-top: 2rem;

  display: flex;

  justify-content: space-between;

  align-items: center;

  font-size: 0.78rem;

  opacity: 0.85;

}



.footer-bottom-links {

  display: flex;

  gap: 2rem;

}



.footer-bottom-links a:hover {

  color: var(--gold-light);

}



/* === PRODUCT GRID (Boutique) === */

.shop-filters {

  display: flex;

  justify-content: center;

  gap: 0.5rem;

  flex-wrap: wrap;

  margin-bottom: 3rem;

}



.filter-btn {

  padding: 0.6rem 1.5rem;

  font-size: 0.78rem;

  font-weight: 400;

  text-transform: uppercase;

  letter-spacing: 0.1em;

  color: var(--text-light);

  border: 1px solid transparent;

  border-radius: 50px;

  cursor: pointer;

  transition: all var(--transition);

}



.filter-btn:hover,

.filter-btn.active {

  border-color: var(--gold);

  color: var(--gold);

  background: rgba(201, 168, 76, 0.06);

}



.products-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

  gap: 2rem;

}



.product-card {

  background: var(--white);

  border-radius: var(--radius-lg);

  overflow: hidden;

  transition: all var(--transition);

  position: relative;

}



.product-card:hover {

  transform: translateY(-6px);

  box-shadow: var(--shadow-xl);

}



.product-card-image {

  aspect-ratio: 1;

  overflow: hidden;

  position: relative;

  background: var(--cream-dark);

  background-size: cover;

  background-position: center;

  display: flex;

  align-items: center;

  justify-content: center;

}



.product-card-image .product-emoji {

  font-size: 4rem;

  transition: transform var(--transition);

}



.product-card[data-category="bougies"] .product-card-image {

  background-image: url('https://picsum.photos/seed/bougies/800/800');

}



.product-card[data-category="huiles"] .product-card-image {

  background-image: url('https://picsum.photos/seed/huiles/800/800');

}



.product-card[data-category="cristaux"] .product-card-image {

  background-image: url('https://picsum.photos/seed/cristaux/800/800');

}



.product-card[data-category="infusions"] .product-card-image {

  background-image: url('https://picsum.photos/seed/infusions/800/800');

}



.product-card[data-category="soins"] .product-card-image {

  background-image: url('https://picsum.photos/seed/soins/800/800');

}



.product-card[data-category="coffrets"] .product-card-image {

  background-image: url('https://picsum.photos/seed/coffrets/800/800');

}



.product-card[data-category] .product-card-image .product-emoji {

  opacity: 0;

}



.product-card:hover .product-emoji {

  transform: scale(1.15) rotate(-3deg);

}



.product-card-badge {

  position: absolute;

  top: 1rem;

  left: 1rem;

  padding: 0.3rem 0.8rem;

  font-size: 0.65rem;

  font-weight: 500;

  text-transform: uppercase;

  letter-spacing: 0.1em;

  border-radius: 50px;

  z-index: 2;

}



.badge-new {

  background: var(--sage);

  color: var(--white);

}



.badge-best {

  background: var(--gold);

  color: var(--white);

}



.product-card-actions {

  position: absolute;

  bottom: 1rem;

  left: 50%;

  transform: translateX(-50%) translateY(20px);

  opacity: 0;

  transition: all var(--transition);

  display: flex;

  gap: 0.5rem;

}



.product-card:hover .product-card-actions {

  transform: translateX(-50%) translateY(0);

  opacity: 1;

}



.product-action-btn {

  width: 42px;

  height: 42px;

  border-radius: 50%;

  background: var(--white);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1rem;

  cursor: pointer;

  box-shadow: var(--shadow);

  transition: all 0.3s ease;

}



.product-action-btn:hover {

  background: var(--gold);

  color: var(--white);

}



.product-card-info {

  padding: 1.5rem;

}



.product-card-category {

  font-size: 0.68rem;

  text-transform: uppercase;

  letter-spacing: 0.12em;

  color: var(--lavender);

  margin-bottom: 0.3rem;

}



.product-card-name {

  font-family: var(--font-heading);

  font-size: 1.25rem;

  color: var(--brown);

  margin-bottom: 0.6rem;

  transition: color 0.3s ease;

}



.product-card:hover .product-card-name {

  color: var(--gold);

}



.product-card-desc {

  font-size: 0.82rem;

  color: var(--text-muted);

  margin-bottom: 1rem;

  line-height: 1.6;

}



.product-card-footer {

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.product-card-price {

  font-family: var(--font-heading);

  font-size: 1.3rem;

  color: var(--gold);

  font-weight: 500;

}



.product-card-rating {

  font-size: 0.75rem;

  color: var(--gold);

  letter-spacing: 2px;

}



/* === ABOUT PAGE — Timeline === */

.timeline {

  position: relative;

  padding: 2rem 0;

}



.timeline::before {

  content: '';

  position: absolute;

  left: 50%;

  top: 0; bottom: 0;

  width: 1px;

  background: var(--gold-light);

  transform: translateX(-50%);

}



.timeline-item {

  display: flex;

  justify-content: flex-end;

  padding-right: calc(50% + 3rem);

  margin-bottom: 4rem;

  position: relative;

}



.timeline-item:nth-child(even) {

  justify-content: flex-start;

  padding-right: 0;

  padding-left: calc(50% + 3rem);

}



.timeline-dot {

  position: absolute;

  left: 50%;

  top: 1rem;

  width: 14px;

  height: 14px;

  border-radius: 50%;

  background: var(--cream);

  border: 2px solid var(--gold);

  transform: translateX(-50%);

  z-index: 2;

  transition: all 0.3s ease;

}



.timeline-item:hover .timeline-dot {

  background: var(--gold);

  transform: translateX(-50%) scale(1.3);

}



.timeline-content {

  max-width: 420px;

}



.timeline-year {

  font-family: var(--font-heading);

  font-size: 2.5rem;

  color: var(--gold);

  margin-bottom: 0.5rem;

}



.timeline-content h3 {

  font-size: 1.4rem;

  color: var(--brown);

  margin-bottom: 0.8rem;

}



.timeline-content p {

  font-size: 0.9rem;

  color: var(--text-light);

  line-height: 1.8;

}



/* === ABOUT — Team === */

.team-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 2.5rem;

}



.team-card {

  text-align: center;

  padding: 2rem;

}



.team-card-photo {

  width: 160px;

  height: 160px;

  border-radius: 50%;

  margin: 0 auto 1.5rem;

  overflow: hidden;

  background: var(--cream-warm);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 3rem;

  border: 3px solid var(--gold-light);

  transition: all var(--transition);

}



.team-card:hover .team-card-photo {

  border-color: var(--gold);

  transform: scale(1.05);

}



.team-card h3 {

  font-size: 1.4rem;

  color: var(--brown);

  margin-bottom: 0.3rem;

}



.team-card span {

  font-size: 0.8rem;

  color: var(--gold);

  text-transform: uppercase;

  letter-spacing: 0.1em;

}



.team-card p {

  font-size: 0.88rem;

  color: var(--text-light);

  margin-top: 1rem;

  line-height: 1.7;

}



/* === CONTACT PAGE === */

.contact-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 4rem;

}



.contact-info-card {

  display: flex;

  gap: 1.2rem;

  padding: 1.5rem;

  border-radius: var(--radius);

  transition: all var(--transition);

}



.contact-info-card:hover {

  background: var(--cream);

}



.contact-info-icon {

  width: 50px;

  height: 50px;

  min-width: 50px;

  border-radius: 50%;

  background: var(--cream);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.2rem;

  transition: all var(--transition);

}



.contact-info-card:hover .contact-info-icon {

  background: var(--gold);

}



.contact-info-card h4 {

  font-size: 1.1rem;

  color: var(--brown);

  margin-bottom: 0.3rem;

}



.contact-info-card p {

  font-size: 0.88rem;

  color: var(--text-light);

}



.social-link {

  display: inline-flex;

  align-items: center;

  color: #7a5c2e;

  font-size: 0.9rem;

  font-weight: 600;

  text-decoration: none;

  border-bottom: 2px solid rgba(122,92,46,0.4);

  padding-bottom: 2px;

  transition: color 0.2s, border-color 0.2s;

  margin-bottom: 0.5rem;

}



.social-link:hover {

  color: #3d2208;

  border-color: #7a5c2e;

}



body.inner-page .social-link {

  color: #7a5c2e;

  border-color: rgba(122,92,46,0.4);

}



body.inner-page .social-link:hover {

  color: #3d2208;

  border-color: #7a5c2e;

}



.contact-form {

  display: flex;

  flex-direction: column;

  gap: 1.5rem;

}



.form-group {

  position: relative;

}



.form-group label {

  display: block;

  font-size: 0.75rem;

  font-weight: 500;

  text-transform: uppercase;

  letter-spacing: 0.12em;

  color: var(--brown-light);

  margin-bottom: 0.5rem;

}



.form-group input,

.form-group textarea,

.form-group select {

  width: 100%;

  padding: 1rem 1.2rem;

  background: var(--cream);

  border: 1px solid rgba(92, 74, 58, 0.1);

  border-radius: var(--radius);

  font-family: var(--font-body);

  font-weight: 300;

  font-size: 0.95rem;

  color: var(--text);

  transition: all 0.3s ease;

}



.form-group input:focus,

.form-group textarea:focus,

.form-group select:focus {

  border-color: var(--gold);

  box-shadow: 0 0 0 3px var(--gold-glow);

}



.form-group textarea {

  min-height: 140px;

  resize: vertical;

}



.form-row {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 1.5rem;

}



/* === FAQ (Contact) === */

.faq-list {

  max-width: 700px;

  margin: 0 auto;

}



.faq-item {

  border-bottom: 1px solid rgba(92, 74, 58, 0.08);

}



.faq-question {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 1.5rem 0;

  cursor: pointer;

  font-family: var(--font-heading);

  font-size: 1.15rem;

  font-weight: 600;

  color: var(--brown);

  transition: color 0.3s ease;

}



.faq-question:hover { color: var(--gold); }



.faq-toggle {

  font-size: 1.5rem;

  font-weight: 200;

  transition: transform 0.3s ease;

  color: var(--gold);

}



.faq-item.open .faq-toggle {

  transform: rotate(45deg);

}



.faq-answer {

  max-height: 0;

  overflow: hidden;

  transition: max-height 0.4s ease, padding 0.4s ease;

}



.faq-item.open .faq-answer {

  max-height: 300px;

  padding-bottom: 1.5rem;

}



.faq-answer p {

  font-size: 0.93rem;

  font-family: var(--font-body);

  font-weight: 300;

  font-style: italic;

  color: var(--text);

  line-height: 1.9;

  border-left: 3px solid var(--gold);

  padding-left: 1rem;

  margin-left: 0.2rem;

}



/* === SCROLL REVEAL === */

.reveal {

  opacity: 0;

  transform: translateY(40px);

  transition: opacity 0.8s ease, transform 0.8s ease;

}



.reveal.visible {

  opacity: 1;

  transform: translateY(0);

}



.reveal-left {

  opacity: 0;

  transform: translateX(-40px);

  transition: opacity 0.8s ease, transform 0.8s ease;

}



.reveal-left.visible {

  opacity: 1;

  transform: translateX(0);

}



.reveal-right {

  opacity: 0;

  transform: translateX(40px);

  transition: opacity 0.8s ease, transform 0.8s ease;

}



.reveal-right.visible {

  opacity: 1;

  transform: translateX(0);

}



.reveal-scale {

  opacity: 0;

  transform: scale(0.9);

  transition: opacity 0.8s ease, transform 0.8s ease;

}



.reveal-scale.visible {

  opacity: 1;

  transform: scale(1);

}



/* Staggered children */

.stagger-children .reveal {

  transition-delay: calc(var(--i, 0) * 0.1s);

}



/* === ANIMATIONS === */

@keyframes fadeUp {

  to {

    opacity: 1;

    transform: translateY(0);

  }

}



@keyframes fadeIn {

  to { opacity: 1; }

}



@keyframes slideInLeft {

  from { opacity: 0; transform: translateX(-60px); }

  to { opacity: 1; transform: translateX(0); }

}



@keyframes slideInRight {

  from { opacity: 0; transform: translateX(60px); }

  to { opacity: 1; transform: translateX(0); }

}



/* === PARALLAX IMAGE PLACEHOLDER === */

.img-placeholder {

  width: 100%;

  height: 100%;

  background: var(--cream-dark);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 4rem;

  opacity: 0.2;

}



/* === RESPONSIVE === */

@media (max-width: 1024px) {

  .hero .container {

    grid-template-columns: 1fr;

    text-align: center;

  }

  .hero-content { max-width: 100%; }

  .hero-buttons { justify-content: center; }

  .hero-visual { margin-top: 2rem; }

  .hero-image-accent { left: auto; right: -1rem; bottom: -1rem; width: 140px; }

  .hero-float-badge { right: 0; top: 0; }



  .categories-grid { grid-template-columns: repeat(2, 1fr); }

  .split { grid-template-columns: 1fr; }

  .split-image { min-height: 50vh; }



  .testimonials-wrapper { grid-template-columns: 1fr; max-width: 500px; margin: 0 auto; }

  .footer-grid { grid-template-columns: repeat(2, 1fr); }

  .timeline::before { left: 2rem; }

  .timeline-item { padding-right: 0; padding-left: 4rem; justify-content: flex-start; }

  .timeline-item:nth-child(even) { padding-left: 4rem; }

  .timeline-dot { left: 2rem; }

  .team-grid { grid-template-columns: repeat(2, 1fr); }

  .contact-grid { grid-template-columns: 1fr; }

}



@media (max-width: 768px) {

  .nav-links {

    position: fixed;

    top: 0;

    right: -100%;

    width: 75%;

    max-width: 340px;

    height: 100vh;

    background: var(--cream);

    flex-direction: column;

    justify-content: center;

    gap: 1.8rem;

    padding: 2rem;

    transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);

    box-shadow: -10px 0 40px rgba(92, 74, 58, 0.1);

  }



  .nav-links.open { right: 0; }

  .nav-overlay { display: block; }

  .hamburger { display: flex; }



  .hero h1 { font-size: clamp(2.2rem, 8vw, 3rem); }

  .hero-image-main { max-width: 300px; }



  .categories-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }



  .page-header { min-height: 40vh; }



  .products-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }



  .team-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }



  .footer-grid { grid-template-columns: 1fr; }

  .footer-bottom { flex-direction: column; gap: 1rem; text-align: center; }

}



@media (max-width: 480px) {

  .products-grid { grid-template-columns: 1fr; }

  .form-row { grid-template-columns: 1fr; }

  .newsletter-form { flex-direction: column; border-radius: 0; }

  .newsletter-form input[type="email"] { border-radius: var(--radius); border-right: 1px solid rgba(255,255,255,0.1); }

  .newsletter-form button { border-radius: var(--radius); }

  .hero-image-accent { display: none; }

  .hero-float-badge { display: none; }

}



/* === SMOOTH PAGE TRANSITIONS === */

.page-transition {

  animation: pageEnter 0.6s ease forwards;

}



@keyframes pageEnter {

  from { opacity: 0; transform: translateY(10px); }

  to { opacity: 1; transform: translateY(0); }

}



/* ============================================

   ADVANCED DESIGN EFFECTS

   Compiled from /design folder references

   ============================================ */



/* === NOISE TEXTURE OVERLAY (from CSS Only - Morph Effect) === */

.noise-overlay {

  position: fixed;

  top: 0; left: 0;

  width: 100%; height: 100%;

  pointer-events: none;

  z-index: 9998;

  opacity: 0.03;

  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");

}



/* === SVG MORPH TEXT (from CSS Only - Morph Effect) === */

.morph-filters {

  position: absolute;

  width: 0; height: 0;

  pointer-events: none;

}



.hero-morph-container {

  position: relative;

  font-family: var(--font-heading);

  font-size: clamp(2.2rem, 5vw, 4rem);

  font-weight: 500;

  font-style: italic;

  filter: url(#threshold);

  user-select: none;

  color: var(--gold);

  margin-bottom: 2rem;

  min-height: 1.4em;

  display: flex;

  justify-content: center;

  align-items: center;

  opacity: 0;

  animation: fadeIn 1s ease 0.4s forwards;

}



.hero-morph-container .morph-word {

  position: absolute;

  top: 50%; left: 50%;

  transform: translate(-50%, -50%);

  opacity: 0;

  white-space: nowrap;

  animation: morphWords 12s infinite ease-in-out;

}



.hero-morph-container .morph-word:nth-child(1) { animation-delay: 0s; }

.hero-morph-container .morph-word:nth-child(2) { animation-delay: 3s; }

.hero-morph-container .morph-word:nth-child(3) { animation-delay: 6s; }

.hero-morph-container .morph-word:nth-child(4) { animation-delay: 9s; }



@keyframes morphWords {

  0% {

    opacity: 0;

    filter: blur(15px);

    transform: translate(-50%, -50%) scale(0.85);

  }

  5% {

    opacity: 0.5;

    filter: blur(8px);

  }

  12%, 25% {

    opacity: 1;

    filter: blur(0px);

    transform: translate(-50%, -50%) scale(1);

  }

  30% {

    opacity: 0.5;

    filter: blur(8px);

  }

  35%, 100% {

    opacity: 0;

    filter: blur(15px);

    transform: translate(-50%, -50%) scale(1.1);

  }

}



/* === SCROLL INDICATOR (from CSS Only - Morph Effect) === */

.scroll-indicator {

  position: absolute;

  bottom: 2.5rem;

  left: 50%;

  transform: translateX(-50%);

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 0.6rem;

  opacity: 0;

  animation: fadeIn 1s ease-out 2s forwards;

  z-index: 5;

}



.scroll-indicator-mouse {

  width: 22px;

  height: 36px;

  border: 1.5px solid var(--brown-light);

  border-radius: 14px;

  position: relative;

}



.scroll-indicator-wheel {

  width: 2px;

  height: 6px;

  background: var(--gold);

  position: absolute;

  top: 7px;

  left: 50%;

  transform: translateX(-50%);

  border-radius: 2px;

  animation: scrollWheel 1.8s infinite;

}



.scroll-indicator-text {

  font-size: 0.6rem;

  text-transform: uppercase;

  letter-spacing: 0.2em;

  color: var(--text-muted);

}



@keyframes scrollWheel {

  0% { transform: translate(-50%, 0); opacity: 1; }

  100% { transform: translate(-50%, 14px); opacity: 0; }

}



/* === ACCORDION GALLERY (compiled from accordion gallery zoom animation) === */

.accordion-gallery {

  display: flex;

  justify-content: center;

  align-items: center;

  overflow: hidden;

  border-radius: var(--radius-lg);

  height: 65vmin;

  max-height: 550px;

}



.accordion-gallery .acc-card {

  flex: 1;

  transition: all 0.8s ease-in-out;

  height: 100%;

  position: relative;

  overflow: hidden;

  cursor: pointer;

}



.accordion-gallery .acc-card:not(:last-child) {

  margin-right: 4px;

}



.accordion-gallery .acc-card-bg {

  position: absolute;

  inset: 0;

  background-size: cover;

  background-position: center;

  transition: all 0.8s ease-in-out;

  filter: brightness(0.7) saturate(0.8);

}



.accordion-gallery .acc-card:hover .acc-card-bg {

  filter: brightness(0.85) saturate(1);

  transform: scale(1.05);

}



.accordion-gallery .acc-card:hover {

  flex-grow: 4;

}



.accordion-gallery .acc-card-content {

  position: absolute;

  bottom: 0; left: 0; right: 0;

  padding: 2rem;

  z-index: 2;

  color: var(--cream);

}



.accordion-gallery .acc-card-label {

  font-size: 0.65rem;

  text-transform: uppercase;

  letter-spacing: 0.2em;

  color: var(--gold-light);

  margin-bottom: 0.5rem;

  opacity: 0;

  transform: translateY(8px);

  transition: all 0.5s ease 0.1s;

}



.accordion-gallery .acc-card:hover .acc-card-label {

  opacity: 1;

  transform: translateY(0);

}



.accordion-gallery .acc-card h3 {

  font-size: 1.4rem;

  font-family: var(--font-heading);

  transition: all 0.5s ease;

  transform: rotate(-90deg) translateX(-100%);

  transform-origin: 0 0;

  white-space: nowrap;

  position: absolute;

  bottom: 2rem;

  left: 1.5rem;

}



.accordion-gallery .acc-card:hover h3 {

  transform: rotate(0deg) translateX(0);

  position: relative;

  bottom: auto;

  left: auto;

  font-size: 1.8rem;

}



.accordion-gallery .acc-card-desc {

  font-size: 0.85rem;

  opacity: 0;

  max-height: 0;

  overflow: hidden;

  transition: all 0.5s ease 0.15s;

  line-height: 1.6;

  color: rgba(253, 248, 240, 0.8);

}



.accordion-gallery .acc-card:hover .acc-card-desc {

  opacity: 1;

  max-height: 100px;

  margin-top: 0.6rem;

}



.accordion-gallery .acc-card-cta {

  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

  font-size: 0.72rem;

  text-transform: uppercase;

  letter-spacing: 0.12em;

  color: var(--gold-light);

  opacity: 0;

  transform: translateY(10px);

  transition: all 0.5s ease 0.25s;

  margin-top: 1rem;

}



.accordion-gallery .acc-card:hover .acc-card-cta {

  opacity: 1;

  transform: translateY(0);

}



/* Gradient overlay for accordion cards */

.accordion-gallery .acc-card::after {

  content: '';

  position: absolute;

  inset: 0;

  background: linear-gradient(0deg, rgba(58,46,36,0.8) 0%, rgba(58,46,36,0.1) 50%, transparent 100%);

  z-index: 1;

  transition: background 0.5s ease;

}



.accordion-gallery .acc-card:hover::after {

  background: linear-gradient(0deg, rgba(58,46,36,0.9) 0%, rgba(58,46,36,0.3) 60%, transparent 100%);

}



.accordion-gallery .acc-card-content {

  z-index: 3;

}



/* Placeholder gradient backgrounds */

.acc-bg-candles { background: linear-gradient(135deg, #D4A76A 0%, #8B6914 50%, #5C4A3A 100%); }

.acc-bg-crystals { background: linear-gradient(135deg, #C4B8D6 0%, #7B5EA7 50%, #4A3572 100%); }

.acc-bg-herbs { background: linear-gradient(135deg, #A3B396 0%, #5A7A4F 50%, #3A5230 100%); }

.acc-bg-rituals { background: linear-gradient(135deg, #E8D48B 0%, #C9A84C 50%, #8B7633 100%); }

.acc-bg-teas { background: linear-gradient(135deg, #D4C5A9 0%, #A69070 50%, #6B5A40 100%); }



/* === GLASS CARD EFFECT === */

.glass-card {

  background: rgba(255, 255, 255, 0.15);

  backdrop-filter: blur(20px);

  -webkit-backdrop-filter: blur(20px);

  border: 1px solid rgba(255, 255, 255, 0.2);

  border-radius: var(--radius-lg);

  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);

}



/* === FLOATING ELEMENTS === */

.float-element {

  animation: floatGentle 6s ease-in-out infinite;

}



.float-element:nth-child(2) { animation-delay: -2s; }

.float-element:nth-child(3) { animation-delay: -4s; }



@keyframes floatGentle {

  0%, 100% { transform: translateY(0) rotate(0deg); }

  33% { transform: translateY(-12px) rotate(1deg); }

  66% { transform: translateY(-6px) rotate(-1deg); }

}



/* === GLOWING BORDER ANIMATION === */

.glow-border {

  position: relative;

  overflow: hidden;

}



.glow-border::before {

  content: '';

  position: absolute;

  top: -2px; left: -2px; right: -2px; bottom: -2px;

  background: conic-gradient(

    from 0deg,

    var(--gold),

    var(--lavender),

    var(--sage),

    var(--gold)

  );

  border-radius: inherit;

  z-index: -1;

  animation: glowRotate 4s linear infinite;

  opacity: 0;

  transition: opacity 0.4s ease;

}



.glow-border:hover::before {

  opacity: 1;

}



@keyframes glowRotate {

  from { transform: rotate(0deg); }

  to { transform: rotate(360deg); }

}



/* === TESTIMONIALS CAROUSEL (Fancy Slider inspired) === */

.testimonials-carousel {

  position: relative;

  max-width: 700px;

  margin: 0 auto;

  overflow: hidden;

}



.testimonials-track {

  display: flex;

  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);

}



.testimonial-slide {

  min-width: 100%;

  padding: 0 1rem;

}



.testimonial-slide-inner {

  background: var(--white);

  border-radius: var(--radius-lg);

  padding: 3rem;

  box-shadow: var(--shadow);

  text-align: center;

  position: relative;

}



.testimonial-slide-inner .testimonial-quote {

  font-family: var(--font-heading);

  font-size: 5rem;

  color: var(--gold-light);

  line-height: 0.8;

  margin-bottom: 1rem;

}



.testimonial-slide-inner .testimonial-text {

  font-family: var(--font-heading);

  font-style: italic;

  font-size: 1.25rem;

  color: var(--text);

  line-height: 1.8;

  margin-bottom: 2rem;

}



.testimonial-slide-inner .testimonial-author-info {

  text-align: center;

}



.testimonial-slide-inner .testimonial-author-info h4 {

  font-family: var(--font-heading);

  font-size: 1.2rem;

  color: var(--brown);

}



.testimonial-slide-inner .testimonial-author-info span {

  font-size: 0.8rem;

  color: var(--gold);

  letter-spacing: 2px;

}



/* Carousel controls */

.carousel-controls {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 1.5rem;

  margin-top: 2.5rem;

}



.carousel-btn {

  width: 44px; height: 44px;

  border-radius: 50%;

  border: 1px solid var(--gold-light);

  background: transparent;

  color: var(--gold);

  font-size: 1.2rem;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: all 0.3s ease;

}



.carousel-btn:hover {

  background: var(--gold);

  color: var(--white);

  border-color: var(--gold);

}



.carousel-dots {

  display: flex;

  gap: 0.5rem;

}



.carousel-dot {

  width: 8px; height: 8px;

  border-radius: 50%;

  background: var(--gold-light);

  border: none;

  cursor: pointer;

  transition: all 0.3s ease;

  padding: 0;

}



.carousel-dot.active {

  background: var(--gold);

  transform: scale(1.3);

}



/* === HORIZONTAL SCROLL STRIP (Locomotive Scroll inspired) === */

.hscroll-strip {

  overflow-x: auto;

  overflow-y: hidden;

  display: flex;

  gap: 1.5rem;

  padding: 2rem 0;

  scroll-snap-type: x mandatory;

  scrollbar-width: none;

  -ms-overflow-style: none;

  cursor: grab;

}



.hscroll-strip:active { cursor: grabbing; }

.hscroll-strip::-webkit-scrollbar { display: none; }



.hscroll-item {

  flex: 0 0 auto;

  scroll-snap-align: start;

  border-radius: var(--radius-lg);

  overflow: hidden;

  position: relative;

  transition: transform 0.5s ease;

}



.hscroll-item:hover {

  transform: translateY(-8px);

}



.hscroll-item img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.6s ease;

}



.hscroll-item:hover img {

  transform: scale(1.08);

}



/* === ANIMATED COUNTER === */

.counter-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 2rem;

  text-align: center;

}



.counter-item {

  padding: 2rem;

}



.counter-number {

  font-family: var(--font-heading);

  font-size: 3.5rem;

  color: var(--gold);

  font-weight: 500;

  line-height: 1;

  margin-bottom: 0.5rem;

}



.counter-label {

  font-size: 0.8rem;

  text-transform: uppercase;

  letter-spacing: 0.12em;

  color: var(--text-light);

}



/* === RESPONSIVE for new effects === */

@media (max-width: 768px) {

  .accordion-gallery {

    flex-direction: column;

    height: auto;

    max-height: none;

  }



  .accordion-gallery .acc-card {

    flex: none;

    height: 200px;

    margin-right: 0;

  }



  .accordion-gallery .acc-card:not(:last-child) {

    margin-right: 0;

    margin-bottom: 4px;

  }



  .accordion-gallery .acc-card:hover {

    flex-grow: unset;

    height: 350px;

  }



  .accordion-gallery .acc-card h3 {

    transform: none;

    position: relative;

    bottom: auto;

    left: auto;

  }



  .counter-grid {

    grid-template-columns: repeat(2, 1fr);

  }



  .hero-morph-container {

    font-size: clamp(1.6rem, 6vw, 2.5rem);

  }



  .scroll-indicator { display: none; }

}



@media (max-width: 480px) {

  .counter-grid {

    grid-template-columns: 1fr 1fr;

    gap: 1rem;

  }

}



/* ============================================================

   PANIER — CART NAV BUTTON

   ============================================================ */



.cart-nav-btn {

  position: relative;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 40px;

  height: 40px;

  border-radius: 999px;

  border: 1px solid rgba(201,168,76,0.35);

  background: rgba(201,168,76,0.08);

  color: rgba(253,248,240,0.85);

  cursor: pointer;

  flex-shrink: 0;

  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;

}



.cart-nav-btn:hover {

  border-color: var(--gold);

  background: rgba(201,168,76,0.18);

  color: var(--gold-light);

}



body.inner-page[data-theme="light"] .cart-nav-btn {

  color: var(--brown);

  border-color: rgba(92,74,58,0.25);

  background: rgba(92,74,58,0.05);

}



body.inner-page[data-theme="light"] .cart-nav-btn:hover {

  border-color: var(--gold);

  background: rgba(201,168,76,0.08);

  color: var(--gold);

}



.cart-badge {

  position: absolute;

  top: -4px;

  right: -4px;

  width: 18px;

  height: 18px;

  border-radius: 50%;

  background: var(--gold);

  color: #1a1208;

  font-size: 0.65rem;

  font-weight: 700;

  display: flex;

  align-items: center;

  justify-content: center;

  animation: badgePop 0.3s cubic-bezier(0.34,1.56,0.64,1);

}



@keyframes badgePop {

  from { transform: scale(0); }

  to   { transform: scale(1); }

}



/* ============================================================

   PANIER — OVERLAY

   ============================================================ */



.cart-overlay {

  position: fixed;

  inset: 0;

  background: rgba(0,0,0,0.55);

  backdrop-filter: blur(4px);

  -webkit-backdrop-filter: blur(4px);

  z-index: 1100;

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.35s ease;

}



.cart-overlay.visible {

  opacity: 1;

  pointer-events: all;

}



/* ============================================================

   PANIER — SIDEBAR

   ============================================================ */



.cart-sidebar {

  position: fixed;

  top: 0;

  right: -440px;

  width: 420px;

  max-width: 95vw;

  height: 100dvh;

  background: #13100a;

  border-left: 1px solid rgba(201,168,76,0.2);

  z-index: 1200;

  display: flex;

  flex-direction: column;

  transition: right 0.4s cubic-bezier(0.32,0.72,0,1);

  box-shadow: -10px 0 60px rgba(0,0,0,0.6);

}



.cart-sidebar.open { right: 0; }



.cart-sidebar-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 1.5rem 1.8rem;

  border-bottom: 1px solid rgba(201,168,76,0.15);

}



.cart-sidebar-header h2 {

  font-family: var(--font-heading);

  font-size: 1.25rem;

  color: var(--cream);

  letter-spacing: 0.05em;

}



.cart-sidebar-header button {

  background: none;

  border: none;

  color: rgba(253,248,240,0.5);

  cursor: pointer;

  padding: 6px;

  border-radius: 6px;

  transition: color 0.2s, background 0.2s;

}



.cart-sidebar-header button:hover {

  color: var(--cream);

  background: rgba(255,255,255,0.06);

}



.cart-items {

  flex: 1;

  overflow-y: auto;

  padding: 1rem 1.8rem;

}



.cart-items::-webkit-scrollbar { width: 4px; }

.cart-items::-webkit-scrollbar-track { background: transparent; }

.cart-items::-webkit-scrollbar-thumb { background: rgba(201,168,76,0.3); border-radius: 2px; }



.cart-empty {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 1rem;

  padding: 3rem 1rem;

  text-align: center;

  color: rgba(253,248,240,0.35);

}



.cart-empty svg { opacity: 0.3; }



.cart-empty p {

  font-family: var(--font-body);

  font-size: 0.95rem;

}



.cart-empty-link {

  color: var(--gold);

  font-size: 0.85rem;

  text-decoration: none;

  border-bottom: 1px solid rgba(201,168,76,0.3);

  padding-bottom: 2px;

  transition: border-color 0.2s;

}



.cart-empty-link:hover { border-color: var(--gold); }



.cart-item {

  display: flex;

  align-items: center;

  gap: 1rem;

  padding: 1rem 0;

  border-bottom: 1px solid rgba(201,168,76,0.1);

}



.cart-item img {

  width: 64px;

  height: 64px;

  object-fit: cover;

  border-radius: 8px;

  border: 1px solid rgba(201,168,76,0.15);

  flex-shrink: 0;

}



.cart-item-details { flex: 1; min-width: 0; }



.cart-item-name {

  font-family: var(--font-heading);

  font-size: 0.9rem;

  color: var(--cream);

  margin-bottom: 0.25rem;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}



.cart-item-price {

  font-size: 0.85rem;

  color: var(--gold);

  margin-bottom: 0.5rem;

}



.cart-item-qty-row {

  display: flex;

  align-items: center;

  gap: 0.6rem;

}



.cart-qty-btn {

  width: 26px;

  height: 26px;

  border-radius: 6px;

  border: 1px solid rgba(201,168,76,0.3);

  background: rgba(201,168,76,0.08);

  color: var(--cream);

  font-size: 1rem;

  cursor: pointer;

  transition: background 0.2s, border-color 0.2s;

}



.cart-qty-btn:hover {

  background: rgba(201,168,76,0.2);

  border-color: var(--gold);

}



.cart-item-qty-row span {

  font-size: 0.9rem;

  color: var(--cream);

  min-width: 20px;

  text-align: center;

}



.cart-item-remove {

  background: none;

  border: none;

  color: rgba(253,248,240,0.3);

  font-size: 1.3rem;

  cursor: pointer;

  padding: 4px 6px;

  border-radius: 6px;

  line-height: 1;

  transition: color 0.2s, background 0.2s;

  flex-shrink: 0;

}



.cart-item-remove:hover {

  color: #e07070;

  background: rgba(224,112,112,0.1);

}



.cart-footer {

  padding: 1.4rem 1.8rem 2rem;

  border-top: 1px solid rgba(201,168,76,0.15);

  background: #0e0b07;

}



.cart-total-row {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 1.2rem;

  font-family: var(--font-heading);

  font-size: 1rem;

  color: rgba(253,248,240,0.7);

}



.cart-total-amount {

  font-size: 1.3rem;

  color: var(--gold-light);

}



.cart-paypal-btn {

  width: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 0.6rem;

  padding: 0.9rem 1.5rem;

  background: #ffc439;

  border: none;

  border-radius: 8px;

  font-family: var(--font-body);

  font-size: 0.9rem;

  font-weight: 600;

  color: #003087;

  cursor: pointer;

  transition: background 0.2s ease, transform 0.15s ease;

  margin-bottom: 0.6rem;

}



.cart-paypal-btn:hover {

  background: #f5ba30;

  transform: translateY(-1px);

}



.paypal-logo-text {

  font-family: 'Helvetica Neue', Arial, sans-serif;

  font-size: 1.35rem;

  font-weight: 700;

  font-style: italic;

  letter-spacing: -0.5px;

  line-height: 1;

}



.cart-paypal-note {

  text-align: center;

  font-size: 0.7rem;

  color: rgba(253,248,240,0.3);

}



/* ============================================================

   PRODUIT — MODAL

   ============================================================ */



.product-modal {

  position: fixed;

  inset: 0;

  z-index: 1300;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 1.5rem;

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.3s ease;

}



.product-modal.open {

  opacity: 1;

  pointer-events: all;

}



.product-modal-inner {

  position: relative;

  background: #1a140c;

  border: 1px solid rgba(201,168,76,0.25);

  border-radius: 16px;

  width: 100%;

  max-width: 700px;

  max-height: 85vh;

  overflow-y: auto;

  display: grid;

  grid-template-columns: 1fr 1fr;

  box-shadow: 0 25px 80px rgba(0,0,0,0.7), 0 0 40px rgba(201,168,76,0.1);

  animation: modalSlideIn 0.35s cubic-bezier(0.34,1.2,0.64,1);

}



@keyframes modalSlideIn {

  from { transform: scale(0.92) translateY(20px); opacity: 0; }

  to   { transform: scale(1)    translateY(0);    opacity: 1; }

}



.product-modal-close {

  position: absolute;

  top: 1rem;

  right: 1rem;

  background: rgba(255,255,255,0.06);

  border: none;

  border-radius: 8px;

  color: rgba(253,248,240,0.5);

  cursor: pointer;

  padding: 6px;

  z-index: 2;

  transition: color 0.2s, background 0.2s;

}



.product-modal-close:hover {

  color: var(--cream);

  background: rgba(255,255,255,0.12);

}



.product-modal-img-wrap {

  border-radius: 16px 0 0 16px;

  overflow: hidden;

  min-height: 320px;

}



.product-modal-img-wrap img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.product-modal-body {

  padding: 2.5rem 2rem;

  display: flex;

  flex-direction: column;

}



.product-modal-category {

  font-size: 0.7rem;

  text-transform: uppercase;

  letter-spacing: 0.15em;

  color: var(--gold);

  margin-bottom: 0.5rem;

}



.product-modal-name {

  font-family: var(--font-heading);

  font-size: 1.5rem;

  color: var(--cream);

  margin-bottom: 0.4rem;

  line-height: 1.2;

}



.product-modal-rating {

  color: var(--gold);

  font-size: 0.85rem;

  letter-spacing: 2px;

  margin-bottom: 1rem;

}



.product-modal-desc {

  font-size: 0.85rem;

  color: rgba(253,248,240,0.6);

  line-height: 1.7;

  flex: 1;

  margin-bottom: 1.2rem;

}



.product-modal-price {

  font-family: var(--font-heading);

  font-size: 1.8rem;

  color: var(--gold-light);

  margin-bottom: 1.2rem;

}



.product-modal-qty-row {

  display: flex;

  align-items: center;

  gap: 1rem;

  margin-bottom: 1.2rem;

}



.modal-qty-btn {

  width: 36px;

  height: 36px;

  border-radius: 8px;

  border: 1px solid rgba(201,168,76,0.35);

  background: rgba(201,168,76,0.08);

  color: var(--cream);

  font-size: 1.2rem;

  cursor: pointer;

  transition: background 0.2s, border-color 0.2s;

}



.modal-qty-btn:hover {

  background: rgba(201,168,76,0.2);

  border-color: var(--gold);

}



.modal-qty-val {

  font-family: var(--font-heading);

  font-size: 1.1rem;

  color: var(--cream);

  min-width: 30px;

  text-align: center;

}



.product-modal-add-btn {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 0.6rem;

  width: 100%;

  padding: 0.9rem;

  background: rgba(201,168,76,0.12);

  border: 1px solid rgba(201,168,76,0.5);

  border-radius: 8px;

  color: var(--cream);

  font-family: var(--font-body);

  font-size: 0.9rem;

  font-weight: 500;

  letter-spacing: 0.05em;

  cursor: pointer;

  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s, color 0.3s;

}



.product-modal-add-btn:hover {

  background: rgba(201,168,76,0.22);

  border-color: var(--gold);

  color: var(--gold-light);

  box-shadow: 0 0 20px rgba(201,168,76,0.25);

}



@media (max-width: 580px) {

  .product-modal-inner {

    grid-template-columns: 1fr;

    max-height: 90vh;

  }

  .product-modal-img-wrap {

    border-radius: 16px 16px 0 0;

    min-height: 200px;

  }

  .cart-sidebar { width: 100%; max-width: 100%; right: -110%; }

  .cart-sidebar.open { right: 0; }

}



/* ============================================================

   BOUTON TOGGLE LIGHT / DARK

   ============================================================ */



.theme-toggle {

  position: relative;

  width: 52px;

  height: 28px;

  border-radius: 999px;

  border: 1px solid rgba(201,168,76,0.4);

  background: rgba(201,168,76,0.1);

  cursor: pointer;

  padding: 0;

  flex-shrink: 0;

  transition: background 0.4s ease, border-color 0.4s ease;

  overflow: hidden;

}



.theme-toggle:hover {

  border-color: var(--gold);

  background: rgba(201,168,76,0.2);

}



.theme-toggle-knob {

  position: absolute;

  top: 3px;

  left: 3px;

  width: 20px;

  height: 20px;

  border-radius: 50%;

  background: var(--gold);

  box-shadow: 0 0 8px rgba(201,168,76,0.6);

  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), background 0.4s ease;

  display: flex;

  align-items: center;

  justify-content: center;

}



.theme-toggle-knob svg {

  width: 12px;

  height: 12px;

  transition: opacity 0.3s ease, transform 0.4s ease;

  position: absolute;

}



.theme-toggle-knob .icon-moon {

  color: #1a1208;

  opacity: 1;

}



.theme-toggle-knob .icon-sun {

  color: #fff;

  opacity: 0;

  transform: rotate(90deg);

}



body[data-theme="light"] .theme-toggle-knob {

  transform: translateX(24px);

  background: #f5c842;

  box-shadow: 0 0 12px rgba(245,200,66,0.8);

}



body[data-theme="light"] .theme-toggle-knob .icon-moon {

  opacity: 0;

  transform: rotate(-90deg);

}



body[data-theme="light"] .theme-toggle-knob .icon-sun {

  opacity: 1;

  transform: rotate(0deg);

}



body[data-theme="light"] .theme-toggle {

  background: rgba(245,200,66,0.15);

  border-color: rgba(245,200,66,0.6);

}



/* ============================================================

   THÈME CLAIR — OVERRIDES POUR inner-page[data-theme=light]

   ============================================================ */



body.inner-page[data-theme="light"] {

  background: #fdf8f0;

  color: var(--brown);

}



body.inner-page[data-theme="light"] .navbar.scrolled {

  background: rgba(253,248,240,0.96);

  border-bottom: 1px solid rgba(201,168,76,0.15);

  box-shadow: 0 2px 20px rgba(92,74,58,0.08);

}



body.inner-page[data-theme="light"] .navbar.scrolled .nav-logo-text {

  color: var(--brown);

}



body.inner-page[data-theme="light"] .navbar.scrolled .nav-links a {

  color: var(--text-light);

}



body.inner-page[data-theme="light"] .navbar.scrolled .nav-links a:hover,

body.inner-page[data-theme="light"] .navbar.scrolled .nav-links a.active {

  color: var(--gold);

}



body.inner-page[data-theme="light"] .hamburger span {

  background: var(--brown);

}



body.inner-page[data-theme="light"] .page-header {

  background:

    linear-gradient(to bottom, rgba(240,230,210,0.72) 0%, rgba(240,230,210,0.92) 100%),

    url('../assets/images/boutique.png') center/cover no-repeat;

}



body.inner-page[data-theme="light"] .page-header h1 {

  color: #2a1e12;

  text-shadow: 0 1px 0 rgba(255,255,255,0.6), 0 2px 12px rgba(255,255,255,0.4);

}



body.inner-page[data-theme="light"] .page-header .breadcrumb {

  color: #5c4a3a;

  font-weight: 600;

}



body.inner-page[data-theme="light"] .page-header .breadcrumb a {

  color: #6b5442;

}



body.inner-page[data-theme="light"] .page-header .section-text {

  color: #3d2e1e;

  font-weight: 500;

}



body.inner-page[data-theme="light"] .section--cream,

body.inner-page[data-theme="light"] .section--warm {

  background: var(--cream);

}



body.inner-page[data-theme="light"] .section--white {

  background: var(--white);

}



body.inner-page[data-theme="light"] .section--dark {

  background: var(--brown-dark);

}



body.inner-page[data-theme="light"] .section-label { color: var(--gold); }

body.inner-page[data-theme="light"] .section-title { color: var(--brown); }

body.inner-page[data-theme="light"] .section-text  { color: var(--text-light); }

body.inner-page[data-theme="light"] .deco-line { background: linear-gradient(90deg, transparent, var(--gold), transparent); }



body.inner-page[data-theme="light"] .filter-btn {

  background: transparent;

  border-color: rgba(92,74,58,0.2);

  color: var(--text-light);

}

body.inner-page[data-theme="light"] .filter-btn:hover,

body.inner-page[data-theme="light"] .filter-btn.active {

  border-color: var(--gold);

  color: var(--gold);

  background: rgba(201,168,76,0.06);

}



body.inner-page[data-theme="light"] .product-card {

  background: var(--white);

  border: 1px solid transparent;

  box-shadow: var(--shadow-sm);

}

body.inner-page[data-theme="light"] .product-card:hover {

  border-color: transparent;

  box-shadow: var(--shadow-xl);

}

body.inner-page[data-theme="light"] .product-card-name  { color: var(--brown); }

body.inner-page[data-theme="light"] .product-card-desc  { color: var(--text-muted); }

body.inner-page[data-theme="light"] .product-card-info  { border-top: 1px solid rgba(92,74,58,0.08); }



body.inner-page[data-theme="light"] .value-card {

  background: var(--white);

  border: 1px solid transparent;

}

body.inner-page[data-theme="light"] .value-card h3 { color: var(--brown); }

body.inner-page[data-theme="light"] .value-card p  { color: var(--text-light); }



body.inner-page[data-theme="light"] .timeline::before {

  background: linear-gradient(to bottom, transparent, rgba(201,168,76,0.4), transparent);

}

body.inner-page[data-theme="light"] .timeline-content {

  background: rgba(255, 252, 245, 0.72);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border: none;

  box-shadow: 0 4px 24px rgba(80, 50, 10, 0.10);

  border-radius: 14px;

  padding: 1.4rem 1.6rem;

}

body.inner-page[data-theme="light"] .timeline-content h3 { color: var(--brown); }

body.inner-page[data-theme="light"] .timeline-content p  { color: var(--text-light); }

body.inner-page[data-theme="light"] .timeline-year       { color: var(--gold); }



body.inner-page[data-theme="light"] .team-card h3 { color: var(--brown); }

body.inner-page[data-theme="light"] .team-card p  { color: var(--text-light); }



body.inner-page[data-theme="light"] .split-content h2 { color: var(--brown); }

body.inner-page[data-theme="light"] .split-content p  { color: var(--text-light); }



body.inner-page[data-theme="light"] .contact-form-wrapper {

  background: var(--white);

  border: 1px solid rgba(201,168,76,0.15);

}

body.inner-page[data-theme="light"] .form-group input,

body.inner-page[data-theme="light"] .form-group textarea,

body.inner-page[data-theme="light"] .form-group select {

  background: #fff !important;

  border-color: rgba(92,74,58,0.2) !important;

  color: #2a1e12 !important;

}

body.inner-page[data-theme="light"] .form-group input:focus,

body.inner-page[data-theme="light"] .form-group textarea:focus,

body.inner-page[data-theme="light"] .form-group select:focus {

  background: #fff !important;

  border-color: var(--gold) !important;

  box-shadow: 0 0 0 3px rgba(201,168,76,0.15) !important;

  color: #2a1e12 !important;

}

body.inner-page[data-theme="light"] .form-group input::placeholder,

body.inner-page[data-theme="light"] .form-group textarea::placeholder {

  color: rgba(92,74,58,0.4);

}

body.inner-page[data-theme="light"] .form-group label { color: var(--text-light); }

body.inner-page[data-theme="light"] .contact-info-card {

  background: var(--cream);

  border: 1px solid rgba(201,168,76,0.15);

}

body.inner-page[data-theme="light"] .contact-info-card h3 { color: var(--brown); }

body.inner-page[data-theme="light"] .contact-info-card p  { color: var(--text-light); }



@media (max-width: 768px) {

  body.inner-page[data-theme="light"] .nav-links {

    background: rgba(253,248,240,0.99);

    border-left: 1px solid rgba(201,168,76,0.15);

  }

}



/* ============================================================

   THÈME SOMBRE — PAGES INTERNES (.inner-page)

   ============================================================ */



body.inner-page {

  background: #0d0a06;

  color: var(--cream);

}



/* Navbar sombre */

body.inner-page .navbar.scrolled {

  background: rgba(13,10,6,0.92);

  border-bottom: 1px solid rgba(201,168,76,0.2);

  box-shadow: 0 2px 30px rgba(0,0,0,0.5);

}



body.inner-page .navbar.scrolled .nav-logo-text {

  color: var(--cream);

}



body.inner-page .navbar.scrolled .nav-links a {

  color: rgba(253,248,240,0.75);

}



body.inner-page .navbar.scrolled .nav-links a:hover,

body.inner-page .navbar.scrolled .nav-links a.active {

  color: var(--gold-light);

}



body.inner-page .hamburger span {

  background: var(--cream);

}



/* Page header — image boutique en fond */

body.inner-page .page-header {

  background:

    linear-gradient(to bottom, rgba(10,7,3,0.65) 0%, rgba(10,7,3,0.85) 100%),

    url('../assets/images/boutique.png') center/cover no-repeat;

  min-height: 55vh;

  align-items: center;

  padding-bottom: 0;

}



body.inner-page .page-header::before,

body.inner-page .page-header::after {

  display: none;

}



body.inner-page .page-header h1 {

  color: var(--cream);

  text-shadow: 0 0 30px rgba(201,168,76,0.4), 0 2px 20px rgba(0,0,0,0.8);

}



body.inner-page .page-header .breadcrumb {

  color: rgba(253,248,240,0.5);

}



body.inner-page .page-header .breadcrumb a {

  color: rgba(253,248,240,0.6);

}



body.inner-page .page-header .breadcrumb a:hover {

  color: var(--gold-light);

}



body.inner-page .page-header .section-text {

  color: rgba(253,248,240,0.7);

}



/* Sections */

body.inner-page .section--cream,

body.inner-page .section--white,

body.inner-page .section--warm {

  background: #130f08;

}



body.inner-page .section--dark {

  background: #0a0703;

}



body.inner-page .section-label {

  color: var(--gold-light);

}



body.inner-page .section-title {

  color: var(--cream);

}



body.inner-page .section-text {

  color: rgba(253,248,240,0.65);

}



body.inner-page .deco-line {

  background: linear-gradient(90deg, transparent, var(--gold), transparent);

}



/* Filtres boutique */

body.inner-page .filter-btn {

  background: rgba(255,255,255,0.04);

  border-color: rgba(201,168,76,0.25);

  color: rgba(253,248,240,0.6);

}



body.inner-page .filter-btn:hover,

body.inner-page .filter-btn.active {

  border-color: var(--gold);

  color: var(--gold-light);

  background: rgba(201,168,76,0.1);

}



/* Cartes produits */

body.inner-page .product-card {

  background: rgba(25,18,8,0.95);

  border: 1px solid rgba(201,168,76,0.18);

  box-shadow: 0 4px 20px rgba(0,0,0,0.4);

}



body.inner-page .product-card:hover {

  border-color: rgba(201,168,76,0.5);

  box-shadow: 0 8px 40px rgba(201,168,76,0.15), 0 4px 20px rgba(0,0,0,0.5);

}



body.inner-page .product-card-name {

  color: var(--cream);

}



body.inner-page .product-card-desc {

  color: rgba(253,248,240,0.5);

}



body.inner-page .product-card-category {

  color: var(--gold);

}



body.inner-page .product-card-info {

  border-top: 1px solid rgba(201,168,76,0.12);

}



/* Cartes valeurs */

body.inner-page .value-card {

  background: rgba(25,18,8,0.95);

  border: 1px solid rgba(201,168,76,0.18);

}



body.inner-page .value-card h3 {

  color: var(--cream);

}



body.inner-page .value-card p {

  color: rgba(253,248,240,0.6);

}



/* Timeline */

body.inner-page .timeline::before {

  background: linear-gradient(to bottom, transparent, var(--gold), transparent);

}



body.inner-page .timeline-content {

  background: rgba(25,18,8,0.95);

  border: 1px solid rgba(201,168,76,0.2);

}



body.inner-page .timeline-content h3 {

  color: var(--cream);

}



body.inner-page .timeline-content p {

  color: rgba(253,248,240,0.6);

}



body.inner-page .timeline-year {

  color: var(--gold-light);

}



/* Cartes équipe */

body.inner-page .team-card h3 {

  color: var(--cream);

}



body.inner-page .team-card p {

  color: rgba(253,248,240,0.6);

}



/* Split section */

body.inner-page .split-content h2 {

  color: var(--cream);

}



body.inner-page .split-content p {

  color: rgba(253,248,240,0.65);

}



/* Contact form */

body.inner-page .contact-form-wrapper {

  background: rgba(25,18,8,0.9);

  border: 1px solid rgba(201,168,76,0.2);

}



body.inner-page .form-group input,

body.inner-page .form-group textarea,

body.inner-page .form-group select {

  background: rgba(0,0,0,0.35);

  border-color: rgba(201,168,76,0.25);

  color: var(--cream);

}



body.inner-page .form-group input::placeholder,

body.inner-page .form-group textarea::placeholder {

  color: rgba(253,248,240,0.35);

}



body.inner-page .form-group input:focus,

body.inner-page .form-group textarea:focus,

body.inner-page .form-group select:focus {

  border-color: var(--gold);

  background: rgba(0,0,0,0.45);

}



body.inner-page .form-group label {

  color: rgba(253,248,240,0.7);

}



body.inner-page .contact-info-card {

  background: rgba(25,18,8,0.9);

  border: 1px solid rgba(201,168,76,0.2);

}



body.inner-page .contact-info-card h3 {

  color: var(--cream);

}



body.inner-page .contact-info-card p {

  color: rgba(253,248,240,0.65);

}



/* Navigation mobile sombre */

@media (max-width: 768px) {

  body.inner-page .nav-links {

    background: rgba(13,10,6,0.98);

    border-left: 1px solid rgba(201,168,76,0.2);

  }

}

/* ============================================================
   AGENDA — PAGES PUBLIQUE & ADMIN
   ============================================================ */

/* --- Filtres --- */
.agenda-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 2.5rem;
}

/* --- Grille événements --- */
.agenda-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8rem;
}

/* --- Card événement --- */
.event-card {
  background: var(--cream);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(201,168,76,0.15);
  box-shadow: 0 4px 20px rgba(92,74,58,0.07);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.event-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(92,74,58,0.13);
}
.event-card-top {
  background: linear-gradient(135deg, var(--cat-color, var(--gold)) 0%, color-mix(in srgb, var(--cat-color, var(--gold)) 70%, #fff) 100%);
  padding: 1rem 1.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.event-card-cat {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #fff;
}
.event-card-badge {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 99px;
}
.badge--ok   { background: rgba(255,255,255,0.25); color: #fff; }
.badge--low  { background: rgba(255,140,0,0.35);  color: #fff; }
.badge--full { background: rgba(220,50,50,0.35);  color: #fff; }

.event-card-body {
  padding: 1.4rem;
  flex: 1;
}
.event-card-title {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--brown);
  margin-bottom: 0.7rem;
}
.event-card-meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 0.8rem;
  font-size: 0.8rem;
  color: var(--text-light);
}
.event-card-desc {
  font-size: 0.85rem;
  color: var(--text-light);
  line-height: 1.6;
}
.event-card-footer {
  padding: 1rem 1.4rem 1.4rem;
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
}

/* --- Bouton ghost petit --- */
.btn--ghost {
  background: transparent;
  color: var(--brown);
  border: 1px solid rgba(122,92,46,0.3);
}
.btn--ghost:hover {
  background: rgba(122,92,46,0.06);
  border-color: var(--brown);
}
.btn--outline.disabled {
  opacity: 0.5;
  pointer-events: none;
}
.btn--sm  { font-size: 0.74rem; padding: 0.45rem 0.9rem; }
.btn--xs  { font-size: 0.65rem; padding: 0.25rem 0.5rem; }
.btn--danger {
  background: #e05252;
  color: #fff;
  border: none;
}
.btn--danger:hover { background: #c43c3c; }

/* --- État vide --- */
.agenda-empty {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--text-light);
}
.agenda-empty-icon { font-size: 3.5rem; margin-bottom: 1rem; }
.agenda-empty h3 { font-family: var(--font-heading); color: var(--brown); margin-bottom: 0.5rem; }

/* --- Modal backdrop --- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10,6,2,0.6);
  z-index: 2000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.modal-backdrop.active {
  opacity: 1;
  pointer-events: all;
}

/* --- Modal événement --- */
.event-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  z-index: 2100;
  background: var(--cream);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px rgba(0,0,0,0.25);
  width: min(700px, 95vw);
  max-height: 90vh;
  overflow-y: auto;
  padding: 2rem 2rem 2.5rem;
  opacity: 0;
  pointer-events: none;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.event-modal.open {
  opacity: 1;
  pointer-events: all;
  transform: translate(-50%, -50%) scale(1);
}
.event-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-light);
  padding: 0.3rem;
  transition: color 0.2s;
}
.event-modal-close:hover { color: var(--brown); }

.event-modal-header {
  border-left: 4px solid var(--cat-color, var(--gold));
  padding-left: 1rem;
  margin-bottom: 1.5rem;
}
.event-modal-cat {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--cat-color, var(--gold));
  display: block;
  margin-bottom: 0.3rem;
}
.event-modal-header h2 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  color: var(--brown);
}
.event-modal-meta {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.8rem;
  margin-bottom: 1.5rem;
}
.event-modal-meta-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(201,168,76,0.07);
  border-radius: 8px;
  padding: 0.6rem 0.9rem;
  font-size: 0.82rem;
  color: var(--text);
}
.meta-icon { font-size: 1rem; }
.event-modal-text {
  font-size: 0.9rem;
  color: var(--text-light);
  line-height: 1.75;
  margin-bottom: 1.8rem;
}

.event-modal-form-wrap { border-top: 1px solid rgba(201,168,76,0.2); padding-top: 1.5rem; }
.event-modal-form-title {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--brown);
  margin-bottom: 1rem;
}
.event-modal-submit { width: 100%; justify-content: center; margin-top: 0.5rem; }

/* --- Succès inscription --- */
.register-success {
  text-align: center;
  padding: 2rem 1rem;
}
.register-success-icon {
  width: 56px; height: 56px;
  background: var(--gold);
  color: #fff;
  border-radius: 50%;
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}
.register-success h3 { font-family: var(--font-heading); color: var(--brown); margin-bottom: 0.5rem; }
.register-success-note { font-size: 0.8rem; color: var(--text-light); margin-top: 0.4rem; margin-bottom: 1.2rem; }

/* --- Messages formulaire --- */
.form-msg { font-size: 0.83rem; padding: 0.7rem 1rem; border-radius: 8px; margin-top: 0.8rem; }
.form-msg--error { background: rgba(220,50,50,0.1); color: #c43c3c; border: 1px solid rgba(220,50,50,0.2); }
.form-msg--success { background: rgba(122,139,111,0.12); color: #4a6840; border: 1px solid rgba(122,139,111,0.25); }

/* ============================================================
   ADMIN — Connexion
   ============================================================ */
.admin-login-overlay {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, var(--cream-warm) 0%, var(--cream) 100%);
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.admin-login-card {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px rgba(92,74,58,0.15);
  padding: 2.5rem;
  width: min(420px, 100%);
  border: 1px solid rgba(201,168,76,0.2);
}
.admin-login-logo {
  text-align: center;
  margin-bottom: 2rem;
}
.admin-login-logo img {
  width: 64px; height: 64px;
  border-radius: 12px;
  margin-bottom: 0.8rem;
}
.admin-login-logo h2 {
  font-family: var(--font-heading);
  color: var(--brown);
  font-size: 1.4rem;
}
.admin-login-logo p { color: var(--text-light); font-size: 0.85rem; }

/* ============================================================
   ADMIN — Dashboard
   ============================================================ */
.admin-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
  padding: 1.2rem 1.5rem;
  background: var(--cream);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(201,168,76,0.15);
  box-shadow: 0 4px 16px rgba(92,74,58,0.06);
}
.admin-toolbar-stats { display: flex; gap: 2rem; flex-wrap: wrap; }
.admin-stat { display: flex; flex-direction: column; align-items: center; }
.admin-stat-num {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  color: var(--gold);
  line-height: 1;
}
.admin-stat span:last-child { font-size: 0.72rem; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.1em; }
.admin-toolbar-actions { display: flex; gap: 0.7rem; flex-wrap: wrap; }

/* Ligne événement admin */
.admin-event-row {
  background: var(--cream);
  border: 1px solid rgba(201,168,76,0.15);
  border-radius: var(--radius);
  padding: 1.2rem 1.5rem;
  margin-bottom: 0.8rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  transition: box-shadow 0.2s;
}
.admin-event-row:hover { box-shadow: 0 6px 24px rgba(92,74,58,0.1); }
.admin-event-row--past { opacity: 0.55; }
.admin-event-row-info { flex: 1; min-width: 200px; }
.admin-event-row-header { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.4rem; }
.admin-event-cat {
  font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--gold); background: rgba(201,168,76,0.1); padding: 0.15rem 0.5rem; border-radius: 4px;
}
.admin-event-badge {
  font-size: 0.65rem; font-weight: 600; padding: 0.15rem 0.5rem; border-radius: 4px;
}
.admin-event-badge--past { background: rgba(0,0,0,0.07); color: var(--text-light); }
.admin-event-badge--full { background: rgba(220,50,50,0.1); color: #c43c3c; }
.admin-event-title { font-family: var(--font-heading); font-size: 1rem; color: var(--brown); margin-bottom: 0.4rem; }
.admin-event-meta { display: flex; flex-wrap: wrap; gap: 0.8rem; font-size: 0.78rem; color: var(--text-light); }
.admin-event-row-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }

/* Formulaire modal admin */
.event-modal--admin { width: min(640px, 95vw); }
.admin-form-title {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  color: var(--brown);
  margin-bottom: 1.5rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid rgba(201,168,76,0.2);
}
.admin-event-form .form-row { gap: 1rem; }
.admin-form-btns { display: flex; gap: 0.8rem; margin-top: 0.5rem; }

/* Modal inscriptions */
.event-modal--regs { width: min(820px, 95vw); }
.regs-count { font-size: 0.85rem; color: var(--text-light); margin-bottom: 1rem; }
.regs-table-wrap { overflow-x: auto; }
.regs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.regs-table th {
  text-align: left;
  padding: 0.6rem 0.8rem;
  background: rgba(201,168,76,0.08);
  color: var(--brown);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.regs-table td {
  padding: 0.7rem 0.8rem;
  border-bottom: 1px solid rgba(201,168,76,0.1);
  color: var(--text);
  vertical-align: top;
}
.regs-table td a { color: var(--gold); }
.regs-msg { max-width: 200px; white-space: pre-wrap; word-break: break-word; }
.regs-date { white-space: nowrap; color: var(--text-light); }
.regs-table tr:hover td { background: rgba(201,168,76,0.03); }

/* ---- Admin tabs ---- */
.admin-tabs {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 2rem;
  border-bottom: 2px solid rgba(201,168,76,0.15);
  padding-bottom: 0;
}
.admin-tab {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 0.7rem 1.2rem;
  margin-bottom: -2px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-light);
  transition: color 0.2s, border-color 0.2s;
}
.admin-tab:hover  { color: var(--brown); }
.admin-tab.active { color: var(--brown); border-bottom-color: var(--gold); font-weight: 600; }

.admin-tab-content        { display: none; }
.admin-tab-content.active { display: block; }

.admin-section-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  color: var(--brown);
}
.admin-products-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-bottom: 1.2rem;
}
.admin-cat-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
/* Ligne produit admin */
.admin-product-row { align-items: flex-start; }
.admin-product-img {
  width: 72px;
  height: 72px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(201,168,76,0.07);
  border: 1px solid rgba(201,168,76,0.15);
}
.admin-product-img img { width: 100%; height: 100%; object-fit: cover; }
.admin-product-img-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:1.6rem; }

/* Aperçu image dans formulaire */
.admin-img-preview {
  margin-top: 0.6rem;
  width: 120px;
  height: 90px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(201,168,76,0.2);
}
.admin-img-preview img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   AGENDA — RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .agenda-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .agenda-grid { grid-template-columns: 1fr; }
  .event-modal, .event-modal--admin, .event-modal--regs {
    padding: 1.5rem 1.2rem 2rem;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    transform: translateY(100%);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    width: 100%;
    max-height: 90vh;
  }
  .event-modal.open, .event-modal--admin.open, .event-modal--regs.open {
    transform: translateY(0);
  }
  .admin-toolbar { flex-direction: column; align-items: flex-start; }
  .admin-toolbar-stats { gap: 1.2rem; }
  .admin-event-row { flex-direction: column; align-items: flex-start; }
  .admin-event-row-actions { width: 100%; }
}

/* ---- Order cards (admin) ---- */
.admin-orders-list { display: grid; gap: 1rem; }
.order-card {
  background: var(--white);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--radius);
  padding: 1.2rem 1.5rem;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  transition: box-shadow 0.2s;
}
.order-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
.order-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.6rem; gap: 0.5rem; flex-wrap: wrap; }
.order-card-header strong { font-size: 0.88rem; letter-spacing: 0.04em; }
.order-card-date { display: block; font-size: 0.75rem; color: var(--text-muted); margin-top: 0.15rem; }
.order-status-select {
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.12);
  font-size: 0.78rem;
  font-family: inherit;
  cursor: pointer;
  background: var(--cream);
}
.order-card-customer { display: flex; gap: 1rem; flex-wrap: wrap; font-size: 0.82rem; margin-bottom: 0.5rem; color: var(--text); }
.order-card-customer a { color: var(--gold); text-decoration: underline; }
.order-card-items { display: flex; flex-direction: column; gap: 0.2rem; margin-bottom: 0.6rem; }
.order-item-line { font-size: 0.8rem; color: var(--text-light); }
.order-card-total { display: flex; gap: 1.2rem; flex-wrap: wrap; font-size: 0.82rem; padding-top: 0.5rem; border-top: 1px solid rgba(0,0,0,0.06); }
.order-card-total strong { color: var(--brown); }
.order-card[data-status="paid"] { border-left: 3px solid #27ae60; }
.order-card[data-status="shipped"] { border-left: 3px solid #2980b9; }
.order-card[data-status="delivered"] { border-left: 3px solid #8e44ad; }
.order-card[data-status="pending"] { border-left: 3px solid #f39c12; }
.order-card[data-status="cancelled"], .order-card[data-status="failed"] { border-left: 3px solid #c0392b; opacity: 0.7; }

/* ---- Cartes hover a-propos ---- */
.apro-card { cursor: pointer; }
.apro-card:hover .apro-card-img { transform: scale(1.07); }
.apro-card:hover .apro-card-overlay { background: linear-gradient(to top, rgba(10,5,0,0.92) 0%, rgba(10,5,0,0.35) 60%, rgba(10,5,0,0.10) 100%) !important; }
.apro-card:hover .apro-card-btn { opacity: 1 !important; transform: translateY(0) !important; }