/* Bannière animée sur les pages autres que l'accueil (5.27.0 ; demande d'Olivier du 02/11 : « je veux toujours la voir,
   sur mobile, sur PC et quelle que soit la rubrique du site »). Mêmes cadrage, vidéo, carte et LED que l'accueil
   (index.html, blocs « PREMIUM STICKY BANNER », « Bandeau animé » et « .rk-led »). Ici la bannière est le premier
   élément de l'en-tête collant .rk-entete-fixe : c'est l'en-tête entier qui reste en haut, bannière comprise.
   Jetons de la charte uniquement. */
.rk-entete-fixe > .banner-sticky {
  position: relative;
  width: 100%;
  height: var(--banner-h);
  overflow: hidden;
  background: var(--v-bg);
}
/* 5.28.0 : hauteurs posées sur :root, pour que l'en-tête collant les lise aussi. */
:root { --banner-h: 280px; --banner-min: 110px; }
@media (max-width: 639px) { :root { --banner-h: 200px; --banner-min: 72px; } }
@media (min-width: 640px) and (max-width: 1023px) { :root { --banner-h: 240px; --banner-min: 96px; } }

/* 5.28.0 — La bannière se replie au défilement (Olivier, 02/11). L'en-tête collant colle à une hauteur négative :
   en descendant, il remonte au rythme du doigt jusqu'à ne laisser qu'une bande de bannière (--banner-min) au-dessus
   du menu ; en remontant, il se redéplie. Image et marque restent centrées dans la bande (banniere.js). */
.rk-entete-fixe:has(> .banner-sticky):not(#_) { top: calc(var(--banner-min) - var(--banner-h)); }
.banner-sticky .banner-art { translate: 0 calc(var(--banner-repli, 0px) / 2); }
.banner-sticky .banner-marque { translate: 0 var(--banner-repli, 0px); }
/* 5.28.0 — Bande repliée : un voile sombre à gauche, qui monte avec le repli, garde CORDOLEANI lisible par-dessus le
   compteur d'années de la vidéo. Couleur de panneau du contexte « sur image » de la charte. */
.banner-sticky .banner-marque::before {
  content: ""; position: absolute; z-index: -1; left: -24px; top: -30px; width: 360px; height: var(--banner-min);
  background: linear-gradient(90deg, color-mix(in srgb, var(--v-panel) 88%, transparent), color-mix(in srgb, var(--v-panel) 65%, transparent) 55%, transparent);
  opacity: var(--banner-f, 0); pointer-events: none;
}

/* Image et LED dans un même cadre aux proportions de l'image (1623 × 572) : recadrage « cover » reproduit en CSS. */
.banner-art {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100%, calc(var(--banner-h) * 1623 / 572));
  aspect-ratio: 1623 / 572;
  transform: translate(-50%, -50%);
}
.banner-art img { width: 100%; height: 100%; max-width: none; display: block; }
@media (max-width: 639px) { .banner-art { left: auto; right: 0; transform: translateY(-50%); } }
.banner-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; display: block; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .banner-video { display: none; } }

.banner-card {
  position: absolute;
  left: 66.46%;
  top: 24.93%;
  width: 27.05%;
  height: 50%;
  z-index: 1;
  border-radius: 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.banner-card:focus-visible { outline: 1px solid var(--rk-site); outline-offset: 4px; }
/* La carte n'apparaît qu'en fin de boucle : avant, ni lien ni LED. */
.banner-sticky.video-anim:not(.card-ready) .banner-card { pointer-events: none; cursor: default; }
.banner-sticky.video-anim:not(.card-ready) .banner-card .rk-led { opacity: 0 !important; animation: none !important; }

.banner-card .rk-led {
  position: absolute;
  width: 1.83%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  background: radial-gradient(circle, var(--v-ink) 0 32%, var(--v-mag) 48%, transparent 72%);
  transition: opacity 160ms ease-out;
}
.banner-card .rk-led::after {
  content: "";
  position: absolute;
  inset: -350%;
  border-radius: 999px;
  background: radial-gradient(circle, color-mix(in srgb, var(--v-mag) 50%, transparent) 0, var(--v-gold-bg) 30%, transparent 62%);
}
.banner-card:is(:hover, :focus-within, :focus-visible, :active) .rk-led { opacity: 1; animation: rk-banniere-led 2.6s ease-in-out 500ms infinite; }
@keyframes rk-banniere-led {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(0.8); }
}
@media (prefers-reduced-motion: reduce) { .banner-card .rk-led { transition: none; animation: none !important; } }

.banner-note {
  position: absolute;
  right: 14px;
  bottom: 10px;
  z-index: 1;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--v-faint);
  pointer-events: none;
}
.banner-marque { position: absolute; top: 30px; left: 24px; z-index: 2; }

/* Articles : leur barre propre (lien « Articles », .//., traduction) sort de l'en-tête collant et défile avec la page. */
.rk-entete-fixe + .article-nav { position: relative; top: auto; z-index: auto; }

/* Les ancres de la page ne passent pas sous l'en-tête, désormais plus haut (hauteur posée par banniere.js). */
html { scroll-padding-top: calc(var(--rk-entete-h, 340px) + 12px); }