/* ============================================================
   0. VERROUILLAGE ANTI-COPIE & INTERACTION
   ============================================================ */
*, *::before, *::after {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}

/* Réactivation impérative pour les champs de saisie du panier */
input, textarea, select {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}

/* Interdiction de glisser les images et les vidéos */
img, video {
  -webkit-user-drag: none !important;
  user-drag: none !important;
  pointer-events: none;
}

/* Préservation des zones cliquables interactives */
.elastic-panel, .interactable, a, button {
  pointer-events: auto !important;
}

/* ============================================================
   1. VARIABLES & PALETTES DE COULEURS
   ============================================================ */
:root {
  --text-primary: #ffffff;             /* Couleur du logo et textes principaux en mode sombre */
  --text-secondary: rgba(255, 255, 255, 0.45);
  --border-color: rgba(255, 255, 255, 0.12);
  --accent: #4F46E5; 
  --bg-color: #050608;                 /* <-- METS ICI LA COULEUR DE TON FOND DARK (ex: #000000, #0a0a0c, etc.) */
  --sidebar-bg: rgba(5, 6, 8, 0.85);
  --badge-color: #EF4444;
  --card-bg: rgba(255, 255, 255, 0.02);
  --card-radius: 2px;
}

body.theme-light {
  --text-primary: #111315;             /* Couleur du logo et textes en mode clair */
  --text-secondary: rgba(17, 19, 21, 0.5);
  --border-color: rgba(0, 0, 0, 0.1);
  --accent: #4338CA;
  --bg-color: #EAE6DD;                 /* <-- METS ICI LA COULEUR DE TON FOND LIGHT (ex: #f5f5f7, #ffffff, etc.) */
  --sidebar-bg: rgba(248, 249, 250, 0.85);
  --badge-color: #DC2626;
  --card-bg: rgba(0, 0, 0, 0.02);
}

/* ============================================================
   2. RESET & STRUCTURE GLOBALE DU DOCUMENT
   ============================================================ */
* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
  cursor: none !important; 
}

html, body {
  width: 100vw;
  min-height: 100vh;
  overflow-x: hidden;
  overscroll-behavior-y: none; /* Empêche le rebond élastique d'exposer le fond blanc sous le footer */
  font-family: 'Inter', sans-serif;
  background-color: var(--bg-color);
  color: var(--text-primary);
  transition: background-color 0.8s ease, color 0.8s ease;
}

/* ============================================================
   3. CONTENEURS BARBA.JS
   ============================================================ */
[data-barba="container"] {
  width: 100vw;
  pointer-events: auto;
}

[data-barba-namespace="home"] {
  position: relative;
  width: 100vw;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: visible;
  background-color: var(--bg-color);
}

.home-hero-section {
  position: relative;
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
}

/* ============================================================
   4. CURSEUR MAGNÉTIQUE PERSISTANT
   ============================================================ */
.cursor-wrapper { 
  position: fixed; 
  top: 0; 
  left: 0; 
  pointer-events: none; 
  z-index: 999999; 
  mix-blend-mode: difference; 
}

.cursor-dot { 
  position: absolute; 
  top: -4px; 
  left: -4px; 
  width: 8px; 
  height: 8px; 
  background-color: #ffffff; 
  border-radius: 50%; 
  transition: transform 0.45s cubic-bezier(0.19, 1, 0.22, 1); 
}

.cursor-label { 
  position: absolute; 
  top: -24px; 
  left: -24px; 
  width: 48px; 
  height: 48px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  color: #000000; 
  font-size: 0.55rem; 
  font-weight: 700; 
  letter-spacing: 0.1em; 
  opacity: 0; 
  transform: scale(0); 
  transition: transform 0.45s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.4s ease; 
}

.cursor-wrapper.hover-icon .cursor-dot { 
  transform: scale(6); 
}

.cursor-wrapper.hover-text .cursor-dot { 
  transform: scale(8.5); 
}

.cursor-wrapper.hover-text .cursor-label { 
  opacity: 1; 
  transform: scale(1); 
}

/* ============================================================
   5. HEADER GLOBAL, LOGO FIXE & SWITCH JOUR/NUIT
   ============================================================ */
.global-header { 
  position: fixed; 
  top: 2.5rem; 
  left: 2.5rem; 
  right: 2.5rem; 
  display: flex; 
  justify-content: flex-end; 
  align-items: center; 
  z-index: 80; 
  pointer-events: none; 
}

.brand-logo-small {
  position: fixed;
  top: 2.5rem;
  left: 2.5rem;
  z-index: 95;
  color: #ffffff;
  mix-blend-mode: difference;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  text-decoration: none;
  opacity: 0;
  transform: translateY(-20px);
  pointer-events: none;
  transition: opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1), transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  display: inline-flex;
  align-items: baseline;
}

.brand-logo-small.visible { 
  opacity: 1; 
  transform: translateY(0);
  pointer-events: auto; 
}

.brand-logo-small .logo-bold { 
  font-weight: 700; 
  letter-spacing: -0.03em; 
}

.brand-logo-small .logo-light { 
  font-weight: 300; 
  letter-spacing: 0.01em; 
  display: inline-flex; 
  align-items: baseline; 
}

.brand-logo-small .logo-dot { 
  width: 0.15em; 
  height: 0.15em; 
  border-radius: 50%; 
  background-color: currentColor; 
  display: inline-block; 
  margin: 0 0.08em 0 0.04em; 
  position: relative; 
  bottom: 0.03em; 
}

.brand-logo-small .clock-o { 
  width: 0.58em; 
  height: 0.58em; 
  margin: 0 0.04em; 
  position: relative; 
  display: inline-block; 
  top: 0.05em; 
  transform-origin: center center; 
}

.brand-logo-small .clock-o svg { 
  width: 100%; 
  height: 100%; 
  display: block; 
  overflow: visible; 
}

.brand-logo-small .clock-ring { 
  fill: none; 
  stroke: currentColor; 
  stroke-width: 6.5; 
  stroke-dasharray: none !important;
  stroke-dashoffset: 0 !important;
}

.brand-logo-small .clock-center { 
  fill: currentColor; 
}

.brand-logo-small .clock-hands-group,
.brand-logo-small .clock-hand { 
  stroke: currentColor; 
  stroke-linecap: round; 
  transform-box: view-box;
  transform-origin: 50px 50px;
}

.brand-logo-small .minute-hand { 
  stroke-width: 4.5; 
  animation: spinHeaderClock 8s linear infinite; 
}

.brand-logo-small .hour-hand { 
  stroke-width: 4.5; 
  animation: spinHeaderClock 26s linear infinite; 
}

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

#theme-switch { 
  position: relative; 
  width: 46px; 
  height: 46px; 
  border-radius: 50%; 
  border: 1px solid var(--border-color); 
  background: var(--card-bg); 
  backdrop-filter: blur(18px); 
  -webkit-backdrop-filter: blur(18px);
  display: flex; 
  align-items: center; 
  justify-content: center; 
  color: var(--text-primary); 
  transition: all 0.4s ease; 
  pointer-events: auto; 
}

body.theme-light #theme-switch { 
  background: rgba(0, 0, 0, 0.02); 
}

#theme-switch:hover { 
  border-color: var(--text-primary); 
  transform: scale(1.06); 
}

.celestial-bezel { 
  position: absolute; 
  inset: 3px; 
  border-radius: 50%; 
  pointer-events: none; 
  transition: transform 0.8s; 
}

#theme-switch:hover .celestial-bezel { 
  transform: rotate(45deg); 
}

.bezel-mark { 
  position: absolute; 
  background-color: var(--text-secondary); 
  opacity: 0.5; 
}

.mark-n, .mark-s { 
  left: 50%; 
  width: 1px; 
  height: 3px; 
  transform: translateX(-50%); 
}

.mark-n { top: 0; } 
.mark-s { bottom: 0; }

.mark-e, .mark-w { 
  top: 50%; 
  width: 3px; 
  height: 1px; 
  transform: translateY(-50%); 
}

.mark-e { right: 0; } 
.mark-w { left: 0; }

.celestial-svg { 
  width: 24px; 
  height: 24px; 
  overflow: visible; 
  pointer-events: none; 
}

.celestial-sun, .celestial-moon { 
  transform-origin: 16px 16px; 
  transition: transform 0.65s, opacity 0.45s; 
}

body.theme-light .celestial-sun { 
  opacity: 1; 
  transform: scale(1) rotate(0deg); 
}

body.theme-light .celestial-moon { 
  opacity: 0; 
  transform: scale(0.3) rotate(-90deg); 
}

body:not(.theme-light) .celestial-sun { 
  opacity: 0; 
  transform: scale(0.3) rotate(90deg); 
}

body:not(.theme-light) .celestial-moon { 
  opacity: 1; 
  transform: scale(1) rotate(0deg); 
}

/* Disparition fluide du bouton de thème hors de la première section */
#theme-btn-area {
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

#theme-btn-area.is-hidden {
  opacity: 0;
  transform: translateY(-16px);
  pointer-events: none !important;
}

#theme-btn-area.is-hidden #theme-switch {
  pointer-events: none !important;
}

/* ============================================================
   6. DOCK DE NAVIGATION PERSISTANT
   ============================================================ */
.awwwards-dock { 
  position: fixed; 
  bottom: 2.5rem; 
  left: 50%; 
  transform: translateX(-50%); 
  display: flex; 
  gap: 0.5rem; 
  padding: 0.5rem; 
  background: rgba(255, 255, 255, 0.03); 
  backdrop-filter: blur(30px) saturate(150%); 
  -webkit-backdrop-filter: blur(30px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.08); 
  border-radius: 999px; 
  z-index: 85; 
  pointer-events: auto; 
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); 
}

body.theme-light .awwwards-dock { 
  background: rgba(255, 255, 255, 0.6); 
  border: 1px solid rgba(0, 0, 0, 0.06); 
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05); 
}

.dock-btn { 
  position: relative; 
  display: flex; 
  align-items: center; 
  height: 52px; 
  padding: 0 18px; 
  border-radius: 999px; 
  background: transparent; 
  color: var(--text-primary); 
  text-decoration: none; 
  transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1); 
  overflow: visible; 
  border: none; 
}

.dock-btn.active { 
  background: var(--text-primary); 
  color: var(--bg-color); 
}

.dock-btn svg { 
  width: 20px; 
  height: 20px; 
  fill: currentColor; 
  flex-shrink: 0; 
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); 
}

.dock-text { 
  max-width: 0; 
  opacity: 0; 
  font-size: 0.7rem; 
  font-weight: 500; 
  letter-spacing: 0.1em; 
  text-transform: uppercase; 
  white-space: nowrap; 
  margin-left: 0; 
  transform: translateX(-25px) scale(0.85); 
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1); 
}

.dock-btn:hover { 
  padding: 0 28px 0 20px; 
  transform: translateY(-8px); 
}

.dock-btn:hover .dock-text { 
  max-width: 140px; 
  opacity: 1; 
  margin-left: 14px; 
  transform: translateX(0) scale(1); 
}

.dock-btn:hover svg { 
  transform: scale(1.2) rotate(-8deg); 
}

.dock-btn * { 
  pointer-events: none; 
}

/* ============================================================
   7. STYLES DE LA PAGE D'ACCUEIL & HORLOGE PRINCIPALE
   ============================================================ */
#ui-parallax-wrapper { 
  position: absolute; 
  inset: 0; 
  width: 100vw; 
  height: 100vh; 
  pointer-events: none; 
}

.ui-frame { 
  position: absolute; 
  inset: 2.5rem; 
  display: flex; 
  flex-direction: column; 
  justify-content: space-between; 
}

.hero-center { 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
  text-align: center; 
  width: 100%; 
}

.logo-container { 
  overflow: visible; 
  display: inline-block; 
}

.rino-logo { 
  font-family: 'Montserrat', sans-serif; 
  font-size: clamp(3.2rem, 9.5vw, 9.5rem); 
  letter-spacing: -0.02em; 
  color: var(--text-primary); 
  display: inline-flex; 
  align-items: baseline; 
  justify-content: center; 
}

.logo-bold { 
  display: inline-flex; 
  align-items: baseline; 
  font-weight: 700; 
  letter-spacing: -0.03em; 
}

.logo-light { 
  display: inline-flex; 
  align-items: baseline; 
  font-weight: 300; 
  letter-spacing: 0.01em; 
}

.char { 
  display: inline-block; 
}

.logo-dot { 
  width: 0.15em; 
  height: 0.15em; 
  border-radius: 50%; 
  background-color: currentColor; 
  display: inline-block; 
  margin: 0 0.08em 0 0.04em; 
  position: relative; 
  bottom: 0.03em; 
}

.hero-center .clock-o { 
  width: 0.54em; 
  height: 0.54em; 
  margin: 0 0.04em; 
  position: relative; 
  display: inline-block; 
  top: 0.045em; 
  transform-origin: center center; 
}

.hero-center .clock-o svg { 
  width: 100%; 
  height: 100%; 
  display: block; 
  overflow: visible; 
}

.hero-center .clock-ring { 
  fill: none; 
  stroke: currentColor; 
  stroke-width: 6.5; 
  stroke-dasharray: 277; 
  stroke-dashoffset: 277; 
  transform-box: view-box;
  transform-origin: 50px 50px; 
  transform: rotate(-90deg); 
}

.hero-center .clock-center { 
  fill: currentColor; 
  transform-box: view-box;
  transform-origin: 50px 50px; 
}

.hero-center .clock-hands-group { 
  transform-box: view-box;
  transform-origin: 50px 50px; 
}

.hero-center .clock-hand { 
  stroke: currentColor; 
  stroke-linecap: round; 
  transform-box: view-box;
  transform-origin: 50px 50px; 
}

.hero-center .minute-hand { 
  stroke-width: 3.5; 
  animation: spinClock 8s linear infinite; 
}

.hero-center .hour-hand { 
  stroke-width: 3.5; 
  animation: spinClock 26s linear infinite; 
}

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

footer.home-footer { 
  position: absolute; 
  bottom: 0; 
  left: 0; 
  right: 0; 
  display: flex; 
  justify-content: space-between; 
  align-items: flex-end; 
}

.footer-col { 
  display: flex; 
  flex-direction: column; 
  gap: 0.2rem; 
  pointer-events: auto; 
}

.meta-title { 
  font-size: 0.65rem; 
  letter-spacing: 0.2em; 
  text-transform: uppercase; 
  color: var(--text-secondary); 
}

.footer-link { 
  font-size: 0.85rem; 
  font-weight: 500; 
  color: var(--text-primary); 
  text-decoration: none; 
}

/* ============================================================
   8. HERO SECTION DU PROJET
   ============================================================ */
.museum-container { 
  width: 100vw; 
  height: 100vh; 
  position: relative; 
  overflow: hidden; 
}

.hero-top-left {
  position: absolute;
  top: 15vh;
  left: 5vw;
  z-index: 10;
}

.project-meta { 
  font-size: 0.65rem; 
  text-transform: uppercase; 
  letter-spacing: 0.3em; 
  color: var(--text-secondary); 
  font-weight: 500; 
  display: flex; 
  align-items: center; 
  gap: 15px; 
  margin-bottom: 3vh; 
}

.project-meta::before { 
  content: ''; 
  width: 30px; 
  height: 1px; 
  background: var(--border-color); 
}

.project-title { 
  font-family: 'Montserrat', sans-serif; 
  font-weight: 800; 
  font-size: clamp(4.5rem, 10vw, 12rem); 
  line-height: 0.85; 
  letter-spacing: -0.04em; 
  text-transform: uppercase; 
  color: var(--text-primary); 
  margin: 0; 
}

.hero-bottom-left {
  position: absolute;
  bottom: 12vh;
  left: 5vw;
  display: flex;
  gap: 4rem;
  z-index: 10;
}

.detail-block { 
  display: flex; 
  flex-direction: column; 
  gap: 0.5rem; 
}

.detail-label { 
  font-size: 0.6rem; 
  text-transform: uppercase; 
  letter-spacing: 0.2em; 
  color: var(--text-secondary); 
  font-weight: 600; 
}

.detail-value { 
  font-family: 'Montserrat', sans-serif; 
  font-size: 1.15rem; 
  line-height: 1.4; 
  font-weight: 700; 
  color: var(--text-primary); 
  letter-spacing: -0.02em; 
}

.desc-text { 
  max-width: 250px; 
}

.desc-text .detail-value { 
  font-family: 'Inter', sans-serif; 
  font-size: 0.95rem; 
  line-height: 1.6; 
  font-weight: 400; 
  color: var(--text-secondary); 
  letter-spacing: normal; 
}

/* ============================================================
   9. BOUTONS MORPHOLOGIQUES & VISEUR 3D
   ============================================================ */
.hero-bottom-right {
  position: absolute;
  bottom: 12vh;
  right: 5vw;
  z-index: 20;
}

.btn-morph-dot {
  position: relative;
  background: transparent;
  color: var(--text-primary);
  border: none;
  padding: 1rem 1.5rem 1rem 3.5rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  z-index: 1;
  transition: color 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.btn-morph-dot::before {
  content: '';
  position: absolute;
  left: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background: var(--text-primary);
  border-radius: 50px;
  z-index: -1;
  transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1);
}

.btn-morph-dot:hover {
  color: var(--bg-color);
}

.btn-morph-dot:hover::before {
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50px;
}

.awwwards-3d-btn {
  position: absolute;
  top: 15vh;
  right: 5vw;
  display: inline-flex;
  align-items: center;
  padding: 12px 24px 12px 18px;
  border-radius: 100px;
  border: 1px solid var(--border-color);
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--text-primary);
  text-decoration: none;
  z-index: 20;
  overflow: hidden;
  will-change: transform;
}

body.theme-light .awwwards-3d-btn {
  background: rgba(0, 0, 0, 0.03);
}

.btn-3d-bg {
  position: absolute;
  bottom: 0; left: 0; 
  width: 100%; height: 100%;
  background: var(--text-primary);
  transform-origin: bottom center;
  transform: scaleY(0);
  z-index: 0;
  pointer-events: none;
}

.btn-3d-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  pointer-events: none;
}

.btn-3d-icon svg {
  width: 22px;
  height: 22px;
  display: block;
  transform-origin: center;
}

.btn-3d-text-wrap {
  position: relative;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  height: 1em;
  overflow: hidden;
  perspective: 400px;
}

.text-front { display: block; white-space: nowrap; }
.text-back { 
  position: absolute; 
  top: 0; left: 0; 
  display: block; 
  white-space: nowrap;
  opacity: 0;
}

/* ============================================================
   10. ZONE CANVAS 3D HERO
   ============================================================ */
.hero-book-canvas {
  position: absolute;
  top: 0;
  right: 0;
  width: 55vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  pointer-events: none;
}

.project-visual { 
  width: 100%; 
  height: 100%; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  perspective: 1200px; 
  pointer-events: auto; 
}

.book-wrapper { 
  position: relative; 
  width: 60%; 
  max-width: 450px; 
  aspect-ratio: 3/4; 
  transform-style: preserve-3d; 
  will-change: transform; 
}

#canvas-projet { 
  width: 100%; 
  height: 100%; 
  position: absolute; 
  top: 0; 
  left: 0; 
  z-index: 2; 
  pointer-events: none; 
}

.reveal-mask { 
  display: inline-block; 
  overflow: hidden; 
  vertical-align: top; 
}

.reveal-text { 
  display: inline-block; 
  transform: translateY(110%); 
}

/* ============================================================
   11. SECTION ÉDITORIALE UNIFIÉE & STYLES SPLITTYPE
   ============================================================ */
.editorial-section {
  width: 100vw;
  background: #EAE6DD;
  position: relative;
  z-index: 10;
  box-shadow: 0 -30px 80px rgba(0, 0, 0, 0.8);
  will-change: transform;
  padding-bottom: 15vh;
}

body.theme-light .editorial-section {
  box-shadow: 0 -30px 80px rgba(0, 0, 0, 0.08);
}

/* Structure des lignes et mots générés par SplitType */
.animate-word-by-word .line {
  overflow: hidden !important;
  display: block;
}

.animate-word-by-word .word {
  display: inline-block !important;
  will-change: transform, opacity;
}

.ed-intro {
  width: 100%;
  min-height: 80vh;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 15vh 5vw 10vh 5vw;
}

.ed-intro-left {
  flex: 0 0 65%;
}

.ed-huge-title {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(4rem, 11vw, 13rem);
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  color: var(--text-primary);
  text-align: left;
  margin: 0;
}

.ed-intro-right {
  flex: 0 0 30%;
  display: flex;
  justify-content: flex-end;
  padding-bottom: 1.5vw;
}

.ed-intro-desc {
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-align: right;
  max-width: 350px;
  line-height: 1.2;
}

.ed-full-media {
  width: 100vw;
  height: 100vh;
  position: relative;
  padding: 0 0.75vw;
  margin-bottom: 0;
}

.ed-img-wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.ed-parallax-img {
  width: 100%;
  height: 135%;
  object-fit: cover;
  position: absolute;
  top: -17%;
  left: 0;
  will-change: transform;
}

.ed-statement-wrap {
  width: 100vw;
  padding: 16vh 1.5vw;
  display: flex;
  justify-content: flex-start;
  text-align: left;
  margin-bottom: 20vh;
}

.ed-statement-text {
  font-family: 'Inter', sans-serif;
  font-size: clamp(2.5rem, 1.4vw, 1.5rem);
  font-weight: 400;
  line-height: 1.35; 
  letter-spacing: -0.06em;
  color: var(--text-secondary);
  width: 100%;
  max-width: 98vw; 
  margin: 0;
}

.split-row {
  width: 100vw;
  min-height: 85vh;
  display: flex;
  align-items: center;
  margin-bottom: 60vh;
  position: relative;
}

.split-row:last-child {
  margin-bottom: 5vh;
}

.split-row-reverse {
  flex-direction: row-reverse;
}

.split-media-wrap {
  flex: 0 0 58vw;
  height: 85vh;
  position: relative;
  padding: 0;
  margin: 0;
}

.split-img-box {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.split-parallax-img {
  width: 100%;
  height: 135%;
  object-fit: cover;
  position: absolute;
  top: -17%;
  left: 0;
  will-change: transform;
}

.split-content-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 2vw;
  padding-bottom: 8vh;
}

.split-content {
  max-width: 800px;
  width: 100%;
}

.split-row.split-row-reverse {
  align-items: flex-start;
}

.split-row.split-row-reverse .split-content-wrap {
  height: 85vh;
  align-items: flex-start;
  padding-top: 0;
  padding-bottom: 0;
}

.split-row.split-row-reverse .split-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7vw;
}

.book-specs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  margin-top: 0;
  padding-top: 2.5rem;
  border-top: 1px solid var(--border-color);
  max-width: 600px;
}

.spec-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: center;
}

.spec-label {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--text-secondary);
  font-weight: 500;
}

.spec-value {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

.spec-sub {
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-weight: 400;
}

/* ============================================================
   12. RESPONSIVE MOBILE & TABLETTE (N'IMPACTE AUCUNEMENT LE PC)
   ============================================================ */

/* A. ÉCRANS TACTILES : RÉTABLISSEMENT DU CURSEUR NATIF */
@media (pointer: coarse), (hover: none) {
  * { 
    cursor: auto !important; 
  }
  .cursor-wrapper { 
    display: none !important; 
  }
}

/* B. TABLETTES & ÉCRANS MOYENS (<= 991px) */
@media (max-width: 991px) {
  .global-header {
    top: 1.75rem;
    left: 1.75rem;
    right: 1.75rem;
  }

  .brand-logo-small {
    top: 1.75rem;
    left: 1.75rem;
  }

  .ui-frame {
    inset: 1.75rem;
  }

  .ed-intro {
    flex-direction: column;
    align-items: flex-start;
    padding: 12vh 5vw 6vh 5vw;
    gap: 2rem;
  }

  .ed-intro-left,
  .ed-intro-right {
    flex: none;
    width: 100%;
  }

  .ed-intro-desc {
    text-align: left;
    max-width: 100%;
  }

  .split-row {
    flex-direction: column !important;
    min-height: auto;
    margin-bottom: 25vh;
  }

  .split-media-wrap {
    flex: none;
    width: 100vw;
    height: 60vh;
  }

  .split-content-wrap {
    padding: 4rem 5vw;
    justify-content: flex-start;
  }

  .split-row.split-row-reverse .split-content-wrap {
    height: auto;
    padding: 4rem 5vw;
  }
}

/* C. SMARTPHONES (<= 768px) */
@media (max-width: 768px) {
  .global-header {
    top: 1.25rem;
    left: 1.25rem;
    right: 1.25rem;
  }

  .brand-logo-small {
    top: 1.25rem;
    left: 1.25rem;
    font-size: 1.1rem;
  }

  #theme-switch {
    width: 40px;
    height: 40px;
  }

  .celestial-svg {
    width: 20px;
    height: 20px;
  }

  /* Dock tactile optimisé */
  .awwwards-dock {
    bottom: 1.25rem;
    padding: 0.35rem 0.5rem;
    gap: 0.25rem;
  }

  .dock-btn {
    height: 44px;
    padding: 0 14px;
  }

  .dock-btn svg {
    width: 18px;
    height: 18px;
  }

  .dock-text {
    display: none; /* Reste compact sur smartphone pour ne pas déborder */
  }

  .dock-btn:hover {
    padding: 0 14px;
    transform: none;
  }

  /* ============================================================
     PAGE D'ACCUEIL : AJUSTEMENTS MOBILES (<= 768px)
     ============================================================ */
  /* Déverrouille la hauteur pour permettre de scroller vers la section 2 */
  [data-barba-namespace="home"] {
    position: relative;
    height: auto;
    min-height: 100svh;
    overflow-x: hidden;
    overflow-y: visible;
  }

  .footer-col .meta-title {
    display: none;
  }

  .footer-col:last-child .footer-link {
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0;
  }

  .footer-col:last-child .footer-link::after {
    content: '→';
    font-family: system-ui, sans-serif;
    opacity: 0.7;
  }

  .footer-col:first-child .footer-link {
    font-size: 0.62rem;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    pointer-events: none;
  }

  .footer-col:first-child .footer-link::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #10B981;
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
    display: inline-block;
  }

  /* ============================================================
     PAGE PROJETS : HERO RESTRUCTURÉ POUR MOBILE (<= 768px)
     ============================================================ */
  .museum-container {
    height: 100svh;
    min-height: 100svh;
    position: relative;
    overflow: hidden;
  }

  /* 1. Titre & métadonnées en haut */
  .hero-top-left {
    top: 4.2rem;
    left: 1.25rem;
    right: 1.25rem;
    pointer-events: none;
  }

  .project-meta {
    font-size: 0.58rem;
    letter-spacing: 0.25em;
    margin-bottom: 0.4rem;
  }

  .project-title {
    font-size: clamp(2.4rem, 11vw, 3.4rem);
    line-height: 0.92;
  }

  /* 2. Bouton Premium 3D optimisé Smartphone (aligné au switch jour/nuit) */
  .awwwards-3d-btn {
    top: 1.25rem;
    right: 4.25rem;
    height: 40px; /* Même hauteur exacte (40px) que le switch jour/nuit */
    padding: 0 14px 0 12px;
    gap: 8px;
    display: inline-flex;
    align-items: center;
    -webkit-tap-highlight-color: transparent;
  }

  .btn-3d-content {
    gap: 8px;
  }

  .btn-3d-icon svg {
    width: 16px;
    height: 16px;
  }

  .btn-3d-text-wrap {
    font-size: 0.65rem;
    letter-spacing: 0.05em;
    height: auto;        /* Supprime le bug de rognage des lettres/accents */
    overflow: visible;
    perspective: none;
  }

  .text-front {
    display: block;
    line-height: 1;
  }

  /* Désactive totalement le 2ème texte sur mobile (supprime la superposition) */
  .text-back {
    display: none !important;
  }

  /* Supprime le fond animé qui bloquait au toucher sur mobile */
  .btn-3d-bg {
    display: none !important;
  }

  /* Effet d'enfoncement propre et instantané au toucher (touch feedback) */
  .awwwards-3d-btn:active {
    transform: scale(0.95);
    background: rgba(255, 255, 255, 0.08);
  }

  /* 3. Livre 3D parfaitement centré dans l'espace libre */
  .hero-book-canvas {
    position: absolute;
    top: 47%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 38svh;
    max-height: 310px;
    z-index: 5;
  }

  .book-wrapper {
    width: 58%;
    max-width: 220px;
  }

  /* 4. Informations auteurs au-dessus du bouton d'achat */
  .hero-bottom-left {
    position: absolute;
    bottom: 8.6rem;
    left: 1.25rem;
    right: 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    z-index: 10;
    pointer-events: none;
  }

  .hero-bottom-left .detail-block {
    gap: 0.2rem;
  }

  .hero-bottom-left .detail-block.desc-text {
    display: none;
  }

  .detail-label {
    font-size: 0.55rem;
    letter-spacing: 0.18em;
  }

  .detail-value {
    font-size: 0.85rem;
    line-height: 1.25;
  }

  /* 5. Bouton d'ajout au panier pleine largeur ergonomique pour le pouce */
  .hero-bottom-right {
    position: absolute;
    bottom: 4.8rem;
    left: 1.25rem;
    right: 1.25rem;
    z-index: 20;
  }

  .btn-morph-dot {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 1.4rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: var(--text-primary);
    color: var(--bg-color);
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  .btn-morph-dot::before {
    display: none; /* Désactive le point morphologique prévu pour le hover PC */
  }

  .btn-morph-dot:active {
    transform: scale(0.97);
    opacity: 0.9;
  }

  /* Section éditoriale mobile */
  .editorial-section {
    position: relative;
    z-index: 30; /* Passe au-dessus du bouton et des textes du Hero (z-index 20) lors du scroll */
    box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.6); /* Délimite bien l'effet rideau sur mobile */
    padding-bottom: 8rem;
  }

  .ed-intro {
    padding: 5rem 1.25rem 2.5rem 1.25rem;
    min-height: auto;
  }

  .ed-huge-title {
    font-size: clamp(2.8rem, 13vw, 4.5rem);
    line-height: 0.9;
  }

  .ed-intro-desc {
    font-size: 1rem;
    line-height: 1.35;
  }

  .ed-full-media {
    height: 50vh;
    padding: 0;
  }

  .ed-statement-wrap {
    padding: 4rem 1.25rem;
    margin-bottom: 3rem;
  }

  .ed-statement-text {
    font-size: 1.25rem;
    line-height: 1.45;
    letter-spacing: -0.03em;
  }

  .split-row {
    margin-bottom: 4rem;
  }

  .split-media-wrap {
    height: 45vh;
  }

  .split-content-wrap {
    padding: 2.5rem 1.25rem 1rem 1.25rem;
  }

  .split-row.split-row-reverse .split-content-wrap {
    padding: 2.5rem 1.25rem 1rem 1.25rem;
  }

  .split-row.split-row-reverse .split-content {
    gap: 2.5rem;
  }

  .book-specs-grid {
    gap: 1rem;
    padding-top: 1.5rem;
  }

  .spec-label {
    font-size: 0.55rem;
  }

  .spec-value {
    font-size: 1.1rem;
  }

  .spec-sub {
    font-size: 0.65rem;
  }
}

/* ============================================================
   13. OBTURATEUR ÉDITORIAL SYMÉTRIQUE (DIAPHRAGME HORLOGER)
   ============================================================ */
.ed-img-wrap,
.split-img-box {
  position: relative !important;
  overflow: hidden !important;
}

.aperture-blade {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50.5%; /* 50.5% pour éviter tout artefact de pixel au centre */
  background-color: #EAE6DD;
  z-index: 5;
  pointer-events: none;
  will-change: transform;
}

.aperture-blade.blade-top {
  top: 0;
  transform: translateY(0%);
}

.aperture-blade.blade-bottom {
  bottom: 0;
  transform: translateY(0%);
}

.aperture-hairline {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: rgba(17, 19, 21, 0.15);
  z-index: 6;
  pointer-events: none;
  transform: translateY(-50%);
  will-change: opacity, transform;
}
/* ============================================================
   14. PORTRAIT EN MOSAÏQUE DÉCONSTRUITE (RESPONSIVE PC & MOBILE)
   ============================================================ */

/* Propriétés communes des tuiles */
.mosaic-tile {
  position: absolute;
  overflow: hidden;
  background: transparent;
  border: none;
  box-shadow: none;
  transform-style: preserve-3d;
  will-change: transform;
}

.mosaic-tile img {
  position: absolute;
  width: var(--m-w);
  height: var(--m-h);
  object-fit: cover;
  max-width: none;
  pointer-events: none;
  mix-blend-mode: multiply;
  filter: grayscale(100%) contrast(1.1);
  will-change: transform;
}

body:not(.theme-light) .mosaic-tile img {
  mix-blend-mode: screen;
  filter: grayscale(100%) invert(1) contrast(1.15);
}

/* Découpes géométriques des 8 fragments (Group 10) */
.m-tile-1 { top: 0%; left: 26%; width: 42%; height: 21%; }
.m-tile-1 img { top: 0; left: calc(var(--m-w) * -0.26); }

.m-tile-2 { top: 7%; left: 71%; width: 29%; height: 19%; }
.m-tile-2 img { top: calc(var(--m-h) * -0.07); left: calc(var(--m-w) * -0.71); }

.m-tile-3 { top: 14%; left: 8%; width: 15%; height: 21%; }
.m-tile-3 img { top: calc(var(--m-h) * -0.14); left: calc(var(--m-w) * -0.08); }

.m-tile-4 { top: 24%; left: 26%; width: 42%; height: 25%; }
.m-tile-4 img { top: calc(var(--m-h) * -0.24); left: calc(var(--m-w) * -0.26); }

.m-tile-5 { top: 29%; left: 71%; width: 29%; height: 28%; }
.m-tile-5 img { top: calc(var(--m-h) * -0.29); left: calc(var(--m-w) * -0.71); }

.m-tile-6 { top: 48%; left: 2%; width: 21%; height: 23%; }
.m-tile-6 img { top: calc(var(--m-h) * -0.48); left: calc(var(--m-w) * -0.02); }

.m-tile-7 { top: 52%; left: 26%; width: 42%; height: 24%; }
.m-tile-7 img { top: calc(var(--m-h) * -0.52); left: calc(var(--m-w) * -0.26); }

.m-tile-8 { top: 60%; left: 71%; width: 29%; height: 27%; }
.m-tile-8 img { top: calc(var(--m-h) * -0.60); left: calc(var(--m-w) * -0.71); }

/* --- VERSION MOBILE (<= 991px) : SECTION DÉDIÉE AU SCROLL --- */
@media (max-width: 991px) {
  .home-mosaic-section {
    position: relative;
    width: 100vw;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.25rem 7rem 1.25rem;
    overflow: hidden;
    z-index: 5;
  }

  .home-portrait-mosaic {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    pointer-events: auto;
  }

  .mosaic-container {
    --m-w: clamp(310px, 90vw, 440px);
    --m-h: calc(var(--m-w) * 1.34);
    position: relative;
    width: var(--m-w);
    height: var(--m-h);
    perspective: 1000px;
  }

  .home-portrait-mosaic::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 110%;
    height: 110%;
    background: radial-gradient(circle, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0) 70%);
    pointer-events: none;
    z-index: -1;
  }

  body:not(.theme-light) .home-portrait-mosaic::before {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0) 70%);
  }
}

/* ============================================================
   VERSION ORDINATEUR (>= 992px)
   ============================================================ */
@media (min-width: 992px) {
  /* Le logo reste parfaitement au centre */
  .hero-center {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    text-align: center !important;
    width: 100% !important;
  }
  
  .rino-logo {
    justify-content: center !important;
    font-size: clamp(3.2rem, 9.5vw, 9.5rem) !important;
  }

  /* Le footer à droite retrouve sa place naturelle en bas à droite */
  .home-footer .footer-col:last-child {
    margin-right: 0 !important;
    text-align: right !important;
  }

  /* 2. LA SECTION MOSAÏQUE AU SCROLL (EN-DESSOUS DU HERO) */
  .home-mosaic-section {
    position: relative;
    width: 100vw;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8vh 5vw 12vh 5vw;
    background-color: var(--bg-color);
    z-index: 5;
    pointer-events: auto;
  }

  .home-portrait-mosaic {
    display: block;
    position: relative;
    transform: none; /* Plus de décalage artificiel */
    pointer-events: auto;
  }

  .home-portrait-mosaic::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(0, 0, 0, 0.07) 0%, rgba(0, 0, 0, 0) 70%);
    pointer-events: none;
    z-index: -1;
  }

  body:not(.theme-light) .home-portrait-mosaic::before {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0) 70%);
  }

  .mosaic-container {
    --m-w: clamp(480px, 38vw, 640px);
    --m-h: calc(var(--m-w) * 1.34);
    position: relative;
    width: var(--m-w);
    height: var(--m-h);
  }
}

/* ============================================================
   TRANSITION ÉDITORIALE & CONTENU ACCUEIL
   ============================================================ */
.fluid-parallax-section {
  width: 100%;
  min-height: 100vh; 
  position: relative;
  background-color: var(--bg-color);
  z-index: auto; /* <-- Modifié (était à 10) */
  overflow: hidden;
}

.fp-inner {
  position: relative;
  width: 100%;
  min-height: 100vh;
  margin: 0 auto;
  background-color: #030405;
  overflow: hidden;
  will-change: width, border-radius, transform;
  padding-bottom: 0vh; /* Plus besoin de vide artificiel */
}

.fp-mosaic-layer {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24vh 0 16vh 0; /* Espacement aéré mais sans gouffre excessif */
}

.fp-mosaic-layer .home-portrait-mosaic {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

.fp-mosaic-layer .mosaic-tile img {
  filter: grayscale(100%) contrast(1.1) brightness(1);
  will-change: transform, filter, opacity;
}

.fp-mosaic-layer .home-portrait-mosaic:hover .mosaic-tile img {
  filter: grayscale(100%) contrast(1.1) brightness(1); 
}

/* Style et positionnement du texte éditorial sous la mosaïque */
.fp-editorial-content {
  position: relative;
  z-index: 2;
  width: 100%;
}

.fp-editorial-content .ed-intro {
  min-height: auto;
  padding: 10vh 5vw 4vh 5vw;
}

.fp-editorial-content .ed-intro-left {
  flex: 0 0 100%;
}

/* Titre réduit et plus sobre */
.fp-editorial-content .ed-huge-title {
  font-size: clamp(2.8rem, 7vw, 8rem) !important;
  line-height: 0.9;
  color: #ffffff !important;
}

.fp-editorial-content .ed-statement-wrap {
  width: 100%;
  padding: 4vh 5vw 6vh 5vw;
  margin-bottom: 0;
}

.fp-editorial-content .ed-statement-text {
  color: rgba(255, 255, 255, 0.65) !important;
  max-width: 680px; /* Transforme le texte en bloc harmonieux */
  line-height: 1.5;
}

@media (max-width: 768px) {
  .fp-editorial-content .ed-statement-wrap {
    padding: 2rem 1.25rem 5rem 1.25rem;
  }
}
/* ============================================================
   FOND ANIMÉ : COMPOSITION SCULPTURALE ASYMÉTRIQUE
   ============================================================ */
.fp-bg-pattern {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  opacity: 0; /* Animé de 0 à 1 en fondu au scroll par GSAP */
  will-change: opacity;
}

.sculptural-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  will-change: transform;
}

.sculpt-element {
  transform-origin: center center;
  will-change: transform;
}
/* ============================================================
   15. INTERACTIONS CURSEUR & 3D MOSAÏQUE (STYLE AWWWARDS)
   ============================================================ */
/* Perspective 3D sur le conteneur */
.mosaic-container {
  perspective: 1200px;
  transform-style: preserve-3d;
}

.mosaic-tile {
  transform-style: preserve-3d;
  will-change: transform;
}

.mosaic-tile img {
  will-change: transform;
}

/* Transformation du curseur en anneau-viseur technique */
.cursor-wrapper.hover-mosaic .cursor-dot {
  width: 64px;
  height: 64px;
  top: -32px;
  left: -32px;
  background: transparent;
  border: 1px solid #ffffff;
  border-radius: 50%;
  transform: scale(1) !important;
}

/* Réticule micrométrique au centre du curseur */
.cursor-wrapper.hover-mosaic .cursor-dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  background-color: #ffffff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.cursor-wrapper.hover-mosaic .cursor-label {
  top: -24px;
  left: -24px;
  opacity: 1;
  transform: scale(1);
  color: #ffffff;
  font-size: 0.5rem;
  letter-spacing: 0.15em;
}

/* Mosaïque */
.fp-mosaic-layer {
  position: relative;
  z-index: 25; /* <-- Modifié (était à 2) */
  width: 100%;
  min-height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24vh 0 16vh 0;
}
/* ============================================================
   CONTENEUR MAÎTRE & TRAIT UNIQUE (UN SEUL SVG)
   ============================================================ */
.editorial-master-wrap {
  position: relative;
  width: 100vw;
  background-color: #030405;
  overflow: hidden;
}

/* Le SVG est placé à z-index: 22 : au-dessus du fond, mais EN-DESSOUS de la transition */
.master-thread-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 22;
  pointer-events: none;
  overflow: visible;
  will-change: transform, opacity;
}

.thread-path {
  fill: none;
  stroke: #EAE6DD;
  stroke-width: 1.8px;
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-miterlimit: 4;
  opacity: 0.95;
}

/* Section éditoriale : fond transparent pour laisser voir le SVG derrière, z-index: 30 pour que ses lames le recouvrent */
.editorial-transition-section {
  position: relative;
  width: 100vw;
  min-height: 150vh;
  background-color: transparent;
  z-index: 30;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (max-width: 768px) {

  /* ------------------------------------------------------------
     1. TRAIT SVG : RÉACTIVÉ ET FLUIDE SUR MOBILE
     ------------------------------------------------------------ */
  .master-thread-svg {
    display: block !important;
    opacity: 0.95;
    pointer-events: none;
  }

  /* ------------------------------------------------------------
     2. TEXTE ET CONTENEUR : PARFAITEMENT INTÉGRÉS DANS LE CADRE SVG
     ------------------------------------------------------------ */
  .fp-statement-middle {
    margin-top: 4vh !important;
    margin-bottom: 6vh !important;
    padding: 0 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .statement-card-anim-wrap {
    margin-top: 0 !important;
    width: 86vw !important;
    max-width: 86vw !important;
    min-height: auto !important;
    padding: 2.2rem 1.4rem !important;
    box-sizing: border-box !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  .statement-card-anim-wrap .ed-statement-text {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 1.05rem !important;
    line-height: 1.6 !important;
    letter-spacing: -0.015em !important;
    text-align: center !important;
    margin: 0 !important;
    color: #EAE6DD !important;
  }

  /* Réticules alignés à l'intérieur des coins du cadre SVG */
  .crosshair.top-left {
    top: 0.6rem !important;
    left: 0.6rem !important;
  }
  .crosshair.bottom-right {
    bottom: 0.6rem !important;
    right: 0.6rem !important;
  }

  /* ------------------------------------------------------------
     3. GROS TITRE RINO.CLOCK : DÉMARRE AVEC "RINO." CALÉ À GAUCHE
     ------------------------------------------------------------ */
  .editorial-grid {
    padding: 0 5vw !important;
    justify-content: flex-start !important;
    align-items: center !important;
    width: 100vw !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .editorial-col-title {
    width: 100% !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
  }

  .editorial-col-title .ed-huge-title {
    font-size: clamp(4.5rem, 20vw, 7.5rem) !important;
    line-height: 0.85 !important;
    top: 0 !important;
    letter-spacing: -0.04em !important;
    text-align: left !important;
    white-space: nowrap !important;
    display: block !important;
    width: auto !important;
    left: 0 !important;
    margin: 0 !important;
    mix-blend-mode: difference !important;
    color: #ffffff !important;
    transform-origin: left center !important;
  }
}

/* ============================================================
   TRANSITION HORLOGÈRE AWWWARDS : IRIS FOCAL & BARILLET COSMIQUE
   ============================================================ */
.horology-iris-transition {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100%;
  min-height: 100vh;
  z-index: 35;
  pointer-events: none;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 1. Voile d'oculaire crème déployé concentriquement */
.iris-curtain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: #EAE6DD;
  clip-path: circle(0% at 50% 50%);
  will-change: clip-path;
  z-index: 1;
}

/* 2. Ensemble mécanique centré sur l'axe du balancier */
.iris-gear-assembly {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.35);
  width: min(85vw, 860px);
  height: min(85vw, 860px);
  pointer-events: none;
  opacity: 0;
  z-index: 2;
  will-change: transform, opacity;
}

.iris-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Tracés vectoriels micrométriques */
.ring-line-soft {
  stroke: rgba(17, 19, 21, 0.25);
  stroke-width: 1px;
}

.ring-ticks-outer {
  stroke: rgba(17, 19, 21, 0.45);
  stroke-width: 7px;
  stroke-dasharray: 1.5 14.8;
}

.ring-dash-fine {
  stroke: rgba(17, 19, 21, 0.2);
  stroke-width: 0.8px;
  stroke-dasharray: 8 8;
}

.cardinal-marker {
  fill: rgba(17, 19, 21, 0.65);
}

.ring-ticks-inner {
  stroke: rgba(17, 19, 21, 0.4);
  stroke-width: 5px;
  stroke-dasharray: 2 34;
}

.ring-axis-dash {
  stroke: rgba(17, 19, 21, 0.16);
  stroke-width: 1px;
  stroke-dasharray: 20 40;
}

.cross-axis {
  stroke: rgba(17, 19, 21, 0.15);
  stroke-width: 0.8px;
  stroke-dasharray: 4 8;
}

.jewel-bearing {
  stroke: rgba(17, 19, 21, 0.6);
  stroke-width: 1.5px;
}

.jewel-core {
  fill: rgba(17, 19, 21, 0.8);
}

.reticle-line {
  stroke: rgba(17, 19, 21, 0.5);
  stroke-width: 1px;
}

/* Micro-typographie horlogère HUD */
.iris-hud {
  position: absolute;
  inset: 12%;
  pointer-events: none;
}

.hud-item {
  position: absolute;
  font-family: 'Montserrat', monospace, sans-serif;
  font-size: clamp(0.5rem, 0.65vw, 0.65rem);
  font-weight: 700;
  letter-spacing: 0.2em;
  color: rgba(17, 19, 21, 0.45);
  text-transform: uppercase;
  white-space: nowrap;
}

.hud-tl { top: 0; left: 0; }
.hud-tr { top: 0; right: 0; text-align: right; }
.hud-bl { bottom: 0; left: 0; }
.hud-br { bottom: 0; right: 0; text-align: right; }

/* Adaptation mobile / tactile */
@media (max-width: 768px) {
  .iris-gear-assembly {
    width: 90vw;
    height: 90vw;
  }
  .hud-item {
    font-size: 0.48rem;
    letter-spacing: 0.12em;
  }
}

/* ============================================================
   GRILLE ÉDITORIALE : LE TITRE RESTE DERRIÈRE LA CARTE
   ============================================================ */
.next-bg-pattern {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  pointer-events: none;
  overflow: hidden;
  will-change: transform;
}

.editorial-grid {
  position: relative;
  width: 100%;
  padding: 0 4vw 0 7vw;
  display: flex;
  flex-direction: row; 
  align-items: center;
  gap: 4vw;
  pointer-events: none;
  box-sizing: border-box;
  z-index: 40; /* <-- Passe à 40 pour rester au-dessus des lames (35) */
}

.editorial-col-title {
  position: relative;
  z-index: 40;
}

.editorial-col-title .ed-huge-title {
  font-size: clamp(8rem, 28vw, 36rem) !important;
  white-space: nowrap;
  line-height: 0.8;
  position: relative;
  top: 6vh; /* Ajuste ici pour descendre ou monter */
  mix-blend-mode: difference; /* S'adapte instantanément au fond clair ou sombre */
  color: #ffffff;
  pointer-events: none;
  user-select: none;
}

.fp-statement-middle {
  margin-top: 10vh;
  margin-bottom: 6vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.statement-card-anim-wrap {
  position: relative;
  margin-top: 15rem; /* <-- Déplace tout le bloc (texte + réticules) vers le bas sans padding */
  width: 100%;
  max-width: 42vw;
  min-height: 200px;
  padding: 1.8rem 2.2rem;
  background: transparent;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.statement-card-anim-wrap .ed-statement-text {
  width: 100%;
  max-width: 42vw;
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.15rem, 1.35vw, 1.45rem) !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  letter-spacing: -0.015em !important;
  color: #EAE6DD !important;
  margin: 0;
  text-align: center !important;
  text-wrap: balance;
  -webkit-font-smoothing: antialiased;
}

.statement-card-anim-wrap .ed-statement-text .word {
  display: inline-block !important;
  color: #EAE6DD !important;
}

/* 5. Réticules aux coins */
.crosshair {
  position: absolute;
  width: 12px;
  height: 12px;
  pointer-events: none;
}
.crosshair::before, .crosshair::after {
  content: '';
  position: absolute;
  background: #EAE6DD;
  opacity: 0.35;
}
.crosshair::before { 
  top: 50%; left: 0; width: 100%; height: 1px; transform: translateY(-50%); 
}
.crosshair::after { 
  top: 0; left: 50%; width: 1px; height: 100%; transform: translateX(-50%); 
}

.crosshair.top-left { top: 0.8rem; left: 1rem; }
.crosshair.bottom-right { bottom: 0.8rem; right: 1rem; }

/* 6. Adaptation Mobile & Tablette */
@media (max-width: 991px) {
  .editorial-grid {
    flex-direction: column;
    padding: 10vh 1.5rem;
    gap: 3rem;
  }
  .statement-card-anim-wrap {
    padding: 1.5rem 1rem;
  }
}
/* ============================================================
   16. SECTION : ACCORDÉON CINÉMATIQUE FLUIDE (AWWWARDS SOTD)
   ============================================================ */
.ig-showcase-section {
  position: relative;
  width: 100vw;
  background-color: #EAE6DD;
  /* MODIFICATION : On passe le padding du bas à 30vh (ou plus selon ton goût) */
  padding-bottom: 50vh;
  z-index: 20;
  color: #111315;
  overflow: hidden;
}

/* En-tête décalé et poétique */
.ig-fluid-header {
  padding: 0 5vw;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 8vh;
}

.ig-title {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(3.5rem, 7vw, 7.5rem);
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  margin: 0;
  color: #111315;
}

.ig-poetic-sub {
  font-family: 'Inter', Georgia, serif;
  font-style: italic;
  font-size: clamp(0.9rem, 1.2vw, 1.1rem);
  color: rgba(17, 19, 21, 0.5);
  max-width: 300px;
  text-align: right;
  line-height: 1.5;
  padding-bottom: 0.5rem;
}

/* L'Accordéon Élastique */
.ig-elastic-gallery {
  display: flex;
  width: 100vw;
  height: 75vh;
  gap: 2px; /* Ligne de fracture ultra-fine entre les vidéos */
  background: #111315; /* Fond noir visible dans l'interstice */
}

/* Panneau individuel */
.elastic-panel {
  flex: 1; /* État de repos : tous égaux */
  position: relative;
  overflow: hidden;
  text-decoration: none;
  cursor: none;
  transition: flex 1.2s cubic-bezier(0.19, 1, 0.22, 1);
  will-change: flex;
}

/* État actif (Survol) : Prend 3 fois plus de place que les autres */
.elastic-panel:hover {
  flex: 3;
}

/* Vidéo en fond absolu */
.elastic-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(80%) contrast(1.1) brightness(0.4);
  transition: filter 1.2s cubic-bezier(0.19, 1, 0.22, 1), transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);
  will-change: transform, filter;
  pointer-events: none;
}

.elastic-panel:hover .elastic-video {
  filter: grayscale(0%) contrast(1.05) brightness(0.9);
  transform: scale(1.03); /* Léger zoom organique au déploiement */
}

/* Voile d'assombrissement dynamique */
.elastic-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 50%);
  opacity: 0.5;
  transition: opacity 1.2s ease;
  pointer-events: none;
}

.elastic-panel:hover .elastic-overlay {
  opacity: 0.8;
}

/* Responsive Tablette & Mobile */
@media (max-width: 991px) {
  .ig-showcase-section {
    padding: 12vh 0 16vh 0;
  }
  .ig-fluid-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }
  .ig-poetic-sub {
    text-align: left;
  }
  
  .ig-elastic-gallery {
    flex-direction: column !important;
    height: auto !important;
  }
  
  .elastic-panel {
    width: 100vw !important;
    height: 50vh !important; /* Donne une vraie hauteur pour voir la vidéo */
    flex: none !important;
  }

  .elastic-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: auto; /* Laisse le tactile interagir sans bloquer */
  }
}

/* ============================================================
   16.5 SECTION : ACCORDÉON PHOTOGRAPHIQUE
   ============================================================ */
.photo-showcase-section {
  position: relative;
  width: 100vw;
  background-color: #EAE6DD;
  padding-bottom: 50vh;
  z-index: 20;
  color: #111315;
  overflow: hidden;
}

/* On applique exactement la même physique que pour la vidéo, mais sur la balise <img> */
.elastic-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(80%) contrast(1.1) brightness(0.4);
  transition: filter 1.2s cubic-bezier(0.19, 1, 0.22, 1), transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);
  will-change: transform, filter;
  pointer-events: none;
}

.elastic-panel:hover .elastic-img {
  filter: grayscale(0%) contrast(1.05) brightness(0.9);
  transform: scale(1.03); /* Le même zoom organique au déploiement */
}

/* Ajustement Mobile pour la photo */
@media (max-width: 991px) {
  .photo-showcase-section {
    padding: 0vh 0 20vh 0;
  }
  .elastic-img {
    filter: grayscale(0%) contrast(1.05) brightness(0.7);
  }
}

/* ============================================================
   17. FOOTER CURTAIN REVEAL : MONOLITHE CONTEMPORAIN
   ============================================================ */
.ig-showcase-section,
.editorial-section {
  position: relative !important;
  z-index: 10 !important;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.7);
}

.curtain-footer {
  position: relative;
  width: 100vw;
  min-height: 80vh;
  background-color: #040507;
  color: #EDE8DF;
  overflow: hidden;
  z-index: 1;
  box-sizing: border-box;
}

body.theme-light .curtain-footer {
  background-color: #080a0e;
  color: #EDE8DF;
}

.curtain-footer-inner {
  position: relative;
  width: 100%;
  min-height: 80vh;
  padding: 8vh 4vw 3vh 4vw;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  will-change: transform, opacity;
}

/* 1. Corps : Mail & Onglets */
.cf-body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4vw;
  padding-bottom: 6vh;
  flex-wrap: wrap;
}

.cf-block {
  display: flex;
  align-items: center;
}

.cf-mail-link {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  color: #EDE8DF;
  text-decoration: none;
  border-bottom: 1px solid rgba(237, 232, 223, 0.2);
  padding-bottom: 0.8rem;
  transition: border-color 0.4s ease, color 0.4s ease;
}

.cf-mail-label {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(1.4rem, 2.5vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.03em;
}

.cf-mail-arr {
  font-size: 1.2rem;
  opacity: 0.4;
  transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.3s ease;
}

.cf-mail-link:hover {
  color: #ffffff;
  border-color: #ffffff;
}

.cf-mail-link:hover .cf-mail-arr {
  opacity: 1;
  transform: translate(4px, -4px);
}

.cf-pills-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.cf-pill {
  padding: 0.65rem 1.4rem;
  border-radius: 999px;
  border: 1px solid rgba(237, 232, 223, 0.12);
  color: rgba(237, 232, 223, 0.7);
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: all 0.3s ease;
}

.cf-pill:hover {
  background: #EDE8DF;
  color: #040507;
  border-color: #EDE8DF;
  transform: translateY(-2px);
}

/* 2. Signature monumentale & Bouton Awwwards à droite */
.cf-monument-wrap {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 3vw;
  padding: 2vh 0 4vh 0;
}

.cf-monument-title {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(3.2rem, 11vw, 13.5rem);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: rgba(237, 232, 223, 0.95);
  margin: 0;
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
  user-select: none;
  will-change: letter-spacing;
}

.cf-logo-bold {
  font-weight: 800;
  letter-spacing: -0.03em;
  display: inline-flex;
  align-items: baseline;
}

.cf-logo-light {
  font-weight: 300;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: baseline;
}

.cf-logo-dot {
  width: 0.14em;
  height: 0.14em;
  border-radius: 50%;
  background-color: currentColor;
  display: inline-block;
  margin: 0 0.08em 0 0.04em;
  position: relative;
  bottom: 0.03em;
}

.cf-clock-o {
  width: 0.54em;
  height: 0.54em;
  margin: 0 0.04em;
  position: relative;
  display: inline-block;
  top: 0.045em;
  transform-origin: center center;
}

.cf-clock-o svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.cf-clock-ring {
  fill: none;
  stroke: currentColor;
  stroke-width: 6.5;
}

.cf-clock-center {
  fill: currentColor;
}

.cf-clock-hand {
  stroke: currentColor;
  stroke-linecap: round;
  transform-box: view-box;
  transform-origin: 50px 50px;
}

.cf-minute-hand {
  stroke-width: 3.5;
  animation: spinClock 8s linear infinite;
}

.cf-hour-hand {
  stroke-width: 3.5;
  animation: spinClock 26s linear infinite;
}

/* Bouton Awwwards (disque pur, sans capsule) */
.cf-awwwards-top-btn {
  position: relative;
  width: clamp(64px, 6.5vw, 88px);
  height: clamp(64px, 6.5vw, 88px);
  border-radius: 50%;
  border: 1px solid rgba(237, 232, 223, 0.2);
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #EDE8DF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  margin-bottom: clamp(0.5rem, 1.5vw, 2rem);
  transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1), background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}

.btn-top-arrow-track {
  position: relative;
  width: 22px;
  height: 22px;
  overflow: hidden;
  display: block;
}

.btn-top-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.45s cubic-bezier(0.19, 1, 0.22, 1);
}

.btn-top-svg.svg-clone {
  transform: translateY(120%);
}

.cf-awwwards-top-btn:hover {
  background: #EDE8DF;
  color: #040507;
  border-color: #EDE8DF;
  transform: scale(1.08);
}

.cf-awwwards-top-btn:hover .btn-top-svg.svg-main {
  transform: translateY(-120%);
}

.cf-awwwards-top-btn:hover .btn-top-svg.svg-clone {
  transform: translateY(0%);
}

/* 3. Ligne légale */
.cf-legal {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(237, 232, 223, 0.08);
  font-family: 'Montserrat', monospace, sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  color: rgba(237, 232, 223, 0.3);
}

/* Responsive */
@media (max-width: 991px) {
  .cf-body {
    flex-direction: column;
    align-items: flex-start;
    gap: 2.5rem;
  }
}

@media (max-width: 768px) {
  .curtain-footer-inner {
    padding: 6vh 1.5rem 8rem 1.5rem;
    min-height: auto;
  }
  .cf-monument-wrap {
    align-items: center;
    gap: 1.5rem;
  }
  .cf-monument-title {
    font-size: clamp(2.4rem, 11vw, 4.5rem);
  }
}