/* =========================================================================
   LEAN SKIPPER — Smart Landing Page
   Composition : hero canvas scroll-driven, triade, OS, diagnostic, pédagogie.
   ========================================================================= */

/* ---------- NAVIGATION --------------------------------------------------- */
.ls-nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-4) var(--space-6);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--duration-base) var(--ease-nautical),
              border-color var(--duration-base) var(--ease-nautical),
              backdrop-filter var(--duration-base) var(--ease-nautical);
}
.ls-nav.is-docked {
  background: var(--veil-medium);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--border-subtle);
}

.ls-brand { display: flex; align-items: center; gap: var(--space-3); margin-inline-end: auto; }
.ls-brand img { width: 40px; height: 40px; }
.ls-brand-name {
  font: var(--text-mono-md);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wordmark);
  color: var(--text-primary);
  line-height: 1.15;
}
.ls-brand-tagline {
  display: block;
  font: var(--text-mono-sm);
  font-size: 0.625rem;
  letter-spacing: var(--tracking-label);
  color: var(--text-muted);
}

.ls-nav-links { display: flex; align-items: center; gap: var(--space-6); }
.ls-nav-links a {
  font: var(--text-mono-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-secondary);
}
.ls-nav-links a:hover { color: var(--accent-primary); }

/* Sous 1000 px la barre ne tient plus les six entrées : elles passent dans un
   panneau déplié par le bouton menu. Auparavant elles disparaissaient purement
   et simplement — acceptable tant qu'un bouton d'action doublait la barre,
   plus du tout depuis qu'il a été retiré. */
@media (max-width: 1000px) {
  .ls-nav-links {
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    z-index: 15;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-2);
    border-block-end: 1px solid var(--border-subtle);
    background: var(--veil-strong, oklch(13% 0.012 262 / 0.96));
    backdrop-filter: blur(14px) saturate(1.2);
    display: none;
  }
  .ls-nav[data-nav-open='true'] .ls-nav-links { display: flex; }
  .ls-nav-links a {
    padding: var(--space-4) var(--space-3);
    border-radius: var(--radius-sm);
  }
  .ls-nav-links a:hover { background: var(--surface-card); }
}

/* Sélecteur de langue — un seul jeton (globe + langue courante) qui déplie
   sa liste. Le survol ouvre au pointeur, `:focus-within` ouvre au clavier,
   et `aria-expanded` couvre le tap sur mobile (piloté en JS). */
.ls-lang { position: relative; }
.ls-lang-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font: var(--text-mono-sm);
  letter-spacing: var(--tracking-label);
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-nautical),
              border-color var(--duration-fast) var(--ease-nautical);
}
.ls-lang-toggle svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}
.ls-lang:hover .ls-lang-toggle,
.ls-lang-toggle:hover,
.ls-lang-toggle:focus-visible { color: var(--accent-primary); border-color: var(--border-gold); }

.ls-lang-list {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: calc(100% + var(--space-2));
  z-index: 20;
  min-width: 10rem;
  margin: 0;
  padding: var(--space-2);
  list-style: none;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-panel);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: var(--shadow-card);
  /* Replié sans quitter l'arbre d'accessibilité tant que le focus peut y entrer :
     `visibility` coupe la tabulation, la transition garde l'ouverture douce. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--duration-fast) var(--ease-nautical),
              transform var(--duration-fast) var(--ease-nautical),
              visibility var(--duration-fast) var(--ease-nautical);
}
.ls-lang:hover .ls-lang-list,
.ls-lang:focus-within .ls-lang-list,
.ls-lang-toggle[aria-expanded='true'] + .ls-lang-list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.ls-lang-list button {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  font: var(--text-body-sm);
  text-align: start;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-nautical),
              background-color var(--duration-fast) var(--ease-nautical);
}
.ls-lang-list button:hover { color: var(--text-primary); background: var(--surface-card); }
.ls-lang-list button[aria-current='true'] { color: var(--accent-primary); }

/* Bouton menu — n'apparaît qu'en dessous du seuil où la barre se replie. */
.ls-nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 40px;
  height: 40px;
  padding: 0 9px;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-nautical);
}
.ls-nav-burger span {
  height: 1.5px;
  background: var(--text-secondary);
  transition: background-color var(--duration-fast) var(--ease-nautical);
}
.ls-nav-burger:hover { border-color: var(--border-gold); }
.ls-nav-burger:hover span { background: var(--accent-primary); }
/* Déclaré ici, après la règle de base : à spécificité égale c'est l'ordre
   d'apparition qui tranche, et un `display: flex` posé plus haut dans le
   fichier serait repris par le `display: none` ci-dessus. */
@media (max-width: 1000px) { .ls-nav-burger { display: flex; } }

/* ---------- HERO : CANVAS SCROLL-DRIVEN ---------------------------------- */
/* La scène occupe plusieurs hauteurs d'écran ; le canvas y reste collé. */
.ls-hero {
  position: relative;
  height: var(--hero-scroll-height, 420vh);
}

.ls-hero-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
}

/* Le canvas remplit le viewport, en fond */
.ls-hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background-color: var(--ink-950);
}

/* Voile de lisibilité. Son opacité suit le défilement (pilotée en JS) : plein
   tant que le texte est là, il se lève ensuite pour laisser le blason seul. */
.ls-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  will-change: opacity;
  background:
    radial-gradient(ellipse 76% 60% at 50% 44%,
      var(--veil-medium) 0%,
      var(--veil-strong) 62%,
      var(--veil-strong) 100%);
}

/* Fondu permanent vers le fond de page : la scène se referme proprement. */
.ls-hero-sticky::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    var(--veil-soft) 0%, transparent 22%,
    transparent 60%, var(--veil-strong) 100%);
}

/* Contenu du hero, par-dessus */
.ls-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: var(--space-24) var(--space-6) var(--space-16);
  max-width: 940px;
  width: 100%;
}

.ls-hero h1 {
  font: var(--text-display-xl);
  letter-spacing: -0.015em;
  margin-bottom: var(--space-5);
  text-wrap: balance;
}
.ls-hero-triad {
  display: block;
  font: var(--text-mono-md);
  text-transform: uppercase;
  letter-spacing: 0.34em;
  color: var(--accent-primary);
  margin-bottom: var(--space-6);
}
.ls-hero-lede {
  font: var(--text-body-lg);
  color: var(--text-secondary);
  max-width: 60ch;
  margin-inline: auto;
  text-wrap: pretty;
}
.ls-hero-actions {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  justify-content: center;
  margin-top: var(--space-8);
}
.ls-hero-proof {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-8);
}

/* Les couches du hero s'estompent au fil du défilement (piloté en JS) */
.ls-hero-layer { transition: none; will-change: opacity, transform; }

/* Indicateur de défilement */
.ls-scroll-cue {
  position: absolute;
  z-index: 2;
  inset-block-end: var(--space-8);
  inset-inline: 0;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  font: var(--text-mono-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-muted);
  pointer-events: none;
}
.ls-scroll-cue span::after {
  content: '';
  display: block;
  width: 1px; height: 40px;
  margin: var(--space-3) auto 0;
  background: linear-gradient(to bottom, var(--gold-500), transparent);
  animation: ls-cue 2.4s var(--ease-nautical) infinite;
  transform-origin: top;
}
@keyframes ls-cue {
  0%   { transform: scaleY(0); opacity: 0; }
  40%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ls-scroll-cue span::after { animation: none; opacity: 0.6; }
}

/* Barre de progression du chargement des images */
.ls-frame-progress {
  position: absolute;
  z-index: 3;
  inset-block-end: 0;
  inset-inline-start: 0;
  height: 2px;
  width: 0;
  background: var(--metal-gold);
  transition: width var(--duration-base) linear, opacity var(--duration-slow);
}

/* ---------- ÉCRANS ÉTROITS ET COURTS ------------------------------------- */
/* Le hero doit tenir dans un viewport de téléphone sans que le contenu ne
   déborde sous le voile : on resserre la barre, le titre et les marges. */
@media (max-width: 720px) {
  .ls-nav { padding: var(--space-3) var(--space-4); gap: var(--space-2); }
  .ls-brand img { width: 32px; height: 32px; }
  .ls-brand-name, .ls-brand-tagline { display: none; }
  .ls-lang-toggle { padding: var(--space-1) var(--space-2); font-size: 0.625rem; }
  .ls-cta-or { margin: var(--space-8) auto var(--space-6); }

  .ls-hero-content { padding: var(--space-16) var(--space-5) var(--space-10); }
  .ls-hero h1 { font-size: clamp(1.875rem, 7.5vw, 2.5rem); }
  .ls-hero-triad { letter-spacing: 0.2em; }
  .ls-hero-lede { font-size: 1rem; }
  .ls-hero-actions { margin-top: var(--space-6); }
  .ls-hero-actions .ls-btn { width: 100%; }
  .ls-hero-proof { margin-top: var(--space-6); gap: var(--space-2); }

}

/* Sur un écran court, l'indicateur de défilement empiète sur le contenu. */
@media (max-height: 760px), (max-width: 720px) {
  .ls-scroll-cue { display: none; }
}

/* Viewport très court : on ne garde que la promesse et l'action principale.
   Les preuves restent lisibles plus bas, elles ne doivent pas déborder ici. */
@media (max-height: 700px) {
  .ls-hero-content { padding-block: var(--space-12) var(--space-8); }
  .ls-hero h1 { font-size: clamp(1.625rem, 6.2vw, 2rem); }
  .ls-hero-lede { font-size: 0.9375rem; }
  .ls-hero-proof { display: none; }
}

/* ---------- STORYBRAND : LE PROBLÈME ------------------------------------- */
.ls-problem-list { display: grid; gap: var(--space-4); list-style: none; margin: 0; padding: 0; }
.ls-problem-list li {
  display: flex; align-items: flex-start; gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--border-subtle);
  border-inline-start: 2px solid var(--accent-secondary);
  border-radius: var(--radius-md);
  background: var(--surface-panel);
  color: var(--text-secondary);
}
.ls-problem-list b { color: var(--text-primary); font-weight: 600; display: block; margin-bottom: var(--space-1); font-family: var(--font-display); }

/* Citation du dirigeant — la voix du héros */
.ls-quote {
  border-inline-start: 2px solid var(--border-gold);
  padding-inline-start: var(--space-6);
  font: 400 clamp(1.125rem, 1.6vw, 1.4rem)/1.5 var(--font-display);
  font-style: italic;
  color: var(--text-primary);
  margin: 0;
}
.ls-quote cite {
  display: block;
  margin-top: var(--space-3);
  font: var(--text-mono-sm);
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-muted);
}

/* ---------- TRIADE (le plan) --------------------------------------------- */
.ls-triad-card { display: flex; flex-direction: column; gap: var(--space-5); height: 100%; }
.ls-triad-card h3 {
  font: var(--text-display-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wordmark);
}
.ls-triad-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-3); }
.ls-triad-card li {
  display: flex; gap: var(--space-3);
  font: var(--text-body-sm);
  color: var(--text-secondary);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}
.ls-triad-card li::before {
  content: '—';
  color: var(--accent-primary);
  flex-shrink: 0;
}
.ls-triad-card li b { color: var(--text-primary); font-weight: 600; }
.ls-triad-goal {
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
  font: var(--text-mono-sm);
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-transform: none;
}

/* ---------- GRILLE CINÉTIQUE (fond réactif au curseur, section OS) ------- */
/* Canvas inséré en premier enfant de la section : il reste derrière les
   cartes (elles ont un fond opaque, le texte n'est jamais lu par-dessus). */
/* La section remonte de exactement son propre padding haut, puis le double :
   la grille (qui remplit la boîte de la section) comble ainsi la plage
   auparavant vide entre la fin du bloc Plan et le début de l'OS, sans
   déplacer le contenu — qui retombe pile à la même position qu'avant. Le
   filet de séparation saute pour que la transition se lise en continu. */
#os {
  isolation: isolate;
  margin-top: calc(-1 * clamp(var(--space-16), 9vw, var(--space-24)));
  padding-top: calc(2 * clamp(var(--space-16), 9vw, var(--space-24)));
  border-top: none;
}
/* Sélecteur qualifié à dessein : la grille se monte dans plusieurs conteneurs
   (section OS, panneau d'appel à l'action) dont certains posent déjà un
   `> *` qui remonterait le canevas au-dessus du contenu à égalité de poids. */
canvas.ls-kinetic-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
/* Toute section porteuse de grille élève son contenu : la règle suit l'attribut
   plutôt que l'identifiant, pour ne pas être à refaire à chaque nouvel hôte. */
[data-kinetic-grid] > .ls-container { position: relative; z-index: 1; }

/* ---------- OS LEAN SKIPPER : ÉCOSYSTÈME DE LA TÂCHE --------------------- */
.ls-task-map {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
@media (max-width: 640px) { .ls-task-map { grid-template-columns: repeat(2, 1fr); } }

.ls-task-node {
  padding: var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-page);
  text-align: center;
  transition: border-color var(--duration-base) var(--ease-nautical);
}
.ls-task-node:hover { border-color: var(--border-gold); }
.ls-task-node dt {
  font: var(--text-mono-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}
.ls-task-node dd { margin: 0; font: var(--text-body-sm); color: var(--text-primary); }
.ls-task-node--core {
  border-color: var(--border-gold);
  background: var(--surface-card);
  box-shadow: var(--glow-gold);
}
.ls-task-node--core dt { color: var(--accent-primary); }

/* Anneau orbital derrière la tâche standard — écho miniature du blason
   boussole, contenu dans la cellule pour ne jamais empiéter sur ses voisines. */
.ls-task-node--core { position: relative; overflow: visible; }
.ls-task-node--core::before {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 78%;
  aspect-ratio: 1;
  border-radius: var(--radius-full);
  border: 1px dashed var(--border-gold);
  opacity: 0.5;
  animation: ls-orbit-spin 22s linear infinite;
  pointer-events: none;
}
.ls-task-node--core::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 60%;
  aspect-ratio: 1;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-gold);
  opacity: 0.35;
  animation: ls-orbit-spin 16s linear infinite reverse;
  pointer-events: none;
}
@keyframes ls-orbit-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .ls-task-node--core::before, .ls-task-node--core::after { animation: none; }
}

/* ---------- ORBITE DES 8 DIMENSIONS AUTOUR DE LA TÂCHE STANDARD ----------- */
/* Par défaut : .ls-orbit-node est transparente à la grille 3×3 — les <li>
   se rendent comme aujourd'hui, rien ne dépend de l'orbite. orbital-flow.js
   décide seul quand il y a assez de place (largeur ET échelle lisible) et
   pose .is-orbital sur [data-orbit-map] ; un simple point de rupture CSS ne
   suffirait pas, il ignorerait le repli d'échelle calculé en JS. */
.ls-orbit-node { display: contents; }

/* Taille de référence du diagramme, déclarée hors de `.is-orbital` : le script
   la lit pour décider s'il y a la place d'orbiter, donc avant de poser la
   classe. Elle vit ici et nulle part ailleurs — auparavant la même valeur
   était recopiée dans orbital-flow.js sous un commentaire demandant de ne pas
   les désynchroniser, ce que rien n'imposait. */
[data-orbit-map] { --orbit-size: 820px; }

[data-orbit-map].is-orbital {
  /* Une seule durée pour le rayon ET sa contre-rotation : les deux ne
     peuvent pas se désynchroniser si on retouche la vitesse. */
  --orbit-duration: 48s;
  position: relative;
  display: grid;
  place-items: center;
  grid-template-columns: none;
  min-height: var(--orbit-size);
  gap: 0;
}

[data-orbit-map].is-orbital .ls-task-node--core {
  position: relative;
  z-index: 2;
  width: 176px; height: 176px;
  border-radius: var(--radius-full);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-4);
  /* Le moyeu respire : c'est le signal « vivant » le plus lisible de la
     scène, celui que la rotation seule ne donne pas. */
  animation: ls-hub-pulse 3.6s var(--ease-nautical) infinite;
}

/* Chaque nœud est un rayon pivotant autour du centre (transform-origin: top
   place le pivot exactement au centre du moyeu) ; le nœud lui-même, au bout
   du rayon, tourne en sens inverse pour rester lisible — la même mécanique
   CSS pure que le modèle fourni (spoke + counter-rotation), sans boucle JS
   par image. */
[data-orbit-map].is-orbital .ls-orbit-node {
  display: block;
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 300px;
  transform-origin: top;
  transform: rotate(var(--start-angle, 0deg));
  animation: ls-orbit-cw var(--orbit-duration) linear infinite;
}

/* Le nœud contre-tourne pour rester droit (délai 0 : il doit rester en
   phase avec son rayon), et porte en plus un cycle de profondeur dont le
   délai négatif est calé sur sa position de départ — chaque nœud est donc
   à un point différent du même cycle, et l'éclat suit réellement la
   position sur l'orbite au lieu de clignoter en bloc. C'est ce que la
   rotation seule ne donnait pas : sans lui, la contre-rotation garde les
   cartes strictement identiques et la scène paraît figée. */
[data-orbit-map].is-orbital .ls-orbit-node > .ls-task-node {
  position: absolute;
  bottom: 0; left: 0;
  width: 164px;
  transform: translateX(-50%) rotate(calc(-1 * var(--start-angle, 0deg)));
  animation:
    ls-orbit-ccw var(--orbit-duration) linear infinite,
    ls-orbit-depth var(--orbit-duration) linear infinite;
  animation-delay: 0s, calc(-1 * var(--orbit-duration) * var(--phase, 0));
}
@keyframes ls-orbit-cw {
  to { transform: rotate(calc(var(--start-angle, 0deg) + 360deg)); }
}
@keyframes ls-orbit-ccw {
  to { transform: translateX(-50%) rotate(calc(-1 * var(--start-angle, 0deg) - 360deg)); }
}
/* Creux quand le nœud est au plus loin (haut de l'orbite), plein éclat au
   plus près (bas). Plancher volontairement haut : le texte doit rester
   au-dessus de 4,5:1 même au point le plus sombre du cycle. */
@keyframes ls-orbit-depth {
  0%, 100% { opacity: 0.82; }
  50%      { opacity: 1; }
}

/* Anneau de repère, purement décoratif. */
[data-orbit-map].is-orbital::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 600px; height: 600px;
  margin: -300px 0 0 -300px;
  border-radius: var(--radius-full);
  border: 1px dashed var(--border-subtle);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-orbit-map].is-orbital .ls-orbit-node,
  [data-orbit-map].is-orbital .ls-orbit-node > .ls-task-node,
  [data-orbit-map].is-orbital .ls-task-node--core { animation: none; }
  /* La disposition circulaire reste, mais plus aucun nœud n'est atténué :
     sans le cycle, un nœud figé à 0,82 serait une pénalité permanente. */
  [data-orbit-map].is-orbital .ls-orbit-node > .ls-task-node { opacity: 1; }
}

/* ---------- CALCULETTE DE FLUX (schéma de production, entonnoir) --------- */
/* Théorie des contraintes rendue manipulable : la largeur de l'entonnoir est
   la capacité de chaque étape, le goulot est le point le plus étroit, et le
   débit de la ligne ne peut pas le dépasser. L'entonnoir n'est qu'un rendu
   de la liste <ol> — jamais une source d'information distincte. */
.ls-calc-intro { max-width: 68ch; margin-bottom: var(--space-8); }

.ls-calc {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-5), 4vw, var(--space-10));
  display: grid;
  gap: var(--space-8);
}

/* Synthèse */
.ls-calc-readout {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--border-subtle);
}
.ls-calc-stat { display: grid; gap: var(--space-1); }
.ls-calc-stat b {
  font: var(--text-display-sm);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.ls-calc-stat--key b {
  background: var(--metal-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Entonnoir */
.ls-funnel { position: relative; }
.ls-funnel-svg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.ls-funnel-path { transition: opacity var(--duration-slow) var(--ease-nautical); }

.ls-funnel-cols {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
}
.ls-funnel-col { display: grid; gap: var(--space-2); }

.ls-funnel-name {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text-primary);
}
/* text-secondary et non -muted : cette ligne se lit par-dessus l'entonnoir. */
.ls-funnel-desc { color: var(--text-secondary); font: var(--text-body-sm); }

.ls-funnel-people { display: grid; gap: var(--space-2); justify-items: center; }
.ls-funnel-people input {
  width: 5ch;
  padding: var(--space-2);
  text-align: center;
  background: var(--surface-page);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font: var(--text-display-sm);
  font-variant-numeric: tabular-nums;
  transition: border-color var(--duration-base) var(--ease-nautical),
              box-shadow var(--duration-base) var(--ease-nautical);
}
.ls-funnel-people input:hover { border-color: var(--border-gold); }
.ls-funnel-people input:focus-visible {
  outline: none;
  border-color: var(--gold-500);
  box-shadow: var(--glow-gold);
}

.ls-funnel-util { display: grid; gap: var(--space-1); justify-items: center; }
.ls-funnel-util b {
  font: var(--text-mono-md);
  font-size: 1.125rem;
  color: var(--accent-primary);
  font-variant-numeric: tabular-nums;
}

/* L'étape contrainte : seul endroit où l'ember apparaît ici. */
/* ember-300 et non -500 : le % du goulot se lit par-dessus le remplissage
   ember de son propre segment, où le -500 tombait à 3,3:1. */
.ls-funnel-col[data-bottleneck] .ls-funnel-util b { color: var(--ember-300); }
.ls-funnel-col[data-bottleneck] .ls-funnel-name { color: var(--ember-300); }

.ls-calc-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-subtle);
}
.ls-calc-foot .ls-prose { flex: 1 1 32ch; font: var(--text-body-sm); }

/* Au-delà de cette largeur, les cinq étapes tiennent côte à côte et
   l'entonnoir devient lisible : chaque colonne se cale alors sur son
   segment (effectif en haut, utilisation au centre, intitulé en bas). */
@media (min-width: 860px) {
  .ls-funnel { min-height: 360px; }
  .ls-funnel-cols {
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    min-height: 360px;
  }
  .ls-funnel-col {
    align-content: stretch;
    justify-items: center;
    text-align: center;
    gap: 0;
    padding-block: var(--space-4);
  }
  .ls-funnel-people { order: 1; }
  .ls-funnel-util {
    order: 2;
    flex: 1;
    align-content: center;
    min-height: 0;
  }
  .ls-funnel-name { order: 3; font-size: 0.9375rem; }
  .ls-funnel-desc { order: 4; }
}

/* Sous ce seuil l'entonnoir n'est plus lisible : on le retire et les cinq
   étapes redeviennent des fiches empilées, la calculette reste entière. */
@media (max-width: 859px) {
  .ls-funnel-svg { display: none; }
  .ls-funnel-col {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    background: var(--surface-page);
  }
  .ls-funnel-col[data-bottleneck] { border-inline-start: 2px solid var(--accent-secondary); }
  .ls-funnel-people { justify-items: start; }
  .ls-funnel-util { justify-items: start; }
}

/* ---------- DIAGNOSTIC --------------------------------------------------- */
.ls-diag { max-width: 780px; margin-inline: auto; }
.ls-diag-progress {
  display: flex; align-items: center; gap: var(--space-3);
  font: var(--text-mono-sm);
  letter-spacing: var(--tracking-label);
  color: var(--text-muted);
  margin-bottom: var(--space-6);
}
.ls-diag-progress-track {
  flex: 1; height: 2px; background: var(--border-subtle); border-radius: var(--radius-full); overflow: hidden;
}
.ls-diag-progress-bar {
  height: 100%; width: 0;
  background: var(--metal-gold);
  transition: width var(--duration-slow) var(--ease-nautical);
}

.ls-diag-question { font: var(--text-display-md); margin-bottom: var(--space-6); text-wrap: balance; }
.ls-diag-options { display: grid; gap: var(--space-3); }
.ls-diag-option {
  display: flex; align-items: center; gap: var(--space-4);
  width: 100%;
  padding: var(--space-5);
  text-align: start;
  background: var(--surface-page);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--duration-base) var(--ease-nautical);
}
.ls-diag-option:hover {
  border-color: var(--border-gold);
  color: var(--text-primary);
  transform: translateX(3px);
}
.ls-diag-option-key {
  font: var(--text-mono-md);
  color: var(--accent-primary);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-3);
  flex-shrink: 0;
}

/* Résultat */
.ls-diag-score {
  display: flex; align-items: baseline; justify-content: center; gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.ls-diag-score b {
  font: var(--text-display-xl);
  background: var(--metal-gold);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ls-diag-score span { font: var(--text-mono-md); color: var(--text-muted); letter-spacing: var(--tracking-label); }
.ls-diag-verdict,
[data-diag-advice] { text-align: center; }
.ls-diag-verdict { font: var(--text-display-sm); color: var(--text-primary); margin-bottom: var(--space-3); }
[data-diag-advice] { max-width: 62ch; margin-inline: auto; }

.ls-diag-bars { display: grid; gap: var(--space-4); margin-block: var(--space-8); }
.ls-diag-bar-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font: var(--text-mono-sm); letter-spacing: var(--tracking-label);
  color: var(--text-secondary); margin-bottom: var(--space-2);
}
.ls-diag-bar-track { height: 4px; background: var(--surface-page); border-radius: var(--radius-full); overflow: hidden; }
.ls-diag-bar-fill {
  height: 100%; width: 0;
  background: var(--metal-gold);
  border-radius: var(--radius-full);
  transition: width var(--duration-ritual) var(--ease-nautical);
}
.ls-diag-bar-fill[data-level='low'] { background: var(--accent-secondary); }

/* ---------- MODULES PÉDAGOGIQUES ----------------------------------------- */
.ls-learn-card { display: flex; flex-direction: column; gap: var(--space-4); height: 100%; }
.ls-learn-card h3 { font: var(--text-display-sm); }
.ls-learn-meta {
  display: flex; gap: var(--space-3); flex-wrap: wrap;
  font: var(--text-mono-sm); letter-spacing: var(--tracking-label); color: var(--text-muted);
}
.ls-learn-card .ls-btn { margin-top: auto; }

/* ---------- BIBLIOTHÈQUE EN ÉTAGÈRE -------------------------------------
   Cinq briques en tranches : celle qui est désignée s'ouvre, les autres
   restent de dos, titre à la verticale. L'état de repli est posé par le
   script (`.is-shelved`) : tant qu'il n'a pas pris la main, c'est la grille
   de cartes ordinaire qui s'affiche — même repli qu'au doigt, où il n'y a
   pas de survol à interpréter. */
.ls-shelf { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.ls-shelf-mark, .ls-shelf-spine { display: none; }

.ls-shelf.is-shelved {
  display: flex;
  gap: var(--space-3);
  align-items: stretch;
  min-height: 26rem;
}
.ls-shelf.is-shelved .ls-shelf-item {
  position: relative;
  overflow: hidden;
  /* `.ls-learn-card` pose `height: 100%`, hérité de la grille de cartes. Sur
     une rangée flex, ce pourcentage se résout contre une hauteur automatique
     et les tranches repliées finissent plus courtes que l'ouverte. On rend la
     main à `align-items: stretch`, qui les aligne toutes. */
  height: auto;
  /* La tranche repliée n'a que la largeur de son dos ; l'ouverte prend tout
     ce qui reste. `flex-basis: 0` sur l'ouverte évite qu'un titre long lui
     fasse réclamer plus que sa part et déborde l'étagère. */
  flex: 0 0 5.25rem;
  padding: var(--space-5);
  cursor: pointer;
  transition: flex-basis var(--duration-slow) var(--ease-nautical),
              flex-grow var(--duration-slow) var(--ease-nautical),
              border-color var(--duration-base) var(--ease-nautical);
}
.ls-shelf.is-shelved .ls-shelf-item[aria-expanded='true'] {
  flex: 1 1 0;
  cursor: default;
  border-color: var(--border-gold);
  box-shadow: var(--shadow-card-hover);
}
.ls-shelf.is-shelved .ls-shelf-item:focus-within { border-color: var(--border-gold); }

/* Marque du guide : filigrane derrière la face ouverte, discret pour ne pas
   disputer la lecture au texte. */
.ls-shelf.is-shelved .ls-shelf-mark {
  display: block;
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: clamp(var(--space-6), 6%, var(--space-16));
  width: clamp(7rem, 13vw, 12rem);
  aspect-ratio: 1;
  translate: 0 -50%;
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-nautical);
  pointer-events: none;
}
.ls-shelf.is-shelved .ls-shelf-item[aria-expanded='true'] .ls-shelf-mark { opacity: 0.14; }
.ls-shelf-mark svg {
  width: 100%; height: 100%;
  fill: none;
  stroke: var(--accent-primary);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Dos de la tranche : `writing-mode` plutôt qu'une rotation. Un titre pivoté
   garde la largeur de sa ligne horizontale et déborde dès qu'il est long —
   ceux-ci le sont ; en écriture verticale il s'écoule dans la hauteur
   disponible et se coupe proprement. */
.ls-shelf.is-shelved .ls-shelf-spine {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  /* Surtout pas `height: 100%` : en écriture verticale, la hauteur du dos est
     ce qui dimensionne la tranche, et s'y référer la ferait dépendre d'elle-
     même — Chromium tranche alors autour de la hauteur du viewport et
     l'étagère s'étire sur tout l'écran. `flex: 1` remplit la place donnée
     sans jamais la réclamer. */
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  font: var(--text-body-md);
  color: var(--text-secondary);
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: opacity var(--duration-base) var(--ease-nautical);
}
/* Sorti du flux, pas seulement rendu transparent : un dos resté en place
   continuerait de réclamer sa part de `flex: 1` et repousserait la face
   ouverte vers le bas de la tranche. */
.ls-shelf.is-shelved .ls-shelf-item[aria-expanded='true'] .ls-shelf-spine {
  position: absolute;
  inset-block: var(--space-5);
  inset-inline-start: var(--space-5);
  opacity: 0;
  pointer-events: none;
}

.ls-shelf.is-shelved .ls-shelf-face {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex: 1 1 auto;
  min-height: 0;
  min-width: 18rem;
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-nautical);
}
.ls-shelf.is-shelved .ls-shelf-item[aria-expanded='true'] .ls-shelf-face { opacity: 1; }
.ls-shelf.is-shelved .ls-shelf-item:not([aria-expanded='true']) .ls-shelf-face {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ls-shelf.is-shelved .ls-shelf-face .ls-btn { margin-top: auto; align-self: flex-start; }

@media (max-width: 1000px) { .ls-shelf { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ls-shelf { grid-template-columns: 1fr; } }

/* Guide en surcouche — <dialog> natif : le piège de focus, la fermeture par
   Échap et l'inertie de l'arrière-plan sont fournis par le navigateur. */
.ls-dialog {
  width: min(760px, calc(100vw - var(--space-8)));
  max-height: min(85vh, 900px);
  padding: clamp(var(--space-5), 4vw, var(--space-10));
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  color: var(--text-primary);
  box-shadow: var(--shadow-card-hover);
  overflow: auto;
}
.ls-dialog::backdrop {
  background: oklch(13% 0.012 262 / 0.78);
  backdrop-filter: blur(3px);
}
.ls-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.ls-dialog-head .ls-panel-title { margin-block: var(--space-2) 0; }
.ls-dialog-close {
  flex-shrink: 0;
  width: 44px; height: 44px;      /* cible tactile confortable */
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--duration-base) var(--ease-nautical),
              color var(--duration-base) var(--ease-nautical);
}
.ls-dialog-close:hover { border-color: var(--border-gold); color: var(--accent-primary); }
.ls-dialog .ls-prose { margin-bottom: var(--space-8); }

/* Matrice ILUO interactive */
.ls-iluo { display: grid; gap: var(--space-5); }
.ls-iluo-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}
/* Colocalisé avec la règle qu'il modifie : placé plus haut dans le fichier,
   cet override tombait après la règle de base et ne s'appliquait jamais. */
@media (max-width: 720px) {
  .ls-iluo-grid { grid-template-columns: repeat(2, 1fr); }
}
.ls-iluo-step {
  padding: var(--space-5) var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-page);
  text-align: center;
  cursor: pointer;
  transition: all var(--duration-base) var(--ease-nautical);
}
.ls-iluo-step:hover, .ls-iluo-step[aria-selected='true'] {
  border-color: var(--border-gold);
  background: var(--surface-card);
}
.ls-iluo-step[aria-selected='true'] { box-shadow: var(--glow-gold); }
.ls-iluo-letter {
  font: 600 2rem/1 var(--font-display);
  color: var(--accent-primary);
  display: block;
  margin-bottom: var(--space-2);
}
.ls-iluo-step small {
  font: var(--text-mono-sm); letter-spacing: var(--tracking-label);
  color: var(--text-muted); text-transform: uppercase;
}
/* Le carré ILUO se ferme trait par trait */
.ls-iluo-mark {
  width: 34px; height: 34px; margin: 0 auto var(--space-3);
  border: 2px solid transparent;
  transition: border-color var(--duration-base) var(--ease-nautical);
}
.ls-iluo-step[data-strokes='1'] .ls-iluo-mark { border-left-color: var(--accent-primary); }
.ls-iluo-step[data-strokes='2'] .ls-iluo-mark { border-left-color: var(--accent-primary); border-bottom-color: var(--accent-primary); }
.ls-iluo-step[data-strokes='3'] .ls-iluo-mark { border-left-color: var(--accent-primary); border-bottom-color: var(--accent-primary); border-right-color: var(--accent-primary); }
.ls-iluo-step[data-strokes='4'] .ls-iluo-mark { border-color: var(--accent-primary); }
.ls-iluo-detail {
  padding: var(--space-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-page);
  color: var(--text-secondary);
  font: var(--text-body-md);
  min-height: 84px;
}

/* ---------- MYTHE STRATÉGIQUE -------------------------------------------- */
/* ---------- LE MYTHE : CARROUSEL EN ARC ---------------------------------
   Quatre actes répartis sur une ellipse, l'acte courant au premier plan et
   les autres qui s'éloignent en profondeur. La prose ne tient pas dans une
   vignette : elle est reprise dans le panneau de détail sous l'arc, et les
   vignettes ne gardent que numéro et titre.
   Sans JS, rien de tout cela ne s'active : `.is-live` n'est posée que par le
   script, et la liste reste une énumération verticale ordinaire. */
.ls-myth { display: grid; gap: var(--space-8); }
.ls-myth-arc { display: grid; gap: var(--space-6); }
.ls-myth-track { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-6); }
.ls-myth-step {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-6);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-card);
}
.ls-myth-step h3 { font: var(--text-display-sm); margin: 0; }
.ls-myth-detail, .ls-myth-controls { display: none; }

.ls-myth.is-live .ls-myth-detail { display: grid; gap: var(--space-3); }
.ls-myth.is-live .ls-myth-controls { display: flex; }

.ls-myth.is-live .ls-myth-track {
  position: relative;
  display: block;
  height: var(--arc-height, 300px);
}
.ls-myth.is-live .ls-myth-step {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: var(--card-w, 15rem);
  margin: 0;
  padding: var(--space-5);
  cursor: pointer;
  /* Les positions viennent du script (--x/--y/--s/--o/--z) : le CSS ne fait
     que les composer, ce qui garde une seule source de vérité géométrique. */
  transform: translate(-50%, -50%) translate(var(--x, 0px), var(--y, 0px)) scale(var(--s, 1));
  opacity: var(--o, 1);
  z-index: var(--z, 1);
  background: linear-gradient(to bottom, var(--surface-card), var(--surface-panel));
  box-shadow: var(--shadow-card);
  transition: transform var(--duration-slow, 640ms) var(--ease-nautical),
              opacity var(--duration-slow, 640ms) var(--ease-nautical),
              border-color var(--duration-base) var(--ease-nautical);
}
.ls-myth.is-live .ls-myth-step .ls-prose { display: none; }
.ls-myth.is-live .ls-myth-step h3 { font: var(--text-body-md); }
.ls-myth.is-live .ls-myth-step[aria-current='true'] {
  border-color: var(--border-gold);
  box-shadow: var(--shadow-card-hover), var(--glow-gold);
}
.ls-myth.is-live .ls-myth-step[aria-current='true'] h3 { color: var(--text-primary); }
.ls-myth.is-live .ls-myth-step:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 3px; }

.ls-myth-detail { text-align: center; max-width: 62ch; margin-inline: auto; }
.ls-myth-detail h3 { font: var(--text-display-sm); margin: 0; }
.ls-myth-count {
  margin: 0;
  font: var(--text-mono-sm);
  letter-spacing: var(--tracking-label);
  color: var(--text-muted);
}
.ls-myth-count b {
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1;
  color: var(--accent-primary);
  margin-inline-end: var(--space-2);
  font-variant-numeric: tabular-nums;
}

.ls-myth-controls { align-items: center; justify-content: center; gap: var(--space-4); }
.ls-myth-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border-subtle);
  border-radius: 50%;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-nautical),
              border-color var(--duration-fast) var(--ease-nautical);
}
.ls-myth-arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; }
.ls-myth-arrow:hover { color: var(--accent-primary); border-color: var(--border-gold); }

.ls-myth-dots { display: flex; align-items: center; gap: var(--space-2); }
.ls-myth-dots button {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--border-strong);
  cursor: pointer;
  transition: width var(--duration-base) var(--ease-nautical),
              background-color var(--duration-base) var(--ease-nautical);
}
.ls-myth-dots button[aria-current='true'] { width: 24px; background: var(--accent-primary); }

/* L'ellipse ne tient pas sous 720 px : l'arc se retire et le récit se lit
   acte par acte dans le panneau de détail, que les points suffisent à situer. */
@media (max-width: 720px) {
  .ls-myth.is-live .ls-myth-arc { display: none; }
}
/* Le mouvement réduit est déjà couvert : les tokens --duration-* tombent à 0 ms
   sous la préférence, ce qui neutralise les transitions ci-dessus. Le script
   coupe en plus le défilement automatique. */

/* ---------- CTA / NEWSLETTER --------------------------------------------- */
/* Le panneau porte la grille cinétique dorée. Le canevas ne se monte ni sous
   `prefers-reduced-motion` ni au doigt : le fond déclaré ici reste donc la
   vraie apparence pour une part des visiteurs, pas un simple filet de
   sécurité — d'où un dégradé or tenu, et non un aplat. */
.ls-cta-panel {
  position: relative;
  isolation: isolate;
  padding: clamp(var(--space-10), 6vw, var(--space-20));
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 90% at 50% 0%, oklch(73% 0.125 83 / 0.10), transparent 62%),
    var(--surface-page);
  text-align: center;
  overflow: hidden;
}
.ls-cta-panel > *:not(canvas) { position: relative; z-index: 1; }

/* Réservation directe : le geste principal du panneau. */
.ls-cta-book { display: grid; justify-items: center; gap: var(--space-3); }
.ls-cta-book .ls-btn { font-size: 1rem; padding: var(--space-4) var(--space-8); }
.ls-cta-book-note {
  margin: 0;
  font: var(--text-body-sm);
  color: var(--text-muted);
}

/* Séparateur « ou » : deux filets et un mot, sans div supplémentaire. */
.ls-cta-or {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-10) auto var(--space-8);
  max-width: 620px;
  font: var(--text-mono-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-muted);
}
.ls-cta-or::before,
.ls-cta-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
}

/* Abonnement au journal de bord : le logotype accompagne le libellé pour que
   la destination se lise avant le clic (on quitte le site). */
.ls-btn--linkedin { gap: var(--space-3); margin-bottom: var(--space-4); }
.ls-btn--linkedin svg { width: 18px; height: 18px; fill: currentColor; }

.ls-form { display: grid; gap: var(--space-4); text-align: start; max-width: 620px; margin-inline: auto; }
.ls-form-row { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.ls-form-status {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-gold);
  background: var(--surface-panel);
  font: var(--text-body-sm);
  color: var(--text-primary);
  text-align: center;
}
.ls-form-status[data-state='error'] { border-color: var(--accent-secondary); color: var(--ember-300); }

.ls-consent {
  display: flex; align-items: flex-start; gap: var(--space-3);
  font: var(--text-body-sm); color: var(--text-muted);
}
.ls-consent input { margin-top: 3px; accent-color: var(--gold-500); width: 16px; height: 16px; flex-shrink: 0; }

/* ---------- FAQ / GEO ---------------------------------------------------- */
.ls-faq { display: grid; gap: var(--space-3); }
.ls-faq details {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-panel);
  transition: border-color var(--duration-base) var(--ease-nautical);
}
.ls-faq details[open] { border-color: var(--border-gold); }
.ls-faq summary {
  padding: var(--space-5);
  cursor: pointer;
  font: 500 1.0625rem/1.4 var(--font-display);
  color: var(--text-primary);
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
}
.ls-faq summary::-webkit-details-marker { display: none; }
.ls-faq summary::after {
  content: '+';
  font: var(--text-mono-md);
  color: var(--accent-primary);
  flex-shrink: 0;
  transition: transform var(--duration-base) var(--ease-nautical);
}
.ls-faq details[open] summary::after { transform: rotate(45deg); }
.ls-faq-answer {
  padding: 0 var(--space-5) var(--space-5);
  color: var(--text-secondary);
  font: var(--text-body-md);
}

/* ---------- OS LEAN SKIPPER (CRM) ---------------------------------------- */
.ls-os-panel {
  display: grid; gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: center;
}
.ls-os-status {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font: var(--text-mono-sm); letter-spacing: var(--tracking-label);
  color: var(--text-muted);
}
.ls-os-status::before {
  content: ''; width: 6px; height: 6px; border-radius: var(--radius-full);
  background: var(--accent-primary);
  box-shadow: 0 0 0 3px var(--halo-gold);
}

/* ---------- FOOTER ------------------------------------------------------- */
.ls-footer { border-top: 1px solid var(--border-subtle); padding-block: var(--space-16) var(--space-10); }
.ls-footer-grid {
  display: grid; gap: var(--space-8);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-bottom: var(--space-10);
}
.ls-footer h4 {
  font: var(--text-mono-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-muted);
  margin-bottom: var(--space-4);
}
.ls-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.ls-footer a { font: var(--text-body-sm); color: var(--text-secondary); }
.ls-footer a:hover { color: var(--accent-primary); }
.ls-footer-base {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  justify-content: space-between; align-items: center;
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-subtle);
  font: var(--text-mono-sm);
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.ls-social { display: flex; gap: var(--space-3); }
.ls-social a {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  transition: all var(--duration-base) var(--ease-nautical);
}
.ls-social a:hover { border-color: var(--border-gold); color: var(--accent-primary); }
.ls-social svg { width: 18px; height: 18px; fill: currentColor; }