/**
 * Bloc Équipe — shokola_equipe
 * Réf. maquette : _claude/equipe2.html
 * Tokens (--ink, --paper, --magenta, --sans…) aliasés dans custom.css.
 * Portée : .shk-team (racine du bloc, prefixée .shk-root).
 */
.shk-team {
    --ease: cubic-bezier(.16, 1, .3, 1);
    --ease-io: cubic-bezier(.76, 0, .24, 1);
    background: var(--paper);
    color: var(--ink);
}
.shk-team a { text-decoration: none; color: inherit; }

.shk-team__inner { max-width: 1480px; margin: 0 auto; padding: 0 var(--pad); }

/* COLONNES */
.shk-team-grid { padding: clamp(40px, 7vw, 110px) 0 clamp(60px, 10vw, 140px); position: relative; z-index: 1; }
.shk-team-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 40px); align-items: start; }
.shk-tcol { display: flex; flex-direction: column; gap: clamp(28px, 4vw, 72px); will-change: transform; }
.shk-tcol:nth-child(2) { margin-top: clamp(40px, 9vw, 140px); }
.shk-tcol:nth-child(3) { margin-top: clamp(16px, 4vw, 64px); }

.shk-tcard {
    position: relative; opacity: 0; transform: translateY(46px); cursor: pointer;
    transition: opacity 1s var(--ease), transform 1s var(--ease); border: none; background: none;
    text-align: left; font: inherit; color: inherit; width: 100%; display: block; padding: 0;
}
.shk-tcard.in { opacity: 1; transform: none; }
.shk-tcard:focus-visible { outline: 2px solid var(--magenta); outline-offset: 6px; }
.shk-tcard__imgwrap {
    position: relative; overflow: hidden; border-radius: 3px; aspect-ratio: 3/4; transform: scale(1);
    transition: transform 1.2s var(--ease-io); display: block;
}
.shk-tcard:hover .shk-tcard__imgwrap { transform: scale(.93, .9); }
.shk-tcard__img {
    position: absolute; inset: 0; background-size: cover; background-position: 50% 30%;
    display: grid; place-items: center; transform: scale(1); transition: transform 1.2s var(--ease-io);
}
.shk-tcard:hover .shk-tcard__img { transform: scale(1.22); }
.shk-tcard__initials {
    font-family: var(--mono); font-weight: 500; font-size: clamp(2.4rem, 4vw, 3.6rem); letter-spacing: .04em;
    color: rgba(255, 255, 255, .92); mix-blend-mode: overlay; transition: opacity .5s;
}
.shk-tcard:hover .shk-tcard__initials { opacity: .5; }
.shk-tcard__reg { position: absolute; top: 12px; left: 12px; width: 18px; height: 18px; z-index: 2; opacity: .7; mix-blend-mode: overlay; }
.shk-tcard__reg::before, .shk-tcard__reg::after { content: ""; position: absolute; background: #fff; }
.shk-tcard__reg::before { left: 50%; top: 0; width: 1px; height: 100%; }
.shk-tcard__reg::after { top: 50%; left: 0; height: 1px; width: 100%; }
.shk-tcard__no { position: absolute; top: 12px; right: 14px; z-index: 2; font-family: var(--mono); font-size: .7rem; color: rgba(255, 255, 255, .7); }
.shk-tcard__plus {
    position: absolute; right: 14px; bottom: 14px; z-index: 2; width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .5); display: grid; place-items: center; color: #fff; font-family: var(--mono);
    opacity: 0; transform: translateY(8px); transition: .45s var(--ease);
}
.shk-tcard:hover .shk-tcard__plus { opacity: 1; transform: none; background: #fff; color: var(--ink); }
.shk-tcard__cap {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 14px;
    border-top: 1px solid var(--line); margin-top: 14px; transition: border-color .5s;
}
.shk-tcard:hover .shk-tcard__cap { border-color: var(--ink); }
.shk-tcard__name { font-weight: 700; letter-spacing: -.02em; font-size: clamp(1.05rem, 1.5vw, 1.35rem); transition: transform .5s var(--ease); }
.shk-tcard:hover .shk-tcard__name { transform: translateX(6px); }
.shk-tcard__role {
    font-family: var(--mono); font-size: .72rem; letter-spacing: .04em; color: var(--ink-soft);
    text-align: right; text-transform: uppercase; max-width: 13ch; line-height: 1.35;
}
.shk-tcard__bio { display: none; }

@media (max-width: 880px) {
    .shk-team-cols { grid-template-columns: repeat(2, 1fr); gap: 18px; }
    .shk-tcol:nth-child(2), .shk-tcol:nth-child(3) { margin-top: 0; }
    .shk-tcol { gap: 34px; }
}
@media (max-width: 540px) { .shk-team-cols { grid-template-columns: 1fr; } }

/* ════════ VUE DÉTAIL (clic) ════════ */
.shk-tfly {
    position: fixed; z-index: 140; border-radius: 3px; background-size: cover; background-position: 50% 30%;
    pointer-events: none; will-change: left, top, width, height;
    transition: left .85s var(--ease-io), top .85s var(--ease-io), width .85s var(--ease-io), height .85s var(--ease-io);
    box-shadow: 0 40px 100px rgba(0, 0, 0, .45);
}

.shk-tdetail {
    position: fixed; inset: 0; z-index: 130; background: var(--ink); color: var(--paper);
    opacity: 0; pointer-events: none; overflow-y: auto; transition: opacity .6s var(--ease-io);
}
.shk-tdetail.is-open { opacity: 1; pointer-events: auto; }
.shk-tdetail__bar {
    position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center;
    padding: clamp(18px, 3vw, 32px) var(--pad); z-index: 3;
}
.shk-tdetail__back {
    display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: .82rem;
    letter-spacing: .04em; color: var(--paper); padding: 10px 16px; border: 1px solid rgba(251, 250, 246, .3); border-radius: 2px;
    cursor: pointer; background: none; transition: .3s;
}
.shk-tdetail__back:hover { background: var(--paper); color: var(--ink); }
.shk-tdetail__brand { font-family: var(--mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(251, 250, 246, .55); }
.shk-tdetail__inner {
    display: grid; grid-template-columns: minmax(280px, 40%) 1fr; gap: clamp(32px, 6vw, 90px);
    align-items: center; padding: clamp(10px, 2vw, 30px) var(--pad) clamp(60px, 9vw, 120px); min-height: calc(100vh - 90px);
}
.shk-tdetail__media { aspect-ratio: 3/4; height: min(70vh, 640px); max-width: 100%; border-radius: 3px; background-size: cover; background-position: 50% 30%; }
.shk-tdetail__text { max-width: 60ch; }
.shk-tdetail__no {
    font-family: var(--mono); font-size: .78rem; color: var(--cyan); letter-spacing: .1em; margin-bottom: 20px;
    opacity: 0; transform: translateY(30px); transition: opacity .8s var(--ease) .15s, transform .8s var(--ease) .15s;
}
.shk-tdetail__name {
    font-weight: 800; letter-spacing: -.04em; line-height: .95; font-size: clamp(2.6rem, 6vw, 5rem); margin-bottom: 8px;
    opacity: 0; transform: translateY(44px); transition: opacity .9s var(--ease) .22s, transform .9s var(--ease) .22s;
}
.shk-tdetail__role {
    font-family: var(--serif); font-style: italic; font-size: clamp(1.1rem, 2vw, 1.6rem); color: var(--magenta);
    margin-bottom: 28px; opacity: 0; transform: translateY(30px); transition: opacity .8s var(--ease) .3s, transform .8s var(--ease) .3s;
}
.shk-tdetail__bio {
    display: flex; flex-direction: column; gap: 1em; font-size: clamp(.98rem, 1.2vw, 1.1rem); line-height: 1.65;
    color: rgba(251, 250, 246, .8); opacity: 0; transform: translateY(30px); transition: opacity .9s var(--ease) .38s, transform .9s var(--ease) .38s;
}
.shk-tdetail__tags {
    display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; opacity: 0; transform: translateY(24px);
    transition: opacity .9s var(--ease) .46s, transform .9s var(--ease) .46s;
}
.shk-tdetail__tags span {
    font-family: var(--mono); font-size: .72rem; color: rgba(251, 250, 246, .85);
    border: 1px solid rgba(251, 250, 246, .26); padding: 6px 11px; border-radius: 30px;
}
.shk-tdetail.is-open .shk-tdetail__no, .shk-tdetail.is-open .shk-tdetail__name, .shk-tdetail.is-open .shk-tdetail__role,
.shk-tdetail.is-open .shk-tdetail__bio, .shk-tdetail.is-open .shk-tdetail__tags { opacity: 1; transform: none; }
@media (max-width: 820px) {
    .shk-tdetail__inner { grid-template-columns: 1fr; gap: 32px; align-items: start; }
    .shk-tdetail__media { height: 52vh; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .shk-tcard { transition-duration: .001ms !important; transform: none !important; opacity: 1 !important; }
    .shk-tcol { transform: none !important; }
    .shk-tfly { transition-duration: .001ms !important; }
    .shk-tdetail, .shk-tdetail * { transition-duration: .001ms !important; }
}