:root{ --accent:#5980a6; }
*{box-sizing:border-box;}
body{margin:0;background:var(--cf-bg,#f2f2f3);color:var(--cf-ink,#1d1f20);font-family:var(--cf-body,Inter,system-ui,sans-serif);}
input[type=range]{ -webkit-appearance:none; appearance:none; height:6px; border-radius:4px; background:var(--cf-line,rgba(29,31,32,.16)); 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 var(--cf-bg,#f2f2f3); }
input[type=range]::-moz-range-thumb{ width:18px; height:18px; border-radius:50%; background:var(--accent); cursor:pointer; border:3px solid var(--cf-bg,#f2f2f3); }
/* Curseurs convertis en saisie classique (montants, âges, durées) — voir convertirCurseur() dans app.js */
.sim-num-wrap{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
input.sim-num{ width:120px; padding:6px 10px; border:1px solid var(--cf-line,rgba(29,31,32,.16)); border-radius:0; background:transparent; color:var(--accent); font:inherit; font-size:14px; font-weight:700; text-align:right; font-variant-numeric:tabular-nums; }
input.sim-num:hover{ border-color:var(--cf-muted,#5d5d60); }
input.sim-num:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent); }
@media (max-width:480px){ input.sim-num{ width:104px; } }
a{ color:var(--accent); text-decoration:none; }
a:hover{ color:var(--cf-steel-700,#416180); }
button{ font-family:inherit; }
.row-between{display:flex;justify-content:space-between;}
.card{ background:transparent; border:1px solid var(--cf-line,rgba(29,31,32,.16)); border-radius:0; }
.modal-card{ background:var(--cf-bg,#f2f2f3); box-shadow:0 24px 60px rgba(0,0,0,0.35); }
.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:var(--cf-line,rgba(29,31,32,.16)); color:var(--cf-muted,#5d5d60); 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:var(--cf-on-accent,#f2f2f3); }
.info-tip-bubble{ display:none; position:absolute; left:50%; bottom:22px; transform:translateX(-50%); width:240px; padding:10px 12px; border-radius:0; background:#1d1f20; border:1px solid var(--cf-line,rgba(29,31,32,.16)); color:var(--cf-on-accent,#f2f2f3); 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.25); }
.info-tip.open .info-tip-bubble{ display:block; }
@media (max-width:480px){ .info-tip-bubble{ width:200px; } }

.auth-card{ background:transparent; border:1px solid var(--cf-line,rgba(29,31,32,.16)); border-radius:0; padding:36px; }
.auth-title{ font-family:var(--cf-head,'Barlow Condensed',sans-serif); font-size:26px; font-weight:600; margin:0 0 6px; }
.auth-subtitle{ font-size:14px; color:var(--cf-muted,#5d5d60); 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:0; background:var(--cf-surface,#e9e9ea); border:1px solid var(--cf-line,rgba(29,31,32,.16)); color:var(--cf-ink,#1d1f20); font-size:14px; font-family:inherit; }
.field input:focus{ outline:none; border-color:var(--accent); }
.field-hint{ font-size:12px; color:var(--cf-muted,#5d5d60); margin-top:6px; }
.btn-primary{ width:100%; padding:14px; border-radius:0; background:var(--accent); color:var(--cf-on-accent,#f2f2f3); border:none; font-weight:600; font-family:var(--cf-head,inherit); font-size:15px; cursor:pointer; }
.btn-primary:hover{ background:var(--cf-steel-600,#597ea3); }
.auth-links{ margin-top:20px; font-size:13px; color:var(--cf-muted,#5d5d60); text-align:center; }
.field-error{ color:#b3413f; font-size:13px; margin:-10px 0 18px; }

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

.mobile-menu-btn{
  display:none;
  background:transparent;
  border:1px solid var(--cf-line,rgba(29,31,32,.16));
  border-radius:0;
  color:var(--cf-ink,#1d1f20);
  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:var(--cf-bg,#f2f2f3);
    border-bottom:1px solid var(--cf-line,rgba(29,31,32,.16));
    padding:8px 20px 16px;
    box-shadow:0 12px 24px rgba(0,0,0,0.35);
  }
  .nav-links span, .nav-links a{ 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; }
}

/* Bloc explicatif SEO (H2/H3) ajouté sous chaque simulateur */
.sim-seo{ max-width:820px; margin:48px auto 0; padding-top:40px; border-top:1px solid var(--cf-line,rgba(29,31,32,.16)); }
.sim-seo h2{ font-family:var(--cf-head); font-size:22px; font-weight:700; margin:32px 0 12px; }
.sim-seo h2:first-child{ margin-top:0; }
.sim-seo p{ font-size:15px; line-height:1.65; color:var(--cf-muted); margin:0 0 12px; }
.sim-seo ul{ margin:0 0 12px; padding-left:20px; }
.sim-seo li{ font-size:15px; line-height:1.6; color:var(--cf-muted); margin-bottom:6px; }
.sim-seo strong{ color:inherit; font-weight:600; }
.sim-voir-aussi{ margin-top:32px; padding:20px 24px; background:rgba(89,128,166,0.08); border:1px solid rgba(89,128,166,0.25); }
.sim-voir-aussi-title{ font-size:12px; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:12px; }
.sim-voir-aussi ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; }
.sim-voir-aussi a{ font-size:14px; font-weight:600; }
.sim-voir-aussi a:hover{ text-decoration:underline; }