/* =========================================================
 * Soléa — Cinematic Layer (le luxe réinventé)
 *
 * 17 prouesses signature, toutes différentes, toutes orchestrées.
 * Le tempo : entre lent, attaque, suspendu, hypnotique.
 *
 *   1. FRISE 3D architecturale rotative au scroll
 *   2. SPOTLIGHT follow mouse
 *   3. CURTAIN reveal or
 *   4. MAGNETIC DEPTH images (perspective)
 *   5. CONSTELLATION map (page zones)
 *   6. LIQUID borders (feTurbulence)
 *   7. EDITORIAL reveals — 7 patterns
 *   8. GENERATIVE grid pulse
 *   9. CINEMA bars top/bottom
 *  10. GRAIN texture overlay
 *  11. IMAGE color shift scroll
 *  12. HOVER image zoom + tilt
 *  13. ARCHITECTURAL drift
 *  14. SLOT-machine reveal chiffres
 *  15. PULL-quote letter highlight
 *  16. PAGE-specific arrivals (entrée unique par page)
 *  17. CURSOR light field
 * ========================================================= */

/* =========================================================
 *  [HOME] LE DÉFILÉ DES ÉPOQUES — Fashion runway architectural
 *
 *  11 silhouettes défilent en cadence (Babylone → Spatial).
 *  Tempo 80s/boucle (très lent, vibe haute couture).
 *  Spotlight or qui balaye chaque silhouette en 4s.
 *  Palette modulée : sépia ancien → cream → blanc futur (gradient sol).
 * ========================================================= */
.solea-defile {
  position: relative;
  padding: clamp(72px, 9vh, 120px) 0 clamp(80px, 10vh, 140px);
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(246, 183, 44, 0.06) 0%, transparent 70%),
    linear-gradient(90deg, rgba(180, 140, 80, 0.07) 0%, var(--fx-cream, #fbf8f2) 50%, rgba(255, 255, 255, 0.6) 100%);
  isolation: isolate;
}
.defile-header {
  text-align: center;
  margin-bottom: clamp(40px, 6vh, 72px);
}
.defile-header h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 14px 0 16px;
  color: var(--fx-ink, #0d0d10);
}
.defile-header h2 em {
  font-style: italic;
  color: var(--fx-gold, #f6b72c);
}

.defile-runway {
  position: relative;
  width: 100%;
  height: clamp(320px, 36vh, 420px);
  overflow: hidden;
  /* Masque pour fade aux extrémités */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%);
}

/* Ligne de sol — la « passerelle » du défilé */
.defile-runway::before {
  content: "";
  position: absolute;
  bottom: 56px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(13, 13, 16, 0.2) 50%, transparent 100%);
  z-index: 1;
}

.defile-track {
  display: flex;
  align-items: flex-end;
  gap: clamp(64px, 7vw, 120px);
  padding: 24px 64px 0;
  white-space: nowrap;
  animation: defileMarch 80s linear infinite;
  will-change: transform;
}
@keyframes defileMarch {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* boucle infinie sans saut (liste dédoublée) */
}
.defile-runway:hover .defile-track { animation-play-state: paused; }
/* Audit Awwwards perf : pause hors viewport (économise ~8% CPU sur mobile) */
.defile-runway:not(.is-in-view) .defile-track { animation-play-state: paused; }

.defile-silhouette {
  position: relative;
  flex-shrink: 0;
  width: clamp(160px, 16vw, 220px);
  height: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.5s var(--ease-glide, cubic-bezier(0.65, 0, 0.35, 1));
}
.defile-silhouette:hover {
  transform: translateY(-8px) scale(1.04);
}
.defile-silhouette svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 8px 16px rgba(13, 13, 16, 0.12));
}
.defile-silhouette .defile-stroke {
  fill: none;
  stroke: var(--fx-ink, #0d0d10);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.82;
}

/* Palette évolutive : silhouettes anciennes plus sépia, modernes plus or, futur plus claires */
.defile-silhouette[data-i="0"] .defile-stroke,
.defile-silhouette[data-i="1"] .defile-stroke,
.defile-silhouette[data-i="11"] .defile-stroke,
.defile-silhouette[data-i="12"] .defile-stroke {
  stroke: #6b4f2a; /* sépia ancien — Babylone, Gizeh */
}
.defile-silhouette[data-i="2"] .defile-stroke,
.defile-silhouette[data-i="3"] .defile-stroke,
.defile-silhouette[data-i="13"] .defile-stroke,
.defile-silhouette[data-i="14"] .defile-stroke {
  stroke: #4a3a22; /* sépia chaud — Parthénon, Panthéon */
}
.defile-silhouette[data-i="4"] .defile-stroke,
.defile-silhouette[data-i="5"] .defile-stroke,
.defile-silhouette[data-i="15"] .defile-stroke,
.defile-silhouette[data-i="16"] .defile-stroke {
  stroke: #2d2418; /* ink chaud — Gothique, Renaissance */
}
.defile-silhouette[data-i="6"] .defile-stroke,
.defile-silhouette[data-i="17"] .defile-stroke {
  stroke: var(--fx-ink, #0d0d10); /* ink pur — Bordeaux XVIII */
}
.defile-silhouette[data-i="7"] .defile-stroke,
.defile-silhouette[data-i="8"] .defile-stroke,
.defile-silhouette[data-i="18"] .defile-stroke,
.defile-silhouette[data-i="19"] .defile-stroke {
  stroke: #1a1a1a; /* presque noir — Eiffel, Le Corbusier */
}
.defile-silhouette[data-i="9"] .defile-stroke,
.defile-silhouette[data-i="20"] .defile-stroke {
  stroke: var(--fx-gold, #f6b72c); /* or — RE2020 contemporain Soléa */
  opacity: 0.95;
}
.defile-silhouette[data-i="10"] .defile-stroke,
.defile-silhouette[data-i="21"] .defile-stroke {
  stroke: var(--fx-gold, #f6b72c);
  opacity: 1;
  filter: drop-shadow(0 0 8px rgba(246, 183, 44, 0.55));
}

/* Meta info sous chaque silhouette */
.defile-meta {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: 'Cormorant Garamond', serif;
  pointer-events: none;
}
.defile-meta .defile-date {
  display: block;
  font-style: italic;
  font-weight: 500;
  font-size: 16px;
  color: var(--fx-gold, #f6b72c);
  letter-spacing: 0.02em;
}
.defile-meta .defile-name {
  display: block;
  font-style: italic;
  font-weight: 500;
  font-size: 14px;
  color: var(--fx-ink, #0d0d10);
  margin-top: 2px;
}
.defile-meta .defile-place {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(13, 13, 16, 0.55);
  margin-top: 4px;
}

/* Spotlight or qui balaye comme la lumière de scène d'un défilé */
.defile-spotlight {
  position: absolute;
  top: 0;
  bottom: 56px;
  left: 0;
  width: 280px;
  background: radial-gradient(ellipse 60% 90% at 50% 60%, rgba(255, 222, 160, 0.32) 0%, transparent 70%);
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: screen;
  filter: blur(8px);
  animation: defileSpotlight 14s ease-in-out infinite;
}
@keyframes defileSpotlight {
  0%   { transform: translateX(-100%); opacity: 0; }
  20%  { opacity: 0.9; }
  80%  { opacity: 0.9; }
  100% { transform: translateX(110vw); opacity: 0; }
}

@media (max-width: 720px) {
  .defile-runway { height: clamp(260px, 32vh, 320px); }
  .defile-silhouette { width: 140px; height: 200px; }
  .defile-track { gap: 48px; padding: 16px 32px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .defile-track { animation: none !important; }
  .defile-spotlight { display: none !important; }
}

/* =========================================================
 *  [HOME] SCÈNE HABITÉE — La chaleur du foyer
 *  SVG fin trait or : fenêtre + rai de lumière + tasse + livre + plante.
 *  Le rai de lumière est animé : il pulse doucement comme un soleil oblique.
 * ========================================================= */
.solea-hearth {
  background:
    radial-gradient(ellipse 60% 80% at 40% 35%, rgba(255, 222, 160, 0.18) 0%, transparent 70%),
    linear-gradient(180deg, var(--fx-cream, #fbf8f2) 0%, var(--calcaire, #e9dfc8) 100%);
  position: relative;
  overflow: hidden;
}
.hearth-shell {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  position: relative;
  z-index: 1;
}
.hearth-stage {
  position: relative;
}
.hearth-svg {
  width: 100%;
  height: auto;
  display: block;
}
.hearth-svg .hearth-line {
  fill: none;
  stroke: var(--fx-ink, #0d0d10);
  stroke-width: 0.6;
  stroke-linecap: round;
  opacity: 0.7;
}
.hearth-svg .hearth-beam {
  animation: hearthBeam 8s ease-in-out infinite;
  transform-origin: 280px 40px;
}
@keyframes hearthBeam {
  0%, 100% { opacity: 0.92; }
  50%      { opacity: 1; }
}
.hearth-svg .hearth-cup {
  stroke: var(--fx-gold, #f6b72c);
  stroke-width: 0.8;
  fill: none;
}
.hearth-svg .hearth-steam {
  stroke: rgba(13, 13, 16, 0.35);
  stroke-width: 0.5;
  fill: none;
  animation: hearthSteam 4s ease-in-out infinite;
}
.hearth-svg .hearth-steam:nth-child(odd) { animation-delay: -1s; }
@keyframes hearthSteam {
  0%, 100% { opacity: 0.6; transform: translateY(0); }
  50%      { opacity: 0.3; transform: translateY(-4px); }
}
.hearth-svg .hearth-leaf {
  stroke: rgba(45, 62, 42, 0.55);
  stroke-width: 0.6;
}
.hearth-svg .hearth-book {
  stroke: var(--fx-ink, #0d0d10);
}

.hearth-copy {
  position: relative;
}
.hearth-h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--fx-ink, #0d0d10);
  margin: 16px 0 20px;
}
.hearth-h2 em {
  font-style: italic;
  color: var(--fx-gold, #f6b72c);
}
.hearth-text {
  font-size: 17px;
  line-height: 1.7;
  color: rgba(13, 13, 16, 0.74);
  max-width: 480px;
}

@media (max-width: 880px) {
  .hearth-shell { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .hearth-beam, .hearth-steam { animation: none !important; }
}

/* =========================================================
 *  [HOME] SOLEIL SOUVERAIN — Apothéose finale
 *  Soléa = sol + ea. Le motif solaire qui irradie en signature de fin.
 *  Rayons or qui se tracent en vague + halo + texte centré dans le disque.
 * ========================================================= */
.solea-sun-sovereign {
  background: linear-gradient(180deg, var(--fx-cream, #fbf8f2) 0%, #fff8e8 50%, var(--fx-cream, #fbf8f2) 100%);
  padding: clamp(80px, 12vh, 160px) 0 clamp(120px, 14vh, 200px);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.sun-stage {
  position: relative;
  width: min(960px, 95vw);
  margin: 0 auto;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sun-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* Le halo s'amplifie en respiration */
.sun-halo {
  transform-origin: 400px 400px;
  animation: sunHaloBreathe 9s ease-in-out infinite;
}
@keyframes sunHaloBreathe {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50%      { transform: scale(1.08); opacity: 1; }
}

/* Cœur du soleil — pulse plus rapide, intime */
.sun-core {
  transform-origin: 400px 400px;
  animation: sunCorePulse 5.5s ease-in-out infinite;
}
@keyframes sunCorePulse {
  0%, 100% { opacity: 0.92; transform: scale(1); }
  50%      { opacity: 1.0;  transform: scale(1.04); }
}
.sun-ring {
  transform-origin: 400px 400px;
  animation: sunRingRotate 60s linear infinite;
}
@keyframes sunRingRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* 16 rayons qui se dessinent en vague concentrique au reveal */
.sun-ray {
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 1.4s var(--ease-glide, cubic-bezier(0.65, 0, 0.35, 1));
  transition-delay: calc(var(--ray-i) * 0.07s + 0.3s);
}
.solea-sun-sovereign.is-revealed .sun-ray {
  stroke-dashoffset: 0;
}
.solea-sun-sovereign.is-revealed .sun-ray {
  animation: sunRayPulse 4s ease-in-out infinite;
  animation-delay: calc(var(--ray-i) * 0.08s + 2s);
}
@keyframes sunRayPulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.85; }
}

/* Le texte centré dans le soleil */
.sun-content {
  position: relative;
  z-index: 2;
  max-width: 540px;
  text-align: center;
  padding: 40px 24px;
}
.sun-eyebrow {
  font-family: 'Cormorant Garamond', serif;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: rgba(13, 13, 16, 0.6);
  margin: 0 0 18px;
}
.sun-eyebrow em {
  font-style: italic;
  font-weight: 600;
  color: var(--fx-gold, #f6b72c);
}
.sun-h2 {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.12;
  color: var(--fx-ink, #0d0d10);
  letter-spacing: -0.02em;
  margin: 0 0 18px;
}
.sun-body {
  font-size: 17px;
  line-height: 1.6;
  color: rgba(13, 13, 16, 0.74);
  max-width: 440px;
  margin: 0 auto 32px;
}
.sun-ctas {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.sun-cta {
  /* Le bouton CTA souverain — fond ink, glow or autour */
  box-shadow: 0 0 0 6px rgba(246, 183, 44, 0.12), 0 30px 60px -20px rgba(246, 183, 44, 0.35);
}

@media (max-width: 720px) {
  .sun-stage { aspect-ratio: 1.3 / 1; }
}
@media (prefers-reduced-motion: reduce) {
  .sun-halo, .sun-core, .sun-ring, .sun-ray { animation: none !important; }
}

/* =========================================================
 *  [HOME — AURORE QUI SE LÈVE]
 *  Halo solaire imperceptible sous la chambre home.
 *  Pas un soleil-dessin. Une présence de lumière qui monte.
 * ========================================================= */
.chamber-ink + .solea-hearth {
  position: relative;
}
.chamber-ink + .solea-hearth::before {
  content: "";
  position: absolute;
  top: -120px;
  left: 50%;
  width: 800px;
  height: 240px;
  background: radial-gradient(ellipse, rgba(255, 222, 160, 0.32) 0%, transparent 70%);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 2;
  filter: blur(20px);
  animation: auroreRise 5s ease-out forwards;
  opacity: 0;
}
@keyframes auroreRise {
  0%   { opacity: 0; transform: translateX(-50%) translateY(80px); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* =========================================================
 *  [ACTUALITÉS / RÉALISATIONS] MOSAÏQUE DÉRIVANTE
 *
 *  Grid CSS irrégulière, tuiles à tailles variables (tile-sm/md/lg).
 *  Parallax par tile au scroll. Filters par catégorie avec scale + blur out.
 *  Hover : tilt 3D doux + reveal overlay éditorial.
 *
 *  Géométrie inédite — pas répliquée d'aucune autre page signature.
 * ========================================================= */
.realisations-filters-wrap {
  padding-bottom: 16px;
}
.realisations-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}
.realisation-filter {
  background: transparent;
  border: 1px solid rgba(13, 13, 16, 0.15);
  color: var(--fx-ink, #0d0d10);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 16px;
  padding: 8px 22px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.35s var(--ease-glide), border-color 0.35s var(--ease-glide), color 0.35s;
}
.realisation-filter:hover {
  border-color: var(--fx-gold);
}
.realisation-filter.is-active {
  background: var(--fx-ink, #0d0d10);
  color: var(--fx-cream, #fbf8f2);
  border-color: var(--fx-ink, #0d0d10);
}

.realisations-mosaic-wrap {
  padding: 0 clamp(20px, 4vw, 56px) 80px;
  position: relative;
}
.realisations-mosaic {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 80px;
  gap: 18px;
  max-width: 1400px;
  margin: 0 auto;
}
.realisation-tile {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  cursor: pointer;
  transform-style: preserve-3d;
  transition:
    transform 0.6s var(--ease-glide),
    filter 0.5s var(--ease-glide),
    opacity 0.5s var(--ease-glide);
  will-change: transform;
  isolation: isolate;
}
.realisation-tile.tile-sm { grid-column: span 4; grid-row: span 4; }
.realisation-tile.tile-md { grid-column: span 5; grid-row: span 5; }
.realisation-tile.tile-lg { grid-column: span 6; grid-row: span 6; }

/* Pattern irrégulier — placement implicite mais reproductible */
.realisation-tile:nth-child(1) { grid-column: span 7; grid-row: span 6; }
.realisation-tile:nth-child(2) { grid-column: span 5; grid-row: span 5; }
.realisation-tile:nth-child(3) { grid-column: span 5; grid-row: span 4; }
.realisation-tile:nth-child(4) { grid-column: span 7; grid-row: span 6; }
.realisation-tile:nth-child(5) { grid-column: span 4; grid-row: span 4; }
.realisation-tile:nth-child(6) { grid-column: span 5; grid-row: span 5; }
.realisation-tile:nth-child(7) { grid-column: span 4; grid-row: span 4; }
.realisation-tile:nth-child(8) { grid-column: span 8; grid-row: span 5; }

.realisation-tile-media {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.realisation-tile-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-glide), filter 0.6s var(--ease-glide);
  filter: saturate(0.92) brightness(0.88);
}
.realisation-tile:hover {
  transform: translateZ(20px) rotateY(-1.5deg) rotateX(1deg);
  z-index: 5;
}
.realisation-tile:hover .realisation-tile-media img {
  transform: scale(1.08);
  filter: saturate(1.04) brightness(1);
}
.realisation-tile:hover .realisation-tile-overlay {
  transform: translateY(0);
  opacity: 1;
}

/* Meta info (toujours visible) */
.realisation-tile-meta {
  position: absolute;
  top: 18px;
  left: 18px;
  right: 18px;
  z-index: 3;
  display: flex;
  gap: 10px;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fx-cream, #fbf8f2);
  pointer-events: none;
}
.realisation-tile-cat {
  padding: 6px 12px;
  background: var(--fx-gold, #f6b72c);
  color: var(--fx-ink, #0d0d10);
  border-radius: 999px;
}
.realisation-tile-ville,
.realisation-tile-date {
  padding: 6px 12px;
  background: rgba(13, 13, 16, 0.55);
  backdrop-filter: blur(6px);
  border-radius: 999px;
}
.realisation-tile-date { margin-left: auto; }

/* Overlay éditorial qui monte au hover */
.realisation-tile-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 24px 22px 22px;
  background: linear-gradient(180deg, transparent 0%, rgba(13, 13, 16, 0.92) 60%);
  color: var(--fx-cream, #fbf8f2);
  z-index: 2;
  transform: translateY(40%);
  opacity: 0.85;
  transition: transform 0.5s var(--ease-glide), opacity 0.4s ease;
}
.realisation-tile-overlay h3 {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(18px, 1.7vw, 22px);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.realisation-tile-overlay p {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(251, 248, 242, 0.85);
  margin: 0 0 12px;
}
.realisation-tile-overlay .fx-link-arrow {
  color: var(--fx-cream, #fbf8f2);
  font-size: 13px;
}
.realisation-tile-overlay .fx-link-arrow::after { color: var(--fx-gold, #f6b72c); }

/* Filter states — non-match scale + blur out */
.realisation-tile.is-hidden {
  transform: scale(0.92);
  opacity: 0;
  filter: blur(8px) saturate(0);
  pointer-events: none;
}

@media (max-width: 1080px) {
  .realisations-mosaic {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 100px;
  }
  .realisation-tile:nth-child(1), .realisation-tile:nth-child(4),
  .realisation-tile:nth-child(8) { grid-column: span 6; grid-row: span 4; }
  .realisation-tile:nth-child(2), .realisation-tile:nth-child(3),
  .realisation-tile:nth-child(5), .realisation-tile:nth-child(6),
  .realisation-tile:nth-child(7) { grid-column: span 3; grid-row: span 3; }
}
@media (max-width: 640px) {
  .realisations-mosaic { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .realisation-tile,
  .realisation-tile:nth-child(n) {
    grid-column: span 1 !important;
    grid-row: auto !important;
    aspect-ratio: 4/3;
  }
}
@media (prefers-reduced-motion: reduce) {
  .realisation-tile,
  .realisation-tile-media img,
  .realisation-tile-overlay { transition: none !important; }
}

/* =========================================================
 *  [HOME — PIERRE SIGNÉE WebGL]
 *  Conteneur Three.js positionné au-dessus de l'image hero,
 *  visible uniquement sur la home. Fallback transparent si WebGL absent.
 * ========================================================= */
.solea-pierre-signee {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: auto;
  mix-blend-mode: multiply;
  opacity: 0.95;
  transition: opacity 1.4s ease;
}
.solea-pierre-signee canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}
/* Sur la home, on remplace l'image hero par la pierre */
body.page-home .hero-cinematic .hero-luxe-media {
  background: #1a1814;
}
body.page-home .hero-cinematic .hero-luxe-media img {
  opacity: 0.18; /* image en filigrane derrière la pierre WebGL */
}
@media (prefers-reduced-motion: reduce) {
  .solea-pierre-signee { display: none !important; }
  body.page-home .hero-cinematic .hero-luxe-media img { opacity: 1 !important; }
}

/* =========================================================
 *  TOKENS POST-AUDITS — 5 courbes easing + palette enrichie
 *  (Audit motion + DP)
 * ========================================================= */
:root {
  /* 5 courbes signature pour briser l'uniformité cubic-bezier(0.16, 1, 0.3, 1) */
  --ease-rise:    cubic-bezier(0.22, 1, 0.36, 1);        /* monter calmement — corps */
  --ease-attack:  cubic-bezier(0.34, 1.56, 0.64, 1);     /* arriver avec autorité — titres */
  --ease-glide:   cubic-bezier(0.65, 0, 0.35, 1);        /* traverser — transitions */
  --ease-breath:  cubic-bezier(0.4, 0, 0.2, 1);          /* respirer — chambres */
  --ease-anticip: cubic-bezier(0.68, -0.55, 0.265, 1.55);/* anticipation — chiffres */

  /* Palette enrichie post-audit DP — teintes secondaires territoriales */
  --bordeaux-vert:  #2d3e2a;  /* vigne désaturée, sections viticoles */
  --aquitaine-blue: #1c2a3a;  /* ciel d'avant orage, sections diagonales */
  --calcaire:       #e9dfc8;  /* pierre Frontenac, fonds éditoriaux secondaires */
}

/* Appliquer easings différenciés sur les éléments selon rôle */
.fx-section-header h2,
.hero-luxe-h1            { --reveal-easing: var(--ease-attack); }
.fx-section-header p,
.lead-tight,
.fx-product-body         { --reveal-easing: var(--ease-rise); }
.fx-stat-num,
.fx-num-card .fx-num,
.narrative-acte-roman    { --reveal-easing: var(--ease-anticip); }

/* =========================================================
 *  CHAMBRE DE CONTEMPLATION (audit scénographe)
 *  Section vide à dessein. Phrase Cormorant 56pt centrée.
 * ========================================================= */
.solea-chamber {
  min-height: clamp(420px, 60vh, 720px);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.solea-chamber.chamber-cream {
  background: linear-gradient(180deg, var(--fx-cream, #fbf8f2) 0%, var(--calcaire) 60%, var(--fx-cream, #fbf8f2) 100%);
}
.solea-chamber.chamber-ink {
  background: linear-gradient(180deg, var(--aquitaine-blue) 0%, #0d0d10 60%, var(--aquitaine-blue) 100%);
  color: var(--fx-cream, #fbf8f2);
}
.solea-chamber::before {
  /* Halo or quasi imperceptible au centre */
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  height: 80%;
  background: radial-gradient(ellipse, rgba(246, 183, 44, 0.06) 0%, transparent 60%);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.chamber-shell {
  max-width: 760px;
  padding: 0 24px;
  text-align: center;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 1.6s var(--ease-breath), transform 1.6s var(--ease-breath);
}
.solea-chamber.is-active .chamber-shell {
  opacity: 1;
  transform: none;
}
.chamber-phrase {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 4.2vw, 56px);
  line-height: 1.18;
  color: var(--fx-ink, #0d0d10);
  letter-spacing: -0.015em;
  margin: 0;
}
.chamber-ink .chamber-phrase { color: var(--fx-cream, #fbf8f2); }
.chamber-rule {
  display: block;
  width: 48px;
  height: 1px;
  background: var(--fx-gold, #f6b72c);
  margin: 32px auto 0;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 1.2s var(--ease-glide) 0.5s;
}
.solea-chamber.is-active .chamber-rule { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .chamber-shell { opacity: 1 !important; transform: none !important; }
  .chamber-rule  { transform: scaleX(1) !important; }
}

/* =========================================================
 *  CUSTOM PROPERTIES ANIMATABLES
 * ========================================================= */
@property --spot-x { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
@property --spot-y { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
@property --drift-x { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --hue-shift { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --curtain-progress { syntax: '<percentage>'; inherits: false; initial-value: 0%; }

/* =========================================================
 *  [1] FRISE 3D ARCHITECTURALE
 *  Bande horizontale 100% × 280px en CSS 3D.
 *  Contient 6 silhouettes architecturales SVG en rotation Y.
 *  Au scroll, la frise pivote et défile.
 * ========================================================= */
.solea-frise-3d {
  position: relative;
  width: 100%;
  height: clamp(220px, 26vw, 320px);
  perspective: 1400px;
  overflow: hidden;
  background: linear-gradient(180deg, transparent 0%, rgba(13, 13, 16, 0.02) 50%, transparent 100%);
  margin: clamp(72px, 9vh, 120px) 0;
}
.solea-frise-3d::before,
.solea-frise-3d::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 12%;
  z-index: 2;
  pointer-events: none;
}
.solea-frise-3d::before {
  left: 0;
  background: linear-gradient(90deg, var(--fx-cream, #fbf8f2) 0%, transparent 100%);
}
.solea-frise-3d::after {
  right: 0;
  background: linear-gradient(270deg, var(--fx-cream, #fbf8f2) 0%, transparent 100%);
}
.solea-frise-3d-track {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotateX(8deg) rotateY(var(--frise-rotate, 0deg));
  transform-style: preserve-3d;
  display: flex;
  align-items: center;
  gap: clamp(48px, 6vw, 96px);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.solea-frise-3d-item {
  flex-shrink: 0;
  width: clamp(140px, 18vw, 220px);
  height: clamp(160px, 20vw, 260px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  transform: translateZ(0);
}
.solea-frise-3d-item:nth-child(odd)  { transform: translateZ(-40px); }
.solea-frise-3d-item:nth-child(even) { transform: translateZ(40px); }
.solea-frise-3d-item svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 12px 24px rgba(13, 13, 16, 0.18));
}
.solea-frise-3d-item .arch-stroke {
  fill: none;
  stroke: var(--fx-ink, #0d0d10);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.86;
}
.solea-frise-3d-item .arch-accent {
  fill: var(--fx-gold, #f6b72c);
  opacity: 0.9;
}
.solea-frise-3d-item .arch-glow {
  fill: none;
  stroke: var(--fx-gold, #f6b72c);
  stroke-width: 0.5;
  opacity: 0.4;
  filter: blur(2px);
}
.solea-frise-3d-item-label {
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 13px;
  color: rgba(13, 13, 16, 0.55);
  white-space: nowrap;
  letter-spacing: 0.04em;
}
body.palette-strict .solea-frise-3d-item-label { color: rgba(0,0,0,0.55); }

/* =========================================================
 *  [2] SPOTLIGHT FOLLOW MOUSE
 *  Lumière douce dorée qui suit le curseur sur les heros.
 * ========================================================= */
.fx-hero.spotlight {
  position: relative;
  isolation: isolate;
}
.fx-hero.spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(
    circle 400px at var(--spot-x, 50%) var(--spot-y, 50%),
    rgba(246, 183, 44, 0.18) 0%,
    rgba(246, 183, 44, 0.05) 30%,
    transparent 60%
  );
  pointer-events: none;
  transition: background 0.12s linear;
  mix-blend-mode: screen;
}

/* =========================================================
 *  [3] CURTAIN REVEAL
 *  Rideau or qui se ferme puis s'ouvre quand on entre dans une section.
 * ========================================================= */
.fx-curtain-reveal {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.fx-curtain-reveal::before,
.fx-curtain-reveal::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 51%;
  background: linear-gradient(135deg, #d99c1f 0%, #f6b72c 50%, #fcdf90 100%);
  z-index: 3;
  pointer-events: none;
  transform: translateX(0);
  transition: transform 1.2s cubic-bezier(0.65, 0, 0.35, 1);
}
.fx-curtain-reveal::before { left: 0; }
.fx-curtain-reveal::after  { right: 0; }
.fx-curtain-reveal.is-open::before { transform: translateX(-101%); }
.fx-curtain-reveal.is-open::after  { transform: translateX(101%); }

/* =========================================================
 *  [4] MAGNETIC DEPTH IMAGES
 *  Sur hover image, perspective 3D subtle qui réagit au mouvement souris.
 * ========================================================= */
.fx-magnetic-depth {
  perspective: 1200px;
  display: block;
}
.fx-magnetic-depth img,
.fx-magnetic-depth picture {
  display: block;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  transform-style: preserve-3d;
  will-change: transform;
}
.fx-magnetic-depth:hover img,
.fx-magnetic-depth:hover picture {
  transform: scale(1.04);
}

/* =========================================================
 *  [5] CONSTELLATION MAP (page zones)
 *  Les villes desservies en SVG : points or + traits qui les relient.
 * ========================================================= */
.solea-constellation {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  max-width: 960px;
  margin: 0 auto;
  background: linear-gradient(180deg, var(--fx-warm, #f6efe2) 0%, var(--fx-cream, #fbf8f2) 100%);
  border-radius: 22px;
  overflow: hidden;
  isolation: isolate;
}
.solea-constellation svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.solea-constellation .const-link {
  stroke: var(--fx-gold, #f6b72c);
  stroke-width: 0.6;
  opacity: 0.32;
  fill: none;
  stroke-dasharray: 4 6;
  animation: constLinkPulse 3.5s ease-in-out infinite;
}
.solea-constellation .const-node {
  fill: var(--fx-gold, #f6b72c);
  cursor: pointer;
  transition: r .25s, fill .25s;
}
.solea-constellation .const-node:hover {
  r: 6;
  fill: var(--fx-ink, #0d0d10);
}
.solea-constellation .const-halo {
  fill: var(--fx-gold, #f6b72c);
  opacity: 0.12;
}
.solea-constellation .const-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  fill: var(--fx-ink, #0d0d10);
  text-anchor: middle;
  opacity: 0.72;
  pointer-events: none;
}
@keyframes constLinkPulse {
  0%, 100% { stroke-dashoffset: 0; }
  50%      { stroke-dashoffset: -20; }
}

/* =========================================================
 *  [6] LIQUID BORDERS
 *  Bordure or qui ondule via SVG filter feTurbulence.
 * ========================================================= */
.fx-liquid-border {
  position: relative;
  isolation: isolate;
}
.fx-liquid-border::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--fx-gold, #f6b72c);
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  filter: url(#solea-liquid-turbulence);
}

/* =========================================================
 *  [7] EDITORIAL REVEALS — 7 patterns différents
 *  Chacun s'active via data-fx="reveal-{name}"
 * ========================================================= */
[data-fx="reveal-slide-left"]  { opacity: 0; transform: translate3d(-48px, 0, 0);  transition: opacity .9s var(--fx-ease-out), transform 1s var(--fx-ease-out); }
[data-fx="reveal-slide-right"] { opacity: 0; transform: translate3d( 48px, 0, 0);  transition: opacity .9s var(--fx-ease-out), transform 1s var(--fx-ease-out); }
[data-fx="reveal-mask"]        { opacity: 0; clip-path: inset(0 100% 0 0);          transition: opacity .8s ease, clip-path 1.2s var(--fx-ease-out); }
[data-fx="reveal-mask-v"]      { opacity: 0; clip-path: inset(100% 0 0 0);          transition: opacity .8s ease, clip-path 1.2s var(--fx-ease-out); }
[data-fx="reveal-split"]       { opacity: 0; clip-path: inset(0 50% 0 50%);         transition: opacity .8s ease, clip-path 1.2s var(--fx-ease-out); }
[data-fx="reveal-glow"]        { opacity: 0; filter: brightness(2) blur(8px);       transition: opacity 1s ease, filter 1.4s var(--fx-ease-out); }
[data-fx="reveal-blur"]        { opacity: 0; filter: blur(20px);                    transition: opacity .9s ease, filter 1.2s var(--fx-ease-out); }
[data-fx="reveal-flip"]        { opacity: 0; transform: perspective(1000px) rotateX(-30deg); transform-origin: bottom; transition: opacity .8s ease, transform 1.2s var(--fx-ease-out); }
[data-fx="reveal-unveil"]      { opacity: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 0); transition: opacity .8s ease, clip-path 1.4s var(--fx-ease-out); }

[data-fx^="reveal-"].is-revealed {
  opacity: 1;
  transform: none;
  clip-path: none;
  filter: none;
}

/* =========================================================
 *  [8] GENERATIVE GRID PULSE
 *  Fine grille architecturale or qui pulse au scroll.
 *  Plus le scroll s'accélère, plus la grille pulse.
 * ========================================================= */
.solea-gen-grid {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(246, 183, 44, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(246, 183, 44, 0.018) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.6) 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.6) 0%, transparent 80%);
  opacity: 0.65;
  transform: translate3d(var(--drift-x, 0%), 0, 0);
  transition: transform 0.4s linear;
}

/* =========================================================
 *  [9] CINEMA BARS
 *  Bandeaux ink top/bottom sur les heros pour effet 35mm.
 * ========================================================= */
.fx-hero.cinema {
  position: relative;
}
.fx-hero.cinema::before,
.fx-hero.cinema::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: clamp(28px, 5vh, 56px);
  background: #0d0d10;
  z-index: 4;
  transform: scaleY(0);
  transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1) 0.3s;
  pointer-events: none;
}
.fx-hero.cinema::before { top: 0;    transform-origin: top; }
.fx-hero.cinema::after  { bottom: 0; transform-origin: bottom; }
.fx-hero.cinema.is-cinema::before,
.fx-hero.cinema.is-cinema::after { transform: scaleY(1); }

/* =========================================================
 *  [10] GRAIN TEXTURE OVERLAY
 *  Couche de bruit photo SVG subtile sur le hero.
 * ========================================================= */
.fx-grain {
  position: relative;
  isolation: isolate;
}
.fx-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.085 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  opacity: 0.55;
  mix-blend-mode: overlay;
}

/* =========================================================
 *  [11] IMAGE COLOR SHIFT AU SCROLL
 *  Les images hero s'éclaircissent/réchauffent au scroll.
 *  Tone mapping via filter().
 * ========================================================= */
.fx-color-shift img {
  transition: filter 0.4s linear;
  filter:
    saturate(1)
    contrast(1)
    hue-rotate(var(--hue-shift, 0deg))
    brightness(calc(1 - var(--scroll-darken, 0) * 0.18));
}

/* =========================================================
 *  [12] HOVER IMAGE ZOOM + TILT
 *  Combiné. Scale 1.05 + rotateY 4deg + drop-shadow doré.
 * ========================================================= */
.fx-zoom-tilt {
  display: block;
  perspective: 1400px;
  overflow: hidden;
  border-radius: 14px;
}
.fx-zoom-tilt img,
.fx-zoom-tilt picture {
  display: block;
  transform: scale(1) rotateY(0deg);
  transform-origin: center;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s;
  filter: saturate(0.96);
  will-change: transform;
}
.fx-zoom-tilt:hover img,
.fx-zoom-tilt:hover picture {
  transform: scale(1.06) rotateY(-2deg) rotateX(2deg);
  filter: saturate(1.08) drop-shadow(0 24px 48px rgba(246, 183, 44, 0.18));
}

/* =========================================================
 *  [13] ARCHITECTURAL DRIFT — Silhouettes en arrière-plan
 *  Bande verticale fine de silhouettes d'immeubles qui dérive
 *  lentement en arrière-plan, donne l'ambiance ville-Bordeaux.
 * ========================================================= */
.solea-drift {
  position: fixed;
  top: 0; bottom: 0;
  right: 0;
  width: 80px;
  z-index: -1;
  pointer-events: none;
  opacity: 0.06;
  overflow: hidden;
}
.solea-drift svg {
  position: absolute;
  width: 100%;
  height: 200%;
  top: 0;
  animation: driftV 80s linear infinite;
}
@keyframes driftV {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}
@media (max-width: 880px) {
  .solea-drift { display: none; }
}

/* =========================================================
 *  [14] SLOT-MACHINE REVEAL (chiffres importants)
 *  Le chiffre apparaît en défilement vertical, freine et s'arrête.
 *  Donne sensation de "tirage" cinétique.
 * ========================================================= */
.fx-slot {
  display: inline-flex;
  align-items: center;
  vertical-align: baseline;
  overflow: hidden;
  height: 1em;
  line-height: 1;
}
.fx-slot .fx-slot-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateY(0);
  transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.fx-slot .fx-slot-col span {
  height: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =========================================================
 *  [15] PULL QUOTE — Letter highlight au hover
 *  Les lettres survolées s'illuminent en or
 *  (effet de lecture interactive)
 * ========================================================= */
.fx-pullquote.fx-interactive blockquote {
  cursor: text;
}
.fx-pullquote.fx-interactive blockquote .ch {
  transition: color 0.2s, text-shadow 0.2s;
}
.fx-pullquote.fx-interactive blockquote .ch:hover,
.fx-pullquote.fx-interactive blockquote .ch.recently-hovered {
  color: var(--fx-gold, #f6b72c);
  text-shadow: 0 0 12px rgba(246, 183, 44, 0.5);
}

/* =========================================================
 *  [16] PAGE-SPECIFIC ARRIVALS
 *  Chaque page a sa propre signature d'entrée juste après l'intro.
 *  - HOME : zoom dezoom du hero (scale 1.1 → 1 + brightness)
 *  - PARTICULIERS : slide depuis la droite (warm welcome)
 *  - PROFESSIONNELS : rideau noir → reveal (corporate)
 *  - À PROPOS : fade lent (introspection)
 *  - CONTACT : focus center (resserrement)
 * ========================================================= */
body.page-home .hero-luxe-media img       { animation: arrivalHome 2.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; transform-origin: center; }
body.page-particuliers .hero-luxe-media   { animation: arrivalParticuliers 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
body.page-professionnels .hero-luxe       { position: relative; }
body.page-professionnels .hero-luxe::after{ content: ""; position: absolute; inset: 0; background: #0d0d10; z-index: 3; pointer-events: none; animation: arrivalPro 1.4s cubic-bezier(0.65, 0, 0.35, 1) forwards; }
body.page-a-propos .hero-luxe-media img   { animation: arrivalAbout 3s ease-out forwards; opacity: 0; }
body.page-contact .hero-luxe-media        { animation: arrivalContact 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; transform-origin: center; }

@keyframes arrivalHome {
  0%   { transform: scale(1.18); filter: brightness(0.6); }
  60%  { filter: brightness(0.95); }
  100% { transform: scale(1); filter: brightness(1); }
}
@keyframes arrivalParticuliers {
  from { transform: translateX(8%); opacity: 0.4; }
  to   { transform: translateX(0); opacity: 1; }
}
@keyframes arrivalPro {
  0%   { transform: scaleX(1); transform-origin: right; }
  60%  { transform: scaleX(1); transform-origin: right; }
  100% { transform: scaleX(0); transform-origin: right; }
}
@keyframes arrivalAbout {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes arrivalContact {
  from { transform: scale(1.06); opacity: 0.5; }
  to   { transform: scale(1); opacity: 1; }
}

/* =========================================================
 *  [17] CURSOR LIGHT FIELD
 *  Un disque lumineux qui suit le curseur, plus large que le cursor narratif,
 *  avec mix-blend-mode pour éclairer ce qu'il survole.
 * ========================================================= */
.solea-cursor-field {
  position: fixed;
  top: 0; left: 0;
  width: 360px;
  height: 360px;
  pointer-events: none;
  z-index: 9997;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(246, 183, 44, 0.10) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.4s;
  mix-blend-mode: screen;
  filter: blur(8px);
}
.solea-cursor-field.is-on { opacity: 1; }
@media (pointer: coarse) { .solea-cursor-field { display: none !important; } }

/* =========================================================
 *  ============ SIGNATURES UNIQUES PAR PAGE ============
 *  Quatre signatures, quatre identités visuelles distinctes.
 *  Aucune n'est répétée d'une page à l'autre.
 * ========================================================= */

/* =========================================================
 *  [HOME] BOUSSOLE GIRONDE
 *  Mandala-boussole. Anneaux concentriques + 8 cardinaux + aiguille rotative.
 * ========================================================= */
.solea-compass-section {
  background: linear-gradient(180deg, var(--fx-cream, #fbf8f2) 0%, var(--fx-warm, #f6efe2) 100%);
}
.solea-compass {
  position: relative;
  width: min(100%, 640px);
  aspect-ratio: 1;
  margin: 56px auto 0;
  display: block;
  cursor: pointer;
  transition: transform 0.5s var(--ease-glide, cubic-bezier(0.65, 0, 0.35, 1));
}
.solea-compass:hover { transform: scale(1.02); }
.solea-compass:focus-visible { outline: 3px solid var(--fx-gold); outline-offset: 8px; border-radius: 50%; }
.solea-compass-svg {
  width: 100%;
  height: 100%;
  display: block;
}
.solea-compass-svg .ring {
  fill: none;
  stroke: rgba(13, 13, 16, 0.10);
  stroke-width: 0.8;
}
.solea-compass-svg .ring-outer {
  stroke: rgba(13, 13, 16, 0.14);
  stroke-dasharray: 2 4;
  animation: compassRotate 220s linear infinite;
  transform-origin: 300px 300px;
}
.solea-compass-svg .ring-middle {
  stroke: rgba(246, 183, 44, 0.18);
}
.solea-compass-svg .ring-inner {
  stroke: rgba(13, 13, 16, 0.18);
}
.solea-compass-svg .axes line {
  stroke: rgba(13, 13, 16, 0.08);
  stroke-width: 0.6;
}
.solea-compass-svg .axes .axis-diag {
  stroke-dasharray: 3 5;
}
.solea-compass-svg .cardinals circle {
  fill: var(--fx-gold, #f6b72c);
  filter: drop-shadow(0 0 6px rgba(246, 183, 44, 0.45));
}
.solea-compass-svg .card-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.28em;
  fill: var(--fx-ink, #0d0d10);
  text-anchor: middle;
}
.solea-compass-svg .card-sub {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 11px;
  fill: var(--fx-gold, #f6b72c);
  text-anchor: middle;
}
.solea-compass-svg .compass-needle {
  transform-origin: 300px 300px;
  animation: compassNeedle 18s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.solea-compass-svg .compass-needle line {
  stroke: var(--fx-gold, #f6b72c);
  filter: drop-shadow(0 0 4px rgba(246, 183, 44, 0.55));
}
.solea-compass-svg .center-disc {
  fill: var(--fx-ink, #0d0d10);
}
.solea-compass-svg .center-stroke {
  fill: none;
  stroke: var(--fx-gold, #f6b72c);
  stroke-width: 1.2;
}
.solea-compass-svg .center-name {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 14px;
  fill: var(--fx-gold, #f6b72c);
  text-anchor: middle;
  letter-spacing: 0.16em;
}
.solea-compass-svg .center-addr {
  font-family: 'Montserrat', sans-serif;
  font-size: 7px;
  font-weight: 500;
  letter-spacing: 0.18em;
  fill: var(--fx-cream, #fbf8f2);
  text-anchor: middle;
}

.compass-anchor {
  max-width: 640px;
  margin: 56px auto 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.5;
  color: rgba(13, 13, 16, 0.7);
  text-align: center;
  position: relative;
  padding-top: 32px;
}
.compass-anchor::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 1px;
  background: var(--fx-gold, #f6b72c);
}

@keyframes compassRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes compassNeedle {
  0%   { transform: rotate(0deg); }
  12%  { transform: rotate(45deg); }
  25%  { transform: rotate(90deg); }
  37%  { transform: rotate(135deg); }
  50%  { transform: rotate(180deg); }
  62%  { transform: rotate(225deg); }
  75%  { transform: rotate(270deg); }
  87%  { transform: rotate(315deg); }
  100% { transform: rotate(360deg); }
}

/* =========================================================
 *  [PARTICULIERS] FRISE NARRATIVE 6 ACTES
 *  Bande horizontale en perspective, 6 panneaux qui se déploient.
 *  Ce n'est PAS la frise architecturale générique. C'est la signature
 *  unique de cette page : le parcours client en six actes.
 * ========================================================= */
.solea-narrative-frise {
  position: relative;
  background: linear-gradient(180deg, var(--fx-cream, #fbf8f2) 0%, var(--fx-warm, #f6efe2) 50%, var(--fx-cream, #fbf8f2) 100%);
  overflow: hidden;
  isolation: isolate;
}
.solea-narrative-frise::before {
  /* Trait horizontal or qui traverse la frise au niveau des chiffres */
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(246, 183, 44, 0.45) 20%, rgba(246, 183, 44, 0.45) 80%, transparent 100%);
  z-index: 0;
}
.narrative-frise-rail {
  display: grid;
  grid-template-columns: repeat(6, minmax(220px, 1fr));
  gap: 0;
  padding: clamp(48px, 8vh, 96px) clamp(20px, 4vw, 48px);
  position: relative;
  z-index: 1;
  perspective: 1600px;
  perspective-origin: 50% 50%;
}
.narrative-acte {
  padding: 32px 24px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(8px);
  border-radius: 14px;
  border: 1px solid rgba(13, 13, 16, 0.04);
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s, border-color 0.4s;
  position: relative;
  will-change: transform;
}
.narrative-acte.depth-back  { transform: translateZ(-30px) translateY(8px); }
.narrative-acte.depth-front { transform: translateZ(20px) translateY(-12px); }
.narrative-acte:hover {
  transform: translateZ(60px) translateY(-18px) rotateY(-3deg);
  box-shadow: 0 40px 80px -30px rgba(13, 13, 16, 0.18);
  border-color: rgba(246, 183, 44, 0.4);
}

/* Chiffre romain géant Cormorant italique */
.narrative-acte-roman {
  position: absolute;
  top: -32px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 96px;
  line-height: 1;
  color: rgba(246, 183, 44, 0.5);
  letter-spacing: -0.04em;
  filter: drop-shadow(0 4px 12px rgba(246, 183, 44, 0.18));
  z-index: 2;
  pointer-events: none;
}
.narrative-acte-glyph {
  width: 64px;
  height: 64px;
  margin: 32px auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.narrative-acte-glyph svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 8px rgba(246, 183, 44, 0.3));
}
.narrative-acte-title {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 28px;
  text-align: center;
  margin: 0 0 4px;
  color: var(--fx-ink, #0d0d10);
  letter-spacing: -0.015em;
}
.narrative-acte-lead {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-align: center;
  color: var(--fx-gold, #f6b72c);
  margin: 0 0 16px;
  font-weight: 600;
}
.narrative-acte-body {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(13, 13, 16, 0.7);
  text-align: center;
  margin: 0;
}

@media (max-width: 1080px) {
  .narrative-frise-rail { grid-template-columns: repeat(3, 1fr); gap: 60px 16px; }
  .narrative-acte.depth-back, .narrative-acte.depth-front { transform: none; }
}
@media (max-width: 640px) {
  .narrative-frise-rail { grid-template-columns: 1fr; gap: 64px; }
  .narrative-acte-roman { font-size: 72px; }
}

/* =========================================================
 *  [PRESTATIONS] L'AXE SOLÉA — frise verticale 3D
 *
 *  Axe central qui se trace au scroll (stroke-dashoffset via animation-timeline).
 *  10 cards alternées gauche/droite, en perspective 3D légère.
 *  Tempo : déroulé vertical lent, contemplatif.
 *  TRÈS différent de la frise horizontale particuliers.
 * ========================================================= */
.solea-axis {
  background: linear-gradient(180deg, var(--fx-cream, #fbf8f2) 0%, rgba(246, 239, 226, 0.4) 50%, var(--fx-cream, #fbf8f2) 100%);
  position: relative;
  overflow: hidden;
}
.solea-axis::before {
  /* Halo vertical lumineux dans le fond */
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 200px;
  background: radial-gradient(ellipse at center, rgba(246, 183, 44, 0.08) 0%, transparent 70%);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
}

.axis-stage {
  position: relative;
  max-width: 1100px;
  margin: 56px auto 0;
  padding: 24px 24px 64px;
  perspective: 2400px;
  perspective-origin: 50% 50%;
  z-index: 1;
}

/* Faisceau lumineux central — se trace au scroll */
.axis-beam {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  z-index: 1;
  pointer-events: none;
}
.axis-beam svg {
  width: 100%;
  height: 100%;
}
.axis-beam-line {
  fill: none;
  stroke: var(--fx-gold, #f6b72c);
  stroke-width: 2;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  filter: drop-shadow(0 0 6px rgba(246, 183, 44, 0.6));
}

@supports (animation-timeline: scroll()) {
  .axis-beam-line {
    animation: axisDraw linear;
    animation-timeline: view();
    animation-range: entry 5% cover 90%;
  }
  @keyframes axisDraw {
    to { stroke-dashoffset: 0; }
  }
}

.axis-rail {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 0;
  z-index: 2;
}
.axis-jalon {
  position: relative;
  padding: 24px 0;
  transform-style: preserve-3d;
  will-change: transform;
}
.axis-jalon-left  { grid-column: 1; padding-right: 80px; }
.axis-jalon-right { grid-column: 2; padding-left: 80px; }

/* Marqueur sur l'axe (rond or pulsé) */
.axis-marker {
  position: absolute;
  top: 38px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--fx-cream, #fbf8f2);
  border: 1.5px solid var(--fx-gold, #f6b72c);
  z-index: 3;
  box-shadow: 0 0 0 5px rgba(246, 183, 44, 0.14), 0 0 12px rgba(246, 183, 44, 0.45);
  animation: axisMarkerPulse 2.8s ease-in-out infinite;
}
.axis-jalon-left  .axis-marker { right: -7px; }
.axis-jalon-right .axis-marker { left: -7px; }
@keyframes axisMarkerPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 5px rgba(246, 183, 44, 0.14), 0 0 12px rgba(246, 183, 44, 0.45); }
  50%      { transform: scale(1.15); box-shadow: 0 0 0 8px rgba(246, 183, 44, 0.08), 0 0 18px rgba(246, 183, 44, 0.65); }
}

/* Connecteur trait or horizontal de l'axe vers la card */
.axis-connector {
  position: absolute;
  top: 44px;
  height: 1px;
  background: linear-gradient(90deg, rgba(246, 183, 44, 0.7) 0%, rgba(246, 183, 44, 0) 100%);
  width: 64px;
  z-index: 2;
}
.axis-jalon-left  .axis-connector { right: 0; transform: none; }
.axis-jalon-right .axis-connector { left: 0; background: linear-gradient(270deg, rgba(246, 183, 44, 0.7) 0%, rgba(246, 183, 44, 0) 100%); }

/* La card du jalon */
.axis-card {
  position: relative;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(13, 13, 16, 0.05);
  border-radius: 14px;
  padding: 28px 32px;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s, border-color 0.4s;
  will-change: transform;
}
.axis-jalon-left  .axis-card { transform: rotateY(2deg); }
.axis-jalon-right .axis-card { transform: rotateY(-2deg); }
.axis-jalon-left  .axis-card:hover { transform: rotateY(0deg) translateZ(28px) translateX(-8px); box-shadow: 0 40px 80px -30px rgba(13, 13, 16, 0.18); border-color: rgba(246, 183, 44, 0.4); }
.axis-jalon-right .axis-card:hover { transform: rotateY(0deg) translateZ(28px) translateX(8px); box-shadow: 0 40px 80px -30px rgba(13, 13, 16, 0.18); border-color: rgba(246, 183, 44, 0.4); }

/* Chiffre 01-10 — italique Cormorant en filigrane */
.axis-card-num {
  position: absolute;
  top: 12px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 72px;
  line-height: 1;
  color: rgba(246, 183, 44, 0.3);
  letter-spacing: -0.04em;
  pointer-events: none;
  user-select: none;
}
.axis-jalon-left  .axis-card-num { right: 24px; }
.axis-jalon-right .axis-card-num { left: 24px; }

.axis-card-title {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  margin: 8px 0 8px;
  color: var(--fx-ink, #0d0d10);
  letter-spacing: -0.01em;
  line-height: 1.2;
  position: relative;
  padding-right: 80px; /* laisse de l'espace au chiffre filigrane */
}
.axis-jalon-right .axis-card-title { padding-right: 0; padding-left: 80px; }
.axis-card-body {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(13, 13, 16, 0.72);
  margin: 0;
}

@media (max-width: 880px) {
  .axis-stage { padding: 16px 16px 32px; }
  .axis-rail { grid-template-columns: 1fr; gap: 16px; }
  .axis-jalon-left, .axis-jalon-right {
    grid-column: 1;
    padding-left: 40px;
    padding-right: 0;
  }
  .axis-jalon-left .axis-marker,
  .axis-jalon-right .axis-marker { left: -7px; right: auto; }
  .axis-jalon-left .axis-connector,
  .axis-jalon-right .axis-connector { left: 0; right: auto; background: linear-gradient(270deg, rgba(246, 183, 44, 0.7) 0%, rgba(246, 183, 44, 0) 100%); width: 32px; }
  .axis-jalon-left .axis-card,
  .axis-jalon-right .axis-card { transform: none; }
  .axis-jalon-left .axis-card:hover,
  .axis-jalon-right .axis-card:hover { transform: translateZ(12px); }
  .axis-beam { left: 16px; transform: none; }
  .axis-jalon-left .axis-card-num,
  .axis-jalon-right .axis-card-num { left: auto; right: 18px; font-size: 56px; }
  .axis-card-title { padding-right: 70px !important; padding-left: 0 !important; }
}
@media (prefers-reduced-motion: reduce) {
  .axis-marker { animation: none !important; }
  .axis-beam-line { stroke-dashoffset: 0 !important; animation: none !important; }
  .axis-card { transform: none !important; }
}

/* =========================================================
 *  [PROFESSIONNELS] ORBIT 3D — Carrousel rotatif horizontal
 *
 *  Version finale spectaculaire. 6 cards en orbite autour d'un axe Y central,
 *  3 visibles simultanément (avant + 2 côtés en perspective), rotation auto
 *  continue 40s. Hover sur le stage → pause rotation. Click dot/arrow → snap
 *  vers une face précise avec transition cubic-bezier.
 *
 *  Différences vs cylindre v1 :
 *    - Axe Y (pas X) → plus naturel à l'œil
 *    - PAS de backface-visibility:hidden → on voit les arrières en perspective réduite
 *    - Inclinaison globale rotateX(-6deg) → effet 3D présent dès l'entrée
 *    - Ombre projetée orbitale au sol → profondeur réelle
 * ========================================================= */
.solea-orbit {
  background:
    radial-gradient(ellipse at 50% 60%, rgba(246, 183, 44, 0.05) 0%, transparent 60%),
    linear-gradient(180deg, var(--fx-warm, #f6efe2) 0%, var(--fx-cream, #fbf8f2) 100%);
  overflow: hidden;
  position: relative;
  perspective: 2400px;
  perspective-origin: 50% 40%;
}

.orbit-stage {
  position: relative;
  width: min(100%, 1100px);
  margin: 56px auto 0;
  height: 540px;
  transform-style: preserve-3d;
  transform: rotateX(-6deg);
}

/* Ombre orbitale au sol — disque qui se déforme par perspective */
.orbit-floor {
  position: absolute;
  bottom: 110px;
  left: 50%;
  width: 880px;
  height: 80px;
  background: radial-gradient(ellipse, rgba(13, 13, 16, 0.18) 0%, transparent 70%);
  transform: translate(-50%, 0) rotateX(90deg);
  filter: blur(8px);
  pointer-events: none;
  z-index: 0;
}

/* Le berceau qui tourne — animation infinite, pausable */
.orbit-cradle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  animation: orbitSpin 48s linear infinite;
  will-change: transform;
}
@keyframes orbitSpin {
  from { transform: translate(-50%, -50%) rotateY(0deg); }
  to   { transform: translate(-50%, -50%) rotateY(-360deg); }
}
.orbit-stage:hover .orbit-cradle { animation-play-state: paused; }

/* Quand l'utilisateur clique un dot, JS pose une rotation cible et fige */
.orbit-stage.is-snapped .orbit-cradle {
  animation: none;
  transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Chaque card en orbite */
.orbit-card {
  position: absolute;
  top: -180px;
  left: -200px;
  width: 400px;
  height: 360px;
  transform-style: preserve-3d;
  /* Position en cercle : rotateY angle, translateZ rayon, contre-rotation pour rester face caméra */
  transform: rotateY(var(--angle)) translateZ(440px);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.orbit-card-face {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(13, 13, 16, 0.06);
  border-radius: 18px;
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 30px 60px -20px rgba(13, 13, 16, 0.14);
  /* Counter-rotation pour que la face reste lisible à toute orbit position */
  transform: rotateY(0deg);
  transition: box-shadow 0.4s, border-color 0.4s, transform 0.4s;
}
/* Face arrière (dos vu de derrière) — opacity réduite pour suggérer la profondeur */
.orbit-card[data-back="1"] .orbit-card-face {
  opacity: 0.35;
  filter: blur(0.5px) saturate(0.7);
}
.orbit-card[data-side="1"] .orbit-card-face {
  opacity: 0.78;
}
.orbit-card[data-front="1"] .orbit-card-face {
  opacity: 1;
  border-color: rgba(246, 183, 44, 0.42);
  box-shadow: 0 40px 80px -20px rgba(13, 13, 16, 0.2), 0 0 0 1px rgba(246, 183, 44, 0.12);
}
.orbit-card:hover .orbit-card-face {
  border-color: rgba(246, 183, 44, 0.55);
  transform: translateZ(20px);
}

.orbit-card-num {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 84px;
  line-height: 1;
  color: rgba(246, 183, 44, 0.35);
  letter-spacing: -0.04em;
  margin: 0 0 12px;
}
.orbit-card h3 {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 26px;
  color: var(--fx-ink, #0d0d10);
  margin: 0 0 12px;
  letter-spacing: -0.01em;
  line-height: 1.18;
}
.orbit-card p {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(13, 13, 16, 0.74);
  margin: 0;
}
.orbit-card-line {
  display: block;
  width: 40px;
  height: 1px;
  background: var(--fx-gold, #f6b72c);
  margin-top: 18px;
}

/* Ombre par card projetée sous (ajoute du grounding) */
.orbit-card-shadow {
  position: absolute;
  bottom: -30px;
  left: 50%;
  width: 70%;
  height: 12px;
  background: radial-gradient(ellipse, rgba(13, 13, 16, 0.25) 0%, transparent 70%);
  transform: translateX(-50%);
  filter: blur(6px);
  pointer-events: none;
  z-index: -1;
}

/* Controls : flèches + dots */
.orbit-controls {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 20px;
  z-index: 10;
}
.orbit-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(13, 13, 16, 0.18);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(8px);
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 26px;
  color: var(--fx-ink, #0d0d10);
  cursor: pointer;
  transition: background 0.3s, border-color 0.3s, transform 0.3s;
}
.orbit-arrow:hover {
  background: var(--fx-gold, #f6b72c);
  border-color: var(--fx-gold, #f6b72c);
  transform: scale(1.08);
}
.orbit-dots {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 0 4px;
}
.orbit-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 0;
  background: rgba(13, 13, 16, 0.2);
  cursor: pointer;
  padding: 0;
  transition: background 0.3s, transform 0.3s;
}
.orbit-dot.is-active {
  background: var(--fx-gold, #f6b72c);
  transform: scale(1.5);
}

@media (max-width: 880px) {
  .orbit-stage { height: 420px; }
  .orbit-card { width: 280px; height: 320px; top: -160px; left: -140px; transform: rotateY(var(--angle)) translateZ(300px); }
  .orbit-card-num { font-size: 60px; }
  .orbit-floor { width: 600px; }
}
@media (max-width: 560px) {
  .orbit-stage { height: 460px; }
  .orbit-card { width: 240px; height: 340px; top: -170px; left: -120px; transform: rotateY(var(--angle)) translateZ(220px); }
}
@media (prefers-reduced-motion: reduce) {
  .orbit-cradle { animation: none !important; transform: translate(-50%, -50%) rotateY(0deg) !important; }
  .orbit-card { transition: none !important; }
}

/* =========================================================
 *  [À-PROPOS] MÉDAILLON — refonte du lion reveal
 *  Cercle SVG tracé + 4 rayons radiaux animés + 4 verbes-actes en blason.
 *  Sequence orchestrée par JS quand entre dans viewport.
 * ========================================================= */
.solea-medallion {
  background: var(--fx-cream, #fbf8f2);
  position: relative;
  isolation: isolate;
}
.medallion-shell {
  position: relative;
  text-align: center;
}
.medallion-stage {
  position: relative;
  width: min(820px, 95vw);
  aspect-ratio: 1;
  margin: 56px auto 0;
}
.medallion-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
.medallion-svg .medallion-halo {
  opacity: 0;
  transition: opacity 0.9s cubic-bezier(0.65, 0, 0.35, 1) 0.4s;
}
.medallion-svg .medallion-ring,
.medallion-svg .medallion-ring-inner {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 1.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.medallion-svg .medallion-ring { transition-delay: 0.2s; }
.medallion-svg .medallion-ring-inner { transition-delay: 0.45s; }
.medallion-svg .medallion-ray {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 1.0s cubic-bezier(0.65, 0, 0.35, 1);
}
.medallion-svg .ray-NW { transition-delay: 0.7s; }
.medallion-svg .ray-NE { transition-delay: 0.85s; }
.medallion-svg .ray-SE { transition-delay: 1.0s; }
.medallion-svg .ray-SW { transition-delay: 1.15s; }
.medallion-svg .medallion-pin {
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.medallion-svg .pin-NW { transition-delay: 1.55s; }
.medallion-svg .pin-NE { transition-delay: 1.7s; }
.medallion-svg .pin-SE { transition-delay: 1.85s; }
.medallion-svg .pin-SW { transition-delay: 2.0s; }

.medallion-lion {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.92);
  width: 38%;
  height: 38%;
  object-fit: contain;
  z-index: 2;
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(0.65, 0, 0.35, 1) 0.5s, transform 1.4s cubic-bezier(0.65, 0, 0.35, 1) 0.5s;
  filter: drop-shadow(0 0 24px rgba(246, 183, 44, 0.3));
}

.medallion-verb {
  position: absolute;
  z-index: 3;
  width: 22%;
  max-width: 220px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.8s cubic-bezier(0.65, 0, 0.35, 1), transform 0.8s cubic-bezier(0.65, 0, 0.35, 1);
}
.medallion-verb.pos-NW { top: 8%;  left: 0;    text-align: right; transition-delay: 1.8s; }
.medallion-verb.pos-NE { top: 8%;  right: 0;   text-align: left;  transition-delay: 1.95s; }
.medallion-verb.pos-SE { bottom: 8%; right: 0; text-align: left;  transition-delay: 2.1s; }
.medallion-verb.pos-SW { bottom: 8%; left: 0;  text-align: right; transition-delay: 2.25s; }

.medallion-verb-roman {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 56px;
  line-height: 0.9;
  color: rgba(246, 183, 44, 0.5);
  letter-spacing: -0.03em;
  margin-bottom: 4px;
}
.medallion-verb h3 {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 26px;
  margin: 0 0 6px;
  color: var(--fx-ink, #0d0d10);
  letter-spacing: -0.005em;
  line-height: 1.1;
}
.medallion-verb p {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(13, 13, 16, 0.7);
  margin: 0;
}

/* État activé (ajouté par JS à l'entrée en viewport) */
.solea-medallion.is-active .medallion-halo                { opacity: 1; }
.solea-medallion.is-active .medallion-ring,
.solea-medallion.is-active .medallion-ring-inner          { stroke-dashoffset: 0; }
.solea-medallion.is-active .medallion-ray                 { stroke-dashoffset: 0; }
.solea-medallion.is-active .medallion-pin                 { opacity: 1; }
.solea-medallion.is-active .medallion-lion                { opacity: 0.65; transform: translate(-50%, -50%) scale(1); }
.solea-medallion.is-active .medallion-verb                { opacity: 1; transform: translateY(0); }

/* V3 — Cercle externe en rotation lente + halo pulsant + glow lion progressif */
.solea-medallion.is-active .medallion-ring {
  animation: medallionRingRotate 90s linear infinite 2.5s;
  transform-origin: 400px 400px;
}
@keyframes medallionRingRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.solea-medallion.is-active .medallion-halo {
  animation: medallionHaloPulse 8s ease-in-out infinite 2.5s;
  transform-origin: 400px 400px;
}
@keyframes medallionHaloPulse {
  0%, 100% { opacity: 0.85; transform: scale(1);    filter: hue-rotate(0deg); }
  50%      { opacity: 1.0;  transform: scale(1.12); filter: hue-rotate(8deg); }
}
.solea-medallion.is-active .medallion-lion {
  animation: medallionLionBreathe 5s ease-in-out infinite 2.8s;
  filter: drop-shadow(0 0 24px rgba(246, 183, 44, 0.3));
}
@keyframes medallionLionBreathe {
  0%, 100% { filter: drop-shadow(0 0 24px rgba(246, 183, 44, 0.3)); opacity: 0.55; }
  50%      { filter: drop-shadow(0 0 48px rgba(246, 183, 44, 0.6)); opacity: 0.75; }
}

/* Particules or orbitales — créées en JS, conteneur fixe */
.medallion-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 1.2s ease 2s;
}
.solea-medallion.is-active .medallion-particles { opacity: 1; }
.medallion-particles canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.medallion-cite {
  margin: 56px auto 0;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 16px;
  color: var(--fx-gold, #f6b72c);
  letter-spacing: 0.02em;
}

@media (max-width: 720px) {
  .medallion-stage { width: 100%; aspect-ratio: 1.4 / 1; }
  .medallion-verb { width: 42%; max-width: none; }
  .medallion-verb-roman { font-size: 40px; }
  .medallion-verb h3 { font-size: 20px; }
  .medallion-verb p { font-size: 12px; }
}

/* =========================================================
 *  [ANCIEN ROLODEX 3D] — Désactivé. Conservé pour compat.
 * ========================================================= */
.solea-rolodex {
  background: linear-gradient(180deg, var(--fx-warm, #f6efe2) 0%, var(--fx-cream, #fbf8f2) 100%);
  overflow: hidden;
  perspective: 1800px;
  perspective-origin: 50% 50%;
}
.rolodex-stage {
  position: relative;
  width: min(720px, 90%);
  height: 460px;
  margin: 56px auto 0;
  perspective: 1400px;
  transform-style: preserve-3d;
}
.rolodex-cylinder {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(var(--rolodex-angle, 0deg));
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.rolodex-face {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: var(--fx-cream, #fbf8f2);
  border: 1px solid rgba(13, 13, 16, 0.06);
  border-radius: 18px;
  padding: clamp(36px, 6vw, 64px);
  backface-visibility: hidden;
  transform-origin: center center;
  /* Disposition des 6 faces autour d'un axe X — 60deg apart */
  transform: rotateX(calc(var(--i) * 60deg)) translateZ(380px);
  box-shadow: 0 30px 60px -30px rgba(13, 13, 16, 0.18);
}
.rolodex-face-num {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 64px;
  line-height: 1;
  color: rgba(246, 183, 44, 0.45);
  margin: 0 0 18px;
  letter-spacing: -0.02em;
}
.rolodex-face h3 {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(26px, 3vw, 36px);
  margin: 0 0 14px;
  color: var(--fx-ink, #0d0d10);
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.rolodex-face p {
  font-size: 16px;
  line-height: 1.65;
  color: rgba(13, 13, 16, 0.74);
  margin: 0;
  max-width: 56ch;
}
.rolodex-face-line {
  position: absolute;
  bottom: 32px;
  left: clamp(36px, 6vw, 64px);
  width: 48px;
  height: 1px;
  background: var(--fx-gold, #f6b72c);
}
.rolodex-indicator {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 32px;
}
.rolodex-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(13, 13, 16, 0.18);
  cursor: pointer;
  transition: background 0.3s, transform 0.3s;
}
.rolodex-dot.is-active {
  background: var(--fx-gold, #f6b72c);
  transform: scale(1.3);
}

@media (max-width: 720px) {
  .rolodex-stage { height: 540px; }
  .rolodex-face { transform: rotateX(calc(var(--i) * 60deg)) translateZ(260px); }
}

/* =========================================================
 *  [À-PROPOS] LION FILIGRANE RÉVÉLÉ
 *  Lion stylisé en filigrane or au centre.
 *  4 valeurs autour, position NW/NE/SE/SW. S'animent en blason.
 * ========================================================= */
.solea-lion-reveal {
  background: var(--fx-cream, #fbf8f2);
  position: relative;
  isolation: isolate;
}
.lion-reveal-shell {
  position: relative;
  text-align: center;
}
.lion-reveal-eyebrow {
  margin-bottom: 32px;
}
.lion-reveal-stage {
  position: relative;
  width: min(720px, 95%);
  margin: 0 auto;
  aspect-ratio: 1.2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0;
  align-items: center;
}
.lion-reveal-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  width: 320px;
  height: 320px;
  max-width: 60%;
  max-height: 60%;
  opacity: 0.12;
  filter: hue-rotate(0deg) saturate(1.2);
  pointer-events: none;
  z-index: 0;
  animation: lionBreathe 8s ease-in-out infinite;
}
@keyframes lionBreathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.12; }
  50%      { transform: translate(-50%, -50%) scale(1.02); opacity: 0.16; }
}
.lion-reveal-value {
  position: relative;
  z-index: 1;
  padding: 24px;
}
.lion-reveal-value.pos-NW { text-align: right;  padding-right: 56px; }
.lion-reveal-value.pos-NE { text-align: left;   padding-left: 56px; }
.lion-reveal-value.pos-SE { text-align: left;   padding-left: 56px; }
.lion-reveal-value.pos-SW { text-align: right;  padding-right: 56px; }
.lion-reveal-value h3 {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 32px;
  color: var(--fx-ink, #0d0d10);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.lion-reveal-value p {
  font-size: 14px;
  color: rgba(13, 13, 16, 0.7);
  margin: 0;
  line-height: 1.5;
  max-width: 280px;
  display: inline-block;
}
.lion-reveal-value.pos-NW p,
.lion-reveal-value.pos-SW p { margin-left: auto; text-align: right; }
.lion-reveal-cite {
  margin: 56px auto 0;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 15px;
  color: var(--fx-gold, #f6b72c);
  letter-spacing: 0.04em;
}

@media (max-width: 720px) {
  .lion-reveal-stage { grid-template-columns: 1fr; }
  .lion-reveal-mark { max-width: 50%; max-height: 40%; }
  .lion-reveal-value { text-align: center !important; padding: 16px !important; }
  .lion-reveal-value p { margin: 0 auto !important; text-align: center !important; }
}

/* =========================================================
 *  [CONTACT] RÉVÉLATION SÉQUENTIELLE DU FORM
 *  Chaque field-row apparaît avec un décalage croissant.
 *  Pure CSS — pas de JS, c'est l'arrivée qui guide l'œil.
 * ========================================================= */
body.page-contact .solea-contact-form .form-row,
body.page-contact .solea-contact-form .field-full {
  opacity: 0;
  transform: translateY(14px);
  animation: contactFieldIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
body.page-contact .solea-contact-form .form-row:nth-of-type(1) { animation-delay: 0.3s; }
body.page-contact .solea-contact-form .form-row:nth-of-type(2) { animation-delay: 0.42s; }
body.page-contact .solea-contact-form .form-row:nth-of-type(3) { animation-delay: 0.54s; }
body.page-contact .solea-contact-form .form-row:nth-of-type(4) { animation-delay: 0.66s; }
body.page-contact .solea-contact-form .form-row:nth-of-type(5) { animation-delay: 0.78s; }
body.page-contact .solea-contact-form .field-full:nth-of-type(1) { animation-delay: 0.9s; }
body.page-contact .solea-contact-form .field-full:nth-of-type(2) { animation-delay: 1.02s; }
body.page-contact .solea-contact-form .field-full:nth-of-type(3) { animation-delay: 1.14s; }

@keyframes contactFieldIn {
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .solea-compass-svg .ring-outer,
  .solea-compass-svg .compass-needle,
  .lion-reveal-mark { animation: none !important; }
  .narrative-acte { transform: none !important; }
  .rolodex-cylinder { transform: none !important; }
  .rolodex-face { transform: rotateX(calc(var(--i) * 0deg)) translateZ(0) !important; position: relative !important; }
  body.page-contact .solea-contact-form .form-row,
  body.page-contact .solea-contact-form .field-full { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* =========================================================
 *  FILTERS SVG GLOBAUX (à injecter une seule fois dans le DOM)
 *  Référencés par les CSS filter: url(#...)
 * ========================================================= */
.solea-svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* =========================================================
 *  REDUCED MOTION — tout désactivé
 * ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .solea-frise-3d-track       { transform: translate(-50%, -50%) !important; transition: none !important; }
  .solea-frise-3d-item        { transform: none !important; }
  .fx-curtain-reveal::before,
  .fx-curtain-reveal::after   { transform: translateX(-101%) !important; transition: none !important; }
  .solea-drift,
  .solea-cursor-field,
  .solea-gen-grid             { display: none !important; }
  .fx-hero.cinema::before,
  .fx-hero.cinema::after      { transform: scaleY(1) !important; transition: none !important; }
  [data-fx^="reveal-"]        { opacity: 1 !important; transform: none !important; clip-path: none !important; filter: none !important; }
  body.page-home .hero-luxe-media img,
  body.page-particuliers .hero-luxe-media,
  body.page-professionnels .hero-luxe::after,
  body.page-a-propos .hero-luxe-media img,
  body.page-contact .hero-luxe-media { animation: none !important; opacity: 1 !important; transform: none !important; }
  body.page-professionnels .hero-luxe::after { display: none !important; }
  .solea-constellation .const-link { animation: none !important; }
}