/* Surcouche « visite guidée » posée sur la vraie app dupliquée.
   Le rendu de l'app vient de style.css ; ici uniquement le guide. */
:root{ --tour-focus:#ffd24d; }

/* voile d'assombrissement plein écran (n'intercepte pas les clics) */
#tourDim{ position:fixed; inset:0; z-index:9000; pointer-events:none; background:rgba(6,8,12,.72); }
#tourDim[hidden]{ display:none; }
/* surlignage posé DIRECTEMENT sur l'élément ciblé : il reste donc toujours aligné et suit la page */
.tour-spot{ position:relative; z-index:9000; border-radius:8px;
  box-shadow:0 0 0 3px var(--primary,#e21818), 0 0 0 9999px rgba(6,8,12,.72); }

#tourBubble{ position:fixed; z-index:9001; width:min(380px,92vw);
  background:var(--panel,#16171a); border:1px solid var(--primary,#e21818); border-radius:16px;
  box-shadow:0 14px 44px rgba(0,0,0,.55); padding:16px; display:flex; flex-direction:column; gap:12px;
  color:#e7eaef; transition:opacity .16s ease; font:400 15px/1.5 system-ui,Segoe UI,Roboto,Arial,sans-serif; }
#tourBubble[hidden]{ display:none; }
#tourBubble.is-moving{ opacity:0; }
.tcoach{ display:flex; align-items:center; gap:10px; }
.tmascot{ position:relative; width:40px; height:40px; border-radius:50%; flex:0 0 auto; background:#15171b;
  border:2px solid var(--primary,#e21818); display:flex; align-items:center; justify-content:center; gap:5px; }
.tmascot i{ width:7px; height:7px; border-radius:50%; background:var(--primary,#e21818); display:block; animation:tblink 3.6s infinite; }
@keyframes tblink{ 0%,92%,100%{ transform:scaleY(1);} 96%{ transform:scaleY(.1);} }
.tname{ font-weight:700; color:#fff; }
.twhere{ margin-left:auto; font-size:11px; color:#fff; background:rgba(226,24,24,.2); border:1px solid var(--primary,#e21818);
  border-radius:999px; padding:3px 9px; max-width:55%; text-align:right; }
.tmission{ font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--primary-2,#ef4a60); font-weight:700; }
#tourBubble h3{ margin:0; color:#fff; font-size:17px; }
#tourBubble p{ margin:6px 0 0; color:#dfe3e8; line-height:1.55; }
.tcheck{ margin-top:10px; padding:9px 11px; border-radius:9px; font-size:13.5px; line-height:1.45; font-weight:600; }
.tcheck.err{ background:rgba(226,24,24,.14); border:1px solid var(--primary,#e21818); color:#ffb4b4; }
.tcheck.ok{ background:rgba(27,143,90,.18); border:1px solid var(--ok,#1b8f5a); color:#7ff0bd; }
.tcheck[hidden]{ display:none; }
.tbtn.tact{ display:flex; width:100%; justify-content:center; margin-top:10px; min-height:38px;
  background:rgba(226,24,24,.16); border-color:var(--primary,#e21818); color:#fff; }
.tbtn.tact:hover{ background:rgba(226,24,24,.28); }
.tbtn.tact[hidden]{ display:none; }
.ttasks{ list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:7px; }
.ttasks li{ display:flex; align-items:center; gap:9px; color:#dfe3e8; font-size:14px; }
.ttasks li .chk{ width:20px; height:20px; border-radius:50%; border:1px solid var(--outline,#2a2e34); display:inline-flex;
  align-items:center; justify-content:center; font-size:12px; color:#aab2bd; flex:0 0 auto; }
.ttasks li.ok{ color:#fff; } .ttasks li.ok .chk{ background:var(--ok,#1b8f5a); border-color:var(--ok,#1b8f5a); color:#06281c; }
.tfoot{ display:flex; flex-direction:column; gap:10px; }
.tprog{ height:6px; border-radius:999px; background:rgba(255,255,255,.12); overflow:hidden; }
.tprog span{ display:block; height:100%; width:0; background:var(--primary,#e21818); transition:width .3s ease; }
.tactions{ display:flex; gap:8px; align-items:center; }
.tcount{ margin-right:auto; font-size:12px; color:#aab2bd; }
.tbtn{ cursor:pointer; font:inherit; font-weight:600; font-size:13px; min-height:34px; padding:6px 12px;
  border:1px solid var(--outline,#2a2e34); border-radius:10px; background:#1e2024; color:#fff; }
.tbtn.primary{ background:var(--primary,#e21818); border-color:var(--primary,#e21818); }
.tbtn.ghost{ background:transparent; color:#aab2bd; }
.tbtn:disabled{ opacity:.4; cursor:default; }

.tour-pulse{ animation:tpulse 1.2s ease-out infinite; border-radius:8px; }
@keyframes tpulse{ 0%{ box-shadow:0 0 0 0 rgba(226,24,24,.6);} 100%{ box-shadow:0 0 0 12px rgba(226,24,24,0);} }

#tourEnd{ position:fixed; inset:0; z-index:9002; display:grid; place-items:center; background:rgba(6,8,12,.86); }
#tourEnd[hidden]{ display:none; }
#tourEnd .card{ width:min(520px,92vw); text-align:center; background:var(--panel,#16171a); border:1px solid var(--outline,#2a2e34);
  border-radius:20px; padding:30px; color:#e7eaef; }
#tourEnd h2{ color:#fff; }
#tourEnd .row{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:14px; }
#tourEnd a, #tourEnd button{ display:inline-flex; align-items:center; min-height:42px; padding:10px 18px; border-radius:10px;
  border:1px solid var(--outline,#2a2e34); background:#1e2024; color:#fff; text-decoration:none; font-weight:600; cursor:pointer; }
#tourEnd a.primary{ background:var(--primary,#e21818); border-color:var(--primary,#e21818); }

#tourConfetti{ position:fixed; inset:0; z-index:9001; pointer-events:none; }
#tourConfetti[hidden]{ display:none; }

/* vraie visionneuse PDF, pleine hauteur, collée à droite (largeur réglable) */
#tourPdf{ position:fixed; right:0; top:0; bottom:0; z-index:9001; width:34vw; }
#tourPdf[hidden]{ display:none; }
#tourPdfResize{ position:absolute; left:0; top:0; bottom:0; width:9px; cursor:ew-resize; z-index:3;
  background:rgba(255,255,255,.06); border-right:1px solid rgba(0,0,0,.4); }
#tourPdfResize::before{ content:""; position:absolute; left:3px; top:50%; transform:translateY(-50%);
  width:3px; height:42px; border-radius:3px; background:var(--primary,#e21818); opacity:.85; }
#tourPdfResize:hover{ background:rgba(226,24,24,.25); }
.pdfv{ display:flex; flex-direction:column; height:100%; background:#323639; box-shadow:-14px 0 44px rgba(0,0,0,.55); }
.pdfv-bar{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 16px;
  background:#323639; color:#cdd2d8; border-bottom:1px solid #1f2225; font:600 13px system-ui,Segoe UI,Roboto,Arial,sans-serif; }
.pdfv-grp{ display:inline-flex; align-items:center; gap:8px; }
.pdfv-pg{ background:#3c4043; padding:2px 9px; border-radius:5px; font-size:12px; }
.pdfv-zoom{ display:inline-flex; align-items:center; gap:5px; background:#3c4043; padding:2px 6px; border-radius:6px; }
.pdfv-zb{ width:23px; height:23px; border:none; background:transparent; color:#e7eaef; font-size:16px; line-height:1; cursor:pointer; border-radius:4px; }
.pdfv-zb:hover{ background:#4a4f54; }
#pdfZoomLabel{ min-width:46px; text-align:center; font-size:12px; }
.pdfv-ic{ font-size:15px; color:#aab2bd; }
.pdfv-body{ flex:1 1 auto; overflow:hidden; overscroll-behavior:contain; background:#525659; padding:24px; text-align:center; cursor:grab; touch-action:none; }
.pdfv-body.grabbing{ cursor:grabbing; }
.pdfv-sheet{ display:inline-block; vertical-align:top; text-align:left; box-sizing:border-box; background:#fff; color:#1c1c1c;
  width:450px; aspect-ratio:210 / 297; padding:46px 52px 40px; font:400 12.5px/1.55 Arial,Helvetica,sans-serif; box-shadow:0 6px 22px rgba(0,0,0,.45); }
.pdfd-head{ display:flex; align-items:center; gap:14px; border-bottom:2px solid #15448f; padding-bottom:12px; }
.pdfd-logo{ font-size:30px; }
.pdfd-org{ display:flex; flex-direction:column; line-height:1.2; }
.pdfd-org b{ font-size:17px; letter-spacing:.5px; }
.pdfd-org span{ font-size:11px; color:#666; }
.pdfd-ref{ margin-left:auto; font-size:12px; color:#333; }
.pdfd-meta{ display:flex; justify-content:space-between; gap:24px; margin:20px 0 18px; font-size:11px; color:#444; }
.pdfd-p{ margin:10px 0; }
.pdfd-date{ text-align:center; font-weight:700; margin:16px 0; }
.pdfd-list{ margin:14px 0; padding-left:26px; display:flex; flex-direction:column; gap:11px; }
.pdfd-list li{ padding-left:6px; }
.pdfd-sign{ margin-top:42px; text-align:right; font-size:11.5px; }
.pdfd-sign-row{ display:flex; justify-content:flex-end; gap:54px; margin-top:30px; }
.pdfd-sign-row i{ color:#15448f; }
.pdfd-foot{ margin-top:30px; padding-top:10px; border-top:1px solid #eee; color:#999; font-size:10px; text-align:center; }
@media (max-width:1180px){ #tourPdf{ display:none !important; } }

/* mode « calé » : la page se réduit pour laisser la place au PDF (la bulle reste libre et déplaçable) */
body.tour-docked{ padding-right:34vw; }
@media (max-width:1180px){ body.tour-docked{ padding-right:0; } }

/* bulle déplaçable : on attrape par l'en-tête du guide */
.tcoach{ cursor:move; user-select:none; }

/* faux explorateur de fichiers (mission Conversion) */
#tourPicker{ position:fixed; inset:0; z-index:9003; display:grid; place-items:center; background:rgba(6,8,12,.6); }
#tourPicker[hidden]{ display:none; }
.tp-win{ width:min(540px,94vw); background:#1c1e22; border:1px solid var(--outline,#2a2e34); border-radius:12px; overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.6); }
.tp-bar{ display:flex; align-items:center; gap:10px; padding:9px 12px; background:#23262b; border-bottom:1px solid var(--outline,#2a2e34); }
.tp-dots{ display:flex; gap:6px; } .tp-dots i{ width:11px; height:11px; border-radius:50%; background:#3a3f47; display:block; }
.tp-dots i:first-child{ background:#ef5f57; } .tp-dots i:nth-child(2){ background:#febc2e; } .tp-dots i:nth-child(3){ background:#28c840; }
.tp-title{ color:#cfd4db; font:600 13px system-ui,Segoe UI,Roboto,Arial,sans-serif; }
.tp-body{ display:flex; min-height:210px; }
.tp-side{ width:150px; flex:0 0 auto; background:#191b1f; border-right:1px solid var(--outline,#2a2e34); padding:10px 8px; display:flex; flex-direction:column; gap:4px; }
.tp-side div{ color:#aab2bd; font-size:13px; padding:6px 8px; border-radius:7px; }
.tp-side .tp-on{ background:rgba(226,24,24,.18); color:#fff; }
.tp-main{ flex:1; padding:16px; display:flex; flex-direction:column; gap:12px; }
.tp-file{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; cursor:pointer; padding:12px 14px;
  background:#202327; border:1px solid var(--outline,#2a2e34); border-radius:10px; color:#e7eaef; font:inherit; }
.tp-file:hover{ background:rgba(226,24,24,.16); border-color:var(--primary,#e21818); }
.tp-ic{ font-size:26px; } .tp-fn{ font-weight:600; } .tp-meta{ margin-left:auto; color:#8b93a0; font-size:12px; }
.tp-hint{ color:#8b93a0; font-size:12.5px; margin:0; }
.tp-hint-warn{ color:#ffb4b4; font-weight:600; }

/* bandeau « mission validée » entre les pages */
#tourMission{ position:fixed; inset:0; z-index:9004; display:grid; place-items:center; background:rgba(6,8,12,.84); }
#tourMission[hidden]{ display:none; }
.tm-card{ width:min(440px,92vw); text-align:center; background:var(--panel,#16171a); border:1px solid var(--ok,#1b8f5a);
  border-radius:18px; padding:28px 26px; color:#e7eaef; }
.tm-check{ width:62px; height:62px; margin:0 auto 14px; border-radius:50%; background:var(--ok,#1b8f5a); color:#fff;
  font-size:34px; display:grid; place-items:center; animation:tpop .4s cubic-bezier(.2,1.4,.4,1); }
@keyframes tpop{ 0%{ transform:scale(0);} 100%{ transform:scale(1);} }
.tm-card p{ font-size:16px; line-height:1.5; margin:0 0 18px; }
.tm-card .tbtn.primary{ min-height:42px; padding:10px 20px; font-size:15px; }

@media (max-width:600px){
  #tourBubble{ left:12px !important; right:12px !important; width:auto !important; bottom:12px !important; top:auto !important; transform:none !important; }
}