:root{ --accent:#7cff8f; }
*{box-sizing:border-box;}
body{margin:0;background:#0b0d11;color:#f4f5f7;font-family:Inter,system-ui,sans-serif;}
input[type=range]{ -webkit-appearance:none; appearance:none; height:6px; border-radius:4px; background:rgba(255,255,255,0.12); width:100%; }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:var(--accent); cursor:pointer; border:3px solid #0b0d11; }
input[type=range]::-moz-range-thumb{ width:18px; height:18px; border-radius:50%; background:var(--accent); cursor:pointer; border:3px solid #0b0d11; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ color:#a3ffb3; }
button{ font-family:inherit; }
.row-between{display:flex;justify-content:space-between;}
.card{ background:#12151d; border:1px solid rgba(255,255,255,0.08); border-radius:14px; }
.screen{ display:none; }
.screen.active{ display:block; }

.info-tip{ display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; border-radius:50%; background:rgba(255,255,255,0.14); color:#c7cbd3; font-size:10px; font-weight:700; font-style:normal; cursor:pointer; margin-left:6px; position:relative; vertical-align:middle; user-select:none; }
.info-tip:hover, .info-tip.open{ background:var(--accent); color:#0b0d11; }
.info-tip-bubble{ display:none; position:absolute; left:50%; bottom:22px; transform:translateX(-50%); width:240px; padding:10px 12px; border-radius:8px; background:#1a1e28; border:1px solid rgba(255,255,255,0.14); color:#e4e6eb; font-size:12px; font-weight:400; line-height:1.5; text-align:left; z-index:30; box-shadow:0 8px 24px rgba(0,0,0,0.4); }
.info-tip.open .info-tip-bubble{ display:block; }
@media (max-width:480px){ .info-tip-bubble{ width:200px; } }

.auth-card{ background:#12151d; border:1px solid rgba(255,255,255,0.08); border-radius:16px; padding:36px; }
.auth-title{ font-family:'Space Grotesk',sans-serif; font-size:26px; font-weight:700; margin:0 0 6px; }
.auth-subtitle{ font-size:14px; color:#8b93a1; margin:0 0 28px; }
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:13px; font-weight:600; margin-bottom:8px; }
.field input{ width:100%; padding:12px 14px; border-radius:8px; background:#0b0d11; border:1px solid rgba(255,255,255,0.14); color:#f4f5f7; font-size:14px; font-family:inherit; }
.field input:focus{ outline:none; border-color:var(--accent); }
.field-hint{ font-size:12px; color:#8b93a1; margin-top:6px; }
.btn-primary{ width:100%; padding:14px; border-radius:10px; background:var(--accent); color:#0b0d11; border:none; font-weight:700; font-size:15px; cursor:pointer; font-family:inherit; }
.btn-primary:hover{ background:#a3ffb3; }
.auth-links{ margin-top:20px; font-size:13px; color:#8b93a1; text-align:center; }
.field-error{ color:#ff9a9a; font-size:13px; margin:-10px 0 18px; }

/* ---------- Responsive ---------- */

.mobile-menu-btn{
  display:none;
  background:transparent;
  border:1px solid rgba(255,255,255,0.16);
  border-radius:8px;
  color:#f4f5f7;
  width:36px;
  height:36px;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:18px;
  flex:none;
  padding:0;
}

/* Sidebar résumé + colonne d'entrées : passent en une seule colonne avant que ça ne devienne trop étroit */
@media (max-width: 960px){
  .sim-grid{ grid-template-columns: 1fr !important; }
  .sim-summary{ position: static !important; top: auto !important; }
  .coach-stats{ grid-template-columns: repeat(2, 1fr) !important; }
}

/* Le menu bascule en hamburger dès 900px : avec quatre entrées de navigation,
   la barre déborderait sur les boutons de connexion en dessous de cette largeur. */
@media (max-width: 900px){
  .nav-bar{ padding:12px 16px !important; }
  .nav-actions{ gap:8px !important; }

  .nav-links{
    display:none !important;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
    background:#0b0d11;
    border-bottom:1px solid rgba(255,255,255,0.08);
    padding:8px 20px 16px;
    box-shadow:0 12px 24px rgba(0,0,0,0.35);
  }
  .nav-links span{ padding:10px 0; width:100%; }
  .nav-links.open{ display:flex !important; }
  .mobile-menu-btn{ display:flex; }

  .nav-streak, .nav-username, .nav-register-link{ display:none !important; }
}

@media (max-width: 768px){
  .page-wrap{ padding:40px 20px 56px !important; }
  .page-wrap-hero{ padding:48px 20px 40px !important; }
  .results-wrap{ padding:40px 16px 56px !important; }

  .hero-title{ font-size:34px !important; }
  .hero-actions{ flex-direction:column !important; }
  .hero-actions button{ width:100%; }

  .stats-grid{ grid-template-columns:1fr !important; }
  .tiles-grid{ grid-template-columns:1fr !important; }
  .dash-top-grid{ grid-template-columns:1fr !important; }
  .dash-sims-grid{ grid-template-columns:1fr !important; }
  #goals-grid{ grid-template-columns:1fr !important; }
  #articles-grid{ grid-template-columns:1fr !important; }

  .btn-row{ flex-wrap:wrap; }

  .coach-stats{ grid-template-columns:1fr !important; }
  .coach-alts{ grid-template-columns:1fr !important; }
  .coach-life{ grid-template-columns:1fr !important; }
  .coach-lever{ flex-direction:column !important; }
  .coach-lever > div:last-child{ text-align:left !important; }

  .card{ padding:20px !important; }

  .auth-card{ padding:24px; }
}

@media (max-width: 420px){
  .hero-title{ font-size:28px !important; }
}