/* ==========================================================================
   webroot/css/man-widgets.css — Blocs de la colonne de droite (oct. 2026)

   Discrets : la colonne accompagne l'article, elle ne doit pas lui voler l'attention.
   Fond blanc cassé, titre en texte foncé ; la couleur (charte : terracotta, rouge, ocre)
   ne sert que de repère : liseré du haut, icône, podium.
   Contrastes vérifiés : accent sur fond clair ≥ 5.6:1, gris ≥ 5.9:1.
   ========================================================================== */

.man-widget {
    --w-accent: #9a3412;          /* défaut : terracotta */
    --w-soft:   #fdf3ec;
    --w-cream:  #fffdfa;
    --w-text:   #2b2420;
    --w-muted:  #6b6158;          /* 5.9:1 sur crème */
    --w-line:   #efe4d8;

    background: var(--w-cream);
    border: 1px solid var(--w-line);
    border-top: 3px solid var(--w-accent);   /* seul repère de couleur du bloc */
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    font-size: .88rem;
}
.man-widget--hot    { --w-accent: #9a3412; --w-soft: #fdf3ec; }   /* terracotta 7.3:1 */
.man-widget--danger { --w-accent: #b42318; --w-soft: #fdf1f0; }   /* rouge 6.6:1 */
.man-widget--bday   { --w-accent: #8a5a00; --w-soft: #fdf7e8; }   /* ocre 5.9:1 */

/* ── Bandeau de titre ── */
.man-widget__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .5rem;
    margin: 0;
    padding: .7rem 1rem .55rem;
    border-bottom: 1px solid var(--w-line);
    color: var(--w-text);
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .01em;
}
.man-widget__title > i { color: var(--w-accent); }
.man-widget__subtitle {
    flex-basis: 100%;
    font-size: .78rem;
    font-weight: 400;
    color: var(--w-muted);
}
.man-widget__body { padding: .25rem 0; }
.man-widget__empty {
    margin: 0;
    padding: 1rem;
    color: var(--w-muted);
    text-align: center;
    font-size: .85rem;
}
.man-widget__section {
    margin: .5rem 1rem .25rem;
    padding-top: .5rem;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--w-accent);
}
.man-widget__section:not(:first-child) { border-top: 1px dashed var(--w-line); }

/* Liens : couleur du texte, accent au survol ; focus clavier bien visible */
.man-widget a {
    color: var(--w-text);
    text-decoration: none;
}
.man-widget a:hover { color: var(--w-accent); text-decoration: underline; }
.man-widget a:focus-visible {
    outline: 3px solid var(--w-accent);
    outline-offset: 2px;
    border-radius: 2px;
}
/* stretched-link : toute la ligne est cliquable, le contour suit la ligne */
.man-widget .position-relative:focus-within,
.man-rank__item:focus-within {
    background: var(--w-soft);
}

/* ── Vignettes rondes (classement, anniversaires) ── */
.man-rank__thumb,
.man-bday-item__photo {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--w-soft);
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--w-line);
}
.man-rank__thumb picture,
.man-bday-item__photo picture { display: block; width: 100%; height: 100%; }
.man-rank__thumb img,
.man-bday-item__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Les plus lus ── */
.man-rank {
    list-style: none;
    margin: 0;
    padding: 0;
}
.man-rank__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem 1rem;
    border-bottom: 1px solid var(--w-line);
    transition: background .15s;
}
.man-rank__item:last-child { border-bottom: 0; }
.man-rank__item:hover { background: var(--w-soft); }
.man-rank__number {
    flex: 0 0 1.6rem;
    height: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: .78rem;
    font-weight: 700;
    color: var(--w-muted);
}
/* Podium : chiffre de la couleur du bloc sur fond très clair, sans aplat vif */
.man-rank__item--top .man-rank__number {
    background: var(--w-soft);
    color: var(--w-accent);
}
.man-rank__text {
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.man-rank__name {
    font-weight: 600;
    line-height: 1.25;
    /* 2 lignes au plus : un nom long reste lisible dans une colonne étroite */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.man-rank__meta {
    color: var(--w-muted);
    font-size: .76rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Espèces en danger ── */
.man-species {
    margin: .75rem;
    background: #fff;
    border: 1px solid var(--w-line);
    border-radius: 10px;
    overflow: hidden;
}
.man-species + .man-species { margin-top: 0; }
.man-species__photo {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--w-soft);
}
.man-species__photo picture { display: block; width: 100%; height: 100%; }
.man-species__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.man-species__type {
    position: absolute;
    top: .5rem;
    left: .5rem;
    padding: .2rem .55rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, .65);
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
}
.man-species__body { padding: .65rem .8rem .8rem; }
.man-species__name {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 .15rem;
}
.man-species__latin,
.man-species__creole,
.man-species__threat {
    margin: 0 0 .2rem;
    font-size: .8rem;
    color: var(--w-muted);
}
.man-species__threat i { width: 1rem; color: var(--w-accent); }

/* Statuts UICN : texte blanc, contraste ≥ 4.5:1 pour chacun */
.man-iucn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: .35rem 0 .35rem;
    padding: .2rem .6rem .2rem .25rem;
    border-radius: 999px;
    color: #fff;
    font-size: .76rem;
    font-weight: 600;
    background: #5c534a;
}
.man-iucn abbr {
    text-decoration: none;
    background: rgba(255, 255, 255, .22);
    border-radius: 999px;
    padding: .05rem .4rem;
    font-weight: 700;
}
.man-iucn--ex { background: #212121; }  /* 16:1 */
.man-iucn--ew { background: #4a148c; }  /* 11.9:1 */
.man-iucn--cr { background: #7f1d1d; }  /* 10:1 */
.man-iucn--en { background: #b42318; }  /* 6.6:1 */
.man-iucn--vu { background: #c2410c; }  /* 5.2:1 */
.man-iucn--nt { background: #8a5a00; }  /* 5.9:1 */
.man-iucn--lc { background: #166534; }  /* 7.1:1 */

/* ── Anniversaires ── */
.man-bday-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.man-bday-item {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .55rem 1rem;
    transition: background .15s;
}
.man-bday-item:hover { background: var(--w-soft); }
.man-bday-item__text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}
.man-bday-item__name { font-weight: 600; line-height: 1.25; }
.man-bday-item__detail {
    font-size: .78rem;
    color: var(--w-muted);
    line-height: 1.35;
}
.man-bday-item__detail strong { color: var(--w-text); font-weight: 600; }
.man-bday-item__age {
    display: inline-block;
    padding: 0 .45rem;
    border-radius: 999px;
    background: var(--w-soft);
    color: var(--w-accent) !important;
}

@media (prefers-reduced-motion: reduce) {
    .man-rank__item,
    .man-bday-item { transition: none; }
}

/* Colonne plus étroite sur grand écran (layout : col-xl-3) : marges un peu réduites */
@media (min-width: 1200px) {
    .man-widget__title,
    .man-rank__item,
    .man-bday-item { padding-left: .85rem; padding-right: .85rem; }
    .man-species { margin: .6rem; }
}