/* ═══════════════════════════════════════════════════════════════════
   INDEX.CSS – Styles specific to index pages (hero, albums, social)
   ═══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   NAV – Always visible, transitions on scroll
   ───────────────────────────────────────────── */
nav {
    /* override base.css for index pages */
    /* Initial state: transparent over hero */
    background: rgba(255, 255, 255, 0);
    border-bottom: 2px solid rgba(135, 212, 224, 0);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0);
    transition: background 0.4s ease, border-bottom 0.4s ease, box-shadow 0.4s ease;
}

/* State when scrolled past hero: white opaque background */
nav.nav--scrolled {
    background: rgba(255, 255, 255, 0.95);
    border-bottom: 2px solid rgba(135, 212, 224, 0.5);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* SMS logo flies from hero-center into the corner on page load */
.nav-logo {
    animation: logo-fly-in 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

/* nav links stagger in after logo */
.nav-links {
    animation: links-fade-in 0.45s ease 0.4s both;
}

@keyframes logo-fly-in {
    0% {
        opacity: 0;
        transform: translateX(42vw) scale(4);
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes links-fade-in {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ─────────────────────────────────────────────
   HERO
   ───────────────────────────────────────────── */
#hero {
    position: relative;
    height: 100vh;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--bg-light);
}

#main-content {
    position: relative;
    z-index: 10;
    background: var(--bg-light);
}

/* fullscreen background video */
.hero-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: 0;
    pointer-events: none;
    transform-origin: center center;
    will-change: transform;
}

/* light overlay for beach theme - minimal clean version */
.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* content sits above video + overlay */
.hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 2.5rem;
    padding: 2rem;
    height: 100vh;
    will-change: opacity, transform;
}

.hero-title-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.hero-band-name {
    display: none;
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    font-size: clamp(3rem, 12vw, 8rem);
    letter-spacing: 12px;
    line-height: 1;
    /* Face avant : or vif (comme Nabla) */
    color: #ffe040;
    text-shadow:
        /* Zone 1 — face latérale gauche : orange plat (comme Nabla) */
        -1px  1px 0 #ffa200,
        -2px  2px 0 #ffa200,
        -3px  3px 0 #ffa200,
        -4px  4px 0 #ffa200,
        -5px  5px 0 #ffa200,
        -6px  5px 0 #f09000,
        -7px  6px 0 #f09000,
        -8px  6px 0 #f09000,
        -9px  7px 0 #e07e00,
        -10px 7px 0 #e07e00,
        /* Zone 2 — bord inférieur profond : rouge sombre (comme Nabla) */
        -11px 8px 0 #c82400,
        -12px 8px 0 #b81600,
        -13px 9px 0 #a80a00,
        -14px 9px 0 #880000,
        /* ombre portée ambiante */
        0 0 40px rgba(0, 0, 0, 0.85),
        -16px 12px 28px rgba(0, 0, 0, 0.5);
    cursor: default;
    position: relative;
}

/* Raccourci partagé pour les couches 3D (évite la répétition dans glitch-text) */
:root {
    --sms-3d-base:
        -1px  1px 0 #ffa200,  -2px  2px 0 #ffa200,
        -3px  3px 0 #ffa200,  -4px  4px 0 #ffa200,
        -5px  5px 0 #ffa200,  -6px  5px 0 #f09000,
        -7px  6px 0 #f09000,  -8px  6px 0 #f09000,
        -9px  7px 0 #e07e00, -10px  7px 0 #e07e00,
        -11px 8px 0 #c82400, -12px  8px 0 #b81600,
        -13px 9px 0 #a80a00, -14px  9px 0 #880000,
        0 0 40px rgba(0,0,0,0.85), -16px 12px 28px rgba(0,0,0,0.5);
}

@keyframes glitch-text {
    0%, 40%, 100% {
        text-shadow:
            -1px  1px 0 #ffa200,  -2px  2px 0 #ffa200,
            -3px  3px 0 #ffa200,  -4px  4px 0 #ffa200,
            -5px  5px 0 #ffa200,  -6px  5px 0 #f09000,
            -7px  6px 0 #f09000,  -8px  6px 0 #f09000,
            -9px  7px 0 #e07e00, -10px  7px 0 #e07e00,
            -11px 8px 0 #c82400, -12px  8px 0 #b81600,
            -13px 9px 0 #a80a00, -14px  9px 0 #880000,
            0 0 40px rgba(0,0,0,0.85), -16px 12px 28px rgba(0,0,0,0.5);
    }

    10% {
        text-shadow:
            -1px  1px 0 rgba(255, 0, 110, 1),
            -4px  4px 0 rgba(220, 0,  80, 0.9),
            -8px  6px 0 rgba(160, 0,  50, 0.8),
            -14px 9px 0 #880000,
            3px 0 rgba(0, 245, 255, 0.7),
            0 0 40px rgba(0,0,0,0.85), -16px 12px 28px rgba(0,0,0,0.5);
    }

    20% {
        text-shadow:
            -1px  1px 0 rgba(0, 245, 255, 1),
            -4px  4px 0 rgba(0, 200, 230, 0.9),
            -8px  6px 0 rgba(0, 140, 180, 0.8),
            -14px 9px 0 #880000,
            -3px 0 rgba(255, 0, 110, 0.7),
            0 0 40px rgba(0,0,0,0.85), -16px 12px 28px rgba(0,0,0,0.5);
    }

    30% {
        text-shadow:
            -1px  1px 0 rgba(57, 255, 20, 1),
            -4px  4px 0 rgba(30, 200, 10, 0.9),
            -8px  6px 0 rgba(10, 140,  5, 0.8),
            -14px 9px 0 #880000,
            3px 0 rgba(255, 221, 0, 0.7),
            0 0 40px rgba(0,0,0,0.85), -16px 12px 28px rgba(0,0,0,0.5);
    }
}

@keyframes gentle-float {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-8px);
    }
}

.hero-subtitle {
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
    font-size: clamp(0.9rem, 2.5vw, 1.3rem);
    letter-spacing: 8px;
    text-transform: uppercase;
    color: var(--text-muted);
    display: none;
}

.hero-origin {
    font-size: 0.8rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--blue-deep);
}

/* scroll cue — <button> : il fait descendre la page au tap/clic, ce qui
   sur mobile évite d'avoir à deviner qu'on peut glisser depuis le hero. */
.scroll-cue {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: 20rem;
    padding: 0;
    background: none;
    border: none;
    font: inherit;
    cursor: pointer;
}

.scroll-cue span {
    font-size: 0.65rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--nav-text-light);
}

.scroll-arrow {
    display: block;
    width: 22px;
    height: 22px;
    border-right: 2px solid var(--nav-text-light);
    border-bottom: 2px solid var(--nav-text-light);
    transform: rotate(45deg);
    animation: bounce-down 1.6s ease-in-out infinite;
    box-shadow: none;
}

@keyframes bounce-down {

    0%,
    100% {
        transform: rotate(45deg) translate(0, 0);
        opacity: 1;
    }

    50% {
        transform: rotate(45deg) translate(5px, 5px);
        opacity: 0.6;
    }
}

/* ─────────────────────────────────────────────
   SECTION SHARED
   ───────────────────────────────────────────── */
section {
    padding: 6rem 2rem;
    padding-bottom: 1rem;
}

.section-inner {
    max-width: 1100px;
    margin: 0 auto;
}

/* ─────────────────────────────────────────────
   ARTIST INTRO (SEO-focused section)
   ───────────────────────────────────────────── */
.artist-intro-section {
    background: var(--bg-section);
    padding: 3rem 2rem;
    text-align: center;
}

.artist-intro-inner {
    max-width: 900px;
    margin: 0 auto;
}

.artist-intro {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-dark);
    letter-spacing: 0.3px;
}

.artist-intro strong {
    color: var(--blue-deep);
    font-weight: 600;
    text-shadow: none;
}

/* ─────────────────────────────────────────────
   SECTION HEADERS & LABELS
   ───────────────────────────────────────────── */
.section-label {
    font-family: 'Oswald', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--blue-ocean);
    margin-bottom: 0.5rem;
}

.section-title {
    font-family: 'Oswald', sans-serif;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 2.5rem;
    position: relative;
    display: inline-block;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, var(--blue-ocean), var(--blue-pastel));
    box-shadow: 0 2px 8px rgba(79, 168, 186, 0.4);
    border-radius: 2px;
}

/* ─────────────────────────────────────────────
   ABOUT
   ───────────────────────────────────────────── */
#about {
    background: radial-gradient(ellipse at 80% 50%,
            rgba(179, 235, 242, 0.15) 0%,
            transparent 60%),
        var(--bg-section);
}

.about-grid {
    display: flex;
    gap: 4rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.about-text {
    flex: 1 1 320px;
}

.about-text p {
    color: var(--text-muted);
    font-size: 1.05rem;
    line-height: 1.9;
    margin-bottom: 1.2rem;
}

.about-text p strong {
    color: var(--text-dark);
    font-weight: 400;
}

.about-stats {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.stat-card {
    background: white;
    border: 2px solid var(--blue-pastel);
    border-left: 4px solid var(--blue-ocean);
    padding: 1.2rem 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    min-width: 180px;
    transition: box-shadow 0.3s, border-color 0.3s, transform 0.3s;
}

.stat-card:hover {
    box-shadow: 0 8px 24px rgba(79, 168, 186, 0.3);
    border-left-color: var(--blue-deep);
    transform: translateY(-4px);
}

.stat-number {
    font-family: 'Oswald', sans-serif;
    font-size: 2.2rem;
    font-weight: 600;
    color: var(--blue-ocean);
    line-height: 1;
}

.stat-label {
    font-size: 0.78rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 4px;
}

/* ─────────────────────────────────────────────
   ALBUMS
   ───────────────────────────────────────────── */
#albums {
    background: var(--bg-light);
}

.album-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.8rem;
}

.album-card {
    flex: 1 1 calc(50% - 0.9rem);
    max-width: calc(50% - 0.9rem);
    min-width: 260px;
    background: white;
    border: 2px solid var(--blue-pastel);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    position: relative;
    transform-style: preserve-3d;
    perspective: 1000px;
}

/* Animated gradient border on hover */
.album-card::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 12px;
    padding: 2px;
    background: linear-gradient(45deg,
            var(--accent-cyber),
            var(--accent-hot),
            var(--accent-neon),
            var(--accent-electric),
            var(--accent-cyber));
    background-size: 300% 300%;
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: -1;
}

.album-card:hover::before {
    opacity: 1;
    animation: gradient-border-rotate 3s linear infinite;
}

@keyframes gradient-border-rotate {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.album-card:hover {
    transform: translateY(-12px) rotateX(2deg) rotateY(-2deg);
    box-shadow:
        0 16px 48px rgba(79, 168, 186, 0.4),
        0 8px 16px rgba(0, 0, 0, 0.15),
        0 0 0 1px var(--blue-ocean);
    border-color: var(--blue-ocean);
}

.album-cover {
    width: 100%;
    aspect-ratio: 1 / 1;
    position: relative;
    overflow: hidden;
}

/* Each album has a unique gradient cover - beach theme */
.album-card:nth-child(1) .album-cover {
    background: linear-gradient(135deg,
            #b3ebf2 0%,
            #5eb8c5 25%,
            #2c7a8a 50%,
            #5eb8c5 75%,
            #b3ebf2 100%);
}

.album-card:nth-child(2) .album-cover {
    background: linear-gradient(135deg,
            #e3dacc 0%,
            #d4c9b3 30%,
            #b3ebf2 50%,
            #d4c9b3 70%,
            #e3dacc 100%);
}

.album-card:nth-child(3) .album-cover {
    background: linear-gradient(160deg, #f5ede4 0%, #e3dacc 40%, #5eb8c5 70%, #b3ebf2 100%);
}

.album-card:nth-child(4) .album-cover {
    background: linear-gradient(120deg,
            #fafaf8 0%,
            #e3dacc 35%,
            #b3ebf2 60%,
            #d4c9b3 90%,
            #f5ede4 100%);
}

.album-card:nth-child(5) .album-cover {
    background: linear-gradient(150deg,
            #f5ede4 0%,
            #e3dacc 30%,
            #5eb8c5 55%,
            #b3ebf2 80%,
            #fafaf8 100%);
}

.album-card:nth-child(6) .album-cover {
    background: linear-gradient(135deg, #e3dacc 0%, #b3ebf2 40%, #5eb8c5 65%, #e3dacc 100%);
}

.album-card:nth-child(7) .album-cover {
    background: linear-gradient(165deg,
            #f5ede4 0%,
            #d4c9b3 35%,
            #b3ebf2 60%,
            #e3dacc 90%,
            #fafaf8 100%);
}

/* abstract art lines on covers */
.album-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.album-card:hover .album-cover img {
    transform: scale(1.05);
}

/* Ben 10 Omnitrix special hover animation - adapted to beach theme */
.album-card[href*="57ug8uW3nsqvYpdws0I1Xp"]:hover {
    transform: translateY(-6px);
    animation: ben10-omnitrix-flash 0.8s ease-out both;
    box-shadow: 0 10px 32px rgba(94, 184, 197, 0.4),
        0 0 40px rgba(179, 235, 242, 0.3),
        0 0 0 1px rgba(94, 184, 197, 0.5);
    border-color: var(--blue-ocean);
}

.album-card[href*="57ug8uW3nsqvYpdws0I1Xp"]:hover .album-cover img {
    transform: scale(1.08);
}

/* Ben 10 ripple/shockwave effects - beach theme */
.album-card[href*="57ug8uW3nsqvYpdws0I1Xp"] .album-cover::before,
.album-card[href*="57ug8uW3nsqvYpdws0I1Xp"] .album-cover::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 45%;
    width: 0;
    height: 0;
    border-radius: 50%;
    border: 2px solid rgba(94, 184, 197, 0);
    transform: translate(-50%, -50%);
    pointer-events: none;
    display: block !important;
}

.album-card[href*="57ug8uW3nsqvYpdws0I1Xp"]:hover .album-cover::before {
    animation: omnitrix-ripple 0.8s ease-out;
}

.album-card[href*="57ug8uW3nsqvYpdws0I1Xp"]:hover .album-cover::after {
    animation: omnitrix-ripple 0.8s ease-out 0.15s;
}

.album-cover::before,
.album-cover::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(179, 235, 242, 0.3);
}

.album-cover::before {
    width: 70%;
    height: 70%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.album-cover::after {
    width: 40%;
    height: 40%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-color: rgba(179, 235, 242, 0.4);
}

/* Hide pseudo-elements when a real cover image is present */
.album-cover:has(img)::before,
.album-cover:has(img)::after {
    display: none;
}

.album-cover-text {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: 'Metal Mania', cursive;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    color: rgba(94, 184, 197, 0.6);
    text-shadow: 0 2px 8px rgba(94, 184, 197, 0.3);
    letter-spacing: 6px;
    user-select: none;
}

.album-info {
    padding: 1.2rem 1.4rem 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    position: relative;
}

.album-title {
    font-family: 'Oswald', sans-serif;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-dark);
    letter-spacing: 1px;
}

.album-meta {
    font-size: 0.78rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-muted);
}

.new-badge {
    position: absolute;
    top: -12px;
    right: 1.4rem;
    background: linear-gradient(135deg, var(--accent-hot) 0%, var(--accent-electric) 100%);
    color: white;
    font-family: 'Oswald', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 2px;
    padding: 0.35rem 0.8rem;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(255, 0, 110, 0.5), 0 0 12px rgba(255, 0, 110, 0.3);
    animation: badge-pulse-intense 2s ease-in-out infinite;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

@keyframes badge-pulse-intense {

    0%,
    100% {
        box-shadow: 0 2px 8px rgba(255, 0, 110, 0.5), 0 0 12px rgba(255, 0, 110, 0.3);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 4px 20px rgba(255, 0, 110, 0.7), 0 0 24px rgba(255, 0, 110, 0.5);
        transform: scale(1.05);
    }
}

/* Ben 10 Omnitrix transformation flash animation - beach theme */
@keyframes ben10-omnitrix-flash {
    0% {
        transform: translateY(-6px) scale(1);
        box-shadow: 0 8px 24px rgba(94, 184, 197, 0.25), 0 0 0 1px rgba(179, 235, 242, 0.4);
    }

    15% {
        transform: translateY(-6px) scale(1.03);
        box-shadow: 0 12px 40px rgba(94, 184, 197, 0.5),
            0 0 60px rgba(179, 235, 242, 0.4),
            0 0 0 2px rgba(94, 184, 197, 0.7);
    }

    30% {
        transform: translateY(-6px) scale(1.01);
        box-shadow: 0 10px 32px rgba(94, 184, 197, 0.35),
            0 0 48px rgba(179, 235, 242, 0.3),
            0 0 0 1px rgba(94, 184, 197, 0.6);
    }

    50% {
        transform: translateY(-6px) scale(1.02);
        box-shadow: 0 12px 36px rgba(94, 184, 197, 0.45),
            0 0 54px rgba(179, 235, 242, 0.35),
            0 0 0 2px rgba(94, 184, 197, 0.65);
    }

    100% {
        transform: translateY(-6px) scale(1);
        box-shadow: 0 10px 32px rgba(94, 184, 197, 0.4),
            0 0 40px rgba(179, 235, 242, 0.3),
            0 0 0 1px rgba(94, 184, 197, 0.5);
    }
}

/* Omnitrix shockwave ripple animation - beach theme */
@keyframes omnitrix-ripple {
    0% {
        width: 0;
        height: 0;
        border-color: rgba(94, 184, 197, 0.8);
        border-width: 3px;
    }

    50% {
        border-color: rgba(94, 184, 197, 0.5);
        border-width: 2px;
    }

    100% {
        width: 150%;
        height: 150%;
        border-color: rgba(94, 184, 197, 0);
        border-width: 1px;
    }
}

.album-tracks {
    margin-top: auto;
    padding-top: 0.8rem;
    font-size: 0.75rem;
    color: var(--blue-deep);
    letter-spacing: 1px;
}

/* ─────────────────────────────────────────────
   SOCIAL / FOOTER
   ───────────────────────────────────────────── */
#social {
    background: var(--bg-section);
    text-align: center;
    padding: 5rem 2rem;
    border-top: 1px solid rgba(135, 212, 224, 0.4);
    border-bottom: 1px solid rgba(135, 212, 224, 0.4);
}

/* ─────────────────────────────────────────────
   SCROLL REVEAL - Enhanced with section-specific animations
   ───────────────────────────────────────────── */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Section-specific reveal animations */
.reveal-slide-right {
    opacity: 0;
    transform: translateX(-60px);
    transition: opacity 0.75s ease, transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-slide-right.visible {
    opacity: 1;
    transform: translateX(0);
}

.reveal-zoom-in {
    opacity: 0;
    transform: scale(0.85);
    filter: blur(10px);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), filter 0.8s ease;
}

.reveal-zoom-in.visible {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
}

.reveal-cascade {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-cascade.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.album-card.reveal:nth-child(1) {
    transition-delay: 0ms;
}

.album-card.reveal:nth-child(2) {
    transition-delay: 70ms;
}

.album-card.reveal:nth-child(3) {
    transition-delay: 140ms;
}

.album-card.reveal:nth-child(4) {
    transition-delay: 210ms;
}

.album-card.reveal:nth-child(5) {
    transition-delay: 280ms;
}

.album-card.reveal:nth-child(6) {
    transition-delay: 350ms;
}

.album-card.reveal:nth-child(7) {
    transition-delay: 420ms;
}

/* ─────────────────────────────────────────────
   SOCIAL DOCK – fixed right-side icons
   ───────────────────────────────────────────── */
.social-dock {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%) translateX(100%);
    z-index: 200;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
}

.social-dock--visible {
    transform: translateY(-50%) translateX(0);
    opacity: 1;
    pointer-events: auto;
}

.dock-link {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    overflow: hidden;
    height: 50px;
    width: 50px;
    background: white;
    border: 1px solid var(--blue-pastel);
    border-right: none;
    border-radius: 6px 0 0 6px;
    color: var(--text-muted);
    text-decoration: none;
    transition: width 0.38s cubic-bezier(0.22, 1, 0.36, 1), color 0.25s, border-color 0.25s,
        box-shadow 0.25s;
}

.dock-link:hover,
.dock-link:focus-visible {
    width: 152px;
    color: var(--accent-cyber);
    border-color: var(--accent-cyber);
    box-shadow: -4px 0 16px rgba(0, 245, 255, 0.3);
    outline: none;
}

.dock-label {
    font-family: 'Oswald', sans-serif;
    font-size: 0.78rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    white-space: nowrap;
    padding: 0 0 0 12px;
    opacity: 0;
    transform: translateX(10px);
    transition: opacity 0.2s ease 0.08s, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1) 0.05s;
    pointer-events: none;
}

.dock-link:hover .dock-label,
.dock-link:focus-visible .dock-label {
    opacity: 1;
    transform: translateX(0);
}

.dock-icon {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dock-icon svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* ─────────────────────────────────────────────
   CTA SECTION
   ───────────────────────────────────────────── */
.cta-section {
    background: radial-gradient(ellipse at 50% 50%,
            rgba(179, 235, 242, 0.2) 0%,
            transparent 70%),
        var(--bg-section);
    padding: 4rem 2rem;
    text-align: center;
}

.cta-button {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1.2rem 2.8rem;
    font-family: 'Oswald', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-decoration: none;
    color: white;
    background: linear-gradient(135deg, var(--accent-hot) 0%, var(--accent-cyber) 100%);
    border: none;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(255, 0, 110, 0.4), inset 0 0 20px rgba(255, 255, 255, 0.15);
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    overflow: hidden;
}

.cta-button::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
            transparent 0%,
            rgba(255, 255, 255, 0.3) 50%,
            transparent 100%);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.cta-button:hover::before {
    transform: translateX(100%);
}

.cta-button:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 12px 40px rgba(255, 0, 110, 0.6),
        0 0 30px rgba(0, 245, 255, 0.4),
        inset 0 0 30px rgba(255, 255, 255, 0.2);
}

.cta-button:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 32px rgba(79, 168, 186, 0.5), inset 0 0 30px rgba(255, 255, 255, 0.2);
}

.cta-button svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
    transition: transform 0.3s ease;
}

.cta-button:hover svg {
    transform: translateX(4px);
}

/* ─────────────────────────────────────────────
   SOCIAL SECTION CARDS (2-up, fuller)
   ───────────────────────────────────────────── */
.social-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    max-width: 100%;
}

.social-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    color: var(--text-dark);
    font-family: 'Oswald', sans-serif;
    font-size: 1rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    padding: 1.4rem 2.4rem;
    border: 2px solid var(--blue-pastel);
    border-radius: 10px;
    background: white;
    min-width: 220px;
    transition: color 0.25s, border-color 0.25s, box-shadow 0.25s, transform 0.2s, background 0.25s;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}

.social-link:hover {
    color: white;
    background: var(--blue-ocean);
    border-color: var(--blue-ocean);
    box-shadow: 0 6px 24px rgba(79, 168, 186, 0.4);
}

.social-link svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
    flex-shrink: 0;
}

/* ─────────────────────────────────────────────
   BOUTIQUE (Shopify Buy Button)
   ───────────────────────────────────────────── */

/* Tout est masqué par défaut : shop-renderer.js pose la classe « shop-ready »
   sur <html> uniquement si data/shop.json est activé ET renseigné. Tant que
   les identifiants Shopify sont vides, aucune section vide ni lien mort. */
#boutique,
.divider--boutique,
.shop-link {
    display: none;
}

/* Padding réduit face au « section » générique (6rem) : la bande produit doit
   se voir sans monopoliser l'écran. */
.shop-ready #boutique {
    display: block;
    padding: 3rem 2rem;
}

.shop-ready .divider--boutique {
    display: block;
}

.shop-ready .shop-link {
    display: list-item;
}

/* Sans le gros titre de section, le label a besoin de sa propre respiration. */
.shop-label {
    max-width: 820px;
    margin: 0 auto 1rem;
}

.shop-grid {
    display: grid;
    gap: 1.5rem;
    max-width: 820px;
    margin: 0 auto;
}

/* Pas d'effet de survol : contrairement aux vignettes d'album, la carte n'est
   pas cliquable — seul le bouton l'est. Un survol y suggérerait à tort une
   zone entièrement cliquable. Sans état survolé, la transition devient inutile
   et la laisser ici écraserait celle de « .reveal » (fondu d'apparition). */
.shop-card {
    position: relative;
    padding: 1.4rem 1.6rem;
    background: white;
    border: 2px solid var(--blue-pastel);
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Badge optionnel par produit (« Édition limitée », « Nouveau »…). */
.shop-badge {
    position: absolute;
    top: -12px;
    right: 1.4rem;
    z-index: 2;
    background: linear-gradient(135deg, var(--accent-hot) 0%, var(--accent-electric) 100%);
    color: white;
    font-family: 'Oswald', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 0.35rem 0.8rem;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(255, 0, 110, 0.5);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* ── Squelette de chargement ──
   Occupe la place de la bande pendant le téléchargement du SDK et la requête
   produit. Mêmes colonnes et mêmes hauteurs que le rendu final : la carte ne
   bouge pas au moment de la substitution. */
.shop-card--loading .shop-mount {
    display: none;
}

.shop-card:not(.shop-card--loading) .shop-skeleton {
    display: none;
}

.shop-skeleton {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr) auto;
    column-gap: 1.5rem;
    align-items: center;
}

.shop-skeleton__lines {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.shop-skeleton__img,
.shop-skeleton__bar,
.shop-skeleton__btn {
    display: block;
    border-radius: 6px;
    background: linear-gradient(90deg,
            var(--bg-section) 25%,
            rgba(135, 212, 224, 0.35) 37%,
            var(--bg-section) 63%);
    background-size: 400% 100%;
    animation: shop-shimmer 1.4s ease-in-out infinite;
}

.shop-skeleton__img {
    width: 110px;
    height: 110px;
    border-radius: 10px;
}

.shop-skeleton__bar--title {
    width: 60%;
    height: 15px;
}

.shop-skeleton__bar--price {
    width: 38%;
    height: 13px;
}

.shop-skeleton__bar--options {
    width: 75%;
    height: 26px;
}

.shop-skeleton__btn {
    width: 116px;
    height: 42px;
    border-radius: 10px;
}

@keyframes shop-shimmer {
    0% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0 50%;
    }
}

/* ── Surcharges du SDK Shopify ──
   Le composant est rendu sans iframe (option product.iframe: false), donc
   stylable ici. Shopify injecte ses styles avec des sélecteurs à une seule
   classe : le préfixe « #boutique » suffit à passer devant, sans !important. */
/* Disposition en bande : vignette à gauche, infos au centre, bouton à droite.
   Le placement s'appuie sur les attributs « data-element » du SDK, stables,
   plutôt que sur les noms de classes générés. */
#boutique .shopify-buy__product {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr) auto;
    grid-template-areas:
        "img titre   bouton"
        "img prix    bouton"
        "img options bouton";
    align-items: center;
    column-gap: 1.5rem;
    max-width: 100%;
    text-align: left;
}

#boutique [data-element="product.imgWrapper"] {
    grid-area: img;
}

#boutique [data-element="product.title"] {
    grid-area: titre;
}

#boutique [data-element="product.prices"] {
    grid-area: prix;
}

#boutique [data-element="product.buttonWrapper"] {
    grid-area: bouton;
}

/* Shopify marque ses libellés de prix pour lecteurs d'écran avec
   « .visuallyhidden », mais ne définit cette classe que dans sa feuille de
   style d'iframe — inutilisée ici (iframe: false). Sans cette règle, un
   « Prix régulier » parasite s'affiche à côté du prix. */
#boutique .visuallyhidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    white-space: nowrap;
}

#boutique [data-element="product.img"] {
    display: block;
    width: 110px;
    height: 110px;
    object-fit: cover;
    border-radius: 10px;
    background: var(--bg-section);
}

#boutique .shopify-buy__product__title {
    margin: 0;
    font-family: 'Oswald', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-dark);
}

#boutique .shopify-buy__product__price,
#boutique .shopify-buy__product__actual-price {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-muted);
}

#boutique .shopify-buy__product__compare-price {
    color: var(--text-muted);
    text-decoration: line-through;
    opacity: 0.7;
}

/* ── Sélecteur de variantes (taille, couleur…) ──
   Shopify superpose sa propre flèche SVG au <select>, dimensionnée uniquement
   par sa feuille de style d'iframe : sans elle, le SVG s'étire à la taille du
   conteneur (chevron noir géant). Le <select> natif dessine déjà sa flèche,
   celle de Shopify est donc simplement retirée. */
#boutique .shopify-buy__select-icon {
    display: none;
}

/* Les variantes s'alignent sur une seule ligne sous le prix : label à gauche
   du menu, pour rester dans la hauteur d'une bande. */
#boutique [data-element="product.options"] {
    grid-area: options;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1rem;
    margin-top: 0.5rem;
}

/* min-width: 0 — sans ça, un élément flex refuse de passer sous la largeur de
   son contenu, et le menu déborde de la colonne du milieu pour chevaucher le
   bouton sur les écrans étroits. */
#boutique .shopify-buy__option-select {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

#boutique .shopify-buy__option-select__select {
    max-width: 100%;
    min-width: 0;
}

#boutique .shopify-buy__option-select__label {
    margin: 0;
    font-family: 'Oswald', sans-serif;
    font-size: 0.68rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--blue-ocean);
    white-space: nowrap;
}

#boutique .shopify-buy__option-select__select,
#boutique .shopify-buy__variant-selector {
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    color: var(--text-dark);
    padding: 0.35rem 0.6rem;
    border: 2px solid var(--blue-pastel);
    border-radius: 8px;
    background: white;
}

/* Bouton d'achat : mêmes valeurs que « .quote-more » pour un rendu natif. */
#boutique .shopify-buy__btn,
.shop-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-family: 'Oswald', sans-serif;
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: white;
    padding: 0.9rem 1.8rem;
    border: 2px solid var(--blue-ocean);
    border-radius: 10px;
    background: var(--blue-ocean);
    box-shadow: 0 4px 14px rgba(79, 168, 186, 0.3);
    cursor: pointer;
    transition: color 0.25s, border-color 0.25s, background 0.25s, box-shadow 0.25s, transform 0.2s;
}

#boutique .shopify-buy__btn:hover,
.shop-fallback:hover {
    color: white;
    background: var(--blue-deep);
    border-color: var(--blue-deep);
    box-shadow: 0 6px 24px rgba(79, 168, 186, 0.45);
    transform: translateY(-2px);
}

/* Épuisé / indisponible */
#boutique .shopify-buy__btn:disabled,
#boutique .shopify-buy__btn-disabled {
    color: var(--text-muted);
    background: var(--bg-section);
    border-color: var(--beige-sand);
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

/* ─────────────────────────────────────────────
   QUOTE OF THE DAY
   ───────────────────────────────────────────── */
.quote-card {
    position: relative;
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    background: white;
    border: 2px solid var(--blue-pastel);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.3s, border-color 0.3s;
}

.quote-card:hover {
    border-color: var(--blue-ocean);
    box-shadow: 0 12px 32px rgba(79, 168, 186, 0.25);
}

/* ── Panneau vedette (gauche, fond marine) ── */
.quote-feature {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2.4rem 2.4rem 2rem;
    background: linear-gradient(150deg, #22303f 0%, var(--text-dark) 55%, #10192a 100%);
}

.quote-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.6rem;
    padding: 2.4rem 2.4rem 2rem;
    background: white;
}

/* Guillemet géant en filigrane, repris du logo « » (façon Playfair) */
.quote-deco {
    position: absolute;
    right: 12px;
    bottom: -32px;
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 900;
    font-size: clamp(140px, 24vw, 220px);
    line-height: 1;
    color: rgba(255, 255, 255, 0.05);
    pointer-events: none;
    user-select: none;
}

/* Logotype « Génie. » repris de la page de recherche (Playfair italique + point teal). */
.quote-badge {
    position: relative;
    z-index: 1;
    align-self: flex-start;
    display: inline-flex;
    align-items: baseline;
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-weight: 800;
    font-style: italic;
    font-size: 1.1rem;
    letter-spacing: -0.025em;
    line-height: 1;
    color: rgba(255, 255, 255, 0.95);
    background: rgba(79, 168, 186, 0.12);
    border: 1px solid rgba(135, 212, 224, 0.5);
    padding: 0.4rem 0.9rem 0.5rem;
    border-radius: 999px;
}

.quote-badge em {
    font-style: italic;
}

.quote-badge .dot {
    font-style: normal;
    color: var(--blue-ocean);
}

.quote-excerpt {
    position: relative;
    z-index: 1;
    margin: 0;
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-weight: 900;
    font-size: clamp(1.4rem, 3vw, 2rem);
    line-height: 1.3;
    color: white;
}

.quote-snippet {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--text-muted);
}

.quote-more {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
    font-family: 'Oswald', sans-serif;
    font-size: 0.8rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: white;
    padding: 0.7rem 1.4rem;
    border: 2px solid var(--blue-ocean);
    border-radius: 10px;
    background: var(--blue-ocean);
    box-shadow: 0 4px 14px rgba(79, 168, 186, 0.3);
    transition: color 0.25s, border-color 0.25s, background 0.25s, box-shadow 0.25s, transform 0.2s;
}

.quote-more:hover {
    color: white;
    background: var(--blue-deep);
    border-color: var(--blue-deep);
    box-shadow: 0 6px 24px rgba(79, 168, 186, 0.45);
    transform: translateY(-2px);
}

.quote-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.8rem;
}

/* Bouton secondaire (outline) pour différencier de « En Savoir plus ». */
.quote-riddle {
    display: inline-flex;
    align-items: center;
    font-family: 'Oswald', sans-serif;
    font-size: 0.8rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--blue-deep);
    padding: 0.7rem 1.4rem;
    border: 2px solid var(--blue-pastel);
    border-radius: 10px;
    background: white;
    cursor: pointer;
    transition: color 0.25s, border-color 0.25s, background 0.25s, box-shadow 0.25s, transform 0.2s;
}

.quote-riddle:hover {
    color: var(--blue-deep);
    border-color: var(--blue-ocean);
    box-shadow: 0 6px 24px rgba(79, 168, 186, 0.25);
    transform: translateY(-2px);
}

/* Bouton discret pour piocher une autre citation au hasard. */
.quote-shuffle {
    display: inline-flex;
    align-items: center;
    font-family: 'Oswald', sans-serif;
    font-size: 0.8rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--blue-deep);
    padding: 0.7rem 1.4rem;
    border: 2px dashed var(--blue-pastel);
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
    transition: color 0.25s, border-color 0.25s, background 0.25s, transform 0.2s;
}

.quote-shuffle:hover {
    border-color: var(--blue-ocean);
    background: rgba(79, 168, 186, 0.08);
    transform: translateY(-2px);
}

/* ─────────────────────────────────────────────
   RIDDLE MODAL (Devinette)
   ───────────────────────────────────────────── */
.riddle-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.riddle-modal.is-open {
    display: flex;
}

.riddle-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(26, 35, 50, 0.5);
    backdrop-filter: blur(2px);
}

.riddle-dialog {
    position: relative;
    width: min(92vw, 480px);
    max-height: 90vh;
    overflow-y: auto;
    background: white;
    border: 2px solid var(--blue-pastel);
    border-radius: 12px;
    box-shadow: 0 24px 64px rgba(26, 35, 50, 0.35);
    padding: 2.5rem 2rem 2rem;
    animation: riddle-in 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes riddle-in {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.riddle-close {
    position: absolute;
    top: 0.9rem;
    right: 1rem;
    width: 2rem;
    height: 2rem;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 8px;
    transition: color 0.2s, background 0.2s;
}

.riddle-close:hover {
    color: var(--text-dark);
    background: var(--bg-section);
}

.riddle-eyebrow {
    font-family: 'Oswald', sans-serif;
    font-size: 0.62rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--blue-ocean);
    margin: 0 0 0.4rem;
}

.riddle-title {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: clamp(1.15rem, 3vw, 1.5rem);
    color: var(--text-dark);
    margin: 0 0 1rem;
}

.riddle-excerpt {
    margin: 0 0 1.5rem;
    padding-left: 1rem;
    border-left: 4px solid var(--blue-ocean);
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 1.05rem;
    line-height: 1.4;
    color: var(--text-dark);
}

.riddle-options {
    display: grid;
    gap: 0.7rem;
}

.riddle-option {
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    text-align: left;
    color: var(--text-dark);
    padding: 0.9rem 1.2rem;
    border: 2px solid var(--blue-pastel);
    border-radius: 10px;
    background: white;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.riddle-option:hover:not(:disabled) {
    border-color: var(--blue-ocean);
    box-shadow: 0 4px 16px rgba(79, 168, 186, 0.2);
}

.riddle-option:disabled {
    cursor: default;
}

.riddle-option.is-correct {
    border-color: #1f9d55;
    background: #e7f7ee;
    color: #1f6b3d;
    font-weight: 600;
}

.riddle-option.is-wrong {
    border-color: var(--accent-hot);
    background: #fdeaf1;
    color: #b0004b;
}

.riddle-feedback {
    min-height: 1.2rem;
    margin: 1.2rem 0 0;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
}

.riddle-feedback.is-correct {
    color: #1f6b3d;
}

.riddle-feedback.is-wrong {
    color: #b0004b;
}

.riddle-more {
    display: inline-block;
    margin-top: 1rem;
    font-family: 'Oswald', sans-serif;
    font-size: 0.78rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--blue-deep);
    text-decoration: none;
    padding: 0.6rem 1.2rem;
    border: 2px solid var(--blue-pastel);
    border-radius: 10px;
    background: var(--bg-section);
    transition: color 0.25s, background 0.25s, border-color 0.25s;
}

.riddle-more:hover {
    color: white;
    background: var(--blue-ocean);
    border-color: var(--blue-ocean);
}

/* ─────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────── */
/* Tablettes et dessous : la Quote of the Day passe en pile verticale
   (panneau vedette au-dessus, corps en dessous) car deux colonnes
   deviennent trop serrées sous ~860px. */
@media (max-width: 860px) {
    .quote-card {
        grid-template-columns: 1fr;
    }

    /* En pile, le contenu du panneau vedette se regroupe naturellement :
       plus de « space-between » qui creusait un grand vide. */
    .quote-feature {
        justify-content: flex-start;
        gap: 1.2rem;
        padding: 2.2rem 2rem;
    }

    .quote-body {
        padding: 2.2rem 2rem;
    }

    .quote-deco {
        font-size: 150px;
        right: 10px;
        bottom: -28px;
    }
}

@media (max-width: 680px) {
    .quote-feature,
    .quote-body {
        padding: 2rem 1.6rem;
    }

    .quote-deco {
        font-size: 128px;
        right: 8px;
        bottom: -24px;
    }

    .album-grid {
        justify-content: center;
    }

    .album-card {
        flex: 1 1 100%;
        max-width: 400px;
    }

    /* La bande reste horizontale : on resserre plutôt que d'empiler. */
    #boutique .shopify-buy__product,
    .shop-skeleton {
        grid-template-columns: 90px minmax(0, 1fr) auto;
        column-gap: 1rem;
    }

    #boutique [data-element="product.img"],
    .shop-skeleton__img {
        width: 90px;
        height: 90px;
    }

    .shop-skeleton__btn {
        width: 92px;
        height: 38px;
    }

    #boutique .shopify-buy__btn {
        padding: 0.75rem 1.1rem;
        font-size: 0.72rem;
    }

    .shop-card {
        padding: 1.2rem;
    }

    .about-grid {
        flex-direction: column;
        gap: 2.5rem;
    }

    .about-stats {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    /* on mobile: row of floating circles at bottom-right */
    .social-dock {
        top: auto;
        transform: translateY(20px);
        bottom: 1.4rem;
        right: 1rem;
        flex-direction: row;
        gap: 10px;
    }

    .social-dock--visible {
        transform: translateY(0);
    }

    .dock-link {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        border: 1px solid var(--blue-pastel);
        border-right: 1px solid var(--blue-pastel);
        justify-content: center;
    }

    .dock-link:hover,
    .dock-link:focus-visible {
        width: 46px;
        border-radius: 50%;
    }

    .dock-label {
        display: none;
    }
}

/* ─────────────────────────────────────────────
   BOUTIQUE — mobile étroit
   Les 3 colonnes (vignette │ infos │ bouton) sont conservées jusqu'en bas.
   La largeur nécessaire est reprise sur les marges, la vignette et le bouton
   plutôt qu'en changeant l'alignement.
   ───────────────────────────────────────────── */
@media (max-width: 520px) {
    .shop-ready #boutique {
        padding: 2.5rem 1rem;
    }

    .shop-card {
        padding: 1rem;
    }

    #boutique .shopify-buy__product,
    .shop-skeleton {
        grid-template-columns: 64px minmax(0, 1fr) auto;
        column-gap: 0.75rem;
    }

    #boutique [data-element="product.img"],
    .shop-skeleton__img {
        width: 64px;
        height: 64px;
    }

    .shop-skeleton__btn {
        width: 74px;
        height: 32px;
    }

    .shop-skeleton__lines {
        gap: 0.4rem;
    }

    #boutique .shopify-buy__product__title {
        font-size: 0.82rem;
        letter-spacing: 0.5px;
    }

    #boutique .shopify-buy__product__price,
    #boutique .shopify-buy__product__actual-price {
        font-size: 0.82rem;
    }

    /* Les deux menus passent l'un sous l'autre si besoin : c'est la cellule
       du milieu qui se replie, la bande garde ses 3 colonnes. */
    #boutique [data-element="product.options"] {
        gap: 0.25rem 0.6rem;
        margin-top: 0.35rem;
    }

    #boutique .shopify-buy__option-select__label {
        font-size: 0.6rem;
        letter-spacing: 1px;
    }

    #boutique .shopify-buy__option-select__select,
    #boutique .shopify-buy__variant-selector {
        font-size: 0.78rem;
        padding: 0.25rem 0.35rem;
        border-width: 1px;
        border-radius: 6px;
    }

    #boutique .shopify-buy__btn {
        padding: 0.65rem 0.8rem;
        font-size: 0.65rem;
        letter-spacing: 1px;
    }

    .shop-badge {
        right: 1rem;
        font-size: 0.62rem;
        letter-spacing: 1px;
        padding: 0.3rem 0.6rem;
    }
}

@media (max-width: 900px) and (min-width: 681px) {
    .album-card {
        flex: 1 1 calc(50% - 0.9rem);
    }
}

/* ─────────────────────────────────────────────
   ACCESSIBILITY - Reduced Motion
   ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

    /* Disable hero animations */
    .hero-band-name,
    .hero-band-name:hover {
        animation: none !important;
    }

    .hero-overlay::before,
    .hero-overlay::after {
        animation: none !important;
    }

    .hero-bg-video {
        transform: none !important;
    }

    /* Disable badge pulse */
    .new-badge {
        animation: none !important;
    }

    /* Squelette de la boutique : on garde les blocs gris, sans le balayage */
    .shop-skeleton__img,
    .shop-skeleton__bar,
    .shop-skeleton__btn {
        animation: none !important;
        background: var(--bg-section) !important;
    }

    /* Disable album card gradient border animation */
    .album-card:hover::before {
        animation: none !important;
    }

    /* Disable divider animations */
    .divider-animated::before {
        animation: none !important;
    }

    /* Disable gradient shift */
    .bg-gradient-shift::before {
        animation: none !important;
    }

    /* Simplify reveal animations */
    .reveal,
    .reveal-slide-right,
    .reveal-zoom-in,
    .reveal-cascade {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}
/* Repli du texte de présentation : proposé uniquement en mobile
   (le @media ci-dessous le rétablit). */
.artist-intro-toggle {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE (≤ 680px) — mise en page dédiée
   Le point de départ : la page faisait ~8 700px de haut sur un écran de
   812px, soit une dizaine d'écrans de défilement, essentiellement à
   cause d'une colonne unique (12 albums + 5 réseaux empilés) et de
   marges pensées pour le desktop. Cette section retravaille le rythme,
   la densité et les cibles tactiles.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 680px) {

    /* ── Rythme des sections ──────────────────────────────────────
       6rem de padding vertical + 2rem horizontal, c'est du desktop :
       sur 375px de large ça ne laissait que 311px de contenu. */
    section {
        padding: 3.25rem max(1.25rem, var(--safe-left)) 0.75rem;
        padding-right: max(1.25rem, var(--safe-right));
    }

    /* #social porte son propre padding (sélecteur d'id) : sans ces lignes,
       ses gouttières restaient à 2rem et la grille des réseaux était plus
       étroite de 24px que celle des albums juste en dessous. */
    #social {
        padding: 2.75rem max(1.25rem, var(--safe-left));
        padding-right: max(1.25rem, var(--safe-right));
    }

    .section-label {
        font-size: 0.68rem;
        letter-spacing: 4px;
    }

    .section-title {
        font-size: 1.65rem;
        margin-bottom: 1.9rem;
    }

    .section-title::after {
        width: 44px;
        height: 3px;
        bottom: -6px;
    }

    /* ── Nav : le bandeau blanc collant n'affichait plus rien une fois
       le hero passé. On y remet le sigle, qui sert aussi de retour
       en haut. L'envol du logo est une chorégraphie desktop (il part de
       42vw) : on la coupe ici, sinon son fill-mode fige l'opacité. */
    .nav-logo {
        animation: none;
        opacity: 0;
        height: var(--tap-min);
        min-width: var(--tap-min);
        padding-right: 4px;
        font-size: 1.15rem;
        letter-spacing: 3px;
        transition: opacity 0.35s ease, color 0.35s ease;
    }

    .nav-logo::after {
        content: 'SMS';
    }

    nav.nav--scrolled .nav-logo {
        opacity: 1;
        color: var(--blue-ocean);
    }

    /* ── Hero : l'indice de défilement devient un vrai bouton ───── */
    .scroll-cue {
        padding: 0.75rem 1.5rem;
        border: none;
        background: none;
        color: inherit;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .scroll-cue:active {
        opacity: 0.6;
    }

    /* ── Réseaux : grille 2 colonnes plutôt que 5 pilules empilées ──
       Avant : 5 boutons de 220px de large centrés dans 311px, soit
       476px de hauteur pour cinq liens. */
    /* #social est centré (héritage desktop) ; en mobile son intitulé
       s'aligne à gauche comme ceux des autres sections. */
    #social {
        text-align: left;
    }

    #social .section-label {
        margin-bottom: 1.1rem;
    }

    .social-links {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.7rem;
    }

    .social-link {
        flex-direction: column;
        justify-content: center;
        gap: 0.55rem;
        min-width: 0;
        min-height: 92px;
        padding: 1rem 0.5rem;
        border-radius: 14px;
        border-width: 1.5px;
        font-size: 0.7rem;
        letter-spacing: 1.5px;
        text-align: center;
        -webkit-tap-highlight-color: transparent;
    }

    .social-link svg {
        width: 26px;
        height: 26px;
    }

    /* Le 5e réseau serait orphelin sur sa ligne : il la prend en entier
       et repasse en présentation horizontale. */
    .social-link:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        flex-direction: row;
        justify-content: center;
        gap: 0.8rem;
        min-height: 64px;
    }

    /* ── Quote of the Day ─────────────────────────────────────────── */
    .quote-card {
        border-radius: 14px;
        border-width: 1.5px;
    }

    .quote-feature {
        padding: 1.6rem 1.25rem 1.4rem;
        gap: 1rem;
    }

    .quote-body {
        padding: 1.4rem 1.25rem 1.5rem;
        gap: 1.1rem;
    }

    .quote-excerpt {
        font-size: 1.3rem;
        line-height: 1.35;
    }

    .quote-snippet {
        font-size: 0.95rem;
    }

    .quote-deco {
        font-size: 110px;
        right: 6px;
        bottom: -18px;
    }

    /* Trois boutons en flex-wrap donnaient trois largeurs différentes
       (151 / 116 / 152px) empilées en escalier. Grille : action
       principale pleine largeur, les deux secondaires côte à côte. */
    .quote-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.6rem;
    }

    .quote-more {
        grid-column: 1 / -1;
        justify-content: center;
        min-height: 52px;
        font-size: 0.85rem;
    }

    .quote-riddle,
    .quote-shuffle {
        justify-content: center;
        text-align: center;
        min-height: 48px;
        padding: 0.6rem 0.5rem;
        font-size: 0.72rem;
        letter-spacing: 1.5px;
    }

    /* ── Albums : 2 colonnes ──────────────────────────────────────
       12 pochettes carrées pleine largeur faisaient à elles seules
       5 480px de haut. En deux colonnes, la section tient en un tiers
       et les pochettes se comparent d'un coup d'œil. */
    .album-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.85rem;
        justify-content: initial;
    }

    .album-card {
        flex: none;
        max-width: none;
        min-width: 0;
        border-width: 1.5px;
        border-radius: 14px;
    }

    .album-info {
        padding: 0.7rem 0.75rem 1rem;
        gap: 0.15rem;
    }

    .album-title {
        font-size: 0.95rem;
        line-height: 1.25;
        letter-spacing: 0.4px;
    }

    /* En grille, deux cartes voisines ont la même hauteur mais des titres
       d'une ou deux lignes : on colle la ligne « année · type » en bas
       pour qu'elle s'aligne d'une carte à l'autre. */
    .album-meta {
        margin-top: auto;
        padding-top: 0.2rem;
        font-size: 0.68rem;
        letter-spacing: 1px;
    }

    .new-badge {
        top: -10px;
        right: 0.5rem;
        padding: 0.25rem 0.55rem;
        font-size: 0.64rem;
        letter-spacing: 1px;
    }

    /* ── Texte de présentation : repliable ────────────────────────
       Six cents pixels de texte d'un bloc en plein milieu du parcours.
       On garde tout dans le DOM (SEO) mais on le replie par défaut. */
    .artist-intro-section {
        padding: 2.5rem max(1.25rem, var(--safe-left));
        padding-right: max(1.25rem, var(--safe-right));
        text-align: left;
    }

    .artist-intro {
        font-size: 1rem;
        line-height: 1.75;
    }

    .artist-intro-wrap {
        position: relative;
    }

    .artist-intro-section:not(.is-expanded) .artist-intro {
        display: -webkit-box;
        -webkit-line-clamp: 7;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Dégradé de coupe : signale qu'il reste du texte dessous. */
    .artist-intro-section:not(.is-expanded) .artist-intro-wrap::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 3.5rem;
        background: linear-gradient(to bottom, rgba(240, 247, 249, 0), var(--bg-section));
        pointer-events: none;
    }

    .artist-intro-toggle {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        margin-top: 0.9rem;
        min-height: var(--tap-min);
        padding: 0.6rem 1.2rem;
        font-family: 'Oswald', sans-serif;
        font-size: 0.75rem;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: var(--blue-deep);
        background: transparent;
        border: 2px solid var(--blue-pastel);
        border-radius: 10px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .artist-intro-toggle:active {
        background: rgba(79, 168, 186, 0.12);
    }

    .artist-intro-toggle svg {
        width: 14px;
        height: 14px;
        fill: currentColor;
        transition: transform 0.25s ease;
    }

    .artist-intro-section.is-expanded .artist-intro-toggle svg {
        transform: rotate(180deg);
    }

    /* ── Devinette : feuille du bas plutôt que boîte flottante ───── */
    .riddle-modal {
        align-items: flex-end;
        padding: 0;
    }

    .riddle-dialog {
        width: 100%;
        max-height: 88svh;
        border-width: 1.5px 0 0;
        border-radius: 20px 20px 0 0;
        padding: 1.6rem 1.25rem calc(1.5rem + var(--safe-bottom));
        overscroll-behavior: contain;
        animation: riddle-sheet-up 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* Poignée : le vocabulaire visuel « ça se tire vers le bas ». */
    .riddle-dialog::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        margin: 0 auto 1.1rem;
        border-radius: 2px;
        background: var(--blue-pastel);
    }

    .riddle-close {
        top: 0.85rem;
        right: 0.6rem;
        width: var(--tap-min);
        height: var(--tap-min);
        font-size: 1.2rem;
    }

    .riddle-excerpt {
        font-size: 1rem;
        margin-bottom: 1.2rem;
    }

    .riddle-option {
        display: flex;
        align-items: center;
        min-height: 54px;
        font-size: 1rem;
        -webkit-tap-highlight-color: transparent;
    }

    /* :not([hidden]) est indispensable : une déclaration `display` d'auteur
       l'emporte sur le `display: none` que le navigateur applique à
       [hidden]. Sans ça, « Voir la référence sur Génie » s'affichait dès
       l'ouverture de la devinette, avec son href="#" de départ — un lien
       visible qui ne menait nulle part tant qu'on n'avait pas répondu. */
    .riddle-more:not([hidden]) {
        display: inline-flex;
        align-items: center;
        min-height: var(--tap-min);
    }
}

@keyframes riddle-sheet-up {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

/* ── Retour en haut : la page reste longue même resserrée ────────── */
.to-top {
    position: fixed;
    right: calc(1rem + var(--safe-right));
    bottom: calc(1rem + var(--safe-bottom));
    z-index: 90;
    display: none;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1.5px solid var(--blue-pastel);
    color: var(--blue-deep);
    box-shadow: 0 6px 20px rgba(26, 35, 50, 0.18);
    cursor: pointer;
    opacity: 0;
    transform: translateY(14px) scale(0.92);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    -webkit-tap-highlight-color: transparent;
}

.to-top svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

@media (max-width: 900px) {
    .to-top {
        display: grid;
    }
}

.to-top.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.to-top:active {
    transform: scale(0.9);
}

/* ── Écrans tactiles : les effets de survol deviennent des états
   pressés. Sinon une carte touchée reste « soulevée » jusqu'au tap
   suivant, et la bordure animée tourne en fond indéfiniment. ────── */
@media (hover: none) {

    .album-card:hover,
    .album-card[href*="57ug8uW3nsqvYpdws0I1Xp"]:hover {
        transform: none;
        animation: none;
        border-color: var(--blue-pastel);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

    .album-card:hover::before {
        opacity: 0;
        animation: none;
    }

    .album-card:hover .album-cover img {
        transform: none;
    }

    .album-card:active {
        transform: scale(0.97);
        border-color: var(--blue-ocean);
        box-shadow: 0 6px 18px rgba(79, 168, 186, 0.28);
    }

    .social-link:hover {
        color: var(--text-dark);
        background: white;
        border-color: var(--blue-pastel);
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
    }

    .social-link:active {
        color: white;
        background: var(--blue-ocean);
        border-color: var(--blue-ocean);
        transform: scale(0.97);
    }

    .quote-more:hover,
    .quote-riddle:hover,
    .quote-shuffle:hover,
    .riddle-option:hover:not(:disabled) {
        transform: none;
        box-shadow: none;
    }

    .quote-more:active,
    .quote-riddle:active,
    .quote-shuffle:active,
    .riddle-option:active:not(:disabled) {
        transform: scale(0.98);
        border-color: var(--blue-ocean);
    }
}