/* ═══════════════════════════════════════════════════════════════
   iManage — relation-tree (v1.5.0)
   Arbre horizontal pour représenter une hiérarchie 2-3 niveaux
   (typiquement Rôle → Missions → Processus dans MyQMa).
   Connecteurs SVG, cards cliquables, fallback mobile vertical.

   v1.5.0 — Hover dim animé ease-in-out (.rt-node--dim, .rt-conn--dim).
             Ajout de opacity dans la transition base .rt-node pour que
             le retour au plein opaque soit aussi fluide.
   v1.5.1 — Fix dim bloqué par animation-fill-mode:both : opacity !important
             sur .rt-node--dim et .rt-conn--dim pour overrider le forward-fill
             du keyframe rt-card-in (opacity:1) qui prenait le dessus en cascade.
             Ajout opacity dans la transition de base .rt-connectors path.
═══════════════════════════════════════════════════════════════ */

.rt {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 64px;
    padding: 20px 8px 12px;
    min-width: max-content;
    overflow: visible;
}

/* Une colonne = un niveau (Role, Mission, Process) */
.rt-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 260px;
    max-width: 320px;
    position: relative;
    z-index: 2;
}
.rt-col-label {
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin: 0 0 4px 4px;
}

/* ── Carte d'un nœud ──────────────────────────────────────── */
.rt-node {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 280px;
    max-width: 280px;
    position: relative;
    box-shadow: var(--shadow-xs);
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.rt-node:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}
.rt-node:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Fond légèrement teinté par niveau (au lieu de bordure épaisse) */
.rt-node--role    { background: var(--accent-soft);   border-color: var(--accent-border); }
.rt-node--mission { background: var(--status-success-soft);  border-color: rgba(16,185,129,.22); }
.rt-node--process { background: var(--status-warning-soft);  border-color: rgba(245,158,11,.18); }

/* ── Header de carte (icône + nom + code) ──────────────── */
.rt-node-head {
    display: flex;
    align-items: center;
    gap: 8px;
}
.rt-node-icon {
    width: 22px;
    height: 22px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: var(--font-size-xs);
}
.rt-node--role    .rt-node-icon { background: var(--accent-soft); color: var(--accent); }
.rt-node--mission .rt-node-icon { background: rgba(16,185,129,.12); color: var(--status-success); }
.rt-node--process .rt-node-icon { background: rgba(245,158,11,.12); color: var(--status-warning); }

.rt-node-name {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-md);
    line-height: 1.25;
    /* flex: none → le nom prend sa largeur naturelle, la pill suit immédiatement */
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
}
.rt-node-code {
    font-family: Menlo, Consolas, monospace;
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    background: var(--bg-subtle);
    padding: 2px 6px;
    border-radius: var(--radius-xs);
    letter-spacing: .5px;
    white-space: nowrap;
}

.rt-node-desc {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.45;
    margin-top: 2px;
}

/* ── Ligne meta : tags + compteurs ──────────────────── */
.rt-node-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.rt-tag {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: .3px;
    padding: 2px 7px;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.rt-tag--mand           { background: var(--status-warning-soft); color: #92400E; }
.rt-tag--opt            { background: var(--bg-subtle); color: var(--text-tertiary); }
.rt-tag--cat-leadership { background: #EDE9FE; color: #5B21B6; }
.rt-tag--cat-core       { background: #DBEAFE; color: #1E40AF; }
.rt-tag--cat-support    { background: #E0E7EF; color: var(--text-secondary); }
.rt-tag--docs           { background: var(--accent-soft); color: var(--accent); }

.rt-count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    font-weight: var(--font-weight-medium);
}
.rt-count strong { color: var(--text-primary); font-weight: 700; }

/* ── État vide d'une colonne ──────────────────────── */
.rt-empty {
    padding: 16px 18px;
    text-align: center;
    color: var(--text-tertiary);
    font-style: italic;
    background: var(--bg-subtle);
    border-radius: var(--radius-md);
    border: 1px dashed var(--border);
    font-size: var(--font-size-sm);
    width: 280px;
}

/* ── Connecteurs SVG ──────────────────────────────── */
.rt-connectors {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: visible;
}
.rt-connectors path {
    fill: none;
    stroke: var(--border-strong);
    stroke-width: 1.5;
    transition: stroke var(--transition-fast), stroke-width var(--transition-fast);
}
.rt-connectors path.rt-conn--highlight {
    stroke: var(--accent);
    stroke-width: 2;
}

/* ── Vue détail processus (pas d'arbre) ───────────── */
.rt-process-detail {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 18px 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.rt-process-detail h3 {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: .8px;
    margin: 0 0 10px;
}
.rt-process-detail .rt-field { margin-bottom: 8px; }
.rt-process-detail .rt-field label {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 2px;
}
.rt-process-detail .rt-field .rt-value {
    font-size: var(--font-size-base);
    color: var(--text-primary);
}

.rt-doclist { list-style: none; padding: 0; margin: 0; }
.rt-doclist li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px dashed var(--border);
}
.rt-doclist li:last-child { border-bottom: none; }
.rt-doclist li i { color: var(--accent); font-size: var(--font-size-base); width: 14px; }
.rt-doclist a {
    color: var(--text-primary);
    text-decoration: none;
    font-size: var(--font-size-sm);
    flex: 1;
}
.rt-doclist a:hover { color: var(--accent-hover); }
.rt-doclist .rt-doc-type {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: .4px;
}

/* ── Wrapper scrollable (le tree peut être large) ───── */
.rt-wrap {
    overflow-x: auto;
    overflow-y: visible;
    padding-bottom: 4px;
    margin: 0 -4px;
}
.rt-wrap::-webkit-scrollbar { height: 6px; }
.rt-wrap::-webkit-scrollbar-track { background: transparent; }
.rt-wrap::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-xs); }

/* ── Mobile fallback (≤ 768 px) : on cache le tree,
       affichage en accordéon vertical ─────────────── */
@media (max-width: 768px) {
    .rt-wrap.rt-has-fallback .rt { display: none; }
    .rt-fallback {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 8px 4px;
    }
    .rt-fallback-mission {
        padding: 12px;
        background: var(--bg-subtle);
        border-left: 3px solid var(--status-success);
        border-radius: var(--radius-sm);
    }
    .rt-fallback-mission-head {
        display: flex; align-items: center; gap: 8px;
        font-weight: var(--font-weight-semibold); font-size: var(--font-size-base);
        margin-bottom: 8px;
    }
    .rt-fallback-procs { list-style: none; padding: 0; margin: 0; }
    .rt-fallback-procs li {
        padding: 5px 8px;
        background: var(--bg-surface);
        border-left: 2px solid var(--status-warning);
        margin-bottom: 4px;
        font-size: var(--font-size-sm);
        cursor: pointer;
        border-radius: var(--radius-xs);
    }
    .rt-fallback-procs li:hover { background: var(--accent-soft); }
    .rt-process-detail { grid-template-columns: 1fr; gap: 14px; padding: 14px; }
}
@media (min-width: 769px) {
    .rt-fallback { display: none; }
}

/* ── Dark theme ──────────────────────────────────────
   Les tokens (--bg-surface, --border, --text-*) sont déjà swappés en dark
   par theme-toggle.css — ces règles consomment donc les bonnes valeurs sombres
   sans hardcoder de Slate. */
[data-theme="dark"] .rt-node            { background: var(--bg-surface); border-color: var(--border); }
[data-theme="dark"] .rt-node-name       { color: var(--text-primary); }
[data-theme="dark"] .rt-node-code       { background: var(--bg-content); color: var(--text-tertiary); }
[data-theme="dark"] .rt-node-desc       { color: var(--text-secondary); }
[data-theme="dark"] .rt-empty           { background: var(--bg-content); color: var(--text-secondary); border-color: var(--border); }
[data-theme="dark"] .rt-connectors path { stroke: var(--border-strong); }
[data-theme="dark"] .rt-process-detail  { background: var(--bg-surface); border-color: var(--border); }
[data-theme="dark"] .rt-process-detail .rt-value { color: var(--text-primary); }
[data-theme="dark"] .rt-doclist li      { border-color: var(--border); }
[data-theme="dark"] .rt-doclist a       { color: var(--text-primary); }

/* ═══════════════════════════════════════════════════════════════
   v1.1 — Audit refinements
═══════════════════════════════════════════════════════════════ */

/* ── #5 Légende couleurs ───────────────────────────────────── */
.rt-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 8px 12px;
    align-items: center;
    justify-content: center;
}
.rt-legend-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: .4px;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    color: var(--text-primary);
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    text-transform: uppercase;
}
.rt-legend-chip i { font-size: 9px; }
.rt-legend-chip--role    { color: var(--accent); border-color: var(--accent-border);  background: var(--accent-soft); }
.rt-legend-chip--mission { color: var(--status-success); border-color: rgba(16,185,129,.30); background: var(--status-success-soft); }
.rt-legend-chip--process { color: var(--status-warning); border-color: rgba(245,158,11,.30); background: var(--status-warning-soft); }

/* ── Codes masqués sur l'arbre (visuellement plus aéré) ─────
   Le code reste dans le DOM (data-id, aria-label) pour a11y/click,
   on le cache simplement par CSS. */
.rt-node .rt-node-code,
.rt-node--role .rt-node-code,
.rt-node--mission .rt-node-code,
.rt-node--process .rt-node-code {
    display: none;
}

/* ── Labels de colonne masqués (redondants avec la légende) ─── */
.rt-col-label {
    display: none;
}

/* Tuiles plus compactes — moins de padding, gap réduit */
.rt-node {
    padding: 10px 12px;
    gap: 2px;
}
.rt-node--mission,
.rt-node--process {
    padding-top: 10px;   /* on annule le padding-top extra (plus de code en haut-droite) */
}
.rt-node-name {
    font-size: var(--font-size-base);
}
.rt-node-desc {
    font-size: var(--font-size-sm);
    margin-top: 1px;
}
.rt-node-meta {
    margin-top: 4px;
    gap: 6px;
}
/* Le badge est maintenant un item flex dans le head (margin-left:auto).
   Plus besoin de padding-right réservé. */

/* ── #4 Animation d'entrée — stagger 60ms par card ──────── */
@keyframes rt-card-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.rt-node {
    animation: rt-card-in .35s cubic-bezier(.22, 1, .36, 1) both;
}
.rt-col > .rt-node:nth-child(1) { animation-delay: .04s; }
.rt-col > .rt-node:nth-child(2) { animation-delay: .10s; }
.rt-col > .rt-node:nth-child(3) { animation-delay: .16s; }
.rt-col > .rt-node:nth-child(4) { animation-delay: .22s; }
.rt-col > .rt-node:nth-child(5) { animation-delay: .28s; }
.rt-col > .rt-node:nth-child(6) { animation-delay: .34s; }
.rt-col > .rt-node:nth-child(7) { animation-delay: .40s; }
.rt-col > .rt-node:nth-child(8) { animation-delay: .46s; }
.rt-col > .rt-node:nth-child(n+9) { animation-delay: .50s; }

/* Connecteurs : fade-in après les cards */
.rt-connectors path {
    animation: rt-card-in .5s ease-out both;
    animation-delay: .35s;
}

/* Respecter prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .rt-node, .rt-connectors path { animation: none; }
    .rt-node:hover { transform: none; }
}

/* ── #3 Stroke connecteurs au survol : épaisseur+opacité ─── */
.rt-connectors path.rt-conn--highlight {
    stroke-width: 2.5;
    /* glow du lien surligné — tié à l'accent réel (était le faux #00B4D8) */
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 35%, transparent));
}

/* Dark theme refinements — chip générique en tokens, identités
   role/mission/process conservées (palette sémantique du composant). */
[data-theme="dark"] .rt-legend-chip            { background: var(--bg-content); border-color: var(--border); color: var(--text-primary); }
[data-theme="dark"] .rt-legend-chip--role      { background: var(--accent-soft);            color: #38bdf8; }
[data-theme="dark"] .rt-legend-chip--mission   { background: rgba(16,185,129,.10); color: #34d399; }
[data-theme="dark"] .rt-legend-chip--process   { background: rgba(245,158,11,.10); color: #fbbf24; }

/* ═══════════════════════════════════════════════════════════════
   v1.2 — Badge obligatoire absolu + pastille compteur inline
   v1.3 — padding-right porté sur .rt-node-head (pas .rt-node-name seul)
           → empêche la pill de déborder dans la zone du badge absolu.
═══════════════════════════════════════════════════════════════ */

/* ── Badge obligatoire — dernier item du flex row head ────────
   margin-left:auto → pousse au bord droit de la rangée.
   Le flex align-items:center du head le centre verticalement
   avec l'icône et le nom sans aucun positionnement absolu. */
.rt-badge-mand {
    margin-left: auto;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--status-warning-soft);
    color: #92400E;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs);
    cursor: default;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.rt-badge-mand:hover {
    background: #FDE68A;
    color: #78350F;
}

/* ── Pastille compteur inline dans le header ──────────────── */
.rt-count-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs);
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--radius-full);
    line-height: 1;
    flex-shrink: 0;
}
.rt-count-pill--role    { background: var(--accent-soft);   color: var(--accent); }
.rt-count-pill--mission { background: rgba(16,185,129,.12);  color: var(--status-success); }
.rt-count-pill--process { background: rgba(245,158,11,.12);  color: var(--status-warning); }

/* ── Dark mode : teintes de fond par type de nœud ────────────
   En dark mode le fond générique (#1e293b) écrase les teintes subtiles
   des nœuds colorés. On les réaffirme pour conserver la distinction visuelle. */
[data-theme="dark"] .rt-node--role    { background: color-mix(in srgb, var(--accent) 7%, transparent);  border-color: color-mix(in srgb, var(--accent) 22%, transparent); }
[data-theme="dark"] .rt-node--mission { background: rgba(16,185,129,.07); border-color: rgba(16,185,129,.25); }
[data-theme="dark"] .rt-node--process { background: rgba(245,158,11,.07); border-color: rgba(245,158,11,.22); }

/* Icônes par type — couleurs lumineuses pour contraste sur fond sombre */
[data-theme="dark"] .rt-node--role    .rt-node-icon { background: color-mix(in srgb, var(--accent) 18%, transparent);  color: #38BDF8; }
[data-theme="dark"] .rt-node--mission .rt-node-icon { background: rgba(16,185,129,.18); color: #34D399; }
[data-theme="dark"] .rt-node--process .rt-node-icon { background: rgba(245,158,11,.18); color: #FBBF24; }

/* ── Dark mode : badge + pill + tags colorés ──────────────── */
[data-theme="dark"] .rt-badge-mand               { background: rgba(251,191,36,.15);  color: #FCD34D; }
[data-theme="dark"] .rt-badge-mand:hover         { background: rgba(251,191,36,.28);  color: #FDE68A; }
[data-theme="dark"] .rt-tag--mand                { background: rgba(251,191,36,.12);  color: #FCD34D; }
[data-theme="dark"] .rt-tag--cat-leadership      { background: rgba(167,139,250,.12); color: #A78BFA; }
[data-theme="dark"] .rt-tag--cat-core            { background: rgba(96,165,250,.12);  color: #60A5FA; }
[data-theme="dark"] .rt-tag--cat-support         { background: rgba(148,163,184,.12); color: #94A3B8; }
[data-theme="dark"] .rt-tag--docs                { background: color-mix(in srgb, var(--accent) 12%, transparent);   color: #38BDF8; }
[data-theme="dark"] .rt-count-pill--role         { background: color-mix(in srgb, var(--accent) 15%, transparent);   color: #38BDF8; }
[data-theme="dark"] .rt-count-pill--mission      { background: rgba(16,185,129,.15);  color: #34D399; }
[data-theme="dark"] .rt-count-pill--process      { background: rgba(245,158,11,.15);  color: #FBBF24; }

/* ── État dim : nœuds et connecteurs non-concernés lors du hover mission ─── */
/* !important est nécessaire pour l'overrider animation-fill-mode:both qui
   conserve opacity:1 depuis le keyframe final de rt-card-in. Sans !important,
   l'animation (cascade "animation origin") écrase les styles auteur normaux. */
.rt-node--dim {
    opacity: 0.35 !important;
    transition: opacity var(--transition);
}
.rt-connectors path.rt-conn--dim {
    opacity: 0.12 !important;
    transition: opacity var(--transition);
}
/* Base node — inclut opacity pour que le retour au plein opaque soit aussi animé */
.rt-node {
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), opacity var(--transition);
}
/* Base path — opacity dans la transition pour animer le retour */
.rt-connectors path {
    transition: stroke var(--transition-fast), stroke-width var(--transition-fast), opacity var(--transition);
}