/* ==========================================================================
   hero-team.css — bandeau équipe défilant sur mobile (<= 680px)

   Problème corrigé : sur smartphone, .hero-bg-img est en object-fit: cover /
   object-position: center, donc seul le milieu de homepage.jpeg est visible —
   soit une ou deux personnes sur les sept.

   Solution : sous 680px, l'image fixe est masquée et remplacée par une bande
   qui défile en boucle continue. L'image equipe-boucle.jpg (2940x840) se
   raccorde parfaitement bout à bout : aucune cassure à chaque tour.

   Ordre de passage, départ inclus : Olivier (centré à l'ouverture) puis
   Pierre-Henri, Carole, Jean-Charles, Nadège, Nathalie, Odile, et retour
   sur Olivier. Un tour complet dure 45 s.

   Ne concerne QUE le mobile : au-dessus de 680px, rien n'est modifié et
   equipe-boucle.jpg n'est même pas téléchargé.
   ========================================================================== */

@media (max-width: 680px)
{
  /* le titre remonte en haut du hero pour dégager les visages */
  .hero
  {
    align-items: flex-start;
  }

  /* l'image fixe cède la place à la bande animée */
  .hero-bg-img
  {
    display: none;
  }

  .hero
  {
    /* Géométrie de la bande.
       equipe-boucle.jpg a un ratio de 3.5 (2940x840).
       La bande est volontairement plus haute que le hero (420px contre 300px)
       et calée en haut : les visages sont plus grands et descendent sous le
       titre, le bas des bustes sort du cadre.
         --tile = hauteur affichée x 3.5 = 420 x 3.5 = 1470px
         --olivier = centre d'Olivier dans le motif = 77.8% de 1470px */
    --tile: 1470px;
    --bande-h: 420px;
    --olivier: 1144px;
    --start: calc(var(--olivier) - 50vw);
    --duree: 45s;
  }

  /* la bande qui défile */
  .hero::before
  {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    height: var(--bande-h);
    width: calc(var(--tile) * 3);
    background: url('../images/equipe-boucle.jpg') repeat-x left top;
    background-size: var(--tile) var(--bande-h);
    animation: heroTeamPan var(--duree) linear infinite;
    will-change: transform;
  }

  /* voile de lisibilité : dense en haut derrière le titre, léger en bas.
     Remplace le filter: brightness(0.72) porté par .hero-bg-img, masquée ici. */
  .hero::after
  {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(180deg,
                rgba(10, 25, 55, 0.82) 0%,
                rgba(14, 34, 64, 0.72) 38%,
                rgba(26, 56, 96, 0.42) 68%,
                rgba(36, 78, 130, 0.30) 100%);
  }

  /* titre compacté pour libérer le haut de la bande */
  .hero-content
  {
    padding: 0.85rem 1rem 0;
    margin-bottom: 0;
  }

  .hero-eyebrow
  {
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    margin-bottom: 0.45rem;
  }

  .hero-content h1
  {
    font-size: 1.22rem;
    line-height: 1.16;
  }

  .hero-divider
  {
    margin: 0.55rem auto;
  }

  .hero-sub
  {
    font-size: 0.72rem;
    line-height: 1.3;
  }
}

@keyframes heroTeamPan
{
  from { transform: translate3d(calc(var(--start) * -1), 0, 0); }
  to   { transform: translate3d(calc(var(--start) * -1 - var(--tile)), 0, 0); }
}

/* Accessibilité : aucun mouvement si l'utilisateur a désactivé les animations
   au niveau du système. Olivier reste simplement cadré. */
@media (max-width: 680px) and (prefers-reduced-motion: reduce)
{
  .hero::before
  {
    animation: none;
    transform: translate3d(calc(var(--start) * -1), 0, 0);
  }
}