:root{
  --orange:#FF7A00;--orange-d:#E06A00;
  --orange-a11y:#B85400;--orange-a11y-d:#943D00; /* variantes accessibles (texte/boutons pleins ≥ 4.5:1) */
  --navy:#0D1B2A;--navy-2:#16283D;--navy-3:#1F3450;
  --bg:#F2F4F7;--card:#FFFFFF;--line:#E3E6EC;
  --t:#0D1B2A;--tm:#5F6773;--tmd:#6E7684;
  --ok:#16A34A;--warn:#D97706;--err:#DC2626;--inf:#2563EB;
  --ff:'Poppins',system-ui,-apple-system,sans-serif;--rad:14px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--ff);background:var(--bg);color:var(--t);line-height:1.6;font-size:15px;overflow-x:hidden}
a{color:var(--orange-a11y);text-decoration:none}a:hover{color:var(--orange-a11y-d);text-decoration:underline}
img{max-width:100%;display:block}
code{font-family:ui-monospace,Menlo,Consolas,monospace;background:var(--bg);border:1px solid var(--line);padding:1px 6px;border-radius:5px;font-size:.9em;color:var(--navy)}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.center{max-width:460px;margin:8vh auto;padding:0 20px;position:relative;z-index:1}
/* Accessibilité : anneau de focus visible et cohérent au clavier (contraste ≥ 3:1) */
:focus-visible{outline:2.5px solid var(--orange-a11y);outline-offset:2px;border-radius:6px}
/* Icônes de marque (remplacent les emojis) */
.ico{vertical-align:-3px;flex-shrink:0}
/* Fond de marque doux pour les pages de connexion (sans vidéo, juste des dégradés) */
.auth-bg{min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden;
  background:
    radial-gradient(900px 480px at 12% -8%, rgba(255,122,0,.12), transparent 60%),
    radial-gradient(760px 460px at 108% 8%, rgba(13,27,42,.10), transparent 55%),
    var(--bg);
}
.auth-bg .wrap{width:100%}
.auth-bg .center{margin:0 auto;width:100%}
h1{font-size:26px;font-weight:800;letter-spacing:-.02em;color:var(--navy)}h2{font-size:20px;font-weight:800;color:var(--navy)}h3{font-size:17px;font-weight:700;color:var(--navy)}
.muted{color:var(--tm)}.small{font-size:13px}
/* Topbar */
.top{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;justify-content:space-between;min-height:62px;max-width:1080px;margin:0 auto;padding:10px 20px;flex-wrap:wrap;gap:10px 16px}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;font-size:18px;color:var(--navy)}
.brand img{width:34px;height:34px;border-radius:8px}
.top-right{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:8px 14px;font-size:14px}
/* Cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--rad);padding:22px;box-shadow:0 4px 16px rgba(13,27,42,.06);transition:box-shadow .2s,border-color .2s}
.card+.card{margin-top:16px}
.logo-c{text-align:center;margin-bottom:18px}.logo-c img{width:64px;display:inline-block;border-radius:12px}
/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--ff);font-weight:700;font-size:15px;border:none;border-radius:30px;padding:12px 22px;cursor:pointer;transition:all .18s}
.btn-p{background:var(--orange-a11y);color:#fff;box-shadow:0 3px 10px rgba(184,84,0,.32)}.btn-p:hover{background:var(--orange-a11y-d);text-decoration:none;transform:translateY(-1px);box-shadow:0 6px 16px rgba(184,84,0,.4)}
.btn-ok{background:var(--ok);color:#fff}.btn-ok:hover{background:#128a3e;transform:translateY(-1px)}
.btn-err{background:var(--err);color:#fff}.btn-err:hover{background:#b91c1c;transform:translateY(-1px)}
.btn-o{background:transparent;color:var(--navy);border:1.5px solid var(--line)}.btn-o:hover{border-color:var(--orange);color:var(--orange-a11y-d);text-decoration:none;background:rgba(255,122,0,.05)}
.btn-block{width:100%}.btn-sm{padding:8px 15px;font-size:13px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn:active{transform:translateY(0)}
/* Forms */
.field{margin-bottom:14px}
label{display:block;font-size:13px;font-weight:700;color:var(--tm);margin-bottom:6px}
input,textarea,select{width:100%;padding:12px 14px;background:var(--bg);border:1.5px solid var(--line);border-radius:10px;color:var(--t);font-size:15px;font-family:var(--ff)}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,122,0,.14)}
textarea{resize:vertical;min-height:80px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
/* Flash */
.flash{padding:12px 16px;border-radius:10px;margin-bottom:14px;font-size:14px;border:1px solid}
.flash-ok{background:rgba(22,163,74,.08);border-color:rgba(22,163,74,.35);color:#15803D}
.flash-err{background:rgba(220,38,38,.08);border-color:rgba(220,38,38,.3);color:#B91C1C}
.flash-info{background:rgba(37,99,235,.08);border-color:rgba(37,99,235,.3);color:#1D4ED8}
.flash-warn{background:rgba(217,119,6,.1);border-color:rgba(217,119,6,.35);color:#8A4B0A}
/* Badges */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 11px;border-radius:20px;font-size:12px;font-weight:700}
.b-ok{background:rgba(22,163,74,.12);color:#15803D}.b-warn{background:rgba(217,119,6,.14);color:#B45309}
.b-err{background:rgba(220,38,38,.12);color:#B91C1C}.b-info{background:rgba(37,99,235,.12);color:#1D4ED8}.b-mu{background:rgba(13,27,42,.06);color:var(--tm)}
/* Table / list */
.doc-list{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.doc{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:var(--rad);padding:16px 18px;flex-wrap:wrap;transition:border-color .2s,box-shadow .2s,transform .2s}
.doc:hover{border-color:var(--orange);box-shadow:0 8px 20px rgba(13,27,42,.08);transform:translateY(-1px)}
.doc .meta{font-size:13px;color:var(--tm)}
.doc .t{font-weight:700;font-size:16px;color:var(--navy)}
.tag{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:2px 8px;border-radius:6px;background:rgba(255,122,0,.14);color:#A64B00}
.tag.bl{background:rgba(13,27,42,.08);color:var(--navy)}
/* État vide (listes) */
.empty-state{display:flex;flex-direction:column;align-items:center;gap:10px;padding:44px 20px;color:var(--tmd);text-align:center}
.empty-state svg{color:var(--tmd);opacity:.65}
.empty-state p{max-width:320px;line-height:1.6;font-size:14px}
/* Document viewer */
.viewer{display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start;margin-top:18px}
.pdf-pane{background:#E4E7EC;border:1px solid var(--line);border-radius:var(--rad);padding:12px;max-height:80vh;overflow:auto}
.pdf-pane canvas{width:100%;margin:0 auto 12px;display:block;border-radius:6px;box-shadow:0 6px 18px rgba(13,27,42,.18)}
/* Annotations épinglées sur le PDF */
.pg-wrap{position:relative;margin-bottom:12px}
.pin-layer{position:absolute;inset:0;pointer-events:none}
.pin-marker{position:absolute;transform:translate(-50%,-100%);pointer-events:auto;min-width:22px;height:22px;padding:0 5px;border-radius:50% 50% 50% 0;background:var(--orange-a11y);color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(13,27,42,.35);cursor:pointer;border:2px solid #fff}
.pin-marker.admin{background:var(--navy)}
.pin-marker.pin-pending{background:var(--warn);color:#fff;animation:pin-pulse 1s infinite}
@keyframes pin-pulse{0%,100%{opacity:1}50%{opacity:.5}}
.pdf-pane.pin-active .pg-wrap{cursor:crosshair}
.pdf-pane.pin-active canvas{outline:2px dashed var(--orange);outline-offset:-2px}
.pin-toolbar{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.pin-hint{background:rgba(255,122,0,.08);border:1px dashed var(--orange);border-radius:8px;padding:8px 12px;font-size:13px;color:var(--tm);margin-bottom:10px}
.side{position:sticky;top:78px}
.sign-pad-wrap{background:#fff;border-radius:10px;overflow:hidden;border:2px solid var(--line)}
.sign-pad-wrap canvas{width:100%;height:170px;display:block;touch-action:none}
.comments{display:flex;flex-direction:column;gap:10px;max-height:300px;overflow:auto;margin:10px 0}
.cmt{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:14px}
.cmt .who{font-size:12px;color:var(--tmd);margin-bottom:3px}
.cmt.admin{border-left:3px solid var(--navy)}
.hr{border:none;border-top:1px solid var(--line);margin:16px 0}
.kv{font-size:13px;color:var(--tm);line-height:1.8}.kv b{color:var(--navy)}
.empty{text-align:center;color:var(--tm);padding:40px 10px}
.pin-toolbar .btn,#btnPin{position:relative}
/* Onglets mobile pour le viewer document (évite le scroll interminable PDF + panneau) */
.viewer-tabs{display:none}
@media(max-width:820px){
  .viewer{grid-template-columns:1fr}.side{position:static}.row{grid-template-columns:1fr}
  .viewer-tabs{display:flex;gap:8px;margin:14px 0 2px}
  .viewer-tabs button{flex:1;padding:11px;border:1.5px solid var(--line);background:var(--card);border-radius:10px;font-family:var(--ff);font-weight:700;font-size:13.5px;color:var(--tm);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:all .18s}
  .viewer-tabs button.active{background:var(--navy);color:#fff;border-color:var(--navy)}
  .side{display:none}
  .viewer.tab-side .side{display:block}
  .viewer.tab-side .pdf-pane{display:none}
}
/* Print (certificat) */
@media print{body{background:#fff;color:#000}.no-print{display:none!important}.card{box-shadow:none;border-color:#ccc;background:#fff}}
/* Crédit pied de page */
.app-credit{text-align:center;color:var(--tmd);font-size:12px;line-height:1.6;padding:26px 16px;border-top:1px solid var(--line);margin-top:34px}
.app-credit b{color:var(--tm)}
/* Manuel d'utilisation */
.guide{max-width:840px;margin:0 auto}
.guide .lead{color:var(--tm);font-size:16px;margin:6px 0 18px}
.guide h2{margin:26px 0 10px;color:var(--orange-d);font-size:19px}
.guide ol,.guide ul{margin:8px 0 10px 22px}.guide li{margin-bottom:7px}
.guide .step{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-bottom:12px}
.guide .step .n{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--orange-a11y);color:#fff;font-weight:800;font-size:14px;margin-right:8px}
.guide .step b{color:var(--navy)}
.guide .tip{display:flex;gap:9px;align-items:flex-start;background:rgba(255,122,0,.08);border-left:3px solid var(--orange);border-radius:8px;padding:12px 14px;margin:12px 0;font-size:14px;color:var(--tm)}
.guide .tip svg{color:var(--orange-d);margin-top:2px}
.guide .warn{display:flex;gap:9px;align-items:flex-start;background:rgba(217,119,6,.1);border-left:3px solid var(--warn);border-radius:8px;padding:12px 14px;margin:12px 0;font-size:14px;color:#8A4B0A}
.guide .warn svg{color:var(--warn);margin-top:2px}
.guide .step b{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
/* Bannière de marque (image statique) */
.brand-banner{width:100%;border-radius:var(--rad);margin:16px 0 22px;box-shadow:0 6px 24px rgba(13,27,42,.10);display:block}

/* Barre secondaire : liens retour vers les sites Nsayi (sa propre ligne, jamais collée à la nav principale) */
.sub-top{background:var(--navy)}
.sub-top-in{display:flex;justify-content:flex-end;padding:9px 20px}
.site-links{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
/* Fonds pleins par plateforme : lisibles sur n'importe quel arrière-plan (barre navy ou page claire) */
.site-link{display:inline-flex;align-items:center;font-size:12.5px;font-weight:700;color:#fff;border:1.5px solid rgba(255,255,255,.16);border-radius:20px;padding:7px 15px;transition:all .18s;white-space:nowrap}
.site-link:hover{text-decoration:none;transform:translateY(-1px)}
.site-link.sl-dark{background:#10192B;box-shadow:0 3px 10px rgba(0,0,0,.28)}
.site-link.sl-dark:hover{background:#000000}
.site-link.sl-blue{background:var(--inf);box-shadow:0 3px 10px rgba(37,99,235,.35)}
.site-link.sl-blue:hover{background:#1D4ED8}
@media(max-width:680px){.sub-top-in{justify-content:center;padding:8px 16px}.site-link{padding:6px 12px;font-size:11.5px}}