/**
 * com_annuaire — Academic Suite
 * Style repris du template mojito legacy (templates/mojito/css/style.css).
 *
 * Couleurs ILM (mojito) :
 *   #693290 — violet primaire
 *   #69318f / #693190 — variantes (synonymes dans le legacy)
 *   #462261 — violet foncé (hover)
 *   #818181 — gris texte secondaire
 *   #C5C5C5 — gris désactivé
 */

/*************
 * GENERAL
 *************/
.table-index {
    background: #693290;
    color: #FFF;
    padding: 10px;
    margin: 10px 0 20px 0;
}

.row.row-article {
    margin-bottom: 30px;
}

/* Titre h1 — espace mesuré au-dessus de la barre alphabet */
.en_fr h1,
.en_en h1 {
    margin: 24px 0 4px;
    color: #462261;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/*************
 * BOUTON GÉNÉRIQUE (du style.css mojito)
 *************/
.bouton {
    border-radius: 0;
    background: #693290;
    color: #FFFFFF;
}

.btn.bouton {
    border-radius: 0;
    background: #693290;
    color: #FFFFFF;
    border: none;
}

.btn.bouton:hover,
.btn.bouton:focus {
    background: #462261;
    color: #FFFFFF;
    text-decoration: none;
}

/*************
 * NAV ANNUAIRE
 *************/
.annuaire_recherche {
    border: 1px solid #693290;
    padding: 5px;
    border-radius: 4px;
}

/* Boutons de bascule de vue (colonne étroite) : le texte peut être long
   ("Vue équipes & services"). La classe Bootstrap .btn force
   white-space:nowrap → le texte débordait de la boîte. On autorise le retour
   à la ligne et on centre proprement. */
.annuaire_lien_vue_alphabetique,
.annuaire_lien_vue_equipes {
    display: block;
    width: 100%;
    margin-bottom: 10px;
    padding: 8px 6px;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    line-height: 1.25;
    text-align: center;
    box-sizing: border-box;
}

/*************
 * DIRECTORY MENU
 *************/
#directory-menu {
    margin-bottom: 40px;
}

#directory-menu > li > a {
    margin-bottom: 5px;
    color: #69318f;
    font-weight: bolder;
}

#directory-menu > li > a:hover,
#directory-menu > li > a.active {
    color: #462261;
}

/*************
 * ALPHABET BAR — une seule ligne, élégant et minimaliste
 *************/
/* ── Titre liste membres + badge compteur ───────────────────────────────── */
/* Le titre se comporte comme un bloc inline : le badge "colle" à la fin de
   la phrase, sans bord droit, et reste sur la même ligne que le dernier mot
   tant que la largeur disponible le permet (utile dans la vue équipe où un
   menu vertical réduit la colonne). */
.annuaire-list-title {
    margin: 1rem 0 1.25rem;
    line-height: 1.3;
}

.annuaire-list-title__text {
    /* Texte inline : le badge le suit immédiatement. */
}

.annuaire-list-title em {
    font-style: normal;
    color: #6a1b9a;
}

.annuaire-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 1.8rem;
    padding: 0 .55rem;
    margin-left: .6rem;
    border-radius: 999px;
    background: #6a1b9a;
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
    /* Empêche le badge d'aller seul à la ligne suivante. */
    white-space: nowrap;
}

/* ── Empty / maintenance notice ─────────────────────────────────────────── */
.annuaire-empty {
    text-align: center;
    padding: 2rem 1rem;
    margin: 1.5rem 0;
    border: 1px dashed #d4bce8;
    border-radius: 6px;
    color: #6b5c7a;
    background: #fff;
}

.annuaire-empty p {
    margin: .25rem 0 !important;
    font-size: 1rem;
}

.annuaire-empty--maintenance {
    border-style: solid;
    border-left: 5px solid #f59e0b;
    background: #fff8e1;
    color: #6a4f00;
}

.annuaire-empty--maintenance p {
    font-weight: 500;
}

.annuaire-alpha-bar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    margin: 14px 0 22px;
    padding: 0;
    background: #fff;
    border-top: 2px solid #693290;
    border-bottom: 1px solid #e0e0e0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
}

.annuaire-alpha-bar::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.annuaire-alpha-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 0 auto;
    min-width: 28px;
    height: 38px;
    padding: 0 4px;
    font-size: 13px;
    font-weight: 600;
    color: #999;
    text-decoration: none;
    letter-spacing: 0.02em;
    border-right: 1px solid #f0f0f0;
    transition: color 120ms ease, background 120ms ease;
    white-space: nowrap;
}

.annuaire-alpha-letter:last-child {
    border-right: none;
}

.annuaire-alpha-letter:hover {
    color: #693290;
    background: rgba(105, 50, 144, 0.05);
    text-decoration: none;
}

.annuaire-alpha-letter.active {
    color: #fff;
    background: #693290;
    font-weight: 700;
}

.annuaire-alpha-letter.active:hover {
    background: #462261;
    color: #fff;
}

/*************
 * ÉQUIPE / FICHE AGENT — rendu fidèle au mojito legacy
 *************/
.agent_fiche_rapide {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 0;
    border: 1px solid #c0c0c0;
    background: #ffffff;
    margin: 0 0 10px 30px;
    padding: 10px;
    width: 95%;
    font-size: 12px;
    box-sizing: border-box;
}

/* Photo — colonne fixe */
.afr-photo {
    flex: 0 0 100px;
    padding: 5px;
    background: #fff;
    text-align: center;
}

.afr-photo-img {
    width: 100%;
    height: auto;
    display: block;
}

/* Colonnes données — tables comme le legacy */
.afr-col-left {
    flex: 0 0 42%;
    padding: 0 10px;
}

.afr-col-right {
    flex: 1 1 auto;
    padding: 0 10px;
}

/* Table des champs : libellé aligné droite + valeur */
.afr-table {
    border-collapse: collapse;
    width: 100%;
}

.afr-table td {
    vertical-align: top;
    padding: 2px 4px;
    line-height: 1.4;
}

.afr-table td.afr-label {
    color: #693290;
    font-weight: bold;
    text-align: right;
    white-space: nowrap;
    width: 90px;
    padding-right: 8px;
}

.afr-table td.afr-value {
    color: #333;
}

/* Valeurs multiples (équipes / services / plateformes) : liste verticale
   sobre, une entrée par ligne, sans puce ni cadre. Un fin liseré violet à
   gauche signale qu'il s'agit d'une liste, de façon minimaliste. */
.afr-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.afr-list .afr-item {
    padding: 0 0 0 .6em;
    border-left: 2px solid #e0cdee;
    line-height: 1.5;
}

.afr-list .afr-item + .afr-item {
    margin-top: .2em;
}

.afr-table td.afr-value a {
    color: #693290;
    text-decoration: none;
}

.afr-table td.afr-value a:hover {
    color: #462261;
    text-decoration: underline;
}

/* Colonne icônes + bouton */
.afr-links {
    flex: 0 0 160px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding-left: 8px;
    min-height: 80px;
}

.afr-links-icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 2px;
    width: 100%;
}

.afr-links-publi {
    width: 100%;
    text-align: center;
    padding-top: 8px;
}

.afr-links-publi .btn.bouton {
    display: inline-block;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: bold;
    text-decoration: none;
    white-space: nowrap;
}

/* Responsive */
@media (max-width: 768px) {
    .agent_fiche_rapide {
        flex-wrap: wrap;
        margin-left: 0;
        width: 100%;
    }

    .afr-col-left,
    .afr-col-right {
        flex: 1 1 100%;
        padding: 4px 0;
    }

    .afr-links {
        flex: 1 1 100%;
        flex-direction: row;
        border-top: 1px solid #ececec;
        padding-left: 0;
        padding-top: 8px;
        min-height: 0;
    }
}

.equipe_nom {
    font-size: 18px;
    color: #693290;
    font-weight: bold;
    margin-bottom: 10px;
}

/*************
 * PROFILE
 *************/
.profile {
    margin-bottom: 70px;
    height: 154px;
}

.profil_ligne_info {
    margin-top: 10px;
}

.profil_lien_icone {
    width: 21px;
    height: 21px;
    text-decoration: none;
}

.profil_valeur {
    margin-left: -20px;
}

.profil_libelle {
    color: #693290;
    font-weight: bold;
}

.profil_barre_liens a,
.profile_barre_liens a {
    text-decoration: none;
}

.profil_info {
    font-size: 14px;
    color: #693290;
    font-weight: bold;
}

.profil_lien_vers_publi {
    padding-top: 20px;
}

.profil_enumeration_valeurs {
    list-style: none;
    padding-left: 10px;
}

.profile.search-directory {
    height: auto;
}

.profile.search-directory > div {
    word-wrap: break-word;
}

.profile-picture {
    width: 100px;
    padding: 5px;
    margin: auto;
    background: #FFF;
    overflow: inherit;
}

.profile-picture img,
.annuaire-profil-photo {
    width: 100%;
    position: relative;
    top: -10%;
}

.profile-name {
    text-transform: uppercase;
    color: #462261;
}

.profile-infos {
    text-transform: uppercase;
    color: #69318f;
    font-size: 12px;
}

.profile-table {
    margin-top: 10px;
}

.profile-table tr td:nth-child(1) {
    color: #69318f;
    font-weight: bolder;
    padding-right: 15px;
}

/*************
 * DIRECTORY FORM SEARCH
 *************/
#directory-search .btn-search,
.btn-search {
    border-radius: 0;
    background: #693290;
    color: #FFF;
    padding: 5px 30px;
    border: none;
}

.btn-search:hover,
.btn-search:focus {
    background: #462261;
    color: #FFF;
}

#directory-search label {
    color: #693290;
}

#directory-search input,
#directory-search select {
    color: #693290;
}

/*************
 * PUBLICATIONS
 *************/
.publication {
    margin-bottom: 10px;
}

.publication .publication-infos {
    font-size: 12px;
    border: 1px solid #818181;
    padding: 10px 20px 15px 20px;
}

.publication .publication-titre {
    display: block;
    color: #693190;
}

.publication-titre a {
    font-weight: bold;
    text-decoration: none;
    color: #693190;
    font-size: 14px;
}

.publication .publication-titre:hover {
    text-decoration: none;
}

.publication-auteurs,
.publication-authors {
    padding-left: 10px;
}

.publication-authors .annuaire-coauthor {
    color: #693290;
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px dotted #c0a3d6;
    transition: color 120ms ease, border-color 120ms ease;
}

.publication-authors .annuaire-coauthor:hover {
    color: #462261;
    border-bottom-color: #693290;
    text-decoration: none;
}

/* Auteur courant (= agent dont on regarde la fiche) — mis en gras pour le
   distinguer dans la liste de ses co-auteurs ILM, sans lien (auto-référence). */
.publication-authors .annuaire-coauthor-self {
    color: #1a1a1a;
    font-weight: 700;
}

.publication .publication-refs {
    color: #818181;
    font-weight: bold;
    font-style: italic;
    padding-left: 20px;
}

/*************
 * PAGINATION publications
 *************/
.annuaire-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin: 18px 0;
    padding: 10px 0;
}

.annuaire-pag-btn {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border: 1px solid #c9c9c9;
    background: #fff;
    color: #693290;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 3px;
    transition: all 150ms ease;
}

.annuaire-pag-btn:hover {
    border-color: #693290;
    background: rgba(105, 50, 144, 0.08);
    color: #462261;
    text-decoration: none;
}

.annuaire-pag-current {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    background: #693290;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    border-radius: 3px;
    min-width: 70px;
    justify-content: center;
}

.annuaire-pubcount {
    text-align: center;
    color: #555;
    font-size: 13px;
    margin: 8px 0 4px;
}

.annuaire-pubcount strong {
    color: #693290;
}

/*************
 * ALERTES (fallback uniquement — pas dans mojito original)
 *************/
.alert-warning,
.alert-info {
    border: 1px solid #818181;
    padding: 10px 15px;
    margin: 15px 0;
    font-size: 13px;
}

.alert-warning {
    background: #fffaeb;
    border-color: #d4b14a;
    color: #6b5300;
}

.alert-info {
    background: #f0f7fc;
    border-color: #82a8c9;
    color: #1c4f7c;
}

/* ── Index Équipes & Services (cartes cliquables) ───────────────────────── */
.annuaire-index {
    margin-top: 1.5rem;
}

.annuaire-index__title {
    font-size: 1.35rem;
    font-weight: 700;
    color: #2a2331;
    margin: 1.75rem 0 1rem;
    padding-bottom: .4rem;
    border-bottom: 2px solid #693290;
}
.annuaire-index__title:first-child {
    margin-top: 0;
}

/* ── Accordéon Équipes & Services ───────────────────────────────────────── */
.annuaire-acc {
    margin-bottom: 1.5rem;
    border: 1px solid #e8dff0;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.annuaire-acc-item + .annuaire-acc-item {
    border-top: 1px solid #f0e8f5;
}

/* En-tête cliquable — style "onglet latéral" : liseré gauche, fond clair au
   survol/ouverture, compteur en texte gris discret (pas de badge rond, pour
   ne pas évoquer les blocs de publications). */
.annuaire-acc-head {
    width: 100%;
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 15px 18px;
    background: #fff;
    border: none;
    border-left: 4px solid #d9c8e8;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: #462261;
    transition: background .15s ease, border-color .15s ease, padding-left .15s ease;
}
.annuaire-acc-head:hover,
.annuaire-acc-head:focus {
    background: #faf6fc;
    border-left-color: #693290;
    padding-left: 22px;
    outline: none;
}
.annuaire-acc-item.is-open > .annuaire-acc-head {
    background: #f5ebf7;
    border-left-color: #693290;
    padding-left: 22px;
}

.annuaire-acc-name {
    flex: 1 1 auto;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: .01em;
    color: #462261;
}

/* Compteur lisible : "12 membres" */
.annuaire-acc-count {
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 600;
    color: #693290;
    white-space: nowrap;
}

.annuaire-acc-chevron {
    flex: 0 0 auto;
    align-self: center;
    color: #9c7bbf;
    font-size: 14px;
    transition: transform .2s ease, color .15s ease;
}
.annuaire-acc-head:hover .annuaire-acc-chevron,
.annuaire-acc-item.is-open .annuaire-acc-chevron {
    color: #693290;
}
.annuaire-acc-item.is-open .annuaire-acc-chevron {
    transform: rotate(180deg);
}

/* Panneau des membres */
.annuaire-acc-panel {
    padding: 8px 18px 18px;
    background: #fcfbfd;
    animation: annuaire-acc-fade .25s ease-out;
}
.annuaire-acc-panel[hidden] {
    display: none;
}

.annuaire-acc-empty {
    padding: 1rem;
    color: #6b5c7a;
    font-style: italic;
}

/* ── Lisibilité des fiches DANS l'accordéon ─────────────────────────────────
   Les fiches _profil_rapide héritent d'un style legacy très dense (12px,
   cellules serrées). On l'aère uniquement dans ce contexte pour un confort
   de lecture, sans toucher aux autres vues (alpha, équipe seule…). */
.annuaire-acc-panel .agent_fiche_rapide {
    font-size: 13.5px;
    border: none;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(105, 50, 144, 0.06);
    width: 100%;
    margin: 0 0 12px 0;
    padding: 14px 16px;
    background: #fff;
}
.annuaire-acc-panel .agent_fiche_rapide:last-child {
    margin-bottom: 0;
}

/* Photo un peu plus grande et arrondie */
.annuaire-acc-panel .afr-photo {
    flex: 0 0 86px;
}
.annuaire-acc-panel .afr-photo-img {
    border-radius: 6px;
}

/* Cellules : plus d'air vertical, interligne confortable */
.annuaire-acc-panel .afr-table td {
    padding: 4px 6px;
    line-height: 1.55;
}
.annuaire-acc-panel .afr-table td.afr-label {
    font-weight: 600;
    color: #7a5fa0;
}
.annuaire-acc-panel .afr-table td.afr-value {
    color: #2a2331;
}

/* Nom de l'agent (1re ligne) légèrement mis en avant */
.annuaire-acc-panel .afr-col-left .afr-table tr:first-child td.afr-value a {
    font-weight: 700;
    font-size: 1.05em;
}

@keyframes annuaire-acc-fade {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 600px) {
    .annuaire-acc-head { padding: 12px 14px; }
    .annuaire-acc-name { font-size: 17px; }
    .annuaire-acc-count { font-size: 13px; }
    .annuaire-acc-panel { padding: 6px 10px 14px; }
}