/* ============================================================
 * DETAIL AGENDA V3 - CSS PREMIUM INTERNE (CHARTE PÉPITES)
 * Fichier : /assets/css/agenda-new/detail-interne-v3.css
 * ============================================================ */

/* --- IMPORT VARIABLES V3 --- */
:root {
    --v3-accent: #FF6233;
    --v3-accent-hover: #e5532a;
    --v3-gold: #D4AF37;

    --v3-bg: #ffffff;
    --v3-surface: #f9f9fb;
    --v3-card-bg: #ffffff;

    --v3-text: #1a1a1a;
    --v3-muted: #666666;
    --v3-border: #e0e0e0;

    --font-head: 'Montserrat', sans-serif;
    --font-body: 'Lora', serif;
}

*, *::before, *::after { box-sizing: border-box; }

/* DARK MODE (Vrai noir/gris neutre, ZERO BLEU) */
html[data-theme="dark"] body.v3-mode,
html[data-theme="dark"] .v3-mode {
    --v3-bg: #111111;
    --v3-surface: #1a1a1a;
    --v3-card-bg: #1a1a1a;
    --v3-text: #e0e0e0;
    --v3-muted: #999999;
    --v3-border: #333333;
}

/* --- LAYOUT DE BASE --- */
.v3-d-layout {
    width: 100%;
    overflow-x: hidden;
    background: var(--v3-bg);
    color: var(--v3-text);
    padding-bottom: 80px;
}

/* --- HERO (Retour à l'original bien lisible) --- */
.v3-d-hero {
    position: relative;
    height: 60vh;
    min-height: 500px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    margin-bottom: -80px;
    z-index: 1;
    width: 100%;
}
.v3-d-hero-bg {
    position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 1; transform: scale(1.05);
}
/* Dégradé bien contrasté pour lire le texte ! */
.v3-d-hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(17, 17, 17, 0.95) 100%);
    z-index: 2;
}
html[data-theme="dark"] .v3-d-hero-overlay {
    background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, #111111 100%);
}

.v3-d-hero-content {
    position: relative; z-index: 10; width: 100%; max-width: 1200px; padding: 0 20px 120px; text-align: center;
}

/* Breadcrumb & Badges */
.v3-breadcrumb { margin-bottom: 25px; font-family: var(--font-head); font-size: 0.85rem; color: rgba(255,255,255,0.7); text-transform: uppercase; letter-spacing: 1px; font-weight: 600;}
.v3-breadcrumb ol { list-style: none; padding: 0; margin: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.v3-breadcrumb a { color: rgba(255,255,255,0.9); text-decoration: none; border-bottom: 1px solid transparent; transition: border 0.2s;}
.v3-breadcrumb a:hover { border-color: var(--v3-accent); color: var(--v3-accent); }
.separator { opacity: 0.5; }

.v3-hero-badges-row { display: flex; justify-content: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.v3-badge-pro, .v3-badge-pepite { font-family: var(--font-head); font-weight: 800; text-transform: uppercase; font-size: 0.75rem; padding: 6px 14px; border-radius: 50px; letter-spacing: 0.5px; display: inline-flex; align-items: center; gap: 6px;}

/* Retour du badge Pro bien visible */
.v3-badge-pro { background: var(--v3-gold); color: #000; box-shadow: 0 0 15px rgba(212, 175, 55, 0.4); border: none; }
.v3-badge-pepite { background: var(--v3-accent); color: #fff; box-shadow: 0 0 15px rgba(255, 98, 51, 0.4); }

.v3-d-title { font-family: var(--font-head); font-weight: 800; font-size: clamp(2rem, 5vw, 3.5rem); color: #fff; margin: 0 0 15px; line-height: 1.1; letter-spacing: -1px; text-shadow: 0 5px 20px rgba(0,0,0,0.5);}
.v3-d-subtitle { font-family: var(--font-body); font-size: 1.2rem; color: rgba(255,255,255,0.85); margin: 0 auto 30px; max-width: 800px; line-height: 1.5; text-shadow: 0 2px 10px rgba(0,0,0,0.5);}

.v3-d-meta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.v3-meta-pill { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.2); padding: 10px 20px; border-radius: 50px; color: #fff; font-family: var(--font-head); font-size: 0.9rem; font-weight: 600; text-shadow: 0 2px 5px rgba(0,0,0,0.3);}
.v3-meta-pill i { color: var(--v3-accent); font-size: 1.1em; }

/* --- GRID & CARDS --- */
.v3-d-container { max-width: 1200px; margin: 0 auto; padding: 0 40px; position: relative; z-index: 20; }

.v3-d-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 40px;
    align-items: start;
}

/* FIX ABSOLU: Empêche la colonne principale de s'élargir à l'infini à cause des onglets */
.v3-d-main {
    min-width: 0;
}

.v3-d-card { background: var(--v3-card-bg); border: 1px solid var(--v3-border); border-radius: 20px; padding: 40px; box-shadow: 0 10px 40px rgba(0,0,0,0.05); margin-bottom: 30px; overflow-wrap: break-word; }

/* Typography Main */
.v3-d-card h2, .v3-d-card h3 { font-family: var(--font-head); font-weight: 800; color: var(--v3-text); margin-top: 0; letter-spacing: -0.5px;}
.v3-d-card h2 { font-size: 1.6rem; margin-bottom: 25px; border-left: 4px solid var(--v3-accent); padding-left: 15px; }
.v3-d-html { font-family: var(--font-body); font-size: 1.1rem; line-height: 1.8; color: var(--v3-text); }
.v3-d-html p { margin-bottom: 1.2rem; }
.v3-d-html a { color: var(--v3-accent); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(255,98,51,0.3); transition: all 0.2s;}
.v3-d-html a:hover { border-bottom-color: var(--v3-accent); }

/* --- BLOCS INTERNES EXCLUSIFS --- */

/* Vidéo */
.v3-video-container { padding: 0; overflow: hidden; position: relative; aspect-ratio: 16/9; border-radius: 20px;}
.v3-video-container iframe, .v3-video-container video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }

/* Galerie */
.v3-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 15px; }
.v3-gallery-item { aspect-ratio: 1/1; overflow: hidden; border-radius: 12px; cursor: pointer; }
.v3-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.v3-gallery-item:hover img { transform: scale(1.08); }

/* Onglets (Programme Jours) */
.v3-tabs-container {
    padding: 40px 30px;
    position: relative; /* Indispensable pour les ombres dynamiques */
    max-width: 100%;
}

/* Onglets (Programme Jours) */
.v3-tabs-container {
    padding: 40px 30px;
    max-width: 100%;
}

/* --- La barre de navigation avec Masque 100% CSS (Magie pure) --- */
.v3-tabs-nav {
    display: flex;
    flex-wrap: nowrap; /* Force sur une ligne */
    gap: 10px;
    margin-bottom: 25px;
    overflow-x: auto;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--v3-border);

    /* Rendre la scrollbar invisible partout */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Edge/IE */
    cursor: grab;

    /* ASTUCE PRO : Effet d'ombre dynamique selon le scroll (Sans JS !) */
    background:
    /* 1. Caches solides qui défilent avec les boutons (cachent l'ombre quand on est au bord) */
    linear-gradient(to right, var(--v3-card-bg) 30%, transparent) 0 0,
    linear-gradient(to left, var(--v3-card-bg) 30%, transparent) 100% 0,
    /* 2. Ombres fixes qui restent toujours aux extrémités */
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,0.12), transparent) 0 0,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.12), transparent) 100% 0;

    background-repeat: no-repeat;
    background-color: var(--v3-card-bg);
    /* Tailles : 40px pour les caches, 14px pour les ombres */
    background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;

    /* C'est ici que la magie opère : 'local' scrolle, 'scroll' reste fixe */
    background-attachment: local, local, scroll, scroll;
}

.v3-tabs-nav::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Edge : Cache la barre */
}
.v3-tabs-nav:active {
    cursor: grabbing;
}

/* --- Les boutons --- */
.v3-tab-btn {
    flex: 0 0 auto; /* Interdit au bouton de s'écraser */
    background: var(--v3-surface);
    border: 1px solid var(--v3-border);
    color: var(--v3-muted);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.9rem;
    padding: 12px 24px;
    border-radius: 50px;
    cursor: pointer;
    white-space: nowrap; /* Interdit au texte de passer à la ligne */
    transition: all 0.2s;
}
.v3-tab-btn:hover { border-color: var(--v3-accent); color: var(--v3-accent); }
.v3-tab-btn.is-active { background: var(--v3-accent); border-color: var(--v3-accent); color: #fff; box-shadow: 0 5px 15px rgba(255, 98, 51, 0.3); }

/* --- Le contenu --- */
.v3-tab-pane { display: none; animation: fadeIn 0.4s ease; padding-top: 10px; }
.v3-tab-pane.is-active { display: block; }
.v3-tab-pane-time { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 700; color: var(--v3-accent); background: rgba(255,98,51,0.1); padding: 6px 12px; border-radius: 6px; margin-bottom: 20px; font-size: 0.95rem; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Actions (Partage/ICS) */
.v3-actions-wrapper { display: flex; flex-direction: column; gap: 30px; }
.v3-actions-label { display: block; font-family: var(--font-head); font-size: 0.8rem; text-transform: uppercase; color: var(--v3-muted); font-weight: 700; margin-bottom: 15px; letter-spacing: 1px; }
.v3-actions-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.v3-btn-action { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; background: var(--v3-surface); border: 1px solid var(--v3-border); border-radius: 8px; color: var(--v3-text); font-family: var(--font-head); font-weight: 600; font-size: 0.9rem; cursor: pointer; text-decoration: none; transition: all 0.2s; }
.v3-btn-action:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.05); border-color: var(--v3-text); }
.v3-btn-google:hover i { color: #DB4437; }
.v3-btn-apple:hover i { color: #000; }
html[data-theme="dark"] .v3-btn-apple:hover i { color: #fff; }
.v3-btn-whatsapp:hover i { color: #25D366; }
.v3-btn-copy.success { background: #d4edda; color: #155724; border-color: #c3e6cb; }


/* --- SIDEBAR --- */
.v3-sticky-box { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 20px; }

.v3-card-poster { padding: 0; overflow: hidden; position: relative; cursor: pointer; border-radius: 16px; border: none;}
.v3-card-poster img { width: 100%; height: auto; display: block; transition: transform 0.4s; }
.v3-card-poster:hover img { transform: scale(1.03); }
.poster-hint { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); color: #fff; padding: 20px 10px 10px; text-align: center; font-family: var(--font-head); font-size: 0.8rem; opacity: 0; transition: opacity 0.3s; }
.v3-card-poster:hover .poster-hint { opacity: 1; }
.v3-mobile-poster { display: none; }
.v3-desktop-poster { display: block; margin-bottom: 0; }

.v3-card-infos { padding: 30px; }
.v3-card-infos h3 { font-size: 1.2rem; text-transform: uppercase; margin-bottom: 25px; border-bottom: 2px solid var(--v3-border); padding-bottom: 15px;}
.v3-info-list { list-style: none; padding: 0; margin: 0; }
.v3-info-list li { display: flex; gap: 15px; padding: 15px 0; border-bottom: 1px solid var(--v3-border); }
.v3-info-list li:last-child { border-bottom: none; padding-bottom: 0; }
.v3-info-icon { background: rgba(255,98,51,0.1); color: var(--v3-accent); font-size: 1.1rem; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.v3-info-content { display: flex; flex-direction: column; justify-content: center;}
.v3-info-content strong { font-family: var(--font-head); font-size: 0.75rem; text-transform: uppercase; color: var(--v3-muted); margin-bottom: 3px; letter-spacing: 0.5px;}
.v3-info-content span { font-family: var(--font-head); font-size: 0.95rem; color: var(--v3-text); font-weight: 700; line-height: 1.3;}
.v3-sub-info { font-family: var(--font-body); font-size: 0.85rem; color: var(--v3-muted); margin-top: 4px; }

/* FIX DU BOUTON VOIR SUR LA CARTE */
.v3-action-mt { margin-top: 25px; display: block; width: 100%; }

.v3-btn-outline {
    display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
    padding: 14px; background: var(--v3-surface); border: 1px solid var(--v3-border);
    color: var(--v3-text); font-family: var(--font-head); font-weight: 600; font-size: 0.9rem;
    text-transform: uppercase; text-decoration: none; border-radius: 8px; transition: all 0.3s;
}
.v3-btn-outline:hover { background: rgba(255,98,51,0.05); border-color: var(--v3-accent); color: var(--v3-accent); }

.v3-btn-back { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 15px; background: transparent; border: 2px solid var(--v3-border); color: var(--v3-text); font-family: var(--font-head); font-weight: 700; border-radius: 50px; text-decoration: none; transition: all 0.3s; margin-top: 10px; }
.v3-btn-back:hover { background: var(--v3-text); color: var(--v3-card-bg); border-color: var(--v3-text); }

/* Organisateur */
.v3-organizer-box { padding: 30px; }
.v3-organizer-box h3 { font-size: 1.1rem; text-transform: uppercase; margin-bottom: 20px; color: var(--v3-muted);}
.v3-org-header { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; }
.v3-org-logo { width: 60px; height: 60px; object-fit: contain; border-radius: 12px; border: 1px solid var(--v3-border); background: #fff; padding: 5px; }
.v3-org-header strong { font-family: var(--font-head); font-size: 1.1rem; color: var(--v3-text); display: block; margin-bottom: 5px;}
.v3-org-link { color: var(--v3-accent); font-family: var(--font-head); font-weight: 600; font-size: 0.85rem; text-decoration: none; display: inline-flex; align-items: center; gap: 5px;}
.v3-org-link:hover { text-decoration: underline; }
.v3-org-socials { display: flex; gap: 10px; }
.v3-btn-social-mini { width: 36px; height: 36px; border-radius: 50%; background: var(--v3-surface); border: 1px solid var(--v3-border); display: flex; align-items: center; justify-content: center; color: var(--v3-text); text-decoration: none; transition: all 0.2s; }
.v3-btn-social-mini:hover { background: var(--v3-accent); color: #fff; border-color: var(--v3-accent); transform: translateY(-2px);}

/* Billetterie */
.v3-booking-card { padding: 30px; border-top: 4px solid var(--v3-text); }
.v3-booking-card h3 { font-size: 1.2rem; text-transform: uppercase; margin-bottom: 20px; }
.v3-btn-primary { display: block; width: 100%; text-align: center; padding: 16px; background: var(--v3-accent); color: #fff; font-family: var(--font-head); font-weight: 700; text-transform: uppercase; text-decoration: none; border-radius: 8px; transition: all 0.3s; margin-bottom: 15px; box-shadow: 0 4px 15px rgba(255, 98, 51, 0.3);}
.v3-btn-primary:hover { background: var(--v3-accent-hover); transform: translateY(-2px); box-shadow: 0 8px 25px rgba(255, 98, 51, 0.4); }
.v3-stock-alert { color: #ef4444; font-family: var(--font-head); font-weight: 700; font-size: 0.9rem; text-align: center; display: flex; align-items: center; justify-content: center; gap: 6px;}
.v3-booking-status { text-align: center; font-family: var(--font-head); font-weight: 700; padding: 12px; border-radius: 8px; margin-bottom: 15px; }
.status-full { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5;}
.status-required { background: var(--v3-surface); color: var(--v3-text); border: 1px solid var(--v3-border);}
.v3-booking-note { font-size: 0.85rem; color: var(--v3-muted); font-style: italic; text-align: center; margin-top: 10px; line-height: 1.4;}

/* --- MODE PRO --- */
.v3-d-layout.v3-mode-pro .v3-d-card.is-pro { background: #1a1a1a; border: 1px solid var(--v3-gold); box-shadow: 0 10px 30px rgba(212, 175, 55, 0.1); }
.v3-d-layout.v3-mode-pro .v3-d-card.is-pro h3,
.v3-d-layout.v3-mode-pro .v3-d-card.is-pro .v3-info-content span { color: #ffffff; }
.v3-d-layout.v3-mode-pro .v3-d-card.is-pro .v3-info-icon { background: rgba(212, 175, 55, 0.15); color: var(--v3-gold); }
.v3-d-layout.v3-mode-pro .v3-d-card.is-pro .v3-info-content strong,
.v3-d-layout.v3-mode-pro .v3-d-card.is-pro .v3-sub-info { color: #999999; }
.v3-d-layout.v3-mode-pro .v3-d-card.is-pro .v3-info-list li { border-color: #333333; }

/* --- LIGHTBOX --- */
.v3-lightbox-modal { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.95); z-index: 9999; display: none; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(5px);}
.v3-lightbox-content { max-width: 95%; max-height: 90vh; object-fit: contain; border-radius: 8px; box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
.v3-lightbox-close { position: absolute; top: 30px; right: 30px; background: rgba(255,255,255,0.1); border: none; color: #fff; font-size: 2rem; width: 50px; height: 50px; border-radius: 50%; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center;}
.v3-lightbox-close:hover { background: var(--v3-accent); transform: scale(1.1); }


/* ============================================================
 * MOBILE OPTIMISATIONS (MAX 980px)
 * ============================================================ */
@media (max-width: 980px) {
    .v3-d-hero { padding-top: 100px; height: auto; min-height: auto; margin-bottom: 0;}
    .v3-d-hero-content { padding: 40px 20px 60px; }

    .v3-d-grid { grid-template-columns: 1fr; gap: 30px; }
    .v3-d-container { padding: 0 20px; margin-top: -30px; }

    .v3-d-card { padding: 25px 20px; margin-bottom: 20px; border-radius: 16px;}

    .v3-mobile-poster { display: block; }
    .v3-desktop-poster { display: none; }

    .v3-meta-pill { padding: 8px 16px; font-size: 0.85rem; flex: 1 1 auto; justify-content: center; text-align: center; }
    .v3-btn-action { flex: 1 1 100%; justify-content: center; }

    .v3-tabs-container { padding: 25px 15px; }
}

/* Navigation Lightbox */
.v3-lightbox-prev, .v3-lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.1);
    border: none;
    color: #fff;
    font-size: 1.5rem;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}
.v3-lightbox-prev:hover, .v3-lightbox-next:hover {
    background: var(--v3-accent);
    transform: translateY(-50%) scale(1.1);
}
.v3-lightbox-prev { left: 20px; }
.v3-lightbox-next { right: 20px; }

.v3-lightbox-counter {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,0.6);
    font-family: var(--font-head);
    font-size: 0.9rem;
    letter-spacing: 1px;
}

/* Réduction sur mobile */
@media (max-width: 800px) {
    .v3-lightbox-prev { left: 10px; width: 40px; height: 40px; font-size: 1.2rem; }
    .v3-lightbox-next { right: 10px; width: 40px; height: 40px; font-size: 1.2rem; }
}