/* Square Gourmet's, les héros : l'en-tête des héros 2 à 4, le logotype en texte dans la barre et deux liens */
.barre { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); min-height: 72px; padding-top: var(--e-2); }
.barre .logotype { text-decoration: none; }
.barre .logotype-carre { font-size: var(--t-2); }
.barre .logotype-script { margin: -0.36em 0 -0.22em 1.5em; }
.barre .nav { display: flex; gap: var(--e-5); min-height: 0; }
.heros h1 { font-size: var(--t-1); line-height: 1; font-weight: 800; font-stretch: 125%; text-wrap: balance; }
.heros-bas { display: grid; gap: var(--e-3); justify-items: start; align-content: start; }
@media (prefers-reduced-motion: no-preference) {
  .js .premier:not(.est-arrive) .barre .logotype-script { opacity: 0; }
  .premier.est-arrive .barre .logotype-script { animation: neon 520ms linear var(--neon, 600ms) both; }
}

/* Héros 1 : la pile se fait à l'arrivée. Les six cartes tombent l'une sur l'autre, le Kinder Franui en dernier, puis le néon s'allume. */
@media (max-width: 767px) { .h-pile .pile { width: min(78vw, 330px); } }
@media (prefers-reduced-motion: no-preference) {
  .premier.est-arrive .grille { animation: none; opacity: 1; }
  .js .premier:not(.est-arrive) .carte { opacity: 0; }
  .premier.est-arrive .carte { animation: tombe 380ms cubic-bezier(.3, 0, .2, 1) both; }
  .premier.est-arrive .carte:nth-child(6) { animation-delay: 200ms; }
  .premier.est-arrive .carte:nth-child(5) { animation-delay: 310ms; }
  .premier.est-arrive .carte:nth-child(4) { animation-delay: 420ms; }
  .premier.est-arrive .carte:nth-child(3) { animation-delay: 530ms; }
  .premier.est-arrive .carte:nth-child(2) { animation-delay: 640ms; }
  .premier.est-arrive .carte:nth-child(1) { animation-delay: 750ms; }
  @keyframes tombe { from { opacity: 0; translate: 0 -72px; } to { opacity: 1; translate: 0 0; } }
  /* le néon s'allume quand la dernière carte est posée, à 1 130 ms */
  .premier.est-arrive .titre-logo .logotype-script { animation: neon 520ms linear 1130ms both; }
}
