/* ======================================================
   organigramme.css - ENS-NDJ
   PCA centré en haut, scroll page principale
   ====================================================== */

/* ======================================================
   VARIABLES GLOBALES
   ====================================================== */

.organigramme-page {
    /* Couleurs */
    --org-card-bg: var(--color-background-white, #ffffff);
    --org-text: var(--color-text, #1a1a1a);
    --org-text-light: var(--color-text-muted, #666666);
    --org-border: var(--color-border, #dee2e6);
    --org-shadow: var(--shadow-sm, 0 0.0625rem 0.1875rem rgba(0,0,0,0.08));
    --org-shadow-hover: var(--shadow-md, 0 0.25rem 0.75rem rgba(0,0,0,0.15));
    
    /* Catégories */
    --cat-conseil: #7c3aed;
    --cat-direction: #dc2626;
    --cat-administratif: #2563eb;
    --cat-academique: #059669;
    --cat-consultatif: #8b5cf6;
    
    /* Lignes */
    --line-color: #64748b;
    --line-width: 0.125rem;
    
    /* Espacements flexibles */
    --level-gap: clamp(0.3rem, 3vw, 2rem);
    --connector-height: clamp(1rem, 2vw, 2rem);
    --cell-width: clamp(10rem, 10vw, 9rem);
    
    /* Photos par niveau */
    --photo-1: clamp(4rem, 8vw, 6rem);
    --photo-2: clamp(3.5rem, 7vw, 5rem);
    --photo-3: clamp(3rem, 6vw, 4.5rem);
    --photo-4: clamp(3rem, 6vw, 4.5rem);
    --photo-5: clamp(3rem, 6vw, 4.5rem);
    --photo-6: clamp(3rem, 6vw, 4.5rem);
    --photo-7: clamp(3rem, 6vw, 4.5rem);
    
    /* Cartes par niveau */
    --card-1: clamp(7rem, 14vw, 11rem);
    --card-2: clamp(6.5rem, 13vw, 10rem);
    --card-3: clamp(6rem, 12vw, 9rem);
    --card-4: clamp(6rem, 12vw, 9rem);
    --card-5: clamp(6rem, 12vw, 9rem);
    --card-6: clamp(6rem, 12vw, 9rem);
    --card-7: clamp(6rem, 12vw, 9rem);
    
    /* ══════════════════════════════════════════════════
       TYPOGRAPHIE - FRANÇAIS (par défaut)
       ══════════════════════════════════════════════════ */
    --font-title: clamp(1.25rem, 2.5vw, 1.75rem);
    --font-subtitle: clamp(0.8rem, 1.5vw, 0.95rem);
    --font-card-name: clamp(0.6rem, 1.1vw, 0.85rem);
    --font-card-title: clamp(0.55rem, 1vw, 0.8rem);
    --font-badge: clamp(0.5rem, 0.9vw, 0.75rem);
    --font-legal: clamp(0.65rem, 1.2vw, 0.8rem);
    
    /* Line-height */
    --line-height-base: 1.4;
}

/* ══════════════════════════════════════════════════════════
   TYPOGRAPHIE - ARABE (surcharge)
   L'arabe nécessite des tailles plus grandes pour la lisibilité
   ══════════════════════════════════════════════════════════ */

[dir="rtl"] .organigramme-page,
[lang="ar"] .organigramme-page,
.lang-ar .organigramme-page {
    /* Titres : +15% */
    --font-title: clamp(1.4rem, 2.8vw, 2rem);
    --font-subtitle: clamp(0.9rem, 1.7vw, 1.1rem);
    
    /* Cartes : +20% */
    --font-card-name: clamp(0.7rem, 1.3vw, 1rem);
    --font-card-title: clamp(0.65rem, 1.2vw, 0.95rem);
    --font-badge: clamp(0.55rem, 1vw, 0.85rem);
    
    /* Textes secondaires : +10% */
    --font-legal: clamp(0.7rem, 1.3vw, 0.9rem);
    
    /* Line-height plus grand pour l'arabe */
    --line-height-base: 1.6;
    
    /* Police arabe (optionnel - si vous avez une police spécifique) */
    /* --font-family-ar: 'Noto Sans Arabic', 'Cairo', 'Tajawal', sans-serif; */
}

/* ======================================================
   BARRE DE DÉFILEMENT PERSONNALISÉE
   ====================================================== */

/* Variables pour la scrollbar */
.organigramme-page {
    --scrollbar-width: 10px;
    --scrollbar-track: #e2e8f0;        /* Fond de la piste */
    --scrollbar-thumb: #dc2626;        /* Couleur du curseur (rouge ENS) */
    --scrollbar-thumb-hover: #b91c1c;  /* Couleur au survol */
}

/* Firefox */
.right-main-content {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* Chrome, Safari, Edge (Webkit) */
.right-main-content::-webkit-scrollbar {
    width: var(--scrollbar-width);
    height: var(--scrollbar-width);
}

.right-main-content::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    border-radius: 5px;
}

.right-main-content::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 5px;
    border: 2px solid var(--scrollbar-track);
}

.right-main-content::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

/* Coin entre les deux scrollbars */
.right-main-content::-webkit-scrollbar-corner {
    background: var(--scrollbar-track);
}

/* ── Dark Mode ── */
@media (prefers-color-scheme: dark) {
    .organigramme-page {
        --scrollbar-track: #1e293b;
        --scrollbar-thumb: #ef4444;
        --scrollbar-thumb-hover: #f87171;
    }
}

/* ======================================================
   OVERRIDE CONTENEURS PARENTS - SCROLL FIXE EN BAS
   ====================================================== */

/* Pas de scroll sur html/body */
html, body {
    overflow-x: hidden;
    overflow-y: hidden;
    height: 100vh;
}

/* Le conteneur principal droit = zone de scroll */
.right-main-content {
    height: 100vh;
    overflow-x: auto !important;
    overflow-y: auto !important;
    /* La scrollbar horizontale sera toujours en bas de ce conteneur */
}

/* Le main-content laisse passer le contenu large */
.main-content,
#main-content {
    overflow: visible !important;
    min-width: max-content; /* Permet au contenu de dépasser */
}

/* ======================================================
   LEFT-PANEL : RESTE ABSOLUMENT FIXE
   ====================================================== */

.left-panel {
    position: fixed !important;
    z-index: 1001 !important;
}

/* ======================================================
   HEADER FIXE HORIZONTALEMENT (dans right-main-content)
   Utilise inset-inline-start pour compatibilité RTL
   ====================================================== */

.right-fixed-header {
    position: sticky;
    inset-inline-start: 0; /* left en LTR, right en RTL */
    top: 0;
    z-index: 1000;
    background: var(--color-background-white, #ffffff);
    width: calc(100vw - var(--sidebar-width, 260px));
    max-width: calc(100vw - var(--sidebar-width, 260px));
}

/* Le breadcrumb aussi */
.breadcrumb-wrapper,
.breadcrumb-section,
nav[aria-label="breadcrumb"] {
    position: sticky;
    inset-inline-start: 0;
    background: var(--color-background, #f8f9fa);
    width: calc(100vw - var(--sidebar-width, 260px));
    max-width: calc(100vw - var(--sidebar-width, 260px));
}

/* Le footer global aussi */
.right-fixed-footer {
    position: sticky;
    inset-inline-start: 0;
    width: calc(100vw - var(--sidebar-width, 260px));
    max-width: calc(100vw - var(--sidebar-width, 260px));
}

/* ======================================================
   PAGE PRINCIPALE
   ====================================================== */

.organigramme-page {
    padding: var(--space-md, 1rem);
    background: var(--color-background, #f8f9fa);
    min-height: 100vh;
    overflow: visible;
}

/* ======================================================
   EN-TÊTE ORGANIGRAMME (FIXE HORIZONTALEMENT)
   ====================================================== */

.org-header {
    position: sticky;
    inset-inline-start: 0;
    width: calc(100vw - var(--sidebar-width, 260px) - 2rem);
    max-width: calc(100vw - var(--sidebar-width, 260px) - 2rem);
    padding: clamp(0.5rem, 2vw, 1rem) 0;
    margin-bottom: clamp(1.5rem, 3vw, 2rem);
    background: var(--color-background, #f8f9fa);
    z-index: 10;
    text-align: center;
}

.org-title {
    font-size: var(--font-title);
    font-weight: 700;
    color: var(--org-text);
    margin-bottom: 0.5em;
    line-height: var(--line-height-base, 1.4);
}

.org-title i {
    color: var(--cat-direction);
    margin-right: 0.4em;
}

.org-subtitle {
    font-size: var(--font-subtitle);
    color: var(--org-text-light);
    margin-bottom: 0.3em;
    line-height: var(--line-height-base, 1.4);
}

.org-legal {
    font-size: var(--font-legal);
    color: var(--org-text-light);
    line-height: var(--line-height-base, 1.4);
}

.org-legal i {
    margin-right: 0.3em;
}

/* ======================================================
   CONTENEUR ARBRE
   ====================================================== */

.org-wrapper {
    width: 100%;
    overflow: visible;
    padding: clamp(0.5rem, 2vw, 1rem) 0;
    position: relative;
}

/* Bouton flottant pour recentrer sur le PCA */
.btn-center-pca {
    position: sticky;
    inset-inline-end: 1rem; /* À droite en LTR, à gauche en RTL */
    top: 0;
    z-index: 100;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background: var(--cat-direction, #dc2626);
    color: white;
    border: none;
    border-radius: 2rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 0.25rem 1rem rgba(220, 38, 38, 0.4);
    transition: all 0.3s ease;
    float: inline-end; /* float: right en LTR, float: left en RTL */
    margin-bottom: 1rem;
    margin-inline-start: auto; /* Pousse le bouton vers la fin */
}

.btn-center-pca:hover {
    background: #b91c1c;
    transform: scale(1.05);
    box-shadow: 0 0.35rem 1.2rem rgba(220, 38, 38, 0.5);
}

.btn-center-pca i {
    font-size: 0.9rem;
}

.org-tree {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: max-content;
    padding: 0 clamp(1rem, 3vw, 2rem);
    clear: both;
}

/* ======================================================
   NIVEAU
   ====================================================== */

.org-level {
    position: relative;
    margin-bottom: var(--level-gap);
    width: 100%;
}

.org-level:last-child {
    margin-bottom: 0;
}

.level-row {
    position: relative;
    display: block;
}

.level-connectors {
    position: absolute;
    pointer-events: none;
    overflow: visible;
}

/* ======================================================
   CARTE WRAPPER
   ====================================================== */

.card-wrapper {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: var(--cell-width);
}

/* Connecteurs verticaux */
.connector-up,
.connector-down {
    width: var(--line-width);
    height: var(--connector-height);
    background: var(--line-color);
}

/* ======================================================
   CARTE
   ====================================================== */

.org-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(0.5rem, 1.2vw, 1rem);
    background: var(--org-card-bg);
    border-radius: clamp(0.6rem, 1.2vw, 0.875rem);
    box-shadow: var(--org-shadow);
    position: relative;
    text-align: center;
    transition: all 0.3s ease;
    border: 0.125rem solid transparent;
    cursor: pointer;
    animation: cardAppear 0.4s ease forwards;
    opacity: 0;
    z-index: 1;
}

@keyframes cardAppear {
    from { opacity: 0; transform: translateY(0.625rem) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.org-card:hover {
    transform: translateY(-0.3rem);
    box-shadow: var(--org-shadow-hover);
    border-color: var(--card-color);
    z-index: 9999;
}

.org-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0.3rem;
    background: var(--card-color);
    border-radius: 0.875rem 0.875rem 0 0;
}

/* ======================================================
   TAILLES PAR NIVEAU
   ====================================================== */

.card-level-1 { width: var(--card-1); }
.card-level-1 .card-photo { width: var(--photo-1); height: var(--photo-1); }
.card-level-1 .card-title { font-size: var(--font-card-title); }
.card-level-1 .card-person { font-size: var(--font-card-name); }
.card-level-1 .card-badge { font-size: var(--font-badge); }
.card-level-1 .photo-empty { font-size: clamp(1.5rem, 3vw, 2.2rem); }

.card-level-2 { width: var(--card-2); }
.card-level-2 .card-photo { width: var(--photo-2); height: var(--photo-2); }
.card-level-2 .card-title { font-size: calc(var(--font-card-title) * 0.95); }
.card-level-2 .card-person { font-size: calc(var(--font-card-name) * 0.95); }
.card-level-2 .card-badge { font-size: calc(var(--font-badge) * 0.95); }
.card-level-2 .photo-empty { font-size: clamp(1.3rem, 2.5vw, 1.9rem); }

.card-level-3 { width: var(--card-3); }
.card-level-3 .card-photo { width: var(--photo-3); height: var(--photo-3); }
.card-level-3 .card-title { font-size: calc(var(--font-card-title) * 0.9); }
.card-level-3 .card-person { font-size: calc(var(--font-card-name) * 0.9); }
.card-level-3 .card-badge { font-size: calc(var(--font-badge) * 0.9); }
.card-level-3 .photo-empty { font-size: clamp(1.1rem, 2vw, 1.6rem); }

.card-level-4 { width: var(--card-4); }
.card-level-4 .card-photo { width: var(--photo-4); height: var(--photo-4); }
.card-level-4 .card-title { font-size: calc(var(--font-card-title) * 0.85); }
.card-level-4 .card-person { font-size: calc(var(--font-card-name) * 0.85); }
.card-level-4 .card-badge { font-size: calc(var(--font-badge) * 0.85); }
.card-level-4 .photo-empty { font-size: clamp(0.95rem, 1.8vw, 1.4rem); }

.card-level-5 { width: var(--card-5); }
.card-level-5 .card-photo { width: var(--photo-5); height: var(--photo-5); }
.card-level-5 .card-title { font-size: calc(var(--font-card-title) * 0.8); }
.card-level-5 .card-person { font-size: calc(var(--font-card-name) * 0.8); }
.card-level-5 .card-badge { font-size: calc(var(--font-badge) * 0.8); }
.card-level-5 .photo-empty { font-size: clamp(0.85rem, 1.5vw, 1.2rem); }

.card-level-6 { width: var(--card-6); }
.card-level-6 .card-photo { width: var(--photo-6); height: var(--photo-6); }
.card-level-6 .card-title { font-size: calc(var(--font-card-title) * 0.75); }
.card-level-6 .card-person { font-size: calc(var(--font-card-name) * 0.75); }
.card-level-6 .card-badge { font-size: calc(var(--font-badge) * 0.75); }
.card-level-6 .photo-empty { font-size: clamp(0.75rem, 1.3vw, 1rem); }

.card-level-7 { width: var(--card-7); }
.card-level-7 .card-photo { width: var(--photo-7); height: var(--photo-7); }
.card-level-7 .card-title { font-size: calc(var(--font-card-title) * 0.7); }
.card-level-7 .card-person { font-size: calc(var(--font-card-name) * 0.7); }
.card-level-7 .card-badge { font-size: calc(var(--font-badge) * 0.7); }
.card-level-7 .photo-empty { font-size: clamp(0.65rem, 1.1vw, 0.9rem); }

/* ======================================================
   BADGE
   ====================================================== */

.card-badge {
    position: absolute;
    top: -0.7rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--card-color);
    color: white;
    font-weight: 700;
    padding: clamp(0.15rem, 0.4vw, 0.3rem) clamp(0.4rem, 0.8vw, 0.7rem);
    border-radius: 1.5rem;
    white-space: nowrap;
    box-shadow: 0 0.15rem 0.4rem rgba(0, 0, 0, 0.2);
    z-index: 2;
}

/* ======================================================
   ÉLÉMENTS CARTE
   ====================================================== */

.card-person {
    order: 1;
    margin-bottom: clamp(0.25rem, 0.6vw, 0.4rem);
    min-height: 1.2em;
    line-height: var(--line-height-base, 1.4);
}

.person-name {
    color: var(--org-text);
    font-weight: 600;
    font-size: var(--font-card-name);
}

.person-vacant {
    color: var(--org-text-light);
    font-style: italic;
    font-size: calc(var(--font-card-name) * 0.9);
}

.card-photo {
    order: 2;
    border-radius: 50%;
    overflow: hidden;
    border: clamp(0.15rem, 0.35vw, 0.25rem) solid var(--org-card-bg);
    box-shadow: 0 0.2rem 0.7rem rgba(0, 0, 0, 0.12);
    margin: clamp(0.2rem, 0.5vw, 0.35rem) 0;
    position: relative;
    background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
}

.card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-empty {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
    color: #94a3b8;
}

.status-indicator {
    position: absolute;
    bottom: 0.15rem;
    right: 0.15rem;
    width: clamp(0.5rem, 1vw, 0.8rem);
    height: clamp(0.5rem, 1vw, 0.8rem);
    border-radius: 50%;
    border: 0.15rem solid var(--org-card-bg);
}

.status-indicator.active { background: #22c55e; }
.status-indicator.vacant { background: #f59e0b; }

.card-title {
    order: 3;
    font-weight: 500;
    font-size: var(--font-card-title);
    color: var(--org-text-light);
    line-height: var(--line-height-base, 1.4);
    margin-top: clamp(0.2rem, 0.5vw, 0.3rem);
}

.card-email {
    order: 4;
    color: var(--org-text-light);
    font-size: clamp(0.6rem, 1.1vw, 0.85rem);
    margin-top: clamp(0.2rem, 0.5vw, 0.3rem);
    transition: color 0.2s;
}

.card-email:hover {
    color: var(--card-color);
}

/* ======================================================
   COULEURS CATÉGORIES
   ====================================================== */

.cat-conseil { --card-color: var(--cat-conseil); }
.cat-direction { --card-color: var(--cat-direction); }
.cat-administratif { --card-color: var(--cat-administratif); }
.cat-academique { --card-color: var(--cat-academique); }
.cat-consultatif { --card-color: var(--cat-consultatif); }

/* ======================================================
   TOOLTIP
   ====================================================== */

.card-tooltip {
    position: absolute;
    top: 50%;
    left: calc(100% + 0.8rem);
    transform: translateY(-50%);
    width: clamp(13rem, 22vw, 16rem);
    background: #1e293b;
    color: #f1f5f9;
    border-radius: 0.7rem;
    box-shadow: 0 0.7rem 2.5rem rgba(0, 0, 0, 0.4);
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.25s ease;
    transform: translateY(-50%) translateX(0.5rem);
    overflow: hidden;
}

.card-tooltip::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 100%;
    transform: translateY(-50%);
    border: 0.6rem solid transparent;
    border-right-color: #1e293b;
}

.tooltip-header {
    background: var(--card-color, #2563eb);
    padding: clamp(0.4rem, 0.9vw, 0.6rem) clamp(0.6rem, 1.1vw, 0.85rem);
}

.tooltip-header strong {
    display: block;
    font-size: calc(var(--font-card-name) * 1.1);
    color: #fff;
    font-weight: 600;
    line-height: var(--line-height-base, 1.4);
}

.tooltip-body {
    padding: clamp(0.4rem, 0.9vw, 0.6rem) clamp(0.6rem, 1.1vw, 0.85rem);
    font-size: var(--font-card-title);
    line-height: var(--line-height-base, 1.5);
    color: #cbd5e1;
}

.org-card:hover .card-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}

/* ======================================================
   FOOTER ORGANIGRAMME (FIXE HORIZONTALEMENT)
   ====================================================== */

.org-footer {
    position: sticky;
    inset-inline-start: 0;
    width: calc(100vw - var(--sidebar-width, 260px) - 2rem);
    max-width: calc(100vw - var(--sidebar-width, 260px) - 2rem);
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: clamp(1rem, 2.5vw, 2rem);
    margin-top: clamp(1.5rem, 3.5vw, 2.5rem);
    padding-top: clamp(1rem, 2vw, 1.5rem);
    flex-wrap: wrap;
    background: var(--color-background, #f8f9fa);
}

.org-legend {
    flex: 1;
    max-width: min(100%, 35rem);
    padding: clamp(0.6rem, 1.8vw, 1.2rem);
    background: var(--org-card-bg);
    border-radius: 0.7rem;
    box-shadow: var(--org-shadow);
}

.legend-content {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: clamp(1rem, 2.5vw, 2rem);
}

.legend-group {
    display: flex;
    flex-direction: column;
    gap: clamp(0.25rem, 0.6vw, 0.4rem);
}

.legend-title {
    font-weight: 600;
    font-size: clamp(0.7rem, 1.3vw, 0.85rem);
    color: var(--org-text);
    margin-bottom: 0.2em;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: clamp(0.3rem, 0.6vw, 0.5rem);
    font-size: clamp(0.6rem, 1.2vw, 0.78rem);
    color: var(--org-text-light);
}

.dot {
    width: clamp(0.5rem, 0.9vw, 0.65rem);
    height: clamp(0.5rem, 0.9vw, 0.65rem);
    border-radius: 50%;
    flex-shrink: 0;
}

.dot.filled { background: #22c55e; }
.dot.vacant { background: #f59e0b; }

.color-box {
    width: clamp(0.7rem, 1.1vw, 0.9rem);
    height: clamp(0.7rem, 1.1vw, 0.9rem);
    border-radius: 0.2rem;
    flex-shrink: 0;
}

.legend-divider {
    width: 0.0625rem;
    height: clamp(3.5rem, 7vw, 5rem);
    background: var(--org-border);
}

.org-stats {
    display: flex;
    gap: clamp(0.6rem, 1.4vw, 1rem);
}

.stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(0.6rem, 1.4vw, 1rem) clamp(1rem, 2vw, 1.5rem);
    background: var(--org-card-bg);
    border-radius: 0.7rem;
    box-shadow: var(--org-shadow);
    min-width: clamp(5rem, 10vw, 7rem);
}

.stat-card i {
    font-size: clamp(1rem, 1.8vw, 1.4rem);
    color: var(--cat-direction);
    margin-bottom: clamp(0.25rem, 0.6vw, 0.4rem);
}

.stat-value {
    font-size: clamp(1.2rem, 2.3vw, 1.6rem);
    font-weight: 700;
    color: var(--org-text);
}

.stat-label {
    font-size: clamp(0.55rem, 1.1vw, 0.75rem);
    color: var(--org-text-light);
    text-transform: uppercase;
}

/* État vide */
.org-empty {
    text-align: center;
    padding: clamp(2rem, 5vw, 4rem);
    color: var(--org-text-light);
}

.org-empty i {
    font-size: clamp(2rem, 5vw, 4rem);
    opacity: 0.4;
    margin-bottom: 1.2rem;
}

/* ======================================================
   DARK MODE
   ====================================================== */

@media (prefers-color-scheme: dark) {
    .organigramme-page {
        --org-card-bg: var(--color-background-white, #1e1e1e);
        --org-text: var(--color-text, #e0e0e0);
        --org-text-light: var(--color-text-muted, #999);
        --org-border: var(--color-border, #444);
        --line-color: #5a6a7a;
    }
    
    .org-header,
    .org-footer {
        background: var(--color-background, #121212);
    }
    
    .card-photo {
        border-color: var(--org-card-bg);
        background: linear-gradient(135deg, #334155, #475569);
    }
    
    .photo-empty {
        background: linear-gradient(135deg, #334155, #475569);
        color: #64748b;
    }
    
    .card-tooltip {
        background: #0f172a;
    }
    
    .card-tooltip::after {
        border-right-color: #0f172a;
    }
    
    .btn-center-pca {
        box-shadow: 0 0.25rem 1rem rgba(220, 38, 38, 0.6);
    }
}

/* ======================================================
   RTL - Ajustements spécifiques
   (Les propriétés logiques gèrent automatiquement le reste)
   ====================================================== */

/* ── Icônes - inverser les marges ── */
[dir="rtl"] .org-title i,
[dir="rtl"] .org-legal i {
    margin-right: 0;
    margin-left: 0.4em;
}

[dir="rtl"] .org-legal i {
    margin-right: 0;
    margin-left: 0.3em;
}

/* ── Légende ── */
[dir="rtl"] .legend-item {
    flex-direction: row-reverse;
}

/* ── Tooltip - position inversée ── */
[dir="rtl"] .card-tooltip {
    left: auto;
    right: calc(100% + 0.8rem);
    text-align: right;
}

[dir="rtl"] .card-tooltip::after {
    right: auto;
    left: 100%;
    border-right-color: transparent;
    border-left-color: #1e293b;
}

/* ======================================================
   RESPONSIVE
   ====================================================== */

/* Tablette et mobile : le sidebar disparaît */
@media (max-width: 991.98px) {
    /* Quand le sidebar disparaît, largeur = 100vw */
    .right-fixed-header,
    .breadcrumb-wrapper,
    .breadcrumb-section,
    nav[aria-label="breadcrumb"],
    .right-fixed-footer {
        width: 100vw;
        max-width: 100vw;
    }
    
    .org-header,
    .org-footer {
        width: calc(100vw - 2rem);
        max-width: calc(100vw - 2rem);
    }
    
    .btn-center-pca {
        inset-inline-end: 1rem;
    }
    
    .org-footer {
        flex-direction: column;
        align-items: center;
    }
    
    .org-legend {
        max-width: 100%;
    }
    
    .org-stats {
        justify-content: center;
    }
}

@media (max-width: 767.98px) {
    /* Sur mobile */
    html, body {
        height: auto;
        overflow-y: auto;
    }
    
    .right-main-content {
        height: auto;
        overflow-x: auto !important;
    }
    
    .btn-center-pca {
        position: fixed;
        inset-inline-start: auto;
        inset-inline-end: 1rem;
        bottom: 5rem;
        top: auto;
        float: none;
        margin: 0;
        padding: 0.6rem;
        border-radius: 50%;
    }
    
    .btn-center-pca span {
        display: none;
    }
    
    .btn-center-pca i {
        font-size: 1.1rem;
    }
    
    .legend-content {
        flex-direction: column;
        align-items: center;
    }
    
    .legend-group {
        align-items: center;
    }
    
    .legend-divider {
        width: 80%;
        height: 0.0625rem;
    }
    
    .stat-card {
        flex: 1;
    }
    
    .card-tooltip {
        position: fixed;
        bottom: 1.5rem;
        left: 50% !important;
        right: auto !important;
        top: auto;
        transform: translateX(-50%);
        width: calc(100% - 3rem);
        max-width: 18rem;
    }
    
    .card-tooltip::after {
        display: none;
    }
    
    .org-card:hover .card-tooltip {
        transform: translateX(-50%);
    }
    
    [dir="rtl"] .card-tooltip {
        left: 50% !important;
        right: auto !important;
    }
}

/* ======================================================
   PRINT
   ====================================================== */

@media print {
    .organigramme-page {
        background: white !important;
        overflow: visible !important;
    }
    
    .org-card {
        box-shadow: none !important;
        border: 0.0625rem solid #ccc;
    }
    
    .card-tooltip {
        display: none !important;
    }
    
    .org-header,
    .org-footer {
        position: static;
    }
}