/* =========================================================
   🎨 directory.css — Styles globaux pour l'annuaire
   ========================================================= */

/* =========================================================
   🎨 VARIABLES GLOBALES (Design Tokens)
   ========================================================= */
:root {
    /* Couleurs principales */
    --color-primary: #278FE2;          /* Bleu principal utilisé pour titres/links */
    --color-primary-dark: #1e3d7b;     /* Bleu foncé au survol */
    --color-dark-blue: #092851;        /* Bleu foncé pour boutons non-actifs */
    --color-orange: #f28c00;           /* Orange accent / département */
    --color-accent: #f57c00;           /* autre orange (breadcrumbs) */

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

    /* Espacement */
    --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: #707070;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

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

/* =========================================================
   🖼️ BANNIÈRE & TUILES
   ========================================================= */
.image-banner {
    position: relative;
    width: 100%;
    margin: 0 auto;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    overflow: hidden;
    z-index: 1;
}

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

.image-banner h1 {
    position: absolute;
    top: var(--spacing-xl);
    left: var(--spacing-xl);
    font-size: var(--font-size-lg);
    font-weight: 700;
    letter-spacing: 1px;
    color: white;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    z-index: 3;
}

.banner-tiles {
    position: absolute;
    bottom: var(--spacing-lg);
    left: var(--spacing-xl);
    display: flex;
    gap: var(--spacing-lg);
    z-index: 2;
}

.banner-tile {
    overflow: hidden;
    width: 180px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    border-radius: 8px;
}

.banner-tile-header {
    font-weight: 600;
    padding: 10px 15px;
    color: white;
    text-transform: uppercase;
    font-size: var(--font-size-md);
}

.banner-tile:nth-child(1) .banner-tile-header { background-color: var(--color-orange); }
.banner-tile:nth-child(2) .banner-tile-header { background-color: var(--color-dark-blue); }

.banner-tile-body {
    background-color: var(--color-background-light);
    padding: 0 var(--spacing-sm);
    border-bottom-right-radius: var(--radius-lg);
}

.banner-tile-body ul { list-style: none; margin: 0; padding: var(--spacing-sm) 0; }
.banner-tile-body li { padding: var(--spacing-xs) 0; color: var(--color-text-dark); font-size: var(--font-size-sm); }

/* =========================================================
   🔍 FILTRES + RECHERCHE (barre supérieure)
   ========================================================= */
/* Wrapper: si tu laisses la search-container DANS filters-container (comme dans ton PHP),
   cette règle gère l'alignement gauche/bas droit */
.filters-container {
    display: flex;
    align-items: center;            /* centre verticalement */
    justify-content: space-between; /* pousse la recherche à droite si elle est en flex item séparé */
    flex-wrap: wrap;
    gap: 12px;
    margin: 20px 0 15px;
    font-family: var(--font-family);
    width: 100%;
}

/* Si tu préfères garder boutons + search dans le même conteneur (comme ton PHP),
   on utilise un sous-conteneur pour les boutons à gauche */
.filters-left {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Boutons de filtres */
.filter-btn {
    border: none;
    /*border-radius: 20px;*/
    padding: 6px 14px;
    font-size: 18px;
    cursor: pointer;
    color: white;
    background-color: var(--color-dark-blue);
    transition: all 0.16s ease;
    white-space: nowrap;
}

.filter-btn.active {
    background-color: var(--color-orange);
}

.filter-btn:hover { opacity: 0.9; transform: translateY(-1px); }

.filter-dropdown-container {
    position: relative;
    display: inline-block;
}

.filter-menu {
    display: none;
    position: absolute;
    z-index: 1000;
    background-color: white;
    min-width: 180px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border: 1px solid #ddd;
    border-top: none;
    left: 0;
    top: 100%; /* S aligne sous le bouton */
    list-style: none;
    padding: 0;
    margin: 0;
}

.filter-menu.show {
    display: block;
}

.menu-item {
    padding: 8px 15px;
    cursor: pointer;
    color: #333;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.2s;
}

.menu-item:hover {
    color: orange;
    background-color: rgba(255, 165, 0, 0.1); /* Très léger voile orange au fond */
}

.menu-item.reset {
    color: #333;
}
.menu-item.reset:hover {
    color: orange;
    background-color: rgba(255, 165, 0, 0.1); /* Très léger voile orange au fond */
}

/* Conteneur recherche — aligné à droite grâce à justify-content sur le parent
   ou, si présent dans le même container, on lui donne flex: 0 0 auto et margin-left: auto */

.search-container {
    display: flex;
    align-items: stretch;    /* Force les enfants à prendre la même hauteur */
    position: relative;
    max-width: 320px;
    width: 100%;
    height: 45px;
    flex: 0 0 320px;
    margin-left: auto;
    border: 1px solid #092851; /* On déplace la bordure de l'input vers le conteneur */
    background: #fff;
}

.search-container input,
#searchInput {
    width: 100%;
    padding: 8px 10px;
    border: none;             /* On enlève la bordure de l'input */
    font-family: var(--font-family);
    font-size: var(--font-size-md);
    background: transparent;  /* Laisse voir le fond du conteneur */
    outline: none;            /* Évite le contour bleu par défaut au clic */
}

/* Couleur du texte que l'utilisateur tape */
#searchInput {
    color: #707070;
}

/* Couleur du texte d'aide (le placeholder) */
#searchInput::placeholder {
    color: #707070;
    opacity: 1; /* Nécessaire sur certains navigateurs (Firefox) pour voir la vraie couleur */
}

/* Pour les navigateurs plus anciens (IE/Edge) */
#searchInput::-ms-input-placeholder {
    color: #707070;
}

.search-container .icon-search {
    display: flex;            /* Permet de centrer la loupe dans son bloc */
    align-items: center;      /* Centrage vertical de la loupe */
    justify-content: center;  /* Centrage horizontal de la loupe */
    width: 45px;              /* Largeur du bloc icône */
    height: 100%;
    color: white;
    background-color: #092851;
    cursor: pointer;
    flex-shrink: 0;           /* Empêche l'icône de s'écraser */
}
/* =========================================================
   🔤 BARRE ALPHABÉTIQUE (A-Z) + "Tout voir"
   ========================================================= */
.alphabet-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0px;
    margin: 10px 0 20px;
}

/* Le bloc qui contient uniquement les lettres A-Z */
.alphabet-letters-group {
    background-color: #0B2951;
    display: flex;
    padding: 3px 10px;
    margin-left: 40px;
}

.alphabet-bar .alpha-letter {
    color: white;
    background-color: transparent;
    cursor: pointer;
    font-weight: 600;
    font-family: "Raleway", sans-serif;
    padding: 4px 8px;
    transition: all 0.2s;
}
.alphabet-bar .alpha-letter.active {
    background-color: orange;
    color: white;
}
.alphabet-bar .alpha-letter:hover {
    color: orange;
}

/* --- MODE BUREAU (Par défaut) --- */
.alphabet-group {
    display: block; /* On affiche tout sur PC */
    width: 100%;             /* Prend toute la largeur disponible */
    /*max-width: 1200px;       !* Ou la largeur que vous souhaitez pour votre site *!*/
    margin: 0 auto 30px;     /* Centre le bloc et ajoute de l'espace en dessous */
    border: 1px solid #278FE2; /* Bordure bleue sur tout le groupe */
    border-radius: 0 0 20px 0; /* Arrondi en bas à droite */
    overflow: hidden;        /* Coupe les coins du tableau pour respecter l'arrondi */
    background-color: #fff;
}

/* Le Titre (A, B...) devient le "chapeau" du cadre */
.alphabet-group h2 {
    background-color: #278FE2;
    color: white;
    margin: 0 !important;    /* Supprime les marges pour coller au tableau */
    padding: 5px;
    font-size: 22px;
    border-bottom: none;     /* Évite le double trait entre titre et tableau */
}

/* Le Tableau */
.directory-table {
    width: 100%;             /* Force le tableau à prendre toute la largeur du cadre */
    border-collapse: collapse; /* Supprime les espaces blancs entre les cellules */
    table-layout: fixed;     /* Optionnel : force les colonnes à avoir des tailles fixes */
    word-wrap: break-word;
    line-height: 1.5em;
}

/* L'en-tête du tableau (Nom, Statut...) */
.directory-table thead tr {
    background-color: #278FE2; /* Même couleur que le titre pour l'unité */
    color: white;
}

/* On définit des largeurs en % pour chaque colonne */
.directory-table th:nth-child(1), .directory-table td:nth-child(1) { width: 20%; } /* Nom */
.directory-table th:nth-child(2), .directory-table td:nth-child(2) { width: 18%; } /* Statut */
.directory-table th:nth-child(3), .directory-table td:nth-child(3) { width: 12%; } /* Dpt (on réduit ici) */
.directory-table th:nth-child(4), .directory-table td:nth-child(4) { width: 30%; } /* Mail (on donne le max) */
.directory-table th:nth-child(5), .directory-table td:nth-child(5) { width: 20%; } /* Site */

/* Alternance des lignes */
.directory-row.row-even {
    background-color: #f5f5f5;
}

.directory-row.row-odd {
    background-color: #ffffff;
}

/* Hover ligne cliquable */
.directory-row {
    transition: background-color 0.2s ease;
    cursor: pointer;
}

/* Survol */
.directory-row:hover {
    background-color: #e9f2fb !important;
}

/* Optionnel : léger effet visuel */
.directory-row:hover .member-name {
    color: #288FE2;
}

/* --- GESTION DE L'EMAIL TROP LONG --- */
.col-mail {
    white-space: nowrap;      /* Empêche le retour à la ligne */
    overflow: hidden;         /* Cache ce qui dépasse */
    text-overflow: ellipsis;  /* Ajoute "..." si c'est trop long */
}

/* Optionnel : afficher l'email complet au survol de la souris */
.col-mail:hover {
    overflow: visible;
    white-space: normal;
    background: #fff;
    position: relative;
    z-index: 10;
}

.tout-voir {
    color: white;
    background-color: var(--color-dark-blue);
    padding: 6px 14px;
    cursor: pointer;
    font-weight: 600;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tout-voir:hover {
    opacity: 0.85;
    opacity: 0.9; transform: translateY(-1px)
}

.tout-voir.active {
    background-color: orange;
    color: white;
}

.alpha-letter {
    color: var(--color-primary);
    cursor: pointer;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.16s;
}

.alphabet-bar .alpha-letter:active {
    background-color: var(--color-orange);
    color: white;
}

.alpha-letter:hover {
    background-color: var(--color-row-hover);
}

/* =========================================================
   🧾 ANNEXES (annuaire info)
   ========================================================= */
.annuaire-info h2 {
    color: var(--color-primary-dark);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
}

.annuaire-info p {
    font-size: var(--font-size-md);
    line-height: 1.5;
    margin-bottom: var(--spacing-xl);
}

/* =========================================================
   📋 LISTE DES INDIVIDUS (table-like)
   ========================================================= */
.largeur_main {
    width: 100%;
    margin-bottom: var(--spacing-xl);
    font-family: var(--font-family);
}

.table-wrapper {
    width: 100%;
    border-collapse: collapse;
}

/* Table header style (si tu veux uniformiser les <table> rendus par PHP) */
.table-wrapper thead th {
    background: var(--color-primary);
    color: #fff;
    padding: 8px;
    text-align: left;
    font-weight: 600;
}

/* J'ai gardé la structure flex-based que tu avais commentée initialement,
   mais tu utilises ici des <table> rendus par PHP — on stylise les <tr>/<td> inline. */

.table-row {
    display: table-row;
}

.table-row > .cell {
    display: table-cell;
    padding: 6px;
}

/* Alternance et hover gérés en PHP inline, mais on protège l'hover */
.table-row:hover {
    background-color: var(--color-row-hover) !important;
    cursor: pointer;
}

/* Styles reprenant les "cell classes" */
.name-cell { font-weight: 600; min-width: 150px; }
.fonction-cell { color: var(--color-text-medium); font-size: var(--font-size-md); min-width: 200px; }
.tel-cell { color: var(--color-primary); min-width: 100px; }
.lieu-cell { color: var(--color-text-medium); min-width: 80px; }

.symbole-mail {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-accent);
    width: 20px;
    text-align: center;
}

.filter-icon {
    width: 25px;   /* ajuste selon besoin */
    height: 25px;
    vertical-align: middle; /* pour l'aligner avec le texte ou les autres icônes */
    filter: brightness(1.3) contrast(1.2);
}


/* =========================================================
   📱 MEDIA QUERIES (Responsive)
   ========================================================= */

/* Tablette */
@media (max-width: 900px) {
    .fonction-cell,
    .tel-cell {
        display: none !important;
    }

    .name-cell { min-width: 120px; }
    .lieu-cell { min-width: 100px; }

    /* Si besoin, recherche peut se réduire */
    .search-container { flex: 0 0 260px; width: 100%; }
}

@media (min-width: 769px) {
    .directory-table {
        table-layout: fixed;
        width: 100%;
    }
    /* Largeurs PC */
    .directory-table th:nth-child(1), .directory-table td:nth-child(1) { width: 20%; }
    .directory-table th:nth-child(2), .directory-table td:nth-child(2) { width: 18%; }
    .directory-table th:nth-child(3), .directory-table td:nth-child(3) { width: 12%; }
    .directory-table th:nth-child(4), .directory-table td:nth-child(4) { width: 30%; }
    .directory-table th:nth-child(5), .directory-table td:nth-child(5) { width: 20%; }

    .col-mail {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* Mobile: la recherche passe sous les filtres proprement */
@media (max-width: 768px) {
    /* 1. On cache l'en-tête du tableau (les titres des colonnes) */
    .largeur_main thead {
        display: none;
    }

    .directory-layout {
        max-width: 100%;
    }

    /* Les filtres (Dpt, Site, etc.) s'empilent */
    .filters-container {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Le conteneur doit être un "flex" rigide */
    .search-container {
        display: flex !important;
        order: -1 !important;
        flex-direction: row !important; /* Force l'alignement horizontal */
        align-items: center !important;
        height: 40px !important;       /* Hauteur fixe obligatoire */
        max-height: 40px !important;
        padding: 0 0 0 15px !important;
        background: #f1f1f1 !important;
        border: 1px solid #ccc !important;
        width: 100% !important;
        max-width: 400px !important;
        box-sizing: border-box !important;
    }

    /* L'input doit arrêter de faire sa loi */
    #searchInput {
        height: 100% !important;
        line-height: normal !important; /* On laisse le navigateur centrer le texte */
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
        flex: 1 !important;            /* Il prend la place, mais rien de plus */
        font-size: 16px !important;
        display: inline-block !important; /* S'assure qu'il ne prend pas une ligne entière */
    }

    .filter-dropdown-container, .search-container {
        width: 100%;
        order: 0 !important;
        margin-bottom: 0px;
    }

    .filter-btn {
        width: 100%;
        justify-content: space-between;
    }

    .tout-voir {
        display: none;
    }

    .filter-btn:hover,
    .tout-voir:hover,
    .alpha-letter:hover {
        background-color: #ffb833; /* Un orange un peu plus clair au survol */
        color: white;
        cursor: pointer;
    }

    /* On cache tous les groupes par défaut sur mobile */
    .alphabet-group {
        display: none !important;
    }

    .alphabet-letters-group {
        margin-left: 0px;
    }
    /* On force l'affichage du premier groupe si on veut une sécurité CSS */
    .alphabet-group[data-letter="A"] {
        display: block;
    }

    /* Sauf celui qui a la classe 'active-mobile' */
    .alphabet-group.active-mobile {
        display: block !important;
    }

    /* La barre alphabétique devient scrollable horizontalement */
    .alphabet-bar {
        overflow-x: auto;
        white-space: nowrap;
        padding: 10px 0;
        justify-content: flex-start;
    }

    .alphabet-letters-group {
        display: flex;
    }

    .alpha-letter {
        min-width: 35px; /* On donne de la place pour cliquer avec le doigt */
        text-align: center;
    }

    /* Titre de la lettre */
    .letter-title {
        background: #278FE2 !important;
        color: white;
        padding: 10px;
        margin: 20px 0 0 0 !important;
        font-size: 18px;
    }

    /* On transforme le tableau en bloc */
    .directory-table {
        table-layout: auto !important; /* On annule le mode fixe */
        display: block;
        border: 1px solid #278FE2; /* Bordure bleue tout autour */
        border-top: none;          /* Sauf en haut car le titre fait office de bordure */
        border-bottom-right-radius: 20px; /* Arrondi en bas à droite uniquement */
        overflow: hidden;
        background: white;
    }

    .directory-table, .directory-table tbody, .directory-row {
        display: block !important;
        width: 100% !important;
    }

    .directory-table thead { display: none; }
    .directory-table tbody { display: block; }

    .directory-table td {
        display: block !important; /* On force chaque cellule à prendre toute la ligne */
        width: 100% !important;
        white-space: normal !important; /* On autorise le retour à la ligne pour l'email sur mobile */
        overflow: visible !important;
        text-overflow: clip !important;
        padding: 2px 0 !important;
    }

    .mobile-row {
        display: block;
        padding: 12px;
        border-bottom: 1px solid #eef6ff;
    }

    .mobile-row:last-child {
        border-bottom: none;
    }

    /* Typographies */
    .cell-main {
        display: block;
        padding: 0 !important;
        line-height: 1.4;
    }

    .member-name {
        font-weight: 700;
        color: #092851;
        font-size: 15px;
        text-transform: uppercase;
    }

    .member-meta {
        font-weight: 400;
        color: #666;
        font-size: 14px;
    }

    .cell-sub {
        display: block;
        padding: 4px 0 0 0 !important;
        font-size: 13px;
    }

    .member-email {
        color: #278FE2;
        text-decoration: none;
    }

    .member-sep { color: #ccc; }
    .member-site { color: #888; }

    .directory-row {
        margin-bottom: 15px;
        display: block;
        border: none !important; /* On enlève les bordures individuelles des lignes */
        border-bottom: 1px solid #eef6ff !important; /* Juste un filet de séparation interne */
        padding: 12px;
        background: #fff !important;
    }

    .directory-row td {
        display: block; /* Par défaut tout est en bloc */
        width: 100% !important;
        padding: 2px 0 !important;
        border: none !important;
    }

    .largeur_main tr {
        margin-bottom: 0; /* On colle les lignes */
        border: none;
        border-bottom: 1px solid #eee; /* Juste une petite ligne de séparation */
        border-left: 4px solid #092851; /* Une petite barre de couleur à gauche pour le style */
        padding: 12px 10px;
        background-color: #fff !important;
        box-shadow: none; /* On enlève l'ombre pour épurer */
    }

    /* 3. On rend les cellules plus compactes */
    .largeur_main td {
        padding: 2px 0 !important; /* Espace minimal entre les lignes d'une personne */
        border: none !important;
        font-size: 14px; /* Un peu plus petit pour le mode liste pro */
        color: #666;
    }

    /* Nom et Prénom : l'élément principal */
    .largeur_main td:first-child {
        font-weight: 700;
        color: #092851; /* Bleu foncé pro */
        font-size: 16px;
        margin-bottom: 3px;
        border-bottom: none !important; /* On enlève la ligne sous le nom */
    }

    /* Le Nom en premier, bien visible */
    .col-name {
        padding: 0 0 5px 0 !important;
        font-weight: 800;
        color: #092851;
        font-size: 16px;
    }

    .directory-table .col-statut,
    .directory-table .col-dept {
        display: inline-block !important; /* On essaie inline-block au lieu de inline */
        width: auto !important;
        padding: 0 !important;
        vertical-align: top;
        font-size: 14px;
    }

    /* On ajoute le petit tiret de séparation entre les deux uniquement sur mobile */
    .col-statut:after {
        content: " — ";
        white-space: pre;
    }

    /* Mail et Site en dessous */
    .col-mail, .col-site {
        padding: 4px 0 0 0 !important;
        font-size: 13px;
    }

    .col-mail { color: #278FE2; }
    .col-site { color: #888; }

}