:root{
    --ink:#1E3A5F; --ink-soft:#3F5C7A; --paper:#F5F6F3; --paper-line:rgba(30,58,95,0.08);
    --orange:#E2662B; --concrete:#8B8D8A; --approve:#4C7A5E; --approve-soft:#D9E6DE; --white:#FFFFFF;
    font-size:16px;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--paper);
    background-image:
      repeating-linear-gradient(0deg, var(--paper-line) 0, var(--paper-line) 1px, transparent 1px, transparent 24px),
      repeating-linear-gradient(90deg, var(--paper-line) 0, var(--paper-line) 1px, transparent 1px, transparent 24px);
    font-family:'IBM Plex Sans', sans-serif; color:var(--ink);
    min-height:100vh; display:flex; justify-content:center; padding:20px 12px 0;
  }
  .sheet{
    width:100%; max-width:480px; background:var(--white); border:1.5px solid var(--ink);
    box-shadow:6px 6px 0 rgba(30,58,95,0.12); display:flex; flex-direction:column; min-height:calc(100vh - 20px);
  }
  .sheet-head{ border-bottom:1.5px solid var(--ink); padding:14px 18px 10px; }
  .eyebrow{
    font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.12em; color:var(--ink-soft);
    display:flex; justify-content:space-between; margin-bottom:8px;
  }
  .ticks{
    height:6px; opacity:0.35; margin-bottom:10px;
    background-image:repeating-linear-gradient(90deg, var(--ink) 0, var(--ink) 1px, transparent 1px, transparent 12px);
  }
  h1.step-title{ font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:22px; margin:0; letter-spacing:-0.01em; }
  .step-sub{ font-size:13px; color:var(--ink-soft); margin-top:4px; }
  .content{ padding:18px; flex:1; overflow-y:auto; }

  .field-group{ margin-bottom:20px; }
  .field-label{
    font-family:'IBM Plex Mono', monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.08em;
    color:var(--ink-soft); display:block; margin-bottom:8px;
  }
  input[type="text"], input[type="number"], input[type="date"], input[type="email"], input[type="password"]{
    width:100%; border:1.5px solid var(--ink); background:transparent; padding:10px;
    font-family:'IBM Plex Sans', sans-serif; font-size:15px; color:var(--ink);
  }
  input:focus{ outline:2px solid var(--orange); outline-offset:1px; }

  .chip-row{ display:flex; flex-wrap:wrap; gap:8px; }
  .chip{
    border:1.5px solid var(--ink); padding:8px 12px; font-size:13.5px; cursor:pointer;
    background:var(--white); color:var(--ink); user-select:none; transition:background .12s, color .12s;
  }
  .chip:hover{ background:var(--paper); }
  .chip.selected{ background:var(--ink); color:var(--white); }
  .chip.selected.accent{ background:var(--orange); border-color:var(--orange); }

  .hint{
    font-family:'IBM Plex Mono', monospace; font-size:11.5px; color:var(--ink-soft);
    border-left:2px solid var(--orange); padding-left:8px; margin:10px 0 0;
  }

  .room-row{ display:flex; align-items:center; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--paper-line); font-size:14.5px; }
  .room-name{ flex:1; }
  .room-surface{ font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--concrete); width:60px; }
  .stepper{ display:flex; align-items:center; gap:10px; }
  .stepper button{ width:26px; height:26px; border:1.5px solid var(--ink); background:var(--white); font-size:15px; cursor:pointer; line-height:1; color:var(--ink); }
  .stepper button:active{ background:var(--orange); color:#fff; border-color:var(--orange); }
  .stepper span{ font-family:'IBM Plex Mono', monospace; width:16px; text-align:center; }

  .total-line{ display:flex; justify-content:space-between; align-items:baseline; border-top:1.5px solid var(--ink); margin-top:14px; padding-top:10px; font-family:'IBM Plex Mono', monospace; }
  .total-line .val{ font-size:20px; font-weight:600; }

  .estimate-box{ border:1.5px solid var(--ink); padding:20px 16px; text-align:center; margin-bottom:18px; position:relative; }
  .estimate-box::before{
    content:"ESTIMATION"; position:absolute; top:-9px; left:12px; background:var(--white); padding:0 6px;
    font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.1em; color:var(--ink-soft);
  }
  .estimate-value{ font-family:'Space Grotesk', sans-serif; font-size:34px; font-weight:700; margin:6px 0 2px; }
  .estimate-formula{ font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--concrete); }

  .btn{
    display:block; width:100%; text-align:center; border:1.5px solid var(--ink); padding:13px; margin-top:10px;
    font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:15px; background:var(--white); color:var(--ink); cursor:pointer;
  }
  .btn.primary{ background:var(--ink); color:var(--white); }
  .btn.accent{ background:var(--orange); border-color:var(--orange); color:#fff; }
  .btn.ghost{ border-style:dashed; }
  .btn:disabled{ opacity:.35; cursor:not-allowed; }

  .pay-option{ border:1.5px solid var(--ink); padding:14px; margin-bottom:10px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; }
  .pay-option.selected{ background:var(--approve-soft); border-color:var(--approve); }
  .pay-option .name{ font-weight:600; font-family:'Space Grotesk',sans-serif; }
  .pay-option .sub{ font-size:12px; color:var(--ink-soft); }

  .summary-card{ border:1.5px solid var(--ink); padding:14px; margin-bottom:14px; }
  .summary-card .cap{ font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.08em; color:var(--ink-soft); margin-bottom:6px; }
  .summary-row{ display:flex; justify-content:space-between; gap:12px; font-size:13.5px; padding:3px 0; }
  .summary-row span:last-child{ text-align:right; }

  /* liste de validation */
  .val-table{ border:1.5px solid var(--ink); margin-bottom:14px; }
  .val-row{ display:grid; grid-template-columns:1fr 1.2fr auto; gap:8px; padding:9px 12px; border-bottom:1px solid var(--paper-line); font-size:13.5px; align-items:baseline; }
  .val-row:last-child{ border-bottom:none; }
  .val-row .k{ color:var(--ink-soft); }
  .val-row .unset{ color:var(--concrete); font-style:italic; }
  .ref{ font-family:'IBM Plex Mono', monospace; font-size:11.5px; color:var(--orange); font-weight:600; text-align:right; }
  .check-row{ display:flex; gap:10px; align-items:flex-start; border:1.5px solid var(--ink); padding:12px; cursor:pointer; font-size:14px; }
  .check-row .box{ width:20px; height:20px; border:1.5px solid var(--ink); flex:none; display:flex; align-items:center; justify-content:center; font-size:14px; line-height:1; }
  .check-row.on{ background:var(--approve-soft); border-color:var(--approve); }
  .check-row.on .box{ background:var(--approve); border-color:var(--approve); color:#fff; }

  .tabs{ display:flex; margin-bottom:18px; border:1.5px solid var(--ink); }
  .tabs div{ flex:1; text-align:center; padding:10px; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:14px; cursor:pointer; }
  .tabs div.on{ background:var(--ink); color:#fff; }

  .stamp{ border:2px solid var(--approve); color:var(--approve); display:inline-block; padding:5px 12px; font-family:'Space Grotesk',sans-serif; font-weight:700; letter-spacing:.05em; transform:rotate(-3deg); font-size:13px; margin-bottom:10px; }

  .title-block{ border-top:1.5px solid var(--ink); display:grid; grid-template-columns:1fr 1fr; font-family:'IBM Plex Mono', monospace; font-size:10.5px; }
  .tb-cell{ padding:8px 12px; border-right:1px solid var(--ink); }
  .tb-cell:last-child{ border-right:none; }
  .tb-cell .k{ color:var(--ink-soft); display:block; margin-bottom:2px; }
  .tb-cell .v{ color:var(--ink); font-weight:600; }

  /* fiche synthèse — une page A4, reprise de l'ancien simulateur */
  .fiche{
    container-type:inline-size; aspect-ratio:210/297; background:#fff; border:1.5px solid var(--ink);
    display:flex; flex-direction:column; overflow:hidden; font-size:9px; font-size:2cqw; line-height:1.25;
  }
  .f-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:2cqw; padding:2cqw 3cqw 1.6cqw; border-bottom:1.5px solid var(--ink); }
  .f-label{ font-family:'IBM Plex Mono',monospace; font-size:1.9cqw; color:var(--orange); font-weight:600; letter-spacing:.04em; }
  .f-sub{ font-size:1.8cqw; color:var(--ink-soft); margin-top:.3cqw; }
  .f-stamp{ border:1.5px solid var(--approve); color:var(--approve); font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.9cqw; padding:.8cqw 1.8cqw; transform:rotate(-2deg); white-space:nowrap; flex:none; }
  .f-title{ padding:2cqw 3cqw 0; }
  .f-title h2{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:3.4cqw; line-height:1.2; margin:0; letter-spacing:-.01em; }
  .f-title h2 b{ color:var(--orange); font-weight:700; }
  .f-tag{ font-size:1.95cqw; color:var(--ink-soft); margin:.8cqw 0 0; }
  .f-tag b{ color:var(--ink); }
  .f-rooms{ padding:1.8cqw 3cqw 0; }
  .f-table{ width:100%; border-collapse:collapse; font-size:1.9cqw; }
  .f-split{ display:grid; grid-template-columns:1fr 1fr; gap:1.5cqw; }
  .f-table th{ font-family:'IBM Plex Mono',monospace; font-size:1.7cqw; font-weight:500; text-align:left; color:var(--ink-soft); background:var(--paper); }
  .f-table th, .f-table td{ border:1px solid #B8C2CF; padding:.35cqw 1.1cqw; }
  .f-table .n{ text-align:right; font-family:'IBM Plex Mono',monospace; white-space:nowrap; }
  .f-table tr.tot td{ background:var(--paper); font-weight:700; border-top:1.5px solid var(--ink); }
  .f-pool{ margin-top:1cqw; padding:.8cqw 1.4cqw; border:1px dashed var(--orange); font-size:1.8cqw; color:var(--ink-soft); }
  .f-cols{ display:grid; grid-template-columns:1fr 1fr; gap:0; flex:1; min-height:0; margin-top:1.8cqw; border-top:1px solid #B8C2CF; }
  .f-col{ padding:1.6cqw 3cqw 0; }
  .f-col + .f-col{ border-left:1px solid #B8C2CF; }
  .f-blk{ margin-bottom:1.5cqw; }
  .f-blk h4{ font-family:'Space Grotesk',sans-serif; font-size:2.2cqw; font-weight:600; color:var(--ink); margin:0 0 .7cqw; padding-bottom:.5cqw; border-bottom:1px solid var(--ink); }
  .f-dl div{ display:flex; justify-content:space-between; gap:1.2cqw; padding:.25cqw 0; border-bottom:1px solid var(--paper-line); font-size:1.85cqw; }
  .f-dl dt{ color:var(--ink-soft); }
  .f-dl dd{ margin:0; font-weight:600; text-align:right; }
  .f-dl .ref{ font-family:'IBM Plex Mono',monospace; font-size:1.55cqw; color:var(--orange); font-weight:600; margin-left:.6cqw; }
  .f-price{ border:1.5px solid var(--ink); background:var(--paper); padding:1.3cqw; text-align:center; margin-bottom:1.5cqw; }
  .f-price .l{ font-size:1.8cqw; color:var(--ink-soft); }
  .f-price .a{ font-family:'Space Grotesk',sans-serif; font-size:4.8cqw; font-weight:700; color:var(--ink); margin:.3cqw 0; }
  .f-price .c{ font-size:2.3cqw; font-weight:600; }
  .f-price .f{ font-family:'IBM Plex Mono',monospace; font-size:1.55cqw; color:var(--concrete); margin-top:.6cqw; }
  .f-price .cr{ margin-top:1cqw; padding:.6cqw; border:1px dashed var(--ink-soft); font-size:1.8cqw; color:var(--ink-soft); }
  .f-next{ margin:0 3cqw 1.2cqw; padding:1cqw 1.6cqw; border:1.5px dashed var(--approve); background:#F1F6F3; }
  .f-next b{ color:var(--approve); font-size:2cqw; display:block; }
  .f-next p{ margin:.3cqw 0 0; font-size:1.8cqw; color:var(--ink-soft); }
  .f-foot{ border-top:1.5px solid var(--ink); padding:1cqw 3cqw; font-size:1.6cqw; color:var(--ink-soft); line-height:1.35; }
  .pay-option.off{ opacity:.45; cursor:not-allowed; }
  .err{ border:1.5px solid var(--orange); background:#FDF1EA; color:var(--ink); padding:10px 12px; font-size:13.5px; margin-bottom:14px; }
  .info{ border:1.5px solid var(--ink-soft); background:var(--paper); color:var(--ink); padding:10px 12px; font-size:13.5px; margin-bottom:14px; }
  .wait{ text-align:center; padding:34px 6px; }
  .wait .wt{ font-family:'Space Grotesk',sans-serif; font-size:18px; font-weight:600; margin:14px 0 8px; }
  .spin{ width:34px; height:34px; border:3px solid var(--paper-line); border-top-color:var(--orange); border-radius:50%; margin:0 auto; animation:rot .9s linear infinite; }
  @keyframes rot{ to{ transform:rotate(360deg); } }
  ::-webkit-scrollbar{ width:0; }