/* Credipro — feuille de style de l'organigramme.
  Fichier NOUVEAU et strictement isole : app.css et vitrine.css ne sont pas modifies.
   Tous les visuels s'appuient sur les memes variables que le reste de l'application,
   afin que le rendu soit identique en theme clair et sombre. */

/* ---------- Noeud personne ---------- */
.org-noeud {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 12px 7px 8px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--ombre-1); cursor: pointer;
  transition: box-shadow var(--transition), transform 80ms, border-color var(--transition);
  max-width: 280px; text-align: left; font: inherit; color: var(--text);
}
.org-noeud:hover { box-shadow: var(--ombre-2); transform: translateY(-1px); border-color: var(--c, var(--border-2)); }
.org-noeud .avatar { --taille: 34px; }
.org-noeud .avatar.lg { --taille: 44px; }
.org-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.org-txt b { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.org-txt small { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.org-meta { display: flex; align-items: center; gap: 5px; margin-top: 2px; }

/* ---------- Niveaux & connecteurs ---------- */
.org-niveau { display: flex; flex-direction: column; align-items: center; }
.org-lien { width: 2px; height: 16px; background: var(--border-2); border-radius: 2px; flex: none; }
.org-lien-haut { height: 10px; }
.org-ligne { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.org-lien-bas { width: 2px; height: 14px; background: var(--border-2); border-radius: 2px; }
.org-tete-niveau {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 16px; border-radius: 999px; font-size: 13.5px;
  background: var(--brand); color: #fff; font-weight: 650;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 8px 18px -10px var(--brand);
}
.org-tete-niveau .icone { width: 16px; height: 16px; }

/* ---------- Direction ---------- */
.org-direction { margin-bottom: 22px; }
.org-direction > .org-ligne { flex-direction: column; gap: 0; }

/* ---------- Entite juridique ---------- */
.org-entites { display: flex; flex-direction: column; gap: 20px; }
.org-entite {
  border: 1px solid var(--border); border-radius: var(--r);
  background: var(--surface); box-shadow: var(--ombre-1);
  border-top: 3px solid var(--ec, var(--brand)); overflow: hidden;
}
.org-entite-tete { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.org-entite-tete h2 { font-size: 15.5px; }
.org-entite-corps { padding: 16px 18px; display: flex; flex-direction: column; gap: 16px; background: var(--surface-2); }

/* ---------- Boutique ---------- */
.org-boutique {
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); overflow: hidden;
}
.org-boutique-tete {
  display: flex; align-items: center; gap: 8px; padding: 9px 13px;
  background: var(--surface-3); border-bottom: 1px solid var(--border); font-size: 13px;
}
.org-boutique-tete b { font-weight: 650; }
.org-count {
  margin-left: auto; min-width: 22px; text-align: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; padding: 0 7px; font-size: 11.5px; font-weight: 650; color: var(--text-2);
}
.org-boutique-corps { padding: 12px 13px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.org-niveau-1, .org-niveau-2 { width: 100%; }

/* ---------- Equipes ---------- */
.org-equipe { width: 100%; border: 1px dashed var(--border-2); border-radius: var(--r-sm); overflow: hidden; background: var(--surface-2); }
.org-equipe-tete {
  display: flex; align-items: center; gap: 7px; padding: 7px 11px;
  font-size: 12px; font-weight: 650; color: var(--text-2);
  background: var(--surface-3); border-bottom: 1px solid var(--border);
}
.org-equipe-tete .icone { width: 14px; height: 14px; }
.org-equipe-tete .org-count { margin-left: auto; }
.org-cat-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--text-3)); flex: none; }
.org-equipe-corps { display: flex; flex-wrap: wrap; gap: 8px; padding: 11px; justify-content: center; }

/* ---------- Adaptation petit ecran ---------- */
@media (max-width: 720px) {
  .org-noeud { max-width: 100%; }
  .org-boutique-corps { padding: 10px; }
  .org-entite-corps { padding: 12px; }
}