/* ==========================================================================
   Thème « Futuriste Professionnel » — partagé par index / guide / online
   ========================================================================== */

:root{
  --bg-0:#060a14;
  --bg-1:#0a1020;
  --panel:rgba(14,20,34,0.95);
  --panel-border:rgba(0,229,255,0.25);
  --accent:#00e5ff;
  --accent-2:#7c5cff;
  --accent-3:#00ffa3;
  --text-0:#eaf2ff;
  --text-1:#9fb3d1;
  --danger:#ff4d6d;
  --radius:14px;
  --font-head:'Orbitron', 'Poppins', system-ui, sans-serif;
  --font-body:'Inter', 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  background:
    radial-gradient(circle at 15% 10%, rgba(0,229,255,0.10), transparent 40%),
    radial-gradient(circle at 85% 0%, rgba(124,92,255,0.14), transparent 45%),
    radial-gradient(circle at 50% 100%, rgba(0,255,163,0.07), transparent 40%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1) 60%, #050810);
  background-attachment: scroll;
  animation: none !important;
  color: var(--text-0);
  font-family: var(--font-body);
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
}

/* grille animée en arrière-plan */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background-image:
    linear-gradient(rgba(0,229,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,255,0.06) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(ellipse at 50% 20%, black, transparent 75%);
}

/* anciennes vagues désactivées visuellement */
.wave{ display:none !important; }

/* ---------- Navbar ---------- */
.navbar{
  background: rgba(6,10,20,0.97) !important;
  border-bottom:1px solid var(--panel-border);
  box-shadow: 0 2px 24px rgba(0,229,255,0.08);
  padding: 0.9rem 1.6rem !important;
}
.navbar-brand{
  font-family: var(--font-head);
  font-weight:700;
  letter-spacing:0.08em;
  color: var(--accent) !important;
  text-shadow: 0 0 14px rgba(0,229,255,0.55);
}
.nav-link{
  color: var(--text-1) !important;
  font-weight:500;
  letter-spacing:0.02em;
  transition: color .25s ease, text-shadow .25s ease;
}
.nav-link:hover, .nav-item.active .nav-link{
  color: var(--accent) !important;
  text-shadow: 0 0 10px rgba(0,229,255,0.5);
}
.dropdown-menu{
  background: var(--panel);
  border:1px solid var(--panel-border);
}
.dropdown-item{ color: var(--text-0); }
.dropdown-item:hover{ background: rgba(0,229,255,0.12); color:var(--accent); }
.navbar-toggler{ border-color: var(--panel-border); }

/* ---------- Conteneurs / panneaux ---------- */
.container{
  background: var(--panel) !important;
  border:1px solid var(--panel-border) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35) !important;
  outline:none !important;
  color: var(--text-0) !important;
  padding: 1.8rem !important;
}

h1, h2, h3{
  font-family: var(--font-head);
  letter-spacing: 0.03em;
  color: var(--text-0) !important;
}
h1::after{ display:none; }
h1.section-title{
  display:inline-block;
  position:relative;
  padding-bottom:10px;
  margin-bottom:1.2rem !important;
}
h1.section-title::before{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:60px; height:3px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius:3px;
  box-shadow:0 0 10px var(--accent);
}

p{ color: var(--text-1); line-height:1.7; }
a{ color: var(--accent); }
a:hover{ color: var(--accent-2); }

/* ---------- Champs / formulaires ---------- */
textarea.form-control, input[type="text"], .centered-textarea,
#inputOfPrefix, #inputOfAdmin{
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid var(--panel-border) !important;
  color: var(--text-0) !important;
  border-radius: 10px !important;
}
textarea.form-control:focus, input[type="text"]:focus{
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 0.2rem rgba(0,229,255,0.25) !important;
}
::placeholder{ color: var(--text-1); opacity:.6; }

/* ---------- Boutons ---------- */
.btn-primary{
  background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important;
  border: none !important;
  color: #04111b !important;
  font-weight:700;
  letter-spacing:0.04em;
  box-shadow: 0 6px 20px rgba(0,229,255,0.3) !important;
}
.btn-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(124,92,255,0.4) !important;
}
.btn:disabled{ filter:grayscale(0.4); }

/* cases à cocher */
input[type="checkbox"]{
  accent-color: var(--accent);
  border: 2px solid var(--accent) !important;
}
label{
  background: rgba(255,255,255,0.04) !important;
  color: var(--text-0) !important;
}

.form-check{
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid var(--panel-border) !important;
}
.form-check:hover{
  background: rgba(0,229,255,0.07) !important;
  border-color: var(--accent) !important;
}
.form-check-label.disable{ color: var(--accent-3) !important; }

/* ---------- Footer ---------- */
.footer{
  background: rgba(6,10,20,0.85) !important;
  border-top: 1px solid var(--panel-border) !important;
}
.footer p{ color: var(--text-1) !important; }
.footer span{ color: var(--accent); font-weight:600; }

/* ---------- Résultat ---------- */
#result{
  border: 1px solid var(--accent-3) !important;
  background: rgba(0,255,163,0.06) !important;
  color: var(--text-0) !important;
}

/* ---------- Fiches utilisateur (page Active) ---------- */
.user-card{
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid var(--panel-border) !important;
  animation: none !important;
}
.user-card:hover{
  border-color: var(--accent) !important;
  box-shadow: 0 0 22px rgba(0,229,255,0.18);
}
.user-info h4{ color: var(--text-0) !important; }
.user-info p{ color: var(--text-1) !important; }
.uptime-user{ color: var(--accent-3) !important; }

/* ---------- Images du guide ---------- */
.container img{
  border: 1px solid var(--panel-border);
  box-shadow: 0 2px 10px rgba(0,229,255,0.12);
}

/* ==========================================================================
   Apparition progressive (reveal on scroll)
   ========================================================================== */
.js .reveal{
  opacity:0;
  transform: translateY(12px);
  transition: opacity .3s ease-out, transform .3s ease-out;
  will-change: opacity, transform;
}
.js .reveal.is-visible{
  opacity:1;
  transform: none;
  will-change: auto;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .js .reveal{ opacity:1; transform:none; transition:none; }
  *{ animation:none !important; }
}

/* badge / étiquette d'étape (guide) */
.step-tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px; height:34px;
  border-radius:50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#04111b;
  font-family: var(--font-head);
  font-weight:700;
  margin-right:10px;
  box-shadow: 0 0 14px rgba(0,229,255,0.45);
  flex-shrink:0;
}
.step-row{
  display:flex;
  align-items:center;
  margin-bottom:6px;
}

/* en-tête hero (intro) */
.hero-eyebrow{
  color: var(--accent-3);
  font-size:0.8rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  font-weight:600;
  margin-bottom:0.4rem;
}

@media (max-width: 768px){
  .container{ padding:1.2rem !important; }
}

/* ==========================================================================
   App shell — barre du haut + pied de page façon application mobile
   ========================================================================== */
.app-wrap{
  max-width: 560px;
  margin: 0 auto;
  padding: 0 0 2rem;
  position: relative;
}

.app-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 1rem 1.2rem;
  margin: 0 0 1.4rem;
  background: rgba(6,10,20,0.97);
  border-bottom: 1px solid var(--panel-border);
  box-shadow: 0 2px 24px rgba(0,229,255,0.08);
  position: sticky;
  top:0;
  z-index: 50;
}
.app-topbar .brand{
  display:flex;
  align-items:center;
  gap:0.55rem;
  font-family: var(--font-head);
  font-weight:700;
  letter-spacing:0.1em;
  color: var(--text-0);
  text-decoration:none;
  font-size: 1.05rem;
}
.app-topbar .brand i{
  color: var(--accent);
  font-size:1.2rem;
  text-shadow: 0 0 12px rgba(0,229,255,0.6);
}
.app-topbar .brand:hover{ color: var(--text-0); }
.app-topbar-actions{ display:flex; align-items:center; gap:0.6rem; }

.icon-btn{
  width:40px; height:40px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--panel-border);
  color: var(--text-1);
  text-decoration:none;
  transition: all .2s ease;
  position:relative;
}
.icon-btn:hover, .icon-btn.active{
  color: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 14px rgba(0,229,255,0.35);
  background: rgba(0,229,255,0.08);
}
.icon-btn .tip{
  position:absolute;
  bottom:-26px;
  left:50%;
  transform:translateX(-50%);
  font-size:0.62rem;
  letter-spacing:0.04em;
  color: var(--text-1);
  white-space:nowrap;
}

/* badge icône circulaire/arrondi en tête de carte, façon image de référence */
.icon-badge{
  width:76px; height:76px;
  margin: 0 auto 1rem;
  border-radius: 22px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 30px rgba(0,229,255,0.4);
  font-size: 2rem;
  color:#04111b;
}

.card-center{ text-align:center; }
.card-center h1{
  font-size:1.4rem;
  margin-bottom:0.3rem !important;
}
.card-center .subtitle{
  color: var(--text-1);
  margin-bottom:1.6rem;
}

/* champs avec icône / bouton œil pour mot de passe */
.field-wrap{ position:relative; margin-bottom:1rem; }
.field-wrap input, .field-wrap textarea{ width:100%; padding:0.9rem 1rem; }
.field-wrap .toggle-eye{
  position:absolute;
  right:14px; top:50%;
  transform:translateY(-50%);
  background:none; border:none;
  color: var(--accent);
  cursor:pointer;
  font-size:1rem;
}

.link-accent{
  color: var(--accent);
  text-decoration:none;
  font-weight:500;
}
.link-accent:hover{ color: var(--accent-2); text-decoration:underline; }

.btn-block-gradient{
  width:100%;
  padding:0.95rem;
  border-radius:12px;
  border:none;
  font-family: var(--font-head);
  font-weight:700;
  letter-spacing:0.06em;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#04111b;
  box-shadow: 0 8px 22px rgba(0,229,255,0.3);
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn-block-gradient:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(124,92,255,0.4);
}
.btn-block-gradient:disabled{ opacity:.55; cursor:not-allowed; transform:none; }

.alert-glass{
  display:flex;
  align-items:center;
  gap:0.5rem;
  justify-content:center;
  text-align:center;
  padding:0.8rem 1rem;
  border-radius:10px;
  margin-top:1rem;
  font-size:0.9rem;
}
.alert-glass.error{
  background: rgba(255,77,109,0.1);
  border:1px solid rgba(255,77,109,0.4);
  color:#ffb3c0;
}
.alert-glass.success{
  background: rgba(0,255,163,0.08);
  border:1px solid rgba(0,255,163,0.4);
  color: var(--accent-3);
}
.alert-glass i{ flex-shrink:0; }

/* pied de page façon application : marque + réseaux sociaux */
.app-footer{
  text-align:center;
  padding: 2.4rem 1.5rem 1.5rem;
  border-top: 1px solid var(--panel-border);
  margin-top: 2rem;
  color: var(--text-1);
}
.app-footer .brand{
  font-family: var(--font-head);
  font-weight:700;
  color: var(--text-0);
  font-size:1.1rem;
  letter-spacing:0.08em;
  margin-bottom:0.3rem;
}
.app-footer .tagline{
  font-size:0.85rem;
  margin-bottom:1.2rem;
}
.social-row{
  display:flex;
  justify-content:center;
  gap:0.8rem;
}
.social-row a{
  width:42px; height:42px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,0.04);
  border:1px solid var(--panel-border);
  color: var(--text-0);
  text-decoration:none;
  transition: all .2s ease;
}
.social-row a:hover{
  color: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 14px rgba(0,229,255,0.35);
  transform: translateY(-2px);
}

/* barre de statut (heure / ping) discrète, repositionnée en non-fixe
   pour ne plus masquer le bas de page sur mobile */
.status-bar{
  display:flex;
  justify-content:center;
  gap:1.6rem;
  padding: 0.8rem;
  font-size:0.8rem;
  color: var(--text-1);
}
.status-bar span{ color: var(--accent-3); font-weight:600; }