/* ==========================================================================
   📦 POLICES DE CARACTÈRES ET CONFIGURATION DE BASE
   ========================================================================== */
@font-face {
    font-family: 'Playfair Local';
    src: url('fonts/playfair-black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
}

body {
    background-color: #fdfbf7; 
    color: #111111;
    font-family: 'Georgia', 'Times New Roman', serif;
    margin: 0;
    padding: 20px;
    line-height: 1.5;
    position: relative;
}

/* 🪄 LE VOILE DE PAPIER FROISSÉ PAR-DESSUS LE SITE */
body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: url('bedge-grunge.png'); /* Votre texture de papier journal unique */
    background-size: cover;
    background-repeat: no-repeat;
    pointer-events: none; 
    mix-blend-mode: multiply; 
    opacity: 0.35; 
    z-index: 9999;
}

/* Filtre Sépia global appliqué au contenu */
.journal-container {
    max-width: 1100px;
    margin: 0 auto;
    border: 1px solid #111111;
    padding: 20px;
    background-color: #fdfbf7;
    box-shadow: 0 0 12px rgba(0,0,0,0.05);
    filter: sepia(55%) contrast(92%) brightness(108%); 
}

/* ==========================================================================
   🏛️ MANCHETTE GÉOMÉTRIQUE EN COMPACT (PC ET GRANDS ÉCRANS)
   ========================================================================== */
header {
    text-align: center;
    border-bottom: 4px double #111111;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.bloc-manchette {
    display: flex;
    flex-direction: column;
    align-items: center; 
    text-align: center;
    width: 100%;
    margin-bottom: 15px;
}

/* Ligne 1 : MULTIZIC (Le repère de largeur principal) */
h1.manchette-titre {
    font-family: 'Playfair Local', 'Georgia', serif;
    font-size: 5.5rem !important; 
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: -2px;
    margin: 0;
    line-height: 0.95;
    display: inline-block;
}

/* 🪄 LA BOÎTE MAGIQUE : Calage au millimètre sur les bords de MULTIZIC */
.manchette-sous-titres {
    width: 100%;
    max-width: 550px; 
    margin: 8px auto 0 auto;
    font-family: 'Georgia', 'Times New Roman', serif;
    text-transform: uppercase;
}

/* Ligne 2 : LE MONDE CHANGE (Un poil plus gros et intense) */
.manchette-ligne2 {
    font-size: 1.85rem !important; 
    font-weight: 900; 
    font-style: normal;
    line-height: 1.2;
    margin: 4px 0;
    text-align: justify;
    text-align-last: justify; 
}

/* Ligne 3 : Chansons Manuscrites (Un poil plus petit pour le relief visuel) */
.manchette-ligne3 {
    font-size: 1.55rem !important; 
    font-weight: bold;
    font-style: normal;
    line-height: 1.2;
    margin: 4px 0;
    text-align: justify;
    text-align-last: justify; 
}

/* ==========================================================================
   🚨 BARRE D'INFOS CENTRÉE ET AÉRÉE
   ========================================================================== */
.infos-barre {
    border-top: 1px solid #111111;
    padding: 10px 0;
    display: flex;
    justify-content: space-between; 
    align-items: center; 
    font-size: 0.8rem;
    text-transform: uppercase;
    font-family: 'Arial', sans-serif;
    width: 100%;
    max-width: 550px; 
    margin: 5px auto 0 auto; 
}

.info-bloc {
    flex: 1;
    text-align: center;
}

.auteur-bloc {
    font-weight: bold;
    line-height: 1.3;
}

/* Interactivity du bouton gris-crème du formulaire */
.btn-gazette:hover {
    background-color: #e4decb !important;
    color: #000000 !important;
}

/* ==========================================================================
   📰 MAQUETTE ÉDITORIALE EN COLONNES
   ========================================================================== */
.une-section {
    display: grid;
    grid-template-columns: 1.8fr 1.2fr;
    gap: 24px;
    border-bottom: 1px solid #111111;
    padding-bottom: 24px;
    margin-bottom: 24px;
}

.media-cadre {
    border: 1px solid #111111;
    background-color: #111111;
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 16 / 9;
}

.media-cadre video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-legende {
    font-size: 0.85rem;
    font-style: italic;
    margin-top: 8px;
    color: #333333;
}

h2.gros-titre {
    font-size: 2.1rem;
    text-transform: uppercase;
    margin-top: 0;
    line-height: 1.15;
}

.chapeau {
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 15px;
}

.texte-article {
    text-align: justify;
    font-size: 0.95rem;
}

.texte-article::first-letter {
    font-size: 3.5rem;
    float: left;
    line-height: 0.8;
    margin-right: 8px;
    font-weight: bold;
}

.colonnes-bas {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
}

.colonne {
    border-right: 1px solid #dddddd;
    padding-right: 15px;
}

.colonne:last-child {
    border-right: none;
    padding-right: 0;
}

.colonne h3 {
    border-bottom: 2px solid #111111;
    padding-bottom: 6px;
    text-transform: uppercase;
    font-size: 0.95rem;
    margin-top: 0;
    margin-bottom: 14px;
}

.depeche-item {
    font-size: 0.9rem;
    margin-bottom: 12px;
    border-bottom: 1px dashed #eaeaea;
    padding-bottom: 8px;
}

.encart-audio {
    border: 2px dashed #111111;
    padding: 12px;
    background-color: #f7f4eb;
}

audio { width: 100%; margin-top: 4px; }

/* ==========================================================================
   🛗 CONFIGURATION DE L'ASCENSEUR GÉANT POUR LES CONCERTS
   ========================================================================== */
#liste-dates {
    max-height: 720px; /* S'étire élégamment jusqu'au bas du journal */
    overflow-y: auto;  /* L'ascenseur s'affiche uniquement s'il y a trop de concerts */
    padding-right: 12px;
}

.archives-scene {
    font-size: 0.78rem !important; /* Format petites dépêches d'archives */
    opacity: 0.65; 
    line-height: 1.2;
}

/* Style de la barre d'ascenseur avec un fin filet rouge discret */
#liste-dates::-webkit-scrollbar {
    width: 5px;
}
#liste-dates::-webkit-scrollbar-track {
    background: #f7f4eb; 
    border-left: 1px dashed #111111;
}
#liste-dates::-webkit-scrollbar-thumb {
    background: #bc0000; 
    border-radius: 2px;
}

/* ==========================================================================
   📱 BINDAGE DE SÉCURITÉ RESPONSIVE (POUR ÉCRANS DE TÉLÉPHONES PORTABLES)
   ========================================================================== */
@media (max-width: 850px) {
    .une-section { grid-template-columns: 1fr; }
    .colonnes-bas { grid-template-columns: 1fr; }
    .colonne { border-right: none; border-bottom: 1px solid #dddddd; padding-bottom: 15px; margin-bottom: 15px; }
    .colonne:last-child { border-bottom: none; margin-bottom: 0; }
    
    h1.manchette-titre { 
        font-size: 3.2rem !important; /* MULTIZIC s'adapte à la largeur du mobile */
    }
    .manchette-sous-titres {
        max-width: 100% !important;
    }
    
    /* 🔒 LE MONDE CHANGE : Interdiction absolue de sauter à la ligne et centré */
    .manchette-ligne2 { 
        font-size: 1.3rem !important; 
        font-weight: 900;
        text-align: center !important;
        text-align-last: center !important;
        letter-spacing: 1px !important;
        white-space: nowrap !important; /* Coupe l'étirement et soude la ligne */
        display: block !important;
    }
    
    /* 🔒 Chansons Manuscrites : Fixé sur une seule ligne centrée */
    .manchette-ligne3 { 
        font-size: 1.1rem !important; 
        text-align: center !important;
        text-align-last: center !important;
        letter-spacing: 0.5px !important;
        white-space: nowrap !important;
        display: block !important;
    }
    
    .infos-barre {
        flex-direction: column; /* Empile l'édition spéciale, la signature et le prix */
        gap: 10px !important;
        text-align: center !important;
    }
}

/* 📱 LOOK JOURNAL MODERNE : On retire le sépia pour avoir du vrai blanc lumineux sur téléphone */
@media (max-width: 768px) {
    body {
        background-color: #f4f4f2 !important; /* Fond gris-blanc papier très léger */
    }
    
    /* 🪄 LA LIGNE MAGIQUE : On remet le filtre à zéro (pas de sépia sur téléphone !) */
    .journal-container {
        filter: none !important; 
        background-color: #ffffff !important;
    }
    
    /* Les encadrés deviennent d'un blanc pur et éclatant */
    div[style*="background-color: #f7f4eb"], 
    div[style*="background-color: #fdfbf7"],
    .encart-audio,
    .depeche-item {
        background-color: #ffffff !important;
        border-color: #111111 !important;
    }
}

/* ==========================================================================
   🎬 DESIGN DE LA PAGE CONCERT (CONCERT COMPLET)
   ========================================================================== */
.concert-main {
    margin-top: 20px;
}

/* Cadre vidéo noir et responsive 16:9 aux normes du journal */
.video-cadre-large {
    border: 1px solid #111111;
    background-color: #111111;
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-bottom: 25px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.video-cadre-large iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Grille pour la Setlist (Programme) */
.programme-titre {
    font-family: 'Playfair Local', 'Georgia', serif;
    border-bottom: 2px solid #111111;
    padding-bottom: 6px;
    text-transform: uppercase;
    font-size: 1.2rem;
    margin-top: 30px;
    margin-bottom: 15px;
    letter-spacing: 0.5px;
}

.setlist-grille {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 40px;
}

.setlist-colonne {
    margin: 0;
    padding: 0;
    list-style: none;
}

.setlist-colonne li {
    font-size: 0.95rem;
    padding: 8px 0;
    border-bottom: 1px dashed #dddddd;
    display: flex;
    align-items: baseline;
}

.setlist-colonne li .num {
    font-weight: bold;
    color: #bc0000; /* Rappel du rouge Édition Spéciale */
    margin-right: 8px;
    font-family: sans-serif;
    font-size: 0.85rem;
}

.action-retour {
    text-align: center;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #111111;
}

.btn-retour-une {
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid #111111;
    background-color: #f7f4eb;
    color: #111111;
    font-family: sans-serif;
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: bold;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-retour-une:hover {
    background-color: #e4decb;
}

/* Sécurité mobile pour la grille des morceaux */
@media (max-width: 650px) {
    .setlist-grille { 
        grid-template-columns: 1fr; 
        gap: 10px; 
    }
}

/* ==========================================================================
   📋 DESIGN DE LA PAGE FICHE TECHNIQUE COMPLÈTE (AVEC PATCH LIST)
   ========================================================================== */
.fiche-box {
    margin: 20px auto;
    padding: 20px 0;
}

h3.section-tech {
    font-family: 'Playfair Local', 'Georgia', serif;
    border-bottom: 1px solid #111111;
    padding-bottom: 5px;
    text-transform: uppercase;
    font-size: 1.1rem;
    margin-top: 30px;
    margin-bottom: 12px;
    letter-spacing: 0.5px;
}

.fiche-box ul {
    padding-left: 20px;
    margin-bottom: 20px;
}

.fiche-box li {
    font-size: 0.95rem;
    margin-bottom: 6px;
}
/* 🎯 CORRECTION : Centre parfaitement les sous-titres de la manchette sur la fiche technique */
.fiche-box ~ footer, 
.fiche-main ~ footer,
.fiche-box, 
.fiche-main {
    /* Ce ciblage permet de savoir qu'on est sur une page technique */
}

/* Force le centrage uniquement pour l'en-tête de la fiche technique */
.fiche-box ~ header .manchette-ligne2,
.fiche-box ~ header .manchette-ligne3,
body:has(.fiche-box) .manchette-ligne2,
body:has(.fiche-box) .manchette-ligne3,
body:has(.fiche-main) .manchette-ligne2,
body:has(.fiche-main) .manchette-ligne3 {
    text-align: center !important;
    text-align-last: center !important;
    width: auto;
}


/* 🪄 CONTENEUR TABLEAU COMPATIBILITÉ MOBILE */
.conteneur-tableau-mobile {
    width: 100%;
    overflow-x: auto; /* Active le glissement horizontal sur smartphone */
    -webkit-overflow-scrolling: touch;
    border: 1px solid #111111;
    margin-top: 15px;
    margin-bottom: 15px;
    background-color: #fdfbf7;
}

table.patch-list {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    min-width: 650px; /* Empêche le tableau de s'écraser sur petit écran */
}

table.patch-list th, table.patch-list td {
    border: 1px solid #111111;
    padding: 10px;
    text-align: left;
    vertical-align: top;
}

table.patch-list th {
    background-color: #f7f4eb;
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: bold;
    letter-spacing: 0.5px;
}

table.patch-list td strong {
    color: #111111;
}

.action-retour {
    text-align: center;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #111111;
}

.btn-retour-une {
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid #111111;
    background-color: #f7f4eb;
    color: #111111;
    font-family: sans-serif;
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: bold;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-retour-une:hover {
    background-color: #e4decb;
}

/* 🍿 RETIRE LE VOILE DE PAPIER FROISSÉ UNIQUEMENT PAR-DESSUS LA VIDÉO */
.video-cadre-large {
    position: relative;
    z-index: 10000; /* Force la vidéo à passer au-dessus de la texture papier */
}