:root{
    --emeraude:#059669; --emeraude-fonce:#047857; --or:#D4AF37;
    --blanc-casse:#FAFAFA; --texte:#1a2620; --gris:#6b7772; --bordure:#e2e8e4;
    --amber:#b7791f; --amber-bg:#fef6e0; --vert-bg:#e6f5ee; --rouge:#c0392b; --rouge-bg:#fdecea;
    --radius:12px; --ombre:0 2px 12px rgba(0,0,0,.07);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{background:var(--blanc-casse);color:var(--texte);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-size:15px;line-height:1.5}
  .cache{display:none!important}
  button{font-family:inherit;cursor:pointer}
  a{color:var(--emeraude-fonce)}

  /* En-tête */
  header{background:var(--emeraude);color:#fff;border-bottom:4px solid var(--or)}
  header .barre{max-width:1080px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;gap:12px}
  header h1{font-size:1.15rem;font-weight:700}
  header .spacer{flex:1}
  header .qui{font-size:.85rem;opacity:.9}
  .btn-logout{background:rgba(255,255,255,.16);color:#fff;border:none;padding:8px 14px;border-radius:9px;font-weight:600}

  main{max-width:1080px;margin:0 auto;padding:22px 20px 60px}

  /* Login */
  .login-wrap{max-width:400px;margin:8vh auto 0;background:#fff;border:1px solid var(--bordure);
    border-radius:16px;box-shadow:var(--ombre);padding:30px 26px}
  .login-wrap .logo{text-align:center;margin-bottom:20px}
  .login-wrap .logo .rond{width:60px;height:60px;border-radius:16px;background:var(--emeraude);
    color:#fff;display:flex;align-items:center;justify-content:center;font-size:28px;margin:0 auto 10px}
  .login-wrap h2{text-align:center;font-size:1.2rem;margin-bottom:4px}
  .login-wrap p.sous{text-align:center;color:var(--gris);font-size:.88rem;margin-bottom:20px}
  label{display:block;font-weight:600;font-size:.9rem;margin:12px 0 5px}
  input[type=email],input[type=password],input[type=text],textarea{width:100%;padding:12px;font-size:15px;
    border:1.5px solid var(--bordure);border-radius:10px;background:#fff;outline:none}
  input:focus,textarea:focus{border-color:var(--emeraude);box-shadow:0 0 0 3px rgba(5,150,105,.13)}
  .btn-primaire{width:100%;background:var(--emeraude);color:#fff;border:none;padding:14px;border-radius:10px;
    font-weight:700;font-size:15px;margin-top:18px}
  .btn-primaire:disabled{opacity:.6}
  .msg-err{background:var(--rouge-bg);color:var(--rouge);border:1px solid #f5c6c2;border-radius:10px;
    padding:10px 12px;font-size:.88rem;margin-top:14px;display:none}
  .msg-err.on{display:block}

  /* Onglets principaux */
  .onglets{display:flex;gap:6px;margin-bottom:18px;border-bottom:2px solid var(--bordure)}
  .onglet{background:none;border:none;padding:12px 18px;font-weight:700;font-size:15px;
    color:var(--gris);border-bottom:3px solid transparent;margin-bottom:-2px}
  .onglet.on{color:var(--emeraude-fonce);border-bottom-color:var(--emeraude)}

  /* Bibliothèque */
  .doc-ligne{background:#fff;border:1px solid var(--bordure);border-radius:var(--radius);
    box-shadow:var(--ombre);padding:14px;display:flex;gap:13px;align-items:center;margin-bottom:12px}
  .doc-ic{width:44px;height:44px;border-radius:10px;background:#FBF3D9;border:1px solid #E8D9A0;
    display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
  .doc-info{flex:1;min-width:0}
  .doc-titre{font-weight:700}
  .doc-meta{color:var(--gris);font-size:.85rem;margin-top:2px}
  .doc-actions{display:flex;gap:8px;flex-shrink:0}
  .mini{padding:8px 12px;border-radius:9px;font-weight:700;font-size:.82rem;border:1.5px solid var(--bordure);background:#fff}
  .mini.suppr{color:var(--rouge);border-color:var(--rouge)}
  .form-doc{background:#fff;border:1px solid var(--bordure);border-radius:var(--radius);
    padding:18px;margin-bottom:18px;box-shadow:var(--ombre)}
  .form-doc label{margin:10px 0 4px}
  .form-doc .rangee{display:flex;gap:10px;margin-top:14px}
  .form-doc .rangee button{flex:1;padding:12px;border-radius:9px;font-weight:700;border:none}

  /* Filtres */
  .filtres{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
  .filtre{padding:9px 16px;border:1.5px solid var(--bordure);background:#fff;border-radius:99px;
    font-weight:600;font-size:.9rem;color:var(--gris)}
  .filtre.on{background:var(--emeraude);border-color:var(--emeraude);color:#fff}
  .filtre .n{opacity:.8;font-weight:700;margin-left:4px}

  /* Liste (cartes) */
  .grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
  .carte{background:#fff;border:1px solid var(--bordure);border-radius:var(--radius);box-shadow:var(--ombre);
    padding:14px;display:flex;gap:13px;align-items:flex-start;cursor:pointer;transition:.12s}
  .carte:hover{border-color:var(--emeraude);transform:translateY(-1px)}
  .avatar{width:56px;height:56px;border-radius:50%;flex-shrink:0;background:#eef5f1 center/cover no-repeat;
    display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--emeraude);border:2px solid var(--bordure)}
  .carte .info{min-width:0;flex:1}
  .carte .nom{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .carte .lieu{color:var(--gris);font-size:.85rem;margin:1px 0 6px}
  .mats{display:flex;flex-wrap:wrap;gap:5px}
  .mat{background:#eef5f1;color:var(--emeraude-fonce);border-radius:99px;padding:2px 9px;font-size:.76rem;white-space:nowrap}
  .badge{display:inline-block;padding:3px 10px;border-radius:99px;font-size:.74rem;font-weight:700;margin-top:8px}
  .badge.pending{background:var(--amber-bg);color:var(--amber)}
  .badge.approved{background:var(--vert-bg);color:var(--emeraude-fonce)}
  .badge.rejected{background:var(--rouge-bg);color:var(--rouge)}
  .badge.disabled{background:#eceff1;color:#607d8b}
  .vide{text-align:center;color:var(--gris);padding:50px 10px}

  /* Détail (overlay) */
  .overlay{position:fixed;inset:0;background:rgba(20,30,25,.55);display:flex;align-items:flex-start;
    justify-content:center;padding:24px;overflow:auto;z-index:50}
  .modal{background:#fff;border-radius:16px;max-width:600px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.3);overflow:hidden}
  .modal .haut{background:var(--emeraude);color:#fff;padding:18px 20px;display:flex;gap:14px;align-items:center}
  .modal .haut .avatar{width:66px;height:66px;font-size:26px;border-color:rgba(255,255,255,.5)}
  .modal .haut h2{font-size:1.2rem}
  .modal .haut .lieu{opacity:.9;font-size:.88rem}
  .modal .corps{padding:20px}
  .ligne-info{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--bordure)}
  .ligne-info .k{color:var(--gris);font-size:.88rem}
  .ligne-info .v{font-weight:600;text-align:right}
  .section-titre{font-weight:700;font-size:.92rem;margin:18px 0 8px}
  .docs{display:flex;flex-wrap:wrap;gap:10px}
  .doc{display:flex;align-items:center;gap:8px;border:1px solid var(--bordure);border-radius:10px;
    padding:8px 11px;text-decoration:none;color:var(--texte);font-size:.85rem}
  .doc img{width:44px;height:44px;object-fit:cover;border-radius:7px}
  .doc .pdf{width:44px;height:44px;border-radius:7px;background:#eef5f1;display:flex;align-items:center;justify-content:center;font-size:20px}
  [data-zoom]{cursor:zoom-in}
  .lightbox{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:9999;display:flex;
    align-items:center;justify-content:center;padding:24px;cursor:zoom-out}
  .lightbox img{max-width:100%;max-height:100%;border-radius:8px;box-shadow:0 10px 40px rgba(0,0,0,.5)}
  .lightbox .fermer-zoom{position:absolute;top:16px;right:20px;background:none;border:none;
    color:#fff;font-size:34px;line-height:1;opacity:.9;cursor:pointer}
  .actions{display:flex;gap:10px;margin-top:22px}
  .btn-approuver{flex:1;background:var(--emeraude);color:#fff;border:none;padding:14px;border-radius:10px;font-weight:700;font-size:15px}
  .btn-rejeter{flex:1;background:#fff;color:var(--rouge);border:1.5px solid var(--rouge);padding:14px;border-radius:10px;font-weight:700;font-size:15px}
  .btn-fermer{background:none;border:none;color:#fff;font-size:26px;line-height:1;margin-left:auto;padding:0 4px;opacity:.9}
  .actions-util{display:flex;gap:10px;margin-top:14px}
  .btn-neutre{flex:1;background:#fff;color:var(--texte);border:1.5px solid var(--bordure);padding:12px;border-radius:10px;font-weight:700;font-size:14px}
  .btn-wa{flex:1;background:#25D366;color:#fff;border:none;padding:12px;border-radius:10px;font-weight:700;font-size:14px}
  .edit-box{margin-top:16px;border:1.5px solid var(--bordure);border-radius:10px;padding:14px;background:#fafafa}
  .edit-box label{display:block;font-size:.82rem;font-weight:600;margin:10px 0 4px}
  .edit-box .rangee{display:flex;gap:10px}
  .edit-box .rangee button{flex:1;padding:11px;border-radius:9px;font-weight:700;border:none}
  .rejet-box{margin-top:16px;border:1.5px solid var(--rouge);border-radius:10px;padding:14px;background:var(--rouge-bg)}
  .rejet-box textarea{min-height:70px;margin-bottom:10px}
  .rejet-box .rangee{display:flex;gap:10px}
  .rejet-box .rangee button{flex:1;padding:11px;border-radius:9px;font-weight:700;border:none}
  .rejet-annuler{background:#fff;border:1.5px solid var(--bordure)!important}
  .rejet-conf{background:var(--rouge);color:#fff}
  .motif-actuel{background:var(--rouge-bg);color:var(--rouge);border-radius:10px;padding:10px 12px;font-size:.85rem;margin-top:8px}
  .spinner{display:inline-block;width:16px;height:16px;border:2.5px solid rgba(255,255,255,.4);
    border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;vertical-align:-3px;margin-right:7px}
  @keyframes spin{to{transform:rotate(360deg)}}