@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap');

  :root {
    --parchment: #f0e0b8;
    --parchment2: #e8d4a0;
    --text-dark: #1a1008;
    --text-med: #3a2010;
    --red-stamp: #8b1a1a;
    --border-gold: #9a6828;
    --gold-dark: #8a4418;
    --gold-light: #f0d4a0;
    --gold-mid: #c87830;
    --shadow: rgba(60,36,12,0.4);
  }

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

  body {
    background: #120a04;
    background-image:
      radial-gradient(ellipse at 20% 20%, #1a1008 0%, transparent 60%),
      radial-gradient(ellipse at 80% 80%, #0d0804 0%, transparent 60%),
      url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23b85c20' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    min-height: 100vh;
    padding: 30px 20px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: 'Crimson Text', serif;
  }

  .frame {
    background: linear-gradient(160deg, #f0d870 0%, #a86018 25%, #e09838 50%, #b85c20 75%, #d4882a 100%);
    border: 3px solid #7a3810;
    border-radius: 4px;
    padding: 6px;
    width: 100%;
    max-width: 920px;
    box-shadow: 0 0 40px rgba(0,0,0,0.6), inset 0 0 20px rgba(200,160,20,0.3);
    position: relative;
  }

  .frame-corner { position: absolute; color: #7a3810; font-size: 14px; line-height: 1; z-index: 5; }
  .frame-corner.tl { top:10px; left:12px; }
  .frame-corner.tr { top:10px; right:12px; }
  .frame-corner.bl { bottom:10px; left:12px; }
  .frame-corner.br { bottom:10px; right:12px; }

  .frame-inner {
    background: linear-gradient(170deg, #f4e4c0 0%, #dc9a38 30%, #e8c890 60%, #d09030 100%);
    border: 2px solid #b85c20;
    border-radius: 2px;
    padding: 18px 20px 14px;
    position: relative;
    overflow: hidden;
  }

  .frame-inner::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(0deg, transparent, transparent 28px, rgba(184,108,36,0.06) 28px, rgba(184,108,36,0.06) 29px);
    pointer-events: none;
    z-index: 0;
  }

  .watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-30deg);
    font-family: 'Cinzel', serif;
    font-size: clamp(36px, 7vw, 62px);
    font-weight: 700;
    letter-spacing: 8px;
    color: rgba(120,80,10,0.09);
    pointer-events: none;
    user-select: none;
    z-index: 1;
    white-space: nowrap;
  }

  /* HEADER */
  .doc-header {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 16px;
  }

  .uchiha-symbol { width: 52px; height: 52px; margin-bottom: 8px; }

  .doc-title {
    font-family: 'Cinzel', serif;
    font-size: clamp(12px, 2.6vw, 19px);
    font-weight: 700;
    letter-spacing: 4px;
    color: var(--text-dark);
    text-align: center;
    text-transform: uppercase;
  }

  .doc-subtitle {
    font-family: 'Cinzel', serif;
    font-size: 10px;
    letter-spacing: 3px;
    color: var(--text-med);
    margin-top: 3px;
  }

  /* MAIN */
  .main { display: flex; gap: 0; position: relative; z-index: 2; }

  .side-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 36px;
    flex-shrink: 0;
    padding-top: 6px;
  }

  .arrow-head {
    width: 0; height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 16px solid var(--red-stamp);
    flex-shrink: 0;
  }

  .arrow-line {
    width: 4px;
    flex: 1;
    background: linear-gradient(to top, #5a0a0a, var(--red-stamp));
    margin-top: 6px;
  }

  .arrow-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: 'Cinzel', serif;
    letter-spacing: 4px;
    font-size: 9px;
    color: var(--red-stamp);
    margin-top: 10px;
    user-select: none;
    font-weight: 600;
  }

  .hierarchy {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  /* SECTION DIVIDER */
  .section-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0 3px;
  }

  .section-divider:first-child { margin-top: 0; }

  .section-divider-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--red-stamp), transparent);
    opacity: 0.5;
  }

  .section-divider-label {
    font-family: 'Cinzel', serif;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--red-stamp);
    white-space: nowrap;
    text-transform: uppercase;
    opacity: 0.8;
  }

  /* RANK BLOCK */
  .rank-block {
    border: 1px solid var(--border-gold);
    overflow: hidden;
  }

  .rank-header {
    padding: 6px 12px;
    font-family: 'Cinzel', serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border-gold);
    text-align: center;
  }

  .rank-body {
    padding: 8px 12px 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
    justify-content: center;
    min-height: 50px;
  }

  /* MEMBER CARDS */
  .member-card {
    background: rgba(255,255,255,0.55);
    border: 1px solid var(--border-gold);
    padding: 5px 14px;
    text-align: center;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s, transform 0.12s;
    position: relative;
    min-width: 90px;
  }

  .member-card:hover {
    background: rgba(255,255,255,0.88);
    box-shadow: 0 2px 8px var(--shadow);
    transform: translateY(-1px);
  }

  .member-card.vacant {
    opacity: 0.35;
    cursor: default;
    background: transparent;
    border-style: dashed;
  }

  .member-name {
    font-family: 'Crimson Text', serif;
    font-style: italic;
    font-size: 14px;
    color: var(--text-dark);
    line-height: 1.25;
    min-height: 18px;
  }

  .delete-btn {
    position: absolute;
    top: -7px; right: -7px;
    width: 15px; height: 15px;
    background: var(--red-stamp);
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #fff;
    cursor: pointer;
    z-index: 10;
    border: none;
    line-height: 1;
    font-style: normal;
  }

  .member-card:hover .delete-btn { display: flex; }

  /* div-based add btn for html2canvas compatibility */
  .add-member-btn {
    background: rgba(255,255,255,0.25);
    border: 1px dashed var(--border-gold);
    padding: 5px 12px;
    min-width: 32px;
    min-height: 28px;
    cursor: pointer;
    color: var(--gold-dark);
    font-family: 'Cinzel', serif;
    font-size: 16px;
    font-weight: 700;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    line-height: 1;
  }

  .add-member-btn:hover {
    background: rgba(255,255,255,0.5);
    border-color: var(--gold-dark);
    color: var(--text-dark);
  }

  /* DIVISIONS SECTION */
  .divisions-section {
    position: relative;
    z-index: 2;
    margin-top: 22px;
  }

  .section-title-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
  }

  .section-title-line {
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--text-dark), transparent);
  }

  .section-title-text {
    font-family: 'Cinzel', serif;
    font-size: clamp(10px, 2vw, 14px);
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--text-dark);
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .divisions-note {
    font-family: 'Crimson Text', serif;
    font-style: italic;
    font-size: 12px;
    color: var(--text-med);
    text-align: center;
    margin-bottom: 10px;
  }

  .divisions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }

  @media (max-width: 700px) {
    .divisions-grid { grid-template-columns: 1fr; }
  }

  .division-card {
    border: 1px solid var(--border-gold);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .division-card-header {
    padding: 8px 10px;
    font-family: 'Cinzel', serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.15);
    line-height: 1.4;
  }

  .division-card-body {
    padding: 10px;
    font-family: 'Crimson Text', serif;
    font-size: 12px;
    color: var(--text-dark);
    line-height: 1.55;
    flex: 1;
  }

  .div-nature {
    font-weight: 600;
    font-size: 11px;
    color: var(--text-med);
    margin-bottom: 6px;
    font-style: italic;
  }

  .div-list { margin-top: 6px; padding-left: 14px; }
  .div-list li { margin-bottom: 2px; font-size: 11.5px; }

  .div-competences {
    margin-top: 8px;
    font-size: 11px;
    font-style: italic;
    color: var(--text-med);
    border-top: 1px solid rgba(0,0,0,0.08);
    padding-top: 6px;
  }

  .div-renseignement .division-card-header { background: #1e2a3a; color: #a8c0d8; }
  .div-renseignement .division-card-body { background: rgba(120,150,180,0.12); }
  .div-judiciaire .division-card-header { background: #3a1418; color: #d8a8a8; }
  .div-judiciaire .division-card-body { background: rgba(180,100,100,0.10); }
  .div-alpha .division-card-header { background: #1a1a1a; color: #c8c8c8; }
  .div-alpha .division-card-body { background: rgba(100,100,100,0.08); }

  /* JUDICIAL SECTION */
  .judicial-section {
    position: relative;
    z-index: 2;
    margin-top: 18px;
  }

  .judicial-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .judicial-rank {
    border: 1px solid var(--border-gold);
    display: flex;
    overflow: hidden;
  }

  @media (max-width: 600px) {
    .judicial-rank { flex-direction: column; }
  }

  .judicial-rank-name {
    min-width: 180px;
    padding: 10px 14px;
    font-family: 'Cinzel', serif;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-right: 1px solid var(--border-gold);
    line-height: 1.3;
    letter-spacing: 1px;
  }

  .judicial-rank-grade {
    display: block;
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 2px;
    margin-top: 4px;
    opacity: 0.7;
    text-transform: uppercase;
  }

  .judicial-rank-desc {
    flex: 1;
    padding: 8px 12px;
    font-family: 'Crimson Text', serif;
    font-size: 11.5px;
    color: var(--text-dark);
    line-height: 1.55;
    background: var(--parchment);
  }

  .jud-magistrat .judicial-rank-name { background: #2a1040; color: #c8a8e0; }
  .jud-officier .judicial-rank-name { background: #1a2a4a; color: #a8c0e0; }
  .jud-adjoint .judicial-rank-name { background: #2a3a20; color: #c0d0a0; }

  /* BOTTOM BAR */
  .bottom-bar {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 14px;
    flex-wrap: wrap;
    gap: 10px;
  }

  .stamp-box {
    border: 3px solid var(--red-stamp);
    padding: 4px 12px;
    transform: rotate(-4deg);
    color: var(--red-stamp);
    font-family: 'Cinzel', serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    opacity: 0.85;
    user-select: none;
  }

  .info-text {
    font-family: 'Crimson Text', serif;
    font-style: italic;
    font-size: 13px;
    color: var(--text-med);
    text-align: center;
    flex: 1;
  }

  .btn-save {
    background: #3a1e0a;
    border: 1px solid var(--gold-dark);
    color: var(--gold-light);
    font-family: 'Cinzel', serif;
    font-weight: 600;
    letter-spacing: 2px;
    font-size: 11px;
    padding: 8px 16px;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
  }

  .btn-save:hover { background: #3a5020; color: #fff; border-color: var(--gold-light); }


  /* BACK BUTTON */
  .btn-back {
    position: fixed;
    top: 18px;
    left: 18px;
    z-index: 999;
    display: flex;
    align-items: center;
    gap: 7px;
    background: linear-gradient(135deg, #261408, #261404);
    border: 2px solid var(--border-gold);
    color: var(--gold-light);
    font-family: 'Cinzel', serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 8px 14px;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 2px 12px rgba(0,0,0,0.5);
    transition: all 0.2s;
  }
  .btn-back:hover {
    background: linear-gradient(135deg, #1e1208, #261404);
    border-color: var(--gold-light);
    color: #fff;
    transform: translateX(-2px);
  }

  /* MODAL */
  .modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(50,30,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
  }

  .modal-overlay.active { opacity: 1; pointer-events: all; }

  .modal {
    background: linear-gradient(160deg, #f4e4c0, #e09838);
    border: 2px solid var(--gold-dark);
    padding: 24px;
    width: 320px;
    max-width: 90vw;
    box-shadow: 0 8px 30px rgba(0,0,0,0.5);
  }

  .modal h3 {
    font-family: 'Cinzel', serif;
    letter-spacing: 2px;
    font-size: 14px;
    margin-bottom: 14px;
    color: var(--text-dark);
    border-bottom: 1px solid var(--border-gold);
    padding-bottom: 8px;
    text-transform: uppercase;
  }

  .modal input {
    width: 100%;
    background: rgba(255,255,255,0.6);
    border: 1px solid var(--border-gold);
    border-bottom: 2px solid var(--gold-dark);
    color: var(--text-dark);
    padding: 7px 10px;
    font-family: 'Crimson Text', serif;
    font-size: 15px;
    font-style: italic;
    margin-bottom: 16px;
    outline: none;
  }

  .modal input:focus { border-bottom-color: var(--text-dark); }

  .modal-btns { display: flex; gap: 10px; justify-content: flex-end; }

  .modal-btns button {
    font-family: 'Cinzel', serif;
    letter-spacing: 1px;
    font-size: 11px;
    padding: 7px 16px;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.15s;
  }

  .btn-cancel {
    background: transparent;
    border: 1px solid var(--border-gold);
    color: var(--text-med);
  }
  .btn-cancel:hover { background: rgba(255,255,255,0.4); color: var(--text-dark); }

  .btn-confirm {
    background: #3a1e0a;
    color: var(--gold-light);
    border: 1px solid var(--gold-dark);
  }
  .btn-confirm:hover { background: #3a5020; }

  /* USER BAR */
  .user-bar {
    position: fixed; top: 14px; right: 14px; z-index: 999;
    display: flex; align-items: center; gap: 8px;
  }
  .user-bar-inner { display: flex; align-items: center; gap: 8px; }
  .btn-burger { display: none; }
  .user-badge {
    font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 1px;
    color: var(--gold-light); background: rgba(20,14,3,0.88);
    border: 1px solid var(--border-gold); padding: 6px 12px; text-transform: uppercase;
  }
  .btn-user-action {
    font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 1px;
    padding: 6px 11px; cursor: pointer; border-radius: 2px; transition: all 0.2s;
  }
  .btn-logout {
    color: var(--gold-mid); background: transparent;
    border: 1px solid var(--border-gold);
  }
  .btn-logout:hover { background: rgba(184,92,32,0.15); }
  .btn-admin-panel {
    color: #f5c060; background: rgba(80,50,0,0.45);
    border: 1px solid #d4782a; display: none;
  }
  .btn-admin-panel:hover { background: rgba(160,100,0,0.45); }

  /* ADMIN OVERLAY */
  .admin-overlay {
    position: fixed; inset: 0; z-index: 2000;
    background: rgba(0,0,0,0.78);
    display: none; align-items: center; justify-content: center;
  }
  .admin-overlay.active { display: flex; }
  .admin-panel {
    background: linear-gradient(145deg,#f0e4c0,#e8d080,#ecc890);
    border: 3px solid #7a3810; padding: 5px;
    width: 92%; max-width: 500px; max-height: 82vh;
    display: flex; flex-direction: column;
    box-shadow: 0 0 60px rgba(0,0,0,0.7);
  }
  .admin-panel-inner {
    background: linear-gradient(160deg,#f8f0d0,#e8d08a);
    border: 1px solid rgba(180,140,40,0.3);
    padding: 24px 22px 18px; overflow-y: auto; flex: 1;
  }
  .admin-title {
    font-family: 'Cinzel', serif; font-size: 12px; font-weight: 700;
    letter-spacing: 3px; text-transform: uppercase;
    color: #1a1008; text-align: center; margin-bottom: 14px;
  }
  .admin-divider { height:1px; background: linear-gradient(90deg,transparent,#b85c20,transparent); margin-bottom: 14px; }
  .user-row {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 0; border-bottom: 1px solid rgba(180,140,40,0.2);
  }
  .user-row:last-child { border-bottom: none; }
  .user-row-pseudo { font-family: 'Cinzel', serif; font-size: 11px; color: #1a1008; flex: 1; }
  .perm-badge {
    font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: 1px;
    padding: 3px 8px; border-radius: 2px; white-space: nowrap;
  }
  .perm-badge.READ   { background:#1a2a4a; color:#a0c0e0; border:1px solid #2a4a8a; }
  .perm-badge.UPDATE { background:#3a1e08; color:#80c060; border:1px solid #2a6a20; }
  .perm-badge.ADMIN  { background:#4a2a0a; color:#f0c060; border:1px solid #7a3810; }
  .btn-toggle-perm {
    font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: 1px;
    padding: 4px 9px; cursor: pointer; transition: all 0.2s; border-radius: 2px;
  }
  .to-update { background: rgba(20,50,15,0.3); color:#60c040; border:1px solid #2a6a20; }
  .to-update:hover { background: rgba(20,50,15,0.55); }
  .to-read   { background: rgba(15,25,55,0.3); color:#60a0e0; border:1px solid #2a4a8a; }
  .to-read:hover { background: rgba(15,25,55,0.55); }
  .btn-del-user {
    font-size: 15px; background: none; border: none; cursor: pointer;
    color: #8b1a1a; padding: 2px 5px; opacity: 0.55; transition: opacity 0.2s;
  }
  .btn-del-user:hover { opacity: 1; }
  .admin-close-btn {
    width:100%; padding: 9px; margin-top: 0;
    font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
    background: linear-gradient(135deg,#3a2a10,#5a4020); border: 1px solid #7a3810;
    color: #d4782a; cursor: pointer; transition: all 0.2s; flex-shrink: 0;
  }
  .admin-close-btn:hover { background: linear-gradient(135deg,#5a4020,#7a5a30); }
  .admin-empty { text-align:center; font-style:italic; color:#7a5a20; font-size:13px; padding:20px 0; }

  /* ═══════════════════════════
     SIDEBAR PRÉSENCE EN LIGNE
     ═══════════════════════════ */
  .presence-sidebar {
    position: fixed; right: 8px; top: 70px;
    width: 162px; z-index: 800;
    background: rgba(8,5,1,0.93);
    border: 1px solid rgba(184,92,32,0.45);
    border-radius: 4px;
    box-shadow: -4px 0 20px rgba(0,0,0,0.45);
    overflow: hidden;
    transition: width 0.25s ease;
  }
  .presence-sidebar.collapsed { width: 28px; }
  .presence-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 100%; padding: 8px 0;
    background: none; border: none; border-bottom: 1px solid rgba(184,92,32,0.22);
    cursor: pointer; color: #b85c20;
    font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: 2px;
    white-space: nowrap; overflow: hidden; transition: background 0.2s;
  }
  .presence-toggle:hover { background: rgba(184,92,32,0.1); }
  .presence-toggle-icon { flex-shrink: 0; font-size: 11px; margin-right: 7px; }
  .presence-sidebar.collapsed .presence-toggle-text { display: none; }
  .presence-sidebar.collapsed .presence-toggle-icon { margin-right: 0; }
  .presence-body {
    padding: 6px 0 8px; max-height: 320px;
    overflow-y: auto; overflow-x: hidden;
  }
  .presence-sidebar.collapsed .presence-body { display: none; }
  .presence-user {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 12px; transition: background 0.15s;
  }
  .presence-user:hover { background: rgba(184,92,32,0.08); }
  .presence-dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  }
  .presence-dot.active {
    background: #d4882a;
    box-shadow: 0 0 5px #d4882a, 0 0 10px rgba(76,175,80,0.45);
  }
  .presence-dot.away {
    background: #9c27b0;
    box-shadow: 0 0 5px #9c27b0, 0 0 10px rgba(156,39,176,0.45);
  }
  .presence-dot.police-active {
    background: #d4882a;
    box-shadow: 0 0 5px #d4882a, 0 0 10px rgba(76,175,80,0.5);
  }
  .presence-dot.police-away {
    background: #9c27b0;
    box-shadow: 0 0 5px #9c27b0, 0 0 10px rgba(156,39,176,0.45);
  }

  .presence-dot.mobile {
  background: #2196F3;
  box-shadow: 0 0 6px rgba(33, 150, 243, 0.6);
}

.presence-dot.police-mobile {
  background: #2196F3;
  box-shadow: 0 0 8px rgba(33, 150, 243, 0.75);
}
  .presence-police-icon { font-size: 8px; color: #d4782a; flex-shrink: 0; line-height: 1; }
  .presence-guest-row {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 12px; opacity: 0.5;
    border-top: 1px dashed rgba(184,92,32,0.18); margin-top: 3px;
  }
  .presence-guest-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #555; flex-shrink: 0;
  }
  .btn-police-on {
    font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: 0.5px;
    background: rgba(180,134,11,0.28); border: 1px solid #b85c20; color: #e8a050;
    padding: 3px 7px; border-radius: 2px; cursor: pointer; transition: all 0.2s; white-space: nowrap;
  }
  .btn-police-on:hover { background: rgba(180,134,11,0.5); }
  .btn-police-off {
    font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: 0.5px;
    background: transparent; border: 1px dashed rgba(184,92,32,0.35); color: rgba(212,120,42,0.5);
    padding: 3px 7px; border-radius: 2px; cursor: pointer; transition: all 0.2s; white-space: nowrap;
  }
  .btn-police-off:hover { border-style: solid; color: #d4782a; }
  .user-badge.guest { opacity: 0.6; font-style: italic; letter-spacing: 0.5px; }
  .presence-name {
    font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: 0.5px;
    color: #d4782a; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; max-width: 108px;
  }
  .presence-empty {
    font-family: 'Cinzel', serif; font-size: 8px; letter-spacing: 1px;
    color: rgba(184,92,32,0.4); text-align: center; padding: 10px 8px;
  }

  /* ═══════════════════════════
     DRAG'N'DROP
     ═══════════════════════════ */
  .member-card[draggable="true"] { cursor: grab; }
  .member-card[draggable="true"]:active { cursor: grabbing; }
  .member-card.dragging {
    opacity: 0.35; transform: scale(0.93);
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
  }
  .rank-body.drag-over {
    outline: 2px dashed var(--border-gold);
    background: rgba(200,160,20,0.18) !important;
    transition: background 0.15s;
  }
  .rank-body.drag-over::after {
    content: '↓ Déposer ici';
    display: block; width: 100%; text-align: center;
    font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 2px;
    color: var(--gold-mid); opacity: 0.8; padding: 4px 0;
  }

  /* TOAST */
  .hier-toast {
    position: fixed; bottom: 28px; left: 50%;
    transform: translateX(-50%) translateY(60px);
    background: #120a04; color: var(--gold-light);
    font-family: 'Cinzel', serif; font-size: 13px; letter-spacing: 1px;
    padding: 11px 26px; border: 1px solid var(--border-gold);
    box-shadow: 0 6px 24px rgba(0,0,0,0.6);
    opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease;
    z-index: 4000; white-space: nowrap; pointer-events: none;
  }
  .hier-toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }

  /* ═══════════════════════════
     POPUP FICHE NINJA
     ═══════════════════════════ */
  .ninja-card-overlay {
    position: fixed; inset: 0; z-index: 3000;
    background: rgba(10,6,1,0); backdrop-filter: blur(0px);
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
    transition: background 0.3s ease, backdrop-filter 0.3s ease;
  }
  .ninja-card-overlay.active {
    background: rgba(10,6,1,0.72); backdrop-filter: blur(3px);
    pointer-events: all;
  }
  .ninja-card-popup {
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"),
      linear-gradient(155deg, #f4e4c0 0%, #e8cc60 35%, #f2e080 60%, #ddb830 100%);
    border: 3px solid #7a3810;
    border-radius: 3px;
    box-shadow:
      0 0 0 1px #b06820,
      0 0 0 5px #7a3810,
      0 0 0 6px #b06820,
      0 30px 80px rgba(0,0,0,0.8);
    width: 92%; max-width: 480px;
    max-height: 88vh; overflow-y: auto;
    padding: 28px 28px 22px;
    position: relative;
    transform: scale(0.82) translateY(24px);
    opacity: 0;
    transition: transform 0.32s cubic-bezier(0.34,1.3,0.64,1), opacity 0.25s ease;
  }
  .ninja-card-overlay.active .ninja-card-popup {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
  .ninja-card-close {
    position: absolute; top: 10px; right: 13px;
    background: none; border: none; cursor: pointer;
    color: #7a3810; font-size: 20px; line-height: 1;
    opacity: 0.6; transition: opacity 0.2s;
  }
  .ninja-card-close:hover { opacity: 1; }
  .ninja-card-seal {
    position: absolute; top: 14px; left: 18px;
    opacity: 0.12; pointer-events: none; user-select: none;
    font-family: 'Cinzel', serif; font-size: 11px; font-weight: 900;
    color: #8b1a1a; letter-spacing: 3px; transform: rotate(-18deg);
  }
  .ninja-card-logo {
    display: block; margin: 0 auto 6px;
    width: 36px; height: 36px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
  }
  .ninja-card-title {
    font-family: 'Cinzel', serif; font-weight: 900; font-size: 15px;
    letter-spacing: 0.12em; text-align: center; color: #1a1008;
    text-shadow: 0 1px 0 rgba(255,220,80,0.5);
    margin-bottom: 4px;
  }
  .ninja-card-rang {
    text-align: center; font-family: 'Cinzel', serif; font-size: 10px;
    letter-spacing: 3px; color: #7a3810; text-transform: uppercase;
    margin-bottom: 14px;
  }
  .ninja-card-divider {
    height: 2px; margin: 0 0 16px;
    background: linear-gradient(90deg, transparent, #b85c20, #1a1008, #b85c20, transparent);
  }
  .ninja-card-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px;
    margin-bottom: 14px;
  }
  .ninja-card-field { display: flex; flex-direction: column; gap: 2px; }
  .ninja-card-field.full { grid-column: 1 / -1; }
  .ninja-card-label {
    font-family: 'Cinzel', serif; font-size: 8px; font-weight: 700;
    letter-spacing: 2px; text-transform: uppercase; color: #7a3810;
  }
  .ninja-card-value {
    font-family: 'Crimson Text', serif; font-size: 15px; color: #1a0e04;
    border-bottom: 1px solid rgba(180,140,40,0.3); padding-bottom: 3px;
    min-height: 22px;
  }
  .ninja-card-notes {
    font-family: 'Crimson Text', serif; font-size: 14px; font-style: italic;
    color: #3a2810; line-height: 1.55;
    background: rgba(180,140,40,0.08); border-left: 3px solid #b85c20;
    padding: 8px 12px; border-radius: 0 2px 2px 0;
  }
  .ninja-card-footer {
    text-align: center; font-family: 'Cinzel', serif; font-size: 9px;
    letter-spacing: 2px; color: #7a3810; margin-top: 16px; opacity: 0.7;
  }
  .member-card { cursor: pointer; }
  .member-card:not(.vacant):hover {
    box-shadow: 0 0 0 2px #b06820, 0 4px 12px rgba(0,0,0,0.3) !important;
    transform: translateY(-1px);
    transition: all 0.15s ease;
  }

  /* ── Décorations Chakra (fond popup) ── */
  .ninja-card-chakra-bg {
    position: absolute; inset: 0;
    pointer-events: none; overflow: hidden;
    z-index: 0; border-radius: 3px;
  }
  .chakra-deco {
    position: absolute; bottom: -6px;
    width: 250px; height: 250px;
    opacity: 0.42;
    pointer-events: none; user-select: none;
    transition: opacity 0.3s, transform 0.3s;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,0.16));
  }
  .chakra-deco.left  { left: -22px; transform: rotate(-6deg); }
  .chakra-deco.right { right: -22px; transform: rotate(6deg); }
  .chakra-deco.center { left: 50%; transform: translateX(-50%); width: 290px; height: 290px; }

  /* ── Responsive Mobile ── */
  @media (max-width: 700px) {
    body { padding: 8px 4px 56px; }

    /* ── Burger menu ── */
    .btn-burger {
      display: flex; align-items: center; justify-content: center;
      width: 36px; height: 36px; border-radius: 3px;
      background: rgba(20,14,3,0.9); border: 1px solid var(--border-gold);
      color: var(--gold-light); font-size: 20px; cursor: pointer;
      flex-shrink: 0;
    }
    .user-bar { top: 8px; right: 6px; gap: 0; }
    .user-bar-inner {
      display: none;
      position: fixed; top: 50px; right: 6px;
      flex-direction: column; gap: 6px;
      background: rgba(8,5,1,0.97); border: 1px solid rgba(184,92,32,0.55);
      border-radius: 4px; padding: 10px 8px; min-width: 165px;
      box-shadow: 0 6px 24px rgba(0,0,0,0.75);
      z-index: 1000;
    }
    .user-bar-inner.open { display: flex; }
    .user-bar-inner .user-badge {
      text-align: center; padding: 8px 10px; font-size: 10px; letter-spacing: 0.5px;
      border-bottom: 1px solid rgba(184,92,32,0.28); margin-bottom: 2px;
    }
    .user-bar-inner .btn-user-action {
      width: 100%; text-align: left; padding: 8px 10px; font-size: 10px;
    }

    /* ── Bouton retour compact ── */
    .btn-back {
      top: 10px; left: 6px;
      font-size: 9px; padding: 6px 10px; letter-spacing: 1px;
      width: auto; max-width: 44px; overflow: hidden; white-space: nowrap;
    }
    /* On masque le texte, ne garde que la flèche */
    .btn-back-text { display: none; }

    .frame { max-width: 100%; padding: 4px; }
    .frame-inner { padding: 12px 8px 10px; }

    .title-kanji { font-size: 10px; letter-spacing: 4px; }
    h1.page-title { font-size: 14px; letter-spacing: 3px; }
    .sub-title { font-size: 8px; letter-spacing: 2px; }

    /* Masquer les flèches latérales, rendre le contenu linéaire */
    .side-arrow { display: none !important; }
    .main { flex-direction: column; gap: 8px; }
    .center-col { width: 100%; }

    /* Rang blocks en colonne */
    .rank-block { margin-bottom: 10px; }
    .rank-header { font-size: 9px; padding: 5px 8px; letter-spacing: 1.5px; }
    .rank-body {
      flex-direction: column; align-items: stretch;
      gap: 5px; padding: 6px 4px;
    }

    /* Cartes membres */
    .member-card {
      min-width: unset !important; width: 100% !important;
      padding: 6px 8px; font-size: 10px;
    }

    /* Grille divisions → 1 colonne */
    .division-grid {
      grid-template-columns: 1fr !important;
      gap: 8px;
    }
    .division-block { padding: 8px 6px; }
    .division-title { font-size: 8px; letter-spacing: 1.5px; }

    /* Grille judiciaire */
    .judicial-grid {
      grid-template-columns: 1fr !important;
    }
    .judicial-block { padding: 8px 6px; }

    /* Barre du bas — marge pour la sidebar fixe en bas */
    .bottom-bar {
      flex-direction: column; align-items: stretch;
      gap: 8px; padding: 8px 6px 16px;
    }
    .btn-save {
      width: 100%; text-align: center;
      font-size: 10px; padding: 10px 8px;
    }

    /* Sidebar présence → banderole fine repliée en bas */
    .presence-sidebar {
      position: fixed !important;
      top: auto !important; right: auto !important;
      bottom: 0 !important; left: 0 !important;
      width: 100% !important; max-height: 36px;
      border-radius: 6px 6px 0 0;
      overflow: hidden;
      transition: max-height 0.28s ease;
    }
    .presence-sidebar.mobile-open { max-height: 180px; }
    /* Désactiver le comportement collapsed desktop */
    .presence-sidebar.collapsed { width: 100% !important; }
    .presence-sidebar.collapsed .presence-toggle-text { display: inline !important; }
    .presence-sidebar.collapsed .presence-toggle-icon { margin-right: 7px !important; }
    .presence-sidebar.collapsed .presence-body { display: block !important; }
    .presence-toggle { padding: 8px 14px; justify-content: center; }
    .presence-body {
      max-height: 140px; overflow-y: auto; padding: 4px 0 8px;
    }

    /* Popup fiche ninja → plein écran sur mobile */
    .ninja-card-popup {
      width: 94vw !important; max-width: 94vw !important;
      padding: 18px 12px 14px !important;
    }
  }

  /* ═══════════════════════════════════════
     POPUP PROFIL (badge cliquable)
     ═══════════════════════════════════════ */
  .profile-popup-wrap {
    position: fixed;
    top: 0; right: 0;
    z-index: 1500;
    pointer-events: none;
  }
  .profile-popup {
    pointer-events: all;
    position: fixed;
    top: 52px;
    right: 14px;
    width: 230px;
    background: linear-gradient(155deg, #f4e4c0 0%, #e8cc60 40%, #f0d870 100%);
    border: 2px solid #7a3810;
    box-shadow:
      0 0 0 1px #b06820,
      0 10px 36px rgba(0,0,0,0.65);
    padding: 16px 16px 14px;
    border-radius: 3px;
    transform: translateY(-8px) scaleY(0.92);
    opacity: 0;
    transform-origin: top right;
    transition: transform 0.22s cubic-bezier(0.34,1.28,0.64,1), opacity 0.18s ease;
    display: none;
  }
  .profile-popup.open {
    display: block;
    transform: translateY(0) scaleY(1);
    opacity: 1;
  }
  /* petite flèche en haut à droite */
  .profile-popup::before {
    content: '';
    position: absolute;
    top: -8px; right: 20px;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 8px solid #7a3810;
  }
  .profile-popup::after {
    content: '';
    position: absolute;
    top: -5px; right: 22px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 6px solid #f4e4c0;
  }
  .profile-popup-title {
    font-family: 'Cinzel', serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #3a2010;
    text-align: center;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(180,140,40,0.35);
    padding-bottom: 8px;
  }
  .profile-avatar-preview {
    width: 90px; height: 90px;
    border: 2px solid #9a6828;
    border-radius: 2px;
    margin: 0 auto 12px;
    background: rgba(180,140,40,0.12);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    position: relative;
  }
  .profile-avatar-preview img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
  .profile-avatar-placeholder {
    font-size: 30px;
    opacity: 0.3;
    color: #3a2010;
    user-select: none;
    pointer-events: none;
  }
  .profile-upload-label {
    display: block;
    text-align: center;
    font-family: 'Cinzel', serif;
    font-size: 9px;
    letter-spacing: 1.5px;
    color: #3a2208;
    background: rgba(255,255,255,0.45);
    border: 1px dashed #9a6828;
    padding: 7px 10px;
    cursor: pointer;
    transition: all 0.15s;
    margin-bottom: 8px;
    border-radius: 2px;
  }
  .profile-upload-label:hover {
    background: rgba(255,255,255,0.7);
    border-style: solid;
  }
  .profile-upload-input { display: none; }
  .profile-save-btn {
    width: 100%;
    font-family: 'Cinzel', serif;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: #3a1e0a;
    color: #f0d4a0;
    border: 1px solid #4a6a28;
    padding: 8px;
    cursor: pointer;
    transition: all 0.18s;
    border-radius: 2px;
  }
  .profile-save-btn:hover { background: #3a5020; color: #fff; }
  .profile-save-btn:disabled { opacity: 0.5; cursor: default; }
  .profile-save-status {
    font-family: 'Cinzel', serif;
    font-size: 8px;
    letter-spacing: 1px;
    text-align: center;
    margin-top: 7px;
    height: 14px;
    color: #3a1e0a;
  }

  /* ─── Ninja card : layout photo + entête ─── */
  .ninja-card-header-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
  }
  .ninja-card-avatar-box {
    width: 110px; height: 110px;
    flex-shrink: 0;
    border: 2px solid #9a6828;
    border-radius: 2px;
    overflow: hidden;
    background: rgba(180,140,40,0.10);
    display: flex; align-items: center; justify-content: center;
  }
  .ninja-card-avatar-box img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
  }
  .ninja-card-avatar-placeholder {
    font-size: 38px;
    opacity: 0.18;
    color: #3a2010;
    user-select: none;
  }
  .ninja-card-header-info {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
  }

  /* ── Liaison compte → personnage RP ── */
  .user-row { flex-wrap: wrap; }
  .user-row-link {
    display: flex; align-items: center; gap: 8px;
    width: 100%; margin-top: 6px; padding-top: 6px;
    border-top: 1px dashed rgba(184,92,32,0.15);
  }
  .user-row-link-label {
    font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: 1px;
    color: #8a6a30; white-space: nowrap; text-transform: uppercase;
  }
  .select-membre {
    font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: 0.5px;
    background: rgba(25,16,3,0.9); border: 1px solid rgba(184,92,32,0.4);
    color: #d4782a; padding: 4px 6px; cursor: pointer;
    border-radius: 2px; flex: 1; max-width: 200px;
    appearance: none; -webkit-appearance: none;
  }
  .select-membre:focus { outline: none; border-color: #d4782a; }
  .select-membre option { background: #120a04; color: #d4782a; }