/* ============================================
   AUX PORTES DU TEMPS - Style Brutaliste
   ============================================ */

:root {
  --color-black: #000000;
  --color-white: #ffffff;
  --color-magenta: #ff3cfd;
  --color-gray-dark: #1a1a1a;
  --color-gray-mid: #333333;
  --color-gray-light: #666666;
  --color-gray-lighter: #999999;
  --font-title: 'Inter', sans-serif;
  --font-body: 'IBM Plex Mono', monospace;
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 8rem;
  --grid-color: rgba(255, 255, 255, 0.05);
  --grid-size: 40px;
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-white);
  background-color: var(--color-black);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-image: 
    linear-gradient(var(--grid-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  pointer-events: none;
  z-index: -1;
}

a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; font-size: inherit; cursor: pointer; border: none; background: none; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-title);
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}
h1 { font-size: clamp(3rem, 10vw, 8rem); }
h2 { font-size: clamp(2rem, 6vw, 5rem); }
h3 { font-size: clamp(1.5rem, 4vw, 3rem); }
h4 { font-size: clamp(1.25rem, 3vw, 2rem); }

p { font-family: var(--font-body); font-size: 1rem; line-height: 1.7; }
.text-mono { font-family: var(--font-body); }
.text-magenta { color: var(--color-magenta); }

.container { max-width: 1400px; margin: 0 auto; padding: 0 var(--space-md); }
.section { padding: var(--space-xl) 0; }
.section__header { margin-bottom: var(--space-lg); }
.section__title { margin-bottom: var(--space-sm); }
.section__subtitle { font-family: var(--font-body); font-size: 1.125rem; color: var(--color-gray-lighter); max-width: 600px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-title);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 2px solid transparent;
  transition: all var(--transition-fast);
  cursor: pointer;
}

.btn-primary { background-color: var(--color-magenta); color: var(--color-black); border-color: var(--color-magenta); }
.btn-primary:hover { background-color: var(--color-white); border-color: var(--color-white); color: var(--color-black); }
.btn-secondary { background-color: transparent; color: var(--color-white); border-color: var(--color-white); }
.btn-secondary:hover { background-color: var(--color-white); color: var(--color-black); }
.btn-ghost { background-color: transparent; color: var(--color-white); border-color: transparent; text-decoration: underline; text-underline-offset: 4px; }
.btn-ghost:hover { color: var(--color-magenta); }

/* ---------- Marquee ---------- */
.marquee { position: relative; width: 100%; overflow: hidden; background-color: var(--color-black); border-bottom: 1px solid var(--color-gray-mid); padding: var(--space-xs) 0; }
.marquee__inner { display: flex; width: max-content; animation: marquee 30s linear infinite; }
.marquee__content { display: flex; align-items: center; gap: var(--space-lg); padding-right: var(--space-lg); }
.marquee__item { font-family: var(--font-body); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.1em; white-space: nowrap; display: flex; align-items: center; gap: var(--space-sm); }
.marquee__item::after { content: '✦'; color: var(--color-magenta); }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ---------- Navigation ---------- */
.nav { position: sticky; top: 0; z-index: 1000; background-color: var(--color-black); border-bottom: 1px solid var(--color-gray-mid); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; max-width: 1400px; margin: 0 auto; padding: var(--space-sm) var(--space-md); }
.nav__logo { display: flex; align-items: center; gap: var(--space-xs); font-family: var(--font-title); font-size: 1rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.05em; }
.nav__logo-img { height: 40px; width: auto; }
.nav__logo span { color: var(--color-magenta); }
.nav__links { display: flex; align-items: center; gap: var(--space-md); }
.nav__link { font-family: var(--font-body); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; transition: color var(--transition-fast); }
.nav__link:hover, .nav__link--active { color: var(--color-magenta); }
.nav__cta { margin-left: var(--space-sm); }
.nav__menu-btn { display: none; flex-direction: column; gap: 5px; padding: 10px; }
.nav__menu-btn span { display: block; width: 24px; height: 2px; background-color: var(--color-white); transition: all var(--transition-fast); }
.nav__mobile { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: var(--color-black); z-index: 999; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-md); }
.nav__mobile.is-active { display: flex; }
.nav__mobile .nav__link { font-size: 1.5rem; }

/* ---------- Hero Section ---------- */
.hero { min-height: calc(100vh - 100px); display: flex; align-items: center; padding: var(--space-lg) var(--space-md); }
.hero__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); max-width: 1400px; margin: 0 auto; width: 100%; align-items: center; }
.hero__content { display: flex; flex-direction: column; gap: var(--space-md); }
.hero__content--centered { text-align: center; align-items: center; }
.hero__title { font-size: clamp(2.5rem, 8vw, 6rem); }
.hero__title span { display: block; }
.hero__title--part2 { display: none; } /* Masqué sur desktop */
.hero__subtitle { font-family: var(--font-body); font-size: 1.25rem; color: var(--color-gray-lighter); max-width: 500px; }
.hero__price { font-family: var(--font-title); font-size: 2rem; font-weight: 900; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
.hero__visual { position: relative; display: flex; justify-content: center; align-items: center; }
.asterisk { color: var(--color-magenta); }
.asterisk--large { position: absolute; top: 50%; right: -60px; transform: translateY(-50%); font-size: 10rem; color: var(--color-magenta); opacity: 0.5; pointer-events: none; animation: rotate 20s linear infinite; }
@keyframes rotate { from { transform: translateY(-50%) rotate(0deg); } to { transform: translateY(-50%) rotate(360deg); } }

/* Mockup mobile - masqué sur desktop */
.hero__mockup-mobile { display: none; text-align: center; }
.hero__mockup-mobile img { max-width: 100%; max-height: 350px; width: auto; border: 2px solid var(--color-gray-mid); transition: border-color var(--transition-base); }
.hero__mockup-mobile img:hover { border-color: var(--color-magenta); }

/* ============================================
   MOCKUP COMBO SYSTEM - HOME PAGE (GUIRLANDE)
   ============================================ */
.mockups-guirlande { position: relative; width: 100%; height: 550px; display: grid; grid-template-columns: 1.2fr 1fr; grid-template-rows: 1fr 1fr; gap: var(--space-sm); }
.mockup-combo { position: relative; display: flex; justify-content: center; align-items: center; }
.mockup-combo img { position: absolute; border: 2px solid var(--color-gray-mid); transition: all var(--transition-base); max-height: 100%; width: auto; }
.mockup-combo:hover img { border-color: var(--color-magenta); }

/* Combo 1 */
.mockup-combo--1 { grid-column: 1; grid-row: 1 / 3; }
.mockup-combo--1 .mockup-combo__dos { transform: rotate(-3deg) translateX(-15%); z-index: 1; max-height: 90%; }
.mockup-combo--1 .mockup-combo__face { transform: rotate(3deg) translateX(15%); z-index: 2; max-height: 80%; }
.mockup-combo--1:hover .mockup-combo__dos { transform: rotate(-5deg) translateX(-20%); }
.mockup-combo--1:hover .mockup-combo__face { transform: rotate(5deg) translateX(20%); }

/* Combo 2 */
.mockup-combo--2 { grid-column: 2; grid-row: 1; }
.mockup-combo--2 .mockup-combo__dos { transform: rotate(2deg) translateX(-10%); z-index: 1; max-height: 85%; }
.mockup-combo--2 .mockup-combo__face { transform: rotate(-2deg) translateX(10%); z-index: 2; max-height: 75%; }
.mockup-combo--2:hover .mockup-combo__dos { transform: rotate(4deg) translateX(-15%); }
.mockup-combo--2:hover .mockup-combo__face { transform: rotate(-4deg) translateX(15%); }

/* Combo 3 */
.mockup-combo--3 { grid-column: 2; grid-row: 2; }
.mockup-combo--3 .mockup-combo__dos { transform: rotate(-2deg) translateX(-10%); z-index: 1; max-height: 85%; }
.mockup-combo--3 .mockup-combo__face { transform: rotate(2deg) translateX(10%); z-index: 2; max-height: 75%; }
.mockup-combo--3:hover .mockup-combo__dos { transform: rotate(-4deg) translateX(-15%); }
.mockup-combo--3:hover .mockup-combo__face { transform: rotate(4deg) translateX(15%); }

/* ============================================
   MOCKUP COMBO SYSTEM - TSHIRT PAGE
   ============================================ */
.hero--tshirt { min-height: calc(100vh - 100px); }
.hero--tshirt .hero__visual { position: relative; height: 500px; }

/* Mockup combo - Hero */
.mockup-combo--hero { position: relative; width: 100%; height: 500px; display: flex; justify-content: center; align-items: center; }
.mockup-combo--hero img { position: absolute; max-height: 450px; width: auto; border: 2px solid var(--color-gray-mid); transition: all var(--transition-base); }
.mockup-combo--hero .mockup-combo__dos { transform: rotate(-5deg) translateX(-15%); z-index: 1; }
.mockup-combo--hero .mockup-combo__face { transform: rotate(5deg) translateX(15%); z-index: 2; }
.mockup-combo--hero:hover .mockup-combo__dos { transform: rotate(-8deg) translateX(-20%); border-color: var(--color-magenta); }
.mockup-combo--hero:hover .mockup-combo__face { transform: rotate(8deg) translateX(20%); border-color: var(--color-magenta); }

/* Mockup combo - Philosophie */
.mockup-combo--philo { position: relative; width: 100%; height: 400px; display: flex; justify-content: center; align-items: center; }
.mockup-combo--philo img { position: absolute; max-height: 350px; width: auto; border: 2px solid var(--color-gray-mid); transition: all var(--transition-base); }
.mockup-combo--philo .mockup-combo__dos { transform: rotate(-3deg) translateX(-12%); z-index: 1; }
.mockup-combo--philo .mockup-combo__face { transform: rotate(3deg) translateX(12%); z-index: 2; }
.mockup-combo--philo:hover .mockup-combo__dos { transform: rotate(-6deg) translateX(-18%); border-color: var(--color-magenta); }
.mockup-combo--philo:hover .mockup-combo__face { transform: rotate(6deg) translateX(18%); border-color: var(--color-magenta); }

/* Mockup combo - Versions */
.mockup-combo--version { position: relative; width: 100%; height: 350px; display: flex; justify-content: center; align-items: center; }
.mockup-combo--version img { position: absolute; max-height: 300px; width: auto; border: 2px solid var(--color-gray-mid); transition: all var(--transition-base); }
.mockup-combo--version .mockup-combo__dos { transform: rotate(-3deg) translateX(-12%); z-index: 1; }
.mockup-combo--version .mockup-combo__face { transform: rotate(3deg) translateX(12%); z-index: 2; }
.mockup-combo--version:hover .mockup-combo__dos { transform: rotate(-6deg) translateX(-18%); border-color: var(--color-magenta); }
.mockup-combo--version:hover .mockup-combo__face { transform: rotate(6deg) translateX(18%); border-color: var(--color-magenta); }

/* ---------- Page T-shirt - Philosophie ---------- */
.philosophie-intro { max-width: 800px; margin-bottom: var(--space-xl); }
.philosophie-intro__text { font-size: 1.5rem; font-weight: 700; color: var(--color-white); margin-bottom: var(--space-md); }
.philosophie-intro p { color: var(--color-gray-lighter); line-height: 1.8; }

.philosophie-block { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: center; padding: var(--space-xl) 0; border-top: 1px solid var(--color-gray-mid); }
.philosophie-block:first-of-type { border-top: none; }
.philosophie-block--reverse { direction: rtl; }
.philosophie-block--reverse > * { direction: ltr; }
.philosophie-block__text { display: flex; flex-direction: column; gap: var(--space-md); }
.philosophie-block__title { font-family: var(--font-title); font-size: 1.5rem; font-weight: 900; color: var(--color-magenta); text-transform: uppercase; }
.philosophie-block__text p { color: var(--color-gray-lighter); line-height: 1.8; }
.philosophie-block__conclusion { font-size: 1.125rem; color: var(--color-white) !important; font-style: italic; border-left: 3px solid var(--color-magenta); padding-left: var(--space-md); }
.philosophie-block__image { display: flex; justify-content: center; }

/* ---------- Montres Podium (Home) ---------- */
.montres-section { border-top: 1px solid var(--color-gray-mid); border-bottom: 1px solid var(--color-gray-mid); }
.montres-podium { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }
.montre-podium { background-color: var(--color-black); border: 2px solid var(--color-gray-mid); overflow: hidden; transition: border-color var(--transition-fast); }
.montre-podium:hover { border-color: var(--color-magenta); }
.montre-podium__image { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; padding: var(--space-md); background-color: var(--color-black); }
.montre-podium__image img { max-width: 100%; max-height: 100%; object-fit: contain; }
.montre-podium__info { display: flex; flex-direction: column; gap: 4px; padding: var(--space-sm); background-color: var(--color-gray-dark); }
.montre-podium__brand { font-family: var(--font-body); font-size: 0.7rem; color: var(--color-gray-lighter); text-transform: uppercase; letter-spacing: 0.1em; }
.montre-podium__model { font-family: var(--font-title); font-size: 1.1rem; font-weight: 700; color: var(--color-white); }
.montre-podium__place { font-family: var(--font-body); font-size: 0.75rem; color: var(--color-magenta); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 4px; }

/* ---------- How It Works (Full Width) ---------- */
.how-it-works { padding: var(--space-xl) 0; border-top: 1px solid var(--color-gray-mid); border-bottom: 1px solid var(--color-gray-mid); }
.how-it-works .section__header { padding: 0 var(--space-md); max-width: 1400px; margin: 0 auto var(--space-lg); }
.how-it-works__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.how-it-works__step { padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-sm); }
.how-it-works__number { font-family: var(--font-title); font-size: 3rem; font-weight: 900; color: var(--color-magenta); line-height: 1; }
.how-it-works__title { font-family: var(--font-title); font-size: 1.25rem; font-weight: 700; text-transform: uppercase; }
.how-it-works__desc { font-family: var(--font-body); font-size: 0.875rem; color: var(--color-gray-lighter); }

/* ---------- Portes Section (6 portes fixes) ---------- */
.portes-section { padding: var(--space-xl) var(--space-md); }
.portes-section .section__subtitle { font-family: var(--font-body); font-size: 1rem; color: var(--color-gray-lighter); margin-top: var(--space-sm); }
.portes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); margin-top: var(--space-lg); }
.porte-card { background-color: var(--color-gray-dark); border: 1px solid var(--color-gray-mid); padding: var(--space-md); }
.porte-card--full { border-color: var(--color-magenta); }
.porte-card__header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-md); padding-bottom: var(--space-sm); border-bottom: 1px solid var(--color-gray-mid); }
.porte-card__number { font-family: var(--font-title); font-size: 2rem; font-weight: 900; color: var(--color-magenta); }
.porte-card__gagnants { font-family: var(--font-body); font-size: 0.875rem; color: var(--color-gray-lighter); }
.porte-card__montres { display: flex; flex-wrap: wrap; gap: 8px; }
.porte-card__montre { width: 36px; height: 36px; background-color: var(--color-gray-mid); border: 1px solid var(--color-gray-light); display: flex; align-items: center; justify-content: center; font-family: var(--font-body); font-size: 0.75rem; color: var(--color-white); }
.porte-card__montre--first { background-color: var(--color-magenta); color: var(--color-black); border-color: var(--color-magenta); font-weight: 700; }

/* ---------- Montres Grid ---------- */
.montres-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-sm); }
.montre-card { position: relative; aspect-ratio: 1; border: 1px solid var(--color-gray-mid); overflow: hidden; transition: all var(--transition-fast); }
.montre-card:hover { border-color: var(--color-magenta); }
.montre-card img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-base); }
.montre-card:hover img { transform: scale(1.05); }
.montre-card__overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: var(--space-sm); background: linear-gradient(transparent, rgba(0,0,0,0.9)); transform: translateY(100%); transition: transform var(--transition-base); }
.montre-card:hover .montre-card__overlay { transform: translateY(0); }
.montre-card__brand { font-size: 0.75rem; color: var(--color-magenta); text-transform: uppercase; }
.montre-card__name { font-family: var(--font-title); font-size: 0.875rem; font-weight: 700; }

/* ---------- Portes System ============ */
.portes { padding: var(--space-xl) var(--space-md); border-top: 1px solid var(--color-gray-mid); border-bottom: 1px solid var(--color-gray-mid); }

/* Sélecteur de portes */
.portes-selector { display: flex; justify-content: center; gap: var(--space-xs); margin-bottom: var(--space-lg); flex-wrap: wrap; }
.porte-tab { padding: var(--space-sm) var(--space-md); border: 2px solid var(--color-gray-mid); background-color: var(--color-black); cursor: pointer; transition: all var(--transition-fast); text-align: center; min-width: 100px; }
.porte-tab:hover { border-color: var(--color-gray-light); }
.porte-tab.is-active { border-color: var(--color-magenta); background-color: var(--color-magenta); }
.porte-tab.is-active .porte-tab__title { color: var(--color-black); }
.porte-tab__title { font-family: var(--font-title); font-size: clamp(0.9rem, 1.5vw, 1.1rem); font-weight: 900; text-transform: uppercase; color: var(--color-white); }

/* Nombre de gagnants centré - plus petit */
.portes-gagnants { text-align: center; margin-bottom: var(--space-lg); }
.portes-gagnants__number { display: block; font-family: var(--font-title); font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 900; color: var(--color-magenta); line-height: 1; transition: all var(--transition-base); }
.portes-gagnants__label { display: block; font-family: var(--font-title); font-size: clamp(1rem, 2vw, 1.5rem); font-weight: 900; text-transform: uppercase; color: var(--color-white); letter-spacing: 0.1em; }

/* Grille des 10 montres */
.portes-montres { display: flex; justify-content: center; align-items: stretch; gap: var(--space-sm); flex-wrap: wrap; }

/* Montre individuelle - taille fixe pour toutes */
.porte-montre { width: clamp(100px, 9vw, 130px); height: auto; min-height: clamp(140px, 14vw, 190px); background-color: var(--color-black); border: 2px solid var(--color-gray-mid); padding: var(--space-sm); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; transition: all var(--transition-fast); position: relative; }
.porte-montre img { width: 100%; aspect-ratio: 1; object-fit: contain; margin-bottom: var(--space-xs); }
.porte-montre__brand { font-family: var(--font-body); font-size: 0.7rem; color: var(--color-gray-lighter); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 3px; }
.porte-montre__model { font-family: var(--font-title); font-size: 0.85rem; font-weight: 700; color: var(--color-white); line-height: 1.3; }
.porte-montre__lock { display: none; font-size: 2.5rem; color: var(--color-white); opacity: 0.6; }

/* État : Nouvelle montre (NEW) - Rose + plus grande */
.porte-montre.is-new { width: clamp(115px, 10.5vw, 150px); min-height: clamp(160px, 16vw, 220px); border-color: var(--color-magenta); box-shadow: 0 0 25px rgba(255, 60, 253, 0.5); }
.porte-montre.is-new::before { content: 'NEW'; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background-color: var(--color-magenta); color: var(--color-black); font-family: var(--font-title); font-size: 0.6rem; font-weight: 900; padding: 4px 10px; letter-spacing: 0.1em; z-index: 1; }
.porte-montre.is-new .porte-montre__brand { color: var(--color-magenta); }

/* État : Montre active (déjà débloquée) - Normal */
.porte-montre.is-active { border-color: var(--color-gray-mid); }

/* État : Montre verrouillée - Juste un cadenas */
.porte-montre.is-locked { border-color: var(--color-gray-mid); background-color: var(--color-gray-dark); }
.porte-montre.is-locked img,
.porte-montre.is-locked .porte-montre__brand,
.porte-montre.is-locked .porte-montre__model { display: none; }
.porte-montre.is-locked .porte-montre__lock { display: block; }

/* ---------- FAQ Accordion ---------- */
.faq-list { width: 100%; max-width: 100%; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--color-gray-mid); }
.faq-question { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: var(--space-md) 0; font-family: var(--font-title); font-size: 1.25rem; font-weight: 700; text-align: left; color: var(--color-white); background: none; cursor: pointer; transition: color var(--transition-fast); }
.faq-question:hover { color: var(--color-magenta); }
.faq-question::after { content: '+'; font-size: 1.5rem; transition: transform var(--transition-fast); }
.faq-item.is-open .faq-question::after { transform: rotate(45deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height var(--transition-base); }
.faq-item.is-open .faq-answer { max-height: 500px; }
.faq-answer p { padding-bottom: var(--space-md); color: var(--color-gray-lighter); font-size: 1rem; line-height: 1.8; }

/* ---------- Engagements Section ---------- */
.engagements-section { border-top: 1px solid var(--color-gray-mid); border-bottom: 1px solid var(--color-gray-mid); }
.engagement { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); align-items: center; padding: var(--space-lg) 0; border-bottom: 1px solid var(--color-gray-mid); }
.engagement:last-child { border-bottom: none; }
.engagement--reverse { direction: rtl; }
.engagement--reverse > * { direction: ltr; }
.engagement__visual img { width: 100%; height: auto; border: 2px solid var(--color-gray-mid); }
.engagement__content { display: flex; flex-direction: column; gap: var(--space-sm); }
.engagement__tag { font-family: var(--font-body); font-size: 0.875rem; color: var(--color-magenta); text-transform: uppercase; letter-spacing: 0.1em; }
.engagement__title { font-size: clamp(1.5rem, 4vw, 2.5rem); }
.engagement__desc { color: var(--color-gray-lighter); }

/* ---------- CTA Section ---------- */
.cta-section { text-align: center; padding: var(--space-xl) var(--space-md); border-top: 1px solid var(--color-gray-mid); border-bottom: 1px solid var(--color-gray-mid); }
.cta-section__title { font-size: clamp(2rem, 5vw, 4rem); margin-bottom: var(--space-sm); }
.cta-section__subtitle { font-family: var(--font-body); font-size: 1.25rem; color: var(--color-gray-lighter); margin-bottom: var(--space-md); }

/* ---------- T-shirt Page Styles ---------- */

/* Bloc Créatrice */
.creatrice-block { display: grid; grid-template-columns: 350px 1fr; gap: var(--space-xl); align-items: start; }
.creatrice-block__image { position: relative; }
.creatrice-block__image img { width: 100%; height: auto; border: 2px solid var(--color-gray-mid); transition: border-color var(--transition-base); }
.creatrice-block__image:hover img { border-color: var(--color-magenta); }
.creatrice-block__instagram { display: inline-flex; align-items: center; gap: var(--space-xs); margin-top: var(--space-sm); font-family: var(--font-body); font-size: 0.875rem; color: var(--color-magenta); transition: opacity var(--transition-fast); }
.creatrice-block__instagram:hover { opacity: 0.7; }
.creatrice-block__content { display: flex; flex-direction: column; gap: var(--space-md); }
.creatrice-block__name { font-size: clamp(2rem, 5vw, 3rem); }
.creatrice-block__text { display: flex; flex-direction: column; gap: var(--space-sm); }
.creatrice-block__text p { color: var(--color-gray-lighter); line-height: 1.8; }

.creatrice { display: grid; grid-template-columns: 400px 1fr; gap: var(--space-lg); align-items: start; }
.creatrice__image { position: relative; }
.creatrice__image img { width: 100%; height: auto; border: 2px solid var(--color-gray-mid); }
.creatrice__social { margin-top: var(--space-sm); }
.creatrice__social a { display: inline-flex; align-items: center; gap: var(--space-xs); font-family: var(--font-body); font-size: 0.875rem; color: var(--color-magenta); transition: opacity var(--transition-fast); }
.creatrice__social a:hover { opacity: 0.7; }
.creatrice__content { display: flex; flex-direction: column; gap: var(--space-md); }
.creatrice__tag { font-family: var(--font-body); font-size: 0.875rem; color: var(--color-magenta); text-transform: uppercase; letter-spacing: 0.1em; }
.creatrice__name { font-size: clamp(2rem, 5vw, 3.5rem); }
.creatrice__bio { color: var(--color-gray-lighter); line-height: 1.8; }
.creatrice__bio p { margin-bottom: var(--space-sm); }
.creatrice__bio p:last-child { margin-bottom: 0; }

.philosophie-section { display: flex; flex-direction: column; gap: var(--space-xl); }
.philosophie { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); align-items: center; }
.philosophie--reverse { direction: rtl; }
.philosophie--reverse > * { direction: ltr; }
.philosophie__content { display: flex; flex-direction: column; gap: var(--space-sm); }
.philosophie__title { font-size: clamp(1.5rem, 4vw, 2.5rem); }
.philosophie__text { color: var(--color-gray-lighter); line-height: 1.8; }
.philosophie__visual { position: relative; display: flex; justify-content: center; align-items: center; }
.philosophie__visual img { max-width: 100%; height: auto; border: 2px solid var(--color-gray-mid); transition: border-color var(--transition-fast); }
.philosophie__visual:hover img { border-color: var(--color-magenta); }

.caracteristiques__intro { max-width: 700px; margin-bottom: var(--space-lg); }
.caracteristiques__intro p { font-size: 1.125rem; color: var(--color-gray-lighter); line-height: 1.8; }
.caracteristiques__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-sm) var(--space-lg); }
.caracteristiques__item { display: flex; align-items: flex-start; gap: var(--space-sm); font-family: var(--font-body); font-size: 1rem; color: var(--color-white); }
.caracteristiques__icon { color: var(--color-magenta); flex-shrink: 0; }

.versions { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }
.version { text-align: center; }
.version__image { margin-bottom: var(--space-md); display: flex; justify-content: center; }
.version__title { font-size: 1.5rem; margin-bottom: var(--space-xs); }
.version__price { font-family: var(--font-title); font-size: 1.25rem; font-weight: 700; margin-bottom: var(--space-sm); }

/* ---------- Page Montres Styles ---------- */
.section--montres { padding-top: calc(80px + var(--space-xl)); }
.montre-detail { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); align-items: center; padding: var(--space-xl) 0; border-bottom: 1px solid var(--color-gray-mid); }
.montre-detail:first-of-type { padding-top: 0; }
.montre-detail--reverse { direction: rtl; }
.montre-detail--reverse > * { direction: ltr; }
.montre-detail__image { position: relative; display: flex; justify-content: center; align-items: center; padding: var(--space-md); }
.montre-detail__image img { max-width: 100%; max-height: 400px; width: auto; height: auto; transition: transform var(--transition-base); }
.montre-detail:hover .montre-detail__image img { transform: scale(1.03); }
.montre-detail__place { position: absolute; top: var(--space-sm); left: var(--space-sm); background-color: var(--color-magenta); color: var(--color-black); font-family: var(--font-title); font-size: 0.875rem; font-weight: 700; text-transform: uppercase; padding: var(--space-xs) var(--space-sm); z-index: 2; }
.montre-detail--reverse .montre-detail__place { left: auto; right: var(--space-sm); }
.montre-detail__content { display: flex; flex-direction: column; gap: var(--space-sm); }
.montre-detail__brand { font-family: var(--font-body); font-size: 0.875rem; color: var(--color-magenta); text-transform: uppercase; letter-spacing: 0.1em; }
.montre-detail__model { font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.1; }
.montre-detail__value { font-family: var(--font-title); font-size: 1.5rem; font-weight: 700; color: var(--color-white); }
.montre-detail__specs { display: flex; flex-direction: column; gap: var(--space-xs); margin-top: var(--space-sm); }
.montre-detail__specs li { font-family: var(--font-body); font-size: 1rem; color: var(--color-gray-lighter); padding-left: var(--space-md); position: relative; }
.montre-detail__specs li::before { content: "✦"; position: absolute; left: 0; color: var(--color-magenta); }

/* ---------- Page Montres - Hero avec grille miniatures ---------- */
.hero--montres .hero__visual { display: flex; align-items: center; justify-content: center; }
.montres-preview { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-sm); width: 100%; max-width: 900px; }
.montres-preview__item { aspect-ratio: 1/2; background-color: var(--color-gray-dark); border: 2px solid var(--color-gray-mid); display: flex; align-items: center; justify-content: center; transition: all var(--transition-fast); overflow: hidden; }
.montres-preview__item:hover { border-color: var(--color-magenta); }
.montres-preview__item img { width: 200%; height: 200%; object-fit: cover; object-position: center; transition: transform var(--transition-base); }
.montres-preview__item:hover img { transform: scale(1.15); }
.montres-preview__item--grand-prix { border-color: var(--color-magenta); box-shadow: 0 0 15px rgba(255, 60, 253, 0.3); }

/* Montre Grand Prix (1ère place) */
.montre-detail--grand-prix { border: 2px solid var(--color-magenta); padding: var(--space-lg); background-color: rgba(255, 60, 253, 0.05); margin-top: var(--space-lg); }
.montre-detail--grand-prix .montre-detail__place { top: var(--space-md); font-size: 1rem; padding: var(--space-sm) var(--space-md); }
.montre-detail--grand-prix .montre-detail__model { color: var(--color-magenta); }
.montre-detail--grand-prix .montre-detail__value { font-size: 2rem; color: var(--color-magenta); }

/* ---------- Page Engagements ---------- */
.hero--engagements { min-height: 50vh; display: flex; align-items: center; justify-content: center; text-align: center; }
.hero__description { font-family: var(--font-body); font-size: 1.125rem; color: var(--color-gray-lighter); margin-top: var(--space-md); line-height: 1.8; }
.hero__baseline { font-family: var(--font-body); font-size: 1.25rem; font-style: italic; color: var(--color-magenta); margin-top: var(--space-md); }

/* Engagement blocks */
.engagement-block { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--space-xl); align-items: center; padding: var(--space-lg) 0; }
.engagement-block--reverse { direction: rtl; }
.engagement-block--reverse > * { direction: ltr; }
.engagement-block__image { overflow: hidden; border: 2px solid var(--color-gray-mid); }
.engagement-block__image img { width: 100%; height: auto; display: block; transition: transform var(--transition-base); }
.engagement-block:hover .engagement-block__image img { transform: scale(1.03); }
.engagement-block__content { display: flex; flex-direction: column; gap: var(--space-md); }
.engagement-block__subtitle { font-family: var(--font-body); font-size: 0.875rem; color: var(--color-magenta); text-transform: uppercase; letter-spacing: 0.1em; }
.engagement-block__title { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.1; }
.engagement-block__intro { font-size: 1.25rem; font-weight: 700; color: var(--color-white); }
.engagement-block__content p { color: var(--color-gray-lighter); line-height: 1.8; }
.engagement-block__quote { border-left: 3px solid var(--color-magenta); padding-left: var(--space-md); margin-top: var(--space-sm); font-style: italic; color: var(--color-white); line-height: 1.8; }
.engagement-block__quote cite { display: block; margin-top: var(--space-xs); font-size: 0.875rem; color: var(--color-gray-lighter); font-style: normal; }

@media (max-width: 1024px) {
  .impact-grid { grid-template-columns: 1fr; }
  .engagement-block { grid-template-columns: 1fr; gap: var(--space-lg); }
  .engagement-block--reverse { direction: ltr; }
  .engagement-block__image { order: -1; }
}

/* ---------- Pages Légales (Mentions, CGV, Règlement) ---------- */
.legal { padding: calc(var(--nav-height) + var(--space-xl)) 0 var(--space-xl); }
.legal__title { font-size: clamp(2.5rem, 6vw, 4rem); margin-bottom: var(--space-lg); }
.legal__intro { font-size: 1.125rem; color: var(--color-gray-lighter); line-height: 1.8; margin-bottom: var(--space-xl); padding-bottom: var(--space-lg); border-bottom: 1px solid var(--color-gray-mid); }
.legal__section { margin-bottom: var(--space-xl); padding-bottom: var(--space-lg); border-bottom: 1px solid var(--color-gray-mid); }
.legal__section:last-child { border-bottom: none; }
.legal__section h2 { font-size: 1.5rem; color: var(--color-magenta); margin-bottom: var(--space-md); text-transform: uppercase; }
.legal__section p { color: var(--color-gray-lighter); line-height: 1.8; margin-bottom: var(--space-sm); }
.legal__section p:last-child { margin-bottom: 0; }
.legal__section a { color: var(--color-magenta); text-decoration: underline; }
.legal__section a:hover { color: var(--color-white); }
.legal__section ul, .legal__section ol { color: var(--color-gray-lighter); line-height: 1.8; margin: var(--space-sm) 0; padding-left: var(--space-md); }
.legal__section li { margin-bottom: var(--space-xs); }
.legal__section strong { color: var(--color-white); }

/* ---------- Footer ---------- */
.footer { background-color: var(--color-black); border-top: 1px solid var(--color-gray-mid); padding: var(--space-lg) var(--space-md); }
.footer__inner { max-width: 1400px; margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-lg); flex-wrap: wrap; }
.footer__logo { display: flex; align-items: center; gap: var(--space-xs); font-family: var(--font-title); font-size: 1rem; font-weight: 900; text-transform: uppercase; }
.footer__logo-img { height: 24px; width: auto; }
.footer__logo span { color: var(--color-magenta); }
.footer__links { display: flex; gap: var(--space-md); flex-wrap: wrap; }
.footer__link { font-family: var(--font-body); font-size: 0.875rem; color: var(--color-gray-lighter); transition: color var(--transition-fast); }
.footer__link:hover { color: var(--color-magenta); }
.footer__social { display: flex; gap: var(--space-sm); }
.footer__social-link { width: 40px; height: 40px; border: 1px solid var(--color-gray-mid); display: flex; align-items: center; justify-content: center; transition: all var(--transition-fast); }
.footer__social-link:hover { border-color: var(--color-magenta); color: var(--color-magenta); }
.footer__bottom { width: 100%; padding-top: var(--space-md); margin-top: var(--space-md); border-top: 1px solid var(--color-gray-mid); font-family: var(--font-body); font-size: 0.75rem; color: var(--color-gray-light); text-align: center; }

/* ---------- Responsive ---------- */

/* Petit écran desktop (1024px - 1440px) */
@media (max-width: 1440px) {
  /* Portes sur 2 lignes : 10-9-8-7-6-5 & 4-3-2-1 */
  .portes-montres { max-width: 900px; margin: 0 auto; flex-wrap: wrap; }
}

/* Tablette (768px - 1024px) */
@media (max-width: 1024px) {
  /* Tous les titres centrés */
  .section__header { text-align: center; }
  .section__title { text-align: center; }
  .section__subtitle { text-align: center; margin-left: auto; margin-right: auto; }
  
  /* Hero tablette : nouveau design avec mockup entre les titres */
  .hero__inner { grid-template-columns: 1fr; text-align: center; }
  .hero__content { align-items: center; }
  .hero__subtitle { max-width: 100%; }
  .hero__ctas { justify-content: center; }
  
  /* Masquer la guirlande desktop */
  .hero__visual { display: none; }
  
  /* Afficher le mockup mobile */
  .hero__mockup-mobile { display: block; margin: var(--space-md) auto; }
  .hero__mockup-mobile img { max-height: 750px; }
  .hero__title--part2 { display: block; } /* Afficher la 2ème partie du titre */
  
  /* Portes sur 2 lignes : 10-9-8-7-6-5 & 4-3-2-1 */
  .portes-montres { max-width: 750px; flex-wrap: wrap; }
  .porte-montre { width: calc(16.66% - 12px); min-width: 100px; }
  .porte-montre.is-new { width: calc(16.66% - 12px); min-width: 110px; }
  
  /* How it works */
  .how-it-works__grid { grid-template-columns: repeat(2, 1fr); }
  .how-it-works__step { text-align: center; align-items: center; }
  
  /* Montres podium */
  .montres-podium { grid-template-columns: repeat(2, 1fr); }
  .portes-grid { grid-template-columns: repeat(2, 1fr); }
  
  /* Engagements */
  .engagement { grid-template-columns: 1fr; text-align: center; }
  .engagement--reverse { direction: ltr; }
  .engagement__content { align-items: center; }
  
  /* T-shirt page - tout centré */
  .hero--tshirt .hero__inner { grid-template-columns: 1fr; text-align: center; }
  .hero--tshirt .hero__content { align-items: center; }
  .hero--tshirt .hero__visual { order: -1; margin-bottom: var(--space-md); }
  .hero--tshirt .hero__ctas { justify-content: center; }
  
  .philosophie-intro { text-align: center; }
  .philosophie-intro p { text-align: center; }
  
  .philosophie-block { grid-template-columns: 1fr; text-align: center; gap: var(--space-lg); }
  .philosophie-block__text { align-items: center; display: flex; flex-direction: column; }
  .philosophie-block__image { order: -1; }
  .philosophie-block--reverse { direction: ltr; }
  .philosophie-block--reverse .philosophie-block__image { order: -1; }
  
  /* Tablette : mockups plus grands */
  .mockup-combo--hero { height: 450px; }
  .mockup-combo--hero img { max-height: 400px; }
  .mockup-combo--philo { height: 400px; }
  .mockup-combo--philo img { max-height: 350px; }
  
  .creatrice { grid-template-columns: 1fr; text-align: center; }
  .creatrice__image { order: -1; max-width: 400px; margin: 0 auto var(--space-lg); }
  .creatrice__content { align-items: center; }
  
  /* Bloc créatrice tablette */
  .creatrice-block { grid-template-columns: 1fr; text-align: center; gap: var(--space-lg); }
  .creatrice-block__image { order: -1; max-width: 350px; margin: 0 auto; }
  .creatrice-block__content { align-items: center; }
  .creatrice-block__text p { text-align: center; }
  
  .caracteristiques__intro { text-align: center; }
  .caracteristiques__list { justify-items: center; }
  .caracteristiques__item { justify-content: center; }
  
  .versions { grid-template-columns: 1fr; }
  .version-card { text-align: center; }
  
  /* Montres page */
  .montre-detail { grid-template-columns: 1fr; gap: var(--space-lg); text-align: center; }
  .montre-detail__content { align-items: center; }
  .montre-detail--reverse { direction: ltr; }
  .montre-detail__image { order: -1; }
  .montre-detail__place { left: 50%; transform: translateX(-50%); right: auto; top: 0; }
  .montre-detail--reverse .montre-detail__place { left: 50%; right: auto; transform: translateX(-50%); }
  .montre-detail__image img { max-height: 350px; }
  .montre-detail__specs { align-items: center; }
  .montre-detail__specs li { text-align: center; }
  
  /* Grand prix responsive */
  .montre-detail--grand-prix { padding: var(--space-lg); }
  .montre-detail--grand-prix .montre-detail__place { top: 0; }
  
  /* FAQ */
  .faq-list { text-align: left; }
  .faq-question { text-align: left; }
  .faq-answer p { text-align: left; }
  
  /* Footer tablette - 2 lignes */
  .footer__inner { flex-direction: column; align-items: center; text-align: center; }
  .footer__links { display: grid; grid-template-columns: repeat(2, auto); gap: var(--space-sm) var(--space-lg); justify-content: center; }
}

/* Mobile (< 768px) */
@media (max-width: 768px) {
  :root { --space-lg: 2rem; --space-xl: 4rem; }
  .nav__links { display: none; }
  .nav__menu-btn { display: flex; }
  
  /* Tous les titres centrés */
  .section__header { text-align: center; }
  .section__title { text-align: center; }
  .section__subtitle { text-align: center; margin-left: auto; margin-right: auto; }
  
  /* Hero mobile */
  .hero { min-height: auto; padding: var(--space-lg) var(--space-md); }
  .hero__inner { grid-template-columns: 1fr; text-align: center; }
  .hero__content { align-items: center; }
  .hero__ctas { flex-direction: column; width: 100%; }
  .hero__ctas .btn { width: 100%; }
  
  /* Mockup mobile plus petit */
  .hero__mockup-mobile img { max-height: 350px; }
  
  /* Montres à gagner - 1 par ligne centré */
  .montres-grid { grid-template-columns: 1fr; max-width: 280px; margin: 0 auto; }
  .montres-podium { grid-template-columns: 1fr; max-width: 280px; margin: 0 auto; }
  
  /* Montres page mobile */
  .montre-detail__image img { max-height: 250px; }
  .montre-detail--grand-prix .montre-detail__place { font-size: 0.875rem; padding: var(--space-xs) var(--space-sm); }
  
  /* How it works - centré, 1 par ligne */
  .how-it-works__grid { grid-template-columns: 1fr; }
  .how-it-works__step { text-align: center; align-items: center; }
  
  /* Portes - grille 3-3-3-1 (10-9-8 / 7-6-5 / 4-3-2 / 1) */
  .portes-montres { max-width: 100%; justify-content: center; gap: var(--space-sm); }
  .porte-montre { width: calc(33.33% - 12px); min-width: 85px; max-width: 105px; min-height: 130px; }
  .porte-montre.is-new { width: calc(33.33% - 12px); min-width: 90px; max-width: 110px; min-height: 140px; }
  
  /* Engagements - centré */
  .engagement { text-align: center; }
  .engagement__content { align-items: center; }
  
  /* FAQ */
  .faq-question { text-align: left; }
  .faq-answer p { text-align: left; }
  
  /* CTA section */
  .cta-section { text-align: center; }
  
  /* Footer mobile - tout centré en colonne */
  .footer__inner { flex-direction: column; align-items: center; text-align: center; gap: var(--space-md); }
  .footer__links { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); }
  
  /* Caractéristiques */
  .caracteristiques__list { grid-template-columns: 1fr; }
  .caracteristiques__intro { text-align: center; }
  .caracteristiques__item { justify-content: center; }
  
  .versions { grid-template-columns: 1fr; }
  .version-card { text-align: center; }
  
  /* T-shirt page - mobile : mockups plus petits */
  .mockup-combo--hero { height: 300px; }
  .mockup-combo--hero img { max-height: 250px; }
  .mockup-combo--philo { height: 280px; }
  .mockup-combo--philo img { max-height: 230px; }
  
  /* Portes ancien système */
  .portes { flex-direction: column; height: auto; }
  .porte-active { min-height: 60vh; border-right: none; border-bottom: 1px solid var(--color-gray-mid); }
  .portes-bandeaux { flex-direction: row; overflow-x: auto; height: auto; -webkit-overflow-scrolling: touch; }
  .porte-bandeau { width: auto; min-width: 80px; height: 100px; flex-direction: column; border-right: 1px solid var(--color-gray-mid); border-bottom: none; writing-mode: horizontal-tb; text-orientation: initial; }
}

/* Très petit mobile (< 480px) */
@media (max-width: 480px) {
  h1 { font-size: 2.5rem; }
  .hero { padding: var(--space-md); }
  
  /* Mockup encore plus petit */
  .hero__mockup-mobile img { max-height: 350px; }
  
  /* Portes encore plus petites */
  .porte-montre { width: calc(33.33% - 8px); min-width: 75px; max-width: 95px; min-height: 115px; padding: var(--space-xs); }
  .porte-montre.is-new { width: calc(33.33% - 8px); min-width: 80px; max-width: 100px; min-height: 125px; }
  .porte-montre__brand { font-size: 0.55rem; }
  .porte-montre__model { font-size: 0.7rem; }
  .porte-montre.is-new::before { font-size: 0.5rem; padding: 2px 6px; top: -8px; }
  
  /* FAQ mobile */
  .faq-question { font-size: 1rem; padding: var(--space-sm) 0; }
}