/* ═══════════════════════════════════════════════════════════════
   membres.css — Thème portail interne Nymavo
   Marine foncé (#0d1b2a) + vert Nymavo (#1a5c38)
   DISTINCT du thème client (vert + blanc)
   ═══════════════════════════════════════════════════════════════ */

:root {
  --marine:      #0d1b2a;
  --marine-l:    #162535;
  --marine-m:    #1e3245;
  --vert:        #1a5c38;
  --vert-l:      #e8f4ed;
  --vert-m:      #2d7a4f;
  --blanc:       #ffffff;
  --gris-l:      #f8f9fa;
  --gris-m:      #dee2e6;
  --gris-t:      #495057;
  --rouge:       #c0392b;
  --rouge-l:     #fdf0ee;
  --radius:      8px;
  --ombre:       0 2px 8px rgba(0,0,0,.12);
  --ombre-m:     0 4px 16px rgba(0,0,0,.18);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 14px;
  background: var(--gris-l);
  color: #1a1a1a;
  line-height: 1.6;
}

/* ── Connexion ─────────────────────────────────────────── */
.login-body {
  min-height: 100vh;
  background: var(--marine);
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-container {
  background: var(--blanc);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
  padding: 40px 48px;
  width: 420px;
  max-width: 95vw;
}

.login-logo { text-align: center; margin-bottom: 24px; }
.login-logo-text {
  font-size: 28px; font-weight: 900;
  color: var(--marine); letter-spacing: 3px;
}
.login-logo-sub {
  font-size: 12px; color: var(--vert); font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase; margin-top: 4px;
}

.login-securite {
  background: #fff8f0; border: 1px solid #ffd080;
  border-radius: 6px; padding: 10px 14px;
  font-size: 12px; color: #7a5000; text-align: center;
  margin-bottom: 20px; line-height: 1.5;
}

.login-erreur {
  background: var(--rouge-l); border: 1px solid var(--rouge);
  border-radius: 6px; padding: 10px 14px;
  color: var(--rouge); font-size: 13px; margin-bottom: 16px;
}

.login-form { display: flex; flex-direction: column; gap: 16px; }

.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-group label { font-size: 13px; font-weight: 600; color: var(--gris-t); }
.form-group input {
  border: 1px solid var(--gris-m); border-radius: 6px;
  padding: 10px 14px; font-size: 14px;
  transition: border-color .15s;
}
.form-group input:focus {
  outline: none; border-color: var(--vert);
  box-shadow: 0 0 0 3px rgba(26,92,56,.12);
}
.form-hint { font-size: 11px; color: #888; margin-top: 2px; }

.btn-login {
  background: var(--vert); color: var(--blanc);
  border: none; border-radius: 6px;
  padding: 12px 24px; font-size: 15px; font-weight: 700;
  cursor: pointer; transition: background .15s;
  margin-top: 8px;
}
.btn-login:hover { background: var(--vert-m); }

.login-retour {
  display: block; text-align: center; margin-top: 8px;
  color: var(--vert); font-size: 13px;
}
.login-footer {
  margin-top: 24px; font-size: 12px; color: #888;
  text-align: center; border-top: 1px solid var(--gris-m); padding-top: 16px;
}
.login-footer a { color: var(--vert); }

/* ── Navigation interne ────────────────────────────────── */
.nav-interne {
  background: var(--marine);
  color: var(--blanc);
  position: sticky; top: 0; z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}

.nav-interne-inner {
  max-width: 1400px; margin: 0 auto;
  display: flex; align-items: center; gap: 16px;
  padding: 0 20px; height: 56px;
}

.nav-logo-interne {
  display: flex; flex-direction: column;
  text-decoration: none; flex-shrink: 0;
}
.logo-nymavo {
  font-size: 15px; font-weight: 900; color: var(--blanc);
  letter-spacing: 2px;
}
.logo-portail { font-size: 9px; color: rgba(255,255,255,.6); letter-spacing: .5px; }

.nav-links-interne {
  display: flex; gap: 4px; flex: 1; align-items: center;
}
.nav-links-interne a {
  color: rgba(255,255,255,.8); text-decoration: none;
  padding: 6px 12px; border-radius: 6px; font-size: 13px;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.nav-links-interne a:hover, .nav-links-interne a.active {
  background: rgba(255,255,255,.12); color: var(--blanc);
}

/* Menu admin dropdown */
.nav-admin-menu { position: relative; }
.nav-admin-toggle {
  color: #ffd080; cursor: pointer;
  padding: 6px 12px; border-radius: 6px; font-size: 13px;
  display: block; white-space: nowrap;
}
.nav-admin-dropdown {
  display: none; position: absolute; top: 100%; left: 0;
  background: var(--marine-m); border-radius: 8px;
  box-shadow: var(--ombre-m); padding: 6px;
  min-width: 180px; z-index: 200;
}
.nav-admin-menu:hover .nav-admin-dropdown { display: block; }
.nav-admin-dropdown a {
  display: block; color: var(--blanc); text-decoration: none;
  padding: 8px 14px; border-radius: 6px; font-size: 13px;
}
.nav-admin-dropdown a:hover { background: rgba(255,255,255,.1); }

.nav-right-interne {
  display: flex; align-items: center; gap: 12px; flex-shrink: 0;
}

.nav-search {
  display: flex; gap: 4px;
}
.nav-search input {
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  border-radius: 6px; padding: 5px 12px; color: var(--blanc);
  font-size: 13px; width: 160px;
}
.nav-search input::placeholder { color: rgba(255,255,255,.5); }
.nav-search button {
  background: rgba(255,255,255,.15); border: none;
  border-radius: 6px; padding: 5px 10px; cursor: pointer;
  color: var(--blanc);
}

.nav-user { text-align: right; }
.nav-user-name { display: block; font-size: 13px; font-weight: 600; color: var(--blanc); }
.nav-user-profil { font-size: 11px; color: rgba(255,255,255,.6); }

.btn-deconnexion {
  background: rgba(255,255,255,.1); color: rgba(255,255,255,.8);
  text-decoration: none; padding: 6px 14px; border-radius: 6px;
  font-size: 12px; white-space: nowrap;
  transition: background .15s;
}
.btn-deconnexion:hover { background: var(--rouge); color: var(--blanc); }

/* Bannière sécurité */
.banniere-confidentielle {
  background: #7a2d00; color: #ffd080;
  text-align: center; font-size: 11px; font-weight: 600;
  padding: 4px 0; letter-spacing: .3px;
}

/* ── Contenu principal ─────────────────────────────────── */
.main-interne {
  max-width: 1400px; margin: 0 auto;
  padding: 28px 20px;
}

/* ── Dashboard ─────────────────────────────────────────── */
.dashboard-header { margin-bottom: 28px; }
.dashboard-header h1 { font-size: 22px; color: var(--marine); }
.dashboard-header p { color: #666; margin-top: 4px; }

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}

.cat-card {
  background: var(--blanc); border-radius: var(--radius);
  box-shadow: var(--ombre); overflow: hidden;
  text-decoration: none; color: inherit;
  transition: box-shadow .2s, transform .15s;
  border-left: 4px solid var(--vert);
}
.cat-card:hover { box-shadow: var(--ombre-m); transform: translateY(-2px); }
.cat-card.confidentielle { border-left-color: var(--rouge); }

.cat-card-header {
  background: var(--marine); color: var(--blanc);
  padding: 16px 20px;
}
.cat-card-header.confidentielle { background: #3d0a0a; }
.cat-icon { font-size: 24px; margin-bottom: 6px; }
.cat-titre { font-size: 15px; font-weight: 700; }
.cat-desc { font-size: 11px; opacity: .8; margin-top: 3px; }

.cat-card-body { padding: 14px 20px; }
.cat-nb-docs { font-size: 12px; color: #888; }

.badge-conf {
  display: inline-block; background: var(--rouge-l);
  color: var(--rouge); border: 1px solid var(--rouge);
  font-size: 10px; font-weight: 700;
  padding: 2px 8px; border-radius: 20px; margin-top: 6px;
}

/* ── Liste de documents ────────────────────────────────── */
.docs-header { margin-bottom: 20px; }
.docs-header h1 { font-size: 20px; color: var(--marine); }

.sous-dossier { margin-bottom: 28px; }
.sous-dossier h2 {
  font-size: 14px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: #888; margin-bottom: 12px;
  padding-bottom: 8px; border-bottom: 1px solid var(--gris-m);
}

.docs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.doc-card {
  background: var(--blanc); border-radius: 6px;
  box-shadow: var(--ombre); padding: 14px 18px;
  text-decoration: none; color: inherit;
  transition: box-shadow .15s; display: block;
  border-left: 3px solid var(--vert);
}
.doc-card:hover { box-shadow: var(--ombre-m); }
.doc-card.confidentiel { border-left-color: var(--rouge); }
.doc-titre { font-size: 13px; font-weight: 700; color: var(--marine); }
.doc-resume { font-size: 12px; color: #666; margin-top: 4px; }
.doc-version { font-size: 11px; color: #aaa; margin-top: 6px; }

/* ── Vue document ──────────────────────────────────────── */
.doc-view-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 24px; flex-wrap: wrap; gap: 16px;
}
.doc-view-titre { font-size: 22px; color: var(--marine); }
.doc-view-meta { font-size: 12px; color: #888; margin-top: 4px; }

.btn-pdf {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--rouge); color: var(--blanc);
  text-decoration: none; padding: 10px 20px;
  border-radius: 6px; font-size: 13px; font-weight: 700;
  transition: background .15s; white-space: nowrap;
}
.btn-pdf:hover { background: #a93226; }

.doc-contenu {
  background: var(--blanc); border-radius: var(--radius);
  box-shadow: var(--ombre); padding: 32px 40px;
  max-width: 840px;
}

/* Rendu Markdown */
.doc-contenu h1 { font-size: 22px; color: var(--vert); border-bottom: 1px solid #c8e6d0; padding-bottom: 8px; margin-bottom: 16px; }
.doc-contenu h2 { font-size: 17px; color: var(--marine); margin-top: 28px; }
.doc-contenu h3 { font-size: 14px; color: var(--marine); margin-top: 20px; }
.doc-contenu p { margin-bottom: 10px; }
.doc-contenu ul, .doc-contenu ol { margin: 8px 0 12px 24px; }
.doc-contenu li { margin-bottom: 4px; }
.doc-contenu table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 13px; }
.doc-contenu th { background: var(--marine); color: var(--blanc); padding: 8px 12px; text-align: left; }
.doc-contenu td { border: 1px solid var(--gris-m); padding: 6px 12px; }
.doc-contenu tr:nth-child(even) td { background: var(--gris-l); }
.doc-contenu code { background: #f4f9f6; border: 1px solid #c8e6d0; border-radius: 3px; padding: 1px 5px; font-size: 12px; }
.doc-contenu pre { background: #f4f9f6; border: 1px solid #c8e6d0; border-radius: 6px; padding: 14px 16px; overflow-x: auto; margin: 12px 0; }
.doc-contenu pre code { border: none; background: none; padding: 0; }

/* ── Admin ─────────────────────────────────────────────── */
.admin-section { background: var(--blanc); border-radius: var(--radius); box-shadow: var(--ombre); padding: 24px 28px; margin-bottom: 24px; }
.admin-section h2 { font-size: 16px; color: var(--marine); margin-bottom: 16px; }

.membres-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.membres-table th { background: var(--marine); color: var(--blanc); padding: 8px 14px; text-align: left; }
.membres-table td { border-bottom: 1px solid var(--gris-m); padding: 8px 14px; vertical-align: middle; }
.membres-table tr:hover td { background: var(--vert-l); }

.badge-admin { background: #fff8e1; color: #7a5000; border: 1px solid #ffd080; font-size: 11px; padding: 2px 8px; border-radius: 20px; font-weight: 700; }
.badge-membre { background: var(--vert-l); color: var(--vert); border: 1px solid #b3dfc4; font-size: 11px; padding: 2px 8px; border-radius: 20px; }
.badge-inactif { background: #eee; color: #888; font-size: 11px; padding: 2px 8px; border-radius: 20px; }

/* ── Formulaires admin ─────────────────────────────────── */
.form-admin { display: grid; gap: 14px; max-width: 500px; }
.form-admin label { font-size: 12px; font-weight: 700; color: var(--gris-t); display: block; margin-bottom: 4px; }
.form-admin input, .form-admin select, .form-admin textarea {
  width: 100%; border: 1px solid var(--gris-m); border-radius: 6px;
  padding: 8px 12px; font-size: 13px;
}
.form-admin input:focus, .form-admin select:focus {
  outline: none; border-color: var(--vert);
}
.form-admin .checkbox-group { display: flex; flex-wrap: wrap; gap: 10px; }
.form-admin .checkbox-item { display: flex; align-items: center; gap: 6px; font-size: 13px; }

.btn-admin {
  background: var(--marine); color: var(--blanc);
  border: none; border-radius: 6px; padding: 10px 20px;
  font-size: 13px; font-weight: 700; cursor: pointer;
  transition: background .15s; display: inline-block;
  text-decoration: none;
}
.btn-admin:hover { background: var(--marine-m); }
.btn-admin.danger { background: var(--rouge); }
.btn-admin.danger:hover { background: #a93226; }
.btn-admin.vert { background: var(--vert); }
.btn-admin.vert:hover { background: var(--vert-m); }

/* ── Alerte version ────────────────────────────────────── */
.alerte-version {
  background: #fff3cd; border: 1px solid #ffc107;
  border-radius: 6px; padding: 12px 18px;
  font-size: 13px; color: #7a5000;
  margin-bottom: 20px;
  display: flex; align-items: center; gap: 10px;
}

/* ── Footer interne ────────────────────────────────────── */
.footer-interne {
  background: var(--marine); color: rgba(255,255,255,.5);
  text-align: center; padding: 14px 20px; font-size: 11px;
  margin-top: 48px;
}
.footer-interne-inner {
  max-width: 1400px; margin: 0 auto;
  display: flex; justify-content: space-between;
  flex-wrap: wrap; gap: 8px;
}
.footer-conf { color: #ffd080; font-weight: 600; }

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 768px) {
  .nav-interne-inner { flex-wrap: wrap; height: auto; padding: 10px 16px; }
  .nav-search input { width: 120px; }
  .doc-view-header { flex-direction: column; }
  .doc-contenu { padding: 20px; }
}