/* ───────────────────────────────────────────────────────────────────────────
   Portail client — Robin des Airs · style partagé (aligné sur suivi-dossier)
   Pages : depot-en-ligne.html · rib.html  (+ réutilisable ailleurs)
   Bannière : barre navy fine (logo + Retour) comme la page de suivi, puis
   contenu sur fond clair + carte premium. Mobile-first, contraste AA.
   Pas de halo/shimmer/texte-dégradé (charte marque).
─────────────────────────────────────────────────────────────────────────── */
:root{
  --navy:#0B1F3A; --navy2:#0d2445;
  --neon:#00C87A; --neon-b:#00E5A0; --neon-dark:#009960; --neon-ink:#047857;
  --ink:#0B1F3A; --ink-soft:#34465c; --muted:#62718a;
  --line:#E2E6EE; --line-2:#d3dce7;
  --bg:#F7F8FA; --surface:#ffffff; --surface-2:#f5f8fb;
  --green-tint:#e8f7f0; --green-line:#bfe6d3;
  --danger:#c0392b; --danger-bg:#fdecea;
  --radius:16px; --radius-sm:12px; --radius-pill:999px;
  --shadow-card:0 2px 16px rgba(11,31,58,.06);
  --shadow-btn:0 12px 26px -12px rgba(0,200,122,.55);
  --ease:cubic-bezier(.22,1,.36,1);
  --font:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --mono:'DM Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--font); color:var(--ink);
  background:var(--bg); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* ── Barre du haut (identique à suivi-dossier) ───────────────────────────── */
.topbar{
  background:var(--navy); display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; padding-top:max(14px, env(safe-area-inset-top));
}
.topbar .logo{font-weight:800; font-size:16px; color:#fff; text-decoration:none; letter-spacing:-.01em}
.topbar .logo .accent{color:var(--neon-b)}
.topbar .logo .bow{font-weight:400}
.topbar .back{color:rgba(255,255,255,.8); font-size:13px; font-weight:600; text-decoration:none; transition:color .15s}
.topbar .back:hover{color:#fff}

/* ── Conteneur + en-tête de page (fond clair) ────────────────────────────── */
.shell{max-width:540px; margin:0 auto; padding:26px 16px 56px}
.pagehead{margin-bottom:18px; animation:rise .4s var(--ease) both}
.pagehead h1{
  font-size:clamp(23px, 6vw, 28px); font-weight:800; letter-spacing:-.025em; color:var(--navy);
  margin:0 0 7px; text-wrap:balance; line-height:1.16;
}
.pagehead .lead{color:var(--ink-soft); font-size:15px; margin:0; max-width:42ch}
.pagehead .lead b{color:var(--navy); font-weight:700}
.ref-chip{
  display:inline-flex; align-items:center; gap:7px; margin-top:14px;
  background:#fff; border:1px solid var(--line-2); border-radius:var(--radius-pill);
  padding:6px 13px; font-size:12px; color:var(--ink-soft);
}
.ref-chip b{font-family:var(--mono); font-weight:500; color:var(--navy); letter-spacing:.3px}
.trust{display:flex; flex-wrap:wrap; gap:7px; margin-top:14px}
.trust span{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--green-tint); border:1px solid var(--green-line); color:var(--neon-ink);
  border-radius:var(--radius-pill); padding:5px 11px; font-size:12px; font-weight:600;
}

/* ── Carte formulaire ────────────────────────────────────────────────────── */
.panel{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow-card);
  padding:22px 20px 24px; animation:rise .45s var(--ease) both;
}
@keyframes rise{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}
.panel h2{font-size:19px; font-weight:800; letter-spacing:-.02em; margin:2px 0 6px; color:var(--navy)}
.panel .sub{color:var(--ink-soft); font-size:14.5px; margin:0 0 4px}

/* ── Checklist « à déposer » ─────────────────────────────────────────────── */
.need{list-style:none; padding:0; margin:14px 0 4px; display:flex; flex-direction:column; gap:8px}
.need li{
  display:flex; gap:11px; align-items:flex-start;
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:11px 13px; font-size:13.5px; line-height:1.45; color:var(--ink-soft);
}
.need li b{color:var(--ink); font-weight:700}
.need .ic{flex:0 0 26px; height:26px; border-radius:8px; display:grid; place-items:center; font-size:15px;
  background:var(--green-tint); color:var(--neon-ink)}

/* ── Encart chaleureux ───────────────────────────────────────────────────── */
.note{
  margin:14px 0 0; border-radius:var(--radius-sm); padding:13px 15px;
  background:var(--green-tint); border:1px solid var(--green-line);
  font-size:13.5px; line-height:1.55; color:#0c5a3f;
}
.note b{color:#08402d; font-weight:700}

/* ── Zone de dépôt fichiers ──────────────────────────────────────────────── */
.drop{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  border:2px dashed var(--line-2); border-radius:var(--radius-sm);
  background:var(--surface-2); padding:26px 16px; text-align:center; cursor:pointer;
  color:var(--neon-ink); font-weight:700; font-size:15px; margin-top:16px;
  transition:border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease);
}
.drop .plus{
  width:46px; height:46px; border-radius:14px; display:grid; place-items:center; font-size:22px;
  background:linear-gradient(135deg, var(--neon-b), var(--neon)); color:var(--navy); margin-bottom:6px;
  box-shadow:0 8px 18px -8px rgba(0,200,122,.55);
}
.drop small{display:block; color:var(--muted); font-weight:400; font-size:12.5px}
.drop:hover, .drop.drag{border-color:var(--neon); background:var(--green-tint)}
.drop.drag{transform:scale(1.01)}
.drop input[type=file]{display:none}

.files{list-style:none; padding:0; margin:13px 0 0; display:flex; flex-direction:column; gap:7px}
.files li{
  display:flex; align-items:center; gap:10px; font-size:13px;
  padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:#fff;
}
.files li .fi{flex:0 0 18px}
.files li .nm{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.files li .st{margin-left:auto; font-size:12px; font-weight:700; white-space:nowrap}
.st.ok{color:var(--neon-ink)} .st.err{color:var(--danger)} .st.up{color:var(--muted)}

/* ── Champs formulaire ───────────────────────────────────────────────────── */
.field{margin-top:16px}
.field > label{display:block; font-size:13px; font-weight:700; color:var(--navy); margin-bottom:6px}
.field > label .opt{font-weight:500; color:var(--muted)}
.input{
  width:100%; height:52px; border:1.5px solid var(--line-2); border-radius:var(--radius-sm);
  padding:0 14px; font-size:16px; font-family:inherit; color:var(--ink); background:var(--surface-2);
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.input::placeholder{color:#9aa7b6}
.input:focus{outline:none; border-color:var(--neon); background:#fff; box-shadow:0 0 0 4px rgba(0,200,122,.16)}
.input.mono{font-family:var(--mono); letter-spacing:.6px}
.input.ok{border-color:var(--neon-dark); background:var(--green-tint)}
.input.bad{border-color:var(--danger); background:var(--danger-bg)}
.hint{font-size:12.5px; margin-top:6px; min-height:17px; display:flex; align-items:center; gap:5px}
.hint.idle{color:var(--muted)} .hint.ok{color:var(--neon-ink); font-weight:600} .hint.bad{color:var(--danger); font-weight:600}

/* ── Bouton principal ────────────────────────────────────────────────────── */
.btn{
  width:100%; height:56px; margin-top:20px;
  background:var(--neon); color:var(--navy); border:0; border-radius:14px;
  font-family:inherit; font-weight:800; font-size:16.5px; letter-spacing:-.01em; cursor:pointer;
  box-shadow:var(--shadow-btn);
  transition:transform .16s var(--ease), background .16s, box-shadow .16s;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
}
.btn:hover:not(:disabled){background:var(--neon-b); transform:translateY(-2px); box-shadow:0 18px 32px -12px rgba(0,200,122,.6)}
.btn:active:not(:disabled){transform:translateY(0)}
.btn:disabled{background:#cfd8e2; color:#8d9aab; box-shadow:none; cursor:not-allowed}
.btn-back{width:100%; margin-top:10px; background:transparent; color:var(--ink-soft); border:0;
  font-family:inherit; font-weight:700; font-size:14px; cursor:pointer; padding:10px}
.btn-back:hover{color:var(--navy)}

/* ── Écran de confirmation (review avant envoi) ──────────────────────────── */
.recap{margin:14px 0 0; border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden}
.recap .row{display:flex; gap:12px; padding:12px 14px; border-bottom:1px solid var(--line)}
.recap .row:last-child{border-bottom:0}
.recap dt{flex:0 0 84px; margin:0; font-size:12.5px; font-weight:700; color:var(--muted)}
.recap dd{margin:0; font-size:14.5px; color:var(--navy); word-break:break-word}
.recap dd.mono{font-family:var(--mono); letter-spacing:.4px; font-size:14px}
.confirm{display:flex; gap:10px; align-items:flex-start; margin:16px 0 0; font-size:13.5px; color:var(--ink-soft); cursor:pointer; line-height:1.5}
.confirm input{flex:0 0 20px; width:20px; height:20px; margin:1px 0 0; accent-color:var(--neon-dark); cursor:pointer}
.confirm b{color:var(--navy); font-weight:700}

/* ── RGPD / erreurs ──────────────────────────────────────────────────────── */
.rgpd{display:flex; gap:8px; font-size:11.8px; color:var(--muted); margin-top:16px; line-height:1.6}
.rgpd b{color:var(--ink-soft); font-weight:700}
.errbox{display:none; background:var(--danger-bg); color:var(--danger); border:1px solid #f3c6c0;
  border-radius:10px; padding:11px 13px; font-size:13px; margin-top:12px; font-weight:600}

/* ── Écran de succès ─────────────────────────────────────────────────────── */
.done{display:none; text-align:center; padding:8px 6px 6px}
.done .seal{
  width:74px; height:74px; border-radius:50%; margin:6px auto 16px; display:grid; place-items:center;
  background:linear-gradient(135deg, var(--neon-b), var(--neon)); color:#fff; font-size:34px; font-weight:900;
  box-shadow:0 0 0 8px var(--green-tint), 0 14px 28px -10px rgba(0,200,122,.5);
  animation:pop .5s var(--ease) both;
}
@keyframes pop{from{transform:scale(.6); opacity:0} to{transform:scale(1); opacity:1}}
.done h2{font-size:21px; font-weight:800; letter-spacing:-.02em; margin:0 0 8px}
.done p{color:var(--ink-soft); font-size:14.5px; max-width:38ch; margin:0 auto 6px}
.done .data{
  display:inline-block; font-family:var(--mono); font-weight:500; color:var(--navy);
  background:var(--green-tint); border:1px solid var(--green-line); border-radius:9px;
  padding:8px 15px; margin:10px 0; letter-spacing:.5px;
}
.done .cta-link{
  display:inline-flex; align-items:center; gap:8px; margin-top:16px;
  border:1.5px solid var(--line-2); border-radius:13px; padding:13px 20px;
  color:var(--neon-ink); font-weight:700; font-size:14px; text-decoration:none;
  transition:border-color .18s var(--ease), background .18s var(--ease);
}
.done .cta-link:hover{border-color:var(--neon); background:var(--green-tint)}

/* ── Signature pied de page ──────────────────────────────────────────────── */
.signoff{text-align:center; color:var(--muted); font-size:12px; margin:22px auto 0; max-width:40ch}
.signoff b{color:var(--ink-soft); font-weight:700}

@media (max-width:380px){
  .shell{padding:22px 12px 48px}
  .panel{padding:20px 16px}
}
@media (prefers-reduced-motion:reduce){
  .pagehead,.panel,.done .seal{animation:none}
  .btn,.input,.drop,.done .cta-link,.topbar .back{transition:none}
}