/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */
 @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            width: 100%;
            overflow-x: hidden;
            background: #222831;
            color: white;
        }
        h1, h2, h3, h4, h5, h6 {
            font-family: "Roboto", sans-serif;
            font-weight: 900;
        }

        body, p, a, .nav-link, .btn {
            font-family: "Roboto", sans-serif;
            font-weight: 400;
            font-style: normal;
        }

        /* (ancien override .container retiré : il cassait la grille Bootstrap
           des autres pages. Le centrage hero d'origine est désormais porté
           par .km-hero si besoin.) */
        .km-hero {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
            max-width: 90%;
            margin: 0 auto;
        }

        .logo {
            width: 90%;
            max-width: 600px;
            height: auto;
            margin-bottom: 40px;
            animation: fadeInScale 1.5s ease-out;
        }

        .animated-text {
            font-size: 2.5rem;
            font-weight: bold;
            color: #ff6b35;
            text-align: center;
            min-height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: fadeInUp 1.5s ease-out;
        }

        .text-content {
            opacity: 0;
            animation: textFade 9s infinite;
        }

        .text-content:nth-child(1) {
            animation-delay: 0s;
        }

        .text-content:nth-child(2) {
            animation-delay: 3s;
        }

        .text-content:nth-child(3) {
            animation-delay: 6s;
        }

        @keyframes textFade {
            0%, 33.33% {
                opacity: 0;
                transform: translateY(20px);
            }
            8.33%, 25% {
                opacity: 1;
                transform: translateY(0);
            }
            33.33%, 100% {
                opacity: 0;
                transform: translateY(-20px);
            }
        }

        @keyframes fadeInScale {
            from {
                opacity: 0;
                transform: scale(0.8);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Tablettes */
        @media (max-width: 768px) {
            .logo {
                max-width: 500px;
                margin-bottom: 30px;
            }

            .animated-text {
                font-size: 2rem;
                min-height: 70px;
            }
        }

        /* Mobiles */
        @media (max-width: 480px) {
            .logo {
                max-width: 320px;
                margin-bottom: 25px;
            }

            .animated-text {
                font-size: 1.5rem;
                min-height: 60px;
            }
        }

        /* Très petits mobiles */
        @media (max-width: 360px) {
            .container {
                padding: 15px;
            }

            .logo {
                max-width: 280px;
                margin-bottom: 20px;
            }

            .animated-text {
                font-size: 1.3rem;
                min-height: 50px;
            }
        }

        /* Grands écrans */
        @media (min-width: 1200px) {
            .logo {
                max-width: 700px;
            }

            .animated-text {
                font-size: 3rem;
                min-height: 90px;
            }
        }

/* ════════════════════════════════════════════════════════════════
   KULUNA MUSIK — DESIGN SYSTEM PAGE D'ACCUEIL
   ════════════════════════════════════════════════════════════════ */
:root {
  --km-orange: #FF6A00;
  --km-dark:   #20232c;
  --km-dark-2: #14141a;
  --km-red:    #E63946;
  --km-ink:    #16181d;
}

img { max-width: 100%; }
a { text-decoration: none; }

/* Lecteur persistant : masqué tant qu'aucun contenu (iframe) n'est en lecture. */
#spotify-player-container:not(:has(iframe)) { display: none !important; }

/* ── Header / Navbar ─────────────────────────────────────────── */
.km-header { background: var(--km-dark-2); }
.km-navbar { padding-block: .55rem; }
.km-logo {
  height: 42px; width: auto;
  /* logo noir d'origine rendu blanc sur fond sombre */
  filter: brightness(0) invert(1);
}
.km-nav__link {
  color: #e9eaee !important;
  font-weight: 600;
  font-size: .95rem;
  text-transform: capitalize;
  padding: .4rem .85rem !important;
  border-radius: 6px;
  transition: color .15s, background .15s;
}
.km-nav__link:hover,
.km-nav__link:focus { color: #fff !important; background: rgba(255,255,255,.08); }
/* Entrée du menu correspondant à la page courante */
.km-nav__link.is-active { color: var(--km-orange) !important; }

/* ── Bande "Actualités brèves" (fond sombre, comme le carrousel qui suit) ── */
.km-stories { background: var(--km-dark-2); padding: .65rem 0 .8rem; }
.km-stories .breves-title { color: #fff; }
.km-stories .breves-subtitle { color: rgba(255,255,255,.6); }
.km-stories .breves-title__dot { background: #E63946; }
.km-stories .breve-circle__title { color: #fff; }
.km-stories .breves-loading,
.km-stories .breves-empty { color: rgba(255,255,255,.85); }

/* ── Carrousel "actualités chaudes" ──────────────────────────── */
.km-hot {
  background: var(--km-dark-2); padding: .9rem 0 1.4rem; overflow: hidden;
  --card-w: min(78vw, 1040px);
}
.km-hot__inner { position: relative; width: 100%; margin: 0; padding: 0 3rem; }
/* La hauteur du stage = hauteur exacte du bandeau central (ratio 16/7)
   => plus d'espace vide vertical au-dessus/dessous. */
.km-hot__stage { position: relative; height: calc(var(--card-w) * 0.4375); }
.km-hot__card {
  position: absolute; top: 50%; left: 50%;
  width: var(--card-w); min-width: 240px;
  transform: translate(-50%, -50%);
  transition: transform .55s cubic-bezier(.22,.61,.36,1), opacity .45s ease;
  will-change: transform, opacity;
}
.km-hot__link { display: block; }
.km-hot__media {
  position: relative; display: block; width: 100%;
  aspect-ratio: 16 / 7; border-radius: 16px; overflow: hidden;
  box-shadow: 0 14px 40px rgba(0,0,0,.5);
  background: #0c0c10;
}
.km-hot__img, .km-hot__media .km-ph {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.km-hot__overlay {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.2rem 1.4rem 1.1rem;
  background: linear-gradient(to top, rgba(0,0,0,.92), rgba(0,0,0,.55) 55%, transparent);
}
.km-hot__title {
  color: #fff; font-size: clamp(1.05rem, 2.4vw, 1.7rem);
  line-height: 1.15; margin: .25rem 0 .35rem;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.km-hot__card:not(.is-active) .km-hot__overlay { padding-bottom: .8rem; }
.km-hot__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 40;
  width: 46px; height: 46px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.92); color: #14141a; font-size: 2rem; line-height: 1;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.35); transition: transform .2s, background .2s;
}
.km-hot__nav:hover { background: #fff; transform: translateY(-50%) scale(1.08); }
.km-hot__nav--prev { left: .25rem; }
.km-hot__nav--next { right: .25rem; }

/* ── Tags / dates / boutons ──────────────────────────────────── */
.km-tag {
  display: inline-block; font-family: "Roboto", sans-serif;
  font-size: .6rem; letter-spacing: .03em; text-transform: uppercase;
  color: var(--km-red); margin-bottom: .35rem;
}
.km-hot__tag, .km-hot__overlay .km-tag { color: #ffcf4d; }
.km-date { display: inline-block; font-size: .78rem; color: #8a8f9a; }
.km-date--light { color: rgba(255,255,255,.8); }
.km-btn {
  display: inline-block; background: var(--km-ink); color: #fff !important;
  font-weight: 700; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase;
  padding: .7rem 1.5rem; border-radius: 4px; transition: background .2s, color .2s, transform .2s;
}
/* Sections blanches (défaut) : bouton noir, hover orange. */
.km-btn:hover { background: var(--km-orange); color: #fff !important; transform: translateY(-1px); }

/* Sections sombres : bouton blanc (texte noir), hover orange. */
.km-section--dark .km-btn,
.sidebar-card--cta .km-btn { background: #fff; color: var(--km-ink) !important; }
.km-section--dark .km-btn:hover,
.sidebar-card--cta .km-btn:hover { background: var(--km-orange); color: #fff !important; }

/* Sections orange : garder un survol foncé lisible (l'orange se fondrait au fond). */
.km-section--orange .km-btn:hover { background: #14141a; color: #fff !important; }

/* ── Sections rubriques ──────────────────────────────────────── */
.km-section { padding: 3rem 0; }
.km-section--light  { background: #fff;  color: #16181d; }
.km-section--orange { background: var(--km-orange); color: #16181d; }
.km-section--dark   { background: var(--km-dark); color: #fff; }
.km-section__title {
  text-align: center; font-size: clamp(1.6rem, 4vw, 2.4rem);
  letter-spacing: .02em; margin-bottom: 2rem;
}
.km-section__title::first-letter { text-transform: uppercase; }
.km-section--dark .km-section__title { color: #fff; }
.km-section__empty { text-align: center; opacity: .6; }

/* Article vedette */
.km-featured { display: flex; flex-direction: column; }
.km-featured__media {
  display: block; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: #0c0c10;
}
.km-featured__img, .km-featured__media .km-ph {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s ease;
}
.km-featured__media:hover .km-featured__img { transform: scale(1.05); }
.km-featured__body { padding-top: 1rem; }
.km-featured__title { font-size: clamp(1.3rem, 2.6vw, 1.9rem); line-height: 1.15; margin: .2rem 0 .6rem; }

.km-featured__title a:hover { color: var(--km-red); }
.km-featured__excerpt { font-size: .95rem; line-height: 1.55; opacity: .85; margin-bottom: .5rem; }
.km-section--dark .km-featured__excerpt { opacity: .8; }

/* Carte de grille */
.km-card { display: flex; flex-direction: column; }
.km-card__media {
  display: block; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #0c0c10;
}
.km-card__img, .km-card__media .km-ph {
  width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease;
}
.km-card__media:hover .km-card__img { transform: scale(1.06); }
.km-card__body { padding-top: .55rem; }
.km-card__title { font-size: 1rem; line-height: 1.2; margin: 0 0 .3rem; }
/* Les liens héritent du gras du titre (la règle globale `a` force 400). */
.km-card__title a, .km-featured__title a, .km-hot__title a { color: inherit; font-weight: inherit; }
.km-card__title a:hover { color: var(--km-red); }

/* Placeholder média avec icône centrée */
.km-ph--icon {
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.9); font-size: 1.8rem;
}
/* Badge "play" sur les vignettes vidéo */
.km-media-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(0,0,0,.55); color: #fff; font-size: 1.6rem;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid rgba(255,255,255,.85); transition: transform .2s, background .2s;
}
.km-card__media:hover .km-media-play { transform: translate(-50%, -50%) scale(1.1); background: var(--km-red); }
.km-player__embed { position: relative; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .km-navbar .km-nav { padding: .5rem 0; }
  .km-nav__link { padding: .55rem .85rem !important; }
}
@media (max-width: 767.98px) {
  /* Sur mobile : bandeau plus haut (ratio 4/3 au lieu de 16/7) pour plus de présence. */
  .km-hot { --card-w: 92vw; }
  .km-hot__stage { height: calc(var(--card-w) * 0.75); }
  .km-hot__media { aspect-ratio: 4 / 3; }
  .km-hot__inner { padding: 0 1rem; }
  .km-hot__nav { width: 38px; height: 38px; font-size: 1.6rem; }
  .km-section { padding: 2.2rem 0; }
  .km-featured__body { padding-bottom: .5rem; }
}
/* ── "Le Buzz du moment" : rangée façon Reels (accueil) ──────── */
.km-buzzrow { background: var(--km-dark-2); color: #fff; padding: .9rem 0 1.1rem; }
.km-buzzrow__head { display: flex; align-items: center; margin-bottom: .6rem; padding: 0 .25rem; }
.km-buzzrow__title {
  font-size: 1.4rem; margin: 0; color: #fff;
  display: flex; align-items: center; gap: .55rem;
}
.km-buzzrow__dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--km-red);
  animation: kmPulse 1.6s infinite;
}
@keyframes kmPulse {
  0%   { box-shadow: 0 0 0 0 rgba(230,57,70,.45); }
  70%  { box-shadow: 0 0 0 8px rgba(230,57,70,0); }
  100% { box-shadow: 0 0 0 0 rgba(230,57,70,0); }
}
.km-buzzrow__viewport { position: relative; }
.km-buzzrow__track {
  display: flex; gap: .6rem; overflow-x: auto; scroll-behavior: smooth;
  scroll-snap-type: x proximity; padding: .1rem .25rem .3rem;
  scrollbar-width: none; -ms-overflow-style: none;
}
.km-buzzrow__track::-webkit-scrollbar { display: none; }
.km-buzzrow__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.95); color: #14141a; font-size: 1.15rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.45); transition: transform .2s;
}
.km-buzzrow__nav[hidden] { display: none; }
.km-buzzrow__nav:hover { transform: translateY(-50%) scale(1.08); }
.km-buzzrow__nav--prev { left: -.4rem; }
.km-buzzrow__nav--next { right: -.4rem; }

.km-reel {
  position: relative; flex: 0 0 auto; width: 132px; aspect-ratio: 9 / 16;
  border-radius: 10px; overflow: hidden; background: #0c0c10; color: #fff;
  scroll-snap-align: start; transition: transform .2s ease;
}
.km-reel:hover, .km-reel:focus-within { transform: scale(1.03); color: #fff; }
.km-reel__link { position: absolute; inset: 0; display: block; color: #fff; }
.km-reel__link:hover { color: #fff; }
.km-reel__media, .km-reel__img, .km-reel__video,
.km-vcard__media, .km-vcard__img, .km-vcard__video, .km-preview-iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
}
.km-reel__img, .km-reel__video, .km-vcard__img, .km-vcard__video { object-fit: cover; }
/* La vidéo (chargée au survol) reste invisible tant qu'elle ne joue pas : la cover reste affichée. */
.km-preview-video { opacity: 0; transition: opacity .25s; }
.is-playing .km-preview-video { opacity: 1; }

/* Aperçu YouTube injecté au survol : agrandi/recadré pour que l'interface
   YouTube reste hors champ, apparition différée (la miniature couvre le chargement). */
.km-preview-iframe.km-preview-iframe {
  border: 0; pointer-events: none;
  /* Rendue en 1280×720 (interface YouTube "bureau", discrète sans contrôles),
     puis réduite/recadrée au centre de la tuile (--km-scale calculé en JS). */
  top: 50%; left: 50%; width: 1280px; height: 720px;
  transform: translate(-50%, -50%) scale(var(--km-scale, 1));
  /* Invisible tant que YouTube n'a pas confirmé la lecture (classe is-playing). */
  opacity: 0; transition: opacity .3s ease;
}
.is-playing .km-preview-iframe { opacity: 1; }
/* Embeds : notre badge play reste affiché pendant l'aperçu, pile au centre, et
   masque l'icône que YouTube dessine au milieu de sa vidéo. */
.km-vcard[data-embed^="http"].is-playing .km-vcard__play {
  opacity: 1; width: 76px; height: 50px; border-radius: 25px; background: rgba(0,0,0,.7);
}
.km-reel[data-embed^="http"].is-playing .km-reel__play {
  opacity: 1; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 38px; height: 38px; border-radius: 50%; background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center; filter: none;
}

/* Bouton son de l'aperçu (visible pendant le survol) */
.km-preview-sound {
  position: absolute; top: .4rem; right: .4rem; z-index: 3;
  width: 32px; height: 32px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(0,0,0,.55); color: #fff; font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .2s, background .2s;
}
.is-playing .km-preview-sound, .km-preview-sound:focus-visible { opacity: 1; }
.km-preview-sound:hover { background: var(--km-orange); }

.km-reel__play {
  position: absolute; top: .45rem; left: .45rem; z-index: 2;
  font-size: 1.1rem; filter: drop-shadow(0 1px 3px rgba(0,0,0,.7)); transition: opacity .2s;
}
.km-reel.is-previewing .km-reel__play { opacity: 0; }
.km-reel__overlay {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 1.6rem .5rem .5rem; display: flex; flex-direction: column; gap: .1rem;
  background: linear-gradient(to top, rgba(0,0,0,.85), transparent);
}
.km-reel__title {
  font-size: .78rem; font-weight: 700; line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.km-reel--all {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
  background: rgba(255,255,255,.08); border: 1.5px dashed rgba(255,255,255,.3);
}
.km-reel__allicon {
  width: 46px; height: 46px; border-radius: 50%; background: var(--km-red);
  display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
}
.km-reel__alllabel { font-weight: 800; font-size: .9rem; }
.km-reel--all:hover .km-reel__allicon { background: var(--km-orange); }

/* ── Section "Vidéos à la une" (accueil) : grille 4 par ligne ── */
.km-vid { background: var(--km-dark-2); color: #fff; }
.km-vid .km-section__title { color: #fff; }
.km-vid .km-btn { background: #fff; color: var(--km-ink) !important; }
.km-vid .km-btn:hover { background: var(--km-orange); color: #fff !important; }
.km-vcard { display: flex; flex-direction: column; height: 100%; }
.km-vcard__frame {
  position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden;
  background: #0c0c10; box-shadow: 0 8px 24px rgba(0,0,0,.4); transition: transform .2s ease;
}
.km-vcard:hover .km-vcard__frame, .km-vcard:focus-within .km-vcard__frame { transform: translateY(-3px); }
.km-vcard__link { position: absolute; inset: 0; display: block; color: #fff; }
.km-vcard__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2;
  width: 46px; height: 46px; border-radius: 50%; background: rgba(0,0,0,.55);
  border: 2px solid rgba(255,255,255,.85); color: #fff; font-size: 1.5rem;
  display: flex; align-items: center; justify-content: center; transition: opacity .2s;
}
.km-vcard.is-previewing .km-vcard__play { opacity: 0; }
.km-vcard__title { font-size: .98rem; line-height: 1.25; margin: .65rem 0 .25rem; }
.km-vcard__title a { color: inherit; font-weight: inherit; }
.km-vcard__title a:hover { color: var(--km-orange); }

@media (max-width: 575.98px) {
  .km-reel { width: 108px; }
  .km-buzzrow__nav { width: 34px; height: 34px; }
}

/* ════════════════════════════════════════════════════════════════
   LECTEURS VIDEO.JS 10 — habillage Kuluna
   ════════════════════════════════════════════════════════════════ */
/* Lecteur vidéo (fichiers uploadés + YouTube) */
.km-vjs {
  display: block; width: 100%; aspect-ratio: 16 / 9; background: #000;
  --media-accent-color: var(--km-orange);
  --media-accent-text-color: #fff;
  --media-border-radius: 14px;
  --media-font-family: "Roboto", sans-serif;
}

/* Bouton "Écouter" */
.km-play-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  border: none; cursor: pointer; border-radius: 999px;
  background: var(--km-orange); color: #fff; font-weight: 700;
  transition: transform .15s, background .15s;
}
.km-play-btn:hover { transform: scale(1.06); background: #ff7d22; }
.km-play-btn i { font-size: 1.3em; line-height: 1; }
.km-play-btn--lg { padding: .7rem 1.6rem .7rem 1.2rem; font-size: 1rem; }
.km-play-btn--overlay {
  position: absolute; right: .35rem; bottom: .35rem; width: 34px; height: 34px;
  box-shadow: 0 4px 12px rgba(0,0,0,.45); opacity: .95;
}

/* Carte "son" (page média) */
.km-son {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; gap: 1.4rem; align-items: center; padding: 1.4rem;
  border-radius: 14px;
  /* Teinte = couleur dominante de la pochette (cover-tint), repli gris-bleu. */
  background: linear-gradient(135deg, var(--km-tint, #2a2d38) 0%, #14141a 100%);
  transition: background .6s ease;
}
/* Pochette floutée en fond (si cover) */
.km-son::before {
  content: ""; position: absolute; inset: -40px; z-index: -1;
  background: var(--km-cover, none) center / cover; filter: blur(40px) saturate(1.3);
  opacity: .45;
}
.km-son__cover {
  flex: 0 0 auto; width: 180px; aspect-ratio: 1; border-radius: 10px; overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
}
.km-son__cover img, .km-son__cover .km-ph { width: 100%; height: 100%; object-fit: cover; display: flex; }
.km-son__body { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
.km-son__label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; opacity: .7; }
.km-son__title { font-size: clamp(1.3rem, 3vw, 2rem); line-height: 1.15; }

/* Barre audio persistante façon Spotify */
.km-abar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1050; isolation: isolate;
  /* Teinte = couleur dominante de la pochette en cours (--km-tint, posée en JS). */
  background: linear-gradient(90deg, var(--km-tint, #0e0e12) 0%, #0e0e12 75%);
  color: #fff; border-top: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 -6px 24px rgba(0,0,0,.45); transition: background .6s ease;
}
/* Pochette floutée en fond, sous un voile sombre pour la lisibilité. */
.km-abar__bg {
  position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background-position: center; background-size: cover;
  filter: blur(36px) saturate(1.4); opacity: .35; transform: scale(1.3);
}
.km-abar[hidden] { display: none; }
body.has-audio-bar { padding-bottom: 84px; }
.km-abar__inner {
  /* titre | logo | lecteur | actions */
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 2fr) auto;
  align-items: center; gap: 1rem; padding: .55rem 1rem; min-height: 76px;
}
/* Logo Kuluna (noir d'origine rendu blanc, comme dans le header) */
.km-abar__logo {
  height: 30px; width: auto; opacity: .9; pointer-events: none;
  filter: brightness(0) invert(1) drop-shadow(0 1px 4px rgba(0,0,0,.4));
}
.km-abar__now { display: flex; align-items: center; gap: .75rem; min-width: 0; color: #fff; }
.km-abar__now:hover .km-abar__title { text-decoration: underline; }
.km-abar__cover {
  flex: 0 0 56px; height: 56px; border-radius: 6px; overflow: hidden;
  background: linear-gradient(160deg, #8b5cf6 0%, #14141a 80%);
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
}
.km-abar__cover img { width: 100%; height: 100%; object-fit: cover; }
.km-abar__cover [hidden] { display: none; }
.km-abar__text { display: flex; flex-direction: column; min-width: 0; }
.km-abar__title, .km-abar__subtitle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.km-abar__title { font-size: .9rem; font-weight: 700; }
.km-abar__subtitle { font-size: .75rem; color: rgba(255,255,255,.6); }
.km-abar__center { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.km-abar__player { flex: 1; min-width: 0; }
.km-abar__skin {
  display: block; width: 100%;
  --media-accent-color: var(--km-orange);
  --media-accent-text-color: #fff;
  --media-border-radius: 999px;
  --media-border-color: transparent;
  --media-font-family: "Roboto", sans-serif;
}
.km-abar__right { display: flex; align-items: center; gap: .25rem; }
.km-abar__icon {
  width: 38px; height: 38px; border-radius: 50%; border: none; background: transparent;
  color: rgba(255,255,255,.75); font-size: 1.25rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: color .15s, background .15s;
}
.km-abar__icon:hover:not(:disabled) { color: #fff; background: rgba(255,255,255,.08); }
.km-abar__icon:disabled { opacity: .3; cursor: default; }

/* File d'attente */
.km-abar__queue {
  position: absolute; right: 1rem; bottom: calc(100% + .5rem); width: min(340px, calc(100vw - 2rem));
  max-height: 50vh; overflow: auto; background: #1c1c22; border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0,0,0,.6); padding: .6rem;
}
.km-abar__queue[hidden] { display: none; }
.km-abar__queue-head { display: flex; align-items: center; justify-content: space-between; padding: 0 .3rem .4rem; }
.km-abar__queue-list { list-style: none; margin: 0; padding: 0; counter-reset: q; }
.km-abar__queue-item {
  width: 100%; text-align: left; border: none; background: transparent; color: rgba(255,255,255,.85);
  padding: .5rem .6rem; border-radius: 6px; font-size: .88rem; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.km-abar__queue-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.km-abar__queue-item.is-current { color: var(--km-orange); font-weight: 700; }

@media (max-width: 767.98px) {
  /* Mobile : pochette + titre sur une ligne, contrôles en dessous */
  .km-abar__inner { grid-template-columns: minmax(0, 1fr) auto auto; gap: .35rem .5rem; padding: .45rem .6rem; }
  .km-abar__logo { height: 22px; }
  .km-abar__center { grid-column: 1 / -1; grid-row: 2; }
  .km-abar__cover { flex-basis: 44px; height: 44px; }
  body.has-audio-bar { padding-bottom: 128px; }
  .km-son { flex-direction: column; text-align: center; }
  .km-son__body { align-items: center; }
}

/* ── Section "Les sons du moment" (accueil) ───────────────────── */
/* Fond clair : alterne avec "Vidéos à la une" (sombre) et la 1re rubrique (sombre). */
.km-sons { background: #f4f4f6; color: var(--km-ink); }
.km-scard {
  position: relative; isolation: isolate; overflow: hidden; height: 100%;
  padding: .75rem .75rem 1rem; border-radius: 12px;
  /* Carte teintée aux couleurs de la pochette (cover-tint) + pochette floutée. */
  background: linear-gradient(160deg, var(--km-tint, #2a2d38) 0%, rgba(20,20,26,.95) 85%);
  transition: background .6s ease, transform .2s ease;
}
.km-scard::before {
  content: ""; position: absolute; inset: -30px; z-index: -1;
  background: var(--km-cover, none) center / cover; filter: blur(30px) saturate(1.3); opacity: .35;
}
.km-scard:hover { transform: translateY(-3px); }
.km-scard__art {
  position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
}
.km-scard__link, .km-scard__img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.km-scard__img { object-fit: cover; }
.km-scard__img.km-ph { display: flex; }
.km-scard__play {
  position: absolute; right: .55rem; bottom: .55rem; width: 46px; height: 46px; z-index: 2;
  box-shadow: 0 6px 16px rgba(0,0,0,.5);
  /* Comme Spotify : le bouton apparaît/monte au survol (toujours visible au tactile). */
  opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s, background .15s;
}
.km-scard:hover .km-scard__play, .km-scard__play:focus-visible { opacity: 1; transform: none; }
@media (hover: none) { .km-scard__play { opacity: 1; transform: none; } }
.km-scard__title { font-size: .95rem; line-height: 1.25; margin: .7rem 0 .2rem; }
.km-scard__title a { color: #fff; font-weight: inherit; }
.km-scard__title a:hover { color: var(--km-orange); }
.km-scard__meta { font-size: .75rem; color: rgba(255,255,255,.65); }
.km-play-btn--spotify { background: #1DB954; }
.km-play-btn--spotify:hover { background: #1ed760; }

/* ── Page /rubriques : cartes de rubrique ─────────────────────── */
.km-rubcard {
  display: flex; flex-direction: column; gap: .4rem; padding: 1.4rem;
  border-radius: 12px; background: #f4f4f6; color: var(--km-ink);
  border-left: 4px solid var(--km-orange); transition: transform .2s, box-shadow .2s;
}
.km-rubcard:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0,0,0,.08); color: var(--km-ink); }
.km-rubcard__title { font-size: 1.25rem; font-weight: 800; }
.km-rubcard__desc { font-size: .9rem; color: #5b5f69; }
.km-rubcard__count { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--km-red); margin-top: auto; }

/* ── Playlists ───────────────────────────────────────────────── */
/* Rangée de l'accueil : fond blanc, entre "Les sons du moment" (gris clair)
   et la 1re rubrique (sombre). */
.km-plrow { background: #fff; color: var(--km-ink); }
.km-plrow__track { gap: 1rem; padding-bottom: .6rem; }
.km-plrow__item { flex: 0 0 190px; scroll-snap-align: start; }
.km-plrow__all {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem;
  aspect-ratio: 1; align-self: flex-start; border-radius: 12px; color: var(--km-ink);
  background: #f4f4f6; border: 1.5px dashed rgba(0,0,0,.18); font-weight: 800; text-align: center; padding: 1rem;
}
.km-plrow__all:hover { color: var(--km-ink); }
.km-plrow__all .km-reel__allicon { color: #fff; }
.km-plrow__all:hover .km-reel__allicon { background: var(--km-orange); }
.km-plrow .km-buzzrow__nav { top: 40%; }
.km-scard--playlist .km-ph--icon { font-size: 2.6rem; }

/* En-tête d'une playlist, façon page d'album */
.km-plhead {
  position: relative; isolation: isolate; overflow: hidden; color: #fff; padding: 3rem 0 2.2rem;
  background: linear-gradient(180deg, var(--km-tint, #3a2a20) 0%, #14141a 100%);
  transition: background .6s ease;
}
.km-plhead::before {
  content: ""; position: absolute; inset: -60px; z-index: -1;
  background: var(--km-cover, none) center / cover; filter: blur(60px) saturate(1.3); opacity: .35;
}
.km-plhead__inner { display: flex; gap: 2rem; align-items: flex-end; }
.km-plhead__art {
  flex: 0 0 auto; width: 230px; aspect-ratio: 1; border-radius: 10px; overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
}
.km-plhead__art img, .km-plhead__art .km-ph { width: 100%; height: 100%; object-fit: cover; display: flex; font-size: 4rem; }
.km-plhead__label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; opacity: .8; }
.km-plhead__title { font-size: clamp(2rem, 6vw, 4.2rem); line-height: 1.02; margin: .3rem 0 .6rem; color: #fff; }
.km-plhead__desc { max-width: 680px; opacity: .85; margin-bottom: .5rem; }
.km-plhead__meta { font-size: .88rem; font-weight: 600; opacity: .9; }

/* Liste des morceaux */
.km-tracks { list-style: none; margin: 0 0 2.5rem; padding: 0; }
.km-track {
  width: 100%; display: grid; grid-template-columns: 2.2rem 44px minmax(0, 1fr) auto;
  align-items: center; gap: .9rem; padding: .5rem .75rem; border: none; border-radius: 8px;
  background: transparent; color: var(--km-ink); text-align: left; cursor: pointer; transition: background .15s;
}
.km-track:hover { background: #f1f1f4; }
.km-track__num { position: relative; text-align: center; color: #8a8f9a; font-size: .95rem; }
.km-track__num i { position: absolute; inset: 0; display: none; font-size: 1.3rem; color: var(--km-ink); }
.km-track:hover .km-track__num span { visibility: hidden; }
.km-track:hover .km-track__num i { display: block; }
.km-track__cover { width: 44px; height: 44px; border-radius: 6px; overflow: hidden; }
.km-track__cover img, .km-track__cover .km-ph { width: 100%; height: 100%; object-fit: cover; display: flex; font-size: 1rem; }
.km-track__text { display: flex; flex-direction: column; min-width: 0; }
.km-track__text strong, .km-track__text small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.km-track__text strong { font-weight: 700; }
.km-track__text small { color: #6b7080; }
.km-track__duration { color: #6b7080; font-size: .88rem; font-variant-numeric: tabular-nums; }
/* Morceau en cours (annoncé par la barre audio) */
.km-track.is-current .km-track__text strong, .km-track.is-current .km-track__num { color: var(--km-orange); }

.km-plspotify { width: 100%; border-radius: 12px; margin-bottom: 2.5rem; }
.km-plothers__title { font-size: 1.4rem; margin: 0 0 1rem; }

@media (max-width: 767.98px) {
  .km-plhead { padding: 2rem 0 1.6rem; }
  .km-plhead__inner { flex-direction: column; align-items: flex-start; gap: 1.2rem; }
  .km-plhead__art { width: 170px; }
  .km-plrow__item { flex-basis: 150px; }
  .km-track { grid-template-columns: 1.6rem 40px minmax(0, 1fr) auto; gap: .6rem; padding: .45rem .3rem; }
}