/* =========================================================
   COUTURIA — mlm-diagram.css
   Diagramme de réseau MLM binaire avec connecteurs dessinés en SVG
   (calculés en JS) plutôt qu'en bordures CSS : plus aucun débordement
   ou décalage possible, quel que soit le nombre de nœuds par niveau.
   ========================================================= */

.mlm-diagram-wrap{
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  border-radius: .75rem;
  background: var(--light-grey);
  padding: 1.25rem .5rem;
}

.mlm-diagram{
  position: relative;
  min-width: max-content;
  margin: 0 auto;
}

/* Responsive : masque les niveaux profonds.
   Le nombre de niveaux visibles est contrôlé par le <select>#mlm-level-select
   (js mlm-diagram.js) : 0=adapté à l'écran, 1..5=manuel, 99=tout.
   défaut = 3 niveaux. Les lignes au-delà sont masquées (.mlm-level-hidden). */
.mlm-row.mlm-level-hidden{
  display: none;
}

.mlm-diagram svg{
  position: absolute;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 1;
}

.mlm-row{
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 1.75rem;
  margin-bottom: 2.25rem;
}
.mlm-row:last-child{ margin-bottom: 0; }

/* Niveaux profonds (4-5) : espacement réduit pour compacter une rangée
   de 16 / 32 emplacements. */
.mlm-row[data-level="4"],
.mlm-row[data-level="5"]{
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.mlm-node{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  background: #fff;
  border: 2px solid var(--border-c);
  border-radius: .75rem;
  padding: .55rem .85rem;
  width: 108px;
  text-align: center;
  flex-shrink: 0;
}

/* Nœuds compacts pour les niveaux profonds (4-5) : on garde un diagramme
   lisible même lorsqu'un niveau comporte 16 (niv.4) ou 32 (niv.5) emplacements. */
.mlm-node.is-compact{
  width: 64px;
  padding: .45rem .35rem;
  gap: .15rem;
}
.mlm-node.is-compact img{
  width: 24px; height: 24px; margin-bottom: 0;
}
.mlm-node.is-compact .mn-name{ font-size: .62rem; line-height: 1.15; }
.mlm-node.is-compact .mn-info{ font-size: .52rem; }
.mlm-node.is-empty.is-compact{
  min-height: 44px;
  justify-content: center;
  padding: .35rem;
}

/* Badge « +N » : membres supplémentaires au-delà des premiers filleuls affichés. */
.mlm-node .mn-extra{
  position: absolute;
  top: -9px; right: -9px;
  min-width: 24px;
  text-align: center;
  background: var(--navy);
  color: #fff;
  font-size: .6rem;
  font-weight: 700;
  line-height: 1.2;
  border-radius: 999px;
  padding: .18rem .5rem;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
  z-index: 3;
}
[data-theme="dark"] .mlm-node .mn-extra{
  border-color: var(--canvas);
}
.mlm-node.is-root{
  border-color: var(--gold);
  background: rgba(var(--gold-rgb), .1);
  width: 128px;
  padding: .75rem 1rem;
}
.mlm-node img{
  width: 32px; height: 32px; border-radius: 50%; object-fit: cover; margin-bottom: .1rem;
}
.mlm-node .mn-name{ font-size: .72rem; font-weight: 700; color: var(--navy); line-height: 1.2; }
.mlm-node .mn-info{ font-size: .62rem; color: var(--muted); line-height: 1.2; }
.mlm-node.is-empty{
  border-style: dashed;
  color: var(--muted);
  justify-content: center;
  min-height: 58px;
}
.mlm-node.is-empty .mn-name{ color: var(--muted); font-weight: 500; font-size: .68rem; }

/* Nœud "agrégat" pour les niveaux profonds (3, 4, 5) : on résume plutôt
   que d'afficher 8, 16, 32 cartes individuelles — c'est ce qui évite
   tout débordement tout en restant lisible sur mobile. */
.mlm-agg-row{
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.mlm-agg-card{
  flex: 1 1 220px;
  max-width: 260px;
  background: #fff;
  border: 1px solid var(--border-c);
  border-radius: .75rem;
  padding: .85rem 1rem;
}
.mlm-agg-card .ac-level{
  font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--gold);
}
.mlm-agg-card .ac-count{ font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; color: var(--navy); margin: .15rem 0; }
.mlm-agg-card .ac-sub{ font-size: .72rem; color: var(--muted); }

/* Libellé d'information : niveaux actuellement affichés (mis à jour par le JS). */
.mlm-level-hint{
  font-size: .72rem;
  font-weight: 500;
  color: var(--muted);
  border: 1px solid var(--border-c);
  border-radius: 999px;
  padding: .25rem .7rem;
  white-space: nowrap;
}

/* Tableau récapitulatif des 5 niveaux */
.mlm-levels-table th, .mlm-levels-table td{ vertical-align: middle; }
.mlm-levels-table .lvl-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--navy); color: #fff; font-weight: 700; font-size: .75rem;
}