/* Séquence de logos de l'accueil (2026-11-06), entre l'ouverture et les projets. Script : scripts/showreel.js.
   16:9 dès 760 px, 9:16 en dessous : le moteur suit la forme du cadre. */
/* Pleine largeur, bord à bord, sans coins : elle casse le rythme des cartes. Haute au plus de 88 % de l'écran. */
.showreel-bloc { padding: 0; }
.showreel {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  max-height: 88vh;
  width: 100%;
  background: var(--sr-fond, var(--surface));
}
.showreel .sr-scene, .showreel .sr-scene .sr-logo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.showreel .sr-multiplie { mix-blend-mode: multiply; }
.showreel .sr-inverse { filter: invert(1); mix-blend-mode: screen; }
.showreel-texte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Pause et lecture : dans la teinte du logo en cours */
.showreel-commande {
  position: absolute; right: 24px; bottom: 24px; z-index: 2;
  display: grid; place-items: center; width: 48px; height: 48px; padding: 0;
  border: none; border-radius: 999px; cursor: pointer;
  background: color-mix(in srgb, var(--sr-trait, #161616) 16%, transparent);
  color: var(--sr-trait, #161616);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background-color 0.5s cubic-bezier(0.19, 1, 0.22, 1), color 0.5s cubic-bezier(0.19, 1, 0.22, 1), transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.showreel-commande:is(:hover, :focus-visible) { background: var(--sr-trait, #161616); color: var(--sr-fond, #f3f2ef); }
.showreel-commande:focus-visible { outline: 2px solid var(--sr-trait, #161616); outline-offset: 3px; }
.showreel-commande:active { transform: scale(0.92); }
.showreel-commande svg { width: 16px; height: 16px; fill: currentColor; }
.showreel-commande .lecture, .showreel-commande[aria-pressed="true"] .pause { display: none; }
.showreel-commande[aria-pressed="true"] .lecture { display: block; }

/* Mouvement réduit : la planche des logos finis */
.showreel.fixe { background: var(--surface); }
.sr-planche { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 1fr; }
.sr-case { position: relative; }
.sr-case .sr-logo { position: absolute; inset: 0; width: 100%; height: 100%; }

@media (max-width: 759px) {
  .showreel { aspect-ratio: 9 / 16; max-height: none; }
  .showreel-commande { right: 16px; bottom: 16px; width: 44px; height: 44px; }
  .sr-planche { grid-template-columns: repeat(3, 1fr); }
}

/* Dans le panneau agences : la version longue, sous l'en-tête, avec l'air et les coins des médias du panneau */
.agences-showreel { margin: 56px 0 72px; }
.agences-showreel .showreel { border-radius: 30px; max-height: 80vh; }
@media (max-width: 759px) {
  .agences-showreel { margin: 32px 0 48px; }
  .agences-showreel .showreel { border-radius: 20px; }
}