/* ═══════════════════════════════════════════════════════════
   NERIAH — Journey Hero (canvas-based, loaded last = wins)
   Paris → Fenêtre Haussmannienne → Appartement
═══════════════════════════════════════════════════════════ */

/* ── Section : hauteur 3 écrans pour le scroll ──────────── */
#hero.hero-journey {
  height: 300vh !important;
  position: relative !important;
  background: #0a0908 !important;
  overflow: visible !important;
}

/* ── Sticky : reste en vue pendant le scroll ────────────── */
.hj-sticky {
  position: sticky !important;
  top: 0 !important;
  height: 100vh !important;
  overflow: hidden !important;
  background: #0a0908 !important;
}

/* ── Canvas : couvre tout le sticky ─────────────────────── */
#hjCanvas {
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  z-index: 1 !important;
}

/* ── NERIAH brand : opacity gérée par JS ─────────────────── */
#hjBrand {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  text-align: center !important;
  z-index: 2 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 100% !important;
  padding: 0 4vw !important;
}
#hjBrand .hj-brand-name {
  display: block !important;
  font-family: 'Cormorant', serif !important;
  font-weight: 300 !important;
  font-size: clamp(80px, 18vw, 260px) !important;
  letter-spacing: 0.18em !important;
  line-height: 0.9 !important;
  background: linear-gradient(135deg, #fff 20%, #e8d9b8 55%, #c8a96e 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: none !important;
}
#hjBrand .hj-brand-sub {
  display: block !important;
  font-family: 'Karla', sans-serif !important;
  font-weight: 200 !important;
  font-size: clamp(10px, 1.1vw, 13px) !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
  color: rgba(244,239,230,0.55) !important;
  margin-top: 20px !important;
  animation: none !important;
  -webkit-text-fill-color: rgba(244,239,230,0.55) !important;
}

/* ── Invite "Scrollez" : opacity gérée par JS ────────────── */
#hjInvite {
  position: absolute !important;
  bottom: 60px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  text-align: center !important;
  z-index: 3 !important;
  pointer-events: none !important;
  white-space: nowrap !important;
}
.hji-coords {
  display: block !important;
  font-family: 'Karla', monospace !important;
  font-size: 9px !important;
  letter-spacing: 3px !important;
  color: rgba(200,169,110,0.8) !important;
  text-transform: uppercase !important;
  margin-bottom: 12px !important;
}
.hji-city {
  display: block !important;
  font-family: 'Cormorant', serif !important;
  font-weight: 300 !important;
  font-size: clamp(52px, 9vw, 120px) !important;
  letter-spacing: 0.16em !important;
  color: #f4efe6 !important;
  line-height: 0.9 !important;
  text-shadow: 0 4px 60px rgba(0,0,0,0.8) !important;
  margin-bottom: 20px !important;
}
.hji-hint {
  display: block !important;
  font-family: 'Karla', sans-serif !important;
  font-size: 10px !important;
  letter-spacing: 4px !important;
  color: rgba(244,239,230,0.4) !important;
  text-transform: uppercase !important;
  animation: jrn-pulse 2.5s ease-in-out infinite !important;
}
@keyframes jrn-pulse {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 1;   }
}

/* ── Mobile : hero statique plein écran ──────────────────── */
@media (max-width: 768px) {
  #hero.hero-journey   { height: 100vh !important; }
  #hjCanvas            { display: none !important; }
  .hj-sticky           { background: #0a0908 url('../images/hero-main.jpg') center/cover no-repeat !important; }
  #hjBrand             { opacity: 1 !important; }
  #hjInvite            { display: none !important; }
  #hjBrand .hj-brand-name { animation: hero-brand-in 1.8s cubic-bezier(0.16,1,0.3,1) 0.5s both !important; }
}


/* ═══════════════════════════════════════════════════════════
   CRITICAL IMAGE FIX
   apple-img-reveal clip-path brise les images → désactivé
   On garde uniquement le scale/opacity sur l'inner img
═══════════════════════════════════════════════════════════ */

/* Conteneurs : visible par défaut, overflow caché pour le scale */
.apple-img-reveal {
  clip-path: none !important;
  overflow: hidden !important;
}
.apple-img-reveal.apple-img-vis {
  clip-path: none !important;
}

/* Inner image : légère animation entrée au lieu du clip */
.apple-img-inner {
  transform: scale(1.04) !important;
  opacity: 0 !important;
  transition: transform 1.3s cubic-bezier(0.16,1,0.3,1) !important,
              opacity   0.9s cubic-bezier(0.16,1,0.3,1) !important;
}
.apple-img-reveal.apple-img-vis .apple-img-inner {
  transform: scale(1) !important;
  opacity:   1 !important;
}

/* Garantie absolue : aucune image ne reste cachée */
.collab-img-wrap img,
.process-img-wrap img,
.insta-card img,
.ba-slider-container img,
.founder-img,
.projet-strip-img img,
.mat-item img,
.contact-bg {
  opacity:    1 !important;
  clip-path:  none !important;
  visibility: visible !important;
}

/* clip-reveal section founder : ne pas conflit avec apple-img-reveal */
.founder-band.clip-reveal {
  clip-path: inset(100% 0 0 0) !important;
  transition: clip-path 1.2s cubic-bezier(0.16,1,0.3,1) !important;
}
.founder-band.clip-reveal.vis {
  clip-path: inset(0% 0 0 0) !important;
}


/* ═══════════════════════════════════════════════════════════
   DESIGN — TOUTES LES SECTIONS, MÊME DIRECTION ARTISTIQUE
═══════════════════════════════════════════════════════════ */

/* ── VARIABLES GLOBALES ─────────────────────────────────── */
:root {
  --gold:    #c8a96e;
  --gold-lt: #e8d9b8;
  --cream:   #f4efe6;
  --parch:   #eee9e0;
  --dark:    #0c0b09;
  --dark2:   #100f0d;
  --text-dark: #1a1a1a;
  --font-serif: 'Cormorant', serif;
  --font-sans:  'Karla', sans-serif;
}

/* ── 4. FONDATEUR — plein écran cinématique ─────────────── */
.founder-band {
  position: relative !important;
  height: 75vh !important;
  overflow: hidden !important;
  background: var(--dark) !important;
}
.founder-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 20% !important;
  display: block !important;
  filter: brightness(0.75) saturate(0.9) !important;
}

/* ── 5. COLLABORATIONS — 4 cartes éditoriales ───────────── */
.collaborations {
  background: var(--dark) !important;
  padding: 120px 0 !important;
}
.collaborations .section-header {
  padding: 0 60px !important;
  margin-bottom: 64px !important;
}
.collaborations .section-title {
  color: var(--cream) !important;
}
.collab-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0 !important;
  height: 70vh !important;
}
.collab-card {
  position: relative !important;
  overflow: hidden !important;
  cursor: pointer !important;
}
.collab-img-wrap {
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
}
.collab-img-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transform: scale(1.04) !important;
  transition: transform 1.2s cubic-bezier(0.16,1,0.3,1) !important;
  filter: brightness(0.7) saturate(0.85) !important;
}
.collab-card:hover .collab-img-wrap img {
  transform: scale(1.1) !important;
  filter: brightness(0.55) saturate(1) !important;
}
.collab-overlay {
  position: absolute !important;
  bottom: 36px !important;
  left: 32px !important;
  z-index: 2 !important;
}
.collab-city {
  display: block !important;
  font-family: var(--font-serif) !important;
  font-size: clamp(28px, 3.5vw, 52px) !important;
  font-weight: 300 !important;
  color: var(--cream) !important;
  letter-spacing: 0.06em !important;
  line-height: 1 !important;
}
.collab-name {
  display: block !important;
  font-family: var(--font-sans) !important;
  font-size: 10px !important;
  letter-spacing: 3px !important;
  color: var(--gold) !important;
  text-transform: uppercase !important;
  margin-top: 8px !important;
}
/* Vertical dividers entre cartes */
.collab-card + .collab-card {
  border-left: 1px solid rgba(255,255,255,0.06) !important;
}

/* ── 6. MARQUEE ─────────────────────────────────────────── */
.marquee-wrap {
  background: var(--gold) !important;
  overflow: hidden !important;
  padding: 18px 0 !important;
  border-top: none !important;
  border-bottom: none !important;
}
.marquee-track span {
  color: var(--dark) !important;
  font-family: var(--font-sans) !important;
  font-size: 10px !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
}
.mq-dot { color: rgba(12,11,9,0.35) !important; }

/* ── 7. MATÉRIAUX — sticky scroll ───────────────────────── */
.mat-scroll {
  background: var(--dark) !important;
}
.mat-item {
  position: absolute !important;
  inset: 0 !important;
}
.mat-item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  filter: brightness(0.65) !important;
  transition: filter 0.6s ease !important;
}
.mat-item.active img {
  filter: brightness(0.75) !important;
}
.mat-name {
  font-family: var(--font-serif) !important;
  font-size: clamp(42px, 6vw, 88px) !important;
  font-weight: 300 !important;
  letter-spacing: 0.04em !important;
  color: var(--cream) !important;
  line-height: 1 !important;
  margin-bottom: 16px !important;
}
.mat-desc {
  font-family: var(--font-serif) !important;
  font-style: italic !important;
  font-size: clamp(16px, 1.6vw, 22px) !important;
  color: rgba(244,239,230,0.6) !important;
  line-height: 1.5 !important;
}
.mat-num {
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  letter-spacing: 3px !important;
  color: var(--gold) !important;
  text-transform: uppercase !important;
  display: block !important;
  margin-bottom: 18px !important;
}
.mat-label {
  font-family: var(--font-sans) !important;
  font-size: 9px !important;
  letter-spacing: 3px !important;
  color: rgba(200,169,110,0.5) !important;
  text-transform: uppercase !important;
  display: block !important;
  margin-bottom: 8px !important;
}
.mat-watermark {
  font-family: var(--font-serif) !important;
  font-size: clamp(80px, 16vw, 220px) !important;
  color: rgba(255,255,255,0.03) !important;
  letter-spacing: 0.3em !important;
  position: absolute !important;
  bottom: 0 !important;
  right: 5% !important;
  line-height: 0.8 !important;
  pointer-events: none !important;
  user-select: none !important;
}

/* ── 8. PROJETS — bandes éditoriales ─────────────────────── */
.projets {
  background: var(--parch) !important;
  padding: 120px 0 !important;
}
.projets .section-header { padding: 0 60px !important; margin-bottom: 80px !important; }
.projets .section-title  { color: var(--dark) !important; }

.projet-strip {
  border-top: 1px solid rgba(26,26,26,0.08) !important;
  padding: 64px 60px !important;
}
.projet-strip:last-child { border-bottom: 1px solid rgba(26,26,26,0.08) !important; }
.projet-strip-inner {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 60px !important;
  align-items: center !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}
.projet-strip-inner.reverse { direction: rtl !important; }
.projet-strip-inner.reverse > * { direction: ltr !important; }

.projet-strip-img {
  display: grid !important;
  grid-template-columns: 2fr 1fr !important;
  grid-template-rows: 1fr 1fr !important;
  gap: 8px !important;
  height: 56vh !important;
  overflow: hidden !important;
}
.projet-strip-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 1.2s cubic-bezier(0.16,1,0.3,1) !important;
}
.projet-strip-img img:first-child {
  grid-row: 1 / 3 !important;
}
.projet-strip:hover .projet-strip-img img {
  transform: scale(1.04) !important;
}
.projet-strip-meta {
  display: flex !important;
  align-items: flex-start !important;
  gap: 32px !important;
}
.ps-num {
  font-family: var(--font-serif) !important;
  font-size: clamp(64px, 8vw, 120px) !important;
  font-weight: 300 !important;
  color: rgba(26,26,26,0.08) !important;
  line-height: 0.85 !important;
  flex-shrink: 0 !important;
}
.ps-city {
  font-family: var(--font-sans) !important;
  font-size: 9px !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: var(--gold) !important;
  display: block !important;
  margin-bottom: 12px !important;
}
.ps-title {
  font-family: var(--font-serif) !important;
  font-size: clamp(28px, 3vw, 48px) !important;
  font-weight: 300 !important;
  color: var(--dark) !important;
  line-height: 1.1 !important;
  margin: 0 0 20px !important;
}
.ps-data {
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  letter-spacing: 2px !important;
  color: rgba(26,26,26,0.4) !important;
  text-transform: uppercase !important;
  display: flex !important;
  gap: 8px !important;
}

/* ── 9. AVANT / APRÈS ───────────────────────────────────── */
.ba-section {
  background: var(--dark) !important;
  padding: 120px 0 !important;
}
.ba-header { text-align: center !important; margin-bottom: 64px !important; padding: 0 60px !important; }
.ba-title {
  font-family: var(--font-serif) !important;
  font-size: clamp(44px, 6vw, 88px) !important;
  font-weight: 300 !important;
  color: var(--cream) !important;
  letter-spacing: 0.04em !important;
}
.ba-title em { color: var(--gold) !important; font-style: italic !important; }
.ba-sub {
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  letter-spacing: 3px !important;
  color: rgba(244,239,230,0.35) !important;
  text-transform: uppercase !important;
}
.ba-tag {
  font-family: var(--font-sans) !important;
  font-size: 9px !important;
  letter-spacing: 3px !important;
  color: var(--gold) !important;
  text-transform: uppercase !important;
  margin-bottom: 16px !important;
}
.ba-slider {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 60px !important;
}
.ba-img-after, .ba-img-before {
  display: block !important;
  opacity: 1 !important;
}

/* ── 10. STATEMENT / MANIFESTE ──────────────────────────── */
.statement {
  background: #0f1a14 !important;
  padding: 140px 60px !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
}
.statement::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(200,169,110,0.05), transparent);
  pointer-events: none;
}
.statement blockquote,
.statement .statement-quote {
  font-family: var(--font-serif) !important;
  font-size: clamp(28px, 4vw, 62px) !important;
  font-weight: 300 !important;
  font-style: italic !important;
  color: var(--cream) !important;
  line-height: 1.3 !important;
  max-width: 900px !important;
  margin: 0 auto !important;
  position: relative !important;
  z-index: 1 !important;
}
.statement cite,
.statement .statement-author {
  display: block !important;
  font-family: var(--font-sans) !important;
  font-size: 10px !important;
  letter-spacing: 3px !important;
  color: var(--gold) !important;
  text-transform: uppercase !important;
  margin-top: 32px !important;
  font-style: normal !important;
}

/* ── 11. PROCESSUS — 4 étapes avec grands numéros ──────── */
.process {
  background: var(--parch) !important;
  padding: 120px 0 !important;
}
.process .section-header { padding: 0 60px !important; margin-bottom: 80px !important; }
.process .section-title  { color: var(--dark) !important; }
.process-cards {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0 !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 60px !important;
}
.process-card {
  padding: 48px 40px 48px 0 !important;
  border-left: 1px solid rgba(26,26,26,0.1) !important;
  padding-left: 40px !important;
  position: relative !important;
  overflow: hidden !important;
}
.process-number {
  font-family: var(--font-serif) !important;
  font-size: clamp(72px, 8vw, 120px) !important;
  font-weight: 300 !important;
  color: rgba(26,26,26,0.06) !important;
  line-height: 0.85 !important;
  display: block !important;
  margin-bottom: -20px !important;
}
.process-step {
  font-family: var(--font-sans) !important;
  font-size: 9px !important;
  letter-spacing: 3px !important;
  color: var(--gold) !important;
  text-transform: uppercase !important;
  display: block !important;
  margin-bottom: 16px !important;
}
.process-img-wrap {
  overflow: hidden !important;
  margin-bottom: 28px !important;
  height: 260px !important;
}
.process-img-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 1.2s cubic-bezier(0.16,1,0.3,1) !important;
}
.process-card:hover .process-img-wrap img {
  transform: scale(1.06) !important;
}
.process-name {
  font-family: var(--font-serif) !important;
  font-size: clamp(22px, 2.5vw, 34px) !important;
  font-weight: 300 !important;
  color: var(--dark) !important;
  margin-bottom: 12px !important;
  line-height: 1.15 !important;
}
.process-desc {
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  line-height: 1.7 !important;
  color: rgba(26,26,26,0.55) !important;
}

/* ── 12. SERVICES — liste numérotée éditoriale ──────────── */
.services {
  background: var(--dark2) !important;
  padding: 120px 0 !important;
}
.services .section-header { padding: 0 60px !important; margin-bottom: 80px !important; }
.services .section-title  { color: var(--cream) !important; }
.services-list {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 60px !important;
}
.service-item {
  display: grid !important;
  grid-template-columns: 80px 1fr !important;
  gap: 40px !important;
  padding: 40px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  align-items: start !important;
}
.service-item:first-child { border-top: 1px solid rgba(255,255,255,0.06) !important; }
.service-num {
  font-family: var(--font-serif) !important;
  font-size: 42px !important;
  font-weight: 300 !important;
  color: rgba(244,239,230,0.12) !important;
  line-height: 1 !important;
  padding-top: 4px !important;
}
.service-name {
  font-family: var(--font-serif) !important;
  font-size: clamp(22px, 2.8vw, 36px) !important;
  font-weight: 300 !important;
  color: var(--cream) !important;
  margin-bottom: 10px !important;
  line-height: 1.15 !important;
}
.service-desc {
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  line-height: 1.75 !important;
  color: rgba(244,239,230,0.4) !important;
}

/* ── 13. INSTAGRAM — grille photo ───────────────────────── */
.insta {
  background: var(--cream) !important;
  padding: 120px 0 !important;
}
.insta .insta-head { padding: 0 60px !important; margin-bottom: 56px !important; }
.insta-tag {
  font-family: var(--font-sans) !important;
  font-size: 10px !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: rgba(26,26,26,0.5) !important;
}
.insta-follow {
  font-family: var(--font-sans) !important;
  font-size: 10px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--dark) !important;
  border: 1px solid rgba(26,26,26,0.2) !important;
  padding: 10px 24px !important;
  text-decoration: none !important;
  transition: background 0.2s, color 0.2s !important;
}
.insta-follow:hover { background: var(--dark) !important; color: var(--cream) !important; }
.insta-grid {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 6px !important;
  padding: 0 !important;
}
.insta-card {
  overflow: hidden !important;
  aspect-ratio: 1 / 1 !important;
  display: block !important;
}
.insta-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 1s cubic-bezier(0.16,1,0.3,1) !important;
  filter: brightness(0.92) !important;
}
.insta-card:hover img {
  transform: scale(1.08) !important;
  filter: brightness(1) !important;
}

/* ── 14. TÉMOIGNAGES ────────────────────────────────────── */
.temoignages {
  background: var(--parch) !important;
  padding: 120px 60px !important;
}
.temoignage {
  max-width: 860px !important;
  margin: 0 auto !important;
  text-align: center !important;
}
.temoignage-quote {
  font-family: var(--font-serif) !important;
  font-size: clamp(22px, 3vw, 40px) !important;
  font-weight: 300 !important;
  font-style: italic !important;
  color: var(--dark) !important;
  line-height: 1.45 !important;
  margin-bottom: 36px !important;
}
.temoignage-quote::before { content: '\201C'; color: var(--gold); }
.temoignage-quote::after  { content: '\201D'; color: var(--gold); }
.temoignage-author {
  font-family: var(--font-sans) !important;
  font-size: 10px !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  color: rgba(26,26,26,0.4) !important;
}
.temoignage-role {
  font-family: var(--font-sans) !important;
  font-size: 10px !important;
  color: var(--gold) !important;
  letter-spacing: 1px !important;
  display: block !important;
  margin-top: 4px !important;
}

/* ── 15. PRESSE ─────────────────────────────────────────── */
.press {
  background: var(--dark) !important;
  padding: 100px 60px !important;
}
.press .section-header { text-align: center !important; margin-bottom: 64px !important; }
.press .section-title { color: var(--cream) !important; }
.press-logos {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 60px !important;
  flex-wrap: wrap !important;
  max-width: 1000px !important;
  margin: 0 auto !important;
}
.press-logo {
  font-family: var(--font-serif) !important;
  font-size: clamp(18px, 2.5vw, 28px) !important;
  font-weight: 300 !important;
  letter-spacing: 0.2em !important;
  color: rgba(244,239,230,0.2) !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: color 0.3s ease !important;
  cursor: default !important;
}
.press-logo:hover { color: var(--gold) !important; }

/* ── 16. ZONES D'INTERVENTION ───────────────────────────── */
.zones {
  background: var(--dark2) !important;
  padding: 120px 0 !important;
}
.zones .section-header { padding: 0 60px !important; margin-bottom: 64px !important; }
.zones .section-title { color: var(--cream) !important; }
.zones-grid {
  display: grid !important;
  grid-template-columns: repeat(4,1fr) !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 60px !important;
  gap: 2px !important;
}
.zone-item {
  padding: 36px 32px !important;
  background: rgba(255,255,255,0.025) !important;
  transition: background 0.3s ease !important;
}
.zone-item:hover { background: rgba(200,169,110,0.07) !important; }
.zone-name {
  font-family: var(--font-serif) !important;
  font-size: clamp(22px, 2.5vw, 32px) !important;
  font-weight: 300 !important;
  color: var(--cream) !important;
  margin-bottom: 8px !important;
  line-height: 1.1 !important;
}
.zone-dept {
  font-family: var(--font-sans) !important;
  font-size: 10px !important;
  letter-spacing: 2px !important;
  color: var(--gold) !important;
  text-transform: uppercase !important;
}

/* ── 17. FAQ ────────────────────────────────────────────── */
.faq {
  background: var(--cream) !important;
  padding: 120px 0 !important;
}
.faq .section-header { padding: 0 60px !important; margin-bottom: 64px !important; }
.faq .section-title  { color: var(--dark) !important; }
.faq-inner {
  max-width: 860px !important;
  margin: 0 auto !important;
  padding: 0 60px !important;
}
.faq-item {
  border-bottom: 1px solid rgba(26,26,26,0.1) !important;
}
.faq-item:first-child { border-top: 1px solid rgba(26,26,26,0.1) !important; }
.faq-q {
  width: 100% !important;
  background: none !important;
  border: none !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 28px 0 !important;
  text-align: left !important;
  cursor: pointer !important;
  font-family: var(--font-serif) !important;
  font-size: clamp(18px, 2vw, 26px) !important;
  font-weight: 300 !important;
  color: var(--dark) !important;
  gap: 24px !important;
}
.faq-q::after {
  content: '+' !important;
  font-family: var(--font-sans) !important;
  font-size: 20px !important;
  font-weight: 300 !important;
  color: var(--gold) !important;
  flex-shrink: 0 !important;
  transition: transform 0.3s ease !important;
}
.faq-item.open .faq-q::after { transform: rotate(45deg) !important; }
.faq-a {
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  line-height: 1.75 !important;
  color: rgba(26,26,26,0.55) !important;
  padding-bottom: 28px !important;
  max-height: 0 !important;
  overflow: hidden !important;
  transition: max-height 0.4s cubic-bezier(0.16,1,0.3,1) !important;
}
.faq-item.open .faq-a { max-height: 300px !important; }

/* ── 18. CONTACT — Editorial cinématique ─────────────────── */
.contact {
  background: #0a0908 !important;
  padding: 0 !important;
  position: relative !important;
  overflow: hidden !important;
  min-height: 100vh !important;
}

/* Ghost photo background */
.contact-bg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: 0.05 !important;
  filter: grayscale(1) brightness(0.6) !important;
  z-index: 0 !important;
}

/* NERIAH. ghost derrière */
.contact-brand {
  position: absolute !important;
  bottom: -8% !important;
  right: -3% !important;
  font-family: var(--font-serif) !important;
  font-size: clamp(140px, 22vw, 380px) !important;
  font-weight: 300 !important;
  letter-spacing: 0.1em !important;
  color: rgba(255,255,255,0.025) !important;
  line-height: 1 !important;
  pointer-events: none !important;
  user-select: none !important;
  z-index: 0 !important;
}

/* Ligne dorée en haut */
.contact::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, var(--gold), transparent) !important;
  opacity: 0.4 !important;
  z-index: 1 !important;
}

.contact-inner {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100vh !important;
}

/* Colonne gauche — grand titre éditorial */
.contact-left {
  padding: 100px 80px 100px 10vw !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  border-right: 1px solid rgba(255,255,255,0.05) !important;
}

/* Tag */
.contact-left .tag,
.contact-left .tag-dark {
  font-family: var(--font-sans) !important;
  font-size: 9px !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
  color: var(--gold) !important;
  display: block !important;
  margin-bottom: 32px !important;
  background: none !important;
  padding: 0 !important;
  border: none !important;
}

/* Titre principal — IMMENSE */
.contact-title {
  font-family: var(--font-serif) !important;
  font-size: clamp(48px, 6.5vw, 96px) !important;
  font-weight: 300 !important;
  color: var(--cream) !important;
  line-height: 1.0 !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 28px !important;
}
.contact-title em {
  color: var(--gold) !important;
  font-style: italic !important;
  display: block !important;
}

.contact-accroche {
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  line-height: 1.8 !important;
  color: rgba(244,239,230,0.4) !important;
  margin-bottom: 48px !important;
  max-width: 340px !important;
}

/* Indicateur urgence */
.contact-urgency {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 40px !important;
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  letter-spacing: 1.5px !important;
  color: rgba(244,239,230,0.35) !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  animation: none !important;
}
.contact-urgency::before { display: none !important; }
.urgency-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #4ade80 !important;
  flex-shrink: 0 !important;
  box-shadow: 0 0 8px rgba(74,222,128,0.6) !important;
  animation: pulse-dot 2s ease-in-out infinite !important;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; box-shadow: 0 0 8px rgba(74,222,128,0.6); }
  50%       { opacity: 0.6; box-shadow: 0 0 14px rgba(74,222,128,0.4); }
}

/* Badges — 3 colonnes en data points */
.contact-badges {
  display: flex !important;
  gap: 32px !important;
  margin-bottom: 48px !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  grid-template-columns: none !important;
}
.contact-badge {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  background: none !important;
  border: none !important;
  border-left: 1px solid rgba(200,169,110,0.25) !important;
  padding: 4px 0 4px 16px !important;
  border-radius: 0 !important;
}
.contact-badge strong,
.badge-num {
  font-family: var(--font-serif) !important;
  font-size: clamp(22px, 2.5vw, 32px) !important;
  font-weight: 300 !important;
  color: var(--cream) !important;
  line-height: 1 !important;
  display: block !important;
}
.badge-label {
  font-family: var(--font-sans) !important;
  font-size: 9px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: rgba(244,239,230,0.3) !important;
}

/* Bouton WhatsApp — élégant sombre */
.wa-contact-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: var(--cream) !important;
  font-family: var(--font-sans) !important;
  font-size: 10px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  padding: 14px 28px !important;
  margin-bottom: 48px !important;
  transition: border-color 0.2s, background 0.2s !important;
  width: fit-content !important;
  max-width: none !important;
  border-radius: 0 !important;
  transform: none !important;
}
.wa-contact-btn:hover {
  border-color: var(--gold) !important;
  background: rgba(200,169,110,0.06) !important;
  transform: none !important;
  color: var(--cream) !important;
}
.wa-contact-btn svg { opacity: 0.7; }

/* Infos contact */
.contact-details {
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  padding-top: 32px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}
.contact-row {
  display: flex !important;
  align-items: baseline !important;
  gap: 20px !important;
}
.contact-label {
  font-family: var(--font-sans) !important;
  font-size: 8px !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: rgba(244,239,230,0.25) !important;
  flex-shrink: 0 !important;
  width: 60px !important;
}
.contact-val {
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  color: rgba(244,239,230,0.5) !important;
}
.contact-val a {
  color: inherit !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
}
.contact-val a:hover { color: var(--gold) !important; }

/* ── Colonne droite — formulaire minimal ─────────────────── */
.contact-right {
  padding: 100px 10vw 100px 80px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.contact-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 28px !important;
}

/* Ligne form (2 champs côte à côte) */
.form-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 24px !important;
}
.form-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

/* Label : micro typographie */
.form-label {
  font-family: var(--font-sans) !important;
  font-size: 8px !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: rgba(244,239,230,0.25) !important;
  display: block !important;
}

/* Inputs : soulignement uniquement — élégance absolue */
.form-input {
  width: 100% !important;
  box-sizing: border-box !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(244,239,230,0.12) !important;
  border-radius: 0 !important;
  color: var(--cream) !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  padding: 10px 0 !important;
  transition: border-color 0.3s ease !important;
  outline: none !important;
  -webkit-appearance: none !important;
  caret-color: var(--gold) !important;
}
.form-input::placeholder {
  color: rgba(244,239,230,0.15) !important;
}
.form-input:focus {
  border-bottom-color: var(--gold) !important;
  background: transparent !important;
}
textarea.form-input {
  resize: none !important;
  min-height: 60px !important;
}

/* Chips — sélecteurs pilules */
.chip-group {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 4px !important;
}
.chip {
  background: transparent !important;
  border: 1px solid rgba(244,239,230,0.12) !important;
  color: rgba(244,239,230,0.4) !important;
  font-family: var(--font-sans) !important;
  font-size: 9px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  padding: 7px 14px !important;
  cursor: pointer !important;
  transition: border-color 0.2s, color 0.2s, background 0.2s !important;
  border-radius: 0 !important;
}
.chip:hover {
  border-color: rgba(200,169,110,0.4) !important;
  color: var(--cream) !important;
  background: transparent !important;
}
.chip.chip-active {
  background: var(--gold) !important;
  border-color: var(--gold) !important;
  color: var(--dark) !important;
  font-weight: 700 !important;
}

/* Bouton submit */
.form-submit {
  width: 100% !important;
  background: var(--gold) !important;
  color: var(--dark) !important;
  border: none !important;
  font-family: var(--font-sans) !important;
  font-size: 10px !important;
  letter-spacing: 3.5px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  padding: 20px !important;
  cursor: pointer !important;
  margin-top: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  transition: background 0.25s ease !important;
  border-radius: 0 !important;
}
.form-submit:hover { background: #d4b87a !important; }
.form-submit:active { transform: scale(0.99) !important; }

/* Note bas de form */
.form-note {
  font-family: var(--font-sans) !important;
  font-size: 9px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: rgba(244,239,230,0.2) !important;
  text-align: center !important;
  margin-top: 8px !important;
}

/* ── 19. FOOTER ──────────────────────────────────────────── */
.footer {
  background: var(--dark) !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  padding: 60px !important;
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  gap: 40px !important;
}
.footer-brand-big {
  font-family: var(--font-serif) !important;
  font-size: 36px !important;
  font-weight: 300 !important;
  color: var(--cream) !important;
  letter-spacing: 0.15em !important;
  display: block !important;
}
.footer-brand-sub {
  font-family: var(--font-sans) !important;
  font-size: 9px !important;
  letter-spacing: 2.5px !important;
  color: rgba(244,239,230,0.3) !important;
  text-transform: uppercase !important;
  margin-top: 6px !important;
  display: block !important;
}
.footer-links {
  display: flex !important;
  gap: 32px !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
}
.footer-links a {
  font-family: var(--font-sans) !important;
  font-size: 10px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: rgba(244,239,230,0.3) !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
}
.footer-links a:hover { color: var(--gold) !important; }
.footer-copy {
  grid-column: 1 / -1 !important;
  font-family: var(--font-sans) !important;
  font-size: 9px !important;
  letter-spacing: 1.5px !important;
  color: rgba(244,239,230,0.15) !important;
  text-transform: uppercase !important;
}

/* ── NAVIGATION ─────────────────────────────────────────── */
#nav {
  font-family: var(--font-sans) !important;
}
.nav-brand {
  font-family: var(--font-serif) !important;
  font-size: 22px !important;
  letter-spacing: 0.12em !important;
  color: var(--cream) !important;
  text-decoration: none !important;
}
.nav-rdv {
  font-family: var(--font-sans) !important;
  font-size: 10px !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  color: var(--dark) !important;
  background: var(--gold) !important;
  padding: 10px 24px !important;
  text-decoration: none !important;
  transition: background 0.2s !important;
}
.nav-rdv:hover { background: var(--gold-lt) !important; }

/* ── BRAND SEPARATORS ────────────────────────────────────── */
.brand-sep {
  text-align: center !important;
  padding: 40px !important;
  font-family: var(--font-serif) !important;
  font-size: 13px !important;
  letter-spacing: 6px !important;
  color: var(--gold) !important;
  opacity: 0.5 !important;
}

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .collab-grid { grid-template-columns: repeat(2,1fr) !important; height: auto !important; }
  .collab-card { height: 45vw !important; }
  .process-cards { grid-template-columns: repeat(2,1fr) !important; }
}
@media (max-width: 768px) {
  .collab-grid { grid-template-columns: 1fr 1fr !important; height: auto !important; }
  .collab-card { height: 55vw !important; }
  .projet-strip-inner { grid-template-columns: 1fr !important; }
  .projet-strip-img { height: 55vw !important; }
  .process-cards { grid-template-columns: 1fr 1fr !important; gap: 24px !important; }
  .services-list { padding: 0 24px !important; }
  .contact-inner { grid-template-columns: 1fr !important; min-height: auto !important; }
  .contact-left { padding: 80px 24px 60px !important; border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.05) !important; }
  .contact-right { padding: 60px 24px 80px !important; }
  .contact-badges { gap: 20px !important; flex-wrap: wrap !important; }
  .form-row { grid-template-columns: 1fr !important; }
  .insta-grid { grid-template-columns: repeat(3,1fr) !important; }
  .footer { grid-template-columns: 1fr !important; padding: 40px 24px !important; }
  .footer-links { justify-content: flex-start !important; }
  .zones-grid { grid-template-columns: 1fr 1fr !important; }
}


/* ═══════════════════════════════════════════════════════════
   PREMIUM LAYER — Emotional Physics + Millimeter Precision
   Grille 8pt · Spring easing partout · Cursor spotlight
   Physique émotionnelle : masse, momentum, gravité
═══════════════════════════════════════════════════════════ */

/* ── GLOBAL ─────────────────────────────────────────────── */
::selection {
  background: rgba(200,169,110,0.22) !important;
  color: var(--cream) !important;
}
::-webkit-scrollbar { width: 2px !important; }
::-webkit-scrollbar-track { background: transparent !important; }
::-webkit-scrollbar-thumb { background: var(--gold) !important; }

/* Body bg change animée — transition physique (momentum) */
body {
  transition: background-color 0.9s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Word-reveal — spring avec masse (délai = inertie) */
.wr-w {
  overflow: hidden !important;
  display: inline-block !important;
  vertical-align: bottom !important;
}
.wr-i {
  display: inline-block !important;
  transform: translateY(115%) !important;
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: transform !important;
}
.wr-vis { transform: translateY(0) !important; }

/* Cursor spotlight — halo doré qui suit la souris */
.cursor-spot {
  position: fixed !important;
  top: 0 !important; left: 0 !important;
  width: 800px !important;
  height: 800px !important;
  margin: -400px 0 0 -400px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(200,169,110,0.035) 0%, transparent 62%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
  will-change: transform !important;
  transition: opacity 0.4s ease !important;
}

/* Compteur de section latéral */
.side-count {
  position: fixed !important;
  right: 24px !important;
  bottom: 44px !important;
  font-family: var(--font-sans) !important;
  font-size: 8px !important;
  letter-spacing: 3px !important;
  color: rgba(200,169,110,0.35) !important;
  text-transform: uppercase !important;
  writing-mode: vertical-rl !important;
  pointer-events: none !important;
  z-index: 999 !important;
  opacity: 0 !important;
  transition: opacity 0.5s ease !important;
}
.side-count.sc-vis { opacity: 1 !important; }

/* ── STATS BAR — grands nombres + espacement 8pt ─────────── */
.stats-bar {
  padding: 56px 0 !important;
  border-top: 1px solid rgba(26,26,26,0.07) !important;
  border-bottom: 1px solid rgba(26,26,26,0.07) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  max-width: 100% !important;
}
.stat-item {
  text-align: center !important;
  padding: 0 56px !important;
  position: relative !important;
}
.stat-item + .stat-item {
  border-left: 1px solid rgba(26,26,26,0.08) !important;
}
.stat-sep { display: none !important; }
.stat-num {
  font-family: var(--font-serif) !important;
  font-size: clamp(48px, 7vw, 88px) !important;
  font-weight: 300 !important;
  color: var(--dark) !important;
  line-height: 1 !important;
  display: block !important;
  letter-spacing: -0.02em !important;
}
.stat-num span { font-size: inherit !important; color: inherit !important; }
.stat-label {
  font-family: var(--font-sans) !important;
  font-size: 8px !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: rgba(26,26,26,0.35) !important;
  display: block !important;
  margin-top: 10px !important;
}

/* ── TÉMOIGNAGES — redesign éditorial ──────────────────── */
.temoignages {
  background: var(--parch) !important;
  padding: 140px 0 !important;
  overflow: hidden !important;
}
.temoignages .section-header {
  padding: 0 60px !important;
  margin-bottom: 80px !important;
  text-align: left !important;
}
.temoignages-grid {
  display: grid !important;
  grid-template-columns: repeat(3,1fr) !important;
  gap: 0 !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 60px !important;
}
.temoignage {
  padding: 48px 48px 48px 0 !important;
  border-left: none !important;
  text-align: left !important;
  max-width: 100% !important;
  margin: 0 !important;
}
.temoignage + .temoignage {
  padding-left: 48px !important;
  border-left: 1px solid rgba(26,26,26,0.07) !important;
}
.stars {
  color: var(--gold) !important;
  font-size: 12px !important;
  letter-spacing: 3px !important;
  margin-bottom: 24px !important;
  display: block !important;
}
.temoignage blockquote,
.temoignage-quote {
  font-family: var(--font-serif) !important;
  font-size: clamp(17px, 2vw, 24px) !important;
  font-weight: 300 !important;
  font-style: italic !important;
  color: var(--dark) !important;
  line-height: 1.6 !important;
  margin: 0 0 28px !important;
  quotes: none !important;
}
.temoignage blockquote::before,
.temoignage blockquote::after { content: '' !important; }
.temoignage cite,
.temoignage-author {
  font-family: var(--font-sans) !important;
  font-size: 8px !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  color: rgba(26,26,26,0.35) !important;
  font-style: normal !important;
  display: block !important;
}

/* ── PRESSE — épure total ───────────────────────────────── */
.press {
  background: var(--parch) !important;
  padding: 72px 0 80px !important;
  border-top: 1px solid rgba(26,26,26,0.07) !important;
}
.press-tag {
  font-family: var(--font-sans) !important;
  font-size: 8px !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
  color: rgba(26,26,26,0.3) !important;
  text-align: center !important;
  display: block !important;
  margin-bottom: 40px !important;
}
.press .section-header { display: none !important; }
.press-logos {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0 !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 60px !important;
  flex-wrap: wrap !important;
}
.press-logo {
  font-family: var(--font-serif) !important;
  font-size: clamp(14px, 2vw, 22px) !important;
  font-weight: 300 !important;
  letter-spacing: 0.28em !important;
  color: rgba(26,26,26,0.18) !important;
  text-transform: uppercase !important;
  cursor: default !important;
  padding: 16px 40px !important;
  transition: color 0.5s cubic-bezier(0.16,1,0.3,1) !important;
  border: none !important;
  text-decoration: none !important;
}
.press-logo:hover { color: rgba(26,26,26,0.55) !important; }

/* ── CTA MID — forêt profonde, cinématique ──────────────── */
.cta-mid {
  background: #090f0c !important;
  padding: 160px 0 !important;
  position: relative !important;
  overflow: hidden !important;
  text-align: center !important;
}
.cta-mid::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(ellipse 60% 80% at 50% 60%, rgba(200,169,110,0.04), transparent) !important;
  pointer-events: none !important;
}
/* Ligne or dessus */
.cta-mid::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, var(--gold), transparent) !important;
  opacity: 0.3 !important;
}
.cta-mid-inner {
  position: relative !important;
  z-index: 1 !important;
  max-width: 900px !important;
  margin: 0 auto !important;
  padding: 0 60px !important;
  display: block !important;
  text-align: center !important;
}
.cta-mid-eyebrow {
  font-family: var(--font-sans) !important;
  font-size: 8px !important;
  letter-spacing: 5px !important;
  text-transform: uppercase !important;
  color: var(--gold) !important;
  display: block !important;
  margin-bottom: 32px !important;
  opacity: 0.8 !important;
}
.cta-mid-title {
  font-family: var(--font-serif) !important;
  font-size: clamp(52px, 9vw, 128px) !important;
  font-weight: 300 !important;
  color: var(--cream) !important;
  line-height: 0.95 !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 40px !important;
}
.cta-mid-title em {
  color: var(--gold) !important;
  font-style: italic !important;
  display: block !important;
}
.cta-mid-sub {
  font-family: var(--font-sans) !important;
  font-size: 10px !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: rgba(244,239,230,0.25) !important;
  margin-bottom: 52px !important;
}
.cta-mid-actions {
  display: flex !important;
  gap: 16px !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  margin-bottom: 40px !important;
}
.cta-mid-btn-primary {
  font-family: var(--font-sans) !important;
  font-size: 10px !important;
  letter-spacing: 3.5px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  background: var(--gold) !important;
  color: var(--dark) !important;
  padding: 20px 48px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  transition: background 0.25s cubic-bezier(0.16,1,0.3,1), transform 0.3s cubic-bezier(0.16,1,0.3,1) !important;
  border-radius: 0 !important;
}
.cta-mid-btn-primary:hover {
  background: #d4b87a !important;
  transform: translateY(-2px) !important;
}
.cta-mid-btn-wa {
  font-family: var(--font-sans) !important;
  font-size: 10px !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  background: transparent !important;
  color: var(--cream) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  padding: 20px 48px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  transition: border-color 0.25s, background 0.25s, transform 0.3s cubic-bezier(0.16,1,0.3,1) !important;
  border-radius: 0 !important;
}
.cta-mid-btn-wa:hover {
  border-color: rgba(200,169,110,0.5) !important;
  background: rgba(200,169,110,0.05) !important;
  transform: translateY(-2px) !important;
  color: var(--cream) !important;
}
.cta-mid-proof {
  font-family: var(--font-sans) !important;
  font-size: 9px !important;
  letter-spacing: 2px !important;
  color: rgba(244,239,230,0.2) !important;
  display: flex !important;
  gap: 16px !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
}
.cta-mid-sep { opacity: 0.3 !important; }

/* ── SERVICES — micro-animation sur hover ligne ─────────── */
.service-item {
  position: relative !important;
  overflow: hidden !important;
}
.service-item::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important; left: 0 !important; right: 0 !important;
  height: 1px !important;
  background: var(--gold) !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1) !important;
}
.service-item:hover::after { transform: scaleX(1) !important; }
.service-item:hover .service-name {
  color: var(--gold-lt) !important;
  transition: color 0.4s cubic-bezier(0.16,1,0.3,1) !important;
}

/* ── ZONES — tag cloud amélioré ────────────────────────── */
.zones-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 2px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 60px !important;
}
.zone-tag {
  font-family: var(--font-sans) !important;
  font-size: 10px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: rgba(244,239,230,0.35) !important;
  padding: 12px 20px !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
  transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease !important;
  cursor: default !important;
}
.zone-tag:hover {
  color: var(--cream) !important;
  border-color: rgba(200,169,110,0.3) !important;
  background: rgba(200,169,110,0.04) !important;
}

/* ── FOOTER — brand monumentale + épure ─────────────────── */
.footer {
  background: #050403 !important;
  border-top: 1px solid rgba(255,255,255,0.04) !important;
  padding: 80px 60px 60px !important;
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: start !important;
  gap: 40px !important;
  position: relative !important;
  overflow: hidden !important;
}
.footer::before {
  content: 'N.' !important;
  position: absolute !important;
  bottom: -20% !important;
  right: -2% !important;
  font-family: var(--font-serif) !important;
  font-size: clamp(120px, 20vw, 320px) !important;
  font-weight: 300 !important;
  letter-spacing: -0.02em !important;
  color: rgba(255,255,255,0.018) !important;
  pointer-events: none !important;
  line-height: 1 !important;
}
.footer-brand-big {
  font-family: var(--font-serif) !important;
  font-size: clamp(28px, 3.5vw, 52px) !important;
  font-weight: 300 !important;
  color: var(--cream) !important;
  letter-spacing: 0.18em !important;
  display: block !important;
}
.footer-brand-sub {
  font-family: var(--font-sans) !important;
  font-size: 8px !important;
  letter-spacing: 2.5px !important;
  color: rgba(244,239,230,0.2) !important;
  text-transform: uppercase !important;
  margin-top: 8px !important;
  display: block !important;
}
.footer-links {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  align-items: flex-end !important;
}
.footer-links a {
  font-family: var(--font-sans) !important;
  font-size: 9px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: rgba(244,239,230,0.25) !important;
  text-decoration: none !important;
  transition: color 0.3s cubic-bezier(0.16,1,0.3,1) !important;
  display: inline-block !important;
  position: relative !important;
}
.footer-links a::after {
  content: '' !important;
  position: absolute !important;
  bottom: -2px !important; left: 0 !important; right: 0 !important;
  height: 1px !important;
  background: var(--gold) !important;
  transform: scaleX(0) !important;
  transform-origin: right !important;
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1) !important;
}
.footer-links a:hover {
  color: var(--gold) !important;
}
.footer-links a:hover::after {
  transform: scaleX(1) !important;
  transform-origin: left !important;
}
.footer-copy {
  grid-column: 1 / -1 !important;
  font-family: var(--font-sans) !important;
  font-size: 8px !important;
  letter-spacing: 1.5px !important;
  color: rgba(244,239,230,0.1) !important;
  text-transform: uppercase !important;
  margin-top: 48px !important;
  padding-top: 24px !important;
  border-top: 1px solid rgba(255,255,255,0.04) !important;
}

/* ── INTRO — ligne verticale basse + texte + max-width ──── */
.intro {
  overflow: hidden !important;
}
.intro-main {
  font-size: clamp(20px, 2.5vw, 30px) !important;
  line-height: 1.55 !important;
  letter-spacing: -0.005em !important;
}
.intro-body {
  font-size: clamp(13px, 1.4vw, 16px) !important;
  color: rgba(26,26,26,0.5) !important;
  line-height: 1.8 !important;
}

/* ── SECTION TITLE — scale modular + spring ─────────────── */
.section-title {
  font-size: clamp(36px, 5.5vw, 76px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.01em !important;
}

/* ── RÉVÉLATIONS .rv — spring + mass ───────────────────── */
.rv {
  opacity: 0 !important;
  transform: translateY(40px) scale(0.98) !important;
  transition:
    opacity  0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.0s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: opacity, transform !important;
}
.rv.vis {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

/* Délais physiques : chaque fils arrive avec inertie décalée */
.rv.d1 { transition-delay: 0.08s !important; }
.rv.d2 { transition-delay: 0.16s !important; }
.rv.d3 { transition-delay: 0.24s !important; }
.rv.d4 { transition-delay: 0.32s !important; }
.rv.d5 { transition-delay: 0.40s !important; }

/* ── STATEMENT / MANIFESTE ──────────────────────────────── */
.statement-sig {
  font-family: var(--font-sans) !important;
  font-size: 9px !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: rgba(200,169,110,0.5) !important;
  display: block !important;
  margin-top: 40px !important;
}

/* ── LOADER — font plus grande + spring out ─────────────── */
.loader-brand {
  font-family: var(--font-serif) !important;
  font-size: clamp(40px, 8vw, 100px) !important;
  font-weight: 300 !important;
  letter-spacing: 0.22em !important;
  color: var(--cream) !important;
}

/* ── STICKY CTA ─────────────────────────────────────────── */
.sticky-cta {
  position: fixed !important;
  bottom: 32px !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(120%) !important;
  z-index: 200 !important;
  display: flex !important;
  gap: 2px !important;
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1) !important;
}
.sticky-cta.cta-vis {
  transform: translateX(-50%) translateY(0) !important;
}
.sticky-cta-devis {
  font-family: var(--font-sans) !important;
  font-size: 9px !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  background: var(--gold) !important;
  color: var(--dark) !important;
  padding: 12px 28px !important;
  text-decoration: none !important;
  transition: background 0.2s !important;
}
.sticky-cta-devis:hover { background: #d4b87a !important; }
.sticky-cta-tel {
  font-family: var(--font-sans) !important;
  font-size: 9px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  background: rgba(244,239,230,0.06) !important;
  color: var(--cream) !important;
  padding: 12px 24px !important;
  text-decoration: none !important;
  border: 1px solid rgba(244,239,230,0.08) !important;
  transition: background 0.2s, border-color 0.2s !important;
}
.sticky-cta-tel:hover {
  background: rgba(244,239,230,0.1) !important;
  border-color: rgba(200,169,110,0.3) !important;
}

/* ── RESPONSIVE AJOUTS ──────────────────────────────────── */
@media (max-width: 768px) {
  .temoignages-grid { grid-template-columns: 1fr !important; padding: 0 24px !important; }
  .temoignage + .temoignage { border-left: none !important; padding-left: 0 !important; border-top: 1px solid rgba(26,26,26,0.07) !important; padding-top: 48px !important; }
  .press-logos { gap: 16px !important; padding: 0 24px !important; }
  .press-logo { padding: 12px 20px !important; }
  .cta-mid-inner { padding: 0 24px !important; }
  .footer { padding: 60px 24px 48px !important; grid-template-columns: 1fr !important; }
  .footer-links { flex-direction: row !important; flex-wrap: wrap !important; align-items: flex-start !important; }
  .zones-tags { padding: 0 24px !important; }
  .stats-bar { flex-wrap: wrap !important; padding: 40px 24px !important; }
  .stat-item { padding: 24px 24px !important; width: 50% !important; box-sizing: border-box !important; }
  .stat-item + .stat-item { border-left: none !important; border-top: 1px solid rgba(26,26,26,0.08) !important; }
  .side-count { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .rv, .wr-i { transition: opacity 0.3s ease !important; transform: none !important; }
  .cursor-spot { display: none !important; }
  body { transition: none !important; }
}