@charset "UTF-8";
/* ============================================================
   Bandeau RAL — slider d'annonce placé au-dessus du menu
   100 % CSS (aucune dépendance jQuery / Bootstrap JS)
   Donc totalement désynchronisé du carousel de la page d'accueil.

   3 variantes au choix, on change simplement la classe :
     .ral-ban.ral-vert   → A : défilement vertical
     .ral-ban.ral-wipe   → B : rideau vertical + lame orange
     .ral-ban.ral-slats  → C : persiennes verticales décalées
   ============================================================ */

/* --- Réglages globaux ------------------------------------- */
:root {
  --ral-cycle: 12s;   /* durée totale du cycle (2 visuels) */
  --ral-ease: cubic-bezier(.76, 0, .24, 1);
  --ral-orange: rgb(233, 78, 27);
}

/* --- Cadre commun ----------------------------------------- */
.ral-ban {
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 1280 / 61;
  background-color: #000;
  line-height: 0;
}
/* Repli navigateurs sans aspect-ratio */
@supports not (aspect-ratio: 1 / 1) {
  .ral-ban::before { content: ""; display: block; padding-top: 4.765625%; }
}

.ral-ban a.ral-link {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
}

/* Les deux visuels */
.ral-f1 { background-image: url("../ral/ATS_RAL_BAN_01.jpg"); }
.ral-f2 { background-image: url("../ral/ATS_RAL_BAN_02.jpg"); }
.ral-f1, .ral-f2 {
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* ============================================================
   VARIANTE A — Défilement vertical
   Les visuels montent l'un après l'autre, façon afficheur
   mécanique. Lisible, sobre, très différent du slider d'accueil.
   ============================================================ */
.ral-vert .ral-track {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 300%;
  animation: ralVert var(--ral-cycle) var(--ral-ease) infinite;
  will-change: transform;
}
.ral-vert .ral-track > div { height: 33.33333%; }

@keyframes ralVert {
  0%,   41.66% { transform: translateY(0); }
  50%,  91.66% { transform: translateY(-33.33333%); }
  100%         { transform: translateY(-66.66666%); }
}

/* ============================================================
   VARIANTE B — Rideau vertical
   Le 2e visuel se dévoile du haut vers le bas, précédé d'une
   fine lame orange (couleur de marque) qui balaye le bandeau.
   Aucun déplacement d'image : très net, très « premium ».
   ============================================================ */
.ral-wipe .ral-layer {
  position: absolute;
  inset: 0;
}
.ral-wipe .ral-top {
  animation: ralWipe var(--ral-cycle) var(--ral-ease) infinite;
  will-change: clip-path;
}
.ral-wipe .ral-edge {
  position: absolute;
  left: 0; right: 0;
  height: 3px;
  background: var(--ral-orange);
  box-shadow: 0 0 12px rgba(233, 78, 27, .9);
  opacity: 0;
  z-index: 2;
  animation: ralEdge var(--ral-cycle) var(--ral-ease) infinite;
}

@keyframes ralWipe {
  0%,   41.66% { clip-path: inset(0 0 100% 0); }
  50%,  91.66% { clip-path: inset(0 0 0 0); }
  100%         { clip-path: inset(100% 0 0 0); }
}
@keyframes ralEdge {
  0%,   41.65% { top: -3px;  opacity: 0; }
  41.66%       { top: -3px;  opacity: 1; }
  50%          { top: 100%;  opacity: 1; }
  50.01%, 91.65% { top: -3px; opacity: 0; }
  91.66%       { top: -3px;  opacity: 1; }
  100%         { top: 100%;  opacity: 1; }
}

/* ============================================================
   VARIANTE C — Persiennes verticales décalées
   Le bandeau est découpé en 16 lames qui basculent verticalement
   avec un léger décalage : une vague part de la gauche.
   C'est le « désynchronisé » au sens propre, et ça évoque la
   tôle perforée / le panneau d'atelier du visuel.
   ============================================================ */
.ral-slats .ral-inner {
  position: absolute;
  inset: 0;
  display: flex;
}
.ral-slats .ral-slat {
  position: relative;
  flex: 1 1 0;
  overflow: hidden;
}
.ral-slats .ral-slat-track {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 300%;
  animation: ralVert var(--ral-cycle) var(--ral-ease) infinite;
  animation-delay: calc(var(--i) * .05s);
  will-change: transform;
}
.ral-slats .ral-slat-track > div {
  height: 33.33333%;
  /* 16 lames : l'image fait 1600 % de la largeur d'une lame */
  background-size: 1600% 100%;
  background-position: calc(var(--i) * 100% / 15) 0;
}

/* ============================================================
   Confort de lecture / accessibilité
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .ral-ban * { animation: none !important; }
  .ral-wipe .ral-top { clip-path: inset(0 0 0 0); }
  .ral-wipe .ral-edge { display: none; }
}

/* Le bandeau est très allongé (1280 x 61) : sous 768 px le texte
   devient trop petit. Voir la note d'intégration : prévoir un
   visuel mobile dédié, ou masquer le bandeau sur téléphone. */