/* =============================================================================
   NABSEED · le carrousel d'accueil en video, 06.10.2026.

   CONSIGNE DU FONDATEUR : les trois videos telles quelles, sans recadrage, en entier de
   bord a bord, VIVANTES TOUT LE TEMPS, et sur telephone une bande qui se parcourt au
   doigt, comme la sequence du pot plus bas.

   ORDINATEUR : la diapositive prend la proportion 16:9 sur toute la largeur. La video la
   remplit exactement ; object-fit:contain garantit qu'aucun pixel n'est coupe.

   TELEPHONE (760 px et moins) : la piste devient un rail a defilement natif, aimante
   diapositive par diapositive. Le translateX du carrousel y est neutralise, le minuteur
   aussi (voir le script de la page). Chaque diapositive fait 88 % de la largeur : la
   suivante amorce au bord pour dire qu'il y a une suite. Video en tete, texte dessous.
   ============================================================================= */

.carrousel .slide { min-height: 0; aspect-ratio: 16 / 9; }

.slide .fond video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--s-bg);
}

@media (max-width: 760px) {
  .carrousel { background: var(--s-bg); }
  .carrousel .piste {
    transform: none !important;
    transition: none;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .carrousel .piste::-webkit-scrollbar { display: none; }
  .carrousel .slide {
    flex: 0 0 88%;
    scroll-snap-align: start;
    aspect-ratio: auto;
    padding: 0;
    justify-content: flex-start;
    background: var(--s-bg);
  }
  .slide .fond { position: relative; inset: auto; aspect-ratio: 16 / 9; flex: none; }
  .slide .voile-img { display: none; }
  .slide .dedans { max-width: 100%; padding: 22px var(--pad) 66px; }
}