/* =============================================================
   MNEMO — 06 — TIMELINE
   Ruler timeline avec thumbs, zoom, curseur, tags.
   ============================================================= */

/* ------ MODE VERTICAL — RULER TIMELINE -----------------------
   Barre verticale à droite, ~90px de large, toute la hauteur.
   ------------------------------------------------------------ */

.ruler-wrap.ruler-vertical {
  flex: 0 0 auto;
  width: 94px;
  /* Gouttière des graduations, réservée le long du bord droit. Tout le reste s'y
     réfère : les vignettes s'alignent juste à sa gauche, les bandes de moments
     s'arrêtent dessus. C'est LA correction de fond de cette barre — chaque
     position y était écrite en pixels durs calibrés sur 94 px de large
     (`left: 58px`, `left: 30px`, `right: 14px`), alors que la media query
     mobile la réduit à 80 px. Les 14 px manquants décalaient tout : les
     vignettes glissaient sur les graduations, qui disparaissaient derrière
     elles. Exprimé relativement, l'agencement tient aux deux largeurs. */
  --ruler-grad: 13px;
  height: 100%;
  min-height: 0;
  border-top: none;
  border-left: 1px solid var(--border);
  background: linear-gradient(to left, rgba(var(--carte-rgb), 0.98) 50%, rgba(var(--carte-rgb), 0.75));
  padding-bottom: 0;
  position: relative;
  /* Pas d'overflow:hidden ici : on a besoin que le bouton de zoom flottant
     puisse déborder à gauche dans la zone du carousel.
     Le scroll interne est géré par .ruler-scroll qui a son propre overflow. */
  overflow: visible;
}

/* Les contrôles .ruler-zoom-* n'existent qu'en horizontal : en vertical le JSX
   rend .ruler-floating-zoom (défini plus bas). Les trois règles
   `.ruler-vertical .ruler-zoom-*` qui vivaient ici n'avaient donc aucune cible. */

.ruler-vertical .ruler-scroll {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  /* padding: 50% 0; <-- À SUPPRIMER ! Géré en JS maintenant */
  touch-action: pan-y;
  scrollbar-width: none;
}
.ruler-vertical .ruler-scroll::-webkit-scrollbar { display: none; }

.ruler-vertical .ruler-content {
  height: auto;
  width: 100%;
  position: relative;
}

/* Indicateur fixe — en mode vertical, c'est une ligne HORIZONTALE au centre
   avec un triangle qui pointe vers la GAUCHE (vers le polaroid focus) */
.ruler-vertical .ruler-indicator {
  top: 50%;
  left: 0;
  right: 0;
  bottom: auto;
  height: 0;
  width: auto;
  transform: translateY(-50%);
}

.ruler-vertical .ruler-indicator-line {
  /* Ligne horizontale traversant TOUTE la barre. Avant : `left: 30px` /
     `right: 14px`, soit 31→66 px sur une barre de 80, alors que les vignettes
     s'étendent jusqu'à 77 — le trait du curseur s'arrêtait avant les photos
     qu'il est censé désigner. */
  top: 0;
  bottom: auto;
  left: 2px;
  right: 2px;
  width: auto;
  height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(to right,
    color-mix(in srgb, var(--playhead-color, var(--tampon)) 0%, transparent),
    var(--playhead-color, var(--tampon)) 30%,
    var(--playhead-color, var(--tampon)) 70%,
    color-mix(in srgb, var(--playhead-color, var(--tampon)) 0%, transparent)
  );
}

/* Badge d'heure du curseur : ancré à GAUCHE, du côté des libellés, et non plus
   `right: 4px`. Aligné à droite il faisait 64 px de large sur une barre de 80 :
   il se posait donc en plein sur la vignette voisine du curseur, la photo que
   le curseur désigne justement. À gauche et resserré, il reste dans la zone des
   libellés d'heure — la même logique qu'en horizontal, où il flotte au-dessus
   de la bande des vignettes et non dessus. */
.ruler-vertical .ruler-indicator-time {
  top: 50%;
  left: 3px;
  right: auto;
  transform: translate(0, calc(-50% - 14px));
  font-size: 9px;
  padding: 2px 5px;
  z-index: 6;
}

/* Bandes de moment en vertical : elles couvrent la voie des vignettes et
   s'arrêtent sur la gouttière des graduations. Avant, `right: 14px` les
   arrêtait 14 px avant le bord — soit au milieu des vignettes sur une barre de
   80 px, la bande et les photos qu'elle est censée regrouper ne coïncidant plus. */
.ruler-vertical .ruler-tag-band {
  left: 2px;
  right: var(--ruler-grad);
  top: auto; /* défini inline */
  bottom: auto;
  width: auto;
  height: auto; /* défini inline */
}

.ruler-vertical .ruler-tag-band-label {
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
}

/* Mini-contrôles de zoom flottants : positionnés À GAUCHE de la timeline verticale,
   dans la zone vide entre le carousel et la timeline. Ne masquent rien. */
.ruler-floating-zoom {
  position: absolute;
  top: 50%;
  /* La timeline fait 94px de large. On place les boutons à 50px à gauche de son bord
     gauche, ce qui les met dans l'espace vide entre le carousel et la timeline. */
  right: calc(100% + 8px);
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: rgba(var(--carte-rgb), 0.92);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  border: 1px solid rgba(var(--encre-rgb), 0.1);
  border-radius: calc(10px * var(--r-k));
  padding: 4px;
  box-shadow: 0 4px 14px rgba(var(--ombre-rgb), 0.275);
  z-index: 25;
}

.ruler-floating-zoom-btn {
  width: 26px;
  height: 26px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: calc(6px * var(--r-k));
  color: rgba(var(--encre-rgb), 0.85);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.ruler-floating-zoom-btn:hover:not(:disabled) {
  background: rgba(var(--encre-rgb), 0.125);
  color: var(--text);
}
.ruler-floating-zoom-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.ruler-floating-zoom-level {
  width: 26px;
  padding: 3px 0;
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(var(--encre-rgb), 0.12);
  border-bottom: 1px solid rgba(var(--encre-rgb), 0.12);
  color: rgba(var(--encre-rgb), 0.75);
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: center;
  cursor: pointer;
  transition: color 0.12s;
}
.ruler-floating-zoom-level:hover {
  color: var(--text);
}

/* Ticks mineurs : petit trait horizontal à droite */
.ruler-vertical .ruler-tick-minor {
  top: auto; 
  bottom: auto; /* <-- AJOUT CRUCIAL */
  left: auto;
  right: 0;
  width: 4px;
  height: 1px;
  transform: translateY(-50%);
  background: rgba(var(--encre-rgb), 0.14);
}

/* Ticks majeurs */
.ruler-vertical .ruler-tick-major {
  top: auto;
  bottom: auto; /* <-- AJOUT CRUCIAL */
  left: auto;
  right: 0;
  width: 8px;
  height: 1.5px;
  transform: translateY(-50%);
  background: rgba(var(--carte-rgb), 0.45);
}

/* Libellés d'heure : à GAUCHE, dans la zone laissée par les vignettes.
   Resserrés (10 px, padding réduit) : sur une barre de 80 px, trois voies
   disjointes ne rentrent pas — 39 px de plaque + 36 px de vignette + 13 px de
   graduations font 88. Le libellé empiète donc encore de quelques pixels sur
   les vignettes larges, mais c'est précisément à ça que sert sa plaque opaque
   avec flou : il se lit par-dessus, comme prévu, au lieu de se perdre. */
.ruler-vertical .ruler-tick-label {
  top: auto;
  bottom: auto;
  left: 2px;
  right: auto;
  transform: translateY(-50%);
  font-size: 10px;
  font-weight: 700;
  color: rgba(var(--encre-rgb), 0.7);
  font-family: 'Figtree', sans-serif;
  letter-spacing: 0.02em;
  background: rgba(var(--carte-rgb), 0.82);
  padding: 1px 4px;
  border-radius: calc(4px * var(--r-k));
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 5;
  pointer-events: none;
}
.ruler-vertical .ruler-tick-label-sm {
  font-size: 10px;
  opacity: 0.65;
}

/* Vignettes en vertical : calées contre la gouttière des graduations, pas
   centrées sur une abscisse fixe. Avant : `left: 58px` + `translateX(-50%)`,
   soit un centre à 58 px — pensé pour une barre de 94, il plaçait les vignettes
   à 40→76 px sur une barre de 80, donc PAR-DESSUS les graduations du bord droit,
   qui devenaient invisibles. En s'alignant à droite sur la gouttière, elles
   laissent les graduations libres quelle que soit la largeur de la barre et
   quelle que soit la taille de la vignette (36 à 46 px selon le cluster). */
.ruler-vertical .ruler-thumb {
  top: auto; /* défini inline par tToX(cl.centerTime) */
  left: auto;
  right: calc(var(--ruler-grad) + 4px);
  bottom: auto;
  transform: translateY(-50%);
}

.ruler-vertical .ruler-thumb:hover {
  transform: translateY(-50%) scale(1.08);
}


/* Cartes de fond en vertical : empilement haut/bas au lieu de gauche/droite */
.ruler-vertical .ruler-thumb-back-1 {
  transform: translate(0, -70%) scale(0.85);
}
.ruler-vertical .ruler-thumb-back-2 {
  transform: translate(0, 70%) scale(0.85);
}

/* Hover : les cartes s'écartent davantage sur l'axe temporel (vertical) */
.ruler-vertical .ruler-thumb-cluster:hover .ruler-thumb-back-1 {
  transform: translate(-2px, -95%) scale(0.88);
  opacity: 1;
}
.ruler-vertical .ruler-thumb-cluster:hover .ruler-thumb-back-2 {
  transform: translate(-2px, 95%) scale(0.88);
  opacity: 1;
}

/* Le FAB en mode vertical : décalé pour ne pas chevaucher la ruler verticale */
.stage-vertical ~ .fab {
  bottom: calc(20px + env(safe-area-inset-bottom));
  right: calc(94px + 16px);
}


/* ------ RULER TIMELINE (horizontal) ------------------------ */

.ruler-wrap {
  flex: 0 0 auto;
  position: relative;
  height: 172px;
  background: linear-gradient(to top, rgba(var(--carte-rgb), 0.98) 50%, rgba(var(--carte-rgb), 0.75));
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
  user-select: none;
  z-index: 2;
}

/* Contrôles de zoom (flottants en haut à gauche de la règle) */
.ruler-zoom-controls {
  position: absolute;
  top: 6px;
  left: 10px;
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: calc(999px * var(--r-k));
  background: rgba(var(--carte-rgb), 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  box-shadow: 0 4px 14px rgba(var(--ombre-rgb), 0.22);
}

.ruler-zoom-btn {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--text-dim);
  transition: all 0.15s;
}
.ruler-zoom-btn:hover:not(:disabled) {
  background: rgba(var(--tampon-rgb), 0.18);
  color: var(--pink);
}
.ruler-zoom-btn:active:not(:disabled) { transform: scale(0.9); }
.ruler-zoom-btn:disabled { opacity: 0.3; cursor: not-allowed; }

.ruler-zoom-level {
  padding: 0 10px;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  min-width: 52px;
  text-align: center;
  border-radius: calc(999px * var(--r-k));
  transition: color 0.15s;
  cursor: pointer;
}
.ruler-zoom-level:hover { color: var(--cyan); }

.empty-ruler {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70px;
}
.ruler-empty-hint {
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* Indicateur fixe — triangle pointant vers le bas + ligne verticale */
.ruler-indicator {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: env(safe-area-inset-bottom);
  width: 0;
  pointer-events: none;
  z-index: 20;
  transform: translateX(-50%);
}

/* Ligne verticale fine et blanche traversant les thumbs */
.ruler-indicator-line {
  position: absolute;
  top: 52px;     /* commence juste au-dessus des thumbs (zone labels en haut) */
  bottom: 30px;  /* s'arrête au-dessus des labels d'heure en bas */
  left: 0;
  width: 1.5px;
  background: rgba(var(--carte-rgb), 0.9);
  transform: translateX(-50%);
  border-radius: calc(1px * var(--r-k));
}

/* Deux petits points aux extrémités de la ligne (tangents aux thumbs) */
.ruler-indicator-dot {
  position: absolute;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tampon);
  transform: translateX(-50%);
  box-shadow:  0 1px 3px rgba(var(--ombre-rgb), 0.3), 0 1px 2px rgba(var(--ombre-rgb), 0.3);
}
.ruler-indicator-dot-top    { top: -3px; }
.ruler-indicator-dot-bottom { bottom: -3px; }

/* En vertical le trait du curseur est HORIZONTAL : ses deux points doivent donc
   se poser à ses extrémités gauche et droite, pas en haut et en bas. Ils
   gardaient `top`/`bottom: -3px` et se retrouvaient empilés au milieu de la
   barre, l'un sur l'autre, tous deux par-dessus une vignette — d'où les deux
   pastilles qui semblaient flotter sans rien désigner. */
.ruler-vertical .ruler-indicator-dot {
  top: 0;
  bottom: auto;
}
.ruler-vertical .ruler-indicator-dot-top {
  left: 2px;
  right: auto;
  transform: translate(-50%, -50%);
}
.ruler-vertical .ruler-indicator-dot-bottom {
  left: auto;
  right: 2px;
  transform: translate(50%, -50%);
}

/* Badge d'heure bleu flottant au-dessus de la ligne */
.ruler-indicator-time {
  position: absolute;
  top: 14px;
  left: 0;
  transform: translateX(-50%);
  padding: 5px 11px;
  border-radius: calc(10px * var(--r-k));
  /* Plaque d'heure du curseur : tampon plein, cohérent avec le trait du
     curseur. L'ancien dégradé cyan restait du thème néon. */
  background: var(--tampon);
  color: var(--papier);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: 0 3px 9px rgba(var(--ombre-rgb), 0.22);
}

/* Petit pointeur sous le badge d'heure (comme une bulle de BD) */
.ruler-indicator-time::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 8px;
  height: 8px;
  /* Même encre que le badge. Elle était restée à var(--bleue) quand le badge est
     passé du dégradé néon au tampon plein : le carré pivoté se lisait comme un
     losange bleu détaché sous la pastille, sans rapport avec elle. */
  background: var(--tampon);
  transform: translateX(-50%) rotate(45deg);
  border-radius: calc(2px * var(--r-k));
  z-index: -1;
}

/* `.ruler-indicator-triangle` n'est plus rendu dans aucune orientation — le JSX
   pose deux `.ruler-indicator-dot` aux extrémités du trait. Ses deux règles ont
   été retirées plutôt que laissées à masquer un élément inexistant. */

/* Container scrollable — padding-inline 50 % pour que tout point puisse se centrer */
.ruler-scroll {
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* padding: 0 50%; <-- À SUPPRIMER ! Géré en JS maintenant */
  scroll-behavior: auto;
  touch-action: pan-x;
}
.ruler-scroll::-webkit-scrollbar { display: none; }

.ruler-content {
  position: relative;
  height: 100%;
}

/* Bandes colorées des tags (arrière-plan) — zone où les thumbs vivent */
.ruler-tag-band {
  position: absolute;
  top: 50px;
  bottom: 48px; /* laisse place aux ticks + labels en bas */
  border-radius: calc(6px * var(--r-k));
  border: 1px solid;
  opacity: 0.22;
  mix-blend-mode: screen;
  pointer-events: none;
  transition: opacity 0.3s ease, box-shadow 0.3s ease;
}
.ruler-tag-band-active {
  opacity: 0.55;
  box-shadow: 0 0 20px currentColor;
}
.ruler-tag-band-label {
  position: absolute;
  top: 4px;
  left: 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow: 0 0 8px currentColor;
  opacity: 0.9;
  pointer-events: none;
  white-space: nowrap;
}

/* Graduations mineures (petits traits) — très discrets */
.ruler-tick-minor {
  position: absolute;
  bottom: 34px;
  height: 6px;
  width: 1px;
  background: rgba(var(--encre-rgb), 0.14);
  transform: translateX(-50%);
  pointer-events: none;
}

/* Graduations majeures (plus visibles mais fines) */
.ruler-tick-major {
  position: absolute;
  bottom: 34px;
  height: 10px;
  width: 1.5px;
  background: rgba(var(--carte-rgb), 0.42);
  transform: translateX(-50%);
  pointer-events: none;
}

/* Labels d'heure EN BAS, police plus grande */
.ruler-tick-label {
  position: absolute;
  bottom: 6px;
  transform: translateX(-50%);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(var(--encre-rgb), 0.75);
  pointer-events: none;
  white-space: nowrap;
  font-family: 'Figtree', sans-serif;
}
.ruler-tick-label-sm {
  font-size: 11px;
  opacity: 0.65;
}

/* Mini thumbnails des photos */
/* Mini thumbnails / clusters de la timeline
   Position : bottom-aligné pour que les gros clusters "montent" comme un histogramme.
   La largeur et la hauteur sont définies en inline par le JS. */
.ruler-thumb {
  position: absolute;
  bottom: 56px;
  /* width/height inline */
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transform: translateX(-50%);
  transition: transform 0.2s ease, opacity 0.25s ease, filter 0.25s ease;
}

/* Carte principale (la photo représentante) — style polaroid mini */
.ruler-thumb-front {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: calc(4px * var(--r-k));
  overflow: hidden;
  background: var(--carte);
  padding: 2px 2px 4px;
  box-shadow:
    0 3px 10px rgba(var(--ombre-rgb), 0.275),
    0 0 0 1px rgba(var(--ombre-rgb), 0.083);
  z-index: 3;
}

.ruler-thumb img,
.ruler-thumb canvas {
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
  display: block;
  border-radius: calc(2px * var(--r-k));
}

/* Cartes de fond : une à gauche et une à droite de la carte principale,
   qui dépassent pour créer un effet "photos alignées côte à côte" */
.ruler-thumb-back {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border-radius: calc(4px * var(--r-k));
  overflow: hidden;
  background: var(--carte);
  padding: 2px 2px 4px;
  box-shadow: 0 2px 6px rgba(var(--ombre-rgb), 0.275);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
/* Carte de GAUCHE : dépasse à gauche de la principale */
.ruler-thumb-back-1 {
  transform: translate(-70%, 0) scale(0.85);
  z-index: 1;
  opacity: 0.85;
  filter: brightness(0.88);
}
/* Carte de DROITE : dépasse à droite */
.ruler-thumb-back-2 {
  transform: translate(70%, 0) scale(0.85);
  z-index: 1;
  opacity: 0.85;
  filter: brightness(0.88);
}

/* Hover : les cartes s'écartent plus */
.ruler-thumb-cluster:hover .ruler-thumb-back-1 {
  transform: translate(-95%, -2px) scale(0.88);
  opacity: 1;
}
.ruler-thumb-cluster:hover .ruler-thumb-back-2 {
  transform: translate(95%, -2px) scale(0.88);
  opacity: 1;
}

/* Badge +N pour les clusters — pastille bleue/indigo cohérente avec le playhead */
.ruler-thumb-badge {
  position: absolute;
  top: -7px;
  right: -8px;
  z-index: 6;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: calc(10px * var(--r-k));
  color: var(--sur-grad) !important;
  background: linear-gradient(135deg, var(--bleue), var(--bleue)) !important;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 2px 8px rgba(var(--ombre-rgb), 0.3),
    0 0 0 2px rgba(var(--ombre-rgb), 0.3);
  pointer-events: none;
  letter-spacing: 0;
  font-family: 'Figtree', sans-serif;
}

/* Mini badge ▶ pour les thumbs vidéo de la timeline (coin bas droit) */
.ruler-thumb-play {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(var(--carte-rgb), 0.7);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 1px; /* compense l'asymétrie du triangle */
  pointer-events: none;
}

.ruler-thumb:hover {
  transform: translateX(-50%) translateY(-3px) scale(1.08);
  z-index: 10 !important;
}

.ruler-thumb.ruler-thumb-dimmed {
  opacity: 0.32;
  filter: saturate(0.3);
}
/* (focus retiré de la timeline : pas de class -focused, pas de glow, pas d'anim.
   Évite les re-renders en cascade lors d'un swipe rapide du carousel.) */