/* =========================================================
 * Soléa — Signature Layer
 *
 * La couche qui pousse au-delà du "premium correct" vers
 * la signature unique. Composants livrés :
 *
 *   1. PALETTE STRICTE : toggle body.palette-strict pour
 *      revenir au noir/blanc/or pur (sans crème, sans warm)
 *   2. SCROLL PROGRESS GOLD BAR
 *   3. ANIMATED SVG LOGO PATH-DRAWING (S of Soléa)
 *   4. WEBGL HERO PARTICLE FIELD (Three.js)
 *   5. SCROLL-DRIVEN HOUSE OUTLINE (construction by light)
 *   6. VIEW TRANSITIONS for inter-page navigation
 *   7. AUDIO FEEDBACK SUBTLE
 *   8. PAGE PROGRESS INDICATOR
 *
 * Tous activables/désactivables individuellement.
 * ========================================================= */

/* =========================================================
 *  1. PALETTE STRICTE — Toggle via body.palette-strict
 *     Remappe les tokens warm vers blanc/noir/or pur.
 * ========================================================= */
body.palette-strict {
  --fx-cream:   #ffffff;
  --fx-warm:    #f6f6f6;
  --fx-ink:     #000000;
}
body.palette-strict .fx-num-card,
body.palette-strict .fx-stat,
body.palette-strict .fx-trust-card,
body.palette-strict .pillar,
body.palette-strict .credentials-list li,
body.palette-strict .city-card,
body.palette-strict .city-service-card,
body.palette-strict .service-block,
body.palette-strict .cfg-tile.selected,
body.palette-strict .cfg-option:has(input:checked) {
  background: var(--light) !important;
}
body.palette-strict .fx-pullquote,
body.palette-strict .fx-diagonal,
body.palette-strict .cfg-budget-card,
body.palette-strict .fx-three-card.highlight,
body.palette-strict .fx-compare-card-good.highlight {
  background: var(--black) !important;
  color: #fff !important;
}
body.palette-strict .fx-three-in-one,
body.palette-strict .fx-single-entity {
  background: var(--white) !important;
}

/* =========================================================
 *  2. SCROLL PROGRESS GOLD BAR
 *     Barre or progressive en haut, indique progression page.
 * ========================================================= */
.solea-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(246, 183, 44, 0.12);
  z-index: 9998;
  pointer-events: none;
}
.solea-scroll-progress::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--fx-gold, #f6b72c) 0%, #f9c84d 100%);
  transform-origin: left;
  transform: scaleX(var(--scroll-progress, 0));
  transition: transform 0.05s linear;
  box-shadow: 0 0 12px rgba(246, 183, 44, 0.55);
}
@supports (animation-timeline: scroll()) {
  .solea-scroll-progress::after {
    animation: solea-scroll-anim linear;
    animation-timeline: scroll(root);
    transform: scaleX(0);
  }
  @keyframes solea-scroll-anim {
    to { transform: scaleX(1); }
  }
}

/* =========================================================
 *  3. ANIMATED LOGO PATH-DRAWING — Loading screen v2
 *     Remplace le "S" simple par un dessin animé en or.
 * ========================================================= */
.solea-loader-mark.signature {
  background: transparent;
  box-shadow: none;
  width: 120px;
  height: 120px;
  animation: none;
}
.solea-loader-mark.signature::before,
.solea-loader-mark.signature::after {
  display: none;
}
.solea-loader-svg {
  width: 100%;
  height: 100%;
  display: block;
}
.solea-loader-svg .draw {
  fill: none;
  stroke: var(--fx-gold, #f6b72c);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: drawPath 2.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  filter: drop-shadow(0 0 12px rgba(246, 183, 44, 0.55));
}
.solea-loader-svg .fill-after {
  opacity: 0;
  animation: fillIn 0.8s ease-out 1.8s forwards;
}
@keyframes drawPath {
  0%   { stroke-dashoffset: 600; }
  100% { stroke-dashoffset: 0; }
}
@keyframes fillIn {
  to { opacity: 1; }
}

/* =========================================================
 *  4. WEBGL HERO CANVAS
 *     Container pour Three.js particle field.
 *     Le canvas est créé par signature.js, attaché à .hero-cinematic
 * ========================================================= */
.hero-webgl-canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.85;
}
.hero-cinematic .hero-luxe-media {
  z-index: 1;
}
.hero-cinematic .hero-luxe-overlay {
  z-index: 3;
}

/* =========================================================
 *  5. SCROLL-DRIVEN HOUSE OUTLINE — "Construction by light"
 *     SVG fin tracé doré qui se dessine en fonction du scroll.
 *     Fixé en bas du viewport sur certaines pages.
 * ========================================================= */
.solea-house-trace {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 140px;
  height: 100px;
  z-index: 90;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.solea-house-trace.is-visible { opacity: 1; }
.solea-house-trace svg { width: 100%; height: 100%; display: block; }
.solea-house-trace path {
  fill: none;
  stroke: var(--fx-gold, #f6b72c);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  pathLength: 1;
  stroke-dashoffset: calc(1 - var(--scroll-progress, 0));
  filter: drop-shadow(0 0 4px rgba(246, 183, 44, 0.45));
}
.solea-house-trace .label {
  position: absolute;
  bottom: -24px;
  right: 0;
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(13, 13, 16, 0.5);
  white-space: nowrap;
}
body.palette-strict .solea-house-trace .label { color: rgba(0, 0, 0, 0.5); }

@supports (animation-timeline: scroll()) {
  .solea-house-trace path {
    animation: drawHouse linear;
    animation-timeline: scroll(root);
    stroke-dashoffset: 1;
  }
  @keyframes drawHouse {
    to { stroke-dashoffset: 0; }
  }
}

/* =========================================================
 *  6. VIEW TRANSITIONS API
 *     Transitions fluides entre pages (Chrome/Edge/Safari TP).
 * ========================================================= */
@view-transition {
  navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.45s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
::view-transition-old(root) {
  animation-name: vt-out;
}
::view-transition-new(root) {
  animation-name: vt-in;
}
@keyframes vt-out {
  to { opacity: 0; transform: translate3d(0, -12px, 0); }
}
@keyframes vt-in {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
}

/* Named transitions pour éléments persistants */
.topbar { view-transition-name: solea-topbar; }
.footer { view-transition-name: solea-footer; }
::view-transition-old(solea-topbar),
::view-transition-new(solea-topbar),
::view-transition-old(solea-footer),
::view-transition-new(solea-footer) {
  animation: none;
  mix-blend-mode: normal;
}

/* =========================================================
 *  7. AUDIO TOGGLE BUTTON — Runway signature (refondu)
 *     Bas-gauche, identitaire, 5 barres ondulantes, label "Son",
 *     pulse halo or quand drone actif.
 * ========================================================= */
.solea-audio-toggle {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 95;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px 9px 13px;
  border-radius: 999px;
  border: 1px solid rgba(13, 13, 16, 0.16);
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: var(--sans, "Montserrat", sans-serif);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(13, 13, 16, 0.72);
  cursor: pointer;
  pointer-events: auto;
  isolation: isolate;
  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    color 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.solea-audio-toggle > * { position: relative; z-index: 1; }
.solea-audio-toggle:hover {
  transform: translateY(-1px);
  border-color: var(--fx-gold, #f6b72c);
  color: var(--fx-ink, #0d0d10);
}
.solea-audio-toggle:focus-visible {
  outline: 1px solid var(--fx-gold, #f6b72c);
  outline-offset: 3px;
}

.solea-audio-toggle__wave {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  width: 18px;
  height: 14px;
}
.solea-audio-toggle__wave > span {
  width: 2px;
  background: currentColor;
  border-radius: 1px;
  height: 30%;
  transform-origin: bottom;
  transition: height 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.solea-audio-toggle.is-off .solea-audio-toggle__wave > span:nth-child(1) { height: 30%; }
.solea-audio-toggle.is-off .solea-audio-toggle__wave > span:nth-child(2) { height: 20%; }
.solea-audio-toggle.is-off .solea-audio-toggle__wave > span:nth-child(3) { height: 40%; }
.solea-audio-toggle.is-off .solea-audio-toggle__wave > span:nth-child(4) { height: 25%; }
.solea-audio-toggle.is-off .solea-audio-toggle__wave > span:nth-child(5) { height: 35%; }

.solea-audio-toggle.is-on .solea-audio-toggle__wave > span { background: var(--fx-gold, #f6b72c); }
.solea-audio-toggle.is-on.is-droning .solea-audio-toggle__wave > span {
  animation: soleaWaveBreath 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.solea-audio-toggle.is-on.is-droning .solea-audio-toggle__wave > span:nth-child(1) { animation-delay: 0.00s; }
.solea-audio-toggle.is-on.is-droning .solea-audio-toggle__wave > span:nth-child(2) { animation-delay: 0.18s; }
.solea-audio-toggle.is-on.is-droning .solea-audio-toggle__wave > span:nth-child(3) { animation-delay: 0.36s; }
.solea-audio-toggle.is-on.is-droning .solea-audio-toggle__wave > span:nth-child(4) { animation-delay: 0.54s; }
.solea-audio-toggle.is-on.is-droning .solea-audio-toggle__wave > span:nth-child(5) { animation-delay: 0.72s; }
@keyframes soleaWaveBreath {
  0%, 100% { height: 25%; }
  50%      { height: 75%; }
}

.solea-audio-toggle__pulse {
  position: absolute;
  inset: -3px;
  border-radius: 999px;
  border: 1px solid rgba(246, 183, 44, 0);
  pointer-events: none;
  z-index: 0;
  transition: border-color 0.6s ease;
}
.solea-audio-toggle.is-on.is-droning .solea-audio-toggle__pulse {
  border-color: rgba(246, 183, 44, 0.35);
  animation: soleaPulseRing 4.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes soleaPulseRing {
  0%, 100% { transform: scale(1);    opacity: 0.55; }
  50%      { transform: scale(1.04); opacity: 0.18; }
}

.solea-audio-toggle.is-on {
  background: var(--fx-ink, #0d0d10);
  border-color: var(--fx-ink, #0d0d10);
  color: var(--fx-cream, #fbf8f2);
}
.solea-audio-toggle__label { display: inline-block; line-height: 1; }

body.palette-strict .solea-audio-toggle { background: #fff; border-color: #000; color: #000; }
body.palette-strict .solea-audio-toggle.is-on { background: #000; color: #fff; }
body.palette-strict .solea-audio-toggle.is-on .solea-audio-toggle__wave > span { background: var(--fx-gold, #f6b72c); }

/* =========================================================
 *  8. GENERATIVE GRID BACKGROUND
 *     Lignes architecturales très fines, animées au scroll
 * ========================================================= */
.solea-grid-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    linear-gradient(rgba(246, 183, 44, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(246, 183, 44, 0.025) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at center, black 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 75%);
}

/* =========================================================
 *  9. EDITORIAL CURSOR DOT (visible désactivable)
 *     Le curseur custom de premium-fx est conservé.
 *     Ajout : une "trace" douce qui suit avec décalage.
 * ========================================================= */
.fx-cursor-trail {
  position: fixed;
  top: 0; left: 0;
  width: 6px; height: 6px;
  background: var(--fx-gold, #f6b72c);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity .3s;
}
.fx-cursor-trail.is-on { opacity: 0.7; }
@media (pointer: coarse) { .fx-cursor-trail { display: none !important; } }

/* =========================================================
 *  10. SECTION FRAME — Cadre or fin pour sections importantes
 * ========================================================= */
.fx-frame-section {
  position: relative;
  isolation: isolate;
}
.fx-frame-section::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(246, 183, 44, 0.22);
  border-radius: 8px;
  pointer-events: none;
  z-index: 0;
}

/* =========================================================
 *  Reduced motion / palette accessibility
 * ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .solea-loader-svg .draw { animation-duration: 0.001ms !important; stroke-dashoffset: 0 !important; }
  .solea-loader-svg .fill-after { opacity: 1 !important; }
  .hero-webgl-canvas { display: none !important; }
  .solea-house-trace path { stroke-dashoffset: 0 !important; }
}
@media (max-width: 720px) {
  .solea-audio-toggle, .solea-house-trace { display: none; }
}