/* ===== Démo v2 : rythme, frise de dates, kanban corrigé (se charge après le style principal) ===== */

/* Kanban : l'animation d'apparition ne rejoue plus à chaque rendu et ne bloque plus le déplacement */
.sy-cd{animation:none}
.sy-cd.fresh{animation:syIn .45s cubic-bezier(.2,.8,.2,1) backwards}
.sy-cd.landed{background:#fff;box-shadow:0 0 0 2px #94a9f1,0 10px 22px -14px rgba(36,70,185,.6);animation:syLand .6s cubic-bezier(.2,.8,.2,1)}
@keyframes syLand{0%{transform:scale(.94);opacity:.4}60%{transform:scale(1.03);opacity:1}100%{transform:none}}
.sy-cd.ghosted,.sy-steps .ed.ghosted{opacity:.3}
.sy-cd .acts .tel{display:inline-flex;align-items:center;line-height:0}
.sy-kc.over{background:#e3f7ea;border-color:#16a34a}
.sy-kfold .cnt.bump{animation:syBump .5s ease-out}
@keyframes syBump{50%{transform:scale(1.35);background:#fde2e2;color:#c0392b}}

/* Carte qui suit la souris : un calque au-dessus de l'appli, jamais coupé par le défilement du tableau */
.sy-dragw{position:absolute;z-index:25;pointer-events:none;left:0;top:0}
.sy-dragw.sy-steps{padding:0;border:0;background:none;box-shadow:none}
.sy-dragw>*{background:#fff;box-shadow:0 18px 34px -14px rgba(15,23,42,.5);animation:none!important;opacity:1}

/* Mise en surbrillance plus douce : fondu du voile et du halo, plus de glissement depuis l'ancienne position */
.sy-spot{transition:none}
.sy-spot.d2in{animation:d2SpotIn .7s cubic-bezier(.25,.8,.25,1) both}
@keyframes d2SpotIn{from{opacity:0;box-shadow:0 0 0 9999px rgba(11,17,40,0)}to{opacity:1;box-shadow:0 0 0 9999px rgba(11,17,40,.28)}}
.sy-spot::after{animation:syHalo 2.6s ease-out .6s infinite;border-width:2px;opacity:.85}
.sy-spot.nudge::after{animation-duration:1.6s;border-width:2.5px}
.sy-tip{transition:none}
.sy-tip.d2in{animation:d2TipIn .55s cubic-bezier(.25,.8,.25,1) .1s both}
@keyframes d2TipIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Bulles : style de la page de Joshua (pas de contour ni d'anneau bleu) ; en plein écran, les bulles « Lecture »
   s'affichent dans le bandeau du haut (règle de app.css) */

/* Bulle « Continuer » : le visiteur avance à son rythme */
.sy-tip .sy-nx{display:inline-flex;align-items:center;gap:8px;margin-top:12px;padding:9px 14px;border-radius:10px;background:var(--brand);color:#fff;font:800 13px/1 var(--display);cursor:pointer;border:0;box-shadow:0 8px 18px -10px rgba(36,70,185,.8);animation:syNx .4s .25s both}
.sy-tip .sy-nx:hover{filter:brightness(1.08)}
.sy-tip .sy-nx svg{width:14px;height:14px}
@keyframes syNx{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.sy-tip.free.nxt{width:340px}
.sy-tip .sy-gain{display:block;margin-top:8px;padding:8px 10px;border-radius:9px;background:#eefaf3;color:#16794f;font-size:12.5px;font-weight:700}
.sy-tip .sy-orc{font-size:12px;color:var(--ink-3);font-weight:600;margin-top:8px}

/* Frise de dates */
.sy-date{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:#f1f4fd;color:var(--brand);font:800 12px/1 var(--display);white-space:nowrap}
.sy-date svg{width:13px;height:13px}
.sy-date.flip{animation:syDate .6s cubic-bezier(.2,.8,.2,1)}
@keyframes syDate{0%{transform:translateY(-6px);opacity:0;background:#593ece;color:#fff}60%{background:#593ece;color:#fff}100%{transform:none;opacity:1}}
.sy-later .d{display:inline-block;margin-bottom:10px;padding:6px 12px;border-radius:999px;background:var(--brand);color:#fff;font-size:13px;font-weight:800;letter-spacing:0}
.sy-later{text-align:center}

/* Publication : les sites s'allument un à un */
.sy-pub{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:14px 0 4px}
.sy-pub span{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:6px 8px;border-radius:10px;border:1px solid var(--ln);background:#fff;font-size:11.5px;font-weight:700;color:var(--tx2);text-align:center;opacity:.45;transition:opacity .3s,border-color .3s,background .3s}
.sy-pub span.on{opacity:1;border-color:#bfe8cf;background:#f1fbf5;color:#16794f}
.sy-pub span.on::before{content:"✓";font-weight:900}
.sy-pubh{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;font-weight:800;color:var(--ink)}
.sy-pubh em{font-style:normal;color:#16794f}

/* Note en cours de saisie sur la fiche */
.sy-fiche .sy-ed.sm .tx.typing,.sy-fiche .sy-ed.sm .tx.f{color:var(--ink);font-size:12.5px;line-height:1.5;white-space:pre-wrap}
.sy-fiche .sy-ed.sm{transition:box-shadow .3s}
.sy-fiche .sy-ed.sm.hl{box-shadow:0 0 0 2px #94a9f1}
.sy-share-opt{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;font-size:12.5px;color:var(--tx2)}

@media (max-width:760px){
  .sy-tip.free.nxt{width:auto}
  .sy-pub{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sy-date{padding:4px 8px;font-size:11px}
  .sy-date svg{display:none}
  /* Barre de progression sur une ligne : « Passer » au lieu de « Passer cette étape » */
  #sySkip{font-size:0!important;white-space:nowrap}
  #sySkip::after{content:"Passer";font-size:12px}
  /* La bulle d'aide flottante masquait le bouton « Suivant » de la démo */
  body:has(.view.on[data-view="demo"]) #symbiose-assist{display:none!important}
}

/* Sortie de la démo : la carte s'efface, puis un voile du dégradé se dissipe sur le site */
.view[data-view="demo"].dm-leave .dm-card{animation:d2Leave .32s cubic-bezier(.4,0,.2,1) both!important}
.view[data-view="demo"].dm-leave .dm-back,.view[data-view="demo"].dm-leave .sy-tip{opacity:0;transition:opacity .25s ease}
@keyframes d2Leave{from{opacity:1;transform:none}to{opacity:0;transform:translateY(10px) scale(.97)}}
.dm-veil{position:fixed;inset:0;z-index:115;pointer-events:none;background:linear-gradient(160deg,var(--nuit) 0%,var(--c2) 58%,var(--c5) 100%);animation:d2Veil .55s cubic-bezier(.4,0,.2,1) .04s both}
@keyframes d2Veil{from{opacity:1}to{opacity:0}}

/* (repris de la page de Joshua, version du 3 nov.) */
/* bulles « Lecture » : affichées dans le bandeau du haut, hors du cadre, pour ne jamais cacher ce qui se passe dans la démo */
@media (min-width:761px){
  .view.on[data-view="demo"] .sy-tip.free{position:fixed;z-index:3;top:16px!important;bottom:auto;left:50%!important;right:auto;transform:translateX(-50%);width:min(780px,calc(100vw - 440px));min-height:52px;display:flex!important;align-items:center;gap:14px;padding:9px 18px;border-radius:16px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);box-shadow:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;transition:none;animation:dmFade .35s ease both}
  .view.on[data-view="demo"] .sy-tip.free[style*="display: none"],.view.on[data-view="demo"] .sy-tip.free[style*="display:none"]{display:none!important}
  .view.on[data-view="demo"] .sy-tip.free .play{flex:none;margin:0;color:#c9d5ff}
  .view.on[data-view="demo"] .sy-tip.free .play i b{background:#c9d5ff}
  .view.on[data-view="demo"] .sy-tip.free p{margin:0;font-size:14px;line-height:1.45;color:#fff}
}