/*
 * 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); }
.km-nav .nav-item:first-child .km-nav__link { 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 { color: inherit; }
.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; }
.km-card__title a { color: 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; }
}