/* Zeloyer web — feuille de style unique. Charte : #1B3A5C / #2E9E6B / #EFF4F9 / Inter (police hébergée). */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/inter-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/inter-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/inter-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/inter-latin-800-normal.woff2') format('woff2')}

:root{
  --bg:#EFF4F9; --ink:#1B3A5C; --ink2:#35678F; --green:#2E9E6B; --green-dark:#227952; --green-soft:#E7F4EE;
  --white:#fff; --line:#DCE6EF; --muted:#6E8AA3; --error:#B3261E; --error-soft:#FBEAEA; --warn-soft:#FFF2DC; --warn:#E08A1E;
  --shadow:0 2px 14px rgba(27,58,92,.07); --radius:16px; --radius-sm:10px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:16px;line-height:1.5}
a{color:var(--ink2)}
h1,h2,h3{line-height:1.2;letter-spacing:-.02em;margin:0 0 .4em}
h1{font-size:26px;font-weight:700}
h2{font-size:22px;font-weight:700}
h3{font-size:17px;font-weight:700}
p{margin:0 0 .8em}
button{font:inherit}
input,textarea,select{font:inherit;color:var(--ink)}
[hidden]{display:none!important}
.sr-only{position:absolute;left:-9999px}

/* ---------- structure ---------- */
.app{max-width:560px;margin:0 auto;padding:0 16px 40px;min-height:100vh;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 0 10px;gap:10px}
.topbar .logo{font-size:22px;font-weight:800;letter-spacing:-.03em;color:var(--ink);text-decoration:none}
.topbar .logo span{color:var(--green)}
.topbar .actions{display:flex;gap:8px;align-items:center}
.label{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.label.accent{color:var(--green)}
.card{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
.card+.card{margin-top:14px}
.card.accent-top{border-top:2px solid var(--green);border-radius:12px}
.sunken{background:#E4ECF3;border-radius:var(--radius-sm);padding:16px}
.hairline{height:1px;background:var(--line);margin:12px 0}
.muted{color:var(--muted)}
.small{font-size:13px}
.error-text{color:var(--error)}
.filet{width:56px;height:3px;background:var(--green);border-radius:2px;margin-bottom:10px}
main{flex:1;padding-bottom:8px}
footer.appfoot{margin-top:28px;padding-top:14px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
footer.appfoot p{margin:0 0 6px}
footer.appfoot a{color:var(--muted);margin-right:10px}

/* ---------- boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:52px;padding:12px 18px;border:0;border-radius:12px;
  background:var(--green);color:#fff;font-weight:700;font-size:17px;cursor:pointer;text-decoration:none;transition:background .15s}
.btn:hover{background:var(--green-dark)}
.btn:disabled,.btn[aria-disabled="true"]{background:#B9CDBF;cursor:not-allowed}
.btn.secondary{background:transparent;color:var(--ink);border:1.6px solid var(--ink2)}
.btn.secondary:hover{background:#fff}
.btn.quiet{background:transparent;color:var(--ink2);font-weight:600;min-height:44px}
.btn.quiet:hover{background:rgba(27,58,92,.05)}
.btn.small{min-height:40px;font-size:14px;width:auto;padding:8px 14px}
.btn.danger{background:transparent;color:var(--error);border:1.6px solid var(--error)}
.btn-row{display:flex;flex-direction:column;gap:6px;margin-top:16px}
.btn-row.inline{flex-direction:row;flex-wrap:wrap}
.btn-row.inline .btn{width:auto;flex:1 1 140px}
.pill{display:inline-block;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--green);color:#fff}
.pill.soft{background:var(--green-soft);color:var(--green-dark)}
.pill.grey{background:#E4ECF3;color:var(--muted)}
.help-pill{border:1.6px solid var(--line);background:#fff;color:var(--ink2);font-weight:700;font-size:13px;border-radius:999px;padding:7px 12px;cursor:pointer}

/* ---------- progression / ticks ---------- */
.ticks{display:flex;gap:4px;margin:6px 0}
.ticks i{flex:1;height:5px;border-radius:3px;background:var(--line)}
.ticks i.done{background:var(--green)}

/* ---------- questionnaire ---------- */
.q-title{font-size:26px;font-weight:700;letter-spacing:-.02em;margin:14px 0 6px}
.q-hint{color:var(--muted);font-size:15px;margin:0 0 20px}
.field{margin:8px 0 18px}
.field input[type=text],.field input[type=date],.field input[type=email],.field textarea,.field input[type=number]{
  width:100%;border:0;border-bottom:1.5px solid var(--line);background:transparent;padding:14px 0;font-size:20px;font-weight:600;outline:none;border-radius:0}
.field input:focus,.field textarea:focus{border-bottom-color:var(--green)}
.field.amount{display:flex;align-items:center;gap:8px;border-bottom:1.5px solid var(--line)}
.field.amount input{border:0;font-size:26px;font-weight:700;color:var(--green);font-variant-numeric:tabular-nums}
.field.amount span{font-size:20px;font-weight:700;color:var(--green)}
.field .date-display{font-size:20px;font-weight:700;color:var(--green);margin-bottom:8px}
.choices{display:flex;flex-direction:column;gap:12px}
.choice{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:60px;padding:0 18px;background:#fff;border:1px solid transparent;
  border-radius:var(--radius-sm);box-shadow:var(--shadow);font-size:17px;font-weight:500;color:var(--ink);cursor:pointer;text-align:left}
.choice[aria-pressed="true"]{border-color:var(--green);box-shadow:inset 3px 0 0 var(--green),var(--shadow)}
.choice[aria-pressed="true"]::after{content:"✓";color:var(--green);font-weight:800}
.check-row{background:#fff;border-radius:var(--radius-sm);box-shadow:var(--shadow);border:1px solid transparent;margin-bottom:12px}
.check-row.on{border-color:var(--green);box-shadow:inset 3px 0 0 var(--green),var(--shadow)}
.check-row.invalid{border-color:var(--error);box-shadow:inset 3px 0 0 var(--error),var(--shadow)}
.check-row label.main{display:flex;align-items:center;gap:14px;padding:16px 18px;cursor:pointer;font-weight:600;font-size:17px}
.check-row input[type=checkbox]{width:24px;height:24px;accent-color:var(--green);margin:0}
.check-row .date-block{border-top:1px solid var(--line);padding:14px 18px 16px}
.check-row .date-block input{width:100%;border:0;border-bottom:1.5px solid var(--line);padding:8px 0;font-size:18px;font-weight:600;background:transparent}
.note-box{border:1px solid var(--line);border-left:3px solid var(--green);border-radius:8px;padding:14px;font-size:13px;color:var(--muted);margin-top:22px}
.recap{margin-top:30px}
.recap-row{display:flex;justify-content:space-between;gap:12px;padding:12px 14px;border-top:1px solid var(--line);font-size:14px;background:#fff}
.recap-row:first-of-type{border-top:0}
.recap-row .k{color:var(--muted);font-size:13px}
.recap-row .v{font-weight:600;text-align:right;flex:1}
.recap-row button{background:none;border:0;color:var(--ink2);font-weight:600;font-size:12px;cursor:pointer;padding:0}
.recap-list{background:#fff;border-radius:var(--radius-sm);box-shadow:var(--shadow);overflow:hidden}

/* ---------- plan ---------- */
.amount-big{font-size:40px;font-weight:700;color:var(--green);letter-spacing:-.04em;font-variant-numeric:tabular-nums;line-height:1.1}
.amount-big small{font-size:22px}
.timeline{list-style:none;margin:0;padding:0}
.timeline li{display:flex;gap:14px;position:relative}
.timeline .rail{width:12px;display:flex;flex-direction:column;align-items:center;flex:none}
.timeline .dot{width:11px;height:11px;border-radius:50%;border:1px solid var(--line);background:var(--bg);margin-top:6px;flex:none}
.timeline .dot.done{background:var(--green);border-color:var(--green)}
.timeline .dot.current{border:3px solid var(--green);width:11px;height:11px}
.timeline .line{width:1px;flex:1;background:var(--line)}
.timeline .line.done{background:var(--green)}
.timeline li:last-child .line{opacity:0}
.timeline .body{flex:1;padding-bottom:18px;background:none;border:0;text-align:left;cursor:pointer;color:inherit;font:inherit;padding-left:0;padding-right:0}
.timeline .row1{display:flex;align-items:baseline;gap:8px}
.timeline .t{font-weight:700;font-size:16px;flex:1}
.timeline .t.off{color:var(--muted)}
.timeline .d{font-size:12px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.timeline .d.done{color:var(--green)}
.timeline .d.late{color:var(--error)}
.timeline .cap{font-size:13px;color:var(--muted)}
.timeline .cap.done{color:var(--green)}
.timeline .cap.late{color:var(--error)}
.lock{font-size:11px;color:var(--muted)}
.locked-preview{filter:blur(4px);pointer-events:none;user-select:none}
.band-spacer{height:52px}
.status-band{position:sticky;bottom:0;background:#E4ECF3;border-top:2px solid var(--green);padding:11px 16px;font-size:13px;margin:16px -16px 0;color:var(--muted)}
.status-band b{color:var(--ink)}
.status-band b.late{color:var(--error)}
.banner{display:flex;gap:10px;align-items:center;background:rgba(46,158,107,.10);border-radius:8px;padding:12px 14px;font-weight:600;font-size:14px;margin-bottom:18px}
.banner button{margin-left:auto;background:none;border:0;color:var(--muted);font-weight:700;cursor:pointer}
.alert{background:var(--warn-soft);border-left:3px solid var(--warn);border-radius:8px;padding:12px 14px;font-size:14px;margin:14px 0}
.alert.red{background:var(--error-soft);border-left-color:var(--error)}

/* ---------- courrier ---------- */
.letter{background:#fff;border-radius:6px;box-shadow:var(--shadow);padding:22px 20px;font-size:14px;line-height:1.55;white-space:pre-wrap;word-wrap:break-word;color:#111;font-family:Georgia,'Times New Roman',serif}
.letter .hd{display:flex;justify-content:space-between;gap:16px;white-space:pre-wrap}
.letter .hd div{flex:1}
.letter .hd div+div{text-align:right}
.letter .obj{font-weight:700;margin:16px 0 6px}
.letter .foot{margin-top:18px;font-size:11px;color:#555;border-top:1px solid #ddd;padding-top:8px;font-family:'Inter',sans-serif}
.letter-actions{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.letter-actions .btn{flex:1 1 30%;width:auto;min-height:46px;font-size:15px}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 16px;border-radius:999px;font-size:14px;font-weight:600;box-shadow:0 6px 20px rgba(0,0,0,.2);z-index:50;max-width:90vw}

/* ---------- feuilles / modales ---------- */
.sheet-bg{position:fixed;inset:0;background:rgba(27,58,92,.45);display:flex;align-items:flex-end;justify-content:center;z-index:40;padding:0}
.sheet{background:var(--bg);width:100%;max-width:560px;border-radius:20px 20px 0 0;padding:24px 20px 28px;max-height:90vh;overflow:auto}
.sheet h2{font-size:22px}
.paywall-price{font-size:34px;font-weight:800;color:var(--green);letter-spacing:-.03em;margin:8px 0}
.paywall-list{list-style:none;margin:14px 0;padding:0}
.paywall-list li{padding:8px 0;border-top:1px solid var(--line);font-size:15px}
.paywall-list li::before{content:"✓ ";color:var(--green);font-weight:800}
.checkbox-line{display:flex;gap:12px;align-items:flex-start;font-size:14px;margin:14px 0}
.checkbox-line input{width:22px;height:22px;accent-color:var(--green);flex:none;margin-top:1px}
.code-input{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:12px;font-size:18px;font-weight:600;letter-spacing:.05em;background:#fff;text-transform:uppercase}

/* ---------- accueil ---------- */
.hero{padding:26px 0 10px}
.hero h1{font-size:30px;font-weight:800;letter-spacing:-.03em}
.hero p{font-size:17px;color:var(--ink2)}
.reassure{display:grid;grid-template-columns:1fr;gap:8px;margin:18px 0;font-size:14px}
.reassure div{background:#fff;border-radius:10px;padding:12px 14px;box-shadow:var(--shadow)}
.case-card{display:block;width:100%;text-align:left;background:#fff;border:0;border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 18px;cursor:pointer;color:inherit;font:inherit;margin-bottom:12px}
.case-card .ref{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.05em;text-transform:uppercase}
.case-card .name{font-weight:700;font-size:17px;margin:4px 0}
.case-card .amt{font-weight:700;color:var(--green);font-variant-numeric:tabular-nums}

/* ---------- grand écran ---------- */
@media (min-width:900px){
  .app{max-width:720px}
  .hero h1{font-size:38px}
  .reassure{grid-template-columns:1fr 1fr}
  .btn-row{flex-direction:row;flex-wrap:wrap}
  .btn-row .btn{width:auto;flex:1 1 200px}
  .sheet-bg{align-items:center}
  .sheet{border-radius:20px}
}

/* ---------- impression ---------- */
@media print{
  @page{margin:18mm}
  body{background:#fff;color:#000}
  .app{max-width:none;padding:0}
  .no-print,.topbar,footer.appfoot,.status-band,.letter-actions,.btn,.btn-row,.help-pill{display:none!important}
  .letter{box-shadow:none;border-radius:0;padding:0;font-size:12pt;line-height:1.5}
  .print-only{display:block!important}
}
.print-only{display:none}