/* CTA Section - Style premium avec image de fond, effets LED et animations */
.cta-section {
    position: relative;
    background: 
        linear-gradient(135deg, var(--accent-color) 0%, rgba(100, 0, 83, 0.98) 50%, var(--accent-color) 100%),
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="600" viewBox="0 0 1200 600"><defs><radialGradient id="spot1"><stop offset="0%" stop-color="rgba(255,255,255,0.15)"/><stop offset="100%" stop-color="transparent"/></radialGradient><radialGradient id="spot2"><stop offset="0%" stop-color="rgba(255,255,255,0.1)"/><stop offset="100%" stop-color="transparent"/></radialGradient><pattern id="noise" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="0.5" fill="rgba(255,255,255,0.03)"/><circle cx="50" cy="30" r="0.5" fill="rgba(255,255,255,0.03)"/><circle cx="80" cy="70" r="0.5" fill="rgba(255,255,255,0.03)"/></pattern></defs><ellipse cx="200" cy="150" rx="200" ry="300" fill="url(%23spot1)"/><ellipse cx="900" cy="400" rx="250" ry="200" fill="url(%23spot2)"/><rect width="100%25" height="100%25" fill="url(%23noise)"/></svg>');
    background-size: cover, cover;
    background-position: center, center;
    background-blend-mode: overlay, normal;
    color: var(--color-white);
    padding: calc(var(--spacing-xxl) * 1.5) var(--spacing-md);
    margin: var(--spacing-xxl) var(--spacing-md) 0;
    overflow: hidden;
    border-radius: 24px;
    box-shadow: 
        0 25px 80px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Overlay avec gradient fondu et texture */
.cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(ellipse at 20% 30%, rgba(255, 255, 255, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(255, 255, 255, 0.15) 0%, transparent 50%),
        linear-gradient(135deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.35) 100%);
    pointer-events: none;
    z-index: 1;
    opacity: 0.8;
}

/* Effets de lumière LED animés (rotation continue) */
.cta-section::after {
    content: '';
    position: absolute;
    top: -100%;
    left: -100%;
    width: 300%;
    height: 300%;
    background: 
        radial-gradient(circle at 30% 40%, rgba(255, 255, 255, 0.25) 0%, transparent 25%),
        radial-gradient(circle at 70% 60%, rgba(255, 255, 255, 0.2) 0%, transparent 25%),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.15) 0%, transparent 30%);
    animation: rotateGlow 25s linear infinite;
    pointer-events: none;
    z-index: 1;
    filter: blur(40px);
}

@keyframes rotateGlow {
    0% {
        transform: rotate(0deg) scale(1);
    }
    50% {
        transform: rotate(180deg) scale(1.1);
    }
    100% {
        transform: rotate(360deg) scale(1);
    }
}

.cta-content h3 {
    color: var(--color-white);
    font-size: clamp(2rem, 5vw, 3.5rem);
    margin-bottom: var(--spacing-md);
    font-weight: 900;
    text-shadow: 
        0 6px 30px rgba(0, 0, 0, 0.6),
        0 3px 15px rgba(0, 0, 0, 0.4),
        0 0 40px rgba(255, 255, 255, 0.3),
        0 0 60px rgba(255, 255, 255, 0.15);
    letter-spacing: -1.5px;
    line-height: 1.1;
    position: relative;
    animation: textGlowPulse 4s ease-in-out infinite;
    text-transform: uppercase;
}

@keyframes textGlowPulse {
    0%, 100% {
        text-shadow: 
            0 6px 30px rgba(0, 0, 0, 0.6),
            0 3px 15px rgba(0, 0, 0, 0.4),
            0 0 40px rgba(255, 255, 255, 0.3),
            0 0 60px rgba(255, 255, 255, 0.15);
        transform: scale(1);
    }
    50% {
        text-shadow: 
            0 6px 30px rgba(0, 0, 0, 0.6),
            0 3px 15px rgba(0, 0, 0, 0.4),
            0 0 50px rgba(255, 255, 255, 0.4),
            0 0 80px rgba(255, 255, 255, 0.25),
            0 0 100px rgba(255, 255, 255, 0.1);
        transform: scale(1.02);
    }
}

.cta-content p {
    font-size: clamp(1.125rem, 2.5vw, 1.5rem);
    margin-bottom: var(--spacing-xl);
    opacity: 0.98;
    line-height: 1.7;
    text-shadow: 
        0 3px 15px rgba(0, 0, 0, 0.5),
        0 1px 8px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(255, 255, 255, 0.2);
    font-weight: 500;
    letter-spacing: 0.3px;
}

/* Bouton CTA Principal - Style premium avec effets LED et ombres profondes */
.btn-cta-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    background: linear-gradient(135deg, #ffffff 0%, #f8f8f8 50%, #ffffff 100%);
    color: var(--accent-color);
    padding: 22px 52px;
    border-radius: 50px;
    font-weight: 900;
    font-size: clamp(1.125rem, 2.5vw, 1.375rem);
    text-decoration: none;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 15px 50px rgba(0, 0, 0, 0.5),
        0 0 0 0 rgba(255, 255, 255, 0.5),
        0 0 40px rgba(255, 255, 255, 0.3),
        inset 0 3px 0 rgba(255, 255, 255, 0.95),
        inset 0 -3px 0 rgba(0, 0, 0, 0.15);
    border: 3px solid rgba(255, 255, 255, 0.4);
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    cursor: pointer;
    z-index: 2;
}

/* Effet shimmer animé continu */
.btn-cta-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -200%;
    width: 200%;
    height: 100%;
    background: linear-gradient(
        90deg, 
        transparent, 
        rgba(255, 255, 255, 0.7), 
        rgba(255, 255, 255, 0.9),
        rgba(255, 255, 255, 0.7),
        transparent
    );
    z-index: 1;
    animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
    0% {
        left: -200%;
    }
    50% {
        left: 200%;
    }
    100% {
        left: 200%;
    }
}

/* Effet de lumière LED autour du bouton (halo pulsant) */
.btn-cta-primary::after {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.6) 0%,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(255, 255, 255, 0.6) 100%
    );
    border-radius: 50px;
    opacity: 0.6;
    z-index: -1;
    filter: blur(15px);
    animation: pulseHalo 2.5s ease-in-out infinite;
}

@keyframes pulseHalo {
    0%, 100% {
        opacity: 0.4;
        transform: scale(1);
        filter: blur(15px);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.08);
        filter: blur(20px);
    }
}

.btn-cta-primary:hover::after {
    opacity: 1;
    animation: pulseHalo 1s ease-in-out infinite;
    filter: blur(25px);
}

.btn-cta-primary:hover {
    transform: translateY(-10px) scale(1.08);
    box-shadow: 
        0 25px 70px rgba(0, 0, 0, 0.6),
        0 0 0 6px rgba(255, 255, 255, 0.4),
        0 0 60px rgba(255, 255, 255, 0.5),
        0 0 100px rgba(255, 255, 255, 0.3),
        inset 0 3px 0 rgba(255, 255, 255, 0.95),
        inset 0 -3px 0 rgba(0, 0, 0, 0.15);
    background: linear-gradient(135deg, #ffffff 0%, #ffffff 50%, #f0f0f0 100%);
    border-color: rgba(255, 255, 255, 0.6);
}

.btn-cta-primary:active {
    transform: translateY(-6px) scale(1.05);
    box-shadow: 
        0 18px 55px rgba(0, 0, 0, 0.5),
        0 0 0 4px rgba(255, 255, 255, 0.4),
        0 0 50px rgba(255, 255, 255, 0.4);
}

.btn-cta-primary span {
    position: relative;
    z-index: 2;
    font-weight: 900;
}

.btn-cta-primary svg {
    width: 30px;
    height: 30px;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.3));
    position: relative;
    z-index: 2;
}

.btn-cta-primary:hover svg {
    transform: scale(1.25) rotate(12deg);
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.4));
}

/* ============================================
   CTA HISTOIRE - Style antique avec image de fond
   ============================================ */

/* Retirer l'animation de fond LED moche pour Histoire */
.page-histoire .cta-section::after {
    display: none !important;
}

/* Style spécifique pour le CTA Histoire */
.page-histoire .cta-section {
    background: 
        linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.4) 100%),
        url('../assets/images/cta-histoire-bg.png');
    background-size: 120% auto;
    background-position: center;
    background-blend-mode: overlay;
    background-attachment: scroll;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    border-radius: 0;
    box-shadow: none;
    border: none;
    margin: 0;
    width: 100%;
    padding: var(--spacing-xxl) var(--spacing-md);
}

/* Overlay subtil pour améliorer la lisibilité (remplace le ::before par défaut) */
.page-histoire .cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.5) 0%,
        rgba(0, 0, 0, 0.3) 50%,
        rgba(0, 0, 0, 0.5) 100%
    );
    pointer-events: none;
    z-index: 1;
}

/* Contenu du CTA Histoire */
.page-histoire .cta-section .container {
    max-width: 100%;
    padding: 0;
}

.page-histoire .cta-playlist {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

.page-histoire .cta-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: var(--spacing-lg) 0;
}

/* Titre avec style antique élégant */
.page-histoire .cta-content h3 {
    color: #F5E6D3;
    font-size: clamp(2rem, 5vw, 3rem);
    margin-bottom: var(--spacing-md);
    font-weight: 700;
    font-family: 'Deuterium', var(--font-primary);
    text-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.8),
        0 2px 10px rgba(0, 0, 0, 0.6),
        0 0 30px rgba(245, 158, 11, 0.4),
        2px 2px 4px rgba(0, 0, 0, 0.9);
    letter-spacing: 2px;
    line-height: 1.2;
    text-transform: none;
    animation: none;
    position: relative;
}

/* Sous-titre avec style antique */
.page-histoire .cta-content p {
    color: #E8D5B7;
    font-size: clamp(1.125rem, 2vw, 1.375rem);
    margin-bottom: var(--spacing-xl);
    opacity: 0.95;
    line-height: 1.8;
    text-shadow: 
        0 3px 15px rgba(0, 0, 0, 0.7),
        0 1px 5px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(245, 158, 11, 0.3);
    font-weight: 400;
    letter-spacing: 1px;
    font-style: italic;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Bouton avec style antique doré */
.page-histoire .btn-cta-primary {
    background: linear-gradient(135deg, 
        #D4AF37 0%,
        #F5E6D3 25%,
        #D4AF37 50%,
        #B8941E 75%,
        #D4AF37 100%
    );
    color: #2C1810;
    padding: 18px 42px;
    border-radius: 8px;
    font-weight: 700;
    font-size: clamp(1rem, 2vw, 1.25rem);
    text-transform: none;
    letter-spacing: 1px;
    box-shadow: 
        0 8px 30px rgba(0, 0, 0, 0.5),
        0 4px 15px rgba(212, 175, 55, 0.4),
        inset 0 2px 4px rgba(255, 255, 255, 0.3),
        inset 0 -2px 4px rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(212, 175, 55, 0.6);
    position: relative;
    font-family: 'Deuterium', var(--font-primary);
}

/* Retirer les animations du bouton */
.page-histoire .btn-cta-primary::before,
.page-histoire .btn-cta-primary::after {
    display: none;
}

/* Effet hover subtil pour le bouton */
.page-histoire .btn-cta-primary:hover {
    transform: translateY(-3px);
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.6),
        0 6px 20px rgba(212, 175, 55, 0.5),
        inset 0 2px 4px rgba(255, 255, 255, 0.4),
        inset 0 -2px 4px rgba(0, 0, 0, 0.3);
    background: linear-gradient(135deg, 
        #E5C158 0%,
        #F5E6D3 25%,
        #E5C158 50%,
        #C9A52A 75%,
        #E5C158 100%
    );
    border-color: rgba(212, 175, 55, 0.8);
}

.page-histoire .btn-cta-primary:active {
    transform: translateY(-1px);
    box-shadow: 
        0 6px 20px rgba(0, 0, 0, 0.5),
        0 3px 10px rgba(212, 175, 55, 0.4),
        inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Icône YouTube dans le bouton */
.page-histoire .btn-cta-primary svg {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    transition: transform 0.3s ease;
}

.page-histoire .btn-cta-primary:hover svg {
    transform: scale(1.1);
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.4));
}

/* Texte du bouton */
.page-histoire .btn-cta-primary span {
    position: relative;
    z-index: 1;
    font-weight: 700;
}

/* Responsive pour mobile */
@media (max-width: 768px) {
    .page-histoire .cta-section {
        background-size: 150% auto;
        padding: calc(var(--spacing-xl) * 1.2) var(--spacing-md);
    }
    
    .page-histoire .cta-content h3 {
        font-size: clamp(1.75rem, 6vw, 2.5rem);
    }
    
    .page-histoire .btn-cta-primary {
        padding: 16px 32px;
        font-size: 1rem;
    }
}

/* ============================================
   CTA SCIENCE - Style antique avec image de fond
   ============================================ */

/* Retirer l'animation de fond LED pour Science */
.page-science .cta-section::after {
    display: none !important;
}

/* Style spécifique pour le CTA Science */
.page-science .cta-section {
    background: 
        linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.4) 100%),
        url('../assets/images/cta-science-bg.png');
    background-size: 120% auto;
    background-position: center;
    background-blend-mode: overlay;
    background-attachment: scroll;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    border-radius: 0;
    box-shadow: none;
    border: none;
    margin: 0;
    width: 100%;
    padding: var(--spacing-xxl) var(--spacing-md);
}

/* Overlay subtil pour améliorer la lisibilité */
.page-science .cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.5) 0%,
        rgba(0, 0, 0, 0.3) 50%,
        rgba(0, 0, 0, 0.5) 100%
    );
    pointer-events: none;
    z-index: 1;
}

/* Contenu du CTA Science */
.page-science .cta-section .container {
    max-width: 100%;
    padding: 0;
}

.page-science .cta-playlist {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

.page-science .cta-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: var(--spacing-lg) 0;
}

/* Titre avec style antique élégant - Couleurs bleues */
.page-science .cta-content h3 {
    color: #E0F2FE;
    font-size: clamp(2rem, 5vw, 3rem);
    margin-bottom: var(--spacing-md);
    font-weight: 700;
    font-family: 'Deuterium', var(--font-primary);
    text-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.8),
        0 2px 10px rgba(0, 0, 0, 0.6),
        0 0 30px rgba(59, 130, 246, 0.5),
        2px 2px 4px rgba(0, 0, 0, 0.9);
    letter-spacing: 2px;
    line-height: 1.2;
    text-transform: none;
    animation: none;
    position: relative;
}

/* Sous-titre avec style antique - Couleurs bleues claires */
.page-science .cta-content p {
    color: #BAE6FD;
    font-size: clamp(1.125rem, 2vw, 1.375rem);
    margin-bottom: var(--spacing-xl);
    opacity: 0.95;
    line-height: 1.8;
    text-shadow: 
        0 3px 15px rgba(0, 0, 0, 0.7),
        0 1px 5px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(59, 130, 246, 0.4);
    font-weight: 400;
    letter-spacing: 1px;
    font-style: italic;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Bouton avec style antique bleu */
.page-science .btn-cta-primary {
    background: linear-gradient(135deg, 
        #3B82F6 0%,
        #60A5FA 25%,
        #3B82F6 50%,
        #2563EB 75%,
        #3B82F6 100%
    );
    color: #FFFFFF;
    padding: 18px 42px;
    border-radius: 8px;
    font-weight: 700;
    font-size: clamp(1rem, 2vw, 1.25rem);
    text-transform: none;
    letter-spacing: 1px;
    box-shadow: 
        0 8px 30px rgba(0, 0, 0, 0.5),
        0 4px 15px rgba(59, 130, 246, 0.4),
        inset 0 2px 4px rgba(255, 255, 255, 0.3),
        inset 0 -2px 4px rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(59, 130, 246, 0.6);
    position: relative;
    font-family: 'Deuterium', var(--font-primary);
}

/* Retirer les animations du bouton */
.page-science .btn-cta-primary::before,
.page-science .btn-cta-primary::after {
    display: none;
}

/* Effet hover subtil pour le bouton */
.page-science .btn-cta-primary:hover {
    transform: translateY(-3px);
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.6),
        0 6px 20px rgba(59, 130, 246, 0.5),
        inset 0 2px 4px rgba(255, 255, 255, 0.4),
        inset 0 -2px 4px rgba(0, 0, 0, 0.3);
    background: linear-gradient(135deg, 
        #60A5FA 0%,
        #93C5FD 25%,
        #60A5FA 50%,
        #3B82F6 75%,
        #60A5FA 100%
    );
    border-color: rgba(59, 130, 246, 0.8);
}

.page-science .btn-cta-primary:active {
    transform: translateY(-1px);
    box-shadow: 
        0 6px 20px rgba(0, 0, 0, 0.5),
        0 3px 10px rgba(59, 130, 246, 0.4),
        inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Icône YouTube dans le bouton */
.page-science .btn-cta-primary svg {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    transition: transform 0.3s ease;
}

.page-science .btn-cta-primary:hover svg {
    transform: scale(1.1);
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.4));
}

/* Texte du bouton */
.page-science .btn-cta-primary span {
    position: relative;
    z-index: 1;
    font-weight: 700;
}

/* Responsive pour mobile */
@media (max-width: 768px) {
    .page-science .cta-section {
        background-size: 150% auto;
        padding: calc(var(--spacing-xl) * 1.2) var(--spacing-md);
    }
    
    .page-science .cta-content h3 {
        font-size: clamp(1.75rem, 6vw, 2.5rem);
    }
    
    .page-science .btn-cta-primary {
        padding: 16px 32px;
        font-size: 1rem;
    }
}

/* ============================================
   CTA CINÉMA - Style antique avec image de fond
   ============================================ */

/* Retirer l'animation de fond LED pour Cinéma */
.page-cinema .cta-section::after {
    display: none !important;
}

/* Style spécifique pour le CTA Cinéma */
.page-cinema .cta-section {
    background: 
        linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.4) 100%),
        url('../assets/images/cta-cinema-bg.png');
    background-size: 120% auto;
    background-position: center;
    background-blend-mode: overlay;
    background-attachment: scroll;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    border-radius: 0;
    box-shadow: none;
    border: none;
    margin: 0;
    width: 100%;
    padding: var(--spacing-xxl) var(--spacing-md);
}

/* Overlay subtil pour améliorer la lisibilité */
.page-cinema .cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.5) 0%,
        rgba(0, 0, 0, 0.3) 50%,
        rgba(0, 0, 0, 0.5) 100%
    );
    pointer-events: none;
    z-index: 1;
}

/* Contenu du CTA Cinéma */
.page-cinema .cta-section .container {
    max-width: 100%;
    padding: 0;
}

.page-cinema .cta-playlist {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

.page-cinema .cta-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: var(--spacing-lg) 0;
}

/* Titre avec style antique élégant - Couleurs rouges */
.page-cinema .cta-content h3 {
    color: #FEE2E2;
    font-size: clamp(2rem, 5vw, 3rem);
    margin-bottom: var(--spacing-md);
    font-weight: 700;
    font-family: 'Deuterium', var(--font-primary);
    text-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.8),
        0 2px 10px rgba(0, 0, 0, 0.6),
        0 0 30px rgba(239, 68, 68, 0.5),
        2px 2px 4px rgba(0, 0, 0, 0.9);
    letter-spacing: 2px;
    line-height: 1.2;
    text-transform: none;
    animation: none;
    position: relative;
}

/* Sous-titre avec style antique - Couleurs rouges claires */
.page-cinema .cta-content p {
    color: #FECACA;
    font-size: clamp(1.125rem, 2vw, 1.375rem);
    margin-bottom: var(--spacing-xl);
    opacity: 0.95;
    line-height: 1.8;
    text-shadow: 
        0 3px 15px rgba(0, 0, 0, 0.7),
        0 1px 5px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(239, 68, 68, 0.4);
    font-weight: 400;
    letter-spacing: 1px;
    font-style: italic;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Bouton avec style antique rouge */
.page-cinema .btn-cta-primary {
    background: linear-gradient(135deg, 
        #EF4444 0%,
        #F87171 25%,
        #EF4444 50%,
        #DC2626 75%,
        #EF4444 100%
    );
    color: #FFFFFF;
    padding: 18px 42px;
    border-radius: 8px;
    font-weight: 700;
    font-size: clamp(1rem, 2vw, 1.25rem);
    text-transform: none;
    letter-spacing: 1px;
    box-shadow: 
        0 8px 30px rgba(0, 0, 0, 0.5),
        0 4px 15px rgba(239, 68, 68, 0.4),
        inset 0 2px 4px rgba(255, 255, 255, 0.3),
        inset 0 -2px 4px rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(239, 68, 68, 0.6);
    position: relative;
    font-family: 'Deuterium', var(--font-primary);
}

/* Retirer les animations du bouton */
.page-cinema .btn-cta-primary::before,
.page-cinema .btn-cta-primary::after {
    display: none;
}

/* Effet hover subtil pour le bouton */
.page-cinema .btn-cta-primary:hover {
    transform: translateY(-3px);
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.6),
        0 6px 20px rgba(239, 68, 68, 0.5),
        inset 0 2px 4px rgba(255, 255, 255, 0.4),
        inset 0 -2px 4px rgba(0, 0, 0, 0.3);
    background: linear-gradient(135deg, 
        #F87171 0%,
        #FCA5A5 25%,
        #F87171 50%,
        #EF4444 75%,
        #F87171 100%
    );
    border-color: rgba(239, 68, 68, 0.8);
}

.page-cinema .btn-cta-primary:active {
    transform: translateY(-1px);
    box-shadow: 
        0 6px 20px rgba(0, 0, 0, 0.5),
        0 3px 10px rgba(239, 68, 68, 0.4),
        inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Icône YouTube dans le bouton */
.page-cinema .btn-cta-primary svg {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    transition: transform 0.3s ease;
}

.page-cinema .btn-cta-primary:hover svg {
    transform: scale(1.1);
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.4));
}

/* Texte du bouton */
.page-cinema .btn-cta-primary span {
    position: relative;
    z-index: 1;
    font-weight: 700;
}

/* Responsive pour mobile */
@media (max-width: 768px) {
    .page-cinema .cta-section {
        background-size: 150% auto;
        padding: calc(var(--spacing-xl) * 1.2) var(--spacing-md);
    }
    
    .page-cinema .cta-content h3 {
        font-size: clamp(1.75rem, 6vw, 2.5rem);
    }
    
    .page-cinema .btn-cta-primary {
        padding: 16px 32px;
        font-size: 1rem;
    }
}

/* ============================================
   CTA HORS-SÉRIE - Style antique avec image de fond
   ============================================ */

/* Retirer l'animation de fond LED pour Hors-Série */
.page-hors-serie .cta-section::after {
    display: none !important;
}

/* Style spécifique pour le CTA Hors-Série */
.page-hors-serie .cta-section {
    background: 
        linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.4) 100%),
        url('../assets/images/cta-hors-serie-bg.png');
    background-size: 120% auto;
    background-position: center;
    background-blend-mode: overlay;
    background-attachment: scroll;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    border-radius: 0;
    box-shadow: none;
    border: none;
    margin: 0;
    width: 100%;
    padding: var(--spacing-xxl) var(--spacing-md);
}

/* Overlay subtil pour améliorer la lisibilité */
.page-hors-serie .cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.5) 0%,
        rgba(0, 0, 0, 0.3) 50%,
        rgba(0, 0, 0, 0.5) 100%
    );
    pointer-events: none;
    z-index: 1;
}

/* Contenu du CTA Hors-Série */
.page-hors-serie .cta-section .container {
    max-width: 100%;
    padding: 0;
}

.page-hors-serie .cta-playlist {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

.page-hors-serie .cta-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: var(--spacing-lg) 0;
}

/* Titre avec style antique élégant - Couleurs roses */
.page-hors-serie .cta-content h3 {
    color: #FCE7F3;
    font-size: clamp(2rem, 5vw, 3rem);
    margin-bottom: var(--spacing-md);
    font-weight: 700;
    font-family: 'Deuterium', var(--font-primary);
    text-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.8),
        0 2px 10px rgba(0, 0, 0, 0.6),
        0 0 30px rgba(236, 72, 153, 0.5),
        2px 2px 4px rgba(0, 0, 0, 0.9);
    letter-spacing: 2px;
    line-height: 1.2;
    text-transform: none;
    animation: none;
    position: relative;
}

/* Sous-titre avec style antique - Couleurs roses claires */
.page-hors-serie .cta-content p {
    color: #FBCFE8;
    font-size: clamp(1.125rem, 2vw, 1.375rem);
    margin-bottom: var(--spacing-xl);
    opacity: 0.95;
    line-height: 1.8;
    text-shadow: 
        0 3px 15px rgba(0, 0, 0, 0.7),
        0 1px 5px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(236, 72, 153, 0.4);
    font-weight: 400;
    letter-spacing: 1px;
    font-style: italic;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Bouton avec style antique rose */
.page-hors-serie .btn-cta-primary {
    background: linear-gradient(135deg, 
        #EC4899 0%,
        #F472B6 25%,
        #EC4899 50%,
        #DB2777 75%,
        #EC4899 100%
    );
    color: #FFFFFF;
    padding: 18px 42px;
    border-radius: 8px;
    font-weight: 700;
    font-size: clamp(1rem, 2vw, 1.25rem);
    text-transform: none;
    letter-spacing: 1px;
    box-shadow: 
        0 8px 30px rgba(0, 0, 0, 0.5),
        0 4px 15px rgba(236, 72, 153, 0.4),
        inset 0 2px 4px rgba(255, 255, 255, 0.3),
        inset 0 -2px 4px rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(236, 72, 153, 0.6);
    position: relative;
    font-family: 'Deuterium', var(--font-primary);
}

/* Retirer les animations du bouton */
.page-hors-serie .btn-cta-primary::before,
.page-hors-serie .btn-cta-primary::after {
    display: none;
}

/* Effet hover subtil pour le bouton */
.page-hors-serie .btn-cta-primary:hover {
    transform: translateY(-3px);
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.6),
        0 6px 20px rgba(236, 72, 153, 0.5),
        inset 0 2px 4px rgba(255, 255, 255, 0.4),
        inset 0 -2px 4px rgba(0, 0, 0, 0.3);
    background: linear-gradient(135deg, 
        #F472B6 0%,
        #F9A8D4 25%,
        #F472B6 50%,
        #EC4899 75%,
        #F472B6 100%
    );
    border-color: rgba(236, 72, 153, 0.8);
}

.page-hors-serie .btn-cta-primary:active {
    transform: translateY(-1px);
    box-shadow: 
        0 6px 20px rgba(0, 0, 0, 0.5),
        0 3px 10px rgba(236, 72, 153, 0.4),
        inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Icône YouTube dans le bouton */
.page-hors-serie .btn-cta-primary svg {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    transition: transform 0.3s ease;
}

.page-hors-serie .btn-cta-primary:hover svg {
    transform: scale(1.1);
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.4));
}

/* Texte du bouton */
.page-hors-serie .btn-cta-primary span {
    position: relative;
    z-index: 1;
    font-weight: 700;
}

/* Responsive pour mobile */
@media (max-width: 768px) {
    .page-hors-serie .cta-section {
        background-size: 150% auto;
        padding: calc(var(--spacing-xl) * 1.2) var(--spacing-md);
    }
    
    .page-hors-serie .cta-content h3 {
        font-size: clamp(1.75rem, 6vw, 2.5rem);
    }
    
    .page-hors-serie .btn-cta-primary {
        padding: 16px 32px;
        font-size: 1rem;
    }
}