/* ============================================================
   Effets visuels Sextant : groupe « tiroir-rdv » (16/09/2026)
   Tiroir Rendez-vous de la fiche client (languette au bord droit).
   35 Le tiroir s'ouvre comme une porte
   32 Le compte rendu s'écrit au fil de la plume (mots posés par js/fx/tiroir-rdv.js)
   33 RENDEZ-VOUS s'allume lettre à lettre (lettres posées par js/fx/tiroir-rdv.js)
   Aucune taille ni position changée au repos, couleurs issues des tokens.
   Sous 900 px le tiroir est masqué par main.css : ces règles n'ont aucun effet.
   ============================================================ */

/* ---------- 35 Le tiroir s'ouvre comme une porte ----------
   Les gonds sont au bord droit de l'écran : à l'ouverture, les colonnes de contenu
   pivotent autour de leur bord droit (rotation plafonnée à 38°, perspective 1400 px),
   dans la pénombre, puis arrivent parfaitement à plat (image clé finale implicite :
   transform et filter de l'application, texte net).
   Contrôle du 16/09/2026 : au repos (tiroir fermé), rien n'est posé sur les colonnes
   (ni transform, ni filter, ni perspective : aucune couche 3D filtrée permanente).
   La porte est une animation jouée à l'ouverture seulement ; à la fermeture, le
   contenu sort à plat avec le panneau.
   La languette ne tourne pas. Le glissement du panneau garde sa courbe. */
#timelinePanel.timeline-panel{
  transition:transform .45s cubic-bezier(.3,1.1,.35,1);
}
#timelinePanel.timeline-panel:is(:hover,:focus-within){
  perspective:1400px;
  perspective-origin:100% 50%;
  box-shadow:0 16px 44px -16px rgba(0,0,0,.55),-34px 0 70px -12px rgba(0,0,0,.65);
}
body.light-theme #timelinePanel.timeline-panel:is(:hover,:focus-within){
  box-shadow:0 10px 34px -12px color-mix(in srgb,var(--text) 12%,transparent),-26px 0 60px -14px rgba(0,0,0,.2);
}
/* courbe sans dépassement : le bord libre ne passe jamais au-delà du plat.
   Le formulaire (.tl-form, affiché par « Nouveau RDV » ou « Modifier » tiroir déjà
   ouvert) ne pivote pas : une animation se rejouerait à chacune de ses apparitions. */
#timelinePanel.timeline-panel:is(:hover,:focus-within) > :not(.rdv-handle, .tl-form){
  transform-origin:100% 50%;
  animation:fx-tiroir-rdv-porte .45s cubic-bezier(.2,.8,.2,1) backwards;
}
@keyframes fx-tiroir-rdv-porte{
  from{transform:rotateY(-38deg);opacity:.55}
}

/* ---------- 32 Le compte rendu s'écrit au fil de la plume ----------
   Spans en ligne (display inline : mêmes coupures de ligne que le texte brut),
   encre bleutée floue qui sèche vers la couleur normale du compte rendu
   (image clé finale implicite : couleur héritée, sans ombre). */
#timelinePanel .fx-tiroir-rdv-encre{animation:fx-tiroir-rdv-encre 260ms ease-out both}
#timelinePanel .fx-tiroir-rdv-bloc{animation:fx-tiroir-rdv-bloc 260ms ease-out both}
@keyframes fx-tiroir-rdv-encre{
  0%{opacity:0;color:var(--accent2)}
  55%{opacity:1;color:color-mix(in srgb,var(--accent2) 80%,transparent)}
}
@keyframes fx-tiroir-rdv-bloc{
  0%{opacity:0}
}

/* ---------- 33 RENDEZ-VOUS s'allume lettre à lettre ----------
   Une passe : la lueur remonte du S (rang 0) au R (rang 10), 90 ms par lettre,
   puis le calendrier se soulève d'un pixel. Rejouée toutes les 6 s par le JS
   tant qu'un rendez-vous passé attend son compte rendu, trois fois au plus par
   fiche (lettres découpées le temps de la passe seulement). Muette dès que le
   tiroir est ouvert. */
#timelinePanel .rdv-vlabel .fx-tiroir-rdv-go .fx-tiroir-rdv-lettre{
  animation:fx-tiroir-rdv-meche .72s ease-in-out both;
  animation-delay:calc(var(--fx-tiroir-rdv-r,0) * 90ms);
}
#timelinePanel .rdv-handle:has(.fx-tiroir-rdv-go) > svg{
  animation:fx-tiroir-rdv-anses .6s ease-in-out .95s both;
}
/* règles séparées : un navigateur sans :has() n'ignore que la règle du calendrier */
#timelinePanel:is(:hover,:focus-within) .rdv-vlabel .fx-tiroir-rdv-lettre{animation:none}
#timelinePanel:is(:hover,:focus-within) .rdv-handle:has(.fx-tiroir-rdv-go) > svg{animation:none}
@keyframes fx-tiroir-rdv-meche{
  50%{
    color:var(--text);
    text-shadow:0 0 6px color-mix(in srgb,var(--accent2) 70%,transparent),0 0 14px color-mix(in srgb,var(--accent) 45%,transparent);
  }
}
@keyframes fx-tiroir-rdv-anses{
  50%{
    transform:translateY(-1px);
    filter:drop-shadow(0 0 4px color-mix(in srgb,var(--accent) 60%,transparent));
  }
}

/* ---------- Réduire les animations : état final immédiat ---------- */
@media (prefers-reduced-motion: reduce){
  #timelinePanel.timeline-panel{transition:none}
  #timelinePanel.timeline-panel:is(:hover,:focus-within) > :not(.rdv-handle, .tl-form){animation:none}
  #timelinePanel .fx-tiroir-rdv-encre,
  #timelinePanel .fx-tiroir-rdv-bloc,
  #timelinePanel .rdv-vlabel .fx-tiroir-rdv-lettre{animation:none}
  #timelinePanel .rdv-handle:has(.fx-tiroir-rdv-go) > svg{animation:none}
}