.tm1 { background: var(--tm1-bg, #fff); padding: var(--tm1-pad, 96px 0); color: var(--tm1-title-color, #15161a); font-family: var(--tm1-text-font, inherit); }

/* En-tête */
.tm1-head { margin-bottom: clamp(32px, 4.5vw, 60px); display: flex; flex-direction: column; align-items: flex-start; }
.tm1-head-center { align-items: center; text-align: center; }
.tm1-head-right { align-items: flex-end; text-align: right; }
.tm1-kicker {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px;
  font-family: var(--fx-font-accent); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--tm1-accent);
}
.tm1-kicker::before { content: ""; width: 26px; height: 2px; background: currentColor; }
.tm1-title {
  font-family: var(--tm1-title-font); font-size: clamp(32px, 5.2vw, var(--tm1-title-size)); font-weight: var(--tm1-title-weight);
  line-height: 1.02; letter-spacing: -.025em; color: var(--tm1-title-color); max-width: 20ch;
}
.tm1-intro { margin-top: 16px; max-width: 58ch; color: var(--tm1-text-color); font-size: 1.05em; line-height: 1.55; }
.tm1-empty { color: var(--tm1-text-color); padding: 28px 0; }

/* Grille */
.tm1-grid { display: grid; grid-template-columns: repeat(var(--tm1-cols, 4), minmax(0, 1fr)); gap: calc(var(--tm1-gap) * 1.4) var(--tm1-gap); }
.tm1-stagger .tm1-item:nth-child(even) { transform: translateY(clamp(20px, 4vw, 56px)); }
.tm1-stagger .tm1-grid { padding-bottom: clamp(20px, 4vw, 56px); }
.tm1-item { min-width: 0; }
.tm1-card { position: relative; display: flex; flex-direction: column; height: 100%; }
.tm1-card:focus { outline: none; }
.tm1-card:focus-visible .tm1-media { outline: 2px solid var(--tm1-accent); outline-offset: 3px; }

.tm1-media { position: relative; aspect-ratio: var(--tm1-ratio, 4 / 5); border-radius: var(--tm1-img-radius); overflow: hidden; background: var(--tm1-surface); isolation: isolate; }
.tm1-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1), filter .5s ease; }
.tm1-card:hover .tm1-media img, .tm1-card:focus-within .tm1-media img { transform: scale(1.05); }
.tm1-gray .tm1-media img { filter: grayscale(1) contrast(1.05); }
.tm1-gray .tm1-card:hover .tm1-media img, .tm1-gray .tm1-card:focus-within .tm1-media img { filter: none; }
.tm1-ph {
  display: grid; place-items: center; width: 100%; height: 100%;
  font-family: var(--tm1-name-font); font-weight: var(--tm1-title-weight); font-size: clamp(36px, 6vw, 72px); letter-spacing: -.02em;
  color: var(--tm1-accent); background: linear-gradient(160deg, var(--tm1-surface), color-mix(in srgb, var(--tm1-accent) 18%, var(--tm1-surface)));
}
.tm1-index {
  position: absolute; z-index: 2; top: 14px; left: 14px; padding: 4px 8px; border-radius: 999px;
  font-family: var(--fx-font-accent); font-size: 11px; font-weight: 600; letter-spacing: .12em;
  background: var(--tm1-bg); color: var(--tm1-title-color);
}

/* Biographie révélée */
.tm1-reveal {
  position: absolute; z-index: 1; inset: 0; display: flex; align-items: flex-end; padding: 22px;
  background: color-mix(in srgb, var(--tm1-overlay) 88%, transparent); color: var(--tm1-overlay-text);
  opacity: 0; transform: translateY(14px); transition: opacity .35s ease, transform .45s cubic-bezier(.2,.7,.2,1);
}
.tm1-bio { font-size: .95em; line-height: 1.5; }
.tm1-card:hover .tm1-reveal, .tm1-card:focus-within .tm1-reveal { opacity: 1; transform: none; }

/* Infos sous le portrait */
.tm1-info { display: flex; flex-direction: column; gap: 6px; padding-top: 18px; }
.tm1-name {
  font-family: var(--tm1-name-font); font-size: var(--tm1-name-size); font-weight: var(--tm1-title-weight);
  line-height: 1.1; letter-spacing: -.01em; color: var(--tm1-title-color);
}
.tm1-role { font-family: var(--fx-font-accent); font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--tm1-accent); }
.tm1-shows { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 4px; font-size: .9em; color: var(--tm1-text-color); }
.tm1-shows-label { width: 100%; font-size: .85em; opacity: .85; }
.tm1-shows a { position: relative; z-index: 3; color: var(--tm1-title-color); text-decoration: none; font-weight: 600; background: linear-gradient(var(--tm1-accent), var(--tm1-accent)) 0 100% / 100% 1px no-repeat; transition: background-size .2s, color .2s; }
.tm1-shows a:hover { color: var(--tm1-accent); background-size: 100% 2px; }
.tm1-sep { opacity: .45; }

/* Infos sur le portrait */
.tm1-info-overlay .tm1-info {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 60px 20px 20px;
  border-radius: 0 0 var(--tm1-img-radius) var(--tm1-img-radius);
  background: linear-gradient(to top, color-mix(in srgb, var(--tm1-overlay) 92%, transparent), transparent);
  pointer-events: none;
}
.tm1-info-overlay .tm1-shows a { pointer-events: auto; }
.tm1-info-overlay .tm1-name, .tm1-info-overlay .tm1-shows a { color: var(--tm1-overlay-text); }
.tm1-info-overlay .tm1-shows { color: color-mix(in srgb, var(--tm1-overlay-text) 75%, transparent); }
.tm1-info-overlay .tm1-reveal { align-items: flex-start; padding-top: 56px; }
.tm1-info-overlay.tm1-has-bio .tm1-card:hover .tm1-info,
.tm1-info-overlay.tm1-has-bio .tm1-card:focus-within .tm1-info { background: transparent; }

/* Écrans tactiles : le portrait est focusable, un appui révèle la biographie (focus-within). */

@media (max-width: 980px) {
  .tm1-cols-4 .tm1-grid, .tm1-cols-5 .tm1-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .tm1 .tm1-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; }
  .tm1-stagger .tm1-item:nth-child(even) { transform: translateY(24px); }
  .tm1-name { font-size: calc(var(--tm1-name-size) * .82); }
  .tm1-info-overlay .tm1-info { padding: 48px 12px 12px; }
  .tm1-index { top: 10px; left: 10px; }
}
@media (max-width: 340px) {
  .tm1 .tm1-grid { grid-template-columns: 1fr; }
  .tm1-stagger .tm1-item:nth-child(even) { transform: none; }
}