/* ==========================================================================
   GEO DALY - Layer PREMIUM
   Effets de lumière dynamique, cadres animés, players premium,
   visualisations audio, viewer PDF.
   ========================================================================== */

/* ==========================================================================
   1. BANNIERE DEROULANTE LUMINEUSE (message de bienvenue)
   ========================================================================== */

.welcome-banner {
    position: relative;
    background: linear-gradient(90deg,
        #1a1008 0%,
        #2a1a0c 25%,
        #3d2615 50%,
        #2a1a0c 75%,
        #1a1008 100%);
    color: var(--color-gold-bright);
    padding: 0.9rem 0;
    overflow: hidden;
    border-bottom: 1px solid rgba(201, 169, 97, 0.35);
    box-shadow:
        0 0 40px rgba(201, 169, 97, 0.08),
        inset 0 0 40px rgba(0, 0, 0, 0.6);
    z-index: 105;
}

/* Liseré lumineux animé sur le haut et bas */
.welcome-banner::before,
.welcome-banner::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        transparent 20%,
        var(--color-gold-bright) 50%,
        transparent 80%,
        transparent 100%);
    background-size: 200% 100%;
    animation: shimmer-line 6s linear infinite;
}
.welcome-banner::before { top: 0; }
.welcome-banner::after  { bottom: 0; animation-delay: -3s; }

@keyframes shimmer-line {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.welcome-marquee {
    display: flex;
    width: 100%;
    overflow: hidden;
    position: relative;
    mask-image: linear-gradient(90deg,
        transparent 0%,
        black 5%,
        black 95%,
        transparent 100%);
    -webkit-mask-image: linear-gradient(90deg,
        transparent 0%,
        black 5%,
        black 95%,
        transparent 100%);
}

.welcome-track {
    display: flex;
    gap: 4rem;
    white-space: nowrap;
    animation: marquee 55s linear infinite;
    will-change: transform;
    padding-right: 4rem;
}

.welcome-track:hover {
    animation-play-state: paused;
}

@keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.welcome-item {
    display: inline-flex;
    align-items: center;
    gap: 1.2rem;
    font-family: var(--font-italic), serif;
    font-style: italic;
    font-size: 1.05rem;
    letter-spacing: 0.08em;
    color: var(--color-cream);
    flex-shrink: 0;
}

.welcome-item strong {
    color: var(--color-gold-bright);
    font-weight: normal;
    text-shadow:
        0 0 10px rgba(228, 197, 107, 0.6),
        0 0 20px rgba(228, 197, 107, 0.3);
    animation: gold-glow 3s ease-in-out infinite;
}

@keyframes gold-glow {
    0%, 100% {
        text-shadow:
            0 0 10px rgba(228, 197, 107, 0.6),
            0 0 20px rgba(228, 197, 107, 0.3);
    }
    50% {
        text-shadow:
            0 0 15px rgba(228, 197, 107, 0.9),
            0 0 35px rgba(228, 197, 107, 0.5),
            0 0 50px rgba(228, 197, 107, 0.2);
    }
}

.welcome-separator {
    color: var(--color-gold);
    font-size: 1.4rem;
    opacity: 0.6;
    flex-shrink: 0;
    animation: rotate-slow 20s linear infinite;
}

@keyframes rotate-slow {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ==========================================================================
   2. HERO PREMIUM - cadres lumineux + particules dorées
   ========================================================================== */

.hero-premium {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 30% 30%, rgba(91, 26, 26, 0.4) 0%, transparent 55%),
        radial-gradient(ellipse at 70% 70%, rgba(91, 26, 26, 0.3) 0%, transparent 55%),
        linear-gradient(180deg, var(--color-ink-soft) 0%, var(--color-ink) 50%, #0f0a08 100%);
    isolation: isolate;
}

/* Texture de velours animée */
.hero-premium::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 20% 20%, rgba(228, 197, 107, 0.06) 0%, transparent 25%),
        radial-gradient(circle at 80% 60%, rgba(228, 197, 107, 0.04) 0%, transparent 30%),
        radial-gradient(circle at 50% 80%, rgba(176, 141, 58, 0.05) 0%, transparent 25%);
    animation: velvet-shift 25s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes velvet-shift {
    0%   { transform: scale(1) rotate(0deg); opacity: 1; }
    100% { transform: scale(1.1) rotate(1deg); opacity: 0.8; }
}

/* Rayons de projecteur animés */
.hero-premium::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        conic-gradient(from 180deg at 50% 0%,
            transparent 0deg,
            rgba(228, 197, 107, 0.025) 30deg,
            rgba(228, 197, 107, 0.06) 40deg,
            rgba(228, 197, 107, 0.025) 50deg,
            transparent 80deg,
            transparent 280deg,
            rgba(228, 197, 107, 0.025) 310deg,
            rgba(228, 197, 107, 0.06) 320deg,
            rgba(228, 197, 107, 0.025) 330deg,
            transparent 360deg);
    animation: spotlight-sweep 12s ease-in-out infinite alternate;
    pointer-events: none;
    mix-blend-mode: screen;
}

@keyframes spotlight-sweep {
    0%   { transform: rotate(-5deg) scale(1); opacity: 0.7; }
    50%  { opacity: 1; }
    100% { transform: rotate(5deg) scale(1.05); opacity: 0.7; }
}

/* Particules dorées flottantes */
.hero-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.hero-particle {
    position: absolute;
    width: 2px;
    height: 2px;
    background: var(--color-gold-bright);
    border-radius: 50%;
    box-shadow:
        0 0 6px var(--color-gold-bright),
        0 0 12px rgba(228, 197, 107, 0.4);
    opacity: 0;
    animation: float-particle var(--duration, 15s) linear infinite;
    animation-delay: var(--delay, 0s);
}

@keyframes float-particle {
    0% {
        transform: translateY(100vh) translateX(0);
        opacity: 0;
    }
    10% { opacity: 0.6; }
    50% {
        transform: translateY(40vh) translateX(var(--drift, 30px));
        opacity: 1;
    }
    90% { opacity: 0.3; }
    100% {
        transform: translateY(-10vh) translateX(calc(var(--drift, 30px) * 2));
        opacity: 0;
    }
}

/* Cadre lumineux art-déco */
.hero-frame {
    position: absolute;
    inset: 3rem;
    border: 1px solid rgba(201, 169, 97, 0.25);
    pointer-events: none;
    z-index: 2;
}

.hero-frame::before,
.hero-frame::after {
    content: '';
    position: absolute;
    width: 40px;
    height: 40px;
    border: 2px solid var(--color-gold-bright);
    animation: corner-pulse 4s ease-in-out infinite;
}

.hero-frame::before {
    top: -3px;
    left: -3px;
    border-right: none;
    border-bottom: none;
    box-shadow: -2px -2px 20px rgba(228, 197, 107, 0.4);
}

.hero-frame::after {
    bottom: -3px;
    right: -3px;
    border-left: none;
    border-top: none;
    box-shadow: 2px 2px 20px rgba(228, 197, 107, 0.4);
    animation-delay: -2s;
}

@keyframes corner-pulse {
    0%, 100% {
        box-shadow: 0 0 15px rgba(228, 197, 107, 0.3);
        border-color: rgba(228, 197, 107, 0.7);
    }
    50% {
        box-shadow: 0 0 30px rgba(228, 197, 107, 0.7), 0 0 50px rgba(228, 197, 107, 0.3);
        border-color: var(--color-gold-bright);
    }
}

/* Coins additionnels sur le second cadre */
.hero-frame-inner {
    position: absolute;
    inset: 5rem;
    pointer-events: none;
    z-index: 2;
}

.hero-frame-inner::before,
.hero-frame-inner::after {
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    border: 1px solid var(--color-gold);
    animation: corner-pulse 4s ease-in-out infinite;
    animation-delay: -1s;
}

.hero-frame-inner::before {
    top: 0;
    right: 0;
    border-left: none;
    border-bottom: none;
}

.hero-frame-inner::after {
    bottom: 0;
    left: 0;
    border-right: none;
    border-top: none;
    animation-delay: -3s;
}

/* Contenu hero surélévé */
.hero-premium .hero-content {
    position: relative;
    z-index: 5;
    text-align: center;
    padding: 2rem;
    max-width: 900px;
}

.hero-eyebrow-premium {
    display: inline-block;
    font-family: var(--font-italic);
    font-style: normal;
    font-size: 0.95rem;
    letter-spacing: 0.5em;
    text-transform: uppercase;
    color: var(--color-gold-bright);
    margin-bottom: 2.5rem;
    padding: 0.6rem 2rem;
    border-top: 1px solid rgba(201, 169, 97, 0.4);
    border-bottom: 1px solid rgba(201, 169, 97, 0.4);
    position: relative;
    text-shadow: 0 0 20px rgba(228, 197, 107, 0.4);
}

.hero-eyebrow-premium::before,
.hero-eyebrow-premium::after {
    content: '❖';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-gold);
    font-size: 0.8rem;
    opacity: 0.7;
}
.hero-eyebrow-premium::before { left: 0.4rem; }
.hero-eyebrow-premium::after  { right: 0.4rem; }

.hero-title-premium {
    font-family: var(--font-display), serif;
    font-size: clamp(5rem, 16vw, 14rem);
    line-height: 0.85;
    letter-spacing: 0.02em;
    margin-bottom: 2rem;
    position: relative;
    display: inline-block;
}

.hero-title-premium .firstname {
    display: block;
    color: var(--color-ivory);
    text-shadow:
        0 0 30px rgba(244, 234, 213, 0.3),
        0 4px 20px rgba(0, 0, 0, 0.8);
    animation: fade-reveal 2s var(--ease-elegant) both;
}

.hero-title-premium .lastname {
    display: block;
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 700;
    background: linear-gradient(180deg,
        #f7dd8a 0%,
        #e4c56b 25%,
        #c9a961 50%,
        #a8862f 75%,
        #8b7331 100%);
    background-size: 100% 200%;
    background-position: 0% 0%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation:
        fade-reveal 2s var(--ease-elegant) 0.3s both,
        gold-flow 8s ease-in-out infinite;
    filter: drop-shadow(0 4px 20px rgba(228, 197, 107, 0.35))
            drop-shadow(0 0 40px rgba(228, 197, 107, 0.2));
    letter-spacing: -0.02em;
    margin-top: -0.1em;
}

@keyframes fade-reveal {
    0%   { opacity: 0; transform: translateY(30px); filter: blur(10px); }
    100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes gold-flow {
    0%, 100% { background-position: 0% 0%; }
    50%      { background-position: 0% 100%; }
}

.hero-dates-premium {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 2.5rem;
    font-family: var(--font-italic);
    font-size: 1.3rem;
    letter-spacing: 0.3em;
    color: var(--color-gold);
    animation: fade-reveal 2s var(--ease-elegant) 0.8s both;
}

.hero-dates-premium .hero-dash {
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg,
        transparent,
        var(--color-gold-bright),
        transparent);
    position: relative;
}

.hero-dates-premium .hero-dash::after {
    content: '◆';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--color-gold-bright);
    font-size: 0.8rem;
    text-shadow: 0 0 10px rgba(228, 197, 107, 0.8);
}

.hero-subtitle-premium {
    font-family: var(--font-italic);
    font-style: italic;
    font-size: clamp(1.3rem, 2.5vw, 1.8rem);
    line-height: 1.5;
    color: var(--color-cream);
    margin-bottom: 3.5rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    animation: fade-reveal 2s var(--ease-elegant) 1.2s both;
}

.hero-subtitle-premium strong {
    color: var(--color-gold-bright);
    font-weight: normal;
    font-style: normal;
    font-family: var(--font-display);
    font-size: 0.85em;
    letter-spacing: 0.15em;
    display: block;
    margin-top: 0.5rem;
    text-shadow: 0 0 20px rgba(228, 197, 107, 0.4);
}

.hero-actions-premium {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
    animation: fade-reveal 2s var(--ease-elegant) 1.6s both;
}

/* Boutons premium avec effet lumineux */
.btn-premium {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1.1rem 3rem;
    font-family: var(--font-display);
    font-size: 0.85rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-ink);
    background: linear-gradient(180deg,
        var(--color-gold-bright) 0%,
        var(--color-gold) 50%,
        var(--color-brass) 100%);
    border: none;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.4s var(--ease-elegant);
    box-shadow:
        0 10px 30px rgba(201, 169, 97, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

.btn-premium::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent);
    transform: translateX(-100%);
    transition: transform 0.8s var(--ease-elegant);
}

.btn-premium:hover {
    transform: translateY(-3px);
    box-shadow:
        0 20px 50px rgba(228, 197, 107, 0.5),
        0 0 60px rgba(228, 197, 107, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

.btn-premium:hover::before {
    transform: translateX(100%);
}

.btn-premium-outline {
    background: transparent;
    color: var(--color-gold-bright);
    border: 1px solid var(--color-gold);
    box-shadow:
        0 0 20px rgba(201, 169, 97, 0.15),
        inset 0 0 20px rgba(201, 169, 97, 0.05);
}

.btn-premium-outline:hover {
    background: rgba(201, 169, 97, 0.08);
    color: var(--color-gold-bright);
    border-color: var(--color-gold-bright);
    box-shadow:
        0 0 30px rgba(228, 197, 107, 0.3),
        inset 0 0 30px rgba(228, 197, 107, 0.1);
}

/* Indicateur de scroll lumineux */
.scroll-indicator {
    position: absolute;
    bottom: 4rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    color: var(--color-gold);
    font-family: var(--font-italic);
    font-size: 0.85rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    text-align: center;
    animation: bounce-slow 2.5s ease-in-out infinite;
    opacity: 0.75;
}

.scroll-indicator::after {
    content: '';
    display: block;
    width: 1px;
    height: 40px;
    background: linear-gradient(180deg,
        var(--color-gold-bright),
        transparent);
    margin: 0.8rem auto 0;
    box-shadow: 0 0 10px rgba(228, 197, 107, 0.4);
}

@keyframes bounce-slow {
    0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.5; }
    50%      { transform: translateX(-50%) translateY(10px); opacity: 1; }
}

/* ==========================================================================
   3. PLAYER AUDIO PREMIUM - avec encadrement lumineux
   ========================================================================== */

.premium-player {
    position: relative;
    max-width: 680px;
    margin: 1.5rem 0;
    padding: 1.5rem;
    background:
        linear-gradient(145deg,
            rgba(40, 28, 18, 0.9) 0%,
            rgba(15, 10, 7, 0.95) 100%);
    border: 1px solid rgba(201, 169, 97, 0.3);
    border-radius: 4px;
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.6),
        0 0 40px rgba(201, 169, 97, 0.08),
        inset 0 1px 0 rgba(228, 197, 107, 0.1);
    overflow: hidden;
    transition: all 0.4s var(--ease-elegant);
}

.premium-player::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        var(--color-gold-bright),
        transparent);
    transition: left 1.5s var(--ease-elegant);
}

.premium-player:hover::before {
    left: 100%;
}

.premium-player:hover {
    border-color: var(--color-gold);
    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.7),
        0 0 80px rgba(228, 197, 107, 0.25),
        inset 0 1px 0 rgba(228, 197, 107, 0.2);
    transform: translateY(-2px);
}

/* Liseré lumineux animé quand en lecture */
.premium-player.playing {
    border-color: var(--color-gold-bright);
    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.7),
        0 0 60px rgba(228, 197, 107, 0.35),
        0 0 120px rgba(228, 197, 107, 0.15),
        inset 0 1px 0 rgba(228, 197, 107, 0.3);
    animation: player-pulse 3s ease-in-out infinite;
}

@keyframes player-pulse {
    0%, 100% {
        box-shadow:
            0 25px 60px rgba(0, 0, 0, 0.7),
            0 0 60px rgba(228, 197, 107, 0.35),
            0 0 120px rgba(228, 197, 107, 0.15);
    }
    50% {
        box-shadow:
            0 25px 60px rgba(0, 0, 0, 0.7),
            0 0 80px rgba(228, 197, 107, 0.5),
            0 0 160px rgba(228, 197, 107, 0.25);
    }
}

.premium-player-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.premium-player-title {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.1rem;
    color: var(--color-gold-bright);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.premium-player-author {
    font-family: var(--font-italic);
    font-style: italic;
    font-size: 0.9rem;
    color: var(--color-gold);
    opacity: 0.85;
    flex-shrink: 0;
}

.premium-player-body {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

/* Bouton play/pause premium */
.premium-play-btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid var(--color-gold);
    background:
        radial-gradient(circle at 30% 30%,
            var(--color-gold-bright) 0%,
            var(--color-gold) 50%,
            var(--color-brass) 100%);
    color: var(--color-ink);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s var(--ease-elegant);
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(201, 169, 97, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    position: relative;
}

.premium-play-btn::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1px solid rgba(201, 169, 97, 0.3);
    opacity: 0;
    transition: opacity 0.3s;
}

.premium-play-btn:hover {
    transform: scale(1.08);
    box-shadow:
        0 10px 30px rgba(228, 197, 107, 0.5),
        0 0 40px rgba(228, 197, 107, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.premium-play-btn:hover::before {
    opacity: 1;
    animation: ring-expand 1.5s ease-out infinite;
}

@keyframes ring-expand {
    0%   { inset: -4px; opacity: 0.8; }
    100% { inset: -20px; opacity: 0; }
}

.premium-play-btn svg {
    width: 22px;
    height: 22px;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
}

.premium-play-btn.playing svg.play-icon { display: none; }
.premium-play-btn:not(.playing) svg.pause-icon { display: none; }

/* Barre de progression */
.premium-progress-wrap {
    flex: 1;
    min-width: 0;
}

.premium-progress-bar {
    position: relative;
    height: 6px;
    background: rgba(201, 169, 97, 0.12);
    border-radius: 3px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

.premium-progress-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg,
        var(--color-gold) 0%,
        var(--color-gold-bright) 50%,
        var(--color-gold) 100%);
    background-size: 200% 100%;
    animation: gold-progress-flow 2s linear infinite;
    box-shadow: 0 0 10px rgba(228, 197, 107, 0.6);
    transition: width 0.1s linear;
    border-radius: 3px;
}

@keyframes gold-progress-flow {
    0%   { background-position: 0% 0; }
    100% { background-position: 200% 0; }
}

.premium-progress-thumb {
    position: absolute;
    top: 50%;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-gold-bright);
    box-shadow:
        0 0 8px rgba(228, 197, 107, 0.8),
        0 0 16px rgba(228, 197, 107, 0.4);
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.premium-player:hover .premium-progress-thumb,
.premium-player.playing .premium-progress-thumb {
    opacity: 1;
}

.premium-time {
    display: flex;
    justify-content: space-between;
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
    color: var(--color-gold);
    opacity: 0.7;
    margin-top: 0.4rem;
    letter-spacing: 0.05em;
}

/* Visualiseur d'ondes (barres animées) */
.premium-visualizer {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 24px;
    flex-shrink: 0;
    margin-right: 0.5rem;
}

.premium-visualizer span {
    display: block;
    width: 3px;
    background: linear-gradient(180deg,
        var(--color-gold-bright),
        var(--color-brass));
    border-radius: 2px;
    box-shadow: 0 0 4px rgba(228, 197, 107, 0.5);
    height: 20%;
    opacity: 0.3;
    transition: all 0.2s;
}

.premium-player.playing .premium-visualizer span {
    animation: viz-dance 0.8s ease-in-out infinite;
    opacity: 1;
}

.premium-player.playing .premium-visualizer span:nth-child(1) { animation-delay: 0s;    height: 60%; }
.premium-player.playing .premium-visualizer span:nth-child(2) { animation-delay: 0.1s;  height: 85%; }
.premium-player.playing .premium-visualizer span:nth-child(3) { animation-delay: 0.2s;  height: 50%; }
.premium-player.playing .premium-visualizer span:nth-child(4) { animation-delay: 0.05s; height: 75%; }
.premium-player.playing .premium-visualizer span:nth-child(5) { animation-delay: 0.15s; height: 90%; }

@keyframes viz-dance {
    0%, 100% { transform: scaleY(0.5); }
    50%      { transform: scaleY(1); }
}

/* ==========================================================================
   4. PRESSE LUXE - Carte lightable avec ouverture PDF
   ========================================================================== */

.presse-luxe {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2rem;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

.presse-luxe-card {
    background: linear-gradient(145deg,
        rgba(30, 20, 12, 0.85) 0%,
        rgba(15, 10, 6, 0.95) 100%);
    border: 1px solid rgba(201, 169, 97, 0.25);
    border-radius: 3px;
    padding: 1.8rem;
    position: relative;
    overflow: hidden;
    transition: all 0.4s var(--ease-elegant);
    cursor: pointer;
}

.presse-luxe-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent,
        var(--color-gold-bright),
        transparent);
    transform: translateX(-100%);
    transition: transform 0.6s var(--ease-elegant);
}

.presse-luxe-card:hover::before {
    transform: translateX(100%);
}

.presse-luxe-card:hover {
    border-color: var(--color-gold);
    transform: translateY(-5px);
    box-shadow:
        0 25px 50px rgba(0, 0, 0, 0.7),
        0 0 60px rgba(228, 197, 107, 0.2);
}

.presse-luxe-date {
    display: inline-block;
    font-family: var(--font-italic);
    font-style: italic;
    font-size: 0.85rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--color-gold);
    margin-bottom: 0.8rem;
    padding: 0.3rem 0.9rem;
    border: 1px solid rgba(201, 169, 97, 0.3);
    border-radius: 2px;
    background: rgba(201, 169, 97, 0.06);
}

.presse-luxe-title {
    font-family: var(--font-serif);
    font-size: 1.4rem;
    color: var(--color-gold-bright);
    margin-bottom: 0.8rem;
    line-height: 1.3;
    font-weight: 600;
}

.presse-luxe-desc {
    color: var(--color-cream);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    opacity: 0.9;
}

.presse-luxe-thumbs {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.presse-luxe-thumb {
    position: relative;
    width: 85px;
    height: 110px;
    border: 1px solid var(--color-brass);
    border-radius: 2px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
    transition: all 0.3s;
    flex-shrink: 0;
}

.presse-luxe-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        transparent 60%,
        rgba(0, 0, 0, 0.8));
    opacity: 0;
    transition: opacity 0.3s;
}

.presse-luxe-thumb:hover {
    transform: translateY(-4px) rotate(-1deg);
    box-shadow:
        0 15px 30px rgba(228, 197, 107, 0.25),
        0 0 0 1px var(--color-gold);
    border-color: var(--color-gold-bright);
}

.presse-luxe-thumb:hover::after {
    opacity: 1;
}

.presse-luxe-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.presse-luxe-thumb-icon {
    position: absolute;
    bottom: 4px;
    right: 4px;
    color: var(--color-gold-bright);
    font-size: 0.75rem;
    font-family: var(--font-italic);
    background: rgba(10, 7, 5, 0.85);
    padding: 0.15rem 0.5rem;
    border-radius: 2px;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 2;
    letter-spacing: 0.05em;
}

.presse-luxe-thumb:hover .presse-luxe-thumb-icon {
    opacity: 1;
}

.presse-luxe-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-italic);
    font-size: 0.9rem;
    color: var(--color-gold);
    letter-spacing: 0.1em;
    padding-top: 1rem;
    border-top: 1px solid rgba(201, 169, 97, 0.15);
    width: 100%;
}

/* ==========================================================================
   5. PDF VIEWER MODAL (lightbox)
   ========================================================================== */

.pdf-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(10, 7, 5, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 2rem;
    opacity: 0;
    transition: opacity 0.4s var(--ease-elegant);
}

.pdf-modal.open {
    display: flex;
    opacity: 1;
}

.pdf-modal-overlay {
    position: absolute;
    inset: 0;
    cursor: pointer;
}

.pdf-modal-content {
    position: relative;
    width: 100%;
    max-width: 1100px;
    height: 90vh;
    background: var(--color-ink);
    border: 1px solid var(--color-gold);
    border-radius: 4px;
    overflow: hidden;
    box-shadow:
        0 50px 100px rgba(0, 0, 0, 0.8),
        0 0 80px rgba(228, 197, 107, 0.2);
    display: flex;
    flex-direction: column;
    transform: scale(0.95);
    animation: modal-appear 0.5s var(--ease-elegant) forwards;
}

@keyframes modal-appear {
    to { transform: scale(1); }
}

.pdf-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    background: linear-gradient(180deg,
        rgba(30, 20, 12, 0.95),
        rgba(15, 10, 6, 0.95));
    border-bottom: 1px solid rgba(201, 169, 97, 0.25);
    flex-shrink: 0;
    gap: 1rem;
}

.pdf-modal-title {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    color: var(--color-gold-bright);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.pdf-modal-actions {
    display: flex;
    gap: 0.8rem;
    align-items: center;
    flex-shrink: 0;
}

.pdf-modal-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: transparent;
    color: var(--color-gold);
    border: 1px solid var(--color-brass);
    border-radius: 2px;
    font-family: var(--font-italic);
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s;
}

.pdf-modal-btn:hover {
    background: rgba(201, 169, 97, 0.1);
    color: var(--color-gold-bright);
    border-color: var(--color-gold);
    box-shadow: 0 0 20px rgba(228, 197, 107, 0.2);
}

.pdf-modal-close {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--color-brass);
    color: var(--color-gold);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    font-size: 1.3rem;
    line-height: 1;
    flex-shrink: 0;
}

.pdf-modal-close:hover {
    background: rgba(228, 197, 107, 0.1);
    border-color: var(--color-gold-bright);
    color: var(--color-gold-bright);
    transform: rotate(90deg);
    box-shadow: 0 0 20px rgba(228, 197, 107, 0.3);
}

.pdf-modal-body {
    flex: 1;
    overflow: hidden;
    background: #2a2119;
    position: relative;
}

.pdf-modal-iframe {
    width: 100%;
    height: 100%;
    border: none;
    background: white;
}

.pdf-modal-loader {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--color-ink);
    color: var(--color-gold);
    font-family: var(--font-italic);
    font-style: italic;
    font-size: 1rem;
    letter-spacing: 0.1em;
    gap: 1.5rem;
}

.pdf-modal-loader::before {
    content: '';
    width: 50px;
    height: 50px;
    border: 2px solid rgba(201, 169, 97, 0.2);
    border-top-color: var(--color-gold-bright);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    box-shadow: 0 0 20px rgba(228, 197, 107, 0.3);
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.pdf-modal-body.loaded .pdf-modal-loader {
    display: none;
}

/* ==========================================================================
   6. EXTRAITS LUXE - remplace extraits-legacy, plus premium
   ========================================================================== */

.extraits-luxe {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.extrait-luxe-card {
    position: relative;
    background: linear-gradient(135deg,
        rgba(91, 26, 26, 0.15) 0%,
        rgba(30, 20, 12, 0.7) 50%,
        rgba(10, 7, 5, 0.9) 100%);
    border: 1px solid rgba(201, 169, 97, 0.25);
    border-radius: 4px;
    padding: 2.5rem;
    margin-bottom: 2.5rem;
    overflow: hidden;
    transition: all 0.5s var(--ease-elegant);
}

.extrait-luxe-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg,
        var(--color-gold-bright),
        var(--color-brass));
    box-shadow: 0 0 20px rgba(228, 197, 107, 0.4);
}

.extrait-luxe-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        var(--color-gold-bright),
        transparent);
    transition: left 1.2s var(--ease-elegant);
}

.extrait-luxe-card:hover::after {
    left: 100%;
}

.extrait-luxe-card:hover {
    border-color: var(--color-gold);
    transform: translateY(-3px);
    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.7),
        0 0 80px rgba(228, 197, 107, 0.15);
}

.extrait-luxe-header {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.extrait-luxe-cover {
    width: 200px;
    height: 200px;
    flex-shrink: 0;
    border: 2px solid var(--color-brass);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(228, 197, 107, 0.2);
    background: linear-gradient(135deg, var(--color-burgundy), var(--color-ink));
    transition: all 0.4s;
}

.extrait-luxe-cover::before {
    content: '';
    position: absolute;
    top: 10%;
    right: 10%;
    width: 30%;
    height: 30%;
    background: radial-gradient(circle,
        rgba(255, 255, 255, 0.15) 0%,
        transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    transition: all 0.4s;
}

.extrait-luxe-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.extrait-luxe-cover-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gold);
    font-family: var(--font-display);
    font-size: 2.5rem;
    letter-spacing: 0.1em;
    background: linear-gradient(135deg, var(--color-burgundy) 0%, var(--color-ink) 100%);
}

.extrait-luxe-card:hover .extrait-luxe-cover {
    transform: scale(1.03);
    border-color: var(--color-gold-bright);
    box-shadow:
        0 20px 50px rgba(228, 197, 107, 0.25),
        0 0 0 1px var(--color-gold);
}

.extrait-luxe-info {
    flex: 1;
    min-width: 280px;
}

.extrait-luxe-year {
    display: inline-block;
    font-family: var(--font-italic);
    font-size: 0.9rem;
    letter-spacing: 0.25em;
    color: var(--color-gold);
    margin-bottom: 0.5rem;
    padding: 0.25rem 1rem;
    border: 1px solid rgba(201, 169, 97, 0.3);
    border-radius: 2px;
    background: rgba(201, 169, 97, 0.05);
}

.extrait-luxe-title {
    font-family: var(--font-serif);
    font-size: clamp(1.4rem, 2.5vw, 1.9rem);
    color: var(--color-gold-bright);
    line-height: 1.3;
    margin-bottom: 1rem;
    font-weight: 600;
}

.extrait-luxe-musicians {
    color: var(--color-cream);
    font-size: 0.95rem;
    line-height: 1.6;
    opacity: 0.9;
    margin-bottom: 0.8rem;
}

.extrait-luxe-note {
    font-family: var(--font-italic);
    font-style: italic;
    color: var(--color-gold);
    font-size: 0.95rem;
    opacity: 0.85;
    margin-top: 0.5rem;
}

.extrait-luxe-tracks {
    margin-top: 1rem;
}

/* ==========================================================================
   7. DISCOGRAPHIE LUXE - rehausser la legacy
   ========================================================================== */

.discographie-legacy > article {
    background: linear-gradient(145deg,
        rgba(30, 20, 12, 0.85) 0%,
        rgba(15, 10, 6, 0.95) 100%) !important;
    overflow: hidden;
}

.discographie-legacy > article::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        var(--color-gold-bright),
        transparent);
    transition: left 1.2s var(--ease-elegant);
}

.discographie-legacy > article:hover::after {
    left: 100%;
}

.discographie-legacy > article:hover {
    box-shadow:
        0 25px 50px rgba(0, 0, 0, 0.7),
        0 0 60px rgba(228, 197, 107, 0.15) !important;
}

/* ==========================================================================
   8. RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
    .hero-frame { inset: 1.5rem; }
    .hero-frame-inner { inset: 3rem; }
    .welcome-item { font-size: 0.9rem; }
    .premium-player { padding: 1.2rem; }
    .premium-play-btn { width: 46px; height: 46px; }
    .extrait-luxe-header { flex-direction: column; }
    .extrait-luxe-cover { width: 100%; height: auto; aspect-ratio: 1; }
    .pdf-modal { padding: 0.5rem; }
    .pdf-modal-content { height: 95vh; }
    .pdf-modal-header { flex-wrap: wrap; padding: 0.8rem; }
    .pdf-modal-title { width: 100%; order: 1; margin-bottom: 0.5rem; }
    .pdf-modal-actions { order: 2; margin-left: auto; }
}

@media (max-width: 480px) {
    .presse-luxe { grid-template-columns: 1fr; padding: 0 1rem; }
    .hero-title-premium { font-size: clamp(4rem, 22vw, 8rem); }
    .hero-actions-premium { flex-direction: column; align-items: stretch; }
    .btn-premium { width: 100%; }
    .welcome-item { font-size: 0.8rem; gap: 0.8rem; }
    .welcome-separator { font-size: 1rem; }
}

/* ==========================================================================
   9. AJUSTEMENTS HEADER + BANNIÈRE
   La bannière défilante doit cohabiter avec le header fixe.
   Solution : bannière fixe en haut, header fixe en-dessous.
   ========================================================================== */

.welcome-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 110;
}

.site-header {
    top: 48px !important; /* Laisse la place à la bannière (hauteur ~48px) */
}

/* Compensation du main pour ne pas être caché derrière bannière + header */
main#main {
    padding-top: 0; /* La hero/page-banner gère son propre espacement */
}

/* Sur petits écrans, la bannière reste visible mais plus fine */
@media (max-width: 768px) {
    .welcome-banner {
        padding: 0.65rem 0;
    }
    .welcome-item {
        font-size: 0.8rem;
    }
    .site-header {
        top: 42px !important;
    }
}

@media (max-width: 480px) {
    .site-header {
        top: 38px !important;
    }
}

/* ==========================================================================
   10. LOGO 3D DORÉ - animé, luxueux
   ========================================================================== */

.brand-logo-3d {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    transition: transform 0.4s var(--ease-elegant);
}

.brand-logo-3d:hover {
    transform: scale(1.02);
}

.logo-3d-wrap {
    position: relative;
    width: 58px;
    height: 58px;
    flex-shrink: 0;
    perspective: 800px;
}

.logo-3d-wrap .gd-logo-3d {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s var(--ease-elegant);
    will-change: transform;
    animation: logo-float 6s ease-in-out infinite;
}

.brand-logo-3d:hover .gd-logo-3d {
    transform: rotateY(180deg);
}

@keyframes logo-float {
    0%, 100% {
        transform: rotateY(-6deg) rotateX(3deg) translateZ(0);
    }
    50% {
        transform: rotateY(6deg) rotateX(-3deg) translateZ(5px);
    }
}

/* Halo lumineux animé autour du logo */
.logo-halo {
    animation: halo-pulse 4s ease-in-out infinite;
    transform-origin: center;
}

@keyframes halo-pulse {
    0%, 100% { opacity: 0.5; transform: scale(0.9); }
    50%      { opacity: 1;   transform: scale(1.1); }
}

/* Ornements aux pointes pulsent */
.logo-ornament circle {
    animation: ornament-twinkle 3s ease-in-out infinite;
    transform-origin: center;
    transform-box: fill-box;
}
.logo-ornament:nth-child(odd) circle { animation-delay: 0s; }
.logo-ornament:nth-child(even) circle { animation-delay: 1.5s; }

@keyframes ornament-twinkle {
    0%, 100% {
        opacity: 0.6;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.4);
    }
}

/* Reflet lumineux qui balaie le logo */
.logo-sweep {
    animation: logo-sweep 5s ease-in-out infinite;
    transform-origin: center;
}

@keyframes logo-sweep {
    0%, 100% { opacity: 0; transform: translateX(-100%) translateY(-100%); }
    40%      { opacity: 0; }
    50%      { opacity: 0.6; }
    60%      { opacity: 0; }
    100%     { transform: translateX(100%) translateY(100%); }
}

/* Texte de la marque à côté du logo */
.brand-text-3d {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.brand-text-3d .name {
    font-family: var(--font-display);
    font-size: 1.3rem;
    letter-spacing: 0.1em;
    color: var(--color-gold-bright);
    text-transform: uppercase;
    text-shadow: 0 0 15px rgba(228, 197, 107, 0.3);
}

.brand-text-3d .subtitle {
    font-family: var(--font-italic);
    font-style: italic;
    font-size: 0.72rem;
    letter-spacing: 0.3em;
    color: var(--color-gold);
    opacity: 0.85;
    margin-top: 0.2rem;
    text-transform: uppercase;
}

/* Version compacte sur mobile : juste le logo */
@media (max-width: 640px) {
    .logo-3d-wrap {
        width: 46px;
        height: 46px;
    }
    .brand-text-3d .name {
        font-size: 1.05rem;
    }
    .brand-text-3d .subtitle {
        font-size: 0.65rem;
        letter-spacing: 0.2em;
    }
}

@media (max-width: 480px) {
    .brand-text-3d .subtitle {
        display: none;
    }
}

/* ==========================================================================
   11. SWITCH LANGUE FR/EN
   ========================================================================== */

.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: 1.5rem;
    background: rgba(201, 169, 97, 0.08);
    border: 1px solid rgba(201, 169, 97, 0.25);
    border-radius: 2px;
    padding: 0.2rem;
    position: relative;
}

.lang-switch a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.7rem;
    font-family: var(--font-display);
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    color: var(--color-gold);
    text-decoration: none;
    border-radius: 1px;
    transition: all 0.3s;
    position: relative;
    z-index: 1;
}

.lang-switch a.active {
    color: var(--color-ink);
    background: linear-gradient(180deg,
        var(--color-gold-bright),
        var(--color-gold));
    box-shadow:
        0 2px 8px rgba(201, 169, 97, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    pointer-events: none;
}

.lang-switch a:not(.active):hover {
    color: var(--color-gold-bright);
    background: rgba(201, 169, 97, 0.12);
}

@media (max-width: 768px) {
    .lang-switch {
        margin-left: auto;
        margin-right: 0.5rem;
    }
    .lang-switch a {
        padding: 0.3rem 0.55rem;
        font-size: 0.7rem;
    }
}

/* ==========================================================================
   12. RESPONSIVE PREMIUM - ajustements finaux
   ========================================================================== */

/* Tablette */
@media (max-width: 1024px) {
    .hero-title-premium { font-size: clamp(4rem, 14vw, 10rem); }
    .hero-frame { inset: 2rem; }
    .hero-frame-inner { inset: 4rem; }
    .extrait-luxe-cover { width: 170px; height: 170px; }
}

/* Mobile large */
@media (max-width: 768px) {
    .hero-premium { min-height: 95vh; padding: 2rem 1rem; }
    .hero-content { padding: 1rem; }
    .hero-title-premium { font-size: clamp(3.5rem, 18vw, 7rem); line-height: 0.9; }
    .hero-dates-premium { gap: 1rem; font-size: 1rem; }
    .hero-dates-premium .hero-dash { width: 40px; }
    .hero-subtitle-premium { font-size: 1.1rem; }
    .hero-eyebrow-premium { font-size: 0.75rem; letter-spacing: 0.3em; padding: 0.5rem 1.5rem; }
    .scroll-indicator { bottom: 2rem; }

    .presse-luxe { grid-template-columns: 1fr; gap: 1.5rem; padding: 0 1rem; }
    .extrait-luxe-card { padding: 1.5rem; }
    .extrait-luxe-header { flex-direction: column; gap: 1.2rem; }
    .extrait-luxe-cover { width: 100%; height: 240px; }
    .extrait-luxe-info { min-width: 0; }

    .premium-player { padding: 1rem; }
    .premium-player-header { flex-wrap: wrap; gap: 0.5rem; }
    .premium-player-title { font-size: 0.95rem; }
    .premium-player-author { font-size: 0.8rem; width: 100%; order: 3; }

    .welcome-banner { padding: 0.55rem 0; }
    .welcome-item { font-size: 0.75rem; gap: 0.6rem; }
    .welcome-track { gap: 2.5rem; padding-right: 2.5rem; }
}

/* Mobile petit */
@media (max-width: 480px) {
    .hero-title-premium { font-size: clamp(3rem, 20vw, 5rem); }
    .hero-actions-premium { flex-direction: column; align-items: stretch; gap: 1rem; }
    .btn-premium { width: 100%; padding: 1rem 1.5rem; font-size: 0.8rem; letter-spacing: 0.25em; }

    .extrait-luxe-title { font-size: 1.2rem; }
    .presse-luxe-card { padding: 1.5rem; }
    .presse-luxe-title { font-size: 1.2rem; }

    .pdf-modal { padding: 0; }
    .pdf-modal-content { height: 100vh; border-radius: 0; }
    .pdf-modal-btn { padding: 0.4rem 0.6rem; font-size: 0.75rem; }

    .welcome-banner { padding: 0.5rem 0; }
    .welcome-item { font-size: 0.7rem; }
}

/* Très petit mobile */
@media (max-width: 360px) {
    .hero-title-premium { font-size: 3rem; }
    .hero-subtitle-premium { font-size: 0.95rem; }
    .extrait-luxe-cover { height: 200px; }
}

/* Très grands écrans */
@media (min-width: 1600px) {
    .container { max-width: 1500px; }
    .hero-title-premium { font-size: 16rem; }
}

/* ==========================================================================
   13. CORRECTIFS RESPONSIVE FINAUX
   ========================================================================== */

/* Header flex : logo à gauche, nav au milieu, switch langue + toggle à droite */
.header-inner {
    gap: 1rem;
}

/* Sur desktop large, nav prend la place restante */
@media (min-width: 901px) {
    .main-nav {
        flex: 1;
        justify-content: flex-end;
        gap: 1.2rem !important;
    }
    .main-nav a {
        font-size: 0.8rem !important;
        padding: 0.5rem 0.3rem !important;
    }
}

/* Tablette : écarter un peu */
@media (max-width: 1200px) and (min-width: 901px) {
    .brand-text-3d .subtitle { font-size: 0.6rem; }
    .main-nav a { font-size: 0.72rem !important; letter-spacing: 0.08em !important; }
    .lang-switch { margin-left: 0.8rem; }
}

/* Mobile : masquer le sous-titre, adapter tout */
@media (max-width: 900px) {
    .site-header { padding: 0.8rem 0; }

    .header-inner {
        gap: 0.5rem;
    }

    .brand-text-3d .subtitle {
        display: none;
    }

    .lang-switch {
        margin-left: auto;
        margin-right: 0.5rem;
    }

    /* Menu mobile : le switch langue est répété à l'intérieur */
    .main-nav {
        gap: 1.5rem !important;
    }

    .main-nav a {
        font-size: 1rem !important;
        text-align: center;
    }
}

/* Très petits écrans : simplifier le header */
@media (max-width: 480px) {
    .logo-3d-wrap { width: 42px; height: 42px; }
    .brand-text-3d .name { font-size: 0.95rem; }
    .brand-logo-3d { gap: 0.6rem; }
}

/* Très très petits : logo seul */
@media (max-width: 360px) {
    .brand-text-3d { display: none; }
    .lang-switch a { padding: 0.25rem 0.5rem; font-size: 0.65rem; }
}

/* Empêcher le scroll horizontal sur tous les appareils */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

/* Correction du positionnement avec bannière + header sur mobile */
@media (max-width: 480px) {
    .site-header {
        top: 36px !important;
    }
}

/* Ajustement pour très larges écrans */
@media (min-width: 1400px) {
    .header-inner {
        max-width: 1500px;
        padding: 0 3rem;
    }
}

/* Amélioration touch targets sur mobile (accessibilité) */
@media (max-width: 900px) {
    .lang-switch a,
    .main-nav a,
    .premium-play-btn,
    .btn-premium,
    .vib-ctrl {
        min-height: 44px;
        min-width: 44px;
    }
}

/* Vidéos responsive */
.video-frame iframe,
.video-frame video {
    aspect-ratio: 16/9;
    width: 100%;
    height: auto;
    max-width: 100%;
}

/* Images toujours responsive */
img, svg {
    max-width: 100%;
    height: auto;
}

/* Biography-legacy : éviter que les images imbriquées dépassent */
.biography-legacy img,
.discographie-legacy img,
.extraits-luxe img,
.presse-luxe img {
    max-width: 100%;
    height: auto;
}

/* Figures centrées sur mobile */
@media (max-width: 768px) {
    .biography-legacy figure {
        text-align: center;
    }
    .biography-legacy figure img {
        max-width: 90%;
    }
}

/* Table/ul discographie scroll horizontal si nécessaire */
.discographie-legacy ul li.row {
    min-width: 0;
}

@media (max-width: 480px) {
    .discographie-legacy ul li.row .columns.two {
        flex: 0 0 70px;
        font-size: 0.75rem;
    }
}

/* Support dark mode natif (déjà en dark mais on force le theme-color) */
@media (prefers-color-scheme: light) {
    /* Site reste en mode sombre luxueux */
}

/* Respect des préférences "reduce motion" */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .welcome-track { animation: none !important; }
    .logo-halo, .logo-sweep, .logo-ornament circle { animation: none !important; }
    .hero-particle { display: none !important; }
}

/* ==========================================================================
   14. PHOTOS PREMIUM — Encadrements lumineux luxueux
   Système d'encadrement en 3 couches :
   - Cadre extérieur doré fin animé
   - Cadre intérieur brass
   - Photo avec ombre interne, lumière dorée au survol
   ========================================================================== */

/* --- Classe utilitaire premium-frame pour toute figure --- */
.premium-frame,
figure.premium-frame {
    position: relative;
    display: inline-block;
    max-width: 100%;
    padding: 14px;
    background:
        linear-gradient(135deg, rgba(201, 169, 97, 0.08), rgba(0, 0, 0, 0.3));
    transition: all 0.5s var(--ease-elegant);
    isolation: isolate;
}

/* Cadre extérieur : trait doré fin avec lumière aux coins */
.premium-frame::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid rgba(201, 169, 97, 0.45);
    pointer-events: none;
    transition: all 0.5s var(--ease-elegant);
    z-index: 2;
}

/* Cadre intérieur brass — offset de quelques pixels */
.premium-frame::after {
    content: '';
    position: absolute;
    inset: 7px;
    border: 1px solid rgba(176, 141, 58, 0.6);
    pointer-events: none;
    transition: all 0.5s var(--ease-elegant);
    z-index: 2;
}

.premium-frame img,
.premium-frame video {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.7),
        inset 0 0 0 1px rgba(0, 0, 0, 0.5);
    transition: all 0.6s var(--ease-elegant);
    position: relative;
    z-index: 1;
}

/* Coins ornementaux : 4 petits carrés dorés aux coins du cadre externe */
.premium-frame-corners {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}

.premium-frame-corners::before,
.premium-frame-corners::after,
.premium-frame > .corner-tl,
.premium-frame > .corner-br {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    pointer-events: none;
    z-index: 3;
}

/* 4 coins dorés avec glow */
.premium-frame > .corner {
    position: absolute;
    width: 16px;
    height: 16px;
    z-index: 4;
    pointer-events: none;
}

.premium-frame > .corner::before,
.premium-frame > .corner::after {
    content: '';
    position: absolute;
    background: var(--color-gold-bright);
    box-shadow:
        0 0 8px rgba(228, 197, 107, 0.8),
        0 0 16px rgba(228, 197, 107, 0.4);
    transition: all 0.5s var(--ease-elegant);
}

.premium-frame > .corner::before {
    width: 16px;
    height: 1.5px;
}
.premium-frame > .corner::after {
    width: 1.5px;
    height: 16px;
}

.premium-frame > .corner.tl { top: 0;    left: 0; }
.premium-frame > .corner.tr { top: 0;    right: 0; }
.premium-frame > .corner.tr::after  { right: 0; }
.premium-frame > .corner.bl { bottom: 0; left: 0; }
.premium-frame > .corner.bl::before { bottom: 0; }
.premium-frame > .corner.br { bottom: 0; right: 0; }
.premium-frame > .corner.br::before { bottom: 0; }
.premium-frame > .corner.br::after  { right: 0; }

/* Balayage lumineux au survol */
.premium-frame > .sweep {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(115deg,
        transparent 30%,
        rgba(228, 197, 107, 0.2) 45%,
        rgba(255, 246, 216, 0.35) 50%,
        rgba(228, 197, 107, 0.2) 55%,
        transparent 70%);
    pointer-events: none;
    z-index: 5;
    transition: left 0.9s var(--ease-elegant);
    mix-blend-mode: screen;
}

/* HOVER : photo se soulève, cadres dorés s'illuminent */
.premium-frame:hover {
    transform: translateY(-4px);
}

.premium-frame:hover::before {
    border-color: var(--color-gold-bright);
    box-shadow:
        0 0 0 1px rgba(228, 197, 107, 0.3),
        0 0 40px rgba(228, 197, 107, 0.3);
}

.premium-frame:hover::after {
    border-color: var(--color-gold);
}

.premium-frame:hover img {
    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.8),
        0 0 50px rgba(228, 197, 107, 0.15),
        inset 0 0 0 1px rgba(0, 0, 0, 0.5);
}

.premium-frame:hover > .corner::before,
.premium-frame:hover > .corner::after {
    background: #fff6d8;
    box-shadow:
        0 0 15px rgba(255, 246, 216, 1),
        0 0 30px rgba(228, 197, 107, 0.8),
        0 0 50px rgba(228, 197, 107, 0.4);
}

.premium-frame:hover > .sweep {
    left: 100%;
}

/* Légende (figcaption) premium */
.premium-frame figcaption,
.premium-frame + figcaption,
figure.premium-frame figcaption {
    display: block;
    margin-top: 1.2rem;
    padding: 0.8rem 1rem;
    text-align: center;
    font-family: var(--font-italic);
    font-style: italic;
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    color: var(--color-gold);
    opacity: 0.92;
    line-height: 1.5;
    position: relative;
}

.premium-frame figcaption::before,
.premium-frame figcaption::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 30px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-gold));
    opacity: 0.5;
}

.premium-frame figcaption::before {
    left: 0;
    background: linear-gradient(90deg, transparent, var(--color-gold));
}

.premium-frame figcaption::after {
    right: 0;
    background: linear-gradient(90deg, var(--color-gold), transparent);
}

.premium-frame figcaption em {
    color: var(--color-gold-bright);
    font-style: italic;
}

/* --- Variante "portrait" (grand format, pour page d'accueil) --- */
.premium-frame-portrait {
    padding: 18px;
    background:
        radial-gradient(ellipse at top left, rgba(228, 197, 107, 0.08), rgba(0, 0, 0, 0.4)),
        linear-gradient(145deg, rgba(91, 26, 26, 0.15), rgba(10, 7, 5, 0.6));
}

.premium-frame-portrait::before {
    inset: 0;
    border: 1px solid rgba(201, 169, 97, 0.6);
}

.premium-frame-portrait::after {
    inset: 9px;
    border: 1px solid rgba(228, 197, 107, 0.3);
}

/* Motif angulaire ornemental aux 4 coins (art-déco) */
.premium-frame-portrait > .ornament-corner {
    position: absolute;
    width: 22px;
    height: 22px;
    pointer-events: none;
    z-index: 4;
    border: 1.5px solid var(--color-gold-bright);
    box-shadow: 0 0 10px rgba(228, 197, 107, 0.6);
}

.premium-frame-portrait > .ornament-corner.tl { top: 4px;    left: 4px;    border-right: none; border-bottom: none; }
.premium-frame-portrait > .ornament-corner.tr { top: 4px;    right: 4px;   border-left: none;  border-bottom: none; }
.premium-frame-portrait > .ornament-corner.bl { bottom: 4px; left: 4px;    border-right: none; border-top: none; }
.premium-frame-portrait > .ornament-corner.br { bottom: 4px; right: 4px;   border-left: none;  border-top: none; }

/* Halo doré derrière la photo portrait */
.premium-frame-portrait {
    filter: drop-shadow(0 25px 60px rgba(0, 0, 0, 0.8))
            drop-shadow(0 0 40px rgba(228, 197, 107, 0.1));
}

.premium-frame-portrait:hover {
    filter: drop-shadow(0 35px 80px rgba(0, 0, 0, 0.85))
            drop-shadow(0 0 60px rgba(228, 197, 107, 0.25));
}

.premium-frame-portrait:hover > .ornament-corner {
    border-color: #fff6d8;
    box-shadow: 0 0 20px rgba(255, 246, 216, 1), 0 0 40px rgba(228, 197, 107, 0.6);
}

/* --- Variante "tableau" (carré ou paysage, pour la galerie de timeline bio) --- */
.premium-frame-medium {
    padding: 10px;
}

.premium-frame-medium::after {
    inset: 5px;
}

.premium-frame-medium > .corner {
    width: 12px;
    height: 12px;
}

.premium-frame-medium > .corner::before { width: 12px; }
.premium-frame-medium > .corner::after  { height: 12px; }

/* --- Application automatique aux figures de la biographie --- */
.biography-legacy figure {
    position: relative;
    padding: 12px;
    margin: 2.5rem auto;
    background: linear-gradient(135deg, rgba(201, 169, 97, 0.08), rgba(0, 0, 0, 0.35));
    transition: all 0.5s var(--ease-elegant);
    max-width: 100%;
    overflow: visible;
    isolation: isolate;
}

.biography-legacy figure::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid rgba(201, 169, 97, 0.45);
    pointer-events: none;
    transition: all 0.5s var(--ease-elegant);
    z-index: 2;
}

.biography-legacy figure::after {
    content: '';
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(176, 141, 58, 0.5);
    pointer-events: none;
    transition: all 0.5s var(--ease-elegant);
    z-index: 2;
}

.biography-legacy figure img {
    display: block;
    width: 100%;
    height: auto;
    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.7),
        inset 0 0 0 1px rgba(0, 0, 0, 0.4);
    transition: all 0.6s var(--ease-elegant);
    border: none !important;
    margin: 0;
    position: relative;
    z-index: 1;
}

.biography-legacy figure:hover {
    transform: translateY(-4px);
}

.biography-legacy figure:hover::before {
    border-color: var(--color-gold-bright);
    box-shadow: 0 0 40px rgba(228, 197, 107, 0.25);
}

.biography-legacy figure:hover::after {
    border-color: var(--color-gold);
}

.biography-legacy figure:hover img {
    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.8),
        0 0 40px rgba(228, 197, 107, 0.15);
}

/* Figcaption premium pour biographie */
.biography-legacy figure figcaption {
    display: block;
    margin-top: 1rem;
    padding: 0.6rem 1rem 0.2rem;
    text-align: center;
    font-family: var(--font-italic);
    font-style: italic;
    font-size: 0.92rem;
    letter-spacing: 0.04em;
    color: var(--color-gold);
    opacity: 0.92;
    line-height: 1.5;
}

/* Figures en grille (plusieurs images côte à côte) */
.biography-legacy figure.row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    padding: 10px;
    background: linear-gradient(135deg, rgba(201, 169, 97, 0.06), rgba(0, 0, 0, 0.3));
}

.biography-legacy figure.row .columns {
    padding: 0;
    background: none;
}

.biography-legacy figure.row .columns img {
    width: 100%;
    height: auto;
    border: 1px solid rgba(201, 169, 97, 0.3);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
    transition: all 0.5s var(--ease-elegant);
}

.biography-legacy figure.row .columns img:hover {
    border-color: var(--color-gold-bright);
    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.7),
        0 0 25px rgba(228, 197, 107, 0.2);
    transform: scale(1.02);
}

.biography-legacy figure.row figcaption {
    width: 100%;
    text-align: center;
    padding-top: 1rem;
}

/* --- Application aux images de la page "introduction" d'accueil --- */
.home-intro figure {
    position: relative;
    padding: 16px;
    background:
        radial-gradient(ellipse at top left, rgba(228, 197, 107, 0.1), transparent 70%),
        linear-gradient(145deg, rgba(91, 26, 26, 0.15), rgba(10, 7, 5, 0.5));
    margin: 0;
    isolation: isolate;
    transition: all 0.5s var(--ease-elegant);
}

.home-intro figure::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid rgba(201, 169, 97, 0.6);
    z-index: 2;
    pointer-events: none;
    transition: all 0.5s var(--ease-elegant);
}

.home-intro figure::after {
    content: '';
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(228, 197, 107, 0.35);
    z-index: 2;
    pointer-events: none;
    transition: all 0.5s var(--ease-elegant);
}

.home-intro figure img {
    display: block;
    width: 100%;
    height: auto;
    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.8),
        inset 0 0 0 1px rgba(0, 0, 0, 0.5) !important;
    position: relative;
    z-index: 1;
    transition: all 0.6s var(--ease-elegant);
}

/* Coins ornementaux pour la photo d'accueil */
.home-intro figure > .ornament-corner {
    position: absolute;
    width: 22px;
    height: 22px;
    pointer-events: none;
    z-index: 4;
    border: 1.5px solid var(--color-gold-bright);
    box-shadow: 0 0 10px rgba(228, 197, 107, 0.6);
    transition: all 0.5s var(--ease-elegant);
}

.home-intro figure > .ornament-corner.tl { top: 4px;    left: 4px;    border-right: none; border-bottom: none; }
.home-intro figure > .ornament-corner.tr { top: 4px;    right: 4px;   border-left: none;  border-bottom: none; }
.home-intro figure > .ornament-corner.bl { bottom: 4px; left: 4px;    border-right: none; border-top: none; }
.home-intro figure > .ornament-corner.br { bottom: 4px; right: 4px;   border-left: none;  border-top: none; }

.home-intro figure:hover {
    transform: translateY(-5px);
}

.home-intro figure:hover::before {
    border-color: var(--color-gold-bright);
    box-shadow: 0 0 0 1px rgba(228, 197, 107, 0.3), 0 0 50px rgba(228, 197, 107, 0.3);
}

.home-intro figure:hover::after {
    border-color: var(--color-gold);
}

.home-intro figure:hover img {
    box-shadow:
        0 35px 80px rgba(0, 0, 0, 0.85),
        0 0 60px rgba(228, 197, 107, 0.2),
        inset 0 0 0 1px rgba(0, 0, 0, 0.5) !important;
}

.home-intro figure:hover > .ornament-corner {
    border-color: #fff6d8;
    box-shadow: 0 0 20px rgba(255, 246, 216, 1), 0 0 40px rgba(228, 197, 107, 0.6);
}

.home-intro figure figcaption {
    display: block;
    margin-top: 1.4rem !important;
    font-family: var(--font-italic);
    font-style: italic;
    color: var(--color-gold) !important;
    text-align: center;
    font-size: 1rem !important;
    letter-spacing: 0.08em;
    opacity: 0.95 !important;
    position: relative;
    padding: 0.5rem 3rem;
}

.home-intro figure figcaption::before,
.home-intro figure figcaption::after {
    content: '❖';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-gold-bright);
    font-size: 0.8rem;
    opacity: 0.7;
}
.home-intro figure figcaption::before { left: 0.5rem; }
.home-intro figure figcaption::after  { right: 0.5rem; }

/* Si l'image est absente, afficher un placeholder élégant */
.home-intro figure img.img-fallback,
.biography-legacy figure img.img-fallback {
    min-height: 400px;
    background:
        radial-gradient(ellipse at center, var(--color-burgundy) 0%, var(--color-ink) 70%),
        linear-gradient(135deg, var(--color-burgundy), var(--color-ink));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gold);
    font-family: var(--font-display);
    font-size: 4rem;
    letter-spacing: 0.1em;
}

/* --- Fade-in lent des photos au premier chargement --- */
.biography-legacy figure img,
.home-intro figure img,
.premium-frame img {
    animation: photo-fade-in 1.2s var(--ease-elegant) both;
}

@keyframes photo-fade-in {
    0%   { opacity: 0; filter: blur(10px) brightness(1.5); }
    100% { opacity: 1; filter: blur(0) brightness(1); }
}

/* Respecter reduce-motion */
@media (prefers-reduced-motion: reduce) {
    .biography-legacy figure img,
    .home-intro figure img,
    .premium-frame img {
        animation: none;
    }
}

/* --- Responsive photos --- */
@media (max-width: 768px) {
    .biography-legacy figure { padding: 8px; margin: 1.5rem auto; }
    .biography-legacy figure::after { inset: 4px; }
    .biography-legacy figure figcaption { font-size: 0.85rem; }
    .home-intro figure { padding: 10px; }
    .home-intro figure::after { inset: 5px; }
    .home-intro figure > .ornament-corner { width: 16px; height: 16px; }
    .premium-frame { padding: 10px; }
}

@media (max-width: 480px) {
    .biography-legacy figure { padding: 6px; }
    .biography-legacy figure::after { inset: 3px; }
    .home-intro figure > .ornament-corner { width: 12px; height: 12px; border-width: 1px; }
}

/* ==========================================================================
   15. PLACEHOLDER ÉLÉGANT pour images manquantes
   ========================================================================== */
.img-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 4/5;
    min-height: 260px;
    background:
        radial-gradient(ellipse at 30% 30%, rgba(228, 197, 107, 0.15) 0%, transparent 60%),
        linear-gradient(135deg, var(--color-burgundy-deep) 0%, var(--color-ink) 100%);
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.6);
}

.img-placeholder::before {
    content: '';
    position: absolute;
    inset: 20px;
    border: 1px solid rgba(201, 169, 97, 0.2);
}

.img-placeholder::after {
    content: '';
    position: absolute;
    inset: 30px;
    border: 1px solid rgba(201, 169, 97, 0.1);
}

.img-placeholder span {
    font-family: var(--font-display), serif;
    font-size: clamp(3rem, 10vw, 5rem);
    letter-spacing: 0.15em;
    background: linear-gradient(180deg,
        #f7dd8a 0%,
        #e4c56b 40%,
        #c9a961 60%,
        #8b7331 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 20px rgba(228, 197, 107, 0.4));
    position: relative;
    z-index: 2;
}

/* Amélioration des pochettes d'extraits (même style) */
.extrait-luxe-cover {
    transition: all 0.5s var(--ease-elegant);
}

.extrait-luxe-cover > .ornament-corner {
    position: absolute;
    width: 14px;
    height: 14px;
    pointer-events: none;
    z-index: 4;
    border: 1.5px solid var(--color-gold-bright);
    opacity: 0;
    transition: all 0.4s var(--ease-elegant);
}

.extrait-luxe-cover > .ornament-corner.tl { top: 3px;    left: 3px;    border-right: none; border-bottom: none; }
.extrait-luxe-cover > .ornament-corner.tr { top: 3px;    right: 3px;   border-left: none;  border-bottom: none; }
.extrait-luxe-cover > .ornament-corner.bl { bottom: 3px; left: 3px;    border-right: none; border-top: none; }
.extrait-luxe-cover > .ornament-corner.br { bottom: 3px; right: 3px;   border-left: none;  border-top: none; }

.extrait-luxe-card:hover .extrait-luxe-cover > .ornament-corner {
    opacity: 1;
    box-shadow: 0 0 10px rgba(228, 197, 107, 0.7);
}

/* Amélioration des vignettes presse (cadres dorés au survol) */
.presse-luxe-thumb {
    position: relative;
}

.presse-luxe-thumb > .ornament-corner {
    position: absolute;
    width: 10px;
    height: 10px;
    pointer-events: none;
    z-index: 4;
    border: 1.2px solid var(--color-gold-bright);
    opacity: 0;
    transition: all 0.4s;
}

.presse-luxe-thumb > .ornament-corner.tl { top: 2px;    left: 2px;    border-right: none; border-bottom: none; }
.presse-luxe-thumb > .ornament-corner.tr { top: 2px;    right: 2px;   border-left: none;  border-bottom: none; }
.presse-luxe-thumb > .ornament-corner.bl { bottom: 2px; left: 2px;    border-right: none; border-top: none; }
.presse-luxe-thumb > .ornament-corner.br { bottom: 2px; right: 2px;   border-left: none;  border-top: none; }

.presse-luxe-thumb:hover > .ornament-corner {
    opacity: 1;
    box-shadow: 0 0 8px rgba(228, 197, 107, 0.8);
}

/* ==========================================================================
   16. FALLBACK REVEAL - afficher quand même si JS désactivé
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Fallback si pas de JS */
.no-js .reveal {
    opacity: 1;
    transform: none;
}

/* ==========================================================================
   17. LOGO 3D V2 — animations pour vibraphone & baguettes
   ========================================================================== */

/* Halo doré qui pulse en arrière-plan */
.logo-halo-bg {
    animation: halo-pulse 4s ease-in-out infinite;
    transform-origin: center;
}

/* Losange principal qui respire légèrement */
.logo-diamond {
    transform-origin: center;
    transform-box: fill-box;
    animation: diamond-breathe 8s ease-in-out infinite;
}

@keyframes diamond-breathe {
    0%, 100% { filter: url(#bevel) brightness(1); }
    50%      { filter: url(#bevel) brightness(1.08); }
}

/* Lames du vibraphone : petit frissonnement au survol (comme si on les frappait) */
.logo-vibraphone .vib-bar {
    transform-origin: center;
    transform-box: fill-box;
    transition: transform 0.3s var(--ease-elegant);
}

.brand-logo-3d:hover .logo-vibraphone .vib-bar-1 { animation: bar-vibrate 0.4s ease-out; }
.brand-logo-3d:hover .logo-vibraphone .vib-bar-2 { animation: bar-vibrate 0.4s ease-out 0.05s; }
.brand-logo-3d:hover .logo-vibraphone .vib-bar-3 { animation: bar-vibrate 0.4s ease-out 0.1s; }
.brand-logo-3d:hover .logo-vibraphone .vib-bar-4 { animation: bar-vibrate 0.4s ease-out 0.15s; }
.brand-logo-3d:hover .logo-vibraphone .vib-bar-5 { animation: bar-vibrate 0.4s ease-out 0.2s; }

@keyframes bar-vibrate {
    0%   { transform: translateY(0); }
    30%  { transform: translateY(1px); filter: brightness(1.4); }
    100% { transform: translateY(0); }
}

/* Baguettes : oscillation douce permanente */
.mallet-left {
    transform-origin: 72px 66px;
    transform-box: fill-box;
    animation: mallet-sway-left 5s ease-in-out infinite;
}

.mallet-right {
    transform-origin: 168px 66px;
    transform-box: fill-box;
    animation: mallet-sway-right 5s ease-in-out infinite;
}

@keyframes mallet-sway-left {
    0%, 100% { transform: rotate(0deg); }
    50%      { transform: rotate(-4deg); }
}

@keyframes mallet-sway-right {
    0%, 100% { transform: rotate(0deg); }
    50%      { transform: rotate(4deg); }
}

/* Au survol, les baguettes "frappent" les lames */
.brand-logo-3d:hover .mallet-left {
    animation: mallet-strike-left 0.6s var(--ease-elegant);
}
.brand-logo-3d:hover .mallet-right {
    animation: mallet-strike-right 0.6s var(--ease-elegant);
}

@keyframes mallet-strike-left {
    0%   { transform: rotate(-10deg); }
    30%  { transform: rotate(5deg); }
    60%  { transform: rotate(-3deg); }
    100% { transform: rotate(0deg); }
}

@keyframes mallet-strike-right {
    0%   { transform: rotate(10deg); }
    30%  { transform: rotate(-5deg); }
    60%  { transform: rotate(3deg); }
    100% { transform: rotate(0deg); }
}

/* Étoiles aux pointes qui scintillent en alternance */
.logo-stars circle {
    animation: star-twinkle 3s ease-in-out infinite;
    transform-origin: center;
    transform-box: fill-box;
}
.logo-stars circle:nth-child(1) { animation-delay: 0s; }
.logo-stars circle:nth-child(2) { animation-delay: 0.75s; }
.logo-stars circle:nth-child(3) { animation-delay: 1.5s; }
.logo-stars circle:nth-child(4) { animation-delay: 2.25s; }

@keyframes star-twinkle {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50%      { opacity: 1; transform: scale(1.6); }
}

/* Cercle du monogramme GD qui pulse doucement */
.logo-monogram {
    transform-origin: 120px 62px;
    transform-box: fill-box;
}

.logo-monogram circle:first-child {
    animation: gd-pulse 4s ease-in-out infinite;
    transform-origin: center;
    transform-box: fill-box;
}

@keyframes gd-pulse {
    0%, 100% { filter: brightness(1); }
    50%      { filter: brightness(1.2); }
}

/* Reflet lumineux qui balaie la surface */
.logo-sparkle {
    animation: sparkle-sweep 6s ease-in-out infinite;
    transform-origin: center;
}

@keyframes sparkle-sweep {
    0%, 100% { opacity: 0; transform: translateX(-100%); }
    45%      { opacity: 0; }
    50%      { opacity: 0.5; transform: translateX(0%); }
    55%      { opacity: 0; }
}

/* Contour extérieur qui s'éclaire doucement */
.logo-outer-ring {
    animation: ring-glow 5s ease-in-out infinite;
}

@keyframes ring-glow {
    0%, 100% { opacity: 0.3; stroke-width: 0.8; }
    50%      { opacity: 0.6; stroke-width: 1.2; }
}

/* Rotation 3D globale au survol (plus douce que l'ancienne) */
.brand-logo-3d:hover .gd-logo-3d {
    transform: rotateY(0deg) scale(1.05);
}

/* Flottement naturel 3D */
.logo-3d-wrap .gd-logo-3d {
    animation: logo-float-3d 7s ease-in-out infinite;
    will-change: transform;
}

@keyframes logo-float-3d {
    0%, 100% { transform: rotateY(-8deg) rotateX(4deg) translateZ(0); }
    50%      { transform: rotateY(8deg) rotateX(-4deg) translateZ(4px); }
}

/* Respecter reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .logo-halo-bg,
    .logo-diamond,
    .mallet-left,
    .mallet-right,
    .logo-stars circle,
    .logo-monogram circle:first-child,
    .logo-sparkle,
    .logo-outer-ring,
    .logo-3d-wrap .gd-logo-3d {
        animation: none !important;
    }
}

/* Tailles du logo selon contexte */
.logo-3d-wrap {
    width: 64px;
    height: 64px;
}

@media (max-width: 900px) {
    .logo-3d-wrap { width: 52px; height: 52px; }
}

@media (max-width: 480px) {
    .logo-3d-wrap { width: 44px; height: 44px; }
}

/* ==========================================================================
   18. LOGO V2 - OVERRIDES FINAUX
   Ces règles remplacent les anciennes pour éviter les conflits
   ========================================================================== */

.logo-3d-wrap {
    position: relative;
    width: 60px !important;
    height: 60px !important;
    flex-shrink: 0;
    perspective: 600px;
    display: inline-block;
}

.logo-3d-wrap .gd-logo-3d {
    width: 100%;
    height: 100%;
    display: block;
    transform-style: preserve-3d;
    transition: transform 0.6s var(--ease-elegant);
    will-change: transform;
    /* L'animation de float est déjà définie dans section 17 */
}

/* Ne plus inverser (le logo V2 a un verso non prévu - on fait juste un scale) */
.brand-logo-3d:hover .gd-logo-3d {
    transform: rotateY(0deg) scale(1.06) !important;
}

/* Annuler l'ancienne animation logo-float qui était sur le logo V1 */
@keyframes logo-float {
    0%, 100% { transform: rotateY(-8deg) rotateX(4deg) translateZ(0); }
    50%      { transform: rotateY(8deg) rotateX(-4deg) translateZ(4px); }
}

/* Tailles responsive */
@media (max-width: 900px) {
    .logo-3d-wrap { width: 50px !important; height: 50px !important; }
}

@media (max-width: 480px) {
    .logo-3d-wrap { width: 42px !important; height: 42px !important; }
}

@media (max-width: 360px) {
    .logo-3d-wrap { width: 38px !important; height: 38px !important; }
}

/* ==========================================================================
   19. VIDÉOS INA — Cartes de liens externes luxueuses
   ========================================================================== */

.videos-ina-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.video-ina-card {
    position: relative;
    background: linear-gradient(145deg,
        rgba(30, 20, 12, 0.85) 0%,
        rgba(15, 10, 6, 0.95) 100%);
    border: 1px solid rgba(201, 169, 97, 0.25);
    border-radius: 2px;
    overflow: hidden;
    transition: all 0.5s var(--ease-elegant);
}

/* Bordure dorée animée à gauche */
.video-ina-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg,
        transparent 0%,
        var(--color-gold-bright) 50%,
        transparent 100%);
    opacity: 0.5;
    transition: opacity 0.4s;
}

/* Balayage lumineux au survol */
.video-ina-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        var(--color-gold-bright),
        transparent);
    transition: left 1.2s var(--ease-elegant);
}

.video-ina-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-gold);
    box-shadow:
        0 25px 50px rgba(0, 0, 0, 0.6),
        0 0 60px rgba(228, 197, 107, 0.15);
}

.video-ina-card:hover::before { opacity: 1; }
.video-ina-card:hover::after  { left: 100%; }

.video-ina-link {
    display: flex;
    flex-direction: row;
    text-decoration: none;
    color: inherit;
    min-height: 100%;
}

/* Côté gauche : icône lecture + source */
.video-ina-play {
    flex: 0 0 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 0.5rem;
    background:
        radial-gradient(ellipse at center, rgba(228, 197, 107, 0.08) 0%, transparent 70%),
        linear-gradient(135deg, rgba(91, 26, 26, 0.2), rgba(10, 7, 5, 0.5));
    border-right: 1px solid rgba(201, 169, 97, 0.15);
    position: relative;
}

.video-ina-play-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg,
        rgba(228, 197, 107, 0.15),
        rgba(10, 7, 5, 0.3));
    border: 1px solid rgba(201, 169, 97, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gold);
    box-shadow:
        inset 0 0 20px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(228, 197, 107, 0.1);
    transition: all 0.4s var(--ease-elegant);
    position: relative;
}

/* Anneau lumineux pulsant autour de l'icône */
.video-ina-play-icon::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1px solid var(--color-gold-bright);
    opacity: 0;
    animation: ina-ring-pulse 3s ease-in-out infinite;
}

@keyframes ina-ring-pulse {
    0%, 100% { opacity: 0; transform: scale(1); }
    50%      { opacity: 0.5; transform: scale(1.1); }
}

.video-ina-card:hover .video-ina-play-icon {
    color: var(--color-gold-bright);
    border-color: var(--color-gold-bright);
    background: linear-gradient(135deg,
        rgba(228, 197, 107, 0.25),
        rgba(91, 26, 26, 0.2));
    box-shadow:
        inset 0 0 25px rgba(0, 0, 0, 0.5),
        0 0 35px rgba(228, 197, 107, 0.35);
    transform: scale(1.05);
}

.video-ina-source {
    margin-top: 1rem;
    font-family: var(--font-display);
    font-size: 0.7rem;
    letter-spacing: 0.3em;
    color: var(--color-gold);
    opacity: 0.7;
    text-transform: uppercase;
}

/* Côté droit : contenu */
.video-ina-body {
    flex: 1;
    padding: 1.5rem 1.8rem 1.8rem;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.video-ina-year {
    font-family: var(--font-italic);
    font-style: italic;
    font-size: 0.8rem;
    letter-spacing: 0.25em;
    color: var(--color-gold);
    text-transform: uppercase;
    margin-bottom: 0.6rem;
    opacity: 0.9;
}

.video-ina-title {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--color-gold-bright);
    line-height: 1.4;
    margin: 0 0 0.8rem;
    letter-spacing: 0.01em;
}

.video-ina-desc {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--color-cream);
    line-height: 1.6;
    opacity: 0.85;
    margin: 0 0 1rem;
    flex-grow: 1;
}

.video-ina-note {
    font-family: var(--font-italic);
    font-style: italic;
    font-size: 0.8rem;
    color: var(--color-gold);
    opacity: 0.7;
    margin: 0 0 1rem;
    padding: 0.5rem 0.8rem;
    border-left: 2px solid rgba(201, 169, 97, 0.3);
    background: rgba(201, 169, 97, 0.05);
}

.video-ina-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: auto;
    padding-top: 0.8rem;
    font-family: var(--font-display);
    font-size: 0.75rem;
    letter-spacing: 0.25em;
    color: var(--color-gold-bright);
    text-transform: uppercase;
    transition: all 0.3s;
    border-top: 1px solid rgba(201, 169, 97, 0.15);
}

.video-ina-card:hover .video-ina-cta {
    color: #fff6d8;
    letter-spacing: 0.3em;
}

/* Footer INA */
.videos-ina-footer {
    text-align: center;
    margin: 4rem auto 0;
    max-width: 700px;
    padding: 2rem;
}

.videos-ina-footer-text {
    font-family: var(--font-italic);
    font-style: italic;
    color: var(--color-cream);
    font-size: 1.05rem;
    line-height: 1.7;
    opacity: 0.9;
}

.videos-ina-footer-text a {
    color: var(--color-gold-bright);
    text-decoration: none;
    border-bottom: 1px solid rgba(228, 197, 107, 0.3);
    transition: all 0.3s;
}

.videos-ina-footer-text a:hover {
    color: #fff6d8;
    border-bottom-color: var(--color-gold-bright);
}

/* Responsive */
@media (max-width: 768px) {
    .videos-ina-grid {
        grid-template-columns: 1fr;
        padding: 0 1rem;
        gap: 1.5rem;
    }

    .video-ina-link {
        flex-direction: column;
    }

    .video-ina-play {
        flex: 0 0 auto;
        flex-direction: row;
        justify-content: center;
        gap: 1.5rem;
        padding: 1.5rem;
        border-right: none;
        border-bottom: 1px solid rgba(201, 169, 97, 0.15);
    }

    .video-ina-play-icon {
        width: 56px;
        height: 56px;
    }

    .video-ina-play-icon svg {
        width: 28px;
        height: 28px;
    }

    .video-ina-source {
        margin-top: 0;
    }

    .video-ina-body {
        padding: 1.5rem;
    }
}

@media (max-width: 480px) {
    .video-ina-title { font-size: 1rem; }
    .video-ina-desc { font-size: 0.85rem; }
}

/* ==========================================================================
   20. BLOC VIBRATO ÉDUCATIF - Cadre lumineux premium
   ========================================================================== */

.vibrato-card {
    position: relative;
    margin: 0 auto;
    max-width: 900px;
    padding: 3.5rem 3rem 3rem;
    background:
        /* Texture velours subtile */
        radial-gradient(ellipse at top left, rgba(228, 197, 107, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at bottom right, rgba(91, 26, 26, 0.15) 0%, transparent 50%),
        /* Base sombre à gradient */
        linear-gradient(145deg,
            rgba(30, 20, 12, 0.95) 0%,
            rgba(20, 14, 8, 0.98) 50%,
            rgba(10, 7, 5, 1) 100%);
    border: 1px solid rgba(201, 169, 97, 0.35);
    border-radius: 2px;
    box-shadow:
        /* Ombre externe profonde */
        0 30px 80px rgba(0, 0, 0, 0.7),
        /* Halo doré diffus */
        0 0 80px rgba(228, 197, 107, 0.08),
        /* Bordure interne lumineuse */
        inset 0 1px 0 rgba(228, 197, 107, 0.15),
        inset 0 -1px 0 rgba(0, 0, 0, 0.5);
    overflow: hidden;
    transition: all 0.8s var(--ease-elegant);
}

/* Bordure dorée animée interne (second cadre décoratif) */
.vibrato-card::before {
    content: '';
    position: absolute;
    inset: 14px;
    border: 1px solid rgba(201, 169, 97, 0.2);
    pointer-events: none;
    transition: all 0.8s;
}

/* Reflet lumineux oblique (passe en continu) */
.vibrato-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(115deg,
        transparent 30%,
        rgba(228, 197, 107, 0.05) 50%,
        transparent 70%);
    animation: vibrato-sweep 8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes vibrato-sweep {
    0%, 100% { left: -100%; }
    50%      { left: 140%; }
}

.vibrato-card:hover {
    border-color: var(--color-gold);
    box-shadow:
        0 40px 100px rgba(0, 0, 0, 0.75),
        0 0 120px rgba(228, 197, 107, 0.15),
        inset 0 1px 0 rgba(228, 197, 107, 0.25),
        inset 0 -1px 0 rgba(0, 0, 0, 0.5);
}

.vibrato-card:hover::before {
    border-color: var(--color-gold-bright);
    inset: 10px;
}

/* ========== COINS ORNEMENTAUX DORÉS ========== */
.vibrato-corner {
    position: absolute;
    width: 30px;
    height: 30px;
    pointer-events: none;
    z-index: 2;
}

.vibrato-corner::before,
.vibrato-corner::after {
    content: '';
    position: absolute;
    background: var(--color-gold-bright);
    box-shadow:
        0 0 8px rgba(228, 197, 107, 0.8),
        0 0 16px rgba(228, 197, 107, 0.4);
    transition: all 0.5s var(--ease-elegant);
}

.vibrato-corner::before { width: 28px; height: 1.5px; }
.vibrato-corner::after  { width: 1.5px; height: 28px; }

.vibrato-corner-tl { top: 10px; left: 10px; }
.vibrato-corner-tr { top: 10px; right: 10px; }
.vibrato-corner-tr::after  { right: 0; }
.vibrato-corner-bl { bottom: 10px; left: 10px; }
.vibrato-corner-bl::before { bottom: 0; }
.vibrato-corner-br { bottom: 10px; right: 10px; }
.vibrato-corner-br::before { bottom: 0; }
.vibrato-corner-br::after  { right: 0; }

.vibrato-card:hover .vibrato-corner::before,
.vibrato-card:hover .vibrato-corner::after {
    background: #fff6d8;
    box-shadow:
        0 0 15px rgba(255, 246, 216, 1),
        0 0 30px rgba(228, 197, 107, 0.8),
        0 0 50px rgba(228, 197, 107, 0.4);
}

/* ========== HEADER DU BLOC ========== */
.vibrato-header {
    text-align: center;
    margin-bottom: 2.5rem;
    position: relative;
    z-index: 1;
}

.vibrato-eyebrow {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 0.75rem;
    letter-spacing: 0.4em;
    color: var(--color-gold);
    text-transform: uppercase;
    padding: 0.4rem 1.5rem;
    border-top: 1px solid rgba(201, 169, 97, 0.4);
    border-bottom: 1px solid rgba(201, 169, 97, 0.4);
    opacity: 0.9;
    margin-bottom: 1.2rem;
}

.vibrato-title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 400;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-cream);
    line-height: 1;
    margin: 0 0 0.8rem;
}

.vibrato-title .accent {
    background: linear-gradient(180deg,
        #fff2b8 0%,
        #f7dd8a 30%,
        #e4c56b 50%,
        #c9a961 75%,
        #8b7331 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 20px rgba(228, 197, 107, 0.3));
    font-style: italic;
}

.vibrato-subtitle {
    font-family: var(--font-italic);
    font-style: italic;
    font-size: 1.1rem;
    color: var(--color-gold);
    opacity: 0.85;
    letter-spacing: 0.08em;
}

/* ========== CONTENU PRINCIPAL ========== */
.vibrato-content {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 3rem;
    align-items: start;
    position: relative;
    z-index: 1;
}

/* ========== ILLUSTRATION SVG ANIMÉE ========== */
.vibrato-illustration {
    position: relative;
    padding: 1.5rem;
    background:
        radial-gradient(ellipse at center, rgba(228, 197, 107, 0.05) 0%, transparent 70%);
    border-radius: 2px;
}

.vibrato-illustration svg {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.6));
}

/* Animation du disque rotatif à l'intérieur du tube */
.vib-illus-disc {
    transform-origin: 100px 40px;
    transform-box: fill-box;
    animation: disc-rotate 1.2s linear infinite;
}

@keyframes disc-rotate {
    0%   { transform: scaleY(1); }
    25%  { transform: scaleY(0.1); }
    50%  { transform: scaleY(1); }
    75%  { transform: scaleY(0.1); }
    100% { transform: scaleY(1); }
}

/* Ondes sonores qui se propagent */
.vib-wave {
    transform-origin: 100px 95px;
    transform-box: fill-box;
    opacity: 0;
}

.vib-wave-1 { animation: wave-expand 2s ease-out infinite; }
.vib-wave-2 { animation: wave-expand 2s ease-out infinite 0.5s; }
.vib-wave-3 { animation: wave-expand 2s ease-out infinite 1s; }

@keyframes wave-expand {
    0%   { opacity: 0.8; transform: scale(0.5); }
    100% { opacity: 0; transform: scale(2); }
}

/* Tube qui "bat" doucement */
.vib-illus-tube {
    animation: tube-breathe 1.2s ease-in-out infinite;
    transform-origin: center;
    transform-box: fill-box;
}

@keyframes tube-breathe {
    0%, 100% { opacity: 0.9; }
    50%      { opacity: 1; filter: brightness(1.15); }
}

/* Sinusoïde du vibrato qui ondule */
.vib-sine-wave {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    animation: sine-draw 3s ease-in-out infinite;
}

@keyframes sine-draw {
    0%   { stroke-dashoffset: 200; opacity: 0; }
    30%  { stroke-dashoffset: 0;   opacity: 1; }
    70%  { stroke-dashoffset: 0;   opacity: 1; }
    100% { stroke-dashoffset: -200; opacity: 0; }
}

/* ========== TEXTE ========== */
.vibrato-text {
    font-family: var(--font-body);
    color: var(--color-cream);
    line-height: 1.75;
    font-size: 1.02rem;
}

.vibrato-text p {
    margin: 0 0 1.3rem;
    opacity: 0.92;
}

.vibrato-text p.vibrato-lead {
    font-size: 1.15rem;
    color: var(--color-cream);
    line-height: 1.7;
    opacity: 1;
}

.vibrato-text strong {
    color: var(--color-gold-bright);
    font-weight: 500;
}

.vibrato-text em {
    font-family: var(--font-italic);
    font-style: italic;
    color: var(--color-gold);
}

.vibrato-text .accent {
    background: linear-gradient(180deg, #fff6d8, #e4c56b);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-style: italic;
    font-weight: 600;
    font-size: 1.15em;
}

.vibrato-text a {
    color: var(--color-gold-bright);
    text-decoration: none;
    border-bottom: 1px solid rgba(228, 197, 107, 0.3);
    transition: all 0.3s;
}

.vibrato-text a:hover {
    color: #fff6d8;
    border-bottom-color: var(--color-gold-bright);
}

/* ========== CITATION LIONEL HAMPTON ========== */
.vibrato-quote {
    position: relative;
    margin: 2rem 0;
    padding: 1.5rem 2rem;
    background:
        linear-gradient(90deg,
            rgba(91, 26, 26, 0.15),
            rgba(10, 7, 5, 0.3));
    border-left: 3px solid var(--color-gold);
    font-family: var(--font-italic);
    font-style: italic;
    font-size: 1.2rem;
    color: var(--color-gold-bright);
    line-height: 1.5;
    text-align: center;
    letter-spacing: 0.02em;
    box-shadow:
        inset 0 0 30px rgba(0, 0, 0, 0.4),
        0 5px 20px rgba(0, 0, 0, 0.3);
}

.vibrato-quote::before {
    content: '"';
    position: absolute;
    top: -10px;
    left: 20px;
    font-family: var(--font-display);
    font-size: 4rem;
    color: var(--color-gold);
    opacity: 0.3;
    line-height: 1;
}

.vibrato-quote-author {
    display: block;
    margin-top: 0.8rem;
    font-size: 0.9rem;
    color: var(--color-gold);
    opacity: 0.85;
    letter-spacing: 0.15em;
    font-style: normal;
    font-family: var(--font-display);
    text-transform: uppercase;
}

/* ========== BLOC "ESSAYEZ" ========== */
.vibrato-try {
    margin-top: 2rem;
    padding: 1.2rem 1.5rem;
    background:
        linear-gradient(135deg,
            rgba(228, 197, 107, 0.08),
            rgba(10, 7, 5, 0.4));
    border: 1px solid rgba(201, 169, 97, 0.25);
    border-radius: 2px;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.vibrato-try-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg,
        rgba(228, 197, 107, 0.2),
        rgba(10, 7, 5, 0.5));
    border: 1px solid rgba(201, 169, 97, 0.4);
    color: var(--color-gold-bright);
    font-size: 1.2rem;
    box-shadow: 0 0 15px rgba(228, 197, 107, 0.15);
    animation: try-pulse 3s ease-in-out infinite;
}

@keyframes try-pulse {
    0%, 100% { box-shadow: 0 0 15px rgba(228, 197, 107, 0.15); }
    50%      { box-shadow: 0 0 25px rgba(228, 197, 107, 0.35); }
}

/* ========== ORNEMENT INFÉRIEUR ========== */
.vibrato-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(201, 169, 97, 0.15);
}

.vibrato-ornament-line {
    flex: 1;
    max-width: 150px;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        var(--color-gold),
        transparent);
}

.vibrato-ornament-diamond {
    color: var(--color-gold);
    font-size: 0.8rem;
    filter: drop-shadow(0 0 8px rgba(228, 197, 107, 0.6));
    animation: diamond-twinkle 3s ease-in-out infinite;
}

@keyframes diamond-twinkle {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50%      { opacity: 1; transform: scale(1.2); }
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
    .vibrato-card {
        padding: 2rem 1.5rem;
        margin: 0 1rem;
    }

    .vibrato-card::before {
        inset: 8px;
    }

    .vibrato-corner {
        width: 20px;
        height: 20px;
    }

    .vibrato-corner::before { width: 18px; }
    .vibrato-corner::after  { height: 18px; }

    .vibrato-title {
        font-size: clamp(2rem, 8vw, 3rem);
    }

    .vibrato-subtitle {
        font-size: 0.95rem;
    }

    .vibrato-content {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .vibrato-illustration {
        max-width: 180px;
        margin: 0 auto;
        padding: 1rem;
    }

    .vibrato-text {
        font-size: 0.95rem;
    }

    .vibrato-text p.vibrato-lead {
        font-size: 1.05rem;
    }

    .vibrato-quote {
        font-size: 1.05rem;
        padding: 1.2rem 1.5rem;
    }

    .vibrato-try {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.8rem;
    }
}

@media (max-width: 480px) {
    .vibrato-card { padding: 1.5rem 1rem; }
    .vibrato-eyebrow { font-size: 0.65rem; letter-spacing: 0.3em; padding: 0.3rem 1rem; }
    .vibrato-quote { font-size: 0.95rem; padding: 1rem 1.2rem; }
    .vibrato-try { padding: 1rem; }
}

/* Respect reduce motion */
@media (prefers-reduced-motion: reduce) {
    .vibrato-card::after,
    .vib-illus-disc,
    .vib-wave,
    .vib-illus-tube,
    .vib-sine-wave,
    .vibrato-try-icon,
    .vibrato-ornament-diamond {
        animation: none !important;
    }
}

/* ==========================================================================
   21. LECTEUR VIDÉO INA FEATURED — luxueux, iframe au clic
   ========================================================================== */

.featured-video-card {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
    background:
        radial-gradient(ellipse at top left, rgba(228, 197, 107, 0.1), transparent 60%),
        linear-gradient(145deg,
            rgba(30, 20, 12, 0.95),
            rgba(10, 7, 5, 1));
    border: 1px solid rgba(201, 169, 97, 0.4);
    box-shadow:
        0 40px 100px rgba(0, 0, 0, 0.8),
        0 0 100px rgba(228, 197, 107, 0.1),
        inset 0 1px 0 rgba(228, 197, 107, 0.15);
    transition: all 0.6s var(--ease-elegant);
}

/* Double cadre doré intérieur */
.featured-video-card::before {
    content: '';
    position: absolute;
    inset: 10px;
    border: 1px solid rgba(201, 169, 97, 0.25);
    pointer-events: none;
    transition: all 0.5s;
    z-index: 2;
}

.featured-video-card:hover {
    border-color: var(--color-gold);
    box-shadow:
        0 50px 120px rgba(0, 0, 0, 0.85),
        0 0 140px rgba(228, 197, 107, 0.2),
        inset 0 1px 0 rgba(228, 197, 107, 0.25);
}

.featured-video-card:hover::before {
    border-color: var(--color-gold-bright);
}

/* ========== 4 COINS DORÉS ========== */
.featured-corner {
    position: absolute;
    width: 24px;
    height: 24px;
    pointer-events: none;
    z-index: 4;
}

.featured-corner::before,
.featured-corner::after {
    content: '';
    position: absolute;
    background: var(--color-gold-bright);
    box-shadow:
        0 0 10px rgba(228, 197, 107, 0.9),
        0 0 20px rgba(228, 197, 107, 0.4);
    transition: all 0.5s;
}

.featured-corner::before { width: 24px; height: 2px; }
.featured-corner::after  { width: 2px; height: 24px; }

.featured-corner-tl { top: 6px; left: 6px; }
.featured-corner-tr { top: 6px; right: 6px; }
.featured-corner-tr::after  { right: 0; }
.featured-corner-bl { bottom: 6px; left: 6px; }
.featured-corner-bl::before { bottom: 0; }
.featured-corner-br { bottom: 6px; right: 6px; }
.featured-corner-br::before { bottom: 0; }
.featured-corner-br::after  { right: 0; }

.featured-video-card:hover .featured-corner::before,
.featured-video-card:hover .featured-corner::after {
    background: #fff6d8;
    box-shadow:
        0 0 20px rgba(255, 246, 216, 1),
        0 0 40px rgba(228, 197, 107, 0.8);
}

/* ========== PLAYER 16:9 ========== */
.featured-video-player {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    background: #000;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid rgba(201, 169, 97, 0.3);
    box-shadow:
        inset 0 0 60px rgba(0, 0, 0, 0.8),
        0 10px 30px rgba(0, 0, 0, 0.6);
}

/* ========== POSTER (avant clic) ========== */
.featured-video-poster {
    position: absolute;
    inset: 0;
    display: flex;
    transition: opacity 0.4s, transform 0.4s;
}

.featured-video-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.featured-video-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2rem 2.5rem;
    background:
        linear-gradient(180deg,
            rgba(10, 7, 5, 0.4) 0%,
            rgba(10, 7, 5, 0) 40%,
            rgba(10, 7, 5, 0) 60%,
            rgba(10, 7, 5, 0.85) 100%);
}

.featured-video-info {
    text-align: left;
}

.featured-video-source-badge {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 0.7rem;
    letter-spacing: 0.3em;
    color: var(--color-ink);
    background: linear-gradient(180deg, var(--color-gold-bright), var(--color-gold));
    padding: 0.3rem 0.8rem;
    border-radius: 2px;
    box-shadow: 0 4px 15px rgba(228, 197, 107, 0.4);
    margin-bottom: 1rem;
    text-transform: uppercase;
    font-weight: 600;
}

.featured-video-year {
    font-family: var(--font-italic);
    font-style: italic;
    font-size: 0.95rem;
    color: var(--color-gold);
    letter-spacing: 0.15em;
    margin-bottom: 0.5rem;
    opacity: 0.95;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

.featured-video-title {
    font-family: var(--font-serif);
    font-size: clamp(1.3rem, 3vw, 2rem);
    font-weight: 500;
    color: var(--color-cream);
    line-height: 1.3;
    margin: 0;
    letter-spacing: 0.01em;
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.8);
    max-width: 80%;
}

/* ========== BOUTON PLAY CENTRAL ========== */
.featured-video-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem;
    transition: transform 0.4s var(--ease-elegant);
    z-index: 3;
}

.featured-video-play-btn svg {
    filter: drop-shadow(0 0 20px rgba(228, 197, 107, 0.5));
    transition: all 0.4s;
}

/* Anneau lumineux pulsant */
.featured-video-play-btn::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 110px;
    height: 110px;
    border: 1px solid var(--color-gold-bright);
    border-radius: 50%;
    animation: feat-pulse-ring 2s ease-out infinite;
    pointer-events: none;
}

@keyframes feat-pulse-ring {
    0%   { opacity: 0.8; transform: translateX(-50%) scale(0.9); }
    100% { opacity: 0;   transform: translateX(-50%) scale(1.4); }
}

.featured-video-play-label {
    font-family: var(--font-display);
    font-size: 0.75rem;
    letter-spacing: 0.35em;
    color: var(--color-gold-bright);
    text-transform: uppercase;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

.featured-video-player:hover .featured-video-play-btn {
    transform: translate(-50%, -50%) scale(1.1);
}

.featured-video-player:hover .featured-video-play-btn svg {
    filter: drop-shadow(0 0 30px rgba(228, 197, 107, 0.8));
}

.featured-video-player:hover .featured-video-play-btn svg circle:first-child {
    fill: rgba(10, 7, 5, 0.7);
}

/* ========== IFRAME INTÉGRÉ (après clic) ========== */
.featured-video-player.playing {
    cursor: default;
}

.featured-video-player.playing .featured-video-poster {
    display: none;
}

.featured-video-player iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ========== DESCRIPTION SOUS LE LECTEUR ========== */
.featured-video-description {
    padding: 1.8rem 2rem 0.5rem;
}

.featured-video-description p {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-cream);
    line-height: 1.7;
    margin: 0 0 1.2rem;
    opacity: 0.9;
}

.featured-video-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-top: 1rem;
    border-top: 1px solid rgba(201, 169, 97, 0.2);
}

.featured-video-ext-link {
    font-family: var(--font-display);
    font-size: 0.75rem;
    letter-spacing: 0.25em;
    color: var(--color-gold-bright);
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.6rem 1.2rem;
    border: 1px solid rgba(201, 169, 97, 0.4);
    transition: all 0.4s var(--ease-elegant);
}

.featured-video-ext-link:hover {
    background: rgba(228, 197, 107, 0.1);
    border-color: var(--color-gold-bright);
    color: #fff6d8;
    box-shadow: 0 0 25px rgba(228, 197, 107, 0.3);
}

.featured-video-source-note {
    font-family: var(--font-italic);
    font-style: italic;
    font-size: 0.85rem;
    color: var(--color-gold);
    opacity: 0.7;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
    .featured-video-card { padding: 12px; margin: 0 1rem; }
    .featured-video-card::before { inset: 6px; }
    .featured-corner { width: 16px; height: 16px; top: 4px !important; }
    .featured-corner-tr, .featured-corner-br { right: 4px !important; }
    .featured-corner-bl, .featured-corner-br { bottom: 4px !important; }
    .featured-corner::before { width: 16px; }
    .featured-corner::after { height: 16px; }
    .featured-video-overlay { padding: 1rem 1.3rem; }
    .featured-video-title { font-size: 1.1rem; }
    .featured-video-year { font-size: 0.8rem; }
    .featured-video-source-badge { font-size: 0.6rem; padding: 0.25rem 0.6rem; }
    .featured-video-description { padding: 1.2rem 1rem 0.5rem; }
    .featured-video-description p { font-size: 0.9rem; }
    .featured-video-play-btn svg { width: 60px; height: 60px; }
    .featured-video-play-btn::before { width: 80px; height: 80px; top: 10px; }
    .featured-video-meta { flex-direction: column; align-items: stretch; text-align: center; }
}

@media (max-width: 480px) {
    .featured-video-title { font-size: 0.95rem; max-width: 100%; }
    .featured-video-play-btn svg { width: 50px; height: 50px; }
    .featured-video-play-btn::before { width: 65px; height: 65px; }
}

@media (prefers-reduced-motion: reduce) {
    .featured-video-play-btn::before { animation: none; }
}

/* ==========================================================================
   22. PLAYERS VIDÉO PREMIUM UNIFIÉS
   Design luxueux appliqué à toutes les vidéos INA intégrées.
   - Mode "featured" : grand format pleine largeur avec description riche
   - Mode "compact" : format carte dans la grille
   ========================================================================== */

/* ========== CONTENEUR PARENT ========== */
.video-premium-card {
    position: relative;
    background:
        radial-gradient(ellipse at top left, rgba(228, 197, 107, 0.08), transparent 60%),
        linear-gradient(145deg,
            rgba(30, 20, 12, 0.92),
            rgba(10, 7, 5, 1));
    border: 1px solid rgba(201, 169, 97, 0.35);
    overflow: hidden;
    transition: all 0.6s var(--ease-elegant);
    isolation: isolate;
}

/* Double cadre intérieur */
.video-premium-card::before {
    content: '';
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(201, 169, 97, 0.2);
    pointer-events: none;
    z-index: 1;
    transition: all 0.5s;
}

/* Balayage lumineux au survol */
.video-premium-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        var(--color-gold-bright),
        transparent);
    transition: left 1.2s var(--ease-elegant);
    z-index: 5;
}

.video-premium-card:hover {
    border-color: var(--color-gold);
    box-shadow:
        0 40px 100px rgba(0, 0, 0, 0.8),
        0 0 120px rgba(228, 197, 107, 0.18);
}

.video-premium-card:hover::before {
    border-color: var(--color-gold-bright);
}

.video-premium-card:hover::after {
    left: 100%;
}

/* Featured : dimensions et ombre plus imposantes */
.video-premium-featured {
    max-width: 1000px;
    margin: 0 auto;
    padding: 18px;
    box-shadow:
        0 40px 100px rgba(0, 0, 0, 0.75),
        0 0 100px rgba(228, 197, 107, 0.1);
}

.video-premium-featured::before {
    inset: 10px;
}

/* Compact : carte dans grille */
.video-premium-compact {
    padding: 10px;
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(228, 197, 107, 0.1);
}

.video-premium-compact::before {
    inset: 6px;
}

/* ========== 4 COINS ORNEMENTAUX ========== */
.vp-corner {
    position: absolute;
    width: 24px;
    height: 24px;
    pointer-events: none;
    z-index: 6;
    transition: all 0.5s;
}

.video-premium-compact .vp-corner {
    width: 16px;
    height: 16px;
}

.vp-corner::before,
.vp-corner::after {
    content: '';
    position: absolute;
    background: var(--color-gold-bright);
    box-shadow:
        0 0 8px rgba(228, 197, 107, 0.9),
        0 0 16px rgba(228, 197, 107, 0.4);
    transition: all 0.5s;
}

.vp-corner::before { width: 24px; height: 2px; }
.vp-corner::after  { width: 2px; height: 24px; }

.video-premium-compact .vp-corner::before { width: 16px; height: 1.5px; }
.video-premium-compact .vp-corner::after  { width: 1.5px; height: 16px; }

.vp-corner-tl { top: 5px; left: 5px; }
.vp-corner-tr { top: 5px; right: 5px; }
.vp-corner-tr::after  { right: 0; }
.vp-corner-bl { bottom: 5px; left: 5px; }
.vp-corner-bl::before { bottom: 0; }
.vp-corner-br { bottom: 5px; right: 5px; }
.vp-corner-br::before { bottom: 0; }
.vp-corner-br::after  { right: 0; }

.video-premium-card:hover .vp-corner::before,
.video-premium-card:hover .vp-corner::after {
    background: #fff6d8;
    box-shadow:
        0 0 15px rgba(255, 246, 216, 1),
        0 0 30px rgba(228, 197, 107, 0.8);
}

/* ========== LECTEUR (ratio 16/9) ========== */
.vp-player {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid rgba(201, 169, 97, 0.2);
    box-shadow:
        inset 0 0 60px rgba(0, 0, 0, 0.8),
        0 10px 25px rgba(0, 0, 0, 0.5);
    z-index: 2;
}

.vp-player:focus-visible {
    outline: 2px solid var(--color-gold-bright);
    outline-offset: 4px;
}

/* ========== POSTER (avant clic) ========== */
.vp-poster {
    position: absolute;
    inset: 0;
    transition: opacity 0.4s;
}

.vp-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.vp-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.5rem 1.8rem;
    background: linear-gradient(180deg,
        rgba(10, 7, 5, 0.4) 0%,
        rgba(10, 7, 5, 0) 40%,
        rgba(10, 7, 5, 0) 60%,
        rgba(10, 7, 5, 0.9) 100%);
}

.video-premium-featured .vp-overlay {
    padding: 2rem 2.5rem;
}

/* ========== INFOS DANS LE POSTER ========== */
.vp-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

.vp-source-badge {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 0.65rem;
    letter-spacing: 0.3em;
    color: var(--color-ink);
    background: linear-gradient(180deg, var(--color-gold-bright), var(--color-gold));
    padding: 0.25rem 0.7rem;
    border-radius: 2px;
    box-shadow: 0 3px 12px rgba(228, 197, 107, 0.4);
    text-transform: uppercase;
    font-weight: 600;
}

.video-premium-featured .vp-source-badge {
    font-size: 0.7rem;
    padding: 0.3rem 0.8rem;
}

.vp-tag {
    display: inline-block;
    font-family: var(--font-italic);
    font-style: italic;
    font-size: 0.75rem;
    color: var(--color-gold-bright);
    background: rgba(10, 7, 5, 0.6);
    padding: 0.2rem 0.6rem;
    border-left: 2px solid var(--color-gold-bright);
    letter-spacing: 0.05em;
}

.vp-year {
    font-family: var(--font-italic);
    font-style: italic;
    font-size: 0.85rem;
    color: var(--color-gold);
    letter-spacing: 0.15em;
    margin-top: 0.3rem;
    opacity: 0.95;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.video-premium-featured .vp-year {
    font-size: 0.95rem;
}

.vp-title {
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-cream);
    line-height: 1.3;
    margin: 0.3rem 0 0;
    letter-spacing: 0.01em;
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.9);
    max-width: 85%;
}

.video-premium-featured .vp-title {
    font-size: clamp(1.3rem, 2.6vw, 1.8rem);
    line-height: 1.25;
}

/* ========== BOUTON PLAY CENTRAL ========== */
.vp-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    padding: 1rem;
    transition: transform 0.4s var(--ease-elegant);
    z-index: 3;
}

.vp-play-icon {
    width: 70px;
    height: 70px;
    filter: drop-shadow(0 0 20px rgba(228, 197, 107, 0.5));
    transition: all 0.4s;
}

.video-premium-featured .vp-play-icon {
    width: 90px;
    height: 90px;
}

/* Anneau lumineux pulsant */
.vp-play-btn::before {
    content: '';
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 86px;
    height: 86px;
    border: 1px solid var(--color-gold-bright);
    border-radius: 50%;
    animation: vp-pulse 2s ease-out infinite;
    pointer-events: none;
}

.video-premium-featured .vp-play-btn::before {
    top: 10px;
    width: 108px;
    height: 108px;
}

@keyframes vp-pulse {
    0%   { opacity: 0.8; transform: translateX(-50%) scale(0.85); }
    100% { opacity: 0;   transform: translateX(-50%) scale(1.5); }
}

.vp-play-label {
    font-family: var(--font-display);
    font-size: 0.7rem;
    letter-spacing: 0.35em;
    color: var(--color-gold-bright);
    text-transform: uppercase;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
    margin-top: 0.3rem;
}

.video-premium-featured .vp-play-label {
    font-size: 0.78rem;
}

.vp-player:hover .vp-play-btn {
    transform: translate(-50%, -50%) scale(1.1);
}

.vp-player:hover .vp-play-icon {
    filter: drop-shadow(0 0 30px rgba(228, 197, 107, 0.9));
}

.vp-player:hover .vp-play-icon circle:first-of-type {
    fill: rgba(10, 7, 5, 0.75);
}

/* ========== IFRAME APRÈS CLIC ========== */
.vp-player.playing {
    cursor: default;
}

.vp-player.playing .vp-poster {
    display: none;
}

.vp-player iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ========== DESCRIPTION (MODE FEATURED) ========== */
.vp-description {
    padding: 1.8rem 2rem 0.5rem;
    position: relative;
    z-index: 2;
}

.vp-description p {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-cream);
    line-height: 1.75;
    margin: 0 0 1.3rem;
    opacity: 0.92;
}

.vp-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(201, 169, 97, 0.2);
}

.vp-ext-link {
    font-family: var(--font-display);
    font-size: 0.75rem;
    letter-spacing: 0.25em;
    color: var(--color-gold-bright);
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.6rem 1.3rem;
    border: 1px solid rgba(201, 169, 97, 0.4);
    transition: all 0.4s var(--ease-elegant);
}

.vp-ext-link:hover {
    background: rgba(228, 197, 107, 0.1);
    border-color: var(--color-gold-bright);
    color: #fff6d8;
    box-shadow: 0 0 25px rgba(228, 197, 107, 0.3);
}

.vp-source-note {
    font-family: var(--font-italic);
    font-style: italic;
    font-size: 0.85rem;
    color: var(--color-gold);
    opacity: 0.7;
}

/* ========== DESCRIPTION (MODE COMPACT) ========== */
.vp-description-compact {
    padding: 1.3rem 1.4rem 0.5rem;
    position: relative;
    z-index: 2;
}

.vp-description-compact p {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--color-cream);
    line-height: 1.65;
    margin: 0 0 1rem;
    opacity: 0.88;
}

.vp-ext-link-compact {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-display);
    font-size: 0.7rem;
    letter-spacing: 0.25em;
    color: var(--color-gold-bright);
    text-decoration: none;
    text-transform: uppercase;
    padding-top: 0.8rem;
    border-top: 1px solid rgba(201, 169, 97, 0.15);
    transition: all 0.3s;
    width: 100%;
}

.vp-ext-link-compact:hover {
    color: #fff6d8;
    letter-spacing: 0.3em;
}

/* ========== GRILLE DES PLAYERS ========== */
.videos-player-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(460px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* ========== VIDÉOS MENTIONNÉES (liste texte) ========== */
.videos-refs-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 800px;
    margin: 0 auto;
}

.video-ref-item {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 2rem;
    align-items: start;
    padding: 1.5rem 1.8rem;
    background: linear-gradient(145deg,
        rgba(30, 20, 12, 0.7),
        rgba(15, 10, 6, 0.9));
    border-left: 2px solid rgba(201, 169, 97, 0.35);
    transition: all 0.4s;
}

.video-ref-item:hover {
    border-left-color: var(--color-gold-bright);
    transform: translateX(4px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
}

.video-ref-year {
    font-family: var(--font-display);
    font-size: 0.8rem;
    letter-spacing: 0.25em;
    color: var(--color-gold);
    text-transform: uppercase;
    padding-top: 0.3rem;
    text-align: left;
}

.video-ref-title {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    color: var(--color-gold-bright);
    margin: 0 0 0.6rem;
    line-height: 1.3;
}

.video-ref-desc {
    font-size: 0.9rem;
    color: var(--color-cream);
    line-height: 1.6;
    margin: 0 0 1rem;
    opacity: 0.88;
}

.video-ref-link {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    color: var(--color-gold-bright);
    text-decoration: none;
    text-transform: uppercase;
    padding: 0.4rem 0.9rem;
    border: 1px solid rgba(201, 169, 97, 0.3);
    transition: all 0.3s;
}

.video-ref-link:hover {
    background: rgba(228, 197, 107, 0.08);
    border-color: var(--color-gold-bright);
    color: #fff6d8;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 1024px) {
    .videos-player-grid {
        grid-template-columns: 1fr;
        max-width: 800px;
    }
}

@media (max-width: 768px) {
    .video-premium-featured,
    .video-premium-compact {
        padding: 8px;
        margin: 0 1rem;
    }
    .video-premium-featured::before,
    .video-premium-compact::before {
        inset: 5px;
    }
    .vp-corner { width: 14px; height: 14px; top: 3px !important; }
    .vp-corner-tr, .vp-corner-br { right: 3px !important; }
    .vp-corner-bl, .vp-corner-br { bottom: 3px !important; }
    .vp-corner::before { width: 14px !important; }
    .vp-corner::after { height: 14px !important; }

    .vp-overlay { padding: 1rem 1.2rem; }
    .vp-source-badge { font-size: 0.6rem; padding: 0.2rem 0.55rem; }
    .vp-tag { font-size: 0.68rem; }
    .vp-year { font-size: 0.75rem; }
    .vp-title { font-size: 0.88rem; }
    .video-premium-featured .vp-title { font-size: 1.05rem; }

    .vp-play-icon { width: 52px !important; height: 52px !important; }
    .vp-play-btn::before { width: 66px !important; height: 66px !important; top: 14px !important; }
    .vp-play-label { font-size: 0.65rem; }

    .vp-description { padding: 1.3rem 1.2rem 0.5rem; }
    .vp-description-compact { padding: 1rem 1.1rem 0.4rem; }
    .vp-description p { font-size: 0.9rem; }
    .vp-meta { flex-direction: column; align-items: stretch; text-align: center; }
    .vp-ext-link { text-align: center; }

    .video-ref-item {
        grid-template-columns: 1fr;
        gap: 0.6rem;
        padding: 1.2rem 1.3rem;
    }
    .video-ref-year {
        font-size: 0.7rem;
        padding-top: 0;
    }
}

@media (max-width: 480px) {
    .vp-overlay { padding: 0.8rem 1rem; }
    .vp-title { font-size: 0.8rem; max-width: 100%; }
    .video-premium-featured .vp-title { font-size: 0.95rem; }
    .vp-play-icon { width: 44px !important; height: 44px !important; }
    .vp-play-btn::before { width: 56px !important; height: 56px !important; top: 14px !important; }
    .vp-description-compact p { font-size: 0.85rem; }
}

@media (prefers-reduced-motion: reduce) {
    .vp-play-btn::before,
    .video-premium-card::after { animation: none; }
}

/* ==========================================================================
   23. PLAYERS VIDÉO — PALETTE OR CUIVRÉ / ORANGE CHAUD
   Surcharge les couleurs or pâle par un or cuivré orange qui ressort
   spectaculairement sur le fond noir-bordeaux.
   ========================================================================== */

:root {
    --vp-copper-bright:  #ffc876;  /* Or cuivré clair brillant */
    --vp-copper:         #e8a54a;  /* Or cuivré principal - plus orange */
    --vp-copper-deep:    #c07c24;  /* Or cuivré profond */
    --vp-copper-shadow:  #6b3c0a;  /* Ombre cuivrée sombre */
    --vp-amber:          #ff9f3f;  /* Ambre chaude pour accents */
}

/* ========== CONTENEUR : palette cuivrée ========== */
.video-premium-card {
    border: 1px solid rgba(232, 165, 74, 0.55) !important;
    background:
        radial-gradient(ellipse at top left, rgba(232, 165, 74, 0.15), transparent 55%),
        radial-gradient(ellipse at bottom right, rgba(192, 124, 36, 0.08), transparent 50%),
        linear-gradient(145deg,
            rgba(45, 25, 12, 0.95),
            rgba(15, 8, 3, 1)) !important;
    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.75),
        0 0 60px rgba(232, 165, 74, 0.12),
        inset 0 1px 0 rgba(255, 200, 118, 0.2) !important;
}

.video-premium-card::before {
    border-color: rgba(255, 200, 118, 0.35) !important;
}

.video-premium-card::after {
    background: linear-gradient(90deg,
        transparent,
        var(--vp-copper-bright),
        var(--vp-amber),
        var(--vp-copper-bright),
        transparent) !important;
}

.video-premium-card:hover {
    border-color: var(--vp-copper-bright) !important;
    box-shadow:
        0 40px 100px rgba(0, 0, 0, 0.85),
        0 0 120px rgba(255, 159, 63, 0.3),
        0 0 40px rgba(232, 165, 74, 0.4),
        inset 0 1px 0 rgba(255, 200, 118, 0.35) !important;
}

.video-premium-card:hover::before {
    border-color: var(--vp-copper-bright) !important;
}

/* ========== 4 COINS : orange lumineux ========== */
.vp-corner::before,
.vp-corner::after {
    background: var(--vp-copper-bright) !important;
    box-shadow:
        0 0 10px rgba(255, 200, 118, 0.95),
        0 0 20px rgba(255, 159, 63, 0.6),
        0 0 35px rgba(232, 165, 74, 0.3) !important;
}

.video-premium-card:hover .vp-corner::before,
.video-premium-card:hover .vp-corner::after {
    background: #fff2d0 !important;
    box-shadow:
        0 0 20px rgba(255, 242, 208, 1),
        0 0 40px rgba(255, 200, 118, 0.9),
        0 0 60px rgba(255, 159, 63, 0.5) !important;
}

/* ========== PLAYER : bordure chaude ========== */
.vp-player {
    border: 1px solid rgba(232, 165, 74, 0.4) !important;
    box-shadow:
        inset 0 0 80px rgba(0, 0, 0, 0.85),
        inset 0 0 30px rgba(255, 159, 63, 0.08),
        0 15px 30px rgba(0, 0, 0, 0.6) !important;
}

.vp-player:focus-visible {
    outline: 2px solid var(--vp-copper-bright) !important;
    outline-offset: 4px;
    box-shadow:
        inset 0 0 80px rgba(0, 0, 0, 0.85),
        0 0 40px rgba(255, 159, 63, 0.4) !important;
}

/* ========== POSTER : overlay cuivré ========== */
.vp-overlay {
    background: linear-gradient(180deg,
        rgba(10, 5, 2, 0.5) 0%,
        rgba(10, 5, 2, 0) 35%,
        rgba(10, 5, 2, 0) 55%,
        rgba(20, 10, 4, 0.95) 100%) !important;
}

/* ========== BADGE INA : doré cuivré brillant ========== */
.vp-source-badge {
    color: #1a0e02 !important;
    background: linear-gradient(180deg,
        #ffdb94 0%,
        var(--vp-copper-bright) 40%,
        var(--vp-copper) 100%) !important;
    box-shadow:
        0 4px 15px rgba(255, 159, 63, 0.55),
        inset 0 1px 0 rgba(255, 242, 208, 0.6) !important;
    text-shadow: 0 1px 0 rgba(255, 220, 160, 0.6);
}

/* ========== TAG ========== */
.vp-tag {
    color: var(--vp-copper-bright) !important;
    border-left: 2px solid var(--vp-copper-bright) !important;
    background: rgba(15, 8, 3, 0.75) !important;
    box-shadow: 0 0 10px rgba(255, 159, 63, 0.2);
}

/* ========== ANNÉE ET TITRE ========== */
.vp-year {
    color: var(--vp-copper-bright) !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9), 0 0 8px rgba(255, 159, 63, 0.3) !important;
}

.vp-title {
    color: #fff5e0 !important;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.95), 0 0 12px rgba(255, 159, 63, 0.25) !important;
}

/* ========== BOUTON PLAY : cuivré chaleureux ========== */
.vp-play-btn::before {
    border: 1px solid var(--vp-copper-bright) !important;
    box-shadow:
        0 0 15px rgba(255, 200, 118, 0.5),
        inset 0 0 10px rgba(255, 159, 63, 0.15);
}

@keyframes vp-pulse {
    0% {
        opacity: 1;
        transform: translateX(-50%) scale(0.85);
        box-shadow: 0 0 20px rgba(255, 200, 118, 0.7);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) scale(1.5);
        box-shadow: 0 0 0 rgba(255, 200, 118, 0);
    }
}

.vp-play-icon {
    filter: drop-shadow(0 0 25px rgba(255, 159, 63, 0.65)) !important;
}

.vp-player:hover .vp-play-icon {
    filter: drop-shadow(0 0 40px rgba(255, 200, 118, 1))
            drop-shadow(0 0 60px rgba(255, 159, 63, 0.5)) !important;
}

.vp-play-label {
    color: var(--vp-copper-bright) !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9), 0 0 8px rgba(255, 159, 63, 0.4) !important;
    font-weight: 500;
}

/* ========== DESCRIPTION BOUTONS ========== */
.vp-ext-link {
    color: var(--vp-copper-bright) !important;
    border: 1px solid rgba(232, 165, 74, 0.5) !important;
}

.vp-ext-link:hover {
    background: rgba(255, 159, 63, 0.12) !important;
    border-color: var(--vp-copper-bright) !important;
    color: #fff5e0 !important;
    box-shadow:
        0 0 30px rgba(255, 159, 63, 0.4),
        inset 0 0 15px rgba(255, 159, 63, 0.1) !important;
}

.vp-ext-link-compact {
    color: var(--vp-copper-bright) !important;
    border-top-color: rgba(232, 165, 74, 0.25) !important;
}

.vp-ext-link-compact:hover {
    color: #fff5e0 !important;
}

.vp-source-note {
    color: var(--vp-copper) !important;
}

/* ========== SOUS-LIGNE DORÉE : meta ========== */
.vp-meta {
    border-top: 1px solid rgba(232, 165, 74, 0.3) !important;
}

/* ========== FLASH AU CLIC (feedback ouverture INA) ========== */
.vp-player.vp-opened .vp-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center,
        rgba(255, 200, 118, 0.4) 0%,
        rgba(255, 159, 63, 0.2) 40%,
        transparent 70%);
    animation: vp-flash 0.8s ease-out;
    pointer-events: none;
}

@keyframes vp-flash {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}

/* ========== BADGE "OUVRE SUR INA.FR" permanent en bas-droite ========== */
.vp-overlay::before {
    content: '↗';
    position: absolute;
    bottom: 1rem;
    right: 1.2rem;
    font-size: 1.2rem;
    color: var(--vp-copper-bright);
    background: rgba(15, 8, 3, 0.7);
    border: 1px solid rgba(232, 165, 74, 0.5);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow:
        0 0 15px rgba(255, 159, 63, 0.4),
        inset 0 0 8px rgba(255, 159, 63, 0.1);
    transition: all 0.3s;
    z-index: 4;
}

.vp-player:hover .vp-overlay::before {
    background: rgba(232, 165, 74, 0.2);
    color: #fff5e0;
    transform: scale(1.15) rotate(45deg);
    box-shadow:
        0 0 25px rgba(255, 200, 118, 0.7),
        inset 0 0 10px rgba(255, 200, 118, 0.2);
}

/* ========== FOND SVG DU POSTER : teintes plus chaudes ========== */
.vp-bg rect:first-child {
    /* Le fond radial est déjà défini dans le SVG par vidéo via md5 - on override couleur */
}

/* Petite ligne dorée décorative au-dessus de l'info */
.vp-info::before {
    content: '';
    display: block;
    width: 50px;
    height: 2px;
    background: linear-gradient(90deg,
        var(--vp-copper-bright),
        var(--vp-amber),
        transparent);
    box-shadow: 0 0 8px rgba(255, 159, 63, 0.5);
    margin-bottom: 0.6rem;
}

/* ========== LISTE DES VIDÉOS RÉFÉRENCES : bord cuivré ========== */
.video-ref-item {
    border-left-color: rgba(232, 165, 74, 0.55) !important;
    background: linear-gradient(145deg,
        rgba(45, 25, 12, 0.7),
        rgba(20, 10, 4, 0.9)) !important;
}

.video-ref-item:hover {
    border-left-color: var(--vp-copper-bright) !important;
    box-shadow:
        0 15px 30px rgba(0, 0, 0, 0.5),
        -5px 0 25px rgba(255, 159, 63, 0.25) !important;
}

.video-ref-year {
    color: var(--vp-copper-bright) !important;
}

.video-ref-title {
    color: #fff5e0 !important;
}

.video-ref-link {
    color: var(--vp-copper-bright) !important;
    border: 1px solid rgba(232, 165, 74, 0.45) !important;
}

.video-ref-link:hover {
    background: rgba(255, 159, 63, 0.12) !important;
    border-color: var(--vp-copper-bright) !important;
    color: #fff5e0 !important;
}