/* ═══════════════════════════════════════════════════════════════════
BéBé Journal — Listing des Bébés
═══════════════════════════════════════════════════════════════════ */

.baby-grid {
    margin-top: 1.5rem;
}

.baby-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.5rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-left-width: 4px !important; /* Petit indicateur visuel de couleur sur la gauche */
}

.baby-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md, 0 8px 30px rgba(0,0,0,0.06));
}

/* Couleurs des bordures gauches selon le genre /
.baby-card.gender-border-girl  { border-left-color: #f472b6 !important; } / Rose /
.baby-card.gender-border-boy   { border-left-color: #60a5fa !important; } / Bleu */
.baby-card.gender-border-none,
.baby-card.gender-border-other { border-left-color: var(--clay) !important; }

/* Structure interne de la carte */
.baby-card-main {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

/* Avatar & Placeholders */
.baby-avatar-wrapper {
    flex-shrink: 0;
}

.baby-avatar,
.baby-avatar-placeholder {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: var(--r-md, 12px);
    object-fit: cover;
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    border: 2px solid transparent;
}

/* Nuance de bordure pour les avatars */
.baby-avatar.gender-color-girl  { border-color: rgba(244, 114, 182, 0.4); }
.baby-avatar.gender-color-boy   { border-color: rgba(96, 165, 250, 0.4); }
.baby-avatar.gender-color-none,
.baby-avatar.gender-color-other { border-color: var(--border); }

/* Placeholders de couleur si aucune photo de profil n'est définie */
.baby-avatar-placeholder.gender-color-girl  { background: rgba(244, 114, 182, 0.12); }
.baby-avatar-placeholder.gender-color-boy   { background: rgba(96, 165, 250, 0.12); }
.baby-avatar-placeholder.gender-color-none,
.baby-avatar-placeholder.gender-color-other { background: rgba(196, 120, 90, 0.10); }

/* Infos du bébé /
.baby-card-details {
display: flex;
flex-direction: column;
gap: 0.5rem;
min-width: 0; / Permet au texte de tronquer proprement si trop long */

.baby-name {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Badges & Tags */
.baby-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.baby-tag {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* Thème des tags par genre */
.gender-tag-girl { background-color: rgba(244, 114, 182, 0.12); color: #db2777; }
.gender-tag-boy  { background-color: rgba(96, 165, 250, 0.12);  color: #2563eb; }
.gender-tag-none,
.gender-tag-other { background-color: var(--surface-low); color: var(--text-muted); }

/* Thème des tags de dates */
.birth-tag {
    background-color: var(--surface-low);
    color: var(--text-main);
    border: 1px solid var(--border);
}

.birth-tag.tag-upcoming {
    background-color: rgba(196, 120, 90, 0.08);
    color: var(--clay);
    border-color: rgba(196, 120, 90, 0.15);
}

.zodiac-tag {
    background-color: rgba(138, 90, 180, 0.08);
    color: #8a5ab4;
    border: 1px solid rgba(138, 90, 180, 0.15);
}

/* Actions au bas de la carte */
.baby-card-actions {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}

.btn-view-baby {
    flex: 2;
    justify-content: center;
    padding: 0.65rem 1rem;
    font-size: 0.85rem;
    box-shadow: none;
}

.btn-view-baby:hover {
    box-shadow: none;
}

.btn-edit-baby {
    flex: 1;
    justify-content: center;
    padding: 0.65rem 1rem;
    font-size: 0.85rem;
    border: 1.5px solid var(--border);
}