/* ============================================================
     TOKENS — palette "aube d'ultra" : nuit profonde + lever de soleil
     ============================================================ */
  :root{
    --bg:#000000;
    --bg-panel:#161819;
    --bg-panel-2:#191d27;
    --bg-input:#1b1f2a;
    --bg-input-focus:#20242f;
    --border:#262b39;
    --border-soft:#1e2230;
    --border-strong:#3a4152;
    --text:#eef0f6;
    --text-dim:#ffffff;
    --text-faint:#595959;
    --accent:#e6a83c;
    --accent-2:#f4c569;
    --accent-soft:rgba(230,168,60,.13);
    --accent-cool:#7a9dc4;
    --danger:#e5786b;
    --danger-soft:rgba(229,120,107,.12);
    --radius-lg:16px;
    --radius-md:11px;
    --radius-sm:8px;
    --mono:ui-monospace,'SF Mono','Cascadia Mono','Roboto Mono','Consolas',monospace;
    --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  }

  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:var(--sans);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    min-height:100vh;
    position:relative;
    overflow-x:hidden;
  }

  /* lueur d'aube très discrète derrière l'en-tête, purement décorative */
  .glow{
    position:absolute;
    top:-220px;
    left:50%;
    transform:translateX(-50%);
    width:900px;
    height:520px;
    background:radial-gradient(closest-side, rgba(230,168,60,.10), rgba(230,168,60,0) 70%);
    pointer-events:none;
    z-index:0;
  }

  .container{
    position:relative;
    z-index:1;
    max-width:900px;
    margin:0 auto;
    padding:56px 24px 80px;
  }

  /* ============================================================
     EN-TÊTE
     ============================================================ */
  .page-header{margin-bottom:40px;}
  .eyebrow{
    margin:0 0 10px;
    font-size:12px;
    font-weight:600;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--accent-cool);
  }
  h1{
    margin:0 0 14px;
    font-size:clamp(28px,4.4vw,40px);
    font-weight:800;
    letter-spacing:-.02em;
    line-height:1.12;
  }
  h1 span{
    background:linear-gradient(90deg, var(--accent-2), var(--accent));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  .subtitle{
    margin:0;
    max-width:58ch;
    color:var(--text-dim);
    font-size:15.5px;
  }

  /* ============================================================
     PANELS
     ============================================================ */
  .panel{
    background:var(--bg-panel);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:28px;
  }
  .form-panel{margin-bottom:20px;}

  .field-group + .field-group{margin-top:28px;}
  .group-head{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:12px;
    margin-bottom:14px;
    flex-wrap:wrap;
  }
  .group-title{
    margin:0;
    font-size:13px;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--text);
  }
  .group-hint{
    margin:0;
    font-size:12.5px;
    color:5C6377;
    font-family:var(--mono);
  }

  .field-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(128px,1fr));
    gap:12px;
  }
  .field-grid-2{
    grid-template-columns:repeat(auto-fit, minmax(190px,1fr));
  }

  .field{
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .field-top{
    display:flex;
    align-items:center;
    gap:8px;
  }
  .field-chip{
    font-family: futura, var(--mono);
    font-size:10.5px;
    font-weight:500;
    letter-spacing:.03em;
    color:var(--accent);
    background:var(--accent-soft);
    border:1px solid rgba(230,168,60,.28);
    border-radius:5px;
    padding:2px 6px;
    line-height:1.5;
  }
  .field-label{
    font-size:12.5px;
    color:var(--text-dim);
  }
  .field-input-wrap{
    position:relative;
    display:flex;
    align-items:center;
  }
  .field-input{
    width:100%;
    background:var(--bg-input);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    color:var(--text);
    font-family:var(--mono);
    font-size:15px;
    font-variant-numeric:tabular-nums;
    padding:10px 12px;
    outline:none;
    transition:border-color .15s ease, background .15s ease;
  }
  .field-input::placeholder{color:var(--text-faint);}
  .field-input:hover{border-color:var(--border-strong);}
  .field-input:focus{
    background:var(--bg-input-focus);
    border-color:var(--accent);
  }
  .field-input:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:1px;
  }
  .field-suffix{
    position:absolute;
    right:12px;
    font-size:12.5px;
    color:var(--text-faint);
    pointer-events:none;
    font-family:var(--mono);
  }
  .field-input-wrap .field-input{padding-right:36px;}

  /* ============================================================
     ACTION / BOUTON / ERREUR
     ============================================================ */
  .action-row{
    margin-top:26px;
    display:flex;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;
  }
  .btn-primary{
    appearance:none;
    border:none;
    cursor:pointer;
    background:linear-gradient(180deg, var(--accent-2), var(--accent));
    color:#221604;
    font-family:var(--sans);
    font-size:14.5px;
    font-weight:700;
    letter-spacing:.01em;
    padding:12px 26px;
    border-radius:var(--radius-sm);
    transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease;
    box-shadow:0 8px 20px -10px rgba(230,168,60,.55);
  }
  .btn-primary:hover{transform:translateY(-1px);}
  .btn-primary:active{transform:translateY(0);}
  .btn-primary:focus-visible{outline:2px solid var(--accent-2); outline-offset:2px;}
  .btn-primary:disabled{opacity:.55; cursor:not-allowed; transform:none;}

  .error-msg{
    margin:0;
    font-size:13.5px;
    color:var(--danger);
    background:var(--danger-soft);
    border:1px solid rgba(229,120,107,.3);
    border-radius:var(--radius-sm);
    padding:9px 13px;
  }

  /* ============================================================
     PROGRESSION (animation de calcul)
     ============================================================ */
  .progress-wrap{margin-top:24px;}
  .progress-track{
    position:relative;
    height:4px;
    background:var(--border-soft);
    border-radius:99px;
    overflow:visible;
  }
  .progress-fill{
    position:absolute;
    left:0; top:0; bottom:0;
    width:0%;
    background:linear-gradient(90deg, var(--accent-cool), var(--accent));
    border-radius:99px;
    transition:width .05s linear;
  }
  .progress-dot{
    position:absolute;
    top:50%;
    left:0%;
    width:10px;
    height:10px;
    background:var(--accent-2);
    border-radius:50%;
    transform:translate(-50%,-50%);
    box-shadow:0 0 0 4px rgba(230,168,60,.16);
    transition:left .05s linear;
  }
  .progress-label{
    margin:12px 0 0;
    font-family:var(--mono);
    font-size:12.5px;
    color:var(--text-dim);
  }

  /* ============================================================
     RÉSULTATS
     ============================================================ */
  .results-section{margin-top:8px;}
  .stats-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
    margin-bottom:20px;
  }
  .stat-tile{
    background:var(--bg-panel);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:22px 24px;
  }
  .stat-label{
    margin:0 0 10px;
    font-size:12px;
    font-weight:600;
    letter-spacing:.05em;
    text-transform:uppercase;
    color:var(--text-faint);
  }
  .stat-value{
    margin:0;
    font-family:var(--mono);
    font-variant-numeric:tabular-nums;
    font-size:clamp(28px,5vw,38px);
    font-weight:700;
    letter-spacing:-.01em;
    color:var(--text);
  }
  .stat-unit{
    margin-left:8px;
    font-size:15px;
    font-weight:500;
    color:var(--text-faint);
  }

  .chart-panel{
    background:var(--bg-panel);
    border:1px solid var(--border);
    padding:22px 20px 12px;
  }
  .chart-caption{
    margin:0 4px 14px;
    font-size:13px;
    color:var(--text-dim);
  }
  #chart{
    width:100%;
    height:360px;
    /* le fond du graphe lui-même est fixé en JS à #0f1117 (contrainte du brief) */
  }

  /* ============================================================
     FOOTER
     ============================================================ */
  .page-footer{margin-top:44px;}
  .page-footer p{
    margin:0;
    font-size:12.5px;
    color:#9e9e9e;
    max-width:64ch;
  }

  /* ============================================================
     RESPONSIVE
     ============================================================ */
  @media (max-width:560px){
    .container{padding:36px 16px 60px;}
    .panel{padding:20px;}
    .stats-row{grid-template-columns:1fr;}
    #chart{height:300px;}
  }

  /* respect du mode "mouvement réduit" */
  @media (prefers-reduced-motion: reduce){
    *{transition-duration:.001ms !important; animation-duration:.001ms !important;}
  }

  [hidden]{display:none !important;}