/* ==========================================================================
   LE CHEMIN DU LEAN (v2) : composition par-dessus une scene 3D fixe.

   Tout ce qui suit ne s'applique que si lean-path.js a pu demarrer WebGL
   (classe `has-lean-path` posee sur <html>). Sans elle, la page reste
   strictement celle de style.css : sections pleines, texture CSS, SVG.
   ========================================================================== */

.lean-path-canvas { display: none; }
.path-rail { display: none; }

.has-lean-path {
  --panel-w: 600px;
  --panel-w-wide: 780px;
}

.has-lean-path body { background: var(--bg-dark); }

.has-lean-path .lean-path-canvas {
  display: block;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.has-lean-path main { position: relative; z-index: 1; }

/* Les sections deviennent des etapes : transparentes, hautes d'un ecran,
   le contenu dans un panneau a gauche ou a droite, le decor 3D de l'autre cote. */
.has-lean-path .section--dark,
.has-lean-path .section--light {
  background: transparent;
  border-top: none;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 14vh 0;
  overflow: visible;
}
.has-lean-path .hero { min-height: 100vh; padding: 16vh 0 14vh; }
.has-lean-path .grid-texture,
.has-lean-path .hero-deco { display: none; }

.has-lean-path .section--dark > .container,
.has-lean-path .section--light > .container {
  width: 100%;
  max-width: var(--panel-w);
  margin: 0;
  padding: var(--space-5);
}
.has-lean-path .offre > .container,
.has-lean-path .diagnostic > .container,
.has-lean-path .pourquoi > .container,
.has-lean-path .contact > .container {
  max-width: var(--panel-w-wide);
}

/* Position laterale : marge calee sur la grille de 1120px du site */
.has-lean-path .path-left > .container {
  margin-left: max(var(--space-4), calc((100% - var(--max-width)) / 2));
}
.has-lean-path .path-right > .container {
  margin-left: auto;
  margin-right: max(var(--space-4), calc((100% - var(--max-width)) / 2));
}
.has-lean-path .path-center > .container { margin: 0 auto; }

/* Panneau sombre : verre fume, le decor reste devinable derriere */
.has-lean-path .section--dark > .container {
  background: rgba(22, 24, 28, 0.74);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(244, 242, 239, 0.08);
  border-left: 2px solid var(--accent);
}
/* Le hero reste sans cadre : le texte flotte dans la scene */
.has-lean-path .hero > .container {
  max-width: 700px;
  background: transparent;
  border: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  padding-left: 0;
  padding-right: 0;
}
.has-lean-path .hero h1 { font-size: clamp(2.2rem, 4.3vw, 3.9rem); }
.has-lean-path .hero h1,
.has-lean-path .hero-sub { text-shadow: 0 2px 24px rgba(22, 24, 28, 0.9); }

/* Panneau clair : plaque opaque biseautee, comme les cartes du site */
.has-lean-path .section--light > .container {
  background: var(--bg-light);
  clip-path: polygon(
    0 0, calc(100% - var(--bevel)) 0, 100% var(--bevel),
    100% 100%, var(--bevel) 100%, 0 calc(100% - var(--bevel))
  );
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

/* Grilles internes resserrees pour tenir dans un panneau */
.has-lean-path .bases-grid { grid-template-columns: 1fr; gap: var(--space-4); }
.has-lean-path .bases-5s { max-width: none; }
.has-lean-path .methode-frise { grid-template-columns: repeat(2, 1fr); }
.has-lean-path .methode-frise::before { display: none; }
.has-lean-path .qui-je-suis__grid { grid-template-columns: 180px 1fr; gap: var(--space-4); }
.has-lean-path .pourquoi-grid { grid-template-columns: repeat(2, 1fr); }
.has-lean-path .contact-grid { grid-template-columns: 1fr 1.4fr; }

/* Bandeau deroulant : bande translucide qui laisse passer la scene */
.has-lean-path .marquee {
  position: relative;
  z-index: 1;
  background: rgba(28, 31, 36, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.has-lean-path .footer { position: relative; z-index: 1; }

/* Rail de progression : un point par etape, a droite de l'ecran */
.has-lean-path .path-rail {
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
}
.path-rail__dot {
  position: relative;
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(244, 242, 239, 0.45);
  background: transparent;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.path-rail__dot::after {
  content: attr(data-label);
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-on-dark-muted);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
  pointer-events: none;
}
.path-rail__dot:hover::after,
.path-rail__dot.is-active::after { opacity: 1; }
.path-rail__dot.is-active {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.3);
}
.path-rail__dot.is-active::after { color: var(--text-on-dark); }

/* Indication de defilement sous le hero */
.has-lean-path .hero-cta { position: relative; }
.has-lean-path .hero-cta::after {
  content: 'Faites défiler pour avancer sur le chemin';
  position: absolute;
  left: 0;
  top: calc(100% + var(--space-5));
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-on-dark-muted);
  padding-left: 26px;
  animation: pathHint 2.2s var(--ease) infinite;
}
.has-lean-path .hero-cta::before {
  content: '';
  position: absolute;
  left: 4px;
  top: calc(100% + var(--space-5) + 2px);
  width: 8px;
  height: 8px;
  border-right: 1px solid var(--accent);
  border-bottom: 1px solid var(--accent);
  transform: rotate(45deg);
  animation: pathHint 2.2s var(--ease) infinite;
}
@keyframes pathHint {
  0%, 100% { opacity: 0.45; transform: translateY(0) rotate(var(--r, 0deg)); }
  50% { opacity: 1; transform: translateY(4px) rotate(var(--r, 0deg)); }
}
.has-lean-path .hero-cta::before { --r: 45deg; }

@media (max-width: 1180px) {
  .has-lean-path { --panel-w: 540px; --panel-w-wide: 620px; }
  .has-lean-path .hero > .container { max-width: 60%; }
  .has-lean-path .pourquoi-grid { grid-template-columns: 1fr; }
  .has-lean-path .contact-grid { grid-template-columns: 1fr; }
  /* sur un ecran etroit, le libelle du rail chevaucherait le panneau : survol seulement */
  .path-rail__dot.is-active::after { opacity: 0; }
  .path-rail__dot:hover::after { opacity: 1; }
}