/* Reset et Bases */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: 'Poppins', sans-serif;
    background-color: #0a0a0a;
    color: #ffffff;
    line-height: 1.6;
}
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: center; /* On centre le contenu */
    padding: 20px 0;
}
/* On force le logo et les liens à rester dans une zone précise */
.nav-container {
    width: 95%;            /* Utilise presque toute la largeur */
    max-width: 1600px;     /* Augmente cette valeur pour les écarter plus */
    display: flex;
    justify-content: space-between; 
    align-items: center;
    margin: 0 auto;        /* Garde le bloc centré */
}
.logo {
    font-family: 'Playfair Display', serif;
    font-size: 30px;
    letter-spacing: 2px;
}
.logo span { color: #ffffff; /* Couleur Or pour le côté Velvet */ }
.nav-links { display: flex; list-style: none; }
.nav-links li a {
    color: white;
    text-decoration: none;
    margin-left: 25px;
    font-size: 18px;
    text-transform: uppercase;
    transition: 0.3s;
}
.nav-links li a:hover { color: #d4af37; }

/* Hero Section */
.hero {
    height: 100vh;
    background: #000000; /* Ça met le fond en noir pur */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.hero-content h4 { color: #d4af37; letter-spacing: 4px; margin-bottom: 10px; }
.hero-content h1 { font-family: 'Playfair Display', serif; font-size: 60px; margin-bottom: 20px; }
.btn {
    display: inline-block;
    padding: 12px 30px;
    background: #d4af37;
    color: black;
    text-decoration: none;
    font-weight: bold;
    margin-top: 20px;
    border-radius: 2px;
}

/* Agenda Section */
.agenda-section { padding: 80px 10%; }
.section-title { text-align: center; margin-bottom: 50px; letter-spacing: 3px; }

.event-row {
    display: flex;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #333;
    transition: background 0.3s;
}
.event-row:hover { background: #1a1a1a; }
.event-date { font-size: 24px; font-weight: bold; width: 100px; color: #d4af37; }
.event-name { flex-grow: 1; font-size: 18px; text-transform: uppercase; }
.event-name span { display: block; font-size: 12px; color: #888; }
.event-plus { font-size: 24px; color: #d4af37; }
.about-section {
    padding: 60px 10%;
    background-color: #111; /* Un gris très foncé pour séparer les sections */
    text-align: center;
}
.about-text h2 {
    color: #d4af37;
    margin-bottom: 20px;
}
.about-text p {
    color: #ccc;
    max-width: 800px;
    margin: 0 auto;
}
.description-bar {
    background-color: #000000; /* Fond noir pur comme le So Rouen */
    color: #ffffff;
    padding: 40px 10%;
    text-align: left;
    border-bottom: 1px solid #333; /* Une ligne très discrète pour séparer */
}

.description-bar strong {
    color: #d4af37; /* Le nom du club en Or */
    text-transform: uppercase;
}

.description-text {
    color: #999; /* Gris plus clair pour le texte de description */
    font-size: 14px;
    line-height: 1.6;
    margin-top: 15px;
    max-width: 900px;
}
.img-slider {
    max-height: 80vh; /* L'affiche prendra 80% de la hauteur de l'écran */
    width: auto;
    display: block;
    margin: 0 auto;
}
.slider {
    margin-top: 50px; /* Ajoute de l'espace au-dessus de l'affiche */
}
.img-slider {
    border-radius: 10px; /* Arrondit les coins */
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.1); /* Lueur légère autour */
    max-height: 75vh; /* Ajuste la taille pour ne pas déborder */
}
.slide {
    position: absolute; /* Superpose les images les unes sur les autres */
    opacity: 0;         /* Cache toutes les images par défaut */
    transition: opacity 1s ease-in-out;
}

.slide.active {
    opacity: 1;         /* Affiche uniquement celle qui a la classe 'active' */
}
/* 1. On centre tout dans le header */
.hero-content {
    width: 100%;
    display: flex;
    justify-content: center; /* Centre horizontalement */
    align-items: center;     /* Centre verticalement */
    height: 100vh;
}

/* 2. On prépare le conteneur du slider */
.slider {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 3. On s'assure que l'image est bien au milieu de sa boîte */
.img-slider {
    max-height: 80vh; 
    width: auto;
    display: block;
    margin: 0 auto; /* Force le centrage si besoin */
    border-radius: 10px;
    box-shadow: 0 0 50px rgba(0,0,0,0.8);
}/* --- Correction du Header pour qu'il soit visible --- */
.navbar {
    position: fixed; /* Reste en haut même quand on descend la page */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;   /* Passe au-dessus de tout le reste */
    background: rgba(0, 0, 0, 0.9); /* Fond noir semi-transparent */
    padding: 20px 0;
}

/* --- Section Présentation --- */
.presentation-detail {
    background-color: #000;
    color: #fff;
    padding-top: 80px;
    width: 100%;
}

.container-colonnes {
    display: flex;
    justify-content: center;
    gap: 60px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 5% 60px 5%;
}

.colonne { flex: 1; }

.colonne h3 {
    color: #d4af37; /* Doré */
    margin-bottom: 20px;
    font-size: 22px;
}
.event-plus-link {
    text-decoration: none; /* Enlève le soulignement */
    display: inline-block;
}

.event-plus:hover {
    transform: scale(1.1); /* Petit effet de zoom au survol pour montrer que c'est cliquable */
    transition: 0.2s;
    cursor: pointer;
}
/* --- Bandeau Image --- */
.bandeau-container {
    width: 100%;
    height: 350px; /* Hauteur bandeau */
    overflow: hidden;
}

.bandeau-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- Pied de page (Footer) --- */
.site-footer {
    background-color: #080808;
    color: #888;
    padding: 60px 0 20px 0;
    border-top: 1px solid #1a1a1a;
}

.footer-grid {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
}

.footer-info p, .footer-social a {
    margin-bottom: 10px;
    text-decoration: none;
    color: #888;
    display: block;
}

.footer-copy {
    width: 100%;
    text-align: center;
    margin-top: 40px;
    font-size: 12px;
    border-top: 1px solid #111;
    padding-top: 20px;
}
/* Style spécifique pour la page Agenda */
.page-agenda {
    background-color: #0c0c0c;
    color: #ffffff;
}

.agenda-main {
    padding-top: 120px; /* Pour pas que le menu cache le titre */
    max-width: 1000px;
    margin: 0 auto;
    padding-bottom: 100px;
}

.agenda-header h1 {
    text-align: center;
    font-family: 'Playfair Display', serif;
    font-size: 40px;
    letter-spacing: 5px;
    margin-bottom: 60px;
}

.event-container {
    border-top: 1px solid #333;
}

.event-row {
    display: flex;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid #333; /* La ligne fine entre chaque soirée */
    transition: background 0.3s;
}

.event-row:hover {
    background: #151515; /* Effet de survol discret */
}

.event-date {
    font-size: 24px;
    font-weight: 700;
    width: 100px;
}

.event-img img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    margin-right: 30px;
}

.event-details {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.event-title {
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
}

.event-subtitle {
    color: #888;
    font-size: 12px;
}

.event-extra {
    color: #888;
    font-size: 14px;
    font-style: italic;
    margin-top: 5px;
}

.event-plus {
    font-size: 24px;
    color: #ffffff;
    background: #ff4444; /* Le carré rouge du bouton + */
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
/* --- Nouvelle Grille d'événements --- */
.event-grid-container {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    width: 95% !important;
    max-width: 1400px !important;
    margin: 60px auto !important;
}
.event-grid-item {
    width: 100% !important; /* L'affiche s'adapte à la colonne */
    background: #080808 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    border: 1px solid #1a1a1a !important;
}

.event-grid-item:hover {
    transform: translateY(-5px); /* Petit effet de survol */
}

.event-grid-img {
    width: 100%;
    position: relative;
    padding-top: 140%; /* Force un format d'affiche portrait */
}

.event-grid-img img {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.event-grid-info {
    padding: 20px;
    display: flex;
    align-items: center;
    border-top: 2px solid #ff0000; /* Ligne rouge distinctive */
}

.event-grid-date-box {
    text-align: center;
    border-right: 1px solid #333;
    padding-right: 15px;
    margin-right: 15px;
}

.event-grid-date-box .day {
    display: block;
    font-size: 30px;
    font-weight: 700;
    color: #ff0000; /* Rouge vif pour le jour */
}

.event-grid-date-box .month-year {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    color: #888;
}

.event-grid-details { flex: 1; }

.event-title {
    font-size: 16px;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.event-time {
    font-size: 13px;
    color: #bbb;
}

.contact-section {
    background-color: #000;
    min-height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 100px 20px;
}

.contact-container {
    width: 100%;
    max-width: 600px;
    text-align: center;
}

.contact-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 50px;
    letter-spacing: 10px;
    color: #fff;
    margin-bottom: 50px;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group input, .form-group textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 2px solid #fff; /* Barre blanche comme ton modèle */
    padding: 15px 0;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    outline: none;
}

.btn-send {
    margin-top: 30px;
    background-color: #fff;
    color: #000;
    border: none;
    padding: 15px;
    font-weight: 900;
    letter-spacing: 3px;
    cursor: pointer;
    transition: 0.3s;
}

.btn-send:hover {
    background-color: #ccc;
}
/* Organisation des lignes doubles */
.form-row {
    display: flex;
    gap: 30px; /* Espace entre les deux champs */
}

.flex-1 { flex: 1; }
.flex-2 { flex: 2; } /* L'objet du mail prend plus de place que l'heure */

/* Mobile : on remet les champs l'un sous l'autre pour que ça reste lisible */
@media (max-width: 600px) {
    .form-row {
        flex-direction: column;
        gap: 0;
    }
}

/* Style spécial pour l'icône de l'heure en blanc */
input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
}
/* Style du bandeau photo */
.contact-hero {
    width: 100%;
    height: 350px; /* Hauteur du bandeau */
    overflow: hidden;
}

.contact-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Container principal en 2 colonnes */
.contact-main {
    background-color: #000;
    padding: 80px 10%;
}

.contact-wrapper {
    display: flex;
    gap: 80px; /* Espace entre les infos et le formulaire */
    align-items: flex-start;
}

/* Carré d'infos à gauche */
.contact-info-box {
    flex: 1;
    background-color: transparent;
    border: 1px solid #333; /* Contour discret */
    padding: 40px;
    color: #fff;
}

.contact-info-box h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 24px;
    letter-spacing: 5px;
    margin-bottom: 40px;
    border-bottom: 2px solid #fff;
    padding-bottom: 10px;
}

.info-item {
    margin-bottom: 30px;
}

.info-item h3 {
    font-size: 12px;
    letter-spacing: 2px;
    color: #888;
    margin-bottom: 5px;
}

.info-item p {
    font-size: 15px;
    line-height: 1.6;
}

/* Section Formulaire à droite */
.contact-form-container {
    flex: 2; /* Prend plus de place que le bloc infos */
}

/* Responsive pour mobile */
@media (max-width: 900px) {
    .contact-wrapper {
        flex-direction: column;
    }
}
.contact-map {
    width: 100%;
    line-height: 0; /* Supprime l'espace vide sous la carte */
    margin-top: 50px;
}

.contact-map iframe {
    width: 100%;
    filter: grayscale(1) invert(1); /* Optionnel : met la carte en noir et blanc pour aller avec le style Velvet */
    border: none;
}
/* --- ADAPTATION MOBILE (Écrans de moins de 768px) --- */
@media (max-width: 768px) {
    
    /* 1. La navigation : on empile les liens */
    .nav-links {
        gap: 10px;
    }
    .nav-links a {
        font-size: 11px; /* Plus petit pour que ça tienne */
    }

    /* 2. Les sections en colonnes (Tarifs, Infos) */
    .info-row, .price-row, .contact-wrapper, .feature-container {
        flex-direction: column; /* On empile au lieu d'aligner */
        gap: 40px;
        padding: 20px;
    }

    /* 3. Les titres énormes : on réduit la taille */
    .hero-content h1, .contact-title, .feature-text h2 {
        font-size: 30px !important; /* Moins gros pour pas que ça dépasse */
        letter-spacing: 4px;
    }

    /* 4. Les images : elles prennent toute la largeur */
    .feature-image, .contact-info-box {
        width: 100%;
    }
}
/* --- ADAPTATION POUR MOBILE (Téléphones et Tablettes) --- */
@media screen and (max-width: 768px) {
    
    /* 1. On empile les éléments au lieu de les mettre côte à côte */
    .nav-container, .price-row, .info-row, .contact-wrapper, .feature-container {
        flex-direction: column !important;
        text-align: center;
        gap: 30px;
    }

    /* 2. On réduit la taille des titres pour qu'ils ne sortent pas de l'écran */
    h1, .hero-content h1, .contact-title {
        font-size: 32px !important;
        letter-spacing: 4px !important;
    }

    .feature-text h2 {
        font-size: 28px !important;
        letter-spacing: 3px !important;
    }

    /* 3. On ajuste les images pour qu'elles ne soient pas écrasées */
    .img-slider {
        max-height: 50vh !important; /* Réduit la hauteur de la panthère sur mobile */
        width: 100% !important;
        object-fit: contain;
    }

    .feature-image img {
        width: 100% !important;
        height: auto !important;
    }

    /* 4. On règle la barre de navigation */
    .nav-links {
        display: flex;
        flex-wrap: wrap; /* Les onglets passent à la ligne si besoin */
        justify-content: center;
        gap: 15px;
        padding: 10px 0;
    }

    .nav-links a {
        font-size: 12px;
    }

    /* 5. On ajuste le bloc d'infos (le carré à gauche) */
    .contact-info-box {
        width: 100% !important;
        padding: 20px !important;
    }
}
@media screen and (max-width: 768px) {
    /* On empile le logo et les liens */
    .nav-container {
        flex-direction: column !important;
        padding: 10px 0;
    }

    .logo {
        margin-bottom: 15px;
        font-size: 20px !important; /* Réduit un peu pour que ça tienne sur une ligne */
        text-align: center;
    }

    .nav-links {
        justify-content: center;
        flex-wrap: wrap; /* Permet aux onglets de passer à la ligne */
        gap: 10px;
    }

    .nav-links a {
        font-size: 11px;
    }
}
@media screen and (max-width: 768px) {
    /* Empilement des cartes de l'agenda */
    .event-grid, .price-row, .info-row {
        flex-direction: column !important;
        align-items: center !important;
        gap: 30px;
    }

    /* Ajustement des flyers pour qu'ils soient bien visibles */
    .event-card {
        width: 90% !important; /* Prend presque toute la largeur du téléphone */
        max-width: 320px;
    }

    /* La panthère sur l'accueil ne doit pas être déformée */
    .img-slider {
        width: 100% !important;
        height: auto !important;
        max-height: 300px !important;
        object-fit: cover;
    }
}
@media screen and (max-width: 768px) {
    .contact-wrapper {
        flex-direction: column !important;
        gap: 40px;
    }

    .contact-info-box {
        width: 100% !important;
        padding: 20px !important;
        border: 1px solid #333;
    }

    .contact-form-container {
        width: 100% !important;
    }

    /* Les lignes doubles du formulaire (Email/Tel) passent en simple */
    .form-row {
        flex-direction: column !important;
        gap: 0;
    }

    /* Titres de section */
    .contact-title, h1 {
        font-size: 28px !important;
        text-align: center;
    }
}
/* Sur ordinateur (par défaut) */
.agenda-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    padding: 50px 5%;
}

/* LA RÉPARATION POUR MOBILE */
@media screen and (max-width: 768px) {
    .agenda-grid {
        flex-direction: column !important; /* Force l'empilement vertical */
        align-items: center !important;    /* Centre les flyers */
        padding: 20px 0 !important;
    }

    .event-card {
        width: 90% !important;  /* Le flyer prend 90% de la largeur du téléphone */
        max-width: 350px;       /* Mais il ne devient pas géant non plus */
        margin-bottom: 20px;
    }

    .event-card img {
        width: 100%;            /* L'image remplit sa carte */
        height: auto;           /* Garde les proportions de ton flyer */
        border: 1px solid #333; /* Optionnel : petit contour pour détacher du fond noir */
    }
}
.agenda-section {
    padding-top: 120px !important; /* Pousse le contenu vers le bas pour ne pas être sous le menu */
    background-color: #000;
}
/* --- STYLE GÉNÉRAL AGENDA --- */
.event-grid-container {
    display: flex;
    flex-wrap: wrap; /* Permet de passer à la ligne sur PC */
    justify-content: center;
    gap: 30px;
    padding: 40px 5%;
}

.event-grid-item {
    width: 350px; /* Largeur fixe sur PC */
    background: #111;
    border: 1px solid #333;
    transition: 0.3s;
}

.event-grid-img img {
    width: 100%;
    height: auto;
    display: block;
}
/* ============================================================
   DESIGN CLUB1 - EFFET PARALLAXE
   ============================================================ */

.page-club1 {
    background-color: #000;
}

/* L'image de fond qui reste fixe au scroll */
.club-hero-section {
    height: 100vh;
    width: 100%;
    background-image: url('image/imd.008.jpg.jpeg'); /* Ton image principale */
    background-attachment: fixed; /* L'EFFET MAGIQUE EST ICI */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.hero-overlay {
    text-align: center;
    background: rgba(0, 0, 0, 0.4); /* Voile sombre */
    padding: 40px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.club-hero-section .subtitle {
    color: #d4af37;
    letter-spacing: 8px;
    font-size: 14px;
    margin-bottom: 10px;
}

.club-hero-section .main-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(40px, 20vw, 120px); /* S'adapte à l'écran */
    letter-spacing: 15px;
    text-transform: uppercase;
    font-weight: 700;
}

/* Section de texte blanc sur fond noir */
.club-content-section {
    padding: 50px 10%;
    background-color: #000;
    text-align: center;
    position: relative;
    z-index: 2;
}

.text-block h2 {
    font-size: 32px;
    letter-spacing: 5px;
    margin-bottom: 30px;
    color: #fff;
	margin-top: 80px;
}

.text-block p {
    max-width: 800px;
    margin: 0 auto;
    color: #888;
    line-height: 2;
    font-size: 16px;
}

/* Séparateur Parallaxe entre les textes */
.parallax-divider {
    height: 60vh;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-image: url('image/imd.008.jpg'); /* Deuxième image de fond */
}
s
/* Grille de caractéristiques */
.club-features-grid {
    display: flex;
    background: #000;
    padding: 100px 5%;
    gap: 40px;
}

.feature-box {
    flex: 1;
    padding: 50px;
    border: 1px solid #1a1a1a;
    text-align: center;
    transition: 0.4s;
}

.feature-box:hover {
    border-color: #d4af37;
    background: #050505;
}

.title-label {
    background: #fff;
    color: #000;
    display: inline-block;
    padding: 5px 15px;
    font-size: 10px;
    font-weight: 900;
    margin-bottom: 25px;
}

.feature-box h3 {
    font-size: 20px;
    letter-spacing: 3px;
    margin-bottom: 20px;
}

.feature-box p {
    color: #666;
    font-size: 14px;
}

/* Adaptation Mobile */
@media (max-width: 768px) {
    .club-hero-section {
        background-attachment: scroll; /* Le parallaxe est souvent désactivé sur mobile pour la fluidité */
    }
    .club-features-grid {
        flex-direction: column;
    }
    .club-hero-section .main-title {
        font-size: 40px;
        letter-spacing: 5px;
    }
}
/* --- Style Spécifique Présentation Haut de Page --- */
.presentation-top {
    background: transparent !important; /* Rend le fond invisible */
    margin-top: 90px;
}

.presentation-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center; /* Aligne le texte et l'image au milieu */
    gap: 60px; /* Espace entre texte et image */
}

.presentation-text {
    flex: 1;
}

.presentation-text h3 {
    color: #d4af37; /* Couleur dorée */
    font-family: 'Playfair Display', serif;
    font-size: 28px;
    letter-spacing: 4px;
    margin-bottom: 20px;
}

.presentation-text p {
    color: #bbb;
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 20px;
    text-align: justify;
}
.presentation-image {
    flex: 1;
}

.presentation-image img {
    width: 100%;
    height: auto;
    border-radius: 20px;
    border: 1px solid #1a1a1a;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* Responsive : on empile sur mobile */
@media (max-width: 900px) {
    .presentation-container {
        flex-direction: column;
        text-align: center;
    }
    .presentation-top {
        padding-top: 100px;
    }
}
.tarifs-section {
    padding: 80px 10%;
    background-color: #000;
    color: #fff;
	margin-bottom: 100px;
}

.tarifs-intro {
    max-width: 1100px;
    margin: 0 auto 60px auto;
    font-size: 14px;
    color: #bbb;
    line-height: 1.6;
}

.tarifs-intro span { color: #fff; font-weight: bold; border-bottom: 1px solid #d4af37; }

.tarifs-grid {
    display: flex;
    flex-wrap: wrap;       /* Permet de passer à la ligne si pas assez de place */
    justify-content: center; /* Centre les cartes sur la ligne */
    gap: 30px;            /* Espace entre les cartes */
    padding: 20px;
}

/* La carte individuelle */
.tarif-card {
    background: #000;      /* Fond noir comme sur l'image */
    flex: 0 1 350px;       /* Largeur fixe de 350px pour ne pas être condensé */
    display: flex;
    flex-direction: column; /* Aligne le contenu verticalement */
    justify-content: space-between; /* Pousse le prix tout en bas */
    padding: 20px;
    border: 1px solid #333; /* Optionnel : une petite bordure pour voir les limites */
    min-height: 550px;     /* FORCE toutes les cartes à avoir la même hauteur minimum */
}

/* Étiquettes blanches */
.label-white {
    background-color: #fff;
    color: #000;
    text-align: center;
    padding: 8px;
    font-weight: 900;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 30px;
}

.tarif-card h3 {
    text-align: center;
    font-size: 22px;
    letter-spacing: 2px;
    margin-bottom: 20px;
    font-weight: 800;
}

.tarif-card .desc {
    font-size: 13px;
    color: #999;
    line-height: 1.8;
    margin-bottom: 30px;
    text-align: justify;
}

.tarif-card .tenue {
    font-size: 12px;
    color: #666;
    margin-bottom: 40px;
}

/* Bloc prix en bas */
.price-box {
    margin-top: auto; /* Pousse le bloc vers le bas */
}

.price-box .detail {
    font-size: 13px;
    margin-bottom: 10px;
}

.price-box .detail span { color: #ff3333; font-weight: bold; } /* Couleur rouge pour "club" ou "buffet" */

.price-box .price {
    font-size: 32px;
    font-weight: 900;
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.price-box .price small {
    font-size: 10px;
    color: #777;
    font-style: italic;
    font-weight: 400;
}

/* Responsive pour tablettes et mobiles */
@media (max-width: 900px) {
    .tarifs-grid {
        flex-direction: column;
        gap: 60px;
    }
}

/* ==========================================
   SECTION EN-TÊTE ET GRILLE "HALL OF FAME"
   ========================================== */

/* Style du titre et de la description */
/* ==========================================
   CORRECTION DE LA BANNIÈRE "HALL OF FAME"
   ========================================== */

/* ==========================================
   BANNIÈRE "HALL OF FAME" AVEC IMAGE DE FOND
   ========================================== */

.photo-hero {
    /* Le dégradé linéaire crée le voile noir transparent pour garder le texte lisible */
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.7)), 
                url("image/imd.003.png"); /* <-- Mets ici le nom de ton image de fond */
    
    background-size: cover;          /* L'image prend tout l'espace sans se déformer */
    background-position: center;     /* L'image reste centrée */
    background-repeat: no-repeat;
    
    width: 100%;
    min-height: 450px;               /* Donne de la hauteur pour bien voir la photo */
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 120px 20px 60px 20px;
}

/* Ce conteneur force tout le monde à s'aligner l'un sous l'autre et au centre */
.hero-inner-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 800px;
    width: 100%;
}

.hero-subtitle {
    font-size: 11px;
    letter-spacing: 5px;
    color: #ffffff;                  /* Passé en blanc pour ressortir sur la photo */
    opacity: 0.8;
    margin: 0 0 15px 0;
    text-transform: uppercase;
    font-family: 'Poppins', sans-serif;
}

.hero-title {
    font-size: 5rem;                 /* Légèrement agrandi pour le style */
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 20px 0;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-family: 'Poppins', sans-serif;
    line-height: 1.1;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5); /* Ombre portée sous le titre */
}

.hero-description {
    font-size: 16px;
    color: #e0e0e0;                  /* Éclairci pour une meilleure lecture */
    max-width: 600px;
    margin: 0 auto;
    font-weight: 300;
    line-height: 1.6;
    font-family: 'Poppins', sans-serif;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}
.masonry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    grid-auto-rows: 180px; /* Unité de base pour calculer les hauteurs alternées */
    gap: 28px;
    max-width: 1300px;
    margin: 0 auto;
}

/* Comportement des hauteurs des cases pour l'effet asymétrique */
.masonry-item.item-vertical {
    grid-row: span 3; /* Case haute */
}

.masonry-item.item-medium {
    grid-row: span 2; /* Case carrée / moyenne */
}

.masonry-item.item-horizontal {
    grid-row: span 2; /* Case large (si l'écran le permet) */
}

/* Design des boîtes d'images */
.masonry-item {
    position: relative;
    border-radius: 28px; /* Les gros bords arrondis comme sur ta capture */
    overflow: hidden;
    background-color: #121212;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.masonry-item a {
    display: block;
    width: 100%;
    height: 100%;
}

.masonry-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* L'image s'adapte sans se déformer */
    display: block;
    transition: transform 0.5s ease;
}

/* Voile noir dégradé et texte au survol (Overlay) */
.item-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0) 100%);
    display: flex;
    align-items: flex-end;
    padding: 30px;
    opacity: 0; /* Caché par défaut */
    transition: opacity 0.3s ease;
}

.overlay-text h3 {
    color: #ffffff;
    font-size: 20px;
    margin: 0 0 5px 0;
    text-transform: uppercase;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
}

.overlay-text p {
    color: #ff0000; /* Rappel de la couleur accent rouge de ton site */
    font-size: 13px;
    margin: 0;
    font-weight: 600;
    letter-spacing: 1px;
}

/* --- ANIMATIONS LORSQU'ON PASSE LA SOURIS --- */
.masonry-item:hover {
    transform: translateY(-8px); /* La case s'élève gracieusement */
}

.masonry-item:hover img {
    transform: scale(1.06); /* Léger zoom sur l'image de fond */
}

.masonry-item:hover .item-overlay {
    opacity: 1; /* Révèle les informations de la soirée */
}
/* ==========================================================================
   STRUCTURE DU MENU PLEIN ÉCRAN (OVERLAY)
   ========================================================================== */

/* Design du bouton MENU en haut à droite */
.menu-trigger {
    color: #ffffff;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: opacity 0.3s ease;
}
.menu-trigger:hover {
    opacity: 0.7;
}

/* Le rideau noir qui prend tout l'écran */
.fullscreen-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #000000;
    z-index: 9999; /* Pour passer au-dessus de l'affiche et de tout le reste */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none; /* Rend le menu invisible et incliquable au départ */
    transition: opacity 0.4s ease;
}

/* Classe magique déclenchée par le JavaScript pour afficher le menu */
.fullscreen-menu.active {
    opacity: 1;
    pointer-events: auto;
}

/* Design du bouton FERMER */
.close-menu {
    position: absolute;
    top: 30px;
    right: 40px;
    color: #ffffff;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Alignement vertical des liens de navigation */
.fullscreen-nav-links {
    list-style: none;
    text-align: center;
    padding: 0;
}
.fullscreen-nav-links li {
    margin: 25px 0;
}
.fullscreen-nav-links a {
    color: #ffffff;
    text-decoration: none;
    font-family: 'Playfair Display', serif;
    font-size: 40px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    
    /* Les 3 lignes magiques ajoutées pour l'effet : */
    display: inline-block;
    transform-origin: bottom;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), color 0.3s ease;
}

.fullscreen-nav-links a:hover {
    color: #d4af37; /* Couleur dorée au survol */
    transform: scaleY(1.18); /* Étire les lettres de 18% vers le haut */
}
/* --- BANNIÈRE ZOOM SCROLL --- */
.scroll-hero-container {
    position: relative;
    width: 100%;
    height: 100vh; /* Prend tout l'écran au départ */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
}

/* L'image de fond stylisée (comme sur le modèle) */
.scroll-hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    filter: brightness(0.65); /* Assombrit un peu l'image pour faire ressortir le texte */
    z-index: 1;
}

/* Le gros titre AGENDA */
.scroll-hero-title {
    position: fixed; /* Reste fixé au milieu pendant le début du scroll */
    z-index: 2;
    color: #ffffff;
    font-family: 'Playfair Display', serif;
    font-size: 11vw; /* Écrit ultra grand au départ (basé sur la largeur de l'écran) */
    font-weight: 900;
    letter-spacing: 5px;
    text-transform: uppercase;
    text-align: center;
    pointer-events: none;
    will-change: transform, opacity;
    transition: transform 0.1s ease-out, opacity 0.1s ease-out; /* Fluidité maximale */
}

/* Le contenu qui remonte par-dessus */
.agenda-content-wrapper {
    position: relative;
    z-index: 3; /* Passe par-dessus le titre fixé */
    background-color: #000000; /* Fond noir opaque pour masquer la bannière quand on descend */
    padding: 80px 20px;
    box-shadow: 0px -20px 40px rgba(0, 0, 0, 0.8); /* Ombre douce pour l'effet de superposition */
}
/* ==========================================================================
   DESIGN AGENDA (ZOOM HERO SCROLL & DÉFILEMENT LATÉRAL)
   ========================================================================== */

/* --- BANDES LATÉRALES POSÉES SUR LA PAGE (PROPRE ET SUR UNE SEULE LIGNE) --- */
.side-banner {
    position: absolute; 
    top: 0;
    bottom: 0;
    height: 100%;       
    width: 150px;       /* Bande bien large au milieu des zones noires */
    z-index: 1;         
    overflow: hidden;
    display: flex;
    justify-content: center;
    
    /* Fondu progressif en haut et en bas */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
}

.side-banner-left { 
    left: 2vw; 
}
.side-banner-right { 
    right: 2vw; 
}

/* Texte vertical natif */
.side-banner-text {
    font-family: 'Poppins', sans-serif;
    font-size: 28px;             
    font-weight: 900;             
    color: #ffffff;               /* Écriture blanche */
    letter-spacing: 8px;          
    text-transform: uppercase;
    
    position: sticky;
    top: 15vh;                   
    height: 70vh;                
    width: 150px;
    
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Le défilement horizontal classique (il n'y a qu'une seule ligne) */
.marquee-inner {
    display: flex;
    flex-direction: row;        /* Les textes se suivent naturellement de gauche à droite */
    flex-shrink: 0;
    white-space: nowrap;
    
    /* On applique la rotation ICI pour basculer le défilement horizontal à la verticale */
    transform: rotate(-90deg);
    
    animation: sideMarqueeHorizontal 20s linear infinite; 
}

/* Style de chaque morceau de texte */
.marquee-inner span {
    display: inline-block;
    padding-right: 150px;       /* L'espace cul-à-cul parfait entre chaque phrase */
    white-space: nowrap;
}

/* L'animation de défilement horizontal (qui devient verticale grâce à la rotation) */
@keyframes sideMarqueeHorizontal {
    0% {
        transform: rotate(-90deg) translate3d(0, 0, 0);
    }
    100% {
        transform: rotate(-90deg) translate3d(-50%, 0, 0); /* Défilement parfait sans fin */
    }
}

/* Désactivation sur tablette et mobile */
@media (max-width: 1300px) {
    .side-banner {
        display: none;
    }
}
/* --- GRANDE PHOTO AU MILIEU DE L'ONGLET CLUB --- */
.club-photo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 1200px;      /* Largeur max pour que l'image ne devienne pas gigantesque */
    margin: 60px auto;      /* Espace de 60px en haut et en bas, centré horizontalement */
    padding: 0 20px;        /* Évite que la photo ne colle aux bords de l'écran sur mobile */
    box-sizing: border-box;
}

.club-mid-photo {
    width: 100%;
    height: auto;
    max-height: 600px;      /* Limite la hauteur de l'image pour garder un joli ratio */
    object-fit: cover;      /* Recadre proprement l'image si besoin */
    border-radius: 12px;    /* Légèrement arrondie sur les angles (très moderne) */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Fine bordure grise subtile */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8); /* Grosse ombre portée noire pour donner du relief */
    transition: transform 0.3s ease, border-color 0.3s ease;
}

/* Petit effet au survol */
.club-mid-photo:hover {
    transform: scale(1.01); /* Très léger zoom de 1% */
    border-color: rgba(255, 255, 255, 0.3); /* La bordure s'illumine légèrement */
}
/* --- SECTION HAUT DE PAGE PHOTO (HALL OF FAME) --- */
.photo-hero { /* Remplace par ta classe réelle, ex: .hero-section */
    height: 55vh;            /* Augmente la hauteur (55% de la hauteur de l'écran) */
    min-height: 400px;       /* Garantit une taille minimale pour l'effet paysage */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-size: cover;  /* L'image prend tout l'espace sans déformation */
    background-position: center center;
    margin-bottom: 80px;     /* CRÉE L'ESPACE NOIR : 80px entre le haut et la galerie */
}

/* Optionnel : Si tu veux donner un effet encore plus cinématographique */
.photo-hero h1 {
    font-size: 4rem;         /* Augmente la taille du titre */
    margin-bottom: 1rem;
}
/* ==========================================================================
   OPTIMISATION DESIGN - ONGLET PHOTO (HALL OF FAME)
   ========================================================================== */

/* --- BANNIÈRE DU HAUT (HERO PHOTO) --- */
.photo-hero {
    height: 60vh;                /* Occupe 60% de la hauteur de l'écran */
    min-height: 450px;           
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;          
    overflow: hidden;
    background-size: cover;      
    background-position: center center;
    
    /* On garde n <div class="event-row">
        <div class="event-date">30/09</div>
        <div class="event-img">
            <img src="image/imd.013.4.png" alt="Affiche" style="width:60px; height:60px; object-fit:cover; margin: 0 20px; border: 1px solid #d4af37;">
        </div>
        <div class="event-name">POINT DU JOUR - 23h - 06h <span>house &amp; techno music&nbsp;&nbsp;</span></div>
        <a href="https://shotgun.live/fr/venues/velvetrouen" target="_blank" class="event-plus-link">
            <div class="event-plus">+</div>
        </a>
    </div>otre marge en bas pour l'espace noir */
    margin-bottom: 120px;        
}

/* LES DOUBLE FONDUS ULTRA-DISCRETS (L'image reste lumineuse et éclatante) */
.photo-hero::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;                
    
    /* On resserre le noir aux extrêmes bords (seulement 8% en haut et en bas) */
    background: linear-gradient(
        to bottom, 
        #000000 0%,             /* Transition invisible sous la navbar */
        rgba(0, 0, 0, 0) 8%,    /* Devient transparent instantanément */
        rgba(0, 0, 0, 0) 92%,   /* Tout le milieu de l'image est 100% lumineux */
        #000000 100%            /* Transition invisible vers le fond noir */
    );
    
    z-index: 1;                  
    pointer-events: none;        
}

/* Textes bien lisibles au-dessus d'une photo claire */
.hero-inner-container {
    display: flex;
    flex-direction: column;
    gap: 15px;                   
    padding: 20px;
    position: relative;
    z-index: 2;                  
    
    /* Ombre portée douce sur les textes pour qu'ils ressortent parfaitement */
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.8), 0 2px 4px rgba(0, 0, 0, 0.9);
}
/* --- SÉCURITÉ : NETTOYAGE ET FORCE DE LA LUMINOSITÉ DE L'IMAGE --- */
.photo-hero {
    /* On enlève tout filtre de luminosité ou filtre de couleur noire hérité */
    filter: none !important;
    -webkit-filter: none !important;
    
    /* On s'assure qu'aucun fond noir semi-transparent n'est appliqué sur le bloc */
    background-color: transparent !important;
}

/* S'il y a un calque de superposition intermédiaire dans ton HTML, on le désactive */
.photo-hero .overlay, 
.photo-hero::before {
    display: none !important;
}
/* --- STYLE GLOBAL FOND NOIR --- */
body.page-club1 {
    background-color: #0b0b0b; /* Noir profond */
    color: #ffffff;
    margin: 0;
    font-family: 'Poppins', sans-serif;
}

/* --- SECTION PRÉSENTATION DU HAUT --- */
.presentation-top {
    padding: 60px 20px;
    text-align: center;
    background-color: #0b0b0b; /* Fond noir */
}

.presentation-container {
    max-width: 900px;
    margin: 0 auto;
}

.presentation-text-full p {
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    font-size: 1.05rem;
    color: #cccccc; /* Texte gris clair lisible sur fond noir */
    line-height: 1.8;
    margin-bottom: 20px;
}

.presentation-text-full p strong {
    color: #ffffff; /* Texte en gras en blanc pur */
}

/* --- SECTION CONCEPTS GRID --- */
.concepts-grid-section {
    padding: 20px 20px 80px 20px;
    background-color: #0b0b0b; /* Fond noir pour garder l'harmonie */
}

.concepts-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* Lignes de disposition */
.concepts-row-top {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

.concepts-row-bottom {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

/* Style des cartes */
.concept-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6); /* Ombre plus marquée sur fond noir */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Discret contour lumineux élégant */
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.concept-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.3);
}

.large-card {
    height: 380px;
}

.small-card {
    height: 300px;
}

.concept-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Texte par-dessus les images */
.concept-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.2) 60%, transparent 100%);
    display: flex;
    align-items: flex-end;
    padding: 25px;
}

.concept-overlay h3 {
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 1.5rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

/* Responsive pour tablettes et mobiles */
@media (max-width: 900px) {
    .concepts-row-top, 
    .concepts-row-bottom {
        grid-template-columns: 1fr;
    }
    .large-card, .small-card {
        height: 250px;
    }
}
/* --- SECTIONS DÉTAILLÉES DES CONCEPTS (FOND NOIR) --- */
.concept-detail-section {
    padding: 80px 20px;
    background-color: #0b0b0b;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05); /* Séparateur discret entre chaque section */
}

.concept-detail-container {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

/* Grand Titre du Concept (ex: AFTERWORK) */
.concept-detail-container .concept-title {
    font-family: 'Playfair Display', serif; /* Ou 'Poppins' selon tes préférences, style épuré géant */
    font-size: 3rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 2px;
    margin-bottom: 40px;
    text-transform: uppercase;
}

/* Blocs de texte descriptif */
.concept-text-block p {
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    font-size: 1.05rem;
    color: #cccccc;
    line-height: 1.8;
    margin-bottom: 20px;
    text-align: left; /* Aligné à gauche comme sur ton modèle, ou 'center' si tu préfères */
}

.concept-text-block p strong {
    color: #ffffff;
    font-weight: 600;
}

/* Listes à puces (ex: "Cet afterwork attire chaque semaine...") */
.concept-text-block .list-title {
    font-weight: 600;
    color: #ffffff;
    margin-top: 30px;
    margin-bottom: 10px;
}

.concept-list {
    list-style-type: disc;
    text-align: left;
    max-width: 700px;
    margin: 0 auto 30px auto;
    color: #cccccc;
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    line-height: 1.6;
}

.concept-list li {
    margin-bottom: 8px;
}

/* Image du milieu */
.concept-image-wrapper {
    width: 100%;
    height: 450px;
    border-radius: 16px;
    overflow: hidden;
    margin: 40px 0;
    box-shadow: 0 15px 30px rgba(0,0,0,0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.concept-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Texte de fin de section (horaires, citations) */
.concept-footer-text {
    text-align: left;
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    color: #cccccc;
    line-height: 1.8;
    margin-top: 30px;
}

.concept-footer-text p {
    margin-bottom: 10px;
}

.concept-footer-text strong {
    color: #ffffff;
}

.highlight-quote {
    margin-top: 25px;
    font-size: 1.1rem;
    color: #ffffff;
    border-left: 3px solid #ffffff;
    padding-left: 15px;
}

/* Responsive design mobiles */
@media (max-width: 768px) {
    .concept-detail-container .concept-title {
        font-size: 2.2rem;
    }
    .concept-image-wrapper {
        height: 250px;
    }
    .concept-text-block p {
        text-align: left;
    }
}