:root{--nuit:#061a30;--marine:#0b2a4a;--azur:#1f6feb;--ciel:#5cc8f2;--givre:#eaf5fc;--blanc:#fbfdff;--ink:#0c2038;--muted:#5b7088;--line:#cfe0ee;--err:#c23a3a;--ok:#16794c}
*{box-sizing:border-box}
html{background:var(--nuit);min-width:320px}
body{margin:0;min-height:100vh;color:var(--ink);font-family:"Figtree",system-ui,sans-serif;
background:radial-gradient(60rem 30rem at 10% -10%,rgba(92,200,242,.22),transparent 60%),radial-gradient(40rem 26rem at 100% 100%,rgba(31,111,235,.3),transparent 60%),var(--nuit)}
.page{width:min(100% - 32px,980px);margin:0 auto;padding:28px 0 48px}
.masthead{display:flex;align-items:center;gap:12px;padding:8px 2px 28px}
.logo{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--azur),var(--ciel))}
.brand{font:700 1.35rem "Bricolage Grotesque",sans-serif;color:#fff;letter-spacing:-.01em}
.card{display:grid;grid-template-columns:minmax(230px,.8fr) minmax(0,1.2fr);overflow:hidden;border-radius:24px;background:var(--blanc);box-shadow:0 30px 80px rgba(0,0,0,.4)}
.intro{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:520px;padding:clamp(26px,4vw,44px);color:#fff;overflow:hidden;background:linear-gradient(160deg,var(--marine),var(--azur) 130%)}
.frost{position:absolute;top:-30px;right:-50px;width:340px;color:var(--ciel);opacity:.55}
.intro-body{position:relative}
h1{margin:0 0 14px;font:700 clamp(1.9rem,3.6vw,2.7rem)/1.05 "Bricolage Grotesque",sans-serif;letter-spacing:-.03em}
.intro p{margin:0;max-width:30ch;color:rgba(255,255,255,.8);line-height:1.6}
.panel{padding:clamp(24px,4vw,48px)}
h2{margin:0 0 26px;font:700 1.45rem "Bricolage Grotesque",sans-serif;letter-spacing:-.02em}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.full{grid-column:1/-1}
.field{display:flex;flex-direction:column;gap:7px}
label{font-weight:600;font-size:.88rem}
input[type=text],input[type=number],select{width:100%;height:48px;padding:0 14px;font:inherit;color:var(--ink);background:var(--givre);border:1.5px solid transparent;border-radius:12px;outline:0;transition:border-color .15s,background .15s}
select{appearance:none;padding-right:40px;background:var(--givre) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%235b7088' stroke-width='2'%3E%3Cpath d='m1 1 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 16px center}
select:invalid{color:var(--muted)}
input:focus,select:focus{border-color:var(--azur);background-color:#fff}
.zone{position:relative;display:flex;align-items:center;gap:16px;padding:18px;cursor:pointer;border:1.5px dashed #9cc3e0;border-radius:14px;background:var(--givre);transition:border-color .15s,background .15s}
.zone:hover,.zone:focus-visible,.zone.drag{border-color:var(--azur);background:#dff0fb;outline:0}
.zone::before{content:"";flex:0 0 56px;height:56px;border-radius:12px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231f6feb' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12'/%3E%3C/svg%3E") center/24px no-repeat}
.zone.has{border-style:solid}.zone.has::before{display:none}
#preview{display:none;flex:0 0 56px;width:56px;height:56px;border-radius:12px;object-fit:cover}
.zone.has #preview{display:block}
.zone-text{min-width:0;display:flex;flex-direction:column;gap:3px}
.zone-text strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zone-text small{color:var(--muted)}
input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.send{width:100%;margin-top:24px;height:52px;border:0;border-radius:14px;color:#fff;font:600 1rem "Figtree",sans-serif;cursor:pointer;background:linear-gradient(135deg,var(--azur),#2f8fe8);transition:transform .15s,box-shadow .15s}
.send:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(31,111,235,.35)}
.send:focus-visible{outline:3px solid var(--ciel);outline-offset:2px}
.send:disabled{opacity:.6;cursor:wait;transform:none;box-shadow:none}
.status{min-height:1.4em;margin:14px 0 0;font-size:.92rem;font-weight:500}
.status[data-s=error]{color:var(--err)}.status[data-s=success]{color:var(--ok)}
@media(max-width:760px){.card{grid-template-columns:1fr}.intro{min-height:230px}.frost{width:240px}.grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.who{display:flex;align-items:center;gap:12px;margin-left:auto;color:rgba(255,255,255,.8);font-size:.9rem}
.who a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.login-card{max-width:440px;margin:6vh auto 0;padding:clamp(26px,5vw,40px);border-radius:24px;background:var(--blanc);box-shadow:0 30px 80px rgba(0,0,0,.4)}
.login-card h1{color:var(--ink);font-size:2rem}
.login-card p{color:var(--muted);line-height:1.6;margin:0 0 4px}
.btn{display:grid;place-items:center;text-decoration:none}