/* Page « Mon compte » — même palette que l'accueil (../index.html). */
:root{
  --vert:#16bfa3; --vert-fonce:#0e9c85; --vert-pale:#e8f8f5;
  --fond:#f4f6f8; --carte:#fff; --trait:#e2e7ec; --texte:#16202b;
  --doux:#61707f; --rouge:#c0392b; --rouge-pale:#fdeceb;
  --ombre:0 1px 2px rgba(20,30,45,.05), 0 8px 24px rgba(20,30,45,.07);
}
*{box-sizing:border-box}
body{margin:0; color:var(--texte); background:var(--fond);
  background-image:radial-gradient(1100px 380px at 50% -140px, #dff5f0 0%, rgba(223,245,240,0) 70%);
  font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,sans-serif;
  padding:24px 16px 48px}
.bloc{max-width:560px; margin:0 auto}
.retour{display:inline-block; color:var(--vert-fonce); text-decoration:none; font-weight:600; font-size:14px; margin-bottom:8px}
.retour:hover{text-decoration:underline}
h1{font-size:24px; margin:0 0 18px}
h2{font-size:16px; margin:0 0 12px}
.carte{background:var(--carte); border:1px solid var(--trait); border-radius:14px;
  padding:20px; box-shadow:var(--ombre); margin-bottom:16px}
.doux{color:var(--doux)}
.petit{font-size:13px; margin:0 0 6px}
.aide{color:var(--doux); font-size:13.5px; margin:0 0 14px}
.identite{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:10px}
.identite span{display:block; font-size:12px}
.identite strong{font-size:15px; word-break:break-word}
.champ{margin-bottom:12px}
.champ label{display:block; font-size:13px; color:var(--doux); margin-bottom:5px; font-weight:500}
input{font:inherit; padding:11px 13px; border-radius:9px; border:1px solid var(--trait); width:100%; background:#fcfdfd}
input:focus{outline:none; border-color:var(--vert); box-shadow:0 0 0 3px var(--vert-pale)}
.actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.btn{font:inherit; font-size:14px; font-weight:600; padding:10px 14px; border-radius:9px; cursor:pointer;
  border:1px solid var(--trait); background:#fff; color:var(--texte)}
.btn:hover{border-color:var(--doux)}
.btn:disabled{opacity:.55; cursor:not-allowed}
.btn-vert{background:var(--vert); border-color:var(--vert-fonce); color:#fff}
.btn-vert:hover{background:var(--vert-fonce)}
.btn-danger{color:var(--rouge); border-color:var(--rouge); background:var(--rouge-pale)}
.btn-danger:hover{background:var(--rouge); color:#fff}
/* Même proportion (≈ 2:1) que la case signature de BI sur téléphone, pour que la
   signature enregistrée y tombe sans être écrasée. */
.sig-canvas{display:block; width:100%; aspect-ratio:2/1; border:1.5px dashed var(--doux);
  border-radius:10px; background:#fff; touch-action:none; cursor:crosshair}
.sig-apercu{display:block; width:100%; aspect-ratio:2/1; object-fit:contain;
  border:1px solid var(--trait); border-radius:10px; background:#fff}
.message{font-size:13.5px; margin:10px 0 0; min-height:1.2em}
.message.ok{color:var(--vert-fonce)}
.message.ko,.erreur{color:var(--rouge)}
[hidden]{display:none!important}
@media (max-width:480px){ .identite{grid-template-columns:1fr} .carte{padding:16px} }