/* ============================================================
   Diaspo'Actif — Moteur de tutoriels interactifs (Guided Tour)
   Feuille de style. Aucune dependance externe.
   Couleur d'accent alignee sur l'accent reel des pages ou le
   moteur est utilise (#2563EB — bleu de inscription.html et des
   tableaux de bord), pas sur l'orange de la marque marketing.
   ============================================================ */
:root{
  --gt-accent:#2563EB;
  --gt-accent-soft:rgba(37,99,235,.35);
  --gt-accent-glow:rgba(37,99,235,.55);
  --gt-ink:#0F172A;
  --gt-muted:#64748B;
  --gt-bg:#ffffff;
  --gt-border:#E2E8F0;
  --gt-success:#16A34A;
  --gt-radius:16px;
}

/* ---------- Overlay (assombrit la page, decoupe un trou sur la cible) ---------- */
.gt-overlay{
  position:fixed; inset:0; z-index:99990;
  background:rgba(10,14,28,.55);
  transition:clip-path .35s cubic-bezier(.4,0,.2,1);
  cursor:default;
}
.gt-overlay.gt-noclip{ clip-path:none; }
.gt-overlay-nudge{ animation:gt-nudge .32s ease; }
@keyframes gt-nudge{
  0%,100%{ background:rgba(10,14,28,.55); }
  50%{ background:rgba(37,60,120,.6); }
}

/* ---------- Anneau lumineux autour de l'element cible ---------- */
.gt-spotlight{
  position:fixed; z-index:99991; pointer-events:none;
  border-radius:12px;
  box-shadow:0 0 0 3px var(--gt-accent), 0 0 24px 6px var(--gt-accent-glow);
  transition:top .35s cubic-bezier(.4,0,.2,1), left .35s cubic-bezier(.4,0,.2,1),
             width .35s cubic-bezier(.4,0,.2,1), height .35s cubic-bezier(.4,0,.2,1);
}
.gt-spotlight.gt-anim-halo{ animation:gt-halo 1.8s ease-in-out infinite; }
@keyframes gt-halo{
  0%,100%{ box-shadow:0 0 0 3px var(--gt-accent), 0 0 18px 4px var(--gt-accent-glow); }
  50%{ box-shadow:0 0 0 3px var(--gt-accent), 0 0 34px 12px var(--gt-accent-glow); }
}
.gt-spotlight.gt-anim-pulse{ animation:gt-pulse 1.4s ease-in-out infinite; }
@keyframes gt-pulse{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.025); }
}
.gt-spotlight.gt-anim-shake{ animation:gt-shake .5s ease; }
@keyframes gt-shake{
  0%,100%{ transform:translateX(0); }
  20%{ transform:translateX(-6px); }
  40%{ transform:translateX(6px); }
  60%{ transform:translateX(-4px); }
  80%{ transform:translateX(4px); }
}
.gt-spotlight.gt-anim-zoom{ animation:gt-zoom .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes gt-zoom{
  0%{ transform:scale(.92); opacity:.4; }
  100%{ transform:scale(1); opacity:1; }
}

/* ---------- Fleche animee pointant vers l'action ---------- */
.gt-arrow{
  position:fixed; z-index:99992; pointer-events:none;
  width:34px; height:34px; color:var(--gt-accent);
  filter:drop-shadow(0 2px 6px rgba(37,99,235,.45));
}
.gt-arrow svg{ width:100%; height:100%; display:block; }
.gt-arrow.gt-arrow-bottom{ animation:gt-bob-down 1.1s ease-in-out infinite; }
.gt-arrow.gt-arrow-top{ animation:gt-bob-up 1.1s ease-in-out infinite; }
.gt-arrow.gt-arrow-left{ animation:gt-bob-left 1.1s ease-in-out infinite; }
.gt-arrow.gt-arrow-right{ animation:gt-bob-right 1.1s ease-in-out infinite; }
@keyframes gt-bob-down{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(8px); } }
@keyframes gt-bob-up{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
@keyframes gt-bob-left{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(-8px); } }
@keyframes gt-bob-right{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(8px); } }

/* ---------- Bulle explicative ---------- */
.gt-tooltip{
  position:fixed; z-index:99993;
  width:min(340px, calc(100vw - 32px));
  background:var(--gt-bg); color:var(--gt-ink);
  border-radius:var(--gt-radius);
  box-shadow:0 24px 60px -20px rgba(10,14,28,.45), 0 2px 8px rgba(10,14,28,.08);
  padding:18px 20px 16px;
  opacity:0; transform:scale(.92);
  transition:opacity .22s ease, transform .22s cubic-bezier(.34,1.56,.64,1), top .35s cubic-bezier(.4,0,.2,1), left .35s cubic-bezier(.4,0,.2,1);
}
.gt-tooltip.gt-visible{ opacity:1; transform:scale(1); }
.gt-tooltip.gt-center{ position:fixed; top:50%!important; left:50%!important; transform:translate(-50%,-50%) scale(.92); width:min(420px, calc(100vw - 32px)); }
.gt-tooltip.gt-center.gt-visible{ transform:translate(-50%,-50%) scale(1); }

.gt-tt-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:8px; }
.gt-tt-title{ font-size:15.5px; font-weight:800; line-height:1.3; margin:0; }
.gt-tt-close{
  flex:none; width:26px; height:26px; border-radius:50%; border:none;
  background:transparent; color:var(--gt-muted); font-size:16px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background .15s,color .15s;
}
.gt-tt-close:hover{ background:#F1F5F9; color:var(--gt-ink); }
.gt-tt-body{ font-size:13.5px; line-height:1.55; color:#334155; }
.gt-tt-body p{ margin:0 0 8px; }
.gt-tt-body p:last-child{ margin-bottom:0; }
.gt-tt-body ul{ margin:6px 0 0; padding-left:18px; }
.gt-tt-body li{ margin-bottom:3px; }

.gt-tt-waiting{
  margin-top:12px; display:flex; align-items:center; gap:8px;
  font-size:12px; font-weight:700; color:var(--gt-accent);
}
.gt-tt-waiting .gt-dotpulse{ width:7px; height:7px; border-radius:50%; background:var(--gt-accent); animation:gt-dotpulse 1s ease-in-out infinite; }
@keyframes gt-dotpulse{ 0%,100%{ opacity:.3; transform:scale(.8); } 50%{ opacity:1; transform:scale(1.15); } }

.gt-tt-check{
  margin-top:12px; display:flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:700; color:var(--gt-success);
  opacity:0; transform:translateY(4px) scale(.9);
  transition:opacity .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
}
.gt-tt-check.gt-show{ opacity:1; transform:translateY(0) scale(1); }
.gt-tt-check svg{ width:18px; height:18px; flex:none; }

.gt-tt-foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:16px; flex-wrap:wrap; }
.gt-tt-nav{ display:flex; gap:8px; }
.gt-btn{
  font-family:inherit; font-size:12.5px; font-weight:700; border-radius:9px; padding:8px 14px;
  cursor:pointer; border:1.5px solid transparent; transition:transform .12s ease, opacity .12s ease, background .15s;
  white-space:nowrap;
}
.gt-btn:active{ transform:scale(.96); }
.gt-btn:disabled{ opacity:.4; cursor:not-allowed; transform:none; }
.gt-btn-primary{ background:linear-gradient(135deg,var(--gt-accent),#1d4ed8); color:#fff; }
.gt-btn-primary:hover:not(:disabled){ box-shadow:0 6px 16px -4px var(--gt-accent-soft); }
.gt-btn-ghost{ background:transparent; color:var(--gt-muted); border-color:var(--gt-border); }
.gt-btn-ghost:hover{ border-color:#CBD5E1; color:var(--gt-ink); }
.gt-tt-skip{ font-size:11.5px; color:var(--gt-muted); background:none; border:none; cursor:pointer; text-decoration:underline; padding:4px 2px; }
.gt-tt-skip:hover{ color:var(--gt-ink); }

.gt-tt-tail{ position:absolute; width:14px; height:14px; background:var(--gt-bg); transform:rotate(45deg); border-radius:3px; }

/* ---------- Barre de progression (fixee en haut) ---------- */
.gt-progressbar{
  position:fixed; top:0; left:0; right:0; z-index:99994;
  background:var(--gt-bg); border-bottom:1px solid var(--gt-border);
  padding:10px 18px; box-shadow:0 4px 16px -8px rgba(10,14,28,.15);
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  transform:translateY(-100%); transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.gt-progressbar.gt-shown{ transform:translateY(0); }
.gt-pb-label{ font-size:12.5px; color:var(--gt-ink); white-space:nowrap; }
.gt-pb-label strong{ font-weight:800; }
.gt-pb-label span{ color:var(--gt-muted); }
.gt-pb-dots{ display:flex; gap:6px; align-items:center; }
.gt-pb-dot{ width:8px; height:8px; border-radius:50%; background:var(--gt-border); transition:background .2s,transform .2s; }
.gt-pb-dot.gt-done{ background:var(--gt-success); }
.gt-pb-dot.gt-current{ background:var(--gt-accent); transform:scale(1.4); animation:gt-dotpulse 1.2s ease-in-out infinite; }
.gt-pb-quit{ margin-left:auto; }

/* ---------- Confettis (canvas plein ecran, tres discret) ---------- */
.gt-confetti-canvas{ position:fixed; inset:0; z-index:99995; pointer-events:none; }

/* ---------- Ecran final ---------- */
.gt-finale{
  position:fixed; z-index:99996; top:50%; left:50%; transform:translate(-50%,-50%) scale(.9);
  background:var(--gt-bg); border-radius:20px; padding:32px 30px; text-align:center;
  width:min(360px, calc(100vw - 32px));
  box-shadow:0 30px 70px -20px rgba(10,14,28,.5);
  opacity:0; transition:opacity .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1);
}
.gt-finale.gt-visible{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.gt-finale-icon{ font-size:44px; margin-bottom:10px; }
.gt-finale h3{ margin:0 0 8px; font-size:18px; }
.gt-finale p{ margin:0 0 20px; font-size:13.5px; color:var(--gt-muted); line-height:1.55; }
.gt-finale ul{ text-align:left; margin:0 0 16px; padding-left:18px; font-size:12.5px; color:#334155; line-height:1.7; }

/* ---------- Bouton "Tutoriel" sous les cartouches ---------- */
.gt-launch-btn{
  margin-top:12px; width:100%;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font-family:inherit; font-size:12px; font-weight:700;
  color:#fff; background:#16A34A; border:1.5px solid #15803D;
  border-radius:9px; padding:8px 10px; cursor:pointer;
  transition:background .15s, border-color .15s, transform .12s;
}
.gt-launch-btn:hover{ background:#15803D; border-color:#166534; }
.gt-launch-btn:active{ transform:scale(.97); }

/* ---------- Bandeau de reprise ---------- */
.gt-resume-banner{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:99989;
  max-width:460px; margin:0 auto;
  background:var(--gt-ink); color:#fff; border-radius:14px;
  padding:14px 16px; display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  box-shadow:0 20px 50px -18px rgba(10,14,28,.55);
  opacity:0; transform:translateY(12px); transition:opacity .25s ease, transform .25s ease;
}
.gt-resume-banner.gt-visible{ opacity:1; transform:translateY(0); }
.gt-resume-banner span{ font-size:12.5px; flex:1; min-width:180px; line-height:1.4; }
.gt-resume-banner .gt-btn{ padding:7px 12px; }

/* ---------- Accessibilite clavier : focus visible sur nos boutons ---------- */
.gt-btn:focus-visible, .gt-tt-close:focus-visible, .gt-launch-btn:focus-visible{
  outline:3px solid var(--gt-accent-soft); outline-offset:2px;
}

/* ---------- Mobile : bulle en feuille fixee en bas de l'ecran ---------- */
@media (max-width:640px){
  .gt-tooltip:not(.gt-center){
    position:fixed!important; left:0!important; right:0!important; top:auto!important; bottom:0!important;
    width:100%; max-width:none; border-radius:18px 18px 0 0;
    transform:translateY(16px);
    padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));
  }
  .gt-tooltip.gt-visible:not(.gt-center){ transform:translateY(0); }
  .gt-tt-tail{ display:none; }
  .gt-progressbar{ padding:8px 12px; gap:8px; }
  .gt-pb-label{ font-size:11.5px; }
  .gt-resume-banner{ left:10px; right:10px; bottom:10px; }
}

@media (prefers-reduced-motion:reduce){
  .gt-spotlight, .gt-arrow, .gt-overlay, .gt-tooltip, .gt-progressbar{ transition:none!important; animation:none!important; }
}