:root {
  --bg: #3F4551;
  --panel: #ffffff;
  --ink: #24291f;
  --muted: #6b7264;
  --border: #d9ddd2;
  --accent: #2f6b3a;
  --accent-soft: #e7f0e5;
  --danger: #b3261e;
  --scout-tint: #eaf1fb;
  --guide-tint: #fbeaf1;
  --commun-tint: #f3f1e8;
  --radius: 10px;
  font-size: 15px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  overflow: hidden;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
}

/* ---------- Header ---------- */

header#topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
  z-index: 20;
}

#siteLogo {
  height: 32px;
  width: auto;
  flex: 0 0 auto;
}

header#topbar h1 {
  font-size: 17px;
  margin: 0;
  font-weight: 600;
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn {
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--ink);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.danger { color: var(--danger); border-color: var(--danger); }
.btn.small { padding: 3px 8px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

#adminBadge {
  font-size: 12px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 999px;
  padding: 3px 10px;
  display: none;
}
#adminBadge.on { display: inline-block; }

.branch-filter { display: flex; gap: 4px; }
.btn.toggle {
  background: var(--panel);
  color: var(--muted);
  opacity: .55;
}
.btn.toggle[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  opacity: 1;
  font-weight: 700;
}

/* ---------- Chart viewport ---------- */

#viewport {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
  cursor: grab;
  background: var(--bg);
}
#viewport.dragging { cursor: grabbing; }

#canvas {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
}

.link-layer {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  overflow: visible;
}
.link-layer path.primary {
  fill: none;
  stroke: #9aa393;
  stroke-width: 2;
}
.link-layer path.secondary {
  fill: none;
  stroke: #b98a4e;
  stroke-width: 2;
  stroke-dasharray: 5 4;
}

.tint-band {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 14px;
  z-index: 0;
}
.tint-band.scout { background: var(--scout-tint); }
.tint-band.guide { background: var(--guide-tint); }
.tint-band .tint-label {
  position: sticky;
  top: 6px;
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  padding: 4px 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ---------- Person card ---------- */

.person {
  position: absolute;
  width: 168px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 10px 9px;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  cursor: pointer;
  z-index: 1;
  transition: box-shadow .15s, border-color .15s;
}
.person:hover {
  border-color: var(--accent);
  box-shadow: 0 3px 10px rgba(0,0,0,.10);
  z-index: 5;
}
.person.unassigned {
  border-style: dashed;
  border-color: #c9a24a;
}
.person.vacant {
  /* Fond léger, juste pour attirer l'oeil - le reste de la fiche reste lisible normalement.
     La teinte rouge est posée SUR un fond blanc explicite (et non sur la transparence de la
     page derrière la fiche, qui est sombre) : sans ce blanc en second calque, la même rgba
     rendait la fiche presque noire au lieu d'un simple lavis rouge clair. */
  background: linear-gradient(rgba(179, 38, 30, .4), rgba(179, 38, 30, .4)), var(--panel);
  border-color: rgba(179, 38, 30, .55);
}
.person.branche-scout { border-left: 4px solid #4472c4; }
.person.branche-guide { border-left: 4px solid #c44480; }
.person.branche-commun { border-left: 4px solid #8a8f7f; }

.person .photo {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #e4e6df center/cover no-repeat;
  float: left;
  margin-right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
  overflow: hidden;
}
.person .photo img { width: 100%; height: 100%; object-fit: cover; }

.person .name {
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
}
.person .fonction-line {
  font-size: 11px;
  color: var(--muted);
  margin-top: 1px;
}

.barrette {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 9px;
  border-radius: 2px;
  margin-top: 5px;
  clear: left;
}
.barrette .carre {
  width: 9px;
  height: 9px;
  border-radius: 1px;
}
.barrette .carre.croix {
  background: transparent;
  position: relative;
}
.barrette .carre.croix::before,
.barrette .carre.croix::after {
  content: "";
  position: absolute;
  background: var(--sym-color, #333);
}
.barrette .carre.croix::before {
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  transform: translateX(-50%);
}
.barrette .carre.croix::after {
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  transform: translateY(-50%);
}

.person .groupe {
  font-size: 10px;
  color: var(--muted);
  margin-top: 3px;
  clear: left;
}

.person .badges {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
.person .badge-formation {
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 999px;
  color: #fff; /* remplacé au cas par cas en inline par app.js selon le contraste du fond */
}

/* ---------- Zoom controls ---------- */

#zoomControls {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 15;
}
#zoomControls .btn { width: 34px; height: 34px; padding: 0; font-size: 16px; }

/* ---------- Modal (admin forms) ---------- */

.overlay {
  position: fixed; inset: 0;
  background: rgba(20,22,16,.35);
  display: flex; align-items: center; justify-content: center;
  z-index: 50;
}
.overlay[hidden] { display: none; }

.modal {
  background: var(--panel);
  border-radius: 12px;
  width: 560px;
  max-width: 94vw;
  max-height: 88vh;
  overflow-y: auto;
  padding: 20px 22px;
}
.modal h2 { margin-top: 0; font-size: 17px; }
.modal .field { margin-bottom: 12px; }
.modal label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
.modal input[type=text], .modal input[type=email], .modal input[type=tel], .modal select, .modal textarea {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 13.5px;
  font-family: inherit;
}
.modal label.check-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--ink);
  cursor: pointer;
}
.modal label.check-label input[type=checkbox] { width: 16px; height: 16px; }
.modal .row { display: flex; gap: 10px; }
.modal .row > .field { flex: 1; }
.modal .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.modal .chip {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  user-select: none;
}
.modal .chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.modal .modal-actions { display: flex; justify-content: space-between; margin-top: 18px; gap: 8px; }
.modal .color-row { display: flex; align-items: center; gap: 8px; }
.modal input[type=color] { width: 40px; height: 30px; border: 1px solid var(--border); border-radius: 6px; padding: 2px; }

/* ---------- Modal détail personne (consultation, lecture seule) ---------- */

.detail-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.detail-photo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #e4e6df center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
  color: var(--muted);
  overflow: hidden;
  flex: 0 0 auto;
}
.detail-photo img { width: 100%; height: 100%; object-fit: cover; }
.detail-head h2 { margin: 0; font-size: 18px; }
.detail-body { display: flex; flex-direction: column; gap: 12px; }
.detail-row { display: flex; flex-direction: column; gap: 2px; }
.detail-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--muted);
}
.detail-value { font-size: 14px; overflow-wrap: break-word; word-break: break-word; }
.detail-value a { color: var(--accent); font-weight: 600; }
.detail-body .badges { margin-top: 2px; }
.detail-body .badge-formation { font-size: 11px; padding: 2px 8px; }
.vacant-badge {
  display: inline-block;
  background: rgba(179, 38, 30, .12);
  color: var(--danger);
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
}

.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 8px; }
.admin-table th, .admin-table td { text-align: left; padding: 5px 6px; border-bottom: 1px solid var(--border); }
.admin-table th { font-size: 11px; text-transform: uppercase; color: var(--muted); }
.admin-table td.count { text-align: center; }
.admin-table tr.row-click { cursor: pointer; }
.admin-table tr.row-click:hover td { background: var(--accent-soft); }
.order-btns { display: flex; flex-direction: column; gap: 1px; }
.order-btns .btn { padding: 0 5px; line-height: 1.5; font-size: 11px; }

#toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: var(--ink); color: #fff; padding: 9px 16px; border-radius: 8px;
  font-size: 13px; z-index: 60; opacity: 0; pointer-events: none; transition: opacity .2s;
}
#toast.show { opacity: 1; }

.empty-state {
  position: absolute; top: 40%; left: 50%; transform: translate(-50%,-50%);
  text-align: center; color: #fff; opacity: .85; font-size: 14px;
}

@media (max-width: 640px) {
  header#topbar h1 { display: none; }
  header#topbar { flex-wrap: wrap; row-gap: 6px; padding: 8px 10px; }
  .person { width: 140px; }

  /* La fiche (détail ou édition) s'ouvre en plein écran sur téléphone, quel que soit le
     zoom/déplacement en cours sur l'organigramme - la fenêtre est hors du canevas transformé,
     donc son affichage n'est de toute façon jamais affecté par le niveau de zoom du fond. */
  .overlay { padding: 0; align-items: stretch; }
  .modal {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    padding: 16px 16px 20px;
  }
}