/* ═══════════════════════════════════════════════════════════
   Assemblée Membres — Front-end Styles
   Responsive • Fidèle au design original
═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;600;700&display=swap');

/* ── Reset & Base ── */
.am-wrapper *,
.am-wrapper *::before,
.am-wrapper *::after {
    box-sizing: border-box;
}

/* ── Grille ── */
.am-wrapper {
    display: grid;
    gap: 2.5rem 2rem;
    padding: 2.5rem 1rem;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    font-family: 'Source Sans 3', 'Segoe UI', Arial, sans-serif;
}

/* Colonnes dynamiques */
.am-cols-1 { grid-template-columns: repeat(1, 1fr); }
.am-cols-2 { grid-template-columns: repeat(2, 1fr); }
.am-cols-3 { grid-template-columns: repeat(3, 1fr); }
.am-cols-4 { grid-template-columns: repeat(4, 1fr); }
.am-cols-5 { grid-template-columns: repeat(5, 1fr); }
.am-cols-6 { grid-template-columns: repeat(6, 1fr); }

/* ── Carte ── */
.am-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.25rem 1rem 1.5rem;
    background: #fff;
    border-radius: 4px;
    transition: transform .25s ease, box-shadow .25s ease;
}

.am-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 28px rgba(0,0,0,.10);
}

/* ── Photo wrap : le cercle visible ── */
.am-photo-wrap {
    position: relative;
    width: 170px;
    height: 170px;
    margin-bottom: 1.4rem;
    flex-shrink: 0;
    border-radius: 50%;
    /* Anneau fin gris avec espace blanc intégré */
    outline: 0px solid #ffffff;
    box-shadow:
        0 0 0 1.5px #cdd6df,          /* anneau gris extérieur */
        0 6px 22px rgba(0,0,0,.12);    /* ombre portée douce */
    transition: box-shadow .3s;
}

.am-card:hover .am-photo-wrap {
    box-shadow:
        0 0 0 1.5px #8fafc0,
        0 8px 28px rgba(0,0,0,.17);
}

/* Div gap — non nécessaire mais gardé pour compat HTML */
.am-photo-gap { display: none; }

/* Anneau ring — géré par outline+box-shadow ci-dessus */
.am-photo-ring { display: none; }

/* Image : parfaitement clippée dans le cercle */
.am-photo {
    width: 170px;
    height: 170px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center 20%;   /* centré légèrement vers le haut pour les portraits */
    display: block;
    background: #e4eaf0;
    overflow: hidden;              /* sécurité navigateurs anciens */
}

/* Placeholder SVG */
.am-photo-placeholder {
    width: 170px;
    height: 170px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e4eaf0;
    overflow: hidden;
}

.am-photo-placeholder svg {
    width: 90px;
    height: 90px;
}

/* ── Textes ── */
.am-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

/* Titre seul sur sa ligne (normal, pas gras) */
.am-titre {
    display: block;
    font-weight: 400;
    font-size: .95rem;
    color: #2c3e50;
    line-height: 1.5;
    margin: 0;
}

/* Prénom + Nom en gras sur la ligne suivante */
.am-name {
    display: block;
    margin: 0 0 .45rem 0;
    font-size: 1rem;
    font-weight: 700;
    color: #1a2a3a;
    line-height: 1.3;
}

.am-fonction {
    margin: 0;
    font-size: .875rem;
    font-weight: 400;
    color: #6b7b8d;
    line-height: 1.5;
}

/* ── Message vide ── */
.am-empty {
    text-align: center;
    color: #888;
    font-style: italic;
    padding: 2rem;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */

/* Tablette large (≤1024px) : max 3 colonnes */
@media (max-width: 1024px) {
    .am-cols-4,
    .am-cols-5,
    .am-cols-6 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Tablette (≤768px) : 2 colonnes */
@media (max-width: 768px) {
    .am-wrapper {
        gap: 2rem 1.5rem;
    }

    .am-cols-3,
    .am-cols-4,
    .am-cols-5,
    .am-cols-6 {
        grid-template-columns: repeat(2, 1fr);
    }

    .am-photo-wrap        { width: 140px; height: 140px; }
    .am-photo             { width: 140px; height: 140px; }
    .am-photo-placeholder { width: 140px; height: 140px; }
}

/* Mobile (≤480px) : 1 colonne ou 2 colonnes étroites */
@media (max-width: 480px) {
    .am-wrapper {
        padding: 1.5rem .75rem;
        gap: 1.5rem 1rem;
    }

    /* 1 colonne pour les grilles ≤ 3 */
    .am-cols-1,
    .am-cols-2,
    .am-cols-3 {
        grid-template-columns: 1fr;
    }

    /* 2 colonnes pour les grandes grilles */
    .am-cols-4,
    .am-cols-5,
    .am-cols-6 {
        grid-template-columns: repeat(2, 1fr);
    }

    .am-photo-wrap        { width: 115px; height: 115px; }
    .am-photo             { width: 115px; height: 115px; }
    .am-photo-placeholder { width: 115px; height: 115px; }

    .am-name    { font-size: .95rem; }
    .am-fonction{ font-size: .8rem; }
}

/* Très petit écran (≤360px) : tout en 1 colonne */
@media (max-width: 360px) {
    .am-cols-4,
    .am-cols-5,
    .am-cols-6 {
        grid-template-columns: 1fr;
    }
}