/* Games Anthology - Cryptique Website */

@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400&family=Cinzel:wght@400;500;600;700&family=MedievalSharp&display=swap');

:root {
  --color-dark-bg: #1a1a1a;
  --color-darker-bg: #0f0f0f;
  --color-parchment: #f4e8d0;
  --color-parchment-dark: #d4c4a8;
  --color-gold: #743238;
  --color-gold-light: #8a3f45;
  --color-text-light: #e8e8e8;
  --color-text-dark: #2c2c2c;
  --color-accent: #8b4513;
  --color-shadow: rgba(0, 0, 0, 0.7);
  --color-soft-light: rgba(248, 220, 174, 0.2);
  --color-soft-light-strong: rgba(248, 220, 174, 0.3);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Crimson Text', serif;
  background: var(--color-dark-bg);
  background-image: url('../images/texture-2.jpg');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--color-text-light);
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
}

body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(10, 10, 10, 0.38));
  backdrop-filter: blur(1px);
  z-index: -1;
  pointer-events: none;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(248, 220, 174, 0.09), transparent 40%),
    radial-gradient(circle at 85% 15%, rgba(212, 140, 90, 0.08), transparent 36%);
  pointer-events: none;
  z-index: -1;
}

/* ==============================
   PARCHMENT / WORN BORDER EFFECT
   Applied directly on the card — clips the card edges to an irregular shape
   ============================== */

.parchment-card {
  border: none !important;
  border-radius: 0 !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 1000 600'%3E%3Cpath d='M6,3 C15,8 22,0 35,5 C45,9 52,1 65,6 C78,11 88,2 100,7 C112,12 120,1 135,4 C148,7 155,0 170,6 C182,10 195,2 210,5 C222,8 235,0 250,4 C265,9 275,1 290,6 C305,11 315,2 330,5 C342,8 355,1 370,7 C385,12 395,3 410,6 C425,9 435,0 450,5 C465,10 478,2 490,4 C502,6 515,0 530,5 C545,10 555,1 570,6 C585,11 598,3 610,5 C622,7 635,0 650,4 C665,8 678,1 690,6 C705,11 715,2 730,5 C745,8 755,0 770,6 C782,10 795,2 810,5 C822,8 838,1 855,4 C870,7 880,0 895,5 C908,9 918,2 932,6 C945,10 955,1 968,4 C978,7 988,2 994,5 L997,10 C993,22 998,32 995,45 C992,58 999,68 996,82 C993,95 998,108 994,120 C990,132 997,145 994,158 C991,170 998,182 995,195 C992,208 999,220 996,232 C993,245 997,258 994,270 C991,282 998,295 995,308 C992,320 998,332 994,345 C990,358 997,370 994,382 C991,395 998,408 996,420 C994,432 998,445 995,458 C992,470 998,482 994,495 C990,508 997,520 994,533 C991,545 997,555 995,565 C993,575 998,585 995,595 L992,598 C980,593 968,600 955,595 C942,590 930,598 918,594 C905,590 892,599 880,595 C868,591 855,598 842,594 C830,590 818,599 805,595 C792,591 780,598 768,594 C755,590 742,599 730,595 C718,591 705,598 692,594 C680,590 668,600 655,595 C642,590 630,598 618,594 C605,590 592,599 580,595 C568,591 555,598 542,594 C530,590 518,600 505,595 C492,590 480,598 468,594 C455,590 442,599 430,595 C418,591 405,598 392,594 C380,590 368,600 355,596 C342,592 330,598 318,594 C305,590 292,599 280,595 C268,591 255,598 242,594 C230,590 218,600 205,595 C192,590 180,598 168,594 C155,590 142,599 130,595 C118,591 105,598 92,594 C80,590 68,600 55,596 C42,592 30,598 18,594 C10,591 5,596 3,598 L2,592 C6,580 1,568 4,555 C7,542 2,530 5,518 C8,505 2,492 5,480 C8,468 2,455 5,442 C8,430 1,418 4,405 C7,392 2,380 5,368 C8,355 2,342 5,330 C8,318 1,305 4,292 C7,280 2,268 5,255 C8,242 1,230 4,218 C7,205 2,192 5,180 C8,168 2,155 5,142 C8,130 1,118 4,105 C7,92 2,80 5,68 C8,55 1,42 4,30 C7,18 2,10 6,3 Z' fill='white'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 1000 600'%3E%3Cpath d='M6,3 C15,8 22,0 35,5 C45,9 52,1 65,6 C78,11 88,2 100,7 C112,12 120,1 135,4 C148,7 155,0 170,6 C182,10 195,2 210,5 C222,8 235,0 250,4 C265,9 275,1 290,6 C305,11 315,2 330,5 C342,8 355,1 370,7 C385,12 395,3 410,6 C425,9 435,0 450,5 C465,10 478,2 490,4 C502,6 515,0 530,5 C545,10 555,1 570,6 C585,11 598,3 610,5 C622,7 635,0 650,4 C665,8 678,1 690,6 C705,11 715,2 730,5 C745,8 755,0 770,6 C782,10 795,2 810,5 C822,8 838,1 855,4 C870,7 880,0 895,5 C908,9 918,2 932,6 C945,10 955,1 968,4 C978,7 988,2 994,5 L997,10 C993,22 998,32 995,45 C992,58 999,68 996,82 C993,95 998,108 994,120 C990,132 997,145 994,158 C991,170 998,182 995,195 C992,208 999,220 996,232 C993,245 997,258 994,270 C991,282 998,295 995,308 C992,320 998,332 994,345 C990,358 997,370 994,382 C991,395 998,408 996,420 C994,432 998,445 995,458 C992,470 998,482 994,495 C990,508 997,520 994,533 C991,545 997,555 995,565 C993,575 998,585 995,595 L992,598 C980,593 968,600 955,595 C942,590 930,598 918,594 C905,590 892,599 880,595 C868,591 855,598 842,594 C830,590 818,599 805,595 C792,591 780,598 768,594 C755,590 742,599 730,595 C718,591 705,598 692,594 C680,590 668,600 655,595 C642,590 630,598 618,594 C605,590 592,599 580,595 C568,591 555,598 542,594 C530,590 518,600 505,595 C492,590 480,598 468,594 C455,590 442,599 430,595 C418,591 405,598 392,594 C380,590 368,600 355,596 C342,592 330,598 318,594 C305,590 292,599 280,595 C268,591 255,598 242,594 C230,590 218,600 205,595 C192,590 180,598 168,594 C155,590 142,599 130,595 C118,591 105,598 92,594 C80,590 68,600 55,596 C42,592 30,598 18,594 C10,591 5,596 3,598 L2,592 C6,580 1,568 4,555 C7,542 2,530 5,518 C8,505 2,492 5,480 C8,468 2,455 5,442 C8,430 1,418 4,405 C7,392 2,380 5,368 C8,355 2,342 5,330 C8,318 1,305 4,292 C7,280 2,268 5,255 C8,242 1,230 4,218 C7,205 2,192 5,180 C8,168 2,155 5,142 C8,130 1,118 4,105 C7,92 2,80 5,68 C8,55 1,42 4,30 C7,18 2,10 6,3 Z' fill='white'/%3E%3C/svg%3E");
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
}

/* No pseudo-elements needed — mask is on the card itself */

/* ==============================
   BACKGROUND IMAGES PER PAGE
   ============================== */

.contact-page::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../images/Hibou.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  z-index: -2;
  opacity: 0.4;
  pointer-events: none;
}

.home-page::before {
  content: '';
  position: fixed;
  right: 2%;
  top: 24%;
  width: min(22vw, 290px);
  height: min(34vw, 420px);
  background-image: url('../images/boite planche - Copie.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(3px) drop-shadow(0 12px 24px rgba(0, 0, 0, 0.65));
  opacity: 0.55;
  z-index: -1;
  pointer-events: none;
}

.home-decor {
  position: fixed;
  pointer-events: none;
  z-index: -1;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.home-decor-cards {
  left: 3%;
  bottom: 8%;
  width: min(20vw, 260px);
  height: min(24vw, 300px);
  background-image: url('../images/cartes cryptique.png');
  filter: blur(2.5px) drop-shadow(0 10px 22px rgba(0, 0, 0, 0.6));
  opacity: 0.48;
}

.contact-page .form-container {
  background: rgba(244, 232, 208, 0.3);
  backdrop-filter: blur(10px);
}

.contact-page .section-title {
  text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.9), 0 0 25px rgba(0, 0, 0, 0.7), 0 0 40px rgba(116, 50, 56, 0.5);
}

.product-page::before {
  content: '';
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-image: url('../images/Sombre.png');
  background-size: contain;
  background-position: right center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  z-index: -2;
  opacity: 0.4;
  pointer-events: none;
}

.product-page::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../images/Âme_Vengeresse_.png');
  background-size: 40%;
  background-position: left top;
  background-repeat: no-repeat;
  background-attachment: fixed;
  z-index: -2;
  opacity: 0.4;
  pointer-events: none;
}

/* ==============================
   NAVBAR
   ============================== */

.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  background: rgba(15, 15, 15, 0.95);
  backdrop-filter: blur(10px);
  padding: 1rem 2rem;
  z-index: 1000;
  border-bottom: 2px solid var(--color-gold);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8), 0 2px 10px rgba(0, 0, 0, 0.6);
}

.header-image {
  position: fixed;
  top: 100px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  padding: 0;
  z-index: 999;
  pointer-events: none;
  margin: 0;
}

.header-illustration {
  max-width: 85%;
  max-height: 600px;
  width: auto;
  height: auto;
  display: block;
  filter: drop-shadow(0 8px 30px rgba(0, 0, 0, 0.9)) drop-shadow(0 4px 15px rgba(0, 0, 0, 0.7));
  pointer-events: none;
}

.navbar-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.logo-image {
  height: 65px;
  width: auto;
  max-width: 250px;
  object-fit: contain;
  filter: drop-shadow(2px 2px 4px var(--color-shadow));
  transition: transform 0.3s ease;
}

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

.nav-links {
  display: flex;
  gap: 2rem;
  list-style: none;
}

.nav-links a {
  color: var(--color-text-light);
  text-decoration: none;
  font-size: 1.1rem;
  transition: color 0.3s ease;
  position: relative;
  padding: 0.5rem 0;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-gold);
  transition: width 0.3s ease;
}

.nav-links a:hover {
  color: var(--color-gold);
}

.nav-links a:hover::after {
  width: 100%;
}

.nav-toggle {
  display: none;
}

body.mobile-menu-open {
  overflow: hidden;
}

/* ==============================
   HERO SECTION
   ============================== */

.hero {
  margin-top: 80px;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0;
  position: relative;
  overflow: hidden;
  z-index: 0;
}

.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  margin: 0;
  padding: 0;
  display: block;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(26, 26, 26, 0.85) 0%, rgba(15, 15, 15, 0.85) 100%);
  z-index: 1;
}

.hero-content {
  max-width: 900px;
  z-index: 2;
  position: relative;
}

.logo-cryptique {
  max-width: 600px;
  width: 100%;
  height: auto;
  margin-bottom: 1.5rem;
  filter: drop-shadow(0 8px 30px rgba(0, 0, 0, 0.9)) drop-shadow(0 4px 15px rgba(0, 0, 0, 0.7));
}

.hero h1 {
  font-family: 'Cinzel', serif;
  font-size: 4rem;
  font-weight: 700;
  color: var(--color-gold);
  margin-bottom: 1rem;
  text-shadow: 3px 3px 6px var(--color-shadow);
  letter-spacing: 3px;
}

.title-with-logo {
  font-family: 'Cinzel', serif;
  color: var(--color-gold);
  position: relative;
  display: inline-block;
  padding-left: 50px;
  background-image: url('../images/logo/logo caligraphique Cryptique_blanc.png');
  background-size: 40px auto;
  background-repeat: no-repeat;
  background-position: left center;
  min-height: 40px;
  line-height: 40px;
}

.hero .subtitle {
  font-size: 1.5rem;
  color: var(--color-text-light);
  margin-bottom: 2rem;
  font-style: italic;
}

/* ==============================
   SECTIONS
   ============================== */

.section {
  padding: 5rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

.grid .section-product-image {
  position: absolute;
  left: calc(-370px - 2rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  pointer-events: none;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.product-side-illustration {
  width: 400px;
  max-height: 700px;
  height: auto;
  display: block !important;
  filter: drop-shadow(0 8px 30px rgba(0, 0, 0, 0.9)) drop-shadow(0 4px 15px rgba(0, 0, 0, 0.7));
  pointer-events: none;
  opacity: 1 !important;
}

.section-title {
  font-family: 'Cinzel', serif;
  font-size: 3rem;
  color: var(--color-gold);
  text-align: center;
  margin-bottom: 3rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  position: relative;
  padding-bottom: 5rem;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55), 0 0 14px rgba(248, 220, 174, 0.2);
  z-index: 2;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: 2.6rem;
  left: 50%;
  transform: translateX(-50%);
  width: min(260px, 58%);
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent 0%, rgba(248, 220, 174, 0.85) 18%, rgba(248, 220, 174, 0.65) 82%, transparent 100%);
  box-shadow: 0 1px 0 rgba(255, 239, 214, 0.35), 0 4px 10px rgba(0, 0, 0, 0.35);
  opacity: 0.92;
  z-index: 1;
}

/* ==============================
   CARDS
   ============================== */

.card {
  background: rgba(244, 232, 208, 0.05);
  border: 2px solid rgba(116, 50, 56, 0.3);
  border-radius: 10px;
  padding: 2rem;
  margin-bottom: 2rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  backdrop-filter: blur(5px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 4px 16px rgba(0, 0, 0, 0.4);
  position: relative;
  z-index: 2;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.8), 0 6px 20px rgba(116, 50, 56, 0.3);
  border-color: var(--color-gold);
}

.card h3 {
  font-family: 'Cinzel', serif;
  font-size: 2rem;
  color: var(--color-gold);
  margin-bottom: 1rem;
}

.card h3.title-with-logo {
  padding-left: 50px;
  background-size: 35px auto;
  min-height: 35px;
  line-height: 35px;
}

.card p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--color-text-light);
}

/* ==============================
   PROJET LAYOUT (text left + image placeholder right)
   ============================== */

.projet-layout {
  display: flex;
  align-items: stretch;
  gap: 3rem;
}

.projet-text {
  flex: 1;
  min-width: 0;
}

.projet-image-placeholder {
  flex: 0 0 350px;
  background: rgba(128, 128, 128, 0.3);
  border: 2px dashed rgba(116, 50, 56, 0.4);
  border-radius: 10px;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.projet-image-placeholder::after {
  content: 'Image à venir';
  color: rgba(232, 232, 232, 0.4);
  font-family: 'Cinzel', serif;
  font-size: 1.2rem;
}

.projet-image-placeholder:has(.projet-image)::after {
  content: none;
}

.projet-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid rgba(116, 50, 56, 0.35);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

/* ==============================
   GRID LAYOUTS
   ============================== */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
  position: relative;
}

/* ==============================
   TEAM SECTION
   ============================== */

.team-container {
  display: flex;
  align-items: center;
  gap: 3rem;
  flex-wrap: wrap;
}

.team-text {
  flex: 1;
  min-width: 300px;
  padding: 1rem;
}

.team-text p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--color-text-light);
  text-align: left;
}

.team-image {
  flex: 1;
  max-width: 500px;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
  border-radius: 10px;
  border: 2px solid rgba(116, 50, 56, 0.3);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7), 0 5px 20px rgba(0, 0, 0, 0.5);
}

/* ==============================
   BUTTONS
   ============================== */

.btn {
  display: inline-block;
  padding: 1rem 2.5rem;
  background: var(--color-gold);
  color: #ffffff;
  text-decoration: none;
  border-radius: 5px;
  font-weight: 600;
  font-size: 1.1rem;
  transition: all 0.3s ease;
  border: 2px solid var(--color-gold);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.btn:hover {
  background: transparent;
  color: var(--color-gold);
  transform: scale(1.05);
  box-shadow: 0 5px 15px rgba(116, 50, 56, 0.4);
}

.btn-secondary {
  background: transparent;
  color: var(--color-gold);
  border-color: var(--color-gold);
}

.btn-secondary:hover {
  background: var(--color-gold);
  color: var(--color-text-dark);
}

/* ==============================
   FORM
   ============================== */

.form-container {
  max-width: 600px;
  margin: 0 auto;
  background: rgba(244, 232, 208, 0.05);
  border: 2px solid rgba(116, 50, 56, 0.3);
  border-radius: 10px;
  padding: 3rem;
  backdrop-filter: blur(5px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 4px 16px rgba(0, 0, 0, 0.4);
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--color-gold);
  font-weight: 600;
  font-size: 1.1rem;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.8rem;
  background: rgba(244, 232, 208, 0.1);
  border: 2px solid rgba(116, 50, 56, 0.3);
  border-radius: 5px;
  color: var(--color-text-light);
  font-family: 'Crimson Text', serif;
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-gold);
  box-shadow: 0 0 10px rgba(116, 50, 56, 0.3);
}

.form-group textarea {
  resize: vertical;
  min-height: 150px;
}

/* ==============================
   PRODUCT PAGE SPECIFICS
   ============================== */

.product-hub {
  margin-top: 96px;
  min-height: calc(100vh - 96px);
  display: grid;
  grid-template-columns: 1.38fr minmax(230px, 300px) 1.38fr;
  align-items: stretch;
  gap: 0;
  position: relative;
}

.product-hub::before {
  content: none;
}

.split-product {
  position: relative;
  min-height: calc(100vh - 96px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-decoration: none;
  color: var(--color-text-light);
  z-index: 3;
  transition: filter 0.35s ease, transform 0.35s ease;
}

.split-center-column {
  position: relative;
  min-height: calc(100vh - 96px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

.split-center-column::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 15, 15, 0.82) 0%, rgba(15, 15, 15, 0.34) 60%, rgba(15, 15, 15, 0.2) 100%);
  border-left: none;
  border-right: none;
  pointer-events: none;
  z-index: 1;
}

.split-product::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 15, 15, 0.82) 0%, rgba(15, 15, 15, 0.34) 60%, rgba(15, 15, 15, 0.2) 100%);
  z-index: 1;
}

.split-product-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.45s ease, filter 0.35s ease;
  filter: brightness(0.8) saturate(0.95);
}

.split-product-left .split-product-image {
  clip-path: polygon(0 0, 64% 0, 100% 100%, 0 100%);
}

.split-product-right .split-product-image {
  clip-path: polygon(38% 0, 100% 0, 100% 100%, 0 100%);
}

.split-product-content {
  position: relative;
  z-index: 2;
  max-width: 360px;
  margin: 0 2rem;
  padding: 1.4rem 1.5rem;
  background: rgba(15, 15, 15, 0.45);
  border: 1px solid rgba(116, 50, 56, 0.7);
  border-radius: 8px;
  backdrop-filter: blur(6px);
  text-align: center;
}

.split-product-content h2 {
  font-family: 'Cinzel', serif;
  color: #f1e6d2;
  margin-bottom: 0.5rem;
  font-size: 2rem;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9);
}

.split-hover-text {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(8px);
  transition: max-height 0.35s ease, opacity 0.35s ease, transform 0.35s ease;
}

.split-product-content p {
  color: #f3f3f3;
  margin-bottom: 1rem;
}

.split-link {
  color: #f8dcae;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.split-product:hover .split-product-image {
  transform: scale(1.08);
  filter: brightness(1.12) saturate(1.08);
}

.split-product-left:hover .split-product-image {
  transform: translateX(42px) scale(1.09);
}

.split-product-right:hover .split-product-image {
  transform: translateX(-42px) scale(1.09);
}

.split-product:hover .split-hover-text {
  max-height: 180px;
  opacity: 1;
  transform: translateY(0);
}

.product-hub:has(.split-product:hover) .split-product {
  filter: brightness(0.56);
}

.product-hub:has(.split-product:hover) .split-product:hover {
  filter: brightness(1.2);
  z-index: 4;
}

.product-hub:has(.split-product:hover) .split-center-info {
  filter: none;
}

.product-hub:has(.split-product:hover) .split-center-column::before {
  background: linear-gradient(to top, rgba(15, 15, 15, 0.82) 0%, rgba(15, 15, 15, 0.34) 60%, rgba(15, 15, 15, 0.2) 100%);
}

.split-center-info {
  margin: 2.5rem 1rem;
  align-self: center;
  text-align: center;
  z-index: 4;
  background: rgba(10, 10, 10, 0.78) !important;
  border: 1px solid rgba(116, 50, 56, 0.42);
  box-shadow: 0 14px 45px rgba(0, 0, 0, 0.8);
  max-width: 300px;
  justify-self: center;
}

.split-center-info h1 {
  font-family: 'Cinzel', serif;
  font-size: 2.4rem;
  color: var(--color-gold);
  margin-bottom: 1.2rem;
}

.split-center-info p {
  font-size: 1.08rem;
  line-height: 1.7;
}

.split-center-points {
  margin: 1.5rem 0 2rem;
  padding: 1rem;
  border: 1px solid rgba(116, 50, 56, 0.28);
  border-radius: 8px;
  background: rgba(8, 8, 8, 0.9);
}

.split-center-points p + p {
  margin-top: 0.6rem;
}

.promo-popup {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(8, 8, 8, 0.74);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  z-index: 1200;
}

.promo-popup.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.promo-popup-content {
  position: relative;
  width: min(460px, 100%);
  padding: 2.25rem 1.75rem 1.6rem;
  text-align: center;
  background: linear-gradient(160deg, rgba(22, 16, 14, 0.96), rgba(55, 25, 30, 0.94));
  border: 1px solid rgba(248, 220, 174, 0.5);
  border-radius: 12px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.55);
}

.promo-popup-kicker {
  margin-bottom: 0.45rem;
  color: #f8dcae;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  font-size: 0.82rem;
}

.promo-popup-content h2 {
  margin-bottom: 0.8rem;
  font-family: 'Cinzel', serif;
  color: var(--color-gold);
  font-size: 2rem;
}

.promo-popup-content p {
  margin-bottom: 1.2rem;
  line-height: 1.65;
}

.promo-popup-close {
  position: absolute;
  top: 0.35rem;
  right: 0.5rem;
  border: none;
  background: transparent;
  color: var(--color-text-light);
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
}

.product-hero {
  margin-top: 350px;
  padding: 4rem 2rem;
  text-align: center;
  background: transparent;
}

.product-image {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  border: 3px solid var(--color-gold);
  margin: 2rem 0;
  box-shadow: 0 10px 40px var(--color-shadow);
}

.product-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.product-feature {
  padding: 1.5rem;
  background: rgba(244, 232, 208, 0.2);
  border: 2px solid rgba(116, 50, 56, 0.3);
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5), 0 3px 12px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(8px);
}

.product-feature h3 {
  font-family: 'Cinzel', serif;
  color: var(--color-gold);
  margin-bottom: 1rem;
}

/* Product content inside the card */
.product-content-inline {
  margin: 2rem 0;
  padding: 1.5rem 2rem;
  background: rgba(116, 50, 56, 0.08);
  border: 1px solid rgba(116, 50, 56, 0.25);
  border-radius: 8px;
  text-align: left;
}

.product-content-inline h3 {
  font-family: 'Cinzel', serif;
  color: var(--color-gold);
  font-size: 1.4rem;
  margin-bottom: 1rem;
  text-align: center;
}

.product-content-inline ul {
  list-style: none;
  padding: 0;
}

.product-content-inline ul li {
  padding: 0.4rem 0 0.4rem 1.5rem;
  position: relative;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--color-text-light);
}

.product-content-inline ul li::before {
  content: '\2726';
  position: absolute;
  left: 0;
  color: var(--color-gold);
  font-size: 1rem;
}

/* Compact layout for dedicated product pages */
.product-detail-page .product-detail-section {
  max-width: 900px;
  padding: 2rem 1.25rem;
}

.product-detail-page .product-detail-section:first-of-type {
  padding-bottom: 0.6rem;
}

.product-detail-page .product-detail-card {
  max-width: 760px;
  margin: 0 auto;
}

.product-detail-page .card {
  padding: 1.35rem 1.5rem;
  margin-bottom: 1.1rem;
}

.product-detail-page .product-carousel-container,
.product-detail-page .product-image-container {
  max-width: 620px;
  margin: 1.1rem auto;
}

.product-detail-page .product-carousel {
  height: 320px;
}

.product-detail-page .carousel-image {
  height: 320px;
}

.product-detail-page .product-content-inline {
  margin: 1.1rem 0;
  padding: 1rem 1.2rem;
}

.product-detail-page .product-content-inline ul li {
  font-size: 1rem;
}

.product-detail-page .product-personalisation {
  margin: 1rem 0;
  padding: 1rem 1.2rem;
}

.product-detail-page .product-price {
  margin: 1.1rem 0;
  padding: 1rem 1.2rem;
  min-width: 180px;
}

.product-detail-page .price-value {
  font-size: 2rem;
}

.product-detail-page .product-detail-actions .btn {
  padding: 0.85rem 1.35rem;
  font-size: 0.95rem;
}

/* Personalisation block */
.product-personalisation {
  margin: 1.5rem 0;
  padding: 1.5rem 2rem;
  background: rgba(116, 50, 56, 0.12);
  border: 1px solid rgba(116, 50, 56, 0.35);
  border-radius: 8px;
}

.product-personalisation h3 {
  font-family: 'Cinzel', serif;
  color: var(--color-gold);
  font-size: 1.3rem;
  margin-bottom: 0.8rem;
  text-align: center;
}

.product-personalisation p {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--color-text-light);
  text-align: center;
}

/* Order notice */
.commande-notice {
  border-color: var(--color-gold) !important;
}

.commande-notice::before {
  background: rgba(116, 50, 56, 0.1) !important;
}

/* ==============================
   PRODUCT CAROUSEL
   ============================== */

.product-carousel-container {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 2rem auto;
  overflow: hidden;
  border-radius: 10px;
}

.product-carousel {
  position: relative;
  width: 100%;
  height: 400px;
}

.carousel-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  pointer-events: none;
}

.carousel-slide.active {
  opacity: 1;
  pointer-events: auto;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 10px;
  border: 3px solid var(--color-gold);
  box-shadow: 0 10px 40px var(--color-shadow);
  background: rgba(15, 15, 15, 0.5);
  cursor: pointer;
  transition: transform 0.3s ease;
}

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

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(212, 175, 55, 0.8);
  color: var(--color-text-dark);
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 1.5rem;
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-btn:hover {
  background: var(--color-gold);
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 5px 15px rgba(212, 175, 55, 0.5);
}

.carousel-btn-prev {
  left: 20px;
}

.carousel-btn-next {
  right: 20px;
}

.carousel-indicators {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 10;
}

.indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid var(--color-gold);
}

.indicator.active {
  background: var(--color-gold);
  transform: scale(1.2);
}

.indicator:hover {
  background: var(--color-gold-light);
  transform: scale(1.1);
}

/* ==============================
   PRODUCT PRICE
   ============================== */

.product-price {
  margin: 2rem 0;
  padding: 1.5rem;
  background: rgba(212, 175, 55, 0.1);
  border: 2px solid var(--color-gold);
  border-radius: 10px;
  display: inline-block;
  min-width: 200px;
}

.price-label {
  font-family: 'Cinzel', serif;
  font-size: 1.2rem;
  color: var(--color-text-light);
  margin-right: 1rem;
}

.price-value {
  font-family: 'Cinzel', serif;
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-gold);
  text-shadow: 2px 2px 4px var(--color-shadow);
}

/* ==============================
   LIGHTBOX MODAL
   ============================== */

.lightbox-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(10px);
  animation: fadeIn 0.3s ease;
}

.lightbox-modal.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-content {
  position: relative;
  width: 90%;
  height: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.lightbox-image {
  pointer-events: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
  animation: zoomIn 0.3s ease;
}

.lightbox-close {
  position: absolute;
  top: 30px;
  right: 45px;
  color: var(--color-gold);
  font-size: 3rem;
  font-weight: bold;
  cursor: pointer;
  z-index: 10000;
  transition: all 0.3s ease;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.2);
  border: 2px solid var(--color-gold);
}

.lightbox-close:hover {
  background: var(--color-gold);
  color: var(--color-text-dark);
  transform: scale(1.1);
}

.lightbox-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(212, 175, 55, 0.8);
  color: var(--color-text-dark);
  border: none;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  font-size: 2rem;
  cursor: pointer;
  z-index: 10000;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-btn:hover {
  background: var(--color-gold);
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 5px 20px rgba(212, 175, 55, 0.6);
}

.lightbox-btn-prev {
  left: 30px;
}

.lightbox-btn-next {
  right: 30px;
}

@keyframes zoomIn {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* ==============================
   PRODUCT SINGLE IMAGE
   ============================== */

.product-image-container {
  width: 100%;
  max-width: 800px;
  margin: 2rem auto;
  border-radius: 10px;
  overflow: hidden;
}

.product-single-image {
  width: 100%;
  height: auto;
  max-height: 500px;
  object-fit: contain;
  border-radius: 10px;
  border: 3px solid var(--color-gold);
  box-shadow: 0 10px 40px var(--color-shadow);
  background: rgba(15, 15, 15, 0.5);
  cursor: pointer;
  transition: transform 0.3s ease;
  display: block;
  margin: 0 auto;
}

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

/* ==============================
   NEWS PAGE (Quoi de neuf)
   ============================== */

.news-hero {
  position: relative;
  width: 100%;
  height: 60vh;
  min-height: 400px;
  margin-top: 80px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.news-hero-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(4px) brightness(0.5);
}

.news-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(15, 15, 15, 0.4) 0%, rgba(26, 26, 26, 0.8) 100%);
  z-index: 1;
}

.news-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 2rem;
}

.news-hero-content h1 {
  font-family: 'Cinzel', serif;
  font-size: 4rem;
  color: var(--color-gold);
  text-shadow: 0 3px 9px rgba(0, 0, 0, 0.6), 0 0 18px rgba(248, 220, 174, 0.22);
  margin-bottom: 1rem;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.news-hero-content p {
  font-size: 1.4rem;
  color: var(--color-text-light);
  font-style: italic;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8);
}

/* ==============================
   FAQ PAGE
   ============================== */

.faq-item {
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(116, 50, 56, 0.2);
}

.faq-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.faq-item h3 {
  font-family: 'Cinzel', serif;
  color: var(--color-gold);
  font-size: 1.3rem;
  margin-bottom: 0.7rem;
}

.faq-item p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--color-text-light);
}

.faq-cta-card {
  text-align: center;
}

.faq-cta-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.faq-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.8rem 1.1rem;
  min-width: 150px;
  justify-content: center;
  text-decoration: none;
  color: var(--color-text-light);
  background: rgba(15, 15, 15, 0.75);
  border: 1px solid rgba(116, 50, 56, 0.7);
  border-radius: 8px;
  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

.faq-cta-btn:hover {
  transform: translateY(-2px);
  background: rgba(116, 50, 56, 0.32);
  border-color: var(--color-gold);
}

.faq-cta-icon {
  width: 20px;
  height: 20px;
  color: var(--color-gold);
}

/* Video placeholder */
.video-placeholder {
  width: 100%;
  max-width: 800px;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  background: #000;
  border: 2px solid rgba(116, 50, 56, 0.4);
  border-radius: 10px;
  overflow: hidden;
}

.video-placeholder iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: flex;
}

/* ==============================
   FOOTER
   ============================== */

.footer {
  background: rgba(15, 15, 15, 0.95);
  padding: 2rem;
  text-align: center;
  border-top: 2px solid var(--color-gold);
  margin-top: 0;
  position: relative;
  z-index: 1;
  width: 100%;
  overflow: visible;
}

.footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% -25%, rgba(248, 220, 174, 0.15), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.footer-image {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  padding: 0;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 20;
  pointer-events: none;
}

.footer-illustration {
  max-width: 50%;
  max-height: 400px;
  width: auto;
  height: auto;
  display: block;
  filter: drop-shadow(0 8px 30px rgba(0, 0, 0, 0.9)) drop-shadow(0 4px 15px rgba(0, 0, 0, 0.7));
  pointer-events: none;
}

.footer-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  z-index: 10;
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.lang-selector-wrap {
  margin-left: 1.25rem;
}

.lang-selector {
  background: rgba(26, 20, 18, 0.88);
  color: var(--color-text-light);
  border: 1px solid rgba(248, 220, 174, 0.45);
  border-radius: 8px;
  padding: 0.4rem 0.7rem;
  font-family: 'Crimson Text', serif;
  font-size: 0.95rem;
  min-width: 125px;
  cursor: pointer;
}

.lang-selector:focus-visible {
  outline: 2px solid rgba(248, 220, 174, 0.85);
  outline-offset: 2px;
}

.news-event-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: rgba(8, 8, 8, 0.72);
  backdrop-filter: blur(5px);
  z-index: 1400;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.news-event-modal.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.news-event-modal-content {
  width: min(620px, 100%);
  background: linear-gradient(168deg, rgba(31, 23, 20, 0.97), rgba(67, 35, 40, 0.96));
  border: 1px solid rgba(248, 220, 174, 0.5);
  border-radius: 14px;
  padding: 2.1rem 1.8rem 1.55rem;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.58);
  position: relative;
}

.news-event-modal-close {
  position: absolute;
  top: 0.45rem;
  right: 0.6rem;
  border: 0;
  background: transparent;
  color: #f4e8d0;
  font-size: 1.9rem;
  cursor: pointer;
}

.news-event-modal-close:focus-visible,
.news-event-modal-actions a:focus-visible,
.news-event-modal-actions button:focus-visible {
  outline: 2px solid rgba(248, 220, 174, 0.92);
  outline-offset: 3px;
}

.news-event-modal-content h2 {
  font-family: 'Cinzel', serif;
  color: var(--color-gold);
  font-size: 2rem;
  margin-bottom: 1rem;
  text-shadow: 0 0 14px rgba(248, 220, 174, 0.25);
}

.news-event-modal-content p {
  margin-bottom: 0.9rem;
  line-height: 1.68;
}

.news-event-modal-content .secondary-text {
  color: #f1debb;
}

.news-event-modal-actions {
  margin-top: 1.2rem;
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.cryptique-static {
  color: inherit;
}

.cryptique-animated {
  color: inherit;
  text-shadow: none;
  white-space: nowrap;
  font-variant-ligatures: none;
  text-rendering: geometricPrecision;
}

.footer p {
  color: var(--color-text-light);
  font-size: 0.9rem;
  margin: 0;
}

/* ==============================
   SOCIAL LINKS
   ============================== */

.social-links {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  justify-content: center;
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--color-gold);
  transition: all 0.3s ease;
  border-radius: 50%;
  background: rgba(116, 50, 56, 0.1);
  backdrop-filter: blur(5px);
}

.social-link:hover {
  color: var(--color-gold-light);
  transform: translateY(-3px) scale(1.1);
  background: rgba(116, 50, 56, 0.3);
  box-shadow: 0 4px 15px rgba(116, 50, 56, 0.5);
}

.social-icon {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

/* ==============================
   RESPONSIVE - TABLET
   ============================== */

@media (max-width: 768px) {
  .home-page::before {
    width: min(24vw, 220px);
    height: min(35vw, 290px);
    right: 1%;
    top: 20%;
    opacity: 0.42;
  }

  .home-decor-cards {
    width: min(22vw, 170px);
    height: min(28vw, 220px);
    left: 1%;
    bottom: 6%;
    opacity: 0.32;
  }

  body {
    background-attachment: scroll;
  }

  .navbar {
    padding: 0.75rem 1rem;
  }

  .navbar-container {
    flex-wrap: nowrap;
    row-gap: 0;
  }

  .lang-selector-wrap {
    margin-left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 0.25rem;
  }
  
  .logo-image {
    height: 40px;
    max-width: 150px;
  }
  
  .nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    margin-left: auto;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(116, 50, 56, 0.8);
    border-radius: 8px;
    cursor: pointer;
    z-index: 1301;
  }

  .nav-toggle span {
    width: 22px;
    height: 2px;
    margin: 0 auto;
    background: #fff;
    border-radius: 999px;
    transition: transform 0.25s ease, opacity 0.25s ease;
  }

  .navbar.nav-open .nav-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .navbar.nav-open .nav-toggle span:nth-child(2) {
    opacity: 0;
  }

  .navbar.nav-open .nav-toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .nav-links {
    display: none;
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 6.5rem 2rem 2rem;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(2px);
    z-index: 1300;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1rem;
    list-style: disc;
    list-style-position: inside;
    overflow-y: auto;
  }

  .navbar.nav-open .nav-links {
    display: flex;
  }
  
  .nav-links a {
    font-size: 1.2rem;
    padding: 0.35rem 0;
    color: #fff;
  }
  
  .header-image {
    top: 60px;
  }
  
  .header-illustration {
    max-width: 100%;
    max-height: 300px;
  }
  
  .hero {
    margin-top: 60px;
    min-height: 80vh;
  }
  
  .hero h1 {
    font-size: 2.5rem;
  }
  
  .logo-cryptique {
    max-width: 80%;
    max-height: 200px;
  }
  
  .section {
    padding: 3rem 1.5rem;
  }
  
  .section-title {
    font-size: 2rem;
    padding-bottom: 3rem;
  }
  
  .section-title::after {
    width: min(200px, 65%);
    height: 2px;
    bottom: 1.45rem;
  }

  .product-hub {
    margin-top: 72px;
    min-height: auto;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }

  .split-center-column {
    order: 1;
  }

  .split-product-left {
    order: 2;
  }

  .split-product-right {
    order: 3;
  }

  .split-product {
    min-height: 360px;
    transition: none;
  }

  .split-center-column {
    min-height: auto;
    padding: 1rem 0;
  }

  .split-product-left .split-product-image,
  .split-product-right .split-product-image {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }

  .split-product-left .split-product-image {
    background-position: left center;
    background-size: 120% auto;
  }

  .split-product-right .split-product-image {
    background-position: center;
  }

  .split-product-image {
    transition: none;
  }

  .split-product:hover .split-product-image,
  .split-product-left:hover .split-product-image,
  .split-product-right:hover .split-product-image {
    transform: none;
  }

  .product-hub:has(.split-product:hover) .split-product {
    filter: none;
  }

  .product-hub:has(.split-product:hover) .split-center-info {
    filter: none;
  }

  .split-hover-text {
    max-height: 180px;
    opacity: 1;
    transform: translateY(0);
  }

  .split-center-column::before {
    border-left: none;
    border-right: none;
  }

  .split-center-info {
    margin: 1rem;
  }

  .split-center-info h1 {
    font-size: 2rem;
  }

  .promo-popup-content {
    width: min(430px, 100%);
    padding: 2rem 1.4rem 1.35rem;
  }

  .news-event-modal-content {
    padding: 1.85rem 1.25rem 1.2rem;
  }

  .news-event-modal-content h2 {
    font-size: 1.6rem;
  }

  .promo-popup-content h2 {
    font-size: 1.75rem;
  }
  
  .card {
    padding: 1.5rem;
  }
  
  .card h3 {
    font-size: 1.5rem;
  }
  
  .grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .section-product-image {
    display: none;
  }
  
  .product-side-illustration {
    max-width: 200px;
    max-height: 350px;
  }
  
  .team-container {
    flex-direction: column;
    gap: 2rem;
  }
  
  .team-image {
    max-width: 100%;
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
    order: -1;
  }
  
  .footer {
    padding: 1.5rem 1rem;
  }
  
  .footer-content {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
  
  .footer-illustration {
    max-width: 100%;
    max-height: 250px;
  }
  
  .btn {
    padding: 0.8rem 1.5rem;
    font-size: 1rem;
    width: 100%;
    max-width: 300px;
  }

  .faq-cta-buttons {
    gap: 0.8rem;
  }

  .faq-cta-btn {
    min-width: 130px;
    padding: 0.7rem 0.85rem;
  }

  .product-detail-page .product-detail-section {
    max-width: 100%;
    padding: 1.6rem 1rem;
  }

  .product-detail-page .product-detail-card {
    max-width: 100%;
  }

  .product-detail-page .product-carousel {
    height: 260px;
  }

  .product-detail-page .carousel-image {
    height: 260px;
  }
  
  .product-details {
    grid-template-columns: 1fr;
    max-width: 600px;
    margin: 3rem auto;
  }

  .product-carousel-container {
    max-width: 100%;
  }

  .product-carousel {
    height: 300px;
  }

  .carousel-image {
    height: 300px;
  }

  .lightbox-close {
    top: 20px;
    right: 20px;
    font-size: 2rem;
    width: 40px;
    height: 40px;
  }

  .lightbox-btn {
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
  }

  .lightbox-btn-prev {
    left: 15px;
  }

  .lightbox-btn-next {
    right: 15px;
  }

  .carousel-btn {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }

  .carousel-btn-prev {
    left: 10px;
  }

  .carousel-btn-next {
    right: 10px;
  }

  .price-value {
    font-size: 2rem;
  }
  
  .contact-page::before,
  .product-page::before,
  .product-page::after {
    opacity: 0.2;
    background-size: 50%;
  }
  
  .form-container {
    padding: 1.5rem;
  }

  /* Projet layout responsive */
  .projet-layout {
    flex-direction: column;
  }

  .projet-image-placeholder {
    flex: 0 0 200px;
    min-height: 200px;
  }

  /* News hero responsive */
  .news-hero {
    height: 40vh;
    min-height: 280px;
    margin-top: 60px;
  }

  .news-hero-content h1 {
    font-size: 2.5rem;
  }

  .news-hero-content p {
    font-size: 1.1rem;
  }

  /* Video placeholder responsive */
  .video-placeholder {
    height: 250px;
  }
}

/* ==============================
   RESPONSIVE - MOBILE
   ============================== */

@media (max-width: 480px) {
  .home-page::before,
  .home-decor-cards {
    display: none;
  }

  body {
    background-attachment: scroll;
  }

  .navbar {
    padding: 0.5rem 0.75rem;
  }

  .navbar-container {
    flex-direction: row;
    align-items: center;
    gap: 0.35rem;
  }

  .lang-selector {
    width: 100%;
    max-width: 220px;
  }
  
  .logo-image {
    height: 35px;
    max-width: 120px;
  }
  
  .nav-links {
    padding: 5.75rem 1.25rem 1.5rem;
    gap: 0.8rem;
  }
  
  .nav-links a {
    font-size: 1.05rem;
    padding: 0.25rem 0;
  }
  
  .hero h1 {
    font-size: 2rem;
  }
  
  .section-title {
    font-size: 1.75rem;
  }
  
  .section {
    padding: 2rem 1rem;
  }
  
  .card {
    padding: 1rem;
  }

  .split-product {
    min-height: 280px;
  }

  .split-product-left .split-product-image {
    background-position: left center;
    background-size: 130% auto;
  }

  .split-product-right .split-product-image {
    background-position: center;
  }

  .split-product-image {
    transition: none;
  }

  .split-product:hover .split-product-image,
  .split-product-left:hover .split-product-image,
  .split-product-right:hover .split-product-image {
    transform: none;
  }

  .split-product-content {
    margin: 1rem;
    padding: 1rem;
  }

  .split-product-content h2 {
    font-size: 1.35rem;
  }

  .split-center-info h1 {
    font-size: 1.6rem;
  }

  .promo-popup-content {
    padding: 1.8rem 1.15rem 1.2rem;
  }

  .promo-popup-content h2 {
    font-size: 1.45rem;
  }
  
  .btn {
    padding: 0.7rem 1.2rem;
    font-size: 0.9rem;
  }

  .faq-cta-buttons {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .faq-cta-btn {
    width: 100%;
    min-width: 0;
  }

  .product-detail-page .product-detail-section {
    padding: 1.25rem 0.75rem;
  }

  .product-detail-page .product-detail-card {
    max-width: 100%;
  }

  .product-detail-page .card {
    padding: 1rem;
  }

  .product-detail-page .product-carousel {
    height: 220px;
  }

  .product-detail-page .carousel-image {
    height: 220px;
  }

  .product-detail-page .product-detail-actions {
    flex-direction: column;
    width: 100%;
  }

  .product-detail-page .product-detail-actions .btn {
    width: 100%;
    max-width: none;
  }
  
  .header-illustration {
    max-height: 200px;
  }
  
  .footer-illustration {
    max-height: 150px;
  }
  
  .team-image {
    max-width: 100%;
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
  }
  
  .contact-page::before,
  .product-page::before,
  .product-page::after {
    display: none;
  }

  .news-hero-content h1 {
    font-size: 1.8rem;
  }

  .news-event-modal-actions .btn {
    max-width: none;
  }

  .video-placeholder {
    height: 200px;
  }

  .video-placeholder-icon {
    font-size: 2.5rem;
    width: 60px;
    height: 60px;
  }
}

/* ==============================
   ANIMATIONS
   ============================== */

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInFromLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInFromRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInFromBottom {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.fade-in {
  animation: fadeIn 0.8s ease-out;
}

.scroll-animate {
  opacity: 0;
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.scroll-animate.section {
  transform: translateY(50px);
}

.scroll-animate.card {
  transform: translateY(30px);
}

.scroll-animate.section-title {
  transform: translateY(-20px);
}

.scroll-animate.team-container .team-text {
  transform: translateX(-30px);
  opacity: 0;
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.scroll-animate.team-container .team-image {
  transform: translateX(30px);
  opacity: 0;
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.scroll-animate.animate-in {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}

.scroll-animate.animate-in.team-container .team-text,
.scroll-animate.animate-in.team-container .team-image {
  opacity: 1;
  transform: translateX(0);
}