/* CSS (inchangé) */
:root{
  --bg:#f6f7fb; --surface:#ffffff; --ink:#0b1324; --muted:#667085; --line:#e9edf4;
  --brand:#d4af37; --brand-600:#c59b2f; --ok:#16a34a; --err:#dc2626; --focus:#3b82f6;
  --shadow:0 26px 60px rgba(12,20,40,.12);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ink);
  font:15px/1.55 "Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(1200px 560px at 80% -120px, rgba(212,175,55,.08), transparent 60%),
    linear-gradient(180deg,#fbfcff 0,#f3f5fb 360px,#eef2f8 100%);
}
.site-head{position:sticky; top:0; z-index:20; backdrop-filter:saturate(1.05) blur(6px); background:rgba(255,255,255,.72); border-bottom:1px solid var(--line);}
.head-inner{max-width:880px; margin:0 auto; padding:10px 14px; display:flex; align-items:center; gap:10px;}
.brand{display:flex; align-items:center; gap:10px;}
.logo{width:32px; height:32px; border-radius:10px; display:grid; place-items:center; font-weight:800; background:linear-gradient(180deg,var(--brand),var(--brand-600)); color:#1c1606; border:1px solid #e6d28d; box-shadow:0 8px 18px rgba(212,175,55,.24);}
.title{margin:0; font-size:15px; font-weight:800}
.subtitle{margin:0; color:var(--muted); font-size:11.5px}
.secure{margin-left:auto; display:inline-flex; align-items:center; gap:8px; padding:5px 9px; border-radius:999px; background:#f8fafc; color:#0b1324; border:1px solid var(--line); box-shadow:var(--shadow); font-weight:700;}
.secure svg{width:16px; height:16px; color:var(--focus)}
.dot{width:8px; height:8px; border-radius:50%; background:var(--brand); box-shadow:0 0 0 4px rgba(212,175,55,.18);}
.wrap{max-width:880px; margin:14px auto; padding:0 12px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); overflow:visible;}
.card__head{padding:12px 18px; border-bottom:1px solid var(--line); font-weight:800; background:linear-gradient(180deg,#fff 0,#fafbfe 100%);}
.card__body{padding:18px}
.msg{border-radius:12px; padding:10px 12px; display:flex; gap:10px; align-items:flex-start; border:1px solid; margin:8px 0;}
.msg.error{background:#fef2f2; border-color:#fecaca; color:#7f1d1d;}
.grid{display:grid; gap:14px; grid-template-columns:1fr}
@media (min-width:860px){ .grid{grid-template-columns:1fr 1fr} }
.span2{grid-column:1/-1}
label{font-size:12px; color:#344054; font-weight:600; display:flex; align-items:center; gap:8px;}
.label.flex{display:flex; align-items:center; gap:6px;}
.info-wrap{position:relative; display:inline-block;}
.info-btn{display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border:0; background:transparent; color:#64748b; cursor:pointer; font-weight:900;}
.info-btn:hover{color:#2563eb;}
.control{position:relative; display:flex; align-items:center; gap:10px; background:#fff; border:1px solid #d0d5dd; border-radius:12px; padding:10px 12px; transition:border-color .2s, box-shadow .2s, background .2s;}
.control:focus-within{border-color:var(--focus); box-shadow:0 0 0 3px rgba(59,130,246,.12);}
.inp{width:100%; border:0; outline:0; background:transparent; font-size:14px; color:var(--ink); padding-left:34px;}
::placeholder{color:#7f8b9c;}
.icon-left{position:absolute; left:10px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:#64748b;}
.icon-right{position:absolute; right:10px; top:50%; transform:translateY(-50%); width:22px; height:22px; color:#64748b;}
.icon-btn{border:0; background:transparent; padding:0; cursor:pointer; color:inherit; line-height:0;}
.svg{width:100%; height:100%}
.svg path,.svg rect,.svg circle{stroke:currentColor; fill:none; stroke-width:2.1}
.hint{color:var(--muted); font-size:11.5px; margin-top:6px}
.upload{display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:#fff; border:1px dashed #d0d5dd; border-radius:12px; padding:10px;}
.upload input[type="file"]{display:none;}
.upload .btn{display:inline-flex; align-items:center; gap:8px; padding:8px 11px; border-radius:10px; background:#fff7e0; color:#7c5f16; border:1px solid #f2e2b6; font-weight:700; cursor:pointer;}
.file-name{color:#6b7280; font-size:13px}
.actions{padding:14px 18px 16px; border-top:1px solid var(--line)}
.btn-primary{width:100%; border:0; border-radius:12px; cursor:pointer; padding:12px 16px; font-weight:900; letter-spacing:.2px; color:#1c1606; background:linear-gradient(180deg,var(--brand) 0%,var(--brand-600) 100%); box-shadow:0 10px 24px rgba(212,175,55,.25); transition:transform .06s ease, filter .15s ease;}
.btn-primary:active{transform:translateY(1px)}
.foot{display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap; margin-top:10px; color:#6b7280; font-size:12px}
.foot a{color:#0f172a; text-decoration:underline; text-underline-offset:2px}
.tooltip{position:absolute; top:26px; left:0; z-index:60; min-width:320px; width:clamp(320px, 42vw, 480px); max-width:480px; background:#fff; border:1px solid var(--line, #e6e9ef); border-radius:12px; box-shadow:0 18px 44px rgba(11,18,32,.12); padding:14px 16px; opacity:0; pointer-events:none; transform:translateY(6px) scale(.98); transition:opacity .14s ease, transform .14s ease;}
.tooltip.is-open{opacity:1; pointer-events:auto; transform:translateY(0) scale(1);}
.tooltip-arrow{position:absolute; top:-7px; left:16px; width:12px; height:12px; transform:rotate(45deg); background:#fff; border-left:1px solid var(--line, #e6e9ef); border-top:1px solid var(--line, #e6e9ef);}
.tooltip-body{font-size:13px; line-height:1.55; color:#0b1220;}
.tooltip-body strong{font-size:13px; display:block; margin-bottom:4px;}
.tooltip-body p{margin:8px 0;}
.tooltip-body ul{list-style:disc; margin:6px 0 6px 20px; padding:0; color:#374151;}
.tooltip-body li{margin:4px 0;}
:root{ --control-h: 40px; }
.control{ min-height: var(--control-h); padding: 6px 12px; border-radius: 12px; }
.control .inp{ height: calc(var(--control-h) - 2px); line-height: calc(var(--control-h) - 2px); padding-block: 0; }
.icon-left{ left:12px; width:16px; height:16px; }
.icon-right{ right:10px; width:20px; height:20px; }
.inp{ padding-left:32px; }
.inp-date{ height: calc(var(--control-h) - 2px) !important; line-height: calc(var(--control-h) - 2px) !important; padding-right: 34px; }
.row-inline{display:grid; gap:14px; grid-template-columns:1fr}
@media (min-width:700px){ .row-inline{ grid-template-columns: 2fr 1fr; } }
.req{display:inline-block;margin-left:.25ch;color:var(--ink);font-weight:800;font-size:.96em;line-height:1;vertical-align:baseline;transform:translateY(-0.03em);}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,1,1);white-space:nowrap;border:0;}
@media (max-width:560px){
  label.label.flex{width:100%;}
  .info-wrap{width:100%;}
  .tooltip{left:50%; transform:translate(-50%, 6px) scale(.98); width:calc(100vw - 96px); max-width:280px; padding:8px 10px;}
  .tooltip.is-open{transform:translate(-50%, 0) scale(1);}
  .tooltip-body{font-size:12px; line-height:1.4;}
  .tooltip-arrow{left:50%; transform:translateX(-50%) rotate(45deg);}
}