/* Les animations reprennent exactement la grille et les gabarits des logos démos. */
.logo-animations { scroll-margin-top: 28px; margin: 65px 0; }
.logo-animation-card { position: relative; min-width: 0; }
.logo-animation-card .logo-demo-visual { padding: 0; height: 305px; min-height: 280px; background: #0a1a2f; }
.logo-animation-card:first-child .logo-demo-visual { background: #000; }
.logo-animation-card video { display: block; width: 100%; height: 100%; object-fit: contain; }
.logo-animation-card .logo-demo-caption { min-height: 85px; }
.logo-animation-card .logo-demo-caption strong { min-width: 0; }
.logo-animation-card .logo-demo-caption a { position: relative; z-index: 3; display: grid; place-items: center; flex: 0 0 44px; min-height: 44px; border: 1px solid #48628a; border-radius: 50%; text-decoration: none; }
.logo-animation-card .logo-demo-caption a:hover { background: #263b59; }
.logo-animation-start { position: absolute; z-index: 2; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0 0 85px; width: 100%; border: 0; background: transparent; cursor: pointer; }
.logo-animation-start[hidden] { display: none; }
.logo-animation-start span { display: grid; place-items: center; width: 76px; height: 76px; padding-left: 5px; border: 2px solid #d5deff; border-radius: 50%; color: #0a1427; background: #b7c8ff; font-size: 28px; box-shadow: 0 6px 30px #0008; }
.logo-animation-start:hover span { background: #e0e7ff; }
.logo-animation-start:focus-visible { outline: 3px solid #d0dcff; outline-offset: -6px; border-radius: 14px; }
.logo-animation-card:focus-within { border-color: #b6c8ff; }
@media (min-width:2300px) { .logo-animation-card .logo-demo-visual { height: 360px; min-height:350px; } }
@media (max-width:600px) {
  .logo-animation-card .logo-demo-visual { height: 240px; min-height:220px; }
  .logo-animation-card .logo-demo-caption { min-height: 84px; }
  .logo-animation-start span { width: 66px; height: 66px; font-size: 25px; }
}