:root {
–ipd-blue: #003B7A;
–ipd-light-blue: #0066CC;
–ipd-gold: #C9A84C;
–ipd-gray: #F4F6F9;
–ipd-text: #2C2C2C;
–ipd-border: #DDE3ED;
–card-radius: 12px;
–transition: 0.25s ease;
}
#ipd-annuaire-wrapper {
font-family: ‘Segoe UI’, Arial, sans-serif;
max-width: 1200px;
margin: 0 auto;
padding: 40px 20px;
color: var(–ipd-text);
}
/* ── HEADER ── */
.annuaire-header {
text-align: center;
margin-bottom: 40px;
}
.annuaire-header h1 {
font-size: 2rem;
color: var(–ipd-blue);
margin-bottom: 8px;
font-weight: 700;
letter-spacing: -0.5px;
}
.annuaire-header p {
color: #6B7280;
font-size: 1rem;
margin: 0;
}
.annuaire-header .count-badge {
display: inline-block;
background: var(–ipd-gold);
color: #fff;
font-size: 0.8rem;
font-weight: 600;
padding: 4px 14px;
border-radius: 20px;
margin-top: 10px;
}
/* ── FILTRES ── */
.annuaire-filters {
background: #fff;
border: 1px solid var(–ipd-border);
border-radius: var(–card-radius);
padding: 20px 24px;
margin-bottom: 32px;
display: flex;
flex-wrap: wrap;
gap: 14px;
align-items: flex-end;
box-shadow: 0 2px 8px rgba(0,59,122,0.05);
}
.filter-group {
display: flex;
flex-direction: column;
gap: 5px;
flex: 1;
min-width: 180px;
}
.filter-group label {
font-size: 0.75rem;
font-weight: 600;
color: var(–ipd-blue);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.filter-group input,
.filter-group select {
border: 1px solid var(–ipd-border);
border-radius: 8px;
padding: 9px 13px;
font-size: 0.9rem;
color: var(–ipd-text);
background: var(–ipd-gray);
outline: none;
transition: border-color var(–transition);
}
.filter-group input:focus,
.filter-group select:focus {
border-color: var(–ipd-light-blue);
background: #fff;
}
.btn-reset {
background: none;
border: 1px solid var(–ipd-border);
border-radius: 8px;
padding: 9px 18px;
font-size: 0.85rem;
color: #6B7280;
cursor: pointer;
transition: all var(–transition);
white-space: nowrap;
align-self: flex-end;
}
.btn-reset:hover {
border-color: #999;
color: var(–ipd-text);
}
/* ── STATS BAR ── */
.annuaire-stats-bar {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 18px;
font-size: 0.85rem;
color: #6B7280;
}
.annuaire-stats-bar strong {
color: var(–ipd-blue);
}
/* ── VIEW TOGGLES ── */
.view-toggles {
display: flex;
gap: 6px;
}
.view-btn {
background: none;
border: 1px solid var(–ipd-border);
border-radius: 6px;
padding: 5px 10px;
cursor: pointer;
color: #9CA3AF;
font-size: 1rem;
transition: all var(–transition);
}
.view-btn.active {
background: var(–ipd-blue);
border-color: var(–ipd-blue);
color: #fff;
}
/* ── GRID ── */
.scientists-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 22px;
}
.scientists-grid.list-view {
grid-template-columns: 1fr;
}
.scientists-grid.list-view .scientist-card {
flex-direction: row;
align-items: center;
padding: 16px 20px;
gap: 18px;
}
.scientists-grid.list-view .card-avatar {
width: 64px;
height: 64px;
flex-shrink: 0;
margin: 0;
}
.scientists-grid.list-view .card-body {
flex: 1;
}
.scientists-grid.list-view .card-body p {
display: none;
}
/* ── CARD ── */
.scientist-card {
background: #fff;
border: 1px solid var(–ipd-border);
border-radius: var(–card-radius);
padding: 24px 20px 20px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
transition: transform var(–transition), box-shadow var(–transition);
cursor: pointer;
position: relative;
overflow: hidden;
}
.scientist-card::before {
content: »;
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: var(–dept-color, var(–ipd-blue));
}
.scientist-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 30px rgba(0,59,122,0.12);
border-color: var(–ipd-light-blue);
}
.scientist-card.hidden {
display: none;
}
.card-avatar {
width: 80px;
height: 80px;
border-radius: 50%;
background: var(–ipd-gray);
margin: 0 auto 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
font-weight: 700;
color: var(–ipd-blue);
border: 3px solid var(–dept-color, var(–ipd-blue));
flex-shrink: 0;
overflow: hidden;
}
.card-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.card-body h3 {
font-size: 1rem;
font-weight: 700;
color: var(–ipd-blue);
margin: 0 0 4px;
line-height: 1.3;
}
.card-role {
font-size: 0.8rem;
color: var(–ipd-light-blue);
font-weight: 600;
margin: 0 0 6px;
}
.card-dept {
display: inline-block;
font-size: 0.72rem;
padding: 3px 10px;
border-radius: 20px;
background: var(–ipd-gray);
color: #6B7280;
font-weight: 500;
margin-bottom: 10px;
}
.card-body p {
font-size: 0.82rem;
color: #6B7280;
margin: 0 0 12px;
line-height: 1.5;
}
.card-tags {
display: flex;
flex-wrap: wrap;
gap: 5px;
justify-content: center;
margin-top: auto;
}
.tag {
font-size: 0.68rem;
padding: 2px 8px;
border-radius: 10px;
background: #EBF3FF;
color: var(–ipd-blue);
font-weight: 500;
}
.card-contact {
margin-top: 12px;
display: flex;
gap: 8px;
justify-content: center;
}
.card-contact a {
font-size: 0.75rem;
color: var(–ipd-light-blue);
text-decoration: none;
padding: 4px 10px;
border: 1px solid var(–ipd-border);
border-radius: 6px;
transition: all var(–transition);
}
.card-contact a:hover {
background: var(–ipd-blue);
color: #fff;
border-color: var(–ipd-blue);
}
/* ── NO RESULT ── */
.no-results {
display: none;
text-align: center;
padding: 60px 20px;
color: #9CA3AF;
grid-column: 1 / -1;
}
.no-results.visible { display: block; }
.no-results svg { margin-bottom: 16px; opacity: 0.4; }
.no-results p { font-size: 1rem; }
@media (max-width: 600px) {
.annuaire-filters { flex-direction: column; }
.annuaire-header h1 { font-size: 1.5rem; }
.scientists-grid.list-view .scientist-card { flex-direction: column; text-align: center; }
}
(function() {
const cards = document.querySelectorAll(‘.scientist-card[data-nom]’);
const noResults = document.getElementById(‘no-results’);
const resultCount = document.getElementById(‘result-count’);
const totalCount = document.getElementById(‘total-count’);
totalCount.textContent = cards.length + ‘ scientifiques’;
function normalize(str) {
return str.toLowerCase().normalize(‘NFD’).replace(/[u0300-u036f]/g, »);
}
function filterCards() {
const search = normalize(document.getElementById(‘filter-search’).value.trim());
const dept = document.getElementById(‘filter-dept’).value;
const grade = document.getElementById(‘filter-grade’).value;
const specialite = document.getElementById(‘filter-specialite’).value;
let visible = 0;
cards.forEach(function(card) {
const nom = normalize(card.dataset.nom || »);
const cardDept = card.dataset.dept || »;
const cardGrade = card.dataset.grade || »;
const cardSpec = card.dataset.specialite || »;
const tags = normalize(card.querySelector(‘.card-tags’) ? card.querySelector(‘.card-tags’).textContent : »);
const desc = normalize(card.querySelector(‘.card-body p:not(.card-role)’) ? card.querySelector(‘.card-body p:not(.card-role)’).textContent : »);
const matchSearch = !search || nom.includes(search) || tags.includes(search) || desc.includes(search);
const matchDept = !dept || cardDept === dept;
const matchGrade = !grade || cardGrade === grade;
const matchSpec = !specialite || cardSpec === specialite;
if (matchSearch && matchDept && matchGrade && matchSpec) {
card.classList.remove(‘hidden’);
visible++;
} else {
card.classList.add(‘hidden’);
}
});
resultCount.innerHTML = ‘Affichage de ‘ + visible + ‘ scientifique’ + (visible > 1 ? ‘s’ : »);
noResults.classList.toggle(‘visible’, visible === 0);
}
document.getElementById(‘filter-search’).addEventListener(‘input’, filterCards);
document.getElementById(‘filter-dept’).addEventListener(‘change’, filterCards);
document.getElementById(‘filter-grade’).addEventListener(‘change’, filterCards);
document.getElementById(‘filter-specialite’).addEventListener(‘change’, filterCards);
window.resetFilters = function() {
document.getElementById(‘filter-search’).value = »;
document.getElementById(‘filter-dept’).value = »;
document.getElementById(‘filter-grade’).value = »;
document.getElementById(‘filter-specialite’).value = »;
filterCards();
};
window.setView = function(view) {
const grid = document.getElementById(‘scientists-grid’);
const btnGrid = document.getElementById(‘btn-grid’);
const btnList = document.getElementById(‘btn-list’);
if (view === ‘list’) {
grid.classList.add(‘list-view’);
btnList.classList.add(‘active’);
btnGrid.classList.remove(‘active’);
} else {
grid.classList.remove(‘list-view’);
btnGrid.classList.add(‘active’);
btnList.classList.remove(‘active’);
}
};
filterCards();
})();
🔬 Annuaire des Scientifiques
Institut Pasteur de Dakar — Communauté scientifique
Chargement…
Tous les départements
Virologie
Bactériologie
Immunologie
Épidémiologie
Bioinformatique
Santé Publique
Parasitologie
Tous les grades
Directeur de Recherche
Chercheur Senior
Chercheur
Post-doctorant
Doctorant
Ingénieur de Recherche
Toutes les spécialités
Arbovirus
VIH
Paludisme
Tuberculose
Vaccins
Diagnostics
Méningite
AS
SM
FD
IS
MN
OF
AT
MS
RN
CL
ND
BN
Aucun scientifique ne correspond à votre recherche.