:root{
    --red:#D71920;
    --red-dark:#A80F15;
    --red-soft:#FDECEC;
    --black:#111111;
    --ink:#1C1C1E;
    --grey:#6B6B70;
    --line:#E7E7EA;
    --bg:#F6F6F7;
    --white:#FFFFFF;
    --radius:16px;
    --shadow:0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html,body{margin:0}
  body{
    font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
    background:var(--bg);color:var(--ink);font-size:16px;line-height:1.4;
  }
  button{font:inherit;cursor:pointer}

  /* ===== Topbar ===== */
  .topbar{
    position:sticky;top:0;z-index:10;
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:12px 20px;background:var(--black);
    border-bottom:4px solid var(--red);
  }
  .topbar__logo{height:44px;width:auto;display:block}
  .topbar__right{text-align:right;color:#fff}
  .clock{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:28px;letter-spacing:1px;font-variant-numeric:tabular-nums;line-height:1}
  .today{font-size:12px;color:#BDBDC2;text-transform:capitalize;margin-top:2px}

  .wrap{max-width:880px;margin:0 auto;padding:18px 16px 40px;display:grid;gap:16px}

  /* ===== Stats ===== */
  .stats{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:12px}
  .stat{
    background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);
    padding:14px 16px;display:flex;flex-direction:column;gap:2px;border-top:4px solid var(--line);
  }
  .stat__num{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:40px;line-height:1;font-variant-numeric:tabular-nums}
  .stat__lbl{font-size:13px;color:var(--grey);font-weight:500}
  .stat--total{background:var(--red);border-top-color:var(--red-dark)}
  .stat--total .stat__num,.stat--total .stat__lbl{color:#fff}
  .stat--client{border-top-color:var(--black)}
  .stat--prospect{border-top-color:var(--red)}
  .stat--prospect .stat__num{color:var(--red)}
  .stat__num.bump{animation:bump .5s ease}
  @keyframes bump{40%{transform:scale(1.18)}}

  /* ===== Card ===== */
  .card{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px}
  .card__title{
    margin:0 0 16px;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-style:italic;
    text-transform:uppercase;font-size:26px;letter-spacing:.5px;
  }
  .card__title::after{content:"";display:block;width:44px;height:4px;background:var(--red);margin-top:4px;border-radius:2px}
  .card__title--sm{font-size:20px;margin-bottom:10px}

  /* ===== Type buttons ===== */
  .types{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .type{
    position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
    min-height:170px;padding:18px;border-radius:18px;border:3px solid var(--line);background:var(--white);
    color:var(--ink);transition:transform .12s ease, border-color .15s, background .15s, color .15s, box-shadow .15s;
  }
  .type:active{transform:scale(.98)}
  .type svg{width:56px;height:56px;fill:currentColor;stroke:currentColor}
  .type__name{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-style:italic;font-size:34px;text-transform:uppercase;letter-spacing:1px;line-height:1}
  .type__hint{font-size:13px;color:var(--grey)}
  .type--client svg{color:var(--black)}
  .type--prospect svg{color:var(--red)}
  .type--client[aria-checked="true"]{background:var(--black);border-color:var(--black);color:#fff;box-shadow:0 10px 24px rgba(0,0,0,.25)}
  .type--prospect[aria-checked="true"]{background:var(--red);border-color:var(--red);color:#fff;box-shadow:0 10px 24px rgba(215,25,32,.35)}
  .type[aria-checked="true"] svg{color:#fff}
  .type[aria-checked="true"] .type__hint{color:rgba(255,255,255,.8)}

  /* ===== Details ===== */
  .more{margin-top:16px;border:1px solid var(--line);border-radius:12px;padding:0 14px}
  .more__title{padding:14px 0 12px;font-weight:600}
  .more__title em{font-weight:400;color:var(--grey);font-style:normal;font-size:14px}
  .field[hidden]{display:none}
  .grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding-bottom:14px}
  .field{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--grey)}
  .field--full{grid-column:1/-1}
  .field input{
    font:inherit;font-size:16px;font-weight:500;color:var(--ink);
    padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;background:#FBFBFC;outline:none;
  }
  .field input:focus{border-color:var(--red);background:#fff;box-shadow:0 0 0 3px var(--red-soft)}
  .chips{display:flex;flex-wrap:wrap;gap:8px}
  .chip{
    padding:9px 14px;border-radius:999px;border:1.5px solid var(--line);background:#fff;
    font-size:14px;font-weight:600;color:var(--ink);
  }
  .chip[aria-pressed="true"]{background:var(--black);border-color:var(--black);color:#fff}

  /* ===== Submit ===== */
  .btn-submit{
    margin-top:18px;width:100%;min-height:64px;border:none;border-radius:14px;
    background:var(--red);color:#fff;font-family:'Barlow Condensed',sans-serif;font-weight:800;
    font-size:24px;letter-spacing:1px;text-transform:uppercase;display:flex;align-items:center;justify-content:center;gap:12px;
    box-shadow:0 8px 20px rgba(215,25,32,.3);transition:background .15s, opacity .15s;
  }
  .btn-submit:hover:not(:disabled){background:var(--red-dark)}
  .btn-submit:disabled{background:#C9C9CE;box-shadow:none;cursor:not-allowed}
  .btn-submit.is-dark{background:var(--black);box-shadow:0 8px 20px rgba(0,0,0,.25)}
  .spinner{display:none;width:22px;height:22px;border:3px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}
  .btn-submit.loading .spinner{display:inline-block}
  @keyframes spin{to{transform:rotate(360deg)}}
  .error{color:var(--red);font-weight:600;margin:10px 0 0;min-height:1em}

  /* ===== Recent ===== */
  .recent{list-style:none;margin:0;padding:0}
  .recent li{display:grid;grid-template-columns:auto auto 1fr auto;gap:12px;align-items:center;padding:11px 0;border-top:1px solid var(--line);font-size:14px}
  .recent li:first-child{border-top:none}
  .recent__time{font-variant-numeric:tabular-nums;font-weight:700}
  .recent__name{color:var(--grey);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .recent__no{font-size:12px;color:var(--grey);font-variant-numeric:tabular-nums}
  .recent__empty{color:var(--grey);display:block!important}
  .badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.4px}
  .badge--Client{background:var(--black);color:#fff}
  .badge--Prospect{background:var(--red-soft);color:var(--red)}

  /* ===== Ticket ===== */
  .overlay{
    position:fixed;inset:0;z-index:50;background:rgba(10,10,10,.72);
    display:none;align-items:center;justify-content:center;padding:16px;overflow:auto;
  }
  .overlay.show{display:flex;animation:fade .2s ease}
  @keyframes fade{from{opacity:0}}
  .ticket{
    width:100%;max-width:360px;background:#fff;border-radius:14px;padding:22px 22px 18px;
    position:relative;box-shadow:0 20px 50px rgba(0,0,0,.4);animation:pop .28s cubic-bezier(.2,.9,.3,1.3);
  }
  @keyframes pop{from{transform:translateY(20px) scale(.96);opacity:0}}
  .ticket__head{text-align:center;padding-bottom:12px;border-bottom:2px dashed var(--line)}
  .ticket__logo{width:200px;max-width:80%;height:auto}
  .ticket__brand{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-style:italic;font-size:30px;letter-spacing:3px;color:var(--black);line-height:1;margin-top:6px}
  .ticket__sub{font-size:12px;color:var(--grey);text-transform:uppercase;letter-spacing:1.5px;margin-top:4px}
  .ticket__type{
    margin:16px auto 8px;text-align:center;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-style:italic;
    font-size:40px;letter-spacing:3px;padding:6px 0;border-radius:10px;color:#fff;background:var(--red);
  }
  .ticket__type.is-client{background:var(--black)}
  .ticket__no{text-align:center;font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:700;font-size:15px;letter-spacing:1px}
  .ticket__rows{margin:14px 0 0;padding:12px 0;border-top:2px dashed var(--line);border-bottom:2px dashed var(--line)}
  .ticket__rows div{display:flex;justify-content:space-between;gap:12px;padding:4px 0}
  .ticket__rows dt{color:var(--grey);font-size:14px}
  .ticket__rows dd{margin:0;font-weight:700;text-align:right}
  #tDate,#tHeure{font-size:20px;font-variant-numeric:tabular-nums}
  .ticket__stamp{text-align:center;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;color:var(--grey);margin-top:10px}
  .ticket__foot{text-align:center;font-size:12px;margin-top:6px;color:var(--ink)}
  .ticket__actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
  .btn{min-height:52px;border:none;border-radius:12px;font-weight:700;font-size:15px;color:#fff;white-space:nowrap;padding:0 10px}
  .btn--dark{background:var(--black)}
  .btn--red{background:var(--red)}

  /* ===== Responsive ===== */
  @media (max-width:560px){
    .topbar{padding:10px 16px}
    .topbar__logo{height:32px}
    .clock{font-size:22px}
    .stats{grid-template-columns:1fr 1fr}
    .stat--total{grid-column:1/-1;flex-direction:row;align-items:baseline;gap:10px}
    .stat__num{font-size:34px}
    .type{min-height:140px}
    .type__name{font-size:28px}
    .type svg{width:44px;height:44px}
    .grid{grid-template-columns:1fr}
    .recent li{grid-template-columns:auto auto 1fr}
    .recent__no{display:none}
  }

  /* ===== Impression (imprimante ticket 80 mm ou A4) ===== */
  @media print{
    @page{size:80mm auto;margin:4mm}
    body{background:#fff}
    .topbar,.wrap,.no-print{display:none!important}
    .overlay{position:static;display:block!important;background:none;padding:0}
    .ticket{box-shadow:none;max-width:72mm;padding:0;animation:none;border-radius:0}
    .ticket__type{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  }

/* Bandeau d'alerte (connexion / configuration) */
.banner{background:var(--black);color:#fff;padding:12px 20px;font-size:14px;font-weight:600;border-left:6px solid var(--red)}
.banner[hidden]{display:none}