/* Fichier : organization.css */
:root {
    /* Couleurs principales */
    --color-primary: #092851;
    --color-primary-dark: #1e3d7b;
    --color-dark-blue: #092851;
    --color-orange: #f28c00;
    --color-accent: #f57c00;

    /* Textes et fonds */
    --color-text-dark: #333;
    --color-text-medium: #444;
    --color-text-light: #999;
    --color-row-even: #ffffff;
    --color-row-odd: #eeeeee;
    --color-row-hover: #d7dff2;

    /* Espacement */
    --no-spacing : 0;
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 15px;
    --spacing-lg: 20px;
    --spacing-xl: 30px;

    /* Rayons */
    --radius-sm: 10px;
    --radius-lg: 25px;

    /* Typographie */
    --font-family: 'Raleway', sans-serif;
    --font-size-sm: 12px;
    --font-size-md: 14px;
    --font-size-lg: 1.8rem;
}

/* =========================================================
   🧱 STRUCTURE GLOBALE
   ========================================================= */
* { box-sizing: border-box; }

body {
    margin: 0;
    padding-top: 0 !important;
    font-family: var(--font-family);
    color: var(--color-text-dark);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.organization-sidebar {
    flex: 0 0 250px;            /* distance depuis le haut */
    display: flex;         /* On passe en flex pour empiler proprement */
    flex-direction: column;
    align-self: flex-start; /* IMPORTANT dans un layout flex */
    height: fit-content;
    margin-top: 100px;
    gap: 70px;
    margin-right: 100px;
}

.sidebar-title {
    font-size: 1.8em;
    font-weight: 800;
    color: rgba(40, 143, 226, 1);
    margin-bottom: 40px;
    letter-spacing: 1px;
}

.sidebar-menu {
    width: 100%;
    text-align: left;
    margin-bottom: 0;
}

nav.sidebar-menu {
    padding: 0; /* Réinitialise le padding */
}

/* MENU LISTE */
.sidebar-menu ul {
    list-style: none;            /* supprime les puces */
    margin: 0;
    padding: 0px;         /* 🔸 retrait du contenu */
    width: 100%;
}

.sidebar-menu li {
    display: block;
    width: 100%;
    text-transform: none;
}

.sidebar-menu a {
    color: #707070;
    text-decoration: none;
    font-size: 1.1em;
    padding: 5px 0;
    transition: color 0.3s ease;
    text-align: left;
    display: block;
    text-transform: none;       /* ✅ casse normale */
    position: relative;         /* nécessaire pour le ::before */
}

.sidebar-menu a:hover {
    color: orange;
}

/* --- SECTION DE TÉLÉCHARGEMENT --- */
.sidebar-downloads {
    width: 100%;
    padding: 10px 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    margin-top: 10px;
}


/* --- Ligne horizontale --- */
.sidebar-hr {
    border: none;
    border-top: 1px solid rgba(11, 41, 81, 1);
    opacity: 1;
    margin: 10px 0; /* 20px d'espace en haut et en bas */
    width: 100%;
    display: block;
}

.large-download-icon {
    /*font-size: 4em; !* grosse icône *!*/
    color: rgba(11, 41, 81, 1);
    transition: transform 0.3s ease, color 0.3s ease;
    vertical-align: middle;
    margin-right: 0;
    width: 80px; /* Ajuste la taille ici */
    height: auto;
    flex-shrink: 0;
}

.large-download-icon:hover {
    transform: scale(1.1);
    color: #f57c00;
}

.organization-layout {
    display: flex;
    flex-direction: column;
    width: min(90%, 1600px);
    padding: 0px;
    box-sizing: border-box;
    margin: 20px auto;
    /*padding: 0 var(--spacing-lg);*/
    background-color: #fff;
}

.content-align-logo { margin-top: var(--spacing-xl); }

/* --- Organisation Chart --- */
.organization-chart {
    display: flex;
    max-width: 1800px;
    margin: 40px auto;
    padding: 0 15px;
    font-family: var(--font-family);
    gap: 20px;
}

.global-organization-chart {
    width: 100%;
    text-align: center;
    margin: 30px auto;
}

.organization-chart-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* --- Conteneur global à droite de l’organigramme --- */
.right-group-container {
    border: 1px solid #002B5B; /* Bleu foncé */
    padding: 20px;
    display: flex;
    flex-direction: row; /* ✅ les colonnes côte à côte */
    align-items: flex-start; /* ✅ alignement vertical en haut */
    justify-content: space-between; /* espace régulier entre colonnes */
    gap: 20px; /* espace horizontal entre colonnes */
    background-color: #fff;
    width: 100%;
    box-sizing: border-box;
}

/* Conteneur pour aligner les éléments côte à côte */
.block-org-links-wrapper {
    display: flex;
    align-items: center; /* Aligne l'icône en haut des liens */
    justify-content: flex-start;
    margin: 0 !important;   /* Annule tout margin parasite */
    padding: 10px 0;         /* Espace interne léger */
    gap: 12px;
}

/* Style de base pour le lien de téléchargement */
.download-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    color: var(--color-primary-dark); /* Bleu foncé, ajustez si besoin */
    transition: color 0.2s;
}

/* Style pour l'icône de téléchargement */
.download-link .fa-download {
    margin-right: 8px; /* Espace entre l'icône et le texte */
    color: var(--color-orange);
    margin-top: 5px;
    font-size: 1.4em;
}

.download-link:hover {
    color: var(--color-accent); /* Changement de couleur au survol */
}

.director-line-anchor {
    /* Ceci est le nouveau conteneur ajouté en PHP */
    position: relative; /* Base pour le positionnement absolu de la ligne */
}

.director-to-right-line {
    /* Nouvelle position relative au bloc Directeur */
    position: absolute;
    /* top: 50%; <-- Centré sur le bloc Directeur */
    bottom: 50%; /* Utilisons bottom ou top 50% du parent (director-line-anchor) */
    right: -20px; /* Commence à l'extérieur du conteneur (la valeur doit être égale à la width) */

    height: 1px;
    background-color: #002B5B;
    /* La largeur couvre l'espace (gap) entre les colonnes */
    width: 20px;

    transform: translateY(50%); /* Ajustement pour centrer sur la ligne 50% du bloc */
    z-index: 2;
}

/* Cadre de droite */
.right-group-container {
    border: 1px solid #002B5B;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 15px;
    background-color: #fff;
}


/* Chaque colonne interne prend une largeur équilibrée */
.right-group-container > .col-center,
.right-group-container > .col-right,
.right-group-container > .col-support-research {
    flex: 1; /* ✅ largeur égale */
    min-width: 0; /* évite le débordement si trop de contenu */
}

/* --- Colonnes Flexbox --- */
.col-left { flex: 0 0 20%; position: relative; }
.col-center { flex: 0 0 25%; padding-right: 15px; }
.col-right { flex: 0 0 25%; padding-right: 15px; }
.col-support-research { flex: 0 0 30%; }

/* --- Connecteurs verticaux entre tuiles (col-left uniquement) --- */
.col-left {
    position: relative; /* conteneur de référence */
}

/* espace vertical entre tuiles (ajuste si besoin) */
.col-left .block-info {
    position: relative;
    margin-bottom: 24px; /* espace entre les tuiles = longueur du trait */
    padding: 15px;
}


/* Conteneur parent */
.col-left-with-line {
    display: flex;
    flex-direction: column;
    position: relative;
}

/* On cible la div générée par renderNameBlock (souvent .block-info) */
.col-left-with-line .block-info {
    position: relative;
    margin-bottom: 25px; /* L'espace exact entre vos blocs où le trait apparaîtra */
    z-index: 2;
}

/* Le trait vertical : on le place après chaque bloc sauf le dernier */
.col-left-with-line .block-info:not(:last-child)::after {
    content: '';
    position: absolute;

    /* Positionnement horizontal au centre */
    left: 50%;
    transform: translateX(-50%);

    /* Positionnement vertical : part du bas du bloc actuel jusqu'au haut du suivant */
    top: 100%;          /* Commence pile au bord bas */
    height: 25px;       /* Doit correspondre exactement au margin-bottom ci-dessus */

    width: 2px;         /* Épaisseur du trait */
    background-color: #333; /* Votre bleu CRAN */
    z-index: 1;
}

/* Sécurité : supprimer le margin sur le dernier bloc pour éviter un décalage */
.col-left-with-line .block-info:last-child {
    margin-bottom: 0;
}

/* --- Blocs info --- */
.block-info {
    color: white;
    padding: 15px;
    text-align: center;
}

.block-info .name-row {
    display: inherit;
}

.block-info .prenom { display: inline; margin-right: 5px; }
.block-info .nom { display: inline; font-weight: 600; }

.bg-red-dark { background-color: #8B0000; }
.bg-dark-blue { background-color: #092851; }
.bg-darker-blue { background-color: #092851 !important; }

.bg-white-border-blue {
    background-color: transparent !important;
    color: #333;
    border: 1px solid #092851;
    padding: 12px;
}
.bg-white-border-blue h3 { color: #092851; }

/* --- Arrondis --- */
.border-top-left-round { border-top-left-radius: var(--radius-lg); }
.border-bottom-left-round { border-bottom-left-radius: var(--radius-lg); }
.border-bottom-right-round { border-bottom-right-radius: var(--radius-lg); }

/* --- Blocs Départements --- */
.block-header, .block-dept, .block-full {
    color: white;
    padding: 15px;
    text-align: center;
    margin-bottom: 15px;
}

.block-dept { min-height: 160px; border-bottom-right-radius: var(--radius-lg); }
.block-dept h3 { font-size: 24px; text-transform: none; margin-bottom: 10px; }

.bg-blue-medium { background-color: #16519C; }
.bg-blue-dark   { background-color: #0B2951; }
.bg-blue-light  { background-color: #288FE2; }

/* --- Administration et Gestion --- */
.admin-gestion-container { margin-bottom: 15px; }

.admin-gestion-header {
    color: white;
    padding: 10px 15px;
    text-align: center;
    border-radius: 0;
}

.admin-gestion-header.bg-dark-blue { border-top-left-radius: 3px; border-top-right-radius: 3px; }

.admin-gestion-content {
    border: 1px solid #004d99;
    border-top: none;
    padding: 15px;
    text-align: center;
}
.admin-gestion-content.border-bottom-right-round {
    border-radius: 0;
}

.list-names, .support-names {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 10px;
    color: #0B2951;
}

.name-row {
    display: inherit;
}
.name-row .prenom { flex: 1; text-align: left; margin-right: 5px; }
.name-row .nom { flex: 1; font-weight: 600; }

/* --- Commissions --- */
.commissions-container { margin: 15px 0; }
.commissions-header {
    text-align: center;
    color: white;
    padding: 10px 15px;
    background-color: #092851;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}
.commissions-content {
    text-align: center;
    border: 1px solid #004d99;
    padding: 0 15px 5px 15px;
}
.commissions-content.border-bottom-right-round { border-radius: 0; }
.commissions-content .commission-item {
    border-top: 1px solid #ccc;
    padding: 10px 0;
}
.commission-item:first-child { border-top: none; margin-top: 5px; }

/* --- Support Recherche --- */
.block-support {
    color: white;
    padding: 15px;
    border: 1px solid #004d99;
    text-align: center;
}
.support-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: center;
    border: 1px solid #004d99;
    padding: 15px;
    border-bottom-right-radius: var(--radius-lg);
}
.support-item strong { display: block; margin-bottom: 8px; font-size: 1.1rem; color: #0B2951; }

.support-item {
    border-top: 1px solid var(--color-dark-blue); /* Couleur grise claire pour la séparation */
    padding-top: 15px;
    padding-bottom: 15px;
}

.support-item:first-child {
    border-top: none;
    padding-top: 0; /* Ajuster si vous voulez aligner le premier bloc différemment */
}

/* --- Communication --- */
.block-communication { color: white; padding: 15px; margin-top: 15px; text-align: center; }

/* --- Titres + liens --- */
.block-title-and-note {
    border-top: none !important;    /* Supprime la barre du haut */
    border-bottom: none !important; /* Supprime la barre du bas */
    padding: 0;
    margin: 0;
}

.block-org-link {
    color: var(--color-primary);
    font-weight: 400;
    margin: 0 !important;    /* Annule le margin: 10px 0 20px qui poussait le texte */
}

/* --- Nettoyage des listes dans la sidebar --- */
.block-org-link ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.block-org-link li {
    margin-bottom: 8px;      /* Espace entre chaque lien PDF */
}

.download-link-item {
    text-decoration: none;
    color: var(--color-text-medium);
    font-size: 12px;
    transition: color 0.3s;
}

.download-link-item:hover {
    color: var(--color-orange);
}
    /* --- Texte interne --- */
.block-info p, .block-info span,
.list-names p, .list-names span { font-weight: 500; font-size: 14px; }

.mb-15 {
    margin-bottom: 15px;
}

.departments-schema {
    display: flex;
    gap: 30px;
    color: var(--color-dark-blue);
}

.departments-schema .column {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.departments-schema .box {
    border: 1px solid #1f3b6d;
    padding: 10px 10px 18px 10px;
    border-radius: 0 0 28px 0;
    text-align: center;
    width: 100%;
}

.departments-schema .box-header {
    background: #142d56;
    color: #fff;
}

.departments-schema .line {
    width: 2px;
    height: 25px;
    background: #1f3b6d;
}

.org-chart {
    max-width: 1200px;
    margin: 0 auto;
    font-family: "Arial", sans-serif;
}

.org-level {
    display: flex;
    justify-content: center;
    margin-bottom: 67px;
    position: relative;
}

.org-level.services {
    position: relative;
    justify-content: space-between;
    gap: 40px; /* 👈 espace horizontal */
    padding: 0 20px;
}

.org-box {
    position: relative;
    width: 260px;
    padding: 20px;
    border: 2px solid #1f3b6d;
    border-radius: 0 0 40px 0;
    background: #fff;
    text-align: center;
}

.org-level.top .org-box {
    border-radius: 0;
}

.org-box.dark {
    background: #0f2a4d;
    color: #fff;
    border-radius: 6px;
    width: 400px;
}

.org-box h3,
.org-box h4 {
    margin: 0 0 10px;
    color: #0f2a4d;
}

.org-box.dark h3 {
    color: #fff;
}

.org-box p {
    margin: 5px 0;
}

.org-box ul {
    list-style: none;
    padding: 0;
    margin-top: 15px;
}

.org-box ul li {
    margin: 4px 0;
}

.org-box strong {
    font-weight: 700;
}

.org-box .resp {
    margin-bottom: 10px;
    font-style: italic;
}

.org-level.top .org-box::after {
    content: '';
    position: absolute;
    bottom: -35px;
    left: 50%;
    width: 2px;
    height: 35px;
    background: #1f3b6d;
    transform: translateX(-50%);
}

.org-level.services::before {
    content: '';
    position: absolute;
    top: -35px;
    left: calc(20px + 130px);
    right: calc(20px + 130px);
    height: 2px;
    background: #1f3b6d;
}

.org-level.services .org-box::before {
    content: '';
    position: absolute;
    top: -35px;
    left: 50%;
    width: 2px;
    height: 35px;
    background: #1f3b6d;
    transform: translateX(-50%);
}

/* Style pour les titres de sections bleus (Pôles) */
.header-dark {
    background: #0f2a4d;
    color: #fff;
    padding: 10px;
    margin: -20px -20px 15px -20px; /* Aligné aux bords de la box */
    font-weight: bold;
    font-size: 0.9em;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Style spécifique pour la box centrale Plateformes */
.org-box.plateformes {
    width: 80px; /* Plus étroite */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0; /* Rectangulaire selon l'image */
}

.vertical-text {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    margin: 0;
    color: #0f2a4d;
    letter-spacing: 2px;
}

/* Ajustement de l'alignement pour 3 colonnes au lieu de 4 */
.recherche-chart .org-level.services {
    justify-content: center;
    gap: 20px;
}

@media (max-width: 992px) {
    /* 1. Le conteneur principal doit passer en colonne */
    .organization-chart {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* 2. La sidebar (menu + téléchargements) doit prendre toute la largeur */
    .organization-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 40px !important;
        border-right: none !important; /* On enlève la bordure latérale si elle existe */
    }

    /* 3. L'organigramme (le graphique) doit aussi prendre toute la largeur */
    .right-group-container,
    .departments-schema,
    .org-chart,
    .admin-chart,
    .recherche-chart {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
    }

    /* 4. On force les éléments internes des organigrammes à s'empiler aussi */
    .col-left, .col-center, .col-right, .col-support-research, .column {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 20px !important;
        position: static !important;
    }
}

@media (max-width: 768px) {
    .organization-layout {
        margin: 0 auto;
    }

    .organization-chart {
        margin: 0 auto;
    }

    .organization-sidebar {
        margin-top: 0px;
    }

    nav.sidebar-menu {
        margin-bottom: 20px !important;
    }

    .departments-schema {
        display: flex;
        flex-direction: column; /* Empile les 3 départements */
        gap: 20px;
    }

    .departments-schema .column {
        width: 100% !important;
    }

    /* On ajuste les boîtes pour qu'elles soient lisibles */
    .departments-schema .box {
        margin: 5px 0;
        width: 100%;
    }

    .org-level.services {
        display: flex;
        flex-direction: column; /* Empile le service financier, RH, etc. */
        align-items: center;
    }

    .org-box {
        width: 90% !important; /* Prend presque toute la largeur */
        margin-bottom: 15px !important;
    }

    .org-box.no-margin {
        margin-bottom: 0px !important;
    }

    /* Pour le service Appui Recherche (texte vertical "Plateformes") */
    .org-box.plateformes {
        height: auto !important;
        padding: 10px !important;
    }

    .vertical-text {
        writing-mode: horizontal-tb !important; /* On remet le texte à l'endroit sur mobile */
        transform: none !important;
    }

    .director-to-right-line {
        background-color: white;
    }
}