* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ============================================
   LOADER - Animation de chargement
   ============================================ */

.loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

.loader-wrapper.hidden {
    opacity: 0;
    visibility: hidden;
}

/* Animation des touches de piano */
.piano-loader {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 60px;
    margin-bottom: 30px;
}

.piano-key {
    width: 8px;
    background: linear-gradient(180deg, #fff 0%, #e8e8e8 100%);
    border-radius: 0 0 3px 3px;
    animation: pianoKey 1.2s ease-in-out infinite;
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.3),
        inset 0 -2px 4px rgba(0, 0, 0, 0.1);
}

.piano-key:nth-child(1) { height: 30px; animation-delay: 0s; }
.piano-key:nth-child(2) { height: 35px; animation-delay: 0.1s; }
.piano-key:nth-child(3) { height: 40px; animation-delay: 0.2s; }
.piano-key:nth-child(4) { height: 50px; animation-delay: 0.3s; }
.piano-key:nth-child(5) { height: 60px; animation-delay: 0.4s; }
.piano-key:nth-child(6) { height: 50px; animation-delay: 0.5s; }
.piano-key:nth-child(7) { height: 40px; animation-delay: 0.6s; }
.piano-key:nth-child(8) { height: 35px; animation-delay: 0.7s; }
.piano-key:nth-child(9) { height: 30px; animation-delay: 0.8s; }

@keyframes pianoKey {
    0%, 100% {
        transform: scaleY(1);
        background: linear-gradient(180deg, #fff 0%, #e8e8e8 100%);
    }
    50% {
        transform: scaleY(0.6);
        background: linear-gradient(180deg, rgba(212, 175, 55, 0.9) 0%, rgba(212, 175, 55, 0.7) 100%);
    }
}

/* Texte du loader */
.loader-text {
    font-family: 'Manuscrit', 'Cormorant Garamond', serif;
    font-size: 1.8rem;
    color: #fff;
    letter-spacing: 0.3rem;
    opacity: 0;
    animation: fadeInText 1.5s ease-out 0.3s forwards;
}

.loader-text span {
    display: inline-block;
    animation: shimmer 2s ease-in-out infinite;
}

@keyframes fadeInText {
    to {
        opacity: 1;
    }
}

@keyframes shimmer {
    0%, 100% {
        color: #fff;
        text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
    }
    50% {
        color: rgba(212, 175, 55, 0.9);
        text-shadow: 0 0 20px rgba(212, 175, 55, 0.6);
    }
}

/* Barre de progression subtile */
.loader-progress {
    width: 200px;
    height: 2px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    margin-top: 25px;
    overflow: hidden;
}

.loader-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.8), transparent);
    animation: progressSlide 1.5s ease-in-out infinite;
}

@keyframes progressSlide {
    0% {
        width: 0%;
        margin-left: 0%;
    }
    50% {
        width: 60%;
        margin-left: 20%;
    }
    100% {
        width: 0%;
        margin-left: 100%;
    }
}

@font-face {
    font-family: "Manuscrit";
    src: url("../polices/photograph_signature/Photograph\ Signature.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'Arial', sans-serif;
    background-color: #1d1d1d;
    color: #fff;
    overflow-x: hidden;
    position: relative;
}

/* Texture de fond subtile */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(circle at 20% 50%, rgba(212, 175, 55, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(212, 175, 55, 0.02) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255, 255, 255, 0.01) 2px, rgba(255, 255, 255, 0.01) 4px);
    pointer-events: none;
    z-index: 1;
    opacity: 0.3;
}

.en {
    display: none;
}

.logo {
    position: fixed;
    top: 10px;
    right: 25px;
    font-size: 2rem;
    color: white;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 999;
    font-family: manuscrit, sans-serif;
    filter: drop-shadow(0 2px 8px rgba(212, 175, 55, 0.2));
}

.logo:hover {
    transform: translateY(-2px) rotate(-2deg);
    color: rgba(255, 255, 255, 0.95);
    filter: drop-shadow(0 4px 12px rgba(212, 175, 55, 0.4));
}

/* Header avec fond */

.header-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: rgba(26, 26, 26, 0);
    backdrop-filter: blur(0px);
    z-index: 998;
    transition: all 0.3s ease;
    pointer-events: none;
}

.header-overlay.visible {
    background: rgba(26, 26, 26, 0.85);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* musique */

.bouton-musique {
    position: fixed;
    width: 46px;
    height: 46px;
    top: 18px;
    left: 150px;
    background: #3a3a3a;
    border: 1px solid rgba(212, 175, 55, 0.2);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 999;
    border-radius: 50%;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.4),
        0 2px 4px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.bouton-musique:hover {
    transform: scale(1.1) translateY(-2px);
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.5),
        0 3px 6px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(212, 175, 55, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border-color: rgba(212, 175, 55, 0.4);
}

.cle-de-sol {
    width: 30px;
}

.musique-inactive::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to bottom right,
        transparent 0%,
        transparent calc(50% - 1px),
        white calc(50% - 1px),
        white calc(50% + 1px),
        transparent calc(50% + 1px),
        transparent 100%
    );
    pointer-events: none;
}

/* Lecteur audio */

#lecteur-musique {
    position: fixed;
    top: 34px;
    left: 200px;
    z-index: 999;
    font-size: 12px;
    color: white;
}

.lecteur-cache {
    display: none;
}

/* section1 */

.noir-blanc {
    filter: grayscale(20%);
}

.section1 {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 768px) {
    .section1 {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        min-height: auto;
    }
}

.conteneur-images {
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
    position: relative;
}

.conteneur-images img, .conteneur-images video {
    display: block;
    width: 100vw;
    height: auto;
    filter: brightness(0.4);
}

/* À partir de 700px, on fixe la largeur et on rogne les bords */
@media (max-width: 700px) {
    .conteneur-images {
        width: 100%;
        overflow: hidden;
        position: relative;
    }

    /* Overlay général doux sur mobile pour plus d'harmonie */
    .conteneur-images::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(
            to bottom,
            rgba(29, 29, 29, 0.1) 0%,
            rgba(29, 29, 29, 0.2) 50%,
            rgba(29, 29, 29, 0.4) 100%
        );
        pointer-events: none;
        z-index: 3;
    }

    .conteneur-images img, .conteneur-images video {
        display: block;
        width: 600px;
        min-width: 600px;
        height: auto;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        filter: brightness(0.38) grayscale(35%) contrast(1.05) !important;
    }

    /* Transitions douces entre chaque élément */
    .conteneur-images > video {
        position: relative;
    }

    .conteneur-images > video::after,
    .conteneur-images > img:first-of-type::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 120px;
        background: linear-gradient(
            to bottom,
            transparent 0%,
            rgba(29, 29, 29, 0.3) 40%,
            rgba(29, 29, 29, 0.6) 70%,
            rgba(29, 29, 29, 0.9) 100%
        );
        pointer-events: none;
        z-index: 2;
    }

    /* L'image en noir/blanc devient totalement monochrome */
    .conteneur-images .noir-blanc {
        position: relative;
    }

    .conteneur-images .noir-blanc img {
        filter: grayscale(60%) brightness(0.38) contrast(1.1) !important;
    }

    /* Séparations subtiles avec lignes dorées */
    .conteneur-images > *:not(:last-child) {
        position: relative;
        padding-bottom: 1px;
        border-bottom: 1px solid rgba(212, 175, 55, 0.08);
    }
}

.section1 h1 {
    top: 35vh;
    position: absolute;
    font-size: 3.3rem;
    font-weight: 300;
    letter-spacing: 0.2rem;
    font-family: "Manuscrit", sans-serif;
    text-shadow:
        0 0 30px rgba(255, 255, 255, 0.8),
        0 0 60px rgba(255, 255, 255, 0.4),
        0 0 90px rgba(255, 255, 255, 0.2),
        0 2px 20px rgba(212, 175, 55, 0.3);
    z-index: 2;
    animation: fadeInDown 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    opacity: 0;
}

@media (max-width: 768px) {
    .section1 h1 {
        top: 30vh;
        left: 0;
        right: 0;
        width: 100%;
        font-size: 2.2rem;
        padding: 0 20px;
        text-align: center;
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.titre2 {
    margin-top: 250px;
}

.centrer {
    text-align: center;
}

@media (min-width: 768px) {
    .section1::before {
        background-size: contain;
    }
}




/* biographie */

.intro-text {
    position: absolute;
    top: 700px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 800px;
    text-align: justify;
    z-index: 2;
    color: #fff;
    font-size: 1.2rem;
    line-height: 2;
    padding-bottom: 100px;
    animation: fadeIn 1.5s ease-out 0.3s forwards;
    opacity: 0;
}

@media (max-width: 768px) {
    .intro-text {
        font-size: 1rem;
        line-height: 1.8;
        animation: fadeInMobile 1.5s ease-out 0.3s forwards;
    }
}

@keyframes fadeInMobile {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.intro-text p {
    margin-bottom: 1.2em;
}

/* réseaux */

.social-media {
    position: absolute;
    top: 1500px;
    left: 0;
    right: 0;
    padding: 10px 20px 40px;
    padding-bottom: 150px;
    text-align: center;
    background: transparent;
    z-index: 4;
}

.social-media h2 {
    font-size: 2rem;
    margin-bottom: 30px;
    color: #fff;
    font-weight: 300;
    letter-spacing: 2px;
    font-family: 'Cormorant Garamond', serif;
}

.social-links {
    display: flex;
    justify-content: center;
    gap: 25px;
    flex-wrap: wrap;
}

.social-links a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.social-links a:hover {
    color: #fff;
    transform: translateY(-3px);
}

.social-icon {
    width: 40px;
    height: 40px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.3s ease;
}

.social-links a:hover .social-icon {
    transform: scale(1.1);
}

/* Icônes officielles */

.social-links a[href*="youtube"] .social-icon {
    background-image: url('https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/youtube.svg');
    filter: brightness(0) invert(1);
}

.social-links a[href*="youtube"]:hover .social-icon {
    filter: none;
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath fill="%23FF0000" d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/%3E%3C/svg%3E');
}

.social-links a[href*="twitch"] .social-icon {
    background-image: url('https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/twitch.svg');
    filter: brightness(0) invert(1);
}

.social-links a[href*="twitch"]:hover .social-icon {
    filter: none;
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath fill="%239146FF" d="M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0L1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143l-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714Z"/%3E%3C/svg%3E');
}

.social-links a[href*="x.com"] .social-icon,
.social-links a[href*="twitter"] .social-icon {
    background-image: url('https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/x.svg');
    filter: brightness(0) invert(1);
}

.social-links a[href*="x.com"]:hover .social-icon,
.social-links a[href*="twitter"]:hover .social-icon {
    filter: brightness(0.9);
}

.social-links a[href*="facebook"] .social-icon {
    background-image: url('https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/facebook.svg');
    filter: brightness(0) invert(1);
}

.social-links a[href*="facebook"]:hover .social-icon {
    filter: none;
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath fill="%231877F2" d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/%3E%3C/svg%3E');
}

.social-links a[href*="instagram"] .social-icon {
    background-image: url('https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/instagram.svg');
    filter: brightness(0) invert(1);
}

.social-links a[href*="instagram"]:hover .social-icon {
    filter: none;
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3ClinearGradient id="ig" x1="0%25" y1="100%25" x2="100%25" y2="0%25"%3E%3Cstop offset="0%25" style="stop-color:%23f09433"/%3E%3Cstop offset="25%25" style="stop-color:%23e6683c"/%3E%3Cstop offset="50%25" style="stop-color:%23dc2743"/%3E%3Cstop offset="75%25" style="stop-color:%23cc2366"/%3E%3Cstop offset="100%25" style="stop-color:%23bc1888"/%3E%3C/linearGradient%3E%3Cpath fill="url(%23ig)" d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z"/%3E%3C/svg%3E');
}

/* Carousel */

.carousel-section {
    padding: 60px 20px;
    z-index: 2;
    position: relative;
}

.carousel-container {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
}

.carousel-wrapper {
    overflow: hidden;
    border-radius: 8px;
}

.carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.carousel-item {
    min-width: 100%;
    position: relative;
    aspect-ratio: 16/9;
}

.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carousel-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 100%);
    padding: 40px;
}

.carousel-title {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.carousel-meta {
    font-size: 0.9rem;
    color: #aaa;
}

.carousel-duration {
    position: absolute;
    bottom: 40px;
    right: 40px;
    background-color: rgba(0,0,0,0.8);
    padding: 5px 15px;
    border-radius: 4px;
    font-size: 1.1rem;
}

/* fleches */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255,255,255,0.1);
    border: 2px solid rgba(255,255,255,0.3);
    color: #fff;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10;
    backdrop-filter: blur(5px);
}

.carousel-btn:hover {
    background-color: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.6);
}

.carousel-btn.prev {
    left: 20px;
}

.carousel-btn.next {
    right: 20px;
}

/* Menu */

.bottom-menu {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.98), rgba(0, 0, 0, 0.95));
    border-top: 1px solid rgba(212, 175, 55, 0.2);
    padding: 30px 0;
    z-index: 100;
    backdrop-filter: blur(10px);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
}

.menu-items {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px;
    list-style: none;
}

.menu-items li a {
    color: #fff;
    text-decoration: none;
    font-size: 1.1rem;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
    font-style: italic;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    padding: 8px 0;
    display: inline-block;
}

.menu-items li a.active {
    color: rgba(212, 175, 55, 0.9);
}

.menu-items li a::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.8), transparent);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.4);
}

.menu-items li a.active::before {
    width: 100%;
}

.menu-items li a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #fff, transparent);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.menu-items li a:hover {
    color: rgba(255, 255, 255, 0.95);
    transform: translateY(-2px);
}

.menu-items li a:hover::after {
    width: 100%;
}

/* Placeholder Images */

.placeholder-img {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: rgba(255,255,255,0.3);
}

/* page des musiques */

.music-section {
    position: absolute;
    top: 1300px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 1200px;
    width: calc(100% - 40px);
    padding: 0 20px;
    margin-bottom: 100px;
    z-index: 3;
}

.music-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: 30px;
    margin-top: 40px;
}

.music-card {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    border-radius: 16px;
    padding: 25px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(212, 175, 55, 0.15);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.3),
        0 2px 4px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
    position: relative;
    overflow: hidden;
}

.music-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.3), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.music-card:hover {
    transform: translateY(-8px);
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.4),
        0 8px 16px rgba(0, 0, 0, 0.3),
        0 0 30px rgba(212, 175, 55, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    border-color: rgba(212, 175, 55, 0.3);
}

.music-card:hover::before {
    opacity: 1;
}

.music-card.playing {
    border-color: #979797;
    background: linear-gradient(135deg, #2d2d2d 0%, #3d3d3d 100%);
}

.music-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.music-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: #fff;
    flex: 1;
}

.spotify-link {
    color: #1DB954;
    text-decoration: none;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    padding: 5px;
    border-radius: 50%;
    background: rgba(29, 185, 84, 0.1);
}

.spotify-link:hover {
    color: #1ed760;
    background: rgba(29, 185, 84, 0.2);
    transform: scale(1.1);
}

.spotify-link svg {
    width: 24px;
    height: 24px;
}

.music-duration {
    font-size: 0.9rem;
    color: #aaa;
    margin-bottom: 15px;
}

.play-btn {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.05));
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    padding: 10px 20px;
    border-radius: 25px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.play-btn:hover {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(212, 175, 55, 0.1));
    border-color: rgba(212, 175, 55, 0.5);
    transform: translateY(-2px);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.3),
        0 0 15px rgba(212, 175, 55, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.music-card.playing .play-btn {
    background-color: rgba(151,151,151,0.3);
    border-color: #979797;
}

/* cd */

.cd-sales-section {
    position: absolute;
    top: 2140px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 1200px;
    width: calc(100% - 40px);
    padding: 0 20px;
    margin-bottom: 100px;
    z-index: 3;
}

.cd-section-title {
    font-size: 2.2rem;
    font-weight: 400;
    color: #fff;
    text-align: center;
    margin-bottom: 50px;
    letter-spacing: 2px;
    font-family: 'Cormorant Garamond', serif;
    position: relative;
    padding-bottom: 20px;
}

.cd-section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.6), transparent);
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}

.cd-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
    gap: 30px;
}

.cd-card {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    border-radius: 16px;
    padding: 25px;
    border: 1px solid rgba(212, 175, 55, 0.15);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.3),
        0 2px 4px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
    position: relative;
    overflow: hidden;
}

.cd-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.3), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.cd-card:hover {
    transform: translateY(-8px);
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.4),
        0 8px 16px rgba(0, 0, 0, 0.3),
        0 0 30px rgba(212, 175, 55, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    border-color: rgba(212, 175, 55, 0.3);
}

.cd-card:hover::before {
    opacity: 1;
}

.cd-content {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.cd-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: #fff;
    margin: 0;
}

.cd-description {
    font-size: 0.9rem;
    color: #aaa;
    line-height: 1.6;
    margin: 0;
}

.cd-description small {
    display: block;
    margin-top: 5px;
    font-style: italic;
}

.cd-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.cd-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 20px;
    border-radius: 25px;
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
}

.cd-link svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.youtube-link {
    background-color: rgba(255, 0, 0, 0.1);
    border: 2px solid rgba(255, 0, 0, 0.3);
    color: #FF0000;
}

.youtube-link:hover {
    background-color: rgba(255, 0, 0, 0.2);
    border-color: rgba(255, 0, 0, 0.6);
}

.amazon-link {
    background-color: rgba(255, 149, 0, 0.1);
    border: 2px solid rgba(255, 149, 0, 0.3);
    color: #FF9500;
}

.amazon-link svg {
    width: 38px;
}

.amazon-link:hover {
    background-color: rgba(255, 149, 0, 0.2);
    border-color: rgba(255, 149, 0, 0.6);
}

.review-link {
    background-color: rgba(151, 151, 151, 0.1);
    border: 2px solid rgba(151, 151, 151, 0.3);
    color: #979797;
}

.review-link:hover {
    background-color: rgba(151, 151, 151, 0.2);
    border-color: rgba(151, 151, 151, 0.6);
}

/* arrangements */

.section-arrangements {
    position: absolute;
    top: 2600px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 1200px;
    width: calc(100% - 40px);
    padding: 60px 20px;
    text-align: center;
    padding-bottom: 200px;
    z-index: 3;
}

.section-cours {
    position: absolute;
    top: 3100px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 1200px;
    width: calc(100% - 40px);
    padding: 60px 20px;
    text-align: center;
    padding-bottom: 200px;
    z-index: 3;
}

.titre-arrangements {
    font-size: 2.2rem;
    font-weight: 400;
    color: #fff;
    margin-bottom: 30px;
    letter-spacing: 2px;
    font-family: 'Cormorant Garamond', serif;
    position: relative;
    padding-bottom: 20px;
}

.titre-arrangements::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.6), transparent);
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}

.description-arrangements {
    font-size: 1.1rem;
    color: #aaa;
    line-height: 1.8;
    margin-bottom: 40px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.description-arrangements2 {
    font-size: 1.1rem;
    color: #aaa;
    line-height: 1.8;
    margin-bottom: 40px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}

.bouton-arrangements {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 15px 40px;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.08), rgba(212, 175, 55, 0.05));
    border: 2px solid rgba(212, 175, 55, 0.3);
    color: #fff;
    text-decoration: none;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.2rem;
    border-radius: 30px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.bouton-arrangements::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.2), transparent);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.bouton-arrangements:hover::before {
    width: 300px;
    height: 300px;
}

.bouton-arrangements:hover {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(212, 175, 55, 0.1));
    border-color: rgba(212, 175, 55, 0.6);
    transform: translateY(-4px);
    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.4),
        0 0 30px rgba(212, 175, 55, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.bouton-arrangements svg {
    width: 24px;
    height: 24px;
}

@media (max-width: 1200px) {
    .cd-sales-section {
        top: 2100px;
    }

    .section-arrangements {
        top: 2500px;
    }

    .section-cours {
        top: 2800px;
    }
}

@media (max-width: 1060px) {
    .cd-sales-section {
        top: 2300px;
    }

    .section-arrangements {
    top: 2700px;
    }

    .section-cours {
        top: 3050px;
    }

}

@media (max-width: 1000px) {

    .reels-section {
        margin-top: 1700px;
    }

}

@media (max-width: 850px) {

    .reels-section {
        margin-top: 1200px;
    }

}


@media (max-width: 768px) {

    .music-section {
        top: 1600px;
    }

    .cd-sales-section {
        top: 3350px;
    }

    .section-arrangements {
    top: 4050px;
    }

    .section-cours {
        top: 4400px;
    }

    .reels-section {
        margin-top: 1000px;
    }

}

@media (max-width: 680px) {

    .reels-section {
        margin-top: 720px;
    }

}

@media (max-width: 550px) {

    .reels-section {
        margin-top: 500px;
    }

    .cd-sales-section {
        top: 3450px;
    }

    .section-arrangements {
    top: 4150px;
    }

    .section-cours {
        top: 4550px;
    }

}

@media (max-width: 450px) {

    .music-section {
        top: 1700px;
    }

    .cd-sales-section {
        top: 3500px;
    }

    .section-arrangements {
        top: 4200px;
    }

    .section-cours {
        top: 4600px;
    }

    .reels-section {
        margin-top: 300px;
    }
}


/* boutton langue */

.bouton-langue {
    position: fixed;
    top: 20px;
    left: 25px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    background: #3a3a3a;
    padding: 8px 15px;
    border-radius: 25px;
    border: 1px solid rgba(212, 175, 55, 0.2);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.4),
        0 2px 4px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.bouton-langue:hover {
    transform: translateY(-2px);
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(212, 175, 55, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border-color: rgba(212, 175, 55, 0.4);
}

.interrupteur {
    position: relative;
    width: 50px;
    height: 26px;
    background: #555;
    border-radius: 13px;
    transition: background 0.3s;
}

.interrupteur::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: white;
    top: 3px;
    left: 3px;
    transition: transform 0.3s;
}

.interrupteur.actif {
    background: #1a1a1a;
}

.interrupteur.actif::before {
    transform: translateX(24px);
}

.etiquette-langue {
    font-weight: bold;
    font-size: 14px;
    letter-spacing: 1px;
    min-width: 25px;
}


/* Section Vidéos */

.video-section {
    position: absolute;
    top: 1600px;
    left: 0;
    right: 0;
    padding: 80px 20px;
    text-align: center;
    z-index: 2;
}

.video-section2 {
    position: absolute;
    top: 1500px;
    left: 0;
    right: 0;
    padding: 80px 20px;
    text-align: center;
    z-index: 2;
}

@media (max-width: 1000px) {
    .video-section2 {
        top: 1400px;
    }
}

.video-section h2 {
    font-size: 2.2rem;
    margin-bottom: 50px;
    color: #fff;
    font-weight: 400;
    letter-spacing: 2px;
    font-family: 'Cormorant Garamond', serif;
    position: relative;
    padding-bottom: 20px;
}

.video-section h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.6), transparent);
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}

.video-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(450px, 100%), 1fr));
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 100px;
}

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* Ratio 16:9 */
    height: 0;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid rgba(212, 175, 55, 0.1);
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.5),
        0 4px 12px rgba(0, 0, 0, 0.3);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.video-wrapper:hover {
    transform: translateY(-8px);
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.6),
        0 8px 20px rgba(0, 0, 0, 0.4),
        0 0 30px rgba(212, 175, 55, 0.15);
    border-color: rgba(212, 175, 55, 0.25);
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
}

/* Section Réels */
.reels-section {
    position: absolute;
    top: 2800px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 1200px;
    width: calc(100% - 40px);
    padding: 60px 20px;
    text-align: center;
    z-index: 3;
    padding-bottom: 100px;
}

.reels-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 900px;
    margin: 0 auto;
}

.reels-section .cd-card {
    max-width: 400px;
    margin: 0 auto;
}

.reel-video {
    width: 100%;
    max-height: 600px;
    aspect-ratio: 9/16;
    object-fit: cover;
    background: #000;
    border-radius: 8px;
}

.reel-info {
    padding: 20px;
}

.reel-title {
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: #fff;
}

.reel-description {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #aaa;
}



/* Formulaire de contact */

.conteneur-formulaire {
    position: absolute;
    top: 70vh;
    left: 50%;
    transform: translateX(-50%);
    max-width: 900px;
    width: 90%;
    padding: 40px;
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    opacity: 0.8;
    border: 1px solid #333;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    z-index: 3;
    margin-bottom: 100px;
}

.groupe-champ {
    margin-bottom: 25px;
}

.etiquette-champ {
    display: block;
    margin-bottom: 8px;
    font-size: 0.9rem;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
}

.champ-texte,
.zone-texte {
    width: 100%;
    padding: 12px 15px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: #fff;
    font-size: 1rem;
    transition: all 0.3s ease;
    font-family: 'Arial', sans-serif;
}

.champ-texte:focus,
.zone-texte:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.08);
}

.zone-texte {
    resize: vertical;
    min-height: 150px;
}

.conteneur-captcha {
    margin: 30px 0;
    padding: 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid #333;
    border-radius: 8px;
}

.question-captcha {
    font-size: 1.1rem;
    margin-bottom: 15px;
    color: #fff;
    text-align: center;
}

.champ-captcha {
    text-align: center;
}

.message-erreur {
    color: #ff4444;
    font-size: 0.85rem;
    margin-top: 5px;
    display: none;
}

.message-erreur.visible {
    display: block;
}

.bouton-envoi {
    width: 100%;
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.2rem;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.bouton-envoi:hover {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-2px);
}

.bouton-envoi:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.message-succes {
    background: rgba(76, 175, 80, 0.2);
    border: 2px solid rgba(76, 175, 80, 0.5);
    color: #4CAF50;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    margin-top: 20px;
    display: none;
}

.message-succes.visible {
    display: block;
}

@media (max-width: 768px) {
    .conteneur-formulaire {
        padding: 25px;
        margin-left: 15px;
        margin-right: 15px;
    }
}



/* Responsive */
@media (max-width: 768px) {

    .header-overlay {
        height: 135px;
    }

    .bouton-langue {
        top: 75px;
        right: 25px;
        left: auto;
    }
    
    .bouton-musique {
        left: 25px;
    }

    #lecteur-musique {
        left: 85px;
    }

    .video-section {
        padding: 60px 15px;
    }
    
    .video-section h2 {
        font-size: 1.5rem;
        margin-bottom: 30px;
    }
    
    .video-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .carousel-btn {
        width: 45px;
        height: 45px;
        font-size: 1.2rem;
    }

    .menu-items {
        gap: 15px;
    }

    .menu-items li a {
        font-size: 0.6rem;
    }

    .titre2 {
        display: none;
    }

    .video-section2 {
        top: 1700px;
        margin-top: -300px;
    }

    .conteneur-formulaire {
        padding: 25px;
        width: calc(100% - 30px);
        left: 15px;
        transform: none;
    }

}

@media (max-width: 550px) {

    .menu-items li a {
        font-size: 0.5rem;
    }

    .video-section2 {
        top: 2200px;
    }

}

/* Corrections responsive pour mobiles - Approche flux normal */
@media (max-width: 768px) {
    /* TOUTES les sections en flux normal */
    .intro-text,
    .concerts-section,
    .video-section,
    .conteneur-formulaire,
    .music-section,
    .cd-sales-section,
    .section-arrangements,
    .section-cours,
    .video-section2,
    .reels-section,
    .social-media {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        width: 90%;
        max-width: 100%;
        margin: 0 auto;
        padding: 40px 20px;
    }

    /* PAGE BIOGRAPHIE - Texte positionné à 70vh du haut */
    .intro-text {
        position: absolute !important;
        top: 70vh !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 auto !important;
        padding-bottom: 150px; /* Marge en bas pour ne pas couper */
    }

    /* PAGE ACTUALITES - Concerts en premier */
    .concerts-section {
        margin-top: -100vh !important;
        margin-bottom: 40px !important;
    }

    /* PAGE ACTUALITES - Vidéos après les concerts */
    .video-section {
        margin-top: 0 !important;
        padding-bottom: 60px;
    }

    /* PAGE CONTACT - Formulaire remonté */
    .conteneur-formulaire {
        margin-top: -25vh !important;
        padding-bottom: 120px;
    }

    /* PAGE MUSIQUES - Réduire l'écart au-dessus des musiques */
    .music-section {
        margin-top: 90vh !important;
        margin-bottom: 40px !important;
    }

    /* PAGE MUSIQUES - Dernière section avec marge en bas */
    .section-cours {
        margin-bottom: 150px !important;
    }

    /* PAGE JEUX VIDEOS - Vidéos après le texte */
    .video-section2 {
        margin-top: 100vh !important;
        margin-bottom: 150px !important;
    }

    /* Espacement entre les autres sections */
    .cd-sales-section,
    .section-arrangements,
    .reels-section,
    .social-media {
        margin-top: 40px !important;
        margin-bottom: 40px !important;
    }

    .video-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

@media (max-width: 480px) {
    /* Menu du bas plus compact */
    .bottom-menu {
        padding: 15px 10px;
    }

    .menu-items {
        gap: 8px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .menu-items li a {
        font-size: 0.45rem;
        padding: 5px 0;
    }
}

/* ============================================
   SECTION CONCERTS - Tableau des dates
   ============================================ */

.concerts-section {
    position: absolute;
    top: 600px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 1000px;
    width: calc(100% - 40px);
    padding: 60px 20px;
    padding-bottom: 80px;
    z-index: 3;
}

.concerts-title {
    font-size: 2.2rem;
    font-weight: 400;
    color: #fff;
    text-align: center;
    margin-bottom: 50px;
    letter-spacing: 2px;
    font-family: 'Cormorant Garamond', serif;
    position: relative;
    padding-bottom: 20px;
}

.concerts-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.6), transparent);
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}

.concerts-table {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.concert-row {
    display: flex;
    gap: 30px;
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.9) 0%, rgba(45, 45, 45, 0.9) 100%);
    border: 1px solid rgba(212, 175, 55, 0.15);
    border-radius: 12px;
    padding: 25px 30px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.3),
        0 2px 4px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
    position: relative;
    overflow: hidden;
}

.concert-row::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, rgba(212, 175, 55, 0.3), rgba(212, 175, 55, 0.1));
    opacity: 0;
    transition: opacity 0.4s ease;
}

.concert-row:hover {
    transform: translateX(8px);
    border-color: rgba(212, 175, 55, 0.3);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.4),
        0 4px 8px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(212, 175, 55, 0.1);
}

.concert-row:hover::before {
    opacity: 1;
}

/* Style pour les concerts à venir */
.concert-row.upcoming {
    border-color: rgba(212, 175, 55, 0.4);
    background: linear-gradient(135deg, rgba(45, 40, 26, 0.9) 0%, rgba(60, 55, 40, 0.9) 100%);
}

.concert-row.upcoming::before {
    opacity: 1;
    background: linear-gradient(180deg, rgba(212, 175, 55, 0.8), rgba(212, 175, 55, 0.4));
}

.concert-row.upcoming::after {
    content: '';
    position: absolute;
    top: 15px;
    right: 20px;
    width: 10px;
    height: 10px;
    background: rgba(212, 175, 55, 0.8);
    border-radius: 50%;
    animation: pulse-gold 2s ease-in-out infinite;
}

@keyframes pulse-gold {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.4);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(212, 175, 55, 0);
    }
}

/* Style pour les concerts mis en avant (Ballet) */
.concert-row.featured {
    border-color: rgba(212, 175, 55, 0.25);
    padding: 30px;
}

.concert-row.featured .concert-info {
    border-left: 2px solid rgba(212, 175, 55, 0.2);
    padding-left: 25px;
}

/* Colonne Date */
.concert-date {
    min-width: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-right: 20px;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.date-day {
    font-size: 2rem;
    font-weight: 300;
    color: #fff;
    font-family: 'Cormorant Garamond', serif;
    line-height: 1;
    margin-bottom: 5px;
}

.date-month {
    font-size: 0.9rem;
    color: rgba(212, 175, 55, 0.8);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Colonne Info */
.concert-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.concert-location {
    font-size: 1.2rem;
    font-weight: 500;
    color: #fff;
    font-family: 'Cormorant Garamond', serif;
    letter-spacing: 0.5px;
}

.concert-description {
    font-size: 0.95rem;
    color: #aaa;
    line-height: 1.6;
    margin: 0;
}

.concert-dates-detail {
    font-size: 0.85rem;
    color: rgba(212, 175, 55, 0.7);
    font-style: italic;
    margin: 5px 0 0 0;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Responsive */
@media (max-width: 768px) {
    .concerts-section {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        width: 90%;
        padding: 40px 15px;
        margin: -25vh auto 40px auto;
    }

    .concerts-title {
        font-size: 1.8rem;
    }

    .concert-row {
        flex-direction: column;
        gap: 15px;
        padding: 20px;
    }

    .concert-date {
        flex-direction: row;
        justify-content: flex-start;
        gap: 10px;
        min-width: auto;
        padding-right: 0;
        padding-bottom: 15px;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .date-day {
        font-size: 1.5rem;
    }

    .date-month {
        font-size: 0.85rem;
    }

    .concert-row.featured .concert-info {
        border-left: none;
        padding-left: 0;
        border-top: 2px solid rgba(212, 175, 55, 0.2);
        padding-top: 15px;
    }

    .concert-row.upcoming::after {
        top: 10px;
        right: 15px;
    }
}

@media (max-width: 480px) {
    .concert-location {
        font-size: 1.1rem;
    }

    .concert-description {
        font-size: 0.9rem;
    }
}