:root {
    color-scheme: dark;
    --bg: #001225;
    --text: #fcfaff;
    --muted: #c6d3e8;
    --violet: #ae7af7;
    --coral: #ff5373;
    --line: #36506c;
}
* {
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
    scroll-padding-top: 24px;
}
body {
    margin: 0;
    background: radial-gradient(ellipse at 75% 1%, #20113e66, transparent 28%), var(--bg);
    color: var(--text);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
}
button,
input {
    font: inherit;
}
button,
a,
input {
    -webkit-tap-highlight-color: transparent;
}
button,
a {
    touch-action: manipulation;
}
a {
    color: inherit;
    text-decoration: none;
}
button {
    cursor: pointer;
}
button:focus-visible,
a:focus-visible,
input:focus-visible {
    outline: 3px solid #c29aff;
    outline-offset: 4px;
}
button {
    color: inherit;
}
button:disabled {
    cursor: default;
}
button:hover,
.button:hover {
    filter: brightness(1.13);
}
.wrap {
    width: 100%;
    max-width: 1320px;
    margin-inline: auto;
}
.header {
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    position: relative;
    z-index: 2;
}
.brand {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-shrink: 0;
}
.brand img {
    object-fit: contain;
}
.brand strong {
    font-family: Georgia, serif;
    font-size: 30px;
    letter-spacing: -1px;
    white-space: nowrap;
}
.brand strong span {
    font-weight: 400;
}
.brand small {
    display: block;
    font-size: 7.3px;
    margin-top: 3px;
    letter-spacing: .12px;
    color: #d4c6ff;
}
.header nav {
    display: flex;
    gap: 30px;
    margin-left: auto;
    align-items: center;
    font-size: 10px;
}
.header nav a:hover {
    color: var(--violet);
}
.header-actions {
    display: flex;
    align-items: center;
    gap: 17px;
    margin-left: 20px;
}
.button {
    border: 0;
    border-radius: 11px;
    background: linear-gradient(110deg, #ff5c83, #ff5268);
    color: white;
    font-size: 12px;
    font-weight: 600;
    padding: 11px 20px;
    transition: filter .2s, transform .2s;
}
.button:hover {
    transform: translateY(-1px);
}
.login {
    font-size: 10px;
    padding: 11px 19px;
}
.divider {
    height: 20px;
    width: 1px;
    background: #8b8b9f;
}
.search-shortcut {
    border: 0;
    background: none;
    padding: 5px;
    display: flex;
}
.search-icon {
    display: inline-block;
    border: 1.7px solid currentColor;
    border-radius: 50%;
    width: 13px;
    height: 13px;
    position: relative;
    flex-shrink: 0;
}
.search-icon:after {
    content: '';
    position: absolute;
    width: 6px;
    height: 1.6px;
    background: currentColor;
    transform: rotate(47deg);
    right: -4px;
    bottom: -2px;
}
.menu-toggle {
    display: none;
}
.hero {
    position: relative;
    min-height: 230px;
    padding-top: 8px;
    padding-bottom: 14px;
}
.hero-art {
    position: absolute;
    right: -6.15%;
    top: -16px;
    width: 52%;
    height: 246px;
    background:
        linear-gradient(
            to right,
            transparent 35%,
            rgba(0, 18, 37, 0.15) 50%,
            rgba(0, 18, 37, 0.35) 65%,
            rgba(0, 18, 37, 0.70) 80%,
            rgba(0, 18, 37, 0.90) 92%,
            #001225 100%
        ),
        url(../assets/hero.webp) right center / cover no-repeat;
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        #000 13%
    );
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        #000 13%
    );
    z-index: -1;
}
.hero-copy {
    position: relative;
    width: 66%;
}
h1,
h2,
h3,
p {
    margin: 0;
}
h1,
h2 {
    font-family: Georgia, 'Times New Roman', serif;
    letter-spacing: -.6px;
}
h1 {
    font-size: 55px;
    line-height: .95;
    font-weight: 700;
    letter-spacing: -1.2px;
    white-space: nowrap;
}
h1 em {
    font-style: normal;
    color: var(--violet);
}
.hero-copy > p {
    font-size: 14px;
    margin: 10px 0 12px;
    white-space: nowrap;
}
.search {
    display: flex;
    align-items: center;
    background: #eef0f8;
    color: #001225;
    border-radius: 24px;
    width: 83%;
    height: 38px;
    padding-left: 17px;
    gap: 14px;
    overflow: hidden;
}
.search input {
    width: 100%;
    min-width: 0;
    background: none;
    border: 0;
    color: #192c4d;
    outline: none;
    font-size: 10px;
}
.search input::placeholder {
    color: #35476a;
}
.search .button {
    height: 100%;
    border-radius: 10px 23px 23px 10px;
    padding-inline: 26px;
    font-size: 10px;
}
.hero-description {
    max-width: 850px;
    margin: 18px 0 24px;
    color: #e1e8f5;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: -0.15px;
    text-wrap: pretty;
}
.hero-description span {
    display: block;
}
/* Tablettes */
@media (max-width: 900px) {
    .hero-description {
        max-width: 100%;
        font-size: 15px;
        line-height: 1.6;
    }
}
/* Smartphones */
@media (max-width: 600px) {
    .hero-description {
        margin: 14px 0 20px;
        font-size: 14px;
        line-height: 1.65;
    }
    .hero-description span {
        display: inline;
    }
    .hero-description span + span::before {
        content: " ";
    }
}
.benefits {
    display: flex;
    gap: 23px;
    margin-top: 16px;
    font-size: 9px;
    white-space: nowrap;
}
.benefits span {
    display: flex;
    align-items: center;
    gap: 9px;
}
.benefits b {
    color: #a46aff;
    font-size: 23px;
    line-height: 18px;
}
.section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: 20px;
    margin-bottom: 9px;
}
h2 {
    font-size: 28px;
    line-height: 1.08;
}
.text-link {
    border: 0;
    background: none;
    padding: 4px 0;
    font-size: 10px;
    color: #bc93ff;
    white-space: nowrap;
}
.filters {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    overflow: auto;
    padding-bottom: 1px;
    scrollbar-width: thin;
}
.filters button {
    border: 1px solid var(--line);
    background: transparent;
    border-radius: 20px;
    font-size: 10px;
    padding: 5px 16px;
    white-space: nowrap;
    line-height: 1.2;
}
.filters button.active {
    border-color: #a366ff;
    background: linear-gradient(120deg, #9d61ef, #8744f2);
}
.videos {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}
.video-card {
    min-width: 0;
}
.video-link {
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    display: block;
    width: 100%;
}
.thumbnail {
    aspect-ratio: 2.16;
    position: relative;
    border-radius: 6px;
    border: 1px solid #64768b;
    overflow: hidden;
    background: #142338;
}
.thumbnail > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .25s;
}
.video-link:hover .thumbnail > img {
    transform: scale(1.04);
}
.play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}
.play:after {
    content: '▶';
    border: 1.5px solid #fff;
    border-radius: 50%;
    font-size: 15px;
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    background: #07101c77;
    padding-left: 2px;
}
.youtube-label {
    position: absolute;
    left: 7px;
    bottom: 4px;
    font-size: 8px;
    text-shadow: 0 1px 2px #000;
}
.youtube-label b,
.youtube {
    display: inline-block;
    border-radius: 3px;
    background: #ff0023;
    color: #fff;
    font-size: 8px;
    padding: 1px 4px;
    margin-right: 3px;
}
.duration {
    position: absolute;
    bottom: 4px;
    right: 5px;
    background: #000b;
    border-radius: 3px;
    font-size: 9px;
    padding: 2px 4px;
}
.video-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 5px;
    gap: 4px;
}
.video-title {
    font-family: Georgia, serif;
    font-size: 14px;
    font-weight: bold;
}
.video-meta button {
    background: none;
    border: 0;
    font-size: 15px;
    padding: 0 4px;
}
.video-sub {
    font-size: 10px;
    color: var(--muted);
    margin-top: 3px;
}
.styles {
    margin-top: 20px;
}
.genres {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 7px;
}
.genre {
    position: relative;
    aspect-ratio: 1.34;
    overflow: hidden;
    border: 1px solid #697386;
    border-radius: 6px;
    background: #0c1730;
    padding: 0;
    margin: 0px 5px;
}
.genre img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: transform .3s;
}
.genre:after {
    content: '';
    position: absolute;
    inset: 20% 0 0;
    background: linear-gradient(transparent, #001020c9);
}
.genre span {
    position: absolute;
    z-index: 1;
    bottom: 7px;
    left: 0;
    right: 0;
    font-family: Georgia, serif;
    font-size: 22px;
    font-weight: bold;
    text-shadow: 0 2px 5px #000;
}
.genre:hover img {
    transform: scale(1.07);
}
.story {
    margin-top: 16px;
    display: grid;
    grid-template-columns: 50% 33% 17%;
    background: radial-gradient(at right, #10254a, #031427);
    align-items: center;
    min-height: 175px;
}
.story > img {
    width: 100%;
    height: 175px;
    object-fit: cover;
}
.story-copy {
    padding: 12px 20px;
}
.story h2 {
    font-size: 27px;
}
.story-copy > p {
    font-size: 11px;
    line-height: 1.5;
    margin: 8px 0;
}
.story .button {
    font-size: 10px;
    padding: 9px 16px;
}
.handwriting {
    font-family: cursive;
    color: #c7a3f5;
    font-style: italic;
    font-size: 16px;
    transform: rotate(-12deg);
    line-height: 1.6;
}
.handwriting span {
    display: block;
    width: 65px;
    border-top: 2px solid #ff687d;
    margin: 8px auto;
}
.artists {
    margin-top: 11px;
}
.artist-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 30px;
}
.artist {
    border: 0;
    background: none;
    padding: 0;
    text-align: center;
}
.artist img {
    width: 150px;
    height: auto;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 1px solid #8d98b8;
    object-fit: cover;
    object-position: center;
    display: block;
    margin: 0 auto;
    transition: transform .2s ease;
    box-sizing: border-box;
}
.artist:hover img {
    transform: scale(1.05);
}
.artist strong {
    display: block;
    font-family: Georgia, serif;
    font-size: 14px;
    margin-top: 4px;
}
.artist small {
    display: block;
    color: var(--muted);
    font-size: 10px;
    margin-top: 2px;
}
.newsletter {
    width: 95.4%;
    max-width: 1410px;
    margin: 13px auto 15px;
    border: 1px solid #7961b5;
    border-radius: 7px;
    min-height: 99px;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 15px 5.8% 15px 18.3%;
    background:
        linear-gradient(90deg, transparent 10%, #25115b99 20%, #20105466 76%, transparent),
        url('../assets/newsletter.webp') center / 100% 100% no-repeat;
}
.newsletter-copy {
    flex: 1;
}
.newsletter h2 {
    font-size: 23px;
    letter-spacing: -.4px;
    white-space: nowrap;
}
.newsletter p {
    font-size: 11px;
    margin-top: 6px;
}
.newsletter-form {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #eef0fa;
    color: #42557a;
    border-radius: 22px;
    padding-left: 13px;
    width: 36%;
    flex-shrink: 0;
    overflow: hidden;
    height: 33px;
}
.newsletter-form input {
    width: 100%;
    min-width: 0;
    border: 0;
    background: none;
    color: #23324c;
    outline: none;
    font-size: 9px;
}
.newsletter-form .button {
    font-size: 10px;
    white-space: nowrap;
    padding: 10px 19px;
    border-radius: 0 20px 20px 0;
}
footer {
    border-top: 1px solid #5a6274;
    background: linear-gradient(120deg, #03192b, #001223);
}
.footer-inner {
    max-width: 1340px;
    width: 90.5%;
    margin: auto;
}
.footer-main {
    display: grid;
    grid-template-columns: 2.1fr 1fr 1.05fr 1.05fr 1.1fr;
    gap: 40px;
    padding: 15px 0 11px;
}
.footer-brand .brand strong {
    font-size: 25px;
}
.footer-brand .brand small {
    font-size: 6px;
}
.footer-brand .brand img {
    width: 48px;
    height: 58px;
}
.footer-brand > p {
    font-size: 10px;
    line-height: 1.5;
    margin: 8px 0;
    max-width: 245px;
}
.footer-main h3 {
    font-weight: 400;
    font-size: 12px;
    margin: 8px 0;
}
.footer-main > div > a,
.footer-main > div > button {
    display: block;
    border: 0;
    background: none;
    padding: 0;
    text-align: left;
    margin: 0 0 5px;
    color: #d7e1ef;
    font-size: 10px;
}
.socials {
    display: flex;
    gap: 14px;
}
.socials a {
    display: grid;
    place-items: center;
    width: 23px;
    height: 23px;
    background: #177aff;
    border-radius: 50%;
    font-size: 23px;
    font-weight: bold;
}
.socials a:nth-child(2) {
    background: linear-gradient(25deg, #ffca39, #f63883, #8549e0);
    border-radius: 7px;
    font-size: 24px;
}
.socials a:nth-child(3) {
    background: #ff183d;
    border-radius: 6px;
    font-size: 14px;
}
.footer-bottom {
    border-top: 1px solid var(--line);
    padding: 13px 0 22px;
    display: flex;
    justify-content: space-between;
    color: var(--muted);
    font-size: 10px;
}
.empty {
    padding: 40px 0;
    color: var(--muted);
}
dialog {
    border: 1px solid #70549c;
    background: #071a30;
    color: var(--text);
    border-radius: 15px;
    padding: 35px;
    max-width: 650px;
    width: calc(100% - 32px);
}
dialog::backdrop {
    background: #000b;
    backdrop-filter: blur(5px);
}
.modal-close {
    position: absolute;
    right: 12px;
    top: 7px;
    font-size: 27px;
    border: 0;
    background: none;
}
.modal-content h2 {
    margin-bottom: 15px;
}
.modal-content p {
    line-height: 1.7;
    color: var(--muted);
}
.modal-content a {
    display: inline-block;
    margin-top: 15px;
}
.modal-content input {
    display: block;
    width: 100%;
    padding: 12px;
    margin: 14px 0;
    border: 1px solid #57617a;
    border-radius: 6px;
    background: #001225;
}
.sr-only,
.skip:not(:focus) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.skip:focus {
    position: fixed;
    top: 5px;
    left: 5px;
    z-index: 20;
    background: #fff;
    color: #000;
    padding: 15px;
}
[hidden] {
    display: none !important;
}
header nav a
{
    font-size: 16px;
    display: inline-flex;
    gap: 10px;
    align-items: center;
}
@media (min-width: 1200px) {
    .header {
        height: 82px;
    }
    .hero {
        min-height: 310px;
        padding-top: 20px;
    }
    .hero-art {
        height: 400px;
        top: 0px;
    }
    .hero-copy > p {
        font-size: 17px;
        margin: 17px 0;
    }
    .search {
        height: 46px;
    }
    .search input,
    .search .button {
        font-size: 14px;
    }
    .benefits {
        font-size: 12px;
        margin-top: 22px;
    }
    .benefits b {
        font-size: 26px;
    }
    h2 {
        font-size: 34px;
    }
    .header nav {
        font-size: 13px;
        gap: 40px;
    }
    .brand strong {
        font-size: 36px;
    }
    .brand small {
        font-size: 11px;
    }
    .header .brand img {
        width: 48px;
        height: 58px;
    }
    .login {
        font-size: 14px;
        display: inline-flex;
        gap: 10px;
        align-items: center;
    }
    .filters button {
        font-size: 12px;
    }
    .filters {
        margin: 13px 0 18px;
    }
    .text-link {
        font-size: 16px;
    }
    .discover .section-heading .text-link {
        font-size: 16px;
        margin-top: 25px;
    }
    .videos {
        gap: 20px;
    }
    .video-title {
        font-size: 18px;
    }
    .video-sub {
        font-size: 13px;
    }
    .thumbnail .play:after {
        width: 35px;
        height: 35px;
    }
    .duration {
        font-size: 11px;
    }
    .youtube-label {
        font-size: 10px;
    }
    .styles {
        margin-top: 28px;
    }
    .genre span {
        font-size: 28px;
    }
    .story {
        margin-top: 60px;
        margin-bottom: 10px;
        min-height: 230px;
    }
    .story > img {
        height: 230px;
    }
    .story-copy {
        padding: 18px 28px;
    }
    .story h2 {
        font-size: 34px;
    }
    .story-copy > p {
        font-size: 14px;
    }
    .story .button {
        font-size: 14px;
        margin-top: 10px;
    }
    .handwriting {
        font-size: 21px;
    }
    .artists {
        margin-top: 20px;
    }
    .artist strong {
        font-size: 18px;
    }
    .artist small {
        font-size: 13px;
    }
    .newsletter {
        min-height: 125px;
        margin-top: 22px;
    }
    .newsletter h2 {
        font-size: 29px;
    }
    .newsletter p {
        font-size: 15px;
    }
    .newsletter-form {
        height: 41px;
    }
    .newsletter-form input,
    .newsletter-form .button {
        font-size: 14px;
    }
    .footer-main {
        padding: 25px 0 20px;
    }
    .footer-main h3 {
        font-size: 20px;
        margin-bottom: 15px;
    }
    .footer-main > div > a,
    .footer-main > div > button,
    .footer-brand > p,
    .footer-bottom {
        font-size: 14px;
    }
}
@media (max-width: 900px) {
    .header nav {
        gap: 16px;
    }
    .header-actions {
        margin-left: 0;
        gap: 12px;
    }
    .brand strong {
        font-size: 25px;
    }
    .brand small {
        font-size: 6px;
    }
    .hero-copy > p {
        font-size: 12px;
    }
    .benefits {
        gap: 13px;
        font-size: 8px;
    }
    .filters button {
        padding-inline: 13px;
    }
    .newsletter {
        padding-left: 19%;
        padding-right: 3%;
        gap: 15px;
    }
    .newsletter h2 {
        font-size: 18px;
    }
    .newsletter p {
        font-size: 9px;
    }
    .newsletter-form {
        width: 36%;
    }
    .footer-main {
        gap: 22px;
    }
    .story h2 {
        font-size: 23px;
    }
    .story-copy {
        padding: 12px;
    }
    .handwriting {
        font-size: 13px;
    }
    .artist-grid {
        gap: 22px;
    }
}
@media (max-width: 700px) {
    .wrap {
        width: 91%;
    }
    .header {
        height: 72px;
        gap: 10px;
    }
    .header .brand strong {
        font-size: 27px;
    }
    .header .brand small {
        font-size: 6.5px;
    }
    .header-actions {
        margin-left: auto;
    }
    .header-actions .divider,
    .search-shortcut {
        display: none;
    }
    .login {
        padding: 10px 12px;
        font-size: 10px;
    }
    .menu-toggle {
        display: block;
        order: 3;
        background: none;
        border: 1px solid var(--line);
        border-radius: 6px;
        padding: 5px 9px;
        font-size: 19px;
    }
    .header nav {
        display: none;
        position: absolute;
        top: 64px;
        right: 0;
        background: #0b1b31;
        border: 1px solid var(--line);
        padding: 20px;
        min-width: 220px;
        border-radius: 10px;
        box-shadow: 0 10px 30px #0009;
        font-size: 14px;
    }
    .header nav.open {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
    .hero {
        padding-top: 20px;
        min-height: 440px;
        display: flex;
        align-items: flex-start;
    }
    .hero-copy {
        width: 100%;
    }
    h1 {
        font-size: clamp(30px, 6.9vw, 48px);
        line-height: 1.03;
        letter-spacing: -.7px;
    }
    .hero-copy > p {
        white-space: normal;
        font-size: 13px;
        max-width: 340px;
        line-height: 1.5;
        margin: 14px 0;
    }
    .hero-art {
        width: 83%;
        height: 260px;
        top: 180px;
        right: -4.9%;
        mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
    }
    .search {
        width: 100%;
        max-width: 500px;
        height: 43px;
        position: relative;
        z-index: 1;
    }
    .search input {
        font-size: 11px;
    }
    .search .button {
        padding-inline: 15px;
    }
    .benefits {
        flex-direction: column;
        gap: 10px;
        margin-top: 25px;
        font-size: 10px;
        width: 130px;
        white-space: normal;
    }
    .benefits span {
        gap: 7px;
    }
    .benefits b {
        font-size: 25px;
    }
    .section-heading {
        align-items: baseline;
        gap: 10px;
    }
    h2 {
        font-size: 25px;
    }
    .text-link {
        font-size: 9px;
        white-space: normal;
        text-align: right;
        max-width: 95px;
    }
    .filters {
        margin-top: 13px;
        gap: 7px;
        padding-bottom: 8px;
    }
    .filters button {
        padding: 7px 15px;
        font-size: 11px;
    }
    .videos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 19px 12px;
    }
    .thumbnail {
        aspect-ratio: 1.85;
    }
    .video-title {
        font-size: 14px;
    }
    .video-sub {
        font-size: 10px;
    }
    .styles {
        margin-top: 27px;
    }
    .genres {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 9px;
        margin-top: 15px;
    }
    .genre {
        aspect-ratio: 1.2;
    }
    .genre span {
        font-size: 20px;
    }
    .story {
        grid-template-columns: 1fr;
        margin-top: 25px;
    }
    .story > img {
        height: auto;
        aspect-ratio: 2.5;
        object-position: center;
    }
    .story-copy {
        padding: 22px 5% 25px;
    }
    .story h2 {
        font-size: 29px;
    }
    .story-copy p {
        font-size: 13px;
        max-width: 500px;
        margin: 12px 0 16px;
    }
    .story .button {
        font-size: 12px;
    }
    .handwriting {
        display: none;
    }
    .artists {
        margin-top: 24px;
    }
    .artist-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 21px 18px;
        margin-top: 18px;
    }
    .artist strong {
        font-size: 14px;
    }
    .artist small {
        font-size: 11px;
    }
    .newsletter {
        width: 91%;
        margin: 28px auto;
        padding: 23px 18px 20px;
        display: block;
        background:
            linear-gradient(100deg, #21154bdb, #151437e8),
            url('../assets/newsletter.webp') center / cover;
    }
    .newsletter h2 {
        font-size: 24px;
        white-space: normal;
        max-width: 300px;
    }
    .newsletter p {
        font-size: 12px;
        line-height: 1.5;
        margin: 10px 0 17px;
    }
    .newsletter-form {
        width: 100%;
        height: 42px;
    }
    .newsletter-form input {
        font-size: 11px;
    }
    .newsletter-form .button {
        font-size: 11px;
    }
    .footer-main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px 25px;
        padding: 25px 0;
    }
    .footer-brand {
        grid-column: 1 / -1;
    }
    .footer-brand > p {
        font-size: 12px;
        max-width: 350px;
    }
    .footer-main h3 {
        font-size: 20px;
        margin-bottom: 15px;
    }
    .footer-main > div > a,
    .footer-main > div > button {
        font-size: 12px;
        margin-bottom: 9px;
    }
    .footer-bottom {
        flex-direction: column;
        gap: 12px;
        font-size: 10px;
        padding: 20px 0 30px;
    }
    .socials {
        margin-top: 13px;
    }
    .newsletter-copy {
        margin-bottom: 0;
    }
}
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *,
    *:before,
    *:after {
        transition: none !important;
    }
}
/* Les vignettes d’origine conservent leurs contrôles visuels ; le bouton HTML
   superposé reste accessible sans dessiner un second symbole de lecture. */
.thumbnail .play,
.thumbnail .youtube-label,
.thumbnail .duration {
    display: none;
}
.newsletter {
    background-image:
        url('../assets/newsletter-mascotte.webp'),
        url('../assets/newsletter-foule.webp'),
        linear-gradient(110deg, #241252, #28145d 55%, #131e3b);
    background-position: left center, right center, center;
    background-size: auto 100%, auto 100%, cover;
    background-repeat: no-repeat;
    margin-top: 50px;
    margin-bottom: 10px;
}
.univers-musicaux
{
   margin-top: 0px;
}
.all-artists
{
    margin-bottom: 20px;
}
.univers-musicaux h2, .artists h2
{
    margin-bottom: 10px;
}
@media (max-width: 700px) {
    .newsletter {
        background-image: linear-gradient(110deg, #281550, #111f3b);
    }
}
.hero {
    isolation: isolate;
}
.newsletter-copy {
    min-width: 0;
}
.newsletter h2 {
    white-space: normal;
}
.newsletter-form {
    min-width: 0;
}
/* Correctifs de la version publique /01/ — charger après style.css. */
/* Le texte tourné débordait de sa section. Le recadrage se limite au décor. */
.story {
    overflow: hidden;
    overflow: clip;
    grid-template-columns: minmax(0, 50fr) minmax(0, 33fr) minmax(0, 17fr);
}
.story > * {
    min-width: 0;
}
.handwriting {
    max-width: 100%;
    padding-right: 12px;
    overflow-wrap: anywhere;
}
/* Les grilles et les éléments flexibles doivent pouvoir se rétrécir. */
.header,
.hero-copy,
.section-heading > * {
    min-width: 0;
}
.video-meta,
.video-title,
.artist,
.newsletter-copy,
.newsletter-form,
.footer-main > div {
    min-width: 0;
}
.video-title,
.video-sub,
.artist strong,
.footer-main a,
.footer-main button {
    overflow-wrap: anywhere;
}
img {
    max-width: 100%;
}
.newsletter h2 {
    white-space: normal;
    overflow-wrap: break-word;
}
.newsletter-form input {
    min-width: 0;
    flex: 1 1 0;
    width: 0;
}
.newsletter-form .button {
    flex: 0 0 auto;
}
.footer-main {
    grid-template-columns:
        minmax(0, 2.1fr)
        minmax(0, 1fr)
        minmax(0, 1.05fr)
        minmax(0, 1.05fr)
        minmax(0, 1.1fr);
}
.footer-main .brand {
    max-width: 100%;
    display: flex;
}
.footer-main .brand > span {
    min-width: 0;
}
.footer-main .brand strong {
    font-size: 40px;
}
.footer-main .brand small {
    white-space: normal;
    line-height: 1.5;
    font-size: 12px;
}
.footer-bottom > span {
    min-width: 0;
    overflow-wrap: anywhere;
}
/* Les filtres défilent dans leur propre bande, jamais sur la page entière. */
.filters {
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
}
.filters button {
    flex: 0 0 auto;
}
/* Les éléments décoratifs restent dans la largeur disponible. */
.hero-art {
    right: -6.1%;
    max-width: 106.1%;
}
@media (max-width: 1100px) {
    .footer-main {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 25px;
    }
    .footer-brand {
        grid-column: 1 / -1;
    }
    .footer-brand > p {
        max-width: 420px;
    }
    .footer-main .brand strong {
        font-size: 25px;
    }
    .story {
        grid-template-columns: minmax(0, 50fr) minmax(0, 50fr);
    }
    .handwriting {
        display: none;
    }
    .newsletter {
        padding-right: 4%;
        gap: 18px;
    }
    .newsletter-copy {
        flex: 1 1 0;
    }
    .newsletter-form {
        flex: 0 1 37%;
        width: 37%;
    }
}
/* La navigation se replie avant de manquer de place sur tablette. */
@media (max-width: 1000px) {
    .header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        gap: 14px;
        height: 78px;
    }
    .header .brand {
        min-width: 0;
        max-width: 100%;
    }
    .header .brand > span {
        min-width: 0;
    }
    .header .brand strong {
        font-size: 27px;
    }
    .header .brand small {
        font-size: 6.5px;
    }
    .header .brand img {
        width: 36px;
        height: 45px;
        flex: 0 0 auto;
    }
    .header-actions {
        grid-column: 2;
        grid-row: 1;
        margin: 0;
    }
    .header-actions .divider,
    .search-shortcut {
        display: none;
    }
    .menu-toggle {
        grid-column: 3;
        grid-row: 1;
        display: block;
        border: 1px solid var(--line);
        border-radius: 7px;
        background: #ffffff06;
        padding: 6px 10px;
        font-size: 21px;
        line-height: 1.2;
    }
    .header nav {
        display: none;
        position: absolute;
        right: 0;
        top: 72px;
        min-width: 220px;
        max-width: 100%;
        margin: 0;
        padding: 20px;
        background: #0b1b31;
        border: 1px solid var(--line);
        border-radius: 10px;
        box-shadow: 0 10px 30px #0009;
        font-size: 14px;
        z-index: 5;
    }
    .header nav.open {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 19px;
    }
    .hero h1 {
        white-space: normal;
        font-size: clamp(32px, 4.8vw, 48px);
        line-height: 1.03;
    }
    .hero-copy > p {
        white-space: normal;
        line-height: 1.6;
        max-width: 500px;
    }
    .benefits {
        white-space: normal;
        gap: 14px;
        align-items: flex-start;
    }
    .benefits span {
        min-width: 0;
    }
}
@media (min-width: 701px) and (max-width: 850px) {
    .hero {
        min-height: 285px;
    }
    .hero-copy {
        width: 72%;
    }
    .hero-art {
        top: 0;
        height: 280px;
    }
    .hero .search {
        width: 91%;
    }
    .benefits {
        font-size: 9px;
        gap: 10px;
    }
    .newsletter {
        padding-left: 23%;
        padding-right: 4%;
        display: block;
    }
    .newsletter h2 {
        font-size: 22px;
    }
    .newsletter p {
        font-size: 11px;
        line-height: 1.7;
    }
    .newsletter-form {
        width: 100%;
        max-width: 460px;
        margin-top: 16px;
        height: 40px;
    }
}
@media (max-width: 700px) {
    .header {
        height: 76px;
        gap: 11px;
    }
    .hero h1 {
        font-size: clamp(29px, 6.8vw, 46px);
        white-space: normal;
    }
    .hero-copy {
        width: 100%;
    }
    .hero-art {
        right: -4.94%;
        max-width: 104.94%;
    }
    .hero-copy > p {
        font-size: 13px;
        line-height: 1.6;
    }
    .story {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }
    .story > img {
        width: 100%;
        height: auto;
        aspect-ratio: 2.5;
    }
    .section-heading {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 10px;
    }
    .section-heading h2 {
        flex: 1 1 220px;
        min-width: 0;
    }
    .section-heading .text-link {
        margin-left: auto;
    }
    .newsletter {
        padding: 23px 18px;
        display: block;
    }
    .newsletter-form {
        width: 100%;
        max-width: 100%;
        margin-top: 17px;
        height: 44px;
    }
    .newsletter-form input {
        font-size: 11px;
    }
    .newsletter-form .button {
        font-size: 11px;
        padding-inline: 16px;
        white-space: nowrap;
    }
    .footer-main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 20px;
    }
    .footer-bottom {
        flex-direction: column;
        gap: 13px;
        line-height: 1.7;
    }
    dialog {
        max-width: calc(100% - 24px);
        width: 620px;
        padding: 32px 23px;
    }
    .modal-content iframe {
        max-width: 100%;
    }
}
@media (max-width: 420px) {
    .header {
        gap: 8px;
    }
    .header .brand {
        gap: 6px;
    }
    .header .brand img {
        width: 100%;
        height: auto;
        max-width: 39px;
    }
    .header .brand strong {
        font-size: 35px;
        letter-spacing: 0px;
    }
    .header .brand small {
        font-size: 11px;
        letter-spacing: 0;
        white-space: normal;
        line-height: 1.5;
        margin-top: 0px;
    }
    .header .login {
        font-size: 9px;
        padding: 3px 9px;
        border-radius: 8px;
        white-space: nowrap;
    }
    .menu-toggle {
        font-size: 18px;
        padding: 7px 10px;
    }
    .header-actions {
        gap: 0;
    }
    .hero {
        min-height: 460px;
    }
    .hero h1 {
        font-size: clamp(26px, 7.4vw, 31px);
        line-height: 1.09;
        letter-spacing: -.7px;
    }
    .hero .search {
        gap: 10px;
        padding-left: 14px;
        width: 100%;
    }
    .hero .search input {
        font-size: 12px;
    }
    .hero .search .button {
        font-size: 12px;
        padding-inline: 13px;
    }
    .hero .benefits {
        gap: 11px;
        flex-direction: column;
        width: 125px;
    }
    .hero-art {
        top: 200px;
        height: 260px;
        width: 83%;
    }
    .genres {
        gap: 8px;
    }
    .genre span {
        font-size: 18px;
    }
    .artist-grid {
        gap: 22px 12px;
    }
    .artist strong {
        font-size: 12px;
    }
    .artist small {
        font-size: 10px;
    }
    .video-title {
        font-size: 13px;
    }
    .video-meta button {
        flex: 0 0 auto;
    }
    .newsletter-form {
        gap: 7px;
        padding-left: 10px;
    }
    .newsletter-form input {
        font-size: 10px;
    }
    .newsletter-form .button {
        font-size: 10px;
        padding-inline: 12px;
    }
}
@media (max-width: 340px) {
    .header .brand strong {
        font-size: 19px;
    }
    .header .brand img {
        width: 25px;
    }
    .header .brand small {
        display: none;
    }
    .header {
        gap: 7px;
    }
    .header .login {
        font-size: 8px;
        padding-inline: 8px;
    }
    .menu-toggle {
        padding-inline: 6px;
    }
    .newsletter-form .button {
        font-size: 9px;
        padding-inline: 9px;
    }
}
/* Mobile : texte, recherche, illustration entière, puis les trois intitulés. */
@media (max-width: 700px) {
    .hero {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
        height: auto;
        padding-top: 20px;
        padding-bottom: 24px;
        isolation: isolate;
    }
    .hero-copy {
        display: contents;
    }
    .hero-copy > h1 {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
    }
    .hero-copy > p {
        grid-column: 1;
        grid-row: 2;
        margin: 14px 0 18px;
    }
    .hero-copy > .search {
        grid-column: 1;
        grid-row: 3;
        width: 100%;
        max-width: none;
        min-width: 0;
        margin: 0;
    }
    .hero .hero-art {
        grid-column: 1;
        grid-row: 4;
        position: static;
        inset: auto;
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: 0;
        aspect-ratio: 474 / 246;
        margin: 16px 0 0;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        mask-image: none;
        -webkit-mask-image: none;
        z-index: auto;
    }
    .hero .benefits {
        grid-column: 1;
        grid-row: 5;
        position: static;
        inset: auto;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
        max-width: 100%;
        margin: 18px 0 0;
        gap: 12px;
        white-space: normal;
        font-size: 10px;
        line-height: 1.5;
        align-items: start;
    }
    .hero .benefits > span {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        width: auto;
        max-width: none;
        min-width: 0;
        text-align: center;
        overflow-wrap: normal;
    }
    .hero .benefits b {
        font-size: 25px;
        line-height: 1.1;
    }
}
@media (max-width: 360px) {
    .hero .benefits {
        gap: 8px;
        font-size: 9px;
    }
    .hero .benefits b {
        font-size: 23px;
    }
}
/* Charger APRÈS style.css et responsive-fixes.css. */
@media (max-width: 700px) {
    .hero {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
        height: auto;
        padding-bottom: 18px;
    }
    .hero-copy {
        display: contents;
    }
    .hero-copy > h1 {
        grid-area: 1 / 1;
    }
    .hero-copy > p {
        grid-area: 2 / 1;
    }
    .hero-copy > .search {
        grid-area: 3 / 1;
    }
   .hero .hero-art {
    grid-area: 4 / 1;
    position: static;
    inset: auto;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 474 / 246;
    margin: 14px 0 0;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        #000 20%,
        #000 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        #000 20%,
        #000 100%
    );

    z-index: 0;
}
    .hero .benefits {
        grid-area: 4 / 1;
        position: relative;
        inset: auto;
        align-self: end;
        justify-self: start;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        width: max-content;
        max-width: calc(100% - 20px);
        min-height: 0;
        margin: 0 0 9px 9px;
        padding: 8px 11px;
        gap: 5px;
        border: 1px solid rgba(211, 185, 255, .24);
        border-radius: 11px;
        background: linear-gradient(
            120deg,
            rgba(5, 15, 32, .89),
            rgba(27, 15, 51, .77)
        );
        box-shadow:
            0 7px 22px rgba(0, 0, 0, .28),
            inset 0 1px rgba(255, 255, 255, .06);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        color: #f2eafa;
        font-size: 9px;
        line-height: 1.4;
        white-space: normal;
        z-index: 1;
    }
    .hero .benefits > span {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        width: auto;
        min-width: 0;
        max-width: none;
        gap: 7px;
        text-align: left;
    }
    .hero .benefits b {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 16px;
        width: 16px;
        font-size: 16px;
        line-height: 1;
        color: #ba8aff;
        text-shadow: 0 0 10px rgba(169, 100, 255, .24);
    }
}
@media (max-width: 360px) {
    .hero .benefits {
        margin-left: 7px;
        margin-bottom: 7px;
        padding: 7px 9px;
        gap: 4px;
        font-size: 8px;
        border-radius: 9px;
    }
}
/* Grille des vidéos */
.videos {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    width: 100%;
}
/* Conteneur de chaque vignette */
.videos > * {
    min-width: 0;
    width: 100%;
}
/* Images au format YouTube 16:9 */
.videos img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    object-position: center;
    border-radius: 12px;
    transform: none;
    transition: none;
}
/* Aucun zoom au survol */
.videos img:hover,
.videos > *:hover img {
    transform: none;
}
/* Tablette */
@media (max-width: 1024px) {
    .videos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }
}
/* Mobile */
@media (max-width: 600px) {
    .videos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
    .videos img {
        border-radius: 8px;
    }
}
/* Conteneur des miniatures YouTube */
.video-card .thumbnail {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    overflow: hidden;
    border-radius: 12px;
    background: #001225;
}
/* Image YouTube */
.video-card .thumbnail img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    object-position: center;
    transform: none;
    transition: none;
}
/* Supprimer les effets de zoom */
.video-card:hover .thumbnail img,
.video-link:hover .thumbnail img,
.video-card .thumbnail img:hover {
    transform: none;
    scale: 1;
}
/* Bouton contenant l'image */
.video-link {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}
/* ============================================================
   WIKIMUSIC - VIGNETTES YOUTUBE PREMIUM | VERSION CORRIGÉE
   Compatible avec <section class="discover"> et cartes .music-card
   Les anciennes règles .video-card sont conservées pour compatibilité.
   ============================================================ */
.discover .videos {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 26px 20px;
    width: 100%;
    align-items: stretch;
}
.discover .music-card {
    position: relative;
    min-width: 0;
    overflow: visible;
    padding: 7px 7px 15px;
    border: 1px solid rgba(161, 145, 210, .18);
    border-radius: 20px;
    background: linear-gradient(155deg, rgba(19, 38, 67, .9), rgba(5, 20, 39, .94));
    box-shadow: 0 8px 26px rgba(0, 0, 0, .14);
    transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.discover .music-card:hover,
.discover .music-card:focus-within {
    transform: translateY(-5px);
    border-color: rgba(178, 125, 255, .58);
    box-shadow: 0 19px 42px rgba(0, 0, 0, .3), 0 0 32px rgba(142, 83, 242, .10);
}
.discover .music-thumbnail {
    position: relative;
    isolation: isolate;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 14px;
    background: #08182a;
    cursor: pointer;
}
.discover .music-thumbnail img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .65s cubic-bezier(.2, .75, .25, 1), filter .45s ease;
}
.discover .music-thumbnail::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(0, 8, 22, .16) 0%, transparent 40%, rgba(0, 8, 22, .42) 100%);
    pointer-events: none;
    transition: background .3s ease;
}
/* Bouton Play rond blanc, parfaitement centré. */
.discover .music-play {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    width: 45px;
    height: 45px;
    padding: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 6px 25px rgba(0, 0, 0, .35), 0 0 0 6px rgba(255, 255, 255, .16);
    transform: translate(-50%, -50%);
    transition: transform .32s ease, box-shadow .32s ease;
    pointer-events: none;
}
.discover .music-play::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    margin-left: 4px;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-left: 15px solid #001225;
}
.discover .music-thumbnail:hover img,
.discover .music-thumbnail:focus-visible img {
    transform: scale(1.07);
    filter: brightness(.82) saturate(1.12);
}
.discover .music-thumbnail:hover .music-play,
.discover .music-thumbnail:focus-visible .music-play {
    transform: translate(-50%, -50%) scale(1.13);
    box-shadow: 0 10px 32px rgba(0, 0, 0, .44), 0 0 0 11px rgba(255, 255, 255, .14);
}
.discover .music-thumbnail:focus-visible {
    outline: 3px solid #c29aff;
    outline-offset: 3px;
}
/* Petit indicateur éditorial intégré à la miniature. */
.discover .music-thumbnail::after {
    content: "CLIP VIDÉO";
    position: absolute;
    z-index: 2;
    top: 10px;
    left: 10px;
    padding: 6px 9px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 7px;
    color: #fff;
    background: rgba(0, 13, 29, .65);
    backdrop-filter: blur(8px);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .09em;
    pointer-events: none;
}
.discover .music-info {
    padding: 14px 9px 0;
    min-width: 0;
}
.discover .music-info h3 {
    margin: 0 0 7px;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(14px, 1.16vw, 17px);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -.015em;
    overflow-wrap: anywhere;
    transition: color .25s ease;
}
.discover .music-card:hover .music-info h3 {
    color: #d9b7ff;
}
.discover .music-info p {
    margin: 0;
    color: #aebbd1;
    font-size: 12px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}
.discover .music-info p span {
    color: #c79aff;
    font-weight: 600;
}
@media (max-width: 1100px) {
    .discover .videos {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 22px 16px;
    }
}
@media (max-width: 760px) {
    .discover .videos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 17px 12px;
    }
    .discover .music-card {
        padding: 5px 5px 12px;
        border-radius: 16px;
    }
    .discover .music-thumbnail {
        border-radius: 11px;
    }
    .discover .music-play {
        width: 42px;
        height: 42px;
    }
    .discover .music-play::after {
        border-top-width: 7px;
        border-bottom-width: 7px;
        border-left-width: 11px;
        margin-left: 3px;
    }
    .discover .music-info {
        padding: 11px 7px 0;
    }
    .discover .music-info h3 {
        font-size: 13px;
    }
    .discover .music-info p {
        font-size: 11px;
    }
    .discover .music-thumbnail::after {
        top: 7px;
        left: 7px;
        font-size: 8px;
        padding: 4px 6px;
    }
}
@media (max-width: 360px) {
    .discover .videos {
        grid-template-columns: minmax(0, 1fr);
        gap: 17px;
    }
    .discover .music-play {
        width: 50px;
        height: 50px;
    }
}
@media (hover: none) {
    .discover .music-card:hover {
        transform: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .discover .music-card,
    .discover .music-thumbnail img,
    .discover .music-play,
    .discover .music-info h3 {
        transition: none;
    }
}

/* WikiMusic — maquette premium : découverte et vignettes YouTube. */
.discover { padding-top: 32px; padding-bottom: 28px; }
.discover .section-heading { align-items: flex-end; gap: 24px; margin: 0 0 25px; }
.discover .discovery-eyebrow { margin: 0 0 12px; color: #b78af6; text-transform: uppercase; letter-spacing: .25em; font: 700 11px/1.5 Arial, sans-serif; }
.discover h2 { margin: 0; font: 700 clamp(30px, 3.5vw, 45px)/1.12 Georgia, 'Times New Roman', serif; letter-spacing: -.025em; }
.discover h2 em { font-style: normal; color: #ba73fa; background: linear-gradient(100deg,#c18bff,#a447ee); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.discover .discovery-subtitle { margin: 0px; color: #8d9dc3; font: 400 clamp(14px,1.5vw,20px)/1.5 Georgia, serif; }
.discover .section-heading .text-link { display: inline-flex; z-index: 999; align-items: center; gap: 12px; margin-bottom: 4px; padding: 8px 0; color: #bf83ff; font: 500 14px/1.4 Arial,sans-serif; text-decoration: underline; text-underline-offset: 7px; }
.discover .filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 24px; padding: 3px 0 5px; overflow: visible; }
.discover .filters button { min-height: 38px; padding: 9px 20px; border: 1px solid #263e62; border-radius: 999px; color: #b6c8ef; background: linear-gradient(160deg,#0b1a32,#061427); font-size: 12px; transition: border-color .2s,background .2s,box-shadow .2s; }
.discover .filters button:hover { color: #fff; border-color: #9161d5; }
.discover .filters button.active, .discover .filters button[aria-pressed="true"] { color: #fff; border-color: #b05cff; background: linear-gradient(120deg,#c136f1,#6825ff); box-shadow: 0 0 18px #8f39ed40,inset 0 1px 0 #ffffff30; }
.discover .videos { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 22px 20px; overflow: visible; }
.discover .music-card { --card-rgb: 170,104,255; position: relative; min-width: 0; padding: 0; overflow: hidden; isolation: isolate; border: 1px solid rgba(104,138,230,.34); border-radius: 15px; background: linear-gradient(145deg,#071426 38%,#102044 100%); box-shadow: 0 9px 25px #00000020; transition: transform .28s ease,border-color .28s ease,box-shadow .28s ease; }
.discover .music-card[hidden] { display: none !important; }
.discover .music-card:hover, .discover .music-card:focus-within { transform: translateY(-5px); border-color: rgba(var(--card-rgb),.95); box-shadow: 0 0 0 1px rgba(var(--card-rgb),.25),0 0 27px rgba(var(--card-rgb),.2),0 16px 35px #00000050; }
.discover .music-thumbnail { display: block; position: relative; width: 100%; height: auto; aspect-ratio: 16/9; margin: 0; overflow: hidden; border-radius: 0; background: #020b15; }
/* hqdefault.jpg est en 4:3 avec bandes noires : hauteur 133.333% pour retrouver son cadrage 16:9. */
.discover .music-thumbnail img { position: absolute; inset: auto; top: 50%; left: 0; display: block; width: 100%; max-width: none; height: 133.333333%; object-fit: cover; transform: translateY(-50%); filter: brightness(.94); transition: transform .55s ease,filter .35s ease; }
.discover .music-card:hover .music-thumbnail img, .discover .music-thumbnail:hover img, .discover .music-thumbnail:focus-visible img { transform: translateY(-50%) scale(1.045); filter: brightness(1.06); }
.discover .music-thumbnail::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg,transparent 50%,#04102440); }
.discover .music-thumbnail::after { content: none; }
.discover .music-play { position: absolute; z-index: 2; top: 50%; left: 50%; display: grid; place-items: center; width: 54px; height: 54px; margin: 0; border: 1px solid #ffffffb3; border-radius: 50%; background: #ffffff1f; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 5px 22px #00000030,inset 0 1px 0 #ffffff26; transform: translate(-50%,-50%); transition: background .25s,transform .25s,box-shadow .25s; }
.discover .music-play::after { content: ''; position: static; display: block; width: 0; height: 0; margin-left: 4px; border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-left: 14px solid #fff; border-radius: 2px; }
.discover .music-thumbnail:hover .music-play, .discover .music-thumbnail:focus-visible .music-play { background: rgba(var(--card-rgb),.35); transform: translate(-50%,-50%) scale(1.09); box-shadow: 0 0 26px rgba(var(--card-rgb),.35); }
.discover .music-info { position: relative; padding: 13px 15px 0; }
.discover .music-info h3 { margin: 0 0 6px; color: #f6f3ff; font: 700 clamp(16px,1.45vw,22px)/1.2 Georgia,'Times New Roman',serif; letter-spacing: -.025em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.discover .music-card:hover .music-info h3 { color: #fff; }
.discover .music-info p { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0; min-height: 26px; color: #a6bce8; font-size: 13px; line-height: 1.5; }
.discover .music-info p .music-genre { flex-shrink: 0; max-width: 45%; padding: 3px 10px; color: rgb(var(--card-rgb)); border: 1px solid rgba(var(--card-rgb),.75); border-radius: 99px; background: rgba(var(--card-rgb),.035); font: 500 10px/1.3 Arial,sans-serif; }
.discover .music-card-footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 10px 9px 15px; }
.discover .music-source { display: inline-flex; align-items: center; gap: 8px; color: #a5b8e2; font-size: 11px; }
.discover .music-source svg { width: 17px; height: 17px; }
.discover .music-favorite { display: grid; place-items: center; width: 36px; height: 36px; padding: 8px; flex-shrink: 0; color: #bac9f1; background: transparent; border: 0; border-radius: 50%; transition: color .2s,background .2s; }
.discover .music-favorite svg { display: block; width: 20px; height: 20px; }
.discover .music-favorite:hover { background: #ffffff0d; color: #fff; }
.discover .music-favorite[aria-pressed="true"] { color: #ec89c5; }
.discover .music-favorite[aria-pressed="true"] svg { fill: currentColor; }
.discover :is(button,a):focus-visible { outline: 2px solid #ce9bff; outline-offset: 3px; }
.discover .music-thumbnail:focus-visible { outline-offset: -4px; }
@media (max-width: 1050px) { .discover .videos { grid-template-columns: repeat(3,minmax(0,1fr)); } .discover .section-heading { align-items: flex-start; } }
@media (max-width: 760px) { .discover { padding-top: 22px; } .discover .videos { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px 14px; } .discover .section-heading { flex-direction: column; gap: 10px; margin-bottom: 18px; } .discover .filters { flex-wrap: nowrap; overflow-x: auto; gap: 8px; padding: 4px 2px 10px; margin-bottom: 12px; scrollbar-width: thin; } .discover .filters button { flex-shrink: 0; min-height: 40px; padding: 9px 17px; } .discover .discovery-eyebrow { font-size: 9px; } .discover .music-info { padding: 12px 11px 0; } .discover .music-info h3 { font-size: 17px; } .discover .music-info p { font-size: 11px; flex-wrap: wrap; justify-content: flex-start; gap: 5px 9px; } .discover .music-card-footer { padding-left: 11px; } .discover .music-favorite { width: 44px; height: 44px; } .discover .music-play { width: 46px; height: 46px; } }
@media (max-width: 400px) { .discover .videos { grid-template-columns: minmax(0,1fr); gap: 20px; } .discover .music-info h3 { font-size: 21px; } .discover .music-info p { font-size: 13px; } .discover .music-play { width: 56px; height: 56px; } }
@media (hover: none) { .discover .music-card:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) { .discover .music-card, .discover .music-thumbnail img, .discover .music-play, .discover .filters button, .discover .music-favorite { transition: none; } .discover .music-card:hover, .discover .music-card:focus-within { transform: none; } }

/* Proportions compactes et actions au survol, comme sur la référence. */
.discover .music-media { position: relative; }
.discover .music-title-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.discover .music-info { padding: 10px 15px 0; }
.discover .music-title-row h3 { flex: 1; min-width: 0; margin: 0; font-size: clamp(16px,1.45vw,22px); line-height: 1.2; }
.discover .music-title-row .music-genre { flex: 0 0 auto; padding: 4px 11px; border: 1px solid rgba(var(--card-rgb),.8); border-radius: 99px; color: rgb(var(--card-rgb)); background: rgba(var(--card-rgb),.025); font: 500 12px/1.2 Arial,sans-serif; }
.discover .music-info p { display: block; min-height: 0; margin: 4px 0 0; font-size: 13px; line-height: 18px; }
.discover .music-card-footer { height: 34px; padding: 1px 10px 4px 15px; }
.discover .music-card-footer .music-favorite { width: 30px; height: 30px; padding: 5px; }
.discover .music-hover-actions { position: absolute; z-index: 5; top: 10px; right: 10px; display: flex; gap: 8px; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-5px); transition: opacity .2s,transform .2s,visibility .2s; }
.discover .music-card:hover .music-hover-actions, .discover .music-card:focus-within .music-hover-actions { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.discover .music-hover-actions .music-overlay-action { display: grid; place-items: center; width: 34px; height: 34px; padding: 7px; border: 1px solid #ffffffa0; border-radius: 50%; color: #fff; background: #08101c55; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 3px 12px #00000026; cursor: pointer; }
.discover .music-overlay-action svg { display: block; width: 19px; height: 19px; }
.discover .music-hover-actions .music-overlay-action:hover { background: rgba(var(--card-rgb),.5); border-color: #fff; }
.discover .music-hover-actions .music-overlay-action[aria-pressed="true"] { color: #fff; background: rgba(var(--card-rgb),.65); }
.discover .music-queue[aria-pressed="true"] svg { transform: rotate(45deg); }
@media (max-width: 760px) {
    .discover .music-info { padding: 9px 10px 0; }
    .discover .music-title-row { gap: 5px; }
    .discover .music-title-row h3 { font-size: 16px; }
    .discover .music-title-row .music-genre { padding: 3px 7px; font-size: 9px; }
    .discover .music-info p { font-size: 12px; line-height: 17px; }
    .discover .music-card-footer { height: 32px; padding-left: 10px; }
}
@media (max-width: 400px) { .discover .music-title-row h3 { font-size: 21px; } }
@media (hover: none), (pointer: coarse) {
    .discover .music-hover-actions { opacity: 1; visibility: visible; pointer-events: auto; transform: none; top: 8px; right: 8px; }
    .discover .music-hover-actions .music-overlay-action { width: 44px; height: 44px; padding: 11px; }
    .discover .music-card-footer { height: 44px; }
    .discover .music-card-footer .music-favorite { width: 44px; height: 44px; padding: 11px; }
}
@media (prefers-reduced-motion: reduce) { .discover .music-hover-actions { transition: none; transform: none; } }

/* Compteurs publics : présentation informative, sans bouton en double. */
.discover .music-card-footer.music-stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: auto;
    min-height: 34px;
    margin: 6px 14px 0;
    padding: 8px 0 11px;
    border-top: 1px solid rgba(149,170,222,.1);
}
.discover .music-stat { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: #8599bf; font: 400 12px/1.3 Arial,sans-serif; white-space: nowrap; }
.discover .music-stat svg { width: 15px; height: 15px; flex-shrink: 0; color: #8eabd6; }
.discover .music-stat strong { font-weight: 600; font-variant-numeric: tabular-nums; color: #b7c9e7; }
.discover .music-stat-likes svg { color: #b396d7; }
.discover .music-card:hover .music-stat strong { color: #dbe5f8; }
@media (max-width:760px) {
    .discover .music-card-footer.music-stats { margin-inline: 10px; padding: 7px 0 9px; min-height: 31px; }
    .discover .music-stat { font-size: 10px; gap: 4px; }
    .discover .music-stat svg { width: 13px; height: 13px; }
}

/* Nouvelle illustration : hibou sur son disque */
.error-art {
    aspect-ratio: auto;
    padding-bottom: 54px;
    overflow: visible;
}

.error-art .owl-picture {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: url("/assets/images/hibou.png") center / contain no-repeat;
    mask-image: none;
    -webkit-mask-image: none;
    z-index: 1;
}

.error-art .art-caption {
    bottom: 12px;
}

@media (max-width: 700px) {
    .error-art {
        width: min(100%, 430px);
        margin: 0 auto;
    }
}

@media (max-width:760px) {
    .header-actions .login span 
    {
        display:none;
    }

    .footer-main .brand small
    {
        margin-top: 3px;
    }
}


/* ============================================
   WIKIMUSIC — FIL D'ARIANE PREMIUM
   ============================================ */

.breadcrumb-bar {
    position: relative;
    width: 100%;
    padding: 17px 0;
    background: transparent;
    border: 0;
}

.breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    min-height: 30px;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
}

/* Lien Accueil */
.breadcrumbs .breadcrumb-home {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    color: #aebfda;
    text-decoration: none;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}

.breadcrumbs .breadcrumb-home:hover {
    color: #d19aff;
    transform: translateY(-1px);
}

.breadcrumb-home svg {
    width: 16px;
    height: 16px;
    color: #b976ed;
    stroke-width: 1.8;
}

/* Séparateur */
.breadcrumbs .crumb-chevron {
    width: 14px;
    height: 14px;
    color: #587098;
    stroke-width: 1.8;
    flex-shrink: 0;
}

/* Page actuelle */
.breadcrumbs .breadcrumb-current {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 7px 13px;
    border: 1px solid rgba(185, 118, 237, 0.22);
    border-radius: 50px;

    color: #d5a2ff;
    font-weight: 600;
    white-space: nowrap;

    background:
        linear-gradient(
            135deg,
            rgba(185, 118, 237, 0.13),
            rgba(117, 67, 213, 0.07)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.breadcrumb-current svg {
    width: 14px;
    height: 14px;
    stroke-width: 1.8;
    color: #c78bff;
}

/* Accessibilité */
.breadcrumbs a:focus-visible {
    outline: 2px solid #b976ed;
    outline-offset: 5px;
    border-radius: 4px;
}

/* Responsive */
@media (max-width: 700px) {
    .breadcrumb-bar {
        padding: 12px 0;
    }

    .breadcrumbs {
        gap: 9px;
        font-size: 12px;
    }

    .breadcrumbs .breadcrumb-current {
        padding: 6px 11px;
    }

    .breadcrumb-home svg {
        width: 15px;
        height: 15px;
    }

    .button-login span
    {
        display: none;
    }
}

.button-login
{
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Connexion dans le menu : masquée sur ordinateur */
#navigation .mobile-login {
    display: none;
}

@media (max-width: 900px) {
    /* Masquer le bouton de connexion à côté du menu */
    .header-actions .button-login,
    .header-actions .divider {
        display: none !important;
    }

    /* Afficher la connexion dans le menu déroulant */
    #navigation .mobile-login {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 8px;
        padding-top: 16px;
        border-top: 1px solid rgba(167, 185, 220, 0.2);
        color: #faf6ff;
        background: transparent;
    }

    /* Toggle : uniquement l’icône, sans fond rose */
    .header .menu-toggle,
    .header .menu-toggle:hover,
    .header .menu-toggle:active {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
        color: #faf6ff;
        font-size: 29px;
        line-height: 1;
        cursor: pointer;
        flex-shrink: 0;
    }

    .header .menu-toggle:focus-visible {
        outline: 2px solid #b976ed;
        outline-offset: 3px;
    }
}

.footer-menu-liste a:hover, .footer-menu-liste a:focus
{
    color: var(--violet);
}

/* Bouton de retour en haut — WikiMusic */
.wm-back-top {
    position: fixed;
    right: max(24px, env(safe-area-inset-right));
    bottom: max(24px, env(safe-area-inset-bottom));
    z-index: 1000;

    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    padding: 0;

    color: #fff;
    background: linear-gradient(140deg, #b976ed 0%, #8644ce 55%, #ff4d80 100%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 17px;

    box-shadow:
        0 8px 28px rgba(0, 0, 0, 0.35),
        0 0 24px rgba(185, 118, 237, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);

    cursor: pointer;
    -webkit-tap-highlight-color: transparent;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.wm-back-top[hidden] {
    display: none;
}

.wm-back-top svg {
    display: block;
    transition: transform 0.25s ease;
}

@media (hover: hover) {
    .wm-back-top:hover {
        transform: translateY(-4px);

        box-shadow:
            0 12px 32px rgba(0, 0, 0, 0.4),
            0 0 32px rgba(185, 118, 237, 0.45),
            inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }

    .wm-back-top:hover svg {
        transform: translateY(-2px);
    }
}

.wm-back-top:active {
    transform: scale(0.95);
}

.wm-back-top:focus-visible {
    outline: 3px solid #faf6ff;
    outline-offset: 5px;
}

@media (max-width: 600px) {
    .wm-back-top {
        right: max(16px, env(safe-area-inset-right));
        bottom: max(16px, env(safe-area-inset-bottom));
        width: 48px;
        height: 48px;
        border-radius: 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wm-back-top,
    .wm-back-top svg {
        transition: none;
    }
}

@media print {
    .wm-back-top {
        display: none !important;
    }
}

.filters a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
}

.filters a.active {
    background: #b976ed;
    color: #001225;
}

.filters .genre-link
{
    min-height: 38px;
    padding: 9px 20px;
    border: 1px solid #263e62;
    border-radius: 999px;
    color: #b6c8ef;
    background: linear-gradient(160deg, #0b1a32, #061427);
    font-size: 12px;
    transition: border-color .2s, background .2s, box-shadow .2s;
    flex: 0 0 auto;
    white-space: nowrap;
    line-height: 1.2;
}

.filters .genre-link:hover, .filters .genre-link:focus
{ 
    color: #fff; 
    border-color: #9161d5; 
}


/* =========================================
   WIKIMUSIC - GENRES DYNAMIQUES
   ========================================= */

.discover .filters a.genre-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 18px;
    border-radius: 999px;

    color: var(--genre-color);
    background-color: color-mix(
        in srgb,
        var(--genre-color) 10%,
        transparent
    );

    border: 1px solid color-mix(
        in srgb,
        var(--genre-color) 45%,
        transparent
    );

    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;

    transition:
        background-color .25s ease,
        border-color .25s ease,
        color .25s ease,
        box-shadow .25s ease;
}

.discover .filters a.genre-link:hover,
.discover .filters a.genre-link:focus-visible {
    color: var(--genre-color);

    background-color: color-mix(
        in srgb,
        var(--genre-color) 20%,
        transparent
    );

    border-color: var(--genre-color);

    box-shadow: 0 0 18px color-mix(
        in srgb,
        var(--genre-color) 25%,
        transparent
    );
}

.discover .filters a.genre-link.active {
    color: #001225;
    background-color: var(--genre-color);
    border-color: var(--genre-color);
}

/* Bouton Tous : garde le style violet initial */
.discover .filters button[data-genre="Tous"] {
    cursor: pointer;
}


/* Bouton Tous : même design que les genres */
.discover .filters button.genre-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 18px;
    border-radius: 999px;

    color: var(--genre-color);
    background: color-mix(
        in srgb,
        var(--genre-color) 10%,
        transparent
    );

    border: 1px solid color-mix(
        in srgb,
        var(--genre-color) 45%,
        transparent
    );

    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;

    transition:
        background .25s ease,
        border-color .25s ease,
        color .25s ease,
        box-shadow .25s ease;
}

/* Survol */
.discover .filters button.genre-link:hover {
    color: var(--genre-color);
    background: color-mix(
        in srgb,
        var(--genre-color) 20%,
        transparent
    );
    border-color: var(--genre-color);
}

/* Bouton sélectionné */
.discover .filters button.genre-link.active {
    color: #001225;
    background: var(--genre-color);
    border-color: var(--genre-color);
}


/* ========================================
   WIKIMUSIC - COULEURS DYNAMIQUES DES VIDÉOS
   ======================================== */

.music-card .music-genre {
    color: var(--genre-color, #B976ED);

    background: color-mix(
        in srgb,
        var(--genre-color, #B976ED) 8%,
        transparent
    );

    border: 1px solid var(--genre-color, #B976ED);

    border-radius: 999px;
    padding: 4px 11px;

    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}

/* Couleur de la bordure des vignettes */
.music-card {
    border-color: rgba(var(--card-rgb), 0.30);
}

/* Effet premium au survol */
.music-card:hover {
    border-color: rgba(var(--card-rgb), 0.85);

    box-shadow:
        0 8px 30px rgba(var(--card-rgb), 0.12);
}

.most-liked
{
    padding-bottom: 60px;
}

.univers-musicaux .genre::before,
.univers-musicaux .genre::after {
    content: none !important;
    background: none !important;
    box-shadow: none !important;
}

.univers-musicaux .genre img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: none !important;
    opacity: 1 !important;
}