/* Page /team */

.tm-hero { position: relative; overflow: hidden; padding: 4.6rem 0 2.4rem; text-align: center; border-bottom: 1px solid var(--hd-hairline); }
.tm-hero::before { content: ""; position: absolute; left: 50%; top: -340px; width: 900px; height: 620px; transform: translateX(-50%); background: radial-gradient(ellipse at center, var(--hd-brand-glow), transparent 62%); pointer-events: none; }
.tm-hero__inner { position: relative; }
.tm-hero h1 { margin: .3rem 0 .6rem; font-size: clamp(2.1rem, 4.8vw, 3.4rem); letter-spacing: -.04em; line-height: 1.05; }
.tm-hero .lead { max-width: 620px; margin: 0 auto; line-height: 1.65; }
.tm-stats { display: inline-flex; gap: .6rem; margin: 1.4rem 0 1.3rem; }
.tm-stats > div { display: flex; flex-direction: column; min-width: 120px; padding: .7rem 1rem; border: 1px solid var(--hd-border); border-radius: var(--hd-radius); background: var(--hd-surface); }
.tm-stats strong { font-family: var(--hd-font-display); font-size: 1.5rem; line-height: 1.1; }
.tm-stats span { font-size: .74rem; color: var(--hd-text-muted); text-transform: uppercase; letter-spacing: .06em; }
.tm-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; }

.tm-nav { margin-top: 1.4rem; }
.tm-body { padding-top: 1.2rem; }

.tm-group { --rc: #5865F2; margin-bottom: 1.2rem; padding: 1.25rem 1.3rem 1.35rem; border: 1px solid var(--hd-border); border-radius: var(--hd-radius-lg); background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 7%, var(--hd-surface)), var(--hd-surface) 70%); }
.tm-group__head { display: flex; align-items: center; gap: .6rem; }
.tm-group__head h2 { margin: 0; display: flex; align-items: center; gap: .55rem; font-size: 1.12rem; color: var(--rc); }
.tm-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--rc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--rc) 22%, transparent); }
.tm-count { padding: .1rem .55rem; border-radius: 999px; background: color-mix(in srgb, var(--rc) 16%, transparent); color: var(--rc); font-size: .76rem; font-weight: 800; }
.tm-group__desc { margin: .45rem 0 0; color: var(--hd-text-muted); font-size: .88rem; max-width: 720px; }

.tm-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); gap: 0 1.2rem; align-items: start; }

.tm-card { display: flex; align-items: center; gap: .75rem; padding: .7rem .8rem; border: 1px solid var(--hd-border); border-radius: 14px; background: var(--hd-surface-2); color: inherit; text-decoration: none; transition: border-color var(--hd-transition), transform var(--hd-transition), background var(--hd-transition); }
a.tm-card:hover { border-color: color-mix(in srgb, var(--rc) 60%, transparent); transform: translateY(-2px); }
.tm-card > img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: none; border: 2px solid var(--rc); background: var(--hd-surface-3); }
.tm-card__body { display: grid; gap: .25rem; min-width: 0; }
.tm-card__name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-card__link { font-size: .74rem; color: var(--hd-text-muted); }
a.tm-card:hover .tm-card__link { color: var(--rc); }
.tm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .65rem; margin-top: 1rem; }

.tm-tags { display: flex; flex-wrap: wrap; gap: .25rem; }
.tm-tag { --tc: #94a3b8; padding: .08rem .45rem; border-radius: 6px; font-size: .68rem; font-weight: 700; color: var(--tc); background: color-mix(in srgb, var(--tc) 14%, transparent); border: 1px solid color-mix(in srgb, var(--tc) 30%, transparent); white-space: nowrap; }

/* Direction : cartes mises en avant */
.tm-group--lead { padding: 1.5rem; }
.tm-lead { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .9rem; margin-top: 1.1rem; }
.tm-card--lead { flex-direction: column; text-align: center; gap: .45rem; padding: 1.4rem 1rem 1.2rem; border-radius: var(--hd-radius-lg); background: var(--hd-surface); }
.tm-card--lead > img { width: 92px; height: 92px; border-width: 3px; box-shadow: 0 0 0 6px color-mix(in srgb, var(--rc) 14%, transparent), 0 14px 34px rgba(0, 0, 0, .3); margin-bottom: .35rem; }
.tm-card--lead .tm-card__name { font-size: 1.05rem; max-width: 100%; }
.tm-card__role { font-size: .78rem; font-weight: 700; color: var(--rc); text-transform: uppercase; letter-spacing: .06em; }
.tm-card--lead .tm-tags { justify-content: center; }

.tm-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.6rem; margin-top: 1.6rem; padding: 1.5rem 1.6rem; border-radius: var(--hd-radius-lg); border: 1px solid rgba(88, 101, 242, .35); background: linear-gradient(120deg, rgba(88, 101, 242, .16), rgba(88, 101, 242, .04) 60%), var(--hd-surface); }
.tm-cta h2 { margin: 0 0 .3rem; font-size: 1.2rem; }
.tm-cta p { margin: 0; color: var(--hd-text-muted); max-width: 560px; }
.tm-cta__actions { display: flex; flex-wrap: wrap; gap: .55rem; }
.tm-note { margin: 1.2rem 0 0; text-align: center; font-size: .82rem; color: var(--hd-text-faint); }
.tm-empty { display: grid; justify-items: center; gap: .6rem; padding: 3rem 1rem; border: 1px dashed var(--hd-border-strong); border-radius: var(--hd-radius-lg); color: var(--hd-text-muted); }
.tm-empty i { font-size: 2rem; opacity: .5; }

@media (max-width: 640px) {
    .tm-hero { padding: 3.2rem 0 1.8rem; }
    .tm-stats > div { min-width: 0; flex: 1; }
    .tm-stats span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .tm-lead { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
    .tm-card--lead > img { width: 68px; height: 68px; }
    .tm-group { padding: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .tm-card { transition: none; } }