/* ==========================================================
   Ascenseur « chasse au pou » — un peigne fin poursuit un pou
   le long d'un rail latéral qui remplace la barre de défilement.
   Le rail figure une mèche de cheveu ; le peigne la démêle.
   ========================================================== */

:root {
  --sh-line: 1.5px solid var(--ink);
  --sh-w: 18px;          /* largeur du rail */
  --sh-comb-w: 30px;     /* largeur du peigne (déborde du rail) */
  --sh-louse-w: 14px;    /* largeur du pou */
  --sh-gutter: 7px;      /* retrait depuis le bord droit */
}

/* Barre native masquée uniquement quand le rail interactif est actif
   (si le JS échoue, la barre native reste en place) */
html.sh-active { scrollbar-width: none; }
html.sh-active::-webkit-scrollbar { display: none; width: 0; height: 0; }

.sh-rail {
  position: fixed;
  z-index: 45;
  top: calc(var(--header-h, 76px) + 14px);
  bottom: 14px;
  right: var(--sh-gutter);
  width: var(--sh-w);
  opacity: 0;
  transition: opacity .4s ease;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
.sh-rail.is-ready { opacity: .88; }
.sh-rail.is-ready:hover,
.sh-rail.is-dragging { opacity: 1; }
.sh-rail.is-empty { opacity: 0; pointer-events: none; }

/* ---------- Piste ---------- */
.sh-rail__track {
  position: absolute;
  inset: 0;
  border: var(--sh-line);
  border-radius: 999px;
  background: var(--paper);
  overflow: hidden;
  transition: box-shadow .25s ease;
}
.sh-rail:hover .sh-rail__track,
.sh-rail.is-dragging .sh-rail__track { box-shadow: 2px 2px 0 var(--ink); }

/* Zone déjà « peignée » : fines stries verticales, comme des cheveux démêlés */
.sh-rail__trail {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 100%;
  transform-origin: 50% 0;
  transform: scaleY(0);
  background:
    repeating-linear-gradient(90deg, transparent 0 3px, var(--lime-2, var(--mint-2)) 3px 4px),
    var(--lime, var(--mint));
  will-change: transform;
}

/* Couloir où circulent le peigne et le pou */
.sh-rail__lane { position: absolute; inset: 0; pointer-events: none; }

/* ---------- Peigne ---------- */
.sh-comb {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--sh-comb-w);
  margin-left: calc(var(--sh-comb-w) / -2);
  will-change: transform;
  pointer-events: auto;
  cursor: grab;
}
.sh-comb__flip { transition: transform .28s cubic-bezier(.4, 0, .2, 1); }
.sh-rail.is-up .sh-comb__flip { transform: scaleY(-1); }
.sh-comb svg { display: block; width: 100%; height: auto; overflow: visible; }
.sh-comb__spine { fill: var(--green, var(--teal)); stroke: var(--ink); stroke-width: 1.6; }
.sh-comb__teeth { fill: var(--ink); }

/* ---------- Pou ---------- */
.sh-louse {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--sh-louse-w);
  margin-left: calc(var(--sh-louse-w) / -2);
  will-change: transform;
  pointer-events: auto;
  cursor: grab;
}
.sh-louse__dir { transition: transform .3s cubic-bezier(.4, 0, .2, 1); }
.sh-rail.is-up .sh-louse__dir { transform: rotate(180deg); }
.sh-louse__body { transform-origin: 50% 60%; animation: sh-appear .4s ease-out both; }
.sh-louse svg { display: block; width: 100%; height: auto; overflow: visible; }
.sh-louse__abdomen { fill: var(--peach, var(--paper)); stroke: var(--ink); stroke-width: 1.3; }
.sh-louse__seg { fill: none; stroke: var(--ink); stroke-width: .8; stroke-linecap: round; opacity: .75; }
.sh-louse__thorax,
.sh-louse__head { fill: var(--ink); }
.sh-louse__leg,
.sh-louse__antenna { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.sh-louse__antenna { stroke-width: .9; }

/* Pattes : deux tripodes qui alternent, uniquement pendant le défilement */
.sh-louse__leg { transform-box: fill-box; }
.sh-louse__leg--l { transform-origin: 100% 50%; }
.sh-louse__leg--r { transform-origin: 0% 50%; }
.sh-rail.is-running .sh-louse__tripod--a .sh-louse__leg { animation: sh-step .22s ease-in-out infinite alternate; }
.sh-rail.is-running .sh-louse__tripod--b .sh-louse__leg { animation: sh-step .22s ease-in-out infinite alternate-reverse; }
@keyframes sh-step {
  from { transform: rotate(-13deg); }
  to   { transform: rotate(13deg); }
}

/* ---------- Capture en bas de page ---------- */
.sh-rail.is-caught .sh-louse__body { animation: sh-squash .5s cubic-bezier(.3, 0, .3, 1) forwards; }
@keyframes sh-squash {
  0%   { transform: none; opacity: 1; }
  35%  { transform: scale(1.35, .45); opacity: 1; }
  100% { transform: scale(.4, .2); opacity: 0; }
}
@keyframes sh-appear {
  from { transform: scale(.5); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* Petites particules qui s'échappent à la capture */
.sh-puff { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.sh-puff i {
  position: absolute;
  left: -2px; top: -2px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--ink);
  opacity: 0;
}
.sh-puff i:nth-child(2n) { background: var(--coral); width: 3px; height: 3px; }
.sh-rail.is-caught .sh-puff i { animation: sh-puff .6s .12s cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes sh-puff {
  0%   { opacity: .9; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.3); }
}

/* Pendant le glisser : curseur partout et pas de sélection de texte */
html.sh-grabbing,
html.sh-grabbing * { cursor: grabbing !important; }
html.sh-grabbing body { -webkit-user-select: none; user-select: none; }

/* ---------- Indicateur discret (tactile ou petits écrans) ---------- */
/* Collé au bord de l'écran et très fin : reste hors de la marge de 16 px et des ombres des cartes */
html.sh-indicator .sh-rail {
  --sh-w: 4px;
  --sh-comb-w: 10px;
  --sh-louse-w: 6px;
  --sh-gutter: 3px;
  pointer-events: none;
  cursor: auto;
  touch-action: auto;
}
html.sh-indicator .sh-rail.is-ready { opacity: .55; }
html.sh-indicator .sh-rail__track {
  border: 0;
  background: var(--line, var(--mint));
  background: color-mix(in srgb, var(--ink) 10%, transparent);
}
html.sh-indicator .sh-comb__spine { stroke-width: 2; }
html.sh-indicator .sh-puff { display: none; }

/* Sous 900 px, le CTA collant occupe le bas de l'écran */
@media (max-width: 900px) {
  .sh-rail { bottom: 90px; }
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  .sh-rail,
  .sh-comb__flip,
  .sh-louse__dir { transition: none; }
  .sh-louse__body,
  .sh-rail.is-running .sh-louse__leg { animation: none !important; }
  .sh-rail.is-caught .sh-louse__body { animation: none; opacity: 0; }
  .sh-puff { display: none; }
}

@media print {
  .sh-rail { display: none; }
}