/* Limaj Finance — charte Limaj Immigration : marine #13294B, or #C9A24A */
:root {
  --marine: #13294B; --marine-2: #1C3763; --marine-3: #0A1630;
  --or: #C9A24A; --or-pale: #F4EBD3;
  --fond: #F5F6F8; --carte: #FFFFFF; --bord: #E1E5EC; --texte: #1B2433; --doux: #5B6475;
  --succes: #1F6B4F; --succes-fond: #E3F2EB; --alerte: #8A5A00; --alerte-fond: #FDF1D8;
  --danger: #9E3A2A; --danger-fond: #F8E4E0; --info: #1D4E89; --info-fond: #E3EDF9;
  --rayon: 10px; --ombre: 0 1px 2px rgba(19,41,75,.06), 0 4px 16px rgba(19,41,75,.05);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--fond); color: var(--texte); font: 14.5px/1.5 "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; }
a { color: var(--marine-2); }
h1 { font-size: 1.45rem; margin: 0 0 .25rem; color: var(--marine); letter-spacing: -.01em; }
h2 { font-size: 1.08rem; margin: 0 0 .75rem; color: var(--marine); }
h3 { font-size: .95rem; margin: 1rem 0 .5rem; color: var(--marine); }
.sous { color: var(--doux); margin: 0 0 1.2rem; }
.petit { font-size: .82rem; color: var(--doux); }

/* --- Structure --- */
.app { display: flex; min-height: 100vh; }
.menu { width: 238px; flex: 0 0 238px; background: linear-gradient(180deg, var(--marine) 0%, var(--marine-3) 100%); color: #fff; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.menu-logo { display: flex; flex-direction: column; align-items: center; padding: 18px 12px 10px; text-decoration: none; border-bottom: 1px solid rgba(201,162,74,.35); }
.menu-logo img { width: 120px; height: auto; }
.menu-logo span { color: var(--or); font-weight: 600; letter-spacing: .3em; text-transform: uppercase; font-size: .72rem; margin-top: 4px; }
.menu nav { padding: 10px 8px; display: flex; flex-direction: column; gap: 2px; }
.menu nav a { color: #D7DEEA; text-decoration: none; padding: 9px 12px; border-radius: 8px; display: flex; align-items: center; gap: 10px; font-size: .93rem; }
.menu nav a i { font-style: normal; width: 18px; text-align: center; color: var(--or); opacity: .85; }
.menu nav a:hover { background: rgba(255,255,255,.07); color: #fff; }
.menu nav a.actif { background: rgba(201,162,74,.16); color: #fff; box-shadow: inset 3px 0 0 var(--or); }
.pastille { margin-left: auto; background: var(--or); color: var(--marine); border-radius: 999px; font-size: .72rem; padding: 0 7px; font-weight: 700; }
.menu-pied { margin-top: auto; padding: 14px; font-size: .72rem; color: #8FA0BC; border-top: 1px solid rgba(255,255,255,.08); }
/* Bascule mode simple / comptabilité avancée (bouton rendu comme un lien du menu) */
.menu-mode { margin: 6px 0 0; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.1); }
.menu-mode button { width: 100%; background: none; border: none; cursor: pointer; font: inherit; color: #D7DEEA; padding: 9px 12px; border-radius: 8px; display: flex; align-items: center; gap: 10px; font-size: .93rem; text-align: left; }
.menu-mode button i { font-style: normal; width: 18px; text-align: center; color: var(--or); opacity: .85; }
.menu-mode button:hover { background: rgba(255,255,255,.07); color: #fff; }
/* Accueil simple : grandes actions */
.actions-accueil { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.actions-accueil a { display: flex; flex-direction: column; gap: 6px; padding: 22px 20px; background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre); text-decoration: none; color: var(--texte); border-top: 4px solid var(--or); }
.actions-accueil a:hover { border-color: var(--marine-2); transform: translateY(-1px); }
.actions-accueil a i { font-style: normal; font-size: 1.6rem; color: var(--marine); }
.actions-accueil a strong { font-size: 1.1rem; color: var(--marine); }
.actions-accueil a span { color: var(--doux); font-size: .88rem; }
@media (max-width: 900px) { .actions-accueil { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .actions-accueil { grid-template-columns: 1fr; } }
.contenu { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.barre { display: flex; align-items: center; gap: 16px; padding: 10px 26px; background: var(--carte); border-bottom: 1px solid var(--bord); position: sticky; top: 0; z-index: 5; }
.barre-titre { flex: 1; font-weight: 600; color: var(--marine); }
.barre-user { display: flex; gap: 14px; align-items: center; font-size: .85rem; color: var(--doux); }
.barre-user form { margin: 0; }
.bouton-menu { display: none; background: none; border: 1px solid var(--bord); border-radius: 8px; padding: 4px 10px; font-size: 1.1rem; cursor: pointer; }
main { padding: 24px 26px 60px; max-width: 1400px; width: 100%; }

/* --- Composants --- */
.carte { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 18px 20px; box-shadow: var(--ombre); margin-bottom: 18px; }
.grille { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpi { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 14px 16px; box-shadow: var(--ombre); position: relative; overflow: hidden; }
.kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--or); }
.kpi .libelle { font-size: .78rem; color: var(--doux); text-transform: uppercase; letter-spacing: .04em; }
.kpi .valeur { font-size: 1.45rem; font-weight: 650; color: var(--marine); margin-top: 2px; font-variant-numeric: tabular-nums; }
.kpi .detail { font-size: .8rem; color: var(--doux); margin-top: 2px; }
.kpi.fonds::before { background: var(--marine); }
.kpi.danger::before { background: var(--danger); }
.entete-page { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--bord); background: #fff; color: var(--marine); text-decoration: none; font-weight: 550; font-size: .9rem; cursor: pointer; font-family: inherit; }
.btn:hover { border-color: var(--marine-2); }
.btn-principal { background: var(--marine); color: #fff; border-color: var(--marine); }
.btn-principal:hover { background: var(--marine-2); }
.btn-or { background: var(--or); color: var(--marine); border-color: var(--or); }
.btn-danger { color: var(--danger); border-color: #E7C3BC; }
.btn-petit { padding: 4px 9px; font-size: .8rem; }
.lien { background: none; border: none; color: var(--marine-2); cursor: pointer; padding: 0; font: inherit; text-decoration: underline; }
table { width: 100%; border-collapse: collapse; font-size: .88rem; }
th { text-align: left; font-weight: 600; color: var(--marine); background: #F7F5EF; border-bottom: 2px solid var(--or); padding: 8px 10px; white-space: nowrap; }
td { padding: 7px 10px; border-bottom: 1px solid var(--bord); vertical-align: top; }
tr:hover td { background: #FBFCFD; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.total td { font-weight: 700; background: #F7F5EF; border-top: 2px solid var(--marine); }
.pos { color: var(--succes); }
.neg { color: var(--danger); }
.table-defile { overflow-x: auto; }
/* Registre : largeurs fixées par <colgroup>, texte des cellules et des pastilles autorisé à passer à la ligne */
table.registre { table-layout: fixed; }
table.registre td { overflow-wrap: anywhere; }
table.registre .badge { white-space: normal; text-align: center; }
.badge { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: .76rem; font-weight: 600; white-space: nowrap; }
.badge-succes { background: var(--succes-fond); color: var(--succes); }
.badge-alerte { background: var(--alerte-fond); color: var(--alerte); }
.badge-danger { background: var(--danger-fond); color: var(--danger); }
.badge-info { background: var(--info-fond); color: var(--info); }
.badge-neutre { background: #EDF0F4; color: var(--doux); }
.message { padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; border: 1px solid; }
.message-success { background: var(--succes-fond); border-color: #B9DCCB; color: var(--succes); }
.message-error { background: var(--danger-fond); border-color: #E7C3BC; color: var(--danger); }
.message-info, .message-warning { background: var(--info-fond); border-color: #BCD2EE; color: var(--info); }
/* Fenêtre de confirmation de l'application (remplace la boîte de dialogue du navigateur) */
.voile { position: fixed; inset: 0; background: rgba(19, 41, 75, .45); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 16px; }
.dialogue { max-width: 460px; width: 100%; margin: 0; border-top: 4px solid var(--or); }
.dialogue h3 { margin: 0 0 10px; color: var(--marine); }
.dialogue-texte { margin: 0 0 18px; font-size: .95rem; line-height: 1.5; }
.dialogue-actions { display: flex; justify-content: flex-end; gap: 10px; }
.encadre { border-left: 3px solid var(--or); background: var(--or-pale); padding: 10px 14px; border-radius: 0 8px 8px 0; margin: 10px 0; font-size: .9rem; }
.encadre.danger { border-color: var(--danger); background: var(--danger-fond); }
.encadre.succes { border-color: var(--succes); background: var(--succes-fond); }
.vide { text-align: center; color: var(--doux); padding: 26px; }
dl.infos { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; }
dl.infos dt { color: var(--doux); }
dl.infos dd { margin: 0; font-weight: 500; }

/* --- Formulaires --- */
form.formulaire { max-width: 860px; }
.champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; }
.champ { display: flex; flex-direction: column; gap: 4px; }
.champ.large { grid-column: 1 / -1; }
.champ label { font-size: .84rem; font-weight: 600; color: var(--marine); }
.champ .aide { font-size: .77rem; color: var(--doux); }
.champ .erreur { font-size: .8rem; color: var(--danger); }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], input:not([type]), select, textarea {
  font: inherit; padding: 8px 10px; border: 1px solid #CBD2DD; border-radius: 8px; background: #fff; color: var(--texte); width: 100%; }
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(201,162,74,.5); border-color: var(--or); }
input.montant { text-align: right; font-variant-numeric: tabular-nums; }
.case { flex-direction: row; align-items: center; gap: 8px; }
.case input { width: auto; }
.filtres { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.filtres select, .filtres input { width: auto; min-width: 130px; padding: 6px 9px; }
.pied-form { margin-top: 18px; display: flex; gap: 10px; }
.erreurs-form { color: var(--danger); margin-bottom: 10px; }

/* --- Graphiques SVG --- */
.graphique { width: 100%; height: auto; }
.graphique .grille { stroke: #E9ECF1; stroke-width: 1; }
.graphique .axe { font-size: 10px; fill: var(--doux); }
.graphique .legende { font-size: 11px; fill: var(--texte); }

/* --- Contrôles du rapprochement --- */
ul.controles { list-style: none; padding: 0; margin: 0; }
ul.controles li { padding: 7px 0; border-bottom: 1px solid var(--bord); display: flex; gap: 10px; }
ul.controles li .ok { color: var(--succes); font-weight: 700; }
ul.controles li .ko { color: var(--danger); font-weight: 700; }
#total-repartition.ok { color: var(--succes); font-weight: 700; }
#total-repartition.ko { color: var(--danger); font-weight: 700; }
.constat { border-left: 4px solid var(--info); padding: 10px 14px; background: #fff; border-radius: 0 8px 8px 0; margin-bottom: 10px; border: 1px solid var(--bord); border-left-width: 4px; }
.constat.critique { border-left-color: var(--danger); }
.constat.attention { border-left-color: var(--or); }
.constat h4 { margin: 0 0 3px; color: var(--marine); font-size: .95rem; }
.constat p { margin: 0 0 4px; font-size: .88rem; }
.constat ul { margin: 4px 0; padding-left: 18px; font-size: .83rem; color: var(--doux); }

/* --- Contrats --- */
.document-apercu { max-width: 860px; margin: 0 auto; border: 1px solid var(--bord); border-radius: 8px; padding: 22px 28px; background: #fff; }
.document-apercu h3 { border-bottom: 1px solid var(--or); padding-bottom: 3px; }
.document-apercu p { margin: 4px 0; }
table.fiche th { background: none; border-bottom: 1px solid var(--bord); width: 34%; font-weight: 600; }
ol.etapes-parcours { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0 0 16px; flex-wrap: wrap; counter-reset: e; }
ol.etapes-parcours li { counter-increment: e; flex: 1; min-width: 160px; background: #fff; border: 1px solid var(--bord); border-radius: 8px; padding: 8px 12px; font-size: .86rem; color: var(--doux); }
ol.etapes-parcours li::before { content: counter(e) ". "; font-weight: 700; }
ol.etapes-parcours li.fait { border-color: var(--succes); color: var(--succes); background: var(--succes-fond); }
button[disabled] { opacity: .45; cursor: not-allowed; }

/* --- Connexion --- */
.page-connexion { min-height: 100vh; display: grid; place-items: center; background: radial-gradient(circle at 20% 10%, #1C3763 0%, var(--marine-3) 70%); padding: 20px; }
.boite-connexion { width: 100%; max-width: 380px; background: #fff; border-radius: 14px; padding: 28px; box-shadow: 0 20px 60px rgba(0,0,0,.35); border-top: 4px solid var(--or); }
.boite-connexion .logo { background: var(--marine); border-radius: 10px; padding: 14px; text-align: center; margin-bottom: 18px; }
.boite-connexion .logo img { width: 130px; }

/* --- Tablette et mobile --- */
@media (max-width: 1100px) { .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1024px) {
  .menu { position: fixed; left: -260px; z-index: 20; transition: left .2s; box-shadow: 4px 0 20px rgba(0,0,0,.25); }
  .menu.ouvert { left: 0; }
  .bouton-menu { display: inline-block; }
  main { padding: 18px 16px 50px; }
  .barre { padding: 10px 16px; }
  .barre-user span { display: none; }
}
@media (max-width: 760px) { .g2, .g3, .g4, .champs { grid-template-columns: 1fr; } }
@media print {
  .menu, .barre, .actions, .filtres, form, .btn { display: none !important; }
  main { padding: 0; }
  .carte { box-shadow: none; border: none; }
}

/* Signature électronique */
.signature-cadre{position:relative;border:1.5px dashed #9aa4b2;border-radius:8px;background:#fff}
.signature-cadre canvas{display:block;width:100%;height:200px;touch-action:none;cursor:crosshair;border-radius:8px}
.signature-cadre .ligne{position:absolute;left:8%;right:8%;bottom:34px;border-top:1px solid #cfd5de;pointer-events:none}
.signature-cadre .consigne{position:absolute;left:0;right:0;bottom:8px;text-align:center;color:#9aa4b2;font-size:.85rem;pointer-events:none}
.page-signature{max-width:860px;margin:0 auto;padding:18px}
.page-signature .document-apercu{max-height:48vh;overflow:auto;border:1px solid #e3e7ee;border-radius:8px;padding:14px 18px;background:#fff}