/* ==========================================================================
   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;
}

/* ==========================================================================
   24. LECTEUR VIDÉO NATIF HTML5 PREMIUM — cadres or cuivré
   Remplace l'ancien système iframe par lecteur natif avec controls.
   ========================================================================== */

.vp-card {
    position: relative;
    background:
        radial-gradient(ellipse at top left, rgba(255, 159, 63, 0.15), transparent 55%),
        radial-gradient(ellipse at bottom right, rgba(192, 124, 36, 0.1), transparent 55%),
        linear-gradient(145deg,
            rgba(45, 25, 12, 0.95) 0%,
            rgba(20, 10, 4, 0.98) 60%,
            rgba(10, 5, 2, 1) 100%);
    border: 1px solid rgba(232, 165, 74, 0.55);
    padding: 14px;
    overflow: hidden;
    transition: all 0.6s var(--ease-elegant);
    isolation: isolate;
    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.75),
        0 0 80px rgba(232, 165, 74, 0.1),
        inset 0 1px 0 rgba(255, 200, 118, 0.2);
}

.vp-card::before {
    content: '';
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(255, 200, 118, 0.3);
    pointer-events: none;
    z-index: 1;
    transition: all 0.5s;
}

.vp-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        var(--vp-copper-bright),
        var(--vp-amber),
        var(--vp-copper-bright),
        transparent);
    transition: left 1.4s var(--ease-elegant);
    z-index: 5;
}

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

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

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

/* Featured : grand format */
.vp-featured {
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px;
}

.vp-featured::before {
    inset: 12px;
}

/* Compact : grille */
.vp-compact {
    padding: 10px;
}

.vp-compact::before {
    inset: 6px;
}

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

.vp-compact .vp-corner {
    width: 18px;
    height: 18px;
}

.vp-corner::before,
.vp-corner::after {
    content: '';
    position: absolute;
    background: var(--vp-copper-bright);
    box-shadow:
        0 0 10px rgba(255, 200, 118, 0.95),
        0 0 20px rgba(255, 159, 63, 0.7),
        0 0 40px rgba(232, 165, 74, 0.35);
    transition: all 0.5s;
}

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

.vp-compact .vp-corner::before { width: 18px; height: 1.5px; }
.vp-compact .vp-corner::after  { width: 1.5px; height: 18px; }

.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; }

.vp-card:hover .vp-corner::before,
.vp-card:hover .vp-corner::after {
    background: #fff2d0;
    box-shadow:
        0 0 25px rgba(255, 242, 208, 1),
        0 0 50px rgba(255, 200, 118, 1),
        0 0 70px rgba(255, 159, 63, 0.5);
}

/* ========== WRAPPER VIDEO avec ratio 16/9 ========== */
.vp-video-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
    border: 1px solid rgba(232, 165, 74, 0.3);
    box-shadow:
        inset 0 0 80px rgba(0, 0, 0, 0.85),
        0 15px 30px rgba(0, 0, 0, 0.6);
    z-index: 2;
}

.vp-video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    background: #000;
}

/* ========== OVERLAY D'INFOS (disparaît à la lecture) ========== */
.vp-overlay-info {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 1.5rem 1.8rem;
    background: linear-gradient(180deg,
        rgba(10, 5, 2, 0.85) 0%,
        rgba(10, 5, 2, 0.5) 60%,
        rgba(10, 5, 2, 0) 100%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    pointer-events: none;
    z-index: 3;
    transition: opacity 0.4s;
}

.vp-featured .vp-overlay-info {
    padding: 2rem 2.5rem;
    gap: 0.6rem;
}

/* Cacher l'overlay quand la vidéo est en lecture */
.vp-video-wrap:has(video:not([paused])) .vp-overlay-info,
.vp-video-wrap:has(video:fullscreen) .vp-overlay-info {
    opacity: 0;
}

/* Légère ligne or décorative */
.vp-overlay-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 10px rgba(255, 159, 63, 0.7);
    margin-bottom: 0.4rem;
}

/* Badge "Archive" */
.vp-badge-archive {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 0.65rem;
    letter-spacing: 0.35em;
    color: #1a0e02;
    background: linear-gradient(180deg, #ffdb94 0%, var(--vp-copper-bright) 50%, var(--vp-copper) 100%);
    padding: 0.3rem 0.9rem;
    border-radius: 2px;
    box-shadow:
        0 5px 18px rgba(255, 159, 63, 0.55),
        inset 0 1px 0 rgba(255, 242, 208, 0.7);
    text-transform: uppercase;
    font-weight: 600;
    text-shadow: 0 1px 0 rgba(255, 220, 160, 0.6);
}

.vp-featured .vp-badge-archive {
    font-size: 0.75rem;
    padding: 0.35rem 1rem;
}

/* Tag thématique */
.vp-tag {
    display: inline-block;
    font-family: var(--font-italic);
    font-style: italic;
    font-size: 0.8rem;
    color: var(--vp-copper-bright);
    background: rgba(15, 8, 3, 0.85);
    padding: 0.25rem 0.8rem;
    border-left: 2px solid var(--vp-copper-bright);
    letter-spacing: 0.03em;
    box-shadow: 0 0 15px rgba(255, 159, 63, 0.25);
}

.vp-featured .vp-tag { font-size: 0.9rem; }

/* Année */
.vp-year {
    font-family: var(--font-italic);
    font-style: italic;
    font-size: 0.9rem;
    color: var(--vp-copper-bright);
    letter-spacing: 0.15em;
    margin-top: 0.3rem;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.95), 0 0 8px rgba(255, 159, 63, 0.4);
}

.vp-featured .vp-year { font-size: 1.05rem; }

/* Titre */
.vp-title {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    font-weight: 500;
    color: #fff5e0;
    line-height: 1.3;
    margin: 0.3rem 0 0;
    letter-spacing: 0.01em;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.98), 0 0 12px rgba(255, 159, 63, 0.3);
    max-width: 85%;
}

.vp-featured .vp-title {
    font-size: clamp(1.4rem, 2.8vw, 2rem);
}

/* ========== PERSONNALISATION DES CONTROLS HTML5 ========== */
.vp-video::-webkit-media-controls-panel {
    background: linear-gradient(180deg,
        rgba(10, 5, 2, 0.4),
        rgba(10, 5, 2, 0.95));
}

.vp-video::-webkit-media-controls-play-button,
.vp-video::-webkit-media-controls-timeline,
.vp-video::-webkit-media-controls-current-time-display,
.vp-video::-webkit-media-controls-time-remaining-display,
.vp-video::-webkit-media-controls-mute-button,
.vp-video::-webkit-media-controls-volume-slider,
.vp-video::-webkit-media-controls-fullscreen-button {
    filter: sepia(80%) saturate(2) hue-rotate(-10deg) brightness(1.1);
}

/* Gros bouton play au centre avant lecture (poster effect) */
.vp-video-wrap::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90px;
    height: 90px;
    border: 2px solid var(--vp-copper-bright);
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(10, 5, 2, 0.7) 0%, rgba(10, 5, 2, 0.4) 70%);
    box-shadow:
        0 0 30px rgba(255, 159, 63, 0.6),
        inset 0 0 20px rgba(255, 159, 63, 0.2);
    pointer-events: none;
    opacity: 0;
    animation: vp-play-hint 2s ease-in-out infinite;
    z-index: 2;
    transition: opacity 0.4s;
}

.vp-compact .vp-video-wrap::after {
    width: 70px;
    height: 70px;
}

/* Le "▶" à l'intérieur du cercle */
.vp-video-wrap::before {
    content: '▶';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--vp-copper-bright);
    font-size: 2rem;
    text-shadow: 0 0 20px rgba(255, 159, 63, 0.8);
    pointer-events: none;
    opacity: 0;
    animation: vp-play-hint 2s ease-in-out infinite;
    z-index: 3;
    margin-left: 4px;
}

.vp-compact .vp-video-wrap::before {
    font-size: 1.6rem;
}

@keyframes vp-play-hint {
    0%, 100% { opacity: 0.75; }
    50% { opacity: 1; }
}

/* Cacher le bouton hint à la lecture */
.vp-video-wrap:has(video[autoplay])::after,
.vp-video-wrap:has(video[autoplay])::before {
    display: none;
}

/* ========== DESCRIPTION SOUS LE PLAYER ========== */
.vp-description {
    padding: 1.6rem 2rem 1rem;
    position: relative;
    z-index: 2;
}

.vp-featured .vp-description {
    padding: 2rem 2.5rem 1.2rem;
}

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

.vp-featured .vp-description p {
    font-size: 1.02rem;
}

.vp-description p:last-child {
    margin-bottom: 0;
}

.vp-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-top: 1rem;
    margin-top: 0.5rem;
    border-top: 1px solid rgba(232, 165, 74, 0.3);
}

.vp-meta-left {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--vp-copper);
    font-family: var(--font-italic);
    font-style: italic;
    font-size: 0.85rem;
    opacity: 0.85;
}

.vp-meta-icon {
    font-size: 1.1rem;
    filter: sepia(60%) saturate(1.5) hue-rotate(-10deg);
}

/* ========== GRILLE ========== */
.vp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(480px, 1fr));
    gap: 2.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

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

@media (max-width: 768px) {
    .vp-featured, .vp-compact {
        padding: 10px;
        margin: 0 1rem;
    }
    .vp-featured::before, .vp-compact::before {
        inset: 6px;
    }
    .vp-corner { width: 18px; height: 18px; 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: 18px !important; }
    .vp-corner::after { height: 18px !important; }

    .vp-overlay-info { padding: 1rem 1.2rem; }
    .vp-badge-archive { font-size: 0.6rem; padding: 0.25rem 0.7rem; }
    .vp-tag { font-size: 0.72rem; }
    .vp-year { font-size: 0.78rem; }
    .vp-title { font-size: 0.88rem; }
    .vp-featured .vp-title { font-size: 1.1rem; }

    .vp-description { padding: 1.3rem 1.3rem 0.8rem; }
    .vp-description p { font-size: 0.88rem; }

    .vp-video-wrap::after { width: 60px !important; height: 60px !important; }
    .vp-video-wrap::before { font-size: 1.4rem !important; }
}

@media (max-width: 480px) {
    .vp-overlay-info { padding: 0.8rem 1rem; gap: 0.3rem; }
    .vp-title { font-size: 0.78rem; max-width: 100%; }
    .vp-description { padding: 1rem 1rem 0.6rem; }
    .vp-video-wrap::after { width: 50px !important; height: 50px !important; }
    .vp-video-wrap::before { font-size: 1.2rem !important; }
}

@media (prefers-reduced-motion: reduce) {
    .vp-video-wrap::after, .vp-video-wrap::before,
    .vp-card::after { animation: none !important; }
}

/* ========== MASQUER LES ANCIENS STYLES OBSOLÈTES ========== */
/* (les classes .video-premium-card, .featured-video-card etc. ne sont plus utilisées
   mais on les neutralise au cas où il reste des templates en cache) */
.video-premium-card, .featured-video-card {
    display: block; /* les anciennes règles sont toujours appliquées, pas de problème */
}

/* ==========================================================================
   25. PHOTOS BIOGRAPHIE — Upgrade ultra-premium
   Encadrements encore plus luxueux : triple cadre or cuivré, halo ambre,
   reflet lumineux, vignetage, légende brodée.
   ========================================================================== */

/* Reset : on surcharge les anciennes règles biographie */
.biography-legacy figure:not(.row),
.home-intro figure {
    position: relative !important;
    padding: 18px !important;
    margin: 3rem auto !important;
    max-width: 100% !important;
    isolation: isolate;
    /* Triple fond : gradient radial or chaud + velours sombre + bordeaux subtil */
    background:
        radial-gradient(ellipse at top left, rgba(255, 159, 63, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse at bottom right, rgba(107, 40, 24, 0.25) 0%, transparent 55%),
        linear-gradient(145deg,
            rgba(45, 25, 12, 0.85) 0%,
            rgba(20, 10, 4, 0.95) 70%,
            rgba(10, 5, 2, 1) 100%) !important;
    transition: all 0.6s var(--ease-elegant);
    /* Ombre profonde + halo ambre externe */
    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.8),
        0 0 50px rgba(255, 159, 63, 0.1),
        inset 0 1px 0 rgba(255, 200, 118, 0.2);
    overflow: visible !important;
}

/* Premier cadre : bordure extérieure or cuivré */
.biography-legacy figure:not(.row)::before,
.home-intro figure::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    border: 1px solid rgba(232, 165, 74, 0.6) !important;
    pointer-events: none;
    transition: all 0.5s;
    z-index: 2;
    box-shadow: inset 0 0 0 1px rgba(255, 200, 118, 0.1);
}

/* Deuxième cadre : bordure intérieure fine ambrée */
.biography-legacy figure:not(.row)::after,
.home-intro figure::after {
    content: '' !important;
    position: absolute !important;
    inset: 10px !important;
    border: 1px solid rgba(255, 200, 118, 0.4) !important;
    pointer-events: none;
    transition: all 0.5s;
    z-index: 2;
}

/* Image : ombre multiple, bord intérieur sombre, animation subtile */
.biography-legacy figure:not(.row) img,
.home-intro figure img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    border: none !important;
    margin: 0 !important;
    position: relative !important;
    z-index: 1 !important;
    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.85),
        0 0 40px rgba(255, 159, 63, 0.08),
        inset 0 0 0 1px rgba(0, 0, 0, 0.6) !important;
    transition: all 0.7s var(--ease-elegant);
}

/* Coins ornementaux en "L" art-déco aux 4 angles */
.biography-legacy figure:not(.row) > .ornament-corner,
.home-intro figure > .ornament-corner {
    position: absolute !important;
    width: 28px !important;
    height: 28px !important;
    pointer-events: none;
    z-index: 4;
    border: 2px solid var(--vp-copper-bright) !important;
    box-shadow:
        0 0 12px rgba(255, 200, 118, 0.8),
        0 0 25px rgba(255, 159, 63, 0.5) !important;
    transition: all 0.5s;
}

.biography-legacy figure:not(.row) > .ornament-corner.tl,
.home-intro figure > .ornament-corner.tl { top: 5px; left: 5px; border-right: none; border-bottom: none; }
.biography-legacy figure:not(.row) > .ornament-corner.tr,
.home-intro figure > .ornament-corner.tr { top: 5px; right: 5px; border-left: none; border-bottom: none; }
.biography-legacy figure:not(.row) > .ornament-corner.bl,
.home-intro figure > .ornament-corner.bl { bottom: 5px; left: 5px; border-right: none; border-top: none; }
.biography-legacy figure:not(.row) > .ornament-corner.br,
.home-intro figure > .ornament-corner.br { bottom: 5px; right: 5px; border-left: none; border-top: none; }

/* Petit losange doré au centre du haut (ornement art-déco signature) */
.biography-legacy figure:not(.row) > .ornament-diamond-top,
.home-intro figure > .ornament-diamond-top {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 14px;
    height: 14px;
    background: linear-gradient(135deg, #ffdb94, #e8a54a);
    border: 1px solid #8b5820;
    box-shadow:
        0 0 15px rgba(255, 200, 118, 0.8),
        0 0 25px rgba(255, 159, 63, 0.4);
    z-index: 5;
    pointer-events: none;
}

.biography-legacy figure:not(.row) > .ornament-diamond-bot,
.home-intro figure > .ornament-diamond-bot {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 14px;
    height: 14px;
    background: linear-gradient(135deg, #ffdb94, #e8a54a);
    border: 1px solid #8b5820;
    box-shadow:
        0 0 15px rgba(255, 200, 118, 0.8),
        0 0 25px rgba(255, 159, 63, 0.4);
    z-index: 5;
    pointer-events: none;
}

/* HOVER : soulèvement, halo intense, illumination complète */
.biography-legacy figure:not(.row):hover,
.home-intro figure:hover {
    transform: translateY(-6px);
    box-shadow:
        0 40px 80px rgba(0, 0, 0, 0.9),
        0 0 100px rgba(255, 159, 63, 0.3),
        0 0 40px rgba(255, 200, 118, 0.25),
        inset 0 1px 0 rgba(255, 200, 118, 0.4);
}

.biography-legacy figure:not(.row):hover::before,
.home-intro figure:hover::before {
    border-color: var(--vp-copper-bright) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 200, 118, 0.3), 0 0 30px rgba(255, 159, 63, 0.3);
}

.biography-legacy figure:not(.row):hover::after,
.home-intro figure:hover::after {
    border-color: #fff2d0 !important;
    inset: 8px !important;
}

.biography-legacy figure:not(.row):hover img,
.home-intro figure:hover img {
    box-shadow:
        0 35px 80px rgba(0, 0, 0, 0.9),
        0 0 60px rgba(255, 159, 63, 0.25),
        inset 0 0 0 1px rgba(0, 0, 0, 0.6) !important;
    filter: brightness(1.04) contrast(1.02);
}

.biography-legacy figure:not(.row):hover > .ornament-corner,
.home-intro figure:hover > .ornament-corner {
    border-color: #fff2d0 !important;
    box-shadow:
        0 0 25px rgba(255, 242, 208, 1),
        0 0 45px rgba(255, 200, 118, 0.9),
        0 0 70px rgba(255, 159, 63, 0.5) !important;
}

.biography-legacy figure:not(.row):hover > .ornament-diamond-top,
.biography-legacy figure:not(.row):hover > .ornament-diamond-bot,
.home-intro figure:hover > .ornament-diamond-top,
.home-intro figure:hover > .ornament-diamond-bot {
    transform: translateX(-50%) rotate(225deg) scale(1.2);
    transition: transform 0.6s var(--ease-elegant);
    box-shadow:
        0 0 25px rgba(255, 242, 208, 1),
        0 0 45px rgba(255, 200, 118, 0.9);
}

/* Légende "brodée" : cartouche doré */
.biography-legacy figure:not(.row) figcaption,
.home-intro figure figcaption {
    display: block !important;
    margin: 1.5rem -8px -2px -8px !important;
    padding: 1rem 1.5rem !important;
    text-align: center !important;
    font-family: var(--font-italic) !important;
    font-style: italic !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.05em !important;
    color: var(--vp-copper-bright) !important;
    line-height: 1.55 !important;
    background:
        linear-gradient(90deg,
            transparent 0%,
            rgba(255, 159, 63, 0.05) 20%,
            rgba(255, 159, 63, 0.08) 50%,
            rgba(255, 159, 63, 0.05) 80%,
            transparent 100%);
    border-top: 1px solid rgba(232, 165, 74, 0.3) !important;
    position: relative !important;
    opacity: 1 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Petits tirets dorés de part et d'autre de la légende */
.biography-legacy figure:not(.row) figcaption::before,
.home-intro figure figcaption::before {
    content: '❦';
    position: absolute;
    left: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--vp-copper-bright);
    font-size: 0.8rem;
    opacity: 0.7;
}

.biography-legacy figure:not(.row) figcaption::after,
.home-intro figure figcaption::after {
    content: '❦';
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--vp-copper-bright);
    font-size: 0.8rem;
    opacity: 0.7;
}

/* Responsive */
@media (max-width: 768px) {
    .biography-legacy figure:not(.row),
    .home-intro figure {
        padding: 12px !important;
        margin: 2rem auto !important;
    }
    .biography-legacy figure:not(.row)::after,
    .home-intro figure::after {
        inset: 6px !important;
    }
    .biography-legacy figure:not(.row) > .ornament-corner,
    .home-intro figure > .ornament-corner {
        width: 20px !important;
        height: 20px !important;
        border-width: 1.5px !important;
    }
    .biography-legacy figure:not(.row) figcaption,
    .home-intro figure figcaption {
        font-size: 0.82rem !important;
        padding: 0.8rem 1rem !important;
    }
    .biography-legacy figure:not(.row) figcaption::before,
    .home-intro figure figcaption::before,
    .biography-legacy figure:not(.row) figcaption::after,
    .home-intro figure figcaption::after {
        display: none;
    }
}

@media (max-width: 480px) {
    .biography-legacy figure:not(.row),
    .home-intro figure {
        padding: 8px !important;
    }
    .biography-legacy figure:not(.row) > .ornament-corner,
    .home-intro figure > .ornament-corner {
        width: 14px !important;
        height: 14px !important;
        border-width: 1px !important;
    }
}

/* ========== FIGURES "ROW" (plusieurs images côte à côte) ========== */
.biography-legacy figure.row {
    position: relative;
    padding: 14px !important;
    margin: 2.5rem auto !important;
    background:
        linear-gradient(145deg,
            rgba(45, 25, 12, 0.8),
            rgba(15, 8, 3, 0.95)) !important;
    border: 1px solid rgba(232, 165, 74, 0.4) !important;
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.7),
        0 0 40px rgba(255, 159, 63, 0.08),
        inset 0 1px 0 rgba(255, 200, 118, 0.15) !important;
}

.biography-legacy figure.row::before {
    content: '' !important;
    position: absolute !important;
    inset: 7px !important;
    border: 1px solid rgba(255, 200, 118, 0.25) !important;
    pointer-events: none;
    z-index: 2;
}

.biography-legacy figure.row .columns img {
    border: 1px solid rgba(232, 165, 74, 0.45) !important;
    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.7),
        0 0 20px rgba(255, 159, 63, 0.1) !important;
    transition: all 0.5s var(--ease-elegant);
}

.biography-legacy figure.row .columns img:hover {
    border-color: var(--vp-copper-bright) !important;
    transform: scale(1.03) translateY(-3px);
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.8),
        0 0 35px rgba(255, 159, 63, 0.35) !important;
}

.biography-legacy figure.row figcaption {
    margin: 1.2rem 0 0 !important;
    padding: 0.8rem 0 0 !important;
    border-top: 1px solid rgba(232, 165, 74, 0.25);
    color: var(--vp-copper-bright) !important;
    font-family: var(--font-italic) !important;
    font-style: italic !important;
    text-align: center;
    font-size: 0.88rem;
    letter-spacing: 0.03em;
}

/* ==========================================================================
   26. FIX BUG TRAIT BLANC AU CLIC — outline doré élégant
   Remplace l'outline blanc par défaut des navigateurs par un focus
   personnalisé or cuivré qui ne s'affiche QU'au clavier (pas à la souris).
   ========================================================================== */

/* Supprimer l'outline bleu/blanc par défaut SUR TOUS LES ÉLÉMENTS */
*:focus {
    outline: none !important;
}

/* Mais réactiver un focus visible uniquement pour la navigation CLAVIER
   (accessibilité) avec :focus-visible — ne s'affiche pas au clic souris */
*:focus-visible {
    outline: 2px solid var(--vp-copper-bright, #ffc876) !important;
    outline-offset: 3px !important;
    border-radius: 2px;
    transition: outline-offset 0.2s;
}

/* Cas spéciaux : liens dans le texte (pas d'outline offset disgracieux) */
p a:focus-visible,
li a:focus-visible,
.nav-link:focus-visible {
    outline-offset: 2px !important;
    text-decoration-color: var(--vp-copper-bright, #ffc876) !important;
}

/* Boutons : pas de décalage d'offset trop visible */
button:focus-visible,
.btn:focus-visible,
a.btn:focus-visible {
    outline-offset: 2px !important;
    box-shadow: 0 0 0 3px rgba(255, 200, 118, 0.25);
}

/* Empêcher tout highlight tap bleu sur mobile */
* {
    -webkit-tap-highlight-color: transparent !important;
}

/* Supprimer le contour orange/bleu autour des images cliquables/liens */
a img, button img {
    outline: none !important;
    border: none;
}

/* Retrait de l'ancien style qui créait le trait blanc */
a:active, button:active, *:active {
    outline: none !important;
}

/* ==========================================================================
   27. PLAYERS VIDÉO HTML5 PREMIUM — cadres lumineux animés
   Lecteur natif avec habillage luxueux or cuivré + animations subtiles.
   ========================================================================== */

/* ========== CARTE VIDÉO ========== */
.vp-card {
    position: relative;
    background:
        radial-gradient(ellipse at top left, rgba(255, 159, 63, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse at bottom right, rgba(192, 124, 36, 0.12) 0%, transparent 55%),
        linear-gradient(145deg,
            rgba(50, 28, 14, 0.95) 0%,
            rgba(22, 12, 5, 0.98) 60%,
            rgba(10, 5, 2, 1) 100%);
    border: 1px solid rgba(232, 165, 74, 0.6);
    padding: 16px;
    overflow: hidden;
    transition: all 0.6s var(--ease-elegant);
    isolation: isolate;
    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.8),
        0 0 70px rgba(255, 159, 63, 0.12),
        inset 0 1px 0 rgba(255, 200, 118, 0.25);
}

/* Bordure intérieure décalée (double cadre) */
.vp-card::before {
    content: '';
    position: absolute;
    inset: 10px;
    border: 1px solid rgba(255, 200, 118, 0.35);
    pointer-events: none;
    z-index: 1;
    transition: all 0.5s;
}

/* Balayage lumineux doré au survol */
.vp-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 200, 118, 0.4) 30%,
        #ffc876 50%,
        rgba(255, 159, 63, 0.7) 70%,
        transparent 100%);
    transition: left 1.6s var(--ease-elegant);
    z-index: 7;
    box-shadow: 0 0 20px rgba(255, 200, 118, 0.8);
}

.vp-card:hover {
    border-color: var(--vp-copper-bright);
    transform: translateY(-4px);
    box-shadow:
        0 50px 110px rgba(0, 0, 0, 0.9),
        0 0 160px rgba(255, 159, 63, 0.3),
        0 0 60px rgba(232, 165, 74, 0.5),
        inset 0 1px 0 rgba(255, 200, 118, 0.4);
}

.vp-card:hover::before {
    border-color: var(--vp-copper-bright);
    inset: 8px;
}

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

.vp-featured {
    max-width: 1100px;
    margin: 0 auto;
    padding: 22px;
}

.vp-featured::before { inset: 14px; }

.vp-compact { padding: 12px; }
.vp-compact::before { inset: 8px; }

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

.vp-compact .vp-corner {
    width: 20px;
    height: 20px;
}

.vp-corner::before,
.vp-corner::after {
    content: '';
    position: absolute;
    background: var(--vp-copper-bright);
    box-shadow:
        0 0 12px rgba(255, 200, 118, 1),
        0 0 25px rgba(255, 159, 63, 0.75),
        0 0 45px rgba(232, 165, 74, 0.4);
    transition: all 0.5s;
}

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

.vp-compact .vp-corner::before { width: 20px; height: 1.5px; }
.vp-compact .vp-corner::after  { width: 1.5px; height: 20px; }

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

.vp-card:hover .vp-corner::before,
.vp-card:hover .vp-corner::after {
    background: #fff5d8;
    box-shadow:
        0 0 25px rgba(255, 245, 216, 1),
        0 0 50px rgba(255, 200, 118, 1),
        0 0 80px rgba(255, 159, 63, 0.6);
}

/* Petits losanges centrés en haut/bas (signature art-déco) */
.vp-diamond {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 14px;
    height: 14px;
    background: linear-gradient(135deg, #ffdb94, var(--vp-copper));
    border: 1px solid #8b5820;
    box-shadow:
        0 0 15px rgba(255, 200, 118, 0.9),
        0 0 30px rgba(255, 159, 63, 0.5);
    z-index: 8;
    pointer-events: none;
    transition: all 0.5s var(--ease-elegant);
}

.vp-diamond-top { top: -7px; }
.vp-diamond-bot { bottom: -7px; }

.vp-card:hover .vp-diamond {
    transform: translateX(-50%) rotate(225deg) scale(1.2);
    box-shadow:
        0 0 25px rgba(255, 245, 216, 1),
        0 0 50px rgba(255, 200, 118, 0.9);
}

/* ========== VIDEO WRAPPER ========== */
.vp-video-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
    border: 1px solid rgba(232, 165, 74, 0.35);
    box-shadow:
        inset 0 0 80px rgba(0, 0, 0, 0.9),
        0 15px 30px rgba(0, 0, 0, 0.6);
    z-index: 2;
}

.vp-video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    background: #000;
    outline: none;
}

/* ========== OVERLAY D'INFOS ========== */
.vp-overlay-info {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 1.5rem 1.8rem 3rem;
    background: linear-gradient(180deg,
        rgba(10, 5, 2, 0.9) 0%,
        rgba(10, 5, 2, 0.5) 55%,
        rgba(10, 5, 2, 0) 100%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45rem;
    pointer-events: none;
    z-index: 3;
    transition: opacity 0.5s;
}

.vp-featured .vp-overlay-info {
    padding: 2rem 2.5rem 4rem;
    gap: 0.55rem;
}

/* Masquer l'overlay quand la vidéo est en lecture (Chrome+Firefox supportent :paused) */
.vp-video-wrap:has(video:not(:paused)) .vp-overlay-info {
    opacity: 0;
    pointer-events: none;
}

/* Ligne décorative or animée */
.vp-overlay-info::before {
    content: '';
    display: block;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg,
        var(--vp-copper-bright) 0%,
        var(--vp-amber) 50%,
        transparent 100%);
    box-shadow: 0 0 10px rgba(255, 159, 63, 0.8);
    margin-bottom: 0.5rem;
    animation: vp-line-shimmer 3s ease-in-out infinite;
}

@keyframes vp-line-shimmer {
    0%, 100% { opacity: 0.7; width: 60px; }
    50% { opacity: 1; width: 75px; }
}

.vp-badge-archive {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 0.68rem;
    letter-spacing: 0.35em;
    color: #1a0e02;
    background: linear-gradient(180deg, #ffdb94 0%, var(--vp-copper-bright) 50%, var(--vp-copper) 100%);
    padding: 0.35rem 1rem;
    border-radius: 2px;
    box-shadow:
        0 5px 20px rgba(255, 159, 63, 0.6),
        inset 0 1px 0 rgba(255, 245, 216, 0.75);
    text-transform: uppercase;
    font-weight: 600;
    text-shadow: 0 1px 0 rgba(255, 220, 160, 0.6);
}

.vp-featured .vp-badge-archive {
    font-size: 0.78rem;
    padding: 0.4rem 1.1rem;
}

.vp-tag {
    display: inline-block;
    font-family: var(--font-italic);
    font-style: italic;
    font-size: 0.82rem;
    color: var(--vp-copper-bright);
    background: rgba(15, 8, 3, 0.85);
    padding: 0.28rem 0.85rem;
    border-left: 2px solid var(--vp-copper-bright);
    letter-spacing: 0.03em;
    box-shadow: 0 0 15px rgba(255, 159, 63, 0.3);
    max-width: fit-content;
}

.vp-featured .vp-tag { font-size: 0.92rem; }

.vp-year {
    font-family: var(--font-italic);
    font-style: italic;
    font-size: 0.95rem;
    color: var(--vp-copper-bright);
    letter-spacing: 0.18em;
    margin-top: 0.3rem;
    text-shadow:
        0 2px 12px rgba(0, 0, 0, 0.95),
        0 0 10px rgba(255, 159, 63, 0.5);
}

.vp-featured .vp-year { font-size: 1.1rem; }

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

.vp-featured .vp-title {
    font-size: clamp(1.5rem, 2.8vw, 2.1rem);
}

/* ========== HINT PLAY AVANT LECTURE ========== */
.vp-video-wrap::before,
.vp-video-wrap::after {
    pointer-events: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transition: opacity 0.4s;
    z-index: 2;
}

/* Anneau pulsant */
.vp-video-wrap::after {
    content: '';
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    border: 2px solid var(--vp-copper-bright);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(10, 5, 2, 0.75) 0%, rgba(10, 5, 2, 0.4) 70%);
    box-shadow:
        0 0 35px rgba(255, 159, 63, 0.7),
        inset 0 0 25px rgba(255, 159, 63, 0.25);
    animation: vp-pulse-ring 2.2s ease-in-out infinite;
    opacity: 0.9;
}

/* Triangle play */
.vp-video-wrap::before {
    content: '';
    transform: translate(calc(-50% + 4px), -50%);
    width: 0;
    height: 0;
    border-left: 24px solid var(--vp-copper-bright);
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    filter: drop-shadow(0 0 15px rgba(255, 200, 118, 0.9));
    z-index: 3;
    opacity: 1;
}

.vp-compact .vp-video-wrap::after { width: 75px; height: 75px; }
.vp-compact .vp-video-wrap::before {
    border-left-width: 18px;
    border-top-width: 11px;
    border-bottom-width: 11px;
}

@keyframes vp-pulse-ring {
    0%, 100% {
        opacity: 0.9;
        box-shadow:
            0 0 35px rgba(255, 159, 63, 0.7),
            inset 0 0 25px rgba(255, 159, 63, 0.25);
    }
    50% {
        opacity: 1;
        box-shadow:
            0 0 60px rgba(255, 200, 118, 1),
            0 0 100px rgba(255, 159, 63, 0.6),
            inset 0 0 30px rgba(255, 159, 63, 0.35);
    }
}

/* Masquer le hint dès que la vidéo tourne */
.vp-video-wrap:has(video:not(:paused))::before,
.vp-video-wrap:has(video:not(:paused))::after {
    opacity: 0;
}

/* ========== DESCRIPTION ========== */
.vp-description {
    padding: 1.7rem 2.2rem 1.2rem;
    position: relative;
    z-index: 2;
}

.vp-featured .vp-description {
    padding: 2.2rem 2.8rem 1.5rem;
}

.vp-description p {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: #f2e7d0;
    line-height: 1.75;
    margin: 0;
    opacity: 0.96;
}

.vp-featured .vp-description p {
    font-size: 1.02rem;
}

/* ========== GRILLE MP4 SERVEUR ========== */
.vp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(480px, 1fr));
    gap: 2.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* ========== CARTES INA (liens externes, pas de vidéo intégrée) ========== */
.vp-ina-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.vp-ina-card {
    position: relative;
    display: block;
    text-decoration: none;
    background:
        radial-gradient(ellipse at top right, rgba(255, 159, 63, 0.15) 0%, transparent 60%),
        linear-gradient(145deg,
            rgba(40, 22, 10, 0.92) 0%,
            rgba(18, 10, 4, 0.98) 100%);
    border: 1px solid rgba(232, 165, 74, 0.5);
    padding: 14px;
    overflow: hidden;
    transition: all 0.5s var(--ease-elegant);
    min-height: 340px;
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.7),
        0 0 40px rgba(255, 159, 63, 0.08);
}

.vp-ina-card::before {
    content: '';
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(255, 200, 118, 0.3);
    pointer-events: none;
    z-index: 1;
    transition: all 0.5s;
}

/* Balayage au survol */
.vp-ina-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg,
        transparent,
        var(--vp-copper-bright),
        var(--vp-amber),
        transparent);
    box-shadow: 0 0 15px rgba(255, 200, 118, 0.8);
    transition: left 1.2s var(--ease-elegant);
    z-index: 5;
}

.vp-ina-card:hover {
    border-color: var(--vp-copper-bright);
    transform: translateY(-5px);
    box-shadow:
        0 35px 80px rgba(0, 0, 0, 0.85),
        0 0 100px rgba(255, 159, 63, 0.25),
        0 0 40px rgba(232, 165, 74, 0.4);
}

.vp-ina-card:hover::before {
    border-color: var(--vp-copper-bright);
    inset: 6px;
}

.vp-ina-card:hover::after { left: 100%; }

.vp-ina-body {
    position: relative;
    z-index: 2;
    padding: 1.3rem 1.5rem;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 310px;
}

.vp-ina-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.3rem;
}

.vp-ina-badge {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 0.65rem;
    letter-spacing: 0.35em;
    color: #1a0e02;
    background: linear-gradient(180deg, #ffdb94 0%, var(--vp-copper-bright) 50%, var(--vp-copper) 100%);
    padding: 0.3rem 0.85rem;
    border-radius: 2px;
    box-shadow: 0 4px 15px rgba(255, 159, 63, 0.55);
    text-transform: uppercase;
    font-weight: 600;
}

.vp-ina-ext {
    font-size: 1.3rem;
    color: var(--vp-copper-bright);
    text-shadow: 0 0 12px rgba(255, 159, 63, 0.6);
    transition: all 0.4s;
}

.vp-ina-card:hover .vp-ina-ext {
    transform: rotate(45deg) scale(1.2);
    color: #fff5e0;
}

.vp-ina-year {
    font-family: var(--font-italic);
    font-style: italic;
    font-size: 0.9rem;
    color: var(--vp-copper-bright);
    letter-spacing: 0.15em;
    margin: 0.4rem 0 0.5rem;
    text-shadow: 0 0 8px rgba(255, 159, 63, 0.3);
}

.vp-ina-title {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    font-weight: 500;
    color: #fff5e0;
    line-height: 1.3;
    margin: 0 0 0.9rem;
    letter-spacing: 0.01em;
}

.vp-ina-desc {
    font-family: var(--font-body);
    font-size: 0.88rem;
    color: #e8d9bb;
    line-height: 1.6;
    margin: 0 0 1.2rem;
    opacity: 0.9;
    flex-grow: 1;
}

.vp-ina-cta {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 0.72rem;
    letter-spacing: 0.3em;
    color: var(--vp-copper-bright);
    text-transform: uppercase;
    padding-top: 0.8rem;
    border-top: 1px solid rgba(232, 165, 74, 0.25);
    transition: all 0.3s;
    margin-top: auto;
}

.vp-ina-card:hover .vp-ina-cta {
    color: #fff5e0;
    letter-spacing: 0.35em;
}

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

@media (max-width: 768px) {
    .vp-featured, .vp-compact {
        padding: 10px;
        margin: 0 0.8rem;
    }
    .vp-featured::before, .vp-compact::before {
        inset: 6px;
    }
    .vp-corner { width: 20px; height: 20px; top: 4px !important; }
    .vp-corner-tr, .vp-corner-br { right: 4px !important; }
    .vp-corner-bl, .vp-corner-br { bottom: 4px !important; }
    .vp-corner::before { width: 20px !important; }
    .vp-corner::after { height: 20px !important; }

    .vp-diamond { width: 10px; height: 10px; }
    .vp-diamond-top { top: -5px; }
    .vp-diamond-bot { bottom: -5px; }

    .vp-overlay-info { padding: 1rem 1.2rem 2rem; }
    .vp-badge-archive { font-size: 0.6rem; padding: 0.25rem 0.7rem; }
    .vp-tag { font-size: 0.72rem; padding: 0.2rem 0.6rem; }
    .vp-year { font-size: 0.78rem; }
    .vp-title { font-size: 0.88rem; }
    .vp-featured .vp-title { font-size: 1.1rem; }

    .vp-description { padding: 1.3rem 1.3rem 0.9rem; }
    .vp-description p { font-size: 0.88rem; }

    .vp-video-wrap::after { width: 65px !important; height: 65px !important; }
    .vp-video-wrap::before {
        border-left-width: 15px !important;
        border-top-width: 9px !important;
        border-bottom-width: 9px !important;
    }

    .vp-ina-grid { grid-template-columns: 1fr; }
    .vp-ina-body { padding: 1rem 1.2rem; }
}

@media (max-width: 480px) {
    .vp-overlay-info { padding: 0.7rem 0.9rem 1.5rem; gap: 0.3rem; }
    .vp-title { font-size: 0.78rem; max-width: 100%; }
    .vp-description { padding: 1rem 1rem 0.6rem; }
    .vp-video-wrap::after { width: 52px !important; height: 52px !important; }
}

@media (prefers-reduced-motion: reduce) {
    .vp-card::after,
    .vp-video-wrap::after,
    .vp-overlay-info::before,
    .vp-ina-card::after { animation: none !important; }
}

/* ==========================================================================
   28. DISCOGRAPHIE ULTRA-PREMIUM — Fix chevauchement + mise en valeur
   Layout grid propre : 2 colonnes (texte | photo) sans chevauchement.
   Design luxueux or cuivré avec animations subtiles.
   ========================================================================== */

/* ==== Reset propre du conteneur d'article discographie ==== */
.discographie-legacy > article {
    position: relative !important;
    background:
        radial-gradient(ellipse at top left, rgba(255, 159, 63, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at bottom right, rgba(107, 40, 24, 0.15) 0%, transparent 50%),
        linear-gradient(145deg,
            rgba(40, 22, 10, 0.85) 0%,
            rgba(18, 10, 4, 0.95) 70%,
            rgba(10, 5, 2, 0.98) 100%) !important;
    border: 1px solid rgba(232, 165, 74, 0.35) !important;
    padding: 2.2rem 2.5rem !important;
    margin-bottom: 2.5rem !important;
    border-radius: 3px !important;
    isolation: isolate;
    overflow: hidden;
    transition: all 0.5s var(--ease-elegant) !important;
    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 200, 118, 0.12) !important;
}

/* Bande dorée à gauche (retouchée) */
.discographie-legacy > article::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 4px !important;
    height: 100% !important;
    background: linear-gradient(180deg,
        transparent 0%,
        var(--vp-copper-bright) 15%,
        var(--vp-amber) 50%,
        var(--vp-copper-bright) 85%,
        transparent 100%) !important;
    box-shadow: 0 0 15px rgba(255, 159, 63, 0.5) !important;
    opacity: 0.85;
    transition: all 0.5s;
    z-index: 2;
}

/* Balayage doré au survol */
.discographie-legacy > article::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 1px !important;
    background: linear-gradient(90deg,
        transparent,
        var(--vp-copper-bright),
        var(--vp-amber),
        transparent) !important;
    transition: left 1.2s var(--ease-elegant) !important;
    z-index: 3;
}

.discographie-legacy > article:hover {
    border-color: rgba(255, 200, 118, 0.55) !important;
    transform: translateY(-3px) !important;
    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.8),
        0 0 60px rgba(255, 159, 63, 0.15),
        inset 0 1px 0 rgba(255, 200, 118, 0.25) !important;
}

.discographie-legacy > article:hover::before {
    box-shadow: 0 0 25px rgba(255, 200, 118, 0.9) !important;
    opacity: 1;
}

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

/* ==== H2 titre ==== */
.discographie-legacy > article h2 {
    font-family: var(--font-serif) !important;
    font-size: 1.45rem !important;
    color: var(--vp-copper-bright) !important;
    margin: 0 0 0.6rem !important;
    line-height: 1.3 !important;
    letter-spacing: 0.01em !important;
    font-weight: 500 !important;
    font-style: italic;
    text-shadow: 0 0 15px rgba(255, 159, 63, 0.2);
}

/* Badge format (78t, 25CM / 33T, etc.) */
.discographie-legacy .disco-stitre {
    display: inline-block !important;
    font-family: var(--font-display) !important;
    font-style: normal !important;
    color: var(--vp-copper-bright) !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.3em !important;
    text-transform: uppercase !important;
    margin-bottom: 1.5rem !important;
    padding: 0.35rem 1rem !important;
    border: 1px solid rgba(232, 165, 74, 0.5) !important;
    border-radius: 2px !important;
    background: rgba(15, 8, 3, 0.75) !important;
    box-shadow: 0 0 15px rgba(255, 159, 63, 0.15);
}

/* Date */
.discographie-legacy .disco-date {
    font-family: var(--font-italic) !important;
    font-style: italic !important;
    color: var(--vp-copper) !important;
    font-size: 0.95rem !important;
    margin: 0.5rem 0 !important;
    letter-spacing: 0.05em !important;
    opacity: 0.95;
}

/* Paragraphes (musiciens) */
.discographie-legacy > article p {
    color: #f0e4cf !important;
    font-size: 0.95rem !important;
    line-height: 1.7 !important;
    margin: 0 0 0.8rem !important;
    opacity: 0.95;
}

/* ========== FIX CHEVAUCHEMENT : GRID 2 COLONNES ==========
   Quand .disco-content contient une .row avec .columns.ten + .columns.two,
   on force un grid propre pour éviter tout chevauchement.
   ========================================================================= */

/* Cas 1 : .disco-content > .row avec colonnes ten + two */
.discographie-legacy .disco-content > .row {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 2rem !important;
    align-items: start !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* La colonne texte prend toute la place restante */
.discographie-legacy .disco-content > .row > .columns.ten {
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: none !important;
    width: auto !important;
    float: none !important;
}

/* La colonne image : largeur fixe, ne chevauche plus */
.discographie-legacy .disco-content > .row > .columns.two {
    width: 180px !important;
    flex: none !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    display: block !important;
}

/* Les .row internes pour les dates dans la colonne texte restent en flex simple */
.discographie-legacy .disco-content > .row > .columns.ten .row {
    display: block !important;
    margin: 0.5rem 0 !important;
}

.discographie-legacy .disco-content > .row > .columns.ten .row .columns.ten,
.discographie-legacy .disco-content > .row > .columns.ten .row .columns.twelve {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: none !important;
}

/* ========== FIGURE (pochette disque) ULTRA-PREMIUM ========== */
.discographie-legacy figure {
    position: relative !important;
    padding: 10px !important;
    margin: 0 !important;
    background:
        radial-gradient(ellipse at top left, rgba(255, 159, 63, 0.18) 0%, transparent 60%),
        linear-gradient(145deg,
            rgba(45, 25, 12, 0.9) 0%,
            rgba(18, 10, 4, 0.98) 100%) !important;
    border: 1px solid rgba(232, 165, 74, 0.5) !important;
    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.7),
        0 0 25px rgba(255, 159, 63, 0.08),
        inset 0 1px 0 rgba(255, 200, 118, 0.2) !important;
    transition: all 0.5s var(--ease-elegant) !important;
    isolation: isolate;
    overflow: visible !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.discographie-legacy figure::before {
    content: '' !important;
    position: absolute !important;
    inset: 5px !important;
    border: 1px solid rgba(255, 200, 118, 0.3) !important;
    pointer-events: none;
    z-index: 2;
    transition: all 0.5s;
}

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

/* Petits coins lumineux (injectés par JS ou directement) */
.discographie-legacy figure > .ornament-corner {
    position: absolute;
    width: 14px;
    height: 14px;
    z-index: 4;
    pointer-events: none;
    border: 1.5px solid var(--vp-copper-bright);
    box-shadow: 0 0 8px rgba(255, 200, 118, 0.8);
    transition: all 0.5s;
}

.discographie-legacy figure > .ornament-corner.tl { top: 3px; left: 3px; border-right: none; border-bottom: none; }
.discographie-legacy figure > .ornament-corner.tr { top: 3px; right: 3px; border-left: none; border-bottom: none; }
.discographie-legacy figure > .ornament-corner.bl { bottom: 3px; left: 3px; border-right: none; border-top: none; }
.discographie-legacy figure > .ornament-corner.br { bottom: 3px; right: 3px; border-left: none; border-top: none; }

.discographie-legacy figure:hover {
    border-color: var(--vp-copper-bright) !important;
    transform: translateY(-4px) scale(1.02) !important;
    box-shadow:
        0 25px 55px rgba(0, 0, 0, 0.85),
        0 0 45px rgba(255, 159, 63, 0.3),
        0 0 20px rgba(255, 200, 118, 0.2),
        inset 0 1px 0 rgba(255, 200, 118, 0.4) !important;
}

.discographie-legacy figure:hover::before {
    border-color: var(--vp-copper-bright) !important;
    inset: 3px !important;
}

.discographie-legacy figure:hover img {
    filter: brightness(1.06) contrast(1.03) !important;
    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.8),
        0 0 25px rgba(255, 159, 63, 0.2) !important;
}

.discographie-legacy figure:hover > .ornament-corner {
    border-color: #fff5d8;
    box-shadow: 0 0 15px rgba(255, 245, 216, 1), 0 0 25px rgba(255, 200, 118, 0.8);
}

/* ========== LISTE DES TITRES (UL) ========== */
.discographie-legacy ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 1.2rem 0 0 !important;
    border-top: 1px solid rgba(232, 165, 74, 0.2) !important;
}

.discographie-legacy ul li.row {
    display: grid !important;
    grid-template-columns: 110px 1fr 100px !important;
    gap: 1rem !important;
    padding: 0.75rem 0 !important;
    border-bottom: 1px solid rgba(232, 165, 74, 0.12) !important;
    margin: 0 !important;
    align-items: baseline !important;
    transition: all 0.3s;
}

.discographie-legacy ul li.row:hover {
    background: linear-gradient(90deg,
        rgba(255, 159, 63, 0.06) 0%,
        transparent 100%);
    padding-left: 0.8rem !important;
    border-left: 2px solid var(--vp-copper-bright) !important;
    border-bottom-color: rgba(255, 200, 118, 0.3) !important;
}

.discographie-legacy ul li.row:last-child {
    border-bottom: none !important;
}

.discographie-legacy ul li.row span {
    padding: 0 !important;
    margin: 0 !important;
    flex: none !important;
    width: auto !important;
    float: none !important;
}

.discographie-legacy ul li.row .columns.two {
    font-family: 'Courier New', 'Monaco', monospace !important;
    font-size: 0.82rem !important;
    color: var(--vp-copper) !important;
    opacity: 0.85 !important;
    letter-spacing: 0.02em;
    width: auto !important;
}

.discographie-legacy ul li.row .columns.six,
.discographie-legacy ul li.row .columns.eight {
    color: #f0e4cf !important;
    font-size: 0.92rem !important;
    font-family: var(--font-body) !important;
    width: auto !important;
}

.discographie-legacy ul li.row .columns.two.disco-ref2 {
    font-size: 0.78rem !important;
    color: var(--vp-copper-bright) !important;
    opacity: 0.75 !important;
    text-align: right;
    font-style: italic;
    font-family: var(--font-italic) !important;
}

/* ==== Responsive mobile pour discographie ==== */
@media (max-width: 768px) {
    .discographie-legacy > article {
        padding: 1.5rem 1.3rem !important;
    }
    .discographie-legacy > article h2 {
        font-size: 1.2rem !important;
    }

    /* Passage en une seule colonne pour petits écrans */
    .discographie-legacy .disco-content > .row {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    .discographie-legacy .disco-content > .row > .columns.two {
        width: 140px !important;
        margin: 0 auto !important;
    }

    .discographie-legacy ul li.row {
        grid-template-columns: 1fr !important;
        gap: 0.2rem !important;
        padding: 0.6rem 0 !important;
    }

    .discographie-legacy ul li.row .columns.two.disco-ref2 {
        text-align: left;
    }
}

@media (max-width: 480px) {
    .discographie-legacy {
        padding: 0 1rem !important;
    }
    .discographie-legacy > article {
        padding: 1.2rem 1rem !important;
    }
    .discographie-legacy .disco-content > .row > .columns.two {
        width: 120px !important;
    }
}

/* ==========================================================================
   29. INTRO MODAL VIDÉO — Ouverture cinématographique
   Modal plein écran au 1er chargement. Fond noir velours, particules dorées,
   vidéo encadrée, légende art-déco, contrôles minimalistes.
   ========================================================================== */

.intro-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none; /* Masqué PAR DÉFAUT avant JS — évite tout flash */
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at center,
        rgba(30, 15, 5, 0.98) 0%,
        rgba(5, 2, 0, 1) 70%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.6s ease, visibility 0.6s;
    overflow: hidden;
    padding: 20px;
    box-sizing: border-box;
}

/* JS actif : réactive display flex */
.intro-modal.intro-ready {
    display: flex;
}

/* Activation par JS via aria-hidden="false" */
.intro-modal[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Bloquer le scroll du body pendant l'intro */
body.intro-playing {
    overflow: hidden !important;
    position: fixed;
    width: 100%;
}

/* Fermeture en fondu */
.intro-modal.closing {
    opacity: 0;
    transition: opacity 0.8s ease;
}

/* ========== 4 COINS ORNEMENTAUX ========== */
.intro-corner {
    position: absolute;
    width: 60px;
    height: 60px;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    animation: intro-corner-in 1.2s ease-out forwards 0.3s;
}

.intro-corner::before,
.intro-corner::after {
    content: '';
    position: absolute;
    background: linear-gradient(90deg, #ffc876, #ff9f3f);
    box-shadow:
        0 0 20px rgba(255, 200, 118, 1),
        0 0 40px rgba(255, 159, 63, 0.7);
}

.intro-corner::before { width: 60px; height: 2px; }
.intro-corner::after  { width: 2px; height: 60px; }

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

@keyframes intro-corner-in {
    0%   { opacity: 0; transform: scale(0.5); }
    100% { opacity: 1; transform: scale(1); }
}

/* ========== PARTICULES DORÉES DE FOND ========== */
.intro-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.intro-particles span {
    position: absolute;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, #ffc876, transparent 70%);
    border-radius: 50%;
    filter: blur(0.5px);
    animation: intro-particle-float 10s linear infinite;
    opacity: 0;
}

.intro-particles span:nth-child(1) { left: 10%; animation-delay: 0s; }
.intro-particles span:nth-child(2) { left: 20%; animation-delay: 1.5s; }
.intro-particles span:nth-child(3) { left: 30%; animation-delay: 3s; }
.intro-particles span:nth-child(4) { left: 45%; animation-delay: 2s; }
.intro-particles span:nth-child(5) { left: 55%; animation-delay: 4s; }
.intro-particles span:nth-child(6) { left: 65%; animation-delay: 0.8s; }
.intro-particles span:nth-child(7) { left: 75%; animation-delay: 2.5s; }
.intro-particles span:nth-child(8) { left: 85%; animation-delay: 5s; }
.intro-particles span:nth-child(9) { left: 92%; animation-delay: 3.5s; }
.intro-particles span:nth-child(10) { left: 5%; animation-delay: 6s; }

@keyframes intro-particle-float {
    0% {
        transform: translateY(100vh) scale(0);
        opacity: 0;
    }
    10% { opacity: 0.8; transform: translateY(90vh) scale(1); }
    90% { opacity: 0.8; transform: translateY(-10vh) scale(1); }
    100% {
        transform: translateY(-20vh) scale(0);
        opacity: 0;
    }
}

/* ========== WRAPPER VIDEO ========== */
.intro-video-wrap {
    position: relative;
    width: 90%;
    max-width: 1000px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #000;
    z-index: 3;
    border: 1px solid rgba(255, 200, 118, 0.4);
    box-shadow:
        0 0 80px rgba(255, 159, 63, 0.25),
        0 30px 80px rgba(0, 0, 0, 0.8),
        inset 0 0 40px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transform: scale(0.92);
    animation: intro-video-in 1.2s var(--ease-elegant) forwards 0.2s;
}

@keyframes intro-video-in {
    0%   { opacity: 0; transform: scale(0.92); }
    100% { opacity: 1; transform: scale(1); }
}

.intro-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #000;
}

/* ========== LÉGENDE ART-DÉCO (apparaît en bas de la vidéo) ========== */
.intro-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem 2.5rem 2rem;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(10, 5, 2, 0.6) 40%,
        rgba(10, 5, 2, 0.95) 100%);
    text-align: left;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transform: translateY(15px);
    animation: intro-caption-in 1s var(--ease-elegant) forwards 2s;
}

@keyframes intro-caption-in {
    0%   { opacity: 0; transform: translateY(15px); }
    100% { opacity: 1; transform: translateY(0); }
}

.intro-caption-eyebrow {
    display: block;
    font-family: var(--font-display);
    font-size: 0.7rem;
    letter-spacing: 0.4em;
    color: var(--vp-copper-bright, #ffc876);
    text-transform: uppercase;
    margin-bottom: 0.8rem;
    opacity: 0.9;
    text-shadow: 0 0 12px rgba(255, 159, 63, 0.5);
}

.intro-caption-name {
    font-family: 'Limelight', var(--font-display);
    font-size: clamp(2.5rem, 6vw, 4rem);
    letter-spacing: 0.15em;
    line-height: 1;
    color: #fff5e0;
    text-shadow:
        0 0 30px rgba(255, 200, 118, 0.6),
        0 0 60px rgba(255, 159, 63, 0.4),
        0 4px 15px rgba(0, 0, 0, 0.9);
    background: linear-gradient(180deg, #fff5e0 0%, #ffc876 50%, #e8a54a 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    margin-bottom: 0.6rem;
}

.intro-caption-dates {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-family: var(--font-italic);
    font-style: italic;
    font-size: 0.95rem;
    color: var(--vp-copper-bright, #ffc876);
    margin-bottom: 0.8rem;
    letter-spacing: 0.15em;
}

.intro-dash {
    width: 30px;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        var(--vp-copper-bright, #ffc876),
        transparent);
    box-shadow: 0 0 8px rgba(255, 159, 63, 0.8);
}

.intro-caption-tagline {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1rem;
    color: #f0e4cf;
    opacity: 0.92;
    letter-spacing: 0.02em;
}

/* ========== CONTRÔLES ========== */
.intro-controls {
    position: absolute;
    top: 30px;
    right: 30px;
    display: flex;
    gap: 0.8rem;
    z-index: 5;
    opacity: 0;
    animation: intro-controls-in 0.6s ease forwards 1s;
}

@keyframes intro-controls-in {
    0%   { opacity: 0; transform: translateX(20px); }
    100% { opacity: 1; transform: translateX(0); }
}

.intro-ctrl-btn,
.intro-skip-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(15, 8, 3, 0.75);
    border: 1px solid rgba(255, 200, 118, 0.5);
    color: var(--vp-copper-bright, #ffc876);
    font-family: var(--font-display);
    font-size: 0.72rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.4s var(--ease-elegant);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 0 20px rgba(255, 159, 63, 0.15);
}

.intro-ctrl-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
}

.intro-skip-btn {
    padding: 0.6rem 1.2rem;
    border-radius: 2px;
}

.intro-ctrl-btn:hover,
.intro-skip-btn:hover {
    background: rgba(255, 159, 63, 0.15);
    border-color: var(--vp-copper-bright, #ffc876);
    color: #fff5e0;
    transform: translateY(-2px);
    box-shadow:
        0 8px 25px rgba(255, 159, 63, 0.4),
        0 0 20px rgba(255, 200, 118, 0.3);
}

.intro-sound-off {
    opacity: 0;
    transition: opacity 0.3s;
}

.intro-ctrl-btn.muted .intro-sound-off {
    opacity: 1;
}

/* ========== BARRE DE PROGRESSION ========== */
.intro-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(255, 200, 118, 0.1);
    z-index: 5;
}

.intro-progress-bar {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg,
        var(--vp-copper-bright, #ffc876),
        var(--vp-amber, #ff9f3f),
        var(--vp-copper-bright, #ffc876));
    box-shadow: 0 0 15px rgba(255, 200, 118, 0.8);
    transition: width 0.3s linear;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
    .intro-corner { width: 40px; height: 40px; top: 15px !important; left: 15px !important; }
    .intro-corner-tr { right: 15px !important; left: auto !important; }
    .intro-corner-bl { bottom: 15px !important; top: auto !important; }
    .intro-corner-br { bottom: 15px !important; right: 15px !important; top: auto !important; left: auto !important; }
    .intro-corner::before { width: 40px; }
    .intro-corner::after  { height: 40px; }

    .intro-video-wrap { width: calc(100% - 40px); }
    .intro-caption { padding: 1.2rem 1.3rem 1.3rem; }
    .intro-caption-name { font-size: 2rem; letter-spacing: 0.1em; }
    .intro-caption-eyebrow { font-size: 0.6rem; margin-bottom: 0.4rem; }
    .intro-caption-dates { font-size: 0.8rem; }
    .intro-caption-tagline { font-size: 0.85rem; }

    .intro-controls { top: 15px; right: 15px; gap: 0.5rem; }
    .intro-ctrl-btn { width: 36px; height: 36px; }
    .intro-skip-btn { padding: 0.5rem 0.9rem; font-size: 0.65rem; }
    .intro-skip-btn span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .intro-modal, .intro-video-wrap, .intro-corner,
    .intro-caption, .intro-controls, .intro-particles span {
        animation-duration: 0.3s !important;
    }
}

/* ==========================================================================
   30. HERO - COMPOSITION ÉQUILIBRÉE : Logo + Nom + Dates
   Style "poster de concert art-déco" : lisibilité maximum.
   Logo vibraphoniste à gauche, nom "Geo Daly" à droite (ou empilés mobile)
   ========================================================================== */

/* On laisse le .hero-title-premium visible maintenant — on le restyle seulement */
.hero-premium .hero-title-premium { display: flex; flex-direction: column; }

/* Rayons dorés en arrière-plan (8 rayons) - conservés mais moins présents */
.hero-light-rays {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1px;
    height: 1px;
    pointer-events: none;
    z-index: 1;
}

.hero-light-rays span {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 55vh;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(255, 200, 118, 0.1) 40%,
        rgba(255, 159, 63, 0.15) 55%,
        rgba(255, 200, 118, 0.1) 70%,
        transparent 100%);
    filter: blur(2px);
    transform-origin: top center;
    animation: hero-ray-rotate 90s linear infinite;
    opacity: 0.6;
}

.hero-light-rays span:nth-child(1) { transform: rotate(0deg) translateY(-25vh); }
.hero-light-rays span:nth-child(2) { transform: rotate(45deg) translateY(-25vh); animation-delay: -11s; }
.hero-light-rays span:nth-child(3) { transform: rotate(90deg) translateY(-25vh); animation-delay: -22s; }
.hero-light-rays span:nth-child(4) { transform: rotate(135deg) translateY(-25vh); animation-delay: -33s; }
.hero-light-rays span:nth-child(5) { transform: rotate(180deg) translateY(-25vh); animation-delay: -44s; }
.hero-light-rays span:nth-child(6) { transform: rotate(225deg) translateY(-25vh); animation-delay: -55s; }
.hero-light-rays span:nth-child(7) { transform: rotate(270deg) translateY(-25vh); animation-delay: -66s; }
.hero-light-rays span:nth-child(8) { transform: rotate(315deg) translateY(-25vh); animation-delay: -77s; }

@keyframes hero-ray-rotate {
    0%   { transform: rotate(0deg) translateY(-25vh); }
    100% { transform: rotate(360deg) translateY(-25vh); }
}

/* ========== COMPOSITION : Grid logo + nom ========== */
.hero-composition {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    justify-content: center;
    gap: clamp(1.5rem, 4vw, 3rem);
    margin: 1.5rem auto 1.8rem;
    max-width: 1100px;
    position: relative;
    z-index: 3;
}

/* ========== EMBLÈME LOGO (taille raisonnable) ========== */
.hero-logo-emblem {
    position: relative;
    display: block;
    width: clamp(160px, 22vw, 280px);
    aspect-ratio: 1 / 1;
    z-index: 3;
    opacity: 0;
    transform: translateY(20px) scale(0.9);
    animation: hero-logo-in 1.6s var(--ease-elegant) forwards 0.3s;
    flex-shrink: 0;
}

@keyframes hero-logo-in {
    0%   { opacity: 0; transform: translateY(20px) scale(0.9); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Halo cuivré pulsant derrière le logo */
.hero-logo-halo {
    position: absolute;
    inset: -20%;
    background: radial-gradient(circle,
        rgba(255, 200, 118, 0.28) 0%,
        rgba(255, 159, 63, 0.18) 30%,
        rgba(232, 165, 74, 0.08) 55%,
        transparent 80%);
    z-index: 1;
    filter: blur(22px);
    animation: hero-halo-pulse 4.5s ease-in-out infinite;
}

@keyframes hero-halo-pulse {
    0%, 100% { opacity: 0.8; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.08); }
}

/* Image du logo */
.hero-logo-img {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    z-index: 2;
    filter:
        drop-shadow(0 0 30px rgba(255, 159, 63, 0.5))
        drop-shadow(0 0 60px rgba(255, 200, 118, 0.3))
        drop-shadow(0 15px 35px rgba(0, 0, 0, 0.7));
    transition: all 0.8s var(--ease-elegant);
    animation: hero-logo-float 6s ease-in-out infinite;
}

@keyframes hero-logo-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

.hero-logo-emblem:hover .hero-logo-img {
    filter:
        drop-shadow(0 0 50px rgba(255, 200, 118, 0.85))
        drop-shadow(0 0 90px rgba(255, 159, 63, 0.5))
        drop-shadow(0 15px 35px rgba(0, 0, 0, 0.7));
    transform: scale(1.03);
}

/* 4 ornements d'angle art-déco autour du logo */
.hero-logo-corner {
    position: absolute;
    width: 24px;
    height: 24px;
    pointer-events: none;
    z-index: 3;
    transition: all 0.5s;
}

.hero-logo-corner::before,
.hero-logo-corner::after {
    content: '';
    position: absolute;
    background: linear-gradient(90deg, #ffc876, #ff9f3f);
    box-shadow:
        0 0 12px rgba(255, 200, 118, 0.9),
        0 0 25px rgba(255, 159, 63, 0.5);
}

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

.hero-logo-corner-tl { top: -8px; left: -8px; }
.hero-logo-corner-tr { top: -8px; right: -8px; }
.hero-logo-corner-tr::after { right: 0; }
.hero-logo-corner-bl { bottom: -8px; left: -8px; }
.hero-logo-corner-bl::before { bottom: 0; }
.hero-logo-corner-br { bottom: -8px; right: -8px; }
.hero-logo-corner-br::before { bottom: 0; }
.hero-logo-corner-br::after { right: 0; }

.hero-logo-emblem:hover .hero-logo-corner::before,
.hero-logo-emblem:hover .hero-logo-corner::after {
    background: #fff5d8;
    box-shadow:
        0 0 20px rgba(255, 245, 216, 1),
        0 0 40px rgba(255, 200, 118, 0.9);
}

/* ========== NAMEPLATE : Nom + dates + tagline ========== */
.hero-nameplate {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    opacity: 0;
    animation: hero-fade-up 1.2s var(--ease-elegant) forwards 0.6s;
}

@keyframes hero-fade-up {
    0%   { opacity: 0; transform: translateX(-15px); }
    100% { opacity: 1; transform: translateX(0); }
}

/* Reset du .hero-title-premium + nouveau style plus lisible */
.hero-premium .hero-title-premium {
    font-family: 'Limelight', var(--font-display, 'Playfair Display'), serif !important;
    display: block !important;
    text-align: left !important;
    margin: 0 !important;
    line-height: 0.95 !important;
    letter-spacing: 0.02em !important;
    position: relative;
}

.hero-premium .hero-title-premium .firstname {
    display: block !important;
    font-size: clamp(2.2rem, 5vw, 3.8rem) !important;
    color: #fff5e0 !important;
    text-shadow: 0 0 20px rgba(255, 200, 118, 0.5) !important;
    letter-spacing: 0.06em !important;
    font-weight: normal !important;
    -webkit-text-stroke: 0 !important;
    background: linear-gradient(180deg, #fff5e0 0%, #ffdb94 40%, #ffc876 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    margin-bottom: 0.1rem !important;
    animation: none !important;
    transform: none !important;
}

.hero-premium .hero-title-premium .lastname {
    display: block !important;
    font-size: clamp(3.2rem, 8vw, 6rem) !important;
    color: #ffc876 !important;
    letter-spacing: 0.04em !important;
    font-weight: normal !important;
    -webkit-text-stroke: 0 !important;
    background: linear-gradient(180deg,
        #fff5e0 0%,
        #ffdb94 30%,
        #ffc876 55%,
        #e8a54a 80%,
        #c07c24 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    text-shadow: none !important;
    filter: drop-shadow(0 2px 15px rgba(255, 159, 63, 0.4))
            drop-shadow(0 0 30px rgba(255, 200, 118, 0.3));
    animation: none !important;
    transform: none !important;
    position: relative;
}

/* Petit ornement décoratif sous le nom (ligne dorée + losange) */
.hero-premium .hero-title-premium .lastname::after {
    content: '';
    display: block;
    width: 60%;
    max-width: 200px;
    height: 1px;
    margin: 0.7rem 0 0;
    background: linear-gradient(90deg,
        var(--vp-copper-bright, #ffc876) 0%,
        var(--vp-amber, #ff9f3f) 50%,
        transparent 100%);
    box-shadow: 0 0 10px rgba(255, 159, 63, 0.7);
}

/* Dates */
.hero-premium .hero-dates-premium {
    display: flex !important;
    align-items: center !important;
    gap: 0.9rem !important;
    font-family: var(--font-italic, 'Cormorant Garamond'), serif !important;
    font-style: italic !important;
    font-size: clamp(0.9rem, 1.3vw, 1.05rem) !important;
    color: var(--vp-copper-bright, #ffc876) !important;
    letter-spacing: 0.2em !important;
    margin: 0.3rem 0 0.2rem !important;
    opacity: 0.95 !important;
    animation: none !important;
    transform: none !important;
}

.hero-premium .hero-dates-premium .hero-dash {
    width: 30px;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--vp-copper-bright, #ffc876) 50%,
        transparent 100%) !important;
    box-shadow: 0 0 6px rgba(255, 159, 63, 0.7) !important;
    position: relative;
}

.hero-premium .hero-dates-premium .hero-dash::after {
    content: '◆';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: var(--vp-copper-bright, #ffc876);
    font-size: 0.5rem;
    background: var(--color-ink, #0a0705);
    padding: 0 4px;
    text-shadow: 0 0 8px rgba(255, 159, 63, 0.8);
}

/* Tagline sous les dates */
.hero-tagline-mini {
    font-family: var(--font-italic, 'Cormorant Garamond'), serif;
    font-style: italic;
    font-size: clamp(0.82rem, 1.1vw, 0.95rem);
    color: #d9c8a4;
    opacity: 0.85;
    letter-spacing: 0.05em;
    margin-top: 0.3rem;
}

/* ========== CITATION & BOUTONS ========== */
.hero-premium .hero-subtitle-premium {
    opacity: 0;
    animation: hero-subtitle-in 1s ease forwards 1.3s;
}

@keyframes hero-subtitle-in {
    0%   { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

.hero-premium .hero-actions-premium {
    opacity: 0;
    animation: hero-subtitle-in 1s ease forwards 1.6s;
}

/* ========== RESPONSIVE : Logo au-dessus sur tablette/mobile ========== */
@media (max-width: 900px) {
    .hero-composition {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 1.5rem;
        text-align: center;
    }

    .hero-logo-emblem {
        width: clamp(160px, 35vw, 220px);
    }

    .hero-nameplate {
        align-items: center;
    }

    .hero-premium .hero-title-premium,
    .hero-premium .hero-title-premium .firstname,
    .hero-premium .hero-title-premium .lastname {
        text-align: center !important;
    }

    .hero-premium .hero-title-premium .lastname::after {
        margin: 0.7rem auto 0;
    }

    .hero-premium .hero-dates-premium {
        justify-content: center !important;
    }

    .hero-tagline-mini {
        text-align: center;
    }
}

@media (max-width: 600px) {
    .hero-composition {
        gap: 1rem;
        margin: 1rem auto 1.3rem;
    }

    .hero-logo-emblem {
        width: clamp(140px, 45vw, 180px);
    }

    .hero-logo-corner {
        width: 16px;
        height: 16px;
    }

    .hero-logo-corner-tl, .hero-logo-corner-tr { top: -5px; }
    .hero-logo-corner-bl, .hero-logo-corner-br { bottom: -5px; }
    .hero-logo-corner-tl, .hero-logo-corner-bl { left: -5px; }
    .hero-logo-corner-tr, .hero-logo-corner-br { right: -5px; }
    .hero-logo-corner::before { width: 16px; }
    .hero-logo-corner::after  { height: 16px; }

    .hero-premium .hero-title-premium .firstname {
        font-size: clamp(1.8rem, 8vw, 2.5rem) !important;
    }
    .hero-premium .hero-title-premium .lastname {
        font-size: clamp(2.8rem, 14vw, 4rem) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-logo-img,
    .hero-logo-halo,
    .hero-light-rays span {
        animation: none !important;
    }
}

/* ==========================================================================
   31. BOUTON "REVOIR L'INTRO" DANS LE FOOTER
   ========================================================================== */

.footer-replay-intro {
    background: none;
    border: 1px solid rgba(255, 200, 118, 0.35);
    color: var(--vp-copper-bright, #ffc876);
    font-family: var(--font-display);
    font-size: 0.65rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    padding: 0.3rem 0.8rem;
    margin-left: 0.3rem;
    cursor: pointer;
    transition: all 0.3s;
    border-radius: 2px;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.footer-replay-intro:hover {
    background: rgba(255, 159, 63, 0.1);
    border-color: var(--vp-copper-bright, #ffc876);
    color: #fff5e0;
    box-shadow: 0 0 15px rgba(255, 200, 118, 0.3);
}

.footer-replay-intro span {
    color: var(--vp-copper-bright, #ffc876);
    font-size: 0.75rem;
}

/* ==========================================================================
   32. FIX BOUTON VIBRATO — Feedback visuel et sonore renforcés
   Le bouton Vibrato joue maintenant une note test à chaque clic,
   affiche un toast doré avec le statut, et flashe pour confirmer l'action.
   ========================================================================== */

/* Le bouton vibrato doit pouvoir positionner le toast en absolu */
#vib-vibrato {
    position: relative;
    overflow: visible;
}

/* ===== TOAST DE STATUT (apparaît au-dessus du bouton) ===== */
.vib-toast {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    white-space: nowrap;
    font-family: var(--font-italic, 'Cormorant Garamond', serif);
    font-style: italic;
    font-size: 0.78rem;
    letter-spacing: 0.03em;
    color: #1a0e02;
    background: linear-gradient(180deg,
        #ffdb94 0%,
        var(--vp-copper-bright, #ffc876) 55%,
        var(--vp-copper, #e8a54a) 100%);
    padding: 0.5rem 1.1rem;
    border-radius: 2px;
    border: 1px solid rgba(139, 88, 32, 0.4);
    box-shadow:
        0 8px 25px rgba(255, 159, 63, 0.55),
        0 0 30px rgba(255, 200, 118, 0.4),
        inset 0 1px 0 rgba(255, 245, 216, 0.7);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.35s var(--ease-elegant, cubic-bezier(0.4, 0, 0.2, 1));
    z-index: 10;
    font-weight: 600;
    text-shadow: 0 1px 0 rgba(255, 220, 160, 0.6);
}

/* Petite flèche en bas du toast pointant vers le bouton */
.vib-toast::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid var(--vp-copper, #e8a54a);
    filter: drop-shadow(0 2px 3px rgba(255, 159, 63, 0.4));
}

.vib-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ===== FLASH DU BOUTON AU CLIC ===== */
#vib-vibrato.flashing {
    animation: vib-flash 0.6s ease-out;
}

@keyframes vib-flash {
    0% {
        box-shadow:
            0 0 0 rgba(255, 200, 118, 0),
            0 0 0 rgba(255, 159, 63, 0);
    }
    30% {
        box-shadow:
            0 0 0 8px rgba(255, 200, 118, 0.25),
            0 0 50px rgba(255, 159, 63, 0.6);
    }
    100% {
        box-shadow:
            0 0 0 rgba(255, 200, 118, 0),
            0 0 0 rgba(255, 159, 63, 0);
    }
}

/* ===== ÉTAT ACTIF MIEUX DIFFÉRENCIÉ ===== */
#vib-vibrato.active {
    background: linear-gradient(180deg,
        #ffdb94 0%,
        var(--vp-copper-bright, #ffc876) 50%,
        var(--vp-copper, #e8a54a) 100%) !important;
    color: #1a0e02 !important;
    border-color: var(--vp-copper-bright, #ffc876) !important;
    box-shadow:
        0 0 25px rgba(255, 200, 118, 0.5),
        inset 0 1px 0 rgba(255, 245, 216, 0.7) !important;
    text-shadow: 0 1px 0 rgba(255, 220, 160, 0.5);
    font-weight: 600;
}

#vib-vibrato:not(.active) {
    opacity: 0.85;
}

/* ===== HOVER ===== */
#vib-vibrato:hover {
    transform: translateY(-2px);
    box-shadow:
        0 10px 30px rgba(255, 159, 63, 0.35),
        0 0 40px rgba(255, 200, 118, 0.4) !important;
}

/* ===== Responsive : toast plus petit sur mobile ===== */
@media (max-width: 640px) {
    .vib-toast {
        font-size: 0.7rem;
        padding: 0.4rem 0.85rem;
        bottom: calc(100% + 10px);
    }
}

@media (prefers-reduced-motion: reduce) {
    #vib-vibrato.flashing { animation: none; }
    .vib-toast { transition: opacity 0.2s; }
}

/* ==========================================================================
   33. AUDIT RESPONSIVE — CORRECTIONS FINALES DESKTOP/TABLETTE/MOBILE
   Correctifs appliqués suite à l'audit multi-device complet.
   Breakpoints : ≥1200 (desktop large), 900-1199 (desktop std), 601-899 (tablette),
   ≤600 (mobile), ≤380 (petit mobile).
   ========================================================================== */

/* ===== [1] TABLETTE : 768-900px — Optimiser grilles qui passent trop tôt en 1col ===== */
@media (min-width: 601px) and (max-width: 900px) {
    /* Videos MP4 : 2 colonnes étaient passées en 1, on garde 2 compactes */
    .vp-grid {
        grid-template-columns: 1fr !important;
        max-width: 720px;
    }

    /* Videos INA : 2 colonnes bien visibles */
    .vp-ina-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem;
    }

    /* Discographie : photo disque réduite, grid garde 2 col avec gap plus petit */
    .discographie-legacy .disco-content > .row {
        grid-template-columns: 1fr !important;
        gap: 1.2rem !important;
    }
    .discographie-legacy .disco-content > .row > .columns.two {
        width: 140px !important;
        margin: 0 auto !important;
    }

    /* Disco : liste titres — empiler réf / titre (gagne en lisibilité) */
    .discographie-legacy ul li.row {
        grid-template-columns: 1fr !important;
        gap: 0.15rem !important;
    }
    .discographie-legacy ul li.row .columns.two.disco-ref2 {
        text-align: left;
    }

    /* Hero : sur tablette, garder composition grid 2 col si possible */
    .hero-composition {
        grid-template-columns: auto 1fr;
        gap: 1.8rem;
    }
    .hero-logo-emblem {
        width: clamp(150px, 25vw, 200px);
    }

    /* Presse/Extraits : réduire les minmax pour 2 col tablette */
    .extrait-luxe-grid,
    .presse-luxe-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
    }

    /* Bannière défilante : vitesse plus rapide sur tablette */
    .welcome-marquee .welcome-track {
        font-size: 0.85rem;
    }
}

/* ===== [2] MOBILE PORTRAIT : ≤600px — Tout en 1 colonne, tailles adaptées ===== */
@media (max-width: 600px) {
    /* ---- Bannière défilante ---- */
    .welcome-banner {
        font-size: 0.75rem;
        padding: 0.4rem 0;
    }
    .welcome-separator {
        margin: 0 0.8rem;
    }

    /* ---- Logo + texte du header ---- */
    .brand-logo-3d {
        gap: 0.6rem;
    }
    .logo-3d-wrap {
        width: 40px !important;
        height: 40px !important;
    }
    .brand-text-3d .name {
        font-size: 1rem;
    }
    .brand-text-3d .subtitle {
        font-size: 0.65rem;
    }

    /* ---- Hero : empilement strict ---- */
    .hero-composition {
        gap: 0.8rem;
        margin: 1rem auto 1.2rem;
    }
    .hero-logo-emblem {
        width: clamp(130px, 42vw, 170px);
    }
    .hero-premium .hero-title-premium .firstname {
        font-size: clamp(1.6rem, 7vw, 2.2rem) !important;
    }
    .hero-premium .hero-title-premium .lastname {
        font-size: clamp(2.5rem, 12vw, 3.5rem) !important;
    }
    .hero-tagline-mini {
        font-size: 0.8rem;
    }
    .hero-dates-premium {
        font-size: 0.8rem !important;
        letter-spacing: 0.15em !important;
    }
    .hero-dates-premium .hero-dash {
        width: 20px !important;
    }

    /* ---- Boutons hero : pleine largeur, empilés ---- */
    .hero-actions-premium {
        flex-direction: column;
        gap: 0.8rem;
        width: 100%;
    }
    .hero-actions-premium .btn-premium {
        width: 100%;
        max-width: 280px;
        text-align: center;
    }

    /* ---- Vidéos MP4 : full width sans débordement ---- */
    .vp-featured, .vp-compact {
        margin: 0 !important;
        padding: 8px !important;
    }

    /* ---- Vidéos INA : 1 colonne ---- */
    .vp-ina-grid {
        grid-template-columns: 1fr !important;
        gap: 1.2rem;
    }
    .vp-ina-card {
        min-height: auto;
        padding: 10px;
    }
    .vp-ina-body {
        padding: 1rem 1.1rem;
        min-height: auto;
    }

    /* ---- Discographie : lisibilité maximum ---- */
    .discographie-legacy {
        padding: 0 0.8rem !important;
    }
    .discographie-legacy > article {
        padding: 1.1rem 1rem !important;
        margin-bottom: 1.5rem !important;
    }
    .discographie-legacy > article h2 {
        font-size: 1.05rem !important;
    }
    .discographie-legacy .disco-content > .row > .columns.two {
        width: 110px !important;
    }

    /* ---- Modal intro vidéo : ratio adapté portrait ---- */
    .intro-video-wrap {
        width: calc(100% - 20px) !important;
        aspect-ratio: 9 / 16 !important; /* Format portrait pour mobile */
        max-width: 360px;
    }
    .intro-video {
        object-fit: cover !important; /* Remplit même si ratio différent */
    }
    .intro-caption {
        padding: 1rem 1.2rem 1.2rem !important;
    }
    .intro-caption-eyebrow {
        font-size: 0.55rem !important;
        margin-bottom: 0.3rem !important;
    }
    .intro-caption-name {
        font-size: 1.8rem !important;
        letter-spacing: 0.08em !important;
    }
    .intro-caption-dates {
        font-size: 0.75rem !important;
        gap: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }
    .intro-caption-tagline {
        font-size: 0.78rem !important;
    }
    .intro-controls {
        top: 10px !important;
        right: 10px !important;
        gap: 0.4rem !important;
    }
    .intro-ctrl-btn {
        width: 32px !important;
        height: 32px !important;
    }
    .intro-skip-btn {
        padding: 0.35rem 0.7rem !important;
    }
    .intro-skip-btn span {
        display: none !important;
    }
    .intro-corner {
        width: 30px !important;
        height: 30px !important;
        top: 8px !important;
        left: 8px !important;
    }
    .intro-corner-tr { right: 8px !important; left: auto !important; }
    .intro-corner-bl { bottom: 8px !important; top: auto !important; }
    .intro-corner-br { bottom: 8px !important; right: 8px !important; top: auto !important; left: auto !important; }
    .intro-corner::before { width: 30px !important; }
    .intro-corner::after  { height: 30px !important; }

    /* ---- Vibrato card : réduire marges ---- */
    .vibrato-card {
        padding: 1.5rem 1.2rem !important;
    }

    /* ---- Toast vibrato : recentré si déborde ---- */
    .vib-toast {
        max-width: 90vw;
        white-space: normal;
        text-align: center;
        font-size: 0.72rem !important;
    }

    /* ---- Formulaire contact : full width ---- */
    form input, form textarea, form select {
        width: 100%;
        box-sizing: border-box;
    }
}

/* ===== [3] PETIT MOBILE : ≤380px (iPhone SE, vieux Android) ===== */
@media (max-width: 380px) {
    /* Serrer encore plus */
    .hero-composition {
        gap: 0.5rem;
    }
    .hero-logo-emblem {
        width: clamp(120px, 40vw, 150px);
    }
    .hero-premium .hero-title-premium .firstname {
        font-size: 1.6rem !important;
    }
    .hero-premium .hero-title-premium .lastname {
        font-size: 2.4rem !important;
    }

    /* Bannière défilante encore plus discrète */
    .welcome-banner {
        font-size: 0.7rem;
    }

    /* Modal intro : encore plus compact */
    .intro-caption-name {
        font-size: 1.5rem !important;
    }

    /* Discographie : photo plus petite */
    .discographie-legacy .disco-content > .row > .columns.two {
        width: 90px !important;
    }
    .discographie-legacy > article h2 {
        font-size: 0.98rem !important;
    }

    /* Boutons hero un peu plus petits */
    .hero-actions-premium .btn-premium {
        font-size: 0.7rem;
        padding: 0.85rem 1.2rem;
    }
}

/* ===== [4] PAYSAGE MOBILE : landscape avec hauteur faible ===== */
@media (max-height: 500px) and (orientation: landscape) {
    .hero-premium {
        min-height: auto !important;
        padding: 2rem 1rem !important;
    }
    .hero-composition {
        margin: 0.5rem auto !important;
    }
    .hero-logo-emblem {
        width: 120px !important;
    }

    /* Modal intro en paysage : cadre adapté */
    .intro-video-wrap {
        aspect-ratio: 16 / 9 !important;
        max-height: 80vh;
    }
    .intro-caption-name {
        font-size: 1.4rem !important;
    }
    .intro-caption {
        padding: 0.7rem 1rem !important;
    }
}

/* ===== [5] TRÈS GRAND ÉCRAN : ≥1600px — Éviter éparpillement ===== */
@media (min-width: 1600px) {
    .hero-composition {
        max-width: 1200px;
    }
    .vp-grid, .vp-ina-grid {
        max-width: 1400px;
    }
}

/* ===== [6] FIX UNIVERSEL : éviter toute scrollbar horizontale ===== */
html, body {
    max-width: 100%;
    overflow-x: hidden !important;
}

/* Force les images à ne pas déborder */
img, video, svg, iframe {
    max-width: 100%;
    height: auto;
}

/* Tables : scroll horizontal si nécessaire (pas de débordement silencieux) */
table {
    max-width: 100%;
}

/* ===== [7] TOUCH TARGETS : Apple HIG recommande 44×44px ===== */
@media (pointer: coarse) {
    /* Liens nav, boutons — cible tactile mini 44px */
    .main-nav a,
    .nav-link,
    .btn-premium,
    .vib-ctrl,
    button:not(.mobile-toggle):not(.vp-play-btn),
    .footer-nav a {
        min-height: 44px;
        padding-top: max(0.5rem, 10px);
        padding-bottom: max(0.5rem, 10px);
    }

    /* Lames vibraphone : un peu plus larges au tactile */
    .vib-bar {
        min-width: 40px;
    }
}

/* ===== [8] PREFERS-REDUCED-MOTION : respect absolu ===== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Exceptions pour les animations essentielles à l'UX */
    .intro-modal, .intro-modal.closing {
        transition-duration: 0.3s !important;
    }
}

/* ===== [9] FIX VIEWPORT IOS (barre d'URL qui change la hauteur) ===== */
@supports (-webkit-touch-callout: none) {
    .hero-premium {
        min-height: -webkit-fill-available;
    }
    .intro-modal {
        min-height: -webkit-fill-available;
    }
}

/* ==========================================================================
   34. CADRAGES LUMINEUX PERCUTANTS — Mise en valeur MAX des images
   Cadres dorés avec glow orbital qui tourne, shimmer animé, halo pulsant.
   Appliqué au logo hero et à toutes les photos importantes.
   ========================================================================== */

/* ===== UPGRADE HERO LOGO — Cadre orbital lumineux ===== */
.hero-logo-emblem {
    /* Ajouter un cadre dorée extérieur avec rotation */
    padding: 8px; /* Espace pour le cadre */
}

/* Cadre extérieur fin doré qui tourne lentement */
.hero-logo-emblem::before {
    content: '';
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(255, 200, 118, 0.8) 30deg,
        #ffc876 60deg,
        rgba(255, 159, 63, 0.9) 90deg,
        transparent 120deg,
        transparent 240deg,
        rgba(255, 200, 118, 0.5) 270deg,
        #ffc876 300deg,
        transparent 360deg
    );
    filter: blur(3px);
    opacity: 0.7;
    animation: hero-logo-orbit 12s linear infinite;
    z-index: 0;
    pointer-events: none;
}

/* Masque qui garde seulement le contour (effet anneau lumineux) */
.hero-logo-emblem::after {
    content: '';
    position: absolute;
    inset: -4px;
    background: radial-gradient(circle,
        transparent 0%,
        transparent 65%,
        rgba(10, 5, 2, 0.95) 70%,
        rgba(10, 5, 2, 1) 100%);
    z-index: 1;
    pointer-events: none;
    border-radius: 50%;
}

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

/* L'image passe au-dessus du masque */
.hero-logo-img {
    position: relative;
    z-index: 2;
}

/* Le halo cuivré passe encore plus bas */
.hero-logo-halo {
    z-index: 0 !important;
}

/* ===== CLASSE UNIVERSELLE .luxe-frame — Cadre lumineux percutant ===== */
/* À appliquer sur n'importe quel conteneur d'image pour effet premium */

.luxe-frame {
    position: relative;
    padding: 14px;
    background:
        radial-gradient(ellipse at top left, rgba(255, 159, 63, 0.15), transparent 60%),
        linear-gradient(145deg,
            rgba(40, 22, 10, 0.9) 0%,
            rgba(18, 10, 4, 0.95) 100%);
    border: 1px solid rgba(232, 165, 74, 0.55);
    isolation: isolate;
    overflow: visible;
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.75),
        0 0 50px rgba(255, 159, 63, 0.15),
        inset 0 1px 0 rgba(255, 200, 118, 0.25);
    transition: all 0.5s var(--ease-elegant, cubic-bezier(0.4, 0, 0.2, 1));
}

/* Cadre intérieur décalé */
.luxe-frame::before {
    content: '';
    position: absolute;
    inset: 7px;
    border: 1px solid rgba(255, 200, 118, 0.35);
    pointer-events: none;
    transition: all 0.5s;
    z-index: 2;
}

/* Shimmer qui traverse au survol */
.luxe-frame::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -100%;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 200, 118, 0.3) 30%,
        #ffc876 50%,
        rgba(255, 159, 63, 0.8) 70%,
        transparent 100%);
    box-shadow: 0 0 20px rgba(255, 200, 118, 0.9);
    transition: left 1.5s var(--ease-elegant, cubic-bezier(0.4, 0, 0.2, 1));
    z-index: 10;
    pointer-events: none;
}

.luxe-frame:hover {
    border-color: #ffc876;
    transform: translateY(-5px);
    box-shadow:
        0 35px 80px rgba(0, 0, 0, 0.9),
        0 0 100px rgba(255, 159, 63, 0.35),
        0 0 40px rgba(255, 200, 118, 0.4),
        inset 0 1px 0 rgba(255, 200, 118, 0.4);
}

.luxe-frame:hover::before {
    border-color: #ffc876;
    inset: 5px;
}

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

/* Image à l'intérieur */
.luxe-frame img {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
    border: 1px solid rgba(0, 0, 0, 0.5);
    box-shadow: inset 0 0 0 1px rgba(255, 200, 118, 0.15);
    transition: filter 0.6s;
}

.luxe-frame:hover img {
    filter: brightness(1.05) contrast(1.03);
}

/* ===== LUXE FRAME : 4 ORNEMENTS D'ANGLE (appliqué via JS ou directement) ===== */
.luxe-frame .luxe-corner,
.luxe-corner {
    position: absolute;
    width: 22px;
    height: 22px;
    pointer-events: none;
    z-index: 4;
    transition: all 0.5s;
}

.luxe-corner::before,
.luxe-corner::after {
    content: '';
    position: absolute;
    background: linear-gradient(90deg, #ffdb94, #ff9f3f);
    box-shadow:
        0 0 12px rgba(255, 200, 118, 1),
        0 0 24px rgba(255, 159, 63, 0.6),
        0 0 40px rgba(232, 165, 74, 0.3);
}

.luxe-corner::before { width: 22px; height: 2px; }
.luxe-corner::after  { width: 2px; height: 22px; }

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

.luxe-frame:hover .luxe-corner::before,
.luxe-frame:hover .luxe-corner::after {
    background: #fff5d8;
    box-shadow:
        0 0 22px rgba(255, 245, 216, 1),
        0 0 44px rgba(255, 200, 118, 0.95),
        0 0 70px rgba(255, 159, 63, 0.5);
}

/* ===== UPGRADE : Photos bio + home — Halo permanent subtil ===== */
/* On renforce les cadres existants avec une aura cuivrée permanente */
.biography-legacy figure:not(.row),
.home-intro figure {
    animation: luxe-breathe 6s ease-in-out infinite;
}

@keyframes luxe-breathe {
    0%, 100% {
        box-shadow:
            0 25px 60px rgba(0, 0, 0, 0.8),
            0 0 50px rgba(255, 159, 63, 0.1),
            inset 0 1px 0 rgba(255, 200, 118, 0.2);
    }
    50% {
        box-shadow:
            0 25px 60px rgba(0, 0, 0, 0.8),
            0 0 80px rgba(255, 159, 63, 0.22),
            0 0 30px rgba(255, 200, 118, 0.15),
            inset 0 1px 0 rgba(255, 200, 118, 0.3);
    }
}

/* ===== UPGRADE : Pochettes disques ===== */
.discographie-legacy figure {
    animation: luxe-breathe-small 8s ease-in-out infinite;
}

@keyframes luxe-breathe-small {
    0%, 100% {
        box-shadow:
            0 15px 35px rgba(0, 0, 0, 0.7),
            0 0 25px rgba(255, 159, 63, 0.08);
    }
    50% {
        box-shadow:
            0 15px 35px rgba(0, 0, 0, 0.7),
            0 0 50px rgba(255, 159, 63, 0.2),
            0 0 20px rgba(255, 200, 118, 0.12);
    }
}

/* ===== UPGRADE : Logo hero plus brillant ===== */
.hero-logo-img {
    filter:
        drop-shadow(0 0 40px rgba(255, 159, 63, 0.6))
        drop-shadow(0 0 80px rgba(255, 200, 118, 0.4))
        drop-shadow(0 0 120px rgba(255, 159, 63, 0.25))
        drop-shadow(0 15px 35px rgba(0, 0, 0, 0.7)) !important;
}

.hero-logo-emblem:hover .hero-logo-img {
    filter:
        drop-shadow(0 0 60px rgba(255, 200, 118, 1))
        drop-shadow(0 0 120px rgba(255, 159, 63, 0.7))
        drop-shadow(0 0 180px rgba(255, 200, 118, 0.4))
        drop-shadow(0 15px 35px rgba(0, 0, 0, 0.7)) !important;
}

/* Motion reduce */
@media (prefers-reduced-motion: reduce) {
    .hero-logo-emblem::before {
        animation: none !important;
    }
    .biography-legacy figure:not(.row),
    .home-intro figure,
    .discographie-legacy figure {
        animation: none !important;
    }
}

/* ==========================================================================
   35. DISCOGRAPHIE — REFONTE COMPLÈTE : cadres orange lumineux,
   mise en page stable, gestion multi-images, zéro débordement.
   Remplace ENTIÈREMENT les règles section 28 qui ne géraient pas
   les cas à plusieurs figures dans .columns.two.
   ========================================================================== */

/* ========== GRID PRINCIPAL : texte | galerie photos ========== */
/* Force une grille propre quel que soit le nombre d'images */
.discographie-legacy .disco-content.row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 2.5rem !important;
    align-items: start !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Colonne texte */
.discographie-legacy .disco-content.row > .columns.ten {
    min-width: 0 !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: none !important;
    float: none !important;
}

/* Colonne photos — devient une galerie verticale auto-sizée */
.discographie-legacy .disco-content.row > .columns.two {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.2rem !important;
    width: 190px !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: none !important;
    float: none !important;
    align-items: stretch !important;
    position: sticky;
    top: 2rem;
}

/* Cas où il n'y a pas de .row sur .disco-content (ex article 20 sans images externes) */
.discographie-legacy .disco-content:not(.row) {
    display: block !important;
}

/* ========== CHAQUE FIGURE = 1 CADRE LUMINEUX ORANGE ========== */
/* Override fort de la section 28 pour les figures dans .columns.two */
.discographie-legacy .disco-content .columns.two > figure,
.discographie-legacy figure {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    padding: 12px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    /* Fond multi-gradient chaleureux */
    background:
        radial-gradient(ellipse at top left,
            rgba(255, 159, 63, 0.22) 0%,
            rgba(232, 165, 74, 0.08) 40%,
            transparent 70%),
        radial-gradient(ellipse at bottom right,
            rgba(192, 124, 36, 0.18) 0%,
            transparent 55%),
        linear-gradient(145deg,
            rgba(50, 28, 14, 0.92) 0%,
            rgba(22, 12, 5, 0.98) 65%,
            rgba(10, 5, 2, 1) 100%) !important;
    /* Bordure orange lumineuse */
    border: 1px solid rgba(255, 159, 63, 0.55) !important;
    border-radius: 2px !important;
    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.75),
        0 0 35px rgba(255, 159, 63, 0.15),
        0 0 15px rgba(255, 200, 118, 0.08),
        inset 0 1px 0 rgba(255, 200, 118, 0.25) !important;
    transition: all 0.5s var(--ease-elegant) !important;
    overflow: visible !important;
    isolation: isolate;
}

/* Cadre intérieur décalé (double bordure luxueuse) */
.discographie-legacy figure::before {
    content: '' !important;
    position: absolute !important;
    inset: 6px !important;
    border: 1px solid rgba(255, 200, 118, 0.35) !important;
    pointer-events: none !important;
    z-index: 2 !important;
    transition: all 0.5s !important;
}

/* Balayage lumineux au survol */
.discographie-legacy figure::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 2px !important;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 200, 118, 0.3) 30%,
        #ffc876 50%,
        rgba(255, 200, 118, 0.3) 70%,
        transparent) !important;
    box-shadow: 0 0 15px rgba(255, 200, 118, 0.7) !important;
    transition: left 1.3s var(--ease-elegant) !important;
    z-index: 6 !important;
    pointer-events: none !important;
}

/* ========== IMAGE INTÉRIEURE ========== */
.discographie-legacy figure img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 1 !important;
    border-radius: 1px !important;
    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.75),
        inset 0 0 0 1px rgba(0, 0, 0, 0.45) !important;
    transition: all 0.6s var(--ease-elegant) !important;
    object-fit: contain !important;
}

/* ========== 4 COINS ORNEMENTAUX ORANGE LUMINEUX (injectés par JS) ========== */
.discographie-legacy figure > .ornament-corner {
    position: absolute !important;
    width: 16px !important;
    height: 16px !important;
    z-index: 5 !important;
    pointer-events: none !important;
    border: 0 !important;
    transition: all 0.5s !important;
    background: transparent !important;
}

.discographie-legacy figure > .ornament-corner::before,
.discographie-legacy figure > .ornament-corner::after {
    content: '' !important;
    position: absolute !important;
    background: linear-gradient(90deg, #ffc876, #ff9f3f) !important;
    box-shadow:
        0 0 8px rgba(255, 200, 118, 1),
        0 0 15px rgba(255, 159, 63, 0.7),
        0 0 25px rgba(232, 165, 74, 0.4) !important;
    transition: all 0.5s !important;
}

.discographie-legacy figure > .ornament-corner::before {
    width: 16px !important; height: 1.5px !important;
}
.discographie-legacy figure > .ornament-corner::after {
    width: 1.5px !important; height: 16px !important;
}

.discographie-legacy figure > .ornament-corner.tl { top: 3px !important; left: 3px !important; }
.discographie-legacy figure > .ornament-corner.tr { top: 3px !important; right: 3px !important; }
.discographie-legacy figure > .ornament-corner.tr::after { right: 0 !important; }
.discographie-legacy figure > .ornament-corner.bl { bottom: 3px !important; left: 3px !important; }
.discographie-legacy figure > .ornament-corner.bl::before { bottom: 0 !important; }
.discographie-legacy figure > .ornament-corner.br { bottom: 3px !important; right: 3px !important; }
.discographie-legacy figure > .ornament-corner.br::before { bottom: 0 !important; }
.discographie-legacy figure > .ornament-corner.br::after { right: 0 !important; }

/* ========== HOVER : illumination spectaculaire ========== */
.discographie-legacy figure:hover {
    border-color: var(--vp-copper-bright, #ffc876) !important;
    transform: translateY(-5px) scale(1.02) !important;
    box-shadow:
        0 28px 60px rgba(0, 0, 0, 0.85),
        0 0 80px rgba(255, 159, 63, 0.45),
        0 0 30px rgba(255, 200, 118, 0.3),
        inset 0 1px 0 rgba(255, 200, 118, 0.45) !important;
}

.discographie-legacy figure:hover::before {
    border-color: var(--vp-copper-bright, #ffc876) !important;
    inset: 4px !important;
}

.discographie-legacy figure:hover::after {
    left: 100% !important;
}

.discographie-legacy figure:hover img {
    filter: brightness(1.08) contrast(1.04) !important;
    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.8),
        0 0 30px rgba(255, 159, 63, 0.3) !important;
}

.discographie-legacy figure:hover > .ornament-corner::before,
.discographie-legacy figure:hover > .ornament-corner::after {
    background: #fff5d8 !important;
    box-shadow:
        0 0 20px rgba(255, 245, 216, 1),
        0 0 40px rgba(255, 200, 118, 0.95),
        0 0 60px rgba(255, 159, 63, 0.5) !important;
}

/* ========== CAPTION éventuelle sous l'image ========== */
.discographie-legacy figure figcaption {
    margin: 0.8rem 0 0 !important;
    padding: 0.5rem 0 0 !important;
    border-top: 1px solid rgba(232, 165, 74, 0.25) !important;
    color: var(--vp-copper-bright, #ffc876) !important;
    font-family: var(--font-italic, 'Cormorant Garamond'), serif !important;
    font-style: italic !important;
    text-align: center !important;
    font-size: 0.8rem !important;
    letter-spacing: 0.02em !important;
    line-height: 1.4 !important;
}

/* ========== RESPONSIVE DISCOGRAPHIE ========== */

/* Tablette : photo légèrement plus petite */
@media (max-width: 1024px) and (min-width: 701px) {
    .discographie-legacy .disco-content.row > .columns.two {
        width: 160px !important;
        gap: 1rem !important;
    }
    .discographie-legacy .disco-content.row {
        gap: 2rem !important;
    }
}

/* Tablette portrait + Mobile : passage en 1 colonne, photos centrées en galerie horizontale */
@media (max-width: 700px) {
    .discographie-legacy .disco-content.row {
        display: block !important;
    }

    /* Photos : galerie horizontale centrée au-dessus du texte */
    .discographie-legacy .disco-content.row > .columns.two {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 1rem !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto 1.5rem !important;
        position: static !important;
    }

    .discographie-legacy .disco-content.row > .columns.ten {
        width: 100% !important;
    }

    /* Chaque photo : taille contrôlée et centrée */
    .discographie-legacy .disco-content .columns.two > figure {
        width: 140px !important;
        flex: 0 0 auto !important;
        padding: 8px !important;
    }
}

/* Mobile compact : photos encore plus petites */
@media (max-width: 480px) {
    .discographie-legacy .disco-content .columns.two > figure {
        width: 120px !important;
        padding: 7px !important;
    }
    .discographie-legacy .disco-content.row > .columns.two {
        gap: 0.8rem !important;
    }
    .discographie-legacy figure > .ornament-corner {
        width: 12px !important;
        height: 12px !important;
    }
    .discographie-legacy figure > .ornament-corner::before {
        width: 12px !important;
    }
    .discographie-legacy figure > .ornament-corner::after {
        height: 12px !important;
    }
}

/* Très petit mobile */
@media (max-width: 360px) {
    .discographie-legacy .disco-content .columns.two > figure {
        width: 100px !important;
    }
}

/* ============================================================================
   36. VIDÉOS — REFONTE TOTALE FINALE (override toutes les sections précédentes)
   ============================================================================
   Remplace sections 21, 22, 23, 24, 27. Design propre, lisible, luxueux.
   Règles à !important partout pour garantir le rendu final quel que soit
   l'ordre de cascade.
   ============================================================================ */

/* =========== RESET DES ANCIENNES RÈGLES CASSÉES =========== */
.vp-card, .vp-featured, .vp-compact,
.vp-video-wrap, .vp-overlay-info, .vp-ina-card {
    all: revert;
}

/* =========== CONTAINER PRINCIPAL (.vp-card) =========== */
.vp-card {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 1100px !important;
    margin: 0 auto 3rem !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    isolation: isolate !important;
    overflow: visible !important;

    background:
        radial-gradient(ellipse at top left, rgba(255, 159, 63, 0.18), transparent 55%),
        radial-gradient(ellipse at bottom right, rgba(192, 124, 36, 0.12), transparent 55%),
        linear-gradient(145deg, rgba(50, 28, 14, 0.96), rgba(10, 5, 2, 1)) !important;
    border: 1px solid rgba(255, 159, 63, 0.6) !important;
    border-radius: 3px !important;
    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.75),
        0 0 60px rgba(255, 159, 63, 0.15),
        inset 0 1px 0 rgba(255, 200, 118, 0.25) !important;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.vp-card::before {
    content: '' !important;
    position: absolute !important;
    inset: 12px !important;
    border: 1px solid rgba(255, 200, 118, 0.3) !important;
    pointer-events: none !important;
    z-index: 1 !important;
    border-radius: 2px !important;
    transition: inset 0.4s !important;
}

.vp-card::after { display: none !important; }

.vp-card:hover {
    border-color: #ffc876 !important;
    transform: translateY(-3px) !important;
    box-shadow:
        0 35px 80px rgba(0, 0, 0, 0.85),
        0 0 100px rgba(255, 159, 63, 0.3),
        0 0 40px rgba(255, 200, 118, 0.35) !important;
}

.vp-card:hover::before { inset: 8px !important; border-color: #ffc876 !important; }

.vp-featured {
    max-width: 1100px !important;
    padding: 22px !important;
}

.vp-compact {
    max-width: none !important;
    padding: 14px !important;
    margin: 0 !important;
}

/* =========== 4 COINS ORNEMENTAUX DORÉS =========== */
.vp-corner {
    position: absolute !important;
    width: 28px !important;
    height: 28px !important;
    z-index: 5 !important;
    pointer-events: none !important;
    background: transparent !important;
    border: 0 !important;
    transition: all 0.4s !important;
}

.vp-compact .vp-corner {
    width: 18px !important;
    height: 18px !important;
}

.vp-corner::before,
.vp-corner::after {
    content: '' !important;
    position: absolute !important;
    background: linear-gradient(90deg, #ffc876, #ff9f3f) !important;
    box-shadow:
        0 0 10px rgba(255, 200, 118, 1),
        0 0 20px rgba(255, 159, 63, 0.7) !important;
    transition: all 0.4s !important;
}

.vp-corner::before { width: 28px !important; height: 2px !important; }
.vp-corner::after  { width: 2px !important; height: 28px !important; }

.vp-compact .vp-corner::before { width: 18px !important; height: 1.5px !important; }
.vp-compact .vp-corner::after  { width: 1.5px !important; height: 18px !important; }

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

.vp-card:hover .vp-corner::before,
.vp-card:hover .vp-corner::after {
    background: #fff5d8 !important;
    box-shadow:
        0 0 20px rgba(255, 245, 216, 1),
        0 0 40px rgba(255, 200, 118, 0.9) !important;
}

/* Losanges haut/bas (featured seulement) */
.vp-diamond {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) rotate(45deg) !important;
    width: 14px !important;
    height: 14px !important;
    background: linear-gradient(135deg, #ffdb94, #e8a54a) !important;
    border: 1px solid #8b5820 !important;
    box-shadow: 0 0 15px rgba(255, 200, 118, 0.9) !important;
    z-index: 6 !important;
    pointer-events: none !important;
}

.vp-diamond-top { top: -7px !important; }
.vp-diamond-bot { bottom: -7px !important; }

/* =========== WRAPPER VIDÉO (ratio 16/9 FORCÉ, jamais de débordement) =========== */
.vp-video-wrap {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    background: #000 !important;
    overflow: hidden !important;
    border: 1px solid rgba(232, 165, 74, 0.4) !important;
    box-shadow:
        inset 0 0 60px rgba(0, 0, 0, 0.9),
        0 10px 25px rgba(0, 0, 0, 0.5) !important;
    z-index: 2 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Fallback pour navigateurs sans aspect-ratio */
@supports not (aspect-ratio: 16/9) {
    .vp-video-wrap {
        height: 0 !important;
        padding-bottom: 56.25% !important;
    }
    .vp-video-wrap > video { position: absolute !important; inset: 0 !important; }
}

.vp-video {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    background: #000 !important;
    border: 0 !important;
    outline: none !important;
}

/* =========== OVERLAY INFO (barre sombre dégradée en haut) =========== */
.vp-overlay-info {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.45rem !important;
    padding: 1.3rem 1.6rem 2.5rem !important;
    background: linear-gradient(180deg,
        rgba(10, 5, 2, 0.9) 0%,
        rgba(10, 5, 2, 0.5) 55%,
        rgba(10, 5, 2, 0) 100%) !important;
    pointer-events: none !important;
    z-index: 3 !important;
    transition: opacity 0.5s !important;
    box-sizing: border-box !important;
}

.vp-featured .vp-overlay-info {
    padding: 1.8rem 2.2rem 3.2rem !important;
    gap: 0.6rem !important;
}

/* Ligne dorée décorative au-dessus du badge */
.vp-overlay-info::before {
    content: '' !important;
    display: block !important;
    width: 60px !important;
    height: 2px !important;
    background: linear-gradient(90deg, #ffc876, #ff9f3f, transparent) !important;
    box-shadow: 0 0 10px rgba(255, 159, 63, 0.7) !important;
    margin-bottom: 0.3rem !important;
    flex: none !important;
}

/* Cacher l'overlay pendant la lecture (si browser supporte :has) */
.vp-video-wrap:has(video:not(:paused)) .vp-overlay-info {
    opacity: 0 !important;
}

/* =========== BADGE "ARCHIVE" =========== */
.vp-badge-archive {
    display: inline-block !important;
    font-family: 'Limelight', serif !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.35em !important;
    color: #1a0e02 !important;
    background: linear-gradient(180deg, #ffdb94 0%, #ffc876 50%, #e8a54a 100%) !important;
    padding: 0.35rem 1rem !important;
    border-radius: 2px !important;
    box-shadow:
        0 4px 15px rgba(255, 159, 63, 0.55),
        inset 0 1px 0 rgba(255, 245, 216, 0.7) !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 0 rgba(255, 220, 160, 0.6) !important;
}

.vp-featured .vp-badge-archive {
    font-size: 0.78rem !important;
    padding: 0.42rem 1.1rem !important;
}

/* =========== TAG THÉMATIQUE (sous le badge) =========== */
.vp-tag {
    display: inline-block !important;
    font-family: 'Cormorant Garamond', serif !important;
    font-style: italic !important;
    font-size: 0.82rem !important;
    color: #ffc876 !important;
    background: rgba(10, 5, 2, 0.8) !important;
    padding: 0.25rem 0.8rem !important;
    border-left: 2px solid #ffc876 !important;
    letter-spacing: 0.02em !important;
    box-shadow: 0 0 12px rgba(255, 159, 63, 0.2) !important;
    max-width: fit-content !important;
    position: static !important;
    margin: 0 !important;
}

.vp-featured .vp-tag {
    font-size: 0.92rem !important;
}

/* =========== ANNÉE =========== */
.vp-year {
    font-family: 'Cormorant Garamond', serif !important;
    font-style: italic !important;
    font-size: 0.92rem !important;
    color: #ffc876 !important;
    letter-spacing: 0.18em !important;
    margin: 0.2rem 0 0 !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.95) !important;
}

.vp-featured .vp-year {
    font-size: 1.05rem !important;
}

/* =========== TITRE =========== */
.vp-title {
    font-family: 'Playfair Display', 'Cormorant Garamond', serif !important;
    font-size: 1.15rem !important;
    font-weight: 500 !important;
    color: #fff5e0 !important;
    line-height: 1.3 !important;
    margin: 0.2rem 0 0 !important;
    letter-spacing: 0.01em !important;
    text-shadow:
        0 2px 20px rgba(0, 0, 0, 1),
        0 0 15px rgba(255, 159, 63, 0.35) !important;
    max-width: 85% !important;
}

.vp-featured .vp-title {
    font-size: clamp(1.4rem, 2.6vw, 2rem) !important;
}

/* =========== DESCRIPTION (sous le lecteur) =========== */
.vp-description {
    position: relative !important;
    padding: 1.8rem 2rem 1.2rem !important;
    z-index: 2 !important;
    box-sizing: border-box !important;
}

.vp-featured .vp-description {
    padding: 2.2rem 2.6rem 1.5rem !important;
}

.vp-description p {
    font-family: 'Cormorant Garamond', 'Georgia', serif !important;
    font-size: 1rem !important;
    color: #f2e7d0 !important;
    line-height: 1.75 !important;
    margin: 0 !important;
    opacity: 0.95 !important;
}

.vp-featured .vp-description p {
    font-size: 1.05rem !important;
}

/* =========== GRILLE VIDÉOS MP4 (colonne unique pleine largeur) =========== */
.vp-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 3rem !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
}

/* En desktop large : 2 colonnes si assez de place */
@media (min-width: 1200px) {
    .vp-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        max-width: 1400px !important;
        gap: 2.5rem !important;
    }
}

/* =========== CARTES INA (liens externes) =========== */
.vp-ina-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 1.8rem !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
    padding: 0 1rem !important;
    box-sizing: border-box !important;
}

@media (min-width: 900px) {
    .vp-ina-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 1.5rem !important;
    }
}

.vp-ina-card {
    position: relative !important;
    display: block !important;
    text-decoration: none !important;
    padding: 14px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    isolation: isolate !important;

    background:
        radial-gradient(ellipse at top right, rgba(255, 159, 63, 0.15), transparent 60%),
        linear-gradient(145deg, rgba(40, 22, 10, 0.95), rgba(15, 8, 3, 1)) !important;
    border: 1px solid rgba(255, 159, 63, 0.55) !important;
    border-radius: 3px !important;
    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.7),
        0 0 40px rgba(255, 159, 63, 0.1) !important;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
    min-height: 320px !important;
}

.vp-ina-card::before {
    content: '' !important;
    position: absolute !important;
    inset: 8px !important;
    border: 1px solid rgba(255, 200, 118, 0.3) !important;
    pointer-events: none !important;
    z-index: 1 !important;
    border-radius: 2px !important;
    transition: all 0.4s !important;
}

.vp-ina-card:hover {
    border-color: #ffc876 !important;
    transform: translateY(-4px) !important;
    box-shadow:
        0 30px 65px rgba(0, 0, 0, 0.85),
        0 0 90px rgba(255, 159, 63, 0.25) !important;
}

.vp-ina-card:hover::before {
    inset: 6px !important;
    border-color: #ffc876 !important;
}

/* Corps de la card INA */
.vp-ina-body {
    position: relative !important;
    z-index: 2 !important;
    padding: 1.4rem 1.6rem !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    box-sizing: border-box !important;
    min-height: 290px !important;
}

.vp-ina-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 0.6rem !important;
}

.vp-ina-badge {
    display: inline-block !important;
    font-family: 'Limelight', serif !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.35em !important;
    color: #1a0e02 !important;
    background: linear-gradient(180deg, #ffdb94, #ffc876, #e8a54a) !important;
    padding: 0.3rem 0.9rem !important;
    border-radius: 2px !important;
    box-shadow: 0 4px 15px rgba(255, 159, 63, 0.5) !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 0 rgba(255, 220, 160, 0.5) !important;
}

.vp-ina-ext {
    font-size: 1.4rem !important;
    color: #ffc876 !important;
    text-shadow: 0 0 15px rgba(255, 159, 63, 0.7) !important;
    transition: transform 0.4s !important;
    display: inline-block !important;
}

.vp-ina-card:hover .vp-ina-ext {
    transform: rotate(45deg) scale(1.2) !important;
    color: #fff5e0 !important;
}

/* Tag dans card INA */
.vp-ina-card .vp-tag {
    margin: 0.3rem 0 0.2rem !important;
    align-self: flex-start !important;
}

.vp-ina-year {
    font-family: 'Cormorant Garamond', serif !important;
    font-style: italic !important;
    font-size: 0.9rem !important;
    color: #ffc876 !important;
    letter-spacing: 0.15em !important;
    margin: 0.3rem 0 0.4rem !important;
    text-shadow: 0 0 10px rgba(255, 159, 63, 0.3) !important;
}

.vp-ina-title {
    font-family: 'Playfair Display', serif !important;
    font-size: 1.1rem !important;
    font-weight: 500 !important;
    color: #fff5e0 !important;
    line-height: 1.3 !important;
    margin: 0 0 0.8rem !important;
    letter-spacing: 0.01em !important;
    text-shadow: 0 0 12px rgba(255, 159, 63, 0.2) !important;
}

.vp-ina-desc {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 0.9rem !important;
    color: #e8d9bb !important;
    line-height: 1.6 !important;
    margin: 0 0 1.2rem !important;
    opacity: 0.9 !important;
    flex-grow: 1 !important;
}

.vp-ina-cta {
    display: inline-block !important;
    font-family: 'Limelight', serif !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.3em !important;
    color: #ffc876 !important;
    text-transform: uppercase !important;
    padding-top: 0.9rem !important;
    border-top: 1px solid rgba(232, 165, 74, 0.3) !important;
    margin-top: auto !important;
    transition: all 0.3s !important;
}

.vp-ina-card:hover .vp-ina-cta {
    color: #fff5e0 !important;
    letter-spacing: 0.35em !important;
    border-top-color: #ffc876 !important;
}

/* =========== RESPONSIVE TOTAL =========== */

@media (max-width: 900px) {
    .vp-card {
        max-width: calc(100% - 2rem) !important;
        padding: 14px !important;
        margin: 0 1rem 2rem !important;
    }
    .vp-card::before { inset: 8px !important; }

    .vp-featured { padding: 16px !important; }
    .vp-featured::before { inset: 10px !important; }

    .vp-corner { width: 20px !important; height: 20px !important; }
    .vp-corner::before { width: 20px !important; }
    .vp-corner::after  { height: 20px !important; }

    .vp-overlay-info {
        padding: 1rem 1.2rem 2rem !important;
    }
    .vp-featured .vp-overlay-info {
        padding: 1.3rem 1.5rem 2.5rem !important;
    }

    .vp-badge-archive { font-size: 0.62rem !important; padding: 0.28rem 0.75rem !important; }
    .vp-tag { font-size: 0.72rem !important; padding: 0.2rem 0.6rem !important; }
    .vp-year { font-size: 0.78rem !important; }
    .vp-title { font-size: 0.92rem !important; max-width: 90% !important; }
    .vp-featured .vp-title { font-size: 1.2rem !important; }

    .vp-description {
        padding: 1.3rem 1.3rem 0.9rem !important;
    }
    .vp-description p { font-size: 0.92rem !important; }

    .vp-grid {
        gap: 2rem !important;
    }

    .vp-ina-grid {
        grid-template-columns: 1fr !important;
        padding: 0 1rem !important;
    }

    .vp-ina-card {
        min-height: auto !important;
    }
    .vp-ina-body { padding: 1.1rem 1.3rem !important; min-height: auto !important; }
    .vp-ina-title { font-size: 1rem !important; }
    .vp-ina-desc { font-size: 0.85rem !important; }
}

@media (max-width: 480px) {
    .vp-card {
        margin: 0 0.5rem 1.5rem !important;
        max-width: calc(100% - 1rem) !important;
        padding: 10px !important;
    }
    .vp-card::before { inset: 6px !important; }

    .vp-corner { width: 16px !important; height: 16px !important; }
    .vp-corner::before { width: 16px !important; }
    .vp-corner::after  { height: 16px !important; }

    .vp-overlay-info { padding: 0.8rem 1rem 1.7rem !important; gap: 0.3rem !important; }
    .vp-title { font-size: 0.82rem !important; }
    .vp-featured .vp-title { font-size: 1.05rem !important; }
    .vp-description { padding: 1rem 1rem 0.7rem !important; }
    .vp-description p { font-size: 0.88rem !important; }
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
    .vp-card, .vp-ina-card { transition: none !important; }
    .vp-ina-ext { transition: none !important; }
}

/* ============================================================================
   37. SYSTÈME CHROMATIQUE PREMIUM — 5 PALETTES PAR SECTION
   ============================================================================
   Inspiration : galeries d'art (Musée d'Orsay), maisons de jazz (Blue Note),
   hôtels art-déco (Palace du Bristol). Chaque section a sa couleur signature,
   tout en gardant le fond noir velours commun.
   ============================================================================ */

:root {
    /* ===== PALETTE 1 : OR CUIVRÉ (archives, vidéos, discographie, extraits) ===== */
    --p1-light:   #ffdb94;  /* Or clair éclatant */
    --p1-main:    #e8a54a;  /* Or cuivré principal */
    --p1-deep:    #8b5820;  /* Bronze chaud profond */
    --p1-shadow:  #4a2c10;
    --p1-glow:    rgba(232, 165, 74, 0.45);

    /* ===== PALETTE 2 : GRENAT JAZZ (biographie, presse, citations) ===== */
    --p2-light:   #e48888;  /* Rose poudré */
    --p2-main:    #b44848;  /* Grenat jazz */
    --p2-deep:    #6b1e2a;  /* Bordeaux profond */
    --p2-shadow:  #3a0e18;
    --p2-glow:    rgba(180, 72, 72, 0.40);

    /* ===== PALETTE 3 : BLEU NUIT (contact, mentions, liens externes) ===== */
    --p3-light:   #88b8d8;  /* Bleu céruléen */
    --p3-main:    #4a7fa0;  /* Bleu nuit */
    --p3-deep:    #1e3a5a;  /* Marine profond */
    --p3-shadow:  #0c1a2d;
    --p3-glow:    rgba(74, 127, 160, 0.40);

    /* ===== PALETTE 4 : CHAMPAGNE (hero, accueil, intro — éclat blanc doré) ===== */
    --p4-light:   #f5ecc8;  /* Ivoire champagne */
    --p4-main:    #d8c890;  /* Champagne mûri */
    --p4-deep:    #8a7840;  /* Vieil or */
    --p4-shadow:  #3c3418;
    --p4-glow:    rgba(216, 200, 144, 0.45);

    /* ===== PALETTE 5 : BRONZE PATINÉ (extraits audio, secondaires) ===== */
    --p5-light:   #c8a884;  /* Bronze clair */
    --p5-main:    #9c7a54;  /* Bronze patiné */
    --p5-deep:    #5c3e24;  /* Bronze foncé */
    --p5-shadow:  #2a1c10;
    --p5-glow:    rgba(156, 122, 84, 0.40);
}

/* ============================================================================
   HELPERS : classes utilitaires pour appliquer une palette à un cadre
   ============================================================================ */

/* Classe générique .lux-frame : modèle de cadre premium réutilisable.
   Usage : <div class="lux-frame lux-palette-1">...</div>
   Chaque palette change couleurs bordure + glow + coins SANS toucher au fond. */

.lux-frame {
    position: relative;
    isolation: isolate;
    background:
        linear-gradient(145deg, rgba(30, 20, 10, 0.95), rgba(10, 5, 2, 1));
    border: 1px solid var(--lux-border, rgba(232, 165, 74, 0.5));
    border-radius: 2px;
    padding: 18px;
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.75),
        0 0 50px var(--lux-glow, rgba(232, 165, 74, 0.15)),
        inset 0 1px 0 var(--lux-inner-light, rgba(255, 200, 118, 0.2));
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.lux-frame::before {
    content: '';
    position: absolute;
    inset: 10px;
    border: 1px solid var(--lux-inner-border, rgba(255, 200, 118, 0.25));
    pointer-events: none;
    z-index: 1;
    transition: inset 0.4s, border-color 0.4s;
}

.lux-frame:hover {
    border-color: var(--lux-border-hover, #ffc876);
    transform: translateY(-3px);
    box-shadow:
        0 35px 80px rgba(0, 0, 0, 0.85),
        0 0 100px var(--lux-glow-hover, rgba(255, 159, 63, 0.35)),
        0 0 40px var(--lux-glow, rgba(232, 165, 74, 0.25));
}

.lux-frame:hover::before {
    inset: 6px;
    border-color: var(--lux-border-hover, #ffc876);
}

/* ============================================================================
   APPLICATION AUX PALETTES
   ============================================================================ */

/* PALETTE 1 : Or cuivré — Archives / Vidéos / Discographie / Presse légère */
.discographie-legacy figure,
.vp-card,
.vp-ina-card,
.extrait-card,
.extrait-luxe-card,
.presse-luxe-card,
.vibrato-card {
    --lux-border: rgba(232, 165, 74, 0.55);
    --lux-border-hover: #ffc876;
    --lux-glow: rgba(232, 165, 74, 0.18);
    --lux-glow-hover: rgba(255, 159, 63, 0.4);
    --lux-inner-border: rgba(255, 200, 118, 0.3);
    --lux-inner-light: rgba(255, 200, 118, 0.22);
}

/* PALETTE 2 : Grenat jazz — Biographie (portraits) + citations */
.biography-legacy figure:not(.row),
.home-intro figure,
.vibrato-quote {
    --lux-border: rgba(180, 72, 72, 0.55);
    --lux-border-hover: #e48888;
    --lux-glow: rgba(180, 72, 72, 0.2);
    --lux-glow-hover: rgba(228, 136, 136, 0.45);
    --lux-inner-border: rgba(228, 136, 136, 0.3);
    --lux-inner-light: rgba(228, 136, 136, 0.22);

    /* Surchages couleurs de cadres spécifiques */
    border-color: var(--lux-border) !important;
    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.8),
        0 0 50px var(--lux-glow),
        inset 0 1px 0 var(--lux-inner-light) !important;
}

.biography-legacy figure:not(.row):hover,
.home-intro figure:hover {
    border-color: var(--lux-border-hover) !important;
    box-shadow:
        0 40px 90px rgba(0, 0, 0, 0.9),
        0 0 100px var(--lux-glow-hover),
        0 0 40px rgba(228, 136, 136, 0.3),
        inset 0 1px 0 rgba(228, 136, 136, 0.35) !important;
}

/* Les coins des photos bio passent en grenat clair */
.biography-legacy figure:not(.row) > .ornament-corner,
.home-intro figure > .ornament-corner {
    border-color: #e48888 !important;
    box-shadow:
        0 0 12px rgba(228, 136, 136, 0.85),
        0 0 25px rgba(180, 72, 72, 0.55) !important;
}

.biography-legacy figure:not(.row):hover > .ornament-corner,
.home-intro figure:hover > .ornament-corner {
    border-color: #ffe0e0 !important;
    box-shadow:
        0 0 25px rgba(255, 224, 224, 1),
        0 0 45px rgba(228, 136, 136, 0.9) !important;
}

/* Losanges bio en grenat */
.biography-legacy figure:not(.row) > .ornament-diamond-top,
.biography-legacy figure:not(.row) > .ornament-diamond-bot,
.home-intro figure > .ornament-diamond-top,
.home-intro figure > .ornament-diamond-bot {
    background: linear-gradient(135deg, #e48888, #b44848) !important;
    border-color: #6b1e2a !important;
    box-shadow:
        0 0 15px rgba(228, 136, 136, 0.85),
        0 0 25px rgba(180, 72, 72, 0.45) !important;
}

/* PALETTE 3 : Bleu nuit — Contact + mentions légales (plus sobre) */
.contact-form,
.contact-section .form-wrap,
.mentions-content {
    --lux-border: rgba(74, 127, 160, 0.5);
    --lux-border-hover: #88b8d8;
    --lux-glow: rgba(74, 127, 160, 0.18);
    --lux-glow-hover: rgba(136, 184, 216, 0.4);
}

/* Les liens vers INA.fr restent bleus pour signaler l'externe */
.vp-ina-card:hover {
    border-color: #88b8d8 !important;
    box-shadow:
        0 30px 65px rgba(0, 0, 0, 0.85),
        0 0 90px rgba(74, 127, 160, 0.3),
        0 0 40px rgba(136, 184, 216, 0.25) !important;
}

.vp-ina-card:hover .vp-ina-ext {
    color: #88b8d8 !important;
    text-shadow: 0 0 20px rgba(136, 184, 216, 0.9) !important;
}

.vp-ina-card:hover .vp-ina-cta {
    color: #88b8d8 !important;
    border-top-color: #88b8d8 !important;
}

/* PALETTE 4 : Champagne — Hero + modal intro */
.hero-premium,
.intro-modal,
.hero-frame,
.hero-frame-inner {
    --lux-border: rgba(216, 200, 144, 0.5);
    --lux-border-hover: #f5ecc8;
    --lux-glow: rgba(216, 200, 144, 0.2);
    --lux-glow-hover: rgba(245, 236, 200, 0.5);
}

/* Les cadres hero en champagne plus clair, plus lumineux */
.hero-frame {
    border-color: rgba(216, 200, 144, 0.35) !important;
}

.hero-frame-inner {
    border-color: rgba(245, 236, 200, 0.25) !important;
}

/* Le logo hero garde son halo champagne */
.hero-logo-halo {
    background: radial-gradient(circle,
        rgba(245, 236, 200, 0.25) 0%,
        rgba(216, 200, 144, 0.15) 35%,
        rgba(138, 120, 64, 0.08) 60%,
        transparent 80%) !important;
}

/* PALETTE 5 : Bronze patiné — Extraits audio (players MP3) */
.audio-player,
.extrait-luxe-card .audio-player,
.extrait-premium,
.premium-audio-player {
    --lux-border: rgba(156, 122, 84, 0.5);
    --lux-border-hover: #c8a884;
    --lux-glow: rgba(156, 122, 84, 0.15);
    --lux-glow-hover: rgba(200, 168, 132, 0.35);
}

/* ============================================================================
   ACCENTS DE HIÉRARCHIE : Différenciation fine par type de contenu
   ============================================================================ */

/* Badges spéciaux pour différencier visuellement les types */
.vp-badge-archive {
    /* Garde or cuivré (archive = or) */
    background: linear-gradient(180deg, #ffdb94 0%, #e8a54a 50%, #8b5820 100%) !important;
}

.vp-ina-badge {
    /* INA = champagne pâle pour signaler lien externe */
    background: linear-gradient(180deg, #f5ecc8 0%, #d8c890 50%, #8a7840 100%) !important;
}

.extrait-badge,
.presse-badge {
    /* Extraits MP3 = bronze patiné */
    background: linear-gradient(180deg, #c8a884 0%, #9c7a54 50%, #5c3e24 100%) !important;
}

/* ============================================================================
   TITRES DE SECTION : accent ligne dorée sous le h2
   ============================================================================ */

.section-title {
    position: relative;
}

/* Petite ligne décorative sous chaque titre de section
   (la couleur varie selon la section parente) */
.discographie-legacy h2::after,
.extrait-luxe-card h2::after,
.presse-luxe-card h2::after {
    content: '';
    display: block;
    width: 50px;
    height: 1px;
    margin: 0.6rem 0;
    background: linear-gradient(90deg,
        var(--p1-light),
        var(--p1-main),
        transparent);
    box-shadow: 0 0 8px var(--p1-glow);
    opacity: 0.7;
    transition: all 0.4s;
}

.discographie-legacy > article:hover h2::after,
.extrait-luxe-card:hover h2::after,
.presse-luxe-card:hover h2::after {
    width: 90px;
    opacity: 1;
    box-shadow: 0 0 15px var(--p1-light);
}

/* ============================================================================
   FINAL : accent visuel "matière" via filtre subtil
   ============================================================================ */

/* Les images reçoivent un léger traitement "film vintage" pour cohérence */
.discographie-legacy figure img,
.biography-legacy figure img,
.home-intro figure img,
.extrait-luxe-cover img,
.presse-luxe-thumb img {
    filter:
        contrast(1.03)
        saturate(1.05)
        brightness(0.98);
    transition: filter 0.6s var(--ease-elegant);
}

.discographie-legacy figure:hover img,
.biography-legacy figure:not(.row):hover img,
.home-intro figure:hover img,
.extrait-luxe-cover:hover img,
.presse-luxe-thumb:hover img {
    filter:
        contrast(1.06)
        saturate(1.1)
        brightness(1.03);
}

/* ============================================================================
   38. CORRECTIFS FINAUX — Bugs critiques supprimés
   ============================================================================
   1. Suppression totale des faux boutons play pseudo-éléments (::before/::after
      sur vp-video-wrap) qui cachaient les contrôles HTML5 natifs.
   2. Suppression du trait blanc focus sur figures et éléments cliquables.
   3. Losanges bio : remplacement par un ornement élégant SVG-like.
   ============================================================================ */

/* ====== [1] SUPPRESSION DU FAUX BOUTON PLAY SUR VIDÉOS ====== */
/* Le ::after/::before sur .vp-video-wrap empêchait l'utilisateur
   d'atteindre les contrôles HTML5 natifs du <video>.
   Le vrai <video controls> affiche son propre bouton play — pas besoin de faux. */
.vp-video-wrap::before,
.vp-video-wrap::after {
    content: none !important;
    display: none !important;
}

/* S'assurer que la vidéo native est complètement cliquable */
.vp-video {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 1 !important;
}

/* L'overlay info doit TOUJOURS être pointer-events: none */
.vp-overlay-info,
.vp-overlay-info * {
    pointer-events: none !important;
}

/* Et doit se cacher complètement dès qu'on interagit avec le player */
.vp-video-wrap:hover .vp-overlay-info {
    opacity: 0.3 !important;
    transition: opacity 0.3s !important;
}

.vp-video-wrap:has(video:not(:paused)) .vp-overlay-info {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* ====== [2] SUPPRESSION DÉFINITIVE DU TRAIT BLANC ====== */
/* Tous les éléments cliquables — suppression radicale de l'outline
   qui créait le trait blanc au clic */
*:focus,
*:active,
*:focus-within {
    outline: none !important;
    outline-offset: 0 !important;
}

/* Focus visible uniquement clavier, dans la palette cuivrée */
*:focus-visible {
    outline: 2px solid #ffc876 !important;
    outline-offset: 3px !important;
    transition: outline-offset 0.2s;
}

/* Pas d'outline sur figures (elles ne sont pas focus sauf si tabindex) */
figure:focus, figure:active,
figure img:focus, figure img:active,
a:focus, a:active {
    outline: none !important;
    border-color: inherit !important;
}

/* Webkit tap highlight transparent */
html, body, * {
    -webkit-tap-highlight-color: transparent !important;
}

/* ====== [3] LOSANGES BIOGRAPHIE : upgrade professionnel ====== */
/* Le petit losange rose cheap est remplacé par un ornement art-déco
   en diamant taillé, inspiré des bijoux années 30 */

.biography-legacy figure:not(.row) > .ornament-diamond-top,
.biography-legacy figure:not(.row) > .ornament-diamond-bot,
.home-intro figure > .ornament-diamond-top,
.home-intro figure > .ornament-diamond-bot {
    /* Plus élégant : petit diamant taillé avec plusieurs facettes */
    width: 18px !important;
    height: 18px !important;
    background:
        linear-gradient(135deg,
            #f5e4c8 0%,
            #e8a54a 40%,
            #8b5820 100%) !important;
    border: 1px solid #6b3c0a !important;
    box-shadow:
        0 0 12px rgba(255, 200, 118, 0.7),
        0 0 22px rgba(232, 165, 74, 0.4),
        inset 1px 1px 0 rgba(255, 245, 216, 0.6),
        inset -1px -1px 0 rgba(107, 60, 10, 0.4) !important;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.4s !important;
    z-index: 5 !important;
}

/* Facette interne du diamant : pseudo-élément pour effet "taillé" */
.biography-legacy figure:not(.row) > .ornament-diamond-top::before,
.biography-legacy figure:not(.row) > .ornament-diamond-bot::before,
.home-intro figure > .ornament-diamond-top::before,
.home-intro figure > .ornament-diamond-bot::before {
    content: '' !important;
    position: absolute !important;
    inset: 3px !important;
    background: linear-gradient(315deg,
        rgba(245, 228, 200, 0.5) 0%,
        transparent 50%,
        rgba(139, 88, 32, 0.3) 100%) !important;
    border: 0.5px solid rgba(245, 228, 200, 0.3) !important;
    pointer-events: none !important;
}

/* Hover : le diamant s'illumine et fait une légère rotation */
.biography-legacy figure:not(.row):hover > .ornament-diamond-top,
.biography-legacy figure:not(.row):hover > .ornament-diamond-bot,
.home-intro figure:hover > .ornament-diamond-top,
.home-intro figure:hover > .ornament-diamond-bot {
    transform: translateX(-50%) rotate(225deg) scale(1.15) !important;
    box-shadow:
        0 0 20px rgba(255, 245, 216, 1),
        0 0 40px rgba(255, 200, 118, 0.85),
        0 0 60px rgba(232, 165, 74, 0.5),
        inset 1px 1px 0 rgba(255, 245, 216, 0.9) !important;
}

/* Si palette grenat (biographie), le diamant passe en tons chauds rougeoyants */
.biography-legacy figure:not(.row) > .ornament-diamond-top,
.biography-legacy figure:not(.row) > .ornament-diamond-bot {
    background:
        linear-gradient(135deg,
            #e48888 0%,
            #b44848 45%,
            #6b1e2a 100%) !important;
    border-color: #3a0e18 !important;
    box-shadow:
        0 0 12px rgba(228, 136, 136, 0.7),
        0 0 22px rgba(180, 72, 72, 0.4),
        inset 1px 1px 0 rgba(255, 210, 210, 0.6),
        inset -1px -1px 0 rgba(58, 14, 24, 0.4) !important;
}

.biography-legacy figure:not(.row):hover > .ornament-diamond-top,
.biography-legacy figure:not(.row):hover > .ornament-diamond-bot {
    box-shadow:
        0 0 20px rgba(255, 220, 220, 1),
        0 0 40px rgba(228, 136, 136, 0.85),
        0 0 60px rgba(180, 72, 72, 0.5),
        inset 1px 1px 0 rgba(255, 220, 220, 0.9) !important;
}

/* ====== [4] VIBRATO : RENFORCEMENT UX + FEEDBACK GARANTIS ====== */

/* Le bouton doit être cliquable de manière évidente */
#vib-vibrato {
    cursor: pointer !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    position: relative !important;
    overflow: visible !important;
    z-index: 10 !important;
}

/* Le bouton flashing plus visible */
#vib-vibrato.flashing {
    animation: vib-flash-pro 0.7s ease-out !important;
}

@keyframes vib-flash-pro {
    0% {
        box-shadow:
            0 0 0 0 rgba(255, 200, 118, 0.8),
            0 0 0 0 rgba(255, 159, 63, 0);
        transform: scale(1);
    }
    40% {
        box-shadow:
            0 0 0 12px rgba(255, 200, 118, 0.4),
            0 0 60px rgba(255, 159, 63, 0.8);
        transform: scale(1.03);
    }
    100% {
        box-shadow:
            0 0 0 0 rgba(255, 200, 118, 0),
            0 0 0 0 rgba(255, 159, 63, 0);
        transform: scale(1);
    }
}

/* Toast : message clair et lisible */
.vib-toast {
    background: linear-gradient(180deg,
        #f5ecc8 0%,
        #ffdb94 35%,
        #e8a54a 100%) !important;
    color: #1a0e02 !important;
    border: 1px solid #8b5820 !important;
    font-family: 'Cormorant Garamond', 'Georgia', serif !important;
    font-style: italic !important;
    font-size: 0.82rem !important;
    padding: 0.55rem 1.15rem !important;
    letter-spacing: 0.02em !important;
    font-weight: 500 !important;
    box-shadow:
        0 10px 30px rgba(255, 159, 63, 0.5),
        0 0 40px rgba(255, 200, 118, 0.35),
        inset 0 1px 0 rgba(255, 245, 216, 0.8),
        inset 0 -1px 0 rgba(139, 88, 32, 0.3) !important;
}

/* ====== [5] SUPPRESSION DE L'OUTLINE ROUGE/BLANC AUTOUR DES ARTICLES ====== */

/* Les <article> en tant que liens ne doivent plus avoir de bordure au clic */
article:focus, article:active,
a article:focus, a article:active {
    outline: none !important;
    border: inherit !important;
}

/* ====== [6] HOVER PLUS FLUIDE SUR CARDS VIDÉO ====== */
/* Quand on survole une carte, le vrai player devient entièrement accessible */
.vp-card:hover .vp-video {
    pointer-events: auto !important;
    z-index: 5 !important;
}

/* ====== [7] S'assurer que les <video controls> affichent bien leurs contrôles ====== */
video::-webkit-media-controls {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}

video::-webkit-media-controls-panel {
    display: flex !important;
    opacity: 1 !important;
}

/* Pour Firefox / Safari : forcer l'affichage des contrôles */
video[controls] {
    pointer-events: auto !important;
}

/* ============================================================================
   FIN : section 38 — correctifs critiques
   ============================================================================ */

/* ============================================================================
   38. CORRECTIFS CRITIQUES DÉFINITIFS
   ============================================================================
   - Suppression totale du trait blanc/rose (outline, focus, webkit tap)
   - Vidéos HTML5 natives pleinement fonctionnelles (plus de pseudo-éléments)
   - Bouton Vibrato rendu entièrement cliquable et responsive au clic
   - Ornements losanges remplacés par un diamant taillé art-déco professionnel
   ============================================================================ */

/* ====================================================================
   [1] TRAIT BLANC/ROSE — SUPPRESSION TOTALE ET DÉFINITIVE
   ==================================================================== */

*,
*::before,
*::after,
*:focus,
*:focus-visible,
*:active,
*:focus-within,
*:hover {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

/* Outline fin doré UNIQUEMENT pour la navigation clavier (accessibilité) */
*:focus { outline: none !important; }

/* Focus visible discret en or, sans offset disgracieux */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 1.5px solid rgba(255, 200, 118, 0.7) !important;
    outline-offset: 2px !important;
    border-radius: 2px;
}

/* Pas d'outline sur figures, articles, divs — éléments non-interactifs */
figure, figure:focus, figure:active, figure:focus-visible,
article, article:focus, article:active, article:focus-visible,
div:focus, div:active, div:focus-visible,
img, img:focus, img:active,
.vp-card, .vp-card:focus, .vp-card:focus-visible,
.disco-content *, .vibrato-card * {
    outline: none !important;
    outline-color: transparent !important;
    outline-width: 0 !important;
    -webkit-appearance: none;
}

/* Supprimer toute bordure blanche au clic sur figures et leurs enfants */
figure:active, figure:focus,
figure img:active, figure img:focus,
.ornament-corner, .ornament-diamond-top, .ornament-diamond-bot {
    border-color: inherit !important;
}

/* ====================================================================
   [2] VIDÉOS MP4 — SUPPRESSION DES FAUX BOUTONS PLAY QUI BLOQUAIENT
   ==================================================================== */

/* Le ::after et ::before sur .vp-video-wrap affichaient un faux cercle
   + triangle qui, même en pointer-events: none, apparaissent par-dessus
   les contrôles natifs HTML5 et empêchent visuellement de cliquer. */
.vp-video-wrap::before,
.vp-video-wrap::after,
.vp-compact .vp-video-wrap::before,
.vp-compact .vp-video-wrap::after {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    animation: none !important;
}

/* La vidéo native HTML5 doit être pleinement accessible */
.vp-video,
video.vp-video,
.vp-video-wrap video {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 10 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

/* Les contrôles natifs doivent être toujours affichés */
video[controls]::-webkit-media-controls {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}
video[controls]::-webkit-media-controls-enclosure {
    display: flex !important;
}

/* L'overlay d'info est UNIQUEMENT décoratif, jamais cliquable */
.vp-overlay-info,
.vp-overlay-info * {
    pointer-events: none !important;
    -webkit-user-select: none;
    user-select: none;
}

/* Quand la vidéo joue, on cache complètement l'overlay */
.vp-video-wrap:has(video:not(:paused)) .vp-overlay-info {
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.3s, visibility 0.3s !important;
}

/* Quand on survole la zone vidéo, on estompe l'overlay */
.vp-video-wrap:hover .vp-overlay-info {
    opacity: 0.35 !important;
    transition: opacity 0.4s !important;
}

/* ====================================================================
   [3] BOUTON VIBRATO — PLEINEMENT CLIQUABLE ET RESPONSIVE
   ==================================================================== */

#vib-vibrato {
    cursor: pointer !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 20 !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
}

#vib-vibrato:hover {
    cursor: pointer !important;
}

/* Assurer que toutes les classes .vib-ctrl sont cliquables */
.vib-ctrl {
    cursor: pointer !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    position: relative !important;
    z-index: 20 !important;
}

/* ====================================================================
   [4] LOSANGES ORNEMENT — UPGRADE PROFESSIONNEL ART-DÉCO
   ==================================================================== */

/* Remplacement du petit losange "cheap" par un DIAMANT TAILLÉ 3D
   avec facettes multiples, inspiré des bijoux Cartier années 30 */

.biography-legacy figure:not(.row) > .ornament-diamond-top,
.biography-legacy figure:not(.row) > .ornament-diamond-bot,
.home-intro figure > .ornament-diamond-top,
.home-intro figure > .ornament-diamond-bot {
    position: absolute !important;
    left: 50% !important;
    width: 18px !important;
    height: 18px !important;
    transform: translateX(-50%) rotate(45deg) !important;
    z-index: 6 !important;
    pointer-events: none !important;

    /* Dégradé multi-facettes pour effet diamant taillé */
    background:
        linear-gradient(135deg,
            #fff5e0 0%,
            #ffdb94 25%,
            #e8a54a 55%,
            #8b5820 85%,
            #4a2c10 100%) !important;
    border: 1px solid #6b3c0a !important;

    /* Ombres multiples : highlights internes + glow externe */
    box-shadow:
        /* Highlight interne haut-gauche (facette brillante) */
        inset 2px 2px 0 rgba(255, 245, 216, 0.7),
        /* Ombre interne bas-droite (facette sombre) */
        inset -1px -1px 0 rgba(74, 44, 16, 0.5),
        /* Glow doré externe */
        0 0 15px rgba(255, 200, 118, 0.8),
        0 0 30px rgba(232, 165, 74, 0.5),
        /* Ombre portée nette */
        0 3px 8px rgba(0, 0, 0, 0.6) !important;

    transition:
        transform 0.7s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.5s,
        background 0.5s !important;
}

.biography-legacy figure:not(.row) > .ornament-diamond-top,
.home-intro figure > .ornament-diamond-top {
    top: -9px !important;
}

.biography-legacy figure:not(.row) > .ornament-diamond-bot,
.home-intro figure > .ornament-diamond-bot {
    bottom: -9px !important;
}

/* Pseudo-élément : point de lumière central (facette du diamant) */
.biography-legacy figure:not(.row) > .ornament-diamond-top::before,
.biography-legacy figure:not(.row) > .ornament-diamond-bot::before,
.home-intro figure > .ornament-diamond-top::before,
.home-intro figure > .ornament-diamond-bot::before {
    content: '' !important;
    position: absolute !important;
    top: 2px !important;
    left: 2px !important;
    width: 5px !important;
    height: 5px !important;
    background: radial-gradient(circle,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(255, 245, 216, 0.4) 50%,
        transparent 100%) !important;
    border-radius: 50% !important;
    filter: blur(0.5px) !important;
}

/* Hover : le diamant tourne et s'illumine */
.biography-legacy figure:not(.row):hover > .ornament-diamond-top,
.biography-legacy figure:not(.row):hover > .ornament-diamond-bot,
.home-intro figure:hover > .ornament-diamond-top,
.home-intro figure:hover > .ornament-diamond-bot {
    transform: translateX(-50%) rotate(225deg) scale(1.2) !important;
    background:
        linear-gradient(135deg,
            #ffffff 0%,
            #fff5e0 30%,
            #ffc876 60%,
            #e8a54a 90%,
            #8b5820 100%) !important;
    box-shadow:
        inset 2px 2px 0 rgba(255, 255, 255, 0.9),
        inset -1px -1px 0 rgba(74, 44, 16, 0.5),
        0 0 25px rgba(255, 245, 216, 1),
        0 0 50px rgba(255, 200, 118, 0.9),
        0 0 75px rgba(232, 165, 74, 0.5),
        0 4px 12px rgba(0, 0, 0, 0.7) !important;
}

/* Même traitement si c'est un conteneur avec palette 2 grenat (optionnel : priorité couleur site) */
/* On garde les losanges en or même sur bio pour cohérence avec logo hero */

/* ====================================================================
   [5] SUPPRESSION DÉFINITIVE DU TRAIT ROSE AU CLIC SUR FIGURE
   ==================================================================== */

/* Tous les <a> qui englobent des <figure> ne doivent pas créer de bord rose */
a:has(figure):focus,
a:has(figure):active,
a:has(figure):focus-visible {
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

a:has(figure):focus figure,
a:has(figure):active figure {
    border-color: rgba(232, 165, 74, 0.55) !important; /* On remet la couleur de base, pas rose */
}

/* ====================================================================
   [6] NETTOYAGE FINAL : pas de bordure / contour rose résiduel
   ==================================================================== */

.vp-video-wrap,
.vp-video-wrap:focus,
.vp-video-wrap:active {
    border-color: rgba(232, 165, 74, 0.4) !important;
    outline: none !important;
}

/* Les animations @keyframes obsolètes restent mais inactives */
@keyframes vp-play-hint-deprecated {
    0%, 100% { opacity: 0; }
    50% { opacity: 0; }
}

/* ============================================================================
   FIN SECTION 38 — Tous les bugs critiques corrigés
   ============================================================================ */

/* ============================================================================
   39. ORNEMENTS ART-DÉCO PREMIUM — Séparateurs et titres de section
   ============================================================================
   Inspiration : style Unicom / sites premium avec cadres lumineux sombres
   Remplace les ornements cheap (◆ isolé, losange plat) par des vraies
   compositions art-déco avec SVG, multi-facettes, glow modulé.
   ============================================================================ */

/* ========== RÉINITIALISATION des .ornament simples ========== */
.ornament {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1rem !important;
    margin: 2rem 0 !important;
    height: auto !important;
    color: transparent !important;
}

.ornament > span {
    display: none !important; /* Cacher le ◆ cheap par défaut */
}

/* Le ornament reçoit 3 éléments créés en CSS : ligne gauche, losange central, ligne droite */
.ornament::before,
.ornament::after {
    content: '' !important;
    flex: 1 !important;
    max-width: 160px !important;
    height: 1px !important;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(139, 88, 32, 0.3) 15%,
        var(--p1-deep, #8b5820) 40%,
        var(--p1-main, #e8a54a) 65%,
        var(--p1-light, #ffdb94) 85%,
        transparent 100%) !important;
    box-shadow: 0 0 6px rgba(232, 165, 74, 0.4) !important;
    position: relative !important;
}

.ornament::after {
    background: linear-gradient(270deg,
        transparent 0%,
        rgba(139, 88, 32, 0.3) 15%,
        var(--p1-deep, #8b5820) 40%,
        var(--p1-main, #e8a54a) 65%,
        var(--p1-light, #ffdb94) 85%,
        transparent 100%) !important;
}

/* Nouveau pattern : on utilise un background-image SVG pour l'ornement central */
.ornament::before { margin-right: 0.2rem !important; }
.ornament::after  { margin-left: 0.2rem !important; }

/* Losange central en vrai diamant taillé */
.ornament > span:first-of-type,
.ornament:not(:has(> span)) {
    position: relative !important;
}

/* On insère l'ornement central via un pseudo-élément sur un conteneur wrapper */
.ornament-wrap-center {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.8rem !important;
    position: relative !important;
}

/* ========== NOUVEL ORNEMENT CENTRAL SVG-LIKE ========== */
/* On ajoute un pseudo-conteneur au centre : 3 petits éléments
   | ~ ◆ ~ | (tirets fins + losange central + tirets) */

/* Re-style .ornament pour inclure un conteneur central que le CSS dessine */
.ornament {
    position: relative;
}

/* Position du losange central - on utilise une data-url SVG inline */
.ornament > span {
    display: inline-block !important;
    width: 80px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
    color: transparent !important;
    text-indent: -9999px;
    overflow: hidden;

    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 18' fill='none'%3E%3Cpath d='M0 9 L15 9' stroke='%23e8a54a' stroke-width='0.6' stroke-linecap='round'/%3E%3Cpath d='M18 9 L26 9' stroke='%23e8a54a' stroke-width='0.6' stroke-linecap='round' opacity='0.8'/%3E%3Crect x='32' y='3' width='12' height='12' transform='rotate(45 38 9)' fill='%23e8a54a' stroke='%23ffdb94' stroke-width='0.5' opacity='0.95'/%3E%3Ccircle cx='38' cy='9' r='1.5' fill='%23fff5e0' opacity='0.9'/%3E%3Cpath d='M54 9 L62 9' stroke='%23e8a54a' stroke-width='0.6' stroke-linecap='round' opacity='0.8'/%3E%3Cpath d='M65 9 L80 9' stroke='%23e8a54a' stroke-width='0.6' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    filter: drop-shadow(0 0 6px rgba(232, 165, 74, 0.8));
}

/* ========== TITRES DE SECTION AMÉLIORÉS (section-number + section-title) ========== */

.section-number {
    position: relative !important;
    display: inline-block !important;
    font-family: var(--font-italic, 'Cormorant Garamond'), serif !important;
    font-style: italic !important;
    font-size: 0.82rem !important;
    letter-spacing: 0.5em !important;
    color: var(--p1-light, #ffdb94) !important;
    text-transform: uppercase !important;
    margin-bottom: 1.2rem !important;
    padding: 0.2rem 2.5rem !important;
    opacity: 0.85 !important;
}

/* Petits tirets de chaque côté du section-number */
.section-number::before,
.section-number::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    width: 1.8rem !important;
    height: 1px !important;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--p1-main, #e8a54a) 100%) !important;
    opacity: 0.7 !important;
}

.section-number::before {
    right: 100% !important;
    margin-right: 0.5rem !important;
}

.section-number::after {
    left: 100% !important;
    margin-left: 0.5rem !important;
    background: linear-gradient(270deg,
        transparent 0%,
        var(--p1-main, #e8a54a) 100%) !important;
}

/* Le <h2 class="section-title"> doit avoir un style premium digne */
.section-header .section-title {
    font-family: 'Limelight', 'Playfair Display', serif !important;
    font-size: clamp(2rem, 4.5vw, 3.8rem) !important;
    line-height: 1.1 !important;
    letter-spacing: 0.04em !important;
    margin: 0.3rem 0 1rem !important;
    background: linear-gradient(180deg,
        #fff5e0 0%,
        #ffdb94 35%,
        #ffc876 55%,
        #e8a54a 80%,
        #8b5820 100%) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    filter:
        drop-shadow(0 2px 15px rgba(255, 159, 63, 0.3))
        drop-shadow(0 0 30px rgba(255, 200, 118, 0.2)) !important;
}

.section-header .section-title .accent {
    background: linear-gradient(180deg,
        #ffdb94 0%,
        #e8a54a 40%,
        #c07c24 100%) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    filter: drop-shadow(0 0 15px rgba(232, 165, 74, 0.7));
}

.section-subtitle {
    font-family: var(--font-italic, 'Cormorant Garamond'), serif !important;
    font-style: italic !important;
    font-size: clamp(0.95rem, 1.4vw, 1.15rem) !important;
    color: #d9c8a4 !important;
    line-height: 1.7 !important;
    max-width: 680px !important;
    margin: 0.8rem auto 0 !important;
    opacity: 0.9 !important;
    letter-spacing: 0.02em !important;
}

/* ============================================================================
   40. MODAL INTRO VIDÉO — Cadre lumineux COMPLET, vidéo pleine vue
   ============================================================================
   La vidéo doit apparaître entièrement (object-fit: contain), dans un cadre
   doré lumineux digne du reste du site. Fini le crop qui coupe l'image.
   ============================================================================ */

/* ======= Container modal (fond sombre velours) ======= */
.intro-modal {
    background:
        radial-gradient(ellipse at center,
            rgba(30, 18, 8, 0.98) 0%,
            rgba(10, 5, 2, 1) 75%) !important;
}

/* ======= Le wrap vidéo (format adaptable au contenu) ======= */
.intro-video-wrap {
    position: relative !important;
    width: auto !important;
    max-width: min(92vw, 960px) !important;
    max-height: min(80vh, 720px) !important;
    aspect-ratio: auto !important; /* Laisse la vidéo dicter le ratio */

    background:
        radial-gradient(ellipse at top left, rgba(255, 159, 63, 0.18), transparent 60%),
        radial-gradient(ellipse at bottom right, rgba(232, 165, 74, 0.12), transparent 60%),
        #0a0502 !important;

    padding: 18px !important; /* Marge interne dorée */
    border: 1px solid rgba(255, 200, 118, 0.5) !important;
    border-radius: 3px !important;

    /* Double glow doré pour le cadre lumineux */
    box-shadow:
        /* Glow proche chaud */
        0 0 40px rgba(255, 159, 63, 0.35),
        /* Glow large ambré */
        0 0 100px rgba(232, 165, 74, 0.25),
        /* Ombre portée profonde */
        0 40px 100px rgba(0, 0, 0, 0.85),
        /* Reflet intérieur haut */
        inset 0 1px 0 rgba(255, 245, 216, 0.3),
        /* Ombre intérieure pour profondeur */
        inset 0 -20px 40px rgba(0, 0, 0, 0.5) !important;

    overflow: visible !important; /* Permet le glow de dépasser */
    z-index: 3 !important;
    box-sizing: border-box !important;
}

/* Cadre intérieur doré décalé (double bordure art-déco) */
.intro-video-wrap::before {
    content: '' !important;
    position: absolute !important;
    inset: 10px !important;
    border: 1px solid rgba(255, 200, 118, 0.3) !important;
    pointer-events: none !important;
    z-index: 2 !important;
    box-sizing: border-box !important;
}

/* Balayage lumineux doré animé qui traverse le cadre */
.intro-video-wrap::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -50% !important;
    width: 50% !important;
    height: 100% !important;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 200, 118, 0.1) 40%,
        rgba(255, 245, 216, 0.25) 50%,
        rgba(255, 200, 118, 0.1) 60%,
        transparent 100%) !important;
    pointer-events: none !important;
    z-index: 3 !important;
    animation: intro-sweep 6s ease-in-out infinite !important;
}

@keyframes intro-sweep {
    0%, 100% { left: -50%; opacity: 0.5; }
    50% { left: 100%; opacity: 1; }
}

/* ======= La vidéo : afficher ENTIÈREMENT (contain, pas cover) ======= */
.intro-video {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: 100% !important;
    object-fit: contain !important; /* IMPORTANT: montre toute l'image */
    background: #000 !important;
    position: relative !important;
    z-index: 1 !important;
    border-radius: 2px !important;
}

/* ======= 4 coins dorés lumineux (hors du cadre pour effet luxe) ======= */
/* On supprime les anciens coins par le CSS existant et on en crée de nouveaux */
.intro-corner {
    position: absolute !important;
    width: 50px !important;
    height: 50px !important;
    pointer-events: none !important;
    z-index: 5 !important;
    opacity: 0 !important;
    animation: intro-corner-fade-in 1.5s var(--ease-elegant) forwards 0.5s !important;
}

.intro-corner::before,
.intro-corner::after {
    content: '' !important;
    position: absolute !important;
    background: linear-gradient(90deg,
        #fff5e0 0%,
        #ffdb94 30%,
        #e8a54a 70%,
        #8b5820 100%) !important;
    box-shadow:
        0 0 15px rgba(255, 245, 216, 0.9),
        0 0 30px rgba(255, 200, 118, 0.7),
        0 0 50px rgba(232, 165, 74, 0.4) !important;
}

.intro-corner::before {
    width: 50px !important;
    height: 2px !important;
}

.intro-corner::after {
    width: 2px !important;
    height: 50px !important;
}

.intro-corner-tl { top: -1px !important; left: -1px !important; }
.intro-corner-tr { top: -1px !important; right: -1px !important; }
.intro-corner-tr::after { right: 0 !important; }
.intro-corner-bl { bottom: -1px !important; left: -1px !important; }
.intro-corner-bl::before { bottom: 0 !important; }
.intro-corner-br { bottom: -1px !important; right: -1px !important; }
.intro-corner-br::before { bottom: 0 !important; }
.intro-corner-br::after { right: 0 !important; }

@keyframes intro-corner-fade-in {
    0% { opacity: 0; transform: scale(0.3); }
    100% { opacity: 1; transform: scale(1); }
}

/* ======= Caption plus élégante (bas de la vidéo) ======= */
.intro-caption {
    position: absolute !important;
    bottom: 18px !important; /* Aligné avec le padding */
    left: 18px !important;
    right: 18px !important;
    padding: 1.5rem 2rem 1.5rem !important;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(10, 5, 2, 0.65) 35%,
        rgba(10, 5, 2, 0.95) 100%) !important;
    z-index: 2 !important;
}

/* ======= Contrôles (skip + son) hors du cadre doré, en overlay ======= */
.intro-controls {
    position: absolute !important;
    top: 30px !important;
    right: 30px !important;
    z-index: 6 !important;
}

/* ======= Barre de progression en BAS du cadre ======= */
.intro-progress {
    position: absolute !important;
    bottom: 0 !important;
    left: 18px !important;
    right: 18px !important;
    height: 3px !important;
    z-index: 4 !important;
}

/* ======= RESPONSIVE MODAL INTRO ======= */
@media (max-width: 768px) {
    .intro-video-wrap {
        max-width: 94vw !important;
        max-height: 70vh !important;
        padding: 12px !important;
    }
    .intro-video-wrap::before {
        inset: 6px !important;
    }
    .intro-corner {
        width: 32px !important;
        height: 32px !important;
    }
    .intro-corner::before { width: 32px !important; }
    .intro-corner::after  { height: 32px !important; }

    .intro-caption {
        bottom: 12px !important;
        left: 12px !important;
        right: 12px !important;
        padding: 0.9rem 1.1rem !important;
    }
    .intro-controls {
        top: 20px !important;
        right: 20px !important;
    }
    .intro-progress {
        left: 12px !important;
        right: 12px !important;
    }
}

@media (max-width: 480px) {
    .intro-video-wrap {
        max-width: 96vw !important;
        max-height: 75vh !important;
        padding: 8px !important;
    }
    .intro-video-wrap::before {
        inset: 4px !important;
    }
    .intro-corner {
        width: 22px !important;
        height: 22px !important;
    }
    .intro-corner::before { width: 22px !important; height: 1.5px !important; }
    .intro-corner::after  { height: 22px !important; width: 1.5px !important; }

    .intro-caption {
        bottom: 8px !important;
        left: 8px !important;
        right: 8px !important;
        padding: 0.7rem 0.9rem !important;
    }
    .intro-progress {
        left: 8px !important;
        right: 8px !important;
    }
}

/* ============================================================================
   41. CARDS À LA UNICOM — Cadre sombre + halo doré au survol
   ============================================================================
   Style inspiré de ton image Unicom : fond sombre subtil + fine bordure +
   halo doré rayonnant qui apparaît au hover. Application aux cards principales.
   ============================================================================ */

/* Halo doré externe sur les cartes vidéo et INA au hover (comme Unicom) */
.vp-card,
.vp-ina-card {
    position: relative !important;
}

/* Le halo externe rayonnant comme sur "Fiscalité Compétitive" */
.vp-card::after,
.vp-ina-card::after {
    content: '' !important;
    position: absolute !important;
    inset: -2px !important;
    border-radius: 3px !important;
    background: transparent !important;
    box-shadow:
        0 0 0 rgba(255, 200, 118, 0),
        0 0 0 rgba(232, 165, 74, 0) !important;
    pointer-events: none !important;
    opacity: 0 !important;
    z-index: -1 !important;
    transition: opacity 0.5s ease, box-shadow 0.5s ease !important;
}

.vp-card:hover::after,
.vp-ina-card:hover::after {
    opacity: 1 !important;
    box-shadow:
        0 0 30px rgba(255, 200, 118, 0.35),
        0 0 60px rgba(232, 165, 74, 0.25),
        0 0 90px rgba(255, 159, 63, 0.15) !important;
}