/* Guide de l'application (static/js/tuto-app.js). Reprend le volet du tuto de connexion
   (.tuto-connexion / .tuto-box, tuto-connexion.css) et n'ajoute que ce qui diffère. */

/* Au-dessus du composeur (.modal-overlay) : le guide du composeur s'ouvre par-dessus lui. */
.tuto-guide { z-index:1160; }

/* Les captures d'ordinateur sont en paysage : un volet plus large les rend lisibles. */
@media (min-width:1024px) {
  .tuto-guide .tuto-box { max-width:620px; }
  .tuto-guide .tuto-visuel { height:340px; }
}
.tuto-guide .tuto-visuel.tg-vide { display:none; }
.tuto-guide .tuto-capture { box-shadow:0 2px 10px rgba(0,0,0,0.12); }

/* Le « ? » de l'en-tête et du composeur. */
.tuto-aide-btn {
  width:26px; height:26px; flex-shrink:0; padding:0; border-radius:50%; cursor:pointer;
  font-family:inherit; font-size:13px; font-weight:700; line-height:1;
  color:rgba(var(--text-rgb),0.55); background:rgba(var(--text-rgb),0.05);
  border:1px solid rgba(var(--text-rgb),0.18);
}
.tuto-aide-btn:hover { color:var(--accent); border-color:var(--accent); }