/* Mini-tuto « Connecter un réseau » (static/js/tuto-connexion.js). Même voile que l'overlay de
   connexion (.netconnect-overlay), un cran en dessous : le volet se ferme avant que la connexion
   ne parte, les deux ne se superposent jamais. */
.tuto-connexion {
  position:fixed; inset:0; z-index:1150; display:none;
  align-items:center; justify-content:center; padding:16px;
  background:rgba(10,18,16,0.88); backdrop-filter:blur(4px);
}
.tuto-connexion.active { display:flex; }
.tuto-box {
  width:100%; max-width:440px; max-height:92vh; max-height:92dvh;
  display:flex; flex-direction:column; gap:10px; padding:16px 16px 14px;
  background:var(--glass-bg); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--border-subtle); border-radius:var(--radius-xl);
}
.tuto-tete { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.tuto-tete-titre { font-size:14px; font-weight:700; color:var(--text); }
.tuto-fermer {
  width:30px; height:30px; flex-shrink:0; border-radius:50%; cursor:pointer; font-size:18px; line-height:1;
  background:rgba(var(--text-rgb),0.06); color:rgba(var(--text-rgb),0.7); border:1px solid rgba(var(--text-rgb),0.12);
}

/* Onglets : défilent horizontalement plutôt que de passer à la ligne sur un téléphone étroit. */
.tuto-onglets { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; flex-shrink:0; }
.tuto-onglets::-webkit-scrollbar { display:none; }
.tuto-onglet {
  display:flex; align-items:center; gap:6px; flex-shrink:0; padding:6px 10px; cursor:pointer;
  font-family:inherit; font-size:12px; font-weight:600; color:rgba(var(--text-rgb),0.6);
  background:transparent; border:1px solid rgba(var(--text-rgb),0.12); border-radius:999px;
}
.tuto-onglet svg { border-radius:5px; }
.tuto-onglet.actif { color:var(--text); border-color:var(--accent); background:rgba(var(--accent-rgb),0.10); }

.tuto-defile { overflow-y:auto; display:flex; flex-direction:column; gap:8px; min-height:0; }
.tuto-note {
  font-size:12px; line-height:1.5; color:rgba(var(--text-rgb),0.75); padding:9px 11px;
  background:rgba(var(--text-rgb),0.04); border:1px solid rgba(var(--text-rgb),0.10); border-radius:10px;
}
.tuto-note b { color:var(--text); }
.tuto-ordi { border-color:rgba(224,160,64,0.35); background:rgba(224,160,64,0.08); }
.tuto-note-tag { font-weight:700; color:var(--accent); margin-right:2px; }
.tuto-souci .tuto-note-tag { color:#e0a040; }

/* Visuel à hauteur fixe : passer d'une capture haute à un schéma bas ne doit pas faire sauter
   les boutons sous le doigt. */
.tuto-visuel {
  height:230px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:rgba(var(--text-rgb),0.03); border-radius:12px; overflow:hidden;
}
.tuto-visuel > a { display:flex; align-items:center; justify-content:center; width:100%; height:100%; cursor:zoom-in; }
.tuto-capture { max-width:100%; max-height:100%; object-fit:contain; border-radius:8px; }
.tuto-art { width:100%; height:100%; }
.tuto-art-url { font-size:8px; fill:rgba(var(--text-rgb),0.55); text-anchor:middle; font-family:inherit; }
.tuto-art-btn { font-size:9px; font-weight:700; fill:#fff; text-anchor:middle; font-family:inherit; }
.tuto-art-btn-muet { fill:rgba(var(--text-rgb),0.45); }
.tuto-art-lien { font-size:9px; font-weight:600; fill:#6ea8fe; text-decoration:underline; font-family:inherit; }

.tuto-num { font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:rgba(var(--text-rgb),0.45); }
.tuto-titre { font-size:15px; font-weight:700; color:var(--text); }
.tuto-desc { font-size:13px; line-height:1.55; color:rgba(var(--text-rgb),0.78); }
.tuto-points { display:flex; justify-content:center; gap:6px; padding:2px 0; }
.tuto-point {
  width:8px; height:8px; padding:0; border-radius:50%; cursor:pointer; border:none;
  background:rgba(var(--text-rgb),0.2);
}
.tuto-point.actif { background:var(--accent); width:20px; border-radius:4px; }

.tuto-nav { display:flex; gap:8px; flex-shrink:0; }
.tuto-nav .btn { flex:1; padding:10px 0; font-size:12px; }
.tuto-nav .btn:disabled { opacity:0.35; cursor:default; }
.tuto-cta { width:100%; padding:12px 0; font-size:13px; flex-shrink:0; }

/* Lien discret sous le texte d'aide de la carte « Connexion réseaux sociaux ». */
.tuto-revoir {
  display:block; margin:6px 0 10px; padding:0; background:none; border:none; cursor:pointer;
  font-family:inherit; font-size:12px; font-weight:600; color:var(--accent); text-align:left;
  text-decoration:underline; text-underline-offset:2px;
}

@media (min-height:760px) and (min-width:481px) {
  .tuto-visuel { height:300px; }
}
@media (max-width:480px) {
  .tuto-connexion { padding:8px; }
  .tuto-visuel { height:190px; }
}