/* =========================================================
   TATEA — S06 « Intervenants & mentors » : 4 mises en page dans la grille commune (pilotées par le défilement)
   A le trombinoscope · B le défilé · C le projecteur · D le mur
   Même départ sous le titre, même colonne de texte (--col), même bouton jaune en bas à gauche, même arrondi (--r).
   ========================================================= */
[data-iv] .iv__list { display: none; }
.ivx img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
:where(.ivx) button { font: inherit; color: inherit; text-align: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.ivx [hidden] { display: none !important; }

/* la grille commune */
.ivx { position: absolute; left: var(--edge); right: var(--edge); top: calc(var(--top) + var(--tth, 110px) + var(--tg)); bottom: calc(var(--bh7, 0px) + var(--bot));
  display: grid; grid-template-columns: minmax(0, var(--col)) minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-areas: "intro vis" "tabs vis" ". vis" "foot vis"; gap: 16px var(--gap); }
.ivx .iv__intro { grid-area: intro; margin: 0; font-size: var(--intro); line-height: 1.45; color: var(--text); max-width: 38ch; }
.ivx__vis { grid-area: vis; position: relative; min-height: 0; }
.ivx .iv__foot { grid-area: foot; display: grid; justify-items: start; }

/* le tri par académie : des pastilles pleines, sans contour */
.ivx__tabs { grid-area: tabs; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ivx__tabs button { display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 14px; border-radius: 999px; background: rgb(22 33 61 / .07); font-size: 14px; font-weight: 500; color: var(--ink); transition: background-color .3s, color .3s; }
.ivx__tabs small { font-size: 11.5px; font-weight: 600; color: rgb(22 33 61 / .45); transition: color .3s; }
.ivx__tabs button[aria-selected="true"] { background: var(--night); color: #fff; }
.ivx__tabs button[aria-selected="true"] small { color: var(--gold-strong); }

/* nom, poste, entreprise */
.ivx__nm { display: block; font-size: clamp(15px, 1.1vw, 17px); font-weight: 600; line-height: 1.2; }
.ivx__rl { display: block; margin-top: 3px; font-size: 13px; line-height: 1.3; color: var(--text); }
.ivx__rl em { font-style: normal; font-weight: 600; color: var(--ink); }

/* ---------- A : le trombinoscope ---------- */
.ivx--a .ivx__win { position: absolute; inset: 0; overflow: hidden; }
.ivx--a .ivx__trk { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px) clamp(10px, 1.2vw, 18px); will-change: transform; }
.ivx--a .ivx__card { margin: 0; }
.ivx--a .ivx__ph { aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r); background: rgb(22 33 61 / .08); }
.ivx--a figcaption { padding-top: 10px; }

/* ---------- B : le défilé ---------- */
.ivx--b .ivx__vis { margin-right: calc(-1 * var(--edge)); }
.ivx--b .ivx__win { position: absolute; inset: 0; overflow: hidden; }
.ivx--b .ivx__trk { height: 100%; display: flex; gap: clamp(10px, 1.2vw, 18px); will-change: transform; }
.ivx--b .ivx__card { position: relative; flex: 0 0 auto; height: 100%; aspect-ratio: 3 / 4.4; margin: 0; overflow: hidden; border-radius: var(--r); background: var(--night); }
.ivx--b figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 18px 18px; background: linear-gradient(0deg, rgb(11 22 38 / .95) 35%, rgb(11 22 38 / 0)); color: #fff; }
.ivx--b .ivx__rl, .ivx--b .ivx__rl em { color: rgb(255 255 255 / .72); }
.ivx--b .ivx__rl em { color: var(--gold-strong); }

/* ---------- C : le projecteur ---------- */
.ivx--c .ivx__vis { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 12px; }
.ivx__stage { position: relative; overflow: hidden; border-radius: var(--r); background: var(--night); color: #fff; }
.ivx__cone { position: absolute; z-index: 1; left: 6%; top: -12%; width: 52%; height: 124%; pointer-events: none;
  background: radial-gradient(ellipse 50% 22% at 50% 100%, rgb(255 236 170 / .22), transparent 70%), linear-gradient(180deg, rgb(255 230 150 / .3), rgb(255 230 150 / .04));
  clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%); mix-blend-mode: screen; }
.ivx__shot { position: absolute; left: 10%; bottom: 0; width: 44%; height: 88%; overflow: hidden; border-radius: var(--r) var(--r) 0 0; opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity .45s, transform .7s var(--ease); }
.ivx__shot.on { opacity: 1; transform: none; }
.ivx__cap { position: absolute; z-index: 2; left: 58%; right: 5%; top: 0; bottom: 0; }
.ivx--c .ivx__c { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity .35s, transform .6s var(--ease); }
.ivx--c .ivx__c.on { opacity: 1; transform: none; transition-delay: .08s; }
.ivx__ac { display: block; margin-bottom: 12px; font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-strong); }
.ivx--c .ivx__nm { font-size: clamp(26px, 2.4vw, 40px); font-weight: 500; letter-spacing: -.01em; line-height: 1.05; }
.ivx--c .ivx__rl { margin-top: 12px; font-size: clamp(14px, 1.05vw, 16.5px); color: rgb(255 255 255 / .72); }
.ivx--c .ivx__rl em { display: block; margin-top: 4px; color: #fff; }
.ivx__thumbs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.ivx__thumbs::-webkit-scrollbar { display: none; }
.ivx__t { flex: 0 0 auto; width: 52px; height: 52px; overflow: hidden; border-radius: 50%; opacity: .45; transition: opacity .3s, transform .4s var(--ease); }
.ivx__t.on { opacity: 1; transform: scale(1.08); }

/* ---------- D : le mur ---------- */
.ivx--d .ivx__vis { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 32%); gap: clamp(14px, 1.6vw, 24px); }
.ivx__wall { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; align-content: center; min-height: 0; }
.ivx__tile { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 10px; background: rgb(22 33 61 / .08); transition: opacity .35s, transform .45s var(--ease); }
.ivx__tile img { position: absolute; inset: 0; }
.ivx__tile .g { filter: grayscale(1) contrast(1.05); }
.ivx__tile .c { opacity: 0; transition: opacity .35s; }
.ivx__tile.on .c { opacity: 1; }
.ivx__tile.on { z-index: 1; transform: scale(1.12); box-shadow: 0 16px 30px -14px rgb(11 22 38 / .6); }
.ivx__tile.dim { opacity: .22; }
.ivx--d .ivx__cap { position: relative; left: auto; right: auto; overflow: hidden; border-radius: var(--r); background: var(--night); color: #fff; }
.ivx--d .ivx__c { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(18px, 2vw, 30px); opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity .35s, transform .6s var(--ease); }
.ivx--d .ivx__c.on { opacity: 1; transform: none; }
.ivx--d .ivx__nm { font-size: clamp(22px, 1.9vw, 32px); font-weight: 500; line-height: 1.05; }
.ivx--d .ivx__rl { margin-top: 10px; font-size: 14.5px; color: rgb(255 255 255 / .72); }
.ivx--d .ivx__rl em { display: block; margin-top: 4px; color: #fff; }

/* ---------- tablette en paysage ---------- */
@media (min-width: 900px) and (max-width: 1180px) {
  .ivx--a .ivx__trk { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ivx__wall { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ivx--d .ivx__vis { grid-template-columns: minmax(0, 1fr) minmax(0, 36%); }
}

/* ---------- téléphone et tablette en portrait : intro, tri, portraits, bouton l'un sous l'autre ---------- */
@media (max-width: 899px) {
  .ivx { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; grid-template-areas: "intro" "tabs" "vis" "foot"; gap: 10px; }
  .ivx__tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--edge)); padding: 0 var(--edge); }
  .ivx__tabs button { flex: none; padding: 7px 12px; font-size: 13px; }
  .ivx--a .ivx__trk { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ivx--a figcaption { padding-top: 6px; }
  .ivx__nm { font-size: 14px; }
  .ivx__rl { font-size: 12px; }
  .ivx--b figcaption { padding: 50px 14px 14px; }
  .ivx__shot { left: 0; width: 56%; height: 82%; }
  .ivx__cone { left: -8%; width: 72%; }
  .ivx__cap { left: 52%; right: 4%; }
  .ivx--c .ivx__nm { font-size: 22px; }
  .ivx--c .ivx__rl { font-size: 13px; }
  .ivx__t { width: 44px; height: 44px; }
  .ivx--d .ivx__vis { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .ivx__wall { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
  .ivx__tile { border-radius: 6px; }
  .ivx--d .ivx__cap { min-height: 104px; }
  .ivx--d .ivx__c { padding: 14px 16px; }
  .ivx--d .ivx__nm { font-size: 20px; }
  .ivx--d .ivx__rl { margin-top: 6px; font-size: 13px; }
  .ivx--d .ivx__ac { margin-bottom: 6px; }
}
.ivx__sep { font-style: normal; }
.ivx--c .ivx__sep, .ivx--d .ivx__sep { display: none; }

/* piste B : les deux boutons du défilé (2026-10-15, le défilé avance au clic) */
.ivx__nav { position: absolute; right: 16px; bottom: 16px; z-index: 3; display: flex; gap: 8px; }
.ivx__nav button { display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--gold); color: var(--ink); cursor: pointer; transition: opacity .3s, transform .3s var(--ease); }
.ivx__nav button:hover { transform: scale(1.06); }
.ivx__nav button:disabled { opacity: .35; cursor: default; transform: none; }
.ivx__nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 899px) { .ivx__nav { right: 10px; bottom: 10px; } .ivx__nav button { width: 40px; height: 40px; } }